@font-face{font-family:"Anton";src:url("fonts/anton.woff2") format("woff2");font-display:swap}
:root{
  --bg:#1b0b2e;--bg2:#2a1146;--teal:#46c8be;--pink:#fc80c5;--gold:#f5c95c;--cream:#fef5db;
  --coral:#eb8b7b;--mag:#8b3385;--orange:#f39a3c;--ink:#120720;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --free:0;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{
  font-family:var(--sans);color:var(--cream);
  background:radial-gradient(120% 80% at 50% 0%,#4a1d6b 0%,var(--bg2) 38%,var(--bg) 75%);background-color:var(--bg);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;
  position:fixed;inset:0;
}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--teal)}

/* Fondo: se ilumina con la libertad */
.bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--free);transition:opacity 1.2s ease;
  background:
    radial-gradient(60% 45% at 50% 30%,rgba(255,236,170,.75) 0%,rgba(245,201,92,.35) 35%,transparent 70%),
    radial-gradient(70% 60% at 20% 90%,rgba(70,200,190,.55) 0%,transparent 60%),
    radial-gradient(60% 50% at 85% 75%,rgba(252,128,197,.40) 0%,transparent 60%),
    linear-gradient(180deg,#7a3e9e 0%,#b0679d 55%,#f0a868 100%)}
.rays{position:fixed;inset:-50vmax;z-index:0;pointer-events:none;opacity:calc(.08 + var(--free)*.22);
  background:repeating-conic-gradient(from 0deg at 50% 50%,var(--gold) 0 4deg,transparent 4deg 14deg);
  animation:spin 90s linear infinite;transition:opacity 1.2s ease}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 72% 12%,#fff 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 85% 46%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 66%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 55% 88%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 8% 82%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 92% 78%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 44% 34%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 63% 52%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 22% 40%,#fff 50%,transparent 51%);
  animation:twinkle 6s ease-in-out infinite alternate}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{from{opacity:.3}to{opacity:.75}}

/* Estructura */
#app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;max-width:760px;margin:0 auto;
  padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom))}
.hud{flex:0 0 auto}
.hud-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{font-family:var(--display);font-size:22px;letter-spacing:.02em;color:var(--gold);text-decoration:none;
  text-shadow:0 2px 0 var(--mag)}
.hud-btns{display:flex;gap:6px}
.icon-btn{width:36px;height:32px;border-radius:10px;border:1px solid rgba(254,245,219,.18);background:rgba(18,7,32,.45);font-size:14px;line-height:1}
.home-btn{width:auto;padding:0 10px;display:inline-flex;align-items:center;font-size:13px;font-weight:800;color:var(--cream);text-decoration:none}
.back-web{display:inline-block;margin-top:12px;font-size:14px;font-weight:700;color:var(--cream);opacity:.75;text-decoration:none}
.back-web:hover{opacity:1;text-decoration:underline}
.icon-btn.off{opacity:.45;text-decoration:line-through}
.hud-stats{display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr;gap:6px;margin-top:6px}
.stat{background:rgba(18,7,32,.5);border:1px solid rgba(254,245,219,.1);border-radius:10px;padding:4px 8px;min-width:0;position:relative}
.stat span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--teal);font-weight:800}
.stat b{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.1}
.stat.next{display:flex;flex-direction:column}
.stat.next canvas{position:absolute;right:6px;top:4px;width:44px;height:22px}
.stat.next em{font-style:normal;font-size:12px;font-weight:700;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:8px;line-height:1.1}
.meter{display:flex;align-items:center;gap:8px;margin:6px 2px 6px}
.meter span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--gold)}
.meter .bar{flex:1;height:9px;border-radius:99px;background:rgba(18,7,32,.6);border:1px solid rgba(254,245,219,.14);overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--gold),#fff6d6);
  box-shadow:0 0 12px rgba(245,201,92,.8);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.meter b{font-size:12px;min-width:38px;text-align:right}

.stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;gap:18px}
.boardwrap{position:relative;line-height:0}
#board{display:block;border-radius:10px;touch-action:none;
  box-shadow:0 0 0 2px rgba(245,201,92,.55),0 0 30px rgba(70,200,190,.25),0 10px 40px rgba(0,0,0,.45)}
.phrase{position:absolute;left:6%;right:6%;top:30%;text-align:center;line-height:1.2;pointer-events:none;
  font-family:var(--display);font-size:clamp(18px,5.6vw,28px);color:#fff;letter-spacing:.01em;
  text-shadow:0 0 18px rgba(245,201,92,.95),0 2px 0 var(--mag),0 0 2px #000;opacity:0;transform:translateY(10px) scale(.96)}
.phrase.show{animation:phrase 2.6s ease forwards}
@keyframes phrase{0%{opacity:0;transform:translateY(12px) scale(.95)}12%{opacity:1;transform:none}78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px)}}

.legend{display:none;width:200px;background:rgba(18,7,32,.55);border:1px solid rgba(254,245,219,.12);border-radius:14px;padding:12px 14px;font-size:13px;align-self:center}
.legend h3{margin:0 0 8px;font-family:var(--display);font-weight:400;font-size:18px;color:var(--gold);letter-spacing:.03em}
.legend ul{list-style:none;margin:0;padding:0}
.legend li{display:flex;align-items:center;gap:4px;margin:7px 0;flex-wrap:wrap}
.legend li span{margin-left:auto;color:var(--cream);opacity:.85}
.legend small{opacity:.6}
kbd{display:inline-block;min-width:22px;padding:2px 5px;border-radius:6px;background:var(--cream);color:var(--ink);font:700 12px var(--sans);text-align:center;box-shadow:0 2px 0 var(--gold)}
kbd.wide{min-width:60px}
.legend-note{margin:10px 0 0;font-size:12px;opacity:.7;line-height:1.35}

/* Botones táctiles */
.pad{display:none;flex:0 0 auto;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.pad button{height:58px;border-radius:16px;border:1px solid rgba(254,245,219,.18);background:rgba(18,7,32,.55);font-size:24px;
  touch-action:none;box-shadow:0 3px 0 rgba(139,51,133,.8)}
.pad button.drop{background:var(--gold);color:var(--ink);box-shadow:0 3px 0 #b1781f}
.pad button.on{transform:translateY(2px);box-shadow:none;background:rgba(70,200,190,.35)}
.pad button.drop.on{background:#ffe08a}

body.touch .pad{display:grid}
body.desk .legend{display:block}
@media (max-width:640px){body.desk .legend{display:none}}

/* Overlays */
.overlay{position:fixed;inset:0;z-index:5;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(18,7,32,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-y:auto}
.overlay.show{display:flex;animation:enter .4s cubic-bezier(.2,.8,.2,1)}
@keyframes enter{from{opacity:0}to{opacity:1}}
.card{width:100%;max-width:440px;text-align:center;background:linear-gradient(180deg,rgba(74,29,107,.92),rgba(27,11,46,.95));
  border:1px solid rgba(245,201,92,.35);border-radius:22px;padding:22px 20px;box-shadow:0 20px 60px rgba(0,0,0,.5);margin:auto}
.kicker{margin:0 0 4px;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:800;color:var(--teal)}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.02;margin:6px 0 10px}
h1{font-size:clamp(54px,17vw,84px);text-transform:uppercase;color:var(--gold);text-shadow:0 4px 0 var(--mag),0 0 30px rgba(245,201,92,.35)}
h2{font-size:clamp(28px,8vw,38px);color:var(--gold);text-shadow:0 3px 0 var(--mag)}
.lead{font-size:16px;line-height:1.45;margin:8px 0}
.lead b{color:var(--gold)}
.sub{margin:4px 0 14px;opacity:.85;font-style:italic}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;border-radius:999px;padding:14px 18px;
  font-weight:800;font-size:17px;text-decoration:none;margin:6px 0}
.btn.primary{background:var(--gold);color:var(--ink);box-shadow:0 4px 0 #b1781f}
.btn.share{background:var(--cream);color:var(--ink);box-shadow:0 4px 0 var(--teal)}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid rgba(254,245,219,.3)}
.btn:active{transform:translateY(2px);box-shadow:none}
.kbd-hint{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;background:rgba(18,7,32,.15)}
body.touch .kbd-hint{display:none}
.howto{font-size:13px;opacity:.8;line-height:1.4;margin-top:8px}
.howto p{margin:6px 0}
body.touch .only-desk,body.desk .only-touch{display:none}
.best{font-size:13px;color:var(--teal);margin:8px 0 0;min-height:1em}
.final{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.final div{background:rgba(18,7,32,.55);border-radius:12px;padding:8px 4px}
.final span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:800}
.final b{font-family:var(--display);font-weight:400;font-size:28px}
.rank{margin:10px 0 2px;font-size:15px}
.rank b{color:var(--gold)}
.rank-desc{margin:0 0 6px;font-size:14px;opacity:.85}
.top{margin:4px 0;font-size:14px}
.follow{display:block;margin-top:10px;font-weight:700;color:var(--teal);text-decoration:none}

@media (max-height:620px){
  .hud-stats .stat b{font-size:16px}.stat span{font-size:9px}.brand{font-size:18px}
  .pad button{height:48px}
  .card{padding:16px}.lead{font-size:14px}h1{font-size:52px}
}