.x3d-app{--gold:#d9b76d;background:radial-gradient(circle at 50% 0,#26303a,#080a0d 58%);color:#f5f0e7;border-radius:24px;padding:24px;max-width:1250px;margin:20px auto;font-family:Inter,system-ui,sans-serif;box-shadow:0 30px 100px #000b}.x3d-header{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid #fff1;padding:10px 4px 20px}.x3d-header small{letter-spacing:4px;color:var(--gold);font-size:9px}.x3d-header h2{font-size:34px;margin:5px 0}.x3d-header h2 i{color:var(--gold);font-style:normal}.x3d-header p{color:#9ea6af;margin:0}.x3d-header-actions{display:flex;gap:8px;flex-wrap:wrap}.x3d-header button,.x3d-panel button,.x3d-home button{border:1px solid #fff2;background:#ffffff09;color:#fff;border-radius:10px;padding:11px 14px;cursor:pointer}.x3d-header button:hover,.x3d-panel button:hover{border-color:var(--gold)}.x3d-home{min-height:650px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#3a2b17,#0a0d10 58%);border-radius:18px;margin-top:24px}.x3d-hero{text-align:center;max-width:470px;padding:45px}.king{font-size:85px;color:var(--gold);text-shadow:0 15px 30px #000}.x3d-hero h1{font-size:35px;margin:10px 0}.x3d-hero p{color:#abb2ba;line-height:1.6}.x3d-level{text-align:left;margin:25px 0}.x3d-level label{display:block;font-size:11px;color:#9da4ac;margin-bottom:7px}.x3d-level select{width:100%;padding:12px;background:#080b0e;color:#fff;border:1px solid #fff2;border-radius:10px}.x3d-home button{display:block;width:100%;margin:7px 0}.x3d-home .gold{background:linear-gradient(135deg,#e1c17b,#8f6a34);color:#171109;border:0;font-weight:800}.x3d-app [hidden]{display:none!important}#x3d-match{display:grid;grid-template-columns:270px 1fr;gap:28px;align-items:center;padding:28px 0}.x3d-panel{background:#0d1115;border:1px solid #fff1;border-radius:18px;padding:14px;min-height:620px;display:flex;flex-direction:column;gap:10px}.player{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px;background:#fff1;padding:10px;border-radius:12px}.player span{font-size:30px}.player small{display:block;color:#737c86;font-size:10px}.player strong{color:var(--gold)}.status{text-align:center;color:var(--gold);padding:11px;border-block:1px solid #fff1}.moves{flex:1;overflow:auto}.moves h4{margin:6px 0;color:#aaa}.moves div{font-size:12px;padding:4px;color:#d5d9de}.board-area{display:grid;place-items:center;perspective:1200px}.board{width:min(78vw,700px);aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border:14px solid #2a190c;border-radius:7px;transform:rotateX(7deg);box-shadow:0 38px 55px #000c,0 9px 0 #0a0603}.sq{border:0;display:grid;place-items:center;cursor:pointer;position:relative}.sq.light{background:linear-gradient(145deg,#ead9ad,#c7a96e)}.sq.dark{background:linear-gradient(145deg,#75502a,#452a16)}.sq:hover{filter:brightness(1.15)}.sq.sel{box-shadow:inset 0 0 0 5px #e5c06c,inset 0 0 35px #e5c06c66}.piece{font-family:"Times New Roman",serif;font-size:clamp(34px,7vw,76px);line-height:1;text-shadow:0 8px 5px #000a,0 1px 0 #fff5;transition:.15s}.sq:hover .piece{transform:translateY(-6px) scale(1.04)}.piece.w{color:#fff8e9}.piece.b{color:#17110d}.modal{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:99999;padding:20px}.modal-box{position:relative;width:min(720px,100%);max-height:85vh;overflow:auto;background:#11161b;border:1px solid #d9b76d55;border-radius:20px;padding:35px}.close{position:absolute;right:12px;top:8px;background:none;border:0;color:#fff;font-size:32px;cursor:pointer}.helpgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.helpgrid div{padding:14px;background:#fff1;border:1px solid #fff1;border-radius:10px;line-height:1.6}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:#151a20;border:1px solid #d9b76d66;padding:12px 18px;border-radius:10px;z-index:100000;transition:.2s}.toast.on{opacity:1;transform:translate(-50%,0)}@media(max-width:800px){.x3d-app{padding:12px}.x3d-header{display:block}.x3d-header-actions{margin-top:15px}#x3d-match{grid-template-columns:1fr}.x3d-panel{order:2;min-height:0}.board{width:min(94vw,700px);border-width:8px}.helpgrid{grid-template-columns:1fr}}