/* حركات «خلية الحروف» (js/fx.js) — المسرح، والعناوين ثلاثيّة الأبعاد، والسداسيّ العملاق، والقصاصات،
   وشارة الجولة، ورأس الملخّص. الحركة كلّها Web Animations من المخرج؛ هنا الهيئة الثابتة فقط. */

/* ── ألوان المسرح: نهاراً كريميّ ذهبيّ، ليلاً من لون بلاطة أيقونتنا إلى الداكن ── */
.fx-theme{
  --fx-sky0:#fff8e6; --fx-sky1:#f5e2b0; --fx-sky2:#e6c987;
  --fx-ray:rgba(205,176,106,.34); --fx-ray2:rgba(255,253,248,.2);
  --fx-outline:#fffdf8; --fx-shadow:rgba(91,74,31,.3);
  --fx-gold:#e0b44a; --fx-gold-deep:#7d5e17; --fx-edge:#d9b45e;
}
html.dark .fx-theme{
  --fx-sky0:#3a2b2f; --fx-sky1:#241b18; --fx-sky2:#0f0c09;
  --fx-ray:rgba(214,177,90,.12); --fx-ray2:rgba(214,177,90,.03);
  --fx-outline:#191114; --fx-shadow:rgba(0,0,0,.6);
  --fx-gold:#e8c25f; --fx-gold-deep:#7a5a16; --fx-edge:#b38a36;
}

.fx-stage{position:fixed; inset:0; z-index:85; overflow:hidden; display:grid; place-items:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none}
.fx-sky{position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 46%, var(--fx-sky0) 0%, var(--fx-sky1) 52%, var(--fx-sky2) 100%)}
.fx-rays{position:absolute; left:50%; top:50%; width:170vmax; height:170vmax; margin:-85vmax 0 0 -85vmax; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, var(--fx-ray) 0 7.5deg, var(--fx-ray2) 7.5deg 15deg);
  -webkit-mask:radial-gradient(circle, transparent 3%, #000 12%, #000 40%, transparent 68%);
          mask:radial-gradient(circle, transparent 3%, #000 12%, #000 40%, transparent 68%);
  will-change:transform}
.fx-glow{position:absolute; width:min(92vw, 780px); aspect-ratio:1; border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--fx-gold) 58%, transparent) 0%, transparent 64%)}
html.dark .fx-glow{background:radial-gradient(circle, color-mix(in srgb, var(--fx-gold) 42%, transparent) 0%, transparent 64%)}
.fx-stage.fx-veil{cursor:default}
.fx-stage.fx-veil .fx-sky, .fx-stage.fx-veil .fx-rays, .fx-stage.fx-veil .fx-glow, .fx-stage.fx-veil .fx-center{visibility:hidden}

/* ── العناوين: Alexandria 900 مائلة، بإطار رفيع وبروز ثلاثيّ الأبعاد من اللون العميق نفسه ── */
.fx-center{position:relative; display:grid; place-items:center; width:100%; padding:0 16px; pointer-events:none}
.fx-title{grid-area:1/1; display:flex; justify-content:center; text-align:center}
.fx-sway{transform:rotate(-5deg)}
.fx-swell{display:flex; flex-direction:column; align-items:center; gap:.02em}
.fx-line{display:block; font-family:var(--font-display),sans-serif; font-weight:900; line-height:1.12; white-space:nowrap;
  font-size:clamp(58px, 16.5vw, 156px); color:var(--c); padding:0 .08em;
  text-shadow:
    .035em 0 0 var(--fx-outline), -.035em 0 0 var(--fx-outline), 0 .035em 0 var(--fx-outline), 0 -.035em 0 var(--fx-outline),
    .025em .025em 0 var(--fx-outline), -.025em .025em 0 var(--fx-outline), .025em -.025em 0 var(--fx-outline), -.025em -.025em 0 var(--fx-outline),
    0 .045em 0 var(--d), 0 .06em 0 var(--d), 0 .075em 0 var(--d), 0 .09em 0 var(--d),
    .03em .1em 0 var(--fx-outline), -.03em .1em 0 var(--fx-outline), 0 .125em 0 var(--fx-outline),
    0 .17em .2em var(--fx-shadow)}
html.dark .fx-line{filter:drop-shadow(0 0 .18em color-mix(in srgb, var(--fx-gold) 30%, transparent))}
.fx-c-h{--c:#23a07f; --d:var(--h-deep)}
.fx-c-v{--c:#cf4a5e; --d:var(--v-deep)}
.fx-c-g{--c:var(--fx-gold); --d:var(--fx-gold-deep)}
html.dark .fx-c-h{--c:#2bb48f}
html.dark .fx-c-v{--c:#de5a6d}
/* التعادل: ذهبيّ ببروزٍ نصفه أخضر ونصفه أحمر */
.fx-c-g.fx-draw{text-shadow:
    .035em 0 0 var(--fx-outline), -.035em 0 0 var(--fx-outline), 0 .035em 0 var(--fx-outline), 0 -.035em 0 var(--fx-outline),
    .025em .025em 0 var(--fx-outline), -.025em .025em 0 var(--fx-outline), .025em -.025em 0 var(--fx-outline), -.025em -.025em 0 var(--fx-outline),
    0 .045em 0 var(--h-deep), 0 .06em 0 var(--h-deep), 0 .075em 0 var(--v-deep), 0 .09em 0 var(--v-deep),
    .03em .1em 0 var(--fx-outline), -.03em .1em 0 var(--fx-outline), 0 .125em 0 var(--fx-outline),
    0 .17em .2em var(--fx-shadow)}
.fx-logo .fx-line{font-size:clamp(56px, 15.5vw, 146px)}
.fx-iconwrap{width:clamp(84px, 24vw, 168px); aspect-ratio:1; margin-bottom:.1em; filter:drop-shadow(0 10px 18px var(--fx-shadow))}
.fx-icon{width:100%; height:100%; display:block; overflow:visible}
.fx-icon .fx-comb path, .fx-icon .fx-core{transform-box:fill-box; transform-origin:center}

/* ── زرّ «تخطٍّ» ── */
.fx-skip{position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; cursor:pointer;
  font:800 13px var(--font-body),sans-serif; color:var(--ink);
  background:color-mix(in srgb, var(--card) 78%, transparent); border:1px solid var(--card-line);
  box-shadow:var(--shadow-soft); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.fx-skip:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ── السداسيّ العملاق: حافّة ذهبيّة وداخلٌ بلون المسرح ── */
.fx-hexes{position:fixed; inset:0; z-index:86; pointer-events:none; overflow:hidden}
.fx-hexw{position:absolute; left:50%; top:50%; width:70vmax; height:80.83vmax; margin:-40.415vmax 0 0 -35vmax;
  transform:scale(0); will-change:transform}
.fx-hexes.fx-blur .fx-hexw{filter:blur(6px)}
.fx-hex{position:absolute; inset:0; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg, #f8de9e, var(--fx-edge) 55%, var(--fx-gold-deep))}
.fx-hex::after{content:""; position:absolute; inset:1.6%; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:radial-gradient(ellipse at 50% 46%, var(--fx-sky0) 0%, var(--fx-sky1) 58%, var(--fx-sky2) 100%)}
.fx-hexw.g1 .fx-hex{opacity:.35}
.fx-hexw.g2 .fx-hex{opacity:.15}

/* ── القصاصات ── */
.fx-confetti{position:fixed; inset:0; width:100%; height:100%; z-index:87; pointer-events:none}

/* ── خلايا اللوحة تتحرّك حول مركزها (للقفز والنبض) ── */
#board .cell, #board .cell text{transform-box:fill-box; transform-origin:center}

/* ── شارة الجولة في الشريط العلويّ ── */
.chip.round-chip{font-family:var(--font-display),sans-serif; font-weight:800; color:var(--gold-text);
  border-color:color-mix(in srgb, var(--gold) 45%, var(--card-line)); white-space:nowrap}

/* ── الملخّص: محجوب حتى ينكشف من تحت مسرح النهاية ── */
.fx-hold{visibility:hidden !important}

/* ── رأس الملخّص: سداسيّا الفريقين، وكأسنا فوق الفائز، وبطاقة الاسم والإجابات ── */
.ms-card > .medal{display:none}
#ms-board.ms-board{display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:14px; width:100%; max-width:400px; margin:6px auto 4px}
.ms-team{display:flex; flex-direction:column; align-items:center; min-width:0}
.ms-team.h{--c:var(--h); --cd:var(--h-deep)}
.ms-team.v{--c:var(--v); --cd:var(--v-deep)}
.ms-hexwrap{position:relative; padding-top:46px; display:grid; place-items:center}
.ms-hex{position:relative; width:clamp(96px, 29vw, 126px); aspect-ratio:.866; display:grid; place-items:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg, color-mix(in srgb, var(--c) 68%, #fff), var(--c) 50%, var(--cd));
  box-shadow:inset 0 5px 7px #ffffff80, inset 0 -14px 22px #00000045}
.ms-hex::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(125deg, #ffffff70, #ffffff00 46%)}
.ms-board:has(.ms-team.win) .ms-team:not(.win) .ms-hexwrap{transform:scale(.86); filter:saturate(.75)}
.ms-num{position:relative; z-index:1; font-family:var(--font-display),sans-serif; font-weight:900; line-height:1;
  font-size:clamp(46px, 13vw, 60px); color:#fff;
  text-shadow:0 2px 0 var(--cd), 0 4px 0 var(--cd), 0 6px 0 var(--cd), 0 9px 14px #0006}
.ms-trophy{position:absolute; top:0; left:50%; width:54px; height:54px; margin-left:-27px; z-index:2;
  filter:drop-shadow(0 4px 6px #5b4a1f55)}
.ms-pill{margin-top:10px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 12px; width:100%;
  border-radius:16px; background:var(--card2); border:1px solid var(--card-line); direction:rtl; min-width:0}
.ms-pill b{font-family:var(--font-display),sans-serif; font-weight:800; font-size:14.5px; color:var(--c);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ms-pill span{font-size:12px; font-weight:700; color:var(--dim); white-space:nowrap}
.ms-team.win.h .ms-pill{background:var(--wash-h); border-color:var(--line-h)}
.ms-team.win.v .ms-pill{background:var(--wash-v); border-color:var(--line-v)}