/* ===== تخته نرد — استایل ===== */
:root{
  --bg:#0d1016;
  --bg2:#151a23;
  --panel:#1a2030;
  --line:#2b3346;
  --txt:#e9edf5;
  --muted:#93a0b8;
  --gold:#e6b854;
  --green:#39c07a;
  --red:#e2574c;

  --frame1:#6b4425;
  --frame2:#3d2413;
  --pt-a:#d8b98d;
  --pt-b:#95552f;
  --bar-bg:#2c1a0f;

  --barw:7.2%;
  --trayw:7.6%;
  --ch:22px;
  --radius:16px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:'Vazirmatn',Tahoma,'Segoe UI',system-ui,sans-serif;
  background:
    radial-gradient(1100px 600px at 50% -10%, #1d2637 0%, transparent 60%),
    linear-gradient(180deg,var(--bg) 0%, #090b10 100%);
  color:var(--txt);
  overscroll-behavior:none;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}

.app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:calc(env(safe-area-inset-top) + 8px) 10px calc(env(safe-area-inset-bottom) + 10px);
  max-width:1000px;
  margin:0 auto;
  width:100%;
}

/* ---------- نوار بالا ---------- */
.topbar{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#1b2231,#141a26);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 12px;
}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.02rem}
.brand .logo{
  font-size:1.3rem;color:var(--gold);
  filter:drop-shadow(0 0 8px rgba(230,184,84,.45));
}
.scores{display:flex;gap:8px;margin-inline-start:auto}
.sc{
  display:flex;align-items:center;gap:6px;
  background:#111726;border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;font-size:.82rem;
  transition:.25s;
}
.sc.active{
  border-color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(230,184,84,.25), 0 0 14px rgba(230,184,84,.18);
}
.sc .lbl{color:var(--muted)}
.sc b{color:var(--gold);font-size:.95rem}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.4);flex:0 0 auto}
.dot.w{background:radial-gradient(circle at 35% 30%,#fff,#cfc7b8)}
.dot.b{background:radial-gradient(circle at 35% 30%,#5b606c,#14161c)}

.icon-btn{
  background:#111726;border:1px solid var(--line);color:var(--txt);
  width:38px;height:38px;border-radius:12px;font-size:1.1rem;cursor:pointer;
  flex:0 0 auto;
}
.icon-btn:active{transform:scale(.94)}

/* ---------- وضعیت ---------- */
.status{
  text-align:center;font-size:.9rem;color:var(--muted);
  background:rgba(18,23,34,.6);border:1px solid var(--line);
  border-radius:12px;padding:8px 12px;min-height:38px;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.status.hl{color:var(--gold);border-color:rgba(230,184,84,.4)}
.status.bad{color:var(--red);border-color:rgba(226,87,76,.4)}

/* ---------- تخته ---------- */
.board-area{
  flex:1;display:grid;place-items:center;min-height:0;
  padding:2px 0;width:100%;position:relative;
  --aw:320px;--ah:320px;
}
.board-frame{
  width:min(var(--aw), calc(var(--ah) * 1.28));
  padding:2.2%;
  border-radius:18px;
  background:linear-gradient(160deg,var(--frame1),var(--frame2));
  box-shadow:0 18px 40px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.07);
}
.board{
  direction:ltr;
  aspect-ratio:1.3;
  width:100%;
  display:grid;
  grid-template-columns:repeat(6,1fr) var(--barw) repeat(6,1fr) var(--trayw);
  grid-template-rows:1fr 1fr;
  background:linear-gradient(180deg,#24333d,#182530);
  border-radius:8px;
  overflow:hidden;
  box-shadow:inset 0 0 30px rgba(0,0,0,.65);
  position:relative;
}

/* در گوشی عمودی، تخته ۹۰ درجه می‌چرخد تا بزرگ‌تر دیده شود */
.board-area.rot .board-frame{
  position:absolute;top:50%;left:50%;
  width:min(var(--ah), calc(var(--aw) * 1.28));
  transform:translate(-50%,-50%) rotate(90deg);
}
.board-area.rot .off-lbl{display:none}
.board-area.rot .checker .n{transform:rotate(-90deg)}

.point{position:relative}
.point::before{
  content:"";position:absolute;inset:0;
  background:var(--pc);
  opacity:.94;
}
.point.top::before{clip-path:polygon(4% 0,96% 0,50% 96%)}
.point.bot::before{clip-path:polygon(4% 100%,96% 100%,50% 4%)}
.point.a{--pc:linear-gradient(180deg,var(--pt-a),#b7935f)}
.point.b{--pc:linear-gradient(180deg,var(--pt-b),#6d3d1f)}
.point.bot.a{--pc:linear-gradient(0deg,var(--pt-a),#b7935f)}
.point.bot.b{--pc:linear-gradient(0deg,var(--pt-b),#6d3d1f)}

.point.src,.point.tgt,.bar.src,.tray.tgt{cursor:pointer}
.point.src::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 2px rgba(230,184,84,.5);
  pointer-events:none;
}
.point.tgt::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(230,184,84,.18), transparent 70%);
  pointer-events:none;
}
.point.sel::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 3px var(--gold);
  background:rgba(230,184,84,.10);
  pointer-events:none;
}

/* مهره‌ها */
.checker{
  position:absolute;left:50%;
  width:var(--ch);height:var(--ch);border-radius:50%;
  transform:translateX(-50%);
  box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 -2px 4px rgba(0,0,0,.28), inset 0 2px 3px rgba(255,255,255,.3);
  z-index:2;
}
.point.top .checker,.bar.top .checker{top:calc(var(--i) * var(--step))}
.point.bot .checker,.bar.bot .checker{bottom:calc(var(--i) * var(--step))}
.checker.w{
  background:radial-gradient(circle at 34% 28%,#ffffff,#efe8d9 45%,#c9c0ae);
  border:1px solid rgba(120,110,90,.55);
}
.checker.b{
  background:radial-gradient(circle at 34% 28%,#6b7180,#33383f 45%,#15171c);
  border:1px solid rgba(0,0,0,.7);
}
.checker .ring{position:absolute;inset:22%;border-radius:50%;border:1px solid rgba(0,0,0,.16)}
.checker.b .ring{border-color:rgba(255,255,255,.10)}
.checker .n{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:calc(var(--ch) * .46);font-weight:800;color:#20242b;
}
.checker.b .n{color:#f2f4f8}
.checker.pop{animation:pop .3s ease-out}
@keyframes pop{
  from{transform:translateX(-50%) scale(.45);opacity:.25}
  to{transform:translateX(-50%) scale(1);opacity:1}
}

.ghost{
  position:absolute;left:50%;width:var(--ch);height:var(--ch);border-radius:50%;
  transform:translateX(-50%);
  border:2px dashed var(--gold);
  background:rgba(230,184,84,.2);
  z-index:3;animation:blink 1.1s ease-in-out infinite;pointer-events:none;
}
.point.top .ghost,.bar.top .ghost{top:calc(var(--i) * var(--step))}
.point.bot .ghost,.bar.bot .ghost{bottom:calc(var(--i) * var(--step))}
@keyframes blink{0%,100%{opacity:.45}50%{opacity:1}}

/* میله وسط */
.bar{
  background:linear-gradient(90deg,#1b1109,var(--bar-bg),#1b1109);
  position:relative;
  box-shadow:inset 0 0 18px rgba(0,0,0,.7);
  border-inline:2px solid rgba(0,0,0,.5);
}
.bar.src::after,.bar.sel::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 3px var(--gold);pointer-events:none;
}

/* سینی خروج */
.tray{
  background:linear-gradient(180deg,#1d150e,#120c07);
  border-inline-start:2px solid rgba(0,0,0,.5);
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:5% 12% 13%;gap:1%;
}
.tray.bot{flex-direction:column-reverse;padding:13% 12% 5%}
.tray .off-piece{
  width:100%;height:4%;min-height:3px;border-radius:3px;flex:0 0 auto;
  box-shadow:0 1px 2px rgba(0,0,0,.6);
}
.tray .off-piece.w{background:linear-gradient(180deg,#fff,#c9c0ae)}
.tray .off-piece.b{background:linear-gradient(180deg,#6b7180,#15171c)}
.tray .off-lbl{
  position:absolute;inset-inline:0;text-align:center;
  font-size:.6rem;color:#c9a86a;opacity:.85;
}
.tray.top .off-lbl{bottom:3%}
.tray.bot .off-lbl{top:3%}
.tray.tgt{box-shadow:inset 0 0 0 3px var(--gold)}

/* ---------- داشبورد پایین ---------- */
.dock{
  background:linear-gradient(180deg,#1b2231,#141a26);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px;
  display:flex;flex-direction:column;gap:10px;
}
.dice-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pipbox{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px}
.pipbox .pl{font-size:.66rem;color:var(--muted)}
.pipbox b{font-size:.95rem;color:var(--txt)}

.dice{display:flex;gap:8px;align-items:center;justify-content:center;min-height:44px;flex:1}
.die{
  position:relative;
  width:40px;height:40px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(160deg,#fdfbf5,#ded6c4);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:5px;
  box-shadow:0 3px 8px rgba(0,0,0,.5), inset 0 -2px 4px rgba(0,0,0,.16);
  transition:opacity .25s, transform .25s;
}
.die.dark{background:linear-gradient(160deg,#4a5060,#1b1e25)}
.die .pip{display:grid;place-items:center}
.die .pip i{width:64%;height:64%;border-radius:50%;background:#22262e;display:block}
.die.dark .pip i{background:#f0efe9}
.die.used{opacity:.28;transform:scale(.84)}
.die.dead{opacity:.3;filter:grayscale(1) contrast(.7)}
.die.rolling{animation:shake .45s ease-in-out}
@keyframes shake{
  0%{transform:rotate(0) translateY(0)}
  25%{transform:rotate(-18deg) translateY(-9px)}
  50%{transform:rotate(15deg) translateY(3px)}
  75%{transform:rotate(-8deg) translateY(-4px)}
  100%{transform:rotate(0) translateY(0)}
}

.actions{display:flex;gap:8px}
.btn{
  flex:1;min-height:46px;border-radius:13px;cursor:pointer;
  border:1px solid var(--line);background:#111726;color:var(--txt);
  font-family:inherit;font-size:.92rem;font-weight:600;
  transition:transform .12s, filter .2s, opacity .2s;
}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.primary{
  background:linear-gradient(180deg,#e6b854,#c1902f);
  border-color:#a87d24;color:#241a06;
}
.btn.primary:disabled{filter:grayscale(.6)}

/* ---------- مودال ---------- */
.modal{
  position:fixed;inset:0;z-index:50;
  background:rgba(4,6,10,.72);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  padding:12px;
}
.modal[hidden]{display:none}
.sheet{
  width:100%;max-width:520px;max-height:86dvh;overflow:auto;
  background:linear-gradient(180deg,#1c2333,#131926);
  border:1px solid var(--line);border-radius:20px;padding:16px;
  animation:up .28s ease-out;
}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.sheet h2{margin:0 0 14px;font-size:1.05rem}
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px}
.seg{display:flex;gap:6px;background:#0e1420;border:1px solid var(--line);border-radius:12px;padding:4px}
.seg button{
  flex:1;min-height:38px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);font-family:inherit;font-size:.82rem;cursor:pointer;
}
.seg button.on{background:linear-gradient(180deg,#e6b854,#c1902f);color:#241a06;font-weight:700}
.rules{background:#0e1420;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:14px}
.rules h3{margin:2px 0 8px;font-size:.86rem;color:var(--gold)}
.rules ul{margin:0;padding-inline-start:18px;color:var(--muted);font-size:.78rem;line-height:1.9}
.sheet-actions{display:flex;gap:8px}

/* ---------- پایان بازی ---------- */
.overlay{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(4,6,10,.78);backdrop-filter:blur(8px);padding:16px;
}
.overlay[hidden]{display:none}
.win-card{
  text-align:center;background:linear-gradient(180deg,#1c2333,#131926);
  border:1px solid rgba(230,184,84,.4);border-radius:22px;padding:26px 28px;
  box-shadow:0 0 60px rgba(230,184,84,.18);animation:up .3s ease-out;
}
.win-emoji{font-size:3rem;margin-bottom:6px}
.win-card h2{margin:0 0 6px;font-size:1.25rem;color:var(--gold)}
.win-card p{margin:0 0 18px;color:var(--muted);font-size:.9rem}

/* ---------- پیام ---------- */
.toast{
  position:fixed;bottom:calc(env(safe-area-inset-bottom) + 100px);
  inset-inline:0;margin:0 auto;width:max-content;max-width:88vw;
  background:rgba(13,20,32,.95);border:1px solid var(--line);color:var(--txt);
  padding:9px 16px;border-radius:999px;font-size:.84rem;z-index:70;
  animation:up .2s ease-out;text-align:center;
}
.toast[hidden]{display:none}

/* ---------- واکنش‌گرا ---------- */
@media (max-width:430px){
  .brand span:last-child{display:none}
  .sc .lbl{display:none}
  .die{width:34px;height:34px;border-radius:8px}
  .pipbox{min-width:50px}
  .btn{font-size:.8rem;min-height:44px}
  .status{font-size:.8rem;padding:7px 8px}
  .board-frame{width:100%}
}
@media (orientation:landscape) and (max-height:600px){
  .app{max-width:none;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:6px}
  .topbar{width:100%}
  .status{order:5;width:100%;margin-top:0}
  .board-area{flex:1 1 58%;min-width:0}
  .board-frame{width:min(100%, calc((100dvh - 130px) * 1.3))}
  .dock{flex:1 1 34%;min-width:220px}
  .actions{flex-direction:column}
  .toast{bottom:12px}
}