/* ── Variables ───────────────────────────────────────────────── */
/* v3 : variables EmojiX entièrement renommées en --ex-* pour ne plus
        risquer de polluer les variables du design-system partagé.
        Au lieu de --red (orange dans EmojiX, qui écrasait le rouge
        du logo pomme.gg dans le header partagé), on a maintenant
        --ex-orange. Les variables génériques (--bg, --text, --muted,
        etc.) restent scopées au body class EmojiX en complément, par
        sécurité, pour qu'aucune valeur EmojiX ne fuie hors du body. */
body.home-body,
body.admin-body,
body.duel-body,
body.viewer-body {
  --bg:      #070707;
  --s1:      #0c0c0c;
  --s2:      #111111;
  --s3:      #181818;
  --s4:      #242424;
  --s5:      #2e2e2e;
  --ex-orange:      #ff8c42;
  --ex-orange-l:    #ffa15c;
  --ex-orange-d:    rgba(255,140,66,.12);
  --ex-orange-glow: rgba(255,140,66,.3);
  --orange:  #ff8c42;
  --gold-accent: #ffd166;
  --text:    #eeeeee;
  --muted:   #666;
  --dim:     #333;
  --green:   #00e676;
  --warn:    #ff9100;
  --gold:    #ffd700;
  --twitch:  #9147ff;
  --r:  0px;
  --rl: 2px;
  --t:  .15s ease;
  --mono: 'Space Mono','Courier New',monospace;
  --sans: 'Inter',system-ui,sans-serif;
  --border: 1px solid var(--s4);
}

/* ── Ornement motif CREATIVITE (en coin de bloc) ──────────── */
.ex-ornament {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}
.ex-ornament svg { display: block; width: 100%; height: 100%; }

/* Garantit qu'un parent contenant un .ex-ornament est positionné */
.vw-form-hero { position: relative; }

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  overflow: hidden;
}
/* scanline noise */
body::after {
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0px,rgba(0,0,0,.03) 1px,transparent 1px,transparent 2px);
}
.hidden { display:none !important; }
.text-muted { color:var(--muted);font-size:.85rem; }

/* ── Views ───────────────────────────────────────────────────── */
.view { display:none;position:fixed;inset:0;flex-direction:column;overflow-y:auto; }
.view.active { display:flex; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  border:var(--border);border-radius:var(--r);background:transparent;color:var(--text);
  font-size:.75rem;font-weight:700;font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.1em;cursor:pointer;
  transition:all var(--t);white-space:nowrap;padding:.6rem 1.2rem;
}
.btn:disabled { opacity:.2;cursor:not-allowed; }
.btn-primary { background:var(--ex-orange);border-color:var(--ex-orange);color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--ex-orange-l);border-color:var(--ex-orange-l);box-shadow:0 0 24px var(--ex-orange-glow); }
.btn-secondary { border-color:var(--s5);color:var(--muted); }
.btn-secondary:hover:not(:disabled) { border-color:var(--text);color:var(--text); }
.btn-warn { border-color:var(--warn);color:var(--warn); }
.btn-warn:hover:not(:disabled) { background:rgba(255,145,0,.08); }
.btn-danger { border-color:var(--ex-orange);color:var(--ex-orange);opacity:.6; }
.btn-danger:hover:not(:disabled) { opacity:1;background:var(--ex-orange-d); }
.btn-ghost { border:none;color:var(--muted); }
.btn-ghost:hover { color:var(--text); }
.btn-twitch { background:var(--twitch);border-color:var(--twitch);color:#fff; }
.btn-twitch:hover { background:#7b35e8;border-color:#7b35e8; }
.btn-lg { padding:.85rem 2rem;font-size:.82rem; }
.btn-sm { padding:.28rem .65rem;font-size:.68rem; }
.btn-full { width:100%; }

/* ── Inputs ──────────────────────────────────────────────────── */
input[type=text],input[type=number],select,.ctrl-input {
  background:var(--s2);border:var(--border);color:var(--text);
  padding:.65rem .9rem;font-size:.88rem;width:100%;
  font-family:var(--mono);letter-spacing:.03em;
  transition:border-color var(--t);border-radius:var(--r);
}
input:focus,select:focus { outline:none;border-color:var(--ex-orange); }
input::placeholder { color:var(--dim); }
.field { display:flex;flex-direction:column;gap:.4rem; }
.field label {
  font-family:var(--mono);font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
}
.row-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem; }

/* ── Status pills ────────────────────────────────────────────── */
.status-pill {
  font-family:var(--mono);padding:.15rem .5rem;font-size:.65rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  border:var(--border);border-radius:var(--r);
}
.status-pill.connected   { border-color:var(--green);color:var(--green); }
.status-pill.connecting  { border-color:var(--warn);color:var(--warn); }
.status-pill.disconnected,.status-pill.error { border-color:var(--ex-orange);color:var(--ex-orange); }
.status-pill.local { border-color:var(--s5);color:var(--muted); }

.badge-ch {
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  color:var(--ex-orange);border-bottom:1px solid var(--ex-orange);padding-bottom:1px;
}
.round-badge {
  font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* ══════════════════════════════════════════════════
   HOME
══════════════════════════════════════════════════ */
#view-home {
  background:var(--bg);
  align-items:center;justify-content:center;
}
/* top left corner mark */
#view-home::before {
  content:'EMOJIX_V2.0 // INIT';
  position:fixed;top:1.2rem;left:1.5rem;
  font-family:var(--mono);font-size:.65rem;color:var(--dim);
  letter-spacing:.1em;
}
.home-inner { display:flex;flex-direction:column;align-items:center;gap:3.5rem;padding:2rem; }

.home-logo { text-align:center; }
.home-logo-emoji { font-size:4rem;display:block;margin-bottom:.5rem;animation:float 4s ease-in-out infinite; }
.home-logo h1 {
  font-size:3.5rem;font-weight:900;letter-spacing:-.02em;
  color:var(--text);
}
.home-logo h1 span { color:var(--ex-orange);font-style:italic; }
.home-logo p { color:var(--muted);margin-top:.5rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase; }

.mode-cards { display:grid;grid-template-columns:1fr 1fr;gap:1px;max-width:700px;width:100%;border:var(--border);background:var(--s4); }
.mode-card {
  background:var(--s1);padding:2rem 1.8rem;cursor:pointer;
  transition:background var(--t);display:flex;flex-direction:column;gap:.75rem;
  position:relative;
}
.mode-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ex-orange);transform:scaleX(0);transition:transform .2s ease;transform-origin:left; }
.mode-card:hover { background:var(--s2); }
.mode-card:hover::before { transform:scaleX(1); }
.mode-icon { font-size:2.2rem; }
.mode-card h2 { font-size:1.25rem;font-weight:900;letter-spacing:-.01em; }
.mode-card p  { color:var(--muted);font-size:.82rem;line-height:1.6; }
.mode-tag {
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ex-orange);margin-top:.3rem;
  display:flex;align-items:center;gap:.35rem;
}
.mode-tag::before { content:'●';font-size:.5rem; }

/* ══════════════════════════════════════════════════
   SETUP SHARED
══════════════════════════════════════════════════ */
#view-stream-setup,#view-duel-setup {
  background:var(--bg);align-items:center;justify-content:center;padding:2rem;
}
.setup-card {
  background:var(--s1);border:var(--border);width:100%;max-width:540px;
  padding:2.4rem;position:relative;
}
/* top accent line */
.setup-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ex-orange); }
.setup-logo {
  font-size:.72rem;font-family:var(--mono);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2rem;
  display:flex;align-items:center;gap:.6rem;
}
.setup-logo span { color:var(--text); }
.setup-form { display:flex;flex-direction:column;gap:1.2rem; }
.back-btn { position:absolute;top:1.2rem;right:1.2rem; }

/* ══════════════════════════════════════════════════
   STREAM GAME
══════════════════════════════════════════════════ */
#view-stream-game { overflow:hidden; }
#view-stream-game.active { display:grid;grid-template-columns:280px 1fr 250px;grid-template-rows:36px 1fr; }
.stream-layout { height:100dvh; }
/* sys-bar spans full width */
.sys-bar { grid-column:1/-1; }

/* System top bar (spans all columns) */
.sys-bar {
  grid-column:1/-1;
  background:var(--s1);border-bottom:var(--border);
  height:36px;display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;gap:1rem;flex-shrink:0;
}
.sys-path {
  font-family:var(--mono);font-size:.62rem;color:var(--dim);
  letter-spacing:.06em;white-space:nowrap;
}
.sys-path span { color:var(--muted); }
.sys-nav { display:flex;gap:0; }
.sys-nav-step {
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:.2rem .75rem;border-left:var(--border);cursor:default;
}
.sys-nav-step.active { color:var(--ex-orange); }
.sys-right { display:flex;align-items:center;gap:.75rem; }
.sys-clock { font-family:var(--mono);font-size:.62rem;color:var(--dim);letter-spacing:.06em; }

/* Sidebar */
.streamer-sidebar {
  background:var(--s1);border-right:var(--border);
  display:flex;flex-direction:column;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--s4) transparent;
}
.sb-header { display:flex;align-items:center;gap:.5rem;padding:.7rem .85rem;border-bottom:var(--border);flex-shrink:0;flex-wrap:wrap; }
.sb-round-bar { padding:.55rem .85rem;border-bottom:var(--border);flex-shrink:0; }

.builder-block { padding:.85rem;border-bottom:var(--border); }
.section-label {
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ex-orange);margin-bottom:.9rem;display:block;
}
.builder-block .field { margin-bottom:.65rem; }
.emoji-preview-sm { font-size:2rem;min-height:2.6rem;padding:.3rem 0;letter-spacing:.3rem; }
.masked-row { display:flex;align-items:center;gap:.4rem; }
.masked-row .guess-input, .masked-row input { flex:1; }
.masked-blur { filter:blur(6px);transition:filter .2s;user-select:none; }
.masked-blur.revealed { filter:none; }
.eye-btn { background:none;border:var(--border);border-radius:var(--r);padding:.3rem .5rem;cursor:pointer;font-size:.9rem;color:var(--muted);flex-shrink:0;transition:color .15s; }
.eye-btn:hover { color:var(--text); }

.sb-controls { display:flex;flex-direction:column;gap:.4rem;padding:.85rem;border-bottom:var(--border); }
.test-bar { display:flex;gap:.4rem;padding:.6rem .85rem;border-bottom:var(--border); }
.test-bar input { flex:1;font-size:.78rem; }

.sb-lb-section { flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0; }
.sb-lb-hdr {
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem .85rem;border-bottom:var(--border);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.lb-compact { flex:1;overflow-y:auto;padding:.3rem; }

/* Center display */
.stream-display {
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);position:relative;overflow:hidden;
}
/* corner decorations */
.stream-display::before,.stream-display::after {
  content:'';position:absolute;width:40px;height:40px;border-color:var(--ex-orange);border-style:solid;border-width:0;
}
.stream-display::before { top:1.5rem;left:1.5rem;border-top-width:1px;border-left-width:1px; }
.stream-display::after  { bottom:1.5rem;right:1.5rem;border-bottom-width:1px;border-right-width:1px; }

/* Game states */
.game-state { display:none;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;text-align:center;max-width:560px;width:100%;padding:2rem;animation:fadeUp .25s ease; }
.game-state.active { display:flex; }
.game-state h2 { font-size:1.2rem;font-weight:900;letter-spacing:-.01em; }

.ds-icon  { font-size:4rem;animation:float 4s ease-in-out infinite;display:flex;align-items:center;justify-content:center; }
.ds-icon svg { width:48px;height:48px;color:var(--muted); }
.ds-icon.bounce { animation:bounceIn .5s cubic-bezier(.175,.885,.32,1.275); }

.ds-puzzle {
  font-size:4.5rem;letter-spacing:.4rem;line-height:1.3;
  border:1px solid var(--s4);padding:2.2rem 3rem;
  background:var(--s1);position:relative;
  animation:popIn .35s cubic-bezier(.175,.885,.32,1.275);
}
.ds-puzzle::before,.ds-puzzle::after {
  content:'';position:absolute;width:8px;height:8px;background:var(--ex-orange);
}
.ds-puzzle::before { top:-1px;left:-1px; }
.ds-puzzle::after  { bottom:-1px;right:-1px; }

/* Timer */
.timer { font-family:var(--mono);font-size:1.4rem;font-weight:700;color:var(--muted);min-height:2rem;letter-spacing:.06em; }
.timer.warning { color:var(--warn); }
.timer.urgent  { color:var(--ex-orange);animation:blink .6s ease-in-out infinite; }

/* Hint */
.hint-box {
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  border-left:2px solid var(--warn);padding:.4rem .85rem;color:var(--warn);background:rgba(255,145,0,.06);
}

/* Winner / Revealed */
.winner-name   { font-size:1.8rem;font-weight:900;color:var(--ex-orange); }
.winner-answer { font-family:var(--mono);color:var(--green);font-size:.9rem;letter-spacing:.06em; }
.winner-pts    { font-family:var(--mono);font-size:1.2rem;font-weight:700;color:var(--gold); }
.revealed-answer {
  font-family:var(--mono);font-size:1.5rem;font-weight:700;
  border:var(--border);border-left:2px solid var(--ex-orange);
  padding:.65rem 1.8rem;letter-spacing:.04em;
}
.final-row { font-family:var(--mono);font-size:.85rem;padding:.3rem 0;letter-spacing:.04em; }

/* Chat panel */
.stream-chat-panel { background:var(--s1);border-left:var(--border);display:flex;flex-direction:column;overflow:hidden; }
.panel-hdr { padding:.6rem .85rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:var(--border);flex-shrink:0; }
.chat-body { flex:1;overflow-y:auto;padding:.35rem .4rem;display:flex;flex-direction:column;gap:.1rem;scrollbar-width:thin;scrollbar-color:var(--s4) transparent; }
.chat-msg { padding:.3rem .55rem;font-size:.78rem;line-height:1.5;word-break:break-word;font-family:var(--mono); }
.chat-msg.normal:hover { background:var(--s2); }
.chat-msg.winner { background:rgba(0,230,118,.05);border-left:2px solid var(--green);animation:blink-green .5s; }
.chat-msg.system { color:var(--dim);font-size:.7rem;text-align:center;padding:.15rem 0; }
.chat-user { color:var(--ex-orange);margin-right:.4rem;font-weight:700; }
.chat-msg.winner .chat-user { color:var(--green); }
.chat-txt { color:var(--muted); }

/* Leaderboard shared */
.lb-list { overflow-y:auto;padding:.3rem;scrollbar-width:thin;scrollbar-color:var(--s4) transparent; }
.lb-entry { display:flex;align-items:center;gap:.4rem;padding:.4rem .55rem;transition:background var(--t); }
.lb-entry:hover { background:var(--s2); }
.lb-entry.first  { border-left:2px solid var(--gold); }
.lb-entry.second { border-left:2px solid var(--muted); }
.lb-entry.third  { border-left:2px solid #cd7f32; }
.lb-rank { width:22px;text-align:center;font-family:var(--mono);font-size:.72rem;flex-shrink:0;color:var(--muted); }
.lb-user { flex:1;font-weight:700;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono); }
.lb-pts  { font-family:var(--mono);font-weight:700;font-size:.78rem;color:var(--ex-orange); }
.lb-wins { font-size:.65rem;color:var(--muted);margin-left:.25rem; }
.empty-lb{ color:var(--dim);font-family:var(--mono);font-size:.72rem;text-align:center;padding:1.2rem .5rem; }

/* ══════════════════════════════════════════════════
   DUEL SETUP
══════════════════════════════════════════════════ */
.players-row { display:flex;align-items:stretch;gap:1px;margin-bottom:1rem;background:var(--s4); }
.player-slot {
  flex:1;background:var(--s1);padding:1.4rem 1rem;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
}
.slot-label { font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); }
.player-profile { display:flex;flex-direction:column;align-items:center;gap:.4rem;width:100%; }
.player-avatar  { width:52px;height:52px;border-radius:50%;border:1px solid var(--ex-orange); }
.player-dname   { font-size:.95rem;font-weight:800;color:var(--ex-orange);font-family:var(--mono); }
.vs-badge { font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--s5);padding:0 .5rem;display:flex;align-items:center; }
.oauth-notice {
  background:var(--s2);border-left:2px solid var(--muted);
  color:var(--muted);padding:.7rem .9rem;font-family:var(--mono);
  font-size:.7rem;line-height:1.6;letter-spacing:.02em;margin-bottom:1rem;
}
.oauth-notice code { color:var(--ex-orange); }

/* ══════════════════════════════════════════════════
   DUEL GAME
══════════════════════════════════════════════════ */
#view-duel-game { overflow:hidden; }
#view-duel-game.active { display:grid;grid-template-columns:180px 1fr 180px;grid-template-rows:36px 1fr;height:100dvh; }

/* Player panels */
.duel-player-panel {
  background:var(--s1);border-right:var(--border);
  display:flex;flex-direction:column;padding:1.2rem .85rem;gap:.4rem;overflow-y:auto;
}
.duel-player-panel.right { border-right:none;border-left:var(--border); }
.dp-pname  { font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--text);font-weight:700;word-break:break-all;margin-top:.3rem; }
.dp-pscore { font-size:2.8rem;font-weight:900;color:var(--ex-orange);font-family:var(--mono);line-height:1.1;margin-top:.4rem; }

/* Center display */
.duel-center {
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);position:relative;overflow:hidden;
}
.duel-center::before,.duel-center::after {
  content:'';position:absolute;width:40px;height:40px;border-color:var(--ex-orange);border-style:solid;border-width:0;pointer-events:none;
}
.duel-center::before { top:1.5rem;left:1.5rem;border-top-width:1px;border-left-width:1px; }
.duel-center::after  { bottom:1.5rem;right:1.5rem;border-bottom-width:1px;border-right-width:1px; }

/* Phases */
.duel-phase { display:none;position:absolute;inset:0;align-items:center;justify-content:center;padding:1.5rem;overflow-y:auto; }
.duel-phase.active { display:flex; }

.phase-card,.flip-card,.result-card,.final-card {
  background:var(--s1);border:var(--border);position:relative;
  padding:2rem;max-width:540px;width:100%;
  display:flex;flex-direction:column;gap:1.4rem;
  animation:fadeUp .25s ease;
}
.phase-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ex-orange); }

.role-bar { display:flex;align-items:center;gap:.75rem;flex-wrap:wrap; }
.phase-avatar { width:38px;height:38px;border-radius:50%;border:1px solid var(--ex-orange); }
.phase-pname  { font-size:1rem;font-weight:800; }
.role-tag { font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .65rem;border:var(--border); }
.role-tag.setter  { border-color:var(--ex-orange);color:var(--ex-orange); }
.role-tag.guesser { border-color:var(--green);color:var(--green); }

.word-reveal { background:var(--s2);padding:1.2rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;border:var(--border); }
.word-label  { font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); }
.mystery-word{ font-size:1.8rem;font-weight:900;letter-spacing:.02em; }

.emoji-build-field { gap:.6rem; }
.emoji-input-lg  { font-size:1.4rem;padding:.75rem;letter-spacing:.2rem; }
.emoji-preview-lg{ font-size:3rem;letter-spacing:.3rem;min-height:4rem;padding:.4rem 0; }

/* Flip */
.flip-card { text-align:center;align-items:center; }
.flip-icon { width:48px;height:48px;display:flex;align-items:center;justify-content:center;animation:spin 1.2s linear infinite; }
.flip-icon svg { width:48px;height:48px;color:var(--muted); }
.flip-name { font-size:1.8rem;font-weight:900;color:var(--ex-orange); }

/* Guesser */
.duel-puzzle { font-size:4.5rem;letter-spacing:.4rem;text-align:center;animation:popIn .35s cubic-bezier(.175,.885,.32,1.275); }
.guess-row   { display:flex;gap:.5rem; }
.guess-input { flex:1;font-size:1.05rem;font-family:var(--mono); }
.feedback    { font-family:var(--mono);padding:.55rem .9rem;font-size:.78rem;letter-spacing:.04em;border-left:2px solid; }
.feedback.bad   { border-color:var(--ex-orange);color:var(--ex-orange);background:var(--ex-orange-d); }
.feedback.hint-fb { border-color:var(--warn);color:var(--warn);background:rgba(255,145,0,.06); }

/* Result */
.result-card { text-align:center;align-items:center; }
.dr-label   { font-size:1.5rem;font-weight:900;font-family:var(--mono); }
.dr-label.correct { color:var(--green); }
.dr-label.miss    { color:var(--warn); }
.dr-answer  { font-family:var(--mono);font-size:1.3rem;font-weight:700;padding:.6rem 1.5rem;border:var(--border);border-left:2px solid var(--ex-orange); }
.dr-pts     { font-family:var(--mono);color:var(--gold);font-size:.85rem;letter-spacing:.06em; }

/* Final */
.final-card { text-align:center;align-items:center; }
.final-trophy{ animation:bounceIn .5s cubic-bezier(.175,.885,.32,1.275);display:flex;align-items:center;justify-content:center; }
.final-trophy svg { width:56px;height:56px;color:var(--gold); }
.df-winner  { font-size:1.8rem;font-weight:900;color:var(--ex-orange);font-family:var(--mono); }
.df-score   { font-family:var(--mono);color:var(--muted);font-size:.88rem;margin-top:.2rem;letter-spacing:.06em; }
.final-btns { display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem; }
.duel-back-btn:hover { opacity:1; }

/* Duel panel layout */
.duel-player-panel { gap:0; }
.dp-score-block { padding:.85rem .85rem .5rem; }
.dp-panel-block { display:flex;flex-direction:column; }
.dp-panel-block .builder-block { padding:.6rem .85rem; }
.dp-flex-block { flex:1;min-height:0; }

/* Camera in duel panel */
.dp-cam-zone { border-bottom:var(--border);flex-shrink:0; }
.dp-cam-box  { position:relative;width:100%;aspect-ratio:16/9;background:var(--s2);overflow:hidden; }

/* Theme grid (center, theme-pick phase) */
.theme-grid-center {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.6rem;
  width:100%;
  max-width:420px;
}
.theme-btn {
  background:var(--s2);border:var(--border);border-radius:var(--radius);
  padding:.7rem .5rem;cursor:pointer;
  font-family:var(--mono);font-size:.78rem;color:var(--text);
  text-align:center;transition:background .15s,border-color .15s,color .15s;
}
.theme-btn:hover { background:var(--s3);border-color:var(--ex-orange);color:var(--ex-orange); }

/* Duel chat logs in panels */
.dp-chat-hdr {
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .85rem;border-bottom:var(--border);flex-shrink:0;
}
.dp-chat-log {
  flex:1;overflow-y:auto;display:flex;flex-direction:column;
  gap:.2rem;padding:.35rem .5rem;
  scrollbar-width:thin;scrollbar-color:var(--s4) transparent;
}
.dp-chat-msg {
  font-size:.72rem;font-family:var(--mono);
  padding:.2rem .4rem;border-radius:2px;word-break:break-word;
}
.dp-chat-msg.wrong   { color:var(--ex-orange);background:rgba(255,59,48,.08); }
.dp-chat-msg.correct { color:var(--green);background:rgba(52,199,89,.08); }

/* Round history */
.dp-history-log {
  display:flex;flex-direction:column;gap:.15rem;padding:.3rem .5rem;
  max-height:140px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--s4) transparent;
}
.dp-hist-row {
  display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.3rem;
  font-family:var(--mono);font-size:.68rem;padding:.18rem .3rem;border-radius:2px;
}
.dp-hist-row.correct { color:var(--green);background:rgba(52,199,89,.07); }
.dp-hist-row.theirs  { color:var(--ex-orange);background:rgba(255,59,48,.07); }
.dp-hist-row.miss    { color:var(--fg3); }
.dp-hist-round { font-size:.6rem;opacity:.6;font-weight:700; }
.dp-hist-word  { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.dp-hist-pts   { font-weight:700;white-space:nowrap; }

/* Guess input row */
.dp-guess-row {
  display:flex;gap:.3rem;padding:.5rem .5rem;flex-shrink:0;border-top:var(--border);
}
.dp-guess-row input { flex:1;min-width:0;font-size:.82rem; }

/* Word choice grid */
.word-choice-grid { display:flex;flex-direction:column;gap:.6rem;width:100%;max-width:320px; }
.word-choice-btn {
  background:var(--s2);border:var(--border);border-radius:var(--radius);
  padding:.85rem 1.2rem;cursor:pointer;
  font-family:var(--mono);font-size:.95rem;font-weight:700;color:var(--text);
  text-align:center;transition:background .15s,border-color .15s,color .15s;
  letter-spacing:.02em;
}
.word-choice-btn:hover { background:var(--s3);border-color:var(--ex-orange);color:var(--ex-orange); }

/* Theme tag shown in center during active phase */
.dp-theme-tag {
  font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:var(--border);padding:.2rem .6rem;display:inline-block;
  border-radius:2px;min-height:1.2rem;
}

/* ══════════════════════════════════════════════════
   WINNER OVERLAY
══════════════════════════════════════════════════ */
.overlay { position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none; }
.confetti-stage { position:absolute;inset:0;overflow:hidden; }
.confetti-piece { position:absolute;top:-14px;animation:confettiFall linear forwards; }
.win-popup {
  position:relative;z-index:1;background:var(--s1);border:1px solid var(--ex-orange);
  padding:2rem 3rem;text-align:center;
  box-shadow:0 0 60px var(--ex-orange-glow),0 24px 64px rgba(0,0,0,.8);
  animation:popIn .45s cubic-bezier(.175,.885,.32,1.275);
}
.win-popup::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ex-orange); }
.win-emoji { font-size:3rem;display:block;margin-bottom:.5rem; }
#ov-name { font-size:1.6rem;font-weight:900;color:var(--ex-orange);font-family:var(--mono);margin-bottom:.25rem; }
#ov-pts  { font-family:var(--mono);font-size:1.1rem;font-weight:700;color:var(--gold); }

/* ── Stream phase label ─────────────────────────── */
.stream-phase-label {
  font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ex-orange);
  border:1px solid var(--ex-orange);padding:.15rem .65rem;
}

/* ── Final leaderboard (stream + duel) ───────────── */
.final-trophy-label {
  font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ex-orange);margin-bottom:.5rem;
}
.final-lb { display:flex;flex-direction:column;gap:2px;width:100%;max-width:400px; }
.final-lb-row {
  display:flex;align-items:center;gap:.75rem;
  padding:.55rem .85rem;background:var(--s2);border-left:2px solid var(--s4);
  font-family:var(--mono);
}
.final-lb-row.gold   { border-left-color:var(--gold);background:rgba(255,215,0,.05); }
.final-lb-row.silver { border-left-color:var(--muted);background:rgba(192,192,192,.04); }
.final-lb-row.bronze { border-left-color:#cd7f32;background:rgba(205,127,50,.04); }
.flr-rank { width:26px;text-align:center;font-size:.9rem; }
.flr-name { flex:1;font-weight:700;font-size:.85rem; }
.flr-pts  { font-weight:700;color:var(--ex-orange);font-size:.85rem; }
.flr-pts small { color:var(--muted);font-weight:400;font-size:.7rem; }
.flr-wins { color:var(--muted);font-size:.75rem; }

/* ── Duel player entry ───────────────────────────── */
.player-entry { display:flex;flex-direction:column;gap:.5rem;width:100%; }

.mode-cards { grid-template-columns:repeat(2,1fr); }

/* ── Floating profile button (fixed, all views) ──────────────────────────── */
.global-profile-btn {
  position:fixed;top:10px;right:10px;z-index:200;
  width:36px;height:36px;border-radius:50%;border:2px solid var(--ex-orange);
  background:var(--s2);cursor:pointer;overflow:hidden;padding:0;
  transition:box-shadow .15s, transform .1s;
}
.global-profile-btn:hover { box-shadow:0 0 0 3px rgba(220,38,38,.4);transform:scale(1.06); }
.global-profile-btn.guest { border-color:var(--muted);opacity:.6; }
.global-profile-btn.guest:hover { border-color:var(--text);opacity:1;box-shadow:none; }
.global-profile-guest { background:transparent;color:var(--muted); }
.global-profile-btn .avatar-img  { width:100%;height:100%;border-radius:50%;object-fit:cover; }
.global-profile-btn .avatar-init { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff; }

/* ── Clickable avatar button (profile blocks) ────────────────────────────── */
.avatar-btn {
  background:none;border:none;padding:0;cursor:pointer;
  width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;
  transition:box-shadow .15s;
}
.avatar-btn:hover { box-shadow:0 0 0 2px var(--ex-orange); }
.avatar-img { width:32px;height:32px;border-radius:50%;object-fit:cover;display:block; }
.avatar-init {
  width:32px;height:32px;border-radius:50%;background:var(--ex-orange);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;color:#fff;letter-spacing:.02em;
}

/* ── Profile stats modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:300;
  display:flex;align-items:center;justify-content:center;
}
.modal-overlay.hidden { display:none; }
.modal-profile-card {
  background:var(--s1);border:var(--border);border-radius:4px;
  padding:2rem 1.75rem 1.5rem;width:360px;max-width:94vw;
  position:relative;text-align:center;
}
.modal-close-btn { position:absolute;top:.65rem;right:.65rem;padding:.25rem .5rem; }
.mp-avatar {
  width:76px;height:76px;border-radius:50%;border:2px solid var(--ex-orange);
  margin:0 auto .75rem;display:block;object-fit:cover;
}
.mp-name  { font-size:1.1rem;font-weight:700;letter-spacing:.04em;margin-bottom:.2rem; }
.mp-login { font-size:.72rem;color:var(--muted);margin-bottom:1.25rem; }
.mp-stats-row { display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1.5rem; }
.mp-stat { background:var(--s2);border:var(--border);padding:.65rem .4rem;border-radius:2px; }
.mp-stat span  { display:block;font-size:1.35rem;font-weight:700;font-family:var(--mono);color:var(--ex-orange); }
.mp-stat label { font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:block; }
.mp-lb-title {
  font-family:var(--mono);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);margin-bottom:.5rem;text-align:left;
}
.lb-entry.lb-self { border-left:2px solid var(--ex-orange);padding-left:.4rem; }


/* ── Stream camera zone ───────────────────────────── */
.sb-cam-zone { border-top:var(--border);flex-shrink:0; }
.cam-box { position:relative;width:100%;aspect-ratio:16/9;background:var(--s2);overflow:hidden; }
.cam-video { width:100%;height:100%;object-fit:cover;display:block; }
.cam-placeholder {
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.6rem;
}
.cam-icon { font-size:1.8rem;opacity:.3; }

/* ── Duel matchmaking ────────────────────────────── */
.vs-display { display:flex;align-items:center;gap:1.5rem;font-family:var(--mono);margin:1rem 0;flex-wrap:wrap;justify-content:center; }
.vs-p  { font-size:1.4rem;font-weight:900; }
.vs-sep { color:var(--ex-orange);font-weight:700;font-size:1.1rem; }
.search-dots { font-size:1.5rem;letter-spacing:.5rem;color:var(--muted);margin:.75rem 0; }
.search-dots span { animation:blink 1s ease-in-out infinite; }
.search-dots span:nth-child(2) { animation-delay:.2s; }
.search-dots span:nth-child(3) { animation-delay:.4s; }
.hint-display { font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.04em;text-align:center;min-height:1rem;padding:.2rem 0; }

/* ── Animations ──────────────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none} }
@keyframes popIn    { from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)} }
@keyframes float    { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }
@keyframes bounceIn { 0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)} }
@keyframes blink    { 0%,100%{opacity:1}50%{opacity:.4} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes blink-green { 0%{box-shadow:0 0 0 0 rgba(0,230,118,.4)}70%{box-shadow:0 0 0 8px rgba(0,230,118,0)}100%{box-shadow:none} }
@keyframes confettiFall { 0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(105vh) rotate(800deg);opacity:0} }

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--s4); }

/* ════════════════════════════════════════════════════════════════════════
   HEADER POMME.GG (harmonisation avec le site principal)
   ════════════════════════════════════════════════════════════════════════
   Variables et styles du header sont scopés sous .pgg-header pour ne pas
   entrer en conflit avec les variables EmojiX existantes.
*/
.pgg-header {
  --pgg-text: #f0f0f8;
  --pgg-muted: #5a5a7a;
  --pgg-red: #ff3c6e;
  --pgg-surface: #0f0f1c;
  --pgg-border: rgba(255,255,255,.06);

  display: flex;
  align-items: center;
  padding: .55rem 1.5rem;
  gap: .75rem;
  border-bottom: 1px solid var(--pgg-border);
  background: transparent;
  font-family: 'DM Mono', 'Space Mono', monospace;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}
.pgg-header .pgg-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: var(--pgg-red);
  flex: 1;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}
.pgg-header .pgg-logo span { color: var(--pgg-text); }
.pgg-header .pgg-logo:hover { opacity: .9; }

.pgg-header .pgg-nav-btn {
  padding: .35rem .75rem;
  border-radius: 6px;
  font-family: 'DM Mono', 'Space Mono', monospace;
  font-size: .72rem;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--pgg-border);
  background: transparent;
  color: var(--pgg-muted);
  transition: all .2s;
  white-space: nowrap;
}
.pgg-header .pgg-nav-btn:hover {
  border-color: var(--pgg-red);
  color: var(--pgg-text);
}
.pgg-header .pgg-nav-btn.primary {
  background: var(--pgg-red);
  border-color: var(--pgg-red);
  color: #fff;
}
.pgg-header .pgg-nav-btn.primary:hover { opacity: .85; }

.pgg-header .pgg-user-chip {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--pgg-surface);
  border: 1px solid var(--pgg-border);
  border-radius: 999px;
  padding: .2rem .65rem .2rem .2rem;
}
.pgg-header .pgg-user-chip img {
  width: 22px; height: 22px; border-radius: 50%;
}
.pgg-header .pgg-user-chip span {
  font-size: .72rem; color: var(--pgg-text);
}

.pgg-header .pgg-twitch-icon {
  width: 12px; height: 12px;
  display: inline; vertical-align: middle;
  margin-right: .35rem;
}

/* Responsive : sur petit écran on cache le user-chip et profile, on garde l'essentiel */
@media (max-width: 640px) {
  .pgg-header { padding: 1rem; gap: .5rem; flex-wrap: wrap; }
  .pgg-header .pgg-logo { font-size: 1.4rem; letter-spacing: 2px; }
  .pgg-header .pgg-user-chip span { display: none; }
  .pgg-header .pgg-nav-btn { padding: .4rem .7rem; font-size: .7rem; }
}

/* Admin actions bar (sous le header pomme.gg) */
.ad-actions-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1.5rem;
  background: var(--s1);
  border-bottom: var(--border);
  flex-wrap: wrap;
}
.ad-actions-label {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .12em;
  color: var(--ex-orange);
  text-transform: uppercase;
}
.ad-actions-spacer { flex: 1; }

/* ... section vide retirée ... */

/* ════════════════════════════════════════════════════════════════════════
   STREAM PAGE — Layout V2 : formulaire en hero centré et étroit
   Sélecteurs renforcés avec .viewer-body pour overrider viewer.css
   ════════════════════════════════════════════════════════════════════════ */

.viewer-body { background: var(--bg); }

/* HERO SECTION : centré, étroit, aéré */
.viewer-body .vw-hero-section {
  max-width: 720px !important;
  margin: 3rem auto 0 !important;
  padding: 0 1.5rem !important;
  width: 100%;
}
.viewer-body .vw-hero {
  text-align: center;
  margin-bottom: 2rem;
  padding: 0;
}
.viewer-body .vw-hero h1 {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  margin-bottom: .6rem;
}
.viewer-body .vw-hero h1 span {
  color: var(--ex-orange);
  font-style: italic;
}
.viewer-body .vw-hero p {
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--muted);
  letter-spacing: .04em;
  margin: 0;
}

/* FORMULAIRE HERO : étroit, encadré, aéré */
.viewer-body .vw-form-hero {
  background: var(--s1) !important;
  border: var(--border) !important;
  padding: 2.5rem 2.5rem !important;
  position: relative;
  margin: 0 auto 3rem !important;
  max-width: 720px !important;
  width: 100%;
  box-shadow: 0 10px 50px rgba(0,0,0,.4);
}
.viewer-body .vw-form-hero::before,
.viewer-body .vw-form-hero::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  background: var(--ex-orange);
}
.viewer-body .vw-form-hero::before { top: -1px; left: -1px; }
.viewer-body .vw-form-hero::after  { bottom: -1px; right: -1px; }

.viewer-body .vw-form-hero .section-label {
  display: block;
  margin-bottom: 1.75rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .15em;
  color: var(--ex-orange);
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--s4);
}

.viewer-body .vw-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.25rem;
}
.viewer-body .vw-form-grid .field-word     { grid-column: 1 / 3; }
.viewer-body .vw-form-grid .field-emojis   { grid-column: 1 / 3; }
.viewer-body .vw-form-grid .field-hint     { grid-column: 1 / 3; }
.viewer-body .vw-form-grid .field-theme    { grid-column: 1 / 2; }
.viewer-body .vw-form-grid .field-diff     { grid-column: 2 / 3; }
.viewer-body .vw-form-grid .field-submit   { grid-column: 1 / 3; margin-top: 1rem; }

.viewer-body .vw-form-hero .field { margin: 0; }
.viewer-body .vw-form-hero .field label {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.viewer-body .vw-form-hero .field input,
.viewer-body .vw-form-hero .field select {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--s4);
  color: var(--text);
  font-family: var(--mono);
  font-size: .95rem;
  padding: .85rem 1rem;
  outline: none;
  transition: border-color .15s, background .15s;
}
.viewer-body .vw-form-hero .field input:focus,
.viewer-body .vw-form-hero .field select:focus {
  border-color: var(--ex-orange);
  background: var(--s3);
}
.viewer-body .vw-form-hero .emoji-input-lg {
  font-size: 1.35rem !important;
  letter-spacing: .15em;
  padding: 1rem 1.1rem !important;
}

.viewer-body .btn-submit-big {
  font-size: 1rem !important;
  padding: 1.1rem 1.5rem !important;
  letter-spacing: .08em !important;
  font-weight: 700;
}

/* Emoji picker */
.viewer-body .vw-form-hero .emojis-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
}
.viewer-body .vw-form-hero .btn-emoji-picker {
  font-size: 1.4rem;
  background: var(--s2);
  border: 1px solid var(--s4);
  color: var(--text);
  cursor: pointer;
  padding: .5rem 1rem;
  transition: all .15s;
}
.viewer-body .vw-form-hero .btn-emoji-picker:hover {
  background: var(--ex-orange-d);
  border-color: var(--ex-orange);
}
.viewer-body .vw-form-hero .emoji-picker-wrap {
  margin-top: .6rem;
}
.viewer-body .vw-form-hero .emoji-picker-wrap.hidden { display: none; }

/* Cas not logged */
.viewer-body .vw-form-hero.vw-need-login {
  text-align: center;
}
.viewer-body .vw-form-hero.vw-need-login p {
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.viewer-body .vw-form-hero.vw-need-login strong {
  color: var(--text);
}

/* GRID DU BAS (stream + side info) */
.viewer-body .vw-grid {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem 3rem !important;
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 1.5rem !important;
}
.viewer-body .vw-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.viewer-body .vw-block {
  background: var(--s1);
  border: var(--border);
  padding: 1.25rem 1.5rem;
  position: relative;
}
.viewer-body .vw-block .section-label {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--ex-orange);
  text-transform: uppercase;
}

/* Stream Twitch */
.viewer-body .vw-twitch-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  background: #000;
  border: var(--border);
}
.viewer-body .vw-twitch-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Règlement */
.viewer-body .vw-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  gap: .65rem;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.55;
}
.viewer-body .vw-rules li { padding-left: 1rem; position: relative; }
.viewer-body .vw-rules li::before {
  content: '▸'; position: absolute; left: 0; color: var(--ex-orange);
}
.viewer-body .vw-rules strong { color: var(--text); }

.viewer-body .vw-empty {
  text-align: center;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--muted);
  padding: 1.5rem 1rem;
  font-style: italic;
}
.viewer-body .vw-feedback {
  margin-top: 1rem;
  padding: .7rem 1rem;
  font-family: var(--mono);
  font-size: .8rem;
  border: 1px solid var(--muted);
  background: var(--s2);
}
.viewer-body .vw-feedback.success { color: var(--green); border-color: var(--green); }
.viewer-body .vw-feedback.error   { color: var(--ex-orange);   border-color: var(--ex-orange); }
.viewer-body .vw-feedback.hidden  { display: none; }

/* Toast */
.viewer-body .vw-toast {
  position: fixed;
  bottom: 2rem; right: 2rem;
  background: var(--s1);
  border: 2px solid var(--ex-orange);
  padding: 1rem 1.5rem;
  font-family: var(--mono);
  color: var(--text);
  z-index: 1000;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  animation: vwToastSlide .3s ease-out;
}
.viewer-body .vw-toast.hidden { display: none; }
@keyframes vwToastSlide {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Responsive */
@media (max-width: 1024px) {
  .viewer-body .vw-grid { grid-template-columns: 1fr !important; }
  .viewer-body .vw-form-grid .field-theme,
  .viewer-body .vw-form-grid .field-diff { grid-column: 1 / 3; }
}
@media (max-width: 640px) {
  .viewer-body .vw-hero-section { padding: 0 1rem !important; margin-top: 1.5rem !important; }
  .viewer-body .vw-form-hero { padding: 1.5rem !important; }
  .viewer-body .vw-form-grid { grid-template-columns: 1fr; gap: 1rem; }
  .viewer-body .vw-form-grid .field-word, 
  .viewer-body .vw-form-grid .field-emojis, 
  .viewer-body .vw-form-grid .field-hint,
  .viewer-body .vw-form-grid .field-theme, 
  .viewer-body .vw-form-grid .field-diff, 
  .viewer-body .vw-form-grid .field-submit { grid-column: 1; }
  .viewer-body .vw-grid { padding: 0 1rem 2rem !important; }
}