/* كيرم (أكتوبر 2026) — كل الأسماء تبدأ بـ cr- حتى ما تتداخل مع باقي الموقع
   لوحة خشب فاتح على خلفية خضراء غامقة، وأزرار ذهبية */
.cr{--ink:#1C1917;--sub:#57534E;--em:#065F46;--em2:#047857;--deep:#022C22;--gold:#F59E0B;--goldsh:#B45309;--ok:#16A34A;--bad:#DC2626;--paper:#FFFBF2;--line:#E7DCC8;
    position:relative;max-width:640px;margin:0 auto;direction:rtl;padding-bottom:112px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.cr [hidden]{display:none!important}
.cr button{font-family:inherit;-webkit-user-select:none;user-select:none}

/* الأزرار */
.cr-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}
.cr-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.cr-btn:disabled{opacity:.45;cursor:default;transform:none}
.cr-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}
.cr-main:active{box-shadow:0 2px 0 var(--goldsh)}
.cr-resume{background:#ECFDF5;color:var(--em);box-shadow:0 3px 0 #6EE7B7}
.cr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:360px;margin:0 auto 10px}
.cr-row .cr-btn{margin:0;font-size:14.5px}
.cr-row.one{grid-template-columns:1fr}
.cr-link{display:block;margin:4px auto 0;border:0;background:none;color:var(--em2);font-weight:900;font-size:14.5px;cursor:pointer;padding:8px;text-decoration:underline;text-underline-offset:4px}
.cr-ico{flex:0 0 42px;width:42px;height:42px;border:0;border-radius:14px;background:rgba(255,255,255,.14);font-size:19px;cursor:pointer;color:#fff}

/* البداية */
.cr-panel,.cr-stage{background:radial-gradient(120% 80% at 50% 0%,#10B981 0%,var(--em) 45%,var(--deep) 100%)}
.cr-panel{position:relative;border-radius:24px;padding:18px 16px 20px;text-align:center;overflow:hidden;color:#fff;box-shadow:0 14px 34px rgba(2,44,34,.35)}
.cr-panel::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 2px,transparent 2.5px);background-size:26px 26px;pointer-events:none}
.cr-panel>*{position:relative}
.cr-hero{display:flex;justify-content:center;margin:4px 0 8px}
.cr-hero-board{position:relative;width:150px;height:150px;border-radius:14px;background:radial-gradient(circle at 50% 50%,#F8E6C2,#E9C98F);box-shadow:0 0 0 9px #5B3A1E,0 0 0 11px #3B2412,0 16px 26px rgba(0,0,0,.4);transform:rotate(-6deg);animation:cr-bob 3.4s ease-in-out infinite}
.cr-hero-board .p{position:absolute;width:24px;height:24px;border-radius:50%;background:#111;box-shadow:inset 0 0 0 2px #3a2a1a}
.cr-hero-board .p1{top:-2px;right:-2px}.cr-hero-board .p2{top:-2px;left:-2px}.cr-hero-board .p3{bottom:-2px;right:-2px}.cr-hero-board .p4{bottom:-2px;left:-2px}
.cr-hero-board .c{position:absolute;width:20px;height:20px;border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,.35),inset 0 0 0 3px rgba(0,0,0,.12)}
.cr-hero-board .q{left:65px;top:65px;background:#E11D48}
.cr-hero-board .w{background:#FFFDF5}.cr-hero-board .b{background:#262626}
.cr-hero-board .w1{left:65px;top:44px}.cr-hero-board .b1{left:83px;top:54px}.cr-hero-board .w2{left:83px;top:76px}.cr-hero-board .b2{left:65px;top:86px}.cr-hero-board .w3{left:47px;top:76px}.cr-hero-board .b3{left:47px;top:54px}
.cr-hero-board .st{position:absolute;left:61px;bottom:14px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#DBEAFE);box-shadow:0 0 0 3px #1D4ED8 inset,0 3px 5px rgba(0,0,0,.35);animation:cr-shot 2.4s ease-in-out infinite}
.cr-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}
.cr-tag{margin:4px 0 14px;font-weight:800;font-size:15px;line-height:1.8;color:#D1FAE5}
.cr-opt{display:grid;gap:8px;max-width:380px;margin:0 auto 14px;background:rgba(0,0,0,.18);border-radius:16px;padding:10px}
.cr-opt-r{display:flex;align-items:center;gap:10px}
.cr-opt-r>span{flex:0 0 62px;font-weight:900;font-size:13.5px;color:#A7F3D0;text-align:right}
.cr-seg{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cr-seg.s3{grid-template-columns:repeat(3,1fr)}
.cr-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}
.cr-seg button.on{background:#fff;color:var(--em);box-shadow:0 3px 0 rgba(0,0,0,.22)}
.cr-opt-note{margin:2px 0 0;font-size:12.5px;font-weight:800;color:#D1FAE5;line-height:1.6}
.cr-panel .cr-row .cr-btn{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.cr-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:380px;margin:8px auto 0}
.cr-stat{background:rgba(255,255,255,.12);border-radius:12px;padding:7px 12px;min-width:80px}
.cr-stat b{display:block;font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
.cr-stat small{display:block;font-size:11px;font-weight:800;color:#A7F3D0}

/* ساحة اللعب */
.cr-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(2,44,34,.35)}
.cr-top{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cr-top-mid{flex:1;min-width:0;text-align:center;line-height:1.3}
.cr-top-mid b{display:block;font-size:18px;font-weight:900;color:#FDE68A}
.cr-top-mid small{display:block;font-size:12px;font-weight:800;color:#A7F3D0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-boardno{flex:0 0 auto;min-width:74px;text-align:center;background:rgba(0,0,0,.25);border-radius:999px;padding:8px 10px;font-weight:900;font-size:13px;font-variant-numeric:tabular-nums}
.cr-seat{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:46px;background:rgba(0,0,0,.2);border-radius:14px;padding:5px 10px;border:2px solid transparent;transition:border-color .2s,background .2s}
.cr-seat.on{border-color:#FCD34D;background:rgba(252,211,77,.14)}
.cr-av{font-size:24px;line-height:1}
.cr-nm{flex:1;min-width:0;line-height:1.3}
.cr-nm b{display:block;font-size:14.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-nm small{display:block;font-size:11.5px;font-weight:800;color:#A7F3D0;white-space:nowrap}
.cr-dots{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;width:104px;direction:ltr}
.cr-dots i{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4)}
.cr-dots.w i.in{background:#FFFDF5;border-color:#FFFDF5}
.cr-dots.b i.in{background:#262626;border-color:#A3A3A3}
.cr-pts{font-weight:900;font-size:16px;color:#FDE68A;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-q{font-size:18px}.cr-q.pend{font-size:13px;opacity:.85;animation:cr-beat 1s ease-in-out infinite}
.cr-wins{display:flex;gap:3px}.cr-wins i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}.cr-wins i.on{background:#FCD34D}
.cr-turn{font-size:11.5px;font-weight:900;background:#FCD34D;color:#451A03;border-radius:999px;padding:2px 8px;white-space:nowrap}
.cr-boardwrap{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:0}
.cr-canvas{display:block;touch-action:none;border-radius:12px;box-shadow:0 12px 26px rgba(0,0,0,.45);cursor:crosshair;max-width:100%}
.cr-banner{position:absolute;left:50%;top:24%;transform:translate(-50%,-50%);z-index:3;background:rgba(2,44,34,.9);color:#fff;border-radius:18px;padding:12px 20px;text-align:center;pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.cr-banner b{display:block;font-size:22px;font-weight:900;color:#FDE68A}
.cr-banner small{display:block;font-size:13.5px;font-weight:800;color:#D1FAE5;margin-top:2px}
.cr-banner.on{animation:cr-pop .35s cubic-bezier(.2,1.5,.4,1)}
.cr-ctrl{flex:0 0 auto;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.2);border-radius:14px;padding:6px 10px;transition:opacity .2s}
.cr-ctrl.off{opacity:.45}
.cr-slide-l{flex:0 0 auto;font-size:12.5px;font-weight:900;color:#A7F3D0;white-space:nowrap}
.cr-slide{flex:1;min-width:0;height:34px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;margin:0}
.cr-slide::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(90deg,#C81E1E 0 5%,#E9C98F 5% 95%,#C81E1E 95%)}
.cr-slide::-moz-range-track{height:10px;border-radius:5px;background:#E9C98F}
.cr-slide::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#DBEAFE);border:4px solid #1D4ED8;box-shadow:0 3px 6px rgba(0,0,0,.35)}
.cr-slide::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid #1D4ED8}
.cr-slide:disabled{cursor:default}
.cr-hint{flex:0 0 auto;margin:0;min-height:22px;text-align:center;font-weight:900;font-size:14px;color:#D1FAE5;line-height:1.5}
.cr-hint.warn{color:#FECACA}
.cr-toast{position:absolute;left:50%;top:9%;transform:translateX(-50%);z-index:9;background:rgba(2,44,34,.94);color:#fff;border-radius:999px;padding:9px 16px;font-weight:900;font-size:14px;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}
.cr-toast.on{animation:cr-toast .3s ease both}

/* النهاية */
.cr-end{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(2,44,34,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow-y:auto}
.cr-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:cr-in .45s cubic-bezier(.2,1.4,.4,1) both}
.cr-end-e{font-size:46px;line-height:1.1}
.cr-end-h{font-size:22px;font-weight:900;color:var(--em);margin:4px 0 2px}
.cr-end-big{font-family:Cairo,Tajawal,sans-serif;font-size:38px;font-weight:900;line-height:1.25;color:var(--ink)}
.cr-end-big:empty{display:none}
.cr-end-sub{white-space:pre-line;font-size:13.5px;font-weight:800;color:var(--sub);line-height:1.8;margin:2px 0 8px}
.cr-end-sub:empty{display:none}
.cr-end-stats{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:4px 0 12px}
.cr-es{background:#F5F5F4;border-radius:12px;padding:6px 10px;min-width:72px}
.cr-es b{display:block;font-size:15.5px;font-weight:900;font-variant-numeric:tabular-nums}
.cr-es small{display:block;font-size:11px;font-weight:800;color:var(--sub)}
.cr-end-card .cr-row .cr-btn{background:#F5F5F4}

/* النوافذ */
.cr-modal{position:fixed;inset:0;z-index:100002;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,44,34,.62)}   /* وسط الشاشة دايماً، فوق شريط الموقع */
.cr-mcard{position:relative;width:100%;max-width:420px;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:cr-in .35s cubic-bezier(.2,1.4,.4,1) both}
.cr-mcard-h{font-size:21px;font-weight:900;margin:2px 0 12px;color:var(--em)}
.cr-how{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px;text-align:right}
.cr-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)}
.cr-how li span{font-size:22px;line-height:1.3}
.cr-rules-t{text-align:right;margin-bottom:8px}
.cr-rules-t h4{margin:6px 0 6px;font-size:16px;font-weight:900;color:var(--em)}
.cr-rules-t ul{margin:0 0 8px;padding:0 18px 0 0;display:grid;gap:5px}
.cr-rules-t li{font-size:14px;font-weight:800;line-height:1.75}

@keyframes cr-in{0%{opacity:0;transform:translateY(8px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes cr-pop{0%{transform:translate(-50%,-50%) scale(.7);opacity:0}100%{transform:translate(-50%,-50%);opacity:1}}
@keyframes cr-beat{0%,100%{transform:none}50%{transform:scale(1.15)}}
@keyframes cr-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes cr-shot{0%,60%,100%{translate:0 0}75%{translate:0 -46px}}
@keyframes cr-toast{0%{opacity:0;transform:translate(-50%,6px)}100%{opacity:1;transform:translate(-50%,0)}}

/* ملء الشاشة على الجوال: اللوحة تاخذ المساحة اللي تبقى */
.game-focus-shell.is-focus #cr-game{max-width:none;height:100%;padding:0;display:flex;flex-direction:column}
.game-focus-shell.is-focus .cr-panel{flex:1;border-radius:0;overflow-y:auto;padding-top:calc(60px + env(safe-area-inset-top,0px))}
.game-focus-shell.is-focus .cr-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 .cr-seat.s1{margin-top:auto}   /* اللاعبين واللوحة مع بعض في النص */
.game-focus-shell.is-focus .cr-hint{margin-bottom:auto}
.game-focus-shell.is-focus .cr-top{padding-left:46px}   /* زر «إنهاء ملء الشاشة» أعلى اليسار */
html.la3-next-open .game-focus-shell.is-focus .cr-end{padding-bottom:calc(126px + env(safe-area-inset-bottom,0px))}

@media(max-width:380px){
    .cr-title{font-size:34px}
    .cr-seg button{font-size:12.5px}
    .cr-opt-r>span{flex-basis:54px;font-size:12.5px}
    .cr-dots{width:92px}.cr-dots i{width:8px;height:8px}
    .cr-nm b{font-size:13.5px}
}
@media(max-height:700px){
    .cr-seat{min-height:40px;padding:3px 8px}
    .cr-av{font-size:20px}
    .cr-hint{font-size:13px;min-height:18px}
    .cr-ctrl{padding:3px 8px}
    .cr-hero-board{width:120px;height:120px}
}
@media(prefers-reduced-motion:reduce){.cr-hero-board,.cr-hero-board .st,.cr-banner.on,.cr-end-card,.cr-mcard,.cr-q.pend,.cr-toast.on{animation-duration:.01s;animation-iteration-count:1}}