@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&family=Cairo:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#f5f7fb;background:#090e18;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--lime:#c7ff4a;--muted:#9aa7b9}
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#090e18}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}#app{position:relative;isolation:isolate}#game-root{position:absolute;inset:0;z-index:0;overflow:hidden}#game-root canvas{display:block;width:100%;height:100%;outline:none}.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,9,17,.58),transparent 25%,transparent 60%,rgba(5,9,17,.72)),linear-gradient(90deg,rgba(5,9,17,.22),transparent 65%);box-shadow:inset 0 0 150px rgba(2,5,12,.5)}
.hud{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:clamp(18px,3vw,34px) clamp(18px,5vw,64px);gap:20px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-size:13px;letter-spacing:.15em;font-weight:800}.brand-mark{display:grid;place-items:center;width:31px;height:31px;background:var(--lime);color:#101713;font-family:'Cairo',sans-serif;font-size:23px;font-weight:900;transform:skew(-8deg)}.brand-light{font-weight:500;color:#b4bfce}.score-panel{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:.19em;color:#aeb9c9}.score-panel strong,.result-grid strong{font-family:'Barlow Condensed',sans-serif;font-size:clamp(27px,4vw,39px);line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums}.icon-btn{width:36px;height:36px;border:1px solid #ffffff30;background:#0b1422a8;border-radius:50%;font-size:18px;cursor:pointer}.status{position:absolute;z-index:3;top:98px;left:clamp(18px,5vw,64px);display:flex;align-items:center;gap:8px;font-size:9px;font-weight:700;letter-spacing:.16em;color:#d7e0ec}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 13px #c7ff4a99}.overlay{position:absolute;z-index:2;inset:0;display:flex;align-items:center;padding:120px clamp(22px,11vw,150px) 100px;background:linear-gradient(90deg,rgba(6,11,20,.76) 0%,rgba(6,11,20,.48) 34%,rgba(6,11,20,.03) 78%);transition:opacity .3s,visibility .3s}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.hero-copy{max-width:520px}.accent{color:var(--lime);margin:0 0 17px}.hero-copy h1,.hero-copy h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(66px,10vw,132px);line-height:.79;letter-spacing:-.035em;margin:0;font-weight:900}.hero-copy h1 span,.hero-copy h2 span{color:var(--lime)}.intro{max-width:330px;color:#b8c2d0;font-size:13px;line-height:1.8;margin:26px 0 25px}.primary-btn{border:0;background:var(--lime);color:#11170d;min-width:190px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:11px;font-weight:800;letter-spacing:.12em;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 75%,92% 100%,0 100%);transition:transform .15s,filter .15s}.primary-btn:hover{filter:brightness(1.08);transform:translateY(-2px)}.primary-btn span{font-size:19px}.best-line{display:flex;align-items:center;gap:14px;margin-top:27px;color:#a5b0c0;font-size:9px;letter-spacing:.14em;font-weight:700}.best-line strong{color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:18px;letter-spacing:.06em}.controls-hint{position:absolute;bottom:45px;left:clamp(22px,5vw,64px);display:flex;align-items:center;gap:11px;color:#b6c1d0;font-size:8px;letter-spacing:.12em;font-weight:700}.controls-hint span{border:1px solid #ffffff48;background:#111b2a99;padding:8px 9px;color:#fff;font-size:10px;letter-spacing:0}.controls-hint i{height:17px;width:1px;background:#ffffff35;margin:0 8px}.bottom-note{position:absolute;z-index:3;bottom:18px;left:clamp(18px,5vw,64px);right:clamp(18px,5vw,64px);display:flex;justify-content:space-between;color:#a2adbd9c;font-size:8px;font-weight:700;letter-spacing:.16em;pointer-events:none}.result-grid{display:flex;gap:38px;margin:28px 0}.result-grid>div{display:flex;flex-direction:column;gap:8px}.result-grid strong{font-size:30px}.touch-controls{display:none}.touch-controls button{pointer-events:auto;border:1px solid #ffffff45;background:rgba(9,16,28,.55);backdrop-filter:blur(8px);width:54px;height:54px;border-radius:50%;font-size:23px;touch-action:manipulation}.steer,.action-controls{display:flex;gap:9px;align-items:center}.action-controls button{border-radius:14px;width:67px;height:54px;font-size:9px;font-weight:800;letter-spacing:.08em}.action-controls .jump-btn{background:var(--lime);border-color:var(--lime);color:#11170d;width:75px}.jump-btn span{font-size:15px;margin-left:3px}
@media(max-width:700px){.hud{padding:18px 18px}.brand{font-size:10px;gap:7px}.brand-mark{width:27px;height:27px}.score-panel .eyebrow{font-size:7px}.score-panel strong{font-size:28px}.icon-btn{width:31px;height:31px}.status{top:75px;left:20px;font-size:8px}.overlay{align-items:flex-start;padding:23vh 24px 120px;background:linear-gradient(90deg,rgba(6,11,20,.58),rgba(6,11,20,.08)),linear-gradient(0deg,rgba(6,11,20,.25),transparent)}.hero-copy h1,.hero-copy h2{font-size:clamp(67px,17vw,100px)}.intro{font-size:12px;margin:21px 0}.primary-btn{padding:15px 17px;min-width:175px}.controls-hint{display:none}.touch-controls{display:none}.bottom-note{bottom:12px;font-size:6px;letter-spacing:.1em}.best-line{margin-top:19px}.result-grid{margin:20px 0;gap:26px}.result-grid strong{font-size:25px}}
@media(min-width:701px) and (max-height:620px){.overlay{padding-top:90px;padding-bottom:65px}.hero-copy h1,.hero-copy h2{font-size:78px}.intro{margin:15px 0}.controls-hint{bottom:25px}}

/* Arabic RTL and gesture-first mobile controls */
#app{direction:rtl}.hud{direction:rtl}.brand{letter-spacing:0}.hero-copy{text-align:right}.hero-copy h1,.hero-copy h2{line-height:1.05}.eyebrow{letter-spacing:0}.best-line{letter-spacing:0}.controls-hint{left:auto;right:clamp(22px,5vw,64px);letter-spacing:0}.bottom-note{letter-spacing:0}.intro{line-height:1.9}.primary-btn{letter-spacing:0;clip-path:polygon(0 0,100% 0,100% 100%,8% 100%,0 75%)}.score-panel{align-items:flex-start}.status{left:auto;right:clamp(18px,5vw,64px);letter-spacing:0}#game-root canvas{touch-action:none;user-select:none;-webkit-user-select:none}
@media(max-width:700px){.overlay{padding:22vh 24px 110px}.hero-copy h1,.hero-copy h2{font-size:clamp(48px,13vw,78px)}.hero-copy h2 span{font-size:.78em}.intro{max-width:320px}.bottom-note{gap:12px}.bottom-note span:last-child{text-align:left}.controls-hint{display:block;right:20px;bottom:53px;font-size:10px}.controls-hint span{font-size:10px;padding:5px 7px}.controls-hint i{display:none}.status{right:20px}}

/* Language selector and layout direction */
.header-actions{display:flex;align-items:center;gap:10px}
.language-control select{appearance:none;background:rgba(17,27,42,.9);border:1px solid #ffffff45;color:#fff;border-radius:2px;padding:8px 10px;font:700 10px 'DM Sans',sans-serif;min-width:55px;outline:none}
.language-control select option{background:#111b2a;color:#fff}
#app[dir="ltr"]{direction:ltr}
#app[dir="ltr"] .hero-copy{text-align:left}
#app[dir="ltr"] .controls-hint{left:clamp(22px,5vw,64px);right:auto;direction:ltr}
#app[dir="ltr"] .status{left:clamp(18px,5vw,64px);right:auto}
#app[dir="ltr"] .best-line{letter-spacing:.14em}
#app[dir="ltr"] .eyebrow{letter-spacing:.16em}
#app[dir="ltr"] .primary-btn{letter-spacing:.12em;clip-path:polygon(0 0,100% 0,100% 75%,92% 100%,0 100%)}
#app[dir="ltr"] .bottom-note{letter-spacing:.16em}
#app[dir="rtl"]{direction:rtl;font-family:'Cairo',sans-serif}
#app[dir="rtl"] .hud{direction:rtl}
#app[dir="rtl"] .hero-copy{text-align:right}
#app[dir="rtl"] .controls-hint{left:auto;right:clamp(22px,5vw,64px);direction:rtl;letter-spacing:0}
#app[dir="rtl"] .status{left:auto;right:clamp(18px,5vw,64px)}
#app[dir="rtl"] .best-line,#app[dir="rtl"] .eyebrow,#app[dir="rtl"] .primary-btn,#app[dir="rtl"] .bottom-note{letter-spacing:0}
#app[dir="rtl"] .primary-btn{clip-path:polygon(0 0,100% 0,100% 100%,8% 100%,0 75%)}
#app[dir="rtl"] .hero-copy h1,#app[dir="rtl"] .hero-copy h2{font-family:'Cairo',sans-serif;line-height:1.2}
#app[dir="rtl"] .language-control select{font-family:'Cairo',sans-serif}
@media(max-width:700px){.header-actions{gap:7px}.language-control select{padding:7px 6px;min-width:48px}#app[dir="rtl"] .status{right:20px}#app[dir="ltr"] .status{left:20px}.controls-hint{display:flex;flex-wrap:wrap;max-width:90%;gap:6px}#app[dir="rtl"] .controls-hint{display:flex;right:20px;bottom:53px;font-size:10px}#app[dir="ltr"] .controls-hint{display:flex;left:20px;bottom:53px;font-size:10px}}

/* Keep the sunset rooftop world visible behind the start and results panels. */
#game-root canvas{filter:saturate(1.12) contrast(1.04)}
@media(max-width:700px){.overlay{backdrop-filter:none}.vignette{box-shadow:inset 0 0 90px rgba(2,5,12,.28)}}


/* Refined, orderly landing screen */
.hud{padding:clamp(14px,2.5vw,26px) clamp(18px,4vw,52px);gap:16px}
.brand{font-size:12px;letter-spacing:.12em}
.brand-mark{width:35px;height:35px;font-size:25px;transform:none;border-radius:8px 2px 8px 2px}
.header-actions{display:flex;align-items:center;gap:10px}
.language-control select{appearance:none;background:rgba(12,20,31,.92);border:1px solid #ffffff3d;color:#f7f9fb;border-radius:8px;padding:9px 12px;font:700 10px 'DM Sans',sans-serif;min-width:58px;outline:none}
.language-control select:focus-visible,.icon-btn:focus-visible,.primary-btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.icon-btn{border-radius:9px}
.overlay{padding:112px clamp(24px,8vw,112px) 96px;background:linear-gradient(90deg,rgba(5,10,18,.86) 0%,rgba(5,10,18,.58) 38%,rgba(5,10,18,.08) 78%)}
.hero-copy{width:min(100%,490px);padding:clamp(0px,1vw,10px) 0}
.hero-copy .accent{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.14em}
.hero-copy .accent:before{content:"";width:22px;height:2px;background:var(--lime)}
.hero-copy h1,.hero-copy h2{font-size:clamp(68px,8.5vw,112px);line-height:.88;letter-spacing:-.025em}
.intro{max-width:370px;font-size:14px;line-height:1.75;margin:23px 0 22px}
.primary-btn{min-width:205px;padding:16px 19px;border-radius:3px;clip-path:none;box-shadow:0 8px 30px #b8ff0018}
.best-line{margin-top:23px;padding-top:17px;border-top:1px solid #ffffff26;max-width:300px}
.controls-hint{bottom:32px;gap:8px}
.controls-hint span{border-radius:5px;padding:8px 10px}
.bottom-note{bottom:15px;font-size:8px;opacity:.8}
#app[dir="rtl"] .hero-copy h1,#app[dir="rtl"] .hero-copy h2{line-height:1.24}
#app[dir="rtl"] .hero-copy .accent:before{order:2}
#app[dir="rtl"] .primary-btn{clip-path:none}
@media(max-width:700px){
 .hud{padding:14px 14px;gap:9px}
 .brand{font-size:9px;letter-spacing:.06em;gap:6px}
 .brand-mark{width:30px;height:30px;font-size:22px}
 .header-actions{gap:6px}
 .language-control select{min-width:48px;padding:7px 8px}
 .overlay{align-items:center;padding:100px 24px 94px;background:linear-gradient(90deg,rgba(5,10,18,.78),rgba(5,10,18,.28)),linear-gradient(0deg,rgba(5,10,18,.3),transparent 65%)}
 .hero-copy{max-width:430px}
 .hero-copy .accent{font-size:8px;margin-bottom:13px}
 .hero-copy h1,.hero-copy h2{font-size:clamp(57px,14vw,88px);line-height:.9}
 .intro{max-width:320px;font-size:12px;line-height:1.75;margin:18px 0}
 .primary-btn{min-width:174px;padding:14px 15px;font-size:10px}
 .best-line{margin-top:17px;padding-top:12px}
 .bottom-note{font-size:6px;letter-spacing:.04em;bottom:10px}
 #app[dir="rtl"] .hero-copy h1,#app[dir="rtl"] .hero-copy h2{line-height:1.18}
 #app[dir="rtl"] .hero-copy h1{font-size:clamp(48px,12vw,76px)}
}