*{box-sizing:border-box}
:root{
  --bg:#100d09;--panel:#1b1711;--panel2:#231d15;--line:#6e5120;--gold:#c99b45;
  --gold2:#f0c86d;--text:#f5eee0;--muted:#a79b89;--ivory:#eee6d2;--onyx:#171717;
  --danger:#b85a46;--shadow:0 22px 60px rgba(0,0,0,.48)
}
html,body{margin:0;min-height:100%;background:#0b0907;color:var(--text);font-family:Georgia,"Times New Roman",serif}
body{overflow-x:hidden}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
#app{min-height:100vh;position:relative;background:
 radial-gradient(circle at 50% 0%,rgba(117,83,30,.14),transparent 32rem),
 linear-gradient(145deg,#0d0b08,#15110c 50%,#0b0907)}
.ambient{position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:repeating-linear-gradient(115deg,transparent 0 6px,rgba(255,255,255,.025) 7px 8px)}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:10px max(18px,4vw);border-bottom:1px solid rgba(201,155,69,.2);background:rgba(14,11,8,.78);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}
.brand{text-align:center}.brand-kicker{font-size:9px;letter-spacing:4px;color:#9c7940}.brand h1{margin:3px 0 0;font-size:22px;letter-spacing:2px}.brand h1 span{color:var(--gold)}
.icon-btn,.back-btn{background:none;border:0;cursor:pointer;color:#d5c39e;font-size:24px;width:44px;height:44px;border-radius:12px}
.icon-btn:hover,.back-btn:hover{background:#201a12}
main{width:min(940px,100%);margin:auto}
.screen{display:none;min-height:calc(100vh - 76px);padding:26px 18px 32px}.screen.active{display:block}
.hero-card{min-height:230px;border:1px solid rgba(201,155,69,.22);border-radius:24px;background:linear-gradient(135deg,#19140e,#241c12);box-shadow:var(--shadow);padding:34px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative}
.hero-card:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(125deg,transparent 0 9px,rgba(255,255,255,.018) 10px 12px);pointer-events:none}
.eyebrow{color:var(--gold);letter-spacing:4px;font-size:10px;margin-bottom:12px}.hero-copy{max-width:560px;z-index:1}.hero-copy h2{font-size:48px;margin:0 0 8px;letter-spacing:-1px}.hero-copy p{color:#b9ad99;line-height:1.55;margin:0;font-size:16px}
.hero-board-mini{width:160px;height:170px;position:relative;transform:rotate(90deg);opacity:.85}.hero-board-mini:before,.hero-board-mini:after{content:"";position:absolute;background:#8c682d;height:2px}.hero-board-mini:before{left:20px;right:20px;top:48px;box-shadow:0 35px #8c682d,0 70px #8c682d}.hero-board-mini:after{width:2px;top:30px;bottom:30px;left:50%;box-shadow:-34px 0 #8c682d,34px 0 #8c682d}
.hero-board-mini span{position:absolute;width:13px;height:13px;border-radius:50%;background:#191919;border:2px solid #7b5d29;z-index:2}.hero-board-mini span:nth-child(1){left:28px;top:42px}.hero-board-mini span:nth-child(2){left:74px;top:42px}.hero-board-mini span:nth-child(3){right:28px;top:42px}.hero-board-mini span:nth-child(4){left:28px;top:112px}.hero-board-mini span:nth-child(5){left:74px;top:112px}.hero-board-mini span:nth-child(6){right:28px;top:112px}.hero-board-mini i{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--ivory);border:2px solid #9c8454;z-index:2;bottom:20px}.hero-board-mini i:nth-of-type(1){left:28px}.hero-board-mini i:nth-of-type(2){left:74px}.hero-board-mini i:nth-of-type(3){right:28px}.hero-board-mini i:nth-of-type(4){left:51px}.hero-board-mini i:nth-of-type(5){right:51px}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.mode-card{display:flex;align-items:center;gap:16px;text-align:left;border:1px solid rgba(201,155,69,.23);background:linear-gradient(135deg,#1b1711,#211a12);padding:20px;border-radius:20px;cursor:pointer;transition:.2s;box-shadow:0 10px 30px #0004}.mode-card:hover{transform:translateY(-2px);border-color:#8f6c31}.mode-card strong{display:block;font-size:19px}.mode-card small{display:block;color:#978b78;margin-top:5px;font-family:Arial,sans-serif;font-size:12px}.mode-card>b{margin-left:auto;color:var(--gold);font-size:28px}.mode-icon{width:48px;height:48px;border:1px solid #795a28;border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:22px}.home-actions{display:flex;justify-content:center;gap:12px;margin:20px 0}.outline-btn{background:none;border:0;color:#a78d61;letter-spacing:1px;text-transform:uppercase;font-size:11px;cursor:pointer;padding:10px 15px}.outline-btn:hover{color:var(--gold2)}
.saved-banner{display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid rgba(201,155,69,.2);border-radius:14px;background:#18130e;color:#b9ad99;font-family:Arial,sans-serif;font-size:12px}.saved-banner span{color:#7ca36a}.saved-banner button{margin-left:auto;border:0;background:#2b2115;border-radius:8px;padding:7px 12px;cursor:pointer;color:var(--gold2)}.saved-banner #discardSaveBtn{margin-left:0;background:none;font-size:18px}.hidden{display:none!important}

.game-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.back-btn{display:flex;align-items:center;gap:4px;font-size:16px;width:auto}.matchup{display:flex;align-items:center;gap:10px}.player-pill{display:flex;align-items:center;gap:8px;min-width:128px;padding:7px 9px;border:1px solid transparent;border-radius:13px;opacity:.65}.player-pill.active{opacity:1;background:#1b1610;border-color:rgba(201,155,69,.3)}.player-pill>div{min-width:55px}.player-pill b{display:block;font-size:13px}.player-pill small{display:block;color:#967c51;font-size:8px;letter-spacing:2px;margin-top:2px}.player-pill em{font-style:normal;color:#bfa271;font-size:12px;margin-left:auto}.bead{display:block;width:27px;height:27px;border-radius:50%;box-shadow:inset 5px 5px 8px #fff5,inset -6px -7px 10px #0008,0 3px 6px #0009;border:1px solid #a79065}.bead.ivory{background:radial-gradient(circle at 30% 25%,#fff,#e8dec8 52%,#b2a183)}.bead.onyx{background:radial-gradient(circle at 28% 25%,#777,#242424 48%,#050505)}
.vs{color:#9b763b;font-weight:bold;font-size:13px}
.turn-panel{border:1px solid rgba(201,155,69,.22);background:#17130e;border-radius:15px;padding:12px 16px;text-align:center;margin-bottom:12px}.turn-label{display:inline-block;border:1px solid #624a23;padding:7px 20px;border-radius:10px;color:#e4c378;font-weight:bold;font-size:12px;letter-spacing:1px}.bead-track{height:20px;display:flex;justify-content:center;gap:4px;margin-top:9px;overflow:hidden}.bead-track i{width:10px;height:10px;border-radius:50%;background:#242424;border:1px solid #5d4e39;box-shadow:inset 2px 2px 4px #fff2}.bead-track i.iv{background:#e9dec8;border-color:#b49d72}.capture-note{font-family:Arial,sans-serif;color:#e4aa68;font-size:9px;letter-spacing:1.3px;margin-top:5px}
.board-wrap{display:flex;justify-content:center}.board-shell{width:min(690px,100%);aspect-ratio:1000/1160;border-radius:14px;position:relative;overflow:hidden;border:1px solid #5f441d;box-shadow:0 25px 70px #000a, inset 0 0 30px #0008;background:#21170d}
#board{width:100%;height:100%;display:block;position:relative;z-index:2}.board-shine{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(115deg,rgba(255,255,255,.035),transparent 24%,transparent 72%,rgba(255,190,80,.035))}
.edge{stroke:#bd9141;stroke-width:6;stroke-linecap:round;opacity:.8;filter:url(#glow)}.node{cursor:pointer}.node-ring{fill:#15120f;stroke:#7c5b29;stroke-width:3}.node-dot{fill:#9c7634;opacity:.55}.piece{stroke:#9d8a64;stroke-width:2}.piece.ivory{fill:url(#ivoryGrad)}.piece.onyx{fill:url(#onyxGrad)}.node.selected .node-ring{stroke:#f0c86d;stroke-width:6;filter:url(#softGlow)}.node.legal .node-ring{stroke:#d6ae5f;stroke-width:4}.node.legal .node-dot{fill:#e8c26e}.node.capture .node-ring{stroke:#e5a16d;stroke-width:5}.piece-pulse{animation:pulse 1s infinite}.piece-move{animation:moveIn .22s ease-out}@keyframes pulse{50%{filter:url(#softGlow);opacity:.72}}@keyframes moveIn{from{transform:scale(.7);opacity:.3}to{transform:scale(1);opacity:1}}
.game-controls{display:flex;justify-content:center;gap:10px;margin:14px 0 5px}.control-btn{border:1px solid rgba(201,155,69,.25);background:#18130e;border-radius:12px;padding:11px 20px;cursor:pointer;color:#b7aa93;font-size:13px}.control-btn:hover{border-color:#8d6930;color:#f0d18d}.control-btn.primary{background:#6f4d20;color:#f8e8c5;border-color:#9e7432}

.modal-layer{position:fixed;inset:0;background:#000a;display:none;place-items:center;padding:18px;z-index:100;backdrop-filter:blur(7px)}.modal-layer.open{display:grid}.modal{width:min(540px,100%);max-height:min(82vh,760px);overflow:auto;background:linear-gradient(145deg,#1c1710,#110e0a);border:1px solid #735425;border-radius:20px;padding:24px;box-shadow:var(--shadow)}.modal h2{margin:0 0 10px;font-size:25px}.modal p,.modal li{color:#b6aa96;line-height:1.55;font-family:Arial,sans-serif;font-size:13px}.modal .close-modal{float:right;background:none;border:0;font-size:22px;cursor:pointer;color:#a89065}.modal-section{border-top:1px solid #33271a;margin-top:18px;padding-top:15px}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.gold-btn{border:0;background:#a27631;color:#fff4dc;border-radius:10px;padding:10px 16px;cursor:pointer}.dark-btn{border:1px solid #5b4424;background:#19140e;color:#c4b293;border-radius:10px;padding:10px 16px;cursor:pointer}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat{padding:15px;border:1px solid #3a2b19;border-radius:13px;background:#17120d}.stat b{font-size:24px;color:#e0bd74;display:block}.stat span{font:11px Arial;color:#8f846f}
.setting{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid #2c2115}.setting label{font-size:14px}.setting small{display:block;color:#8d826e;font:11px Arial;margin-top:4px}.toggle{width:45px;height:25px;border-radius:99px;border:0;background:#3b3021;position:relative;cursor:pointer}.toggle:after{content:"";width:19px;height:19px;background:#b7a27d;border-radius:50%;position:absolute;top:3px;left:3px;transition:.2s}.toggle.on{background:#8a642b}.toggle.on:after{left:23px;background:#fff0c9}
.range{width:150px;accent-color:#b38438}
.pause-overlay{text-align:center}.pause-overlay .pause-mark{font-size:44px;color:#d0aa60}.pause-overlay p{margin-bottom:20px}

.side-panel{position:fixed;left:0;top:0;bottom:0;width:min(330px,86vw);background:#15110c;border-right:1px solid #5e451f;z-index:80;transform:translateX(-105%);transition:.25s;padding:20px;box-shadow:20px 0 60px #0009}.side-panel.open{transform:none}.side-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid #332719}.side-head button{background:none;border:0;font-size:25px;cursor:pointer}.side-panel>button{display:block;width:100%;text-align:left;padding:15px 8px;background:none;border:0;border-bottom:1px solid #2b2116;color:#c7b99f;cursor:pointer}.side-panel>button:hover{color:#edcb80}.side-note{position:absolute;bottom:20px;color:#6e6455;font:10px Arial}.panel-backdrop{display:none;position:fixed;inset:0;background:#0008;z-index:70}.panel-backdrop.open{display:block}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#20180e;border:1px solid #76582b;color:#e4c477;border-radius:12px;padding:10px 15px;font:12px Arial;opacity:0;pointer-events:none;transition:.25s;z-index:120}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:650px){
 .screen{padding:18px 10px 22px}.hero-card{min-height:230px;padding:24px 20px}.hero-copy h2{font-size:35px}.hero-copy p{font-size:13px}.hero-board-mini{width:110px;transform:scale(.75) rotate(90deg);margin-right:-18px}
 .mode-grid{grid-template-columns:1fr}.mode-card{padding:15px}.home-actions{margin-top:12px}
 .topbar{height:66px}.screen{min-height:calc(100vh - 66px)}.game-head{align-items:flex-start}.matchup{gap:2px}.player-pill{min-width:92px;padding:5px}.player-pill b{font-size:11px}.player-pill small{font-size:7px}.player-pill em{font-size:10px}.bead{width:22px;height:22px}.vs{font-size:11px}
 .turn-panel{padding:9px}.turn-label{font-size:10px;padding:6px 13px}.board-shell{border-radius:10px}
 .game-controls{gap:6px}.control-btn{padding:10px 12px;font-size:11px}.control-btn span{display:none}
 .modal{padding:18px}
}
@media(min-width:900px){.game-head{padding:0 6px}.board-shell{max-width:650px}}