*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#081c15;color:#fff;font:14px/1.3 system-ui,"Noto Sans Arabic","Segoe UI",sans-serif;touch-action:manipulation;user-select:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 18%,#2d6a4f 0%,#1b4332 45%,#081c15 100%)}
#app::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 85%,rgba(255,255,255,.06),transparent 40%),radial-gradient(circle at 85% 8%,rgba(255,255,255,.08),transparent 35%)}
.row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;position:relative;z-index:2;min-height:64px;gap:6px}
.row.top{padding-top:max(10px,env(safe-area-inset-top))}.row.bot{padding-bottom:max(10px,env(safe-area-inset-bottom))}
.pl{display:flex;align-items:center;gap:8px;min-width:0;flex:1;opacity:.35;transition:opacity .3s}
.pl.filled{opacity:1}.pl.right{flex-direction:row-reverse;text-align:left}
.av{width:44px;height:44px;border-radius:50%;border:3px solid #666;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;flex:none;overflow:hidden;position:relative;
 background:linear-gradient(145deg,#4a4a4a,#1d1d1d);box-shadow:0 6px 14px rgba(0,0,0,.6),inset 0 2px 4px rgba(255,255,255,.25)}
.av img{width:100%;height:100%;object-fit:cover}
.pl.turn .av{box-shadow:0 0 0 3px #fff8,0 0 22px var(--c),0 6px 14px rgba(0,0,0,.6);animation:glow 1.2s ease-in-out infinite alternate}
@keyframes glow{to{box-shadow:0 0 0 3px #fff8,0 0 34px var(--c),0 6px 14px rgba(0,0,0,.6)}}
.nm{font-size:12.5px;line-height:1.25;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nm small{display:block;opacity:.8;font-size:10.5px}
.pl .bubble{position:absolute;top:-6px;left:50%;transform:translate(-50%,-100%);font-size:26px;animation:pop .35s ease-out;filter:drop-shadow(0 2px 3px #000)}
@keyframes pop{from{transform:translate(-50%,-60%) scale(.3);opacity:0}}
.mid{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;min-height:0;padding:0 6px}
.boardwrap{width:min(100%,calc(100dvh - 300px));max-width:560px;aspect-ratio:1;transform:perspective(900px) rotateX(12deg);transform-origin:50% 60%;filter:drop-shadow(0 26px 22px rgba(0,0,0,.65))}
#board{width:100%;height:100%;display:block;overflow:visible}
.status{position:relative;z-index:3;text-align:center;min-height:38px;display:flex;align-items:center;justify-content:center}
.status span{font-size:13.5px;font-weight:900;padding:8px 16px;border-radius:22px;background:linear-gradient(#ffe066,#f4b400);color:#3b2a00;box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 2px 3px #fff8;transition:background .3s}
.status span.wait{background:linear-gradient(#e9ecef,#adb5bd);color:#222}.status span.me{animation:pulse 1s infinite alternate}
@keyframes pulse{to{transform:scale(1.06)}}
.dice{width:66px;height:66px;border-radius:16px;border:0;padding:0;cursor:pointer;flex:none;position:relative;
 background:linear-gradient(145deg,#ffffff,#d9d9d9);box-shadow:0 10px 18px rgba(0,0,0,.6),inset 0 -4px 6px rgba(0,0,0,.15),inset 0 3px 4px #fff;transition:transform .15s,filter .2s}
.dice:disabled{filter:grayscale(.4) brightness(.8);cursor:default}.dice.ready{animation:shake 1.1s infinite}.dice.rolling{animation:spin .55s linear}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg) scale(1.06)}75%{transform:rotate(8deg) scale(1.06)}}
@keyframes spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(200deg) scale(.85)}100%{transform:rotate(360deg) scale(1)}}
.face{position:absolute;inset:0}.face i{position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff6b6b,#9b1010);transform:translate(-50%,-50%)}
.emojis{display:flex;justify-content:center;gap:6px;padding:0 0 8px;position:relative;z-index:2}
.emojis button{font-size:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:3px 9px;cursor:pointer}
/* الأحجار */
.pawn{cursor:default;transition:transform .22s ease-out}
.pawn.can{cursor:pointer;animation:bounce .6s ease-in-out infinite alternate}
@keyframes bounce{to{transform:translateY(-6px)}}
.pawn.can .ring{opacity:1}.ring{opacity:0;fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:4 3;animation:rot 2s linear infinite}
@keyframes rot{to{stroke-dashoffset:-14}}
/* نافذة النهاية / الانتظار */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:20;padding:20px}
.overlay.show{display:flex}.box{background:linear-gradient(#1b4332,#0b2a1c);border:1px solid #2d6a4f;border-radius:20px;padding:22px 18px;text-align:center;max-width:340px;width:100%;box-shadow:0 20px 50px #000}
.box h2{margin:0 0 8px;font-size:22px}.box p{margin:6px 0;color:#cfe8d8}.box button{font:inherit;font-weight:800;border:0;border-radius:12px;padding:11px 18px;background:linear-gradient(#ffe066,#f4b400);color:#3b2a00;margin-top:10px;cursor:pointer}
.box .seg{display:flex;gap:8px;justify-content:center;margin:10px 0}.box .seg button{background:#2d6a4f;color:#fff;flex:1}.box .seg button.on{background:linear-gradient(#ffe066,#f4b400);color:#3b2a00}
.spin{width:38px;height:38px;border:4px solid #2d6a4f;border-top-color:#ffe066;border-radius:50%;margin:10px auto;animation:rot2 .9s linear infinite}
@keyframes rot2{to{transform:rotate(360deg)}}
.toast{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#000c;color:#fff;padding:8px 14px;border-radius:14px;font-size:13px;z-index:30;animation:fade 3s forwards}
@keyframes fade{0%,70%{opacity:1}100%{opacity:0}}
@media (max-height:640px){.av{width:38px;height:38px}.dice{width:56px;height:56px}.row{min-height:54px;padding:6px 10px}.boardwrap{width:min(100%,calc(100dvh - 250px))}}