/* The Patron's Path — Live Industry Lab look: black ground, off-white type, brand red; the map itself is a sheet of graph paper.
   Phone-first: the map on top, the tools and the mission panel under it. */
:root{
  --bg:#0a0a0a; --panel:#131313; --panel-2:#1b1b1b; --panel-3:#262626;
  --line:rgba(244,241,236,.14); --line-2:rgba(244,241,236,.26);
  --ink:#f4f1ec; --muted:#a8a8a8; --faint:#8c8c8c;
  --red:#e80000; --red-text:#ff5252; --red-dark:#b80000; --red-wash:rgba(232,0,0,.13);
  --ok:#3ecf74; --warn:#f2b33d; --bad:#ff5252; --blue:#5aa8ff; --paper:#f7f2e3;
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --label:"Bebas Neue","Oswald","Arial Narrow",sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --hdr:57px; --trk:60px; --stick:117px; --hud:72px; --sheet:0px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--stick) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0 0 10px}
a{color:var(--ink);text-underline-offset:3px}
button{font:inherit;color:inherit}
input,textarea,select{font:inherit;color:var(--ink);background:var(--panel-2);border:1px solid var(--line-2);border-radius:4px;padding:9px 10px;width:100%;min-height:44px}
textarea{min-height:84px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ink);outline-offset:1px}
input[type=number]{-moz-appearance:textfield}
.muted{color:var(--muted)} .hint{color:var(--muted);font-size:13.5px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#000;padding:8px 12px;z-index:100}
.skip:focus{left:8px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* header */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 8px) 14px 8px;background:#000;border-bottom:3px solid var(--red);min-width:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand__t{font-family:var(--display);text-transform:uppercase;font-size:21px;letter-spacing:.02em;white-space:nowrap}
.top__v{font-family:var(--label);letter-spacing:.12em;font-size:19px;color:var(--muted);flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcode{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:36px;padding:2px 10px;background:#fff;color:#000;border:0;border-radius:4px;cursor:pointer;font-family:var(--display);letter-spacing:.12em;font-size:17px;line-height:1}
.vcode__l{font-family:var(--label);font-size:12px;letter-spacing:.14em;color:#555}
.vcode b{font-weight:400}
.vinvite{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;min-height:36px;padding:2px 10px;background:transparent;color:var(--ink);border:1px solid var(--line-2);border-radius:4px;cursor:pointer;font-family:var(--label);letter-spacing:.1em;font-size:15px}
.vcode[hidden],.vinvite[hidden]{display:none}
.top__r{display:flex;align-items:center;gap:10px;font-size:12.5px;margin-left:auto;flex:0 1 auto;min-width:0;text-align:right}
#herecount{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hdot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--faint)} .hdot.on{background:var(--ok)}
.here__n{display:none;font-family:var(--label);letter-spacing:.06em;font-size:15px}
#savestate{min-width:0;line-height:1.2;overflow-wrap:anywhere}
main{max-width:1500px;margin:0 auto;padding:0 12px 40px}

/* buttons and forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 18px;border:2px solid var(--ink);border-radius:4px;background:transparent;font-family:var(--label);letter-spacing:.14em;font-size:19px;cursor:pointer;text-decoration:none}
.btn{overflow-wrap:normal}                 /* (the panel lets words break anywhere, which made a small button beside a box, like the partner's "Add", shrink to one letter a line) */
.btn:hover{background:var(--panel-3)} .btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff} .btn.primary:hover{background:var(--red-dark)}
.btn.sm{min-height:36px;padding:4px 12px;font-size:16px;letter-spacing:.1em} .btn.ghost{border-color:var(--line-2);color:var(--muted)}
.btn.arming{background:var(--red);border-color:var(--red);color:#fff}
.row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:0;font-size:inherit}
label.f,.f{display:block;font-size:13px;color:var(--muted);margin:12px 0 0}
label.f input,label.f textarea,label.f select{margin-top:4px;color:var(--ink)}
#joinName,#resumeCode{display:block;width:100%}
.jumpjoin{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin:0 0 10px;font-size:14px}.jumpjoin a{color:var(--muted)}.jumpjoin a.btn{color:#fff}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{min-height:40px;padding:4px 12px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:4px;cursor:pointer;font-size:14px}
.seg button[aria-pressed=true],.seg button[aria-checked=true]{background:var(--red);border-color:var(--red);color:#fff}

/* join / story */
.hero{text-align:center;padding:24px 0 20px}
.hero__logo{display:block;width:min(340px,70vw);margin:0 auto 8px}
.hero__logo img{display:block;width:100%}
.kicker{font-family:var(--label);letter-spacing:.2em;color:var(--red-text);font-size:17px;margin:4px 0}
.hero h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(46px,12vw,92px);line-height:.95;margin:0 0 14px}
.story{max-width:40em;margin:0 auto;text-align:left}
.story__t{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,6vw,34px);line-height:1.05;margin:0 0 10px;text-align:center}
.story p{color:#dcd8d1}
.story__s{font-family:var(--label);letter-spacing:.16em;font-size:21px;margin:18px 0 6px;text-align:center}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:6px}
.steps li{counter-increment:s;display:flex;gap:10px;align-items:baseline;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:4px}
.steps li::before{content:counter(s);flex:0 0 26px;height:26px;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:50%;font-family:var(--label);font-size:17px}
.steps b{font-family:var(--label);letter-spacing:.1em;font-size:18px;font-weight:400;margin-right:6px}
.purpose{max-width:36em;margin:14px auto 0;color:var(--muted);font-size:14.5px}
.joinbox{max-width:480px;margin:22px auto 0;text-align:left;background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--red);border-radius:6px;padding:16px 18px 18px}
.joinbox__lead{font-size:14.5px;color:#d7d3cc}
.label-h{font-family:var(--label);letter-spacing:.16em;font-size:20px;margin:8px 0 2px}

/* the guide's speech bubble */
.bubble{display:flex;gap:12px;align-items:flex-start;margin:10px 0;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--red);border-radius:6px}
.bubble p:last-child,.bubble ul:last-child{margin-bottom:0}
.bubble ul{margin:0 0 8px;padding-left:20px}
.avatar{flex:0 0 36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-family:var(--display);font-size:19px}
.bubble__who{font-size:13px;color:var(--muted);margin-bottom:4px}
.bubble--hero{margin:16px 0}
.bubble.pm{border-left-color:var(--warn)} .bubble.pm .avatar{background:var(--warn);color:#000}

/* the mission track and the HUD */
.track{display:flex;gap:6px;overflow-x:auto;padding:10px 2px 8px;scrollbar-width:none;position:sticky;top:calc(var(--hdr) - 2px);z-index:20;background:var(--bg);box-shadow:0 7px 7px -3px var(--bg)}      /* (solid, so the meters scrolling under it are hidden cleanly; the soft fade below is the shadow, which the strip's own scrolling cannot clip) */
.track::-webkit-scrollbar{display:none}
.mnode{flex:1 0 auto;min-width:104px;display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--panel);border:1px solid var(--line);border-radius:6px;cursor:pointer;text-align:left}
.mnode b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel-3);font-family:var(--label);font-size:19px;font-weight:400}
.mnode span{font-family:var(--label);letter-spacing:.08em;font-size:16px;line-height:1.05}
.mnode small{display:block;font-size:11px;color:var(--faint);font-family:var(--body);letter-spacing:0}
.mnode[aria-current=step]{border-color:var(--red);box-shadow:inset 0 -3px 0 var(--red)} .mnode[aria-current=step] b{background:var(--red);color:#fff}
.mnode.done b{background:var(--ok);color:#000}
.mnode[disabled]{opacity:.4;cursor:not-allowed}
.hud{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:4px 2px 10px}
.meter{flex:1 1 150px;min-width:130px}
.meter__l{display:flex;justify-content:space-between;font-family:var(--label);letter-spacing:.1em;font-size:15px;color:var(--muted)}
.meter__t{height:9px;border-radius:5px;background:var(--panel-3);overflow:hidden;border:1px solid var(--line)}
.meter__f{height:100%;background:var(--ok);transition:width .4s}
.meter.mid .meter__f{background:var(--warn)} .meter.low .meter__f{background:var(--bad)}
.score{font-family:var(--display);font-size:30px;line-height:1;padding:4px 14px;background:var(--panel);border:1px solid var(--line);border-radius:6px;white-space:nowrap}
.score small{display:block;font-family:var(--label);letter-spacing:.14em;font-size:13px;color:var(--muted)}
.weak{font-size:13px;color:var(--warn);flex:1 1 220px}
.weak.wake{flex:1 1 100%}
.hudnote{flex:1 1 100%;font-size:13px;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .hudnote b{font-family:var(--label);font-weight:400;letter-spacing:.1em;color:var(--ink)} .hudnote .st{color:var(--warn);letter-spacing:2px}
.hudmore{display:none}

/* the stage: tray, map, panel */
.stage{display:grid;grid-template-columns:1fr;gap:10px}
.mapwrap{position:relative;height:min(62vh,640px);min-height:340px;border-radius:6px;overflow:hidden;border:3px solid var(--line-2);background:var(--paper)}
#map{display:block;width:100%;height:100%;touch-action:pan-x pan-y}
.maptools{position:absolute;right:8px;top:8px;display:grid;grid-template-columns:repeat(2,42px);gap:6px;z-index:3}
.maptools button{width:42px;height:42px;border-radius:6px;border:1px solid rgba(0,0,0,.35);background:rgba(255,255,255,.92);color:#1f2d46;font-size:22px;cursor:pointer;font-family:var(--body)}
.maptools button:disabled{opacity:.4;cursor:default}
.maptools .handbtn{display:none}
.maptools button[aria-pressed=true]{background:#1f2d46;color:#fff}
.maptools button:focus-visible,.overlays button:focus-visible{outline:3px solid #1f2d46;outline-offset:2px;box-shadow:0 0 0 2px #fff}
.maptop{position:absolute;left:8px;top:8px;right:106px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}
.maptop>*{pointer-events:auto}
.hintring{position:absolute;z-index:5;border:4px solid var(--red);border-radius:14px;box-shadow:0 0 0 3px #fff,0 0 18px 6px rgba(232,0,0,.55);pointer-events:none;animation:ring .9s ease-in-out infinite alternate}
.hintring[hidden]{display:none}
@keyframes ring{from{transform:scale(1)}to{transform:scale(1.07)}}
.overlays{display:flex;gap:6px;flex-wrap:wrap}
.overlays button{min-height:34px;padding:2px 10px;border-radius:17px;border:1px solid rgba(0,0,0,.35);background:rgba(255,255,255,.92);color:#1f2d46;font-family:var(--label);letter-spacing:.08em;font-size:15px;cursor:pointer}
.overlays button[aria-pressed=true]{background:#1f2d46;color:#fff}
.mapnote{max-width:100%;padding:6px 10px;border-radius:6px;background:rgba(31,45,70,.92);color:#fff;font-size:13px;pointer-events:none}
.mapnote:empty{display:none}
/* the note under the overlay buttons can be closed: a small x in its corner, with a 44 px target (the note itself never takes a touch, so a finger on it still scrolls the page) */
.notebox{position:relative;max-width:100%;pointer-events:none}
.notebox[hidden]{display:none}
.notebox.closable .mapnote{padding-right:32px;min-height:44px;box-sizing:border-box;display:flex;align-items:center}                /* as tall as the x's 44 px target, so the button never sticks out below a one-line note and swallows a click on the map beside it */
.notebox.closable .mapnote:empty{display:none}
.notex{position:absolute;top:0;right:0;width:44px;height:44px;margin:0;padding:2px 9px 0 0;border:0;background:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;pointer-events:auto;display:grid;place-items:start end}
.notex[hidden]{display:none}
.notex:focus-visible{outline:3px solid #fff;outline-offset:-6px;border-radius:6px}
.overlays button .ov-s{display:none}
.tray{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.tray h4{display:none}
.tgroup{display:contents}
.toolrow{flex:0 0 auto;display:flex;align-items:stretch;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:6px}
.toolrow.done{border-color:rgba(62,207,116,.5)}
.toolrow .tool{flex:1 1 auto;min-width:0;border:0;background:transparent;border-radius:6px}
.toolrow .tool[aria-pressed=true]{background:var(--red-wash);box-shadow:inset 0 0 0 2px var(--red)}
.toolplus{flex:0 0 40px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;border-radius:0 6px 6px 0}
.toolplus:hover{background:var(--panel-3)}
.tool{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 10px;background:var(--panel);border:1px solid var(--line);border-radius:6px;cursor:pointer;text-align:left}
.tool .n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--label);font-size:16px;flex:0 0 24px}
.tool .n.plain{background:var(--panel-3)}
.tool .t{font-family:var(--label);letter-spacing:.08em;font-size:16px;line-height:1.05}
.tool .t small{display:block;font-family:var(--body);font-size:11px;color:var(--faint);letter-spacing:0}
.tool.done{border-color:rgba(62,207,116,.5)} .tool.done .n{background:var(--ok);color:#000}
.tool[aria-pressed=true]{border-color:var(--red);background:var(--red-wash)}
.tray .sep{flex:0 0 1px;background:var(--line);margin:4px 2px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px 16px;min-width:0;overflow-wrap:anywhere}
.panel h3{font-family:var(--display);text-transform:uppercase;font-size:24px;line-height:1.05;margin:2px 0 8px}
.panel h4{font-family:var(--label);letter-spacing:.14em;font-size:17px;color:var(--muted);margin:14px 0 4px}
.goals{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.goals li{display:flex;gap:8px;align-items:baseline;font-size:14px;padding:5px 8px;background:var(--panel-2);border-radius:4px}
.goals li::before{content:"";flex:0 0 16px;height:16px;border-radius:50%;border:2px solid var(--line-2);align-self:center}
.goals li.ok::before{background:var(--ok);border-color:var(--ok)} .goals li.ok{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.card{display:block;text-align:left;padding:10px;background:var(--panel-2);border:2px solid var(--line);border-radius:6px;cursor:pointer;min-height:44px}
.card[aria-pressed=true]{border-color:var(--red);background:var(--red-wash)}
.card b{display:block;font-family:var(--label);letter-spacing:.1em;font-size:19px;font-weight:400}
.card span{font-size:12.5px;color:var(--muted);line-height:1.35;display:block}
.pathlist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pathlist li{display:flex;align-items:center;gap:8px;padding:4px 6px;background:var(--panel-2);border-radius:4px;font-size:14px}
.pathlist .num{flex:0 0 24px;height:24px;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:50%;font-family:var(--label);font-size:16px}
.pathlist .nm{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;cursor:pointer}
.pathlist .nm__t{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:isolate}
.pathlist .nm__d{flex:none;white-space:nowrap;unicode-bidi:isolate}
.pathlist button{min-width:34px;min-height:34px;background:var(--panel-3);border:1px solid var(--line);border-radius:4px;cursor:pointer}
.kv{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:3px 10px;border-radius:14px;background:var(--panel-3);font-size:12.5px;border:1px solid var(--line)}
.chip.ok{border-color:var(--ok);color:var(--ok)} .chip.bad{border-color:var(--bad);color:var(--bad)} .chip.warn{border-color:var(--warn);color:var(--warn)}
.codeline{margin:12px 2px 0;font-size:13px;color:var(--muted)}
.code{display:inline-block;font-family:var(--display);letter-spacing:.14em;font-size:20px;background:#fff;color:#000;padding:2px 10px;border-radius:4px;margin:0 4px}

/* the night player */
.player{display:flex;flex-direction:column;gap:6px;padding:8px 10px 9px;background:rgba(12,16,28,.97);color:#fff;border-top:3px solid var(--red)}
.player__row{display:flex;align-items:center;gap:8px;min-width:0}
.player[hidden],.beat[hidden]{display:none}
.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}
.levelup{position:fixed;z-index:71;left:50%;top:22%;transform:translateX(-50%);min-width:min(86%,420px);text-align:center;padding:14px 22px;border-radius:12px;background:rgba(10,12,28,.94);border:3px solid var(--warn);color:#fff;pointer-events:none;animation:pop .35s ease-out}
.levelup[hidden]{display:none}
.levelup b{display:block;font-family:var(--display);font-size:clamp(24px,5vw,40px);line-height:1;text-transform:uppercase;color:var(--warn)}
.levelup .stars{font-size:34px;letter-spacing:6px;color:var(--warn);margin:6px 0}
.levelup small{display:block;font-size:14px;color:#cbd5ea}
@keyframes pop{0%{transform:translateX(-50%) scale(.6);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
.mnode .st{display:block;font-size:12px;letter-spacing:2px;color:var(--warn);line-height:1}
.xp{font-family:var(--label);letter-spacing:.14em;font-size:16px;color:var(--warn);white-space:nowrap}
.mapwrap.walking .maptools,.mapwrap.walking .maptop,.mapwrap.walking .overlays,.mapwrap.walking .notebox,.mapwrap.walking .hintring{display:none}
.pbtn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:var(--red);color:#fff;font-size:18px;cursor:pointer}
.pclock{font-family:var(--display);font-size:20px;min-width:84px;text-align:center;white-space:nowrap}
#pscrub{flex:1 1 90px;min-width:60px;min-height:28px;padding:0;background:transparent;border:0}
.pspeed{display:flex;gap:4px}.pspeed button{min-width:40px;min-height:34px;border-radius:4px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer;font-family:var(--label);letter-spacing:.06em}
.pspeed button[aria-pressed=true]{background:#fff;color:#000}
.pspeed1{display:none;min-width:48px;min-height:40px;border-radius:20px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;font-family:var(--label);font-size:17px;letter-spacing:.06em}
.pcounts{font-size:12px;color:#c9d2e4}
/* the 9:30 beat: a thin strip across the top of the map (never a card over the stage and the crowd) */
.beat{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 12px;padding:6px 14px 7px;background:rgba(8,10,24,.92);color:#fff;border-bottom:4px solid var(--red);pointer-events:none}
.beat b{font-family:var(--display);font-weight:400;font-size:clamp(17px,2.4vw,22px);line-height:1.1;text-transform:uppercase}
.beat span{font-size:14px;line-height:1.3}
.beat small{flex:1 0 100%;font-size:12.5px;color:#cbd5ea}
.beat--ok{border-bottom-color:var(--ok)} .beat--mid{border-bottom-color:var(--warn)} .beat--bad{border-bottom-color:var(--bad)}

/* stop sheets and the report */
.sheet{margin:8px 0;padding:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.sheet__h{display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer}
.sheet__h .num{flex:0 0 26px;height:26px;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:50%;font-family:var(--label);font-size:17px}
.sheet__h b{font-family:var(--label);letter-spacing:.1em;font-size:19px;font-weight:400;flex:1}
.sheet .chips{margin:4px 0 6px}
.chip.btn{cursor:pointer;background:var(--panel-3)}.chip[aria-pressed=true]{background:var(--ok);color:#000;border-color:var(--ok)}
.sheet label.f{margin-top:6px}
.sim{margin:8px 0 0;padding:8px;border-radius:5px;background:#0e0e0e;border:1px dashed var(--line-2);font-size:13.5px}
.sim.bad{border-color:var(--bad)} .sim.ok{border-color:var(--ok)} .sim.mid{border-color:var(--warn)}
.cardsm{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:8px 0}
.stat{padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.stat__l{font-family:var(--label);letter-spacing:.1em;font-size:14px;color:var(--muted)}
.stat__v{font-family:var(--display);font-size:24px;line-height:1.1}
.stat__s{font-size:12px;color:var(--faint)}
.stat.bad .stat__v{color:var(--bad)} .stat.ok .stat__v{color:var(--ok)} .stat.mid .stat__v{color:var(--warn)}
.flags{list-style:none;margin:6px 0;padding:0;display:grid;gap:6px}
.flags li{padding:8px 10px;background:var(--panel-2);border-left:4px solid var(--warn);border-radius:4px;font-size:13.5px}
.flags li.s3{border-left-color:var(--bad)} .flags li.s1{border-left-color:var(--faint)}
.flags li button{margin-top:4px}
.chart{width:100%;height:auto;background:#0e0e0e;border:1px solid var(--line);border-radius:6px}

/* toast */
.toast{position:fixed;left:4vw;right:4vw;margin:0 auto;width:max-content;bottom:calc(18px + env(safe-area-inset-bottom,0px) + var(--sheet));transform:translateY(30px);max-width:min(560px,92vw);padding:10px 16px;background:#fff;color:#000;border-radius:6px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;box-shadow:0 6px 24px rgba(0,0,0,.5);display:flex;align-items:center;gap:12px}
.toast.show{opacity:1;transform:translateY(0)}
.toast.act.show{pointer-events:auto}
.toast__btn{flex:none;min-height:44px;padding:4px 16px;border:2px solid #000;border-radius:4px;background:var(--red);color:#fff;font-family:var(--label);font-size:17px;letter-spacing:.1em;cursor:pointer}

body:not(.novenue) #join{display:none}
body.novenue .top__v{display:none}

@media (min-width:980px){
  .stage{grid-template-columns:190px minmax(0,1fr) 380px;align-items:start}
  .stage.notray{grid-template-columns:minmax(0,1fr) 380px}
  .stage.notray .tray{display:none}
  .tray{flex-direction:column;overflow-x:hidden;overflow-y:auto;position:sticky;top:calc(var(--stick) + 8px);max-height:calc(100vh - var(--stick) - var(--hud) - 20px);min-height:300px;scrollbar-gutter:stable}
  .tray h4{display:block;font-family:var(--label);letter-spacing:.14em;font-size:15px;color:var(--muted);margin:8px 0 0}
  .tray h4:first-child{margin-top:0}
  .tgroup{display:flex;flex-direction:column;gap:6px;margin-top:4px}
  .tgroup.more{display:grid;grid-template-columns:1fr 1fr}
  .tgroup.more .tool{padding:4px 6px;gap:6px} .tgroup.more .tool .t small{display:none}
  .toolrow{width:100%}
  .tool{width:100%}
  .tray .sep{display:none}
  .mapwrap{position:sticky;top:calc(var(--stick) + 8px);height:calc(100vh - var(--stick) - var(--hud) - 20px);min-height:420px;max-height:900px}
  .panel{max-height:calc(100vh - var(--stick) - var(--hud) - 20px);min-height:300px;overflow:auto;position:sticky;top:calc(var(--stick) + 8px)}
}

/* ===== The shell on a phone, a tablet and a short screen ===== */
/* the mission's goals stay pinned above an open inspector */
.goalstrip{position:sticky;top:-12px;z-index:3;margin:-12px -14px 10px;padding:8px 14px;background:var(--panel-2);border-bottom:1px solid var(--line-2);border-radius:6px 6px 0 0;font-size:13px}
.goalstrip__h{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap} .goalstrip__h b{font-family:var(--label);letter-spacing:.1em;font-size:15px;font-weight:400} .goalstrip__h span{color:var(--muted)} .goalstrip__h .linkbtn{margin-left:auto;color:var(--ink)}
.goalstrip__l{margin:4px 0 0;padding:0;list-style:none;color:var(--warn)} .goalstrip__l li{padding:1px 0} .goalstrip__l li::before{content:"\25CB  ";color:var(--muted)}
.goalstrip__ok{margin:4px 0 0;color:var(--ok)}
.bubble__ask{margin:6px 0 0}
.bubble__hint{margin:8px 0 0;padding:8px 10px;background:var(--panel-2);border-left:3px solid var(--warn);border-radius:4px;font-size:14px}
body.novenue .vcode,body.novenue .vinvite{display:none}

/* one column (phones and tablets): the tray is a strip above the map and the panel is under it; an open inspector is a sheet pinned under the map */
@media (max-width:979px){
  .hud{gap:6px 8px;padding:2px 2px 6px}
  .meter{flex:1 1 0;min-width:0}
  .meter__l{font-size:12.5px;letter-spacing:.04em;overflow:hidden;white-space:nowrap}
  .score{padding:2px 8px;font-size:21px} .score small{font-size:9px;letter-spacing:.06em}
  .xp{font-size:13px;letter-spacing:.04em}
  .hudmore{display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;margin:-7px -7px -7px -3px;border-radius:50%;border:7px solid transparent;background:var(--panel);background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted);font-family:var(--label);font-size:16px;cursor:pointer}
  .hud .weak:not(.wake),.hud .hudnote{display:none;flex:1 1 100%}
  .hud.open .weak,.hud.open .hudnote{display:block}
  .panel.sel{position:sticky;bottom:0;z-index:25;max-height:42vh;max-height:42svh;overflow:auto;margin:0 -6px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));border-bottom:0;border-radius:12px 12px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.55)}
  .stage.has-sel .mapwrap{height:calc(100vh - var(--stick) - var(--sheet) - 14px);height:calc(100svh - var(--stick) - var(--sheet) - 14px);min-height:220px}
  .goalstrip__l,.goalstrip__ok{display:none}
  .goalstrip{margin:-12px -14px 6px}
}
/* a phone: the header gives the venue's name the room, the code and the invite link are one tap, and the mission nodes drop their second line */
@media (max-width:899px){
  body:not(.novenue):not(.inst) .brand__t{display:none}                      /* (the game's header only: the instructor page has the room for the name and sizes it itself) */
  .vinvite__t{display:none} .vinvite{min-width:44px}
  .here__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .here__n{display:inline}
}
@media (max-width:640px){
  .top{gap:8px;padding:calc(env(safe-area-inset-top,0px) + 5px) 10px 5px}
  .top__v{font-size:17px}
  .vinvite{min-height:44px}
  .vcode{min-height:44px;padding:2px 8px}
  #savestate{max-width:7.6em;font-size:12px}
}
@media (max-width:480px){
  .vcode__l{display:none}
  .mnode{min-width:92px;padding:5px 8px} .mnode small{display:none}
  .mapnote{font-size:12.5px;line-height:1.3}
  /* a phone: the two overlay buttons are ONE compact row with short names (the full name is the button's tooltip and the note says the rest), so they leave the plan showing */
  .overlays{flex-wrap:nowrap;gap:5px}
  .overlays button{padding:2px 9px;font-size:14px;letter-spacing:.04em;white-space:nowrap}
  .overlays button .ov-l{display:none} .overlays button .ov-s{display:inline}
}
@media (max-width:360px){
  .overlays{gap:4px} .overlays button{padding:2px 7px;font-size:13px;letter-spacing:.02em}
}
/* a finger: 44 px targets, the map's tools in two columns with the Move map toggle across them, and the map stops swallowing the finger (see bindTouch) */
@media (pointer:coarse),(max-width:700px){
  .btn.sm{min-height:44px}
  .seg button{min-height:44px}
  .pathlist button{min-width:44px;min-height:44px}
  .pathlist .nm{padding:12px 0}
  .sheet__h{min-height:44px}
  .overlays button{min-height:44px}
  .mnode{min-height:44px}
  .toolplus{flex-basis:44px}
  .linkbtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;vertical-align:middle}            /* the text links ("show", "fixed", "delete", "remove", "Not your venue?") are targets too */
  .goalstrip__h .linkbtn{margin-top:-6px;margin-bottom:-6px}
  summary{min-height:44px;padding-top:12px;padding-bottom:12px}                /* "Where this comes from" and the other folding notes */
  .maptools{grid-template-columns:repeat(2,44px)}
  .maptools button{width:44px;height:44px}
  .maptop{right:108px}
}
@media (pointer:coarse){
  .maptools .handbtn{display:block}
  .handbtn .handbtn__t{display:none}
}
/* a short screen (a phone held sideways, a laptop zoomed to 200%): the track scrolls away with the page and the header gets slim, so the plan keeps the screen */
@media (max-height:560px){
  .track{position:static}
  .top{padding-top:calc(env(safe-area-inset-top,0px) + 4px);padding-bottom:4px}
  .brand img{width:30px;height:30px}
}
/* a phone held sideways: the map on the left and the panel beside it */
@media (orientation:landscape) and (max-height:520px) and (min-width:640px) and (max-width:979px){
  .stage{grid-template-columns:minmax(0,1fr) minmax(250px,38%);grid-template-areas:"tray tray" "map panel";align-items:start}
  .tray{grid-area:tray} .mapwrap{grid-area:map;height:calc(100vh - var(--hdr) - 16px);min-height:240px}
  .panel{grid-area:panel;position:sticky;top:calc(var(--hdr) + 6px);max-height:calc(100vh - var(--hdr) - 16px);overflow:auto}
  .panel.sel{bottom:auto;margin:0;border-radius:6px;border-bottom:1px solid var(--line);box-shadow:none;max-height:calc(100vh - var(--hdr) - 16px)}
  .stage.has-sel .mapwrap{height:calc(100vh - var(--hdr) - 16px)}
  .stage.notray{grid-template-areas:"map panel"}
}

/* ===== Night report and player ===== */
/* the replay sits under the map in the page flow, so the door, the line and the street are never under its controls */
.mapwrap.playing{display:flex;flex-direction:column}
.mapwrap.playing #map{flex:1 1 0;min-height:0;height:auto}
.mapwrap.playing .overlays,.mapwrap.playing .notebox,.mapwrap.beating .maptools{display:none}
.pmoney{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center}
.pmoney[hidden]{display:none}
.pmoney__n small{display:block;font-family:var(--label);letter-spacing:.12em;font-size:13px;color:#c9d2e4;line-height:1}
.pmoney__n b{display:block;font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.pspark{display:block;width:100%;height:46px}
.pmoney__s{grid-column:1 / -1;font-size:12.5px;color:#c9d2e4} .pmoney__s.ok{color:var(--ok)} .pmoney__s.mid{color:var(--warn)} .pmoney__s.bad{color:var(--bad)}
@media (max-width:700px){
  .pspeed{display:none} .pspeed1{display:inline-block} .pclock{min-width:74px;font-size:18px}
  .pmoney__n b{font-size:22px} .pspark{height:40px}
}
@media (max-width:979px) and (min-height:521px){
  .mapwrap.playing{height:auto;min-height:0}
  .mapwrap.playing #map{flex:none;height:min(62vh,640px);min-height:340px}
  .mapwrap.playing .maptools{display:none}        /* the replay shows the whole room: the zoom buttons would only hide part of it */
}
/* a phone held sideways has no room under the map, and a map that is wide and short has width to spare: the controls stand in a narrow column BESIDE the map (never over its door, line and street), and the 9:30 strip
   is a line or two across the map's own width (the page fits the plan below it, see fitReplay in app.js). The column is as narrow as its words allow (the map takes the rest: at 200% zoom it used to get 142 px of a 640 px
   screen), and while the replay plays the panel steps out of the way, so the map has the whole width but that column. Under 600 px wide (a laptop at 400% zoom) there is no width to share at all: the controls go back under the map and the page scrolls. */
@media (max-height:520px) and (orientation:landscape) and (min-width:600px){
  .mapwrap.playing{display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:minmax(0,1fr)}
  .mapwrap.playing #map{grid-column:1;grid-row:1;flex:none;height:100%;min-height:0}
  .mapwrap.playing .maptools{display:none}
  .mapwrap.playing .beat{right:150px}
  .player{position:static;grid-column:2;grid-row:1;min-height:0;overflow-y:auto;gap:5px;padding:6px 7px;border-top:0;border-left:3px solid var(--red)}
  .player__row{flex-wrap:wrap;gap:5px 6px}
  #playBtn{order:0} .pclock{order:1;flex:1 1 auto;min-width:0;font-size:16px} .pbtn[data-act=closePlayer]{order:2} #pscrub{order:4;flex:1 1 100%} .pspeed{display:none} .pspeed1{display:inline-block;order:5}
  .pmoney{grid-template-columns:minmax(0,1fr)} .pmoney__n b{font-size:20px} .pspark{height:36px} .pmoney__s{display:none} .pcounts{font-size:11px}
  .beat{gap:0 10px;padding:4px 12px 5px} .beat b{font-size:15px} .beat span,.beat small{font-size:12px}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:640px) and (max-width:979px){
  .stage.playing{grid-template-columns:minmax(0,1fr);grid-template-areas:"tray" "map"} .stage.playing.notray{grid-template-areas:"map"} .stage.playing .panel{display:none}          /* (the panel comes back when the replay closes) */
}
@media (max-height:520px) and (orientation:landscape) and (max-width:599px){
  .mapwrap.playing{display:flex;flex-direction:column;height:auto;min-height:0}
  .mapwrap.playing #map{flex:none;height:min(62vh,640px);min-height:200px}
  .mapwrap.playing .maptools{display:none}
}
/* a wide laptop: the controls and the bar-sales readout stand side by side, so the player is about 90 px tall and the map keeps the height (it used to be 157 px of it) */
@media (min-width:1280px) and (min-height:521px){
  .player{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:3px 16px;padding:7px 12px 8px;align-items:center}
  .player__row{grid-column:1;grid-row:1} .pcounts{grid-column:1;grid-row:2} .pmoney{grid-column:2;grid-row:1 / span 2}
  .pspeed{display:none} .pspeed1{display:inline-block}
  .pstale{grid-column:1 / -1}
}
.pstale{margin:0;padding:3px 8px;border-radius:4px;background:rgba(242,179,61,.16);border:1px solid var(--warn);color:#ffe2a8;font-size:12.5px;line-height:1.3}
.pstale[hidden]{display:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.warnline{color:var(--warn);font-size:13.5px;margin:8px 0}
.ask{margin:10px 0;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-left:5px solid var(--warn);border-radius:6px;font-size:14px}
.ask.undo{border-left-color:var(--ok)} .ask p{margin:0 0 6px}
.starsline{margin:14px 0 4px;font-size:13px;color:var(--muted)} .starsline .st{color:var(--warn);letter-spacing:2px;font-size:15px}
.sheet .chip.btn{display:flex;flex-direction:column;align-items:flex-start;gap:0;border-radius:10px;text-align:left;line-height:1.25;padding:5px 11px}
.chip__s{display:block;font-family:var(--body);font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--muted)} .chip[aria-pressed=true] .chip__s{color:#06210f}
.btn.choice{flex-direction:column;align-items:flex-start;gap:0;height:auto;text-align:left;padding:6px 12px;line-height:1.2}
.btn.choice small{display:block;font-family:var(--body);font-size:11.5px;letter-spacing:0;text-transform:none;opacity:.85}
.sheet.stale .sim{opacity:.62}
.report__p{margin:8px 0;padding:6px 10px;background:var(--panel-2);border-left:4px solid var(--line-2);border-radius:4px;font-size:14px}
.report__p.mid{border-left-color:var(--warn)} .report__p.bad{border-left-color:var(--bad)}
.report__rule{margin:4px 0 10px}
.report__p + .report__more{margin-top:2px}          /* the 9:30 test's second paragraph, what it means: it reads as the next lines of the same note */
.capnote{margin:6px 0 8px;padding:6px 10px;background:var(--panel-2);border-left:4px solid var(--warn);border-radius:4px;color:var(--ink);font-size:13.5px}          /* the capacity flag: a gentle amber note, never red (the Fix still counts; it only says what it cost) */
.flags.capflag li.s1{border-left-color:var(--warn)}
.report__money{margin:10px 0 4px}
.compare{margin:6px 0 10px;padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.cmp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;margin:0 0 6px;font-size:14px} .cmp dt{color:var(--muted)} .cmp dd{margin:0;font-variant-numeric:tabular-nums}
.cmp b{font-weight:600} .cmp b.up{color:var(--ok)} .cmp b.dn{color:var(--bad)}
.barchart{display:block;max-width:560px}
.barlegend .sw{display:inline-block;width:10px;height:10px;margin:0 4px 0 8px;border-radius:2px;vertical-align:-1px} .barlegend .sw:first-child{margin-left:0}
.sw.ok{background:var(--ok)} .sw.mid{background:var(--warn)} .sw.bad{background:var(--bad)}
.src .srcrow{display:block} .src .srcrow::before{display:none}
.srcnote{display:block;margin-top:2px;color:var(--faint);font-size:12.5px}
.why{margin-top:4px} .why summary{cursor:pointer;color:var(--muted);font-size:12.5px} .why p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.tk3{display:inline-block;width:calc(100% - 26px);min-height:38px;padding:4px 8px;vertical-align:middle}
.pathlist{grid-template-columns:minmax(0,1fr)} .pathlist li{min-width:0}
input[readonly]{background:transparent;color:var(--muted);cursor:not-allowed;border-style:dashed}
.goals.plain li::before{display:none} .goals.plain b{font-weight:600} .goals.plain b.up{color:var(--ok)} .goals.plain b.dn{color:var(--bad)}
.card .card__pc{margin-top:3px;font-size:12px;color:var(--faint)}
.meter.na{opacity:.75} .meter.na .meter__l span:last-child{color:var(--warn)}
.meter.plan .meter__f{opacity:.6} .score.plan{opacity:.85} .score .score__n{font-size:10.5px;letter-spacing:.06em;line-height:1.2;color:var(--warn);white-space:nowrap}          /* (the night no longer speaks for this plan: the numbers say they come from the plan alone) */
.beat .beat__move{min-height:1.3em;color:#e6ecf8}
.beat.tight .beat__move{display:none}
.meter__n{display:block;font-size:10.5px;line-height:1.2;color:var(--warn);white-space:nowrap;overflow:hidden}