@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display: swap;
}

.hero-actions .arcade-entry {
  border: 2px solid #36e9ff;
  border-radius: 8px;
  background: linear-gradient(135deg, #290b60, #bd1c9d);
  box-shadow: 0 0 18px #ff28bd88, inset 0 1px #ffffff66;
  color: #fff;
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  line-height: 1.6;
}
.hero-actions .arcade-entry:hover:not(:disabled) {
  background: linear-gradient(135deg, #4d168d, #eb34bc);
  box-shadow: 0 0 23px #ff28bd;
}

:is(.arcade-page, .mini-page, .flappy-page, .target-page) {
  --bg: #09051e;
  --surface: #160a37;
  --gold: #ffcf45;
  --text: #fff7ff;
  --muted: #c5b9df;
  --line: #ef35dc55;
  --arcade-pink: #ff28bd;
  --arcade-cyan: #36e9ff;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 15% 8%, #ffffff 0 1px, transparent 2px),
    radial-gradient(circle at 78% 13%, #36e9ff 0 1px, transparent 3px),
    radial-gradient(circle at 53% 25%, #ff69e8 0 1px, transparent 3px),
    radial-gradient(ellipse at 50% 4%, #7f145a 0, #220b50 29%, transparent 66%),
    linear-gradient(#09051e, #10042b 60%, #20094a);
  background-size: 180px 170px, 260px 210px, 320px 260px, auto, auto;
}

:is(.arcade-page, .mini-page, .flappy-page, .target-page) .site-header {
  background: #0b0528ed;
  border-bottom-color: #ff28bd88;
  box-shadow: 0 2px 22px #ee20c044;
}
:is(.arcade-page, .mini-page, .flappy-page, .target-page) .brand,
:is(.arcade-page, .mini-page, .flappy-page, .target-page) .site-header nav {
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  line-height: 1.6;
}
:is(.arcade-page, .mini-page, .flappy-page, .target-page) .brand-dot { color: var(--arcade-pink); }
:is(.arcade-page, .mini-page, .flappy-page, .target-page) .site-footer {
  background: #09051e;
  border-top-color: #ff28bd66;
  color: var(--arcade-cyan);
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
}
:is(.arcade-back, .mini-back, .flappy-back, .target-back) { color: var(--arcade-cyan); }
:is(.arcade-back, .mini-back, .flappy-back, .target-back):hover { color: #fff; text-shadow: 0 0 10px var(--arcade-cyan); }
:is(.arcade-eyebrow, .arcade-kicker, .mini-eyebrow, .flappy-eyebrow, .target-eyebrow) {
  color: var(--arcade-cyan);
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: .08em;
  text-shadow: 0 0 12px #36e9ff99;
}
:is(.arcade-heading, .mini-heading, .flappy-heading, .target-heading) h1 {
  color: #fff;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(24px, 4.1vw, 52px);
  line-height: 1.36;
  letter-spacing: -.055em;
  text-shadow: 3px 3px 0 #319cff, -3px -2px 0 #ff38cf, 0 0 24px #f526c7;
}
:is(.mini-intro, .mini-result, .mini-pause, .flappy-choose, .flappy-overlay, .game-intro, .game-summary, .game-round-end) h2 {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(17px, 2.7vw, 29px);
  line-height: 1.5;
  color: #fff;
  text-shadow: 2px 2px 0 #ad1bc4;
}

.arcade-heading { position: relative; isolation: isolate; padding: 36px 0 28px; }
.arcade-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 0;
  width: min(76vw, 580px); height: min(40vw, 260px);
  transform: translateX(-50%);
  border-radius: 50% 50% 12% 12%;
  background: repeating-linear-gradient(0deg, transparent 0 18px, #210839 19px 23px), linear-gradient(#ffcf45 6%, #ff792c 34%, #ff20ba 80%);
  box-shadow: 0 0 72px #f52ba877;
  opacity: .9;
}
.arcade-heading h1 { font-size: clamp(30px, 6vw, 72px); text-transform: uppercase; }
.arcade-heading > p:last-child { color: #fff; text-shadow: 0 2px 12px #09051e; }
.arcade-card,
.arcade-coming {
  border: 2px solid #ff28bdaa;
  border-radius: 14px;
  background: linear-gradient(145deg, #240a50, #100727 80%);
  box-shadow: 0 0 20px #fb28ac33, inset 0 1px #ffffff24;
}
a.arcade-card:hover { border-color: var(--arcade-cyan); box-shadow: 0 0 26px #36e9ff88, 0 16px 38px #0008; }
.arcade-art { background: radial-gradient(circle at 50% 35%, #83209d, #240a55 60%, #0b0625); }
.arcade-art-flappy { background: linear-gradient(#22095c, #f02ba6 65%, #ef792a); }
.arcade-art-target, .arcade-flappy-icon, .preview-pac-hero { border-color: var(--arcade-cyan); box-shadow: 0 0 16px #36e9ff88; }
.arcade-flappy-bar { border-color: #9215ab; background: linear-gradient(90deg, #f016ac, #ffb53f, #ec19b1); }
.arcade-preview-pac { background: repeating-linear-gradient(90deg, #0a0731 0 36px, #2d1590 36px 40px); }
.preview-pac-wall { border-color: #823bff; box-shadow: 0 0 14px #823bff; }
.preview-pac-dot { background: var(--arcade-cyan); }
.arcade-preview-memory > span { border-color: var(--arcade-pink); background: #170a3b; color: var(--arcade-cyan); }
.arcade-preview-tower span { background: linear-gradient(90deg, #b11bd5, #ff4ebc); border-color: #ffb5f5; border-top-color: #36e9ff; }
.arcade-preview-flippers { background: radial-gradient(circle at 50% 30%, #9725a2, #170833 72%); border-bottom-color: var(--arcade-pink); }
.arcade-card-content h2 { font-family: "Press Start 2P", monospace; font-size: clamp(16px, 2vw, 24px); line-height: 1.55; color: #fff; text-shadow: 2px 2px #b013ba; }
.arcade-play, .arcade-coming-symbol { border-color: var(--arcade-cyan); color: #09051e; background: var(--arcade-cyan); box-shadow: 0 0 16px #36e9ff88; }
.arcade-play { border-radius: 8px; font-family: "Press Start 2P", monospace; font-size: 10px; }
.arcade-coming-symbol { font-family: "Press Start 2P", monospace; font-size: 40px; }

:is(.mini-panel, .flappy-panel, .target-panel),
.flippers-page .mini-panel {
  border: 2px solid #ff28bdaa;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 0, #431378, transparent 64%), linear-gradient(145deg, #19083b, #0a0623);
  box-shadow: 0 0 30px #f320aa33, inset 0 1px #ffffff22;
}
:is(.mini-panel.is-active, .flappy-panel.is-playing, .target-panel.is-immersive) { border: 0; border-radius: 0; }
:is(.arcade-page, .mini-page, .flappy-page, .target-page) .btn {
  border: 2px solid var(--arcade-cyan);
  border-radius: 8px;
  background: linear-gradient(135deg, #ff45c6, #b62cdd);
  box-shadow: 0 0 17px #ff28bd88, inset 0 1px #ffffff7a;
  color: #fff;
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  line-height: 1.7;
  text-align: center;
}
:is(.arcade-page, .mini-page, .flappy-page, .target-page) .btn:hover:not(:disabled) { background: linear-gradient(135deg, #ff78d8, #d844f1); box-shadow: 0 0 23px #ff28bd; }
:is(.mini-hud > span, .game-hud > div, .flappy-option, .prize-card) { border-color: #36e9ff66; background: #130a39; box-shadow: inset 0 0 15px #48159266; }
:is(.mini-hud strong, .game-hud strong, .flappy-hud strong, .mini-result-score, .final-score, .timing-display, .countdown-number) { color: var(--arcade-cyan); text-shadow: 0 0 16px #36e9ff88; font-family: "Press Start 2P", monospace; }
:is(.mini-hud small, .game-hud span, .flappy-hud, .mini-record, .mini-feedback) { color: var(--arcade-pink); }
:is(.mini-pause-button, .flappy-hud button, .pac-pad button, .flippers-controls button) { border-color: var(--arcade-cyan); background: #220b50; color: #fff; }
.mini-pause { background: #09051ef2; }
.mini-controls input { accent-color: var(--arcade-pink); }
.mini-canvas, .flappy-canvas-wrap, .flippers-page .mini-canvas, .game-arena { border-color: var(--arcade-cyan); box-shadow: 0 0 20px #36e9ff55; }
.memory-back { background: radial-gradient(circle, #6c18b6, #190940); color: #fff; }
.memory-face { border-color: var(--arcade-pink); }
.pac-choice { border-color: #ff28bd88; background: #19083b; }
.pac-choice[aria-pressed="true"], .flappy-option[aria-pressed="true"] { border-color: var(--arcade-cyan); background: #401473; box-shadow: 0 0 14px #36e9ff88; }
.game-arena { background: radial-gradient(circle at 50% 40%, #431277, #170a3e 65%, #09051e); }
.game-arena::before { background: linear-gradient(90deg, transparent calc(50% - .5px), #36e9ff 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), #36e9ff 50%, transparent calc(50% + .5px)); }
.game-time-track > div { background: var(--arcade-pink); }
.game-target { border-color: var(--arcade-cyan); background: #451077; box-shadow: 0 0 0 5px #09051e, 0 0 18px #36e9ff88; }
.flappy-result, .flappy-overlay { background: #09051ee8; }
.flappy-option-image { border-color: var(--arcade-cyan); background: #2a0c59; }
.flippers-controls #launchBall { background: var(--arcade-pink); color: #fff; }

@media (max-width: 600px) {
  :is(.arcade-page, .mini-page, .flappy-page, .target-page) .site-header nav { font-size: 8px; }
  .arcade-heading { padding: 20px 0; }
  .arcade-heading::before { width: min(82vw, 420px); height: 180px; }
  .arcade-heading h1 { font-size: clamp(23px, 7vw, 42px); }
  :is(.arcade-heading, .mini-heading, .flappy-heading, .target-heading) h1 { word-break: normal; overflow-wrap: anywhere; }
}

.arcade-player {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  width: min(100%, 780px);
  margin: 0 auto 24px;
  padding: 18px;
  border: 1px solid #36e9ff88;
  border-radius: 12px;
  background: #10082edb;
  box-shadow: 0 0 18px #36e9ff24;
}
.arcade-player-form { display: flex; align-items: end; justify-content: center; flex-wrap: wrap; gap: 10px; width: 100%; }
.arcade-player label, .arcade-rankings > label {
  display: grid;
  gap: 8px;
  color: var(--arcade-cyan);
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  line-height: 1.6;
}
.arcade-player input, .arcade-rankings select {
  width: min(100%, 280px);
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #ff28bd99;
  border-radius: 7px;
  background: #09051e;
  color: #fff;
  font: 15px Inter, Arial, sans-serif;
}
.arcade-player button, .ranking-periods button, .arcade-rankings-link {
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid var(--arcade-cyan);
  border-radius: 7px;
  background: #2c1160;
  color: #fff;
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  line-height: 1.5;
}
.arcade-player button:hover, .ranking-periods button:hover, .arcade-rankings-link:hover { background: #7722ad; box-shadow: 0 0 16px #36e9ff77; }
.arcade-player-status { width: 100%; min-height: 1.5em; text-align: center; color: #fff; font-size: 13px; }
.arcade-round-status { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; width: 100%; padding-top: 10px; border-top: 1px solid #36e9ff44; text-align: center; }
.arcade-round-status p { width: 100%; margin: 0; color: var(--arcade-cyan); font-size: 12px; }
.arcade-player small { color: var(--muted); text-align: center; font-size: 11px; }
.arcade-player-ranking { color: var(--arcade-cyan); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.arcade-rankings-link { display: table; margin: 0 auto 24px; background: linear-gradient(135deg, #b51db2, #6419ac); text-align: center; }
.arcade-rankings {
  width: min(100%, 850px);
  margin: 0 auto;
  padding: clamp(18px, 4vw, 32px);
  border: 2px solid #ff28bdaa;
  border-radius: 16px;
  background: linear-gradient(145deg, #240a50, #100727 80%);
  box-shadow: 0 0 24px #fb28ac33;
}
.arcade-rankings select { display: block; margin: 8px 0 20px; }
.ranking-periods { display: flex; flex-wrap: wrap; gap: 8px; }
.ranking-periods button[aria-pressed="true"] { background: var(--arcade-cyan); color: #09051e; }
#rankingStatus { min-height: 28px; margin: 22px 0 8px; color: var(--muted); }
.ranking-list { list-style: none; display: grid; gap: 8px; }
.ranking-list li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid #36e9ff55; border-radius: 8px; background: #10082e; }
.ranking-list li > span:first-child { color: var(--arcade-cyan); font-family: "Press Start 2P", monospace; font-size: 11px; }
.ranking-list li strong { min-width: 0; overflow-wrap: anywhere; }
.ranking-list li > span:last-child { color: var(--gold); font-weight: 700; }
.ranking-note { margin-top: 24px; color: var(--muted); font-size: 12px; }
@media (max-width: 600px) {
  .arcade-player-form label, .arcade-player input { width: 100%; }
  .arcade-player-form button { width: 100%; }
  .ranking-list li { grid-template-columns: 42px minmax(0, 1fr); }
  .ranking-list li > span:last-child { grid-column: 2; }
}

.ranking-screen { min-height: 100dvh; }
.ranking-main { display: flex; flex-direction: column; gap: 14px; min-height: 100dvh; height: 100dvh; padding: clamp(14px, 2vw, 28px); overflow: hidden; }
.ranking-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ranking-header h1 { margin: 4px 0 0; color: #fff; font: 400 clamp(25px, 3vw, 43px)/1.2 "Press Start 2P", monospace; text-shadow: 3px 3px var(--arcade-pink); }
.ranking-header-actions { display: flex; align-items: center; gap: 12px; }
.ranking-header-actions a, .ranking-header-actions button { min-height: 42px; padding: 10px 14px; border: 1px solid var(--arcade-cyan); border-radius: 8px; background: #160a38; color: #fff; font: 700 12px Arial, sans-serif; text-decoration: none; cursor: pointer; }
.ranking-header-actions :is(a, button):hover { background: #421375; }
.ranking-round { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px; border: 2px solid var(--arcade-pink); border-radius: 14px; background: linear-gradient(110deg, #2c0b65, #110727); box-shadow: 0 0 20px #ff28bd44; }
.ranking-round-caption { margin: 0; color: var(--arcade-cyan); font: 10px "Press Start 2P", monospace; }
.ranking-round h2 { margin: 9px 0 5px; color: #fff; font-size: clamp(21px, 2vw, 31px); }
.ranking-round p:last-child { margin: 0; color: #ddd1f0; font-size: 12px; }
.ranking-state { flex: 0 0 auto; max-width: 42%; padding: 13px 18px; border: 2px solid var(--arcade-cyan); border-radius: 9px; background: #092744; color: var(--arcade-cyan); font: 10px/1.6 "Press Start 2P", monospace; text-align: center; }
.ranking-state[data-state="closed"] { border-color: #ffbf39; background: #4c2b11; color: #ffdf85; }
.ranking-state[data-state="registration"], .ranking-state[data-state="waiting"] { border-color: var(--arcade-pink); background: #431344; color: #ffb9e9; }
.ranking-update { min-height: 17px; margin: 0; color: #d6c6eb; font-size: 12px; text-align: right; }
.ranking-boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; flex: 1; min-height: 0; }
.ranking-board { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 2px solid #36e9ff88; border-radius: 13px; background: linear-gradient(150deg, #210a52, #0e082a); box-shadow: inset 0 1px #ffffff20, 0 0 18px #36e9ff22; }
.ranking-board h2 { flex: 0 0 auto; margin: 0; padding: 15px; border-bottom: 1px solid #36e9ff55; color: #fff; font: 12px/1.5 "Press Start 2P", monospace; }
.ranking-board-list { min-height: 0; margin: 0; padding: 8px; overflow: auto; list-style: none; }
.ranking-board-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid #ffffff18; font-size: 13px; }
.ranking-board-list li:first-child { border-radius: 6px; background: #ffbf3922; }
.ranking-board-list li span:first-child { color: var(--arcade-cyan); font: 9px "Press Start 2P", monospace; }
.ranking-board-list li strong { min-width: 0; overflow-wrap: anywhere; }
.ranking-board-list li span:last-child { color: #ffda72; font-weight: 800; font-variant-numeric: tabular-nums; }
.ranking-board-empty { margin: 16px; color: #d6c6eb; font-size: 13px; }
.ranking-footnote { margin: 0; color: #c7b8da; font-size: 11px; text-align: center; }
@media (max-width: 900px) { .ranking-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .ranking-main { height: auto; min-height: 100dvh; overflow: visible; }
  .ranking-header { align-items: flex-start; }
  .ranking-header h1 { font-size: clamp(22px, 6vw, 30px); }
  .ranking-header-actions { flex-direction: column; align-items: stretch; }
  .ranking-header-actions :is(a, button) { text-align: center; font-size: 11px; }
  .ranking-round { align-items: stretch; flex-direction: column; gap: 10px; }
  .ranking-state { max-width: none; }
  .ranking-boards { display: flex; flex-direction: column; }
  .ranking-board { min-height: 170px; max-height: 360px; }
}