:root {
  color-scheme: dark;
  font-family: "Courier New", ui-monospace, monospace;
  --cream: #d6c8a8;
  --cream-dark: #8f8268;
  --ink: #080806;
  --green: #86ff79;
  --amber: #ffc15b;
  --red: #d9463e;
}
* { box-sizing: border-box; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #17130e; }
body {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% 8%, #4c412e 0%, #1b1710 34%, #080704 78%);
}
button, input { font: inherit; }
button { border: 0; color: #fff; cursor: pointer; }
#game-shell {
  position: relative;
  width: min(100vw, 620px);
  height: min(100vh, 1024px);
  aspect-ratio: 620 / 1024;
  overflow: hidden;
  border: clamp(5px, 1.4vw, 11px) solid var(--cream);
  border-radius: 18px 18px 11px 11px;
  background: #080806;
  box-shadow:
    0 0 0 3px #403a2f,
    0 0 0 6px #17140f,
    0 32px 110px rgba(0,0,0,.82),
    inset 0 0 0 2px rgba(255,255,255,.28);
}
#game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  border-radius: 8px;
  box-shadow: inset 0 0 38px rgba(0,0,0,.82), inset 0 0 0 3px rgba(31,24,15,.72);
}
.cabinet-top {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  width: 74%;
  height: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border-radius: 4px;
  color: #2d281f;
  background: linear-gradient(#f1e5c7, #b7a789);
  border: 1px solid #6e624e;
  box-shadow: inset 0 1px #fff8e2, 0 2px 0 #29241c;
  font-weight: 900;
  font-size: 8px;
  letter-spacing: .13em;
  pointer-events: none;
}
.cabinet-top b { color: #8c2c26; }
.screen-bezel { position: absolute; inset: 0; }
#game { width: 100%; height: 100%; display: block; background: #030504; }
.crt-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: .34;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, rgba(0,0,0,.055) 1px 3px),
    radial-gradient(ellipse at center, transparent 57%, rgba(0,0,0,.42) 100%);
  mix-blend-mode: screen;
}
.overlay, .rotate-overlay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(3,4,2,.68);
  z-index: 20;
  padding: 26px 18px 122px;
}
.overlay.visible, .rotate-overlay.visible { display: grid; }
.card {
  position: relative;
  width: min(478px, 95%);
  padding: 25px 28px 22px;
  overflow: hidden;
  border-radius: 8px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.015) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #151812, #090b08 68%, #050604);
  border: 3px solid #91856c;
  outline: 2px solid #2f2b23;
  box-shadow:
    0 24px 80px rgba(0,0,0,.75),
    inset 0 0 0 2px #d8c9a9,
    inset 0 0 32px rgba(0,0,0,.72);
  text-align: center;
}
.card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(219,202,164,.22);
  pointer-events: none;
}
.card > * { position: relative; z-index: 1; }
.title-card { padding-top: 24px; }
.coin-lamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffcf77;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.coin-lamp i {
  width: 8px; height: 8px; border-radius: 50%; background: #ff4c36;
  box-shadow: 0 0 8px #ff3b2d, inset 0 1px rgba(255,255,255,.45);
  animation: coinBlink 1.1s steps(2, end) infinite;
}
@keyframes coinBlink { 50% { opacity: .32; } }
.eyebrow { margin: 9px 0 6px; color: #8cff83; font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.title-card h1 {
  margin: 2px 0 0;
  color: #fff3bd;
  font-size: clamp(41px, 10vw, 68px);
  line-height: .92;
  letter-spacing: -.075em;
  text-shadow: 3px 3px 0 #8b2f2a, 6px 6px 0 #241714, 0 0 18px rgba(255,204,89,.3);
}
.title-card h1 span { color: #70e8ff; text-shadow: 3px 3px 0 #315080, 6px 6px 0 #131a25; }
.subtitle-pixel { margin: 9px 0 7px; color: #ffbe58; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.lead { margin: 0; color: #c4c0aa; font-family: system-ui, sans-serif; line-height: 1.55; font-size: 13px; }
.stage-route { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 15px 0 13px; }
.stage-route div {
  padding: 8px 2px 7px;
  border: 1px solid #4c493a;
  border-bottom-color: #b3a57e;
  background: #0c100b;
  box-shadow: inset 0 0 0 1px #20251a;
}
.stage-route b { display: block; color: #fff0a3; font-size: 12px; }
.stage-route span { display: block; margin-top: 3px; color: #7ccf83; font-size: 7px; font-weight: 900; letter-spacing: .05em; }
.music-select {
  display: grid;
  gap: 7px;
  padding: 10px;
  margin: 0 0 11px;
  border: 1px solid #4a4a39;
  background: #070907;
}
.music-select > span { color: #ffca64; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.music-select > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.music-button {
  min-height: 45px;
  padding: 6px 4px;
  color: #bcb9a6;
  background: linear-gradient(#24261e, #11130f);
  border: 1px solid #555444;
  border-bottom: 3px solid #090a08;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 900;
}
.music-button small { display: block; margin-top: 3px; color: #70776a; font-size: 6px; }
.music-button.active { color: #10140d; background: linear-gradient(#cfff8f, #65bb62); border-color: #e8ffc7; box-shadow: 0 0 11px rgba(126,255,106,.35); }
.music-button.active small { color: #233b20; }
.scoreboard { margin: 0 0 10px; border: 1px solid #665d45; background: #040604; }
.scoreboard-head { display: flex; justify-content: space-between; padding: 7px 10px; color: #ffbf54; border-bottom: 1px solid #3e3d2e; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.scoreboard-head strong { color: #fff0a4; font-size: 12px; }
.ranking-list { list-style: none; margin: 0; padding: 5px 10px 6px; counter-reset: rank; }
.ranking-list li {
  counter-increment: rank;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 7px;
  padding: 2px 0;
  color: #a8d8a4;
  font-size: 9px;
  font-weight: 900;
  text-align: left;
}
.ranking-list li::before { content: counter(rank) "."; color: #ffb44f; }
.ranking-list li span:last-child { color: #fff4a5; }
.primary, .secondary, .mini-button {
  width: 100%;
  min-height: 47px;
  padding: 11px 16px;
  margin-top: 8px;
  border-radius: 4px;
  font-weight: 900;
  letter-spacing: .01em;
}
.arcade-button { border: 2px solid #2b211b; border-bottom-width: 6px; box-shadow: inset 0 2px rgba(255,255,255,.28), 0 3px 0 #050504; }
.primary { color: #fff7d0; background: linear-gradient(#ef6155, #b82e2b); text-shadow: 0 2px #5c1413; }
.secondary { color: #d8d2b8; background: linear-gradient(#4c5043, #25291f); }
.primary small { display: block; margin-top: 2px; color: #ffd3a7; font-size: 7px; letter-spacing: .15em; }
.primary:active, .secondary:active, .mini-button:active { transform: translateY(3px); border-bottom-width: 3px; filter: brightness(1.08); }
.attract-label { margin: 11px 0 0; color: #7dff74; font-size: 9px; font-weight: 900; letter-spacing: .12em; animation: attractBlink 1s steps(2,end) infinite; }
@keyframes attractBlink { 50% { opacity: .18; } }
.help { margin: 9px 0 0; color: #7f816f; font-family: system-ui, sans-serif; font-size: 9px; line-height: 1.45; }
.compact-card { width: min(420px, 93%); }
.compact-card h2 { margin: 7px 0 4px; color: #fff0b4; font-size: 28px; text-shadow: 2px 2px #5c241e; }
.panel-copy { margin: 0 0 12px; color: #a9a694; font-family: system-ui, sans-serif; font-size: 12px; }
.result-stars { margin: 10px 0 2px; color: #ffc94c; font-size: 34px; letter-spacing: .06em; text-shadow: 0 0 14px rgba(255,191,65,.4); }
.results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 13px 0; }
.results div { padding: 9px 7px; border: 1px solid #494839; background: #080a07; }
.results .wide { grid-column: 1 / -1; }
.results dt { color: #7fa97c; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.results dd { margin: 5px 0 0; color: #fff1a6; font-weight: 900; font-size: 17px; }
.initial-entry { margin: 7px 0 10px; padding: 10px; border: 1px solid #ffbe54; background: #171105; }
.initial-entry label { display: block; margin-bottom: 8px; color: #ffcd72; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.initial-entry > div { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; }
.initial-entry input { width: 100%; min-width: 0; padding: 8px; border: 2px solid #6e633f; color: #9cff8c; background: #020401; text-align: center; text-transform: uppercase; font-size: 22px; font-weight: 900; letter-spacing: .18em; }
.mini-button { min-height: 40px; margin: 0; color: #17210f; background: #9fe47e; border: 2px solid #d9ffbd; }
.toast {
  position: absolute; top: 82px; left: 50%; transform: translateX(-50%); z-index: 15;
  padding: 9px 15px; color: #fff3a7; background: #080a06; border: 2px solid #a99b70;
  box-shadow: 4px 4px 0 rgba(0,0,0,.55), 0 0 16px rgba(130,255,102,.18);
  font-size: 11px; font-weight: 900; letter-spacing: .04em; white-space: nowrap;
}
.hidden { display: none !important; }
.controls {
  position: absolute; left: 0; right: 0; bottom: 0; height: 112px; z-index: 10;
  display: grid; grid-template-columns: .88fr 1fr 1fr 1fr 1fr 1.25fr; gap: 7px;
  padding: 10px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    linear-gradient(#4e4737, #27231a 34%, #15120d);
  border-top: 4px solid #b9aa88;
  box-shadow: 0 -4px 0 #3e382c, 0 -16px 32px rgba(0,0,0,.4);
}
.control-key {
  display: grid; place-content: center; gap: 3px; min-width: 0;
  color: #ebe3c7; background: linear-gradient(#68685e, #33352f);
  border: 2px solid #171914; border-bottom: 7px solid #11120f; border-radius: 6px;
  box-shadow: inset 0 2px rgba(255,255,255,.22), 0 2px 0 #a69879;
}
.control-key .icon { font-size: 22px; line-height: 1; font-weight: 900; text-shadow: 0 2px #111; }
.control-key .label { color: #c4bda7; font-family: system-ui, sans-serif; font-size: 8px; font-weight: 900; white-space: nowrap; }
.control-key.hold { background: linear-gradient(#596365, #293133); }
.control-key.rotate { color: #14220f; background: linear-gradient(#a6ee77, #4e9d48); }
.control-key.rotate .label { color: #173115; }
.control-key.drop { background: linear-gradient(#e66050, #9d2925); }
.control-key.drop .label { color: #ffe6cf; }
.control-key:active { transform: translateY(4px); border-bottom-width: 3px; filter: brightness(1.12); }
.rotate-overlay { z-index: 50; padding-bottom: 24px; }
.rotate-card { display: grid; gap: 8px; padding: 23px 27px; border: 4px solid #b9aa88; background: #11130e; text-align: center; }
.rotate-card strong { color: #fff1b2; font-size: 19px; }
.rotate-card span { color: #9b9d87; font-family: system-ui, sans-serif; font-size: 11px; }
@media (max-height: 890px) {
  .overlay { padding-top: 15px; }
  .title-card { transform: scale(.88); }
  .controls { height: 98px; }
  .control-key .icon { font-size: 19px; }
  .compact-card { transform: scale(.93); }
}
@media (max-width: 430px) {
  .card { padding-left: 20px; padding-right: 20px; }
  .music-button small { display: none; }
  .title-card h1 { font-size: 43px; }
}

/* v0.4.0 Rainbow Family Arcade */
:root {
  --rainbow-red: #ff5e7d;
  --rainbow-orange: #ff9f43;
  --rainbow-yellow: #ffe45e;
  --rainbow-green: #55df82;
  --rainbow-cyan: #4ee6ff;
  --rainbow-blue: #5874ff;
  --rainbow-violet: #be63ff;
}
html, body {
  background: #7b6cff;
}
body {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.7) 0 2%, transparent 2.2%),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.56) 0 1.5%, transparent 1.8%),
    linear-gradient(145deg, #62dcff 0%, #8d73ff 32%, #ff78b7 61%, #ffd86b 100%);
}
#game-shell {
  width: min(100vw, calc(100vh * 0.4697), 620px);
  height: auto;
  max-height: 100vh;
  aspect-ratio: 620 / 1320;
  border-color: #fff4c9;
  border-radius: 22px 22px 14px 14px;
  background: #17244f;
  box-shadow:
    0 0 0 3px #ff8fc8,
    0 0 0 7px #5d5cff,
    0 28px 90px rgba(34,20,91,.55),
    inset 0 0 0 2px rgba(255,255,255,.8);
}
#game-shell::before {
  box-shadow: inset 0 0 26px rgba(18,16,70,.44), inset 0 0 0 3px rgba(255,255,255,.18);
}
.cabinet-top {
  color: #38316d;
  background: linear-gradient(90deg, #fff4b8, #ffc3e2 30%, #bdefff 66%, #d3c1ff);
  border-color: #ffffff;
  box-shadow: inset 0 1px #fff, 0 2px 0 #5147a7;
}
.cabinet-top b { color: #ef4377; }
.crt-layer {
  opacity: .17;
  mix-blend-mode: soft-light;
}
.overlay, .rotate-overlay {
  background: rgba(38,24,98,.52);
  padding: 28px 18px clamp(92px, 10%, 132px);
}
.card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 38%),
    linear-gradient(155deg, #23366f, #36256e 55%, #6a2868);
  border-color: #fff1ad;
  outline-color: #7157d4;
  box-shadow:
    0 22px 75px rgba(35,20,90,.55),
    inset 0 0 0 2px rgba(255,255,255,.65),
    inset 0 0 38px rgba(15,25,83,.55);
}
.card::before { border-color: rgba(255,255,255,.24); }
.eyebrow { color: #82fff0; }
.title-card h1 {
  color: #fff176;
  text-shadow: 3px 3px 0 #ff704d, 6px 6px 0 #9c3fc4, 0 0 20px rgba(255,246,117,.42);
}
.title-card h1 span {
  background: linear-gradient(90deg, #4ee6ff, #55df82, #ffe45e, #ff7ba9, #be63ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(3px 3px 0 #3a409d);
}
.subtitle-pixel { color: #ffe77c; }
.lead { color: #eef5ff; }
.stage-route div {
  border-color: rgba(255,255,255,.38);
  background: linear-gradient(155deg, rgba(255,255,255,.18), rgba(36,30,104,.66));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.stage-route div:nth-child(1) { border-bottom-color: #5ee9ff; }
.stage-route div:nth-child(2) { border-bottom-color: #ff79be; }
.stage-route div:nth-child(3) { border-bottom-color: #54e99c; }
.stage-route div:nth-child(4) { border-bottom-color: #a97bff; }
.stage-route div:nth-child(5) { border-bottom-color: #ffe35a; }
.stage-route b { color: #fff; }
.stage-route span { color: #d8efff; }
.stage-music-banner {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(78,230,255,.22), rgba(255,111,185,.23), rgba(255,228,94,.2));
}
.stage-music-banner span { color: #fff49a; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.stage-music-banner small { color: #e9eeff; font-family: system-ui, sans-serif; font-size: 9px; }
.scoreboard { border-color: rgba(255,255,255,.45); background: rgba(15,20,70,.62); }
.scoreboard-head { color: #ffe26b; border-bottom-color: rgba(255,255,255,.22); }
.scoreboard-head strong { color: #fff; }
.ranking-list li { color: #bdfff2; }
.ranking-list li::before { color: #ff9acb; }
.ranking-list li span:last-child { color: #fff27e; }
.primary {
  background: linear-gradient(90deg, #ff657e, #ff9c48 34%, #f7d94d 68%, #55d98b);
  color: #311a52;
  text-shadow: 0 1px rgba(255,255,255,.45);
}
.secondary { background: linear-gradient(90deg, #626fff, #ac61ee); color: #fff; }
.attract-label { color: #fff476; }
.help { color: #d8e5ff; }
.controls {
  height: clamp(84px, 9.5%, 124px);
  gap: 6px;
  padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 22%, rgba(255,255,255,.1) 70%, transparent),
    linear-gradient(90deg, #526cff, #8b5de5 30%, #ff69ae 60%, #ff9a50 83%, #ffe15d);
  border-top-color: #fff4b6;
  box-shadow: 0 -4px 0 #6857c5, 0 -12px 30px rgba(48,31,108,.35);
}
.control-key {
  color: #fff;
  border-color: rgba(43,33,100,.8);
  border-bottom-color: #372a7d;
  box-shadow: inset 0 2px rgba(255,255,255,.38), 0 2px 0 rgba(255,255,255,.5);
}
.control-key:nth-child(1) { background: linear-gradient(#56ddeb, #3194ce); }
.control-key:nth-child(2) { background: linear-gradient(#6f8dff, #4859cf); }
.control-key:nth-child(3) { background: linear-gradient(#a872ff, #7545d6); }
.control-key:nth-child(4) { background: linear-gradient(#ff71bb, #db3d89); }
.control-key:nth-child(5) { background: linear-gradient(#ff9d57, #e56c32); }
.control-key:nth-child(6) { background: linear-gradient(#ffe56a, #e4a827); color: #49345c; }
.control-key .label { color: rgba(255,255,255,.9); }
.control-key.rotate .label, .control-key.drop .label { color: inherit; }
.toast {
  color: #3e275f;
  background: linear-gradient(90deg, #fff49a, #ffd1e7, #c9f6ff);
  border-color: #fff;
  box-shadow: 4px 4px 0 rgba(69,43,137,.55), 0 0 20px rgba(255,255,255,.4);
}
@media (max-height: 980px) {
  .title-card { transform: scale(.9); }
  .compact-card { transform: scale(.94); }
}
.toast { top: 112px; }