@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap");

:root {
  color-scheme: dark;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --page: #11142b;
  --panel: #1a1e3c;
  --panel-light: #222747;
  --ink: #f6f5ff;
  --muted: #a4a8c7;
  --soft: #777eaa;
  --sun: #ffe487;
  --mint: #a5f5cf;
  --pink: #ff8da1;
  --line: rgba(209, 214, 255, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% -18%, rgba(84, 83, 163, 0.34), transparent 49%),
    radial-gradient(ellipse at 95% 85%, rgba(45, 59, 113, 0.2), transparent 36%),
    var(--page);
}

button {
  color: inherit;
  font: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 4px;
}

.app-shell {
  width: min(100% - 40px, 900px);
  margin: 0 auto;
  padding: 27px 0 34px;
}

.topbar,
.brand,
.sound-toggle,
.mode-heading,
.card-footer,
.play-heading,
.progress-copy,
.play-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar {
  min-height: 42px;
}

.brand {
  justify-content: flex-start;
  gap: 9px;
  color: var(--ink);
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.5px;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 228, 135, 0.3);
  border-radius: 10px;
  color: var(--sun);
  background: rgba(255, 228, 135, 0.1);
}

.sound-toggle,
.quiet-button {
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #d7d9ee;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.sound-toggle {
  gap: 8px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
}

.sound-toggle:hover,
.quiet-button:hover {
  border-color: rgba(205, 209, 255, 0.28);
  background: rgba(255, 255, 255, 0.075);
}

.sound-toggle span:first-child {
  color: var(--sun);
  font-size: 15px;
}

.screen {
  animation: rise-in 420ms ease both;
}

.home-screen {
  width: min(100%, 656px);
  margin: 51px auto 0;
}

.intro {
  margin-bottom: 27px;
  text-align: center;
}

.eyebrow,
.section-kicker {
  color: #b6b9d8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.15px;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  color: #d8cfa3;
  letter-spacing: 0.85px;
  text-transform: none;
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 12px rgba(165, 245, 207, 0.8);
}

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

.intro h1,
.play-heading h1 {
  margin-bottom: 12px;
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: clamp(38px, 7vw, 56px);
  font-weight: 900;
  letter-spacing: -2.6px;
  line-height: 1.04;
}

.text-sunshine {
  color: var(--sun);
}

.intro-copy {
  max-width: 440px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.game-card {
  padding: 23px 25px 20px;
  border: 1px solid rgba(210, 214, 255, 0.13);
  border-radius: 19px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.04), transparent 48%),
    rgba(26, 30, 60, 0.88);
  box-shadow: 0 22px 65px rgba(5, 6, 18, 0.3);
}

.mode-heading {
  gap: 12px;
  margin-bottom: 15px;
}

.section-kicker {
  margin-bottom: 5px;
  color: #9da2c7;
  font-size: 9px;
}

.mode-heading h2 {
  margin-bottom: 0;
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.45px;
}

.unlock-note {
  padding: 7px 9px;
  border: 1px solid rgba(255, 228, 135, 0.12);
  border-radius: 999px;
  color: #d5c994;
  background: rgba(255, 228, 135, 0.055);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.mode-list {
  display: grid;
  gap: 8px;
}

.mode-card {
  display: grid;
  min-height: 64px;
  grid-template-columns: 39px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid rgba(201, 206, 247, 0.1);
  border-radius: 13px;
  text-align: left;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.mode-card:not(:disabled):hover {
  border-color: rgba(255, 228, 135, 0.35);
  background: rgba(255, 255, 255, 0.055);
  transform: translateY(-1px);
}

.mode-card.is-selected {
  border-color: rgba(255, 228, 135, 0.56);
  background: linear-gradient(95deg, rgba(255, 228, 135, 0.105), rgba(255, 255, 255, 0.035));
  box-shadow: inset 0 0 0 1px rgba(255, 228, 135, 0.06);
}

.mode-card:disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

.mode-icon {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border-radius: 11px;
  font-size: 20px;
}

.mode-icon--normal {
  color: var(--sun);
  background: rgba(255, 228, 135, 0.12);
}

.mode-icon--hard {
  color: #ffb29f;
  background: rgba(255, 141, 161, 0.11);
}

.mode-icon--endless {
  color: #a8c4ff;
  background: rgba(133, 161, 255, 0.11);
  font-size: 24px;
}

.mode-copy {
  display: grid;
  gap: 3px;
}

.mode-name {
  font-size: 13px;
  font-weight: 800;
}

.mode-description {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.mode-check {
  color: var(--sun);
  font-size: 16px;
  font-weight: 800;
  opacity: 0;
}

.is-selected .mode-check {
  opacity: 1;
}

.mode-lock {
  justify-self: center;
  font-size: 13px;
  filter: grayscale(1);
}

.card-footer {
  gap: 15px;
  margin-top: 18px;
}

.control-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #b3b7d3;
  font-size: 11px;
}

.control-hint span {
  color: var(--sun);
  font-size: 17px;
}

.primary-button {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 17px;
  border: 0;
  border-radius: 11px;
  color: #222039;
  background: linear-gradient(105deg, #ffe58f, #ffd371);
  box-shadow: 0 5px 16px rgba(246, 202, 102, 0.16);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  transition: filter 150ms ease, transform 150ms ease;
}

.primary-button:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.primary-button:active {
  transform: translateY(1px);
}

.tiny-note {
  margin: 16px 0 0;
  color: #777d9f;
  font-size: 10px;
  text-align: center;
}

.play-screen {
  margin-top: 40px;
}

.play-heading {
  gap: 16px;
  margin-bottom: 17px;
}

.play-heading h1 {
  margin: 0;
  font-size: clamp(25px, 5vw, 34px);
  letter-spacing: -1.3px;
}

.play-heading .section-kicker {
  margin-bottom: 5px;
}

.quiet-button {
  min-height: 39px;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.quiet-button span {
  margin-right: 4px;
}

.score-row {
  display: grid;
  min-height: 71px;
  grid-template-columns: 104px minmax(120px, 1fr) 160px;
  align-items: center;
  gap: 15px;
  margin-bottom: 13px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(26, 30, 60, 0.78);
}

.score-box {
  display: grid;
  gap: 1px;
}

.score-label {
  color: #a8adc9;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.score-value {
  color: var(--sun);
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.progress-copy {
  gap: 8px;
  margin-bottom: 7px;
  color: #c1c4dc;
  font-size: 10px;
}

.progress-copy span:last-child {
  color: #f2e7b5;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a5f5cf, #ffe487);
  transition: width 240ms ease;
}

.danger-box {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 141, 161, 0.13);
  border-radius: 10px;
  color: #c7aab8;
  background: rgba(255, 141, 161, 0.055);
  font-size: 10px;
  text-align: center;
}

.danger-icon {
  color: #ff9aab;
  font-size: 16px;
}

.arena {
  position: relative;
  min-height: min(51vh, 390px);
  overflow: hidden;
  border: 1px solid rgba(188, 195, 255, 0.15);
  border-radius: 19px;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(54, 65, 123, 0.54), transparent 57%),
    linear-gradient(145deg, #1d2346, #191d39 65%, #202244);
  box-shadow: inset 0 0 55px rgba(8, 10, 25, 0.25), 0 13px 40px rgba(6, 7, 18, 0.19);
  touch-action: manipulation;
}

.arena::before,
.arena::after {
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(213, 218, 255, 0.055);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.arena::before {
  width: 340px;
  height: 340px;
  top: -190px;
  right: -80px;
}

.arena::after {
  width: 280px;
  height: 280px;
  bottom: -180px;
  left: -95px;
}

.arena-glow {
  position: absolute;
  z-index: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.15;
  pointer-events: none;
}

.arena-glow--one {
  top: 12%;
  left: 18%;
  background: #7f82ff;
}

.arena-glow--two {
  right: 12%;
  bottom: 4%;
  background: #ffc96e;
}

.arena-stars {
  position: absolute;
  z-index: 0;
  top: 19px;
  right: 21px;
  color: rgba(255, 229, 153, 0.33);
  font-size: 13px;
  pointer-events: none;
}

.arena-stars span {
  color: rgba(217, 221, 255, 0.22);
}

.target-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
}

.target {
  position: absolute;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 23px;
  cursor: crosshair;
  font-size: 37px;
  line-height: 1;
  transform: translate(-50%, -50%) rotate(-5deg);
  transition: left 180ms cubic-bezier(0.2, 0.8, 0.2, 1), top 180ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  animation: target-pop 220ms cubic-bezier(0.18, 0.84, 0.32, 1.25) both;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.target:hover {
  z-index: 2;
  filter: brightness(1.13);
  transform: translate(-50%, -50%) rotate(2deg) scale(1.1);
}

.target--good {
  border-color: rgba(255, 248, 208, 0.95);
  background: linear-gradient(145deg, #ffedac, #ffd773);
  box-shadow: 0 8px 26px rgba(255, 218, 118, 0.31), inset 0 1px 5px rgba(255, 255, 255, 0.8);
}

.target--bad {
  border-color: rgba(229, 208, 255, 0.76);
  background: linear-gradient(145deg, #a8a1d0, #797ca9);
  box-shadow: 0 8px 25px rgba(157, 145, 206, 0.25), inset 0 1px 5px rgba(255, 255, 255, 0.45);
  cursor: not-allowed;
  transform: translate(-50%, -50%) rotate(5deg);
}

.target--bad:hover {
  transform: translate(-50%, -50%) rotate(0) scale(1.06);
}

.outcome-card {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  background: rgba(15, 17, 39, 0.76);
  backdrop-filter: blur(8px);
  text-align: center;
  animation: fade-in 200ms ease both;
}

.outcome-icon {
  margin-bottom: 9px;
  font-size: 37px;
  line-height: 1;
}

.outcome-card .section-kicker {
  margin-bottom: 5px;
}

.outcome-card h2 {
  margin-bottom: 7px;
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -1px;
}

.outcome-copy {
  max-width: 350px;
  margin-bottom: 18px;
  color: #c3c6df;
  font-size: 13px;
  line-height: 1.6;
}

.outcome-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.play-footer {
  min-height: 42px;
  gap: 15px;
}

.play-footer p {
  margin: 0;
  color: #b2b6d2;
  font-size: 11px;
}

.hint-spark {
  margin-right: 5px;
  color: var(--sun);
}

.footer-decoration {
  color: #777ea8;
  font-size: 11px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

[hidden] {
  display: none !important;
}

.play-screen {
  position: relative;
  left: 50%;
  width: min(calc(100vw - 40px), 1500px);
  max-width: none;
  margin-left: 0;
  transform: translateX(-50%);
}

.arena {
  height: min(76vh, 960px);
  min-height: 580px;
}

.target-layer.is-input-frozen {
  pointer-events: none;
  cursor: wait;
}

.target--blue {
  filter: drop-shadow(0 0 15px rgba(89, 190, 255, 0.9)) drop-shadow(0 9px 10px rgba(12, 8, 20, 0.25));
}

.home-tab .tab-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.roulette-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
  margin-top: 20px;
}

.roulette-machine,
.roulette-side > div {
  border: 1px solid rgba(255, 227, 205, 0.12);
  border-radius: 16px;
  background: rgba(27, 17, 34, 0.38);
}

.roulette-machine {
  position: relative;
  display: flex;
  min-height: 310px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 30px 18px 17px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 211, 122, 0.12), transparent 49%),
    rgba(27, 17, 34, 0.58);
}

.roulette-pointer {
  position: absolute;
  z-index: 2;
  top: 17px;
  left: 50%;
  color: #ffe487;
  font-size: 24px;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 8px rgba(255, 210, 115, 0.75));
}

.roulette-wheel {
  display: grid;
  width: 172px;
  aspect-ratio: 1;
  place-items: center;
  border: 8px solid #e8c179;
  border-radius: 50%;
  background:
    radial-gradient(circle, #35233d 0 23%, transparent 24%),
    repeating-conic-gradient(from -9deg, #a84062 0deg 17deg, #52316a 17deg 18deg, #276b71 18deg 35deg, #52316a 35deg 36deg);
  box-shadow: 0 0 0 5px rgba(78, 42, 74, 0.8), 0 0 24px rgba(255, 211, 122, 0.2), inset 0 0 15px rgba(20, 10, 28, 0.3);
}

.roulette-wheel span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid rgba(255, 228, 135, 0.82);
  border-radius: 50%;
  background: #30203d;
  font-size: 26px;
}

.roulette-wheel.is-spinning {
  animation: roulette-spin 1.5s cubic-bezier(0.13, 0.7, 0.2, 1) both;
}

.roulette-machine .primary-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.55);
  opacity: 0.65;
}

.roulette-result {
  min-height: 34px;
  margin: 0;
  color: #ffe7b0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

.roulette-remaining,
.roulette-odds-card span {
  color: #a4a8c7;
  font-size: 10px;
}

.roulette-side {
  display: grid;
  align-content: start;
  gap: 12px;
}

.roulette-side > div {
  padding: 13px;
}

.roulette-side h3,
.roulette-collection-title {
  margin: 0 0 10px;
  color: #ffe7b0;
  font-size: 13px;
}

.roulette-odds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.roulette-odds-card {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.roulette-odds-card strong {
  color: #f6f5ff;
  font-size: 11px;
}

.roulette-odds-card.is-empty {
  opacity: 0.4;
}

.rarity-mishap { border-color: rgba(226, 127, 141, 0.28); }
.rarity-ordinary { border-color: rgba(199, 183, 162, 0.26); }
.rarity-shiny { border-color: rgba(103, 202, 169, 0.35); }
.rarity-marvelous { border-color: rgba(195, 146, 255, 0.48); }

.owned-card-list,
.roulette-collection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 185px;
  overflow: auto;
}

.owned-card,
.roulette-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: #d7d9ee;
  background: rgba(255, 255, 255, 0.03);
  font-size: 10px;
  line-height: 1.3;
}

.owned-card.is-empty {
  grid-column: 1 / -1;
  color: #a4a8c7;
}

.roulette-collection-title {
  margin-top: 22px;
}

.roulette-collection {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-height: 240px;
}

.roulette-card > span:first-child {
  font-size: 15px;
}

.panel-description {
  color: #c7adbf;
  font-size: 12px;
  line-height: 1.6;
}

@keyframes roulette-spin {
  from { transform: rotate(0); }
  to { transform: rotate(1440deg); }
}

@media (max-width: 700px) {
  .play-screen {
    width: calc(100vw - 24px);
  }

  .arena {
    height: 70vh;
    min-height: 500px;
  }

  .roulette-layout {
    grid-template-columns: 1fr;
  }

  .roulette-machine {
    min-height: 280px;
  }

  .roulette-collection {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes target-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55) rotate(-13deg);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(-5deg);
  }
}

@media (max-width: 620px) {
  .app-shell {
    width: min(100% - 28px, 520px);
    padding-top: 17px;
  }

  .home-screen {
    margin-top: 37px;
  }

  .game-card {
    padding: 18px 15px 15px;
  }

  .mode-description {
    font-size: 10px;
  }

  .score-row {
    grid-template-columns: 65px minmax(80px, 1fr);
    gap: 10px;
    padding: 10px 12px;
  }

  .danger-box {
    grid-column: 1 / -1;
    min-height: 31px;
    justify-content: flex-start;
    padding-left: 9px;
  }

  .arena {
    min-height: min(52vh, 350px);
    border-radius: 15px;
  }

  .target {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    font-size: 33px;
  }

  .play-screen {
    margin-top: 32px;
  }
}

@media (max-width: 420px) {
  .app-shell {
    width: min(100% - 22px, 380px);
  }

  .intro h1 {
    font-size: 40px;
  }

  .intro-copy {
    font-size: 12px;
  }

  .unlock-note {
    padding: 6px 7px;
    font-size: 9px;
  }

  .card-footer {
    align-items: flex-start;
  }

  .control-hint {
    max-width: 150px;
    align-items: flex-start;
    line-height: 1.5;
  }

  .primary-button {
    padding: 0 12px;
  }

  .play-heading h1 {
    font-size: 25px;
  }

  .quiet-button {
    padding: 0 10px;
  }
}

:root {
  --page: #241727;
  --panel: #382139;
  --panel-light: #503048;
  --ink: #fff5e8;
  --muted: #d0bcca;
  --soft: #a38ba5;
  --sun: #ffd879;
  --mint: #a5e6d1;
  --pink: #ff8296;
  --line: rgba(255, 227, 196, 0.15);
}

body {
  background:
    radial-gradient(ellipse at 50% 9%, rgba(162, 62, 90, 0.27), transparent 49%),
    radial-gradient(ellipse at 5% 80%, rgba(64, 51, 104, 0.32), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 231, 195, 0.013) 0 1px, transparent 1px 88px),
    var(--page);
}

.app-shell {
  width: min(100% - 40px, 900px);
}

.brand-mark {
  border-color: rgba(255, 216, 121, 0.36);
  color: #ffe39c;
  background: linear-gradient(145deg, rgba(188, 60, 82, 0.7), rgba(108, 40, 74, 0.75));
  box-shadow: 0 0 20px rgba(255, 189, 98, 0.1);
}

.sound-toggle,
.quiet-button {
  border-color: rgba(255, 229, 207, 0.16);
  color: #f0dfd7;
  background: rgba(40, 24, 43, 0.72);
}

.sound-toggle:hover,
.quiet-button:hover {
  border-color: rgba(255, 216, 121, 0.43);
  background: rgba(103, 47, 69, 0.7);
}

.home-screen {
  width: min(100%, 730px);
  margin-top: 37px;
}

.intro {
  display: grid;
  min-height: 250px;
  grid-template-columns: minmax(0, 1fr) 235px;
  align-items: center;
  gap: 20px;
  margin: 0 10px 24px;
  text-align: left;
}

.intro-copy-block {
  position: relative;
  z-index: 1;
}

.eyebrow {
  color: #ffe2a8;
}

.eyebrow-dot {
  background: #8df0c0;
  box-shadow: 0 0 12px rgba(141, 240, 192, 0.8);
}

.intro h1 {
  margin-bottom: 12px;
  font-size: clamp(39px, 6vw, 55px);
  letter-spacing: -2.4px;
}

.text-sunshine {
  color: #ffd879;
  text-shadow: 0 4px 28px rgba(255, 173, 91, 0.17);
}

.intro-copy {
  max-width: 415px;
  margin: 0;
  color: #d5bdc8;
  font-size: 13px;
  line-height: 1.75;
}

.hero-mascot {
  position: relative;
  display: grid;
  height: 235px;
  align-items: end;
  justify-items: center;
  isolation: isolate;
}

.hero-mascot::before {
  position: absolute;
  z-index: -1;
  inset: 3px -4px 5px;
  border-radius: 50% 50% 35% 35%;
  background: radial-gradient(ellipse at 50% 38%, rgba(255, 231, 164, 0.34), rgba(213, 127, 131, 0.11) 46%, transparent 73%);
  content: "";
}

.hero-mascot::after {
  position: absolute;
  z-index: -1;
  right: 7%;
  bottom: 4px;
  left: 7%;
  height: 24px;
  border: 1px solid rgba(255, 218, 164, 0.48);
  border-radius: 50%;
  background: linear-gradient(180deg, #973d5d, #572843);
  box-shadow: 0 7px 0 #392039, 0 12px 25px rgba(9, 6, 18, 0.32), inset 0 3px rgba(255, 231, 164, 0.4);
  content: "";
}

.hero-mascot .jester-art {
  width: 184px;
  height: 220px;
  overflow: visible;
  filter: drop-shadow(0 12px 14px rgba(12, 9, 22, 0.3));
  animation: mascot-bob 3.2s ease-in-out infinite;
}

.game-card {
  border-color: rgba(255, 222, 182, 0.17);
  background:
    linear-gradient(135deg, rgba(255, 224, 185, 0.055), transparent 50%),
    linear-gradient(145deg, rgba(63, 35, 64, 0.97), rgba(48, 29, 55, 0.97));
  box-shadow: 0 24px 70px rgba(13, 7, 18, 0.33), inset 0 1px rgba(255, 246, 224, 0.055);
}

.section-kicker {
  color: #d8aab0;
}

.mode-heading h2 {
  color: #fff3e1;
}

.unlock-note {
  border-color: rgba(255, 216, 121, 0.18);
  color: #f1d89b;
  background: rgba(255, 216, 121, 0.075);
}

.mode-card {
  border-color: rgba(255, 232, 209, 0.1);
  background: rgba(28, 17, 35, 0.32);
}

.mode-card:not(:disabled):hover {
  border-color: rgba(255, 216, 121, 0.46);
  background: rgba(255, 226, 189, 0.075);
}

.mode-card.is-selected {
  border-color: rgba(255, 216, 121, 0.61);
  background: linear-gradient(95deg, rgba(168, 77, 82, 0.26), rgba(255, 216, 121, 0.055));
  box-shadow: inset 0 0 0 1px rgba(255, 216, 121, 0.07);
}

.mode-icon--normal {
  color: #ffdf97;
  background: rgba(255, 182, 101, 0.14);
}

.mode-icon--hard {
  color: #ffadbd;
  background: rgba(255, 96, 123, 0.14);
}

.mode-icon--endless {
  color: #c9b8ff;
  background: rgba(154, 127, 255, 0.15);
}

.mode-name {
  color: #fff2df;
}

.mode-description {
  color: #c7adbf;
}

.mode-check {
  color: #ffe28e;
}

.control-hint {
  color: #d0bdc9;
}

.primary-button {
  color: #402138;
  background: linear-gradient(110deg, #ffe49a, #ffca70);
  box-shadow: 0 5px 18px rgba(255, 172, 92, 0.22), inset 0 1px rgba(255, 255, 255, 0.7);
}

.tiny-note {
  color: #a8899f;
}

.play-screen {
  margin-top: 31px;
}

.play-heading h1 {
  color: #fff4e3;
}

.score-row {
  border-color: rgba(255, 222, 196, 0.15);
  background: linear-gradient(100deg, rgba(70, 38, 67, 0.94), rgba(48, 32, 63, 0.93));
  box-shadow: 0 8px 26px rgba(12, 7, 18, 0.12), inset 0 1px rgba(255, 246, 224, 0.04);
}

.score-label {
  color: #d5b9c9;
}

.score-value {
  color: #ffdc84;
}

.progress-copy {
  color: #dfc7d2;
}

.progress-copy span:last-child {
  color: #ffe3a2;
}

.progress-fill {
  background: linear-gradient(90deg, #fa986e, #ffe08e, #9fe3bb);
}

.danger-box {
  border-color: rgba(255, 137, 151, 0.19);
  color: #e5b4ba;
  background: rgba(178, 61, 89, 0.13);
}

.arena {
  min-height: min(55vh, 435px);
  border-color: rgba(255, 226, 197, 0.26);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(127, 83, 119, 0.24), transparent 59%),
    linear-gradient(180deg, #372447 0%, #30213e 60%, #503044 100%);
  box-shadow: inset 0 0 65px rgba(15, 8, 24, 0.34), 0 15px 40px rgba(9, 5, 15, 0.23);
}

.arena::before {
  z-index: 1;
  width: 260px;
  height: 260px;
  top: -169px;
  right: -85px;
  border-color: rgba(255, 226, 197, 0.07);
}

.arena::after {
  z-index: 1;
  width: 205px;
  height: 205px;
  bottom: -155px;
  left: -70px;
  border-color: rgba(255, 226, 197, 0.07);
}

.big-top {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 46px;
  overflow: hidden;
  border-bottom: 2px solid rgba(255, 225, 182, 0.55);
  background: repeating-linear-gradient(90deg, #9c3658 0 48px, #f1d8b8 48px 96px);
  box-shadow: 0 6px 14px rgba(14, 8, 20, 0.25);
  clip-path: polygon(0 0, 100% 0, 100% 77%, 94% 93%, 88% 77%, 82% 93%, 76% 77%, 70% 93%, 64% 77%, 58% 93%, 52% 77%, 46% 93%, 40% 77%, 34% 93%, 28% 77%, 22% 93%, 16% 77%, 10% 93%, 4% 77%, 0 93%);
}

.big-top-bulbs {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 5px;
  background: radial-gradient(circle, #fff4c9 0 2px, transparent 2.5px) 0 0 / 24px 5px repeat-x;
  filter: drop-shadow(0 0 3px rgba(255, 224, 146, 0.9));
}

.big-top-bulbs::before {
  position: absolute;
  top: -38px;
  left: calc(50% - 17px);
  width: 34px;
  height: 38px;
  border: 2px solid #edcb8c;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  content: "";
}

.big-top-flag {
  position: absolute;
  top: 3px;
  left: 50%;
  display: grid;
  width: 28px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255, 237, 191, 0.7);
  border-radius: 4px 4px 12px 12px;
  color: #fff0bd;
  background: #a33a5c;
  font-size: 14px;
  transform: translateX(-50%);
}

.arena-glow {
  z-index: 1;
  opacity: 0.2;
}

.arena-glow--one {
  top: 27%;
  left: 16%;
  background: #f08a9f;
}

.arena-glow--two {
  right: 12%;
  bottom: 10%;
  background: #ffd075;
}

.arena-stars {
  z-index: 1;
  top: 61px;
  color: rgba(255, 227, 161, 0.53);
  text-shadow: 0 0 8px rgba(255, 217, 134, 0.35);
}

.audience {
  position: absolute;
  z-index: 1;
  bottom: 43px;
  color: rgba(255, 213, 157, 0.33);
  font-size: 17px;
  letter-spacing: 3px;
  pointer-events: none;
}

.audience--left {
  left: 13px;
}

.audience--right {
  right: 13px;
}

.stage-floor {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 38px;
  border-top: 1px solid rgba(255, 222, 181, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 218, 178, 0.1), transparent 26%),
    repeating-linear-gradient(90deg, rgba(172, 71, 94, 0.54) 0 46px, rgba(255, 229, 202, 0.12) 46px 92px),
    #45283f;
  box-shadow: 0 -7px 20px rgba(14, 7, 20, 0.12);
  pointer-events: none;
}

.target-layer {
  z-index: 2;
  overflow: hidden;
}

.target {
  width: 104px;
  height: 128px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: crosshair;
  transform: translate(-50%, -52%);
  animation: target-pop-circus 240ms cubic-bezier(0.18, 0.84, 0.32, 1.15) both;
  filter: drop-shadow(0 9px 10px rgba(12, 8, 20, 0.21));
}

.target:hover,
.target--bad:hover {
  z-index: 2;
  filter: drop-shadow(0 12px 16px rgba(255, 217, 140, 0.27)) brightness(1.05);
  transform: translate(-50%, -54%) scale(1.08);
}

.target--good,
.target--bad {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.target--bad {
  filter: drop-shadow(0 8px 10px rgba(12, 8, 20, 0.22));
  cursor: not-allowed;
}

.jester-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.puppet-arm {
  transform-box: view-box;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.puppet-arm--left {
  transform-origin: 35px 74px;
}

.puppet-arm--right {
  transform-origin: 77px 74px;
}

.target--good.is-celebrating {
  z-index: 3;
  animation: caught-bounce 300ms ease both;
}

.target--good.is-celebrating .puppet-arm--left {
  transform: rotate(48deg);
}

.target--good.is-celebrating .puppet-arm--right {
  transform: rotate(-48deg);
}

.target--bad .jester-art {
  filter: saturate(0.98);
}

.trickster-warning {
  position: absolute;
  z-index: 3;
  top: 57px;
  left: 50%;
  display: flex;
  width: max-content;
  max-width: calc(100% - 24px);
  min-height: 43px;
  align-items: center;
  gap: 9px;
  padding: 5px 13px 5px 6px;
  border: 1px solid rgba(255, 135, 125, 0.76);
  border-radius: 999px;
  color: #fff1df;
  background: linear-gradient(110deg, rgba(89, 29, 49, 0.97), rgba(54, 29, 51, 0.97));
  box-shadow: 0 7px 25px rgba(11, 6, 18, 0.38), 0 0 24px rgba(239, 88, 85, 0.17);
  font-size: 11px;
  font-weight: 800;
  transform: translateX(-50%);
  animation: warning-arrives 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.trickster-warning img {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border: 1px solid rgba(164, 220, 159, 0.72);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 46%;
}

.outcome-card--win {
  background:
    radial-gradient(ellipse at 50% 33%, rgba(166, 83, 91, 0.3), transparent 47%),
    rgba(38, 22, 43, 0.86);
}

.outcome-card--lose {
  background:
    radial-gradient(ellipse at 50% 24%, rgba(31, 99, 64, 0.24), transparent 48%),
    rgba(18, 16, 29, 0.9);
}

.outcome-art {
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  overflow: hidden;
  margin-bottom: 5px;
  border: 1px solid rgba(255, 228, 185, 0.56);
  border-radius: 23px;
  background: #f0c3a9;
  box-shadow: 0 10px 30px rgba(10, 7, 18, 0.32), 0 0 30px rgba(255, 198, 129, 0.12);
  animation: artwork-appears 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.outcome-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.outcome-card--lose .outcome-art {
  width: min(250px, 72vw);
  height: 123px;
  border-color: rgba(124, 201, 140, 0.62);
  border-radius: 16px;
  background: #120f11;
  box-shadow: 0 10px 32px rgba(7, 12, 9, 0.48), 0 0 32px rgba(49, 144, 82, 0.18);
}

.outcome-card--lose .outcome-art img {
  object-position: center 42%;
}

.outcome-card--win .outcome-art {
  border-color: rgba(255, 225, 160, 0.8);
  box-shadow: 0 10px 34px rgba(7, 12, 9, 0.3), 0 0 32px rgba(255, 202, 115, 0.23);
}

.outcome-card--win .outcome-icon,
.outcome-card--lose .outcome-icon {
  display: none;
}

.outcome-card--lose h2 {
  text-shadow: 0 0 22px rgba(111, 218, 129, 0.2);
}

.outcome-card {
  z-index: 4;
  background: rgba(38, 22, 43, 0.84);
}

.outcome-card h2 {
  color: #fff0db;
}

.play-footer p {
  color: #d1bcca;
}

.footer-decoration {
  color: #c39bae;
}

@keyframes mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes warning-arrives {
  from { opacity: 0; transform: translate(-50%, -8px) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes artwork-appears {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes target-pop-circus {
  from { opacity: 0; transform: translate(-50%, -52%) scale(0.7) rotate(-8deg); }
  to { opacity: 1; transform: translate(-50%, -52%) scale(1) rotate(0); }
}

@keyframes caught-bounce {
  0% { transform: translate(-50%, -52%) scale(1); }
  45% { transform: translate(-50%, -65%) scale(1.13) rotate(3deg); }
  100% { transform: translate(-50%, -52%) scale(1.04); }
}

@media (max-width: 620px) {
  .app-shell {
    width: min(100% - 28px, 520px);
  }

  .home-screen {
    margin-top: 29px;
  }

  .intro {
    min-height: 200px;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 3px;
    margin: 0 2px 19px;
  }

  .intro h1 {
    font-size: clamp(32px, 8vw, 43px);
    letter-spacing: -1.7px;
  }

  .intro-copy {
    font-size: 11px;
  }

  .eyebrow {
    font-size: 10px;
  }

  .hero-mascot {
    height: 190px;
  }

  .hero-mascot .jester-art {
    width: 133px;
    height: 164px;
  }

  .arena {
    min-height: min(54vh, 390px);
  }

  .target {
    width: 91px;
    height: 112px;
  }

  .big-top {
    height: 40px;
  }
}

@media (max-width: 420px) {
  .app-shell {
    width: min(100% - 22px, 380px);
  }

  .intro {
    min-height: 177px;
    grid-template-columns: minmax(0, 1fr) 105px;
  }

  .intro h1 {
    font-size: 34px;
  }

  .hero-mascot {
    height: 170px;
  }

  .hero-mascot .jester-art {
    width: 112px;
    height: 142px;
  }

  .sound-toggle {
    padding: 8px 9px;
    font-size: 10px;
  }

  .mode-heading h2 {
    font-size: 17px;
  }

  .mode-card {
    grid-template-columns: 35px minmax(0, 1fr) 18px;
    gap: 8px;
    padding: 8px 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mascot .jester-art {
    animation: none;
  }
}

[hidden] {
  display: none !important;
}

.home-screen {
  width: min(100%, 790px);
}

.hero-scene {
  position: relative;
  height: 245px;
  overflow: hidden;
  border: 1px solid rgba(255, 227, 197, 0.1);
  border-radius: 48% 45% 21px 21px;
  background:
    radial-gradient(ellipse at 60% 48%, rgba(255, 213, 139, 0.17), transparent 58%),
    linear-gradient(180deg, rgba(102, 52, 94, 0.22), rgba(52, 30, 59, 0.15));
  isolation: isolate;
}

.hero-scene::before {
  position: absolute;
  z-index: -1;
  inset: 18px 12px 23px;
  border: 1px solid rgba(255, 221, 175, 0.13);
  border-radius: 50%;
  content: "";
}

.hero-stage {
  position: absolute;
  z-index: -1;
  right: 7%;
  bottom: 13px;
  left: 7%;
  height: 29px;
  border: 1px solid rgba(255, 218, 164, 0.48);
  border-radius: 50%;
  background: linear-gradient(180deg, #973d5d, #572843);
  box-shadow: 0 7px 0 #392039, 0 12px 25px rgba(9, 6, 18, 0.32), inset 0 3px rgba(255, 231, 164, 0.4);
}

.hero-jester,
.hero-trickster {
  position: absolute;
  z-index: 1;
  bottom: 34px;
  width: 112px;
  height: 138px;
  filter: drop-shadow(0 10px 12px rgba(12, 9, 22, 0.3));
}

.hero-jester {
  left: 18%;
  animation: jester-run 1.15s ease-in-out infinite alternate;
}

.hero-trickster {
  right: 13%;
  width: 100px;
  height: 125px;
  animation: trickster-chase 1.15s ease-in-out infinite alternate;
}

.hero-cursor {
  position: absolute;
  z-index: 3;
  right: 34%;
  bottom: 46px;
  color: #fff1ce;
  font-size: 30px;
  font-weight: 900;
  filter: drop-shadow(0 3px 4px rgba(9, 4, 17, 0.55));
  animation: ticket-cursor 2.4s ease-in-out infinite;
}

.hero-ticket {
  position: absolute;
  z-index: 2;
  bottom: 49px;
  color: #ffe4a0;
  font-size: 19px;
  filter: drop-shadow(0 3px 5px rgba(11, 6, 15, 0.5));
  animation: falling-ticket 1.9s ease-in infinite;
}

.hero-ticket--one {
  left: 37%;
  animation-delay: 0s;
}

.hero-ticket--two {
  left: 52%;
  animation-delay: 0.62s;
}

.hero-ticket--three {
  left: 68%;
  animation-delay: 1.24s;
}

.home-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 2px 12px;
  padding: 5px;
  border: 1px solid rgba(255, 225, 199, 0.1);
  border-radius: 13px;
  background: rgba(32, 20, 38, 0.61);
}

.home-tab,
.leaderboard-tab {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #c9b2c4;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.home-tab:hover,
.leaderboard-tab:hover {
  color: #fff1de;
  background: rgba(255, 234, 210, 0.06);
}

.home-tab.is-active,
.leaderboard-tab.is-active {
  border-color: rgba(255, 216, 121, 0.25);
  color: #ffe1a0;
  background: rgba(255, 216, 121, 0.09);
}

.tab-count {
  margin-left: 4px;
  color: #e4b7a3;
  font-size: 9px;
}

.home-panel {
  animation: fade-in 200ms ease both;
}

.mode-icon--lunatic {
  color: #e0b5ff;
  background: rgba(182, 115, 230, 0.16);
}

.mode-icon--secret {
  color: #9de3c0;
  background: rgba(103, 205, 148, 0.13);
}

.achievement-list {
  display: grid;
  gap: 7px;
}

.achievement-card {
  display: grid;
  min-height: 57px;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 227, 205, 0.09);
  border-radius: 12px;
  background: rgba(27, 17, 34, 0.32);
}

.achievement-card.is-earned {
  border-color: rgba(255, 216, 121, 0.23);
  background: rgba(255, 216, 121, 0.055);
}

.achievement-seal {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border: 1px solid rgba(233, 190, 187, 0.19);
  border-radius: 50%;
  color: #c39bae;
  background: rgba(255, 255, 255, 0.035);
  font-size: 14px;
  font-weight: 900;
}

.is-earned .achievement-seal {
  border-color: rgba(255, 221, 142, 0.44);
  color: #ffe08c;
  background: rgba(255, 216, 121, 0.13);
}

.achievement-copy {
  display: grid;
  gap: 3px;
}

.achievement-copy strong {
  color: #f7e9dd;
  font-size: 11px;
}

.achievement-copy span {
  color: #beabba;
  font-size: 10px;
  line-height: 1.45;
}

.achievement-status {
  color: #a78ba0;
  font-size: 9px;
  font-weight: 800;
}

.is-earned .achievement-status {
  color: #ecd194;
}

.leaderboard-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(25, 16, 33, 0.47);
}

.leaderboard-tab {
  flex: 1;
}

.leaderboard-list {
  display: grid;
  gap: 5px;
}

.leaderboard-entry {
  display: grid;
  min-height: 40px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 227, 205, 0.08);
  border-radius: 10px;
  background: rgba(27, 17, 34, 0.32);
}

.leaderboard-rank {
  color: #edcc8c;
  font-family: "Nunito", sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.leaderboard-mode {
  color: #d3bfcc;
  font-size: 11px;
}

.leaderboard-entry strong {
  color: #ffe095;
  font-variant-numeric: tabular-nums;
}

.leaderboard-empty {
  padding: 30px 12px;
  border: 1px dashed rgba(255, 227, 205, 0.15);
  border-radius: 12px;
  color: #c4acbc;
  font-size: 12px;
  text-align: center;
}

.panel-description {
  max-width: 550px;
  margin-bottom: 12px;
  color: #d1bcca;
  font-size: 12px;
  line-height: 1.7;
}

.timer-row {
  display: grid;
  min-height: 38px;
  grid-template-columns: 20px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255, 222, 196, 0.14);
  border-radius: 10px;
  background: rgba(54, 31, 56, 0.69);
}

.timer-icon {
  color: #ffe0a0;
  font-size: 18px;
}

.timer-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.timer-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9de0ac, #ffe08e 65%, #fa806d);
  transition: width 60ms linear;
}

.timer-value {
  color: #ffe7b0;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.arena {
  min-height: min(78vh, 850px);
}

.target {
  width: 108px;
  height: 132px;
}

.target--mimic {
  filter: drop-shadow(0 7px 13px rgba(185, 110, 231, 0.6));
}

.target--mimic .jester-art {
  animation: mimic-glimmer 1.1s ease-in-out infinite alternate;
}

.target.is-celebrating .puppet-arm--left,
.is-arms-up .puppet-arm--left {
  transform: rotate(48deg);
}

.target.is-celebrating .puppet-arm--right,
.is-arms-up .puppet-arm--right {
  transform: rotate(-48deg);
}

.target.is-disguised {
  filter: drop-shadow(0 7px 12px rgba(70, 193, 113, 0.28));
}

.trickster-warning {
  top: 57px;
}

.event-banner {
  position: absolute;
  z-index: 4;
  top: 58px;
  left: 50%;
  max-width: calc(100% - 24px);
  padding: 8px 13px;
  border: 1px solid rgba(255, 226, 171, 0.46);
  border-radius: 999px;
  color: #fff0d6;
  background: rgba(75, 43, 74, 0.94);
  box-shadow: 0 7px 20px rgba(14, 8, 20, 0.32);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  transform: translateX(-50%);
  animation: warning-arrives 250ms ease both;
}

.event-banner--danger {
  border-color: rgba(255, 133, 129, 0.58);
  background: rgba(87, 30, 51, 0.96);
}

.event-banner--celebration {
  border-color: rgba(145, 224, 172, 0.55);
  background: rgba(38, 67, 55, 0.95);
}

.event-banner--mystery {
  border-color: rgba(214, 159, 255, 0.68);
  background: rgba(62, 37, 88, 0.96);
}

.secret-cat {
  position: absolute;
  z-index: 5;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 226, 171, 0.67);
  border-radius: 50%;
  background: #e8c99a;
  box-shadow: 0 0 24px rgba(214, 159, 255, 0.58);
  cursor: pointer;
  font-size: 34px;
  transform: translate(-50%, -50%);
  animation: cat-peek 2.2s ease both;
}

.draft-overlay {
  position: absolute;
  z-index: 7;
  inset: 43px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border: 1px solid rgba(255, 228, 185, 0.28);
  border-radius: 18px;
  background: rgba(36, 22, 43, 0.95);
  box-shadow: 0 15px 40px rgba(9, 5, 15, 0.32);
  text-align: center;
  backdrop-filter: blur(9px);
}

.draft-overlay h2 {
  margin-bottom: 5px;
  color: #fff0db;
  font-family: "Nunito", sans-serif;
  font-size: clamp(20px, 4vw, 29px);
}

.draft-overlay > p:not(.section-kicker) {
  max-width: 410px;
  margin-bottom: 15px;
  color: #d1bcca;
  font-size: 11px;
  line-height: 1.6;
}

.draft-options {
  display: grid;
  width: min(100%, 680px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.draft-card {
  display: flex;
  min-height: 155px;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(255, 227, 205, 0.16);
  border-radius: 13px;
  text-align: left;
  background: linear-gradient(150deg, rgba(98, 56, 87, 0.74), rgba(47, 31, 61, 0.84));
  cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}

.draft-card:hover {
  border-color: rgba(255, 216, 121, 0.65);
  background: linear-gradient(150deg, rgba(130, 73, 91, 0.82), rgba(61, 40, 71, 0.9));
  transform: translateY(-3px);
}

.draft-icon {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 216, 121, 0.12);
  font-size: 17px;
}

.draft-card strong {
  color: #fff0dc;
  font-size: 11px;
}

.draft-benefit,
.draft-drawback {
  color: #c7dcb8;
  font-size: 10px;
  line-height: 1.5;
}

.draft-drawback {
  margin-top: auto;
  color: #f0b3b4;
}

.pip-paw-screen {
  margin-top: 31px;
}

.pip-paw-score-row {
  display: flex;
  min-height: 53px;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 222, 196, 0.15);
  border-radius: 12px;
  color: #ddc4d2;
  background: linear-gradient(100deg, rgba(70, 38, 67, 0.94), rgba(48, 32, 63, 0.93));
  font-size: 12px;
}

.pip-paw-score-row strong {
  color: #ffe095;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.paw-arena {
  position: relative;
  min-height: min(62vh, 530px);
  overflow: hidden;
  border: 1px solid rgba(255, 226, 197, 0.26);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 62%, rgba(145, 78, 111, 0.36), transparent 59%),
    linear-gradient(180deg, #392346, #30213e 68%, #603044);
  box-shadow: inset 0 0 60px rgba(15, 8, 24, 0.34), 0 15px 40px rgba(9, 5, 15, 0.23);
}

.paw-curtain {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  padding: 13px;
  border-bottom: 1px solid rgba(255, 224, 180, 0.3);
  color: #ffe2a5;
  background: repeating-linear-gradient(90deg, rgba(156, 54, 88, 0.65) 0 44px, rgba(241, 216, 184, 0.1) 44px 88px);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 3px;
  text-align: center;
}

.paw-target-layer {
  position: absolute;
  z-index: 1;
  inset: 45px 0 0;
}

.paw-jester {
  position: absolute;
  display: grid;
  width: 91px;
  height: 112px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: none;
  transform: translate(-50%, -50%);
  animation: target-pop-circus 180ms ease both;
}

.paw-jester .jester-art {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 7px 10px rgba(13, 7, 18, 0.32));
}

.paw-whack {
  position: absolute;
  z-index: 2;
  top: -21px;
  left: -21px;
  opacity: 0;
  pointer-events: none;
  font-size: 42px;
}

.paw-jester.is-whacked .paw-whack {
  animation: paw-strike 240ms ease both;
}

.paw-jester.is-whacked .jester-art {
  transform: scaleY(0.55) rotate(7deg);
  transform-origin: 50% 100%;
}

.paw-result {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(32, 20, 38, 0.88);
  text-align: center;
  backdrop-filter: blur(7px);
}

.paw-result h2 {
  margin-bottom: 7px;
  color: #fff0db;
  font-family: "Nunito", sans-serif;
  font-size: 29px;
}

.paw-result p {
  color: #d1bcca;
  font-size: 13px;
}

.pip-paw-screen > .play-footer {
  justify-content: space-between;
  color: #d1bcca;
  font-size: 11px;
}

.pip-paw-screen > .play-footer > span:last-child {
  color: #ffe095;
}

@keyframes jester-run {
  from { transform: translate(0, 1px) rotate(-5deg); }
  to { transform: translate(19px, -5px) rotate(5deg); }
}

@keyframes trickster-chase {
  from { transform: translate(0, 0) rotate(4deg); }
  to { transform: translate(-18px, -5px) rotate(-4deg); }
}

@keyframes ticket-cursor {
  0%, 15% { transform: translate(40px, 12px) rotate(-8deg); }
  42%, 62% { transform: translate(-12px, -7px) rotate(8deg); }
  100% { transform: translate(-73px, 5px) rotate(-3deg); }
}

@keyframes falling-ticket {
  0% { opacity: 0; transform: translateY(-23px) rotate(-8deg) scale(0.7); }
  22% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(24px, 4px) rotate(17deg) scale(1.05); }
}

@keyframes mimic-glimmer {
  from { filter: brightness(0.9) drop-shadow(0 0 0 rgba(206, 155, 255, 0.1)); }
  to { filter: brightness(1.16) drop-shadow(0 0 8px rgba(206, 155, 255, 0.72)); }
}

@keyframes cat-peek {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(0.65) rotate(-8deg); }
  14%, 83% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.9); }
}

@keyframes paw-strike {
  0% { opacity: 0; transform: translate(-13px, -13px) rotate(-32deg) scale(0.6); }
  52% { opacity: 1; transform: translate(10px, 11px) rotate(12deg) scale(1.1); }
  100% { opacity: 0; transform: translate(18px, 22px) rotate(22deg) scale(0.82); }
}

@media (min-width: 1100px) {
  .app-shell {
    width: min(100% - 56px, 1020px);
  }

  .play-screen {
    width: min(100%, 970px);
    margin-right: auto;
    margin-left: auto;
  }

  .arena {
    min-height: min(78vh, 850px);
  }
}

@media (max-width: 620px) {
  .home-screen {
    width: min(100%, 520px);
  }

  .hero-scene {
    height: 190px;
  }

  .hero-jester {
    left: 13%;
    width: 91px;
    height: 113px;
  }

  .hero-trickster {
    right: 10%;
    width: 83px;
    height: 104px;
  }

  .home-tabs {
    gap: 3px;
    padding: 4px;
  }

  .home-tab {
    min-height: 32px;
    padding: 0 8px;
    font-size: 10px;
  }

  .arena {
    min-height: min(70vh, 680px);
  }

  .target {
    width: 91px;
    height: 112px;
  }

  .draft-overlay {
    inset: 42px 8px 8px;
    padding: 15px 10px;
  }

  .draft-options {
    gap: 6px;
  }

  .draft-card {
    min-height: 164px;
    gap: 7px;
    padding: 8px;
  }

  .draft-card strong,
  .draft-benefit,
  .draft-drawback {
    font-size: 9px;
  }

  .paw-arena {
    min-height: 58vh;
  }
}

@media (max-width: 420px) {
  .home-tab {
    padding: 0 6px;
    font-size: 9px;
  }

  .home-tab:last-child {
    flex-basis: 100%;
  }

  .mode-description {
    font-size: 9px;
  }

  .mode-card {
    min-height: 58px;
  }

  .timer-row {
    grid-template-columns: 17px minmax(0, 1fr) 42px;
    gap: 7px;
    padding: 0 8px;
  }

  .event-banner {
    top: 54px;
    font-size: 10px;
  }

  .trickster-warning {
    top: 54px;
    font-size: 9px;
  }

  .draft-overlay h2 {
    font-size: 20px;
  }

  .draft-overlay > p:not(.section-kicker) {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-jester,
  .hero-trickster,
  .hero-ticket,
  .hero-cursor,
  .target--mimic .jester-art {
    animation: none;
  }
}

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

.app-shell.is-playing {
  width: min(100% - 40px, 1500px);
}

.play-screen {
  position: static;
  left: auto;
  width: 100%;
  max-width: none;
  margin: 31px auto 0;
  transform: none;
}

@media (max-width: 620px) {
  .app-shell.is-playing {
    width: min(100% - 28px, 520px);
  }
}

@media (max-width: 420px) {
  .app-shell.is-playing {
    width: min(100% - 22px, 380px);
  }
}