@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#080d18; --bg-2:#0a1020; --panel:#0f172b; --panel-2:#131d34;
  --line:#1b2740; --line-2:#2a3a5c;
  --ink:#eef2fb; --mute:#96a3c2; --dim:#5d6b8c;
  --azure:#4f8dfd; --azure-2:#84b2ff; --secure:#3ce0ae;
  --display:'Space Grotesk',system-ui,sans-serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
body{
  background-image:
    radial-gradient(900px 420px at 82% -8%, rgba(79,141,253,.14), transparent 66%),
    radial-gradient(520px 320px at 8% 100%, rgba(60,224,174,.05), transparent 60%);
}
.cabinet{
  height:100%;
  display:flex;flex-direction:column;
  max-width:1180px;margin:0 auto;padding:14px 16px 10px;
}
.cab-top{
  display:flex;align-items:center;gap:18px;padding:6px 8px 12px;
  border-bottom:1px solid var(--line);
}
.brand{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);text-decoration:none;letter-spacing:-.03em;flex-shrink:0}
.brand b{color:var(--azure)}
.mast{margin-left:auto;text-align:right;flex-shrink:0}
.word{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.04em;line-height:1}
.word span{background:linear-gradient(120deg,var(--azure-2),var(--secure));-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:3px}

.stage{flex:1;display:grid;grid-template-columns:160px 1fr 160px;gap:16px;align-items:stretch;min-height:0;padding:14px 0}
.rail{display:flex;flex-direction:column;gap:12px;justify-content:center}
.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:14px;padding:14px 14px 16px;
}
.panel .k{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--azure);margin-bottom:6px}
.panel .v{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.03em}
.panel .loops{font-family:var(--display);font-size:18px;color:var(--secure);letter-spacing:.08em}

.screen-wrap{
  position:relative;margin:0 auto;height:100%;width:100%;
  max-width:min(100%, calc((100vh - 170px) * 384 / 560));
  border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  box-shadow:0 40px 80px -36px rgba(79,141,253,.55), inset 0 1px 0 rgba(255,255,255,.05);
  background:#040814;
}
#game{display:block;width:100%;height:100%;image-rendering:auto;cursor:crosshair;touch-action:none}
.scan{pointer-events:none;position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.08) 3px 4px);
  opacity:.18}

.overlay{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  padding:18px 18px 14px;
  background:linear-gradient(180deg, rgba(8,13,24,.28) 0%, rgba(8,13,24,.72) 28%, rgba(8,13,24,.88) 100%);
  color:var(--ink);overflow:auto;
}
.overlay[hidden]{display:none}
.ov-brand{font-family:var(--display);font-weight:700;font-size:clamp(28px,5vw,40px);letter-spacing:-.04em;line-height:1;text-shadow:0 2px 18px rgba(8,13,24,.8)}
.ov-brand span{color:var(--secure)}
.ov-sub{margin:6px 0 16px;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--azure-2)}
.ov-label{font-family:var(--sans);font-weight:600;font-size:14px;color:#d7e0f5;margin-bottom:8px;text-align:center}
.tag-in{
  width:9.2ch;text-align:center;text-transform:uppercase;
  font-family:var(--display);font-weight:700;font-size:42px;letter-spacing:.28em;
  color:var(--ink);background:rgba(10,16,32,.85);
  border:1px solid var(--line-2);border-radius:12px;padding:8px 4px 8px 16px;
  caret-color:var(--azure);-webkit-user-select:text;user-select:text;
}
.tag-in::placeholder{color:#3a4866;letter-spacing:.28em}
.tag-in:focus{outline:none;border-color:var(--azure);box-shadow:0 0 0 4px var(--azure-glow, rgba(79,141,253,.22))}
.play-btn{
  margin-top:14px;min-width:168px;border:0;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.08em;
  padding:12px 28px;border-radius:12px;
  background:linear-gradient(180deg,var(--azure-2),var(--azure));color:#00122b;
  box-shadow:0 10px 24px -10px rgba(79,141,253,.75);
  touch-action:manipulation;
}
.play-btn:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.play-btn:not(:disabled):hover{transform:translateY(-1px)}
.ov-hint{margin:8px 0 0;font-family:var(--sans);font-size:13.5px;color:var(--mute);text-align:center}
.rank{width:100%;max-width:300px;margin-top:16px;background:rgba(15,23,43,.78);border:1px solid var(--line);border-radius:14px;padding:12px 12px 10px}
.rank-h{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--azure);margin-bottom:8px}
.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.rank-list li{display:grid;grid-template-columns:28px 52px 1fr 44px;gap:8px;align-items:center;
  font-family:var(--sans);font-size:15px;color:#e8eefb;padding:5px 6px;border-radius:8px}
.rank-list li .n{color:var(--dim);font-variant-numeric:tabular-nums}
.rank-list li .who{font-family:var(--display);font-weight:700;letter-spacing:.06em}
.rank-list li .sc{text-align:right;font-variant-numeric:tabular-nums;color:var(--azure-2)}
.rank-list li .rt{text-align:right;font-size:12px;color:var(--dim)}
.rank-list li.me{background:rgba(79,141,253,.16);color:#fff}
.rank-list li.me .who{color:var(--secure)}
.rank-list li.empty{display:block;color:var(--mute);padding:8px}

.help{
  flex:1;display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;align-items:center;
  font-family:var(--sans);font-weight:500;font-size:13.5px;color:var(--mute);min-width:0;
}
kbd{display:inline-block;border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;
  color:var(--azure-2);background:rgba(79,141,253,.08);font:inherit}
.help-btn{
  appearance:none;cursor:pointer;border:1px solid var(--line-2);border-radius:8px;
  background:var(--panel);color:var(--ink);font-family:var(--sans);font-weight:600;font-size:13px;
  padding:5px 10px;touch-action:manipulation;min-height:36px;
}
.help-btn:hover{border-color:var(--azure);color:var(--azure-2)}
.help-btn.on{border-color:var(--secure);color:var(--secure)}

.char-pad{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:100%;max-width:320px;margin:10px 0 2px}
.char-pad button{
  appearance:none;cursor:pointer;border:1px solid var(--line-2);border-radius:7px;
  background:rgba(15,23,43,.9);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:14px;min-height:32px;height:32px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.char-pad button:hover{border-color:var(--azure);color:var(--azure-2);background:rgba(79,141,253,.12)}
.char-pad button.del{grid-column:span 2;font-size:12px;color:var(--mute)}

.cab-bot{padding:8px 8px 6px;border-top:1px solid var(--line)}
.acts{display:flex;gap:12px;justify-content:center}
.acts button{
  min-width:120px;height:52px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--ink);font-family:var(--display);font-weight:700;font-size:16px;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#btnFire{background:linear-gradient(180deg,var(--azure-2),var(--azure));color:#00122b;border:0}
#btnLoop{color:var(--secure);border-color:rgba(60,224,174,.35)}
#btnFire:hover,#btnLoop:hover{transform:translateY(-1px)}

@media(max-width:860px){
  .cabinet{padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
  .stage{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:6px}
  .rail{display:flex;flex-direction:row;gap:6px}
  .rail .panel{flex:1;padding:8px 8px 7px}
  .rail .panel .k{font-size:9px;margin-bottom:2px}
  .rail .panel .v{font-size:15px}
  .rail .panel .loops{font-size:13px;letter-spacing:.04em}
  .rail.right .panel:nth-child(2),
  .rail.right .panel:nth-child(3){display:none}
  .cab-top{flex-wrap:wrap;padding:2px 4px 8px;gap:8px}
  .mast{margin-left:0}
  .word{font-size:20px}
  .help{order:3;width:100%;justify-content:flex-start;font-size:12.5px;gap:6px 10px}
  .screen-wrap{max-width:100%;height:100%;min-height:200px}
  .char-pad{grid-template-columns:repeat(6,1fr);gap:6px;max-width:100%}
  .char-pad button{min-height:44px;height:44px;font-size:16px}
  .char-pad button.del{grid-column:span 2}
  .acts button{flex:1;height:56px;font-size:18px}
  .overlay{padding:12px 12px 10px}
  .ov-brand{font-size:26px}
  .tag-in{font-size:30px;width:min(9.2ch,100%)}
  .play-btn{min-height:48px;width:100%;max-width:280px}
  .rank{max-width:100%}
}
@media(max-width:520px){
  .cab-top{flex-direction:column;align-items:flex-start;gap:6px;padding:2px 2px 6px}
  .brand{display:none}
  .mast{order:1;width:100%;text-align:left}
  .word{font-size:18px}
  .help{order:2;width:100%;justify-content:flex-start;font-size:12px;gap:6px 8px}
  .ov-brand{font-size:24px}
  .tag-in{font-size:26px;letter-spacing:.18em;padding:8px 4px 8px 10px}
  .rail.left .panel:nth-child(2){display:none}
}
@media(max-height:700px){
  .cab-top{padding-bottom:8px}
  .word{font-size:22px}
}