:root {
  --ink: #f3f1ea;
  --mute: #9ea7b0;
  --panel: rgba(12, 16, 22, 0.72);
  --panel-2: rgba(16, 20, 28, 0.94);
  --line: rgba(127, 230, 255, 0.16);
  --orange: #e0662a;
  --amber: #ffa23a;
  --cyan: #6fe6ff;
  --gold: #ffd36b;
  --red: #ff5a4a;
  --green: #5cf0a0;
  --f: "Outfit", system-ui, sans-serif;
  --cut: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0f1216; color: var(--ink); font-family: var(--f); -webkit-font-smoothing: antialiased; user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
/* ---------- Cielo, noche y relámpagos (receta de Grovee) ---------- */
html { --sky-top: #9fd5ee; --sky-mid: #c8e6ea; --sky-low: #e7f3dd; }
body { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-low) 100%); }
#nightsky { z-index: -1; pointer-events: none; opacity: 0; transition: opacity 2s; position: fixed; inset: 0; overflow: hidden; }
#nightsky i { border-radius: 50%; width: 1px; height: 1px; position: absolute; top: 0; left: 0; }
#nightsky i.s1 { animation: twinkle 4.5s ease-in-out infinite alternate; }
#nightsky i.s2 { width: 2px; height: 2px; animation: twinkle 3.2s ease-in-out 1.1s infinite alternate-reverse; }
@keyframes twinkle { from { opacity: 1; } to { opacity: 0.45; } }
#nightsky .moon { background: radial-gradient(circle at 36% 34%, #fff 0%, #f3f1e2 45%, #d9d6c4 100%); border-radius: 50%; width: 58px; height: 58px; position: absolute; top: 9%; right: 9%; box-shadow: 0 0 22px 6px rgba(225,232,255,.55), 0 0 80px 30px rgba(170,190,255,.18); }
#nightsky .moon::before, #nightsky .moon::after { content: ""; background: rgba(170,166,145,.35); border-radius: 50%; position: absolute; }
#nightsky .moon::before { width: 13px; height: 13px; top: 14px; left: 30px; }
#nightsky .moon::after { width: 8px; height: 8px; top: 33px; left: 17px; }
@media (max-width: 700px) { #nightsky .moon { width: 44px; height: 44px; top: 13%; right: 7%; } }
#nightveil { pointer-events: none; opacity: 0; mix-blend-mode: multiply; background: radial-gradient(75% 70% at 50% 46%, rgba(120,145,230,.55) 0%, rgba(70,90,170,.75) 70%, rgba(35,45,105,.9) 100%); position: fixed; inset: 0; }
#lightning { pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(120% 90% at 35% -10%, #f0f5ff 0%, #d7e4ff 45%, #becdf0 100%); position: fixed; inset: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
.hide { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px; opacity: 0; transition: opacity .4s; }
#hud.show { opacity: 1; }
.hud-l { display: flex; flex-direction: column; gap: 6px; }
.depth { background: var(--panel); clip-path: var(--cut); padding: 9px 16px 10px; backdrop-filter: blur(6px); width: fit-content; min-width: 180px; border-left: 2px solid var(--cyan); }
.depth .lbl { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.depth .val { font-weight: 800; font-size: 36px; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.depth .rec { font-size: 12px; color: var(--gold); min-height: 14px; font-weight: 500; }
.bar { display: grid; grid-template-columns: 70px 1fr 64px; align-items: center; gap: 10px; background: var(--panel); clip-path: var(--cut); padding: 7px 12px; backdrop-filter: blur(6px); width: 290px; }
.bar .lbl { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.bar .track { height: 7px; background: rgba(255,255,255,.07); overflow: hidden; clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.bar .fill { height: 100%; width: 100%; background: linear-gradient(90deg, #22b07a, var(--green)); transition: width .15s linear; }
.bar .num { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.bar.low .fill { background: linear-gradient(90deg, #c22f2f, var(--red)); }
.bar.low { animation: pulse .9s ease-in-out infinite; }
.bar.cargo .fill { background: linear-gradient(90deg, #a5521f, var(--amber)); }
.bar.cargo.full .fill { background: linear-gradient(90deg, #ffb13b, var(--gold)); }
.bar.hull .fill { background: linear-gradient(90deg, #3b7bd6, #8fc4ff); }
.bar.hull.low .fill { background: linear-gradient(90deg, #c22f2f, var(--red)); }
.bar.heat .fill { background: linear-gradient(90deg, #f0a23a, #ff6a3a); }
.bar.heat.over .fill { background: #ff3b2f; }
.kits { font-size: 12px; color: var(--cyan); padding: 2px 4px; font-weight: 600; letter-spacing: .04em; }
@keyframes pulse { 50% { background: rgba(110, 24, 30, .82); } }
.hud-r { display: flex; align-items: center; gap: 8px; margin-right: 34px; }
.money { font-weight: 800; font-size: 26px; color: var(--gold); background: var(--panel); clip-path: var(--cut); padding: 6px 16px; backdrop-filter: blur(6px); font-variant-numeric: tabular-nums; }
.disc { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; background: var(--panel); clip-path: var(--cut); padding: 10px 12px; }
.hud-btn { pointer-events: auto; width: 42px; height: 42px; border: 0; background: var(--panel); clip-path: var(--cut); display: flex; gap: 5px; align-items: center; justify-content: center; }
.hud-btn i { width: 4px; height: 14px; background: var(--ink); display: block; }
.hud-btn:hover { background: var(--panel-2); }

/* medidor de profundidad */
#gauge { position: fixed; right: 14px; top: 84px; bottom: 90px; width: 16px; }
#gauge .g-track { position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: linear-gradient(#7fd06a, #b98a52 15%, #6a6370 50%, #3a2e55); opacity: .75; }
#gauge .g-rec { position: absolute; left: 0; width: 16px; height: 2px; background: var(--gold); }
#gauge .g-me { position: absolute; left: 1px; width: 14px; height: 14px; margin-top: -7px; background: var(--amber); clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 0 4px rgba(255,162,58,.8)); }
#gauge .g-pin { position: absolute; left: 4px; width: 8px; height: 8px; margin-top: -4px; transform: rotate(45deg); }
#gauge .g-pin.st { background: var(--cyan); }
#gauge .g-pin.mk { background: var(--gold); }
#gauge .g-pin.gd { background: #c49aff; }
#gauge .g-lbl { position: absolute; right: 20px; font-size: 10px; color: var(--mute); white-space: nowrap; }
#gauge .g-lbl.top { top: -4px; } #gauge .g-lbl.bot { bottom: -4px; }

.gem { flex: none; background: var(--c); clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%); position: relative; display: inline-block; }
.gem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%, rgba(0,0,0,.25)); }
.thumb { flex: none; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

/* ---------- avisos ---------- */
#floats { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.float { position: absolute; left: 0; top: 0; font-weight: 800; white-space: nowrap; text-shadow: 0 2px 6px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.8); }
#hint { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 12px); font-weight: 600; font-size: 17px; background: var(--panel-2); padding: 11px 22px; clip-path: var(--cut); opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; white-space: pre; max-width: 92vw; text-align: center; border-bottom: 2px solid var(--cyan); }
#hint.show { opacity: 1; transform: translate(-50%, 0); }
#prompt { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); font-weight: 700; font-size: 15px; letter-spacing: .03em; color: #10141a; background: var(--cyan); padding: 8px 16px; clip-path: var(--cut); opacity: 0; transition: opacity .2s; pointer-events: none; }
#prompt.show { opacity: 1; }
#toasts { position: fixed; right: 44px; top: 80px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { display: flex; gap: 12px; align-items: center; background: var(--panel-2); border-left: 3px solid var(--cyan); padding: 10px 16px 10px 12px; clip-path: var(--cut); min-width: 250px; max-width: 360px; opacity: 0; transform: translateX(30px); transition: opacity .35s, transform .35s; }
.toast.show { opacity: 1; transform: none; }
.toast-k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); font-weight: 600; }
.toast-t { font-weight: 800; font-size: 20px; }
.toast-t.money { color: var(--gold); }
.toast-s { font-size: 12px; color: var(--mute); margin-top: 2px; }
.toast.disc.r3 { border-left-color: #7fd0ff; } .toast.disc.r4 { border-left-color: #d59bff; } .toast.disc.r5 { border-left-color: var(--gold); }
.toast.disc.r4 .toast-k, .toast.disc.r5 .toast-k { color: var(--gold); }
.toast.upg { border-left-color: var(--orange); } .toast.upg .toast-k { color: var(--amber); }
.toast.sale { border-left-color: var(--gold); } .toast.sale .toast-k { color: var(--mute); }

#ufoReveal { position: fixed; left: 50%; top: 28%; transform: translate(-50%, -10px); text-align: center; opacity: 0; transition: opacity .8s, transform .8s; pointer-events: none; text-shadow: 0 0 24px rgba(201,240,122,.5); }
#ufoReveal.show { opacity: 1; transform: translate(-50%, 0); }
#ufoReveal .u-k { font-size: 14px; letter-spacing: .6em; color: #c9f07a; font-weight: 700; }
#ufoReveal .u-t { font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: .02em; }
#ufoReveal .u-s { font-size: 18px; color: #bfe8f2; }

/* ---------- taller ---------- */
#shop { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 30px); width: min(1060px, 95vw); background: var(--panel-2); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); padding: 16px 18px 12px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; backdrop-filter: blur(8px); border-top: 2px solid var(--orange); }
#shop.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.shop-h { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
.shop-t { font-weight: 800; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; }
.shop-s { color: var(--mute); font-size: 13px; }
.shop-m { font-weight: 800; font-size: 24px; color: var(--gold); }
.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.card { background: rgba(255,255,255,.035); border: 1px solid var(--line); clip-path: var(--cut); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.card.hero { background: rgba(224,102,42,.10); border-color: rgba(224,102,42,.45); }
.card.svc { background: rgba(111,230,255,.06); }
.card-h { display: flex; gap: 9px; align-items: center; }
.card-t { font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; }
.card-l { font-size: 12px; color: var(--mute); }
.card-s { font-size: 12.5px; min-height: 32px; }
.card-s .arrow { color: var(--mute); }
.card-s b { color: var(--cyan); font-weight: 600; }
.pips { display: flex; gap: 3px; }
.pips i { flex: 1; height: 4px; background: rgba(255,255,255,.1); }
.pips i.on { background: var(--orange); }
.buy { margin-top: auto; border: 0; clip-path: var(--cut); padding: 8px 10px; background: rgba(255,255,255,.07); color: var(--mute); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.buy.ok { background: var(--orange); color: #fff; }
.buy.ok:hover { filter: brightness(1.1); }
.buy kbd { font-family: var(--f); font-size: 11px; background: rgba(0,0,0,.22); padding: 1px 6px; }
.shop-f { text-align: center; color: var(--mute); font-size: 12px; margin-top: 10px; }
.ic { width: 32px; height: 32px; flex: none; background: rgba(255,255,255,.06); position: relative; clip-path: var(--cut); }
.ic::after { content: ""; position: absolute; inset: 7px; background: var(--amber); }
.ic-drill::after { clip-path: polygon(0 20%, 55% 20%, 100% 50%, 55% 80%, 0 80%); }
.ic-battery::after { background: var(--green); clip-path: polygon(10% 25%, 85% 25%, 85% 40%, 95% 40%, 95% 60%, 85% 60%, 85% 75%, 10% 75%); }
.ic-cargo::after { background: #d17a3e; clip-path: polygon(0 30%, 50% 5%, 100% 30%, 100% 80%, 50% 100%, 0 80%); }
.ic-thrusters::after { background: var(--cyan); clip-path: polygon(30% 0, 70% 0, 80% 55%, 50% 100%, 20% 55%); }
.ic-hull::after { background: #8fc4ff; clip-path: polygon(50% 0, 100% 18%, 90% 70%, 50% 100%, 10% 70%, 0 18%); }
.ic-cooling::after { background: #bfe8f2; clip-path: polygon(45% 0, 55% 0, 55% 40%, 95% 30%, 98% 40%, 60% 50%, 98% 60%, 95% 70%, 55% 60%, 55% 100%, 45% 100%, 45% 60%, 5% 70%, 2% 60%, 40% 50%, 2% 40%, 5% 30%, 45% 40%); }
.ic-sensors::after { background: #c9f07a; clip-path: circle(42% at 50% 50%); }
.ic-repair::after { background: var(--gold); clip-path: polygon(20% 0, 45% 0, 45% 35%, 80% 70%, 70% 80%, 35% 45%, 0 45%, 0 20%); }
.ic-cool::after { background: #9fe8ff; clip-path: polygon(45% 0, 55% 0, 55% 40%, 90% 20%, 95% 30%, 60% 50%, 95% 70%, 90% 80%, 55% 60%, 55% 100%, 45% 100%, 45% 60%, 10% 80%, 5% 70%, 40% 50%, 5% 30%, 10% 20%, 45% 40%); }
.ic-kit::after { background: var(--green); clip-path: polygon(38% 0, 62% 0, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0 62%, 0 38%, 38% 38%); }
.kits.rk { color: var(--green); }
.kits.ck { color: #9fe8ff; }
.kits.tk { color: #ffd36b; }
/* cerrar el taller: botón × y clic afuera */
#shopBack { position: fixed; inset: 0; background: rgba(5,8,12,.35); opacity: 0; pointer-events: none; transition: opacity .3s; }
#shopBack.show { opacity: 1; pointer-events: auto; }
.x-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; clip-path: var(--cut); }
.x-close:hover { background: rgba(255,90,74,.25); border-color: var(--red); }
#shop .x-close { top: 12px; right: 14px; }
#shop .shop-h { padding-right: 52px; }
/* teletransporte */
#teleport .tp { position: relative; min-width: min(460px, 92vw); }
.tp-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 8px; }
.tp-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); cursor: pointer; text-align: left; font: inherit; clip-path: var(--cut); }
.tp-item:hover:not(:disabled) { border-color: #ffd36b; background: rgba(255,211,107,.12); }
.tp-item:disabled { opacity: .45; cursor: not-allowed; }
.tp-item kbd { font: inherit; font-weight: 800; border: 1px solid currentColor; padding: 0 7px; color: #ffd36b; }
.tp-item .tp-n { font-weight: 700; } .tp-item .tp-d { font-size: 12px; color: var(--mute); }
.tp-item .tp-here { margin-left: auto; font-size: 11px; color: var(--green); }
.kits kbd { font: inherit; font-weight: 800; border: 1px solid currentColor; padding: 0 5px; margin-left: 4px; border-radius: 3px; }
.depth .obj { font-size: 11px; color: var(--ink); opacity: .85; margin-top: 4px; max-width: 230px; line-height: 1.3; }
.depth .obj b { color: var(--gold); font-weight: 700; }
#mission .mis { text-align: left; max-width: 620px; }
#mission .end-k { font-size: 12px; letter-spacing: .3em; color: #9ff6ff; text-transform: uppercase; }
#mission .mis-story { line-height: 1.5; }
.mis-list { margin: 14px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; counter-reset: m; }
.mis-list li { display: flex; gap: 10px; align-items: center; padding: 9px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); clip-path: var(--cut); counter-increment: m; }
.mis-list li::before { content: counter(m); width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); font-weight: 800; font-size: 12px; flex: none; }
.mis-list li.done { opacity: .6; } .mis-list li.done::before { content: '✓'; color: var(--green); border-color: var(--green); }
.mis-list li.now { border-color: var(--gold); } .mis-list li.now::before { color: var(--gold); border-color: var(--gold); }
.mis-list li span { margin-left: auto; font-size: 12px; color: var(--mute); }
.mis-how { font-size: 12px; color: var(--mute); margin-bottom: 14px; line-height: 1.5; }
.depth .layer { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; }
/* señal hacia la siguiente pieza de la nave */
.signal { display: flex; gap: 10px; align-items: center; background: var(--panel); clip-path: var(--cut); padding: 8px 12px; width: 290px; border-left: 2px solid #9ff6ff; animation: sigpulse 2.4s ease-in-out infinite; }
.signal .sig-arrow { font-size: 26px; font-weight: 800; color: #9ff6ff; width: 30px; text-align: center; text-shadow: 0 0 10px #6fe6ff; }
.signal .sig-k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.signal .sig-t { font-size: 14px; font-weight: 700; }
.signal .sig-p { font-size: 11px; color: #9ff6ff; }
@keyframes sigpulse { 50% { box-shadow: inset 0 0 18px rgba(111,230,255,.18); } }
/* letrero grande (capas, nave) */
#ufoReveal.layerb .u-t { letter-spacing: .04em; }
#whiteout { position: fixed; inset: 0; background: #f4fbff; opacity: 0; pointer-events: none; }
/* pantalla final */
#ending .end { text-align: center; }
#ending .end-k { font-size: 12px; letter-spacing: .3em; color: #9ff6ff; text-transform: uppercase; }
#ending .end-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
#ending .end-grid div { background: rgba(255,255,255,.04); border: 1px solid var(--line); padding: 10px; }
#ending .end-grid b { display: block; font-size: 20px; color: var(--gold); }
#ending .end-grid span { font-size: 11px; color: var(--mute); letter-spacing: .08em; text-transform: uppercase; }
#ending .end-btns { display: flex; gap: 10px; justify-content: center; }
body.ending-on #hud, body.ending-on #prompt, body.ending-on #hint, body.ending-on #toasts { opacity: 0 !important; }
.card .req { font-size: 11px; color: var(--mute); margin-top: 4px; }
.card .req b.ok { color: var(--green); } .card .req b.no { color: #ff8a7a; }
.vault-line { font-size: 11px; color: var(--mute); margin-top: 8px; text-align: left; }
.kits.rk kbd { font: inherit; font-weight: 800; border: 1px solid currentColor; padding: 0 5px; margin-left: 4px; border-radius: 3px; }
.ic-station::after { background: var(--cyan); clip-path: polygon(30% 100%, 30% 40%, 50% 0, 70% 40%, 70% 100%); }

/* ---------- pantallas ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .35s; }
.screen.show { opacity: 1; pointer-events: auto; }
.screen.dim { background: rgba(8, 10, 14, .62); backdrop-filter: blur(3px); }
#title { background: linear-gradient(90deg, rgba(10,13,18,.86) 0%, rgba(10,13,18,.5) 40%, rgba(10,13,18,0) 68%); justify-content: flex-start; padding-left: 7vw; }
.title-box { max-width: 580px; }
.studio-logo { width: min(300px, 60vw); height: auto; display: block; margin-bottom: 6px; }
.logo { font-weight: 800; font-size: clamp(58px, 9.5vw, 128px); line-height: .9; margin: 8px 0 12px; letter-spacing: -.01em; color: #fff; }
.logo span { color: var(--orange); }
.tagline { font-size: 19px; color: #e3e6ea; margin-bottom: 28px; }
.title-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { border: 0; clip-path: var(--cut); padding: 13px 28px; font-weight: 700; font-size: 17px; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.1); }
.btn:hover { background: rgba(255,255,255,.17); }
.btn.primary { background: var(--orange); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.btn.danger { color: var(--red); background: rgba(255,90,74,.08); }
.lang-switch { display: flex; gap: 4px; margin-top: 26px; }
.lang-switch button { border: 0; background: rgba(255,255,255,.08); clip-path: var(--cut); padding: 6px 13px; font-weight: 700; font-size: 13px; color: var(--mute); }
.lang-switch button.on { background: rgba(255,255,255,.92); color: #10141a; }
.keys { margin-top: 18px; color: var(--mute); font-size: 13px; }
.version { position: absolute; right: 18px; bottom: 14px; font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: .08em; }
.menu { background: var(--panel-2); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); padding: 26px 28px; width: min(390px, 92vw); display: flex; flex-direction: column; gap: 10px; text-align: center; border-top: 2px solid var(--cyan); }
.menu.wide { width: min(900px, 95vw); max-height: 88vh; }
.menu-t { font-weight: 800; font-size: 26px; letter-spacing: .14em; text-transform: uppercase; }
.menu-s { color: var(--mute); font-size: 14px; margin-bottom: 8px; line-height: 1.45; }
.menu-f { color: var(--mute); font-size: 12px; margin-top: 8px; line-height: 1.5; }
.menu-head { display: flex; justify-content: space-between; align-items: baseline; }
.col-count { font-size: 18px; color: var(--gold); font-weight: 700; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; overflow-y: auto; text-align: left; padding: 4px 2px; }
.col-i { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,.04); clip-path: var(--cut); padding: 10px 12px; }
.col-i.unk { opacity: .5; }
.col-n { font-weight: 700; font-size: 15px; }
.col-s { font-size: 12px; color: var(--mute); }
.col-d { font-size: 12px; color: #d6dbe0; font-style: italic; margin: 2px 0; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } .bar { width: 240px; } .depth .val { font-size: 28px; } }

/* ---------- cuenta y nube ---------- */
.cloud-link { display: block; margin-top: 18px; border: 0; background: none; color: var(--cyan); font-weight: 600; font-size: 14px; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.cloud-link.on { color: #bff8ef; text-decoration: none; }
.cloud-link.on::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 8px; }
#accForm, #accIn { display: flex; flex-direction: column; gap: 10px; }
#accForm input { font: inherit; font-size: 15px; color: var(--ink); background: rgba(255,255,255,.07); border: 1px solid var(--line); padding: 11px 12px; clip-path: var(--cut); outline: none; }
#accForm input:focus { border-color: var(--cyan); }
.linkish { border: 0; background: none; color: var(--mute); font-size: 13px; text-decoration: underline; }
.acc-mail { font-weight: 700; font-size: 17px; }
.acc-msg { font-size: 13px; color: var(--cyan); min-height: 18px; line-height: 1.4; }
.acc-msg.err { color: var(--red); }
.menu.wide2 { width: min(560px, 94vw); }
.conf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.conf-card { background: rgba(255,255,255,.04); clip-path: var(--cut); padding: 14px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.conf-h { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--cyan); }
.conf-l { font-size: 14px; } .conf-l.small { font-size: 11px; color: var(--mute); margin-bottom: 6px; }
.cloud-ic { width: 26px; height: 18px; background: var(--green); clip-path: path('M7 18h13a6 6 0 0 0 1-11.9A8 8 0 0 0 5.6 8 5 5 0 0 0 7 18z'); opacity: .85; }
.cloud-ic.saving { background: var(--amber); animation: pulse2 .8s infinite; }
.cloud-ic.error { background: var(--red); }
@keyframes pulse2 { 50% { opacity: .35; } }

/* ================= Celular / táctil ================= */
html, body { overscroll-behavior: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
canvas#game { touch-action: none; }
#touch { display: none; }
body.touch #touch { display: block; }
body.touch #hud:not(.show) ~ #touch, body.ending-on #touch, body[data-mode]:not([data-mode="play"]) #touch { display: none; }
body.touch #gauge { display: none; }
#tJoy { position: fixed; left: 0; bottom: 0; width: 42vw; height: 58vh; touch-action: none; z-index: 5; }
#tJoy .joy-base, #tJoy .joy-knob { position: absolute; left: max(90px, calc(env(safe-area-inset-left) + 80px)); top: calc(100% - 100px); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
#tJoy .joy-base { width: 120px; height: 120px; background: radial-gradient(circle, rgba(111,230,255,.10), rgba(12,16,22,.45) 70%); border: 2px solid rgba(111,230,255,.35); opacity: .55; transition: opacity .15s; }
#tJoy .joy-base.on { opacity: 1; }
#tJoy .joy-knob { width: 54px; height: 54px; background: radial-gradient(circle at 40% 35%, #dffbff, #6fe6ff 60%, #1f8fb0); box-shadow: 0 0 18px rgba(111,230,255,.6); }
#tJoy .joy-hint { position: absolute; left: max(30px, env(safe-area-inset-left)); bottom: 12px; font-size: 10px; color: var(--mute); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
#tBtns { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 58px); grid-template-rows: 58px 58px 76px; gap: 8px; z-index: 6; }
#tBtns .tb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid rgba(111,230,255,.35); background: rgba(12,16,22,.62); color: var(--ink); clip-path: var(--cut); backdrop-filter: blur(6px); touch-action: none; padding: 0; }
#tBtns .tb b { font-size: 18px; font-weight: 800; line-height: 1; }
#tBtns .tb i { font-style: normal; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
#tBtns .tb s { position: absolute; top: 3px; right: 6px; text-decoration: none; font-size: 10px; font-weight: 800; color: var(--gold); }
#tBtns .tb.down { background: rgba(111,230,255,.35); }
#tBtns .tb.off { opacity: .35; }
#tBtns .big { grid-column: 2 / span 2; grid-row: 3; border-color: var(--orange); }
#tBtns .big b { font-size: 26px; }
#tBtns .big.ready { background: rgba(224,102,42,.55); animation: tbpulse 1.2s ease-in-out infinite; }
@keyframes tbpulse { 50% { box-shadow: inset 0 0 22px rgba(255,190,120,.6); } }
#tbM { grid-column: 1; grid-row: 1; } #tbQ { grid-column: 2; grid-row: 1; } #tbT { grid-column: 3; grid-row: 1; }
#tbF { grid-column: 2; grid-row: 2; } #tbR { grid-column: 3; grid-row: 2; }
/* en táctil los chips de teclas sobran (los botones muestran los conteos) y la señal va arriba al centro */
body.touch .kits { display: none !important; }
body.touch .signal { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: auto; max-width: 46vw; padding: 5px 12px; }
body.touch #prompt { bottom: 96px; }
body.touch #hint { bottom: 150px; max-width: 46vw; }
body.touch .title-box .keys:not(.ios-tip) { display: none; }
.ios-tip { display: none; }
body.ios-browser .ios-tip { display: block; color: var(--cyan); }
/* girar el teléfono */
#rotate { display: none; position: fixed; inset: 0; z-index: 50; background: #0f1216; color: var(--ink); flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; font-weight: 700; padding: 30px; }
#rotate .rot-ic { width: 46px; height: 80px; border: 3px solid var(--cyan); border-radius: 8px; animation: rot 2s ease-in-out infinite; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { body.touch #rotate { display: flex; } }
/* pantallas bajas (celular acostado) */
@media (max-height: 520px) {
  #hud { padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); }
  .hud-l { gap: 4px; }
  .depth { padding: 5px 10px 6px; min-width: 130px; }
  .depth .val { font-size: 22px; } .depth .lbl { font-size: 9px; } .depth .rec, .depth .layer { font-size: 10px; } .depth .obj { font-size: 10px; max-width: 190px; }
  .bar { width: 190px; grid-template-columns: 54px 1fr 48px; padding: 4px 9px; gap: 7px; }
  .bar .lbl { font-size: 9px; } .bar .num { font-size: 11px; }
  .money { font-size: 18px; padding: 4px 10px; }
  .hud-r { margin-right: 22px; }
  #gauge { top: 56px; bottom: 120px; right: 6px; }
  #shop { bottom: 6px; padding: 10px 12px 8px; max-height: 92vh; overflow-y: auto; }
  #shop .cards { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  #shop .card { padding: 7px 9px; } #shop .card-t { font-size: 12px; } #shop .card-s, #shop .card-l { font-size: 10px; }
  #shop .buy { padding: 6px 8px; font-size: 12px; }
  .menu { max-height: 94vh; overflow-y: auto; padding: 16px 18px; }
  .menu-t { font-size: 22px; }
  #ufoReveal .u-t { font-size: 30px; }
  #toasts { transform: scale(.8); transform-origin: top right; top: 56px; right: 30px; }
  #hint { white-space: normal; font-size: 14px; padding: 8px 16px; }
  #prompt { font-size: 13px; }
}

/* ---------- mapa guía ---------- */
#map .map { position: relative; width: min(760px, 96vw); height: min(88vh, 900px); max-height: none; padding: 16px 18px 12px; gap: 8px; text-align: left; }
.map-head { display: flex; align-items: baseline; gap: 16px; padding-right: 44px; flex-wrap: wrap; }
.map-head .menu-t { font-size: 22px; }
.map-obj { font-size: 13px; color: var(--mute); } .map-obj b { color: var(--cyan); }
.map-wrap { flex: 1; min-height: 0; position: relative; touch-action: none; cursor: grab; border: 1px solid var(--line); }
.map-wrap canvas { display: block; position: absolute; left: 0; top: 0; }
.map-wrap { overflow: hidden; }
.map-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--mute); }
.map-leg .ml { display: inline-flex; align-items: center; gap: 6px; }
.map-leg i { width: 10px; height: 10px; display: inline-block; }
.ml.you i { background: #ffa23a; border-radius: 50%; } .ml.st i { background: #5cf0a0; } .ml.ant i { background: #ffd36b; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ml.obj i { background: rgba(111,230,255,.6); border-radius: 50%; box-shadow: 0 0 6px #6fe6ff; } .ml.rec i { height: 2px; background: #ffd36b; }
#map .menu-f { margin-top: 0; }
@media (max-height: 520px) {
  #map .map { width: 98vw; height: 96vh; max-height: 96vh; padding: 8px 10px 6px; gap: 5px; overflow: hidden; }
  .map-head .menu-t { font-size: 16px; } .map-obj { font-size: 11px; }
  #map .menu-f { display: none; }
  #map .x-close { top: 5px; right: 6px; }
}

.mis-keys { font-size: 12px; color: var(--mute); border-top: 1px solid var(--line); padding-top: 8px; }
.mis-how b { color: var(--cyan); font-weight: 600; }