/* Castle Trouble HUD: painted icons, Bells Ahead, the supper clock, rules, tiers, medals, the title screen.
   Loaded last so it can also lift every small label to at least 12 px. */
.ct-icon {
  --size: 24px;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--size);
  height: var(--size);
  background: url("./art/icons.webp") no-repeat;
  background-size: calc(var(--size) * 5) calc(var(--size) * 4);
  background-position: calc(var(--col) * var(--size) * -1) calc(var(--row) * var(--size) * -1);
  vertical-align: middle;
}
.ct-hazard-icon { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }

.resource-bar > div { align-items: center; }
.resource-bar .ct-icon { --size: 26px; }

/* Bells Ahead */
.forecast-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 52px;
  padding: .35rem clamp(.5rem, 1.5vw, 1rem);
  overflow-x: auto;
  background: #1c1620;
  border-bottom: 2px solid #4f3e51;
  scrollbar-width: thin;
}
.forecast-label { margin: 0; color: #f2c65a; font-size: .75rem; font-weight: 1000; letter-spacing: .12em; white-space: nowrap; }
.forecast { display: flex; gap: .4rem; min-width: 0; }
.forecast-quiet { margin: 0; color: #cdbed0; font-size: .8rem; white-space: nowrap; }
.forecast-chip {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .25rem .55rem .25rem .35rem;
  color: #2b2027;
  background: #fff3d2;
  border: 2px solid #8e6a52;
  border-radius: 10px;
  text-align: left;
  white-space: nowrap;
}
.forecast-chip strong, .forecast-chip small { display: block; }
.forecast-chip strong { font-size: .8rem; }
.forecast-chip small { color: #6d555d; font-size: .75rem; font-weight: 800; }
.forecast-chip b { margin-left: .2rem; padding: .15rem .4rem; color: #fff; background: #5d4252; border-radius: 6px; font-size: .8rem; font-variant-numeric: tabular-nums; }
.forecast-chip.soon { border-color: #c94f48; background: #ffe6cf; }
.forecast-chip.soon b { background: #b3302d; }
.supper-clock {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .2rem .6rem .2rem .35rem;
  color: #fff6dc;
  background: #3e3044;
  border: 2px solid #6d5670;
  border-radius: 10px;
  white-space: nowrap;
}
.supper-clock strong, .supper-clock small { display: block; }
.supper-clock strong { font-size: .82rem; font-variant-numeric: tabular-nums; }
.supper-clock small { color: #d9c9d9; font-size: .75rem; font-weight: 700; }
.supper-clock.short { background: #6a2f33; border-color: #ff8a6a; }
.rule-strip { display: flex; gap: .35rem; margin-left: auto; }
.rule-strip:empty { display: none; }
.rule-strip .rule-chip { padding: .3rem .55rem; background: #3a2d40; border: 1px solid #8f7590; border-radius: 8px; color: #f6e8c8; white-space: nowrap; }
.rule-strip .rule-chip strong { font-size: .75rem; }
.rule-strip .rule-chip small { display: none; }

/* Rules and tiers in the briefing */
.briefing-rules { display: grid; gap: .35rem; margin: .4rem 0 .7rem; }
.briefing-rules[hidden] { display: none; }
.briefing-rules .rule-chip { display: block; padding: .45rem .6rem; background: #f6e2b4; border: 2px solid #b47b49; border-radius: 9px; }
.briefing-rules .rule-chip strong { display: block; font-size: .85rem; color: #6c2f37; }
.briefing-rules .rule-chip small { display: block; font-size: .8rem; color: #4b3a3f; line-height: 1.35; }
.tier-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin: .5rem 0 .8rem; }
.tier-button {
  min-height: 44px;
  padding: .4rem .45rem;
  color: #2d2227;
  text-align: left;
  background: #f3dfad;
  border: 2px solid #6e5360;
  border-radius: 9px;
}
.tier-button strong, .tier-button small { display: block; }
.tier-button strong { font-size: .85rem; }
.tier-button small { margin-top: .1rem; color: #6a525a; font-size: .75rem; line-height: 1.25; }
.tier-button.selected { color: #fff8e6; background: #7b3d4c; border-color: #2b2027; box-shadow: inset 0 -3px #c99654; }
.tier-button.selected small { color: #f6dccc; }

/* Board: medals per tier, replay modes */
.medal-pips { grid-column: 2; display: flex; gap: 3px; }
.medal-pips .pip {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: #2b2027;
  background: #d9c8a0;
  border: 1px solid #8a6f5a;
  border-radius: 50%;
  font: 900 .62rem/1 Georgia, serif;
  font-style: normal;
}
.medal-pips .pip-s { background: #ffd34d; border-color: #8a5c00; }
.medal-pips .pip-a { background: #e3e7ee; border-color: #6c7686; }
.medal-pips .pip-b { background: #e0a46c; border-color: #7b4a22; }
.medal-pips .pip-c, .medal-pips .pip-d { background: #c9b8a6; }
.replay-node > span { background: #5c3a52 !important; }
.replay-node > span .ct-icon { --size: 22px; }

/* Room card */
.job-button { justify-content: flex-start; min-height: 44px; }
.job-button strong { flex: 1; }
.job-button.speciality { border-color: #4f8f4a; background: #f2fbe2; }
.station-button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .45rem;
  padding: .5rem .7rem;
  color: #241b21;
  text-align: left;
  background: #e8ddf4;
  border: 2px solid #5c4870;
  border-radius: 10px;
}
.station-button strong { flex: 1; font-size: .9rem; }
.station-button span { color: #5f4f6d; font-size: .75rem; font-weight: 800; }
.soup-button { justify-content: flex-start; min-height: 48px; }
.soup-button strong { flex: 1; }
.staff-card { grid-template-columns: 24px 42px 1fr; }
.staff-card img.staff-portrait { width: 40px; height: 40px; border-radius: 50%; background: #f1dfb6; border: 2px solid #4a3541; object-fit: cover; }

/* Result */
.result-medal { margin: .6rem 0 0; color: #6c2f37; font-weight: 900; }
.result-medal:empty { display: none; }
.result-grade.result-time { width: auto; min-width: 88px; padding: 0 .6rem; border-radius: 44px; font-size: 1.8rem; }

/* Title screen: the key art, the studio notice, Play and Credits */
.title-screen { position: fixed; inset: 0; z-index: 150; display: grid; place-items: end center; overflow: hidden; background: #1a1420; }
.title-screen[hidden] { display: none; }
.title-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.title-panel {
  position: relative;
  width: min(560px, calc(100% - 2rem));
  margin: 0 0 clamp(1rem, 5vh, 3rem);
  padding: 1rem 1.3rem;
  text-align: center;
  color: #fff6dc;
  background: rgba(30, 20, 30, .82);
  border: 3px solid #f2c65a;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.title-tagline { margin: 0 0 .7rem; font: 900 clamp(1.05rem, 2.6vw, 1.45rem)/1.2 Georgia, serif; }
.title-actions { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; }
.title-actions .primary-button { min-width: 140px; min-height: 48px; font-size: 1.05rem; }
.title-legal { margin: .7rem 0 0; color: #e6d6b8; font-size: .8rem; }

/* Every label at least 12 px */
.resource-bar span, .alert > span, .alert small, .alert strong, .staff-card small, .staff-card em, .job-button span, .soup-button span,
.campaign-node small, .campaign-node strong, .campaign-node > span, .kicker, .panel-label, .coach-strip, .input-mode-chip, .bell-banner,
.room-navigator button strong, .room-navigator button > span, .empty-action, .scar-summary, .upgrade-summary, .resident-summary, .specialisation-summary {
  font-size: max(.75rem, 12px) !important;
}

@media (max-width: 980px) {
  .tier-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rule-strip { display: none; }
}
@media (max-width: 650px) {
  .forecast-bar { min-height: 50px; gap: .35rem; }
  .forecast-label { display: none; }
  .supper-clock small { display: none; }
  .tier-button small { display: none; }
  .resource-bar .ct-icon { --size: 20px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .forecast-bar { min-height: 40px; padding-top: .15rem; padding-bottom: .15rem; }
  .forecast-chip, .supper-clock { min-height: 36px; }
  .forecast-label, .supper-clock small, .forecast-chip small { display: none; }
  .resource-bar .ct-icon { --size: 18px; }
  .tier-button small { display: none; }
  .title-panel { margin-bottom: .6rem; padding: .6rem 1rem; }
}

/* Sound settings in the Assists dialog */
.audio-settings { margin: .8rem 0 0; padding: .6rem .7rem; border: 2px solid #ddc99d; border-radius: 10px; background: #fff9e8; }
.audio-settings legend { padding: 0 .3rem; font-weight: 1000; color: #963f3f; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; }
.settings-dialog .slider-row { display: grid; grid-template-columns: 8.5rem 1fr 3rem; align-items: center; gap: .6rem; margin: .3rem 0; padding: .35rem .2rem; background: transparent; border: 0; }
.settings-dialog .slider-row input[type="range"] { width: 100%; height: 28px; accent-color: #8e3e45; }
.settings-dialog .slider-row output { font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; }
.settings-dialog form { max-height: calc(100vh - 3rem); overflow-y: auto; }

/* Painted resident portraits (one per state) replace the old three-frame strips */
.resident-result-art { width: 120px; height: 120px; background: radial-gradient(circle at 50% 40%, #f6e2b4, #c9ad78); }
.resident-result-art img, .resident-result-art.frame-1 img, .resident-result-art.frame-2 img { position: static; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform: none; }
.resident-card img { width: 100%; max-width: 120px; height: auto; aspect-ratio: 1; object-fit: contain; object-position: center bottom; background: radial-gradient(circle at 50% 40%, #fff3d6, #d9bd86); border-radius: 10px; }
.resident-heading p, .resident-result-copy .panel-label { font-size: max(.75rem, 12px) !important; }
@media (max-width: 650px) {
  .resident-result-art { width: 72px; height: 72px; }
  .resident-result-art img { width: 100%; height: 100%; }
}

/* Fit the whole siege in one screen on desktop and phone-landscape: the stage takes what is left, the command panel scrolls. */
.campaign-summaries p:not(.save-status) { display: none; }
.game-shell { grid-template-rows: auto auto auto minmax(0, 1fr); }
@media (min-width: 981px), (orientation: landscape) and (max-height: 520px) {
  .game-shell { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .play-layout { min-height: 0; height: 100%; }
  .castle-stage { min-height: 0; height: 100%; }
}
.campaign-node .medal-pips { grid-column: 1 / -1; justify-content: center; margin-top: .15rem; }
.campaign-node .medal-pips .pip { width: 18px; height: 18px; }
.forecast-chip.covered { border-color: #4f8f4a; background: #eef8dc; }
.forecast-chip.covered small { color: #2f6b2c; }