:root{
  --design-w:1600;
  --design-h:900;
  --lime:#9cff55;
  --gold:#ffcc43;
  --panel:#0d1314f2;
  --panel2:#171d1ef4;
  --stroke:#6a7168;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050706;color:#fff;font-family:Trebuchet MS,Arial,sans-serif}
button{font:inherit}
.scene{position:fixed;inset:0;background:url('assets/encinar_sunset.jpg') center/cover no-repeat;filter:saturate(1.06)}
.shade{position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.46)),radial-gradient(circle at 50% 42%,transparent 0 42%,rgba(0,0,0,.52) 100%)}
.stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform-origin:center center;display:grid;grid-template-columns:300px 760px 280px;gap:20px;align-items:center;justify-content:center}
.metal-panel{background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 23%),linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--stroke);box-shadow:inset 0 0 0 4px #020505,inset 0 0 26px rgba(0,0,0,.92),0 16px 35px rgba(0,0,0,.48)}

/* RADIO */
.radio-module{height:650px;border-radius:28px;padding:18px;display:flex;flex-direction:column}
.radio-title{color:var(--lime);font-weight:1000;letter-spacing:.08em;text-align:center;font-size:20px;text-shadow:0 0 10px rgba(105,255,66,.35);margin-bottom:12px}
.live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ff473c;box-shadow:0 0 10px #ff473c;margin-right:7px;vertical-align:middle;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.45}}
.speech-bubble{position:relative;height:150px;padding:20px 22px 27px;border-radius:34px;background:linear-gradient(#fff7e1,#efe3bc);border:4px solid #dbcda1;color:#2a2318;font-size:22px;line-height:1.22;font-weight:900;font-style:italic;text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -9px 14px rgba(182,162,108,.3),0 8px 16px rgba(0,0,0,.27)}
.speech-bubble::after{content:'';position:absolute;left:50%;bottom:-17px;width:25px;height:25px;background:#efe3bc;border-right:4px solid #dbcda1;border-bottom:4px solid #dbcda1;transform:translateX(-50%) rotate(45deg)}
.speech-bubble.talking{animation:bubbleTalk .28s ease-in-out infinite alternate}
@keyframes bubbleTalk{to{transform:translateY(-3px) rotate(-.35deg)}}
.boar-stage{position:relative;height:350px;margin-top:16px;border-radius:18px;overflow:hidden;background:#08100d}
.boar-stage img{width:100%;height:100%;object-fit:cover;object-position:center 47%;display:block;transform-origin:center 68%}
.boar-stage.talking img{animation:boarTalk .24s ease-in-out infinite alternate}
@keyframes boarTalk{to{transform:translateY(-4px) rotate(.6deg) scale(1.018)}}
.on-air{position:absolute;right:10px;top:12px;background:#ad3020;color:#ffd89d;font-weight:1000;padding:6px 9px;border-radius:4px;box-shadow:0 0 13px rgba(255,72,45,.43)}
.mouth-flap{position:absolute;left:47.5%;top:59.5%;width:19%;height:8.5%;border-radius:50%;background:radial-gradient(ellipse at center,#5c140d 0 48%,#250604 55% 100%);opacity:0;transform:scaleY(.25);pointer-events:none}
.boar-stage.talking .mouth-flap{opacity:.86;animation:mouth .16s infinite alternate}
@keyframes mouth{to{transform:scaleY(1)}}
.radio-footer{display:flex;align-items:center;gap:10px;margin-top:12px}
.radio-btn{border:1px solid #7ce25b;background:linear-gradient(#294523,#152815);color:#c3ff9d;font-weight:1000;border-radius:10px;padding:10px 12px;cursor:pointer}
.equalizer{height:25px;display:flex;align-items:flex-end;gap:3px;flex:1}
.equalizer i{display:block;flex:1;border-radius:2px 2px 0 0;background:linear-gradient(#78ff5d,#f4dd4f,#ff9930);height:20%;transition:height .12s}
.equalizer.active i{animation:eq .65s infinite alternate}
.equalizer.active i:nth-child(2n){animation-delay:.12s}.equalizer.active i:nth-child(3n){animation-delay:.24s}.equalizer.active i:nth-child(4n){animation-delay:.36s}
@keyframes eq{to{height:100%}}
.mood{margin-top:12px;border:1px solid #465448;border-radius:10px;padding:10px 12px;color:#d9e3d5}
.mood-led{display:inline-block;width:10px;height:10px;border-radius:50%;background:#8dff4d;box-shadow:0 0 9px #8dff4d;margin-right:8px}

/* CABINET */
.arcade-cabinet{height:850px;display:grid;grid-template-rows:145px 570px 105px 35px;gap:0;position:relative}
.marquee{border-radius:34px 34px 22px 22px;text-align:center;padding:10px 24px;z-index:2;background:linear-gradient(180deg,#1a1713,#0d0b09);border:2px solid #615329;box-shadow:inset 0 0 0 4px #2c2412,inset 0 0 28px rgba(0,0,0,.88),0 16px 30px rgba(0,0,0,.42)}
.marquee-top{font-size:12px;letter-spacing:.28em;color:#d2cfb3}
.marquee h1{margin:-4px 0 -8px;font-family:Impact,Haettenschweiler,'Arial Black',sans-serif;font-size:104px;line-height:1;background:linear-gradient(#fff0a0 0%,#ffca2e 30%,#ee991a 61%,#93300e 90%);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 #581805) drop-shadow(0 0 18px rgba(255,175,24,.34));letter-spacing:.03em}
.marquee-sub{font-size:22px;font-weight:1000;letter-spacing:.18em;color:#8fff5a;text-shadow:0 0 11px rgba(112,255,75,.32)}
.cabinet-body{border-radius:0 0 28px 28px;padding:18px;display:grid;grid-template-columns:116px 470px 116px;gap:14px;align-items:center}
.inner-panel{height:220px;border-radius:18px;background:linear-gradient(#101718,#070c0d);border:1px solid #626c63;box-shadow:inset 0 0 0 3px #020505,inset 0 0 18px rgba(0,0,0,.8);padding:11px;text-align:center}
.mini-title{color:var(--lime);font-size:16px;font-weight:1000;letter-spacing:.08em}
.hold-panel canvas{display:block;width:100%;height:auto;margin-top:14px;background:#020708;border-radius:9px}
.tiny-btn{margin-top:8px;border:1px solid #6b756b;border-radius:8px;background:#1a2421;color:#d9e2d4;font-size:11px;font-weight:900;padding:7px 5px;cursor:pointer}
.combo-panel strong{display:block;color:#9dff59;font-family:Impact,'Arial Black',sans-serif;font-size:52px;margin-top:40px;text-shadow:0 0 13px rgba(154,255,85,.4)}
.combo-bars{height:35px;margin-top:24px;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.combo-bars i{width:9px;background:linear-gradient(#84ff55,#f7d94b);border-radius:2px 2px 0 0}
.combo-bars i:nth-child(1){height:22%}.combo-bars i:nth-child(2){height:38%}.combo-bars i:nth-child(3){height:60%}.combo-bars i:nth-child(4){height:82%}.combo-bars i:nth-child(5){height:48%}
.screen-bezel{width:470px;height:540px;border-radius:30px;padding:17px;background:linear-gradient(145deg,#273034,#0d1315 45%,#020506);border:2px solid #72786f;box-shadow:inset 0 0 0 5px #070b0c,inset 0 0 28px rgba(0,0,0,.95),0 12px 26px rgba(0,0,0,.35)}
.screen-glass{position:relative;width:436px;height:506px;border-radius:18px;background:linear-gradient(90deg,rgba(9,24,26,.95) 0 12%,rgba(3,17,20,.94) 12% 88%,rgba(9,24,26,.95) 88% 100%);box-shadow:inset 0 0 30px rgba(0,255,255,.08);overflow:hidden;display:flex;align-items:center;justify-content:center}
#gameCanvas{display:block;width:320px;height:506px;background:#031518;border-radius:8px;image-rendering:auto}
.game-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,8,9,.78);backdrop-filter:blur(3px)}
.game-overlay.show{display:flex}
.menu-card{width:78%;background:rgba(10,17,18,.91);border:1px solid #758077;border-radius:16px;padding:19px;box-shadow:inset 0 0 0 4px #020505,0 10px 26px rgba(0,0,0,.43);text-align:center}
.menu-kicker{font-size:11px;letter-spacing:.2em;color:#9cf36b}
.menu-card h2{margin:8px 0 14px;font-size:26px;letter-spacing:.11em}
.difficulty{display:block;width:100%;margin:9px 0;padding:13px 10px;border-radius:10px;border:2px solid rgba(255,255,255,.52);color:#fff;font-weight:1000;font-size:20px;letter-spacing:.04em;cursor:pointer;box-shadow:inset 0 1px 8px rgba(255,255,255,.25),0 5px 0 rgba(0,0,0,.33)}
.difficulty small{font-size:.8em;margin-left:5px}.easy{background:#4f992c}.normal{background:#2e6ab5}.hard{background:#9a3527}.resume{background:#71509f}.hidden{display:none!important}
.flash-message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Impact,'Arial Black',sans-serif;font-size:52px;text-shadow:0 0 14px #fff,0 4px 0 #000;opacity:0;pointer-events:none}
.flash-message.show{animation:flash .9s ease-out}@keyframes flash{30%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(1.3)}}
.control-deck{border-radius:0 0 34px 34px;background:linear-gradient(180deg,#18120d,#0d0a08);border:2px solid #605127;box-shadow:inset 0 0 0 4px #2b2211,inset 0 0 22px rgba(0,0,0,.85),0 12px 22px rgba(0,0,0,.3);display:grid;grid-template-columns:repeat(4,88px);gap:35px;justify-content:center;align-items:center;padding:7px 0 10px}
.arcade-btn{width:88px;height:88px;border-radius:50%;border:4px solid #242b23;color:#fff;font-size:46px;font-weight:1000;cursor:pointer;box-shadow:inset 0 7px 12px rgba(255,255,255,.38),inset 0 -11px 15px rgba(0,0,0,.38),0 8px 0 #111,0 12px 18px rgba(0,0,0,.38)}
.arcade-btn:active{transform:translateY(5px);box-shadow:inset 0 6px 12px rgba(255,255,255,.35),inset 0 -8px 13px rgba(0,0,0,.34),0 3px 0 #111,0 7px 12px rgba(0,0,0,.3)}
.green{background:#58b928}.amber{background:#dfa91b}.blue{background:#2b96c9}.red{background:#cf3b28}
.keyboard-strip{border-radius:0 0 13px 13px;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.1em;color:#d4ddd1;margin-top:6px}

/* STATS */
.stats-column{height:650px;display:grid;grid-template-rows:260px 180px 64px 64px 64px;gap:14px}
.score-panel,.next-panel{border-radius:24px;padding:17px}
.stat-label{color:var(--lime);font-weight:1000;letter-spacing:.08em;font-size:18px;text-shadow:0 0 10px rgba(105,255,66,.34)}
.score-number{font-family:Impact,'Arial Black',sans-serif;font-size:72px;line-height:1;margin:8px 0 11px}
.separator{border-top:1px dashed #788176;margin:12px 0}
.level-row{display:flex;align-items:center;gap:12px;font-size:54px;font-weight:1000;margin:6px 0 9px}.shield{color:var(--gold)}
.progress{height:15px;border-radius:999px;border:2px solid #9aa48d;background:#13210f;overflow:hidden}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#62dd2b,#d6ff55)}
.minor-row{display:flex;justify-content:space-between;font-size:12px;color:#cbd5c8;margin-top:12px}.minor-row b{color:#fff;font-size:18px}
.next-panel canvas{display:block;width:160px;height:105px;margin:10px auto 0;background:#020708;border:1px solid #596159;border-radius:11px}
.action-btn{border:none;border-radius:14px;color:#fff;font-weight:1000;font-size:22px;letter-spacing:.05em;cursor:pointer;box-shadow:inset 0 2px 10px rgba(255,255,255,.24),0 6px 0 rgba(0,0,0,.36)}
.action-btn:active{transform:translateY(4px);box-shadow:inset 0 2px 10px rgba(255,255,255,.24),0 2px 0 rgba(0,0,0,.36)}
.restart{background:#9b3327;border:1px solid #ff735e}.music{background:#175f82;border:1px solid #68d3ff}.pause{background:#573f86;border:1px solid #c09fff}