/* Final HUD layout: fixed-size controls, readable labels, no empty offline HUD. */
.in-battle #game-dock,
.seat-hud:not(.is-town) .seat-nav [data-open="map"],
.seat-hud:not(.is-town) .seat-nav [data-open="bag"] {
  display: none;
}
[hidden] {
  display: none !important;
}
.disconnected #game-hud,
.disconnected dialog {
  visibility: hidden;
  pointer-events: none;
}
#connection-panel {
  position: fixed;
  z-index: 30;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 32px));
  padding: 28px;
  border-radius: 18px;
  background: #fffdf3f5;
  border: 1px solid #c3cdb1;
  box-shadow: 0 12px 50px #304e3c30;
  text-align: center;
  color: #304e3c;
}
#connection-panel h2 {
  font-size: 22px;
  margin: 0 0 14px;
}
#connection-panel p {
  font-size: 15px;
  line-height: 1.8;
}
#connection-retry {
  border: 1px solid #758c60;
  border-radius: 9px;
  padding: 12px 20px;
  background: #e7efda;
}
.ui-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  pointer-events: none;
}
.portrait .ui-icon,
.companion-portrait .ui-icon {
  width: 30px;
  height: 30px;
}
.invite .ui-icon,
.seat-nav .ui-icon,
.split-overview .ui-icon {
  width: 18px;
  height: 18px;
}
.single-actions > button {
  flex: 0 0 76px;
  min-width: 76px;
  height: 86px;
  padding: 7px 5px;
}
.single-actions > button span {
  white-space: nowrap;
  line-height: 1.3;
  font-size: 14px;
}
.single-actions > button small {
  position: static;
  font-size: 13px;
  line-height: 1.2;
  color: inherit;
}
.single-actions {
  bottom: 112px;
  width: max-content;
  max-width: calc(100% - 24px);
  gap: 8px;
}
.single-actions .mini-health {
  flex: 0 0 150px;
  width: 150px;
}
.game-dock {
  bottom: 20px;
}
.field-strip {
  bottom: 216px;
}
.seat-bottom > button {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.seat-bottom > button small {
  flex-basis: auto;
  background: none;
  padding: 0;
  color: inherit;
}
.seat-bottom .ui-icon {
  width: 18px;
  height: 18px;
}
[data-action="skill"]:disabled {
  opacity: 0.65;
}
[data-action="ultimate"]:disabled {
  opacity: 0.85;
  background: #ece8d1;
}
.quest-panel,
.party-panel {
  overflow-wrap: anywhere;
}
.toast:empty,
.wave-banner:empty,
.resources:empty,
.mini-health:empty,
.field-strip:empty {
  display: none;
}
@media (max-width: 900px) {
  .single-actions {
    bottom: 108px;
  }
  .single-actions .mini-health {
    position: absolute;
    bottom: 96px;
    right: 0;
    height: 45px;
    width: 190px;
    padding: 6px 10px;
  }
  .single-actions .mini-health span {
    display: inline;
    margin-left: 7px;
  }
  .single-actions .mini-health b {
    max-width: 110px;
  }
  .game-dock {
    bottom: 16px;
  }
  .field-strip {
    bottom: 254px;
  }
  .joystick {
    bottom: 210px;
  }
}
@media (max-width: 600px) {
  .single-actions {
    bottom: 118px;
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
    justify-content: flex-end;
    gap: 5px;
  }
  .single-actions > button {
    min-width: 0;
    flex: 1 1 0;
    max-width: 70px;
    height: 78px;
    padding: 6px 2px;
  }
  .single-actions > button span {
    font-size: 13px;
  }
  .single-actions > button[data-action="return"] {
    display: flex;
  }
  .in-town .single-actions > button[data-action="return"] {
    display: none;
  }
  .single-actions > button small {
    font-size: 12px;
  }
  .single-actions .mini-health {
    bottom: 88px;
  }
  .game-dock {
    bottom: 12px;
    gap: 5px;
  }
  .game-dock button {
    min-height: 42px;
  }
  .in-battle .game-dock {
    grid-template-columns: repeat(3, 1fr);
  }
  .in-battle .single-actions {
    bottom: 67px;
  }
  .field-strip {
    bottom: 275px;
  }
  .in-battle .field-strip {
    bottom: 219px;
  }
  .joystick {
    bottom: 210px;
  }
  .in-battle .joystick {
    bottom: 166px;
  }
  .party-panel {
    width: 126px;
  }
  .party-panel .invite {
    font-size: 13px;
    padding: 9px 7px;
    line-height: 1.5;
  }
  .quest-panel {
    width: min(196px, calc(100% - 164px));
    padding: 12px;
  }
  .quest-panel h2 {
    font-size: 16px;
    line-height: 1.6;
  }
  .quest-panel p {
    font-size: 13px;
    line-height: 1.6;
  }
  .seat-bottom .ui-icon {
    display: none;
  }
  .seat-bottom > button {
    font-size: 12px;
    padding: 8px 6px;
    min-height: 36px;
  }
}

.disconnected #toast,
.disconnected #wave-banner {
  display: none;
}
/* v0.3.3: contextual village controls and desktop keycaps. */
.single-actions > button,
.seat-bottom > button {
  position: relative;
}
.single-actions kbd,
.seat-bottom kbd {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .single-actions > button kbd,
  .seat-bottom > button kbd {
    display: block;
    position: absolute;
    top: -10px;
    right: 5px;
    padding: 1px 5px;
    border: 1px solid #a2ad8d;
    border-radius: 5px;
    background: #fffef4;
    color: #3b5136;
    font: 600 11px/16px system-ui;
    white-space: nowrap;
    box-shadow: 0 1px 2px #304e3c20;
  }
}
.single-actions > button.ready,
.seat-bottom > button.ready {
  border: 2px solid #778a36;
  background: #f8efb7;
  color: #344c22;
  box-shadow:
    0 0 0 3px #e5d37655,
    0 3px 12px #384b2520;
}
.single-actions > button.ready .ui-icon {
  stroke-width: 2.2;
}
.single-actions > button[data-action="skill"].ready span {
  color: #344c22;
}
#field-strip button[data-open="result"],
.seat-nav button[data-open="result"] {
  color: #fffef0;
  background: #345740;
  border: 2px solid #fff5ce;
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 8px #21372635;
  white-space: nowrap;
}
#field-strip button[data-open="result"]:hover {
  background: #24452e;
}
#settings-button .ui-icon {
  width: 20px;
  height: 20px;
}
.game-dock button span {
  white-space: nowrap;
}
.in-shop .quest-panel {
  display: none;
}
.in-shop .field-strip {
  background: #fff9e9ed;
}
@media (max-width: 600px) {
  .in-town .game-dock,
  .game-dock {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .game-dock button span {
    font-size: 13px;
  }
  header .top-right {
    gap: 5px;
    flex-shrink: 0;
  }
  header .icon-button {
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
  }
  header .brand {
    min-width: 0;
  }
  header .brand strong {
    font-size: 15px;
  }
  #field-strip button[data-open="result"] {
    font-size: 15px;
    padding: 10px 13px;
  }
}
.in-shop .field-strip,
.in-shop .field-strip b,
.in-shop .field-strip span {
  color: #344c32;
  opacity: 1;
}
.in-town .single-actions > button.shop-exit,
.seat-hud.is-town .seat-bottom > button.shop-exit {
  display: inline-flex;
}
@media (max-width: 600px) {
  .game-dock button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 60px;
  }
  .game-dock button .ui-icon {
    width: 21px;
    height: 21px;
  }
  .in-battle .game-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .in-battle .single-actions {
    bottom: 88px;
  }
  .in-battle .field-strip {
    bottom: 240px;
  }
}
#field-strip button[data-open="defense"],
.seat-nav button[data-open="defense"] {
  color: #fffef0;
  background: #345740;
  border: 2px solid #fff5ce;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}
.gear-card [data-progress="work-order"] {
  flex: 1 1 100%;
}
/* Frontier objectives stay compact, with the numbered poles matching the scene. */
#field-strip:has(.frontier-readout) {
  flex-wrap: wrap;
  width: min(460px, calc(100vw - 32px));
  white-space: normal;
  gap: 6px 14px;
}
.frontier-readout {
  flex-basis: 100%;
  display: grid;
  gap: 6px;
  text-align: center;
}
.frontier-readout > b {
  font-size: 15px;
  line-height: 1.4;
}
.pole-statuses {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
#field-strip .pole-status,
.seat-hud .pole-status {
  font-size: 14px;
  color: #fdf5db;
  background: #253d32;
  border: 1px solid #93a99a;
  border-radius: 5px;
  padding: 4px 6px;
  white-space: nowrap;
}
#field-strip .pole-status.active,
.seat-hud .pole-status.active {
  color: #bdf5dd;
  border-color: #85c9ad;
}
#field-strip .pole-status.threatened,
.seat-hud .pole-status.threatened {
  color: #fff3c7;
  border: 2px solid #f0bd69;
  padding: 3px 5px;
}
.seat-hud .frontier-readout {
  margin-top: 8px;
  max-width: 380px;
  background: #35533beb;
  color: #fff9df;
  padding: 8px;
  border-radius: 8px;
}
.region-frontier p,
.region-defense p {
  margin: 8px 0;
  font-size: 15px;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .frontier-readout > b {
    font-size: 14px;
  }
  .seat-hud .pole-status {
    font-size: 12px;
    padding: 3px;
  }
}
.pole-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#field-strip .pole-status b,
#field-strip .pole-status span,
.seat-hud .pole-status b,
.seat-hud .pole-status span {
  font-size: 14px;
  color: inherit;
}
.pole-arrow {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 600px) {
  #field-strip .pole-status,
  .seat-hud .pole-status {
    gap: 3px;
    padding-left: 3px;
    padding-right: 3px;
  }
  #field-strip .pole-status b,
  #field-strip .pole-status span,
  .seat-hud .pole-status b,
  .seat-hud .pole-status span {
    font-size: 13px;
  }
}
/* Field controls occupy the space freed by removing the town navigation. */
.in-battle:not(.split-play) .single-actions {
  bottom: max(20px, env(safe-area-inset-bottom));
}
.in-battle .single-actions > button[data-action="return"] {
  display: flex;
}
.in-battle .field-strip {
  bottom: calc(124px + env(safe-area-inset-bottom));
}
@media (max-width: 900px) {
  .in-battle .field-strip {
    bottom: calc(180px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 600px) {
  .in-battle .field-strip {
    bottom: calc(208px + env(safe-area-inset-bottom));
  }
  .in-battle .joystick {
    bottom: calc(108px + env(safe-area-inset-bottom));
  }
  .in-battle .quick-items {
    bottom: calc(158px + env(safe-area-inset-bottom));
  }
}

/* Clear first, explore second. The field-strip remains available after dismissal. */
.victory-card {
  position: fixed;
  z-index: 24;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 40px));
  box-sizing: border-box;
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  padding: 24px;
  border: 2px solid #c5ab63;
  border-radius: 22px;
  background: #fffdef;
  box-shadow: 0 14px 55px #203c3650;
  text-align: center;
  pointer-events: auto;
}
.victory-card[hidden] {
  display: none;
}
.victory-emblem {
  color: #b48b33;
  margin-bottom: 8px;
}
.victory-emblem .ui-icon {
  width: 38px;
  height: 38px;
}
.victory-card h2 {
  color: #354a34;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 20px;
  line-height: 1.4;
}
.victory-card button {
  display: block;
  text-align: center;
  width: 100%;
  min-height: 46px;
  font-size: 17px;
  white-space: normal;
}
.victory-card .primary {
  color: #fffdf0;
  background: #345740;
  border: 1px solid #345740;
  border-radius: 10px;
  padding: 12px;
  font-weight: 700;
}
.victory-card .victory-walk {
  margin-top: 14px;
  padding: 10px;
  color: #405438;
  background: #f0f2df;
  border: 1px solid #bdc7a5;
  border-radius: 10px;
}
.victory-card button:hover {
  filter: brightness(1.06);
  transform: none;
}
.split-play .victory-card {
  left: 25%;
  width: min(360px, calc(50vw - 24px));
  padding: 18px;
}
.split-play .victory-card[data-seat="1"] {
  left: 75%;
}
@media (max-height: 520px) {
  .victory-card {
    padding: 16px;
    top: 48%;
  }
  .victory-emblem {
    display: none;
  }
  .victory-card h2 {
    margin-bottom: 12px;
  }
}