:root {
  color-scheme: dark;
  --bg: #0b1718;
  --bg-glow: #1c3835;
  --panel: #172b29;
  --panel-hi: #203934;
  --panel-soft: #122321;
  --line: #39514a;
  --line-soft: #2b403b;
  --text: #f2efe4;
  --muted: #a5b6a9;
  --muted-dim: #778d81;
  --gold: #d9b15f;
  --gold-hi: #f1d48e;
  --teal: #91c5b2;
  --red: #dd8977;
  --blue: #90b9d0;
  --shadow: 0 12px 30px rgb(0 0 0 / 19%);
  --game-cell: 24px;
  --stock-cell: var(--game-cell);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 360px;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 49% -16%, rgb(61 103 82 / 42%), transparent 42rem),
    linear-gradient(145deg, #172a27 0%, var(--bg) 46rem, #0a1415 100%);
  font-size: 13px;
}

button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}
a { color: inherit; }

.app-shell { max-width: 1920px; margin: 0 auto; padding: 14px 18px 22px; }
.topbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; min-width: 240px; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #6c8060; border-radius: 11px; color: var(--gold-hi); background: linear-gradient(145deg, #354b38, #172c29); font-size: 25px; box-shadow: var(--shadow); }
.brand-copy { display: grid; gap: 2px; }
.eyebrow { color: #9db69f; font-size: 9px; letter-spacing: .15em; line-height: 1.2; text-transform: uppercase; }
.brand-title { font-size: 18px; font-weight: 720; letter-spacing: .035em; white-space: nowrap; }
.brand-title span { margin-left: 5px; color: var(--gold); font-size: 12px; font-weight: 570; }
.topbar-status { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 11px; }
.prototype-badge, .subtle-badge, .count-badge, .prototype-dot { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #856f46; border-radius: 99px; background: rgb(172 131 62 / 12%); color: var(--gold-hi); font-size: 9px; font-weight: 650; line-height: 1; padding: 5px 8px; white-space: nowrap; }
.connection-state { display: inline-flex; align-items: center; gap: 6px; }
.connection-state i { width: 7px; height: 7px; border-radius: 50%; background: #798980; box-shadow: 0 0 0 3px rgb(121 137 128 / 12%); }
.connection-state[data-state="connected"] i { background: #8dd19e; box-shadow: 0 0 0 3px rgb(141 209 158 / 14%); }
.connection-state[data-state="error"] i { background: var(--red); box-shadow: 0 0 0 3px rgb(221 137 119 / 14%); }
.room-id-inline { color: #d6d8c7; font-variant-numeric: tabular-nums; }
.icon-button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 8px; background: #1b302c; color: var(--gold-hi); font-size: 14px; }
.icon-button:hover { border-color: #85946c; background: #273d36; }

.lobby-screen { max-width: 920px; margin: 26px auto 0; padding-bottom: 18px; }
.lobby-intro { margin-bottom: 25px; text-align: center; }
.lobby-emblem { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 13px; border: 1px solid #8c794c; border-radius: 15px; background: linear-gradient(145deg, #3a4c36, #20352b); color: var(--gold-hi); font-size: 36px; box-shadow: 0 0 45px rgb(217 177 95 / 9%); }
.lobby-intro .eyebrow { color: #c7b77c; font-size: 10px; }
.lobby-intro h1 { margin: 9px 0 8px; font-size: clamp(25px, 3vw, 34px); font-weight: 650; letter-spacing: .06em; }
.lobby-intro p { margin: 0; color: #aebfab; font-size: 13px; }
.lobby-room-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lobby-room-card { padding: 25px 28px 20px; border-color: #4b6250; }
.lobby-card-heading h2 { margin: 7px 0 7px; color: #efe9d2; font-size: 21px; font-weight: 650; }
.lobby-card-heading p { margin: 0 0 20px; color: #9db29e; font-size: 12px; }
.lobby-room-card .room-form { gap: 9px; }
.lobby-room-card .room-form label { color: #c4d0bc; font-size: 12px; }
.lobby-room-card .room-form input, .lobby-room-card .room-form select { min-height: 43px; padding: 11px 13px; font-size: 13px; }
.lobby-room-card .room-form button { justify-content: space-between; min-height: 43px; margin-top: 7px; padding: 11px 14px; font-size: 13px; }
.lobby-card-note { margin: 15px 0 0; color: #8da38f; font-size: 10px; line-height: 1.5; }
.lobby-resume { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 17px 22px; border-color: #9d8750; background: linear-gradient(120deg, #344333, #1a3028); }
.lobby-resume h2 { margin: 5px 0; color: var(--gold-hi); font-size: 17px; }
.lobby-resume p { margin: 0; color: #bac6aa; font-size: 11px; line-height: 1.5; }
.lobby-resume button { flex-shrink: 0; min-width: 125px; font-size: 12px; }
.lobby-status { min-height: 19px; margin: 12px 0 0; color: var(--gold-hi); font-size: 12px; text-align: center; }
.lobby-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 5px 0 0; color: #839a86; font-size: 10px; }
.lobby-footer span { color: #c4a86a; }
#lobbyTitle:focus, #gameTitle:focus { outline: none; }

.table-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; gap: 16px; }
.action-column, .player-column { display: grid; align-content: start; gap: 12px; min-width: 0; }
.panel { min-width: 0; overflow: hidden; border: 1px solid rgb(149 173 142 / 20%); border-radius: 12px; background: linear-gradient(148deg, rgb(33 57 48 / 96%), rgb(19 38 34 / 98%)); box-shadow: var(--shadow); }
.room-panel, .players-panel, .worker-panel, .record-panel, .action-summary-panel, .limits-panel, .rules-panel { padding: 13px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 11px; }
.heading-actions { display: flex; align-items: center; gap: 8px; }
.section-heading h2, .grid-toolbar h2 { margin: 3px 0 0; font-size: 14px; letter-spacing: .015em; }
.compact-heading { margin-bottom: 8px; }
.subtle-badge { border-color: #506453; background: rgb(91 124 93 / 12%); color: #c2d1b9; }
.count-badge { border-color: #556b5a; background: #263c31; color: #e3d5ad; font-variant-numeric: tabular-nums; }

.public-supply-panel { padding: 13px; }
.public-supply-content { display: grid; gap: 12px; }
.public-supply-group h3 { margin: 0 0 7px; color: #aebfae; font-size: 10px; font-weight: 650; }
.public-supply-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.public-supply-buildings .public-supply-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.public-supply-item { display: grid; align-content: start; justify-items: center; gap: 3px; min-width: 0; min-height: 86px; border: 1px solid #405949; border-radius: 7px; padding: 8px 5px 7px; background: rgb(9 25 21 / 35%); text-align: center; }
.public-supply-item.is-empty { border-color: #a2574d; background: rgb(119 48 40 / 18%); }
.public-supply-item.is-unknown { border-style: dashed; border-color: #766c50; }
.public-supply-label { color: #c8d4c2; font-size: 10px; line-height: 1.4; }
.public-supply-value { color: #e7cf91; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.public-supply-item.is-empty .public-supply-value { color: #ec9481; }
.public-supply-item.is-unknown .public-supply-value { color: #c9b983; }
.public-supply-detail, .public-supply-used { color: #899d8e; font-size: 8px; line-height: 1.35; }
.public-supply-used { color: #b2c0ae; }
.public-supply-empty { grid-column: 1 / -1; margin: 0; padding: 9px; color: var(--muted-dim); font-size: 9px; text-align: center; }
.public-supply-note { margin: 0; color: #84998b; font-size: 9px; line-height: 1.45; }

.room-form { display: grid; gap: 6px; }
.room-form label, .form-inline label { color: var(--muted); font-size: 10px; }
.room-form input, .room-form select { width: 100%; min-height: 33px; border: 1px solid #465c4e; border-radius: 7px; background: #10211f; color: var(--text); padding: 7px 9px; }
.room-form input::placeholder { color: #667d72; }
.form-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0; }
.form-inline select { width: 94px; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; border-radius: 7px; padding: 8px 11px; font-size: 11px; font-weight: 720; transition: transform .15s ease, filter .15s ease, background .15s ease; }
.primary-button { border: 1px solid #d2ab60; background: linear-gradient(135deg, #dfbd72, #b58a47); color: #202c23; box-shadow: 0 4px 12px rgb(180 139 65 / 16%); }
.primary-button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.secondary-button { border: 1px solid #607866; background: #2a4438; color: #d5e0cf; }
.secondary-button:hover:not(:disabled) { border-color: #9ba976; background: #354f40; }
.room-form .primary-button, .room-form .secondary-button { width: 100%; margin-top: 3px; }
.form-separator { display: flex; align-items: center; gap: 8px; margin: 11px 0; color: var(--muted-dim); font-size: 9px; }
.form-separator::before, .form-separator::after { height: 1px; flex: 1; background: var(--line-soft); content: ""; }
.room-code-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 9px; border: 1px solid var(--line-soft); border-radius: 7px; background: rgb(8 24 21 / 38%); color: var(--muted); font-size: 9px; }
.room-code-row strong { color: var(--gold-hi); font-size: 10px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.start-game-button { width: 100%; margin-top: 9px; }
.copy-button { padding: 4px 6px; border: 1px solid #526b58; border-radius: 5px; background: #2b4437; color: #d4dfce; font-size: 9px; }

.players-list { display: grid; gap: 8px; }
.empty-state { margin: 0; padding: 12px 9px; border: 1px dashed rgb(134 160 131 / 25%); border-radius: 8px; color: var(--muted-dim); font-size: 10px; line-height: 1.55; text-align: center; }
.player-row { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 7px; border: 1px solid transparent; border-radius: 8px; background: rgb(9 25 21 / 35%); }
.player-row.current { border-color: rgb(217 177 95 / 50%); background: rgb(100 79 41 / 17%); }
.player-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #4f6854; color: #f1e5bd; font-size: 10px; font-weight: 750; }
.player-row strong { display: block; overflow: hidden; color: #e8e8db; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.player-row small { display: block; margin-top: 3px; color: var(--muted-dim); font-size: 9px; }
.player-presence { color: #99c59e; font-size: 9px; white-space: nowrap; }
.round-phase { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; padding: 9px 2px 7px; border-top: 1px solid var(--line-soft); }
.round-phase div { display: grid; gap: 4px; }
.round-phase span { color: var(--muted-dim); font-size: 9px; }
.round-phase strong { color: #e3d6ad; font-size: 11px; }
.phase-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.phase-step { min-width: 0; padding: 5px 3px; border: 1px solid #344c41; border-radius: 5px; color: #71877a; font-size: 8px; text-align: center; }
.phase-step.active { border-color: #907747; background: rgb(173 132 65 / 15%); color: var(--gold-hi); }
.phase-step.done { border-color: #456654; color: #9bc3a1; }
.phase-controls { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 9px; }
.phase-progress { color: var(--muted); font-size: 11px; line-height: 1.5; }
.worker-count { color: var(--gold-hi); font-size: 19px; font-variant-numeric: tabular-nums; }
.worker-row { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; padding: 4px 2px; }
.meeple { position: relative; width: 11px; height: 13px; margin-top: 5px; border-radius: 5px 5px 3px 3px; background: #d5b96e; box-shadow: 0 0 0 1px rgb(255 241 187 / 20%); }
.meeple::before { position: absolute; top: -5px; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: inherit; content: ""; }
.meeple.spent { background: #53685b; opacity: .7; }
.panel-note { margin: 7px 0 0; color: var(--muted-dim); font-size: 9px; line-height: 1.45; }

.action-panel { padding: 13px; }
.board-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.board-heading h1 { margin: 3px 0 3px; font-size: 19px; line-height: 1.1; }
.board-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.board-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.turn-owner { color: #d7d8c5; font-size: 10px; text-align: right; }
.small-button { min-height: 29px; padding: 6px 9px; font-size: 9px; white-space: nowrap; }
.board-navigation { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 8px; }
.board-navigation button { flex: 1 1 120px; min-height: 31px; padding: 6px 8px; border: 1px solid #57705d; border-radius: 6px; background: #1a3028; color: #d7d8ba; font-size: 10px; }
.board-navigation button:hover { border-color: var(--gold-hi); background: #314333; }
.action-board-scroll { max-height: 70vh; overflow: auto; border: 1px solid #5e7158; border-radius: 9px; background: #0e1916; scrollbar-color: #71815a #15231f; scrollbar-width: thin; }
.action-art-grid { display: grid; grid-template-columns: minmax(580px, 1fr); gap: 10px; padding: 8px; }
.board-art-placeholder { grid-column: 1 / -1; }
.action-art-frame { position: relative; margin: 0; min-width: 0; border-radius: 5px; background: #101c19; text-align: center; scroll-margin-top: 8px; }
.action-art-frame figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 5px 3px; color: #c3c9ad; font-size: 10px; letter-spacing: .02em; text-align: left; }
.board-art-surface { position: relative; width: 100%; isolation: isolate; }
.board-art-surface img { display: block; width: 100%; height: auto; user-select: none; }
.board-hotspot { position: absolute; z-index: 1; display: block; min-width: 0; min-height: 0; padding: 0; border: 1px solid rgb(35 48 38 / 40%); border-radius: 4px; background: transparent; color: #fff; text-align: left; transition: background .12s, box-shadow .12s; }
.board-hotspot:disabled { opacity: 1; }
.board-hotspot.ready { border: 2px solid #4b9971; box-shadow: inset 0 0 0 1px rgb(232 255 231 / 28%); background: rgb(80 173 111 / 5%); }
.board-hotspot.ready:hover, .board-hotspot.ready:focus-visible { z-index: 3; border-color: #fff1b0; background: rgb(245 210 110 / 19%); box-shadow: inset 0 0 0 2px #7b6529, 0 0 8px rgb(247 225 143 / 48%); outline-offset: -1px; }
.board-hotspot.locked { border-color: rgb(54 55 48 / 46%); background: rgb(14 24 20 / 15%); }
.board-hotspot[aria-disabled="true"] { cursor: help; }
.board-hotspot.occupied { border: 2px solid #d1a13b; background: rgb(135 85 26 / 24%); box-shadow: inset 0 0 0 1px #fff0bb; }
.board-hotspot.empty-slot { border-style: dashed; }
.hotspot-label { position: absolute; top: 2px; left: 2px; max-width: calc(100% - 4px); overflow: hidden; border-radius: 3px; padding: 1px 4px; background: rgb(25 40 32 / 88%); color: #e8edda; font-size: clamp(8px, .68vw, 11px); font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.ready .hotspot-label { background: #286044; color: #f2ffe9; }
.occupied .hotspot-label { background: #65431d; color: #fff0b5; }
.or-hotspot .hotspot-label { max-width: calc(100% - 6px); font-size: clamp(8px, .65vw, 11px); }
.hotspot-occupant { position: absolute; bottom: 3px; left: 3px; max-width: calc(100% - 6px); overflow: hidden; border: 1px solid #e4bd69; border-radius: 4px; padding: 2px 4px; background: rgb(70 44 16 / 95%); color: #fff0c0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.board-action-detail { min-height: 48px; margin-top: 8px; border: 1px solid #445d4a; border-radius: 7px; padding: 8px 10px; background: #14271f; color: #d1d9c6; font-size: 11px; line-height: 1.5; }
.board-action-detail strong { color: #f1d48e; }
.action-help-title { display: block; color: #f1d48e; font-size: 12px; }
.action-help-status { display: inline-block; margin-top: 5px; border-radius: 4px; padding: 2px 5px; font-size: 10px; font-weight: 650; }
.action-help-status.available { background: #264e36; color: #d6f4ce; }
.action-help-status.unavailable { background: #4a3b2c; color: #eed8b1; }
.action-help-meta { display: block; margin-top: 5px; color: #c1cbb5; font-size: 10px; }
.action-help-effect { margin: 7px 0 0; color: #e0e3d3; font-size: 11px; line-height: 1.65; white-space: pre-line; }
.action-help-effect small { display: block; color: #b5c3a8; font-size: 10px; }
.action-hover-tooltip { position: fixed; z-index: 200; width: min(410px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: hidden; box-sizing: border-box; border: 1px solid #aa975f; border-radius: 9px; padding: 12px 14px; background: #13261ff5; box-shadow: 0 7px 28px #0009; pointer-events: none; text-align: left; }
.board-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 8px 1px 4px; color: #abbca5; font-size: 9px; }
.board-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.board-legend i { width: 10px; height: 10px; border: 1px solid; border-radius: 2px; }
.legend-ready { border-color: #65b285 !important; background: #286044; }
.legend-occupied { border-color: #ddb65a !important; background: #65431d; }
.legend-locked { border-color: #7b8377 !important; background: #29372c; }
.board-legend .grid-hint { margin-left: auto; }
.action-index-details { margin-top: 11px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.action-index-details summary { color: #c6cba9; font-size: 10px; cursor: pointer; }
.action-index-details .action-grid-scroll { margin-top: 8px; }
.grid-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 12px 1px 8px; }
.grid-toolbar h2 { font-size: 12px; }
.grid-toolbar p { margin: 3px 0 0; color: var(--muted-dim); font-size: 9px; line-height: 1.45; }
.grid-hint { color: #c0ad76; font-size: 9px; text-align: right; }
.action-grid-scroll { max-height: 370px; overflow: auto; border: 1px solid #354d42; border-radius: 8px; background: #101c19; scrollbar-color: #60795e #15231f; scrollbar-width: thin; }
.action-grid { display: grid; grid-template-columns: 25px repeat(5, minmax(82px, 1fr)); gap: 3px; min-width: 500px; padding: 6px; }
.grid-corner, .grid-col-label, .grid-row-label { display: grid; place-items: center; min-height: 28px; border: 1px solid #34483d; border-radius: 5px; background: #1c3028; color: #a9b99f; font-size: 9px; font-weight: 700; }
.grid-row-label { min-height: 36px; color: #849686; font-size: 8px; }
.action-cell { position: relative; display: grid; align-content: center; justify-items: start; gap: 3px; min-height: 36px; overflow: hidden; border: 1px solid #40594a; border-radius: 5px; background: linear-gradient(120deg, #263e32, #1b3029); padding: 4px 20px 4px 6px; color: #d9e0d0; text-align: left; transition: border-color .14s ease, background .14s ease, transform .14s ease; }
.action-cell:hover:not(:disabled) { z-index: 1; transform: translateY(-1px); border-color: #cfad5e; background: #354b37; }
.action-cell:disabled { opacity: .62; }
.action-cell .cell-title { width: 100%; overflow: hidden; color: #e6e6d8; font-size: 8px; font-weight: 680; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.action-cell .cell-meta { display: flex; align-items: center; gap: 5px; color: #9fb19f; font-size: 7px; line-height: 1.2; }
.action-cell .cell-workers { color: var(--gold-hi); white-space: nowrap; }
.action-cell .cell-status { position: absolute; top: 3px; right: 4px; color: #8daf91; font-size: 7px; }
.action-cell.manual { border-style: dashed; border-color: #8a6e45; background: linear-gradient(120deg, #3a3828, #2b3026); }
.action-cell.manual .cell-status { color: #e4c077; }
.action-cell.occupied { border-color: #bf9b50; background: #51442b; }
.action-cell.occupied .cell-status { color: var(--gold-hi); }
.action-cell.locked { background: #1a2621; color: #7f8e81; }
.action-cell[aria-disabled="true"] { cursor: help; opacity: .72; }
.action-cell[aria-disabled="true"]:hover { transform: none; border-color: #79765b; }
.action-cell.empty-cell { border: 1px solid #26382f; background: #15221d; opacity: .43; cursor: default; }
.action-cell.empty-cell .cell-title { color: #708175; }

.board-lower-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.home-panel, .inventory-panel, .occupation-panel { padding: 13px; }
.placement-board-wrap { position: relative; min-height: 202px; display: grid; place-items: center; padding: 9px; border: 1px solid #334d3d; border-radius: 8px; background: repeating-linear-gradient(135deg, #142620 0 10px, #172b24 10px 20px); }
.home-original-preview { margin: 0 0 9px; padding: 7px; border: 1px solid #3a543e; border-radius: 8px; background: #101e18; }
.home-original-preview img { display: block; width: 100%; max-height: 170px; object-fit: contain; }
.home-original-preview figcaption { color: #a2b495; font-size: 8px; text-align: center; }
.placement-grid { display: grid; grid-template-columns: repeat(9, minmax(20px, 1fr)); grid-auto-rows: minmax(20px, 1fr); gap: 3px; width: 100%; max-width: 570px; aspect-ratio: 9 / 5; }
.placement-cell { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; border: 1px dashed #57715b; border-radius: 4px; background: rgb(11 24 18 / 30%); color: #6f876f; font-size: 9px; }
.placement-cell.filled { border-style: solid; border-color: #7e8055; background: #4d5739; color: #f0d68e; }
.placement-cell img { display: block; width: 100%; height: 100%; object-fit: contain; }
.placement-cell .tile-name { position: absolute; right: 2px; bottom: 2px; left: 2px; overflow: hidden; color: #f4edcf; font-size: 6px; text-align: center; text-shadow: 0 1px 3px #000; text-overflow: ellipsis; white-space: nowrap; }
.placement-placeholder { position: absolute; max-width: 250px; margin: 0; padding: 8px 11px; border: 1px solid rgb(65 89 68 / 70%); border-radius: 7px; background: rgb(10 22 17 / 88%); color: #a7b49e; font-size: 9px; line-height: 1.5; text-align: center; }
.home-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; color: var(--muted); font-size: 9px; }
.home-summary span:last-child { margin-left: auto; color: var(--gold-hi); }
.inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.inventory-item { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; padding: 8px; border: 1px solid #395245; border-radius: 7px; background: #182d25; }
.inventory-item span { overflow: hidden; color: #b5c4ad; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-item strong { color: #eed79a; font-size: 13px; font-variant-numeric: tabular-nums; }
.inventory-footnote { margin-top: 9px; color: var(--muted-dim); font-size: 8px; line-height: 1.45; }

.public-player-storage-panel { padding: 13px; }
.public-player-storage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.public-storage-player { min-width: 0; border: 1px solid #395245; border-radius: 9px; background: linear-gradient(145deg, #1a3026, #14251e); padding: 10px; }
.public-storage-player.is-self { border-color: #9d844d; box-shadow: inset 0 0 0 1px rgb(198 164 91 / 16%); }
.public-storage-player-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.public-storage-player-head h3 { display: flex; align-items: center; min-width: 0; gap: 6px; margin: 0; overflow: hidden; color: #eee7ce; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.public-storage-you { border: 1px solid #9d844d; border-radius: 999px; padding: 2px 6px; color: #e5ca82; font-size: 8px; font-weight: 600; }
.public-storage-total { flex: 0 0 auto; color: #d5c18c; font-size: 9px; font-variant-numeric: tabular-nums; }
.public-storage-board-shelf { margin: 0 0 10px; border: 1px solid #3a5144; border-radius: 8px; background: rgb(10 22 17 / 36%); padding: 8px; }
.public-storage-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 7px; }
.public-storage-board-heading h4 { margin: 0; color: #e0d4ad; font-size: 10px; }
.public-storage-board-heading > span { color: var(--muted-dim); font-size: 8px; text-align: right; }
.public-storage-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); align-items: start; gap: 7px; }
.public-board-art { display: grid; align-content: start; min-width: 0; overflow: hidden; border: 1px solid #3b5446; border-radius: 6px; background: #101e18; padding: 4px; text-align: left; cursor: zoom-in; }
.public-board-art:hover { border-color: var(--gold-hi); }
.public-board-art img { display: block; width: 100%; height: 88px; border-radius: 3px; background: #162820; object-fit: contain; }
.public-board-art.is-home-board { grid-column: 1 / -1; }
.public-board-art.is-home-board > img, .public-home-board-image-wrap > img { height: auto; aspect-ratio: 3663 / 2392; }
.public-home-board-image-wrap { position: relative; display: block; width: 100%; }
.public-home-board-pieces { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.public-home-board-piece { position: absolute; display: block; }
.public-home-board-piece img { display: block; width: 100%; height: auto; }
.public-board-art[data-public-board-id] { cursor: pointer; }
.public-board-image-wrap { position: relative; display: block; width: 100%; }
.public-board-art .public-board-image-wrap > img { display: block; width: 100%; height: auto; object-fit: fill; }
.public-board-pieces { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.public-board-piece { position: absolute; display: block; }
.public-board-art .public-board-piece > img { display: block; width: 100%; height: 100%; min-height: 0; border-radius: 0; background: transparent; object-fit: fill; }
.public-board-art .public-board-piece.is-legacy > img { height: auto; }
.public-board-piece.is-draft { opacity: .78; filter: drop-shadow(0 0 1px #f3d67d); }
.public-board-placement-count { margin-top: 3px; color: #c7d6a6; font-size: 8px; line-height: 1.4; }
.public-board-art.is-locked { border-style: dashed; }
.public-board-art.is-locked > img { opacity: .7; }
.public-board-art.is-unlocked { border-color: #a78c51; }
.public-board-art.is-built { border-color: #6c8f63; }
.public-board-art-title { margin-top: 5px; overflow: hidden; color: #d8decf; font-size: 8px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; }
.public-board-art-caption { margin-top: 2px; color: #92a391; font-size: 7px; line-height: 1.3; }
.public-storage-kaupang { min-width: 0; border: 1px solid #344b3e; border-radius: 6px; background: #13231c; padding: 5px; }
.public-storage-kaupang-title { margin: 0 0 5px; color: #e4d4a6; font-size: 9px; line-height: 1.35; }
.public-storage-kaupang .public-board-art { width: 100%; }
.public-storage-building-shelf { margin-top: 6px; border-top: 1px solid rgb(117 143 118 / 18%); padding-top: 5px; }
.public-storage-building-heading { display: block; margin-bottom: 4px; color: #b3c0ac; font-size: 8px; }
.public-storage-building-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.public-board-art.is-kaupang-building { padding: 3px; }
.public-board-art.is-kaupang-building img { height: 48px; }
.public-storage-discovery-hint { grid-column: 1 / -1; margin: 0; border: 1px dashed #395245; border-radius: 6px; padding: 10px 8px; color: var(--muted-dim); font-size: 8px; line-height: 1.45; text-align: center; }
.public-storage-color { border-top: 1px solid rgb(117 143 118 / 18%); padding-top: 7px; margin-top: 7px; }
.public-storage-color-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.public-storage-color-head h4 { display: flex; align-items: center; gap: 6px; margin: 0; color: #bdc9b8; font-size: 9px; font-weight: 650; }
.public-storage-color-head h4::before { width: 7px; height: 7px; border-radius: 2px; background: #daa94d; content: ''; }
.public-storage-color-red .public-storage-color-head h4::before { background: #bf5b4f; }
.public-storage-color-green .public-storage-color-head h4::before { background: #639267; }
.public-storage-color-blue .public-storage-color-head h4::before { background: #5b82b1; }
.public-storage-color-head > span { color: var(--muted-dim); font-size: 8px; }
.public-storage-tile-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 7px; }
.public-storage-tile { position: relative; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; gap: 5px; width: max(60px, calc(var(--goods-width, 1) * var(--stock-cell) + 14px)); border: 1px solid #344c3e; border-radius: 6px; background: #11221b; padding: 6px; }
.stock-tile-art { display: block; flex: none; width: calc(var(--goods-width, 1) * var(--stock-cell)); height: calc(var(--goods-height, 1) * var(--stock-cell)); max-width: none; object-fit: fill; }
.public-storage-tile-name { max-width: 100%; color: #bdcbb8; font-size: 9px; text-align: center; overflow-wrap: anywhere; }
.public-storage-tile-count { min-width: 17px; border-radius: 999px; background: #415638; padding: 2px 4px; color: #f0dda3; font-size: 9px; line-height: 1.2; text-align: center; font-variant-numeric: tabular-nums; }
.public-storage-empty { margin: 0; border: 1px dashed #395245; border-radius: 6px; padding: 11px 7px; color: var(--muted-dim); font-size: 9px; text-align: center; }
.public-storage-footnote { margin: 9px 0 0; color: var(--muted-dim); font-size: 8px; line-height: 1.45; }

.occupation-panel .section-heading { margin-bottom: 8px; }
.occupation-hand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.occupation-card { position: relative; display: flex; min-height: 122px; flex-direction: column; align-items: stretch; overflow: hidden; border: 1px solid #827548; border-radius: 8px; background: #1b2a22; padding: 5px; text-align: left; }
.occupation-card img { width: 100%; height: 92px; object-fit: contain; border-radius: 4px; background: #121d18; }
.occupation-card .card-label { overflow: hidden; margin-top: 5px; color: #dfd5b4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.occupation-card .card-id { margin-top: 2px; color: #9ea994; font-size: 7px; }
.occupation-card:hover { border-color: var(--gold-hi); transform: translateY(-1px); }
.manual-note { display: flex; align-items: flex-start; gap: 7px; margin: 9px 0 0; color: #c9b88d; font-size: 9px; line-height: 1.45; }
.note-mark { display: grid; flex: 0 0 auto; place-items: center; width: 15px; height: 15px; border: 1px solid #b49356; border-radius: 50%; color: var(--gold-hi); font-size: 9px; font-weight: 800; }

.record-panel { min-height: 190px; }
.text-button { border: 0; background: transparent; color: #b6c3a6; font-size: 9px; }
.activity-feed { display: grid; gap: 8px; max-height: 310px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.activity-feed li:not(.empty-state) { display: grid; grid-template-columns: 39px 1fr; gap: 7px; align-items: start; padding: 7px 0; border-bottom: 1px solid rgb(117 143 118 / 17%); color: #c5cebb; font-size: 9px; line-height: 1.4; }
.activity-feed time { color: #809281; font-size: 8px; }
.action-summary-list { display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.summary-item { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 9px; }
.summary-item span { color: #d0d7c8; }
.summary-item em { color: #d6bd75; font-size: 8px; font-style: normal; text-align: right; }
.end-turn { width: 100%; margin-top: 10px; }
.limits-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.limits-list li { display: grid; gap: 3px; padding-left: 9px; border-left: 2px solid #718052; }
.limits-list b { color: #e3d49e; font-size: 9px; }
.limits-list span, .rules-panel p { color: #a8b8a6; font-size: 9px; line-height: 1.45; }
.prototype-dot { border-color: #8e764e; padding: 4px 6px; }
.rules-panel p { margin: 0 0 9px; }
.reference-link { display: inline-flex; align-items: center; gap: 5px; color: #d5c180; font-size: 9px; text-decoration: none; }
.reference-link:hover { color: var(--gold-hi); text-decoration: underline; }

.toast { position: fixed; z-index: 20; bottom: 18px; left: 50%; max-width: min(480px, calc(100vw - 30px)); transform: translate(-50%, 14px); opacity: 0; pointer-events: none; border: 1px solid #9a8151; border-radius: 8px; background: #e8d19a; box-shadow: 0 10px 30px rgb(0 0 0 / 45%); color: #263027; padding: 9px 14px; font-size: 11px; text-align: center; transition: .18s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
dialog { width: min(720px, calc(100vw - 28px)); max-height: min(88vh, 900px); overflow: auto; border: 1px solid #718061; border-radius: 13px; background: #172c25; box-shadow: 0 22px 70px rgb(0 0 0 / 58%); color: var(--text); padding: 15px; }
dialog::backdrop { background: rgb(4 10 9 / 78%); backdrop-filter: blur(3px); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 3px 0 0; font-size: 16px; }
.close-button { border: 0; background: transparent; color: #c0cdb8; font-size: 25px; line-height: 1; }
.close-button:hover { color: var(--gold-hi); }
.modal-intro { max-width: 620px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.or-choice-modal { width: min(660px, calc(100vw - 28px)); }
.or-action-options { display: grid; gap: 12px; margin: 15px 0; }
.or-action-option { display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: center; gap: 19px; overflow: hidden; border: 1px solid #6f8967; border-radius: 9px; padding: 12px; background: #20392c; text-align: left; transition: border-color .15s, background .15s; }
.or-action-option:hover:not(:disabled) { border-color: var(--gold-hi); background: #304734; }
.or-option-art { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 6px; background: #b89867; pointer-events: none; }
.or-option-art img { position: absolute; display: block; max-width: none; height: auto; }
.or-option-text { display: grid; gap: 7px; }
.or-option-half { color: #b5c8a6; font-size: 10px; }
.or-option-text strong { color: #f3e4b8; font-size: 18px; }
.or-option-cost { color: #c4cdb3; font-size: 11px; }
.or-option-effect { color: #d5ddc7; font-size: 11px; line-height: 1.65; }
.or-option-status { color: var(--gold-hi); font-size: 11px; }
.or-choice-modal .modal-footer { align-items: center; }
.or-choice-modal .modal-footer > span { max-width: 75%; line-height: 1.5; }
.action-plan-modal { width: min(800px, calc(100vw - 28px)); }
.action-plan-choices { display: grid; gap: 8px; margin: 13px 0; }
.action-plan-card { border: 1px solid #4e6854; border-radius: 8px; overflow: hidden; background: #1b3027; }
.action-plan-card:has(.action-plan-choice.selected) { border-color: var(--gold-hi); box-shadow: 0 0 0 1px rgb(241 212 142 / 20%); }
.action-plan-choice { display: grid; width: 100%; gap: 5px; border: 0; background: transparent; padding: 10px; color: inherit; text-align: left; }
.action-plan-choice:hover:not(:disabled), .action-plan-choice.selected { background: #2b4030; }
.action-plan-choice:disabled { opacity: .55; }
.action-plan-choice-title { color: #f0dfad; font-size: 12px; }
.action-plan-choice-description, .action-plan-choice-cost, .action-plan-choice-gain { color: #b7c4ae; font-size: 10px; line-height: 1.45; }
.action-plan-choice-cost { color: #e0c886; }
.action-plan-choice-gain { color: #a9d0a1; }
.action-plan-disabled-reason { display: block; color: #e7a59b; font-size: .78rem; line-height: 1.5; }
.action-plan-suboptions { display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 0 10px 10px; }
.action-plan-option-label { display: inline-flex; align-items: center; gap: 5px; color: #c4d0bc; font-size: 10px; cursor: pointer; }
.action-plan-option-label input { accent-color: #c9b36f; }
.action-plan-option-label small { color: #8fa28d; }
.action-plan-selection { margin: 10px 0; color: #e4d5aa; font-size: 10px; }
.action-plan-selection p { margin: 5px 0 0; }
.action-plan-quantity { display: flex; align-items: center; gap: 10px; margin: 10px 0; color: #d8d2b8; font-size: 10px; }
.action-plan-quantity input { width: 88px; border: 1px solid #506a53; border-radius: 6px; background: #13251e; padding: 7px; color: #f1e2b9; }
.action-plan-totals { display: grid; gap: 4px; margin: 12px 0; color: #c7d1bf; font-size: 10px; }
.action-plan-totals span:first-child { color: #e1ca8f; }
.action-plan-totals span:last-child { color: #aed0a7; }
.action-plan-modal .modal-footer { align-items: center; flex-wrap: wrap; }
.action-plan-modal .modal-footer [role="status"] { flex: 1 1 100%; line-height: 1.4; }
.action-plan-modal.has-building-plan { width: min(1080px, calc(100vw - 24px)); }
.has-building-plan .action-plan-choices { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; gap: 12px; }
.action-plan-building { min-width: 0; }
.plan-building-heading { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 5px 10px; padding: 11px 11px 0; }
.plan-building-heading strong { color: #f0dfad; font-size: 14px; }
.plan-building-heading span, .plan-building-source { color: #bcc9b5; font-size: 11px; }
.plan-building-source { margin: 5px 11px 9px; }
.plan-building-art-scroll { max-width: 100%; margin: 0 10px 10px; overflow: auto; }
.plan-building-art { display: block; margin: 0 auto; padding: 0; border: 0; border-radius: 3px; background: none; width: calc(var(--building-columns) * var(--game-cell)); height: calc(var(--building-rows) * var(--game-cell)); min-height: 0; }
.plan-building-art img { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.plan-building-art:disabled { opacity: .55; }
.plan-building-payment-choice { border-top: 1px solid #4e6854; }
.plan-building-payment-choice.selected { box-shadow: inset 4px 0 0 #f1d48e; }
.plan-building-payment { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; color: #ead29e; }
.plan-building-pay-label { font-size: 12px; }
.plan-building-resource { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.plan-building-resource > .mv-token { flex: none; width: var(--game-cell); height: var(--game-cell); transform: none; }
.plan-building-resource > .mv-token[data-resource-id="wood"], .plan-building-resource > .mv-token[data-resource-id="stone"] { height: calc(var(--game-cell) * 2); }
.plan-building-resource .mv-token-cutout > img { object-fit: fill; }
.extra-worker-option { display: flex; gap: 9px; align-items: start; margin: 12px 0; padding: 11px; border: 1px solid #697853; border-radius: 8px; color: #e5dcae; background: #293d2a; font-size: 12px; line-height: 1.6; }
.extra-worker-option input { flex: 0 0 auto; accent-color: #d9bc78; margin-top: 4px; }
.action-plan-group { margin: 7px 10px 12px; padding: 8px; border: 1px solid #455e4b; border-radius: 7px; min-width: 0; }
.action-plan-group legend { color: #e0d4ad; font-size: 12px; padding: 0 5px; }
.action-plan-group-counter { display: block; margin: 0 0 8px; color: #a7b69e; font-size: 11px; }
.action-plan-group .action-plan-suboptions { padding: 0; gap: 7px; }
.action-plan-option-label { border: 1px solid #455d49; border-radius: 5px; padding: 7px; line-height: 1.5; font-size: 12px; }
.action-plan-option-label:has(input:checked) { background: #3b4c31; border-color: #ddc98b; color: #f4e9c9; }
.action-plan-option-label:has(input:disabled) { opacity: .5; cursor: default; }
.action-plan-option-label.has-image { display: grid; grid-template-columns: 18px 58px minmax(0,1fr); max-width: 270px; }
.action-plan-option-label img { width: 58px; height: 52px; object-fit: contain; }
.action-plan-choice-title { font-size: 14px; }
.action-plan-choice-description, .action-plan-choice-cost, .action-plan-choice-gain, .action-plan-selection, .action-plan-totals { font-size: 12px; }
.action-plan-dice { margin: 10px; border: 1px solid #9a7349; border-radius: 8px; padding: 12px; background: #392c1d; }
.action-plan-dice.dice-blue { background: #192f3a; border-color: #608a9e; }
.action-plan-dice > strong { display: block; color: #f2ddb3; font-size: 13px; }
.dice-history { display: block; margin: 9px 0; color: #fff4d4; font-size: 24px; font-variant-numeric: tabular-nums; }
.dice-result { color: #e7d5a9; font-size: 13px; }
.dice-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ship-equipment { margin: 12px 0 0; padding: 12px; border: 1px solid #58705a; border-radius: 8px; }
.ship-equipment h3 { margin: 0 0 6px; font-size: 15px; color: #e0d3a9; }
.ship-equipment-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid #435744; font-size: 12px; }
.occupation-play-panel { border: 1px solid #c7aa64; border-radius: 8px; padding: 12px; margin-top: 12px; background: #34412a; }
.occupation-play-panel h3 { margin: 0; color: #f0dca8; font-size: 15px; }
.occupation-play-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.occupation-play-card { display: grid; gap: 7px; width: 142px; border: 1px solid #84956d; border-radius: 7px; padding: 7px; background: #1c3024; color: #e5ddb9; font-size: 11px; text-align: left; }
.occupation-play-card img { width: 100%; height: 150px; object-fit: contain; }
.public-storage-fleet, .public-storage-rewards { margin: 10px 0; padding: 10px; border: 1px solid #3e5948; border-radius: 7px; }
.public-storage-fleet h4, .public-storage-rewards h4 { margin: 0 0 8px; color: #d8d2ad; font-size: 12px; }
.public-fleet-ship { display: inline-block; padding: 6px; margin: 3px; border: 1px solid #4c6751; border-radius: 5px; color: #c9d7bb; font-size: 11px; }
.public-fleet-ship.is-emigrated { color: #dfc98f; border-color: #83754b; }
.public-reward-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.public-reward-grid .is-public-reward { width: 124px; }
.public-reward-grid .is-public-reward img { width: 100%; height: 100px; object-fit: contain; }
.kaupang-candidates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; min-height: 155px; margin: 13px 0; }
.kaupang-card { position: relative; border: 1px solid #566c4d; border-radius: 8px; background: #1e3429; padding: 6px; text-align: left; }
.kaupang-card.selected { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgb(241 212 142 / 20%); }
.kaupang-card img { display: block; width: 100%; height: 132px; object-fit: contain; border-radius: 4px; background: #101a15; }
.kaupang-card span { display: block; margin-top: 6px; color: #d8d9c7; font-size: 8px; }
.modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 11px; color: var(--muted); font-size: 10px; }
.modal-footer .primary-button { min-width: 120px; }
.card-detail-content { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 16px; padding: 14px 0; }
.card-detail-content img { width: 100%; max-height: 360px; object-fit: contain; border-radius: 7px; background: #101a15; }
.card-detail-content p { color: var(--muted); font-size: 10px; line-height: 1.55; }
.board-modal { width: min(1280px, calc(100vw - 24px)); }
.board-zoom-grid { display: grid; grid-template-columns: minmax(720px, 1fr); gap: 12px; margin-top: 12px; }
.board-zoom-grid .hotspot-label { font-size: 12px; }
.board-modal-controls { position: sticky; top: -15px; z-index: 5; padding: 10px 0; background: #172c25; }
.help-list { display: grid; gap: 9px; padding-left: 20px; color: #c8d2c2; font-size: 10px; line-height: 1.55; }
.prototype-disclaimer { margin: 12px 0 0; border-left: 2px solid #9b8050; padding-left: 9px; color: #d1bd8e; font-size: 9px; line-height: 1.5; }

@media (min-width: 1600px) {
  .app-shell { padding: 16px 24px 24px; }
  .action-column, .player-column, .board-lower-grid { gap: 14px; }
}

@media (max-width: 760px) {
  .app-shell { padding: 11px; }
  .topbar { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 11px; }
  .topbar-status { width: 100%; justify-content: flex-start; gap: 9px; }
  .brand-title { font-size: 16px; }
  .board-heading { align-items: flex-start; flex-direction: column; }
  .board-tools { width: 100%; justify-content: space-between; }
  .board-lower-grid { grid-template-columns: 1fr; }
  .action-board-scroll { max-height: 62vh; }
  .hotspot-label { font-size: 9px; }
  .occupation-hand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .occupation-hand .empty-state { grid-column: 1 / -1; }
  .grid-toolbar { align-items: flex-start; flex-direction: column; }
  .grid-hint { text-align: left; }
  .lobby-screen { margin-top: 20px; }
  .lobby-room-options { grid-template-columns: 1fr; gap: 15px; }
  .lobby-room-card { padding: 22px; }
  .lobby-resume { align-items: flex-start; flex-direction: column; padding: 18px 22px; gap: 14px; }
  .lobby-resume button { width: 100%; }
}

@media (max-width: 480px) {
  .topbar-status { font-size: 10px; }
  .prototype-badge { order: 4; }
  .player-row { grid-template-columns: 29px minmax(0, 1fr) auto; }
  .action-panel, .home-panel, .inventory-panel, .public-player-storage-panel, .occupation-panel { padding: 10px; }
  .action-grid-scroll { max-height: 320px; }
  .action-grid { grid-template-columns: 22px repeat(5, minmax(72px, 1fr)); min-width: 420px; }
  .placement-board-wrap { min-height: 160px; padding: 6px; }
  .placement-grid { gap: 2px; }
  .home-summary { gap: 6px; font-size: 8px; }
  .kaupang-candidates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kaupang-card img { height: 110px; }
  .card-detail-content { grid-template-columns: 1fr; }
  .card-detail-content img { max-height: 260px; }
  .board-zoom-grid { grid-template-columns: 1fr; }
  .or-action-option { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .or-option-text strong { font-size: 15px; }
  .public-supply-ships .public-supply-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .public-supply-buildings .public-supply-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-player-storage { grid-template-columns: 1fr; }
  .public-storage-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-board-art.is-home-board > img, .public-home-board-image-wrap > img { height: auto; }
}

/* Viking longhouse theme: weathered timber, iron, sea-blue and amber.  The
   artwork remains the source of truth for boards and tiles; these surfaces
   give the surrounding interface the feel of a shared Nordic table. */
:root {
  --bg: #0b121b;
  --bg-glow: #203746;
  --panel: #202d35;
  --panel-hi: #2c3c43;
  --panel-soft: #17232c;
  --line: #66563f;
  --line-soft: #3d4b50;
  --text: #f1ead9;
  --muted: #b5c0bd;
  --muted-dim: #84989b;
  --gold: #c8903f;
  --gold-hi: #f0c56c;
  --teal: #7eb2bb;
  --red: #c15f4c;
  --blue: #8bb9cc;
  --shadow: 0 16px 32px rgb(0 0 0 / 34%);
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

body {
  background:
    radial-gradient(ellipse at 50% -20%, rgb(85 139 157 / 22%), transparent 42rem),
    radial-gradient(ellipse at 94% 76%, rgb(151 68 43 / 15%), transparent 34rem),
    repeating-linear-gradient(102deg, rgb(255 255 255 / 1.7%) 0 1px, transparent 1px 13px),
    linear-gradient(155deg, #1a2c38 0%, var(--bg) 42rem, #090e15 100%);
  color: var(--text);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  content: "";
  background-image:
    linear-gradient(45deg, transparent 46%, rgb(225 184 97 / 16%) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgb(225 184 97 / 13%) 47% 53%, transparent 54%);
  background-size: 82px 82px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.app-shell { position: relative; }
.topbar { border-bottom: 1px solid rgb(206 162 82 / 26%); padding-bottom: 10px; }
.brand-mark, .lobby-emblem {
  border-color: #b1874d;
  border-radius: 7px 7px 14px 14px;
  background: linear-gradient(145deg, #3e6270, #182832 68%, #432d22);
  color: var(--gold-hi);
  box-shadow: 0 8px 20px rgb(0 0 0 / 35%), inset 0 0 0 2px rgb(240 197 108 / 13%);
  clip-path: polygon(50% 0, 94% 14%, 86% 76%, 50% 100%, 14% 76%, 6% 14%);
}
.brand-title, .lobby-intro h1, .board-heading h1, .section-heading h2, .lobby-card-heading h2, .modal-head h2 {
  font-family: Georgia, "Noto Serif SC", serif;
  letter-spacing: .045em;
}
.eyebrow { color: #d1a65c; letter-spacing: .18em; }
.brand-title span { color: #84b8c1; }
.prototype-badge, .subtle-badge, .count-badge, .prototype-dot {
  border-color: #9a743b;
  background: rgb(179 118 43 / 16%);
  color: #f1c978;
}

.panel {
  border-color: rgb(176 139 80 / 42%);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgb(50 64 70 / 95%), rgb(25 36 44 / 98%)),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 7px);
  box-shadow: var(--shadow), inset 0 1px 0 rgb(255 255 255 / 6%);
}
.panel::before { display: block; height: 2px; background: linear-gradient(90deg, transparent, rgb(211 161 74 / 65%), transparent); content: ""; }
.panel > .section-heading:first-child, .action-panel > .board-heading:first-child { margin-top: 3px; }
.action-panel { background: linear-gradient(145deg, #263b45, #17252d 75%); }
.action-board-scroll, .action-grid-scroll {
  border-color: #76603e;
  background: #101923;
  scrollbar-color: #a8783e #192934;
}
.board-navigation button, .secondary-button, .copy-button {
  border-color: #5f7f89;
  background: linear-gradient(145deg, #2b4651, #1b2d38);
  color: #dbe7e3;
}
.board-navigation button:hover, .secondary-button:hover:not(:disabled), .copy-button:hover {
  border-color: var(--gold-hi);
  background: linear-gradient(145deg, #3c6170, #243c48);
}
.primary-button {
  border-color: #e1b45e;
  background: linear-gradient(145deg, #e2b15a, #9c6330);
  color: #1c2021;
  box-shadow: 0 5px 14px rgb(126 70 28 / 32%), inset 0 1px 0 rgb(255 235 163 / 48%);
}
.primary-button:hover:not(:disabled) { filter: brightness(1.12) saturate(1.05); }
.room-form input, .room-form select { border-color: #526875; background: #111e27; }
.room-form input:focus, .room-form select:focus { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgb(240 197 108 / 15%); }
.player-row, .public-supply-item, .inventory-item, .action-cell { background: rgb(8 18 26 / 48%); }
.player-row.current { border-color: rgb(240 197 108 / 65%); background: rgb(143 91 37 / 20%); }
.player-avatar { background: linear-gradient(145deg, #47717c, #273b4b); color: #f6d18a; box-shadow: inset 0 0 0 1px rgb(240 197 108 / 32%); }
.worker-count, .public-supply-value, .action-help-title { color: var(--gold-hi); }
.meeple { background: #d8a84e; box-shadow: 0 0 0 1px rgb(255 240 178 / 35%), 0 3px 6px rgb(0 0 0 / 35%); }
.meeple.spent { background: #63777b; }
.worker-row { gap: 3px; padding: 4px 0; }
.worker-model { display: block; width: 30px; height: 40px; flex: 0 0 auto; pointer-events: none; }
.worker-preview-button { margin-top: 5px; padding: 3px 0; color: #d8be86; font-size: 11px; }
.hotspot-workers { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; width: calc(100% - 8px); max-width: 144px; pointer-events: none; }
.hotspot-workers[hidden] { display: none; }
.hotspot-workers .worker-model { width: 34px; height: auto; min-width: 0; flex: 0 1 34px; }
.worker-model-modal { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); color: #e8ddc7; background: linear-gradient(150deg, #253743, #15252c); border-color: #a98c55; }
.worker-model-modal .modal-head { margin-bottom: 8px; }
#workerModelCanvas { display: block; width: auto; max-width: 100%; height: min(55vh, 450px); aspect-ratio: 5 / 6; margin: 0 auto; background: radial-gradient(ellipse at 50% 80%, #3e535b, #182930 65%); border: 1px solid #4e6467; border-radius: 9px; cursor: grab; touch-action: none; }
#workerModelCanvas:active { cursor: grabbing; }
#workerModelCanvas:focus-visible { outline: 2px solid #f2d499; outline-offset: 2px; }
.worker-model-controls { display: flex; justify-content: center; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 15px; }
.worker-color-choice { width: 30px; height: 30px; min-height: 30px; padding: 0; border: 2px solid #718283; border-radius: 50%; background: var(--worker-color); }
.worker-color-choice[aria-pressed="true"] { outline: 2px solid #e8c378; outline-offset: 3px; }
#workerModelStatus { text-align: center; margin-bottom: 0; }
.board-hotspot.ready { border-color: #73c0a7; background: rgb(73 170 147 / 11%); }
.board-hotspot.ready:hover, .board-hotspot.ready:focus-visible { border-color: #ffe09a; background: rgb(238 185 76 / 22%); box-shadow: inset 0 0 0 2px #78562c, 0 0 13px rgb(238 185 76 / 50%); }
.board-hotspot.occupied { border-color: #efbd58; background: rgb(157 74 37 / 30%); }
.hotspot-label { background: rgb(11 25 35 / 90%); color: #e9edf0; }
.ready .hotspot-label { background: #28645f; color: #efffe9; }
.occupied .hotspot-label { background: #713b27; color: #ffedbd; }
.board-action-detail { border-color: #5e7780; background: #132431; }
.action-help-status.available { background: #21564e; color: #d8f5e9; }
.action-help-status.unavailable { background: #5c3a2e; color: #f5d8b4; }
.action-hover-tooltip { border-color: #c49550; background: #132431f5; box-shadow: 0 10px 34px #000b, inset 0 1px 0 rgb(255 228 158 / 14%); }

dialog {
  border-color: #ad8145;
  border-radius: 8px;
  background: linear-gradient(145deg, #263d48, #17252f 75%);
  box-shadow: 0 25px 80px rgb(0 0 0 / 72%), inset 0 1px 0 rgb(255 255 255 / 7%);
}
dialog::backdrop { background: rgb(3 9 15 / 82%); }
.modal-head { border-bottom-color: #6b5a3d; }
.modal-footer { border-top-color: #6b5a3d; }
.toast { border-color: #e1b45e; background: #e2b15a; color: #18232a; }
.action-plan-dice { border-color: #aa7840; background: #3a2a22; }
.action-plan-dice.dice-blue { border-color: #6e9caf; background: #193541; }
.action-plan-group, .public-storage-fleet, .public-storage-rewards { border-color: #5b7180; background: rgb(11 24 33 / 30%); }
.occupation-play-panel { border-color: #bb8b49; background: #304338; }
.kaupang-card, .occupation-card, .occupation-play-card { border-color: #6f6049; background: #1b303b; }
.kaupang-card.selected { border-color: var(--gold-hi); box-shadow: 0 0 0 2px rgb(240 197 108 / 26%); }
.tile-gallery-entrance { border-color: #786240; background: linear-gradient(145deg, #2c4146, #1b2a32); }
.tile-gallery-entrance:hover { border-color: var(--gold-hi); background: linear-gradient(145deg, #3b5960, #24353d); }
.manual-note, .prototype-disclaimer { border-color: #b17d3e; color: #dfc28c; }

.home-board-ships, .public-board-ships { position: absolute; inset: 0; pointer-events: none; }
.home-ship-slot { position: absolute; display: grid; place-items: center; box-sizing: border-box; border: 1px solid #d6eff169; border-radius: 8%; pointer-events: auto; overflow: hidden; }
.home-ship-slot.is-occupied { border-color: #d5bd73; box-shadow: 0 1px 3px #112e39a8; background: #91c3d3; }
.home-ship-slot.is-empty { background: #183b4b1c; }
.home-ship-slot-empty { color: #e3f0ec; font-size: clamp(7px, .8vw, 12px); text-shadow: 0 1px 3px #123; }
.home-ship-slot img.home-ship-art { display: block; width: 100%; height: 100%; object-fit: fill; border: 0; border-radius: 0; background: transparent; pointer-events: none; }
.home-ship-ore { position: absolute; right: 2%; bottom: 3%; padding: 1px 4px; border-radius: 3px; background: #172934ed; color: #ffe2a4; font-size: clamp(7px, .85vw, 12px); }
.public-board-ships .home-ship-slot { pointer-events: none; }
.public-board-ships .home-ship-slot-empty { font-size: 6px; }
.public-board-ships .home-ship-ore { font-size: 6px; padding: 0 2px; }
.ship-berth-summary { color: #dfc68b; font-size: 12px; line-height: 1.7; margin: 6px 0; }
#shipMarketOptions > .ship-berth-summary, #shipMarketOptions > .panel-note { grid-column: 1 / -1; }
.ship-purchase-choice { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid #61736d; border-radius: 7px; background: #182c31; }
.ship-purchase-choice > img { display: block; width: 92px; height: 55px; object-fit: contain; }
.ship-purchase-copy { display: grid; gap: 4px; }
.ship-purchase-copy strong { color: #f0dfad; }
.ship-market-status { margin: 0 0 4px; }

.lobby-test-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 24px 28px; border-color: #b78c4c; background: linear-gradient(120deg, #293d43, #263630); }
.texture-collection-link { text-decoration: none; white-space: nowrap; }
.texture-library-entrance { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: #f0d7a2; text-decoration: none; border-color: #806944; }
.texture-library-entrance > span:first-child { display: grid; gap: 5px; }
.texture-library-entrance strong { font-size: 14px; }
.texture-library-entrance small { color: #b8c9cb; font-size: 11px; }
.texture-library-entrance:hover { border-color: #edce8d; background: #293d43; }
.mountain-panel { padding: 13px; }
.action-plan-modal.has-mountain-plan { width: min(1000px, calc(100vw - 28px)); }
.has-mountain-plan .action-plan-card { padding-top: 8px; }
.has-mountain-plan [hidden] { display: none !important; }
.mountain-plan-hint, .mountain-legend { margin: 0 0 12px; font-size: 12px; color: #c2c7b2; }
.mountain-legend { margin-top: 14px; margin-bottom: 0; }
.mountain-choice-strip + .mountain-choice-strip { margin-top: 16px; }
.mountain-choice-heading { display: flex; justify-content: space-between; margin-bottom: 6px; gap: 8px; font-size: 12px; color: #e1d2aa; }
.mountain-choice-count { color: #dbbd71; }
.mountain-material-option { width: 80px; height: 68px; justify-content: center; padding: 8px !important; }
.mountain-material-option > .mv-token { width: 54px; height: 50px; }
.mountain-material-option > input { flex-shrink: 0; }
.mountain-weapon-bonus { display: flex; align-items: center; gap: 10px; padding: 2px 16px 8px; font-size: 15px; color: #e1d2aa; }
.mountain-weapon-bonus > .mv-token { width: 28px; height: 42px; }
.mountain-weapon-bonus > small { font-size: 12px; color: #bbc4ba; }
.mountain-material-option .mv-token > img, .mountain-weapon-bonus .mv-token > img { width: 100%; height: 100%; }
@media (max-width: 600px) {
  .has-mountain-plan .mountain-plan-group { margin-inline: 2px; padding: 6px; }
  .mountain-plan-group .mv-strip { min-width: 0; }
  .mountain-choice-heading { font-size: 11px; }
}
.mountain-list { display: grid; gap: 10px; }
.mountain-strip { display: block; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #e5d5af; text-align: left; }
.mountain-strip-heading { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 10px; }
.mountain-strip-heading > span:last-child { color: #a6babd; }
.mountain-strip-art { position: relative; overflow: hidden; border-radius: 4px; isolation: isolate; }
.mountain-strip-art img { display: block; width: 100%; height: auto; }
.mountain-strip:hover .mountain-strip-art { outline: 1px solid #d7b668; }
.mountain-strip:focus-visible { outline: 2px solid #edce8d; outline-offset: 4px; }
.mountain-cell { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.mountain-cell.is-used { background: #07171dd9; }
.mountain-cell.is-used::after { content: '×'; position: absolute; inset: 0; display: grid; place-items: center; color: #849092; font-size: clamp(10px, 1.5vw, 22px); }
.mountain-cell.is-next { box-shadow: inset 0 0 0 2px #f0ce79; border-radius: 3px; }
.mountain-deck-count { margin: 10px 0 0; text-align: right; font-size: 10px; color: #9fb4b9; }
.mountain-modal { width: min(1000px, calc(100vw - 28px)); }
.mountain-cell-labels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.mountain-cell-labels > div { display: grid; align-content: start; gap: 5px; border: 1px solid #4a6269; border-radius: 5px; padding: 9px 6px; color: #e3dfce; font-size: 12px; text-align: center; }
.mountain-cell-labels small { color: #b6c2bf; font-size: 10px; }
.mountain-cell-labels .is-used { opacity: .45; }
.mountain-cell-labels .is-used > span { text-decoration: line-through; }
.mountain-cell-labels .is-next { border-color: #f0ce79; }
@media (max-width: 600px) {
  .mountain-cell-labels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lobby-test-card h2 { margin: 6px 0 10px; color: #f0d7a2; font-size: 21px; }
.lobby-test-card p { color: #c2ccca; font-size: 13px; line-height: 1.7; margin: 0; }
.lobby-test-card > button { min-width: 200px; min-height: 52px; justify-content: space-between; }
.test-control-panel { border-color: #ad8246; margin-bottom: 14px; }
.test-seat-buttons { display: flex; gap: 10px; margin: 12px 0; }
.test-seat-button { flex: 1; display: grid; gap: 5px; text-align: left; padding: 12px 16px; border: 1px solid #607681; border-radius: 6px; color: #dfdfd2; background: #213641; cursor: pointer; }
.test-seat-button span { font-size: 11px; }
.test-seat-button.is-active { background: #55472b; border-color: #dbb266; color: #ffe5a8; opacity: 1; }
.test-control-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.test-control-options label { display: flex; align-items: center; gap: 6px; color: #c7d1ca; font-size: 12px; }
.test-control-options input { accent-color: #d4aa62; }
.test-control-panel .panel-note { margin-top: 10px; }
/* The game table has two working columns and a narrow floating reference dock. */
body[data-screen="game"] .app-shell { padding-left: 76px; }
body[data-screen="game"] .topbar .room-id-inline,
body[data-screen="game"] .topbar .texture-collection-link { display: none; }
.reference-dock { position: fixed; left: max(0px, calc((100vw - 1920px) / 2)); top: 132px; z-index: 60; display: flex; flex-direction: column; gap: 9px; width: 62px; max-height: calc(100dvh - 150px); overflow-y: auto; scrollbar-width: none; padding: 3px 5px 10px 0; }
.reference-tag { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 67px; gap: 5px; width: 57px; min-height: 67px; padding: 7px 3px; border: 1px solid #bba879; border-left: 0; border-radius: 0 11px 11px 0; background: linear-gradient(110deg, #d0c29f, #f0e5c7); box-shadow: 2px 4px 9px #0006; color: #433a2b; text-decoration: none; transition: transform .12s, background .12s; }
.reference-tag svg { display: block; width: 30px; height: 30px; flex: 0 0 auto; }
.reference-tag > span { font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.reference-tag:hover, .reference-tag:focus-visible { transform: translateX(3px); background: #fff1cb; outline-offset: -3px; }
.game-status-bar { padding: 13px; }
.game-status-bar .room-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 0 0 10px; border-bottom: 1px solid #63727855; }
.game-status-bar .room-code-row { display: flex; gap: 7px; padding: 0; margin: 0 auto 0 0; border: 0; background: transparent; font-size: 11px; }
.game-status-bar .room-code-row strong { font-size: 12px; }
.game-status-bar .copy-button { min-height: 26px; }
.game-status-bar .start-game-button { width: auto; margin: 0 0 0 auto; }
.game-status-bar #roomWaitingNote { flex-basis: 100%; margin: 2px 0 0; }
.game-status-bar .players-panel { padding: 0; }
.game-turn-line { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 11px 0; }
.game-status-bar .turn-owner { display: grid; gap: 5px; min-width: 0; text-align: left; }
.game-status-bar .turn-owner > span { font-size: 10px; color: #abb8b9; }
#currentTurnLabel { color: #f2d18a; font-size: 16px; overflow-wrap: anywhere; }
.game-status-bar .round-phase { margin: 0; padding: 0; border: 0; grid-template-columns: auto auto; gap: 16px; }
.game-status-bar .round-phase strong { font-size: 12px; }
.game-status-bar .players-list { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 6px; }
.game-status-bar .player-row { padding: 5px; gap: 6px; }
.game-status-bar .player-row.current { border-color: #627b8070; background: #122832; }
.game-status-bar .player-row.is-turn { border-color: #cfad62; background: #4b4125; }
.game-status-bar .player-row small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.game-status-bar .phase-track { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); margin-top: 9px; }
.game-status-bar .phase-step { padding: 4px 2px; line-height: 1.45; }
.game-status-bar .phase-controls { display: flex; flex-wrap: wrap; align-items: center; margin: 0; }
.game-status-bar .phase-controls:has(> :not([hidden])) { margin-top: 9px; }
.action-column .board-heading { flex-direction: row; align-items: center; margin-bottom: 10px; }
.action-column .end-turn { width: auto; margin: 0; }
.action-column .action-art-grid { grid-template-columns: minmax(560px, 1fr); }
.action-column .action-summary-list { max-height: 150px; overflow: auto; }
.player-column .home-panel > .section-heading { flex-wrap: wrap; }
.player-column .home-panel > .section-heading h2 { font-size: 15px; }
.player-column .inventory-panel .inventory-workers { padding: 0 0 10px; margin: 0 0 12px; border-bottom: 1px solid #82734e66; }
.inventory-workers .section-heading { justify-content: flex-start; gap: 12px; margin-bottom: 3px; }
.inventory-workers .section-heading h2 { font-size: 12px; color: #cfcdba; }
.inventory-workers .worker-count { font-size: 17px; }
.player-column .inventory-art-shelf { flex-wrap: wrap; }
.player-column .inventory-bucket { max-width: 100%; }
.mountain-supply-modal { width: min(960px, calc(100vw - 28px)); }
.mountain-supply-modal .mountain-list { gap: 18px; }
.mountain-supply-modal .mountain-strip-heading { font-size: 12px; }
.action-column .test-control-panel { padding: 11px; }
.action-column .test-control-panel .section-heading { flex-wrap: wrap; margin-bottom: 9px; }
.action-column .test-seat-button { padding: 8px 10px; gap: 3px; }
.action-column .test-control-options { margin-top: 8px; }
.action-column .test-control-options label { font-size: 11px; }
@media (max-width: 980px) {
  .table-layout { grid-template-columns: minmax(0, 1fr); }
  .action-column { display: contents; }
  .game-status-bar, .action-column > .test-control-panel, .action-column > .action-panel { order: 0; }
  .player-column { order: 1; }
  .action-column > .action-summary-panel, .action-column > .public-supply-panel, .action-column > .record-panel { order: 2; }
}
@media (max-width: 600px) {
  body[data-screen="game"] .app-shell { padding-left: 55px; padding-right: 9px; }
  .reference-dock { width: 47px; top: 118px; gap: 7px; padding-right: 2px; }
  .reference-tag { width: 45px; min-height: 61px; flex-basis: 61px; border-radius: 0 9px 9px 0; }
  .reference-tag svg { width: 25px; height: 25px; }
  .reference-tag > span { font-size: 9px; }
  .game-status-bar { padding: 10px; }
  .game-status-bar .round-phase { gap: 12px; }
  .game-status-bar .players-list { grid-template-columns: minmax(0, 1fr); }
  .game-status-bar .phase-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .game-turn-line { align-items: flex-start; }
  .action-column .action-art-grid { grid-template-columns: minmax(520px, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .reference-tag { transition: none; } }
@media (max-width: 760px) {
  .lobby-test-card { flex-direction: column; align-items: stretch; padding: 22px; }
  .test-control-panel .section-heading { flex-wrap: wrap; gap: 8px; }
  .test-seat-button { padding: 10px; }
}

/* Public storage uses the same physical scale as the active player's desk. */
.public-player-storage { grid-template-columns: minmax(0, 1fr); }
.public-storage-board-grid { display: flex; align-items: start; overflow: auto; max-height: 65vh; }
.public-storage-board-grid > .public-board-art { flex: 0 0 auto; width: max-content; max-width: none; }
.public-board-image-wrap.has-fixed-grid-scale { display: block; width: calc(var(--board-columns) * var(--game-cell)); height: calc(var(--board-rows) * var(--game-cell)); max-width: none; }
.public-board-image-wrap.has-fixed-grid-scale > img { width: 100%; height: 100%; max-height: none; object-fit: fill; }
.public-storage-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--game-cell)); grid-auto-rows: var(--game-cell); grid-auto-flow: row dense; gap: 3px; padding: 3px; }
.public-storage-tile { grid-column: span var(--goods-width, 1); grid-row: span var(--goods-height, 1); width: calc(var(--goods-width, 1) * var(--game-cell)); height: calc(var(--goods-height, 1) * var(--game-cell)); min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.physical-component-art { flex: none; }
.public-reward-grid { display: flex; flex-wrap: wrap; align-items: start; overflow: auto; }
.public-reward-grid > .has-physical-art { width: max-content; max-width: none; flex: none; }
.action-plan-suboptions, .discovery-candidates { overflow: auto; }
.action-plan-option-label.has-image:has(.physical-component-art) { grid-template-columns: 18px max-content minmax(70px, 1fr); max-width: none; }

/* Workstation choices use the same component scale as the player's table. */
.action-flow, .action-delta, .action-option-visual { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.action-flow { max-width: 100%; overflow-x: auto; padding: 3px 0; }
.action-delta { gap: 8px; }
.action-delta-label { color: #e1c587; font-size: 11px; white-space: nowrap; }
.action-flow-arrow { flex: none; color: #edd5a0; font-size: 22px; }
.action-item { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 4px; vertical-align: middle; }
.action-item > img { display: block; flex: none; max-width: none; background: transparent; border-radius: 2px; }
.action-item > .mv-token { flex: none; width: var(--game-cell); height: var(--game-cell); transform: none; }
.action-item > .mv-token[data-resource-id="wood"], .action-item > .mv-token[data-resource-id="stone"] { height: calc(var(--game-cell) * 2); }
.action-item .mv-token > img { width: 100%; height: 100%; object-fit: fill; background: transparent; }
.action-item > .action-art-card { width: calc(var(--game-cell) * 1.4); height: calc(var(--game-cell) * 2); object-fit: contain; }
.action-item > .action-art-joker { width: var(--game-cell); height: var(--game-cell); object-fit: contain; }
.action-item > .action-art-ship { width: calc(var(--game-cell) * 3.5); height: calc(var(--game-cell) * 1.8); object-fit: contain; }
.action-item > .action-art-fallback { width: calc(var(--game-cell) * 2); height: calc(var(--game-cell) * 2); object-fit: contain; }
.action-item > .action-item-count { color: #f6e6b8; font-size: 13px; font-weight: 700; white-space: nowrap; }
.action-item-fallback { font-size: 12px; }
.action-plan-option-label.has-action-art { display: flex; max-width: 100%; min-width: 0; gap: 8px; align-items: center; padding: 8px; }
.action-plan-option-label.has-action-art > input { flex: none; width: 16px; height: 16px; margin: 0; }
.action-option-visual { overflow: auto; padding: 2px; }
.action-plan-option-label .action-option-caption { color: #cccfbf; font-size: 11px; }
.action-group-note { display: block; margin: 0 0 9px; color: #c9c6ae; font-size: 11px; line-height: 1.5; }
.action-outcome { color: #f1dfba; font-size: 13px; }
.extra-worker-option { align-items: center; padding: 8px 10px; }
.extra-worker-option > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.extra-worker-option input { margin-top: 0; }
.action-plan-modal .panel-note { font-size: 11px; }
.dice-result { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 9px 0; }
.dice-joker-button, #buildFishingBoat { display: inline-flex; align-items: center; gap: 8px; }
.discovery-card .discovery-card-reward { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 6px 0; }
.discovery-boat-note .action-flow { margin-bottom: 6px; }
.mountain-weapon-bonus .action-art-card { width: calc(var(--game-cell) * 1.4); height: calc(var(--game-cell) * 2); }
.ship-equipment-hull, .ship-equipment-row > button { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ship-equipment-row { flex-wrap: wrap; }
.ship-purchase-copy .action-delta { margin: 3px 0; }