/* لوحة الأسئلة: عمق بصري هادئ واستجابة واضحة للضغط. */
body:has(.gameBoard) .gameBoard {
  position:relative;
  isolation:isolate;
  gap:10px!important;
  padding:18px!important;
  background:
    radial-gradient(circle at 10% 8%,rgba(240,162,94,.16),transparent 25%),
    radial-gradient(circle at 88% 92%,rgba(199,82,56,.12),transparent 28%),
    linear-gradient(145deg,#f8f0e4 0%,#eee0cd 100%)!important;
  border:1px solid rgba(122,85,54,.16);
  box-shadow:inset 0 1px 0 #fff9,0 18px 45px rgba(63,42,25,.09);
}
body:has(.gameBoard) .gameBoard::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.34;
  background-image:repeating-linear-gradient(120deg,transparent 0 28px,rgba(129,84,48,.035) 29px 30px);
}
.gameBoard .gameCol {
  position:relative;
  gap:7px!important;
  padding:6px;
  border:1px solid rgba(128,88,52,.12);
  border-radius:18px;
  background:rgba(255,250,242,.5);
  box-shadow:0 8px 20px rgba(74,48,26,.06);
}
.gameBoard .gameCat {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.24);
  color:#fff8ef!important;
  background:
    radial-gradient(circle at 16% 8%,rgba(244,177,102,.42),transparent 32%),
    linear-gradient(145deg,#6d3d29 0%,#3a2b23 54%,#28221e 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 7px 16px rgba(54,35,22,.18);
  transition:transform .22s ease,box-shadow .22s ease;
}
.gameBoard .gameCat::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 0 38%,rgba(255,255,255,.07) 39% 45%,transparent 46% 100%);
}
.gameBoard .gameCat::after {
  content:"";
  position:absolute;
  inset:auto 14% 0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#f0a25e,#d35b3e,transparent);
}
.gameBoard .gameCat .catImg {
  width:52px!important;
  height:52px!important;
  padding:3px;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
.gameBoard .gameCat b { position:relative;z-index:1;text-shadow:0 2px 5px rgba(0,0,0,.3) }
.gameBoard .gameCell {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  border:1px solid rgba(160,104,61,.22)!important;
  color:#a8422d!important;
  background:
    radial-gradient(circle at 22% 10%,rgba(255,255,255,.9),transparent 28%),
    linear-gradient(145deg,#fff4e3 0%,#ead4b7 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 0 rgba(126,79,42,.1),0 5px 10px rgba(82,52,28,.1);
  text-shadow:0 1px 0 #fff8;
  transform:translateY(0) scale(1);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease,border-color .12s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.gameBoard .gameCell::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.55;
  background:linear-gradient(115deg,transparent 0 43%,rgba(255,255,255,.6) 44% 49%,transparent 50% 100%);
  transform:translateX(-75%);
  transition:transform .35s ease;
}
.gameBoard .gameCell.point-400 { background:radial-gradient(circle at 22% 10%,#fff,transparent 28%),linear-gradient(145deg,#f9e7cf,#e4c59f)!important }
.gameBoard .gameCell.point-600 { background:radial-gradient(circle at 22% 10%,#fff,transparent 28%),linear-gradient(145deg,#f4ddc0,#dcb78a)!important }
@media (hover:hover) {
  .gameBoard .gameCell:not(.used):not(.locked):not(:disabled):hover {
    transform:translateY(-3px);
    border-color:rgba(199,82,56,.55)!important;
    box-shadow:inset 0 1px 0 #fff,0 10px 18px rgba(116,64,35,.18);
    filter:saturate(1.08);
  }
  .gameBoard .gameCell:not(.used):not(.locked):not(:disabled):hover::before { transform:translateX(75%) }
}
.gameBoard .gameCell.is-pressed,
.gameBoard .gameCell:not(.used):not(.locked):not(:disabled):active {
  transform:translateY(2px) scale(.965)!important;
  box-shadow:inset 0 4px 8px rgba(92,53,25,.2),0 1px 2px rgba(82,52,28,.08)!important;
}
.gameBoard .gameCell.is-opening {
  color:transparent!important;
  pointer-events:none!important;
  transform:scale(.97)!important;
  border-color:#d35b3e!important;
  background:linear-gradient(135deg,#fff0dc,#edc397)!important;
  box-shadow:0 0 0 4px rgba(211,91,62,.16),inset 0 3px 8px rgba(120,67,35,.13)!important;
}
.gameBoard .gameCell.is-opening::after {
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  width:21px;
  height:21px;
  margin:-12px 0 0 -12px;
  border:3px solid rgba(168,66,45,.2);
  border-top-color:#a8422d;
  border-radius:50%;
  animation:takawiCellSpin .65s linear infinite;
}
@keyframes takawiCellSpin { to { transform:rotate(360deg) } }
.gameBoard .gameCell.used {
  border-color:rgba(80,76,70,.16)!important;
  background:linear-gradient(145deg,#d2cfca,#aaa8a4)!important;
  box-shadow:inset 0 2px 5px rgba(50,50,50,.12)!important;
  text-shadow:none;
}
.gameBoard .gameCell.locked { box-shadow:inset 0 2px 6px rgba(60,60,60,.12)!important }
html[data-theme="dark"] body:has(.gameBoard) .gameBoard {
  background:radial-gradient(circle at 12% 5%,rgba(211,91,62,.15),transparent 27%),linear-gradient(145deg,#201b17,#151311)!important;
  border-color:#49382b;
}
html[data-theme="dark"] .gameBoard .gameCol { background:rgba(255,245,229,.035);border-color:#4b392b }
html[data-theme="dark"] .gameBoard .gameCell { color:#ff9a7d!important;border-color:#624633!important;background:radial-gradient(circle at 20% 8%,rgba(255,255,255,.09),transparent 30%),linear-gradient(145deg,#413226,#2b241f)!important;text-shadow:none }
html[data-theme="dark"] .gameBoard .gameCell.point-400 { background:linear-gradient(145deg,#493526,#30251e)!important }
html[data-theme="dark"] .gameBoard .gameCell.point-600 { background:linear-gradient(145deg,#513827,#34271f)!important }
@media(max-width:600px) and (orientation:portrait) {
  body:has(.gameBoard) .gameBoard { padding:9px 8px 26px!important;gap:12px!important }
  .gameBoard .gameCol { padding:7px!important;border-radius:17px!important }
  .gameBoard .gameCat { min-height:82px!important }
  .gameBoard .gameCat .catImg { width:48px!important;height:48px!important }
  .gameBoard .gameCell { min-height:52px!important }
}
@media(prefers-reduced-motion:reduce) {
  .gameBoard .gameCell,.gameBoard .gameCell::before { transition:none!important }
  .gameBoard .gameCell.is-opening::after { animation-duration:1.2s }
}
/* منع إظهار مراحل الرسم الوسيطة التي سببت قفز الوقت ووميض الخانات. */
::view-transition-old(root),::view-transition-new(root) { animation-duration:.07s!important }
.takawiRenderSnapshot { position:fixed;inset:0;z-index:9998;overflow:hidden;background:var(--c);pointer-events:auto }
.takawiRenderSnapshot button,.takawiRenderSnapshot a,.takawiRenderSnapshot [onclick] { cursor:pointer!important }
.takawiRenderingBehind { visibility:hidden!important }

/* زر المظهر حاضر داخل الجلسة، فلا يختفي بعد مغادرة شريط الموقع. */
.gameThemeToggle { width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border:1px solid #d9b783;border-radius:12px;background:#fff5e4;color:#29241f;font-size:18px;cursor:pointer;box-shadow:0 4px 12px #0002 }

/* تباين كامل لكل مراحل اللعبة في الوضع الليلي. */
html[data-theme="dark"] .game { background:#171411!important;color:#fff7ec!important }
html[data-theme="dark"] .gameTop { background:#12100e!important;color:#fff!important;border-bottom:1px solid #654333!important }
html[data-theme="dark"] .gameTop,html[data-theme="dark"] .gameTop b,html[data-theme="dark"] .gameTop span { color:#fff!important;opacity:1!important;text-shadow:none!important }
html[data-theme="dark"] .gameTop .turnBtn { background:#fff2df!important;color:#221c18!important;border-color:#e46b4d!important }
html[data-theme="dark"] .gameThemeToggle { background:#f2b84b!important;color:#171411!important;border-color:#ffd984!important }
html[data-theme="dark"] .categoryPicker { background:#171411!important }
html[data-theme="dark"] .pickCat { background:#2c251f!important;color:#fff7ec!important;border-color:#66503d!important }
html[data-theme="dark"] .pickCat b,html[data-theme="dark"] .pickCat small { color:#fff7ec!important;opacity:1!important }
html[data-theme="dark"] .pickCat.picked { background:#493026!important;border-color:#ef795a!important;box-shadow:0 0 0 3px #e46b4d33!important }
html[data-theme="dark"] .modeChooser { color:#fff7ec!important }
html[data-theme="dark"] .modeCard { background:#2b241f!important;color:#fff7ec!important;border-color:#6b5543!important }
html[data-theme="dark"] .modeCard b { color:#fff!important;opacity:1!important }
html[data-theme="dark"] .modeCard small { color:#d9c4b1!important;opacity:1!important }
html[data-theme="dark"] .modeCard.selected { background:linear-gradient(135deg,#5e2e25,#3a251f)!important;border-color:#f08365!important;box-shadow:0 0 0 3px #e46b4d29!important }
html[data-theme="dark"] .laneLabels span { background:#f0dfc8!important;color:#35271f!important;border:1px solid #c9aa83!important;text-shadow:none!important;opacity:1!important }
html[data-theme="dark"] .laneLabels span.owned { background:linear-gradient(135deg,#a43d2e,#e26b49)!important;color:#fff!important;border-color:#f1997d!important }
html[data-theme="dark"] .questionScreen { background:#24201c!important;color:#fff7ec!important;border-color:#6a4f3b!important }
html[data-theme="dark"] .questionScreen h1,html[data-theme="dark"] .questionKicker strong,html[data-theme="dark"] .resultPrompt { color:#fff7ec!important;opacity:1!important }
html[data-theme="dark"] .qmeta span { background:#49372a!important;color:#fff4e5!important;border-color:#76533c!important }
html[data-theme="dark"] .answerBox { background:#38271f!important;color:#fff!important;border-color:#ee795b!important }
html[data-theme="dark"] .answerBox b { color:#ffad96!important }
html[data-theme="dark"] .scorebar { background:#100e0df2!important }
html[data-theme="dark"] .scorebar .team { background:#302821!important;color:#fff!important;border-color:#665040!important }
html[data-theme="dark"] .scorebar .team>span:first-child { color:#fff!important;opacity:1!important }
html[data-theme="dark"] .scorebar .team>b { color:#ff9a7d!important }
html[data-theme="dark"] .gameFinished { min-height:100vh;background:radial-gradient(circle at 50% 10%,#3a291f,#171411 62%)!important;color:#fff7ec!important }
html[data-theme="dark"] .card p { color:#d8c7b7!important;opacity:1!important }
html[data-theme="dark"] .finishCard { background:#27211c!important;color:#fff7ec!important;border-color:#6b4e38!important }
html[data-theme="dark"] .finishCard h1,html[data-theme="dark"] .finishCard h2,html[data-theme="dark"] .finishCard p,html[data-theme="dark"] .finishCard b { color:#fff7ec!important;opacity:1!important }
html[data-theme="dark"] .finalScores div { background:#382d25!important;color:#fff7ec!important;border:1px solid #634b39 }

/* احتفال صامت وخفيف عند اكتمال الأسئلة. */
.winnerCelebration { position:relative;overflow:hidden;margin:18px 0;padding:22px 16px;border:1px solid #e2bc61;border-radius:22px;background:linear-gradient(135deg,#fff4c9,#f6d77f 50%,#fff0bd);color:#39271b;box-shadow:0 15px 35px #a66c1924 }
.winnerCelebration>span { display:block;font-size:48px;filter:drop-shadow(0 5px 7px #885a2433) }
.winnerCelebration h2 { margin:5px 0;font-size:clamp(24px,4vw,36px);color:#6f401f!important }
.winnerCelebration p { margin:5px 0;color:#765338!important;font-weight:700 }
.confetti { position:absolute;inset:0;pointer-events:none }
.confetti i { --x:calc((var(--i) * 37) % 100);position:absolute;left:calc(var(--x) * 1%);top:-14px;width:7px;height:14px;border-radius:3px;background:hsl(calc(var(--i) * 39) 72% 52%);animation:takawiConfetti 2.8s calc(var(--i) * -.11s) ease-in 3;opacity:.72 }
@keyframes takawiConfetti { 0%{transform:translateY(-20px) rotate(0)} 100%{transform:translateY(190px) rotate(520deg)} }
.finishActions { display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid #d9c5a8 }
html[data-theme="dark"] .winnerCelebration { background:linear-gradient(135deg,#593d1d,#9a651c,#513719)!important;border-color:#e8b953!important }
html[data-theme="dark"] .winnerCelebration h2,html[data-theme="dark"] .winnerCelebration p { color:#fff5d6!important }
.winnerCelebration.tieResult { background:linear-gradient(135deg,#f8efe2,#ead8c2)!important;border-color:#cdb498!important;box-shadow:0 12px 28px #59433017 }
.winnerCelebration.tieResult>span { font-size:38px;filter:none }
.winnerCelebration.tieResult h2 { color:#35271f!important }
.winnerCelebration.tieResult p { color:#725e50!important;font-weight:600 }
html[data-theme="dark"] .winnerCelebration.tieResult { background:linear-gradient(135deg,#30251f,#413129)!important;border-color:#755943!important }
html[data-theme="dark"] .winnerCelebration.tieResult h2,html[data-theme="dark"] .winnerCelebration.tieResult p { color:#fff4e7!important }

@media(max-width:600px) {
  .gameThemeToggle { width:32px;height:32px;flex-basis:32px;font-size:15px;border-radius:9px }
  .winnerCelebration { padding:16px 10px }.winnerCelebration>span{font-size:38px}
}