:root {
  --bg: #07060b;
  --panel: rgba(12, 10, 18, 0.86);
  --line: rgba(255, 214, 120, 0.22);
  --gold: #ffcf4a;
  --gold2: #c8861a;
  --p1: #2f8bff;
  --p2: #ff3b4f;
  --text: #f3f1f8;
  --dim: #9c96ab;
  --head: "Teko", "Oswald", Impact, sans-serif;
  --ui: "Rajdhani", "Rubik", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--text); font-family: var(--ui); font-weight: 600; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
#app { position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 30%, #1d0b2e 0%, #07040d 55%, #000 100%); }
/* ---------------------------------------------------------------- arcade cabinet
   marquee (backlit sign) / bezel around the screen / control deck with the coin
   slot. --mh + --dh are the chrome heights; the screen gets the rest, at 16:9. */
#cab { --mh: clamp(54px, 10vh, 120px); --dh: clamp(64px, 12vh, 132px); --bz: clamp(8px, 1.4vh, 18px);
  --wv: 96vw; --gap: 3vh;
  --sw: min(calc(var(--wv) - 2 * var(--bz)), calc((100vh - var(--mh) - var(--dh) - 2 * var(--bz) - var(--gap)) * 16 / 9));
  width: calc(var(--sw) + 2 * var(--bz)); display: flex; flex-direction: column; align-items: stretch; }
.marquee { height: var(--mh); display: flex; align-items: center; justify-content: center; gap: 2.4vh; position: relative; overflow: hidden;
  border-radius: 14px 14px 0 0; border: 2px solid #3a1d4d; border-bottom: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(255,45,138,0.35), transparent 60%), linear-gradient(180deg, #2a0f3c, #120720);
  box-shadow: inset 0 0 40px rgba(255,45,138,0.25), 0 0 50px rgba(255,45,138,0.18); }
.marquee::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.10) 45%, transparent 60%); background-size: 300% 100%; animation: sheen 6s linear infinite; }
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.mcoin { height: 82%; filter: drop-shadow(0 0 12px rgba(255,200,80,0.45)); animation: coinBob 3.2s ease-in-out infinite; }
.mcoin.r { animation-delay: -1.6s; }
@keyframes coinBob { 50% { transform: translateY(-4%) rotate(-4deg); } }
.mword { font-family: var(--head); font-weight: 700; line-height: 0.8; font-size: calc(var(--mh) * 0.62); letter-spacing: 0.04em; transform: skewX(-10deg); display: flex; gap: 0.25em; }
.mword span { background: linear-gradient(180deg, #fff 0%, #ffe58a 46%, #ffae12 54%, #9c4a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 14px rgba(255,170,40,0.45)); }
.mword b { font-weight: 700; background: linear-gradient(180deg, #fff 0%, #ffd0e6 46%, #ff2d8a 54%, #6e0640 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 14px rgba(255,45,138,0.5)); }
.bezel { padding: var(--bz); background: linear-gradient(180deg, #17121f, #0b0910); border-left: 2px solid #3a1d4d; border-right: 2px solid #3a1d4d; }
#stage { position: relative; width: var(--sw); aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; container-type: size;
  border-radius: 6px; box-shadow: 0 0 0 2px #000, 0 0 24px rgba(31,116,255,0.25); }
.deck { height: var(--dh); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2vh; padding: 0 2.4vh; position: relative;
  border-radius: 0 0 18px 18px; border: 2px solid #3a1d4d; border-top: 0;
  background: linear-gradient(180deg, #1c1226 0%, #0f0a16 100%); box-shadow: inset 0 10px 18px rgba(0,0,0,0.6), 0 18px 40px rgba(0,0,0,0.6); }
.deck::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #ff2d8a, #ffd24a, #1f74ff); opacity: 0.8; }
.slot { display: flex; align-items: center; gap: 1.6vh; cursor: pointer; min-width: 0; }
.slotface { position: relative; flex: none; width: calc(var(--dh) * 0.5); height: calc(var(--dh) * 0.66); border-radius: 6px; display: grid; place-items: center;
  background: linear-gradient(180deg, #3a3344, #18141f); border: 1px solid #4b4058; box-shadow: inset 0 2px 4px rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.5); }
.slotface i { position: absolute; top: 14%; width: 14%; height: 38%; border-radius: 3px; background: #000; box-shadow: 0 0 10px rgba(255,45,138,0.9), inset 0 0 4px rgba(255,45,138,0.8); animation: slotGlow 1.2s ease-in-out infinite; }
.slotface em { position: absolute; bottom: 7%; font-style: normal; font-family: var(--ui); font-weight: 700; font-size: calc(var(--dh) * 0.075); line-height: 1.05; text-align: center; color: #ffd24a; }
@keyframes slotGlow { 50% { box-shadow: 0 0 2px rgba(255,45,138,0.3), inset 0 0 2px rgba(255,45,138,0.3); } }
.slotTxt { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.slotTxt b { font-family: var(--head); font-weight: 600; font-size: calc(var(--dh) * 0.34); letter-spacing: 0.08em; color: #ffd24a; text-shadow: 0 0 12px rgba(255,210,74,0.5); white-space: nowrap; }
.slotTxt span { font-size: calc(var(--dh) * 0.12); color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.cp { display: flex; align-items: center; gap: 3vh; }
.joy { width: calc(var(--dh) * 0.62); height: calc(var(--dh) * 0.62); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2a2333, #0b0910); border: 2px solid #3a3046; display: grid; place-items: center; }
.joy i { width: 42%; height: 42%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7cba, #ff2d8a 50%, #6e0640); box-shadow: 0 4px 8px rgba(0,0,0,0.6), 0 0 12px rgba(255,45,138,0.5); }
.btns { display: grid; grid-template-columns: repeat(4, calc(var(--dh) * 0.36)); gap: calc(var(--dh) * 0.08); }
.btns span { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-family: var(--head); font-size: calc(var(--dh) * 0.15); color: rgba(255,255,255,0.85);
  background: radial-gradient(circle at 38% 32%, #6fb2ff, #1f74ff 55%, #06215e); box-shadow: 0 4px 0 #04112f, 0 0 10px rgba(31,116,255,0.45); }
.btns span.sp { background: radial-gradient(circle at 38% 32%, #ffe58a, #ffb21a 55%, #7a4300); box-shadow: 0 4px 0 #3a2000, 0 0 10px rgba(255,190,40,0.5); color: #1a0f00; }
.creds { justify-self: end; display: flex; align-items: center; gap: 2vh; text-align: right; }
.creds small { display: block; font-size: calc(var(--dh) * 0.12); letter-spacing: 0.3em; color: var(--dim); }
.creds b { font-family: var(--head); font-weight: 600; font-size: calc(var(--dh) * 0.4); line-height: 0.9; color: #fff; text-shadow: 0 0 12px rgba(31,116,255,0.6); }
button.wallet { font-size: calc(var(--dh) * 0.16); padding: 0.7em 1.1em; background: linear-gradient(90deg, #ff2d8a, #a8125a); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
/* narrow decks drop the decorative control panel */
@media (max-width: 900px) { .cp { display: none; } .deck { grid-template-columns: 1fr 1fr; } }
/* short screens (phones in landscape): the screen is the cabinet */
@media (max-height: 560px) {
  #cab { --mh: 0px; --dh: 0px; --bz: 0px; --sw: min(100vw, calc(100vh * 16 / 9)); }
  .marquee, .deck { display: none; }
  .bezel { border: 0; padding: 0; }
  #stage { border-radius: 0; }
}
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* screens sit over the live stage canvas */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh; padding: 4cqh 4cqw; z-index: 5;
  background: radial-gradient(ellipse at 70% 40%, rgba(7, 6, 11, 0.35), rgba(7, 6, 11, 0.92) 70%); }
.screen.on { display: flex; }
.screen::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); }
.hidden { display: none !important; }
h2 { font-family: var(--head); font-weight: 600; font-size: 9cqh; line-height: 0.9; margin: 0; letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, #ffe58a 48%, #ffb21a 52%, #b85c00 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.6)); transform: skewX(-8deg); }
h3 { margin: 0.8em 0 0.3em; font-family: var(--head); font-weight: 500; font-size: 3.6cqh; letter-spacing: 0.08em; color: var(--gold); text-transform: uppercase; }
.dim { color: var(--dim); font-size: 2.4cqh; font-weight: 500; }

/* ---------------------------------------------------------------- buttons */
button { font: inherit; cursor: pointer; color: var(--text); border: 0; padding: 1.3cqh 3cqw 1.1cqh 2.4cqw; font-family: var(--head); font-weight: 500; font-size: 3.8cqh; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); clip-path: polygon(0 0, 100% 0, calc(100% - 1.4cqh) 100%, 0 100%);
  position: relative; transition: background 0.15s, transform 0.12s, color 0.15s; text-align: left; }
button::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0.5cqh; background: var(--gold); opacity: 0; transition: opacity 0.15s; }
button:hover, button:focus-visible { outline: none; background: linear-gradient(90deg, rgba(255,207,74,0.30), rgba(255,207,74,0.05)); transform: translateX(0.8cqh); color: #fff; }
button:hover::before, button:focus-visible::before { opacity: 1; }
button small { display: block; font-family: var(--ui); font-weight: 600; font-size: 0.48em; letter-spacing: 0.12em; color: var(--dim); margin-top: 0.3em; }
button.hot { background: linear-gradient(90deg, #ffe27a, #ffb21a 60%, #e08300); color: #120c00; }
button.hot small { color: rgba(18,12,0,0.7); }
button.hot:hover { background: linear-gradient(90deg, #fff1b0, #ffc53d 60%, #f09400); color: #000; }
button.ghost { background: transparent; color: var(--dim); }
button.link { background: none; clip-path: none; padding: 0; font-family: var(--ui); font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--dim); text-decoration: underline; }
button.link:hover { transform: none; }
input { font: inherit; font-family: var(--ui); font-weight: 600; border: 1px solid var(--line); background: rgba(0,0,0,0.5); color: var(--text); font-size: 2.6cqh; padding: 0.8cqh 1.4cqh; width: 18ch; clip-path: polygon(0 0, 100% 0, calc(100% - 1cqh) 100%, 0 100%); }
input:focus { outline: none; border-color: var(--gold); }
.menu { display: flex; flex-direction: column; gap: 0.9cqh; min-width: 34cqw; }
.row { display: flex; gap: 2cqw; align-items: center; }
.small { font-size: 2.4cqh; color: var(--dim); }
.foot { position: absolute; bottom: 2cqh; right: 3cqw; color: var(--dim); font-size: 2cqh; letter-spacing: 0.06em; z-index: 2; }
.foot a { color: var(--dim); }
.join { display: flex; gap: 1cqw; }

/* ---------------------------------------------------------------- title */
#title { align-items: flex-start; justify-content: center; padding-left: 7cqw;
  background: linear-gradient(90deg, rgba(5,4,8,0.95) 0%, rgba(5,4,8,0.75) 38%, rgba(5,4,8,0.1) 70%), radial-gradient(ellipse at 75% 50%, rgba(255,160,40,0.18), transparent 60%); }
.hero { position: absolute; right: 2cqw; bottom: 0; height: 96cqh; pointer-events: none; filter: drop-shadow(0 0 4cqh rgba(255,170,60,0.25)); animation: heroIn 0.7s cubic-bezier(.2,.8,.2,1) both; }
.hero.coin { right: 8cqw; bottom: auto; top: 12cqh; height: 62cqh; filter: drop-shadow(0 0 6cqh rgba(255,45,138,0.35)) drop-shadow(0 0 3cqh rgba(255,200,80,0.35)); animation: heroIn 0.7s cubic-bezier(.2,.8,.2,1) both, coinFloat 4s ease-in-out 0.7s infinite; }
@keyframes coinFloat { 50% { transform: translateY(-3cqh) rotate(-3deg); } }
.insert { position: absolute; right: 8cqw; width: 62cqh; text-align: center; top: 79cqh; font-family: var(--head); font-weight: 600; font-size: 5.4cqh; letter-spacing: 0.24em; color: #ffd24a;
  text-shadow: 0 0 2cqh rgba(255,210,74,0.6); animation: blink 1.1s steps(1) infinite; pointer-events: none; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes heroIn { from { opacity: 0; transform: translateX(6cqw); } }
.logo { font-family: var(--head); font-weight: 700; line-height: 0.8; transform: skewX(-10deg); margin-bottom: 1cqh; position: relative; z-index: 1; }
.logo span { display: block; font-size: 17cqh; letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff 0%, #ffe58a 46%, #ffae12 54%, #9c4a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0.6cqh 0 #000) drop-shadow(0 0 3cqh rgba(255,170,40,0.35)); }
.logo .l2 { margin-left: 4cqw; background: linear-gradient(180deg, #fff 0%, #ffd0d4 46%, #ff3b4f 54%, #7a0012 100%); -webkit-background-clip: text; background-clip: text; }
.tag { font-family: var(--ui); font-weight: 700; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); font-size: 2.2cqh; margin: 0 0 3cqh 0.4cqw; position: relative; z-index: 1; }
#title .menu, #title .row { position: relative; z-index: 1; }
#title .row { margin-top: 2.5cqh; }

/* ---------------------------------------------------------------- waiting */
.spinner { width: 7cqh; height: 7cqh; border: 0.5cqh solid rgba(255,207,74,0.15); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.share { text-align: center; background: var(--panel); border: 1px solid var(--line); padding: 2cqh 4cqw; display: flex; flex-direction: column; gap: 1cqh; align-items: center; clip-path: polygon(2cqh 0, 100% 0, calc(100% - 2cqh) 100%, 0 100%); }
.share .code { font-family: var(--head); font-weight: 600; font-size: 9cqh; letter-spacing: 0.15em; color: var(--gold); line-height: 1; }

/* ---------------------------------------------------------------- select */
#select { justify-content: space-between; }
.sel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2cqw; width: 100%; flex: 1; min-height: 0; align-items: stretch; }
.grid { display: grid; grid-template-columns: repeat(3, 15cqh); gap: 1.2cqh; align-content: center; }
.card { position: relative; aspect-ratio: 1; cursor: pointer; overflow: hidden; background: linear-gradient(160deg, #24202e, #0c0a12);
  clip-path: polygon(1.4cqh 0, 100% 0, calc(100% - 1.4cqh) 100%, 0 100%); transition: transform 0.12s; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .nm { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-family: var(--head); font-weight: 500; font-size: 3.2cqh; letter-spacing: 0.08em; padding-top: 2cqh; background: linear-gradient(transparent, rgba(0,0,0,0.85)); }
.card.p1 { box-shadow: inset 0 0 0 0.5cqh var(--p1); transform: scale(1.04); }
.card.p2 { box-shadow: inset 0 0 0 0.5cqh var(--p2); transform: scale(1.04); }
.card.p1.p2 { box-shadow: inset 0 0 0 0.5cqh var(--p1), inset 0 0 0 1cqh var(--p2); }
.card.locked::after { content: 'READY'; position: absolute; top: 0.8cqh; left: 2cqh; font-family: var(--ui); font-weight: 700; font-size: 1.6cqh; letter-spacing: 0.15em; background: var(--gold); color: #000; padding: 0.2cqh 0.8cqh; }
.card.soon { cursor: default; }
.card.soon .q { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--head); font-size: 9cqh; color: rgba(255,255,255,0.1); }
.card.soon .nm { color: var(--dim); font-size: 2.2cqh; }
.side { position: relative; padding: 2cqh 2cqw; display: flex; flex-direction: column; gap: 0.6cqh; overflow: hidden; min-height: 0;
  background: linear-gradient(180deg, rgba(12,10,18,0.55), rgba(12,10,18,0.9)); border-top: 0.4cqh solid var(--p1); }
.side.right { border-top-color: var(--p2); text-align: right; align-items: flex-end; }
.side .who { font-family: var(--ui); font-weight: 700; font-size: 1.9cqh; letter-spacing: 0.25em; color: var(--p1); position: relative; z-index: 1; }
.side.right .who { color: var(--p2); }
.side .big { font-family: var(--head); font-weight: 600; font-size: 10cqh; line-height: 0.85; letter-spacing: 0.04em; transform: skewX(-8deg); position: relative; z-index: 1;
  background: linear-gradient(180deg, #fff 0%, #ffe58a 48%, #ffb21a 52%, #b85c00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.side .ttl { color: var(--gold); font-weight: 700; font-size: 2.2cqh; letter-spacing: 0.1em; text-transform: uppercase; position: relative; z-index: 1; }
.side .sty { color: var(--dim); font-size: 2.1cqh; position: relative; z-index: 1; }
.side .stats { display: grid; grid-template-columns: auto 14cqw; gap: 0.5cqh 1cqw; align-items: center; font-size: 1.8cqh; letter-spacing: 0.1em; color: var(--dim); margin: 0.8cqh 0; position: relative; z-index: 1; text-transform: uppercase; }
.side .bar { height: 0.8cqh; background: rgba(255,255,255,0.08); }
.side .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); }
.side .mv { font-size: 2cqh; display: flex; justify-content: space-between; gap: 1cqw; width: 100%; max-width: 30cqw; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 0.4cqh; position: relative; z-index: 1; }
.side .mv b { font-weight: 600; color: var(--text); }
.side .mv span { color: var(--gold); white-space: nowrap; }
.side .art { position: absolute; bottom: 0; right: 0; width: 72%; height: 64cqh; object-fit: contain; object-position: bottom right; z-index: 0; opacity: 0.95; pointer-events: none; filter: drop-shadow(0 0 2cqh rgba(0,0,0,0.6)); }
/* scrim so stats stay readable over the art */
.side::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(12,10,18,0.85) 0%, rgba(12,10,18,0.55) 45%, rgba(12,10,18,0) 75%); }
.side.right::after { background: linear-gradient(270deg, rgba(12,10,18,0.85) 0%, rgba(12,10,18,0.55) 45%, rgba(12,10,18,0) 75%); }
.side.left .art { right: 0; }
.side.right .art { left: 0; right: auto; object-position: bottom right; transform: scaleX(-1); }
.side > :not(.art):not(.big) { text-shadow: 0 0.3cqh 0.8cqh #000, 0 0 1.6cqh rgba(0,0,0,0.9); }
.side .big { filter: drop-shadow(0 0.4cqh 0.6cqh rgba(0,0,0,0.9)); }
.side .art.alt { filter: hue-rotate(165deg) saturate(1.25) brightness(0.95) drop-shadow(0 0 2cqh rgba(0,0,0,0.6)); }
.selbar { display: flex; gap: 2cqw; align-items: center; justify-content: center; width: 100%; }

/* ---------------------------------------------------------------- controls */
.ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; background: var(--panel); border: 1px solid var(--line); padding: 2.4cqh 3cqw; max-width: 94%; font-size: 2.3cqh; font-weight: 500; }
.ctl table { border-collapse: collapse; width: 100%; }
.ctl td { padding: 0.45cqh 1cqw 0.45cqh 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
kbd { font-family: var(--ui); font-weight: 700; font-size: 0.9em; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-bottom-width: 2px; padding: 0 0.5em; }
.ctl p { margin: 0.6em 0 0; }

/* ---------------------------------------------------------------- results */
#results { align-items: flex-end; padding-right: 8cqw;
  background: linear-gradient(270deg, rgba(5,4,8,0.95) 0%, rgba(5,4,8,0.7) 45%, rgba(5,4,8,0.15) 75%); }
#resImg { position: absolute; left: 4cqw; bottom: 0; height: 94cqh; pointer-events: none; filter: drop-shadow(0 0 4cqh rgba(255,170,60,0.3)); animation: heroIn 0.6s cubic-bezier(.2,.8,.2,1) both; }
#resImg.alt { filter: hue-rotate(165deg) saturate(1.25) brightness(0.95) drop-shadow(0 0 4cqh rgba(255,170,60,0.3)); }
#results h2 { font-size: 16cqh; position: relative; z-index: 1; text-align: right; }
#resInfo { font-family: var(--head); font-weight: 500; font-size: 4.4cqh; letter-spacing: 0.1em; color: var(--text); position: relative; z-index: 1; }
#results .menu { position: relative; z-index: 1; }

#toast { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); background: rgba(8,6,12,0.92); border-left: 0.5cqh solid var(--gold); color: #fff; padding: 1.2cqh 2.6cqw; font-family: var(--ui); font-weight: 700; letter-spacing: 0.06em; font-size: 2.4cqh; opacity: 0; transition: opacity 0.25s; z-index: 30; pointer-events: none; }
#toast.on { opacity: 1; }

/* ---------------------------------------------------------------- touch */
#touch { position: absolute; inset: 0; z-index: 4; display: none; pointer-events: none; }
.touch #touch.live { display: block; }
.stick { position: absolute; left: 3%; bottom: 11%; width: 26vmin; height: 26vmin; border-radius: 50%; background: rgba(255,255,255,0.06); border: 2px solid rgba(255,214,120,0.3); pointer-events: auto; touch-action: none; }
.knob { position: absolute; left: 50%; top: 50%; width: 11vmin; height: 11vmin; margin: -5.5vmin; border-radius: 50%; background: rgba(255,214,120,0.25); border: 2px solid rgba(255,214,120,0.6); }
.pad { position: absolute; right: 2.5%; bottom: 11%; display: grid; grid-template-columns: repeat(3, 13vmin); grid-template-rows: repeat(2, 13vmin); gap: 1.6vmin; pointer-events: auto; }
.pad button { clip-path: none; border-radius: 50%; padding: 0; text-align: center; font-size: 3.4vmin; background: rgba(10,8,16,0.6); border: 2px solid rgba(255,214,120,0.45); touch-action: none; }
.pad button::before { display: none; }
.pad button:hover { transform: none; }
.pad button.on { background: rgba(255,207,74,0.7); color: #000; }
.pad .su, .pad .th { font-size: 2.2vmin; }
.pad .th { grid-row: 2; grid-column: 1; }
.pad .sp { grid-row: 2; grid-column: 2; border-color: rgba(255,207,74,0.9); }
.pad .su { grid-row: 2; grid-column: 3; border-color: var(--p2); }

@media (max-aspect-ratio: 1/1) {
  #stage::after { content: 'Rotate to landscape'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,3,10,0.96); font-family: var(--head); font-size: 8vmin; letter-spacing: 0.1em; color: var(--gold); z-index: 50; text-align: center; padding: 10vw; }
}

/* arcade CONTINUE? countdown */
#resInfo.count { font-family: var(--head); font-weight: 600; font-size: 22cqh; line-height: 0.8; color: #fff; text-shadow: 0 0 4cqh rgba(255,45,138,0.8), 0 0.8cqh 0 #000; animation: countPop 1s ease-out infinite; }
@keyframes countPop { from { transform: scale(1.25); } 30% { transform: scale(1); } }

/* +COMBO wordmark: gold plus, pink COMBO, one line */
.logo.combo { display: flex; align-items: baseline; gap: 0.6cqw; }
.logo.combo span { font-size: 24cqh; }
.logo.combo .l1 { font-size: 26cqh; }
.logo.combo .l2 { margin-left: 0; background: linear-gradient(180deg, #fff 0%, #ffd0e6 46%, #ff2d8a 54%, #6e0640 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0.6cqh 0 #000) drop-shadow(0 0 3cqh rgba(255,45,138,0.45)); }
.mword { gap: 0.08em; }

.keyNote { margin: -0.4em 0 0.6em; }
.keyNote kbd { font-size: 0.85em; }

/* ---------------------------------------------------------------- fight zoom
   In a match the cabinet chrome folds away and the screen fills the window;
   it unfolds again for results / menus. The chrome sizes are registered so
   the screen width (--sw, computed from them) animates. */
@property --mh { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --dh { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --bz { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --wv { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --gap { syntax: '<length>'; inherits: true; initial-value: 0px; }
#cab { --ease: 0.45s cubic-bezier(.3,.7,.2,1); transition: --mh var(--ease), --dh var(--ease), --bz var(--ease), --wv var(--ease), --gap var(--ease); }
.marquee, .deck { transition: opacity 0.3s, border-width 0.45s; }
body.fight #cab { --mh: 0px; --dh: 0px; --bz: 0px; --wv: 100vw; --gap: 0px; }
body.fight .marquee, body.fight .deck { opacity: 0; border-width: 0; pointer-events: none; }
body.fight .bezel { border-width: 0; }
body.fight #stage { border-radius: 0; }

/* ---------------------------------------------------------------- key remapping */
.ktabs { display: flex; gap: 0.8cqw; }
.ktabs button { font-size: 2.8cqh; padding: 1cqh 2cqw; }
.ktabs button.on { background: linear-gradient(90deg, rgba(255,207,74,0.35), rgba(255,207,74,0.08)); color: #fff; }
#keyTable { border-collapse: collapse; font-size: 2.6cqh; min-width: 56cqw; }
#keyTable td { padding: 0.45cqh 1.2cqw; border-bottom: 1px solid rgba(255,255,255,0.06); }
#keyTable td:first-child { color: var(--dim); width: 40%; }
button.kslot { width: 100%; min-width: 14cqw; text-align: center; font-family: var(--ui); font-weight: 700; font-size: 2.5cqh; letter-spacing: 0.04em; text-transform: none; padding: 0.8cqh 1cqw;
  background: rgba(255,255,255,0.06); clip-path: none; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; }
button.kslot:hover { transform: none; border-color: var(--gold); }
button.kslot.wait { border-color: #ff2d8a; color: #ff7cba; animation: blink 0.8s steps(1) infinite; }
.menu.row { flex-direction: row; justify-content: center; align-items: center; gap: 2cqw; min-width: 0; }

/* controls: header row with the key editor button, page scrolls when tall */
#controls { justify-content: flex-start; overflow-y: auto; }
.ctlHead { display: flex; align-items: center; gap: 2cqw; width: 94%; }
.ctlHead h2 { margin-right: auto; }
.ctlHead button { font-size: 3.2cqh; }
#controls [data-k] { cursor: pointer; }
#controls [data-k]:hover { border-color: var(--gold); color: #fff; }

/* ---------------------------------------------------------------- training move panel */
#app { display: flex; align-items: center; justify-content: center; }
#trainPanel { display: none; }
body.trainp { --tpw: 300px; }
body.trainp.tpcol { --tpw: 34px; }
body.fight.trainp #cab { --wv: calc(100vw - var(--tpw)); }
body.trainp #trainPanel { display: block; position: relative; flex: none; width: var(--tpw); height: min(100vh, calc((100vw - var(--tpw)) * 9 / 16)); overflow: hidden;
  background: linear-gradient(180deg, #140c1d, #0a0710); border-left: 2px solid #3a1d4d; transition: width 0.3s; }
.tpToggle { position: absolute; top: 8px; left: 4px; z-index: 2; width: 26px; height: 26px; padding: 0; text-align: center; font-size: 16px; clip-path: none; border-radius: 4px; background: rgba(255,255,255,0.08); }
.tpToggle:hover { transform: none; }
body.tpcol .tpBody { display: none; }
.tpBody { height: 100%; overflow-y: auto; padding: 10px 14px 14px 38px; font-size: 13px; font-weight: 500; color: var(--text); }
.tpHead b { display: block; font-family: var(--head); font-size: 26px; letter-spacing: 0.06em; color: var(--gold); line-height: 1; }
.tpHead small { color: var(--dim); font-size: 11px; letter-spacing: 0.06em; }
.tpBody h4 { margin: 10px 0 4px; font-family: var(--head); font-weight: 500; font-size: 15px; letter-spacing: 0.12em; color: #ff7cba; text-transform: uppercase; }
.tpRow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tpName { line-height: 1.1; }
.tpName small { display: block; color: var(--dim); font-size: 10.5px; }
.tpKeys { white-space: nowrap; color: var(--dim); text-align: right; }
.tpBody kbd.rb { cursor: pointer; min-width: 1.6em; text-align: center; }
.tpBody kbd.rb:hover { border-color: var(--gold); color: #fff; }
.tpBody kbd.wait { border-color: #ff2d8a; color: #ff7cba; animation: blink 0.8s steps(1) infinite; }
.tpCombo, .tpSys { line-height: 1.9; color: var(--dim); }
.tpLive { display: flex; gap: 12px; align-items: center; margin: 10px 0 4px; }
.tpStick { display: grid; grid-template-columns: repeat(3, 20px); gap: 2px; }
.tpStick i { font-style: normal; display: grid; place-items: center; height: 20px; font-size: 12px; border-radius: 3px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35); }
.tpStick i.on { background: #ff2d8a; color: #fff; box-shadow: 0 0 8px rgba(255,45,138,0.7); }
.tpBtns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; flex: 1; }
.tpBtns span { text-align: center; font-size: 11px; padding: 4px 0; border-radius: 3px; background: rgba(31,116,255,0.15); color: rgba(255,255,255,0.55); }
.tpBtns span.on { background: #1f74ff; color: #fff; box-shadow: 0 0 8px rgba(31,116,255,0.7); }

.tpLast { margin-top: 10px; font-family: var(--head); font-size: 22px; letter-spacing: 0.04em; color: var(--gold); line-height: 1; min-height: 22px; }
.tpHist { display: flex; flex-wrap: wrap; gap: 3px; min-height: 22px; margin: 6px 0 2px; }
.tpHist i { font-style: normal; font-size: 12px; padding: 1px 5px; border-radius: 3px; background: rgba(255,255,255,0.07); color: #fff; }
.tpTrack { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 0; }
.tpTrack > span { font-size: 12px; line-height: 1.05; color: var(--dim); }
.tpTrack > span small { display: block; color: var(--text); font-size: 11px; }
.tpBar { flex: 1; max-width: 150px; height: 10px; border-radius: 5px; background: rgba(255,255,255,0.08); overflow: hidden; }
.tpBar i { display: block; height: 100%; width: 0; background: #6fb2ff; }
.tpBar i.full { background: #ffd24a; box-shadow: 0 0 8px rgba(255,210,74,0.8); }
.tpCode { display: flex; gap: 2px; align-items: center; }
.tpCode i { font-style: normal; width: 17px; height: 18px; display: grid; place-items: center; font-size: 11px; border-radius: 3px; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.4); }
.tpCode i.on { background: #ff2d8a; color: #fff; }
.tpCode b { margin-left: 4px; font-weight: 500; font-size: 11px; opacity: 0.5; }
.tpCode b.on { opacity: 1; filter: drop-shadow(0 0 4px #ffd24a); }


/* phones: no double-tap / pinch zoom anywhere (a game, not a document) */
html, body, button, #stage, #cab { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
#touch, #cv { touch-action: none; }

.a2hs { position: absolute; left: 50%; bottom: 2cqh; transform: translateX(-50%); z-index: 3; font-size: 2.4cqh; color: #fff; background: rgba(10,6,18,0.85); border: 1px solid var(--line); padding: 0.8cqh 1.6cqw; border-radius: 4px; white-space: nowrap; }
.a2hs b { color: var(--gold); }
@supports (padding: env(safe-area-inset-left)) { #app { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; } }

/* touch pause button: top centre under the timer */
.tpause { display: none; position: absolute; left: 50%; top: 15%; transform: translateX(-50%); z-index: 6; pointer-events: auto; width: 11vmin; height: 7vmin; padding: 0;
  clip-path: none; border-radius: 1.4vmin; text-align: center; font-size: 3vmin; letter-spacing: 0.1em; background: rgba(10,8,16,0.55); border: 1px solid rgba(255,214,120,0.45); color: rgba(255,255,255,0.85); }
.tpause::before { display: none; }
.tpause:hover { transform: translateX(-50%); }
.touch #touch.live .tpause { display: block; }