/* About God — Dynamic Order v1.2.1 */
.agdo{
  --night:#141b3d; --night2:#1a2250; --well:#0c1331;
  --text:#eceff8; --muted:#9ea8cf; --faint:rgba(221,226,238,.09);
  --gold:#f0b44c;
  --c1:#f0b44c; --c2:#ee8fb4; --c3:#72c6ec;
  --ui:"Vazirmatn",Tahoma,"Segoe UI",Arial,sans-serif;
  --serif:"Noto Naskh Arabic","Vazirmatn",Tahoma,serif;
  width:100%;max-width:100%;min-width:0;direction:rtl;
  font-family:var(--ui);line-height:1.8;color:var(--text);
}
.agdo *,.agdo *::before,.agdo *::after{box-sizing:border-box}
.agdo [hidden]{display:none!important}

.agdo__stage{
  width:100%;overflow:hidden;overflow:clip;
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(240,180,76,.07),transparent 60%),
    linear-gradient(180deg,var(--night2),var(--night));
  border:1px solid var(--faint);border-radius:26px;
  padding:clamp(16px,3vw,32px);
}

/* Heading */
.agdo__head{max-width:40em;margin:0 auto 22px;text-align:center}
.agdo .agdo__title{
  margin:0 0 6px;color:var(--text);
  font:700 clamp(26px,4.2vw,40px)/1.45 var(--serif);letter-spacing:0;
}
.agdo .agdo__lede{margin:0;color:var(--muted);font:400 clamp(14px,1.6vw,16px)/1.95 var(--ui)}

/* Rules: a genuine 3-step sequence */
.agdo .agdo__rules{
  list-style:none;margin:0 0 22px;padding:0;counter-reset:rule;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-block:1px solid var(--faint);
}
.agdo__rule{
  counter-increment:rule;position:relative;
  display:flex;gap:12px;align-items:center;padding:14px 16px;margin:0;
}
.agdo__rule + .agdo__rule{border-inline-start:1px solid var(--faint)}
.agdo__rule::before{
  content:counter(rule,persian);position:absolute;top:10px;inset-inline-end:14px;
  color:rgba(240,180,76,.55);font:700 13px var(--ui);
}
.agdo__ruleart{flex:0 0 58px;width:58px;height:50px;color:var(--text)}
.agdo__rule b{display:block;color:var(--text);font:700 15px/1.6 var(--ui)}
.agdo__rule span{display:block;color:var(--muted);font:400 13px/1.8 var(--ui)}

/* Comparison */
.agdo__compare{
  display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);
  gap:14px;align-items:stretch;
}
.agdo .agdo__panel{margin:0;min-width:0;display:flex;flex-direction:column}
.agdo__paneltitle{padding:0 4px 8px;display:flex;flex-direction:column;gap:0}
.agdo__paneltitle b{color:var(--text);font:700 16px/1.6 var(--ui)}
.agdo__paneltitle span{color:var(--muted);font:400 12.5px/1.7 var(--ui)}
.agdo__panel--law .agdo__paneltitle b{color:var(--gold)}
.agdo__canvaswrap{
  position:relative;width:100%;aspect-ratio:1/.93;
  border-radius:18px;overflow:hidden;background:var(--well);
  border:1px solid var(--faint);
}
.agdo__panel--law .agdo__canvaswrap{border-color:rgba(240,180,76,.28);box-shadow:0 0 0 4px rgba(240,180,76,.05)}
.agdo__canvas{position:absolute;inset:0;display:block;width:100%;height:100%}

/* Die column */
.agdo__dice{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:34px 4px 0;min-width:0;text-align:center;
}
.agdo__dicehead{color:var(--muted);font:500 12px var(--ui)}
.agdo__die{
  --c:rgba(221,226,238,.35);
  width:74px;height:74px;border-radius:18px;padding:12px;
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);
  background:linear-gradient(160deg,#f7f3ea,#dcd6c8);
  box-shadow:0 10px 22px rgba(0,0,0,.35),inset 0 -3px 0 rgba(0,0,0,.12);
  transition:box-shadow .25s ease;
}
.agdo__die i{display:block;width:13px;height:13px;border-radius:50%;background:var(--c);place-self:center;opacity:0}
.agdo__die[data-face="0"]{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(221,226,238,.18)}
.agdo__die[data-face="1"] i:nth-child(1){grid-area:2/2;opacity:1}
.agdo__die[data-face="2"] i:nth-child(1){grid-area:1/1;opacity:1}
.agdo__die[data-face="2"] i:nth-child(2){grid-area:3/3;opacity:1}
.agdo__die[data-face="3"] i:nth-child(1){grid-area:1/1;opacity:1}
.agdo__die[data-face="3"] i:nth-child(2){grid-area:2/2;opacity:1}
.agdo__die[data-face="3"] i:nth-child(3){grid-area:3/3;opacity:1}
.agdo__die.is-rolling{animation:agdo-roll .34s ease-out}
@keyframes agdo-roll{0%{transform:rotate(-22deg) scale(.86)}60%{transform:rotate(8deg) scale(1.05)}100%{transform:none}}
.agdo__pickline{min-height:3.4em;color:var(--text);font:500 13px/1.7 var(--ui)}
.agdo__pickline b{color:var(--c,var(--gold))}

.agdo__counts{display:grid;gap:7px;width:100%;padding:0 6px}
.agdo__countrow{display:grid;grid-template-columns:20px 1fr 38px;gap:7px;align-items:center}
.agdo__dot{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--c);color:#161b33;font:700 11px/1 var(--ui);
}
.agdo__bar{height:6px;background:rgba(221,226,238,.10);border-radius:99px;overflow:hidden}
.agdo__bar i{display:block;height:100%;width:0;background:var(--c);border-radius:99px;transition:width .2s ease}
.agdo__pct{color:var(--muted);font:500 12px var(--ui);text-align:start}
.agdo .agdo__fair{margin:4px 0 0;padding:0 6px;color:var(--muted);font:400 11.5px/1.8 var(--ui)}

/* Caption */
.agdo .agdo__caption{
  margin:18px auto 0;max-width:46em;min-height:3.8em;text-align:center;
  color:var(--text);font:500 clamp(14.5px,1.7vw,16.5px)/1.95 var(--ui);
}
.agdo__caption b{color:var(--gold)}

/* Controls */
.agdo__controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:14px}
.agdo .agdo__button{
  appearance:none;cursor:pointer;margin:0;
  border:1px solid rgba(221,226,238,.18);background:rgba(255,255,255,.05);color:var(--text);
  border-radius:14px;padding:11px 18px;font:600 14px/1.4 var(--ui);
  transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.agdo .agdo__button:hover{background:rgba(255,255,255,.10)}
.agdo .agdo__button:active{transform:translateY(1px)}
.agdo .agdo__button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.agdo .agdo__button--primary{background:var(--gold);border-color:var(--gold);color:#271c06;font-weight:700}
.agdo .agdo__button--primary:hover{background:#f5c46a}
.agdo .agdo__button--run.is-on{border-color:var(--gold);color:var(--gold)}
.agdo .agdo__button--ghost{border-color:transparent;background:transparent;color:var(--muted)}
.agdo .agdo__button:disabled{opacity:.45;cursor:default}
.agdo__counter{color:var(--muted);font:400 13px var(--ui);padding-inline-start:6px}
.agdo__counter b{color:var(--text);font:700 15px var(--ui)}

/* Timeline */
.agdo__timeline{margin-top:22px}
.agdo__track{height:3px;border-radius:9px;background:var(--faint);overflow:hidden}
.agdo__track i{display:block;height:100%;width:0;background:linear-gradient(270deg,var(--c1),var(--c2),var(--c3));transition:width .25s ease}
.agdo .agdo__milestones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.agdo__milestone{margin:0;padding:12px 8px 0;text-align:center;color:var(--muted);font:400 12.5px/1.7 var(--ui);position:relative;transition:color .2s ease}
.agdo__milestone::before{
  content:"";position:absolute;top:-7px;left:50%;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;background:var(--night);border:2px solid rgba(221,226,238,.25);transition:.2s ease;
}
.agdo__milestone b{display:block;color:var(--text);font:700 13.5px/1.6 var(--ui);opacity:.6}
.agdo__milestone.is-active{color:var(--text)}
.agdo__milestone.is-active b{opacity:1;color:var(--gold)}
.agdo__milestone.is-active::before{background:var(--gold);border-color:var(--gold)}

/* Insight */
.agdo__insight{
  margin:26px auto 4px;max-width:40em;text-align:center;
  padding-top:22px;border-top:1px solid rgba(240,180,76,.25);
  animation:agdo-in .7s ease-out both;
}
.agdo .agdo__insightq{margin:0 0 10px;color:var(--text);font:700 clamp(18px,2.4vw,23px)/1.9 var(--serif)}
.agdo .agdo__insighta{margin:0;color:var(--muted);font:400 14px/1.95 var(--ui)}
@keyframes agdo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Responsive */
@media (max-width:900px){
  .agdo .agdo__rules{grid-template-columns:1fr}
  .agdo__rule + .agdo__rule{border-inline-start:0;border-top:1px solid var(--faint)}
  .agdo__compare{grid-template-columns:1fr;gap:16px}
  .agdo__dice{
    order:-2;padding:0;display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"die line" "die counts" "fair fair";column-gap:16px;row-gap:6px;
    text-align:start;align-items:center;
  }
  .agdo__panel--law{order:-1}
  .agdo__dicehead{display:none}
  .agdo__die{grid-area:die;width:64px;height:64px;padding:10px}
  .agdo__die i{width:11px;height:11px}
  .agdo__pickline{grid-area:line;min-height:0}
  .agdo__counts{grid-area:counts;padding:0}
  .agdo .agdo__fair{grid-area:fair;padding:0}
  /* keep the buttons in reach while the canvases scroll past */
  .agdo__controls{
    position:sticky;bottom:max(10px,env(safe-area-inset-bottom,0px));z-index:3;
    padding:10px;border-radius:18px;border:1px solid var(--faint);
    background:rgba(22,29,66,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
}
@media (max-width:560px){
  .agdo__controls{gap:8px}
  .agdo__controls .agdo__button{flex:1 1 calc(50% - 8px);padding:10px 12px}
  .agdo__controls .agdo__button--ghost{flex:0 0 auto}
  .agdo__counter{flex:0 0 auto;padding:0 4px}
  .agdo .agdo__milestones{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:6px}
  .agdo__milestone::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .agdo *{animation:none!important;transition:none!important}
}