:root{--od-bg:#0b1220;--od-surface:#101c33;--od-text:#f8fafc;--od-muted:#8ea3c0;--od-primary:#22d3ee;--od-on-primary:#001018;--od-accent:#f59e0b;--od-radius:22px;--od-cols:4;--od-numscale:1;--od-font:"Tajawal", system-ui, sans-serif;--od-logo:64px;--od-motion:1}body.od-active{margin:0;overflow:hidden}.od-screen{background:var(--od-bg);color:var(--od-text);font-family:var(--od-font);-webkit-font-smoothing:antialiased;flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden;container:od/size}.od-screen.od-center{justify-content:center;align-items:center}.od-loading,.od-fatal{color:var(--od-muted);font-size:5cqh;font-weight:800}.od-fatal{color:#f87171}.od-bg{z-index:0;background-position:50%;background-size:cover;position:absolute;inset:-20px}.od-bg-overlay{z-index:0;position:absolute;inset:0}.od-head,.od-hero,.od-grid-wrap,.od-marquee{z-index:1;position:relative}.od-head{border-bottom:1px solid color-mix(in srgb, var(--od-text) 12%, transparent);justify-content:space-between;align-items:center;gap:2cqw;padding:2.2cqh 3cqw;display:flex}.od-brand{align-items:center;gap:1.4cqw;min-width:0;display:flex}.od-logo{height:var(--od-logo);object-fit:contain;border-radius:12px;width:auto;max-width:22cqw}.od-brand-name{letter-spacing:.2px;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(16px,4.4cqh,60px);font-weight:900;overflow:hidden}.od-head-right{flex-shrink:0;align-items:center;gap:1.2cqw;display:flex}.od-clock{font-variant-numeric:tabular-nums;color:var(--od-muted);font-size:clamp(14px,4cqh,52px);font-weight:800}.od-dot{border-radius:50%;width:1.1cqh;min-width:8px;height:1.1cqh;min-height:8px}.od-dot.on{background:#22c55e;box-shadow:0 0 10px #22c55e}.od-dot.off{background:#ef4444}.od-hero{text-align:center;flex:none;padding:3cqh 3cqw 1.5cqh}.od-hero-label{color:var(--od-primary);letter-spacing:3px;text-transform:uppercase;font-size:clamp(12px,3.4cqh,44px);font-weight:800}.od-hero-num{font-size:calc(clamp(60px, 32cqh, 460px) * var(--od-numscale,1));color:var(--od-text);text-shadow:0 0 calc(40px * var(--od-motion)) color-mix(in srgb, var(--od-primary) 55%, transparent);font-variant-numeric:tabular-nums;font-weight:900;line-height:.95}.od-hero-num.celebrate{animation:odPop calc(.6s * var(--od-motion)) cubic-bezier(.2, 1.3, .4, 1)}@keyframes odPop{0%{opacity:.2;transform:scale(.6)}60%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}.od-grid-wrap{flex:auto;justify-content:center;align-items:center;padding:1cqh 3cqw 2cqh;display:flex;overflow:hidden}.od-empty{color:var(--od-muted);text-align:center;font-size:clamp(16px,5cqh,64px);font-weight:800}.od-grid{grid-template-columns:repeat(var(--od-cols,4), 1fr);gap:clamp(8px,1.6cqw,26px);width:100%;display:grid}.od-card{border-radius:var(--od-radius);text-align:center;animation:odIn calc(.45s * var(--od-motion)) ease both;flex-direction:column;align-items:center;gap:1cqh;padding:2.4cqh 1cqw;display:flex}.od-card-num{color:var(--od-primary);font-variant-numeric:tabular-nums;font-size:clamp(28px,9cqh,150px);font-weight:900;line-height:1}.od-card-status{color:var(--od-muted);letter-spacing:1px;text-transform:uppercase;font-size:clamp(10px,2.2cqh,30px);font-weight:800}.od-card.hot{outline:3px solid var(--od-accent);outline-offset:-1px}.od-card.ready .od-card-status{color:#22c55e}.od-card.prep .od-card-status{color:var(--od-accent)}[data-card=glass] .od-card{background:color-mix(in srgb, var(--od-surface) 60%, transparent);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border:1px solid color-mix(in srgb, var(--od-text) 14%, transparent)}[data-card=elevated] .od-card{background:var(--od-surface);box-shadow:0 14px 34px #00000061}[data-card=flat] .od-card{background:var(--od-surface)}[data-card=outline] .od-card{border:2px solid color-mix(in srgb, var(--od-text) 26%, transparent);background:0 0}@keyframes odIn{0%{opacity:0}to{opacity:1}}@keyframes odInRise{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}@keyframes odInZoom{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}@keyframes odInFlip{0%{opacity:0;transform:perspective(600px)rotateX(35deg)}to{opacity:1;transform:none}}[data-entrance=rise] .od-card{animation-name:odInRise}[data-entrance=zoom] .od-card{animation-name:odInZoom}[data-entrance=flip] .od-card{animation-name:odInFlip}[data-entrance=none] .od-card{animation:none}.od-marquee{z-index:1;background:color-mix(in srgb, var(--od-primary) 92%, #000);color:var(--od-on-primary);padding:1.2cqh 0;position:relative;overflow:hidden}.od-marquee-track{white-space:nowrap;animation:odMarquee calc(22s / var(--od-motion,1)) linear infinite;padding-inline-start:100%;font-size:clamp(13px,3.2cqh,42px);font-weight:800;display:inline-block}@keyframes odMarquee{0%{transform:translate(0)}to{transform:translate(-100%)}}[dir=ltr] .od-marquee-track{animation-name:odMarqueeLtr}@keyframes odMarqueeLtr{0%{transform:translate(0)}to{transform:translate(100%)}}.od-splash{z-index:3;background:#000;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.od-splash-media{width:100%;height:100%}.od-splash-cap{text-align:center;color:#fff;text-shadow:0 2px 20px #000000b3;font-size:clamp(18px,5cqh,60px);font-weight:900;position:absolute;bottom:6cqh;left:0;right:0}.od-start{z-index:5;cursor:pointer;background:#000000b8;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.od-start-card{text-align:center;background:var(--od-surface);border-radius:24px;padding:6cqh 6cqw;box-shadow:0 30px 80px #00000080}.od-start-logo{object-fit:contain;width:auto;height:12cqh;min-height:60px;margin-bottom:16px}.od-start-title{color:var(--od-text);margin-bottom:20px;font-size:clamp(20px,5cqh,44px);font-weight:900}.od-start-btn{color:var(--od-on-primary);background:var(--od-primary);cursor:pointer;border:none;border-radius:16px;padding:16px 44px;font-size:clamp(16px,3.4cqh,30px);font-weight:900}.od-start-hint{color:var(--od-muted);margin-top:16px;font-size:clamp(12px,2.2cqh,20px)}@media (prefers-reduced-motion:reduce){.od-card,.od-hero-num,.od-marquee-track{animation:none!important}}