@import "tailwindcss";

:root { --gold:#d8ad52; --gold-light:#f4d98a; --ink:#080b0c; --panel:#111719; --ivory:#eee3c5; --blood:#a4352f; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#080b0c; color:#e9e4d7; }
body { font-family:Georgia,"Times New Roman",serif; }
button { font:inherit; }
.game-shell { min-height:100vh; overflow:hidden; position:relative; background:radial-gradient(circle at 50% 10%,#24302d 0,#101718 36%,#070a0b 76%); }
.game-shell:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(30deg,transparent 48%,rgba(255,255,255,.045) 50%,transparent 52%); background-size:8px 8px; }
.atmosphere span { position:fixed; border-radius:50%; filter:blur(80px); opacity:.12; pointer-events:none; }
.atmosphere span:nth-child(1){width:420px;height:420px;background:#d1a744;left:-200px;top:20%}.atmosphere span:nth-child(2){width:380px;height:380px;background:#32685b;right:-180px;top:15%}.atmosphere span:nth-child(3){width:300px;height:300px;background:#9d312c;left:42%;bottom:-230px}
.topbar { height:84px; border-bottom:1px solid rgba(216,173,82,.25); display:flex; justify-content:space-between; align-items:center; padding:0 clamp(20px,4vw,64px); background:rgba(6,9,10,.83); backdrop-filter:blur(12px); position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:15px; }.crest{width:48px;height:52px;display:grid;place-items:center;color:#111;background:linear-gradient(135deg,#f0d47d,#a97b27);font-size:31px;clip-path:polygon(50% 0,95% 17%,88% 76%,50% 100%,12% 76%,5% 17%)}
.brand span { display:block; font:600 9px Arial,sans-serif; letter-spacing:3.8px;color:#9f9b8f;margin-bottom:4px}.brand strong{font-size:20px;letter-spacing:2.6px;color:#f2e5be}.header-actions{display:flex;gap:10px}.header-actions button,.board-controls button{border:1px solid rgba(216,173,82,.35);background:#121819;color:#d9cda9;cursor:pointer;letter-spacing:1.4px}.icon-btn{width:42px;height:42px;font-size:20px}.new-btn{height:42px;padding:0 21px!important;background:linear-gradient(#c6973e,#9a6c22)!important;color:#100e09!important;font:700 11px Arial,sans-serif!important}.header-actions button:hover,.board-controls button:hover{border-color:var(--gold-light);filter:brightness(1.1)}
.arena { position:relative;z-index:2;display:grid;grid-template-columns:minmax(210px,265px) minmax(480px,670px) minmax(215px,280px);gap:clamp(18px,2.5vw,40px);justify-content:center;align-items:start;padding:28px clamp(18px,3vw,48px) 22px; }
.panel{border:1px solid rgba(216,173,82,.18);background:linear-gradient(145deg,rgba(22,29,29,.88),rgba(8,12,13,.92));box-shadow:0 18px 50px #0007;padding:25px 22px;min-height:580px;position:relative}.panel:before,.panel:after{content:"";position:absolute;width:28px;height:28px;border-color:var(--gold);opacity:.4}.panel:before{left:8px;top:8px;border-left:1px solid;border-top:1px solid}.panel:after{right:8px;bottom:8px;border-right:1px solid;border-bottom:1px solid}.eyebrow{font:700 9px Arial,sans-serif;letter-spacing:4px;color:var(--gold);margin:0 0 6px}.panel h2{font-size:25px;font-weight:400;margin:0 0 28px;color:#f1e6c9}.field-label{font:700 8px Arial,sans-serif;letter-spacing:2.2px;color:#777f7b;display:block;margin:20px 0 8px}.segmented{display:grid;grid-template-columns:1fr 1fr;border:1px solid #313a37}.segmented button,.difficulty button{border:0;background:#0d1213;color:#767e7b;padding:12px 5px;font:700 9px Arial,sans-serif;letter-spacing:.7px;cursor:pointer}.segmented button.active{background:linear-gradient(#d4aa51,#9b7029);color:#111}.difficulty{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.difficulty button{border:1px solid #27302e;text-transform:uppercase}.difficulty button span{display:block;font-size:22px;margin-bottom:4px}.difficulty button.active{border-color:var(--gold);color:#e9d7a5;background:#19201f;box-shadow:inset 0 0 16px #d8ad5214}.lore{margin:31px 0 24px;border-top:1px solid #272d2c;border-bottom:1px solid #272d2c;padding:17px 5px 17px 31px;position:relative;color:#989e98;font-style:italic;font-size:13px;line-height:1.5}.lore span{position:absolute;left:0;top:7px;font-size:38px;color:var(--gold)}.lore p{margin:0}.legend{font:10px Arial,sans-serif;color:#7f8783;display:grid;gap:9px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}.dot.move{background:#82b58a;box-shadow:0 0 8px #82b58a}.dot.attack{border:2px solid #c95c4f;box-shadow:0 0 8px #c95c4f}
.board-stage{display:flex;flex-direction:column;align-items:center}.turn-banner{font:700 10px Arial,sans-serif;letter-spacing:2px;color:#d8d2bf;margin-bottom:12px;background:#18201f;border:1px solid #39433f;padding:9px 20px;min-width:330px;text-align:center;box-shadow:0 7px 20px #0006}.status-dot{display:inline-block;width:7px;height:7px;background:#ead8a4;border-radius:50%;margin-right:10px;box-shadow:0 0 9px #ead8a4}.dark-turn .status-dot{background:#a33b36;box-shadow:0 0 9px #a33b36}.board-frame{width:min(100%,650px);aspect-ratio:1;padding:18px;background:linear-gradient(135deg,#705222,#d5a850 24%,#5b3d18 51%,#c99b43 78%,#6a4a1f);box-shadow:0 26px 60px #000c,0 0 0 1px #e5c477;position:relative;clip-path:polygon(2% 0,98% 0,100% 2%,100% 98%,98% 100%,2% 100%,0 98%,0 2%)}.board-frame:before{content:"";position:absolute;inset:8px;border:1px solid #3a2914;box-shadow:inset 0 0 9px #0008}.corner{position:absolute;width:12px;height:12px;background:#24180b;border:2px solid #e1bd68;border-radius:50%;z-index:3}.c1{left:7px;top:7px}.c2{right:7px;top:7px}.c3{left:7px;bottom:7px}.c4{right:7px;bottom:7px}.chessboard{display:grid;grid-template-columns:repeat(8,1fr);height:100%;box-shadow:inset 0 0 28px #000b;position:relative}.square{border:0;position:relative;display:grid;place-items:center;padding:0;cursor:pointer;isolation:isolate}.square.light{background:linear-gradient(135deg,#b8a77c,#dfce9c)}.square.dark{background:linear-gradient(135deg,#263a35,#3d554b)}.square:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,#fff1,transparent 55%);z-index:-1}.square:hover{filter:brightness(1.13)}.square.selected{box-shadow:inset 0 0 0 4px #f0cd68,inset 0 0 22px #f0cd68;z-index:2}.square.movable:before{content:"";position:absolute;width:22%;height:22%;border-radius:50%;background:#deca78aa;box-shadow:0 0 12px #fff9}.square.attackable:before{content:"";position:absolute;inset:5px;border:4px solid #c7443c;border-radius:50%;box-shadow:inset 0 0 14px #c7443c,0 0 10px #a12828}.square.checked{animation:danger 1s infinite alternate}.piece{font-family:"Times New Roman",serif;font-size:clamp(36px,5vw,61px);line-height:1;transform:translateY(-1px);transition:.16s;filter:drop-shadow(0 5px 2px #0008);user-select:none}.square:hover .piece{transform:translateY(-4px) scale(1.04)}.piece.ivory{color:#fff3ce;text-shadow:0 1px #604d2a,1px 0 #604d2a,-1px 0 #604d2a,0 -1px #604d2a}.piece.obsidian{color:#171b1b;text-shadow:0 1px #918161,1px 0 #918161,-1px 0 #918161,0 -1px #918161;filter:drop-shadow(0 5px 2px #000b)}.rank,.file{position:absolute;font:700 8px Arial,sans-serif;color:#2b251b;opacity:.68}.rank{left:3px;top:3px}.file{right:3px;bottom:2px}.board-controls{display:flex;width:100%;justify-content:space-between;align-items:center;margin-top:15px;color:#737d79;font:9px Arial,sans-serif;letter-spacing:1.5px}.board-controls button{padding:8px 12px;font:700 8px Arial,sans-serif}.board-controls button:disabled{opacity:.3;cursor:not-allowed}
.right-panel h2{margin-bottom:18px}.players{display:grid;gap:8px;margin-bottom:18px}.players>div{position:relative;display:flex;align-items:center;gap:11px;padding:11px;background:#0b1011;border:1px solid #242c2a;opacity:.62}.players>div.current{opacity:1;border-color:#663634;background:linear-gradient(90deg,#231416,#101415)}.players>div.light-player.current{opacity:1;border-color:#86713d;background:linear-gradient(90deg,#252115,#101514)}.avatar{width:38px;height:38px;display:grid;place-items:center;background:#1a2020;border:1px solid #3b4642;font-size:27px}.players small{display:block;font:700 7px Arial,sans-serif;letter-spacing:1.2px;color:#777f7b;margin-bottom:4px}.players b{font-size:13px;font-weight:400;color:#e8dec5}.players i{position:absolute;right:10px;width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 8px var(--gold)}.move-log{height:235px;overflow:auto;border-top:1px solid #28302e;border-bottom:1px solid #28302e;padding:8px 0}.move-log>div:not(.empty-log){font:10px Arial,sans-serif;color:#a9afa9;padding:9px 3px;border-bottom:1px solid #1d2422}.move-log>div>span{color:#59615e;margin-right:9px}.empty-log{text-align:center;padding:48px 12px;color:#69716d}.empty-log span{font-size:34px;color:#826a38}.empty-log p{font-size:12px;line-height:1.45}.tip{margin-top:18px;background:#171d1b;border-left:2px solid var(--gold);padding:12px 13px}.tip b{font:700 8px Arial,sans-serif;letter-spacing:1.5px;color:var(--gold)}.tip p{font-size:11px;color:#8f9690;line-height:1.45;margin:6px 0 0}
footer{height:43px;border-top:1px solid #202827;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;color:#555e5a;font:700 7px Arial,sans-serif;letter-spacing:2px;position:relative;z-index:2}footer b{color:#816b3d;font-weight:400}
.battle-flash{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(circle,#b43b2680,transparent 47%);pointer-events:none;animation:flash .85s ease-out}.fighter{position:absolute;font-size:min(28vw,260px);filter:drop-shadow(0 18px 10px #000);text-shadow:0 0 30px #fff5}.attacker{left:25%;animation:charge .55s ease-in-out}.defender{right:25%;animation:fall .7s .2s ease-in forwards}.slash{font-size:120px;color:#ffe6a0;filter:drop-shadow(0 0 20px #ff5d32);animation:slash .5s ease-out}.battle-flash strong{position:absolute;bottom:18%;font:700 clamp(22px,5vw,64px) Arial,sans-serif;letter-spacing:10px;color:#fff0c1;text-shadow:0 4px 0 #611,0 0 22px #f54}
@keyframes danger{to{box-shadow:inset 0 0 25px #e13b33,inset 0 0 0 4px #d64840}}@keyframes flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}@keyframes charge{50%{transform:translateX(30%) scale(1.2)}}@keyframes fall{to{transform:rotate(35deg) translateY(80px);opacity:0}}@keyframes slash{from{transform:scale(2.5) rotate(-25deg);opacity:0}to{transform:scale(1) rotate(10deg);opacity:1}}
@media(max-width:1100px){.arena{grid-template-columns:minmax(480px,650px) 260px}.left-panel{grid-column:1/3;min-height:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 20px}.left-panel h2{grid-column:1/4}.left-panel .lore,.left-panel .legend{display:none}.board-stage{grid-column:1}.right-panel{grid-column:2}.field-label{margin-top:5px}}
@media(max-width:780px){.topbar{height:70px}.brand span{display:none}.brand strong{font-size:14px}.crest{width:40px;height:44px}.new-btn{padding:0 12px!important}.arena{display:flex;flex-direction:column;padding:16px 10px}.board-stage{order:1;width:100%}.left-panel{order:2;display:block;width:100%;min-height:auto}.right-panel{order:3;width:100%;min-height:auto}.board-frame{padding:10px}.turn-banner{min-width:0;width:100%;font-size:8px}.piece{font-size:clamp(31px,10vw,55px)}footer{display:none}.panel{min-height:auto}.battle-flash .attacker{left:10%}.battle-flash .defender{right:10%}}