@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Libre+Baskerville:ital@0;1&display=swap');
:root{--gold:#c9a55a;--pale:#e6d9b6;--stone:#28241f;--dark:#0d0b09;--green:#6f8b64;--red:#a94c3f}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:#0b0907;color:var(--pale)}
body{font-family:Cinzel,serif;overflow-x:hidden;background:
radial-gradient(circle at 50% 20%,rgba(116,93,56,.24),transparent 30%),
linear-gradient(rgba(5,5,4,.62),rgba(5,5,4,.86)),
repeating-linear-gradient(90deg,#16120e 0 70px,#1b1611 70px 73px,#100d0a 73px 140px)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background:
radial-gradient(circle at 20% 30%,#8b754d 0 1px,transparent 2px),
radial-gradient(circle at 80% 60%,#8b754d 0 1px,transparent 2px);background-size:47px 53px,61px 67px}
.app{width:min(1500px,96vw);margin:auto;padding:20px 0 32px;position:relative;z-index:2}
header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #665437;padding:8px 10px 16px}
.eyebrow{font-size:10px;letter-spacing:4px;color:#8d7954} h1{margin:3px 0 0;font-size:clamp(28px,4vw,54px);letter-spacing:5px;color:#d8bc78;text-shadow:0 2px 12px #000}
.stone-btn{font:700 12px Cinzel;color:#d8c28d;background:linear-gradient(#383028,#17130f);border:1px solid #7b6641;padding:12px 18px;letter-spacing:1px;cursor:pointer;box-shadow:inset 0 0 12px #000,0 3px 8px #000}
.stone-btn:active{transform:translateY(1px)} .game-shell{display:grid;grid-template-columns:210px minmax(320px,760px) 210px;gap:20px;justify-content:center;align-items:center;margin-top:22px}
.panel{min-height:360px;background:linear-gradient(135deg,rgba(52,45,36,.88),rgba(17,14,11,.94));border:1px solid #5b4b34;padding:18px;box-shadow:inset 0 0 30px #080706,0 10px 30px #000}
.panel h2{font-size:13px;letter-spacing:2px;color:#a78c55;border-bottom:1px solid #4d402e;padding-bottom:10px}.sigil{text-align:center;font-size:60px;color:#86755d;text-shadow:0 5px 8px #000}.opponent{text-align:center;font-size:13px;line-height:1.5;margin:5px 0 22px}
label,.captured-block>span{font-size:9px;letter-spacing:2px;color:#8f7c5a} select{width:100%;margin-top:7px;padding:9px;background:#15120f;color:#d8c99f;border:1px solid #5b4b34;font-family:Cinzel}
.legend{display:grid;gap:12px;margin-top:30px;font-size:9px}.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:8px}.selected-dot{background:#c4a95f}.move-dot{background:#7b9c70}.capture-dot{background:#ad5145}
.board-area{text-align:center}.status{letter-spacing:5px;font-size:12px;color:#c8a65c;margin-bottom:10px;min-height:18px}
.board-wrap{position:relative;padding:18px;background:linear-gradient(135deg,#3b3126,#15110d);border:2px solid #705c3d;box-shadow:0 20px 55px #000,inset 0 0 22px #000}
.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:2px solid #0c0a08;touch-action:manipulation}
.square{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;overflow:hidden}
.light{background:linear-gradient(135deg,#9a8a6d,#6d604a)}.dark{background:linear-gradient(135deg,#4a4236,#2c2821)}
.square:before{content:"";position:absolute;inset:0;opacity:.14;background:radial-gradient(circle at 30% 30%,white 0 1px,transparent 2px);background-size:17px 19px}
.piece{font-family:"Times New Roman",serif;font-size:clamp(32px,6vw,72px);line-height:1;z-index:2;filter:drop-shadow(0 5px 3px #000);transition:transform .18s}
.white-piece{color:#ddd1b6;text-shadow:0 0 1px #fff,1px 2px 0 #5f5545}.black-piece{color:#26231f;text-shadow:0 1px 0 #7a6d5b,0 0 4px #000}
.square.selected{box-shadow:inset 0 0 0 5px rgba(218,183,92,.9)}.square.legal:after{content:"";position:absolute;width:20%;height:20%;border-radius:50%;background:rgba(119,163,102,.9);box-shadow:0 0 14px #719765;z-index:3}.square.capture:after{width:72%;height:72%;background:transparent;border:4px solid rgba(174,72,58,.85);box-shadow:inset 0 0 14px #7d241b,0 0 10px #7d241b}
.square.last{box-shadow:inset 0 0 0 4px rgba(192,162,86,.35)}
.message{font-family:"Libre Baskerville",serif;font-style:italic;color:#9e8e6e;font-size:12px;margin-top:14px;min-height:18px}
.captured-block{min-height:105px;margin:18px 0}.captured{font-family:"Times New Roman",serif;font-size:28px;line-height:1.2;margin-top:8px;word-break:break-all}.secondary{width:100%;margin-top:10px;font-size:9px}
.impact{position:fixed;pointer-events:none;width:20px;height:20px;border-radius:50%;opacity:0;z-index:20;background:#d8c078;box-shadow:0 0 30px 18px #d18b45}
.impact.boom{animation:boom .45s ease-out}@keyframes boom{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(6)}}
.fog{position:fixed;width:70vw;height:25vh;background:rgba(160,150,130,.04);filter:blur(30px);border-radius:50%;animation:drift 18s infinite alternate;pointer-events:none}.fog1{top:12%;left:-20%}.fog2{bottom:5%;right:-25%;animation-delay:-7s}@keyframes drift{to{transform:translateX(35vw)}}
@media(max-width:950px){.game-shell{grid-template-columns:1fr}.panel{min-height:0}.left-panel,.right-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:center}.panel h2{grid-column:1/-1}.sigil{font-size:38px}.opponent{margin:0}.legend{margin-top:0}.captured-block{min-height:60px;margin:5px 0}.board-area{grid-row:1}.left-panel{grid-row:2}.right-panel{grid-row:3}}
@media(max-width:520px){.app{width:100%;padding:8px}.game-shell{gap:10px;margin-top:12px}header{padding:8px 4px 10px}h1{font-size:25px;letter-spacing:2px}.eyebrow{font-size:7px;letter-spacing:2px}.stone-btn{padding:9px 10px;font-size:9px}.board-wrap{padding:8px}.piece{font-size:clamp(34px,11vw,52px)}.left-panel,.right-panel{padding:12px}.status{margin-bottom:6px}.message{margin:8px 4px 0}.panel{padding:12px}}

/* Sculpted stone army pieces */
.stone-piece{width:82%;height:88%;object-fit:contain;filter:drop-shadow(0 7px 4px rgba(0,0,0,.85));transition:transform .18s,filter .18s}
.square:hover .stone-piece{transform:translateY(-3px);filter:drop-shadow(0 10px 5px rgba(0,0,0,.9)) brightness(1.08)}
.white-piece{color:unset;text-shadow:none}.black-piece{color:unset;text-shadow:none}
@media(max-width:520px){.stone-piece{width:88%;height:91%}}

/* v3 larger statue presentation */
.stone-piece{width:94%!important;height:96%!important;transform:translateY(-1px)}
.square:hover .stone-piece{transform:translateY(-4px) scale(1.03)}

/* v4 photographic Wizarding Chess reference pieces */
.board-wrap{padding:7px!important}
.stone-piece{width:100%!important;height:100%!important;object-fit:contain!important;transform:scale(1.18) translateY(-2%)!important;filter:drop-shadow(0 8px 5px rgba(0,0,0,.82))!important}
.square{overflow:visible!important}
.square:hover .stone-piece{transform:scale(1.24) translateY(-4%)!important}
.board{overflow:hidden}
@media(max-width:520px){.board-wrap{padding:4px!important}.stone-piece{transform:scale(1.16) translateY(-1%)!important}}