:root {
  color-scheme: dark;
  --blue-950: #041a2e;
  --blue-900: #062744;
  --blue-800: #073b65;
  --blue-700: #075a91;
  --blue-600: #0879bd;
  --blue-500: #1b9ce5;
  --blue-300: #7bd0ff;
  --white: #ffffff;
  --ink: #eff8ff;
  --muted: #abc7d9;
  --line: rgba(255,255,255,.17);
  --panel: rgba(6,39,68,.82);
  --panel-strong: rgba(5,28,49,.95);
  --success: #38d39f;
  --warning: #ffc857;
  --danger: #ff6b78;
  --shadow: 0 22px 65px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--blue-950); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(30,159,229,.18), transparent 32rem),
    radial-gradient(circle at 90% 90%, rgba(0,107,172,.28), transparent 40rem),
    linear-gradient(135deg, var(--blue-950), #075884);
}

button, input, textarea, select { font: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { margin-top: 0; }
p { line-height: 1.55; }

.shell { width: min(1500px, 94vw); margin: 0 auto; padding: 28px 0 50px; }
.screen { width: min(1600px, 96vw); min-height: 100vh; margin: auto; display: grid; place-items: center; padding: 28px 0; }
.screen > .card { width: 100%; min-height: min(900px, 91vh); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.brand { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: -.04em; }
.brand span { color: var(--blue-300); }
.status-pill, .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  font-size: .9rem;
}
.status-pill.live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px var(--success); }

.card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  padding: clamp(20px, 3vw, 36px);
}
.card.compact { padding: 22px; }
.card + .card { margin-top: 18px; }
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.host-layout { grid-template-columns: minmax(0,1.65fr) minmax(320px,.75fr); align-items: start; }

.metric {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.055);
  border-radius: 17px;
  padding: 16px;
}
.metric span { display: block; color: var(--muted); font-size: .84rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.metric strong { font-size: clamp(1.3rem, 2.5vw, 2rem); }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 11px 16px;
  color: white;
  background: linear-gradient(180deg, var(--blue-500), var(--blue-700));
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn.secondary { background: rgba(255,255,255,.08); }
.btn.success { background: linear-gradient(180deg, #35dca7, #168866); }
.btn.warning { background: linear-gradient(180deg, #ffd66f, #c48715); color: #1b2530; }
.btn.danger { background: linear-gradient(180deg, #ff7f8a, #bd3545); }
.btn.small { padding: 8px 11px; border-radius: 9px; font-size: .86rem; }
.btn.icon { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; }

label { display: block; font-weight: 750; color: var(--muted); margin-bottom: 7px; }
input, textarea, select {
  width: 100%;
  color: var(--ink);
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 11px;
  padding: 11px 13px;
  outline: none;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--blue-300); box-shadow: 0 0 0 3px rgba(123,208,255,.13); }
select option { color: #111; }
.form-row { margin-bottom: 15px; }
.inline-field { display: flex; align-items: center; gap: 10px; }
.inline-field input[type="checkbox"], .inline-field input[type="radio"] { width: auto; }
.help { color: var(--muted); font-size: .9rem; }
.error { color: #ffabb3; font-weight: 700; }
.success-text { color: #7ff0c6; font-weight: 700; }
.notice { border-left: 4px solid var(--blue-300); padding: 10px 14px; background: rgba(123,208,255,.08); border-radius: 8px; }
.hidden { display: none !important; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tab {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: var(--muted);
  padding: 9px 16px;
  cursor: pointer;
  font-weight: 800;
}
.tab.active { color: white; background: var(--blue-600); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.host-section + .host-section { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 24px; }
.player-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 9px; padding: 0; list-style: none; }
.player-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(255,255,255,.05); }

.answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.answer {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  padding: 18px;
  color: white;
  background: rgba(255,255,255,.075);
  font-weight: 800;
  min-height: 66px;
}
button.answer {
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button.answer:focus {
  outline: none;
}

button.answer:focus-visible {
  outline: 3px solid var(--blue-300);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  button.answer:hover:not(:disabled) {
    background: rgba(123,208,255,.17);
    border-color: var(--blue-300);
  }
}

.answer.selected { background: rgba(27,156,229,.35); border-color: var(--blue-300); }
.answer.correct { background: rgba(56,211,159,.22); border-color: var(--success); }
.answer.wrong { opacity: .62; }
.question-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.timer { min-width: 100px; text-align: center; font-size: clamp(2rem, 5vw, 4rem); font-weight: 950; color: var(--blue-300); }
.timer.no-timer { font-size: 1rem; min-width: 150px; padding-top: 14px; }
.small { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; font-weight: 800; }

.bar-row { display: grid; grid-template-columns: minmax(150px,1fr) minmax(180px,3fr) 55px; gap: 14px; align-items: center; padding: 11px 0; }
.bar-track { height: 24px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); }
.bar-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue-600), var(--blue-300)); transition: width .5s ease; }
.bar-row.correct .bar-fill { background: linear-gradient(90deg, #15956c, var(--success)); }
.leaderboard { max-width: 980px; margin: 22px auto 0; padding: 0; list-style: none; }
.leaderboard li { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 13px; margin: 10px 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.06); }
.leaderboard .rank { font-size: 1.4rem; font-weight: 950; color: var(--blue-300); }
.leaderboard .name { font-size: 1.2rem; font-weight: 850; }
.leaderboard .score { font-size: 1.2rem; font-weight: 950; }

.join-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(230px,.8fr); gap: 28px; align-items: center; }
.qr { width: min(260px, 100%); background: white; padding: 13px; border-radius: 18px; display: block; margin: auto; }
.join-url { display: inline-block; border: 1px solid var(--line); background: rgba(0,0,0,.18); padding: 11px 16px; border-radius: 12px; font-weight: 850; word-break: break-all; }

.quiz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px,1fr)); gap: 15px; }
.quiz-card { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.05); padding: 17px; }
.quiz-card.active { border-color: var(--blue-300); box-shadow: inset 0 0 0 1px var(--blue-300); }
.quiz-card h3 { margin-bottom: 6px; }
.quiz-meta { color: var(--muted); font-size: .88rem; margin-bottom: 13px; }

.question-editor { border: 1px solid var(--line); border-radius: 17px; padding: 18px; background: rgba(0,0,0,.12); margin-bottom: 15px; }
.question-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.option-editor { display: grid; grid-template-columns: 42px 1fr 42px; gap: 8px; align-items: center; margin-bottom: 8px; }
.option-editor input[type="radio"] { width: 18px; height: 18px; }
.editor-actions { position: sticky; bottom: 12px; z-index: 4; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(4,26,46,.94); box-shadow: var(--shadow); }

.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(8px);
}
.modal .card { width: min(470px, 96vw); }

@media (max-width: 1000px) {
  .host-layout, .join-layout { grid-template-columns: 1fr; }
  .grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .shell { width: min(96vw, 100%); padding-top: 14px; }
  .topbar, .question-head { align-items: stretch; flex-direction: column; }
  .grid.two, .grid.three, .grid.four, .answer-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 1fr 52px; }
  .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .card { border-radius: 18px; padding: 18px; }
}

/* ============================================================
   InnQuiz 3.0 — company branding and projector animations
   ============================================================ */

.company-logo-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.company-logo-card {
  display: grid;
  place-items: center;
  min-width: 126px;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
  overflow: hidden;
}
.company-logo-card img {
  display: block;
  max-width: 150px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.company-logo-card.innservices-only img,
.company-logo-card.preview-innservices img { max-width: 165px; }

body[data-brand="innpower"] .innservices-only,
body[data-brand="innservices"] .innpower-only { display: none !important; }

.participant-company-logos { margin-top: 9px; }
.participant-company-logos .company-logo-card {
  min-width: 100px;
  min-height: 43px;
  padding: 5px 9px;
  border-radius: 10px;
}
.participant-company-logos .company-logo-card img { max-width: 105px; max-height: 32px; }
.participant-company-logos .company-logo-card.innservices-only img { max-width: 118px; }

.brand-control-grid { align-items: center; }
.brand-mode-preview {
  min-height: 108px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(5,37,67,.86), rgba(9,102,157,.48));
}
.host-brand-preview-logos { justify-content: flex-end; }
.host-brand-preview-logos .company-logo-card { min-width: 96px; min-height: 46px; padding: 5px 8px; }
.host-brand-preview-logos .company-logo-card img { max-width: 105px; max-height: 34px; }
.brand-mode-preview[data-preview-brand="innpower"] .preview-innservices,
.brand-mode-preview[data-preview-brand="innservices"] .preview-innpower { display: none; }

/* Projector stage */
.projector-body {
  overflow: hidden;
  background: #03172a;
  transition: background 700ms ease;
}
.projector-body[data-brand="innpower"] {
  --screen-accent: #63d7ff;
  --screen-accent-strong: #0b8fda;
  --screen-glow: rgba(55,190,255,.36);
  background:
    radial-gradient(circle at 50% 45%, rgba(28,129,198,.23), transparent 42%),
    linear-gradient(135deg, #020d1b 0%, #072c51 55%, #04172e 100%);
}
.projector-body[data-brand="innservices"] {
  --screen-accent: #8feaff;
  --screen-accent-strong: #159ddf;
  --screen-glow: rgba(51,190,235,.34);
  background:
    radial-gradient(circle at 55% 55%, rgba(40,183,226,.24), transparent 48%),
    linear-gradient(145deg, #031827 0%, #064d78 48%, #072b4d 100%);
}
.projector-body[data-brand="both"] {
  --screen-accent: #7ee2ff;
  --screen-accent-strong: #138fd4;
  --screen-glow: rgba(53,194,246,.36);
  background:
    radial-gradient(circle at 30% 36%, rgba(34,139,218,.22), transparent 38%),
    radial-gradient(circle at 75% 70%, rgba(30,190,220,.18), transparent 40%),
    linear-gradient(135deg, #021323 0%, #064c79 52%, #061d36 100%);
}

.screen-visuals {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.power-scene,
.water-scene {
  position: absolute;
  inset: 0;
  opacity: 1;
  visibility: visible;
  transition: opacity 800ms ease, visibility 800ms ease;
}
.projector-body[data-brand="innpower"] .water-scene,
.projector-body[data-brand="innservices"] .power-scene {
  opacity: 0;
  visibility: hidden;
}
.projector-body[data-brand="both"] .power-scene,
.projector-body[data-brand="both"] .water-scene { opacity: .63; }
.power-art,
.water-art { position: absolute; width: 100%; height: 100%; inset: 0; }

.transmission-grid { opacity: .5; }
.tower,
.wire {
  fill: none;
  stroke: rgba(98,205,255,.35);
  stroke-width: 7;
  vector-effect: non-scaling-stroke;
}
.wire { stroke-width: 3; }
.tower-right { opacity: .78; }
.current {
  fill: none;
  stroke: url(#powerGradient);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 40 260;
  filter: url(#electricGlow);
  vector-effect: non-scaling-stroke;
  animation: electricTravel 5.2s linear infinite;
}
.current-two { animation-delay: -1.6s; animation-duration: 6.1s; }
.current-three { animation-delay: -3.2s; animation-duration: 7s; }
.spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d8f8ff;
  box-shadow: 0 0 9px #fff, 0 0 22px #4ac8ff, 0 0 48px #128fdf;
  opacity: 0;
  animation: sparkBlink 4.6s ease-in-out infinite;
}
.spark-a { left: 24%; top: 42%; }
.spark-b { left: 68%; top: 48%; animation-delay: -1.7s; }
.spark-c { left: 83%; top: 37%; animation-delay: -3.1s; }

.pipe-shell,
.faucet {
  fill: none;
  stroke: rgba(104,210,246,.26);
  stroke-width: 44;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pipe-flow {
  fill: none;
  stroke: url(#waterGradient);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 55 120;
  filter: url(#waterGlow);
  vector-effect: non-scaling-stroke;
  animation: waterTravel 5.4s linear infinite;
}
.pipe-lower-flow { animation-direction: reverse; animation-duration: 6.2s; }
.faucet { stroke-width: 35; opacity: .55; }
.water-stream {
  fill: none;
  stroke: #7fe6ff;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-dasharray: 28 24;
  filter: url(#waterGlow);
  animation: fallingWater 1.2s linear infinite;
}
.drop {
  fill: rgba(91,214,255,.78);
  filter: url(#waterGlow);
  transform-origin: 1335px 540px;
  animation: dropFall 2.8s ease-in infinite;
}
.ripple {
  fill: none;
  stroke: rgba(103,220,255,.55);
  stroke-width: 8;
  transform-origin: 1335px 665px;
  animation: ripplePulse 3.2s ease-out infinite;
}
.ripple-two { animation-delay: -1.05s; }
.ripple-three { animation-delay: -2.1s; }
.bubble {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(148,234,255,.54);
  border-radius: 50%;
  opacity: 0;
  animation: bubbleRise 7s ease-in infinite;
}
.bubble-a { left: 8%; bottom: -4%; }
.bubble-b { left: 78%; bottom: -4%; animation-delay: -2.4s; width: 24px; height: 24px; }
.bubble-c { left: 92%; bottom: -4%; animation-delay: -4.8s; width: 10px; height: 10px; }

.reveal-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12vmin;
  height: 12vmin;
  border: 4px solid var(--screen-accent, #7ee2ff);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.1);
  box-shadow: 0 0 50px var(--screen-glow);
}
.projector-body[data-phase="reveal"] .reveal-burst {
  animation: revealBurst 1.4s ease-out 1;
}

.screen {
  position: relative;
  z-index: 2;
  width: min(1640px, 96vw);
}
.screen-stage {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(4,28,50,.88), rgba(5,52,83,.74));
  border-color: rgba(150,226,255,.25);
  box-shadow: 0 28px 95px rgba(0,0,0,.46), inset 0 0 80px rgba(63,191,242,.035);
}
.screen-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.045), transparent 27%, transparent 70%, rgba(96,216,255,.04));
}
.screen-stage > * { position: relative; z-index: 1; }
.screen-topbar { align-items: flex-start; }
.screen-brand-stack { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.screen-brand-stack > .brand { font-size: clamp(2rem, 4vw, 3.4rem); }
.screen-company-logos .company-logo-card {
  min-width: 155px;
  min-height: 68px;
  padding: 7px 13px;
}
.screen-company-logos .company-logo-card img { max-width: 180px; max-height: 54px; }
.screen-company-logos .company-logo-card.innservices-only img { max-width: 200px; }
.screen-hero-title { font-size: clamp(3rem,7vw,6rem); margin-bottom: 10px; text-shadow: 0 5px 30px rgba(0,0,0,.35); }
.screen-description { font-size: clamp(1rem,2vw,1.45rem); max-width: 900px; }
.screen-join-url { font-size: clamp(1rem,1.8vw,1.3rem); }
.screen-player-count { margin-top: 32px; }
.screen-player-list { max-height: 300px; overflow: hidden; }
.screen-qr-panel {
  text-align: center;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: rgba(0,0,0,.14);
}
.screen-question-title { font-size: clamp(2.2rem,5vw,4.5rem); text-shadow: 0 4px 25px rgba(0,0,0,.28); }
.screen-answer-grid { gap: clamp(14px,2vw,24px); }
.screen-answer {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 100px;
  font-size: clamp(1.15rem,2.1vw,1.8rem);
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  box-shadow: 0 15px 30px rgba(0,0,0,.16);
  animation: answerEnter .5s cubic-bezier(.2,.8,.2,1) both;
}
.screen-answer:nth-child(2) { animation-delay: .08s; }
.screen-answer:nth-child(3) { animation-delay: .16s; }
.screen-answer:nth-child(4) { animation-delay: .24s; }
.screen-answer:nth-child(5) { animation-delay: .32s; }
.screen-answer:nth-child(6) { animation-delay: .40s; }
.answer-index {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--blue-500), var(--blue-700));
  color: white;
  font-weight: 950;
  box-shadow: 0 7px 18px rgba(0,0,0,.22);
}
.screen-response-count { text-align: center; margin-top: 26px; color: #d9f5ff; }
.screen-results .bar-row {
  grid-template-columns: 50px minmax(160px,1.2fr) minmax(180px,3fr) 55px;
  font-size: clamp(1rem,1.6vw,1.35rem);
}
.screen-results .bar-track { height: 34px; }
.screen-results .bar-fill { transition: width 900ms cubic-bezier(.15,.8,.2,1); }
.screen-explanation { font-size: 1.3rem; }
.screen-leaderboard-head { text-align: center; }
.screen-leaderboard li {
  animation: leaderboardEnter .48s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--row) * 70ms);
}

@keyframes electricTravel { to { stroke-dashoffset: -600; } }
@keyframes sparkBlink {
  0%, 72%, 100% { opacity: 0; transform: scale(.3); }
  76% { opacity: 1; transform: scale(1.7); }
  80% { opacity: .35; transform: scale(.7); }
  84% { opacity: 1; transform: scale(1.15); }
  90% { opacity: 0; transform: scale(.4); }
}
@keyframes waterTravel { to { stroke-dashoffset: -700; } }
@keyframes fallingWater { to { stroke-dashoffset: -104; } }
@keyframes dropFall {
  0%, 18% { opacity: 0; transform: translateY(-40px) scale(.75); }
  30% { opacity: .9; }
  74% { opacity: .9; transform: translateY(100px) scale(1); }
  90%,100% { opacity: 0; transform: translateY(125px) scale(.75); }
}
@keyframes ripplePulse {
  0% { opacity: 0; transform: scale(.45); }
  22% { opacity: .75; }
  100% { opacity: 0; transform: scale(1.3); }
}
@keyframes bubbleRise {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(.5); }
  15% { opacity: .6; }
  100% { opacity: 0; transform: translateY(-105vh) translateX(50px) scale(1.35); }
}
@keyframes revealBurst {
  0% { opacity: .85; transform: translate(-50%,-50%) scale(.1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(12); border-width: 1px; }
}
@keyframes answerEnter {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes leaderboardEnter {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .current, .spark, .pipe-flow, .water-stream, .drop, .ripple, .bubble,
  .reveal-burst, .screen-answer, .screen-leaderboard li { animation: none !important; }
}

@media (max-width: 900px) {
  .participant-topbar { align-items: flex-start; }
  .participant-company-logos { max-width: 260px; }
  .participant-qr-panel { display: none; }
  .brand-control-grid { grid-template-columns: 1fr; }
  .brand-mode-preview { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 700px) {
  .participant-company-logos .company-logo-card { min-width: 82px; }
  .participant-company-logos .company-logo-card img { max-width: 88px; max-height: 28px; }
  .participant-company-logos .company-logo-card.innservices-only img { max-width: 98px; }
  .screen-company-logos { gap: 5px; }
  .screen-company-logos .company-logo-card { min-width: 105px; min-height: 50px; }
  .screen-company-logos .company-logo-card img { max-width: 110px; max-height: 34px; }
  .screen-company-logos .company-logo-card.innservices-only img { max-width: 122px; }
  .screen-results .bar-row { grid-template-columns: 42px 1fr 45px; }
  .screen-results .bar-track { grid-column: 1 / -1; }
}