:root{
  --ink:#12102a; --hot:#ff2e88; --sun:#ffd23f; --aqua:#0fd6c6; --grape:#7b2ff7;
  --line:rgba(255,255,255,.16); --panel:rgba(14,12,38,.66);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:'Outfit',system-ui,sans-serif;color:#fff;
  background:#0b0a1c;
  background-image:radial-gradient(circle at 20% 0%,rgba(123,47,247,.35),transparent 55%),
                   radial-gradient(circle at 85% 15%,rgba(255,46,136,.28),transparent 50%),
                   radial-gradient(circle at 50% 100%,rgba(15,214,198,.2),transparent 55%);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;overscroll-behavior:none;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.16;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 3px);
}
.wrap{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding:10px 14px 30px}

/* barra superior */
.topbar{display:flex;align-items:center;gap:10px;padding:6px 0 8px}
.topbar a{
  text-decoration:none;color:#fff;font-family:'Bungee',cursive;font-size:11px;letter-spacing:.08em;
  background:rgba(255,255,255,.1);border:1px solid var(--line);padding:7px 13px;border-radius:999px
}
.topbar a:hover{background:var(--hot)}
.topbar h1{margin:0;font-family:'Bungee',cursive;font-size:clamp(14px,3.4vw,20px);color:var(--sun);letter-spacing:.02em}

/* marco de juego */
.frame{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:10px;
  backdrop-filter:blur(6px);width:max-content;max-width:100%;margin:0 auto;
  box-shadow:0 16px 44px rgba(0,0,0,.5)
}
canvas{display:block;border-radius:12px;background:#0e1030;touch-action:none;max-width:100%}
.hud{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0 0 8px;padding:0}
.hud div{text-align:center}
.hud span{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#a9a3d6}
.hud b{font-family:'Bungee',cursive;font-size:17px;color:var(--sun)}

/* botones */
.bar{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
button{
  font-family:'Bungee',cursive;font-size:12px;letter-spacing:.07em;padding:10px 18px;border-radius:999px;
  border:none;color:var(--ink);background:linear-gradient(90deg,var(--sun),var(--aqua));cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.4);touch-action:manipulation
}
button.ghost{background:rgba(255,255,255,.12);color:#fff;box-shadow:none;border:1px solid var(--line)}
button:active{transform:translateY(2px)}
.pad{display:grid;grid-template-columns:repeat(3,64px);gap:8px;justify-content:center;margin-top:12px}
.pad button{font-size:20px;padding:15px 0;border-radius:14px;background:rgba(255,255,255,.1);color:#fff;box-shadow:none;border:1px solid var(--line)}
.tip{text-align:center;color:#a9a3d6;font-size:11px;line-height:1.6;margin:12px 0 0}

/* overlay */
.over{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:18px 0;overflow-y:auto;
  background:rgba(6,5,18,.84);backdrop-filter:blur(4px)}
.over.hide{display:none}
body.locked{overflow:hidden}
.card{text-align:center;padding:18px;max-width:400px}
.card h2{font-family:'Bungee',cursive;font-size:24px;margin:0 0 8px;color:var(--sun)}
.card p{color:#cfc9f0;font-size:13px;line-height:1.6;margin:0 0 14px}
.card .big{font-family:'Bungee',cursive;font-size:36px;color:var(--hot);margin:4px 0}

/* popup personaje */
#pop{position:fixed;left:50%;bottom:14px;transform:translate(-50%,150%);z-index:30;pointer-events:none;
  transition:transform .45s cubic-bezier(.2,1.6,.4,1)}
#pop.show{transform:translate(-50%,0)}
#pop svg,#pop img{width:104px;height:auto;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}