:root {
  color-scheme: dark;
  --bg: #17130f;
  --panel: #251f19;
  --panel-border: #4d3e30;
  --light-square: #e4c17d;
  --dark-square: #a84f0d;
  --accent: #f4c95d;
  --move: #73d2a2;
  --capture: #ff6b6b;
  --text: #f8efe1;
  --muted: #bcae9d;
}

* { box-sizing: border-box; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: #17130f;
  font-weight: 800;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, #3a281a 0, transparent 34rem),
    linear-gradient(145deg, #17130f, #0e0c0a);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

button { font: inherit; }
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid #9de8ff;
  outline-offset: 3px;
}

.app { width: min(1500px, 96vw); margin: 0 auto; padding: 32px 0 48px; }
.header { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 24px; }
.eyebrow { margin: 0 0 7px; color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(30px, 4vw, 54px); line-height: 1; }
.subtitle { color: var(--muted); margin: 10px 0 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.button { border: 1px solid transparent; border-radius: 10px; padding: 11px 16px; cursor: pointer; color: var(--text); }
.button.download { display: inline-flex; align-items: center; text-decoration: none; }
.button.primary { background: #995019; border-color: #c97834; }
.button.secondary { background: #30271f; border-color: #66513e; }
.button.danger { background: #642b2b; border-color: #a94a4a; }
.button:disabled { opacity: .42; cursor: not-allowed; }
.mode-selector { display: grid; gap: 5px; color: var(--muted); font-size: .85rem; }
.mode-selector select, .mode-selector input { min-width: 190px; border: 1px solid #66513e; border-radius: 10px; padding: 10px; background: #30271f; color: var(--text); font: inherit; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.board-shell { min-width: 0; padding: 14px; border-radius: 18px; background: #0b0907; border: 1px solid #4b392b; box-shadow: 0 24px 70px #0009; }
.board { width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(16, 1fr); position: relative; touch-action: manipulation; }
.board-row { display: contents; }
.board-help { margin: 12px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.square { position: relative; display: grid; place-items: center; border: 0; padding: 0; min-width: 0; cursor: default; }
.square.light { background: var(--light-square); }
.square.dark { background: var(--dark-square); }
.square.cutout { background: transparent; pointer-events: none; }
.square.playable { cursor: pointer; }
.square.selected { box-shadow: inset 0 0 0 4px var(--accent); z-index: 2; }
.square:focus-visible { outline: 4px solid #9de8ff; outline-offset: -4px; z-index: 3; }
.square.legal::after,
.square.capture::after { content: ""; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #205b3dcc; box-shadow: 0 0 0 3px #a7efc466; position: absolute; }
.square.capture::after { width: 74%; background: transparent; border: 5px solid var(--capture); box-shadow: none; }
.piece { position: relative; z-index: 1; font-family: "Arial Unicode MS", "DejaVu Sans", serif; font-size: clamp(21px, 3.6vw, 58px); line-height: 1; filter: drop-shadow(0 2px 1px #0009); user-select: none; }
.piece.white { color: #fff7df; -webkit-text-stroke: 1px #5c4228; }
.piece.red { color: #ef5b53; -webkit-text-stroke: 1px #641c1a; }
.piece.black { color: #211d1a; -webkit-text-stroke: 1px #d5b482; }
.piece.blue { color: #4da6ff; -webkit-text-stroke: 1px #153c62; }
.piece.frozen { opacity: .58; filter: grayscale(.6) drop-shadow(0 0 5px #8de5ff); }
.square[data-owner="NORTH"] .piece { transform: rotate(180deg); }
.square[data-owner="WEST"] .piece { transform: rotate(90deg); }
.square[data-owner="EAST"] .piece { transform: rotate(-90deg); }
.wall-bottom { border-bottom: 5px solid #16100b; }
.wall-top { border-top: 5px solid #16100b; }
.wall-left { border-left: 5px solid #16100b; }
.wall-right { border-right: 5px solid #16100b; }

.sidebar { display: grid; gap: 14px; }
.panel { background: #251f19e8; border: 1px solid var(--panel-border); border-radius: 14px; padding: 18px; }
.panel-label { margin: 0 0 8px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.turn-line { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.turn-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #fff5; }
.status-text { color: var(--accent); margin-bottom: 0; }
.variant-label { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.frozen-summary { color: #9de8ff; margin: 10px 0 0; }
.clocks { display: grid; gap: 8px; }
.clock { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid #554536; border-radius: 9px; background: #17130f; }
.clock.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.clock.expired { color: var(--capture); }
.clock-time { font: 700 18px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.share-button { width: 100%; margin-top: 6px; }
.turn-dot.white { background: #fff7df; }
.turn-dot.red { background: #ef5b53; }
.turn-dot.black { background: #211d1a; }
.turn-dot.blue { background: #4da6ff; }
.message { min-height: 1.4em; color: #ff8f87; margin: 0 4px; }

dialog { background: var(--panel); color: var(--text); border: 1px solid #765d46; border-radius: 16px; padding: 22px; box-shadow: 0 20px 80px #000c; }
dialog::backdrop { background: #000a; }
.promotion-options { display: flex; gap: 8px; margin: 18px 0; }
.promotion-piece { width: 62px; height: 62px; font-size: 38px; background: #3b3027; border: 1px solid #725c47; border-radius: 10px; color: var(--text); cursor: pointer; }

@media (max-width: 980px) {
  .header { align-items: start; flex-direction: column; }
  .game-layout { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .message { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .app { width: 100%; padding: 16px 8px 30px; }
  .board-shell { padding: 5px; border-radius: 9px; }
  .game-layout { gap: 14px; }
  .sidebar { grid-template-columns: 1fr; }
  .header { margin-inline: 8px; }
  .actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions .button { width: 100%; min-height: 44px; padding-inline: 8px; }
  .actions .danger { grid-column: 1 / -1; }
  .piece { font-size: clamp(15px, 5vw, 30px); }
  .square.selected { box-shadow: inset 0 0 0 2px var(--accent); }
  .square:focus-visible { outline-width: 2px; outline-offset: -2px; }
  .board-help { margin-inline: 4px; }
}

.lobby-page { width: min(1180px, 92vw); margin: 0 auto; padding: 70px 0; }
.lobby-hero { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-bottom: 38px; border-bottom: 1px solid var(--panel-border); }
.lobby-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: end; }
.account-state { color: var(--muted); font-size: 13px; width: 100%; text-align: right; }
.lobby-logout { align-self: flex-end; height: 42px; }
.custom-time-settings { width: 100%; display: flex; justify-content: flex-end; gap: 9px; }
.custom-time-settings[hidden] { display: none; }
.variant-description { width: 100%; margin: 0; color: var(--muted); font-size: 12px; text-align: right; }
.button.large { padding: 15px 24px; font-weight: 750; white-space: nowrap; }
.lobby-section { padding-top: 34px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-heading h2 { margin: 0; font: 700 28px Georgia, serif; }
.room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.room-card { display: grid; gap: 22px; padding: 20px; background: #251f19e8; border: 1px solid var(--panel-border); border-radius: 15px; box-shadow: 0 12px 32px #0004; }
.room-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.room-code { font: 700 19px ui-monospace, monospace; letter-spacing: .06em; }
.room-status { padding: 5px 9px; border-radius: 999px; font-size: 12px; text-align: right; }
.room-status.waiting { color: #a7efc4; background: #205b3d66; }
.room-status.playing { color: #ffd59c; background: #7b451f88; }
.room-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.room-stats div { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.room-stats strong { font-size: 17px; }
.room-stats span { color: var(--muted); font-size: 12px; }
.room-card > .button { text-align: center; text-decoration: none; }
.empty-state { padding: 65px 20px; text-align: center; border: 1px dashed #66513e; border-radius: 16px; color: var(--muted); }
.empty-state h3 { color: var(--text); margin: 8px 0; }
.empty-state p { margin: 0; }
.empty-fortress { font-size: 52px; color: var(--accent); }
#auth-form { display: grid; gap: 14px; min-width: min(380px, 80vw); }
#auth-form h2 { margin: 0; font-family: Georgia, serif; }
#auth-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
#auth-form input { width: 100%; padding: 11px 12px; border: 1px solid #66513e; border-radius: 9px; background: #17130f; color: var(--text); font: inherit; }
.auth-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-content { display: grid; gap: 16px; width: min(540px, 84vw); }
.profile-content h2, .profile-form h2 { margin: 0; font-family: Georgia, serif; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.profile-stats div { padding: 10px; border: 1px solid #554536; border-radius: 9px; background: #17130f; }
.profile-stats dt { color: var(--muted); font-size: 12px; }
.profile-stats dd { margin: 4px 0 0; font-size: 20px; font-weight: 750; }
.profile-form { display: grid; gap: 10px; }
.profile-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.profile-form input { width: 100%; padding: 11px 12px; border: 1px solid #66513e; border-radius: 9px; background: #17130f; color: var(--text); font: inherit; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 850px) {
  .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .lobby-page { padding: 30px 0; }
  .lobby-hero { align-items: stretch; flex-direction: column; }
  .lobby-actions { display: grid; grid-template-columns: 1fr; }
  .account-state, .variant-description { text-align: left; }
  .mode-selector select, .mode-selector input, .lobby-actions .button { width: 100%; min-width: 0; min-height: 44px; }
  .custom-time-settings { display: grid; grid-template-columns: 1fr; }
  .room-grid { grid-template-columns: 1fr; }
  .room-card-top { align-items: flex-start; flex-direction: column; }
  .room-status { text-align: left; }
  .room-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}