:root{--ink:#1b1230;--panel:#2a1d4a;--panel2:#3a2a66;--gold:#ffd23f;--red:#ff4d4d;--green:#4dff88;--blue:#4dc3ff;--paper:#f3e6c4;--muted:#9c8fc4;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0e0820;color:#fff;font-family:'Press Start 2P',ui-monospace,Menlo,Consolas,monospace;font-size:10px;line-height:1.6;image-rendering:pixelated}
canvas,svg{image-rendering:pixelated}
#app{max-width:900px;height:100vh;height:100dvh;margin:0 auto;display:flex;flex-direction:column;background:var(--ink);position:relative;overflow:hidden}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
button{font:inherit}

.top{display:flex;gap:4px;font-size:8px;min-height:44px;padding:calc(8px + var(--sat)) calc(8px + var(--sar)) 8px calc(8px + var(--sal));background:#120a26;border-bottom:3px solid #000;flex-wrap:nowrap;align-items:center;overflow:hidden}
.top .gear{margin-left:auto;color:var(--muted);cursor:pointer;min-width:44px;min-height:44px}
.chip{background:var(--panel);padding:4px 5px;white-space:nowrap;border:2px solid #000;box-shadow:inset -2px -2px 0 #1a1033,inset 2px 2px 0 #4b3a82;color:#fff}
.chip b{color:var(--gold)}

.screen{flex:1;overflow:auto;padding:10px calc(10px + var(--sar)) calc(16px + var(--sab)) calc(10px + var(--sal));-webkit-overflow-scrolling:touch;outline:none}
.screen.narrow{width:100%;max-width:460px;margin:0 auto}
.screen.wide{padding:0}
h1,h2{font-weight:normal;margin:0 0 8px}h1{font-size:13px;color:var(--gold)}h2{font-size:11px;color:var(--blue);margin-top:12px}
p{margin:6px 0}
.back{background:none;border:0;color:var(--muted);cursor:pointer;margin-bottom:4px;padding:0 12px 0 0;min-height:44px}

.btn{color:#fff;background:#d6336c;border:3px solid #000;padding:10px 12px;cursor:pointer;box-shadow:inset -3px -3px 0 #8a1c46,inset 3px 3px 0 #ff7aa8;width:100%;min-height:44px}
.btn:active{transform:translateY(2px)}
.btn.alt{background:#2f7fd1;box-shadow:inset -3px -3px 0 #1b4f8a,inset 3px 3px 0 #7ab8ff}
.btn.ghost{background:var(--panel2);box-shadow:inset -3px -3px 0 #1a1033,inset 3px 3px 0 #4b3a82}
.btn:disabled{filter:grayscale(1);opacity:.5;cursor:not-allowed}
.btn.narrow-btn{width:90px}
.card{background:var(--panel);border:3px solid #000;box-shadow:inset -3px -3px 0 #1a1033,inset 3px 3px 0 #4b3a82;padding:8px;margin-bottom:10px}
.card.mission{background:#33265c}
.card.dis{opacity:.5}
.card.agent[role=button],.card.mission[role=button]{cursor:pointer}
.card.agent.sel{outline:3px solid var(--gold)}
.row{display:flex;gap:8px;align-items:center}.row.spread{justify-content:space-between}
.grow{flex:1;min-width:0}.muted{color:var(--muted)}.gold{color:var(--gold)}.red{color:var(--red)}.green{color:var(--green)}
.small{font-size:8px}.gap-t{margin-top:6px}.gap{height:10px}
.title{margin-left:6px;overflow-wrap:anywhere}

canvas.pt{width:56px;height:56px;border:3px solid #000;background:#5b4a9a;flex:none}
.bar{height:6px;background:#000;margin:2px 0 4px}.bar i{display:block;height:100%}
.stat{gap:4px}.stat .lblw{width:28px;font-size:7px}.stat .val{width:20px;font-size:7px;text-align:right}
.tag{display:inline-block;border:2px solid #000;padding:1px 5px;margin:2px 3px 2px 0;font-size:8px;background:var(--panel2);color:#fff}
.tag.ok{background:#1f6b3a}.tag.no{background:#6b1f2a}.tag.warn{background:#7a5a10}
button.tag.pick{cursor:pointer;padding:6px 8px;min-height:44px}
.stamp{display:inline-block;transform:rotate(-6deg);border:3px solid;padding:2px 6px;font-size:10px;flex:none}
.stamp.quiet{color:var(--blue)}.stamp.loud{color:var(--red)}.stamp.any{color:var(--gold)}
.cd.urgent{color:var(--red)}

.npc{display:flex;gap:8px;margin-bottom:10px}
.bubble{background:var(--paper);color:#222;padding:8px;border:3px solid #000;flex:1;font-size:9px}
.seg{display:flex;gap:6px}.seg.wrap{flex-wrap:wrap}.seg button{flex:1;font-size:9px;color:#fff;background:var(--panel2);border:3px solid #000;padding:8px 2px;cursor:pointer;min-height:44px}
.seg button.on{background:#2f7fd1;outline:2px solid var(--gold)}
.budget{width:100%;border-collapse:collapse}.budget td{padding:2px 0}.budget td:last-child{text-align:right}.budget hr{border:0;border-top:3px solid #000}
.paper{background:var(--paper);color:#222;padding:12px;border:3px solid #000;font-family:Georgia,serif;font-size:14px;line-height:1.3;margin-bottom:10px}
.paper h3{font-family:'Press Start 2P',monospace;font-size:12px;margin:0 0 6px;border-bottom:3px double #222;padding-bottom:6px;font-weight:normal}
.pips i{display:inline-block;width:14px;height:14px;border:2px solid #000;background:var(--panel2);margin-left:4px}.pips i.on{background:var(--red)}
input{font:inherit;width:100%;padding:10px;background:#120a26;color:#fff;border:3px solid #000;min-height:44px}

/* hub map */
.hub{position:relative}
.maptitle{padding:3px 10px 2px;text-shadow:1px 1px 0 #000;margin:0;font-size:9px;line-height:1.3}
.mapwrap{max-width:640px;margin:0 auto}
#map{width:100%;height:auto;display:block;shape-rendering:crispEdges}
.bld{cursor:pointer}
.bld:focus{outline:none}
.bld.locked{cursor:not-allowed}.bld.locked .art{filter:url(#mpgrey);opacity:.5}
.lbl{font-family:'Press Start 2P',monospace;font-size:4.2px;letter-spacing:.15px;fill:#fff;paint-order:stroke;stroke:#000;stroke-width:1.1px;stroke-linejoin:round;pointer-events:none}
.mt{font-family:'Press Start 2P',monospace}
.plab.locked .lbl{fill:#b8b8c4}.plab .lv{font-family:'Press Start 2P',monospace;font-size:3.6px;fill:#1a1030;letter-spacing:0}
.badges{display:flex;flex-wrap:wrap;gap:4px;padding:2px 8px 4px}
.badge{min-height:44px;background:#000c;color:#fff;border:2px solid var(--gold);padding:4px 7px;cursor:pointer;font-size:7px;max-width:100%;text-align:left}
.badge.new{border-color:var(--green);color:var(--green)}
.hubcards{padding:10px calc(10px + var(--sar)) 10px calc(10px + var(--sal));max-width:640px;margin:0 auto}
.travel svg{width:100%;display:block}
.game{width:100%;max-width:360px;display:block;margin:10px auto;border:3px solid #000;touch-action:none;user-select:none}

/* overlays */
#toasts{position:absolute;left:10px;right:10px;bottom:calc(16px + var(--sab));z-index:30;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{background:#000;border:3px solid var(--gold);padding:10px}.toast.good{border-color:var(--green)}.toast.bad{border-color:var(--red)}
.overlay{position:absolute;inset:0;background:#000a;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px}
.dialog{max-width:380px;width:100%}
#hint{position:absolute;left:0;right:0;bottom:0;z-index:10;padding:0 10px calc(10px + var(--sab));pointer-events:none}
.hint{pointer-events:auto;max-width:460px;margin:0 auto;background:#33265c;border-color:var(--gold)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.btn:active{transform:none}}

button.card.flight{display:block;width:100%;text-align:left;color:#fff;cursor:pointer;font:inherit}
.right{text-align:right}
.toast.act{display:flex;gap:8px;align-items:center;pointer-events:auto}
.toast .btn{width:auto;flex:none;padding:6px 10px;min-height:44px}
.toast .btn.x{padding:6px 12px}

/* long words never push the layout sideways (320px phones) */
.bubble,.card,.toast,h1,h2{overflow-wrap:anywhere}
.top{overflow-x:auto;scrollbar-width:none}.top::-webkit-scrollbar{display:none}
.top .chip{flex:none}
.seg button{min-width:0;overflow-wrap:anywhere}
.card.row>div{min-width:0}
@media (max-width:340px){.top{font-size:7px;gap:3px}.chip{padding:4px 3px}.screen.narrow{padding-left:6px;padding-right:6px}.btn{padding:10px 6px}}

/* desktop: centered column, wider hub map */
@media (min-width:900px){
  body{background:#0a0616}
  #app{max-width:1000px;border-left:3px solid #000;border-right:3px solid #000}
  .screen.narrow{max-width:560px}
  .mapwrap,.hubcards{max-width:480px}
  .top{font-size:10px;gap:8px}
}

/* ---- v2 additions: tutorial, auctions, camp, standing, overlays ---- */
.dialog{max-height:calc(100% - 32px);overflow:auto}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;min-height:44px;width:100%;padding:0;font-size:8px}
.hint .row{margin-top:6px}
.bar.big{height:10px;border:2px solid #000}
.prog{margin:2px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.grid2 .btn{padding:10px 4px;font-size:9px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.grid3 .tot{text-align:center}
.grid2:last-child{margin-bottom:0}
.card .grid2{margin-bottom:0}
.blue{color:var(--blue)}
.right{text-align:right}
.btn.narrow-btn{flex:none}

/* tutorial pulse on the map */
@keyframes pulse{0%,100%{stroke-opacity:1}50%{stroke-opacity:.2}}
.bld.pulse rect.hl{stroke:var(--gold);stroke-width:1.6;fill-opacity:.14;animation:pulse 1s steps(2) infinite}

/* badges that need a decision */
.badge.alert{border-color:var(--red);color:var(--red)}

/* digest, lists, feed */
ul.digest{padding-left:16px;margin:6px 0}ul.digest li{margin-bottom:6px}
.feed{padding:4px 8px}
.feedline{padding:5px 0;border-bottom:2px solid #1a1033;overflow-wrap:anywhere}
.feedline:last-child{border-bottom:0}
.feedline.cut b:first-child::before{content:'';}
.feedline.cut{border-left:4px solid var(--red);padding-left:6px}
.feedline.mine{border-left:4px solid var(--gold);padding-left:6px}
.card.ok{border-color:#1f6b3a}.card.bad{border-color:#8a1c1c}
.card.award{background:#3a3010}
.card.comp{background:#4a1a2a;border-color:var(--red)}
.card.comp.done{background:var(--panel);border-color:#000}
.comp .opt{margin-top:8px}
.tomb{background:#262033}.epitaph{font-family:Georgia,serif;font-size:13px;margin:6px 0;color:var(--paper)}
table.lb td{padding:3px 4px}table.lb tr.me td,.me{color:var(--gold)}
.pricebox .budget td:first-child{padding-right:6px}
input[type=number]{-moz-appearance:textfield}
.card.sess{background:#33265c}
.card.earned{opacity:.85}
.card.stakebox{background:#33265c;margin-top:6px}
.card.daily{background:#33265c;border-color:var(--gold)}
@media (max-width:340px){.grid3{grid-template-columns:repeat(2,1fr)}.grid2 .btn{font-size:8px}}

.btn.inline{width:auto;flex:none;padding:8px 12px}

.row>.tag{flex:none}

/* ---- Big Jobs ---- */
canvas.pt.sm{width:36px;height:36px;border-width:2px}
.bjx{margin-top:6px;border-top:2px solid #1a1033;padding-top:6px}
.stageline{margin:2px 0}
.card.stage{background:#33265c}.card.stage.filled{border-color:#1f6b3a}
.card.bjinfo{background:#33265c;border-color:var(--gold)}
.picks{display:flex;flex-direction:column;gap:4px}
.pickrow{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:4px 6px;text-align:left;color:#fff;font:inherit;font-size:9px;background:var(--panel2);border:3px solid #000;cursor:pointer}
.pickrow.on{background:#2f7fd1;outline:2px solid var(--gold)}
.pickrow.dis{opacity:.45}
.pickrow .who{flex:1;min-width:0;overflow-wrap:anywhere}
.pickrow .ch{flex:none;text-align:right}
button.tag.pick.dis{opacity:.4}
.dist{display:flex;height:18px;border:3px solid #000;background:#000}
.dist i{display:block;height:100%;min-width:0}
.dist .all{background:var(--green)}.dist .partial{background:var(--gold)}.dist .fail{background:var(--red)}
.distkey{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px}
.distkey .k.all b{color:var(--green)}.distkey .k.partial b{color:var(--gold)}.distkey .k.fail b{color:var(--red)}
.team .trow{padding:6px 0;border-bottom:2px solid #1a1033}.team .trow:last-child{border-bottom:0}
.card.verdict{text-align:center}.card.verdict .big{font-size:14px}
.stagerow{padding:6px 0;border-bottom:2px solid #1a1033}.stagerow:last-child{border-bottom:0}

/* ---- camp compound (hub map v3) ---- */
.mapwrap{max-width:none}
.pbadge{pointer-events:none}
.pbadge rect.po{fill:#000}
.pbadge rect.pb{fill:#2f9bff}
.pbadge rect.pi{fill:#fff;fill-opacity:.4}
.pbadge text{font-family:'Press Start 2P',monospace;font-size:3.8px;fill:#fff}
.pbadge.alert rect.pb{fill:#ff3b3b}
.pbadge.warn rect.pb{fill:#ffc21a}.pbadge.warn text{fill:#000}
.pbadge.ok rect.pb{fill:#19c25a}
.bld .hl{stroke:transparent}
.btn.tall{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;min-height:56px}
.btn .note{font-size:7px;color:var(--muted)}
.grid2>:last-child:nth-child(odd){grid-column:1/-1}
.ledger-row{display:flex;gap:8px;align-items:center;padding:6px 0;border-top:2px solid #1a1033}
.ledger-row:first-of-type{border-top:0}
.card.low{border-color:#a07010}


/* ---- hub map v4: compact pixel town, ambience (CSS only), slim tutorial bar ---- */
.hub{padding-bottom:4px}
#map .life,#map .tint,#map .labels{pointer-events:none}
.mapwrap{padding:0 0 2px}
.hubcards{padding-top:4px;padding-bottom:64px}
.hubcards .card{margin-bottom:6px;padding:6px;font-size:8px}
.hubcards .tag{font-size:7px;padding:0 3px}
.maphead{display:flex;align-items:center;justify-content:space-between}
@keyframes smoke{from{transform:translate(0,0);opacity:.8}to{transform:translate(2px,-9px);opacity:0}}
.sm{animation:smoke 3.6s steps(6) infinite}
@keyframes ph1{0%{opacity:1}50%{opacity:.15}}
@keyframes ph2{0%{opacity:.15}50%{opacity:1}}
.siren-r{animation:ph1 .8s steps(1) infinite}.siren-b{animation:ph2 .8s steps(1) infinite}
@keyframes neon{0%,84%{opacity:1}86%{opacity:.25}90%{opacity:1}94%{opacity:.5}100%{opacity:1}}
.neon{animation:neon 3.2s steps(1) infinite}
.blink{animation:ph1 1.4s steps(1) infinite}
@keyframes wave{0%{transform:translateY(0)}50%{transform:translateY(1px)}}
.flag{animation:wave .9s steps(1) infinite}.flag2{animation:wave .9s steps(1) infinite;animation-delay:-.45s}
@keyframes flick{0%{transform:translateY(0)}50%{transform:translateY(-1px)}}
.fl{animation:flick .35s steps(1) infinite}
@keyframes drop{from{transform:translateY(0);opacity:1}to{transform:translateY(5px);opacity:0}}
.dp{animation:drop 1.2s steps(4) infinite}
@keyframes spark{0%{opacity:0}40%{opacity:1}60%{opacity:0}}
.spark{animation:spark 2.4s steps(1) infinite}
@keyframes driver{from{transform:translateX(-36px)}to{transform:translateX(200px)}}
@keyframes drivel{from{transform:translateX(70px)}to{transform:translateX(-175px)}}
.drive{animation:driver 14s linear infinite}.drive-l{animation:drivel 16s linear infinite}
@keyframes walk{to{transform:translateX(var(--d,20px))}}
.walk{animation:walk 8s linear infinite alternate}
@keyframes trainrun{0%{transform:translateX(36px);opacity:0}8%{opacity:1}38%,58%{transform:translateX(0);opacity:1}92%{opacity:1}100%{transform:translateX(-40px);opacity:0}}
.train{animation:trainrun 14s ease-in-out infinite}
@keyframes planerun{0%{transform:translate(0,0);opacity:0}6%{opacity:1}55%{transform:translate(22px,0)}80%{transform:translate(38px,-4px)}100%{transform:translate(52px,-14px);opacity:0}}
.plane{animation:planerun 10s ease-in infinite}
@keyframes bobk{50%{transform:translateY(1px)}}
.bob{animation:bobk 2.4s steps(1) infinite}
@keyframes birdk{from{transform:translateX(-10px)}to{transform:translateX(210px)}}
.bird{animation:birdk 26s linear infinite}
@keyframes wvk{50%{transform:translateX(3px)}}
.wv{animation:wvk 4s steps(3) infinite}
@keyframes pipk{50%{transform:translateY(-.8px)}}
.pbadge.alert .pbi{animation:pipk .8s steps(1) infinite}
.glow{opacity:0}
#map[data-tod=night] .glow{opacity:.6}#map[data-tod=dusk] .glow{opacity:.4}
#map[data-tod=night] .win,#map[data-tod=dusk] .win{fill:#ffe27a}
#map[data-tod=night] .neon{filter:drop-shadow(0 0 1px #ff3d9a)}
/* slim tutorial bar (tap to expand) */
#hint{padding:0 6px calc(6px + var(--sab))}
.hint{padding:0;margin:0 auto;font-size:8px;border-width:2px}
.hint .hint-row{display:flex;align-items:stretch}
.hint .hint-head{flex:1;min-width:0;display:flex;gap:6px;align-items:center;min-height:44px;padding:2px 6px;background:none;border:0;color:#fff;text-align:left;cursor:pointer;font:inherit;font-size:8px}
.hint .hint-head b{color:var(--gold);flex:none}
.hint .hint-head .hint-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint .hint-head .chev{flex:none;color:var(--muted)}
.hint.open .hint-text{white-space:normal;overflow:visible}
.hint .hint-go{flex:none;min-width:44px;min-height:44px;margin:0;padding:0 8px;border:0;border-left:2px solid #000;background:#d6336c;color:#fff;cursor:pointer;font:inherit;font-size:8px;box-shadow:inset -2px -2px 0 #8a1c46,inset 2px 2px 0 #ff7aa8}
.hint .hint-body{padding:0 6px 6px}
.hint .hint-body .row{margin-top:4px}
.hint .hint-body .btn{padding:8px 6px;font-size:8px}
.hint .link{min-height:36px}

/* compound screens: smaller headers, denser cards, place icons */
.screen-head{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.screen-head h1{margin:0;font-size:11px}
.picon{display:block;flex:none;shape-rendering:crispEdges;image-rendering:pixelated;background:#14341f;border:2px solid #000;padding:2px;box-sizing:content-box}
.cscreen h2{font-size:8px;margin:8px 0 4px;padding-bottom:2px;border-bottom:2px solid #000;color:var(--blue)}
.cscreen .card{padding:6px;margin-bottom:6px}
.cscreen .npc{margin-bottom:6px;gap:6px}
.cscreen .bubble{padding:6px;font-size:8px}
.cscreen .btn{padding:8px 8px}
.card.agent canvas.pt{width:44px;height:44px}
.card.agent{padding:6px}
.card.agent .stat{gap:3px}
.card.agent .bar{margin:1px 0 2px;height:5px}
.card.agent .stats{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.card.agent .stat .lblw{width:22px;font-size:6px}
.card.agent .stat .val{width:16px;font-size:6px}
.card.agent .tag{font-size:7px;padding:0 4px;margin:1px 2px 1px 0}
@media (max-width:340px){.hint .hint-head{font-size:7px}.hint .hint-go{padding:0 5px}}

.screen-head .back{margin:0;padding:0 4px 0 0;font-size:8px;flex:none}
.hint.open .hint-head{align-items:flex-start;padding-top:6px}
@media (min-width:900px){.mapwrap,.hubcards{max-width:480px}.hint{max-width:480px}}


/* ---- hub map v5: interaction feel, richer ground, sprite ambience (transforms / opacity only) ---- */
#map{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.bld{transform-box:fill-box;transform-origin:50% 100%;transition:transform .12s ease-out}
.bld .hl{transition:fill-opacity .12s,stroke .12s}
.bld:hover,.bld:focus-visible{transform:translateY(-1px)}
.bld:hover rect.hl,.bld:focus-visible rect.hl{stroke:#fff04d;stroke-width:1.2;fill-opacity:.1}
.bld:focus-visible rect.hl{stroke-dasharray:3 1.5}
.bld:active{transform:translateY(0) scale(.97)}
.bld.locked:hover,.bld.locked:active{transform:none}
.bld.locked:hover rect.hl{stroke:#9aa;fill-opacity:.05}
@keyframes tapk{0%{transform:translateY(0) scale(1)}35%{transform:translateY(1px) scale(.93)}70%{transform:translateY(-2px) scale(1.05)}100%{transform:translateY(0) scale(1)}}
.bld.tap{animation:tapk .18s ease-out}
.bld.locked.tap{animation:shakek .2s linear}
@keyframes shakek{25%{transform:translateX(-1px)}75%{transform:translateX(1px)}}
@keyframes todok{0%,100%{transform:translateY(0)}50%{transform:translateY(-.8px)}}
.bld.todo .ai{animation:todok 1.8s ease-in-out infinite}
@keyframes pbk{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.pbi{transform-box:fill-box;transform-origin:center}
.pbadge .pbi{animation:pbk 1.8s ease-in-out infinite}
.pbadge.alert .pbi{animation:pipk .8s steps(1) infinite}
@keyframes twk{0%,100%{opacity:0}45%,55%{opacity:1}}
.tw{animation:twk 2.6s steps(1) infinite}
@keyframes wv2k{50%{transform:translateX(-3px)}}
.wv2{animation:wv2k 5s steps(3) infinite}
@keyframes foamk{0%,100%{opacity:.8}50%{opacity:.25}}
.foam{animation:foamk 3s steps(2) infinite}
#map[data-tod=night] .lampglow{opacity:.9}#map[data-tod=dusk] .lampglow{opacity:.65}#map[data-tod=dawn] .lampglow{opacity:.3}
#map[data-tod=dawn] .win{fill:#ffe27a}
/* long-press / hover tooltip */
.mapwrap{position:relative}
.maptip{position:absolute;z-index:5;transform:translate(-50%,-100%);max-width:70%;padding:5px 7px;background:#000e;color:#fff;border:2px solid var(--gold);font-size:8px;line-height:1.4;text-align:center;pointer-events:none}
.maptip[hidden]{display:none}
/* summary strip on compound screens */
.sumstrip{display:flex;gap:4px;margin:0 0 6px}
.sumstrip .sum{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px 4px;background:var(--panel2);border:2px solid #000;box-shadow:inset 0 2px 0 #fff2}
.sumstrip .sum b{font-size:9px;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sumstrip .sum span{font-size:5.5px;color:var(--muted);letter-spacing:.3px}
.sumstrip .sum.ok b{color:var(--green)}.sumstrip .sum.warn b{color:#ffc21a}.sumstrip .sum.alert b{color:var(--red)}.sumstrip .sum.gold b{color:var(--gold)}
.sumstrip .sum.warn,.sumstrip .sum.alert{border-color:#7a5a10}
@media (max-width:340px){.sumstrip .sum b{font-size:8px}.sumstrip .sum span{font-size:5px}}

/* sound settings + daily challenge */
label.toggle{display:flex;gap:10px;align-items:flex-start;padding:8px 0;cursor:pointer;min-height:44px}
label.toggle input[type=checkbox]{width:28px;height:28px;min-height:0;flex:none;margin:0;padding:0;accent-color:var(--gold)}
input[type=range]{padding:0;min-height:44px;border:0;background:transparent;accent-color:var(--gold)}
output{min-width:40px;text-align:right;font-size:9px}
.card.daily{border-color:var(--gold)}
input:focus-visible,label.toggle:focus-within{outline:3px solid var(--gold);outline-offset:2px}

/* ---- playtest fixes: help (i), HUD sheets, result breakdown, bribe, level-up ---- */
button.chip{font:inherit;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:3px}
.tapchip .xpbar{display:block;width:26px;height:6px;background:#000;border:1px solid #000;margin-left:3px}
.tapchip .xpbar u{display:block;height:100%;background:var(--blue);text-decoration:none}
.info{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-height:22px;margin-left:5px;padding:0;border:2px solid #000;border-radius:50%;
  background:var(--blue);color:#000;font:bold 11px Georgia,serif;cursor:pointer;vertical-align:middle;position:relative}
.info::after{content:'';position:absolute;inset:-11px}   /* 44px tap target around the 22px badge */
.glossary{max-height:55vh;overflow:auto;margin:6px 0}
.gloss{padding:6px 4px;border-bottom:1px solid #000}.gloss b{color:var(--gold);font-size:9px}
.gloss.hit{background:#33265c;outline:2px solid var(--gold)}
.seg.wrap button{flex:1 1 72px;overflow-wrap:normal;word-break:keep-all;font-size:8px;padding:8px 4px}
.brk{padding:2px 0;font-size:9px;gap:8px}.brk>span{min-width:0}.brk>b{flex:none}
.bribe-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bribe-opts>div{background:#00000040;padding:6px;border:2px solid #000}
.levelup{text-align:center}.levelup .lv{font-size:22px;margin:6px 0;animation:lvpop .6s steps(6) both}
@keyframes lvpop{from{transform:scale(.3)}to{transform:scale(1)}}
.celebrate{border-color:var(--gold)}
.badge.new.caught,.badge.new.escaped{border-color:var(--red);color:var(--red)}
.why p{margin:6px 0}
@media (prefers-reduced-motion:reduce){.levelup .lv{animation:none}}

/* ---- Phase 1: chance fog, offer lengths, loadout, rap sheet, results ---- */
.pips.intel i{width:10px;height:10px;margin-left:3px}.pips.intel i.on{background:var(--blue)}
.pips i:first-child{margin-left:0}
.odds{margin:3px 0}.odds .small{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.ico{display:inline-block;vertical-align:-1px;line-height:0}
.tag.len{background:#2a3d6b}.tag.len.shift{background:#6b5a1f}.tag.len.overnight{background:#3d2a6b}
.lenhead{margin-top:14px}
.card.intelbox{background:#2d2350}
.riskbox{border-top:1px dashed #6a5aa0;margin-top:4px;padding-top:4px;color:var(--muted);text-align:left}
.slotrow{margin:4px 0}
.card.slot-empty{border-style:dashed;background:transparent;opacity:.85}
.flair{display:inline-block;border:2px solid #222;padding:1px 6px;font-size:9px;font-family:'Press Start 2P',monospace;background:#ddd;color:#222;white-space:nowrap}
.flair.front{background:#ff4d4d;color:#fff;transform:rotate(-3deg)}.flair.big{background:#ffd23f}.flair.inside{background:#cfc6a8}
.failure{font-size:11px;color:var(--red);margin:6px 0;line-height:1.4}
.card.factors .brk{border-bottom:1px dotted #4b3a82;padding:2px 0}
.rap{margin-top:2px}
.rap .pips i{width:10px;height:10px}
button.tag.pick.dis{opacity:.4}
.btn.on{background:#1f6b3a;box-shadow:inset -3px -3px 0 #0f3a20,inset 3px 3px 0 #3fae6a}