:root{--rojo:#d52b1e;--azul:#0039a6;--blanco:#f8f4ea;--crema:#f3e2b3;--madera:#6b3f1d;--noche:#10162a;--pixel:"Press Start 2P", monospace;--texto:"Nunito", system-ui, sans-serif}*{box-sizing:border-box}html,body{background:var(--noche);height:100dvh;color:var(--blanco);font-family:var(--texto);margin:0;overflow:hidden}body{background-image:radial-gradient(circle at 50% 0%, #22305c 0%, var(--noche) 60%)}#app{flex-direction:column;align-items:center;width:100%;height:100%;display:flex;position:relative}.stripe{background:linear-gradient(90deg, var(--azul) 0 33%, var(--blanco) 33% 66%, var(--rojo) 66%);z-index:5;height:8px;position:absolute;top:0;left:0;right:0}.hidden{display:none!important}#game{position:absolute;inset:0}#game canvas{image-rendering:pixelated;touch-action:none;-webkit-user-select:none;user-select:none}.screen{z-index:10;width:min(520px,94vw);padding:max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));border:4px solid var(--crema);background:#10162aeb;flex-direction:column;align-items:center;gap:14px;max-height:96vh;margin:auto;display:flex;position:relative;overflow:hidden auto;box-shadow:8px 8px #000}.screen.overlay{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.title{font-family:var(--pixel);color:var(--crema);text-shadow:4px 4px 0 var(--rojo), 8px 8px 0 var(--azul);letter-spacing:2px;margin:0;font-size:clamp(26px,6vw,44px)}.subtitle{font-family:var(--pixel);color:var(--crema);text-align:center;margin:0;font-size:16px;line-height:1.6}.tagline{color:#ffd166;text-transform:uppercase;letter-spacing:3px;margin:0;font-size:12px;font-weight:800}.flag{background:linear-gradient(180deg, var(--blanco) 0 50%, var(--rojo) 50%);width:72px;height:48px;position:relative;box-shadow:3px 3px #000}.flag:before{content:"★";background:var(--azul);color:#fff;text-align:center;width:24px;height:24px;font-size:14px;line-height:24px;position:absolute;top:0;left:0}.field{letter-spacing:1px;text-transform:uppercase;flex-direction:column;gap:6px;width:100%;font-size:13px;font-weight:800;display:flex}input{width:100%;font:800 18px var(--texto);border:3px solid var(--crema);color:var(--blanco);background:#0b1020;outline:none;padding:10px 12px}input:focus{border-color:#ffd166}.actions{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.btn{font-family:var(--pixel);color:#fff;cursor:pointer;border:3px solid #000;flex:1;min-width:150px;padding:14px 18px;font-size:12px;transition:transform 50ms;box-shadow:4px 4px #000}.btn.small{white-space:nowrap;flex:1 0 auto;min-width:0;padding:10px 14px}.btn:active{box-shadow:none;transform:translate(4px,4px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-red{background:var(--rojo)}.btn-blue{background:var(--azul)}.btn-dark{background:#2b3350}.error{color:#ff7b7b;min-height:1em;margin:0;font-size:14px;font-weight:800}.hint{color:#c9d1e6;text-align:center;margin:0;font-size:14px}.help{color:#8b95b3;text-align:center;margin:0;font-size:12px}.ranking{width:100%}.ranking h2{font-family:var(--pixel);color:#ffd166;margin:0 0 8px;font-size:12px}table{border-collapse:collapse;width:100%;font-size:14px}td{border-bottom:1px solid #2b3350;padding:4px 6px}td.num{text-align:right;font-variant-numeric:tabular-nums}td.pos{color:#ffd166;width:28px;font-weight:800}.link-row{flex-wrap:wrap;gap:8px;width:100%;display:flex}.link-row input{flex:220px;min-width:0;font-size:14px}.players{gap:6px;width:100%;margin:0;padding:0;list-style:none;display:grid}.players li{border-left:8px solid var(--c,#999);background:#0b1020;justify-content:space-between;padding:8px 12px;font-weight:800;display:flex}.players li span{color:#ffd166;font-size:12px}.steps{gap:8px;width:100%;margin:0;padding-left:22px;font-size:15px;line-height:1.4;display:grid}.steps b{color:#ffd166}.steps.small{color:#c9d1e6;gap:4px;font-size:13px}.podium{gap:6px;width:100%;margin:0;padding:0;list-style:none;display:grid}.podium li{border-left:8px solid var(--c,#999);background:#0b1020;justify-content:space-between;padding:10px 12px;font-weight:800;display:flex}.podium li:first-child{background:#3b2f0b}#hud{top:max(12px, env(safe-area-inset-top));z-index:6;pointer-events:none;justify-content:center;gap:8px;padding:0 8px;display:flex;position:absolute;left:0;right:0}.card{border:2px solid var(--c);background:#0b1020d9;min-width:120px;padding:6px 10px;font-size:12px;font-weight:800}.card .bar{background:#2b3350;height:8px;margin-top:4px}.card .bar i{background:var(--c);height:100%;transition:width .1s linear;display:block}.card.out{opacity:.45}#power{left:50%;bottom:max(14px, env(safe-area-inset-bottom));z-index:7;border:3px solid var(--crema);width:min(320px,80vw);height:56px;color:var(--blanco);font-family:var(--pixel);cursor:pointer;background:#0b1020;padding:0;font-size:13px;position:absolute;overflow:hidden;transform:translate(-50%);box-shadow:4px 4px #000}#power i{background:linear-gradient(90deg, var(--azul), var(--rojo));width:0;transition:width .15s linear;position:absolute;inset:0}#power span,#power small{text-shadow:2px 2px #000;display:block;position:relative}#power small{font-family:var(--texto);color:#c9d1e6;margin-top:4px;font-size:10px;font-weight:800}#power:disabled{cursor:default}#power.ready{border-color:#ffd166;animation:.6s infinite alternate pulse}#power.ready i{background:linear-gradient(90deg, #ffd166, var(--rojo))}@keyframes pulse{0%{transform:translate(-50%)scale(1)}to{transform:translate(-50%)scale(1.06)}}@media (width<=600px){.card{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;padding:4px 6px;font-size:10px;overflow:hidden}.btn{min-width:120px;padding:12px 10px;font-size:11px}.screen{gap:10px;padding-left:14px;padding-right:14px}.screen.overlay{width:92vw}.title{font-size:26px}td{padding:4px 3px;font-size:13px}}@media (height<=500px) and (orientation:landscape){#hud{flex-direction:column;justify-content:flex-start;width:130px;padding:0 6px}.card{min-width:0}}