:root{
  --ink:#1B1430; --muted:#7A7290; --line:#ECE7F6; --bg:#FBFAFF; --card:#fff;
  --violet:#7C3AED; --violet2:#A78BFA; --magenta:#C026D3; --soft:#F1ECFE;
  --you1:#8B5CF6; --you2:#7C3AED; --cpu1:#4A3F6B; --cpu2:#2A2342;
  --sans:"Inter",system-ui,sans-serif; --serif:"Playfair Display",Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,92vw);margin-inline:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 50px -34px rgba(40,20,80,.4)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:.95rem;padding:.8rem 1.4rem;border-radius:999px;border:1px solid transparent;cursor:pointer;background:linear-gradient(135deg,var(--violet),var(--magenta));color:#fff;transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(124,58,237,.6)}
.btn-sm{padding:.55rem 1.1rem;font-size:.88rem}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}.btn-ghost:hover{background:var(--soft);box-shadow:none;transform:none}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:.7rem 4vw;background:rgba(251,250,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800}
.brand-txt{display:flex;flex-direction:column;line-height:1;font-family:var(--serif);font-size:1.25rem}
.brand-txt small{font-family:var(--sans);font-size:.6rem;font-weight:600;color:var(--muted);letter-spacing:.05em;margin-top:2px}
.nav-links{display:flex;gap:1.8rem}
.nav-links a{font-weight:600;font-size:.92rem;color:var(--muted)}.nav-links a:hover,.nav-links a.active{color:var(--violet)}

/* hero */
.hero{position:relative;text-align:center;padding:4.5rem 4vw 2rem;background:radial-gradient(700px 360px at 50% -10%,rgba(124,58,237,.14),transparent 60%);overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;z-index:0}
.hero::before{width:340px;height:340px;background:radial-gradient(circle,rgba(124,58,237,.35),transparent 70%);top:-120px;left:-80px;animation:float1 9s ease-in-out infinite}
.hero::after{width:300px;height:300px;background:radial-gradient(circle,rgba(192,38,211,.3),transparent 70%);top:-60px;right:-70px;animation:float1 11s ease-in-out infinite reverse}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}
.hero-in{position:relative;z-index:1}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--violet);background:var(--soft);padding:.4rem .9rem;border-radius:999px}
.hero h1{font-family:var(--serif);font-size:clamp(2.6rem,6vw,4.4rem);font-weight:900;margin:1rem 0 .6rem;letter-spacing:-.02em}
.hero h1 .grad{background:linear-gradient(120deg,var(--violet),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:1.12rem;max-width:60ch;margin:0 auto}
.hero-cta{display:flex;gap:.7rem;justify-content:center;margin-top:1.6rem}

/* play layout */
.play{width:min(1120px,94vw);margin:2.5rem auto;position:relative}
.play-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:1.4rem;align-items:start}
.board-area{padding:1.4rem}
.player-profile{display:flex;align-items:center;gap:.8rem;padding:.55rem .7rem;border-radius:14px;transition:background .2s}
.player-profile.user{background:linear-gradient(90deg,rgba(124,58,237,.07),transparent)}
.player-profile.opponent{background:linear-gradient(90deg,rgba(42,35,66,.06),transparent)}
.avatar{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--soft);box-shadow:inset 0 1px 3px rgba(255,255,255,.6),0 3px 8px -4px rgba(40,20,80,.4)}
.user-avatar{background:linear-gradient(135deg,#EDE7FE,#DCD0FB)}
.cpu-avatar{background:linear-gradient(135deg,#E5E0F0,#D4CCE6)}
.profile-info{display:flex;flex-direction:column;line-height:1.1}
.player-name{font-weight:800}.player-title{font-size:.7rem;font-weight:700;color:var(--muted);letter-spacing:.06em}
.captured-box{margin-left:auto;display:flex;flex-wrap:wrap;gap:3px;max-width:200px;justify-content:flex-end}
.cap-stone{width:13px;height:13px;border-radius:50%}
.cap-stone.light{background:linear-gradient(135deg,var(--you1),var(--you2))}
.cap-stone.dark{background:linear-gradient(135deg,var(--cpu1),var(--cpu2))}

/* board */
.board-frame{position:relative;margin:.6rem 0}
.board{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:5px;background:linear-gradient(160deg,#EDE6FB,#E3D8F8);padding:9px;border-radius:18px;aspect-ratio:1/1;box-shadow:inset 0 2px 8px rgba(60,30,110,.12)}
.cell{position:relative;border-radius:9px;display:grid;place-items:center;cursor:pointer;transition:background .15s,box-shadow .15s;background:#FAF7FF}
.cell.dk{background:#F0EAFB}
.cell.lt{background:#FBF9FF}
.cell.mid{background:#EFE7FE;box-shadow:inset 0 0 0 2px var(--violet2)}
.cell.mid::before{content:"✛";position:absolute;color:var(--violet2);font-size:1.1rem;opacity:.5}
.cell.sel{box-shadow:inset 0 0 0 3px var(--violet);background:var(--soft)}
.cell.legal::after{content:"";width:26%;height:26%;border-radius:50%;background:var(--violet);opacity:.45;animation:legalpulse 1.4s ease-in-out infinite}
@keyframes legalpulse{0%,100%{transform:scale(.85);opacity:.35}50%{transform:scale(1.05);opacity:.6}}
.cell.legal{cursor:pointer}
.cell.take{box-shadow:inset 0 0 0 3px #EF4444;background:#FDECEC}
.cell.take::after{background:#EF4444;opacity:.6;animation:takepulse 1s ease-in-out infinite}
@keyframes takepulse{0%,100%{transform:scale(.85);opacity:.5}50%{transform:scale(1.15);opacity:.85}}
.cell.last{box-shadow:inset 0 0 0 2px var(--violet2);background:rgba(167,139,250,.12)}
.cell.last .pc{animation:landpc .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes landpc{0%{transform:scale(1.18) translateY(-4px)}100%{transform:scale(1)}}
.cell.gone{opacity:.45}
/* pieces */
.pc{position:relative;width:82%;height:82%;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 5px 11px -3px rgba(30,15,60,.5),inset 0 2px 5px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.28);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s}
/* top shine highlight on every piece */
.pc::before{content:"";position:absolute;top:7%;left:18%;width:48%;height:34%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%);pointer-events:none;z-index:2}
.pc.you{background:radial-gradient(circle at 34% 28%,#A78BFA,var(--you2) 70%,#5B21B6)}
.pc.cpu{background:radial-gradient(circle at 34% 28%,#5C5078,var(--cpu2) 72%,#15102A)}
.pc svg{position:relative;z-index:1;width:60%;height:60%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.pc.you svg *{fill:#F5F1FF !important;stroke:#F5F1FF}
.pc.cpu svg *{fill:#D9D2EC !important;stroke:#D9D2EC}
/* movable pieces — clearer affordance */
.pc.can{cursor:pointer;animation:canpulse 1.8s ease-in-out infinite}
.pc.can:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 9px 18px -4px rgba(124,58,237,.6),inset 0 2px 5px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.28)}
@keyframes canpulse{0%,100%{box-shadow:0 5px 11px -3px rgba(30,15,60,.5),inset 0 2px 5px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.28),0 0 0 0 rgba(124,58,237,.35)}50%{box-shadow:0 5px 11px -3px rgba(30,15,60,.5),inset 0 2px 5px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.28),0 0 0 4px rgba(124,58,237,.12)}}
/* promoted / sultan rings */
.pc.warlord{box-shadow:0 0 0 3px #F5C944,0 0 14px -2px rgba(245,201,68,.8),0 5px 11px -3px rgba(30,15,60,.5),inset 0 2px 5px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.28)}
.pc.cent{box-shadow:0 0 0 3px #F5C944,0 0 18px -1px #F5C944,inset 0 2px 5px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.28)}
.pc.warlord svg *,.pc.cent svg *{fill:#FFF3C4 !important;stroke:#FFF3C4}
.pc.warlord::after,.pc.cent::after{content:"♛";position:absolute;top:-30%;font-size:.8rem;line-height:1;color:#F5C944;z-index:3;text-shadow:0 1px 1px rgba(0,0,0,.4)}
.pc.pop{animation:pcpop .26s cubic-bezier(.34,1.56,.64,1)}
@keyframes pcpop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
/* capture flash + shake on removal */
.cell.gone .pc{animation:capshake .3s ease}
@keyframes capshake{0%{transform:scale(1) rotate(0)}20%{transform:scale(1.15) rotate(-8deg);filter:brightness(2.2) saturate(.4)}45%{transform:scale(.9) rotate(7deg)}70%{transform:scale(.7) rotate(-5deg);opacity:.5}100%{transform:scale(.2) rotate(0);opacity:0}}
.board-pop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);background:linear-gradient(135deg,var(--violet),var(--magenta));color:#fff;font-weight:800;padding:.6rem 1.2rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1);z-index:5;box-shadow:0 12px 30px -8px rgba(124,58,237,.7);letter-spacing:.02em}
.board-pop.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.board-pop.big{font-size:1.15rem;padding:.8rem 1.6rem}
.board-pop.big.show{animation:bigpop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes bigpop{0%{transform:translate(-50%,-50%) scale(.4) rotate(-6deg)}55%{transform:translate(-50%,-50%) scale(1.12) rotate(2deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0)}}

/* control */
.control{padding:1.4rem}
.ctl-title{font-family:var(--serif);font-size:1.6rem;font-weight:900}
.ctl-sub{color:var(--muted);font-size:.85rem;margin-bottom:1rem}
.seg{display:flex;gap:.3rem;background:var(--soft);padding:.3rem;border-radius:14px}
.seg button{flex:1;border:none;background:transparent;font:inherit;font-weight:700;font-size:.85rem;padding:.55rem;border-radius:10px;cursor:pointer;color:var(--muted)}
.seg button.active{background:#fff;color:var(--violet);box-shadow:0 4px 10px -4px rgba(124,58,237,.4)}
.seg.small button{font-size:.78rem;padding:.45rem}
.diff-wrap{margin-top:.9rem}
.diff-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:.35rem}
.turnbar{display:flex;align-items:center;justify-content:space-between;margin:1rem 0;padding:.6rem .8rem;background:var(--soft);border-radius:12px;font-size:.85rem;font-weight:600}
.who{display:flex;align-items:center;gap:.4rem;color:var(--muted)}
.chip{width:14px;height:14px;border-radius:50%}.chip.light{background:linear-gradient(135deg,var(--you1),var(--you2))}.chip.dark{background:linear-gradient(135deg,var(--cpu1),var(--cpu2))}
.status{font-weight:800;color:var(--violet);text-align:center;transition:color .2s}
.status.thinking{position:relative;color:var(--magenta);animation:thinkglow 1.2s ease-in-out infinite}
.status.thinking::after{content:"";display:inline-block;width:.3em;height:.3em;margin-left:.45em;border-radius:50%;background:var(--magenta);box-shadow:.55em 0 0 var(--magenta),1.1em 0 0 var(--magenta);animation:thinkdots 1s steps(4) infinite;vertical-align:middle}
@keyframes thinkglow{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes thinkdots{0%{box-shadow:.55em 0 0 transparent,1.1em 0 0 transparent}33%{box-shadow:.55em 0 0 var(--magenta),1.1em 0 0 transparent}66%{box-shadow:.55em 0 0 var(--magenta),1.1em 0 0 var(--magenta)}}
.move-history{margin-top:.4rem}
.history-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.move-log{margin-top:.4rem;height:140px;overflow-y:auto;background:#FBF9FF;border:1px solid var(--line);border-radius:12px;padding:.6rem;font-size:.82rem;display:flex;flex-direction:column;gap:.25rem;scroll-behavior:smooth}
.move-log .empty-log{color:var(--muted);text-align:center;margin:auto}
.log-item{padding:.32rem .55rem;border-radius:8px;background:#fff;border:1px solid var(--line);color:#4A4168;line-height:1.35;animation:logslide .25s ease}
.log-item:last-child{border-color:var(--violet2);background:var(--soft);color:var(--ink);font-weight:600}
@keyframes logslide{0%{opacity:0;transform:translateX(-8px)}100%{opacity:1;transform:translateX(0)}}
.move-log::-webkit-scrollbar{width:7px}
.move-log::-webkit-scrollbar-thumb{background:var(--violet2);border-radius:99px}
.ctl-actions{display:flex;gap:.5rem;margin-top:1rem}
.ctl-actions .btn{flex:1;padding:.7rem .5rem;font-size:.85rem}
.hint{margin-top:.9rem;font-size:.78rem;color:var(--muted);background:#FBF9FF;border:1px dashed var(--line);border-radius:12px;padding:.7rem}

/* modal */
.modal{position:fixed;inset:0;background:rgba(27,20,48,.45);backdrop-filter:blur(4px);display:none;place-items:center;z-index:80}
.modal.show{display:grid}
.modal-card{background:#fff;border-radius:24px;padding:2.4rem;text-align:center;max-width:380px;box-shadow:0 30px 70px -20px rgba(40,20,80,.5)}
.modal-msg{font-family:var(--serif);font-size:1.5rem;font-weight:900;margin-bottom:1.2rem}

/* panels */
.panel{padding:4.5rem 0}.panel.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shead{text-align:center;margin-bottom:2.4rem}
.shead h2{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.8rem);font-weight:900;margin-top:.6rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.6rem;text-align:center;transition:.25s}
.step:hover{transform:translateY(-5px);box-shadow:0 20px 40px -26px rgba(40,20,80,.4)}
.step-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--soft);color:var(--violet);margin:0 auto 1rem}
.step-ic svg{width:26px;height:26px}
.step h3{font-weight:800;margin-bottom:.3rem}.step p{color:var(--muted);font-size:.9rem}
.rules-wrap{max-width:760px}.rules-list{list-style:none;display:grid;gap:.7rem}
.rules-list li{background:#fff;border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:12px;padding:.9rem 1.1rem;font-size:.95rem;color:#403858}
.rules-list b{color:var(--ink)}

/* footer */
.footer{background:#1B1430;color:#B7AEDB;padding:2.4rem 0;margin-top:3rem}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer .brand{color:#fff;font-family:var(--serif);font-size:1.1rem}
.muted{font-size:.85rem}

@media(max-width:900px){
  .play-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .board-area{order:1}.control{order:2}
  .control{max-width:560px;margin-inline:auto;width:100%}
  .board-frame{max-width:460px;margin-inline:auto}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
  .hero{padding:2.8rem 5vw 1.4rem}
  .play{width:94vw;margin:1.4rem auto}
  .board-area{padding:.9rem}
  .board{gap:4px;padding:6px}
  .cell{border-radius:7px}
  .pc svg{width:56%;height:56%}
  .player-profile{padding:.45rem .5rem;gap:.55rem}
  .avatar{width:38px;height:38px;font-size:1.15rem;border-radius:12px}
  .captured-box{max-width:120px;gap:2px}
  .cap-stone{width:10px;height:10px}
  .control{padding:1.1rem}
  .ctl-actions{flex-wrap:wrap}
  .ctl-actions .btn{flex:1 1 30%;font-size:.8rem;padding:.65rem .3rem}
  .turnbar{font-size:.78rem;padding:.5rem .6rem;gap:.3rem}
  .move-log{height:120px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .foot{flex-direction:column;text-align:center}
  .board-pop.big{font-size:1rem;padding:.6rem 1.1rem}
}
@media(max-width:380px){
  .seg button{font-size:.78rem;padding:.45rem .2rem}
  .seg.small button{font-size:.7rem}
}
@media(hover:none){.pc.can:hover{transform:none}.step:hover{transform:none}}

.user-avatar{color:var(--violet)}
.cpu-avatar{color:var(--cpu1)}