/* شاشة اللعب (المرحلة 3): اللوحة يساراً ولوحة جانبيّة يميناً — قريبة من تخطيط «حروف مع عزيز» وسكتش المالك.
   على الجوّال العموديّ عمود واحد: الرأس، ثمّ اللوحة، ثمّ بقيّة اللوحة الجانبيّة. تُحمَّل بعد style.css فتعلو قواعده. */

/* ── الخلفيّة «نقش هادئ» (اختيار المالك 2026-10-22، بدل وهج الفريقين): أرضيّة مسطّحة بلون الصفحة بلا هالات ولا حبيبات،
   ونقش خليّة سداسيّ بخطّ 1px عند أطراف مساحة اللوحة فقط (.arena-board::before) يتلاشى نحو الخلايا. الرموز في style.css. ── */
.arena{
  --arena-base:var(--bg0);
  --arena-bg:var(--bg0);
  --side-bg:var(--hx-panel);
  --side-line:var(--hx-line);
  --side-w:clamp(320px, 27vw, 420px);
  --pad:clamp(12px, 2.2vw, 32px);
}

/* ── الصفحة الأولى والإعدادات واللوبي: الأرضيّة نفسها، والنقش عند أطراف الشاشة يتلاشى نحو المحتوى ── */
#hive-bg.hive-calm{background:var(--bg0)}
#hive-bg.hive-calm::before{display:none}
#hive-bg.hive-calm::after{content:""; position:absolute; inset:0; background:var(--hx-pattern);
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 42%, transparent 40%, #000 100%);
          mask-image:radial-gradient(ellipse 62% 58% at 50% 42%, transparent 40%, #000 100%)}

/* ── الإطار العامّ (عمود واحد افتراضياً: الجوّال العموديّ) ── */
body.in-game #btn-theme{display:none} /* الثيم صار في قائمة ≡ */
body.in-game .voice-bar{right:auto; left:calc(12px + env(safe-area-inset-left))} /* لا يغطّي اللوحة الجانبيّة */
#view-game{max-width:none; margin:0; padding:0; display:block; min-height:0}
.arena{display:flex; flex-direction:column; min-height:100dvh; background:var(--arena-base)}
.arena-side{display:contents}
.side-head{order:0}
.arena-board{order:1; position:relative; isolation:isolate; background:var(--arena-bg); padding:10px max(8px, env(safe-area-inset-right)) 12px max(8px, env(safe-area-inset-left))}
.arena-board::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--hx-pattern); pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, transparent 62%, #000 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, transparent 62%, #000 100%)}
.side-body{order:2; display:flex; flex-direction:column; gap:12px;
  padding:12px max(12px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}
#view-game .board-wrap{padding:0; width:100%}
#view-game .board-svg{width:100%; max-width:86svh; margin:0 auto}

/* ── رأس اللوحة الجانبيّة: شارة الجولة (أسلوب عناوين الحركات) + زرّ القائمة ── */
.side-head{position:relative; display:flex; align-items:center; gap:10px; min-height:62px;
  padding:calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left))}
.round-chip{display:flex; flex-direction:column; align-items:center; transform:rotate(-4deg); line-height:1}
.round-chip .fx-line{font-size:23px; line-height:1.08}
.side-head .logo-sm{font-size:20px}
.round-chip:not(.hidden) ~ .logo-sm{display:none}
.side-menu-btn{margin-inline-start:auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--card-line); color:var(--ink); box-shadow:var(--shadow-soft)}
.side-menu-btn:hover, .side-menu-btn[aria-expanded="true"]{border-color:var(--gold)}
.side-menu{position:absolute; top:calc(100% - 2px); inset-inline-end:max(12px, env(safe-area-inset-left)); z-index:80;
  width:min(300px, calc(100vw - 24px)); display:flex; flex-direction:column; gap:4px; padding:10px;
  background:var(--card); border:1px solid var(--card-line); border-radius:16px; box-shadow:var(--shadow-card)}
.side-menu .sm-row{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px}
.side-menu .chip{box-shadow:none}
.side-menu #filter-badge{align-self:flex-start; margin-bottom:4px}
.sm-item{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:11px;
  background:none; color:var(--ink); font-weight:700; font-size:14.5px; text-align:start}
.sm-item:hover, .sm-item:focus-visible{background:var(--surf-hover)}
.sm-item .sm-ic, .sm-item [data-icon]{display:inline-grid; place-items:center; color:var(--gold-text)}
.sm-item.danger, .sm-item.danger [data-icon]{color:var(--danger)}
/* «تغيير الفريق» تحت القفل: معطّل بوسم «مقفلة»، و«قفل الفرق» بمفتاحه في طرف البند (2026-10-22) */
.sm-item[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
.sm-item[aria-disabled="true"]:hover{background:none}
.sm-item .sm-tag{margin-inline-start:auto; display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
  background:var(--surf-hover); color:var(--dim); font-size:11.5px; font-weight:700}
.sm-item .sm-tag [data-icon]{color:inherit}
.sm-item .lock-switch{margin-inline-start:auto}

/* ── المقدّم: بطاقة السؤال، ثمّ بطاقة الإجابة، ثمّ الضغطات ── */
#view-game #host-bar, #view-game #player-bar{order:0}
#view-game .host-bar{max-width:none; margin:0; gap:10px}
#view-game .hq-card{background:none; border:0; padding:0; box-shadow:none; display:flex; flex-direction:column; gap:10px}
.hq-q, .hq-a, .hq-idle{background:var(--card); border:1px solid var(--card-line); border-radius:16px; padding:12px 14px; box-shadow:var(--shadow-soft)}
.hq-q .hq-text{font-size:19px; line-height:1.6; font-weight:800}
.hq-a .hq-answer{margin-top:0; font-size:18px; font-weight:800}
.hq-a .hq-actions{margin-top:10px; gap:8px}
.hq-a .hq-actions .ghost{padding:8px 13px; font-size:14px}
.hq-actions .icon-only{margin-inline-start:auto; padding:8px 10px; display:inline-grid; place-items:center}
/* «تحويل الإجابة» و«إعادة فتح الزر» تظهران عند الحاجة سطراً كاملاً تحت أزرار البطاقة */
.hq-a .hq-actions #btn-transfer, .hq-a .hq-actions .reopen{order:5; flex:1 1 100%; justify-content:center; margin-inline-start:0}
.hq-idle{display:none; align-items:center; gap:12px; min-height:84px; color:var(--dim); font-weight:700; font-size:15px}
.hq-idle .hq-letter{opacity:.5}
.hq-idle p{margin:0}
#hq-card.hidden ~ .hq-idle{display:flex}

/* ── اللاعب: الجرس أعلى، ثمّ الضغطات والحالة ── */
#view-game .player-bar{display:block; margin:0; padding:0}
#view-game .player-bar .buzz-box{width:100%; max-width:none; flex-direction:column; align-items:stretch; gap:12px; padding:16px 14px}
#view-game #buzzer{align-self:center; width:clamp(124px, 36vw, 164px); height:clamp(124px, 36vw, 164px); font-size:clamp(24px, 5.4vw, 32px)}
#view-game .buzz-side{width:100%}
#view-game .buzz-status{justify-content:center; width:100%}

/* ── صندوقا الفريقين جنباً إلى جنب: رأسٌ بسداسيّ عدد الجولات، وصفوف مختصرة تفتح قائمة اللاعب ── */
.teams{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
#view-game .team-panel{flex:none; width:auto; max-width:none; max-height:none; overflow:visible; margin:0; padding:10px; order:0; align-self:start}
#tp-h{border-top:3px solid var(--h)} #tp-v{border-top:3px solid var(--v)}
#view-game .team-panel h3{flex-wrap:wrap; gap:4px 8px; margin-bottom:8px; font-size:14px}
#view-game .team-panel h3 small{flex-basis:100%; margin:0; font-size:10.5px}
.tp-hex{flex:0 0 auto; width:30px; height:34px; display:grid; place-items:center; color:#fff;
  font:900 15px var(--font-display), sans-serif; text-shadow:0 1px 0 #0003;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tp-hex.t-h{background:linear-gradient(160deg, color-mix(in srgb, var(--h) 68%, #fff), var(--h) 52%, var(--h-deep))}
.tp-hex.t-v{background:linear-gradient(160deg, color-mix(in srgb, var(--v) 68%, #fff), var(--v) 52%, var(--v-deep))}
.tp-title{flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#view-game .tp-list{gap:6px}
#view-game .tp-row{flex-wrap:nowrap; gap:6px; padding:6px 7px}
#view-game .tp-name{min-width:0; font-size:13px}
#view-game .tp-score{padding:2px 6px}
.tp-row[data-menu]{cursor:pointer}
.tp-row[data-menu]:hover{border-color:var(--gold-soft)}
.tp-row[data-menu]:focus-visible{outline:2px solid var(--gold); outline-offset:1px}

/* قائمة اللاعب المنبثقة (game.js: openPlayerMenu) */
.tp-menu{position:fixed; z-index:80; min-width:210px; max-width:min(270px, calc(100vw - 16px)); display:flex; flex-direction:column; gap:3px;
  padding:8px; background:var(--card); border:1px solid var(--card-line); border-radius:14px; box-shadow:var(--shadow-card)}
.tp-menu-head{padding:4px 8px 8px; margin-bottom:3px; border-bottom:1px solid var(--card-line); font-weight:800; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tp-menu-item{display:flex; align-items:center; gap:9px; width:100%; padding:9px 10px; border-radius:10px;
  background:none; color:var(--ink); font-weight:700; font-size:14px; text-align:start}
.tp-menu-item:hover, .tp-menu-item:focus-visible{background:var(--surf-hover)}
.tp-menu-item.danger{color:var(--danger)}
.tp-menu-vol{display:flex; align-items:center; gap:9px; padding:7px 10px; color:var(--dim)}
.tp-menu-vol .tp-vol{flex:1 1 auto; min-width:0; max-width:none}

/* ── العريض: عمودان — اللوحة يساراً تملأ الارتفاع، واللوحة الجانبيّة يميناً تتمرّر داخلها ── */
@media (min-width:900px), (orientation:landscape) and (min-width:640px){
  .arena{display:grid; grid-template-columns:minmax(0, 1fr) var(--side-w); direction:ltr; height:100dvh; min-height:0}
  .arena > *{direction:rtl}
  .arena-board{order:0; display:grid; place-items:center; min-width:0; height:100dvh; padding:var(--pad)}
  #view-game .board-svg{width:min(100%, calc((100dvh - 2 * var(--pad)) * 1.1767)); max-width:none}
  .arena-side{order:1; display:flex; flex-direction:column; height:100dvh; overflow-y:auto; overscroll-behavior:contain;
    background:var(--side-bg); border-left:1px solid var(--side-line)}
  .side-head{position:sticky; top:0; z-index:6; background:var(--side-bg);
    padding:calc(12px + env(safe-area-inset-top)) 14px 10px; border-bottom:1px solid var(--side-line)}
  .side-head .side-menu{inset-inline-end:14px}
  .side-body{padding:12px 14px 18px}
  .round-chip .fx-line{font-size:clamp(22px, 1.7vw, 28px)}
  #view-game #buzzer{width:clamp(130px, 11vw, 168px); height:clamp(130px, 11vw, 168px)}
}
/* شاشة أفقيّة قصيرة (جوّال أفقيّ): رأسٌ أنحف وجرسٌ أصغر لتبقى اللوحة الجانبيّة في متناول التمرير */
@media (orientation:landscape) and (max-height:500px){
  .side-head{min-height:52px}
  .round-chip .fx-line{font-size:19px}
  #view-game #buzzer{width:110px; height:110px; font-size:22px}
}