/* XP remains at the left; the Pocket follows the centered level card. */
#playHeader,#playHeader[data-tight=true]{grid-template-columns:max-content var(--header-lead,0px) max-content max-content max-content minmax(0,1fr);column-gap:8px;align-items:end;overflow:visible;white-space:normal}
#arena #playHeader>.deaths-hud{grid-column:1;grid-row:1;justify-self:start;display:flex;flex-direction:column;justify-content:space-between;min-height:110.5px;zoom:.8}
#arena #playHeader>.deaths-hud,#arena #playHeader>.power-pocket-panel,#arena #playHeader>.hud{align-self:end}
#arena #playHeader>.power-pocket-panel{grid-column:4;grid-row:1;justify-self:start}
#arena #playHeader>.hud{grid-column:3;grid-row:1;box-sizing:border-box;display:grid;grid-template-columns:minmax(135px,1fr) max-content;width:max-content;min-width:300px;max-width:640px;height:var(--header-card-height,88.4px);gap:6px 18px;padding:8px 16px;align-items:center;white-space:nowrap}
#arena #playHeader .hud>.hud-clocks{display:flex;align-items:center;gap:9px;flex:none;min-width:0}
#arena #playHeader .hud h1{margin-bottom:4px}
#arena #playHeader .hud .level{line-height:1.1}
#arena #playHeader .hud .difficulty-label{margin-top:4px;line-height:1.2}
#arena #playHeader .hud .clock{width:50px;height:50px;flex:0 0 50px}
#tokenCounterValue{font-size:18px;font-variant-numeric:tabular-nums}
#tokenCounterArc{stroke:var(--text,#202a25);stroke-linecap:round;stroke-dasharray:169.646;stroke-dashoffset:0}
#arena #playHeader .hud .zone-allowance{display:block;position:relative;inset:auto;width:50px;flex:0 0 50px;border:0;padding:0;background:none;min-width:0;margin:0}
#arena #playHeader .hud .zone-allowance[hidden],#arena #playHeader .hud .clock[hidden]{display:none}
#arena #playHeader .hud .zone-allowance .allowance-clock{width:50px;height:50px;flex:0 0 50px}
#arena #playHeader .allowance-clock #zoneAllowanceRemaining{font-size:16px}
#arena #playHeader .allowance-clock .clock-unit{font-size:7px}
#arena #playHeader .zone-allowance>span,#arena #playHeader .zone-allowance>strong,#arena #playHeader .zone-allowance>small{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#arena #playHeader .hud-extras{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
#arena #playHeader .hud-extras:has(>#activePowerTimers[hidden]):has(>#powerPocket[hidden]){display:none}
#arena #playHeader .hud-extras .power-pocket{width:auto;flex:none;margin:0;padding:0;border:0;gap:4px}
#arena #playHeader .hud-extras .power-slot{width:27px;height:30px;min-width:27px;padding:3px;border-radius:6px}
#arena #playHeader .hud-extras .power-slot svg{width:18px;height:18px}
#arena #playHeader .hud-extras .power-slot kbd{font-size:7px}
#activePowerTimers{display:flex;align-items:center;gap:6px}
#activePowerTimers[hidden]{display:none}
.active-power-timer{display:grid;grid-template-columns:25px max-content;align-items:center;gap:4px;border:1px solid var(--edge,#dce4de);border-radius:8px;padding:3px 5px;background:linear-gradient(to right,var(--subtle-surface,#edf4f0) calc(var(--power-left,1)*100%),transparent 0);font-variant-numeric:tabular-nums}
.active-power-timer[hidden]{display:none}
.active-power-timer canvas{display:block;width:25px!important;height:23px!important;object-fit:contain}
.active-power-timer>span{display:grid;gap:1px}
.active-power-timer small{font-size:8px;color:var(--muted,#667b6d)}
.active-power-timer strong{font-size:10px;font-weight:600;white-space:pre-line;line-height:11px}
body[data-theme=dark] .active-power-timer{--subtle-surface:#263b31}
.timer-step-editor{margin-top:12px}.timer-step-list{display:grid;gap:9px;margin:10px 0}.timer-step-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;border:1px solid var(--edge,#dce4de);border-radius:9px}.timer-step-row>label{display:grid;gap:4px;font-size:10px;min-width:0}.timer-step-row input{box-sizing:border-box;min-width:0;width:100%;padding:5px;border:1px solid var(--edge,#dce4de);border-radius:5px;background:var(--surface,#fff);color:var(--text,#263e2f)}.timer-step-row input[type=color]{height:28px;padding:2px}.timer-step-row .parameter-with-bulk{min-width:0;flex-wrap:wrap}.timer-step-row .parameter-restores{font-size:8px}.timer-step-row>.quiet{align-self:end;min-height:26px;padding:4px 6px;font-size:10px}
@media(max-width:1450px){#arena #playHeader .hud .zone-allowance{width:46px;flex-basis:46px}#arena #playHeader>.hud{gap:6px 12px;padding:8px 13px;min-width:285px}#arena #playHeader .hud>.hud-clocks{gap:7px}#arena #playHeader .hud .clock,#arena #playHeader .hud .zone-allowance .allowance-clock{width:46px;height:46px;flex-basis:46px}.active-power-timer{grid-template-columns:18px max-content;gap:2px;padding:2px}.active-power-timer canvas{width:18px!important;height:17px!important}#activePowerTimers{gap:4px}#arena #playHeader .hud-extras:has(>#powerPocket:not([hidden])) .active-power-timer small{display:none}#arena #playHeader .hud-extras .power-slot{width:24px;min-width:24px}#arena #playHeader .hud-extras .power-pocket{gap:3px}#arena #playHeader .clock-unit{font-size:7px}}

/* Three fixed, labeled timer positions keep counters separate from the save pill. */
#arena #playHeader .hud>.hud-clocks{align-self:end;align-items:flex-end;gap:6px}
#arena #playHeader .counter-slot{display:flex;flex:0 0 44px;width:44px;min-width:44px;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px}
#arena #playHeader .counter-slot>.clock,#arena #playHeader .counter-slot>.zone-allowance,#arena #playHeader .counter-slot>.zone-allowance>.allowance-clock{box-sizing:border-box;width:40px;height:40px;flex:0 0 40px}
#arena #playHeader .counter-slot .counter-placeholder{box-sizing:border-box;display:grid;width:40px;height:40px;flex:none;place-items:center;border:1px solid var(--edge,#dce4de);border-radius:50%;color:var(--muted,#667b6d);font-size:13px}
#arena #playHeader .counter-slot .counter-placeholder[hidden]{display:none!important}
#arena #playHeader .counter-slot-title{font-size:8px;line-height:9px;color:var(--muted,#667b6d);white-space:nowrap}
#arena #playHeader .counter-slot .clock-unit{display:none}
#arena #playHeader .counter-slot #remaining,#arena #playHeader .counter-slot #tokenCounterValue{font-size:14.4px}
#arena #playHeader .counter-slot .allowance-clock #zoneAllowanceRemaining{font-size:12.8px}

#arena #playHeader>.game-fullscreen-button{grid-column:5;grid-row:1;align-self:end}
#arena #playHeader>.power-pocket-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:15.3px 45.9px minmax(18px,1fr);gap:1px;height:var(--header-card-height,88.4px);padding:2.6px 9px;align-self:end}
#arena #playHeader .power-pocket,#arena #playHeader .power-slot{height:45.9px}
#arena #playHeader .power-slot-icon{width:35.7px;height:35.7px}
#arena #playHeader .power-slot-icon canvas{width:30.6px!important;height:27.2px!important}
#arena #playHeader .power-slot-icon svg{width:23.8px;height:23.8px}
#arena #playHeader .power-slot kbd{font-size:8px;line-height:9px}
#arena #playHeader .power-slot-icon small{bottom:3px;line-height:11px}
#arena #playHeader .power-pocket-heading{line-height:13px}
#arena #playHeader #powerPocketStatus{font-size:7.8px;line-height:9px}
#arena #playHeader .power-pocket-footer{grid-column:1/-1;grid-row:3;align-self:stretch;justify-content:space-between;align-items:end;gap:5px;line-height:10px}
#arena #playHeader .power-pocket-footer .level-power-properties{flex:none;display:flex;flex-direction:column;gap:0;width:auto;min-width:104px;height:18px;min-height:18px;padding:0 6px;overflow:visible;font-size:8.5px;line-height:8px;white-space:nowrap;border-radius:6px}
#arena #playHeader .power-pocket-footer .level-power-properties>span{display:block}
#arena #playHeader .power-pocket-footer .level-power-properties>small{font-size:7.5px;line-height:7.5px}
body:not([data-game-fullscreen=true]) #arena #playHeader>.power-pocket-panel{padding:2.9px 10px}
body:not([data-game-fullscreen=true]) #arena #playHeader>.power-pocket-panel>.level-power-properties{font-size:8px}
#arena #playHeader[data-compact=true]>.deaths-hud{width:210px!important;zoom:.8}
#arena #playHeader[data-compact=true] .death-theme-row>.death-count{font-size:10px;gap:4px;padding:4px 6px;min-height:29.75px}
#arena #playHeader[data-compact=true] .death-count svg{width:18px;height:18px}
#arena #playHeader[data-compact=true] #lifeCounterLabel{font-size:0}
#arena #playHeader[data-compact=true] #lifeCounterLabel:after{content:':';font-size:12px}
#arena #playHeader[data-compact=true] .death-counter-label{font-size:0}
#arena #playHeader[data-compact=true] .death-counter-label:after{content:':';font-size:12px}
#arena #playHeader[data-compact=true] .run-actions{margin-top:4.25px;gap:5px}
#arena #playHeader[data-compact=true] .run-actions>.quiet{min-height:22.1px;padding:2px 7px;font-size:11px}
#arena #playHeader[data-compact=true]>.hud{grid-template-columns:minmax(112px,1fr) max-content;min-width:250px;gap:5px 9px;padding:7px 10px}
#arena #playHeader[data-compact=true] .hud>.hud-clocks{gap:5px}
#arena #playHeader[data-compact=true] .hud .clock,#arena #playHeader[data-compact=true] .hud .zone-allowance,#arena #playHeader[data-compact=true] .hud .zone-allowance .allowance-clock{width:40px;height:40px;flex-basis:40px}
#arena #playHeader[data-compact=true] .hud .level{font-size:20px}
#arena #playHeader[data-compact=true] .hud h1{font-size:8px}
#arena #playHeader[data-compact=true] .hud .difficulty-label{font-size:8px;margin-top:4px}
#arena #playHeader[data-compact=true]>.power-pocket-panel{width:234px;min-width:234px;padding-inline:8px}

/* Shorten the counter column without compressing text or changing its width. */
#playHeader{min-height:88.4px}
body:not([data-game-fullscreen=true]) #arena #playHeader .experience-hud{padding-bottom:5px}
body:not([data-game-fullscreen=true]) #arena #playHeader .experience-level{width:29px;height:29px;font-size:14px}
body:not([data-game-fullscreen=true]) #arena #playHeader .notebook-button{width:29px;height:29px;justify-self:end;padding:4.5px}
body:not([data-game-fullscreen=true]) #arena #playHeader .notebook-button svg{width:18px;height:18px}
body:not([data-game-fullscreen=true]) #arena #playHeader:not([data-compact=true]) .death-theme-row>.death-count{min-height:36.55px;padding:5px 9px}
body:not([data-game-fullscreen=true]) #arena #playHeader:not([data-compact=true]) .run-actions{margin-top:6.8px}
body:not([data-game-fullscreen=true]) #arena #playHeader:not([data-compact=true]) .run-actions>.quiet{min-height:28.9px;padding:5px 14px}

/* Only wrap once the compact row truly cannot fit. XP always stays left. */
#arena #playHeader[data-stacked=true]{grid-template-columns:max-content minmax(0,1fr) max-content max-content;row-gap:7px}
#arena #playHeader[data-stacked=true]>.deaths-hud{grid-column:1/3;grid-row:1;justify-self:start}
#arena #playHeader[data-stacked=true]>.hud{grid-column:1/3;grid-row:2;justify-self:end}
#arena #playHeader[data-stacked=true]>.power-pocket-panel{grid-column:3;grid-row:2}
#arena #playHeader[data-stacked=true]>.game-fullscreen-button{grid-column:4;grid-row:2}
#arena #playHeader[data-stacked=true][data-split=true]{grid-template-columns:max-content minmax(0,1fr) max-content}
#arena #playHeader[data-stacked=true][data-split=true]>.hud{grid-column:1/3;grid-row:2;justify-self:end}
#arena #playHeader[data-stacked=true][data-split=true]>.power-pocket-panel{grid-column:3;grid-row:2}
#arena #playHeader[data-stacked=true][data-split=true]>.game-fullscreen-button{grid-column:3;grid-row:1}
#arena #playHeader[data-stacked=true][data-tiny=true]{grid-template-columns:max-content minmax(0,1fr) max-content}
#arena #playHeader[data-stacked=true][data-tiny=true]>.hud{grid-column:1/3;grid-row:2;justify-self:start}
#arena #playHeader[data-stacked=true][data-tiny=true]>.power-pocket-panel{grid-column:1/3;grid-row:3}
#arena #playHeader[data-stacked=true][data-tiny=true]>.game-fullscreen-button{grid-column:3;grid-row:2}