:root {
  --felt: #efe3cf;
  --felt-deep: #e4d3b6;
  --felt-shadow: #c9b394;
  --stitch: #c4a57c;
  --stitch-light: #ead9be;
  --ink: #5c4636;
  --ink-soft: #7a6250;
  --cream: #f7efe2;
  --sage: #8aa076;
  --sage-deep: #6f855c;
  --sage-stitch: #d7e2c8;
  --wood-dark: #7a4e28;
  --wood-mid: #c49a5a;
  --wood-light: #e6c384;
  --coral: #e07a6a;
  --mustard: #e8b63a;
  --sage-disc: #7fa86a;
  --blue: #6e98b8;
  --plum: #9a6b8c;
  --teal: #4f8f88;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --disc-w: 68px;
  --disc-h: 38px;
  --pole-w: 14px;
  --stack-step: 24px;
  --lift: 46px;
  --cap: 4;
  --hole: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #d9c4a8;
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", "Trebuchet MS", "Nunito", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.felt-board {
  position: relative;
  width: min(100%, 430px);
  min-height: 100dvh;
  min-height: 100svh;
  padding: calc(14px + var(--safe-top)) 18px calc(18px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--felt);
  background-image:
    url("felt-noise.png"),
    url("felt-noise.png"),
    radial-gradient(ellipse at 50% 0%, rgba(255, 252, 245, 0.4), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(180, 140, 90, 0.16), transparent 52%);
  background-size: 160px 160px, 220px 220px, auto, auto;
  background-position: 0 0, 80px 40px, 0 0, 0 0;
  background-blend-mode: multiply, multiply, normal, normal;
  box-shadow: 0 0 0 1px rgba(140, 110, 70, 0.12);
}

.stitch-frame {
  pointer-events: none;
  position: absolute;
  inset: calc(8px + var(--safe-top) * 0.15) 10px calc(8px + var(--safe-bottom) * 0.15);
  border: 2px dashed var(--stitch);
  border-radius: 36px;
  box-shadow: inset 0 0 0 6px rgba(239, 227, 207, 0.01);
}

.top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}

.wordmark {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}

.level-badge {
  min-width: 168px;
  padding: 10px 28px 12px;
  background:
    url("felt-noise.png"),
    linear-gradient(180deg, #9aaf86 0%, var(--sage) 46%, var(--sage-deep) 100%);
  background-size: 180px 180px, auto;
  border-radius: 22px;
  box-shadow:
    0 3px 0 var(--sage-deep),
    0 6px 0 rgba(90, 70, 40, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.22);
  position: relative;
}

.level-badge::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.6px dashed var(--sage-stitch);
  border-radius: 16px;
  pointer-events: none;
}

.level-text {
  display: block;
  text-align: center;
  color: var(--cream);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-shadow: 0 2px 0 #5f734e;
  position: relative;
  z-index: 1;
}

.moves {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.coach {
  margin: 8px 22px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  min-height: 2.6em;
}

.coach.is-quiet {
  color: var(--ink-soft);
}

.stage {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 6px 0;
  min-height: 0;
}

.pegs {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  width: 100%;
  flex: 0 1 auto;
  height: min(420px, calc(100% - 8px));
  min-height: calc(var(--stack-step) * var(--cap) + var(--lift) + 90px);
}

.pegs[data-count="5"] { --disc-w: 68px; --disc-h: 38px; --pole-w: 14px; --stack-step: 25px; --hole: 18px; }
.pegs[data-count="6"] { --disc-w: 58px; --disc-h: 34px; --pole-w: 13px; --stack-step: 23px; --hole: 16px; }
.pegs[data-count="7"] { --disc-w: 50px; --disc-h: 30px; --pole-w: 12px; --stack-step: 21px; --hole: 15px; --lift: 40px; }
.pegs[data-count="8"] { --disc-w: 44px; --disc-h: 28px; --pole-w: 11px; --stack-step: 19px; --hole: 14px; --lift: 36px; }

.peg {
  position: relative;
  flex: 1 1 0;
  max-width: 76px;
  height: 100%;
  cursor: pointer;
  touch-action: manipulation;
  isolation: isolate;
}

.peg:focus-visible {
  outline: 2px dashed var(--ink-soft);
  outline-offset: 4px;
  border-radius: 16px;
}

.pole {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: var(--pole-w);
  height: calc(100% - 10px);
  margin-left: calc(var(--pole-w) / -2);
  z-index: 2;
  pointer-events: none;
  border-radius: 7px 7px 3px 3px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 2px,
      rgba(80, 50, 20, 0.05) 2px 3px
    ),
    linear-gradient(
      90deg,
      var(--wood-dark) 0%,
      var(--wood-mid) 22%,
      var(--wood-light) 48%,
      var(--wood-mid) 74%,
      var(--wood-dark) 100%
    );
  box-shadow:
    inset 0 2px 0 rgba(255, 240, 210, 0.35),
    0 0 0 1px rgba(80, 50, 20, 0.18);
}

.pole::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: calc(var(--pole-w) + 4px);
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #efd7a8, var(--wood-mid) 55%, var(--wood-dark));
  box-shadow: 0 1px 0 rgba(80, 50, 20, 0.25);
}

.discs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  top: 0;
  pointer-events: none;
}

.disc-shadow,
.disc-back,
.disc-front {
  position: absolute;
  left: 50%;
  width: var(--disc-w);
  height: var(--disc-h);
  margin-left: calc(var(--disc-w) / -2);
  bottom: calc(var(--i) * var(--stack-step));
  pointer-events: none;
  transition: bottom 0.28s cubic-bezier(0.22, 0.8, 0.28, 1);
}

.disc-shadow {
  left: calc(50% + 4px);
  width: calc(var(--disc-w) - 8px);
  margin-left: calc((var(--disc-w) - 8px) / -2);
  z-index: 1;
  border-radius: 50%;
  box-shadow:
    0 3px 0 color-mix(in srgb, var(--felt-color) 62%, #4a2a18),
    0 5px 8px rgba(60, 30, 15, 0.2);
}

.disc-back,
.disc-front {
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 46%,
      transparent calc(var(--hole) / 2 - 1px),
      rgba(40, 20, 10, 0.18) calc(var(--hole) / 2),
      transparent calc(var(--hole) / 2 + 3px)
    ),
    url("felt-noise.png"),
    url("felt-noise.png"),
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.22) 0 18%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(40, 20, 10, 0.2) 0 42%, transparent 72%),
    repeating-linear-gradient(112deg, transparent 0 2px, rgba(255, 255, 255, 0.1) 2px 3px),
    var(--felt-color);
  background-size: auto, 90px 90px, 140px 140px, auto, auto, auto, auto;
  background-position: 0 0, 0 0, 20px 12px, 0 0, 0 0, 0 0, 0 0;
  background-blend-mode: normal, multiply, overlay, normal, normal, normal, normal;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 0 rgba(0, 0, 0, 0.12);
  -webkit-mask-image: radial-gradient(
    circle at 50% 46%,
    transparent calc(var(--hole) / 2),
    #000 calc(var(--hole) / 2 + 1.5px)
  );
  mask-image: radial-gradient(
    circle at 50% 46%,
    transparent calc(var(--hole) / 2),
    #000 calc(var(--hole) / 2 + 1.5px)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.disc-back {
  z-index: 1;
}

.disc-front {
  z-index: 3;
  -webkit-clip-path: inset(48% 0 0 0);
  clip-path: inset(48% 0 0 0);
}

.disc-shadow.coral, .disc-back.coral, .disc-front.coral { --felt-color: var(--coral); }
.disc-shadow.mustard, .disc-back.mustard, .disc-front.mustard { --felt-color: var(--mustard); }
.disc-shadow.sage, .disc-back.sage, .disc-front.sage { --felt-color: var(--sage-disc); }
.disc-shadow.blue, .disc-back.blue, .disc-front.blue { --felt-color: var(--blue); }
.disc-shadow.plum, .disc-back.plum, .disc-front.plum { --felt-color: var(--plum); }
.disc-shadow.teal, .disc-back.teal, .disc-front.teal { --felt-color: var(--teal); }

.disc-shadow.lifted,
.disc-back.lifted,
.disc-front.lifted {
  bottom: calc(100% - var(--disc-h) - 22px);
}

.peg.hint-from .pole,
.peg.hint-to .pole {
  box-shadow:
    inset 0 2px 0 rgba(255, 240, 210, 0.35),
    0 0 0 3px var(--cream),
    0 0 0 5px var(--sage-deep);
}

.peg.hint-from,
.peg.hint-to {
  border-radius: 18px;
}

.peg.just-complete .discs {
  animation: stitch-pop 0.45s ease;
}

.peg.just-complete .complete-stitch {
  opacity: 1;
}

.complete-stitch {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: calc(var(--disc-w) + 14px);
  height: calc(var(--stack-step) * 3 + var(--disc-h) + 10px);
  transform: translateX(-50%);
  border: 2px dashed var(--stitch);
  border-radius: 40px 40px 18px 18px;
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  transition: opacity 0.2s linear;
}

@keyframes stitch-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.peg.refuse .lifted {
  animation: refuse-nudge 0.28s ease;
}

@keyframes refuse-nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
}

.shelf {
  height: 18px;
  margin: 0 10px;
  border-radius: 4px 4px 10px 10px;
  background:
    url("felt-noise.png"),
    linear-gradient(180deg, #f3e7d3 0%, var(--felt-deep) 60%, #dcc7a6 100%);
  background-size: 180px 180px, auto;
  box-shadow:
    0 3px 0 var(--felt-shadow),
    0 5px 0 rgba(90, 70, 40, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  position: relative;
  z-index: 6;
}

.shelf::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 5px;
  border-top: 1.6px dashed var(--stitch);
  opacity: 0.9;
}

.controls {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 22px 8px 8px;
}

.felt-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #8a6748;
  background:
    url("felt-noise.png"),
    linear-gradient(180deg, #f6ecdc 0%, var(--felt) 55%, #e2d1b6 100%);
  background-size: 160px 160px, auto;
  box-shadow:
    0 3px 0 #c9b394,
    0 6px 0 rgba(90, 70, 40, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.45);
  position: relative;
}

.felt-btn::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1.7px dashed var(--stitch);
  border-radius: 50%;
  pointer-events: none;
}

.felt-btn-green {
  color: var(--cream);
  background:
    url("felt-noise.png"),
    linear-gradient(180deg, #9aaf86 0%, var(--sage) 48%, var(--sage-deep) 100%);
  background-size: 160px 160px, auto;
  box-shadow:
    0 3px 0 var(--sage-deep),
    0 6px 0 rgba(90, 70, 40, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.22);
}

.felt-btn-green::after {
  border-color: var(--sage-stitch);
}

.felt-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 var(--felt-shadow),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.felt-btn-green:active {
  box-shadow:
    0 1px 0 var(--sage-deep),
    inset 0 2px 0 rgba(255, 255, 255, 0.18);
}

.felt-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.felt-btn-wide {
  width: auto;
  min-width: 168px;
  height: 56px;
  border-radius: 28px;
  padding: 0 28px;
  color: var(--cream);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 #5f734e;
}

.felt-btn-wide::after {
  border-radius: 22px;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(70, 48, 30, 0.38);
}

.modal.hidden { display: none; }

.modal-card {
  position: relative;
  width: min(100%, 320px);
  padding: 32px 24px 24px;
  text-align: center;
  border-radius: 28px;
  background:
    url("felt-noise.png"),
    linear-gradient(180deg, #f6ecdc 0%, var(--felt) 60%, var(--felt-deep) 100%);
  background-size: 200px 200px, auto;
  box-shadow:
    0 4px 0 var(--felt-shadow),
    0 10px 18px rgba(60, 30, 15, 0.22);
  color: var(--ink);
}

.modal-stitch {
  position: absolute;
  inset: 10px;
  border: 2px dashed var(--stitch);
  border-radius: 20px;
  pointer-events: none;
}

.modal-card h2 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}

.modal-card p {
  margin: 0 0 22px;
  font-size: 16px;
  color: var(--ink);
  position: relative;
  z-index: 1;
}

.modal-card .felt-btn {
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

@media (max-height: 700px) {
  .level-text { font-size: 24px; }
  .felt-btn { width: 64px; height: 64px; }
  .controls { gap: 16px; padding-top: 14px; }
  .pegs[data-count="5"] { --disc-w: 60px; --disc-h: 34px; --stack-step: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .disc-shadow, .disc-back, .disc-front { transition: none; }
  .peg.just-complete .discs,
  .peg.refuse .lifted { animation: none; }
}