:root{--bg:#0d0815;--panel:#171020;--panel2:#21172d;--gold:#ffc34d;--orange:#ff8a18;--purple:#8f63ff;--ink:#fff8e9;--muted:#bdb1c9;--danger:#ff4b5c;--ok:#50d890;--boardLight:#ead8b8;--boardDark:#6c465b;--maxBoard:min(66vh,64vw,680px)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:radial-gradient(circle at 20% 0,#2b1738 0,#100918 40%,#07050c 100%);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif;overflow:hidden}button,a{font:inherit}.hidden{display:none!important}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 80%,rgba(255,138,24,.08),transparent 32%),radial-gradient(circle at 85% 20%,rgba(143,99,255,.1),transparent 34%)}
#home{height:100dvh;display:grid;place-items:center;padding:clamp(10px,2vh,24px)}.home-card{width:min(1180px,96vw);height:min(820px,96dvh);position:relative;border:1px solid rgba(255,255,255,.12);border-radius:24px;overflow:hidden;background:#100a17;box-shadow:0 28px 90px #0009}.hero{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(8,5,12,.16),rgba(8,5,12,.5)),linear-gradient(0deg,rgba(8,5,12,.98) 0,rgba(8,5,12,.32) 52%,rgba(8,5,12,.16)),url('../img/hero.webp');background-size:cover;background-position:center}.home-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,3.2vw,42px);gap:10px}.brand-mini{position:absolute;top:18px;left:22px;font-weight:900;letter-spacing:.12em;font-size:12px;background:#0008;padding:8px 12px;border-radius:999px}.home-title{font-size:clamp(29px,5vw,64px);line-height:.92;margin:0;text-shadow:0 4px 20px #000}.home-sub{margin:0;color:#f3deae;font-weight:700;font-size:clamp(13px,1.6vw,20px)}.setup{display:grid;grid-template-columns:1.05fr 1fr auto;gap:12px;align-items:end;margin-top:8px}.group{background:#0b0710cc;border:1px solid #ffffff18;padding:10px;border-radius:16px}.group-title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:800}.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice,.difficulty{border:1px solid #ffffff18;color:var(--ink);background:#ffffff08;border-radius:12px;padding:9px 11px;cursor:pointer;font-weight:800;transition:.16s}.choice:hover,.difficulty:hover{transform:translateY(-1px);border-color:#ffffff45}.choice.active{outline:2px solid var(--gold);background:#ffb52a1b}.choice.cat.active{outline-color:var(--purple);background:#8f63ff1b}.difficulties{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.difficulty{font-size:12px;padding:10px 8px}.difficulty.active{background:linear-gradient(135deg,#ff9d24,#7d49ff);border-color:transparent}.play-btn{height:100%;min-height:72px;border:0;border-radius:16px;padding:0 22px;background:linear-gradient(135deg,#ffc54d,#ff6d1b);font-weight:1000;color:#201000;cursor:pointer;box-shadow:0 10px 30px #ff8a1830}.home-footer{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:11px;color:#a99daf}.home-footer a{color:#f3d58a;text-decoration:none}
#game{height:100dvh;display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding:8px 12px}.topbar{height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#120c1bd9;border:1px solid #ffffff12;border-radius:14px;padding:5px 8px}.game-logo{display:flex;align-items:center;gap:8px;font-weight:1000;white-space:nowrap}.game-logo b{color:var(--gold)}.top-actions{display:flex;gap:6px}.small-btn{border:1px solid #ffffff1c;background:#ffffff0b;color:#fff;border-radius:10px;padding:7px 9px;cursor:pointer;font-weight:800;font-size:12px}.small-btn:hover{background:#ffffff16}.game-main{min-height:0;display:grid;grid-template-columns:minmax(0,auto) minmax(250px,360px);justify-content:center;gap:12px;align-items:center}.board-column{display:flex;flex-direction:column;align-items:center;min-width:0;gap:7px}.board-wrap{width:var(--maxBoard);height:var(--maxBoard);max-width:100%;aspect-ratio:1;background:#2c1b34;border:clamp(5px,1vw,10px) solid #2c1b34;border-radius:16px;box-shadow:0 18px 50px #0008,0 0 0 1px #ffffff14;position:relative}.board{width:100%;height:100%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);overflow:hidden;border-radius:8px}.square{position:relative;border:0;padding:0;margin:0;display:grid;place-items:center;cursor:pointer;min-width:0;min-height:0}.square.light{background:linear-gradient(135deg,#f0dec0,#dac09c)}.square.dark{background:linear-gradient(135deg,#795066,#593b51)}.square.last:after{content:"";position:absolute;inset:7%;border:3px solid #ffd25a99;border-radius:10px;pointer-events:none}.square.selected:after{content:"";position:absolute;inset:4%;border:4px solid #52e0ff;border-radius:10px;box-shadow:inset 0 0 15px #52e0ff44;pointer-events:none}.square.target:before{content:"";position:absolute;width:26%;height:26%;border-radius:50%;background:#2cf08aaa;box-shadow:0 0 15px #2cf08a77;z-index:1}.square.capture:before{width:76%;height:76%;background:transparent;border:5px solid #ff405dcc;box-shadow:inset 0 0 15px #ff405d66}.piece{width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 3px 4px #0009);pointer-events:none;position:relative;z-index:2}.coord{position:absolute;font-size:9px;font-weight:900;opacity:.65;z-index:3}.coord.file{right:2px;bottom:1px}.coord.rank{left:2px;top:1px}.insult-display{width:var(--maxBoard);max-width:100%;height:58px;border-radius:12px;border:1px solid #ffffff15;background:linear-gradient(90deg,#130a18,#28112d,#130a18);display:flex;align-items:center;overflow:hidden;padding:6px 12px;box-shadow:inset 0 0 22px #0008}.insult-track{font-size:clamp(11px,1.2vw,14px);font-weight:900;color:#ffd261;line-height:1.25;text-align:center;width:100%;animation:pulseText 1.3s ease-in-out infinite}.insult-track.combo{color:#ff5a70;text-shadow:0 0 12px #ff315877;animation:shake .25s linear 4}@keyframes pulseText{50%{opacity:.72}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.selected-piece{background:linear-gradient(135deg,#1c1326,#120d19);border:1px solid #ffffff18;border-radius:12px;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.selected-piece-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:900}.selected-piece strong{font-size:16px;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-piece-mobile{display:none;width:var(--maxBoard);max-width:100%}
.side-panel{height:min(75vh,700px);display:flex;flex-direction:column;gap:8px;min-height:0}.status-card,.panel-card{background:#15101edc;border:1px solid #ffffff12;border-radius:14px;padding:10px}.status-card{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center}.status-main{font-weight:1000;font-size:15px}.status-sub{font-size:11px;color:var(--muted)}.turn-dot{width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid #aaa;box-shadow:0 0 12px #fff5}.turn-dot.black{background:#171717;border-color:#daa944;box-shadow:0 0 12px #8f63ff88}.score-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.score{background:#0b0810;border-radius:10px;padding:8px;text-align:center;font-size:11px}.score strong{display:block;font-size:18px;color:#ffd261}.captured{min-height:42px;display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start}.captured img{width:25px;height:25px;object-fit:contain}.history-card{flex:1;min-height:0;display:flex;flex-direction:column}.panel-title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#c5b8d0;font-weight:900;margin-bottom:6px}.history{overflow:auto;min-height:0;display:grid;grid-template-columns:32px 1fr 1fr;gap:3px 7px;font-size:11px}.history .num{color:#6f6477}.history .mv{background:#ffffff08;border-radius:6px;padding:4px 5px}.rules-note{font-size:10px;color:#8f8498;line-height:1.25}.game-footer{height:27px;display:flex;justify-content:center;align-items:center;gap:10px;font-size:10px;color:#82778b}.game-footer a{color:#d5b768;text-decoration:none}
.modal{position:fixed;inset:0;z-index:20;background:#07040bd9;display:grid;place-items:center;padding:18px}.modal-card{width:min(520px,92vw);background:#181020;border:1px solid #ffffff1b;border-radius:20px;padding:20px;text-align:center;box-shadow:0 30px 100px #000}.modal-card h2{margin:0 0 8px}.modal-card p{color:#bcaec8}.promo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.promo-btn{background:#ffffff09;border:1px solid #ffffff1b;border-radius:12px;padding:8px;cursor:pointer;color:#fff}.promo-btn img{width:100%;aspect-ratio:1;object-fit:contain}.promo-btn span{font-size:11px;font-weight:800}.result-actions{display:flex;justify-content:center;gap:8px;margin-top:12px}.result-actions button{border:0;border-radius:10px;padding:10px 14px;font-weight:900;cursor:pointer}.primary{background:linear-gradient(135deg,#ffc34d,#ff7b20);color:#1d0f00}.secondary{background:#ffffff12;color:#fff}
@media(max-width:860px){:root{--maxBoard:min(92vw,58dvh)}.selected-piece-desktop{display:none}.selected-piece-mobile{display:flex}.selected-piece{padding:6px 10px}.selected-piece strong{font-size:13px}#game{padding:5px;gap:5px}.topbar{height:42px}.game-main{grid-template-columns:1fr;grid-template-rows:auto auto;gap:5px;align-content:center}.board-column{gap:4px}.insult-display{height:42px}.side-panel{height:auto;width:min(92vw,680px);margin:auto;display:grid;grid-template-columns:1.2fr 1fr;gap:5px}.history-card{display:none}.status-card,.panel-card{padding:7px}.rules-note{display:none}.game-footer{display:none}.setup{grid-template-columns:1fr 1fr}.play-btn{grid-column:1/-1;min-height:50px}.home-card{height:98dvh;width:98vw}.home-content{padding:12px}.brand-mini{top:10px;left:10px}.home-footer{font-size:9px}.difficulty{font-size:10px;padding:8px 4px}.group{padding:8px}}
@media(max-width:520px){:root{--maxBoard:min(96vw,55dvh)}.game-logo{font-size:12px}.small-btn{font-size:10px;padding:6px}.top-actions .hide-mobile{display:none}.side-panel{grid-template-columns:1fr 1fr;width:96vw}.status-main{font-size:12px}.score strong{font-size:14px}.captured{min-height:32px}.captured img{width:20px;height:20px}.home-title{font-size:clamp(28px,10vw,44px)}.home-sub{font-size:12px}.setup{grid-template-columns:1fr}.play-btn{grid-column:auto}.group-title{margin-bottom:5px}.choices,.difficulties{gap:5px}.home-footer{gap:7px}}
@media(max-height:670px) and (min-width:861px){:root{--maxBoard:min(61vh,58vw)}.side-panel{height:78vh}.home-card{height:98dvh}.home-content{padding:16px}.home-title{font-size:42px}.group{padding:7px}.setup{gap:7px}.play-btn{min-height:58px}}