/* Foundational playability overrides kept separate from the larger visual skin. */

.practice-tools .practice-tools-locked-hint {
  display: none;
}

.hud.pointer-locked .practice-tools {
  width: auto;
  min-width: 152px;
  padding: 7px 9px;
  pointer-events: none;
  background: rgba(24, 24, 19, .68);
  box-shadow: none;
}

.hud.pointer-locked .practice-tools > div {
  padding: 0;
  margin: 0;
  border-bottom: 0;
}

.hud.pointer-locked .practice-tools strong {
  font-size: 10px;
  letter-spacing: .1em;
}

.hud.pointer-locked .practice-tools small {
  margin-top: 2px;
  font-size: 7px;
  letter-spacing: .08em;
  color: rgba(231, 220, 196, .48);
}

.hud.pointer-locked .practice-tools-unlocked-hint {
  display: none;
}

.hud.pointer-locked .practice-tools-locked-hint {
  display: block;
}

.hud.pointer-locked .practice-tools button {
  display: none;
}

.hud.pointer-locked .practice-tools > :not(div, button) {
  display: none;
}

/* Keep the front door focused on Play + the Spellblade rather than a dense info panel. */
.world-note {
  width: 220px;
}

.world-note p {
  max-width: 210px;
}

@container app (max-height: 720px) {
  .world-note { display: none; }
}

.pause-menu { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(9, 12, 15, .6); pointer-events: auto; }
/* Specificity matters: .pause-menu's grid must never override the global .hidden rule. */
.pause-menu.hidden, .practice-tools.hidden { display: none !important; pointer-events: none; }
.pause-card { width: min(420px, 90cqw); padding: 28px; background: #202521; color: #ece5d6; border: 1px solid #766c52; }
.pause-card p { margin: 12px 0 22px; }
.pause-card button, #start-match, #lobby-leave { margin-bottom: 10px; }
/* One dialog, two sections: reuse the real Practice DOM and event handlers. */
.pause-menu .pause-card {
  box-sizing: border-box;
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 3vw, 28px);
}
.pause-menu.practice-open .pause-card { width: min(620px, calc(100vw - 24px)); }
.pause-menu .pause-section { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pause-menu .pause-section.hidden { display: none !important; }
.pause-menu .pause-practice-section #practice-overlay:not(.hidden) {
  display: flex !important;
  position: static;
  inset: auto;
  width: 100%;
  max-height: none;
  box-sizing: border-box;
  overflow: visible;
  margin-top: 10px;
}
.pause-menu .pause-practice-section #practice-overlay .practice-tools-unlocked-hint,
.pause-menu .pause-practice-section #practice-overlay .practice-tools-locked-hint { display: none; }
.pause-menu .pause-practice-section #practice-overlay .practice-panel-content { display: grid; }
.pause-menu #pause-practice-back { margin-bottom: 10px; }
@media (max-height: 470px) {
  .pause-menu .pause-card { max-height: calc(100dvh - 12px); }
  .pause-menu .pause-practice-section #practice-overlay:not(.hidden) { padding: 8px 10px; }
}
#solo-name, #private-name { margin: 8px 0 12px; width: 100%; }
#lobby-code { user-select: text; }

/* --- spells: the Q tile's colour follows the spell carried; burns and chills show at the edges of my view ---------- */
.ability[data-spell="frostfire"] .ability-icon { color: #8fdcff; }
.feed-line.frost { color: #aee8ff; }
.afflict { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; }
.afflict-burn { box-shadow: inset 0 0 90px rgba(255, 120, 40, .5), inset 0 0 26px rgba(255, 190, 90, .35); transition: opacity .25s ease; }
.afflict-burn.on { opacity: 1; animation: afflict-flicker .22s steps(2) infinite; }
@keyframes afflict-flicker { 50% { opacity: .72; } }
.afflict-chill {
  background: radial-gradient(ellipse at center, transparent 52%, rgba(170, 225, 255, .26) 78%, rgba(215, 245, 255, .55) 100%);
  box-shadow: inset 0 0 60px rgba(160, 220, 255, .45); transition: opacity .15s linear;
}
@media (prefers-reduced-motion: reduce) { .afflict-burn.on { animation: none; } }
/* a blow taken: the edges of the view redden (deeper on the side it came from, as deep as the blow was heavy) and ease
   back; the middle of the view is never touched. Badly hurt, the edges keep a slow, faint pulse, like a heartbeat */
.hurt-edge, .low-health { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }
.hurt-edge {
  --hurt: .6; --hx: 0;
  background:
    radial-gradient(ellipse 72% 68% at calc(50% - var(--hx) * 11%) 50%, transparent 62%, rgba(170, 16, 12, .45) 86%, rgba(96, 0, 0, .82) 100%),
    linear-gradient(90deg, rgba(150, 10, 8, calc(.32 * max(0, -1 * var(--hx)))), transparent 15%, transparent 85%, rgba(150, 10, 8, calc(.32 * max(0, var(--hx)))));
}
.hurt-edge.struck { animation: hurt-edge .75s ease-out forwards; }
@keyframes hurt-edge { 0% { opacity: var(--hurt); } 18% { opacity: calc(var(--hurt) * .9); } 100% { opacity: 0; } }
.low-health {
  --low: 0;
  background: radial-gradient(ellipse 72% 68% at 50% 50%, transparent 62%, rgba(120, 8, 8, .55) 90%, rgba(70, 0, 0, .8) 100%);
}
.low-health.on { animation: low-health 1.15s ease-in-out infinite; }
@keyframes low-health { 0%, 100% { opacity: calc(.18 + .25 * var(--low)); } 18% { opacity: calc(.32 + .45 * var(--low)); } 34% { opacity: calc(.2 + .3 * var(--low)); } 48% { opacity: calc(.28 + .4 * var(--low)); } }
@media (prefers-reduced-motion: reduce) { .low-health.on { animation: none; opacity: calc(.2 + .3 * var(--low)); } }
/* the health and stamina bars, as the rest of the kit: an iron well framed in dark iron, a brass cap riveted at each
   end, the health in deep blood red with a hairline mark every quarter, the stamina slimmer, marked every block it can
   still take. Read at a glance first; the smithing stays at the edges */
.health-label { display: flex; align-items: baseline; gap: 5px; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.health-label small { font: 800 10px/1 Georgia, serif; letter-spacing: .18em; color: #cdb57a; }
.health-track {
  height: 14px; border: 1px solid #0a0907; border-radius: 2px;
  background: linear-gradient(180deg, #0c0b09, #1c1a15);
  box-shadow: 0 0 0 2px #45433c, 0 0 0 3px #16150f, 0 2px 6px 3px rgba(0, 0, 0, .45), inset 0 2px 3px rgba(0, 0, 0, .75);
}
.health-fill { background: linear-gradient(180deg, #e0685a 0, #b23a30 45%, #7e231d 100%); box-shadow: inset 0 1px 0 rgba(255, 210, 190, .35); }
.health-trail { background: linear-gradient(180deg, #c9887c, #8c4d45); }
/* Full Steel's ultimate protects exactly the final HP. A tiny steel ingot
   REPLACES that leftmost bit of the red fill, rather than adding a frame,
   changing the whole bar, or suggesting that the rest is invulnerable. */
.health-steel-last-hp {
  position: absolute;
  inset: 0 auto 0 0;
  width: max(1%, 3px);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    #ffffff 0%, #eef4f8 14%, #aab7c3 35%, #697782 68%,
    #35414a 85%, #b9c6d0 100%);
  border-right: 1px solid #f3f8fa;
  box-shadow: inset 1px 0 0 #fff, inset -1px 0 0 #36414a,
    1px 0 3px rgba(203, 225, 235, .5);
}
.health-armour.steel-floor .health-steel-last-hp { opacity: 1; }

.health-track::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(8, 6, 4, .55) calc(25% - 1px) 25%);
}
/* the brass caps at the bar's ends, riveted */
.health-armour::before, .health-armour::after {
  content: ""; position: absolute; top: -4px; bottom: -4px; width: 7px; z-index: 2; pointer-events: none; border-radius: 1px;
  background:
    radial-gradient(circle at 50% 50%, #f6e2a6 0 1px, #7a5a22 1.6px, transparent 2.3px) center / 7px 7px no-repeat,
    linear-gradient(90deg, #6d5020, #c69a45 45%, #8a672a);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.health-armour::before { left: -6px; }
.health-armour::after { right: -6px; }
.guard-block span { color: #f0dfb6; letter-spacing: .2em; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.guard-track {
  position: relative; height: 8px; border: 1px solid #0a0907; border-radius: 2px; margin-top: 6px;
  background: linear-gradient(180deg, #0c0b09, #1a1c18);
  box-shadow: 0 0 0 2px #3d3c36, 0 0 0 3px #14130e, inset 0 1px 2px rgba(0, 0, 0, .8);
}
.guard-fill { background: linear-gradient(180deg, #8fe0ec, #4fa9bd 55%, #2f7486); box-shadow: inset 0 1px 0 rgba(230, 250, 255, .35); }
.guard-block.sprinting .guard-fill { background: linear-gradient(180deg, #f2d78a, #c9a44e 55%, #8f7031); }
.guard-block.winded .guard-fill { background: linear-gradient(180deg, #d97a6c, #a8473c 55%, #74302a); }
/* a mark for each block the guard can take (a block costs a fifth and a bit of a full bar) */
.guard-track::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(22% - 1px), rgba(8, 6, 4, .6) calc(22% - 1px) 22%);
}

/* Sheathed in Steel: armour round the health bar, never a part of it (it is no extra health). Five riveted plates frame
   the bar, a band of steel above it and below; each holds a fifth of the armour's strength (--p, 0..1, set by the HUD)
   and, as that wears, thins, dulls, greys and cracks, the right-hand plates first, until each breaks away and only a
   thin battered edge is left. Called, the plates slam on one after another; while it holds, a glint runs along them;
   struck, the frame jolts, flashes and throws sparks, and what it turned aside rises off it. */
@property --glint { syntax: '<number>'; inherits: true; initial-value: -1; }
.health-armour { position: relative; --steel: 0; }
.armour-plate {
  --p: 0; --band: calc(1px + 4.5px * var(--p));
  --steel-hi: #f4f7fa; --steel-mid: #aab7c3; --steel-lo: #5c6874;
  --rivet: radial-gradient(circle, #fbfdfe 0 0.9px, #8a96a2 1.4px, #333b43 2.1px, transparent 2.6px);
  --shine: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, calc(.9 * var(--p))) 50%, transparent 70%);
  --shine-x: calc((var(--glint) * 5 - var(--i, 0)) * 100%);
  position: absolute; top: calc(-1 * var(--band) - 2px); bottom: calc(-1 * var(--band) - 2px); width: 20%;
  opacity: 0; pointer-events: none;
  background:
    var(--rivet) 3px 0 / 7px var(--band) no-repeat,
    var(--rivet) 3px 100% / 7px var(--band) no-repeat,
    var(--shine) var(--shine-x) 0 / 45% var(--band) no-repeat,
    var(--shine) var(--shine-x) 100% / 45% var(--band) no-repeat,
    linear-gradient(90deg, rgba(20, 24, 28, .75) 0 1px, transparent 1px) 0 0 / 100% var(--band) no-repeat,
    linear-gradient(90deg, rgba(20, 24, 28, .75) 0 1px, transparent 1px) 0 100% / 100% var(--band) no-repeat,
    linear-gradient(180deg, var(--steel-hi), var(--steel-mid) 50%, var(--steel-lo)) 0 0 / 100% var(--band) no-repeat,
    linear-gradient(180deg, var(--steel-mid), var(--steel-lo) 70%, #3c454e) 0 100% / 100% var(--band) no-repeat;
  filter: saturate(calc(.15 + .85 * var(--p))) brightness(calc(.55 + .55 * var(--p))) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
  transition: opacity .2s linear;
}
.armour-plate:nth-of-type(1) { left: -5px; width: calc(20% + 5px); }
.armour-plate:nth-of-type(2) { left: 20%; }
.armour-plate:nth-of-type(3) { left: 40%; }
.armour-plate:nth-of-type(4) { left: 60%; }
.armour-plate:nth-of-type(5) { left: 80%; right: -5px; width: auto; }
/* the end plates close round the bar's ends */
.armour-plate:nth-of-type(1)::before, .armour-plate:nth-of-type(5)::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: calc(var(--band) + 1px);
  background: linear-gradient(90deg, var(--steel-hi), var(--steel-mid) 55%, var(--steel-lo));
}
.armour-plate:nth-of-type(1)::before { left: 0; }
.armour-plate:nth-of-type(5)::before { right: 0; transform: scaleX(-1); }
.health-armour.sheathed .armour-plate { opacity: calc(.3 + .7 * var(--p)); }
/* a plate more than half worn shows a crack across both its bands */
.armour-plate::after {
  content: ""; position: absolute; left: 46%; top: 0; bottom: 0; width: 1.5px; opacity: 0;
  background: linear-gradient(180deg, #1d2227 0 var(--band), transparent var(--band) calc(100% - var(--band)), #1d2227 calc(100% - var(--band)));
  transform: skewX(-24deg);
}
.armour-plate.cracked::after { opacity: .9; }
/* its name over the frame's end, as strong as the armour */
.armour-tag {
  position: absolute; right: -5px; top: -21px; font: 800 9px/1 Georgia, serif; letter-spacing: .16em; color: #e4ecf3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8); opacity: 0; transition: opacity .25s linear; pointer-events: none;
}
.health-armour.sheathed .armour-tag { opacity: calc(.35 + .65 * var(--steel)); }
/* while it holds, a glint runs along the plates now and then */
.health-armour.sheathed { animation: armour-glint 2.8s linear infinite; }
@keyframes armour-glint { 0% { --glint: -0.4; } 50%, 100% { --glint: 1.4; } }
/* freshly called: the plates slam on one after another, white-hot, and settle */
.health-armour.called .armour-plate { animation: armour-slam .34s cubic-bezier(.2, 1.5, .45, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes armour-slam {
  0% { transform: translateY(-7px) scaleY(1.8); --steel-hi: #ffffff; --steel-mid: #ffffff; --steel-lo: #dfe8ef; }
  60% { --steel-hi: #ffffff; --steel-mid: #eef4f8; }
}
/* struck: the frame jolts and flashes white-hot for a moment, as bright as the armour is strong */
.health-armour.struck { animation: armour-jolt .16s ease-out, armour-glint 2.8s linear infinite; }
@keyframes armour-jolt { 25% { transform: translate(-2px, 1px); } 60% { transform: translate(2px, -1px); } }
.health-armour.struck .armour-plate { --steel-hi: #ffffff; --steel-mid: #f4f8fb; --steel-lo: #c9d5df; }
/* the sparks a blow strikes off it, and what it turned aside rising off the frame */
.armour-spark {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff8e6; box-shadow: 0 0 4px #ffe7b0;
  pointer-events: none; animation: armour-spark .38s ease-out forwards;
}
@keyframes armour-spark { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.armour-turned {
  position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); font: 900 12px/1 Georgia, serif; color: #eef4f9;
  text-shadow: 0 0 6px rgba(190, 215, 240, .8), 0 1px 2px rgba(0, 0, 0, .9); white-space: nowrap; pointer-events: none;
  animation: armour-turned .9s ease-out forwards;
}
.armour-turned small { font-size: 8px; letter-spacing: .14em; margin-left: 3px; opacity: .85; }
@keyframes armour-turned { 0% { opacity: 0; translate: 0 4px; } 15% { opacity: 1; } 100% { opacity: 0; translate: 0 -16px; } }
/* a plate worn through breaks away and falls */
@keyframes armour-fall { to { transform: translate(var(--dx, 6px), 22px) rotate(var(--turn, 24deg)); opacity: 0; } }
.health-armour .armour-plate.armour-fragment { opacity: .9; animation: armour-fall .7s ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
  .health-armour.called .armour-plate, .health-armour.sheathed, .health-armour.struck { animation: none; }
  .health-armour .armour-plate.armour-fragment, .armour-spark, .armour-turned { animation-duration: .01s; }
}
.ability[data-spell="gale"] .ability-icon { color: #bfe8c4; }
.ability[data-spell="steel"] .ability-icon { color: #d8e1ea; }
/* the spell tile says no with a small shake when its key can do nothing */
.ability.denied { animation: ability-denied .3s ease-out; }
@keyframes ability-denied { 20% { transform: translateX(-3px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-2px); } }
/* the ability tiles: a drawn icon in a soft ring, and the key on a small keycap */
.ability-icon { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 3px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .08), transparent 72%); }
.ability-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 45%, transparent)); }
.ability b { justify-self: end; align-self: start; min-width: 16px; padding: 2px 4px 1px; text-align: center; font: 800 9px/1 system-ui, sans-serif; color: #ece5d6; background: rgba(255, 255, 255, .06); border: 1px solid rgba(221, 214, 200, .32); border-bottom-width: 2px; border-radius: 3px; }
.ability.cooling .ability-icon { opacity: .8; }
.ability em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* while the spell cools its key is the gauntlet's: the fist on the tile (bright over the cooldown's shade), the spell's
   own mark small in the corner, its cooldown still counting; dimmed while the sword has the hand */
.ability.fist { border-color: #b9a37a; }
.ability.fist .ability-icon { position: relative; z-index: 1; color: #eadcb8; }
.ability.fist em { color: #cdbd98; }
.ability.fist.fist-held .ability-icon { opacity: .45; }
.ability-badge { position: absolute; right: 6px; bottom: 5px; z-index: 2; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(12, 13, 10, .88); border: 1px solid rgba(255, 255, 255, .14); color: #ff9a4a; }
.ability-badge:empty { display: none; }
.ability-badge svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ability[data-spell="frostfire"] .ability-badge { color: #8fdcff; }
.ability[data-spell="gale"] .ability-badge { color: #bfe8c4; }
.ability[data-spell="steel"] .ability-badge { color: #d8e1ea; }
@media (prefers-reduced-motion: reduce) { .ability.denied { animation: none; outline: 1px solid #9c6a55; } }

/* --- the ultimate: a tile of its own, brass-edged. Its shade drains as prowess is earned; full, it glows softly (a
   restrained cue: it is ready, not shouting); while it runs, a steady ember-dark light ------------------------------ */
.ability.ultimate { border-color: #7a6a44; background: radial-gradient(circle at 50% 120%, rgba(226, 120, 40, calc(var(--prowess-fraction, 0) * 0.45)), rgba(18, 20, 16, 0.95)); transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out; }
.ability.ultimate.prowess-draining { border-color: #ff9d42 !important; box-shadow: 0 0 14px rgba(255, 140, 50, 0.65), inset 0 0 10px rgba(255, 120, 30, 0.35) !important; animation: prowess-fluid-drain 0.4s ease-in-out infinite alternate; }
.ability.ultimate.practice-refill { animation: prowess-practice-refill 0.5s ease-out; }
@media (prefers-reduced-motion: reduce) { .ability.ultimate.prowess-draining, .ability.ultimate.practice-refill { animation: none; } }
.ability.ultimate .ability-icon { color: #d9b36a; }
.ability.ultimate em { color: #c9ae78; }
.ability.ultimate.ready { border-color: #e2c27a; box-shadow: 0 0 10px rgba(226, 194, 122, .35), inset 0 0 8px rgba(226, 194, 122, .18); animation: ultimate-ready 2.4s ease-in-out infinite; }
.ability.ultimate.ready strong { color: #f1dca6; }
.ability.ultimate.active { border-color: #c96a3a; box-shadow: 0 0 12px rgba(201, 106, 58, .45); }
.ability.ultimate.active .ability-icon { color: #f0a36a; }
.ability.ultimate.active strong { color: #f3c49a; }
/* while it runs: an instrument in use. A ring round the tile runs down with what is left of it, its edge beats like
   something alive, and for a Blazing Vortex it takes on what the knight has steered it to: the blade (hot white steel,
   a quick beat), the fire (deep orange, a slow one). Never garish: the numbers stay plain to read */
.ability.ultimate.active { --ring: #f0a36a; --beat: .8s; animation: ultimate-active var(--beat) ease-in-out infinite; }
.ability.ultimate.active::before {
  content: ""; position: absolute; inset: 0; padding: 2px; pointer-events: none;
  background: conic-gradient(from 0deg, var(--ring) calc(var(--left, 0) * 360deg), rgba(255, 255, 255, .07) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.ability.ultimate.active em { color: #f3c49a; }
.ability.ultimate.active[data-emphasis="blade"] { --ring: #ffe9c6; --beat: .42s; border-color: #e9d2aa; }
.ability.ultimate.active[data-emphasis="blade"] .ability-icon, .ability.ultimate.active[data-emphasis="blade"] em { color: #fff1d6; }
.ability.ultimate.active[data-emphasis="fire"] { --ring: #ff5a1e; --beat: 1.15s; border-color: #d2481a; }
.ability.ultimate.active[data-emphasis="fire"] .ability-icon, .ability.ultimate.active[data-emphasis="fire"] em { color: #ff8a4a; }
@keyframes ultimate-active { 0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--ring) 35%, transparent), inset 0 0 6px color-mix(in srgb, var(--ring) 14%, transparent); } 50% { box-shadow: 0 0 16px color-mix(in srgb, var(--ring) 62%, transparent), inset 0 0 11px color-mix(in srgb, var(--ring) 28%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ability.ultimate.active { animation: none; box-shadow: 0 0 12px color-mix(in srgb, var(--ring) 50%, transparent); } }
/* a Vortex's name as it is lit, and (that once) how it is steered, small, under it */
.status-flash small { display: block; margin-top: 3px; font: 700 9px/1.15 system-ui, sans-serif; letter-spacing: .1em; color: #efe2c4; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); opacity: .88; }
@keyframes ultimate-ready { 0%, 100% { box-shadow: 0 0 8px rgba(226, 194, 122, .28), inset 0 0 6px rgba(226, 194, 122, .12); } 50% { box-shadow: 0 0 14px rgba(226, 194, 122, .5), inset 0 0 10px rgba(226, 194, 122, .24); } }

/* --- stagger: balance lost, a thin bar under the stamina; red and pulsing near its break, dimmer while recovering */
.stagger-track { height: 3px; margin-top: 3px; background: rgba(17, 21, 16, .7); border: 1px solid rgba(72, 81, 74, .6); opacity: 0; transition: opacity .2s ease; }
.stagger-track.shown { opacity: 1; }
.stagger-fill { height: 100%; width: 0; background: linear-gradient(180deg, #e0b070, #b8733a); transition: width .08s linear; }
.stagger-track.warn .stagger-fill { background: linear-gradient(180deg, #ef7a62, #b03a2c); animation: stagger-warn .55s ease-in-out infinite; }
.stagger-track.recovering .stagger-fill { background: linear-gradient(180deg, #b8a58a, #7d6c55); animation: none; }
@keyframes stagger-warn { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* the ultimate named as it takes hold: ember on brass, a little letter-spaced (a declaration, not a hit marker) */
.status-flash.sunder { color: #f0b274; letter-spacing: .12em; text-shadow: 0 0 14px rgba(201, 106, 58, .55), 0 2px 3px rgba(0, 0, 0, .8); }
.status-flash.vortex { color: #ffc27a; letter-spacing: .12em; text-shadow: 0 0 14px rgba(255, 122, 40, .6), 0 2px 3px rgba(0, 0, 0, .8); }

/* the Practice Yard: the tile keeps the real cooldown (it counts down as in a match), and a small brass mark says why
   the key works anyway */
.ability.practice::before { content: "\221E PRACTICE"; position: absolute; right: 6px; bottom: 4px; z-index: 2; padding: 1px 4px; font: 800 7px/1 system-ui, sans-serif; letter-spacing: .12em; color: #2a1c10; background: linear-gradient(180deg, #e7c47c, #b8893f); border-radius: 2px; pointer-events: none; }
.ability.practice .ability-icon { opacity: 1; }

/* what a Spellblade is saying, as he says it: at the foot of the view, above the bars, gone when he is done */
.subtitle {
  position: absolute; left: 50%; bottom: 112px; max-width: min(640px, 72cqw); padding: 5px 12px 6px; border-radius: 2px;
  background: rgba(12, 10, 8, .58); color: #f3e6c4; font: 400 17px/1.3 var(--font-inscription, Georgia, serif); text-align: center;
  text-shadow: 0 1px 2px #000; opacity: 0; transform: translate(-50%, 4px); transition: opacity .18s ease, transform .18s ease; pointer-events: none;
}
.subtitle.show { opacity: 1; transform: translate(-50%, 0); }
.subtitle b { margin-right: 8px; color: #e6c47c; font: 800 11px/1 var(--font-script, system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; }
.subtitle.mine span { color: #fff3d6; }
.touch-ui .subtitle { bottom: calc(var(--safe-b, 0px) + 16px); max-width: min(440px, 44cqw); padding: 4px 10px 5px; font-size: 14px; }
/* Ram has two raised instrument badges: context and PISTON READY. */
.hud.ram-mounted {--siege-label-clearance:44px;}
/* Only mounted captions move: sit precisely above the real measured hull
 * and fist assembly. Normal Spellblade captions retain their own position.
 * A dynamic pixel height avoids overlap on narrow devices, broken pistons,
 * and localizations that wrap health labels. */
.hud.ballista-mounted #subtitle {
  bottom:calc(var(--safe-b, 0px) + var(--siege-gauge-height, 54px) + var(--siege-label-clearance, 28px) + 8px);
  max-width:min(650px,76cqw);z-index:15;
}
.touch-ui .hud.ballista-mounted #subtitle {
  bottom:calc(var(--safe-b, 0px) + var(--siege-gauge-height, 54px) + var(--siege-label-clearance, 28px) + 6px);
  max-width:min(500px,66cqw);
}
@container app (max-height: 420px) {
  .hud.ballista-mounted #subtitle {font-size:13px;line-height:1.2;}
}
/* the front door's: what he says out on his round, under the fight (right of the banner, where it is framed) */
.subtitle.menu-caption { left: 68%; bottom: 9%; z-index: 3; }
.touch-ui .subtitle.menu-caption { left: 70%; bottom: calc(var(--safe-b, 0px) + 12px); }
/* the defeat screen's: what he says of the lost match, in the medallion's place at the head of the card (the medallion
   gives way while he says it; the two share a cell, so nothing on the screen moves). On a touch screen, where the
   medallion is not shown, at the foot of the view as in the arena */
.end-medallion { grid-row: 1; grid-column: 1; transition: opacity .18s ease; }
.subtitle.end-caption { position: relative; left: auto; bottom: auto; grid-row: 1; grid-column: 1; width: auto !important; max-width: min(600px, 86cqw); transform: translateY(4px); z-index: 1; }
.subtitle.end-caption.show { transform: none; }
.end-screen:has(.end-caption.show) .end-medallion { opacity: 0; }
.touch-ui .subtitle.end-caption { position: fixed; left: 50%; bottom: calc(var(--safe-b, 0px) + 12px); grid-row: auto; grid-column: auto; transform: translate(-50%, 4px); }
.touch-ui .subtitle.end-caption.show { transform: translate(-50%, 0); }
/* (and wherever the medallion is put away for want of height: mobile.css) */
@container app (max-height: 500px) {
  .subtitle.end-caption { position: fixed; left: 50%; bottom: calc(var(--safe-b, 0px) + 12px); grid-row: auto; grid-column: auto; transform: translate(-50%, 4px); }
  .subtitle.end-caption.show { transform: translate(-50%, 0); }
}
.siege-machine-choice {
  display: grid;
  gap: .35rem;
  font: 800 10px/1.3 var(--font-script, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #cbb78d;
  margin: .6rem 0;
}
.siege-machine-choice select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  padding: .55rem 2.2rem .55rem .75rem;
  color: #f4e3be;
  background-color: #241c17;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5L6 6l4.5-4.5' stroke='%23dcb770' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"), linear-gradient(180deg, #34281e 0%, #1e1612 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 10px center, 0 0;
  border: 1px solid #9c7c4a;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .5);
  font: 700 11px/1.35 var(--font-inscription, Georgia, serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.siege-machine-choice select:hover {
  border-color: #dcb770;
  color: #fff3d8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 8px rgba(220, 183, 112, .32);
}
.siege-machine-choice select:focus-visible {
  outline: 2px solid #8fd4e4;
  outline-offset: 1px;
  border-color: #8fd4e4;
}
.siege-machine-choice select:disabled {
  opacity: .5;
  cursor: default;
}
.siege-machine-choice select option {
  background-color: #241c17;
  color: #f4e3be;
  font-family: var(--font-inscription, Georgia, serif);
  font-size: 12px;
  padding: 8px 10px;
}
.drive-pressure { display: block; font-size: .67rem; letter-spacing: .09em; color: #d6b875; }
.drive-pressure[hidden] { display: none; }
.drive-pressure output { float: right; }
.drive-pressure progress { display: block; width: 100%; height: .4rem; accent-color: #c7a456; margin-top: .25rem; }


/* The High Grounds: compact, readable territory status and player-operated
   foundry controls. The buttons are usable while the arena HUD is visible. */
.high-grounds-status {
  position: absolute;
  top: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 24;
  width: min(92vw, 700px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  text-align: center;
  pointer-events: none;
  color: #f8edcf;
  text-shadow: 0 1px 3px #111, 0 2px 5px #111;
}
.high-grounds-status strong { font-size: .82rem; letter-spacing: .14em; }
#high-grounds-score { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#high-grounds-sites { max-width: 100%; font-size: .63rem; line-height: 1.4; }
.high-grounds-foundry {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: min(24vh, 180px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: .7rem;
  width: min(94vw, 460px);
  background: rgba(29, 33, 32, .91);
  color: #f4e7c3;
  border: 1px solid #bc9859;
  border-radius: 8px;
  pointer-events: auto;
}
.high-grounds-foundry strong { letter-spacing: .1em; }
.high-grounds-foundry small { text-align: center; }
.high-grounds-machine-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.high-grounds-machine-buttons button {
  padding: .5rem .6rem;
  font-size: .7rem;
  font-weight: bold;
  border: 1px solid #be995e;
  border-radius: 4px;
  background: #534435;
  color: #fff2d1;
  cursor: pointer;
  touch-action: manipulation;
}
.high-grounds-machine-buttons button:disabled { opacity: .4; cursor: not-allowed; }
.high-grounds-status.hidden, .high-grounds-foundry.hidden { display: none; }
@media (max-width: 650px) {
  .high-grounds-status { top: 2.25rem; }
  .high-grounds-foundry { bottom: 18%; }
  #high-grounds-sites { font-size: .53rem; }
}

/* High Grounds now uses the same composed objective hierarchy as Breakthrough.
   Do not put a second, screen-wide text banner over the battle. */
.breakthrough-hud[data-mode="high-grounds"] { width:min(368px,100%); border-color:rgba(200,163,93,.55); }
.breakthrough-hud[data-mode="high-grounds"] .bt-phase { font-size:8px; letter-spacing:.015em; }
.breakthrough-hud[data-mode="high-grounds"] .bt-obj-name { font-size:13px; }
.breakthrough-hud[data-mode="high-grounds"] .bt-bar-track { height:3px; }
.breakthrough-hud[data-mode="high-grounds"] .bt-footer { color:#d4c39c; }
.high-grounds-status { display:none !important; }

/* A contextual and collapsible foundry — never a permanent combat modal.
   Remains a native <details> with keyboard and touch activation. */
.high-grounds-foundry {
  top:105px; left:calc(var(--safe-l,0px) + 12px); right:auto; bottom:auto;
  transform:none; width:min(292px,calc(100% - 24px));
  max-height:calc(100% - 118px); overflow-y:auto;
  padding:0; display:block; text-align:left;
  background:linear-gradient(160deg,rgba(43,35,27,.97),rgba(20,22,20,.97));
  border:1px solid rgba(193,158,94,.72); border-top:2px solid #c7a265;
  border-radius:7px; box-shadow:0 6px 24px #0009;
  pointer-events:auto; touch-action:pan-y;
}
.high-grounds-foundry details { width:100%; }
.high-grounds-foundry summary {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; cursor:pointer; list-style:none; touch-action:manipulation;
  font:800 10px/1.35 var(--font-inscription,Georgia,serif);
  color:#efdaa9; letter-spacing:.07em;
}
.high-grounds-foundry summary::-webkit-details-marker { display:none; }
.high-grounds-foundry summary::after { content:'▾'; font:900 13px system-ui,sans-serif; color:#e0ba70; }
.high-grounds-foundry details[open] summary::after { content:'▴'; }
.high-grounds-foundry summary span { white-space:nowrap; }
.high-grounds-foundry summary small { font:700 9px/1.2 system-ui,sans-serif; color:#d9c6a1; letter-spacing:0; }
#high-grounds-foundry-hint {
  margin:0 10px 8px; padding:6px 8px; border-left:2px solid #a9905d;
  font:700 9px/1.3 system-ui,sans-serif; color:#d6c7a8;
}
.high-grounds-machine-buttons {
  padding:0 10px 10px; display:grid; grid-template-columns:1fr; gap:5px;
}
.high-grounds-machine-buttons button {
  min-height:42px; display:grid; grid-template-columns:24px minmax(0,1fr);
  grid-template-rows:auto auto; gap:1px 8px; align-items:center; text-align:left;
  padding:6px 9px; border-radius:4px;
  color:#eee1c6; background:linear-gradient(180deg,#46372b,#302922);
  border:1px solid #8d7955; box-shadow:inset 0 1px #ffffff10;
  touch-action:manipulation; cursor:pointer;
}
.high-grounds-machine-buttons button:not(:disabled):is(:hover,:focus-visible) {
  background:linear-gradient(180deg,#645139,#3b3126);
  border-color:#d7b777; outline-offset:2px;
}
.high-grounds-machine-buttons button kbd {
  grid-row:1/3; display:grid;place-items:center;
  width:23px;height:24px; background:#181b19;border:1px solid #ad9364;
  color:#f0d4a1; font:800 12px monospace;
}
.high-grounds-machine-buttons button b { font-size:10px; letter-spacing:.05em; }
.high-grounds-machine-buttons button small { font-size:9px; color:#c0b092; }
.high-grounds-machine-buttons button:disabled { opacity:.42; cursor:not-allowed; }
.high-grounds-foundry.hidden { display:none; }
@container app (max-height:500px) {
  .high-grounds-foundry { top:calc(var(--safe-t,0px) + 84px); max-height:calc(100% - 92px); width:min(258px,36cqw); }
  .high-grounds-foundry summary { padding:7px 9px; font-size:9px; }
  .high-grounds-machine-buttons button { min-height:35px; padding:4px 7px; }
}