:root {
  --g0: #06361a;
  --g1: #0b5d2a;
  --g2: #1f9d4a;
  --g3: #8bd24a;
  --y: #ffd23f;
  --y2: #ffb300;
  --w: #fff;
  --ink: #0e2a18;
  --soft: #e9f7ec;
  --red: #e53935;
  --blue: #1e6bd6;
  --radius: 18px;
  --shadow: 0 6px 0 rgba(0, 0, 0, 0.22), 0 10px 24px rgba(0, 0, 0, 0.25);
  --font: system-ui, -apple-system, 'SF Arabic', 'Geeza Pro', 'Segoe UI', 'Noto Sans Arabic', Tahoma, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--w);
  background: var(--g1);
  overflow-x: hidden;
  font-size: 18px;
  line-height: 1.5;
}
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--y); outline-offset: 2px; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.25; }
.num { font-variant-numeric: normal; }

/* ===== الخلفية العشبية ===== */
.turf {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 64px, rgba(0,0,0,.05) 64px 128px),
    radial-gradient(120% 80% at 50% 0%, #2fae56 0%, #167a38 60%, #0b5d2a 100%);
}
.screen { flex: 1; display: flex; flex-direction: column; min-height: 100dvh; }
.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 14px 16px 28px; }
.wrap.narrow { max-width: 560px; }
.wrap.wide { max-width: 1400px; }

.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(0,0,0,.28); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 20; }
.topbar .title { flex: 1; font-weight: 900; font-size: 1.15rem; text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.iconbtn { width: 46px; height: 46px; border-radius: 14px; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 1.3rem; display: grid; place-items: center; }
.iconbtn:hover { background: rgba(255,255,255,.28); }

/* ===== الأزرار ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 8px 26px; border-radius: 16px; border: 3px solid rgba(255,255,255,.7);
  background: linear-gradient(#b6e35b, #7cc22d); color: #0b3d19; font-weight: 900; font-size: 1.2rem;
  box-shadow: 0 5px 0 #4f8a1c, 0 9px 16px rgba(0,0,0,.25); text-shadow: 0 1px 0 rgba(255,255,255,.5);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #4f8a1c; }
.btn[disabled] { filter: grayscale(.8); opacity: .55; pointer-events: none; }
.btn.big { min-height: 72px; font-size: 1.5rem; border-radius: 22px; padding: 10px 34px; }
.btn.primary { background: linear-gradient(#ffe46b, #ffb300); box-shadow: 0 5px 0 #b57b00, 0 9px 16px rgba(0,0,0,.25); color: #4a2f00; }
.btn.blue { background: linear-gradient(#6aa8ff, #1e6bd6); box-shadow: 0 5px 0 #124a9b, 0 9px 16px rgba(0,0,0,.25); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.btn.danger { background: linear-gradient(#ff7b6e, #e53935); box-shadow: 0 5px 0 #9b1f1c, 0 9px 16px rgba(0,0,0,.25); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.btn.ghost { background: rgba(255,255,255,.14); box-shadow: none; color: #fff; text-shadow: none; border-color: rgba(255,255,255,.4); }
.btn.small { min-height: 40px; font-size: 1rem; padding: 4px 16px; border-width: 2px; border-radius: 12px; box-shadow: 0 3px 0 #4f8a1c; }
.btn.primary.small { box-shadow: 0 3px 0 #b57b00; }
.btn.danger.small { box-shadow: 0 3px 0 #9b1f1c; }
.btn.blue.small { box-shadow: 0 3px 0 #124a9b; }
.btn.ghost.small { box-shadow: none; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row.center { justify-content: center; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grow { flex: 1; }
.center { text-align: center; }
.muted { opacity: .8; font-size: .9em; }

/* ===== بطاقات ولوحات ===== */
.card { background: rgba(255,255,255,.95); color: var(--ink); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card h2, .card h3 { color: var(--g1); }
.panel { background: rgba(0,0,0,.3); border-radius: var(--radius); padding: 16px; border: 2px solid rgba(255,255,255,.15); }
.pill { display: inline-block; padding: 2px 12px; border-radius: 99px; background: rgba(255,255,255,.2); font-weight: 700; font-size: .85em; }
.pill.ok { background: #1f9d4a; } .pill.warn { background: #ffb300; color: #3a2600; } .pill.bad { background: #e53935; }

.input, select.input, textarea.input {
  width: 100%; min-height: 50px; padding: 8px 16px; border-radius: 14px; border: 3px solid #b6e0bf;
  background: #fff; color: var(--ink); font-weight: 700; font-size: 1.1rem;
}
.input:focus { border-color: var(--y2); outline: none; }
label.field { display: block; font-weight: 800; margin-bottom: 4px; }
.field-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ===== الصفحة الرئيسية ===== */
.hero { text-align: center; padding: 18px 12px 6px; }
.hero .logo { width: min(300px, 70vw); margin: 0 auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.hero .slogan { font-size: clamp(1.1rem, 3.2vw, 1.7rem); font-weight: 900; text-shadow: 0 3px 0 rgba(0,0,0,.35); margin: 6px 0 2px; }
.hero .sub { opacity: .9; font-weight: 700; }
.menu { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 18px; }
.menu .btn { min-height: 84px; font-size: 1.35rem; }
.footer-note { text-align: center; opacity: .8; padding: 18px 10px 24px; font-size: .9rem; }

/* ===== مربعات الاختيار ===== */
.picker { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.tile { position: relative; border: 4px solid transparent; border-radius: 18px; background: rgba(255,255,255,.92); padding: 8px; color: var(--ink); text-align: center; font-weight: 900; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.tile svg { width: 100%; height: auto; display: block; }
.tile.sel { border-color: var(--y); box-shadow: 0 0 0 4px rgba(255,210,63,.5), 0 4px 0 rgba(0,0,0,.25); transform: scale(1.04); }
.tile .tick { position: absolute; top: -8px; inset-inline-start: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--y); display: none; place-items: center; color: #4a2f00; }
.tile.sel .tick { display: grid; }
.tables-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.table-ball { background: none; border: 0; padding: 0; position: relative; display: grid; place-items: center; }
.table-ball .ball-wrap { width: 110px; height: 110px; display: grid; place-items: center; position: relative; filter: drop-shadow(0 6px 4px rgba(0,0,0,.35)); transition: transform .15s; }
.table-ball:hover .ball-wrap { transform: scale(1.08) rotate(-8deg); }
.table-ball.sel .ball-wrap { transform: scale(1.12); filter: drop-shadow(0 0 14px var(--y)); }
.table-ball .ribbon { position: absolute; bottom: 6px; background: #fff; color: #0b3d19; padding: 0 12px; border-radius: 6px; font-weight: 900; box-shadow: 0 2px 0 rgba(0,0,0,.3); white-space: nowrap; }
.table-ball.sel .ribbon { background: var(--y); }
.table-ball.all .ribbon { background: #e53935; color: #fff; }

/* ===== أرقام وإحصاءات ===== */
.stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat { background: rgba(0,0,0,.28); border-radius: 16px; padding: 10px; text-align: center; border: 2px solid rgba(255,255,255,.18); }
.stat b { display: block; font-size: 1.9rem; color: var(--y); line-height: 1.1; }
.stat span { font-size: .85rem; opacity: .9; }

/* ===== جداول ===== */
table.grid { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
table.grid th { font-size: .85rem; opacity: .85; padding: 4px 8px; text-align: center; }
table.grid td { background: rgba(255,255,255,.95); color: var(--ink); padding: 8px; text-align: center; font-weight: 800; }
table.grid td:first-child { border-radius: 0 14px 14px 0; } table.grid td:last-child { border-radius: 14px 0 0 14px; }
table.grid td.name { text-align: start; }
table.grid tr.me td { background: #fff3b0; }
.rankcell { width: 52px; font-size: 1.3rem; }
.cell-av { display: inline-flex; align-items: center; gap: 8px; }
.cell-av svg { width: 38px; height: 38px; border-radius: 50%; background: #d8efdc; }
.scroll-x { overflow-x: auto; }

/* ===== النوافذ ===== */
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal { background: #f4fff6; color: var(--ink); border-radius: 22px; padding: 20px; width: min(520px, 100%); max-height: 92dvh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.modal.wide { width: min(860px, 100%); }
.modal h2 { color: var(--g1); text-align: center; }
.modal-body { margin: 10px 0 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0 } }
#toast { position: fixed; bottom: 22px; inset-inline: 0; margin: auto; width: fit-content; max-width: 92vw; background: #0b3d19; color: #fff; padding: 12px 22px; border-radius: 14px; font-weight: 800; z-index: 200; opacity: 0; transform: translateY(20px); transition: .25s; pointer-events: none; border: 2px solid var(--y); }
#toast.show { opacity: 1; transform: none; }
#toast.bad { border-color: var(--red); background: #5c1412; }

/* ===== الاتصال ===== */
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 800; }
.conn i { width: 10px; height: 10px; border-radius: 50%; background: #8bd24a; display: inline-block; }
.conn.off i { background: #e53935; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2 } }

/* ===== المباراة ===== */
.match { flex: 1; display: flex; flex-direction: column; min-height: 100dvh; background: #0b3d19; }
.match-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(0,0,0,.45); }
.score-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.score-side.right { flex-direction: row-reverse; }
.score-side .nm { font-weight: 900; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-side .portrait { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--y); background: #d8efdc; flex: none; }
.score-side .portrait svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.scorebox { background: #06210f; border: 3px solid var(--y); border-radius: 14px; padding: 2px 16px; font-size: 2rem; font-weight: 900; color: var(--y); min-width: 66px; text-align: center; line-height: 1.3; }
.timer { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.9rem; color: #0b3d19; background: conic-gradient(var(--tc, #8bd24a) calc(var(--p, 1) * 360deg), rgba(255,255,255,.25) 0); position: relative; }
.timer::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #e9f7a8; }
.timer span { position: relative; }
.timer.low { --tc: #e53935; animation: pulse .5s infinite; }
@keyframes pulse { 50% { transform: scale(1.08) } }
.match-info { text-align: center; font-weight: 800; padding: 4px; background: rgba(0,0,0,.25); font-size: .95rem; }
.stage { position: relative; flex: 1; min-height: 240px; overflow: hidden; }
.stage > svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.qbanner { position: absolute; top: 10px; inset-inline: 0; margin: auto; width: fit-content; max-width: 94%; background: rgba(255,255,255,.96); color: var(--ink); border-radius: 22px; padding: 4px 32px; font-size: clamp(2.2rem, 7vw, 4.2rem); font-weight: 900; box-shadow: 0 6px 0 rgba(0,0,0,.25); border: 4px solid var(--y); direction: ltr; z-index: 5; letter-spacing: .05em; }
.qbanner.pop { animation: pop .35s; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0 } 70% { transform: scale(1.08) } 100% { transform: none; opacity: 1 } }
.actors { position: absolute; inset: 0; pointer-events: none; }
.actor { position: absolute; transform: translate(-50%, -100%); transition: left .5s ease-in-out, top .5s ease-in-out, transform .5s; }
.actor svg { width: 100%; height: auto; display: block; }
.shotball { position: absolute; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); transition: left .55s cubic-bezier(.2,.7,.3,1), top .55s cubic-bezier(.2,.7,.3,1), width .55s; z-index: 4; }
.shotball svg { width: 100%; height: 100%; }
.callout { position: absolute; top: 38%; inset-inline: 0; margin: auto; width: fit-content; z-index: 8; font-size: clamp(2rem, 9vw, 4.4rem); font-weight: 900; color: var(--y); text-shadow: 0 4px 0 #8a5a00, 0 8px 18px rgba(0,0,0,.5); animation: pop .4s; pointer-events: none; text-align: center; }
.callout.bad { color: #ffb4ad; text-shadow: 0 4px 0 #7a1c18, 0 8px 18px rgba(0,0,0,.5); }
.answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px; background: linear-gradient(#0e4f23, #0b3d19); }
.ans {
  min-height: 92px; border: 0; border-radius: 50%; aspect-ratio: 1; max-height: 130px; justify-self: center; width: min(100%, 130px);
  font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 900; color: #0b3d19;
  background: radial-gradient(circle at 35% 30%, #fff, #dfe9e1 70%, #b5c4b8);
  box-shadow: 0 6px 0 #6d7f72, 0 10px 14px rgba(0,0,0,.4), inset 0 -6px 8px rgba(0,0,0,.12);
  transition: transform .1s;
}
.ans:hover { transform: translateY(-3px) scale(1.04); }
.ans:active { transform: translateY(3px); }
.ans.ok { background: radial-gradient(circle at 35% 30%, #d9ffd9, #4cd964 70%); color: #06521b; }
.ans.no { background: radial-gradient(circle at 35% 30%, #ffd9d6, #ff6b60 70%); color: #6b0f0a; }
.ans.gone { visibility: hidden; }
.ans[disabled] { pointer-events: none; }
.tools { display: flex; gap: 8px; justify-content: center; padding: 6px 8px 0; background: linear-gradient(#0e4f23, #0e4f23); flex-wrap: wrap; }
.tools .tl { background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.5); border-radius: 14px; padding: 4px 10px; font-weight: 800; font-size: .85rem; display: flex; align-items: center; gap: 6px; color: #fff; min-height: 40px; }
.tools .tl:disabled { opacity: .4; }
.tools .tl b { background: var(--y); color: #4a2f00; border-radius: 99px; min-width: 22px; text-align: center; }
.tools .tl:not(:disabled):hover { background: rgba(0,0,0,.75); border-color: var(--y); }
.tblmodal { background: #fff; color: var(--ink); border-radius: 16px; overflow: hidden; width: min(300px, 90vw); }
.tblmodal h3 { background: #8bd24a; color: #0b3d19; margin: 0; text-align: center; padding: 6px; font-size: 1.5rem; }
.tblmodal div.r { display: grid; grid-template-columns: 1fr auto 1fr; padding: 3px 18px; font-weight: 900; font-size: 1.3rem; direction: ltr; text-align: center; }
.tblmodal div.r:nth-child(even) { background: #eef8ee; }
.handover { text-align: center; padding: 30px 16px; }
.bigvs { font-size: 3rem; font-weight: 900; color: var(--y); text-shadow: 0 4px 0 #8a5a00; }
.countdown { font-size: 7rem; font-weight: 900; color: var(--y); text-shadow: 0 6px 0 #8a5a00; animation: pop .5s; }

/* ===== الدوري: الشجرة ===== */
.bracket { display: flex; gap: 22px; align-items: stretch; overflow-x: auto; padding: 8px 4px 16px; direction: rtl; }
.round { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; min-width: 210px; flex: none; }
.round h4 { text-align: center; margin: 0; background: rgba(0,0,0,.35); border-radius: 12px; padding: 4px; font-size: 1rem; }
.bm { background: rgba(255,255,255,.95); color: var(--ink); border-radius: 14px; padding: 6px; box-shadow: 0 4px 0 rgba(0,0,0,.25); border: 3px solid transparent; }
.bm.live { border-color: var(--y2); animation: glow 1.5s infinite; }
.bm.done { opacity: .98; }
.bm .slot { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; min-height: 42px; font-weight: 800; }
.bm .slot.win { background: #d7f7dc; }
.bm .slot.lose { opacity: .5; text-decoration: line-through; }
.bm .slot.empty { opacity: .5; font-weight: 600; font-style: italic; }
.bm .slot svg { width: 34px; height: 34px; border-radius: 50%; background: #d8efdc; flex: none; }
.bm .slot .sc { margin-inline-start: auto; font-weight: 900; color: var(--g1); }
.bm .state { font-size: .75rem; text-align: center; opacity: .75; padding-top: 2px; }
.bm .bye { font-size: .75rem; background: #ffe9a8; border-radius: 8px; padding: 0 8px; margin-inline-start: auto; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(255,179,0,.5), 0 4px 0 rgba(0,0,0,.25) } }

/* ===== المنصة والتتويج ===== */
.champion-screen { text-align: center; position: relative; overflow: hidden; }
.champion-screen .trophy { width: min(260px, 60vw); margin: 0 auto; animation: float 2.5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px) } }

/* ===== شاشة العرض ===== */
.display { min-height: 100dvh; display: flex; flex-direction: column; font-size: 22px; }
.display .dtitle { text-align: center; font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; text-shadow: 0 4px 0 rgba(0,0,0,.35); padding: 10px; }
.display .dq { font-size: clamp(4rem, 14vw, 11rem); font-weight: 900; direction: ltr; text-align: center; color: #fff; text-shadow: 0 8px 0 rgba(0,0,0,.35); }
.display .dscore { font-size: clamp(3rem, 9vw, 7rem); font-weight: 900; color: var(--y); }

/* ===== الشهادة ===== */
.cert { background: #fffdf3; color: #3a2a00; border: 14px double #c8962a; padding: 36px 30px; text-align: center; max-width: 900px; margin: 12px auto; border-radius: 6px; position: relative; aspect-ratio: 1.414; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.cert h1 { font-size: clamp(1.8rem, 5vw, 3.2rem); color: #0b5d2a; margin: 0; }
.cert .nm { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 900; color: #b57b00; border-bottom: 3px dotted #c8962a; padding-bottom: 4px; }
.cert .sig { display: flex; justify-content: space-around; margin-top: 18px; font-weight: 800; }

/* ===== تنقل المعلم ===== */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab { padding: 8px 18px; border-radius: 99px; border: 2px solid rgba(255,255,255,.4); background: rgba(0,0,0,.25); font-weight: 800; }
.tab.on { background: var(--y); color: #4a2f00; border-color: #fff; }
.teacher .card label.field { color: var(--g1); }
.teacher .card { color: var(--ink); }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 6px; background: #eef8ee; border-radius: 12px; }
.chart .bar { flex: 1; background: linear-gradient(#8bd24a, #1f9d4a); border-radius: 6px 6px 0 0; position: relative; min-height: 3px; }
.chart .bar.low { background: linear-gradient(#ffb4ad, #e53935); }
.chart .bar span { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: .75rem; color: var(--ink); font-weight: 800; }
.badge { display: inline-flex; align-items: center; gap: 4px; background: #fff3b0; color: #4a2f00; border-radius: 99px; padding: 2px 10px; font-weight: 800; font-size: .85rem; margin: 2px; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .btn.big { min-height: 64px; font-size: 1.3rem; }
  .timer { width: 58px; height: 58px; font-size: 1.4rem; }
  .scorebox { font-size: 1.5rem; padding: 0 10px; min-width: 48px; }
  .score-side .portrait { width: 40px; height: 40px; }
  .score-side .nm { font-size: .9rem; }
}
@media (min-width: 1024px) {
  .stage { min-height: 380px; }
  .answers { padding: 16px 20%; }
}
@media print {
  body { background: #fff !important; color: #000; }
  .no-print, .topbar { display: none !important; }
  .cert { margin: 0; page-break-after: always; }
  .card, .panel { box-shadow: none; }
  @page { size: A4 landscape; margin: 10mm; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.ans.picked { background: radial-gradient(circle at 35% 30%, #fff6c4, #ffd23f 70%); color: #4a2f00; }
.room-code { font-size: clamp(3rem, 12vw, 5.5rem); font-weight: 900; letter-spacing: .25em; color: var(--y); text-shadow: 0 4px 0 #8a5a00; direction: ltr; }
a.btn { text-decoration: none; }
a.card { color: var(--ink); }

/* =====================================================================
   مظهر الإصدار ٢: خطوط، أيقونات، الصفحة الرئيسية، لوحة المعلم الاحترافية
   ===================================================================== */
:root {
  --display: system-ui, -apple-system, 'SF Arabic', 'Geeza Pro', 'Segoe UI', 'Noto Sans Arabic', Tahoma, sans-serif;
  --ink: #10261a;
  --paper: #f3f7f4;
  --line: #dce8df;
  --muted: #5b7062;
  --g-btn: #1b8f45;
  --g-btn-dark: #14703a;
}
body { font-weight: 600; letter-spacing: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: .01em; }
h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.45rem, 3.6vw, 1.9rem); }
h3 { font-size: 1.3rem; }
.ico { display: block; flex: none; }
.ico-wrap { display: inline-flex; flex: none; }

/* شريط علوي أنيق */
.topbar { min-height: 60px; background: linear-gradient(180deg, rgba(4,32,14,.78), rgba(4,32,14,.55)); border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.topbar .title { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: .02em; }
.iconbtn { border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); transition: background .15s, transform .1s; }
.iconbtn:active { transform: scale(.94); }
.iconbtn .ico { margin: auto; }

/* الأزرار: خط أوضح وعمق أهدأ */
.btn { font-family: var(--font); font-weight: 800; border-width: 2px; letter-spacing: .01em; }
.btn.big { font-family: var(--display); font-weight: 800; font-size: 1.55rem; }
.btn .ico { margin-inline-end: 2px; }

/* ===== الصفحة الرئيسية ===== */
.hero { padding: 6px 12px 0; }
.hero .logo { width: min(340px, 76vw); }
.hero .slogan { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 4.4vw, 2.1rem); line-height: 1.3; margin: 2px 0 0; }
.home-wrap { max-width: 760px; }
.home-grid { display: grid; gap: 14px; margin-top: 20px; }
.home-primary { grid-template-columns: 1fr 1fr; }
.home-tiles { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.home-card {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 24px;
  text-decoration: none; color: #fff; border: 3px solid rgba(255,255,255,.6); overflow: hidden;
  box-shadow: 0 6px 0 rgba(0,0,0,.24), 0 16px 30px rgba(0,0,0,.26); transition: transform .12s, box-shadow .12s;
}
.home-card:hover { transform: translateY(-2px); }
.home-card:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.24); }
.home-card::after { content: ''; position: absolute; inset-inline-start: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.14); }
.home-card .badge { width: 68px; height: 68px; border-radius: 20px; background: rgba(255,255,255,.26); display: grid; place-items: center; flex: none; position: relative; z-index: 1; }
.home-card .txt { position: relative; z-index: 1; min-width: 0; }
.home-card b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1.15; }
.home-card .sub { display: block; font-size: .95rem; font-weight: 600; opacity: .92; margin-top: 2px; }
.home-card.student { background: linear-gradient(135deg, #ffd84d, #ff9f0a); color: #3a2500; }
.home-card.teacher { background: linear-gradient(135deg, #4a90f5, #1c4fb0); }
.home-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; text-align: center; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.13); border: 2px solid rgba(255,255,255,.32); border-radius: 22px; font-weight: 800; font-size: 1rem; line-height: 1.25;
  backdrop-filter: blur(6px); transition: background .15s, transform .12s;
}
.home-tile:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.home-tile .badge { width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.home-tile.gold .badge { background: linear-gradient(135deg, #ffd84d, #ffb300); color: #3a2500; }
.home-tile.lime .badge { background: linear-gradient(135deg, #b9ea5a, #7cc22d); color: #0b3d19; }
.home-tile.sky .badge { background: linear-gradient(135deg, #8cc8ff, #3b8ee6); color: #08284d; }
.star-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 20px; background: rgba(255,210,63,.18); border: 2px solid rgba(255,210,63,.55); }
@media (max-width: 560px) {
  .home-primary { grid-template-columns: 1fr; }
  .home-card { padding: 16px 18px; }
  .home-card .badge { width: 60px; height: 60px; }
  .home-tile { font-size: .88rem; padding: 14px 4px; }
  .home-tile .badge { width: 46px; height: 46px; }
}

/* ===== القائمة الرئيسية للطالب ===== */
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-grid .home-card { padding: 16px 16px; gap: 12px; }
.mode-grid .home-card b { font-size: 1.35rem; }
.mode-grid .home-card .badge { width: 54px; height: 54px; border-radius: 16px; }
.home-card.green { background: linear-gradient(135deg, #43c46a, #14803c); }
.home-card.purple { background: linear-gradient(135deg, #9b6bff, #5a2fc4); }
.home-card.coral { background: linear-gradient(135deg, #ff7a6b, #d8372b); }
.mini-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px; }
@media (max-width: 560px) { .mode-grid { grid-template-columns: 1fr; } .mini-row { grid-template-columns: repeat(2, 1fr); } }

/* بطاقات الإحصاء */
.stat { text-align: start; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; }
.stat b { font-family: var(--display); font-weight: 800; font-size: 2rem; }
.stat .ico { color: rgba(255,255,255,.6); margin-bottom: 2px; }
.stat span { font-weight: 700; }

/* ===== لوحة المعلم: تخطيط احترافي ===== */
.admin { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 100dvh; background: var(--paper); color: var(--ink); font-family: var(--font); }
.admin-side { position: sticky; top: 0; height: 100dvh; overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; color: #dff0e3; background: radial-gradient(120% 60% at 100% 0%, #11703a 0%, rgba(17,112,58,0) 60%), linear-gradient(180deg, #0a3d1f, #052a13); }
.admin-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.12); }
.admin-brand .mark { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #ffd84d, #ffa800); display: grid; place-items: center; color: #3a2500; flex: none; }
.admin-brand b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.1; color: #fff; }
.admin-brand small { opacity: .7; font-weight: 600; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: #cfe5d4; text-decoration: none; font-weight: 700; font-size: 1rem; transition: background .15s, color .15s; }
.admin-nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.admin-nav a.on { background: #ffd23f; color: #3a2500; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.admin-side .spacer { flex: 1; min-height: 12px; }
.admin-side .side-foot { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; }
.admin-main { min-width: 0; display: flex; flex-direction: column; }
.admin-top { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 16px 32px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.admin-top h1 { margin: 0; font-family: var(--font); font-weight: 900; font-size: 1.5rem; color: var(--ink); flex: 1; }
.admin-top .crumb { color: var(--muted); font-size: .9rem; font-weight: 700; }
.admin-body { padding: 26px 32px 56px; width: 100%; max-width: 1240px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 920px) {
  .admin { grid-template-columns: 1fr; }
  .admin-side { position: static; height: auto; flex-direction: row; align-items: center; gap: 6px; padding: 10px 12px; overflow-x: auto; }
  .admin-brand { padding: 0 6px 0 10px; margin: 0; border: 0; }
  .admin-brand div { display: none; }
  .admin-nav { flex-direction: row; gap: 4px; }
  .admin-nav a { white-space: nowrap; padding: 9px 12px; font-size: .92rem; }
  .admin-side .spacer, .admin-side .side-foot { display: none; }
  .admin-top { padding: 12px 16px; top: 0; }
  .admin-body { padding: 18px 14px 40px; }
}

/* مكوّنات لوحة المعلم: هادئة وواضحة */
.admin .card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(16,38,26,.04), 0 8px 24px rgba(16,38,26,.05); }
.admin h2, .admin h3 { font-family: var(--font); font-weight: 900; color: var(--ink); margin: 0 0 .5em; }
.admin h2 { font-size: 1.4rem; } .admin h3 { font-size: 1.15rem; }
.admin .panel { background: #edf5ef; border: 1px solid var(--line); color: var(--ink); border-radius: 16px; }
.admin .muted { color: var(--muted) !important; }
.admin .btn { min-height: 42px; padding: 0 20px; font-size: .98rem; font-weight: 800; border: 0; border-radius: 11px; background: var(--g-btn); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.12), inset 0 -2px 0 rgba(0,0,0,.14); text-shadow: none; }
.admin .btn:hover { background: var(--g-btn-dark); filter: none; }
.admin .btn:active { transform: translateY(1px); box-shadow: none; }
.admin .btn.primary { background: #ffc61a; color: #3a2500; } .admin .btn.primary:hover { background: #f2b600; }
.admin .btn.blue { background: #2a69d8; color: #fff; } .admin .btn.blue:hover { background: #1f55b5; }
.admin .btn.danger { background: #d93a2e; color: #fff; } .admin .btn.danger:hover { background: #b92d23; }
.admin .btn.ghost { background: #fff; color: var(--ink) !important; border: 1.5px solid var(--line) !important; box-shadow: none; } .admin .btn.ghost:hover { background: #f0f6f2; }
.admin .btn.small { min-height: 34px; padding: 0 13px; font-size: .88rem; border-radius: 9px; }
.admin .input, .admin select.input, .admin textarea.input { border: 1.5px solid var(--line); border-radius: 11px; min-height: 44px; font-weight: 600; font-size: 1rem; background: #fff; }
.admin textarea.input { padding: 10px 14px; }
.admin .input:focus { border-color: #1b8f45; box-shadow: 0 0 0 4px rgba(27,143,69,.14); }
.admin label.field { color: var(--ink); font-weight: 800; font-size: .92rem; margin-bottom: 6px; }
.admin table.grid { border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.admin table.grid th { background: #f0f6f2; color: var(--muted); font-size: .8rem; font-weight: 800; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.admin table.grid td { background: transparent; border-top: 1px solid #edf3ee; padding: 10px 12px; font-weight: 700; }
.admin table.grid tr:first-child td { border-top: 0; }
.admin table.grid td:first-child, .admin table.grid td:last-child { border-radius: 0; }
.admin table.grid tbody tr:hover td { background: #f7fbf8; }
.admin .stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.admin .stat { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16,38,26,.04), 0 8px 24px rgba(16,38,26,.05); }
.admin .stat b { color: var(--ink); font-family: var(--font); font-weight: 900; font-size: 2.1rem; }
.admin .stat span { color: var(--muted); }
.admin .stat .ico { color: #1b8f45; background: #e6f4ea; padding: 8px; box-sizing: content-box; border-radius: 12px; margin-bottom: 8px; width: 22px; height: 22px; }
.admin .pill { background: #e6f0e9; color: var(--ink); } .admin .pill.ok { background: #1b8f45; color: #fff; } .admin .pill.warn { background: #ffe08a; color: #3a2500; } .admin .pill.bad { background: #d93a2e; color: #fff; }
.admin .tab { background: #fff; color: var(--ink); border: 1.5px solid var(--line); font-weight: 800; }
.admin .tab.on { background: #1b8f45; color: #fff; border-color: #1b8f45; }
.admin .round h4 { background: #e4efe7; color: var(--ink); }
.admin .bm { box-shadow: 0 1px 2px rgba(16,38,26,.08), 0 6px 14px rgba(16,38,26,.06); border: 2px solid var(--line); }
.admin .bm.live { border-color: #ffb300; }
.admin .room-code { color: #b57b00; text-shadow: none; }
.admin .tables-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.admin .table-ball .ball-wrap { width: 78px; height: 78px; }
.admin .table-ball .ribbon { font-size: .78rem; }
.admin .badge { background: #fff3b0; }
.admin .callout { color: var(--ink); text-shadow: none; }
.admin .chart { background: #f0f6f2; }
.admin .cell-av svg { background: #e6f4ea; }
.admin .scroll-x { border-radius: 14px; }
.admin-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.admin-quick a, .admin-quick button { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; text-align: start; font-weight: 800; box-shadow: 0 1px 2px rgba(16,38,26,.04), 0 8px 24px rgba(16,38,26,.05); transition: transform .12s, border-color .15s; }
.admin-quick a:hover, .admin-quick button:hover { transform: translateY(-2px); border-color: #1b8f45; }
.admin-quick .qi { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #e6f4ea; color: #1b8f45; flex: none; }
.admin-quick small { display: block; color: var(--muted); font-weight: 600; margin-top: 1px; }
.admin-quick .qi.gold { background: #fff0bd; color: #a86b00; } .admin-quick .qi.blue { background: #e1ecff; color: #2a69d8; }

/* بوابة المعلم */
.gate { max-width: 460px; margin: 6vh auto 0; text-align: center; }
.gate .lock { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 8px; display: grid; place-items: center; background: linear-gradient(135deg, #ffd84d, #ffa800); color: #3a2500; box-shadow: 0 8px 20px rgba(0,0,0,.25); }

/* لوحة الصدارة وجداول الطلاب: ظلال أنعم */
table.grid td { font-weight: 700; }
.tab { font-weight: 800; }
@media print { .admin { display: block; background: #fff; } .admin-side, .admin-top { display: none !important; } .admin-body { padding: 0; } }
a.btn { text-decoration: none; }

@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat { padding: 10px 10px; border-radius: 14px; }
  .stat b { font-size: 1.5rem; }
  .stat span { font-size: .78rem; }
}
a.tab { color: #fff; text-decoration: none; }
a.tab.on { color: #4a2f00; }
.admin a.tab { color: var(--ink); } .admin a.tab.on { color: #fff; }

/* ===================== واجهة المباراة الغامرة (بأسلوب النقل التلفزيوني) ===================== */
.match.immersive { position: relative; height: 100dvh; min-height: 0; overflow: hidden; background: #050f09; }
.match.immersive .stage { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; min-height: 0; z-index: 0; }
.match.immersive .match-head, .match.immersive .match-info, .match.immersive .tools, .match.immersive .answers { position: relative; z-index: 5; }
.match.immersive .match-head {
  margin: calc(8px + env(safe-area-inset-top, 0px)) 10px 0; padding: 8px 14px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(14,42,26,.82), rgba(5,20,11,.78)); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
.match.immersive .scorebox { background: linear-gradient(#0a2415, #04120a); border: 2px solid rgba(255,210,63,.9); font-family: var(--display); font-weight: 800; font-size: 2rem; letter-spacing: .02em; box-shadow: 0 0 18px rgba(255,210,63,.25); }
.match.immersive .timer { box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.4); font-family: var(--display); font-weight: 800; }
.match.immersive .match-info {
  align-self: center; margin-top: 8px; padding: 5px 16px; border-radius: 99px; background: rgba(5,20,11,.7); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14); font-weight: 800; font-size: .88rem; width: fit-content; max-width: 92%;
}
.match.immersive .qbanner {
  top: clamp(132px, 19dvh, 170px); background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(236,246,238,.94)); border: 0; border-radius: 26px;
  font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 8vw, 4.6rem); padding: 0 34px; line-height: 1.25;
  box-shadow: 0 0 0 5px rgba(255,210,63,.95), 0 14px 34px rgba(0,0,0,.5); color: #0b3d19;
}
.match.immersive .tools { margin-top: auto; background: none; padding: 0 10px 8px; }
.match.immersive .tools .tl { background: rgba(5,20,11,.72); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); border-radius: 99px; }
.match.immersive .answers {
  background: linear-gradient(180deg, rgba(3,14,8,0), rgba(3,14,8,.82) 38%); padding: 12px 10px calc(14px + env(safe-area-inset-bottom, 0px)); gap: 10px;
}
.match.immersive .tools + .answers { margin-top: 0; }
.match.immersive .ans {
  width: min(100%, 124px); font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 7vw, 3rem); color: #0b3d19;
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, #eef3ef 38%, #bfcdc3 100%);
  box-shadow: 0 7px 0 #7b8c80, 0 14px 22px rgba(0,0,0,.5), inset 0 -8px 12px rgba(0,0,0,.12), inset 0 6px 10px rgba(255,255,255,.9);
}
.match.immersive .ans:hover { transform: translateY(-4px) scale(1.05); }
.match.immersive .ans.ok { background: radial-gradient(circle at 32% 26%, #e8ffe8, #43d663 70%); color: #04521a; }
.match.immersive .ans.no { background: radial-gradient(circle at 32% 26%, #ffe3e0, #ff6b60 70%); color: #6b0f0a; }
.match.immersive .ans.picked { background: radial-gradient(circle at 32% 26%, #fff8cf, #ffd23f 72%); color: #4a2f00; }

/* إعلان الهدف */
.goal-splash { position: absolute; inset: 0; z-index: 12; display: grid; place-items: start center; padding-top: clamp(96px, 15dvh, 150px); pointer-events: none; overflow: hidden; }
.goal-splash .g-band { position: absolute; top: clamp(90px, 14dvh, 140px); left: -100%; width: 100%; height: clamp(64px, 11dvh, 96px); opacity: .8; background: linear-gradient(90deg, rgba(255,210,63,0), rgba(255,210,63,.92) 30%, rgba(255,160,0,.95) 70%, rgba(255,160,0,0)); transform: skewY(-4deg); animation: gband 2.1s ease-out forwards; mix-blend-mode: screen; }
@keyframes gband { 0% { left: -100%; } 25% { left: 0; } 80% { left: 0; opacity: 1; } 100% { left: 0; opacity: 0; } }
.goal-splash .g-title {
  position: relative; font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 8vw, 4rem); line-height: 1.2; color: #fff; letter-spacing: .02em;
  text-shadow: 0 3px 0 #7a3b00, 0 8px 16px rgba(0,0,0,.55); animation: gpop 2.1s cubic-bezier(.2,1.4,.3,1) forwards;
}
@keyframes gpop { 0% { transform: scale(.2) rotate(-8deg); opacity: 0; } 18% { transform: scale(1.18) rotate(2deg); opacity: 1; } 30% { transform: scale(1) rotate(0); } 85% { opacity: 1; } 100% { transform: scale(1.06); opacity: 0; } }
.goal-splash .g-sub { display: none; position: absolute; top: calc(50% + clamp(2.6rem, 11vw, 5rem)); font-weight: 900; font-size: clamp(1.1rem, 4vw, 1.7rem); color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.5); animation: gsub 2.1s forwards; }
@keyframes gsub { 0%, 20% { opacity: 0; transform: translateY(14px); } 35%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.goal-splash .g-card {
  position: absolute; bottom: clamp(170px, 26dvh, 230px); inset-inline-start: 12px; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 10px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(5,20,11,.92), rgba(14,60,32,.9)); border: 1px solid rgba(255,255,255,.2); border-inline-start: 6px solid #ffd23f; animation: gcard 2.2s forwards;
}
.goal-splash .g-card b { display: block; font-size: 1.15rem; } .goal-splash .g-card small { opacity: .8; font-weight: 700; }
.goal-splash .g-face { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: #d8efdc; display: grid; place-items: center; }
@keyframes gcard { 0% { transform: translateX(120%); opacity: 0; } 18%, 82% { transform: none; opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }
@media (max-height: 640px) { .match.immersive .qbanner { top: 118px; font-size: 2.4rem; } }

/* ===================== أسلوب منصات الألعاب: شريط النتيجة والأزرار ===================== */
.match.immersive { --ink-dark: #062313; --edge: rgba(255,255,255,.16); }
.match.immersive .match-head {
  width: min(880px, calc(100% - 20px)); margin: calc(10px + env(safe-area-inset-top, 0px)) auto 0; padding: 0; gap: 0; align-items: stretch; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(9,52,28,.94), rgba(4,24,13,.94)); border: 1px solid var(--edge); box-shadow: 0 14px 34px rgba(0,0,0,.5);
  grid-template-columns: 1fr auto 1fr;
}
.match.immersive .score-side { padding: 7px 14px; gap: 12px; border-inline-start: 6px solid var(--kit, #1f9d4a); min-width: 0; }
.match.immersive .score-side.right { border-inline-start: 0; border-inline-end: 6px solid var(--kit, #1f9d4a); }
.match.immersive .score-side > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.match.immersive .score-side.right > div { flex-direction: row-reverse; }
.match.immersive .score-side .portrait { width: 42px; height: 42px; border: 2px solid rgba(255,255,255,.85); }
.match.immersive .score-side .nm { font-weight: 800; font-size: 1.02rem; letter-spacing: .01em; }
.match.immersive .scorebox { background: #fff; color: var(--ink-dark); border: 0; border-radius: 8px; min-width: 46px; padding: 0 10px; font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1.25; box-shadow: none; }
.match.immersive .timer {
  width: auto; height: auto; min-width: 86px; border-radius: 0; padding: 4px 18px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 2.2rem; color: #201500;
  background: linear-gradient(90deg, #ffd23f calc(var(--p, 1) * 100%), rgba(255,255,255,.22) calc(var(--p, 1) * 100%)); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%); box-shadow: none;
}
.match.immersive .timer::before { display: none; }
.match.immersive .timer span { position: relative; }
.match.immersive .timer.low { --tc: #e53935; animation: none; background: linear-gradient(90deg, #ff5a4a calc(var(--p, 1) * 100%), rgba(255,255,255,.22) 0); color: #fff; }
.match.immersive .match-info { margin-top: 8px; padding: 3px 16px; border-radius: 6px; background: rgba(4,24,13,.8); border: 1px solid var(--edge); font-size: .82rem; letter-spacing: .02em; }
.pips { display: none; }
.match.immersive .pips { display: flex; gap: 5px; justify-content: center; margin: 7px auto 0; z-index: 5; position: relative; max-width: 92%; }
.pips i { width: clamp(12px, 3vw, 22px); height: 6px; border-radius: 3px; background: rgba(255,255,255,.28); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.pips i.ok { background: #3fd07a; box-shadow: 0 0 8px #3fd07a; } .pips i.no { background: #ff5a5f; }
.match.immersive .qbanner {
  top: clamp(150px, 22dvh, 190px); background: linear-gradient(180deg, rgba(9,52,28,.92), rgba(4,24,13,.9)); color: #fff; border: 1px solid var(--edge); border-radius: 14px; padding: 4px 38px 8px;
  font-size: clamp(2.8rem, 8vw, 4.8rem); box-shadow: inset 0 -5px 0 #ffd23f, 0 16px 38px rgba(0,0,0,.55); letter-spacing: .06em; text-shadow: 0 3px 0 rgba(0,0,0,.4);
}
.match.immersive .qbanner::before { content: 'احسب'; position: absolute; top: -13px; inset-inline-start: 16px; background: #ffd23f; color: #201500; font-family: var(--font); font-weight: 900; font-size: .78rem; padding: 1px 14px; border-radius: 6px; direction: rtl; }
.match.immersive .answers { grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; gap: 12px; padding: 14px 12px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(2,14,8,0), rgba(2,14,8,.86) 45%); }
.match.immersive .ans {
  width: 100%; max-height: none; aspect-ratio: auto; min-height: 70px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px;
  background: linear-gradient(180deg, rgba(13,62,33,.94), rgba(5,30,16,.94)); border: 2px solid rgba(255,255,255,.2); color: #fff; font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 6vw, 2.6rem);
  box-shadow: 0 10px 22px rgba(0,0,0,.45); transition: transform .12s, border-color .12s, background .12s; justify-self: stretch;
}
.match.immersive .ans:hover, .match.immersive .ans:focus-visible { transform: translateY(-4px); border-color: #fff; background: linear-gradient(180deg, rgba(22,98,52,.96), rgba(8,48,25,.96)); }
.match.immersive .ans b { font-weight: 400; flex: 1; text-align: center; }
.match.immersive .ans .glyph { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--font); font-weight: 900; font-size: 1.35rem; border: 2.5px solid currentColor; flex: none; background: rgba(0,0,0,.25); }
.match.immersive .ans .g0 { color: #3fd07a; } .match.immersive .ans .g1 { color: #ff6b73; } .match.immersive .ans .g2 { color: #ffd23f; }
.match.immersive .ans.ok { background: linear-gradient(180deg, #2fbf64, #16833f); border-color: #b9ffd0; color: #fff; }
.match.immersive .ans.no { background: linear-gradient(180deg, #e0524f, #a42522); border-color: #ffc6c2; color: #fff; }
.match.immersive .ans.picked { border-color: #ffd23f; background: linear-gradient(180deg, rgba(120,92,10,.95), rgba(60,44,4,.95)); }
.match.immersive .ans.ok .glyph, .match.immersive .ans.no .glyph, .match.immersive .ans.picked .glyph { color: #fff; }
@media (max-width: 560px) {
  .match.immersive .match-head { grid-template-columns: 1fr auto 1fr; }
  .match.immersive .score-side { padding: 6px 8px; gap: 6px; }
  .match.immersive .score-side .nm { font-size: .78rem; max-width: 64px; }
  .match.immersive .score-side .portrait { width: 34px; height: 34px; }
  .match.immersive .scorebox { font-size: 1.5rem; min-width: 34px; }
  .match.immersive .timer { min-width: 64px; font-size: 1.6rem; padding: 3px 10px; }
  .match.immersive .answers { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .match.immersive .ans { padding: 6px 8px; min-height: 64px; flex-direction: column; justify-content: center; gap: 2px; }
  .match.immersive .ans .glyph { width: 26px; height: 26px; font-size: .95rem; }
  .match.immersive .qbanner { top: 140px; padding: 2px 24px 6px; }
}

.pips i { background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.55); }
.match.immersive .qbanner { top: clamp(130px, 19dvh, 165px); }

/* ===================== القائمة الرئيسية بأسلوب منصات الألعاب ===================== */
.screen.fifa { background: radial-gradient(90% 70% at 78% 0%, #20409a 0%, rgba(32,64,154,0) 60%), radial-gradient(80% 60% at 0% 100%, #0d5a34 0%, rgba(13,90,52,0) 60%), linear-gradient(180deg, #0a1330, #050a1c); }
.screen.fifa .topbar { background: rgba(5,10,28,.7); }
.fifa-hub { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: start; }
.hero-card { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 14px 16px 18px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.16); border-top: 5px solid var(--kit, #1f9d4a); box-shadow: 0 22px 50px rgba(0,0,0,.45); }
.hero3d { width: 100%; height: 320px; display: grid; place-items: center; position: relative; }
.hero-info { text-align: center; width: 100%; }
.hero-name { font-family: var(--display); font-size: 2.1rem; line-height: 1.1; }
.hero-sub { color: var(--y); font-weight: 800; margin-bottom: 8px; }
.fchips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fchip { background: rgba(0,0,0,.32); border-radius: 12px; padding: 6px 2px; }
.fchip b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: #fff; } .fchip small { opacity: .75; font-weight: 700; font-size: .72rem; }
.tiles { display: flex; flex-direction: column; gap: 12px; }
.sec { margin: 6px 0 0; font-size: 1.15rem; opacity: .85; letter-spacing: .03em; }
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile-grid.small { grid-template-columns: repeat(3, 1fr); }
.ftile { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 18px; min-height: 96px; border-radius: 18px; text-decoration: none; color: #fff; overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1.5px solid rgba(255,255,255,.18); box-shadow: 0 10px 24px rgba(0,0,0,.35); transition: transform .14s, border-color .14s, background .14s; }
.ftile::before { content: ''; position: absolute; inset-inline-end: 0; top: 0; bottom: 0; width: 7px; background: var(--acc, #ffd23f); }
.ftile::after { content: ''; position: absolute; inset-inline-start: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: var(--acc, #ffd23f); opacity: .12; }
.ftile:hover, .ftile:focus-visible { transform: translateY(-4px) scale(1.015); border-color: #fff; background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.07)); }
.ftile .fico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--acc, #ffd23f); color: #0a1226; flex: none; position: relative; z-index: 1; }
.ftile .ftxt { flex: 1; min-width: 0; position: relative; z-index: 1; } .ftile b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.15; } .ftile small { opacity: .8; font-weight: 600; }
.ftile .farrow { opacity: .55; position: relative; z-index: 1; }
.t-gold { --acc: #ffd23f; } .t-red { --acc: #ff6b73; } .t-violet { --acc: #a98bff; } .t-blue { --acc: #5aa8ff; } .t-lime { --acc: #a6e04b; } .t-sky { --acc: #6fd3ff; }
.tile-grid.small .ftile { min-height: 80px; padding: 12px; gap: 10px; flex-direction: column; text-align: center; justify-content: center; } .tile-grid.small .ftile .farrow { display: none; } .tile-grid.small .ftile b { font-size: 1.15rem; } .tile-grid.small .ftile .fico { width: 44px; height: 44px; }
@media (max-width: 900px) { .fifa-hub { grid-template-columns: 1fr; } .hero-card { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; } .hero3d { width: 150px; height: 200px; } .hero-info { flex: 1; min-width: 200px; } }
@media (max-width: 560px) { .tile-grid { grid-template-columns: 1fr; } .tile-grid.small { grid-template-columns: repeat(3, 1fr); } .tile-grid.small .ftile small { display: none; } }

/* مقارنة الإحصاءات */
.statbars { background: linear-gradient(180deg, rgba(14,26,56,.92), rgba(7,14,32,.92)); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.4); color: #fff; }
.sb-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; } .sb-head span { opacity: .7; font-size: .85rem; letter-spacing: .06em; }
.sb-row { display: grid; grid-template-columns: 74px 1fr 74px; gap: 10px; align-items: center; }
.sb-v { font-family: var(--display); font-size: 1.5rem; text-align: center; opacity: .75; } .sb-v.win { color: var(--y); opacity: 1; }
.sb-bar { position: relative; height: 26px; border-radius: 6px; overflow: hidden; display: flex; background: rgba(255,255,255,.1); }
.sb-bar i.a { background: linear-gradient(90deg, #ffd23f, #ffb300); } .sb-bar i.b { background: linear-gradient(90deg, #4aa8ff, #1e63d6); }
.sb-bar em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .8rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
/* شاشة المواجهة */
.vs-wrap { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 20px; text-align: center; }
.vs-title { font-family: var(--display); font-size: clamp(1.6rem, 5vw, 2.4rem); letter-spacing: .1em; color: var(--y); }
.vs-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 4vw, 40px); width: 100%; max-width: 900px; }
.vs-side { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 10px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.18); border-top: 6px solid var(--kit); animation: vsin .6s cubic-bezier(.2,1.2,.3,1) both; }
.vs-side.r { animation-delay: .12s; }
.vs-face { width: clamp(100px, 24vw, 170px); height: clamp(100px, 24vw, 170px); border-radius: 50%; overflow: hidden; border: 4px solid #fff; background: #d8efdc; box-shadow: 0 10px 26px rgba(0,0,0,.45); } .vs-face svg { width: 100%; height: 100%; display: block; }
.vs-name { font-family: var(--display); font-size: clamp(1.4rem, 4.4vw, 2.2rem); }
.vs-badge { font-family: var(--display); font-size: clamp(2.4rem, 8vw, 4.4rem); color: #fff; text-shadow: 0 4px 0 #b35a00, 0 0 30px rgba(255,210,63,.8); animation: pop .5s .25s both; }
@keyframes vsin { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }

.club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 250px; overflow: auto; padding: 4px; }
.club { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font-weight: 800; }
.club small { font-size: .78rem; line-height: 1.2; text-align: center; } .club.sel { border-color: var(--y); background: rgba(255,210,63,.2); }

/* ===================== هوية بصرية على نهج بث ركلات الجزاء: أسود فحمي + أخضر ليموني + أبيض ===================== */
:root { --hud: system-ui, -apple-system, 'SF Arabic', 'Geeza Pro', 'Segoe UI', 'Noto Sans Arabic', Tahoma, sans-serif; --lime: #2bf08a; --lime-d: #12b862; --carbon: rgba(8,11,15,.86); }
.match.immersive { --edge: rgba(255,255,255,.12); font-family: var(--hud); }
.match.immersive::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%); }
.match.immersive .stage3d { filter: contrast(1.07) saturate(1.06); }
/* شريط النتيجة أعلى اليسار بحدّة حواف كالبث */
.match.immersive .match-head { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; right: auto; margin: 0; width: min(540px, calc(100% - 24px)); border-radius: 4px; background: var(--carbon); border: 0; box-shadow: 0 8px 22px rgba(0,0,0,.5); overflow: visible; z-index: 8; }
.match.immersive .match-head::before { content: ''; align-self: stretch; width: 46px; background: var(--lime) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0e12' stroke-width='2' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='m12 7.5 4 2.9-1.5 4.6h-5L8 10.4Z' fill='%230b0e12'/></svg>") center/26px no-repeat; grid-column: 1; grid-row: 1; margin-inline-end: 0; }
.match.immersive .match-head { grid-template-columns: 46px 1fr auto 1fr; }
.match.immersive .match-head > :nth-child(1) { grid-column: 2; } .match.immersive .match-head > :nth-child(2) { grid-column: 3; } .match.immersive .match-head > :nth-child(3) { grid-column: 4; }
.match.immersive .score-side { border: 0 !important; padding: 5px 12px; }
.match.immersive .score-side::after { content: ''; width: 3px; align-self: stretch; background: var(--kit, var(--lime)); border-radius: 2px; order: 9; }
.match.immersive .score-side .nm { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--hud); font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
.match.immersive .scorebox { font-family: var(--hud); font-weight: 800; background: #fff; color: #0b0e12; border-radius: 3px; min-width: 38px; font-size: 1.45rem; line-height: 1.3; }
.match.immersive .timer { clip-path: none; background: linear-gradient(90deg, var(--lime) calc(var(--p, 1) * 100%), rgba(255,255,255,.18) 0); color: #04140b; font-family: var(--hud); font-weight: 800; font-size: 1.5rem; min-width: 64px; padding: 2px 12px; }
.match.immersive .timer.low { background: linear-gradient(90deg, #ff4d4d calc(var(--p, 1) * 100%), rgba(255,255,255,.18) 0); color: #fff; }
.match.immersive .match-info { position: absolute; top: calc(66px + env(safe-area-inset-top, 0px)); left: 12px; margin: 0; align-self: auto; background: var(--carbon); border: 0; border-radius: 3px; font-family: var(--hud); font-weight: 700; font-size: .8rem; z-index: 8; padding: 3px 12px; }
.match.immersive .match-info + .match-info { top: calc(92px + env(safe-area-inset-top, 0px)); }
.pips-wrap { display: none; }
.match.immersive .pips-wrap { display: flex; flex-direction: column; gap: 3px; position: absolute; top: calc(66px + env(safe-area-inset-top, 0px)); left: calc(12px + 120px); z-index: 8; background: var(--carbon); padding: 4px 10px 3px; border-radius: 3px; }
.match.immersive .pips-wrap small { font-family: var(--hud); font-size: .66rem; opacity: .75; letter-spacing: .05em; text-align: center; }
.match.immersive .pips { margin: 0; justify-content: flex-start; gap: 4px; max-width: none; }
.pips i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.2); box-shadow: none; border: 1px solid rgba(255,255,255,.35); }
.pips i.ok { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 8px var(--lime); } .pips i.no { background: #ff4d4d; border-color: #ff4d4d; }
/* السؤال: لوحة بث داكنة بخط أخضر */
.match.immersive .qbanner { font-family: var(--hud); font-weight: 800; border-radius: 4px; background: var(--carbon); box-shadow: inset 0 -4px 0 var(--lime), 0 14px 30px rgba(0,0,0,.55); border: 0; letter-spacing: .08em; }
.match.immersive .qbanner::before { background: var(--lime); color: #04140b; border-radius: 3px; font-family: var(--hud); font-weight: 800; }
/* شرائط اللاعبين أسفل الشاشة */
.pstrip { display: none; }
.match.immersive .pstrip { position: absolute; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 8; width: min(270px, 24vw); display: grid; grid-template-columns: 34px auto 1fr; align-items: center; gap: 8px; padding: 6px 10px 10px; background: var(--carbon); border-radius: 3px; }
.match.immersive .pstrip.l { left: 12px; } .match.immersive .pstrip.r { right: 12px; }
.match.immersive .pstrip .ps-crest { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #d8efdc; display: block; } .match.immersive .pstrip .ps-crest svg { width: 100%; height: 100%; display: block; }
.match.immersive .pstrip .ps-num { font-family: var(--hud); font-weight: 800; font-size: 1.15rem; color: var(--lime); }
.match.immersive .pstrip .ps-name { font-family: var(--hud); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match.immersive .pstrip small { display: block; font-size: .62rem; opacity: .7; font-weight: 700; letter-spacing: .06em; }
.match.immersive .pstrip .ps-bar { position: absolute; inset-inline: 10px; bottom: 4px; height: 3px; background: rgba(255,255,255,.16); border-radius: 2px; }
.match.immersive .pstrip .ps-bar u { display: block; height: 100%; width: 0; background: var(--lime); transition: width .4s; text-decoration: none; }
.match.immersive .pstrip.r .ps-bar u { width: 100%; background: rgba(255,255,255,.55); }
/* صندوق أزرار التحكم (يمين الوسط) */
.prompts { display: none; }
.match.immersive .prompts { position: absolute; right: 12px; top: 40%; z-index: 8; display: flex; flex-direction: column; gap: 7px; padding: 10px 14px; background: var(--carbon); border-radius: 3px; font-family: var(--hud); font-weight: 700; font-size: .85rem; }
.match.immersive .prompts div { display: flex; align-items: center; gap: 10px; }
.match.immersive .prompts i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; border: 2px solid currentColor; font-size: .95rem; }
.prompts .g0 { color: #3fd07a; } .prompts .g1 { color: #ff6b73; } .prompts .g2 { color: #4aa8ff; }
.match.immersive .prompts em { font-style: normal; opacity: .6; font-size: .68rem; margin-top: 2px; }
/* أزرار الإجابة بالهوية الجديدة */
.match.immersive .answers { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.match.immersive .ans { font-family: var(--hud); font-weight: 800; border-radius: 4px; background: var(--carbon); border: 0; border-bottom: 4px solid rgba(255,255,255,.25); box-shadow: 0 10px 22px rgba(0,0,0,.5); }
.match.immersive .ans:hover, .match.immersive .ans:focus-visible { border-bottom-color: var(--lime); background: rgba(20,26,34,.96); transform: translateY(-3px); }
.match.immersive .ans.ok { background: linear-gradient(180deg, var(--lime), var(--lime-d)); color: #04140b; border-bottom-color: #fff; } .match.immersive .ans.ok .glyph { color: #04140b; }
.match.immersive .ans.no { background: linear-gradient(180deg, #ff5a5a, #b92a2a); border-bottom-color: #fff; }
.match.immersive .ans.picked { background: rgba(60,50,10,.96); border-bottom-color: var(--y); }
.match.immersive .tools .tl { border-radius: 3px; background: var(--carbon); border: 0; font-family: var(--hud); }
.match.immersive .tools { position: relative; z-index: 8; }
@media (max-width: 900px) { .match.immersive .prompts { display: none; } .match.immersive .pstrip { display: none; } .match.immersive .pips-wrap { left: 12px; top: calc(96px + env(safe-area-inset-top, 0px)); } .match.immersive .match-info { top: calc(66px + env(safe-area-inset-top, 0px)); } .match.immersive .qbanner { top: clamp(130px, 21dvh, 160px); } }
@media (max-width: 560px) { .match.immersive .match-head { width: calc(100% - 20px); left: 10px; } .match.immersive .match-head { grid-template-columns: 34px 1fr auto 1fr; } .match.immersive .match-head::before { width: 34px; background-size: 20px; } }

/* ===================== اللقطات الجاهزة (إعادة / افتتاحية) ===================== */
.clip-layer { position: absolute; inset: 0; z-index: 30; background: #000; animation: clipin .25s ease-out; cursor: pointer; }
.clip-layer.out { opacity: 0; transition: opacity .25s; }
.clip-layer video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-tag { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); inset-inline-start: 14px; display: flex; align-items: center; gap: 8px; padding: 5px 16px 5px 12px; background: var(--lime, #2bf08a); color: #04140b; font-family: var(--hud, var(--font)); font-weight: 800; letter-spacing: .06em; border-radius: 3px; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.clip-tag i { width: 10px; height: 10px; border-radius: 50%; background: #e53935; animation: blink 1s infinite; }
.clip-hint { position: absolute; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); inset-inline: 0; text-align: center; color: rgba(255,255,255,.7); font-weight: 700; text-shadow: 0 1px 4px #000; }
@keyframes clipin { from { opacity: 0; } to { opacity: 1; } }

/* ===================== بداية المباراة: ستارة تجهيز الملعب وشارة البداية ===================== */
.stage-curtain { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #1f9d4a 0%, #0b5d2a 52%, #06361a 100%); transition: opacity .4s; }
.stage-curtain::before, .stage-curtain::after { content: ''; position: absolute; inset-inline: 0; height: 18px; }
.stage-curtain::before { top: 0; background: conic-gradient(from 135deg at 50% 0, #fff 90deg, transparent 0) 0 0 / 36px 18px repeat-x; }
.stage-curtain::after { bottom: 0; background: conic-gradient(from -45deg at 50% 100%, #ffd23f 90deg, transparent 0) 0 0 / 36px 18px repeat-x; }
.stage-curtain.out { opacity: 0; pointer-events: none; }
.sc-card { text-align: center; color: #fff; padding: 0 16px; }
.sc-stars { color: var(--y); letter-spacing: .5em; margin-inline-start: .5em; font-size: clamp(1rem, 2.6vw, 1.6rem); text-shadow: 0 0 14px rgba(255,210,63,.6); }
.sc-title { font-family: var(--display); font-size: clamp(2.2rem, 8vw, 5rem); line-height: 1.2; text-shadow: 0 4px 0 rgba(0,0,0,.3); }
.sc-ball { width: 56px; height: 56px; margin: 16px auto 10px; animation: scSpin 1.1s linear infinite; }
.sc-ball svg { display: block; width: 100%; height: 100%; }
.sc-note { font-weight: 800; opacity: .92; }
@keyframes scSpin { to { transform: rotate(360deg); } }
.match .match-head, .match .match-info, .match .pips-wrap, .match .qbanner, .match .tools, .match .answers, .match .pstrip, .match .prompts { transition: opacity .5s; }
.match.intro .match-head, .match.intro .match-info, .match.intro .pips-wrap, .match.intro .qbanner, .match.intro .tools, .match.intro .answers, .match.intro .pstrip, .match.intro .prompts, .match.intro > .btn { opacity: 0 !important; pointer-events: none; }
.intro-hint { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); inset-inline: 0; text-align: center; z-index: 10; color: rgba(255,255,255,.85); font-weight: 700; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,.8); }

/* ===================== اختيار اللاعب: معاينة مجسّمة ===================== */
.pick3d { width: min(260px, 70vw); height: 300px; margin: 0 auto; position: relative; display: grid; place-items: center; border-radius: 24px; background: radial-gradient(90% 70% at 50% 20%, #2fae56, #0b5d2a 70%, #06361a); border: 3px solid var(--y); overflow: hidden; }
.pick3d canvas { position: absolute; inset: 0; }
.pick3d-fallback { display: grid; place-items: center; }

/* لوحة النتيجة بأسلوب البث: الاسم ثم الأهداف، والنقاط في شريط المعلومات */
.match.immersive .scorebox { min-width: 48px; text-align: center; font-size: 2rem; }
.match.immersive .match-info b.pts { color: var(--y); margin-inline-start: 8px; }

/* ===== اختيار الفريق واللاعب قبل التحدي + ركلات بالتناوب ===== */
.steps { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.steps span { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: rgba(0,0,0,.28); border: 2px solid rgba(255,255,255,.25); font-size: .9rem; opacity: .75; }
.steps span b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: .8rem; }
.steps span.on { opacity: 1; background: var(--y); color: #4a2f00; border-color: #fff; }
.steps span.done { opacity: 1; border-color: var(--lime); } .steps span.done b { background: var(--lime); color: #06361a; }
.matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.mu-side { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 16px; background: rgba(0,0,0,.3); border-bottom: 6px solid var(--kit); text-align: center; }
.mu-face { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: #d8efdc; border: 4px solid var(--kit); }
.mu-face svg, .mu-face img { width: 100%; height: 100%; display: block; }
.mu-side small { opacity: .8; }
.mu-vs { font-size: 2rem; font-weight: 800; color: var(--y); }
.match .nm.on-turn { color: var(--y); text-shadow: 0 0 10px rgba(255,210,63,.7); }
.match .nm.on-turn::after { content: ' ⚽'; }
.match.immersive .pstrip.on-turn { outline: 2px solid var(--y); }
.pips-wrap.shootout .so-row { display: flex; align-items: center; gap: 6px; }
.pips-wrap.shootout .so-row em { font-style: normal; font-size: .72rem; font-weight: 700; min-width: 54px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pips-wrap.shootout .pips i { width: 10px; height: 10px; }
.pips-wrap.shootout .pips { gap: 3px; flex-wrap: nowrap; }
.num-input{max-width:120px;text-align:center;font-size:1.4rem}
.photo-box { display: flex; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(0,0,0,.25); }
.photo-prev { width: 96px; height: 96px; flex: none; }
.photo-prev svg { width: 100%; height: 100%; }

/* ===== هوية واجهات الاختيار (V13) ===== */
.wrap.cs-wrap { max-width: 1040px; }
.cs-namebox { background: rgba(5,32,16,.72); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 12px 14px; }
.cs-namebox .field { display: block; margin-bottom: 6px; font-weight: 800; }
.cs-name { font-size: 1.15rem; min-height: 50px; }
.cs { --kit: #1f9d55; --kit2: #fff; display: grid; gap: 14px; align-items: start; }
.cs-stage { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--kit) 70%, #04170c), #04170c); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.cs-preview { height: 150px; border-radius: 14px; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.22), rgba(0,0,0,.1)); overflow: hidden; display: grid; place-items: center; }
.cs-preview { position: relative; }
.cs-preview canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.cs-card { display: grid; gap: 4px; text-align: center; }
.cs-no { font-size: 3.4rem; line-height: 1; color: var(--kit2); text-shadow: 0 3px 0 rgba(0,0,0,.4), 0 0 0 #000; -webkit-text-stroke: 2px rgba(0,0,0,.45); paint-order: stroke fill; }
.cs-nm b { display: block; font-size: 1.15rem; overflow-wrap: anywhere; }
.cs-nm small { opacity: .85; }
.cs-main { background: rgba(5,32,16,.72); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 10px; min-width: 0; }
.cs-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: rgba(0,0,0,.28); padding: 5px; border-radius: 14px; margin-bottom: 12px; }
.cs-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 6px 2px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; }
.cs-tab.on { background: var(--y); color: #3d2a00; box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.cs-sec { margin-bottom: 14px; }
.cs-sec h3 { margin: 0 0 8px; font-size: 1rem; color: var(--y); }
.cs-sub { margin: 10px 0 6px; font-size: .9rem; opacity: .85; }
.cs-searchbox { position: relative; margin-bottom: 8px; }
.cs-searchbox span { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); opacity: .7; pointer-events: none; }
.cs-search { width: 100%; min-height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: inherit; font: inherit; padding-inline: 40px 12px; }
.cs-pills { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: thin; }
.cs-pill, .chip { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.cs-pill.on { background: var(--y); color: #3d2a00; border-color: var(--y); }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.cs-team { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; min-height: 92px; border-radius: 14px; border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: inherit; font: inherit; cursor: pointer; }
.cs-team small { font-weight: 700; font-size: .8rem; line-height: 1.25; text-align: center; }
.cs-team.sel, .cs-face.sel, .cs-opt.sel, .lv-card.sel { border-color: var(--y); background: rgba(255,210,63,.18); box-shadow: 0 0 0 2px rgba(255,210,63,.35); }
.cs-empty { grid-column: 1/-1; text-align: center; padding: 18px; opacity: .8; }
.cs-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.cs-face { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 14px; border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: inherit; font: inherit; cursor: pointer; min-height: 44px; }
.cs-face small { font-size: .75rem; }
.cs-dots { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-dot { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); cursor: pointer; display: grid; place-items: center; color: #fff; padding: 0; }
.cs-dot.sel { border-color: var(--y); box-shadow: 0 0 0 3px rgba(255,210,63,.45); }
.cs-dot.sel span { filter: drop-shadow(0 0 2px #000); }
.cs-seg { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(0,0,0,.3); border-radius: 12px; padding: 4px; gap: 4px; }
.cs-seg button { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.cs-seg button.on { background: var(--y); color: #3d2a00; }
.cs-opts, .cs-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.cs-quick { grid-template-columns: repeat(6, 1fr); }
.cs-opt { min-height: 46px; padding: 6px; border-radius: 12px; border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.cs-stepper { display: grid; grid-template-columns: 64px 1fr 64px; gap: 8px; }
.cs-stepper button { min-height: 60px; font-size: 2rem; border-radius: 14px; border: 0; background: rgba(255,255,255,.14); color: inherit; cursor: pointer; }
.cs-numinp { min-height: 60px; text-align: center; font-size: 2.2rem; font-weight: 900; border-radius: 14px; border: 2px solid var(--y); background: rgba(0,0,0,.35); color: inherit; width: 100%; min-width: 0; }
.cs-hint { opacity: .8; font-size: .88rem; margin: 8px 0 0; }
.cs-photo { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.cs-photo-prev { width: 120px; height: 120px; display: grid; place-items: center; }
.cs-photo-side { display: grid; gap: 8px; }
.cs-photo-side p { margin: 0; }
.cs-photo-side .row { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-actions { position: sticky; bottom: 0; z-index: 6; display: grid; gap: 6px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); margin-inline: -4px; background: linear-gradient(180deg, rgba(4,23,12,0), rgba(4,23,12,.92) 30%); }
.cs-actions .btn.big { min-height: 60px; font-size: 1.2rem; width: 100%; }
.su-sum { text-align: center; font-weight: 700; font-size: .95rem; }
.su { gap: 14px; }
.su-sec { background: rgba(5,32,16,.72); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 12px; }
.su-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.1rem; }
.su-sec h2 i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--y); color: #3d2a00; font-style: normal; }
.su-intro { margin: 0; }
.tp-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.tp-btns { display: flex; gap: 6px; }
.tp-grid, .tp-grid.tables-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.table-ball.tp-tile { position: relative; display: grid; justify-items: center; align-content: center; gap: 0; min-height: 72px; border-radius: 14px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: inherit; font: inherit; cursor: pointer; padding: 6px 2px; }
.tp-tile b { font-size: 1.7rem; line-height: 1.1; }
.tp-tile small { font-size: .72rem; opacity: .8; }
.tp-tile.sel { background: var(--y); border-color: #fff; color: #3d2a00; box-shadow: 0 0 0 2px rgba(255,210,63,.5); }
.tp-ck { position: absolute; top: 3px; inset-inline-start: 4px; }
.admin .tp-grid.tables-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lv-card { display: grid; justify-items: center; gap: 3px; padding: 10px 6px; min-height: 120px; border-radius: 14px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: inherit; font: inherit; cursor: pointer; text-align: center; }
.lv-card b { font-size: 1rem; }
.lv-card small { opacity: .85; }
.lv-card em { font-style: normal; font-size: .78rem; opacity: .8; line-height: 1.3; }
.lv-stars .on { color: var(--y); fill: var(--y); }
.lv-stars .off { opacity: .35; }
@media (max-width: 520px) { .lv-grid { grid-template-columns: 1fr; } .lv-card { grid-template-columns: auto 1fr; justify-items: start; text-align: start; min-height: 0; } .lv-card em { grid-column: 1 / -1; } }
@media (min-width: 860px) {
  .cs { grid-template-columns: 330px 1fr; }
  .cs-stage { grid-template-columns: 1fr; top: 8px; padding: 12px; }
  .cs-preview { height: min(380px, calc(100vh - 440px)); min-height: 200px; }
  .cs-no { font-size: 4.2rem; }
  .cs-actions { grid-column: 1 / -1; }
}
.lv-stars { display: flex; gap: 2px; } .lv-stars svg { display: block; }
.tp-balls { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.tp-balls .table-ball .ball-wrap { width: 92px; height: 92px; }
.admin .tp-balls { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.wrap.cs-wrap { padding-bottom: 120px; }

/* ===== الحقوق وشاشة البداية ===== */
.splash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, #138a3e, #064a1f 55%, #02200d); color: #fff; transition: opacity .45s; }
.splash.out { opacity: 0; pointer-events: none; }
.splash-in { display: grid; justify-items: center; gap: 14px; padding: 24px; text-align: center; max-width: 520px; }
.splash-logo { width: min(320px, 78vw); animation: splash-pop .7s ease-out; }
.splash-sub { font-size: 1.1rem; opacity: .92; }
.splash-line { width: 90px; height: 3px; border-radius: 3px; background: var(--y); }
.splash-rights { font-size: 1rem; font-weight: 700; }
.splash-tap { margin-top: 10px; font-size: .85rem; opacity: .7; animation: splash-blink 1.6s infinite; }
@keyframes splash-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes splash-blink { 50% { opacity: .25; } }
.brand-foot { display: grid; gap: 6px; justify-items: center; }
.brand-foot .rights { font-weight: 700; opacity: .95; }
.about-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: underline; min-height: 36px; }
.about { padding: 18px; }
.about .logo { width: min(260px, 70vw); margin: 0 auto; }
.about-rows { display: grid; gap: 8px; width: 100%; }
.about-rows div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.08); }
.print-rights { display: none; }
@media print { .print-rights { display: block; position: fixed; bottom: 0; inset-inline: 0; text-align: center; font-size: 10pt; color: #333; border-top: 1px solid #999; padding-top: 4px; } .splash { display: none !important; } }

/* ===== تقارير المعلم للطباعة ===== */
.rpt { background: #fff; color: #14231a; border-radius: 14px; padding: 16px; page: report; }
.rpt .grid { color: #14231a; }
.rpt-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; border-bottom: 3px solid #0b6b2c; padding-bottom: 10px; margin-bottom: 12px; }
.rpt-logo { width: 130px; }
.rpt-ttl h1 { margin: 0; font-size: 1.5rem; color: #0b4d20; }
.rpt-sub { color: #46604f; font-weight: 700; }
.rpt-meta { text-align: end; font-size: .85rem; color: #46604f; }
.rpt-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.rpt-sum div { display: grid; justify-items: center; padding: 8px; border-radius: 10px; background: #eef7f0; }
.rpt-sum b { font-size: 1.5rem; color: #0b6b2c; }
.rpt-sum span { font-size: .8rem; color: #46604f; }
.rpt-note { background: #fff6dc; border-inline-start: 4px solid #d99a00; padding: 8px 10px; border-radius: 8px; }
.rbar { display: block; width: 100%; min-width: 80px; height: 10px; background: #e2ece5; border-radius: 6px; overflow: hidden; }
.rbar i { display: block; height: 100%; background: #1f9d55; }
.rbar.low i { background: #e08a00; }
.rcell { width: 22%; }
@page report { size: A4 portrait; margin: 12mm 12mm 16mm; }
@media print { .rpt { border-radius: 0; padding: 0; } .rpt table { page-break-inside: auto; } .rpt tr { page-break-inside: avoid; } .rbar, .rbar i, .rpt-sum div, .rpt-note { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
@media (max-width: 560px) { .rpt-head { grid-template-columns: 1fr; text-align: center; } .rpt-meta { text-align: center; } .rpt-sum { grid-template-columns: repeat(2, 1fr); } }
@media print {
  html, body, .screen, .turf, .wrap { background: #fff !important; background-image: none !important; color: #14231a; min-height: 0 !important; }
  .screen::before, .screen::after, .turf::before, .turf::after { display: none !important; }
  .cert:last-child { page-break-after: auto; }
  .rpt .stat { background: #eef7f0 !important; color: #14231a !important; border-color: #cfe3d4 !important; box-shadow: none !important; }
  .rpt .stat b { color: #0b6b2c !important; }
}
.lic .splash-in { width: min(520px, 92vw); }
.lic-help { margin: 0; opacity: .9; }
.lic-code { width: 100%; font-size: .9rem; direction: ltr; text-align: left; min-height: 110px; }
.lic-msg { min-height: 1.4em; color: #ffd2cf; font-weight: 700; }
.lic .btn.big { width: 100%; }