/* =========================================================
   Il Cappello Parlante — magical sorting experience (UI v2)
   Inspired by the provided mockups: gold rule, ornate framed
   image, pill answer cards with circular gold badges.
   ========================================================= */

:root {
  --bg-deep:    #04060f;
  --bg-night:   #0a1024;
  --bg-panel:   #0d1428;
  --gold:       #d9b870;
  --gold-warm:  #f4d57a;
  --gold-deep:  #8a6326;
  --gold-soft:  rgba(217,184,112,0.55);
  --ink-light:  #f4ecd6;
  --ink:        #c8bda3;
  --ink-muted:  #897f6b;
  --panel:      rgba(8,12,28,0.78);
  --panel-soft: rgba(12,17,32,0.55);
  --gryffindor: #ae0001;
  --slytherin:  #1a472a;
  --ravenclaw:  #222f5b;
  --hufflepuff: #ecb939;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg-deep);
  color: var(--ink-light);
  font-family: "Cormorant Garamond", Georgia, serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- icon system ---------- */
.ico {
  width: 1em; height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex-shrink: 0;
  display: inline-block;
}
.ico-sm { width: 0.85em; height: 0.85em; }
.ico-lg { width: 1.5em; height: 1.5em; }
.ico-xl { width: 2.4em; height: 2.4em; }
.ico-2xl { width: 3.6em; height: 3.6em; }
.ico-3xl { width: 5em; height: 5em; }
.ico-display { width: 100%; height: 100%; }

/* ---------------- screens ---------------- */
.screen {
  position: fixed; inset: 0;
  background-color: var(--bg-deep);
  background-size: cover;
  background-position: center;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn 600ms ease both;
}
.screen.active { display: flex; }
@keyframes fadeIn { from {opacity:0} to {opacity:1} }

.vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.95) 100%),
    linear-gradient(180deg, rgba(4,6,15,0.85) 0%, rgba(4,6,15,0.05) 30%, rgba(4,6,15,0.92) 100%);
  z-index: 2;
}

/* ---------------- topbars ---------------- */
.topbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 30px 14px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: "Cinzel", serif;
  letter-spacing: 0.25em;
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
}
.brand-mark { font-size: 16px; filter: drop-shadow(0 0 8px rgba(217,184,112,0.6)); }
.brand-name { white-space: nowrap; }

.ghost-btn {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(217,184,112,0.35);
  color: var(--gold);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  backdrop-filter: blur(4px);
  transition: all 200ms;
}
.ghost-btn:hover { background: rgba(217,184,112,0.12); border-color: var(--gold); }

/* ---------- TTS settings modal ---------- */
.settings-overlay {
  position: fixed; inset: 0;
  background: rgba(2,3,8,0.86);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(8px);
  padding: 24px;
  animation: fadeIn 200ms ease;
}
.settings-overlay[hidden] { display: none; }
.settings-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20,18,30,0.96), rgba(8,8,16,0.96));
  border: 1px solid rgba(217,184,112,0.5);
  border-radius: 10px;
  padding: 32px 30px 26px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 40px 100px -20px rgba(217,184,112,0.25);
  color: var(--ink-light);
}
.settings-card::before, .settings-card::after {
  content: ''; position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--gold);
  pointer-events: none;
}
.settings-card::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.settings-card::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.settings-card h2 {
  font-family: "Cinzel", serif;
  color: var(--gold-warm);
  margin: 0 0 14px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-align: center;
}
.settings-intro {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink);
  margin: 0 0 18px;
  line-height: 1.5;
}
.settings-field {
  display: block;
  margin-bottom: 14px;
}
.settings-field > span {
  display: block;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.settings-field input, .settings-field select {
  width: 100%;
  background: rgba(8,12,28,0.7);
  border: 1px solid rgba(217,184,112,0.4);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--ink-light);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 200ms;
}
.settings-field input:focus, .settings-field select:focus { border-color: var(--gold-warm); }
.settings-field select { cursor: pointer; }
.settings-status {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 0 0 12px;
  min-height: 14px;
  text-align: center;
}
.settings-status.ok { color: #8fda9a; }
.settings-status.warn { color: #ff8a90; }
.settings-warn {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.5;
  background: rgba(217,184,112,0.05);
  border-left: 2px solid rgba(217,184,112,0.35);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0 0 16px;
}
.settings-warn code {
  background: rgba(0,0,0,0.4);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--gold-warm);
}
.settings-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.settings-actions .primary-btn { padding: 10px 22px; font-size: 12px; }
.settings-actions .ghost-btn-lg { padding: 10px 18px; font-size: 11px; }

@media (max-width: 520px) {
  .settings-card { padding: 24px 18px 18px; }
  .settings-card h2 { font-size: 18px; }
  .settings-actions { flex-direction: column; }
  .settings-actions button { width: 100%; }
}

/* ---------- topbar language switcher ---------- */
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.lang-pick {
  display: inline-flex;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(217,184,112,0.35);
  border-radius: 999px;
  padding: 2px;
  backdrop-filter: blur(4px);
}
.lang-btn {
  background: transparent;
  color: var(--ink-muted);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms;
  border: 0;
}
.lang-btn:hover { color: var(--gold); }
.lang-btn.active {
  background: linear-gradient(180deg, var(--gold-warm) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color: #1b1408;
  box-shadow: 0 2px 6px -1px rgba(217,184,112,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
}
@media (max-width: 480px) {
  .lang-btn { padding: 3px 7px; font-size: 10px; letter-spacing: 0.08em; }
  .topbar-actions { gap: 6px; }
}

/* ================================================================
   LANDING
   ================================================================ */
#screen-landing {
  background-attachment: fixed;
  background-position: center 30%;
}
/* iOS Safari has buggy background-attachment: fixed — use scroll on touch */
@media (hover: none) and (pointer: coarse) {
  #screen-landing { background-attachment: scroll; }
}
.landing-stars {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 15%, rgba(255,255,255,0.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 45%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 30%, rgba(255,255,255,0.6) 50%, transparent 51%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { 0% {opacity:.4} 50% {opacity:.95} 100% {opacity:.55} }

.landing-content {
  position: relative; z-index: 3;
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 10px 28px 60px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kicker {
  font-family: "Cinzel", serif;
  letter-spacing: 0.45em;
  color: var(--gold);
  font-size: 12px;
  margin-bottom: 22px;
  opacity: 0.9;
  position: relative;
  padding: 0 60px;
}
.kicker::before, .kicker::after {
  content: ''; position: absolute; top: 50%;
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.kicker::before { left: 0; }
.kicker::after  { right: 0; background: linear-gradient(90deg, var(--gold), transparent); }

.title {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.0;
  margin: 0 0 18px;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #fff4cf 0%, #e8c577 55%, #8a6326 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(217,184,112,0.25);
}
.subtitle {
  max-width: 620px;
  color: var(--ink);
  font-size: clamp(14px, 1.4vw, 18px);
  font-style: italic;
  margin: 0 0 32px;
  line-height: 1.5;
}

.mode-cards {
  /* Always show all three modes in a single row on tablet/desktop */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(1080px, 100%);
}
.mode-card {
  position: relative;
  background: linear-gradient(180deg, rgba(13,20,40,0.92) 0%, rgba(5,7,18,0.92) 100%);
  border: 1px solid rgba(217,184,112,0.35);
  border-radius: 4px;
  padding: 32px 26px 26px;
  text-align: left;
  color: var(--ink-light);
  backdrop-filter: blur(8px);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), border-color 280ms, box-shadow 280ms;
  font-family: inherit;
  overflow: hidden;
}
.mode-card::before, .mode-card::after {
  content: ''; position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--gold);
  pointer-events: none;
}
.mode-card::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.mode-card::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.mode-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-warm);
  box-shadow: 0 20px 60px -10px rgba(217,184,112,0.4),
              inset 0 0 0 1px rgba(217,184,112,0.5);
}
.mode-icon {
  font-size: 42px;
  filter: drop-shadow(0 0 16px rgba(217,184,112,0.6));
  margin-bottom: 12px;
}
/* Image variant (e.g., the hat photo) — fits inside the same slot as the SVG icons */
.mode-icon-img { display: block; line-height: 0; }
.mode-icon-img img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
}
.mode-title {
  font-family: "Cinzel", serif;
  font-size: 22px;
  color: var(--gold-warm);
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.mode-sub {
  color: var(--ink);
  font-size: 15px;
  font-style: italic;
  margin-bottom: 20px;
  line-height: 1.45;
}
.mode-cta {
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--gold);
  text-transform: uppercase;
}
.camera-card {
  background: linear-gradient(160deg, rgba(34,47,91,0.6), rgba(8,11,22,0.92));
}

.footnote {
  margin-top: 42px;
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* ================================================================
   SEO content section (below the fold on landing)
   ================================================================ */
.seo-section {
  width: min(1080px, 100%);
  margin: 64px auto 0;
  padding: 40px 8px 80px;
  color: var(--ink-light);
  text-align: left;
  font-family: "Cormorant Garamond", serif;
}
.seo-block { margin: 0 0 48px; }
.seo-block:last-of-type { margin-bottom: 24px; }
.seo-block h2 {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--gold-warm);
  margin: 0 0 16px;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-shadow: 0 0 24px rgba(217,184,112,0.25);
}
.seo-block p, .seo-block li {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
  color: var(--ink);
}
.seo-block p strong, .seo-block li strong { color: var(--ink-light); }
.seo-block em { color: var(--gold); font-style: italic; }
.seo-intro p { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; }

/* steps */
.seo-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  counter-reset: step;
}
.seo-steps li {
  counter-increment: step;
  position: relative;
  padding: 18px 18px 18px 56px;
  background: rgba(8,12,28,0.55);
  border: 1px solid rgba(217,184,112,0.25);
  border-radius: 12px;
  backdrop-filter: blur(4px);
}
.seo-steps li::before {
  content: counter(step);
  position: absolute; top: 16px; left: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-warm), var(--gold-deep));
  color: #1b1408;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px -2px rgba(217,184,112,0.5);
}

/* house grid */
.house-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.house-card {
  padding: 20px 18px;
  background: linear-gradient(180deg, rgba(13,20,40,0.85), rgba(5,7,18,0.85));
  border: 2px solid var(--hc, var(--gold));
  border-radius: 12px;
  position: relative;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6);
}
.house-card h3 {
  font-family: "Cinzel", serif;
  font-size: 18px;
  margin: 8px 0 6px;
  color: var(--hc, var(--gold-warm));
  letter-spacing: 0.04em;
}
.house-card .hc-icon {
  font-size: 36px;
  filter: drop-shadow(0 0 12px var(--hc, rgba(217,184,112,0.4)));
}
.house-card p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--ink); }

/* FAQ accordions */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: rgba(8,12,28,0.55);
  border: 1px solid rgba(217,184,112,0.25);
  border-radius: 10px;
  padding: 0 18px;
  transition: border-color 200ms;
}
.faq-item[open] { border-color: rgba(217,184,112,0.55); background: rgba(8,12,28,0.72); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 36px 14px 0;
  font-family: "Cinzel", serif;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink-light);
  position: relative;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  text-align: center;
  line-height: 20px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 16px;
  transition: transform 220ms;
}
.faq-item[open] summary::after { content: '−'; transform: translateY(-50%) rotate(180deg); }
.faq-item p {
  padding: 0 0 14px;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

/* footer + language switcher */
.seo-footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(217,184,112,0.18); text-align: center; }
.lang-switcher {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: 14px;
  font-family: "Cinzel", serif;
}
.lang-label { font-size: 11px; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; }
.lang-link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(217,184,112,0.35);
  border-radius: 999px;
  color: var(--ink-light);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.05em;
  transition: all 200ms;
}
.lang-link:hover { border-color: var(--gold-warm); background: rgba(217,184,112,0.10); color: var(--gold-warm); }
.lang-link.active { background: rgba(217,184,112,0.15); border-color: var(--gold-warm); color: var(--gold-warm); }
.seo-disclaimer { font-size: 11px; color: var(--ink-muted); line-height: 1.5; max-width: 540px; margin: 0 auto; }

@media (max-width: 720px) {
  .seo-section { margin-top: 30px; padding: 24px 6px 60px; }
  .seo-block { margin-bottom: 30px; }
  .seo-block h2 { font-size: 18px; margin-bottom: 12px; }
  .seo-intro p { font-size: 15px; }
  .seo-steps { grid-template-columns: 1fr; gap: 10px; }
  .seo-steps li { padding: 14px 14px 14px 50px; font-size: 14px; }
  .house-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .house-card { padding: 14px 12px; }
  .house-card h3 { font-size: 15px; }
  .house-card p { font-size: 13px; }
  .faq-item summary { font-size: 14px; padding: 12px 32px 12px 0; }
  .faq-item p { font-size: 14px; }
  .lang-link { font-size: 12px; padding: 5px 10px; }
}

/* ================================================================
   QUIZ — matches mockup
   ================================================================ */
.quiz-screen { background-color: #04060f; }
/* The screen container is fixed and overflow:hidden by default so the
   canvas-driven AR/game screens don't scroll. The quiz, however, is a
   regular document — on short viewports (small phones, landscape) the
   layout must scroll vertically or the bottom answers get clipped. */
.quiz-screen { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.quiz-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.42) saturate(1.05);
  transition: background-image 700ms, opacity 700ms;
  z-index: 0;
}
.atmosphere-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}

.quiz-topbar {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  column-gap: 22px;
  padding: 22px 40px 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0));
}
.quiz-brand {
  font-family: "Cinzel", serif;
  letter-spacing: 0.35em;
  color: var(--gold);
  font-size: 13px;
  text-transform: uppercase;
}
.quiz-rule {
  display: flex; align-items: center; gap: 10px;
  opacity: 0.85;
}
.rule-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
}
.rule-ornament {
  color: var(--gold);
  font-size: 10px;
  filter: drop-shadow(0 0 6px rgba(217,184,112,0.6));
}
.quiz-counter {
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.quiz-counter span {
  color: var(--gold-warm);
  font-weight: 700;
}
.quiz-exit-btn { margin-left: 8px; }

.quiz-progress-bar {
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 2px;
  background: rgba(217,184,112,0.10);
}
.quiz-progress-bar > div {
  height: 100%;
  width: 10%;
  background: linear-gradient(90deg, transparent, var(--gold-warm), var(--gold));
  box-shadow: 0 0 18px rgba(217,184,112,0.85);
  transition: width 600ms cubic-bezier(.2,.8,.2,1);
}

.quiz-main {
  position: relative; z-index: 3;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  padding: 28px 56px 40px;
  align-items: center;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 980px) {
  .quiz-main { grid-template-columns: 1fr; padding: 16px 20px 24px; gap: 22px; }
}

/* --- ornate framed image --- */
.quiz-figure {
  position: relative;
  margin: 0;
  padding: 14px;
  background: linear-gradient(180deg, rgba(13,20,40,0.75) 0%, rgba(5,8,17,0.75) 100%);
  border: 1px solid rgba(217,184,112,0.55);
  border-radius: 2px;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.85),
    inset 0 0 0 1px rgba(217,184,112,0.18),
    inset 0 0 30px rgba(0,0,0,0.6);
}
.quiz-figure .frame-inner {
  position: relative;
  border: 1px solid rgba(217,184,112,0.45);
  overflow: hidden;
  aspect-ratio: 16/11;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.65);
}
.quiz-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: gentleZoom 24s ease-in-out infinite alternate;
}
@keyframes gentleZoom {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.07) translateX(-1%); }
}

/* corner flourishes */
.corner {
  position: absolute;
  width: 36px; height: 36px;
  pointer-events: none;
}
.corner::before, .corner::after {
  content: ''; position: absolute;
  background: var(--gold);
}
.corner.tl { top: -2px; left: -2px; }
.corner.tr { top: -2px; right: -2px; transform: scaleX(-1); }
.corner.bl { bottom: -2px; left: -2px; transform: scaleY(-1); }
.corner.br { bottom: -2px; right: -2px; transform: scale(-1,-1); }
.corner::before {
  /* vertical arm */
  left: 0; top: 0; width: 1px; height: 20px;
  box-shadow: 4px 0 0 var(--gold);
}
.corner::after {
  /* horizontal arm */
  left: 0; top: 0; width: 20px; height: 1px;
  box-shadow: 0 4px 0 var(--gold);
}

/* --- right panel --- */
.quiz-panel {
  display: flex; flex-direction: column;
  gap: 16px;
  max-width: 620px;
}
.quiz-intro {
  margin: 0;
  font-style: italic;
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.quiz-question {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.22;
  color: var(--ink-light);
  margin: 0 0 10px;
  letter-spacing: 0.005em;
}
.quiz-answers {
  display: flex; flex-direction: column;
  gap: 13px;
}

/* --- answer pills with circular gold badge --- */
.answer {
  position: relative;
  display: flex; align-items: center;
  gap: 16px;
  padding: 12px 22px 12px 14px;
  background: linear-gradient(180deg, rgba(13,20,40,0.70), rgba(5,8,17,0.78));
  border: 1px solid rgba(217,184,112,0.30);
  border-radius: 999px;
  color: var(--ink-light);
  font-size: 15.5px;
  line-height: 1.35;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: all 260ms cubic-bezier(.2,.8,.2,1);
  backdrop-filter: blur(6px);
  min-height: 64px;
}
.answer::before {
  /* subtle inner gold glow on hover */
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 260ms;
  pointer-events: none;
}
.answer:hover {
  border-color: var(--gold);
  transform: translateX(4px);
}
.answer:hover::before {
  box-shadow: inset 0 0 0 1px rgba(217,184,112,0.35), inset 0 0 30px rgba(217,184,112,0.1);
}
.answer.selected {
  border-color: var(--gold-warm);
  background: linear-gradient(180deg, rgba(217,184,112,0.18), rgba(217,184,112,0.05));
  box-shadow: 0 0 0 1px var(--gold-warm), 0 0 50px -12px var(--gold-warm);
}
.answer-letter {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f9e0a4 0%, #d9b870 55%, #8a6326 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: "Cinzel", serif;
  font-weight: 700;
  color: #2a1d05;
  font-size: 16px;
  box-shadow:
    0 4px 14px -4px rgba(217,184,112,0.7),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(0,0,0,0.35);
}
.answer-text { flex: 1; }
.answer.selected .answer-letter {
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(244,213,122,0.8));
}

/* ---- atmosphere DOM effects ---- */
.atmosphere-layer canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.fog-layer {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 0% 80%, rgba(180,200,220,0.35), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 70%, rgba(180,200,220,0.30), transparent 60%);
  filter: blur(20px);
  animation: fogDrift 60s linear infinite alternate;
}
@keyframes fogDrift {
  from { transform: translateX(-6%); }
  to   { transform: translateX(6%); }
}
.moonbeam {
  position: absolute;
  top: -10%; bottom: -10%;
  width: 16%;
  background: linear-gradient(180deg, rgba(255,250,220,0.25), transparent 80%);
  transform: rotate(8deg) translateX(-50%);
  filter: blur(2px);
  mix-blend-mode: screen;
}

/* ================================================================
   AR SCREEN
   ================================================================ */
.ar-screen {
  background: #000;
  perspective: 1200px;
  perspective-origin: 50% 35%;
}
#arVideo, #arCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
/* Subtle "Instagram"-style polish on the live camera feed.
   Boosts contrast and warmth, lifts shadows a touch, and adds a hint
   of saturation so the user's face reads cleanly against the dark
   wizarding-world UI. No filters strong enough to misrepresent the
   user — just camera-app-style auto-tune. */
#arVideo  {
  z-index: 0;
  transform: scaleX(-1);
  filter: contrast(1.08) saturate(1.08) brightness(1.04);
}
#arCanvas { z-index: 1; transform: scaleX(-1); pointer-events: none; }

/* 3D hat — DOM image with real perspective via matrix3d() */
#ar3dHat {
  position: absolute;
  top: 0; left: 0;
  width: 200px;             /* JS sets this each frame */
  height: auto;
  transform-origin: 50% 78%; /* the brim crown — same as canvas anchor */
  will-change: transform, opacity;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
  transition: opacity 220ms ease;
  backface-visibility: hidden;
}

.ar-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.78) 90%);
}

.ar-topbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 20px;
  padding: 20px 30px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
}
.ar-brand {
  font-family: "Cinzel", serif;
  letter-spacing: 0.35em;
  color: var(--gold);
  font-size: 13px;
  text-shadow: 0 2px 6px black;
  text-align: center;
}

.ar-overlay {
  position: absolute; inset: 0;
  background: rgba(2,3,8,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  backdrop-filter: blur(10px);
}
.ar-overlay[hidden] { display: none; }
.ar-overlay-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20,18,30,0.95), rgba(8,8,16,0.95));
  border: 1px solid rgba(217,184,112,0.45);
  border-radius: 6px;
  padding: 40px 36px 32px;
  max-width: 460px;
  text-align: center;
  box-shadow: 0 40px 100px -20px rgba(217,184,112,0.25);
}
.ar-overlay-card::before, .ar-overlay-card::after {
  content: ''; position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--gold);
}
.ar-overlay-card::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.ar-overlay-card::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

.ar-overlay-card h2 {
  font-family: "Cinzel", serif;
  color: var(--gold-warm);
  margin: 16px 0 10px;
  font-size: 26px;
  letter-spacing: 0.04em;
}
.ar-overlay-card p {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  margin: 8px 0 22px;
  font-style: italic;
}
.big-hat {
  font-size: 78px;
  filter: drop-shadow(0 8px 24px rgba(217,184,112,0.55));
  margin-bottom: 6px;
  animation: floatHat 3.5s ease-in-out infinite alternate;
}
@keyframes floatHat {
  from { transform: translateY(-5px) rotate(-3deg); }
  to   { transform: translateY(5px) rotate(3deg); }
}
.muted-small { color: var(--ink-muted); font-size: 12px; margin-top: 10px !important; font-style: normal !important; }

.primary-btn {
  display: inline-block;
  background: linear-gradient(180deg, #f9e0a4 0%, #d9b870 55%, #8a6326 100%);
  border: 1px solid var(--gold-warm);
  color: #1b1408;
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 13px 30px;
  border-radius: 999px;
  font-size: 13px;
  text-transform: uppercase;
  box-shadow:
    0 10px 32px -8px rgba(217,184,112,0.7),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(0,0,0,0.25);
  transition: transform 200ms, box-shadow 200ms, filter 200ms;
}
.primary-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 18px 46px -8px rgba(217,184,112,0.85);
}

.ghost-btn-lg {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(217,184,112,0.45);
  color: var(--gold-warm);
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  padding: 12px 24px;
  border-radius: 999px;
  text-transform: uppercase;
  transition: all 200ms;
}
.ghost-btn-lg:hover { border-color: var(--gold); background: rgba(217,184,112,0.10); color: var(--gold-warm); }

.spinner {
  width: 52px; height: 52px;
  border: 3px solid rgba(217,184,112,0.25);
  border-top-color: var(--gold-warm);
  border-radius: 50%;
  margin: 0 auto 14px;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hat-caption {
  position: absolute;
  /* Caption fills the bottom horizontally but stays clear of the shutter
     button on the right and the AR exit on the left. Bottom anchor so
     it never overlaps the speech-bubble tail. */
  left: 16px; right: 110px;
  bottom: 24px;
  transform: translateY(8px);
  max-width: min(680px, calc(100% - 130px));
  margin: 0 auto;
  padding: 14px 22px;
  background: rgba(7,7,13,0.82);
  border: 1px solid rgba(217,184,112,0.45);
  border-radius: 14px;
  color: var(--ink-light);
  font-style: italic;
  font-size: clamp(15px, 1.7vw, 20px);
  text-align: center;
  line-height: 1.45;
  z-index: 6;
  opacity: 0;
  transition: opacity 380ms ease, transform 380ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.7);
}
.hat-caption::before, .hat-caption::after {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--gold);
}
.hat-caption::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.hat-caption::after  { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
.hat-caption.show {
  opacity: 1; transform: translateY(0);
}

/* ---------------- AR shutter & capture preview ---------------- */
/* Shutter moved to the bottom-right corner so it can't overlap the
   centered caption or the exit ✕ in the top-left. Mobile: shrinks to
   fit a thumb-reach zone (see the responsive override further down). */
.ar-shutter {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 3px solid rgba(255,255,255,0.88);
  z-index: 6;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 120ms ease, background 200ms;
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.6);
}
.ar-shutter:hover { background: rgba(255,255,255,0.18); }
.ar-shutter:active { transform: scale(0.92); }
.shutter-inner {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f9e0a4 0%, #d9b870 55%, #8a6326 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 5px rgba(0,0,0,0.3);
  transition: transform 120ms;
}
.ar-shutter[hidden] { display: none; }

.capture-preview {
  position: absolute; inset: 0;
  background: rgba(2,3,8,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 11;
  backdrop-filter: blur(10px);
  padding: 30px;
}
.capture-preview[hidden] { display: none; }
.capture-preview img {
  max-width: min(90%, 400px);
  max-height: 60vh;
  border: 1px solid rgba(217,184,112,0.5);
  border-radius: 6px;
  box-shadow: 0 30px 80px -15px rgba(0,0,0,0.8);
  margin-bottom: 24px;
}
.capture-actions {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}

.reveal-flash {
  position: absolute; inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  mix-blend-mode: screen;
}
.reveal-flash.flash { animation: revealFlashAnim 800ms ease-out; }
@keyframes revealFlashAnim {
  0%   { opacity: 0; background: rgba(255,255,255,0); }
  20%  { opacity: 1; background: rgba(255,255,255,0.92); }
  60%  { opacity: 0.7; background: var(--flash-color, var(--gold)); }
  100% { opacity: 0; }
}

/* ================================================================
   GAME — Magic Hunt
   ================================================================ */
.game-screen { background: #04060f; }
#gameCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  image-rendering: crisp-edges;
}
.game-topbar {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; column-gap: 16px;
  padding: 18px 26px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
}
.game-brand {
  font-family: "Cinzel", serif;
  letter-spacing: 0.32em;
  color: var(--gold);
  font-size: 13px;
  text-align: center;
  text-shadow: 0 2px 6px black;
}
/* ---- Among Us-style HUD (chunky cards, big targets) ---- */
.avatar-hud {
  position: absolute;
  left: 18px; top: 70px;
  z-index: 4;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px;
  background: rgba(8,12,28,0.78);
  border: 3px solid var(--avatar-color, var(--gold));
  border-radius: 999px;
  box-shadow: 0 8px 30px -10px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  min-width: 180px;
}
.avatar-circle {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.18) 0%, transparent 55%),
              var(--avatar-color, var(--gold));
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px -3px rgba(0,0,0,0.6), inset 0 -4px 12px rgba(0,0,0,0.30);
  position: relative;
  overflow: hidden;
}
.avatar-circle .avatar-canvas {
  position: absolute;
  inset: 0;
  width: 60px !important;
  height: 60px !important;
  pointer-events: none;
}
.avatar-hat {
  font-size: 30px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.avatar-meta {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.avatar-name {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-light);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.avatar-lives {
  display: flex; gap: 4px;
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(255,80,80,0.5));
}
.avatar-lives .heart { color: #ff5870; }
.avatar-lives .heart.empty { color: rgba(255,255,255,0.18); filter: none; }

.task-panel {
  position: absolute;
  left: 18px; top: 145px;
  z-index: 4;
  width: 240px;
  background: rgba(8,12,28,0.78);
  border: 2px solid rgba(217,184,112,0.45);
  border-radius: 14px;
  padding: 12px 14px 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 36px -12px rgba(0,0,0,0.7);
}
.task-panel-title {
  font-family: "Cinzel", serif;
  letter-spacing: 0.30em;
  font-size: 10px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
  text-align: center;
  border-bottom: 1px solid rgba(217,184,112,0.25);
  padding-bottom: 8px;
}
.task-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.task {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 8px;
  color: var(--ink-light);
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  line-height: 1.2;
  transition: all 280ms;
}
.task-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 2px solid var(--gold);
  border-radius: 6px;
  font-size: 14px;
  color: transparent;
  background: rgba(0,0,0,0.4);
  transition: all 280ms;
  font-weight: 900;
}
.task.done .task-check {
  background: var(--gold-warm);
  color: #1b1408;
  border-color: var(--gold-warm);
  box-shadow: 0 0 12px rgba(244,213,122,0.6);
  animation: taskBounce 480ms cubic-bezier(.4, 1.6, .6, 1);
}
.task.done .task-text {
  color: #8f8775;
  text-decoration: line-through;
  animation: taskFade 480ms ease-out;
}
@keyframes taskBounce {
  0%   { transform: scale(0.6) rotate(-12deg); }
  60%  { transform: scale(1.25) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes taskFade {
  0%   { opacity: 0.4; }
  60%  { opacity: 1; transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(0); }
}
.score-num.bumping {
  animation: scoreBump 220ms ease-out;
}
@keyframes scoreBump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); text-shadow: 0 0 18px rgba(244,213,122,0.9); }
  100% { transform: scale(1); }
}
.task-text strong { color: var(--gold-warm); font-family: "Cinzel", serif; font-weight: 700; }
.task-bar {
  grid-column: 2 / 3;
  display: block;
  height: 4px;
  margin-top: 4px;
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
  overflow: hidden;
}
.task-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-warm), var(--gold));
  width: 0;
  transition: width 360ms cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 8px rgba(244,213,122,0.6);
}

.score-pill {
  position: absolute;
  right: 18px; top: 70px;
  z-index: 4;
  padding: 10px 18px 8px;
  background: rgba(8,12,28,0.78);
  border: 2px solid rgba(217,184,112,0.45);
  border-radius: 14px;
  text-align: right;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
  min-width: 120px;
}
.score-num {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 30px;
  color: var(--gold-warm);
  line-height: 1;
  text-shadow: 0 0 14px rgba(244,213,122,0.45);
}
.score-label {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  opacity: 0.9;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .avatar-hud { left: 8px; top: 60px; padding: 8px 12px 8px 8px; min-width: 0; }
  .avatar-circle { width: 42px; height: 42px; }
  .avatar-hat { font-size: 22px; }
  .avatar-name { font-size: 13px; max-width: 90px; }
  .avatar-lives { font-size: 14px; }
  .task-panel { left: 8px; top: 120px; width: 180px; padding: 8px 10px 10px; font-size: 12px; }
  .task { font-size: 12px; }
  .score-pill { right: 8px; top: 60px; padding: 8px 12px 6px; min-width: 90px; }
  .score-num { font-size: 22px; }
}

.game-overlay {
  position: absolute; inset: 0;
  background: rgba(2,3,8,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 8;
  backdrop-filter: blur(8px);
  padding: 30px;
  overflow: hidden;
}
.game-overlay[hidden] { display: none; }
/* floating sparkle backdrop — matches gameplay ambient dust */
.game-overlay::before, .game-overlay::after {
  content: '';
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(244,213,122,0.85), transparent 60%),
    radial-gradient(1px   1px   at 27% 42%, rgba(244,213,122,0.65), transparent 60%),
    radial-gradient(2px   2px   at 48% 22%, rgba(244,213,122,0.70), transparent 60%),
    radial-gradient(1px   1px   at 78% 62%, rgba(244,213,122,0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 30%, rgba(244,213,122,0.55), transparent 60%),
    radial-gradient(1px   1px   at 35% 78%, rgba(244,213,122,0.65), transparent 60%),
    radial-gradient(2px   2px   at 62% 88%, rgba(244,213,122,0.55), transparent 60%),
    radial-gradient(1px   1px   at 8% 70%,  rgba(244,213,122,0.50), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 15%, rgba(244,213,122,0.65), transparent 60%);
  animation: lobbyDrift 28s linear infinite, lobbyTwinkle 4s ease-in-out infinite alternate;
  z-index: 0;
}
.game-overlay::after {
  background-image:
    radial-gradient(1px 1px at 22% 6%,  rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1px 1px at 55% 38%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 88% 70%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1px 1px at 18% 92%, rgba(255,255,255,0.50), transparent 60%),
    radial-gradient(1px 1px at 75% 50%, rgba(255,255,255,0.60), transparent 60%);
  animation: lobbyDrift2 42s linear infinite, lobbyTwinkle 5s ease-in-out 0.5s infinite alternate;
  opacity: 0.7;
}
.game-overlay > .game-card { position: relative; z-index: 1; }
@keyframes lobbyDrift {
  from { transform: translateY(24px) translateX(-10px); }
  to   { transform: translateY(-24px) translateX(10px); }
}
@keyframes lobbyDrift2 {
  from { transform: translateY(-20px) translateX(12px); }
  to   { transform: translateY(20px) translateX(-12px); }
}
@keyframes lobbyTwinkle {
  0%   { opacity: 0.45; }
  100% { opacity: 1; }
}
.game-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20,18,30,0.95), rgba(8,8,16,0.95));
  border: 1px solid rgba(217,184,112,0.45);
  border-radius: 6px;
  padding: 36px 32px;
  max-width: 460px;
  text-align: center;
}
.game-card::before, .game-card::after {
  content: ''; position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--gold);
}
.game-card::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.game-card::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.game-card h2 {
  font-family: "Cinzel", serif;
  color: var(--gold-warm);
  margin: 12px 0 10px;
  font-size: 24px;
  letter-spacing: 0.04em;
}
.game-card p {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  margin: 8px 0 14px;
  font-style: italic;
}
.game-hi {
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 16px;
}
.game-final { color: var(--ink-light) !important; font-size: 13px !important; font-style: normal !important; letter-spacing: 0.25em; font-family: "Cinzel", serif; opacity: 0.85; margin-top: 2px !important; }
.game-final strong { color: var(--gold-warm); font-family: "Cinzel", serif; font-size: 24px; }
.game-record { color: var(--gold-warm) !important; font-size: 14px !important; font-style: italic !important; min-height: 22px; }

/* ---- game over hero + leaderboard ---- */
.game-over-card { padding-top: 22px; }
.over-hero {
  position: relative;
  width: 130px; height: 130px;
  margin: 0 auto 10px;
}
.over-avatar-ring {
  position: relative;
  width: 130px; height: 130px;
  border-radius: 50%;
  border: 4px solid var(--house-ring, var(--gold-warm));
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.18), transparent 55%), var(--house-ring, var(--gold-warm));
  overflow: hidden;
  box-shadow: 0 10px 40px -10px var(--house-ring, rgba(244,213,122,0.6)),
              inset 0 -8px 20px rgba(0,0,0,0.35);
  animation: heroEnter 600ms cubic-bezier(.2,.8,.2,1) both;
}
.over-avatar-ring .avatar-canvas {
  position: absolute; inset: 0;
  width: 130px !important; height: 130px !important;
}
.over-icon-overlay {
  position: absolute;
  bottom: -6px; right: -4px;
  font-size: 42px;
  background: rgba(8,12,28,0.85);
  border: 3px solid var(--house-ring, var(--gold-warm));
  border-radius: 50%;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  animation: iconPop 700ms cubic-bezier(.4, 1.7, .6, 1) 200ms both;
}
@keyframes heroEnter {
  from { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes iconPop {
  from { transform: scale(0); }
  60%  { transform: scale(1.2); }
  to   { transform: scale(1); }
}
.over-meta {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  margin: 0 0 8px;
}
.over-score {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  color: var(--gold-warm);
  text-shadow: 0 0 24px rgba(244,213,122,0.5);
  margin: 6px 0 8px;
  animation: scoreCount 1000ms ease-out both;
}
@keyframes scoreCount {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.mp-leaderboard {
  margin: 16px 0 18px;
  background: rgba(8,12,28,0.55);
  border: 1px solid rgba(217,184,112,0.30);
  border-radius: 12px;
  padding: 12px 14px;
}
.mp-leaderboard ol {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.mp-leaderboard li {
  display: grid;
  grid-template-columns: 24px 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(8,12,28,0.55);
  border: 1px solid rgba(217,184,112,0.20);
  border-radius: 999px;
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
}
.mp-leaderboard li.is-winner {
  border-color: var(--gold-warm);
  background: linear-gradient(90deg, rgba(217,184,112,0.18), rgba(8,12,28,0.55));
  box-shadow: 0 0 18px -4px rgba(244,213,122,0.5);
}
.mp-leaderboard .lb-rank {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 16px;
  text-align: center;
  color: var(--gold);
}
.mp-leaderboard li.is-winner .lb-rank { color: var(--gold-warm); }
.mp-leaderboard .lb-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  position: relative;
  overflow: hidden;
}
.mp-leaderboard .lb-avatar .avatar-canvas {
  position: absolute; inset: 0;
  width: 36px !important; height: 36px !important;
}
.mp-leaderboard .lb-name {
  color: var(--ink-light);
  font-weight: 600;
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-leaderboard .lb-score {
  font-family: "Cinzel", serif;
  font-weight: 700;
  color: var(--gold-warm);
}

.game-joystick {
  position: absolute;
  left: 24px; bottom: 24px;
  width: 110px; height: 110px;
  border: 2px solid rgba(217,184,112,0.4);
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  z-index: 6;
  display: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.joystick-knob {
  position: absolute; left: 50%; top: 50%;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f9e0a4 0%, #d9b870 55%, #8a6326 100%);
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 16px -4px rgba(217,184,112,0.7), inset 0 1px 0 rgba(255,255,255,0.5);
}
@media (hover: none) and (pointer: coarse) {
  .game-joystick { display: block; }
}

.game-card .game-icon { font-size: 70px; filter: drop-shadow(0 0 14px rgba(217,184,112,0.55)); margin-bottom: 4px; }

/* ============ Hidden role / Imposter system ============ */
.role-reveal {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 12;
  background: radial-gradient(ellipse at center, rgba(20,8,4,0.92) 0%, rgba(2,3,8,0.96) 70%);
  backdrop-filter: blur(8px);
  animation: roleFadeIn 240ms ease-out;
}
.role-reveal[hidden] { display: none; }
.role-reveal.is-imposter {
  background: radial-gradient(ellipse at center, rgba(80,8,18,0.95) 0%, rgba(20,2,2,0.98) 70%);
}
@keyframes roleFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.role-card {
  text-align: center;
  padding: 30px 36px 26px;
  background: rgba(8,12,28,0.85);
  border: 3px solid var(--role-border, var(--gold-warm));
  border-radius: 18px;
  box-shadow: 0 0 80px var(--role-glow, rgba(244,213,122,0.55));
  animation: roleCardPop 600ms cubic-bezier(.3, 1.6, .4, 1);
  max-width: 360px;
}
@keyframes roleCardPop {
  0%   { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.role-kicker {
  font-family: "Cinzel", serif;
  letter-spacing: 0.4em;
  font-size: 12px;
  color: var(--role-border, var(--gold));
  text-transform: uppercase;
}
.role-avatar-wrap {
  width: 120px; height: 120px;
  margin: 14px auto 8px;
  border-radius: 50%;
  border: 4px solid var(--role-border, var(--gold-warm));
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.18), transparent 55%), var(--role-border, var(--gold-warm));
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 30px -8px var(--role-glow, rgba(244,213,122,0.7)), inset 0 -8px 16px rgba(0,0,0,0.3);
}
.role-avatar-wrap .avatar-canvas {
  position: absolute; inset: 0;
  width: 120px !important; height: 120px !important;
}
.role-name {
  font-family: "Cinzel", serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--role-text, var(--gold-warm));
  text-shadow: 0 0 18px var(--role-glow, rgba(244,213,122,0.6));
  margin: 6px 0 6px;
  letter-spacing: 0.06em;
}
.role-desc {
  font-style: italic;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 16px;
}
.role-countdown {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 48px;
  color: var(--role-border, var(--gold-warm));
  text-shadow: 0 0 24px var(--role-glow, rgba(244,213,122,0.6));
  margin-top: 4px;
  animation: tickPulse 1s ease-out infinite;
}
@keyframes tickPulse {
  0%   { transform: scale(1); opacity: 1; }
  60%  { transform: scale(1.18); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* in-game imposter banner */
.imposter-banner {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  background: linear-gradient(180deg, rgba(140,18,30,0.95), rgba(60,4,10,0.95));
  border: 2px solid #ff5870;
  border-radius: 999px;
  color: #fff;
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  box-shadow: 0 8px 24px -8px rgba(255,40,80,0.6);
  animation: imposterPulse 2.4s ease-in-out infinite;
}
.imposter-banner[hidden] { display: none; }
@keyframes imposterPulse {
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(255,40,80,0.6); }
  50%      { box-shadow: 0 8px 36px -4px rgba(255,80,110,0.9); }
}
.imposter-icon { font-size: 18px; }
.imposter-text { font-weight: 700; }
.imposter-sub {
  font-size: 10px;
  letter-spacing: 0.16em;
  opacity: 0.85;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
}
@media (max-width: 520px) {
  .imposter-banner { font-size: 10px; padding: 6px 12px; }
  .imposter-sub { display: none; }
}

/* Curse button (bottom-right, big tap target) */
.curse-btn {
  position: absolute;
  right: 24px; bottom: 24px;
  z-index: 6;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #ff7090 0%, #b51e36 60%, #5e0a18 100%);
  border: 4px solid #fff;
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: "Cinzel", serif;
  box-shadow: 0 6px 0 #3a0710, 0 12px 24px -6px rgba(255,40,80,0.6),
              inset 0 -6px 12px rgba(0,0,0,0.35), inset 0 4px 10px rgba(255,255,255,0.25);
  transition: transform 120ms, filter 180ms, box-shadow 180ms;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.curse-btn[hidden] { display: none; }
.curse-btn.armed {
  animation: curseArm 1.2s ease-in-out infinite;
}
.curse-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #3a0710, 0 6px 14px -4px rgba(255,40,80,0.7),
              inset 0 -6px 12px rgba(0,0,0,0.35), inset 0 4px 10px rgba(255,255,255,0.25);
}
.curse-btn:disabled {
  filter: grayscale(0.7) brightness(0.55);
  cursor: not-allowed;
  animation: none;
}
@keyframes curseArm {
  0%, 100% { box-shadow: 0 6px 0 #3a0710, 0 12px 24px -6px rgba(255,40,80,0.6),
                          inset 0 -6px 12px rgba(0,0,0,0.35), inset 0 4px 10px rgba(255,255,255,0.25); }
  50%      { box-shadow: 0 6px 0 #3a0710, 0 12px 36px -2px rgba(255,90,130,1.0),
                          inset 0 -6px 12px rgba(0,0,0,0.35), inset 0 4px 10px rgba(255,255,255,0.45); }
}
.curse-icon { font-size: 28px; line-height: 1; }
.curse-label { font-size: 12px; letter-spacing: 0.18em; margin-top: 4px; font-weight: 700; }
.curse-cd {
  position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
  font-size: 11px;
  font-family: "Cinzel", serif;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
@media (max-width: 520px) {
  .curse-btn { width: 84px; height: 84px; right: 18px; bottom: 18px; }
  .curse-icon { font-size: 22px; }
  .curse-label { font-size: 10px; letter-spacing: 0.14em; }
}

/* imposter reveal banner in leaderboard */
.imposter-reveal {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(140,18,30,0.3), rgba(60,4,10,0.5));
  border: 2px solid #ff5870;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 12px;
  color: #ffd0d8;
}
.imposter-reveal .ir-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid #fff;
  position: relative;
  overflow: hidden;
}
.imposter-reveal .ir-avatar .avatar-canvas { position: absolute; inset: 0; width: 46px !important; height: 46px !important; }
.imposter-reveal .ir-text { text-align: left; }
.imposter-reveal .ir-label { font-family: "Cinzel", serif; font-size: 10px; letter-spacing: 0.25em; color: #ffa0b0; opacity: 0.9; }
.imposter-reveal .ir-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 18px; color: #fff; letter-spacing: 0.04em; }

/* lobby ui */
.g-view[hidden] { display: none; }

/* ---- character preview stage ---- */
.menu-kicker {
  font-family: "Cinzel", serif;
  letter-spacing: 0.35em;
  font-size: 11px;
  color: var(--gold);
  text-align: center;
  margin-bottom: 6px;
  text-transform: uppercase;
  opacity: 0.9;
}
.menu-title {
  font-family: "Cinzel", serif;
  color: var(--gold-warm);
  margin: 4px 0 10px;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-align: center;
}
.character-stage {
  position: relative;
  width: 100%;
  height: 180px;
  margin: 4px 0 14px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.character-preview {
  position: relative;
  z-index: 2;
  width: 160px !important;
  height: 160px !important;
  display: block;
  animation: charFloat 3.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.6));
}
@keyframes charFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
.character-pedestal {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 150px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(217,184,112,0.45) 0%,
    rgba(217,184,112,0.18) 45%,
    transparent 70%);
  z-index: 1;
  animation: pedestalPulse 3.6s ease-in-out infinite alternate;
}
@keyframes pedestalPulse {
  from { transform: translateX(-50%) scale(0.95); opacity: 0.85; }
  to   { transform: translateX(-50%) scale(1.05); opacity: 1; }
}

/* ---- mode tiles (Among Us-style chunky cards) ---- */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 12px;
}
.mode-tile {
  position: relative;
  border: 3px solid var(--tile-border, var(--gold));
  border-radius: 14px;
  padding: 14px 8px 12px;
  background: linear-gradient(180deg, var(--tile-bg-top, #1d264a), var(--tile-bg-bot, #0a0f22));
  color: var(--ink-light);
  font-family: inherit;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms, filter 200ms;
  box-shadow: 0 6px 0 var(--tile-shadow, #08081a), 0 10px 20px -8px rgba(0,0,0,0.6);
}
.mode-tile:hover {
  transform: translateY(-3px);
  filter: brightness(1.10);
  box-shadow: 0 9px 0 var(--tile-shadow, #08081a), 0 14px 26px -8px rgba(0,0,0,0.7);
}
.mode-tile:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--tile-shadow, #08081a), 0 6px 12px -6px rgba(0,0,0,0.7);
}
.mode-tile-icon {
  font-size: 30px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  margin-bottom: 6px;
}
.mode-tile-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--tile-title, var(--gold-warm));
}
.mode-tile-sub {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink);
  margin-top: 4px;
  opacity: 0.85;
  line-height: 1.2;
}
.mode-tile-solo {
  --tile-border: #f4d57a;
  --tile-bg-top: #2a2310;
  --tile-bg-bot: #14100a;
  --tile-shadow: #6b4f17;
  --tile-title: #fff1c2;
}
.mode-tile-create {
  --tile-border: #6fb5d8;
  --tile-bg-top: #1a3144;
  --tile-bg-bot: #0a1622;
  --tile-shadow: #1e4d6a;
  --tile-title: #b6dcf1;
}
.mode-tile-join {
  --tile-border: #b48cd6;
  --tile-bg-top: #2a1c3e;
  --tile-bg-bot: #150b22;
  --tile-shadow: #4a2c6b;
  --tile-title: #d8c0f1;
}
@media (max-width: 520px) {
  .mode-grid { grid-template-columns: 1fr; }
  .mode-tile { padding: 16px 14px; display: grid; grid-template-columns: 50px 1fr; align-items: center; text-align: left; gap: 12px; }
  .mode-tile-icon { font-size: 32px; margin-bottom: 0; }
}

/* ---- avatar canvas (replaces emoji) ---- */
.avatar-canvas {
  display: block;
  width: 100%; height: 100%;
}
.lobby-label {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.lobby-house-pick {
  margin: 14px 0 10px;
  text-align: center;
}
.house-swatches {
  display: flex; gap: 10px; justify-content: center;
}
.house-swatch {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 180ms, border-color 180ms;
  position: relative;
}
.house-swatch:hover { transform: scale(1.1); }
.house-swatch.selected {
  border-color: var(--gold-warm);
  box-shadow: 0 0 18px var(--swatch-color, var(--gold)), inset 0 0 0 2px rgba(255,255,255,0.4);
}
.lobby-input {
  width: 100%;
  background: rgba(8,12,28,0.7);
  border: 1px solid rgba(217,184,112,0.4);
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--ink-light);
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  text-align: center;
  margin: 10px 0;
  outline: none;
  transition: border-color 200ms;
}
.lobby-input:focus { border-color: var(--gold-warm); }
.code-input {
  font-family: "Cinzel", serif;
  font-size: 28px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-warm);
  padding: 14px 0;
}
.lobby-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 14px;
}
@media (max-width: 520px) {
  .lobby-actions { flex-direction: column; align-items: stretch; }
  .lobby-actions button { width: 100%; }
}
.game-card { max-height: 92vh; overflow-y: auto; }
.room-code-display {
  text-align: center;
  margin: 18px 0;
}
.code-pill {
  display: inline-block;
  background: linear-gradient(180deg, rgba(217,184,112,0.18), rgba(8,12,28,0.7));
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 12px 28px;
  font-family: "Cinzel", serif;
  font-size: 30px;
  letter-spacing: 0.4em;
  color: var(--gold-warm);
  margin: 6px 8px;
  text-shadow: 0 0 12px rgba(217,184,112,0.5);
}
.ghost-btn.small { font-size: 12px; padding: 5px 10px; }
.lobby-players { margin: 16px 0; text-align: left; }
.lobby-players ul {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 180px; overflow-y: auto;
}
.lobby-player {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px;
  background: rgba(8,12,28,0.55);
  border: 2px solid var(--player-color, rgba(217,184,112,0.22));
  border-radius: 999px;
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  color: var(--ink-light);
  transition: transform 200ms, box-shadow 200ms;
}
.lobby-player.is-you {
  box-shadow: 0 0 0 1px var(--gold-warm), 0 6px 20px -8px var(--player-color, var(--gold));
  background: linear-gradient(90deg, rgba(217,184,112,0.10), rgba(8,12,28,0.55) 60%);
}
.player-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid #fff;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,0.6), inset 0 -3px 8px rgba(0,0,0,0.25);
}
.player-avatar .avatar-canvas {
  position: absolute; inset: 0;
  width: 44px !important; height: 44px !important;
}
.player-name {
  font-weight: 600;
  font-family: "Cinzel", serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lobby-player .you-tag {
  font-size: 10px;
  letter-spacing: 0.20em;
  color: var(--gold-warm);
  font-family: "Cinzel", serif;
  background: rgba(217,184,112,0.15);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(217,184,112,0.4);
}

/* ================================================================
   RESULT
   ================================================================ */
.result-screen { background-color: #04060f; }
.result-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.40) saturate(1.1);
  z-index: 0;
}
.result-main {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 0 24px 50px;
  overflow-y: auto;
}
.result-crest {
  font-size: 130px;
  filter: drop-shadow(0 0 36px var(--house-glow, rgba(217,184,112,0.7)));
  margin: 8px 0;
  animation: crestEntrance 1200ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes crestEntrance {
  from { transform: scale(0.55) rotate(-14deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.result-house {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(44px, 7vw, 80px);
  margin: 0 0 6px;
  letter-spacing: 0.04em;
  color: var(--house-color, var(--gold-warm));
  text-shadow: 0 0 50px var(--house-glow, rgba(217,184,112,0.5));
}
.secondary-tendency {
  font-style: italic;
  color: var(--ink);
  font-size: 16px;
  margin-bottom: 16px;
  min-height: 22px;
}
.result-desc {
  max-width: 580px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 26px;
  font-style: italic;
}

.distribution {
  width: min(460px, 100%);
  display: flex; flex-direction: column;
  gap: 10px;
  margin: 4px 0 28px;
  padding: 18px 22px;
  background: rgba(8,12,28,0.55);
  border: 1px solid rgba(217,184,112,0.25);
  border-radius: 4px;
  backdrop-filter: blur(6px);
}
.dist-row {
  display: grid;
  grid-template-columns: 110px 1fr 46px;
  align-items: center;
  gap: 12px;
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: var(--ink);
}
.dist-bar {
  height: 8px;
  background: rgba(217,184,112,0.10);
  border-radius: 4px;
  overflow: hidden;
}
.dist-bar > div {
  height: 100%;
  background: var(--bar-color, var(--gold));
  border-radius: 4px;
  width: 0;
  box-shadow: 0 0 14px var(--bar-color, var(--gold));
  transition: width 1100ms cubic-bezier(.2,.8,.2,1);
}
.dist-pct { text-align: right; color: var(--ink-light); }

.result-photo-wrap {
  position: relative;
  margin-bottom: 26px;
  padding: 10px;
  background: rgba(8,12,28,0.6);
  border: 1px solid rgba(217,184,112,0.4);
  border-radius: 2px;
  max-width: 340px;
  box-shadow: 0 30px 70px -15px rgba(0,0,0,0.8);
}
.result-photo-wrap::before, .result-photo-wrap::after {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--gold);
}
.result-photo-wrap::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.result-photo-wrap::after  { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
.result-photo-wrap img { width: 100%; display: block; border: 1px solid rgba(217,184,112,0.3); }

.result-ctas {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

/* ---- Social share row ----------------------------------------- */
/* Row of round icon buttons. Each button shares the result card
   (photo + house) to the chosen platform via that platform's
   official share intent URL + a parallel download of the card
   so the user can attach it. */
.social-share-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.social-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(217, 184, 112, 0.32);
  background: rgba(20, 24, 40, 0.6);
  color: #d9b870;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  padding: 0;
}
.social-btn svg { width: 20px; height: 20px; }
.social-btn:hover {
  transform: translateY(-2px);
  border-color: var(--house-color, #d9b870);
  background: rgba(20, 24, 40, 0.85);
}
.social-btn:active { transform: translateY(0); }
.social-btn.is-copied { background: #1e3a1e; color: #9be88f; border-color: #5fc24e; }

/* Brand tints on hover — keeps the row visually consistent in
   dim state but flashes the right colour when targeted. */
.social-whatsapp:hover { color: #25d366; }
.social-telegram:hover { color: #2aabee; }
.social-x:hover        { color: #ffffff; }
.social-facebook:hover { color: #4267b2; }
.social-reddit:hover   { color: #ff4500; }
.social-email:hover    { color: #f0b070; }
.social-download:hover { color: #9be88f; }
.social-copy:hover     { color: #b9c5ff; }

/* ============================================================
   COMPREHENSIVE RESPONSIVE PASS
   Breakpoints:
     - default desktop (>1024px)
     - tablet     (≤1024px): minor density tweaks
     - phone      (≤720px) : major restructuring
     - small      (≤480px) : compact mode
     - tiny       (≤360px) : ultra-compact
     - landscape  (≤500px height): condensed vertical layout
   ============================================================ */

/* ---- TABLET ---- */
@media (max-width: 1024px) {
  .title { font-size: clamp(30px, 5vw, 52px); margin-bottom: 14px; }
  .subtitle { font-size: 16px; margin-bottom: 24px; }
  /* keep 3 cards in a single row — just shrink padding/gaps */
  .mode-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .mode-card { padding: 22px 18px 18px; }
  .mode-icon { font-size: 34px; margin-bottom: 8px; }
  .mode-icon-img img { width: 50px; height: 50px; }
  .mode-title { font-size: 18px; }
  .mode-sub { font-size: 13.5px; margin-bottom: 14px; }
  .quiz-main { gap: 32px; padding: 22px 36px 32px; }
  .result-main { padding: 0 20px 40px; }
}

/* ---- LARGE PHONE / PORTRAIT TABLET ---- */
@media (max-width: 720px) {
  /* Topbar density */
  .topbar { padding: 14px 16px 10px; }
  .brand-name { display: none; }   /* keep only the mark on tiny tops */
  .brand-mark { font-size: 22px; }

  /* Landing — compact one-screen layout (no scroll) */
  .landing-content {
    padding: 10px 14px 14px;
    justify-content: center;
    overflow: hidden;
    gap: 0;
  }
  .subtitle { display: none; }       /* hide the long description on phones */
  .kicker { font-size: 10px; letter-spacing: 0.26em; padding: 0 22px; margin-bottom: 10px; }
  .kicker::before, .kicker::after { width: 14px; }
  .title { font-size: clamp(28px, 7.5vw, 40px); line-height: 1.02; margin: 0 0 16px; }

  .mode-cards {
    grid-template-columns: 1fr;
    gap: 9px;
    width: 100%;
    max-width: 460px;
  }
  /* Compact row: icon tile · title (+ tiny one-liner) · chevron */
  .mode-card {
    display: grid;
    grid-template-columns: 48px 1fr 20px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    text-align: left;
    min-height: 64px;
  }
  .mode-card::before, .mode-card::after { width: 12px; height: 12px; }
  .mode-icon {
    font-size: 24px;
    margin: 0;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(217,184,112,0.10);
    border-radius: 11px;
    border: 1px solid rgba(217,184,112,0.25);
    filter: drop-shadow(0 0 10px rgba(217,184,112,0.4));
  }
  .mode-icon-img img { width: 38px; height: 38px; }
  .mode-title { font-size: 15px; margin: 0 0 1px; letter-spacing: 0.03em; }
  .mode-sub {
    font-size: 12px;
    margin: 0;
    line-height: 1.25;
    color: var(--ink);
    /* truncate long descriptions to a single tidy line */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Replace the text CTA with a clean gold chevron on the right */
  .mode-cta {
    font-size: 0;
    color: transparent;
    width: 20px;
    display: flex; align-items: center; justify-content: center;
  }
  .mode-cta::after {
    content: '›';
    color: var(--gold);
    font-size: 26px;
    font-family: "Cinzel", serif;
    line-height: 1;
    text-shadow: 0 0 8px rgba(217,184,112,0.6);
  }
  .footnote { margin-top: 14px; font-size: 10.5px; padding: 0 6px; line-height: 1.35; }

  /* Quiz */
  .quiz-topbar { grid-template-columns: 1fr auto auto; column-gap: 8px; padding: 10px 12px 6px; }
  .quiz-rule { display: none; }
  .quiz-brand { font-size: 10.5px; letter-spacing: 0.22em; }
  .quiz-counter { font-size: 10.5px; letter-spacing: 0.10em; }
  .quiz-main {
    grid-template-columns: 1fr; gap: 12px;
    padding: 10px 12px max(18px, env(safe-area-inset-bottom));
    /* Let content size naturally so the page scrolls cleanly */
    align-items: start;
  }
  .quiz-figure { padding: 5px; }
  /* Shorter aspect on phones so all 4 answers fit above the fold */
  .quiz-figure .frame-inner { aspect-ratio: 16/9; }
  .corner { width: 20px; height: 20px; }
  .quiz-intro { font-size: 13.5px; line-height: 1.35; }
  .quiz-question { font-size: clamp(17px, 4.4vw, 22px); margin-bottom: 4px; }
  .quiz-panel { gap: 10px; }
  .quiz-answers { gap: 8px; }
  .answer { font-size: 13.5px; padding: 8px 14px 8px 8px; min-height: 46px; gap: 10px; }
  .answer-letter { flex: 0 0 30px; width: 30px; height: 30px; font-size: 12.5px; }

  /* AR */
  .ar-topbar { padding: 12px 14px; column-gap: 8px; }
  .ar-brand { font-size: 10px; letter-spacing: 0.20em; }
  .ar-overlay-card { padding: 28px 20px 22px; max-width: calc(100% - 32px); }
  .ar-overlay-card h2 { font-size: 20px; }
  .ar-overlay-card p { font-size: 14px; }
  .big-hat { font-size: 56px; }
  /* On phones the caption sits above the shutter (which is now in the
     bottom-right corner) — full width minus a small gap for the shutter. */
  .hat-caption { left: 12px; right: 98px; bottom: 18px; padding: 10px 14px; font-size: 14px; max-width: none; }
  .ar-shutter { width: 64px; height: 64px; right: 16px; bottom: 16px; }
  .shutter-inner { width: 48px; height: 48px; }
  .capture-preview img { max-width: 88%; max-height: 50vh; margin-bottom: 18px; }

  /* Result */
  .result-crest { font-size: 96px; }
  .result-house { font-size: clamp(34px, 8vw, 56px); }
  .result-desc { font-size: 15px; }
  .distribution { padding: 14px 16px; gap: 8px; }
  .dist-row { grid-template-columns: 96px 1fr 40px; gap: 10px; font-size: 11px; }
  .result-photo-wrap { max-width: 260px; }
  .result-ctas { width: 100%; flex-direction: column; }
  .result-ctas .primary-btn, .result-ctas .ghost-btn-lg { width: 100%; }
  /* Social share row: 8 buttons must fit narrow phones. Tighter gap,
     slightly smaller buttons, and allow wrapping cleanly. */
  .social-share-row { gap: 8px; }
  .social-btn { width: 40px; height: 40px; }
  .social-btn svg { width: 18px; height: 18px; }

  /* Game */
  .game-topbar { padding: 12px 14px; }
  .game-brand { font-size: 11px; letter-spacing: 0.25em; }
  .character-stage { height: 150px; margin-bottom: 10px; }
  .character-preview { width: 130px !important; height: 130px !important; }
  .character-pedestal { width: 120px; height: 18px; }
  .menu-title { font-size: 18px; }
  .game-card { padding: 28px 22px; max-height: 88vh; }
  .role-card { padding: 24px 22px 20px; max-width: calc(100% - 32px); }
  .role-avatar-wrap { width: 96px; height: 96px; }
  .role-avatar-wrap .avatar-canvas { width: 96px !important; height: 96px !important; }
  .role-name { font-size: 28px; }
  .role-desc { font-size: 14px; }
  .role-countdown { font-size: 40px; }

  /* Imposter UI */
  .imposter-banner { top: 8px; padding: 6px 12px; }
  .curse-btn { width: 86px; height: 86px; right: 16px; bottom: 16px; }
  .curse-icon { font-size: 24px; }
  .curse-label { font-size: 11px; letter-spacing: 0.14em; }

  /* Touch targets — ensure ≥44px hit area */
  .ghost-btn { padding: 8px 14px; min-height: 36px; }
  .primary-btn { padding: 14px 24px; min-height: 44px; }
  .ghost-btn-lg { padding: 13px 22px; min-height: 44px; }
}

/* ---- SMALL PHONE ---- */
@media (max-width: 480px) {
  /* Even shorter figure on small phones so 4 answers + question fit. */
  .quiz-figure .frame-inner { aspect-ratio: 16/9; max-height: 26vh; }
  .quiz-figure img { height: 100%; object-fit: cover; }
  .quiz-intro { font-size: 13px; line-height: 1.32; margin: 0; }
  .quiz-question { font-size: 17px; line-height: 1.2; }
  .quiz-panel { gap: 8px; }
  .quiz-answers { gap: 7px; }
  .answer { font-size: 13px; padding: 7px 12px 7px 7px; min-height: 44px; gap: 9px; }
  .answer-letter { flex: 0 0 28px; width: 28px; height: 28px; font-size: 12px; }
  .answer-text { line-height: 1.28; }
  .quiz-main { padding: 8px 10px max(14px, env(safe-area-inset-bottom)); gap: 10px; }

  .ar-overlay-card { padding: 22px 16px 18px; }
  .ar-overlay-card h2 { font-size: 18px; }
  .ar-overlay-card p { font-size: 13.5px; line-height: 1.45; }
  .big-hat { font-size: 48px; }
  .hat-caption { font-size: 13.5px; padding: 9px 12px; bottom: 16px; right: 88px; left: 10px; }

  .result-main { padding: 0 14px 30px; }
  .result-crest { font-size: 84px; }
  .result-desc { font-size: 14px; line-height: 1.5; }
  .dist-row { grid-template-columns: 84px 1fr 38px; font-size: 10.5px; letter-spacing: 0.05em; gap: 8px; }
  .result-photo-wrap { max-width: 220px; }
  /* Social row on small phones: tighter still so all 8 buttons fit a
     360 px viewport on one or two compact rows. */
  .social-share-row { gap: 6px; }
  .social-btn { width: 36px; height: 36px; }
  .social-btn svg { width: 16px; height: 16px; }

  .game-card { padding: 22px 16px; }
  .game-card .big-hat { font-size: 50px; }
  .game-card h2 { font-size: 20px; }
  .game-card p { font-size: 14px; }
  .character-stage { height: 130px; }
  .character-preview { width: 110px !important; height: 110px !important; }
  .character-pedestal { width: 100px; height: 14px; }
  .menu-kicker { font-size: 10px; letter-spacing: 0.3em; }
  .menu-title { font-size: 16px; }
  .house-swatch { width: 30px; height: 30px; }
  .lobby-input { font-size: 14.5px; padding: 11px 16px; }
  .code-input { font-size: 22px; letter-spacing: 0.32em; }
  .code-pill { font-size: 22px; padding: 10px 20px; letter-spacing: 0.32em; }
  .lobby-actions { gap: 8px; }
  .mode-tile { padding: 12px 12px; }
  .mode-tile-icon { font-size: 26px; }

  /* In-game HUD compaction for very small phones */
  .avatar-hud { padding: 6px 10px 6px 6px; left: 6px; top: 56px; }
  .avatar-circle { width: 38px; height: 38px; border-width: 2px; }
  .avatar-circle .avatar-canvas { width: 38px !important; height: 38px !important; }
  .avatar-name { font-size: 12px; max-width: 70px; }
  .avatar-lives { font-size: 12px; gap: 2px; }
  .task-panel { left: 6px; top: 110px; width: 154px; padding: 6px 8px 8px; }
  .task-panel-title { font-size: 9px; letter-spacing: 0.22em; margin-bottom: 6px; padding-bottom: 5px; }
  .task { font-size: 11px; gap: 6px; }
  .task-check { width: 18px; height: 18px; border-width: 1.5px; font-size: 11px; }
  .score-pill { right: 6px; top: 56px; padding: 6px 10px 5px; min-width: 78px; }
  .score-num { font-size: 18px; }
  .score-label { font-size: 9px; letter-spacing: 0.18em; }

  .role-name { font-size: 24px; }
  .role-desc { font-size: 13px; }
  .role-countdown { font-size: 34px; }

  .imposter-banner { font-size: 10px; padding: 5px 10px; }
  .imposter-icon { font-size: 14px; }
  .curse-btn { width: 76px; height: 76px; right: 12px; bottom: 12px; border-width: 3px; }
  .curse-icon { font-size: 22px; }
  .curse-label { font-size: 9px; }
  .curse-cd { font-size: 10px; bottom: -22px; }

  .game-joystick { width: 96px; height: 96px; left: 12px; bottom: 12px; }
  .joystick-knob { width: 40px; height: 40px; }

  .mp-leaderboard li { grid-template-columns: 20px 32px 1fr auto; gap: 8px; padding: 5px 10px; font-size: 13px; }
  .mp-leaderboard .lb-avatar { width: 32px; height: 32px; }
  .mp-leaderboard .lb-avatar .avatar-canvas { width: 32px !important; height: 32px !important; }
  .mp-leaderboard .lb-name { font-size: 12px; }
  .imposter-reveal { grid-template-columns: 42px 1fr; gap: 10px; padding: 10px 12px; }
  .imposter-reveal .ir-avatar { width: 40px; height: 40px; }
  .imposter-reveal .ir-avatar .avatar-canvas { width: 40px !important; height: 40px !important; }
  .imposter-reveal .ir-name { font-size: 16px; }
  .over-hero { width: 110px; height: 110px; }
  .over-avatar-ring { width: 110px; height: 110px; border-width: 3px; }
  .over-avatar-ring .avatar-canvas { width: 110px !important; height: 110px !important; }
  .over-icon-overlay { width: 44px; height: 44px; font-size: 32px; }
  .over-score { font-size: 48px; }
}

/* ---- TINY PHONE (≤360px) ---- */
@media (max-width: 360px) {
  .title { font-size: 32px; }
  .subtitle { font-size: 14px; }
  /* Drop the brand chip too — counter + exit are the only things needed */
  .quiz-brand { display: none; }
  .quiz-figure .frame-inner { aspect-ratio: 16/9; max-height: 22vh; }
  .quiz-intro { font-size: 12.5px; line-height: 1.28; }
  .quiz-question { font-size: 16px; line-height: 1.18; }
  .quiz-answers { gap: 6px; }
  .answer { font-size: 12.5px; padding: 6px 11px 6px 6px; min-height: 42px; gap: 8px; }
  .answer-letter { flex: 0 0 26px; width: 26px; height: 26px; font-size: 11px; }
  .avatar-hud { min-width: 0; }
  .avatar-name { max-width: 60px; }
  .task-panel { width: 138px; }
  .score-num { font-size: 16px; }
  .character-preview { width: 96px !important; height: 96px !important; }
  .game-card { padding: 18px 12px; }
  /* Tiny phones: shrink social row + landing cards to fit 320–360 px */
  .social-share-row { gap: 5px; }
  .social-btn { width: 32px; height: 32px; }
  .social-btn svg { width: 15px; height: 15px; }
  .mode-card { padding: 14px 12px; }
  .mode-icon { font-size: 26px; margin-bottom: 4px; }
  .mode-title { font-size: 15px; }
  .mode-sub { font-size: 12px; line-height: 1.3; }
}

/* ---- LANDSCAPE PHONE (short height) ---- */
@media (orientation: landscape) and (max-height: 500px) {
  .landing-content {
    padding: 6px 18px 8px;
    justify-content: center;
    overflow: hidden;
  }
  .subtitle { display: none; }
  .title { font-size: clamp(22px, 5vh, 32px); margin: 0 0 8px; line-height: 1; }
  .kicker { margin-bottom: 6px; font-size: 9px; }
  .footnote { display: none; }
  /* Three cards in a single horizontal row */
  .mode-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 720px;
  }
  .mode-card {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto;
    padding: 8px 10px;
    gap: 8px;
    min-height: 0;
  }
  .mode-card::before, .mode-card::after { display: none; }
  .mode-icon { width: 40px; height: 40px; font-size: 20px; border-radius: 9px; }
  .mode-title { font-size: 12px; letter-spacing: 0.02em; line-height: 1.1; }
  .mode-sub { display: none; }
  .mode-cta { display: none; }

  /* Landscape phones: viewport is wide but very short (≤500px). Two-
     column layout with a small figure on the left + tight panel on the
     right so the question + 4 answers stay above the fold. */
  .quiz-main {
    padding: 6px 14px max(10px, env(safe-area-inset-bottom));
    gap: 12px;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    align-items: center;
    min-height: 0;
  }
  .quiz-figure { padding: 3px; }
  .quiz-figure .frame-inner { aspect-ratio: auto; height: 70vh; max-height: 360px; }
  .quiz-intro { font-size: 12px; line-height: 1.25; margin: 0; }
  .quiz-question { font-size: 15.5px; line-height: 1.15; margin: 0 0 4px; }
  .quiz-answers { gap: 5px; }
  .answer { font-size: 12.5px; padding: 6px 11px 6px 6px; min-height: 38px; gap: 8px; }
  .answer-letter { flex: 0 0 26px; width: 26px; height: 26px; font-size: 11.5px; }
  .quiz-topbar { padding: 6px 10px 4px; }
  .quiz-brand { display: none; }

  .result-crest { font-size: 60px; margin: 4px 0; }
  .result-house { font-size: 34px; }
  .result-desc { font-size: 13px; margin-bottom: 14px; }
  .distribution { padding: 10px 14px; gap: 6px; margin-bottom: 18px; }

  .character-stage { height: 90px; margin-bottom: 6px; }
  .character-preview { width: 80px !important; height: 80px !important; }
  .character-pedestal { width: 80px; height: 12px; }
  .menu-title { font-size: 16px; margin-bottom: 6px; }
  .menu-kicker { margin-bottom: 4px; }
  .game-card { max-height: 96vh; padding: 16px 18px; }
  .role-card { max-height: 96vh; padding: 14px 22px 14px; }
  .role-avatar-wrap { width: 70px; height: 70px; margin: 6px auto 4px; }
  .role-avatar-wrap .avatar-canvas { width: 70px !important; height: 70px !important; }
  .role-name { font-size: 22px; }
  .role-desc { font-size: 12.5px; margin-bottom: 6px; }
  .role-countdown { font-size: 28px; }

  .ar-overlay-card { padding: 18px 20px; max-width: 360px; }
  .big-hat { font-size: 36px; }

  /* HUD: shift things closer to corners on landscape */
  .avatar-hud { top: 50px; }
  .task-panel { top: 100px; max-height: calc(100vh - 110px); overflow-y: auto; }
  .score-pill { top: 50px; }
  .curse-btn { right: 14px; bottom: 14px; width: 70px; height: 70px; }
  .game-joystick { left: 14px; bottom: 14px; width: 86px; height: 86px; }
}

/* ---- ENSURE FORM ELEMENTS DON'T ZOOM ON iOS ---- */
input, button { font-size: 16px; }
@media (max-width: 720px) {
  .lobby-input, .code-input { font-size: 16px; }
}

/* ---- TOUCH-DEVICE TWEAKS ---- */
@media (hover: none) and (pointer: coarse) {
  .mode-card:hover { transform: none; }
  .mode-tile:hover { transform: none; filter: none; }
  .answer:hover { transform: none; }
  /* hide hover-only effects on touch */
  .ghost-btn:hover { background: rgba(0,0,0,0.45); border-color: rgba(217,184,112,0.35); }
}

/* ---- SAFE-AREA INSETS (iPhone notches) ---- */
.topbar,
.quiz-topbar,
.ar-topbar,
.game-topbar {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.avatar-hud { left: max(8px, env(safe-area-inset-left)); }
.score-pill { right: max(8px, env(safe-area-inset-right)); }
.task-panel { left: max(8px, env(safe-area-inset-left)); }
.curse-btn { right: max(16px, env(safe-area-inset-right)); }
.game-joystick { left: max(16px, env(safe-area-inset-left)); }