:root {
  color-scheme: light;
  font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #342a49;
  --muted: #73667f;
  --cream: #fff5dc;
  --coral: #ee6475;
  --gold: #f7c75d;
  --mint: #79d5be;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #292347;
}

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body::before, body::after {
  position: fixed;
  z-index: 0;
  content: "";
  pointer-events: none;
}

body::before {
  inset: -20vmax;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(114, 217, 184, .19), transparent 31%),
    radial-gradient(ellipse at 84% 72%, rgba(240, 104, 125, .2), transparent 33%),
    radial-gradient(ellipse at 52% 50%, rgba(119, 91, 159, .3), transparent 61%);
}

body::after {
  inset: 0;
  opacity: .07;
  background-image: radial-gradient(rgba(255, 255, 255, .8) .55px, transparent .6px);
  background-size: 5px 5px;
}

button, a { font: inherit; }
button { touch-action: manipulation; }

.arcade-stage {
  position: relative;
  z-index: 1;
  width: min(100vw, 56.25dvh);
  height: min(100dvh, 177.7778vw);
  max-width: 100vw;
  max-height: 100dvh;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  isolation: isolate;
  background: #bfe8c7;
  box-shadow: 0 30px 100px rgba(12, 8, 34, .53), 0 0 0 2px rgba(255, 255, 255, .11);
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.top-controls {
  position: absolute;
  z-index: 5;
  top: max(14px, calc(var(--safe-top) + 6px));
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.icon-button {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, .74);
  border-radius: 13px;
  color: #45364f;
  background: rgba(255, 248, 229, .88);
  box-shadow: 0 4px 12px rgba(60, 45, 67, .16);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  transition: transform .12s ease, background .12s ease;
}

.icon-button:hover { transform: translateY(-1px); background: #fffdf3; }
.icon-button:active { transform: translateY(1px) scale(.96); }
.icon-button.is-hidden { visibility: hidden; pointer-events: none; }

.screen {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(48px + var(--safe-top)) 18px calc(28px + var(--safe-bottom));
  pointer-events: none;
}

.screen.is-visible {
  display: flex;
  animation: screen-in .24s ease-out both;
}

.screen-card {
  position: relative;
  width: 100%;
  max-width: 372px;
  padding: 25px 24px 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 27px;
  color: var(--ink);
  text-align: center;
  background: linear-gradient(150deg, rgba(255,252,239,.97), rgba(255,240,211,.95));
  box-shadow: 0 19px 45px rgba(56, 41, 67, .26), 0 4px 0 rgba(255,255,255,.38) inset;
  pointer-events: auto;
  backdrop-filter: blur(12px);
}

.screen-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  content: "";
  background: linear-gradient(90deg, #78d6bf 0 26%, #f9c95d 26% 50%, #ee7181 50% 76%, #a48be5 76%);
}

.home-card { padding-top: 30px; }

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #81738b;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 1.75px;
}

.eyebrow > span:first-child:not(:only-child), .eyebrow > span:first-child {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #f06b7e;
  box-shadow: 0 0 0 3px rgba(240,107,126,.13);
}

h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 0;
  color: #fff9e8;
  font-size: clamp(47px, 13.8vw, 69px);
  font-weight: 1000;
  letter-spacing: -4px;
  line-height: .96;
  text-shadow: 0 3px 0 #a34c6a, 0 6px 0 #63405f, 0 8px 17px rgba(54,38,73,.2);
  -webkit-text-stroke: 1.3px #584061;
}

h1 span { color: #ffe36c; }

.tagline {
  margin: 7px 0 13px;
  color: #dc6c78;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .3px;
}

.how-copy {
  max-width: 285px;
  margin: 0 auto 17px;
  color: #70647a;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
}

.mode-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 3px 0 8px;
  color: #a0825a;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 1.45px;
}

.mode-spark {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #f2bf4f;
  transform: rotate(45deg);
}

.primary-button, .secondary-button {
  position: relative;
  width: 100%;
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 15px;
  color: white;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .75px;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.primary-button {
  margin-top: 2px;
  background: linear-gradient(100deg, #ee6578, #e95477 58%, #d85887);
  box-shadow: 0 5px 0 #a54369, 0 10px 20px rgba(211,75,111,.2), 0 1px 0 rgba(255,255,255,.45) inset;
}

.primary-button > span { color: #ffe47b; font-size: 15px; }
.primary-button small, .secondary-button small { display: block; font-size: 7.5px; font-weight: 850; letter-spacing: .8px; opacity: .8; }
.primary-button small { position: absolute; right: 16px; bottom: 7px; font-size: 6.2px; opacity: .86; }

.secondary-button {
  min-height: 47px;
  flex-direction: column;
  gap: 1px;
  margin-top: 11px;
  border: 1.5px solid rgba(87,143,130,.23);
  color: #397c77;
  background: linear-gradient(110deg, #e3f2db, #d6efe1);
  box-shadow: 0 4px 0 #85bca5, 0 8px 17px rgba(68,137,115,.11), 0 1px 0 rgba(255,255,255,.7) inset;
}

.secondary-button small { font-size: 7px; letter-spacing: 1px; opacity: .72; }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); filter: saturate(1.08); }
.primary-button:active, .secondary-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #a54369; }

.text-button {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 10px;
  border: 0;
  color: #88748a;
  background: transparent;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 1.35px;
  cursor: pointer;
}

.text-button:hover { color: #dc6177; }
.skip-button { margin-top: 18px; }

.personal-records {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 10px 0 12px;
  padding: 10px 4px 8px;
  border-top: 1px solid rgba(100,82,109,.12);
  border-bottom: 1px solid rgba(100,82,109,.12);
}

.personal-records > div { display: grid; gap: 3px; min-width: 105px; }
.personal-records span { color: #958694; font-size: 7px; font-weight: 950; letter-spacing: 1.05px; }
.personal-records strong { color: #514261; font-size: 19px; font-weight: 1000; font-variant-numeric: tabular-nums; }
.personal-records i { width: 1px; height: 31px; background: rgba(100,82,109,.17); }

.controls-hint {
  margin: 0;
  color: #958795;
  font-size: 7.2px;
  font-weight: 800;
  letter-spacing: .13px;
}

.controls-hint span { color: #80677b; font-weight: 1000; }
.controls-hint i { padding: 0 2px; color: #d4b47b; font-style: normal; }

.tutorial-card, .compact-card { max-width: 330px; padding: 30px 25px 23px; }
.tutorial-card h2, .compact-card h2, .results-card h2 {
  margin: 11px 0 8px;
  color: #4b3c5c;
  font-size: clamp(22px, 6vw, 29px);
  font-weight: 1000;
  letter-spacing: -.8px;
  line-height: 1.05;
}

.tutorial-card > p:not(.eyebrow), .compact-card > p:not(.eyebrow) {
  margin: 0 auto;
  color: #786b80;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

.gesture-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 19px 0 6px;
  color: #ee697b;
  font-size: 24px;
  font-weight: 950;
}

.gesture-demo b {
  width: 88px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1.5px dashed #c68b91;
  border-radius: 22px;
  color: #f1c45c;
  font-size: 30px;
  line-height: 1;
}

.compact-card .primary-button { margin-top: 18px; }
.compact-card .text-button { margin-top: 18px; }

.results-card {
  max-width: 358px;
  padding: 28px 22px 21px;
}

.results-card h2 { margin: 9px 0 11px; font-size: clamp(23px, 6.4vw, 31px); }
.result-score { display: grid; gap: 2px; margin: 4px 0 11px; }
.result-score span { color: #8e7e8d; font-size: 8px; font-weight: 950; letter-spacing: 1.5px; }
.result-score strong { color: #e95d76; font-size: clamp(43px, 12vw, 56px); font-weight: 1000; letter-spacing: -2.8px; line-height: 1.08; font-variant-numeric: tabular-nums; text-shadow: 0 2px #ffd89a; }

.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 5px;
  padding: 11px 8px;
  border: 1px solid rgba(92,119,105,.18);
  border-radius: 15px;
  background: rgba(222,238,209,.49);
}

.result-grid > div { display: grid; gap: 2px; }
.result-grid span { color: #829087; font-size: 7px; font-weight: 950; letter-spacing: .75px; }
.result-grid strong { color: #4c5861; font-size: 16px; font-weight: 1000; font-variant-numeric: tabular-nums; }
.record-line { margin: 9px 0 3px; color: #d25b73; font-size: 9px; font-weight: 1000; letter-spacing: .65px; }
.leaderboard-status { min-height: 25px; margin: 4px auto 3px; color: #72647c; font-size: 9px; font-weight: 700; line-height: 1.35; }

.small-retry {
  margin: -2px auto 7px;
  padding: 5px 12px;
  border: 1px solid rgba(219,100,119,.43);
  border-radius: 20px;
  color: #cf5c75;
  background: rgba(255,255,255,.57);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 1px;
  cursor: pointer;
}

.small-retry[hidden] { display: none; }
.results-card .primary-button { min-height: 46px; margin-top: 5px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: #84758a; font-size: 8px; font-weight: 950; letter-spacing: 1.15px; text-decoration: none; }
.back-link:hover { color: #e45d76; }
.back-link span { color: #e57780; font-size: 11px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-height: 760px) {
  .screen { padding-top: calc(39px + var(--safe-top)); padding-bottom: calc(17px + var(--safe-bottom)); }
  .home-card { padding: 21px 21px 17px; border-radius: 23px; }
  .eyebrow { margin-bottom: 5px; font-size: 8px; }
  h1 { font-size: clamp(44px, 12.5vw, 61px); }
  .tagline { margin: 5px 0 8px; font-size: 12px; }
  .how-copy { margin-bottom: 10px; font-size: 10px; }
  .primary-button { min-height: 45px; }
  .secondary-button { min-height: 42px; margin-top: 9px; }
  .text-button { margin-top: 7px; }
  .personal-records { margin: 6px 0 8px; padding: 7px 4px 6px; }
  .personal-records strong { font-size: 16px; }
  .controls-hint { font-size: 6.6px; }
  .results-card { padding-top: 23px; padding-bottom: 17px; }
  .results-card h2 { margin: 6px 0 8px; }
  .result-score { margin: 2px 0 8px; }
  .result-score strong { font-size: 45px; }
  .result-grid { padding: 8px 7px; gap: 6px; }
  .results-card .primary-button { min-height: 43px; }
}

@media (max-width: 370px) {
  .screen { padding-inline: 12px; }
  .screen-card { padding-inline: 18px; }
  .home-card { padding-inline: 17px; }
  .personal-records { gap: 8px; }
  .personal-records > div { min-width: 93px; }
  .controls-hint { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}