/* The Kingdom district panels (js/screens/kingdom-panels.js and js/screens/kingdom/).
   House rules: every font-size is max(var(--text-floor), …); works at 375 px. */

/* class colours: warrior, assassin, mage, paladin */
.kd-c0 { --kd-tint: color-mix(in srgb, var(--red) 16%, transparent); --kd-edge: color-mix(in srgb, var(--red) 45%, transparent); --kd-glow: color-mix(in srgb, var(--red) 30%, transparent); }
.kd-c1 { --kd-tint: color-mix(in srgb, var(--neon-violet) 18%, transparent); --kd-edge: color-mix(in srgb, var(--neon-violet) 50%, transparent); --kd-glow: color-mix(in srgb, var(--neon-violet) 30%, transparent); }
.kd-c2 { --kd-tint: color-mix(in srgb, var(--neon-cyan) 14%, transparent); --kd-edge: color-mix(in srgb, var(--neon-cyan) 45%, transparent); --kd-glow: color-mix(in srgb, var(--neon-cyan) 28%, transparent); }
.kd-c3 { --kd-tint: color-mix(in srgb, var(--gold) 18%, transparent); --kd-edge: color-mix(in srgb, var(--gold) 55%, transparent); --kd-glow: color-mix(in srgb, var(--gold) 32%, transparent); }

.kd-name { font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.03em; font-size: max(var(--text-floor), 1.15rem); color: var(--text); line-height: 1.2; overflow-wrap: anywhere; }
.kd-scroll { overflow-x: auto; max-width: 100%; }
.kd-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.kd-grid2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.kd-grid4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.kd-chips { gap: 0.35rem; }
.kd-timer { font-variant-numeric: tabular-nums; }
.kd-timer.is-ready { border-color: var(--g-lit); background: var(--g-tint); color: var(--green-bright); }
.kd-result:empty { display: none; }
.kd-result .msg { animation: kd-in var(--dur-3) var(--ease-pop) both; }
@keyframes kd-in { from { transform: translateY(-6px) scale(0.98); opacity: 0; } }

/* the hero bar at the top of every module */
.kd-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 0.8rem; align-items: center; padding: 0.7rem 0.9rem; border-radius: var(--r-3);
  background: linear-gradient(90deg, var(--kd-tint, var(--g-tint)), transparent 70%), var(--glass-lo); border: 1.5px solid var(--kd-edge, var(--g-edge));
}
.kd-bar-face { font-size: max(var(--text-floor), 2.4rem); line-height: 1; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, var(--kd-glow, var(--g-veil)), transparent 70%); }
.kd-bar-name { font-family: var(--font-disp); font-weight: 400; font-size: max(var(--text-floor), 1.25rem); letter-spacing: 0.03em; }
.kd-bar-main { min-width: 0; display: grid; gap: 0.35rem; }
.kd-bar-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem 0.8rem; }
.kd-bar-pick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding-top: 0.45rem; border-top: 1px solid var(--hair); }
.kd-bar-pick .kicker { margin-right: 0.2rem; }

/* meters: label, bar, numbers */
.kd-meter { display: grid; grid-template-columns: auto 1fr auto; gap: 0.45rem; align-items: center; font-size: max(var(--text-floor), 0.8rem); }
.kd-meter-k { color: var(--text-dim); font-weight: 800; white-space: nowrap; }
.kd-meter-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd-meters { display: grid; gap: 0.3rem; }

/* hero cards */
.kd-hero { display: grid; gap: 0.6rem; align-content: start; border-color: var(--kd-edge, var(--g-edge)); }
.kd-hero.is-active { box-shadow: var(--shadow-2), 0 0 0 2px var(--green-bright), 0 0 26px var(--g-veil); }
.kd-portrait {
  position: relative; aspect-ratio: 2.1; border-radius: var(--r-3); display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(60% 75% at 50% 45%, var(--kd-glow, var(--o-tint)), transparent 72%), repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.025) 14px 15px), #080907;
  border: 1px solid var(--kd-edge, var(--o-edge));
}
.kd-face { font-size: max(var(--text-floor), 3.6rem); line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6)); animation: kd-bob 3.2s ease-in-out infinite; }
@keyframes kd-bob { 50% { transform: translateY(-4px); } }
.kd-lvl { position: absolute; top: 0.5rem; right: 0.6rem; font-family: var(--font-disp); color: var(--gold); font-size: max(var(--text-floor), 1.15rem); text-shadow: 0 2px 0 #3a2500; }
.kd-status { position: absolute; top: 0.5rem; left: 0.5rem; }
.kd-active { position: absolute; bottom: 0.5rem; left: 0.5rem; }
.kd-slots { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kd-slot-empty { opacity: 0.35; filter: grayscale(1); }
details.kd-more > summary { cursor: pointer; font-weight: 800; color: var(--text-dim); font-size: max(var(--text-floor), 0.85rem); min-height: 36px; display: flex; align-items: center; }

/* facts: label / value rows */
.kd-facts { display: grid; gap: 0.25rem; font-size: max(var(--text-floor), 0.85rem); }
.kd-facts > div { display: flex; justify-content: space-between; gap: 0.6rem; border-bottom: 1px dashed var(--ink-4); padding-bottom: 0.15rem; }
.kd-facts span { color: var(--text-mute); white-space: nowrap; }
.kd-facts b { text-align: right; overflow-wrap: anywhere; }

/* boards: quests, monsters, arenas, drops, recipes, offers */
.kd-quest, .kd-mon, .kd-arena, .kd-drop, .kd-recipe, .kd-offer, .kd-gear, .kd-swap, .kd-listing { display: grid; gap: 0.55rem; align-content: start; }
.kd-mon.is-ready, .kd-recipe.is-ready, .kd-arena.is-ready, .kd-drop.is-ready { border-color: var(--g-lit); box-shadow: 0 0 18px var(--g-tint); }
.is-off { opacity: 0.6; }
.kd-mon-face { font-size: max(var(--text-floor), 2.1rem); line-height: 1; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--r-2); background: var(--glass-well); border: 1px solid var(--hair); flex: 0 0 auto; }
.kd-host { display: flex; gap: 0.7rem; align-items: center; padding: 0.55rem 0.7rem; border-radius: var(--r-2); background: var(--r-tint); border: 1px solid var(--r-edge); }
.kd-who { gap: 0.35rem; }
.kd-offer { text-align: center; justify-items: center; }
.kd-offer .row { justify-content: center; }
.kd-offer-face { font-size: max(var(--text-floor), 2.6rem); line-height: 1.1; }
.kd-offer label.field, .kd-swap label.field { max-width: 7rem; }
.kd-listing { border-color: var(--kd-edge, var(--hair)); background: linear-gradient(180deg, var(--kd-tint, transparent), transparent 55%), var(--glass-lo); }
.kd-price { font-size: max(var(--text-floor), 1rem); }

/* the treasure vault */
.kd-vault { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 0.6rem; }
.kd-gem { display: grid; gap: 0.3rem; justify-items: center; text-align: center; padding: 0.8rem 0.6rem; border-radius: var(--r-3); background: var(--glass-well); border: 1px solid var(--hair); }
.kd-gem.has { border-color: var(--o-edge); background: radial-gradient(70% 60% at 50% 30%, var(--o-tint), transparent 70%), var(--glass-well); }
.kd-gem:not(.has) .kd-gem-face { filter: grayscale(0.85); opacity: 0.55; }
.kd-gem-face { font-size: max(var(--text-floor), 2.2rem); line-height: 1.1; }
.kd-gem details { justify-self: stretch; text-align: left; }
.kd-swap-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 800; }
.kd-arrow { font-family: var(--font-disp); color: var(--green-bright); font-size: max(var(--text-floor), 1.3rem); }

/* the armoury paper doll */
.kd-doll { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 0.6rem; margin-bottom: 0.6rem; }
.kd-slot-card { display: grid; gap: 0.35rem; align-content: start; padding: 0.6rem 0.7rem; border-radius: var(--r-2); background: var(--ink-2); border: 1.5px dashed var(--ink-5); min-height: 92px; }
.kd-slot-card.filled { border-style: solid; border-color: var(--o-edge); background: var(--o-tint); }

/* allowlist pickers */
fieldset.kd-cast { border: 1px solid var(--hair); border-radius: var(--r-2); padding: 0.5rem 0.7rem 0.6rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
fieldset.kd-cast legend { padding: 0 0.3rem; font-weight: 800; color: var(--text-dim); font-size: max(var(--text-floor), 0.85rem); }
.kd-check { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 36px; font-weight: 700; font-size: max(var(--text-floor), 0.88rem); cursor: pointer; }
.kd-check input { width: 20px; min-height: 20px; height: 20px; accent-color: var(--green-bright); }

@media (max-width: 720px) {
  .kd-bar-meters { grid-template-columns: 1fr; }
  .kd-scroll .kd-st-t { display: none; }
  .kd-slots { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.2rem; }
}

/* an action that isn't ready yet: still clickable (the contract explains why), but quieter */
.btn.kd-wait { opacity: 0.62; filter: saturate(0.45); box-shadow: none; }
.btn.kd-wait:hover { opacity: 0.8; }
.kd-scroll table.t th.num { text-align: right; }

/* your day in the Kingdom */
.kd-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0.5rem; }
button.kd-day {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: center; text-align: left; cursor: pointer; min-height: 48px;
  padding: 0.5rem 0.7rem; border-radius: var(--r-2); background: var(--glass-well); border: 1px solid var(--hair); color: var(--text); font-weight: 700; font-size: max(var(--text-floor), 0.9rem);
}
button.kd-day:hover { border-color: var(--g-lit); background: var(--g-wash); }
.kd-day-e { font-size: max(var(--text-floor), 1.4rem); line-height: 1; }
.kd-day-t { min-width: 0; overflow-wrap: anywhere; }

/* an arena challenge waiting to be settled */
.kd-pending { display: grid; gap: 0.45rem; padding: 0.6rem 0.7rem; border-radius: var(--r-2); background: var(--o-tint); border: 1.5px dashed var(--o-edge); }
.kd-cap { gap: 0.35rem; }
.kd-luck { display: grid; gap: 0.25rem; }
.kd-cap .chip { white-space: normal; text-align: left; }