/* Guerra de Cristales dentro de index.html: TODOS los estilos van acotados a #crystalwars-screen para no pisar el resto del juego.
   (Las letras pixel "Press Start 2P" y "VT323 Texto" ya las define css/base.css.) */
/* contenedor: la pantalla del juego ocupa todo y hace scroll; el contenido vive en #cw-root */
#crystalwars-screen.screen{align-items:stretch;justify-content:flex-start;overflow-y:auto}
#crystalwars-screen #cw-root{min-height:100%}
#crystalwars-screen{color-scheme:dark;--bg:var(--ui-bg-2);--panel:var(--ui-bg-1);--line:var(--ui-line-hi);--gold:var(--mode-accent-2);--blue:var(--team-a);--amber:var(--team-b)}
#crystalwars-screen[data-mode="coliseo"]{--mode-accent:#e8c26a;--mode-accent-2:#ffd76a}
#crystalwars-screen[data-mode="cristales"]{--mode-accent:#6fd3ff;--mode-accent-2:#bfe8ff}
#crystalwars-screen *{box-sizing:border-box}
#crystalwars-screen.screen{padding:0;display:block;text-align:left;margin:0;background:radial-gradient(ellipse at 50% 0,#3a2415,var(--bg) 65%);color:var(--text);font:17px/1.35 'VT323 Texto',system-ui,sans-serif}
#crystalwars-screen button,#crystalwars-screen input,#crystalwars-screen select{font:inherit}
#crystalwars-screen button,#crystalwars-screen a{touch-action:manipulation}
#crystalwars-screen button{border:3px solid #000;border-radius:6px;padding:11px 15px;background:var(--ui-btn);box-shadow:var(--ui-bevel),var(--ui-shadow-sm);color:var(--text);cursor:pointer;min-height:44px}
#crystalwars-screen button:hover{filter:brightness(1.18)}
#crystalwars-screen button:disabled{opacity:.4;cursor:default}
#crystalwars-screen .primary{background:var(--ui-btn-hot);color:#fff;font-weight:800;text-shadow:2px 2px 0 #000}
#crystalwars-screen a{color:var(--gold);text-decoration:none}
#crystalwars-screen header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;border-bottom:3px solid var(--mode-accent);font-size:12px;letter-spacing:1.4px}
#crystalwars-screen header button{font-size:11px;padding:5px 10px}
#crystalwars-screen main{max-width:1020px;margin:auto;padding:44px 24px}
#crystalwars-screen .eyebrow{color:var(--gold);font-size:11px;letter-spacing:3px}
#crystalwars-screen h1{font-size:clamp(38px,7vw,76px);line-height:1.05;letter-spacing:2px;margin:18px 0}
#crystalwars-screen h1 em{font-style:normal;color:var(--gold)}
#crystalwars-screen .intro{max-width:600px;font-size:18px;color:var(--text-dim)}
#crystalwars-screen .rules{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:30px 0}
#crystalwars-screen .rules b{color:var(--gold);font-size:12px;letter-spacing:1px}
#crystalwars-screen .rules p{color:var(--text-dim);margin:8px 0}
#crystalwars-screen .setup,#crystalwars-screen #room{padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--ui-bg-1)}
#crystalwars-screen .setup{display:grid;grid-template-columns:1fr 1fr;gap:35px}
#crystalwars-screen label{display:block;margin:8px 0;color:var(--text-dim)}
#crystalwars-screen input,#crystalwars-screen select{width:100%;background:var(--ui-inset);border:1px solid var(--ui-line-hi);border-radius:5px;padding:11px;color:#fff}
#crystalwars-screen small,#crystalwars-screen #kit{color:var(--text-dim);font-size:12px}
#crystalwars-screen .connect{display:flex;flex-direction:column;justify-content:center;gap:10px}
#crystalwars-screen .join,#crystalwars-screen .actions,#crystalwars-screen .room-head{display:flex;gap:10px;align-items:center}
#crystalwars-screen .join input{min-width:0}
#crystalwars-screen #room{margin-top:20px}
#crystalwars-screen .room-head{justify-content:space-between}
#crystalwars-screen #slots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
#crystalwars-screen .slot{padding:12px;background:var(--ui-inset);border-left:3px solid var(--blue)}
#crystalwars-screen .slot.amber{border-color:var(--amber)}
#crystalwars-screen #status{min-height:25px;color:var(--gold)}
#crystalwars-screen [hidden]{display:none!important}
#crystalwars-screen #cw-game{max-width:1050px;margin:auto;padding:12px}
#crystalwars-screen #scoreboard{display:grid;grid-template-columns:1fr 100px 1fr;gap:20px;padding:6px 10px 12px}
#crystalwars-screen #scoreboard span{display:block;font-size:12px}
#crystalwars-screen #scoreboard b{font-size:12px;letter-spacing:2px}
#crystalwars-screen .blue{color:var(--blue)}
#crystalwars-screen .amber{color:var(--amber);text-align:right}
#crystalwars-screen .clock{text-align:center}
#crystalwars-screen .clock strong{font-size:23px}
#crystalwars-screen meter{width:100%;height:10px}
#crystalwars-screen #cw-stage{position:relative;border:1px solid var(--ui-line-hi);border-radius:8px;overflow:hidden;background:var(--ui-inset)}
#crystalwars-screen canvas{display:block;width:100%;height:min(54vh,560px);touch-action:none}
#crystalwars-screen #notice{position:absolute;top:12px;left:12px;right:100px;color:var(--mode-accent-2);font-size:13px;pointer-events:none;text-shadow:0 2px 3px #000}
#crystalwars-screen #vital{position:absolute;bottom:10px;left:12px;background:#0a0604c7;padding:6px 10px;border-radius:6px;font-size:12px}
#crystalwars-screen #view{position:absolute;top:8px;right:8px;font-size:11px;padding:6px}
#crystalwars-screen #supply{padding:12px 0}
#crystalwars-screen #supply>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:12px}
#crystalwars-screen #shards{color:var(--gold)}
#crystalwars-screen #shop{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px}
#crystalwars-screen #shop button{font-size:11px;padding:8px 5px}
#crystalwars-screen #cw-controls{display:flex;gap:15px;align-items:center;justify-content:space-between}
#crystalwars-screen #joystick{width:92px;height:92px;border-radius:50%;background:#3a241588;border:1px solid var(--ui-line-hi);position:relative;flex-shrink:0;touch-action:none;user-select:none}
#crystalwars-screen #joystick i{position:absolute;width:34px;height:34px;background:#ffb58a55;border:1px solid var(--ember3);border-radius:50%;left:28px;top:28px}
#crystalwars-screen #joystick span{position:absolute;bottom:3px;width:100%;text-align:center;font-size:9px;color:var(--text-dim);pointer-events:none}
#crystalwars-screen #skills{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:1}
#crystalwars-screen #skills button{font-size:11px;min-height:65px;padding:5px}
#crystalwars-screen .keys{color:var(--text-dim);font-size:11px}
#crystalwars-screen #quit{font-size:11px;background:transparent}
#crystalwars-screen dialog{max-width:420px;width:90%;border:1px solid #000;border-radius:12px;padding:30px;background:var(--ui-bg-1);color:var(--text)}
#crystalwars-screen dialog::backdrop{background:#080503ce}
#crystalwars-screen dialog h2{font-size:28px;color:var(--gold)}
#crystalwars-screen .actions{flex-wrap:wrap}
@media(max-width:600px){#crystalwars-screen header{padding:10px 12px}
#crystalwars-screen header>span{display:none}
#crystalwars-screen main{padding:25px 16px}
#crystalwars-screen .rules{gap:12px;font-size:12px}
#crystalwars-screen .setup{grid-template-columns:1fr;gap:15px;padding:18px}
#crystalwars-screen #scoreboard{gap:10px;grid-template-columns:1fr 70px 1fr}
#crystalwars-screen #slots{grid-template-columns:1fr}
#crystalwars-screen .slot{font-size:13px}
#crystalwars-screen #cw-game{padding:8px}
#crystalwars-screen #cw-controls{gap:8px}
#crystalwars-screen #skills{gap:4px}
#crystalwars-screen #skills button{font-size:10px}
#crystalwars-screen canvas{height:42vh;min-height:245px}
#crystalwars-screen #shop{grid-template-columns:repeat(2,1fr)}
#crystalwars-screen #supply>div:first-child{font-size:11px}
#crystalwars-screen .keys{margin:6px 0}
#crystalwars-screen .rules b{font-size:10px}
}
/* Celular horizontal: la arena ocupa TODA la pantalla y el resto flota encima (marcador arriba, joystick abajo a la izquierda,
   habilidades abajo a la derecha, suministros a la derecha solo cuando se pueden usar). Sin scroll, sin recortes. */
@media(max-height:520px) and (orientation:landscape){
#crystalwars-screen:has(#cw-game:not([hidden])) header{display:none}
#crystalwars-screen #cw-game{position:fixed;inset:0;max-width:none;margin:0;padding:0;display:block;overflow:hidden}
#crystalwars-screen #cw-stage{position:absolute;inset:0;border:0;border-radius:0}
#crystalwars-screen canvas{height:100%;min-height:0}
#crystalwars-screen #scoreboard{position:absolute;z-index:4;top:3px;left:50%;transform:translateX(-50%);width:min(560px,72vw);grid-template-columns:1fr 78px 1fr;gap:8px;padding:3px 10px 4px;background:#0a0604c7;border:1px solid var(--ui-line-hi);border-radius:8px}
#crystalwars-screen #scoreboard span{font-size:10px}
#crystalwars-screen #scoreboard b{font-size:10px;letter-spacing:1px}
#crystalwars-screen .clock strong{font-size:18px}
#crystalwars-screen meter{height:7px}
#crystalwars-screen #notice{top:50px;left:50%;right:auto;transform:translateX(-50%);width:min(480px,60vw);text-align:center;font-size:12px}
#crystalwars-screen #vital{bottom:6px;left:50%;transform:translateX(-50%);font-size:11px;padding:4px 8px}
#crystalwars-screen #view{top:40px;bottom:auto;left:6px;right:auto;font-size:10px;padding:4px 8px}
#crystalwars-screen #supply{position:absolute;z-index:4;right:6px;top:46px;width:204px;padding:6px;background:#0a0604d6;border:1px solid var(--ui-line-hi);border-radius:8px}
#crystalwars-screen #supply>div:first-child{flex-direction:column;gap:1px;font-size:10px}
#crystalwars-screen #shop{display:none;grid-template-columns:repeat(2,1fr);gap:4px;margin-top:5px}
#crystalwars-screen #cw-game.supply #shop{display:grid}
#crystalwars-screen #cw-game.supply #supply{border-color:var(--ember3)}
#crystalwars-screen #shop button{font-size:9px;padding:5px 3px;min-height:34px}
#crystalwars-screen #cw-controls{position:absolute;z-index:3;left:8px;right:8px;bottom:6px;pointer-events:none;align-items:flex-end}
#crystalwars-screen #joystick{width:84px;height:84px;pointer-events:auto}
#crystalwars-screen #joystick i{left:25px;top:25px}
#crystalwars-screen #skills{pointer-events:auto;flex:none;width:176px;grid-template-columns:repeat(2,1fr);gap:5px}
#crystalwars-screen #skills button{min-height:46px;font-size:9px;padding:3px}
#crystalwars-screen #quit{position:absolute;z-index:4;top:6px;left:6px;font-size:10px;padding:4px 8px}
#crystalwars-screen dialog{max-width:560px;padding:12px 18px;max-height:96vh;overflow:auto}
#crystalwars-screen dialog h2{font-size:20px;margin:2px 0}
#crystalwars-screen dialog p{margin:4px 0;font-size:12px}
#crystalwars-screen #result-stats table{font-size:10px;margin:4px 0}
#crystalwars-screen #rematch{padding:8px 14px;font-size:12px}
#crystalwars-screen .keys{display:none}
}

#crystalwars-screen #result-stats table{width:100%;border-collapse:collapse;font-size:11px;margin:8px 0}
#crystalwars-screen #result-stats th,#crystalwars-screen #result-stats td{padding:4px 5px;border-bottom:1px solid var(--ui-line);text-align:right}
#crystalwars-screen #result-stats th:first-child,#crystalwars-screen #result-stats td:first-child{text-align:left}
#crystalwars-screen #result-stats tr.me td{color:var(--hud-gold);font-weight:700}
#crystalwars-screen #result-record{color:var(--hud-gold);font-size:12px;margin:4px 0 10px}

/* Both arenas remain visible; supply choices use the space between the touch controls. */
@media(max-height:520px) and (orientation:landscape){
#crystalwars-screen #supply{top:auto;bottom:6px;left:104px;right:192px;width:auto;padding:4px}
#crystalwars-screen #supply>div:first-child{flex-direction:row;justify-content:space-between;font-size:9px}
#crystalwars-screen #shop{grid-template-columns:repeat(3,1fr);gap:3px;margin-top:3px}
#crystalwars-screen #shop button{min-height:30px;padding:3px;font-size:9px}
#crystalwars-screen #vital{bottom:98px}
#crystalwars-screen #view{top:40px;min-height:28px}
}

@media(max-height:520px) and (orientation:landscape){
#crystalwars-screen #scoreboard{height:40px;padding:2px 10px}
#crystalwars-screen #scoreboard .blue span,#crystalwars-screen #scoreboard .amber span{display:inline;margin-left:6px}
#crystalwars-screen #scoreboard meter{display:block;margin-top:2px;height:6px}
#crystalwars-screen #scoreboard .clock span{font-size:9px;line-height:10px}
#crystalwars-screen #notice{top:42px;left:50%;width:170px;font-size:10px}
}
/* Competitive hub: clear mode identity, readable tactical cards and persistent rival view. */
#crystalwars-screen #competitive-mode{border-color:var(--mode-accent);background:linear-gradient(120deg,#3a2415,#1a0f0a);font-size:20px;min-height:48px}
#crystalwars-screen #cw-stage{box-shadow:0 0 0 1px #000,0 16px 48px #0006;background:radial-gradient(ellipse,#3a2415,var(--ui-bg-2))}
#crystalwars-screen #shop .cw-card{position:relative;border-color:var(--team-a);background:linear-gradient(145deg,#2a3a4a,#121a24);box-shadow:inset 0 0 18px #73d5ff15;font-weight:bold;color:var(--text)}
#crystalwars-screen #shop .cw-card[data-key="meteor"]{border-color:var(--team-b);background:linear-gradient(145deg,#4a2a14,#1a0f0a);color:var(--text)}
#crystalwars-screen button:focus-visible,#crystalwars-screen select:focus-visible{outline:2px solid #fff2b7;outline-offset:3px}
#crystalwars-screen #shop .cw-card:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 3px 14px #8fe4ff38}
#crystalwars-screen #skills button:not(:disabled){border-bottom:3px solid var(--mode-accent)}
#crystalwars-screen #vital{border:1px solid var(--ui-line-hi);pointer-events:none}
@media(max-height:520px) and (orientation:landscape){
#crystalwars-screen #shop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
#crystalwars-screen #cw-game:not(.supply) #shop button:not(.cw-card){display:none}
#crystalwars-screen #cw-game:not(.supply) #shop{grid-template-columns:repeat(2,minmax(0,1fr))}
#crystalwars-screen #cw-game.supply #shop{grid-template-columns:repeat(4,minmax(0,1fr))}
#crystalwars-screen #supply{max-height:92px;overflow-y:auto}
#crystalwars-screen #shop button{min-height:30px;line-height:1.1}
}
@media(prefers-reduced-motion:reduce){#crystalwars-screen #shop .cw-card:not(:disabled):hover{transform:none}}
#crystalwars-screen .cw-kit-guide{margin:10px 0;padding:10px;border:1px solid var(--ui-line-hi);border-radius:7px;background:var(--ui-inset)}
#crystalwars-screen .cw-kit-guide summary{cursor:pointer;color:var(--mode-accent-2);min-height:28px}
#crystalwars-screen .cw-kit-guide p,#crystalwars-screen .cw-help-dialog p{font-size:15px;line-height:1.5;color:var(--text-dim)}
#crystalwars-screen .cw-kit-guide strong,#crystalwars-screen .cw-help-dialog strong{color:var(--text)}
#crystalwars-screen .cw-signature{padding:10px;background:#2a1a3a;border-left:3px solid var(--ui-epic)}
#crystalwars-screen #cw-help{font-size:11px;margin-left:8px}
#crystalwars-screen .cw-help-dialog{max-width:660px;max-height:90vh;overflow:auto}
@media(max-height:520px) and (orientation:landscape){#crystalwars-screen #cw-help{position:absolute;right:6px;top:6px;z-index:5;font-size:9px;padding:4px 7px;min-height:28px;max-width:100px}#crystalwars-screen .cw-help-dialog p{font-size:12px}}
/* One horizontal hand keeps every card touch-sized on small landscape phones. */
@media(max-height:520px) and (orientation:landscape){
#crystalwars-screen #shop,#crystalwars-screen #cw-game.supply #shop,#crystalwars-screen #cw-game:not(.supply) #shop{display:flex;overflow-x:auto;overscroll-behavior-x:contain;gap:5px;padding-bottom:3px;scroll-snap-type:x proximity}
#crystalwars-screen #shop button{flex:0 0 104px;min-height:44px;font-size:11px;padding:5px;scroll-snap-align:start}
#crystalwars-screen #supply{overflow-y:visible;max-height:90px}
#crystalwars-screen #skills button{min-height:46px;font-size:10px}
}

/* ===== Legibilidad (pedido del dueño: nada de letras chicas) ===== */
#crystalwars-screen header>button, #crystalwars-screen header>span, #crystalwars-screen #sound{ font-size:15px; min-height:44px; padding:8px 14px; }
#crystalwars-screen .eyebrow, #crystalwars-screen .competitive-title, #crystalwars-screen #competitive-title{ font-size:14px; }
#crystalwars-screen .rules b, #crystalwars-screen .rules p, #crystalwars-screen #kit, #crystalwars-screen small, #crystalwars-screen .slot, #crystalwars-screen #status, #crystalwars-screen label{ font-size:14px; line-height:1.35; }
#crystalwars-screen main button, #crystalwars-screen main select, #crystalwars-screen main input{ font-size:15px; min-height:46px; }
#crystalwars-screen main{ overflow-y:auto; }
#crystalwars-screen #cw-game #scoreboard b, #crystalwars-screen #cw-game #scoreboard span{ font-size:13px; }
#crystalwars-screen #cw-game .clock strong{ font-size:20px; } #crystalwars-screen #cw-game #wave{ font-size:13px; }
#crystalwars-screen #cw-game #vital, #crystalwars-screen #cw-game #view, #crystalwars-screen #cw-game #quit, #crystalwars-screen #cw-game #cw-help, #crystalwars-screen #cw-game #shards, #crystalwars-screen #cw-game #phase{ font-size:13px; }
#crystalwars-screen #cw-game #shop button, #crystalwars-screen #cw-game #skills button, #crystalwars-screen #cw-game .cw-card{ font-size:13px; line-height:1.15; }
#crystalwars-screen #cw-game #joystick span{ font-size:12px; }
@media (max-height:520px) and (orientation:landscape){
 #crystalwars-screen #cw-game #shop button{ font-size:12.5px; min-height:40px; }
 #crystalwars-screen #cw-game #skills button{ font-size:13px; min-height:50px; }
 #crystalwars-screen #cw-game #supply{ width:236px; }
}
@media (max-height:520px) and (orientation:landscape){
 #crystalwars-screen #supply{max-height:128px; left:96px; right:186px; bottom:4px; overflow-y:auto}
 #crystalwars-screen #supply>div:first-child{font-size:13px}
 #crystalwars-screen #cw-game.supply #shop{grid-template-columns:repeat(4,minmax(0,1fr))}
 #crystalwars-screen #shop button{font-size:12.5px;min-height:38px;padding:3px 4px;line-height:1.1}
}

/* ===== Lobby en celular horizontal (844x390): dos columnas, "ENTRENAR CON BOTS" siempre a la vista, sin scroll ===== */
@media (max-height:520px) and (orientation:landscape){
 #crystalwars-screen #cw-root{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0}
 #crystalwars-screen header{padding:3px 12px;flex:0 0 auto}
 #crystalwars-screen header>button,#crystalwars-screen header>span,#crystalwars-screen #sound{min-height:44px;padding:4px 12px}
 #crystalwars-screen #lobby:not([hidden]){flex:1 1 auto;min-height:0;max-width:none;margin:0;width:100%;padding:6px 16px 4px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto auto 1fr auto;column-gap:18px;row-gap:2px;align-content:start;overflow-y:auto}
 #crystalwars-screen #lobby .eyebrow{grid-column:1;grid-row:1;font-size:13px;letter-spacing:.5px;line-height:1.25}
 #crystalwars-screen #lobby h1{grid-column:1;grid-row:2;font-size:19px;line-height:1.25;letter-spacing:1px;margin:2px 0 4px}
 #crystalwars-screen #lobby .intro{display:none}
 #crystalwars-screen #lobby .rules{grid-column:1;grid-row:3;grid-template-columns:1fr;gap:6px;margin:0;align-content:start}
 #crystalwars-screen #lobby .rules p{margin:1px 0 0;font-size:14px;line-height:1.15}
 #crystalwars-screen #lobby .rules b{font-size:11px;line-height:1.2}
 #crystalwars-screen #lobby .setup{grid-column:2;grid-row:1 / span 3;grid-template-columns:1fr;gap:8px;padding:10px;align-content:start}
 #crystalwars-screen #lobby .setup>div:first-child{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
 #crystalwars-screen #lobby .setup label{margin:0 0 2px;font-size:13px;line-height:1.1}
 #crystalwars-screen #lobby .setup label[for="competitive-mode"]{grid-column:1;grid-row:1}
 #crystalwars-screen #lobby .setup #competitive-mode{grid-column:1;grid-row:2}
 #crystalwars-screen #lobby .setup label[for="name"]{grid-column:2;grid-row:1}
 #crystalwars-screen #lobby .setup #name{grid-column:2;grid-row:2}
 #crystalwars-screen #lobby .setup #champ{grid-column:1 / -1}
 #crystalwars-screen #lobby .setup label[for="champ"]{grid-column:1 / -1;grid-row:3;margin-top:6px}
 #crystalwars-screen #lobby .setup #kit,#crystalwars-screen #lobby .setup small,#crystalwars-screen #lobby .cw-kit-guide{display:none}
 #crystalwars-screen #lobby .connect{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
 #crystalwars-screen #lobby .connect #practice{grid-column:1 / -1;min-height:48px}
 #crystalwars-screen #lobby .connect label[for="code"]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 #crystalwars-screen #lobby .connect button,#crystalwars-screen #lobby .connect input{min-height:44px;padding-top:4px;padding-bottom:4px}
 #crystalwars-screen #lobby .join{gap:6px}
 #crystalwars-screen #lobby .join button{padding:4px 8px}
 #crystalwars-screen #lobby #room{grid-column:1 / -1;grid-row:4;margin-top:6px;padding:10px}
 #crystalwars-screen #lobby #status{grid-column:1;grid-row:4;min-height:0;margin:0;font-size:14px;line-height:1.2;align-self:end}
 #crystalwars-screen #lobby #room:not([hidden])~#status{display:none}
}

/* ===== Botones con ícono (habilidades y suministros) y panel de suministros que no tapa el campo ===== */
#crystalwars-screen #cw-game #skills button,#crystalwars-screen #cw-game #shop button{position:relative;display:flex;align-items:center;justify-content:center;padding:4px;line-height:1}
#crystalwars-screen .cw-ico{width:62%;height:62%;max-width:40px;max-height:40px;object-fit:contain;pointer-events:none;image-rendering:auto}
#crystalwars-screen .cw-key{position:absolute;top:1px;left:5px;font-size:13px;color:var(--text-dim);pointer-events:none}
#crystalwars-screen .cw-cd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:20px 'VT323 Texto',monospace;color:#fff;text-shadow:2px 2px 0 #000;pointer-events:none}
#crystalwars-screen .cw-cd:not(:empty){background:#000a;border-radius:4px}
#crystalwars-screen .cw-cost{position:absolute;right:3px;bottom:1px;font-size:13px;color:var(--hud-gold,#ffd76a);text-shadow:1px 1px 0 #000;pointer-events:none}
#crystalwars-screen #skills .cw-ult:not(:disabled){border-color:#ffd76a}
#crystalwars-screen #cw-game #skills{grid-template-columns:repeat(4,minmax(58px,1fr))}
#crystalwars-screen #cw-game #skills button{min-height:64px}
#crystalwars-screen #cw-game #shop{grid-template-columns:repeat(8,minmax(52px,1fr))}
#crystalwars-screen #cw-game #shop button{min-height:56px}
@media(max-width:600px){#crystalwars-screen #cw-game #shop{grid-template-columns:repeat(4,1fr)}}
@media (max-height:520px) and (orientation:landscape){
 #crystalwars-screen #cw-game #skills{width:122px;grid-template-columns:repeat(2,58px);gap:6px}
 #crystalwars-screen #cw-game #skills button{min-height:58px;width:58px}
 #crystalwars-screen #cw-game #cw-controls{align-items:flex-end}
 #crystalwars-screen #cw-game #supply{left:104px;right:auto;width:auto;max-width:calc(100% - 248px);bottom:6px;top:auto;padding:3px 6px 4px;background:#0a0604cc;overflow:visible;max-height:none}
 #crystalwars-screen #cw-game #supply>div:first-child{flex-direction:row;justify-content:space-between;gap:10px;font-size:13px;line-height:1.1;white-space:nowrap}
 #crystalwars-screen #cw-game #shop,#crystalwars-screen #cw-game.supply #shop,#crystalwars-screen #cw-game:not(.supply) #shop{display:flex;gap:4px;margin-top:3px;overflow-x:auto;padding-bottom:0}
 #crystalwars-screen #cw-game #shop button{flex:0 0 46px;width:46px;min-height:46px;height:46px;padding:2px}
 #crystalwars-screen #cw-game #vital{bottom:84px}
}