:root {
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  color-scheme: dark;
  --bg: #0b0618;
  --bg-soft: #170a32;
  --surface: rgba(29, 18, 50, 0.92);
  --surface-2: rgba(41, 25, 68, 0.92);
  --surface-hover: rgba(69, 38, 112, 0.92);
  --border: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.24);
  --text: #fffafc;
  --muted: #bdb4c9;
  --primary: #8f43f7;
  --primary-dark: #6121bd;
  --primary-soft: rgba(143, 67, 247, 0.18);
  --yellow: #ffd43d;
  --yellow-text: #2c1d00;
  --danger: #dc4166;
  --danger-soft: rgba(220, 65, 102, 0.18);
  --success: #45d591;
  --success-soft: rgba(69, 213, 145, 0.14);
  --shadow: 0 22px 65px rgba(0, 0, 0, 0.28);
  --radius-lg: 24px;
  --radius-md: 17px;
  --page-width: 820px;
  --wide-width: 1160px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f1fc;
  --bg-soft: #e9ddfb;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-2: rgba(249, 246, 255, 0.98);
  --surface-hover: #efe4ff;
  --border: rgba(59, 31, 92, 0.15);
  --border-strong: rgba(59, 31, 92, 0.27);
  --text: #27153f;
  --muted: #746883;
  --primary: #7429dc;
  --primary-dark: #5520a1;
  --primary-soft: rgba(116, 41, 220, 0.11);
  --yellow: #f4bd23;
  --yellow-text: #2f2100;
  --danger: #c72f55;
  --danger-soft: rgba(199, 47, 85, 0.12);
  --success: #087d4a;
  --success-soft: rgba(8, 125, 74, 0.1);
  --shadow: 0 18px 55px rgba(68, 39, 98, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -10%, rgba(112, 50, 204, 0.45), transparent 34rem),
    radial-gradient(circle at 95% 20%, rgba(43, 154, 185, 0.12), transparent 28rem),
    linear-gradient(155deg, var(--bg-soft), var(--bg) 48%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

/* v0.48 — حقول كتابة مستقرة على Chrome Android وSamsung Internet. */
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
  touch-action: auto;
  caret-color: currentColor;
}
html.android-browser input,
html.android-browser textarea {
  -webkit-appearance: none;
  appearance: none;
}
body.keyboard-open,
body.text-entry-focused {
  scroll-behavior: auto;
}
body.keyboard-open .answer-entry-card,
body.text-entry-focused .answer-entry-card {
  scroll-margin-bottom: max(18px, env(safe-area-inset-bottom));
}

button {
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(255, 212, 61, 0.7);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none !important;
  filter: none !important;
}

.background-shapes {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.background-shapes::before,
.background-shapes::after {
  content: "";
  position: absolute;
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  filter: blur(55px);
  opacity: 0.13;
}

.background-shapes::before {
  top: 15%;
  right: -10rem;
  background: var(--primary);
}

.background-shapes::after {
  bottom: -12rem;
  left: -8rem;
  background: #17b9ca;
}

.app-shell {
  width: min(var(--page-width), calc(100% - 32px));
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  padding: 0 0 max(72px, env(safe-area-inset-bottom));
}

.app-shell.wide {
  width: min(var(--wide-width), calc(100% - 32px));
}

.topbar {
  position: sticky;
  top: 10px;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(48px, auto) 1fr minmax(48px, auto);
  align-items: center;
  gap: 12px;
  min-height: 68px;
  margin: 10px 0 26px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(16, 8, 34, 0.82);
  box-shadow: 0 13px 38px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

:root[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.84);
}

.topbar-side {
  display: flex;
  align-items: center;
  min-width: 0;
}

.topbar-side.end {
  justify-content: flex-end;
}

.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  line-height: 1;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(102, 39, 173, 0.28));
}

.logo-compact {
  width: clamp(112px, 10vw, 158px);
}

.logo-hero {
  width: clamp(250px, 38vw, 470px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon-btn,
.pill-btn {
  min-height: 44px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.icon-btn {
  min-width: 44px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 21px;
}

.pill-btn {
  padding: 10px 15px;
  border-radius: 999px;
  font-weight: 800;
}

.pill-btn.danger-soft {
  color: #ffb6c6;
  border-color: rgba(220, 65, 102, 0.4);
  background: var(--danger-soft);
}

.icon-btn:hover,
.pill-btn:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(32px, 7vw, 74px) 12px 36px;
  text-align: center;
}

.hero > .logo {
  margin-bottom: 10px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(31px, 5.5vw, 52px);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.hero p {
  max-width: 660px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.9;
}

.brand-hero {
  padding-top: clamp(22px, 5vw, 54px);
  padding-bottom: 24px;
}

.brand-tagline {
  max-width: 720px !important;
  margin-top: 2px !important;
  color: var(--text) !important;
  font-size: clamp(18px, 2.5vw, 25px) !important;
  font-weight: 800;
  line-height: 1.7 !important;
}

.brand-tagline strong {
  color: #b78cff;
}

.brand-tagline b {
  color: var(--yellow);
}

.page-head {
  max-width: 700px;
  margin: 22px auto 26px;
  text-align: center;
}

.page-head h1,
.page-head h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.35;
}

.page-head p,
p.page-head {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}

.card {
  width: 100%;
  margin: 16px 0;
  padding: clamp(19px, 4vw, 28px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.card.compact {
  padding: 16px;
  border-radius: 18px;
  box-shadow: none;
}

.card-title {
  margin: 0 0 18px;
  font-size: 25px;
}

.resume-card {
  margin-top: 0;
}

.resume-card h3 {
  margin: 0 0 8px;
  font-size: 23px;
}

.resume-card p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.8;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  min-width: 0;
  padding: 13px 19px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--text);
  background: var(--surface-2);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: transform 0.17s ease, filter 0.17s ease, box-shadow 0.17s ease;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #9846ff, var(--primary-dark));
  box-shadow: 0 12px 28px rgba(107, 36, 214, 0.3);
}

.btn-yellow {
  color: var(--yellow-text);
  background: linear-gradient(135deg, #ffe15d, var(--yellow));
  box-shadow: 0 12px 28px rgba(255, 200, 29, 0.2);
}

.btn-ghost {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface-2);
}

.btn-danger {
  color: #fff;
  background: var(--danger);
}

.label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
  color: var(--text);
  font-weight: 900;
  line-height: 1.5;
}

.input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 53px;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  outline: none;
  color: var(--text);
  background: rgba(0, 0, 0, 0.16);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:root[data-theme="light"] .input {
  background: rgba(255, 255, 255, 0.76);
}

.input:focus {
  border-color: rgba(160, 99, 255, 0.9);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.code-input {
  direction: ltr;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: clamp(23px, 5vw, 31px);
  font-weight: 900;
}

.help {
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 13px;
  cursor: help;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.segment {
  min-height: 48px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  background: var(--surface-2);
  font-weight: 800;
  cursor: pointer;
}

.segment.active {
  color: #fff;
  border-color: transparent;
  background: var(--primary);
  box-shadow: 0 8px 20px rgba(143, 67, 247, 0.22);
}

.inline-note {
  margin: 9px 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.toggle-row > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.toggle-row small {
  color: var(--muted);
  line-height: 1.55;
}

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 31px;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.slider {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #665d72;
  cursor: pointer;
  transition: background 0.18s ease;
}

.slider::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}

.switch input:checked + .slider {
  background: var(--primary);
}

.switch input:checked + .slider::before {
  transform: translateX(-23px);
}

.sound-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.sound-option {
  min-height: 47px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.sound-option:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.sound-option.active {
  color: #fff;
  border-color: rgba(204, 174, 255, 0.85);
  background: var(--primary);
  box-shadow: 0 8px 20px rgba(143, 67, 247, 0.22);
}

.status-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.13);
}

.status-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
}

.round,
.score {
  white-space: nowrap;
  font-weight: 900;
}

.round {
  color: var(--muted);
}

.score {
  color: var(--yellow);
}

.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.qr-wrap {
  width: min(330px, 100%);
  padding: 13px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
  cursor: zoom-in;
}

.qr-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.room-code {
  max-width: 100%;
  margin: 22px auto 4px;
  overflow-wrap: anywhere;
  color: var(--yellow);
  font-size: clamp(36px, 8vw, 64px);
  font-weight: 900;
  letter-spacing: 0.15em;
  direction: ltr;
  text-align: center;
}

.join-link {
  width: 100%;
  margin-top: 13px;
  padding: 11px;
  overflow-wrap: anywhere;
  border-radius: 12px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.13);
  direction: ltr;
  font-size: 13px;
}

.players-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.players-title h3 {
  margin: 0;
  font-size: 22px;
}

.players {
  display: grid;
  gap: 9px;
}

.player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
}

.player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.player-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.kick-btn {
  min-height: 35px;
  padding: 6px 10px;
  border: 1px solid rgba(220, 65, 102, 0.4);
  border-radius: 10px;
  color: #ffc0cf;
  background: var(--danger-soft);
  font-weight: 800;
  cursor: pointer;
}

.empty {
  padding: 24px;
  border: 1px dashed var(--border-strong);
  border-radius: 15px;
  color: var(--muted);
  text-align: center;
}

.game-stage {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.card.game-stage {
  min-height: 420px;
}

.timer {
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  flex: 0 0 94px;
  margin: 0 auto 22px;
  border: 7px solid var(--yellow);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface-2);
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.timer.paused {
  border-color: var(--muted);
}

.question {
  width: 100%;
  max-width: 820px;
  margin: 8px auto 24px;
  overflow-wrap: anywhere;
  font-size: clamp(26px, 4.5vw, 43px);
  font-weight: 900;
  line-height: 1.55;
  text-align: center;
}

.progress-text {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
  text-align: center;
}

.waiting-icon {
  margin-bottom: 12px;
  font-size: 52px;
}

.waiting-name {
  display: inline-flex;
  margin-top: 20px;
  padding: 9px 16px;
  border-radius: 999px;
  color: #d9c2ff;
  background: var(--primary-soft);
  font-weight: 800;
}

.answer-box {
  width: 100%;
}

.answer-input {
  font-size: max(18px, 1rem);
  line-height: 1.55;
  -webkit-user-select: text;
  user-select: text;
}

.option {
  display: block;
  width: 100%;
  min-height: 58px;
  margin-top: 10px;
  padding: 15px 17px;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  background: var(--surface-2);
  font-weight: 800;
  line-height: 1.6;
  text-align: right;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.option:hover {
  transform: translateY(-1px);
  border-color: rgba(170, 116, 255, 0.7);
  background: var(--surface-hover);
}

.result {
  margin: 11px 0;
  padding: 15px 17px;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-right: 5px solid var(--primary);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
}

.result.correct {
  border-right-color: var(--success);
  background: var(--success-soft);
}

.result h3 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.65;
}

.result p {
  margin: 5px 0;
  color: var(--muted);
  line-height: 1.65;
}

.host-toolbar {
  position: sticky;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 9;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: rgba(17, 9, 34, 0.9);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

:root[data-theme="light"] .host-toolbar {
  background: rgba(255, 255, 255, 0.92);
}

.host-toolbar .btn {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14px;
}

.success {
  color: var(--success);
}

.muted {
  color: var(--muted);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow-y: auto;
  background: rgba(4, 2, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal {
  position: relative;
  width: min(650px, 100%);
  max-height: min(90vh, 760px);
  max-height: min(90dvh, 760px);
  padding: clamp(23px, 4vw, 34px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(145deg, #8c2ef4, #5719c1);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.52);
}

.modal.neutral {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}

.close-modal {
  position: sticky;
  top: 0;
  z-index: 2;
  float: left;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: -8px -4px 0 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: inherit;
  background: rgba(255, 255, 255, 0.11);
  font-size: 27px;
  cursor: pointer;
}

.modal.neutral .close-modal {
  border-color: var(--border);
  background: var(--surface-2);
}

.modal h2 {
  clear: both;
  margin: 4px 0 6px;
  font-size: clamp(27px, 5vw, 34px);
  text-align: center;
}

.modal-sub {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  text-align: center;
}

.modal.neutral .modal-sub {
  color: var(--muted);
}

.compact-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(88vh, 760px);
  max-height: min(88dvh, 760px);
  padding: clamp(18px, 3.3vw, 28px);
  overflow: hidden;
}

.compact-modal .close-modal {
  width: 38px;
  height: 38px;
  margin: -4px -2px 0 0;
  font-size: 24px;
}

.compact-modal h2 {
  margin-top: 0;
  font-size: clamp(24px, 4.1vw, 32px);
}

.compact-modal .modal-sub {
  margin-bottom: 14px;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.55;
}

.steps {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.08);
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.55;
}

.step-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 19px;
  font-weight: 900;
}

.modal > .btn:last-child {
  width: 100%;
  margin-top: 8px;
}

.modal-sound-grid {
  max-height: none;
  padding: 3px;
  overflow: visible;
}

.qr-modal {
  margin: 20px 0;
  text-align: center;
}

.qr-modal img {
  display: block;
  width: min(420px, 100%);
  margin: 0 auto;
  padding: 12px;
  border-radius: 19px;
  background: #fff;
}

.toast {
  position: fixed;
  right: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 90;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 13px 19px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  color: #fff;
  background: #191025;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4);
  transform: translateX(50%);
  line-height: 1.55;
  text-align: center;
}

.hidden {
  display: none !important;
}

@media (max-width: 760px) {
  .app-shell,
  .app-shell.wide {
    width: min(100% - 20px, var(--page-width));
  }

  .topbar {
    top: 6px;
    min-height: 61px;
    margin: 6px 0 18px;
    padding: 8px;
    border-radius: 17px;
  }

  .pill-label {
    display: none;
  }

  .hero {
    padding-top: 35px;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .sound-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .status-strip .score {
    grid-column: 1 / -1;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    text-align: center;
  }

  .card.game-stage {
    min-height: 360px;
  }

  .question {
    font-size: clamp(24px, 7vw, 34px);
  }

  .host-toolbar {
    position: static;
  }

  .host-toolbar .btn {
    flex: 1 1 calc(50% - 9px);
  }
}

@media (max-width: 480px) {
  .app-shell,
  .app-shell.wide {
    width: min(100% - 14px, var(--page-width));
  }

  .topbar {
    grid-template-columns: 46px 1fr 46px;
    gap: 5px;
  }

  .logo-compact {
    width: 108px;
  }

  .logo-hero {
    width: min(88vw, 390px);
  }

  .pill-btn {
    min-width: 43px;
    padding-inline: 10px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .card {
    padding: 18px 15px;
    border-radius: 19px;
  }

  .segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sound-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .sound-option {
    padding-inline: 5px;
    font-size: 13px;
  }

  .toggle-row {
    align-items: flex-start;
  }

  .players-title,
  .player {
    align-items: flex-start;
  }

  .player {
    flex-direction: column;
  }

  .player-actions {
    width: 100%;
    justify-content: space-between;
  }

  .room-code {
    letter-spacing: 0.09em;
  }

  .step {
    align-items: start;
    padding: 10px;
  }

  .host-toolbar .btn {
    flex-basis: 100%;
  }
}

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

/* =========================================================
   تجربة الجولة المطوّرة — مستوحاة من ألعاب الحفلات الحديثة
   بهوية أصلية خاصة بفبركة
   ========================================================= */
.game-shell {
  width: min(1480px, calc(100% - 28px));
  padding-bottom: 110px;
}

.game-hud {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 calc(50% - 50vw) 18px;
  padding: 10px max(18px, calc((100vw - 1480px) / 2));
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-soft) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.game-hud-main {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 58px;
}

.hud-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.hud-actions.end {
  justify-content: flex-end;
}

.hud-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 0;
  white-space: nowrap;
}

.hud-brand .logo {
  width: clamp(112px, 10vw, 165px);
  flex: 0 0 auto;
}



.hud-button,
.hud-chip {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text);
  background: var(--surface-2);
  font-weight: 900;
}

.hud-button {
  cursor: pointer;
}

.hud-button:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.hud-button.danger-soft {
  color: #ffd0dc;
  border-color: rgba(220, 65, 102, 0.42);
  background: var(--danger-soft);
}

.room-mini {
  direction: ltr;
  letter-spacing: .08em;
}

.score-chip {
  color: var(--fbrkh-theme-accent, var(--yellow));
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.game-hud-meta {
  display: flex;
  justify-content: center;
  gap: 18px;
  min-height: 24px;
  color: var(--muted);
  font-size: 14px;
}

.game-hud-meta strong {
  color: var(--fbrkh-theme-accent, var(--yellow));
}

.timer-shell {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 12px 0 4px;
  padding: 7px 0;
}

.timer-track {
  position: relative;
  height: 38px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.22);
}

.timer-fill {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal, var(--primary)), var(--primary));
  transition: width .85s linear, background .25s ease;
}

.timer-number {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 23px;
  font-weight: 1000;
  text-shadow: 0 2px 7px rgba(0,0,0,.48);
}

.timer-side-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface-2);
  font-size: 19px;
}

.timer-shell.paused .timer-fill {
  background: var(--muted);
}

.timer-shell.urgent .timer-fill {
  background: linear-gradient(90deg, #e1325e, #ff7f50);
  animation: timerPulse .7s infinite alternate;
}

@keyframes timerPulse {
  to { filter: brightness(1.3); }
}

.question-stage {
  min-height: clamp(420px, 58vh, 690px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 6vw, 85px) clamp(18px, 5vw, 80px);
  text-align: center;
}

.question-stage::before {
  content: "؟";
  position: absolute;
  left: 6%;
  color: color-mix(in srgb, var(--primary) 16%, transparent);
  font-size: clamp(90px, 14vw, 210px);
  font-weight: 1000;
  pointer-events: none;
}

.question-stage h1 {
  position: relative;
  max-width: 1150px;
  margin: 18px auto;
  font-size: clamp(35px, 5.2vw, 72px);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.question-stage p {
  max-width: 750px;
  margin: 4px auto 0;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 23px);
}

.stage-kicker {
  display: inline-flex;
  padding: 8px 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 48%, var(--border));
  border-radius: 999px;
  color: var(--fbrkh-theme-accent, var(--yellow));
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  font-weight: 900;
}

.voting-stage h1 {
  font-size: clamp(31px, 4.6vw, 62px);
}

.stage-players {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: -22px auto 26px;
}

.stage-players-title {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.player-chips,
.voter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.player-chip,
.voter-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 15px;
  border: 1px solid currentColor;
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  font-weight: 900;
}

.player-chip.amber,.voter-chip.amber { color:#ffc43d; background:rgba(255,160,20,.14); }
.player-chip.cyan,.voter-chip.cyan { color:#4edaff; background:rgba(10,164,220,.14); }
.player-chip.rose,.voter-chip.rose { color:#ff6d93; background:rgba(226,44,99,.14); }
.player-chip.violet,.voter-chip.violet { color:#bf87ff; background:rgba(140,64,240,.14); }
.player-chip.green,.voter-chip.green { color:#48dfa1; background:rgba(25,190,124,.14); }
.player-chip.blue,.voter-chip.blue { color:#7aa7ff; background:rgba(64,105,226,.14); }
.player-chip.orange,.voter-chip.orange { color:#ff945b; background:rgba(235,103,31,.14); }
.player-chip.pink,.voter-chip.pink { color:#ff8de1; background:rgba(223,70,185,.14); }

.chip-kick {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: rgba(0,0,0,.26);
  font-size: 17px;
  cursor: pointer;
}

.lobby-hero {
  max-width: 760px;
  margin: 38px auto 28px;
  text-align: center;
}

.lobby-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(30px, 4vw, 50px);
}

.lobby-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}

.lobby-layout {
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(400px, 1.15fr);
  gap: 28px;
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
}

.lobby-join-card,
.lobby-panel,
.answer-entry-card,
.submission-card,
.scoreboard-card,
.reveal-answer-card {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.lobby-join-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px;
  text-align: center;
}

.lobby-qr {
  width: min(290px, 82vw);
}

.lobby-code-label {
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
}

.lobby-join-card .room-code {
  margin-top: 5px;
  font-size: clamp(34px, 6vw, 55px);
}

.compact-btn {
  width: auto;
  min-width: 190px;
}

.lobby-panel {
  display: flex;
  flex-direction: column;
  min-height: 540px;
  padding: 26px;
}

.lobby-panel .players-title span {
  color: var(--muted);
  font-weight: 900;
}

.lobby-panel .player-chips {
  justify-content: flex-start;
  align-content: flex-start;
  flex: 1;
  padding: 20px 0;
}

.lobby-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: rgba(255,255,255,.045);
}

.lobby-option small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.lobby-start {
  min-height: 62px;
  font-size: 21px;
}

.cinematic-stage,
.waiting-stage,
.final-stage,
.ranking-stage,
.reveal-stage {
  min-height: clamp(520px, 66vh, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.cinematic-icon {
  margin-bottom: 18px;
  font-size: clamp(64px, 8vw, 110px);
}

.cinematic-stage h1,
.waiting-stage h1,
.final-stage h1,
.ranking-stage h1 {
  margin: 0;
  font-size: clamp(42px, 7vw, 88px);
  line-height: 1.35;
}

.cinematic-stage p,
.waiting-stage p,
.final-stage p {
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(17px, 2.2vw, 25px);
}

.stage-hint {
  margin-top: 30px;
  padding: 9px 16px;
  border-radius: 999px;
  color: #d9c1ff;
  background: var(--primary-soft);
  font-weight: 900;
}

.reveal-stage {
  min-height: clamp(520px, 65vh, 730px);
}

.reveal-progress {
  margin-bottom: 16px;
  color: var(--muted);
  font-weight: 900;
}

.reveal-answer-card {
  width: min(880px, 100%);
  padding: clamp(28px, 5vw, 58px);
  text-align: center;
}

.reveal-answer-card.fake {
  border-color: rgba(161,96,255,.42);
}

.reveal-answer-card.correct {
  border-color: rgba(48,215,153,.55);
  background: linear-gradient(150deg, rgba(32,176,125,.16), var(--surface));
}

.answer-type {
  display: inline-flex;
  align-self: center;
  justify-content: center;
  text-align: center;
  margin-inline: auto;
  padding: 8px 15px;
  border-radius: 999px;
  color: #d9c2ff;
  background: var(--primary-soft);
  font-weight: 900;
}

.reveal-answer-card.correct .answer-type {
  color: #78f0be;
  background: var(--success-soft);
}

.reveal-answer-card h1 {
  margin: 22px 0;
  overflow-wrap: anywhere;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.45;
}

.answer-authors,
.answer-voters {
  display: grid;
  justify-items: center;
  gap: 9px;
  margin-top: 22px;
}

.answer-authors span,
.answer-voters > span:first-child {
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.answer-authors strong {
  color: var(--yellow);
  font-size: 22px;
}

.nobody-chip {
  display: inline-flex;
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.06);
}

.scoreboard-card {
  width: min(780px, 100%);
  overflow: hidden;
}

.scoreboard-head {
  display: flex;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

.scoreboard-head span {
  color: var(--text);
  font-size: 23px;
  font-weight: 1000;
}

.scoreboard-list {
  padding: 10px 18px 18px;
}

.scoreboard-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 110px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.scoreboard-row:last-child {
  border-bottom: 0;
}

.scoreboard-row:first-child .position,
.scoreboard-row:first-child .scoreboard-name {
  color: var(--yellow);
}

.scoreboard-row.me {
  border-radius: 13px;
  background: var(--primary-soft);
}

.position {
  color: var(--muted);
  font-size: 24px;
  font-weight: 1000;
}

.scoreboard-name {
  overflow: hidden;
  font-size: 21px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scoreboard-score {
  text-align: left;
  font-size: 24px;
  font-weight: 1000;
}

.mobile-question {
  max-width: 920px;
  margin: 42px auto 24px;
  text-align: center;
}

.mobile-question > span {
  color: #c8a5ff;
  font-weight: 900;
}

.mobile-question h1 {
  margin: 13px 0 0;
  overflow-wrap: anywhere;
  font-size: clamp(27px, 5vw, 51px);
  line-height: 1.55;
}

.answer-entry-card,
.submission-card {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: clamp(22px, 5vw, 38px);
}

.submission-card {
  text-align: center;
}

.submission-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 50%;
  color: #07170f;
  background: var(--success);
  font-size: 36px;
  font-weight: 1000;
}

.submission-card p {
  overflow-wrap: anywhere;
  font-size: 22px;
}

.submission-card small {
  color: var(--muted);
}

.vote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: min(920px, 100%);
  margin: 0 auto;
}

.vote-option {
  position: relative;
  min-height: 120px;
  margin: 0;
  padding: 22px;
  text-align: center;
  font-size: clamp(19px, 2.4vw, 28px);
}

.vote-option > span {
  position: absolute;
  top: 11px;
  left: 13px;
  color: #ab7cf0;
  font-size: 13px;
}

.waiting-stage .how-player {
  width: auto;
  margin-top: 20px;
}

.final-stage > h2 {
  margin: 8px 0;
  color: var(--yellow);
  font-size: clamp(34px, 6vw, 66px);
}

.final-stage > strong {
  margin-bottom: 30px;
  color: var(--success);
  font-size: 28px;
}

.final-stage .scoreboard-card {
  margin: 28px auto;
}

.final-home {
  width: min(550px, 100%);
}

.final-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(720px, 100%);
}

.final-actions .btn {
  width: 100%;
}

.host-toolbar {
  max-width: 1040px;
  margin-inline: auto;
}

.question-blank {
  display: inline-block;
  width: clamp(72px, 12vw, 170px);
  height: .9em;
  margin-inline: .16em;
  border-bottom: .09em solid #a871ff;
  vertical-align: -.08em;
  filter: drop-shadow(0 3px 8px rgba(144, 70, 244, .28));
}

.phase-flash {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(18px, 4vw, 56px);
  color: #fff;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 192, 47, .14), transparent 29%),
    radial-gradient(circle at 15% 12%, rgba(170, 80, 255, .24), transparent 28%),
    linear-gradient(160deg, #221039 0%, #12091f 52%, #090510 100%);
  animation: phaseFlashIn .34s cubic-bezier(.2,.8,.2,1) both;
}

.phase-flash::before,
.phase-flash::after {
  content: '';
  position: absolute;
  width: min(54vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .28;
  pointer-events: none;
}
.phase-flash::before { inset: -22% auto auto -14%; background: #7b36e8; }
.phase-flash::after { inset: auto -18% -35% auto; background: #ffb52e; opacity: .16; }

.phase-scene {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(820px, 100%);
  justify-items: center;
  gap: clamp(8px, 1.5vh, 16px);
  text-align: center;
}

.phase-eyebrow {
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #d8c8ee;
  background: rgba(255,255,255,.055);
  font-size: clamp(12px, 1.5vw, 17px);
  animation: phaseItemIn .48s .05s ease-out both;
}

.phase-main-icon {
  font-size: clamp(70px, min(12vw, 15vh), 132px);
  line-height: 1;
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.36));
  animation: phaseIconPop .78s .08s cubic-bezier(.15,.9,.2,1.2) both;
}

.phase-flash h1,
.phase-flash h2,
.phase-flash p { margin: 0; }

.phase-flash h1 {
  color: #ffd137;
  font-size: clamp(42px, min(8vw, 9vh), 94px);
  line-height: 1.05;
  text-shadow: 0 7px 30px rgba(255, 179, 23, .34);
  animation: phaseTitleIn .62s .14s cubic-bezier(.18,.88,.22,1) both;
}

.phase-flash h2 {
  font-size: clamp(28px, min(5vw, 6vh), 58px);
  line-height: 1.15;
  animation: phaseItemIn .5s .24s ease-out both;
}

.phase-flash.is-double h1,
.phase-flash.is-double h2 {
  text-shadow: 0 0 32px rgba(255, 179, 23, .55), 0 10px 40px rgba(0,0,0,.3);
}

.phase-points-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(520px, 100%);
  margin-top: clamp(4px, 1vh, 12px);
  overflow: hidden;
  border: 1px solid rgba(255, 213, 66, .18);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 172, 31, .12), rgba(119, 55, 198, .22));
  box-shadow: 0 18px 60px rgba(0,0,0,.28), 0 0 42px rgba(255, 184, 38, .12);
  animation: phaseCardIn .62s .3s cubic-bezier(.18,.88,.22,1) both;
}

.phase-points-card > div {
  display: grid;
  gap: 4px;
  padding: clamp(15px, 2.4vw, 24px);
}
.phase-points-card > div + div { border-inline-start: 1px solid rgba(255,255,255,.14); }
.phase-points-card span { color: #e6bf3f; font-size: clamp(12px, 1.6vw, 17px); }
.phase-points-card strong { font-size: clamp(38px, 6vw, 68px); line-height: 1; }

.phase-flash p {
  color: #bfb0d3;
  font-size: clamp(14px, 1.8vw, 20px);
  animation: phaseItemIn .46s .4s ease-out both;
}

.phase-particles {
  position: absolute;
  inset: -12vh -8vw;
  pointer-events: none;
}
.phase-particles i {
  position: absolute;
  color: #ffd14a;
  font-style: normal;
  opacity: .55;
  animation: phaseParticleFloat 3.8s ease-in-out infinite alternate;
}
.phase-particles i:nth-child(1) { inset: 9% auto auto 7%; font-size: 44px; }
.phase-particles i:nth-child(2) { inset: 18% 8% auto auto; color:#9c5bff; font-size: 36px; animation-delay:.2s; }
.phase-particles i:nth-child(3) { inset: auto auto 12% 12%; font-size: 52px; animation-delay:.45s; }
.phase-particles i:nth-child(4) { inset: auto 6% 17% auto; color:#ff8d48; font-size: 48px; animation-delay:.7s; }
.phase-particles i:nth-child(5) { inset: 43% auto auto -1%; color:#6edaff; font-size: 30px; animation-delay:.95s; }
.phase-particles i:nth-child(6) { inset: 52% -1% auto auto; color:#ff6f9f; font-size: 34px; animation-delay:1.15s; }

.phase-results h1 { color: #c98cff; text-shadow: 0 7px 30px rgba(165, 81, 255, .34); }
.phase-voting h1 { color: #57e3bd; text-shadow: 0 7px 30px rgba(50, 215, 170, .28); }
.phase-finished h1 { color: #ffd137; }
.phase-flash.leaving { animation: phaseFlashOut .65s cubic-bezier(.4,0,.8,.2) both; }

@keyframes phaseFlashIn {
  from { opacity: 0; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes phaseFlashOut {
  to { opacity: 0; transform: scale(.975); filter: blur(6px); }
}
@keyframes phaseIconPop {
  0% { opacity: 0; transform: translateY(24px) scale(.45) rotate(-12deg); }
  68% { opacity: 1; transform: translateY(-8px) scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes phaseTitleIn {
  from { opacity: 0; transform: translateY(24px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes phaseItemIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes phaseCardIn {
  from { opacity: 0; transform: translateY(20px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes phaseParticleFloat {
  from { transform: translate3d(0, -6px, 0) rotate(-8deg); }
  to { transform: translate3d(8px, 12px, 0) rotate(12deg); }
}

@media (max-width: 560px), (max-height: 660px) {
  .phase-flash { padding: 14px; }
  .phase-scene { gap: 7px; }
  .phase-main-icon { font-size: clamp(54px, 11vh, 82px); }
  .phase-flash h1 { font-size: clamp(34px, 7vh, 58px); }
  .phase-flash h2 { font-size: clamp(23px, 4.8vh, 38px); }
  .phase-points-card { max-width: 430px; border-radius: 17px; }
  .phase-points-card > div { padding: 12px; }
  .phase-points-card strong { font-size: clamp(32px, 6vh, 52px); }
  .phase-flash p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .phase-flash,
  .phase-main-icon,
  .phase-flash h1,
  .phase-flash h2,
  .phase-flash p,
  .phase-eyebrow,
  .phase-points-card,
  .phase-particles i { animation: none !important; }
}

@media (max-width: 900px) {
  .game-hud-main {
    grid-template-columns: 1fr auto 1fr;
  }
  .room-mini {
    display: none;
  }
  .lobby-layout {
    grid-template-columns: 1fr;
    max-width: 680px;
  }
  .lobby-panel {
    min-height: auto;
  }
  .question-stage {
    min-height: 500px;
  }
}

@media (max-width: 650px) {
  .game-shell {
    width: min(100% - 14px, 1480px);
    padding-bottom: 90px;
  }
  .game-hud {
    margin-inline: calc(50% - 50vw);
    padding-inline: 8px;
  }
  .game-hud-main {
    grid-template-columns: 1fr auto 1fr;
    gap: 5px;
  }
  .hud-brand .logo {
    font-size: 24px;
  }
  .hud-button,
  .hud-chip {
    min-height: 39px;
    padding: 7px 9px;
    font-size: 13px;
  }
  .hud-button span {
    display: none;
  }
  .game-hud-meta {
    font-size: 12px;
  }
  .timer-shell {
    grid-template-columns: 38px minmax(0,1fr) 38px;
    gap: 6px;
  }
  .timer-side-icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .timer-track {
    height: 32px;
  }
  .timer-number {
    font-size: 19px;
  }
  .question-stage {
    min-height: 430px;
    padding-inline: 8px;
  }
  .question-stage h1 {
    font-size: clamp(28px, 8.5vw, 42px);
  }
  .stage-players {
    margin-top: 0;
  }
  .player-chip,
  .voter-chip {
    min-height: 37px;
    padding: 6px 11px;
    font-size: 13px;
  }
  .lobby-join-card,
  .lobby-panel {
    padding: 18px;
  }
  .vote-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .vote-option {
    min-height: 78px;
    font-size: 18px;
  }
  .cinematic-stage,
  .waiting-stage,
  .final-stage,
  .ranking-stage,
  .reveal-stage {
    min-height: 500px;
    padding-inline: 8px;
  }
  .cinematic-stage h1,
  .waiting-stage h1,
  .final-stage h1,
  .ranking-stage h1 {
    font-size: clamp(38px, 12vw, 64px);
  }
  .reveal-answer-card {
    padding: 25px 16px;
  }
  .reveal-answer-card h1 {
    font-size: clamp(32px, 10vw, 50px);
  }
  .scoreboard-row {
    grid-template-columns: 36px minmax(0,1fr) 75px;
  }
  .scoreboard-name,
  .scoreboard-score {
    font-size: 18px;
  }
}

/* =========================================================
   الهوية المصححة: شعار متجهي دقيق لكلمة «فبركة»
   ========================================================= */
.home-shell {
  width: min(1080px, calc(100% - 32px));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 10px 16px;
}

.topbar-brand,
.topbar-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.topbar-actions {
  gap: 8px;
  justify-content: flex-end;
}

.logo-image {
  filter: drop-shadow(0 10px 20px rgba(71, 20, 130, 0.34));
}

.logo-compact {
  width: clamp(128px, 12vw, 176px);
}

.logo-hero {
  width: clamp(300px, 42vw, 520px);
  max-width: 100%;
}

.brand-hero {
  position: relative;
  max-width: 900px;
  padding: clamp(34px, 6vw, 64px) 16px 30px;
}

.brand-hero::before {
  content: "";
  position: absolute;
  inset: 12% 12% 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 67, 247, 0.17), transparent 68%);
  filter: blur(4px);
}

.brand-tagline {
  margin-top: 12px !important;
  font-size: clamp(20px, 2.7vw, 29px) !important;
}

.brand-subtitle {
  margin-top: 4px !important;
  color: var(--muted) !important;
  font-size: clamp(15px, 1.8vw, 18px) !important;
}

.home-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 920px;
  margin: 0 auto 18px;
}

.home-action {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid transparent;
  border-radius: 22px;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
  transition: transform .16s ease, filter .16s ease;
  text-align: right;
}

.home-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.home-action-create {
  color: #2c1d00;
  background: linear-gradient(135deg, #ffe25a, #ffb92f);
}

.home-action-join {
  color: #fff;
  background: linear-gradient(135deg, #a34fff, #6422c6);
}

.home-action-how {
  grid-column: 1 / -1;
  min-height: 66px;
  color: #fff;
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.home-action-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 15px;
  background: rgba(255,255,255,.14);
  font-size: 28px;
  font-weight: 900;
}

.home-action b,
.home-action small {
  display: block;
}

.home-action b {
  font-size: clamp(20px, 2.3vw, 25px);
}

.home-action small {
  margin-top: 5px;
  opacity: .78;
  font-size: 14px;
  line-height: 1.55;
}

.home-how {
  max-width: 920px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
}

.home-how-copy {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.home-how-mark {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #a45bff, #5d1fbd);
  box-shadow: 0 9px 24px rgba(108, 37, 199, .35);
  font-size: 28px;
  font-weight: 900;
}

.home-how h2,
.home-how p {
  margin: 0;
}

.home-how h2 {
  font-size: 22px;
}

.home-how p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.6;
}

.home-features {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--border);
}

.home-features > div {
  padding: 18px 14px;
  background: var(--surface);
  text-align: center;
}

.home-features b,
.home-features span {
  display: block;
}

.home-features b {
  color: #d8c1ff;
  font-size: 17px;
}

.home-features span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 700px) {
  .home-shell {
    width: min(100% - 18px, 1080px);
  }
  .topbar {
    min-height: 62px;
    padding: 7px 9px;
  }
  .logo-compact {
    width: 122px;
  }
  .logo-hero {
    width: min(92vw, 430px);
  }
  .brand-hero {
    padding-top: 24px;
  }
  .home-actions {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .home-how {
    align-items: stretch;
    flex-direction: column;
  }
  .home-how .btn {
    width: 100%;
  }
  .home-features {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ملاحظات تجربة اللعب — عرض كامل دون تمرير وكشف تلقائي
   ========================================================= */
body.game-active {
  --phase-glow: rgba(112, 50, 204, .34);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% -10%, var(--phase-glow), transparent 34rem),
    radial-gradient(circle at 95% 20%, rgba(43, 154, 185, .11), transparent 28rem),
    linear-gradient(155deg, var(--bg-soft), var(--bg) 48%);
  transition: background-color .7s ease;
}

body.game-active.game-phase-answering { --phase-glow: rgba(101, 75, 235, .42); }
body.game-active.game-phase-voting { --phase-glow: rgba(32, 196, 154, .29); }
body.game-active.game-phase-results { --phase-glow: rgba(226, 73, 142, .28); }
body.game-active.game-phase-finished { --phase-glow: rgba(255, 193, 52, .25); }

.game-active .game-shell {
  display: flex;
  flex-direction: column;
  width: min(1480px, calc(100% - 20px));
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.game-active .game-hud {
  position: relative;
  top: auto;
  flex: 0 0 auto;
  min-height: 0;
  margin-bottom: clamp(2px, .7vh, 8px);
  padding-block: clamp(4px, .8vh, 9px);
}

.game-active .game-hud-main {
  min-height: clamp(44px, 6.4vh, 58px);
}

.game-active .game-hud-meta {
  min-height: 18px;
  line-height: 1.2;
}

.game-active .timer-shell {
  flex: 0 0 auto;
  margin: 0;
  padding-block: clamp(3px, .6vh, 7px);
}

.game-active .question-stage {
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(12px, 2.6vh, 34px) clamp(12px, 4vw, 60px);
}

.game-active .question-stage h1 {
  margin-block: clamp(8px, 1.6vh, 18px);
  font-size: clamp(27px, min(5vw, 6.5vh), 68px);
  line-height: 1.35;
}

.game-active .question-stage p {
  font-size: clamp(14px, min(1.8vw, 2.4vh), 21px);
}

.game-active .stage-players {
  flex: 0 0 auto;
  margin: 0 auto clamp(4px, 1vh, 12px);
  gap: 6px;
}

.game-active .player-chip,
.game-active .voter-chip {
  min-height: clamp(30px, 4.5vh, 40px);
  padding: 5px 11px;
  font-size: clamp(12px, 1.7vh, 15px);
}

.game-active .host-toolbar {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: min(1040px, 100%);
  margin: clamp(3px, .7vh, 8px) auto 0;
  padding: clamp(5px, .8vh, 9px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: none;
}

.game-active .host-toolbar .btn {
  flex: 1 1 150px;
  min-height: clamp(42px, 5.7vh, 54px);
  padding-block: 8px;
}

.reveal-toolbar {
  justify-content: center;
}

.reveal-toolbar .btn {
  max-width: 330px;
}

/* غرفة المضيف في شاشة واحدة */
.game-active .lobby-hero {
  flex: 0 0 auto;
  margin: clamp(4px, 1.2vh, 14px) auto clamp(5px, 1.2vh, 14px);
}

.game-active .lobby-hero h1 {
  font-size: clamp(24px, min(4vw, 5vh), 44px);
}

.game-active .lobby-hero p {
  font-size: clamp(13px, 1.8vh, 17px);
}

.game-active .lobby-layout {
  flex: 1 1 auto;
  min-height: 0;
  width: min(1120px, 100%);
  gap: clamp(8px, 1.6vw, 20px);
}

.game-active .lobby-join-card,
.game-active .lobby-panel {
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 1.8vh, 22px);
}

.game-active .lobby-qr {
  width: min(230px, 28vh, 72%);
}

.game-active .lobby-code-label {
  margin-top: clamp(5px, 1vh, 12px);
}

.game-active .lobby-join-card .room-code {
  margin-block: 0;
  font-size: clamp(28px, min(5vw, 6vh), 48px);
}

.game-active .compact-btn {
  min-width: 150px;
  min-height: 42px;
}

.game-active .lobby-panel .player-chips {
  min-height: 0;
  padding: clamp(5px, 1vh, 12px) 0;
  overflow: hidden;
}

.game-active .lobby-option {
  flex: 0 0 auto;
  margin: clamp(4px, .8vh, 10px) 0;
  padding: clamp(8px, 1.2vh, 13px);
}

.game-active .lobby-start {
  flex: 0 0 auto;
  min-height: clamp(46px, 6vh, 58px);
}

/* السؤال والتصويت */
.host-voting-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  gap: clamp(6px, 1vh, 12px);
  padding: clamp(2px, .6vh, 7px) 0;
}

.host-voting-question {
  text-align: center;
}

.host-voting-question h1 {
  max-width: 1150px;
  margin: clamp(4px, .8vh, 10px) auto 0;
  font-size: clamp(23px, min(3.7vw, 4.8vh), 49px);
  line-height: 1.3;
}

.game-active .mobile-question {
  flex: 0 1 auto;
  max-width: 1000px;
  margin: clamp(3px, .8vh, 10px) auto;
}

.game-active .mobile-question h1 {
  margin-top: 3px;
  font-size: clamp(21px, min(4.3vw, 4.8vh), 43px);
  line-height: 1.3;
}

.game-active .answer-entry-card,
.game-active .submission-card {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  margin-bottom: clamp(3px, .8vh, 10px);
  padding: clamp(14px, 2.4vh, 28px);
}

.game-active .answer-entry-card .label,
.game-active .answer-entry-card .inline-note {
  margin-block: clamp(3px, .7vh, 9px);
}

.game-active .answer-entry-card .input {
  min-height: clamp(46px, 6vh, 58px);
}

.game-active .submission-icon {
  width: clamp(48px, 7vh, 68px);
  height: clamp(48px, 7vh, 68px);
  margin-bottom: 8px;
  font-size: clamp(26px, 4vh, 35px);
}

.vote-confirmation {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  margin: 0 auto clamp(3px, .6vh, 7px);
  padding: 5px 13px;
  border: 1px solid rgba(69, 213, 145, .42);
  border-radius: 999px;
  color: var(--text);
  background: var(--success-soft);
}

.vote-confirmation > span {
  color: var(--success);
  font-size: 20px;
  font-weight: 1000;
}

.vote-confirmation strong {
  font-size: clamp(13px, 1.8vh, 16px);
}

.vote-confirmation small {
  color: var(--muted);
}

.game-active .vote-grid,
.answer-overview-grid {
  display: grid;
  grid-template-columns: repeat(var(--vote-cols, 2), minmax(0, 1fr));
  grid-template-rows: repeat(var(--vote-rows, 1), minmax(0, 1fr));
  flex: 1 1 auto;
  min-height: 0;
  width: min(1180px, 100%);
  margin: 0 auto;
  gap: clamp(5px, .8vh, 11px);
}

.game-active .vote-option {
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: clamp(7px, 1.25vh, 16px) clamp(8px, 1.2vw, 17px);
  overflow: hidden;
  border-color: rgba(255,255,255,.18);
  font-size: clamp(13px, min(1.9vw, 2.15vh), 23px);
  line-height: 1.25;
}

.game-active .vote-option b {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.game-active .vote-option > span {
  top: 5px;
  left: 7px;
  font-size: 11px;
  opacity: .72;
}

.vote-option.selected {
  border: 3px solid var(--success);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), 0 0 0 2px rgba(69,213,145,.18);
}

.vote-option.vote-pending {
  border: 3px solid var(--yellow);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), 0 0 0 2px rgba(255,209,84,.2);
  opacity: .88;
}
.vote-option.vote-pending::after {
  content: 'جارٍ التسجيل…';
  position: absolute;
  inset-inline-end: 8px;
  inset-block-end: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.vote-option.own-option {
  opacity: .58;
  filter: saturate(.55);
}

.own-answer-tag {
  position: absolute;
  right: 7px;
  bottom: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  color: rgba(255,255,255,.8);
  background: rgba(0,0,0,.25);
  font-size: 10px;
}
.own-fake-confirmation{display:grid;gap:10px;justify-items:center;text-align:center}
.own-fake-preview{width:min(100%,520px);min-height:46px;display:grid;place-items:center;padding:9px 14px;border-radius:13px;border:1px solid color-mix(in srgb,#8b5cf6 42%,transparent);background:rgba(139,92,246,.1);font-weight:900;word-break:break-word}
.own-fake-preview.concealed{letter-spacing:.28em;color:#a79bb9;user-select:none}
.own-fake-preview.revealed{color:inherit;letter-spacing:normal}
.own-fake-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.own-fake-actions .btn{min-width:130px}

/* ألوان الفبركات */
.fake-color-0 { --fake-a: #7536d8; --fake-b: #40206d; }
.fake-color-1 { --fake-a: #087fb0; --fake-b: #16445e; }
.fake-color-2 { --fake-a: #c03b69; --fake-b: #67263e; }
.fake-color-3 { --fake-a: #b06913; --fake-b: #6b4012; }
.fake-color-4 { --fake-a: #07836a; --fake-b: #185247; }
.fake-color-5 { --fake-a: #3655bd; --fake-b: #273871; }
.fake-color-6 { --fake-a: #a6452c; --fake-b: #662d22; }
.fake-color-7 { --fake-a: #943e9f; --fake-b: #57285f; }
.fake-color-8 { --fake-a: #23778d; --fake-b: #174b58; }
.fake-color-9 { --fake-a: #7d5530; --fake-b: #4f351f; }
.fake-color-10 { --fake-a: #4b7c2e; --fake-b: #314e22; }
.fake-color-11 { --fake-a: #9a3551; --fake-b: #5b2435; }

.vote-option[class*="fake-color-"],
.overview-answer[class*="fake-color-"],
.reveal-answer-card.fake[class*="fake-color-"] {
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--fake-a) 86%, #fff 0%), var(--fake-b));
}

/* عرض جميع الإجابات ثم الكشف التلقائي */
.answers-overview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  gap: clamp(7px, 1.3vh, 15px);
  padding: clamp(4px, .8vh, 10px) 0;
  text-align: center;
}

.overview-head span {
  color: var(--success);
  font-weight: 900;
}

.overview-head h1 {
  margin: 2px 0;
  font-size: clamp(25px, min(4vw, 5vh), 48px);
}

.overview-head p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(12px, 1.8vh, 16px);
}

.overview-answer {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(7px, 1.2vh, 14px);
  overflow: hidden;
  overflow-wrap: anywhere;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: clamp(11px, 1.5vw, 18px);
  box-shadow: 0 8px 20px rgba(0,0,0,.13);
  font-size: clamp(13px, min(2vw, 2.4vh), 24px);
  font-weight: 900;
  line-height: 1.3;
}

.game-active .cinematic-stage,
.game-active .waiting-stage,
.game-active .final-stage,
.game-active .ranking-stage,
.game-active .reveal-stage {
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(9px, 1.8vh, 24px) 8px;
}

.game-active .reveal-stage {
  gap: clamp(5px, 1vh, 12px);
}

.game-active .reveal-progress {
  margin-bottom: 0;
}

.game-active .reveal-answer-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(900px, 100%);
  max-height: 100%;
  padding: clamp(16px, 3vh, 40px);
  overflow: hidden;
}

.reveal-answer-card.fake {
  border-color: rgba(255,255,255,.3);
}

.reveal-answer-card.correct,
:root[data-theme="light"] .reveal-answer-card.correct {
  color: #fff;
  border: 2px solid rgba(255,255,255,.4);
  background: linear-gradient(145deg, #111116, #020203);
  box-shadow: 0 22px 70px rgba(0,0,0,.52);
}

.reveal-answer-card.correct .answer-type {
  color: #050505;
  background: var(--success);
}

.game-active .reveal-answer-card h1 {
  margin: clamp(8px, 1.7vh, 18px) 0;
  font-size: clamp(30px, min(5.4vw, 7.2vh), 70px);
  line-height: 1.25;
}

.game-active .answer-authors,
.game-active .answer-voters {
  margin-top: clamp(7px, 1.4vh, 16px);
  gap: 5px;
}

.game-active .answer-authors strong {
  font-size: clamp(17px, 2.6vh, 23px);
}

/* ترتيب بسيط: الرقم والاسم والنقاط */
.game-active .ranking-stage {
  gap: clamp(8px, 1.4vh, 17px);
}

.game-active .ranking-stage > h1 {
  flex: 0 0 auto;
  font-size: clamp(27px, min(5vw, 6vh), 62px);
}

.ranking-stage > h1 span {
  color: var(--muted);
  font-size: .48em;
  white-space: nowrap;
}

.simple-scoreboard {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: min(820px, 100%);
  max-height: min(64vh, 610px);
  padding: clamp(7px, 1vh, 12px) clamp(12px, 1.6vw, 20px);
  overflow: hidden;
}

.simple-scoreboard .scoreboard-list {
  display: grid;
  grid-template-rows: repeat(var(--player-count, 1), minmax(0, 1fr));
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 0;
}

.simple-scoreboard .scoreboard-row {
  grid-template-columns: clamp(32px, 4vw, 48px) minmax(0, 1fr) minmax(85px, 150px);
  min-height: 0;
  padding: clamp(3px, .7vh, 8px) clamp(5px, .8vw, 10px);
}

.scoreboard-points {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
}

.round-gain {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  color: #39e59c;
  background: rgba(16,143,101,.18);
  font-size: clamp(11px, 1.6vh, 14px);
  font-weight: 1000;
}

.simple-scoreboard .position,
.simple-scoreboard .scoreboard-name,
.simple-scoreboard .scoreboard-score {
  font-size: clamp(16px, min(2.1vw, 2.7vh), 25px);
}

/* خيار إنهاء اللعبة داخل الإعدادات */
.settings-live-note,
.settings-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface-2);
}

.settings-live-note {
  flex-direction: column;
  align-items: stretch;
}

.settings-live-note strong,
.settings-live-note span,
.settings-danger-zone strong,
.settings-danger-zone span {
  display: block;
}

.settings-live-note span,
.settings-danger-zone span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.settings-danger-zone {
  border-color: rgba(220,65,102,.35);
  background: var(--danger-soft);
}

.settings-danger-zone .btn {
  width: auto;
  min-width: 150px;
}

@media (max-width: 900px) {
  .game-active .lobby-layout {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    max-width: 100%;
  }
  .game-active .lobby-panel {
    min-height: 0;
  }
}

@media (max-width: 650px) {
  .game-active .game-shell {
    width: min(100% - 8px, 1480px);
    padding-bottom: max(3px, env(safe-area-inset-bottom));
  }
  .game-active .game-hud {
    margin-bottom: 1px;
  }
  .game-active .game-hud-main {
    min-height: 39px;
  }
  .game-active .hud-brand .logo {
    width: clamp(82px, 25vw, 116px);
  }
  .game-active .game-hud-meta {
    gap: 8px;
    font-size: 11px;
  }
  .game-active .timer-shell {
    grid-template-columns: 31px minmax(0, 1fr) 31px;
  }
  .game-active .timer-side-icon {
    width: 29px;
    height: 29px;
  }
  .game-active .timer-track {
    height: 28px;
  }
  .game-active .question-stage,
  .game-active .cinematic-stage,
  .game-active .waiting-stage,
  .game-active .final-stage,
  .game-active .ranking-stage,
  .game-active .reveal-stage {
    min-height: 0;
  }
  .game-active .lobby-hero p,
  .game-active .lobby-option small,
  .game-active .lobby-code-label {
    display: none;
  }
  .game-active .lobby-layout {
    grid-template-columns: minmax(105px, .72fr) minmax(0, 1.28fr);
    gap: 5px;
  }
  .game-active .lobby-join-card,
  .game-active .lobby-panel {
    padding: 7px;
    border-radius: 15px;
  }
  .game-active .lobby-qr {
    width: min(105px, 17vh, 92%);
  }
  .game-active .compact-btn {
    min-width: 0;
    width: 100%;
    min-height: 36px;
    padding: 5px;
    font-size: 11px;
  }
  .game-active .lobby-panel .player-chips {
    gap: 4px;
  }
  .game-active .lobby-option {
    padding: 5px;
    font-size: 11px;
  }
  .game-active .lobby-start {
    min-height: 40px;
    font-size: 14px;
  }
  .game-active .mobile-question {
    margin-block: 1px;
  }
  .game-active .mobile-question h1 {
    font-size: clamp(18px, min(6vw, 3.8vh), 30px);
  }
  .vote-confirmation {
    min-height: 31px;
    margin-bottom: 2px;
    padding-block: 2px;
  }
  .vote-confirmation small {
    display: none;
  }
  .game-active .vote-grid,
  .answer-overview-grid {
    grid-template-columns: repeat(var(--vote-cols, 2), minmax(0, 1fr));
    grid-template-rows: repeat(var(--vote-rows, 1), minmax(0, 1fr));
    gap: 4px;
  }
  .game-active .vote-option {
    min-height: 0;
    padding: 5px 7px;
    border-radius: 10px;
    font-size: clamp(11px, min(3.2vw, 1.9vh), 15px);
  }
  .overview-answer {
    padding: 5px;
    border-radius: 10px;
    font-size: clamp(11px, min(3vw, 2vh), 15px);
  }
  .overview-head h1 {
    font-size: clamp(20px, 4vh, 32px);
  }
  .game-active .reveal-answer-card {
    padding: 12px 9px;
  }
  .game-active .reveal-answer-card h1 {
    font-size: clamp(26px, min(9vw, 6vh), 45px);
  }
  .simple-scoreboard {
    max-height: none;
  }
  .simple-scoreboard .scoreboard-row {
    grid-template-columns: 30px minmax(0, 1fr) minmax(72px, 100px);
  }
  .settings-danger-zone {
    align-items: stretch;
    flex-direction: column;
  }
  .settings-danger-zone .btn {
    width: 100%;
  }
  .game-active .host-toolbar {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 4px;
  }
  .game-active .host-toolbar .btn {
    flex: 1 1 0;
    min-height: 38px;
    padding: 5px;
    font-size: 11px;
  }
}

@media (max-height: 700px) {
  .game-active .game-hud-main {
    min-height: 38px;
  }
  .game-active .hud-brand .logo {
    width: 96px;
  }
  .game-active .game-hud-meta {
    min-height: 15px;
    font-size: 11px;
  }
  .game-active .timer-track {
    height: 28px;
  }
  .game-active .question-stage h1 {
    font-size: clamp(25px, 5.8vh, 48px);
  }
  .game-active .lobby-hero {
    margin-block: 1px 4px;
  }
  .game-active .lobby-hero p {
    display: none;
  }
  .game-active .answer-entry-card,
  .game-active .submission-card {
    padding-block: 10px;
  }
  .game-active .host-toolbar {
    margin-top: 2px;
  }
}


/* انتقال زمني موحّد مدته أربع ثوانٍ بين مراحل كشف النتائج */
.reveal-transition-screen {
  position: relative;
  isolation: isolate;
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  place-content: center;
  justify-items: center;
  gap: clamp(8px, 1.5vh, 16px);
  overflow: hidden;
  padding: clamp(18px, 4vh, 48px);
  text-align: center;
  animation: revealTransitionIn .22s ease-out both;
}

.transition-glow {
  position: absolute;
  z-index: -1;
  width: min(62vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(171, 74, 255, .34), rgba(79, 31, 166, .09) 48%, transparent 70%);
  filter: blur(8px);
  animation: transitionGlowPulse 4s ease-in-out both;
}

.transition-countdown {
  position: relative;
  display: grid;
  width: clamp(118px, min(20vw, 24vh), 210px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 22px 70px rgba(0,0,0,.28);
  animation: transitionCountPop 4s cubic-bezier(.2,.8,.2,1) both;
}

.transition-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from -90deg, #f7c948 0deg, #b14cff 220deg, rgba(255,255,255,.08) 220deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  animation: transitionRingSweep 4s linear both;
}

.transition-core {
  font-size: clamp(48px, min(9vw, 11vh), 82px);
  line-height: 1;
  text-shadow: 0 9px 28px rgba(0,0,0,.32);
}

.reveal-transition-screen h1 {
  margin: 0;
  font-size: clamp(31px, min(5vw, 6.5vh), 68px);
  line-height: 1.25;
  animation: transitionTextIn .55s .08s ease-out both;
}


.reveal-enter {
  animation: revealSceneIn .48s cubic-bezier(.18,.85,.25,1) both;
}

.overview-answer {
  animation: overviewAnswerIn .42s cubic-bezier(.18,.85,.25,1) both;
  animation-delay: var(--overview-delay, 0ms);
}

.answer-enter .reveal-answer-card {
  animation: revealCardIn .58s cubic-bezier(.16,.9,.24,1) both;
}

.answer-enter .reveal-progress {
  animation: revealTextDrop .42s ease-out both;
}

.answer-enter .voter-chip,
.answer-enter .nobody-chip,
.answer-enter .answer-authors strong {
  animation: revealChipIn .38s ease-out both;
}

.ranking-enter .scoreboard-row {
  animation: rankingRowIn .42s cubic-bezier(.18,.85,.25,1) both;
}
.ranking-enter .scoreboard-row:nth-child(2) { animation-delay: 70ms; }
.ranking-enter .scoreboard-row:nth-child(3) { animation-delay: 140ms; }
.ranking-enter .scoreboard-row:nth-child(4) { animation-delay: 210ms; }
.ranking-enter .scoreboard-row:nth-child(n+5) { animation-delay: 260ms; }

@keyframes revealTransitionIn {
  from { opacity: 0; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes transitionGlowPulse {
  0% { opacity: .2; transform: scale(.72); }
  55% { opacity: 1; transform: scale(1.08); }
  100% { opacity: .4; transform: scale(1.18); }
}
@keyframes transitionCountPop {
  0% { opacity: 0; transform: scale(.68) rotate(-7deg); }
  28% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.9); }
}
@keyframes transitionRingSweep {
  from { transform: rotate(-20deg); filter: brightness(1.25); }
  to { transform: rotate(340deg); filter: brightness(.9); }
}
@keyframes transitionTextIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes revealSceneIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes overviewAnswerIn {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes revealCardIn {
  0% { opacity: 0; transform: translateY(34px) scale(.9) rotateX(6deg); }
  70% { opacity: 1; transform: translateY(-4px) scale(1.015) rotateX(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}
@keyframes revealTextDrop {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes revealChipIn {
  from { opacity: 0; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes rankingRowIn {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-transition-screen,
  .transition-glow,
  .transition-countdown,
  .transition-ring,
  .reveal-transition-screen h1,
  .reveal-enter,
  .overview-answer,
  .answer-enter .reveal-answer-card,
  .answer-enter .reveal-progress,
  .answer-enter .voter-chip,
  .answer-enter .nobody-chip,
  .answer-enter .answer-authors strong,
  .ranking-enter .scoreboard-row {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
}


/* =========================================================
   0.21 — ترتيب أصغر وأكثر جمالاً وتناسقاً
   ========================================================= */
.reveal-answer-card .answer-type {
  min-width: fit-content;
}

.reveal-answer-card.correct .answer-type {
  align-self: center;
  justify-content: center;
}

.game-active .ranking-stage {
  justify-content: flex-start;
  gap: clamp(10px, 1.6vh, 18px);
  width: min(760px, 100%);
  margin-inline: auto;
  padding: clamp(14px, 2.2vh, 26px) clamp(10px, 2vw, 20px) 4px;
}

.ranking-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 13px;
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
}

.game-active .ranking-heading h1 {
  margin: 0;
  font-size: clamp(30px, min(4vw, 5.2vh), 48px);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.ranking-heading > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid rgba(184,145,255,.22);
  border-radius: 999px;
  color: #cbb7ec;
  background: rgba(112,59,170,.13);
  font-size: clamp(12px, 1.55vh, 15px);
  font-weight: 900;
  white-space: nowrap;
}

.simple-scoreboard {
  display: block;
  flex: 0 0 auto;
  width: min(700px, 100%);
  max-height: min(62vh, 560px);
  padding: clamp(9px, 1.25vh, 14px);
  overflow: auto;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 0%, rgba(138,70,245,.11), transparent 32%),
    linear-gradient(155deg, rgba(36,20,60,.98), rgba(24,13,43,.98));
  box-shadow: 0 18px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035);
  scrollbar-width: thin;
}

.simple-scoreboard .scoreboard-list {
  display: grid;
  grid-template-rows: none;
  grid-auto-rows: minmax(48px, auto);
  gap: 6px;
  width: 100%;
  min-height: auto;
  padding: 0;
}

.simple-scoreboard .scoreboard-row {
  grid-template-columns: 42px minmax(0, 1fr) minmax(92px, 128px);
  min-height: 48px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.simple-scoreboard .scoreboard-row:nth-child(even) {
  background: rgba(255,255,255,.04);
}

.simple-scoreboard .scoreboard-row:first-child {
  border-color: rgba(255,209,66,.2);
  background: linear-gradient(90deg, rgba(255,209,66,.055), rgba(255,255,255,.025));
}

.simple-scoreboard .scoreboard-row.me {
  border-color: rgba(150,92,255,.42);
  background: linear-gradient(90deg, rgba(126,69,222,.17), rgba(255,255,255,.035));
  box-shadow: inset 0 0 0 1px rgba(166,111,255,.07);
}

.simple-scoreboard .position {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #c9b7e7;
  background: rgba(255,255,255,.055);
  font-size: 16px;
  font-weight: 1000;
}

.simple-scoreboard .scoreboard-row:first-child .position {
  color: #2b1a00;
  background: linear-gradient(145deg, #ffe16a, #f2b900);
  box-shadow: 0 5px 14px rgba(242,185,0,.18);
}

.simple-scoreboard .scoreboard-name {
  font-size: clamp(16px, min(2vw, 2.35vh), 21px);
  font-weight: 950;
  text-align: right;
}

.simple-scoreboard .scoreboard-row:first-child .scoreboard-name {
  color: #ffd94f;
}

.scoreboard-points {
  justify-content: flex-start;
  gap: 7px;
}

.simple-scoreboard .scoreboard-score {
  min-width: 34px;
  font-size: clamp(17px, min(2.1vw, 2.5vh), 22px);
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.round-gain {
  padding: 3px 7px;
  font-size: clamp(10px, 1.35vh, 12px);
  box-shadow: inset 0 0 0 1px rgba(57,229,156,.08);
}

.game-active .ranking-toolbar {
  width: min(700px, calc(100% - 20px));
  margin-top: clamp(5px, 1vh, 10px);
  padding: 5px;
  border-radius: 16px;
  background: rgba(25,13,44,.88);
}

.game-active .ranking-toolbar .btn {
  flex: 0 1 310px;
  width: min(310px, 100%);
  min-height: 44px;
  padding: 8px 22px;
  border-radius: 13px;
  font-size: clamp(14px, 1.8vh, 17px);
}

@media (max-width: 640px) {
  .game-active .ranking-stage {
    padding-inline: 4px;
  }

  .ranking-heading {
    gap: 5px 8px;
  }

  .simple-scoreboard {
    width: 100%;
    padding: 7px;
    border-radius: 17px;
  }

  .simple-scoreboard .scoreboard-list {
    grid-auto-rows: minmax(44px, auto);
    gap: 4px;
  }

  .simple-scoreboard .scoreboard-row {
    grid-template-columns: 34px minmax(0, 1fr) minmax(78px, 103px);
    min-height: 44px;
    padding: 5px 8px;
    border-radius: 11px;
  }

  .simple-scoreboard .position {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    font-size: 14px;
  }

  .scoreboard-points {
    gap: 4px;
  }
}

@media (max-height: 720px) {
  .game-active .ranking-stage {
    gap: 7px;
    padding-top: 7px;
  }

  .game-active .ranking-heading h1 {
    font-size: clamp(27px, 4.5vh, 37px);
  }

  .ranking-heading > span {
    min-height: 25px;
    padding: 3px 9px;
    font-size: 11px;
  }

  .simple-scoreboard {
    max-height: min(58vh, 445px);
    padding: 7px;
  }

  .simple-scoreboard .scoreboard-list {
    grid-auto-rows: minmax(40px, auto);
    gap: 4px;
  }

  .simple-scoreboard .scoreboard-row {
    min-height: 40px;
    padding-block: 4px;
  }

  .simple-scoreboard .position {
    width: 27px;
    height: 27px;
  }

  .game-active .ranking-toolbar {
    margin-top: 3px;
  }

  .game-active .ranking-toolbar .btn {
    min-height: 39px;
    padding-block: 6px;
  }
}


/* =========================================================
   0.22 — توحيد محاذاة بطاقات الكشف ومراجعة التنسيقات
   ========================================================= */
.reveal-answer-card {
  align-items: center;
  text-align: center;
  direction: rtl;
}

.reveal-answer-card .answer-type,
.reveal-answer-card.correct .answer-type {
  display: inline-flex;
  align-self: center;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: min(100%, 360px);
  min-width: 0;
  margin: 0 auto;
  padding-inline: clamp(14px, 2.2vw, 24px);
  text-align: center;
  white-space: normal;
}

.reveal-answer-card.correct .answer-type {
  color: #050505;
  background: var(--success);
}

.reveal-answer-card > h1,
.reveal-answer-card .answer-authors,
.reveal-answer-card .answer-voters {
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.reveal-answer-card .answer-authors,
.reveal-answer-card .answer-voters,
.reveal-answer-card .voter-chips {
  justify-content: center;
  justify-items: center;
}

.reveal-answer-card .voter-chips {
  max-width: 100%;
}

@media (max-width: 650px) {
  .reveal-answer-card .answer-type,
  .reveal-answer-card.correct .answer-type {
    max-width: 100%;
    padding: 7px 14px;
    font-size: 13px;
    line-height: 1.35;
  }
}

@media (max-height: 720px) {
  .game-active .reveal-answer-card .answer-type,
  .game-active .reveal-answer-card.correct .answer-type {
    padding-block: 6px;
    font-size: clamp(12px, 1.8vh, 15px);
  }
}

/* =========================================================
   تحديث v0.23 — إزالة الشريط العلوي المتحرك وإضافة زر مظهر ثابت
   ========================================================= */
.public-screen {
  position: relative;
  padding-top: clamp(84px, 10vw, 108px);
}

.floating-theme-toggle {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  z-index: 40;
  min-width: 52px;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 18px;
  border-color: var(--border-strong);
  background: rgba(36, 18, 70, 0.92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

:root[data-theme="light"] .floating-theme-toggle {
  background: rgba(255, 255, 255, 0.9);
}

.public-page-tools {
  width: min(720px, 100%);
  margin: 0 auto 8px;
  display: flex;
  justify-content: flex-end;
}

.public-back-btn {
  min-width: 108px;
}

.home-shell.public-screen {
  width: min(1080px, calc(100% - 32px));
}

.home-shell.public-screen .brand-hero {
  padding-top: clamp(8px, 2vw, 18px);
}

@media (max-width: 700px) {
  .public-screen {
    padding-top: 82px;
  }

  .floating-theme-toggle {
    top: max(14px, env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
    min-width: 48px;
    min-height: 48px;
    border-radius: 16px;
  }

  .public-page-tools {
    margin-bottom: 4px;
  }
}

/* =========================================================
   تحديث v0.24 — مكتبة أصوات أكبر وأكثر تميزًا
   ========================================================= */
.sound-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.sound-option {
  min-height: 44px;
  padding: 8px 6px;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .sound-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .sound-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .sound-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   تحديث v0.25 — البلاغات والاقتراحات
   ========================================================= */
.floating-utility-actions {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  z-index: 40;
  display: flex;
  direction: ltr;
  align-items: center;
  gap: 9px;
}

.floating-utility-actions .floating-theme-toggle,
.floating-utility-actions .floating-report-toggle {
  position: static;
  inset: auto;
  min-width: 52px;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 18px;
  border-color: var(--border-strong);
  background: rgba(36, 18, 70, 0.92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.floating-report-toggle {
  color: #ffd55b;
}

:root[data-theme="light"] .floating-utility-actions .floating-theme-toggle,
:root[data-theme="light"] .floating-utility-actions .floating-report-toggle {
  background: rgba(255, 255, 255, 0.92);
}

.utility-hud-button {
  width: 44px;
  min-width: 44px;
  padding-inline: 0;
  justify-content: center;
  font-size: 19px;
}

#reportBtn.utility-hud-button {
  color: #ffd55b;
}

.report-modal {
  width: min(720px, calc(100vw - 28px));
}

.report-context {
  display: grid;
  gap: 4px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-2);
}

.report-context span,
.report-context small {
  color: var(--muted);
}

.report-context strong {
  overflow-wrap: anywhere;
  line-height: 1.65;
}

.report-form {
  display: grid;
  gap: 6px;
}

.compact-form .label {
  margin-bottom: 2px;
  font-size: 15px;
}

.report-select {
  appearance: auto;
}

.report-two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.report-textarea {
  min-height: 96px;
  resize: none;
  line-height: 1.6;
}

.report-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.report-status {
  padding: 11px 13px;
  border-radius: 13px;
  text-align: center;
  font-weight: 700;
  line-height: 1.55;
}

.report-status.success {
  color: #052e22;
  background: #54d7a4;
}

.report-status.notice {
  color: #3e2700;
  background: #ffd66b;
}

.report-status.error {
  color: #fff;
  background: #a5244e;
}

@media (max-width: 700px) {
  .floating-utility-actions {
    top: max(14px, env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
    gap: 7px;
  }

  .floating-utility-actions .floating-theme-toggle,
  .floating-utility-actions .floating-report-toggle {
    min-width: 48px;
    min-height: 48px;
    border-radius: 16px;
  }

  .report-two-columns {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .game-hud .utility-hud-button {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 17px;
  }
}

.compact-modal, .modal-backdrop {
  scrollbar-width: none;
}
.compact-modal::-webkit-scrollbar,
.modal-backdrop::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.help-modal .steps {
  margin-top: 10px;
}
.sound-option {
  font-size: 18px;
}
@media (max-width: 720px) {
  .compact-modal {
    width: min(100vw - 18px, 760px);
    padding: 16px;
  }
  .help-modal .steps {
    gap: 8px;
  }
  .report-modal .report-textarea {
    min-height: 84px;
  }
  .final-actions {
    grid-template-columns: 1fr;
  }
}


/* تحديث v0.27 — رابط الانضمام المختصر */
.join-direct-link {
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: 100%;
  margin-top: 10px;
  color: var(--muted);
  font-size: clamp(11px, 1.5vh, 14px);
}

.join-direct-link a {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--yellow);
  font-weight: 900;
  text-decoration: none;
}

.join-direct-link a:hover {
  text-decoration: underline;
}

.game-active .join-direct-link {
  margin-top: clamp(5px, .8vh, 9px);
  font-size: clamp(10px, 1.35vh, 13px);
}

@media (max-height: 700px) {
  .game-active .join-direct-link span {
    display: none;
  }
}


/* =========================================================
   تحديث v0.28 — وضوح النتائج والصوت والنوافذ القصيرة
   ========================================================= */

/* الشعار وحده في منتصف شريط اللعب، دون تكرار اسم الغرفة. */
.hud-brand {
  min-width: clamp(112px, 10vw, 165px);
}

/* ثلاثة أزرار تحكم فقط بعد حذف إنهاء المرحلة. */
.game-active .phase-controls .btn {
  flex-basis: 220px;
}

/* نافذة البلاغ: الحقول قابلة للتمرير والزر ثابت داخل النافذة. */
.report-modal {
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 24px));
  max-height: min(94vh, 820px);
  max-height: min(94dvh, 820px);
  padding: clamp(13px, 2.2vh, 22px);
  overflow: hidden;
}

.report-modal h2 {
  flex: 0 0 auto;
  margin-bottom: 3px;
  font-size: clamp(24px, min(4vw, 4.7vh), 34px);
}

.report-modal .modal-sub {
  flex: 0 0 auto;
  margin-bottom: clamp(5px, 1vh, 10px);
  font-size: clamp(13px, min(1.7vw, 1.9vh), 17px);
  line-height: 1.4;
}

.report-form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 7px;
}

.report-fields {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  gap: 5px;
  padding: 1px 3px 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.report-context {
  margin: 2px 0 5px;
  padding: 7px 10px;
}

.report-context strong {
  line-height: 1.4;
}

.report-modal .input {
  min-height: 43px;
  padding: 8px 12px;
}

.report-modal .report-textarea {
  min-height: 74px;
  max-height: 105px;
  line-height: 1.45;
}

.report-modal .compact-note {
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 1.4;
}

.report-submit-bar {
  position: relative;
  z-index: 3;
  display: grid;
  flex: 0 0 auto;
  gap: 5px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.report-submit-bar .btn {
  width: 100%;
  min-height: 46px;
}

.report-status {
  padding: 7px 10px;
  font-size: 13px;
}

/* صفحة ترتيب الفائزين: نحجز مساحة دائمة للأزرار ونضغط العناصر الكبيرة. */
.game-active .final-stage {
  justify-content: flex-start;
  gap: clamp(2px, .6vh, 7px);
  padding: clamp(4px, .8vh, 10px) 8px max(5px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.game-active .final-stage .cinematic-icon {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(38px, min(7vw, 7vh), 68px);
  line-height: 1;
}

.game-active .final-stage > h1 {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(28px, min(5vw, 5.7vh), 58px);
  line-height: 1.15;
}

.game-active .final-stage > p {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(13px, min(1.8vw, 2vh), 19px);
}

.game-active .final-stage > h2 {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(26px, min(4.7vw, 5vh), 50px);
  line-height: 1.15;
}

.game-active .final-stage > strong {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(19px, min(2.7vw, 3vh), 28px);
}

.game-active .final-stage .simple-scoreboard {
  flex: 1 1 auto;
  min-height: 100px;
  max-height: none;
  margin: clamp(3px, .6vh, 7px) auto;
  padding-block: clamp(4px, .6vh, 8px);
}

.game-active .final-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: 8px;
  width: min(720px, 100%);
  margin-top: 1px;
}

.game-active .final-actions .btn,
.game-active .player-final > .final-home {
  min-height: clamp(40px, 5.4vh, 50px);
  padding-block: 7px;
}

.game-active .player-final > .final-home {
  flex: 0 0 auto;
  width: min(550px, 100%);
}

@media (max-width: 720px) {
  .report-modal {
    width: min(100vw - 12px, 720px);
    max-height: 96dvh;
    padding: 11px;
  }
  .report-two-columns {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .report-modal .input {
    min-height: 40px;
  }
  .game-active .final-actions {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@media (max-height: 760px) {
  .report-modal .close-modal {
    width: 34px;
    height: 34px;
  }
  .report-modal .report-textarea {
    min-height: 64px;
    max-height: 78px;
  }
  .game-active .final-stage .cinematic-icon {
    font-size: 42px;
  }
  .game-active .final-stage .simple-scoreboard {
    margin-block: 2px;
  }
}

@media (max-height: 620px) {
  .game-active .final-stage .cinematic-icon {
    display: none;
  }
  .game-active .final-stage > p {
    display: none;
  }
  .game-active .final-stage > h1 {
    font-size: 28px;
  }
}

/* =========================================================
   تحديث v0.29 — كشف مرحلي للفبركات وحالة إرسال المشاركين
   ========================================================= */
.answer-status-list {
  align-items: center;
}

.player-chip.answer-status-chip {
  position: relative;
  overflow: hidden;
  color: #f2f2f5;
  border-color: rgba(242, 242, 245, .48);
  background: rgba(242, 242, 245, .08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  transition: color .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease, transform .28s ease;
}

.player-chip.answer-status-chip.pending {
  color: #e5e5ea;
  border-color: rgba(229, 229, 234, .42);
  background: rgba(229, 229, 234, .07);
}

.player-chip.answer-status-chip.submitted {
  color: #50f0b1;
  border-color: rgba(80, 240, 177, .88);
  background: linear-gradient(135deg, rgba(36, 211, 150, .24), rgba(47, 229, 188, .1));
  box-shadow: 0 0 0 1px rgba(80, 240, 177, .16), 0 0 20px rgba(45, 224, 160, .42), inset 0 0 18px rgba(80, 240, 177, .08);
  animation: participantAnsweredIn .62s cubic-bezier(.16,.9,.24,1) both, participantAnsweredGlow 1.8s .62s ease-in-out infinite alternate;
}

.answer-status-check {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: #071d15;
  background: #50f0b1;
  font-size: 14px;
  font-style: normal;
  font-weight: 1000;
  box-shadow: 0 0 14px rgba(80, 240, 177, .7);
}

@keyframes participantAnsweredIn {
  0% { opacity: .72; transform: scale(.92); filter: brightness(.88); }
  55% { opacity: 1; transform: scale(1.09); filter: brightness(1.3); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes participantAnsweredGlow {
  from { box-shadow: 0 0 0 1px rgba(80, 240, 177, .12), 0 0 13px rgba(45, 224, 160, .24), inset 0 0 14px rgba(80, 240, 177, .06); }
  to { box-shadow: 0 0 0 1px rgba(80, 240, 177, .22), 0 0 25px rgba(45, 224, 160, .52), inset 0 0 22px rgba(80, 240, 177, .12); }
}

/* تظهر الإجابة أولاً، ثم كاتب الفبركة، ثم المصوتون واحداً تلو الآخر. */
.answer-enter .staged-answer-reveal {
  animation: stagedAnswerCardIn .7s cubic-bezier(.16,.9,.24,1) both;
}

.answer-enter .staged-answer-reveal .answer-type {
  opacity: 0;
  animation: stagedAnswerBadgeIn .42s var(--answer-badge-delay, .28s) ease-out both;
}

.answer-enter .staged-answer-reveal .revealed-answer-text {
  opacity: 0;
  animation: stagedAnswerTextIn .68s var(--answer-delay, .52s) cubic-bezier(.16,.9,.24,1) both;
}

.answer-enter .staged-answer-reveal .staged-authors {
  opacity: 0;
  animation: stagedAuthorsIn .58s var(--author-delay, 1.45s) cubic-bezier(.16,.9,.24,1) both;
}

.answer-enter .staged-answer-reveal .staged-authors strong {
  opacity: 0;
  animation: stagedAuthorNameIn .52s var(--author-name-delay, 1.72s) cubic-bezier(.16,.9,.24,1) both;
}

.answer-enter .staged-answer-reveal .staged-voters > span:first-child {
  opacity: 0;
  animation: stagedVoterLabelIn .42s var(--voters-delay, 2.3s) ease-out both;
}

.answer-enter .staged-answer-reveal .voter-chip,
.answer-enter .staged-answer-reveal .nobody-chip {
  opacity: 0;
  animation: stagedVoterChipIn .46s cubic-bezier(.16,.9,.24,1) both;
  animation-delay: var(--voter-delay, 2.62s);
}

.answer-enter .staged-answer-reveal.correct .staged-voters > span:first-child {
  animation-delay: var(--voters-delay, 1.45s);
}

.answer-enter .staged-answer-reveal.correct .voter-chip,
.answer-enter .staged-answer-reveal.correct .nobody-chip {
  animation-delay: var(--voter-delay, 1.78s);
}

@keyframes stagedAnswerCardIn {
  0% { opacity: 0; transform: translateY(42px) scale(.88) rotateX(8deg); filter: blur(5px); }
  68% { opacity: 1; transform: translateY(-5px) scale(1.018) rotateX(0); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: blur(0); }
}

@keyframes stagedAnswerBadgeIn {
  from { opacity: 0; transform: translateY(-10px) scale(.86); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes stagedAnswerTextIn {
  0% { opacity: 0; transform: translateY(24px) scale(.92); filter: blur(4px); }
  72% { opacity: 1; transform: translateY(-3px) scale(1.018); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes stagedAuthorsIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes stagedAuthorNameIn {
  0% { opacity: 0; transform: scale(.78); filter: brightness(.72); }
  65% { opacity: 1; transform: scale(1.09); filter: brightness(1.28); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes stagedVoterLabelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes stagedVoterChipIn {
  0% { opacity: 0; transform: translateY(16px) scale(.72); filter: blur(2px); }
  65% { opacity: 1; transform: translateY(-3px) scale(1.08); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .player-chip.answer-status-chip.submitted,
  .answer-enter .staged-answer-reveal,
  .answer-enter .staged-answer-reveal .answer-type,
  .answer-enter .staged-answer-reveal .revealed-answer-text,
  .answer-enter .staged-answer-reveal .staged-authors,
  .answer-enter .staged-answer-reveal .staged-authors strong,
  .answer-enter .staged-answer-reveal .staged-voters > span:first-child,
  .answer-enter .staged-answer-reveal .voter-chip,
  .answer-enter .staged-answer-reveal .nobody-chip {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
}

/* v0.30 — حسابات المضيف والطرد الواضح وكشف أكثر سينمائية */
.free-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 12px;
  border: 1px solid rgba(69, 213, 145, .45);
  border-radius: 999px;
  color: #72efb6;
  background: rgba(69, 213, 145, .12);
  font-size: 13px;
  font-weight: 900;
}
.auth-card {
  width: min(100%, 620px);
  margin-inline: auto;
}
.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}
.host-account-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  width: min(100%, 860px);
  margin: 0 auto 22px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--muted);
}
.host-account-strip b { color: var(--text); }

.chip-kick {
  width: auto;
  min-width: 48px;
  height: 28px;
  padding: 2px 10px;
  border: 1px solid rgba(255, 109, 147, .55);
  border-radius: 999px;
  color: #ffd7e1;
  background: rgba(220, 65, 102, .24);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.chip-kick:hover,
.chip-kick:focus-visible {
  color: #fff;
  background: rgba(220, 65, 102, .5);
}
.host-player-management {
  margin-bottom: 90px;
}
.host-player-management .player-chips {
  justify-content: center;
}

.reveal-points {
  width: fit-content;
  margin: 2px auto 14px;
  padding: 7px 14px;
  border-radius: 999px;
  color: #52e2a6;
  background: rgba(45, 213, 145, .12);
  border: 1px solid rgba(69, 213, 145, .32);
  font-weight: 1000;
}
.answer-explanation {
  max-width: 820px;
  margin: 10px auto 18px;
  padding: 14px 18px;
  border-radius: 16px;
  color: var(--text);
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.15);
  font-size: clamp(15px, 1.7vw, 21px);
  line-height: 1.75;
}
.answer-enter .staged-answer-reveal .staged-points {
  opacity: 0;
  animation: stagedAnswerBadgeIn .46s var(--points-delay, 1.12s) ease-out both;
}
.answer-enter .staged-answer-reveal .staged-explanation {
  opacity: 0;
  animation: stagedAuthorsIn .58s var(--explanation-delay, 1.55s) cubic-bezier(.16,.9,.24,1) both;
}
.answer-enter .staged-answer-reveal.correct .staged-voters > span:first-child {
  animation-delay: var(--voters-delay, 2.15s);
}
.answer-enter .staged-answer-reveal.correct .voter-chip,
.answer-enter .staged-answer-reveal.correct .nobody-chip {
  animation-delay: var(--voter-delay, 2.45s);
}

@media (max-width: 650px) {
  .host-account-strip { align-items: stretch; flex-direction: column; text-align: center; }
  .host-account-strip .pill-btn, .host-account-strip .free-badge { width: 100%; }
  .chip-kick { min-width: 44px; padding-inline: 8px; }
  .answer-explanation { padding: 11px 13px; }
}


/* =========================================================
   v0.32.1 — ضمان ظهور نصوص كشف الفبركات وانتقالات المراحل
   بعض إصدارات Safari قد تتجاهل حركة CSS أو تأخيرها. تبقى
   الكتابة ظاهرة افتراضيا ثم تتولى الحركة إخفاءها مؤقتا عند عملها.
   ========================================================= */
.phase-flash::before,
.phase-flash::after {
  z-index: 0;
}

.phase-flash .phase-scene {
  z-index: 2;
  isolation: isolate;
  opacity: 1;
  visibility: visible;
}

.phase-flash .phase-eyebrow,
.phase-flash .phase-main-icon,
.phase-flash h1,
.phase-flash h2,
.phase-flash p,
.phase-flash .phase-points-card,
.phase-flash .phase-points-card span,
.phase-flash .phase-points-card strong {
  opacity: 1;
  visibility: visible;
  -webkit-text-fill-color: currentColor;
}

.overview-answer {
  position: relative;
  z-index: 1;
  isolation: isolate;
  opacity: 1;
  visibility: visible;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.42);
}

.reveal-answer-card .answer-type,
.reveal-answer-card .revealed-answer-text,
.reveal-answer-card .reveal-points,
.reveal-answer-card .answer-authors,
.reveal-answer-card .answer-authors strong,
.reveal-answer-card .answer-voters,
.reveal-answer-card .answer-voters > span:first-child,
.reveal-answer-card .voter-chip,
.reveal-answer-card .nobody-chip,
.reveal-answer-card .answer-explanation {
  opacity: 1;
  visibility: visible;
  -webkit-text-fill-color: currentColor;
}

.reveal-answer-card.fake .revealed-answer-text,
.reveal-answer-card.fake .answer-authors,
.reveal-answer-card.fake .answer-voters {
  color: #fff;
}

/* =========================================================
   v0.33 — تجربة كشف النتائج والنهائيات والجوائز والمشاركة
   ========================================================= */
.settings-toggle-stack,
.lobby-options-stack {
  display: grid;
  gap: 0;
}
.settings-toggle-stack .toggle-row + .toggle-row,
.lobby-options-stack .lobby-option + .lobby-option {
  border-top: 1px solid var(--border);
}
.settings-toggle-stack .toggle-row,
.lobby-options-stack .lobby-option {
  min-height: 68px;
}

.skip-animation-btn,
.phase-skip-btn {
  min-width: 148px;
  border-color: rgba(255,212,61,.42);
  color: var(--yellow);
}
.phase-skip-btn {
  position: relative;
  z-index: 5;
  margin-top: 8px;
  background: rgba(13,8,29,.66);
}
.final-skip-toolbar {
  justify-content: center;
}

.reveal-score-changes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.reveal-score-changes > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #fff;
  background: rgba(7,8,24,.52);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(12px) scale(.92);
  animation: scoreChipReveal .42s var(--score-delay, 3.3s) cubic-bezier(.16,.9,.24,1) forwards;
}
.reveal-score-changes strong {
  color: #6ff0bf;
  font-size: 1.12em;
}
@keyframes scoreChipReveal {
  to { opacity: 1; transform: none; }
}

.animated-scoreboard .scoreboard-row {
  transform: translateY(var(--rank-shift, 0));
  animation: scoreboardRankMove var(--ranking-duration, 1.2s) 2.15s cubic-bezier(.18,.86,.2,1) both;
}
.animated-scoreboard .scoreboard-score {
  display: inline-block;
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
  animation: scoreNumberGlow var(--score-animation-duration, 2.8s) .18s ease-in-out both;
}
.animated-scoreboard .round-gain {
  animation: roundGainPop .55s 2.5s cubic-bezier(.15,.9,.2,1.25) both;
}
.animated-scoreboard .rank-moved .position {
  animation: rankBadgePulse .65s 2.65s ease-out both;
}
@keyframes scoreboardRankMove {
  from { transform: translateY(var(--rank-shift, 0)); }
  to { transform: translateY(0); }
}
@keyframes scoreNumberGlow {
  0%, 100% { color: var(--text); text-shadow: none; }
  45%, 75% { color: #69efbc; text-shadow: 0 0 20px rgba(82,234,180,.62); transform: scale(1.09); }
}
@keyframes roundGainPop {
  from { opacity: 0; transform: scale(.65) translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes rankBadgePulse {
  0% { transform: scale(.8); }
  55% { transform: scale(1.24); box-shadow: 0 0 0 10px rgba(255,212,61,.12); }
  100% { transform: scale(1); }
}

.final-score-stage,
.final-podium-stage,
.award-stage,
.share-summary-stage {
  width: min(960px, calc(100% - 24px));
  margin: 18px auto 110px;
  min-height: min(70vh, 720px);
  display: grid;
  align-content: center;
  gap: 20px;
}
.final-score-stage > header,
.final-podium-stage > header {
  text-align: center;
}
.final-score-stage header span,
.final-podium-stage header span,
.share-card-kicker,
.award-stage > span {
  color: var(--yellow);
  font-weight: 800;
  letter-spacing: .03em;
}
.final-score-stage h1,
.final-podium-stage h1 {
  margin: 4px 0;
  font-size: clamp(36px, 7vw, 72px);
}
.final-score-stage header p {
  margin: 0;
  color: var(--muted);
}
.final-scoreboard {
  max-width: 800px;
  margin-inline: auto;
  width: 100%;
  box-shadow: 0 26px 90px rgba(0,0,0,.35), 0 0 55px rgba(137,60,243,.13);
}
.final-scoreboard .scoreboard-row:first-child {
  background: linear-gradient(90deg, rgba(255,211,64,.12), rgba(143,67,247,.12));
}

.podium-grid {
  width: min(900px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  min-height: 430px;
}
.podium-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 8px;
  min-height: 300px;
  padding: 24px 14px 0;
  text-align: center;
  overflow: hidden;
  border-radius: 28px 28px 14px 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  animation: podiumRise .9s cubic-bezier(.16,.9,.2,1) both;
}
.podium-card.rank-1 {
  min-height: 410px;
  border-color: rgba(255,211,64,.58);
  box-shadow: 0 28px 90px rgba(0,0,0,.35), 0 0 54px rgba(255,211,64,.18);
  animation-delay: .42s;
}
.podium-card.rank-2 { min-height: 340px; animation-delay: .18s; }
.podium-card.rank-3 { min-height: 305px; animation-delay: .28s; }
.podium-card.me { outline: 3px solid rgba(91,228,184,.48); }
.podium-medal { font-size: clamp(42px, 6vw, 72px); }
.podium-card h2 { margin: 0; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(22px, 3vw, 36px); }
.podium-card strong { color: #67edbb; font-size: clamp(20px, 2.6vw, 31px); }
.podium-block {
  width: calc(100% + 28px);
  height: 72px;
  margin-top: 14px;
  background: linear-gradient(180deg, rgba(143,67,247,.55), rgba(67,23,124,.8));
  border-top: 1px solid rgba(255,255,255,.18);
}
.rank-1 .podium-block { height: 122px; background: linear-gradient(180deg, rgba(255,207,65,.62), rgba(155,92,9,.82)); }
.rank-2 .podium-block { height: 94px; }
@keyframes podiumRise {
  from { opacity: 0; transform: translateY(90px) scale(.9); }
  to { opacity: 1; transform: none; }
}

.award-stage {
  justify-items: center;
  text-align: center;
  padding: clamp(26px, 5vw, 60px);
  border: 1px solid var(--border);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,208,63,.17), transparent 42%),
    linear-gradient(145deg, rgba(44,21,78,.95), rgba(12,8,30,.95));
  box-shadow: 0 30px 100px rgba(0,0,0,.38);
}
.award-progress { color: var(--muted); }
.award-icon {
  font-size: clamp(78px, 13vw, 150px);
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.3));
  animation: awardBounce 1.1s cubic-bezier(.15,.9,.18,1.2) both;
}
.award-stage h1 { margin: 0; color: var(--yellow); font-size: clamp(38px, 7vw, 76px); }
.award-stage h2 { margin: 0; font-size: clamp(28px, 5vw, 52px); overflow-wrap: anywhere; }
.award-stage p { max-width: 720px; margin: 0; color: var(--muted); font-size: clamp(17px, 2.4vw, 26px); line-height: 1.7; }
@keyframes awardBounce {
  0% { opacity: 0; transform: scale(.35) rotate(-12deg); }
  65% { opacity: 1; transform: scale(1.14) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

.share-summary-stage {
  align-content: start;
}
.share-summary-card {
  width: min(760px, 100%);
  margin-inline: auto;
  padding: clamp(22px, 5vw, 48px);
  border-radius: 34px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,211,64,.14), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(89,220,185,.12), transparent 33%),
    linear-gradient(150deg, rgba(51,22,91,.98), rgba(10,8,28,.98));
  box-shadow: 0 34px 100px rgba(0,0,0,.38);
}
.share-card-brand .logo-image { width: min(240px, 60vw); }
.share-summary-card > h1 { margin: 8px 0 22px; font-size: clamp(27px, 5vw, 46px); overflow-wrap: anywhere; }
.share-winner {
  padding: 22px;
  border-radius: 24px;
  background: rgba(5,5,20,.48);
  border: 1px solid rgba(255,212,61,.28);
}
.share-winner span { color: var(--yellow); font-weight: 900; }
.share-winner h2 { margin: 7px 0; font-size: clamp(33px, 7vw, 62px); overflow-wrap: anywhere; }
.share-winner strong { color: #67edbb; font-size: 28px; }
.share-top-three {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
.share-top-three > div {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  text-align: start;
  border-radius: 16px;
  background: rgba(255,255,255,.065);
}
.share-top-three span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); font-weight: 900; }
.share-top-three b { overflow-wrap: anywhere; }
.share-top-three strong { color: #65e9b8; }
.share-stat {
  display: grid;
  gap: 6px;
  padding: 17px;
  border-radius: 18px;
  background: rgba(255,142,66,.09);
  border: 1px solid rgba(255,142,66,.2);
}
.share-stat span { color: #ffad6e; font-weight: 900; }
.share-stat b { overflow-wrap: anywhere; }
.share-stat small { color: var(--muted); }
.share-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.share-mini-stats > div { padding: 12px 8px; border-radius: 15px; background: rgba(255,255,255,.055); }
.share-mini-stats span { display: block; color: var(--muted); font-size: 12px; }
.share-mini-stats strong { display: block; margin-top: 5px; overflow-wrap: anywhere; }
.share-summary-card > p { margin: 22px 0 0; color: #e5d5ff; }
.share-actions,
.summary-final-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.summary-final-actions { margin: -90px auto 28px; position: relative; z-index: 4; }

.animations-skipped *,
.animations-skipped *::before,
.animations-skipped *::after {
  animation-delay: 0s !important;
  animation-duration: .001s !important;
  transition-duration: .001s !important;
}
.animations-skipped .reveal-score-changes > span,
.animations-skipped .staged-answer-reveal *,
.animations-skipped .scoreboard-row,
.animations-skipped .podium-card,
.animations-skipped .award-icon {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

@media (max-width: 720px) {
  .final-score-stage,
  .final-podium-stage,
  .award-stage,
  .awards-page,
  .share-summary-stage { width: calc(100% - 16px); margin-bottom: 96px; }
  .podium-grid { grid-template-columns: 1fr; align-items: stretch; min-height: 0; }
  .podium-card,
  .podium-card.rank-1,
  .podium-card.rank-2,
  .podium-card.rank-3 { min-height: 0; padding-top: 18px; animation-delay: 0s; }
  .podium-grid .rank-1 { order: -1; }
  .podium-block,
  .rank-1 .podium-block,
  .rank-2 .podium-block { height: 38px; }
  .share-mini-stats { grid-template-columns: 1fr; }
  .share-actions .btn,
  .summary-final-actions .btn { width: 100%; }
  .summary-final-actions { margin-top: -80px; padding-inline: 12px; }
  .reveal-score-changes { gap: 6px; }
  .reveal-score-changes > span { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-scoreboard .scoreboard-row,
  .animated-scoreboard .scoreboard-score,
  .animated-scoreboard .round-gain,
  .podium-card,
  .award-icon,
  .reveal-score-changes > span { animation: none !important; opacity: 1 !important; transform: none !important; }
}
.game-active .final-score-stage,
.game-active .final-podium-stage,
.game-active .award-stage,
.game-active .awards-page,
.game-active .share-summary-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 4px;
  margin-bottom: 8px;
  padding-bottom: 14px;
}
.game-active .summary-final-actions {
  flex: 0 0 auto;
  margin: 0 auto 6px;
}

/* =========================================================
   v0.34 — كشف الفبركات المختارة، حالات التصويت والجوائز المجمعة
   ========================================================= */
.player-chip.player-status-chip {
  position: relative;
  overflow: hidden;
  opacity: .58;
  filter: saturate(.62) brightness(.82);
  transition: opacity .28s ease, filter .28s ease, box-shadow .28s ease, transform .28s ease;
}
.player-chip.player-status-chip.pending {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}
.player-chip.player-status-chip.submitted {
  opacity: 1;
  filter: saturate(1.16) brightness(1.16);
  box-shadow: 0 0 0 1px currentColor, 0 0 22px currentColor, inset 0 0 18px rgba(255,255,255,.08);
  animation: participantAnsweredIn .62s cubic-bezier(.16,.9,.24,1) both, participantColorGlow 1.8s .62s ease-in-out infinite alternate;
}
.player-chip.player-status-chip .answer-status-check {
  color: #160828;
  background: #fff;
  box-shadow: 0 0 14px rgba(255,255,255,.72);
}
@keyframes participantColorGlow {
  from { box-shadow: 0 0 0 1px currentColor, 0 0 12px currentColor, inset 0 0 12px rgba(255,255,255,.04); }
  to { box-shadow: 0 0 0 1px currentColor, 0 0 27px currentColor, inset 0 0 23px rgba(255,255,255,.12); }
}

/* تدخل الفبركة المختارة من موضعها التقريبي في شبكة جميع الإجابات. */
.enter-selected-answer .reveal-answer-card {
  transform-origin: center;
  animation: selectedAnswerZoomIn .82s cubic-bezier(.16,.92,.2,1) both;
}
@keyframes selectedAnswerZoomIn {
  0% {
    opacity: .08;
    transform: translate(var(--reveal-from-x, 0), var(--reveal-from-y, 0)) scale(.28);
    filter: saturate(.7) brightness(.72) blur(2px);
    border-radius: 18px;
  }
  62% {
    opacity: 1;
    transform: translate(0, 0) scale(1.035);
    filter: saturate(1.12) brightness(1.08) blur(0);
  }
  100% { opacity: 1; transform: none; filter: none; }
}

.awards-page {
  width: min(1180px, calc(100% - 28px));
  margin: 18px auto 72px;
  min-height: min(74vh, 760px);
  display: grid;
  align-content: center;
  gap: 22px;
}
.awards-page > header {
  text-align: center;
}
.awards-page > header span {
  color: var(--yellow);
  font-weight: 850;
}
.awards-page > header h1 {
  margin: 5px 0 0;
  font-size: clamp(36px, 6vw, 68px);
}
.awards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.award-card {
  min-width: 0;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 9px;
  padding: clamp(18px, 2.4vw, 28px) 16px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,211,64,.12), transparent 42%),
    linear-gradient(150deg, rgba(50,24,89,.96), rgba(12,8,31,.96));
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(26px) scale(.94);
  animation: awardCardIn .58s calc(var(--award-index, 0) * 90ms) cubic-bezier(.16,.9,.24,1) forwards;
}
.award-card-icon {
  font-size: clamp(46px, 6vw, 76px);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.award-card h2 {
  margin: 0;
  color: var(--yellow);
  font-size: clamp(21px, 2.5vw, 31px);
}
.award-card h3 {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(20px, 2.3vw, 29px);
}
.award-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
@keyframes awardCardIn {
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .awards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .awards-page { align-content: start; margin-bottom: 34px; }
  .awards-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .enter-selected-answer .reveal-answer-card,
  .award-card,
  .player-chip.player-status-chip.submitted { animation: none; opacity: 1; transform: none; }
}

/* =========================================================
   v0.36 — جوائز مناسبة للشاشة وشريط جوال بلا تداخل
   ========================================================= */

/* شاشة الجوائز النهائية على اللابتوب: ست بطاقات داخل الشاشة بلا تمرير داخلي. */
.game-active .awards-page {
  width: min(1080px, calc(100% - 20px));
  height: 100%;
  min-height: 0;
  max-height: 100%;
  margin: 0 auto 4px;
  padding: clamp(3px, .6vh, 7px) 0;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: clamp(6px, .9vh, 11px);
  overflow: hidden;
  scrollbar-width: none;
}

.game-active .awards-page::-webkit-scrollbar {
  display: none;
}

.game-active .awards-page > header {
  flex: 0 0 auto;
}

.game-active .awards-page > header span {
  font-size: clamp(11px, 1.45vh, 14px);
}

.game-active .awards-page > header h1 {
  margin-top: 2px;
  font-size: clamp(27px, 4.6vh, 46px);
  line-height: 1.08;
}

.game-active .awards-grid {
  min-height: 0;
  height: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(6px, .9vh, 10px);
}

.game-active .award-card {
  min-height: 0;
  height: 100%;
  align-content: center;
  gap: clamp(3px, .55vh, 7px);
  padding: clamp(7px, 1.05vh, 13px) clamp(9px, 1.15vw, 15px);
  overflow: hidden;
  border-radius: clamp(15px, 2vh, 21px);
}

.game-active .award-card-icon {
  font-size: clamp(30px, 5.2vh, 52px);
  line-height: 1;
}

.game-active .award-card h2 {
  font-size: clamp(16px, 2.35vh, 24px);
  line-height: 1.2;
}

.game-active .award-card h3 {
  font-size: clamp(15px, 2.15vh, 22px);
  line-height: 1.22;
}

.game-active .award-card p {
  max-width: 100%;
  font-size: clamp(11px, 1.62vh, 15px);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* الجوال: الأزرار في الصف الأول والشعار في صف مستقل لمنع تداخله مع النقاط. */
@media (max-width: 650px) {
  .game-active .game-hud {
    padding-inline: 6px;
    padding-block: 4px;
  }

  .game-active .game-hud-main {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "start end"
      "brand brand";
    gap: 3px 6px;
    min-height: 0;
  }

  .game-active .game-hud-main > .hud-actions:first-child {
    grid-area: start;
    justify-self: start;
  }

  .game-active .game-hud-main > .hud-actions.end {
    grid-area: end;
    justify-self: end;
  }

  .game-active .game-hud-main > .hud-brand {
    grid-area: brand;
    justify-self: center;
    min-width: 0;
  }

  .game-active .hud-actions {
    gap: 4px;
    flex-wrap: nowrap;
  }

  .game-active .hud-button,
  .game-active .hud-chip {
    min-height: 36px;
    padding: 6px 7px;
    border-radius: 11px;
    font-size: 11px;
  }

  .game-active .hud-brand .logo {
    width: clamp(78px, 23vw, 104px);
  }

  .game-active .game-hud-meta {
    min-height: 14px;
    margin-top: 1px;
    gap: 7px;
    font-size: 10.5px;
  }

  .game-active .question-stage,
  .game-active .mobile-question {
    padding-inline: 8px;
  }

  .game-active .answer-entry-card,
  .game-active .submission-card {
    width: calc(100% - 4px);
    padding-inline: 11px;
  }

  .game-active .answer-entry-card .input,
  .game-active .answer-entry-card .btn,
  .game-active .vote-option {
    touch-action: manipulation;
  }

  .game-active .vote-grid {
    width: calc(100% - 2px);
    gap: 5px;
  }

  .game-active .vote-option {
    padding: 8px 7px;
    border-radius: 14px;
    font-size: clamp(12px, 3.75vw, 16px);
  }

  .game-active .awards-page {
    width: calc(100% - 8px);
    gap: 6px;
    padding-block: 2px;
  }

  .game-active .awards-page > header span {
    display: none;
  }

  .game-active .awards-page > header h1 {
    margin: 0;
    font-size: clamp(24px, 7vw, 32px);
  }

  .game-active .awards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .game-active .award-card {
    gap: 3px;
    padding: 6px 7px;
    border-radius: 14px;
  }

  .game-active .award-card-icon {
    font-size: clamp(24px, 7vw, 34px);
  }

  .game-active .award-card h2 {
    font-size: clamp(13px, 3.65vw, 17px);
  }

  .game-active .award-card h3 {
    font-size: clamp(12px, 3.45vw, 16px);
  }

  .game-active .award-card p {
    font-size: clamp(9.5px, 2.75vw, 12px);
    line-height: 1.25;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 380px) {
  .game-active .hud-button,
  .game-active .hud-chip {
    min-height: 34px;
    padding-inline: 6px;
    font-size: 10.5px;
  }

  .game-active .hud-brand .logo {
    width: 76px;
  }
}

@media (max-height: 680px) {
  .game-active .awards-page > header h1 {
    font-size: clamp(23px, 4.2vh, 34px);
  }

  .game-active .award-card-icon {
    font-size: clamp(25px, 4.5vh, 40px);
  }

  .game-active .award-card h2 {
    font-size: clamp(14px, 2.15vh, 19px);
  }

  .game-active .award-card h3 {
    font-size: clamp(13px, 2vh, 18px);
  }

  .game-active .award-card p {
    font-size: clamp(9.5px, 1.45vh, 12px);
    -webkit-line-clamp: 2;
  }
}

/* إبقاء بطاقات الجوائز بحجم بصري معتدل في شاشات اللابتوب الطويلة. */
@media (min-width: 651px) {
  .game-active .awards-grid {
    height: min(100%, 510px);
    align-self: center;
  }
}

/* =========================================================
   تحديث 0.37 — اتصال مستمر وفصل نقاط الجوال عن الشعار
   ========================================================= */
.mobile-player-score { display: none; }
.connection-banner {
  position: fixed;
  z-index: 1000;
  inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  top: max(12px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(520px, calc(100% - 24px));
  min-height: 48px;
  margin-inline: auto;
  padding: 10px 15px;
  border: 1px solid rgba(95,240,190,.42);
  border-radius: 15px;
  color: var(--text);
  background: rgba(20,7,43,.96);
  box-shadow: 0 15px 45px rgba(0,0,0,.38);
  text-align: center;
}
.connection-banner.error { border-color: rgba(255,120,148,.55); }
.connection-spinner {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border: 2px solid rgba(255,255,255,.24);
  border-top-color: var(--mint, #5ff0be);
  border-radius: 50%;
  animation: connectionSpin .8s linear infinite;
}
.connection-banner.error .connection-spinner { border-top-color: #ff7894; }
@keyframes connectionSpin { to { transform: rotate(360deg); } }

@media (max-width: 650px) {
  .game-active .game-hud-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "brand brand"
      "start end";
    row-gap: 3px;
  }

  .game-active .game-hud-main > .hud-brand {
    grid-area: brand;
    position: static;
    z-index: 1;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .game-active .game-hud-main > .hud-actions:first-child { grid-area: start; min-width: 0; }
  .game-active .game-hud-main > .hud-actions.end { grid-area: end; min-width: 0; }
  .game-active .desktop-score-chip { display: none !important; }
  .game-active .mobile-player-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: max-content;
    max-width: calc(100% - 16px);
    min-height: 28px;
    margin: 1px auto 0;
    padding: 3px 12px;
    border: 1px solid rgba(95,240,190,.34);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(95,240,190,.09);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }
  .game-active .mobile-player-score strong {
    color: var(--mint, #5ff0be);
    font-size: 15px;
  }
  .game-active .hud-brand .logo {
    width: clamp(72px, 21vw, 96px);
    max-height: 36px;
  }
  .game-active .hud-actions.end {
    justify-content: flex-end;
    overflow: hidden;
  }
  .game-active .hud-actions:first-child { justify-content: flex-start; }
  .game-active .hud-button,
  .game-active .hud-chip {
    flex: 0 1 auto;
    max-width: 100%;
  }
  .game-active .game-hud-meta { margin-top: 2px; }
}

@media (max-width: 380px) {
  .game-active .hud-brand .logo { width: 68px; max-height: 32px; }
  .game-active .mobile-player-score { min-height: 25px; padding-inline: 9px; }
  .game-active .mobile-player-score strong { font-size: 14px; }
  .game-active .hud-button span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .connection-spinner { animation-duration: 1.8s; }
}


/* =========================================================
   v0.38 — مسار آمن لكشف الإجابة الصحيحة في Safari على iPhone/iPad
   يتجنب خلل WebKit الذي قد يحول طبقة التحريك إلى شاشة سوداء فارغة.
   ========================================================= */
:root.ios-safari .safari-safe-correct-reveal,
:root.ios-safari .safari-safe-correct-reveal .reveal-stage,
:root.ios-safari .safari-safe-correct-reveal .reveal-answer-card.correct {
  isolation: isolate;
  perspective: none !important;
  -webkit-perspective: none !important;
}

:root.ios-safari .safari-safe-correct-reveal .reveal-enter,
:root.ios-safari .safari-safe-correct-reveal .answer-enter,
:root.ios-safari .safari-safe-correct-reveal .reveal-answer-card.correct,
:root.ios-safari .safari-safe-correct-reveal .reveal-answer-card.correct * {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  will-change: auto !important;
}

:root.ios-safari .safari-safe-correct-reveal .reveal-answer-card.correct,
:root.ios-safari[data-theme="light"] .safari-safe-correct-reveal .reveal-answer-card.correct {
  position: relative;
  z-index: 3;
  display: flex !important;
  color: #fff !important;
  background: #050507 !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.46) !important;
}

:root.ios-safari .safari-safe-correct-reveal .reveal-answer-card.correct .answer-type {
  color: #050505 !important;
  background: #30d799 !important;
  -webkit-text-fill-color: #050505 !important;
}

:root.ios-safari .safari-safe-correct-reveal .reveal-answer-card.correct .revealed-answer-text,
:root.ios-safari .safari-safe-correct-reveal .reveal-answer-card.correct .reveal-points,
:root.ios-safari .safari-safe-correct-reveal .reveal-answer-card.correct .voter-chip,
:root.ios-safari .safari-safe-correct-reveal .reveal-answer-card.correct .nobody-chip {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

:root.ios-safari .safari-safe-correct-reveal .reveal-answer-card.correct .answer-explanation,
:root.ios-safari .safari-safe-correct-reveal .reveal-answer-card.correct .answer-voters > span:first-child {
  color: #d6d0df !important;
  -webkit-text-fill-color: #d6d0df !important;
}

/* v0.39 — الأوضاع المتقدمة وأدوات المضيف المدمجة */
.setup-card{display:grid;gap:18px}.setup-feature-block{display:grid;gap:12px;padding:16px;border:1px solid var(--border,rgba(255,255,255,.12));border-radius:18px;background:rgba(255,255,255,.035)}
.setup-feature-block h3{margin:0}.role-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.choice-card{display:grid;gap:5px;padding:14px;border:1px solid var(--border,rgba(255,255,255,.14));border-radius:15px;cursor:pointer}.choice-card.selected{border-color:var(--accent,#9b5cff);box-shadow:0 0 0 2px rgba(155,92,255,.14)}.choice-card input{position:absolute;opacity:0}.choice-card small{opacity:.72}.team-name-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.host-tools-panel{position:fixed;z-index:75;inset-inline:12px;bottom:max(12px,env(safe-area-inset-bottom));max-width:900px;margin:auto;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(20,8,42,.96);box-shadow:0 14px 44px rgba(0,0,0,.38);backdrop-filter:blur(14px)}.host-tools-panel>summary{cursor:pointer;list-style:none;padding:13px 18px;font-weight:800;text-align:center}.host-tools-panel>summary::-webkit-details-marker{display:none}.host-tools-panel[open]>summary{border-bottom:1px solid rgba(255,255,255,.12)}.host-tools-panel .host-toolbar{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:12px;background:transparent;box-shadow:none}.host-tools-panel .btn{min-height:42px}
.host-player-card,.host-player-vote-card{width:min(760px,calc(100% - 24px));margin:12px auto;padding:16px;border:1px solid rgba(155,92,255,.35);border-radius:18px;background:rgba(155,92,255,.08)}.host-player-vote-card .vote-grid{margin-top:12px}.host-player-card.success-card{text-align:center}.host-player-card .answer-input{margin-block:8px 12px}
.surprise-banner{width:min(900px,calc(100% - 24px));margin:10px auto;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(255,174,0,.22),rgba(255,74,139,.18));border:1px solid rgba(255,203,82,.45);animation:surprisePulse 1.4s ease-in-out infinite alternate}.surprise-banner strong{font-size:1.05rem}.surprise-banner span{opacity:.86}@keyframes surprisePulse{to{transform:scale(1.012)}}
.team-scoreboard{width:min(1000px,calc(100% - 24px));margin:16px auto 92px}.team-score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:8px}.team-score-card{display:grid;gap:4px;padding:12px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12)}.team-score-card span{font-weight:800}.team-score-card small{opacity:.68}.lobby-team-editor{display:grid;gap:8px;padding:12px;border-radius:15px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}.team-player-row{display:grid;grid-template-columns:1fr minmax(130px,180px);align-items:center;gap:8px}.team-player-row .input{min-height:38px;padding:7px 10px}.successor-picker{display:grid;gap:6px;margin-block:10px}
.reduced-motion-default *, .reduced-motion-default *::before, .reduced-motion-default *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.high-contrast-default{--border:rgba(255,255,255,.42)}.high-contrast-default body{filter:contrast(1.13)}.large-text-default{font-size:112.5%}
@media(max-width:720px){.role-choice-grid,.team-name-grid{grid-template-columns:1fr}.host-tools-panel{inset-inline:8px}.host-tools-panel .host-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.host-tools-panel .btn{width:100%;font-size:.86rem}.team-player-row{grid-template-columns:1fr}.surprise-banner{align-items:flex-start;flex-direction:column;gap:3px}.team-scoreboard{margin-bottom:88px}.host-player-card,.host-player-vote-card{width:calc(100% - 16px)}}

/* v0.39 — عرض الجوائز فرديًا ثم في صفحة مجمعة */
.single-award-stage,
.award-transition-stage {
  width: min(760px, calc(100% - 24px));
  min-height: min(70vh, 680px);
  margin: 10px auto 72px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  text-align: center;
}
.single-award-stage > header span,
.award-transition-stage > span {
  color: var(--yellow);
  font-weight: 850;
}
.single-award-stage > header h1,
.award-transition-stage h1 {
  margin: 4px 0 0;
  font-size: clamp(36px, 7vw, 72px);
}
.single-award-stage .featured-award {
  width: min(620px, 100%);
  min-height: 330px;
  align-content: center;
  opacity: 1;
  transform: none;
  animation: awardCardIn .62s cubic-bezier(.16,.9,.24,1) both;
}
.single-award-stage .featured-award .award-card-icon {
  font-size: clamp(72px, 11vw, 130px);
}
.award-transition-stage .cinematic-icon {
  font-size: clamp(68px, 12vw, 128px);
  animation: pulse 1s ease-in-out infinite alternate;
}
.game-active .single-award-stage,
.game-active .award-transition-stage {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 auto 8px;
  overflow: hidden;
}
@media (max-width: 720px) {
  .single-award-stage,
  .award-transition-stage { width: calc(100% - 16px); margin-bottom: 96px; }
  .single-award-stage .featured-award { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .award-transition-stage .cinematic-icon,
  .single-award-stage .featured-award { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* v0.43 — أدوات المضيف الدائمة ولوحة الطوارئ */
.game-shell.wide{padding-bottom:155px}
.host-tools-panel.always-visible{position:fixed;z-index:150;inset-inline:clamp(8px,2vw,28px);bottom:max(8px,env(safe-area-inset-bottom));display:grid;gap:8px;padding:10px 12px;border:1px solid rgba(255,211,79,.38);border-radius:18px;background:rgba(19,8,38,.96);box-shadow:0 18px 60px rgba(0,0,0,.48);backdrop-filter:blur(18px)}
.host-tools-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff}
.host-tools-heading>div{display:grid;gap:2px}.host-tools-heading strong{color:#ffd34f}.host-tools-heading small{font-size:.75rem;color:#d9cced}
.save-state-badge{white-space:nowrap;border-radius:999px;padding:5px 9px;background:rgba(95,240,190,.13);color:#71f4c8;font-size:.75rem}
.host-tools-panel.always-visible .host-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;max-height:88px;overflow:auto}
.host-tools-panel.always-visible .btn{min-height:38px;padding:8px 12px;font-size:.84rem}
.question-report-button{border-color:rgba(255,187,82,.6)!important;color:#ffd48f!important}
@media(max-width:700px){.game-shell.wide{padding-bottom:205px}.host-tools-panel.always-visible{inset-inline:5px;padding:8px;border-radius:14px}.host-tools-heading small{display:none}.host-tools-panel.always-visible .host-toolbar{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;max-height:none}.host-tools-panel.always-visible .btn{flex:0 0 auto}.question-report-button span{display:none}}


/* =========================================================
   v0.43.1 — مراجعة الجوال النهائية للمضيف
   تسمح بتمرير شاشة المضيف وتُبقي جميع أدوات الطوارئ ظاهرة
   دون شريط أفقي أو تداخل مع السؤال واللاعبين.
   ========================================================= */
@media (max-width: 700px) {
  body.game-active.host-active {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  body.game-active.host-active .game-shell.wide {
    display: block;
    width: min(100% - 8px, 1480px);
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(224px + env(safe-area-inset-bottom));
    overflow: visible;
  }

  body.game-active.host-active .game-hud {
    position: relative;
    margin-bottom: 6px;
  }

  body.game-active.host-active .game-hud-main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.game-active.host-active .hud-actions.end {
    overflow: visible;
  }

  body.game-active.host-active .hud-actions.end .hud-button span {
    display: none;
  }

  body.game-active.host-active .hud-button,
  body.game-active.host-active .icon-btn.hud-button {
    min-width: 40px;
    min-height: 40px;
    padding: 6px 8px;
  }

  body.game-active.host-active .lobby-hero {
    margin: 8px auto 12px;
  }

  body.game-active.host-active .lobby-hero h1 {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.25;
  }

  body.game-active.host-active .lobby-layout {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 0;
    gap: 10px;
  }

  body.game-active.host-active .lobby-join-card,
  body.game-active.host-active .lobby-panel {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 12px;
    overflow: visible;
  }

  body.game-active.host-active .lobby-qr {
    width: min(160px, 48vw);
  }

  body.game-active.host-active .lobby-panel .player-chips {
    max-height: none;
    overflow: visible;
  }

  body.game-active.host-active .question-stage {
    display: block;
    min-height: 0;
    padding: 14px 10px 8px;
  }

  body.game-active.host-active .question-stage::before {
    display: none;
  }

  body.game-active.host-active .question-stage h1,
  body.game-active.host-active .host-voting-question h1 {
    margin: 8px auto;
    font-size: clamp(22px, 6.4vw, 31px);
    line-height: 1.35;
  }

  body.game-active.host-active .question-stage p {
    margin-top: 6px;
    font-size: 14px;
  }

  body.game-active.host-active .host-voting-content {
    display: block;
    min-height: 0;
    padding: 8px 0;
  }

  body.game-active.host-active .host-player-card,
  body.game-active.host-active .host-player-vote-card {
    width: calc(100% - 8px);
    margin: 12px auto;
    padding: 12px;
  }

  body.game-active.host-active .host-player-vote-card .vote-grid {
    margin-top: 10px;
  }

  body.game-active.host-active .stage-players,
  body.game-active.host-active .host-player-management,
  body.game-active.host-active .team-scoreboard {
    margin: 14px auto;
  }

  body.game-active.host-active .host-player-management .player-chips {
    gap: 7px;
  }

  body.game-active.host-active .host-tools-panel.always-visible {
    inset-inline: 5px;
    bottom: max(5px, env(safe-area-inset-bottom));
    gap: 7px;
    padding: 8px;
    border-radius: 14px;
  }

  body.game-active.host-active .host-tools-heading {
    gap: 8px;
    min-height: 28px;
  }

  body.game-active.host-active .host-tools-heading small {
    display: none;
  }

  body.game-active.host-active .host-tools-panel.always-visible .host-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    gap: 6px;
    max-height: none;
    padding: 0;
    overflow: visible;
  }

  body.game-active.host-active .host-tools-panel.always-visible .btn {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 5px 4px;
    font-size: clamp(10px, 2.75vw, 12px);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 350px) {
  body.game-active.host-active .game-shell.wide {
    padding-bottom: calc(232px + env(safe-area-inset-bottom));
  }
  body.game-active.host-active .host-tools-panel.always-visible .btn {
    font-size: 9.5px;
  }
  body.game-active.host-active .save-state-badge {
    padding-inline: 6px;
    font-size: 10px;
  }
}

/* v0.43.1 — تحسين أهداف اللمس وتقليل ارتفاع لوحة الطوارئ في الجوالات الأوسع. */
@media (max-width: 700px) {
  body.game-active.host-active .compact-btn,
  body.game-active.host-active .vote-option {
    min-height: 44px;
  }
  body.game-active.host-active .chip-kick {
    min-width: 48px;
    height: 36px;
    min-height: 36px;
  }
}
@media (min-width: 370px) and (max-width: 700px) {
  body.game-active.host-active .host-tools-panel.always-visible .host-toolbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.game-active.host-active .game-shell.wide {
    padding-bottom: calc(176px + env(safe-area-inset-bottom));
  }
}


/* =========================================================
   v0.44 — اللعبة داخل شاشة واحدة بلا أي تمرير
   ========================================================= */
html:has(body.game-active),
body.game-active {
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none;
}
body.game-active #app,
body.game-active .game-shell,
body.game-active.host-active .game-shell.wide {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  padding-bottom: 4px;
}
body.game-active.host-active #app,
body.game-active.host-active .game-shell,
body.game-active.host-active .game-shell.wide {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
body.game-active * {
  scrollbar-width: none !important;
}
body.game-active *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
body.game-active .game-hud { flex: 0 0 auto; }
body.game-active .lobby-hero,
body.game-active .timer-wrap,
body.game-active .surprise-banner { flex: 0 0 auto; }
body.game-active .lobby-layout,
body.game-active .question-stage,
body.game-active .host-voting-content,
body.game-active .reveal-stage,
body.game-active .ranking-stage,
body.game-active .final-score-stage,
body.game-active .final-podium-stage,
body.game-active .awards-page,
body.game-active .share-summary-stage,
body.game-active .answer-entry-card,
body.game-active .vote-player-stage {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
body.game-active .host-tools-panel.always-visible {
  min-height: 0;
  padding: 7px;
  gap: 0;
}
body.game-active .host-tools-panel.always-visible .host-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px;
  max-height: none;
  overflow: hidden !important;
  padding: 0;
}
body.game-active .host-tools-panel.always-visible .btn {
  min-width: 0;
  min-height: 44px;
  padding: 7px 8px;
  white-space: normal;
  line-height: 1.15;
}
body.game-active .host-tools-heading,
body.game-active .save-state-badge { display: none !important; }
.settings-control-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
}
.settings-control-zone > div { display: grid; gap: 3px; }
.settings-control-zone span { color: var(--muted); font-size: .84rem; }

/* اللوبي وشاشات المضيف تتقلص بدل أن تمرر. */
body.game-active.host-active .lobby-layout {
  flex: 1 1 auto;
  height: auto;
  overflow: hidden !important;
}
body.game-active.host-active .lobby-join-card,
body.game-active.host-active .lobby-panel {
  min-height: 0;
  overflow: hidden !important;
}
body.game-active.host-active .lobby-panel .player-chips,
body.game-active.host-active .stage-players .player-chips,
body.game-active.host-active .host-player-management .player-chips {
  max-height: none;
  overflow: hidden !important;
}
body.game-active .vote-grid,
body.game-active .host-vote-grid {
  min-height: 0;
  height: 100%;
  overflow: hidden !important;
}
body.game-active .vote-option {
  min-height: 0;
  overflow: hidden;
}
body.game-active .vote-option b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* الجوائز كلها في صفحة واحدة لمدة قصيرة، بست بطاقات كحد أقصى. */
body.game-active .awards-page { flex: 1 1 auto; }
body.game-active .awards-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
  body.game-active #app,
  body.game-active .game-shell,
  body.game-active.host-active .game-shell.wide {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    padding: 4px 5px;
    overflow: hidden !important;
  }
  body.game-active.host-active #app,
  body.game-active.host-active .game-shell,
  body.game-active.host-active .game-shell.wide {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
  body.game-active .game-hud { margin: 0; }
  body.game-active .lobby-hero { margin: 3px auto 5px; }
  body.game-active .lobby-hero p,
  body.game-active .join-direct-link,
  body.game-active .question-stage p { display: none; }
  body.game-active.host-active .lobby-layout {
    display: grid;
    grid-template-columns: minmax(94px, .72fr) minmax(0, 1.28fr);
    gap: 6px;
  }
  body.game-active.host-active .lobby-join-card,
  body.game-active.host-active .lobby-panel { padding: 7px; }
  body.game-active.host-active .lobby-qr { width: min(92px, 27vw); }
  body.game-active.host-active .room-code { font-size: clamp(25px, 8vw, 38px); }
  body.game-active.host-active .lobby-code-label,
  body.game-active.host-active .lobby-join-card .compact-btn { font-size: 10px; }
  body.game-active.host-active .lobby-options-stack { gap: 3px; }
  body.game-active.host-active .lobby-option { padding: 4px 5px; }
  body.game-active.host-active .lobby-option small { display: none; }
  body.game-active.host-active .lobby-option strong { font-size: 10px; }
  body.game-active.host-active .lobby-panel .player-chips,
  body.game-active .stage-players .player-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  body.game-active .player-chip { min-height: 27px; padding: 3px 5px; font-size: 10px; }
  body.game-active .stage-players { margin: 4px auto; }
  body.game-active .stage-players-title { font-size: 10px; }
  body.game-active .question-stage,
  body.game-active .host-voting-content { flex: 1 1 auto; padding: 5px; }
  body.game-active .question-stage h1,
  body.game-active .host-voting-question h1 { font-size: clamp(18px, 5.8vw, 27px); line-height: 1.25; margin: 4px auto; }
  body.game-active .stage-kicker { font-size: 10px; }
  body.game-active .host-player-card,
  body.game-active .host-player-vote-card { margin: 4px auto; padding: 7px; }
  body.game-active .host-tools-panel.always-visible {
    inset-inline: 4px;
    bottom: max(4px, env(safe-area-inset-bottom));
    padding: 5px;
    border-radius: 12px;
  }
  body.game-active .host-tools-panel.always-visible .host-toolbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  body.game-active .host-tools-panel.always-visible .btn {
    min-height: 46px;
    padding: 4px 2px;
    font-size: clamp(9px, 2.65vw, 11px);
  }
  body.game-active .vote-grid,
  body.game-active .host-vote-grid {
    gap: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(var(--vote-rows), minmax(0, 1fr));
  }
  body.game-active.host-active .host-vote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.game-active .vote-option { padding: 4px 5px; font-size: clamp(10px, 3vw, 13px); }
  body.game-active .vote-option > span { width: 20px; height: 20px; font-size: 10px; }
  body.game-active .reveal-answer-card { padding: 10px; }
  body.game-active .revealed-answer-text { font-size: clamp(24px, 8vw, 38px); }
  body.game-active .final-podium-stage .podium-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 4px;
  }
  body.game-active .podium-card,
  body.game-active .podium-card.rank-1,
  body.game-active .podium-card.rank-2,
  body.game-active .podium-card.rank-3 { min-height: 0; padding: 7px 4px; }
  body.game-active .podium-card h2 { font-size: clamp(12px, 4vw, 18px); }
  body.game-active .podium-card strong { font-size: 11px; }
  body.game-active .podium-medal { font-size: 25px; }
  body.game-active .podium-block { height: 18px !important; }
  body.game-active .awards-page { gap: 4px; padding: 2px 0; }
  body.game-active .awards-page > header span { display: none; }
  body.game-active .awards-page > header h1 { font-size: clamp(22px, 7vw, 31px); }
  body.game-active .awards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  body.game-active .award-card { padding: 4px; gap: 2px; border-radius: 11px; }
  body.game-active .award-card-icon { font-size: clamp(21px, 6vh, 34px); }
  body.game-active .award-card h2 { font-size: clamp(11px, 3.3vw, 15px); line-height: 1.1; }
  body.game-active .award-card h3 { font-size: clamp(10px, 3vw, 14px); line-height: 1.1; }
  body.game-active .award-card p { font-size: 9px; line-height: 1.15; -webkit-line-clamp: 2; }
  body.game-active .share-summary-card { padding: 8px; gap: 4px; }
  body.game-active .share-summary-card > h1 { font-size: 20px; margin: 2px 0; }
  body.game-active .share-winner { padding: 5px; }
  body.game-active .share-winner h2 { font-size: 23px; }
  body.game-active .share-stat,
  body.game-active .share-mini-stats { padding: 4px; }
  body.game-active .share-actions { margin: 2px auto; }
}

@media (max-height: 640px) {
  body.game-active .game-hud-meta,
  body.game-active .lobby-hero p,
  body.game-active .answer-explanation,
  body.game-active .share-stat,
  body.game-active .share-mini-stats { display: none !important; }
  body.game-active .lobby-hero h1 { font-size: 20px; }
  body.game-active .timer-wrap { transform: scale(.86); transform-origin: center; margin-block: -3px; }
  body.game-active .question-stage h1,
  body.game-active .host-voting-question h1 { font-size: clamp(17px, 5.3vw, 23px); }
}


/* v0.44 — إعدادات المضيف داخل الشاشة من دون تمرير. */
body.game-active .modal-backdrop {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  align-items: start;
}
body.game-active .game-settings-modal {
  width: min(680px, calc(100% - 12px));
  max-height: calc(100dvh - 12px);
  margin-block: 6px;
  box-sizing: border-box;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  display: grid;
  gap: 8px;
  padding: 14px;
}
body.game-active .game-settings-modal > h2,
body.game-active .game-settings-modal > p { margin: 0; }
body.game-active .game-settings-content {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
}
body.game-active .game-settings-content > .label,
body.game-active .game-settings-content > .segmented,
body.game-active .game-settings-content > .settings-toggle-stack,
body.game-active .game-settings-content > .settings-live-note,
body.game-active .game-settings-content > .btn {
  min-width: 0;
}
body.game-active .game-settings-content > .settings-toggle-stack,
body.game-active .game-settings-content > .settings-live-note,
body.game-active .game-settings-content > .btn { grid-column: 1 / -1; }
body.game-active .game-settings-modal .settings-toggle-stack { padding: 7px; gap: 4px; }
body.game-active .game-settings-modal .toggle-row { padding: 4px; }
body.game-active .game-settings-modal .toggle-row small { display: none; }
body.game-active .game-settings-modal .input { min-height: 40px; padding-block: 6px; }
body.game-active .game-settings-modal .segmented { min-height: 40px; }
body.game-active .game-settings-modal .settings-control-zone,
body.game-active .game-settings-modal .settings-danger-zone { margin-top: 0; padding: 9px; }
.settings-readonly-summary { display:grid; gap:9px; padding:12px; border:1px solid rgba(255,255,255,.19); border-radius:16px; background:rgba(10,6,28,.32); }
.settings-summary-head { display:grid; gap:2px; }.settings-summary-head small { color:var(--muted); }
.settings-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.settings-summary-grid span { display:grid; gap:2px; min-width:0; padding:7px 9px; border-radius:10px; background:rgba(255,255,255,.07); overflow-wrap:anywhere; font-size:.88rem; }.settings-summary-grid b { color:#ffe48a; font-size:.78rem; }.settings-summary-grid .wide { grid-column:1/-1; }
@media (max-width: 480px), (max-height: 650px) {
  body.game-active .game-settings-modal { width:calc(100% - 8px); max-height:calc(100dvh - 8px); margin-block:4px; gap: 5px; padding: 9px 9px 18px; }
  body.game-active .game-settings-modal .modal-sub,
  body.game-active .game-settings-modal .settings-control-zone span,
  body.game-active .game-settings-modal .settings-danger-zone span { display: none; }
  body.game-active .game-settings-content { gap: 5px; }
  body.game-active .game-settings-modal .label { font-size: 11px; }
  body.game-active .game-settings-modal .input,
  body.game-active .game-settings-modal .segment,
  body.game-active .game-settings-modal .btn { min-height: 36px; font-size: 11px; }
  body.game-active .game-settings-modal .settings-control-zone,
  body.game-active .game-settings-modal .settings-danger-zone { padding: 6px; }
  body.game-active .settings-readonly-summary { padding:8px; gap:6px; }.settings-summary-grid { gap:5px; }.settings-summary-grid span { padding:5px 7px; font-size:.76rem; }
}

/* لا تُقص أزرار الحفظ/الأسماء/الإنهاء في نافذة الإعدادات داخل الجولة. */
body.game-active .game-settings-modal .btn { flex-shrink:0; }
body.game-active .game-settings-modal .settings-control-zone,
body.game-active .game-settings-modal .settings-danger-zone { min-height:54px; flex-shrink:0; }

/* v0.44 final — تظهر بطاقات الجوائز كلها معًا بلا تأخير متتابع أو حركة تتجاوز حدود الشاشة. */
body.game-active .awards-grid {
  overflow: hidden !important;
}
body.game-active .award-card {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
body.game-active .award-card-icon {
  line-height: .95;
  overflow: hidden;
}

/* v0.44 final — تقسيم مساحة السؤال وخيارات التصويت داخل الارتفاع المتاح. */
body.game-active .host-voting-content,
body.game-active.host-active .host-voting-content {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch;
  overflow: hidden !important;
}
body.game-active .host-voting-content > .vote-grid,
body.game-active .host-voting-content > .host-vote-grid {
  height: auto !important;
  min-height: 0 !important;
}
@media (max-height: 640px) {
  body.game-active .question-stage {
    padding-block: 2px !important;
    justify-content: center;
  }
  body.game-active .question-stage .stage-kicker {
    padding: 3px 8px;
    line-height: 1.1;
  }
  body.game-active .question-stage h1 {
    margin-block: 1px !important;
    line-height: 1.18;
  }
}

/* v0.44 final — أربعة أزرار مضيف في صف واحد حتى على عرض 320px. */
@media (max-width: 700px) {
  body.game-active.host-active .host-tools-panel.always-visible .host-toolbar {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  body.game-active.host-active .host-tools-panel.always-visible .btn {
    min-width: 0 !important;
    padding-inline: 2px;
    font-size: clamp(8.5px, 2.55vw, 11px);
  }
  body.game-active.host-active #app,
  body.game-active.host-active .game-shell,
  body.game-active.host-active .game-shell.wide {
    padding-bottom: calc(62px + env(safe-area-inset-bottom));
  }
}


/* v0.46 — ملاءمة تلقائية، ملخص منظم، حالات الاتصال، ودعم الشاشات الذكية. */
html, body { width: 100%; height: 100%; overscroll-behavior: none; }
body.game-active { overflow: hidden !important; }
body.game-active #app { --fit: var(--viewport-fit, 1); }

/* اللاعب المنقطع يبقى ظاهرًا ويحتفظ بمكانه ونقاطه. */
.disconnected-player { opacity: .58; filter: saturate(.55); }
.player-chip.disconnected-player { border-style: dashed; position: relative; }
.disconnect-mark { display: inline-flex; align-items: center; border-radius: 999px; padding: 1px 5px; font-size: 9px; color: #ffd88a; background: rgba(255,146,61,.17); border: 1px solid rgba(255,181,87,.35); white-space: nowrap; }
.scoreboard-row.disconnected-player .scoreboard-name::after { content: ' — منقطع'; color: #ffd28c; font-size: .65em; font-weight: 700; }

/* شاشة انتظار أكثر توازنًا. */
body.game-active.host-active .lobby-layout { min-height: 0; flex: 1 1 auto; align-items: stretch; }
body.game-active.host-active .lobby-panel,
body.game-active.host-active .lobby-join-card { min-height: 0; overflow: hidden; }
.lobby-ready-status { margin: 3px 0 6px; padding: 6px 10px; border-radius: 12px; font-weight: 850; text-align: center; font-size: clamp(11px, 1.4vw, 15px); }
.lobby-ready-status.ready { color: #70f0c0; background: rgba(45,211,154,.12); border: 1px solid rgba(78,235,180,.25); }
.lobby-ready-status.waiting { color: #efd7ff; background: rgba(181,117,255,.1); border: 1px solid rgba(181,117,255,.2); }
body.game-active.host-active .lobby-panel .player-chips { grid-template-columns: repeat(4, minmax(0,1fr)); align-content: start; }
body.game-active.host-active .lobby-panel[data-player-count="1"] .player-chips,
body.game-active.host-active .lobby-panel[data-player-count="2"] .player-chips,
body.game-active.host-active .lobby-panel[data-player-count="3"] .player-chips,
body.game-active.host-active .lobby-panel[data-player-count="4"] .player-chips { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* ملخص المباراة: المحتوى المهم في شبكة قصيرة لا تغطيها الأزرار. */
body.game-active .share-summary-stage { width: min(980px, 100%); height: auto; flex: 1 1 0; min-height: 0; margin: 0 auto; padding: 4px 8px; display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 6px; overflow: hidden !important; }
body.game-active .compact-match-summary { height: 100%; min-height: 0; padding: clamp(7px, 1.5vh, 14px); display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: clamp(5px, 1vh, 10px); overflow: hidden; }
.summary-card-head { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 0; }
.summary-card-head .share-card-brand { width: clamp(76px, 11vw, 130px); flex: 0 0 auto; }
.summary-card-head h1 { margin: 0; font-size: clamp(20px, 3.2vw, 38px); line-height: 1.05; overflow-wrap: anywhere; }
.summary-main-grid { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 8px; }
.summary-main-grid .share-winner { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(6px,1.4vh,15px); }
.summary-main-grid .share-winner h2 { margin: 3px 0; font-size: clamp(23px, 4vw, 46px); line-height: 1; overflow-wrap: anywhere; }
.summary-main-grid .share-top-three { min-height: 0; display: grid; grid-template-rows: repeat(3,minmax(0,1fr)); gap: 5px; }
.summary-main-grid .share-top-three > div { min-height: 0; padding: 5px 10px; }
.summary-bottom-grid { min-height: 0; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 8px; }
.summary-bottom-grid .share-stat, .summary-bottom-grid .share-mini-stats { min-height: 0; margin: 0; }
.summary-bottom-grid .share-stat { display: flex; flex-direction: column; justify-content: center; padding: 6px 10px; }
.summary-bottom-grid .share-stat b { font-size: clamp(12px, 1.8vw, 18px); white-space: normal; overflow-wrap: anywhere; }
.summary-bottom-grid .share-mini-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 5px; }
.summary-bottom-grid .share-mini-stats > div { min-width: 0; padding: 3px; }
.summary-bottom-grid .share-mini-stats strong { font-size: clamp(10px,1.45vw,15px); overflow-wrap: anywhere; }
body.game-active .share-actions { margin: 0 auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; width: min(620px,100%); }
body.game-active .summary-final-actions { position: static !important; margin: 0 auto !important; width: min(900px,100%); padding: 0 8px 4px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; z-index: 4; }
body.game-active .summary-final-actions .btn { min-width: 0; min-height: 38px; padding: 7px; font-size: clamp(10px,1.4vw,14px); }

/* الجوائز: 3–4 فقط، واضحة وفي شبكة واحدة لمدة 10 ثوانٍ. */
body.game-active .awards-page { width: min(1040px,100%); height: auto; flex: 1 1 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 6px; overflow: hidden !important; }
body.game-active .awards-page > header h1 { margin: 0; font-size: clamp(22px,4vw,42px); }
body.game-active .awards-grid { min-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: clamp(5px,1vw,10px); overflow: hidden; }
body.game-active .awards-page[data-award-count="3"] .awards-grid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: minmax(0,1fr); }
body.game-active .award-card { min-height: 0; padding: clamp(6px,1.4vh,13px); display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; }
body.game-active .award-card-icon { font-size: clamp(28px,7vh,54px); }
body.game-active .award-card h2 { font-size: clamp(14px,2.2vw,24px); line-height: 1.08; }
body.game-active .award-card h3 { font-size: clamp(13px,2vw,21px); line-height: 1.08; overflow-wrap: anywhere; }
body.game-active .award-card p { font-size: clamp(10px,1.35vw,15px); line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* التأكيد الآمن: زر الإلغاء هو أول عنصر تركيز. */
.host-confirm-dialog { display: grid; gap: 12px; text-align: center; }
.host-confirm-dialog h2, .host-confirm-dialog p { margin: 0; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* تصغير تدريجي حقيقي عند نقص الارتفاع. */
body.layout-density-1.game-active { --density: .92; }
body.layout-density-2.game-active { --density: .84; }
body.layout-density-3.game-active { --density: .76; }
body.game-active .game-hud,
body.game-active .lobby-hero,
body.game-active .lobby-layout,
body.game-active .question-stage,
body.game-active .host-voting-content,
body.game-active .stage-players,
body.game-active .final-score-stage,
body.game-active .final-podium-stage,
body.game-active .awards-page,
body.game-active .share-summary-stage { --density: var(--density,1); }
body.layout-density-1.game-active .lobby-layout,
body.layout-density-2.game-active .lobby-layout,
body.layout-density-3.game-active .lobby-layout { gap: calc(10px * var(--density)); }
body.layout-density-1.game-active .lobby-panel,
body.layout-density-1.game-active .lobby-join-card,
body.layout-density-2.game-active .lobby-panel,
body.layout-density-2.game-active .lobby-join-card,
body.layout-density-3.game-active .lobby-panel,
body.layout-density-3.game-active .lobby-join-card { padding: calc(14px * var(--density)); }
body.layout-density-2.game-active .lobby-option small,
body.layout-density-3.game-active .lobby-option small,
body.tiny-height.game-active .share-card-brand,
body.tiny-height.game-active .share-mini-stats { display: none !important; }
body.short-height.game-active .summary-card-head .share-card-brand { width: 66px; }
body.short-height.game-active .compact-match-summary { grid-template-rows: auto minmax(0,1fr); }
body.short-height.game-active .summary-bottom-grid { display: none; }
body.tiny-height.game-active .lobby-hero p,
body.tiny-height.game-active .join-direct-link,
body.tiny-height.game-active .lobby-option small { display: none !important; }

/* متصفحات الشاشات الذكية والريموت. */
.smart-tv-browser body, body.tv-mode { font-size: calc(16px * max(1, var(--viewport-fit,1))); }
.smart-tv-browser .remote-focusable:focus,
body.tv-mode .remote-focusable:focus { outline: 4px solid #ffd84d !important; outline-offset: 4px; box-shadow: 0 0 0 7px rgba(139,69,255,.48), 0 0 32px rgba(255,216,77,.45) !important; transform: translateZ(0) scale(1.025); z-index: 30; }
.smart-tv-browser button, .smart-tv-browser a, body.tv-mode button, body.tv-mode a { min-height: 48px; }
.smart-tv-browser .lobby-qr, body.tv-mode .lobby-qr { width: clamp(220px,26vh,360px); }
.smart-tv-browser .room-code, body.tv-mode .room-code { font-size: clamp(46px,6vw,82px); letter-spacing: .12em; }
@media (min-width: 1600px) and (min-height: 850px) {
  body.game-active.host-active .lobby-layout { width: min(1500px,96vw); }
  body.game-active .question-stage h1, body.game-active .host-voting-question h1 { font-size: clamp(42px,4vw,72px); }
  body.game-active .player-chip { font-size: clamp(17px,1.4vw,25px); min-height: 52px; }
}
@media (max-width: 700px) {
  body.game-active.host-active .lobby-panel .player-chips { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.game-active .summary-main-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 4px; }
  body.game-active .summary-bottom-grid { grid-template-columns: 1fr; gap: 4px; }
  body.game-active .summary-bottom-grid .share-mini-stats { display: none; }
  body.game-active .summary-card-head .share-card-brand { width: 62px; }
  body.game-active .summary-final-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.game-active .awards-page[data-award-count="3"] .awards-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); }
}
@supports not (height: 100dvh) {
  body.game-active, body.game-active #app, body.game-active .game-shell { height: 100vh !important; max-height: 100vh !important; }
}

body.game-active.host-active:not(.host-toolbar-visible) #app,
body.game-active.host-active:not(.host-toolbar-visible) .game-shell,
body.game-active.host-active:not(.host-toolbar-visible) .game-shell.wide { padding-bottom: 4px !important; }


/* =========================================================
   v0.47 — أسماء المصوّتين واضحة على اللابتوب والشاشة الكبيرة
   ========================================================= */
body.game-active .reveal-answer-card .projector-voter-names {
  width: 100%;
  max-width: 1180px;
  gap: clamp(8px, 1.25vh, 14px);
  margin-top: clamp(12px, 2vh, 24px);
}
body.game-active .reveal-answer-card .projector-voter-names > span:first-child {
  color: rgba(255,255,255,.82);
  font-size: clamp(16px, 1.55vw, 24px);
  line-height: 1.2;
  letter-spacing: .01em;
}
body.game-active .reveal-answer-card .projector-voter-grid {
  width: min(100%, 1120px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  align-items: stretch;
  justify-content: center;
  gap: clamp(8px, 1.15vw, 14px);
  margin-inline: auto;
}
body.game-active .reveal-answer-card .projector-voter-grid .voter-chip {
  min-width: 0;
  min-height: clamp(50px, 6.2vh, 68px);
  width: 100%;
  justify-content: center;
  padding: clamp(9px, 1.25vh, 14px) clamp(14px, 1.8vw, 25px);
  font-size: clamp(20px, 2.15vw, 34px);
  line-height: 1.14;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
  text-shadow: 0 2px 7px rgba(0,0,0,.62);
  border-width: 2px;
  box-shadow: 0 7px 22px rgba(0,0,0,.24);
}
body.game-active .reveal-answer-card .projector-voter-grid.medium-voters {
  grid-template-columns: repeat(auto-fit, minmax(min(185px, 100%), 1fr));
}
body.game-active .reveal-answer-card .projector-voter-grid.many-voters {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 7px;
}
body.game-active .reveal-answer-card .projector-voter-grid.many-voters .voter-chip {
  min-height: 44px;
  padding: 7px 11px;
  font-size: clamp(16px, 1.65vw, 25px);
}
.smart-tv-browser body.game-active .projector-voter-grid .voter-chip,
body.tv-mode.game-active .projector-voter-grid .voter-chip {
  min-height: 66px;
  font-size: clamp(27px, 2.35vw, 42px);
  border-width: 3px;
}
@media (min-width: 900px) and (max-height: 800px) {
  body.game-active .reveal-answer-card .projector-voter-names {
    margin-top: 9px;
    gap: 7px;
  }
  body.game-active .reveal-answer-card .projector-voter-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(175px, 100%), 1fr));
    gap: 7px;
  }
  body.game-active .reveal-answer-card .projector-voter-grid .voter-chip {
    min-height: 44px;
    padding: 7px 13px;
    font-size: clamp(18px, 1.9vw, 28px);
  }
}
@media (max-width: 700px) {
  body.game-active .reveal-answer-card .projector-voter-names > span:first-child {
    font-size: clamp(12px, 3.6vw, 16px);
  }
  body.game-active .reveal-answer-card .projector-voter-grid,
  body.game-active .reveal-answer-card .projector-voter-grid.medium-voters,
  body.game-active .reveal-answer-card .projector-voter-grid.many-voters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  body.game-active .reveal-answer-card .projector-voter-grid .voter-chip,
  body.game-active .reveal-answer-card .projector-voter-grid.many-voters .voter-chip {
    min-height: 36px;
    padding: 5px 7px;
    font-size: clamp(13px, 4.15vw, 19px);
  }
}

/* =========================================================
   v0.49.0 — خصوصية التصويت ودخول منتصف اللعبة وثبات الحالة
   ========================================================= */
.vote-private-confirmation {
  width: min(680px, calc(100% - 24px));
  margin: clamp(14px, 3vh, 30px) auto;
  min-height: clamp(180px, 34vh, 320px);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 12px;
}
.vote-private-confirmation > span { font-size: clamp(42px, 8vw, 76px); }
.vote-private-confirmation > strong { font-size: clamp(24px, 5vw, 40px); }
.vote-private-confirmation > small { font-size: clamp(15px, 3vw, 22px); opacity: .82; }
.late-join-notice {
  width: min(760px, calc(100% - 24px));
  margin: 8px auto;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(91,49,154,.22);
  text-align: center;
  font-weight: 800;
  font-size: clamp(14px, 2vw, 19px);
}
.sound-current-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 12px;
  font-size: 16px;
}
.modal-sound-grid .sound-option { display: grid; gap: 3px; place-items: center; }
.modal-sound-grid .sound-option small { font-size: 11px; opacity: .8; }
.player-chip.player-status-chip { gap: 6px; }
.player-live-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  color: inherit;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
@media (min-width: 900px) {
  .player-live-status { font-size: 13px; padding: 4px 9px; }
}


/* v0.50.0 — جولات كسر التعادل وحالة المشاهدة */
.tiebreak-banner {
  width: min(920px, calc(100% - 24px));
  margin: 10px auto;
  padding: 13px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 14px;
  border: 1px solid rgba(255, 205, 78, .56);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 189, 46, .20), rgba(126, 79, 255, .20));
  box-shadow: 0 12px 35px rgba(0, 0, 0, .16);
  text-align: right;
}
.tiebreak-banner > span { grid-row: 1 / span 2; font-weight: 900; color: #ffd66b; white-space: nowrap; }
.tiebreak-banner > strong { font-size: clamp(1rem, 2vw, 1.25rem); overflow-wrap: anywhere; }
.tiebreak-banner > small { opacity: .82; }
.spectator-card {
  border: 1px solid rgba(158, 141, 255, .42) !important;
  background: linear-gradient(145deg, rgba(77, 63, 143, .23), rgba(18, 22, 38, .9)) !important;
  text-align: center;
}
@media (max-width: 720px) {
  .tiebreak-banner { grid-template-columns: 1fr; text-align: center; gap: 5px; padding: 12px; }
  .tiebreak-banner > span { grid-row: auto; white-space: normal; }
}

/* v1.1 — هوية فبركها وتحسينات الكشف والملخص */
body.game-active .reveal-answer-card .answer-authors strong{
  font-size:clamp(20px,3vh,28px)!important;
  line-height:1.35;
}
body.game-active .reveal-answer-card .projector-voter-grid .voter-chip{
  font-size:clamp(17px,2.2vw,25px)!important;
  font-weight:900;
}
body.game-active .summary-card-head{
  justify-content:flex-start;
  align-items:center;
  display:grid;
  grid-template-columns:minmax(62px,96px) minmax(0,1fr);
  gap:14px;
  width:100%;
}
body.game-active .summary-card-head .share-card-brand{
  width:100%!important;
  min-width:0;
  overflow:hidden;
}
body.game-active .summary-card-head .share-card-brand .logo,
body.game-active .summary-card-head .share-card-brand .logo-image{
  display:block;
  width:100%!important;
  max-width:96px!important;
  height:auto!important;
  max-height:48px!important;
  object-fit:contain;
}
body.game-active .summary-card-head>div:last-child{min-width:0;text-align:start}
body.game-active .summary-card-head h1{max-width:100%;word-break:break-word;overflow-wrap:anywhere}
body.game-active .recap-replay-block{
  position:relative;
  z-index:5;
  margin:10px auto 24px;
  width:min(920px,calc(100% - 16px));
  text-align:center;
}
body.game-active .recap-replay-block>p{margin:0 0 10px;color:var(--muted);font-weight:700}
body.game-active .summary-final-actions{margin:0 auto!important}
.ranking-static .scoreboard-row,.ranking-static .round-gain{animation:none!important;opacity:1!important;transform:none!important}

/* v1.1.3 — زر رجوع ثابت إلى الصفحة الرئيسية للمنصة */
.floating-utility-actions .floating-home-toggle{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:inherit}
.platform-home-btn{text-decoration:none;white-space:nowrap}
@media(max-width:560px){.platform-home-btn{font-size:12px;padding-inline:9px}.floating-utility-actions .floating-home-toggle{display:inline-flex}}

/* v1.1.5 — رمز الغرفة قابل للمس لإظهار باركود الانضمام وزر رئيسية واضح */
.room-code-qr{cursor:pointer;font:inherit;border:1px solid rgba(255,255,255,.18);display:inline-flex;align-items:center;gap:6px}
.room-code-qr:hover,.room-code-qr:focus-visible{border-color:var(--accent,#ffd24d);transform:translateY(-1px)}
.floating-utility-actions .floating-home-toggle{width:auto!important;min-width:92px;padding-inline:12px!important;gap:7px;border-radius:999px}
.floating-home-toggle b{font-size:12px;font-weight:900;line-height:1}.floating-home-toggle span{font-size:17px}
@media(max-width:560px){.floating-utility-actions .floating-home-toggle{min-width:82px;padding-inline:10px!important}.floating-home-toggle b{font-size:11px}}

/* فئات فبركها — v1.1.8 */
.category-picker-block{display:grid;gap:14px}.category-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.category-picker-head h3{margin:0 0 4px;font-size:1.05rem}.category-picker-head small{color:var(--muted);line-height:1.6}.category-picker-head>strong{white-space:nowrap;background:rgba(155,92,255,.14);border:1px solid rgba(155,92,255,.32);padding:7px 10px;border-radius:999px}.category-picker-actions{display:flex;gap:8px;flex-wrap:wrap}.compact-btn{min-height:38px!important;padding:7px 12px!important;width:auto!important}.category-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.category-choice{min-width:0;min-height:72px;border:1px solid var(--line);border-radius:15px;background:var(--paper-2);color:var(--ink);padding:10px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;text-align:right;cursor:pointer;transition:.18s ease}.category-choice:hover{border-color:rgba(155,92,255,.65);transform:translateY(-1px)}.category-choice.selected{border-color:#9b5cff;background:linear-gradient(145deg,rgba(155,92,255,.18),rgba(255,158,86,.08));box-shadow:0 0 0 1px rgba(155,92,255,.15) inset}.category-choice-icon{font-size:1.55rem}.category-choice-text{display:grid;gap:3px;min-width:0}.category-choice-text strong{font-size:.93rem;white-space:normal;line-height:1.35}.category-choice-text small{font-size:.74rem;color:var(--muted)}.category-choice-check{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(155,92,255,.18);font-weight:900;color:#d7c2ff}.category-choice:not(.selected) .category-choice-check{border:1px solid var(--line);background:transparent}.category-selection-note{margin:0;color:var(--muted);font-size:.84rem}
@media(max-width:900px){.category-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.category-picker-head{align-items:center}.category-picker-head small{display:block}.category-picker-actions{display:grid;grid-template-columns:1fr 1fr}.category-picker-actions .compact-btn:last-child{grid-column:1/-1}.category-choice-grid{grid-template-columns:1fr}.category-choice{min-height:62px}.category-choice-icon{font-size:1.35rem}}
.join-profile-preview{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:12px;margin:10px 0}.join-profile-preview>div{min-width:0}.join-avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,#50347a,#24143c);font-size:32px;border:2px solid rgba(255,255,255,.16)}@media(max-width:620px){.join-profile-preview{grid-template-columns:auto 1fr}.join-profile-preview .compact-btn{grid-column:1/-1}}
.player-chip-avatar,.player-inline-avatar{font-style:normal;display:inline-grid;place-items:center;flex:0 0 auto}.player-chip-avatar{font-size:1.15em;margin-inline-end:3px}.player-inline-avatar{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.09);margin-inline-end:7px;font-size:17px}.scoreboard-name,.player-name{display:flex;align-items:center;min-width:0}
/* v1.2.5 — الصور الشخصية */
.join-avatar,.player-inline-avatar,.player-chip-avatar{overflow:hidden}
.join-avatar .fbrkh-avatar-image,.player-inline-avatar .fbrkh-avatar-image,.player-chip-avatar .fbrkh-avatar-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.player-chip-avatar{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.09)}
.player-inline-avatar{padding:0}
.podium-avatar{display:block;width:72px;height:72px;border-radius:50%;overflow:hidden;margin:0 auto 8px;border:3px solid rgba(255,255,255,.35);box-shadow:0 8px 18px rgba(0,0,0,.28)}.podium-avatar>*{width:100%;height:100%;object-fit:cover}.award-winners{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:9px 0}.award-winners>span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 5px;border-radius:999px;background:rgba(255,255,255,.08)}.award-winners i{width:30px;height:30px;border-radius:50%;overflow:hidden;font-style:normal}.award-winners i>*{width:100%;height:100%;object-fit:cover}.share-winner-avatar{display:block;width:68px;height:68px;border-radius:50%;overflow:hidden;margin:0 auto 7px;border:3px solid rgba(255,255,255,.4)}.share-winner-avatar>*{width:100%;height:100%;object-fit:cover}.summary-avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;display:inline-block}.summary-avatar>*{width:100%;height:100%;object-fit:cover}


/* v1.2.8 — ثبات شاشة فبركها بعد الإدخال وصور شخصية أوضح */
@media (max-width: 900px) {
  body.game-active .answer-input,
  body.game-active input.answer-input {
    font-size: 18px !important;
    line-height: 1.35 !important;
    transform: none !important;
    touch-action: manipulation;
  }
  body.game-active:not(.keyboard-open) .app-shell { min-height: var(--viewport-height, 100dvh); }
}
.join-avatar{width:78px!important;height:78px!important;border-radius:22px!important;font-size:40px!important;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.player-chip-avatar{width:42px!important;height:42px!important;font-size:23px!important;border:2px solid rgba(255,255,255,.28);box-shadow:0 5px 14px rgba(0,0,0,.25)}
.player-inline-avatar,.summary-avatar{width:40px!important;height:40px!important;border-radius:50%!important;border:2px solid rgba(255,255,255,.2)}
.podium-avatar{width:98px!important;height:98px!important}.share-winner-avatar{width:86px!important;height:86px!important}
.award-winners i{width:42px!important;height:42px!important}.summary-card .summary-avatar{flex:0 0 40px}
@media(max-width:620px){.join-avatar{width:68px!important;height:68px!important}.player-chip-avatar{width:38px!important;height:38px!important}.player-inline-avatar,.summary-avatar{width:36px!important;height:36px!important}.podium-avatar{width:84px!important;height:84px!important}}

/* v1.3.0 — زر مظهر واضح ومعاينة صوت مرئية */
.floating-utility-actions .floating-theme-toggle{width:auto!important;min-width:124px!important;display:flex!important;gap:7px!important;align-items:center!important;justify-content:center!important}.floating-theme-toggle span{font-size:20px}.floating-theme-toggle b{display:inline!important;font-size:12px;white-space:nowrap}.sound-option.previewing{opacity:.72;cursor:progress}.sound-option.previewing::after{content:"جارٍ التشغيل…";display:block;font-size:10px;margin-top:3px}
@media(max-width:520px){.floating-utility-actions .floating-theme-toggle{min-width:52px!important;width:52px!important;padding:0!important}.floating-theme-toggle b{display:none!important}}
/* v1.3.0 — إبقاء زر المظهر واضحًا حتى على الجوال */
@media(max-width:520px){.floating-utility-actions .floating-theme-toggle{min-width:86px!important;width:auto!important;padding-inline:9px!important}.floating-theme-toggle b{display:inline!important;font-size:10px!important}}

/* v1.4.0 — كشف جميع الإجابات وهوية متجاوبة */
.icon-only-theme{width:46px!important;min-width:46px!important;padding:9px!important;display:inline-grid!important;place-items:center!important}.icon-only-theme b{display:none!important}.icon-only-theme span{font-size:21px!important}
.all-answers-stage{width:min(1100px,96vw);margin:auto;display:grid;gap:18px;text-align:center}.all-answers-stage header span{display:inline-flex;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.1);font-weight:900}.all-answers-stage h1{font-size:clamp(30px,5vw,62px);margin:7px 0}.all-answers-stage header small{color:var(--muted);font-size:clamp(13px,1.4vw,19px)}.all-answers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px}.all-answers-grid article{min-height:92px;padding:14px;border-radius:22px;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px;text-align:right;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.18);animation:answerOverviewIn .45s ease both;animation-delay:calc(var(--answer-index)*80ms)}.all-answers-grid article>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent,#ffd447);color:#25170a;font-weight:1000}.all-answers-grid strong{font-size:clamp(18px,2vw,28px);line-height:1.45}@keyframes answerOverviewIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.reveal-answer-card .answer-type{max-width:90%}.reveal-answer-card.fake .answer-type:has(+ .revealed-answer-text){font-weight:1000}.unified-game-final,.final-podium-stage{max-width:1100px;margin-inline:auto}
.fbrkh-tools-panel .volume-row{grid-template-columns:1fr!important}.fbrkh-tools-panel .volume-row input{width:100%}
@media(max-width:620px){.all-answers-stage{padding:8px}.all-answers-grid{grid-template-columns:1fr;max-height:65dvh;overflow:auto}.all-answers-grid article{min-height:72px;border-radius:16px}.all-answers-grid strong{font-size:18px}}

/* v1.5.0 — ملخص الإجابات وأحجام الصور الشخصية */
.answers-voters-summary{width:min(1180px,96vw);height:min(78dvh,820px);margin:auto;display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px;padding:clamp(16px,2vw,28px)}
.answers-voters-summary header{text-align:center}.answers-voters-summary header span{display:inline-flex;padding:7px 14px;border-radius:999px;background:rgba(255,213,71,.15);color:#ffe37a;font-weight:900}.answers-voters-summary h1{margin:9px 0 0;font-size:clamp(26px,3.4vw,52px)}
.answers-voters-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:auto;padding:3px}
.answers-voters-list article{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(180px,.72fr);gap:12px;align-items:center;min-height:94px;padding:12px 14px;border:2px solid rgba(255,255,255,.13);border-radius:20px;background:rgba(255,255,255,.07)}
.answers-voters-list article.correct{border-color:#63e0a3;background:rgba(52,202,132,.16)}.summary-index{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-weight:1000}.summary-answer{display:grid;gap:5px}.summary-answer strong{font-size:clamp(18px,1.7vw,27px)}.summary-answer small{color:#d8cfe8;font-weight:800}.summary-voters{display:grid;gap:6px}.summary-voters>b{font-size:11px;color:#cabbe2}.summary-voters>div{display:flex;flex-wrap:wrap;gap:5px}.summary-voters span{padding:5px 8px;border-radius:999px;background:#fff;color:#2b1744;font-weight:900;font-size:12px}.summary-voters em{font-style:normal;color:#a99eb9;font-size:12px}
.player-avatar,.player-chip-avatar,.player-inline-avatar,.fbrkh-avatar,.lobby-player-avatar{transform:scale(1.08)}
.player-inline-avatar{width:48px!important;height:48px!important}.player-chip-avatar,.lobby-player-avatar{width:58px!important;height:58px!important}
@media(max-width:760px){.answers-voters-summary{height:min(82dvh,760px);padding:10px}.answers-voters-list{grid-template-columns:1fr}.answers-voters-list article{grid-template-columns:36px minmax(0,1fr);min-height:84px}.summary-voters{grid-column:2}.player-inline-avatar{width:42px!important;height:42px!important}.player-chip-avatar,.lobby-player-avatar{width:52px!important;height:52px!important}}

/* v1.6.0 — ألوان ثابتة للمشاركين وملخص إجابات أوضح */
.participant-tone,
.participant-name,
.participant-inline-name{--participant-color:#ffd166}
.player-chip.participant-tone{border-color:color-mix(in srgb,var(--participant-color) 72%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--participant-color) 32%,transparent)}
.player-chip.participant-tone b,
.participant-name,
.participant-inline-name{color:var(--participant-color)!important;-webkit-text-fill-color:var(--participant-color)!important;text-shadow:0 1px 2px rgba(0,0,0,.42)}
.participant-inline-name{font-style:normal;font-weight:1000}
.voter-chip.participant-tone,
.summary-voters .participant-tone{background:color-mix(in srgb,var(--participant-color) 22%,#17111f)!important;border:2px solid var(--participant-color)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 7px 18px color-mix(in srgb,var(--participant-color) 20%,transparent)}
:root[data-theme="light"] .voter-chip.participant-tone,
:root[data-theme="light"] .summary-voters .participant-tone{background:color-mix(in srgb,var(--participant-color) 24%,#fff)!important;color:#21162d!important;-webkit-text-fill-color:#21162d!important}
.answers-voters-list article{color:#fff!important;border-width:2px!important;background:linear-gradient(145deg,var(--answer-bg-a,#4b286d),var(--answer-bg-b,#261934))!important}
.answers-voters-list article.answer-tone-0{--answer-bg-a:#6242a8;--answer-bg-b:#2d2154}
.answers-voters-list article.answer-tone-1{--answer-bg-a:#176b79;--answer-bg-b:#123842}
.answers-voters-list article.answer-tone-2{--answer-bg-a:#8b3e58;--answer-bg-b:#492236}
.answers-voters-list article.answer-tone-3{--answer-bg-a:#8b5b16;--answer-bg-b:#4a3212}
.answers-voters-list article.answer-tone-4{--answer-bg-a:#256c4b;--answer-bg-b:#153b2c}
.answers-voters-list article.answer-tone-5{--answer-bg-a:#345f9f;--answer-bg-b:#1c345c}
.answers-voters-list article.answer-tone-6{--answer-bg-a:#8b4825;--answer-bg-b:#4b2919}
.answers-voters-list article.answer-tone-7{--answer-bg-a:#72417e;--answer-bg-b:#3d2448}
.answers-voters-list article.answer-tone-8{--answer-bg-a:#236f69;--answer-bg-b:#143d3a}
.answers-voters-list article.answer-tone-9{--answer-bg-a:#755b20;--answer-bg-b:#443613}
.answers-voters-list article.answer-tone-10{--answer-bg-a:#614e9a;--answer-bg-b:#352b58}
.answers-voters-list article.answer-tone-11{--answer-bg-a:#8b3941;--answer-bg-b:#4b2026}
.answers-voters-list article.correct,
:root[data-theme="light"] .answers-voters-list article.correct{--answer-bg-a:#0e7b55;--answer-bg-b:#06442f;background:linear-gradient(145deg,#0f8f61,#063d2b)!important;border-color:#7cf5bd!important;box-shadow:0 0 0 3px rgba(124,245,189,.18),0 18px 38px rgba(0,0,0,.25)!important}
.answers-voters-list article.correct .summary-answer>strong{color:#fff!important;-webkit-text-fill-color:#fff!important}
.answers-voters-list article.correct .summary-answer small{display:inline-flex;width:max-content;padding:4px 10px;border-radius:999px;background:#d9ffeb;color:#063d2b!important;-webkit-text-fill-color:#063d2b!important;font-weight:1000}
.answers-voters-list .summary-answer small,
.answers-voters-list .summary-voters>b,
.answers-voters-list .summary-voters em{color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important}
.answers-voters-list .summary-index{background:rgba(255,255,255,.18)!important;color:#fff!important}

/* منع تكبير Safari/Chrome عند التركيز في أي حقل داخل اللعبة */
@media (max-width:900px){input,textarea,select,.input{font-size:16px!important}}
html,body{touch-action:pan-x pan-y}
button,a,[role="button"],.option,.vote-option{touch-action:manipulation}

/* =========================================================
   v1.7.6 — تكبير ملخص جميع الإجابات واختيارات اللاعبين
   ========================================================= */
.answers-voters-summary{
  width:min(1320px,97vw)!important;
  height:min(84dvh,900px)!important;
  gap:20px!important;
  padding:clamp(14px,2vw,30px)!important;
}
.answers-voters-summary header span{
  padding:8px 18px!important;
  font-size:clamp(15px,1.25vw,20px)!important;
}
.answers-voters-summary h1{
  margin:10px 0 0!important;
  font-size:clamp(34px,4vw,64px)!important;
  line-height:1.15!important;
  font-weight:1000!important;
}
.answers-voters-list{
  gap:14px!important;
  padding:6px!important;
  scrollbar-gutter:stable both-edges;
}
.answers-voters-list article{
  grid-template-areas:"index answer voters"!important;
  grid-template-columns:54px minmax(0,1.2fr) minmax(240px,.8fr)!important;
  gap:18px!important;
  min-height:124px!important;
  padding:18px 20px!important;
  border-width:2px!important;
  border-radius:24px!important;
  box-shadow:0 14px 32px rgba(0,0,0,.22)!important;
}
.answers-voters-list .summary-index{
  width:48px!important;
  height:48px!important;
  font-size:19px!important;
  font-weight:1000!important;
  border:2px solid rgba(255,255,255,.24)!important;
}
.answers-voters-list .summary-answer{
  gap:8px!important;
  overflow:visible!important;
}
.answers-voters-list .summary-answer>strong{
  font-size:clamp(24px,2.25vw,36px)!important;
  line-height:1.25!important;
  letter-spacing:.01em!important;
  font-weight:1000!important;
}
.answers-voters-list .summary-answer small{
  margin-top:3px!important;
  padding:5px 10px!important;
  font-size:clamp(16px,1.25vw,20px)!important;
  line-height:1.35!important;
  font-weight:900!important;
}
.answers-voters-list .summary-author-label{
  background:rgba(0,0,0,.16)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:10px!important;
}
.answers-voters-list .summary-voters{
  gap:9px!important;
  padding-inline-start:16px!important;
  border-inline-start:2px solid rgba(255,255,255,.22)!important;
}
.answers-voters-list .summary-voters-label{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  font-size:clamp(16px,1.3vw,21px)!important;
  line-height:1.3!important;
  font-weight:1000!important;
}
.answers-voters-list .summary-voters>div{
  gap:8px!important;
}
.answers-voters-list .summary-voters span{
  min-height:38px!important;
  padding:8px 12px!important;
  display:inline-flex!important;
  align-items:center!important;
  font-size:clamp(16px,1.25vw,20px)!important;
  line-height:1.15!important;
  font-weight:1000!important;
}
.answers-voters-list .summary-voters em{
  font-size:clamp(16px,1.2vw,19px)!important;
  line-height:1.4!important;
  font-weight:800!important;
}
.answers-voters-list article.correct{
  border-width:3px!important;
  box-shadow:0 0 0 3px rgba(124,245,189,.16),0 16px 38px rgba(0,0,0,.26)!important;
}
@media(min-width:1400px){
  .answers-voters-list article{min-height:132px!important}
}
@media(max-width:760px){
  .answers-voters-summary{
    width:98vw!important;
    height:min(86dvh,800px)!important;
    gap:10px!important;
    padding:8px!important;
  }
  .answers-voters-summary h1{
    font-size:clamp(28px,8vw,42px)!important;
  }
  .answers-voters-list{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:3px!important;
  }
  .answers-voters-list article{
    grid-template-areas:
      "index answer"
      "index voters"!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:9px 12px!important;
    min-height:0!important;
    padding:13px!important;
    border-radius:18px!important;
  }
  .answers-voters-list .summary-index{
    width:40px!important;
    height:40px!important;
    font-size:16px!important;
    align-self:start!important;
  }
  .answers-voters-list .summary-answer>strong{
    font-size:clamp(24px,7vw,30px)!important;
  }
  .answers-voters-list .summary-answer small{
    font-size:clamp(15px,4.4vw,18px)!important;
  }
  .answers-voters-list .summary-voters{
    padding-inline-start:0!important;
    padding-top:9px!important;
    border-inline-start:0!important;
    border-top:2px solid rgba(255,255,255,.2)!important;
  }
  .answers-voters-list .summary-voters-label{
    font-size:clamp(15px,4.6vw,18px)!important;
  }
  .answers-voters-list .summary-voters span,
  .answers-voters-list .summary-voters em{
    font-size:clamp(15px,4.4vw,18px)!important;
  }
}


/* =========================================================
   v1.6.2 — فصل الإجابة الصحيحة عن الاختيارات وشعار الجوال
   ========================================================= */
.answers-voters-list article{
  grid-template-areas:"index answer voters"!important;
  grid-template-columns:44px minmax(0,1fr) minmax(150px,.68fr)!important;
  align-items:center!important;
}
.answers-voters-list .summary-index{grid-area:index!important}
.answers-voters-list .summary-answer{
  grid-area:answer!important;
  min-width:0!important;
  overflow:hidden!important;
}
.answers-voters-list .summary-answer>strong{
  display:block!important;
  min-width:0!important;
  overflow-wrap:anywhere!important;
  line-height:1.35!important;
}
.answers-voters-list .summary-answer small{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  width:fit-content!important;
  max-width:100%!important;
  margin-top:4px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  line-height:1.25!important;
}
.answers-voters-list .summary-voters{
  grid-area:voters!important;
  min-width:0!important;
  align-self:stretch!important;
  align-content:center!important;
  padding-inline-start:10px!important;
  border-inline-start:1px solid rgba(255,255,255,.18)!important;
}
.answers-voters-list .summary-voters>div{
  min-width:0!important;
}
@media(max-width:760px){
  .answers-voters-list article{
    grid-template-areas:
      "index answer"
      "index voters"!important;
    grid-template-columns:36px minmax(0,1fr)!important;
    gap:7px 10px!important;
    min-height:0!important;
  }
  .answers-voters-list .summary-voters{
    grid-column:auto!important;
    padding-inline-start:0!important;
    padding-top:7px!important;
    border-inline-start:0!important;
    border-top:1px solid rgba(255,255,255,.18)!important;
  }
}
@media(max-width:650px){
  .game-active .game-hud{
    display:grid!important;
    grid-template-rows:auto auto auto!important;
    align-content:start!important;
    overflow:visible!important;
  }
  .game-active .game-hud-main{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-areas:
      "brand brand"
      "start end"!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .game-active .game-hud-main>.hud-brand{
    grid-area:brand!important;
    position:relative!important;
    width:100%!important;
    min-height:38px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .game-active .hud-brand .logo{
    width:clamp(74px,22vw,98px)!important;
    max-height:34px!important;
    margin:0 auto!important;
  }
  .game-active .mobile-player-score{
    position:static!important;
    z-index:auto!important;
    display:inline-flex!important;
    align-self:center!important;
    justify-self:center!important;
    margin:4px auto 1px!important;
    transform:none!important;
    clear:both!important;
  }
  .game-active .game-hud-meta{
    position:static!important;
    margin-top:2px!important;
  }
}

/* v1.7.6 — أولوية تنسيق ملخص الجولة بعد قواعد التوافق القديمة */
.answers-voters-list article{
  grid-template-columns:54px minmax(0,1.2fr) minmax(240px,.8fr)!important;
  gap:18px!important;
}
.answers-voters-list .summary-answer{
  overflow:visible!important;
}
.answers-voters-list .summary-answer>strong{
  line-height:1.25!important;
}
.answers-voters-list .summary-answer small{
  margin-top:3px!important;
  line-height:1.35!important;
}
.answers-voters-list .summary-voters{
  padding-inline-start:16px!important;
  border-inline-start:2px solid rgba(255,255,255,.22)!important;
}
@media(max-width:760px){
  .answers-voters-list article{
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:9px 12px!important;
  }
  .answers-voters-list .summary-voters{
    padding-inline-start:0!important;
    padding-top:9px!important;
    border-inline-start:0!important;
    border-top:2px solid rgba(255,255,255,.2)!important;
  }
}

/* =========================================================
   v1.7.7 — كشف أكثر حيوية + حصاد الجولة + إبراز أفضل فبركة
   ========================================================= */
.answer-enter .staged-answer-reveal .voter-chip.voter-fly-in{
  animation-name:voterFlyToAnswer;
  animation-duration:.66s;
  animation-timing-function:cubic-bezier(.12,.9,.22,1);
}
@keyframes voterFlyToAnswer{
  0%{
    opacity:0;
    transform:translate(var(--voter-entry-x,96px),var(--voter-entry-y,28px)) scale(.58);
    filter:blur(3px) brightness(.75);
  }
  68%{
    opacity:1;
    transform:translate(-3px,-2px) scale(1.09);
    filter:blur(0) brightness(1.18);
  }
  100%{opacity:1;transform:none;filter:none}
}

.player-wait-status small{
  display:block;
  margin-top:8px;
  color:#efe6ff!important;
  opacity:1!important;
  font-size:clamp(17px,4.7vw,22px)!important;
  line-height:1.4;
  font-weight:900;
}
.player-round-recap{
  width:min(780px,96vw);
  height:min(64dvh,590px);
  min-height:0;
  margin:auto;
  padding:clamp(14px,2.5vw,26px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  align-content:center;
  gap:clamp(14px,2.4vh,24px);
  overflow:hidden;
  text-align:center;
}
.player-round-recap header span{
  display:inline-flex;
  padding:7px 15px;
  border:1px solid rgba(255,211,64,.32);
  border-radius:999px;
  color:#ffe57d;
  background:rgba(255,211,64,.11);
  font-size:clamp(13px,3.4vw,17px);
  font-weight:1000;
}
.player-round-recap h1{
  margin:8px 0 0;
  font-size:clamp(30px,7vw,48px);
  line-height:1.15;
}
.round-recap-grid{
  min-height:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:clamp(8px,2vw,14px);
}
.round-recap-grid article{
  min-width:0;
  min-height:0;
  padding:clamp(12px,2.4vw,22px) clamp(7px,1.5vw,14px);
  display:grid;
  place-content:center;
  gap:8px;
  border:2px solid rgba(255,255,255,.13);
  border-radius:22px;
  background:linear-gradient(155deg,rgba(78,44,122,.88),rgba(21,13,38,.92));
  box-shadow:0 16px 36px rgba(0,0,0,.22);
}
.round-recap-grid article>span{font-size:clamp(34px,8vw,58px);line-height:1}
.round-recap-grid article>strong{
  min-width:0;
  font-size:clamp(22px,5vw,36px);
  line-height:1.16;
  overflow-wrap:anywhere;
}
.round-recap-grid article>small{
  color:#d8cfe8;
  font-size:clamp(12px,3vw,17px);
  line-height:1.3;
  font-weight:850;
}
.round-recap-grid .recap-fooled{border-color:rgba(255,120,151,.42)}
.round-recap-grid .recap-truth.success{border-color:rgba(95,240,190,.55);background:linear-gradient(155deg,rgba(22,105,78,.82),rgba(12,42,34,.95))}
.round-recap-grid .recap-points{border-color:rgba(255,211,64,.48)}

.answers-voters-list article.top-fake:not(.correct){
  border-color:#ffd75d!important;
  box-shadow:0 0 0 2px rgba(255,215,93,.18),0 16px 38px rgba(0,0,0,.28)!important;
}
.answers-voters-list .summary-top-fake{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-top:3px;
  padding:5px 10px;
  border:1px solid rgba(255,222,113,.48);
  border-radius:999px;
  color:#2d1b00!important;
  -webkit-text-fill-color:#2d1b00!important;
  background:#ffe37a;
  font-size:clamp(14px,1.05vw,18px);
  line-height:1.2;
  font-weight:1000;
}

.personal-rival-line{
  margin-top:7px;
  padding-top:7px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:clamp(10px,1.35vw,14px);
}
.personal-rival-line>span{color:#ffd3df!important;font-weight:900}
.personal-rival-line>strong{font-size:inherit!important;color:#fff;line-height:1.3}
.personal-rival-line.clean>span{color:#91f2c7!important}
.summary-bottom-grid .share-mini-stats{grid-template-columns:repeat(4,minmax(0,1fr))}

@media(max-width:620px){
  .player-round-recap{width:98vw;height:min(60dvh,470px);padding:9px;gap:10px}
  .player-round-recap h1{font-size:clamp(27px,8vw,38px)}
  .round-recap-grid{gap:6px}
  .round-recap-grid article{padding:10px 5px;border-radius:17px;gap:6px}
  .round-recap-grid article>span{font-size:clamp(29px,9vw,42px)}
  .round-recap-grid article>strong{font-size:clamp(17px,5vw,23px)}
  .round-recap-grid article>small{font-size:clamp(10px,3vw,13px)}
  .answers-voters-list .summary-top-fake{font-size:clamp(13px,3.8vw,16px)}
  .personal-rival-line{font-size:11px}
}
@media(max-height:620px){
  .player-round-recap{height:min(58dvh,390px);padding:7px;gap:7px}
  .player-round-recap header span{padding:4px 10px;font-size:11px}
  .player-round-recap h1{margin-top:4px;font-size:clamp(23px,5vh,32px)}
  .round-recap-grid article{padding:6px 5px;gap:4px}
  .round-recap-grid article>span{font-size:clamp(25px,6vh,34px)}
  .round-recap-grid article>strong{font-size:clamp(16px,3.6vh,22px)}
}
@media(prefers-reduced-motion:reduce){
  .answer-enter .staged-answer-reveal .voter-chip.voter-fly-in{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
}

/* =========================================================
   v1.7.8 — الإجابة الصحيحة سوداء في ملخص جميع الإجابات
   ========================================================= */
.answers-voters-list article.correct,
:root[data-theme="light"] .answers-voters-list article.correct{
  --answer-bg-a:#000;
  --answer-bg-b:#000;
  background:#000!important;
  background-image:none!important;
}

/* =========================================================
   v1.7.15 — انضمام دائم + إدارة أسماء المشاركين
   ========================================================= */
.join-control-zone{
  border-color:rgba(250,204,21,.34);
  background:rgba(250,204,21,.07);
}
.join-control-zone>div>strong{color:var(--gold,#facc15)}
.join-policy-badge{
  flex:0 0 auto;
  padding:7px 11px;
  border:1px solid rgba(74,222,128,.32);
  border-radius:999px;
  color:#bbf7d0!important;
  background:rgba(22,163,74,.15);
  font-weight:900;
  white-space:nowrap;
}
.player-name-manager-modal{
  width:min(720px,calc(100vw - 20px));
  max-height:min(88dvh,760px);
  overflow-y:auto!important;
}
.player-name-edit-list{display:grid;gap:9px;margin:14px 0;min-height:0}
.player-name-edit-row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px;
  border:1px solid rgba(255,255,255,.12);
  border-inline-start:4px solid var(--participant-color,#8b5cf6);
  border-radius:15px;
  background:rgba(255,255,255,.045);
}
.player-name-edit-avatar{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:13px;
  background:rgba(255,255,255,.08);
  font-size:24px;
}
.player-name-edit-field{display:grid;gap:4px;min-width:0}
.player-name-edit-field label{color:var(--muted);font-size:11px;font-weight:850}
.player-name-edit-field .input{min-height:42px}
.player-name-empty{padding:20px;text-align:center}
@media(max-width:520px){
  .player-name-manager-modal{padding:14px}
  .player-name-edit-row{grid-template-columns:38px minmax(0,1fr);gap:7px;padding:7px}
  .player-name-edit-avatar{width:36px;height:36px;border-radius:11px;font-size:20px}
  .player-name-edit-row>[data-rename-player]{grid-column:2;width:100%;min-height:36px}
}

/* v1.8 — تسجيلات المشاركين وإعدادات قابلة للوصول على كامل شاشة الجوال. */
#modalRoot{position:relative;z-index:10050;isolation:isolate}
body.game-active .modal-backdrop{
  z-index:10050;
  min-height:100dvh;
  height:100dvh;
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  place-items:start center;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
}
body.game-active .game-settings-modal{
  width:min(720px,100%);
  height:min(900px,calc(100dvh - 24px));
  max-height:calc(100dvh - 24px)!important;
  min-height:0;
  margin:auto;
  box-sizing:border-box;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
  overflow:hidden!important;
}
body.game-active .game-settings-modal-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;min-width:0}
body.game-active .game-settings-modal-header h2{margin:0;text-align:center}
body.game-active .game-settings-modal-header .modal-sub{margin:4px 0 0}
body.game-active .game-settings-modal-header .close-modal{position:static;float:none;margin:0;flex:0 0 auto}
body.game-active .game-settings-scroll{min-height:0;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1px 2px 12px}
body.game-active .game-settings-footer{display:grid;grid-template-columns:minmax(0,1fr);padding-top:8px;border-top:1px solid var(--border);background:var(--surface);box-shadow:0 -12px 24px color-mix(in srgb,var(--surface) 80%,transparent)}
body.game-active .game-settings-footer .btn{width:100%;margin:0}
body.game-active .game-settings-modal .settings-control-zone,
body.game-active .game-settings-modal .settings-danger-zone{flex-shrink:0}
.vibration-settings-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sound-vibration-control{margin:12px 0 8px}
.sound-option-record{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 7px;color:#fff4c8;border-color:rgba(255,212,71,.55);background:linear-gradient(135deg,rgba(158,70,255,.72),rgba(90,30,184,.82));box-shadow:0 8px 20px rgba(76,22,155,.2)}
.sound-option-record span{grid-row:1 / span 2;font-size:20px}.sound-option-record b{font-size:.86rem}.sound-option-record small{grid-column:2;color:rgba(255,255,255,.78);font-size:.7rem}.sound-option-record.recording{filter:brightness(1.15);animation:participantRecordPulse 1s ease-in-out infinite alternate}
.sound-option-listen{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 7px;color:#dfffee;border-color:rgba(112,232,177,.42);background:linear-gradient(135deg,rgba(31,145,113,.72),rgba(18,93,83,.84))}
.sound-option-listen span{grid-row:1 / span 2;font-size:18px}.sound-option-listen b{font-size:.86rem}.sound-option-listen small{grid-column:2;color:rgba(255,255,255,.76);font-size:.7rem}.sound-option-listen:disabled{filter:saturate(.35);box-shadow:none}
@keyframes participantRecordPulse{to{box-shadow:0 0 0 4px rgba(255,212,71,.2),0 10px 26px rgba(76,22,155,.34)}}
.sound-modal{width:min(720px,calc(100vw - 20px));max-height:calc(100dvh - 20px);overflow-y:auto!important;overscroll-behavior:contain}
.custom-sound-recorder{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 9px;
  margin:7px 0 2px;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  background:rgba(255,255,255,.035);
}
.custom-sound-recorder .inline-note{flex:1 1 210px;margin:0;color:var(--muted);font-size:.73rem;line-height:1.35}
.custom-sound-visual{display:none;align-items:center;gap:7px;flex:1 1 170px;min-height:30px;padding:3px 7px;border:1px solid rgba(255,212,71,.28);border-radius:9px;background:rgba(9,5,27,.28)}
.custom-sound-visual.active{display:flex;box-shadow:inset 0 0 0 1px rgba(255,212,71,.07)}
.custom-sound-visual>strong{width:38px;color:#fff7cf;font-variant-numeric:tabular-nums;text-align:center;font-size:.86rem}
.custom-sound-meter{display:flex;align-items:center;justify-content:center;gap:3px;height:23px;flex:1;overflow:hidden}
.custom-sound-meter i{display:block;width:4px;height:20px;border-radius:999px;background:linear-gradient(180deg,#ffe576,#8ef0bd);transform:scaleY(var(--sound-level,.04));transform-origin:center;transition:transform 70ms linear;box-shadow:0 0 5px rgba(255,212,71,.18)}
.custom-sound-meter i:nth-child(3n+1){height:12px}.custom-sound-meter i:nth-child(3n+2){height:17px}.custom-sound-meter i:nth-child(4n){height:22px}
.custom-sound-scope{display:flex;align-items:center;gap:6px;flex:0 1 auto;margin:0;color:var(--muted);font-size:.72rem;font-weight:800}
.custom-sound-scope select{min-height:31px;max-width:150px;padding:4px 24px 4px 7px;border:1px solid rgba(255,255,255,.13);border-radius:8px;color:var(--text);background:var(--surface-2);font:inherit}
.custom-sound-account-note{flex:0 1 auto;margin:0;color:var(--muted);font-size:.71rem;line-height:1.35}
.player-sound-manager-modal{width:min(740px,calc(100vw - 20px));max-height:min(88dvh,760px);overflow-y:auto!important}
.player-sound-edit-list{display:grid;gap:9px;margin:14px 0;min-height:0}
.player-sound-edit-row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px;
  border:1px solid rgba(255,255,255,.12);
  border-inline-start:4px solid var(--participant-color,#8b5cf6);
  border-radius:15px;
  background:rgba(255,255,255,.045);
}
.player-sound-edit-field{display:grid;gap:4px;min-width:0}
.player-sound-edit-field strong{font-size:.92rem;overflow-wrap:anywhere}
.player-sound-edit-field label{color:var(--muted);font-size:11px;font-weight:850}
.player-sound-edit-field .input{min-height:42px}
.auth-divider{display:flex;align-items:center;gap:10px;margin:5px 0;color:var(--muted);font-size:.84rem}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:var(--border)}.google-login-button{text-decoration:none;text-align:center}
@media(max-width:520px){
  body.game-active .modal-backdrop{padding:6px 6px max(12px,env(safe-area-inset-bottom))}
  body.game-active .game-settings-modal{width:100%;height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)!important;padding:12px 10px}
  body.game-active .game-settings-modal-header h2{font-size:clamp(22px,7vw,28px)}
  body.game-active .game-settings-modal-header .modal-sub{display:none}
  body.game-active .game-settings-footer{padding-top:6px}
  .sound-modal{width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}
  .custom-sound-recorder{gap:5px 7px;padding:6px 7px}
  .custom-sound-scope{flex:1 1 auto;justify-content:space-between}.custom-sound-scope select{max-width:145px}
  .player-sound-manager-modal{padding:14px}
  .player-sound-edit-row{grid-template-columns:38px minmax(0,1fr);gap:7px;padding:7px}
  .player-sound-edit-row>[data-preview-player-sound]{grid-column:2;width:100%;min-height:36px}
  .player-sound-edit-row .player-name-edit-avatar{width:36px;height:36px;border-radius:11px;font-size:20px}
}

/* v1.9 r4 — نافذة الإعدادات تبقى داخل الشاشة المرئية حتى مع شريط المتصفح ولوحة المفاتيح. */
#modalRoot{position:fixed!important;inset:0!important;z-index:2147483000!important;isolation:isolate;pointer-events:none}
#modalRoot .modal-backdrop{z-index:2147483000!important;pointer-events:auto}
body.game-active .modal-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw;
  height:var(--game-settings-viewport-height,100dvh)!important;
  min-height:0!important;
  overflow:hidden!important;
  place-items:center!important;
  padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
}
body.game-active .game-settings-modal{
  width:min(720px,calc(100vw - 12px))!important;
  height:min(900px,calc(var(--game-settings-viewport-height,100dvh) - 12px))!important;
  max-height:calc(var(--game-settings-viewport-height,100dvh) - 12px)!important;
  margin:0!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
}
body.game-active .game-settings-scroll{min-height:0!important;overflow:auto!important;padding:2px 2px 10px!important}
body.game-active .game-settings-footer{position:relative!important;z-index:2;display:block!important;padding:max(7px,env(safe-area-inset-bottom)) 0 0!important}
body.game-active .game-settings-footer .btn{display:block!important;width:100%!important;min-height:48px!important}
.game-settings-header-actions{display:flex;align-items:center;gap:8px;justify-content:end;flex:0 0 auto}
.game-settings-header-actions .btn{min-height:42px!important;white-space:nowrap}

/* التسجيل والاستماع بطاقتان من المقاس نفسه لبقية خيارات الأصوات. */
.sound-option-record,.sound-option-listen{display:grid!important;min-height:44px!important;visibility:visible!important;opacity:1!important}
.sound-vibration-control.vibration-visible{display:flex!important;visibility:visible!important;opacity:1!important}
@media(max-width:520px){
  body.game-active .game-settings-modal{width:calc(100vw - 8px)!important;height:calc(var(--game-settings-viewport-height,100dvh) - 8px)!important;max-height:calc(var(--game-settings-viewport-height,100dvh) - 8px)!important;padding:10px!important}
  .game-settings-header-actions{gap:6px}.game-settings-header-actions .btn{min-height:38px!important;padding-inline:10px!important}
  .sound-vibration-control.vibration-visible{align-items:center!important}
}

/* أنماط جولات فبركها الخاصة: واضحة، قصيرة، ولا تخفي محتوى الجولة على الجوال. */
.round-mode-banner,.personal-challenge{display:flex;align-items:center;gap:10px;max-width:760px;margin:10px auto;padding:12px 14px;border:1px solid rgba(255,212,71,.42);border-radius:17px;background:linear-gradient(135deg,rgba(103,43,177,.56),rgba(32,15,75,.78));box-shadow:0 10px 24px rgba(28,7,62,.17)}
.round-mode-banner>span,.personal-challenge>span{font-size:25px;line-height:1}.round-mode-banner>div,.personal-challenge>div{display:grid;gap:2px;min-width:0;flex:1}.round-mode-banner strong,.personal-challenge strong{color:#fff7d2}.round-mode-banner small,.personal-challenge small{color:rgba(255,255,255,.8);line-height:1.5}.round-mode-banner>b,.personal-challenge>b{padding:5px 9px;border-radius:999px;background:#ffd43d;color:#25122d;font-size:.85rem;white-space:nowrap}.round-mode-banner.compact{margin:0 0 9px;padding:9px 11px;border-radius:13px}.round-mode-banner.compact>span{font-size:21px}.round-mode-banner.two-truths{border-color:rgba(255,212,71,.78);background:linear-gradient(135deg,rgba(141,59,239,.86),rgba(62,23,130,.9))}.personal-challenge{border-color:rgba(83,222,183,.48);background:linear-gradient(135deg,rgba(19,105,96,.66),rgba(23,48,95,.76))}.personal-challenge.completed{border-color:#91f0c6;background:linear-gradient(135deg,rgba(26,136,91,.82),rgba(24,76,112,.86))}.personal-challenge.missed{opacity:.72;filter:saturate(.65)}
.result-feature-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.result-feature-badges span{padding:5px 8px;border:1px solid rgba(255,230,133,.48);border-radius:999px;background:rgba(255,212,71,.13);color:#fff0ab;font-size:.76rem;font-weight:800}
@media(max-width:520px){.round-mode-banner,.personal-challenge{margin:8px 0;padding:10px 11px;border-radius:14px}.round-mode-banner small,.personal-challenge small{font-size:.76rem}.round-mode-banner>b,.personal-challenge>b{padding:4px 7px;font-size:.75rem}.result-feature-badges span{font-size:.7rem}}

/* v1.9 r5 — الوصول إلى أصوات المشاركين من أول إعداد للمضيف. */
body.game-active .participant-sounds-shortcut{margin:2px 0 10px;border-color:rgba(255,212,71,.52);background:linear-gradient(135deg,rgba(108,47,185,.34),rgba(24,68,94,.36));box-shadow:0 9px 20px rgba(33,10,78,.16)}
body.game-active .participant-sounds-shortcut .btn{min-width:128px}
.player-sound-edit-row{grid-template-columns:48px minmax(0,1fr) auto!important;align-items:start}
.player-sound-edit-field small{color:var(--muted);font-size:.75rem;line-height:1.45}
.player-sound-row-actions{display:grid;grid-template-columns:1fr;gap:6px;min-width:96px}
.player-sound-row-actions .btn{min-height:38px}
@media(max-width:520px){
  body.game-active .participant-sounds-shortcut{align-items:center!important}
  body.game-active .participant-sounds-shortcut span{display:block!important;font-size:.72rem!important}
  body.game-active .participant-sounds-shortcut .btn{min-width:106px;padding-inline:8px}
  .player-sound-edit-row{grid-template-columns:38px minmax(0,1fr)!important}
  .player-sound-row-actions{grid-column:2;grid-template-columns:1fr 1fr;min-width:0}
  .player-sound-row-actions .btn{width:100%;min-height:38px}
}

/* r5: تبقى نافذة إعدادات المضيف داخل الشاشة ويظل الحفظ ظاهرًا دائمًا. */
body.game-active .game-settings-modal{
  display:grid!important;
  grid-template-rows:min-content minmax(0,1fr) min-content!important;
  min-height:0!important;
  align-self:center!important;
}
body.game-active .game-settings-scroll{
  display:block!important;
  min-height:0!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(170,105,255,.72) rgba(255,255,255,.06);
  padding-inline-end:6px!important;
}
body.game-active .game-settings-footer{
  min-height:56px;
  flex-shrink:0!important;
}
body.game-active .game-settings-footer .btn{position:relative!important;z-index:3}
@media(max-width:520px){
  body.game-active .game-settings-footer{min-height:calc(56px + env(safe-area-inset-bottom))}
}

/* r9: جميع مفاتيح اللعب ظاهرة في ثلاث صفوف بدل قائمة طويلة تُفهم خطأً على أنها مقصوصة. */
body.game-active .game-settings-modal .settings-toggle-stack{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
  padding:7px!important;
  overflow:visible!important;
}
body.game-active .game-settings-modal .settings-toggle-stack .toggle-row,
body.game-active .game-settings-modal .settings-toggle-stack .toggle-row + .toggle-row{
  min-width:0!important;
  min-height:56px!important;
  margin:0!important;
  padding:7px 8px!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.035)!important;
}
body.game-active .game-settings-modal .settings-toggle-stack .toggle-row strong{font-size:.82rem;line-height:1.35}
body.game-active .game-settings-scroll::-webkit-scrollbar{width:8px}
body.game-active .game-settings-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.055);border-radius:999px}
body.game-active .game-settings-scroll::-webkit-scrollbar-thumb{background:rgba(170,105,255,.72);border-radius:999px}
.settings-structural-editor{display:grid;gap:10px;margin:9px 0;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(10,6,28,.24)}
.settings-structural-editor.locked{border-color:rgba(255,212,71,.2)}
.settings-structural-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.settings-structural-grid>label,.modal-team-name-wrap{display:grid;gap:4px;min-width:0;color:var(--muted);font-size:.74rem;font-weight:800}
.settings-structural-grid .input{width:100%;min-height:38px!important}
.structural-team-toggle{min-height:52px!important;margin:0!important;padding:7px 8px!important;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.035)}
.modal-team-name-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.modal-category-picker{display:grid;gap:7px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
.modal-category-picker .category-picker-head{display:flex;align-items:end;justify-content:space-between;gap:8px}
.modal-category-picker .category-picker-head small{display:block;color:var(--muted);font-size:.71rem;font-weight:600}
.modal-category-picker [data-modal-category-count]{color:#ffe18a;font-size:.76rem;white-space:nowrap}
.modal-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.category-preset-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:9px 0}.category-preset{min-height:42px;padding:6px;border:1px solid rgba(255,212,71,.34);border-radius:11px;background:linear-gradient(135deg,rgba(255,212,71,.13),rgba(147,90,255,.17));color:var(--text);font:inherit;font-size:.76rem;font-weight:850;cursor:pointer}.category-preset:hover,.category-preset:focus-visible{border-color:#ffe18a;transform:translateY(-1px)}.category-preset span{margin-inline-end:4px}
.modal-category-grid .category-choice{display:flex;align-items:center;justify-content:center;gap:4px;min-height:38px;padding:5px 6px;border-radius:9px;font-size:.7rem}
.modal-category-grid .category-choice strong{font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-structural-editor :disabled{opacity:.62;cursor:not-allowed}
.setup-card>.settings-toggle-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.setup-card>.settings-toggle-stack .toggle-row,.setup-card>.settings-toggle-stack .toggle-row+.toggle-row{min-height:62px;margin:0;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:11px}
@media(max-width:520px){
  body.game-active .game-settings-modal .settings-toggle-stack{grid-template-columns:1fr!important}
  body.game-active .game-settings-modal .settings-toggle-stack .toggle-row{min-height:50px!important}
  .settings-structural-grid,.modal-team-name-grid{grid-template-columns:1fr}
  .modal-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .setup-card>.settings-toggle-stack{grid-template-columns:1fr}
}

/* r11: سطح تمرير واحد يمنع قص نهاية الإعدادات، مع حفظ ثابت في الرأس فقط. */
body.game-active .game-settings-modal{
  display:block!important;
  height:min(900px,calc(var(--game-settings-viewport-height,100dvh) - 12px))!important;
  max-height:calc(var(--game-settings-viewport-height,100dvh) - 12px)!important;
  overflow-x:hidden!important;
  overflow-y:scroll!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  scrollbar-gutter:stable both-edges!important;
  scrollbar-width:auto!important;
  scrollbar-color:#a86aff rgba(255,255,255,.08)!important;
}
body.game-active .game-settings-modal-header{
  position:sticky!important;
  top:-1px!important;
  z-index:20!important;
  margin:-2px -2px 8px!important;
  padding:3px 2px 9px!important;
  border-bottom:1px solid rgba(255,255,255,.1)!important;
  background:linear-gradient(180deg,var(--surface) 76%,color-mix(in srgb,var(--surface) 92%,transparent))!important;
}
body.game-active .game-settings-scroll{
  display:block!important;
  min-height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding:1px 2px max(22px,env(safe-area-inset-bottom))!important;
  scrollbar-gutter:auto!important;
}
body.game-active .game-settings-modal::-webkit-scrollbar{width:12px!important}
body.game-active .game-settings-modal::-webkit-scrollbar-track{background:rgba(255,255,255,.07);border-radius:999px}
body.game-active .game-settings-modal::-webkit-scrollbar-thumb{background:#a86aff;border:3px solid var(--surface);border-radius:999px}

/* تعديل الاسم والصوت في بطاقة واحدة لكل مشارك. */
.participant-manager-modal{width:min(820px,calc(100vw - 20px));max-height:min(90dvh,820px);overflow-y:auto!important}
.participant-edit-list{display:grid;gap:9px;margin:14px 0;min-height:0}
.participant-edit-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:start;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.12);border-inline-start:4px solid var(--participant-color,#8b5cf6);border-radius:15px;background:rgba(255,255,255,.045)}
.participant-edit-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;min-width:0}
.participant-edit-field{display:grid;gap:4px;min-width:0;color:var(--muted);font-size:11px;font-weight:850}
.participant-edit-field .input{width:100%;min-height:42px}
.participant-edit-fields>[data-participant-feedback]{grid-column:1/-1;color:var(--muted);font-size:.75rem;line-height:1.4}
.participant-row-actions{display:grid;grid-template-columns:1fr;gap:6px;min-width:118px}
.participant-row-actions .btn{width:100%;min-height:40px}
@media(max-width:620px){
  .participant-manager-modal{width:calc(100vw - 12px);padding:14px}
  .participant-edit-row{grid-template-columns:38px minmax(0,1fr);gap:7px;padding:8px}
  .participant-edit-row .player-name-edit-avatar{width:36px;height:36px;border-radius:11px;font-size:20px}
  .participant-edit-fields{grid-template-columns:1fr}
  .participant-edit-fields>[data-participant-feedback]{grid-column:1}
  .participant-row-actions{grid-column:2;grid-template-columns:1fr 1fr;min-width:0}
}

/* r12: جولة حقيقتين — إشعار واحد، اختيار تلقائي، وكشف الحقيقتين معًا. */
body.game-active .round-mode-banner.two-truths{max-width:520px;margin:5px auto;padding:7px 11px;border-radius:999px;box-shadow:none}
body.game-active .round-mode-banner.two-truths>span{font-size:19px}
body.game-active .round-mode-banner.two-truths small{font-size:.72rem;line-height:1.25}
body.game-active .round-mode-banner.two-truths>b{padding:3px 7px;font-size:.72rem}
.two-truth-answer-note{color:#ffe9a6!important;font-weight:800}
.two-truth-vote-actions.auto-submit{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;width:min(920px,100%);margin:8px auto 0;padding:8px 12px;border:1px solid rgba(255,212,71,.38);border-radius:12px;background:rgba(105,48,177,.2);text-align:center}
.two-truth-vote-actions.auto-submit span{color:#fff2b8;font-weight:950}
.two-truth-vote-actions.auto-submit small{color:var(--muted);font-size:.76rem}
.two-truth-reveal-stage{display:grid;align-content:center;gap:14px;min-height:0;width:min(1100px,100%);margin:auto;text-align:center}
.two-truth-reveal-stage>header{display:grid;gap:3px}.two-truth-reveal-stage>header span{color:#ffe78d;font-weight:950}.two-truth-reveal-stage>header h1{margin:0;font-size:clamp(28px,4vw,48px)}
.two-truth-reveal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.two-truth-reveal-card{display:grid;align-content:center;gap:10px;min-height:260px;padding:18px;border:2px solid rgba(255,221,93,.72);border-radius:22px;background:linear-gradient(145deg,#090909,#1d1627);box-shadow:0 16px 44px rgba(0,0,0,.3)}
.two-truth-reveal-card .answer-type{position:static;justify-self:center}.two-truth-reveal-card h2{margin:0;color:#fff;font-size:clamp(24px,3vw,40px);line-height:1.35}.two-truth-voter-count{color:#ffe690;font-weight:900}.two-truth-reveal-card .answer-voters{min-height:42px}
@media(max-width:700px){
  body.game-active.player-active.two-truth-voting{height:auto!important;min-height:100dvh!important;overflow-x:hidden!important;overflow-y:auto!important}
  body.game-active.player-active.two-truth-voting #app{height:auto!important;max-height:none!important;min-height:100dvh!important;overflow:visible!important}
  body.game-active.player-active.two-truth-voting .game-shell.player-shell{display:block!important;height:auto!important;max-height:none!important;min-height:100dvh!important;overflow:visible!important;padding-bottom:max(18px,env(safe-area-inset-bottom))!important}
  body.game-active.player-active.two-truth-voting .two-truth-vote-grid{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:none!important;height:auto!important;max-height:none!important;overflow:visible!important;gap:8px!important}
  body.game-active.player-active.two-truth-voting .two-truth-vote-grid .vote-option{min-height:72px!important;height:auto!important;padding:12px 10px!important;font-size:16px!important;-webkit-line-clamp:unset!important}
  body.game-active.player-active.two-truth-voting .two-truth-vote-grid .vote-option b{-webkit-line-clamp:unset!important}
  body.game-active .round-mode-banner.two-truths{border-radius:13px;margin:5px 0;padding:7px 9px}
  body.game-active .round-mode-banner.two-truths small{display:block;font-size:.69rem}
  .two-truth-vote-actions.auto-submit{position:sticky;bottom:max(4px,env(safe-area-inset-bottom));z-index:12;background:rgba(28,12,57,.96);backdrop-filter:blur(10px)}
  .two-truth-reveal-stage{align-content:start;gap:9px;overflow-y:auto;padding:3px 0 12px}
  .two-truth-reveal-grid{grid-template-columns:1fr;gap:8px}
  .two-truth-reveal-card{min-height:150px;padding:12px;border-radius:16px}.two-truth-reveal-card h2{font-size:clamp(20px,6vw,28px)}
}

/* r14: مدخل الفبركة يبقى ظاهرًا على الجوال، والتحدي الشخصي قابل للطي. */
.personal-challenge{display:block}.personal-challenge summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}.personal-challenge summary::-webkit-details-marker{display:none}.personal-challenge summary>span{font-size:25px}.personal-challenge summary>div{display:grid;gap:2px;min-width:0;flex:1}.personal-challenge summary strong{color:#fff7d2}.personal-challenge summary small{color:rgba(255,255,255,.76);font-size:.72rem}.personal-challenge summary>b{padding:5px 9px;border-radius:999px;background:#ffd43d;color:#25122d}.personal-challenge>p{margin:9px 35px 0 0;color:#fff;line-height:1.55;font-weight:800}
.answers-voters-summary{max-height:100%;overflow:hidden}.answers-voters-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-inline-end:5px}.answers-voters-list .summary-author-label{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:4px!important}.answers-voters-list .summary-voters>div{display:flex!important;flex-wrap:wrap!important;gap:5px!important}.answers-voters-list .summary-voters span{display:inline-flex!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
.round-commentary{display:flex;align-items:center;justify-content:center;gap:10px;width:min(720px,100%);margin:5px auto 9px;padding:9px 13px;border:1px solid rgba(255,216,92,.38);border-radius:15px;background:rgba(255,216,92,.1)}.round-commentary>span{font-size:28px}.round-commentary>div{display:grid;text-align:start}.round-commentary small{color:var(--muted)}
.personal-personality-line{display:grid;gap:3px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.14)}.personal-personality-line small{color:var(--muted)}
.simple-scoreboard .scoreboard-row:first-child .scoreboard-name::after{content:'👑';display:inline-block;margin-inline-start:7px;filter:drop-shadow(0 4px 7px rgba(255,204,61,.34));animation:leaderCrownFloat 1.7s ease-in-out infinite}@keyframes leaderCrownFloat{50%{transform:translateY(-5px) rotate(-6deg)}}
@media(max-width:700px){body.game-active.player-active{height:auto!important;min-height:100dvh!important;overflow-y:auto!important}body.game-active.player-active #app,.game-shell.player-shell{height:auto!important;max-height:none!important;min-height:100dvh!important;overflow:visible!important}.mobile-answer-composer{position:sticky!important;bottom:max(6px,env(safe-area-inset-bottom));z-index:30;margin-top:8px!important;padding:12px!important;background:rgba(25,11,50,.97)!important;box-shadow:0 -12px 36px rgba(6,2,14,.58);backdrop-filter:blur(14px)}.mobile-answer-composer .inline-note{margin:4px 0!important;font-size:.72rem!important;line-height:1.3!important}.mobile-answer-composer .input{min-height:46px!important}.mobile-answer-composer .btn{min-height:48px!important}.personal-challenge{padding:8px 10px!important;margin:6px 0!important}.personal-challenge:not([open]){max-height:56px;overflow:hidden}.personal-challenge>p{margin:7px 30px 0 0;font-size:.78rem}.answers-voters-summary{height:auto!important;max-height:none!important;overflow:visible!important}.answers-voters-list{max-height:none!important;overflow:visible!important}.answers-voters-list .participant-inline-name{display:inline-flex!important;margin:2px!important}.answers-voters-list .summary-voters>div{gap:6px!important}}
.setup-final-actions{display:grid;grid-template-columns:auto minmax(220px,1fr);gap:10px;margin-top:12px}.setup-final-actions .btn{margin:0}@media(max-width:620px){.setup-final-actions{grid-template-columns:1fr}.setup-final-actions #createBtn{grid-row:1}}
\n\n/* hotfix.4 — زر الإعدادات أيقونة فقط، وإعدادات المشارك داخل الجلسة. */\n.settings-icon-only{inline-size:44px!important;min-inline-size:44px!important;block-size:44px!important;padding:0!important;display:inline-grid!important;place-items:center!important;font-size:1.22rem!important}\n.player-inline-profile-settings{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;margin:10px 0 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}\n.player-settings-avatar{inline-size:54px;block-size:54px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface)}\n.player-settings-avatar img{inline-size:100%;block-size:100%;object-fit:cover}\n.player-inline-profile-settings>div{display:grid;gap:3px}.player-inline-profile-settings small{color:var(--muted);line-height:1.45}\n@media(max-width:640px){.player-inline-profile-settings{grid-template-columns:auto 1fr}.player-inline-profile-settings .btn{grid-column:1/-1;width:100%}}\n

/* =========================================================
   v3.1.0 - responsive Fbrkha game surfaces
   ========================================================= */
.question-visual {
  margin: clamp(10px, 2vh, 20px) auto clamp(8px, 1.5vh, 16px);
  display: grid;
  place-items: center;
  width: min(100%, 520px);
}
.question-visual-img {
  display: block;
  width: auto;
  max-width: min(100%, 460px);
  max-height: clamp(100px, 24vh, 230px);
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}
.question-visual-flag .question-visual-img {
  max-width: min(68vw, 360px);
  max-height: clamp(92px, 20vh, 190px);
}
body.game-active .question-stage,
body.game-active .host-voting-content {
  min-height: 0;
  max-height: none;
}
body.game-active .question-stage h1,
body.game-active .host-voting-question h1,
body.game-active .mobile-question h1 {
  font-size: clamp(24px, min(4.6vw, 5.5vh), 68px);
  line-height: 1.42;
}
@media (min-width: 800px) and (max-height: 850px) {
  body.game-active .question-stage {
    padding-block: clamp(10px, 2.2vh, 22px);
    gap: 4px;
  }
  body.game-active .question-stage p { display: none; }
  body.game-active .question-stage h1 { margin-block: 8px; }
  body.game-active .question-visual-img { max-height: min(18vh, 150px); }
  body.game-active .host-voting-content { gap: clamp(6px, 1.4vh, 12px); }
}
@media (max-width: 700px) {
  body.game-active .mobile-question {
    margin: clamp(10px, 2.2vh, 20px) auto clamp(8px, 1.7vh, 16px);
    padding-inline: 10px;
  }
  body.game-active .mobile-question h1 {
    margin-top: 8px;
    font-size: clamp(22px, 6.3vw, 38px);
    line-height: 1.42;
  }
  body.game-active .question-visual { margin-block: 8px; }
  body.game-active .question-visual-img { max-height: min(19vh, 150px); }
  body.game-active .answer-entry-card {
    position: static !important;
    inset: auto !important;
    width: min(720px, 100%) !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 auto max(12px, env(safe-area-inset-bottom)) !important;
  }
  body.game-active.text-entry-focused .answer-input {
    min-height: 52px;
    font-size: 18px;
  }
}

/* fbrkha-category-presets-v311 — paid-quality category selection */
.fbrkha-category-presets-v311{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))!important;gap:10px!important;margin:12px 0 18px!important}
.fbrkha-category-presets-v311 .category-preset{min-height:64px!important;padding:10px 12px!important;border-radius:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 88%,#7d4cff 12%),var(--surface-2))!important;border:1px solid color-mix(in srgb,var(--border) 72%,#9d78ff 28%)!important;font-size:.86rem!important;box-shadow:0 8px 22px rgba(8,4,18,.12)!important}
.fbrkha-category-presets-v311 .category-preset>span{font-size:1.25rem!important;margin:0!important}.fbrkha-category-presets-v311 .category-preset>b{font-weight:950}
.fbrkha-category-presets-v311 .category-preset.primary-preset{border-color:rgba(255,212,61,.54)!important;background:linear-gradient(145deg,rgba(255,212,61,.14),rgba(122,76,255,.15))!important}
.fbrkha-category-presets-v311 .category-preset.active{border-color:#ffd43d!important;box-shadow:0 0 0 3px rgba(255,212,61,.14),0 10px 26px rgba(8,4,18,.16)!important;transform:translateY(-1px)}
.fbrkha-category-presets-v311 .category-preset-clear{opacity:.78;background:var(--surface-2)!important}
.category-choice-grid{align-items:stretch}.category-choice-wrap{position:relative;min-width:0;border-radius:18px}.category-choice-wrap .category-choice{width:100%;height:100%;padding-inline-start:48px!important}.category-choice-favorite-btn{position:absolute;inset-inline-start:10px;top:10px;z-index:3;width:34px;height:34px;border-radius:11px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 92%,transparent);color:#8d8796;display:grid;place-items:center;font-size:20px;line-height:1;cursor:pointer;transition:.16s ease}.category-choice-favorite-btn:hover,.category-choice-favorite-btn:focus-visible{transform:translateY(-1px);border-color:#ffd43d;outline:none}.category-choice-favorite-btn.active{color:#2b1b00;background:#ffd43d;border-color:#ffd43d;box-shadow:0 6px 16px rgba(255,212,61,.28)}
.question-visual-flag{width:min(100%,460px);padding:12px 14px;border:1px solid color-mix(in srgb,var(--border) 72%,#fff 28%);border-radius:24px;background:color-mix(in srgb,var(--surface-2) 94%,#fff 6%);box-shadow:0 18px 44px rgba(0,0,0,.2)}.question-visual-flag .question-visual-img{width:min(100%,400px)!important;max-width:400px!important;max-height:min(25vh,220px)!important;border-radius:14px!important;box-shadow:none!important;background:#fff;padding:4px}
@media(max-width:640px){.fbrkha-category-presets-v311{grid-template-columns:repeat(2,minmax(0,1fr))!important}.fbrkha-category-presets-v311 .category-preset{min-height:56px!important}.category-choice-favorite-btn{width:38px;height:38px}}


/* v3.2.24 — Mobile-first points card: full sentence, no clipping/ellipsis. */
@media (max-width: 650px) {
  body.game-active .mobile-player-score {
    display: flex !important;
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: 430px !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 7px 12px !important;
    border-radius: 14px !important;
    gap: 7px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35 !important;
    text-align: center !important;
    flex-wrap: wrap !important;
    overflow-wrap: anywhere !important;
  }
  body.game-active .mobile-player-score strong {
    flex: 0 0 auto !important;
    line-height: 1.2 !important;
  }
}