/* VERDICT — warm courtroom desk: paper, ink, rubber stamps */
:root{
  --bg:#F6EFE2; --bg-outer:#E9DFCC; --card:#FFFDF8; --ink:#1E2147; --ink-2:#555A82; --ink-3:#9A9DBA;
  --line:#E4DAC6; --edge:#E6DCC8; --edge-strong:#D8CBB2;
  --orange:#FF7A1A; --orange-deep:#C85A0A; --red:#D8392B; --green:#1F9D6B; --gold:#E8A317; --indigo:#3A3F8F;
  --shadow:0 18px 40px -20px rgba(30,33,71,.45);
  --font-d:'Fraunces',Georgia,'Times New Roman',serif; --font-u:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14162E; --bg-outer:#0C0D1D; --card:#1F2245; --ink:#F4EFE3; --ink-2:#B9BBDB; --ink-3:#6E7199;
    --line:#2D315E; --edge:#2A2E5A; --edge-strong:#12142B; --shadow:0 18px 40px -20px rgba(0,0,0,.7);
    --red:#FF6B5B; --green:#3BD39A; --indigo:#8E94FF;
    color-scheme:dark;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--bg-outer);color:var(--ink);font-family:var(--font-u);font-weight:700;display:flex;justify-content:center;
  -webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
#app{position:relative;width:100%;max-width:480px;height:100vh;height:100dvh;overflow:hidden;background:var(--bg)}
@media (min-width:560px) and (min-height:760px){
  body{align-items:center}
  #app{height:min(100dvh - 40px,900px);border-radius:36px;box-shadow:0 30px 80px -30px rgba(0,0,0,.55)}
}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 14px);animation:in .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
h1,h2,h3{font-family:var(--font-d);margin:0;font-weight:800;letter-spacing:-.01em}

/* ───────── buttons ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:20px;padding:16px 22px;font-weight:800;font-size:19px;
  transition:transform .08s,box-shadow .08s}
.btn.primary{background:var(--orange);color:#fff;box-shadow:0 6px 0 var(--orange-deep),0 14px 24px -10px rgba(255,122,26,.7);text-shadow:0 1px 0 rgba(0,0,0,.12)}
.btn.primary:active{transform:translateY(5px);box-shadow:0 1px 0 var(--orange-deep)}
.btn.ghost{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 3px var(--line)}
.btn.ghost:active{transform:scale(.97)}
.btn.big{width:100%;font-size:23px;padding:20px 22px;border-radius:26px}
.btn.green{background:var(--green);box-shadow:0 6px 0 #14714e}
.btn.green:active{box-shadow:0 1px 0 #14714e}
.iconbtn{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:18px;color:var(--ink-2);background:var(--card);box-shadow:0 2px 0 var(--edge)}
.iconbtn:active{transform:translateY(2px);box-shadow:none}

/* ───────── home ───────── */
.h-top{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border-radius:999px;padding:8px 14px;font-weight:800;font-size:16px;box-shadow:0 2px 0 var(--edge)}
.pill.streak b{color:var(--orange)} .pill.off{opacity:.55}
.spacer{flex:1}
.h-hero{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative}
.ring{position:relative;width:min(240px,56vw);aspect-ratio:1;display:grid;place-items:center}
.ring svg.r{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .back{fill:none;stroke:var(--line);stroke-width:9}
.ring .fill{fill:none;stroke:var(--orange);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.9,.3,1)}
.ring .disc{position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#FFF6E6,#FFE2BC);display:grid;place-items:end center;overflow:hidden}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ring .disc{background:radial-gradient(circle at 50% 35%,#3A3E7C,#262A5A)}}
.ring .hakim{margin-bottom:-6px;animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.hakim .blink{transform-box:fill-box;transform-origin:center;animation:blink 4.2s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.rank-line{font-weight:800;color:var(--ink-2);font-size:15px;text-align:center}
.rank-line b{color:var(--ink)}
.bubble{position:relative;background:var(--card);border-radius:20px;padding:12px 18px;max-width:320px;text-align:center;font-family:var(--font-d);font-weight:600;font-size:18px;line-height:1.3;box-shadow:0 2px 0 var(--edge)}
.bubble:before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;background:var(--card);transform:translateX(-50%) rotate(45deg);border-radius:3px}
.h-cta{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:6px}
.h-cta .sub{margin:2px 0 0;color:var(--ink-2);font-size:15px}
.h-cta .next{margin:0;color:var(--ink-3);font-size:14px}
.week{display:flex;justify-content:center;gap:10px;margin:6px 0 10px}
.week .d{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);font-weight:800}
.week .d i{width:26px;height:26px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-style:normal;font-size:13px;color:transparent}
.week .d.on i{background:var(--orange);color:#fff}
.week .d.today i{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink-3)}
.week .d.today.on i{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--orange)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--card);border-radius:22px;padding:6px;box-shadow:0 2px 0 var(--edge)}
.tab{border-radius:16px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;font-weight:800;color:var(--ink-3)}
.tab .ti{font-size:22px;filter:grayscale(1);opacity:.6}
.tab.on{background:color-mix(in srgb,var(--orange) 16%,var(--card));color:var(--orange-deep)}
.tab.on .ti{filter:none;opacity:1}

/* ───────── sitting ───────── */
.sit-top{display:flex;align-items:center;gap:12px;padding-bottom:12px}
.pips{flex:1;display:flex;gap:6px}
.pip{flex:1;height:9px;border-radius:6px;background:var(--line);transition:background .25s,transform .25s}
.pip.cur{background:var(--ink-3);transform:scaleY(1.25)}
.pip.ok{background:var(--green)} .pip.tw{background:var(--orange)}
.pip.re{background-image:repeating-linear-gradient(135deg,transparent 0 4px,rgba(255,255,255,.55) 4px 7px)}
.deck{flex:1;min-height:0;display:flex;perspective:900px}
.case{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:var(--card);border-radius:30px;overflow:hidden;
  box-shadow:0 3px 0 var(--edge),var(--shadow);touch-action:pan-y;cursor:grab;will-change:transform;animation:deal .45s cubic-bezier(.2,1.1,.3,1) both}
@keyframes deal{from{opacity:0;transform:translateY(40px) rotate(2deg) scale(.96)}to{opacity:1;transform:none}}
.case.back{transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.case.jolt{animation:jolt .3s}
@keyframes jolt{0%{transform:translate(0,0)}20%{transform:translate(-5px,4px) rotate(-.6deg)}45%{transform:translate(4px,-3px) rotate(.5deg)}70%{transform:translate(-2px,2px)}100%{transform:none}}
.stage{position:relative;flex:1 1 0;min-height:120px;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;overflow:hidden;
  background:color-mix(in srgb,var(--tint,#FFE0BD) 85%,var(--card));transition:padding .3s}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stage{background:color-mix(in srgb,var(--tint,#FFE0BD) 22%,var(--card))}}
.stage:before,.stage:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.35)}
.stage:before{width:120px;height:120px;left:-30px;top:-40px}.stage:after{width:80px;height:80px;right:-20px;bottom:-30px}
.stage .em{position:relative;z-index:1;font-size:clamp(64px,11vh,104px);line-height:1.05;filter:drop-shadow(0 6px 6px rgba(30,33,71,.18));animation:floaty 3.4s ease-in-out infinite;transition:font-size .3s}
.stage .em:nth-child(2){animation-delay:-1.2s;font-size:clamp(54px,9vh,88px)}.stage .em:nth-child(3){animation-delay:-2.2s;font-size:clamp(46px,8vh,72px)}
@keyframes floaty{50%{transform:translateY(-6px) rotate(2deg)}}
.case.revealed .stage{flex:0 0 auto;min-height:0;padding:14px 16px}
.case.revealed .stage .em{font-size:38px!important;animation:none}
.cbody{flex:0 0 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding:20px 22px 24px;overflow:auto}
.story{margin:0;font-family:var(--font-d);font-weight:600;font-size:21px;line-height:1.38;color:var(--ink)}
.q{font-size:25px;line-height:1.15;color:var(--ink)}
.case.revealed .story{font-size:17px}.case.revealed .q{font-size:20px}.case.revealed .cbody{gap:8px;padding:14px 22px 16px}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:800}
.ribbon{position:absolute;top:14px;left:-34px;transform:rotate(-35deg);background:var(--orange);color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 40px;z-index:3}
.tag{position:absolute;top:18px;padding:6px 12px;border:4px solid;border-radius:14px;font-family:var(--font-d);font-weight:800;font-size:19px;opacity:0;z-index:4;pointer-events:none;background:color-mix(in srgb,var(--card) 80%,transparent);text-transform:uppercase}
.tag.l{left:16px;transform:rotate(-8deg)}.tag.r{right:16px;transform:rotate(8deg)}
.stamp{position:absolute;left:50%;top:44%;z-index:5;pointer-events:none;padding:8px 20px;border:5px double currentColor;border-radius:16px;
  font-family:var(--font-d);font-weight:800;font-size:clamp(24px,8vw,34px);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  transform:translate(-50%,-50%) rotate(-9deg);background:color-mix(in srgb,var(--card) 70%,transparent);animation:slam .4s cubic-bezier(.2,1.5,.4,1) both;
  mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stamp{mix-blend-mode:normal}}
.stamp.t-y{color:var(--green)}.stamp.t-n{color:var(--red)}.stamp.t-x{color:var(--indigo)}
@keyframes slam{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.8)}45%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) rotate(-9deg) scale(1)}}

.dock{flex:0 0 auto;padding-top:14px}
.verdicts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vbtn{position:relative;background:var(--card);border-radius:24px;padding:14px 8px 13px;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-weight:800;font-size:19px;line-height:1.1;color:var(--ink);box-shadow:inset 0 0 0 3px var(--tone),0 6px 0 var(--edge-strong);transition:transform .08s,box-shadow .08s,background .2s;text-align:center}
.vbtn .vi{font-size:30px;line-height:1}
.vbtn:active,.vbtn.press{transform:translateY(5px);box-shadow:inset 0 0 0 3px var(--tone),0 1px 0 var(--edge-strong)}
.vbtn.hot{background:color-mix(in srgb,var(--tone) 14%,var(--card))}
.vbtn.picked{background:color-mix(in srgb,var(--tone) 20%,var(--card));transform:translateY(5px);box-shadow:inset 0 0 0 3px var(--tone),0 1px 0 var(--edge-strong)}
.vbtn.picked:after{content:"";position:absolute;inset:-6px;border-radius:28px;border:3px solid var(--tone);animation:ripple .5s ease-out both}
@keyframes ripple{from{opacity:.9;transform:scale(.92)}to{opacity:0;transform:scale(1.14)}}
.t-y{--tone:var(--green)}.t-n{--tone:var(--red)}.t-x{--tone:var(--indigo)}
.hint{margin:10px 0 0;text-align:center;font-size:13px;color:var(--ink-3)}
.coach{display:flex;align-items:center;gap:10px;margin-bottom:10px;background:var(--card);border-radius:18px;padding:8px 14px 8px 8px;box-shadow:0 2px 0 var(--edge);animation:in .4s .5s both;font-size:15px;color:var(--ink-2)}

.reveal{background:var(--card);border-radius:26px;padding:14px 18px 16px;box-shadow:0 3px 0 var(--edge),var(--shadow);animation:sheet .38s cubic-bezier(.2,1.1,.3,1) both;border-top:6px solid var(--green)}
.reveal.twist{border-top-color:var(--orange)}
@keyframes sheet{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.rv-head{display:flex;align-items:center;gap:10px}
.rv-head .hakim{flex:0 0 auto;margin:-6px 0 -6px -4px}
.rv-badge{font-family:var(--font-d);font-weight:800;font-size:23px;color:var(--green)}
.reveal.twist .rv-badge{color:var(--orange-deep)}
.rv-xp{margin-left:auto;font-weight:800;color:var(--gold);font-size:17px}
.rv-rule{margin:6px 0 4px;font-family:var(--font-d);font-weight:800;font-size:21px;line-height:1.22}
.rv-why{margin:0 0 10px;font-size:15.5px;line-height:1.4;color:var(--ink-2);font-weight:700}
.law-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:12px;background:color-mix(in srgb,var(--ink) 7%,var(--card));font-size:13.5px;font-weight:800;color:var(--ink-2);margin-bottom:12px}
.law-chip b{font-family:var(--font-d);color:var(--ink)}
.law-quote{margin:0 0 12px;padding:10px 12px;border-left:4px solid var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--card));border-radius:0 12px 12px 0;font-family:var(--font-d);font-weight:600;font-size:14.5px;line-height:1.42;color:var(--ink);max-height:130px;overflow:auto;user-select:text;-webkit-user-select:text}
.law-quote small{display:block;margin-top:6px;font-family:var(--font-u);font-size:12px;color:var(--ink-3);font-weight:800}
.reveal .btn{width:100%}

/* ───────── summary ───────── */
.done{align-items:center;text-align:center;overflow:auto}
.done h1{font-size:34px;margin:2px 0 4px}
.done .lead{margin:0;color:var(--ink-2);font-size:17px}
.done .hakim{margin-top:4px}
.gutrow{display:flex;gap:8px;justify-content:center;margin:14px 0 4px}
.gutrow i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:15px;color:#fff;background:var(--orange);animation:pop .4s cubic-bezier(.2,1.6,.4,1) both}
.gutrow i.ok{background:var(--green)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin:14px 0}
.stat{background:var(--card);border-radius:22px;padding:14px 8px;box-shadow:0 2px 0 var(--edge)}
.stat .n{font-family:var(--font-d);font-weight:800;font-size:32px;line-height:1}
.stat .l{font-size:13px;color:var(--ink-3);margin-top:4px}
.stat.xp .n{color:var(--gold)}.stat.fire .n{color:var(--orange)}
.learned{width:100%;display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.lrow{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:18px;padding:8px 14px 8px 8px;text-align:left;box-shadow:0 2px 0 var(--edge);animation:in .4s both}
.lrow .t{flex:1;font-weight:800;font-size:16px;line-height:1.15}.lrow .t small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.lrow .up{font-size:13px;font-weight:800;color:var(--green)} .lrow .up.dn{color:var(--orange-deep)}
.done .actions{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:6px}

/* ───────── library ───────── */
.page-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.page-h h1{font-size:30px}
.scroll{flex:1;min-height:0;overflow:auto;margin:0 -18px;padding:2px 18px 14px;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.book{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border-radius:26px;padding:16px;margin-bottom:12px;box-shadow:0 4px 0 var(--edge-strong)}
.book:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge-strong)}
.book .cover{flex:0 0 auto;width:62px;height:76px;border-radius:12px 18px 18px 12px;display:grid;place-items:center;font-size:30px;color:#fff;
  background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 70%,#000));box-shadow:inset 6px 0 0 rgba(0,0,0,.18)}
.book .bt{flex:1;min-width:0}.book h3{font-size:19px}.book p{margin:2px 0 8px;color:var(--ink-2);font-size:14px;font-weight:700}
.bar{height:10px;border-radius:6px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;background:var(--c,var(--orange));border-radius:6px;transition:width .8s cubic-bezier(.2,.9,.3,1)}
.bar-l{margin-top:5px;font-size:12.5px;color:var(--ink-3)}
.soon{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.soon div{background:color-mix(in srgb,var(--card) 60%,transparent);border:2px dashed var(--line);border-radius:18px;padding:12px;font-size:14px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.sec-t{margin:18px 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.chap{margin-bottom:18px}
.chap-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.chap-h .ce{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--tint)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chap-h .ce{background:color-mix(in srgb,var(--tint) 30%,var(--card))}}
.chap-h h3{font-size:19px;flex:1}.chap-h span{font-size:13px;color:var(--ink-3)}
.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sbtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:16px;text-align:center;font-size:11.5px;line-height:1.1;color:var(--ink-2);font-weight:800}
.sbtn:active{background:var(--card)}
.sbtn span{min-height:26px;display:flex;align-items:flex-start;justify-content:center}
.note{background:color-mix(in srgb,var(--gold) 14%,var(--card));border-radius:16px;padding:10px 14px;font-size:13.5px;color:var(--ink-2);margin-bottom:12px}

/* ───────── sheets & overlays ───────── */
.scrim{position:absolute;inset:0;z-index:20;background:rgba(20,22,46,.5);display:flex;align-items:flex-end;animation:fade .2s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:100%;background:var(--bg);border-radius:30px 30px 0 0;padding:22px 20px calc(env(safe-area-inset-bottom) + 20px);max-height:88%;overflow:auto;animation:up .32s cubic-bezier(.2,1.1,.3,1) both;text-align:center}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet h2{font-size:26px;margin:6px 0}.sheet p{color:var(--ink-2);margin:6px 0;line-height:1.4}
.sheet .row{display:flex;gap:10px;margin-top:14px}.sheet .row .btn{flex:1;padding:14px 10px;font-size:17px}
.sheet .qt{text-align:left}
.setrow{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-radius:18px;padding:14px 16px;margin-top:10px;font-weight:800;box-shadow:0 2px 0 var(--edge)}
.sw{width:52px;height:30px;border-radius:16px;background:var(--line);position:relative;transition:background .2s}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw.on{background:var(--green)}.sw.on:after{transform:translateX(22px)}
.fine{font-size:12.5px!important;color:var(--ink-3)!important}
.lvl-tag{display:inline-block;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:800;background:var(--line);color:var(--ink-2)}
.lvl-tag.l2{background:color-mix(in srgb,var(--indigo) 18%,var(--card));color:var(--indigo)}.lvl-tag.l3{background:color-mix(in srgb,var(--gold) 25%,var(--card));color:#9a6a00}

.full{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px;
  background:radial-gradient(circle at 50% 38%,#4A3FB0,#1E2147 70%);color:#fff;animation:fade .3s both}
.full h2{font-size:38px;color:#fff}.full .kick{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#FFD27A}
.full .rk{font-family:var(--font-d);font-weight:800;font-size:46px;color:#FFD27A;animation:slam2 .6s .2s cubic-bezier(.2,1.6,.4,1) both}
@keyframes slam2{from{opacity:0;transform:scale(2.4)}to{opacity:1;transform:none}}
.full .btn{margin-top:22px;min-width:220px}

.confetti{position:absolute;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.confetti i{position:absolute;top:-20px;border-radius:2px;opacity:0;animation:fall linear forwards}
@keyframes fall{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:1;transform:translate(var(--dx),110vh) rotate(var(--rot))}}
.float-xp{position:absolute;z-index:6;left:50%;top:30%;font-family:var(--font-d);font-weight:800;font-size:30px;color:var(--gold);transform:translateX(-50%);pointer-events:none;animation:xp 1s ease-out both;text-shadow:0 2px 0 rgba(0,0,0,.12)}
@keyframes xp{from{opacity:0;transform:translate(-50%,20px) scale(.6)}25%{opacity:1;transform:translate(-50%,0) scale(1.1)}to{opacity:0;transform:translate(-50%,-50px)}}
@media (max-height:700px){
  .story{font-size:18px}.q{font-size:22px}.cbody{padding:14px 18px 16px}
  .btn.big{font-size:21px;padding:17px 20px}.rv-rule{font-size:19px}.vbtn{font-size:17px;padding:11px 6px}.vbtn .vi{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ───────── patches: card lifecycle & overlay reveal ───────── */
.case.dealt{animation:none}
.case.dealt.jolt{animation:jolt .3s}
.dock.dim{opacity:.3;pointer-events:none;transition:opacity .25s}
.reveal{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:10;max-height:70%;overflow:auto}
.stamp{top:40px}
.screen.sit{padding-bottom:calc(env(safe-area-inset-bottom) + 14px)}
.empty{margin:auto;color:var(--ink-3);text-align:center}

/* reveal: the stamp replaces the picture */
.case.revealed .stage{flex:0 0 100px;min-height:100px;padding:0}
.case.revealed .stage .em{display:none}
.stamp{top:50px}
.float-xp{top:120px;left:auto;right:22px;transform:none}
@keyframes xp{from{opacity:0;transform:translateY(16px) scale(.6)}25%{opacity:1;transform:none}to{opacity:0;transform:translateY(-46px)}}

/* reveal v2: sheet is measured first, the card fits above it, stamp lands on the picture */
.stage{container-type:size}
.case.revealed .stage{flex:1 1 0;min-height:90px;padding:0}
.case.revealed .stage .em{display:block;font-size:clamp(40px,8vh,76px)!important;animation:none}
@container (max-height:150px){ .case.revealed .stage .em{opacity:0} }
.stamp{top:50%}
.float-xp{top:14px;right:18px}
.reveal.pending{visibility:hidden;animation:none}
.case{transition:padding-bottom 0s}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stage:before,:root:not([data-theme="light"]) .stage:after{background:rgba(255,255,255,.07)}}
.lrow .up.dn{color:var(--orange-deep)}

/* roomy stage: picture up top, stamp lands below it */
@container (min-height:200px){
  .case.revealed .stage{align-items:flex-start;padding-top:14cqh}
  .case.revealed .stamp{top:68cqh}
}
.float-xp{top:auto;bottom:12px;right:20px}
@container (min-height:200px){ .case.revealed .stamp{top:74cqh} }

:root[data-theme="dark"]{
  --bg:#14162E; --bg-outer:#0C0D1D; --card:#1F2245; --ink:#F4EFE3; --ink-2:#B9BBDB; --ink-3:#6E7199;
  --line:#2D315E; --edge:#2A2E5A; --edge-strong:#12142B; --shadow:0 18px 40px -20px rgba(0,0,0,.7);
  --red:#FF6B5B; --green:#3BD39A; --indigo:#8E94FF; color-scheme:dark;
}
:root[data-theme="dark"] .ring .disc{background:radial-gradient(circle at 50% 35%,#3A3E7C,#262A5A)}
:root[data-theme="dark"] .stage{background:color-mix(in srgb,var(--tint,#FFE0BD) 22%,var(--card))}
:root[data-theme="dark"] .stamp{mix-blend-mode:normal}