@font-face{font-family:"RaceAr";src:url("fonts/ar-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"RaceAr";src:url("fonts/ar-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"RaceLat";src:url("fonts/lat-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"RaceLat";src:url("fonts/lat-bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
  --bg:#fff8e7; --ink:#24304a; --muted:#5d6b85; --card:#ffffff; --line:#24304a;
  --red:#ff5a5f; --blue:#3d8bff; --green:#22b573; --yellow:#ffcf33; --orange:#ff9f1a; --purple:#9b5de5; --pink:#ff6bb5; --teal:#14b8a6;
  --radius:22px; --shadow:0 6px 0 rgba(36,48,74,.18);
  font-size:clamp(16px, 0.55vw + 12.5px, 30px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"RaceAr","RaceLat",system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;display:flex;flex-direction:column;
  background-image:radial-gradient(circle at 10% 15%,rgba(255,207,51,.25) 0 60px,transparent 61px),radial-gradient(circle at 92% 30%,rgba(61,139,255,.15) 0 90px,transparent 91px),radial-gradient(circle at 80% 92%,rgba(255,90,95,.13) 0 70px,transparent 71px);}
button,input{font:inherit;color:inherit}
.topbar{display:flex;align-items:center;gap:.6rem;padding:.55rem 1rem;background:var(--ink);color:#fff}
.brand{display:flex;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer;padding:.2rem;color:#fff;text-align:start;min-width:0}
.brand svg{width:2.6rem;height:auto;flex:none}
.brand b{font-size:1.05rem;line-height:1.3}
.topbar .sp{flex:1}
.iconbtn{background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);color:#fff;border-radius:14px;min-width:2.8rem;height:2.8rem;display:grid;place-items:center;cursor:pointer}
.iconbtn svg{width:1.4rem;height:1.4rem}
main{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:1rem}
footer{text-align:center;padding:.8rem 1rem 1rem;color:var(--muted);font-weight:700;border-top:3px dashed rgba(36,48,74,.15)}
h1,h2,h3{margin:.2em 0 .4em;line-height:1.35}
h1{font-size:1.9rem} h2{font-size:1.45rem} h3{font-size:1.1rem}
p{line-height:1.7;margin:.3em 0 .7em}
.muted{color:var(--muted)}
.center{text-align:center}
.hidden{display:none!important}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px}

/* أزرار */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.4rem;padding:.6rem 1.4rem;border-radius:18px;border:3px solid var(--line);background:#fff;font-weight:700;font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow);transition:transform .08s, box-shadow .08s;text-decoration:none}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(36,48,74,.18)}
.btn.primary{background:var(--green);color:#fff}
.btn.blue{background:var(--blue);color:#fff}
.btn.yellow{background:var(--yellow)}
.btn.red{background:var(--red);color:#fff}
.btn.big{min-height:4.2rem;font-size:1.35rem;padding:.7rem 2rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.row.c{justify-content:center}

/* الرئيسيّة */
.hero{text-align:center;padding:.5rem 0 1rem}
.hero h1{font-size:2.2rem;margin-bottom:.1em}
.hero .road{max-width:760px;margin:.4rem auto 0}
.hero .road svg{width:100%;height:auto;display:block}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;margin-top:1rem}
.mode{border:3px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:1.1rem 1.1rem 1.2rem;cursor:pointer;text-align:start;display:flex;flex-direction:column;gap:.35rem;min-height:9rem}
.mode:active{transform:translateY(4px)}
.mode b{font-size:1.35rem}
.mode span{color:var(--muted);line-height:1.6}
.mode .ic{width:3.6rem;height:3.6rem;border-radius:16px;display:grid;place-items:center;border:3px solid var(--line)}
.mode .ic svg{width:2.6rem;height:2.6rem}
.rules{margin:1.2rem auto 0;max-width:900px;background:#fff;border:3px dashed var(--orange);border-radius:var(--radius);padding:.8rem 1.2rem}

/* البطاقات */
.card{background:var(--card);border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.2rem}
.stack{display:flex;flex-direction:column;gap:1rem}
.setgroup{border:0;margin:0;padding:0}
.setgroup legend{font-weight:700;font-size:1.1rem;margin-bottom:.45rem;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{min-height:3.1rem;padding:.45rem 1rem;border:3px solid var(--line);border-radius:999px;background:#fff;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
.chip small{font-weight:400;color:var(--muted);font-size:.8rem}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--yellow)}
.chip[aria-pressed="true"]::before{content:"";width:.9rem;height:.5rem;border-inline-start:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(-45deg) translateY(-2px);display:inline-block}
.names{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.6rem}
.namebox{display:flex;align-items:center;gap:.5rem;border:3px solid var(--line);border-radius:16px;padding:.3rem .6rem;background:#fff}
.namebox svg{width:3.2rem;flex:none}
.namebox input{border:0;outline:0;min-width:0;flex:1;font-size:1.1rem;padding:.5rem .2rem;background:transparent}
.field{display:flex;flex-direction:column;gap:.35rem;font-weight:700}
.field input{border:3px solid var(--line);border-radius:16px;padding:.7rem 1rem;font-size:1.4rem;background:#fff;min-height:3.6rem}
.field input.code{letter-spacing:.4em;text-align:center;font-family:"RaceLat",sans-serif;direction:ltr;font-size:2rem}
.err{color:#c0262c;font-weight:700;min-height:1.6em}

/* المسار */
.race{display:flex;flex-direction:column;gap:.45rem;background:#3b4660;border:3px solid var(--line);border-radius:var(--radius);padding:.6rem;box-shadow:var(--shadow)}
.lane{display:flex;align-items:center;gap:.5rem;min-height:3.6rem}
.lane .who{flex:none;width:8.5rem;background:#fff;border-radius:12px;padding:.25rem .5rem;font-weight:700;display:flex;align-items:center;gap:.35rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-inline-start:8px solid var(--c,#999)}
.lane .who .nm{overflow:hidden;text-overflow:ellipsis}
.lane .who .sc{margin-inline-start:auto;font-family:"RaceLat";background:var(--bg);border-radius:8px;padding:0 .35rem;font-size:.9rem}
.track{--cw:5.2rem;position:relative;flex:1;height:3.6rem;background:#5a667f;border-radius:10px;overflow:hidden}
.track::before{content:"";position:absolute;inset:50% 0 auto 0;border-top:3px dashed rgba(255,255,255,.55)}
.track .fin{position:absolute;inset-block:0;left:0;width:1.1rem;background:repeating-conic-gradient(#fff 0 25%,#222 0 50%) 0 0/0.55rem 0.55rem}
.track .tick{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.2);right:calc(var(--t) * (100% - var(--cw) - 1.4rem) + var(--cw) + .2rem)}
.track .tick span{position:absolute;bottom:1px;left:3px;font-size:.6rem;color:rgba(255,255,255,.8);font-family:"RaceLat"}
.track .car{position:absolute;top:50%;width:var(--cw);transform:translateY(-50%);right:calc(var(--p,0) * (100% - var(--cw) - 1.4rem) + .2rem);transition:right .8s cubic-bezier(.3,1.4,.5,1)}
.track .car svg{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}
.track .car.moving svg{animation:bump .5s ease}
.track .car.ghost{opacity:.42}
.lane.done .who::after{content:"";width:1.1rem;height:1.1rem;flex:none;background:repeating-conic-gradient(#fff 0 25%,#222 0 50%) 0 0/.55rem .55rem;border-radius:3px;border:1px solid #222}
@keyframes bump{30%{transform:translateY(-6px) rotate(-3deg)}60%{transform:translateY(1px)}}
.race.big .lane{min-height:5rem}.race.big .track{height:5rem;--cw:7.4rem}.race.big .lane .who{width:11rem;font-size:1.3rem;padding:.5rem .7rem}
.race.many .lane{min-height:2.3rem}.race.many .track{height:2.3rem;--cw:3.4rem}.race.many .lane .who{font-size:.85rem;width:7.5rem}
.race.lots{display:grid;grid-template-columns:1fr 1fr;column-gap:.8rem}
.race.lots .lane{min-height:1.9rem}.race.lots .track{height:1.9rem;--cw:2.8rem}.race.lots .lane .who{font-size:.75rem;width:6.5rem;padding:.1rem .4rem}
.race.lots .track .tick span{display:none}

/* السؤال */
.gamegrid{display:grid;gap:1rem}
.turn{display:flex;align-items:center;justify-content:center;gap:.6rem;font-size:1.3rem;font-weight:700;background:#fff;border:3px solid var(--line);border-radius:999px;padding:.35rem 1.2rem;margin:0 auto;box-shadow:var(--shadow);width:max-content;max-width:100%}
.turn svg{width:3.4rem}
.qcard{background:#fff;border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.1rem 1.2rem;text-align:center;position:relative;overflow:hidden}
.qprompt{font-size:1.3rem;font-weight:700;line-height:1.9}
.qprompt.word{font-weight:400;font-size:1.3rem;text-align:start}
.qexpr{font-size:2.6rem;font-weight:700;margin:.35rem 0 .2rem;line-height:1.4}
.qexpr .or{font-size:1.3rem;margin:0 .5rem;font-weight:400}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem}
.answers.three{grid-template-columns:repeat(3,1fr)}
.ans{min-height:5.2rem;border:3px solid var(--line);border-radius:20px;background:#fff;font-size:1.9rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:.4rem;gap:.4rem;position:relative}
.answers.three .ans{font-size:1.25rem}
.ans:nth-child(1){background:#ffe3e4}.ans:nth-child(2){background:#dcebff}.ans:nth-child(3){background:#d8f6e8}.ans:nth-child(4){background:#fff1c2}
.ans:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(36,48,74,.18)}
.ans .k{position:absolute;top:.3rem;inset-inline-start:.55rem;font-size:.7rem;color:var(--muted);font-family:"RaceLat"}
.ans.right{background:var(--green)!important;color:#fff;border-color:#0d6b42}
.ans.wrongpick{background:var(--red)!important;color:#fff;opacity:.9}
.answers.locked .ans:not(.right):not(.wrongpick){opacity:.4}
.timerbar{height:.9rem;background:#e8ecf3;border-radius:999px;overflow:hidden;margin:.6rem 0 0;border:2px solid var(--line)}
.timerbar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--yellow),var(--green));transform-origin:right;width:100%}
.feedback{min-height:2.2rem;margin-top:.8rem;font-size:1.25rem;font-weight:700}
.feedback.good{color:#0d8a52}.feedback.bad{color:#c0262c}
.work{margin-top:.4rem;font-size:1.35rem;background:#f4f7fb;border-radius:14px;padding:.5rem .8rem;line-height:2;font-weight:400;color:var(--ink)}
.stats{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
.pill{background:#fff;border:3px solid var(--line);border-radius:999px;padding:.25rem .9rem;font-weight:700;display:inline-flex;gap:.4rem;align-items:center}
.pill .n{font-family:"RaceLat"}

/* رياضيّات */
.m{direction:ltr;unicode-bidi:isolate;display:inline-flex;align-items:center;gap:.22em;white-space:nowrap;font-family:"RaceLat","RaceAr",sans-serif;vertical-align:middle}
.fr{display:inline-flex;flex-direction:column;align-items:stretch;text-align:center;line-height:1.08;font-size:.78em;vertical-align:middle;margin:0 .05em}
.fr .fn{border-bottom:.1em solid currentColor;padding:0 .18em .04em}
.fr .fd{padding:.04em .18em 0}
.mx{display:inline-flex;align-items:center;gap:.06em}
.op{margin:0 .08em}
.blank{display:inline-block;width:1.3em;height:1.3em;border:.11em dashed currentColor;border-radius:.2em;vertical-align:middle;background:#fff8d6}
.qprompt .m{font-size:1.15em}

/* المنصّة */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:.6rem;direction:ltr;margin:1rem auto 0;max-width:820px}
.step{flex:1;max-width:15rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;direction:rtl}
.step .car{width:80%;max-width:9rem}
.step .car svg{width:100%;height:auto;display:block}
.step .nm{font-weight:700;font-size:1.2rem;text-align:center;line-height:1.3;max-width:100%;overflow-wrap:anywhere}
.step .info{font-size:.9rem;color:var(--muted);text-align:center}
.block{width:100%;border:3px solid var(--line);border-radius:14px 14px 0 0;display:grid;place-items:center;font-family:"RaceLat";font-weight:700;font-size:2.4rem;color:#fff;box-shadow:var(--shadow)}
.p1 .block{height:9rem;background:#f4b400}.p2 .block{height:6.5rem;background:#9aa7bd}.p3 .block{height:5rem;background:#cd7f32}
.p1 .crown{width:3rem}
.ranking{width:100%;border-collapse:separate;border-spacing:0 .35rem;margin-top:1rem}
.ranking th{font-size:.9rem;color:var(--muted);text-align:center;padding:0 .6rem}
.ranking th:nth-child(2){text-align:start}
.ranking td{text-align:center}
.ranking td:nth-child(2){text-align:start}
.ranking td{background:#fff;padding:.45rem .6rem;border-block:3px solid var(--line)}
.ranking td:first-child{border-inline-start:3px solid var(--line);border-radius:0 14px 14px 0;font-family:"RaceLat";font-weight:700;width:3rem;text-align:center}
.ranking td:last-child{border-inline-end:3px solid var(--line);border-radius:14px 0 0 14px}
.ranking .nm{font-weight:700;display:flex;align-items:center;gap:.4rem}
.ranking .dot{width:1rem;height:1rem;border-radius:50%;border:2px solid var(--line);flex:none}
.num{font-family:"RaceLat"}

/* اللوح */
.hostgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1rem;align-items:start}
.joinbox{text-align:center}
.bigcode{font-family:"RaceLat";font-weight:700;font-size:5rem;letter-spacing:.15em;line-height:1.1;direction:ltr;color:var(--ink);background:var(--yellow);border:4px solid var(--line);border-radius:22px;padding:.1rem .6rem;display:inline-block;box-shadow:var(--shadow)}
.qr{width:min(17rem,70vw);margin:.8rem auto .3rem;background:#fff;border:4px solid var(--line);border-radius:18px;padding:.4rem}
.qr svg{display:block;width:100%;height:auto}
.url{font-family:"RaceLat";direction:ltr;unicode-bidi:isolate;font-weight:700;font-size:1.05rem;word-break:break-all}
.players{display:flex;flex-wrap:wrap;gap:.5rem}
.pchip{display:inline-flex;align-items:center;gap:.35rem;border:3px solid var(--line);border-inline-start:12px solid var(--c);border-radius:999px;padding:.25rem .35rem .25rem .8rem;background:#fff;font-weight:700;font-size:1.2rem;animation:grow .35s ease}
@keyframes grow{0%{transform:scale(.5)}100%{transform:scale(1)}}
.pchip button{border:0;background:#eef1f6;border-radius:50%;width:1.9rem;height:1.9rem;cursor:pointer;font-weight:700;line-height:1}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.hosthead{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between;margin-bottom:.8rem}
.minicode{font-family:"RaceLat";font-weight:700;font-size:1.6rem;background:var(--yellow);border:3px solid var(--line);border-radius:14px;padding:0 .6rem;direction:ltr}
.banner{background:#fff3cd;border:3px solid var(--orange);border-radius:14px;padding:.4rem .8rem;font-weight:700;text-align:center;margin-bottom:.6rem}
.count{position:fixed;inset:0;background:rgba(36,48,74,.75);display:grid;place-items:center;z-index:50}
.count b{font-family:"RaceAr","RaceLat";font-size:9rem;color:#fff;text-shadow:0 8px 0 rgba(0,0,0,.3);animation:pop .5s ease}
.waitcar{max-width:18rem;margin:1rem auto}
.waitcar svg{width:100%;height:auto;animation:idle 1.2s ease-in-out infinite}
@keyframes idle{50%{transform:translateY(-4px)}}
.mybar{display:flex;align-items:center;gap:.6rem}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60}
.settings-summary{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.settings-summary span{background:#eef1f6;border-radius:999px;padding:.15rem .7rem;font-size:.9rem}
.back{background:none;border:0;color:var(--blue);font-weight:700;cursor:pointer;padding:.4rem 0;font-size:1rem}

@media (max-width:820px){
  .hostgrid{grid-template-columns:1fr}
  .bigcode{font-size:3.6rem}
}
@media (max-width:560px){
  main{padding:.7rem}
  .hero h1{font-size:1.6rem}
  h1{font-size:1.5rem}
  .brand b{font-size:.9rem}
  .lane .who{width:5.6rem;font-size:.85rem;padding:.2rem .4rem;border-inline-start-width:6px}
  .lane .who .sc{display:none}
  .track{--cw:3.9rem}
  .qexpr{font-size:2.2rem}
  .ans{min-height:4.6rem;font-size:1.7rem}
  .answers.three{grid-template-columns:1fr}
  .answers.three .ans{min-height:3.8rem;font-size:1.3rem}
  .race.lots{grid-template-columns:1fr}
  .count b{font-size:6rem}
}