/* Hero tool. Stable grid for the controls, wild decoration around them. */

.tool {
  position: relative;
  overflow: hidden;
  border-bottom: var(--bw) solid var(--foreground);
}

.tool .wrap {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "copy" "ask" "wheel" "controls" "result";
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 40px;
}

@media (min-width: 900px) {
  .tool .wrap {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    grid-template-areas:
      "copy     wheel"
      "ask      wheel"
      "controls wheel"
      "result   wheel";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 64px;
    row-gap: 24px;
    padding-top: 64px;
    padding-bottom: 80px;
  }
}

.t-copy { grid-area: copy; }
.t-ask { grid-area: ask; }
.t-wheel { grid-area: wheel; }
.t-controls { grid-area: controls; }
.t-result { grid-area: result; }

/* ---------- Decoration ---------- */

.deco { position: absolute; z-index: 0; pointer-events: none; }
.deco-sun {
  width: 560px; height: 560px; left: -220px; top: -250px;
  border-radius: var(--r-full); background: var(--tertiary);
}
.deco-shape { fill: none; stroke: var(--foreground); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.deco-tri { width: 64px; left: 46%; top: 70px; transform: rotate(12deg); }
.deco-tri path { fill: var(--secondary); }
.deco-ring { width: 46px; left: 42%; bottom: 70px; }
.deco-ring circle { stroke: var(--accent); stroke-width: 6; fill: none; }
.deco-squiggle { width: 120px; right: 5%; bottom: 36px; }
.deco-squiggle path { stroke: var(--quaternary); stroke-width: 6; fill: none; stroke-linecap: round; }
.deco-square { width: 34px; right: 6%; top: 40px; transform: rotate(18deg); }
.deco-square rect { fill: var(--accent); }

@media (max-width: 899px) {
  .deco-tri, .deco-ring, .deco-squiggle, .deco-square { display: none; }
  .deco-sun { width: 180px; height: 180px; left: -100px; top: -100px; }
}

/* ---------- Copy ---------- */

.t-copy h1 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.441rem, 5.2vw, 3.815rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.t-copy .lede { margin: 0; max-width: 42ch; font-size: var(--fs-md); line-height: 1.55; font-weight: 500; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 6px 14px 6px 6px;
  background: var(--card); border: var(--bw) solid var(--foreground); border-radius: var(--r-full);
  box-shadow: var(--pop-active);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.badge .icon-dot { width: 26px; height: 26px; border-width: 1.5px; }
.badge .icon-dot .icon { width: 14px; height: 14px; }

@media (max-width: 899px) {
  .badge { display: none; }
  .t-copy .lede { font-size: var(--fs-base); }
}

/* ---------- Question input ---------- */

.field-label {
  display: block; margin-bottom: 8px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.field-label span { font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--muted-fg); }
.input {
  width: 100%; min-height: 52px; padding: 12px 16px;
  background: var(--input); color: var(--foreground);
  border: var(--bw) solid var(--input-border); border-radius: var(--r-sm);
  box-shadow: 4px 4px 0 0 transparent;
  font: 500 1.0625rem/1.3 var(--font-body);
  transition: border-color var(--t-bounce), box-shadow var(--t-bounce);
}
.input::placeholder { color: var(--muted-fg); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 4px 4px 0 0 var(--accent); }

/* ---------- Mode switch and spin ---------- */

.t-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }

.mode {
  display: inline-flex; gap: 4px; margin: 0; padding: 4px;
  background: var(--card); border: var(--bw) solid var(--foreground); border-radius: var(--r-full);
}
.mode legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px;
  border: var(--bw) solid transparent; border-radius: var(--r-full);
  font-size: 0.95rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background var(--t-bounce);
}
.mode label:hover { background: var(--muted); }
.mode input:checked + label { background: var(--tertiary); border-color: var(--foreground); }
.mode input:focus-visible + label { outline: 3px solid var(--ring); outline-offset: 2px; }

.spin-btn { min-width: 210px; min-height: 60px; padding: 12px 28px; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800; }
.spin-btn .btn-icon { width: 40px; height: 40px; }

.icon-btn {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  background: var(--card); color: var(--foreground);
  border: var(--bw) solid var(--foreground); border-radius: var(--r-full);
  box-shadow: var(--pop-active); cursor: pointer;
  transition: transform var(--t-bounce), background var(--t-bounce);
}
.icon-btn:hover { background: var(--tertiary); transform: rotate(-8deg) scale(1.06); }
.icon-btn-2 { right: 58px; }
.icon-btn[aria-pressed="false"] { background: var(--muted); color: var(--muted-fg); }

/* Sets stepper */
.sets {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 16px;
  background: var(--card); border: var(--bw) solid var(--foreground); border-radius: var(--r-full);
}
.sets-label { font-size: 0.95rem; font-weight: 700; margin-right: 4px; }
.sets-btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: var(--bw) solid var(--foreground); border-radius: var(--r-full);
  background: var(--tertiary); color: var(--foreground); cursor: pointer;
  transition: transform var(--t-bounce), background var(--t-bounce);
}
.sets-btn .icon { width: 18px; height: 18px; }
.sets-btn:hover:not(:disabled) { transform: scale(1.1) rotate(-6deg); }
.sets-btn:active:not(:disabled) { transform: scale(0.94); }
.sets-btn:disabled { background: var(--muted); color: var(--muted-fg); border-color: var(--input-border); cursor: not-allowed; }
.sets-val {
  min-width: 1.6em; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); font-variant-numeric: tabular-nums;
}
.sets-note { margin: 0; flex: 1 1 200px; font-size: 0.85rem; line-height: 1.4; color: var(--muted-fg); }

.hint { margin: 0; flex-basis: 100%; font-size: 0.85rem; color: var(--muted-fg); }
.hint kbd {
  padding: 1px 7px; border: 1.5px solid var(--foreground); border-radius: 6px;
  background: var(--card); box-shadow: 1px 1px 0 var(--foreground);
  font: 700 0.75rem/1.4 var(--font-body); color: var(--foreground);
}

@media (max-width: 899px) {
  .t-controls { justify-content: center; }
  .spin-btn { flex: 1 1 100%; }
  .mode { order: 2; }
  .sets { order: 3; }
  .sets-note { order: 4; flex-basis: 100%; text-align: center; }
  .hint { display: none; }
}

/* ---------- Wheel ---------- */

.t-wheel { position: relative; margin: 0; align-self: center; }

.dial {
  position: relative;
  width: min(100%, 500px);
  margin: 0 auto;
  aspect-ratio: 224 / 226;
}
@media (max-width: 899px) { .dial { width: min(100%, 300px); } }

.dial svg { display: block; width: 100%; height: 100%; overflow: visible; }

.dial { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.dial:active { cursor: grabbing; }

/* Rotation is driven frame by frame from decide.js, so no CSS transition. */
#wheel-rot { transform-box: fill-box; transform-origin: center; }

.segment { transition: opacity 350ms ease; }
.dial.has-winner .segment:not(.is-winner) { opacity: 0.28; }

/* Idle pointer bob, an invitation to spin. Stops after the first spin. */
.dial.is-idle .pointer-bob { animation: bob 1.1s var(--bounce) infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.dial:hover .rim { stroke-width: 5; }

.seg { stroke: var(--foreground); stroke-width: 2; stroke-linejoin: round; }
.dial.is-dense .seg { stroke-width: 1.1; }
.seg-yes { fill: var(--yes); }
.seg-no { fill: var(--no); }
.seg-maybe { fill: var(--maybe); }
.seg-tex { stroke: none; pointer-events: none; }
.pat-stripe line { stroke: var(--card); stroke-width: 3; opacity: 0.45; }
.pat-dot circle { fill: var(--card); opacity: 0.55; }

.seg-label {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em;
  fill: var(--foreground); text-anchor: middle; dominant-baseline: central;
}

.rim { fill: none; stroke: var(--foreground); stroke-width: 3.5; }
.rim-shadow { fill: var(--foreground); }
.wheel-base { fill: var(--background); }
.hub { fill: var(--card); stroke: var(--foreground); stroke-width: 3; }
.hub-dot { fill: var(--accent); stroke: var(--foreground); stroke-width: 2; }
.pointer { fill: var(--accent); stroke: var(--foreground); stroke-width: 2.5; stroke-linejoin: round; }

/* ---------- Centre SPIN button ----------
   Fixed at the hub while the wheel turns underneath, like a real prize
   wheel. The answer sticker sits above it after a spin. */

.hub-spin {
  position: absolute; left: 50%; top: 49.56%; z-index: 2;
  width: 23%; aspect-ratio: 1;
  display: grid; place-items: center; padding: 0;
  transform: translate(-50%, -50%);
  background: var(--accent); color: var(--accent-fg);
  border: 3px solid var(--foreground); border-radius: var(--r-full);
  box-shadow: 0 4px 0 0 var(--foreground), inset 0 0 0 5px rgba(255, 255, 255, 0.22);
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  font-size: clamp(0.95rem, 2.6vw, 1.35rem);
  cursor: pointer;
  transition: transform var(--t-bounce), box-shadow var(--t-bounce), background var(--t-bounce);
}
.hub-spin:hover { transform: translate(-50%, -50%) scale(1.08); }
.hub-spin:active { transform: translate(-50%, -50%) scale(0.95); box-shadow: 0 1px 0 0 var(--foreground), inset 0 0 0 5px rgba(255, 255, 255, 0.22); }
.hub-spin:disabled { cursor: progress; transform: translate(-50%, -50%); }
.dial.is-idle .hub-spin { animation: hub-pulse 1.6s ease-in-out infinite; }
@keyframes hub-pulse {
  0%, 100% { box-shadow: 0 4px 0 0 var(--foreground), 0 0 0 0 rgba(139, 92, 246, 0.45); }
  50% { box-shadow: 0 4px 0 0 var(--foreground), 0 0 0 12px rgba(139, 92, 246, 0); }
}
.tool.is-fs .hub-spin { font-size: min(3.2vh, 3.4vw); }

/* ---------- Result sticker on the hub ---------- */

.stamp {
  position: absolute; left: 50%; top: 50%;
  width: 38%; aspect-ratio: 1;
  display: grid; place-items: center;
  border: 3px solid var(--foreground);
  box-shadow: 5px 5px 0 0 var(--foreground);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 6.4vw, 3.2rem); letter-spacing: -0.01em; color: var(--foreground);
  transform: translate(-50%, -50%) rotate(-8deg) scale(0);
  visibility: hidden; pointer-events: none; z-index: 3;
}
.stamp.is-yes { background: var(--yes); border-radius: var(--r-full); }
.stamp.is-no { background: var(--no); border-radius: var(--r-lg); transform: translate(-50%, -50%) rotate(6deg) scale(0); }
.stamp.is-maybe { background: var(--maybe); border-radius: var(--r-bubble); font-size: clamp(1.3rem, 4.6vw, 2.2rem); }

.stamp.is-shown { visibility: visible; animation: pop-stamp 520ms var(--bounce) forwards; }
.stamp.is-no.is-shown { animation-name: pop-stamp-no; }

@keyframes pop-stamp {
  from { transform: translate(-50%, -50%) rotate(-30deg) scale(0); }
  to   { transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}
@keyframes pop-stamp-no {
  from { transform: translate(-50%, -50%) rotate(30deg) scale(0); }
  to   { transform: translate(-50%, -50%) rotate(6deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .stamp.is-shown { transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  .stamp.is-no.is-shown { transform: translate(-50%, -50%) rotate(6deg) scale(1); }
}

/* ---------- Session tally ---------- */

.tally {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 20px;
  font-size: 0.85rem; font-weight: 600;
}
.tally .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; background: var(--card);
  border: var(--bw) solid var(--foreground); border-radius: var(--r-full);
}
.tally .sw { width: 12px; height: 12px; border: 1.5px solid var(--foreground); border-radius: var(--r-full); }
.tally .sw-no { border-radius: 3px; }
.tally .sw-maybe { border-radius: 6px 6px 6px 0; }
.tally a.pill { text-decoration: none; background: var(--muted); }
.tally a.pill:hover { background: var(--tertiary); color: var(--foreground); }

@media (max-width: 899px) {
  .tally { margin-top: 10px; }
  .tally a.pill { display: none; }
}

/* ---------- Result card and reaction ---------- */

.t-result { padding: 30px 22px 20px; min-height: 140px; }
.t-result .idle { margin: 0; color: var(--muted-fg); font-weight: 500; }
.verdict { margin: 0 0 6px; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; }
.verdict .q { display: block; margin-bottom: 2px; font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--muted-fg); }

.react { margin-top: 14px; }
.react .ask { margin: 0 0 10px; font-weight: 700; }
.react-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 8px 18px; font-size: 0.95rem; }
.chip[aria-pressed="true"], .chip[aria-pressed="true"]:hover { background: var(--accent); color: var(--accent-fg); box-shadow: var(--pop-active); transition: none; }
.reading { margin: 14px 0 0; line-height: 1.6; }

.share-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: var(--bw) dashed var(--border); }
.btn-sm { min-height: 46px; padding: 8px 18px; font-size: 0.95rem; }
.btn-primary.btn-sm .btn-icon { width: 30px; height: 30px; margin-right: -10px; }
.btn-primary.btn-sm .btn-icon .icon { width: 15px; height: 15px; }

.t-result.bump { animation: bump 450ms var(--bounce); }
@keyframes bump {
  0% { transform: scale(0.96); }
  60% { transform: scale(1.02) rotate(-0.5deg); }
  100% { transform: none; }
}

.streak {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0 2px; padding: 10px 14px;
  border: var(--bw) dashed var(--foreground); border-radius: var(--r-md);
  background: var(--background); font-size: 0.95rem; line-height: 1.45;
}
.streak .icon-dot { width: 34px; height: 34px; }
.streak .icon-dot .icon { width: 17px; height: 17px; }

/* ---------- Flick hint ---------- */

.flick-hint { position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: opacity 300ms ease, transform 300ms var(--bounce); }
.flick-hint.is-out { opacity: 0; transform: scale(0.9); }
.flick-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flick-arc .arc { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 11; animation: arc-run 900ms linear infinite; }
.flick-arc .arc-head { fill: var(--accent); stroke: var(--foreground); stroke-width: 2; stroke-linejoin: round; }
@keyframes arc-run { to { stroke-dashoffset: -12; } }

.flick-pill {
  position: absolute; right: -6%; bottom: 6%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px 6px 6px;
  background: var(--tertiary); color: var(--foreground);
  border: var(--bw) solid var(--foreground); border-radius: var(--r-full);
  box-shadow: var(--pop);
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; white-space: nowrap;
  transform: rotate(-7deg);
  animation: pill-bob 1.3s var(--bounce) infinite alternate;
}
.flick-pill .hand {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--card); border: var(--bw) solid var(--foreground); border-radius: var(--r-full);
}
.flick-pill .hand .icon { width: 19px; height: 19px; animation: hand-swipe 1.3s ease-in-out infinite; }
@keyframes pill-bob { from { transform: rotate(-7deg) translateY(0); } to { transform: rotate(-4deg) translateY(-5px); } }
@keyframes hand-swipe {
  0%, 100% { transform: translate(-3px, 2px) rotate(-14deg); }
  50% { transform: translate(3px, -2px) rotate(12deg); }
}
@media (max-width: 899px) {
  .flick-pill { right: -4%; bottom: 2%; font-size: 0.95rem; }
}

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 120; }

/* ---------- Full screen view ----------
   .is-fs is set on .tool both for the real Fullscreen API and for the
   overlay fallback (iPhone), so one set of rules drives both. */

.fs-title { display: none; }

.tool.is-fs {
  position: fixed; inset: 0; z-index: 100;
  overflow-y: auto; border: 0;
  background-color: var(--background);
}
.tool.is-fs .wrap {
  max-width: none; min-height: 100%;
  grid-template-columns: 1fr;
  grid-template-areas: "copy" "wheel" "controls";
  grid-template-rows: auto auto auto;
  justify-items: center; align-content: center;
  row-gap: 18px; padding: 28px var(--gutter) 32px;
}
.tool.is-fs .t-ask, .tool.is-fs .t-result, .tool.is-fs .badge, .tool.is-fs .lede,
.tool.is-fs h1, .tool.is-fs .hint, .tool.is-fs .sets-note, .tool.is-fs .deco-tri,
.tool.is-fs .deco-ring, .tool.is-fs .deco-square, .tool.is-fs #fs-toggle { display: none; }
.tool.is-fs .t-copy { text-align: center; max-width: 90vw; }
.tool.is-fs .fs-title {
  display: block; margin: 0;
  font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 4.6vh, 3.4rem);
}
.tool.is-fs .t-wheel { width: 100%; }
.tool.is-fs .dial { width: min(66vh, 88vw); }
.tool.is-fs .stamp { font-size: min(8vh, 9vw); }
.tool.is-fs .stamp.is-maybe { font-size: min(5.6vh, 6.4vw); }
.tool.is-fs .t-controls { justify-content: center; }
.tool.is-fs .spin-btn { flex: 0 0 auto; }
.tool.is-fs .icon-btn { top: 4px; }
.tool.is-fs .tally a.pill { display: none; }

.fs-exit {
  display: none;
  position: fixed; top: 16px; right: 16px; z-index: 110;
  align-items: center; gap: 8px; min-height: 46px; padding: 6px 16px 6px 6px;
  background: var(--card); color: var(--foreground);
  border: var(--bw) solid var(--foreground); border-radius: var(--r-full); box-shadow: var(--pop-active);
  font: 700 0.92rem/1 var(--font-body); cursor: pointer;
}
.fs-exit .icon-dot { width: 34px; height: 34px; background: var(--secondary); }
.fs-exit .icon-dot .icon { width: 16px; height: 16px; }
.tool.is-fs .fs-exit { display: inline-flex; }
@media (max-width: 899px) { .tool.is-fs .fs-exit .fs-exit-label { display: none; } .fs-exit { padding-right: 6px; } }

/* Toasts are moved inside .tool while it is full screen, keep them on top. */
.tool.is-fs .sticker-toast, .tool.is-fs .toast { z-index: 130; }