/* BITPAWN.EXE — design tokens and retro components */

@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(/fonts/plex/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(/fonts/plex/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url(/fonts/plex/ibm-plex-mono-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'VT323'; font-weight: 400; font-display: swap; src: url(/fonts/vt323/vt323-latin-400-normal.woff2) format('woff2'); }

:root {
  --bg: #171A17;
  --bg-2: #202420;
  --bg-term: #0F120F;
  --surface: #C6C8BD;
  --raised: #D5D7CC;
  --recessed: #9DA194;
  --text-dark-bg: #D8E5D0;
  --text-light-bg: #242820;
  --text-muted-dark: #8E9C88;
  --text-muted-light: #555A4E;
  --green: #8BAC79;
  --green-bright: #B5D99B;
  --green-muted: #536E4C;
  --amber: #D0A45A;
  --red: #B65F55;
  --border: #090B09;
  --hi: #EEF0E6;       /* bevel highlight */
  --lo: #7A7E72;       /* bevel shadow */
  --lo-2: #5E6257;
  --sq-light: #B9BDAE;
  --sq-dark: #697A60;

  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', 'Menlo', monospace;
  --font-pixel: 'VT323', 'IBM Plex Mono', ui-monospace, monospace;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --fast: 120ms;

  --bevel-out: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  --bevel-out-2: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo-2), inset 2px 2px 0 var(--raised), inset -2px -2px 0 var(--lo);
  --bevel-in: inset 1px 1px 0 var(--lo-2), inset -1px -1px 0 var(--hi);
  --bevel-in-dark: inset 1px 1px 0 #050605, inset -1px -1px 0 #3A4038;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(139,172,121,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,172,121,.035) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text-dark-bg);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}
a { color: var(--green-bright); }
a:hover { color: var(--hi); }
.r-window a:not(.r-btn), .r-table a { color: #2F4A2A; font-weight: 600; text-underline-offset: 2px; }
.r-window a:not(.r-btn):hover, .r-table a:hover { color: var(--border); }
.r-window .r-terminal a { color: var(--green-bright); }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.sr-only { 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: absolute; left: 8px; top: -60px; z-index: 100; background: var(--green); color: var(--text-light-bg); padding: 8px 12px; border: 1px solid var(--border); }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.pixel { image-rendering: pixelated; shape-rendering: crispEdges; }
.num { font-variant-numeric: tabular-nums; }
.sans { font-family: var(--font-sans); }

/* ---------- application frame ---------- */
.app {
  max-width: 1240px;
  margin: 16px auto;
  border: 1px solid var(--border);
  background: var(--bg-2);
  box-shadow: 0 0 0 1px #2C312B, 4px 4px 0 rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  min-height: calc(100vh - 32px);
}
.titlebar {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--green-muted);
  color: var(--text-dark-bg);
  height: 32px; padding: 0 var(--s2) 0 var(--s2);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 #6C8A63;
}
.titlebar__name { font-weight: 600; letter-spacing: .04em; font-size: 13px; text-decoration: none; color: inherit; display: flex; align-items: center; gap: 8px; }
.titlebar__name:hover { color: var(--hi); }
.titlebar__sub { color: #B9CDB0; font-size: 12px; letter-spacing: .04em; }
.titlebar__right { margin-left: auto; display: flex; align-items: center; gap: var(--s3); font-size: 12px; }
.conn { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .04em; }

.menubar {
  display: flex; align-items: stretch; gap: 0;
  background: var(--surface); color: var(--text-light-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--hi);
  padding: 0 var(--s1);
  font-size: 13px;
  overflow-x: auto; scrollbar-width: none;
}
.menubar a {
  display: flex; align-items: center; gap: 6px;
  color: inherit; text-decoration: none;
  padding: 5px 12px; margin: 2px 0;
  border: 1px solid transparent;
  white-space: nowrap;
}
.menubar a:hover { border-color: var(--lo); box-shadow: inset 1px 1px 0 var(--hi); }
.menubar a[aria-current="page"] { background: var(--green); border-color: var(--border); box-shadow: var(--bevel-in); }
.menubar__spacer { flex: 1; }

.workspace { flex: 1; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.workspace:focus { outline: none; }

.statusbar {
  display: flex; gap: 2px; padding: 2px;
  background: var(--surface); color: var(--text-light-bg);
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.statusbar__cell { padding: 1px 8px; box-shadow: var(--bevel-in); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar__cell--grow { flex: 1; }

.bottomnav { display: none; }

/* ---------- windows & panels ---------- */
.r-window {
  background: var(--surface); color: var(--text-light-bg);
  border: 1px solid var(--border);
  box-shadow: var(--bevel-out-2);
  padding: 3px;
  min-width: 0;
}
.r-titlebar {
  display: flex; align-items: center; gap: 8px;
  background: var(--green-muted); color: var(--text-dark-bg);
  height: 24px; padding: 0 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
}
.r-titlebar--idle { background: var(--lo); color: #E3E5DA; }
.r-titlebar__extra { margin-left: auto; font-weight: 400; letter-spacing: .02em; opacity: .9; }
.r-window__body { padding: var(--s4); }
.r-window__body--tight { padding: var(--s2); }

.r-panel { background: var(--raised); border: 1px solid var(--lo); box-shadow: inset 1px 1px 0 var(--hi); padding: var(--s3); }
.r-inset { background: var(--recessed); box-shadow: var(--bevel-in); border: 1px solid var(--lo-2); padding: var(--s3); }
.r-field { background: #E4E6DC; box-shadow: var(--bevel-in); border: 1px solid var(--lo-2); }

.r-terminal {
  position: relative;
  background: var(--bg-term); color: var(--green-bright);
  border: 1px solid var(--border);
  box-shadow: var(--bevel-in-dark);
  padding: var(--s3) var(--s4);
  font-size: 13px; line-height: 1.6;
  overflow: hidden;
}
.crt .r-terminal::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  opacity: .35;
}
.r-terminal .dim { color: var(--green-muted); }
.r-terminal .amber { color: var(--amber); }
.r-terminal .red { color: #D98A80; }
.r-line { display: block; white-space: pre-wrap; }
.r-line::before { content: '> '; color: var(--green-muted); }
.r-line--plain::before { content: none; }
.cursor { display: inline-block; width: .6em; height: 1.05em; background: var(--green-bright); vertical-align: text-bottom; margin-left: 2px; }
@media (prefers-reduced-motion: no-preference) { .cursor { animation: cur 1.1s steps(1) infinite; } }
@keyframes cur { 50% { opacity: 0; } }

/* ---------- type ---------- */
.label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted-light); }
.on-dark .label, .label--dark { color: var(--text-muted-dark); }
.pixel-head { font-family: var(--font-pixel); font-weight: 400; letter-spacing: .02em; line-height: 1; }
.page-title { font-family: var(--font-pixel); font-size: 34px; line-height: 1; color: var(--text-dark-bg); letter-spacing: .02em; }
.page-sub { color: var(--text-muted-dark); font-size: 12px; letter-spacing: .08em; margin-top: 4px; }
.page-head { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; }
.page-head__right { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }
.prose { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; max-width: 68ch; }
.prose p + p { margin-top: .75em; }
.muted { color: var(--text-muted-light); }
.on-dark .muted { color: var(--text-muted-dark); }
.t-green { color: var(--green-muted); } .on-dark .t-green, .r-terminal .t-green { color: var(--green-bright); }
.t-amber { color: #8A6420; } .on-dark .t-amber { color: var(--amber); }
.t-red { color: #8E3B32; } .on-dark .t-red { color: #D98A80; }

/* ---------- buttons ---------- */
.r-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; padding: 4px 14px;
  background: var(--raised); color: var(--text-light-bg);
  border: 1px solid var(--border); border-radius: 0;
  box-shadow: var(--bevel-out-2);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background-color var(--fast);
}
.r-btn::before { content: '['; opacity: .55; font-weight: 400; }
.r-btn::after { content: ']'; opacity: .55; font-weight: 400; }
.r-btn--bare::before, .r-btn--bare::after { content: none; }
.r-btn:hover { background: #DFE1D7; color: var(--text-light-bg); }
.r-btn:active, .r-btn[aria-pressed="true"] { box-shadow: var(--bevel-in); padding: 5px 13px 3px 15px; background: var(--surface); }
.r-btn:focus-visible { outline: 1px dotted var(--border); outline-offset: -6px; box-shadow: var(--bevel-out-2), 0 0 0 2px var(--amber); }
.r-btn--primary { background: var(--green); }
.r-btn--primary:hover { background: #98B987; }
.r-btn--primary:active { background: #7E9E6D; }
.r-btn--danger { color: #7A2A22; }
.r-btn--danger:hover { background: #E6D5D0; }
.r-btn--sm { min-height: 28px; padding: 2px 10px; font-size: 12px; }
.r-btn--sm:active { padding: 3px 9px 1px 11px; }
.r-btn--lg { min-height: 44px; padding: 8px 20px; font-size: 14px; }
.r-btn--lg:active { padding: 9px 19px 7px 21px; }
.r-btn--block { width: 100%; }
.r-btn[disabled], .r-btn[aria-disabled="true"] { color: #8B8F83; text-shadow: 1px 1px 0 var(--hi); cursor: not-allowed; background: var(--raised); }
.r-btn[disabled]:active { box-shadow: var(--bevel-out-2); padding: 4px 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- inputs ---------- */
.r-labelled { display: grid; gap: 4px; }
.r-input, .r-select {
  min-height: 34px; padding: 4px 8px;
  background: #E4E6DC; color: var(--text-light-bg);
  border: 1px solid var(--lo-2); border-radius: 0;
  box-shadow: var(--bevel-in);
  font-family: var(--font-mono); font-size: 13px;
}
.r-select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--text-light-bg) 50%), linear-gradient(-45deg, transparent 50%, var(--text-light-bg) 50%); background-size: 5px 5px; background-position: right 14px center, right 9px center; background-repeat: no-repeat; }
.r-input:focus, .r-select:focus { outline: 2px solid var(--green-muted); outline-offset: 0; }
.r-error { color: #8E3B32; font-size: 12px; font-weight: 600; }

/* segmented option group (stakes / time controls) */
.r-options { display: flex; flex-wrap: wrap; gap: 0; }
.r-option {
  position: relative; min-height: 34px; padding: 4px 12px;
  background: var(--raised); border: 1px solid var(--border); margin-right: -1px;
  box-shadow: var(--bevel-out); cursor: pointer; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.r-option input { position: absolute; opacity: 0; pointer-events: none; }
.r-option:hover { background: #DFE1D7; }
.r-option:has(input:checked) { background: var(--green); box-shadow: var(--bevel-in); font-weight: 600; z-index: 1; }
.r-option:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 1px; z-index: 2; }
.r-option:has(input:disabled) { color: #8B8F83; cursor: not-allowed; text-shadow: 1px 1px 0 var(--hi); }
.r-option__tag { font-size: 10px; letter-spacing: .06em; color: var(--text-muted-light); font-weight: 500; }

/* tabs */
.r-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding-left: 4px; }
.r-tab { padding: 4px 12px; background: var(--recessed); border: 1px solid var(--border); border-bottom: 0; margin-bottom: -1px; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .04em; box-shadow: inset 1px 1px 0 #B8BBAF; }
.r-tab[aria-selected="true"] { background: var(--surface); box-shadow: inset 1px 1px 0 var(--hi), inset 0 -3px 0 var(--green); padding-bottom: 6px; margin-top: -2px; }

/* lobby mode switch */
.mode-tabs .r-tabs { border-bottom-color: var(--green-muted); }
.r-tab { color: var(--text-light-bg); }
.mode-tabs .r-tab { font-size: 14px; padding: 6px 20px; min-height: 36px; }
.mode-tabs .r-tab[aria-selected="true"] { background: var(--green); box-shadow: inset 1px 1px 0 #B5D99B; }
.mode-tabs .r-tab[aria-selected="false"] { color: #3A3F35; }
.mode-tabs .r-tab:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* third-party sign-in button (Discord) */
.r-btn--discord { background: #5865F2; color: #fff; border-color: #1E2270; box-shadow: inset 1px 1px 0 #8E97F7, inset -1px -1px 0 #2F37A8; }
.r-btn--discord:hover { background: #6C77F4; color: #fff; }
.r-btn--discord:active { background: #4752C4; box-shadow: inset 1px 1px 0 #2F37A8, inset -1px -1px 0 #8E97F7; }

/* status indicator */
.r-led { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--border); background: var(--lo); flex: none; }
.r-led--ok { background: var(--green-bright); }
.r-led--wait { background: var(--amber); }
.r-led--err { background: var(--red); }
.r-led--off { background: #4A4F48; }
.r-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .04em; font-weight: 500; }

/* tag */
.r-tag { display: inline-block; padding: 0 6px; border: 1px solid currentColor; font-size: 10px; letter-spacing: .08em; font-weight: 600; line-height: 16px; vertical-align: middle; }
.r-tag--demo { color: #8A6420; background: #E8DCC2; }
.on-dark .r-tag--demo { color: var(--amber); background: transparent; }

/* ---------- tables ---------- */
.r-table-wrap { overflow-x: auto; background: #E4E6DC; border: 1px solid var(--lo-2); box-shadow: var(--bevel-in); }
.r-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.r-table th { position: sticky; top: 0; text-align: left; font-size: 11px; letter-spacing: .08em; font-weight: 600; padding: 4px 10px; background: var(--surface); box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi); white-space: nowrap; }
.r-table td { padding: 6px 10px; border-top: 1px solid #C4C7BB; white-space: nowrap; }
.r-table tbody tr:nth-child(even) td { background: #D9DBD0; }
.r-table tbody tr.is-you td { background: #C3D5B6; }
.r-table .right { text-align: right; }
.r-table tbody tr.clickable { cursor: pointer; }
.r-table tbody tr.clickable:hover td { background: #CFDCC5; }
.r-empty { padding: var(--s5) var(--s4); text-align: center; }
.r-empty__title { font-family: var(--font-pixel); font-size: 24px; line-height: 1.1; }

/* ---------- logo: slowly rotating pixel apple ---------- */
.logo-spin { display: inline-block; perspective: 200px; flex: none; line-height: 0; }
.logo-spin svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .logo-spin svg { animation: logo-spin 8s linear infinite; transform-style: preserve-3d; }
}
@keyframes logo-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.logo-spin--tb { width: 18px; height: 18px; }
.logo-spin--hero { width: 64px; height: 64px; }
.brand { display: flex; align-items: center; gap: 16px; }
.brand .wordmark { flex: 1; min-width: 0; }

/* ---------- landing ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s4); align-items: start; }
.hero__scene { padding: 0; display: grid; place-items: center; }
.hero__scene svg { display: block; width: 100%; height: auto; max-height: 300px; }
.hero__main .r-window__body { padding: var(--s5) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.wordmark { display: block; width: 100%; max-width: 420px; height: auto; }
.hero__headline { font-family: var(--font-pixel); font-size: 52px; line-height: .95; letter-spacing: .01em; color: var(--text-light-bg); }
.hero__headline span { display: block; }
.hero__headline span:last-child { color: var(--green-muted); }
.hero__copy { font-size: 14px; line-height: 1.6; max-width: 46ch; }
.hero__art { display: flex; align-items: stretch; }
.hero__art .r-window { flex: 1; display: flex; flex-direction: column; }
.hero__art .r-window__body { flex: 1; display: grid; place-items: center; background: var(--bg-term); box-shadow: var(--bevel-in-dark); margin: 3px; padding: var(--s4); }
.hero__art svg { width: 100%; max-width: 360px; height: auto; }
.manual { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text-light-bg); }
.manual__item { padding: var(--s3) var(--s4); border-right: 1px solid var(--lo); box-shadow: inset 1px 1px 0 var(--hi); }
.manual__item:last-child { border-right: 0; }
.manual__num { font-family: var(--font-pixel); font-size: 26px; line-height: 1; color: var(--green-muted); }
.manual__title { font-weight: 600; letter-spacing: .06em; font-size: 13px; margin-top: 2px; }
.manual__text { font-size: 12px; color: var(--text-muted-light); margin-top: 4px; line-height: 1.5; }
.sys-lines { display: grid; gap: 2px; font-size: 12px; }
.sys-lines div { display: flex; gap: 8px; }
.sys-lines dt { color: var(--text-muted-light); min-width: 16ch; }

/* ---------- lobby ---------- */
.lobby { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s4); align-items: start; }
.quote { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; font-size: 13px; }
.quote dt { color: var(--text-muted-light); }
.quote dd { margin: 0; text-align: right; font-weight: 600; }
.quote .total { border-top: 1px solid var(--lo); padding-top: 4px; margin-top: 2px; }
.stack { display: grid; gap: var(--s3); }
.stack-lg { display: grid; gap: var(--s4); }
.offline-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; padding: 8px 10px; background: #E8DCC2; border: 1px solid #A98544; color: #5B4313; }

/* matchmaking spinner (pixel rotating block) */
.spinner { display: inline-grid; grid-template-columns: repeat(3, 6px); gap: 2px; vertical-align: middle; }
.spinner i { width: 6px; height: 6px; background: var(--green-muted); }
@media (prefers-reduced-motion: no-preference) {
  .spinner i { animation: spin 1.2s steps(1) infinite; }
  .spinner i:nth-child(1) { animation-delay: 0s; } .spinner i:nth-child(2) { animation-delay: .15s; } .spinner i:nth-child(3) { animation-delay: .3s; }
  .spinner i:nth-child(6) { animation-delay: .45s; } .spinner i:nth-child(9) { animation-delay: .6s; } .spinner i:nth-child(8) { animation-delay: .75s; }
  .spinner i:nth-child(7) { animation-delay: .9s; } .spinner i:nth-child(4) { animation-delay: 1.05s; }
}
.spinner i:nth-child(5) { visibility: hidden; animation: none; }
@keyframes spin { 0%, 12% { background: var(--green-bright); } 13%, 100% { background: var(--green-muted); } }

/* ---------- game ---------- */
.game { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s4); align-items: start; }
.game__board-col { display: grid; gap: 6px; justify-items: center; min-width: 0; }
.game__board-col > * { width: 100%; max-width: min(640px, calc(100vh - 260px)); min-width: 280px; }
.game__side { display: grid; gap: var(--s3); }
.player-strip { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: var(--surface); color: var(--text-light-bg); border: 1px solid var(--border); box-shadow: var(--bevel-out); }
.player-strip__icon { width: 24px; height: 24px; flex: none; background: var(--bg-term); border: 1px solid var(--border); display: grid; place-items: center; }
.player-strip__icon svg { width: 20px; height: 20px; }
.player-strip__name { font-weight: 600; letter-spacing: .03em; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-strip__meta { font-size: 11px; color: var(--text-muted-light); letter-spacing: .04em; }
.player-strip__who { min-width: 0; flex: 1; }
.clock { margin-left: auto; font-family: var(--font-mono); font-weight: 600; font-size: 22px; padding: 0 10px; min-width: 96px; text-align: right; background: var(--bg-term); color: var(--text-muted-dark); border: 1px solid var(--border); box-shadow: var(--bevel-in-dark); line-height: 34px; }
.clock--active { color: var(--green-bright); }
.clock--low { color: var(--amber); }
.clock--zero { color: #E08A7F; }

.board-frame { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--bevel-out-2); padding: 4px; }
.board {
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1 / 1; width: 100%;
  border: 1px solid var(--border);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.sq {
  position: relative; border: 0; padding: 0; margin: 0;
  display: grid; place-items: center;
  cursor: pointer; min-width: 0; min-height: 0;
}
.sq--l { background: var(--sq-light); }
.sq--d { background: var(--sq-dark); }
.sq--last.sq--l { background: #CDC79B; }
.sq--last.sq--d { background: #8A8E5E; }
.sq--sel { box-shadow: inset 0 0 0 3px var(--border), inset 0 0 0 5px var(--green-bright); }
.sq--check { box-shadow: inset 0 0 0 3px var(--red); background-image: radial-gradient(rgba(182,95,85,.55), transparent 70%); }
.sq:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--amber); z-index: 1; }
.sq__piece { width: 88%; height: 88%; display: block; pointer-events: none; }
.sq__dot { position: absolute; width: 22%; height: 22%; background: rgba(9,11,9,.45); pointer-events: none; }
.sq__cap { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(135deg, rgba(9,11,9,.55) 14%, transparent 14%) top left,
  linear-gradient(225deg, rgba(9,11,9,.55) 14%, transparent 14%) top right,
  linear-gradient(45deg, rgba(9,11,9,.55) 14%, transparent 14%) bottom left,
  linear-gradient(315deg, rgba(9,11,9,.55) 14%, transparent 14%) bottom right;
  background-size: 50% 50%; background-repeat: no-repeat; }
.sq__coord { position: absolute; font-size: clamp(8px, 1.4vw, 11px); line-height: 1; font-weight: 600; pointer-events: none; }
.sq__coord--rank { top: 3px; left: 3px; }
.sq__coord--file { bottom: 2px; right: 3px; }
.sq--l .sq__coord { color: var(--sq-dark); }
.sq--d .sq__coord { color: var(--sq-light); }
.sq.drag-over { box-shadow: inset 0 0 0 3px var(--hi); }
.drag-ghost { position: fixed; pointer-events: none; z-index: 50; transform: translate(-50%, -50%); }

.board-status { display: flex; gap: 2px; font-size: 12px; background: var(--surface); color: var(--text-light-bg); border: 1px solid var(--border); padding: 2px; }
.board-status > span { padding: 2px 8px; box-shadow: var(--bevel-in); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-status > span:first-child { flex: 1; }

.movelist { max-height: 340px; overflow-y: auto; padding: 8px 12px; font-size: 13px; }
.movelist ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 3.2ch 1fr 1fr; gap: 1px 12px; }
.movelist li { display: contents; }
.movelist .n { color: var(--green-muted); }
.movelist .cur { background: var(--green-muted); color: var(--bg-term); padding: 0 3px; margin-left: -3px; }
.movelist__empty { color: var(--green-muted); }

.promo { display: flex; gap: 4px; }
.promo button { width: 52px; height: 52px; padding: 4px; background: var(--raised); border: 1px solid var(--border); box-shadow: var(--bevel-out-2); cursor: pointer; }
.promo button:active { box-shadow: var(--bevel-in); }

/* modal (confirmation dialogs) */
.modal-backdrop { position: fixed; inset: 0; background: rgba(9,11,9,.62); display: grid; place-items: center; z-index: 40; padding: 16px; }
.modal { width: 100%; max-width: 440px; }
.modal .r-window__body { display: grid; gap: var(--s3); }

/* result screen */
.result { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.result__icon { width: 72px; height: 72px; background: var(--bg-term); border: 1px solid var(--border); box-shadow: var(--bevel-in-dark); display: grid; place-items: center; }
.result__icon svg { width: 56px; height: 56px; }
.result__title { font-family: var(--font-pixel); font-size: 36px; line-height: 1; }

/* wallet */
.wallet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.balance-big { font-family: var(--font-mono); font-weight: 600; font-size: 34px; letter-spacing: -.01em; line-height: 1.1; }
.balance-big small { font-size: 16px; font-weight: 500; color: var(--green-muted); margin-left: 6px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: 13px; }
.kv dt { color: var(--text-muted-light); white-space: nowrap; }
.kv dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.on-dark .kv dt { color: var(--text-muted-dark); }

/* profile */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--lo-2); box-shadow: var(--bevel-in); background: #E4E6DC; }
.stat { padding: 10px 12px; border-right: 1px solid #C4C7BB; }
.stat:last-child { border-right: 0; }
.stat__v { font-size: 22px; font-weight: 600; line-height: 1.2; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.guide-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.toc { display: grid; gap: 2px; }
.toc a { display: block; padding: 4px 8px; color: var(--text-light-bg); text-decoration: none; font-size: 13px; border: 1px solid transparent; }
.toc a:hover { border-color: var(--lo); background: var(--raised); }
.guide-sec { scroll-margin-top: 16px; }
.guide-sec h2 { font-family: var(--font-pixel); font-size: 26px; line-height: 1; margin-bottom: 8px; }
.guide-sec + .guide-sec { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--lo); }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 34px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--green-muted); margin: 0; }

.toast-host { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: grid; gap: 6px; width: min(440px, calc(100% - 32px)); }
.toast { background: var(--bg-term); color: var(--green-bright); border: 1px solid var(--border); box-shadow: 0 0 0 1px var(--green-muted), 3px 3px 0 rgba(0,0,0,.4); padding: 8px 12px; font-size: 13px; }
.toast--err { color: #E8A39A; box-shadow: 0 0 0 1px var(--red), 3px 3px 0 rgba(0,0,0,.4); }
.toast::before { content: '> '; color: var(--green-muted); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .game { grid-template-columns: minmax(0, 1fr); }
  .game__side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lobby { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__art .r-window__body { min-height: 0; }
  .hero__art svg { max-width: 260px; }
  .wallet, .two-col { grid-template-columns: minmax(0, 1fr); }
  .guide-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 14px; background-size: 16px 16px; }
  .app { margin: 0; min-height: 100vh; border: 0; box-shadow: none; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .titlebar { height: 40px; position: sticky; top: 0; z-index: 20; }
  .titlebar__sub, .titlebar__conn-text { display: none; }
  .menubar, .statusbar { display: none; }
  .workspace { padding: 12px; gap: 12px; }
  .bottomnav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: inset 0 1px 0 var(--hi);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); gap: 4px;
  }
  .bottomnav a { display: grid; justify-items: center; gap: 2px; padding: 5px 0 4px; min-height: 48px; color: var(--text-light-bg); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .06em; border: 1px solid transparent; }
  .bottomnav a svg { width: 18px; height: 18px; }
  .bottomnav a[aria-current="page"] { background: var(--green); border-color: var(--border); box-shadow: var(--bevel-in); }
  .page-title { font-size: 30px; }
  .hero__main .r-window__body { padding: var(--s4); }
  .hero__headline { font-size: 42px; }
  .manual { grid-template-columns: minmax(0, 1fr); }
  .manual__item { border-right: 0; border-bottom: 1px solid var(--lo); }
  .manual__item:last-child { border-bottom: 0; }
  .r-btn { min-height: 44px; }
  .r-btn--sm { min-height: 36px; }
  .r-option { min-height: 44px; }
  .r-input, .r-select { min-height: 44px; font-size: 16px; }
  .game__side { grid-template-columns: minmax(0, 1fr); }
  .game__board-col > * { max-width: none; min-width: 0; }
  .board-frame { padding: 2px; }
  .clock { font-size: 20px; min-width: 84px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid #C4C7BB; }
  .r-window__body { padding: 12px; }
  .r-table td, .r-table th { padding-left: 8px; padding-right: 8px; }
  .hide-sm { display: none; }
  .balance-big { font-size: 28px; }
  .toast-host { bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (min-width: 721px) { .show-sm { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }