/* Verdict Pop — the UI skin that matches the drawn art: plum ink outlines, candy fills, hard sticker shadows, warm paper dots.
   One light theme only, so the drawn icons (fixed plum outlines) always sit on the same kind of surface. */
:root,:root:not([data-theme="light"]){
  --ink:#4a2f45;--ink-2:#7b5b74;--ink-3:#b199ad;--bg:#fff1d6;--bg-outer:#f1dcb4;--card:#fffaf0;--line:#efdcbc;--edge:#4a2f45;--edge-strong:#4a2f45;
  --orange:#ff8a3c;--orange-deep:#c9581a;--red:#ee4d5a;--green:#38b36b;--gold:#ffc94d;--indigo:#6b57c9;--ink-line:#4a2f45;
  --shadow:0 10px 0 -4px rgba(74,47,69,.18);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#4a2f45;--ink-2:#7b5b74;--ink-3:#b199ad;--bg:#fff1d6;--bg-outer:#f1dcb4;--card:#fffaf0;--line:#efdcbc;--edge:#4a2f45;--edge-strong:#4a2f45;
  --orange:#ff8a3c;--orange-deep:#c9581a;--red:#ee4d5a;--green:#38b36b;--indigo:#6b57c9;color-scheme:light}}
body{background:var(--bg-outer)}
#app{background-color:var(--bg);background-image:radial-gradient(rgba(74,47,69,.07) 1.4px,transparent 1.6px);background-size:18px 18px}
h1,h2,h3{font-weight:900;color:var(--ink)}

/* buttons: chunky stickers */
.btn{border:3px solid var(--ink)}
.btn.primary{background:linear-gradient(#ffa352,#ff8a3c);box-shadow:inset 0 3px 0 rgba(255,255,255,.45),0 6px 0 var(--ink);text-shadow:0 2px 0 rgba(74,47,69,.55);color:#fff}
.btn.primary:active{transform:translateY(5px);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 1px 0 var(--ink)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.btn.ghost:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.green{background:#4fcfa4;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 6px 0 var(--ink)}
.iconbtn{background:var(--card);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);color:var(--ink)}
.iconbtn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.pill{background:var(--card);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);color:var(--ink)}
.pill.streak:not(.off){background:#ffe3a8}

/* nav */
.tabs{background:var(--card);border:3px solid var(--ink);border-radius:26px;box-shadow:0 4px 0 var(--ink)}
.tab{color:var(--ink-3);border:3px solid transparent}
.tab .ti{filter:none;opacity:.55}
.tab.on{background:var(--gold);border-color:var(--ink);color:var(--ink)}
.tab.on .ti{opacity:1}
.tab .ti .vi{width:30px;height:30px}

/* home */
.h-hero .chamb{box-shadow:0 0 0 3px var(--ink),0 8px 0 3px var(--ink)}
.bubble{background:var(--card);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);color:var(--ink);font-weight:800}
.bubble:before{background:var(--card);border-left:3px solid var(--ink);border-top:3px solid var(--ink);border-radius:4px 0 0 0;top:-10px;width:15px;height:15px}
.rankbar,.bar{background:#fff;border:3px solid var(--ink);box-shadow:0 2px 0 var(--ink)}
.rankbar{height:16px}.bar{height:16px}
.rankbar i{background:repeating-linear-gradient(135deg,#ff8a3c 0 10px,#ffa352 10px 20px)}
.bar i{background:var(--c,var(--orange))}
.rank-line,.unlock-tip{color:var(--ink-2)}
.mastery,.m-sum{background:var(--card)}
.mastery{border:3px solid var(--ink)!important;box-shadow:0 4px 0 var(--ink);border-radius:22px}
.week .d i{background:#fff;border:2.5px solid var(--ink);color:transparent}
.week .d.on i{background:var(--green);color:#fff}
.week .d.today i{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}
.week .d.today.on i{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}

/* casebooks */
.book{background:var(--card);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.book:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.book .cover{border:3px solid var(--ink);box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
.bar-l{color:var(--ink-3)}
.soon div{background:transparent;border:3px dashed var(--ink-3);color:var(--ink-2)}
.chap-h .ce{border:3px solid var(--ink);background:var(--tint);box-shadow:0 2px 0 var(--ink)}

/* the case card */
.case{border:3px solid var(--ink);box-shadow:0 7px 0 var(--ink)}
.case:before{opacity:.05}
.pip{background:#fff;border:2.5px solid var(--ink);height:12px}
.pip.cur{background:var(--gold)}.pip.ok{background:var(--green)}.pip.tw{background:var(--orange)}
.vbtn{background:var(--card);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);color:var(--ink)}
.vbtn.hot,.vbtn.picked{background:color-mix(in srgb,var(--tone) 22%,#fffaf0)}
.vbtn:active,.vbtn.press,.vbtn.picked{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.vbtn .vi{width:38px;height:38px}
.kicker{color:var(--ink-3)}
.tag{background:var(--card)}

/* reveal / sheets */
.reveal{border:3px solid var(--ink);border-top:10px solid var(--green);box-shadow:0 6px 0 var(--ink)}
.reveal.twist{border-top-color:var(--orange)}
.rv-badge{color:#1c8f55}.reveal.twist .rv-badge{color:var(--orange-deep)}
.law-chip{background:#fff;border:3px solid var(--ink);box-shadow:0 2px 0 var(--ink);color:var(--ink)}
.law-quote{background:#fff3c9;border:3px solid var(--ink);border-radius:16px;box-shadow:0 3px 0 var(--ink)}
.scrim{background:rgba(74,47,69,.55)}
.sheet{background:var(--bg);border:3px solid var(--ink);border-bottom:0;box-shadow:0 -6px 0 rgba(74,47,69,.15)}
.setrow{background:var(--card);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.sw{background:#fff;border:3px solid var(--ink);width:56px;height:32px}
.sw:after{background:var(--ink);box-shadow:none;top:3px;left:3px;width:20px;height:20px}
.sw.on{background:var(--green)}.sw.on:after{transform:translateX(24px);background:#fff;border:2px solid var(--ink)}

/* short screens: let the home page scroll instead of crushing the hero */
.screen.home{overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.screen.home::-webkit-scrollbar{display:none}
.screen.home .h-hero{flex:1 0 auto;justify-content:flex-start;padding-top:6px}
.screen.home .h-cta,.screen.home .mastery,.screen.home .week{flex:0 0 auto}
.screen.home .tabs{position:sticky;bottom:0;margin-top:auto;z-index:6;flex:0 0 auto}
.screen.home .h-top{flex:0 0 auto}
.h-hero .chamb{flex:0 0 auto;width:min(100%,360px,calc(31vh * 1.304))!important;margin:0 auto}
@media (max-height:760px){.btn.big{padding:15px 18px;font-size:21px}}
@media (max-height:620px){.h-hero .chamb{width:min(100%,calc(28vh * 1.304))!important}.bubble{font-size:15px;padding:8px 14px}.screen.home .mastery{display:none}}
.m-sum{background:var(--card);border:3px solid var(--ink);border-radius:22px;box-shadow:0 4px 0 var(--ink);padding:12px 14px;margin-bottom:14px}