:root {
  --ivory: #f0eadc;
  --ivory-dim: rgba(240, 234, 220, .58);
  --ink: #1e221c;
  --ink-dim: rgba(30, 34, 28, .55);
  --chalk: #6f9a12;
  --chalk-bright: #c8ff3d;
  --red: #e64b3b;
  --green: #238b63;
  --black: #e8dfcc;
  --glass: rgba(7, 10, 9, .42);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--black);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  touch-action: none;
  user-select: none;
}

button {
  color: inherit;
  font: inherit;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.game {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  background: #e8dfcc;
}

#game-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  touch-action: none;
  user-select: none;
}

.hud {
  position: absolute;
  z-index: 5;
  top: max(18px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  right: max(20px, env(safe-area-inset-right));
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 16px;
  pointer-events: none;
}

.run-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  animation: none;
}

.score-cluster {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 18px;
}

.checkout {
  min-width: 0;
  text-align: right;
  animation: none;
}

.checkout > span,
.now-score span {
  display: block;
  color: var(--ink-dim);
  font-size: .94rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.checkout strong {
  display: block;
  margin-top: -2px;
  color: var(--chalk);
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}

.checkout strong.is-hit { color: #3f5c08; }

.now-score {
  min-width: 44px;
  text-align: right;
}

.now-score b {
  display: block;
  margin-top: -1px;
  color: var(--ink);
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}

#lives-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.life-icon {
  width: clamp(24px, 6vw, 34px);
  height: clamp(24px, 6vw, 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  transition: color .2s ease, opacity .2s ease;
}

.life-icon svg { width: 88%; height: 88%; }

.life-icon.lost {
  color: rgba(30, 34, 28, .18);
}

#lives-wrap.last-life .life-icon:not(.lost) {
  animation: none;
}

.throw-ui {
  position: absolute;
  z-index: 5;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(19px, env(safe-area-inset-bottom));
  pointer-events: none;
}

.darts-left { text-align: center; }

.throw-feedback {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  width: min(88vw, 360px);
  min-height: 1.2em;
  padding: 9px 14px;
  border: 1px solid rgba(30, 34, 28, .12);
  border-radius: 999px;
  background: rgba(240, 234, 220, .86);
  color: var(--ink);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .11em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}

.throw-feedback:not(:empty) { opacity: 1; }
.throw-feedback.is-hit {
  background: rgba(200, 255, 61, .9);
  color: #172006;
}
.throw-feedback.is-miss {
  background: rgba(230, 75, 59, .9);
  color: #fff8f0;
}

.throw-btn {
  --charge: 0;
  --size: clamp(76px, 20vw, 88px);
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 0;
  right: auto;
  bottom: auto;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #10130d;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(.94);
  transition:
    opacity .22s var(--ease),
    visibility .22s ease,
    transform .22s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  will-change: left, top;
}

.throw-btn.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.throw-btn.is-awaiting-aim {
  opacity: .42;
  pointer-events: none;
  transform: translate(-50%, 0) scale(.96);
}

.throw-btn.is-awaiting-aim .throw-btn__fill {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 42%),
    rgba(214, 220, 196, .92);
  box-shadow:
    0 8px 18px rgba(30, 34, 28, .1),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}

.throw-btn.is-awaiting-aim .throw-btn__label {
  letter-spacing: .18em;
  font-size: .58rem;
}

.throw-btn:disabled {
  cursor: default;
}

.aim-hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: min(72vw, 220px);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 0);
  transition: opacity .22s var(--ease), visibility .22s ease;
  will-change: left, top;
}

.aim-hint.is-visible {
  visibility: visible;
  opacity: 1;
}

.aim-hint__dot {
  display: none;
}

.aim-hint__text {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(16, 19, 13, .72);
  color: var(--ivory);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(16, 19, 13, .18);
}

.throw-btn__ring,
.throw-btn__fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.throw-btn__ring {
  background:
    conic-gradient(
      from -90deg,
      var(--chalk-bright) calc(var(--charge) * 1%),
      rgba(30, 34, 28, .14) 0
    );
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}

.throw-btn__fill {
  inset: 7px;
  border: 1px solid rgba(30, 34, 28, .12);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 42%),
    #d7ef6a;
  box-shadow:
    0 10px 24px rgba(30, 34, 28, .16),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: background .15s ease, transform .15s var(--ease);
}

.throw-btn__label {
  position: relative;
  z-index: 1;
  display: block;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
}

.throw-btn.is-charging {
  transform: translate(-50%, 0) scale(1.04);
}

.throw-btn.is-charging .throw-btn__fill {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 42%),
    var(--chalk-bright);
  transform: scale(.96);
}

.throw-btn.is-charging .throw-btn__label {
  letter-spacing: .1em;
}

.darts-left > span {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-dim);
  font-size: .94rem;
  font-weight: 800;
  letter-spacing: .18em;
}
.darts-left > span b {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 1.17rem;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

#darts { display: flex; justify-content: center; gap: 7px; }
#darts i {
  display: block;
  width: 20px;
  height: 4px;
  border-radius: 3px;
  background: var(--ink);
  box-shadow: none;
  transition: opacity .25s ease;
}
#darts i.is-used { opacity: .16; }

.overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  color: var(--ivory);
  background: radial-gradient(circle at 50% 40%, rgba(13, 18, 15, .66), rgba(5, 7, 6, .94));
  backdrop-filter: blur(6px);
  transition: opacity .4s ease, visibility .4s ease;
}

.overlay.is-visible { visibility: visible; opacity: 1; pointer-events: auto; }
.overlay__content { width: min(100%, 510px); text-align: center; }
.overlay__content > * { opacity: 1; }

.eyebrow { color: var(--chalk-bright); font-size: .66rem; font-weight: 850; letter-spacing: .28em; }
.overlay h1 { margin: 7px 0 2px; font-size: clamp(5.7rem, 27vw, 10rem); letter-spacing: -.085em; line-height: .86; }
.lede { color: rgba(240, 234, 220, .66); font-size: clamp(.92rem, 3.6vw, 1.15rem); letter-spacing: .02em; }

.how-to {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 8vw, 70px);
  margin: 35px 0 30px;
  padding: 17px 0;
  border-top: 1px solid rgba(240, 234, 220, .14);
  border-bottom: 1px solid rgba(240, 234, 220, .14);
}
.how-to span { color: rgba(240, 234, 220, .7); font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.how-to b { margin-right: 4px; color: var(--chalk-bright); }

.primary-button {
  position: relative;
  min-width: 220px;
  min-height: 54px;
  padding: 0 28px;
  overflow: hidden;
  border: 1px solid var(--chalk-bright);
  border-radius: 0;
  background: var(--chalk-bright);
  color: #10130d;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .18em;
  cursor: pointer;
  transition: color .22s ease, transform .22s var(--ease);
}
.primary-button::before { content: ""; position: absolute; inset: 0; background: #10130d; transform: translateX(-102%); transition: transform .25s var(--ease); }
.primary-button span { position: relative; z-index: 1; }
.primary-button:hover { color: var(--chalk-bright); }
.primary-button:hover::before { transform: translateX(0); }
.primary-button:active { opacity: .86; }

.overlay__content--over h2 { margin: 12px 0 26px; color: var(--ivory); font-size: clamp(4.8rem, 24vw, 8rem); letter-spacing: -.08em; line-height: .82; }
.overlay__content--over h2 small { display: block; margin-top: 15px; color: var(--ivory-dim); font-size: .65rem; letter-spacing: .26em; }
.final-line { display: flex; justify-content: center; gap: 34px; margin-bottom: 30px; color: var(--ivory-dim); font-size: .61rem; font-weight: 750; letter-spacing: .13em; }
.final-line b { margin-left: 7px; color: var(--ivory); font-size: .86rem; }

#play-btn { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@media (max-width: 620px) {
  .hud { top: max(14px, env(safe-area-inset-top)); left: 14px; right: 14px; }
  .score-cluster { gap: 14px; }
  .throw-ui { left: 16px; }
  .throw-feedback { bottom: max(18px, env(safe-area-inset-bottom)); }
  .throw-btn { --size: 80px; }
  .how-to { gap: 34px; }
  .how-to span { max-width: 120px; line-height: 1.45; }
  .how-to b { display: block; margin-bottom: 3px; }
}

@media (min-width: 600px) {
  .throw-btn {
    --size: clamp(96px, 12vw, 108px);
  }
  .throw-btn__fill { inset: 8px; }
  .throw-btn__label { font-size: .72rem; letter-spacing: .15em; }
}

@media (min-width: 700px) {
  .hud {
    top: max(28px, env(safe-area-inset-top));
    left: max(32px, env(safe-area-inset-left));
    right: max(32px, env(safe-area-inset-right));
  }

  .run-stats { gap: 12px; }
  .score-cluster { gap: 28px; }
  .checkout > span,
  .now-score span { font-size: 1.14rem; letter-spacing: .2em; }
  .checkout strong,
  .now-score b { font-size: clamp(3rem, 5.5vw, 4.6rem); }

  #lives-wrap { gap: 8px; }
  .life-icon {
    width: clamp(42px, 5.2vw, 56px);
    height: clamp(42px, 5.2vw, 56px);
  }

  .throw-ui {
    left: max(32px, env(safe-area-inset-left));
    bottom: max(28px, env(safe-area-inset-bottom));
  }
  .throw-btn {
    --size: 112px;
  }
  .throw-btn__fill { inset: 9px; }
  .throw-btn__label { font-size: .8rem; letter-spacing: .16em; }
  .darts-left > span { margin-bottom: 12px; font-size: 1.14rem; letter-spacing: .2em; }
  .darts-left > span b { font-size: 1.3rem; }
  #darts { gap: 12px; }
  #darts i { width: 32px; height: 6px; border-radius: 4px; }

  .overlay { padding: 40px; }
  .overlay__content { width: min(100%, 640px); }
  .eyebrow { font-size: .85rem; letter-spacing: .3em; }
  .lede { font-size: clamp(1.1rem, 2.4vw, 1.35rem); }
  .how-to { gap: clamp(40px, 8vw, 90px); margin: 44px 0 38px; padding: 22px 0; }
  .how-to span { font-size: .85rem; }
  .primary-button {
    min-width: 280px;
    min-height: 64px;
    padding: 0 36px;
    font-size: .8rem;
    letter-spacing: .2em;
  }
  .overlay__content--over h2 small { margin-top: 18px; font-size: .8rem; }
  .final-line { gap: 42px; font-size: .78rem; }
  .final-line b { font-size: 1.05rem; }
}

@media (min-width: 900px) {
  .score-cluster { gap: 34px; }
  .checkout > span,
  .now-score span { font-size: 1.27rem; }
  .checkout strong,
  .now-score b { font-size: clamp(3.4rem, 4.8vw, 5.2rem); }
  .life-icon { width: 56px; height: 56px; }
  .darts-left > span { font-size: 1.27rem; }
  .darts-left > span b { font-size: 1.43rem; }
  #darts i { width: 38px; height: 7px; }
  .throw-btn { --size: 124px; }
  .throw-btn__fill { inset: 10px; }
  .throw-btn__label { font-size: .86rem; letter-spacing: .17em; }
}

/* Larger tablet touch targets: keep iPhone landscape on the compact layout. */
@media (min-width: 700px) and (min-height: 700px) and (pointer: coarse) {
  .darts-left > span { font-size: 1.71rem; }
  .darts-left > span b { font-size: 1.95rem; }
  #lives-wrap { gap: 5px; }
  .life-icon {
    width: clamp(28px, 4vw, 38px);
    height: clamp(28px, 4vw, 38px);
  }
}

@media (max-height: 610px) and (orientation: landscape) {
  .game { min-height: 0; }
  .overlay h1 { font-size: 5rem; }
  .how-to { margin: 18px 0; padding: 10px 0; }
  .primary-button { min-height: 46px; }
  .checkout strong,
  .now-score b { font-size: 2.2rem; }
}

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