/* ============================================================================
   EMOJI RIDDLE (em-) — all surfaces, scoped selectors, tokens only.
   Wall: .screen-body · Phone: .play-body · Admin: #dash
   ========================================================================== */

/* Open symbol font; country/tag flags render consistently on Windows too.
   Brand typography remains in the theme. License/source ship beside this face. */
@font-face { font-family:'Emoji Riddle Symbols'; src:url('/games/emoji/fonts/Noto-COLRv1.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }

/* ---------- shared: crisp colour-emoji rendering + float motion ---------- */
.screen-body .em-hero,
.play-body .em-play-hero,
#dash .em-live-emoji,
#dash .em-emoji-input {
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', 'EmojiOne Color', sans-serif;
}

@keyframes emFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1.2vh) scale(1.025); }
}
@keyframes emGlowPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ---------- progressive reveal (hintMode) — wall AND phone hero ----------
   Hidden graphemes render as dimmed ▢ placeholder slots; a newly revealed
   emoji pops in (the class is removed → reflow → re-added to retrigger). */
@keyframes emPopIn {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.16); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.screen-body .em-hero .em-g,
.play-body .em-play-hero .em-g { display: inline-block; }
.screen-body .em-hero .em-g-hidden,
.play-body .em-play-hero .em-g-hidden { opacity: 0.22; transform: scale(0.88); }
.screen-body .em-hero .em-pop,
.play-body .em-play-hero .em-pop { animation: emPopIn 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both; }

/* =========================== BIG SCREEN (wall) ============================ */

/* Hero emoji — enormous, floating, with a soft warm gradient glow behind it
   (gold/orange live ONLY inside gradients — this is a radial gradient). */
.screen-body .em-hero-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.screen-body .em-hero-wrap::before {
  content: '';
  position: absolute;
  inset: -18% -26%;
  background: radial-gradient(closest-side, rgba(var(--tint-orange-soft), 0.18) 0%, rgba(var(--tint-gold), 0.10) 45%, rgba(0, 0, 0, 0) 72%);
  animation: emGlowPulse 3.6s ease-in-out infinite;
  pointer-events: none;
}
.screen-body .em-hero {
  position: relative;
  font-size: calc(18 * var(--wt));
  line-height: 1.18;
  text-align: center;
  letter-spacing: 0.05em;
  filter: drop-shadow(0 1.6vh 5vh rgba(0, 0, 0, 0.55));
  animation: emFloat 3.8s ease-in-out infinite;
}
.screen-body .em-hero.em-ask { font-size: calc(15 * var(--wt)); animation-duration: 4.6s; }

/* Intro: ROUND X → emoji → WHAT IS IT? */
.screen-body .em-intro {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2vh;
  text-align: center;
}
.screen-body .em-what {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: calc(5.6 * var(--wt));
  letter-spacing: 0.02em;
  color: var(--text);
}

/* Asking / reveal: emoji stays the hero above the option tiles. */
.screen-body .em-screen { gap: 2.6vh; }
.screen-body .em-top { align-items: center; }
.screen-body .em-top-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1vh; }
.screen-body .em-what-sub {
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: calc(3.7 * var(--wt));
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.screen-body .em-options .q-option { font-size: calc(4.2 * var(--wt)); }

/* Light (championship) wall variant keeps type legible on the off-white render. */
.screen-body.light .em-what { color: var(--ewc-charcoal); }
.screen-body.light .em-what-sub { color: rgba(var(--tint-on-accent), 0.65); }

/* ============================== PHONE (play) ============================== */

.play-body .em-play-hero {
  font-size: 56px;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0.04em;
  margin: 4px 0 2px;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
  animation: emFloat 3.6s ease-in-out infinite;
}
.play-body .em-play-what {
  text-align: center;
  font-family: var(--font-narrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.play-body .em-answer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 14px;
  color: var(--text-dim);
}
.play-body .em-answer-chip b { color: var(--text); font-weight: 700; }

/* ============================== ADMIN (#dash) ============================= */

#dash .em-hidden { display: none; }

#dash .em-builder { margin-bottom: 0; }
#dash .em-round {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
#dash .em-round-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#dash .em-round-num {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  color: var(--text-dim);
}
#dash .em-round-spacer { flex: 1; }
#dash .em-round-grid { display: grid; grid-template-columns: minmax(170px, 0.8fr) 1.6fr; gap: 14px; }
#dash .em-round-grid .field { margin-bottom: 0; }
#dash .em-emoji-input { font-size: 24px; line-height: 1.3; }

#dash .em-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#dash .em-opt-row { display: flex; align-items: center; gap: 8px; }
#dash .em-opt-row input[type='text'] { flex: 1; min-width: 0; }

/* "Correct answer" radio — the theme's custom radio; the green :checked
   state is provided globally in admin.css (.em-correct input:checked). */
#dash .em-correct { display: inline-flex; align-items: center; flex-shrink: 0; cursor: pointer; }

#dash .em-builder-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
#dash .em-round-count {
  margin-left: auto;
  font-family: var(--font-narrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--text-dim);
}

/* Builder goes view-only when another operator holds the stage. */
#dash .tab.locked .em-builder,
#dash .tab.locked .em-builder-actions { opacity: 0.5; pointer-events: none; }

/* Progressive-reveal config: "Start with N" only counts while the toggle is on. */
#dash .em-hint-row input#emHintStart:disabled { opacity: 0.45; }

/* Live control: the current emoji reads at a glance. */
#dash .em-live-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
#dash .em-live-emoji { font-size: 30px; line-height: 1.2; }
#dash .em-live-count {
  font-family: var(--font-narrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: var(--text-dim);
}

@media (max-width: 860px) {
  #dash .em-round-grid { grid-template-columns: 1fr; }
  #dash .em-opts { grid-template-columns: 1fr; }
}

/* ---- Wall contrast hardening (busy KV) — legibility only, no layout change ----
   "WHAT IS IT?" (intro title + round sub-label, both .em-what) sits directly on
   the KV with no panel behind it, so lift it off the busy render with a soft dark
   shadow — matching the shared scenes. Reset in the light (championship) variant
   where the text is charcoal on the off-white render. */
.screen-body .em-what { text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7); }
.screen-body.light .em-what { text-shadow: none; }

/* Answer tiles: the board sat in the lower third with ~28vh of stage doing
   nothing above it. Two rows grow ~32px in total — well inside that. */
.screen-body .em-options .q-option { font-size: calc(5.4 * var(--wt)); }




/* Operator round control and server-backed history. */
#dash #tab-emoji .em-op { display: grid; gap: 14px; min-width: 0; font: 400 12px/1.5 var(--font-body); }
#dash #tab-emoji .em-op-flow { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 6px; }
#dash #tab-emoji .em-op-flow li { padding: 4px 9px; border-radius: 5px; background: var(--surface-2); color: var(--text-faint); }
#dash #tab-emoji .em-op-flow li.is-current { color: var(--text); background: var(--surface-3); box-shadow: inset 0 -2px var(--gold); }
#dash #tab-emoji .em-op-flow li.is-done { color: var(--text-dim); }
#dash #tab-emoji .em-op-current { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; padding: 14px; background: var(--surface); min-width: 0; }
#dash #tab-emoji .em-op-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#dash #tab-emoji .em-op-heading span { color: var(--text-dim); }
#dash #tab-emoji .em-op-question { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; margin-bottom: 10px; white-space: pre-wrap; }
#dash #tab-emoji .em-op-body { display: grid; gap: 12px; }
#dash #tab-emoji .em-op-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 10px 16px; margin: 0; padding: 0; }
#dash #tab-emoji .em-op-metrics dt { font-size: 11px; color: var(--text-faint); }
#dash #tab-emoji .em-op-metrics dd { margin: 3px 0 0; color: var(--text); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
#dash #tab-emoji .em-op-split { display: grid; gap: 8px; }
#dash #tab-emoji .em-op-option-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
#dash #tab-emoji .em-op-option-head span { min-width: 0; overflow-wrap: anywhere; }
#dash #tab-emoji .em-op-option-head b { flex: none; font-weight: 450; font-variant-numeric: tabular-nums; color: var(--text-dim); }
#dash #tab-emoji .em-op-option.is-correct .em-op-option-head span { color: var(--success); }
#dash #tab-emoji .em-op-track { height: 5px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
#dash #tab-emoji .em-op-track > span { display: block; height: 100%; background: var(--gold); transition: width 160ms linear; }
#dash #tab-emoji .em-op-progress { display: grid; gap: 5px; color: var(--text-dim); }
#dash #tab-emoji .em-op-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#dash #tab-emoji .em-op-actions .btn { height: auto; min-height: 34px; white-space: normal; text-align: left; }
#dash #tab-emoji .em-op-history { min-width: 0; border-top: 1px solid var(--line); padding-top: 12px; }
#dash #tab-emoji .em-op-history h4 { margin: 0 0 8px; font: 500 12px/1.5 var(--font-body); color: var(--text-dim); }
#dash #tab-emoji .em-op-empty { margin: 0; color: var(--text-faint); }
#dash #tab-emoji .em-op-round { padding: 0; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
#dash #tab-emoji .em-op-round summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; cursor: pointer; }
#dash #tab-emoji .em-op-round summary b { font-weight: 500; flex: 1; }
#dash #tab-emoji .em-op-round summary span { color: var(--text-faint); }
#dash #tab-emoji .em-op-round summary::before { content: '›'; color: var(--text-faint); }
#dash #tab-emoji .em-op-round[open] summary::before { content: '⌄'; }
#dash #tab-emoji .em-op-round summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#dash #tab-emoji .em-op-round > .em-op-body { padding-bottom: 14px; }
#dash #tab-emoji .em-op-history-question { margin-bottom: 10px; color: var(--text-dim); overflow-wrap: anywhere; }
#dash #tab-emoji .em-op-image { display: block; width: 80px; height: 64px; object-fit: contain; margin-bottom: 10px; border-radius: 6px; background: var(--bg); }
#dash #tab-emoji .em-op-media { display: block; margin-bottom: 10px; color: var(--text-dim); }
#dash #tab-emoji .em-op-survivors { margin: 0; }
#dash #tab-emoji .em-op-survivors figcaption { margin-bottom: 8px; color: var(--text-dim); }
#dash #tab-emoji .em-op-chart { display: flex; align-items: end; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
#dash #tab-emoji .em-op-chart > div { display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 3px; min-width: 22px; flex: 1; }
#dash #tab-emoji .em-op-chart span { width: 100%; max-width: 28px; background: var(--gold); border-radius: 3px 3px 0 0; }
#dash #tab-emoji .em-op-chart b, #dash #tab-emoji .em-op-chart small { font-size: 10px; font-weight: 400; color: var(--text-faint); }
@media (prefers-reduced-motion: reduce) { #dash #tab-emoji .em-op-track > span { transition: none; } }

/* Emoji-specific visuals within the shared operator desk. */
#dash #tab-emoji .em-riddle,
#dash #tab-emoji .lfs-round-link > span:last-child {
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}
#dash #tab-emoji .em-riddle { font-size: 44px; line-height: 1.4; letter-spacing: .04em; overflow-wrap: anywhere; }
#dash #tab-emoji .lfs-question-empty { display: block; min-height: 0; padding: 0; }
#dash #tab-emoji .lfs-question-empty h2 { margin-top: 6px; font-size: 20px; }
#dash #tab-emoji .lfs-empty-copy > p { margin-bottom: 16px; }
#dash #tab-emoji .em-reveal-toggle { display: flex; align-items: center; gap: 9px; min-height: 36px; }
#dash #tab-emoji .lfs-round-link > span:last-child { font-size: 21px; }
#dash #tab-emoji .lfs-round-actions { flex-wrap: wrap; }
#dash #tab-emoji .lfs-round-link { overflow-wrap: anywhere; }
/* Emoji broadcast uses the common canvas/background in both owner variants. */
.tb-root .eb-round { display:grid; grid-template-rows:60px 224px minmax(0,1fr) 112px; gap:20px; }
.tb-root .eb-round[data-phase='intro'] { grid-template-rows:60px minmax(0,1fr) 0px 112px; }
.tb-root .eb-heading { display:grid; grid-template-columns:300px minmax(0,1fr) 300px; align-items:center; gap:20px; min-width:0; }
.tb-root .eb-meta { flex:none; min-width:250px; height:48px; display:flex; align-items:center; }
.tb-root .eb-phase { grid-column:2; height:60px; display:flex; align-items:center; justify-content:center; text-align:center; font:650 52px/1.15 var(--tb-font); unicode-bidi:plaintext; }
.tb-root .eb-clue { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; min-height:0; }
.tb-root .eb-symbols { --eb-slots:3; --eb-rows:1; --eb-gap:16px; --eb-cell:150px; --eb-height:150px; --eb-glyph:120px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--eb-gap); width:min(1550px,calc(var(--eb-slots) * var(--eb-cell) + (var(--eb-slots) - 1) * var(--eb-gap))); max-width:100%; direction:ltr; }
.tb-root .eb-symbol { --eb-slot-width:min(var(--eb-cell),calc((1550px - var(--eb-gap) * (var(--eb-slots) - 1)) / var(--eb-slots))); --eb-slot-height:min(var(--eb-cell),calc((var(--eb-height) - var(--eb-gap) * (var(--eb-rows) - 1)) / var(--eb-rows))); width:var(--eb-slot-width); height:var(--eb-slot-height); flex:none; display:flex; align-items:center; justify-content:center; font:min(var(--eb-glyph),calc(var(--eb-slot-width) * .82),calc(var(--eb-slot-height) * .88))/1 'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif; border-radius:24px; background:linear-gradient(135deg,var(--tb-surface-top),var(--tb-surface)); box-shadow:0 6px 0 var(--tb-base); transform-origin:top left; }
.tb-root .eb-round[data-phase='intro'] .eb-clue { padding-bottom:180px; }
.tb-root .eb-round[data-phase='intro'] .eb-symbols { --eb-cell:300px; --eb-height:300px; --eb-glyph:240px; --eb-gap:24px; }
.tb-root .eb-symbol.is-hidden { position:relative; background:var(--tb-base); box-shadow:inset 0 0 0 2px var(--tb-border); }
.tb-root .eb-symbol.is-hidden::after { content:''; width:34px; height:34px; border-radius:10px; border:5px solid var(--tb-muted); opacity:.55; }
.tb-root .eb-symbol-progress { height:40px; font:500 30px/1.25 var(--tb-font); color:var(--tb-muted); unicode-bidi:plaintext; }
.tb-root .eb-answer-area { position:relative; min-height:0; min-width:0; }
.tb-root .eb-read-prompt { position:absolute; top:570px; left:0; right:0; height:100px; display:flex; align-items:center; justify-content:center; font:650 72px/1.2 var(--tb-font); text-align:center; opacity:0; visibility:hidden; transform:translateY(-20px); transition:opacity .22s,transform .22s,visibility 0s .22s; }
.tb-root .eb-round[data-phase='intro'] .eb-read-prompt { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.tb-root .eb-answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:20px; height:100%; }
.tb-root .eb-answers[data-count='2'] { grid-template-rows:1fr; }
.tb-root .eb-answers[data-count='3'] .eb-answer:last-child { grid-column:1 / -1; width:calc(50% - 10px); justify-self:center; }
/* Answer surfaces, symbols, verdicts and distribution share Trivia/Polls components. */
.tb-root .eb-answer { --option-color:var(--eb-option-0); --eb-option-0:#E14B57; --eb-option-1:#3d8bff; --eb-option-2:#C8922E; --eb-option-3:#2faa63; animation-delay:calc(450ms + var(--answer-order) * 65ms); }
.tb-root .eb-answer[data-option='1'] { --option-color:var(--eb-option-1); }
.tb-root .eb-answer[data-option='2'] { --option-color:var(--eb-option-2); }
.tb-root .eb-answer[data-option='3'] { --option-color:var(--eb-option-3); }
.tb-root .eb-round[data-phase='reveal'] .eb-answer-detail { opacity:1; }
.tb-root .eb-percent { min-width:130px; justify-content:flex-end; }
.tb-root .eb-footer { display:grid; grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr); align-items:center; gap:24px; min-width:0; }
.tb-root .eb-cue { grid-column:1; min-width:0; height:84px; display:flex; align-items:center; font:500 34px/1.25 var(--tb-font); unicode-bidi:plaintext; }
.tb-root .eb-clock { grid-column:2; grid-row:1; }
.tb-root .eb-round.is-urgent .tb-clock-progress { stroke:var(--tb-alert); }
.tb-root .eb-round.is-urgent .tb-clock-number { color:var(--tb-alert); }
.tb-root .eb-round[data-phase='intro'] .tb-clock-progress { opacity:.45; }
.tb-root[data-mainboard-layout='ewc26'] .eb-symbol { border-radius:0; box-shadow:none; background:var(--tb-base); }
.tb-root[data-mainboard-layout='ewc26'] .eb-symbol.is-hidden { background:var(--tb-surface); border:2px solid var(--tb-border); }
.tb-root[data-mainboard-layout='ewc26'] :is(.eb-phase,.eb-read-prompt) { font-family:var(--tb-display); }
.tb-root[data-mainboard-layout='ewc26'].is-arabic :is(.eb-phase,.eb-read-prompt) { font-family:var(--tb-font); }
@media (prefers-reduced-motion:reduce) { .tb-root .eb-round * { animation:none !important; transition:none !important; } }
.play-body .em-play-hero { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; animation:none; }
.play-body .em-play-hero .em-g { min-width:48px; }
.play-body .em-play-hero .em-g-hidden { width:48px; height:56px; border:3px solid var(--text-dim); border-radius:12px; align-self:center; }
#dash #tab-emoji .em-hint-monitor { margin:18px 0; padding:0; }
#dash #tab-emoji .em-hint-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-bottom:12px; }
#dash #tab-emoji .em-hint-slots { display:flex; flex-wrap:wrap; gap:8px; direction:ltr; }
#dash #tab-emoji .em-hint-slot { width:72px; height:72px; display:grid; place-items:center; border-radius:10px; font:44px/1 'Segoe UI Emoji','Apple Color Emoji',sans-serif; background:var(--surface-3); }
#dash #tab-emoji .em-hint-slot.is-hidden { opacity:.35; }
#dash #tab-emoji .em-answer-share { font:600 14px/1.4 var(--font-body); color:var(--text-dim); min-width:92px; text-align:right; }
#dash #tab-emoji .em-danger { background:rgba(var(--tint-danger),.12); border-color:var(--danger-soft); color:var(--danger-soft); }
#dash #tab-emoji .em-danger:hover { background:rgba(var(--tint-danger),.22); }
#dash #tab-emoji .em-title { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
#dash #tab-emoji .em-hint-settings { display:grid; grid-template-columns:1fr 170px; gap:12px; padding-top:16px; margin-top:16px; border-top:1px solid var(--line); }
#dash #tab-emoji .em-hint-settings > p { grid-column:1 / -1; }
@media(max-width:600px) { #dash #tab-emoji .em-hint-settings { grid-template-columns:1fr; } }
.tb-root[data-audience-game='emoji'] .tb-hero-title > span { height:200px; flex:none; display:flex; align-items:center; line-height:1.2; }
.tb-root[data-audience-game='emoji'][data-mainboard-layout='ewc26'] .tb-hero-title > span { height:280px; --tb-fit-max:240; --tb-fit-min:64; justify-content:center; }
.tb-root[data-audience-game='emoji'].is-arabic .tb-hero-title > span { height:210px; line-height:1.4; --tb-fit-max:140; }
.tb-root .eb-answer-text { flex-direction:column; justify-content:center; align-items:stretch; }

.tb-root .eb-symbol,
.play-body .em-play-hero,
#dash #tab-emoji :is(.em-riddle,.em-hint-slot,.lfs-round-link > span:last-child) { font-family:'Emoji Riddle Symbols','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif; }
.lfs-picker[aria-labelledby='emPickerTitle'] .lfs-close { width:36px; height:36px; min-width:36px; min-height:36px; }