/* «حروف» (huroof.js) — نسق البرنامج (صورة المالك ٢٠٢٦/١٠/١٥): لوحة سداسيّة والألوان خلف الخلايا —
   فوق وتحت أحمر (جهة الأحمر) · يمين ويسار أخضر (جهة الأخضر)، والخلايا فوقها بإطار بنفسجي.
   الخليّة (odd-r): --r/--c · --o الصفّ الفردي مزاح نص خليّة */
.hr{--hw:13.6cqh;--hh:calc(var(--hw) * 1.1547);--px:calc(var(--hw) * .95);--py:calc(var(--hh) * .5);
  --G1:#5fe08a;--G2:#1f9e4e;--R1:#ff6b6b;--R2:#c8202c;--rim:#6a3ea1}
.xg.hr{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#2a1d4d 0%,#120c26 70%)}
.hr > .xg-head{position:relative;z-index:2}
.hr .xg-title b{display:flex;align-items:center;gap:.4em;justify-content:center}
.hr-ch{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 .2em;border-radius:.4em;background:linear-gradient(180deg,#ffe48a,#f5b225);color:#2b1d00;box-shadow:0 .15em 0 #a8670c}
.hr-stage{flex:1 1 auto;min-height:0;position:relative;display:grid;place-items:center;z-index:1}
.hr-boardw{position:relative;z-index:2;display:grid;place-items:center;width:100%;height:100%;filter:drop-shadow(0 1.6cqh 2.6cqh rgba(0,0,0,.5))}
/* اللوحة نفسها: سداسي برؤوس يمين ويسار — أخضر، وفوقه شريطين أحمر فوق وتحت */
.hr-board{position:relative;direction:ltr;animation:hrIn .6s cubic-bezier(.3,1.4,.5,1) backwards;width:calc(var(--hw) * 5.5 + var(--px) * 2);height:calc(var(--hh) * 4 + var(--py) * 2);
  clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%);
  background:linear-gradient(90deg,var(--G2) 0%,var(--G1) 18%,var(--G1) 82%,var(--G2) 100%)}
.hr-plate{position:absolute;left:0;right:0;height:calc(var(--py) + var(--hh) * .55);pointer-events:none}
.hr-plate.t{top:0;clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);background:linear-gradient(180deg,var(--R2),var(--R1))}
.hr-plate.b{bottom:0;clip-path:polygon(14% 0,86% 0,100% 100%,0 100%);background:linear-gradient(0deg,var(--R2),var(--R1))}
.hr-cell{position:absolute;width:var(--hw);height:var(--hh);
  left:calc(var(--px) + var(--c) * var(--hw) + var(--o) * var(--hw) / 2);
  top:calc(var(--py) + var(--r) * var(--hh) * .75);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--rim);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1cqh;
  color:#4a2477;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.hr-cell::before{content:'';position:absolute;inset:5.5%;clip-path:inherit;
  background:radial-gradient(120% 90% at 30% 20%,#ffffff 0%,#f1edf7 55%,#dcd3ea 100%);transition:background .4s}
.hr-cell::after{content:'';position:absolute;inset:5.5% 5.5% 55%;clip-path:polygon(50% 0,100% 45%,100% 100%,0 100%,0 45%);background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.hr-cell > *{position:relative;z-index:1}
.hr-cell b{font-size:calc(var(--hw) * .5);font-weight:900;line-height:1}
.hr-cell small{font-size:max(10px,1.45cqh);font-weight:900;max-width:82%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.95}
/* خلايا الفرق */
.hr-cell.g::before{background:radial-gradient(120% 90% at 30% 20%,#9ff3bd 0%,#3fd474 40%,#16903f 100%)}
.hr-cell.r::before{background:radial-gradient(120% 90% at 30% 20%,#ffb0b0 0%,#ff5a5f 40%,#b8141f 100%)}
.hr-cell.g,.hr-cell.r{color:#fff;text-shadow:0 .25cqh 0 rgba(0,0,0,.35)}
/* الحرف الحالي: ذهبي ينبض */
.hr-cell.cur{background:#fff3b0;transform:scale(1.12);z-index:3;animation:hrPulse 1.1s ease-in-out infinite}
.hr-cell.cur::before{background:radial-gradient(120% 90% at 30% 20%,#fff6c2 0%,#ffd451 45%,#f0a316 100%)}
.hr-cell.won{animation:hrWon .75s cubic-bezier(.3,1.7,.5,1)}
/* وقت الاختيار: الخلايا الفاضية تنضغط */
.hr-cell.pick{cursor:pointer}
.hr-cell.pick:hover{transform:scale(1.1);z-index:3}
.hr-cell.pick:hover::before{background:radial-gradient(120% 90% at 30% 20%,#fff6c2 0%,#ffe07a 50%,#f5b225 100%)}
/* الخط الواصل للفايز */
.hr-cell.path{z-index:2;animation:hrPath 1.1s ease-in-out infinite;animation-delay:calc(var(--d) * 260ms)}
.hr-cell.path.g,.hr-cell.path.r{background:#fff}
@keyframes hrIn{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes hrPulse{0%,100%{transform:scale(1.08);filter:brightness(1)}50%{transform:scale(1.16);filter:brightness(1.15)}}
@keyframes hrWon{0%{transform:scale(.5) rotate(-30deg)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes hrPath{0%,100%{transform:scale(1);filter:brightness(1)}40%{transform:scale(1.16);filter:brightness(1.35)}}
/* الفرق: الأخضر يسار · الأحمر يمين */
.hr-team{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:17cqw;max-height:86%;display:flex;flex-direction:column;gap:1cqh;padding:1.6cqh 1cqw;border-radius:2cqh;background:rgba(10,8,26,.72);backdrop-filter:blur(6px);border:3px solid var(--edge);overflow:hidden}
.hr-team.g{left:1.4cqw;border-color:#2fbf71;box-shadow:inset 0 0 4cqh rgba(47,191,113,.22)}
.hr-team.r{right:1.4cqw;border-color:#e2474f;box-shadow:inset 0 0 4cqh rgba(226,71,79,.22)}
.hr-team h3{margin:0;text-align:center;font-size:max(17px,3.2cqh);font-weight:900}
.hr-cnt{display:flex;align-items:baseline;justify-content:center;gap:.4em}
.hr-cnt b{font-size:max(30px,7cqh);font-weight:900;line-height:1}
.hr-team.g .hr-cnt b{color:#4fe091}.hr-team.r .hr-cnt b{color:#ff7b81}
.hr-cnt small{font-size:max(13px,2.2cqh);font-weight:900;color:#c9d3e6}
.hr-team ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5cqh;min-height:0;overflow:hidden;flex:1}
.hr-team li{display:flex;align-items:center;gap:.5em;font-size:max(13px,2.1cqh);font-weight:900;padding:.3cqh .4cqw;border-radius:1cqh;background:rgba(255,255,255,.05)}
.hr-team li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-team li em{font-style:normal;color:var(--gold)}
.hr-team p{margin:0;text-align:center;font-size:max(12px,1.9cqh);font-weight:800;color:#c9d3e6}
.hr-team .hr-dir{font-weight:900;padding:.4em;border-radius:1cqh;background:rgba(255,255,255,.06)}
/* ══ الألوان على الصفحة كاملة + خلايا أكبر (٢٠٢٦/١٠/٢٢، المالك: «خلي الالوان على الصفحة كاملة والخلايا اكبر») ══
   الصفحة نفسها مقسومة مثل استوديو البرنامج: أخضر يمين ويسار (جهة الأخضر)، أحمر فوق وتحت (جهة الأحمر)، يلتقون ورا اللوحة.
   اللوحة صارت بلا إطار أخضر/أحمر خاصّ فيها — الخلايا تاخذ مكانه فتكبر. */
.xg.hr{background:linear-gradient(90deg,var(--G2) 0%,var(--G1) 30%,var(--G1) 70%,var(--G2) 100%)}
.xg.hr::before,.xg.hr::after{content:"";position:absolute;left:0;right:0;height:50%;z-index:0;pointer-events:none}
.xg.hr::before{top:0;clip-path:polygon(0 0,100% 0,62% 100%,38% 100%);background:linear-gradient(180deg,var(--R2),var(--R1))}
.xg.hr::after{bottom:0;clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);background:linear-gradient(0deg,var(--R2),var(--R1))}
.hr{--hw:min(16.6cqh,8.6cqw);--px:calc(var(--hw) * .3);--py:calc(var(--hh) * .14)}
.hr-board{background:none;clip-path:none}
.hr-plate{display:none}
.hr-cell small{font-size:max(11px,1.7cqh)}
/* العنوان والفرق فوق الألوان: لوحات غامقة أوضح */
.hr > .xg-head .xg-title{background:rgba(12,8,30,.72);border-radius:2cqh;padding:.6cqh 2cqw;border:2px solid rgba(255,255,255,.18)}
.hr-team{background:rgba(10,8,26,.82)}
.hr{--hw:min(15.8cqh,9.6cqw)}
/* ══ تقسيم الألوان يمرّ بزوايا اللوحة بالضبط (٢٠٢٦/١٠/٢٢، المالك: «فيه مشكلة بالألوان بعد تكبير الخلايا») ══
   كان التقسيم من زوايا الصفحة فيقطع الخلايا ويطلع الأخضر شريط صغير جنب اللوحة.
   الحين مركز التقسيم = مركز اللوحة، والخطوط تمرّ بزواياها (--bx --by --ba يحسبها huroof.js `syncSplit`):
   كلّ حافّة فوق/تحت للّوحة على أحمر، وكلّ جنب على أخضر. */
.xg.hr::before,.xg.hr::after{display:none}
.xg.hr{--SR:#e3343f;--SG:#2cbd62;background:
  radial-gradient(120% 90% at var(--bx,50%) var(--by,55%),rgba(255,255,255,.10) 0%,transparent 35%,rgba(0,0,0,.34) 100%),
  conic-gradient(from 0deg at var(--bx,50%) var(--by,55%),
    var(--SR) 0deg calc(var(--ba,50deg) - .4deg),rgba(255,255,255,.55) calc(var(--ba,50deg) - .4deg) calc(var(--ba,50deg) + .4deg),
    var(--SG) calc(var(--ba,50deg) + .4deg) calc(180deg - var(--ba,50deg) - .4deg),rgba(255,255,255,.55) calc(180deg - var(--ba,50deg) - .4deg) calc(180deg - var(--ba,50deg) + .4deg),
    var(--SR) calc(180deg - var(--ba,50deg) + .4deg) calc(180deg + var(--ba,50deg) - .4deg),rgba(255,255,255,.55) calc(180deg + var(--ba,50deg) - .4deg) calc(180deg + var(--ba,50deg) + .4deg),
    var(--SG) calc(180deg + var(--ba,50deg) + .4deg) calc(360deg - var(--ba,50deg) - .4deg),rgba(255,255,255,.55) calc(360deg - var(--ba,50deg) - .4deg) calc(360deg - var(--ba,50deg) + .4deg),
    var(--SR) calc(360deg - var(--ba,50deg) + .4deg))}