/* ---------- تم‌ها ---------- */
:root{
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.009 0.115' numOctaves='4' seed='11'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.09 0 0 0 0 0.03 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  --grain2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.2 0 0 0 0 0.08 0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}
body[data-theme="real"]{
  --bg:#2a1709; --bgdeep:#170c04; --frame:#3f2410; --frame2:#5b3618;
  --felt:#d8b07a; --triA:#5e3014; --triB:#efe0bd; --barbg:#33190a;
  --c0:#f4ead3; --c0b:#c9b890; --c0t:#7e6f4d;
  --c1:#39220f; --c1b:#1c0e04; --c1t:#d9c39e;
  --accent:#e9a83a; --accent2:#ff8c42; --hl:#39d98a; --hlhit:#ff5470;
  --text:#f6ecd9; --muted:#cdb38b; --card:#2c190b; --shadow:rgba(0,0,0,.55);
  --die:#f7f0dc; --die2:#efdfb9; --pip:#241608; --die1:#caa05c; --die1b:#9c7232; --pip1:#2b1505;
}
body[data-theme="classic"]{
  --bg:#1b0f08; --bgdeep:#120a05; --frame:#5e3a1d; --frame2:#7a4c24;
  --felt:#c9a468; --triA:#6e421f; --triB:#f2e0bd; --barbg:#4a2d13;
  --c0:#f6eedc; --c0b:#b8a886; --c0t:#8a7a55;
  --c1:#42291a; --c1b:#241308; --c1t:#d8c3a5;
  --accent:#f3b73c; --accent2:#ff8c42; --hl:#3ddc84; --hlhit:#ff5470;
  --text:#f5ead6; --muted:#cdb795; --card:#2a1a0e; --shadow:rgba(0,0,0,.5);
  --die:#fffdf4; --die2:#e8dfc8; --pip:#21160b; --die1:#5a3a22; --die1b:#33200f; --pip1:#f0e2c8;
}
body[data-theme="night"]{
  --bg:#0a0f1f; --bgdeep:#060912; --frame:#1d2a4a; --frame2:#28396b;
  --felt:#13203c; --triA:#22325c; --triB:#0c1730; --barbg:#0a1226;
  --c0:#f3ecd8; --c0b:#c3b893; --c0t:#8d8260;
  --c1:#8e2433; --c1b:#5b1019; --c1t:#ffd9de;
  --accent:#ffd166; --accent2:#5ad1ff; --hl:#43e6a0; --hlhit:#ff5b7a;
  --text:#eaf0ff; --muted:#9fb0d8; --card:#101a33; --shadow:rgba(0,0,0,.5);
  --die:#f3ecd8; --die2:#d4cbae; --pip:#1a2238; --die1:#8e2433; --die1b:#5b1019; --pip1:#ffe9ec;
}
body[data-theme="emerald"]{
  --bg:#0c1f16; --bgdeep:#071209; --frame:#143626; --frame2:#1c4a34;
  --felt:#15614b; --triA:#0c4435; --triB:#e8d9a8; --barbg:#0a3326;
  --c0:#f4ead0; --c0b:#c9b98c; --c0t:#94855a;
  --c1:#1c1c22; --c1b:#000; --c1t:#cfd2e8;
  --accent:#ffd166; --accent2:#7ef0c2; --hl:#ffe082; --hlhit:#ff6b6b;
  --text:#eefae9; --muted:#a7d4b8; --card:#103326; --shadow:rgba(0,0,0,.5);
  --die:#f4ead0; --die2:#d8caa2; --pip:#123326; --die1:#1c1c22; --die1b:#000; --pip1:#e8e9f5;
}
body[data-theme="neon"]{
  --bg:#0e0a1f; --bgdeep:#070414; --frame:#231a45; --frame2:#33255f;
  --felt:#171033; --triA:#2c1d5e; --triB:#120c2a; --barbg:#0e0824;
  --c0:#27f5e0; --c0b:#0aa394; --c0t:#04443e;
  --c1:#ff3d8c; --c1b:#a8175a; --c1t:#ffe2ee;
  --accent:#f7e35a; --accent2:#9b6bff; --hl:#54ff9f; --hlhit:#ff4d6d;
  --text:#f0ecff; --muted:#a79ad6; --card:#191040; --shadow:rgba(0,0,0,.5);
  --die:#efe9ff; --die2:#c9bdf0; --pip:#231a45; --die1:#ff3d8c; --die1b:#a8175a; --pip1:#fff;
}
/* ---------- پایه ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html,body{height:100%}
body{
  margin:0;font-family:Vazirmatn,'Segoe UI',Tahoma,sans-serif;color:var(--text);
  background:radial-gradient(120% 90% at 50% 0%,var(--bg) 0%,var(--bgdeep) 78%);
  overflow:hidden;user-select:none;-webkit-user-select:none;transition:background .4s;
}
button{font-family:inherit;border:none;cursor:pointer}
.hidden{display:none!important}
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden auto}
.screen.on{display:flex}

/* ---------- صفحه شروع ---------- */
#scr-start{align-items:center;justify-content:flex-start;padding:max(18px,env(safe-area-inset-top)) 18px 30px;gap:13px;text-align:center}
.logo{margin-top:3vh;line-height:1.08}
.logo .dicepair{font-size:42px;letter-spacing:6px;filter:drop-shadow(0 6px 14px var(--shadow))}
.logo h1{
  margin:6px 0 0;font-size:clamp(36px,10.5vw,54px);font-weight:900;letter-spacing:1px;
  background:linear-gradient(160deg,var(--accent) 10%,var(--accent2) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo p{margin:5px 0 0;color:var(--muted);font-size:13.5px}
.namebox{width:min(350px,93%);display:flex;flex-direction:column;gap:9px;margin-top:4px}
.namebox input{
  width:100%;padding:12px 16px;border-radius:14px;border:2px solid var(--frame2);
  background:var(--card);color:var(--text);font-size:16px;text-align:center;outline:none;font-family:inherit;
}
.namebox input:focus{border-color:var(--accent)}
.themes{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:2px;max-width:94%}
.themechip{
  padding:7px 13px;border-radius:999px;background:var(--card);color:var(--muted);
  border:2px solid var(--frame2);font-size:12.5px;font-weight:700;transition:.18s;
}
.themechip.on{background:var(--accent);color:#1b1206;border-color:var(--accent);transform:scale(1.06)}
.modes{width:min(350px,93%);display:flex;flex-direction:column;gap:9px;margin-top:4px}
.modebtn{
  display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:16px;
  background:linear-gradient(150deg,var(--frame2),var(--frame));color:var(--text);
  font-size:15.5px;font-weight:800;box-shadow:0 6px 16px var(--shadow);transition:transform .12s;text-align:right;
}
.modebtn:active{transform:scale(.97)}
.modebtn .ic{font-size:23px}
.modebtn small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.7}
.mhead{width:min(350px,93%);text-align:right;font-size:12px;font-weight:900;color:var(--muted);margin:8px 0 -3px;display:flex;align-items:center;gap:8px}
.mhead::after{content:'';flex:1;height:1px;background:var(--frame2);opacity:.6}
.panel{
  width:min(350px,93%);background:var(--card);border:2px solid var(--frame2);
  border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;
}
#roomCode{font-size:42px;font-weight:900;letter-spacing:12px;color:var(--accent);direction:ltr}
.panel .stat{font-size:12.5px;color:var(--muted);line-height:1.9}
.panel .stat.ok{color:var(--hl);font-weight:800}
#joinCode, #watchCode{
  width:100%;padding:12px;border-radius:12px;border:2px solid var(--frame2);background:var(--bgdeep);
  color:var(--accent);font-size:26px;font-weight:900;letter-spacing:8px;text-align:center;direction:ltr;outline:none;font-family:inherit;
}
.gobtn{padding:12px;border-radius:12px;background:var(--accent);color:#1b1206;font-weight:900;font-size:15.5px}
.gobtn.sec{background:var(--frame2);color:var(--text)}
.netnote{font-size:10.5px;color:var(--muted);line-height:1.9;width:min(350px,93%)}
.qrbox{display:flex;justify-content:center}
.qrbox canvas{background:#fff;border-radius:12px;padding:8px;max-width:78vw;height:auto;image-rendering:pixelated}
.codearea{
  width:100%;min-height:54px;max-height:84px;resize:none;border-radius:10px;border:2px solid var(--frame2);
  background:var(--bgdeep);color:var(--muted);font-size:10px;direction:ltr;text-align:left;padding:8px;outline:none;
  font-family:monospace;word-break:break-all;user-select:text;-webkit-user-select:text;
}
.btnrow{display:flex;gap:8px}
.btnrow .gobtn{flex:1}
.steplab{font-size:12.5px;font-weight:900;color:var(--accent);text-align:right}

/* ---------- اسکنر ---------- */
#scanOverlay{position:fixed;inset:0;z-index:200;background:#000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#scanOverlay.show{display:flex}
#scanVideo{width:100%;max-height:72vh;object-fit:cover}
.scanframe{position:absolute;width:min(64vw,300px);aspect-ratio:1;border:3px solid var(--accent);border-radius:18px;box-shadow:0 0 0 200vmax rgba(0,0,0,.45);pointer-events:none}
#scanHint{position:absolute;top:max(14px,env(safe-area-inset-top));color:#fff;font-size:14px;font-weight:800;background:rgba(0,0,0,.55);padding:8px 16px;border-radius:999px}
#btnScanCancel{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));padding:12px 34px;border-radius:999px;background:#fff;color:#111;font-weight:900;font-size:15px}

/* ---------- صفحه بازی ---------- */
#scr-game{
  padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));gap:7px;
  display:none;overflow:hidden;
}
#scr-game.on{display:grid;grid-template-areas:"pt" "board" "pb" "ctrl";grid-template-rows:auto 1fr auto auto;justify-items:center;align-content:center}
#plateTop{grid-area:pt}#plateBot{grid-area:pb}#boardWrap{grid-area:board}#controls{grid-area:ctrl}
.plate{
  display:flex;align-items:center;gap:9px;padding:6px 12px;border-radius:14px;
  background:var(--card);border:2px solid transparent;min-height:46px;position:relative;
  box-shadow:0 3px 10px var(--shadow);width:100%;max-width:620px;
}
.plate.active{border-color:var(--accent);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 45%,transparent)}
.plate.winner{border-color:var(--hl)}
.pname{font-weight:800;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36vw}
.pinfo{display:flex;gap:10px;margin-inline-start:auto;font-size:12px;color:var(--muted)}
.turnchip{
  position:absolute;top:-9px;inset-inline-end:12px;background:var(--accent);color:#1b1206;
  font-size:10.5px;font-weight:900;padding:2px 9px;border-radius:999px;animation:chipPop .3s;z-index:3;
}
@keyframes chipPop{from{transform:scale(.5);opacity:0}}

/* ---------- تخته ---------- */
#boardWrap{display:flex;gap:5px;align-items:stretch;width:100%;max-width:620px;margin:0 auto;min-height:0}
#board{
  flex:1;position:relative;display:flex;
  background:linear-gradient(160deg,var(--frame2),var(--frame));
  border-radius:16px;padding:8px;box-shadow:0 12px 30px var(--shadow), inset 0 1px 0 rgba(255,255,255,.13), inset 0 -2px 6px rgba(0,0,0,.35);
}
body[data-theme="real"] #board{
  background-image:var(--grain),linear-gradient(160deg,#5b3618,#3a2110 55%,#2c1808);
  border:1px solid #1d0f05;
  box-shadow:0 14px 34px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,220,160,.22), inset 0 -3px 8px rgba(0,0,0,.5);
}
#board.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(3px,2px)}}
#boardInner{
  flex:1;min-width:0;
  background:radial-gradient(140% 110% at 50% 0%, color-mix(in srgb,var(--felt) 100%,#fff 6%) 0%, var(--felt) 60%, color-mix(in srgb,var(--felt) 84%,#000) 100%);
  border-radius:10px;display:flex;flex-direction:column;gap:12px;padding:5px;
  box-shadow:inset 0 4px 16px rgba(0,0,0,.42);
}
body[data-theme="real"] #boardInner{
  background-image:var(--grain2),radial-gradient(140% 110% at 50% 0%, #e2bd88 0%, #d3a972 58%, #b98e57 100%);
  box-shadow:inset 0 5px 18px rgba(60,30,8,.55), inset 0 0 60px rgba(80,45,15,.28);
}
.brow{display:flex;height:clamp(118px,20.5vh,190px);gap:1px;min-height:0}
.pt{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;padding-top:3px;min-width:0}
.pt.bot{flex-direction:column-reverse;padding-top:0;padding-bottom:3px}
.pt::before{
  content:'';position:absolute;inset:0;background:var(--triA);
  clip-path:polygon(2% 0,98% 0,50% 90%);opacity:.95;
}
.pt.alt::before{background:var(--triB)}
.pt.bot::before{clip-path:polygon(2% 100%,98% 100%,50% 10%)}
body[data-theme="real"] .pt::before{
  background:linear-gradient(180deg,#6b3a18 0%,#552a10 70%,#4a230c 100%);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));opacity:1;
}
body[data-theme="real"] .pt.alt::before{background:linear-gradient(180deg,#f4e7c6 0%,#e7d3a4 70%,#d9c08c 100%)}
body[data-theme="real"] .pt.bot::before{background:linear-gradient(0deg,#6b3a18 0%,#552a10 70%,#4a230c 100%)}
body[data-theme="real"] .pt.bot.alt::before{background:linear-gradient(0deg,#f4e7c6 0%,#e7d3a4 70%,#d9c08c 100%)}
.ptnum{position:absolute;font-size:8.5px;color:var(--muted);opacity:.55;font-weight:700;z-index:0}
.pt.top .ptnum{bottom:1px}
.pt.bot .ptnum{top:1px}
/* مهره‌ها */
.chk{
  position:relative;z-index:2;width:var(--chk,88%);max-width:var(--chk,44px);aspect-ratio:1;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb,var(--c0) 100%,#fff 28%) 0%, var(--c0) 42%, color-mix(in srgb,var(--c0) 70%,#000) 100%);
  border:2px solid var(--c0b);
  box-shadow:0 2px 4px rgba(0,0,0,.45), inset 0 -2px 4px rgba(0,0,0,.18);
  margin-top:-2px;
}
.chk::after{content:'';position:absolute;inset:22%;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--c0t) 80%,transparent)}
.chk.c1{
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb,var(--c1) 100%,#fff 30%) 0%, var(--c1) 45%, color-mix(in srgb,var(--c1) 60%,#000) 100%);
  border-color:var(--c1b);
}
.chk.c1::after{border-color:color-mix(in srgb,var(--c1t) 70%,transparent)}
/* مهرهٔ واقعی: شیارهای هم‌مرکز + براقیت عاج/گردو */
body[data-theme="real"] .chk{
  border-width:1px;
  background:
    radial-gradient(circle at 33% 26%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 32%),
    repeating-radial-gradient(circle at 50% 50%, var(--c0) 0 11%, color-mix(in srgb,var(--c0) 86%,#7a6336) 11% 13.5%),
    radial-gradient(circle at 50% 50%, var(--c0) 0%, color-mix(in srgb,var(--c0) 68%,#000) 100%);
  box-shadow:0 2.5px 5px rgba(0,0,0,.5), inset 0 -2.5px 5px rgba(96,70,30,.35), inset 0 1.5px 2px rgba(255,255,255,.5);
}
body[data-theme="real"] .chk::after{border:none;inset:30%;box-shadow:inset 0 0 0 1.5px rgba(122,99,54,.45), inset 0 1px 3px rgba(0,0,0,.18)}
body[data-theme="real"] .chk.c1{
  background:
    radial-gradient(circle at 33% 26%, rgba(255,235,200,.5) 0%, rgba(255,255,255,0) 30%),
    repeating-radial-gradient(circle at 50% 50%, var(--c1) 0 11%, color-mix(in srgb,var(--c1) 70%,#caa05c) 11% 13.5%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--c1) 100%,#fff 14%) 0%, color-mix(in srgb,var(--c1) 55%,#000) 100%);
  box-shadow:0 2.5px 5px rgba(0,0,0,.55), inset 0 -2.5px 5px rgba(0,0,0,.4), inset 0 1.5px 2px rgba(255,220,170,.28);
}
body[data-theme="real"] .chk.c1::after{box-shadow:inset 0 0 0 1.5px rgba(210,180,130,.3), inset 0 1px 3px rgba(0,0,0,.3)}
.chk.mini{width:30px;margin:0}
.chk.counted::before{
  content:attr(data-count);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;color:var(--c0t);z-index:3;
}
.chk.c1.counted::before{color:var(--c1t)}
.chk.seled{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 80%,transparent),0 0 18px var(--accent), 0 2px 4px rgba(0,0,0,.45)!important;
  animation:selPulse 1s infinite alternate;
}
@keyframes selPulse{to{transform:scale(1.08)}}
.pt.can .chk:last-of-type, .barhalf.can .chk:last-of-type{
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent),0 0 10px color-mix(in srgb,var(--accent) 70%,transparent),0 2px 4px rgba(0,0,0,.45);
}
.pt.hl::before{filter:brightness(1.25) saturate(1.2)}
.pt.hl::after{
  content:'';position:absolute;inset:2px;border-radius:8px;z-index:1;pointer-events:none;
  background:color-mix(in srgb,var(--hl) 22%,transparent);
  outline:2.5px solid var(--hl);outline-offset:-2.5px;
  box-shadow:0 0 12px var(--hl);
  animation:hlGlow 1s infinite alternate;will-change:opacity;
}
.pt.hl-hit::after{background:color-mix(in srgb,var(--hlhit) 26%,transparent);outline-color:var(--hlhit)}
@keyframes hlGlow{from{opacity:.6}to{opacity:1}}
.badge{
  position:absolute;z-index:5;background:var(--hl);color:#06281a;font-weight:900;font-size:12px;
  min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:999px;
  padding:0 5px;box-shadow:0 2px 8px rgba(0,0,0,.4);direction:ltr;
}
.pt.hl-hit .badge{background:var(--hlhit);color:#fff}
.badge.combo{outline:2px dashed rgba(255,255,255,.7)}
.pt.top .badge{bottom:-4px}
.pt.bot .badge{top:-4px}
/* بار (زندان) */
.barhalf{
  flex:0 0 9.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(var(--barbg),color-mix(in srgb,var(--barbg) 70%,#000));
  border-radius:6px;box-shadow:inset 0 2px 8px rgba(0,0,0,.5);position:relative;
}
body[data-theme="real"] .barhalf{
  background-image:var(--grain),linear-gradient(#46220c,#2f1505);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.62), inset 0 0 0 1px rgba(120,70,30,.4);
}
.barhalf .chk{width:min(70%,calc(var(--chk,44px)*.85));max-width:none;margin:0}
.barhalf.can{outline:2px solid var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}
.barhalf.selpt{outline:3px solid var(--accent)}
/* سینی مهره‌های خارج‌شده */
#trayCol{flex:0 0 34px;display:flex;flex-direction:column;gap:8px}
.tray{
  flex:1;background:linear-gradient(160deg,var(--frame),color-mix(in srgb,var(--frame) 60%,#000));
  border-radius:10px;display:flex;flex-direction:column-reverse;align-items:center;gap:2px;padding:5px 3px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5);position:relative;
}
body[data-theme="real"] .tray{background-image:var(--grain),linear-gradient(160deg,#46220c,#241003)}
.slab{width:80%;height:6px;border-radius:3px;background:var(--c0);border:1px solid var(--c0b);flex:0 0 auto}
.slab.c1{background:var(--c1);border-color:var(--c1b)}
.tray.hl{outline:3px solid var(--hl);animation:hlGlow 1s infinite alternate;cursor:pointer}
.traylab{position:absolute;top:3px;font-size:11px;font-weight:900;color:var(--muted)}
/* ---------- تاس سه‌بعدی روی تخته ---------- */
/* تاسِ تخت ۲بعدی — فقط همان عددِ افتاده دیده می‌شود، سبک و روان */
#diceWrap{position:absolute;inset:8px;z-index:9;pointer-events:none}
.dwrap{position:absolute;width:var(--ds,44px);height:var(--ds,44px);transition:opacity .25s,filter .25s}
.dwrap.used{opacity:.32;filter:grayscale(.6)}
.dshadow{
  position:absolute;left:9%;top:80%;width:86%;height:24%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.4),transparent 78%);filter:blur(1.5px);
}
.die2d{
  position:absolute;inset:0;border-radius:18%;
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:14%;
  background:linear-gradient(150deg,var(--die),var(--die2));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16), inset 0 2px 5px rgba(255,255,255,.28),
             inset 0 -3px 6px rgba(0,0,0,.22), 0 3px 7px rgba(0,0,0,.4);
  will-change:transform;
}
.die2d .pip{width:62%;height:62%;border-radius:50%;background:var(--pip);place-self:center;box-shadow:inset 0 1.5px 2.5px rgba(0,0,0,.6), 0 .5px 0 rgba(255,255,255,.35)}
.die2d.p1die{background:linear-gradient(150deg,color-mix(in srgb,var(--die1) 100%,#fff 18%),var(--die1) 55%,var(--die1b))}
.die2d.p1die .pip{background:var(--pip1)}
.die2d.six{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16), inset 0 2px 5px rgba(255,255,255,.3),
           0 0 0 2px #ffcf5e, 0 0 16px #ff9b3d, 0 3px 7px rgba(0,0,0,.4)}
/* هالهٔ جفت */
.dblhalo{position:absolute;left:50%;top:42%;width:46%;padding-bottom:46%;height:0;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;z-index:8;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 48%,transparent),transparent 72%);
  animation:dblPulse 1.3s ease-out forwards}
.dblhalo.six{background:radial-gradient(closest-side,rgba(255,120,40,.62),transparent 72%);animation-duration:1.7s}
@keyframes dblPulse{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.7);opacity:0}}
.dbllab{position:absolute;left:50%;top:23%;transform:translate(-50%,-50%);z-index:11;
  font-weight:900;font-size:13.5px;color:#1b1206;background:var(--accent);padding:4px 14px;border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.45);white-space:nowrap;animation:dblLab 1.3s ease-out forwards}
.dbllab.six{background:linear-gradient(90deg,#ff8a3d,#ffd166,#ff8a3d);color:#3a1500;font-size:15px;animation-duration:1.7s}
@keyframes dblLab{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}20%{opacity:1;transform:translate(-50%,-62%) scale(1.08)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-82%) scale(1)}}
/* ردِ حرکت مهره + هالهٔ قرمز */
.movetrail{position:fixed;border-radius:50%;z-index:60;pointer-events:none;box-shadow:0 4px 10px rgba(0,0,0,.55)}
.movehalo{position:fixed;z-index:61;pointer-events:none;border-radius:50%;border:3px solid var(--hlhit);
  box-shadow:0 0 16px var(--hlhit), inset 0 0 10px color-mix(in srgb,var(--hlhit) 50%,transparent);
  animation:moveHalo .8s ease-out forwards}
@keyframes moveHalo{0%{transform:scale(.45);opacity:0}22%{opacity:1}100%{transform:scale(1.55);opacity:0}}
.openlab{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:10;
  font-size:11.5px;font-weight:900;color:#1b1206;background:var(--accent);padding:3px 12px;border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,.4);white-space:nowrap;
}
/* ---------- نوار کنترل ---------- */
#controls{display:flex;gap:7px;align-items:center;justify-content:center;max-width:620px;margin:0 auto;width:100%;flex-wrap:wrap}
.cbtn{
  width:44px;height:44px;border-radius:14px;background:var(--card);color:var(--text);font-size:18px;
  border:2px solid var(--frame2);box-shadow:0 4px 10px var(--shadow);transition:.15s;flex:0 0 auto;
}
.cbtn:disabled{opacity:.35}
.cbtn:not(:disabled):active{transform:scale(.92)}
#btnRoll{
  flex:1;min-width:120px;height:48px;border-radius:16px;font-size:16.5px;font-weight:900;
  background:linear-gradient(150deg,var(--accent),var(--accent2));color:#1b1206;
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 40%,transparent);
}
#btnRoll:disabled{filter:grayscale(.75);opacity:.55}
#btnRoll.pulse{animation:rollPulse 1.1s infinite}
@keyframes rollPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
#emojiBar{
  position:absolute;bottom:74px;left:50%;transform:translate(-50%,16px);
  display:flex;flex-direction:column;gap:7px;width:min(390px,94vw);
  max-height:min(62vh,430px);
  background:var(--card);border:2px solid var(--frame2);border-radius:18px;padding:10px;
  opacity:0;pointer-events:none;transition:.22s;z-index:30;box-shadow:0 16px 40px rgba(0,0,0,.55);
}
#emojiBar.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.chathead{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:900;color:var(--accent);padding:0 2px 6px;
  border-bottom:1.5px solid var(--frame2);
}
.chathead button{
  background:var(--bgdeep);color:var(--text);width:28px;height:28px;border-radius:9px;
  font-size:12px;font-weight:900;border:1.5px solid var(--frame2);
}
#chatLog{
  flex:1;min-height:72px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
  padding:4px 2px;scroll-behavior:smooth;
}
.chatempty{color:var(--muted);font-size:11.5px;text-align:center;margin:auto;opacity:.8}
.cmsg{max-width:84%;display:flex;flex-direction:column;gap:1px;animation:bubIn .22s cubic-bezier(.3,1.4,.5,1)}
.cmsg .who{font-size:9px;font-weight:800;color:var(--muted);padding:0 6px}
.cmsg .txt{
  font-size:12.5px;font-weight:700;line-height:1.8;padding:7px 12px;border-radius:14px 14px 14px 4px;
  background:var(--accent);color:#1b1206;word-break:break-word;
}
.cmsg.me{align-self:flex-start}
.cmsg.opp{align-self:flex-end}
.cmsg.opp .txt{background:var(--bgdeep);color:var(--text);border:1.5px solid var(--frame2);border-radius:14px 14px 4px 14px}
.cmsg.opp .who{text-align:left}
.cmsg .txt.stk{background:none;border:none;font-size:36px;padding:0 6px;line-height:1.2}
/* چتِ تماشاگر — رنگِ متفاوت (بنفش) و وسط‌چین */
.cmsg.viewer{align-self:center}
.cmsg.viewer .txt{background:#5b2a8a;color:#fff;border:1.5px solid #8a5cc7;border-radius:14px}
.cmsg.viewer .who{text-align:center;color:#c9a9ef}
.cbubble.viewer{
  inset-inline-start:50%;transform:translateX(-50%);bottom:auto;top:50%;
  background:#5b2a8a;color:#fff;border:2px solid #8a5cc7;border-radius:16px;
}
.cbubble.viewer.out{opacity:0;transform:translateX(-50%) translateY(-12px)}
/* نشانِ تعداد تماشاگر — گوشهٔ بالا، کوچک تا مزاحمِ بازیکن‌ها نشود */
#viewersBadge{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:14;
  background:rgba(91,42,138,.92);color:#fff;font-size:11px;font-weight:900;
  padding:3px 11px;border-radius:999px;border:1px solid #8a5cc7;
  box-shadow:0 3px 10px rgba(0,0,0,.4);pointer-events:none;white-space:nowrap;
}
#viewersBadge.hidden{display:none}
/* دکمه‌های صدا — حالتِ روشن */
#btnMic.voiceon{background:var(--hl);color:#06281a;border-color:var(--hl)}
#btnSpk.voiceon{background:var(--accent);color:#1b1206;border-color:var(--accent)}
/* فهرستِ تاریخچه */
.histbox{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin:10px 0;width:100%}
.hrow{background:var(--bgdeep);border:1.5px solid var(--frame2);border-radius:12px;padding:9px 12px;text-align:right}
.hrow .hwin{font-weight:900;color:var(--accent);font-size:14px}
.hrow .hsc{font-size:13px;color:var(--text);margin-top:2px}
.hrow .hmeta{font-size:10.5px;color:var(--muted);margin-top:3px}
.hempty{color:var(--muted);font-size:12.5px;text-align:center;padding:18px}
.crow{display:flex;gap:5px;align-items:center;flex:0 0 auto}
#stkRow,#tntRow{overflow-x:auto;justify-content:flex-start;padding-bottom:2px;scrollbar-width:thin}
.stk{background:none;font-size:25px;padding:1px 2px;flex:0 0 auto;transition:transform .12s}
.stk:active{transform:scale(1.35)}
.tnt{
  background:var(--bgdeep);color:var(--text);border:1.5px solid var(--frame2);
  border-radius:999px;font-size:11px;font-weight:800;padding:6px 10px;flex:0 0 auto;white-space:nowrap;
}
.tnt:active{background:var(--accent);color:#1b1206}
#chatIn{
  flex:1;min-width:0;padding:9px 12px;border-radius:999px;border:2px solid var(--frame2);
  background:var(--bgdeep);color:var(--text);font-size:13px;outline:none;font-family:inherit;
}
#chatIn:focus{border-color:var(--accent)}
#btnChatSend{
  width:42px;height:38px;border-radius:999px;background:var(--accent);font-size:17px;flex:0 0 auto;
}
.ubadge{
  position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;border-radius:999px;
  background:var(--hlhit);color:#fff;font-size:10.5px;font-weight:900;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  box-shadow:0 2px 6px rgba(0,0,0,.45);animation:chipPop .25s;
}
.cbubble{
  position:fixed;bottom:140px;inset-inline-start:14px;z-index:92;max-width:72vw;
  background:var(--accent);color:#1b1206;font-size:14.5px;font-weight:800;line-height:1.7;
  padding:10px 16px;border-radius:18px 18px 18px 4px;box-shadow:0 8px 22px rgba(0,0,0,.45);
  animation:bubIn .28s cubic-bezier(.3,1.5,.5,1);transition:opacity .4s,transform .4s;
}
.cbubble.opp{
  bottom:auto;top:104px;inset-inline-start:auto;inset-inline-end:14px;
  background:var(--card);color:var(--text);border:2px solid var(--frame2);
  border-radius:18px 18px 4px 18px;
}
.cbubble.out{opacity:0;transform:translateY(-12px)}
@keyframes bubIn{from{transform:scale(.5);opacity:0}}
.femoji{position:fixed;z-index:90;font-size:44px;animation:femoji 2.3s ease-out forwards;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.femoji.big{font-size:84px;animation-duration:2.8s}
@keyframes femoji{0%{transform:translateY(0) scale(.4);opacity:0}12%{opacity:1;transform:scale(1.2)}100%{transform:translateY(-130px) scale(1);opacity:0}}

/* ---------- حالت افقی (لنداسکیپ) ---------- */
/* عرض ستون کناری در هر دو حالت (چت باز/بسته) یکسان است تا ابعاد تخته هرگز تغییر نکند */
body.land{--side:clamp(118px,17vw,166px)}
body.land #scr-game.on{
  grid-template-areas:"board pt" "board pb" "board ctrl";
  grid-template-columns:minmax(0,1fr) var(--side);
  grid-template-rows:auto auto minmax(0,1fr);
  align-content:stretch;align-items:start;gap:6px;
  height:100%;overflow:hidden;padding:6px;
}
body.land .plate{max-width:none;width:100%;flex-direction:column;align-items:flex-start;gap:3px;min-height:0;padding:5px 8px;border-radius:11px}
body.land .pname{max-width:100%;font-size:11.5px}
body.land .pinfo{font-size:9px;gap:5px;margin-inline-start:0;width:100%;flex-wrap:wrap}
body.land .chk.mini{width:16px}
body.land .turnchip{font-size:8.5px;padding:1px 7px;top:-7px}
body.land #boardWrap{height:100%;max-width:none;min-height:0}
body.land .brow{height:auto;flex:1;min-height:0}
body.land #controls{
  align-self:stretch;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:5px;align-content:start;
  width:100%;margin:0;padding-bottom:2px;
}
body.land #btnRoll{grid-column:1/-1;min-width:0;height:38px;font-size:13px;border-radius:11px}
body.land .cbtn{width:100%;height:30px;font-size:13px;border-radius:9px;border-width:1.5px;box-shadow:none}

/* چت باز: ستون کناری همان عرض را دارد؛ فقط محتوای داخلش فشرده می‌شود → تخته جابه‌جا نمی‌شود */
body.land.chatopen #scr-game.on{
  grid-template-areas:"board pt" "board pb" "board chat" "board ctrl";
  grid-template-columns:minmax(0,1fr) var(--side);
  grid-template-rows:auto auto minmax(0,1fr) auto;
}
body.land.chatopen .plate{flex-direction:row;align-items:center;gap:6px;padding:3px 7px;border-radius:9px}
body.land.chatopen .pname{font-size:10px}
body.land.chatopen .plate .pinfo{display:none}      /* فید امتیاز در حالت چت مخفی می‌شود تا جا باز شود */
body.land.chatopen .plate .chk.mini{width:14px}
body.land.chatopen #controls{
  grid-template-columns:repeat(6,1fr);gap:3px;overflow:visible;padding-bottom:0;
}
body.land.chatopen #btnRoll{grid-column:1/-1;height:30px;font-size:11.5px}
body.land.chatopen .cbtn{height:26px;font-size:11.5px;border-radius:7px}
body.land #emojiBar.show{
  position:static;grid-area:chat;left:auto;bottom:auto;transform:none;
  width:100%;height:100%;max-height:none;min-height:0;margin:0;
  border-radius:13px;padding:7px;box-shadow:0 6px 18px rgba(0,0,0,.4);
}
body.land #emojiBar.show .chathead{font-size:11px;padding-bottom:4px}
body.land #emojiBar.show #chatLog{min-height:30px}
body.land #emojiBar.show .cmsg .txt{font-size:11px;padding:5px 9px}
body.land #emojiBar.show .cmsg .txt.stk{font-size:26px}
body.land #emojiBar.show .tnt{font-size:9.5px;padding:4px 7px}
body.land #emojiBar.show .stk{font-size:20px}
body.land #emojiBar.show #chatIn{font-size:11px;padding:6px 9px}
body.land #emojiBar.show #btnChatSend{width:34px;height:31px;font-size:13px}
body.land #toast{bottom:14px}

/* ---------- پاپ‌آپ تاسِ وسط صفحه ---------- */
#rollPop{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);
  z-index:40;display:none;flex-direction:column;align-items:center;gap:9px;
  pointer-events:none;opacity:0;transition:opacity .25s, transform .25s;
}
#rollPop.show{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
#rollPop .rptxt{
  font-size:13px;font-weight:900;color:var(--text);background:rgba(12,8,4,.78);
  padding:5px 16px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.45);white-space:nowrap;
}
#rollPopBtn{
  width:96px;height:96px;border-radius:26px;font-size:42px;
  background:linear-gradient(150deg,var(--accent),var(--accent2));color:#1b1206;
  box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 55%,transparent),inset 0 2px 4px rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;animation:rollPopPulse 1.15s infinite;
}
#rollPopBtn:active{transform:scale(.92)}
@keyframes rollPopPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* چرخش اجباری وقتی قفل جهت ممکن نیست */
body.forceland #scr-game{
  position:fixed;top:0;left:100vw;width:100vh;height:100vw;
  transform:rotate(90deg);transform-origin:top left;
}

/* ---------- جلوهٔ زدن مهره: نورِ خفن ---------- */
body.flashfx::after{
  content:'';position:fixed;inset:0;z-index:60;pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(255,236,170,.55) 0%, rgba(255,170,60,.2) 35%, transparent 70%);
  animation:flashfx .65s ease-out forwards;
}
@keyframes flashfx{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.burst{position:fixed;z-index:70;width:0;height:0;pointer-events:none}
.burst::before{
  content:'';position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 0 30px 18px var(--accent),0 0 70px 38px var(--accent2);
  animation:burstCore .8s ease-out forwards;
}
@keyframes burstCore{0%{transform:scale(.3);opacity:1}100%{transform:scale(4.5);opacity:0}}
.burst i{
  position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px 2px var(--accent);
  animation:spark .8s ease-out forwards;
}
@keyframes spark{0%{transform:translate(0,0) scale(1.4);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.1);opacity:0}}
.conf{position:fixed;top:-12px;width:9px;height:14px;z-index:95;border-radius:2px;animation:confFall linear forwards;pointer-events:none}
@keyframes confFall{to{transform:translateY(110vh) rotate(720deg)}}
/* ---------- توست و اورلی‌ها ---------- */
#toast{
  position:fixed;bottom:84px;left:50%;transform:translate(-50%,16px);z-index:80;
  background:rgba(12,8,4,.92);color:var(--text);padding:10px 20px;border-radius:999px;
  font-size:14px;font-weight:700;opacity:0;transition:.25s;pointer-events:none;
  border:1px solid var(--frame2);max-width:88vw;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
.overlay{
  position:fixed;inset:0;z-index:100;background:rgba(8,4,2,.78);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.25s;padding:18px;
}
.overlay.show{opacity:1;pointer-events:auto}
.card{
  width:min(360px,94%);background:var(--card);border:2px solid var(--frame2);border-radius:22px;
  padding:24px 20px;text-align:center;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);max-height:84vh;overflow:auto;
}
#winTitle{font-size:24px;font-weight:900;margin:0;color:var(--accent)}
#winKind{font-size:17px;font-weight:800;color:var(--hl)}
#winScore{color:var(--muted);font-size:14px}
.rulestext{text-align:right;font-size:13.5px;line-height:2.1;color:var(--text)}
.rulestext b{color:var(--accent)}
h3.rt{margin:0;color:var(--accent);font-size:18px}