:root {
  color-scheme: dark;
  --night: #0b1220;
  --panel: #111c2d;
  --panel-raised: #18263a;
  --ink: #f3f6fb;
  --muted: #a0aec0;
  --red: #ff5364;
  --blue: #4b8dff;
  --green: #4bd787;
  --line: #29364a;
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 78% 17%, rgb(75 141 255 / 9%), transparent 33rem),
    radial-gradient(ellipse at 11% 66%, rgb(75 215 135 / 5%), transparent 32rem),
    var(--night);
  color: var(--ink);
}

.page-shell {
  display: flex;
  flex-direction: column;
  width: min(100% - 96px, 1120px);
  min-height: 100vh;
  margin: 0 auto;
}

.topbar, .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar {
  height: 82px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-decoration: none;
}

.wordmark span { color: var(--red); }

.topbar-tag, .domain, .eyebrow, .footer, .art-label, .art-score span, .art-score b {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
}

.topbar-tag { display: flex; align-items: center; gap: 9px; color: #d2dbe8; }
.topbar-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgb(75 215 135 / 70%); }
.topbar-tag b { color: var(--red); font-weight: 400; }
.domain { color: var(--muted); }

.hero {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 610px;
  padding: 95px 0 110px;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0 -10vw;
  background-image: radial-gradient(rgb(142 163 194 / 19%) .7px, transparent .7px);
  background-size: 22px 22px;
  content: "";
  mask-image: linear-gradient(90deg, black, transparent 85%);
  opacity: .26;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a8b7ca;
}

.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 11px rgb(255 83 100 / 55%); }
.green-dot { background: var(--green); box-shadow: 0 0 11px rgb(75 215 135 / 45%); }
.eyebrow-divider { color: #52637a; }

h1 {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 30px 0 22px;
  font-size: clamp(58px, 9.4vw, 108px);
  font-weight: 700;
  letter-spacing: -.085em;
  line-height: .98;
}

h1 span {
  color: transparent;
  background: linear-gradient(95deg, var(--red) 3%, #ff7181 35%, var(--blue) 72%, var(--green) 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.intro {
  position: relative;
  z-index: 1;
  max-width: 425px;
  margin: 0;
  color: #aab7c8;
  font-size: 16px;
  line-height: 1.75;
}

.contact-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin-top: 32px;
  padding: 12px 16px;
  border: 1px solid rgb(75 141 255 / 50%);
  border-radius: 4px;
  background: rgb(75 141 255 / 10%);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.contact-link:hover { transform: translateY(-2px); background: rgb(75 141 255 / 19%); }
.contact-link span { color: var(--green); }

.hero-art {
  position: absolute;
  top: 50%;
  right: 1%;
  width: min(42%, 440px);
  aspect-ratio: 1 / .88;
  transform: translateY(-48%);
}

.hero-art::before, .hero-art::after { position: absolute; border-radius: 50%; content: ""; }
.hero-art::before {
  inset: 9% 6% 3% 9%;
  border: 1px solid rgb(75 141 255 / 34%);
  transform: rotate(-18deg);
}
.hero-art::after {
  inset: 18% 14% 11% 16%;
  border: 1px dashed rgb(75 215 135 / 28%);
  transform: rotate(24deg);
}

.art-label { position: absolute; top: 9%; left: 13%; color: #c0cde0; }
.art-label i { padding-left: 10px; color: var(--green); font-style: normal; font-size: 8px; }

.hero-token {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(220 231 247 / 15%);
  box-shadow: 0 18px 46px rgb(0 0 0 / 34%);
  user-select: none;
}

.token-controller {
  top: 24%;
  left: 28%;
  width: 48%;
  aspect-ratio: 1.2;
  border-radius: 28px;
  background: linear-gradient(145deg, #1e3554, #152338);
  font-size: clamp(58px, 8vw, 90px);
  transform: rotate(-8deg);
}

.token-ball {
  top: 16%;
  right: 6%;
  width: 23%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(150deg, #382032, #201c2d);
  font-size: clamp(35px, 5vw, 55px);
  transform: rotate(13deg);
}

.token-football {
  bottom: 24%;
  left: 7%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, #193b36, #152a30);
  font-size: clamp(32px, 4.7vw, 52px);
  transform: rotate(-12deg);
}

.token-fishing {
  top: 52%;
  right: 8%;
  width: 21%;
  aspect-ratio: 1;
  border-radius: 22px;
  background: linear-gradient(145deg, #3b3820, #29251b);
  font-size: clamp(30px, 4.2vw, 46px);
  transform: rotate(9deg);
}

.art-score {
  position: absolute;
  z-index: 2;
  right: 9%;
  bottom: 10%;
  display: grid;
  gap: 7px;
  padding: 15px 18px;
  border: 1px solid #34445a;
  border-radius: 3px;
  background: #0d1726;
  box-shadow: 0 12px 28px rgb(0 0 0 / 30%);
  transform: rotate(4deg);
}

.art-score span { color: var(--red); font-size: 9px; }
.art-score b { color: #d5dfeb; font-size: 8px; font-weight: 400; }
.art-spark { position: absolute; z-index: 1; font-size: 21px; }
.spark-one { top: 25%; left: 14%; color: var(--green); }
.spark-two { right: 16%; bottom: 27%; color: var(--blue); font-size: 17px; }

.hobby-shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 28px; padding: 20px 18px; border: 1px solid #25364c; border-radius: 5px; background: linear-gradient(100deg, rgb(255 83 100 / 5%), rgb(75 141 255 / 7%), rgb(75 215 135 / 5%)); }
.hobby-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #30415a; border-radius: 3px; background: #111d2e; color: #c5d0df; font: 9px "DM Mono", monospace; letter-spacing: .06em; }
.hobby-chip b { font: 17px/1 "DM Sans", sans-serif; }
.bike-section { margin: 0 0 28px; padding: 44px clamp(20px, 5vw, 58px) 28px; overflow: hidden; border: 1px solid #344454; border-radius: 6px; background: radial-gradient(ellipse at 88% 0%, rgb(75 215 135 / 12%), transparent 38%), linear-gradient(145deg, #1c2b37, #111c2b 70%); box-shadow: 0 24px 60px rgb(0 0 0 / 17%); }
.bike-heading { margin-bottom: 24px; }
.bike-section .bike-heading h2 span { color: var(--red); }
.bike-stats { display: flex; gap: 10px; }
.bike-stats div { display: grid; gap: 6px; min-width: 90px; padding: 10px 12px; border: 1px solid #3c4b58; border-radius: 3px; background: #101a28; }
.bike-stats span { color: #91a4b5; font: 8px "DM Mono", monospace; letter-spacing: .08em; }
.bike-stats strong { color: var(--green); font: 600 15px "DM Mono", monospace; }
.bike-stats div:first-child strong { color: #ffc85a; }
.bike-lives { display: flex; align-items: center; gap: 5px; margin: -8px 0 14px; }
.life-heart { color: #ff5364; font: 700 22px/1 "DM Sans", sans-serif; text-shadow: 0 0 11px rgb(255 83 100 / 35%); }
.life-heart.life-lost { color: #536172; text-shadow: none; }
.lives-caption { margin-left: 5px; color: #a9b7c6; font: 9px "DM Mono", monospace; letter-spacing: .08em; }
.bike-screen { position: relative; overflow: hidden; border: 1px solid #526271; border-radius: 4px; background: #152843; }
#bike-canvas { display: block; width: 100%; height: auto; image-rendering: auto; }
.bike-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; background: rgb(8 16 27 / 72%); text-align: center; }
.bike-overlay[hidden] { display: none; }
.overlay-icon { font-size: 32px; }
.bike-overlay strong { font-size: clamp(21px, 3vw, 30px); }
.bike-overlay > span:nth-of-type(2) { max-width: 430px; color: #c0cbd8; font-size: 12px; line-height: 1.5; }
.bike-overlay button { margin-top: 6px; padding: 11px 16px; border: 0; border-radius: 3px; background: var(--green); color: #102319; font: 700 12px "DM Sans", sans-serif; cursor: pointer; }
.bike-overlay button span { padding-left: 8px; }
.bike-overlay button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.bike-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; padding: 13px 2px 0; color: #aebdca; font: 9px "DM Mono", monospace; }
.bike-toolbar kbd { padding: 4px 5px; border: 1px solid #536477; border-bottom-width: 2px; border-radius: 2px; color: #eef3f8; font: inherit; }
.bike-decor { margin-left: auto; font-size: 16px; }
.bike-touch-controls { display: none; gap: 10px; margin-top: 12px; }
.bike-touch-controls button { flex: 1; min-height: 44px; border: 1px solid #526477; border-radius: 3px; background: #16263a; color: var(--ink); font: 600 12px "DM Sans", sans-serif; touch-action: none; }
.bike-touch-controls button:active { border-color: var(--green); background: #203b39; }
.bike-level-panel { margin-top: 20px; padding: 14px; border: 1px solid #354858; border-radius: 4px; background: rgb(10 21 31 / 54%); }
.bike-level-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 11px; }
.bike-level-heading strong { color: #e6c882; font: 10px "DM Mono", monospace; letter-spacing: .12em; }
.bike-level-heading span { color: #9eafba; font: 10px "DM Sans", sans-serif; }
.bike-level-chart { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.bike-level-button { position: relative; display: grid; place-items: center; min-height: 35px; padding: 5px; border: 1px solid #405362; border-radius: 3px; background: #172633; color: #dce6e7; font: 10px "DM Mono", monospace; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.bike-level-button:hover:not(:disabled) { transform: translateY(-1px); border-color: #e1c276; background: #27383d; }
.bike-level-button[aria-pressed="true"] { border-color: #73d79a; background: #203a35; color: #9df0b2; box-shadow: inset 0 0 0 1px rgb(115 215 154 / 20%); }
.bike-level-button.is-complete::after { position: absolute; top: 2px; right: 4px; color: #80df9f; content: "✓"; font: 9px "DM Sans", sans-serif; }
.bike-level-button:disabled { cursor: default; }
.bike-level-button.is-locked { border-color: #293640; background: #121c24; color: #64717c; }

.warzone-section { margin: 28px 0; padding: 44px clamp(20px, 5vw, 58px) 32px; border: 1px solid #3a4b5d; border-radius: 6px; background: radial-gradient(ellipse at 92% 0%, rgb(226 91 71 / 13%), transparent 34%), linear-gradient(145deg, #202a38, #111925 72%); box-shadow: 0 24px 60px rgb(0 0 0 / 18%); }
.warzone-section .game-heading { margin-bottom: 22px; }
.warzone-section .game-heading h2 span { color: #f06b59; }
.warzone-profile-stats { display: flex; gap: 9px; }
.warzone-profile-stats div { display: grid; gap: 5px; min-width: 74px; padding: 9px 11px; border: 1px solid #3d4b58; border-radius: 3px; background: #111925; }
.warzone-profile-stats span, .warzone-match-bar div span { color: #94a5b4; font: 8px "DM Mono", monospace; letter-spacing: .1em; }
.warzone-profile-stats strong { color: #f2cc78; font: 600 15px "DM Mono", monospace; }
.warzone-lobby { display: grid; grid-template-columns: minmax(160px, 1fr) auto auto; align-items: end; gap: 10px; padding: 15px; border: 1px solid #354353; border-radius: 4px; background: rgb(7 15 25 / 55%); }
.warzone-callsign { display: grid; gap: 6px; color: #aab8c4; font: 9px "DM Mono", monospace; letter-spacing: .1em; }
.warzone-callsign input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #526174; border-radius: 3px; outline: none; background: #111b28; color: #eff4f6; font: 13px "DM Sans", sans-serif; letter-spacing: normal; }
.warzone-callsign input:focus { border-color: #e3bd68; }
.warzone-queue-button, .warzone-leave-button { min-height: 42px; padding: 0 15px; border: 0; border-radius: 3px; background: #e3bd68; color: #201b12; font: 700 11px "DM Sans", sans-serif; cursor: pointer; }
.warzone-queue-button span { padding-left: 7px; }
.warzone-leave-button { border: 1px solid #586575; background: #202b37; color: #e4ebef; }
.warzone-queue-button:disabled, .warzone-leave-button:disabled { opacity: .55; cursor: wait; }
.warzone-queue-status { grid-column: 1 / -1; margin: 0; color: #aab9c5; font-size: 11px; line-height: 1.5; }
.warzone-match { margin-top: 16px; padding: 14px; border: 1px solid #3f5261; border-radius: 4px; background: #0c1520; }
.warzone-match[hidden] { display: none; }
.warzone-match-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto 12px; text-align: center; }
.warzone-match-bar div { display: grid; gap: 3px; }
.warzone-match-bar strong { color: #e9f0f1; font: 600 13px "DM Sans", sans-serif; }
.warzone-match-bar small { color: #78dca0; font: 10px "DM Mono", monospace; }
.warzone-match-bar > b { color: #e96859; font: 700 12px "DM Mono", monospace; }
.warzone-arena { display: block; width: min(100%, 720px); height: auto; margin: 0 auto; border: 1px solid #496072; border-radius: 3px; background: #102332; image-rendering: auto; }
.warzone-turn-status { max-width: 720px; min-height: 22px; margin: 10px auto 12px; color: #d9e3e7; font-size: 12px; text-align: center; }
.warzone-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; }
.warzone-move-pad { display: grid; grid-template-columns: repeat(2, 42px); gap: 5px; }
.warzone-move-pad button, .warzone-reload-button { min-height: 38px; border: 1px solid #516477; border-radius: 3px; background: #182533; color: #eaf0f2; font: 600 15px "DM Sans", sans-serif; touch-action: manipulation; cursor: pointer; }
.warzone-move-pad button:hover:not(:disabled), .warzone-reload-button:hover:not(:disabled) { border-color: #e3bd68; background: #253442; }
.warzone-fire-button { display: grid; gap: 3px; min-width: 112px; min-height: 42px; border: 1px solid #f07b62; border-radius: 3px; background: linear-gradient(150deg, #e66c57, #9d3a37); color: #fff2e9; font: 700 12px "DM Mono", monospace; cursor: pointer; }
.warzone-fire-button span { color: #ffd5a0; font-size: 9px; }
.warzone-reload-button { padding: 0 13px; font-size: 11px; }
.warzone-controls button:disabled { opacity: .42; cursor: default; }
.warzone-locker { margin-top: 20px; }
.warzone-locker-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 20px; margin-bottom: 10px; }
.warzone-kicker { color: #e4bf71; font: 8px "DM Mono", monospace; letter-spacing: .14em; }
.warzone-locker-heading h3 { margin: 3px 0 0; color: #e7edf0; font-size: 18px; }
.warzone-locker-heading p { margin: 0; color: #94a5b4; font-size: 10px; }
.warzone-guns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.warzone-gun-card { display: grid; align-content: start; gap: 7px; min-height: 130px; padding: 12px; border: 1px solid #384958; border-radius: 3px; background: #121e2a; color: #dbe5e9; text-align: left; cursor: pointer; }
.warzone-gun-card:hover:not(:disabled) { border-color: #e0bc6b; background: #1a2934; }
.warzone-gun-card[aria-pressed="true"] { border-color: #75d899; box-shadow: inset 0 0 0 1px rgb(117 216 153 / 22%); }
.warzone-gun-card:disabled { opacity: .68; cursor: default; }
.warzone-gun-card.is-locked { background: #101820; color: #93a0a9; }
.warzone-gun-icon { color: #e7bd67; font-size: 22px; }
.warzone-gun-card strong { font: 600 12px "DM Sans", sans-serif; }
.warzone-gun-card small { color: #98a9b5; font: 9px/1.45 "DM Sans", sans-serif; }
.warzone-gun-card em { color: #e9c878; font: 9px "DM Mono", monospace; font-style: normal; }

.alien-section { margin: 28px 0; padding: 44px clamp(20px, 5vw, 58px) 30px; border: 1px solid #3d3560; border-radius: 6px; background: radial-gradient(ellipse at 50% 0%, rgb(132 95 255 / 15%), transparent 42%), linear-gradient(145deg, #211d39, #121b2d 70%); box-shadow: 0 22px 55px rgb(0 0 0 / 17%); }
.alien-heading { margin-bottom: 22px; }
.alien-section .game-heading h2 span { color: #a994ff; }
.alien-counter { display: grid; justify-items: end; gap: 4px; min-width: 130px; padding: 10px 14px; border: 1px solid #514574; border-radius: 4px; background: #11182a; }
.alien-counter span, .alien-counter small { color: #a9a1c6; font: 9px "DM Mono", monospace; letter-spacing: .08em; }
.alien-counter strong { color: #d9cbff; font: 700 25px "DM Mono", monospace; }
.alien-playfield { position: relative; display: grid; place-items: center; min-height: 390px; overflow: hidden; border: 1px solid #3b3b60; border-radius: 4px; background: radial-gradient(ellipse at 50% 66%, rgb(103 79 190 / 26%), transparent 38%), #0c1425; }
.alien-playfield::before, .alien-playfield::after { position: absolute; inset: -35% -10%; pointer-events: none; content: ""; background-image: radial-gradient(2px 2px at 16% 28%, #e6e0ff 70%, transparent), radial-gradient(1px 1px at 48% 58%, #9ea7ff 70%, transparent), radial-gradient(2px 2px at 72% 33%, #c6baff 70%, transparent), radial-gradient(1px 1px at 87% 70%, #fff 70%, transparent), radial-gradient(1px 1px at 33% 83%, #fff 70%, transparent); background-size: 360px 230px; animation: alien-star-drift 24s linear infinite; }
.alien-playfield::after { opacity: .45; background-position: 150px 110px; animation-duration: 38s; animation-direction: reverse; }
.alien-stars { position: absolute; inset: 18px 22px auto; color: #c3b6ff; font: 17px "DM Mono", monospace; text-align: center; opacity: .72; }
.alien-target { position: relative; display: grid; justify-items: center; gap: 7px; padding: 8px; border: 0; background: transparent; color: white; font: 132px/1 "DM Sans", sans-serif; cursor: pointer; filter: drop-shadow(0 0 24px rgb(157 122 255 / 50%)); transition: transform .12s ease; }
.alien-creature { width: 160px; height: 170px; overflow: visible; animation: alien-hover 3.2s ease-in-out infinite; }
.alien-target:hover { transform: scale(1.08) rotate(-3deg); }
.alien-target:active { transform: scale(.92); }
.alien-target:focus-visible { outline: 2px solid #c5b5ff; outline-offset: 5px; border-radius: 12px; }
.alien-target span { color: #d5c9ff; font: 11px "DM Mono", monospace; }
.alien-target span b { font-weight: 500; }
.alien-playfield p { position: absolute; bottom: 8px; margin: 0; color: #a5abc2; font-size: 11px; }
.alien-shop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.alien-extra-upgrades { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.alien-upgrade { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 12px; border: 1px solid #3b3d5c; border-radius: 4px; background: #151b2d; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.alien-upgrade:hover:not(:disabled) { border-color: #a994ff; background: #20203a; }
.alien-upgrade:disabled { opacity: .52; cursor: not-allowed; }
.alien-upgrade:focus-visible, .alien-reset:focus-visible { outline: 2px solid #b9a8ff; outline-offset: 3px; }
.upgrade-icon { font-size: 26px; }
.upgrade-info { display: grid; gap: 4px; flex: 1; }
.upgrade-info strong { font-size: 12px; }
.upgrade-info small, .upgrade-cost { color: #a5abc2; font: 9px "DM Mono", monospace; }
.upgrade-info small b { color: #d5c9ff; }
.upgrade-cost { text-align: right; white-space: nowrap; }
.upgrade-cost b { color: #e4d8ff; font-size: 11px; }
.alien-reset { display: block; margin: 14px auto 0; padding: 6px 0; border: 0; border-bottom: 1px solid #756c98; background: transparent; color: #a9a1c6; font: 10px "DM Sans", sans-serif; cursor: pointer; }

.rps-section {
  margin: 28px 0;
  padding: 48px clamp(20px, 5vw, 58px) 36px;
  border: 1px solid #283a54;
  border-radius: 6px;
  background: linear-gradient(150deg, rgb(17 29 47 / 94%), rgb(13 23 38 / 97%));
  box-shadow: 0 18px 50px rgb(0 0 0 / 14%);
}

.rps-section .game-heading { margin-bottom: 26px; }
.rps-section .game-heading h2 span { color: var(--red); }

.rps-mode-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 0 auto 10px; }
.rps-mode-button { min-height: 42px; padding: 10px 15px; border: 1px solid #344966; border-radius: 3px; background: #142239; color: #dce7f5; font: 600 12px "DM Sans", sans-serif; cursor: pointer; }
.rps-mode-button:hover, .rps-mode-button[aria-pressed="true"] { border-color: var(--blue); background: rgb(75 141 255 / 12%); color: #fff; }
.rps-mode-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.rps-queue-status { min-height: 18px; margin: 0 auto 18px; color: #91a4bb; text-align: center; font-size: 12px; }

.rps-score { display: flex; align-items: center; gap: 11px; }
.rps-score div { display: grid; justify-items: center; gap: 3px; min-width: 48px; }
.rps-score span { color: #96a7be; font: 9px "DM Mono", monospace; letter-spacing: .08em; }
.rps-score strong { color: var(--green); font-size: 25px; font-weight: 700; }
.rps-score div:last-child strong { color: var(--red); }
.rps-score i { color: #64758d; font: normal 14px "DM Mono", monospace; }

.rps-arena {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  align-items: center;
  max-width: 650px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #293a52;
  border-radius: 4px;
  background: #0c1625;
}

.rps-pick { display: grid; justify-items: center; gap: 7px; }
.rps-label { color: var(--blue); font: 9px "DM Mono", monospace; letter-spacing: .11em; }
.bot-pick .rps-label { color: var(--red); }
.rps-choice-display {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 2px 0;
  border: 1px solid #2b3f59;
  border-radius: 50%;
  background: linear-gradient(145deg, #182941, #111e30);
  font-size: 39px;
}
.rps-pick strong { color: #e2eaf5; font-size: 12px; font-weight: 600; }
.rps-versus { justify-self: center; color: #75859b; font: 11px "DM Mono", monospace; }

.rps-result { min-height: 21px; margin: 18px auto 12px; color: #afbdd0; text-align: center; font-size: 14px; font-weight: 600; }
.rps-result[data-outcome="win"] { color: var(--green); }
.rps-result[data-outcome="loss"] { color: var(--red); }
.rps-result[data-outcome="tie"] { color: var(--blue); }

.rps-controls { display: flex; justify-content: center; gap: 10px; }
.rps-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 132px;
  padding: 12px 16px;
  border: 1px solid #344966;
  border-radius: 3px;
  background: #142239;
  color: #eaf1fb;
  font: 600 12px "DM Sans", sans-serif;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.rps-button:nth-child(1):hover { border-color: var(--red); background: rgb(255 83 100 / 10%); }
.rps-button:nth-child(2):hover { border-color: var(--blue); background: rgb(75 141 255 / 10%); }
.rps-button:nth-child(3):hover { border-color: var(--green); background: rgb(75 215 135 / 10%); }
.rps-button:hover { transform: translateY(-2px); }
.rps-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.rps-button:focus-visible, .rps-reset:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.rps-button span { font-size: 20px; line-height: 1; }
.rps-reset { display: block; margin: 17px auto 0; padding: 7px 0; border: 0; border-bottom: 1px solid #667a95; background: transparent; color: #9cabc0; font: 500 11px "DM Sans", sans-serif; cursor: pointer; }
.rps-reset span { padding-left: 4px; color: var(--blue); }

.football-section {
  margin: 28px 0;
  padding: 48px clamp(20px, 5vw, 58px) 36px;
  border: 1px solid #354534;
  border-radius: 6px;
  background: linear-gradient(150deg, #182a27, #101c20);
}
.football-section .game-heading { margin-bottom: 22px; }
.football-section .game-heading h2 span { color: var(--green); }
.football-score { display: grid; grid-template-columns: auto auto auto auto auto; align-items: center; gap: 8px; color: #a9bdad; font: 9px "DM Mono", monospace; }
.football-score strong { color: #f2f6ed; font: 700 22px "DM Sans", sans-serif; }
.football-score strong:nth-of-type(2) { color: #ff8b77; }
.football-draft { display: grid; justify-items: center; gap: 12px; padding: 22px; border: 1px solid #354b3c; border-radius: 4px; background: #0e1a1a; text-align: center; }
.football-draft p, .football-message { margin: 0; color: #b7c6b9; font-size: 13px; }
.football-game { margin-top: 18px; }
.football-field { position: relative; display: flex; align-items: center; justify-content: space-between; height: 116px; padding: 0 14px; overflow: hidden; border: 2px solid #a7c47d; border-radius: 3px; background: repeating-linear-gradient(90deg, #28583e 0 9.8%, #36724b 9.8% 10%); color: #e3edc8; font: 9px "DM Mono", monospace; }
.football-field::before { position: absolute; inset: 0 10%; border-right: 2px solid rgb(238 245 213 / 75%); border-left: 2px solid rgb(238 245 213 / 75%); content: ""; }
.football-endzone { position: relative; z-index: 1; writing-mode: vertical-rl; }
.football-character { position: absolute; bottom: 13px; z-index: 2; width: 44px; height: 59px; overflow: visible; }
.football-player { left: 20%; transition: left 350ms ease; }
.football-defender { bottom: 14px; }
.defender-one { left: 53%; }
.defender-two { left: 68%; bottom: 25px; transform: scale(.86); }
.football-info { display: flex; justify-content: space-between; gap: 10px; margin-top: 13px; color: #9ab39d; font: 10px "DM Mono", monospace; }
.football-info strong { color: #e8f0df; }
.football-message { min-height: 20px; margin: 14px 0; text-align: center; }
.football-plays { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.football-button { min-height: 42px; padding: 10px 16px; border: 1px solid #45644c; border-radius: 3px; background: #203a2c; color: #e7f1e4; font: 600 12px "DM Sans", sans-serif; cursor: pointer; }
.football-button:hover { border-color: #9ed078; background: #2b4a34; }
.football-button:focus-visible, .football-reset:focus-visible { outline: 2px solid #9ed078; outline-offset: 3px; }
.football-reset { display: block; margin: 16px auto 0; padding: 7px 0; border: 0; border-bottom: 1px solid #607b5d; background: transparent; color: #a9bdad; font: 500 11px "DM Sans", sans-serif; cursor: pointer; }

.game-section {
  padding: 62px clamp(20px, 5vw, 58px) 58px;
  border: 1px solid #26374c;
  border-radius: 6px;
  background: linear-gradient(150deg, rgb(20 33 51 / 94%), rgb(14 24 39 / 97%));
  box-shadow: 0 24px 60px rgb(0 0 0 / 17%);
}

.game-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.game-heading h2 {
  margin: 19px 0 8px;
  font-size: clamp(34px, 5vw, 53px);
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: 1;
}

.game-heading h2 span { color: var(--green); }
.game-copy { margin: 0; color: var(--muted); font-size: 14px; }

.game-stats { display: flex; gap: 12px; padding-bottom: 3px; }
.game-stats div { display: grid; gap: 6px; min-width: 74px; padding: 10px 12px; border: 1px solid #2a3d55; border-radius: 3px; background: #0d1726; }
.game-stats div:first-child strong { color: var(--blue); }
.game-stats div:last-child strong { color: var(--green); }
.stat-label { color: #90a2b9; font: 9px "DM Mono", monospace; letter-spacing: .08em; }
.game-stats strong { font-size: 17px; font-weight: 600; }

.game-board {
  display: grid;
  grid-template-columns: repeat(var(--board-columns, 6), minmax(0, 1fr));
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
}

.difficulty-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; max-width: 860px; margin: -8px auto 22px; }
.difficulty-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border: 1px solid #2e435d; border-radius: 3px; background: #0d1726; color: #dce7f5; font: 600 12px "DM Sans", sans-serif; cursor: pointer; transition: border-color 140ms ease, background 140ms ease; }
.difficulty-button span { color: #91a4bb; font: 9px "DM Mono", monospace; }
.difficulty-button:hover { border-color: var(--green); }
.difficulty-button[aria-pressed="true"] { border-color: var(--green); background: #183128; color: #9df0b2; box-shadow: inset 0 0 0 1px rgb(75 215 135 / 14%); }
.difficulty-button[aria-pressed="true"] span { color: #a7d8b5; }
.difficulty-button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.memory-card {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.35;
  padding: 0;
  overflow: hidden;
  border: 1px solid #32445d;
  border-radius: 4px;
  background: linear-gradient(145deg, #1a2a40, #132034);
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.memory-card::before {
  position: absolute;
  inset: 6px;
  border: 1px solid rgb(159 184 218 / 10%);
  border-radius: 2px;
  content: "";
  pointer-events: none;
}

.memory-card:hover:not(.is-flipped):not(.matched) {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 7px 20px rgb(75 141 255 / 12%);
}

.card-back, .card-face { grid-area: 1 / 1; transition: opacity 140ms ease, transform 180ms ease; }
.card-back { color: #6483aa; font-size: 28px; font-weight: 300; }
.card-face { display: grid; place-items: center; opacity: 0; transform: scale(.7); }
.item-icon { display: block; width: clamp(44px, 6.5vw, 64px); height: clamp(44px, 6.5vw, 64px); object-fit: contain; image-rendering: pixelated; }
.memory-card.is-flipped, .memory-card.matched { background: #1d2e43; border-color: var(--green); }
.memory-card.is-flipped .card-back, .memory-card.matched .card-back { opacity: 0; transform: scale(.7); }
.memory-card.is-flipped .card-face, .memory-card.matched .card-face { opacity: 1; transform: scale(1); }
.memory-card.matched { background: linear-gradient(145deg, #193b34, #172f35); border-color: rgb(75 215 135 / 62%); }
.memory-card:focus-visible, .reset-button:focus-visible, .score-entry button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.game-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 650px;
  margin: 18px auto 0;
}

.game-message { margin: 0; color: #adbacb; font-size: 13px; }
.reset-button { padding: 9px 0; border: 0; border-bottom: 1px solid var(--red); background: transparent; color: var(--ink); font: 600 12px "DM Sans", sans-serif; cursor: pointer; }
.reset-button span { padding-left: 5px; color: var(--red); font-size: 15px; }

.score-form { max-width: 650px; margin: 24px auto 0; padding: 20px; border: 1px solid #354761; border-radius: 4px; background: #0d1726; }
.score-form[hidden] { display: none; }
.score-form label { display: block; margin-bottom: 12px; color: #e6edf7; font-size: 14px; font-weight: 600; }
.score-entry { display: flex; gap: 10px; }
.score-entry input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid #354761; border-radius: 3px; background: #121f32; color: var(--ink); font: 14px "DM Sans", sans-serif; }
.score-entry input::placeholder { color: #7889a0; }
.score-entry input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.score-entry button { padding: 0 14px; border: 0; border-radius: 3px; background: var(--green); color: #0b1b16; font: 700 12px "DM Sans", sans-serif; cursor: pointer; }
.score-entry button span { padding-left: 5px; color: #163c2a; }
.score-feedback { margin: 10px 0 0; color: var(--muted); font-size: 12px; }

.leaderboard { max-width: 650px; margin: 48px auto 0; padding-top: 22px; border-top: 1px solid var(--line); }
.leaderboard-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.leaderboard-heading h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.04em; }
.leaderboard-heading > span { color: var(--green); font: 9px "DM Mono", monospace; letter-spacing: .07em; }
.leaderboard-list { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: rank; }
.leaderboard-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; border-bottom: 1px solid #25344a; color: #bfcbda; font-size: 13px; counter-increment: rank; }
.leaderboard-list li:not(.leaderboard-empty)::before { width: 26px; color: var(--blue); content: counter(rank, decimal-leading-zero); font: 10px "DM Mono", monospace; }
.leaderboard-list li:not(.leaderboard-empty) span { flex: 1; }
.leaderboard-list strong { color: #f0f5fb; font-size: 12px; font-weight: 600; }
.leaderboard-list .leaderboard-empty { justify-content: flex-start; color: var(--muted); }
.leaderboard-note { margin: 12px 0 0; color: #8493a8; font-size: 11px; }

.confetti-layer { position: fixed; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; top: -16px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; background: var(--color); animation: confetti-fall var(--duration) var(--delay) ease-in forwards; }
.confetti-piece:nth-child(3n) { width: 6px; height: 6px; border-radius: 50%; }
.confetti-piece:nth-child(3n + 1) { transform: rotate(35deg); }

@keyframes confetti-fall {
  0% { opacity: 0; translate: 0 -10px; rotate: 0deg; }
  10% { opacity: 1; }
  100% { opacity: 0; translate: var(--drift) 105vh; rotate: var(--spin); }
}

@keyframes alien-hover { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes alien-star-drift { from { translate: 0 0; } to { translate: 24px 55px; } }

.footer { min-height: 76px; margin-top: 20px; color: #8291a5; }
.footer-note span { padding-left: 5px; color: var(--green); }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 40px, 1120px); }
  .topbar { height: 72px; }
  .hero { min-height: 630px; padding: 72px 0 310px; }
  .hero-art { top: auto; right: 0; bottom: 0; width: min(85%, 380px); transform: none; }
  .hero-art::before { inset: 7% 5% 1% 8%; }
  .hero-art::after { inset: 17% 13% 10% 15%; }
  .token-controller { font-size: 64px; }
  .token-ball { font-size: 42px; }
  .token-football { font-size: 40px; }
  .token-fishing { font-size: 34px; }
  .art-label { font-size: 8px; }
  .rps-section { padding: 36px 20px 28px; }
  .football-section { padding: 36px 20px 28px; }
  .football-section .game-heading { margin-bottom: 18px; }
  .football-field { height: 94px; }
  .alien-section { padding: 34px 16px 24px; }
  .alien-shop { grid-template-columns: 1fr; }
  .alien-extra-upgrades { grid-column: auto; grid-template-columns: 1fr; }
  .alien-heading { align-items: start; flex-direction: column; }
  .alien-counter { justify-items: start; }
  .alien-playfield { min-height: 310px; }
  .alien-target { font-size: 108px; }
  .alien-creature { width: 132px; height: 142px; }
  .rps-section .game-heading { margin-bottom: 20px; }
  .rps-score { gap: 6px; }
  .rps-choice-display { width: 68px; height: 68px; font-size: 32px; }
  .rps-arena { grid-template-columns: 1fr 34px 1fr; padding: 14px 8px; }
  .rps-controls { flex-wrap: wrap; }
  .rps-button { flex: 1; min-width: 92px; padding: 11px 8px; }
  .bike-section { padding: 34px 16px 22px; }
  .bike-section .game-heading { margin-bottom: 18px; }
  .bike-stats { gap: 7px; }
  .bike-stats div { min-width: 78px; padding: 8px; }
  .bike-decor { width: 100%; margin-left: 0; }
  .bike-touch-controls { display: flex; }
  .bike-level-chart { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .bike-level-panel { padding: 11px; }
  .warzone-section { padding: 34px 16px 22px; }
  .warzone-lobby { grid-template-columns: 1fr 1fr; }
  .warzone-callsign { grid-column: 1 / -1; }
  .warzone-guns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-section { padding: 42px 20px 38px; }
  .game-heading { align-items: start; flex-direction: column; }
  .game-stats { gap: 8px; }
  .difficulty-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .difficulty-button { align-items: flex-start; flex-direction: column; gap: 4px; }
  .game-board { --board-columns: 4 !important; gap: 8px; }
  .memory-card { aspect-ratio: 1.05; }
  .game-controls { align-items: start; flex-direction: column; }
  .leaderboard { margin-top: 38px; }
  .footer { min-height: 68px; font-size: 9px; }
}

@media (max-width: 430px) {
  .topbar-tag { gap: 6px; font-size: 8px; }
  .domain { font-size: 9px; }
  .hero { min-height: 610px; padding-bottom: 280px; }
  .eyebrow { font-size: 8px; }
  .intro { font-size: 15px; }
  .hero-art { width: min(100%, 340px); }
  .art-score { right: 5%; padding: 11px 13px; }
  .art-score span { font-size: 8px; }
  .art-score b { font-size: 7px; }
  .score-entry { flex-direction: column; }
  .score-entry button { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .confetti-piece { animation-duration: .01ms !important; animation-delay: 0ms !important; }
  .alien-creature, .alien-playfield::before, .alien-playfield::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}