/* ============================================================
   Design tokens
   ============================================================ */
:root {
  /* color */
  --bg:           #07080d;
  --bg-elev:      #11121a;
  --panel:        #161824;
  --panel-elev:   #1c1f2e;
  --border:       #232737;
  --border-strong:#323852;
  --text:         #e9edff;
  --text-muted:   #9097b3;
  --text-soft:    #6b7196;
  --primary:      #6366f1;            /* indigo-500 */
  --primary-hover:#818cf8;
  --primary-soft: rgba(99, 102, 241, 0.14);
  --primary-2:    #a855f7;            /* gradient stop — violet-500 */
  --accent:       #ffb454;            /* warm amber */
  --accent-2:     #ff8a3d;            /* gradient stop — coral */
  --accent-soft:  rgba(255, 180, 84, 0.16);
  --good:         #3fb950;
  --good-soft:    rgba(63, 185, 80, 0.14);
  --warn:         #d29922;
  --warn-soft:    rgba(210, 153, 34, 0.14);
  --bad:          #f85149;
  --bad-soft:     rgba(248, 81, 73, 0.14);

  /* gradients */
  --grad-primary: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  --grad-accent:  linear-gradient(135deg, #ffb454 0%, #ff8a3d 100%);
  --grad-hero:    linear-gradient(135deg, #6366f1, #a855f7 50%, #ffb454);

  /* type */
  --font-display: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, "SFMono-Regular", monospace;

  --t-xs:      0.75rem;
  --t-sm:      0.875rem;
  --t-base:    1rem;
  --t-lg:      1.125rem;
  --t-xl:      1.25rem;
  --t-2xl:     1.75rem;
  --t-3xl:     2.5rem;
  --t-display: 4rem;

  /* spacing — 4px grid */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* radius */
  --r-sm: 6px;  --r-md: 10px; --r-lg: 14px; --r-pill: 9999px;

  /* shadow */
  --sh-sm:        0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-md:        0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --sh-lg:        0 18px 48px rgba(0, 0, 0, 0.6);
  --sh-glow:      0 0 0 3px rgba(99, 102, 241, 0.36);
  --sh-primary:   0 6px 18px rgba(99, 102, 241, 0.35), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  --sh-primary-h: 0 10px 24px rgba(99, 102, 241, 0.45), 0 1px 0 rgba(255, 255, 255, 0.22) inset;

  /* motion */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--text);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  background-color: var(--bg);
}

/* Atmosphere — two soft spotlights + dot grid. Pseudo-elements so the
   gradients can stack independently without affecting children. */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background:
    radial-gradient(ellipse 800px 600px at 15% -10%, rgba(99, 102, 241, 0.22), transparent 60%),
    radial-gradient(ellipse 700px 500px at 110% 110%, rgba(255, 138, 61, 0.14), transparent 60%);
}
body::after {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
  mix-blend-mode: lighten;
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}
p { margin: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

button { font: inherit; }
input, textarea { font: inherit; }

/* ============================================================
   Header
   ============================================================ */
header {
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-bottom: 1px solid var(--border);
  background: rgba(7, 8, 13, 0.72);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  position: sticky;
  top: 0;
  z-index: 10;
}
header h1 { font-size: var(--t-xl); font-weight: 600; }
header .back {
  color: var(--text-muted);
  font-size: var(--t-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}
header .back:hover { color: var(--primary); }

/* Wordmark + logomark */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  background: var(--grad-hero);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.wordmark--xl { font-size: var(--t-display); }
.wordmark--lg { font-size: var(--t-3xl); }

.brand-row {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.logomark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  filter: drop-shadow(0 4px 12px rgba(255, 180, 84, 0.35));
}

.wordmark-underline {
  display: block;
  width: 100%;
  max-width: 280px;
  height: 14px;
  margin: -2px auto 0;
  color: var(--accent);
}
.wordmark-underline path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: scribble-draw 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s forwards;
}
@keyframes scribble-draw { to { stroke-dashoffset: 0; } }

.tagline {
  color: var(--text-muted);
  font-size: var(--t-base);
  letter-spacing: 0.02em;
}

/* ============================================================
   Components
   ============================================================ */

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font-weight: 500;
  font-size: var(--t-sm);
  background: var(--panel-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-md); border-color: var(--border-strong); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--sh-glow); }
.btn:disabled, .btn[disabled] {
  opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn--primary {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sh-primary);
}
.btn--primary:hover {
  background: var(--grad-primary);
  filter: brightness(1.08);
  box-shadow: var(--sh-primary-h);
}
.btn--primary:focus-visible {
  box-shadow: var(--sh-primary), var(--sh-glow);
}
.btn--primary:disabled {
  background: var(--grad-primary);
  filter: grayscale(0.7);
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn--ghost:hover { color: var(--text); border-color: var(--primary); }

.btn--icon {
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  color: var(--text-muted);
}
.btn--icon:hover { color: var(--text); border-color: var(--primary); }
.btn--icon.active { color: var(--primary); border-color: var(--primary); }

.btn--lg { padding: var(--s-3) var(--s-5); font-size: var(--t-base); }
.btn--block { width: 100%; }

/* Input */
.input {
  display: block;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-base);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-soft); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--sh-glow); }
.input:disabled {
  background: var(--panel);
  color: var(--text-soft);
  cursor: not-allowed;
  border-style: dashed;
}
.input--error { border-color: var(--bad); }

textarea.input { font-family: var(--font-body); resize: vertical; line-height: 1.5; }

/* Card */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: var(--s-5);
}
.card--inset {
  background: var(--panel-elev);
  box-shadow: none;
  padding: var(--s-4);
  border-radius: var(--r-md);
}

/* Pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  font-size: var(--t-xs);
  font-weight: 500;
  border-radius: var(--r-pill);
  background: var(--panel-elev);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.pill--accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.pill--good { background: var(--good-soft); color: var(--good); border-color: var(--good-soft); }
.pill--warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-soft); }
.pill--bad  { background: var(--bad-soft);  color: var(--bad);  border-color: var(--bad-soft); }

/* Avatar */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--t-xs);
  font-family: var(--font-display);
  color: #06080d;
  flex-shrink: 0;
  user-select: none;
}

/* Field (label + input wrapper) */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.field > label, .field > .field-label {
  color: var(--text-muted);
  font-size: var(--t-sm);
  font-weight: 500;
}
.field-help {
  color: var(--text-soft);
  font-size: var(--t-xs);
}

/* Divider */
.divider {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-soft);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ============================================================
   Utilities
   ============================================================ */
.hidden { display: none !important; }
.muted { color: var(--text-muted); font-size: var(--t-sm); }
.muted--xs { color: var(--text-soft); font-size: var(--t-xs); }
.error { color: var(--bad); font-size: var(--t-sm); min-height: var(--s-4); }

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* SVG icons inherit currentColor */
svg { fill: none; stroke: currentColor; }

/* ============================================================
   Sketchpad vocabulary — marker frames, paper grain, doodle accents
   ============================================================
   The wobble filters (#gh-wobble, #gh-wobble-strong) are injected once
   per page by shared/icons.js. Anything stroked or bordered can reference
   them via filter: url(#gh-wobble). */

/* Paper grain — a soft monochrome noise overlay laid behind page content.
   Inline SVG via feTurbulence so there's no extra request. Tile is small
   and blends with the existing dot grid in body::after. */
.paper {
  background-image:
    radial-gradient(ellipse 800px 600px at 15% -10%, rgba(99, 102, 241, 0.22), transparent 60%),
    radial-gradient(ellipse 700px 500px at 110% 110%, rgba(255, 138, 61, 0.14), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: auto, auto, 220px 220px;
}
body.paper::before { content: none; }
body.paper::after  { display: none; }

/* Sketched frame — wraps any element in a wobbly amber outline. The frame
   is a pseudo-element so the inner content stays crisp (filters don't
   affect text or canvas inside). */
.frame--sketch {
  position: relative;
  isolation: isolate;
}
.frame--sketch::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--accent);
  border-radius: var(--r-md);
  filter: url(#gh-wobble);
  pointer-events: none;
  z-index: -1;
}
.frame--sketch--lg::before { border-width: 3px; border-radius: var(--r-lg); }
.frame--sketch--dashed::before {
  border-style: dashed;
  border-color: var(--text-soft);
}
.frame--sketch--accent2::before { border-color: var(--accent-2); }
.frame--sketch--primary::before { border-color: var(--primary); }

/* Squiggle divider — the wordmark underline path lifted out as a generic
   visual rule. Pair with .divider--sketch to replace the straight rule. */
.divider--sketch {
  display: block;
  height: 12px;
  width: 100%;
  color: var(--accent);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none' fill='none'><path d='M3 8 Q 30 2, 60 8 T 120 8 T 180 8 T 237 6' stroke='%23ffb454' stroke-width='3' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Marker button — transparent body, wobbly amber outline, hand-drawn feel.
   Inherits sizing from .btn so .btn.btn--marker.btn--lg.btn--block works. */
.btn--marker {
  background: transparent;
  border: none;
  color: var(--text);
  position: relative;
  isolation: isolate;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* Override .btn's default lift so the wobble outline does the talking. */
  transition:
    transform var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
.btn--marker::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--accent);
  border-radius: var(--r-md);
  filter: url(#gh-wobble);
  z-index: -1;
  transition: filter var(--dur-base) var(--ease-out);
}
.btn--marker:hover {
  transform: rotate(-0.6deg);
  color: var(--accent);
  box-shadow: none;
}
.btn--marker:hover::before { filter: url(#gh-wobble-strong); }
.btn--marker:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 180, 84, 0.36);
}
.btn--marker:disabled,
.btn--marker[disabled] {
  opacity: 0.45;
  transform: none;
  color: var(--text-muted);
}
.btn--marker:disabled::before,
.btn--marker[disabled]::before { filter: url(#gh-wobble); }

/* Ink-splat: triggered by adding `.ink-splat` to a .btn--marker (typically
   on click via JS in Phase 4). One-shot — element auto-removes the class on
   animationend. */
.btn--marker.ink-splat::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--r-md);
  background: radial-gradient(circle, rgba(255, 180, 84, 0.45) 0%, rgba(255, 138, 61, 0.0) 60%);
  pointer-events: none;
  animation: ink-splat 480ms var(--ease-out) forwards;
}
@keyframes ink-splat {
  0%   { transform: scale(0.55); opacity: 0.85; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Stroke draw-in — apply this class to any GH icon SVG to draw its strokes
   on instead of fading them in. Typically used for confirmation states
   (success checks, share-link copied) to feel like the marker just wrote it. */
.icon--draw-in path,
.icon--draw-in polyline,
.icon--draw-in line,
.icon--draw-in circle,
.icon--draw-in rect {
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
  animation: stroke-draw-in 360ms var(--ease-out) forwards;
}
@keyframes stroke-draw-in {
  to { stroke-dashoffset: 0; }
}

/* Floating doodle layer — utility class for ambient page background.
   Each child .doodle-floater drifts on its own keyframe. Pure decoration. */
.doodle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.doodle-floater {
  position: absolute;
  color: var(--accent);
  opacity: 0.10;
  filter: url(#gh-wobble);
  will-change: transform;
}
.doodle-floater--a { top: 12%; left: -6%;  animation: drift-a 38s linear infinite; }
.doodle-floater--b { top: 64%; left: -10%; animation: drift-b 52s linear infinite; }
.doodle-floater--c { top: 32%; left: -8%;  animation: drift-c 46s linear infinite; }
@keyframes drift-a {
  0%   { transform: translate(0, 0)       rotate(-6deg); }
  50%  { transform: translate(60vw, -4vh) rotate(2deg);  }
  100% { transform: translate(120vw, 0)   rotate(-6deg); }
}
@keyframes drift-b {
  0%   { transform: translate(0, 0)        rotate(8deg);  }
  50%  { transform: translate(55vw, 6vh)   rotate(-3deg); }
  100% { transform: translate(120vw, 0)    rotate(8deg);  }
}
@keyframes drift-c {
  0%   { transform: translate(0, 0)        rotate(-3deg); }
  50%  { transform: translate(58vw, -8vh)  rotate(5deg);  }
  100% { transform: translate(120vw, 0)    rotate(-3deg); }
}

/* ============================================================
   Lobby vocabulary — used by every game's lobby. Two-column shape
   (left = controls, right = tabbed reference panel with How-to-play
   + Chat). Cap the left at ~580px so settings fields read at a
   comfortable line length, then center the whole grid in the page.
   ============================================================ */
.lobby-grid {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 580px) minmax(0, 360px);
  gap: var(--s-4);
  align-items: start;
}
@media (max-width: 980px) {
  .lobby-grid { grid-template-columns: 1fr; }
}

.lobby-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

/* Right-column tutorial panel — sketched amber outline, holds tabs +
   tab content. Same wobble vocabulary as the home page. */
.lobby-tutorial {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 0;
  position: sticky;
  top: var(--s-4);
}
@media (max-width: 980px) {
  .lobby-tutorial { position: static; }
}

.lobby-tab-strip {
  display: inline-flex;
  gap: var(--s-2);
  padding: 4px;
  border-radius: var(--r-pill);
  background: rgba(22, 24, 36, 0.6);
  align-self: flex-start;
}
.lobby-tab-strip__tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.lobby-tab-strip__tab:hover { color: var(--text); }
.lobby-tab-strip__tab.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}
.lobby-tab-strip__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 180, 84, 0.36);
}

.lobby-tutorial__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 0;
}
.lobby-tutorial__panel[hidden] { display: none; }

/* Chat lives inside the tutorial panel as the secondary tab — match
   the existing chat panel shape so its internals (chatlog + form) stay
   identical. */
.lobby-tutorial__panel--chat {
  flex: 1;
  min-height: 360px;
  max-height: 60vh;
}

/* Tutorial sections — illustrated, sketchpad-styled cards. Each section
   is a `<section class="tutorial-section">` with header → divider → body. */
.tutorial-section {
  background: rgba(22, 24, 36, 0.45);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.tutorial-section__header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.tutorial-section__header h4 {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}
.tutorial-section__doodle {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(255, 180, 84, 0.3));
}
.tutorial-section__divider {
  display: block;
  height: 6px;
  width: 100%;
  margin: 2px 0 4px;
  color: var(--accent);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 6' preserveAspectRatio='none' fill='none'><path d='M3 4 Q 30 1, 60 4 T 120 4 T 180 4 T 237 3' stroke='%23ffb454' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.7;
}
.tutorial-section p,
.tutorial-section ul,
.tutorial-section ol {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--text);
  line-height: 1.55;
}
.tutorial-section ul,
.tutorial-section ol {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tutorial-section li::marker { color: var(--text-soft); }
.tutorial-section em.tutorial-value {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
  background: rgba(255, 180, 84, 0.1);
  padding: 0 5px;
  border-radius: var(--r-sm);
}
.tutorial-section .tutorial-toggle {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tutorial-section .tutorial-toggle--on  { color: var(--good); }
.tutorial-section .tutorial-toggle--off { color: var(--text-soft); }

/* Per-section accent variants (header color hint). Game-side tutorials
   apply these for chromatic identity inside the panel. */
.tutorial-section--primary  h4 { color: var(--primary-hover); }
.tutorial-section--primary  .tutorial-section__divider {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 6' preserveAspectRatio='none' fill='none'><path d='M3 4 Q 30 1, 60 4 T 120 4 T 180 4 T 237 3' stroke='%236366f1' stroke-width='1.6' stroke-linecap='round'/></svg>");
}
.tutorial-section--accent2 h4 { color: var(--accent-2); }

/* ----- Promoted room-code card ----- */
/* Wider, taller, with the "share link" CTA promoted alongside the code.
   Replaces the old narrow "Room code" muted label. */
.room-code-card.room-code-card--promoted {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
}
.room-code-card--promoted .room-code-card__label {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.room-code-card--promoted .room-code-card__hint {
  font-size: var(--t-xs);
  color: var(--text-muted);
  margin-top: var(--s-1);
}
.room-code-card--promoted .room-code-card__actions {
  display: flex;
  gap: var(--s-2);
  flex-direction: column;
  align-items: stretch;
}
.room-code-card--promoted .btn--share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: var(--t-sm);
}
@media (max-width: 540px) {
  .room-code-card.room-code-card--promoted { grid-template-columns: 1fr; }
  .room-code-card--promoted .room-code-card__actions { flex-direction: row; }
}

/* ----- Host-only chip for the settings panel ----- */
/* When the viewer is NOT the host, settings inputs read as locked: a
   small "🔒 host-only" chip in the panel header + faint amber border on
   inputs so it's visually obvious you can't edit. */
.host-only-chip {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 180, 84, 0.12);
  color: var(--accent);
  border: 1px solid rgba(255, 180, 84, 0.3);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lobby-screen.guest .host-only-chip { display: inline-flex; }
.lobby-screen.guest .lobby-settings .input,
.lobby-screen.guest .lobby-settings textarea.input {
  border-color: rgba(255, 180, 84, 0.18);
  background: rgba(28, 31, 46, 0.4);
  color: var(--text-muted);
  cursor: not-allowed;
}
.lobby-screen.guest .lobby-settings input[type="checkbox"] {
  pointer-events: none;
  opacity: 0.7;
}

/* ----- Player chips ----- */
/* First-class compact row used for the lobby player list. Avatar +
   name + host crown + connection dot. Replaces the bullet-list look. */
.player-chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.player-chip {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 10px;
  background: rgba(28, 31, 46, 0.55);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  transition: background var(--dur-base) var(--ease-out);
}
.player-chip:hover { background: rgba(28, 31, 46, 0.85); }
.player-chip.is-disconnected { opacity: 0.55; }
.player-chip.is-self { box-shadow: inset 0 0 0 1.5px rgba(255, 180, 84, 0.28); }
.player-chip__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.player-chip__crown {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}
.player-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.5);
  flex-shrink: 0;
}
.player-chip:not(.is-disconnected) .player-chip__dot {
  animation: pulse-dot-soft 2.4s var(--ease-out) infinite;
}
.player-chip.is-disconnected .player-chip__dot { background: var(--text-soft); }
.player-chip.is-waiting .player-chip__dot { background: var(--warn); }
.player-chip__waiting {
  font-size: var(--t-xs);
  color: var(--warn);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: auto;
}
@keyframes pulse-dot-soft {
  0%   { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.4); }
  70%  { box-shadow: 0 0 0 6px rgba(63, 185, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0); }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .doodle-layer { display: none; }
}