:root{--bg:#070b12;--surface:#101826;--border:#243044;--fg:#e7eefc;--muted:#9aa8c2;--primary:#3ee0ff;--accent:#ffb15a;
  --display:"Oxanium","Avenir Next","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  --body:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);
  font-family:var(--body);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-text-size-adjust:100%}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#vig{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,11,18,.78),rgba(7,11,18,0) 96px),
             linear-gradient(to top,rgba(7,11,18,.55),rgba(7,11,18,0) 80px),
             radial-gradient(ellipse at 50% 48%,transparent 45%,rgba(7,11,18,.5) 100%)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation;
  transition:transform .12s cubic-bezier(.3,1.6,.5,1),filter .12s,background-color .15s}
button:active{transform:scale(.95);filter:brightness(1.15)}
.disp{font-family:var(--display);letter-spacing:.02em}
/* HUD */
#hud{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease}
#hud.on{opacity:1}
.hud-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:calc(12px + var(--sat)) calc(12px + var(--sar)) 0 calc(12px + var(--sal))}
#score{font:700 26px/1 var(--display);font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(0,0,0,.4)}
#best{margin-top:4px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.hud-mid{padding-top:4px;text-align:center}
#wave{font:600 12px var(--display);letter-spacing:.25em;color:var(--primary)}
#combo{font:700 15px var(--display);color:var(--accent);min-height:18px;display:inline-block;transform-origin:50% 50%}
#combo.pop{animation:pop .28s cubic-bezier(.2,1.8,.4,1)}
@keyframes pop{0%{transform:scale(1.6)}100%{transform:scale(1)}}
#pauseBtn{pointer-events:auto;width:52px;height:52px;margin:-4px -4px 0 0;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--border);background:rgba(16,24,38,.85);touch-action:none}
.hud-bot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding:0 calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal));font-size:14px}
#lives{display:flex;align-items:center;gap:6px}
#lives img{width:20px;height:20px;image-rendering:pixelated;transition:opacity .3s,transform .3s}
#lives img.lost{opacity:.18;transform:scale(.8)}
#powers{color:var(--primary);text-align:right}
#hint{position:absolute;left:50%;bottom:calc(18% + var(--sab));transform:translate(-50%,0);pointer-events:none;
  padding:10px 16px;border-radius:999px;background:rgba(16,24,38,.8);border:1px solid var(--border);
  font:600 14px var(--display);color:var(--fg);white-space:nowrap;opacity:0;transition:opacity .5s ease,transform .5s ease}
#hint.on{opacity:1;transform:translate(-50%,-8px)}
#hint b{color:var(--primary)}
/* Menus */
#menu{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  opacity:0;pointer-events:none;transition:opacity .22s ease}
#menu.on{opacity:1;pointer-events:auto}
#menu.dim{background:rgba(7,11,18,.72)}
#menu.lite{background:rgba(7,11,18,.25)}
.wrap{min-height:100%;display:flex;justify-content:center;align-items:flex-start;
  padding:calc(20px + var(--sat)) calc(16px + var(--sar)) calc(20px + var(--sab)) calc(16px + var(--sal))}
@media (min-height:700px){.wrap{align-items:center}}
.panel{width:100%;max-width:28rem;border-radius:18px;border:1px solid var(--border);background:rgba(16,24,38,.94);padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);transform:translateY(14px) scale(.98);opacity:0;
  transition:transform .38s cubic-bezier(.2,1.2,.3,1),opacity .25s ease}
#menu.on .panel{transform:none;opacity:1}
.kick{font:600 12px var(--display);letter-spacing:.25em;color:var(--primary)}
.kick.acc{color:var(--accent)}
h1{margin-top:4px;font:700 48px/1 var(--display)}
h2.big{margin-top:4px;font:700 36px/1 var(--display);font-variant-numeric:tabular-nums}
.sub{margin-top:8px;font-size:14px;color:var(--muted)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border-radius:12px;
  font:700 16px var(--display);border:1px solid var(--border);background:var(--bg)}
.btn.pri{background:var(--primary);color:var(--bg);border-color:var(--primary);height:54px;font-size:18px}
.col{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.row{display:flex;gap:8px;margin-top:12px}
.row .btn{flex:1}
.sq{flex:0 0 48px!important;width:48px}
.help{margin-top:16px;font-size:14px;line-height:1.55;color:var(--muted)}
.help b{color:var(--fg);font-weight:600}
.pups{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:12px;list-style:none}
.pups li{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--border);border-radius:12px;padding:8px}
.pups img{width:30px;height:30px;image-rendering:pixelated}
.board{margin-top:16px}
.board h3{font:600 12px var(--display);letter-spacing:.25em;color:var(--muted)}
.board ol{margin-top:8px;list-style:none;display:flex;flex-direction:column;gap:4px}
.board li{display:grid;grid-template-columns:1.25rem 3rem 1fr;gap:8px;align-items:baseline;font-size:14px}
.board .n{color:var(--muted);font-variant-numeric:tabular-nums}
.board .s{text-align:right;font-variant-numeric:tabular-nums}
.board .s i{font-style:normal;color:var(--muted);margin-left:8px}
.board p{margin-top:8px;font-size:14px;color:var(--muted)}
form{margin-top:16px}
label{font-size:14px;color:var(--muted)}
input{margin-top:8px;width:100%;height:50px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);
  text-align:center;font:600 24px var(--display);letter-spacing:.3em;text-transform:uppercase;-webkit-user-select:text;user-select:text;touch-action:manipulation}
input:focus{outline:2px solid var(--primary);outline-offset:1px}
.ok{margin-top:12px;font-size:14px;color:var(--primary)}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ---- X edition additions ---- */
a.btn{text-decoration:none;color:inherit}
.btn.ghost{border-color:transparent;background:none;color:var(--muted);height:40px;font-size:14px}
input.txt{text-transform:none;letter-spacing:.02em;font:600 18px var(--body);height:46px;text-align:left;padding:0 14px}
input.txt::placeholder{color:#5d6a82;font-weight:500}
input.txt+input.txt{margin-top:6px}
.fine{margin-top:8px;font-size:12px;line-height:1.45;color:var(--muted)}
.fine b{color:var(--fg);font-weight:600}
.err{margin-top:6px;font-size:13px;color:#ff7a8a;min-height:0}
.err:empty{display:none}
.lnk{color:var(--primary);text-decoration:underline;font-size:12px;padding:0 2px}
.rank{margin-top:14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(62,224,255,.06)}
.big2{font:700 30px/1 var(--display);color:var(--primary);font-variant-numeric:tabular-nums}
.big2 span{font-size:15px;color:var(--muted);font-weight:600}
.board h3 em{font-style:normal;float:right;letter-spacing:.05em;color:#6c7a93}
.board li{grid-template-columns:2rem minmax(0,1fr) auto}
.board .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .nm i{font-style:normal;color:var(--muted);font-size:12px;margin-left:6px}
.board li.me{color:var(--primary)}
.board li.me .n,.board li.me .s i{color:var(--primary)}
.gb .board{margin-top:8px}
.gb .board ol{gap:2px}
.gb .board li{padding:6px 8px;border-radius:8px}
.gb .board li:nth-child(odd){background:rgba(255,255,255,.025)}
.gb .board li.me{background:rgba(62,224,255,.12)}
.gb .board li:nth-child(-n+3) .n{color:var(--accent);font-weight:700}
.gb ol.mine{margin-top:8px;border-top:1px dashed var(--border);padding-top:8px}
.gbh{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
/* compact layout: the 480x480 X player and landscape phones */
@media (max-height:560px){
  .wrap{padding:calc(10px + var(--sat)) calc(10px + var(--sar)) calc(10px + var(--sab)) calc(10px + var(--sal));align-items:flex-start}
  .panel{padding:14px 16px;border-radius:14px}
  h1{font-size:34px}h2.big{font-size:28px}.big2{font-size:24px}
  .help,.pups{display:none}
  .btn{height:42px;font-size:15px}.btn.pri{height:46px;font-size:16px}
  .col{margin-top:12px;gap:6px}.row{margin-top:8px}.sub{margin-top:4px}.board{margin-top:10px}
  .rank{margin-top:10px;padding:8px 12px}
  form{margin-top:10px}input.txt{height:42px;font-size:16px}
  #pauseBtn{width:44px;height:44px}#score{font-size:22px}
  #hint{bottom:12px}
}
/* share-card render */
.cardmode #vig{background:linear-gradient(90deg,rgba(7,11,18,.92) 0%,rgba(7,11,18,.55) 45%,rgba(7,11,18,0) 70%)}
.cardov{position:absolute;left:84px;top:50%;transform:translateY(-50%);pointer-events:none}
.cardov .kick{font-size:22px}
.cardov h1{font-size:120px;margin-top:10px;text-shadow:0 6px 0 rgba(0,0,0,.35)}
.cardov .tag{margin-top:18px;font:600 30px var(--display);color:var(--accent)}
/* "Made with Grok" credit */
.madewith{margin-top:14px;text-align:center;font:500 12px var(--body);letter-spacing:.04em;color:#7d8aa3}
.madewith a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(125,138,163,.35);padding-bottom:1px}
.madewith a:hover,.madewith a:focus-visible{color:var(--fg);border-color:currentColor}
.madewith b{font-weight:700;color:var(--fg)}
@media (max-height:560px){.madewith{margin-top:8px}}
.cardov .madewith{text-align:left;margin-top:26px;font-size:22px}
@media (max-height:420px){
  h1{font-size:28px}.panel>.sub:first-of-type{display:none}
  .btn{height:38px;font-size:14px}.btn.pri{height:42px}
  .row{margin-top:6px}.board{margin-top:6px}.board li{padding:2px 0}.madewith{margin-top:6px}
}
/* top-100 screen: list scrolls inside the panel so actions + credit stay on screen */
.wrap.wfix{height:100%;align-items:stretch}
.panel.gb{display:flex;flex-direction:column;max-height:100%;min-height:0}
.gb .board{flex:1 1 auto;min-height:96px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin-right:-6px;padding-right:6px}
.gb .gbh,.gb .row,.gb .madewith{flex:none}
.gb .gba .btn{flex:1}.gb .gba .btn.pri{flex:2}
/* ---- iOS text-input fix (caret drawn below the nickname field) ----
   1) No momentum-scrolling layer around inputs: in iOS WebKit, a caret inside a -webkit-overflow-scrolling:touch container
      stays at its old place when that container (or the page) is scrolled as the keyboard opens.
   2) No transform on any ancestor of an input at rest: the panel's enter animation only runs on first show, is removed on
      animationend, and is disabled while typing.
   3) A plain field: >=16px (no auto-zoom), border-box, explicit height == line-height + symmetric padding + borders,
      no appearance, no letter-spacing/text-transform. */
#menu,.gb .board{-webkit-overflow-scrolling:auto}
.panel{opacity:1;transform:none;transition:none}
#menu.on .panel{transform:none;opacity:1}
.panel.enter{animation:panelIn .38s cubic-bezier(.2,1.2,.3,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.panel:focus-within,html.kb .panel{animation:none!important;transform:none!important}
#menu input.txt{-webkit-appearance:none;appearance:none;box-sizing:border-box;display:block;width:100%;
  height:48px;padding:11px 14px;border:1px solid var(--border);line-height:24px;font:600 18px/24px var(--body);
  letter-spacing:normal;text-transform:none;text-align:left;text-indent:0;transform:none;
  -webkit-user-select:text;user-select:text;touch-action:manipulation;caret-color:var(--primary);background-clip:padding-box}
@media (max-height:560px){#menu input.txt{height:44px;padding:10px 14px;font-size:16px;line-height:22px}}
/* keyboard open: pin the menu to the visual viewport so the page itself never scrolls */
html.kb #menu{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100%);transition:none}