:root {
  --ink: #172238;
  --muted: #697386;
  --paper: #f6f2e8;
  --paper-2: #eee8dc;
  --line: #cfc8ba;
  --orange: #ec6c3d;
  --orange-dark: #c94923;
  --blue: #2d5bff;
  --cyan: #65d7d0;
  --black-piece: #182338;
  --white-piece: #fffdf6;
  --shadow: 0 22px 60px rgba(26, 35, 55, .12);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(101, 215, 208, .18), transparent 27rem),
    radial-gradient(circle at 87% 80%, rgba(236, 108, 61, .12), transparent 26rem),
    var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
}

button, select { font: inherit; }
button { color: inherit; }

.app-shell { width: min(1260px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 34px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 38px; height: 38px; position: relative; transform: rotate(-8deg); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; }
.brand-mark::before { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); top: 0; left: 0; }
.brand-mark::after { width: 18px; height: 18px; background: var(--orange); right: 0; bottom: 0; border-radius: 3px; }
.brand-text strong { display: block; font-size: 18px; letter-spacing: .12em; }
.brand-text span { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.top-actions { flex: 1; display: flex; align-items: center; gap: 10px; }
.icon-btn, .text-btn {
  border: 1px solid var(--line); background: rgba(255,255,255,.38); border-radius: 999px; cursor: pointer;
  transition: .18s ease; min-height: 42px;
}
.icon-btn { width: 42px; display: grid; place-items: center; font-size: 18px; }
.text-btn { padding: 0 17px; font-weight: 750; font-size: 13px; }
.icon-btn:hover, .text-btn:hover { background: #fff; border-color: #aaa292; transform: translateY(-1px); }
.rules-cta {
  flex: 1; color: #fff; border-color: var(--orange); background: var(--orange);
  box-shadow: 0 8px 18px rgba(236,108,61,.22); letter-spacing: .06em;
}
.rules-cta:hover { color: #fff; border-color: var(--orange-dark); background: var(--orange-dark); }

.controller-panel {
  margin: 0 0 24px; padding: 20px 22px; color: #fff; overflow: hidden; position: relative;
  border: 1px solid rgba(255,255,255,.12); border-radius: 24px;
  background: linear-gradient(135deg, #172238 0%, #243652 72%, #30465d 100%);
  box-shadow: 0 18px 44px rgba(23,34,56,.18);
}
.controller-panel::after { content: ""; position: absolute; width: 260px; height: 260px; right: -100px; top: -145px; border-radius: 50%; background: rgba(101,215,208,.12); pointer-events: none; }
.controller-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 15px; position: relative; z-index: 1; }
.controller-intro .eyebrow { color: var(--cyan); margin-bottom: 4px; }
.controller-intro h2 { margin: 0; font: 750 clamp(20px, 2.6vw, 28px) Georgia, "Songti SC", serif; letter-spacing: -.02em; }
.controller-intro p { margin: 0; max-width: 480px; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.5; text-align: right; }
.controller-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; position: relative; z-index: 1; }
.controller-side { min-width: 0; margin: 0; padding: 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; background: rgba(255,255,255,.055); }
.controller-side legend { padding: 0 7px 0 2px; display: flex; align-items: center; gap: 9px; }
.controller-side legend span { display: flex; align-items: baseline; gap: 7px; }
.controller-side legend strong { font-size: 14px; }
.controller-side legend small { color: rgba(255,255,255,.48); font-size: 10px; }
.side-stone { width: 18px; height: 18px; display: inline-block; border-radius: 50%; }
.side-stone.black { background: #0d1524; border: 1px solid rgba(255,255,255,.25); }
.side-stone.white { background: var(--white-piece); border: 1px solid rgba(23,34,56,.25); }
.controller-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.controller-options label { min-width: 0; cursor: pointer; }
.controller-options input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.controller-options span { min-height: 39px; padding: 7px 5px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.72); text-align: center; font-size: 11px; font-weight: 760; line-height: 1.2; transition: .16s ease; }
.controller-options label:hover span { background: rgba(255,255,255,.12); color: #fff; }
.controller-options input:focus-visible + span { outline: 3px solid rgba(101,215,208,.42); outline-offset: 2px; }
.black-side .controller-options input:checked + span { color: #fff; border-color: var(--orange); background: rgba(236,108,61,.25); box-shadow: inset 0 0 0 1px rgba(236,108,61,.28); }
.white-side .controller-options input:checked + span { color: #fff; border-color: var(--cyan); background: rgba(101,215,208,.18); box-shadow: inset 0 0 0 1px rgba(101,215,208,.2); }
.controller-side:disabled { opacity: .48; }
.controller-side:disabled label { cursor: not-allowed; }
.auto-controls { display: none; align-items: center; justify-content: space-between; gap: 18px; margin-top: 13px; padding: 12px 13px; position: relative; z-index: 1; border-radius: 14px; background: rgba(101,215,208,.12); border: 1px solid rgba(101,215,208,.2); }
.auto-controls.show { display: flex; }
.auto-controls strong, .auto-controls span { display: block; }
.auto-controls strong { font-size: 12px; }
.auto-controls span { margin-top: 2px; color: rgba(255,255,255,.58); font-size: 10px; }
.auto-buttons { display: flex; gap: 8px; }
.auto-buttons button { min-width: 82px; min-height: 38px; }
.auto-buttons .secondary-btn { color: #fff; border-color: rgba(255,255,255,.24); }
[hidden] { display: none !important; }

.replay-controls {
  margin: -8px 0 24px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border: 1px solid rgba(45,91,255,.22); border-radius: 18px; background: rgba(255,255,255,.62); box-shadow: 0 12px 30px rgba(26,35,55,.08);
}
.replay-summary { min-width: 180px; }
.replay-summary .eyebrow { margin-bottom: 2px; }
.replay-summary strong, .replay-summary span { display: block; }
.replay-summary strong { font-size: 13px; }
.replay-summary span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.replay-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.replay-buttons button {
  min-height: 38px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.72); cursor: pointer; font-size: 11px; font-weight: 850;
}
.replay-buttons button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); background: #fff; }
.replay-buttons button:disabled { opacity: .35; cursor: not-allowed; }
.replay-buttons .accent { color: #fff; border-color: var(--blue); background: var(--blue); }
.replay-buttons .accent:hover:not(:disabled) { color: #fff; background: #2148d8; }
.replay-buttons .exit { margin-left: 4px; color: var(--orange-dark); }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: 28px; align-items: start; }
.game-card {
  background: rgba(255,255,255,.52); border: 1px solid rgba(196, 188, 174, .74); border-radius: 30px;
  padding: clamp(18px, 3vw, 34px); box-shadow: var(--shadow); backdrop-filter: blur(16px);
}

.game-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.eyebrow { color: var(--orange-dark); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 900; margin-bottom: 7px; }
h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(31px, 4.1vw, 54px); line-height: .98; letter-spacing: -.04em; }
.turn-pill { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.58); }
.turn-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--black-piece); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(23,34,56,.22); }
.turn-dot.white { background: var(--white-piece); box-shadow: 0 0 0 1px #a7a092, 0 0 0 3px #fff; }

.board-wrap { width: min(100%, 680px); margin: 0 auto; position: relative; padding: 0 0 25px 25px; }
.file-labels { display: grid; grid-template-columns: repeat(6, 1fr); position: absolute; left: 25px; right: 0; bottom: 0; height: 21px; color: var(--muted); font-size: 11px; font-weight: 800; text-align: center; }
.rank-labels { display: grid; grid-template-rows: repeat(6, 1fr); position: absolute; left: 0; top: 0; bottom: 25px; width: 21px; color: var(--muted); font-size: 11px; font-weight: 800; align-items: center; text-align: center; }
.board {
  aspect-ratio: 1; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr);
  background: #dce8e1; border: 2px solid var(--ink); border-radius: 15px; overflow: hidden; box-shadow: 0 12px 28px rgba(39,53,67,.14);
}
.cell {
  position: relative; border: 0; border-right: 1px solid rgba(23,34,56,.56); border-bottom: 1px solid rgba(23,34,56,.56);
  background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; isolation: isolate;
}
.cell:nth-child(6n) { border-right: 0; }
.cell:nth-child(n+31) { border-bottom: 0; }
.cell::before { content: ""; position: absolute; inset: 0; background: transparent; transition: .16s ease; z-index: -2; }
.cell:hover::before { background: rgba(255,255,255,.26); }
.cell.is-base::after {
  content: ""; position: absolute; inset: 9%; z-index: -1;
  background: linear-gradient(45deg, transparent 49%, rgba(23,34,56,.37) 49%, rgba(23,34,56,.37) 51%, transparent 51%),
              linear-gradient(-45deg, transparent 49%, rgba(23,34,56,.37) 49%, rgba(23,34,56,.37) 51%, transparent 51%);
}
.cell.selected::before { background: rgba(236,108,61,.19); box-shadow: inset 0 0 0 4px var(--orange); }
.cell.route::before { background: rgba(101,215,208,.26); }
.cell.route::after { content: ""; position: absolute; width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--cyan); z-index: 0; opacity: .8; }
.cell.legal::before { background: rgba(45,91,255,.10); }
.cell.legal::after { content: ""; width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px rgba(45,91,255,.13); position: absolute; z-index: 4; animation: breathe 1.8s ease-in-out infinite; }
.cell.legal.capture::after { width: 58%; background: transparent; border: 4px solid var(--orange); box-shadow: 0 0 0 6px rgba(236,108,61,.12); }
@keyframes breathe { 50% { transform: scale(.86); opacity: .78; } }

.aux { width: 48%; aspect-ratio: 1; background: #718279; border-radius: 9%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 5px 9px rgba(33,48,46,.12); z-index: 2; }
.main-piece {
  width: 69%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 3;
  font-family: Georgia, "Songti SC", serif; font-size: clamp(16px, 2.4vw, 28px); font-weight: 900; transition: .16s ease;
}
.main-piece.black { color: #fff; background: var(--black-piece); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 7px 14px rgba(23,34,56,.25); }
.main-piece.white { color: var(--ink); background: var(--white-piece); box-shadow: inset 0 0 0 2px rgba(23,34,56,.16), 0 7px 14px rgba(23,34,56,.16); }
.cell:hover .main-piece { transform: translateY(-2px); }
.piece-glyph { font-size: .72em; opacity: .88; }
.last-move { position: absolute; width: 10px; height: 10px; background: var(--orange); border: 2px solid #fff; border-radius: 50%; top: 7px; right: 7px; z-index: 6; box-shadow: 0 1px 4px rgba(0,0,0,.22); }

.board-help { display: flex; justify-content: space-between; gap: 14px; margin-top: 13px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.legend { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; display: inline-block; }
.legend .lg-aux { border-radius: 2px; background: #718279; }
.legend .lg-move { border-radius: 50%; background: var(--blue); }
.legend .lg-base {
  background: linear-gradient(45deg, transparent 42%, var(--ink) 43%, var(--ink) 57%, transparent 58%),
              linear-gradient(-45deg, transparent 42%, var(--ink) 43%, var(--ink) 57%, transparent 58%);
}

.side { display: grid; gap: 16px; }
.panel { border: 1px solid rgba(196,188,174,.78); border-radius: 22px; background: rgba(255,255,255,.46); padding: 20px; box-shadow: 0 12px 32px rgba(26,35,55,.07); backdrop-filter: blur(13px); }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.panel-title h2 { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.panel-title span { color: var(--muted); font-size: 11px; }
.players { display: grid; gap: 9px; }
.player { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; padding: 11px; border-radius: 15px; border: 1px solid transparent; transition: .18s ease; }
.player.active { background: rgba(255,255,255,.7); border-color: var(--line); box-shadow: 0 5px 15px rgba(30,40,60,.06); }
.avatar { width: 34px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.avatar.black { background: var(--black-piece); color: #fff; }
.avatar.white { background: var(--white-piece); color: var(--ink); border: 1px solid #bbb4a8; }
.player-name { font-size: 13px; font-weight: 850; }
.player-sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
.reserve { display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; font-weight: 900; font-size: 18px; }
.reserve::before { content: ""; width: 12px; height: 12px; border-radius: 2px; background: #718279; }

.status-box { background: var(--ink); color: #fff; border-radius: 18px; padding: 17px; min-height: 92px; display: flex; align-items: center; gap: 13px; }
.status-icon { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--cyan); font-weight: 900; }
.status-title { font-size: 14px; font-weight: 850; margin-bottom: 4px; }
.status-copy { color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.45; }

.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 6px; }
.field.wide { grid-column: 1 / -1; }
.field label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-weight: 850; }
select { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.58); border-radius: 11px; min-height: 40px; padding: 0 10px; color: var(--ink); font-size: 12px; font-weight: 750; outline: 0; }
select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(45,91,255,.12); }
select:disabled { opacity: .48; cursor: not-allowed; }
.online-controls { display: none; margin-top: 13px; padding: 13px; border-radius: 14px; background: rgba(45,91,255,.07); }
.online-controls.show { display: block; }
.online-create { width: 100%; min-height: 40px; border: 0; border-radius: 11px; color: #fff; background: var(--blue); cursor: pointer; font-weight: 850; font-size: 12px; }
.online-create:disabled, .online-join:disabled { opacity: .45; cursor: wait; }
.join-row { display: grid; grid-template-columns: 1fr 78px; gap: 8px; margin-top: 9px; }
.room-input { width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: rgba(255,255,255,.7); color: var(--ink); font: 800 13px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; }
.room-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(45,91,255,.12); }
.online-join { border: 0; border-radius: 11px; color: #fff; background: var(--blue); cursor: pointer; font-size: 12px; font-weight: 850; }
.online-room { display: none; text-align: center; }
.online-room.show { display: block; }
.room-caption { color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.room-code { margin: 3px 0 5px; color: var(--blue); font: 900 28px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; cursor: pointer; }
.room-state { color: #3e585b; font-size: 11px; }
.room-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.room-actions button { min-height: 36px; border: 1px solid rgba(45,91,255,.24); border-radius: 10px; color: var(--blue); background: rgba(255,255,255,.58); cursor: pointer; font-size: 11px; font-weight: 850; }
.room-actions button:hover { background: #fff; }
.room-actions.hide { display: none; }
.action-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 13px; }
.primary-btn, .secondary-btn, .danger-btn { min-height: 44px; border-radius: 12px; border: 0; cursor: pointer; font-weight: 850; font-size: 12px; transition: .18s ease; }
.primary-btn { background: var(--orange); color: #fff; box-shadow: 0 8px 16px rgba(236,108,61,.22); }
.primary-btn:hover:not(:disabled) { background: var(--orange-dark); transform: translateY(-1px); }
.primary-btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.secondary-btn { background: transparent; border: 1px solid var(--line); }
.secondary-btn:hover:not(:disabled) { background: #fff; }
.secondary-btn:disabled { opacity: .38; cursor: not-allowed; }
.danger-btn { color: #9e352f; border: 1px solid rgba(158,53,47,.28); background: rgba(158,53,47,.07); }
.danger-btn:hover:not(:disabled) { color: #fff; border-color: #a83a34; background: #a83a34; }
.danger-btn:disabled { opacity: .35; cursor: not-allowed; }

.log { max-height: 226px; overflow: auto; scrollbar-width: thin; padding-right: 2px; }
.log-empty { color: var(--muted); font-size: 12px; padding: 9px 2px 13px; }
.log-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(207,200,186,.68); font-size: 12px; align-items: center; }
.log-row:last-child { border-bottom: 0; }
.log-move { min-width: 0; display: grid; grid-template-columns: 28px 1fr; gap: 5px; align-items: center; }
.log-n { color: var(--muted); font-size: 10px; }
.notation { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; }
.record-tools { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(207,200,186,.72); }
.record-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.record-actions button, .file-button, .server-replay-row button, .saved-replay button {
  min-height: 37px; display: grid; place-items: center; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); background: rgba(255,255,255,.58); cursor: pointer; font-size: 10px; font-weight: 850; text-align: center;
}
.record-actions button:hover:not(:disabled), .file-button:hover, .server-replay-row button:hover:not(:disabled), .saved-replay button:hover { border-color: var(--blue); color: var(--blue); background: #fff; }
.record-actions button:disabled { opacity: .38; cursor: not-allowed; }
.file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.server-replay-row { display: grid; grid-template-columns: 1fr 86px; gap: 7px; margin-top: 8px; }
.server-replay-row input {
  width: 100%; min-width: 0; min-height: 38px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); background: rgba(255,255,255,.62); outline: none; font: 750 10px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase;
}
.server-replay-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(45,91,255,.1); }
.server-replay-row button:disabled { opacity: .45; cursor: wait; }
.saved-replay { margin-top: 8px; padding: 8px 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 10px; background: rgba(101,215,208,.14); color: #3e585b; font-size: 10px; }
.saved-replay strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .03em; }
.saved-replay button { min-height: 30px; padding: 0 8px; flex: 0 0 auto; }
.record-hint { margin: 9px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.thinking::after { content: ""; display: inline-block; width: 1.1em; text-align: left; animation: dots 1.2s steps(4,end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }

.modal { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; padding: 18px; background: rgba(23,34,56,.46); backdrop-filter: blur(8px); }
.modal.open { display: grid; }
.modal-card { width: min(620px, 100%); max-height: min(760px, 92vh); overflow: auto; background: var(--paper); border: 1px solid #fff; border-radius: 26px; padding: clamp(22px, 4vw, 34px); box-shadow: 0 30px 90px rgba(0,0,0,.26); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.modal h2 { font-family: Georgia, "Songti SC", serif; font-size: 30px; margin: 0 0 7px; }
.modal-lead { color: var(--muted); margin: 0 0 21px; font-size: 13px; }
.rule { display: grid; grid-template-columns: 31px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.rule-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 11px; font-weight: 900; }
.rule strong { display: block; font-size: 13px; margin: 4px 0 4px; }
.rule p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.source-note { margin-top: 18px; padding: 13px 15px; border-radius: 13px; background: rgba(101,215,208,.14); color: #3e585b; font-size: 11px; line-height: 1.55; }
.source-note a { color: var(--blue); font-weight: 800; }
.name-modal-card { width: min(470px, 100%); }
.resign-modal-card { width: min(430px, 100%); }
.name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.name-fields label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; }
.name-fields input { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.68); color: var(--ink); outline: none; font: 750 13px inherit; }
.name-fields input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(45,91,255,.11); }
.name-fields input:disabled { color: var(--muted); background: rgba(113,130,121,.09); cursor: not-allowed; }
.name-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 30; background: var(--ink); color: #fff; padding: 11px 17px; border-radius: 999px; font-size: 12px; font-weight: 750; box-shadow: 0 12px 30px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 930px) {
  .controller-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr; }
  .side { grid-template-columns: 1fr 1fr; }
  .side .panel:first-child, .side .panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .app-shell { width: min(100% - 18px, 1260px); padding-top: 14px; }
  .topbar { margin-bottom: 13px; }
  .controller-panel { margin-bottom: 14px; padding: 16px 12px; border-radius: 19px; }
  .controller-intro { display: block; padding: 0 3px; }
  .controller-intro p { margin-top: 7px; text-align: left; }
  .controller-grid { grid-template-columns: 1fr; }
  .controller-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auto-controls { align-items: stretch; flex-direction: column; }
  .auto-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .replay-controls { margin-bottom: 14px; padding: 13px; align-items: stretch; flex-direction: column; }
  .replay-summary { min-width: 0; }
  .replay-buttons { display: grid; grid-template-columns: repeat(3, 1fr); }
  .replay-buttons button { padding: 0 6px; }
  .replay-buttons .exit { grid-column: 1 / -1; margin-left: 0; }
  .brand-text span, .text-btn .wide { display: none; }
  .text-btn { padding: 0 13px; }
  .game-card { border-radius: 22px; padding: 17px 12px; }
  .game-head { align-items: center; margin: 2px 5px 17px; }
  .eyebrow { display: none; }
  .turn-pill { padding: 8px 10px; }
  .board-wrap { padding-left: 20px; padding-bottom: 20px; }
  .file-labels { left: 20px; height: 17px; }
  .rank-labels { width: 17px; bottom: 20px; }
  .board { border-radius: 10px; }
  .aux { border-radius: 6%; }
  .board-help { padding: 0 4px; }
  .board-help > span { display: none; }
  .side { grid-template-columns: 1fr; }
  .side .panel { grid-column: auto !important; }
  .panel { border-radius: 18px; }
  .name-fields { grid-template-columns: 1fr; }
}