/* Tokens: character-design-system.md §6 */
:root {
  --color-primary: #FF2D8A;
  --color-secondary: #00C4B4;
  --color-accent: #00C853;
  --color-deep: #C2185B;
  --color-bg: #FFF0F5;
  --color-surface: #FFE4EC;
  --color-text: #1A1A1A;
  --color-muted: #8A6A75;
  --color-white: #FFFFFF;
  --color-lavender: #F8E1F0;
  --color-peach: #FFD6C9;
  --color-plum: #9C1D5A;

  --font-heading: 'Poppins', 'Nunito', system-ui, sans-serif;
  --font-body: 'Inter', 'DM Sans', system-ui, sans-serif;
  --font-accent: 'Fredoka', 'Comfortaa', cursive;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(194, 24, 91, 0.06);
  --shadow-md: 0 4px 20px rgba(194, 24, 91, 0.1);
  --shadow-lg: 0 8px 30px rgba(194, 24, 91, 0.15);
  --shadow-pink: 0 4px 14px rgba(255, 45, 138, 0.35);

  --nav-h: 64px;
  /* Everything in the wheel column that isn't the wheel (nav, paddings, spin
     row, status line). The wheel gets the rest of the window height, so it is
     never below the fold. */
  --wheel-chrome: 250px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 45, 138, 0.12), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(0, 196, 180, 0.10), transparent 40%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

h1, h2 { font-family: var(--font-heading); margin: 0; }
h2 { font-size: clamp(1.4rem, 4vw, 1.75rem); font-weight: 700; line-height: 1.2; color: var(--color-deep); }

.muted { color: var(--color-muted); }
.small { font-size: 0.875rem; }
.err { color: var(--color-deep); font-weight: 500; min-height: 1.6em; margin: var(--space-2) 0 0; }

/* ---------- Top nav ---------- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 8px 16px;
  justify-content: center;
  background: rgba(255, 240, 245, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 45, 138, 0.12);
  box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex-shrink: 0; }
.brand img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  padding: 2px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 4px 14px rgba(255, 45, 138, 0.35);
}
.brand-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-deep);
  white-space: nowrap;
}
.brand-name span { color: var(--color-primary); }
.nav-status {
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
  font-family: var(--font-accent);
  font-size: 1.05rem;
  color: var(--color-plum);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.host-tag { font-size: 1.25rem; line-height: 1; }

/* ---------- Layout: code | wheel on desktop, stacked on mobile ---------- */
.layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  grid-template-areas:
    "result wheel"
    "code   wheel"
    "steps  wheel"
    "foot   foot";
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
}
.code-panel   { grid-area: code; }
.wheel-card   { grid-area: wheel; }
.result-panel { grid-area: result; }
.steps-panel  { grid-area: steps; }
.footer       { grid-area: foot; text-align: center; }
/* Onlookers have no code/steps: wheel left, result right. */
body[data-role="viewer"] .layout { grid-template-areas: "result wheel" ". wheel" "foot foot"; }

.layout-host {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  grid-template-areas: none;
  grid-template-rows: none;
}

/* ---------- Cards ---------- */
.card {
  background: rgba(255, 228, 236, 0.85);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 45, 138, 0.12);
  text-align: center;
  position: relative;
  min-width: 0;
}
.panel-title { font-size: 1.35rem; }
.code-panel > p { margin: var(--space-2) 0 var(--space-4); }

/* ---------- Buttons ---------- */
.btn-primary {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: linear-gradient(135deg, #FF2D8A 0%, #C2185B 100%);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-md);
  border: none;
  box-shadow: var(--shadow-pink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary::after { /* glossy overlay */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 20px rgba(255, 45, 138, 0.45); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-primary:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; }
.btn-primary:disabled { filter: saturate(0.5) brightness(1.05); cursor: wait; transform: none; }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: #00968A;
  border: 2px solid var(--color-secondary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-secondary:hover { background: var(--color-secondary); color: var(--color-white); }
.btn-secondary:disabled { opacity: 0.55; cursor: wait; background: transparent; color: #00968A; }
.btn-secondary:focus-visible, .btn-ghost:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.btn-ghost {
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-muted);
  border: 1px solid rgba(194, 24, 91, 0.15);
  font-family: var(--font-heading);
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.btn-ghost:hover { color: var(--color-deep); background: var(--color-white); }

.btn-big { font-size: 1.2rem; padding: 1.05rem 2.4rem; border-radius: var(--radius-full); white-space: nowrap; }
.btn-sm { font-size: 0.875rem; padding: 0.5rem 1rem; border-radius: var(--radius-full); white-space: nowrap; }

/* Spin button breathes when a spin is ready. */
.btn-primary.ready { animation: ready 1.6s ease-in-out infinite; }
@keyframes ready {
  50% { box-shadow: 0 0 0 8px rgba(255, 45, 138, 0.18), 0 6px 26px rgba(255, 45, 138, 0.55); }
}

/* ---------- Code panel ---------- */
.code-box {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease;
}
.code-box:hover { transform: scale(1.02); }
.code-box:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; }
#code-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  letter-spacing: 0.05em;
  color: var(--color-deep);
  user-select: all;
  white-space: nowrap;
}
.copy-hint { font-size: 0.8rem; color: var(--color-muted); }
.throne-btn { width: 100%; text-align: center; border-radius: var(--radius-full); }

.steps {
  text-align: left;
  margin: var(--space-3) 0 0;
  padding-left: 1.4rem;
}
.steps li { margin-bottom: var(--space-2); }
.steps li::marker { color: var(--color-primary); font-family: var(--font-heading); font-weight: 700; }
.steps-panel .small { margin: var(--space-2) 0 0; text-align: left; }

/* ---------- Wheel ---------- */
.wheel-card { display: grid; justify-items: center; padding-top: 28px; }
.wheel-wrap {
  position: relative;
  width: min(100%, calc(100dvh - var(--wheel-chrome)), 640px);
  min-width: 240px;
  aspect-ratio: 1;
  filter: drop-shadow(0 14px 30px rgba(194, 24, 91, 0.35));
}
.wheel-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }

.face {
  transform-box: fill-box;
  transform-origin: center;
}
.label {
  font-family: var(--font-heading);
  font-weight: 800;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgba(94, 15, 55, 0.55);
  stroke-width: 2.4px;
  letter-spacing: 0.02em;
}
.jackpot-label { fill: #FFFDF0; }

/* Marquee bulbs: two groups alternate; faster while spinning. */
.bulb { fill: #FFE9F3; }
.bulb.a { animation: bulb 1.2s steps(1) infinite; }
.bulb.b { animation: bulb 1.2s steps(1) infinite 0.6s; }
.spinning .bulb.a, .spinning .bulb.b { animation-duration: 0.24s; }
.spinning .bulb.b { animation-delay: 0.12s; }
.won-jackpot .bulb { fill: #7CFFB2; animation-duration: 0.3s; }
@keyframes bulb {
  0%   { fill: #FFFFFF; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #FF7FB8); }
  50%  { fill: #FF9CC8; filter: none; }
}

/* Pointer: a glossy pin at 12 o'clock that flicks when a peg passes it. */
.pointer {
  position: absolute;
  top: -4%;
  left: 50%;
  width: 11%;
  aspect-ratio: 0.8;
  transform: translateX(-50%);
  transform-origin: 50% 20%;
  z-index: 3;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFE4EC 40%, #FF2D8A 100%);
  clip-path: polygon(50% 100%, 0 28%, 12% 6%, 50% 0, 88% 6%, 100% 28%);
  filter: drop-shadow(0 3px 3px rgba(94, 15, 55, 0.5));
}
.pointer.flick { animation: flick 140ms ease-out; }
@keyframes flick {
  40% { transform: translateX(-50%) rotate(-16deg); }
}

/* Hub: the pfp stays upright while the face turns underneath. */
.hub {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 27%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-full);
  padding: 4px;
  background: linear-gradient(135deg, #fff, var(--color-primary) 60%, var(--color-plum));
  box-shadow: 0 4px 14px rgba(94, 15, 55, 0.5), inset 0 0 0 2px rgba(255,255,255,0.6);
  z-index: 2;
}
.hub img { width: 100%; height: 100%; border-radius: var(--radius-full); object-fit: cover; display: block; }
.won .hub, .won-jackpot .hub { animation: pop 600ms cubic-bezier(.3,1.6,.5,1); }
@keyframes pop {
  40% { transform: translate(-50%, -50%) scale(1.18); }
}

.won-jackpot { animation: jackpot-glow 1.4s ease-in-out 3; }
@keyframes jackpot-glow {
  50% { filter: drop-shadow(0 0 40px rgba(0, 200, 83, 0.75)); }
}

/* Confetti, launched from the wheel centre. */
.confetto {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  z-index: 4;
  pointer-events: none;
  animation: burst var(--d) cubic-bezier(.15,.7,.35,1) forwards;
}
@keyframes burst {
  0%   { transform: translate(-50%, -50%) rotate(0) scale(0.4); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 260px)) rotate(var(--r)) scale(1); opacity: 0; }
}

.spin-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.credits {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-muted);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.credits[data-n]:not([data-n="0"]) { background: var(--color-accent); color: var(--color-white); }
.status { min-height: 1.6em; margin: var(--space-2) 0 0; }

/* ---------- Result ---------- */
.result-panel { display: grid; align-content: center; min-height: 9rem; }
.result {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.3,1.5,.5,1);
}
.result:not(.show) { display: none; }
.result.show { opacity: 1; transform: none; animation: result-in 0.45s cubic-bezier(.3,1.5,.5,1); }
@keyframes result-in { from { opacity: 0; transform: translateY(8px) scale(0.92); } }
.result.show ~ .result-empty { display: none; }
.result-empty { margin: 0; font-family: var(--font-accent); }
.result-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3.25rem;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--color-primary), var(--color-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.result-line { font-family: var(--font-accent); font-size: 1.2rem; color: var(--color-plum); }

.history-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.history { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; justify-content: center; }
.history li {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-deep);
  box-shadow: var(--shadow-sm);
}
.history li.jp { background: var(--color-accent); color: var(--color-white); }
.history-row:has(.history:empty) { display: none; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 30;
  max-width: calc(100vw - 32px);
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #FF2D8A, #C2185B);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  box-shadow: var(--shadow-pink);
  transform: translate(-50%, 150%);
  opacity: 0;
  pointer-events: none;
}
.toast.show { animation: toast 4s ease forwards; }
@keyframes toast {
  0%   { transform: translate(-50%, 150%); opacity: 0; }
  8%, 85% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, 150%); opacity: 0; }
}

/* ---------- Host page ---------- */
.host-list { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-3); text-align: left; }
.host-item {
  display: grid;
  gap: 2px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.host-item > a, .host-item > button { justify-self: start; margin-top: var(--space-2); }
.host-item > a + button { margin-top: var(--space-1); }
.host-code { font-family: var(--font-heading); font-weight: 700; color: var(--color-deep); }
.host-meta { font-size: 0.875rem; color: var(--color-muted); }
.host-msg { font-family: var(--font-accent); color: var(--color-plum); }

/* ---------- Mobile: one column, wheel right under a compact code strip ---------- */
@media (max-width: 899px) {
  :root { --nav-h: 56px; --wheel-chrome: 300px; }

  .topnav { gap: var(--space-3); padding: 6px 12px; flex-wrap: wrap; }
  .brand img { width: 38px; height: 38px; }
  .brand-name { font-size: 1.15rem; }
  .nav-status { font-size: 0.9rem; }
  .nav-actions .btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
  /* Host: status drops to its own line so the buttons fit. */
  .nav-actions:not([hidden]) ~ .nav-status,
  .nav-status:has(~ .nav-actions:not([hidden])) { order: 3; flex-basis: 100%; }

  .layout {
    padding: 12px 12px 24px;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "code" "wheel" "result" "steps" "foot";
    grid-template-rows: none;
  }
  body[data-role="viewer"] .layout { grid-template-areas: "wheel" "result" "foot"; }
  .card { padding: 14px; border-radius: var(--radius-lg); }

  /* Code strip: code box + Throne button side by side. */
  .code-panel:not(.start-panel) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
  }
  .code-panel:not(.start-panel) .panel-title { display: none; }
  .code-panel .code-box { margin: 0; padding: var(--space-2) var(--space-3); }
  #code-text { font-size: 1.3rem; }
  .code-panel .throne-btn { width: auto; padding: 0.85rem 1.1rem; font-size: 0.95rem; }

  .start-panel > p.muted { font-size: 0.9rem; }
  .start-panel .btn-big { width: 100%; }

  .wheel-card { padding-top: 22px; }
  .wheel-wrap { min-width: 0; width: min(100%, calc(100dvh - var(--wheel-chrome)), 520px); }
  .spin-row { margin-top: var(--space-4); }
  .btn-big { font-size: 1.1rem; padding: 0.95rem 1.6rem; }
  .result-panel { min-height: 0; }
}

@media (max-width: 380px) {
  .code-panel .throne-btn { font-size: 0; padding: 0.85rem 1rem; }
  .code-panel .throne-btn::before { content: 'Throne 💋'; font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bulb.a, .bulb.b, .won-jackpot, .won .hub, .btn-primary.ready { animation: none !important; }
}

/* Long/short label pairs: full text on desktop, short on phones. */
.sm { display: none; }
@media (max-width: 899px) {
  .lg { display: none; }
  .sm { display: inline; }
  .host-tag { display: none; }

  /* Spin count rides in the wheel card's corner so the Spin button has the row. */
  .wheel-card .credits { position: absolute; top: 10px; right: 10px; font-size: 0.8rem; z-index: 5; }

  /* Home: just the button — the wheel is the star. */
  .start-panel { padding: 12px; }
  .start-panel .panel-title, .start-panel > p.muted { display: none; }
  .start-panel .err:empty { display: none; }
}

/* Host/onlooker views have no Spin button: don't leave its gap. */
.spin-row:has(#spin-btn[hidden]) { margin-top: var(--space-3); }
@media (max-width: 899px) {
  .spin-row:has(#spin-btn[hidden]) { margin-top: 0; }
  .status:empty { min-height: 0; margin: 0; }
}

/* Centered top bar: when the status drops to its own row on phones, centre it too. */
@media (max-width: 899px) {
  .nav-status { text-align: center; }
}

/* Home keeps its "Start a session" call to action on top. */
@media (min-width: 900px) {
  .layout:has(.start-panel) { grid-template-areas: "code wheel" "result wheel" ". wheel" "foot foot"; }
}