.chess-window {
  top:46px;
  left:max(82px,calc(50vw - 500px));
  width:min(1000px,calc(100vw - 100px));
  height:min(760px,calc(100vh - 90px));
  min-width:720px;
  min-height:570px;
  background:#1a1918;
  color:#f5f2ee;
}

.chess-shell {
  position:relative;
  display:flex;
  flex:1;
  min-height:0;
  background:#171615;
}

.chess-main {
  display:grid;
  width:100%;
  min-width:0;
  min-height:0;
  padding:18px;
  grid-template-columns:minmax(430px,1fr) 250px;
  gap:18px;
}

.chess-board-wrap {
  display:flex;
  min-width:0;
  min-height:0;
  align-items:center;
  justify-content:center;
}

.chess-board {
  display:grid;
  width:min(100%,640px);
  aspect-ratio:1;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  overflow:hidden;
  border:10px solid #4b3d32;
  border-radius:9px;
  background:#4b3d32;
  box-shadow:0 20px 42px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.16);
}

.chess-square {
  position:relative;
  display:grid;
  min-width:0;
  min-height:0;
  padding:0;
  place-items:center;
  border:0;
  border-radius:0;
  cursor:pointer;
  user-select:none;
}

.chess-square.light { background:#d7c9b8; }
.chess-square.dark { background:#826f60; }
.chess-square.last-move { box-shadow:inset 0 0 0 999px rgba(235,218,128,.28); }
.chess-square.selected { box-shadow:inset 0 0 0 4px rgba(238,247,242,.8); }

.chess-square.in-check {
  background:#b84d49 !important;
  box-shadow:inset 0 0 0 4px rgba(255,221,217,.72),inset 0 0 26px rgba(98,0,0,.34);
}

.chess-square.in-check .chess-piece {
  color:#ff4f4f !important;
  text-shadow:0 0 2px #4d0000,0 2px 3px rgba(70,0,0,.7);
  filter:drop-shadow(0 0 8px rgba(255,60,60,.65));
}

.chess-square.legal::after {
  content:"";
  position:absolute;
  width:20%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(35,33,30,.28);
  pointer-events:none;
}

.chess-square.capture::after {
  width:72%;
  border:4px solid rgba(35,33,30,.3);
  background:transparent;
}

.chess-piece {
  position:relative;
  z-index:2;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",serif;
  font-size:clamp(30px,4.7vw,58px);
  line-height:1;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.28));
  pointer-events:none;
}

.chess-piece[data-color="w"] {
  color:#faf8f3;
  text-shadow:0 0 1px #3a342e,0 1px 1px #3a342e;
}

.chess-piece[data-color="b"] { color:#292522; }

.chess-coordinate {
  position:absolute;
  z-index:3;
  font:700 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  opacity:.62;
  pointer-events:none;
}

.chess-coordinate.rank { top:4px; left:4px; }
.chess-coordinate.file { right:4px; bottom:4px; }

.chess-panel {
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:12px;
}

.chess-card {
  padding:13px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.055);
}

.chess-card h2 { margin:0 0 10px; font-size:16px; }
.chess-card-title { margin-bottom:8px; color:#99938d; font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.08em; }

.chess-players { display:grid; gap:7px; }
.chess-player {
  display:flex;
  min-height:34px;
  padding:7px 8px;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-radius:5px;
  background:rgba(0,0,0,.16);
  font-size:11px;
}

.chess-piece-mini { display:inline-block; width:20px; margin-right:5px; font-size:19px; vertical-align:-2px; }

.chess-ai-badge {
  display:inline-flex;
  min-height:22px;
  padding:0 7px;
  align-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#c8c3bd;
  font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
}

.chess-ai-badge.online { color:#dff8ec; border-color:rgba(166,236,202,.28); }
.chess-ai-badge.fallback { color:#f1b4aa; border-color:rgba(241,180,170,.28); }

.chess-status {
  min-height:46px;
  color:#ddd8d2;
  font-size:12px;
  line-height:1.55;
}

.chess-history-card { min-height:0; flex:1; }
.chess-history {
  max-height:220px;
  overflow:auto;
  font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;
}

.chess-history-empty { color:#837e78; }
.chess-history-row {
  display:grid;
  padding:3px 0;
  grid-template-columns:30px 1fr 1fr;
  gap:6px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.chess-history-row span { color:#817c76; }
.chess-history-row strong { font-weight:600; color:#d8d3cd; }

.chess-actions { display:grid; gap:7px; }
.chess-button {
  min-height:38px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  font-weight:700;
}
.chess-button:hover { background:rgba(255,255,255,.14); }
.chess-button.primary { background:#f0ede8; color:#24211f; }
.chess-button.primary:hover { background:#fff; }

.chess-rules {
  color:#99938d;
  font-size:9px;
  line-height:1.6;
}

.chess-promotion {
  position:absolute;
  z-index:10;
  inset:0;
  display:grid;
  padding:20px;
  place-items:center;
  background:rgba(13,12,11,.7);
  backdrop-filter:blur(5px);
}

.chess-promotion[hidden] { display:none; }

.chess-promotion-card {
  width:min(420px,100%);
  padding:20px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:10px;
  background:#292725;
  box-shadow:0 18px 45px rgba(0,0,0,.34);
  text-align:center;
}

.chess-promotion-card > strong { display:block; margin-bottom:14px; font-size:13px; }
.chess-promotion-options {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.chess-promotion-options button {
  display:flex;
  min-height:86px;
  padding:8px;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:7px;
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-size:32px;
}

.chess-promotion-options button:hover { background:rgba(255,255,255,.13); }
.chess-promotion-options span { color:#aaa49e; font-size:9px; }

.arcade-launcher-icon.chess-icon {
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",serif;
  font-size:42px;
}

@media(max-width:900px) {
  .chess-window {
    inset:0 0 48px 0 !important;
    width:100% !important;
    height:auto !important;
    min-width:0;
    min-height:0;
    border-radius:0;
    transform:none !important;
  }

  .chess-main {
    grid-template-columns:minmax(0,1fr);
    overflow:auto;
    padding:12px;
  }

  .chess-board { width:min(100%,620px); }
  .chess-panel { width:min(100%,620px); margin:0 auto; }
  .chess-history { max-height:150px; }
}

@media(max-width:520px) {
  .chess-board { border-width:6px; }
  .chess-piece { font-size:clamp(27px,11vw,46px); }
  .chess-promotion-options { grid-template-columns:repeat(2,1fr); }
}