@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --ink: #edf4ff;
  --muted: #91a9c3;
  --line: rgba(166, 201, 229, .19);
  --panel: rgba(9, 27, 45, .84);
  --cyan: #53d8e8;
  --gold: #ffd66f;
  --blue: #79b7ff;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: #09182a; font-family: 'Space Grotesk', sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; padding: 22px clamp(16px, 4vw, 64px) 16px; overflow: hidden; position: relative; background: radial-gradient(ellipse at 16% 5%, rgba(61, 134, 180, .24), transparent 38%), radial-gradient(ellipse at 86% 80%, rgba(208, 92, 55, .14), transparent 30%), linear-gradient(145deg, #0c2034, #091627 64%, #17212c); }
.app-shell::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .11; background-image: linear-gradient(rgba(194, 221, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(194, 221, 255, .1) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.select-screen, .game-screen { position: relative; max-width: 1230px; margin: 0 auto; animation: arrive .55s ease-out both; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.masthead { padding: 11px 0 22px; text-align: center; }
.edition-mark, .masthead-note, .section-heading, .roster-count, .name-row label, .name-hint, .preview-topline, .preview-name, .preview-description, .control-strip, .select-footer, .game-brand, .game-status, .small-button, .world-chip, .game-help, .game-footer { font-family: 'Press Start 2P', monospace; }
.edition-mark { color: #9cbed5; font-size: 9px; letter-spacing: 0; margin-bottom: 13px; }
h1 { margin: 0; color: #f1f6fd; font-family: 'Press Start 2P', monospace; font-size: clamp(30px, 5.1vw, 62px); line-height: 1.16; letter-spacing: 0; text-shadow: 4px 4px 0 #172f47, 7px 7px 0 rgba(3, 10, 18, .6); }
h1 span { display: inline-block; color: #4dc9e1; }
.masthead-note { margin: 14px 0 0; font-size: 10px; color: var(--gold); }
.masthead-note i { display: inline-block; width: 34px; height: 1px; background: #658196; vertical-align: middle; margin: 0 12px; }
.selection-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(265px, .8fr); gap: 16px; align-items: stretch; }
.roster-panel, .preview-panel { border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 45px rgba(0,0,0,.19); }
.roster-panel { padding: 19px 19px 16px; }
.section-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 19px; font-size: 11px; }
.section-heading > span:first-child { color: var(--gold); font-size: 9px; }
.section-heading h2 { margin: 0; font-size: 11px; font-weight: 400; white-space: nowrap; }
.heading-rule { height: 1px; background: linear-gradient(90deg, rgba(122, 165, 194, .5), transparent); flex: 1; }
.roster-count { color: #8199ad; font-size: 8px; white-space: nowrap; }
.character-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.character-card { --accent: #64d8e8; position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: space-between; padding: 9px 7px 10px; border: 1px solid rgba(166, 201, 229, .2); background: linear-gradient(150deg, rgba(21, 47, 69, .8), rgba(11, 28, 46, .88)); cursor: pointer; transition: border-color .17s ease, transform .17s ease, background .17s ease, box-shadow .17s ease; }
.character-card:hover { transform: translateY(-3px); border-color: rgba(147, 211, 231, .66); }
.character-card[aria-selected="true"] { border-color: var(--accent); background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 16%, #10253b), rgba(10, 25, 41, .95)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 30%, transparent); }
.character-card[aria-selected="true"]::after { content: 'SELECTED'; position: absolute; right: 6px; top: 6px; color: var(--accent); font: 5px 'Press Start 2P', monospace; }
.card-art { display: grid; place-items: center; width: 100%; height: 72px; position: relative; overflow: hidden; }
.card-art::before { content: ''; position: absolute; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); filter: blur(10px); }
.card-art canvas { width: 72px; height: 72px; image-rendering: pixelated; position: relative; z-index: 1; }
.card-name { font: 9px 'Press Start 2P', monospace; letter-spacing: 0; }
.card-origin { padding-top: 7px; font-size: 9px; color: #99b0c3; }
.name-row { display: grid; grid-template-columns: auto minmax(100px, 1fr) auto; align-items: center; gap: 12px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 15px; }
.name-row label { font-size: 8px; color: #bfd2df; white-space: nowrap; }
.name-row input { width: 100%; border: 1px solid rgba(153, 189, 212, .26); background: rgba(5, 16, 28, .75); color: var(--ink); outline: 0; padding: 10px 12px; font-weight: 600; }
.name-row input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(83,216,232,.12); }
.name-hint { color: #668197; font-size: 6px; white-space: nowrap; }
.preview-panel { padding: 17px 18px 14px; display: flex; flex-direction: column; align-items: stretch; }
.preview-topline { display: flex; align-items: center; justify-content: space-between; color: #9eb8cc; font-size: 8px; }
.signal { color: #a6cfb6; display: flex; align-items: center; gap: 7px; font-size: 7px; }
.signal i, .status-dot { background: #7de9aa; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 10px #7de9aa; }
.preview-stage { height: 176px; margin: 12px 0 8px; border: 1px solid rgba(142, 186, 214, .17); position: relative; overflow: hidden; display: grid; place-items: center; background: linear-gradient(180deg, rgba(98, 172, 211, .15), rgba(13, 38, 56, .48)), repeating-linear-gradient(0deg, transparent 0 21px, rgba(160,205,220,.035) 21px 22px); }
.preview-stage::after { content: ''; height: 1px; position: absolute; bottom: 25px; left: 0; right: 0; background: rgba(157, 198, 215, .23); }
.preview-stage canvas { width: 104px; height: 104px; image-rendering: pixelated; z-index: 2; animation: float 2.5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-5px); } }
.preview-shadow { position: absolute; width: 56px; height: 8px; bottom: 20px; border-radius: 50%; background: rgba(2, 8, 14, .4); filter: blur(3px); }
.preview-cloud { position: absolute; height: 11px; background: rgba(163, 218, 233, .14); box-shadow: 10px -9px 0 -2px rgba(163,218,233,.14), 22px -3px 0 2px rgba(163,218,233,.14); }
.cloud-one { width: 34px; left: 21px; top: 40px; }.cloud-two { width: 26px; right: 30px; bottom: 55px; }
.preview-spark { position: absolute; color: var(--gold); font-size: 16px; }.spark-one { left: 25%; top: 24%; }.spark-two { right: 24%; top: 31%; font-size: 13px; color: #a0deec; }
.preview-name { text-align: center; font-size: 13px; color: var(--gold); }
.preview-description { text-align: center; margin: 9px 0 15px; min-height: 18px; color: #98b2c7; font-size: 7px; line-height: 1.8; }
.preview-description span { color: var(--cyan); padding: 0 3px; }
.play-button { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; min-height: 52px; border: 0; background: #d9ef7f; color: #172b35; cursor: pointer; box-shadow: 0 4px 0 #82944b; font: 12px 'Press Start 2P', monospace; transition: transform .14s, box-shadow .14s, background .14s; }
.play-button:hover { background: #edff9b; transform: translateY(-2px); box-shadow: 0 6px 0 #82944b, 0 0 24px rgba(217,239,127,.19); }
.play-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #82944b; }
.play-icon { font: 13px Arial; }.play-arrow { font: 18px 'Space Grotesk'; }
.control-strip { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 17px; font-size: 6px; color: #8ea8b9; }.keyboard-select-hint { display: flex; justify-content: center; align-items: center; gap: 6px; }.mobile-select-hint { display: none; }
kbd { font: inherit; padding: 5px 6px; color: #c9deec; background: #142b40; border: 1px solid rgba(161,196,216,.19); }
.select-footer, .game-footer { display: flex; justify-content: space-between; color: #71899d; font-size: 7px; margin-top: 15px; }
.game-screen { max-width: 430px; }
.game-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; min-height: 61px; padding: 0 5px 12px; }
.small-button { justify-self: start; border: 1px solid var(--line); background: rgba(9, 27, 45, .83); padding: 10px 12px; color: #b4c9d8; cursor: pointer; font-size: 7px; }.small-button:hover { border-color: var(--cyan); color: white; }
.restart-button { justify-self: end; }.game-brand { text-align: center; font-size: 10px; line-height: 1.7; }.game-brand b { color: var(--cyan); }.game-brand small { display: block; font-size: 6px; color: #8ea8bb; }
.game-status { display: flex; align-items: center; gap: 8px; justify-self: start; color: #b1c3d0; font-size: 7px; }.status-divider { height: 13px; width: 1px; background: var(--line); }
.canvas-wrap { position: relative; width: 100%; aspect-ratio: 9 / 16; border: 1px solid rgba(163, 200, 221, .25); background: #78b8ed; box-shadow: 0 20px 55px rgba(0,0,0,.3); overflow: hidden; }
#gameCanvas { display: block; width: 100%; height: 100%; min-height: 0; image-rendering: pixelated; image-rendering: crisp-edges; outline: 0; }
.world-chip, .score-chip, .lives-chip { pointer-events: none; }
.world-chip { position: absolute; top: 13px; left: 14px; padding: 10px; background: rgba(7, 25, 42, .77); border: 1px solid rgba(220,240,248,.23); color: #e8f8ff; font-size: 7px; }
.score-chip { position: absolute; top: 13px; right: 14px; padding: 10px; background: rgba(7, 25, 42, .77); border: 1px solid rgba(220,240,248,.23); color: #fff5bd; font-size: 7px; }
.lives-chip { position: absolute; top: 50px; right: 14px; padding: 8px 10px; background: rgba(45, 10, 17, .82); border: 1px solid rgba(255, 194, 142, .36); color: #ffd1af; font: 7px 'Press Start 2P', monospace; letter-spacing: 1px; }
.game-help { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 12px; color: #cfdfeb; background: rgba(7, 25, 42, .78); padding: 9px 11px; font-size: 6px; }.game-help b { color: var(--gold); font-weight: 400; margin-left: 3px; }
.toast { position: absolute; top: 17%; left: 50%; transform: translate(-50%, -8px); padding: 11px 15px; color: #142537; background: #f1f6df; border: 2px solid rgba(31,51,56,.28); font: 8px 'Press Start 2P', monospace; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; box-shadow: 3px 4px 0 rgba(12,31,43,.24); }.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.leaderboard { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(4, 13, 25, .78); backdrop-filter: blur(2px); }.leaderboard-card { width: min(100%, 310px); padding: 20px 18px; border: 2px solid #ddc270; background: #12263a; color: #f7f4dc; box-shadow: 5px 6px 0 rgba(3, 9, 17, .7); text-align: center; font-family: 'Press Start 2P', monospace; }.leaderboard-kicker { margin: 0 0 12px; color: #ff9b61; font-size: 6px; }.leaderboard h2 { margin: 0; color: #f6de7a; font-size: 14px; }.last-score { margin: 15px 0 11px; color: #aee8f4; font-size: 7px; }.score-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: score; text-align: left; }.score-list li { counter-increment: score; display: flex; justify-content: space-between; gap: 10px; padding: 7px 8px; background: rgba(4, 13, 25, .65); border-left: 3px solid #5eaec7; color: #eaf8ff; font-size: 7px; }.score-list li::before { content: counter(score) '.'; color: #f6de7a; }.score-list .score-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.score-list .score-value { color: #f6de7a; }.replay-button { width: 100%; margin-top: 16px; border: 0; padding: 13px 9px; background: #d9ef7f; color: #172b35; box-shadow: 0 3px 0 #82944b; font: 8px 'Press Start 2P', monospace; cursor: pointer; }.replay-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #82944b; }
.game-footer { padding: 0 4px; }
[hidden] { display: none !important; }
@media (max-width: 850px) { .selection-layout { grid-template-columns: minmax(0, 1.3fr) minmax(235px, .8fr); }.character-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }.card-art { height: 85px; }.card-art canvas { width: 82px; height: 82px; }.name-row { grid-template-columns: 1fr 2fr; }.name-row label { grid-column: 1/-1; }.name-hint { display: none; }.game-status { justify-self: end; grid-column: 1; grid-row: 1; }.small-button:first-child { grid-column: 1; grid-row: 1; opacity: .0; pointer-events: none; }.game-brand { grid-column: 2; grid-row: 1; }.restart-button { grid-column: 3; grid-row: 1; }.game-status { display:none; } }
@media (max-width: 620px) { .app-shell { padding: 16px 12px 12px; }.masthead { padding: 8px 0 17px; }.edition-mark { font-size: 7px; } h1 { font-size: clamp(26px, 8vw, 43px); }.masthead-note { font-size: 7px; }.selection-layout { grid-template-columns: 1fr; gap: 11px; }.roster-panel { padding: 14px 12px; }.section-heading { gap: 7px; font-size: 8px; margin-bottom: 12px; }.section-heading h2 { font-size: 8px; }.roster-count { font-size: 6px; }.character-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }.character-card { padding: 4px 2px 8px; }.card-art { height: 69px; }.card-art canvas { width: 70px; height: 70px; }.card-name { font-size: 7px; }.card-origin { font-size: 8px; }.name-row { margin-top: 10px; padding-top: 10px; }.name-row label { font-size: 7px; }.name-row input { padding: 9px; }.preview-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4px 13px; padding: 12px; }.preview-topline { grid-column: 1/-1; }.preview-stage { grid-column: 1; grid-row: 2/5; height: 135px; margin: 3px 0; }.preview-stage canvas { width: 116px; height: 116px; }.preview-name, .preview-description, .play-button, .control-strip { grid-column: 2; }.preview-name { text-align: left; font-size: 10px; align-self: end; }.preview-description { text-align: left; margin: 3px 0; font-size: 6px; }.play-button { min-height: 43px; font-size: 9px; }.control-strip { margin-top: 5px; gap: 4px; font-size: 5px; }.select-footer { font-size: 6px; }.select-footer span:last-child { display: none; }.game-topbar { min-height: 49px; }.game-brand { font-size: 8px; }.small-button { padding: 8px; }.small-button span { display: none; } #gameCanvas { height: 72vh; min-height: 420px; }.game-help { left: 8px; right: 8px; bottom: 8px; justify-content: space-around; gap: 3px; font-size: 5px; padding: 8px 4px; }.world-chip { top: 8px; left: 8px; font-size: 6px; }.score-chip { top: 8px; right: 8px; font-size: 5px; padding: 8px; }.lives-chip { top: 37px; right: 8px; font-size: 5px; padding: 6px; }.game-footer { font-size: 5px; }.game-footer span:last-child { display:none; } }
@media (max-width: 620px) { .app-shell { padding: 16px 12px 12px; }.masthead { padding: 8px 0 17px; }.edition-mark { font-size: 7px; } h1 { font-size: clamp(26px, 8vw, 43px); }.masthead-note { font-size: 7px; }.selection-layout { grid-template-columns: 1fr; gap: 11px; }.roster-panel { padding: 14px 12px; }.section-heading { gap: 7px; font-size: 8px; margin-bottom: 12px; }.section-heading h2 { font-size: 8px; }.roster-count { font-size: 6px; }.character-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }.character-card { padding: 4px 2px 8px; }.card-name { font-size: 7px; }.card-origin { font-size: 8px; }.name-row { margin-top: 10px; padding-top: 10px; }.name-row label { font-size: 7px; }.name-row input { padding: 9px; }.preview-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4px 13px; padding: 12px; }.preview-topline { grid-column: 1/-1; }.preview-stage { grid-column: 1; grid-row: 2/5; height: 135px; margin: 3px 0; }.preview-stage canvas { width: 116px; height: 116px; }.preview-name, .preview-description, .play-button, .control-strip { grid-column: 2; }.preview-name { text-align: left; font-size: 10px; align-self: end; }.preview-description { text-align: left; margin: 3px 0; font-size: 6px; }.play-button { min-height: 43px; font-size: 9px; }.control-strip { margin-top: 5px; gap: 4px; font-size: 5px; }.select-footer { font-size: 6px; }.select-footer span:last-child { display: none; }.game-topbar { min-height: 49px; }.game-brand { font-size: 8px; }.small-button { padding: 8px; }.small-button span { display: none; }.canvas-wrap { aspect-ratio: 9 / 16; }.game-help { left: 8px; right: 8px; bottom: 8px; justify-content: space-around; gap: 3px; font-size: 5px; padding: 8px 4px; }.world-chip { top: 8px; left: 8px; font-size: 6px; }.score-chip { top: 8px; right: 8px; font-size: 5px; padding: 8px; }.lives-chip { top: 37px; right: 8px; font-size: 5px; padding: 6px; }.game-footer { font-size: 5px; }.game-footer span:last-child { display:none; } }
@media (max-width: 620px) { #gameCanvas { height: 100%; min-height: 0; } }
@media (hover: none) and (pointer: coarse) { .game-help { display: none; } }

/* Portrait iPhone layout: leave room for browser chrome and safe areas while
   preserving the game's tall 9:16 playfield. */
.mobile-gesture-hint { display: none; }
@media (max-width: 620px) and (hover: none) and (pointer: coarse) {
  html { min-height: 100%; background: #09182a; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
  body { min-height: 100svh; overscroll-behavior: none; }
  .app-shell { min-height: 100svh; padding-top: max(12px, env(safe-area-inset-top)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); }
  .game-screen { max-width: min(100%, 430px); }
  .canvas-wrap { max-height: none; margin-inline: auto; }
  #gameCanvas { touch-action: none; -webkit-tap-highlight-color: transparent; }
  .mobile-gesture-hint { display: block; position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 7px 8px; color: #e6f8ff; background: rgba(7, 25, 42, .76); border: 1px solid rgba(220, 240, 248, .23); font: 5px 'Press Start 2P', monospace; white-space: nowrap; pointer-events: none; }
  .keyboard-select-hint { display: none; }
  .mobile-select-hint { display: inline; color: #aee8f4; }
}