:root{
  --bg:#0e1116;--panel:#151a21;--card:#171c23;--card2:#11151b;--text:#e7e7e7;--muted:#aab1bb;--border:#29313b;
  --light:#f0d9b5;--dark:#b58863;--accent:#4ba3ff;--green:#62d26f;--danger:#ff4e4e;--hi:#ff3030;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(circle at top,#15191f 0,#0d1014 55%,#090b0e 100%);color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:var(--text);text-decoration:none}
.topbar{height:70px;display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:#0b0d10dd;border-bottom:1px solid #20252c;backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:12px}.logo{font-size:36px}.brand h1{font-size:30px;line-height:1;margin:0}.brand p{margin:4px 0 0;color:var(--muted)}
nav{display:flex;gap:14px;align-items:center}
nav select{width:auto;min-width:120px}
.app{height:calc(100vh - 70px);max-width:1600px;margin:0 auto;padding:12px 16px 14px;display:grid;grid-template-columns:330px minmax(520px,820px) 380px;gap:18px}
.panel{min-height:0;display:flex;flex-direction:column;gap:10px}
.card,.player-card{background:linear-gradient(145deg,#171c23,#10141a);border:1px solid var(--border);border-radius:9px;box-shadow:0 12px 30px #0006, inset 0 1px 0 #ffffff08}
.card{padding:16px}.card.grow{flex:1;min-height:0}
.card h2{margin:0 0 16px;font-size:19px}.card label{display:block;margin:13px 0;color:var(--muted);font-size:16px}
select,button,.button-link{width:100%;margin-top:8px;background:#242b34;color:var(--text);border:1px solid #303946;border-radius:7px;padding:13px 14px;font-size:15px}
button,.button-link{display:block;cursor:pointer;font-weight:700;text-align:left}.button-link{text-align:center}button:hover,.button-link:hover{background:#2e3742}
#newGameBtn{background:#1f62c4;border-color:#2773e5}
.center{min-width:0;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.player-card{padding:8px 12px}.player-row{height:34px;display:flex;justify-content:space-between;align-items:center;font-size:20px}
.captured-box{background:linear-gradient(180deg,#8b5f36,#5b3d23);border:1px solid #9d7146;border-radius:7px;min-height:64px;padding:7px 10px;overflow:hidden}
.box-title{display:block;color:#f6dfbd;font-size:14px;margin-bottom:6px;text-shadow:0 1px 2px #000}
.pieces{display:grid;grid-template-columns:repeat(15, minmax(0,1fr));gap:4px;align-items:center;min-height:30px;max-width:100%}
.pool-piece{display:grid;place-items:center;height:32px;border-radius:0;background:transparent;font-size:31px;line-height:1;transition:transform .2s, filter .2s, color .2s;text-shadow:0 2px 5px #000}
.pool-piece.white{color:#fff;text-shadow:0 2px 5px #000,0 0 1px #000}.pool-piece.black{color:#050505;text-shadow:0 1px 0 #cfa977,0 2px 5px #000,0 0 1px #fff}
.pool-piece.rng-pool-highlight{background:transparent;color:#fff!important;text-shadow:0 0 10px #fff,0 0 24px #ff0000;transform:scale(1.45);filter:drop-shadow(0 0 12px #ff2020);z-index:3}
.clock{background:#0b0e12;border-radius:8px;padding:7px 16px;font-weight:900;font-size:25px;color:#fff;min-width:68px;text-align:center;border-bottom:4px solid #343b44}.clock.active{border-bottom-color:var(--accent);box-shadow:0 0 18px #2d94ff55}
.turn-dot::after{content:"";display:inline-block;width:15px;height:15px;border:2px solid #000;background:#0b0b0b;border-radius:50%;margin-left:12px;vertical-align:middle}.white-side .turn-dot::after{background:#f2ead8}
.turn-dot.active::after{box-shadow:0 0 0 3px #ffffff18,0 0 18px var(--accent)}
.board{width:min(calc(100vh - 300px),820px,100%);aspect-ratio:1/1;min-width:0;margin:0 auto;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:5px;overflow:hidden;box-shadow:0 16px 45px #000a}
.square{position:relative;display:grid;place-items:center;aspect-ratio:1/1;font-size:clamp(34px, min(7.2vh, 4.4vw), 66px);user-select:none}
.light{background:var(--light)}.dark{background:var(--dark)}
.piece{position:relative;z-index:2;text-shadow:0 2px 4px #000b}.white{color:#fbf8ef}.black{color:#090909}
.selected::after{content:"";position:absolute;inset:0;background:#f3e45188}.legal::before{content:"";position:absolute;width:25%;height:25%;background:#0006;border-radius:50%}
.capture.legal::before{width:82%;height:82%;background:transparent;border:5px solid #0007}.last::after{content:"";position:absolute;inset:0;background:#e9dc5a50}.check::after{content:"";position:absolute;inset:0;background:#ff454599}
.rng-board-highlight::before{content:"";position:absolute;inset:4%;border:6px solid #fff;background:#ff2b2bcc;border-radius:10px;z-index:1;box-shadow:0 0 0 4px #ff0000,0 0 32px #ff1515;animation:rngPulse .25s linear}
@keyframes rngPulse{from{transform:scale(.85);opacity:.2}to{transform:scale(1);opacity:1}}
.fly-piece{position:fixed;z-index:9999;font-size:48px;line-height:1;pointer-events:none;transition:transform .46s cubic-bezier(.2,.75,.3,1), opacity .46s ease;text-shadow:0 2px 6px #000}
#moveList{max-height:50vh;overflow:auto;padding-left:26px;line-height:1.8}.log{height:100%;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px}.log-entry{background:#10141a;border-left:3px solid var(--green);border-radius:5px;padding:9px;font-size:14px;line-height:1.35}.log-entry.danger{border-left-color:var(--danger)}
.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center}.hidden{display:none}.modal-card{background:var(--card);padding:24px;border-radius:14px;border:1px solid var(--border);text-align:center}.promotion-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.promotion-options button{text-align:center;font-size:34px}
.rules-page{max-width:900px;margin:28px auto;padding:24px;background:var(--card);border:1px solid var(--border);border-radius:14px;line-height:1.65}
@media(max-width:1250px){.app{grid-template-columns:1fr}.board{width:min(94vw,calc(100vh - 300px),760px)}.left{order:2}.center{order:1}.right{order:3}.app{height:auto}.card.grow{min-height:240px}}
@media(max-width:560px){.topbar{height:auto;align-items:flex-start}.brand h1{font-size:25px}.app{padding:10px}.player-row{font-size:18px}.pieces{grid-template-columns:repeat(8,1fr)}.captured-box{min-height:84px}.board{width:94vw}.square{font-size:clamp(30px,10vw,44px)}}

.promotion-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.promotion-pool-btn{font-size:34px;text-align:center;background:#242b34}
.promotion-pool-btn.white{color:#fff}
.promotion-pool-btn.black{color:#050505;text-shadow:0 1px 0 #cfa977,0 2px 5px #000,0 0 1px #fff}
.invalid-flash{animation:invalidFlash .25s linear 2}
@keyframes invalidFlash{0%{box-shadow:0 0 0 0 #ff3030}50%{box-shadow:0 0 0 6px #ff303088}100%{box-shadow:0 0 0 0 #ff3030}}

.soft-sep{border:0;border-top:1px solid var(--border);margin:14px 0}
.online-status{margin-top:12px;padding:10px;border-radius:7px;background:#11151b;border:1px solid var(--border);color:var(--muted);font-size:13px;line-height:1.4}
.online-status.active{color:#e7e7e7;border-color:#2d7ee8;box-shadow:0 0 14px #2d7ee833}


/* Alpha 0.7.2 mobile board geometry fix */
.board{
  position:relative;
  display:grid !important;
  grid-template-columns:repeat(8, minmax(0, 1fr)) !important;
  grid-template-rows:repeat(8, minmax(0, 1fr)) !important;
  gap:0 !important;
  aspect-ratio:1 / 1 !important;
  line-height:1 !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  contain:layout paint;
}

.square{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  overflow:hidden;
}

.square .piece,
.piece{
  display:block;
  line-height:1 !important;
  pointer-events:none;
}

.player-card,
.captured-box,
.clock{
  position:relative;
  z-index:2;
}

.board{
  z-index:1;
}

/* Prevent the player timer/card from covering board squares on narrow screens */
@media(max-width:700px){
  .app{
    display:block !important;
    height:auto !important;
    min-height:100vh;
    padding:10px !important;
  }

  .center{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    width:100% !important;
  }

  .board{
    width:calc(100vw - 20px) !important;
    height:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100vw - 20px) !important;
    flex:0 0 auto !important;
    margin:0 auto !important;
  }

  .player-card{
    width:100% !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }

  .player-row{
    height:auto !important;
    min-height:38px !important;
  }

  .clock{
    min-width:72px !important;
    font-size:28px !important;
    padding:8px 12px !important;
  }

  .captured-box{
    min-height:76px !important;
  }

  .pieces{
    grid-template-columns:repeat(15, minmax(0, 1fr)) !important;
    gap:2px !important;
  }

  .pool-piece{
    height:28px !important;
    font-size:25px !important;
  }

  .panel{
    margin-top:10px !important;
  }

  .square{
    font-size:clamp(28px, 10vw, 44px) !important;
  }
}

@media(max-width:430px){
  .topbar{
    gap:10px !important;
    flex-wrap:wrap !important;
  }

  .brand h1{
    font-size:34px !important;
  }

  .brand p{
    font-size:24px !important;
  }

  nav{
    margin-left:auto;
  }

  nav select{
    max-width:170px;
  }

  .board{
    width:calc(100vw - 20px) !important;
    height:calc(100vw - 20px) !important;
  }

  .square{
    font-size:clamp(27px, 10.5vw, 42px) !important;
  }
}