/* Saqr competitions: one page, every track playable.
   Palette comes only from real logos: Saqr violet + navy core, Robofest red, MRC red + gold. */
:root{
  --ink:#0E0C24; --ink2:#1A1640; --ink3:#2A2560;
  --violet:#3018B0; --violet-hi:#7B62FF;
  --paper:#F3F1EA; --paper2:#E8E5DA; --line:rgba(14,12,36,.09);
  --rf:#ED1C24; --rf-deep:#B5121A;
  --mrc:#E8AD08; --mrc-deep:#AF1414;
  --txt:#0E0C24; --mute:#5D5A73;
  --display:"Noto Kufi Arabic",system-ui,sans-serif;
  --body:"Readex Pro",system-ui,sans-serif;
  --r:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--paper);color:var(--txt);line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit}
.in{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--display);line-height:1.25;font-weight:900}
.kicker{font-size:.8rem;font-weight:600;letter-spacing:.02em;opacity:.7;margin-bottom:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--violet);color:#fff;text-decoration:none;font-family:var(--display);font-weight:800;border-radius:14px;padding:14px 22px;transition:transform .15s,background .2s;box-shadow:0 4px 0 #1B0D70}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #1B0D70}
.btn-sm{padding:9px 14px;font-size:.85rem;border-radius:11px;box-shadow:0 3px 0 #1B0D70}
.btn-lg{padding:17px 30px;font-size:1.1rem}

/* header */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:10px 16px;background:rgba(14,12,36,.92);backdrop-filter:blur(10px);color:#fff}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-weight:900;font-size:1.1rem}
.brand .mark{width:44px;height:17px;color:var(--violet-hi);--mark-core:#fff;--mark-gap:var(--ink)}
.topnav{display:none;gap:22px;margin-inline-start:auto;font-size:.9rem}
.topnav a{text-decoration:none;opacity:.75}.topnav a:hover{opacity:1}
.top .btn{margin-inline-start:auto}
@media(min-width:768px){.topnav{display:flex}.top .btn{margin-inline-start:0}}

/* hero */
.hero{position:relative;background:var(--ink);color:#fff;padding:36px 0 44px;overflow:hidden}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(123,98,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(123,98,255,.13) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at 50% 20%,#000 30%,transparent 75%)}
.hero .in{position:relative;text-align:center}
.hero-mark{width:150px;height:58px;margin:0 auto 18px;overflow:visible}
.hero-mark .b{fill:var(--violet-hi);animation:fly .7s cubic-bezier(.2,1.4,.4,1) both}
.hero-mark .b1{animation-delay:.05s;--dx:-60px;--dy:-50px}.hero-mark .b2{animation-delay:.12s;--dx:-30px;--dy:-60px}
.hero-mark .b3{animation-delay:.19s;--dx:0;--dy:-70px}.hero-mark .b4{animation-delay:.26s;--dx:0;--dy:-80px}
.hero-mark .core{fill:#fff;stroke:var(--ink);stroke-width:6;transform-origin:207px 104px;animation:pop .5s .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes fly{from{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-25deg)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(0) rotate(90deg)}to{opacity:1;transform:none}}
.hero h1{font-size:clamp(1.9rem,7.2vw,3.6rem)}
.hero h1 span{display:block;font-size:.58em;font-weight:800;margin-top:8px}
.hero h1 em{font-style:normal;color:var(--violet-hi)}
.hero .lead{max-width:520px;margin:14px auto 0;opacity:.8;font-size:1.02rem}
.hero .kicker{opacity:.6}

.doors{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px auto 0;max-width:640px}
.door{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 10px 16px;border-radius:var(--r);text-decoration:none;background:#fff;color:var(--ink);transition:transform .2s}
.door:hover{transform:translateY(-4px) rotate(-.6deg)}
.door img{height:38px;width:auto;object-fit:contain;margin:6px 0 4px}
.door b{font-family:var(--display);font-size:1.15rem}
.door small{font-size:.75rem;color:var(--mute);line-height:1.4}
.door-tag{position:absolute;top:-10px;inset-inline-start:12px;font-size:.7rem;font-weight:600;color:#fff;padding:3px 10px;border-radius:99px}
.door-rf .door-tag{background:var(--rf)}.door-mrc .door-tag{background:var(--mrc-deep)}
.door-rf{box-shadow:0 6px 0 var(--rf)}.door-mrc{box-shadow:0 6px 0 var(--mrc)}
.door-go{font-style:normal;margin-top:6px;font-family:var(--display);font-weight:800;font-size:.85rem;padding:6px 16px;border-radius:99px;color:#fff}
.door-rf .door-go{background:var(--rf)}.door-mrc .door-go{background:var(--ink)}

.helpme{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:11px 18px;border:1.5px dashed rgba(255,255,255,.35);border-radius:99px;font-size:.9rem;color:#fff}
.hm-dot{width:9px;height:9px;border-radius:50%;background:var(--violet-hi);box-shadow:0 0 0 0 var(--violet-hi);animation:ping 1.6s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* quiz */
.quiz{background:var(--ink);padding:0 0 40px;color:#fff}
.quiz-card{max-width:560px;margin:0 auto;background:var(--ink2);border-radius:var(--r);padding:22px;text-align:center}
.q-n{font-size:.75rem;opacity:.55}
.quiz h3{font-size:1.25rem;margin:4px 0 16px}
.q-opts{display:grid;gap:8px}
.q-opts button{padding:14px;border-radius:14px;background:var(--ink3);font-weight:600;transition:background .15s}
.q-opts button:hover{background:var(--violet)}
.q-result{display:grid;gap:8px}
.q-result a{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-radius:14px;background:#fff;color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:800}
.q-result a small{font-family:var(--body);font-weight:500;font-size:.72rem;color:var(--mute)}
.q-again{margin-top:12px;font-size:.8rem;opacity:.6;text-decoration:underline}

/* competition band */
.comp-band{color:#fff;padding:44px 0 36px;position:relative;overflow:hidden}
.comp-rf .comp-band{background:var(--rf)}
.comp-mrc .comp-band{background:var(--ink)}
.comp-band .in{position:relative}
.comp-band .logos{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.comp-band .logos img{height:34px;width:auto;background:#fff;border-radius:10px;padding:6px 10px}
.comp-band h2{font-size:clamp(1.7rem,6vw,2.8rem)}
.comp-band p.desc{max-width:620px;margin-top:10px;opacity:.88}
.comp-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.comp-meta span{font-size:.78rem;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.14)}
.comp-mrc .comp-meta span{background:rgba(232,173,8,.16);color:var(--mrc)}
.comp-band .bigN{position:absolute;inset-inline-end:-10px;bottom:-40px;font-family:var(--display);font-weight:900;font-size:13rem;line-height:1;opacity:.1;pointer-events:none}
.track-pills{display:flex;gap:8px;overflow-x:auto;padding:16px 0 4px;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.track-pills::-webkit-scrollbar{display:none}
.track-pills a{flex:none;font-size:.8rem;padding:8px 14px;border-radius:99px;text-decoration:none;background:#fff;color:var(--ink);font-weight:600}

/* tracks */
.tracks{padding:22px 0 50px;background-color:var(--paper);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px}
.trk{background:#fff;border-radius:24px;margin:18px 0;padding:18px;box-shadow:0 1px 0 var(--paper2),0 10px 30px -18px rgba(14,12,36,.35);scroll-margin-top:70px}
.trk-head{display:flex;align-items:flex-start;gap:12px}
.trk-n{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-family:var(--display);font-weight:900;color:#fff;font-size:.9rem}
.comp-rf .trk-n{background:var(--rf)}.comp-mrc .trk-n{background:var(--ink);color:var(--mrc)}
.trk h3{font-size:1.35rem}
.trk-en{font-size:.75rem;color:var(--mute);direction:ltr;text-align:right}
.trk-line{margin:10px 0 14px;color:#2b2944;font-size:.97rem}
.stage{position:relative;border-radius:18px;overflow:hidden;background:var(--paper);aspect-ratio:1/1;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.stage.wide{aspect-ratio:4/3}
.stage svg,.stage canvas{display:block;width:100%;height:100%}
.hud{position:absolute;top:10px;inset-inline:10px;display:flex;justify-content:space-between;gap:8px;pointer-events:none;font-family:var(--display);font-weight:800}
.hud span{background:rgba(14,12,36,.82);color:#fff;border-radius:10px;padding:4px 10px;font-size:.82rem}
.hud .v{direction:ltr;display:inline-block}
.msg{position:absolute;left:50%;bottom:12px;transform:translateX(-50%) translateY(10px);opacity:0;transition:.3s;background:#fff;color:var(--ink);font-weight:600;font-size:.85rem;padding:8px 14px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis;text-align:center}
.msg.on{opacity:1;transform:translateX(-50%)}
.ctrl{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.ctrl .btn{flex:1;min-width:120px}
.chip{padding:10px 14px;border-radius:12px;background:var(--paper);font-weight:600;font-size:.85rem;border:1.5px solid transparent}
.chip.on{border-color:var(--violet);background:#EEEAFF;color:var(--violet)}
.ctrl label{font-size:.8rem;color:var(--mute);display:flex;align-items:center;gap:8px;flex:1 1 100%}
.ctrl input[type=range]{flex:1;accent-color:var(--violet)}
.hint{font-size:.78rem;color:var(--mute);margin-top:8px}
.facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.facts li{background:var(--paper);border-radius:14px;padding:10px 8px;text-align:center}
.facts b{display:block;font-family:var(--display);font-weight:900;font-size:1.15rem;direction:ltr}
.facts small{font-size:.7rem;color:var(--mute);line-height:1.3;display:block}
.trk-foot{display:flex;gap:8px;margin-top:14px;align-items:center}
.trk-foot .rules{font-size:.82rem;color:var(--mute)}
.trk-foot .pick{margin-inline-start:auto;font-family:var(--display);font-weight:800;font-size:.85rem;padding:10px 16px;border-radius:12px;background:var(--ink);color:#fff}
.trk-foot .pick.on{background:var(--violet)}
.soon{display:inline-block;font-size:.72rem;padding:3px 9px;border-radius:99px;background:var(--paper2);color:var(--mute);margin-inline-start:6px;vertical-align:middle;font-family:var(--body);font-weight:500}

@media(min-width:900px){
  .trk{display:grid;grid-template-columns:1fr 1.05fr;gap:8px 28px;padding:26px;align-items:start}
  .trk .stage-wrap{grid-column:2;grid-row:1/span 4}
  .trk-head,.trk-line,.facts,.trk-foot{grid-column:1}
  .trk h3{font-size:1.7rem}
}

/* history */
.history{background:var(--ink);color:#fff;padding:54px 0}
.history h2{font-size:clamp(1.5rem,5vw,2.3rem);margin-bottom:24px}
.timeline{list-style:none;display:grid;gap:10px}
.timeline li{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;background:var(--ink2);border-radius:16px;padding:14px}
.timeline .y{font-family:var(--display);font-weight:900;font-size:1.1rem;color:var(--violet-hi)}
.timeline .w{font-size:.85rem;opacity:.85}
.timeline .w small{display:block;opacity:.6;font-size:.75rem}
.timeline .t{font-family:var(--display);font-weight:800;font-size:.9rem;white-space:nowrap}
.timeline .medal{color:var(--mrc)}

/* register */
.register{padding:54px 0 70px;text-align:center}
.register h2{font-size:clamp(1.8rem,6vw,2.8rem);margin-bottom:22px}
.steps{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px}
.steps li{display:flex;align-items:center;gap:8px;background:#fff;border-radius:99px;padding:8px 14px 8px 10px;font-size:.85rem;font-weight:500}
.steps b{width:24px;height:24px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-size:.75rem}
.dates{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:600px;margin:0 auto 26px}
.dates div{background:#fff;border-radius:14px;padding:12px 6px}
.dates small{display:block;font-size:.7rem;color:var(--mute)}
.dates b{font-family:var(--display);font-size:.85rem}
.picked{margin-top:14px;font-size:.85rem;color:var(--violet);font-weight:600}

/* footer */
.foot{background:var(--ink);color:#fff;padding:40px 0 100px;text-align:center}
.foot img{margin:0 auto 18px;width:96px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:.9rem}
.foot-links a{text-decoration:none;opacity:.8}
.copy{margin-top:18px;font-size:.75rem;opacity:.45}

.sticky-cta{position:fixed;bottom:12px;left:12px;right:12px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);color:#fff;border-radius:16px;padding:8px 8px 8px 8px;padding-inline-start:16px;box-shadow:0 10px 30px rgba(0,0,0,.3);transform:translateY(140%);transition:transform .35s}
.sticky-cta.on{transform:none}
.sticky-cta span{font-size:.85rem;font-weight:500}
@media(min-width:768px){.sticky-cta{left:auto;right:auto;inset-inline-end:20px;width:auto;gap:18px}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.stage.table{aspect-ratio:2/1;background:#16132F}
.stage.side{aspect-ratio:16/10;background:#EDEBFF}
.seg{display:flex;background:var(--paper);border-radius:14px;padding:4px;margin-bottom:10px;gap:4px}
.seg button{flex:1;padding:9px 6px;border-radius:10px;font-weight:600;font-size:.85rem;color:var(--mute)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(14,12,36,.12)}
.stage.square{aspect-ratio:1/1}