/* Functional colours stay in the game. The surrounding interface stays monochrome. */
#game-shell:not([data-phase=menu]) .topbar{display:none}
.status-strip{position:absolute;top:0;left:0;right:0;padding:calc(4px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));background:#080808f5;border-bottom:1px solid #ffffff29}
.vitals{height:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 44px;align-items:center;gap:18px}
.vitals .meter-block{min-width:0}
.vitals .meter-block>div:first-child{display:flex;align-items:center;font-size:.75rem;letter-spacing:.03em;gap:6px;margin-bottom:5px;color:#bdbdbd;white-space:nowrap}
.vitals .meter-block strong{margin-left:auto;font:500 1rem/1 var(--sans);letter-spacing:0;font-variant-numeric:tabular-nums;color:#fff}
.vitals .meter-block svg{width:12px;height:12px;stroke:var(--blue);fill:none;stroke-width:1.5}
.vitals .bar{height:3px;background:#ffffff29}
.hit-track{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;height:3px}
.hit-track>i{background:#ffffff2e;transition:background .15s}
.hit-track>i.spent{background:var(--danger)}
.vitals .ink-meter.critical strong{color:#efc387}
.vitals .infection-meter.critical strong{color:var(--danger)}
#pause-button{pointer-events:auto;justify-self:end;border:0;background:transparent}
#pause-button:hover{background:#ffffff15}
.score-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:31px;margin-top:1px}
.score-readout{display:flex;gap:9px;align-items:center;min-width:0}
.score-readout>span:first-child{font-size:.75rem;letter-spacing:.06em;color:#aaa}
.score-readout>strong{font:500 clamp(20px,5.6vw,28px)/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.score-readout>strong.long-score{font-size:clamp(16px,4.2vw,23px)}
.flow-chip{display:grid;place-items:center;min-width:28px;height:23px;padding:0 5px;font:500 .75rem/1 var(--sans);color:#ddd;border:1px solid #ffffff38;background:#ffffff06}
.flow-chip.hot{color:var(--green);border-color:#bde39a66}
.flow-chip.overdrive{color:#ffdb80;border-color:#ffc653;background:#ffc65322}
.ink-meter.magnetized svg{stroke:#dfa4ff}.ink-meter.magnetized .bar{outline:1px solid #d89eff80;outline-offset:2px}
.pace-panel{width:42%;max-width:230px;flex-shrink:0}
.pace-panel>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:.75rem;white-space:nowrap;font-variant-numeric:tabular-nums}
#pace-label{color:#eee}
#target-label{color:#999}
.pace-track{height:2px;background:#ffffff24;margin-top:6px;overflow:hidden}
.pace-track>i{display:block;width:0;height:100%;background:#fff;transition:width .15s linear}
.pace-panel.boost #pace-label{color:var(--purple)}
.pace-panel.boost .pace-track>i{background:var(--purple)}
.ability-dock{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));display:flex;align-items:end;gap:10px;pointer-events:none}
.ability-button{--ability-color:var(--green);--charge:0;width:76px;min-height:94px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:auto;touch-action:manipulation;border-radius:3px;border:1px solid #ffffff40;background:#080808dd;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:white;transition:background .15s,border-color .15s}
.ability-orbit{width:30px;height:30px;border-radius:50%;position:relative;display:grid;place-items:center;color:var(--ability-color);background:conic-gradient(var(--ability-color) calc(var(--charge,0) * 1%),#ffffff26 0)}
.ability-orbit:before{content:'';position:absolute;inset:2px;border-radius:50%;background:#101010}
.ability-orbit svg{width:17px;height:17px;position:relative;z-index:1}
.ability-name{font-size:.75rem;font-weight:500;letter-spacing:.05em;line-height:1.2}
.ability-button>small{font-size:.75rem;line-height:1.2;color:#bdbdbd;font-variant-numeric:tabular-nums}
.focus-button{--ability-color:#83dce9}
.ability-button:disabled{opacity:.65;cursor:default}
.ability-button:enabled:hover{background:#1c1c1cec;border-color:var(--ability-color)}
.ability-button.ready,.ability-button.active{border-color:var(--ability-color)}
.ability-button.active{background:#111c12ed;opacity:1}
.focus-button.active{background:#0c1a21ed}
.ability-button:enabled:active{transform:scale(.96)}
[data-focus=true] .status-strip{border-bottom-color:#83dce980}
[data-focus=true] .pace-track>i{background:var(--blue)}
.run-toast{top:calc(99px + env(safe-area-inset-top));bottom:auto;left:50%;width:max-content;max-width:calc(100% - 32px);font-size:.875rem;line-height:1.45;padding:10px 15px;border:1px solid #ffffff38;background:#080808ee;color:white;transform:translate(-50%,-4px)}
.run-toast.visible{transform:translate(-50%,0)}
@media(min-width:850px){.status-strip{padding-right:max(28px,env(safe-area-inset-right));padding-left:max(28px,env(safe-area-inset-left));display:grid;grid-template-columns:minmax(320px,1fr) minmax(280px,1fr);gap:40px;padding-bottom:5px}.vitals{order:2}.score-row{order:1;margin:0}.pace-panel{width:44%}.run-toast{top:calc(68px + env(safe-area-inset-top))}.ability-dock{right:28px;bottom:28px;gap:12px}}
@media(max-width:430px){.score-readout>span:first-child{display:none}.pace-panel{width:47%}.vitals{gap:12px}}
@media(max-width:380px){.vitals{gap:10px}.vitals .meter-block svg{display:none}.score-readout{gap:6px}.pace-panel>div:first-child{gap:4px;letter-spacing:-.035em}.ability-button{width:72px}}
@media(max-height:500px) and (max-width:849px){.status-strip{display:flex;align-items:center;gap:20px;padding-bottom:4px}.vitals{order:2;flex:1.1;gap:12px}.score-row{order:1;flex:1}.score-readout>span:first-child{display:none}.pace-panel{width:44%}.run-toast{top:calc(64px + env(safe-area-inset-top))}.ability-dock{bottom:calc(12px + env(safe-area-inset-bottom))}.ability-button{min-height:78px;padding:7px 5px;gap:4px}}
@media(prefers-reduced-motion:reduce){.ability-button:enabled:active{transform:none}}