/*
Theme Name: مسابقة الحروف
Theme URI: https://example.com/
Author: Hassan
Description: قالب ووردبريس عربي مستقل لتشغيل مسابقة الحروف بلوحة سداسية تفاعلية، فرق ونقاط ومؤقت وبنك أسئلة كامل.
Version: 3.4.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: letters-competition
Domain Path: /languages
Tags: rtl-language-support, custom-background, full-width-template
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --purple-950: #25103f;
  --purple-900: #35165b;
  --purple-800: #4a2378;
  --purple-700: #63349a;
  --purple-600: #7744ad;
  --purple-300: #c7a5ef;
  --orange: #ff7657;
  --orange-dark: #df4f34;
  --teal: #10aaa4;
  --teal-dark: #07847f;
  --yellow: #ffd342;
  --white: #fffdfd;
  --ink: #2f174e;
  --muted: #cbbbe0;
  --line: rgba(255, 255, 255, .15);
  --shadow: 0 24px 70px rgba(29, 8, 52, .34);
  --radius: 28px;
  --team-0: var(--orange);
  --team-1: var(--teal);
  --team-2: #ed4e91;
  --team-3: #f2c84b;
  --team-4: #5b8def;
  --team-5: #74c35a;
  --team-6: #9c6ade;
  --team-7: #e68732;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--white);
  font-family: Tahoma, Arial, system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 118, 87, .24), transparent 25%),
    radial-gradient(circle at 88% 82%, rgba(16, 170, 164, .22), transparent 28%),
    linear-gradient(135deg, #2b104b 0%, #51217d 48%, #35125d 100%);
}
body::before,
body::after {
  content: "";
  position: fixed;
  width: 360px;
  height: 315px;
  opacity: .15;
  pointer-events: none;
  background-image: linear-gradient(30deg, transparent 46%, rgba(255,255,255,.28) 47% 53%, transparent 54%);
  -webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  z-index: -1;
}
body::before { right: -150px; top: 110px; transform: rotate(12deg); }
body::after { left: -160px; bottom: -80px; transform: rotate(-12deg); }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .42; cursor: not-allowed; }

.letters-competition-site,
.show-app { min-height: 100vh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 88px;
  padding: 14px clamp(16px, 3vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: rgba(43, 16, 75, .74);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(18, 4, 36, .16);
}
.brand { display: flex; align-items: center; gap: 15px; min-width: 0; }
.brand-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  position: relative;
  color: var(--ink);
  font-size: 31px;
  font-weight: 900;
  background: linear-gradient(145deg, #fff, #f2e8ff);
  -webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  filter: drop-shadow(0 8px 13px rgba(0,0,0,.2));
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  -webkit-clip-path: inherit;
  clip-path: inherit;
  background: linear-gradient(135deg, var(--orange), var(--yellow), var(--teal));
}
.brand-mark span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: #fff;
  -webkit-clip-path: inherit;
  clip-path: inherit;
}
.brand h1 { margin: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 900; }
.brand p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.topbar-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.site-main-menu {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.top-actions { display: flex; align-items: center; gap: 9px; min-width: 0; }
.icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  transition: transform .2s ease, background .2s ease;
}
.icon-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.16); }

.supervisor-login-btn {
  min-height: 44px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  box-shadow: 0 10px 24px rgba(223,79,52,.22), inset 0 1px rgba(255,255,255,.2);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.supervisor-login-btn:hover,
.supervisor-login-btn:focus {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 13px 28px rgba(223,79,52,.3), inset 0 1px rgba(255,255,255,.24);
  outline: none;
}
.supervisor-login-icon { font-size: 17px; line-height: 1; }

.layout {
  width: min(1700px, 100%);
  margin: 0 auto;
  padding: clamp(14px, 2vw, 28px);
  display: grid;
  grid-template-columns: minmax(650px, 1fr) 350px;
  gap: 20px;
  align-items: start;
}
.card {
  position: relative;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.board-card {
  min-height: calc(100vh - 145px);
  padding: clamp(20px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background:
    linear-gradient(138deg, rgba(255,118,87,.98) 0 22%, transparent 22% 78%, rgba(16,170,164,.98) 78%),
    linear-gradient(145deg, #6c3da8, #472276 54%, #5a2e90);
}
.board-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .23;
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,.8) 0 2px, transparent 3px),
    linear-gradient(30deg, transparent 48%, rgba(255,255,255,.12) 49% 51%, transparent 52%);
  background-size: 44px 44px, 90px 78px;
}
.board-card::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: -1;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  pointer-events: none;
}
.arena-decoration {
  position: absolute;
  width: 170px;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.12);
  -webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  z-index: -1;
}
.arena-decoration-one { top: 11%; right: -75px; transform: rotate(9deg); }
.arena-decoration-two { bottom: 4%; left: -70px; transform: rotate(-14deg); }

.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 4px 18px;
}
.board-toolbar h2 { margin: 4px 0 0; font-size: clamp(20px, 2vw, 28px); }
.eyebrow { color: #ffe78f; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.board-stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.board-stats span {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #eadcf8;
  background: rgba(44,18,75,.34);
  backdrop-filter: blur(8px);
  font-size: 12px;
}
.board-stats b { color: #fff; }

.team-edge-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 0 3% 10px;
}
.edge-label {
  min-width: 145px;
  padding: 9px 16px;
  border-radius: 999px;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 10px 25px rgba(24,7,45,.22);
}
.edge-orange { color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-dark)); }
.edge-teal { color: #fff; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); }

.board-frame {
  position: relative;
  flex: 1;
  min-height: 540px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  width: min(100%, 1050px);
  padding: clamp(22px, 4vw, 52px);
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(42, 17, 71, .34);
  box-shadow: inset 0 0 55px rgba(30,9,54,.24), 0 22px 45px rgba(32,10,57,.22);
  backdrop-filter: blur(6px);
}
.board-frame::before {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 24px;
  border: 1px dashed rgba(255,255,255,.18);
}
.board-color {
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 16%;
  opacity: .92;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.15));
}
.board-color-orange {
  right: 1%;
  background: linear-gradient(180deg, #ff8a6f, var(--orange-dark));
  -webkit-clip-path: polygon(34% 0, 100% 10%, 100% 90%, 34% 100%, 0 50%);
  clip-path: polygon(34% 0, 100% 10%, 100% 90%, 34% 100%, 0 50%);
}
.board-color-teal {
  left: 1%;
  background: linear-gradient(180deg, #20c7bf, var(--teal-dark));
  -webkit-clip-path: polygon(0 10%, 66% 0, 100% 50%, 66% 100%, 0 90%);
  clip-path: polygon(0 10%, 66% 0, 100% 50%, 66% 100%, 0 90%);
}

.letters-board {
  --columns: 7;
  position: relative;
  z-index: 2;
  width: min(100%, 860px);
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(68px, 1fr));
  gap: 7px 5px;
  align-items: center;
  direction: rtl;
  padding: 16px 22px 35px;
}
.letter-cell {
  --row-shift: 0px;
  position: relative;
  aspect-ratio: 1.03 / 1;
  display: grid;
  place-items: center;
  border: 0;
  color: var(--purple-900);
  background: #fff;
  font-size: clamp(25px, 2.5vw, 38px);
  font-weight: 900;
  -webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  transform: translateY(var(--row-shift));
  filter: drop-shadow(0 8px 0 #4d247e) drop-shadow(0 13px 14px rgba(31,7,58,.28));
  transition: transform .18s ease, filter .18s ease, color .18s ease;
}
.letter-cell::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  background: linear-gradient(145deg, #fff, #f4ecff);
  -webkit-clip-path: inherit;
  clip-path: inherit;
}
.letter-cell:hover:not(:disabled) {
  transform: translateY(calc(var(--row-shift) - 5px)) scale(1.045);
  filter: drop-shadow(0 9px 0 #5b2e8f) drop-shadow(0 18px 20px rgba(31,7,58,.34));
}
.letter-cell:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.letter-cell.team-0,
.letter-cell.correct { color: #fff; background: var(--orange-dark); filter: drop-shadow(0 8px 0 #a93521) drop-shadow(0 13px 14px rgba(31,7,58,.3)); }
.letter-cell.team-0::before,
.letter-cell.correct::before { background: linear-gradient(145deg, #ff927b, var(--orange)); }
.letter-cell.team-1 { color: #fff; background: var(--teal-dark); filter: drop-shadow(0 8px 0 #05645f) drop-shadow(0 13px 14px rgba(31,7,58,.3)); }
.letter-cell.team-1::before { background: linear-gradient(145deg, #2ac7c0, var(--teal)); }
.letter-cell.team-2 { color: #fff; background: #be2869; }
.letter-cell.team-2::before { background: linear-gradient(145deg, #f067a4, var(--team-2)); }
.letter-cell.team-3 { color: #4b3510; background: #c59c1a; }
.letter-cell.team-3::before { background: linear-gradient(145deg, #ffe886, var(--team-3)); }
.letter-cell.team-4 { color: #fff; background: #315da8; }
.letter-cell.team-4::before { background: linear-gradient(145deg, #80a7f3, var(--team-4)); }
.letter-cell.team-5 { color: #fff; background: #4e8c39; }
.letter-cell.team-5::before { background: linear-gradient(145deg, #9ad783, var(--team-5)); }
.letter-cell.team-6 { color: #fff; background: #6943a0; }
.letter-cell.team-6::before { background: linear-gradient(145deg, #bd9ae8, var(--team-6)); }
.letter-cell.team-7 { color: #fff; background: #aa5b19; }
.letter-cell.team-7::before { background: linear-gradient(145deg, #f1aa63, var(--team-7)); }
.letter-cell.wrong { color: #d5c5e7; background: #4a2c67; filter: drop-shadow(0 8px 0 #2c163e); }
.letter-cell.wrong::before { background: linear-gradient(145deg, #725188, #51336d); }
.letter-cell.exhausted { color: #9d8cae; background: #3c284f; filter: drop-shadow(0 7px 0 #24152f); }
.letter-cell.exhausted::before { background: linear-gradient(145deg, #5b456b, #453252); }
.letter-cell .remaining-badge {
  position: absolute;
  bottom: 17%;
  left: 18%;
  min-width: 25px;
  padding: 2px 5px;
  border-radius: 999px;
  color: currentColor;
  background: rgba(61,25,93,.1);
  font-size: 8px;
  line-height: 1.3;
}
.letter-cell.team-0 .remaining-badge,
.letter-cell.team-1 .remaining-badge,
.letter-cell.wrong .remaining-badge { background: rgba(0,0,0,.17); }

.legend {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 17px;
  color: #eee4f8;
  font-size: 12px;
}
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend b { font-weight: 700; }
.legend-hex {
  width: 17px;
  height: 15px;
  display: inline-block;
  -webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
}
.legend-hex.available { background: #fff; }
.legend-hex.team-one { background: var(--orange); }
.legend-hex.team-two { background: var(--teal); }
.legend-hex.wrong { background: #725188; }
.legend-hex.exhausted { background: #4a3857; }

.show-panel { display: grid; gap: 16px; position: sticky; top: 110px; }
.scoreboard-card,
.control-card {
  padding: 20px;
  background: linear-gradient(155deg, rgba(89,44,137,.98), rgba(52,22,87,.98));
}
.show-logo {
  min-height: 130px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  margin: -20px -20px 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 0, rgba(255,211,66,.28), transparent 35%),
    linear-gradient(135deg, #7542aa, #4a2179);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.show-logo::before,
.show-logo::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 68px;
  opacity: .28;
  border: 2px solid #fff;
  -webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
}
.show-logo::before { right: -22px; top: 12px; }
.show-logo::after { left: -22px; bottom: 8px; }
.show-logo span { font-weight: 900; font-size: 18px; color: #fff; transform: rotate(-3deg); }
.show-logo strong {
  margin: -4px 0;
  color: var(--yellow);
  font-size: 55px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -3px;
  text-shadow: 0 5px 0 #d65138, 0 9px 18px rgba(22,5,42,.35);
  transform: rotate(-2deg);
}
.show-logo small { color: #bff7f3; font-weight: 800; }
.round-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 13px;
  color: #eadff7;
  border-radius: 15px;
  background: rgba(34,12,58,.38);
  border: 1px solid rgba(255,255,255,.12);
}
.round-pill span { font-size: 11px; }
.round-pill strong { color: var(--yellow); font-size: 14px; }

.teams { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.team-card {
  --team-color: var(--team-0);
  min-width: 0;
  padding: 11px 10px;
  position: relative;
  border: 2px solid transparent;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.team-card:nth-child(2) { --team-color: var(--team-1); }
.team-card:nth-child(3) { --team-color: var(--team-2); }
.team-card:nth-child(4) { --team-color: var(--team-3); }
.team-card:nth-child(5) { --team-color: var(--team-4); }
.team-card:nth-child(6) { --team-color: var(--team-5); }
.team-card:nth-child(7) { --team-color: var(--team-6); }
.team-card:nth-child(8) { --team-color: var(--team-7); }
.team-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  border-radius: 16px 16px 4px 4px;
  background: var(--team-color);
}
.team-card.active {
  transform: translateY(-2px);
  border-color: var(--team-color);
  background: rgba(255,255,255,.13);
  box-shadow: 0 10px 24px rgba(22,5,41,.2);
}
.team-card.active::after {
  content: "الدور";
  position: absolute;
  top: -9px;
  left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--team-color);
  font-size: 8px;
  font-weight: 800;
}
.team-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 900; }
.team-score-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 7px; }
.team-score { color: #fff; font-size: 30px; line-height: 1; }
.score-actions { display: flex; gap: 4px; }
.score-actions button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  color: #fff;
  background: rgba(27,7,48,.26);
}
.current-turn {
  margin: 13px 0;
  padding: 11px;
  border-radius: 15px;
  text-align: center;
  background: rgba(25,7,47,.29);
  border: 1px solid rgba(255,255,255,.12);
}
.current-turn span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 3px; }
.current-turn strong { color: var(--yellow); font-size: 17px; }
.quick-controls,
.timer-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.timer-controls { grid-template-columns: repeat(3, 1fr); margin-top: 15px; }
.new-game-btn { width: 100%; margin-top: 9px; }

.control-btn,
.secondary-btn,
.primary-btn,
.success-btn,
.danger-btn,
.danger-outline-btn {
  min-height: 42px;
  padding: 10px 13px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-weight: 800;
  transition: transform .18s ease, filter .18s ease, background .18s ease;
}
.control-btn,
.secondary-btn { background: rgba(255,255,255,.08); }
.control-btn:hover,
.secondary-btn:hover { background: rgba(255,255,255,.15); }
.control-btn.primary,
.primary-btn { color: #342044; border-color: transparent; background: linear-gradient(135deg, var(--yellow), #ffea8b); }
.success-btn { border-color: transparent; background: linear-gradient(135deg, var(--teal-dark), #20c1b9); }
.danger-btn { border-color: transparent; background: linear-gradient(135deg, #c83948, #f0666d); }
.danger-outline-btn { color: #ffb9bd; background: rgba(224,67,82,.08); border-color: rgba(255,124,135,.35); }
.cut-turn-control,
.cut-turn-btn {
  color: #2e173e;
  border-color: rgba(255,255,255,.45);
  background: linear-gradient(135deg, #ffd342, #fff0a1);
  box-shadow: 0 8px 20px rgba(255,211,66,.18);
}
.cut-turn-control:hover,
.cut-turn-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.control-btn:hover,
.primary-btn:hover,
.secondary-btn:hover,
.success-btn:hover,
.danger-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.big { width: 100%; min-height: 52px; font-size: 16px; }
.wide { min-width: 150px; }

.timer-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.timer-title span { font-weight: 900; }
.timer-title small { color: var(--muted); }
.timer-ring {
  --progress: 100;
  width: 150px;
  height: 130px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  position: relative;
  -webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  background: conic-gradient(var(--yellow) calc(var(--progress) * 1%), rgba(255,255,255,.1) 0);
  filter: drop-shadow(0 12px 20px rgba(25,5,45,.28));
}
.timer-ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  -webkit-clip-path: inherit;
  clip-path: inherit;
  background: linear-gradient(145deg, #5e3091, #3d1b67);
}
.timer-inner { position: relative; z-index: 1; text-align: center; }
.timer-inner strong { display: block; font-size: 48px; line-height: .95; }
.timer-inner small { color: #d9cbe9; font-size: 11px; }
.timer-danger { animation: timerPulse .65s infinite alternate; }
@keyframes timerPulse { to { filter: drop-shadow(0 0 20px rgba(255,83,95,.9)); } }

.history-mini { margin-top: 18px; }
.section-head,
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-head.compact h3 { margin: 0; font-size: 14px; }
.text-btn { border: 0; color: var(--yellow); background: transparent; font-weight: 800; }
.history-list { max-height: 190px; margin-top: 10px; display: grid; gap: 7px; overflow: auto; }
.history-item {
  padding: 8px 10px;
  border-radius: 11px;
  border-right: 4px solid #8b72a9;
  background: rgba(255,255,255,.07);
  font-size: 11px;
}
.history-item.correct { border-color: var(--teal); }
.history-item.wrong { border-color: #ff6974; }
.history-item b { display: block; margin-bottom: 2px; }
.history-item span { color: #d2c3e4; }
.empty { padding: 16px; text-align: center; color: var(--muted); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(25,6,44,.82); backdrop-filter: blur(10px); }
.modal-dialog {
  position: relative;
  z-index: 1;
  width: min(95vw, 720px);
  max-height: 93vh;
  overflow: auto;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(155deg, #63369a, #38165e);
  box-shadow: 0 35px 100px rgba(20,3,37,.58);
}
.modal-close {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 8;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  color: #fff;
  background: rgba(31,7,52,.24);
  font-size: 25px;
}
.question-dialog {
  width: min(96vw, 900px);
  min-height: 540px;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(150deg, #6d3ba5, #462172 56%, #351458);
}
.question-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .18;
  background-image: linear-gradient(30deg, transparent 48%, rgba(255,255,255,.26) 49% 51%, transparent 52%);
  background-size: 92px 80px;
}
.question-color-slice { position: absolute; top: 0; bottom: 0; width: 21%; z-index: -1; opacity: .88; }
.question-color-orange { right: 0; background: linear-gradient(180deg, var(--orange), var(--orange-dark)); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%, 72% 50%); }
.question-color-orange { right: 0; background: linear-gradient(180deg, var(--orange), var(--orange-dark)); clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%, 72% 50%); }
.question-color-teal { left: 0; background: linear-gradient(180deg, #20c7bf, var(--teal-dark)); -webkit-clip-path: polygon(0 0, 100% 0, 28% 50%, 65% 100%, 0 100%); }
.question-color-teal { left: 0; background: linear-gradient(180deg, #20c7bf, var(--teal-dark)); clip-path: polygon(0 0, 100% 0, 28% 50%, 65% 100%, 0 100%); }
.question-team-ribbon {
  width: fit-content;
  max-width: 70%;
  margin: 0 auto 8px;
  padding: 8px 18px;
  border-radius: 999px;
  color: #eee4f7;
  background: rgba(34,10,59,.38);
  border: 1px solid rgba(255,255,255,.15);
}
.question-team-ribbon span { margin-left: 8px; font-size: 11px; }
.question-team-ribbon strong { color: var(--yellow); }
.question-letter {
  width: 104px;
  height: 91px;
  margin: 8px auto 12px;
  display: grid;
  place-items: center;
  position: relative;
  color: var(--purple-900);
  background: #fff;
  font-size: 48px;
  font-weight: 900;
  -webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  filter: drop-shadow(0 9px 0 #4b2378) drop-shadow(0 16px 18px rgba(24,4,44,.3));
}
.question-meta { display: flex; justify-content: center; gap: 8px; }
.question-meta span {
  padding: 6px 10px;
  border-radius: 999px;
  color: #eee4f7;
  background: rgba(34,10,59,.3);
  border: 1px solid rgba(255,255,255,.13);
  font-size: 11px;
}
.question-dialog h2 { max-width: 650px; margin: 20px auto; font-size: clamp(22px, 3vw, 32px); line-height: 1.8; }
.answer-box {
  display: none;
  max-width: 620px;
  margin: 12px auto;
  padding: 14px 18px;
  border-radius: 17px;
  color: #2f1a3b;
  background: linear-gradient(135deg, #fff4b8, var(--yellow));
  box-shadow: 0 12px 28px rgba(20,4,37,.2);
}
.answer-box.visible { display: block; animation: answerIn .35s ease; }
@keyframes answerIn { from { opacity: 0; transform: translateY(7px) scale(.98); } }
.answer-box span { display: block; font-size: 11px; }
.answer-box strong { display: block; margin-top: 3px; font-size: 24px; }
.question-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 17px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(34,9,58,.36);
}
.question-timer span { color: var(--yellow); font-size: 20px; font-weight: 900; }
.question-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }

.setup-dialog { width: min(95vw, 700px); }
.setup-head h2,
.admin-header h2 { margin: 3px 0 0; }
.form-grid,
.question-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.form-grid label,
.question-form label { display: flex; flex-direction: column; gap: 7px; color: #e0d1ee; font-size: 12px; }
.form-grid input,
.question-form input,
.question-form select,
.question-form textarea,
.admin-toolbar input,
.admin-toolbar select {
  width: 100%;
  padding: 12px;
  outline: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 13px;
  background: rgba(28,7,49,.32);
}
.form-grid input:focus,
.question-form input:focus,
.question-form textarea:focus,
.admin-toolbar input:focus { border-color: var(--yellow); }
.teams-builder { margin: 20px 0; }
.team-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.team-input-row { display: flex; gap: 7px; }
.team-input-row input { flex: 1; min-width: 0; padding: 11px; color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(28,7,49,.32); }
.team-input-row button { width: 40px; border: 0; border-radius: 12px; color: #ffc0c4; background: rgba(238,91,101,.16); }
.admin-dialog { width: min(96vw, 1200px); }
.admin-header { flex-wrap: wrap; }
.admin-actions,
.admin-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.file-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.admin-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }
.summary-box { padding: 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(255,255,255,.07); }
.summary-box span { color: #d8c9e8; font-size: 11px; }
.summary-box b { display: block; margin-top: 4px; color: var(--yellow); font-size: 25px; }
.admin-toolbar input { min-width: 280px; flex: 1; }
.questions-table-wrap { max-height: 55vh; margin-top: 14px; overflow: auto; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; }
.questions-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.questions-table th,
.questions-table td { padding: 12px; text-align: right; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 12px; }
.questions-table th { position: sticky; top: 0; z-index: 2; color: var(--yellow); background: #452170; }
.questions-table td:nth-child(2) { max-width: 320px; }
.table-actions { display: flex; gap: 6px; }
.table-actions button { padding: 6px 9px; border: 0; border-radius: 8px; color: #fff; background: rgba(255,255,255,.1); }
.table-actions .delete { color: #ffc0c4; background: rgba(238,91,101,.16); }
.full { grid-column: 1 / -1; }

.celebration { position: fixed; inset: 0; z-index: 250; pointer-events: none; overflow: hidden; }
.confetti-piece {
  position: absolute;
  top: -30px;
  width: 12px;
  height: 20px;
  border-radius: 3px;
  animation: confettiFall var(--fall, 1.6s) cubic-bezier(.2,.6,.35,1) forwards;
  transform: rotate(var(--spin, 0deg));
}
@keyframes confettiFall {
  to { transform: translate3d(var(--drift, 0), 110vh, 0) rotate(calc(var(--spin, 0deg) + 720deg)); opacity: .15; }
}
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  z-index: 300;
  padding: 12px 18px;
  border-radius: 13px;
  color: #342044;
  background: #fff;
  box-shadow: 0 14px 40px rgba(24,5,43,.4);
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* WordPress compatibility */
html, body { width: 100%; }
body.letters-competition-theme { min-height: 100vh; }
#wpadminbar { direction: rtl; }
.admin-bar .topbar { top: 32px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1250px) {
  .layout { grid-template-columns: minmax(570px, 1fr) 320px; }
  .letters-board { grid-template-columns: repeat(7, minmax(58px, 1fr)); padding-inline: 15px; }
  .board-frame { min-height: 500px; padding-inline: 30px; }
}
@media (max-width: 1050px) {
  .layout { grid-template-columns: 1fr; }
  .show-panel { position: static; grid-template-columns: 1fr 1fr; }
  .board-card { min-height: auto; }
  .scoreboard-card, .control-card { min-height: 100%; }
}
@media (max-width: 790px) {
  .topbar { min-height: auto; padding: 12px 14px; gap: 10px; }
  .brand { flex: 1 1 auto; }
  .brand p { display: none; }
  .topbar-controls { flex: 0 1 auto; gap: 6px; }
  .top-actions { gap: 5px; }
  .layout { padding: 10px; }
  .board-card { padding: 16px 10px; border-radius: 22px; }
  .board-toolbar { display: block; padding-inline: 8px; }
  .board-stats { margin-top: 10px; justify-content: flex-start; }
  .team-edge-labels { margin-inline: 2%; }
  .edge-label { min-width: 115px; padding-inline: 10px; font-size: 11px; }
  .board-frame { min-height: 430px; padding: 22px 9px; }
  .letters-board { grid-template-columns: repeat(7, minmax(42px, 1fr)); gap: 5px 2px; padding: 12px 7px 28px; }
  .letter-cell { font-size: clamp(20px, 5vw, 29px); filter: drop-shadow(0 5px 0 #4d247e) drop-shadow(0 8px 9px rgba(31,7,58,.25)); }
  .letter-cell .remaining-badge { display: none; }
  .show-panel { grid-template-columns: 1fr; }
  .question-dialog { min-height: 500px; padding: 25px 14px; }
  .question-color-slice { width: 15%; }
  .question-actions > * { flex: 1 1 42%; }
  .admin-summary { grid-template-columns: 1fr 1fr; }
  .form-grid, .question-form, .team-inputs { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
}

/* v2.5.0 — ترتيب مؤقت السؤال عموديًا وأزراره في صف واحد. */
.show-app .control-card {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
}

.show-app .control-card .timer-title {
  order:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  margin:0;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:15px;
  background:rgba(25,7,47,.22);
  text-align:center;
}

.show-app .control-card .timer-title span {
  font-size:clamp(18px,1.6vw,23px);
  font-weight:1000;
}

.show-app .control-card .timer-title small {
  display:none;
}

.show-app .control-card .timer-ring {
  order:2;
  width:180px;
  height:156px;
  margin:0 auto;
}

.show-app .control-card .timer-ring::after {
  inset:11px;
}

.show-app .control-card .timer-inner strong {
  font-size:56px;
}

.show-app .control-card .timer-inner small {
  font-size:15px;
  font-weight:800;
}

.show-app .control-card .timer-controls {
  order:3;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  width:100%;
  margin:0;
}

.show-app .control-card .timer-controls button {
  min-width:0;
  min-height:54px;
  padding:10px 7px;
  font-size:clamp(14px,1.25vw,18px);
  font-weight:1000;
  white-space:nowrap;
}

.show-app .control-card .clear-history-btn {
  color:#fff0a8;
  border-color:rgba(255,211,66,.42);
  background:linear-gradient(145deg,rgba(255,211,66,.18),rgba(255,211,66,.07));
}

.show-app .control-card .history-mini {
  order:4;
  width:100%;
  margin:2px 0 0;
}

@media (max-width:420px) {
  .show-app .control-card {
    gap:13px;
  }

  .show-app .control-card .timer-ring {
    width:150px;
    height:130px;
  }

  .show-app .control-card .timer-inner strong {
    font-size:48px;
  }

  .show-app .control-card .timer-controls {
    gap:5px;
  }

  .show-app .control-card .timer-controls button {
    min-height:50px;
    padding-inline:3px;
    font-size:13px;
  }
}

/* v2.5.2 — تثبيت الحروف داخل الخلايا السداسية بعد إعادة الضبط. */
.show-app .classic-letters-board .letter-cell {
  overflow:hidden;
  padding:0;
  font-size:clamp(18px,2.15vw,34px);
  line-height:1;
}

.show-app .classic-letters-board .letter-cell > span {
  position:relative;
  z-index:2;
  width:72%;
  height:72%;
  display:grid;
  place-items:center;
  line-height:.9;
  text-align:center;
  transform:translateY(-2%);
  pointer-events:none;
}

#boardFullscreenTarget:fullscreen .classic-letters-board .letter-cell,
#boardFullscreenTarget:-webkit-full-screen .classic-letters-board .letter-cell,
#boardFullscreenTarget.is-pseudo-fullscreen .classic-letters-board .letter-cell {
  font-size:clamp(24px,min(3.5vw,5.2vh),54px);
}

@media (max-width:790px) {
  .show-app .classic-letters-board .letter-cell {
    font-size:clamp(16px,4.2vw,27px);
  }
}

@media (max-width:520px) {
  .show-app .classic-letters-board .letter-cell {
    font-size:clamp(14px,4.6vw,22px);
  }
}

/* =========================================================
   v3.1.0 — إدارة الجولات والنتيجة النهائية
   ========================================================= */
.show-app .round-pill {
  min-height:66px;
}

.show-app .round-pill-value {
  min-width:0;
  display:grid;
  justify-items:end;
  gap:3px;
  text-align:left;
}

.show-app .round-pill-value strong {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.show-app .round-pill-value small {
  color:#d8cae7;
  font-size:10px;
  font-weight:800;
}

.team-round-wins {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#d8cae7;
  font-size:10px;
  font-weight:800;
}

.team-round-wins b {
  min-width:25px;
  padding:3px 8px;
  border-radius:999px;
  color:#1d0a2c;
  background:#ffe173;
  text-align:center;
  font-size:12px;
}

#setupModal .field-help {
  color:#cdbbdc;
  font-size:10px;
  font-weight:700;
}

.celebration .round-win-message.show {
  pointer-events:auto;
}

.round-win-progress {
  margin:8px 0 2px;
  padding:7px 14px;
  border-radius:999px;
  color:#fff5c2;
  background:rgba(13,3,25,.24);
  font-size:13px;
  font-weight:900;
}

.round-win-action {
  min-width:min(100%,260px);
  min-height:52px;
  margin-top:9px;
  padding:12px 24px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:15px;
  color:#281039;
  background:linear-gradient(145deg,#fff4a8,#ffd342);
  box-shadow:0 12px 28px rgba(13,3,25,.3),inset 0 1px #fff;
  font-size:16px;
  font-weight:1000;
  cursor:pointer;
  pointer-events:auto;
}

.round-win-action:hover,
.round-win-action:focus-visible {
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(13,3,25,.38),0 0 0 4px rgba(255,255,255,.18);
}

.round-win-message.is-final {
  border-color:#ffe173;
  box-shadow:0 30px 90px rgba(13,3,25,.58),0 0 0 9px rgba(255,211,66,.2);
}

.classic-letters-board .letter-cell.round-locked {
  opacity:.74;
  cursor:not-allowed;
}

@media (max-width:520px) {
  .show-app .round-pill {
    min-height:60px;
  }
  .round-win-action {
    width:100%;
    min-width:0;
  }
}

/* v3.0.6 — شارة الهوية داخل ترويسة الواجهة الرئيسية بلا خط سفلي. */
.show-app > .topbar .brand {
  min-height:66px;
  padding:5px 12px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:19px;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(13,3,25,.13));
  box-shadow:inset 0 1px rgba(255,255,255,.065),0 9px 22px rgba(8,2,17,.12);
}

.show-app > .topbar .site-brand-logo {
  border:0;
  box-shadow:none;
  text-decoration:none;
}

@media (max-width:650px) {
  .show-app > .topbar .brand {
    min-height:56px;
    padding:4px 8px;
    border-radius:15px;
  }
}

/* =========================================================
   v3.0.3 — إظهار الحرف المكتسب بلون الفريق بعد الإجابة
   ========================================================= */
.classic-letters-board .letter-cell.team-0:disabled,
.classic-letters-board .letter-cell.team-1:disabled,
.classic-letters-board .letter-cell.team-2:disabled,
.classic-letters-board .letter-cell.team-3:disabled,
.classic-letters-board .letter-cell.team-4:disabled,
.classic-letters-board .letter-cell.team-5:disabled,
.classic-letters-board .letter-cell.team-6:disabled,
.classic-letters-board .letter-cell.team-7:disabled,
.classic-letters-board .letter-cell.wrong:disabled {
  opacity:1 !important;
  cursor:not-allowed;
}

.classic-letters-board .letter-cell.team-0,
.classic-letters-board .letter-cell.team-1,
.classic-letters-board .letter-cell.team-2,
.classic-letters-board .letter-cell.team-3,
.classic-letters-board .letter-cell.team-4,
.classic-letters-board .letter-cell.team-5,
.classic-letters-board .letter-cell.team-6,
.classic-letters-board .letter-cell.team-7 {
  color:#fff;
  opacity:1 !important;
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.36));
}

.classic-letters-board .letter-cell.team-3 {
  color:#2d2209;
  text-shadow:0 1px rgba(255,255,255,.55);
}

.classic-letters-board .letter-cell.team-0::before {
  background:linear-gradient(145deg,#ff4652,#e40013 58%,#aa000d) !important;
}
.classic-letters-board .letter-cell.team-1::before {
  background:linear-gradient(145deg,#2dbd41,#087f16 58%,#034e0b) !important;
}
.classic-letters-board .letter-cell.team-2::before {
  background:linear-gradient(145deg,#ed63a7,#cf2678 70%,#8f1550) !important;
}
.classic-letters-board .letter-cell.team-3::before {
  background:linear-gradient(145deg,#ffe782,#e7b91d 70%,#a87b00) !important;
}
.classic-letters-board .letter-cell.team-4::before {
  background:linear-gradient(145deg,#79a7ff,#2862c6 70%,#173c82) !important;
}
.classic-letters-board .letter-cell.team-5::before {
  background:linear-gradient(145deg,#9edb82,#438f31 70%,#275d1b) !important;
}
.classic-letters-board .letter-cell.team-6::before {
  background:linear-gradient(145deg,#c29be8,#7040a5 70%,#46246f) !important;
}
.classic-letters-board .letter-cell.team-7::before {
  background:linear-gradient(145deg,#f3ae69,#bd6414 70%,#7a3b07) !important;
}
.classic-letters-board .letter-cell.wrong::before {
  background:linear-gradient(145deg,#7d7a82,#4f4c53 66%,#2d2b30) !important;
}
@media (max-width: 520px) {
  .brand-mark { width: 44px; height: 44px; flex-basis: 44px; font-size: 23px; }
  .brand-mark span { width: 32px; height: 32px; }
  .brand { gap: 9px; }
  .brand h1 { font-size: 16px; }
  .topbar { gap: 7px; padding-inline: 9px; }
  .topbar-controls { gap: 4px; }
  .top-actions { gap: 4px; align-items: center; }
  .viewer-mode-badge { display: none; }
  .supervisor-login-btn { min-width: 36px; min-height: 36px; padding: 0 10px; border-radius: 11px; }
  .letters-presenter-mode .supervisor-login-btn { width: 36px; padding: 0; }
  .letters-presenter-mode .supervisor-login-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .icon-btn { width: 36px; height: 36px; border-radius: 11px; }
  .team-edge-labels { display: none; }
  .board-frame { min-height: 400px; margin-top: 8px; padding-inline: 4px; }
  .board-color { width: 11%; }
  .letters-board { grid-template-columns: repeat(7, minmax(35px, 1fr)); gap: 4px 1px; }
  .letter-cell { font-size: 20px; }
  .legend { gap: 10px; font-size: 10px; }
  .modal { padding: 7px; }
  .modal-dialog { padding: 22px 12px; border-radius: 20px; }
  .question-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .question-actions > * { min-width: 0; width: 100%; }
  .admin-toolbar > * { width: 100%; min-width: 0 !important; }
}

/* v2.4.9 — منع تمدد بطاقة المؤقت في الشاشات العمودية والمتوسطة. */
@media (max-width: 1050px) {
  .show-app > .layout > .show-panel {
    align-items: start;
    align-content: start;
    grid-auto-rows: max-content;
  }

  .show-app > .layout > .show-panel > .scoreboard-card,
  .show-app > .layout > .show-panel > .control-card {
    min-height: 0;
    height: auto;
    align-self: start;
  }

  .show-app .control-card .history-mini {
    align-self: start;
  }

  .show-app .control-card .history-list {
    min-height: 0;
    height: auto;
  }

  .show-app .control-card .text-btn {
    min-width: 68px;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 211, 66, .35);
    border-radius: 12px;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
  }
}

@media (max-width: 790px) {
  .show-app > .layout > .show-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .show-app .control-card {
    width: 100%;
    max-width: none;
  }
}

/* v2.4.7 — الشعار الرسمي وأيقونة الموقع. */
.show-app .brand {
  min-width: 0;
}

.show-app .site-brand-logo {
  display: block;
  width: clamp(225px, 22vw, 310px);
  height: auto;
  max-height: 76px;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 8px 13px rgba(16, 4, 29, .24));
}

@media (max-width: 760px) {
  .show-app .site-brand-logo {
    width: clamp(175px, 48vw, 225px);
    max-height: 60px;
  }
}

@media (max-width: 430px) {
  .show-app .site-brand-logo {
    width: min(190px, 52vw);
  }
}
@media screen and (max-width: 782px) { .admin-bar .topbar { top: 46px; } }


/* =========================================================
   اللوحة الكلاسيكية المستوحاة من حروف الأصلية — الإصدار 1.4
   ========================================================= */
:root {
  --classic-red: #ed0013;
  --classic-red-dark: #a9000d;
  --classic-green: #087f16;
  --classic-green-dark: #04590d;
  --classic-cream: #fffde6;
  --classic-black: #080808;
}

.board-card {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.11), transparent 33%),
    linear-gradient(145deg, #4c2377, #2e124e 62%, #421d69);
}

.edge-orange {
  background: linear-gradient(135deg, #ff2535, var(--classic-red-dark));
}
.edge-teal {
  background: linear-gradient(135deg, #19a62a, var(--classic-green-dark));
}

.classic-board-frame {
  width: min(100%, 980px);
  min-height: 0;
  aspect-ratio: 1.46 / 1;
  padding: 0;
  border: 6px solid var(--classic-black);
  border-radius: 10px;
  background: #101010;
  box-shadow:
    0 28px 55px rgba(15, 4, 29, .38),
    0 0 0 5px rgba(255,255,255,.12),
    inset 0 0 0 2px rgba(255,255,255,.08);
  overflow: hidden;
  isolation: isolate;
}
.classic-board-frame::before {
  inset: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(#151515, #080808);
  z-index: -3;
}

.classic-lane {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 2px;
  pointer-events: none;
}
.classic-lane span {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--classic-black);
  -webkit-clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%);
  clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%);
}
.classic-lane span::after {
  content: "";
  position: absolute;
  inset: 3px;
  -webkit-clip-path: inherit;
  clip-path: inherit;
  background: var(--lane-color);
}
.classic-lane-top,
.classic-lane-bottom {
  left: 9.6%;
  right: 9.6%;
  height: 12.4%;
  grid-template-columns: repeat(5, 1fr);
  --lane-color: var(--classic-green);
}
.classic-lane-top { top: -1.8%; }
.classic-lane-bottom { bottom: -1.8%; }
.classic-lane-left,
.classic-lane-right {
  top: 10.5%;
  bottom: 10.5%;
  width: 12.2%;
  grid-template-rows: repeat(7, 1fr);
  --lane-color: var(--classic-red);
}
.classic-lane-left { left: -2.1%; }
.classic-lane-right { right: -2.1%; }
.classic-lane-left span,
.classic-lane-right span {
  -webkit-clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
  clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
}
.classic-lane-right span {
  -webkit-clip-path: polygon(28% 0, 100% 0, 100% 100%, 28% 100%, 0 50%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 28% 100%, 0 50%);
}

.classic-letters-board {
  position: absolute;
  z-index: 3;
  inset: 8.8% 10.4%;
  width: auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
  place-items: stretch;
  align-items: stretch;
  direction: rtl;
  overflow: visible;
}
.classic-letters-board .letter-cell {
  width: 126%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  justify-self: center;
  align-self: stretch;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  color: #030303;
  background: var(--classic-black);
  -webkit-clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%);
  clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%);
  transform: none;
  filter: none;
  font-family: Tahoma, Arial, sans-serif;
  font-size: clamp(25px, 3vw, 47px);
  font-weight: 900;
  line-height: 1;
  transition: transform .16s ease, filter .16s ease, color .16s ease;
  isolation: isolate;
}
.classic-letters-board .letter-cell::before {
  inset: 3px;
  z-index: -1;
  background: var(--classic-cream);
  -webkit-clip-path: inherit;
  clip-path: inherit;
}
.classic-letters-board .letter-cell:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.045);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.38));
  z-index: 5;
}
.classic-letters-board .letter-cell:focus-visible {
  outline: 4px solid #ffd600;
  outline-offset: 2px;
}
.classic-letters-board .letter-cell.team-0,
.classic-letters-board .letter-cell.correct {
  color: #fff;
  background: var(--classic-black);
  filter: none;
}
.classic-letters-board .letter-cell.team-0::before,
.classic-letters-board .letter-cell.correct::before {
  background: var(--classic-red);
}
.classic-letters-board .letter-cell.team-1 {
  color: #fff;
  background: var(--classic-black);
  filter: none;
}
.classic-letters-board .letter-cell.team-1::before {
  background: var(--classic-green);
}
.classic-letters-board .letter-cell.team-2::before { background: #d52f84; }
.classic-letters-board .letter-cell.team-3::before { background: #f4c72f; }
.classic-letters-board .letter-cell.team-4::before { background: #3068c9; }
.classic-letters-board .letter-cell.team-5::before { background: #4c9a36; }
.classic-letters-board .letter-cell.team-6::before { background: #7141a7; }
.classic-letters-board .letter-cell.team-7::before { background: #c36e1b; }
.classic-letters-board .letter-cell.wrong {
  color: #fff;
  background: var(--classic-black);
  filter: none;
}
.classic-letters-board .letter-cell.wrong::before { background: #555; }
.classic-letters-board .letter-cell.exhausted {
  color: #888;
  background: var(--classic-black);
  filter: none;
  opacity: .86;
}
.classic-letters-board .letter-cell.exhausted::before { background: #d8d5c6; }
.classic-letters-board .remaining-badge { display: none; }

.legend-hex.team-one { background: var(--classic-red); }
.legend-hex.team-two { background: var(--classic-green); }

@media (max-width: 1250px) {
  .classic-board-frame { min-height: 0; padding: 0; }
  .classic-letters-board { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); padding: 0; }
}
@media (max-width: 790px) {
  .classic-board-frame { min-height: 0; padding: 0; border-width: 4px; }
  .classic-letters-board { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); gap: 0; padding: 0; }
  .classic-letters-board .letter-cell {
    font-size: clamp(21px, 6vw, 33px);
    filter: none;
  }
  .classic-lane span::after,
  .classic-letters-board .letter-cell::before { inset: 2px; }
}
@media (max-width: 520px) {
  .classic-board-frame { min-height: 0; padding: 0; margin-top: 8px; }
  .classic-letters-board { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); gap: 0; }
  .classic-letters-board .letter-cell { font-size: clamp(17px, 5.5vw, 25px); }
}


/* ملء شاشة لوحة الحروف فقط، مع وضع احتياطي للمتصفحات التي تمنع Fullscreen API. */
.board-fullscreen-target {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
}

.board-fullscreen-exit {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 320;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  color: #fff;
  background: rgba(0,0,0,.68);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.board-fullscreen-exit[hidden] { display: none !important; }
.board-fullscreen-exit:hover { background: #b00012; transform: scale(1.05); }

#fullscreenBtn.is-active {
  color: #291340;
  border-color: rgba(255,255,255,.72);
  background: linear-gradient(145deg, #fff, #eadcff);
  box-shadow: 0 8px 22px rgba(18,4,36,.28);
}

#boardFullscreenTarget:fullscreen,
#boardFullscreenTarget:-webkit-full-screen,
#boardFullscreenTarget.is-pseudo-fullscreen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  box-sizing: border-box;
  padding: clamp(8px, 1.8vw, 24px);
  overflow: hidden;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 50% 45%, rgba(85,85,85,.22), transparent 42%),
    #050505;
}

#boardFullscreenTarget:fullscreen .classic-board-frame,
#boardFullscreenTarget:-webkit-full-screen .classic-board-frame,
#boardFullscreenTarget.is-pseudo-fullscreen .classic-board-frame {
  width: min(calc(100vw - clamp(16px, 3.6vw, 48px)), calc((100vh - clamp(16px, 3.6vw, 48px)) * 1.46));
  width: min(calc(100vw - clamp(16px, 3.6vw, 48px)), calc((100dvh - clamp(16px, 3.6vw, 48px)) * 1.46));
  max-width: none;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  flex: none;
  border-radius: clamp(5px, .7vw, 12px);
  box-shadow: 0 26px 80px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.12);
}

#boardFullscreenTarget:fullscreen .classic-letters-board .letter-cell,
#boardFullscreenTarget:-webkit-full-screen .classic-letters-board .letter-cell,
#boardFullscreenTarget.is-pseudo-fullscreen .classic-letters-board .letter-cell {
  font-size: clamp(28px, min(4.8vw, 7vh), 72px);
}

html.letters-board-pseudo-fullscreen,
body.letters-board-pseudo-fullscreen {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

body.letters-board-pseudo-fullscreen #wpadminbar,
body.letters-board-native-fullscreen #wpadminbar {
  display: none !important;
}

#boardFullscreenTarget.is-pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
}

#boardFullscreenTarget:fullscreen .modal,
#boardFullscreenTarget:-webkit-full-screen .modal,
#boardFullscreenTarget.is-pseudo-fullscreen .modal {
  z-index: 400;
}

#boardFullscreenTarget:fullscreen .celebration,
#boardFullscreenTarget:-webkit-full-screen .celebration,
#boardFullscreenTarget.is-pseudo-fullscreen .celebration {
  z-index: 450;
}

#boardFullscreenTarget:fullscreen .toast,
#boardFullscreenTarget:-webkit-full-screen .toast,
#boardFullscreenTarget.is-pseudo-fullscreen .toast {
  z-index: 500;
}

@media (orientation: portrait) {
  #boardFullscreenTarget:fullscreen .classic-board-frame,
  #boardFullscreenTarget:-webkit-full-screen .classic-board-frame,
  #boardFullscreenTarget.is-pseudo-fullscreen .classic-board-frame {
    width: calc(100vw - 16px);
  }
}

/* شريط دور مصغّر أعلى منتصف الشاشة دون حجب خلايا اللوحة. */
.fullscreen-turn-controls {
  --active-team-color: #e60012;
  width: 100%;
  min-height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, .9vw, 12px);
  position: relative;
  z-index: 330;
  padding-inline: clamp(62px, 6vw, 86px);
  pointer-events: none;
}

.fullscreen-turn-badge {
  min-width: 0;
  max-width: min(430px, calc(100vw - 250px));
  min-height: 38px;
  padding: 6px 15px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--active-team-color) 86%, #000 14%), var(--active-team-color));
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 3px color-mix(in srgb, var(--active-team-color) 30%, transparent);
  text-align: center;
  backdrop-filter: blur(12px) saturate(1.15);
  pointer-events: auto;
}
.fullscreen-turn-badge::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,.15);
  animation: letters-turn-pulse 1.45s ease-in-out infinite;
}
.fullscreen-turn-label {
  color: rgba(255,255,255,.84);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 700;
  white-space: nowrap;
}
.fullscreen-turn-badge strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: clamp(15px, 1.55vw, 23px);
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(0,0,0,.32);
}

.fullscreen-cut-turn {
  min-height: 38px;
  padding: 7px 14px;
  flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 999px;
  color: #fff;
  background: color-mix(in srgb, var(--active-team-color) 82%, #000 18%);
  font-size: clamp(11px, .95vw, 14px);
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(0,0,0,.36);
  pointer-events: auto;
}
.fullscreen-cut-turn:hover { transform: translateY(-1px); filter: brightness(1.12); }

#boardFullscreenTarget:fullscreen,
#boardFullscreenTarget:-webkit-full-screen,
#boardFullscreenTarget.is-pseudo-fullscreen {
  grid-template-rows: minmax(44px, auto) minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  row-gap: clamp(5px, .8vh, 10px);
}

#boardFullscreenTarget:fullscreen .fullscreen-turn-controls,
#boardFullscreenTarget:-webkit-full-screen .fullscreen-turn-controls,
#boardFullscreenTarget.is-pseudo-fullscreen .fullscreen-turn-controls {
  display: flex;
}

#boardFullscreenTarget:fullscreen .classic-board-frame,
#boardFullscreenTarget:-webkit-full-screen .classic-board-frame,
#boardFullscreenTarget.is-pseudo-fullscreen .classic-board-frame {
  width: min(calc(100vw - clamp(16px, 3.6vw, 48px)), calc((100vh - clamp(72px, 9vh, 98px)) * 1.46));
  width: min(calc(100vw - clamp(16px, 3.6vw, 48px)), calc((100dvh - clamp(72px, 9vh, 98px)) * 1.46));
  max-height: calc(100vh - clamp(72px, 9vh, 98px));
  max-height: calc(100dvh - clamp(72px, 9vh, 98px));
}

@keyframes letters-turn-pulse {
  0%, 100% { transform: scale(.88); opacity: .78; }
  50% { transform: scale(1.12); opacity: 1; }
}

@media (max-width: 640px) {
  .fullscreen-turn-controls {
    min-height: 40px;
    gap: 6px;
    padding-inline: 56px 8px;
  }
  .fullscreen-turn-badge {
    max-width: calc(100vw - 190px);
    min-height: 34px;
    padding: 5px 10px 6px;
    gap: 6px;
  }
  .fullscreen-turn-label { display: none; }
  .fullscreen-turn-badge strong { font-size: clamp(14px, 4.6vw, 19px); }
  .fullscreen-cut-turn { min-height: 34px; padding: 6px 10px; font-size: 11px; }
  #boardFullscreenTarget:fullscreen .classic-board-frame,
  #boardFullscreenTarget:-webkit-full-screen .classic-board-frame,
  #boardFullscreenTarget.is-pseudo-fullscreen .classic-board-frame {
    width: min(calc(100vw - 12px), calc((100vh - 64px) * 1.46));
    width: min(calc(100vw - 12px), calc((100dvh - 64px) * 1.46));
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
  }
}



/* الإصدار 1.4.6: التقديم للمدير العام فقط وتعطيل التسجيل العام. */
.viewer-mode-badge {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
}

.viewer-notice {
  position: relative;
  z-index: 4;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid rgba(255,211,66,.4);
  border-radius: 14px;
  background: rgba(255,211,66,.12);
  color: #fff8d3;
  text-align: center;
  font-weight: 800;
}

.letters-viewer-mode .presenter-only,
.show-app.is-viewer .presenter-only {
  display: none !important;
}

.show-app.is-viewer .letter-cell {
  cursor: not-allowed;
}

.show-app.is-viewer .letter-cell:not(.exhausted) {
  opacity: .94;
}

.show-app.is-viewer .team-card {
  cursor: default;
}

.show-app.is-viewer .score-actions,
.score-actions.is-locked {
  display: none !important;
}

.show-app.is-viewer .board-toolbar h2::after {
  content: " — عرض فقط";
  color: #ffd342;
  font-size: .62em;
}

@media (max-width: 700px) {
  .viewer-mode-badge { min-height: 36px; padding: 0 11px; font-size: 12px; }
  .viewer-notice { font-size: 13px; }
}


/*
 * ضبط قائمة «مسابقة الحروف» في شريط إدارة ووردبريس.
 * تعتمد القواعد على اتجاه RTL وتمنع خروج القائمة من حدود الشاشة على الكمبيوتر والجوال.
 */
#wpadminbar #wp-admin-bar-letters-competition-brand > .ab-item {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  direction: rtl !important;
}

#wpadminbar #wp-admin-bar-letters-competition-brand > .ab-item .ab-icon {
  position: static !important;
  float: none !important;
  margin: 0 !important;
}

#wpadminbar #wp-admin-bar-letters-competition-brand .ab-sub-wrapper,
#wpadminbar #wp-admin-bar-letters-competition-brand .ab-submenu,
#wpadminbar #wp-admin-bar-letters-competition-brand .ab-submenu .ab-item {
  box-sizing: border-box !important;
  direction: rtl !important;
  text-align: right !important;
}

#wpadminbar #wp-admin-bar-letters-competition-brand .ab-submenu > li {
  float: none !important;
  display: block !important;
  width: 100% !important;
}

#wpadminbar #wp-admin-bar-letters-competition-brand .ab-submenu .ab-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-indent: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 36px !important;
}

#wpadminbar #wp-admin-bar-letters-competition-brand .ab-submenu .ab-icon {
  position: static !important;
  float: none !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  line-height: 20px !important;
}

@media screen and (min-width: 783px) {
  #wpadminbar #wp-admin-bar-letters-competition-brand.menupop > .ab-sub-wrapper {
    right: 0 !important;
    left: auto !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: calc(100vw - 16px) !important;
    overflow: hidden !important;
  }

  #wpadminbar #wp-admin-bar-letters-competition-brand > .ab-sub-wrapper > .ab-submenu {
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px 0 !important;
  }

  #wpadminbar #wp-admin-bar-letters-competition-brand .ab-submenu .ab-item {
    min-width: 0 !important;
    padding: 0 14px !important;
  }
}

@media screen and (max-width: 782px) {
  #wpadminbar #wp-admin-bar-letters-competition-brand {
    position: static !important;
  }

  #wpadminbar #wp-admin-bar-letters-competition-brand > .ab-item {
    width: 46px !important;
    min-width: 46px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  #wpadminbar #wp-admin-bar-letters-competition-brand > .ab-item .ab-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  #wpadminbar #wp-admin-bar-letters-competition-brand > .ab-item .ab-icon {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 22px !important;
    line-height: 46px !important;
  }

  #wpadminbar #wp-admin-bar-letters-competition-brand.menupop > .ab-sub-wrapper {
    position: fixed !important;
    top: 46px !important;
    right: 6px !important;
    left: 6px !important;
    width: calc(100vw - 12px) !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - 58px) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 0 0 12px 12px !important;
  }

  #wpadminbar #wp-admin-bar-letters-competition-brand > .ab-sub-wrapper > .ab-submenu {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 0 !important;
  }

  #wpadminbar #wp-admin-bar-letters-competition-brand .ab-submenu .ab-item {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 4px 16px !important;
    font-size: 14px !important;
    line-height: 36px !important;
  }
}



/* الإصدار 1.5.5: إبقاء زر دخول المشرف ظاهرًا في جميع عروض المتصفح. */
@media (max-width: 430px) {
  .topbar { flex-wrap: wrap; }
  .brand { flex: 1 1 calc(100% - 90px); }
  .topbar-controls {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
  }
  .site-main-menu { min-width: 0; }
  .letters-viewer-mode .supervisor-login-btn { width: 100%; min-width: 0; }
  .top-actions { justify-content: flex-end; }
}


/* =========================================================
   الإصدار 1.5.7: إظهار ثابت لبوابة المدير العام وزر تسجيل الدخول
   ========================================================= */
.letters-competition-site {
  min-height: 100vh;
}

/* ضمان ظهور زر دخول المشرف في القائمة الرئيسية على جميع المتصفحات. */
.site-main-menu {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.site-main-menu .supervisor-login-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 430px) {
  .topbar-controls {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .site-main-menu { flex: 1 1 100% !important; }
  .letters-viewer-mode .site-main-menu .supervisor-login-btn {
    width: 100%;
  }
}


/* الإصدار 1.5.8: زر دخول المدير أعلى صفحة الهبوط بجوار أزرار التحكم. */
.topbar-controls .site-main-menu{order:0}
.topbar-controls .top-actions{order:1}
.supervisor-login-btn{min-width:142px}
@media(max-width:700px){.supervisor-login-btn{min-width:0;padding-inline:12px}.supervisor-login-text{display:inline}}
@media(max-width:390px){.supervisor-login-btn{width:100%;font-size:12px}.supervisor-login-icon{font-size:15px}}


/* الإصدار 1.6.0: إعلان الفوز والتصفيق بعد قطع مسار اللوحة فقط. */
.round-win-message {
  --winner-color: var(--orange);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: min(90vw, 540px);
  padding: clamp(22px, 4vw, 38px) clamp(20px, 5vw, 48px);
  display: grid;
  justify-items: center;
  gap: 5px;
  border: 3px solid rgba(255,255,255,.86);
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.25), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--winner-color) 86%, #000 14%), #35165b);
  box-shadow: 0 28px 80px rgba(13,3,25,.52), 0 0 0 8px color-mix(in srgb, var(--winner-color) 24%, transparent);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -44%) scale(.72);
  transition: opacity .28s ease, transform .42s cubic-bezier(.2,.8,.2,1.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.round-win-message.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.round-win-icon {
  display: block;
  font-size: clamp(42px, 8vw, 74px);
  line-height: 1;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
  animation: roundWinIconBounce .72s ease both;
}
.round-win-message strong {
  color: var(--yellow);
  font-size: clamp(34px, 7vw, 66px);
  font-weight: 1000;
  line-height: 1.05;
  text-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.round-win-message b {
  font-size: clamp(23px, 4.8vw, 42px);
  font-weight: 1000;
  line-height: 1.25;
}
.round-win-message small {
  min-height: 1.5em;
  margin-top: 6px;
  padding: 7px 18px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,.18);
  font-size: clamp(16px, 3vw, 24px);
  font-weight: 900;
}
@keyframes roundWinIconBounce {
  0% { transform: scale(.25) rotate(-18deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@media (max-width: 520px) {
  .round-win-message { border-radius: 22px; }
}

/* =========================================================
   الإصدار 1.6.1: اختيار الحرف من شاشة مستقلة لكل فريق
   ========================================================= */
.remote-links-dialog {
  width: min(94vw, 820px);
  max-height: min(88vh, 760px);
  overflow: auto;
}
.remote-links-head {
  padding-inline-end: 44px;
}
.remote-links-head h2 {
  margin: 4px 0 8px;
  font-size: clamp(25px, 4vw, 36px);
}
.remote-links-head p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}
.team-remote-links {
  margin-top: 20px;
  display: grid;
  gap: 11px;
}
.team-remote-link {
  --remote-team-color: var(--orange);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-inline-start: 5px solid var(--remote-team-color);
  border-radius: 18px;
  background: rgba(255,255,255,.075);
}
.team-remote-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.team-remote-identity > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #fff;
  background: var(--remote-team-color);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--remote-team-color) 35%, transparent);
  font-style: normal;
  font-size: 18px;
  font-weight: 1000;
}
.team-remote-identity span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.team-remote-identity strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #fff;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-remote-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.team-remote-actions a,
.team-remote-actions button {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.1);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.team-remote-actions a {
  border-color: color-mix(in srgb, var(--remote-team-color) 70%, #fff 30%);
  background: var(--remote-team-color);
}
.team-remote-actions a:hover,
.team-remote-actions button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.remote-links-note {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(255,211,66,.28);
  border-radius: 14px;
  color: #f5e8b5;
  background: rgba(255,211,66,.08);
  font-size: 12px;
  line-height: 1.8;
}

@media (max-width: 620px) {
  .team-remote-link {
    align-items: stretch;
    flex-direction: column;
  }
  .team-remote-actions {
    width: 100%;
  }
  .team-remote-actions a,
  .team-remote-actions button {
    flex: 1 1 50%;
  }
}
.team-screens-top-btn {
  width: auto;
  min-width: 46px;
  padding-inline: 12px;
  gap: 7px;
}
.team-screens-top-btn b {
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .team-screens-top-btn {
    width: 36px;
    min-width: 36px;
    padding-inline: 0;
  }
  .team-screens-top-btn b { display: none; }
}

/* =========================================================
   الإصدار 1.6.3: صقل بصري احترافي شامل للواجهة والأزرار والحروف
   ========================================================= */
:root {
  --ui-font: "Segoe UI", Tahoma, Arial, system-ui, sans-serif;
  --ui-surface: rgba(255,255,255,.095);
  --ui-surface-strong: rgba(255,255,255,.145);
  --ui-border: rgba(255,255,255,.22);
  --ui-shadow-soft: 0 14px 34px rgba(20,5,37,.24);
  --ui-shadow-button: 0 9px 20px rgba(20,5,37,.24), inset 0 1px rgba(255,255,255,.22);
}

body,
button,
input,
select,
textarea {
  font-family: var(--ui-font);
}
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  line-height: 1.25;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(255,211,66,.95);
  outline-offset: 3px;
}

/* الشريط العلوي والهوية. */
.topbar {
  border-bottom-color: rgba(255,255,255,.2);
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 38%),
    rgba(35,11,61,.88);
  box-shadow: 0 12px 34px rgba(15,3,29,.3), inset 0 -1px rgba(255,255,255,.07);
}
.brand-mark {
  background: linear-gradient(145deg, #ffffff, #eee2fb);
  filter: drop-shadow(0 9px 14px rgba(0,0,0,.26));
}
.brand-mark::after {
  background: conic-gradient(from 35deg, var(--orange), var(--yellow), var(--teal), var(--purple-600), var(--orange));
}
.brand h1 {
  line-height: 1.25;
  letter-spacing: -.015em;
  text-shadow: 0 3px 12px rgba(20,5,38,.3);
}
.brand p {
  line-height: 1.65;
}
.icon-btn {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.065));
  box-shadow: var(--ui-shadow-button);
  font-size: 18px;
  font-weight: 900;
  transition: transform .2s ease, filter .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.icon-btn:hover {
  border-color: rgba(255,255,255,.42);
  background: linear-gradient(145deg, rgba(255,255,255,.23), rgba(255,255,255,.1));
  box-shadow: 0 12px 25px rgba(16,4,30,.31), inset 0 1px rgba(255,255,255,.28);
}
.icon-btn:active,
.supervisor-login-btn:active {
  transform: translateY(1px) scale(.98);
}
.supervisor-login-btn {
  border-color: rgba(255,255,255,.34);
  background: linear-gradient(135deg, #ff8a6d 0%, var(--orange) 46%, #d94831 100%);
  box-shadow: 0 11px 24px rgba(215,68,45,.3), inset 0 1px rgba(255,255,255,.32), inset 0 -1px rgba(87,19,11,.18);
  letter-spacing: 0;
}
.supervisor-login-icon {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18));
}

/* البطاقات والعناوين والنصوص. */
.card {
  border-color: rgba(255,255,255,.21);
  box-shadow: 0 26px 72px rgba(20,5,38,.38), inset 0 1px rgba(255,255,255,.08);
}
.board-card {
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.11), transparent 31%),
    radial-gradient(circle at 15% 92%, rgba(255,118,87,.17), transparent 28%),
    radial-gradient(circle at 88% 84%, rgba(16,170,164,.16), transparent 30%),
    linear-gradient(145deg, #51277c 0%, #32144f 57%, #431d68 100%);
}
.board-toolbar h2,
.question-dialog h2,
.setup-head h2,
.admin-header h2,
.remote-links-head h2 {
  font-weight: 900;
  letter-spacing: -.018em;
}
.board-toolbar h2 {
  line-height: 1.45;
  text-shadow: 0 3px 12px rgba(20,5,38,.28);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid rgba(255,231,143,.24);
  border-radius: 999px;
  background: rgba(255,211,66,.08);
  font-weight: 900;
  line-height: 1;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(255,211,66,.13);
}
.board-stats span {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(145deg, rgba(22,5,40,.4), rgba(255,255,255,.075));
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 8px 18px rgba(20,5,38,.14);
  font-weight: 700;
}
.board-stats b {
  color: var(--yellow);
  font-size: 15px;
  font-weight: 1000;
}
.edge-label {
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 11px 25px rgba(20,5,38,.25), inset 0 1px rgba(255,255,255,.25);
  letter-spacing: -.01em;
}
.legend {
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  background: rgba(24,6,42,.22);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
  line-height: 1.6;
}
.legend span {
  font-weight: 700;
}
.legend-hex {
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.2));
}
.viewer-notice {
  box-shadow: 0 10px 24px rgba(20,5,38,.16), inset 0 1px rgba(255,255,255,.09);
  line-height: 1.7;
}

/* إطار اللوحة والخلايا السداسية. */
.classic-board-frame {
  border-width: 7px;
  border-color: #080709;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.07), transparent 47%),
    linear-gradient(145deg, #1b191d, #050506 72%);
  box-shadow:
    0 30px 65px rgba(11,2,22,.5),
    0 0 0 5px rgba(255,255,255,.12),
    0 0 0 7px rgba(22,6,40,.42),
    inset 0 0 0 2px rgba(255,255,255,.08);
}
.classic-board-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.07), transparent 22% 77%, rgba(255,255,255,.035));
}
.classic-lane span {
  background: #050505;
}
.classic-lane span::after {
  background: linear-gradient(145deg, color-mix(in srgb, var(--lane-color) 72%, #fff 28%), var(--lane-color) 48%, color-mix(in srgb, var(--lane-color) 75%, #000 25%));
  box-shadow: inset 0 2px 4px rgba(255,255,255,.2), inset 0 -3px 5px rgba(0,0,0,.22);
}
.classic-letters-board .letter-cell {
  color: #161118;
  background: #050505;
  font-family: var(--ui-font);
  font-weight: 1000;
  letter-spacing: -.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(55,31,12,.12);
  transform-origin: center;
  transition: transform .17s ease, filter .17s ease, color .17s ease, opacity .17s ease;
}
.classic-letters-board .letter-cell::before {
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.95), transparent 26%),
    linear-gradient(145deg, #fffef4 0%, #f6f0d8 56%, #ded5ae 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.78), inset 0 -3px 5px rgba(79,59,20,.16);
}
.classic-letters-board .letter-cell:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.055);
  filter: drop-shadow(0 9px 13px rgba(0,0,0,.48)) brightness(1.04);
}
.classic-letters-board .letter-cell:active:not(:disabled) {
  transform: scale(.96);
}
.classic-letters-board .letter-cell.team-0,
.classic-letters-board .letter-cell.team-1,
.classic-letters-board .letter-cell.team-2,
.classic-letters-board .letter-cell.team-3,
.classic-letters-board .letter-cell.team-4,
.classic-letters-board .letter-cell.team-5,
.classic-letters-board .letter-cell.team-6,
.classic-letters-board .letter-cell.team-7,
.classic-letters-board .letter-cell.wrong {
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.classic-letters-board .letter-cell.team-0::before,
.classic-letters-board .letter-cell.correct::before {
  background: linear-gradient(145deg, #ff4652 0%, #e40013 58%, #aa000d 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.26), inset 0 -4px 6px rgba(85,0,7,.24);
}
.classic-letters-board .letter-cell.team-1::before {
  background: linear-gradient(145deg, #2dbd41 0%, #087f16 58%, #034e0b 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.25), inset 0 -4px 6px rgba(0,65,8,.25);
}
.classic-letters-board .letter-cell.team-2::before { background: linear-gradient(145deg,#ed63a7,#cf2678 70%,#8f1550); }
.classic-letters-board .letter-cell.team-3::before { background: linear-gradient(145deg,#ffe782,#e7b91d 70%,#a87b00); }
.classic-letters-board .letter-cell.team-4::before { background: linear-gradient(145deg,#79a7ff,#2862c6 70%,#173c82); }
.classic-letters-board .letter-cell.team-5::before { background: linear-gradient(145deg,#9edb82,#438f31 70%,#275d1b); }
.classic-letters-board .letter-cell.team-6::before { background: linear-gradient(145deg,#c29be8,#7040a5 70%,#46246f); }
.classic-letters-board .letter-cell.team-7::before { background: linear-gradient(145deg,#f3ae69,#bd6414 70%,#7a3b07); }
.classic-letters-board .letter-cell.wrong::before {
  background: linear-gradient(145deg,#7d7a82,#4f4c53 66%,#2d2b30);
}
.classic-letters-board .letter-cell.exhausted {
  color: #777177;
  opacity: .82;
  text-shadow: none;
}
.classic-letters-board .letter-cell.exhausted::before {
  background: linear-gradient(145deg,#e6e1d0,#c9c2aa);
}

/* بطاقات الفرق ولوحة النتيجة. */
.scoreboard-card,
.control-card {
  border-color: rgba(255,255,255,.2);
  background:
    radial-gradient(circle at 85% 5%, rgba(255,255,255,.09), transparent 28%),
    linear-gradient(155deg, rgba(87,43,130,.94), rgba(42,16,70,.96));
  box-shadow: 0 24px 60px rgba(19,4,35,.34), inset 0 1px rgba(255,255,255,.08);
}
.show-logo strong {
  letter-spacing: -.04em;
  text-shadow: 0 5px 0 rgba(45,15,73,.32), 0 9px 18px rgba(12,2,24,.3);
}
.round-pill,
.current-turn {
  border-color: rgba(255,255,255,.19);
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(20,5,36,.2));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 9px 20px rgba(20,5,38,.14);
}
.round-pill strong,
.current-turn strong {
  text-shadow: 0 2px 7px rgba(0,0,0,.25);
}
.team-card {
  border-color: rgba(255,255,255,.17);
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(22,6,39,.16));
  box-shadow: inset 0 1px rgba(255,255,255,.075), 0 8px 20px rgba(19,4,35,.12);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.team-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.27);
}
.team-card.active {
  transform: translateY(-2px);
  box-shadow: 0 13px 28px color-mix(in srgb, var(--team-color) 25%, transparent), inset 0 1px rgba(255,255,255,.16);
}
.team-name {
  line-height: 1.45;
  letter-spacing: -.01em;
}
.team-score {
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 10px rgba(0,0,0,.28);
}
.score-actions button {
  min-width: 30px;
  min-height: 30px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow: inset 0 1px rgba(255,255,255,.12);
  font-weight: 1000;
  transition: transform .16s ease, background .16s ease;
}
.score-actions button:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.2);
}

/* نظام أزرار موحّد. */
.control-btn,
.secondary-btn,
.primary-btn,
.success-btn,
.danger-btn,
.danger-outline-btn,
.fullscreen-cut-turn,
.team-remote-actions a,
.team-remote-actions button {
  min-height: 44px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border-width: 1px;
  border-style: solid;
  font-weight: 900;
  letter-spacing: -.01em;
  box-shadow: var(--ui-shadow-button);
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.control-btn,
.secondary-btn {
  border-color: rgba(255,255,255,.2);
  color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
}
.control-btn.primary,
.primary-btn {
  color: #342044;
  border-color: rgba(255,255,255,.35);
  background: linear-gradient(135deg, #ffe784 0%, var(--yellow) 56%, #e9b916 100%);
  box-shadow: 0 10px 22px rgba(214,166,11,.23), inset 0 1px rgba(255,255,255,.62), inset 0 -1px rgba(115,78,0,.16);
}
.success-btn {
  border-color: rgba(255,255,255,.28);
  background: linear-gradient(135deg, #20c6bd 0%, var(--teal) 52%, #08766f 100%);
  box-shadow: 0 10px 22px rgba(8,132,127,.25), inset 0 1px rgba(255,255,255,.3);
}
.danger-btn {
  border-color: rgba(255,255,255,.25);
  background: linear-gradient(135deg, #ff7b82 0%, #e34452 54%, #ad2733 100%);
  box-shadow: 0 10px 22px rgba(185,39,51,.25), inset 0 1px rgba(255,255,255,.28);
}
.danger-outline-btn {
  color: #ffd8db;
  border-color: rgba(255,126,137,.5);
  background: linear-gradient(145deg, rgba(224,67,82,.16), rgba(224,67,82,.07));
}
.cut-turn-control,
.cut-turn-btn,
.fullscreen-cut-turn {
  border-color: rgba(255,255,255,.32);
  background: linear-gradient(135deg, #8d56bf, #613293 55%, #44206d);
  box-shadow: 0 10px 23px rgba(55,20,85,.3), inset 0 1px rgba(255,255,255,.24);
}
.control-btn:hover,
.secondary-btn:hover,
.primary-btn:hover,
.success-btn:hover,
.danger-btn:hover,
.danger-outline-btn:hover,
.fullscreen-cut-turn:hover,
.team-remote-actions a:hover,
.team-remote-actions button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.04);
  box-shadow: 0 14px 28px rgba(16,4,30,.29), inset 0 1px rgba(255,255,255,.25);
}
.control-btn:active,
.secondary-btn:active,
.primary-btn:active,
.success-btn:active,
.danger-btn:active,
.danger-outline-btn:active,
.fullscreen-cut-turn:active,
.team-remote-actions a:active,
.team-remote-actions button:active {
  transform: translateY(1px) scale(.985);
}
button:disabled,
.control-btn:disabled,
.secondary-btn:disabled,
.primary-btn:disabled,
.success-btn:disabled,
.danger-btn:disabled {
  filter: grayscale(.25);
  box-shadow: none;
}
.text-btn {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(255,211,66,.24);
  border-radius: 10px;
  background: rgba(255,211,66,.075);
  transition: background .18s ease, transform .18s ease;
}
.text-btn:hover {
  background: rgba(255,211,66,.14);
  transform: translateY(-1px);
}
.big {
  min-height: 56px;
  font-size: 17px;
}

/* المؤقت والسجل. */
.timer-title span,
.section-head h3 {
  font-weight: 900;
  letter-spacing: -.01em;
}
.timer-ring {
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 17px 40px rgba(18,4,34,.25), inset 0 1px rgba(255,255,255,.1);
}
.timer-inner strong {
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 13px rgba(0,0,0,.27);
}
.history-item {
  border-color: rgba(255,255,255,.14);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(20,5,36,.1));
  box-shadow: inset 0 1px rgba(255,255,255,.05);
  line-height: 1.55;
}
.history-item b {
  font-weight: 900;
}

/* النوافذ والأسئلة والنماذج. */
.modal-backdrop {
  background: rgba(15,3,28,.86);
  backdrop-filter: blur(14px) saturate(.9);
}
.modal-dialog {
  border-color: rgba(255,255,255,.23);
  background:
    radial-gradient(circle at 82% 6%, rgba(255,255,255,.11), transparent 28%),
    linear-gradient(155deg, #6a38a0, #3b175f 72%);
  box-shadow: 0 38px 110px rgba(12,2,24,.66), inset 0 1px rgba(255,255,255,.08);
}
.modal-close {
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(22,5,39,.25));
  box-shadow: 0 8px 19px rgba(15,3,28,.22), inset 0 1px rgba(255,255,255,.13);
  font-weight: 500;
  transition: transform .18s ease, background .18s ease;
}
.modal-close:hover {
  transform: rotate(5deg) scale(1.05);
  background: linear-gradient(145deg, #ef6570, #b72c3a);
}
.question-team-ribbon,
.question-meta span,
.question-timer {
  border-color: rgba(255,255,255,.2);
  background: linear-gradient(145deg, rgba(20,5,36,.34), rgba(255,255,255,.07));
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.question-team-ribbon {
  font-weight: 800;
}
.question-letter {
  color: #28113f;
  background:
    radial-gradient(circle at 35% 22%, #fff, transparent 30%),
    linear-gradient(145deg, #fffef5, #eee3c2);
  border: 4px solid #080709;
  font-family: var(--ui-font);
  font-weight: 1000;
  text-shadow: 0 1px rgba(255,255,255,.8);
  filter: drop-shadow(0 10px 0 #4b2378) drop-shadow(0 18px 22px rgba(24,4,44,.36));
}
.question-dialog h2 {
  line-height: 1.85;
  text-shadow: 0 3px 12px rgba(18,4,34,.22);
}
.answer-box {
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(135deg, #fff7c9 0%, #ffe36a 54%, #f3c326 100%);
  box-shadow: 0 14px 30px rgba(18,4,34,.25), inset 0 1px rgba(255,255,255,.7);
}
.answer-box strong {
  font-weight: 1000;
  line-height: 1.55;
}
.form-grid label,
.question-form label {
  font-weight: 800;
  line-height: 1.55;
}
.form-grid input,
.question-form input,
.question-form select,
.question-form textarea,
.admin-toolbar input,
.admin-toolbar select,
.team-input-row input {
  min-height: 46px;
  border-color: rgba(255,255,255,.21);
  background: linear-gradient(145deg, rgba(18,4,33,.37), rgba(255,255,255,.055));
  box-shadow: inset 0 1px 3px rgba(0,0,0,.13);
  font-weight: 700;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-grid input:focus,
.question-form input:focus,
.question-form select:focus,
.question-form textarea:focus,
.admin-toolbar input:focus,
.admin-toolbar select:focus,
.team-input-row input:focus {
  border-color: var(--yellow);
  background: rgba(20,5,36,.45);
  box-shadow: 0 0 0 4px rgba(255,211,66,.12), inset 0 1px 3px rgba(0,0,0,.13);
}
.team-input-row button {
  border: 1px solid rgba(255,132,143,.25);
  background: linear-gradient(145deg, rgba(238,91,101,.23), rgba(238,91,101,.11));
  font-weight: 900;
}
.summary-box,
.questions-table-wrap {
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.questions-table th {
  font-weight: 900;
}
.questions-table tbody tr {
  transition: background .16s ease;
}
.questions-table tbody tr:hover {
  background: rgba(255,255,255,.045);
}
.table-actions button {
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9px;
  font-weight: 800;
}

/* شاشات الفرق ورسالة الفوز والفوتر. */
.team-remote-link {
  border-color: rgba(255,255,255,.19);
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(20,5,36,.12));
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 9px 22px rgba(18,4,34,.13);
}
.team-remote-identity strong {
  font-weight: 900;
  line-height: 1.45;
}
.team-remote-identity > i {
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--remote-team-color) 38%, transparent), inset 0 1px rgba(255,255,255,.24);
}
.remote-links-note {
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.round-win-message {
  border-width: 4px;
  box-shadow: 0 32px 90px rgba(10,2,20,.62), 0 0 0 9px color-mix(in srgb, var(--winner-color) 26%, transparent), inset 0 1px rgba(255,255,255,.17);
}
.round-win-message strong,
.round-win-message b,
.round-win-message small {
  letter-spacing: -.025em;
}

@media (max-width: 790px) {
  .classic-board-frame { border-width: 5px; border-radius: 10px; }
  .control-btn,
  .secondary-btn,
  .primary-btn,
  .success-btn,
  .danger-btn,
  .danger-outline-btn { min-height: 46px; }
  .question-dialog h2 { line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   الإصدار 1.6.4: تحسين شاشة الجوال وإظهار ملء الشاشة بوضوح
   ========================================================= */
@media (max-width: 790px) {
  .topbar {
    position: sticky;
    min-height: auto;
    padding: 10px 10px 9px;
    gap: 9px;
    background: linear-gradient(145deg, rgba(37,16,63,.96), rgba(73,29,114,.93));
    box-shadow: 0 12px 34px rgba(12,2,24,.34), inset 0 -1px rgba(255,255,255,.08);
  }
  .brand-mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    font-size: 26px;
  }
  .brand-mark span { width: 35px; height: 35px; }
  .brand h1 { font-size: 18px; line-height: 1.2; }
  .brand p { display: none; }
  .topbar-controls {
    gap: 6px;
  }
  .top-actions {
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  #fullscreenBtn {
    width: auto;
    min-width: 104px;
    padding-inline: 11px;
    display: inline-flex;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #231038;
    border-color: rgba(255,255,255,.72);
    background: linear-gradient(135deg, #fff8c8, #ffd342 62%, #e4ae0e);
    box-shadow: 0 9px 22px rgba(222,168,4,.26), inset 0 1px rgba(255,255,255,.72);
    font-size: 18px;
    font-weight: 1000;
  }
  #fullscreenBtn::after {
    content: "ملء الشاشة";
    font-size: 11px;
    font-weight: 1000;
    white-space: nowrap;
  }
  #fullscreenBtn.is-active::after { content: "خروج"; }
  .layout {
    padding: 9px;
    gap: 10px;
  }
  .board-card,
  .scoreboard-card,
  .control-card {
    border-radius: 20px;
  }
  .board-card {
    min-height: 0;
    padding: 14px 9px 16px;
  }
  .board-toolbar h2 { font-size: clamp(19px, 5.3vw, 24px); }
  .board-stats { gap: 5px; }
  .board-stats span { padding: 6px 8px; font-size: 10px; }
  .classic-board-frame {
    width: 100%;
    border-width: 5px;
    box-shadow: 0 18px 38px rgba(8,1,18,.48), 0 0 0 3px rgba(255,255,255,.1);
  }
  .classic-letters-board .letter-cell {
    font-size: clamp(17px, 5.2vw, 29px);
  }
}

@media (max-width: 430px) {
  .topbar-controls {
    grid-template-columns: 1fr;
  }
  .site-main-menu { width: 100%; }
  .supervisor-login-btn { width: 100%; }
  .top-actions { width: 100%; justify-content: center; }
  #fullscreenBtn { min-width: 122px; }
  .icon-btn { width: 42px; height: 42px; }
}

/* =========================================================
   الإصدار 1.6.6: إصلاح زر شاشات الفرق ومنع قص النص
   ========================================================= */
.team-screens-top-btn,
.top-actions .team-screens-top-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 132px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  gap: 8px !important;
  overflow: hidden !important;
  box-sizing: border-box;
  line-height: 1 !important;
  white-space: nowrap;
}
.team-screens-top-btn > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 18px;
  line-height: 1;
}
.team-screens-top-btn b {
  display: block !important;
  flex: 0 1 auto;
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
}

@media (max-width: 790px) {
  .team-screens-top-btn,
  .top-actions .team-screens-top-btn {
    min-width: 118px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding-inline: 10px !important;
    gap: 6px !important;
  }
  .team-screens-top-btn > span { font-size: 17px; }
  .team-screens-top-btn b {
    display: block !important;
    font-size: 11px;
    line-height: 1.2;
  }
}

@media (max-width: 520px) {
  .team-screens-top-btn,
  .top-actions .team-screens-top-btn {
    min-width: 104px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding-inline: 8px !important;
    gap: 5px !important;
    border-radius: 12px;
  }
  .team-screens-top-btn > span { font-size: 16px; }
  .team-screens-top-btn b {
    display: block !important;
    font-size: 10px;
    line-height: 1.2;
  }
}

/* =========================================================
   الإصدار 1.6.8: إرسال روابط شاشات الفرق عبر واتساب
   ========================================================= */
.team-remote-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(108px, 1fr));
  align-items: stretch;
  gap: 7px;
}
.team-remote-actions a,
.team-remote-actions button {
  width: 100%;
  min-width: 0;
  gap: 6px;
  white-space: nowrap;
}
.team-remote-actions .open-remote-screen {
  border-color: color-mix(in srgb, var(--remote-team-color) 70%, #fff 30%);
  background: var(--remote-team-color);
}
.team-remote-actions .whatsapp-share {
  border-color: rgba(255,255,255,.34);
  color: #fff;
  background: linear-gradient(145deg, #2fdd72, #16a94d);
  box-shadow: 0 8px 18px rgba(17,154,70,.28), inset 0 1px rgba(255,255,255,.25);
}
.team-remote-actions .whatsapp-share span {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 0;
}
.team-remote-actions .whatsapp-share span::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.team-remote-actions .whatsapp-share:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@media (max-width: 700px) {
  .team-remote-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .team-remote-actions .whatsapp-share {
    grid-column: 1 / -1;
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .team-remote-actions {
    grid-template-columns: 1fr;
  }
  .team-remote-actions .whatsapp-share {
    grid-column: auto;
  }
}


/* =========================================================
   الإصدار 1.7.0: توافق الجوالات والمتصفحات
   ========================================================= */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body,
.letters-competition-site,
.show-app {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}
button,
a,
input,
select,
textarea,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}
button,
a,
[role="button"] {
  touch-action: manipulation;
}
button {
  -webkit-appearance: none;
  appearance: none;
}
img,
svg,
video,
canvas { max-width: 100%; }

/* بديل بصري عندما لا يدعم المتصفح تمويه الخلفية. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar { background: rgba(43, 16, 75, .97); }
  .board-stats span,
  .icon-btn,
  .modal-dialog { background-color: rgba(48, 19, 78, .97); }
}

/* بديل لنسبة الأبعاد في الإصدارات القديمة نسبيًا. */
@supports not (aspect-ratio: 1 / 1) {
  .classic-board-frame {
    height: 0;
    padding-top: 68.493%;
  }
}

/* دعم ارتفاعات الجوال قبل dvh. */
#boardFullscreenTarget:fullscreen,
#boardFullscreenTarget:-webkit-full-screen,
#boardFullscreenTarget.is-pseudo-fullscreen {
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}

@media (hover: none), (pointer: coarse) {
  .icon-btn,
  .supervisor-login-btn,
  .control-btn,
  .primary-btn,
  .secondary-btn,
  .success-btn,
  .danger-btn,
  .letter-cell { min-height: 44px; }
  .classic-letters-board .letter-cell { min-height: 0; }
  .icon-btn:hover,
  .letter-cell:hover,
  button:hover { transform: none; }
}

@supports not selector(:focus-visible) {
  button:focus,
  a:focus,
  input:focus,
  select:focus,
  textarea:focus {
    outline: 3px solid #ffd342;
    outline-offset: 2px;
  }
}


/* v2.0.3 — التحكم في إظهار خيارات الإجابات */
.answer-display-setting{grid-column:1/-1;border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:rgba(255,255,255,.05)}
.answer-display-setting legend{padding:0 8px;font-weight:900;color:#fff}
.answer-mode-option{display:flex!important;align-items:center;gap:10px;padding:13px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.07);cursor:pointer}
.answer-mode-option:has(input:checked){border-color:#f2c84b;box-shadow:0 0 0 2px rgba(242,200,75,.2)}
.answer-mode-option input{width:20px;height:20px;accent-color:#f2c84b}
.answer-mode-option span{display:grid;gap:3px}.answer-mode-option b{font-size:15px}.answer-mode-option small{opacity:.75}
.question-choices{display:grid;grid-template-columns:1fr;gap:10px;margin:16px 0 4px}
.question-choice{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid rgba(53,22,91,.16);border-radius:15px;background:#fff;box-shadow:0 7px 18px rgba(31,7,58,.08);text-align:right}
.question-choice span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:var(--active-team,#35165b);color:#fff;font-weight:900}
.question-choice strong{font-size:clamp(16px,2vw,22px);color:#241136}
@media(max-width:700px){.answer-display-setting{grid-template-columns:1fr}.question-choice{padding:10px 12px}}


/* v2.0.4 — تحسين إعداد طريقة عرض السؤال */
.answer-display-setting{display:block}
.answer-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.answer-mode-status{display:inline-flex;align-items:center;margin:0 0 12px;padding:8px 13px;border-radius:999px;background:rgba(55,190,110,.18);border:1px solid rgba(102,235,156,.45);color:#dfffea;font-weight:900}
.answer-mode-status.is-oral{background:rgba(156,106,222,.2);border-color:rgba(190,150,245,.5);color:#f2e8ff}
.shuffle-choices-option{display:flex!important;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);cursor:pointer}
.shuffle-choices-option input{width:20px;height:20px;accent-color:#f2c84b}.shuffle-choices-option span{display:grid;gap:3px}.shuffle-choices-option small{opacity:.75}
.shuffle-choices-option.is-disabled{opacity:.45;cursor:not-allowed}
.answer-mode-preview{margin-top:12px;padding:14px;border-radius:15px;background:rgba(17,5,35,.3);border:1px dashed rgba(255,255,255,.22);display:grid;gap:8px}
.answer-mode-preview>span{font-size:12px;font-weight:900;color:#f2c84b}.answer-mode-preview>strong{font-size:17px}.answer-mode-preview>small{opacity:.78}
.answer-mode-preview>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.answer-mode-preview>div i{display:inline-grid;place-items:center;width:25px;height:25px;margin-inline-end:6px;border-radius:50%;background:#f2c84b;color:#321250;font-style:normal;font-weight:900}.answer-mode-preview>div b{font-size:13px}
.answer-mode-lock-note{margin:10px 2px 0;opacity:.7;font-size:12px}
@media(max-width:700px){.answer-mode-grid,.answer-mode-preview>div{grid-template-columns:1fr}}


/* v2.0.5 — إصلاح اكتمال نافذة «مسابقة جديدة» وعدم تداخلها مع شريط ووردبريس والفوتر */
#setupModal {
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: calc(18px + var(--wp-admin--admin-bar--height, 0px));
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  scroll-padding-block: 18px 110px;
}
#setupModal .modal-backdrop {
  position: fixed;
}
#setupModal .setup-dialog {
  width: min(95vw, 900px);
  max-height: none;
  overflow: visible;
  margin: auto 0;
  flex: 0 0 auto;
}
#setupModal .form-grid {
  align-items: start;
}
#setupModal #startGameBtn {
  position: sticky;
  bottom: 0;
  z-index: 6;
  width: 100%;
  margin-top: 16px;
  box-shadow: 0 -8px 24px rgba(25,6,44,.28), 0 12px 30px rgba(25,6,44,.35);
}
.admin-bar #setupModal {
  padding-top: calc(50px + env(safe-area-inset-top, 0px));
}
@media (max-width: 782px) {
  .admin-bar #setupModal { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 700px) {
  #setupModal {
    padding: calc(12px + var(--wp-admin--admin-bar--height, 0px)) 7px calc(122px + env(safe-area-inset-bottom, 0px));
  }
  #setupModal .setup-dialog {
    width: 100%;
    padding: 20px 12px;
    border-radius: 20px;
  }
  #setupModal .form-grid { grid-template-columns: 1fr; }
  #setupModal .answer-display-setting { grid-column: 1; }
}
@media (max-height: 760px) and (min-width: 701px) {
  #setupModal { padding-bottom: 90px; }
  #setupModal .setup-dialog { padding-block: 22px; }
  #setupModal .form-grid { margin-block: 14px; gap: 10px; }
  #setupModal .answer-mode-preview { display: none; }
}


/* v2.0.6 — توحيد بطاقات إعداد طريقة عرض السؤال */
#setupModal .answer-mode-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
#setupModal .answer-mode-option,
#setupModal .shuffle-choices-option{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:168px;
  margin:0;
  padding:18px 14px;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
#setupModal .answer-mode-option input,
#setupModal .shuffle-choices-option input{
  flex:0 0 auto;
  width:26px;
  height:26px;
  margin:0;
  accent-color:#f2c84b;
}
#setupModal .answer-mode-option span,
#setupModal .shuffle-choices-option span{
  width:100%;
  min-width:0;
  display:grid;
  gap:7px;
  justify-items:center;
}
#setupModal .answer-mode-option b,
#setupModal .shuffle-choices-option b{
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.35;
  overflow-wrap:anywhere;
}
#setupModal .answer-mode-option small,
#setupModal .shuffle-choices-option small{
  max-width:25ch;
  font-size:13px;
  line-height:1.55;
  opacity:.76;
  overflow-wrap:anywhere;
}
#setupModal .shuffle-choices-option:has(input:checked){
  border-color:#f2c84b;
  box-shadow:0 0 0 2px rgba(242,200,75,.2);
}
#setupModal .shuffle-choices-option.is-disabled{
  opacity:.45;
}
@media (max-width:900px){
  #setupModal .answer-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #setupModal .shuffle-choices-option{grid-column:1/-1;min-height:145px}
}
@media (max-width:620px){
  #setupModal .answer-mode-grid{grid-template-columns:1fr}
  #setupModal .shuffle-choices-option{grid-column:auto}
  #setupModal .answer-mode-option,
  #setupModal .shuffle-choices-option{min-height:132px;padding:16px 12px}
}

/* v2.0.8 — تفعيل اختيار الإجابة من بطاقات الخيارات */
.question-choice{
  width:100%;
  font:inherit;
  cursor:default;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.question-choice.is-selectable{cursor:pointer}
.question-choice.is-selectable:hover{
  transform:translateY(-2px);
  border-color:var(--active-team,#35165b);
  box-shadow:0 12px 24px rgba(31,7,58,.16);
}
.question-choice.is-selectable:focus-visible{outline:3px solid #ffd342;outline-offset:3px}
.question-choice.is-correct{
  background:#e7f9ee;
  border-color:#31a760;
  box-shadow:0 0 0 3px rgba(49,167,96,.17);
}
.question-choice.is-correct span{background:#21864a}
.question-choice.is-correct strong{color:#145d34}
.question-choice.is-wrong{
  background:#fff0f1;
  border-color:#d94b58;
  box-shadow:0 0 0 3px rgba(217,75,88,.15);
}
.question-choice.is-wrong span{background:#bd3441}
.question-choice.is-wrong strong{color:#8e2430}
.question-choices.is-resolved .question-choice:not(.is-correct):not(.is-wrong){opacity:.58}
.question-choice:disabled{cursor:default}


/* v2.0.8 — ربط بطاقات الإجابة بمحرك المسابقة وتفعيل النقر واللمس */
#questionChoices{position:relative;z-index:12;pointer-events:auto;max-width:760px;margin-inline:auto}
#questionChoices .question-choice{position:relative;z-index:13;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:rgba(242,200,75,.25);user-select:none}
#questionChoices[data-interactive="1"] .question-choice:not(:disabled){cursor:pointer}
#questionChoices[data-interactive="1"] .question-choice:not(:disabled):active{transform:scale(.985)}
.question-dialog .question-color-slice,.question-dialog::before{pointer-events:none}
.question-dialog{overflow-y:auto;overscroll-behavior:contain}
@media(max-height:900px){.question-dialog{max-height:96vh;min-height:0;padding-top:22px;padding-bottom:24px}.question-dialog h2{margin:12px auto;line-height:1.55}.question-letter{width:88px;height:78px;font-size:42px;margin-block:4px 8px}.question-choices{margin-top:10px;gap:8px}.question-choice{padding:10px 14px}.question-actions{margin-top:10px}}

/* v2.0.10 — منع زر بدء المسابقة من تغطية إعدادات عرض السؤال */
#setupModal {
  display: flex;
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
#setupModal .setup-dialog {
  position: relative;
  margin: 18px auto;
  max-height: none;
  overflow: visible;
}
#setupModal #startGameBtn {
  position: static;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  height: auto;
  width: 100%;
  margin: 22px 0 0;
  z-index: auto;
  box-shadow: 0 12px 30px rgba(25,6,44,.35);
}
#setupModal .answer-display-setting,
#setupModal .teams-builder {
  position: relative;
  z-index: 1;
}
#setupModal .teams-builder {
  margin-top: 20px;
}
@media (max-width: 700px) {
  #setupModal {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  #setupModal .setup-dialog {
    margin: 10px auto;
  }
  #setupModal #startGameBtn {
    min-height: 56px;
    margin-top: 18px;
  }
}


/* v2.0.11 — ضمان تفعيل زر بدء المسابقة بعد تعديل تخطيط النافذة */
#setupModal .setup-dialog{pointer-events:auto}
#setupModal #startGameBtn{
  position:relative;
  z-index:10;
  pointer-events:auto;
  touch-action:manipulation;
  cursor:pointer;
}
#setupModal #startGameBtn:disabled{pointer-events:none;cursor:not-allowed;opacity:.65}


/* v2.1.0 — ضمان ظهور لوحة اللعب بعد بدء المسابقة */
#app.show-app,
#app.game-started {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#setupModal[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
}
body:not(.modal-open) #setupModal:not(.open) {
  display: none !important;
}

/* =========================================================
   v2.1.1 — توحيد محاذاة الصفحة الرئيسية
   ========================================================= */
:root {
  --home-max-width: 1720px;
  --home-gap: clamp(14px, 1.4vw, 24px);
  --home-pad: clamp(12px, 1.6vw, 28px);
}

.show-app {
  width: 100%;
  min-height: 100vh;
}

.show-app > .topbar,
.show-app > .layout {
  box-sizing: border-box;
}

.show-app > .layout {
  width: min(var(--home-max-width), 100%);
  margin-inline: auto;
  padding: var(--home-pad);
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 370px);
  grid-template-areas: "board panel";
  gap: var(--home-gap);
  align-items: start;
  direction: rtl;
}

.show-app > .layout > .board-card {
  grid-area: board;
  width: 100%;
  min-width: 0;
  margin: 0;
  align-self: start;
}

.show-app > .layout > .show-panel {
  grid-area: panel;
  width: 100%;
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--home-gap);
  align-self: start;
  position: static;
  top: auto;
}

.show-app .scoreboard-card,
.show-app .control-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}

.show-app .board-toolbar,
.show-app .section-head,
.show-app .timer-title,
.show-app .round-pill,
.show-app .current-turn,
.show-app .quick-controls,
.show-app .timer-controls,
.show-app .history-mini {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .show-app > .layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 330px);
  }
}

@media (max-width: 900px) {
  .show-app > .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "board"
      "panel";
    align-items: stretch;
  }

  .show-app > .layout > .show-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .show-app .scoreboard-card,
  .show-app .control-card {
    height: 100%;
  }
}

@media (max-width: 650px) {
  .show-app > .layout {
    padding: 10px;
    gap: 10px;
  }

  .show-app > .layout > .show-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

/* =========================================================
   v2.4.2 — منع قص لوحة الحروف خلف الترويسة
   ========================================================= */
:root {
  --letters-admin-offset: 0px;
}

body.admin-bar {
  --letters-admin-offset: 32px;
}

.admin-bar .topbar {
  top: var(--letters-admin-offset);
}

html {
  scroll-padding-top: calc(var(--letters-admin-offset) + 92px);
}

/* في الشاشات الأفقية القصيرة تُقاس اللوحة بالارتفاع المتاح، لا بالعرض فقط. */
@media (min-width: 901px) and (max-height: 900px) {
  .show-app > .topbar {
    min-height: 72px;
    padding-block: 8px;
  }

  .show-app .brand-mark {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    font-size: 27px;
  }

  .show-app .brand-mark span {
    width: 37px;
    height: 37px;
  }

  .show-app > .layout {
    padding-block: 10px;
    gap: 14px;
  }

  .show-app > .layout > .board-card {
    min-height: 0;
    padding: 12px 14px;
  }

  .show-app .board-toolbar {
    min-height: 44px;
    padding: 0 2px 8px;
  }

  .show-app .board-toolbar .eyebrow,
  .show-app .team-edge-labels {
    display: none;
  }

  .show-app .board-toolbar h2 {
    margin: 0;
    font-size: 18px;
  }

  .show-app .classic-board-frame {
    width: min(100%, calc((100vh - var(--letters-admin-offset) - 215px) * 1.46));
    width: min(100%, calc((100dvh - var(--letters-admin-offset) - 215px) * 1.46));
    max-width: 980px;
    margin-inline: auto;
  }

  .show-app .legend {
    gap: 10px;
    padding: 6px 10px;
    margin-top: 7px;
    font-size: 11px;
  }

  .show-app .legend-hex {
    width: 15px;
    height: 13px;
  }
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --letters-admin-offset: 46px;
  }
}

/* =========================================================
   v2.4.3 — مؤقت مدمج وإظهار لوحة الحروف قبل نافذة البدء
   ========================================================= */
.show-app .control-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  grid-template-areas:
    "timer-title timer-ring"
    "timer-controls timer-ring"
    "timer-history timer-history";
  align-items: center;
  gap: 10px 12px;
}

.show-app .control-card .timer-title {
  grid-area: timer-title;
  align-self: end;
  margin: 0;
}

.show-app .control-card .timer-ring {
  grid-area: timer-ring;
  width: 118px;
  height: 102px;
  margin: 0 auto;
}

.show-app .control-card .timer-ring::after {
  inset: 8px;
}

.show-app .control-card .timer-inner strong {
  font-size: 39px;
}

.show-app .control-card .timer-controls {
  grid-area: timer-controls;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.show-app .control-card .timer-controls button {
  min-width: 0;
  min-height: 40px;
  padding-inline: 6px;
  font-size: 12px;
}

.show-app .control-card .history-mini {
  grid-area: timer-history;
  min-width: 0;
  margin-top: 2px;
}

.show-app .control-card .history-list {
  max-height: 125px;
}

@media (min-width: 901px) and (max-height: 900px) {
  .show-app > .layout > .show-panel {
    gap: 10px;
  }

  .show-app .scoreboard-card,
  .show-app .control-card {
    padding: 13px;
  }

  .show-app .show-logo {
    display: none;
  }

  .show-app .round-pill,
  .show-app .current-turn {
    margin-bottom: 8px;
    padding-block: 8px;
  }

  .show-app .current-turn {
    margin-top: 8px;
  }

  .show-app .control-card .history-list {
    max-height: 82px;
  }
}

@media (max-width: 420px) {
  .show-app .control-card {
    grid-template-columns: minmax(0, 1fr) 102px;
    gap: 9px;
    padding-inline: 12px;
  }

  .show-app .control-card .timer-ring {
    width: 102px;
    height: 88px;
  }

  .show-app .control-card .timer-inner strong {
    font-size: 34px;
  }
}

/* v2.4.4 — محاذاة لوحة الحروف مع بطاقة مؤقت المسابقة. */
.show-app > .layout > .board-card,
.show-app > .layout > .show-panel > .control-card {
  align-self: start;
  margin-top: 0;
}

.show-app > .layout > .show-panel > .control-card {
  order: 1;
}

.show-app > .layout > .show-panel > .scoreboard-card {
  order: 2;
}

/*
 * v2.4.5 — في الشاشات الواسعة تظهر النتائج واللوحة والمؤقت
 * في صف واحد؛ وبذلك لا تهبط بطاقة على حساب الأخرى.
 */
@media (min-width: 1251px) {
  .show-app > .layout {
    grid-template-columns:
      minmax(250px, 300px)
      minmax(560px, 1fr)
      minmax(250px, 300px);
    grid-template-areas: "scoreboard board timer";
    align-items: start;
  }

  .show-app > .layout > .board-card {
    grid-area: board;
  }

  .show-app > .layout > .show-panel {
    display: contents;
  }

  .show-app > .layout > .show-panel > .scoreboard-card {
    grid-area: scoreboard;
    order: initial;
    align-self: start;
  }

  .show-app > .layout > .show-panel > .control-card {
    grid-area: timer;
    order: initial;
    align-self: start;
  }
}

/* =========================================================
   v2.4.6 — ضبط احترافي لتوازن ومحاذاة الواجهات الثلاث
   ========================================================= */
.show-app > .layout {
  width: min(100%, 1720px);
  margin-inline: auto;
  gap: clamp(14px, 1.35vw, 24px);
}

.show-app > .layout > .board-card,
.show-app > .layout > .show-panel > .scoreboard-card,
.show-app > .layout > .show-panel > .control-card {
  min-width: 0;
  margin-block: 0;
}

.show-app .board-toolbar {
  min-height: 74px;
  align-items: center;
  gap: 18px;
}

.show-app .board-toolbar > div:first-child {
  min-width: 0;
}

.show-app .board-toolbar h2 {
  margin-top: 7px;
}

.show-app .board-stats {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.show-app .scoreboard-card,
.show-app .control-card {
  width: 100%;
}

@media (min-width: 1251px) {
  .show-app > .layout {
    grid-template-columns:
      minmax(270px, 310px)
      minmax(600px, 1fr)
      minmax(270px, 310px);
    align-items: stretch;
  }

  .show-app > .layout > .board-card,
  .show-app > .layout > .show-panel > .scoreboard-card,
  .show-app > .layout > .show-panel > .control-card {
    align-self: stretch;
  }

  .show-app > .layout > .show-panel > .scoreboard-card,
  .show-app > .layout > .show-panel > .control-card {
    height: 100%;
  }

  .show-app > .layout > .show-panel > .scoreboard-card {
    display: flex;
    flex-direction: column;
  }

  .show-app > .layout > .show-panel > .scoreboard-card .new-game-btn {
    margin-top: auto;
  }

  .show-app > .layout > .show-panel > .control-card {
    align-content: start;
  }
}

@media (min-width: 1051px) and (max-width: 1250px) {
  .show-app > .layout {
    grid-template-columns: minmax(570px, 1fr) minmax(300px, 340px);
    align-items: start;
  }

  .show-app > .layout > .show-panel {
    gap: 14px;
  }
}

@media (max-width: 790px) {
  .show-app > .layout {
    gap: 12px;
  }

  .show-app .board-toolbar {
    min-height: 0;
    align-items: flex-start;
  }

  .show-app .board-stats {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .show-app .board-toolbar {
    gap: 11px;
  }

  .show-app .board-stats {
    width: 100%;
  }

  .show-app .board-stats span {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding-inline: 8px;
  }
}

/* v2.5.0 final override — يسبق قواعد المؤقت القديمة في الأولوية. */
.show-app > .layout .control-card {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
}
.show-app > .layout .control-card .timer-title {
  order:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  margin:0;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:15px;
  background:rgba(25,7,47,.22);
  text-align:center;
}
.show-app > .layout .control-card .timer-title span {font-size:clamp(18px,1.6vw,23px);font-weight:1000}
.show-app > .layout .control-card .timer-title small {display:none}
.show-app > .layout .control-card .timer-ring {
  order:2;
  width:180px;
  height:156px;
  margin:0 auto;
}
.show-app > .layout .control-card .timer-ring::after {inset:11px}
.show-app > .layout .control-card .timer-inner strong {font-size:56px}
.show-app > .layout .control-card .timer-inner small {font-size:15px;font-weight:800}
.show-app > .layout .control-card .timer-controls {
  order:3;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  width:100%;
  margin:0;
}
.show-app > .layout .control-card .timer-controls button {
  min-width:0;
  min-height:54px;
  padding:10px 7px;
  font-size:clamp(14px,1.25vw,18px);
  font-weight:1000;
  white-space:nowrap;
}
.show-app > .layout .control-card .clear-history-btn {
  color:#fff0a8;
  border-color:rgba(255,211,66,.42);
  background:linear-gradient(145deg,rgba(255,211,66,.18),rgba(255,211,66,.07));
}
.show-app > .layout .control-card .history-mini {
  order:4;
  width:100%;
  margin:2px 0 0;
}
@media (max-width:420px) {
  .show-app > .layout .control-card {gap:13px}
  .show-app > .layout .control-card .timer-ring {width:150px;height:130px}
  .show-app > .layout .control-card .timer-inner strong {font-size:48px}
  .show-app > .layout .control-card .timer-controls {gap:5px}
  .show-app > .layout .control-card .timer-controls button {min-height:50px;padding-inline:3px;font-size:13px}
}

/* v2.5.2 final override — حجم وتمركز الحروف داخل اللوحة. */
.show-app .classic-letters-board .letter-cell {
  overflow:hidden;
  padding:0;
  font-size:clamp(18px,2.15vw,34px);
  line-height:1;
}
.show-app .classic-letters-board .letter-cell > span {
  position:relative;
  z-index:2;
  width:72%;
  height:72%;
  display:grid;
  place-items:center;
  line-height:.9;
  text-align:center;
  transform:translateY(-2%);
  pointer-events:none;
}
#boardFullscreenTarget:fullscreen .classic-letters-board .letter-cell,
#boardFullscreenTarget:-webkit-full-screen .classic-letters-board .letter-cell,
#boardFullscreenTarget.is-pseudo-fullscreen .classic-letters-board .letter-cell {
  font-size:clamp(24px,min(3.5vw,5.2vh),54px);
}
@media (max-width:790px) {
  .show-app .classic-letters-board .letter-cell {font-size:clamp(16px,4.2vw,27px)}
}
@media (max-width:520px) {
  .show-app .classic-letters-board .letter-cell {font-size:clamp(14px,4.6vw,22px)}
}

/* v2.5.3 — توسيط عنوان لوحة الحروف مع إبقاء الإحصاءات جانبًا. */
.show-app .board-toolbar {
  position:relative;
  justify-content:flex-start;
}
.show-app .board-toolbar > div:first-child {
  position:absolute;
  left:50%;
  top:50%;
  width:min(52%,650px);
  text-align:center;
  transform:translate(-50%,-50%);
}
.show-app .board-toolbar h2 {
  margin:0;
  text-align:center;
}
.show-app .board-toolbar .eyebrow {display:none}
.show-app .board-toolbar .board-stats {
  margin-inline-start:auto;
}
@media (max-width:790px) {
  .show-app .board-toolbar {
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .show-app .board-toolbar > div:first-child {
    position:static;
    width:100%;
    transform:none;
  }
  .show-app .board-toolbar .board-stats {
    justify-content:center;
    margin:9px 0 0;
  }
}

/* v2.5.4 — فصل العنوان عن العدادات لمنع التداخل نهائيًا. */
.show-app .board-toolbar {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto;
  justify-items:center;
  align-items:center;
  gap:12px;
  min-height:0;
  padding-block:8px 16px;
}
.show-app .board-toolbar > div:first-child {
  position:static;
  inset:auto;
  grid-row:1;
  width:100%;
  text-align:center;
  transform:none;
}
.show-app .board-toolbar h2 {
  width:100%;
  margin:0;
  text-align:center;
  line-height:1.35;
}
.show-app .board-toolbar .board-stats {
  grid-row:2;
  justify-content:center;
  margin:0;
}
@media (max-width:520px) {
  .show-app .board-toolbar {gap:9px;padding-bottom:12px}
  .show-app .board-toolbar h2 {font-size:clamp(18px,5.4vw,23px)}
}

/* v2.5.7 — احتواء نافذة السؤال كاملة في الشاشات الأفقية. */
@media (min-width:701px) and (max-height:900px) {
  #questionModal {
    padding:8px;
  }
  #questionModal .question-dialog {
    width:min(98vw,1120px);
    max-height:calc(100dvh - 16px);
    min-height:0;
    padding:10px 34px 14px;
    overflow-y:auto;
  }
  #questionModal .question-team-ribbon {
    margin-bottom:3px;
    padding:6px 16px;
  }
  #questionModal .question-letter {
    width:76px;
    height:66px;
    margin:3px auto 6px;
    font-size:36px;
    filter:drop-shadow(0 6px 0 #4b2378) drop-shadow(0 10px 12px rgba(24,4,44,.26));
  }
  #questionModal .question-meta span {
    padding:4px 9px;
  }
  #questionModal .question-dialog h2 {
    max-width:920px;
    margin:9px auto 10px;
    font-size:clamp(19px,2.25vw,29px);
    line-height:1.45;
  }
  #questionModal .question-choices {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px 10px;
    max-width:960px;
    margin:8px auto 5px;
  }
  #questionModal .question-choice {
    min-height:54px;
    padding:8px 12px;
    border-radius:13px;
  }
  #questionModal .question-choice span {
    flex-basis:30px;
    height:30px;
  }
  #questionModal .question-choice strong {
    font-size:clamp(15px,1.55vw,19px);
  }
  #questionModal .answer-box {
    margin:7px auto;
    padding:9px 15px;
  }
  #questionModal .answer-box strong {
    font-size:20px;
  }
  #questionModal .question-timer {
    margin:4px 0 7px;
    padding:5px 12px;
  }
  #questionModal .question-actions {
    gap:7px;
    margin-top:3px;
  }
  #questionModal .question-actions > * {
    min-height:40px;
    padding-block:7px;
  }
}

@media (min-width:701px) and (max-width:980px) and (max-height:900px) {
  #questionModal .question-choice {
    padding-inline:8px;
  }
  #questionModal .question-choice strong {
    font-size:15px;
  }
}

/* =========================================================
   v2.6.0 — إعادة تصميم احترافية لنافذة السؤال
   ========================================================= */
#questionModal .question-dialog {
  width:min(96vw,1100px);
  min-height:0;
  padding:24px clamp(28px,4vw,56px) 28px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.12),transparent 34%),
    linear-gradient(145deg,#532580 0%,#351251 58%,#28103f 100%);
  box-shadow:0 36px 100px rgba(12,2,23,.62),inset 0 1px rgba(255,255,255,.12);
  overflow-y:auto;
}
#questionModal .question-dialog::before {
  opacity:.11;
  background-size:110px 95px;
}
#questionModal .question-color-slice {
  width:12%;
  opacity:.55;
}
#questionModal .question-color-orange {
  clip-path:polygon(48% 0,100% 0,100% 100%,0 100%,56% 50%);
}
#questionModal .question-color-teal {
  clip-path:polygon(0 0,52% 0,44% 50%,100% 100%,0 100%);
}
#questionModal .modal-close {
  top:18px;
  left:18px;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px;
  background:rgba(19,5,33,.3);
  box-shadow:inset 0 1px rgba(255,255,255,.12);
}
#questionModal .question-team-ribbon {
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:80%;
  margin:0 auto 12px;
  padding:9px 20px;
  border-color:rgba(255,255,255,.22);
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(20,5,36,.22));
  box-shadow:0 10px 24px rgba(17,4,31,.18),inset 0 1px rgba(255,255,255,.1);
}
#questionModal .question-team-ribbon span {
  margin:0;
  color:#d9c9e9;
  font-size:12px;
}
#questionModal .question-team-ribbon strong {
  font-size:18px;
}
#questionModal .question-letter {
  width:92px;
  height:80px;
  margin:0 auto 10px;
  border:0;
  font-size:43px;
  background:linear-gradient(145deg,#fffef7,#f0e7c5);
  filter:drop-shadow(0 8px 0 #241033) drop-shadow(0 15px 20px rgba(12,2,23,.32));
}
#questionModal .question-meta {
  gap:7px;
  margin-top:3px;
}
#questionModal .question-meta span {
  padding:6px 12px;
  border-color:rgba(255,255,255,.2);
  background:rgba(20,5,36,.25);
  font-weight:800;
}
#questionModal .question-dialog h2 {
  max-width:900px;
  margin:16px auto 15px;
  padding:16px 24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:rgba(18,4,32,.18);
  box-shadow:inset 0 1px rgba(255,255,255,.07);
  font-size:clamp(22px,2.45vw,34px);
  line-height:1.6;
}
#questionModal .question-choices {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  max-width:980px;
  margin:0 auto 10px;
}
#questionModal .question-choice {
  min-height:76px;
  justify-content:flex-start;
  padding:13px 16px;
  border:1px solid rgba(62,31,78,.16);
  border-radius:18px;
  background:linear-gradient(145deg,#fff,#f7f3fa);
  box-shadow:0 12px 28px rgba(17,4,30,.2),inset 0 1px #fff;
}
#questionModal .question-choice span {
  flex:0 0 40px;
  width:40px;
  height:40px;
  background:linear-gradient(145deg,var(--active-team,#5b2d91),#301348);
  box-shadow:0 6px 14px rgba(37,13,54,.24),inset 0 1px rgba(255,255,255,.2);
  font-size:17px;
}
#questionModal .question-choice strong {
  min-width:0;
  color:#2d193a;
  font-size:clamp(16px,1.55vw,21px);
  line-height:1.45;
}
#questionModal .question-choice.is-selectable:hover {
  border-color:var(--active-team,#5b2d91);
  background:#fff;
  box-shadow:0 16px 34px rgba(16,4,30,.28),0 0 0 3px color-mix(in srgb,var(--active-team,#5b2d91) 16%,transparent);
}
#questionModal .answer-box {
  max-width:760px;
  margin:10px auto;
}
#questionModal .question-timer {
  margin:3px 0 10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(18,4,32,.27);
}
#questionModal .question-actions {
  gap:8px;
}
@media (min-width:701px) and (max-height:900px) {
  #questionModal .question-dialog {padding:12px 32px 15px}
  #questionModal .question-team-ribbon {margin-bottom:5px;padding-block:6px}
  #questionModal .question-letter {width:70px;height:61px;margin-bottom:6px;font-size:34px}
  #questionModal .question-dialog h2 {margin:8px auto;padding:10px 18px;font-size:clamp(19px,2.1vw,27px);line-height:1.42}
  #questionModal .question-choice {min-height:58px;padding:8px 12px}
  #questionModal .question-choice span {flex-basis:32px;width:32px;height:32px}
  #questionModal .question-timer {margin-block:2px 6px}
}
@media (max-width:700px) {
  #questionModal .question-dialog {width:100%;padding:20px 14px;border-radius:22px}
  #questionModal .question-color-slice {width:8%}
  #questionModal .question-choices {grid-template-columns:1fr;gap:8px}
  #questionModal .question-choice {min-height:58px;padding:9px 12px}
  #questionModal .question-dialog h2 {padding:12px 14px;font-size:clamp(19px,5.4vw,26px);line-height:1.5}
}

#setupModal .answer-controller-setting {
  margin-top:2px;
}
#setupModal .answer-controller-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:620px) {
  #setupModal .answer-controller-grid {grid-template-columns:1fr}
}

/* v2.9.1 — قفل الحروف عند عدم وجود مسابقة نشطة. */
.classic-letters-board .letter-cell.game-inactive {
  color:#81798a;
  cursor:not-allowed;
  opacity:.72;
  filter:grayscale(.35) brightness(.86);
}
.classic-letters-board .letter-cell.game-inactive::before {
  background:linear-gradient(145deg,#e5e0d2,#c5beaa);
}
.classic-letters-board .letter-cell.game-inactive:hover {
  transform:none;
  filter:grayscale(.35) brightness(.86);
}

/* v2.9.0 — صلاحية تدخل المشرف في وضع إجابة المتسابق. */
.supervisor-answer-override {
  width:min(100%,760px);
  margin:0 auto 9px;
  padding:9px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(255,211,66,.35);
  border-radius:14px;
  color:#f8edff;
  background:linear-gradient(145deg,rgba(255,211,66,.13),rgba(26,7,43,.2));
  box-shadow:inset 0 1px rgba(255,255,255,.08);
  text-align:center;
}
.supervisor-answer-override[hidden] {display:none!important}
.supervisor-answer-override span {font-size:17px}
.supervisor-answer-override b {color:#ffe78f;font-size:13px}
.supervisor-answer-override small {color:#d8c9e8;font-size:11px}
@media (max-width:620px) {
  .supervisor-answer-override {flex-wrap:wrap;padding:8px 10px}
  .supervisor-answer-override small {width:100%}
}

/* =========================================================
   v3.0.0 — هوية بصرية احترافية شاملة وتجربة عرض سينمائية
   ========================================================= */
:root {
  --pro-purple-1000:#160720;
  --pro-purple-950:#210b35;
  --pro-purple-900:#301048;
  --pro-purple-800:#49206d;
  --pro-purple-700:#69379a;
  --pro-gold:#ffd75e;
  --pro-gold-deep:#dcae22;
  --pro-cyan:#20d4c7;
  --pro-coral:#ff765f;
  --pro-glass:rgba(255,255,255,.095);
  --pro-glass-strong:rgba(255,255,255,.145);
  --pro-border:rgba(255,255,255,.2);
  --pro-shadow:0 28px 75px rgba(10,2,20,.42);
  --pro-shadow-soft:0 16px 38px rgba(13,3,25,.25);
}

html {
  background:#1c092d;
}

body.letters-competition-theme,
body.home {
  background:
    radial-gradient(circle at 8% 10%,rgba(255,118,95,.23),transparent 25%),
    radial-gradient(circle at 91% 85%,rgba(32,212,199,.2),transparent 28%),
    radial-gradient(circle at 52% -15%,rgba(145,82,197,.3),transparent 39%),
    linear-gradient(135deg,var(--pro-purple-1000),#3d155d 47%,#27103f 100%);
  background-attachment:fixed;
}

.letters-competition-site {
  position:relative;
  isolation:isolate;
}

.letters-competition-site::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.4;
  background:
    linear-gradient(120deg,transparent 0 22%,rgba(255,255,255,.025) 22.2% 22.7%,transparent 22.9% 48%,rgba(255,255,255,.018) 48.2% 48.6%,transparent 48.8%),
    radial-gradient(circle at center,transparent 0 58%,rgba(8,2,17,.23) 100%);
  background-size:240px 180px,100% 100%;
}

.show-app > .topbar {
  min-height:88px;
  padding-inline:clamp(14px,2.2vw,36px);
  border-bottom:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 20% 0,rgba(255,255,255,.1),transparent 28%),
    linear-gradient(90deg,rgba(31,9,51,.96),rgba(74,29,108,.92) 52%,rgba(31,9,51,.96));
  box-shadow:0 16px 45px rgba(8,2,17,.34),inset 0 -1px rgba(255,255,255,.06);
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
}

.show-app .site-brand-logo {
  width:clamp(230px,23vw,330px);
  height:auto;
  max-height:74px;
  filter:drop-shadow(0 9px 18px rgba(7,1,16,.34));
}

.show-app .topbar-controls {
  gap:12px;
}

.show-app .top-actions {
  gap:8px;
  padding:5px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:rgba(10,2,21,.17);
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}

.show-app .icon-btn,
.show-app .supervisor-login-btn {
  min-height:44px;
  border-radius:14px;
}

.show-app .icon-btn {
  border-color:rgba(255,255,255,.21);
  background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.055));
}

.show-app .supervisor-login-btn {
  border-color:rgba(255,255,255,.34);
  background:linear-gradient(135deg,#ff947a 0%,var(--pro-coral) 48%,#d64a34 100%);
  box-shadow:0 12px 25px rgba(198,61,40,.28),inset 0 1px rgba(255,255,255,.35);
}

.show-app > .layout {
  padding-block:clamp(14px,1.8vw,28px) clamp(22px,3vw,48px);
}

.show-app .card {
  border:1px solid var(--pro-border);
  box-shadow:var(--pro-shadow),inset 0 1px rgba(255,255,255,.09);
}

.show-app > .layout > .board-card {
  position:relative;
  border-radius:30px;
  background:
    radial-gradient(circle at 52% 0,rgba(255,255,255,.13),transparent 31%),
    radial-gradient(circle at 8% 95%,rgba(255,118,95,.18),transparent 27%),
    radial-gradient(circle at 94% 88%,rgba(32,212,199,.15),transparent 28%),
    linear-gradient(145deg,#5a2a83 0%,#35134f 54%,#421a62 100%);
  overflow:hidden;
}

.show-app > .layout > .board-card::before {
  content:"";
  position:absolute;
  inset:1px;
  pointer-events:none;
  border-radius:29px;
  background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 20% 78%,rgba(255,255,255,.055));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
}

.show-app .board-toolbar {
  position:relative;
  z-index:2;
  min-height:86px;
  display:grid;
  direction:ltr;
  grid-template-columns:minmax(180px,1fr) minmax(300px,auto) minmax(180px,1fr);
  align-items:center;
  gap:14px;
  padding:3px 4px 16px;
}

.show-app .board-toolbar > div:first-child {
  grid-column:2;
  grid-row:1;
  direction:rtl;
  text-align:center;
}

.show-app .board-toolbar .eyebrow {
  justify-content:center;
  margin-inline:auto;
  color:#ffe996;
}

.show-app .board-toolbar h2 {
  margin:8px 0 0;
  color:#fff;
  font-size:clamp(23px,2.15vw,34px);
  line-height:1.3;
  text-wrap:balance;
  text-shadow:0 6px 18px rgba(12,2,24,.4);
}

.show-app .board-stats {
  grid-column:1;
  grid-row:1;
  direction:rtl;
  justify-self:start;
  justify-content:flex-start;
}

.show-app .board-stats span {
  min-height:42px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(17,4,31,.24));
  box-shadow:0 10px 24px rgba(12,2,23,.17),inset 0 1px rgba(255,255,255,.1);
  font-size:12px;
}

.show-app .board-stats b {
  color:var(--pro-gold);
  font-size:19px;
  font-variant-numeric:tabular-nums;
}

.show-app .team-edge-labels {
  margin-bottom:12px;
}

.show-app .edge-label {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 18px;
  border-radius:12px;
  font-weight:1000;
  box-shadow:0 12px 25px rgba(11,2,22,.25),inset 0 1px rgba(255,255,255,.27);
}

.show-app .classic-board-frame {
  border-width:8px;
  border-radius:18px;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.075),transparent 54%),
    linear-gradient(145deg,#222124,#070708 70%);
  box-shadow:
    0 34px 72px rgba(7,1,15,.55),
    0 0 0 5px rgba(255,255,255,.11),
    0 0 0 9px rgba(26,7,44,.6),
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 24px 45px rgba(255,255,255,.035);
}

.show-app .classic-letters-board .letter-cell::before {
  background:
    radial-gradient(circle at 31% 18%,rgba(255,255,255,1),transparent 27%),
    linear-gradient(145deg,#fffef6 0%,#f5efd5 55%,#d9ce9e 100%);
  box-shadow:inset 0 3px 3px rgba(255,255,255,.85),inset 0 -4px 7px rgba(76,54,10,.18);
}

.show-app .classic-letters-board .letter-cell:not(:disabled):hover {
  z-index:8;
  transform:translateY(-5px) scale(1.065);
  filter:drop-shadow(0 11px 15px rgba(0,0,0,.55)) brightness(1.055);
}

.show-app .legend {
  margin-top:16px;
  padding:12px 16px;
  border-color:rgba(255,255,255,.16);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(14,3,27,.26),rgba(255,255,255,.055));
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 10px 24px rgba(13,3,25,.12);
}

.show-app .legend span {
  gap:7px;
  color:#e5d8ee;
  font-size:12px;
}

.show-app .legend-hex {
  width:20px;
  height:17px;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.34));
}

.show-app .scoreboard-card,
.show-app .control-card {
  border-radius:27px;
  background:
    radial-gradient(circle at 80% 0,rgba(255,255,255,.12),transparent 29%),
    linear-gradient(155deg,rgba(89,41,130,.97),rgba(39,13,64,.985));
  box-shadow:var(--pro-shadow-soft),inset 0 1px rgba(255,255,255,.09);
}

.show-app .scoreboard-card::before,
.show-app .control-card::before {
  content:"";
  display:block;
  width:46px;
  height:4px;
  margin:0 auto 14px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--pro-coral),var(--pro-gold),var(--pro-cyan));
  box-shadow:0 0 18px rgba(255,215,94,.32);
}

.show-app .show-logo {
  padding-bottom:13px;
}

.show-app .show-logo strong {
  color:#fff;
  text-shadow:0 6px 0 rgba(35,10,53,.4),0 13px 25px rgba(8,2,17,.35);
}

.show-app .round-pill,
.show-app .current-turn,
.show-app .control-card .timer-title {
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(13,3,25,.21));
  box-shadow:inset 0 1px rgba(255,255,255,.075),0 10px 22px rgba(10,2,20,.14);
}

.show-app .round-pill strong,
.show-app .current-turn strong {
  color:#fff2ad;
}

.show-app .team-card {
  min-height:68px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(12,3,23,.17));
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 9px 22px rgba(9,2,18,.14);
}

.show-app .team-card::before {
  width:5px;
  border-radius:99px;
  box-shadow:0 0 14px color-mix(in srgb,var(--team-color) 58%,transparent);
}

.show-app .team-card.active {
  border-color:color-mix(in srgb,var(--team-color) 72%,#fff 28%);
  background:linear-gradient(145deg,color-mix(in srgb,var(--team-color) 18%,rgba(255,255,255,.1)),rgba(12,3,23,.19));
  box-shadow:0 14px 32px color-mix(in srgb,var(--team-color) 26%,transparent),inset 0 1px rgba(255,255,255,.14);
}

.show-app .team-name {
  font-size:14px;
}

.show-app .team-score {
  color:#fff;
  font-size:34px;
}

.show-app .score-actions button {
  min-width:32px;
  min-height:32px;
  border-radius:10px;
}

.show-app .quick-controls,
.show-app .timer-controls {
  gap:8px;
}

.show-app .control-btn,
.show-app .secondary-btn,
.show-app .primary-btn,
.show-app .success-btn,
.show-app .danger-btn {
  border-radius:14px;
  box-shadow:0 11px 23px rgba(8,2,17,.2),inset 0 1px rgba(255,255,255,.22);
}

.show-app .control-btn.primary,
.show-app .primary-btn {
  color:#2e163d;
  background:linear-gradient(135deg,#fff0a0,var(--pro-gold) 54%,var(--pro-gold-deep));
}

.show-app .control-card .timer-ring {
  position:relative;
  border:1px solid rgba(255,255,255,.2);
  background:
    radial-gradient(circle,rgba(50,17,76,.96) 0 54%,transparent 55%),
    conic-gradient(var(--pro-gold) calc(var(--timer-progress,1) * 1turn),rgba(255,255,255,.12) 0);
  box-shadow:0 20px 45px rgba(8,2,17,.3),inset 0 1px rgba(255,255,255,.1),0 0 0 7px rgba(255,255,255,.035);
}

.show-app .control-card .timer-ring::before {
  content:"";
  position:absolute;
  inset:16%;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  box-shadow:inset 0 9px 24px rgba(7,1,15,.28);
}

.show-app .control-card .timer-inner strong {
  color:#fff;
  text-shadow:0 5px 18px rgba(6,1,13,.38);
}

.show-app .history-mini {
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.11);
}

.show-app .history-item {
  padding:9px 10px;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(10,2,20,.13));
}

/* النوافذ الاحترافية وإعداد المسابقة. */
.modal-backdrop {
  background:rgba(10,2,20,.84);
  backdrop-filter:blur(18px) saturate(.92);
  -webkit-backdrop-filter:blur(18px) saturate(.92);
}

.modal-dialog {
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.16),transparent 34%),
    radial-gradient(circle at 95% 85%,rgba(32,212,199,.11),transparent 25%),
    linear-gradient(150deg,#613191,#3a1559 62%,#2b103f);
  box-shadow:0 45px 130px rgba(7,1,15,.7),inset 0 1px rgba(255,255,255,.1);
}

.modal-close {
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(13,3,25,.28));
}

#questionModal .question-dialog {
  border-radius:32px;
  background:
    radial-gradient(circle at 50% -7%,rgba(255,255,255,.17),transparent 33%),
    radial-gradient(circle at 4% 100%,rgba(32,212,199,.12),transparent 25%),
    radial-gradient(circle at 96% 100%,rgba(255,118,95,.12),transparent 25%),
    linear-gradient(145deg,#582985 0%,#35124f 58%,#27103c 100%);
}

#questionModal .question-team-ribbon {
  border-color:rgba(255,255,255,.24);
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(12,3,23,.23));
}

#questionModal .question-letter {
  background:
    radial-gradient(circle at 33% 19%,#fff,transparent 27%),
    linear-gradient(145deg,#fffef5,#f3e6b2 64%,#d1b75d);
  filter:drop-shadow(0 9px 0 #180824) drop-shadow(0 18px 24px rgba(7,1,15,.4));
}

#questionModal .question-dialog h2 {
  border-color:rgba(255,255,255,.15);
  background:linear-gradient(145deg,rgba(12,3,23,.22),rgba(255,255,255,.055));
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 12px 30px rgba(9,2,18,.13);
}

#questionModal .question-choice {
  border-color:rgba(61,30,83,.14);
  background:linear-gradient(145deg,#fff,#f8f4fa 66%,#f0e9f4);
  box-shadow:0 14px 30px rgba(7,1,15,.22),inset 0 1px #fff;
}

#questionModal .question-choice.is-selectable:hover {
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--active-team,#69379a) 70%,#fff 30%);
  box-shadow:0 18px 38px rgba(7,1,15,.3),0 0 0 3px color-mix(in srgb,var(--active-team,#69379a) 15%,transparent);
}

#questionModal .question-choice span {
  background:linear-gradient(145deg,color-mix(in srgb,var(--active-team,#69379a) 80%,#fff 20%),var(--active-team,#69379a));
}

#setupModal .setup-dialog,
.remote-links-dialog,
.admin-dialog {
  border-radius:30px;
}

#setupModal .setup-head,
.remote-links-head,
.admin-header {
  padding-bottom:15px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

#setupModal .form-grid > label,
#setupModal fieldset,
.teams-builder {
  border:1px solid rgba(255,255,255,.15);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(10,2,20,.12));
  box-shadow:inset 0 1px rgba(255,255,255,.055);
}

#setupModal .form-grid > label {
  padding:12px;
}

#setupModal fieldset {
  padding:14px;
}

#setupModal fieldset legend {
  padding-inline:8px;
  color:#ffe788;
  font-weight:1000;
}

#setupModal .answer-mode-option {
  min-height:78px;
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(10,2,20,.1));
  box-shadow:inset 0 1px rgba(255,255,255,.055);
}

#setupModal .answer-mode-option:has(input:checked) {
  border-color:var(--pro-gold);
  background:linear-gradient(145deg,rgba(255,215,94,.17),rgba(255,255,255,.07));
  box-shadow:0 0 0 3px rgba(255,215,94,.11),inset 0 1px rgba(255,255,255,.08);
}

#setupModal .form-grid input,
#setupModal .team-input-row input {
  border-radius:12px;
  background:rgba(15,4,28,.32);
}

#setupModal .teams-builder {
  padding:14px;
}

#setupModal #startGameBtn {
  min-height:60px;
  border-radius:17px;
  font-size:18px;
  box-shadow:0 15px 32px rgba(211,164,20,.26),inset 0 1px rgba(255,255,255,.6);
}

.team-remote-link {
  border-radius:17px;
  background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(10,2,20,.13));
}

/* حالات الحركة والوصول. */
@media (hover:hover) {
  .show-app .icon-btn:hover,
  .show-app .control-btn:hover,
  .show-app .secondary-btn:hover,
  .show-app .primary-btn:hover,
  .show-app .success-btn:hover,
  .show-app .danger-btn:hover {
    transform:translateY(-2px);
    filter:brightness(1.07) saturate(1.04);
  }
}

@media (max-width:1250px) {
  .show-app .board-toolbar {
    grid-template-columns:minmax(150px,1fr) minmax(260px,auto) minmax(150px,1fr);
  }
  .show-app .board-stats span {padding-inline:10px}
}

@media (max-width:900px) {
  .show-app > .topbar {
    min-height:78px;
  }
  .show-app .board-toolbar {
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    justify-items:center;
  }
  .show-app .board-toolbar > div:first-child,
  .show-app .board-stats {
    grid-column:1;
  }
  .show-app .board-toolbar > div:first-child {grid-row:1}
  .show-app .board-stats {
    grid-row:2;
    justify-self:center;
    justify-content:center;
  }
  .show-app .scoreboard-card,
  .show-app .control-card,
  .show-app > .layout > .board-card {
    border-radius:24px;
  }
}

@media (max-width:650px) {
  .show-app > .topbar {
    padding-inline:10px;
  }
  .show-app .site-brand-logo {
    width:min(230px,55vw);
  }
  .show-app .top-actions {
    gap:5px;
    padding:3px;
    border-radius:14px;
  }
  .show-app .board-toolbar {
    min-height:0;
    padding-bottom:12px;
  }
  .show-app .board-toolbar h2 {
    font-size:clamp(21px,6vw,28px);
  }
  .show-app .board-stats {
    width:100%;
  }
  .show-app .board-stats span {
    flex:1 1 0;
    justify-content:center;
  }
  .show-app .classic-board-frame {
    border-width:5px;
    border-radius:12px;
    box-shadow:0 22px 46px rgba(7,1,15,.46),0 0 0 3px rgba(255,255,255,.1),0 0 0 6px rgba(26,7,44,.52);
  }
  .show-app .legend {
    gap:9px 12px;
    justify-content:center;
  }
  #questionModal .question-dialog,
  #setupModal .setup-dialog,
  .remote-links-dialog,
  .admin-dialog {
    border-radius:22px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .show-app *,
  .modal * {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* =========================================================
   v3.0.1 — إصلاح ترويسة اللوحة في الشاشات المتوسطة
   ========================================================= */
.show-app .board-toolbar {
  position:relative;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  justify-content:center;
  justify-items:center;
  gap:8px;
  padding:5px 4px 13px;
  direction:rtl;
}

.show-app .board-toolbar > div:first-child {
  position:static;
  grid-column:1;
  grid-row:1;
  width:100%;
  max-width:none;
  display:block;
  text-align:center;
  transform:none;
}

.show-app .board-toolbar h2 {
  width:100%;
  max-width:none;
  margin:0;
  font-size:clamp(19px,1.55vw,26px);
  line-height:1.35;
  text-align:center;
  white-space:nowrap;
}

.show-app .board-toolbar .board-stats {
  position:static;
  grid-column:1;
  grid-row:2;
  width:auto;
  max-width:100%;
  display:grid;
  grid-template-columns:repeat(2,max-content);
  align-items:center;
  justify-content:center;
  justify-self:auto;
  gap:8px;
  margin:0;
  direction:rtl;
  transform:none;
}

.show-app .board-toolbar .board-stats span {
  min-width:0;
  min-height:36px;
  padding:6px 13px;
  justify-content:center;
  font-size:11px;
  white-space:nowrap;
}

.show-app .board-toolbar .board-stats b {
  font-size:17px;
}

@media (max-width:520px) {
  .show-app .board-toolbar {
    gap:9px;
    padding-bottom:12px;
  }
  .show-app .board-toolbar h2 {
    font-size:clamp(18px,5.4vw,23px);
    white-space:normal;
  }
  .show-app .board-toolbar .board-stats {
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .show-app .board-toolbar .board-stats span {
    width:100%;
    padding-inline:7px;
    font-size:10px;
  }
  .show-app .board-toolbar .board-stats b {
    font-size:16px;
  }
}

/* =========================================================
   v3.1.1 — دليل وطريقة لعب مسابقة الحروف
   ========================================================= */
.show-app .help-top-btn {
  width:auto;
  min-width:118px;
  padding-inline:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.show-app .help-top-btn > span {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.32);
  border-radius:50%;
  color:#281039;
  background:linear-gradient(145deg,#fff3a6,#ffd342);
  font-size:16px;
  font-weight:1000;
  box-shadow:0 5px 12px rgba(13,3,25,.2);
}

.show-app .help-top-btn > b {
  color:#fff;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.instructions-dialog {
  width:min(96vw,1020px);
  max-height:min(92vh,900px);
  padding:30px;
  overflow:auto;
  overscroll-behavior:contain;
  background:
    radial-gradient(circle at 88% 4%,rgba(255,211,66,.18),transparent 27%),
    radial-gradient(circle at 8% 92%,rgba(16,170,164,.2),transparent 28%),
    linear-gradient(155deg,#64369a,#351458 78%);
}

.instructions-head {
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 0 20px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.instructions-mark {
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  flex:0 0 68px;
  color:#32144d;
  background:linear-gradient(145deg,#fff3a6,#ffd342);
  font-size:40px;
  font-weight:1000;
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
  filter:drop-shadow(0 8px 0 rgba(35,10,53,.36));
}

.instructions-head h2 {
  margin:3px 0 5px;
  color:#fff;
  font-size:clamp(24px,3vw,36px);
  line-height:1.25;
}

.instructions-head p {
  margin:0;
  color:#d9c8e8;
  line-height:1.7;
}

.instructions-steps {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:20px 0;
}

.instructions-steps article {
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(12,3,23,.15));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 26px rgba(12,3,23,.12);
}

.instructions-steps article > i {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  border-radius:12px;
  color:#2c103f;
  background:linear-gradient(145deg,#fff1a0,#ffd342);
  font-size:17px;
  font-style:normal;
  font-weight:1000;
}

.instructions-steps h3 {
  margin:1px 0 6px;
  color:#fff4b4;
  font-size:15px;
}

.instructions-steps p {
  margin:0;
  color:#e2d5ed;
  font-size:12px;
  line-height:1.85;
}

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

.instructions-summary > div {
  min-width:0;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  column-gap:9px;
  padding:11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(13,3,25,.2);
}

.instructions-summary b,
.instructions-summary small {
  grid-column:2;
}

.instructions-summary b {
  color:#fff;
  font-size:11px;
}

.instructions-summary small {
  color:#cdbbdc;
  font-size:9px;
}

.rule-color {
  grid-row:1 / span 2;
  width:34px;
  height:30px;
  display:block;
  background:#fff;
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
}

.rule-team-one {background:#e60012}
.rule-team-two {background:#087b16}
.rule-available {background:#fffce9}
.rule-closed {background:#6c6177}

.supervisor-guide {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:8px;
  padding:14px 16px;
  border:1px solid rgba(255,211,66,.3);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,211,66,.13),rgba(255,255,255,.055));
}

.supervisor-guide > span {
  font-size:30px;
}

.supervisor-guide b {
  color:#ffe681;
}

.supervisor-guide p {
  margin:3px 0 0;
  color:#e6daef;
  font-size:11px;
  line-height:1.7;
}

.instructions-close-btn {
  width:100%;
  min-height:56px;
  margin-top:16px;
  border-radius:16px;
}

@media (max-width:820px) {
  .show-app .help-top-btn {
    width:42px;
    min-width:42px;
    padding:0;
  }
  .show-app .help-top-btn > b {display:none}
  .instructions-dialog {padding:23px 15px}
  .instructions-steps {grid-template-columns:1fr}
  .instructions-summary {grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:460px) {
  .instructions-head {align-items:flex-start;padding-inline-end:30px}
  .instructions-mark {width:52px;height:52px;flex-basis:52px;font-size:30px}
  .instructions-head h2 {font-size:22px}
  .instructions-head p {font-size:11px}
  .instructions-summary {grid-template-columns:1fr}
  .instructions-steps article {padding:13px}
}

/* =========================================================
   v3.2.0 — توافق شامل للجوالات والشاشات والمتصفحات
   ========================================================= */
:root {
  --letters-viewport-height:100vh;
  --letters-viewport-width:100vw;
}

html,
body {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.letters-competition-theme,
.letters-competition-site,
.show-app {
  min-height:100vh;
  min-height:var(--letters-viewport-height,100vh);
}

.show-app,
.show-app * {
  box-sizing:border-box;
}

.show-app > .topbar,
.show-app > .layout,
.show-app .board-card,
.show-app .show-panel,
.show-app .card,
.show-app .board-fullscreen-target,
.show-app .classic-board-frame,
.show-app .modal-dialog {
  max-width:100%;
}

.show-app .brand,
.show-app .topbar-controls,
.show-app .top-actions,
.show-app .site-main-menu,
.show-app .board-toolbar,
.show-app .board-stats,
.show-app .teams,
.show-app .team-card,
.show-app .timer-controls,
.show-app .question-actions {
  min-width:0;
}

.show-app button,
.show-app a,
.modal button,
.modal a {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.modal {
  width:100%;
  height:100vh;
  height:var(--letters-viewport-height,100vh);
  max-height:var(--letters-viewport-height,100vh);
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  overflow:hidden;
}

.modal:not(#setupModal) .modal-dialog {
  max-height:calc(var(--letters-viewport-height,100vh) - 20px);
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

#questionModal .question-dialog {
  max-height:calc(var(--letters-viewport-height,100vh) - 20px);
}

#setupModal {
  height:var(--letters-viewport-height,100vh);
  max-height:var(--letters-viewport-height,100vh);
  -webkit-overflow-scrolling:touch;
}

#setupModal .answer-mode-option.is-selected,
#setupModal .shuffle-choices-option.is-selected {
  border-color:#ffd75e;
  background:linear-gradient(145deg,rgba(255,215,94,.17),rgba(255,255,255,.07));
  box-shadow:0 0 0 3px rgba(255,215,94,.11),inset 0 1px rgba(255,255,255,.08);
}

@supports not (color:color-mix(in srgb,#000,#fff)) {
  .classic-lane span::after {background:linear-gradient(145deg,#42ba4f,var(--lane-color,#138c20) 48%,#075d10)}
  .fullscreen-turn-badge {background:var(--active-team-color,#7a3eaa);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 3px rgba(255,255,255,.18)}
  .fullscreen-cut-turn {background:var(--active-team-color,#7a3eaa)}
  .round-win-message {background:linear-gradient(145deg,var(--winner-color,#ff7657),#35165b);box-shadow:0 28px 80px rgba(13,3,25,.52),0 0 0 8px rgba(255,255,255,.15)}
  .show-app .team-card::before {box-shadow:0 0 14px rgba(255,255,255,.22)}
  .show-app .team-card.active {border-color:var(--team-color,#ffd75e);background:rgba(255,255,255,.14);box-shadow:0 14px 32px rgba(10,2,20,.28),inset 0 1px rgba(255,255,255,.14)}
  #questionModal .question-choice.is-selectable:hover {border-color:var(--active-team,#69379a);box-shadow:0 18px 38px rgba(7,1,15,.3)}
  #questionModal .question-choice span {background:var(--active-team,#69379a)}
  .team-remote-identity > i {box-shadow:0 8px 20px rgba(10,2,20,.28)}
  .team-remote-actions a {border-color:rgba(255,255,255,.42)}
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .show-app > .topbar {background:#351451}
  .modal-backdrop {background:rgba(10,2,20,.96)}
  .modal-dialog {background:#4b2172}
  .round-win-message {background:#512477}
}

@supports not (aspect-ratio:1 / 1) {
  .classic-board-frame {
    position:relative;
    height:0!important;
    min-height:0!important;
    padding:68.493% 0 0!important;
  }
  .question-letter {height:91px}
  .remote-question-letter {height:clamp(72px,12vw,116px)}
}

@media (pointer:coarse) {
  .show-app .icon-btn,
  .show-app .supervisor-login-btn,
  .show-app .control-btn,
  .show-app .primary-btn,
  .show-app .secondary-btn,
  .show-app .success-btn,
  .show-app .danger-btn,
  .modal-close {
    min-height:44px;
  }
  .show-app .classic-letters-board .letter-cell:hover,
  .show-app button:hover,
  .modal button:hover {
    transform:none;
  }
}

@media (max-width:900px) {
  .show-app > .topbar {
    min-height:0;
    padding:10px max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left));
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }
  .show-app > .topbar .brand {
    min-height:58px;
    flex:1 1 100%;
    justify-content:center;
  }
  .show-app .site-brand-logo {
    width:min(310px,82vw);
    max-height:68px;
  }
  .show-app .topbar-controls {
    width:100%;
    flex:1 1 100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px;
  }
  .show-app .top-actions {
    max-width:100%;
    flex-wrap:wrap;
    justify-content:center;
  }
  .show-app > .layout {
    width:100%;
    padding:12px;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"board" "panel";
  }
  .show-app > .layout > .show-panel {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .show-app .board-card {
    padding:14px;
  }
  .show-app .classic-board-frame {
    width:min(100%,980px);
    margin-inline:auto;
  }
}

@media (max-width:650px) {
  .show-app > .layout {
    padding:8px;
    gap:9px;
  }
  .show-app > .layout > .show-panel {
    grid-template-columns:minmax(0,1fr);
    gap:9px;
  }
  .show-app .board-card {
    padding:12px 8px;
    border-radius:18px;
  }
  .show-app .board-toolbar {
    gap:8px;
    padding:2px 2px 10px;
  }
  .show-app .board-toolbar h2 {
    font-size:clamp(18px,5.8vw,25px);
    white-space:normal;
  }
  .show-app .board-stats {
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .show-app .board-stats span {
    width:100%;
    min-width:0;
    padding:6px;
    justify-content:center;
    white-space:normal;
    text-align:center;
  }
  .show-app .classic-board-frame {
    border-width:4px;
    border-radius:11px;
  }
  .show-app .legend {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:10px;
  }
  .show-app .legend span {
    min-width:0;
    justify-content:flex-start;
  }
  .modal-dialog,
  #questionModal .question-dialog,
  #setupModal .setup-dialog,
  .instructions-dialog,
  .remote-links-dialog,
  .admin-dialog {
    width:100%;
    max-width:100%;
    border-radius:20px;
  }
  #questionModal .question-dialog {
    padding:18px 10px 16px;
  }
  #questionModal .question-team-ribbon {
    max-width:calc(100% - 54px);
  }
  #questionModal .question-dialog h2 {
    overflow-wrap:anywhere;
  }
  #setupModal input,
  #setupModal select,
  #setupModal textarea,
  #questionModal input,
  #questionModal select,
  #questionModal textarea {
    font-size:16px;
  }
  .team-remote-link,
  .team-remote-actions {
    min-width:0;
  }
}

@media (max-width:480px) {
  .show-app > .topbar {
    padding:7px max(7px,env(safe-area-inset-right)) 8px max(7px,env(safe-area-inset-left));
  }
  .show-app > .topbar .brand {
    min-height:50px;
    padding:3px 6px;
  }
  .show-app .site-brand-logo {
    width:min(260px,88vw);
    max-height:56px;
  }
  .show-app .topbar-controls,
  .show-app .site-main-menu,
  .show-app .supervisor-login-btn {
    width:100%;
  }
  .show-app .supervisor-login-btn {
    min-width:0;
  }
  .show-app .top-actions {
    width:100%;
    gap:5px;
    padding:4px;
  }
  .show-app .icon-btn,
  .show-app #fullscreenBtn,
  .show-app .help-top-btn,
  .team-screens-top-btn,
  .top-actions .team-screens-top-btn {
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
  }
  .team-screens-top-btn b,
  .show-app .help-top-btn > b {
    display:none!important;
  }
  .show-app .board-card {
    padding:10px 6px;
  }
  .show-app .classic-letters-board .remaining-badge {
    display:none;
  }
  .show-app .control-card,
  .show-app .scoreboard-card {
    padding:13px 10px;
    border-radius:18px;
  }
  .show-app > .layout .control-card .timer-controls {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .show-app > .layout .control-card .timer-controls button {
    min-height:48px;
    font-size:13px;
  }
  .show-app .quick-controls,
  #questionModal .question-actions {
    display:grid;
    grid-template-columns:1fr;
  }
  .round-win-message {
    width:calc(100vw - 20px);
    max-height:calc(var(--letters-viewport-height,100vh) - 20px);
    padding:19px 13px;
    overflow-y:auto;
  }
}

@media (max-width:350px) {
  .show-app > .layout {padding:5px}
  .show-app .teams {grid-template-columns:1fr}
  .show-app .board-stats span {font-size:10px}
  .show-app .board-stats b {font-size:15px}
  .show-app .legend {grid-template-columns:1fr}
  .show-app .modal-close {width:42px;height:42px}
}

@media (orientation:landscape) and (max-height:620px) and (max-width:1100px) {
  .show-app > .topbar {
    position:relative;
    top:auto;
    min-height:58px;
    padding:5px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left));
    flex-wrap:nowrap;
    justify-content:space-between;
  }
  .show-app > .topbar .brand {
    min-height:48px;
    flex:0 1 190px;
    justify-content:flex-start;
  }
  .show-app .site-brand-logo {
    width:min(190px,25vw);
    max-height:48px;
  }
  .show-app .topbar-controls {
    width:auto;
    flex:1 1 auto;
    flex-wrap:nowrap;
    justify-content:flex-end;
  }
  .show-app .site-main-menu,
  .show-app .supervisor-login-btn {
    width:44px!important;
    min-width:44px!important;
    padding:0!important;
  }
  .show-app .supervisor-login-text {display:none!important}
  .show-app .top-actions {width:auto;flex-wrap:nowrap}
  .show-app .icon-btn,
  .show-app #fullscreenBtn,
  .show-app .help-top-btn,
  .team-screens-top-btn,
  .top-actions .team-screens-top-btn {
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
  }
  .team-screens-top-btn b,
  .show-app .help-top-btn > b {display:none!important}
  .show-app > .layout {padding:7px;gap:8px}
  .show-app .board-card {padding:7px 9px}
  .show-app .board-toolbar {padding:0 0 6px;gap:5px}
  .show-app .board-toolbar h2 {font-size:17px}
  .show-app .board-stats span {min-height:32px;padding:4px 8px;font-size:10px}
  .show-app .classic-board-frame {
    width:min(100%,calc((var(--letters-viewport-height,100vh) - 165px) * 1.46));
  }
  .show-app .legend {margin-top:6px;padding:6px 8px}
  .modal {padding:5px}
  .modal:not(#setupModal) .modal-dialog,
  #questionModal .question-dialog {
    max-height:calc(var(--letters-viewport-height,100vh) - 10px);
  }
}

@media (min-width:1920px) {
  .show-app > .layout {
    width:min(100%,1920px);
  }
}

/* v3.4.0 — مستويات الجولة وتوزيع الدرجات */
.round-difficulty-panel {
  display:grid;
  gap:10px;
  margin-top:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.round-difficulty-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.round-difficulty-head span {
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:700;
}
.round-difficulty-head strong {
  color:#ffd84a;
  font-size:13px;
  text-align:left;
}
#roundDifficultySelect,
#setupDifficultyMode {
  width:100%;
  min-height:44px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:13px;
  color:#fff;
  background:#392052;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  cursor:pointer;
}
#roundDifficultySelect option,
#setupDifficultyMode option {color:#261239;background:#fff}
.contestant-difficulty-choices {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.contestant-difficulty-choices[hidden] {display:none!important}
.contestant-difficulty-choices button {
  min-height:46px;
  padding:7px 5px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:13px;
  color:#fff;
  background:rgba(255,255,255,.08);
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  line-height:1.25;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.contestant-difficulty-choices button:hover {transform:translateY(-1px);border-color:#ffd84a}
.contestant-difficulty-choices button.is-selected {
  color:#2d153e;
  border-color:#ffe783;
  background:linear-gradient(135deg,#ffe979,#ffc72f);
  box-shadow:0 8px 18px rgba(255,199,47,.2);
}
.contestant-difficulty-choices b {
  display:inline-grid;
  place-items:center;
  min-width:23px;
  min-height:23px;
  margin-inline-start:3px;
  border-radius:50%;
  background:rgba(0,0,0,.14);
}
#difficultyPointsPreview {
  color:rgba(255,255,255,.68);
  font-size:10px;
  line-height:1.6;
}
.difficulty-points-guide {
  display:grid;
  grid-template-columns:auto repeat(3,minmax(0,1fr));
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(103,45,143,.14);
  border-radius:14px;
  background:#f7f1fb;
  color:#43225b;
}
.difficulty-points-guide > span {font-weight:800}
.difficulty-points-guide > b {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:34px;
  border-radius:10px;
  background:#fff;
  font-size:12px;
}
.difficulty-points-guide i {
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  color:#251234;
  background:#ffd43b;
  font-style:normal;
}
@media (max-width:650px) {
  .round-difficulty-panel {padding:10px;gap:8px}
  .difficulty-points-guide {grid-template-columns:1fr 1fr}
  .difficulty-points-guide > span {grid-column:1/-1}
}
@media (max-width:380px) {
  .contestant-difficulty-choices {grid-template-columns:1fr}
  .difficulty-points-guide {grid-template-columns:1fr}
}