/* ==========================================================================
   Screen styles — Home, Ladder, Shop, Profile, Results, Finding.
   ========================================================================== */

/* shared inline currency glyphs */
.coin-inline { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; font-size:8px; letter-spacing:-0.5px; font-weight:800; color:#3a2a06; background:radial-gradient(circle at 38% 30%,#F7CF69,#E0A42C 70%); vertical-align:middle; }
.gem-inline { display:inline-block; width:16px; height:16px; vertical-align:middle; background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23FBD97A'/><stop offset='1' stop-color='%23D89B22'/></linearGradient></defs><g stroke='%237E5A12' stroke-width='0.9' stroke-linejoin='round'><path d='M2.2 13.3 L10.8 13.3 L11.9 18.9 L1.1 18.9 Z' fill='url(%23g)'/><path d='M13.2 13.3 L21.8 13.3 L22.9 18.9 L12.1 18.9 Z' fill='url(%23g)'/><path d='M7.7 6.5 L16.3 6.5 L17.4 12.1 L6.6 12.1 Z' fill='url(%23g)'/></g><g stroke='%23FCE7A8' stroke-width='0.9' stroke-linecap='round' opacity='0.8' fill='none'><path d='M3.1 14.4 L10 14.4'/><path d='M14.1 14.4 L21 14.4'/><path d='M8.6 7.6 L15.4 7.6'/></g></svg>") center/contain no-repeat; }

/* ======================= HOME ======================= */
.home__greet { line-height:1.1; }
.home__body { flex:1; display:flex; gap:18px; padding:8px 22px 20px; min-height:0; }
.home__guest { display:flex; align-items:center; gap:10px; padding:9px 12px 9px 14px; border-radius:14px; background:linear-gradient(100deg, rgba(224,164,44,.17), rgba(224,164,44,.055)); border:1px solid var(--line-gold-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.home__guestIco { font-size:15px; }
.home__guestTxt { flex:1; font-size:12.5px; line-height:1.25; color:var(--bone); font-weight:600; }
.home__guestBtn { padding:7px 16px; font-size:12px; white-space:nowrap; }
.home__hero { flex:0 0 38%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:22px 20px; isolation:isolate; }
.home__hero::after { z-index:0; left:50%; right:auto; top:7%; width:230px; height:230px; border-radius:50%; transform:translateX(-50%); background:radial-gradient(circle,rgba(224,164,44,.13),rgba(224,164,44,.03) 46%,transparent 72%); }
.home__parol { z-index:2; width:152px; height:152px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle,rgba(247,207,105,.14),rgba(224,164,44,.045) 48%,rgba(3,24,18,.18) 68%,transparent 70%); box-shadow:inset 0 0 0 1px rgba(247,207,105,.10); filter:drop-shadow(0 0 24px rgba(224,164,44,.32)); }
.home__tier { z-index:2; text-align:center; width:100%; }
.home__tiername { font-size:34px; letter-spacing:2px; }
.home__tiersub { font-size:12px; margin-top:4px; }
.home__rp { display:flex; align-items:center; gap:10px; margin-top:14px; font-size:11px; color:var(--bone-dim); }
.home__tonext { font-size:11px; margin-top:8px; }

.home__right { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.home__play { width:100%; min-height:68px; padding:12px 16px; justify-content:flex-start; border-radius:18px; text-align:left; }
.home__playIco { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:rgba(58,42,6,.10); box-shadow:inset 0 0 0 1px rgba(58,42,6,.10); }
.home__playIco .play-tri { border-left-width:10px; border-top-width:7px; border-bottom-width:7px; margin-left:2px; }
.home__playCopy { flex:1; display:flex; flex-direction:column; align-items:flex-start; line-height:1.12; }
.home__playTitle { font-size:22px; font-family:var(--font-display); }
.home__playArrow { width:30px; height:30px; display:grid; place-items:center; border-radius:999px; background:rgba(58,42,6,.09); font-size:19px; transition:transform .15s, background .15s; }
.home__play:hover .home__playArrow { transform:translateX(3px); background:rgba(58,42,6,.14); }
.home__variant { display:flex; align-items:center; gap:8px; width:100%; min-height:40px; text-align:left; padding:9px 12px; border-radius:14px; background:rgba(0,0,0,.24); border:1px solid var(--line-gold); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); transition:background .15s,border-color .15s; }
.home__variant:hover { background:rgba(0,0,0,.31); border-color:var(--line-gold-2); }
.home__variantIco { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; color:var(--gold-hi); background:rgba(224,164,44,.10); font-size:13px; }
.home__variantLabel { color:var(--bone-dim); font-size:12px; }
.home__variantName { flex:1; font-weight:700; color:var(--bone-bright); font-size:13px; }
.home__variantArrow { color:var(--bone-dim); font-size:15px; }
.home__modes { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.home__mode { position:relative; overflow:hidden; min-width:0; padding:14px 12px; text-align:left; border-radius:16px; display:flex; align-items:center; gap:11px; transition:transform .14s ease, box-shadow .18s ease, border-color .15s; }
.home__mode:hover { transform:translateY(-3px); box-shadow:0 8px 26px rgba(0,0,0,.34); }
.home__modeCopy { position:relative; z-index:2; display:flex; flex:1; min-width:0; flex-direction:column; }
.home__modeTitle { font-weight:800; color:var(--bone-bright); font-size:16px; line-height:1.2; }
.home__modeSub { color:var(--bone-dim); font-size:11.5px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home__modeGlow { position:absolute; inset:0; z-index:0; pointer-events:none; }
/* Solid accent icon plate (dark glyph on the mode's own color) — the anchor
   that makes each button pop; per-mode background set below. */
.home__modeIco { position:relative; z-index:2; width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:13px; border:1px solid rgba(255,255,255,.22); font-size:22px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); transition:transform .18s ease; }
.home__mode:hover .home__modeIco { transform:scale(1.06) rotate(-3deg); }
.home__modeArrow { position:relative; z-index:2; color:var(--bone-faint); font-size:20px; line-height:1; transition:transform .15s,color .15s; }
.home__mode:hover .home__modeArrow { transform:translateX(2px); color:var(--bone); }
/* per-mode theming — a full-bleed hue wash + corner glow + solid icon plate so
   each mode reads as a colored button, peer to the gold Play bar. */
.home__mode--casual  { border-color:rgba(47,163,119,.75); border-width:1.3px; }
.home__mode--casual  .home__modeGlow  { background:linear-gradient(135deg, rgba(47,163,119,.34), rgba(47,163,119,.10)), radial-gradient(120% 95% at 90% 118%, rgba(47,163,119,.45), transparent 65%); }
.home__mode--casual  .home__modeIco   { background:linear-gradient(135deg, #58b58f, #2fa377 55%, #20785a); color:#06231a; box-shadow:0 4px 12px rgba(47,163,119,.38); }
.home__mode--bots    { border-color:rgba(79,176,200,.75); border-width:1.3px; }
.home__mode--bots    .home__modeGlow  { background:linear-gradient(135deg, rgba(79,176,200,.34), rgba(79,176,200,.10)), radial-gradient(120% 95% at 90% 118%, rgba(79,176,200,.45), transparent 65%); }
.home__mode--bots    .home__modeIco   { background:linear-gradient(135deg, #74c2d6, #4fb0c8 55%, #38859c); color:#06231a; box-shadow:0 4px 12px rgba(79,176,200,.38); }
.home__mode--private { border-color:rgba(161,115,214,.75); border-width:1.3px; }
.home__mode--private .home__modeGlow  { background:linear-gradient(135deg, rgba(161,115,214,.34), rgba(161,115,214,.10)), radial-gradient(120% 95% at 90% 118%, rgba(161,115,214,.45), transparent 65%); }
.home__mode--private .home__modeIco   { background:linear-gradient(135deg, #b691dd, #a173d6 55%, #7d54ab); color:#06231a; box-shadow:0 4px 12px rgba(161,115,214,.38); }
.home__cards { display:grid; grid-template-columns:1.35fr 1fr; gap:12px; flex:1; min-height:0; }
.home__season { padding:16px 18px; display:flex; flex-direction:column; justify-content:center; gap:4px; cursor:pointer; transition:border-color .15s,transform .15s; }
.home__season:hover { border-color:var(--line-gold-2); transform:translateY(-2px); }
.home__seasonName { font-size:20px; }
.home__seasonGlow { position:absolute; right:-30px; top:-30px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,rgba(224,164,44,.32),transparent 70%); }
.home__season .eyebrow { color:rgba(224,164,44,.92); }
.home__daily { padding:14px 16px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.home__dailyTop { display:flex; align-items:center; gap:10px; }
.home__dailyPip { width:34px; height:34px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:15px; color:#3a2a06; background:var(--grad-gold); box-shadow:0 7px 16px rgba(224,164,44,.18),inset 0 1px 0 rgba(255,255,255,.35); }
.home__dailyTitle { font-weight:700; color:var(--bone-bright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home__claim { width:100%; padding:9px 16px; font-size:14px; }

@media (orientation: landscape) and (max-height:420px) {
  .home__body { gap:10px; padding:3px 10px 7px; }
  .home__hero { flex-basis:39%; gap:7px; padding:10px 12px; }
  .home__hero::after { width:150px; height:150px; }
  .home__parol { width:84px; height:84px; }
  .home__parol svg { width:76px !important; height:76px !important; }
  .home__tiersub { font-size:10px; margin-top:1px; }
  .home__rp { gap:7px; margin-top:7px; font-size:9px; }
  .home__tonext { font-size:9px; margin-top:4px; }
  .home__right { gap:5px; }
  .home__guest { gap:7px; padding:5px 7px 5px 9px; border-radius:11px; }
  .home__guestIco { font-size:11px; }
  .home__guestTxt { font-size:10.5px; }
  .home__guestBtn { padding:5px 11px; font-size:10px; }
  .home__play { min-height:49px; padding:7px 10px; border-radius:14px; gap:8px; }
  .home__playIco { width:30px; height:30px; border-radius:9px; }
  .home__playTitle { font-size:18px; }
  .home__play .btn__sub { font-size:9.5px; }
  .home__playArrow { width:25px; height:25px; font-size:15px; }
  .home__variant { min-height:31px; padding:4px 8px; border-radius:11px; gap:6px; }
  .home__variantIco { width:21px; height:21px; font-size:11px; }
  .home__variantLabel { font-size:10px; }
  .home__variantName { font-size:11px; }
  .home__modes { gap:6px; }
  .home__mode { padding:9px 8px; gap:7px; border-radius:12px; }
  .home__modeIco { width:32px; height:32px; border-radius:9px; font-size:16px; }
  .home__modeTitle { font-size:12.5px; }
  .home__modeSub { font-size:9.5px; }
  .home__modeArrow { display:none; }
  .home__cards { gap:6px; }
  .home__season { padding:8px 10px; gap:1px; border-radius:14px; }
  .home__seasonName { font-size:15px; }
  .home__season .eyebrow { font-size:8px; }
  .home__season .muted { font-size:9px !important; }
  .home__daily { padding:7px 9px; gap:5px; border-radius:14px; }
  .home__dailyTop { gap:7px; }
  .home__dailyPip { width:27px; height:27px; border-radius:8px; font-size:12px; }
  .home__dailyTitle { font-size:11px; }
  .home__daily .muted { font-size:9px !important; }
  .home__claim { padding:5px 8px; font-size:10.5px; }
}

/* ======================= LADDER ======================= */
.pill-season, .pill-round, .pill-wall, .pill-last, .pill-pass {
  display:inline-block; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600;
  background:rgba(8,26,20,.6); border:1px solid var(--line-gold); color:var(--bone);
}
/* Fit the whole ladder in the viewport: keep the base .screen flex-column, hold the
   header + rank strip at their natural height (flex:0 0 auto so the column can't
   squeeze the strip), and let the bottom row GROW to fill the rest (flex:1). The
   leaderboard then scrolls INTERNALLY — more names show, and the page never scrolls. */
.ladder__head { margin:2px 0 14px; flex:0 0 auto; }
.ladder__strip { display:flex; gap:10px; margin-bottom:16px; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:8px; scroll-snap-type:x proximity; flex:0 0 auto; }
.ladder__strip > .tiercell { flex:0 0 116px; scroll-snap-align:start; }
.ladder__strip::-webkit-scrollbar { height:6px; }
.ladder__strip::-webkit-scrollbar-thumb { background:rgba(224,164,44,.35); border-radius:3px; }
.tiercell__name { line-height:1.14; min-height:2.1em; display:flex; align-items:center; justify-content:center; }
.tiercell { position:relative; border-radius:16px; padding:12px 8px 10px; text-align:center; background:var(--felt-card); border:1px solid var(--line-gold); display:flex; flex-direction:column; align-items:center; gap:5px; }
.tiercell--current { border-color:var(--marigold); box-shadow:0 0 0 1px var(--marigold), 0 0 26px rgba(224,164,44,.28); background:radial-gradient(120% 120% at 50% 0,#1c6a4c,#0c3b2c 70%); }
.tiercell--locked { opacity:.72; }
.tiercell--locked .tiercell__parol { filter:grayscale(.4) brightness(.85); }
.tiercell__name { font-weight:800; font-family:var(--font-display); font-size:13px; color:var(--bone-bright); }
.tiercell__rp { font-size:11px; }
.tiercell__badge { color:var(--bamboo-hi); font-size:13px; height:18px; display:grid; place-items:center; }
.tiercell--locked .tiercell__badge { color:var(--bone-faint); }
.tiercell__badge .you { font-size:9px; font-weight:800; letter-spacing:.5px; color:#3a2a06; background:var(--grad-gold); padding:2px 8px; border-radius:999px; }
.tiercell__apex { font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--gold-hi); font-weight:700; }

/* Two columns that fill the remaining viewport height: LEFT stacks the rank strip
   (natural height, top) + the you-here card (fills the rest); RIGHT is the full-height
   leaderboard panel, which scrolls internally to show many names. */
.ladder__main { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:14px; flex:1 1 auto; min-height:0; }
.ladder__left { display:flex; flex-direction:column; gap:14px; min-height:0; }
.ladder__left > .ladder__strip { margin-bottom:0; }
.ladder__right { display:flex; min-height:0; }
.ladder__right > .ladder__board { flex:1 1 auto; }
.ladder__here { padding:16px; display:flex; gap:14px; align-items:center; flex:1 1 auto; min-height:0; }
.ladder__hereParol { flex:0 0 auto; filter:drop-shadow(0 0 18px rgba(224,164,44,.3)); }
.ladder__hereBody { flex:1; min-width:0; }
.ladder__hereBar { margin-top:8px; }
.ladder__protect { margin-top:10px; font-size:11px; color:var(--bamboo-hi); display:flex; align-items:center; gap:6px; }
.ladder__board { padding:14px 16px; display:flex; flex-direction:column; min-height:0; }
.ladder__boardHead { display:flex; justify-content:space-between; align-items:baseline; font-weight:700; color:var(--bone-bright); font-size:14px; margin-bottom:8px; }
.ladder__rows { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.ladder__rows::-webkit-scrollbar { width:6px; }
.ladder__rows::-webkit-scrollbar-thumb { background:rgba(224,164,44,.35); border-radius:3px; }
.ladder__board > .lbrow--you { margin-top:6px; padding-top:8px; border-top:1px solid rgba(224,164,44,.18); }
.lbrow { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; font-size:13px; }
.lbrow:nth-child(odd) { background:rgba(255,255,255,.02); }
.lbrow--you { background:rgba(224,164,44,.14); border:1px solid var(--line-gold-2); }
.lbrow__rank { width:34px; color:var(--bone-dim); font-size:12px; }
.lbrow__ava { width:24px; height:24px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; }
.lbrow__name { flex:1; color:var(--bone); }
.lbrow__rp { font-weight:700; color:var(--bone-bright); }

/* ======================= SHOP ======================= */
/* The shop is a fixed header over a scrolling catalog: the title/tabs and the
   two convenience cards (watch-to-earn + remove-ads) stay pinned at the top;
   only the season pass + cosmetics grid scroll beneath them. */
.screen.shop { overflow:hidden; }
.shop__fixed { flex:0 0 auto; padding:0 22px; }
.shop__scroll { flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 22px 20px; }
.shop__head { display:flex; align-items:center; gap:18px; margin:2px 0 12px; flex:0 0 auto; }
.shop__tabs { flex:1; }
.shop__pass { display:flex; align-items:center; gap:16px; padding:12px 16px; margin-bottom:14px; flex:0 0 auto; }
.shop__passInfo { flex:0 0 auto; }
.shop__passLanes { flex:1; display:flex; flex-direction:column; gap:7px; }
.shop__lane { display:flex; align-items:center; gap:10px; }
.shop__laneLbl { width:34px; font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
.pips { display:flex; gap:4px; flex:1; }
.pip { flex:1; height:11px; border-radius:3px; background:rgba(255,255,255,.06); }
.pip--free { background:linear-gradient(180deg,#3AA277,#227A54); }
.pip--pass { background:var(--grad-gold); }
.shop__passBtn { padding:9px 16px; font-size:13px; }

.shop__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:12px; }
.cosmetic { position:relative; padding:12px; display:flex; flex-direction:column; gap:6px; }
.cosmetic__rarity { position:absolute; top:8px; left:8px; font-size:8.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:2px 7px; border-radius:999px; border:1px solid; background:rgba(4,16,12,.55); z-index:3; }
.cosmetic__preview--avatars, .cosmetic__preview--emotes { align-items:center; }
.cosmetic__preview--avatars { height:78px; background:radial-gradient(circle at 50% 44%,rgba(247,207,105,.16),#17553f 48%,#0c3b2c 76%); }
.cosmetic__ava { width:68px; height:68px; border-radius:50%; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.28),0 0 0 2px rgba(247,207,105,.22),inset 0 1px 0 rgba(255,255,255,.18); }
.cosmetic__emote { display:flex; flex-direction:column; align-items:center; gap:3px; }
.cosmetic__emoteGlyph { font-size:32px; line-height:1; }
.cosmetic__emoteTxt { font-size:12px; color:var(--bone); font-weight:600; text-align:center; }
.cosmetic__flag { position:absolute; top:8px; right:8px; font-size:9px; font-weight:800; letter-spacing:.4px; color:#06281c; background:var(--grad-bamboo); padding:3px 8px; border-radius:999px; z-index:3; }
.cosmetic__preview { display:flex; gap:6px; justify-content:center; align-items:flex-end; height:64px; padding:6px 0; background:radial-gradient(circle at 50% 30%,#17553F,#0C3B2C); border-radius:12px; }
.cosmetic__felt { border:1px solid var(--line-gold); }
.cosmetic__name { font-weight:700; color:var(--bone-bright); font-size:14px; }
.cosmetic__sub { font-size:11px; margin-top:-2px; }
.cosmetic__foot { margin-top:auto; }
.cosmetic__btn { width:100%; padding:9px; font-size:13px; }
.shop__soon { grid-column:1/-1; padding:26px; text-align:center; }

.shop__footer { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
@media (max-width:560px) { .shop__footer { grid-template-columns:1fr; } }
.shop__foot { display:flex; align-items:center; gap:12px; padding:12px 16px; text-align:left; }
.shop__foot b { color:var(--bone-bright); font-size:14px; }
.shop__footIco { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(47,138,99,.2); }
.shop__footIco--no { background:rgba(190,58,43,.18); color:var(--lacquer); font-size:20px; }
.shop__footBtn { margin-left:auto; padding:8px 14px; font-size:13px; }

/* ======================= PROFILE ======================= */
.profile__body { flex:1; display:flex; flex-direction:column; gap:12px; padding-bottom:8px; }
.profile__hero { padding:16px; display:flex; align-items:center; gap:14px; }
.profile__ava { width:56px; height:56px; border-radius:16px; overflow:hidden; display:grid; place-items:center; font-weight:800; font-size:20px; color:#fff; }
.profile__heroParol { flex:0 0 auto; }
.profile__stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.profile__stats--three { grid-template-columns:repeat(3,1fr); }
.stat { padding:14px 16px; }
.stat__val { font-size:22px; font-weight:800; color:var(--bone-bright); }
.stat__lbl { font-size:11px; margin-top:2px; }
.profile__settings { padding:16px; display:flex; flex-direction:column; gap:12px; }
.profile__setHead { margin-bottom:2px; }
.profile__row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.toggle { width:44px; height:26px; border-radius:999px; background:rgba(255,255,255,.1); position:relative; transition:background .15s; }
.toggle i { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--bone); transition:transform .15s; }
.toggle.on { background:var(--grad-bamboo); }
.toggle.on i { transform:translateX(18px); }
.profile__note { font-size:11px; line-height:1.5; padding:10px 12px; background:rgba(0,0,0,.2); border-radius:10px; border:1px solid var(--line-soft); }
.profile__reset { align-self:flex-start; padding:8px 16px; font-size:13px; }

/* --- hero identity: name + edit pencil --- */
.profile__id { flex:1; min-width:0; }
.profile__nameRow { display:flex; align-items:center; gap:2px; min-width:0; }
.profile__name { font-size:24px; min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile__sub { margin-top:2px; }
.profile__editName { flex:0 0 auto; background:none; border:0; color:var(--bone-dim); cursor:pointer; padding:4px; border-radius:8px; display:grid; place-items:center; line-height:0; }
.profile__editName:hover { color:var(--gold-hi); background:rgba(255,255,255,.06); }

/* --- stats card: consolidated stat list + a glimpse of the full graphs --- */
.profile__statsCard { padding:16px; }
.profile__glance { display:flex; gap:20px; align-items:stretch; }
.profile__statList { flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.profile__statLine { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; }
.profile__statLine + .profile__statLine { border-top:1px solid var(--line-soft); }
.profile__statLbl { font-size:13px; color:var(--bone-dim); }
.profile__statVal { font-size:16px; font-weight:800; color:var(--bone-bright); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.profile__statVal--gold { font-size:14px; color:var(--gold-hi); }

.profile__glimpse { flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
.profile__glimpseLbl { font-size:10px; font-weight:700; letter-spacing:.5px; color:var(--bone-faint); }
.profile__sparkBox { flex:1; min-height:56px; margin-top:10px; }
.profile__spark { display:block; width:100%; height:100%; }
.profile__sparkEmpty { display:grid; place-items:center; height:100%; min-height:56px; text-align:center; font-size:11.5px; }
.profile__wlRow { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:14px; font-size:11.5px; font-weight:700; }
.profile__wlWinLbl { color:var(--bamboo-hi); }
.profile__wlLossLbl { color:var(--bone-dim); }
.profile__wlBar { display:flex; height:10px; border-radius:999px; overflow:hidden; margin-top:6px; background:rgba(255,255,255,.12); }
.profile__wlWin { background:var(--grad-bamboo); }
.profile__wlLoss { background:rgba(255,255,255,.12); }
.profile__statsMore { text-align:center; margin-top:14px; font-size:13px; font-weight:700; color:var(--gold-hi); }

/* --- rename dialog --- */
.profile__nameCard { width:min(360px,92vw); padding:18px; display:flex; flex-direction:column; gap:10px; }
.profile__nameInput { width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line-soft); background:rgba(0,0,0,.25); color:var(--bone-bright); font-size:15px; font-family:inherit; }
.profile__nameInput:focus { outline:none; border-color:var(--gold-hi); }
.profile__nameRule { font-size:11px; color:var(--bone-faint); }
.profile__nameRule.is-error { color:#E0806F; }
.profile__nameActions { display:flex; gap:10px; margin-top:4px; }

/* ======================= RESULTS ======================= */
.banderitas { display:flex; gap:2px; padding:0 4px; height:26px; overflow:hidden; margin-bottom:6px; }
.flag { flex:1; height:20px; background:var(--c); clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:top; animation:flagsway 2.4s ease-in-out infinite; animation-delay:var(--d); }
@keyframes flagsway { 0%,100%{ transform:rotate(-2deg); } 50%{ transform:rotate(2deg); } }
.results__body { flex:1; display:flex; gap:18px; min-height:0; }
.results__left { flex:0 0 44%; display:flex; flex-direction:column; gap:12px; min-height:0; overflow-y:auto; }
.results__right { flex:1; display:flex; flex-direction:column; gap:10px; }
.results__place { display:flex; align-items:center; gap:16px; }
.medal { width:66px; height:66px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--m) 75%, white), var(--m));
  box-shadow:0 8px 24px rgba(0,0,0,.4), inset 0 2px 6px rgba(255,255,255,.5), 0 0 0 4px rgba(0,0,0,.15); }
.medal span { font-family:var(--font-display); font-weight:800; font-size:30px; color:#3a2a06; }
.results__placeTxt { font-size:26px; }
.results__antas { padding:14px 16px; display:flex; align-items:center; gap:14px; }
.results__antasParol { flex:0 0 auto; }
.results__delta { font-family:var(--font-display); font-weight:800; font-size:26px; }
.results__delta.up { color:var(--bamboo-hi); }
.results__delta.down { color:var(--lacquer); }
.results__delta span { font-size:11px; font-weight:600; }
.results__prot { margin-top:6px; font-size:11px; color:var(--bamboo-hi); }
.results__hand { padding:12px 14px; }
/* Single non-wrapping row so a full 16–18-tile hand never spills a 2nd row into
   the standings below; scrolls horizontally if it doesn't fit. */
.results__handTiles { display:flex; gap:3px; margin-top:10px; flex-wrap:nowrap; align-items:flex-end; overflow-x:auto; padding-bottom:2px; }
.results__handTiles > * { flex:0 0 auto; }

.results__standings { padding:12px 14px; }
.results__standingList { display:flex; flex-direction:column; margin-top:8px; }
.standing { display:flex; align-items:center; gap:10px; padding:4px 0; }
.standing__place { width:20px; text-align:left; font-family:var(--font-nums,inherit); font-weight:800; font-size:15px; color:var(--bone-dim); font-variant-numeric:tabular-nums; }
.standing__place--first { color:var(--gold-hi); }
.standing__insignia { flex:0 0 auto; display:flex; }
.standing__name { flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--bone); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.standing__name--you { font-weight:800; color:var(--gold-hi); }
.standing__tier { font-size:11px; flex:0 0 auto; }

.results__score { padding:14px 16px; }
.results__scoreHead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.results__rows { display:flex; flex-direction:column; }
.scorerow { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-top:1px solid var(--line-soft); font-size:13px; }
.scorerow:first-child { border-top:0; }
.scorerow__name { color:var(--bone); }
.scorerow__desc { font-size:11px; }
.scorerow__pts { font-weight:700; color:var(--lacquer); font-variant-numeric:tabular-nums; }
.scorerow__pts.pos { color:var(--lacquer); }
.results__totalRow { display:flex; justify-content:space-between; align-items:center; padding-top:10px; margin-top:4px; border-top:1.5px solid var(--line-gold); font-weight:800; color:var(--bone-bright); }
.results__total { font-size:18px; }
.results__earn { display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(0,0,0,.2); border-radius:12px; font-size:13px; color:var(--bone); }
.results__earnVal { margin-left:auto; color:var(--gold-hi); font-size:16px; }
.results__double { width:100%; padding:12px 16px; }
.results__double.is-done { background:var(--grad-bamboo); color:#06281c; pointer-events:none; }
.results__x2 { font-family:var(--font-display); font-weight:800; font-size:20px; opacity:.85; }
.results__actions { display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:2px; }
.results__actions .btn { padding:12px; }

/* ======================= STATS ======================= */
.stats { display:flex; flex-direction:column; gap:12px; overflow-y:auto; }
.stats__top { display:flex; align-items:center; gap:8px; }
.stats__back { width:36px; height:36px; border-radius:999px; border:0; background:rgba(0,0,0,.25); color:var(--bone); font-size:24px; line-height:1; cursor:pointer; }
.stats__back:hover { background:rgba(0,0,0,.4); }
.stats__body { display:flex; flex-direction:column; gap:12px; }
.stats__hero { display:flex; align-items:center; gap:14px; padding:14px 16px; }
.stats__ava { width:52px; height:52px; border-radius:50%; overflow:hidden; display:grid; place-items:center; flex:0 0 auto; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.stats__total { font-size:26px; font-weight:800; color:var(--bone-bright); font-variant-numeric:tabular-nums; }
.stats__star { color:var(--gold-hi); }
.stats__tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.stats__tab { flex:0 0 auto; padding:8px 16px; border-radius:999px; border:1px solid var(--line-gold); background:rgba(8,26,20,.5); color:var(--bone); font-size:13px; font-weight:700; cursor:pointer; }
.stats__tab.is-active { background:var(--grad-gold, linear-gradient(135deg,#F7CF69,#E0A42C)); color:#3a2a06; border-color:transparent; }
.stats__cols { display:flex; gap:14px; align-items:flex-start; }
.stats__chartCard { flex:1 1 55%; padding:14px 16px; min-width:0; }
.stats__chart { margin-top:12px; height:150px; }
.stats__empty { display:grid; place-items:center; height:100%; font-size:12px; }
.stats__side { flex:1 1 45%; display:flex; flex-direction:column; gap:10px; }
.stats__wl { padding:12px 16px; }
.stats__wlHead { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; font-weight:700; margin-bottom:8px; }
.stats__win { color:var(--bamboo-hi); }
.stats__wlBar { height:12px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.12); }
.stats__wlWin { display:block; height:100%; background:var(--grad-bamboo, linear-gradient(90deg,#2FA377,#17825C)); }
.stats__row { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; }
.stats__rowVal { font-size:18px; color:var(--gold-hi); }
.stats__best { padding:12px 16px; }
.stats__bestHead { display:flex; justify-content:space-between; align-items:baseline; }
.stats__bestLbl { font-size:12px; font-weight:700; color:var(--gold-hi); }
.stats__bestTiles { display:flex; flex-wrap:wrap; gap:3px; margin-top:10px; }
.profile__statsLink { width:100%; }
.profile__cog { background:none; border:0; color:var(--bone-dim); cursor:pointer; padding:6px; border-radius:999px; display:grid; place-items:center; flex:0 0 auto; }
.profile__cog:hover { color:var(--gold-hi); background:rgba(255,255,255,.06); }
.settings-screen { display:flex; flex-direction:column; gap:12px; overflow-y:auto; }
.settings__ver { text-align:center; font-size:11px; margin-top:14px; opacity:.7; }
@media (max-width: 640px) { .stats__cols { flex-direction:column; } .stats__chartCard, .stats__side { flex:1 1 auto; width:100%; } }

/* ======================= AUTH (login gate + account card) ======================= */
#login-gate { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px;
  background:radial-gradient(120% 90% at 50% 0%, #12513a 0%, #0c3b2c 42%, #081a14 100%); }
.login-gate__card { width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding:34px 28px; border-radius:22px; background:rgba(6,28,20,.72); border:1px solid var(--line-gold); box-shadow:0 24px 60px rgba(0,0,0,.5); }
/* The app icon (parol tile mark) heads the login card. Uses the wordmark-free
   mark so it doesn't repeat the "Mahjong Pa More" title right beneath it. */
.login-gate__icon { width:76px; height:76px; display:block; margin-bottom:4px; border-radius:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(247,207,105,.28), 0 0 30px rgba(224,164,44,.14); }
.login-gate__title { font-size:28px; }
.login-gate__sub { font-size:14px; max-width:32ch; line-height:1.45; }
.login-gate__btn { width:100%; padding:14px 16px; font-size:15px; }
/* Brand sign-in buttons (match the mobile login gate): black Apple, blue
   Facebook. Reused by the login gate AND the Profile account card. */
.btn.btn--apple { background:#111; color:#fff; border:1px solid rgba(255,255,255,.16); }
.btn.btn--apple:hover { background:#000; }
.btn.btn--facebook { background:#1877F2; color:#fff; border:1px solid #1877F2; }
.btn.btn--facebook:hover { background:#166fe0; }
.login-gate__note { font-size:11px; margin-top:4px; opacity:.8; }
.login-gate__lang { margin-top:2px; }

.profile__account { display:flex; flex-direction:column; gap:12px; padding:16px; }
.profile__acctRow { display:flex; align-items:center; gap:12px; }
.profile__acctIco { width:34px; height:34px; border-radius:999px; display:grid; place-items:center; flex:0 0 auto;
  background:rgba(255,255,255,.08); color:var(--gold-hi); font-size:16px; }
.profile__acctIco.ok { background:rgba(47,163,119,.2); color:var(--bamboo-hi); }
.profile__acctName { font-weight:700; color:var(--bone-bright); font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile__acctActions { display:flex; gap:10px; }
.profile__acctActions .btn { flex:1; }
.profile__acctDanger { color:var(--lacquer); }

/* ======================= FINDING (matchmaking) ======================= */
.finding { align-items:center; justify-content:center; }
.finding__body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; }
.finding__ring { position:relative; width:280px; height:200px; }
.finding__seat { position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px; left:50%; top:50%; }
.finding__seat[style*="--i:0"] { transform:translate(-50%,60px); }
.finding__seat[style*="--i:1"] { transform:translate(90px,-50%); }
.finding__seat[style*="--i:2"] { transform:translate(-50%,-130px); }
.finding__seat[style*="--i:3"] { transform:translate(-170px,-50%); }
.finding__ava { width:52px; height:52px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-weight:800; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.4); }
.finding__nm { font-size:12px; }


/* ---- Ads-off subscription paywall (IAP_SUBSCRIPTION.md) ---- */
.paywall { max-width:520px; margin:0 auto; padding:20px 22px; }
.paywall__head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.paywall__badge { width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; font-size:22px; color:#3a2a06; background:var(--grad-gold); }
.paywall__badge--ok { background:none; color:var(--gold-hi); font-size:30px; }
.paywall__benefits { list-style:none; margin:0 0 16px; padding:0; }
.paywall__benefits li { position:relative; padding:5px 0 5px 28px; font-size:13.5px; color:var(--bone); }
.paywall__benefits li::before { content:'\2713'; position:absolute; left:0; top:5px; color:var(--gold-hi); font-weight:800; }
.paywall__price { display:flex; align-items:baseline; gap:6px; margin:4px 0 14px; }
.paywall__amt { font-family:var(--font-display); font-size:30px; font-weight:800; color:var(--bone-bright); }
.paywall__cta { width:100%; padding:13px; font-weight:800; }
.paywall__terms { font-size:10.5px; margin-top:10px; line-height:1.4; }
.paywall__link { display:inline-block; margin-top:10px; font-size:11.5px; color:var(--gold-hi); font-weight:600; text-decoration:none; }

/* How to Play — rail-visible reference screen (screens/howto.js) */
.howto-screen { overflow: hidden; }
.howto__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px 30px; }
.howto { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.howto__card { display: flex; gap: 14px; align-items: flex-start; padding: 13px 16px;
  background: var(--felt-card); border: 1px solid var(--line-gold); border-radius: 14px; box-shadow: var(--shadow-card); }
.howto__ico { font-size: 24px; line-height: 1.15; flex: 0 0 auto; width: 30px; text-align: center; }
.howto__txt { min-width: 0; }
.howto__txt h2 { margin: 1px 0 5px; font-size: 15px; font-weight: 800; color: var(--gold-hi); letter-spacing: .2px; }
.howto__txt p { margin: 3px 0; font-size: 13.5px; line-height: 1.5; color: var(--bone); }

/* Per-variant switcher + at-a-glance chips */
.howto-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.howto-switch__pill { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--bone-dim); background: rgba(0,0,0,.18); border: 1px solid var(--line-gold); }
.howto-switch__pill.on { color: #3a2a06; background: var(--grad-gold); border-color: var(--line-gold-2); }
.howto-head__name { font-size: 17px; font-weight: 800; color: var(--bone-bright); }
.howto-head__sub { font-size: 12.5px; color: var(--bone-dim); margin-top: 1px; }
.howto-glance { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.howto-glance__chip { font-size: 11px; font-weight: 700; color: var(--gold-hi);
  background: rgba(224,164,44,.12); border: 1px solid var(--line-gold-2); padding: 3px 8px; border-radius: 999px; }

/* Animated walkthrough — a stepped, captioned turn-flow demo */
.howto-demo { max-width: 760px; margin: 0 auto 6px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-gold);
  background: radial-gradient(120% 130% at 50% -25%, #1b6249, #0e4332 60%, #06271d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.howto-demo__step { min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; }
.howto-demo__step.is-in { animation: howtoStepIn .5s ease; }
.howto-demo__tiles { display: flex; gap: 3px; }
.howto-demo__cap { font-size: 13px; font-weight: 800; color: var(--gold-hi); letter-spacing: .3px; text-align: center; }
.howto-demo__dots { display: flex; gap: 5px; margin-top: 2px; }
.howto-demo__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); }
.howto-demo__dot.on { background: var(--gold-hi); }
@keyframes howtoStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Legacy ambient demo (unused now, kept for reference) */
.howto-demo__stage-legacy { max-width: 760px; margin: 0 auto 6px; }
.howto-demo__stage { position: relative; height: 96px; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line-gold);
  background: radial-gradient(120% 130% at 50% -25%, #1b6249, #0e4332 60%, #06271d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.howto-demo__hand { display: flex; gap: 3px; will-change: transform, filter; animation: demoHand 4.2s ease-in-out infinite; }
.howto-demo__draw, .howto-demo__discard { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
.howto-demo__draw { animation: demoDraw 4.2s ease-in-out infinite; }
.howto-demo__discard { animation: demoDiscard 4.2s ease-in-out infinite; }
.howto-demo__win { position: absolute; top: 12px; padding: 4px 14px; border-radius: 999px;
  background: var(--grad-gold); color: #3a2a06; font-weight: 800; font-size: 13px; letter-spacing: .4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3); opacity: 0; animation: demoPanalo 4.2s ease-in-out infinite; }

@keyframes demoDraw {
  0%   { transform: translate(150px, -50%) scale(.9); opacity: 0; }
  10%  { transform: translate(120px, -50%) scale(1); opacity: 1; }
  24%  { transform: translate(104px, -50%); opacity: 1; }
  33%  { transform: translate(98px, -50%); opacity: .3; }
  40%, 100% { transform: translate(98px, -50%); opacity: 0; }
}
@keyframes demoDiscard {
  0%, 25% { transform: translate(-14px, -50%) scale(1) rotate(0); opacity: 0; }
  31%     { transform: translate(-14px, -50%) scale(1); opacity: 1; }
  47%     { transform: translate(6px, -180%) scale(.78) rotate(-10deg); opacity: 0; }
  100%    { transform: translate(-14px, -50%); opacity: 0; }
}
@keyframes demoHand {
  0%, 47% { transform: none; filter: none; }
  55%  { transform: translateY(-3px); filter: drop-shadow(0 0 8px rgba(247,207,105,.75)); }
  63%  { transform: translateY(0); filter: drop-shadow(0 0 11px rgba(247,207,105,.9)); }
  82%  { filter: drop-shadow(0 0 6px rgba(247,207,105,.45)); }
  100% { transform: none; filter: none; }
}
@keyframes demoPanalo {
  0%, 67% { opacity: 0; transform: scale(.6) translateY(5px); }
  75%  { opacity: 1; transform: scale(1.12) translateY(0); }
  81%  { transform: scale(1) translateY(0); }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .howto-demo__hand, .howto-demo__win { animation: none; }
  .howto-demo__draw, .howto-demo__discard { display: none; }
  .howto-demo__win { opacity: 1; transform: none; }
}

/* ======================= HANDAAN NIGHTS (daily challenges + calendar) ======================= */
/* Normal block flow (not the .screen flex-column, which shrinks the children to
   fit the bounded height and clips the Ambisyon Bingo card off the bottom). As
   a plain scrolling block the content keeps its natural height and .screen--pad's
   overflow:auto reveals the bingo card. */
.screen.handaan { display:block; }
.handaan__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:2px 0 14px; flex:0 0 auto; }
.handaan__streak { display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  background:rgba(6,32,24,.55); border:1px solid var(--line-gold); }
.handaan__streak b { color:var(--gold-hi); font-size:17px; font-variant-numeric:tabular-nums; }
.handaan__streakFlame { font-size:15px; }

.handaan__grid { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.handaan__today { flex:1 1 320px; min-width:280px; padding:16px 18px; display:flex; flex-direction:column; }
.handaan__cal { flex:1 1 360px; min-width:300px; padding:14px 16px 12px; }

.handaan__todayEyebrow { font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.handaan__ch { display:flex; align-items:center; gap:13px; }
.handaan__chEmoji { font-size:30px; line-height:1; flex:0 0 auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.handaan__chBody { min-width:0; flex:1; }
.handaan__chTitle { font-weight:800; color:var(--bone-bright); font-size:16px; }
.handaan__chMeta { display:flex; align-items:center; gap:12px; font-size:12px; margin-top:3px; }
.handaan__chReward { display:inline-flex; align-items:center; gap:5px; color:var(--gold-hi); font-weight:700; }
.handaan__ok { color:#5fce9b; font-weight:700; }
.handaan__ch.is-done .handaan__chEmoji { filter:drop-shadow(0 0 10px rgba(95,206,155,.5)); }
.handaan__doneBanner { margin-top:14px; padding:9px; border-radius:12px; text-align:center; font-weight:700; font-size:13px;
  color:#0a2c1d; background:var(--grad-bamboo); box-shadow:0 6px 16px rgba(47,138,99,.28); }
.handaan__playBtn { margin-top:14px; padding:11px; font-size:14px; }
.handaan__divider { height:1px; margin:15px 0 13px; background:linear-gradient(90deg,transparent,var(--line-gold),transparent); }
.handaan__daily { display:flex; align-items:center; gap:12px; }
.handaan__daily b { color:var(--bone-bright); font-size:14px; }
.handaan__dailyIco { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:19px;
  background:rgba(224,164,44,.16); border:1px solid var(--line-gold); flex:0 0 auto; }
.handaan__claimBtn { margin-left:auto; padding:8px 16px; font-size:13px; flex:0 0 auto; }

.cal__dow { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:6px; }
.cal__dow span { text-align:center; font-size:10px; font-weight:700; color:var(--bone-faint); text-transform:uppercase; letter-spacing:.4px; }
.cal__days { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal__cell { position:relative; aspect-ratio:1; border-radius:9px; display:grid; place-items:center;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); }
.cal__cell--pad { background:none; border:none; }
.cal__num { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--bone-dim); }
.cal__cell--future .cal__num { color:var(--bone-faint); }
.cal__cell--miss { opacity:.5; }
.cal__cell--miss .cal__num { color:var(--bone-faint); }
.cal__cell--today { border-color:var(--gold-hi); box-shadow:0 0 0 1px var(--gold-hi), 0 0 14px rgba(247,207,105,.35); }
.cal__cell--today .cal__num { color:var(--gold-hi); font-weight:800; }
.cal__cell--done { background:var(--grad-gold); border-color:transparent; box-shadow:0 4px 10px rgba(224,164,44,.28); }
.cal__cell--done .cal__num { color:#3a2a06; font-weight:800; }
.cal__check { position:absolute; right:3px; top:2px; font-size:9px; color:#0a2c1d; font-weight:900; }
.cal__legend { display:flex; gap:16px; justify-content:center; margin-top:11px; font-size:10.5px; color:var(--bone-dim); }
.cal__legend span { display:inline-flex; align-items:center; gap:5px; }
.cal__dot { width:10px; height:10px; border-radius:3px; display:inline-block; }
.cal__dot--done { background:var(--grad-gold); }
.cal__dot--today { background:transparent; border:1.5px solid var(--gold-hi); }
.cal__dot--miss { background:rgba(255,255,255,.06); }