:root{
  --night:#0b1033; --night2:#151c52; --ink:#070a22;
  --cream:#f4efe1; --muted:#b9b6d6;
  --yellow:#ffcc00; --blue:#2f6bff; --red:#e8283a; --green:#2f9e44; --leaf:#1f7a3a;
  --px: 4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--night); color:var(--cream);
  font-family:'VT323', ui-monospace, monospace; font-size:22px; line-height:1.25;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 12%, #fff6 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 30%, #fff5 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 44%, #fff5 50%, transparent 51%),
    radial-gradient(2px 2px at 6% 60%, #fff4 50%, transparent 51%),
    radial-gradient(2px 2px at 62% 70%, #fff4 50%, transparent 51%);
  background-size: 600px 600px;
  overflow-x:hidden;
}
a{color:var(--yellow)}
h1,h2,h3,.btn,.cab-title,.score-big,.eyebrow{font-family:'Press Start 2P', monospace; letter-spacing:.02em}
.hidden{display:none !important}

/* Luces de navidad */
.lights{position:fixed; top:0; left:0; right:0; height:18px; z-index:5; pointer-events:none;
  background:
    radial-gradient(circle at 10px 10px, var(--red) 4px, transparent 5px) 0 0/40px 18px,
    radial-gradient(circle at 30px 10px, var(--yellow) 4px, transparent 5px) 0 0/40px 18px,
    linear-gradient(#0000 0 3px, #263 3px 5px, #0000 5px);
  animation: blink 1.2s steps(2) infinite;}
@keyframes blink{50%{filter:hue-rotate(140deg) brightness(1.3)}}
.audio-bar{position:fixed; top:18px; left:0; right:0; z-index:6; border:0; cursor:pointer; width:100%;
  font-family:'VT323', monospace; font-size:20px; padding:7px 12px; color:var(--ink); background:var(--yellow);
  box-shadow:0 3px 0 var(--ink); animation: nudge 1.4s steps(2) infinite}
.audio-bar.hidden{display:none}
.audio-bar .short{display:none}
@media (max-width:640px){ .audio-bar .long{display:none} .audio-bar .short{display:inline} }
@keyframes nudge{50%{background:#ffe066}}
body.has-audio-bar .hero{padding-top:100px}
.credit{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(8px + env(safe-area-inset-bottom)); z-index:30;
  white-space:nowrap; text-decoration:none; color:var(--cream); font-size:19px; padding:5px 14px;
  background:#070a22e8; border:2px solid #5b3fb0; box-shadow:3px 3px 0 var(--ink)}
.credit:hover{color:var(--yellow); border-color:var(--yellow)}
body{padding-bottom:64px}
.small.visitor{color:#7fe3ff}

/* Hero */
.hero{min-height:88vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:64px 16px 32px; position:relative;}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:linear-gradient(90deg,var(--yellow) 0 33.3%,var(--blue) 33.3% 66.6%,var(--red) 66.6%);}
.eyebrow{color:var(--yellow); font-size:10px; margin:0 0 20px; animation: twinkle 2s steps(3) infinite}
@keyframes twinkle{50%{opacity:.4}}
h1{margin:0; display:flex; flex-direction:column; gap:12px; font-size:clamp(24px,6.4vw,64px); line-height:1.1;
  color:var(--yellow); text-shadow: var(--px) var(--px) 0 var(--red), calc(var(--px)*2) calc(var(--px)*2) 0 var(--ink);}
h1 span:last-child{color:var(--cream)}
.tagline{max-width:640px; color:var(--muted); font-size:24px; margin:28px auto 32px}
.hero-facts{list-style:none; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:center; padding:0; margin:32px 0 0; color:var(--muted)}
.hero-facts b{color:var(--yellow); font-family:'Press Start 2P'; font-size:14px; margin-right:4px}

/* Botones */
.btn{display:inline-block; cursor:pointer; border:0; background:var(--yellow); color:var(--ink);
  font-size:12px; padding:14px 18px; text-decoration:none;
  box-shadow: inset -4px -4px 0 #c79a00, 4px 4px 0 var(--ink); transition: transform .05s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translate(4px,4px); box-shadow: inset -4px -4px 0 #c79a00}
.btn:disabled{opacity:.6; cursor:wait}
.btn.ghost{background:var(--night2); color:var(--cream); box-shadow: inset -4px -4px 0 #0a0e33, 4px 4px 0 var(--ink); outline:2px solid #3a43a0}
.btn-big{font-size:16px; padding:20px 26px; animation: pulse 1s steps(2) infinite}
@keyframes pulse{50%{transform:translateY(-3px)}}
.mini{font-family:'Press Start 2P'; font-size:9px; background:#0003; color:var(--cream); border:2px solid #fff3; padding:6px 8px; cursor:pointer}

/* Cabinet */
.cabinet-wrap{padding:56px 16px; display:flex; justify-content:center}
.cabinet{width:100%; max-width:860px; background:#2a1a5e; border:4px solid var(--ink);
  box-shadow: 0 0 0 4px #5b3fb0, 8px 8px 0 4px var(--ink); padding:14px}
.cabinet-top{display:flex; align-items:center; gap:8px; padding:4px 4px 12px}
.dot{width:12px; height:12px; display:inline-block}
.dot.r{background:var(--red)} .dot.y{background:var(--yellow)} .dot.b{background:var(--blue)}
.cab-title{font-size:10px; color:#d8ccff; margin-left:8px; flex:1}
.screen{position:relative; background:#050816; border:4px solid var(--ink); min-height:420px;
  box-shadow: inset 0 0 0 4px #1c225e}
.screen::after{content:""; pointer-events:none; position:absolute; inset:0;
  background: repeating-linear-gradient(#0000 0 2px, #0003 2px 3px);}

.panel{padding:24px 20px 28px; max-width:560px; margin:0 auto; text-align:center}
.panel h2{font-size:16px; color:var(--yellow); margin:6px 0 10px}
.panel h3{font-size:11px; color:var(--cream); margin:22px 0 4px}
.small{color:var(--muted); margin:4px 0 14px}
.tiny{font-size:18px; color:var(--muted)}
form{display:grid; gap:12px; text-align:left}
label{display:grid; gap:4px; font-size:20px}
input,select{font-family:'VT323', monospace; font-size:22px; padding:8px 10px; background:var(--cream); color:var(--ink);
  border:0; box-shadow: inset 3px 3px 0 #0004; outline:none; width:100%}
input:focus,select:focus{box-shadow: inset 3px 3px 0 #0004, 0 0 0 3px var(--yellow)}
label.check{grid-template-columns: 22px 1fr; align-items:start; gap:10px; font-size:18px; color:var(--muted)}
label.check input{width:20px; height:20px; margin-top:3px; accent-color: var(--yellow)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-msg{min-height:24px; margin:0; color:var(--yellow); text-align:center}
.form-msg.err{color:#ff7b88}
.row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px}
label.inline{max-width:280px; margin:14px auto 0; text-align:left}

.chars{display:grid; grid-template-columns: repeat(4, 1fr); gap:10px}
.char{background:var(--night2); border:3px solid #2c3380; padding:10px 4px 8px; cursor:pointer; color:var(--cream);
  font-family:'VT323'; font-size:18px; display:flex; flex-direction:column; align-items:center; gap:6px}
.char canvas{width:64px; height:64px; image-rendering:pixelated}
.char[aria-checked="true"]{border-color:var(--yellow); background:#252d7a; transform:translateY(-3px)}
.tios{display:grid; grid-template-columns: repeat(3, 1fr); gap:8px}
.tios input{font-size:20px; padding:6px 8px}

.game-holder{position:relative; display:flex; flex-direction:column; align-items:center}
#game{display:block; width:100%; max-width:960px; height:auto; aspect-ratio: 4 / 3; margin:0 auto; image-rendering: pixelated; image-rendering: crisp-edges; background:#000; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.cabinet.playing .screen{min-height:0}
.stage{position:relative; margin:0 auto; line-height:0}
.stage #game{margin:0}
/* Cocina: tarjeta de opciones centrada sobre TODA la pantalla del juego */
.cabinet.in-kitchen .stage, .cabinet.in-kitchen .game-holder{position:static}
.kitchen{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:4%;
  background:#050816c4; line-height:1.2; z-index:2}
.k-card{width:min(560px, 100%); max-height:100%; overflow:auto; background:#151c52; border:3px solid var(--ink);
  box-shadow:0 0 0 3px var(--yellow), 6px 6px 0 3px var(--ink); padding:clamp(10px, 2.4vw, 18px); text-align:center}
.k-head{margin:0; font-family:'Press Start 2P', monospace; font-size:clamp(8px, 1.4vw, 11px); color:var(--yellow); letter-spacing:.04em}
.k-step{margin:6px 0 2px; font-size:clamp(18px, min(4.2vw, 6vh), 32px); color:var(--cream)}
.k-hint{margin:0 0 8px; font-size:clamp(16px, min(2.8vw, 4vh), 22px); color:#b8a8ee}
.k-opts{display:grid; gap:8px}
.k-opt{display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; border:0;
  font-family:'VT323', monospace; font-size:clamp(17px, min(3.4vw, 5vh), 27px); line-height:1.1; color:var(--ink);
  background:var(--cream); padding:clamp(6px, 1.4vh, 12px) 12px; min-height:46px;
  box-shadow: inset -4px -4px 0 #cfc6ad, 4px 4px 0 var(--ink); transition:transform .05s}
.k-opt:hover{background:#fff6d6}
.k-opt:active{transform:translate(3px,3px)}
.k-num{flex:none; display:inline-grid; place-items:center; width:1.5em; height:1.5em; background:var(--yellow); color:var(--ink);
  font-family:'Press Start 2P', monospace; font-size:.55em; box-shadow:inset -2px -2px 0 #c79a00}
.k-opt.bad{background:var(--red); color:#fff; box-shadow: inset -4px -4px 0 #8f0f1c}
.k-opt.bad .k-num{background:#fff; color:var(--red)}
.k-opt.good{background:var(--green); color:#fff; box-shadow: inset -4px -4px 0 #1b5e28}
.k-opt:disabled{cursor:default}
.k-feedback{min-height:1.2em; margin:8px 0 0; font-size:clamp(16px, min(2.8vw, 4vh), 22px); color:var(--yellow)}
.k-feedback.bad{color:#ff8a96}
.k-feedback.good{color:#9be37a}
@media (max-height:460px){ .k-hint{display:none} .k-opt{min-height:38px; padding:4px 10px} .k-opts{gap:6px} .kitchen{padding:2%} .k-step{margin:2px 0 6px} }
.cabinet.playing .pad{display:block}
.cabinet:not(.show-pad) .pad{display:none !important}
#juego{scroll-margin-top:18px}
button{touch-action:manipulation}
.rotate-hint{display:none; text-align:center; color:#b8a8ee; font-size:17px; margin:8px 0 0}

.score-big{font-size:36px; color:var(--yellow); margin:14px 0; text-shadow: 4px 4px 0 var(--red)}
.follow{display:inline-block; margin-top:22px; font-size:22px}

.pad{display:none; padding-top:14px}
.dpad{display:grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 56px); gap:6px; justify-content:center}
.dpad button{font-size:22px; background:#15183f; color:var(--cream); border:3px solid var(--ink); box-shadow: inset -3px -3px 0 #0008; touch-action:none; user-select:none; -webkit-user-select:none}
.dpad button.on{background:var(--yellow); color:var(--ink)}
.dpad [data-k="up"]{grid-column:2; grid-row:1}
.dpad [data-k="left"]{grid-column:1; grid-row:2}
.dpad [data-k="down"]{grid-column:2; grid-row:2}
.dpad [data-k="right"]{grid-column:3; grid-row:2}
.pad-help{text-align:center; color:#b8a8ee; font-size:18px; margin:10px 0 0}
@media (hover:hover) and (pointer:fine){ .pad{display:block} .dpad{display:none} }
@media (hover:none), (pointer:coarse){ .pad{display:block} .pad-help{display:none} }
@media (pointer:coarse) and (orientation:portrait){ .rotate-hint{display:block} }
.dpad button{-webkit-touch-callout:none}

/* Teléfono en horizontal: canvas a toda altura y D-pad flotando al lado */
@media (pointer:coarse) and (orientation:landscape) and (max-height:560px){
  .cabinet-wrap{padding:6px max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left))}
  .cabinet{position:relative; padding:4px 6px 6px; box-shadow:0 0 0 3px #5b3fb0}
  .cabinet-top{padding:0 2px 4px}
  .cabinet-top .dot{width:8px; height:8px}
  .cab-title{font-size:8px}
  .cabinet.playing .pad{position:absolute; left:max(10px, env(safe-area-inset-left)); bottom:14px; padding:0; z-index:3; pointer-events:none}
  .cabinet.playing .dpad{grid-template-columns:repeat(3, 54px); grid-template-rows:repeat(2, 50px); pointer-events:auto}
  .cabinet.playing .dpad button{background:#15183fcc}
  .credit{font-size:15px; padding:2px 10px; bottom:calc(3px + env(safe-area-inset-bottom))}
  .audio-bar{font-size:17px; padding:4px 10px}
}

/* Receta */
.recipe,.privacy{max-width:1000px; margin:0 auto; padding:56px 16px}
.recipe h2,.privacy h2{font-size:18px; color:var(--yellow); text-align:center}
.lead{max-width:680px; margin:12px auto 28px; text-align:center; color:var(--muted)}
.cards{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px}
.card{background:var(--night2); border:4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding:18px}
.card.wide{grid-column: 1 / -1; border-color:#1d5e33; background:#0f2a26}
.card h3{font-size:12px; color:var(--yellow); margin:0 0 10px; line-height:1.6}
.card h3 small{font-family:'VT323'; font-size:18px; color:var(--muted)}
.card ul,.card ol{margin:0; padding-left:22px}
.card li{margin:4px 0}
.tip{margin:14px 0 0; color:var(--yellow)}
.privacy p{max-width:720px; margin:0 auto; color:var(--muted)}

.footer{text-align:center; padding:40px 16px 56px; border-top:4px solid var(--ink); background:#080b26}
.footer p{margin:6px 0}
.heart{display:inline-block; animation: beat 1s steps(2) infinite}
@keyframes beat{50%{transform:scale(1.25)}}

@media (max-width: 640px){
  body{font-size:20px}
  .chars{grid-template-columns: repeat(2, 1fr)}
  .tios{grid-template-columns: repeat(2, 1fr)}
  .cards{grid-template-columns: 1fr}
  .cabinet-wrap{padding:28px 4px}
  .cabinet{padding:6px; border-width:3px; box-shadow: 0 0 0 3px #5b3fb0, 4px 4px 0 3px var(--ink)}
  .cabinet-top{padding:2px 2px 8px}
  .screen{border-width:3px}
  .panel{padding:18px 12px 22px}
  .dpad{grid-template-columns: repeat(3, 72px); grid-template-rows: repeat(2, 60px)}
  .credit{font-size:17px; padding:4px 12px}
  .audio-bar{font-size:18px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; scroll-behavior:auto}
}