/* Canaan Games screen components: game cards, lobby stage, in-game HUD,
   results and celebration, plus the motion layer. Values come from tokens.css.
   Every animation sits behind prefers-reduced-motion: no-preference. */

/* ---------- Shared bits ---------- */
.eyebrow {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-label); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted);
}
.surface-stage .eyebrow[data-game] { color: var(--game-ink); }

/* ---------- Landing: sticker cluster (decorative, CSS shapes only) ---------- */
.landing-hero { display: grid; gap: 2rem; align-items: center; }
.sticker-cluster { position: relative; order: -1; width: min(100%, 22rem); height: 8.5rem; justify-self: start; margin-top: .5rem; }
.sticker-cluster span {
  position: absolute; width: 5.5rem; height: 5.5rem; border: var(--outline-width) solid var(--color-ink);
  background: var(--game-ink); box-shadow: 4px 4px 0 var(--color-ink);
}
.sticker-cluster span:nth-child(1) { left: 0; top: 1.5rem; border-radius: 22px; rotate: -9deg; }
.sticker-cluster span:nth-child(2) { left: 4rem; top: 0; border-radius: 50%; rotate: 6deg; }
.sticker-cluster span:nth-child(3) { left: 8.5rem; top: 2.2rem; border-radius: 12px 40px; rotate: -4deg; }
.sticker-cluster span:nth-child(4) { left: 12.5rem; top: .4rem; border-radius: 50% 50% 14px 14px; rotate: 10deg; }
.sticker-cluster span:nth-child(5) { left: 16.2rem; top: 2.4rem; border-radius: 18px; rotate: -12deg; width: 4.6rem; height: 4.6rem; background: var(--color-crimson); }
@media (min-width: 60rem) {
  .landing-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
  .sticker-cluster { order: 0; width: 26rem; height: 22rem; justify-self: end; margin-top: 0; }
  .sticker-cluster span { width: 9rem; height: 9rem; }
  .sticker-cluster span:nth-child(1) { left: 0; top: 4rem; }
  .sticker-cluster span:nth-child(2) { left: 8.5rem; top: 0; }
  .sticker-cluster span:nth-child(3) { left: 15.5rem; top: 5.5rem; }
  .sticker-cluster span:nth-child(4) { left: 4.5rem; top: 12rem; }
  .sticker-cluster span:nth-child(5) { left: 13.5rem; top: 14rem; width: 7rem; height: 7rem; }
}

/* ---------- Hub: code-first join bar and the create drawer ---------- */
.get-in .join-panel { margin-bottom: 1.5rem; display: grid; gap: 1rem; }
.get-in .join-panel h2 { margin: 0; }
.get-in .join-panel .compact-form + .compact-form { margin-top: 0; }
.get-in .join-panel #join-code {
  font-family: var(--font-mono); font-size: 1.375rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
}
@media (min-width: 52rem) {
  .get-in .join-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; column-gap: 1.5rem; }
  .get-in .join-panel h2 { grid-column: 1 / -1; }
}
.create-drawer { margin-top: 2.5rem; border: var(--outline-width) dashed var(--rule); border-radius: var(--radius-card); padding: .35rem clamp(1rem, 3vw, 1.35rem); }
.create-drawer > summary {
  min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600;
}
.create-drawer > summary::-webkit-details-marker { display: none; }
.create-drawer > summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.6rem; line-height: 1; }
.create-drawer[open] > summary::after { content: "\2212"; }
.create-drawer > summary small { margin-left: auto; font-family: var(--font-ui); font-size: .875rem; font-weight: 400; color: var(--muted); }

/* ---------- Game card ---------- */
.game-card { padding: 0; gap: 0; overflow: hidden; justify-content: flex-start; rotate: calc(var(--tilt) * -1); }
.game-card:nth-child(even) { rotate: var(--tilt); }
.game-card-band {
  width: 100%; padding: 1.1rem 1.25rem 1rem; background: var(--game-ink); color: var(--color-ink);
  border-bottom: var(--outline-width) solid var(--color-ink);
}
.game-card-band .eyebrow { color: var(--color-ink); }
.game-card-band h2 { margin-top: .45rem; font-size: var(--text-h3); }
.game-card-body { flex: 1; width: 100%; padding: 1.1rem 1.25rem 1.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.game-card-body p { margin: 0; color: var(--muted); }
.game-card-body .button { margin-top: auto; }

/* ---------- Lobby stage (the slots panel on a stage) ---------- */
.surface-stage .slots-panel {
  padding: clamp(1.25rem, 4vw, 2rem); border-radius: calc(var(--radius-card) + 6px);
  border: var(--outline-width) solid color-mix(in srgb, var(--game-ink) 60%, transparent);
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--game-ink) 16%, transparent), transparent 60%), var(--color-stage-raised);
}
.surface-stage .slots-panel > .section-heading { align-items: center; flex-wrap: wrap; gap: 1.25rem 2rem; }
.surface-stage .slots-panel h2 {
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted);
}
.surface-stage .slots-count { margin-top: .55rem; font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; line-height: 1.1; }
.surface-stage .slots-ready { margin-top: .45rem; font-size: 1rem; }
.surface-stage .slots-invite { align-items: center; gap: 1rem; }
.surface-stage .slots-invite .invite-key { min-width: 0; padding: 0; background: transparent; }
.surface-stage .slots-invite .invite-key strong { font-size: var(--text-display); line-height: 1; letter-spacing: .05em; color: var(--game-ink); }
.surface-stage .slots-grid { margin-top: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: .85rem; counter-reset: seat; }
.surface-stage .slot { counter-increment: seat; min-height: 80px; border-radius: var(--radius-card); }
.surface-stage .slot.filled {
  background: color-mix(in srgb, var(--color-on-stage) 8%, transparent);
  border: var(--outline-width) solid color-mix(in srgb, var(--game-ink) 75%, transparent);
}
.surface-stage .slot.filled .avatar { width: 46px; height: 46px; box-shadow: 0 0 0 3px var(--color-stage-raised), 0 0 0 5px var(--game-ink); }
.surface-stage .slot-name { font-size: 1.0625rem; }
.surface-stage .slot.empty { flex-direction: column; gap: .1rem; border-color: color-mix(in srgb, var(--color-on-stage) 24%, transparent); }
.surface-stage .slot.empty::before { content: counter(seat); font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; opacity: .55; }
.surface-stage .slot-empty-label { font-size: var(--text-caption); }
.slot-crown { font-size: 1.15rem; line-height: 1; }
@media (max-width: 43.99rem) {
  .surface-stage .slots-panel > .section-heading { align-items: flex-start; }
  .surface-stage .slots-invite { align-items: flex-start; }
  .surface-stage .slots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .surface-stage .slot.empty { min-height: 52px; flex-direction: row; gap: .4rem; }
}

/* ---------- In-game HUD ---------- */
.hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.hud-cell {
  min-width: 0; padding: .85rem 1rem; border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-on-stage) 7%, transparent); border: 1px solid var(--rule);
}
.hud-label { display: block; font-family: var(--font-mono); font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.hud-value { display: block; margin-top: .3rem; font-family: var(--font-mono); font-size: clamp(1.35rem, 1rem + 1.6vw, 2.25rem); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hud-value small { font-size: .55em; color: var(--muted); }
.hud-round .hud-value { color: var(--game-ink, var(--ink)); }
.hud-timer .hud-value { font-size: clamp(1.1rem, .85rem + 1.2vw, 1.75rem); }
.surface-stage .assignment .seed-prompt {
  max-width: 40rem; padding: 1rem 1.25rem; border-radius: 20px 20px 20px 6px;
  background: var(--game-ink); color: var(--color-ink); font-size: var(--text-lead); font-weight: 600;
}
.surface-stage .assignment > .assignment-head .waiting,
.surface-stage .assignment > .hud ~ .assignment-head .countdown { display: none; }
.surface-stage .submit-widget {
  padding: clamp(1rem, 3vw, 1.35rem); border: var(--outline-width) solid var(--panel-border);
  border-radius: var(--radius-card); background: var(--raised); box-shadow: var(--panel-shadow);
}
.surface-stage .submit-widget .drawing-surface { box-shadow: none; }
@media (max-width: 30rem) {
  .hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hud-timer { grid-column: 1 / -1; grid-row: 1; }
}

/* ---------- Results and celebration ---------- */
.surface-stage .reveal-header { position: relative; padding-top: .5rem; }
.surface-stage .reveal-header p { max-width: 60ch; }
.reveal-steps { counter-reset: step; }
.surface-stage .reveal-step { position: relative; counter-increment: step; rotate: calc(var(--tilt) * -1); }
.surface-stage .reveal-step:nth-child(even) { rotate: var(--tilt); }
.surface-stage .reveal-step > header strong::before { content: counter(step, decimal-leading-zero) "  "; font-family: var(--font-mono); color: var(--muted); white-space: pre; }
.surface-stage .reveal-step img { border: 1px solid var(--rule); }
.surface-stage .lineage > h2 { display: flex; align-items: center; gap: .75rem; }
.surface-stage .lineage > h2::before {
  content: ""; width: .9rem; height: .9rem; border-radius: 50%; background: var(--game-ink, var(--ink-default));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-ink, var(--ink-default)) 30%, transparent);
}
@media (min-width: 44rem) {
  .surface-stage .reveal-steps { gap: 2rem; }
  .surface-stage .reveal-step:not(:last-child)::after {
    content: "\2192"; position: absolute; top: 45%; right: -1.6rem; font-family: var(--font-mono); font-size: 1.4rem;
    color: var(--color-on-stage); opacity: .6; rotate: calc(var(--tilt) * 1);
  }
  .surface-stage .reveal-step:nth-child(3n)::after { content: none; }
}

/* Confetti: decorative pieces that burst once, then rest around a winner or title. */
.confetti { position: absolute; inset: -1.5rem 0 auto 0; height: 9rem; pointer-events: none; }
.confetti i { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 7px; border-radius: 2px; background: var(--c); rotate: var(--r); }
.confetti i:nth-child(1)  { --x: 4%;  --y: 18%; --r: 20deg;  --c: var(--ink-sketch-telephone); --d: 0ms; }
.confetti i:nth-child(2)  { --x: 12%; --y: 70%; --r: -35deg; --c: var(--ink-broken-tablet); --d: 60ms; }
.confetti i:nth-child(3)  { --x: 21%; --y: 8%;  --r: 60deg;  --c: var(--color-crimson); --d: 30ms; }
.confetti i:nth-child(4)  { --x: 30%; --y: 52%; --r: -10deg; --c: var(--ink-dtiys); --d: 90ms; }
.confetti i:nth-child(5)  { --x: 39%; --y: 14%; --r: 80deg;  --c: var(--ink-oc-telephone); --d: 20ms; }
.confetti i:nth-child(6)  { --x: 47%; --y: 76%; --r: 15deg;  --c: var(--ink-design-battle); --d: 120ms; }
.confetti i:nth-child(7)  { --x: 55%; --y: 4%;  --r: -60deg; --c: var(--ink-sketch-telephone); --d: 50ms; }
.confetti i:nth-child(8)  { --x: 63%; --y: 44%; --r: 40deg;  --c: var(--color-crimson); --d: 140ms; }
.confetti i:nth-child(9)  { --x: 71%; --y: 12%; --r: -25deg; --c: var(--ink-broken-tablet); --d: 70ms; }
.confetti i:nth-child(10) { --x: 79%; --y: 66%; --r: 70deg;  --c: var(--ink-dtiys); --d: 110ms; }
.confetti i:nth-child(11) { --x: 87%; --y: 20%; --r: -45deg; --c: var(--ink-oc-telephone); --d: 40ms; }
.confetti i:nth-child(12) { --x: 95%; --y: 58%; --r: 10deg;  --c: var(--ink-design-battle); --d: 160ms; }
.battle-winner .confetti { inset: -1rem 0 auto 0; }
.battle-winner:has(> .confetti)::before {
  content: ""; position: absolute; top: -30px; left: 50%; width: 64px; height: 42px; translate: -50% 0;
  background: var(--ink-sketch-telephone); filter: drop-shadow(0 3px 0 var(--color-ink));
  clip-path: polygon(0 100%, 0 25%, 25% 60%, 50% 0, 75% 60%, 100% 25%, 100% 100%);
}

/* ---------- Motion ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-stage); }

@keyframes seat-pop { from { opacity: 0; scale: .6; } 70% { opacity: 1; scale: 1.06; } to { opacity: 1; scale: 1; } }
@keyframes wake {
  0% { box-shadow: 0 var(--press-depth) 0 var(--shadow-ink), 0 0 0 0 color-mix(in srgb, var(--color-crimson) 70%, transparent); }
  70% { box-shadow: 0 var(--press-depth) 0 var(--shadow-ink), 0 0 0 16px transparent; }
  100% { box-shadow: 0 var(--press-depth) 0 var(--shadow-ink), 0 0 0 0 transparent; }
}
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
@keyframes rise-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes stamp-in { from { opacity: 0; scale: 1.25; rotate: -6deg; } 70% { opacity: 1; scale: .97; } to { opacity: 1; scale: 1; rotate: -1.5deg; } }
@keyframes confetti-burst { from { opacity: 0; translate: 0 3.5rem; scale: .2; } 60% { opacity: 1; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes crown-drop { from { opacity: 0; translate: -50% -24px; } to { opacity: 1; translate: -50% 0; } }

@media (prefers-reduced-motion: no-preference) {
  .surface-stage .slot.filled { animation: seat-pop var(--dur-pop) var(--ease-pop) both; }
  .surface-stage .slot.filled:nth-child(2) { animation-delay: 60ms; }
  .surface-stage .slot.filled:nth-child(3) { animation-delay: 120ms; }
  .surface-stage .slot.filled:nth-child(4) { animation-delay: 180ms; }
  .surface-stage .slot.filled:nth-child(5) { animation-delay: 240ms; }
  .surface-stage .slot.filled:nth-child(n+6) { animation-delay: 300ms; }
  form[action$="/start"] .button.primary:not(:disabled) { animation: wake 1.2s var(--ease-out) 400ms 2; }
  .state-your-move { animation: wiggle 600ms ease-in-out 300ms 3; }
  .game-card { transition: rotate var(--dur-pop) var(--ease-pop), translate var(--dur-pop) var(--ease-pop); }
  .game-card:hover { rotate: 0deg; translate: 0 -3px; }
  .surface-stage .reveal-step { animation: rise-in var(--dur-reveal) var(--ease-out) both; }
  .surface-stage .reveal-step:nth-child(2) { animation-delay: 140ms; }
  .surface-stage .reveal-step:nth-child(3) { animation-delay: 280ms; }
  .surface-stage .reveal-step:nth-child(4) { animation-delay: 420ms; }
  .surface-stage .reveal-step:nth-child(n+5) { animation-delay: 560ms; }
  .submitted-drawing figure { animation: stamp-in 380ms var(--ease-pop) both; }
  .confetti i { animation: confetti-burst 900ms var(--ease-pop) both; animation-delay: var(--d); }
  .battle-winner:has(> .confetti)::before { animation: crown-drop 600ms var(--ease-pop) 500ms both; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Family layer: sibling switcher, sister card, footer (joint hub overhaul) ---------- */
.site-header { flex-wrap: wrap; padding-block: .5rem; }
.sibling-switch {
  display: inline-flex; gap: .25rem; padding: .25rem;
  border: var(--outline-width) solid var(--color-ink); border-radius: var(--radius-pill);
  background: var(--color-paper-raised);
}
.sibling-link {
  padding: .35rem .95rem; border-radius: var(--radius-pill);
  font-weight: 700; font-size: var(--text-small); color: var(--color-ink); text-decoration: none;
}
.sibling-link:hover { text-decoration: underline; }
.sibling-link.is-current { background: var(--color-crimson); color: var(--color-on-crimson); }
.sibling-link.is-current:hover { text-decoration: none; }
.person-link { color: inherit; text-decoration: none; }
.person-link:hover { text-decoration: underline dotted; }
.sister-card {
  margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding: 1.5rem; border: var(--outline-width) solid var(--color-ink);
  border-radius: var(--radius-card); background: var(--color-paper-raised);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-ink);
}
.sister-card h2 { margin: .25rem 0 .5rem; font-family: var(--font-display); font-size: var(--text-h2); }
.sister-card p { margin: 0; }
.site-footer .footer-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.site-footer .footer-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer .footer-nav a { color: inherit; font-weight: 600; }
.site-footer .footer-note { margin: .75rem 0 0; }

/* ---------- Hub overhaul slice 2: Get-into-a-game zone + big game cards ---------- */
.get-in {
  display: grid; gap: 1rem; margin-bottom: 1.25rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--color-stage); color: var(--color-on-stage);
  border: var(--outline-width) solid var(--color-ink); border-radius: var(--radius-card);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-ink);
}
.get-in > .section-heading { margin: 0; }
.get-in > .section-heading h2 {
  margin: 0; color: var(--color-on-stage);
  font-family: var(--font-display); font-size: var(--text-h2);
}
.get-in .eyebrow { color: var(--color-crimson-on-stage); }
.get-in-grid { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 64rem) {
  /* Panels stretch to fill the band: however many are present (join code,
     invitations when any, open lobbies), they share the full row width and
     equal height - no dead third column, no void under the short panel. */
  .get-in-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
}
.get-in .join-panel { margin-bottom: 0; }
.hub .list-rows { gap: 1rem; }
.hub .game-row {
  min-height: 92px; padding: 1.1rem 1.25rem;
  border: var(--outline-width) solid var(--color-ink); border-radius: var(--radius-frame);
  background: var(--color-paper-raised);
  box-shadow: 4px 4px 0 var(--color-ink);
}
.hub .game-row:first-child { border-top: var(--outline-width) solid var(--color-ink); }
.hub .game-row strong { font-family: var(--font-display); font-size: 1.3rem; white-space: normal; }
.hub .game-row .status { font-size: var(--text-small); padding: .35rem .8rem; }
/* Slice 2 fix: zone's on-stage text colour must not inherit into the paper panels,
   and the join panel stacks its two forms inside the zone column. */
.get-in .join-panel, .get-in .discovery-panel { color: var(--color-ink); }
.get-in .join-panel { grid-template-columns: minmax(0, 1fr); }
.get-in .join-panel h2 { grid-column: auto; }

@media (pointer: coarse) {
  .sibling-link { min-height: 44px; display: inline-flex; align-items: center; }
}