/* بلياردو (نوفمبر 2026) — كل الأسماء تبدأ بـ bd- حتى ما تتداخل مع باقي الموقع
   طاولة خضراء وإطار خشب على خلفية كحلية، وأزرار ذهبية */
.bd{--ink:#0F172A;--sub:#475569;--navy:#0B1B33;--navy2:#13294B;--felt:#15803D;--gold:#F59E0B;--goldsh:#B45309;--ok:#16A34A;--bad:#DC2626;--paper:#FFFBF2;--line:#E2E8F0;
    position:relative;max-width:900px;margin:0 auto;direction:rtl;padding-bottom:112px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.bd [hidden]{display:none!important}
.bd button{font-family:inherit;-webkit-user-select:none;user-select:none}

/* الأزرار */
.bd-btn{display:block;width:100%;max-width:360px;margin:0 auto 10px;border:0;border-radius:16px;padding:13px 10px;font-weight:900;font-size:16px;cursor:pointer;color:var(--ink);background:#fff;box-shadow:0 3px 0 var(--line);line-height:1.35}
.bd-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.bd-main{color:#451A03;background:linear-gradient(180deg,#FCD34D,var(--gold));box-shadow:0 5px 0 var(--goldsh),0 10px 18px rgba(180,83,9,.25);font-size:18px;padding:15px 10px}
.bd-main:active{box-shadow:0 2px 0 var(--goldsh)}
.bd-resume{background:#ECFDF5;color:#065F46;box-shadow:0 3px 0 #6EE7B7}
.bd-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:360px;margin:0 auto 10px}
.bd-row .bd-btn{margin:0;font-size:14.5px}
.bd-row.one{grid-template-columns:1fr}
.bd-link{display:block;margin:4px auto 0;border:0;background:none;color:#1D4ED8;font-weight:900;font-size:14.5px;cursor:pointer;padding:8px;text-decoration:underline;text-underline-offset:4px}
.bd-ico{flex:0 0 42px;width:42px;height:42px;border:0;border-radius:14px;background:rgba(255,255,255,.12);font-size:19px;cursor:pointer;color:#fff}

/* البداية */
.bd-panel,.bd-stage{background:radial-gradient(120% 80% at 50% 0%,#1E3A8A 0%,var(--navy2) 45%,var(--navy) 100%)}
.bd-panel{position:relative;max-width:640px;margin:0 auto;border-radius:24px;padding:18px 16px 20px;text-align:center;overflow:hidden;color:#fff;box-shadow:0 14px 34px rgba(11,27,51,.35)}
.bd-panel::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 2px,transparent 2.5px);background-size:26px 26px;pointer-events:none}
.bd-panel>*{position:relative}
.bd-hero{display:flex;justify-content:center;margin:6px 0 12px}
.bd-hero-t{position:relative;width:220px;height:120px;border-radius:12px;background:radial-gradient(circle at 50% 50%,#22A35F,#0E6B3B);box-shadow:0 0 0 10px #6B3F1D,0 0 0 12px #3B1F0B,0 16px 26px rgba(0,0,0,.45);transform:rotate(-4deg);animation:bd-bob 3.4s ease-in-out infinite}
.bd-hero-t .pk{position:absolute;width:18px;height:18px;border-radius:50%;background:#050505}
.bd-hero-t .p1{top:-7px;right:-7px}.bd-hero-t .p2{top:-8px;left:101px}.bd-hero-t .p3{top:-7px;left:-7px}.bd-hero-t .p4{bottom:-7px;right:-7px}.bd-hero-t .p5{bottom:-8px;left:101px}.bd-hero-t .p6{bottom:-7px;left:-7px}
.bd-hero-t .b{position:absolute;width:16px;height:16px;border-radius:50%;box-shadow:inset -3px -3px 4px rgba(0,0,0,.35),0 2px 3px rgba(0,0,0,.35)}
.bd-hero-t .b1{left:150px;top:52px;background:#F5C518}.bd-hero-t .b2{left:163px;top:44px;background:#1D4ED8}.bd-hero-t .b3{left:163px;top:60px;background:#111}
.bd-hero-t .b4{left:176px;top:36px;background:linear-gradient(#fff 28%,#DC2626 28% 72%,#fff 72%)}.bd-hero-t .b5{left:176px;top:52px;background:#F97316}.bd-hero-t .b6{left:176px;top:68px;background:linear-gradient(#fff 28%,#15803D 28% 72%,#fff 72%)}
.bd-hero-t .cb{position:absolute;left:52px;top:52px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#E2E8F0);box-shadow:0 2px 3px rgba(0,0,0,.35);animation:bd-cb 2.6s ease-in-out infinite}
.bd-hero-t .stick{position:absolute;left:-60px;top:58px;width:104px;height:5px;border-radius:3px;background:linear-gradient(90deg,#3F1F08,#B7793C 60%,#E7C998 92%,#1E3A8A 96%,#F8FAFC);animation:bd-stick 2.6s ease-in-out infinite}
.bd-title{font-size:40px;font-weight:900;margin:2px 0 0;color:#FDE68A;text-shadow:0 3px 0 rgba(0,0,0,.25);line-height:1.2}
.bd-tag{margin:4px 0 14px;font-weight:800;font-size:15px;line-height:1.8;color:#DBEAFE}
.bd-opt{display:grid;gap:8px;max-width:380px;margin:0 auto 14px;background:rgba(0,0,0,.2);border-radius:16px;padding:10px}
.bd-opt-r{display:flex;align-items:center;gap:10px}
.bd-opt-r>span{flex:0 0 62px;font-weight:900;font-size:13.5px;color:#BFDBFE;text-align:right}
.bd-seg{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bd-seg.s3{grid-template-columns:repeat(3,1fr)}
.bd-seg button{border:0;border-radius:11px;padding:9px 4px;font-weight:900;font-size:14px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;line-height:1.3}
.bd-seg button.on{background:#fff;color:#1E3A8A;box-shadow:0 3px 0 rgba(0,0,0,.22)}
.bd-panel .bd-row .bd-btn{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.bd-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:380px;margin:8px auto 0}
.bd-stat{background:rgba(255,255,255,.12);border-radius:12px;padding:7px 12px;min-width:80px}
.bd-stat b{display:block;font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
.bd-stat small{display:block;font-size:11px;font-weight:800;color:#BFDBFE}

/* ساحة اللعب */
.bd-stage{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;border-radius:24px;padding:10px;color:#fff;overflow:hidden;box-shadow:0 14px 34px rgba(11,27,51,.35)}
.bd-top{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.bd-top-mid{flex:1;min-width:0;text-align:center;line-height:1.3}
.bd-top-mid b{display:block;font-size:18px;font-weight:900;color:#FDE68A}
.bd-top-mid small{display:block;font-size:12px;font-weight:800;color:#BFDBFE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-top::after{content:'';flex:0 0 42px}
.bd-seats{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bd-seat{position:relative;display:flex;align-items:center;gap:6px;min-height:44px;background:rgba(0,0,0,.22);border-radius:14px;padding:4px 8px;border:2px solid transparent;transition:border-color .2s,background .2s;min-width:0;flex-wrap:wrap}
.bd-seat.on{border-color:#FCD34D;background:rgba(252,211,77,.14)}
.bd-av{font-size:20px;line-height:1}
.bd-nm{flex:1;min-width:0;line-height:1.25}
.bd-nm b{display:block;font-size:13.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-nm small{display:block;font-size:11px;font-weight:800;color:#BFDBFE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-balls{display:flex;gap:2px;direction:ltr;flex-wrap:nowrap;flex-basis:100%;justify-content:flex-end;padding:0 2px 1px}
.bd-balls i{display:block;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:inset -1px -1px 2px rgba(0,0,0,.35)}
.bd-balls i.st{background:linear-gradient(#fff 25%,var(--c) 25% 75%,#fff 75%)}
.bd-balls i.in{opacity:.18}
.bd-balls i.e8{background:#111;box-shadow:0 0 0 1.5px #FCD34D}
.bd-turn{position:absolute;top:-7px;left:8px;font-size:10.5px;font-weight:900;background:#FCD34D;color:#451A03;border-radius:999px;padding:1px 7px;white-space:nowrap}
.bd-tablewrap{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:0}
.bd-canvas{display:block;touch-action:none;border-radius:14px;box-shadow:0 12px 26px rgba(0,0,0,.45);cursor:crosshair;max-width:100%}
.bd-banner{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);z-index:3;background:rgba(11,27,51,.92);color:#fff;border-radius:18px;padding:12px 20px;text-align:center;pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.bd-banner b{display:block;font-size:22px;font-weight:900;color:#FDE68A}
.bd-banner small{display:block;font-size:13.5px;font-weight:800;color:#DBEAFE;margin-top:2px}
.bd-banner.on{animation:bd-pop .35s cubic-bezier(.2,1.5,.4,1)}
.bd-ctrl{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.22);border-radius:14px;padding:6px 8px;transition:opacity .2s}
.bd-ctrl.off{opacity:.45}
.bd-fine{flex:0 0 44px;width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-size:22px;font-weight:900;cursor:pointer;touch-action:none}
.bd-fine:disabled,.bd-shoot:disabled{cursor:default}
.bd-pow{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
.bd-pow span{font-size:11.5px;font-weight:900;color:#BFDBFE;text-align:center}
.bd-pow span b{color:#FDE68A;font-variant-numeric:tabular-nums}
.bd-pow input{width:100%;height:28px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;margin:0}
.bd-pow input::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(90deg,#16A34A,#F59E0B 60%,#DC2626)}
.bd-pow input::-moz-range-track{height:10px;border-radius:5px;background:linear-gradient(90deg,#16A34A,#F59E0B 60%,#DC2626)}
.bd-pow input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-8px;border-radius:50%;background:#fff;border:4px solid #1E3A8A;box-shadow:0 3px 6px rgba(0,0,0,.35)}
.bd-pow input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid #1E3A8A}
.bd-shoot{flex:0 0 auto;height:44px;border:0;border-radius:12px;padding:0 14px;font-weight:900;font-size:15px;color:#451A03;background:linear-gradient(180deg,#FCD34D,var(--gold));box-shadow:0 4px 0 var(--goldsh);cursor:pointer;white-space:nowrap}
.bd-shoot:active{transform:translateY(2px);box-shadow:0 2px 0 var(--goldsh)}
.bd-hint{flex:0 0 auto;margin:0;min-height:20px;text-align:center;font-weight:900;font-size:13.5px;color:#DBEAFE;line-height:1.5}
.bd-hint.warn{color:#FECACA}
.bd-toast{position:absolute;left:50%;top:8%;transform:translateX(-50%);z-index:9;background:rgba(11,27,51,.94);color:#fff;border-radius:16px;padding:9px 16px;font-weight:900;font-size:14px;width:max-content;max-width:calc(100% - 24px);text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.25);pointer-events:none;line-height:1.5}
.bd-toast.on{animation:bd-toast .3s ease both}

/* النهاية */
.bd-end{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(11,27,51,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow-y:auto}
.bd-end-card{width:100%;max-width:400px;max-height:100%;overflow-y:auto;background:var(--paper);color:var(--ink);border-radius:22px;padding:16px 14px 12px;text-align:center;box-shadow:0 18px 40px rgba(0,0,0,.35);animation:bd-in .45s cubic-bezier(.2,1.4,.4,1) both}
.bd-end-e{font-size:46px;line-height:1.1}
.bd-end-h{font-size:24px;font-weight:900;color:#1E3A8A;margin:4px 0 2px}
.bd-end-sub{white-space:pre-line;font-size:14px;font-weight:800;color:var(--sub);line-height:1.8;margin:2px 0 8px}
.bd-end-stats{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:4px 0 12px}
.bd-es{background:#F1F5F9;border-radius:12px;padding:6px 10px;min-width:72px}
.bd-es b{display:block;font-size:15.5px;font-weight:900;font-variant-numeric:tabular-nums}
.bd-es small{display:block;font-size:11px;font-weight:800;color:var(--sub)}
.bd-end-card .bd-row .bd-btn{background:#F1F5F9}

/* النوافذ */
.bd-modal{position:fixed;inset:0;z-index:100002;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(11,27,51,.62)}
.bd-mcard{position:relative;width:100%;max-width:440px;max-height:100%;overflow:auto;background:var(--paper);color:var(--ink);border-radius:22px;padding:20px 16px 14px;text-align:center;box-shadow:0 22px 44px rgba(0,0,0,.35);animation:bd-in .35s cubic-bezier(.2,1.4,.4,1) both}
.bd-mcard-h{font-size:21px;font-weight:900;margin:2px 0 12px;color:#1E3A8A}
.bd-how{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px;text-align:right}
.bd-how li{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:14px;padding:10px 12px;font-size:14.5px;font-weight:800;line-height:1.75;box-shadow:0 2px 0 var(--line)}
.bd-how li span{font-size:22px;line-height:1.3}
.bd-rules-t{text-align:right;margin-bottom:8px}
.bd-rules-t ul{margin:0 0 8px;padding:0 18px 0 0;display:grid;gap:6px}
.bd-rules-t li{font-size:14px;font-weight:800;line-height:1.75}
.bd-rules-n{margin:4px 0 0;font-size:12.5px;font-weight:800;color:var(--sub);line-height:1.7}

@keyframes bd-in{0%{opacity:0;transform:translateY(8px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes bd-pop{0%{transform:translate(-50%,-50%) scale(.7);opacity:0}100%{transform:translate(-50%,-50%);opacity:1}}
@keyframes bd-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes bd-cb{0%,45%{translate:0 0}70%,100%{translate:92px 0}}
@keyframes bd-stick{0%{translate:-14px 0}40%{translate:-26px 0}48%{translate:2px 0}100%{translate:-14px 0}}
@keyframes bd-toast{0%{opacity:0;transform:translate(-50%,6px)}100%{opacity:1;transform:translate(-50%,0)}}

/* ملء الشاشة على الجوال: الطاولة تاخذ المساحة اللي تبقى */
.game-focus-shell.is-focus #bd-game{max-width:none;height:100%;padding:0;display:flex;flex-direction:column}
.game-focus-shell.is-focus .bd-panel{flex:1;max-width:none;border-radius:0;overflow-y:auto;padding-top:calc(60px + env(safe-area-inset-top,0px))}
.game-focus-shell.is-focus .bd-stage{flex:1;min-height:0;border-radius:0;padding:calc(8px + env(safe-area-inset-top,0px)) 8px calc(10px + env(safe-area-inset-bottom,0px))}
.game-focus-shell.is-focus .bd-top{padding-left:46px}   /* زر «إنهاء ملء الشاشة» أعلى اليسار */
.game-focus-shell.is-focus .bd-top::after{display:none}
.game-focus-shell.is-focus .bd-tablewrap{flex:1 1 auto}
html.la3-next-open .game-focus-shell.is-focus .bd-stage{padding-bottom:calc(118px + env(safe-area-inset-bottom,0px))}
html.la3-next-open .game-focus-shell.is-focus .bd-end{padding-bottom:calc(126px + env(safe-area-inset-bottom,0px))}

@media(max-width:380px){
    .bd-title{font-size:34px}
    .bd-seg button{font-size:12.5px}
    .bd-opt-r>span{flex-basis:54px;font-size:12.5px}
    .bd-balls i{width:7px;height:7px}
    .bd-shoot{padding:0 10px;font-size:14px}
    .bd-fine{flex-basis:40px;width:40px}
}
@media(max-height:700px){
    .bd-seat{min-height:38px;padding:2px 6px}
    .bd-av{font-size:17px}
    .bd-hint{font-size:12.5px;min-height:18px}
    .bd-ctrl{padding:4px 6px}
    .bd-hero-t{width:180px;height:98px}
}
@media(prefers-reduced-motion:reduce){.bd-hero-t,.bd-hero-t .cb,.bd-hero-t .stick,.bd-banner.on,.bd-end-card,.bd-mcard,.bd-toast.on{animation-duration:.01s;animation-iteration-count:1}}
