*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0b0b0c}
body{color:#f3ead6;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
#app{min-height:100%;display:flex;justify-content:center}
.ph{width:100%;max-width:560px;min-height:100dvh;background:radial-gradient(600px 400px at 50% 0,#1c1810,#0b0b0c 60%);display:flex;flex-direction:column;position:relative}
.tb{display:flex;align-items:center;gap:8px;padding:14px 14px 10px}
.av{width:36px;height:36px;border-radius:50%;background:#1e1c18;border:1px solid #3a3426;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.av.gold{border-color:#d6a740}
.nm{font-weight:700;font-size:14px;flex:1}
.ib{width:40px;height:40px;border-radius:10px;background:#16151a;border:1px solid #2c2a26;display:grid;place-items:center;font-size:15px;color:#cfc4ad;flex:none}
.coins{display:flex;align-items:center;gap:6px;background:#16151a;border:1px solid #2c2a26;border-radius:999px;padding:5px 10px 5px 8px;font-weight:800;font-size:13px}
.coin{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f7e39b,#d6a740 60%,#9a6b1c)}
.card{background:#141317;border:1px solid #2a2722;border-radius:14px;padding:11px 13px;text-align:left;width:100%}
.card b{display:block;font-size:14px}.card span{display:block;font-size:11.5px;color:#a39b8b;margin-top:2px}
.gold-card{background:linear-gradient(180deg,#e4bd62,#c9962f);color:#1a1307;border-color:#e4bd62}
.gold-card span{color:#4a3611}
.gl{border-color:#5a4a26}
.sel{border-color:#d6a740;background:#1c1810}
.sel b{color:#e4bd62}
.lbl{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#a0977f;font-weight:700;margin:4px 2px 8px}
.btn{display:block;width:100%;background:linear-gradient(180deg,#e4bd62,#c9962f);color:#1a1307;font-weight:900;text-align:center;border-radius:14px;padding:15px;font-size:15px}
.btn.ghost{background:#141317;color:#e4bd62;border:1px solid #6b5526}
.seg{display:flex;background:#141317;border:1px solid #2a2722;border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;text-align:center;padding:10px 4px;border-radius:9px;font-size:13px;font-weight:700;color:#a39b8b}
.seg .on{background:#2a2418;color:#e4bd62;box-shadow:inset 0 0 0 1px #6b5526}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hdr{display:flex;align-items:center;gap:10px;padding:14px}
.hdr h1{font-size:19px;margin:0;flex:1}
.pad{padding:0 14px;display:flex;flex-direction:column;gap:12px}
.foot{padding:14px;margin-top:auto}

/* Ana menyu: Variant A kartları */
.logo{display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 0 8px}
.logo .lt-txt{text-align:center}
.logo .t1{font-weight:900;font-size:34px;letter-spacing:.12em;line-height:1;color:#f3ead6}
.logo .t2{font-weight:800;font-size:16px;letter-spacing:.02em;line-height:1.35;color:#cfc4ad}
.logo .t2 em{font-style:normal;color:#e4bd62}
.gamepick{display:flex;gap:8px;padding:2px 14px 10px}
.gp{position:relative;flex:1;border-radius:16px;padding:12px 10px 10px;text-align:center;border:1px solid #2a2722;background:#141317;opacity:.75}
.gp.on{border:1.5px solid #d6a740;background:linear-gradient(180deg,#2a2213,#16130d);opacity:1}
.gp .ok{display:none;position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:#d6a740;color:#1a1307;font-size:11px;font-weight:900;place-items:center}
.gp.on .ok{display:grid}
.gp .ic{height:46px;display:grid;place-items:center}
.gp b{display:block;font-size:15px;margin-top:4px}
.gp.on b{color:#e4bd62}
.gp span{font-size:11px;color:#a39b8b}
.nav{margin-top:auto;display:flex;justify-content:space-around;padding:12px 10px 16px;border-top:1px solid #1f1d19;font-size:10.5px;color:#a39b8b;text-align:center}
.nav .on{color:#e4bd62}

/* Lövhə */
.boardwrap{padding:4px 12px}
.board{display:grid;border-radius:6px;overflow:hidden;box-shadow:0 0 0 4px #2a2016,0 0 0 5px #6b5526,0 20px 50px rgba(0,0,0,.6);touch-action:none;user-select:none;width:100%;max-width:min(100%,calc(100dvh - 300px));margin:0 auto}
.sq{aspect-ratio:1;position:relative;display:grid;place-items:center}
.lt{background:#c9a86c}.dk{background:#5b4029}
.tk .sq{background:#b48a52}.tk .sq.alt{background:#a67c47}
.sq.last{box-shadow:inset 0 0 0 100px rgba(214,167,64,.35)}
.sq.selq{box-shadow:inset 0 0 0 3px #f7e39b}
.sq.hintq{box-shadow:inset 0 0 0 4px #4fb37a}
.sq.chk{background:radial-gradient(circle,#e0533a 0,#b8321f 40%,transparent 75%),#5b4029}
.sq.dot:after{content:"";width:28%;height:28%;border-radius:50%;background:rgba(20,15,8,.45)}
.sq.ring:after{content:"";position:absolute;inset:6%;border-radius:50%;border:3px solid rgba(20,15,8,.45)}
.sq .co{position:absolute;font-size:9px;font-weight:700;opacity:.7;pointer-events:none}
.sq .co.f{right:3px;bottom:1px}.sq .co.r{left:3px;top:1px}
.lt .co{color:#5b4029}.dk .co{color:#c9a86c}
.pc{font-family:"Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",serif;line-height:1;font-size:min(9vw,46px);position:relative;z-index:1;pointer-events:none}
.pw{color:#f6efe0;text-shadow:0 0 1px #2a1d0e,1px 1px 0 #2a1d0e,-1px -1px 0 #2a1d0e,1px -1px 0 #2a1d0e,-1px 1px 0 #2a1d0e,0 3px 4px rgba(0,0,0,.5)}
.pb{color:#151311;text-shadow:0 0 1px #d6a740,1px 1px 0 #b98c35,-1px -1px 0 #b98c35,1px -1px 0 #b98c35,-1px 1px 0 #b98c35,0 3px 4px rgba(0,0,0,.5)}
.ck{width:78%;height:78%;border-radius:50%;position:relative;z-index:1;pointer-events:none}
.ck.w{background:radial-gradient(circle at 50% 40%,#fbf5e6 0 30%,#e6d6b2 31% 34%,#f3e7cc 35% 60%,#cdb789 61% 64%,#efe2c4 65%);box-shadow:0 3px 0 #a88f5e,0 6px 8px rgba(0,0,0,.5)}
.ck.b{background:radial-gradient(circle at 50% 40%,#2a2724 0 30%,#d6a740 31% 33%,#1b1917 34% 60%,#8a6a2c 61% 63%,#141210 64%);box-shadow:0 3px 0 #000,0 6px 8px rgba(0,0,0,.6)}
.ck.k:after{content:"♛";position:absolute;inset:0;display:grid;place-items:center;font-size:min(4vw,18px);color:#d6a740}
.ck.w.k:after{color:#8a6a2c}
.ck.gone{opacity:.35}
.drag{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%) scale(1.15)}

.pl{display:flex;align-items:center;gap:10px;padding:8px 14px}
.pl .info{flex:1;min-width:0}
.pl .info b{display:block;font-size:14px}.pl .info span{font-size:11px;color:#a39b8b}
.clock{font-variant-numeric:tabular-nums;font-weight:800;font-size:18px;background:#141317;border:1px solid #2a2722;border-radius:10px;padding:6px 12px}
.clock.on{background:#e4bd62;color:#1a1307;border-color:#e4bd62}
.clock.low.on{background:#e0533a;border-color:#e0533a;color:#fff}
.cap{font-family:"Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",serif;font-size:15px;letter-spacing:-2px;color:#a39b8b}
.mode{display:flex;align-items:center;gap:8px;justify-content:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#d6a740;font-weight:700;padding:2px 0 8px}
.pill{border:1px solid #6b5526;border-radius:999px;padding:3px 10px;color:#e4bd62}
.moves{display:flex;justify-content:space-between;gap:10px;padding:8px 16px 0;font-size:11.5px;color:#a39b8b}
.moves .list{flex:1;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.moves .list b{color:#e4bd62}
.acts{display:flex;justify-content:space-around;padding:10px 14px 18px;margin-top:auto}
.acts button{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:#a39b8b}
.acts i{font-style:normal;width:44px;height:44px;border-radius:12px;background:#141317;border:1px solid #2a2722;display:grid;place-items:center;font-size:17px;color:#e4bd62}
.acts button:disabled{opacity:.4}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:grid;place-items:center;z-index:100;padding:20px}
.modal .box{width:100%;max-width:340px;background:#141317;border:1px solid #6b5526;border-radius:18px;padding:20px;text-align:center;display:flex;flex-direction:column;gap:12px}
.modal h2{margin:0;font-size:22px;color:#e4bd62}
.modal p{margin:0;color:#cfc4ad;font-size:14px}
.promo{display:flex;gap:8px;justify-content:center}
.promo button{width:56px;height:56px;border-radius:12px;background:#c9a86c;display:grid;place-items:center}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#1c1810;border:1px solid #6b5526;color:#f3ead6;padding:10px 16px;border-radius:12px;font-size:13px;z-index:120;max-width:90%}
.hint{padding:10px 16px 0}
.think{font-size:11px;color:#d6a740}
.sw{width:42px;height:24px;border-radius:999px;background:#3a3426;position:relative;flex:none}
.sw:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#a39b8b;transition:.15s}
.sw.on{background:#d6a740}.sw.on:after{left:21px;background:#1a1307}
@media (min-width:900px){.ph{max-width:1100px}.gamelay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;padding:16px}.gamelay .side{display:flex;flex-direction:column;gap:8px}.board{max-width:min(100%,calc(100dvh - 140px))}}