/* The field menu and result card share the same brass-edged game controls. */
:root {
  --panel-ink: #192e2c;
  --panel-edge: #9d9770;
  --warm-type: #fff1c9;
  --panel-offset: max(24px, env(safe-area-inset-bottom));
}
#finished, #victory {
  width: min(340px, 39vw);
  left: var(--safe);
  right: auto;
  top: auto;
  bottom: var(--panel-offset);
  margin: 0;
  transform: none;
  padding: 0;
  border: 2px solid var(--panel-edge);
  background: var(--panel-ink);
  color: var(--warm-type);
  text-align: left;
  box-shadow: inset 0 0 0 2px #354840, 4px 5px 0 #14232280;
  max-height: calc(100dvh - 84px);
  overflow: auto;
}
body:has(#modal[open][data-view="board"]) :is(.scorebar, nav, #sheet, #dock, #finished),
.ended .scorebar {visibility: hidden;}
#finished, #victory {padding: 20px;}
#finished h2, #victory h2 {
  margin: 0;
  color: #fff2cc;
  font: bold clamp(23px, 2.3vw, 31px)/1.08 Georgia, serif;
  letter-spacing: -.7px;
}
#finished #recap, #victoryDetail {
  margin: 8px 0 15px;
  color: #d2d9bd;
  font: 12px/1.5 var(--mono);
}
.result-actions {display: grid; gap: 7px;}
.carved {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 9px 13px;
  border: 1px solid var(--button-line);
  border-radius: 2px;
  color: var(--button-ink);
  background: var(--button-face);
  box-shadow: inset 0 2px var(--button-light), inset 0 -3px var(--button-shade), 0 2px 0 #0c2327;
  font: 700 16px/1.18 system-ui, sans-serif;
  text-align: left;
}
.gold {
  --button-face: #efd085; --button-light: #ffe8ae; --button-shade: #c99c50;
  --button-line: #f8dda0; --button-ink: #322f20;
}
.forest {
  --button-face: #375a4b; --button-light: #52745f; --button-shade: #264539;
  --button-line: #78937b; --button-ink: #f7ebc8;
}
.carved:hover {filter: brightness(1.08); background: var(--button-face);}
.carved:active {transform: translateY(1px);}
.carved strong, .carved small {display: block;}
.carved strong {font-size: 16px;}
.carved small {margin-top: 3px; font: 11px/1.3 var(--mono); opacity: .88;}
.mode-tile {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px;
  background: #182e292a; border: 1px solid #192c2736;
}
.mode-tile canvas, .carved > canvas {width: 24px; height: 24px;}
.mode-tile .trophy-icon {width: 24px; height: 24px;}
.pixel-arrow {
  width: 12px; height: 10px; display: inline-block; flex: none;
  margin-left: auto; background: currentColor;
  clip-path: polygon(0 40%,58% 40%,58% 0,75% 0,75% 20%,91% 20%,91% 40%,100% 40%,100% 60%,91% 60%,91% 80%,75% 80%,75% 100%,58% 100%,58% 60%,0 60%);
}
.field-link, .board-tools button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 4px 7px; background: none; border: 0;
  color: #eadbb3; font: 600 13px/1.25 system-ui,sans-serif;
}
.field-link:hover, .board-tools button:hover {color: #fff2ca; text-decoration: underline; text-underline-offset: 4px;}
.field-link canvas, .field-link .trophy-icon {width: 17px; height: 17px;}
.result-actions .field-link {justify-self: start;}
#finished #resultRank {
  margin: 0 0 13px; padding: 6px 0 6px 10px;
  color: #f4d586; background: transparent; border: 0; border-left: 2px solid #d7ad61;
  font: 700 12px/1.4 var(--mono);
}
#victory {animation: revealStanding .35s ease-out both;}
#victory .victory-crown {width: 40px; height: 25px; margin-bottom: 7px;}
@keyframes revealStanding {from {opacity: 0; translate: 0 6px;} to {opacity: 1; translate: 0;}}
@media(min-width: 721px) {
  body:has(#modal[open][data-view="board"]) #grove {width: 146%; left: -46%;}
}

/* A large ledger with a fixed illustrated masthead and independently scrolling standings. */
#modal[data-view="board"] {
  --ledger-gutter: clamp(19px,3vw,44px);
  width: min(850px,65vw);
  max-width: none;
  margin: auto var(--safe) auto auto;
  max-height: calc(100dvh - 32px);
  border: 2px solid #a79363;
  color: #303c35;
  background: #f6edd5;
  box-shadow: 0 0 0 2px #223a36, 6px 7px 0 #14252070;
  overflow: auto;
}
#modal[data-view="board"]::backdrop {background: #172a2d4d;}
#modal[data-view="board"] .modalbody {padding: 0;}
#modal[data-view="board"] #dialogContent {
  display: flex; flex-direction: column; max-height: calc(100dvh - 40px);
}
.board-hero, .board-tools, #boardStatus, .personal-standing {flex: none;}
.board-hero {
  min-height: clamp(152px,18vw,215px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  position: relative; isolation: isolate;
  padding: 16px var(--ledger-gutter) 20px; color: #fff2d2;
  border-bottom: 3px solid #b1945f; background: #202637;
}
.board-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url("leaderboard-sky.png") 72% center / cover no-repeat; image-rendering: pixelated;
}
.board-brand {
  display: flex; align-items: center; gap: 6px;
  color: #f4d78f; font: clamp(20px,2.3vw,31px)/1 var(--pixel);
  text-shadow: 2px 2px #272733;
}
.board-brand img {width: 28px; height: 28px; image-rendering: pixelated;}
.board-brand small {align-self: flex-end; font: 700 12px/1.2 var(--mono); margin-left: -5px;}
.board-hero #dialogTitle {
  max-width: 78%; margin: 8px 0; padding: 0;
  font: 700 clamp(38px,4.25vw,62px)/1.01 Georgia,serif; letter-spacing: -.05em;
  text-shadow: 2px 2px #182430;
}
.board-hero .board-date {margin: 0; color: #e1dece; font: 600 12px/1.5 var(--mono);}
.score-sheet {display: flex; flex-direction: column; min-height: 0; padding: 0 var(--ledger-gutter);}
#boardStatus {
  margin: 0; padding: 13px 0; min-height: 42px;
  color: #56604c; font: 650 12px/1.35 var(--mono);
}
.board-scroll {
  max-height: min(43dvh,480px); min-height: 0; overflow: auto; overscroll-behavior: contain;
  scrollbar-color: #928968 #f0e4c9;
}
.board-scroll:focus-visible {outline: 2px solid #47684e; outline-offset: 2px;}
.standings {width: 100%; table-layout: fixed; border-spacing: 0; border-collapse: separate;}
.standings th, .standings td {text-align: left;}
.standings thead th {
  position: sticky; top: 0; z-index: 1;
  background: #30453d; color: #f4e9c6; padding: 9px 13px;
  font: 650 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.standings th:first-child {width: 74px;}
.standings th:last-child {width: 100px;}
.standings th:last-child, .standings td:last-child {text-align: right;}
.standings tbody :is(td,th) {
  height: 53px; padding: 6px 13px; border-bottom: 1px solid #d6cbb1;
  font: 600 17px/1.3 system-ui,sans-serif;
}
.standings tbody th {overflow-wrap: anywhere;}
.standings tbody td:last-child {font: 700 18px/1 var(--mono); font-variant-numeric: tabular-nums;}
.rank-number {display: grid; place-items: center; width: 30px; height: 33px; font: 700 14px/1 var(--mono); color: #576351;}
.standings tr[data-medal] .rank-number {
  padding-bottom: 3px; color: #372e1e; background: var(--metal);
  box-shadow: inset 0 3px var(--metal-light);
  clip-path: polygon(0 0,100% 0,100% 70%,82% 70%,82% 82%,65% 82%,65% 92%,52% 92%,52% 100%,46% 100%,46% 92%,33% 92%,33% 82%,18% 82%,18% 70%,0 70%);
}
tr[data-medal="gold"] {--metal: #d2a14b; --metal-light: #e3bb68; background: #f3dfaa;}
tr[data-medal="silver"] {--metal: #a1b2ad; --metal-light: #c5d0c8;}
tr[data-medal="bronze"] {--metal: #c98861; --metal-light: #dca883;}
.standings tr.current {background: #dce7cc;}
.standings tr.current td:first-child {box-shadow: inset 3px 0 #557555;}
.you-label {margin-left: 8px; color: #38523d; font: 700 11px/1 var(--mono); text-transform: uppercase;}
.personal-standing {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px;
  padding: 13px 14px; margin-top: 12px;
  background: #dce7cc; border-left: 3px solid #557555; color: #294b39;
  font: 650 13px/1.3 var(--mono);
}
.personal-standing strong {font-size: 16px;}
#myPoints {margin-left: auto;}
.empty-standings {
  text-align: center; padding: 14px 12px 26px;
  border-block: 1px solid #d7caaa;
}
.empty-standings .trophy-icon {display: block; width: 48px; height: 45px; margin: 0 auto 8px;}
.empty-standings strong {font: bold 25px/1.12 Georgia,serif; color: #394c37;}
.empty-standings p {font-size: 14px; margin: 6px 0 0; color: #555d48;}
.board-tools {display: flex; justify-content: space-between; align-items: center; padding: 5px var(--ledger-gutter); margin-top: 13px; background: #2c423a; border-top: 2px solid #b8a477;}
.board-tools button {color: #f0e6c5; padding-inline: 2px;}
.board-tools button:disabled {opacity: .55; cursor: wait;}
.back-arrow {margin: 0; transform: rotate(180deg);}
#boardRefresh::before {content: '↻'; font: 20px/1 system-ui;}
#boardRefresh {color: #d4d9bc;}
@media (max-width: 720px) and (orientation: portrait) {
  #finished, #victory {
    --panel-offset: 0px;
    width: 100%; max-width: none; left: 0; margin: 0; right: 0;
    border: 0; border-top: 2px solid var(--panel-edge); box-shadow: 0 -3px 0 #17342d55;
    max-height: 58dvh;
  }
  #finished, #victory {
    padding: 14px max(16px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  }
  #finished h2, #victory h2 {font-size: 25px;}
  #finished #recap, #victoryDetail {margin: 5px 0 10px;}
  .mode-tile {width: 29px; height: 29px;}
  .carved small {margin-top: 2px;}
  body.ended:not(:has(#modal[open])) #world:not(.victory-on) #grove {height: calc(100% - var(--result-height,200px));}
}
@media(max-width: 720px) {
  #modal[data-view="board"] {width: calc(100% - 16px); margin: auto; max-height: calc(100dvh - 16px);}
  .board-hero {min-height: 153px;}
  .board-hero #dialogTitle {max-width: 92%; font-size: clamp(32px,8.6vw,46px);}
  .board-brand img {width: 23px; height: 23px;}
  .standings th:first-child {width: 52px;}
  .standings th:last-child {width: 68px;}
  .standings tbody :is(td,th), .standings thead th {padding-inline: 7px;}
  .standings tbody :is(td,th) {height: 47px; font-size: 15px;}
}
@media(max-height: 520px) and (orientation: landscape) {
  #finished, #victory {width: min(335px,43vw); bottom: 8px; max-height: calc(100dvh - 48px);}
  #finished, #victory {padding: 10px 14px;}
  #finished #recap {margin: 5px 0 8px;}
  #modal[data-view="board"] {width: min(710px,82vw);}
  .board-hero {min-height: 90px; padding-block: 9px;}
  .board-hero #dialogTitle {margin: 3px 0; font-size: 30px;}
  .board-brand {font-size: 18px;}
  .board-brand img {width: 18px; height: 18px;}
  #boardStatus {min-height: 30px; padding: 7px 0;}
  .board-scroll {max-height: 34dvh;}
  .personal-standing {padding: 6px 10px; margin-top: 5px;}
  .board-tools {margin-top: 5px;}
}
#modal :is(.board-hero, #dialogContent) > h2[tabindex="-1"]:focus {outline: 0;}
#finishTitle:focus, #victoryTitle:focus {outline: 0;}
@media(max-width: 450px) {
  .brand {font-size: clamp(20px,6vw,27px); gap: 4px;}
  .brand canvas {width: 21px; height: 21px;}
  .brand small {font-size: 10px; margin-left: -3px;}
  nav {gap: 4px;}
  nav button {padding-inline: 5px;}
}