*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#05040f;color:#e8ecff;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none}
canvas#game{position:fixed;display:block;touch-action:none}
.hidden{display:none!important}
:root{--c1:#28e6ff;--c2:#ff2fb4;--c3:#ffd23a;--panel:rgba(10,12,30,.78);--font:"Arial Black","Segoe UI Black",Impact,"Helvetica Neue",Arial,sans-serif}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;padding:12px}
button{font:inherit;color:inherit}

/* Title */
.title-wrap{display:flex;flex-direction:column;align-items:center;gap:min(2.2vh,16px);margin-top:-6vh}
.logo{display:flex;flex-direction:column;align-items:center;line-height:.86;font-family:var(--font);letter-spacing:.04em;transform:skewX(-8deg)}
.logo span{display:block;background:linear-gradient(180deg,#fff 0%,#c4d2ea 44%,#4a5a78 50%,#e4ecff 76%,#8aa0c0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1.5px #7af4ff;filter:drop-shadow(0 0 14px rgba(40,230,255,.55)) drop-shadow(0 6px 0 #070814)}
.logo .l1{font-size:clamp(40px,10vmin,96px)}
.logo .l2{font-size:clamp(50px,13.5vmin,130px)}
.tagline{font-family:var(--font);font-size:clamp(11px,2vmin,16px);letter-spacing:.3em;color:#ff9ad8;text-shadow:0 0 10px #ff2fb4;text-transform:uppercase;text-align:center}
.menu{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
.hi{font-family:var(--font);font-size:clamp(12px,2vmin,15px);color:#ffd23a;letter-spacing:.15em}
.hi b{color:#fff}

/* Buttons */
.btn{font-family:var(--font);font-size:clamp(14px,2.6vmin,20px);letter-spacing:.08em;min-width:13em;padding:.6em 1.4em;cursor:pointer;
  background:linear-gradient(180deg,rgba(40,50,90,.85),rgba(16,20,44,.9));border:1.5px solid rgba(122,244,255,.45);border-radius:4px;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);color:#e8f6ff;transition:transform .1s,background .15s,box-shadow .15s;outline:none}
.btn:hover,.btn:focus-visible,.btn:focus{background:linear-gradient(180deg,rgba(40,230,255,.35),rgba(20,60,120,.9));transform:translateX(4px);border-color:#7af4ff;text-shadow:0 0 8px #28e6ff}
.btn.primary{background:linear-gradient(180deg,#ff5ac8,#b0148a);border-color:#ffb0e6;color:#fff}
.btn.primary:hover,.btn.primary:focus{background:linear-gradient(180deg,#ff8ad8,#d02aa8);text-shadow:0 0 10px #fff}
.btn.small{min-width:0;font-size:clamp(12px,2.1vmin,15px);padding:.5em 1em}
.btn.danger{border-color:#ff6a80;background:linear-gradient(180deg,rgba(120,20,40,.9),rgba(60,10,20,.9))}
.btn.reward{background:linear-gradient(180deg,#ffb86b,#ff6a00);border-color:#ffd8a0;color:#1a0a00}
.btn.toggle.off{opacity:.55}
.btn:disabled{opacity:.35;cursor:default}

/* Panels */
.panel{background:var(--panel);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(122,244,255,.3);border-radius:10px;padding:clamp(14px,3vmin,28px) clamp(16px,4vmin,36px);
  box-shadow:0 0 40px rgba(40,230,255,.12),inset 0 0 30px rgba(255,47,180,.06);display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.8vmin,14px);max-width:min(96vw,560px);max-height:96vh}
.panel.wide{max-width:min(96vw,980px)}
.panel.scroll{overflow-y:auto;touch-action:pan-y}
h2{font-family:var(--font);font-size:clamp(22px,5vmin,40px);letter-spacing:.08em;color:#fff;text-shadow:0 0 16px var(--c1),0 3px 0 #070814;text-align:center}
h2.red{text-shadow:0 0 16px #ff3050,0 3px 0 #070814}
.sub{color:#ffd23a;font-family:var(--font);letter-spacing:.1em;font-size:clamp(12px,2vmin,15px)}
.story{max-width:780px;text-align:center;line-height:1.45;font-size:clamp(13px,2.2vmin,16px);color:#cfd8ff}
.small{font-size:clamp(12px,2vmin,14px);color:#aab}
.big{font-size:clamp(18px,3.4vmin,26px)}
.big b,p b{color:#ffd23a}
.new{color:#ff5ac8;font-family:var(--font);margin-left:8px;animation:blink .6s infinite alternate}
@keyframes blink{to{opacity:.4}}
.count{font-family:var(--font);font-size:clamp(60px,16vmin,120px);color:#ffd23a;text-shadow:0 0 30px #ff8a1a;line-height:1}

/* Select */
.cards{display:flex;gap:clamp(10px,3vmin,28px);justify-content:center}
.card{cursor:pointer;background:linear-gradient(180deg,rgba(30,40,80,.6),rgba(10,12,30,.8));border:2px solid rgba(122,244,255,.25);border-radius:10px;padding:8px 14px 12px;
  display:flex;flex-direction:column;align-items:center;gap:3px;width:clamp(150px,30vmin,250px);transition:transform .15s,border-color .15s,box-shadow .15s;outline:none}
.card canvas{width:100%;height:auto;aspect-ratio:220/230;max-height:32vh;object-fit:contain}
.card h3{font-family:var(--font);font-size:clamp(16px,3.2vmin,24px);letter-spacing:.1em}
.card .who{font-size:clamp(11px,1.8vmin,13px);color:#9ab}
.card .sp{font-size:clamp(11px,1.8vmin,13px);color:#cde;margin-top:4px}
.card.sel{border-color:#ff5ac8;box-shadow:0 0 24px rgba(255,90,200,.45);transform:translateY(-4px)}
.card:focus{border-color:#7af4ff}
.card[data-char="acero"].sel h3{color:#7af4ff}.card[data-char="volta"].sel h3{color:#ff8ae0}
.stat{display:flex;align-items:center;gap:8px;width:100%;font-size:clamp(10px,1.7vmin,12px);color:#aab}
.stat span{width:6.5em;text-align:right}
.stat i{flex:1;height:6px;background:rgba(255,255,255,.1);border-radius:3px;position:relative;overflow:hidden}
.stat i::after{content:"";position:absolute;inset:0;width:var(--v);background:linear-gradient(90deg,#28e6ff,#ff5ac8)}
.opts{display:flex;flex-direction:column;gap:8px}
.lbl{font-family:var(--font);font-size:clamp(11px,1.9vmin,14px);color:#9ab0ff;width:6.5em;text-align:right;letter-spacing:.08em}
.seg{font-family:var(--font);font-size:clamp(11px,1.9vmin,14px);padding:.45em .9em;background:rgba(20,24,50,.8);border:1.5px solid rgba(122,244,255,.25);border-radius:4px;cursor:pointer;outline:none;letter-spacing:.05em}
.seg.sel{background:linear-gradient(180deg,#28e6ff,#1a6ac8);color:#041018;border-color:#bff}
.seg:focus{border-color:#ff5ac8;box-shadow:0 0 10px rgba(255,90,200,.5)}
.seg:disabled{opacity:.4}
.seg i{font-style:normal;margin-left:4px}
.buttons .btn{min-width:10em}

/* Howto */
.howgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%}
.howgrid h4{font-family:var(--font);color:#7af4ff;margin:6px 0;font-size:clamp(12px,2vmin,15px);letter-spacing:.06em}
.howgrid table{border-collapse:collapse;width:100%;font-size:clamp(11px,1.9vmin,14px)}
.howgrid td{padding:3px 4px;border-bottom:1px solid rgba(255,255,255,.07)}
.howgrid td:first-child{color:#9ab}
.howgrid ul{padding-left:16px;font-size:clamp(11px,1.9vmin,14px);line-height:1.45}
.howgrid p{font-size:clamp(11px,1.9vmin,14px)}
kbd{font-family:var(--font);font-size:.85em;background:#1a2040;border:1px solid #4a5a9a;border-bottom-width:3px;border-radius:4px;padding:0 5px;color:#fff}
@media (max-width:760px),(max-height:430px){.howgrid{grid-template-columns:1fr 1fr}.howgrid .col:last-child{grid-column:1/-1}}

.tally{border-collapse:collapse;min-width:min(80vw,340px);font-size:clamp(13px,2.3vmin,17px)}
.tally td{padding:4px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.tally td:last-child{text-align:right;font-family:var(--font);color:#ffd23a}
.tally .tot td{font-size:1.2em;color:#fff}
.credits{text-align:center;line-height:1.5;display:flex;flex-direction:column;gap:10px;font-size:clamp(13px,2.2vmin,16px)}

/* Touch controls */
#touch{position:fixed;inset:0;z-index:4;pointer-events:none}
#stick-zone{position:absolute;left:0;bottom:0;width:45%;height:75%;pointer-events:auto;touch-action:none}
#stick-base{position:absolute;left:18%;top:62%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(122,244,255,.4);background:radial-gradient(circle,rgba(40,230,255,.12),rgba(10,12,30,.35));opacity:.55;transition:opacity .15s}
#stick-base.active{opacity:1}
#stick-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#bff,#28a8d0);box-shadow:0 0 16px rgba(40,230,255,.6)}
.stick-hint{position:absolute;left:18%;top:62%;transform:translate(-50%,80px);font-family:var(--font);font-size:11px;color:rgba(200,240,255,.4);letter-spacing:.2em}
#tbtns{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:min(300px,42vw);height:min(230px,56vh);pointer-events:none}
.tb{position:absolute;pointer-events:auto;touch-action:none;border-radius:50%;font-family:var(--font);font-size:clamp(9px,1.8vmin,12px);letter-spacing:.04em;color:#fff;
  border:2px solid rgba(255,255,255,.35);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.3),rgba(20,24,50,.55));width:min(76px,17vmin);height:min(76px,17vmin);display:flex;align-items:center;justify-content:center;opacity:.8}
.tb.on{transform:scale(.92);opacity:1;filter:brightness(1.5)}
.tb-punch{right:0;bottom:22%;border-color:#ff5ac8;background:radial-gradient(circle at 35% 30%,rgba(255,150,220,.55),rgba(120,10,80,.6))}
.tb-kick{right:30%;bottom:0;border-color:#ffd23a;background:radial-gradient(circle at 35% 30%,rgba(255,230,150,.5),rgba(120,80,0,.6))}
.tb-jump{right:30%;bottom:44%;border-color:#6aff9a;background:radial-gradient(circle at 35% 30%,rgba(160,255,190,.45),rgba(10,90,40,.6))}
.tb-sp{right:4%;bottom:66%;width:min(58px,13vmin);height:min(58px,13vmin);border-color:#28e6ff;background:radial-gradient(circle at 35% 30%,rgba(150,240,255,.5),rgba(0,60,110,.6))}
.tb-dash{right:62%;bottom:18%;width:min(58px,13vmin);height:min(58px,13vmin)}
#btn-pause{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:6;width:44px;height:44px;border-radius:8px;border:1.5px solid rgba(122,244,255,.5);background:rgba(10,12,30,.6);color:#fff;font-size:15px;cursor:pointer}

/* Rotate */
#rotate{position:fixed;inset:0;z-index:20;background:#05040f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px}
#rotate p{font-family:var(--font);font-size:22px;color:#fff;text-shadow:0 0 12px #28e6ff}
#rotate small{color:#9ab}
.phone{width:50px;height:86px;border:4px solid #7af4ff;border-radius:10px;box-shadow:0 0 18px rgba(40,230,255,.5);animation:rot 1.8s ease-in-out infinite}
@keyframes rot{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (max-height:420px){.title-wrap{margin-top:0}.card canvas{max-height:24vh}.panel{padding:10px 16px;gap:6px}.btn{padding:.45em 1.2em}}