/* Castle raid: Plonk's wood frame, pixel headings and faceted game art.
   Body text keeps the game's readable font. Scope button overrides by ID:
   the cozy skin otherwise forces every button to be round and brown. */
.castle-ui {
  --raid-text: #e2dac0;
  --raid-muted: #b0aa91;
  --raid-gold: #e3be72;
  --raid-line: #4b4939;
  --raid-pixel: 'Silkscreen', monospace;
  color: var(--raid-text);
  font: 13px/1.5 var(--ps1-font, system-ui, sans-serif);
  text-align: left;
  text-shadow: none;
}
.castle-ui *,
.castle-ui *::before,
.castle-ui *::after {
  box-sizing: border-box;
}
.castle-shade {
  position: fixed;
  inset: 0;
  z-index: 89;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #101510c9;
}
.castle-card {
  width: 600px;
  max-width: 100%;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 16px solid transparent;
  border-image: url('/cozy/frame-med.png') 16 / 16px / 0 stretch;
  background: #23251f;
  background-clip: padding-box;
  box-shadow:
    0 8px 0 #0e100c80,
    0 20px 60px #0007;
  scrollbar-color: #706444 #20221d;
  scrollbar-width: thin;
}
.castle-heading {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 148px;
  padding: 22px 24px;
  border-bottom: 2px solid #4c5142;
  background: #2c322a;
  overflow: hidden;
}
.castle-heading > div {
  position: relative;
  z-index: 1;
  max-width: 62%;
}
.castle-eyebrow {
  font: 10px/1.6 var(--raid-pixel);
  color: var(--raid-muted);
  letter-spacing: 0.4px;
}
.castle-eyebrow span {
  color: #69725f;
  padding: 0 4px;
}
.castle-ui h2 {
  margin: 8px 0 10px;
  font: 700 20px/1.25 var(--raid-pixel);
  color: var(--raid-gold) !important;
  text-shadow: 2px 2px #141910 !important;
  letter-spacing: -0.5px;
}
.castle-heading p {
  margin: 0;
  color: #c0c3ae;
  font-size: 12px;
  max-width: 230px;
}
.castle-art {
  position: absolute;
  right: -4px;
  bottom: 8px;
  width: 218px;
  height: auto;
}
.castle-body {
  padding: 18px 24px 20px;
}
.castle-icon {
  display: inline-block;
  width: 24px;
  height: 26px;
  flex: 0 0 auto;
  vertical-align: middle;
}
.castle-icon-art { display:inline-flex; align-items:center; justify-content:center; }
.castle-icon-art > .pui { width:100%; height:auto; aspect-ratio:1; vertical-align:0; }
.castle-facts {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 18px;
}
.castle-facts > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d4cfb6;
}
.castle-facts .castle-icon {
  width: 18px;
  height: 20px;
}
.castle-section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
  color: #cbc3a8;
  font: 11px/1.5 var(--raid-pixel);
}
.castle-section-label small {
  font: 11px/1.5 var(--ps1-font, system-ui, sans-serif);
  color: var(--raid-muted);
}
.castle-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
:is(#castleModal, #castleWatch, #raidReady) .castle-button,
#castleLeave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  margin: 0;
  cursor: pointer;
  color: #e2dac0 !important;
  background: #383b30 !important;
  border: 2px solid !important;
  border-color: #73755a #191e17 #191e17 #73755a !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 0 #10140e !important;
  font: 12px/1.4 var(--raid-pixel);
  text-shadow: 1px 1px #1a1f18 !important;
  transform: none !important;
  transition: none;
}
:is(#castleModal, #castleWatch, #raidReady) .castle-button:not(:disabled):hover,
#castleLeave:hover {
  background: #474c3c !important;
  filter: none !important;
}
:is(#castleModal, #castleWatch, #raidReady) .castle-button:not(:disabled):active,
#castleLeave:active {
  border-color: #191e17 #73755a #73755a #191e17 !important;
  box-shadow: none !important;
  transform: translateY(1px) !important;
}
:is(#castleModal, #castleWatch, #raidReady) .castle-button:focus-visible,
#castleLeave:focus-visible,
.castle-rules summary:focus-visible {
  outline: 2px solid #a9d9cf;
  outline-offset: 3px;
}
:is(#castleModal, #castleWatch, #raidReady) .castle-button:disabled {
  color: #979986 !important;
  background: #2c3027 !important;
  border-color: #434837 !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: not-allowed;
  filter: none !important;
}
:is(#castleModal, #castleWatch, #raidReady) .castle-primary:not(:disabled) {
  color: #f1dfb4 !important;
  background: #705232 !important;
  border-color: #b49b61 #3c2c1c #3c2c1c #b49b61 !important;
}
:is(#castleModal, #castleWatch, #raidReady) .castle-primary:not(:disabled):hover {
  background: #88633a !important;
}
#castleModal .castle-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 108px;
  padding: 12px 4px 10px;
  background: #2d322a !important;
  border-color: #535a46 #141a14 #141a14 #535a46 !important;
}
#castleModal .castle-choice > .castle-icon {
  width: 30px;
  height: 32px;
}
#castleModal .castle-choice b {
  font-size: 12px;
  font-weight: 400;
}
#castleModal .castle-choice small {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #c8bc8d;
  font: 12px/1.3 var(--ps1-font);
}
#castleModal .castle-choice small .castle-icon {
  width: 16px;
  height: 16px;
}
#castleModal .castle-choice.selected {
  background: #474530 !important;
  border-color: #d4b870 #756037 #756037 #d4b870 !important;
  color: #ffe3a0 !important;
}
#castleModal .castle-choice.selected:hover {
  background: #524e34 !important;
}
.castle-choice-mark {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
}
.selected .castle-choice-mark {
  background: #ead28d;
  box-shadow: 1px 1px #1d2117;
}
.castle-party-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 8px;
  gap: 10px;
}
.castle-party-heading > b {
  font: 11px/1.5 var(--raid-pixel);
}
.castle-party-heading > b span {
  color: var(--raid-gold);
  margin-left: 8px;
  white-space: nowrap;
}
.castle-party-heading small {
  color: var(--raid-muted);
  font-size: 12px;
}
.castle-party-heading strong {
  color: #cfdbb2;
  font-weight: 500;
}
.castle-members {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--raid-line);
}
.castle-members li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 61px;
  padding: 10px 0;
  border-bottom: 1px solid var(--raid-line);
}
.castle-member-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 38px;
  flex: 0 0 auto;
  background: #191e18;
  border: 1px solid #4a4e39;
}
.castle-member-avatar .castle-icon {
  width: 21px;
  height: 24px;
}
.castle-member-name {
  min-width: 0;
}
.castle-member-name > b {
  display: block;
  font-size: 13px;
  color: #f0e4c5;
  overflow-wrap: anywhere;
}
.castle-attempts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  color: var(--raid-muted);
  font-size: 11px;
}
.castle-staff {
  padding: 0 4px;
  border: 1px solid #726443;
  font: 8px/1.7 var(--raid-pixel);
  color: #d6bc81;
}
.castle-pips {
  display: inline-flex;
  gap: 3px;
}
.castle-pips i {
  display: block;
  width: 6px;
  height: 8px;
  background: #1c2018;
  border: 1px solid #66664b;
}
.castle-pips i.full {
  background: #bba26a;
  border-color: #d6c184;
}
.castle-status {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
  max-width: 42%;
  font-size: 11px;
  text-align: right;
  overflow-wrap: anywhere;
}
.castle-status .castle-icon {
  width: 12px;
  height: 14px;
}
.castle-ok {
  color: #b1c69a;
}
.castle-bad {
  color: #e0a18c;
}
.castle-open-slots {
  display: flex;
  gap: 5px;
  align-items: center;
  padding-top: 10px;
  color: var(--raid-muted);
  font-size: 11px;
}
.castle-open-slots i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 24px;
  border: 1px dashed #5f644e;
  font: 16px/1 var(--raid-pixel);
  color: #7e886b;
}
.castle-open-slots > span {
  margin-left: 4px;
}
.castle-reward-note {
  font-size: 12px;
  color: #c1bca7;
  line-height: 1.6;
  margin: 14px 0;
}
.castle-reason {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  margin: 12px 0;
  background: #3b3026;
  border-left: 2px solid #b18455;
  color: #e0b98c;
  font-size: 12px;
}
.castle-reason .castle-icon {
  width: 18px;
  height: 20px;
}
.castle-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.castle-actions > button {
  flex: 1;
  min-width: 0;
}
.castle-actions .castle-primary {
  flex: 1.6;
}
.castle-actions .castle-icon {
  width: 17px;
  height: 19px;
}
.castle-rules {
  margin-top: 15px;
  font-size: 11px;
  color: var(--raid-muted);
}
.castle-rules summary {
  width: fit-content;
  padding: 5px 0;
  cursor: pointer;
  color: #c1bca7;
}
.castle-rules p {
  margin: 8px 0;
}
.castle-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--raid-line);
  padding: 8px;
}
.castle-tiers b {
  display: block;
  color: #d5caa6;
  font-size: 10px;
}
.castle-locked {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--raid-line);
  color: #aea78b;
}
.castle-locked > .castle-icon {
  width: 28px;
  height: 30px;
  opacity: 0.65;
}
.castle-locked > .castle-icon:last-child {
  margin-left: auto;
  width: 15px;
  height: 17px;
}
.castle-locked b {
  font: 10px/1.6 var(--raid-pixel);
}
.castle-locked small {
  display: block;
  font-size: 11px;
  color: #979982;
}
.castle-result-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #c9c0a4;
  font-size: 12px;
  text-transform: capitalize;
}
.castle-result-meta > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.castle-result-meta > span + span {
  padding-left: 12px;
  border-left: 1px solid #5a5b45;
}
.castle-result-meta .castle-icon {
  width: 16px;
  height: 18px;
}
.castle-gold-earned {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 14px;
  border: 1px solid #736341;
  background: #343425;
  box-shadow: inset 0 0 0 3px #22261b;
}
.castle-gold-earned > .castle-icon {
  width: 38px;
  height: 38px;
}
.castle-gold-earned > .castle-icon:last-child {
  margin-left: auto;
  width: 32px;
}
.castle-gold-earned small {
  display: block;
  color: #bfb78e;
  font-size: 11px;
}
.castle-gold-earned b {
  font: 20px/1.4 var(--raid-pixel);
  color: #eace88;
}
.castle-loot-list {
  border: 1px solid #464c39;
  background: #1c211a;
}
.castle-loot {
  --loot-color: #bcb79b;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}
.castle-loot + .castle-loot {
  border-top: 1px solid #3e4333;
}
.castle-loot.uncommon {
  --loot-color: #a9c27b;
}
.castle-loot.rare {
  --loot-color: #8fb9d8;
}
.castle-loot.epic {
  --loot-color: #c3a3d0;
}
.castle-loot.legendary {
  --loot-color: #e5b666;
}
.castle-loot.mythical {
  --loot-color: #e59da0;
}
.castle-loot-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--loot-color);
  background: #30362a;
}
.castle-loot-icon img {
  max-width: 32px;
  max-height: 32px;
}
.castle-loot > div {
  min-width: 0;
}
.castle-loot b {
  display: block;
  color: var(--loot-color);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.castle-loot small {
  color: #a2a48e;
  font-size: 11px;
  text-transform: capitalize;
}
.castle-loot > strong {
  margin-left: auto;
  color: #c4b891;
}
.castle-empty-loot {
  margin: 14px;
  font-size: 12px;
  color: var(--raid-muted);
}
.castle-return-note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--raid-muted);
}
.castle-defeat .castle-heading {
  background: #34322a;
  border-color: #6b5340;
}
.castle-defeat .castle-art {
  opacity: 0.7;
}
.castle-ready {
  width: 480px;
}
.castle-ready .castle-body {
  padding-top: 22px;
}
.castle-ready-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.castle-ready-heading > .castle-icon {
  width: 34px;
  height: 38px;
}
.castle-ready h2 {
  font-size: 16px;
  margin-bottom: 0;
}
.castle-ready p {
  color: var(--raid-muted);
  margin: 18px 0 12px;
}
.castle-ready .castle-members li > b {
  min-width: 0;
  overflow-wrap: anywhere;
}
#rrClock {
  margin-left: auto;
  font: 24px/1 var(--raid-pixel);
  color: var(--raid-gold);
}
#rrClock.urgent,
.castle-clock.urgent {
  color: #e6a28b;
}
#castleHud {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 62;
  width: min(420px, 92vw);
  pointer-events: none;
}
.castle-hudbox {
  border: 2px solid;
  border-color: #777455 #242b21 #242b21 #777455;
  background: #252c23f5;
  padding: 10px 14px;
  box-shadow: 0 3px 0 #0e150dc9;
}
.castle-hudtop {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}
.castle-hudtop > b:first-child {
  font: 11px/1.4 var(--raid-pixel);
  color: #e1c891;
}
.castle-hudtop > span {
  color: #a3ad96;
  text-transform: capitalize;
}
.castle-clock {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font: 12px/1 var(--raid-pixel);
  white-space: nowrap;
}
.castle-clock .castle-icon {
  width: 14px;
  height: 16px;
}
.castle-crystal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.castle-crystal-row > .castle-icon {
  width: 32px;
  height: 36px;
}
.castle-crystal-pool {
  flex: 1;
  min-width: 0;
}
.castle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.castle-row b {
  font-weight: 500;
}
.castle-crystal-pool .castle-row {
  color: #c2dfcb;
}
.castle-crystal-pool small {
  display: block;
  text-align: center;
  color: #a0b5a4;
  font-size: 10px;
  line-height: 1.3;
}
.castle-meter {
  height: 12px;
  border: 2px solid #101c17;
  margin: 4px 0 2px;
  background: #343f33;
  box-shadow: 0 1px #596149;
}
.castle-meter i {
  display: block;
  height: 100%;
  background: #6aa69b;
  border-top: 2px solid #aad4b7;
}
.castle-boss {
  background: #282820f5;
  border: 1px solid #6a5946;
  padding: 6px 12px;
  margin-top: 6px;
}
.castle-boss .castle-row {
  color: #dcb69a;
}
.castle-boss .castle-row b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.castle-boss .castle-row span {
  font-size: 10px;
}
.castle-boss .castle-icon {
  width: 15px;
  height: 16px;
}
.castle-boss .castle-meter {
  height: 9px;
  background: #392a21;
}
.castle-boss .castle-meter i {
  background: #ae6751;
  border-top: 1px solid #d29465;
}
.castle-sub {
  margin-top: 5px;
  text-align: center;
  color: #ece2c1;
  font-size: 11px;
  text-shadow:
    1px 1px #000,
    -1px -1px #000;
}
.castle-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: #3c3120f5;
  border: 1px solid #ab884c;
  color: #f1d09a;
  font-size: 12px;
}
.castle-warning .castle-icon {
  width: 20px;
  height: 22px;
}
/* #raidleave: Leave is INSIDE the HUD, pinned to its top-right corner. It used to be its own fixed button at
   top:145px right:14px — which on a sideways phone is exactly where the top ability of the thumb arc sits, and
   castle_leave is permanent mid-siege. The HUD occupies the one strip no thumb control uses (see the phone
   rules below), so anything inside it cannot land on a control in any orientation or hand mode. */
#castleLeave {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  pointer-events: auto; /* the HUD itself lets taps fall through to the world */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px; /* a real thumb target (the shared .castle-button rule above already gives it 44px of height) */
  padding: 0 10px;
  font-size: 10px;
  white-space: nowrap;
}
#castleLeave .castle-icon {
  width: 16px;
  height: 18px;
}
/* ARMED: the first tap only asks. Red, and saying so in words, for the three seconds a second tap will count. */
#castleLeave.castle-armed,
#castleWatch .castle-button.castle-armed {
  /* !important because the shared .castle-button skin above pins all three with it */
  background: #6e2f24 !important;
  border-color: #d98a6b #3d1a14 #3d1a14 #d98a6b !important;
  color: #ffe1d4 !important;
}
#castleHud .castle-hudbox {
  padding-right: 60px; /* a gutter the flag sits in, so neither the clock nor the crystal's % ever goes under it */
  min-height: 56px;
}
#castleHud .castle-restart {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: #f0d79a;
  font-size: 10px;
  line-height: 1.2;
}
#castleHud .castle-restart .castle-icon {
  width: 11px;
  height: 13px;
}
/* The server's "update incoming" strip is fixed across the top centre — over the wave number and the clock,
   in Kevon's screenshot. During a raid its countdown is carried inside this HUD instead (ui.js), so the strip
   itself steps aside. Its inline style is set in main.js, hence !important. */
body:has(#castleHud) #updSoonBar {
  display: none !important;
}
#castleWatch {
  position: fixed;
  left: 50%;
  bottom: 155px;
  transform: translateX(-50%);
  z-index: 64;
  width: min(360px, 92vw);
  padding: 14px;
  background: #272c23f5;
  border: 2px solid #726d50;
  box-shadow: 0 3px #10160d;
}
.castle-watch-label {
  display: flex;
  gap: 10px;
  align-items: center;
}
.castle-watch-label b {
  font: 12px/1.5 var(--raid-pixel);
  color: #dfc197;
}
.castle-watch-label small {
  display: block;
  margin-top: 4px;
  color: var(--raid-muted);
}
#castleWatch .castle-actions {
  margin-top: 12px;
}
#castleWatch .castle-button {
  font-size: 10px;
  padding: 8px;
}
.castle-inspect {
  max-height: 55vh;
  overflow: auto;
  font-size: 11px;
}
@media (min-width: 481px) and (max-height: 760px) {
  .castle-board .castle-heading {
    min-height: 114px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .castle-board .castle-art {
    width: 196px;
  }
  .castle-board .castle-body {
    padding-top: 10px;
    padding-bottom: 6px;
  }
  .castle-board .castle-facts {
    padding-bottom: 6px;
  }
  #castleModal .castle-board .castle-choice {
    min-height: 94px;
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 4px;
  }
  .castle-board .castle-party-heading {
    margin-top: 16px;
  }
  .castle-board .castle-members li {
    min-height: 52px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .castle-board .castle-reward-note {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .castle-board .castle-open-slots {
    padding-top: 4px;
  }
  .castle-board .castle-actions {
    margin-top: 12px;
  }
  .castle-board .castle-rules {
    margin-top: 6px;
  }
  .castle-board .castle-locked {
    margin-top: 10px;
    padding-top: 10px;
  }
}
/* ---------------------------------------------------------------------------------------------------------
   PHONES (#raidhudphone). Measured against the real phone controls (scripts/raidhud/phone.mjs), not guessed:
     health bars     x 10..168,  y 8..43        PARTY      x 8..104,  y 64..104
     ☰ menu          right 10, 44 wide, y 8..52       bag button  right 62, 44 wide, y 8..52 (#seekerui)
     quick slots     LANDSCAPE: a row,    right 116, 3 x 54 + 2 x 8 = 178 wide, y 8..62
                     PORTRAIT:  a column, right 10, 54 wide, y 62..240
     ability arc     bottom-right (bottom-LEFT in left-handed mode); its top button reaches y ~100 sideways
   LANDSCAPE = (max-height:460px) OR landscape up to 540 tall (#seekerui, Kevon 2026-10-05: the Solana Seeker held
   sideways is ~1035x480 CSS px and used to get the PORTRAIT column; index.html #seekerui has the same two queries).
   So the HUD gets the strip between the health bars and the quick slots, and nothing else. The numbers live
   here as calc()s of the same insets the controls use, so a safe-area notch moves both together.
   --------------------------------------------------------------------------------------------------------- */
body.phone-ui #castleHud {
  top: max(6px, env(safe-area-inset-top));
  left: calc(max(10px, env(safe-area-inset-left)) + 166px);                 /* clear of the health bars */
  right: calc(max(116px, calc(env(safe-area-inset-right) + 112px)) + 186px); /* clear of ☰ + bag button + the quick-slot row (#seekerui) */
  width: auto;
  max-width: 380px;
  margin: 0 auto; /* centred inside that strip when the strip is wider than the HUD */
  transform: none;
}
body.phone-ui #castleHud .castle-hudbox {
  padding: 6px 56px 6px 8px; /* the flag spans the first two rows in that right gutter instead of adding a row */
}
body.phone-ui #castleHud .castle-hudtop {
  font-size: 9px;
  gap: 2px 6px;
  flex-wrap: wrap; /* on a narrow phone the clock drops under the wave count — whole, not "WAVE 15 /" then "25" */
}
body.phone-ui #castleHud .castle-hudtop > * {
  white-space: nowrap;
}
body.phone-ui #castleHud .castle-hudtop .castle-clock {
  margin-left: 0;
}
body.phone-ui #castleHud .castle-hudtop > span {
  display: none; /* the difficulty: chosen on the board, not news mid-fight, and the room is better spent on the clock */
}
body.phone-ui .castle-crystal-row {
  gap: 6px;
  margin-top: 2px;
}
body.phone-ui .castle-crystal-row > .castle-icon {
  width: 20px;
  height: 22px;
}
#castleHud .castle-short {
  display: none;
}
body.phone-ui #castleHud .castle-long {
  display: none; /* "Defend the crystal" did not fit a portrait phone and came out as "Defend the cr..." */
}
body.phone-ui #castleHud .castle-short {
  display: inline;
}
body.phone-ui .castle-crystal-pool small {
  display: none; /* 28,879 / 30,000 — the bar and the % already say it, and this line cost 13px of a short screen */
}
body.phone-ui #castleHud .castle-boss {
  padding: 3px 8px;
  margin-top: 3px;
}
body.phone-ui #castleHud .castle-boss .castle-row b {
  font-size: 10px;
  gap: 4px;
}
body.phone-ui #castleHud .castle-boss .castle-row span {
  font-size: 9px;
}
body.phone-ui #castleHud .castle-boss .castle-icon {
  width: 11px;
  height: 12px;
}
body.phone-ui #castleHud .castle-boss .castle-meter {
  height: 8px;
  margin: 2px 0 0;
}
body.phone-ui #castleHud .castle-crystal-pool .castle-meter {
  height: 9px;
  margin: 3px 0 0;
}
body.phone-ui #castleHud .castle-sub {
  margin-top: 2px;
  line-height: 1.3;
}
body.phone-ui #castleHud .castle-row {
  font-size: 10px;
}
body.phone-ui #castleHud .castle-row b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.phone-ui #castleHud .castle-sub,
body.phone-ui #castleHud .castle-warning {
  font-size: 10px;
}
/* The restart line sits BELOW the flag (which spans only the first two rows), so it may run on into the flag's
   gutter instead of wrapping — "Server restart in" / "9:02" on two lines, on an iPhone SE held upright. */
body.phone-ui #castleHud .castle-restart {
  margin-right: -48px;
  white-space: nowrap;
}
/* A fallen raider's panel takes the stage; their own food/drink chips are no use to anyone while they watch, and
   upright on a small phone the panel lands exactly where the chips are. */
body.phone-ui:has(#castleWatch) #buffs {
  display: none !important;
}
/* A fallen raider's watch panel sits in the gap between the joystick and the thumb arc — not over either. */
body.phone-ui #castleWatch {
  left: calc(max(18px, env(safe-area-inset-left)) + 136px);
  right: 248px;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: auto;
  max-width: 360px;
  margin: 0 auto;
  transform: none;
}
body.phone-ui.lefty #castleWatch {
  left: 248px;
  right: calc(max(18px, env(safe-area-inset-right)) + 136px);
}
/* On a phone the crystal's row folds to ONE line — icon, bar, % — dropping the "Defend the crystal" caption, which
   the entry board and the crystal itself already say. Sideways the screen is 360-390px tall and the HUD was over a
   third of it with a boss up and a restart pending; upright on an iPhone SE it was 23% of the screen. */
body.phone-ui #castleHud .castle-crystal-pool {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.phone-ui #castleHud .castle-crystal-pool .castle-meter {
  flex: 1;
  order: 1;
  margin: 0;
}
body.phone-ui #castleHud .castle-crystal-pool .castle-row {
  order: 2;
}
body.phone-ui #castleHud .castle-crystal-pool .castle-row b {
  display: none;
}
/* The shortest phones held sideways (360px — Galaxy S8/S9 class): every row gives back a couple of pixels. */
@media (max-height: 380px) {
  body.phone-ui #castleHud .castle-hudbox {
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 52px;
  }
  body.phone-ui #castleHud .castle-boss {
    padding: 2px 8px;
    margin-top: 2px;
  }
  body.phone-ui #castleHud .castle-restart {
    margin-top: 2px;
  }
}
/* #seekerui: sideways the strip now also clears the bag button (right 302, was 250), so on a 640-720px-wide phone
   it is ~190px and the clock wrapped under "WAVE 15 / 25" — an extra line that took the HUD from 31% to 35% of a
   667x375 screen. There the wave label and clock step down a size and the clock's hourglass shrinks to the boss
   row's, so the top row fits on one line again (wider phones keep the bigger type). */
@media (max-height: 460px) and (max-width: 720px), (orientation: landscape) and (max-height: 540px) and (max-width: 720px) {
  body.phone-ui #castleHud .castle-hudtop > b:first-child {
    font-size: 9px;
  }
  body.phone-ui #castleHud .castle-hudtop .castle-clock {
    font-size: 10px;
    gap: 3px;
  }
  body.phone-ui #castleHud .castle-hudtop .castle-clock .castle-icon {
    width: 11px;
    height: 12px;
  }
}
/* PORTRAIT: the quick slots are a COLUMN down the right edge and the PARTY button sits under the health bars,
   so the free strip starts below the bars, right of PARTY, and stops short of the column. #seekerui: portrait means
   (min-height:461px) AND upright, or anything 541+ tall — a 480-tall phone held sideways is LANDSCAPE. The top
   clears the 44px ☰ / bag-button row (8..52; it was +42 for the old 42px ☰, and the bag button now sits in the
   strip's top-right corner). */
@media (min-height: 461px) and (orientation: portrait), (min-height: 541px) {
  body.phone-ui #castleHud {
    top: calc(max(8px, env(safe-area-inset-top)) + 46px);
    left: calc(max(8px, env(safe-area-inset-left)) + 104px);
    right: calc(max(10px, env(safe-area-inset-right)) + 62px);
    max-width: none;
  }
  /* LEFT-HANDED upright mirrors it: the quick-slot column is on the LEFT edge and PARTY has crossed to the right
     (index.html #phoneoverlap), so the strip runs from the column's right edge to PARTY's left edge. (The food chip
     used to need a raid-only rule here too; it now lives below the quick slots everywhere, see index.html.) */
  body.phone-ui.lefty #castleHud {
    left: calc(max(10px, env(safe-area-inset-left)) + 62px);
    right: calc(max(8px, env(safe-area-inset-right)) + 104px);
  }
  /* #hudstats (Kevon 2026-10-06: "let them toggle this, default off"): with the optional gold + level tag on
     (index.html #hudstats, y 47..63, x 10..110) the left-handed HUD — which starts at x 72 — steps under it to
     --hud-floor (y 70, the same line PARTY and the left-edge quick slots step to). Right-handed it starts at x 112,
     right of the 100px-capped tag, so it stays put; sideways it starts at x 176. Toggle off = no change. */
  body.phone-ui.hud-stats.lefty #castleHud {
    top: var(--hud-floor);
  }
  /* The watch panel rides above the thumb arc rather than between it and the stick, which portrait has no room for. */
  body.phone-ui #castleWatch,
  body.phone-ui.lefty #castleWatch {
    left: 12px;
    right: 12px;
    bottom: calc(250px + var(--plonk-phone-bottom-offset, 0px));
  }
}
@media (max-width: 480px) {
  .castle-shade {
    padding: 6px;
  }
  .castle-card {
    max-height: calc(100dvh - 12px);
    border-width: 12px;
    border-image-width: 12px;
  }
  .castle-heading {
    padding: 18px 14px;
    min-height: 142px;
  }
  .castle-heading > div {
    max-width: 68%;
  }
  .castle-ui h2 {
    font-size: 18px;
    max-width: 230px;
  }
  .castle-heading p {
    max-width: 165px;
    font-size: 11px;
  }
  .castle-art {
    width: 160px;
    right: -22px;
    bottom: 0;
  }
  .castle-eyebrow {
    font-size: 8px;
  }
  .castle-body {
    padding: 14px 12px 16px;
  }
  .castle-facts {
    font-size: 11px;
    padding-bottom: 14px;
  }
  .castle-facts > span {
    gap: 4px;
  }
  .castle-facts .castle-icon {
    width: 14px;
    height: 16px;
  }
  .castle-section-label {
    font-size: 10px;
  }
  .castle-section-label small {
    font-size: 10px;
  }
  .castle-choices {
    gap: 7px;
  }
  #castleModal .castle-choice {
    min-height: 100px;
  }
  #castleModal .castle-choice b {
    font-size: 10px;
  }
  .castle-members li {
    gap: 8px;
  }
  .castle-member-avatar {
    width: 26px;
    height: 32px;
  }
  .castle-member-avatar .castle-icon {
    width: 19px;
    height: 22px;
  }
  .castle-attempts {
    font-size: 10px;
    gap: 4px;
  }
  .castle-status {
    font-size: 10px;
    max-width: 36%;
  }
  .castle-open-slots {
    font-size: 10px;
  }
  .castle-open-slots i {
    width: 18px;
    height: 20px;
  }
  .castle-actions {
    gap: 8px;
  }
  :is(#castleModal, #raidReady) .castle-button {
    font-size: 11px;
    padding: 10px 8px;
  }
  .castle-ready h2 {
    font-size: 14px;
  }
  #rrClock {
    font-size: 20px;
  }
  .castle-hudbox {
    padding: 8px 10px;
  }
  .castle-hudtop > b:first-child {
    font-size: 10px;
  }
}
@media (max-width: 350px) {
  .castle-art {
    width: 137px;
    right: -28px;
  }
  .castle-heading > div {
    max-width: 76%;
  }
  .castle-heading p {
    max-width: 155px;
  }
  #castleModal .castle-choice b {
    font-size: 9px;
  }
  .castle-party-heading > b {
    font-size: 10px;
  }
  .castle-pips {
    display: none;
  }
  .castle-ready-heading {
    gap: 8px;
  }
  .castle-ready-heading > .castle-icon {
    width: 24px;
  }
  .castle-ready h2 {
    font-size: 12px;
  }
}