:root{
  color-scheme:dark;
  --bg:#050608;
  --panel:#0c0d11;
  --panel2:#14161c;
  --line:#5b5b61;
  --text:#f0ede4;
  --muted:#9e9a8f;
  --accent:#d9cf58;
  --danger:#b5464e;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:"Courier New",ui-monospace,monospace;color:var(--text)}
body{display:grid;place-items:center}
button{font:inherit}
#game-shell{position:relative;width:100vw;height:100vh;background:#07080c;overflow:hidden;isolation:isolate}
#game{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair;background:#050608}
#crt{pointer-events:none;position:absolute;inset:0;z-index:10;opacity:.22;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 4px);mix-blend-mode:overlay}
#crt:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 105px rgba(0,0,0,.85)}
.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(390px,calc(100vw - 24px));padding:18px 18px 16px;border:2px solid #66686d;border-radius:0;background:linear-gradient(180deg,#15171d,#090a0d 74%);box-shadow:8px 8px 0 rgba(0,0,0,.65),0 0 0 2px #050608,0 0 34px rgba(0,0,0,.65);text-align:center;z-index:30}
.panel:before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.06);pointer-events:none}
.panel:not(.visible){display:none}
.panel.wide{width:min(600px,calc(100vw - 24px))}
.panel.compact{width:min(380px,calc(100vw - 24px))}
.panel h1{font-size:clamp(34px,7vw,56px);line-height:.9;letter-spacing:-.055em;margin:8px 0 10px;text-shadow:3px 3px 0 #000,0 0 22px rgba(217,207,88,.09)}
.panel h1 span{color:var(--accent)}
.panel h2{font-size:22px;margin:7px 0 13px;letter-spacing:-.035em}
.panel p{color:var(--muted);line-height:1.45;margin:9px 0 12px}
.panel .lead{font-size:12px;max-width:500px;margin:0 auto 14px}
.eyebrow{font-size:9px;letter-spacing:.18em;color:var(--accent);font-weight:900}
.tiny{font-size:9px;margin:11px 0 0!important;color:#77746b!important}
button{appearance:none;border:1px solid #555860;background:#191b21;color:var(--text);font-weight:900;padding:9px 11px;border-radius:0;cursor:pointer;min-width:150px;margin:4px;box-shadow:3px 3px 0 #030406;letter-spacing:.02em;font-size:11px}
button:hover{background:#272a32;border-color:#858891}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #030406}
button.primary{background:var(--accent);border-color:#f1e987;color:#171407}
button.danger{border-color:#7d343a;color:#ffb2b6;background:#211012}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:470px;margin:0 auto}
.menu-grid button{min-width:0;width:calc(100% - 8px)}
.menu-grid .primary{grid-column:1/-1}
.menu-status{font-size:9px;color:#7f7b71;margin-top:8px;min-height:11px}
.control-grid{display:grid;grid-template-columns:1fr 1fr;text-align:left;gap:6px 12px;margin:12px 0 13px;color:#c7c3b7;font-size:10px}
.control-grid b{color:var(--accent)}
.level-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;text-align:left;margin:13px 0}
.level-card{position:relative;border:1px solid #4a4d54;border-radius:0;background:#101218;padding:12px;min-height:104px;overflow:hidden;cursor:pointer;transition:.12s transform,.12s border-color}
.level-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.level-card:before{content:"";position:absolute;inset:0;opacity:.13;background:linear-gradient(135deg,var(--card),transparent 66%);pointer-events:none}
.level-card h3{position:relative;margin:0 0 4px;font-size:12px;color:#f4f0e6}
.level-card p{position:relative;margin:0;font-size:9px;line-height:1.35;color:#9f9b90;padding-right:18px}
.level-card .record{position:absolute;bottom:8px;left:12px;font-size:8px;color:var(--accent)}
.level-card .num{position:absolute;right:8px;top:1px;font-size:31px;font-weight:900;color:rgba(255,255,255,.045)}
@media (max-width:650px){.level-list,.menu-grid,.control-grid{grid-template-columns:1fr}.menu-grid .primary{grid-column:auto}.panel,.panel.wide,.panel.compact{width:min(360px,calc(100vw - 18px));padding:15px}.panel h1{font-size:36px}.level-card{min-height:88px}.level-list{max-height:58vh;overflow:auto}}
#mobile-controls{display:none;position:absolute;inset:0;pointer-events:none;z-index:15;touch-action:none;user-select:none;-webkit-user-select:none}
#mobile-controls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;min-width:0;margin:0;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(12,14,20,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 2px 10px rgba(0,0,0,.35);color:#f4f0e6}
.joystick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:clamp(112px,24vw,154px);height:clamp(112px,24vw,154px);pointer-events:auto;touch-action:none;border-radius:50%}
.joystick-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.22);background:radial-gradient(circle,rgba(255,255,255,.07),rgba(10,12,18,.30) 64%,rgba(6,7,11,.48));box-shadow:inset 0 0 24px rgba(0,0,0,.35),0 3px 16px rgba(0,0,0,.25)}

.joystick-ring span{position:absolute;color:rgba(255,255,255,.42);font-size:clamp(13px,3vw,18px);font-weight:900;text-shadow:0 1px 3px #000;pointer-events:none}
.joy-up{left:50%;top:7%;transform:translateX(-50%)}
.joy-down{left:50%;bottom:7%;transform:translateX(-50%)}
.joy-left{left:8%;top:50%;transform:translateY(-50%)}
.joy-right{right:8%;top:50%;transform:translateY(-50%)}
.joystick-knob{position:absolute;left:50%;top:50%;width:42%;height:42%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(217,207,88,.82);border:2px solid rgba(255,255,255,.50);box-shadow:0 2px 10px rgba(0,0,0,.45);will-change:transform}
.actions{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:clamp(150px,31vw,215px);height:clamp(120px,25vw,170px);pointer-events:none}
.actions button{position:absolute;display:grid;place-items:center;font-weight:900;font-size:clamp(9px,2.1vw,12px)}
.actions .fire{right:0;bottom:0;width:clamp(70px,15vw,96px);height:clamp(70px,15vw,96px);background:rgba(141,40,48,.78);border-color:rgba(255,174,178,.58);font-size:clamp(10px,2.4vw,13px)}
.actions .secondary-action{width:clamp(48px,10vw,64px);height:clamp(48px,10vw,64px);background:rgba(18,21,29,.72)}
#mobile-reload{right:clamp(76px,16vw,102px);bottom:2px}
#mobile-weapon{right:clamp(38px,8vw,52px);bottom:clamp(72px,15vw,96px)}
.mobile-top-actions{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));pointer-events:none}
.mobile-top-actions .utility{pointer-events:auto;width:auto;min-width:64px;height:38px;padding:0 12px;border-radius:999px;font-size:10px}
.mobile-hint{position:absolute;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:10px;font-size:8px;color:rgba(255,255,255,.68);text-shadow:0 1px 3px #000;opacity:.9;transition:opacity .35s;white-space:nowrap}
.mobile-hint.hidden{opacity:0}
.mobile-only{display:none}
html.mobile-device .mobile-only{display:inline}
html.mobile-device .tiny{display:none}
html.mobile-device.mobile-playing #mobile-controls{display:block}
html.mobile-device #game{touch-action:none}
@media (orientation:portrait) and (max-width:650px){
  .joystick{left:max(12px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:clamp(108px,34vw,138px);height:clamp(108px,34vw,138px)}
  .actions{right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:clamp(145px,42vw,184px);height:clamp(118px,34vw,150px)}
  .actions .fire{width:clamp(68px,19vw,86px);height:clamp(68px,19vw,86px)}
  #mobile-reload{right:clamp(72px,20vw,92px)}
  #mobile-weapon{right:clamp(36px,10vw,46px);bottom:clamp(68px,19vw,86px)}
  .mobile-hint{display:none}
}
@media (max-height:430px){
  .joystick{width:112px;height:112px;bottom:max(10px,env(safe-area-inset-bottom))}
  .actions{width:160px;height:120px;bottom:max(10px,env(safe-area-inset-bottom))}
  .actions .fire{width:72px;height:72px}
  .actions .secondary-action{width:48px;height:48px}
  #mobile-reload{right:78px}
  #mobile-weapon{right:40px;bottom:70px}
  .mobile-hint{display:none}
}


/* upgrade: lanterna + utilidades mobile */
.mobile-top-actions{display:flex;gap:clamp(6px,1.5vw,12px);align-items:center;justify-content:flex-end;flex-wrap:wrap}
.mobile-top-actions .utility{min-width:clamp(58px,14vw,86px);min-height:44px;padding:8px 10px}
.mobile-top-actions .utility.off{opacity:.62}
@media (max-width:520px){.mobile-top-actions{gap:6px}.mobile-top-actions .utility{font-size:11px;min-width:56px;padding:7px 8px}}