/* ═══════════════════════════════════════════
   CRICKET TCG · META SCREENS
   Home / Decks / Builder / Packs / Learn / Missions / Profile
   Light "scorebook" look from the wireframes; packs go dark.
═══════════════════════════════════════════ */
:root{
  --m-bg:#f5f1e8;
  --m-card:#fffdf8;
  --m-sunk:#ebe5d8;
  --m-ink:#1f1b16;
  --m-ink2:#6b6458;
  --m-ink3:#a39b8c;
  --m-line:#ddd5c5;
  --m-acc:#d9542b;
  --m-acc-dk:#b8431f;
  --m-acc-lt:#fbe8df;
  --m-green:#2e9e5b;
  --m-green-lt:#e1f3e8;
  --m-dark:#1e1c19;
  --m-dark2:#2a2723;
  --r-common:#9a9285;
  --r-rare:#3a7bd5;
  --r-epic:#b0449a;
  --r-legendary:#e2a92b;
}

#s-app{background:var(--m-bg);color:var(--m-ink);font-family:var(--fb);}
#s-app.active{display:block;}
.app-col{max-width:440px;margin:0 auto;height:100%;display:flex;flex-direction:column;position:relative;background:var(--m-bg);}
.app-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 16px 20px;-webkit-overflow-scrolling:touch;}
.app-scroll.no-pad{padding:0;}

/* ─── Headers ─── */
.a-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.a-title{font-family:var(--fh);font-weight:700;font-size:1.55rem;letter-spacing:.3px;line-height:1;flex:1;}
.a-back{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--m-line);background:var(--m-card);display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;flex-shrink:0;color:var(--m-ink);}
.a-lbl{font-family:var(--fh);font-weight:600;font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--m-ink2);margin:16px 0 8px;}
.a-lbl:first-child{margin-top:0;}
.a-sub{font-size:.78rem;color:var(--m-ink2);}

/* ─── Pills & chips ─── */
.pill{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--m-ink);border-radius:999px;padding:5px 11px;font-family:var(--fh);font-weight:700;font-size:.85rem;background:var(--m-card);cursor:pointer;white-space:nowrap;color:var(--m-ink);}
.pill .av{width:22px;height:22px;border-radius:50%;background:var(--m-sunk);display:flex;align-items:center;justify-content:center;font-size:.72rem;margin-left:-6px;border:1.5px solid var(--m-ink);}
.coin{color:var(--m-acc);font-size:.8em;}
.chip{display:inline-flex;align-items:center;border:1.5px solid var(--m-line);border-radius:999px;padding:4px 10px;font-family:var(--fh);font-weight:600;font-size:.78rem;background:var(--m-card);color:var(--m-ink2);cursor:pointer;white-space:nowrap;}
.chip.on{background:var(--m-ink);border-color:var(--m-ink);color:#fff;}
.chip.sm{padding:2px 8px;font-size:.7rem;cursor:default;}
.chip.acc{border-color:var(--m-acc);color:var(--m-acc);}
.chip.dk{background:var(--m-ink);border-color:var(--m-ink);color:#fff;}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}

/* ─── Panels & buttons ─── */
.panel{background:var(--m-card);border:1.5px solid var(--m-line);border-radius:16px;padding:14px;margin-bottom:12px;}
.panel.flush{padding:0;overflow:hidden;}
.btn{display:block;text-align:center;width:100%;border:1.5px solid transparent;border-radius:12px;padding:13px;font-family:var(--fh);font-weight:700;font-size:1rem;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:transform .08s,filter .15s;}
.btn:active{transform:scale(.98);}
.btn small{display:block;margin-top:2px;font-family:var(--fb);font-weight:500;font-size:.68rem;letter-spacing:.2px;text-transform:none;opacity:.85;}
.btn-acc{background:var(--m-acc);color:#fff;}
.btn-dk{background:var(--m-ink);color:#fff;}
.btn-ol{background:transparent;color:var(--m-ink);border:1.5px solid var(--m-ink);}
.btn-ol-lt{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35);}
.btn[disabled]{opacity:.4;pointer-events:none;}
.btn-sm{padding:7px 12px;font-size:.8rem;border-radius:999px;width:auto;}
.btn-row{display:flex;gap:10px;}
.btn-row>.btn{flex:1;}
.link{background:none;border:none;color:var(--m-ink2);font-size:.78rem;text-decoration:underline;cursor:pointer;padding:8px;font-family:var(--fb);}

.bar{height:8px;border-radius:99px;background:var(--m-sunk);overflow:hidden;border:1px solid var(--m-line);}
.bar>i{display:block;height:100%;background:var(--m-acc);border-radius:99px;transition:width .4s;}

/* ─── Bottom nav ─── */
.a-nav{flex-shrink:0;display:flex;border-top:1.5px solid var(--m-line);background:var(--m-card);padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
.a-nav button{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:var(--m-ink3);font-family:var(--fh);font-weight:600;font-size:.72rem;letter-spacing:.5px;position:relative;padding:4px 0;}
.a-nav .ni{width:34px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;border:1.5px solid var(--m-line);background:var(--m-bg);filter:grayscale(1);}
.a-nav button.on{color:var(--m-acc);}
.a-nav button.on .ni{background:var(--m-acc);border-color:var(--m-acc);filter:none;}
.a-nav .dot{position:absolute;top:2px;right:calc(50% - 22px);min-width:16px;height:16px;border-radius:99px;background:var(--m-acc);color:#fff;font-size:.62rem;display:flex;align-items:center;justify-content:center;padding:0 4px;font-family:var(--fb);font-weight:700;}

/* ─── Mini card (grids, packs) ─── */
.mc{position:relative;aspect-ratio:5/7;border-radius:9px;overflow:hidden;border:2px solid var(--m-line);background:var(--m-sunk);cursor:pointer;user-select:none;}
.mc-art{position:absolute;inset:0;background-size:cover;background-position:center top;display:flex;align-items:center;justify-content:center;font-size:1.6rem;}
.mc.batsman .mc-art{background-color:#dde8f6;}
.mc.bowler .mc-art{background-color:#e8def5;}
.mc.support .mc-art{background-color:#dcefe2;}
.mc.captain .mc-art{background-color:#f6e0d8;}
.mc-tag{position:absolute;top:4px;left:4px;font-family:var(--fh);font-weight:700;font-size:.55rem;letter-spacing:.6px;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.9);color:var(--m-ink);}
.mc-name{position:absolute;left:0;right:0;bottom:0;padding:12px 5px 4px;font-family:var(--fh);font-weight:700;font-size:.68rem;line-height:1.05;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78));text-shadow:0 1px 2px rgba(0,0,0,.5);}
.mc-pip{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1.5px #fff;}
.mc.r-common{border-color:var(--m-line);} .mc.r-common .mc-pip{background:var(--r-common);}
.mc.r-rare{border-color:var(--r-rare);} .mc.r-rare .mc-pip{background:var(--r-rare);}
.mc.r-epic{border-color:var(--r-epic);} .mc.r-epic .mc-pip{background:var(--r-epic);}
.mc.r-legendary{border-color:var(--r-legendary);box-shadow:0 0 10px rgba(226,169,43,.45);} .mc.r-legendary .mc-pip{background:var(--r-legendary);}
.mc.locked .mc-art{filter:grayscale(1) brightness(1.15);opacity:.28;}
.mc.locked .mc-name{background:none;color:var(--m-ink3);text-shadow:none;}
.mc.locked::after{content:'🔒';position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);font-size:1rem;opacity:.6;}
.mc.in-deck{opacity:.45;}
.mc .mc-check{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--m-acc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}

/* ─── Home ─── */
.h-top{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.h-logo{font-family:var(--fh);font-weight:700;font-size:1.45rem;flex:1;letter-spacing:.3px;}
.h-deck{display:flex;gap:12px;align-items:center;padding:14px 14px 10px;}
.h-deck .mc{width:62px;flex-shrink:0;}
.h-deck-name{font-family:var(--fh);font-weight:700;font-size:1.3rem;line-height:1.05;margin:2px 0 6px;}
.h-rank{padding:0 14px 12px;}
.h-rank-row{display:flex;justify-content:space-between;font-family:var(--fh);font-weight:600;font-size:.74rem;letter-spacing:1px;color:var(--m-ink2);text-transform:uppercase;margin-bottom:5px;}
.h-qm{border-radius:0;padding:16px;font-size:1.6rem;letter-spacing:2px;font-style:italic;}
.h-qm small{font-style:normal;}
.h-pack{text-align:center;}
.h-pack .pack{width:78px;margin:6px auto 12px;}
.h-timer{display:flex;justify-content:space-between;font-size:.76rem;color:var(--m-ink2);margin-bottom:5px;}
.h-timer b{font-family:var(--fh);color:var(--m-ink);font-size:.9rem;}
.h-note{font-size:.7rem;color:var(--m-ink3);margin-top:8px;font-style:italic;}
.h-tip{display:flex;align-items:center;gap:12px;cursor:pointer;}
.h-tip .ic{width:40px;height:40px;border-radius:10px;background:var(--m-acc-lt);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.h-tip b{font-family:var(--fh);font-size:1rem;display:block;}

/* ─── Pack art ─── */
.pack{aspect-ratio:5/7;border-radius:12px;position:relative;overflow:hidden;background:repeating-linear-gradient(135deg,#e7dfcf 0 10px,#ddd4c1 10px 20px);border:2px solid var(--m-line);display:flex;align-items:center;justify-content:center;flex-direction:column;}
.pack.legends{background:linear-gradient(160deg,#f3b24a,#d9542b 60%,#8e2c12);border-color:#b8431f;}
.pack.rivals{background:linear-gradient(160deg,#6e8df0,#4a4fb8 60%,#241f5e);border-color:#3b3f99;}
.pack .pk-name{font-family:var(--fh);font-weight:700;color:#fff;font-size:1.05rem;letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 2px 6px rgba(0,0,0,.35);}
.pack .pk-ico{font-size:1.9rem;margin-bottom:4px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));}
.pack .pk-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);background-size:250% 100%;animation:pkShine 2.8s ease-in-out infinite;}
@keyframes pkShine{0%{background-position:120% 0;}60%,100%{background-position:-60% 0;}}
.pack.generic{background:linear-gradient(160deg,#3c3833,#1e1c19);border-color:#555;}

/* ─── Decks ─── */
.dk-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none;}
.dk-row::-webkit-scrollbar{display:none;}
.dk{flex-shrink:0;width:112px;border:1.5px solid var(--m-line);border-radius:14px;padding:8px;background:var(--m-card);cursor:pointer;}
.dk.active{border-color:var(--m-acc);box-shadow:0 0 0 1px var(--m-acc);}
.dk .mc{width:100%;aspect-ratio:1/1;}
.dk-name{font-family:var(--fh);font-weight:700;font-size:.92rem;margin:6px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk-meta{font-size:.68rem;color:var(--m-ink2);}
.dk-meta.bad{color:var(--m-acc);}
.dk-badge{display:inline-block;background:var(--m-acc);color:#fff;border-radius:99px;padding:1px 8px;font-family:var(--fh);font-weight:700;font-size:.64rem;letter-spacing:1px;}
.dk.new{border-style:dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--m-ink2);font-family:var(--fh);font-weight:700;min-height:150px;gap:4px;}
.dk.new span{font-size:1.6rem;}
.divider{height:1.5px;background:var(--m-line);margin:8px -16px 14px;}
.search-row{display:flex;gap:6px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
.search{flex:1;min-width:90px;display:flex;align-items:center;gap:6px;border:1.5px solid var(--m-line);border-radius:999px;padding:6px 12px;background:var(--m-card);}
.search input{border:none;outline:none;background:none;font-family:var(--fb);font-size:.82rem;width:100%;color:var(--m-ink);}

/* ─── Builder ─── */
.b-cap{display:flex;gap:12px;align-items:center;margin-bottom:12px;}
.b-cap .mc{width:58px;flex-shrink:0;}
.b-cap-lbl{font-size:.66rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--m-ink2);font-family:var(--fh);font-weight:600;}
.b-cap-name{font-family:var(--fh);font-weight:700;font-size:1.1rem;}
.b-count{margin-left:auto;text-align:right;}
.b-count b{font-family:var(--fh);font-size:1.35rem;display:block;line-height:1;}
.b-count span{font-size:.68rem;color:var(--m-ink2);}
.b-count.ok b{color:var(--m-green);}
.b-slots{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.b-slot{aspect-ratio:5/7;border-radius:7px;border:1.5px dashed var(--m-line);display:flex;align-items:center;justify-content:center;color:var(--m-ink3);font-size:.9rem;}
.b-slots .mc{border-radius:7px;border-width:1.5px;}
.b-slots .mc-name{font-size:.52rem;padding:8px 3px 2px;}
.b-slots .mc-tag,.b-slots .mc-pip{display:none;}
.b-meters{display:flex;gap:6px;margin:10px 0 2px;flex-wrap:wrap;}
.b-errs{font-size:.72rem;color:var(--m-acc);margin-top:6px;min-height:1em;}
.b-name{font-family:var(--fh);font-weight:700;font-size:1.35rem;border:none;background:none;outline:none;flex:1;min-width:0;color:var(--m-ink);border-bottom:1.5px dashed transparent;padding:2px 0;}
.b-name:focus{border-bottom-color:var(--m-line);}
.b-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.b-actions .btn{flex:1;min-width:90px;}
.cap-pick{display:flex;gap:10px;align-items:center;padding:10px;border:1.5px solid var(--m-line);border-radius:12px;margin-bottom:8px;cursor:pointer;background:var(--m-card);}
.cap-pick.on{border-color:var(--m-acc);background:var(--m-acc-lt);}
.cap-pick.off{opacity:.45;cursor:default;}
.cap-pick .mc{width:46px;flex-shrink:0;}
.cap-pick b{font-family:var(--fh);font-size:1rem;display:block;}
.cap-pick span{font-size:.74rem;color:var(--m-ink2);}

/* ─── Sheet (card detail, pickers) ─── */
.a-sheet-bg{position:fixed;inset:0;background:rgba(30,27,22,.5);z-index:600;display:none;align-items:flex-end;justify-content:center;}
.a-sheet-bg.open{display:flex;animation:fadeIn .18s;}
.a-sheet{width:100%;max-width:440px;max-height:88vh;overflow-y:auto;background:var(--m-card);border-radius:22px 22px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));color:var(--m-ink);animation:sheetUp .25s cubic-bezier(.2,.8,.3,1);}
.a-grab{width:44px;height:5px;border-radius:9px;background:var(--m-line);margin:0 auto 14px;}
@keyframes sheetUp{from{transform:translateY(40%);opacity:.4;}to{transform:none;opacity:1;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.cd-card{width:150px;margin:0 auto 12px;}
.cd-card .mc{border-width:3px;border-radius:14px;}
.cd-card .mc-art{font-size:3rem;}
.cd-name{font-family:var(--fh);font-weight:700;font-size:1.6rem;text-align:center;line-height:1.05;}
.cd-chips{display:flex;gap:6px;justify-content:center;margin:8px 0 14px;flex-wrap:wrap;}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;}
.stat{border:1.5px solid var(--m-line);border-radius:12px;padding:10px 6px;text-align:center;}
.stat b{font-family:var(--fh);font-size:1.25rem;display:block;line-height:1.1;}
.stat span{font-size:.68rem;color:var(--m-ink2);}
.ability{border:1.5px solid var(--m-line);border-radius:12px;padding:12px;}
.ability .a-lbl{margin:0 0 4px;}
.ability p{font-size:.86rem;line-height:1.45;}
.r-tag{font-family:var(--fh);font-weight:700;font-size:.7rem;letter-spacing:1px;text-transform:uppercase;padding:2px 9px;border-radius:99px;color:#fff;}
.r-tag.common{background:var(--r-common);} .r-tag.rare{background:var(--r-rare);} .r-tag.epic{background:var(--r-epic);} .r-tag.legendary{background:var(--r-legendary);color:#3a2800;}

/* ─── Full-screen flows (packs, onboarding, matchmaking) ─── */
.a-full{position:fixed;inset:0;z-index:500;display:none;background:var(--m-bg);}
.a-full.open{display:block;}
.a-full.dark{background:var(--m-dark);color:#f3efe7;}
.a-full .app-col{background:transparent;}
.f-hdr{display:flex;align-items:center;padding:14px 16px;gap:10px;}
.f-hdr .a-title{text-align:center;font-size:1.3rem;}
.f-x{width:34px;height:34px;border:none;background:none;font-size:1.3rem;cursor:pointer;color:inherit;}
.f-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center;overflow-y:auto;}
.f-foot{padding:14px 16px calc(18px + env(safe-area-inset-bottom));}
.f-hint{font-size:.74rem;opacity:.6;margin-top:14px;}
.set-pick{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;margin-top:12px;}
.set-pick .pack{cursor:pointer;transition:transform .15s;}
.set-pick .pack.sel{outline:3px solid var(--m-acc);outline-offset:3px;}
.set-pick .set-nm{font-family:var(--fh);font-weight:700;font-size:1.1rem;margin:10px 0 2px;}
.set-pick .set-bl{font-size:.72rem;color:var(--m-ink2);margin-bottom:10px;}

.pk-open{width:170px;cursor:pointer;box-shadow:0 0 40px rgba(217,84,43,.45);animation:pkFloat 2.4s ease-in-out infinite;}
.pk-open.rivals{box-shadow:0 0 40px rgba(90,110,240,.45);}
@keyframes pkFloat{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-8px) rotate(1deg);}}
.pk-open.burst{animation:pkBurst .5s forwards;}
@keyframes pkBurst{to{transform:scale(1.35);opacity:0;filter:brightness(2);}}
.tap-big{font-family:var(--fh);font-weight:700;font-size:1.3rem;letter-spacing:1px;margin-top:26px;}

.rv-count{font-family:var(--fh);font-weight:600;letter-spacing:2px;opacity:.6;font-size:.85rem;}
.rv-rar{margin-bottom:12px;}
.rv-card{width:190px;perspective:900px;cursor:pointer;}
.rv-card .mc{border-width:3px;border-radius:14px;animation:flipIn .55s cubic-bezier(.2,.8,.3,1);}
.rv-card .mc-art{font-size:3.2rem;}
.rv-card .mc.r-legendary{box-shadow:0 0 36px rgba(226,169,43,.7);}
.rv-card .mc.r-epic{box-shadow:0 0 30px rgba(176,68,154,.6);}
.rv-card .mc.r-rare{box-shadow:0 0 24px rgba(58,123,213,.5);}
@keyframes flipIn{from{transform:rotateY(90deg) scale(.8);opacity:0;}to{transform:none;opacity:1;}}
.rv-name{font-family:var(--fh);font-weight:700;font-size:1.3rem;margin-top:14px;}
.rv-type{font-size:.78rem;opacity:.65;}
.badge-new{display:inline-block;background:var(--m-green);color:#fff;font-family:var(--fh);font-weight:700;font-size:.7rem;letter-spacing:1px;padding:2px 9px;border-radius:99px;}
.badge-dupe{display:inline-block;background:rgba(255,255,255,.14);color:#f3efe7;font-family:var(--fh);font-weight:700;font-size:.7rem;letter-spacing:.8px;padding:2px 9px;border-radius:99px;}
.rv-badges{margin-top:8px;min-height:22px;}
.sum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:340px;}
.sum-grid .col{display:flex;flex-direction:column;align-items:center;gap:6px;}
.sum-grid .mc{width:100%;cursor:pointer;}
.sum-note{margin-top:16px;border:1.5px solid rgba(255,255,255,.18);border-radius:99px;padding:6px 14px;font-size:.78rem;}

/* ─── Learn ─── */
.ch{border:1.5px solid var(--m-line);border-radius:16px;background:var(--m-card);margin-bottom:12px;overflow:hidden;}
.ch.cur{border-color:var(--m-acc);}
.ch.lock{opacity:.5;}
.ch-hd{display:flex;align-items:center;gap:12px;padding:12px;cursor:pointer;}
.ch.cur .ch-hd{background:var(--m-acc-lt);}
.ch-ic{width:42px;height:42px;border-radius:11px;border:1.5px solid var(--m-line);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:700;font-size:1.1rem;flex-shrink:0;background:var(--m-card);}
.ch-ic.done{background:var(--m-acc);border-color:var(--m-acc);color:#fff;}
.ch-t{flex:1;min-width:0;}
.ch-t b{font-family:var(--fh);font-size:1.02rem;display:block;}
.ch-t span{font-size:.7rem;color:var(--m-ink2);}
.ch-t .bar{margin-top:6px;height:6px;}
.ch-n{font-family:var(--fh);font-weight:600;font-size:.8rem;color:var(--m-ink2);}
.ch-ls{padding:4px 10px 10px;display:flex;flex-direction:column;gap:6px;}
.ls{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1.5px solid var(--m-line);border-radius:11px;cursor:pointer;background:var(--m-card);}
.ls.next{background:var(--m-sunk);border-color:var(--m-ink3);}
.ls-ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.8rem;border:1.5px solid var(--m-line);flex-shrink:0;}
.ls.next .ls-ic{background:var(--m-acc);border-color:var(--m-acc);color:#fff;}
.ls.done .ls-ic{background:var(--m-green-lt);border-color:var(--m-green);color:var(--m-green);}
.ls-t{flex:1;font-family:var(--fh);font-weight:600;font-size:.92rem;}
.ls.done .ls-t{color:var(--m-ink2);}
.lesson{min-height:250px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 4px 0;}
.lesson .lv{font-size:3rem;font-family:var(--fh);font-weight:700;height:80px;display:flex;align-items:center;justify-content:center;width:80px;border-radius:20px;background:var(--m-acc-lt);margin:8px 0 14px;color:var(--m-acc);}
.lesson h3{font-family:var(--fh);font-size:1.35rem;margin-bottom:8px;}
.lesson p{font-size:.92rem;line-height:1.5;color:var(--m-ink2);max-width:320px;}
.dots{display:flex;gap:6px;justify-content:center;margin:18px 0 14px;}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--m-line);}
.dots i.on{background:var(--m-acc);width:18px;border-radius:9px;}

/* ─── Missions ─── */
.ms{display:flex;align-items:center;gap:12px;border:1.5px solid var(--m-line);border-radius:14px;padding:11px 12px;background:var(--m-card);margin-bottom:8px;}
.ms.ready{border-color:var(--m-acc);background:var(--m-acc-lt);}
.ms.claimed{opacity:.55;}
.ms-ic{width:40px;height:40px;border-radius:11px;border:1.5px solid var(--m-line);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;background:var(--m-bg);}
.ms.ready .ms-ic{background:var(--m-acc);border-color:var(--m-acc);}
.ms-t{flex:1;min-width:0;}
.ms-t b{font-family:var(--fh);font-size:.98rem;display:block;}
.ms-t .bar{height:6px;margin:5px 0 3px;}
.ms-t span{font-size:.68rem;color:var(--m-ink2);}
.ms-rw{font-family:var(--fh);font-weight:700;font-size:.8rem;border:1.5px solid var(--m-ink);border-radius:99px;padding:2px 8px;white-space:nowrap;}
.ms-claim{margin-left:4px;}
.m-foot{padding:10px 16px;border-top:1.5px solid var(--m-line);background:var(--m-card);}

/* ─── Profile ─── */
.pf{display:flex;gap:14px;align-items:center;margin-bottom:16px;}
.pf-av{width:74px;height:74px;border-radius:50%;background:repeating-linear-gradient(135deg,#e7dfcf 0 8px,#ddd4c1 8px 16px);border:1.5px solid var(--m-line);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:700;font-size:1.7rem;color:var(--m-ink2);flex-shrink:0;}
.pf-nm{font-family:var(--fh);font-weight:700;font-size:1.4rem;display:flex;align-items:center;gap:6px;cursor:pointer;}
.pf-nm span{font-size:.9rem;opacity:.5;}
.stats2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.stats2 .stat{text-align:left;padding:12px;}
.stats2 .stat b{font-size:1.4rem;}
.stats2 .wide{grid-column:span 2;}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1.5px solid var(--m-line);font-family:var(--fh);font-weight:600;font-size:.98rem;}
.set-row:last-child{border-bottom:none;}
.tgl{width:44px;height:26px;border-radius:99px;background:var(--m-line);position:relative;cursor:pointer;border:none;transition:background .15s;flex-shrink:0;}
.tgl::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.tgl.on{background:var(--m-acc);}
.tgl.on::after{left:21px;}
.txt-in{width:100%;border:1.5px solid var(--m-line);border-radius:12px;padding:11px 12px;font-family:var(--fb);font-size:.92rem;background:var(--m-card);color:var(--m-ink);outline:none;}
.txt-in:focus{border-color:var(--m-ink);}
textarea.txt-in{min-height:120px;resize:vertical;}

/* ─── Onboarding / matchmaking ─── */
.ob-logo{font-family:var(--fh);font-weight:700;font-size:2.4rem;line-height:1;margin-bottom:6px;}
.ob-sub{color:var(--m-ink2);font-size:.9rem;margin-bottom:26px;}
.starter{display:flex;gap:12px;align-items:center;text-align:left;border:1.5px solid var(--m-line);border-radius:14px;padding:10px;background:var(--m-card);margin-bottom:10px;cursor:pointer;width:100%;}
.starter.sel{border-color:var(--m-acc);background:var(--m-acc-lt);}
.starter .mc{width:54px;flex-shrink:0;}
.starter b{font-family:var(--fh);font-size:1.08rem;display:block;}
.starter p{font-size:.76rem;color:var(--m-ink2);line-height:1.35;margin-top:2px;}
.spin{width:70px;height:70px;border-radius:50%;border:5px solid rgba(255,255,255,.15);border-top-color:var(--m-acc);animation:spin 1s linear infinite;margin-bottom:20px;}
@keyframes spin{to{transform:rotate(360deg);}}
.mm-t{font-family:var(--fh);font-weight:700;font-size:1.5rem;}
.mm-s{opacity:.65;font-size:.85rem;margin-top:4px;}
.mm-vs{display:flex;align-items:center;gap:16px;margin:10px 0 18px;}
.mm-vs .mc{width:80px;}
.mm-vs b{font-family:var(--fh);font-size:1.4rem;opacity:.7;}
.room-code{font-family:var(--fh);font-weight:700;font-size:2.2rem;letter-spacing:6px;margin:8px 0;}

/* ─── Toast ─── */
.a-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--m-ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:.84rem;z-index:900;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center;}
.a-toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* ─── Post-match rewards (on the existing dark final screen) ─── */
#f-rewards{width:100%;max-width:440px;}
.pm-box{border:1px solid var(--bmid);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--s1);}
.pm-row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--ts);}
.pm-row b{font-family:var(--fh);font-size:1.05rem;color:var(--tp);}
.pm-row b.up{color:var(--green);} .pm-row b.down{color:var(--red);}
.pm-nudge{font-size:.8rem;color:var(--gold);text-align:center;cursor:pointer;padding-top:4px;}
.pm-btns{display:flex;flex-direction:column;gap:8px;width:100%;max-width:440px;}

/* ─── First-launch intro video (Onboard.start) ─── */
.a-full.intro-video{background:#000;}
.ob-intro{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;}
.ob-intro video{width:100%;height:100%;object-fit:contain;display:block;}
@media (max-aspect-ratio:3/4){.ob-intro video{object-fit:cover;}}
.ob-intro-skip,.ob-intro-sound{position:absolute;border:1px solid #ffffff55;background:#00000066;color:#fff;font:600 14px var(--fb,system-ui);border-radius:999px;padding:9px 16px;cursor:pointer;backdrop-filter:blur(6px);}
.ob-intro-skip{right:16px;bottom:calc(20px + env(safe-area-inset-bottom));}
.ob-intro-sound{left:16px;bottom:calc(20px + env(safe-area-inset-bottom));}
.ob-intro-sound[hidden]{display:none;}