:root{
  --wood-deep:#211610;
  --wood:#2E2015;
  --wood-card:#372718;
  --wood-line:#4A3521;
  --bone:#EBDFC6;
  --bone-dim:#B7A585;
  --lacquer:#C8452C;
  --lacquer-deep:#8F2E1D;
  --brass:#CE9E4E;
  --sq-light:#D9C7A0;
  --sq-dark:#6E4B2E;
  --font-display:'Alegreya','Amiri',Georgia,serif;
  --font-body:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
  --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--wood-deep);color:var(--bone);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background:radial-gradient(1200px 600px at 80% -10%, rgba(206,158,78,.07), transparent 60%),
             radial-gradient(900px 500px at 10% 110%, rgba(200,69,44,.06), transparent 60%);}
main,header,footer{position:relative;z-index:1}
a{color:var(--brass)}
::selection{background:var(--lacquer);color:var(--bone)}
button{font-family:inherit}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:var(--maxw);margin:0 auto;padding:1.1rem 1.5rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--bone);cursor:pointer;background:none;border:none;padding:0}
.logo-mark{width:38px;height:38px;border-radius:8px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;overflow:hidden;border:2px solid var(--brass);flex:none}
.logo-mark span:nth-child(1),.logo-mark span:nth-child(4){background:var(--sq-dark)}
.logo-mark span:nth-child(2),.logo-mark span:nth-child(3){background:var(--sq-light)}
.logo-name{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:.01em}
.logo-name em{font-style:normal;color:var(--lacquer)}
.langs{display:flex;gap:.35rem;flex-wrap:wrap}
.langs button{font-size:.8rem;font-weight:600;letter-spacing:.06em;background:transparent;color:var(--bone-dim);border:1px solid var(--wood-line);padding:.4rem .7rem;border-radius:999px;cursor:pointer;transition:all .15s}
.langs button:hover{color:var(--bone);border-color:var(--brass)}
.langs button.on{background:var(--lacquer);border-color:var(--lacquer);color:var(--bone)}
.langs button:focus-visible,.btn:focus-visible,.gsq:focus-visible,.tab:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.45rem;border-radius:10px;padding:.6rem 1.1rem;font-weight:600;font-size:.92rem;cursor:pointer;border:1px solid var(--wood-line);background:var(--wood-card);color:var(--bone);transition:all .15s}
.btn:hover{border-color:var(--brass)}
.btn.primary{background:var(--lacquer);border-color:var(--lacquer)}
.btn.primary:hover{background:#D9573C}
.btn.sm{padding:.4rem .8rem;font-size:.82rem}

/* ---------- hero ---------- */
.hero{max-width:var(--maxw);margin:0 auto;padding:3.2rem 1.5rem 4rem;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.hero-eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:1rem}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.05;margin-bottom:1.2rem}
.hero h1 .red{color:var(--lacquer)}
.hero p{color:var(--bone-dim);max-width:34rem;font-size:1.06rem;margin-bottom:1.6rem}
.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.8rem}
.hero-stats{display:flex;gap:2.2rem;flex-wrap:wrap}
.hstat b{font-family:var(--font-display);font-size:1.7rem;font-weight:800;display:block;line-height:1.1}
.hstat span{font-size:.8rem;color:var(--bone-dim)}
.hero-board-wrap{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.hero-caption{font-size:.78rem;color:var(--bone-dim);text-align:center}

.board-frame{background:linear-gradient(145deg,#5A3E24,#3B2917);padding:12px;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(235,223,198,.15)}
.board{display:grid;position:relative;border-radius:4px;overflow:hidden}
.sq{width:100%;height:100%}
.sq.l{background:var(--sq-light)}
.sq.d{background:var(--sq-dark)}
#heroBoard{width:min(380px,86vw);aspect-ratio:1;grid-template-columns:repeat(8,1fr);cursor:pointer}
.hpiece{position:absolute;width:9.5%;height:9.5%;border-radius:50%;transition:left .55s cubic-bezier(.5,0,.3,1), top .55s cubic-bezier(.5,0,.3,1), opacity .3s;box-shadow:0 3px 6px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.3), inset 0 -3px 4px rgba(0,0,0,.3)}
.hpiece.white{background:radial-gradient(circle at 35% 30%,#F5ECD6,#CBB78D)}
.hpiece.red{background:radial-gradient(circle at 35% 30%,#DE6A4C,#9A3220)}
.hpiece.gone{opacity:0;transform:scale(.4)}

/* ---------- sections ---------- */
section{max-width:var(--maxw);margin:0 auto;padding:3.4rem 1.5rem}
.sec-eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--lacquer);margin-bottom:.6rem}
h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.15;margin-bottom:.8rem}
.sec-intro{color:var(--bone-dim);max-width:44rem;margin-bottom:2.4rem}

.basics{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.basic{background:var(--wood-card);border:1px solid var(--wood-line);border-radius:12px;padding:1.3rem 1.2rem}
.basic .glyph{font-size:1.6rem;line-height:1;margin-bottom:.7rem;display:block}
.basic h3{font-family:var(--font-display);font-size:1.12rem;font-weight:700;margin-bottom:.35rem}
.basic p{font-size:.88rem;color:var(--bone-dim);line-height:1.5}

.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.vcard{background:var(--wood-card);border:1px solid var(--wood-line);border-radius:14px;padding:1.2rem;display:flex;flex-direction:column;gap:.9rem;transition:transform .18s, border-color .18s}
.vcard:hover{transform:translateY(-3px);border-color:var(--brass)}
.vcard .vhead{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.vcard h3{font-family:var(--font-display);font-size:1.26rem;font-weight:700;line-height:1.2}
.vcard .region{font-size:.7rem;color:var(--brass);letter-spacing:.08em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.vboard-wrap{display:flex;justify-content:center}
.vboard-wrap .board-frame{padding:7px;border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(235,223,198,.12);cursor:pointer;transition:transform .15s}
.vboard-wrap .board-frame:hover{transform:scale(1.02)}
.vboard{width:100%;max-width:180px;aspect-ratio:1}
.vboard .piece{border-radius:50%;width:78%;height:78%;margin:11%;box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.3), inset 0 -2px 2px rgba(0,0,0,.25)}
.piece.white{background:radial-gradient(circle at 35% 30%,#F5ECD6,#C9B489)}
.piece.red{background:radial-gradient(circle at 35% 30%,#DE6A4C,#9A3220)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{font-size:.72rem;font-weight:500;padding:.22rem .6rem;border-radius:999px;border:1px solid var(--wood-line);color:var(--bone-dim);background:rgba(0,0,0,.15)}
.chip.yes{border-color:rgba(206,158,78,.5);color:var(--brass)}
.chip.dim{opacity:.65}
.vcard .desc{font-size:.9rem;color:var(--bone-dim);line-height:1.55;flex:1}
.vcard .vfoot{display:flex;justify-content:flex-start}

/* comparison table */
.table-wrap{overflow-x:auto;border:1px solid var(--wood-line);border-radius:12px;background:var(--wood-card)}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:.88rem}
th,td{padding:.65rem .9rem;text-align:start;border-bottom:1px solid var(--wood-line)}
thead th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);font-weight:600;background:rgba(0,0,0,.2)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(206,158,78,.05)}
td.name{font-weight:600}
td.name a{color:var(--bone);text-decoration:none;border-bottom:1px dotted var(--brass)}
td .ok{color:var(--brass)} td .no{color:var(--bone-dim);opacity:.55}

/* history */
.timeline{position:relative;padding-inline-start:1.6rem;max-width:46rem}
.timeline::before{content:"";position:absolute;inset-inline-start:6px;top:6px;bottom:6px;width:2px;background:var(--wood-line)}
.tl-item{position:relative;padding-bottom:1.8rem}
.tl-item::before{content:"";position:absolute;inset-inline-start:-1.6rem;top:.42rem;width:12px;height:12px;border-radius:50%;background:var(--lacquer);border:2px solid var(--wood-deep);box-shadow:0 0 0 2px var(--lacquer);margin-inline-start:1px}
.tl-item:last-child{padding-bottom:0}
.tl-date{font-family:var(--font-display);font-weight:800;color:var(--brass);font-size:1.05rem}
.tl-item p{color:var(--bone-dim);font-size:.92rem;max-width:38rem}

footer{border-top:1px solid var(--wood-line);margin-top:2rem}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:2rem 1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--bone-dim);font-size:.85rem}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   GAME VIEW
   ============================================================ */
#view-game{max-width:var(--maxw);margin:0 auto;padding:1.6rem 1.5rem 3rem}
.game-top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.game-top h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1}
.game-top .region{font-size:.75rem;color:var(--brass);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.6rem;align-items:start}
.gboard-frame{background:linear-gradient(145deg,#5A3E24,#3B2917);padding:clamp(8px,1.4vw,14px);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(235,223,198,.15);max-width:640px;margin:0 auto}
#gboard{display:grid;border-radius:4px;overflow:hidden;width:100%;aspect-ratio:1;position:relative}
.gsq{position:relative;border:none;padding:0;cursor:default;display:block;width:100%;height:100%}
.gsq.l{background:var(--sq-light)} .gsq.d{background:var(--sq-dark)}
.gsq.clickable{cursor:pointer}
.gsq .piece{position:absolute;inset:11%;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.3), inset 0 -3px 4px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center}
.gsq .piece.ghost{opacity:.3}
.gsq .piece .crown{font-size:clamp(10px,2.2vw,20px);line-height:1;color:rgba(80,40,10,.85);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.gsq .piece.red .crown{color:rgba(255,230,200,.9);text-shadow:0 1px 1px rgba(0,0,0,.4)}
.gsq.hl-sel::after{content:"";position:absolute;inset:3%;border:3px solid var(--brass);border-radius:8px;pointer-events:none}
.gsq.hl-from::after{content:"";position:absolute;inset:3%;border:2px dashed rgba(206,158,78,.65);border-radius:8px;pointer-events:none}
.gsq.hl-dest::before{content:"";position:absolute;inset:34%;border-radius:50%;background:rgba(206,158,78,.55);pointer-events:none;z-index:2}
.gsq.hl-cap::before{content:"";position:absolute;inset:34%;border-radius:50%;background:rgba(200,69,44,.75);pointer-events:none;z-index:2}
.gsq.hl-last{box-shadow:inset 0 0 0 3px rgba(206,158,78,.4)}

.gpanel{display:flex;flex-direction:column;gap:1rem}
.gcard{background:var(--wood-card);border:1px solid var(--wood-line);border-radius:12px;padding:1rem 1.1rem}
.gstatus{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.95rem;min-height:1.6rem}
.turn-dot{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 2px 2px rgba(255,255,255,.3), inset 0 -2px 3px rgba(0,0,0,.3)}
.turn-dot.white{background:radial-gradient(circle at 35% 30%,#F5ECD6,#C9B489)}
.turn-dot.red{background:radial-gradient(circle at 35% 30%,#DE6A4C,#9A3220)}
.gnote{font-size:.8rem;color:var(--bone-dim);margin-top:.4rem;line-height:1.45}
.gnote.alert{color:var(--brass)}
.gsettings{display:flex;flex-direction:column;gap:.7rem}
.gsettings label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim);font-weight:600;display:block;margin-bottom:.25rem}
.seg{display:flex;gap:.3rem;flex-wrap:wrap}
.seg button{flex:1;min-width:60px;font-size:.8rem;font-weight:600;padding:.42rem .5rem;border-radius:8px;border:1px solid var(--wood-line);background:transparent;color:var(--bone-dim);cursor:pointer;transition:all .15s}
.seg button:hover{color:var(--bone);border-color:var(--brass)}
.seg button.on{background:var(--lacquer);border-color:var(--lacquer);color:var(--bone)}
.grow{display:flex;gap:.5rem;flex-wrap:wrap}
.gcaps{display:flex;gap:1.4rem;margin-top:.6rem}
.gcap{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--bone-dim)}
.gcap .turn-dot{width:14px;height:14px}
.gcap b{color:var(--bone);font-size:1.05rem}

.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--wood-line);margin-bottom:.8rem}
.tab{background:none;border:none;color:var(--bone-dim);font-weight:600;font-size:.85rem;padding:.5rem .8rem;cursor:pointer;border-bottom:2px solid transparent}
.tab.on{color:var(--brass);border-bottom-color:var(--lacquer)}
.tabpane{font-size:.88rem;color:var(--bone-dim);line-height:1.55}
.tabpane ul{padding-inline-start:1.1rem;margin-top:.4rem}
.tabpane li{margin-bottom:.4rem}
.tabpane p+p{margin-top:.6rem}
.simplified{font-size:.75rem;color:var(--bone-dim);opacity:.75;margin-top:.8rem;padding-top:.6rem;border-top:1px dashed var(--wood-line)}

.hidden{display:none!important}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hpiece{transition:none}
  html{scroll-behavior:auto}
}
@media (max-width:980px){
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .basics{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr;padding-top:2rem}
  .hero-board-wrap{order:-1}
  .game-layout{grid-template-columns:1fr}
  .gpanel{max-width:640px;margin:0 auto;width:100%}
}
@media (max-width:600px){
  .vgrid{grid-template-columns:1fr}
  .basics{grid-template-columns:1fr}
}
[dir="rtl"] .hero-eyebrow,[dir="rtl"] .sec-eyebrow,[dir="rtl"] thead th,[dir="rtl"] .gsettings label{letter-spacing:0}

/* ---------- static variant page additions ---------- */
.crumbs{max-width:var(--maxw);margin:0 auto;padding:.4rem 1.5rem 0;font-size:.8rem;color:var(--bone-dim)}
.crumbs a{color:var(--bone-dim);text-decoration:none}
.crumbs a:hover{color:var(--brass)}
.crumbs .sep{margin:0 .45rem;opacity:.5}
.crumbs .here{color:var(--brass)}

.vpage-head{max-width:var(--maxw);margin:0 auto;padding:1.2rem 1.5rem .4rem}
.vpage-head h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.1}
.vpage-head .region{font-size:.78rem;color:var(--brass);letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-top:.2rem}
.vpage-head .lede{color:var(--bone-dim);max-width:46rem;margin-top:.7rem;font-size:1.02rem}

.article{max-width:var(--maxw);margin:0 auto;padding:1rem 1.5rem 2.5rem;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.4rem;align-items:start}
.article h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:1.6rem 0 .6rem}
.article h2:first-child{margin-top:0}
.article p{color:var(--bone-dim);font-size:.95rem;margin-bottom:.8rem}
.article ul{padding-inline-start:1.2rem;color:var(--bone-dim);font-size:.95rem}
.article li{margin-bottom:.5rem;line-height:1.55}
.facts{border:1px solid var(--wood-line);border-radius:12px;background:var(--wood-card);overflow:hidden}
.facts table{min-width:0;font-size:.88rem}
.facts th{width:52%;font-weight:600;color:var(--bone);background:rgba(0,0,0,.12)}
.facts td{color:var(--bone-dim)}
.related{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem 3rem}
.related h2{margin-bottom:1rem}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem}
.rel-card{display:flex;flex-direction:column;gap:.1rem;background:var(--wood-card);border:1px solid var(--wood-line);border-radius:10px;padding:.75rem .9rem;text-decoration:none;transition:border-color .15s, transform .15s}
.rel-card:hover{border-color:var(--brass);transform:translateY(-2px)}
.rel-card b{color:var(--bone);font-family:var(--font-display);font-size:1rem;font-weight:700}
.rel-card span{color:var(--bone-dim);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:900px){.article{grid-template-columns:1fr}}
[dir="rtl"] .rel-card span{letter-spacing:0}

/* ---------- fullscreen ---------- */
.fs-btn{
  position:absolute;top:.7rem;right:.7rem;z-index:10;
  background:rgba(33,22,16,.75);border:1px solid var(--wood-line);
  color:var(--bone-dim);border-radius:8px;padding:.45rem .65rem;
  cursor:pointer;font-size:.85rem;display:flex;align-items:center;gap:.4rem;
  backdrop-filter:blur(4px);transition:color .15s,border-color .15s;
}
.fs-btn:hover{color:var(--bone);border-color:var(--brass)}
.gboard-outer{position:relative}
.game-fullscreen{position:fixed!important;inset:0;z-index:9999;
  background:var(--wood-deep);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:1.2rem;gap:1rem;overflow:auto}
.game-fullscreen .gboard-frame{max-width:min(90vh,90vw);width:100%;margin:0}
.game-fullscreen #gboard{width:100%;aspect-ratio:1}
.game-fullscreen .gpanel{display:none}
.game-fullscreen .fs-panel{
  display:flex!important;flex-direction:row;gap:1rem;align-items:center;
  flex-wrap:wrap;justify-content:center;width:100%;max-width:640px;
}
.fs-panel{display:none}
.game-fullscreen .fs-status{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem}
.game-fullscreen .fs-caps{font-size:.82rem;color:var(--bone-dim)}
.fs-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--wood-card);border:1px solid var(--wood-line);
  border-radius:999px;padding:.3rem .75rem;font-size:.82rem;
}