/* Visual source: 设计/生图方案/作弊象棋-墨金棋室-整站首页-v1.png */
:root {
  --paper: #20231f;
  --white: #2b2e28;
  --ink: #eee3c7;
  --body: #c5bea7;
  --muted: #a39e87;
  --line: #514d3b;
  --green: #d2a653;
  --green-dark: #bc9144;
  --sage: #343629;
  --red: #ae4936;
  --gold: #e5b653;
  --board: #dab17b;
  --shadow: 0 8px 25px #11150e22;
}
body {
  background: #20231f;
  color: #eee3c7;
  font-size: 14px;
}
.site-header {
  height: 76px;
  position: sticky;
  top: 0;
  z-index: 15;
  background: #292b24;
  border-bottom: 1px solid #66583b;
}
.header-inner {
  max-width: none;
  padding: 0 30px;
  gap: 24px;
}
.brand {
  font-size: 26px;
  font-family: "KaiTi", "Microsoft YaHei", serif;
}
.brand small {
  font-family: var(--ui);
  font-size: 11px;
  color: #c0b593;
  letter-spacing: 1px;
}
.brand-seal {
  background: #863c2e;
  color: #d6a982;
  border-color: #b45c43;
}
.main-nav {
  display: none;
}
.connection {
  margin-left: auto;
  color: #b4bb94;
}
.portal-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #e4c783;
}
.portal-user button {
  color: #e4c783;
}
.portal-avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #534f3b;
  color: #e9dcb9;
  font-family: KaiTi, serif;
}
.site-footer {
  display: none;
}
.workspace {
  max-width: 1224px;
  margin: 0 auto 0 200px;
  padding: 28px 32px;
}
.sidebar {
  position: fixed;
  left: 0;
  top: 76px;
  bottom: 0;
  width: 200px;
  background: linear-gradient(180deg, #2b2d26, #292b24);
  border-right: 1px solid #514a37;
  padding: 24px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 12;
}
.sidebar button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  text-align: left;
  border-radius: 5px;
  font-size: 14px;
  color: #d4c9ab;
}
.sidebar button svg {
  width: 20px;
  height: 20px;
}
.sidebar button:hover {
  background: #ffffff08;
}
.sidebar button.active {
  color: #f6e4b7;
  background: linear-gradient(90deg, #725a2e, #5c4c2c);
  box-shadow: inset 3px 0 #d7a84b;
}
.sidebar .nav-spacer {
  flex: 1;
}
.sidebar .nav-divider {
  border-top: 1px solid #514a37;
  margin: 10px 4px;
}
.portal-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.portal-title h1 {
  font-size: 29px;
  font-family: KaiTi, var(--ui);
  font-weight: 600;
  letter-spacing: 1px;
}
.portal-title p {
  font-size: 12px;
  color: #b9b297;
  margin-top: 7px;
}
.portal-title .badge {
  font-size: 10px;
  color: #b6be96;
  border: 1px solid #4a503d;
  border-radius: 30px;
  padding: 6px 11px;
}
.portal-view {
  min-height: calc(100dvh - 160px);
}
.portal-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 20px;
}
.surface {
  border: 1px solid #5b5541;
  background: linear-gradient(120deg, #34372e, #2f322a);
  border-radius: 10px;
  padding: 23px;
  box-shadow: 0 4px 14px #0000000d;
}
.surface h2 {
  font-size: 20px;
  font-family: KaiTi, var(--ui);
  font-weight: 600;
  margin: 0 0 10px;
}
.surface p {
  font-size: 12px;
  line-height: 1.9;
  color: #c3bba2;
}
.surface h3 {
  font-size: 15px;
  margin: 0 0 9px;
  font-weight: 500;
}
.button.primary {
  background: linear-gradient(#e2b667, #cca04e);
  color: #352c1a;
  border: 1px solid #dfb565;
  box-shadow: inset 0 1px #f7d68c4d;
}
.button.primary:hover {
  background: #e4b557;
}
.button.secondary {
  background: #2e3228;
  color: #e4d4ad;
  border: 1px solid #786741;
  box-shadow: none;
}
.button.secondary:hover {
  background: #424334;
}
.button {
  font-size: 12px;
  min-height: 42px;
}
.surface .button-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.hero-surface {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 27px;
}
.hero-surface:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #34372e 30%, #34372e88 68%, transparent);
  pointer-events: none;
}
.hero-surface > div {
  position: relative;
  z-index: 1;
  max-width: 390px;
}
.hero-surface h2 {
  font-size: 29px;
  margin-bottom: 12px;
}
.hero-art {
  position: absolute;
  right: 0;
  top: 0;
  width: 42%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  filter: saturate(0.75);
}
.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.chip {
  font-size: 10px;
  color: #bfb28d;
  border: 1px solid #696148;
  border-radius: 20px;
  padding: 1px 7px;
  background: #343629;
}
.text-link {
  font-size: 11px;
  color: #e6be65;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
}
.hero-link {
  margin-top: 15px;
}
.daily-surface {
  display: flex;
  flex-direction: column;
}
.daily-surface h2 {
  font-size: 26px;
  margin-bottom: 18px;
}
.daily-surface .button {
  align-self: flex-start;
  margin-top: auto;
}
.pill-group {
  display: flex;
  gap: 9px;
  margin-bottom: 15px;
}
.pill-group button {
  border: 1px solid #665f49;
  color: #c8bfa3;
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 13px;
}
.pill-group button.active {
  background: #d2a353;
  border-color: #d2a353;
  color: #332b1a;
}
.section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 14px;
  font-size: 20px;
  font-family: KaiTi, var(--ui);
}
.section-heading:after {
  content: "";
  height: 1px;
  flex: 1;
  background: #4c4d3a;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.theme-tile {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid #58563f;
  background: #34372d;
  border-radius: 8px;
  text-align: left;
  min-height: 106px;
}
.theme-tile:hover {
  border-color: #b99552;
  background: #3b3d31;
}
.theme-tile h3 {
  font-size: 16px;
  font-family: KaiTi, var(--ui);
  margin: 0 0 7px;
}
.theme-tile p {
  font-size: 10px;
  color: #baaf91;
  line-height: 1.8;
}
.theme-seal {
  height: 65px;
  width: 53px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #d2a66e, #b48552);
  color: #713e22;
  display: grid;
  place-items: center;
  font:
    29px KaiTi,
    serif;
  border: 3px solid #a57846;
  box-shadow: inset 0 0 0 1px #edc486;
  border-radius: 3px;
}
.dashboard-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
.dashboard-bottom .surface {
  min-height: 148px;
}
.empty-state {
  padding: 15px 3px;
  color: #b5af94;
  font-size: 12px;
  text-align: center;
}
.empty-state svg {
  width: 32px;
  height: 32px;
  stroke: #958a68;
  fill: none;
  stroke-width: 1.3;
  margin-bottom: 10px;
}
.theory-strip {
  margin-top: 20px;
  padding: 15px 20px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
}
.theory-strip strong {
  font-size: 14px;
}
.theory-strip p {
  font-size: 11px;
}
.subheading {
  color: #b9ac89;
  font-size: 12px;
  line-height: 1.9;
}
.portal-form {
  display: grid;
  gap: 15px;
}
.portal-form label {
  display: grid;
  gap: 6px;
  color: #c8bda1;
  font-size: 12px;
}
.portal-form input,
.portal-form select,
.portal-form textarea,
.portal-input {
  width: 100%;
  min-height: 39px;
  background: #22271e;
  border: 1px solid #5b6147;
  border-radius: 6px;
  color: #eee1bf;
  padding: 8px 11px;
  font-size: 12px;
  outline: none;
}
.portal-form input:focus,
.portal-form select:focus,
.portal-form textarea:focus,
.portal-input:focus {
  border-color: #d3aa5f;
}
.portal-form textarea {
  min-height: 90px;
  resize: vertical;
}
.inline-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.portal-form .field-note {
  color: #a69e83;
  font-size: 10px;
}
.portal-card-list {
  display: grid;
  gap: 14px;
}
.portal-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 16px;
  border: 1px solid #55523e;
  background: #33362b;
  border-radius: 8px;
}
.portal-row .row-info {
  flex: 1;
  min-width: 0;
}
.portal-row h3 {
  font-size: 14px;
  margin: 0 0 4px;
  font-weight: 500;
}
.portal-row p {
  font-size: 10px;
  color: #b5ad90;
  line-height: 1.8;
}
.portal-row .button {
  min-height: 35px;
  padding: 7px 12px;
  font-size: 11px;
}
.row-tag {
  font-size: 10px;
  border: 1px solid #77633c;
  color: #d6b46f;
  padding: 3px 7px;
  border-radius: 4px;
}
.row-note {
  font-size: 11px;
  color: #aea584;
}
.training-tabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.training-tabs button {
  font-size: 12px;
  padding: 8px 15px;
  border: 1px solid #615d47;
  border-radius: 5px;
  color: #cec3a5;
}
.training-tabs button.active {
  background: #776032;
  border-color: #b5934c;
  color: #f2dcaa;
}
.search-row {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}
.search-row input {
  flex: 1;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.stat-box {
  padding: 20px;
  border: 1px solid #555742;
  background: #33362c;
  border-radius: 8px;
}
.stat-box b {
  font:
    28px Georgia,
    serif;
  color: #dec389;
}
.stat-box p {
  font-size: 11px;
  color: #b4aa8b;
  margin-top: 5px;
}
.study-bars {
  display: flex;
  height: 120px;
  gap: 14px;
  align-items: end;
  border-bottom: 1px solid #6b6447;
  padding: 0 12px;
  margin: 15px 0 30px;
}
.study-day {
  flex: 1;
  position: relative;
  background: #9f8245;
  min-height: 3px;
  border-radius: 3px 3px 0 0;
}
.study-day span {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  white-space: nowrap;
  margin-top: 6px;
  color: #bcb394;
}
.study-day em {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font: 10px var(--ui);
  margin-bottom: 4px;
  color: #dac594;
}
.progress-track {
  height: 5px;
  background: #22251c;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
}
.progress-track i {
  display: block;
  height: 100%;
  background: #c5a354;
}
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.topic-card {
  padding: 19px;
  border: 1px solid #5b5541;
  border-radius: 8px;
  background: #34372e;
}
.topic-card h3 {
  font-size: 17px;
  font-family: KaiTi, var(--ui);
  margin: 0 0 10px;
}
.topic-card p {
  font-size: 11px;
  color: #bdb498;
  line-height: 1.9;
}
.topic-card .button {
  margin-top: 14px;
}
.topic-category {
  font-size: 9px;
  color: #ccac68;
  margin-bottom: 9px;
  letter-spacing: 1px;
}
.platform-dialog {
  background: #2c3027;
  color: #eee0bc;
  border: 1px solid #756341;
  width: min(620px, calc(100vw - 28px));
  max-height: 90dvh;
}
.platform-dialog h2 {
  font-size: 24px;
  font-family: KaiTi, var(--ui);
  margin-bottom: 15px;
}
.platform-dialog .dialog-intro,
.platform-dialog .field-note {
  color: #beb398;
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.dialog-head button {
  color: #cbb887;
}
.platform-dialog::backdrop {
  background: #11170dd0;
  backdrop-filter: blur(5px);
}
.table-wrap {
  overflow: auto;
}
.platform-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  color: #c6ba98;
}
.platform-table th,
.platform-table td {
  padding: 10px;
  border-bottom: 1px solid #4d523b;
  text-align: left;
}
.platform-table th {
  color: #dfc789;
  font-size: 10px;
}
.notice {
  border: 1px solid #6c623f;
  background: #463e26;
  color: #e4c685;
  border-radius: 6px;
  padding: 10px 13px;
  font-size: 11px;
  line-height: 1.8;
}
.room-code {
  font:
    30px Georgia,
    serif;
  letter-spacing: 6px;
  color: #e7bf67;
  margin: 10px 0;
}
.waiting-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cca65c;
  animation: breathe 1.5s infinite;
  margin-right: 7px;
}
.danger-button {
  color: #e29b7c;
  border: 1px solid #80604b;
}
.training-session {
  padding: 13px 18px;
  margin: 0 0 16px;
  border: 1px solid #6c5b32;
  background: #353827;
  border-radius: 8px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.training-session h3 {
  font-size: 15px;
  font-family: KaiTi, var(--ui);
}
.training-session p {
  font-size: 11px;
  color: #c0b895;
}
.training-session .button {
  margin-left: auto;
}
.analysis-panel {
  margin-top: 20px;
}
.fact-chip {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid #676143;
  border-radius: 4px;
  font-size: 10px;
  color: #d9c186;
  margin: 3px;
}
.bound-principle {
  color: #e8c57c;
  background: #554829;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 4px;
  margin: 4px;
  border: 1px solid #806a39;
}
.thinking-note {
  color: #c6a968;
  font-size: 11px;
}
.sync-state {
  font-size: 10px;
  color: #a9b38b;
}
.subdued {
  color: #a9a58d;
  font-size: 10px;
}
.toast {
  background: #55482b;
  color: #f2e3b9;
  border: 1px solid #ae8e4a;
}
.library-item,
.move-card {
  background: #2d3127;
  border-color: #56523d;
}
.library-symbol {
  background: #424934;
  color: #c7b983;
}
.library-info h2 {
  color: #e5d4b1;
}
.library-info p {
  color: #aaa68b;
}
.library-empty {
  background: #303528;
  border-color: #68714b;
  color: #ddd0ac;
}
.collection-tag {
  border-color: #625b3e;
  color: #c2af81;
}
.site-header .status-dot {
  background: #73a263;
}
/* Shared chess stage follows the accepted first generated board image. */
.game-grid {
  grid-template-columns: minmax(0, 1fr) 315px;
  gap: 22px;
}
.board-section {
  max-width: 680px;
}
.board-caption {
  margin-bottom: 10px;
}
.page-heading {
  margin-bottom: 18px;
}
.page-heading .eyebrow {
  display: none;
}
.page-heading h1 {
  font-size: 22px;
  font-family: KaiTi, var(--ui);
  color: #f2dfaf;
}
.page-heading p {
  font-size: 11px;
  color: #b1ac8d;
}
.player-info strong {
  color: #e6d7b5;
}
.player-info > span {
  color: #aaa689;
}
.player-status {
  color: #baae88;
}
.caption-tag,
.round-label {
  color: #c6b382;
}
.avatar {
  border: 1px solid #9b7c40;
  background: #5d4d2e;
  color: #e8c78c;
}
.self-avatar {
  background: #763a2b;
  color: #f1ccab;
}
.board-frame {
  background: linear-gradient(130deg, #b38a54, #dbad6c, #a67a43);
  border: 1px solid #d1aa6b;
  box-shadow: 0 7px 17px #090e0650;
}
.board-inner {
  background: #d9b581;
  background-image:
    repeating-linear-gradient(93deg, #6f412514 0 1px, transparent 1px 21px),
    radial-gradient(ellipse at 20% 20%, #eed4a070, transparent 70%);
  border-color: #8b6135;
}
.board-lines path,
.board-lines rect {
  stroke: #634c2b !important;
  opacity: 0.8 !important;
}
.board-lines g {
  fill: #5c452a !important;
  opacity: 1 !important;
}
.piece {
  background: radial-gradient(circle at 30% 20%, #ffedbf, #e4cca0 70%, #c6a46c);
  border-color: #b69559;
  box-shadow:
    0 3px 0 #8a6b38,
    0 6px 7px #6c461640;
  color: #262b21;
}
.piece.red {
  color: #a43b25;
}
.piece.selected {
  box-shadow:
    0 0 0 3px #f2ce6c,
    0 3px 0 #927339,
    0 8px 12px #3e280250;
}
.legal-marker:after {
  background: #a88636;
  box-shadow: 0 0 0 5px #ab89352a;
}
.legal-marker.capture:after {
  border-color: #ddb74b;
}
.last-marker:after {
  background: #c6a24c1c;
  border-color: #a5843d88;
}
.turn-badge {
  background: #b48b43;
  color: #f5dfaa;
}
.turn-badge .status-dot {
  background: #f2d798;
}
.board-toolbar {
  border-color: #504b35;
}
.tool-button,
.board-footnote {
  color: #b6ac8c;
}
.coach-card {
  background: linear-gradient(120deg, #34372c, #2c3026);
  border-color: #61563a;
  padding: 19px;
}
.coach-head h2 {
  color: #eedbb4;
  font-size: 15px;
}
.coach-head p,
.coach-label,
.section-kicker {
  color: #bba674;
}
.coach-icon {
  background: #4a4930;
  color: #d7b85e;
  border-color: #68603c;
}
.coach-label {
  border-color: #68603c;
}
.coach-content p {
  color: #c0b697;
}
.coach-content h3 {
  color: #f4dfb0;
  font-family: KaiTi, var(--ui);
  font-size: 23px;
}
.coach-content .coach-meta {
  color: #aeaa8a;
}
.coach-content .analysis-tag {
  background: #454832;
  color: #d6bc78;
}
.quota-row {
  border-color: #5d573b;
  color: #c5b591;
  margin-bottom: 16px;
}
.quota-display i {
  background: #d6ae56;
  width: 8px;
  height: 8px;
}
.quota-display i.used {
  background: #615132;
}
.quota-display strong {
  color: #e1c27b;
}
.quota-display strong span {
  color: #afa47c;
}
.hint-button {
  background: transparent;
  color: #e3bf6b;
  border: 1px solid #ad8540;
  box-shadow: none;
}
.hint-button:hover {
  background: #52462a;
}
.apply-hint {
  background: linear-gradient(#e3b868, #cea252) !important;
  color: #382b14 !important;
}
.honest-note {
  color: #b2a37d;
}
.move-card {
  border-color: #64593d;
}
.card-heading h2 {
  color: #e8d5a9;
}
.move-columns {
  background: #363929;
  color: #cbb88b;
  border-color: #4f513a;
}
.move-list {
  height: 170px;
}
.move-cell,
.move-cell.red {
  color: #d8c39b;
}
.move-cell.active {
  background: #6f572e;
  color: #f3dba7;
}
.move-cell:hover {
  background: #45482f;
}
.replay-controls {
  border-color: #515239;
}
.replay-controls span {
  color: #b9ad8a;
}
.replay-controls button {
  color: #d8bc7b;
}
.move-footer {
  border-color: #515239;
}
.move-footer button {
  color: #cdb373;
}
.move-footer > span {
  color: #928f74;
}
.empty-moves p,
.empty-moves span {
  color: #a8a280;
}
.learning-note strong {
  color: #c4ae77;
}
.learning-note p {
  color: #a49e7c;
}
.settings-dialog,
.result-dialog {
  background: #2e3228;
  color: #eadbb4;
  border-color: #76633f;
}
.dialog-header h2,
.result-dialog h2 {
  color: #f0d9a5;
}
.dialog-intro,
.field-note,
.result-dialog p {
  color: #b9ac89;
}
fieldset label > span {
  background: #363a2c;
  border-color: #5b6342;
}
fieldset label:has(input:checked) > span {
  background: #65532e;
  border-color: #bf9a4c;
}
fieldset small {
  color: #b7ad87;
}
.result-seal {
  background: #534a2c;
  border-color: #8d733e;
  color: #e6bc66;
}
.result-actions .button {
  font-size: 12px;
}
.connection.offline {
  color: #d9b77d;
}
@media (min-width: 1550px) {
  .workspace {
    margin-left: auto;
    margin-right: auto;
    padding-left: 180px;
  }
  .game-grid {
    grid-template-columns: minmax(0, 620px) 340px;
  }
  .theme-tile {
    min-height: 126px;
  }
  .hero-surface {
    min-height: 240px;
  }
}
@media (max-width: 1200px) {
  .workspace {
    margin-left: 175px;
    padding: 24px;
  }
  .sidebar {
    width: 175px;
    padding: 18px 9px;
  }
  .sidebar button {
    font-size: 13px;
    padding: 12px 10px;
  }
  .portal-grid {
    grid-template-columns: 1.45fr 1fr;
    gap: 15px;
  }
  .theme-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-surface h2 {
    font-size: 24px;
  }
  .hero-art {
    width: 43%;
  }
  .hero-surface > div {
    max-width: 300px;
  }
  .game-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
  }
  .coach-head p {
    font-size: 10px;
  }
  .hint-button {
    font-size: 11px;
  }
  .surface {
    padding: 20px;
  }
  .topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 930px) {
  .workspace {
    margin-left: 75px;
    padding: 22px;
  }
  .sidebar {
    width: 75px;
    padding: 15px 8px;
  }
  .sidebar button {
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    font-size: 9px;
  }
  .sidebar button svg {
    width: 20px;
    height: 20px;
  }
  .portal-title h1 {
    font-size: 25px;
  }
  .portal-grid {
    grid-template-columns: 1fr;
  }
  .hero-surface {
    min-height: 190px;
  }
  .daily-surface {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 18px;
  }
  .daily-surface h2 {
    font-size: 21px;
    margin-bottom: 5px;
  }
  .daily-surface .pill-group {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
  }
  .daily-surface .button {
    grid-column: 2;
    grid-row: 2/4;
  }
  .daily-surface p {
    grid-column: 1;
  }
  .game-grid {
    grid-template-columns: 1fr;
  }
  .side-rail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  .learning-note {
    grid-column: 1/-1;
  }
  .board-section {
    max-width: none;
  }
  .topic-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .site-header {
    height: 64px;
  }
  .header-inner {
    padding: 0 16px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .brand {
    font-size: 21px;
    gap: 8px;
  }
  .brand-seal {
    width: 30px;
    height: 33px;
    font-size: 23px;
  }
  .brand small {
    font-size: 8px;
    letter-spacing: 0.5px;
  }
  .connection {
    display: none;
  }
  .portal-user {
    font-size: 10px;
    margin-left: auto;
    gap: 7px;
  }
  .portal-avatar {
    width: 25px;
    height: 25px;
  }
  .workspace {
    margin: 0;
    padding: 22px 16px 85px;
    max-width: none;
  }
  .sidebar {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 61px;
    flex-direction: row;
    justify-content: space-around;
    border-top: 1px solid #70603c;
    border-right: 0;
    padding: 3px 0;
    background: #2b2d25;
    box-shadow: 0 -4px 18px #11170f50;
    gap: 0;
  }
  .sidebar button {
    font-size: 8px;
    padding: 5px 1px;
    border-radius: 0;
    flex: 1;
    gap: 2px;
  }
  .sidebar button.active {
    box-shadow: inset 0 2px #d7a84b;
    background: #56482c;
  }
  .sidebar .nav-spacer,
  .sidebar .nav-divider,
  .sidebar .secondary-nav {
    display: none;
  }
  .sidebar button svg {
    width: 17px;
    height: 17px;
  }
  .portal-title {
    margin-bottom: 18px;
    align-items: flex-start;
    gap: 10px;
  }
  .portal-title h1 {
    font-size: 25px;
  }
  .portal-title p {
    font-size: 11px;
    line-height: 1.8;
    max-width: 270px;
  }
  .portal-title .badge {
    display: none;
  }
  .surface {
    padding: 17px;
  }
  .hero-surface {
    padding: 21px;
    min-height: 230px;
  }
  .hero-surface h2 {
    font-size: 25px;
  }
  .hero-surface p {
    font-size: 11px;
    max-width: 255px;
  }
  .hero-surface > div {
    max-width: 100%;
  }
  .hero-art {
    width: 46%;
    opacity: 0.43;
  }
  .hero-surface:after {
    background: linear-gradient(90deg, #34372e, transparent);
  }
  .hero-surface .button-row {
    gap: 9px;
  }
  .hero-surface .button {
    font-size: 11px;
    padding: 10px 13px;
  }
  .chips {
    margin-top: 15px;
    gap: 5px;
  }
  .chip {
    font-size: 8px;
  }
  .daily-surface {
    display: flex;
    gap: 0;
  }
  .daily-surface .pill-group {
    margin: 10px 0;
  }
  .daily-surface .button {
    margin-top: 12px;
    width: 100%;
  }
  .daily-surface h2 {
    font-size: 22px;
  }
  .section-heading {
    font-size: 19px;
    margin: 22px 0 13px;
  }
  .theme-grid {
    gap: 10px;
  }
  .theme-tile {
    padding: 12px;
    gap: 9px;
    min-height: 99px;
  }
  .theme-seal {
    width: 37px;
    height: 49px;
    font-size: 23px;
    flex-shrink: 0;
  }
  .theme-tile h3 {
    font-size: 15px;
    margin-bottom: 5px;
  }
  .theme-tile p {
    font-size: 9px;
  }
  .dashboard-bottom {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .dashboard-bottom .surface {
    min-height: 145px;
  }
  .theory-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .portal-grid,
  .inline-fields {
    grid-template-columns: 1fr;
  }
  .topic-grid {
    grid-template-columns: 1fr;
  }
  .portal-row {
    gap: 9px;
    padding: 13px;
  }
  .portal-row h3 {
    font-size: 12px;
  }
  .portal-row .button {
    font-size: 10px;
    min-height: 33px;
    padding: 6px 9px;
  }
  .row-tag {
    font-size: 8px;
  }
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .stat-box {
    padding: 13px;
  }
  .stat-box b {
    font-size: 24px;
  }
  .stat-box p {
    font-size: 9px;
  }
  .side-rail {
    grid-template-columns: 1fr;
  }
  .game-grid {
    gap: 20px;
  }
  .board-frame {
    padding: 9px;
  }
  .page-heading h1 {
    font-size: 23px;
  }
  .page-heading p {
    font-size: 10px;
  }
  .surface h2 {
    font-size: 20px;
  }
  .training-session .button {
    margin-left: 0;
  }
  .portal-dialog {
    padding: 20px;
  }
  .quota-options {
    flex-wrap: wrap;
  }
  .quota-options label {
    min-width: 44%;
  }
}
.surface h2 > svg,
.portal-title svg,
.training-session svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
  margin-right: 5px;
}
.hero-art {
  mask-image: linear-gradient(90deg, transparent, #000 28%);
}
.hero-surface:after {
  background: linear-gradient(90deg, #34372e 20%, #34372e44 70%, transparent);
}

@keyframes hintLineDraw {
  from {
    stroke-dashoffset: 700;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 0.78;
  }
}
@keyframes kingAlert {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(-54%, -50%);
  }
  75% {
    transform: translate(-46%, -50%);
  }
}
@keyframes targetPulse {
  50% {
    opacity: 0.5;
    transform: scale(0.84);
  }
}
@keyframes winningBoard {
  50% {
    filter: saturate(0.85) brightness(1.08);
  }
}
@keyframes landPiece {
  0% {
    transform: translate(-50%, -57%) scale(1.05);
  }
  70% {
    transform: translate(-50%, -48%) scale(0.98);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
.board-arrows > path {
  stroke-dasharray: 700;
  animation: hintLineDraw 0.35s ease-out;
}
.legal-marker:after {
  animation: targetPulse 1.5s ease-in-out infinite;
}
.piece.checked {
  animation: kingAlert 0.25s ease-in-out 2;
  box-shadow:
    0 0 0 3px #c16b47,
    0 3px 0 #927339;
}
.piece.just-landed {
  animation: landPiece 0.28s ease-out;
}
.board-frame.game-finished {
  animation: winningBoard 0.6s ease-out;
  border-color: #e5b955;
}
.quota-display i.used {
  transition: background 0.3s;
}
.network .waiting-dot {
  animation: breathe 1s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .board-arrows > path,
  .piece.checked,
  .legal-marker:after,
  .board-frame.game-finished,
  .piece.just-landed {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
@media(min-width:1001px){body:has(#gameView:not([hidden])) .workspace{max-width:1150px;padding-top:20px}body:has(#gameView:not([hidden])) .game-grid{grid-template-columns:minmax(0,540px) 315px;gap:23px}body:has(#gameView:not([hidden])) .board-section{max-width:540px}body:has(#gameView:not([hidden])) .page-heading{margin-bottom:14px}body:has(#gameView:not([hidden])) .training-session{padding:9px 14px;margin-bottom:12px}body:has(#gameView:not([hidden])) .player-row.opponent{margin-bottom:10px}}