:root {
  --ink: #14181d;
  --paper: #fffdf5;
  --red: #ef2636;
  --green: #139954;
  --white: #f5f6f1;
  --black: #20252b;
  --yellow: #ffd72d;
  --sky: #dce8ea;
}

* { box-sizing: border-box; }

html,
body {
  min-width: 300px;
  margin: 0;
  background: transparent;
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.game {
  position: relative;
  overflow: hidden;
  width: min(100%, 620px);
  aspect-ratio: 4 / 5;
  min-height: 500px;
  margin: 0 auto;
  border: 2px solid #e5e5e1;
  border-radius: 16px;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.98) 0 32%, rgba(229,237,237,.92) 70%, rgba(202,215,217,.94) 100%),
    var(--paper);
  box-shadow: inset 0 0 42px rgba(20,24,29,.08);
  font-family: "Trebuchet MS", "Avenir Next", sans-serif;
  isolation: isolate;
  user-select: none;
}

.game::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .11;
  background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,.06) 5px);
}

.hud {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 10.5%;
  min-height: 52px;
  padding: 0 4.2%;
  border-bottom: 2px solid var(--ink);
  background: rgba(255,253,245,.94);
  z-index: 10;
}

.hud-score span {
  display: block;
  color: #77736c;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .15em;
}

.hud-score strong {
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 1.05rem;
  letter-spacing: .04em;
}

.status-pill {
  min-width: 142px;
  padding: 7px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-align: center;
  background: var(--yellow);
  box-shadow: 2px 3px 0 var(--ink);
  font-size: clamp(.55rem, 1.7vw, .68rem);
  font-weight: 900;
  letter-spacing: .09em;
}

.reset-button {
  justify-self: end;
  padding: 7px 10px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  color: var(--ink);
  background: white;
  box-shadow: 2px 3px 0 var(--ink);
  font-size: .62rem;
  font-weight: 900;
  cursor: pointer;
}

.reset-button:active { transform: translate(2px, 2px); box-shadow: none; }

.playfield {
  position: relative;
  height: 89.5%;
  isolation: isolate;
}

.target-mark {
  position: absolute;
  border: 2px dashed rgba(20,24,29,.16);
  border-radius: 50%;
  pointer-events: none;
}

.target-mark-a { top: 18%; left: 25%; width: 55%; aspect-ratio: 1; }
.target-mark-b { top: 31%; left: 37%; width: 32%; aspect-ratio: 1; }

.balloon-grid {
  position: absolute;
  top: 29%;
  right: 4.2%;
  left: 15.5%;
  display: grid;
  grid-template-columns: repeat(var(--columns, 8), 1fr);
  grid-template-rows: repeat(var(--rows, 3), 1fr);
  gap: clamp(4px, 1.2vw, 8px) clamp(2px, .7vw, 5px);
  z-index: 4;
}

.playfield.has-right-darts .balloon-grid {
  right: 15.5%;
  left: 4.2%;
}

.dart-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
}

.heart-meter {
  position: absolute;
  top: 3.2%;
  right: 3.2%;
  display: flex;
  gap: 5px;
  align-items: center;
  min-height: 36px;
  padding: 5px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 3px 4px 0 var(--ink);
  z-index: 9;
}

.heart-meter i {
  color: var(--red);
  font-family: Georgia, serif;
  font-size: clamp(1rem, 4vw, 1.4rem);
  font-style: normal;
  line-height: 1;
  text-shadow: 1px 2px 0 var(--ink);
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.heart-meter i.is-lost {
  color: #929aa2;
  opacity: 1;
  text-shadow: 1px 1px 0 white;
  transform: scale(.9);
}

.heart-meter i.is-breaking { animation: heart-break 520ms ease both; }

.heart-meter b {
  min-width: 27px;
  margin-left: 2px;
  padding-left: 6px;
  border-left: 2px solid var(--ink);
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: .72rem;
  letter-spacing: .04em;
}

.balloon {
  position: relative;
  width: 100%;
  aspect-ratio: .92;
  border: clamp(2px, .55vw, 4px) solid var(--ink);
  border-radius: 50% 48% 46% 52%;
  background: var(--balloon-color);
  box-shadow:
    inset 7px -7px rgba(0,0,0,.18),
    inset -5px 5px rgba(255,255,255,.18),
    2px 3px 0 rgba(20,24,29,.22);
  transform: rotate(var(--tilt, -2deg));
  transform-origin: 50% 110%;
}

.balloon:nth-child(3n) { --tilt: 2deg; }
.balloon:nth-child(4n) { --tilt: -4deg; }
.balloon-red { --balloon-color: var(--red); }
.balloon-black { --balloon-color: var(--black); }
.balloon-white { --balloon-color: var(--white); }
.balloon-green { --balloon-color: var(--green); }

.balloon i {
  position: absolute;
  top: 17%;
  left: 22%;
  width: 22%;
  height: 18%;
  border-radius: 50%;
  background: rgba(255,255,255,.62);
  transform: rotate(-28deg);
}

.balloon b {
  position: absolute;
  top: 96%;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--ink);
  border-left: 5px solid transparent;
  transform: translateX(-50%);
}

.balloon b::after {
  position: absolute;
  top: 7px;
  left: -1px;
  width: 1px;
  height: clamp(8px, 2vw, 14px);
  content: "";
  background: rgba(20,24,29,.42);
}

.balloon.is-popping { animation: balloon-pop 220ms cubic-bezier(.2,.8,.3,1) forwards; }
.balloon.is-popped { visibility: hidden; }
.balloon.is-blocked { animation: balloon-blocked 460ms ease both; }

.dart-control {
  --dart-color: var(--red);
  --angle: 0deg;
  --travel: clamp(270px, 76vw, 470px);
  position: absolute;
  width: clamp(43px, 12vw, 63px);
  height: clamp(42px, 12vw, 63px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  z-index: 7;
}

.dart-control:disabled { cursor: default; }
.dart-control:not(:disabled):hover .dart-shape { filter: drop-shadow(0 0 6px rgba(255,215,45,.9)); }
.dart-control:not(:disabled):active .dart-shape { transform: rotate(var(--angle)) scale(.88); }

.dart-left { --angle: 0deg; }
.dart-right { --angle: 180deg; }
.dart-top { --angle: 90deg; }
.dart-bottom { --angle: -90deg; }

.dart-control[data-color="black"] .dart-shape {
  filter: drop-shadow(0 0 2px white) drop-shadow(2px 3px 0 rgba(20,24,29,.35));
}

.dart-control[data-color="white"] .dart-shape {
  filter: drop-shadow(0 0 2px var(--ink)) drop-shadow(2px 3px 0 rgba(20,24,29,.28));
}

.dart-right {
  width: clamp(52px, 14vw, 72px);
  height: clamp(48px, 13vw, 67px);
}

.dart-right .dart-shape {
  left: -2px;
  width: 108%;
  filter: drop-shadow(0 0 2px white) drop-shadow(2px 3px 0 var(--ink));
}

.dart-right .dart-shape i {
  top: 6px;
  height: 8px;
  border-width: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 2px white;
}

.dart-right .dart-shape em,
.dart-right .dart-shape em::after {
  width: 20px;
  height: 12px;
}

.dart-shape {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 100%;
  height: 20px;
  filter: drop-shadow(2px 3px 0 rgba(20,24,29,.25));
  transform: translateY(-50%) rotate(var(--angle));
  transform-origin: center;
}

.dart-shape i {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 66%;
  height: 5px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--dart-color);
}

.dart-shape b {
  position: absolute;
  top: 4px;
  right: -1px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 13px solid #e8edf0;
  filter: drop-shadow(2px 0 0 var(--ink));
}

.dart-shape em,
.dart-shape em::after {
  position: absolute;
  left: 0;
  width: 17px;
  height: 10px;
  border: 2px solid var(--ink);
  content: "";
  background: var(--dart-color);
  transform: skewX(28deg) rotate(-13deg);
}

.dart-shape em { top: 0; }
.dart-shape em::after { top: 10px; left: -3px; transform: skewX(-28deg) rotate(21deg); }

.dart-control.is-shooting .dart-shape {
  animation: dart-flight 430ms cubic-bezier(.35,.02,.65,.98) forwards;
}

.dart-control.is-wrong-shot .dart-shape {
  animation: wrong-dart-stop 850ms cubic-bezier(.27,.04,.25,1) forwards;
}

.feedback {
  position: absolute;
  top: 17%;
  left: 50%;
  color: var(--green);
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(1.4rem, 7vw, 2.6rem);
  letter-spacing: .04em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px) rotate(-3deg);
  z-index: 12;
}

.feedback.is-error { color: var(--red); }
.feedback.is-visible { animation: feedback-pop 800ms ease both; }

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  padding: 6%;
  background: rgba(12,18,29,.8);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 30;
}

.overlay.is-visible { opacity: 1; pointer-events: auto; }

.overlay::before,
.overlay::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 135%;
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.08) 0deg 7deg, transparent 7deg 18deg);
  transform: translate(-50%,-50%);
  animation: result-rays 20s linear infinite;
}

.overlay::after {
  width: 78%;
  border: 3px dashed rgba(255,255,255,.2);
  border-radius: 50%;
  background: none;
  animation-direction: reverse;
  animation-duration: 13s;
}

.overlay.is-loss::before {
  background: repeating-conic-gradient(from 0deg, rgba(239,38,54,.17) 0deg 7deg, transparent 7deg 18deg);
}

.result-card {
  position: relative;
  width: min(88%, 350px);
  padding: clamp(52px, 12vw, 64px) clamp(20px, 5vw, 27px) clamp(20px, 5vw, 26px);
  border: 4px solid var(--ink);
  border-radius: 25px;
  text-align: center;
  background: linear-gradient(160deg, #fff173 0 18%, #ffd52d 19% 100%);
  box-shadow: 8px 10px 0 var(--ink), 0 20px 60px rgba(0,0,0,.42);
  transform: rotate(-1deg) scale(.86);
  z-index: 3;
}

.overlay.is-visible .result-card { animation: result-card-in 520ms cubic-bezier(.18,.9,.23,1.35) forwards; }

.result-card::before {
  position: absolute;
  inset: 9px;
  border: 2px dashed rgba(20,24,29,.25);
  border-radius: 17px;
  content: "";
  pointer-events: none;
}

.result-card.is-loss {
  width: min(74%, 285px);
  padding: 43px 17px 18px;
  background: linear-gradient(#fff,#edf2f8);
  box-shadow: 7px 8px 0 var(--ink), 0 18px 55px rgba(0,0,0,.42);
}

.result-card.is-loss::before { border-color: rgba(20,24,29,.18); border-style: solid; }

.result-icon {
  position: absolute;
  top: -35px;
  left: 50%;
  display: grid;
  width: clamp(64px,17vw,78px);
  height: clamp(64px,17vw,78px);
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50% 44% 51% 46%;
  color: white;
  background: var(--green);
  box-shadow: 4px 5px 0 var(--ink);
  font-size: clamp(1.9rem,7vw,2.6rem);
  font-weight: 900;
  transform: translateX(-50%) rotate(7deg);
  z-index: 4;
}

.is-loss .result-icon { top: -29px; width: 60px; height: 60px; background: var(--red); font-size: 2rem; }

.result-card h1 {
  position: relative;
  margin: 0;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(3.1rem,13vw,4.7rem);
  line-height: .88;
  letter-spacing: .015em;
  text-shadow: 3px 3px 0 rgba(255,255,255,.68);
  z-index: 2;
}

.result-card.is-loss h1 { color: #34435d; font-size: clamp(2.15rem,9vw,3rem); text-shadow: none; }

.result-balloons {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 94px;
  margin: 13px 0 17px;
}

.mini-balloon {
  position: relative;
  display: block;
  width: clamp(42px,11vw,55px);
  aspect-ratio: .9;
  border: 3px solid var(--ink);
  border-radius: 50% 48% 46% 52%;
  background: var(--mini-color);
  box-shadow: inset 6px -6px rgba(0,0,0,.16), 3px 4px 0 var(--ink);
  transform: translateY(var(--mini-y,0)) rotate(-5deg);
}

.mini-balloon::after {
  position: absolute;
  top: 96%;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--ink);
  border-left: 5px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.mini-balloon.red { --mini-color: var(--red); --mini-y: 7px; }
.mini-balloon.green { --mini-color: var(--green); transform: rotate(4deg); }
.mini-balloon.white { --mini-color: var(--white); --mini-y: 7px; }
.is-loss .result-balloons { display: none; }

.play-again {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  padding: 0 12px 0 22px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  color: white;
  background: var(--green);
  box-shadow: 4px 5px 0 var(--ink);
  font-weight: 900;
  letter-spacing: .07em;
  cursor: pointer;
  z-index: 2;
}

.play-again b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: white;
}

.play-again:active { transform: translate(3px,4px); box-shadow: 1px 1px 0 var(--ink); }
.is-loss .play-again { min-height: 46px; padding-left: 18px; background: var(--red); box-shadow: 3px 4px 0 var(--ink); font-size: .78rem; }
.is-loss .play-again b { width: 27px; height: 27px; }

.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.overlay.is-loss .confetti { display: none; }

.confetti i {
  position: absolute;
  top: -12%;
  left: calc(var(--x,50) * 1%);
  width: 9px;
  height: 20px;
  border: 2px solid var(--ink);
  background: var(--confetti,var(--yellow));
  opacity: 0;
  transform: rotate(var(--r,15deg));
}

.is-visible .confetti i { animation: confetti-fall 1.9s ease-out forwards; }
.confetti i:nth-child(1) { --x:7; --r:20deg; --confetti:#ef2636; animation-delay:.05s; }
.confetti i:nth-child(2) { --x:15; --r:-40deg; --confetti:#139954; animation-delay:.28s; }
.confetti i:nth-child(3) { --x:24; --r:70deg; --confetti:#ffd72d; animation-delay:.12s; }
.confetti i:nth-child(4) { --x:34; --r:-15deg; --confetti:#fff; animation-delay:.4s; }
.confetti i:nth-child(5) { --x:43; --r:33deg; --confetti:#ef2636; animation-delay:.2s; }
.confetti i:nth-child(6) { --x:52; --r:-62deg; --confetti:#139954; animation-delay:.5s; }
.confetti i:nth-child(7) { --x:61; --r:10deg; --confetti:#ffd72d; animation-delay:.08s; }
.confetti i:nth-child(8) { --x:69; --r:48deg; --confetti:#fff; animation-delay:.35s; }
.confetti i:nth-child(9) { --x:76; --r:-28deg; --confetti:#ef2636; animation-delay:.18s; }
.confetti i:nth-child(10) { --x:83; --r:66deg; --confetti:#139954; animation-delay:.45s; }
.confetti i:nth-child(11) { --x:90; --r:-12deg; --confetti:#ffd72d; animation-delay:.1s; }
.confetti i:nth-child(12) { --x:96; --r:37deg; --confetti:#fff; animation-delay:.31s; }

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

@keyframes dart-flight {
  0% { opacity: 1; transform: translateY(-50%) rotate(var(--angle)) translateX(0); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50%) rotate(var(--angle)) translateX(var(--travel)); }
}

@keyframes wrong-dart-stop {
  0% { opacity: 1; transform: translateY(-50%) rotate(var(--angle)) translateX(0); }
  45% { opacity: 1; transform: translateY(-50%) rotate(var(--angle)) translateX(var(--wrong-travel)); }
  56% { transform: translateY(-50%) rotate(var(--angle)) translateX(calc(var(--wrong-travel) - 7px)); }
  66% { transform: translateY(-50%) rotate(var(--angle)) translateX(var(--wrong-travel)); }
  82% { opacity: 1; transform: translateY(-50%) rotate(var(--angle)) translateX(var(--wrong-travel)); }
  100% { opacity: 0; transform: translateY(-50%) rotate(var(--angle)) translateX(calc(var(--wrong-travel) - 18px)); }
}

@keyframes heart-break {
  0% { color: var(--red); opacity: 1; transform: scale(1); }
  35% { color: var(--red); opacity: 1; transform: scale(1.35) rotate(-12deg); }
  100% { color: #929aa2; opacity: 1; transform: scale(.9) rotate(10deg); }
}

@keyframes balloon-pop {
  0% { opacity: 1; transform: rotate(var(--tilt)) scale(1); }
  55% { opacity: 1; transform: rotate(var(--tilt)) scale(1.27); }
  100% { opacity: 0; transform: rotate(18deg) scale(.08); }
}

@keyframes balloon-blocked {
  0%,100% { transform: translateX(0) rotate(var(--tilt)); }
  22% { transform: translateX(-7px) rotate(-8deg); }
  45% { transform: translateX(7px) rotate(8deg); }
  68% { transform: translateX(-5px) rotate(-6deg); }
}

@keyframes feedback-pop {
  0% { opacity: 0; transform: translate(-50%,12px) scale(.7) rotate(-3deg); }
  24%,70% { opacity: 1; transform: translate(-50%,0) scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%,-13px) scale(1.06) rotate(-3deg); }
}

@keyframes result-card-in {
  0% { opacity: 0; transform: translateY(35px) rotate(-4deg) scale(.72); }
  70% { opacity: 1; transform: translateY(-5px) rotate(1deg) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) rotate(-1deg) scale(1); }
}

@keyframes result-rays { to { transform: translate(-50%,-50%) rotate(360deg); } }

@keyframes confetti-fall {
  0% { opacity: 0; transform: translateY(-10px) rotate(var(--r)); }
  12% { opacity: 1; }
  100% { opacity: .9; transform: translateY(700px) rotate(calc(var(--r) + 480deg)); }
}

@media (max-width: 420px) {
  .game { min-height: 460px; border-radius: 10px; }
  .status-pill { min-width: 120px; padding-inline: 8px; }
  .balloon-grid { top: 31%; right: 3.2%; left: 16%; }
  .playfield.has-right-darts .balloon-grid { right: 16%; left: 3.2%; }
  .dart-control { width: 40px; height: 40px; }
}

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

/* Iframe sizing: preserve the game ratio while respecting short and narrow frames. */
html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  background: var(--sky);
}

.ambient-scene-copy {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 0 !important;
  margin: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: blur(12px) saturate(.84) brightness(.94);
  opacity: .38;
  pointer-events: none !important;
  transform-origin: center;
  user-select: none;
}

.ambient-scene-copy--left { left: 12% !important; transform: translate(-50%, -50%) scale(1.12) rotate(-3deg); }
.ambient-scene-copy--right { left: 88% !important; transform: translate(-50%, -50%) scale(1.12) rotate(3deg); }

.ambient-scene-copy *,
.ambient-scene-copy *::before,
.ambient-scene-copy *::after { animation-play-state: paused !important; }

@media (max-width: 700px) {
  .ambient-scene-copy--left { left: 50% !important; transform: translate(-50%, -50%) scale(1.9); }
  .ambient-scene-copy--right { display: none !important; }
}

.game {
  z-index: 1;
  width: min(100vw, 620px, 80vh);
  height: auto;
  min-height: 0;
  max-height: 100vh;
  margin: 0;
}

@supports (height: 100dvh) {
  .game {
    width: min(100vw, 620px, 80dvh);
    max-height: 100dvh;
  }
}