@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');
:root { color-scheme: dark; --plum:#24152f; --cream:#fff4dd; --lime:#d6f36a; --peach:#ffbd78; --coral:#ff7869; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--plum); color:var(--cream); font-family:Tajawal,Tahoma,Arial,sans-serif; }
[hidden] { display:none !important; }
#gameCanvas { width:100%; height:100%; display:block; touch-action:none; }
#gameCanvas:focus-visible { outline:2px solid var(--lime); outline-offset:-3px; }
#damageOverlay { position:fixed; inset:0; background:#e00000; opacity:0; pointer-events:none; z-index:1; }
#hud { z-index:2; }
#hud { position:fixed; inset:0; pointer-events:none; padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.brand { font-size:19px; font-weight:900; padding:14px; border-radius:18px; background:#24152fed; }
.brand span { color:var(--lime); }
.round-timer strong { font-variant-numeric:tabular-nums; white-space:nowrap; }
.round-timer.urgent { border-color:var(--coral); color:#ffab84; background:#391d32; }
.result-score { color:var(--lime); font-weight:800; }
.result-score strong { display:block; font-size:42px; line-height:1.2; }
.result-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; margin:12px 0; }
#newRecord { color:var(--lime); font-weight:800; }
#newRecord:empty { display:none; }
.result-appearance { display:flex; align-items:center; justify-content:center; gap:12px; padding:8px; border-radius:16px; background:#fff4dd0a; }
.result-appearance strong { display:block; color:var(--peach); margin-top:6px; }
#bestAppearanceImage { width:90px; height:90px; flex-shrink:0; background-position:0 0; background-repeat:no-repeat; }
.counters { display:flex; gap:8px; }
.counters { min-width:0; }
.stat { min-width:96px; padding:10px 16px; text-align:center; background:#24152fed; border:1px solid #fff4dd26; border-radius:18px; box-shadow:0 4px 14px #160e2426; }
.stat-title { display:block; font-size:13px; font-weight:500; white-space:nowrap; }
.stat-title span { color:var(--peach); margin-inline-end:4px; }
.stat strong { display:block; min-width:5ch; font:900 26px/1.15 Tajawal,Tahoma,sans-serif; font-variant-numeric:tabular-nums; direction:ltr; }
.screen[data-state="ended"] .eyebrow,
.screen[data-state="ended"] #gameStatus,
.screen[data-state="ended"] #screenDescription { display:none; }
.screen[data-state="ended"] .panel { padding:16px; }
.screen[data-state="ended"] h1 { margin:4px 0 10px; }
.screen[data-state="ended"] .panel-actions { margin-top:12px; }
#coinCounter { color:var(--lime); }
#collisionCounter.hit { color:var(--coral); }
.penalty-progress { width:max-content; max-width:100%; margin:6px auto 0; padding:5px 10px; border-radius:10px; background:#24152fed; font-size:12px; text-align:center; }
nav { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
button { pointer-events:auto; border:2px solid transparent; border-radius:14px; padding:12px 17px; font:800 16px/1.3 Tajawal,Tahoma,Arial,sans-serif; color:var(--plum); cursor:pointer; box-shadow:0 4px 0 #130d1b55; transition:transform .15s,filter .15s,box-shadow .15s; }
button:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-2px); }
button:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 #130d1b55; }
button:focus-visible { outline:3px solid var(--cream); outline-offset:4px; border-color:var(--plum); }
button:disabled { opacity:.5; cursor:wait; box-shadow:none; }
.start { background:var(--lime); }.pause { background:var(--peach); }.restart { background:var(--coral); }
.screen { position:absolute; inset:100px 16px 16px; display:grid; place-items:center; }
.panel { pointer-events:auto; width:min(100%,500px); max-height:100%; overflow:auto; padding:32px; text-align:center; border-radius:28px; border:1px solid #fff4dd35; background:#24152ff5; box-shadow:0 18px 60px #140b274d; }
.eyebrow { color:var(--lime); font-size:13px; font-weight:700; letter-spacing:1px; }
h1 { font-size:clamp(27px,4vw,38px); font-weight:900; margin:12px 0; }
p { font-size:17px; line-height:1.7; margin:12px 0; }
.key-guide,.compact-guide { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; font-size:14px; }
kbd { display:inline-block; direction:ltr; unicode-bidi:isolate; font:700 12px/1.5 Tahoma,Arial,sans-serif; padding:3px 7px; background:#fff4dd15; border:1px solid #fff4dd65; border-bottom-width:3px; border-radius:6px; margin-inline-end:4px; }
.auto-run { opacity:.8; }
#gameStatus { font-size:14px; color:var(--peach); min-height:24px; }
#gameStatus[data-state="error"] { color:var(--coral); }
.panel-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:20px; }
.panel-actions button { min-width:150px; }
.compact-guide { position:absolute; bottom:max(14px,env(safe-area-inset-bottom)); right:16px; padding:9px 13px; border-radius:14px; background:#24152fe8; gap:12px; font-size:12px; }
@media(max-width:850px) { .brand { display:none; } .topbar { flex-wrap:wrap; } .counters { flex:1; } .stat { flex:1; min-width:0; padding:8px; } nav button { font-size:14px; padding:10px; } }
@media(max-width:520px) { #hud { padding:10px; } .topbar { gap:8px; } .counters { flex-basis:100%; gap:6px; } .stat strong { font-size:23px; } nav { width:100%; } .screen { inset:150px 10px 10px; } .panel { padding:22px 16px; border-radius:22px; } .compact-guide { left:10px; right:10px; bottom:10px; gap:9px; } }
@media(max-width:520px) {
    .stat { padding:8px 3px; }
    .stat strong { min-width:0; font-size:21px; }
    .stat-title { font-size:11px; }
    .stat-title span { margin-inline-end:0; }
    #bestAppearanceImage { width:60px; height:60px; }
    .result-appearance { font-size:13px; padding:4px; }
    .result-stats { font-size:13px; gap:6px 16px; }
}
@media(max-height:500px) { .screen { inset:85px 10px 8px; } .panel { padding:16px; } h1 { margin:4px; font-size:26px; } p { margin:6px 0; font-size:14px; } .eyebrow { display:none; } .panel-actions { margin-top:10px; } .compact-guide { padding:5px 10px; } }
@media(prefers-reduced-motion:reduce) { button { transition:none; } button:hover:not(:disabled),button:active:not(:disabled) { transform:none; } }

.audio-actions { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-end; gap:8px; }
.sound { background:var(--cream); min-width:48px; min-height:48px; font-size:22px; }
#unlockNotice { position:relative; margin:6px auto 0; width:max-content; max-width:calc(100% - 32px); padding:12px 20px; border-radius:16px; background:#24152fed; color:var(--lime); text-align:center; pointer-events:none; font-weight:800; }
#unlockNotice:empty { display:none; }
@media(max-width:520px) { .audio-actions { width:100%; } .audio-actions nav { width:auto; flex:1; } }

/* Reserve real space for rewards: no overlay on the playable canvas. */
body { display:grid; grid-template-rows:minmax(0,1fr) auto; }
#gameCanvas { min-height:0; min-width:0; }
#hud { bottom:var(--rewards-height, 160px); }
.rewards { pointer-events:none; padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background:var(--plum); border-top:1px solid #fff4dd26; }
.rewards-heading { display:flex; align-items:center; gap:12px; margin-bottom:6px; font-size:14px; }
.rewards-heading span { font-size:12px; opacity:.75; }
.reward-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-width:1400px; margin:auto; }
.reward-card { display:flex; align-items:center; gap:10px; padding:8px; border:1px solid #fff4dd26; border-radius:16px; background:#fff4dd08; }
.reward-card.next { border-color:var(--peach); background:#ffbd7812; }
.reward-card.unlocked { border-color:#d6f36570; }
.reward-preview { width:80px; height:80px; flex-shrink:0; }
.reward-details { min-width:0; flex:1; }
.reward-details h2 { font-size:15px; margin:0 0 3px; }
.reward-state { display:block; min-height:17px; font-size:12px; color:var(--peach); }
.unlocked .reward-state { color:var(--lime); }
.reward-track { height:6px; border-radius:9px; overflow:hidden; background:#fff4dd20; margin:6px 0; }
.reward-track span { display:block; height:100%; width:0; background:var(--lime); border-radius:inherit; transition:width .2s ease-out; }
.reward-count { display:inline-block; font:700 13px Tahoma,Arial,sans-serif; font-variant-numeric:tabular-nums; }
.reward-remaining { font-size:12px; margin-inline-start:8px; white-space:nowrap; }
#rewardsToggle { display:none; }
@media(max-width:850px), (max-height:550px) {
    .rewards-heading { display:none; }
    #rewardsToggle { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:40px; padding:5px 8px; background:transparent; color:var(--cream); box-shadow:none; font-size:13px; }
    #nextReward { font-size:12px; font-weight:500; }
    .rewards:not(.expanded) .reward-cards { display:none; }
    .reward-cards { gap:6px; margin-top:6px; }
    .reward-card { padding:5px; gap:4px; }
    .reward-preview { width:56px; height:56px; }
    .reward-details h2 { font-size:12px; }
    .reward-state, .reward-remaining { font-size:11px; }
    .reward-remaining { display:block; margin-inline-start:0; }
}
@media(max-width:520px) {
    .reward-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .reward-card { text-align:start; }
    .reward-details { width:100%; }
    .reward-preview { width:48px; height:48px; }
    .reward-state { min-height:28px; }
    .reward-count { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .reward-track span { transition:none; } }
@media(max-height:550px) and (min-width:521px) {
    .topbar { flex-wrap:nowrap; gap:8px; }
    .brand { display:none; }
    .counters { flex:1; gap:4px; }
    .stat { min-width:0; padding:5px; }
    .stat-title { font-size:11px; }
    .stat strong { font-size:19px; min-width:3ch; }
    .audio-actions { flex-wrap:nowrap; gap:5px; }
    .audio-actions nav { flex-wrap:nowrap; gap:5px; }
    nav button { font-size:12px; padding:9px 7px; }
    .sound { min-width:38px; min-height:38px; padding:4px; }
    .reward-preview { width:48px; height:48px; }
    .reward-card { gap:2px; }
}

@media(max-height:550px) { .reward-preview { width:40px; height:40px; } .reward-card { gap:3px; } }
@media(max-width:520px) {
    .audio-actions { gap:5px; }
    .audio-actions nav { gap:5px; }
    nav button { font-size:12px; padding:8px 6px; }
    .sound { min-width:38px; min-height:38px; font-size:18px; padding:5px; }
    .reward-preview { width:36px; height:36px; }
    .reward-details { width:auto; }
    .reward-details h2 { font-size:11px; }
    .reward-state { min-height:0; font-size:10px; }
    .reward-remaining { font-size:10px; }
    .reward-track { margin:4px 0; }
    .compact-guide { font-size:10px; padding:4px; gap:4px; }
    .compact-guide kbd { font-size:10px; padding:1px 3px; }
}

/* The transparent WebGL scene and all existing UI remain above the scenery. */
#panoramaCanvas { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
#gameCanvas { position:relative; }

/* A separate row keeps fingers and controls outside the playable scene. */
#touchControls { display:none; }
@media (any-pointer:coarse) {
    body { grid-template-rows:minmax(0,1fr) auto auto; }
    #touchControls {
        display:flex; direction:ltr; flex-direction:row; align-items:center; justify-content:space-between; gap:16px;
        padding:8px max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
        background:var(--plum); border-top:1px solid #fff4dd26;
        touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
        z-index:2;
    }
    #hud { bottom:calc(var(--rewards-height,160px) + var(--touch-height,108px));
        padding-left:max(10px,env(safe-area-inset-left)); padding-right:max(10px,env(safe-area-inset-right));
        padding-top:max(10px,env(safe-area-inset-top)); }
    #compactGuide, #pauseButton { display:none; }
    .touch-action { width:clamp(64px,22vw,88px); height:clamp(64px,22vw,88px); min-width:48px; min-height:48px; flex:none; padding:6px; border-radius:50%;
        font-size:19px; border:2px solid #fff4dd66; touch-action:none; }
    .touch-action span { display:block; }
    .screen[data-state="paused"] .panel-actions { position:sticky; bottom:0; padding:8px 0; background:var(--plum); }
    #resumeButton { min-height:48px; }
    .touch-action:hover:not(:disabled) { transform:none; }
    .touch-action.pressed:not(:disabled) { transform:translateY(3px) scale(.94); filter:brightness(.8);
        box-shadow:inset 0 3px 8px #130d1b88; border-color:var(--cream); }
    .touch-action:disabled { cursor:default; }
}
@media (any-pointer:coarse) and (max-height:500px) {
    .touch-action { width:68px; height:68px; font-size:17px; }
    #touchControls { padding-top:4px; padding-bottom:max(4px,env(safe-area-inset-bottom)); }
}
@media (max-height:500px) and (min-width:521px) {
    .screen[data-state="ended"] .panel { padding:10px 16px; }
    .screen[data-state="ended"] h1 { font-size:24px; margin:0 0 5px; }
    #roundResults { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; align-items:center; }
    .result-score { font-size:13px; }
    .result-score strong { font-size:30px; }
    .result-stats { grid-column:1; margin:0; gap:4px 10px; font-size:12px; }
    .result-appearance { grid-column:2; grid-row:1 / span 2; font-size:12px; padding:4px; }
    #bestAppearanceImage { width:52px; height:52px; }
    #newRecord { grid-column:1 / -1; margin:0; font-size:12px; }
    .screen[data-state="ended"] .panel-actions { margin-top:8px; }
    .screen[data-state="ended"] .panel-actions button { padding:8px 18px; }
}