*{box-sizing:border-box}html{background:#07111f;color:#e8eef7}body{margin:0;background:radial-gradient(circle at 50% -10%,#173456 0,#07111f 43%,#050b14 100%);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh;color:#e8eef7;overflow-x:hidden}.bg-orb{position:fixed;width:400px;height:400px;border-radius:50%;filter:blur(100px);opacity:.15;pointer-events:none}.orb1{background:#eab44b;top:8%;left:-250px}.orb2{background:#3478ff;right:-250px;bottom:5%}.nav{height:70px;padding:0 clamp(14px,4vw,60px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0b;background:#07111fcc;backdrop-filter:blur(20px);position:sticky;top:0;z-index:20}.logo{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;font-weight:900;letter-spacing:1px}.logo span span{color:#e5ad3f}.logo-mark{font-size:30px;color:#e5ad3f}.nav-right{display:flex;gap:12px;align-items:center}.nav-right small{color:#8494aa;letter-spacing:1px}.live-dot,.pulse{width:7px;height:7px;background:#35d58b;border-radius:50%;box-shadow:0 0 13px #35d58b;display:inline-block}.glass,.back{border:1px solid #ffffff12;background:#ffffff08;color:inherit;border-radius:11px;padding:9px 12px;text-decoration:none}.app{}.hero{max-width:1400px;margin:auto;padding:65px 22px 35px;display:flex;justify-content:space-between;gap:40px;align-items:center}.kicker{color:#e5ad3f;font-size:11px;font-weight:900;letter-spacing:2px}.hero h1{font-size:clamp(40px,6vw,78px);line-height:.98;margin:12px 0;font-weight:900;letter-spacing:-3px}.hero h1 em{font-style:normal;color:#e5ad3f}.hero h1 strong{color:#fff}.hero p{color:#91a0b5;max-width:620px;line-height:1.7}.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-width:390px}.quick div{padding:18px 14px;border:1px solid #ffffff10;background:#ffffff06;border-radius:16px;display:grid;gap:8px}.quick b{font-size:25px;color:#e5ad3f}.quick span{font-weight:800}.quick small{display:block;color:#8291a7;font-weight:500;margin-top:3px}.modebar{max-width:1400px;margin:auto;padding:0 22px 20px;display:flex;gap:7px}.mode{border:1px solid #ffffff10;background:#ffffff06;color:inherit;padding:11px 16px;border-radius:12px;cursor:pointer;font-weight:700}.mode.active{background:#e5ad3f;color:#111;border-color:#e5ad3f}.game{max-width:1400px;margin:auto;padding:0 22px;display:grid;grid-template-columns:270px minmax(380px,720px) 270px;gap:20px;align-items:start}.panel{display:grid;gap:14px}.glass-card{background:linear-gradient(145deg,#ffffff0a,#ffffff03);border:1px solid #ffffff0d;border-radius:19px;padding:17px;box-shadow:0 20px 60px #0003;backdrop-filter:blur(12px)}.title{font-size:10px;font-weight:900;letter-spacing:1.5px;color:#8795aa;margin-bottom:15px;display:flex;justify-content:space-between}.setup label{display:grid;gap:7px;color:#8e9bb0;font-size:11px;margin-bottom:12px}.setup select{background:#081321;color:#e9eef6;border:1px solid #ffffff12;border-radius:10px;padding:10px}.gold{border:0;background:linear-gradient(135deg,#f0c45c,#d89c28);color:#17120a;border-radius:11px;padding:11px 14px;font-weight:900;cursor:pointer;box-shadow:0 8px 25px #d89c2830}.big{width:100%;padding:13px}.challenge p{font-size:12px;color:#8492a7;line-height:1.5}.sharebox{display:grid;grid-template-columns:1fr auto auto;gap:5px;margin-top:8px}.sharebox input{min-width:0;background:#081321;border:1px solid #ffffff12;color:inherit;border-radius:8px;padding:8px}.sharebox button{border:1px solid #ffffff12;background:#ffffff09;color:inherit;border-radius:8px}.hidden{display:none!important}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.mini-stats small{font-size:9px;color:#75849a;display:block}.mini-stats b{font-size:22px}.arena{min-width:0}.players{display:flex;justify-content:space-between;align-items:center;padding:7px 4px}.player{display:flex;align-items:center;gap:9px}.player small{display:block;color:#7d8ba0;font-size:10px}.avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:21px}.avatar.black{background:#111b2b}.avatar.white{background:#e9ddc8;color:#111}.clock{font-size:25px;font-weight:900;font-variant-numeric:tabular-nums}.clock.active{color:#e5ad3f}.board-wrap{padding:8px;border-radius:20px;background:linear-gradient(135deg,#e5ad3f,#57411e 35%,#111827);box-shadow:0 30px 80px #0008}.board{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border-radius:13px;overflow:hidden;border:2px solid #0b0f15}.sq{appearance:none;border:0;padding:0;position:relative;display:grid;place-items:center;font-size:clamp(30px,7vw,70px);cursor:pointer;line-height:1;user-select:none}.sq.light{background:#f0d9b5}.sq.dark{background:#b58863}.sq.selected{box-shadow:inset 0 0 0 5px #ffd15c}.sq.target:after{content:"";position:absolute;width:20%;height:20%;background:#1118;border-radius:50%}.sq.capture:after{content:"";position:absolute;inset:6%;border:4px solid #f2c94caa;border-radius:50%}.piece{filter:drop-shadow(1px 3px 2px #0007);z-index:1}.tools{display:flex;justify-content:center;gap:7px;margin:12px}.tools button,.sharebtn{border:1px solid #ffffff12;background:#ffffff08;color:inherit;border-radius:10px;padding:9px 13px;cursor:pointer}.status{display:flex;justify-content:center;gap:8px;color:#7e8ca0;font-size:11px}.moves{max-height:270px;overflow:auto;display:grid;grid-template-columns:35px 1fr;gap:3px;font-size:12px}.moves span,.moves b{padding:5px;background:#ffffff05;border-radius:6px}.moves i{color:#728096}.tips{font-size:12px;color:#8997aa;line-height:1.6}.sharebtn{width:100%}.feature-row{max-width:1400px;margin:25px auto 50px;padding:0 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.feature-row article{border:1px solid #ffffff0b;background:#ffffff05;padding:16px;border-radius:15px}.feature-row b{display:block;color:#e7edf7;margin-bottom:5px}.feature-row span{font-size:11px;color:#77869c}.modal{position:fixed;inset:0;background:#000b;z-index:80;display:grid;place-items:center;padding:20px}.dialog{position:relative;background:#101b2c;border:1px solid #ffffff15;border-radius:24px;padding:30px;max-width:430px;width:100%;text-align:center;box-shadow:0 30px 100px #000}.result-icon{font-size:48px;color:#e5ad3f}.dialog h2{margin:5px 0}.dialog p{color:#91a0b5}.x{position:absolute;right:14px;top:10px;background:none;border:0;color:inherit;font-size:25px;cursor:pointer}.toast{position:fixed;right:18px;bottom:18px;background:#152238;border:1px solid #ffffff14;padding:12px 16px;border-radius:12px;opacity:0;transform:translateY(20px);transition:.25s;z-index:100;box-shadow:0 15px 50px #0008}.toast.show{opacity:1;transform:none}.light{color-scheme:light}body.light{background:#f4f7fb;color:#172033}body.light .nav{background:#ffffffdd}.light .glass-card,.light .feature-row article{background:#fff;border-color:#dce3ee}.light .hero h1 strong{color:#172033}.light .mode{background:#fff;color:#172033;border-color:#dce3ee}.light .setup select,.light .sharebox input{background:#f7f9fc;color:#172033}.light .glass{background:#fff;color:#172033}@media(max-width:1120px){.game{grid-template-columns:230px minmax(330px,650px)}.right{grid-column:1/-1;grid-template-columns:1fr 1fr 1fr}.feature-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.hero{display:block;padding-top:35px}.quick{min-width:0;margin-top:22px}.game{display:flex;flex-direction:column}.arena{width:100%;order:-1}.left,.right{width:100%;display:grid;grid-template-columns:1fr 1fr}.left .challenge,.left .mini-stats,.right .share{grid-column:1/-1}.feature-row{grid-template-columns:1fr 1fr}.nav-right small,.live-dot{display:none}}@media(max-width:500px){.nav{height:58px}.back{font-size:11px}.hero h1{letter-spacing:-2px}.quick{grid-template-columns:1fr}.modebar{overflow:auto}.mode{white-space:nowrap}.game{padding:0 9px}.left,.right{grid-template-columns:1fr}.left .challenge,.left .mini-stats,.right .share{grid-column:auto}.board-wrap{padding:4px;border-radius:13px}.sq{font-size:clamp(27px,11vw,52px)}.tools{flex-wrap:wrap}.feature-row{padding:0 9px;grid-template-columns:1fr}.clock{font-size:20px}}
.sq:focus{outline:none}.sq:active{transform:none}.sq .piece{pointer-events:none}.board{background:#b58863}

/* YOS CATUR BOARD STABILITY & ANIMATION FIX */
.board{
  width:100%;
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  grid-template-rows:repeat(8,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  overflow:hidden;
  contain:strict;
  position:relative;
}
.sq{
  appearance:none;
  -webkit-appearance:none;
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  aspect-ratio:1/1;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  outline:none;
  overflow:hidden;
  position:relative;
  display:block;
  line-height:0;
  font-size:0;
  transform:none!important;
}
.sq::before,.sq::after{pointer-events:none;box-sizing:border-box}
.sq.light.trail-from{background:#f5ea77}
.sq.dark.trail-from{background:#ccb346}
.sq.light.trail-to{background:#f2df52}
.sq.dark.trail-to{background:#c2a432}
.sq.trail-from::before{
  content:"";
  position:absolute;
  inset:3px;
  border:2px dashed #17203366;
  border-radius:4px;
  z-index:1;
}
.sq.trail-to::before{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 3px #e5ad3f;
  z-index:1;
}
.sq.selected{box-shadow:none}
.sq.selected::before{
  content:"";
  position:absolute;
  inset:4px;
  border:4px solid #ffd15c;
  box-shadow:inset 0 0 0 1px #1114;
  z-index:2;
}
.sq.target::after{
  content:"";
  position:absolute;
  width:18%;
  height:18%;
  min-width:10px;
  min-height:10px;
  max-width:18px;
  max-height:18px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#171717cc;
  border:2px solid #ffffff66;
  border-radius:50%;
  z-index:3;
}
.sq.capture::after{
  content:"";
  position:absolute;
  inset:5px;
  border:4px solid #f2c94c;
  border-radius:50%;
  background:transparent;
  z-index:3;
}
.sq .piece{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  line-height:1;
  font-size:clamp(30px,7vw,70px);
  z-index:2;
  will-change:transform;
}
.trail-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:4;
}
.flying-piece{
  position:absolute;
  width:12.5%;
  height:12.5%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  line-height:1;
  font-size:clamp(30px,7vw,70px);
  filter:drop-shadow(2px 6px 5px #000a);
  z-index:10;
  will-change:left,top,transform;
}
@media(max-width:500px){
  .sq .piece,.flying-piece{font-size:clamp(27px,11vw,52px)}
}
.tools button#hint{min-width:125px}