/* AI TAKHFID 2050 — game styles (brand: orange #ff6a00 on black #0b0f1a) */
:root{--org:#ff6a00;--bg:#0b0f1a;--panel:#141c2e;--gold:#ffd166;--txt:#eef2f8;}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:Arial,Helvetica,sans-serif;min-height:100vh}
a{color:var(--org);text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}

.g-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #232c42;background:#0d1322;position:sticky;top:0;z-index:50}
.g-logo{font-weight:800;font-size:18px;letter-spacing:1px}
.g-logo b{color:var(--org)}
.g-logo small{display:block;font-size:10px;color:#8a93a8;letter-spacing:3px}
.g-nav a{margin-inline-start:14px;font-size:13px;color:#c6cddd}

/* hero */
.g-hero{text-align:center;padding:52px 16px 30px;background:radial-gradient(600px 260px at 50% 0,rgba(255,106,0,.16),transparent)}
.g-hero .tag{display:inline-block;border:1px solid var(--org);color:var(--org);border-radius:20px;padding:4px 14px;font-size:12px;letter-spacing:2px;margin-bottom:14px}
.g-hero h1{font-size:clamp(28px,6vw,46px);letter-spacing:1px}
.g-hero h1 em{color:var(--org);font-style:normal}
.g-hero p{color:#9aa5bc;max-width:560px;margin:12px auto 22px;font-size:15px}

.btn{display:inline-block;background:var(--org);color:#fff;border:none;border-radius:10px;padding:13px 30px;font-size:16px;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent;border:1px solid #3a4763;color:var(--txt)}
.btn-sm{padding:8px 16px;font-size:13px}

/* cards */
.g-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;padding:26px 0}
.g-card{background:var(--panel);border:1px solid #232c42;border-radius:14px;padding:22px}
.g-card h3{margin:8px 0 6px;font-size:18px}
.g-card p{color:#9aa5bc;font-size:13px;line-height:1.5}
.g-card .ico{font-size:34px}
.g-card .soon{display:inline-block;background:#2a1200;color:var(--gold);font-size:11px;border-radius:6px;padding:3px 8px;margin-top:10px}
.g-card.live{border-color:var(--org)}
.g-card.live .soon{background:var(--org);color:#fff}

/* how to */
.g-sec{padding:30px 0}
.g-sec h2{text-align:center;font-size:24px;margin-bottom:20px}
.g-sec h2 em{color:var(--org);font-style:normal}
.g-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.g-step{background:var(--panel);border:1px solid #232c42;border-radius:14px;padding:18px;text-align:center}
.g-step b{display:block;font-size:30px;color:var(--gold);margin-bottom:6px}

/* rewards table */
table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:12px;overflow:hidden;font-size:14px}
th,td{padding:11px 14px;text-align:start;border-bottom:1px solid #232c42}
th{background:#101828;color:var(--gold);font-size:12px;letter-spacing:1px}

/* leaderboard */
.lb-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid #232c42;border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:14px}
.lb-row .rk{width:34px;font-size:18px}
.lb-row .sc{margin-inline-start:auto;color:var(--org);font-weight:700}

/* footer */
.g-foot{text-align:center;color:#77809a;font-size:12px;padding:26px 16px;border-top:1px solid #1c2438;margin-top:30px}

/* ============ PLAY PAGE ============ */
.play-wrap{max-width:520px;margin:0 auto;padding:12px}
.hud{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--panel);border:1px solid #232c42;border-radius:12px;padding:10px 12px;margin-bottom:10px;font-size:14px;flex-wrap:wrap}
.hud .score{color:var(--gold);font-weight:800;font-size:18px}
.hud .timer{font-weight:800;font-size:18px}
.hud .timer.danger{color:#ff5252;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.4}}
#hud-targets{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;align-items:center}
#hud-targets span{background:#101828;border:1px solid #2a3450;border-radius:8px;padding:3px 8px}
#hud-targets .t-done{border-color:var(--org);color:var(--gold)}
.t-strikes{border:none!important;background:none!important}

.stage{position:relative;border-radius:16px;overflow:hidden;border:1px solid #2a3450;box-shadow:0 14px 40px rgba(0,0,0,.5)}
#gameCanvas{display:block;width:100%;background:#0b0f1a;touch-action:none}

.overlay{position:absolute;inset:0;background:rgba(7,10,18,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;z-index:5}
.overlay.hidden{display:none}
.overlay h2{font-size:26px;margin-bottom:10px}
.overlay h2 em{color:var(--org);font-style:normal}
.overlay p{color:#9aa5bc;font-size:14px;margin-bottom:16px;max-width:340px}
.ov-big{font-size:44px;font-weight:800;color:var(--gold);margin-bottom:6px}
.ov-txt{color:#c6cddd;font-size:14px;margin-bottom:16px}
.ov-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ov-input{background:#0d1424;border:1px solid #2a3450;color:#fff;border-radius:8px;padding:10px 12px;width:200px;margin-bottom:10px;font-size:14px}
.code-box{background:#101828;border:2px dashed var(--org);border-radius:12px;padding:14px 22px;font-size:22px;font-weight:800;letter-spacing:2px;color:var(--gold);margin:8px 0 14px}
.play-hint{text-align:center;color:#77809a;font-size:12px;margin-top:10px}
@media(max-width:420px){.hud{font-size:12px}.hud .score,.hud .timer{font-size:15px}}

/* language button + RTL */
.lang-btn{margin-inline-start:14px;background:transparent;border:1px solid #3a4763;color:#eef2f8;border-radius:8px;padding:4px 12px;font-size:13px;cursor:pointer}
.lang-btn:hover{border-color:var(--org)}
html[dir=rtl] body{font-family:'Noto Sans Arabic',Tahoma,Arial,sans-serif}
html[dir=rtl] .g-logo,html[dir=rtl] .code-box,html[dir=rtl] #hud-score,html[dir=rtl] #hud-time{direction:ltr}
html[dir=rtl] .g-logo{text-align:left}
html[dir=rtl] .g-logo small{letter-spacing:0}
html[dir=rtl] .g-hero .tag,html[dir=rtl] .g-sec h2{letter-spacing:0}
@media(max-width:560px){.g-top{flex-direction:column;align-items:flex-start;gap:8px}.g-nav{display:flex;flex-wrap:wrap;gap:6px 0;align-items:center}}

/* ============ GAME CENTER v2 ============ */
#glCanvas{display:block;width:100%;aspect-ratio:480/640;background:#0b0f1a;touch-action:none}
#gameCanvas{aspect-ratio:480/640}
#pops{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,-50%);font-weight:800;font-size:20px;text-shadow:0 2px 6px #000;animation:pop .9s ease-out forwards}
@keyframes pop{to{transform:translate(-50%,-190%);opacity:0}}
#flash{position:absolute;inset:0;background:#ff2d2d;opacity:0;pointer-events:none}
.toast{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;background:#0d1424;border:1px solid var(--org);border-radius:10px;padding:8px 14px;font-size:13px;z-index:9;max-width:90%;text-align:center}
.toast.hidden{display:none}
.hud-btns{display:flex;gap:6px}.ib{background:#101828;border:1px solid #2a3450;color:#fff;border-radius:8px;min-width:36px;height:32px;cursor:pointer;font-size:14px}.ib:hover{border-color:var(--org)}
.ov-small{font-size:12px!important;color:#9aa5bc}
body.shake .stage{animation:shk .2s}@keyframes shk{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.end-body{display:flex;flex-direction:column;align-items:center;max-height:100%;overflow:auto;width:100%}
.end-body.hidden,#end-wait.hidden{display:none}
.rp-h{font-size:12px;color:#9aa5bc;margin:6px 0}.rp-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;width:100%}
.rp{background:#101828;border:1px solid #2a3450;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:4px;color:#eef2f8;font-size:11px;text-align:center}
.rp img{width:100%;aspect-ratio:1;object-fit:contain;background:#eef0f5;border-radius:8px}.rp span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rp b{color:var(--gold)}
.g-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;padding:26px 0}
.g-mode{background:var(--panel);border:1px solid #232c42;border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:6px}
.g-mode.live{border-color:var(--org)}.g-mode h3{font-size:18px}.g-mode p{color:#9aa5bc;font-size:13px;line-height:1.5;flex:1}.g-mode .ico{font-size:34px}.g-mode .btn{align-self:flex-start;margin-top:8px}
.g-wallet{background:var(--panel);border:1px solid var(--org);border-radius:14px;padding:18px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.g-wallet .bal{font-size:36px;font-weight:800;color:var(--gold)}.g-wallet small{color:#9aa5bc;display:block}
.g-rw{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}
.g-rw .rw{background:var(--panel);border:1px solid #232c42;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px}.rw b{font-size:17px}.rw small{color:#9aa5bc}
.codes{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:13px}.codes .c{background:#101828;border:1px dashed var(--org);border-radius:10px;padding:8px 12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.codes b{color:var(--gold);letter-spacing:1px}
/* villa + boq pages */
.vwrap{max-width:1000px;margin:0 auto;padding:16px}
.v-top{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:18px}
@media(max-width:760px){.v-top{grid-template-columns:1fr}}
#villa3d{width:100%;aspect-ratio:1;background:#0b0f1a;border:1px solid #2a3450;border-radius:14px;display:block}
.v-steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.v-steps button{background:#101828;border:1px solid #2a3450;color:#cbd2e2;border-radius:99px;padding:6px 12px;font-size:13px;cursor:pointer}
.v-steps button.on{background:var(--org);border-color:var(--org);color:#fff}.v-steps button.done::after{content:' ✓'}.v-steps button:disabled{opacity:.4;cursor:not-allowed}
.v-tip{background:#2a1200;border:1px solid var(--org);border-radius:10px;padding:8px 12px;font-size:13px;color:#ffd9b0;margin-bottom:10px}
.v-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.v-p{background:var(--panel);border:2px solid #232c42;border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:5px;font-size:12px;text-align:center;cursor:pointer;color:#eef2f8}
.v-p.sel{border-color:var(--org)}.v-p img{width:100%;aspect-ratio:1;object-fit:contain;background:#eef0f5;border-radius:8px}.v-p .nm{min-height:32px}.v-p b{color:var(--gold)}
.v-p .q{display:none;align-items:center;justify-content:center;gap:6px}.v-p.sel .q{display:flex}.v-p .q button{background:#101828;border:1px solid #2a3450;color:#fff;width:26px;height:26px;border-radius:6px;cursor:pointer}
.v-bar{position:sticky;bottom:0;background:#0d1322;border-top:1px solid #232c42;padding:10px 14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:16px}
.v-sum{font-size:13px;color:#c6cddd}
.fm{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;background:var(--panel);border:1px solid #232c42;border-radius:12px;padding:14px;margin-top:14px}
.fm input,.fm textarea,.b-sel{background:#0d1424;border:1px solid #2a3450;color:#fff;border-radius:8px;padding:9px;font:inherit;width:100%}
.b-line{background:var(--panel);border:1px solid #232c42;border-radius:12px;padding:12px;margin-bottom:10px}.b-line h4{font-size:15px;margin-bottom:6px}.b-line small{color:#9aa5bc}
.b-res{background:#101828;border:1px solid var(--org);border-radius:12px;padding:14px;margin-top:12px;font-size:14px;line-height:1.6}
.ok-t{color:#5be38a}.bad-t{color:#ffb454}
.hidden{display:none!important}