/* English war table. Gameplay stays in the existing engine. */
:root {
  --page:#15221a;
  --surface:#20261d;
  --text:#eadfc5;
  --muted:#b4a78b;
  --line:#806647;
  --action:#d2aa69;
  --friendly:#8cac94;
  --enemy:#d39b83;
  --rail-width:clamp(230px,19vw,285px);
  --card-height:clamp(144px,calc(22dvh - 40px),180px)
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  padding:0;
  display:block;
  min-height:100dvh;
  color:var(--text);
  font:15px/1.5 'Segoe UI',sans-serif;
  background:linear-gradient(#0b171140,#0b171140),url('../lib/img/ui/war-table.png') center/cover fixed,#15221a
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3,.game-wordmark {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400
}
button {
  font:inherit;
  min-height:40px;
  padding:9px 18px;
  color:var(--text);
  background:#202b22;
  border:1px solid var(--line);
  border-radius:0;
  cursor:pointer;
  box-shadow:none;
  transition:background .15s,border-color .15s
}
button:hover:not(:disabled) {
  background:#344033;
  border-color:#c9a56f;
  transform:none
}
button:disabled {
  opacity:.45;
  cursor:default
}
button:focus-visible,a:focus-visible,.cell:focus-visible {
  outline:3px solid #f1d49d;
  outline-offset:3px
}
.quiet-button {
  background:none;
  border:0;
  box-shadow:none;
  color:var(--muted)
}
.quiet-button:hover:not(:disabled) {
  color:var(--text);
  background:#af997315
}
.primary {
  min-height:62px;
  background:var(--action);
  border:1px solid #f1d39a;
  color:#281f13;
  font:23px Georgia,serif;
  padding:15px 26px;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);
  box-shadow:inset 0 0 0 4px #ba9155
}
.primary:hover:not(:disabled) {
  background:#e1bd7d;
  border-color:#f7e0b3
}
[hidden] {
  display:none!important
}
.sr-only {
  position:absolute!important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.eyebrow {
  display:block;
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--muted)
}
.muted {
  color:var(--muted)
}
.screen {
  position:fixed;
  inset:0;
  z-index:2000;
  padding:0 4.5vw 35px;
  overflow:auto;
  background:linear-gradient(#0b171140,#0b171140),url('../lib/img/ui/war-table.png') center/cover,#15221a
}
.screen-heading,.battle-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:70px;
  border-bottom:1px solid #80664760;
  background:#08110ca3
}
.screen-heading {
  margin:0 -4.5vw 26px;
  padding:0 4.5vw
}
.screen-heading h1 {
  font-size:34px
}
.screen-heading p {
  font-size:13px;
  color:var(--muted)
}
.game-wordmark {
  color:#d7bc8b;
  font-size:25px;
  letter-spacing:3px;
  white-space:nowrap
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px
}
/* Menu */
.main-menu {
  display:flex;
  align-items:safe center;
  background:#071411 url('../lib/img/ui/menu-backdrop.png') center/cover;
  padding:60px 8.7vw 110px
}
.menu-layout {
  width:100%;
  max-width:1600px;
  margin:auto
}
.menu-copy {
  width:450px;
  max-width:100%
}
.menu-ornament {
  display:flex;
  align-items:center;
  gap:22px;
  margin-bottom:32px;
  width:360px;
  max-width:85%;
  color:#b88c4e;
  font-size:29px
}
.menu-ornament:before,.menu-ornament:after {
  content:'';
  flex:1;
  height:1px;
  background:#a67c40
}
.game-title {
  color:#f0e3bd;
  font:clamp(70px,7vw,112px)/1 Georgia,serif;
  letter-spacing:1px
}
.game-title>span {
  display:flex;
  align-items:baseline;
  gap:4px;
  margin-top:5px
}
.game-title em {
  font-size:.55em;
  color:#d2aa69
}
.menu-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  margin-top:60px
}
.menu-choice {
  position:relative;
  background:none;
  border:0;
  padding:15px 0 15px 47px;
  font:30px/1.3 Georgia,serif;
  text-align:left;
  color:#f0d3a1
}
.menu-choice:before {
  content:'◇';
  position:absolute;
  left:2px;
  top:21px;
  color:#b78c4a;
  font:17px Georgia,serif
}
.menu-choice:hover:not(:disabled),.menu-choice:focus-visible {
  color:#ffe4b3;
  background:none
}
.menu-choice:hover:before,.menu-choice:focus-visible:before {
  content:'◆';
  color:#efd091
}
#continue-hero-summary {
  color:#c9b68f;
  padding-left:47px;
  font-size:12px;
  min-height:18px
}
.menu-note {
  margin:35px 0 0 48px;
  font-size:11px;
  letter-spacing:2px;
  color:#bb9964
}
.menu-footer {
  position:absolute;
  bottom:42px;
  left:8.7vw
}
.menu-footer button {
  font-size:14px;
  color:#cfb994
}
/* Battle: board first, hand second, context third. */
.game-container {
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding:0;
  display:block;
  transform:none
}
.battle-toolbar {
  padding:0 clamp(18px,3.1vw,50px)
}
.battle-toolbar nav {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap
}
.battle-toolbar button {
  font-size:13px;
  padding:7px 10px
}
.battle-table {
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--rail-width);
  grid-template-rows:76px calc(clamp(303px,calc(100dvh - 476px),518px) + 23px) minmax(30px,auto) auto;
  gap:12px clamp(18px,2.4vw,38px);
  padding:16px clamp(18px,3.1vw,50px) 8px
}
.player-info {
  grid-column:1;
  grid-row:1;
  min-height:76px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  margin:0
}
.player-panel {
  width:auto;
  padding:0;
  display:flex;
  align-items:center;
  gap:14px;
  border:0!important;
  background:none;
  border-radius:0;
  min-width:0
}
.player-panel.enemy {
  justify-content:flex-start;
  text-align:right;
  flex-direction:row-reverse
}
.player-portrait {
  width:56px;
  height:58px;
  object-fit:cover;
  border:1px solid #b19059;
  padding:3px;
  background:#17241c
}
.player-header {
  display:flex;
  align-items:center;
  margin:0;
  gap:8px
}
.player-header h2 {
  font-size:25px;
  line-height:1.15
}
.enemy .player-header {
  justify-content:flex-end
}
.player-trait,.legacy-resource,.health-bar {
  display:none
}
.player-resources {
  display:flex;
  flex-direction:column;
  gap:2px;
  color:var(--muted);
  font-size:12px;
  margin-top:6px
}
.health-resource {
  display:flex;
  gap:5px;
  align-items:baseline;
  color:var(--friendly)
}
.health-resource strong {
  font-size:18px;
  font-weight:400
}
.health-resource>span {
  color:var(--muted)
}
.enemy .health-resource {
  justify-content:flex-end;
  color:var(--enemy)
}
.player-panel.friendly .hand-resource {
  display:none
}
.turn-summary {
  text-align:center;
  white-space:nowrap;
  font-size:13px;
  letter-spacing:1px;
  color:#ddc395;
  text-transform:uppercase
}
#turn-label {
  font-weight:400
}
.phase-steps {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:13px;
  margin-top:8px;
  font-size:14px;
  letter-spacing:0;
  text-transform:none;
  color:#859281
}
.phase-steps .active {
  color:#f0cb88
}
.phase-steps .active:before {
  content:'•';
  margin-right:7px
}
.phase-steps .done {
  color:#9eb7a4
}
body[data-turn='opponent'] #turn-label {
  color:#d9a78e
}
body[data-local-player='2'] #player2-panel {
  grid-column:1;
  grid-row:1
}
body[data-local-player='2'] #player1-panel {
  grid-column:3;
  grid-row:1
}
body[data-local-player='2'] .turn-summary {
  grid-column:2;
  grid-row:1
}
.battlefield-layout {
  display:contents
}
.board-section {
  grid-column:1;
  grid-row:2;
  min-width:0
}
.board-labels {
  display:none
}
.game-board {
  display:grid;
  width:100%;
  height:clamp(303px,calc(100dvh - 476px),518px);
  grid-template-columns:repeat(7,minmax(0,1fr));
  grid-template-rows:repeat(5,minmax(0,1fr));
  gap:6px;
  padding:12px;
  margin:0;
  background:#34382a;
  border:2px solid #a58654;
  border-radius:0;
  outline:1px solid #625e45;
  outline-offset:-7px
}
.cell {
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:0;
  padding:0;
  border:1px solid #75745c66;
  border-radius:0;
  background:#29362b;
  overflow:hidden;
  box-shadow:none!important;
  animation:none!important;
  transition:background .12s,border-color .12s
}
.cell:hover {
  background:#344334;
  border-color:#c3aa7d
}
.cell-coordinate {
  position:absolute;
  top:3px;
  left:5px;
  font-size:9px;
  color:#b1af8b70;
  z-index:1;
  pointer-events:none
}
.cell.deployable,.cell.movable {
  background:#2b4a3b;
  border-color:#7ca68a
}
.cell-action {
  position:absolute;
  pointer-events:none;
  color:#8fbb9a;
  font-size:24px
}
.cell.attackable {
  background:#573c2e;
  border:2px solid #c48e72
}
.cell.attackable .cell-action {
  top:2px;
  right:3px;
  padding:1px 4px;
  background:#8d4f39;
  color:#ffecd5;
  font-size:9px;
  z-index:2
}
.cell.selected-cell,.cell.highlight {
  border:2px solid #d4b778
}
.cell.swappable {
  background:#504a30;
  border:2px dashed #c2a461
}
.cell.base {
  display:flex;
  flex-direction:column;
  text-align:center;
  font-size:11px;
  line-height:1.2;
  color:#c0c49b
}
.cell.friendly-base {
  background:#29392c;
  color:#c0c49b
}
.cell.enemy-base {
  background:#3b3228;
  color:#d5aa93
}
.base-icon {
  width:38px;
  height:38px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  margin-bottom:3px
}
.base-name {
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:10px
}
.base-health {
  font:23px Georgia,serif
}
.unit {
  position:absolute;
  left:10%;
  top:6px;
  width:80%;
  height:calc(100% - 12px);
  transform:none;
  border:1px solid #a99a6b;
  border-radius:0;
  background:#233a2b!important;
  color:#efe0bc;
  overflow:hidden;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  box-shadow:none!important;
  animation:none!important
}
.unit.enemy,.unit.enemy-inactive {
  background:#3b2a23!important;
  border-color:#ae8065;
  color:#f2d4bd;
  filter:none
}
.unit-art {
  width:100%;
  flex:1;
  min-height:0;
  object-fit:cover;
  object-position:center 25%
}
.unit-name {
  font-size:10px;
  font-weight:400;
  line-height:15px;
  height:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  background:#102016c4
}
.unit-stats {
  position:static;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  margin:0;
  width:100%;
  height:20px;
  flex-shrink:0;
  padding:1px 7px;
  font-size:11px;
  font-weight:400
}
.unit-state {
  position:absolute;
  top:2px;
  right:2px;
  color:#ede5c5;
  background:#172b20db;
  padding:1px 3px;
  font-size:8px;
  line-height:1.4
}
.unit.enemy .unit-state {
  background:#432b21db
}
.unit.can-act:before {
  display:none
}
.unit.spent .unit-art {
  filter:brightness(.6) saturate(.5)
}
.unit.frozen {
  border:1px dashed #b2d9e3
}
.unit.frozen:after {
  font-size:12px;
  top:2px;
  left:3px
}
.shield-icon {
  position:absolute;
  right:3px;
  top:18px;
  font-size:10px;
  z-index:3
}
.board-files {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  padding:7px 12px 0;
  height:23px;
  text-align:center;
  font:11px Georgia,serif;
  color:#b6a17d
}
.board-legend {
  display:none
}
/* Paper details show the full face and separate live stats. */
.selection-panel {
  grid-column:2;
  grid-row:1 / 3;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:19px;
  background:#c9b996;
  color:#303426;
  border:1px solid #e2d2a9;
  border-radius:0;
  box-shadow:inset 0 0 0 5px #a5947370;
  overflow:hidden
}
.selection-panel>.eyebrow {
  display:none
}
#selection-title {
  font:26px/1.15 Georgia,serif;
  margin:0 0 5px
}
#selection-kind {
  font-size:12px;
  color:#665b42;
  margin-bottom:10px
}
#selection-art {
  display:block;
  width:100%;
  height:clamp(90px,calc(34dvh - 130px),232px);
  object-fit:contain;
  object-position:center;
  border-radius:0;
  margin:0 auto 12px;
  min-height:70px;
  flex-shrink:1
}
#selection-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:8px 0 10px;
  margin-bottom:12px;
  border-top:1px solid #8a795750;
  border-bottom:1px solid #8a795750;
  gap:5px;
  text-align:center;
  color:#343324;
  font-size:12px
}
.selection-stat {
  display:flex;
  flex-direction:column;
  font-size:12px
}
.selection-stat strong {
  font:23px Georgia,serif
}
.selection-stat small {
  font-size:10px;
  color:#625842
}
.selection-context {
  grid-column:1/-1;
  font-size:12px
}
#selection-description {
  flex:1;
  min-height:35px;
  margin:0;
  white-space:pre-line;
  overflow-y:auto;
  scrollbar-width:thin;
  font-size:13px;
  line-height:1.65;
  color:#504730
}
#selection-status {
  font-size:12px;
  color:#4d5138;
  border-top:1px solid #8a795750;
  margin-top:12px;
  padding-top:10px
}
#selection-status:empty,#selection-preview:empty {
  display:none
}
#selection-preview {
  padding-top:10px;
  color:#7c4428;
  font-size:12px;
  line-height:1.6
}
#selection-preview strong {
  display:block;
  font-weight:600
}
.selection-tip {
  font-size:12px;
  color:#5d5b42;
  margin-top:16px
}
.selection-panel:has(#selection-art:not([hidden])) .selection-tip {
  display:none
}
#view-card-art-btn {
  align-self:flex-start;
  min-height:32px;
  font-size:12px;
  padding:6px 0 0;
  margin-top:8px;
  border:0;
  color:#62523a;
  background:none;
  box-shadow:none
}
.battle-guidance {
  grid-column:1;
  grid-row:3;
  min-width:0;
  min-height:30px;
  display:flex;
  align-items:center;
  gap:15px;
  justify-content:space-between
}
#action-hint {
  color:#edcd93;
  font:16px/1.4 Georgia,serif
}
#cancel-selection-btn {
  font-size:12px;
  flex-shrink:0;
  padding:3px 0;
  min-height:28px
}
.action-area {
  grid-column:2;
  grid-row:3 / 5;
  min-width:0
}
.controls {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
  margin:0
}
.controls button {
  width:100%
}
#end-turn-btn:not(.primary) {
  background:none;
  border:0;
  font-size:12px;
  padding:6px;
  min-height:30px;
  color:var(--muted)
}
.button-glowing {
  animation:none!important;
  margin:0;
  box-shadow:none!important
}
.hand-section {
  grid-column:1;
  grid-row:4;
  display:flex;
  align-items:flex-start;
  gap:18px;
  min-width:0;
  padding:0;
  border:0;
  background:none;
  border-radius:0
}
.draw-stack {
  width:94px;
  flex:0 0 94px;
  text-align:center;
  padding-top:22px
}
.local-resource {
  color:#dab471;
  font-size:19px;
  white-space:nowrap;
  margin-bottom:12px
}
.local-resource strong {
  font-size:26px;
  font-weight:400
}
.local-resource small {
  color:#b6a07b;
  font-size:12px;
  margin-left:4px
}
.deck-back {
  width:70px;
  height:80px;
  margin:0 auto 10px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #b48b4d;
  outline:1px solid #736348;
  outline-offset:3px;
  background:#203729;
  color:#b69759;
  box-shadow:4px 3px 0 #657052,7px 6px 0 #8d7247;
  font-size:38px
}
#local-deck-count {
  position:absolute;
  right:-10px;
  bottom:5px;
  padding:0 3px;
  font:10px 'Segoe UI',sans-serif;
  background:#1d2b1e;
  color:#e1c99f
}
.draw-button {
  display:block;
  width:100%;
  min-height:30px;
  padding:4px 0;
  font-size:14px;
  background:none;
  border:0
}
.button-cost {
  font-size:11px;
  color:#bd9b64
}
.hand-content {
  min-width:0;
  flex:1
}
.hand-heading {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:20px;
  padding-left:3px
}
#hand-title {
  font:12px 'Segoe UI',sans-serif;
  white-space:nowrap;
  color:#c9b999
}
#hand-hint {
  font-size:11px;
  color:#a69c81;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
#opponent-hand-summary {
  display:none
}
.hand {
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  min-width:0;
  min-height:0;
  align-items:flex-end;
  margin:0;
  padding:10px 3px 7px;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:#92764e transparent
}
.hand:empty {
  height:var(--card-height)
}
.hand:empty:after {
  content:'Your hand is empty. Draw a card to begin.';
  align-self:center;
  width:100%;
  color:#b2a080;
  font-size:14px;
  text-align:center
}
.card {
  position:relative;
  display:flex;
  flex-direction:column;
  flex:0 0 clamp(122px,8.5vw,136px);
  width:clamp(122px,8.5vw,136px);
  height:var(--card-height);
  border:1px solid #9e8052;
  border-radius:0;
  padding:0;
  margin:0;
  background:#2c291c;
  color:var(--text);
  overflow:hidden;
  box-shadow:0 3px 5px #0008;
  text-align:left;
  transition:transform .15s,border-color .15s
}
.card:hover:not(:disabled) {
  transform:translateY(-6px);
  background:#39311f;
  border-color:#e0c18a;
  box-shadow:0 3px 5px #0008
}
.card.selected {
  transform:translateY(-7px);
  border:2px solid #e4c78e;
  background:#39311f;
  box-shadow:none
}
.card-art {
  display:block;
  width:100%;
  height:calc(var(--card-height) - 49px);
  flex-shrink:0;
  overflow:hidden;
  background:#18241c
}
.card-art img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 24%
}
.card-cost {
  position:absolute;
  top:5px;
  left:5px;
  width:27px;
  height:27px;
  border:1px solid #d8b778;
  border-radius:50%;
  background:#33291a;
  color:#f0d7a8;
  text-align:center;
  font:19px/25px Georgia,serif
}
.card-name {
  display:block;
  padding:6px 7px 0;
  font:14px/1.2 Georgia,serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex-shrink:0
}
.card-kind,.card-description {
  display:none
}
.card-stats {
  position:static;
  display:block;
  margin:0;
  padding:5px 7px 2px;
  color:#c0b18f;
  font-size:10px;
  white-space:nowrap;
  font-weight:400
}
.card.unaffordable {
  opacity:1
}
.card.unaffordable .card-art {
  filter:brightness(.5) saturate(.65)
}
.card.unaffordable .card-cost {
  color:#aea384;
  border-color:#83714d
}
.card.unaffordable .card-name {
  color:#b7ac91
}
body[data-phase='battle'] .card-art {
  filter:saturate(.8)
}
/* Dialogs and secondary tools */
.utility-details {
  margin:8px clamp(18px,3.1vw,50px);
  border-top:1px solid #80664760;
  color:#a99b7b;
  font-size:11px
}
.utility-details>summary {
  width:fit-content;
  cursor:pointer;
  padding:5px 0
}
.utility-details[open] {
  padding-bottom:16px
}
.debug-toggle-row,.ai-stats,.ai-weights,.parallel-training,.ai-learning-controls,.chat-container {
  background:#1c2a20;
  border-color:#806647;
  border-radius:0
}
.debug-toggle-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:12px
}
.debug-toggle-row button,.ai-buttons button {
  font-size:12px;
  padding:7px 10px;
  min-height:34px
}
.ai-learning-controls {
  padding:16px
}
.ai-learning-controls h3,.ai-learning-controls h4 {
  font-family:inherit;
  font-size:14px;
  color:#d4bd92
}
.ai-stats span,.weight-item span:first-child,.training-controls label,.training-status {
  color:var(--muted)
}
.weight-grid {
  grid-template-columns:repeat(5,minmax(0,1fr))
}
.weight-item {
  background:#263626
}
.weight-item span:last-child {
  color:var(--action)
}
.training-status,.ai-buttons {
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-start
}
.parallel-training>p {
  font-size:12px;
  color:var(--muted)
}
.connection-info,#chat-messages {
  border-color:var(--line);
  background:#17251b
}
#chat-input {
  background:#15251a;
  border:1px solid var(--line);
  color:var(--text);
  padding:9px;
  max-width:70%
}
.modal {
  position:fixed;
  inset:0;
  z-index:6500;
  overflow:auto;
  padding:24px;
  background:#030a07de;
  align-items:center;
  justify-content:center
}
.modal-content {
  width:min(650px,100%);
  max-width:100%;
  max-height:calc(100dvh - 48px);
  margin:4vh auto;
  padding:28px;
  background:#20291e;
  border:1px solid #b18d58;
  border-radius:0;
  overflow:auto;
  text-align:center;
  box-shadow:0 12px 40px #0007
}
.modal-content h2 {
  font-size:29px;
  color:#e8cf9f
}
.modal-content>button {
  margin-top:22px
}
.help-dialog {
  text-align:left
}
.help-goal {
  padding:15px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid #80664750;
  color:#ddc794
}
.help-steps {
  padding-left:24px;
  margin:24px 0
}
.help-steps li {
  padding-left:6px;
  margin:18px 0;
  color:#d5ac69
}
.help-steps strong {
  color:#e9d3ae
}
.help-steps p,.help-notes {
  color:var(--muted);
  font-size:13px;
  line-height:1.8
}
.help-steps p {
  margin-top:6px
}
.help-notes {
  border-top:1px solid var(--line);
  padding-top:15px
}
.help-notes p+p {
  margin-top:7px
}
.card-list-dialog {
  width:min(900px,100%);
  text-align:left
}
#discard-options {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:20px
}
#game-notice {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  max-width:min(90vw,760px);
  width:max-content;
  z-index:8000;
  color:#e9c889;
  background:#302b1c;
  border:1px solid #ab8650;
  border-radius:0;
  font-size:13px;
  line-height:1.6;
  padding:12px 18px;
  pointer-events:none
}
#game-notice:empty,#game-notice:not(.visible) {
  display:none
}
.tooltip {
  background:#17231a;
  border:1px solid #96744a;
  color:var(--text);
  border-radius:0;
  padding:10px;
  max-width:260px;
  font-size:12px;
  line-height:1.7;
  z-index:7000
}
body[data-screen='battle'] .tooltip {
  display:none!important
}
#card-art-modal {
  position:fixed;
  inset:0;
  z-index:7600;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#030a07e8
}
.card-art-dialog {
  width:min(810px,100%);
  max-height:calc(100dvh - 48px);
  overflow:auto;
  background:#1c281d;
  border:1px solid #b69761;
  padding:22px
}
.card-art-dialog header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px
}
.card-art-content {
  display:flex;
  gap:25px;
  align-items:center
}
#card-art-image {
  width:46%;
  max-height:70dvh;
  object-fit:contain
}
.card-art-rules {
  flex:1;
  min-width:0;
  font-size:14px;
  line-height:1.8
}
#card-art-description {
  white-space:pre-line;
  margin-top:15px
}
.card-art-note {
  color:#b3a180;
  font-size:12px;
  margin-top:22px
}
img[src*='cards-en/'] {
  object-fit:contain!important;
  object-position:center!important
}
.boss-screen {
  text-align:center
}
.boss-screen .screen-heading {
  text-align:left
}
#boss-list {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  margin:35px auto 22px;
  max-width:1000px
}
#boss-list>.boss-item {
  max-width:100%;
  border-radius:0!important;
  border:1px solid #a3804e!important;
  background:#263224!important;
  padding:22px!important;
  box-shadow:none!important
}
#boss-info {
  max-width:600px;
  margin:20px auto;
  color:var(--muted);
  min-height:56px
}
@media(max-width:1100px) {
  .battle-table {
    gap:10px 18px;
    padding-inline:20px
  }
  .player-info {
    gap:10px
  }
  .player-header h2 {
    font-size:20px
  }
  .player-portrait {
    width:45px;
    height:49px
  }
  .turn-summary {
    font-size:11px;
    letter-spacing:.5px
  }
  .phase-steps {
    font-size:12px;
    gap:9px
  }
  .selection-panel {
    padding:15px
  }
  #selection-title {
    font-size:23px
  }
  #action-hint {
    font-size:14px
  }
  .draw-stack {
    width:78px;
    flex-basis:78px
  }
  .hand-section {
    gap:12px
  }
  .weight-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
@media(max-height:820px) and (min-width:681px) {
  .battle-toolbar {
    min-height:58px
  }
  .player-info {
    min-height:65px
  }
  .battle-table {
    grid-template-rows:65px calc(clamp(233px,calc(100dvh - 420px),380px) + 23px) minmax(30px,auto) auto
  }
  .game-board {
    height:clamp(233px,calc(100dvh - 420px),380px);
    gap:4px;
    padding:9px
  }
  .unit {
    left:6%;
    width:88%;
    top:4px;
    height:calc(100% - 8px)
  }
  .unit-name {
    height:12px;
    line-height:12px;
    font-size:9px
  }
  .unit-stats {
    height:17px;
    font-size:10px;
    padding-inline:4px
  }
  .base-icon {
    width:26px;
    height:26px
  }
  .base-name {
    font-size:8px
  }
  .base-health {
    font-size:19px
  }
  .selection-panel {
    padding:14px
  }
  #selection-art {
    height:clamp(75px,calc(32dvh - 150px),120px);
    margin-bottom:8px
  }
  #selection-title {
    font-size:23px
  }
  #selection-description {
    font-size:12px
  }
  #selection-stats {
    padding:6px 0;
    margin-bottom:8px
  }
  #selection-status {
    padding-top:7px;
    margin-top:8px;
    font-size:11px
  }
  .deck-back {
    height:60px;
    width:58px;
    font-size:30px
  }
  .local-resource {
    margin-bottom:9px
  }
}
@media(max-width:680px) {
  .screen {
    padding:0 18px 25px
  }
  .screen-heading {
    margin:0 -18px 22px;
    padding:0 18px;
    min-height:58px
  }
  .game-wordmark {
    font-size:17px;
    letter-spacing:1px
  }
  .battle-toolbar {
    padding:8px 12px;
    min-height:58px;
    align-items:flex-start
  }
  .battle-toolbar nav {
    gap:0;
    justify-content:flex-end
  }
  .battle-toolbar button {
    padding:4px 7px;
    min-height:32px;
    font-size:11px
  }
  #open-story-panel {
    display:none
  }
  .battle-table {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto auto auto auto;
    gap:10px;
    padding:10px 12px
  }
  .player-info {
    grid-column:1;
    grid-row:1;
    gap:8px;
    min-height:65px
  }
  .player-panel {
    gap:7px
  }
  .player-portrait {
    display:none
  }
  .player-header h2 {
    font-size:17px
  }
  .player-resources {
    font-size:10px
  }
  .health-resource {
    gap:3px
  }
  .health-resource strong {
    font-size:15px
  }
  .turn-summary {
    font-size:10px;
    white-space:normal;
    max-width:125px
  }
  .phase-steps {
    gap:5px;
    font-size:11px;
    margin-top:5px
  }
  .board-section {
    grid-row:2
  }
  .game-board {
    height:300px;
    gap:3px;
    padding:6px
  }
  .cell-coordinate {
    font-size:7px;
    left:2px;
    top:1px
  }
  .unit {
    top:3px;
    left:3px;
    width:calc(100% - 6px);
    height:calc(100% - 6px)
  }
  .unit-name {
    height:11px;
    line-height:11px;
    font-size:8px
  }
  .unit-stats {
    height:15px;
    padding:0 2px;
    font-size:8px;
    gap:1px
  }
  .unit-state {
    font-size:7px
  }
  .base-icon {
    width:23px;
    height:23px
  }
  .base-name {
    font-size:7px;
    letter-spacing:0
  }
  .base-health {
    font-size:17px
  }
  .board-files {
    height:19px;
    padding-top:4px;
    font-size:10px
  }
  .battle-guidance {
    grid-row:3;
    align-items:flex-start;
    gap:8px
  }
  #action-hint {
    font:13px/1.5 'Segoe UI',sans-serif
  }
  #cancel-selection-btn {
    font-size:11px
  }
  .hand-section {
    grid-row:4
  }
  .draw-stack {
    width:69px;
    flex-basis:69px
  }
  .local-resource {
    font-size:14px
  }
  .local-resource strong {
    font-size:21px
  }
  .local-resource small {
    font-size:10px
  }
  .deck-back {
    width:49px;
    height:59px;
    font-size:29px
  }
  .draw-button {
    font-size:12px
  }
  .button-cost {
    font-size:9px
  }
  #hand-hint {
    display:none
  }
  .card {
    flex-basis:122px;
    width:122px;
    height:160px
  }
  .card-art {
    height:111px
  }
  .action-area {
    grid-column:1;
    grid-row:5
  }
  .controls {
    flex-direction:row;
    flex-wrap:wrap
  }
  .controls button {
    flex:1;
    width:auto
  }
  .controls .primary {
    flex-basis:100%;
    min-height:52px;
    font-size:22px
  }
  #end-turn-btn:not(.primary) {
    flex-basis:100%
  }
  .selection-panel {
    grid-column:1;
    grid-row:6;
    height:auto;
    min-height:0;
    padding:18px;
    overflow:visible
  }
  #selection-art {
    height:180px;
    width:135px;
    flex-shrink:0
  }
  #selection-description {
    overflow:visible
  }
  #selection-title {
    font-size:25px
  }
  #selection-preview {
    font-size:13px
  }
  #selection-status {
    font-size:12px
  }
  .utility-details {
    margin-inline:12px
  }
  .weight-grid {
    grid-template-columns:1fr 1fr
  }
  .modal,#card-art-modal {
    padding:14px
  }
  .modal-content,.card-art-dialog {
    max-height:calc(100dvh - 28px);
    padding:20px
  }
  .card-art-content {
    flex-direction:column;
    gap:20px
  }
  #card-art-image {
    width:210px;
    max-width:100%;
    max-height:55dvh
  }
  .main-menu {
    padding:50px 26px 100px;
    background-position:58% center
  }
  .main-menu:before {
    content:'';
    position:absolute;
    inset:0;
    background:#06130b70;
    pointer-events:none
  }
  .menu-layout,.menu-footer {
    position:relative;
    z-index:1
  }
  .menu-copy {
    width:350px
  }
  .game-title {
    font-size:76px
  }
  .menu-ornament {
    width:290px
  }
  .menu-actions {
    margin-top:40px
  }
  .menu-choice {
    font-size:25px;
    padding-left:31px
  }
  #continue-hero-summary,.menu-note {
    padding-left:0;
    margin-left:31px
  }
  .menu-footer {
    position:absolute;
    left:25px;
    bottom:25px
  }
}
@media(max-width:440px) {
  .unit-name, .unit-state { display:none; }
  .unit-stats { height:16px; padding:0 2px; }
  .unit-attack, .unit-health { font-size:0; }
  .unit-attack::after { content:'⚔︎ ' attr(data-value); font-size:9px; }
  .unit-health::after { content:'♡ ' attr(data-value); font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important
  }
}
#phase-indicator {
  display:none
}
.cell:has(.unit.attack-animating) {
  overflow:visible;
  z-index:10
}
.unit:has(.damage-float) {
  overflow:visible
}