/* Choice & Reward — HFB Play Together
   Low-sensory, glass-style, three themes (dark / dim / light). No external assets. */

:root {
  --font-fa: "Vazirmatn", "Vazir", "Noto Sans Arabic", "Segoe UI", Tahoma, "DejaVu Sans", sans-serif;
  --font-en: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --tap: 56px;              /* minimum touch target */
  --ease: cubic-bezier(.25, .8, .35, 1);
  --dur: 420ms;
}

/* ---------- Themes ---------- */
html[data-theme="dark"] {
  --bg-1: #05071a;
  --bg-2: #0b1033;
  --bg-3: #1a1450;
  --glow-a: rgba(76, 110, 245, .22);
  --glow-b: rgba(139, 92, 246, .20);
  --text: #eef1ff;
  --text-soft: #b8c0e8;
  --glass: rgba(255, 255, 255, .06);
  --glass-strong: rgba(255, 255, 255, .10);
  --glass-border: rgba(160, 175, 255, .22);
  --shadow: 0 12px 40px rgba(0, 0, 0, .45);
  --accent-1: #4f7cff;
  --accent-2: #8b5cf6;
  --accent-text: #ffffff;
  --focus: #9fb6ff;
  --star-empty: rgba(255, 255, 255, .14);
  --overlay: rgba(4, 6, 22, .78);
  color-scheme: dark;
}
html[data-theme="dim"] {
  --bg-1: #2c3f78;
  --bg-2: #3a4f92;
  --bg-3: #5a4fa6;
  --glow-a: rgba(140, 170, 255, .28);
  --glow-b: rgba(180, 150, 255, .24);
  --text: #f4f6ff;
  --text-soft: #d6ddff;
  --glass: rgba(255, 255, 255, .12);
  --glass-strong: rgba(255, 255, 255, .18);
  --glass-border: rgba(220, 228, 255, .32);
  --shadow: 0 12px 36px rgba(10, 18, 60, .35);
  --accent-1: #6a8dff;
  --accent-2: #a07cff;
  --accent-text: #ffffff;
  --focus: #ffffff;
  --star-empty: rgba(255, 255, 255, .22);
  --overlay: rgba(28, 38, 90, .72);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg-1: #f7f8ff;
  --bg-2: #eef1ff;
  --bg-3: #f1ecff;
  --glow-a: rgba(79, 124, 255, .14);
  --glow-b: rgba(139, 92, 246, .12);
  --text: #141a3a;
  --text-soft: #4a5384;
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .92);
  --glass-border: rgba(90, 110, 220, .22);
  --shadow: 0 10px 30px rgba(40, 60, 140, .12);
  --accent-1: #3d63f0;
  --accent-2: #7c4ee6;
  --accent-text: #ffffff;
  --focus: #3d63f0;
  --star-empty: rgba(60, 80, 160, .14);
  --overlay: rgba(240, 242, 255, .86);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  background-color: var(--bg-2);
  background-image:
    radial-gradient(900px 600px at 15% -10%, var(--glow-a), transparent 60%),
    radial-gradient(800px 600px at 110% 20%, var(--glow-b), transparent 60%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-fa);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  background: transparent;
}
html[lang="en"] body { font-family: var(--font-en); }
[lang="fa"] { font-family: var(--font-fa); }
[lang="en"] { font-family: var(--font-en); }

/* subtle static "galaxy" specks in dark mode only (no motion, no flashing) */
html[data-theme="dark"] body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 64%, rgba(200,210,255,.45), transparent 60%),
    radial-gradient(1px 1px at 33% 78%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 55% 45%, rgba(220,200,255,.35), transparent 60%),
    radial-gradient(1px 1px at 6% 60%, rgba(255,255,255,.3), transparent 60%);
  z-index: -1;
}

button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 12px;
}

.skip-link {
  position: absolute; inset-inline-start: 8px; top: -60px;
  background: var(--glass-strong); color: var(--text);
  padding: 10px 16px; border-radius: 12px; z-index: 100;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}
.glass-soft {
  background: var(--glass);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-md);
}

/* ---------- Header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  max-width: 1080px; width: 100%; margin: 0 auto;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  min-height: 44px;
  border-radius: 12px;
}
.brand-logo { width: 36px; height: 36px; object-fit: contain; background: transparent; }
.brand-text {
  font-family: var(--font-en);
  font-weight: 700; font-size: 1rem; letter-spacing: .2px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
html[data-theme="dim"] .brand-text { background: none; color: var(--text); }
.header-tools { display: flex; gap: 8px; }

.tool-btn {
  min-width: 48px; min-height: 48px;
  display: inline-grid; place-items: center;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  cursor: pointer;
  font-size: 1.05rem; font-weight: 700;
  font-family: var(--font-en);
  transition: background var(--dur) var(--ease), transform 200ms var(--ease);
}
.tool-btn:hover { background: var(--glass-strong); }
.tool-btn span[aria-hidden="true"] { font-family: var(--font-emoji), var(--font-en); }
#langBtnText { font-family: var(--font-fa); }

/* ---------- Stage ---------- */
.stage {
  flex: 1;
  width: 100%; max-width: 1080px; margin: 0 auto;
  padding: 4px 16px 24px;
  display: flex; flex-direction: column; align-items: stretch; gap: 16px;
  outline: none;
}
.game-title {
  margin: 0;
  text-align: center;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  font-weight: 700;
  color: var(--text-soft);
}

.prompt, .feedback, .star-chart { width: 100%; max-width: 720px; margin-inline: auto; }
.prompt {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}
.prompt-text {
  margin: 0;
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  font-weight: 800;
  text-align: center;
}

.speak-btn {
  flex: none;
  width: var(--tap); height: var(--tap);
  border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--glass-border);
  background: var(--glass-strong);
  cursor: pointer;
  font-size: 1.5rem;
  font-family: var(--font-emoji);
  transition: background var(--dur) var(--ease), transform 200ms var(--ease);
}
.speak-btn:hover { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); }
.speak-btn.speaking { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-1) 45%, transparent); }
html.no-speech .speak-btn,
html.sound-off .speak-btn { display: none; }

/* ---------- Choice cards ---------- */
.choices {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.choices[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
.choices[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 820px) {
  .choices[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; }
}
@media (max-width: 520px) {
  .choices[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choices[data-count="3"] .card:last-child { grid-column: 1 / -1; max-width: calc(50% - 8px); justify-self: center; width: 100%; }
}

.card { position: relative; }
.card-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 52px 12px 18px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--glass-border);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent-1) 14%, transparent), color-mix(in srgb, var(--accent-2) 14%, transparent)),
    var(--glass);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card-main:hover { border-color: color-mix(in srgb, var(--accent-1) 60%, var(--glass-border)); }
.card-emoji {
  font-family: var(--font-emoji);
  font-size: clamp(4.2rem, 17vw, 7.5rem);
  line-height: 1.1;
}
.choices[data-count="4"] .card-emoji { font-size: clamp(3.6rem, 15vw, 6rem); }
.card-label {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 700;
}
.card-num {
  position: absolute; top: 10px; inset-inline-start: 14px;
  font-family: var(--font-en);
  font-size: .85rem; font-weight: 700;
  color: var(--text-soft); opacity: .8;
  pointer-events: none;
}
.card .speak-btn {
  position: absolute; top: 8px; inset-inline-end: 8px;
  width: 48px; height: 48px; font-size: 1.2rem;
}

.choices.answered .card-main { cursor: default; }
.card.chosen .card-main {
  border-color: transparent;
  box-shadow: 0 0 0 4px var(--accent-1), 0 0 0 8px color-mix(in srgb, var(--accent-2) 40%, transparent), var(--shadow);
}
.card.not-chosen .card-main { opacity: .38; }

/* ---------- Feedback ---------- */
.feedback { min-height: 0; }
.feedback-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 16px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
}
.feedback-emoji { font-family: var(--font-emoji); font-size: 2.4rem; line-height: 1; }
.feedback-text { margin: 0; font-size: clamp(1.25rem, 4.5vw, 1.7rem); font-weight: 800; text-align: center; }

.pill-btn {
  min-height: var(--tap);
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-strong);
  cursor: pointer;
  font-weight: 700; font-size: 1.1rem;
  display: inline-flex; align-items: center; gap: 8px;
}
.pill-btn.primary {
  border-color: transparent;
  color: var(--accent-text);
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}
.dir-arrow { display: inline-block; font-family: var(--font-en); }
html[dir="rtl"] .dir-arrow { transform: scaleX(-1); }

/* ---------- Star chart ---------- */
.star-chart {
  border-radius: var(--radius-lg);
  padding: 12px 18px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label count" "stars stars";
  align-items: center;
  gap: 6px 12px;
}
.star-label { grid-area: label; margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-soft); }
.star-count { grid-area: count; margin: 0; font-weight: 700; color: var(--text-soft); }
.stars {
  grid-area: stars;
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; gap: clamp(8px, 3vw, 20px);
}
.star {
  width: clamp(48px, 13vw, 64px); height: clamp(48px, 13vw, 64px);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--star-empty);
  font-family: var(--font-emoji);
  font-size: clamp(1.6rem, 7vw, 2.3rem);
}
.star .star-glyph { opacity: 0; transform: scale(.6); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.star.filled { background: color-mix(in srgb, #ffd166 22%, transparent); }
.star.filled .star-glyph { opacity: 1; transform: scale(1); }

/* ---------- Celebration ---------- */
.celebrate {
  position: fixed; inset: 0;
  z-index: 50;
  display: grid; place-items: center;
  padding: 20px;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.celebrate-card {
  width: min(560px, 100%);
  border-radius: 32px;
  padding: 32px 22px 26px;
  text-align: center;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent-1) 22%, transparent), color-mix(in srgb, var(--accent-2) 22%, transparent)),
    var(--glass-strong);
}
.celebrate-stars { display: flex; justify-content: center; gap: 8px; font-family: var(--font-emoji); font-size: clamp(2.2rem, 10vw, 3.4rem); }
.celebrate-stars span:nth-child(3) { font-size: 1.35em; }
.celebrate-title { margin: 14px 0 4px; font-size: clamp(1.7rem, 7vw, 2.4rem); }
.celebrate-sub { margin: 0 0 20px; color: var(--text-soft); font-size: 1.15rem; }
.celebrate-actions { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Adult panel ---------- */
.adult-panel {
  width: min(520px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border-radius: 24px;
  color: var(--text);
  background: var(--bg-2);
  overflow: auto;
}
html[data-theme="light"] .adult-panel { background: #ffffff; }
.adult-panel::backdrop { background: var(--overlay); }
.adult-form { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; }
.panel-head h2 { margin: 0; font-size: 1.3rem; }
.field { border: 1px solid var(--glass-border); border-radius: var(--radius-md); margin: 0; padding: 10px 14px 14px; }
.field legend { padding: 0 6px; font-weight: 700; color: var(--text-soft); }
.hint { margin: 8px 0 0; font-size: .92rem; color: var(--text-soft); }

.seg { display: flex; gap: 10px; }
.seg label { flex: 1; }
.seg input, .checks input, .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span {
  display: grid; place-items: center;
  min-height: var(--tap);
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  font-family: var(--font-en); font-weight: 800; font-size: 1.25rem;
  cursor: pointer;
}
.seg input:checked + span { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color: #fff; border-color: transparent; }
.seg input:focus-visible + span,
.checks input:focus-visible ~ span:last-child,
.switch input:focus-visible + .switch-ui { outline: 3px solid var(--focus); outline-offset: 3px; }

.checks { display: flex; flex-direction: column; gap: 8px; }
.checks label {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  cursor: pointer;
}
.checks label span[aria-hidden="true"] { font-family: var(--font-emoji); font-size: 1.4rem; }
.checks label:has(input:checked) { border-color: var(--accent-1); background: color-mix(in srgb, var(--accent-1) 18%, transparent); }
.checks label::after {
  content: ""; margin-inline-start: auto;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-family: var(--font-en);
  width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--glass-border);
}
.checks label:has(input:checked)::after {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border-color: transparent;
  content: "✓";
}

.switch {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap);
  cursor: pointer;
}
.switch-ui {
  flex: none;
  width: 54px; height: 32px; border-radius: 999px;
  background: var(--star-empty);
  border: 1px solid var(--glass-border);
  position: relative;
  transition: background var(--dur) var(--ease);
}
.switch-ui::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: inset-inline-start var(--dur) var(--ease);
}
.switch input:checked + .switch-ui { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); }
.switch input:checked + .switch-ui::after { inset-inline-start: 25px; }

.together { padding: 12px 14px; }
.together h3 { margin: 0 0 4px; font-size: 1.05rem; }
.together p { margin: 0; font-size: .95rem; color: var(--text-soft); }

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 10px 16px max(14px, env(safe-area-inset-bottom));
  font-size: .85rem;
  color: var(--text-soft);
}
.site-footer p { margin: 0; }

/* ---------- Gentle motion (only when allowed) ---------- */
@keyframes cr-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cr-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes cr-star { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes cr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

html.motion .card-main { animation: cr-rise 520ms var(--ease) both; }
html.motion .card:nth-child(2) .card-main { animation-delay: 60ms; }
html.motion .card:nth-child(3) .card-main { animation-delay: 120ms; }
html.motion .card:nth-child(4) .card-main { animation-delay: 180ms; }
html.motion .card-main:active { transform: scale(.98); }
html.motion .card.chosen .card-main { transform: scale(1.03); }
html.motion .feedback-inner { animation: cr-rise 480ms var(--ease) both; }
html.motion .star.just-filled .star-glyph { animation: cr-star 700ms var(--ease) both; }
html.motion .celebrate-card { animation: cr-rise 600ms var(--ease) both; }
html.motion .celebrate-stars span { display: inline-block; animation: cr-float 3.2s ease-in-out infinite; }
html.motion .celebrate-stars span:nth-child(2) { animation-delay: .4s; }
html.motion .celebrate-stars span:nth-child(3) { animation-delay: .8s; }
html.motion .celebrate-stars span:nth-child(4) { animation-delay: 1.2s; }
html.motion .celebrate-stars span:nth-child(5) { animation-delay: 1.6s; }

html:not(.motion) *, html:not(.motion) *::before, html:not(.motion) *::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Fallback if color-mix is unsupported */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .card-main { background: var(--glass); }
  .card.chosen .card-main { box-shadow: 0 0 0 4px var(--accent-1), var(--shadow); }
  .star.filled { background: rgba(255, 209, 102, .22); }
  .checks label:has(input:checked) { background: var(--glass-strong); }
}

@media (forced-colors: active) {
  .card-main, .tool-btn, .speak-btn, .pill-btn { border: 2px solid ButtonText; }
  .card.chosen .card-main { outline: 4px solid Highlight; }
}
.hint.warn { color: var(--text); font-weight: 700; }

/* ---------- Team framing + live two-player mode ---------- */
.team-avatars { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; font-family: var(--font-emoji); }
.avatar-mini {
  display: inline-grid; place-items: center;
  width: 1.9em; height: 1.9em; border-radius: 50%;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  font-size: .95em; line-height: 1;
}
.avatar-mini + .avatar-mini { margin-inline-start: -6px; }
.team-avatars.big { font-size: clamp(1.6rem, 7vw, 2.2rem); margin-bottom: 8px; }
.team-avatars.big .avatar-mini + .avatar-mini { margin-inline-start: 6px; }
.star-label .team-avatars { margin-inline-end: 6px; }

.feedback-team { margin: 0; flex-basis: 100%; text-align: center; font-weight: 700; color: var(--text-soft); font-size: clamp(1rem, 3.6vw, 1.2rem); }

.team-bar {
  width: 100%; max-width: 720px; margin-inline: auto;
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
}
.team-pair { display: inline-flex; gap: 10px; }
.avatar {
  position: relative;
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.avatar-face { font-family: var(--font-emoji); font-size: 1.7rem; line-height: 1; }
.avatar.away { opacity: .45; }
.avatar.me { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 40%, transparent); }
.mic-dot {
  position: absolute; inset-block-end: -2px; inset-inline-end: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--bg-2);
  background: var(--star-empty);
}
.mic-dot.on { background: #4ade80; }
.mic-dot.off { background: #f87171; }
.mic-dot.talking { background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .35); }
.team-status { margin: 0; flex: 1 1 200px; text-align: center; font-weight: 700; color: var(--text-soft); }
.team-note { margin: 0; flex-basis: 100%; text-align: center; font-size: .95rem; color: var(--text-soft); }
.team-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.share-box { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
.share-label { font-size: .95rem; color: var(--text-soft); text-align: center; }
.share-row { display: flex; gap: 8px; }
.share-link {
  flex: 1; min-width: 0; min-height: 48px;
  padding: 0 12px; border-radius: 14px;
  border: 1px solid var(--glass-border); background: var(--glass);
  color: var(--text); font-family: var(--font-en); font-size: .95rem;
}
.mic-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap); padding: 0 18px;
  border-radius: 999px; cursor: pointer;
  border: 1px solid var(--glass-border); background: var(--glass-strong);
  font-weight: 700; font-size: 1rem;
}
.mic-btn .mic-icon { font-family: var(--font-emoji); font-size: 1.4rem; }
.mic-btn[aria-pressed="true"] { background: color-mix(in srgb, #f87171 30%, transparent); }
/* Therapist side: big mute/unmute button. */
html.role-host .mic-btn { min-height: 72px; padding: 0 28px; font-size: 1.15rem; }
html.role-host .mic-btn .mic-icon { font-size: 2rem; }
/* Child side: the host controls rounds and settings. */
html.role-child #adultForm .field:first-of-type,
html.role-child #adultForm .field:nth-of-type(2),
html.role-child .together-actions { display: none; }
.together-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.start-btn { min-height: 72px; padding: 0 36px; font-size: 1.35rem; }
.start-hint { max-width: 32ch; margin: 14px auto 0; }

/* ---------- Levels ---------- */
.level-chip {
  margin: -6px auto 0;
  display: inline-flex; align-self: center; align-items: center; gap: 8px;
  padding: 4px 14px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass);
  font-size: .98rem; font-weight: 700; color: var(--text-soft);
}
.level-chip #levelNum { color: var(--text); }
.level-sep { opacity: .6; }
.seg-levels { flex-wrap: wrap; }
.seg-levels label { flex: 1 0 12%; }
.level-up { margin: -8px 0 18px; font-size: clamp(1.2rem, 4.8vw, 1.5rem); font-weight: 800; color: var(--text); }
.level-up[hidden] { display: none; }
/* "Find it" levels — wrong answer: no red, no X. The right card is gently shown, the pick fades. */
.card.reveal .card-main {
  border-color: transparent;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-1) 80%, transparent), 0 0 0 8px color-mix(in srgb, var(--accent-2) 30%, transparent), var(--shadow);
}
.card.picked-wrong .card-main { opacity: .5; }
html.motion .card.reveal .card-main { transform: scale(1.03); }
@media (forced-colors: active) { .card.reveal .card-main { outline: 4px solid Highlight; } }