/* ERCMart — capa de interfaz «Póster de supermercado». Se carga DESPUÉS de style.css y workshop.css.
   Solo presentación: ids, mecánicas y game.js intactos. Prefijo `html body` para ganar a las capas previas.
   Logo: coloca assets/ercmart-logo.svg, define --ercmart-logo y añade data-logo en <body>. */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Archivo:wght@400;600;700&display=swap");
:root{--p-ink:#1b1a17;--p-ink-2:#4a4741;--p-ink-3:#7a766d;--p-paper:#fbf6ea;--p-paper-2:#f3ebd8;--p-orange:#f26b1d;--p-orange-deep:#c9500f;--p-blue:#0f5cad;--p-blue-deep:#0a4280;--p-blue-soft:#e3edf8;--p-line:#1b1a17;--p-shadow:4px 4px 0 var(--p-ink);--p-display:"Oswald","Arial Narrow",Impact,sans-serif;--p-text:"Archivo","Helvetica Neue",Arial,sans-serif;--ercmart-logo:none}
html body,html body button,html body .dialog p,html body #combatHud,html body #researchBar,html body #toast{font-family:var(--p-text)}
html body{color:var(--p-ink)}
html body button{min-height:44px;padding:10px 16px;font-family:var(--p-display);font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--p-ink);background:var(--p-paper);border:2px solid var(--p-ink);border-radius:6px;box-shadow:var(--p-shadow);transition:transform .08s,box-shadow .08s,background .12s}
html body button:hover{background:#fff;border-color:var(--p-ink);box-shadow:var(--p-shadow)}
html body button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--p-ink)}
html body button:focus-visible{outline:3px solid var(--p-blue);outline-offset:3px}
html body button:disabled{opacity:.5;background:var(--p-paper-2);box-shadow:none;color:var(--p-ink-3)}
html body #quickFull,html body #zoomControls,html body .arena-top,html body .arena-bottom,html body #time,html body #activeClass{display:none!important}

/* ─── Cabecera ─── */
html body>header{top:16px;left:20px;right:20px;height:48px;gap:10px}
html body header .brand-line{height:48px;padding:0 16px;align-items:center;gap:10px;font-family:var(--p-display);font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--p-orange);border:2px solid var(--p-ink);border-radius:6px;box-shadow:var(--p-shadow);transform:rotate(-1.5deg);text-shadow:none;background-image:var(--ercmart-logo);background-repeat:no-repeat;background-position:center;background-size:auto 28px}
html body header .brand{font-family:var(--p-display);font-size:22px;font-weight:700;letter-spacing:1px;color:#fff;text-transform:uppercase;text-shadow:none}
html body header .brand-line>span{color:#ffffff88;font-weight:400}
html body header .brand-piloko{color:#fff;font-weight:700}
html body[data-logo] header .brand-line{min-width:160px}
html body[data-logo] header .brand-line>*{opacity:0}
html body header button,html body header #pause{min-width:48px;height:48px;padding:0 14px;font-size:20px;background:var(--p-ink);color:var(--p-paper);border-color:var(--p-ink);box-shadow:4px 4px 0 var(--p-blue);border-radius:50%;flex:none;white-space:nowrap}
html body header #pause span{display:none}
html body header #pause:hover{background:#2b2924}
html body[data-state="menu"] header #pause,html body[data-state="shop"] header #pause{display:none}

/* ─── Recepción: informe de Fer ─── */
html body[data-state="menu"] .overlay{padding:80px 4vw 24px;align-items:center;justify-content:flex-end}
html body[data-state="menu"] .dialog,html body .dialog{width:460px;max-width:44vw;padding:28px 28px 22px;border-radius:8px;background:var(--p-paper);border:2px solid var(--p-ink);box-shadow:8px 8px 0 var(--p-ink);text-align:left;color:var(--p-ink)}
html body #ferBriefing{gap:10px;margin-bottom:18px;font-size:12px;color:var(--p-ink-3)}
html body #ferBriefing>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body #ferBriefing strong{font-family:var(--p-display);font-size:18px;font-weight:700;color:var(--p-ink);text-transform:uppercase;letter-spacing:.5px}
html body .fer-dot{width:12px;height:12px;background:var(--p-orange);border:2px solid var(--p-ink);box-shadow:none;margin-right:2px}
html body .dialog .eyebrow{display:inline-block;padding:4px 10px;font-family:var(--p-display);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--p-paper);background:var(--p-orange);border-radius:3px;transform:rotate(-1deg)}
html body .dialog h2{font-family:var(--p-display);font-size:44px;line-height:.98;letter-spacing:-.5px;font-weight:700;text-transform:uppercase;color:var(--p-ink);margin:16px 0 12px}
html body[data-state="menu"] .dialog h2{font-size:50px;margin:16px 0 12px}
html body .dialog p{font-size:14px;line-height:1.6;color:var(--p-ink-2);margin:0 0 6px}
html body #lobbyBalance{display:flex;align-items:center;gap:10px;margin:18px 0 10px;padding:12px 0;border-block:2px dashed var(--p-ink);font-family:var(--p-display);font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--p-ink)}
html body #lobbyBalance::before{content:"";width:14px;height:14px;background:var(--p-blue);border:2px solid var(--p-ink);border-radius:3px;transform:rotate(45deg) scale(.8)}
html body #levelPicker{margin-top:6px}
html body #levelPicker button{min-height:56px;padding:12px 16px;font-size:16px;justify-content:space-between;background:var(--p-blue-soft);box-shadow:var(--p-shadow)}
html body #levelPicker small{font-family:var(--p-text);font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--p-ink-2);margin:0;text-transform:uppercase}
html body #levelPicker .selected,html body #legacyWorlds .selected{color:var(--p-ink)!important;background:var(--p-blue-soft)!important;border-color:var(--p-ink)!important;box-shadow:var(--p-shadow)}
html body #legacyToggle{min-height:36px;padding:10px 2px 2px;font-family:var(--p-text);font-size:12px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--p-ink-3);background:transparent;border:0;box-shadow:none}
html body #legacyToggle:hover{background:transparent}
html body #legacyToggle>span{font-size:16px;line-height:1}
html body #legacyWorlds{gap:8px;padding-top:10px}
html body #legacyWorlds button{min-height:52px;padding:10px 12px;font-size:13px;text-align:left;color:var(--p-ink-2);background:var(--p-paper);box-shadow:2px 2px 0 var(--p-ink)}
html body #legacyWorlds small{font-family:var(--p-text);font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--p-ink-3);margin-top:3px}
html body #start{min-height:56px;margin-top:18px;padding:14px 18px;font-size:18px;letter-spacing:1.5px;background:var(--p-orange);border-color:var(--p-ink);color:#fff;box-shadow:var(--p-shadow)}
html body #start:hover{background:var(--p-orange-deep)}
html body #start span{float:none;margin-left:6px}
html body #shopButton,html body #checkoutButton{min-height:48px;margin-top:12px;padding:12px;font-size:13px;color:var(--p-ink);background:var(--p-paper)}
html body #pauseTools>summary{min-height:40px;display:flex;align-items:center;gap:8px;margin-top:16px;padding:12px 0;font-family:var(--p-display);font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--p-ink-2);border-top:2px dashed var(--p-ink);list-style:none}
html body #pauseTools>summary::-webkit-details-marker{display:none}
html body #pauseTools>summary::before{content:"";width:0;height:0;border-left:7px solid currentColor;border-block:5px solid transparent;transition:transform .2s}
html body #pauseTools[open]>summary::before{transform:rotate(90deg)}
html body .dialog>small#hint{display:block;margin-top:14px;font-size:11px;line-height:1.6;color:var(--p-ink-3)}
html body .menu-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
html body .menu-actions button{min-height:48px;font-size:12px;letter-spacing:.8px;padding:8px 10px;line-height:1.25;box-shadow:2px 2px 0 var(--p-ink)}
html body #flicker{grid-column:1/-1;text-align:left;padding-left:14px}
html body .volume-label{margin-top:16px;font-family:var(--p-display);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--p-ink-2)}
html body .volume-label output{font-variant-numeric:tabular-nums;color:var(--p-ink)}
html body #volume,html body #musicVolume,html body #zoom{margin:8px 0 4px;height:28px;accent-color:var(--p-orange)}
html body .pause-note,html body .music-credit{font-size:11px;line-height:1.55;color:var(--p-ink-3);border-color:#d9d0bb}
html body .music-credit a,html body .dialog a{color:var(--p-orange)}
html body #screenNotice{font-size:12px;color:var(--p-orange-deep)}
html body #restart{min-height:44px;font-size:13px;margin:8px 0 14px;box-shadow:2px 2px 0 var(--p-ink)}
html body #buildDetails{font-size:12px;border-color:#d9d0bb}
html body #buildDetails>summary{color:var(--p-ink-2);font-weight:700;font-size:12px}
html body .panel{background:#fff;border:2px solid var(--p-ink);border-radius:6px}
html body .panel .upgrade>b{background:var(--p-blue-soft);color:var(--p-blue);border-radius:4px}
html body .bar{background:#e4dccb}
html body kbd{border:1px solid var(--p-ink);color:var(--p-ink-2);border-radius:3px}

/* ─── En partida: textos flotantes, sin cajas ─── */
html body #toxicHud:empty,html body #buffHud:empty{display:none}
html body #toxicHud{top:76px;right:20px;padding:0;background:transparent;border:0;font-family:var(--p-display);font-size:16px;font-weight:700;color:var(--p-ink);text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 8px #fff}
html body #toast{top:76px;left:50%;right:auto;transform:translateX(-50%);max-width:min(60%,640px);padding:0;background:transparent;border:0;box-shadow:none;font-family:var(--p-display);font-size:18px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--p-orange);text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 10px #fff,0 0 20px #fff}
html body #buffHud{top:180px;left:20px;font-family:var(--p-display);font-size:14px;font-weight:700;color:var(--p-ink);text-shadow:0 0 2px #fff,0 0 8px #fff}
html body #combatHud,html body[data-biome] #combatHud,html body[data-controls="touch"] #combatHud{display:none}
html body[data-state="playing"] #combatHud,html body[data-state="paused"] #combatHud{display:contents}
html body #combatHud .hud-chip,html body #combatHud .hud-research-balance{position:absolute;z-index:2;left:20px;display:inline-flex;align-items:center;gap:8px;height:auto;padding:0;border:0;background:transparent;color:var(--p-ink);font-family:var(--p-display);font-size:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;pointer-events:none;text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 8px #fff}
html body #combatHud .hud-chip b{font-size:22px;font-weight:700;color:var(--p-orange);margin:0;font-variant-numeric:tabular-nums}
html body #combatHud .hud-health+.hud-chip{top:140px;left:20px}
html body[data-state="paused"] .hud-health+.hud-chip{display:none}
html body #combatHud .hud-chip+.hud-chip{display:none}
html body #combatHud .hud-research-balance{top:76px;bottom:auto;left:20px;z-index:6;font-size:0;letter-spacing:0;flex:none;padding:0;border:0}
html body #combatHud .hud-research-balance::before{content:"";width:16px;height:16px;background:var(--p-blue);border:2px solid var(--p-ink);border-radius:3px;transform:rotate(45deg) scale(.85);flex:none}
html body #combatHud .hud-research-balance::after{display:none}
/* Coste del siguiente nivel, junto al saldo */
html body[data-state="playing"] .research-heading{display:flex;position:fixed;z-index:6;left:20px;top:108px;gap:6px;align-items:baseline;padding:0;margin:0;background:transparent;border:0;box-shadow:none;font-family:var(--p-display);font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--p-ink-2);white-space:nowrap;text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 8px #fff}
html body[data-state="playing"] .research-heading::before{content:"Subir nivel ·"}
html body[data-state="playing"] #researchLevel,html body[data-state="playing"] #researchStatus{display:none}
html body[data-state="playing"] #researchCost{color:var(--p-orange);font-size:16px}
html body #hudMoney{font:700 22px/1 var(--p-display);color:var(--p-ink);letter-spacing:.5px;font-variant-numeric:tabular-nums}
html body #packWarning{position:absolute;z-index:2;top:180px;left:20px;padding:4px 10px;border:2px solid var(--p-ink);border-radius:4px;background:var(--p-blue);color:#fff;font-family:var(--p-display);font-size:13px;font-weight:700;letter-spacing:1.5px;box-shadow:2px 2px 0 var(--p-ink);pointer-events:none}
html body #combatHud .hud-research{display:none}
/* Medidores: una tarjeta «ENERGÍA» con las dos barras juntas, centrada abajo. */
html body #combatHud .hud-energy{position:absolute;z-index:6;left:50%;bottom:22px;transform:translateX(-109px);width:440px;height:76px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;gap:6px 12px;padding:0 16px;background:var(--p-paper);border:2px solid var(--p-ink);border-radius:6px;box-shadow:var(--p-shadow);pointer-events:none;color:var(--p-ink)}
html body #combatHud .hud-energy>span{display:contents;margin:0}
html body #combatHud .hud-energy>span>span{grid-column:1;grid-row:1;font-family:var(--p-display);font-size:13px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--p-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #combatHud .hud-energy>span>b{grid-column:2;grid-row:1/3;align-self:center;font-family:var(--p-display);font-size:26px;font-weight:700;color:var(--p-ink);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
html body #combatHud .hud-energy>.bar{grid-column:1;grid-row:2;height:12px;border:2px solid var(--p-ink);border-radius:3px;background:#fff;overflow:hidden;margin-bottom:12px}
html body #hudEnergyBar{display:block;height:100%;background:var(--p-blue);border-radius:0}
html body #combatHud[data-danger="true"] #hudEnergyBar{background:#ff8a3d}
html body #combatHud[data-danger="true"] #energyStatus{color:var(--p-orange)}
html body #combatHud .hud-health{position:absolute;z-index:7;left:50%;bottom:22px;transform:translateX(-109px);width:440px;height:30px;padding:0;display:block;pointer-events:none}
html body #combatHud .hud-health>span{display:none}
html body #combatHud .hud-health>.bar{position:absolute;left:18px;right:calc(18px + 44px + 12px);bottom:12px;height:8px;border:2px solid var(--p-ink);border-top:0;border-radius:0 0 3px 3px;background:#fff;overflow:hidden}
html body #hudHealthBar{display:block;height:100%;background:var(--p-orange);border-radius:0}
/* Mejoras: tres cartas pequeñas, solo icono, a la izquierda de los medidores. */
html body #researchBar,html body[data-state="playing"] #researchBar{position:absolute;z-index:6;bottom:22px;left:calc(50% - 331px);width:212px;transform:none;pointer-events:none}
html body .research-heading,html body .research-help{display:none}
html body #researchChoices{grid-template-columns:repeat(3,64px);gap:10px}
html body .research-choice{display:block;width:64px;height:76px;min-height:0;padding:0;border:2px solid var(--p-ink);border-radius:6px;background:var(--p-paper);box-shadow:var(--p-shadow);overflow:visible;position:relative;color:var(--p-ink);pointer-events:auto}
html body .research-choice:hover{background:#fff;border-color:var(--p-ink);box-shadow:4px 4px 0 var(--p-orange)}
html body .research-choice:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--p-ink)}
html body .research-choice:disabled{background:var(--p-paper-2);opacity:.55;box-shadow:none}
html body .research-art{position:absolute;inset:0;width:100%;height:100%;border-radius:4px;background:transparent;opacity:1;display:grid;place-items:center;overflow:hidden}
html body .research-art svg{width:52px;height:52px;filter:none;opacity:1}
html body .research-index{top:-10px;right:-10px;bottom:auto;width:24px;height:24px;display:grid;place-items:center;padding:0;background:var(--p-orange);color:#fff;border:2px solid var(--p-ink);border-radius:50%;font-family:var(--p-display);font-size:11px;font-weight:700;transform:rotate(8deg)}
html body .research-name,html body .research-description{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* En pausa: tarjetas de oferta con texto. */
html body[data-state="paused"] #researchBar{left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 48px));bottom:124px}
html body[data-state="paused"] .hud-research-balance{display:none!important}
html body[data-state="paused"] #toast{display:none}
html body[data-state="paused"] .research-heading{display:flex;flex-wrap:nowrap;gap:12px;align-items:center;white-space:nowrap;overflow:hidden;padding:0 4px;margin-bottom:10px;background:transparent;border:0;box-shadow:none;font-family:var(--p-display);font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--p-ink);text-shadow:0 0 2px #fff,0 0 8px #fff}
html body[data-state="paused"] #researchLevel{color:var(--p-ink)}
html body[data-state="paused"] #researchCost{color:var(--p-orange);font-size:20px}
html body[data-state="paused"] #researchStatus{margin-left:auto;font-family:var(--p-text);font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--p-ink-2);overflow:hidden;text-overflow:ellipsis}
html body[data-state="paused"] #researchChoices{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
html body[data-state="paused"] .research-choice{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;width:auto;height:auto;min-height:300px;padding:22px 16px 18px;border-radius:6px;background:var(--p-paper);box-shadow:6px 6px 0 var(--p-ink);pointer-events:auto}
html body[data-state="paused"] .research-choice::before{content:"";position:absolute;inset:-2px -2px auto -2px;height:8px;background:repeating-linear-gradient(90deg,var(--p-orange) 0 14px,var(--p-paper) 14px 28px);border:2px solid var(--p-ink);border-radius:6px 6px 0 0}
html body[data-state="paused"] .research-choice:hover{box-shadow:6px 6px 0 var(--p-orange)}
html body[data-state="paused"] .research-art{position:static;width:100%;height:auto;aspect-ratio:1;max-width:150px;border:2px solid var(--p-ink);border-radius:4px;background:var(--p-blue-soft);display:grid;place-items:center}
html body[data-state="paused"] .research-art svg{width:78%;height:78%}
html body[data-state="paused"] .research-name,html body[data-state="paused"] .research-description{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
html body[data-state="paused"] .research-name{font-family:var(--p-display);font-size:20px;line-height:1.1;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--p-ink);padding:4px 0 0;text-wrap:balance}
html body[data-state="paused"] .research-description{font-family:var(--p-text);font-size:12px;font-weight:400;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--p-ink-2);margin:0}
html body[data-state="paused"] .research-index{top:-10px;right:-10px}
html body[data-state="paused"] .overlay{padding:80px 20px 400px;align-items:flex-start;justify-content:flex-end}
html body[data-state="paused"] .dialog{width:400px;max-width:44vw;padding:24px;background:var(--p-paper)}
html body[data-state="paused"] .dialog h2{font-size:36px;margin:12px 0 10px}
html body[data-state="paused"] .dialog>p{font-size:13px}
html body[data-state="paused"] #start{margin-top:14px;min-height:52px;padding:12px;font-size:16px}
html body[data-state="paused"] #checkoutButton{margin-top:10px}

/* ─── Jefe ─── */
html body #bossHud[data-kind="santa_boss"]{border:2px solid var(--p-ink);border-radius:6px;background:var(--p-paper);color:var(--p-ink);box-shadow:var(--p-shadow);font-family:var(--p-text)}
html body #bossHud[data-kind="santa_boss"] .boss-topline{font-size:11px;color:var(--p-ink-2)}
html body #bossHud[data-kind="santa_boss"] #bossName{font-family:var(--p-display);color:var(--p-orange)}
html body #bossHud[data-kind="santa_boss"] #bossCount{font-size:13px;color:var(--p-ink-2)}
html body #bossHud[data-kind="santa_boss"] .bar{background:#fff;border:2px solid var(--p-ink)}
html body .customer-name{padding:3px 8px;border:2px solid var(--p-ink);border-radius:4px;background:var(--p-paper);color:var(--p-ink);font:700 11px/1.2 var(--p-text);box-shadow:2px 2px 0 var(--p-ink)}
html body .customer-name small{font-size:10px;color:var(--p-ink-3);font-weight:600}
html body .customer-name[data-state="fleeing"]{background:var(--p-blue-soft)}
html body .customer-name[data-state="dead"]{background:#e9e2d2;color:var(--p-ink-3);font-size:10px}

/* ─── Táctil: sticks invisibles pero operativos ─── */
html body .arena #touch,html body[data-controls="touch"][data-state="playing"] .arena #touch{opacity:0}
html body #moveStick,html body #moveThumb,html body .stick-cross,html body .stick-label{opacity:0}

/* ─── Móvil ─── */
@media(max-width:760px),(pointer:coarse){
 html body>header{top:calc(10px + env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));height:44px}
 html body header .brand-line{height:44px;padding:0 12px;font-size:11px;gap:7px}
 html body header .brand{font-size:18px}
 html body header button,html body header #pause{min-width:44px;height:44px;padding:0 12px;font-size:18px}
 html body[data-state="menu"] #overlay{padding:0 10px max(12px,env(safe-area-inset-bottom));align-items:flex-end;justify-content:center;background:linear-gradient(transparent 35%,#f3ebd899)}
 html body[data-state="menu"] #overlay .dialog{width:100%;max-width:560px;max-height:min(72dvh,calc(100dvh - 70px - env(safe-area-inset-top)));padding:20px 18px 16px;box-shadow:6px 6px 0 var(--p-ink)}
 html body[data-state="menu"] #overlay .dialog h2{font-size:36px;line-height:1;margin:12px 0 8px}
 html body[data-state="menu"] #ferBriefing{margin-bottom:12px}
 html body[data-state="menu"] .dialog p{font-size:13px;line-height:1.55}
 html body[data-state="menu"] #lobbyBalance{margin:12px 0 8px;padding:10px 0;font-size:14px}
 html body #levelPicker{display:block}
 html body[data-state="menu"][data-biome="winter"] #levelPicker{display:block}
 html body #levelPicker button{min-height:52px;padding:12px 14px;font-size:15px}
 html body #legacyWorlds{grid-template-columns:repeat(2,minmax(0,1fr))}
 html body[data-state="menu"] #start{margin-top:12px;min-height:52px;font-size:16px}
 html body[data-state="menu"] #hint{display:none}
 html body .menu-actions,html body #pauseTools .menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 html body #pauseTools .menu-actions button{font-size:12px;padding:8px}
 html body #toxicHud{top:calc(64px + env(safe-area-inset-top));right:12px;font-size:14px}
 html body #combatHud .hud-health+.hud-chip{top:calc(118px + env(safe-area-inset-top));left:12px;font-size:14px}
 html body #combatHud .hud-chip b{font-size:18px}
 html body #combatHud .hud-research-balance{top:calc(64px + env(safe-area-inset-top));bottom:auto;left:12px;right:auto}
 html body[data-state="playing"] .research-heading{position:fixed;left:12px;top:calc(92px + env(safe-area-inset-top));font-size:11px}
 html body[data-state="playing"] #researchCost{font-size:14px}
 html body #hudMoney{font-size:18px}
 html body #toast{top:calc(152px + env(safe-area-inset-top));left:12px;right:12px;transform:none;max-width:none;text-align:center;font-size:14px}
 html body #packWarning{top:calc(184px + env(safe-area-inset-top));left:12px}
 html body #buffHud{top:calc(184px + env(safe-area-inset-top));left:12px;font-size:12px}
 html body #combatHud .hud-energy,html body #combatHud .hud-health,html body[data-controls="touch"] #combatHud .hud-energy,html body[data-controls="touch"] #combatHud .hud-health{width:min(300px,calc(100vw - 196px));left:auto;right:max(12px,env(safe-area-inset-right));transform:none;padding:0 12px}
 html body #combatHud .hud-energy{height:68px;bottom:calc(14px + env(safe-area-inset-bottom))}
 html body #combatHud .hud-energy>span>span{font-size:11px;letter-spacing:1.2px}
 html body #combatHud .hud-energy>span>b{font-size:20px;min-width:36px}
 html body #combatHud .hud-health{bottom:calc(14px + env(safe-area-inset-bottom))}
 html body #combatHud .hud-health>.bar{left:14px;right:calc(14px + 36px + 12px);bottom:10px;height:7px}
 html body #researchBar,html body[data-state="playing"] #researchBar{left:auto;right:calc(max(12px,env(safe-area-inset-right)) + min(300px,calc(100vw - 196px)) + 8px);width:164px;bottom:calc(14px + env(safe-area-inset-bottom))}
 html body #researchChoices{grid-template-columns:repeat(3,52px);gap:4px}
 html body .research-choice{width:52px;height:68px;box-shadow:2px 2px 0 var(--p-ink)}
 html body .research-art svg{width:40px;height:40px}
 html body .research-index{width:20px;height:20px;font-size:10px;top:-8px;right:-6px}
 html body[data-state="paused"] #overlay{padding:calc(62px + env(safe-area-inset-top)) 12px 380px}
 html body[data-state="paused"] #overlay .dialog{width:100%;max-width:480px;max-height:100%;padding:18px}
 html body[data-state="paused"] .dialog h2{font-size:30px}
 html body[data-state="paused"] #researchBar{left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 24px);bottom:calc(104px + env(safe-area-inset-bottom))}
 html body[data-state="paused"] .research-heading{font-size:13px}
 html body[data-state="paused"] #researchCost{font-size:16px}
 html body[data-state="paused"] #researchChoices{gap:8px}
 html body[data-state="paused"] .research-choice{min-height:220px;gap:6px;padding:14px 8px 12px;width:auto;height:auto;box-shadow:3px 3px 0 var(--p-ink)}
 html body[data-state="paused"] .research-art{max-width:72px}
 html body[data-state="paused"] .research-name{font-size:13px;padding:0}
 html body[data-state="paused"] .research-description{font-size:11px}
 html body .arena #touch{bottom:calc(100px + env(safe-area-inset-bottom))}
}
@media(max-height:600px) and (orientation:landscape){
 html body[data-state="menu"] #overlay{align-items:center;justify-content:flex-end;padding:58px 16px 10px;background:linear-gradient(90deg,transparent 30%,#f3ebd866)}
 html body[data-state="menu"] #overlay .dialog{width:min(460px,46vw);max-width:46vw;max-height:100%;padding:16px 18px}
 html body[data-state="menu"] #overlay .dialog h2{font-size:30px;margin:8px 0 6px}
 html body[data-state="menu"] #ferBriefing{margin-bottom:10px}
 html body #combatHud .hud-energy,html body[data-controls="touch"] #combatHud .hud-energy{height:56px}
 html body #combatHud .hud-health>.bar{bottom:8px;height:6px}
 html body[data-state="playing"] .research-choice{height:56px}
 html body .research-art svg{width:36px;height:36px}
 html body[data-state="paused"] #overlay{padding:58px 16px 100px;justify-content:flex-end}
 html body[data-state="paused"] #overlay .dialog{width:min(400px,46vw);max-width:46vw;padding:14px 16px}
 html body[data-state="paused"] #researchBar{left:16px;right:auto;transform:none;width:calc(100% - 32px - min(400px,46vw) - 16px);bottom:110px}
 html body[data-state="paused"] .research-heading{display:none}
 html body[data-state="paused"] .research-choice{min-height:150px;gap:6px;padding:12px 10px}
 html body[data-state="paused"] .research-art{max-width:56px}
 html body[data-state="paused"] .research-name{font-size:14px;padding:0}
 html body[data-state="paused"] .research-description{font-size:11px}
 html body .arena #touch{bottom:calc(24px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){html body button,html body .research-choice,html body #pauseTools>summary::before{transition:none}}

/* ─── Tienda: robots, componentes y reactores ─── */
html body[data-state="shop"] .overlay{padding:76px 20px 16px;justify-content:flex-end;align-items:stretch;background:linear-gradient(90deg,transparent 30%,#f3ebd866)}
html body[data-state="shop"] .dialog{width:min(480px,46vw);max-width:480px;height:100%;padding:20px 22px;display:flex;flex-direction:column;background:var(--p-paper);border:2px solid var(--p-ink);box-shadow:8px 8px 0 var(--p-ink);border-radius:8px}
html body[data-state="shop"] .dialog h2{font-size:34px;margin:10px 0 6px}
html body[data-state="shop"] .dialog>p{font-size:12px;line-height:1.5;margin:0 0 6px;color:var(--p-ink-2)}
html body[data-state="shop"] #lobbyBalance{font-size:13px;margin:6px 0 8px;padding:10px 0;letter-spacing:.6px}
html body[data-state="shop"] #lobbyBalance::before{background:var(--p-blue)}
html body #workshopTabs{gap:0;margin:8px 0 10px;border:2px solid var(--p-ink);border-radius:6px;overflow:hidden;box-shadow:var(--p-shadow);background:var(--p-paper)}
html body #workshopTabs button{flex:1;min-height:44px;padding:8px 6px;font-size:13px;letter-spacing:1px;border:0;border-radius:0;box-shadow:none;background:transparent;color:var(--p-ink-2)}
html body #workshopTabs button+button{border-left:2px solid var(--p-ink)}
html body #workshopTabs button:hover{background:#fff}
html body #workshopTabs [aria-selected="true"],html body #workshopTabs .selected{background:var(--p-blue)!important;color:#fff!important;border-color:var(--p-ink)!important;box-shadow:none}
html body #workshopSelectors{gap:6px;margin-bottom:10px}
html body #workshopSelectors button{flex:1;min-width:0;min-height:48px;padding:4px;border-radius:6px;box-shadow:2px 2px 0 var(--p-ink);background:#fff}
html body #workshopSelectors button.selected{background:var(--p-blue-soft)!important;color:var(--p-blue)!important;border-color:var(--p-ink)!important;box-shadow:2px 2px 0 var(--p-blue)}
html body #workshopSelectors svg{height:34px}
html body #workshopItem{position:relative;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;text-align:left;padding:18px 16px 16px;background:#fff;border:2px solid var(--p-ink);border-radius:6px;box-shadow:var(--p-shadow)}
html body #workshopItem::before{content:"";position:absolute;inset:-2px -2px auto -2px;height:8px;background:repeating-linear-gradient(90deg,var(--p-orange) 0 14px,#fff 14px 28px);border:2px solid var(--p-ink);border-radius:6px 6px 0 0}
html body .workshop-art{flex:0 1 auto;min-height:48px;max-height:170px;background:var(--p-blue-soft);border:2px solid var(--p-ink);border-radius:4px;display:grid;place-items:center;margin-top:4px}
html body .workshop-art svg{max-height:150px;filter:none;opacity:1}
html body .workshop-kicker{display:inline-block;align-self:flex-start;margin:12px 0 0;padding:3px 8px;font-family:var(--p-display);font-size:11px;font-weight:700;letter-spacing:1.6px;color:#fff;background:var(--p-blue);border-radius:3px}
html body #workshopItem h3{font-family:var(--p-display);font-size:24px;line-height:1.05;text-transform:uppercase;color:var(--p-ink);margin:8px 0 6px}
html body #workshopItem p{font-size:13px;line-height:1.5;color:var(--p-ink-2);margin:0 0 8px}
html body #workshopItem small{font-size:11px;line-height:1.4;color:var(--p-ink-3);margin-top:auto;flex:none}
html body #workshopItem>button{flex:none}
html body #workshopItem>button{min-height:52px;margin-top:12px;padding:12px;font-size:16px;letter-spacing:1.2px;background:var(--p-orange);border-color:var(--p-ink);color:#fff;box-shadow:var(--p-shadow)}
html body #workshopItem>button:hover{background:var(--p-orange-deep)}
html body #workshopItem>button:disabled{background:var(--p-paper-2);color:var(--p-ink-3);box-shadow:none}
html body #workshopPager{gap:12px;margin-top:10px;font-family:var(--p-display);font-size:13px;letter-spacing:1px}
html body #workshopPager button{min-height:40px;padding:4px 16px;box-shadow:2px 2px 0 var(--p-ink)}
html body #workshopExtra button{width:100%;min-height:48px;margin-top:8px;padding:10px;font-size:13px;color:var(--p-blue);background:var(--p-blue-soft);box-shadow:2px 2px 0 var(--p-ink)}
html body #shopStatus{min-height:20px;margin:8px 0!important;font-size:12px!important;font-weight:700;line-height:1.3!important;color:var(--p-orange-deep)}
html body #shopBack{min-height:44px;padding:10px;font-size:13px;box-shadow:2px 2px 0 var(--p-ink)}
html body[data-state="shop"] #robotMounts:not([hidden]){left:20px;bottom:24px;width:240px;height:300px;background:var(--p-paper);border:2px solid var(--p-ink);border-radius:8px;box-shadow:var(--p-shadow);color:var(--p-ink)}
html body .mount-title{font-family:var(--p-display);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;padding:12px;color:var(--p-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .mount-point{width:38px;height:38px;border:2px solid var(--p-ink);border-radius:6px;background:#fff;box-shadow:2px 2px 0 var(--p-ink);padding:3px;min-height:0}
html body .mount-point.selected{background:var(--p-blue-soft)!important;box-shadow:2px 2px 0 var(--p-blue)}
html body .mount-point span{right:-7px;bottom:-7px;background:var(--p-orange);color:#fff;border:2px solid var(--p-ink);border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-family:var(--p-display);font-size:10px;font-weight:700;padding:0}
html body .mount-chassis svg{filter:none;opacity:1}
html body #robotMounts>small{font-size:11px;color:var(--p-ink-3)}
@media(max-width:760px),(pointer:coarse){
 html body[data-state="shop"] .overlay{padding:calc(62px + env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));align-items:flex-end;justify-content:center}
 html body[data-state="shop"] #overlay .dialog{width:100%;max-width:480px;height:auto;max-height:calc(100dvh - 72px - env(safe-area-inset-top));padding:14px;box-shadow:6px 6px 0 var(--p-ink)}
 html body[data-state="shop"] .dialog h2{font-size:26px;margin:6px 0 4px}
 html body[data-state="shop"] .dialog>p{display:none}
 html body #workshopTabs button{font-size:12px}
 html body #workshopSelectors button{min-height:44px}
 html body .workshop-art{max-height:110px}
 html body #workshopItem h3{font-size:20px}
 html body #workshopItem p{font-size:12px}
 html body[data-state="shop"] #robotMounts:not([hidden]){display:none}
}
@media(max-height:600px) and (orientation:landscape){
 html body[data-state="shop"] .overlay{padding:56px 14px 10px;align-items:stretch}
 html body[data-state="shop"] #overlay .dialog{width:min(460px,50vw);max-width:50vw;height:auto;max-height:100%;overflow:auto;padding:12px;display:block}
 html body[data-state="shop"] #shopPanel{display:block}
 html body[data-state="shop"] #workshopItem{flex:none;overflow:visible;min-height:0}
 html body[data-state="shop"] .dialog>small#hint{display:none}
 html body .workshop-art{display:none}
 html body[data-state="shop"] #hint,html body[data-state="shop"] #modalLabel{display:none}
 html body[data-state="shop"] .dialog h2{font-size:22px;margin:4px 0}
 html body #workshopItem{padding:14px 12px 12px}
 html body .workshop-kicker{margin-top:4px}
 html body #workshopItem h3{font-size:18px}
 html body #workshopItem p{font-size:12px}
 html body[data-state="shop"] #robotMounts:not([hidden]){display:none}
}

/* ═══ Pausa = opciones del juego; las mejoras siguen pequeñas. «Ver mejoras» abre la vista de tarjetas. ═══ */
html body #cardsButton,html body #cardsClose{display:none}
html body[data-state="paused"] #cardsButton{display:block;min-height:48px;margin-top:10px;padding:12px;font-size:13px;color:var(--p-blue);background:var(--p-blue-soft)}
html body[data-state="paused"] .hud-research-balance{display:inline-flex!important}
html body[data-state="paused"] .hud-health+.hud-chip{display:inline-flex}
html body[data-state="paused"] .research-heading{display:flex;position:fixed;z-index:6;left:20px;top:108px;gap:6px;align-items:baseline;padding:0;margin:0;background:transparent;border:0;box-shadow:none;font-family:var(--p-display);font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--p-ink-2);white-space:nowrap;text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 8px #fff}
html body[data-state="paused"] .research-heading::before{content:"Subir nivel ·"}
html body[data-state="paused"] #researchLevel,html body[data-state="paused"] #researchStatus{display:none}
html body[data-state="paused"] #researchCost{color:var(--p-orange);font-size:16px}
html body[data-state="paused"] #researchBar{left:calc(50% - 331px);right:auto;transform:none;width:212px;bottom:22px}
html body[data-state="paused"] #researchChoices{grid-template-columns:repeat(3,64px);gap:10px}
html body[data-state="paused"] .research-choice{display:block;width:64px;height:76px;min-height:0;padding:0;background:var(--p-paper);box-shadow:var(--p-shadow)}
html body[data-state="paused"] .research-choice::before{display:none}
html body[data-state="paused"] .research-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;border:0;border-radius:4px;background:transparent}
html body[data-state="paused"] .research-art svg{width:52px;height:52px}
html body[data-state="paused"] .research-name,html body[data-state="paused"] .research-description{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
html body[data-state="paused"] .research-index{top:-10px;right:-10px}
html body[data-state="paused"] .overlay{padding:80px 20px 120px}
/* Vista de tarjetas: toda la pantalla. */
html body[data-cards="open"] .overlay,html body[data-cards="open"] #combatHud .hud-energy,html body[data-cards="open"] #combatHud .hud-health,html body[data-cards="open"] #combatHud .hud-chip,html body[data-cards="open"] #toxicHud,html body[data-cards="open"] #buffHud,html body[data-cards="open"] #toast{display:none!important}
html body[data-cards="open"] #researchBar{position:fixed;inset:0;left:0;right:0;bottom:0;top:0;width:auto;transform:none;z-index:8;display:grid;grid-template-rows:auto minmax(0,1fr);gap:24px;padding:84px clamp(20px,5vw,72px) clamp(20px,4vh,40px);background:#f3ebd8ee;backdrop-filter:blur(6px);pointer-events:auto;overflow:auto}
html body[data-cards="open"] .hud-research-balance{display:none!important}
html body[data-cards="open"] .research-heading{position:static;display:flex;gap:16px;align-items:baseline;white-space:nowrap;font-size:22px;letter-spacing:1px;color:var(--p-ink)}
html body[data-cards="open"] .research-heading::before{content:"Mejoras de la unidad ·";color:var(--p-ink)}
html body[data-cards="open"] #researchLevel{display:inline;color:var(--p-ink-2);font-size:16px}
html body[data-cards="open"] #researchCost{font-size:28px;color:var(--p-orange)}
html body[data-cards="open"] #researchStatus{display:inline;margin-left:auto;font-family:var(--p-text);font-size:13px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--p-ink-2)}
html body[data-cards="open"] #researchChoices{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.5vw,36px);min-height:0}
html body[data-cards="open"] .research-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;width:auto;height:100%;min-height:0;padding:clamp(18px,3vh,36px) clamp(14px,2vw,32px);background:var(--p-paper);box-shadow:8px 8px 0 var(--p-ink);pointer-events:auto}
html body[data-cards="open"] .research-choice::before{display:block;content:"";position:absolute;inset:-2px -2px auto -2px;height:10px;background:repeating-linear-gradient(90deg,var(--p-orange) 0 16px,var(--p-paper) 16px 32px);border:2px solid var(--p-ink);border-radius:6px 6px 0 0}
html body[data-cards="open"] .research-choice:hover{box-shadow:8px 8px 0 var(--p-orange)}
html body[data-cards="open"] .research-art{position:static;width:min(60%,260px);height:auto;aspect-ratio:1;max-width:260px;border:2px solid var(--p-ink);border-radius:6px;background:var(--p-blue-soft);display:grid;place-items:center}
html body[data-cards="open"] .research-art svg{width:78%;height:78%}
html body[data-cards="open"] .research-name,html body[data-cards="open"] .research-description{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
html body[data-cards="open"] .research-name{font-family:var(--p-display);font-size:clamp(20px,2.2vw,30px);line-height:1.05;font-weight:700;text-transform:uppercase;color:var(--p-ink);text-wrap:balance}
html body[data-cards="open"] .research-description{font-family:var(--p-text);font-size:clamp(13px,1.1vw,16px);line-height:1.5;color:var(--p-ink-2);max-width:34ch;text-transform:none;letter-spacing:0;font-weight:400}
html body[data-cards="open"] .research-index{top:-12px;right:-12px;width:32px;height:32px;font-size:14px}
html body[data-cards="open"] #cardsClose{display:block;position:fixed;z-index:9;top:16px;right:20px;min-width:48px;height:48px;padding:0 16px;font-size:13px;background:var(--p-ink);color:var(--p-paper);border-color:var(--p-ink);box-shadow:4px 4px 0 var(--p-orange)}
html body[data-cards="open"]>header #pause{display:none}
@media(max-width:760px),(pointer:coarse){
 html body[data-state="paused"] #cardsButton{min-height:48px}
 html body[data-state="paused"] #researchBar{left:auto;right:calc(max(12px,env(safe-area-inset-right)) + min(300px,calc(100vw - 196px)) + 8px);width:164px;bottom:calc(14px + env(safe-area-inset-bottom));transform:none}
 html body[data-state="paused"] #researchChoices{grid-template-columns:repeat(3,52px);gap:4px}
 html body[data-state="paused"] .research-choice{width:52px;height:68px;box-shadow:2px 2px 0 var(--p-ink)}
 html body[data-state="paused"] .research-art svg{width:40px;height:40px}
 html body[data-state="paused"] .research-heading{left:12px;top:calc(92px + env(safe-area-inset-top));font-size:11px}
 html body[data-state="paused"] #researchCost{font-size:14px}
 html body[data-state="paused"] #overlay{padding:calc(62px + env(safe-area-inset-top)) 12px 110px}
 html body[data-state="paused"][data-cards="open"] #researchBar{position:fixed;left:0;right:0;top:0;bottom:0;width:auto;transform:none;padding:calc(70px + env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));gap:12px;grid-template-rows:auto minmax(0,1fr)}
 html body[data-state="paused"][data-cards="open"] .research-heading{position:static;display:flex}
 html body[data-state="paused"][data-cards="open"] #researchLevel,html body[data-state="paused"][data-cards="open"] #researchStatus{display:inline}
 html body[data-cards="open"] .research-heading{font-size:15px;gap:8px;flex-wrap:wrap;white-space:normal}
 html body[data-cards="open"] #researchCost{font-size:20px}
 html body[data-cards="open"] #researchStatus{flex-basis:100%;margin:0;font-size:12px}
 html body[data-state="paused"][data-cards="open"] #researchChoices{grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);gap:14px}
 html body[data-state="paused"][data-cards="open"] .research-choice{flex-direction:row;text-align:left;gap:14px;padding:14px 12px;width:auto;height:auto;box-shadow:4px 4px 0 var(--p-ink);display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto;align-content:center}
 html body[data-state="paused"][data-cards="open"] .research-art{position:static;width:84px;max-width:84px;height:auto;aspect-ratio:1;grid-row:1/3;border:2px solid var(--p-ink);background:var(--p-blue-soft)}
 html body[data-state="paused"][data-cards="open"] .research-art svg{width:78%;height:78%}
 html body[data-state="paused"][data-cards="open"] .research-name,html body[data-state="paused"][data-cards="open"] .research-description{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
 html body[data-cards="open"] .research-name{font-size:17px;text-align:left}
 html body[data-cards="open"] .research-description{font-size:12px;max-width:none;text-align:left}
 html body[data-cards="open"] #cardsClose{top:calc(10px + env(safe-area-inset-top));right:12px;height:44px;min-width:44px;padding:0 12px;font-size:12px}
}
@media(max-height:600px) and (orientation:landscape){
 html body[data-state="paused"] #researchBar{left:calc(50% - 331px);right:auto;width:212px;bottom:22px}
 html body[data-state="paused"] .research-choice{width:64px;height:56px;min-height:0}
 html body[data-state="paused"] #overlay{padding:58px 16px 100px}
 html body[data-state="paused"][data-cards="open"] #researchBar{position:fixed;left:0;right:0;top:0;bottom:0;width:auto;padding:66px 16px 12px;gap:10px}
 html body[data-state="paused"][data-cards="open"] #researchChoices{grid-template-columns:repeat(3,minmax(0,1fr))}
 html body[data-state="paused"][data-cards="open"] .research-choice{display:flex;flex-direction:column;gap:8px;padding:12px;width:auto;height:100%}
 html body[data-cards="open"] .research-art{width:min(40%,90px)}
 html body[data-cards="open"] .research-name{font-size:16px}
 html body[data-cards="open"] .research-description{font-size:12px}
}

/* Integration: keep unavailable effects legible and constrain long workshop text. */
html body[data-cards="open"] .research-choice:disabled{opacity:1;color:var(--p-ink);background:var(--p-paper-2);box-shadow:4px 4px 0 var(--p-ink-3);cursor:default}
html body[data-cards="open"] .research-choice:disabled .research-index{background:var(--p-ink-3)}
html body #workshopItem{overflow-x:hidden;scrollbar-width:thin}
html body #workshopItem>*{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;flex-shrink:0}
html body #workshopItem .workshop-art{flex-shrink:1}
@media(max-width:760px),(pointer:coarse){
 html body[data-state="paused"][data-cards="open"] .research-name{grid-column:2;grid-row:1;align-self:end}
 html body[data-state="paused"][data-cards="open"] .research-description{grid-column:2;grid-row:2;align-self:start}
}

/* Only two visual meters, projected just above the ERCBot's head. */
html body #robotStatus{position:absolute;z-index:3;width:58px;display:flex;flex-direction:column;gap:3px;transform:translate(-50%,-100%);pointer-events:none;background:none;border:0;padding:0;filter:drop-shadow(0 1px 1px #0005)}
html body #robotStatus[hidden],html body .combat-markers[hidden],html body .pack-aura[hidden]{display:none!important}
html body #robotStatus :is(.hud-energy,.hud-health){position:static;display:block;width:100%;height:auto;min-width:0;flex:none;transform:none;background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0}
html body #robotStatus :is(.hud-energy,.hud-health)>span{display:none}
html body #robotStatus .bar{position:static;display:block;width:100%;height:7px;margin:0;border:1px solid #1b1a17;border-radius:2px;background:#fbf6eacc;overflow:hidden}
html body #robotStatus #hudEnergyBar{display:block;height:100%;background:#0f5cad;border-radius:0}
html body #robotStatus #hudHealthBar{display:block;height:100%;background:#f26b1d;border-radius:0}
html body .combat-markers{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
html body .pack-aura{position:absolute;display:flex;align-items:flex-end;justify-content:center;gap:2px;height:28px;transform:translate(-50%,-100%);filter:drop-shadow(0 0 var(--rage-glow,1px) #ff651caa);pointer-events:none}
html body .pack-aura i{display:block;flex:1;max-width:10px;height:17px;background:linear-gradient(0deg,#ff7a20 15%,#ffdf70 90%);border:1.5px solid #962b16;border-radius:70% 20% 60% 35%;transform:rotate(12deg);animation:pack-ember var(--rage-duration,1.6s) ease-in-out infinite alternate}
html body .pack-aura i:first-child{height:13px;transform:rotate(-25deg);animation-delay:-.3s}
html body .pack-aura i:last-child{height:13px;transform:rotate(30deg);animation-delay:-.6s}
html body .pack-aura[data-tier="1"] i:not(:nth-child(2)){display:none}
html body .pack-aura[data-tier="2"] i:last-child{display:none}
html body .pack-aura[data-tier="3"] i:nth-child(2){height:24px}
html body[data-state="paused"] .pack-aura i{animation-play-state:paused}
@keyframes pack-ember{to{translate:0 -3px;scale:1 1.13}}
@media(prefers-reduced-motion:reduce){html body .pack-aura i{animation:none}}
@media(max-width:760px){html body #robotStatus{width:52px}}
html body:is([data-state="playing"],[data-state="paused"]):not([data-cards="open"]) #researchBar{left:50%;right:auto;transform:translateX(-50%);width:max-content}