:root{
    --ink:#04101a; --foam:#e8fbff; --turq:#38e0c6; --coral:#ff6b5b;
    --sun:#ffc94d; --violet:#8f7bff; --dim:#6d8b98;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;background:
     radial-gradient(120% 80% at 50% -10%, #10394b 0%, #05131d 55%, #02090f 100%);
     color:var(--foam);
     font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;
     overscroll-behavior:none;-webkit-user-select:none;user-select:none;}
  html,body{overflow:hidden}
  #app{height:100vh;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:16px;padding:8px}
  #side{display:flex;flex-direction:column;gap:11px;width:158px;flex-shrink:0}
  #hud{display:flex;flex-direction:column;gap:10px}
  .stat b{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:4px}
  .stat span{font-variant-numeric:tabular-nums;font-weight:700}
  #score span{font-size:28px;color:var(--sun);text-shadow:0 0 18px rgba(255,201,77,.35)}
  #balls span,#mult span,#dexn span{font-size:19px}
  #mult span{color:var(--coral)}
  #dexn span{color:var(--turq)}
  #dexn{cursor:pointer}
  #banner{width:100%;min-height:58px;position:relative;display:flex;align-items:center;
    padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);overflow:hidden;font-size:11.5px;line-height:1.35;letter-spacing:.02em}
  #bannerTxt{position:relative;z-index:2;font-weight:600}
  #bannerBar{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,rgba(56,224,198,.35),rgba(143,123,255,.25));transition:width .12s linear}
  #stage{position:relative;height:min(97vh,780px);aspect-ratio:480/760;flex-shrink:0}
  .btnmini{width:100%;padding:9px 10px;font-size:13px;background:rgba(255,255,255,.09);color:var(--foam)}
  #sideHelp{font-size:10px;color:var(--dim);line-height:1.6}
  @media (max-width:740px){
    html,body{overflow:auto}
    #app{flex-direction:column;height:auto;padding:12px 10px 18px}
    #side{width:min(480px,96vw);flex-direction:row;flex-wrap:wrap;align-items:end}
    #side #hud{flex-direction:row;gap:14px;flex:1}
    #side .btnmini{width:auto;flex:1}
    #banner{order:5}
    #sideHelp{display:none}
    #stage{height:auto;width:min(480px,96vw);aspect-ratio:480/760}
  }
  canvas{width:100%;height:100%;display:block;border-radius:16px;
    box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07) inset;touch-action:none}
  .overlay{position:absolute;inset:0;border-radius:16px;background:rgba(3,12,19,.9);
    backdrop-filter:blur(6px);display:flex;flex-direction:column;padding:22px;gap:14px;overflow:auto}
  .hidden{display:none}
  h1{margin:0;font-size:30px;letter-spacing:.02em;line-height:1.05;font-weight:800}
  h1 em{font-style:normal;color:var(--turq)}
  .sub{margin:0;color:var(--dim);font-size:13px;line-height:1.5}
  button{font:inherit;font-weight:700;border:0;border-radius:11px;padding:12px 18px;cursor:pointer;
    background:var(--turq);color:#03222a;letter-spacing:.02em}
  button.ghost{background:rgba(255,255,255,.09);color:var(--foam)}
  .row{display:flex;gap:10px;flex-wrap:wrap}
  .keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12px;color:#a9c6d1;align-items:center}
  kbd{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-bottom-width:2px;
    border-radius:6px;padding:2px 7px;font:600 11px/1.4 ui-monospace,monospace}
  .mecs{margin:0;padding-left:18px;font-size:12px;color:#a9c6d1;line-height:1.65}
  #dexGrid,#overGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;align-content:start}
  .mon{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:11px;
    padding:6px 4px 7px;text-align:center}
  .mon canvas{width:52px;height:52px;border-radius:0;box-shadow:none;margin:0 auto}
  .mon small{display:block;font-size:9.5px;color:#bcd6df;margin-top:2px;line-height:1.25;word-break:break-word}
  .empty{color:var(--dim);font-size:13px}
  @media (max-width:520px){ h1{font-size:25px} }