main {
  padding: 10px 16px;
  gap: 5px;
}
.game-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.game-title h1 {
  font:
    22px Georgia,
    serif;
  margin: 0;
}
.game-title span {
  font-size: 13px;
  color: #dcc58b;
}
.realm-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  height: 98px;
  flex: none;
  z-index: 3;
}
.realm-emblem {
  height: 98px;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  margin-top: -10px;
}
.realm-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font:
    20px Georgia,
    serif;
  color: #e3ce98;
  white-space: nowrap;
}
.realm-emblem img {
  position: absolute;
  top: 29px;
  /* width: 64px;
  height: 82px; */
  width: 80px;
  height: 103px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #0008);
  pointer-events: none;
}
.realm-settings {
  padding: 2px 5px;
  background: transparent;
  border: 0;
  color: #d4c49a;
  font-size: 21px;
  line-height: 1.2;
  min-width: 30px;
  min-height: 30px;
}
.realm-settings:hover {
  background: #314839;
}
.realm-pan {
  display: flex;
  gap: 5px;
  margin: 0;
}
.realm-pan button {
  padding: 8px 12px;
}
.layout > section,
.detail-layout > section {
  overflow: visible;
}
.map-wrap,
.detail-map-wrap {
  margin-top: -3px;
}
#viewSettings {
  width: min(390px, 90vw);
  padding: 22px;
  background: #182a22;
  color: #eee9d8;
  border: 1px solid #d5b879;
  border-radius: 12px;
}
#viewSettings::backdrop {
  background: #031008b9;
}
#viewSettings header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#viewSettings h2 {
  margin: 0;
  font-size: 23px;
}
#viewSettings header button {
  font-size: 24px;
  padding: 3px 10px;
}
#viewSettings label {
  display: flex;
  margin: 18px 0;
  gap: 12px;
  align-items: center;
}
#viewSettings p {
  font-size: 14px;
  color: #bcc9bf;
}
#settingsDone {
  width: 100%;
}
#viewSettings select {
  max-width: 230px;
}
.detail-header {
  padding: 4px 0 8px;
}
.detail-header h2 {
  font-size: 21px;
}
@media (max-width: 1100px) {
  .realm-toolbar,
  .realm-emblem {
    height: 86px;
  }
  .realm-emblem img {
    width: 55px;
    height: 71px;
    top: 26px;
  }
  .realm-name {
    font-size: 18px;
  }
  .realm-pan button {
    padding: 6px 10px;
  }
  .game-title h1 {
    font-size: 19px;
  }
}
@media (max-width: 600px) {
  main {
    padding: 6px;
  }
  .realm-toolbar {
    grid-template-columns: 1fr auto 1fr;
  }
  .realm-toolbar,
  .realm-emblem {
    height: 74px;
  }
  .realm-emblem img {
    width: 44px;
    height: 58px;
    top: 25px;
  }
  .realm-name {
    font-size: 14px;
    gap: 1px;
  }
  .realm-settings {
    font-size: 17px;
    min-width: 24px;
    min-height: 28px;
    padding: 1px;
  }
  .realm-pan {
    gap: 2px;
  }
  .realm-pan button {
    padding: 5px 7px;
    font-size: 12px;
    min-height: 30px;
  }
  .game-title h1 {
    font-size: 17px;
  }
  .game-title span {
    font-size: 11px;
  }
  .detail-header h2 {
    font-size: 17px;
  }
}
.realm-settings {
  position: absolute;
  left: calc(50% + 29px);
  top: 65px;
  z-index: 4;
}
.realm-name {
  justify-content: center;
}
@media (max-width: 1100px) {
  .realm-settings {
    left: calc(50% + 25px);
    top: 56px;
  }
}
@media (max-width: 600px) {
  .realm-settings {
    left: calc(50% + 20px);
    top: 48px;
  }
}

.realm-emblem {
  transform: translateY(2px);
}
.realm-name {
  padding-top: 5px;
}

.realm-navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.turn-notice {
  font-size: 13px;
  line-height: 1.2;
  color: #dcc58b;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .realm-navigation {
    gap: 4px;
  }
  .turn-notice {
    font-size: 11px;
  }
}

.realm-navigation {
  align-self: end;
  margin-bottom: 16px;
}

/* Reusable parchment sits in front of the existing team crest; text stays live. */
.moves-ribbon[data-team] {
  background: none;
  filter: none;
  isolation: isolate;
}
.moves-ribbon::before,
.moves-ribbon::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.moves-ribbon::before {
  inset: 0 36%;
  z-index: 0;
  background: url("crest-elderwood-crimson-v2.png") center/contain no-repeat;
  filter: drop-shadow(0 1px 2px #0008);
}
.moves-ribbon[data-team="Sapphire"]::before {
  background-image: url("crest-briarwatch-sapphire-v2.png");
}
.moves-ribbon::after {
  inset: 0;
  z-index: 1;
  background: url("parchment-scroll-v2.png") center/contain no-repeat;
  transform: translateY(10%) scale(1.1, 0.78);
  transform-origin: 50% 40%;
}
.moves-ribbon .ribbon-art {
  z-index: 2;
  transform: translateY(6%);
}

.realm-settings {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.settings-label {
  font:
    11px/1.2 system-ui,
    sans-serif;
  color: #b5ae98;
  font-weight: 400;
}
@media (max-width: 600px) {
  .realm-settings {
    gap: 2px;
  }
  .settings-label {
    font-size: 9px;
  }
}

.moves-ribbon[data-team] {
  top: -12px;
}
@media (max-width: 600px) {
  .moves-ribbon[data-team] {
    top: -8px;
  }
  .realm-navigation {
    margin-bottom: 16px;
  }
}

.realm-navigation .turn-notice {
  order: -1;
}

#encounter.cinematic-duel {
  width: min(1000px, 96vw);
  max-width: 96vw;
  max-height: 94dvh;
  padding: 16px;
  overflow: auto;
  background: #111d1c;
  color: #eadab5;
  border: 1px solid #c8b27b;
  border-radius: 14px;
}
#encounter.cinematic-duel h2 {
  font: 22px Georgia;
  margin: 0 0 8px;
}
#encounter.cinematic-duel p {
  font-size: 13px;
  line-height: 1.5;
}
#encounter.cinematic-duel #defenderChoices {
  display: block;
}
#encounter.cinematic-duel iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280/795;
  border: 0;
  border-radius: 8px;
}
#encounter::backdrop {
  background: #020810e8;
}
#encounterExit {
  margin-top: 10px;
}

.discovery-video-placeholder {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid #786d50;
  border-radius: 10px;
  background: #0b1511;
}
.discovery-video-placeholder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.38);
}
.discovery-video-placeholder span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #e9d29c;
  font: 20px Georgia;
}
.scene-caption {
  background: #0c1712;
  padding: 12px;
  border-left: 3px solid #bba36d;
  color: #f2e5c9;
}
#discoveryScene {
  width: min(760px, 94vw);
}

/* Full-realm artwork shares the playable views' responsive character tray. */
#realmDialog {
  width: min(1660px, 98vw);
  max-width: 98vw;
  height: 94dvh;
  max-height: 94dvh;
  padding: 16px;
  overflow: hidden;
}
#realmDialog[open] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#realmDialog header {
  flex: none;
  margin: 0;
  gap: 12px;
}
#realmDialog h2 {
  font-size: 22px;
  margin: 0;
}
.realm-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.realm-overview-layout > section {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  align-self: start;
}
#realmDialog #realmCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 5/3;
  object-fit: contain;
  cursor: crosshair;
}
#realmStatus {
  font-size: 12px;
  margin: 8px 0;
}
#realmControls {
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 1100px) {
  #realmDialog {
    overflow: auto;
    height: auto;
  }
  .realm-overview-layout {
    grid-template-columns: minmax(0, 1fr);
    flex: none;
  }
  #realmControls {
    overflow: visible;
  }
  #realmControls #gameControls {
    height: auto;
    overflow: visible;
  }
  #realmDialog h2 {
    font-size: 18px;
  }
}
@media (max-width: 600px) {
  #realmDialog {
    padding: 8px;
  }
  #realmDialog header {
    align-items: center;
  }
  #realmDialog h2 {
    font-size: 15px;
  }
  #returnBoard {
    padding: 6px;
    font-size: 12px;
  }
  .realm-overview-layout {
    gap: 8px;
  }
}

.realm-explore-hint {
  margin: 0 0 10px;
  color: #dcc58b;
  font-size: 13px;
  line-height: 1.4;
}

.roster button[aria-pressed="true"] {
  outline: 3px solid #ffe39b;
  outline-offset: 1px;
}

#trapSetupPanel { position:sticky; top:0; z-index:3; padding:10px; margin-bottom:10px; background:#142d26; border:1px solid #dcc58b; border-radius:7px; font-size:13px; }
#trapSetupPanel[hidden] { display:none; }
#trapSetupPanel p { margin:7px 0; line-height:1.4; }
#trapSetupReady { width:100%; }
#trapHandoff { box-sizing:border-box; position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; border:0; padding:24px; background:#102219; color:#eee9d8; }
#trapHandoff[open] { display:block; }
#trapHandoff::backdrop { background:#102219; }
#trapHandoff>div { position:relative; top:calc(25dvh - 24px); max-width:640px; margin:0 auto; padding-bottom:24px; text-align:center; }
#trapHandoff p { line-height:1.5; }

canvas#closeup,
canvas#world,
#realmCanvas {
  filter: contrast(1.16);
}

/* Match the overview: zoom action in the header above the character column. */
#detailDialog .detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 12px;
}
#detailDialog .detail-header #closeDetail {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.3;
  flex: none;
}
#detailDialog .detail-header #closeDetail svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
@media (max-width: 600px) {
  #detailDialog .detail-header #closeDetail {
    padding: 6px 9px;
    font-size: 12px;
  }
}

.main-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
}
.main-zoom-action {
  display: flex;
  justify-content: flex-end;
  flex: none;
}
.main-zoom-action #openRealm {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.3;
}
.main-zoom-action #openRealm svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.main-sidebar > #gameControls {
  flex: 1;
  height: auto;
  min-height: 0;
}
@media (max-width: 1100px) {
  .main-sidebar {
    display: contents;
  }
  .main-zoom-action {
    order: -1;
    grid-row: 1;
  }
  .layout > section {
    order: 0;
    grid-row: 2;
  }
  .main-sidebar > #gameControls {
    order: 1;
    grid-row: 3;
    flex: none;
    width: 100%;
    overflow: visible;
  }
}
@media (max-width: 600px) {
  .main-zoom-action #openRealm {
    padding: 6px 9px;
    font-size: 12px;
  }
}
/* One persistent toolbar and character tray for every map scale. */
.map-wrap > canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 5/3;
  object-fit: contain;
}
.map-wrap > [hidden] {
  display: none !important;
}
.realm-toolbar {
  height: 130px;
  grid-template-columns: minmax(0, 1fr) 250px minmax(0, 1fr);
}
.realm-navigation {
  align-self: start;
  margin: 0;
  gap: 12px;
  height: 130px;
  position: relative;
  padding-top: 4px;
}
.realm-navigation .moves-ribbon[data-team] {
  position: relative;
  top: 42px;
  left: auto;
  transform: none;
  margin: -3px 0 0;
  width: 230px;
  flex: none;
}
.realm-navigation .realm-pan {
  margin: 0;
}
.realm-emblem {
  align-self: end;
  height: 108px;
}
.realm-emblem #next,
.realm-emblem #nextZoom {
  position: absolute;
  top: 58px;
  right: calc(50% + 37px);
  left: auto;
  transform: none;
  white-space: nowrap;
  padding: 7px 9px;
  font-size: 12px;
  z-index: 4;
}
.realm-emblem button:disabled {
  opacity: 0.38;
  cursor: default;
}
.realm-explore-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid #baa57680;
  border-radius: 7px;
  background: #102219de;
  color: #f1dfb1;
  text-align: center;
  pointer-events: none;
  z-index: 4;
}
#realmCanvas {
  cursor: crosshair;
}
@media (min-width: 1101px) {
  .realm-emblem {
    padding-left: 58px;
  }
  .realm-emblem img {
    left: calc(50% + 29px);
    transform: translateX(-50%);
  }
  .realm-emblem .realm-settings {
    left: calc(50% + 58px);
  }
  .realm-emblem #next,
  .realm-emblem #nextZoom {
    right: calc(50% + 8px);
  }
}
@media (max-width: 1100px) {
  .realm-toolbar {
    height: 142px;
    grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
  }
  .realm-navigation {
    height: 142px;
  }
  .realm-navigation .moves-ribbon[data-team] {
    width: 195px;
  }
  .realm-emblem {
    height: 102px;
  }
  .realm-emblem #next,
  .realm-emblem #nextZoom {
    font-size: 10px;
    padding: 5px;
    right: calc(50% + 31px);
    top: 49px;
    white-space: normal;
    width: 76px;
  }
  .realm-explore-hint {
    font-size: 11px;
    bottom: 8px;
  }
}
@media (max-width: 600px) {
  .realm-toolbar {
    height: 170px;
    grid-template-columns: minmax(0, 1fr) 136px minmax(0, 1fr);
  }
  .realm-navigation {
    height: 170px;
  }
  .realm-navigation .moves-ribbon[data-team] {
    width: 150px;
  }
  .realm-emblem {
    height: 112px;
  }
  .realm-emblem .realm-name {
    font-size: 13px;
  }
  .realm-emblem #next,
  .realm-emblem #nextZoom {
    top: 87px;
    right: auto;
    left: 0;
    width: 88px;
    padding: 4px;
    font-size: 10px;
    white-space: nowrap;
  }
  .realm-emblem .realm-settings {
    left: calc(50% + 15px);
    top: 52px;
  }
  .settings-label {
    display: none;
  }
}
.realm-emblem #next,
.realm-emblem #nextZoom {
  border: 2px solid #ffe39b;
  background: #182a22;
  color: #ffe39b;
  border-radius: 6px;
  box-shadow: 0 2px 5px #0005;
}
.realm-emblem button[data-exhausted="true"][data-team="Crimson"] {
  background: #813345;
}
.realm-emblem button[data-exhausted="true"][data-team="Sapphire"] {
  background: #254e7b;
}
@media (max-width: 1100px) {
  .layout {
    position: relative;
  }
  .main-zoom-action {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 6;
  }
}
@media (max-width: 600px) {
  .realm-toolbar {
    height: 210px;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    padding-top: 106px;
    box-sizing: border-box;
  }
  .realm-navigation {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 106px;
    width: 150px;
  }
  .realm-emblem {
    height: 104px;
    padding-left: 40px;
  }
  .realm-emblem img {
    left: calc(50% + 20px);
    transform: translateX(-50%);
  }
  .realm-emblem #next,
  .realm-emblem #nextZoom {
    left: auto;
    right: calc(50% + 7px);
    top: 44px;
    white-space: normal;
    width: 62px;
    font-size: 10px;
  }
  .realm-emblem .realm-settings {
    left: calc(50% + 42px);
    top: 49px;
  }
  .main-zoom-action #openRealm {
    padding: 5px;
    font-size: 10px;
    max-width: 100px;
  }
  .main-zoom-action #openRealm svg {
    width: 13px;
    height: 13px;
  }
}
.map-wrap #realmCanvas,
.map-wrap #closeup,
.map-wrap #world {
  width: 100%;
  height: auto;
  max-height: none;
  max-width: none;
  aspect-ratio: 5/3;
}
main[data-map-view="realm"] #movesRibbon {
  visibility: hidden;
}

/* All zoom levels occupy the same map bounds. */
.map-wrap #world,
.map-wrap #closeup,
.map-wrap #realmCanvas {
  margin: 0;
}

#mapZoomOut {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #182a22;
  color: #ffe39b;
  border: 2px solid #ffe39b;
  border-radius: 6px;
  box-shadow: 0 2px 5px #0005;
  font-size: 14px;
}
#mapZoomOut svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
@media (max-width: 1100px) {
  #mapZoomOut {
    top: 7px;
    right: 7px;
    padding: 6px 8px;
    font-size: 12px;
  }
}
@media (max-width: 600px) {
  #mapZoomOut {
    top: 5px;
    right: 5px;
    padding: 4px 6px;
    font-size: 11px;
  }
  #mapZoomOut svg {
    width: 14px;
    height: 14px;
  }
}

/* View actions belong to the shared map header, never the character column. */
.realm-toolbar,
.realm-navigation {
  height: 174px;
}
.realm-navigation #openRealm {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.3;
  order: 0;
  flex: none;
}
.realm-navigation #openRealm svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.realm-navigation .realm-pan {
  order: 1;
}
.realm-navigation .moves-ribbon {
  order: 2;
}
main[data-map-view="realm"] .realm-toolbar,
main[data-map-view="realm"] .realm-navigation {
  height: 130px;
}
main[data-map-view="realm"] .realm-pan,
main[data-map-view="realm"] #movesRibbon {
  display: none;
}
main[data-map-view="realm"] #openRealm {
  margin-top: auto;
  margin-bottom: 14px;
}
#realmHint {
  top: 12%;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
#realmStatus {
  margin: 0;
  font-size: 12px;
}
#dismissRealmHint {
  flex: none;
  background: transparent;
  border: 0;
  color: #ffe39b;
  padding: 0 3px;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}
#realmCanvas {
  cursor: zoom-in;
}
button,
.realm-settings,
#openRealm,
#mapZoomOut {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
@media (max-width: 1100px) {
  .realm-toolbar,
  .realm-navigation {
    height: 180px;
  }
  .realm-navigation #openRealm {
    font-size: 12px;
    padding: 5px 8px;
  }
  main[data-map-view="realm"] .realm-toolbar,
  main[data-map-view="realm"] .realm-navigation {
    height: 142px;
  }
}
@media (max-width: 600px) {
  .realm-toolbar {
    height: 246px;
    padding-top: 142px;
  }
  .realm-navigation {
    height: 142px;
  }
  .realm-navigation #openRealm {
    font-size: 10px;
    padding: 4px 6px;
  }
  main[data-map-view="realm"] .realm-toolbar {
    height: 170px;
    padding-top: 66px;
  }
  main[data-map-view="realm"] .realm-navigation {
    height: 66px;
  }
  main[data-map-view="realm"] #openRealm {
    margin-top: 4px;
    margin-bottom: 0;
  }
  #realmHint {
    top: 8%;
    padding: 6px 8px;
    gap: 6px;
    width: 90%;
    box-sizing: border-box;
  }
  #realmStatus {
    font-size: 11px;
  }
}

main[data-map-view="board"] .realm-navigation #openRealm,
main[data-map-view="detail"] .realm-navigation #openRealm {
  display: none;
}

/* Shared placement/exploration toast sits above center at every screen size. */
#realmHint {
  top: 1.5%;
  transform: translate(-50%, -50%);
}
/* Compact header: navigation remains available through map exploration. */
.realm-navigation .realm-pan {
  display: none;
}
main[data-map-view] .realm-toolbar {
  height: 110px;
}
main[data-map-view] .realm-navigation {
  height: 110px;
  justify-content: flex-end;
}
.realm-navigation .moves-ribbon[data-team] {
  margin: 0;
}
@media (max-width: 1100px) {
  main[data-map-view] .realm-toolbar,
  main[data-map-view] .realm-navigation {
    height: 106px;
  }
}
@media (max-width: 600px) {
  main[data-map-view] .realm-toolbar {
    height: 180px;
    padding-top: 76px;
  }
  main[data-map-view] .realm-navigation {
    height: 76px;
    justify-content: center;
  }
  main[data-map-view="realm"] .realm-toolbar {
    height: 150px;
    padding-top: 46px;
  }
  main[data-map-view="realm"] .realm-navigation {
    height: 46px;
  }
}

/* One central turn action beneath the active crest and parchment. */
#nextZoom { display: none !important; }
main[data-map-view] .realm-navigation { justify-content: flex-start; gap: 2px; padding-top: 0; }
.realm-navigation .moves-ribbon[data-team] { width: 226px; height: 76px; margin: -3px 0 0 0; }
.realm-navigation #next { position: static; order: 3; flex: none; margin: 0; padding: 7px 14px; font-size: 13px; line-height: 1.3; border: 2px solid #ffe8a6; background: #142d26; color: #ffe8a6; white-space: nowrap; box-shadow: 0 2px 6px #0006; }
main[data-map-view="realm"] #openRealm { margin-top: 12px; margin-bottom: 10px; }
@media (min-width: 1101px) { .realm-emblem { padding-left: 0; } }
@media (max-width: 600px) {
 main[data-map-view] .realm-toolbar { height: 208px; padding-top: 104px; }
 main[data-map-view] .realm-navigation { height: 104px; }
 .realm-navigation .moves-ribbon[data-team] { width: 196px; height: 70px; }
 .realm-navigation #next { font-size: 12px; padding: 6px 10px; }
 main[data-map-view="realm"] .realm-toolbar { height: 190px; padding-top: 86px; }
 main[data-map-view="realm"] .realm-navigation { height: 86px; }
 main[data-map-view="realm"] #openRealm { margin-top: 8px; margin-bottom: 6px; }
}

@media (min-width: 601px) { main[data-map-view] .realm-toolbar, main[data-map-view] .realm-navigation { height: 96px; margin-top: 0px; } }

/* Center names on their shields; settings do not participate in alignment. */
.realm-emblem { padding-left: 0; padding-right: 0; }
.realm-emblem img { left: 50%; transform: translateX(-50%); }
.realm-emblem .realm-name { justify-content: center; }
.realm-emblem .realm-settings { position: absolute; left: calc(50% + 36px); }
.realm-navigation .moves-ribbon::before { transform: scale(1.5); transform-origin: 50% 200%; }
.realm-navigation #next { translate:0 -2px; transform:none; transform-origin:center; position:relative; z-index:3; }
@media (max-width: 1100px) { .realm-emblem .realm-settings { left: calc(50% + 31px); } }
@media (max-width: 600px) { .realm-emblem .realm-settings { left: calc(50% + 26px); } }

/* Trial: team-colored action above a parchment overlay at the map edge. */
.realm-navigation #next[data-team="Crimson"] { background: #813345; color: #fff0c5; border-color: #f5c989; }
.realm-navigation #next[data-team="Sapphire"] { background: #254e7b; color: #fff0c5; border-color: #f5c989; }
.realm-navigation #next[data-exhausted="true"] { box-shadow: 0 0 0 1px #ffe39b, 0 0 14px #ffd06a99; font-weight: 700; }
.realm-navigation .moves-ribbon { --ribbon-drop: 84px; pointer-events: none; }
.realm-navigation .moves-ribbon::after { transform: translateY(calc(10% + var(--ribbon-drop))) scale(1.1, .78); }
.realm-navigation .moves-ribbon .ribbon-art { transform: translateY(calc(6% + var(--ribbon-drop))); pointer-events: none; }
@media (max-width: 600px) { .realm-navigation .moves-ribbon { --ribbon-drop: 178px; } }

/* Trial: parchment heading above the shield; action overlaps the map. */
main:not([data-map-view="realm"]) .realm-navigation { pointer-events: none; }
main:not([data-map-view="realm"]) .realm-navigation .moves-ribbon::before { transform: translateY(54px) scale(1.65); }
main:not([data-map-view="realm"]) .realm-navigation .moves-ribbon::after { transform: translateY(-13px) scale(1.23, .9); }
main:not([data-map-view="realm"]) .realm-navigation .moves-ribbon .ribbon-art { transform: translateY(-17px); }
main:not([data-map-view="realm"]) .realm-navigation #next { position: absolute; top: 96px; left: 50%; padding: 4px 9px; translate:-50% 0; transform:none; pointer-events: auto; }
@media (max-width: 600px) {
 main:not([data-map-view="realm"]) .realm-navigation .moves-ribbon::before { transform: translateY(112px) scale(1.5); }
 main:not([data-map-view="realm"]) .realm-navigation .moves-ribbon::after { transform: translateY(52px) scale(1.1, .78); }
 main:not([data-map-view="realm"]) .realm-navigation .moves-ribbon .ribbon-art { transform: translateY(48px); }
 main:not([data-map-view="realm"]) .realm-navigation #next { top: 220px; }
}

/* Align the end-turn icon and label without changing button placement. */
.realm-navigation #next { display: inline-flex; align-items: center; justify-content: center; }

.realm-navigation #next[hidden] { display: none !important; }
/* Focused private setup: instructions, four placement cards, then characters. */
#setupPieces[hidden], #teamCatalog[hidden], #teamSizeLabel[hidden], .party-heading[hidden] { display:none; }
#setupPieces { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0 0 14px; }
#setupPieces button, #teamCatalog button { min-width:0; padding:3px; border:1px solid; border-radius:5px; background:#213127; color:#eee9d8; }
#setupPieces img, #teamCatalog img { display:block; width:100%; height:auto; }
#setupPieces span { display:block; font-size:11px; line-height:1.3; padding-top:4px; }
#teamCatalog button > span:not(.strength-visual) { display:block; font-size:12px; line-height:1.4; padding:5px 2px; }
#setupPieces button:disabled { opacity:.5; }
#setupPieces button[aria-pressed="true"] { opacity:1; outline:3px solid #ffe39b; outline-offset:1px; }
#teamCatalog button[aria-pressed="true"] { outline:3px solid #ffe39b; outline-offset:1px; }
#teamCatalog { margin:0 0 16px; }
.setup-actions { display:flex; flex-wrap:wrap; gap:8px; }
.setup-actions button { flex:1; min-width:0; }
.setup-actions button[hidden] { display:none; }
#teamSizeLabel { display:block; margin:20px 0; }
#matchTeamSize { margin-left:10px; padding:8px; }
/* Team selection uses the main map area, with chosen cards in the sidebar. */
#teamSelectionArea[hidden], #teamSelected[hidden] { display:none; }
#teamSelectionArea { position:fixed; inset:0; z-index:30; box-sizing:border-box; overflow:auto; padding:18px; background:#0d1714; color:#eee9d8; border:1px solid #617467; border-radius:6px; }
#teamSelectionArea header { margin:0 0 16px; }
#teamSelectionArea h2 { margin:0 0 5px; font:700 24px Georgia,serif; color:#e6d09d; }
#teamSelectionArea p { margin:0; font:14px/1.5 system-ui; }
#teamCatalog { display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:12px; }
#teamCatalog button { align-self:start; cursor:pointer; }
#teamCatalog button:disabled { opacity:.45; cursor:default; }
#teamCatalog button[aria-pressed="true"] { box-shadow:0 0 13px #ffe39b66; background:#3d4326; }
#teamSelected { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
#teamSelected figure { margin:0; min-width:0; padding:3px; border:1px solid; border-radius:5px; background:#213127; }
#teamSelected img { display:block; width:100%; height:auto; }
#teamSelected figcaption { padding:4px 2px; font:12px/1.4 system-ui; }
@media (max-width:600px) { #teamSelectionArea { padding:12px; } #teamCatalog { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }
.map-wrap:has(#teamSelectionArea:not([hidden])) { min-height:min(720px,calc(100dvh - 170px)); }
#teamSelectionArea header { position:sticky; top:-18px; z-index:2; margin:-18px -18px 14px; padding:16px 18px; background:#0d1714; border-bottom:1px solid #4a584b; }
#teamMainCount { color:#e6d09d; font-weight:600; }
@media (max-width:600px) { #teamSelectionArea header { top:-12px; margin:-12px -12px 12px; padding:12px; } }
#sharedGameBar { display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; padding:12px 16px; margin:0 0 12px; border:1px solid #607568; border-radius:6px; background:#15291f; color:#e6d09d; }
#sharedGameBar strong { flex:1; color:#f4eddc; }
#sharedLobby { box-sizing:border-box; width:min(520px,calc(100vw - 24px)); max-height:95dvh; border:1px solid #b6a372; border-radius:9px; padding:28px; background:#112219; color:#eee9d8; }
#sharedLobby::backdrop { background:#07140fef; }
#sharedLobby h1 { margin:0 0 12px; color:#e6d09d; font-family:Georgia,serif; }
#sharedLobby p { line-height:1.5; }
#sharedLobby label { display:block; margin:24px 0 8px; }
#sharedLobby input { box-sizing:border-box; display:block; margin-top:8px; width:100%; padding:12px; background:#20382a; border:1px solid #819280; border-radius:4px; color:#fff; letter-spacing:3px; text-transform:uppercase; }
#sharedLobby button { width:100%; margin:5px 0; padding:12px; }
#sharedLobbyMessage { min-height:1.5em; color:#efce86; }

/* Keep the drawer tab available while giving the header's space back to the map. */
#sharedGameBar { position:relative; display:block; flex-shrink:0; padding:0; margin-bottom:18px; }
.game-header-content { display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; padding:12px 16px; }
#sharedGameBar.is-collapsed { height:0; border-width:0 0 1px; border-radius:0; }
#gameHeaderToggle { position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:5; display:flex; align-items:center; justify-content:center; width:48px; height:23px; min-height:0; padding:0; border:1px solid #607568; border-top:0; border-radius:0 0 8px 8px; background:#15291f; color:#e6d09d; cursor:pointer; }
#gameHeaderToggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#sharedGameBar.is-collapsed #gameHeaderToggle svg { transform:rotate(180deg); }
#gameHeaderToggle:hover { background:#294334; }
#gameHeaderToggle:focus-visible { outline:2px solid #ffe39b; outline-offset:2px; }

#discoveryBenefits { border-top:1px solid #607568; margin:18px 0; padding-top:12px; }
#discoveryBenefits h3 { margin:0 0 8px; color:#e6d09d; }
#discoveryBenefits .discovery-balance { font-weight:bold; color:#ffe39b; }
#discoveryBenefits .strength-allocation { padding:8px 0; border-bottom:1px solid #60756855; font-size:14px; gap:12px; }
#discoveryBenefits .strength-allocation button { flex-shrink:0; min-height:36px; padding:6px 12px; }
#discoveryScene .discovery-video-placeholder { width:100%; height:150px; aspect-ratio:auto; overflow:hidden; }
#discoveryContinue { background:#294334; justify-self:start; }
#discoveryScene>h2 { margin-bottom:.3em; }
#discoveryScene>h2+p { margin-top:.7em; }
@media (min-width:850px) {
 #discoveryScene { width:min(1000px,90vw); }
 #discoveryScene[open] { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:0 26px; }
 #discoveryScene>h2,#discoveryScene>p,#discoveryContinue { grid-column:1 / -1; }
 #discoverySceneText { grid-column:1; grid-row:3; }
 #discoveryBenefits { grid-column:2; grid-row:3; margin:0 0 18px; padding:0 0 0 22px; border-top:0; border-left:1px solid #607568; }
}


@keyframes end-turn-pulse {
  0%, 100% { scale:1.12; filter:brightness(1); box-shadow:0 0 0 1px #ffe39b, 0 0 6px #ffd06a44; }
  50% { scale:1.35; filter:brightness(1.3); box-shadow:0 0 0 1px #ffe39b, 0 0 28px #ffd06add; }
}
#next[data-exhausted="true"]:not(:disabled):not([hidden]),
#nextZoom[data-exhausted="true"]:not(:disabled):not([hidden]) {
  animation:end-turn-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce) {
  #next[data-exhausted="true"]:not(:disabled):not([hidden]),
  #nextZoom[data-exhausted="true"]:not(:disabled):not([hidden]) { animation:none; scale:1.12; }
}

#trapHandoff .handoff-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }

.strength-visual { position:relative; display:inline-block; vertical-align:middle; line-height:0; isolation:isolate; }
.card-visual { display:block; width:100%; margin-top:12px; }
.token-visual { margin:12px auto 6px; }
.strength-visual .value-badge { position:absolute; z-index:2; display:flex!important; align-items:center; justify-content:center; box-sizing:border-box; border-radius:50%; border:1px solid #e5c789; font:bold 14px/1 system-ui; color:#fff; background:#080808; text-align:center; }
.strength-visual .natural-value { background:#8e233c; width:28%; aspect-ratio:1; bottom:5%; right:5%; }
.strength-visual[data-team="Sapphire"] .natural-value { background:#194c86; border: solid 1px goldenrod;}
.card-visual .natural-value { width:19.6%; top:1.5%; left:3.5%; bottom:auto; right:auto; border:0; }
.strength-visual .bonus-value,.strength-visual .penalty-value { min-width:28px; height:28px; padding:0 3px; top:0; transform:translateY(-45%); }
.strength-visual .bonus-value { right:0; }
.strength-visual .penalty-value { left:0; }
.character-caption { display:block; line-height:1.4; margin:6px 0; }
.character-caption>span,.character-caption>small { display:block; }
#squareTokens .token-visual { width:112px; }
#squareTokens .token-visual img.token { width:100%; margin:0; }
.duel-token-visual { width:86px; margin-right:12px; }
.duel-token-visual img { width:100%; margin:0; }
.revealed-token-visual { width:170px; }
.revealed-token-visual img { width:100%; }
@media(max-width:420px){#squareTokens .token-visual{width:88px}.revealed-token-visual{width:125px}}

.token-visual .natural-value { width:22px; left:80%; top:80%; right:auto; bottom:auto; border:0; transform:translate(-50%,-50%); }
.card-visual { margin-top:22px; }
.card-visual .bonus-value,.card-visual .penalty-value { top:-10px; transform:translateY(-50%); }

/* Sampled from the original card strength medallion. */
.strength-visual.card-visual[data-team] .natural-value { background:#070b0c; }

.game-exit-row { display:flex; justify-content:flex-end; flex:none; }
#exitGame { display:inline-flex; align-items:center; gap:10px; padding:4px 8px; color:#fff; background:transparent; border:0; box-shadow:none; font:600 15px/1 system-ui; letter-spacing:1px; }
#exitGame img { width:17px; height:38px; object-fit:contain; }
#exitGame:hover { opacity:.8; }
#exitGame:focus-visible { outline:2px solid #fff; outline-offset:3px; }
#sharedGameDetails { display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:#e6d09d; }
#sharedGameDetails strong,#sharedGameDetails>span { width:100%; }
#sharedGameDetails button { padding:5px 8px; font-size:12px; }
@media(max-width:1100px){.game-exit-row{order:-2}#sharedGameDetails{order:0}}

.strength-visual.token-visual[data-team="Crimson"] .natural-value { background:#3b101b; border: solid 1px #e6d09d; }

.setup-actions #setupAuto { flex:1 0 100%; padding:9px 12px; }

#trapSetupPanel .setup-actions { flex-direction:column; flex-wrap:nowrap; }
#trapSetupPanel .setup-actions button { flex:none; width:100%; padding:9px 12px; }

/* Team selection has one realm identity, above its private setup instructions. */
main.selecting-team .realm-toolbar { display:none; }
#setupRealm { display:flex; flex-direction:column; align-items:center; gap:6px; margin:0 0 18px; }
#setupRealm h2 { margin:0; color:#e3ce98; font:20px Georgia,serif; }
#setupRealm img { display:block; width:80px; height:103px; object-fit:contain; }
main.selecting-team .map-wrap { margin-top:0; }

/* One net adjustment, reflected across from the artwork's natural strength. */
.strength-visual .adjustment-value { background:#080808; color:#fff; aspect-ratio:1; padding:0; font-size:12px; }
.card-visual .adjustment-value { width:19.9%; top:116px; right:6px; }
.token-visual .adjustment-value { width:22.4%; left:10%; top:20%; transform:translate(-50%,-50%); }
.strength-allocation .allocation-token-visual { width:52px; flex:0 0 52px; margin:0; }
.strength-allocation .allocation-token { display:block; width:100%; height:auto; }
.strength-allocation .character-caption { flex:1; min-width:0; margin:0; }
.strength-allocation .value-badge { font-size:9px; }
.strength-allocation button { flex-shrink:0; white-space:nowrap; }

/* Signed adjustments need more room on the small assignment portraits. */
.strength-allocation .allocation-token-visual .adjustment-value {
 width:22px;
 height:22px;
 min-width:22px;
 font-size:11px;
 line-height:1;
 white-space:nowrap;
}

#squareTokens .token-visual .natural-value {
    width: 32px;
    right: -3px;
    top: 85px;
    left: auto;
    bottom: auto;
    border: 0;
    transform: translate(-50%, -50%);
}

#discoveryClose { position:fixed; z-index:10; display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid #dcc58b; border-radius:50%; background:#182a22; color:#fff; font:28px/1 system-ui; box-shadow:0 2px 8px #0008; }
#discoveryClose:hover { background:#314839; }
#discoveryClose:focus-visible { outline:2px solid #fff; outline-offset:3px; }

#discoveryClose svg { display:block; flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

/* A new room is waiting for players, not a paused, pre-filled game. */
#sharedWaiting { position:absolute; inset:0; z-index:35; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; box-sizing:border-box; background:#112219; border:1px solid #607568; border-radius:6px; text-align:center; }
#sharedWaiting h2 { color:#e6d09d; font:26px Georgia,serif; margin:0 0 16px; }
#sharedWaiting p { max-width:640px; line-height:1.6; }
main.shared-awaiting .map-wrap > canvas { visibility:hidden; }
main.shared-awaiting .realm-toolbar { visibility:hidden; }


#sharedStatusToast { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:90; box-sizing:border-box; width:max-content; max-width:calc(100vw - 32px); padding:14px 24px; border:1px solid #ffe39b; border-radius:9px; background:#182a22f5; color:#fff2c6; font:500 17px/1.4 system-ui; text-align:center; box-shadow:0 4px 22px #0009,0 0 16px #ffd06a44; pointer-events:none; }
#sharedStatusToast.status-arrival { animation:shared-status-arrival .6s ease-out; }
@keyframes shared-status-arrival { from { opacity:0; transform:translate(-50%,-10px); } to { opacity:1; transform:translate(-50%,0); } }
html.game-loading #sharedStatusToast { visibility:hidden; }
@media(max-width:600px) { #sharedStatusToast { font-size:14px; padding:12px 16px; top:8px; } }
@media(prefers-reduced-motion:reduce) { #sharedStatusToast.status-arrival { animation:none; } }

/* An invitation prioritizes joining; a fresh visit prioritizes creating. */
#sharedLobby .lobby-primary { padding:16px 18px; font-size:17px; font-weight:700; color:#fff4dc; border:1px solid #e6ce91; box-shadow:0 2px 10px #0005; }
#sharedLobby #sharedCreate.lobby-primary { background:#7b2038; }
#sharedLobby #sharedJoin.lobby-primary { background:#245b91; }
#sharedLobby .lobby-primary:hover { filter:brightness(1.18); }
#sharedLobby .lobby-secondary { padding:8px 12px; font-size:13px; color:#c6cfc7; background:transparent; border-color:#526652; box-shadow:none; }
#sharedLobby .lobby-secondary:hover { background:#20382a; color:#fff4dc; }
#sharedLobby[data-entry="guest"] label { margin-top:18px; }
#sharedLobby hr { border:0; border-top:1px solid #526652; margin:20px 0 12px; }

/* Keep the initial waiting notice with the room invitation message. */
#sharedWaiting #sharedStatusToast { position:static; transform:none; margin-top:24px; max-width:100%; flex-shrink:0; }
#sharedWaiting #sharedStatusToast.status-arrival { animation:none; }

/* The invitation is the action; waiting is plain status text below the heading. */
#sharedWaiting #sharedStatusToast { margin:0 0 12px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#sharedWaitingActions { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:24px; max-width:100%; }
#sharedWaitingActions #sharedInvite { padding:14px 24px; border:1px solid #ffe39b; border-radius:9px; background:#182a22; color:#fff2c6; font:600 17px/1.4 system-ui; box-shadow:0 4px 22px #0009,0 0 16px #ffd06a44; }
#sharedWaitingActions #sharedInvite:hover { background:#294235; }
#sharedWaitingActions #sharedSolo { padding:8px 14px; font-size:13px; color:#bac7be; background:transparent; border:1px solid #607568; box-shadow:none; }
#sharedWaitingActions #sharedSolo:hover { color:#fff2c6; border-color:#607568; }

/* Status notices sit inside the play area, below the realm controls. */
.map-wrap > #sharedStatusToast { position:absolute; top:54px; left:50%; max-width:calc(100% - 32px); }
#sharedStatusToast.status-warning { background:#7b2038; border-color:#f3a6ac; color:#fff4e6; box-shadow:0 4px 22px #0009,0 0 18px #a5254555; }
@media(max-width:600px) { .map-wrap > #sharedStatusToast { top:48px; } }

#sharedStatusToast .status-warning-icon { display:inline-block; width:24px; height:24px; margin-right:10px; vertical-align:middle; color:#ffe39b; }

/* Room actions belong in the waiting area; board notices carry the status. */
#sharedGameDetails > #sharedInvite,
#sharedGameDetails > #sharedSolo { display:none; }
#sharedGameDetails > #sharedStatus { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#trapSetupPanel.placement-needed:not([hidden]) { border-color:#66d9bc; outline:2px solid #66d9bc; outline-offset:1px; animation:setup-panel-glow 1.7s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes setup-panel-glow {
  0%,100% { box-shadow:0 0 7px 1px #65dfbf44,inset 0 0 4px #66d9bc22; }
  50% { box-shadow:0 0 30px 7px #65dfbfcc,inset 0 0 13px #66d9bc66; }
}
@media(prefers-reduced-motion:reduce) {
  #trapSetupPanel.placement-needed:not([hidden]) { animation:none; box-shadow:0 0 7px #65dfbf66; }
}

/* Temporary death treatment until the skeleton artwork is ready. */
.defeated-card { position:relative; display:inline-block; width:100%; filter:grayscale(1); }
.defeated-card > .strength-visual { width:100%; }
.defeated-card-cross { position:absolute; inset:0; width:100%; height:100%; color:#eee; filter:drop-shadow(0 1px 2px #000); pointer-events:none; z-index:10; }
#roster button.defeated-character { filter:grayscale(1); opacity:.7; }

/* Narrated discovery films retain their approved widescreen composition. */

#discoveryScene .discovery-film video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#080e0b; border-radius:7px; }
#discoveryScene.has-discovery-film #discoveryBenefits { border-left:0; border-top:1px solid #607568; margin:18px 0; padding:12px 0 0; }

.beta-explore { margin-top:12px; }
#explorePicker { margin-top:8px; border:1px solid #617562; border-radius:6px; background:#233a2b; }
#explorePicker>summary { padding:12px; cursor:pointer; }
#exploreSelected { display:inline-flex; align-items:center; gap:7px; }
#exploreOptions { max-height:280px; overflow-y:auto; padding:4px; border-top:1px solid #617562; }
#exploreOptions button { display:flex; align-items:center; gap:7px; width:100%; text-align:left; border:0; background:transparent; padding:10px; }
#exploreOptions button:hover,#exploreOptions button[aria-pressed="true"] { background:#37513c; }
#exploreOptions button:focus-visible,#explorePicker>summary:focus-visible { outline:2px solid #e9c567; outline-offset:-2px; }
.beta-site-shield,.beta-site-legend svg { width:15px; height:17px; fill:#d9b751; stroke:#ffe5a1; stroke-width:1; flex:none; }
.beta-site-legend { display:flex; align-items:center; gap:6px; margin-top:8px; color:#d5c89e; }

/* Discovery films and narrative sit beside findings and assignments. */
#discoveryDetails { min-width:0; }
#discoveryDetails #discoveryBenefits { border-left:0; border-top:1px solid #607568; margin:14px 0 0; padding:12px 0 0; }
#discoveryFindings h3 { margin:0 0 8px; }
#discoveryDetails p { font-size:14px; line-height:1.45; margin:8px 0; }
#discoveryDetails .strength-allocation { gap:12px; padding:8px 0; font-size:13px; }
#discoveryDetails .allocation-token-visual { width:48px; flex:0 0 48px; margin:0 5px 0 8px; overflow:visible; }
#discoveryDetails .strength-allocation button { padding:5px 9px; min-height:32px; font-size:13px; }
@media (min-width:850px) {
 #discoveryScene { width:min(1440px,94vw); max-height:88dvh; }
 #discoveryScene[open],#discoveryScene.has-discovery-film[open] { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr) auto; gap:0 24px; overflow:hidden; }
 #discoverySceneText { grid-column:1; grid-row:3; min-width:0; min-height:0; max-height:calc(88dvh - 190px); overflow-y:auto; }
 #discoveryDetails { grid-column:2; grid-row:3; min-height:0; max-height:calc(88dvh - 190px); overflow-y:auto; padding-left:20px; border-left:1px solid #607568; }
 #discoveryContinue { grid-column:1 / -1; grid-row:4; margin-top:16px; }
 #discoveryScene .scene-caption { margin-bottom:0; }
}
@media (max-width:849px) {
 #discoveryDetails { margin-top:20px; }
}

#discoveryDetails .allocation-token-visual { height:48px; }
#discoveryDetails .allocation-token { width:100%; height:48px; object-fit:contain; }
#discoveryDetails .strength-allocation { min-height:68px; padding:10px 0; }
#discoveryDetails .allocation-token-visual .natural-value { left:88%; top:88%; font-size:11px; }
/* 100-point build: setup controls live with the map; purchasing is a main modal. */
#teamSelectionArea { width:min(1160px,96vw); height:92dvh; max-width:96vw; max-height:94dvh; margin:auto; border:1px solid #cbb071; box-shadow:0 24px 100px #000b; }
#teamSelectionArea:not([open]) { display:none; }
#teamSelectionArea::backdrop { background:#07110cdb; backdrop-filter:blur(5px); }
#teamSelectionArea header { top:-18px; }
#teamSelectionArea .build-eyebrow { font-size:10px; letter-spacing:.16em; color:#b9aa80; margin-bottom:7px; }
#buildBudget { display:block; font-size:clamp(22px,3vw,34px); color:#ffe3a1; margin:9px 0 3px; }
.build-tabs { display:flex; gap:10px; margin-top:14px; justify-content: center;}
.build-tabs button { flex:1; padding:12px; background:#1a3228; color:#eddec0; border:1px solid #64785c; }
.build-tabs button[aria-selected="true"] { background:#dcc18a; color:#14251c; border-color:#ffe7b5; }
#teamCatalog[hidden], #provisionsDepot[hidden], #teamSelected[hidden] { display:none!important; }
#teamCatalog { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); }
#provisionsDepot { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:6px 0 24px; }
.provision-card { min-width:0; border:1px solid #52684e; border-radius:10px; padding:10px; background:#1b2c22; }
.provision-card img { width:100%; height:auto; border-radius:6px; }
.provision-card h3 { font:700 20px Georgia,serif; color:#ead4a2; margin:12px 0 8px; }
#teamSelectionArea .provision-card p { margin:8px 0; font-size:13px; min-height:40px; }
.depot-controls { display:flex; gap:8px; }
.depot-controls button { flex:1; }
#buildFooter { position:sticky; bottom:-18px; margin:14px -18px -18px; padding:14px 18px; background:#12241c; border-top:1px solid #8c805d; z-index:3; }
#buildFooter .setup-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
#trapSetupReady { background:#e6cd94; color:#17291c; padding:12px 30px; font-weight:800; }
#trapSetupReady:disabled { opacity:.45; }
#gameControls > #trapSetupPanel { position:relative; top:auto; flex:none; width:100%; box-sizing:border-box; margin:4px 0 12px; z-index:5; }
#trapSetupPanel #setupPieces { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:10px 0; }
#trapSetupPanel #setupPieces button { width:100%; min-width:0; }
#trapSetupPanel #setupPieces img { width:100%; height:auto; max-height:none; object-fit:contain; }
#trapSetupPanel #setupPieces span { font-size:13px; }
#trapSetupPanel .setup-actions { flex-direction:column; flex-wrap:nowrap; }
#trapSetupPanel .setup-actions button { width:100%; }
.inventory-actions { display:flex; flex-direction:column; gap:4px; }
.strength-allocation { flex-wrap:wrap; }
@media(max-width:800px) { #provisionsDepot { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
 #teamSelectionArea { width:98vw; max-width:98vw; padding:12px; }
 #teamSelectionArea header { top:-12px; }
 #buildFooter { bottom:-12px; margin:12px -12px -12px; padding:10px 12px; }
 .build-tabs { gap:6px; }.build-tabs button { font-size:11px; padding:10px 4px; }
 #provisionsDepot { gap:8px; }.provision-card { padding:7px; }.provision-card h3 { font-size:17px; }
 .depot-controls { flex-wrap:wrap; }
}

/* Keep the complete map reachable when the viewport is shorter than the board. */
.layout > section { overflow:auto; }

/* Keep the complete map reachable when the viewport is shorter than the board. */
.layout > section { overflow:auto; }

/* Compact setup progress stays with the map or the active build dialog. */
#setupProgress { display:flex; align-items:center; justify-content:center; gap:20px; flex:none; box-sizing:border-box; width:100%; margin:0 0 8px; padding:4px 6px; list-style:none; color:#aab5ad; font-size:13px; }
#setupProgress[hidden] { display:none; }
.layout > section > #setupProgress { margin-top:8px; }
#setupProgress li { display:flex; align-items:center; gap:8px; min-width:0; }
#setupProgress li + li::before { content:'→'; color:#89978b; margin-right:12px; }
.setup-step-number { display:inline-flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; border:1px solid #65796b; border-radius:50%; font:bold 21px Georgia,serif; }
#setupProgress [aria-current="step"] { color:#ffe39b; font-weight:700; }
#setupProgress [aria-current="step"] .setup-step-number { color:#17291c; background:#ffe39b; border-color:#ffe39b; }
#setupProgress .complete .setup-step-number { border-color:#c2ac73; color:#dcc58b; }
@media(max-width:600px) {
 #setupProgress { gap:8px; font-size:11px; }
 #setupProgress li { gap:5px; }
 #setupProgress li + li::before { display:none; }
 .setup-step-number { width:28px; height:28px; font-size:19px; }
}

#gameLoadingContinue {
  margin-top: 18px;
}

/* Placement stays in the realm map; close-up navigation remains available. */
main.setup-active[data-map-view="realm"] #openRealm { display:none; }

#trapHandoff #trapHandoffDeviceNote { margin:18px 0 0; font-size:14px; color:#aab5ad; }

#trapHandoffDeviceNote h3 { margin:0 0 6px; font-size:17px; font-weight:500; color:#d8dfd9; }
#trapHandoffDeviceNote p { margin:0; }

#teamCatalog .catalog-cost { display:block; margin-top:4px; font-size:14px; font-weight:700; }

#trapHandoff .handoff-actions { align-items:center; flex-direction:column; }
#trapHandoffStart { margin-bottom:12px; }
#trapHandoffStart, #gameLoading #gameLoadingContinue {
 padding:10px 20px; min-height:0; font-size:16px; font-weight:400;
 background:#294334; color:#fff; border:1px solid #dcc58b; border-radius:5px; box-shadow:none;
}
#trapHandoffStart:hover, #gameLoading #gameLoadingContinue:hover { background:#344b36; }
#trapHandoffStart:focus-visible, #gameLoading #gameLoadingContinue:focus-visible { outline:3px solid #7ed8f7; outline-offset:3px; }

/* Setup wizard: gold marks the current step; teal invites an explicit next action. */
#setupProgress { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px 14px; padding:8px 4px; margin:0 0 12px; }
#setupProgress[hidden] { display:none; }
#setupProgress .wizard-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; margin:0; list-style:none; }
#setupProgress li { display:block; }
#setupProgress li + li::before { content:none; }
#setupProgress svg,.build-tabs svg { width:30px; height:30px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#setupProgress .wizard-step { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:64px; padding:10px 14px; border:1px solid #52695c; border-radius:12px; background:#14271f; color:#c4cfc6; font:600 15px/1.35 system-ui; text-align:left; box-shadow:none; animation:none; }
#setupProgress .wizard-step small { display:block; margin-bottom:4px; font:600 10px/1.2 system-ui; letter-spacing:.13em; opacity:.8; }
#setupProgress .wizard-step svg { width:36px; height:36px; }
#setupProgress .wizard-step[aria-current="step"] { border-color:#e3c17b; color:#ffe3a1; background:#3a3523; box-shadow:inset 0 0 0 1px #e3c17b33; }
#setupProgress button:disabled { opacity:.4; cursor:default; }
#setupProgress .wizard-edge { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 12px; background:transparent; border:0; color:#c6d2c8; font-size:12px; }
#setupProgress .wizard-edge svg { width:17px; height:17px; }
#setupProgress .wizard-next { color:#b7fff0; border-color:#66d9bc; background:#153c33; animation:wizard-next-glow 1.4s ease-in-out infinite; }
#setupProgress .wizard-edge.wizard-next { background:transparent; border-radius:6px; }
#setupProgress button:focus-visible { outline:3px solid #f6e3a8; outline-offset:3px; }
#setupProgress #wizardHint { grid-column:1/-1; width:100%; max-width:none; justify-self:stretch; box-sizing:border-box; margin:0; padding:6px 12px; text-align:center; font:500 16px/1.5 system-ui; color:#d2dfd5; }
@keyframes wizard-next-glow { 0%,100% { box-shadow:0 0 3px #65dfbf33; } 50% { box-shadow:0 0 17px 2px #65dfbf88; } }
.build-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0; }
#buildAutoSlot { flex:none; }
#buildAutoSlot #setupAuto { width:auto; padding:7px 11px; font-size:12px; background:transparent; border:1px solid #52695c; color:#bfcbbf; }
#teamSelectionArea .build-eyebrow { display:none; }
#teamSelectionArea .build-tabs { gap:24px; margin-top:16px; border-bottom:1px solid #496051; }
#teamSelectionArea .build-tabs button { display:flex; align-items:center; justify-content:center; gap:9px; flex:0 1 auto; padding:10px 10px 12px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:#aebeaf; font-size:15px; }
#teamSelectionArea .build-tabs button[aria-selected="true"] { color:#ffe3a1; border-bottom-color:#e3c17b; background:transparent; }
.build-tabs svg { width:23px; height:23px; }
@media(prefers-reduced-motion:reduce) { #setupProgress .wizard-next { animation:none; box-shadow:0 0 0 2px #66d9bc; } }
@media(max-width:600px) {
 #setupProgress { gap:7px; }
 #setupProgress .wizard-steps { gap:5px; }
 #setupProgress .wizard-step { flex-direction:column; gap:5px; padding:8px 4px; min-height:64px; font-size:11px; text-align:center; border-radius:8px; }
 #setupProgress .wizard-step svg { width:27px; height:27px; }
 #setupProgress .wizard-edge { flex-direction:column; font-size:10px; padding:10px 8px; }
 .build-title-row { flex-wrap:wrap; }
 #teamSelectionArea .build-tabs { gap:8px; }
 #teamSelectionArea .build-tabs button { flex:1; padding:10px 3px; font-size:12px; gap:5px; }
 #teamSelectionArea header { position:static; }
}

/* Keep placement focused on its wizard; show only the active realm in the sidebar. */
main.setup-active .realm-toolbar .realm-emblem { display:none; }
main.setup-active .realm-toolbar { height:auto; min-height:0; grid-template-columns:1fr; }
main.setup-active:not([data-map-view="detail"]) .realm-toolbar { display:none; }
#setupRealmIdentity { display:flex; align-items:center; justify-content:center; gap:14px; padding:0 8px 10px; }
#setupRealmIdentity[hidden] { display:none; }
#setupRealmIdentity img { width:52px; height:68px; object-fit:contain; filter:drop-shadow(0 2px 3px #0008); }
#setupRealmIdentity h2 { margin:0; color:#e3ce98; font:24px Georgia,serif; }
@media(max-width:600px) { #setupProgress #wizardHint { font-size:14px; padding:4px; } }

#teamCatalog .catalog-strength { display:block; white-space:nowrap; }

/* Center the build summary independently of the small auto-fill action. */
#teamSelectionArea .build-title-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin:6px 0; }
#buildTitle { grid-column:2; text-align:center; margin:6px 0; }
#buildAutoSlot { grid-column:3; justify-self:end; }
#teamMainCount { width:100%; max-width:none; text-align:center; margin:6px 0; }
#buildBudget { display:block; text-align:center; margin:6px 0 12px; font-size:15px; font-weight:400; color:#e6d09d; }
#buildRemaining { font-size:18px; font-weight:700; color:#ffe3a1; white-space:nowrap; }
@media(max-width:700px) {
 #teamSelectionArea .build-title-row { grid-template-columns:1fr; gap:4px; }
 #buildTitle,#buildAutoSlot { grid-column:1; justify-self:center; }
}

.deploy-reserve-trap { display:flex; box-sizing:border-box; width:100%; align-items:center; justify-content:flex-start; gap:8px; padding: 8px 10px; }
.deploy-reserve-trap img { width:20px; height:20px; flex:none; }
.deploy-reserve-trap span {
  font-size: 13px;
}

#setupProgress #wizardPlacement svg { width:40px; height:40px; }
@media(max-width:600px) { #setupProgress #wizardPlacement svg { width:30px; height:30px; } }

#unspentPointsConfirm { box-sizing:border-box; width:min(510px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:28px; border:1px solid #d6b870; border-radius:16px; background:#14271f; color:#e8ddbb; text-align:center; box-shadow:0 20px 80px #000b,0 0 28px #dfb65425; }
#unspentPointsConfirm::backdrop { background:#06100bbd; backdrop-filter:blur(3px); }
#unspentPointsConfirm h2 { margin:12px 0; font:700 24px/1.3 Georgia,serif; color:#ffe3a1; }
#unspentPointsConfirm p { margin:0 0 22px; font-size:15px; line-height:1.6; }
#unspentPointsConfirm svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
#unspentPointsConfirm .unspent-icon svg { width:42px; height:42px; color:#e3c17b; }
#unspentPointsConfirm .unspent-actions { display:flex; flex-wrap:wrap; gap:10px; }
#unspentPointsConfirm .unspent-actions button { display:flex; flex:1 1 180px; align-items:center; justify-content:center; gap:8px; padding:12px; border:1px solid #d6b870; background:#263d30; color:#ffe3a1; }
#unspentContinue { margin-top:16px; padding:10px 16px; border:1px solid #657366; background:transparent; color:#d1ddce; }
#unspentPointsConfirm button:focus-visible { outline:2px solid #8ce6cd; outline-offset:3px; }

#unspentPointsConfirm .unspent-actions button[hidden] { display:none; }

/* Placement-specific full-map guidance uses the next-action cyan. */
#realmHint { border:1px solid #66d9bc; outline:1px solid #66d9bc; background:#153c33; background: rgb(21 60 51 / 65%); color:#b7fff0; animation:wizard-next-glow 1.4s ease-in-out infinite; }
#realmHint #realmStatus { font-size:14px; font-weight:500; }
#realmHint #dismissRealmHint { color:#b7fff0; }
@media(prefers-reduced-motion:reduce) { #realmHint { animation:none; box-shadow:0 0 10px #65dfbf66; } }

/* Build step shares the placement page shell and sidebar. */
main.selecting-team .map-wrap { display:none !important; }
#teamSelectionArea { position:relative; inset:auto; z-index:auto; width:100%; max-width:none; height:auto; max-height:none; min-height:0; flex:1 1 auto; margin:0; border:0; border-radius:0; box-shadow:none; }
#teamSelectionArea:not([hidden]) { display:block; }
#teamSelectionArea[hidden] { display:none; }
#buildSummary { display:flex; align-items:baseline; justify-content:center; gap:12px; flex-wrap:wrap; margin:8px 0 12px; font-size:14px; color:#e6d09d; }
#buildSummary #buildBudget, #buildSummary #teamMainCount { width:auto; margin:0; font-size:14px; }
#buildSummary #buildBudget { white-space:nowrap; }
#buildSummary #buildRemaining { font-size:18px; font-weight:700; color:#b7fff0; }
main.selecting-team #trapSetupPanel { animation:none; box-shadow:none; outline:none; border-color:#496051; }
@media(max-width:1100px) {
 #buildSummary { gap:4px; flex-direction:column; align-items:center; }
 #buildSummary .build-summary-divider { display:none; }
}

#teamSelected:not([hidden]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
#selectedTeamSidebar[hidden] { display:none; }
#selectedTeamSidebar h3 { margin:12px 0; font-size:17px; }
#selectedTeamAutoSlot { margin-top:14px; }
#selectedTeamAutoSlot button { width:100%; padding:10px; }
#setupAutoConfirm { max-width:min(500px,90vw); padding:24px; background:#15291f; color:#eee9d8; border:1px solid #66d9bc; border-radius:12px; box-shadow:0 12px 60px #0009; }
#setupAutoConfirm::backdrop { background:#07110cbb; }
#setupAutoConfirm h2 { color:#ffe3a1; font-size:22px; }
.auto-confirm-actions { display:flex; flex-wrap:wrap; gap:10px; }
.auto-confirm-actions button { padding:10px 14px; }
#autoRemaining { border-color:#66d9bc; color:#b7fff0; }

/* The setup board fits below the wizard instead of scrolling beneath it. */
main.setup-active:not(.selecting-team) .layout > section { overflow:hidden; }

/* Consistent medium-weight text for map guidance and status notices. */
#realmStatus, .realm-explore-hint, .route-cost, #turnStartHint { font-weight:500; }

/* Shared supplies above compact recipient rows. */
.supply-picker { display:grid; grid-template-columns:1fr; gap:6px; margin:10px 0; }
.supply-picker button { display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; text-align:left; font-size:13px; }
.supply-picker button[aria-pressed="true"] { border-color:#66d9bc; background:#153c33; color:#b7fff0; }
.recipient-prompt { display:grid; grid-template-columns:1fr; gap:4px 8px; margin:12px 0; padding:10px; border:1px solid #66d9bc; border-radius:6px; color:#b7fff0; animation:recipient-prompt-glow 1s ease-in-out infinite; }
.recipient-prompt strong { font-size:14px; font-weight:500; }
.recipient-prompt small { grid-column:1; }
.recipient-prompt button { grid-column:2; grid-row:1/3; padding:4px 7px; font-size:12px; }
:is(#discoveries, #panelProvisions, #discoveryDetails) .provision-recipient, #discoveryBenefits .provision-recipient { position:relative; display:flex; flex-wrap:nowrap; gap:8px; padding:10px 6px; margin:7px 0; border:1px solid #496051; border-radius:7px; min-height:70px; background:#1b2c22; }
.provision-recipient .recipient-label { flex:1; min-width:0; font-size:13px; line-height:1.35; }
.recipient-label small { display:block; margin-top:4px; font-size:11px; color:#c8d7cd; }
:is(#discoveries, #panelProvisions, #discoveryDetails) .provision-recipient .allocation-token-visual { width:40px; flex:0 0 40px; height:40px; margin:0 4px 0 0; }
:is(#discoveries, #panelProvisions, #discoveryDetails) .provision-recipient .allocation-token { height:40px; }
:is(#discoveries, #panelProvisions, #discoveryDetails) .provision-recipient .recipient-health, #discoveryBenefits .provision-recipient .recipient-health { padding:5px; min-height:28px; font-size:11px; }
.provision-recipient.awaiting-recipient { cursor:pointer; border-color:#66d9bc; }
.provision-recipient.awaiting-recipient:hover { background:#25483c; }
.provision-recipient.provision-applied { animation:provision-applied-pulse 1.8s ease-out; }
.applied-message { position:absolute; inset:0; display:grid; place-items:center; border-radius:6px; background:#153c33e8; color:#b7fff0; font-size:14px; font-weight:500; pointer-events:none; animation:provision-applied-message 1.8s ease-out forwards; }
@keyframes recipient-prompt-glow { 50% { box-shadow:0 0 12px #66d9bc88; } }
@keyframes provision-applied-pulse { 0%,100% { transform:scale(1); } 25% { transform:scale(1.025); border-color:#b7fff0; box-shadow:0 0 14px #66d9bcaa; } }
@keyframes provision-applied-message { 0%,35% { opacity:1; } 100% { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .recipient-prompt,.provision-recipient.provision-applied { animation:none; } .applied-message { animation:none; } }

#handoffRealmIdentity { display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 0 24px; }
#handoffRealmIdentity[hidden] { display:none; }
#handoffRealmIdentity img { object-fit:contain; filter:drop-shadow(0 3px 5px #0007); }
#handoffRealmIdentity h2 { margin:0; font:28px Georgia,serif; color:#e3ce98; }

.supply-picker button img { width:20px; height:20px; flex:none; }

#roster .character-caption { text-align:center; }

/* Lead gameplay's next action with the same cyan guidance as setup. */
/* No !important on the animated properties: !important would block the keyframes from changing them. */
.route-cost[data-kind="turn-start"] {
 border:1px solid #66d9bc; outline:1px solid #66d9bc;
 background:rgb(21 60 51 / 65%); color:#b7fff0;
 font-weight:500; animation:turn-start-pulse 1.4s ease-in-out infinite;
}
/* At its largest and brightest the prompt also gets a slightly darker, more opaque background. */
@keyframes turn-start-pulse {
 /* The label is centred by an inline translateX(-50%), so the scale must be animated inside that same transform to grow from its centre. */
 0%,100% { transform:translateX(-50%) scale(1); box-shadow:0 0 3px #65dfbf33; background:rgb(21 60 51 / 65%); border-color:#66d9bc; outline-color:#66d9bc; color:#b7fff0; }
 50% { transform:translateX(-50%) scale(1.04); box-shadow:0 0 17px 2px #65dfbf88; background:rgb(16 50 42 / 76%); border-color:#d9fff6; outline-color:#d9fff6; color:#fff; }
}
@media(prefers-reduced-motion:reduce) {
 .route-cost[data-kind="turn-start"] { animation:none; border:1px solid #66d9bc !important; background:rgb(21 60 51 / 65%) !important; color:#b7fff0 !important; box-shadow:0 0 10px #65dfbf66 !important; }
}

/* Compact, scrollable field guide beside Exit. */
.game-exit-row { gap: 14px; align-items: center; }
#gameOverview { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; color:#eee9d8; background:transparent; border:1px solid #718376; border-radius:5px; font:500 14px/1.3 system-ui; }
#gameOverview img { width:22px; height:22px; }
#gameOverview:hover { border-color:#66d9bc; background:#1b3930; }
#gameOverview:focus-visible,.overview-close:focus-visible { outline:2px solid #66d9bc; outline-offset:3px; }
#overviewDialog { width:min(880px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 40px); padding:0; border:1px solid #728476; border-radius:12px; color:#eee9d8; background:#12261d; box-shadow:0 20px 80px #0009; overflow:hidden; }
#overviewDialog[open] { display:flex; flex-direction:column; }
#overviewDialog::backdrop { background:rgb(3 12 9 / 78%); }
.overview-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px 18px; border-bottom:1px solid #eee9d826; flex:none; }
.overview-eyebrow { margin:0 0 6px; font:500 12px/1.4 system-ui; color:#b7fff0; letter-spacing:.07em; }
#overviewTitle { margin:0; font-size:25px; }
.overview-close { flex:none; padding:8px 12px; }
.overview-content { overflow:auto; padding:0 26px 26px; min-height:0; }
.overview-lead { color:#d8c995; font-size:16px; line-height:1.6; }
.overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.overview-grid section { padding:16px; border:1px solid #eee9d81c; border-radius:8px; background:#ffffff03; }
.overview-grid h3 { margin:0 0 10px; color:#b7fff0; font-size:18px; }
.overview-grid p { margin:8px 0 0; font:400 14px/1.6 system-ui; }
.overview-wide { grid-column:1 / -1; }
.overview-classes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px; }
.overview-classes div { padding:8px; background:#ffffff05; border-radius:4px; }
.overview-classes strong,.overview-classes span { display:block; font:500 14px/1.5 system-ui; }
.overview-classes span { font-size:12px; font-weight:400; color:#c2cabc; }
.overview-supplies { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:600px) { .overview-header { padding:16px; align-items:flex-start; } #overviewTitle { font-size:21px; } .overview-content { padding:0 16px 16px; } .overview-grid,.overview-supplies { grid-template-columns:1fr; } .overview-classes { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* A brief hand-drawn introduction to the two build tabs. */
#teamBuildTab, #depotBuildTab { position:relative; overflow:visible; }
.build-tabs .build-tab-guide { position:absolute; inset:-7px -10px; width:calc(100% + 20px); height:calc(100% + 14px); pointer-events:none; overflow:visible; z-index:2; fill:none; color:#66d9bc; }
.build-tab-guide path { fill:none; stroke:#66d9bc; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray:100; stroke-dashoffset:100; opacity:0; filter:drop-shadow(0 0 3px #66d9bc99); animation:build-tab-circle 1.7s ease-out var(--guide-delay) both; }
@keyframes build-tab-circle { 0% { opacity:0; stroke-dashoffset:100; } 8% { opacity:1; } 48%,72% { opacity:1; stroke-dashoffset:0; } 100% { opacity:0; stroke-dashoffset:0; } }
@media(prefers-reduced-motion:reduce) { .build-tab-guide path { animation-name:build-tab-circle-still; } }
@keyframes build-tab-circle-still { 0%,75% { opacity:1; stroke-dashoffset:0; } 100% { opacity:0; stroke-dashoffset:0; } }