:root {
  --bg: #0f0f10; --panel: #19191b; --text: #e8e6df; --muted: #8d8b84;
  --p: #378ADD; --h: #EF9F27; --f: #7F77DD; --s: #888780; --danger: #E24B4A; --neon: #62ff8e;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden;
  user-select: none; -webkit-user-select: none; }
body { display: flex; flex-direction: column; min-height: 100dvh; }

#hud { padding: 14px 16px 6px; }
#jobText { font-size: 18px; font-weight: 600; min-height: 24px; }
#jobMeta { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-top: 4px; }
#jobBar { height: 6px; background: #2a2a2d; border-radius: 3px; margin-top: 6px; overflow: hidden; }
#jobBarFill { height: 100%; background: var(--text); width: 100%; transition: width .3s linear; }
#jobBarFill.low { background: var(--danger); }
#msg { font-size: 13px; color: var(--muted); min-height: 18px; margin-top: 6px; }
#msg.good { color: #5DCAA5; }
#msg.bad { color: var(--danger); }

#boardWrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
#board { width: min(100vw, 46dvh); height: min(100vw, 46dvh); touch-action: none; display: block; }
#breath { transform-box: view-box; transform-origin: center; transition: transform .45s ease-in-out; }
#pan { transition: transform .6s ease-in-out; }

.cell .base { fill: #1e1e21; stroke: #303036; stroke-width: 1; }
.band.p { fill: var(--p); } .band.h { fill: var(--h); } .band.f { fill: var(--f); }
.band { transition: y .25s linear, height .25s linear; }
.capline { stroke: #fff; stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 3 3; }
.scale { fill: none; stroke: var(--s); stroke-opacity: .95; }
.outline { fill: none; stroke: var(--neon); stroke-opacity: 0; stroke-width: 3; }
.halo { fill: none; stroke: var(--neon); stroke-opacity: 0; stroke-width: 10; }
.cell.job .base { fill: #24242a; }
.cell.job .outline { stroke-opacity: 1; filter: url(#glow); animation: pulse .9s ease-in-out infinite; }
.cell.job .halo { stroke-opacity: .6; filter: url(#glow2); animation: halo .9s ease-in-out infinite; }
.cell.job .need { fill: var(--neon); }
@keyframes pulse { 50% { stroke-opacity: .55; stroke-width: 5.5; } }
@keyframes halo { 50% { stroke-opacity: .2; } }
.cell.hot .base { stroke: var(--danger); stroke-width: 3; }
.cell.hot .outline { stroke: var(--danger); stroke-opacity: 1; filter: url(#glow); animation: none; }
.cell.hot .halo { stroke: var(--danger); stroke-opacity: .5; filter: url(#glow2); animation: none; }
.crack { fill: none; stroke: #4a4a50; stroke-width: 2.5; display: none; stroke-linecap: round; }
.cell.dead .crack { display: block; }
.cell.dead .base { fill: #09090a; stroke: #222; }
.cell.dead .band, .cell.dead .capline, .cell.dead .scale { display: none; }
.convlabel { font-size: 12px; font-weight: 700; paint-order: stroke; stroke: #000; stroke-width: 3px; stroke-linejoin: round; }
.need { font-size: 15px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 3.5px; stroke-linejoin: round; }
.load { font-size: 11px; fill: #fff; fill-opacity: .85; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.cell.born { animation: born .5s cubic-bezier(.2, .9, .3, 1.25); transform-box: fill-box; transform-origin: center; }
@keyframes born { from { transform: scale(0); } }
.cell.pinned .base { stroke: #fff; stroke-width: 3; }

.valve .gate { stroke: #62626a; stroke-width: 4; stroke-linecap: round; }
.valve.open .gate { stroke: #3a3a40; stroke-width: 2; }
.valve .flow { display: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 5; animation: flow .5s linear infinite; }
.valve.open .flow { display: block; }
@keyframes flow { to { stroke-dashoffset: -9; } }
.valve .hit { fill: none; pointer-events: all; cursor: pointer; }
.valve.dead .hit { pointer-events: none; }
.valve.dead .gate { stroke: #26262a; }

#stats { display: flex; justify-content: space-around; padding: 8px 12px 4px; color: var(--muted); font-size: 13px; }
#stats b { color: var(--text); }
#stStrikes i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-left: 4px; }
#stStrikes i.on { background: var(--danger); }
#legend { display: flex; justify-content: center; gap: 14px; padding: 2px 0 14px; font-size: 12px; color: var(--muted); }
#legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
#legend .p::before { background: var(--p); } #legend .h::before { background: var(--h); }
#legend .f::before { background: var(--f); } #legend .s::before { background: var(--s); }

#overlay, #gameover { position: fixed; inset: 0; background: rgba(10, 10, 12, .88); display: none;
  align-items: center; justify-content: center; padding: 20px; }
#overlay.show, #gameover.show { display: flex; }
.card { background: var(--panel); border-radius: 16px; padding: 22px; max-width: 360px; width: 100%; line-height: 1.45; }
.card h1 { margin: 0 0 10px; font-size: 26px; }
.card p { margin: 8px 0; color: #cfcdc5; font-size: 15px; }
button { margin-top: 14px; width: 100%; padding: 14px; font-size: 17px; border: 0; border-radius: 12px;
  background: var(--text); color: #111; font-weight: 600; cursor: pointer; }

#coach { flex: none; margin: 4px 12px 0; padding: 12px 14px; min-height: 96px; background: var(--panel); border: 1px solid #2a2a2e; border-radius: 14px; }
#coachTitle { font-size: 17px; font-weight: 700; color: var(--neon); margin-bottom: 4px; min-height: 22px; }
#coachBody { font-size: 15px; line-height: 1.4; color: #d8d6cf; }
#coach.warn #coachTitle { color: var(--danger); }