/* الحفرة — asphalt + sand look of an Iraqi neighbourhood, with a dark hole eating the page edges */
:root { --ink: #fff6e9; --muted: #e3cdb0; --card: rgba(41, 31, 52, .92); --line: rgba(255, 236, 206, .18); --gold: #ffce4a; --amber: #ff8a3d; --teal: #4ad7c0; --dark: #241b2f; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--dark); }
body { min-height: 100vh; color: var(--ink); font-family: "Baloo Bhaijaan 2", system-ui, sans-serif; overflow-x: hidden;
  background: radial-gradient(circle at 15% -5%, #6b4b7a55, transparent 45%), radial-gradient(circle at 95% 10%, #ff8a3d33, transparent 40%), linear-gradient(#241b2f, #342744 55%, #6a4b3a); }
.page { max-width: 560px; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)); }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.icon { width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .32); font-size: 20px; }

.home { text-align: center; margin-top: 12px; padding: 16px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0, 0, 0, .42); }
.home-art { width: min(230px, 64%); height: auto; aspect-ratio: 1; border-radius: 28px; object-fit: cover; box-shadow: 0 12px 28px rgba(0, 0, 0, .5); }
.home h1 { margin: 8px 0 0; font-size: 42px; color: var(--gold); text-shadow: 0 3px 0 #5b2d00, 0 0 26px #ff8a3d55; }
.home p { margin: 2px 0 8px; color: var(--muted); font-weight: 600; }
.best b { color: var(--gold); }
.how { text-align: right; margin: 10px 0; padding: 10px 14px; list-style: none; border-radius: 18px; background: rgba(0, 0, 0, .28); line-height: 1.95; font-weight: 600; font-size: 15px; }
.pick { margin: 14px 0 8px; font-size: 20px; color: var(--teal); }
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lv { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 9px 2px 7px; background: rgba(255, 255, 255, .08); font-weight: 800; font-size: 15px; line-height: 1.1; }
.lv b { display: block; font-size: 17px; color: var(--gold); }
.lv small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 2px; min-height: 14px; letter-spacing: 1px; }
.lv.done { background: linear-gradient(160deg, rgba(74, 215, 192, .3), rgba(255, 206, 74, .16)); border-color: rgba(74, 215, 192, .5); }
.lv.lock { opacity: .45; }
.lv:active { transform: scale(.96); }

.btn { display: block; width: 100%; margin-top: 10px; border: 0; border-radius: 18px; padding: 13px; font-weight: 800; font-size: 19px; }
.btn-main { background: linear-gradient(#ffd166, #ff8a1b); color: #3c1c00; box-shadow: 0 5px 0 #8a3f00; }
.btn-main:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a3f00; }
.btn-ghost { background: rgba(255, 255, 255, .12); border: 1px solid var(--line); }

body.playing .page { display: none; }
.play { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #16121e; padding: env(safe-area-inset-top) 0 0; }
.hud { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(27, 20, 36, .96); font-weight: 800; }
.chip { flex: 1; text-align: center; padding: 5px 2px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 14px; white-space: nowrap; }
.chip b { color: var(--gold); }
.chip.time b { color: var(--teal); }
.chip.rank b { color: #ffb3c1; }
#pauseBtn { width: 36px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .12); flex: none; }
.stage { position: relative; flex: 1; min-height: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hint { margin: 0; padding: 7px 10px calc(7px + env(safe-area-inset-bottom)); text-align: center; background: rgba(27, 20, 36, .96); color: var(--muted); font-size: 13px; font-weight: 700; }
.hint.off { opacity: .45; }

.board { position: absolute; top: 8px; inset-inline-start: 8px; min-width: 124px; padding: 6px 8px; border-radius: 14px; background: rgba(20, 15, 28, .72); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; line-height: 1.6; pointer-events: none; }
.board i { font-style: normal; display: flex; justify-content: space-between; gap: 10px; }
.board i.me { color: var(--gold); }
.board i.me b { color: var(--gold); }
.board b { color: var(--ink); font-weight: 800; direction: ltr; }

.feed { position: absolute; inset-inline-end: 8px; top: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.feed span { padding: 4px 10px; border-radius: 12px; background: rgba(20, 15, 28, .72); border: 1px solid var(--line); font-size: 13px; font-weight: 700; animation: pop .25s ease-out, fade .4s ease-in 1.5s forwards; }
@keyframes pop { from { transform: translateY(-6px) scale(.9); opacity: 0 } }
@keyframes fade { to { opacity: 0; transform: translateY(-6px) } }

.banner { position: absolute; left: 50%; top: 26%; transform: translate(-50%, -16px); opacity: 0; pointer-events: none; text-align: center; padding: 10px 24px; border-radius: 22px; background: rgba(20, 15, 28, .86); border: 2px solid var(--gold); transition: .3s; }
.banner.on { opacity: 1; transform: translate(-50%, 0); }
.banner b { display: block; font-size: 26px; color: var(--gold); }
.banner small { font-size: 14px; color: var(--muted); font-weight: 700; }

.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(8, 5, 14, .82); }
.modal { width: min(400px, 100%); padding: 18px 16px; border-radius: 26px; background: #2e2340; border: 1px solid var(--line); text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
.modal h2 { margin: 0 0 6px; color: var(--gold); }
.stars { direction: ltr; font-size: 30px; letter-spacing: 6px; margin: 2px 0 6px; }
.stars span { opacity: .25; }
.stars span.on { opacity: 1; text-shadow: 0 0 16px #ffce4a88; }
.result { margin: 6px 0 4px; padding: 8px 10px; border-radius: 16px; background: rgba(0, 0, 0, .28); font-weight: 700; font-size: 15px; line-height: 1.8; text-align: right; }
.result i { font-style: normal; display: flex; justify-content: space-between; gap: 12px; }
.result i.me { color: var(--gold); }
.result i b { direction: ltr; }
.new-best { color: #7dff8a !important; font-weight: 800; }
.sinan-credit { text-align: center; margin-top: 18px; color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.sinan-credit b { color: var(--gold); }

/* الچيكر (نفس چيكر لعبة الثعبان) */
.joy { position: absolute; right: 14px; bottom: 14px; width: 122px; height: 122px; border-radius: 50%; border: 3px solid #ffffff55; background: radial-gradient(circle, #ffffff22 0 40%, #ffffff11 41%); touch-action: none; z-index: 6; }
.joy[hidden] { display: none; }
.joy i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, #f2a24b); border: 3px solid #fff; box-shadow: 0 4px 12px #0008; transition: transform .12s; }
.joy.on i { transition: none; }