:root{
  --cream:#fffbf3; --cream-deep:#faf4e6; --paper:#fff; --ink:#3b352e; --muted:#6a6153; --line:#ece5d6; --line-soft:#f3eee3;
  --gold:#f2b64a; --gold-hover:#e6a836; --gold-deep:#7a5a14; --gold-wash:#fbefd2; --gold-soft:#fdf7e8;
  --sage:#7fa585; --sage-deep:#3f6144; --sage-wash:#e4efe5; --teal:#17404f; --teal-wash:#e3edf0;
  --slate:#7189a4; --slate-deep:#44607c; --slate-wash:#e3eaf2; --danger:#b3402e; --danger-wash:#f9e5e1;
  --plum:#8c3f8f; --plum-wash:#f1e4f2; --brown:#5a4632;
  --radius:1.4rem; --pill:999px; --shadow:0 2px 4px rgba(59,53,46,.05),0 18px 40px -18px rgba(59,53,46,.28);
  --display:"Geologica","Lato",system-ui,sans-serif; --body:"Lato",system-ui,sans-serif;
  --col:30rem; --tabs:4.5rem;
}
html{font-size:16px}
@media(min-width:768px){html{font-size:17px}}
@media(min-width:1100px){html{font-size:19px}}
@media(min-width:1500px){html{font-size:20px}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.45;min-height:100%}
body{background:radial-gradient(75rem 37rem at 50% -12rem,var(--gold-wash),transparent 70%),var(--cream);overscroll-behavior-y:none}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.015em}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
img{max-width:100%}
.app{position:relative;max-width:var(--col);margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--cream);overflow:clip}
@media(min-width:520px){.app{box-shadow:0 0 0 1px var(--line),0 30px 80px -30px rgba(59,53,46,.35)}}
/* top bar */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:calc(.6rem + env(safe-area-inset-top)) 1rem .6rem;background:linear-gradient(var(--cream) 70%,rgba(255,251,243,0))}
.top .where{font-family:var(--display);font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:.5rem;min-width:0}
.top .where small{font-weight:500;color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pillbar{display:flex;align-items:center;gap:.5rem;flex:none}
.iconbtn{width:2.25rem;height:2.25rem;border-radius:.75rem;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.iconbtn svg{width:1.1rem;height:1.1rem}
.score{position:relative;display:flex;align-items:center;gap:.35rem;padding:.45rem .75rem .45rem .6rem;border-radius:var(--pill);background:var(--ink);color:var(--cream);font-family:var(--display);font-weight:700;font-size:.875rem}
.score .star{width:.875rem;height:.875rem;fill:var(--gold)}
.score.bump{animation:bump .35s ease}
@keyframes bump{40%{transform:scale(1.14)}}
.float{position:absolute;right:.4rem;top:-.4rem;font-family:var(--display);font-weight:800;color:var(--sage-deep);animation:floatUp .9s ease forwards;pointer-events:none}
@keyframes floatUp{to{transform:translateY(-2.1rem);opacity:0}}
/* screen */
main{flex:1;display:flex;flex-direction:column;padding:.25rem 1rem calc(var(--tabs) + 1rem + env(safe-area-inset-bottom));min-height:0}
.screen{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(.4rem)}}
.kicker{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-deep)}
.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.4rem;border-radius:var(--pill);background:var(--gold);color:var(--ink);font-family:var(--display);font-weight:700;font-size:1rem;box-shadow:0 10px 22px -12px rgba(242,182,74,.9);transition:transform .12s,box-shadow .12s,opacity .2s}
.cta:active{transform:scale(.97)}
.cta.wide{width:100%}
.cta.ghost{background:var(--paper);border:1px solid var(--line);box-shadow:none}
.cta.dark{background:var(--ink);color:var(--cream);box-shadow:none}
.cta.sage{background:var(--sage);color:#fff;box-shadow:0 10px 22px -12px rgba(127,165,133,.9)}
.cta:disabled{opacity:.4;cursor:not-allowed;transform:none}
.cta svg{width:1.1rem;height:1.1rem}
/* home */
.hero{text-align:center;padding:.4rem .4rem .2rem}
.hero h1{font-size:1.65rem;line-height:1.1}
.hero p{margin:.45rem 0 0;color:var(--muted)}
.ringrow{display:grid;grid-template-columns:5.5rem 1fr;gap:.9rem;align-items:center;margin:.8rem 0 .6rem;padding:.9rem 1rem;border-radius:1.2rem;background:var(--paper);border:1px solid var(--line)}
.ring{position:relative;width:5.5rem;height:5.5rem}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring .bg{stroke:var(--line);fill:none}
.ring .fg{stroke:var(--sage);fill:none;stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.ring .mid{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1;text-align:center}
.ring .mid small{display:block;font-size:.6rem;font-weight:700;color:var(--muted);margin-top:.15rem;letter-spacing:.05em}
.ringrow .nm{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.15}
.ringrow .sub{font-size:.8rem;color:var(--muted);margin-top:.2rem}
.stats{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.stat{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .6rem;border-radius:var(--pill);background:var(--cream-deep);font-family:var(--display);font-weight:700;font-size:.74rem;color:var(--muted)}
.stat.fire{background:var(--gold-wash);color:var(--gold-deep)}
.stat svg{width:.85rem;height:.85rem}
.playrow{margin:.5rem 0 .9rem}
/* the path */
.path{position:relative;display:grid;gap:.6rem;margin:.6rem 0 1rem}
.node{position:relative;display:grid;grid-template-columns:3.6rem 1fr auto;gap:.85rem;align-items:center;padding:.85rem .9rem;border-radius:1.2rem;background:var(--paper);border:1px solid var(--line);text-align:left;transition:transform .12s;width:100%}
.node:active{transform:scale(.985)}
.node.now{border-color:var(--gold);box-shadow:0 14px 30px -18px rgba(242,182,74,.9)}
.node.done{background:var(--sage-wash);border-color:transparent}
.node.lock{opacity:.55}
.node .nm{font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.15}
.node .sub{font-size:.76rem;color:var(--muted);margin-top:.15rem}
.node .meter{margin-top:.45rem}
.node .go{font-family:var(--display);font-weight:800;font-size:.78rem;color:var(--gold-deep);white-space:nowrap}
.node.done .go{color:var(--sage-deep)}
.badge{width:3.6rem;height:3.6rem;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),0 8px 18px -10px rgba(59,53,46,.5);flex:none}
.badge svg{width:55%;height:55%}
.badge.sm{width:2.6rem;height:2.6rem}
.badge.sage{background:var(--sage)}.badge.slate{background:var(--slate)}.badge.teal{background:var(--teal)}.badge.plum{background:var(--plum)}.badge.gold{background:var(--gold);color:var(--ink)}.badge.ink{background:var(--ink);color:var(--gold)}.badge.danger{background:var(--danger)}.badge.lock{background:var(--line-soft);color:var(--line);box-shadow:none}
.meter{height:.5rem;border-radius:var(--pill);background:var(--line-soft);overflow:hidden}
.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--gold));transition:width .5s}
.soon{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.soon span{font-size:.72rem;font-weight:700;color:var(--muted);background:var(--cream-deep);border:1px dashed var(--line);border-radius:var(--pill);padding:.3rem .65rem}
h3.sec{font-size:.95rem;margin:.9rem 0 .45rem;display:flex;align-items:center;justify-content:space-between}
h3.sec small{font-weight:600;color:var(--muted);font-size:.78rem}
/* moments list */
.moments{display:grid;gap:.45rem;margin:.4rem 0 1rem}
.mom{display:grid;grid-template-columns:1.9rem 1fr auto;gap:.6rem;align-items:center;padding:.65rem .8rem;border-radius:1rem;background:var(--paper);border:1px solid var(--line);text-align:left;width:100%}
.mom .dot{width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;font:800 .78rem var(--display);background:var(--cream-deep);color:var(--muted)}
.mom.done .dot{background:var(--sage);color:#fff}
.mom.part .dot{background:var(--gold-wash);color:var(--gold-deep)}
.mom.now{border-color:var(--gold)}
.mom .t{font-family:var(--display);font-weight:700;font-size:.9rem;line-height:1.15}
.mom .s{font-size:.72rem;color:var(--muted)}
.mom .dot svg{width:1rem;height:1rem}
/* deck */
.hud{display:flex;align-items:center;gap:.75rem;margin:.3rem 0 .7rem}
.track{flex:1;height:.6rem;border-radius:var(--pill);background:var(--line-soft);overflow:hidden;position:relative}
.track span{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--gold));width:0;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.hud .n{font-family:var(--display);font-weight:700;font-size:.875rem;color:var(--muted);white-space:nowrap}
.streak{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .55rem;border-radius:var(--pill);background:var(--gold-wash);color:var(--gold-deep);font-family:var(--display);font-weight:800;font-size:.78rem;opacity:0;transform:scale(.8);transition:all .25s;white-space:nowrap}
.streak.on{opacity:1;transform:none}
.deck{position:relative;flex:1;display:flex;flex-direction:column;min-height:26rem}
.qcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;user-select:none;-webkit-user-select:none;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .3s;will-change:transform;overflow:hidden}
.qcard.main{position:relative;z-index:2;flex:1;touch-action:pan-y}
.qcard.behind{position:absolute;inset:0;z-index:1;pointer-events:none;min-height:8rem}
.qcard.b1{transform:translateY(.75rem) scale(.96);opacity:.9}
.qcard.b2{transform:translateY(1.5rem) scale(.92);opacity:.6}
.qcard.enter{transform:translateY(.75rem) scale(.96);opacity:0}
.qcard.fly-left{transform:translateX(-140%) rotate(-10deg);opacity:0}
.qcard.fly-right{transform:translateX(140%) rotate(10deg);opacity:0}
.qcard.dragging{transition:none}
.qcard .body{flex:1;overflow:auto;padding:1.15rem 1.1rem .6rem;display:flex;flex-direction:column;gap:.75rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;touch-action:pan-y}
.qcard .foot{padding:.6rem 1rem calc(.8rem + env(safe-area-inset-bottom)/2);display:flex;gap:.5rem;align-items:center;border-top:1px solid var(--line-soft);background:var(--paper)}
.qcard .foot .cta{padding:.8rem 1.1rem;font-size:.95rem}
.qcard .foot .grow{flex:1}
.qcard .tag{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.qcard h2{font-size:1.28rem;line-height:1.18}
.qcard .x{font-size:.98rem;line-height:1.5;white-space:pre-line}
.qcard .x b{font-weight:700}
.stamp{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .55rem;border-radius:var(--pill);font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.stamp.rev{background:var(--plum-wash);color:var(--plum)}
.stamp.again{background:var(--danger-wash);color:var(--danger)}
.stamp.boss{background:var(--ink);color:var(--gold)}
.stamp.later{background:var(--slate-wash);color:var(--slate-deep)}
.ill{display:grid;place-items:center;margin:.2rem auto .1rem}
.ill.big{width:7.5rem;height:7.5rem;border-radius:2.2rem;background:var(--gold-soft)}
.ill.big svg{width:4.2rem;height:4.2rem}
.ill.sm{width:3.4rem;height:3.4rem;border-radius:1.1rem;background:var(--gold-soft);margin:0}
.ill.sm svg{width:2rem;height:2rem}
.ill.sage{background:var(--sage-wash)}.ill.teal{background:var(--teal-wash)}.ill.plum{background:var(--plum-wash)}
.ill svg{stroke:var(--gold-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ill.sage svg{stroke:var(--sage-deep)}.ill.teal svg{stroke:var(--teal)}.ill.plum svg{stroke:var(--plum)}
.posepic{display:grid;place-items:center;background:var(--cream-deep);border-radius:1.1rem;padding:.6rem;min-height:9rem}
.posepic img{max-height:14rem;width:auto;object-fit:contain}
.quote{font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.4;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--gold)}
/* options */
.opts{display:grid;gap:.55rem}
.opt{position:relative;text-align:left;padding:.8rem 2.4rem .8rem .9rem;border:2px solid var(--line);border-radius:1.1rem;background:var(--cream);display:flex;flex-direction:column;gap:.3rem;transition:transform .15s,border-color .15s,background .15s,opacity .15s;font-size:.95rem;line-height:1.35;width:100%}
.opt:active{transform:scale(.985)}
.opt.lit{border-color:var(--gold);background:var(--gold-soft)}
.opt.ok{border-color:var(--sage);background:var(--sage-wash)}
.opt.bad{border-color:var(--danger);background:var(--danger-wash);animation:shake .4s}
.opt.dim{opacity:.4}
.opt.sel{border-color:var(--plum);background:var(--plum-wash)}
.opt .key{position:absolute;top:.6rem;right:.6rem;width:1.4rem;height:1.4rem;border-radius:.45rem;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font:700 .72rem var(--display);color:var(--muted)}
.opt .mark{position:absolute;top:.65rem;right:.65rem;width:1.35rem;height:1.35rem;border-radius:50%;display:none;place-items:center;color:#fff;font-weight:800;font-size:.8rem}
.opt.ok .mark{display:grid;background:var(--sage)}.opt.bad .mark{display:grid;background:var(--danger)}
.opt.ok .key,.opt.bad .key{display:none}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.fb{padding:.75rem .9rem;border-radius:1rem;font-size:.9rem;line-height:1.4;animation:fadeIn .25s}
.fb.ok{background:var(--sage-wash);color:var(--sage-deep)}
.fb.bad{background:var(--danger-wash);color:var(--danger)}
.fb.note{background:var(--gold-soft);color:var(--gold-deep)}
.fb b{display:block;font-family:var(--display);margin-bottom:.15rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.two .opt{min-height:4.5rem;align-items:center;justify-content:center;text-align:center;padding:.8rem .6rem;font-family:var(--display);font-weight:700;font-size:1.05rem}
@media(hover:none) and (pointer:coarse){.opt .key{display:none}.hint.keys{display:none}}
@media(hover:hover) and (pointer:fine){.hint.touch{display:none}}
/* carousel */
.car{position:relative;margin:0 -1.1rem}
.car .trk{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem 1.1rem .4rem;scrollbar-width:none;touch-action:pan-x pan-y}
.car .trk::-webkit-scrollbar{display:none}
.car .sl{flex:0 0 calc(100% - 1.6rem);scroll-snap-align:center;background:var(--gold-soft);border:1.5px solid var(--gold-wash);border-radius:1.1rem;padding:.95rem 1rem;display:flex;flex-direction:column;gap:.4rem;min-height:8rem}
.car .sl .n{width:1.7rem;height:1.7rem;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font:800 .78rem var(--display)}
.car .sl h3{font-size:1rem}
.car .sl p{margin:0;font-size:.95rem;line-height:1.45}
.car .sl.pose{background:var(--paper);border-color:var(--line);align-items:center;text-align:center}
.car .sl.pose img{max-height:11rem;width:auto;object-fit:contain}
.car .sl.pose .nm{font-family:var(--display);font-weight:800}
.car .sl.pose .sb{font-size:.82rem;color:var(--muted)}
.car .sl.pose .nt{font-size:.85rem;margin-top:.1rem}
.dots{display:flex;justify-content:center;gap:.35rem;margin-top:.1rem}
.dots i{width:.45rem;height:.45rem;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--gold);width:1.1rem;border-radius:var(--pill)}
.arrows{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.arrows .ab{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.arrows .ab svg{width:1.1rem;height:1.1rem}
.arrows .ab:disabled{opacity:.3}
/* flip */
.flipwrap{perspective:1200px;display:grid;place-items:center}
.flip{position:relative;width:100%;max-width:19rem;aspect-ratio:4/5;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.flip.on{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:1.1rem;overflow:hidden;background:var(--cream-deep);border:1px solid var(--line);display:grid;place-items:center;padding:.6rem;text-align:center}
.flip .b{transform:rotateY(180deg);background:var(--gold-soft)}
.flip img{width:100%;height:100%;object-fit:contain}
.flip .tx{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.35}
/* steps */
.steps{display:grid;gap:.45rem;counter-reset:s}
.step{display:grid;grid-template-columns:1.8rem 1fr;gap:.6rem;align-items:start;padding:.65rem .8rem;border-radius:.9rem;background:var(--cream-deep);font-size:.93rem;line-height:1.4;animation:fadeIn .3s}
.step .n{width:1.8rem;height:1.8rem;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font:800 .78rem var(--display)}
.step.hid{display:none}
/* video */
.vid{position:relative;border-radius:1.1rem;overflow:hidden;background:var(--ink);aspect-ratio:16/9}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid.tall{aspect-ratio:9/14;max-height:60vh}
/* reflect */
.ta{width:100%;min-height:7rem;padding:.8rem .9rem;border-radius:1rem;border:2px solid var(--line);font:inherit;font-size:.95rem;background:var(--cream);resize:vertical}
.ta:focus{outline:none;border-color:var(--gold)}
.hint{text-align:center;font-size:.75rem;color:var(--muted);padding:.35rem 0 0}
/* done screens */
.done{text-align:center;padding:1.2rem .25rem}
.done h2{font-size:1.5rem;margin:.6rem 0 .25rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0}
.tile{padding:.9rem 1rem;border-radius:1.1rem;background:var(--paper);border:1px solid var(--line);text-align:left}
.tile .v{font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1.1}
.tile .l{font-size:.8rem;color:var(--muted);margin-top:.2rem}
.tile.gold{background:var(--gold-wash);border-color:transparent}
.tile.sage{background:var(--sage-wash);border-color:transparent}
/* catch-up list */
.list{display:grid;gap:.5rem}
.item{display:grid;grid-template-columns:2.4rem 1fr;gap:.7rem;align-items:center;padding:.75rem .85rem;border-radius:1rem;background:var(--paper);border:1px solid var(--line);text-align:left;width:100%}
.item .t{font-family:var(--display);font-weight:700;font-size:.9rem;line-height:1.15}
.item .s{font-size:.72rem;color:var(--muted)}
.item .ic{width:2.4rem;height:2.4rem;border-radius:.8rem;background:var(--cream-deep);display:grid;place-items:center;color:var(--muted)}
.item .ic svg{width:1.2rem;height:1.2rem}
.item.miss .ic{background:var(--danger-wash);color:var(--danger)}
.item.skip .ic{background:var(--slate-wash);color:var(--slate-deep)}
.empty{text-align:center;padding:1.8rem 1rem}
.empty h2{font-size:1.25rem;margin:.6rem 0 .4rem}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:.4rem 0 1rem}
.bd{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;font-size:.68rem;font-weight:700;color:var(--muted);line-height:1.15}
.bd.off .badge{background:var(--line-soft);color:var(--line);box-shadow:none}
.bd.off{color:var(--line)}
.bd.on{color:var(--ink)}
.lvl{display:grid;grid-template-columns:3.6rem 1fr;gap:.8rem;align-items:center;padding:.9rem 1rem;border-radius:1.1rem;background:var(--paper);border:1px solid var(--line);margin:.6rem 0}
.lvl .nm{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.1}
.lvl .sub{font-size:.78rem;color:var(--muted);margin-top:.15rem}
.lvl .meter{margin-top:.45rem}
.row{display:flex;gap:.5rem;align-items:center}
/* tabs */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,var(--col));z-index:6;display:grid;grid-template-columns:repeat(4,1fr);padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom));background:rgba(255,251,243,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.tab{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.4rem 0;border-radius:.9rem;color:var(--muted);font-family:var(--display);font-weight:700;font-size:.72rem;position:relative;transition:color .15s}
.tab svg{width:1.4rem;height:1.4rem}
.tab.on{color:var(--ink)}
.tab.on::before{content:"";position:absolute;top:-.55rem;width:1.75rem;height:3px;border-radius:2px;background:var(--gold)}
.tab .bdg{position:absolute;top:0;right:calc(50% - 1.5rem);min-width:1.1rem;height:1.1rem;padding:0 .3rem;border-radius:var(--pill);background:var(--gold);color:var(--ink);font-size:.68rem;display:grid;place-items:center}
/* overlay */
.overlay{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:1.25rem;background:rgba(59,53,46,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.overlay.on{display:flex;animation:fadeIn .25s}
.modal{width:min(100%,26rem);background:var(--paper);border-radius:1.6rem;padding:1.6rem 1.4rem 1.4rem;text-align:center;box-shadow:var(--shadow);animation:pop .45s cubic-bezier(.2,1.4,.3,1)}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.modal h2{font-size:1.4rem;margin:.5rem 0 .4rem}
.modal .acts{display:grid;gap:.6rem;margin-top:1.1rem}
.modal .badge{margin:0 auto .4rem;width:5.25rem;height:5.25rem;animation:pop .6s cubic-bezier(.2,1.4,.3,1)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.confetti i{position:absolute;top:-10px;width:9px;height:14px;border-radius:2px;animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.6}}
.toast{position:fixed;left:50%;bottom:calc(var(--tabs) + 1.1rem + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(1rem);opacity:0;background:var(--ink);color:var(--cream);padding:.7rem 1rem;border-radius:var(--pill);font-family:var(--display);font-weight:700;font-size:.85rem;transition:all .3s;pointer-events:none;z-index:25;max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}
@media(max-height:720px){.qcard h2{font-size:1.12rem}.deck{min-height:22rem}.ill.big{width:5.5rem;height:5.5rem}.ill.big svg{width:3.2rem;height:3.2rem}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}