*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:#08080c;color:#f6f3f2;font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex;flex-direction:column;align-items:center;padding:20px 10px}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation} .game{width:min(100%,530px);border:1px solid #6f6254;border-radius:19px;background:linear-gradient(145deg,#1c1717,#090a10);padding:13px;box-shadow:0 14px 45px #0008}.brand{text-align:center;padding:2px 0 10px}.crown{font-size:24px;color:#d7ad71}.brand strong{font-family:Georgia,"Palatino Linotype","Times New Roman",serif;font-size:clamp(29px,7vw,40px);font-weight:900;letter-spacing:.13em;padding-left:.13em;color:#e2c497;text-shadow:0 2px 2px #000,0 0 13px #ba8a5077;font-variant:small-caps}.subtitle{color:#c4b3a8;font-size:10px;letter-spacing:.18em}.rule{height:1px;background:linear-gradient(90deg,transparent,#ba9670,transparent);margin:10px 0}.stats{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:7px;margin-bottom:9px}.stat{border:1px solid #57505b;background:#1b1920;border-radius:9px;text-align:center;padding:7px 3px}.stat small{display:block;color:#aca5b2;font-size:10px}.stat b{font-size:18px}.shirt{filter:drop-shadow(0 0 7px #83baff)}.arena{position:relative;height:clamp(320px,60vh,420px);overflow:hidden;border:1px solid #8b7765;border-radius:12px;touch-action:none;background:#0d0e13}.photo{position:absolute;inset:0;background-image:url('/assets/arcade/tu-sabes-fondo.jpg');background-size:cover;background-position:center 57%;filter:saturate(.8)}.veil{position:absolute;inset:0;background:rgba(43,43,48,.51);pointer-events:none;transition:background .15s}.arena.blue .veil{background:rgba(9,49,111,.53)}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.feedback{position:absolute;top:15%;left:0;right:0;text-align:center;font-size:24px;font-weight:1000;text-shadow:0 2px 8px black;pointer-events:none;z-index:2}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:#070810e8;padding:16px;z-index:5}.overlay[hidden],.count[hidden]{display:none}.overlay h1{font-size:29px;letter-spacing:.11em;line-height:1.1;margin:0}.overlay p{color:#c3bbc2;font-size:13px;margin:0;max-width:290px}.namebox{width:100%;max-width:270px;text-align:left;border:1px solid #7c7173;border-radius:9px;background:#211f27;padding:10px}.namebox label{display:block;font-size:11px;font-weight:800;margin-bottom:7px}.namebox input{width:100%;padding:11px;border-radius:6px;border:1px solid #77717c;background:#0c0e15;color:white;outline:none}.namebox small{display:block;color:#bab1b8;margin-top:6px;font-size:10px}.primary{width:100%;max-width:270px;padding:12px;border:0;border-radius:8px;background:linear-gradient(120deg,#e7d4b8,#b7aaac);color:#1b171b;font-weight:900}.count{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:#070f1ce0;pointer-events:none}.count span{font-size:84px;font-weight:1000;text-shadow:0 0 26px #35aeff}.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:9px}.key{border:1px solid #ffffff99;border-radius:9px;padding:15px 0;font-size:18px;font-weight:900;color:white}.key:active{filter:brightness(1.5)}.keys.blue .key{background:#117ff9!important;color:white!important;border-color:#b0efff;box-shadow:0 0 20px #168bff,inset 0 0 13px #94dfff;animation:pulse .65s alternate infinite}@keyframes pulse{to{box-shadow:0 0 31px #36ccff,inset 0 0 18px #c1f6ff}}.controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.control{padding:12px 3px;border:1px solid #837985;border-radius:8px;background:#29242d;color:#f5f2f8;font-weight:800}.control.stop{border-color:#c6777e;background:#3d222c}.control:disabled{opacity:.4;cursor:default}.bottom{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:9px;color:#bcb0b7;font-size:11px}.sound{background:#292630;border:1px solid #746a77;border-radius:7px;color:white;padding:8px;font-size:11px;white-space:nowrap}.ranking{width:100%;max-width:280px;max-height:135px;overflow:auto;font-size:12px}.rankrow{display:flex;justify-content:space-between;padding:5px;border-bottom:1px solid #ffffff27}.muted{font-size:11px;color:#aca7b1}.mode{text-align:center;font-size:11px;color:#b7aeb6;margin:10px 0 2px;letter-spacing:.12em}.game:focus{outline:none}@media(max-width:560px){body{padding:10px 8px}.game,.guide{width:100%;max-width:530px}.stats{grid-template-columns:1fr 1.2fr 1fr}.bottom{flex-direction:column;align-items:flex-start}.sound{align-self:flex-end}.controls{gap:7px}.control{padding:11px 3px}.keys{gap:6px}.key{padding:14px 0;font-size:17px}}
@media(max-width:390px){.arena{height:355px}.overlay{gap:9px}.overlay h1{font-size:24px}.namebox{padding:8px}.key{padding:13px 0}}
 .heading-capo{font-family:Georgia,"Palatino Linotype",serif!important;font-variant:small-caps;letter-spacing:.10em!important;color:#e2c497!important;text-shadow:0 2px 2px #000,0 0 13px #ba8a5066!important}
/* V11: selector compacto en esquina; reglas fuera del tablero */
.game{position:relative}
.difficulty{position:absolute;right:13px;top:12px;z-index:7;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.difficulty label{font-size:9px;letter-spacing:.12em;color:#d7b889;font-weight:750}
.difficulty select{max-width:118px;color:#efe4d4;background:#24202a;border:1px solid #877053;border-radius:8px;padding:7px 21px 7px 8px;font-size:12px;cursor:pointer}
.difficulty select:disabled{opacity:.48;cursor:not-allowed}
.guide{width:min(100%,530px);margin-top:16px;padding:14px 15px;border:1px solid #65564a;border-radius:12px;background:#151219;color:#ccc2be;font-size:12px;line-height:1.55}
.guide h2{font-family:Georgia,serif;color:#dfc28f;font-size:17px;letter-spacing:.04em;margin:0 0 7px}
.guide p{margin:6px 0}
.guide .prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:10px 0}
.guide .price{border:1px solid #504451;background:#211b25;border-radius:9px;padding:8px 6px}
.guide .price b{display:block;color:#ead6bd;margin-bottom:3px}
.guide .price span{font-size:11px;display:block}
@media(max-width:420px){.difficulty{right:9px;top:10px}.difficulty label{font-size:8px}.difficulty select{font-size:11px;max-width:98px;padding:6px 15px 6px 5px}.brand strong{font-size:29px}.guide .prices{grid-template-columns:1fr}}

/* FRANXH responsive: compact on phones, expanded on desktop */
@media (min-width: 900px) and (pointer: fine) {
  .game {width:min(92vw,880px);max-width:880px;padding:22px;border-radius:22px;}
  .guide {width:min(92vw,880px);max-width:880px;padding:22px 26px;}
  .arena {height:clamp(480px,68vh,700px);}
  .brand strong {font-size:clamp(40px,4vw,60px);}
  .stat {padding:12px 9px;}
  .stat b {font-size:25px;}
  .stat small {font-size:12px;}
  .key {padding:20px 0;font-size:22px;}
  .control {padding:16px 6px;font-size:16px;}
  .overlay h1 {font-size:clamp(30px,3vw,42px);}
  .overlay p {font-size:16px;max-width:450px;}
  .namebox {max-width:390px;padding:16px;}
  .primary {max-width:390px;padding:15px;}
  .guide {font-size:15px;}
  .guide h2 {font-size:24px;}
  .guide .price span {font-size:14px;}
}

/* V16 — original perspective rhythm highway */
.arena{background:#0c0d16;border:1px solid #987e61;box-shadow:inset 0 0 55px #000b,0 0 16px #c8ab6e1e}
.arena .photo{opacity:.50;filter:saturate(.7) brightness(.8)}
.arena .veil{background:linear-gradient(to bottom,rgba(9,10,18,.56),rgba(22,22,38,.15),rgba(8,8,16,.28))}
.powerbar{display:flex;align-items:center;justify-content:center;gap:16px;margin:9px auto -1px;color:#bba88e;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.powerdial{position:relative;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at center,#101423 0 50%,transparent 52%),conic-gradient(from -90deg,#bd9957,#f4e5c0,#a57747,#bd9957);border:3px solid #25202a;box-shadow:0 0 19px #c4a66b42,inset 0 0 12px #000}
.powertxt{font-size:27px;font-weight:1000;color:#e7d6b4;text-shadow:0 0 13px #eac17966}
.powerdial.active{background:radial-gradient(circle at center,#0b1f3b 0 50%,transparent 52%),conic-gradient(from -90deg,#078dfc,#b6f9ff,#078dfc,#8aedff,#078dfc);box-shadow:0 0 27px #02a8ffbd,inset 0 0 17px #007aff}
.powerdial.active .powertxt{color:#d7faff;text-shadow:0 0 20px #47d5ff}
@media(max-width:500px){.powerbar{gap:7px;font-size:8px}.powerdial{width:61px;height:61px}.powertxt{font-size:23px}}

/* FRANXH V17 — lane keys: sculpted arcade pads */
.keys{gap:9px;margin-top:13px}
.key{position:relative;min-height:70px;border-radius:15px 15px 24px 24px!important;font-size:24px!important;font-family:Georgia,serif;letter-spacing:.1em;border:2px solid #ffffff77!important;box-shadow:inset 0 4px 7px #ffffff35,inset 0 -9px 12px #0006,0 6px 0 #05070b,0 10px 18px #0007;transform:translateY(0);transition:transform .08s,filter .08s}
.key::after{content:"";position:absolute;top:7px;left:18%;width:64%;height:3px;border-radius:100%;background:#fff8}
.key:active{transform:translateY(4px);box-shadow:inset 0 3px 9px #0007,0 2px 0 #05070b}
.powerdial.warm{background:radial-gradient(circle at center,#281d12 0 50%,transparent 52%),conic-gradient(from -90deg,#dc9b31,#fff4b8,#d88916,#ffe2a0,#dc9b31);box-shadow:0 0 21px #f6b950a8,inset 0 0 14px #392515}
.powerdial.warm .powertxt{color:#fff1c6;text-shadow:0 0 13px #ffad34}
@media(max-width:500px){.key{min-height:60px;font-size:21px!important}.keys{gap:6px}}

/* V18: acabado de botones satinado, sobrio y sin brillos blancos intensos */
.key{border:1px solid rgba(218,208,194,.27)!important;border-radius:16px 16px 21px 21px!important;box-shadow:inset 0 1px 1px rgba(255,242,224,.18),inset 0 -7px 14px rgba(0,0,0,.24),0 4px 0 #09090c,0 7px 13px rgba(0,0,0,.32)!important;font-family:Georgia,"Palatino Linotype",serif;font-weight:700!important;letter-spacing:.035em!important;text-shadow:0 1px 2px rgba(0,0,0,.22)}
.key::after{top:7px;left:24%;width:52%;height:1px;border-radius:100%;background:rgba(242,216,174,.19)}
.key:active{transform:translateY(3px);box-shadow:inset 0 3px 8px rgba(0,0,0,.35),0 1px 0 #09090c!important}
.keys.blue .key{border-color:rgba(157,234,255,.6)!important;box-shadow:0 0 16px rgba(18,140,252,.6),inset 0 0 10px rgba(137,217,255,.55)!important}
.namebox input{font-size:clamp(12px,3.1vw,15px)}
.namebox input::placeholder{color:#a7a2ad;opacity:1;letter-spacing:.035em;font-size:clamp(10px,2.6vw,13px)}

.song-preview{width:min(100%,530px);display:flex;align-items:center;gap:15px;padding:12px;margin-bottom:14px;background:linear-gradient(135deg,#141923,#0e1018);border:1px solid #62616c;border-radius:15px;color:#f0edf2}.song-preview img{width:95px;height:95px;object-fit:cover;border-radius:8px;border:1px solid #4e505a;flex-shrink:0}.song-preview h2{font:700 27px Georgia,serif;letter-spacing:.06em;margin:4px 0}.song-preview p{margin:4px 0;color:#c5c0c9;font-size:12px}.song-preview .song-kicker{color:#c3b7a0;font-size:10px;letter-spacing:.13em}.song-preview .song-caption{font-size:11px;color:#98949e}@media (min-width:760px){.song-preview{width:min(100%,880px)}}@media(max-width:420px){.song-preview{gap:10px;padding:9px}.song-preview img{width:80px;height:80px}.song-preview h2{font-size:21px}.song-preview .song-caption{font-size:10px}}

.game-back{width:min(92vw,880px);margin:0 auto 20px;color:#d6d4cd;font:12px system-ui;text-decoration:none;display:block}.game-back:focus-visible{outline:2px solid white;outline-offset:5px}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #eee;outline-offset:3px}