/* Community Payback theme: stencil spray, photocopied paperwork, gaffer tape, boiler-suit orange, hi-vis.
   Loaded after style.css; overrides the generic look. No gradients-as-gloss, no glow. */
@font-face{font-family:Stencil;src:url(../fonts/SairaStencilOne-Regular.ttf);font-display:swap}
@font-face{font-family:Block;src:url(../fonts/ArchivoBlack-Regular.ttf);font-display:swap}
@font-face{font-family:Marker;src:url(../fonts/PermanentMarker-Regular.ttf);font-display:swap}
@font-face{font-family:Typewriter;src:url(../fonts/SpecialElite-Regular.ttf);font-display:swap}
:root{--orange:#e8701e;--ink:#111013;--paper:#e9e4d6;--hivis:#d8ff1e;--stamp:#b3202a;--concrete:#17171a}
body,button{font-family:Typewriter,'Courier New',monospace}
/* spray stencil headers */
h1,h2,h3,.hubhead h3,.sheet-head h2,#lootTitle,.cp-stencil{font-family:Stencil,Impact,sans-serif!important;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-shadow:0 0 1px rgba(0,0,0,.6),1px 1px 0 rgba(0,0,0,.15)}
.cp-banner{font-family:Stencil,Impact,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#111;background:url(../img/ui/suit.svg);padding:.18em .7em .1em;display:inline-block;border-top:3px solid #111;border-bottom:3px solid #111;transform:rotate(-1.2deg);filter:url(#spray);font-size:clamp(14px,4.6vw,26px)}
.cp-banner.white{background:none;color:#f4f1ea;border-color:#f4f1ea}
/* the white Misfits-style logo treatment for any title text */
.logo-m,.title-logo .logo-m{font-family:Block,'Arial Black',sans-serif!important;color:#f6f4ee!important;text-shadow:none!important;letter-spacing:-.02em;background:none!important;-webkit-text-fill-color:#f6f4ee!important}
.logo-sub{font-family:Stencil,Impact,sans-serif!important;color:var(--orange)!important;letter-spacing:.3em!important}
/* screens: wet concrete wall */
#splash,#title{background:#121214 url(../img/ui/concrete.svg)!important}
.title-shade{background:linear-gradient(transparent 40%,rgba(10,10,12,.85))!important}
/* all cards become photocopied case-file paperwork pinned with gaffer tape */
.card,.sheet,.hubcard{background:var(--paper) url(../img/ui/paper.svg)!important;color:var(--ink)!important;border-radius:2px!important;border:0!important;box-shadow:3px 4px 0 rgba(0,0,0,.55)!important;position:relative;backdrop-filter:none!important}
.card::before,.hubcard::before{content:'';position:absolute;top:-12px;left:50%;width:120px;height:30px;margin-left:-60px;background:url(../img/ui/tape.svg) center/100% 100% no-repeat;transform:rotate(-3deg);pointer-events:none;z-index:2}
.card::after{content:'PROBATION SERVICE · CASE FILE';position:absolute;top:8px;right:12px;font:10px Typewriter,monospace;color:#6c675c;letter-spacing:.1em;pointer-events:none}
.card *{color:inherit}
.modal{background:rgba(8,8,10,.72)!important;backdrop-filter:none!important}
/* buttons: stencil on orange suit fabric / plain clipboard tabs; square corners */
.big,.mid,button.primary,.hubtabs button,#hubTabs button{font-family:Stencil,Impact,sans-serif!important;text-transform:uppercase;letter-spacing:.08em;border-radius:1px!important;box-shadow:2px 3px 0 #000!important;background:#f2eee3!important;color:#111!important;border:2px solid #111!important;text-shadow:none!important}
.primary,.big.primary,#hubTabs button.on,.hubtabs button.on{background:url(../img/ui/suit.svg)!important;color:#111!important}
.danger{background:#111!important;color:#f2eee3!important}
.big:active,.mid:active{transform:translate(2px,3px);box-shadow:0 0 0 #000!important}
.round,#hud button.round{border-radius:3px!important;background:#151517!important;border:2px solid #f2eee3!important;box-shadow:2px 2px 0 #000!important}
.round svg{filter:url(#rough)}
/* HUD frame: hi-vis tape edges + ID card chip */
#hud::before{content:'COMMUNITY PAYBACK';position:absolute;left:0;right:0;top:0;height:22px;padding-top:env(safe-area-inset-top);font:13px/22px Stencil,Impact,sans-serif;letter-spacing:.35em;text-align:center;color:#111;background:url(../img/ui/suit.svg);border-bottom:2px solid #111;pointer-events:none;z-index:1}
.hud-tl,.hud-tr{margin-top:22px}
.pchip{background:var(--paper) url(../img/ui/paper.svg)!important;color:var(--ink)!important;border-radius:2px!important;border:0!important;box-shadow:2px 3px 0 #000!important;border-left:8px solid var(--orange)!important}
.pchip .pname{font-family:Block,sans-serif!important;color:#111!important}
.pchip::after{content:'OFFENDER ID';display:block;font:9px Typewriter,monospace;color:#6c675c;letter-spacing:.15em}
#hud .bar{border-radius:0!important;background:#2a2a2a!important;border:1.5px solid #111!important;height:9px!important}
.hp div{background:repeating-linear-gradient(90deg,#c62828 0 10px,#a11f1f 10px 11px)!important;border-radius:0!important}
#xpfill{background:url(../img/ui/hivis.svg) repeat-x center/auto 100%!important;border-radius:0!important}
.bar.xp,.xpbar{position:relative}
.cp-hours{font:9px Typewriter,monospace;color:#111;letter-spacing:.1em;margin-top:2px}
.tracker{background:var(--paper) url(../img/ui/paper.svg)!important;color:#111!important;border-radius:0!important;border:0!important;border-left:6px solid var(--orange)!important;box-shadow:2px 3px 0 #000!important;font-family:Typewriter,monospace!important}
.tracker b{font-family:Stencil,Impact,sans-serif!important;color:var(--stamp)!important;letter-spacing:.05em}
.tracker::before{content:'TIMESHEET';display:block;font:9px Typewriter;letter-spacing:.2em;color:#6c675c}
.wallet{background:#141416!important;border:2px solid #f2eee3!important;border-radius:2px!important;color:#f2eee3!important;font-family:Typewriter,monospace!important;box-shadow:2px 2px 0 #000!important}
.mm-wrap,#minimap{border-radius:3px!important;border:3px solid var(--hivis)!important;box-shadow:2px 2px 0 #000!important}
/* dialogue box + toast: torn flyer with gaffer tape */
.toast,.prompt{background:var(--paper) url(../img/ui/paper.svg)!important;color:#111!important;border-radius:0!important;border:0!important;box-shadow:3px 4px 0 #000!important;font-family:Typewriter,monospace!important}
#cut .cutbox,#cut>div:last-child,.cutline{background:var(--paper) url(../img/ui/paper.svg)!important;color:#111!important;border-radius:0!important;border:0!important;box-shadow:3px 4px 0 #000!important}
#cutName{font-family:Stencil,Impact,sans-serif!important;color:var(--stamp)!important;letter-spacing:.1em}
#cutText{font-family:Typewriter,monospace!important;color:#111!important}
#cutFace{border-radius:0!important;border:3px solid #fff!important;box-shadow:2px 2px 0 #000!important;transform:rotate(-3deg)}
/* inventory: locker slots stencilled */
.slot,.cell,#grid>*{background:#d7d1c1!important;border:2px solid #111!important;border-radius:0!important;box-shadow:1px 2px 0 rgba(0,0,0,.5)!important}
.sheet-head{background:url(../img/ui/suit.svg)!important;border-bottom:3px solid #111}
.sheet-head h2::before{content:'PROPERTY BAG · ';font-family:Typewriter,monospace;font-size:.6em}
/* rubber stamp for completed / locked / disabled */
.done,.stamp{position:relative}
.stamp-approved{background:url(../img/ui/stamp.svg) right center/90px auto no-repeat}
button[disabled],.disabled{opacity:.9!important;background:#cfc9ba repeating-linear-gradient(-45deg,transparent 0 6px,rgba(179,32,42,.15) 6px 8px)!important;color:#5a1016!important}
/* action buttons: spray-painted circles on the wall */
.act{border-radius:50%!important;background:#151517!important;border:3px solid #f2eee3!important;box-shadow:3px 3px 0 #000!important}
.power{border-color:var(--orange)!important}.attack{border-color:#f2eee3!important}
.act::after{display:none!important}
/* loading bar = hours served */
.loadbar{border-radius:0!important;border:2px solid #f2eee3!important;background:#111!important;height:16px!important}
#loadfill{background:url(../img/ui/hivis.svg) repeat-x center/auto 100%!important;border-radius:0!important}
.loadtxt{font-family:Typewriter,monospace!important;color:#f2eee3!important}
.cp-hourslbl{font:12px Typewriter,monospace;color:#f2eee3;letter-spacing:.15em;margin:.6em 0 .2em}
/* kill gloss */
*{text-shadow:none}
.cut .bar.top::after{content:'COMMUNITY PAYBACK · S1';position:absolute;bottom:6px;left:0;right:0;text-align:center;font:14px Stencil,Impact,sans-serif;letter-spacing:.4em;color:var(--orange)}
.cut .bar.bot{background:#000 url(../img/ui/hivis.svg) repeat-x top/auto 8px}
.cutbox{transform:rotate(-.6deg)}
.cutbox::before{content:'';position:absolute;top:-12px;left:18px;width:90px;height:26px;background:url(../img/ui/tape.svg) center/100% 100% no-repeat;transform:rotate(-8deg)}
.cut small{font-family:Typewriter,monospace;color:#6c675c}
.hubtabs,#hubTabs{background:#151517!important;border-bottom:3px solid var(--orange)}
.hubhead{border-bottom:2px dashed #111}
.sheet:not(.open){transform:translateY(110%)!important;box-shadow:none!important;visibility:hidden}.sheet{transition:transform .25s,visibility .25s}
#evb{background:var(--paper) url(../img/ui/paper.svg)!important;color:var(--ink)!important;border:0!important;border-radius:0!important;font-family:Typewriter,monospace!important;transform:rotate(.8deg);box-shadow:3px 4px 0 rgba(0,0,0,.6)}
#evb::before{content:'';position:absolute;top:-10px;right:20px;width:70px;height:22px;background:url(../img/ui/tape.svg) center/100% 100%;transform:rotate(6deg)}
#evb b{font-family:Stencil,Impact,sans-serif;font-weight:400;letter-spacing:.06em;color:#b23a00}
.hubtabs,#hubTabs{position:relative;margin:0 -4px;max-width:100%;padding:6px 4px 8px!important;background:transparent!important;border-bottom:3px solid #111!important}
.hubtabs button{border-radius:0!important;border:2px solid #111!important;background:#e8e2d2!important;color:#111!important;font-family:Stencil,Impact,sans-serif!important;font-weight:400!important;letter-spacing:.05em;box-shadow:2px 2px 0 #111}
.hubtabs button.on{background:url(../img/ui/suit.svg)!important;color:#111!important;transform:translateY(-2px)}
.hubhead .cp-banner{white-space:nowrap}
.hrow{border-radius:0!important;background:#fffdf6!important;color:var(--ink)!important;border:0!important;border-left:5px solid var(--orange)!important;box-shadow:2px 3px 0 rgba(0,0,0,.35);background-image:repeating-linear-gradient(transparent 0 21px,#c9d6e8 21px 22px)!important}
.hrow b,.hrow .t>b:first-child{font-family:Stencil,Impact,sans-serif;font-weight:400;letter-spacing:.04em}
.hrow small{opacity:.8!important;font-family:Typewriter,monospace}
.hrow button{border-radius:0!important;border:2px solid #111!important;background:url(../img/ui/suit.svg)!important;color:#111!important;font-family:Stencil,Impact,sans-serif!important;font-weight:400!important}
.hrow button[disabled]{background:#cfc9b8!important;color:#555!important;text-decoration:line-through}
.hrow .sw{border-radius:0!important;border:2px solid #111}
.note{font-family:Typewriter,monospace;color:#333}
/* currency icons */
svg.cur{display:inline-block;vertical-align:middle;filter:drop-shadow(1.5px 1.5px 0 rgba(0,0,0,.6))}
.cur-s{width:18px;height:18px}.cur-m{width:26px;height:26px}.cur-l{width:34px;height:34px}
.wallet span{display:inline-flex;align-items:center;gap:2px;font-family:Stencil,Impact,sans-serif}
.curv{display:inline-flex;align-items:center;gap:3px;font-family:Stencil,Impact,sans-serif;margin-right:8px}
.curv.inl{margin-right:2px}
.walletbar{display:flex;flex-wrap:wrap;gap:4px 10px;padding:6px 8px;margin:4px 0 8px;background:#151517;color:#f4f1ea;border:2px solid #111;box-shadow:2px 3px 0 rgba(0,0,0,.4);font-size:15px}
.hubtabs button.lock{opacity:.6}.hubtabs .ic.tiny{width:12px;height:12px;vertical-align:-1px}
.lockedtab{border-left-color:#666!important}
#signin .card label{display:block;font-family:Typewriter,monospace;font-size:12px;margin:8px 0;text-transform:uppercase}
#signin input{display:block;width:100%;box-sizing:border-box;margin-top:3px;padding:9px;border:2px solid #111;background:#fffdf6;font:16px Typewriter,monospace;border-radius:0}
.sierr{color:#b00;font-family:Typewriter,monospace;min-height:1em}
.acct{margin-top:8px;text-align:center;color:#f4f1ea;font-family:Typewriter,monospace}.acct a{color:var(--orange)}
/* full-screen PWA safe areas */
#hud{top:env(safe-area-inset-top);right:env(safe-area-inset-right);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left)}
.sheet,.modal,#title,#hub{padding-top:max(env(safe-area-inset-top),0px);padding-bottom:max(env(safe-area-inset-bottom),0px)}
/* currency top bar */
.topbar{position:absolute;top:calc(env(safe-area-inset-top) + 28px);left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5;pointer-events:none}
.cbox{position:relative;display:flex;align-items:center;gap:6px;min-width:84px;height:34px;padding:0 10px 0 6px;background:#f07a12;border:3px solid #000;border-radius:3px;box-shadow:3px 3px 0 #000;font:20px/1 Stencil,Impact,sans-serif;color:#111;letter-spacing:.04em;pointer-events:auto}
.cbox::after{content:'';position:absolute;inset:2px;border:1px dashed rgba(0,0,0,.35);pointer-events:none}
.cbox svg.cur{width:26px;height:26px;flex:none}
.cbox b{font-weight:900}
.cbox .plus{margin-left:4px;width:22px;height:22px;border:2px solid #000;background:#777;color:#ddd;font:900 16px/1 Impact,sans-serif;border-radius:2px;opacity:.6;cursor:not-allowed}
@media (max-width:520px){.cbox{min-width:0;height:28px;font-size:16px;padding:0 6px 0 4px}.cbox svg.cur{width:20px;height:20px}}
.cbox[data-cur]::before{content:none!important;display:none!important}
.topbar{left:auto;right:calc(env(safe-area-inset-right) + 128px);transform:none}
@media (max-width:640px){.topbar{right:auto;left:50%;transform:translateX(-50%)}.hud-tl,.hud-tr{margin-top:62px!important}}
/* TPB-style bottom dock */
.dock{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 10px);display:flex;gap:10px;z-index:6;pointer-events:auto}
.dbtn{position:relative;width:62px;height:62px;border-radius:50%;background:#f07a12;border:4px solid #000;box-shadow:0 4px 0 #000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;cursor:pointer}
.dbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.dbtn svg{width:28px;height:28px;fill:#fff3d6;stroke:#000;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.dbtn span{position:absolute;bottom:-14px;font:11px/1 Stencil,Impact,sans-serif;letter-spacing:.06em;color:#fff;-webkit-text-stroke:3px #000;paint-order:stroke fill}
.dbtn .badge{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:#e8231c;border:3px solid #000;color:#fff;font:900 14px/16px Impact,sans-serif;font-style:normal;text-align:center}
.dbtn .badge[hidden]{display:none}
@media (max-width:640px){.dock{gap:6px;bottom:calc(env(safe-area-inset-bottom) + 132px)}.dbtn{width:50px;height:50px;border-width:3px}.dbtn svg{width:22px;height:22px}}
/* speech / quest bubbles */
.bubbles{position:absolute;inset:0;pointer-events:none;z-index:3}
.bub{position:absolute;transform:translate(-50%,-100%);max-width:170px;padding:6px 10px;background:#fff;border:3px solid #000;border-radius:14px;box-shadow:3px 3px 0 #000;font:800 12px/1.2 system-ui,sans-serif;color:#111;text-align:center;white-space:normal}
.bub::after{content:'';position:absolute;left:50%;bottom:-12px;margin-left:-8px;border:8px solid transparent;border-top:10px solid #000}
.bub.quest{background:#ffd34d}.bub.quest b{display:block;font:15px/1 Stencil,Impact,sans-serif;color:#e8231c}
/* thicker outlines on existing panels */
.hud-tl>*,.hud-btns .round,.mm-wrap,.tracker,.act{border-width:3px!important;border-color:#000!important;box-shadow:3px 3px 0 #000!important}
@media (max-width:640px){.dock{bottom:calc(env(safe-area-inset-bottom) + 18px);gap:8px}.dbtn{width:48px;height:48px}.dbtn span{font-size:9px;bottom:-12px}.actions{bottom:calc(env(safe-area-inset-bottom) + 96px)!important}.joy{bottom:80px!important}}
/* HUD v2: no full-width banner; currency floats top-right; subtle dark objective pill */
#hud::before{content:none!important;display:none!important}
.topbar{top:calc(env(safe-area-inset-top) + 10px)!important;right:calc(env(safe-area-inset-right) + 128px)!important;left:auto!important;transform:none!important}
.hud-tl{margin-top:8px!important}
.tracker{background:rgba(12,12,16,.62)!important;color:#ece8df!important;border:1px solid rgba(255,255,255,.14)!important;border-left:1px solid rgba(255,255,255,.14)!important;border-radius:999px!important;box-shadow:none!important;padding:5px 12px!important;font:11px/1.35 Typewriter,monospace!important;max-width:300px;backdrop-filter:blur(4px)}
.tracker::before{content:none!important}
.tracker b{color:#ffd9b0!important;font-family:inherit!important;letter-spacing:0!important}
@media (max-width:640px){.topbar{right:calc(env(safe-area-inset-right) + 8px)!important;left:auto!important;top:calc(env(safe-area-inset-top) + 132px)!important}.hud-tl,.hud-tr{margin-top:8px!important}}
/* Record tab */
.note .bar i{display:block;height:100%;background:linear-gradient(90deg,#ff7a1a,#ffc24d)}
.rar-common{color:#55524c}.rar-uncommon{color:#1f8a2a}.rar-rare{color:#1d5fbf}.rar-epic{color:#7a2fc0}.rar-legendary{color:#c06a00;text-shadow:0 0 4px rgba(255,160,0,.5)}
#creator{background:#121214 url(../art/loading.jpg) center/cover;display:flex;align-items:center;justify-content:center;padding:16px}
#creator .cr-card{background:rgba(16,16,20,.88);border:1px solid #ff7a1a55;border-radius:14px;padding:18px;width:100%;max-width:420px;display:flex;flex-direction:column;gap:8px;color:#eee}
.cr-head{display:flex;justify-content:space-between;align-items:center}.cr-num{font:700 13px monospace;color:#ff9a3a}
.cr-l{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-top:6px}
.cr-in{background:#222;border:1px solid #444;border-radius:8px;color:#fff;padding:10px;font-size:16px}
.cr-chips{display:flex;flex-wrap:wrap;gap:6px}.chip{background:#2a2a2e;border:1px solid #444;color:#ddd;border-radius:16px;padding:6px 10px;font-size:12px}.chip.on{background:#ff7a1a;color:#111;border-color:#ff7a1a}
.cr-trait{min-height:58px;border:1px dashed #8ff3ff88;border-radius:10px;padding:10px;display:flex;flex-direction:column;justify-content:center;gap:2px;transition:box-shadow .3s}.cr-trait b{color:#8ff3ff;font-size:18px}.cr-trait span{font-size:13px;opacity:.85}.cr-trait.hit{box-shadow:0 0 24px #8ff3ff}
.cr-note{font-size:11px;opacity:.65;margin:4px 0}
#splash{background:#121214 url(../art/loading.jpg) center/cover!important;justify-content:flex-end!important;padding-bottom:calc(env(safe-area-inset-bottom) + 48px)}
#splash::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.25) 45%,rgba(10,10,14,.92));pointer-events:none}
#splash>*{position:relative}#splash .splash-logo{position:absolute;top:calc(env(safe-area-inset-top) + 28px);left:0;right:0}
#loadpct{font:700 12px monospace;color:#ff9a3a;margin-top:-18px}
.cr-num{white-space:nowrap}#creator .cr-head .cp-banner{font-size:13px;padding:4px 10px}
/* ===== icon-first, hand-made look (v18): chunky panels, tape, stickers; flat fills, no gradients ===== */
:root{--paper:#efe6d2;--ink:#141414;--org:#ff7a1a}
.tape{display:inline-block;background:#d9cfae;color:#141414;font:400 15px Stencil,Impact,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:4px 14px;margin:14px 0 6px;transform:rotate(-1.5deg);box-shadow:1px 2px 0 #0006;clip-path:polygon(2% 0,98% 6%,100% 92%,1% 100%)}
.stk{display:inline-block;background:#fff;color:#141414;border:2px solid #141414;font:400 12px Stencil,Impact,sans-serif;letter-spacing:.04em;padding:1px 7px;transform:rotate(-2deg);margin:0 4px 0 0;font-style:normal}
.stk.o{background:var(--org)}.stk.big{font-size:20px;padding:3px 12px;transform:rotate(-1deg)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--paper);border:3px solid #141414;border-radius:0;padding:8px 4px 6px;color:#141414;box-shadow:3px 3px 0 #000,0 0 0 2px var(--rc) inset,0 0 12px -2px var(--rc);cursor:pointer;font:inherit}
.tile:nth-child(3n){transform:rotate(.8deg)}.tile:nth-child(3n+1){transform:rotate(-.6deg)}
.tile img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(2px 2px 0 #0004)}
.tile b{font:400 12px Stencil,Impact,sans-serif;letter-spacing:.03em;text-align:center;line-height:1.1;text-transform:uppercase}
.tile .stk{position:absolute;top:-8px;right:-6px;font-size:10px}
.tile.dim img{filter:grayscale(1) brightness(.6);opacity:.55}.tile.lock{opacity:.55}
.tile.on{background:#fff;box-shadow:3px 3px 0 #000,0 0 0 4px var(--org) inset}
.pips{display:flex;gap:3px}.pips i{width:8px;height:8px;border:2px solid #141414;background:#fff;transform:rotate(45deg)}.pips i.on{background:var(--rc)}
.icard{position:fixed;inset:0;z-index:60;background:#000b;display:flex;align-items:center;justify-content:center;padding:20px}
.ic-panel{background:var(--paper);color:#141414;border:4px solid #141414;box-shadow:6px 6px 0 #000,0 0 0 3px var(--rc) inset;padding:18px;width:min(320px,92vw);text-align:center;transform:rotate(-.8deg)}
.ic-panel>img{width:120px;height:120px;object-fit:contain}
.ic-sub{font:13px Typewriter,monospace;margin:6px 0 2px;text-transform:capitalize}
.ic-panel ul{list-style:none;padding:0;margin:10px 0;font:14px Typewriter,monospace}.ic-panel li{padding:3px 0;border-bottom:2px dashed #14141433}
.ic-panel li button,.ic-act button{border:3px solid #141414;background:#fff;color:#141414;font:400 14px Stencil,Impact,sans-serif;padding:6px 12px;margin:4px;box-shadow:2px 2px 0 #000;border-radius:0}
.ic-act button[data-a]:not([disabled]){background:var(--org)}.ic-act button[disabled]{opacity:.5}
.sheet-card{display:flex;gap:12px;align-items:center;background:var(--paper);color:#141414;border:3px solid #141414;box-shadow:4px 4px 0 #000;padding:10px;margin:8px 0;transform:rotate(-.5deg)}
.sheet-card img{width:72px;height:72px;object-fit:contain}.sheet-card b{font:400 22px Stencil,Impact,sans-serif;display:block}.sheet-card small{font:13px Typewriter,monospace;display:block;margin-bottom:4px}
.xpline{display:flex;align-items:center;gap:8px;margin:8px 0}.xpline b{font:400 20px Stencil,Impact,sans-serif}.xpline .bar{flex:1;height:14px;border:3px solid #141414;background:#fff}.xpline .bar i{display:block;height:100%;background:var(--org)}
.note .bar i{background:var(--org)!important}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.chips span{background:#2a2622;color:#efe6d2;border:2px solid #141414;padding:2px 8px;font:12px Typewriter,monospace}
.empty{opacity:.6}
/* creator */
#creator{background:#16130f url(../art/loading.jpg) center/cover!important;align-items:flex-start!important;overflow-y:auto}
#creator .cr-card{background:#1d1a16!important;border:4px solid #141414!important;border-radius:0!important;box-shadow:6px 6px 0 #000;max-width:560px!important;gap:6px!important;margin:auto}
.cr-head .stk{font-size:16px}.cr-num{font:400 18px Stencil,Impact,sans-serif!important;color:#efe6d2!important}
.cr-in{background:var(--paper)!important;color:#141414!important;border:3px solid #141414!important;border-radius:0!important;font:18px Typewriter,monospace!important}
.tiles.crimes{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;max-height:46vh;overflow-y:auto;padding:6px 6px 10px 2px}
.tiles.crimes .tile img{width:54px;height:54px}.tiles.crimes .tile b{font-size:10.5px}
.cr-react{display:flex;gap:10px;align-items:center;background:#fff;color:#141414;border:3px solid #141414;padding:8px;box-shadow:3px 3px 0 #000;transform:rotate(.6deg);font:14px Typewriter,monospace}
.cr-react img{width:44px;height:44px}.cr-react em{margin-top:4px}.cr-react.pop{animation:pop .25s ease-out}
@keyframes pop{from{transform:scale(.85) rotate(-3deg)}to{transform:scale(1) rotate(.6deg)}}
.crslot{display:flex;align-items:center;gap:14px;background:var(--paper);border:4px solid #141414;box-shadow:4px 4px 0 #000;padding:10px}
.reel{width:110px;height:110px;flex:none;overflow:visible;display:flex;flex-direction:column;clip-path:inset(0)}.reel img{width:110px;height:110px;flex:none;object-fit:contain}
.crslot{overflow:hidden}
#creator .cr-trait{border:0!important;color:#141414;min-height:0}.cr-trait b{color:#141414!important;font:400 24px Stencil,Impact,sans-serif!important}.cr-trait span{font:15px Typewriter,monospace;opacity:1!important}
.crslot.hit{animation:pop .3s ease-out;box-shadow:4px 4px 0 #000,0 0 0 4px var(--org) inset}
#creator button.big,#creator button.mid{border-radius:0!important;border:3px solid #141414!important;box-shadow:3px 3px 0 #000;font-family:Stencil,Impact,sans-serif!important;background:var(--paper)!important;color:#141414!important}
#creator button.primary:not([disabled]),#crRoll:not([disabled]){background:var(--org)!important}
#creator button[disabled]{opacity:.55}
/* splash: flat dark band instead of gradient, one short tip */
#splash::before{background:none!important}
#splash .tip{background:var(--paper);color:#141414;border:3px solid #141414;box-shadow:3px 3px 0 #000;padding:6px 12px;font:15px Typewriter,monospace;transform:rotate(-1deg);max-width:86vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#splash .loadbar,#loadbar{border-radius:0!important;border:3px solid #141414!important;background:#fff!important}#loadfill{background:var(--org)!important;border-radius:0!important}
.crslot .win{width:110px;height:110px;flex:none;overflow:hidden;background:#fff;border:3px solid #141414;position:relative}
.crslot .reel{display:block!important;width:110px;height:auto!important;clip-path:none!important;background:none!important;border:0!important}
.crslot .reel img{display:block;width:110px;height:110px}
#creator .cr-trait{flex:1;display:flex;flex-direction:column;gap:4px}
.ic-panel .stk.big{max-width:90%;margin:6px auto}
.wprev{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#1d1a17;border:3px solid #0d0b10;padding:8px;margin:6px 0 10px}
.wprev>img:first-child{height:96px}.wprev .wi{height:44px;filter:drop-shadow(0 2px 0 #0d0b10)}.wprev button{margin-left:auto}
/* portrait phone HUD (v29): currencies in their own row at the very top; card, quest and map tuck underneath */
@media (orientation:portrait) and (max-width:640px){
 .topbar{top:calc(env(safe-area-inset-top) + 6px)!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;gap:6px!important}
 .hud-tl,.hud-tr{margin-top:44px!important}
}
/* v30 portrait: compact card + minimap everywhere; slim bar on the roof */
@media (orientation:portrait) and (max-width:640px){
 .pchip{padding:3px 8px 3px 3px!important;gap:6px!important;max-width:170px}
 .pchip .pface{width:34px!important;height:34px!important}
 .pchip .pname{font-size:11px!important}.pchip .cp-hours{display:none!important}
 .pchip .bar{height:5px!important;width:90px!important}
 .mm-wrap{width:64px!important;height:64px!important}
 .hud-btns .round{width:36px!important;height:36px!important}
 .tracker{max-width:220px!important;font-size:10px!important;padding:3px 10px!important}
 body[data-scene=roof] .hud-tl .pchip,body[data-scene=roof] .mm-wrap{display:none!important}
 body[data-scene=roof] .hud-tl,body[data-scene=roof] .hud-tr{margin-top:40px!important}
 body[data-scene=roof] .tracker{max-width:250px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* v30 scroll fix: every overlay/panel scrolls on touch; only the game canvas + joystick block panning */
html,body{touch-action:manipulation!important}
canvas,#joy,.actions{touch-action:none!important}
.screen,.sheet-body,.card,.cr-card,.modal,.overlay,[role=dialog]{touch-action:pan-y!important;-webkit-overflow-scrolling:touch}
.screen{overflow-y:auto!important;overscroll-behavior:contain}
#creator{display:flex;align-items:flex-start;padding:10px 10px 0;box-sizing:border-box}
#creator:not(.hidden){display:flex}
#creator .cr-card{max-height:none!important;margin:0 auto!important;padding-bottom:0!important}
#creator .cr-card>.row:last-child{position:sticky;bottom:0;z-index:3;background:#1d1a16;padding:10px 0 calc(10px + env(safe-area-inset-bottom));margin:0 -4px;border-top:2px solid #000}
#hubBody{flex:1 1 auto;min-height:0;overflow-y:auto!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.hubcard{max-height:calc(100dvh - 40px)!important}
.modal{overflow-y:auto!important;touch-action:pan-y!important}
.modal>.card:not(.hubcard){max-height:calc(100dvh - 40px);overflow-y:auto!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch}
.hubTabs,#hubTabs{overflow-x:auto;touch-action:pan-x pan-y!important}
/* v31 tasks: flat square strips, solid dark panel, cream chunky text, icon + short title + progress bar. No pills. */
.tracker,body[data-scene] .tracker{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;max-width:min(300px,calc(100vw - 150px))!important;backdrop-filter:none!important;white-space:normal!important;overflow:visible!important}
.tk-ep{display:inline-block;background:#e9dfc6;color:#151311;font:400 13px/1.2 Stencil,Impact,sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px 2px;border:2px solid #111;border-bottom:0;transform:rotate(-1.2deg);transform-origin:left bottom;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.tk{display:flex;align-items:center;gap:9px;background:#17140f;border:2px solid #050505;outline:1px solid #e9dfc655;outline-offset:-4px;border-radius:0;box-shadow:3px 3px 0 #000;padding:7px 9px;color:#f6efdc;box-sizing:border-box;margin:0 0 6px}
.tk-ic{width:34px;height:34px;flex:0 0 34px;object-fit:contain;border-radius:0;filter:drop-shadow(1px 1px 0 #000)}
.tk-t{flex:1;min-width:0}
.tk-title{font:400 16px/1.15 "Block","Archivo Black",Impact,sans-serif;color:#f6efdc;text-shadow:1px 1px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-bar{height:8px;margin-top:5px;background:#3a342b;border:1px solid #000;border-radius:0}
.tk-bar i{display:block;height:100%;background:#ff7a1a;border-radius:0}
.tk-n{font:400 16px Stencil,Impact,sans-serif;color:#ffb067;min-width:34px;text-align:right}
.tk.done{opacity:.72}.tk.done .tk-bar i{background:#7fc25a}.tk.done .tk-n{color:#9fe07a}
.tasklist .tk{margin:0 0 8px}
.tasklist{margin:6px 0 12px}
.tk-title{white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (orientation:portrait) and (max-width:640px){ .toast{top:calc(env(safe-area-inset-top) + 214px)!important;bottom:auto!important;border-radius:0!important} }
/* v33: hub close button readable (was black-on-black), square paper style */
#hubClose{width:40px!important;height:40px!important;flex:0 0 40px;background:#f2eee3!important;color:#111!important;border:2px solid #111!important;border-radius:1px!important;box-shadow:2px 3px 0 #000!important;display:grid;place-items:center;padding:0}
#hubClose svg{width:22px;height:22px;stroke:#111;filter:none}
@media (orientation:portrait){.cut .bar{height:8vh}.cut .bar.top::after{font-size:12px}}
#hubTabs,.hubtabs{flex:0 0 auto!important;min-height:52px;overflow-y:hidden}
#hubTabs button{min-height:36px;line-height:1.1;font-size:12px}
/* v34: live rig preview in the wardrobe */
.wprev{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.wrig{position:relative;flex:0 0 auto;width:150px;height:230px;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(ellipse at 50% 92%,#0006 0 30%,transparent 31%)}
.wrig-cv{max-width:150px;max-height:220px;width:auto;height:auto;image-rendering:auto}
.wrig-turn{position:absolute;left:0;top:0;font:11px Stencil,Impact,sans-serif;text-transform:uppercase;background:#f2eee3;color:#111;border:2px solid #111;border-radius:1px;padding:3px 6px}
.wrig-icons{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 80px}.wrig-icons .wi{width:40px;height:40px}
.wrig{height:250px;padding-bottom:26px}.wrig-turn{top:auto;bottom:0;left:50%;transform:translateX(-50%)}
@keyframes wrigIdle{0%,100%{transform:scale(1,1) rotate(0)}30%{transform:scale(1.006,1.014) rotate(-.6deg)}65%{transform:scale(.998,1.006) rotate(.5deg)}}
.wrig-cv{transform-origin:50% 100%;animation:wrigIdle 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.wrig-cv{animation:none}}
/* v35: slim currency bar */
.topbar{gap:4px!important}
.topbar .cbox{height:22px!important;min-width:0!important;font-size:12px!important;padding:0 5px 0 3px!important;border-width:1.5px!important;box-shadow:1px 2px 0 #000!important}
.topbar .cbox svg.cur{width:15px!important;height:15px!important}
.topbar .cbox .plus{width:16px!important;height:16px!important;font-size:12px!important;line-height:14px!important;margin-left:3px}
/* v35: one rarity palette everywhere: grey / green / blue / purple / orange-gold / event pink-teal */
:root{--r-common:#9a9a9a;--r-uncommon:#3fbf4f;--r-rare:#2f8cff;--r-epic:#a04bff;--r-legendary:#ff9a1a;--r-event:#ff4fa3;--r-event2:#22c7b8}
.tile{border-color:var(--rc,#141414)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--rc,#f2eee3) 22%,#f2eee3) 0%,#f2eee3 70%)!important}
.tile b{color:color-mix(in srgb,var(--rc,#111) 55%,#111)}
.tile:not(.dim) img{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--rc,#0000) 70%,transparent)) drop-shadow(2px 2px 0 #0004)}
.tile.ev{--rc:var(--r-event);border-image:linear-gradient(135deg,var(--r-event),var(--r-event2)) 1!important}
.rname{font-weight:700}.r-common{color:var(--r-common)}.r-uncommon{color:var(--r-uncommon)}.r-rare{color:var(--r-rare)}.r-epic{color:var(--r-epic)}.r-legendary{color:var(--r-legendary)}.r-event{color:var(--r-event)}
.ic-panel{border:4px solid var(--rc)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 28%,#f2eee3),#f2eee3 60%)!important}
.ic-panel img{filter:drop-shadow(0 0 12px var(--rc))}
.ic-sub{color:color-mix(in srgb,var(--rc) 75%,#000)!important;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.lootrow{border-left:5px solid var(--rc,#9a9a9a)}
/* v36: turn button sits under the figure, never over the feet */
.wrig{flex-direction:column;align-items:center;justify-content:flex-end;height:auto;min-height:250px;padding-bottom:0;gap:6px}
.wrig-cv{max-height:210px}
.wrig-turn{position:static;transform:none;align-self:center;margin-top:2px}
/* combat HUD */
.bar.en{height:5px;margin-top:3px;background:#0008;border:1px solid #111}.bar.en>div{height:100%;width:100%;background:linear-gradient(90deg,#2fd8ff,#9ff7ff);transition:width .12s}
.act.dodge{position:absolute;right:118px;bottom:4px;width:52px;height:52px;pointer-events:auto}
.act.attack.heavy{box-shadow:0 0 0 4px #ff7a1a,0 0 18px #ff7a1a}