/* ============================================================
 * قهوة بلدي — Ahwa Baladi CSS (2026-07-03 v2)
 * 3D first-person café scene + 5 games — seated POV upgrade:
 * ترابيزة رخام بعمق + إيد حقيقية + مراوح ورق الخصوم +
 * دومينو/شطرنج 3D + بخار + دخان شيشة + فل سكرين + شخصيات
 * ============================================================ */
.ahwa-wrap{position:relative;width:100%;min-height:640px;height:78vh;max-height:900px;border-radius:18px;overflow:hidden;background:#1a120b;font-family:'Cairo',sans-serif;direction:rtl;user-select:none}
.ahwa-wrap *{box-sizing:border-box}

/* ---------- lobby ---------- */
.ab-lobby-bg{position:absolute;inset:0;background:url('/uploads/ahwa-thumb.png') center/cover;filter:brightness(.32) saturate(1.1)}
.ab-lobby-inner{position:relative;z-index:2;height:100%;overflow-y:auto;padding:26px 22px 40px}
.ab-lobby-head{text-align:center;margin-bottom:18px}
.ab-lobby-head h2{font-size:2rem;font-weight:900;color:#f5d98d;text-shadow:0 2px 12px rgba(0,0,0,.8);margin:0}
.ab-lobby-head p{color:#e8d8bd;opacity:.9;margin:6px 0 0;font-size:.95rem}
.ab-sec{margin:0 auto 20px;max-width:960px}
.ab-sec h3{color:#f5d98d;font-size:1.1rem;margin:0 0 10px}
.ab-drinks{display:flex;gap:10px;flex-wrap:wrap}
.ab-drink{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 12px;border-radius:14px;border:2px solid rgba(245,217,141,.25);background:rgba(30,20,12,.75);color:#f0e3c8;cursor:pointer;transition:.2s;font-family:inherit;font-size:.85rem;font-weight:700}
.ab-drink-img{width:74px;height:74px;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.ab-drink-img img{width:100%;height:100%;object-fit:cover;display:block}
.ab-drink:hover{border-color:#f5d98d;transform:translateY(-3px)}
.ab-drink.sel{border-color:#f5d98d;background:rgba(245,217,141,.18);box-shadow:0 0 18px rgba(245,217,141,.35)}

/* character selection (2026-07-03 v2) */
.ab-chars{display:flex;gap:10px;flex-wrap:wrap}
.ab-char{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 12px;border-radius:14px;border:2px solid rgba(245,217,141,.25);background:rgba(30,20,12,.75);color:#f0e3c8;cursor:pointer;transition:.2s;font-family:inherit;font-size:.82rem;font-weight:700}
.ab-char-img{width:80px;height:80px;border-radius:50%;overflow:hidden;border:2px solid rgba(245,217,141,.35);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.ab-char-img img{width:100%;height:100%;object-fit:cover;display:block}
.ab-char:hover{border-color:#f5d98d;transform:translateY(-3px)}
.ab-char.sel{border-color:#f5d98d;background:rgba(245,217,141,.18);box-shadow:0 0 18px rgba(245,217,141,.35)}
.ab-char.taken{opacity:.4;cursor:not-allowed;filter:grayscale(.8)}
.ab-char.taken:hover{transform:none;border-color:rgba(245,217,141,.25)}
.ab-chars.sm .ab-char{padding:7px 9px;font-size:.7rem}
.ab-chars.sm .ab-char-img{width:52px;height:52px}
.ab-wait-charpick{margin:12px 0}
.ab-wait-charpick p{font-size:.85rem;color:#c9b68a;margin:0 0 8px}
.ab-wait-charpick .ab-chars{justify-content:center}
.ab-wp-av{width:26px;height:26px;border-radius:50%;object-fit:cover;vertical-align:middle;border:1px solid rgba(245,217,141,.5)}
.ab-wp-char{font-style:normal;font-size:.7rem;color:#c9b68a}
.ab-wp{display:inline-flex;align-items:center;gap:6px}

/* mute button (lobby) */
.ab-mute-btn{position:absolute;top:0;left:0;background:rgba(0,0,0,.5);border:1px solid rgba(245,217,141,.4);color:#f5d98d;border-radius:12px;padding:8px 12px;cursor:pointer;font-size:1rem;z-index:5}
.ab-lobby-head{position:relative}
.ab-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.ab-game{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 12px;border-radius:16px;border:2px solid rgba(245,217,141,.25);background:rgba(30,20,12,.78);color:#f0e3c8;cursor:pointer;transition:.2s;font-family:inherit}
.ab-game:hover{border-color:#f5d98d;transform:translateY(-3px)}
.ab-game.sel{border-color:#f5d98d;background:rgba(245,217,141,.16);box-shadow:0 0 20px rgba(245,217,141,.3)}
.ab-game-i{font-size:2.2rem}
.ab-game-n{font-weight:900;font-size:1.05rem;color:#f5d98d}
.ab-game-d{font-size:.78rem;opacity:.85;line-height:1.5}
.ab-game-p{font-size:.75rem;color:#c9b68a}
.ab-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.ab-mode{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 14px;border-radius:16px;border:2px solid rgba(245,217,141,.3);background:rgba(30,20,12,.8);color:#f0e3c8;cursor:pointer;transition:.2s;font-family:inherit;font-size:.85rem}
.ab-mode i{font-size:1.6rem;color:#f5d98d}
.ab-mode b{font-size:1.05rem}
.ab-mode:hover{border-color:#f5d98d;transform:translateY(-3px)}
.ab-mode-join{cursor:default}
.ab-mode-join:hover{transform:none}
.ab-join-row{display:flex;gap:6px;margin-top:4px}
.ab-join-row input{width:120px;padding:8px 10px;border-radius:10px;border:1px solid rgba(245,217,141,.4);background:rgba(0,0,0,.5);color:#fff;text-align:center;font-family:inherit;font-size:1rem;letter-spacing:2px}
.ab-join-row button{padding:8px 16px;border-radius:10px;border:none;background:#f5d98d;color:#3a2415;font-weight:900;cursor:pointer;font-family:inherit}

/* ---------- waiting room ---------- */
.ab-wait{position:relative;z-index:2;max-width:560px;margin:0 auto;padding:60px 20px;text-align:center;color:#f0e3c8}
.ab-wait h2{color:#f5d98d;font-weight:900}
.ab-code{font-size:1.2rem;margin:14px 0;background:rgba(0,0,0,.55);border:1px dashed #f5d98d;border-radius:12px;padding:12px}
.ab-code b{letter-spacing:4px;color:#f5d98d;font-size:1.5rem}
.ab-code button{background:none;border:none;color:#f5d98d;cursor:pointer;font-size:1rem}
.ab-wait-hint{opacity:.85;font-size:.9rem}
.ab-wait-game{margin:10px 0;font-size:1.1rem;color:#f5d98d}
.ab-wait-game span{font-size:.8rem;color:#c9b68a}
.ab-wait-players{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.ab-wp{background:rgba(245,217,141,.15);border:1px solid rgba(245,217,141,.35);border-radius:20px;padding:6px 14px;font-size:.85rem}
.ab-start-btn{margin-top:10px;padding:13px 34px;border:none;border-radius:14px;background:linear-gradient(135deg,#f5d98d,#d4a017);color:#2a1a0a;font-weight:900;font-size:1.05rem;cursor:pointer;font-family:inherit;box-shadow:0 4px 18px rgba(212,160,23,.4)}
.ab-start-btn:hover{transform:translateY(-2px)}
.ab-back-btn{display:inline-block;margin-top:14px;padding:9px 22px;border-radius:12px;border:1px solid rgba(245,217,141,.4);background:transparent;color:#e8d8bd;cursor:pointer;font-family:inherit}
.ab-back-btn.sm{margin:0;padding:6px 14px;font-size:.8rem}

/* ---------- table scene (first-person 3D — seated POV v5: table baked into POV photo with correct eye-level perspective) ---------- */
.ahwa-table-scene{perspective:1100px;perspective-origin:50% 26%}
.ab-scene-bg{position:absolute;inset:0;background-size:cover;background-position:center 50%;filter:brightness(.94) saturate(1.05)}
/* v5: مشهد الشطرنج Three.js عنده طربيزته الخاصة — نستخدم خلفية القهوة من غير طربيزة */
/* v5b: الطربيزة الاسطوانية بتاعة Three.js اتشالت — الرقعة الـ 3D بتتحط على طربيزة القهوة الصفرا نفسها في الخلفية */
.ab-scene-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 36%,rgba(0,0,0,.6) 100%);pointer-events:none}
/* warm lamp spot from above (v2) */
.ab-lamp-glow{position:absolute;left:50%;top:30%;width:70%;height:60%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 30%,rgba(255,190,90,.16),transparent 60%);pointer-events:none;animation:abLampFlicker 5.5s infinite}
@keyframes abLampFlicker{0%,100%{opacity:1}47%{opacity:.85}52%{opacity:1}78%{opacity:.9}82%{opacity:1}}
/* shisha smoke drifting (v2) */
.ab-smoke{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.ab-smoke i{position:absolute;bottom:34%;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(220,220,230,.09),transparent 70%);filter:blur(6px);animation:abSmoke 11s linear infinite}
.ab-smoke i:nth-child(1){left:8%}
.ab-smoke i:nth-child(2){right:10%;animation-delay:-5.5s;animation-duration:13s}
@keyframes abSmoke{0%{transform:translateY(0) translateX(0) scale(.7);opacity:0}15%{opacity:.7}60%{opacity:.4}100%{transform:translateY(-260px) translateX(40px) scale(1.7);opacity:0}}
/* fullscreen (v2) */
.ahwa-wrap.ab-fs{position:fixed!important;inset:0!important;z-index:99999!important;width:100vw!important;height:100vh!important;max-height:none!important;border-radius:0!important}
#game-container:fullscreen{background:#1a120b}
#game-container:fullscreen .ahwa-wrap{height:100vh;max-height:none;border-radius:0}
.ab-icon-btn{background:rgba(0,0,0,.5);border:1px solid rgba(245,217,141,.4);color:#f5d98d;border-radius:10px;padding:6px 11px;cursor:pointer;font-size:.85rem}
.ab-icon-btn:hover{background:rgba(245,217,141,.2)}
.ab-topbar{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(180deg,rgba(0,0,0,.72),transparent)}
.ab-status{flex:1;color:#f5d98d;font-weight:700;font-size:.92rem;text-shadow:0 1px 6px #000}
.ab-status .ab-log{color:#d8c8a8;font-weight:400;font-size:.8rem}
.ab-roomtag{background:rgba(0,0,0,.55);border:1px solid rgba(245,217,141,.35);color:#f5d98d;border-radius:20px;padding:4px 12px;font-size:.78rem}

/* opponents seated on the chairs across the table (v5: aligned with the empty chair in pov4) */
.ab-opponents{position:absolute;top:13%;left:0;right:0;z-index:4;display:flex;justify-content:center;pointer-events:none}
.ab-opp{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.3s}
.ab-opp.pos-center{top:0;left:50%;transform:translateX(-50%)}
.ab-opp.pos-left{top:5%;left:13%}
.ab-opp.pos-right{top:5%;right:13%}
.ab-opp-body{position:relative;width:170px;height:170px;display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}
.ab-opp-fig{max-width:100%;max-height:100%;object-fit:contain;animation:abBreath 4.5s ease-in-out infinite;transform-origin:bottom center}
@keyframes abBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.012) translateY(-1px)}}
.ab-opp-emoji{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:3rem}
.ab-opp.turn .ab-opp-body{filter:drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(74,222,128,.65))}
.ab-opp.turn .ab-opp-name{border:1px solid #4ade80;box-shadow:0 0 12px rgba(74,222,128,.6)}
@keyframes abPulse{0%,100%{box-shadow:0 0 14px rgba(74,222,128,.5)}50%{box-shadow:0 0 26px rgba(74,222,128,.95)}}
.ab-opp-name{background:rgba(0,0,0,.65);color:#f5e9cd;border-radius:14px;padding:2px 12px;font-size:.78rem;font-weight:700}
.ab-opp-cards{display:flex;align-items:center;gap:1px}
.ab-opp-cards b{color:#f5d98d;font-size:.75rem;margin-right:4px;text-shadow:0 1px 4px #000}
.ab-opp-score{color:#c9e8b6;font-size:.72rem;text-shadow:0 1px 4px #000}

/* v5: الطربيزة الصفرا مدموجة في صورة الخلفية بالمنظور الصحيح —
   الـ table3d بقى مجرد طبقة لعب شفافة مايلة بنفس ميل سطح الطربيزة في الصورة */
.ab-table3d{position:absolute;left:50%;top:42%;transform:translateX(-50%);z-index:5;width:min(88%,900px);height:56%;transform-style:preserve-3d;pointer-events:none}
.ab-table-body{position:relative;width:100%;height:100%;transform:rotateX(52deg);transform-style:preserve-3d;pointer-events:none}
.ab-table-img{display:none}
.ab-table-shadow{display:none}
.ab-table-surface{position:absolute;inset:0 4%;transform-style:preserve-3d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:auto}
[data-game="chess"] .ab-table-body,[data-game="seega"] .ab-table-body{transform:rotateX(46deg)}
/* دومينو: ميل أخف شوية عشان وش الأحجار النايمة يبان واضح وهي على السطح */
[data-game="domino"] .ab-table-body{transform:rotateX(48deg)}
[data-game="domino"] .ab-table-surface{justify-content:center;gap:14px}
[data-game="domino"] .ab-hand-zone{bottom:6px}
/* POV forearms in black leather jacket resting on the table edge (v5 — matching the reference photo) */

/* generic playing cards */
.ab-card{position:relative;width:58px;height:82px;background:#faf6ec;border-radius:7px;box-shadow:0 3px 8px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;border:1px solid #c8bfa8}
.ab-card.fan{width:22px;height:32px;border-radius:4px}
.ab-card.fan .ab-back-pat{inset:2px;border-width:1px}
.ab-card .ab-cr{position:absolute;top:3px;right:5px;font-size:.72rem;font-weight:900;line-height:1;display:flex;flex-direction:column;align-items:center}
.ab-card .ab-cr i{font-style:normal;font-size:.68rem}
.ab-card .ab-cr.b{top:auto;right:auto;bottom:3px;left:5px;transform:rotate(180deg)}
.ab-card .ab-cs{font-size:1.7rem}
.ab-card.red{color:#c0392b}.ab-card.blk{color:#1c2833}
.ab-card.back{background:linear-gradient(135deg,#7a1f1f,#4a0f0f);border-color:#5a1515}
.ab-card.back .ab-back-pat{position:absolute;inset:5px;border:2px solid rgba(245,217,141,.5);border-radius:4px;background:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(245,217,141,.18) 5px,rgba(245,217,141,.18) 7px)}
.ab-card.mini{width:16px;height:24px;border-radius:3px;margin-left:-8px}
.ab-card.mini .ab-back-pat{inset:2px;border-width:1px}

/* basra floor */
.ab-floor{position:relative;display:flex;align-items:center;justify-content:center;min-height:120px;width:70%}
.ab-floor-card{position:absolute;transition:.3s}
.ab-floor-empty{color:rgba(245,233,205,.55);font-size:.9rem}
.ab-deck-info{color:#f0e3c8;font-size:.8rem;text-shadow:0 1px 5px #000;background:rgba(0,0,0,.4);border-radius:14px;padding:4px 14px}

/* my hand (first-person seated — v2: bigger, lower, curved, throw anim) */
.ab-hand-zone{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:flex-end;justify-content:center;padding:0 10px;max-width:96%;perspective:600px;filter:drop-shadow(0 14px 16px rgba(0,0,0,.45))}
.ab-hcard{cursor:pointer;transition:.18s;margin:0 -14px;transform-origin:bottom center;animation:abDeal .35s ease-out backwards}
.ab-hcard .ab-card{width:86px;height:122px;box-shadow:0 8px 20px rgba(0,0,0,.6)}
.ab-hcard .ab-card .ab-cs{font-size:2.4rem}
.ab-hcard:hover{transform:translateY(-34px) scale(1.12)!important;z-index:5}
.ab-hcard.my-turn .ab-card{box-shadow:0 8px 22px rgba(0,0,0,.6),0 0 14px rgba(245,217,141,.35)}
@keyframes abDeal{from{transform:translateY(80px) rotate(0deg);opacity:0}}
/* opponent card fans (v2) */
.ab-opp-fan{position:relative;display:flex;justify-content:center;align-items:flex-start;height:34px;margin-top:2px}
.ab-opp-fc{display:inline-block;margin:0 -8px;transform-origin:bottom center}
.ab-opp-fan b{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);color:#f5d98d;font-size:.72rem;text-shadow:0 1px 4px #000;background:rgba(0,0,0,.6);border-radius:8px;padding:0 6px}
/* card throw animation (v2) */
@keyframes abThrow{0%{transform:translateY(120px) translateZ(60px) rotate(-8deg) scale(1.15);opacity:.9}70%{transform:translateY(-6px) rotate(3deg) scale(1)}100%{transform:none;opacity:1}}
.ab-floor-card:last-child{animation:abThrow .38s ease-out}
.ab-dom-line .ab-dom:last-child{animation:abThrow .3s ease-out}

/* phase10 */
.ab-p10card{position:relative;width:60px;height:86px;border-radius:9px;background:linear-gradient(160deg,var(--pc,#555) 0%,color-mix(in srgb,var(--pc,#555) 70%,black) 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px 9px rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.55)}
.ab-p10card b{font-size:1.7rem;text-shadow:0 2px 4px rgba(0,0,0,.5)}
.ab-p10card i{font-style:normal;font-size:.6rem;opacity:.9}
.ab-p10card.mini{width:34px;height:48px;border-radius:5px}
.ab-p10card.mini b{font-size:.95rem}
.ab-p10card.back{background:linear-gradient(135deg,#333,#111);border-color:#666}
.ab-p10card.empty{background:transparent;border:2px dashed rgba(255,255,255,.3);box-shadow:none}
.ab-p10-center{display:flex;gap:24px;align-items:center}
.ab-p10-pile{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.ab-p10-pile span{color:#f0e3c8;font-size:.72rem;text-shadow:0 1px 4px #000}
.ab-p10-pile:hover .ab-p10card{transform:translateY(-4px)}
.ab-p10-melds{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:92%;margin-top:6px}
.ab-p10-meld{display:flex;align-items:center;gap:2px;background:rgba(0,0,0,.4);border-radius:10px;padding:4px 8px}
.ab-p10-meld em{color:#c9b68a;font-size:.62rem;margin-left:4px;font-style:normal}
.ab-p10-meld.hitable{outline:2px dashed #4ade80;cursor:pointer}
.ab-p10-hc{cursor:pointer;transition:.15s;margin:0 -6px}
.ab-p10-hc:hover{transform:translateY(-18px)}
.ab-p10-hc.sel{transform:translateY(-24px)}
.ab-p10-hc.sel .ab-p10card{outline:3px solid #4ade80;box-shadow:0 0 18px rgba(74,222,128,.6)}

/* side box */
.ab-sidebox{position:absolute;top:64px;left:12px;z-index:25;background:rgba(15,9,4,.82);border:1px solid rgba(245,217,141,.3);border-radius:14px;padding:10px 14px;color:#f0e3c8;font-size:.8rem;max-width:230px}
.ab-sidebox h4{margin:0 0 6px;color:#f5d98d;font-size:.9rem}
.ab-side-row{padding:2px 0;opacity:.9}
.ab-side-row.me{color:#f5d98d;font-weight:700}
.ab-side-acts{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ab-act{padding:8px 12px;border-radius:10px;border:none;background:linear-gradient(135deg,#f5d98d,#d4a017);color:#2a1a0a;font-weight:900;cursor:pointer;font-family:inherit;font-size:.8rem}
.ab-act.ghost{background:transparent;border:1px solid rgba(245,217,141,.4);color:#e8d8bd}
.ab-act:hover{filter:brightness(1.1)}

/* domino — real 3D (v5): line tiles lie FLAT on the tilted table plane with true extruded thickness,
   hand tiles stand on edge facing the player — like real café domino */
.ab-dom{position:relative;display:inline-flex;align-items:center;background:linear-gradient(165deg,#fdfaf1,#e9e1cd);border:1px solid #b8ae94;border-radius:6px;padding:2px;margin:3px 4px;transform-style:preserve-3d}
/* أحجار الخط الملعوب: نايمة على سطح الطربيزة مرفوعة بسمك الحجر */
.ab-dom-line .ab-dom{transform:translateZ(7px);box-shadow:0 14px 10px -6px rgba(0,0,0,.5)}
.ab-dom-line .ab-dom::before{content:'';position:absolute;left:-1px;right:-1px;bottom:-1px;height:9px;background:linear-gradient(#e2d8bf,#a89c7e);border-radius:0 0 5px 5px;transform:rotateX(-90deg);transform-origin:bottom;backface-visibility:hidden}
.ab-dom-line .ab-dom::after{content:'';position:absolute;top:-1px;bottom:-1px;right:-1px;width:9px;background:linear-gradient(90deg,#d8cfb6,#9c9077);border-radius:0 5px 5px 0;transform:rotateY(90deg);transform-origin:right;backface-visibility:hidden}
.ab-dom-line .ab-dom:nth-child(odd){transform:translateZ(7px) rotate(.8deg)}
.ab-dom-line .ab-dom:nth-child(3n){transform:translateZ(7px) rotate(-.7deg)}
/* أحجار إيدك: واقفة على حرفها قدامك — أكبر وواضحة بسمك ظاهر من فوق */
.ab-dom-hc .ab-dom{transform:rotateX(-9deg);box-shadow:0 10px 14px rgba(0,0,0,.55)}
.ab-dom-hc .ab-dom::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:7px;background:linear-gradient(#fff,#cfc5aa);border-radius:5px 5px 0 0;transform:rotateX(90deg);transform-origin:top;backface-visibility:hidden}
.ab-dom em{width:1px;align-self:stretch;background:#9c9077;margin:2px 1px}
.ab-dom.vert{flex-direction:column}
.ab-dom.vert em{width:auto;height:1px;align-self:stretch;margin:1px 2px}
.ab-dom-half{position:relative;width:34px;height:34px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:4px;gap:1px}
.ab-dom-hc .ab-dom-half{width:38px;height:38px}
.ab-dom-half i{border-radius:50%;background:transparent}
.ab-dom-half.p1 i:nth-child(1){grid-area:2/2;background:#2a1a0a}
.ab-dom-half.p2 i:nth-child(1){grid-area:1/1;background:#2a1a0a}.ab-dom-half.p2 i:nth-child(2){grid-area:3/3;background:#2a1a0a}
.ab-dom-half.p3 i:nth-child(1){grid-area:1/1;background:#2a1a0a}.ab-dom-half.p3 i:nth-child(2){grid-area:2/2;background:#2a1a0a}.ab-dom-half.p3 i:nth-child(3){grid-area:3/3;background:#2a1a0a}
.ab-dom-half.p4 i:nth-child(1){grid-area:1/1;background:#2a1a0a}.ab-dom-half.p4 i:nth-child(2){grid-area:1/3;background:#2a1a0a}.ab-dom-half.p4 i:nth-child(3){grid-area:3/1;background:#2a1a0a}.ab-dom-half.p4 i:nth-child(4){grid-area:3/3;background:#2a1a0a}
.ab-dom-half.p5 i:nth-child(1){grid-area:1/1;background:#2a1a0a}.ab-dom-half.p5 i:nth-child(2){grid-area:1/3;background:#2a1a0a}.ab-dom-half.p5 i:nth-child(3){grid-area:2/2;background:#2a1a0a}.ab-dom-half.p5 i:nth-child(4){grid-area:3/1;background:#2a1a0a}.ab-dom-half.p5 i:nth-child(5){grid-area:3/3;background:#2a1a0a}
.ab-dom-half.p6 i:nth-child(1){grid-area:1/1;background:#2a1a0a}.ab-dom-half.p6 i:nth-child(2){grid-area:1/3;background:#2a1a0a}.ab-dom-half.p6 i:nth-child(3){grid-area:2/1;background:#2a1a0a}.ab-dom-half.p6 i:nth-child(4){grid-area:2/3;background:#2a1a0a}.ab-dom-half.p6 i:nth-child(5){grid-area:3/1;background:#2a1a0a}.ab-dom-half.p6 i:nth-child(6){grid-area:3/3;background:#2a1a0a}
.ab-dom-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;max-width:94%;overflow:visible;padding:8px;transform-style:preserve-3d}
.ab-dom-hc{position:relative;cursor:pointer;transition:.15s;opacity:.62;perspective:500px;filter:saturate(.75) brightness(.85)}
.ab-dom-hc.playable{opacity:1;filter:none}
.ab-dom-hc.playable .ab-dom{box-shadow:0 10px 14px rgba(0,0,0,.55),0 0 14px rgba(245,217,141,.45)}
.ab-dom-hc.playable:hover{transform:translateY(-16px)}
.ab-dom-ask{position:absolute;bottom:105%;left:50%;transform:translateX(-50%);display:flex;gap:4px;background:rgba(0,0,0,.85);border-radius:10px;padding:6px;z-index:40;white-space:nowrap}
.ab-dom-ask button{padding:5px 10px;border-radius:8px;border:none;background:#f5d98d;color:#2a1a0a;font-weight:700;cursor:pointer;font-family:inherit;font-size:.72rem}

/* chess — real 3D (v3): tilted board plane + photoreal standing piece sprites */
.ab-chess3-stage{position:relative;width:min(56vh,410px);aspect-ratio:1}
/* الرقعة نفسها فوق الطربيزة: counter-rotate علشان تبان مستوية على السطح */
[data-game="chess"] .ab-table-surface{align-items:center;justify-content:center}
.ab-chess3-tilt{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.ab-chess3-stage{transform-style:preserve-3d}
/* v5: رقعة خشب قديمة حقيقية (صورة) بدل التدرجات — زي الصورة المرجعية */
.ab-chess-board3{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);padding:6.6%;background:url('/uploads/ahwa/3d/chessboard-top.png') center/100% 100% no-repeat;border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.55);overflow:hidden;direction:ltr}
.ab-sq{position:relative;cursor:pointer;background:transparent}
.ab-sq.dark{background:transparent}
.ab-sq.sel{box-shadow:inset 0 0 0 3px #4ade80,inset 0 0 20px rgba(74,222,128,.35)}
.ab-sq.hint::after{content:'';position:absolute;left:50%;top:50%;width:30%;height:30%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(74,222,128,.85),rgba(74,222,128,.35) 70%);box-shadow:0 0 10px rgba(74,222,128,.6)}
.ab-sq.cap{box-shadow:inset 0 0 0 3px rgba(231,76,60,.9),inset 0 0 18px rgba(231,76,60,.35)}
.ab-sq.last{box-shadow:inset 0 0 0 2px rgba(245,217,141,.75),inset 0 0 14px rgba(245,217,141,.3)}
/* طبقة القطع: نفس مساحة الرقعة، القطع صور "واقفة" (billboard) بتتحرك بسلاسة */
.ab-chess3-pieces{position:absolute;inset:6.6%;pointer-events:none;transform-style:preserve-3d}
.ab-pc3-wrap{position:absolute;width:12.5%;height:12.5%;transform:translate(-50%,-50%);transform-style:preserve-3d;pointer-events:auto;cursor:pointer;transition:left .45s cubic-bezier(.3,1.2,.4,1),top .45s cubic-bezier(.3,1.2,.4,1)}
.ab-pc3{position:absolute;left:50%;top:50%;height:230%;width:auto;max-width:none;transform-origin:50% 100%;filter:drop-shadow(0 6px 5px rgba(0,0,0,.45));transition:.2s;user-select:none;-webkit-user-drag:none;pointer-events:none}
.ab-pc3-shadow{pointer-events:none}
.ab-pc3-shadow{position:absolute;left:50%;top:56%;width:74%;height:26%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.5),transparent 70%)}
.ab-pc3-wrap:hover .ab-pc3{filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(245,217,141,.55))}
.ab-pc3-wrap.sel .ab-pc3{filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(74,222,128,.9))}
.ab-pc3-wrap.moved{animation:abPieceLand .5s cubic-bezier(.3,1.4,.4,1)}
@keyframes abPieceLand{0%{transform:translate(-50%,-78%) scale(1.06)}60%{transform:translate(-50%,-46%)}100%{transform:translate(-50%,-50%)}}
.ab-chess-hint{color:#e8d8bd;font-size:.82rem;text-shadow:0 1px 5px #000;padding-bottom:14px}
/* legacy fallback (لو فيه رندر قديم) */
.ab-chess-board{display:grid;grid-template-columns:repeat(8,1fr);width:min(62vh,440px);aspect-ratio:1;border:6px solid #3a2415;border-radius:8px;overflow:hidden;direction:ltr}
.ab-pc{font-size:2rem;line-height:1}

/* seega */
.ab-seega-board{position:relative;width:min(56vh,400px);aspect-ratio:1;margin:0 auto}
.ab-seega-lines{position:absolute;inset:0;width:100%;height:100%}
.ab-seega-lines rect,.ab-seega-lines line{fill:none;stroke:rgba(245,217,141,.75);stroke-width:1.1}
.ab-seega-pt{position:absolute;width:9.5%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.35);border:2px solid rgba(245,217,141,.45);cursor:pointer;transition:.15s}
.ab-seega-pt:hover{background:rgba(245,217,141,.3)}
.ab-seega-pt.p0{background:radial-gradient(circle at 35% 30%,#fff,#c9c3b2);border-color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.ab-seega-pt.p1{background:radial-gradient(circle at 35% 30%,#4a3a28,#120c06);border-color:#000;box-shadow:0 3px 8px rgba(0,0,0,.6)}
.ab-seega-pt.sel{outline:3px solid #4ade80}
.ab-seega-pt.hint{background:rgba(74,222,128,.4);border-color:#4ade80}
.ab-seega-pt.removable{outline:3px dashed #e74c3c;animation:abPulse 1s infinite}
.ab-seega-info{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding-bottom:16px}
.ab-seega-tag{background:rgba(0,0,0,.6);border-radius:16px;padding:6px 14px;font-size:.78rem;color:#f0e3c8;border:1px solid rgba(245,217,141,.3)}
.ab-seega-tag.me{border-color:#f5d98d;color:#f5d98d;font-weight:700}

/* drink on the table — real 3D image + steam (v2) */
.ab-drink-glass{position:absolute;bottom:19%;right:5%;z-index:15;width:92px;height:92px;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55))}
.ab-drink-glass img{width:100%;height:100%;object-fit:cover;border-radius:14px;border:1px solid rgba(245,217,141,.3)}
.ab-steam{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:40px;height:34px;pointer-events:none}
.ab-steam i{position:absolute;bottom:0;left:50%;width:7px;height:22px;border-radius:50%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.5));filter:blur(3px);animation:abSteam 2.6s ease-in-out infinite}
.ab-steam i:nth-child(1){margin-left:-11px;animation-delay:0s}
.ab-steam i:nth-child(2){margin-left:-3px;animation-delay:-.9s}
.ab-steam i:nth-child(3){margin-left:6px;animation-delay:-1.7s}
@keyframes abSteam{0%{transform:translateY(6px) scaleY(.6);opacity:0}30%{opacity:.75}100%{transform:translateY(-22px) scaleY(1.3) translateX(4px);opacity:0}}
.ab-liquid{display:none}

/* overlay */
.ab-overlay{position:absolute;inset:0;z-index:50;background:rgba(8,4,1,.72);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.ab-over-card{background:linear-gradient(160deg,#2a1a0c,#180e05);border:2px solid rgba(245,217,141,.5);border-radius:20px;padding:30px 40px;text-align:center;color:#f0e3c8;max-width:86%;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.ab-over-card h3{color:#f5d98d;font-size:1.5rem;margin:0 0 10px;font-weight:900}
.ab-over-detail{font-size:.85rem;opacity:.9;line-height:1.9}

/* toast */
.ab-toast{position:absolute;bottom:16px;left:50%;transform:translateX(-50%) translateY(60px);z-index:60;background:rgba(15,9,4,.92);border:1px solid rgba(245,217,141,.5);color:#f5d98d;border-radius:14px;padding:10px 22px;font-size:.9rem;font-weight:700;opacity:0;transition:.3s;pointer-events:none;white-space:nowrap}
.ab-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ab-toast.err{border-color:rgba(231,76,60,.7);color:#ff9f92}

/* mobile */
@media (max-width:768px){
  .ahwa-wrap{height:82vh;min-height:560px}
  .ab-opp-body{width:104px;height:104px}
  .ab-opp.pos-left{left:2%}
  .ab-opp.pos-right{right:2%}
  .ab-hcard .ab-card{width:62px;height:90px}
  .ab-hcard{margin:0 -16px}
  .ab-sidebox{top:auto;bottom:130px;left:6px;max-width:170px;font-size:.68rem;padding:8px 10px}
  .ab-chess-board{width:min(92vw,360px)}
  .ab-chess3-stage{width:min(80vw,320px)}
  .ab-seega-board{width:min(88vw,340px)}
  .ab-p10card{width:48px;height:70px}
  .ab-p10card b{font-size:1.3rem}
  .ab-drink-glass{width:56px;height:56px;bottom:26%;right:2%}
  .ab-steam{top:-18px}
  .ab-table3d{width:98%;top:44%;height:54%}
  .ab-drink-img{width:56px;height:56px}
  .ab-char-img{width:60px;height:60px}
  .ab-opp-fan{height:26px}
  .ab-opp-fc .ab-card.fan{width:16px;height:24px}
}

/* ============================================================
 * chess v4 (2026-07-04) — real Three.js 3D board
 * الكانفاس عنده كاميرا برسبكتيف خاصة، فبنشيل ميل الـ CSS
 * والصورة المسطحة للطربيزة (المشهد الـ 3D فيه طربيزة رخام خاصة)
 * ============================================================ */
.ab-3dchess[data-game="chess"] .ab-table3d{top:20%;height:78%;width:min(92%,980px)}
.ab-3dchess[data-game="chess"] .ab-table-body{transform:none}
.ab-3dchess[data-game="chess"] .ab-table-img,
.ab-3dchess[data-game="chess"] .ab-table-shadow{display:none}
.ab-3dchess[data-game="chess"] .ab-table-surface{inset:0;pointer-events:auto}
.ab-chess3d-host{position:relative;width:100%;height:100%;min-height:280px}
.ab-chess3d-host canvas{border-radius:14px}
@media (max-width:640px){
  .ab-3dchess[data-game="chess"] .ab-table3d{top:14%;height:74%}
}