/* The front door: heraldic banners hung over a live, slow shot of Castleward. Crimson cloth with a cream border
   and the Spellblade's stepped hem, brass fittings, iron plaques, parchment fields. */

:root {
  --heraldry-crimson: #8a2922;
  --heraldry-crimson-deep: #5b1a16;
  --heraldry-cream: #eadcb6;
  --heraldry-brass: #c99c52;
  --heraldry-brass-light: #ecc97f;
  --heraldry-iron: #221d19;
  --heraldry-iron-light: #3a322b;
  --heraldry-parchment: #e3d4ac;
  --heraldry-ink: #2a1f17;
  --heraldry-magic: #68cee1;
  --font-inscription: "IM Fell English SC", Georgia, "Times New Roman", serif;
  --font-script: "Alegreya Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --banner-left: clamp(18px, 4cqw, 64px);
  --banner-width: min(372px, 34cqw);
  --hem: 38px;
}

/* --- the living backdrop ------------------------------------------------------------------------------------ */
.menu-world { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #1a1511; }
.menu-sky { position: absolute; inset: 0; background: linear-gradient(#7f97aa 0%, #e9d3aa 55%, #7d7a55 56%, #4b5234 100%); }
.menu-hills { position: absolute; bottom: -17cqh; width: 68cqw; height: 45cqh; border-radius: 50% 50% 0 0; background: #435535; }
.hill-left { left: -15cqw; transform: rotate(4deg); }
.hill-right { right: -20cqw; bottom: -13cqh; background: #52613b; transform: rotate(-5deg); }
.menu-castle-silhouette { position: absolute; left: 58%; top: 16cqh; width: min(46cqw, 690px); height: 260px; transform: translateX(-50%); opacity: .35; pointer-events: none; }
.menu-castle-silhouette i { position: absolute; bottom: 0; display: block; background: #6d6c5d; border-top: 5px solid #83806e; }
.menu-castle-silhouette i:nth-child(1) { left: 13%; width: 16%; height: 55%; }
.menu-castle-silhouette i:nth-child(2) { left: 28%; width: 44%; height: 38%; }
.menu-castle-silhouette i:nth-child(3) { right: 13%; width: 16%; height: 55%; }
.menu-castle-silhouette i:nth-child(4) { left: 21%; width: 8%; height: 68%; }
.menu-castle-silhouette i:nth-child(5) { right: 21%; width: 8%; height: 68%; }
/* the Spellblade and Castleward fill the whole screen, so turning him never crops his blade */
.menu-spellblade { position: absolute; inset: 0; z-index: 2; cursor: grab; touch-action: none; }
.menu-spellblade:active { cursor: grabbing; }
.menu-spellblade canvas { width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity .9s ease; }
.menu-spellblade.menu-spellblade-ready canvas { opacity: 1; }
.menu-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background:
  radial-gradient(ellipse at 62% 48%, transparent 38%, rgba(18, 12, 8, .45) 100%); transition: background-position .42s ease; }
/* (the shade the crimson banner stands against: lifted, most of the way, when the banner is drawn aside, and the
   vignette centred, so the newly opened left of the yard is not left dim) */
.menu-vignette::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 14, 10, .55) 0%, rgba(20, 14, 10, .18) 32%, transparent 55%); transition: opacity .42s ease; }
.menu-vignette::after { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, transparent 46%, rgba(18, 12, 8, .32) 100%); transition: opacity .42s ease; }
.menu-world.observing .menu-vignette { background: none; }
.menu-world.observing .menu-vignette::before { opacity: .18; }
.menu-world.observing .menu-vignette::after { opacity: 1; }
/* out on his round he cannot be turned by hand: no grab offered */
.menu-spellblade.touring { cursor: default; }
.menu-spellblade.touring:active { cursor: default; }
.turn-hint { position: absolute; z-index: 5; right: clamp(18px, 3cqw, 44px); bottom: 20px; color: rgba(245, 232, 200, .72); font: 13px/1 var(--font-inscription); letter-spacing: .12em; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); pointer-events: none; white-space: nowrap; }

/* --- banners ------------------------------------------------------------------------------------------------ */
.menu-screen, .side-screen, .lobby-screen { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
/* the brass rod every banner hangs from */
.menu-screen::after, .side-screen::after, .lobby-screen::after {
  content: ""; position: absolute; z-index: 2; top: 12px; left: calc(var(--banner-left) - 22px); width: calc(var(--banner-width) + 44px); height: 9px;
  border-radius: 5px; background: linear-gradient(#f2d692, #b98a3e 55%, #6f5122); box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
}
.banner-panel {
  position: absolute; top: 16px; left: var(--banner-left); width: var(--banner-width); max-height: calc(100% - 16px);
  display: flex; flex-direction: column; gap: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 34px 30px calc(var(--hem) + 26px); pointer-events: auto; color: var(--heraldry-cream);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 9%, transparent 91%, rgba(0, 0, 0, .3)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #74211b 0%, var(--heraldry-crimson) 38%, #7a241d 100%);
  /* the Spellblade's stepped hem */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hem)), 80% calc(100% - var(--hem)), 80% calc(100% - var(--hem) / 2), 60% calc(100% - var(--hem) / 2), 60% 100%, 40% 100%, 40% calc(100% - var(--hem) / 2), 20% calc(100% - var(--hem) / 2), 20% calc(100% - var(--hem)), 0 calc(100% - var(--hem)));
  animation: banner-unfurl .24s cubic-bezier(.2, .8, .2, 1) both;
}
.banner-panel::-webkit-scrollbar { display: none; }
/* cream border stitched inside the cloth, following the hem */
.banner-panel::before {
  content: ""; position: absolute; inset: 9px 9px calc(var(--hem) + 9px); border: 2px solid rgba(234, 220, 182, .82);
  box-shadow: inset 0 0 0 4px rgba(91, 26, 22, .6), inset 0 0 0 5px rgba(234, 220, 182, .28); pointer-events: none;
}
.banner-panel > * { position: relative; animation: banner-content .18s ease-out both; }
.banner-panel > *:nth-child(2) { animation-delay: .02s; }
.banner-panel > *:nth-child(3) { animation-delay: .04s; }
.banner-panel > *:nth-child(n + 4) { animation-delay: .06s; }
@keyframes banner-unfurl {
  from { clip-path: polygon(0 0, 100% 0, 100% 0, 80% 0, 80% 0, 60% 0, 60% 0, 40% 0, 40% 0, 20% 0, 20% 0, 0 0); }
}
@keyframes banner-content { from { opacity: 0; transform: translateY(-6px); } }

.crest { display: block; width: 52px; height: 62px; margin: 0 auto 10px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.grimoirelee-crest { width: 64px; height: 86px; max-width: 100%; object-fit: contain; }
.crest-field { fill: var(--heraldry-crimson-deep); }
.crest-border { fill: none; stroke: var(--heraldry-brass); stroke-width: 3; }
.crest-charge { fill: none; stroke: var(--heraldry-brass-light); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.game-brand { text-align: center; margin: 0 0 18px; }
.banner-panel .eyebrow { margin: 0 0 6px; color: var(--heraldry-brass-light); font: 13px/1 var(--font-inscription); letter-spacing: .28em; }
.game-brand h1 {
  margin: 0; font: 400 clamp(34px, 3.4cqw, 46px)/.95 var(--font-inscription); letter-spacing: .04em; text-transform: none; text-wrap: balance;
  color: #f1dfae; text-shadow: 0 2px 0 rgba(58, 18, 14, .9), 0 3px 10px rgba(0, 0, 0, .5);
}
.game-brand h1 span { color: var(--heraldry-brass-light); font-size: .8em; }

.command-rail { display: flex; flex-direction: column; gap: 7px; }
.name-block { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.banner-panel .field-label { margin: 0; color: rgba(234, 220, 182, .82); font: 800 10px/1 var(--font-script); letter-spacing: .2em; }
.banner-panel .game-input {
  height: 42px; padding: 9px 12px; border: 1px solid rgba(99, 70, 38, .9); border-radius: 2px;
  background: linear-gradient(#e9dbb4, var(--heraldry-parchment)); color: var(--heraldry-ink); font: 600 16px/1 var(--font-script);
  box-shadow: inset 0 2px 5px rgba(80, 52, 24, .35), 0 1px 0 rgba(255, 240, 200, .2);
}
.banner-panel .game-input::placeholder { color: rgba(60, 42, 26, .5); }
.banner-panel .game-input:focus { outline: 2px solid var(--heraldry-brass-light); outline-offset: 1px; }

/* commands are iron plaques with brass rims */
.menu-command, .mode-choice, .wide-button, .join-button {
  position: relative; width: 100%; min-height: 54px; padding: 9px 30px 10px; border: 1px solid rgba(201, 156, 82, .5); border-radius: 2px;
  background: linear-gradient(180deg, var(--heraldry-iron-light), var(--heraldry-iron)); color: var(--heraldry-cream); text-align: center; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, .1), 0 2px 4px rgba(0, 0, 0, .35);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.menu-command::before, .mode-choice::before, .wide-button::before, .join-button::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -4px; transform: rotate(45deg);
  background: rgba(201, 156, 82, .55); transition: background .14s ease, box-shadow .14s ease;
}
.menu-command:hover, .mode-choice:hover, .wide-button:hover:not(:disabled), .join-button:hover {
  transform: translateX(3px); border-color: var(--heraldry-brass-light);
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, .16), 0 0 0 1px rgba(236, 201, 127, .35), 0 4px 12px rgba(0, 0, 0, .4);
}
.menu-command:hover::before, .mode-choice:hover::before, .wide-button:hover::before, .join-button:hover::before { background: var(--heraldry-brass-light); box-shadow: 0 0 8px rgba(236, 201, 127, .8); }
.menu-command:focus-visible, .mode-choice:focus-visible, .wide-button:focus-visible, .join-button:focus-visible, .back-button:focus-visible { outline: 2px solid var(--heraldry-brass-light); outline-offset: 2px; }
.menu-command span, .mode-choice span { display: block; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; font: 400 18px/1.12 var(--font-inscription); letter-spacing: .04em; }
.menu-command small, .mode-choice small { display: block; margin-top: 3px; color: rgba(234, 220, 182, .66); font: 500 11px/1.3 var(--font-script); letter-spacing: .02em; }
/* online commands wait for the game server: dimmed, still readable, saying why */
.menu-command.needs-server { opacity: .55; cursor: not-allowed; filter: saturate(.6); }
.menu-command.needs-server:hover { transform: none; }
.link-status { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 5px 8px; border: 1px solid rgba(201, 156, 82, .35); background: rgba(20, 16, 12, .55); color: #e8d6a8; font: 600 11px/1.25 var(--font-script); white-space: nowrap; }
.link-status p { flex: 1; min-width: 0; margin: 0; display: grid; gap: 1px; }
.link-status .link-title { overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.link-status .link-note { overflow: hidden; text-overflow: ellipsis; color: rgba(232, 214, 168, .62); font: 600 9.5px/1.2 var(--font-script); letter-spacing: .04em; }
.link-status .link-note:empty { display: none; }
/* the empty error line gives its room to the status while there is nothing to say */
.banner-panel #menu-error:empty { min-height: 0; margin: 0; }
.link-status.hidden { display: none; }
.link-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #d9a441; box-shadow: 0 0 6px rgba(217, 164, 65, .8); animation: link-pulse 1.4s ease-in-out infinite; }
.link-status.offline::before { background: #c9564a; box-shadow: 0 0 6px rgba(201, 86, 74, .8); }
.link-status.restored::before { background: #7fc26b; box-shadow: 0 0 6px rgba(127, 194, 107, .8); animation: none; }
.link-status button { flex: none; padding: 3px 7px; border: 1px solid rgba(201, 156, 82, .6); background: rgba(52, 42, 30, .9); color: inherit; font: inherit; letter-spacing: .12em; cursor: pointer; }
.link-status:not(.offline) button { display: none; }
@keyframes link-pulse { 50% { opacity: .35; } }

/* WORTHY CHALLENGERS AWAIT YOU: a herald's banner dropped over the front door */
/* centred over the scene, right of the menu banner (about 300 px wide on the left) */
.herald-toast { position: fixed; left: calc(50cqw + 170px); top: calc(env(safe-area-inset-top, 0px) + 18px); z-index: 95; display: grid; justify-items: center; gap: 4px; max-width: calc(100cqw - 380px); padding: 12px 26px 13px; transform: translateX(-50%); border: 1px solid rgba(232, 196, 124, .8); background: linear-gradient(180deg, #8c2a23, #5c1b17); color: #f5e6bd; text-align: center; box-shadow: 0 0 0 4px rgba(20, 16, 12, .7), 0 14px 38px rgba(0, 0, 0, .55); pointer-events: none; animation: herald-in .5s cubic-bezier(.2, .8, .2, 1.1) both; }
.herald-toast.hidden { display: none; }
.herald-toast.leaving { animation: herald-out .45s ease-in both; }
.herald-toast b { white-space: nowrap; font: 400 clamp(14px, 2.3cqw, 24px)/1.1 var(--font-inscription); letter-spacing: .08em; color: #f7dd98; text-shadow: 0 2px 0 rgba(40, 10, 8, .6); }
.herald-toast small { font: 600 11px/1.2 var(--font-script); letter-spacing: .12em; color: rgba(245, 230, 189, .78); }
@keyframes herald-in { from { opacity: 0; transform: translate(-50%, -24px); } }
@keyframes herald-out { to { opacity: 0; transform: translate(-50%, -18px); } }

/* the primary command is gilded */
.primary-command { background: linear-gradient(180deg, #e7c47c, #b8893f 60%, #97702f); border-color: #f4dc9f; color: #2a1c10; }
.primary-command::before { background: rgba(58, 36, 14, .6); }
.primary-command small { color: rgba(42, 28, 16, .72); }
.primary-command:hover { background: linear-gradient(180deg, #f0d08a, #c4954a 60%, #a07833); }
.primary-command:hover::before { background: #3a2410; box-shadow: none; }
.quiet-command { min-height: 38px; }
.banner-panel .error-copy { min-height: 16px; margin: 4px 0 0; color: #ffd1c2; font: 600 12px/1.35 var(--font-script); text-shadow: 0 1px 2px #000; }

/* --- side banners (Solo, Private, How to Play) ---------------------------------------------------------------- */
.side-screen::before { display: none; }
.side-screen-inner { transform: none; }
.side-screen .banner-panel h2, .lobby-screen h2 { margin: 2px 0 12px; font: 400 30px/1 var(--font-inscription); letter-spacing: .03em; color: #f1dfae; text-shadow: 0 2px 0 rgba(58, 18, 14, .9); }
.back-button {
  align-self: flex-start; margin: 0 0 14px; padding: 5px 10px 5px 8px; border: 1px solid rgba(201, 156, 82, .5); border-radius: 2px;
  background: rgba(34, 29, 25, .55); color: var(--heraldry-cream); font: 13px/1 var(--font-inscription); letter-spacing: .12em; cursor: pointer;
}
.back-button:hover { border-color: var(--heraldry-brass-light); color: #fff3d0; }
.banner-panel .panel-copy { margin: 0 0 14px; color: rgba(234, 220, 182, .82); font: 500 13px/1.5 var(--font-script); }
.banner-panel .mode-choice { min-height: 62px; margin: 0 0 8px; }
.banner-panel .private-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: rgba(234, 220, 182, .6); font: 12px/1 var(--font-inscription); letter-spacing: .2em; }
.banner-panel .private-divider::before, .banner-panel .private-divider::after { content: ""; flex: 1; border-top: 1px solid rgba(201, 156, 82, .45); }
.banner-panel .join-row { display: grid; grid-template-columns: 1fr 96px; gap: 8px; }
.banner-panel .room-input { text-transform: uppercase; letter-spacing: .2em; font-weight: 800; }
.banner-panel .join-button { min-height: 42px; padding: 8px 10px 8px 24px; font: 15px/1 var(--font-inscription); letter-spacing: .1em; }
.banner-panel .join-button::before { left: 9px; }
#solo-name, #private-name, #breakthrough-name { margin: 6px 0 10px; width: 100%; }
.manual-inner { --banner-width: min(440px, 40cqw); width: var(--banner-width); }
.breakthrough-inner { --banner-width: min(530px, 44cqw); width: var(--banner-width); }
.scenario-subtitle { margin: -6px 0 10px; font: 700 11px/1.2 var(--font-inscription); letter-spacing: .25em; color: var(--heraldry-brass-light); text-transform: uppercase; }
.key-controls-grid { display: grid; }
.banner-panel .controls-grid { grid-template-columns: 96px 1fr; align-items: baseline; gap: 7px 14px; padding: 12px 0; border-top: 1px solid rgba(201, 156, 82, .45); border-bottom: 1px solid rgba(201, 156, 82, .45); }
.banner-panel .controls-grid span { color: var(--heraldry-brass-light); font: 12px/1.2 var(--font-inscription); letter-spacing: .1em; }
.banner-panel .controls-grid b { color: var(--heraldry-cream); font: 500 13px/1.3 var(--font-script); }
.banner-panel .rules-copy { margin: 12px 0 0; color: rgba(234, 220, 182, .82); font: 500 12.5px/1.55 var(--font-script); }

/* --- lobby: the same banner, listing who stands in the room ---------------------------------------------------- */
.lobby-screen { display: block; background: none; }
.lobby-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 11, 8, .5), rgba(16, 11, 8, .1) 55%); pointer-events: none; }
.lobby-content { text-align: left; }
.lobby-banner { position: static; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(201, 156, 82, .45); }
.lobby-banner span { font: 18px/1 var(--font-inscription); letter-spacing: .1em; color: var(--heraldry-brass-light); }
.lobby-banner small { color: rgba(234, 220, 182, .7); font: 800 10px/1 var(--font-script); letter-spacing: .18em; }
.lobby-content .eyebrow { display: none; }
.code-button { border: 0; padding: 0 2px; background: transparent; color: var(--heraldry-brass-light); font: inherit; letter-spacing: .08em; cursor: pointer; border-bottom: 1px dashed rgba(236, 201, 127, .5); }
.lobby-state { margin: -4px 0 10px; color: rgba(234, 220, 182, .8); font: 800 10px/1.3 var(--font-script); letter-spacing: .16em; }
.player-list { margin: 0 0 12px; border-top: 1px solid rgba(201, 156, 82, .35); }
.lobby-player { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px; border-bottom: 1px solid rgba(201, 156, 82, .25); }
.lobby-player b { font: 17px/1 var(--font-inscription); letter-spacing: .03em; }
.player-rune { color: var(--heraldry-brass-light); }
.lobby-player em { color: #b9dca8; font: 800 9px/1 var(--font-script); font-style: normal; letter-spacing: .14em; }
.wide-button { min-height: 46px; font: 16px/1 var(--font-inscription); letter-spacing: .08em; text-align: left; }
.wide-button:disabled { opacity: .55; cursor: default; }
#start-match, #lobby-leave, #copy-link { margin: 0 0 8px; }
.banner-panel .small-copy { margin: 4px 0 0; color: rgba(234, 220, 182, .7); font: 500 12px/1.45 var(--font-script); }

/* --- a worthy challenger: the countdown card between the lobby and the arena ------------------------------------ */
.challenge-card { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; background: radial-gradient(ellipse at center, rgba(20, 12, 8, .55), rgba(10, 6, 4, .88) 70%); animation: veil-in .35s ease-out both; }
.challenge-inner { text-align: center; color: var(--heraldry-cream); animation: challenge-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.challenge-inner .eyebrow { margin: 0 0 14px; color: var(--heraldry-brass-light); font: 16px/1 var(--font-inscription); letter-spacing: .32em; }
.challenge-names { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3cqw, 34px); }
.challenge-names b { min-width: 7ch; font: 400 clamp(26px, 4cqw, 48px)/1 var(--font-inscription); letter-spacing: .04em; color: #f4e3b4; text-shadow: 0 3px 12px rgba(0, 0, 0, .7); }
.challenge-names b:first-child { text-align: right; }
.challenge-names b:last-child { text-align: left; color: #f1b8a6; }
.challenge-swords { width: clamp(38px, 5cqw, 58px); height: clamp(38px, 5cqw, 58px); fill: none; stroke: var(--heraldry-brass-light); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(236, 201, 127, .45)); }
.challenge-count { margin: 18px 0 6px; font: 400 clamp(54px, 8cqw, 96px)/1 var(--font-inscription); color: var(--heraldry-brass-light); font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(236, 201, 127, .35); }
.challenge-count.tick { animation: count-tick .5s ease-out; }
.challenge-copy { margin: 0; color: rgba(234, 220, 182, .75); font: 700 12px/1 var(--font-script); letter-spacing: .24em; text-transform: uppercase; }
@keyframes challenge-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes count-tick { from { transform: scale(1.35); opacity: .4; } }
@keyframes veil-in { from { opacity: 0; } }

/* --- the arena gate: black opens onto the arena with its name ------------------------------------------------- */
.arena-gate { position: fixed; inset: 0; z-index: 45; display: grid; place-content: center; gap: 8px; text-align: center; pointer-events: none; background: #0c0806; color: var(--heraldry-cream); animation: gate-open 1.25s ease-in both; }
.arena-gate p { margin: 0; font: 400 clamp(30px, 5cqw, 58px)/1 var(--font-inscription); letter-spacing: .12em; color: #f1dfae; animation: gate-title 1.25s ease-out both; }
.arena-gate small { color: var(--heraldry-brass-light); font: 800 11px/1 var(--font-script); letter-spacing: .3em; animation: gate-title 1.25s ease-out both; }
@keyframes gate-open { 0%, 35% { background: rgba(12, 8, 6, 1); } 100% { background: rgba(12, 8, 6, 0); } }
@keyframes gate-title { 0% { opacity: 0; transform: translateY(6px); } 25%, 60% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* --- loading: crest, name and a brass thread of progress -------------------------------------------------------- */
.loading-veil { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, #2a1d15, #120c09 70%); color: var(--heraldry-cream); transition: opacity .7s ease, visibility 0s linear .7s; }
.loading-veil.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-inner { display: grid; justify-items: center; gap: clamp(5px, 1.5cqh, 12px); width: min(94cqw, 620px); box-sizing: border-box; padding: 12px; max-height: calc(100cqh - 24px); }
.loading-inner .crest { width: clamp(88px, 18cqw, 152px); height: clamp(108px, 29cqh, 220px); margin: 0; object-fit: contain; animation: crest-glow 2.4s ease-in-out infinite; }
.loading-title { margin: clamp(4px, 1.2cqh, 12px) 0 0; font: 400 clamp(26px, 3.2cqw, 38px)/1 var(--font-inscription); letter-spacing: .06em; color: #f1dfae; }
.loading-title span { color: var(--heraldry-brass-light); }
.loading-bar { width: min(260px, 60cqw); height: 3px; background: rgba(201, 156, 82, .2); overflow: hidden; }
.loading-bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #9a7336, var(--heraldry-brass-light)); transition: transform .25s ease-out; }
.loading-copy { margin: 0; color: rgba(234, 220, 182, .7); font: 500 13px/1 var(--font-script); letter-spacing: .08em; }
@media (max-height: 390px) {
  .loading-inner .crest { width: min(26cqw, 120px); height: min(27cqh, 120px); }
  .loading-title { margin-top: 0; }
}
@keyframes crest-glow { 50% { filter: drop-shadow(0 0 10px rgba(236, 201, 127, .45)); } }

/* --- arena menu and match end share the heraldry --------------------------------------------------------------- */
.pause-card { border: 1px solid rgba(201, 156, 82, .6); background: linear-gradient(180deg, #2b231d, #1b1612); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }
.pause-card h2 { font: 400 30px/1 var(--font-inscription); color: #f1dfae; }
.pause-card p { font: 500 13px/1.5 var(--font-script); color: rgba(234, 220, 182, .8); }
.end-screen h2 { font-family: var(--font-inscription); font-weight: 400; color: #f1dfae; }
.end-screen .eyebrow { color: var(--heraldry-brass-light); font-family: var(--font-inscription); font-size: 14px; letter-spacing: .3em; }
.end-medallion { border-color: rgba(236, 201, 127, .6); color: var(--heraldry-brass-light); }
.final-row b { font: 17px/1 var(--font-inscription); }

@container app (max-width: 900px) {
  :where(#game-shell) > * { --banner-width: min(330px, 44cqw); }
  .manual-inner { --banner-width: min(420px, 52cqw); }
  .breakthrough-inner { --banner-width: min(460px, 54cqw); }
}
@container app (max-width: 640px) {
  :where(#game-shell) > * { --banner-left: 12px; --banner-width: calc(100cqw - 24px); }
  .manual-inner { --banner-width: calc(100cqw - 24px); }
  .breakthrough-inner { --banner-width: calc(100cqw - 24px); }
  .banner-panel { max-height: 72%; }
  .turn-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-panel, .banner-panel > *, .challenge-card, .challenge-inner, .arena-gate, .arena-gate p, .arena-gate small, .loading-inner .crest { animation: none !important; }
  .arena-gate { display: none; }
}

/* --- open rooms ------------------------------------------------------------------------------------------------ */
.rooms-inner { --banner-width: min(420px, 38cqw); width: var(--banner-width); }
.room-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; max-height: 38cqh; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.room-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'world count' 'status first'; gap: 2px 10px; align-items: baseline;
  width: 100%; padding: 8px 12px; border: 1px solid rgba(201, 156, 82, .45); border-radius: 2px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(58, 50, 43, .92), rgba(34, 29, 25, .92)); color: var(--heraldry-cream);
  transition: border-color .14s ease, transform .14s ease;
}
.room-row:hover, .room-row:focus-visible { border-color: var(--heraldry-brass-light); transform: translateX(3px); outline: none; }
.room-row b { grid-area: world; font: 17px/1.1 var(--font-inscription); letter-spacing: .03em; }
.room-row span { grid-area: count; font: 800 12px/1 var(--font-script); color: var(--heraldry-brass-light); font-variant-numeric: tabular-nums; }
.room-row em { grid-area: status; font: 800 9px/1.3 var(--font-script); font-style: normal; letter-spacing: .14em; color: #b9dca8; }
.room-row i { grid-area: first; font: 700 9px/1.3 var(--font-script); font-style: normal; letter-spacing: .12em; color: rgba(234, 220, 182, .6); }
.room-empty { margin: 4px 0; color: rgba(234, 220, 182, .75); font: 500 12.5px/1.5 var(--font-script); }

/* --- lobby: readiness and votes -------------------------------------------------------------------------------- */
.lobby-player.ready em { color: #b9dca8; }
.lobby-player:not(.ready) em { color: rgba(234, 220, 182, .6); }
.lobby-player.you b::after { content: ' · YOU'; font: 800 9px/1 var(--font-script); letter-spacing: .14em; color: var(--heraldry-brass-light); }
#start-match.pressed { background: linear-gradient(180deg, #4d5b3c, #2f3a26); border-color: #b9dca8; color: #e8f4dc; }
#start-match.pressed::before { background: #b9dca8; }
.lobby-votes { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.lobby-votes:empty { display: none; }
.vote-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vote-row > span { min-width: 70px; color: rgba(234, 220, 182, .75); font: 800 9px/1 var(--font-script); letter-spacing: .18em; }
.vote-chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 9px; border: 1px solid rgba(201, 156, 82, .4); border-radius: 2px;
  background: rgba(34, 29, 25, .7); color: var(--heraldry-cream); font: 14px/1 var(--font-inscription); cursor: pointer;
}
/* the number of votes: a brass pip, only once someone has voted for it */
.vote-chip .tally {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; align-self: center;
  background: var(--heraldry-brass-light); color: #2a1c10; font: 800 10px/1 var(--font-script); font-variant-numeric: tabular-nums;
}
.vote-chip .tally[data-count="0"] { display: none; }
.vote-chip.chosen { border-color: var(--heraldry-brass-light); box-shadow: 0 0 0 1px rgba(236, 201, 127, .3); }
.vote-chip.mine { background: linear-gradient(180deg, #e7c47c, #b8893f); color: #2a1c10; }
.vote-chip.mine .tally { background: #2a1c10; color: #f1dfae; }
/* the solo arena choice: the vote chips, one lit */
.solo-arena { margin: 2px 0 12px; }
.solo-rival-note { margin: -6px 0 12px; min-height: 1.3em; }
.vote-chip:hover { border-color: var(--heraldry-brass-light); }

/* --- seeking a duel: a banner in the practice yard --------------------------------------------------------------- */
.seek-banner {
  position: absolute; z-index: 14; left: 50%; top: 56px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  padding: 9px 12px 9px 16px; border: 1px solid rgba(201, 156, 82, .6); border-radius: 2px; pointer-events: auto;
  background: linear-gradient(180deg, rgba(116, 33, 27, .94), rgba(84, 25, 21, .94)); color: var(--heraldry-cream);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4); animation: banner-content .4s ease-out both;
}
.seek-copy { display: grid; gap: 3px; }
.seek-copy strong { font: 16px/1 var(--font-inscription); letter-spacing: .06em; color: #f1dfae; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seek-copy small { font: 700 10px/1 var(--font-script); letter-spacing: .14em; color: rgba(234, 220, 182, .75); text-transform: uppercase; }
.seek-action {
  padding: 7px 10px; border: 1px solid rgba(201, 156, 82, .6); border-radius: 2px; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, #e7c47c, #b8893f); color: #2a1c10; font: 13px/1 var(--font-inscription); letter-spacing: .06em;
}
.seek-action.quiet { background: rgba(34, 29, 25, .7); color: var(--heraldry-cream); }
.seek-action:hover { border-color: var(--heraldry-brass-light); }
.seek-hint { display: none; font: 800 9px/1 var(--font-script); letter-spacing: .16em; color: rgba(234, 220, 182, .7); }
/* while the arena has the mouse, the buttons cannot be clicked: say how to reach them instead */
.hud.pointer-locked .seek-banner .seek-action { display: none; }
.hud.pointer-locked .seek-banner .seek-hint { display: block; }
.touch-ui .hud.pointer-locked .seek-banner .seek-action:not(.hidden) { display: inline-block; }
.touch-ui .hud.pointer-locked .seek-banner .seek-hint { display: none; }

.end-actions { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* --- sound and music switches (arena menu, How to Play) ---------------------------------------------------------- */
.sound-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; }
.sound-toggles .wide-button { margin: 0; font-size: 13px; }
.sound-toggles .wide-button[aria-pressed="false"] { opacity: .7; }

/* --- Settings: an iron-bound ledger over whatever is behind it (the menu, or a match that keeps going) ----------- */
.command-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.command-pair .menu-command { min-width: 0; padding-left: 20px; padding-right: 20px; }
.command-pair .menu-command::before { left: 9px; }
.command-pair .menu-command span { font-size: clamp(11px, 1.6cqw, 15px); white-space: normal; text-wrap: balance; }
/* Two deliberate lines, NEVER a third split inside CHRONICLES. The
   centered command stays legible on narrow landscape phones. */
.command-pair #how-button { padding-inline: 10px; }
.command-pair #how-button .chronicles-command-label {
  display: block; min-width: 0; max-width: 100%;
  font-size: clamp(10px, 1.25cqw, 14px);
  white-space: nowrap; overflow-wrap: normal; word-break: keep-all; text-wrap: nowrap;
  line-height: 1.12; letter-spacing: .025em;
}
.command-pair #how-button .chronicles-command-label > span {
  display: block; font: inherit; white-space: nowrap; overflow-wrap: normal;
  word-break: keep-all; text-wrap: nowrap;
}
.how-settings { margin: 10px 0 4px; }
.turn-only { display: none !important; }
html[data-turn] .turn-only { display: block !important; }

.settings-screen { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 12px calc(var(--safe-r, 0px) + 12px) 12px calc(var(--safe-l, 0px) + 12px); background: rgba(12, 10, 8, .62); pointer-events: auto; }
.settings-card {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(620px, 100%); max-height: min(680px, calc(100cqh - 24px));
  border: 1px solid rgba(201, 156, 82, .6); background: linear-gradient(180deg, #2b241e, #1b1714); color: var(--heraldry-cream);
  box-shadow: 0 0 0 4px rgba(20, 16, 12, .75), 0 18px 48px rgba(0, 0, 0, .55);
}
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; border-bottom: 1px solid rgba(201, 156, 82, .25); }
.settings-head h2 { margin: 0; font: 400 26px/1 var(--font-inscription); letter-spacing: .08em; color: #f1dfae; }
.settings-done, .settings-reset, .setting-reset-keys {
  padding: 9px 14px; border: 1px solid rgba(201, 156, 82, .6); border-radius: 2px; background: linear-gradient(180deg, #e7c47c, #b8893f 60%, #97702f);
  color: #2a1c10; font: 800 12px/1 var(--font-script); letter-spacing: .14em; cursor: pointer;
}
.settings-reset, .setting-reset-keys { background: rgba(34, 29, 25, .8); color: var(--heraldry-cream); }
.settings-tabs { display: flex; gap: 6px; padding: 10px 18px 0; overflow-x: auto; scrollbar-width: none; }
.settings-tabs button {
  flex: none; padding: 9px 14px 8px; border: 1px solid rgba(201, 156, 82, .35); border-bottom: 0; border-radius: 2px 2px 0 0; background: rgba(34, 29, 25, .7);
  color: rgba(234, 220, 182, .75); font: 400 15px/1 var(--font-inscription); letter-spacing: .08em; cursor: pointer;
}
.settings-tabs button[aria-selected="true"] { background: linear-gradient(180deg, var(--heraldry-crimson), var(--heraldry-crimson-deep)); border-color: var(--heraldry-brass); color: #f6e7c0; }
.settings-body { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 8px 18px 14px; border-top: 1px solid rgba(201, 156, 82, .35); }
.settings-foot { display: flex; justify-content: flex-end; padding: 10px 18px 14px; border-top: 1px solid rgba(201, 156, 82, .2); }

.setting-group { margin: 16px 0 4px; color: var(--heraldry-brass-light); font: 800 10px/1 var(--font-script); letter-spacing: .22em; text-transform: uppercase; }
.setting-note, .setting-empty { margin: 4px 0 8px; color: rgba(234, 220, 182, .6); font: 500 12px/1.4 var(--font-script); }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 48px; padding: 7px 0; border-bottom: 1px solid rgba(201, 156, 82, .12); }
.setting-text b { display: block; font: 600 15px/1.2 var(--font-script); color: #f1e4c2; }
.setting-text small { display: block; margin-top: 2px; color: rgba(234, 220, 182, .58); font: 500 11.5px/1.35 var(--font-script); }
.setting-control { display: flex; align-items: center; gap: 10px; }
.setting-control input[type="range"] { width: min(210px, 34cqw); accent-color: var(--heraldry-brass); }
.setting-control output { min-width: 46px; text-align: right; color: #f1dfae; font: 700 13px/1 var(--font-script); font-variant-numeric: tabular-nums; }
.setting-switch { min-width: 64px; padding: 9px 12px; border: 1px solid rgba(201, 156, 82, .5); border-radius: 2px; background: rgba(34, 29, 25, .8); color: rgba(234, 220, 182, .7); font: 800 12px/1 var(--font-script); letter-spacing: .14em; cursor: pointer; }
.setting-switch[aria-checked="true"] { background: linear-gradient(180deg, #4d5b3c, #2f3a26); border-color: #b9dca8; color: #e8f4dc; }
.setting-choices { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.setting-choices button { padding: 8px 10px; border: 1px solid rgba(201, 156, 82, .4); border-radius: 2px; background: rgba(34, 29, 25, .8); color: rgba(234, 220, 182, .8); font: 700 12px/1 var(--font-script); letter-spacing: .06em; cursor: pointer; }
.setting-choices button[aria-checked="true"] { background: linear-gradient(180deg, #e7c47c, #b8893f); border-color: #f4dc9f; color: #2a1c10; }
.key-slots { display: flex; gap: 6px; }
.key-chip { min-width: 64px; padding: 8px 8px 7px; border: 1px solid rgba(201, 156, 82, .5); border-bottom-width: 3px; border-radius: 3px; background: #2e2721; color: #f1e4c2; font: 800 12px/1 var(--font-script); letter-spacing: .08em; cursor: pointer; }
.key-chip.empty { color: rgba(234, 220, 182, .35); }
.key-chip.listening { border-color: var(--heraldry-brass-light); background: #4a3a22; color: #fff1c9; animation: key-listen 1s ease-in-out infinite; }
@keyframes key-listen { 50% { box-shadow: 0 0 0 3px rgba(236, 201, 127, .35); } }
.binding-row.flash { animation: binding-flash 1.2s ease-out; }
@keyframes binding-flash { 0% { background: rgba(138, 41, 34, .55); } 100% { background: transparent; } }
.setting-reset-keys { margin: 12px 0 2px; }
.setting-row button:focus-visible, .settings-tabs button:focus-visible, .settings-done:focus-visible, .settings-reset:focus-visible { outline: 2px solid var(--heraldry-brass-light); outline-offset: 2px; }

@container app (max-width: 560px) {
  .setting-row { grid-template-columns: 1fr; gap: 8px; }
  .setting-choices { justify-content: flex-start; }
  .setting-control input[type="range"] { width: 100%; flex: 1; }
}
@container app (max-height: 500px) {
  .settings-head { padding: 10px 14px 6px; }
  .settings-head h2 { font-size: 20px; }
  .settings-tabs { padding: 6px 14px 0; }
  .settings-tabs button { padding: 7px 10px 6px; font-size: 13px; }
  .settings-body { padding: 4px 14px 10px; }
  .settings-foot { padding: 6px 14px 8px; }
  .setting-row { min-height: 42px; padding: 5px 0; }
  .setting-text small { display: none; }
}

/* --- the Armory Reborn: character-centered equipment stage, sliding inspector, and connected workshop --- */

.armory-stage-screen {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 10;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}

/* Stage Header Bar */
.armory-stage-header {
  position: relative; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px clamp(16px, 3.5vw, 40px); z-index: 25; pointer-events: auto;
  border-bottom: 1px solid rgba(201, 156, 82, .45);
  background: linear-gradient(180deg, rgba(22, 18, 15, .92) 0%, rgba(22, 18, 15, .72) 70%, rgba(22, 18, 15, 0) 100%);
  backdrop-filter: blur(6px);
}
.armory-stage-header .back-button {
  margin: 0; padding: 7px 16px; font-size: 13px; letter-spacing: .12em;
}
.armory-header-center {
  flex: 1; text-align: center; min-width: 0; padding: 0 12px;
}
.armory-header-center h2 {
  margin: 0; font: 400 clamp(16px, 1.8vw, 22px)/1.1 var(--font-inscription);
  color: #f6ecce; letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.armory-header-actions {
  display: flex; align-items: center; gap: 10px;
}
.armory-ledger-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 14px;
  border: 1px solid rgba(201, 156, 82, .65); border-radius: 3px;
  background: linear-gradient(180deg, #4d3826 0%, #281c13 100%);
  color: var(--heraldry-cream); font: 700 12px/1 var(--font-script); letter-spacing: .12em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.4);
  cursor: pointer; transition: all .14s ease;
}
.armory-ledger-btn:hover {
  border-color: var(--heraldry-brass-light); filter: brightness(1.15); transform: translateY(-1px);
}
.armory-ledger-btn:active { transform: translateY(1px); }
.armory-ledger-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--heraldry-brass-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.armory-renown-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid rgba(201, 156, 82, .4); border-radius: 3px;
  background: rgba(30, 24, 20, .85); color: var(--heraldry-brass-light);
  font: 700 11px/1 var(--font-script); letter-spacing: .1em;
}
.armory-renown-pill .renown-mark { font-size: 14px; color: var(--heraldry-brass-light); }

/* The three stages reserve room for their preview and scrollable details. */
.armory-kit-stage, .armory-siege-stage, .armory-heraldry-stage {
  --detail-width: min(23rem, 38cqw);
  display: grid; min-height: 0; min-width: 0; gap: 8px;
  padding: 10px clamp(8px, 1.6cqw, 24px);
  grid-template-rows: minmax(0, 1fr) auto;
}
.armory-kit-stage {
  --rail-width: clamp(8rem, 18cqw, 14rem);
  grid-template-columns: var(--rail-width) minmax(0, 1fr) 0px;
  grid-template-areas: "nav preview details" "nav tools details";
  transition: grid-template-columns .3s cubic-bezier(.2,.75,.3,1);
}
.armory-kit-stage.inspecting {
  grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--detail-width);
}
.armory-siege-stage, .armory-heraldry-stage {
  grid-template-columns: minmax(0, 1fr) var(--detail-width);
  grid-template-areas: "preview details" "tools details";
}
.armory-siege-stage {
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "tabs details" "preview details" "tools details";
}
.armory-category-rail {
  grid-area: nav; display: flex; flex-direction: column; gap: 8px;
  min-height: 0; overflow-y: auto; pointer-events: auto; padding: 1px;
}
.armory-preview {
  grid-area: preview; min-width: 0; min-height: 0; pointer-events: auto;
  touch-action: none; cursor: grab; border: 1px solid #d5b57155;
  box-shadow: inset 0 0 22px #17110d66; border-radius: 3px;
}
#game-shell:has(#armory-menu:not(.hidden)) #menu-world > .turn-hint { display: none; }
.armory-turn-hint { color: #f5e8b8; font: 700 10px/1.15 var(--font-script); letter-spacing: .08em; }
.armory-preview:active { cursor: grabbing; }
.armory-slot-plaque {
  position: relative; pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-height: 58px; padding: 8px 10px;
  background: linear-gradient(160deg, #3a4349 0%, #22282d 45%, #161b1e 100%);
  border: 1px solid rgba(201, 156, 82, .6); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .55), 0 0 10px rgba(201, 156, 82, .12);
  color: var(--heraldry-cream); text-align: left;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), border-color .18s ease, box-shadow .18s ease, filter .14s ease;
}
.armory-slot-plaque:hover {
  border-color: var(--heraldry-brass-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 24px rgba(0, 0, 0, .65), 0 0 18px rgba(236, 201, 127, .45);
}
.armory-slot-plaque:active { transform: scale(.98); }
.armory-slot-plaque[aria-pressed="true"] {
  border-color: #ffe094;
  box-shadow: inset 0 0 10px rgba(236, 201, 127, .35), 0 0 24px rgba(236, 201, 127, .65);
}
.armory-slot-plaque .plaque-corner {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #c3ae80; box-shadow: 0 1px 1px #000;
}
.armory-slot-plaque .plaque-corner.top-left { top: 4px; left: 4px; }
.armory-slot-plaque .plaque-corner.top-right { top: 4px; right: 4px; }
.armory-slot-plaque .plaque-corner.bottom-left { bottom: 4px; left: 4px; }
.armory-slot-plaque .plaque-corner.bottom-right { bottom: 4px; right: 4px; }

.armory-slot-plaque .plaque-icon {
  flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; background: rgba(12, 15, 17, .6); border: 1px solid rgba(201, 156, 82, .3);
  color: var(--heraldry-brass-light);
}
.armory-slot-plaque .plaque-icon svg { width: 22px; height: 22px; }
.armory-slot-plaque .plaque-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.armory-slot-plaque .plaque-label {
  font: 800 10px/1 var(--font-script); color: var(--heraldry-brass-light); letter-spacing: .16em;
}
.armory-slot-plaque .plaque-name {
  font: 400 14px/1.2 var(--font-inscription); color: #f6ecd2; letter-spacing: .04em;
  overflow-wrap: anywhere;
}

.armory-nav-siege-btn {
  position: relative; margin-top: 8px; justify-content: space-between;
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 12px 20px;
  background: linear-gradient(135deg, #7a221b 0%, #4c1410 100%);
  border: 1px solid var(--heraldry-brass); border-radius: 4px;
  color: var(--heraldry-cream); font: 800 13px/1 var(--font-script); letter-spacing: .18em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px rgba(0,0,0,.6), 0 0 12px rgba(122,34,27,.4);
  transition: all .16s ease; z-index: 10;
}
.armory-nav-siege-btn:hover {
  border-color: var(--heraldry-brass-light); filter: brightness(1.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 20px rgba(0,0,0,.7), 0 0 18px rgba(236,201,127,.5);
}
.armory-nav-siege-btn:active { transform: translateY(1px); }
.armory-nav-siege-btn .nav-arrow { font-size: 16px; color: var(--heraldry-brass-light); }

/* Armory Kit Footer */
.armory-kit-footer {
  grid-area: tools; min-width: 0; padding: 4px 6px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(0deg, rgba(16, 12, 10, .85) 0%, rgba(16, 12, 10, 0) 100%);
  z-index: 10; pointer-events: none;
}
.armory-status-summary {
  color: rgba(234, 220, 182, .88); font: 600 12px/1.3 var(--font-script); letter-spacing: .06em;
  text-shadow: 0 1px 3px rgba(0,0,0,.8); max-width: 65%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.armory-stage-controls {
  display: flex; align-items: center; gap: 12px; pointer-events: auto;
}
.armory-reset-btn {
  padding: 5px 12px; border: 1px solid rgba(201, 156, 82, .5); border-radius: 3px;
  background: rgba(30, 24, 20, .8); color: var(--heraldry-brass-light);
  font: 700 10px/1 var(--font-script); letter-spacing: .12em; cursor: pointer;
  transition: all .14s ease;
}
.armory-reset-btn:hover { border-color: var(--heraldry-brass-light); background: rgba(50, 40, 30, .9); color: #fff; }

.armory-inspector {
  grid-area: details; min-width: 0; min-height: 0;
  overflow: hidden; pointer-events: auto;
}
#armory-menu :is(.inspector-inner, .siege-inspector, .heraldry-inspector) {
  --hem: 14px;
  padding-bottom: calc(var(--hem) + 10px);
}
.armory-inspector.closed { visibility: hidden; pointer-events: none; }
.heraldry-inspector .heraldry-scroll { overflow: auto; overflow-wrap: anywhere; }

.armory-inspector .inspector-inner {
  position: relative; inset: auto; width: 100%; height: 100%; max-height: none; min-width: 0; box-sizing: border-box; border-radius: 3px;
  box-shadow: -8px 0 32px rgba(0, 0, 0, .75);
  display: flex; flex-direction: column; overflow: hidden;
  padding: 14px 16px;
}
.inspector-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(201, 156, 82, .35);
  flex-shrink: 0;
}
.inspector-category {
  margin: 0 0 4px; color: var(--heraldry-brass-light); font: 800 10px/1 var(--font-script); letter-spacing: .22em;
}
.inspector-header h3 {
  margin: 0 0 4px; font: 400 20px/1.1 var(--font-inscription); color: #f5eed8; letter-spacing: .06em;
}
.inspector-subtitle {
  margin: 0; font: 500 11.5px/1.35 var(--font-script); color: rgba(234, 220, 182, .75);
}
.inspector-close {
  flex: none; width: 32px; height: 32px; border: 1px solid rgba(201, 156, 82, .45); border-radius: 3px;
  background: rgba(40, 30, 22, .7); color: var(--heraldry-cream);
  font: 700 16px/1 var(--font-script); cursor: pointer; transition: all .14s ease;
  display: flex; align-items: center; justify-content: center;
}
.inspector-close:hover { border-color: var(--heraldry-brass-light); background: rgba(70, 48, 30, .9); }

.inspector-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--heraldry-brass) rgba(34,29,25,.35);
  padding: 0 4px 8px 0; display: flex; flex-direction: column; gap: 14px;
}

.inspector-list {
  display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; flex-shrink: 0;
}

.inspector-list > .armory-slot {
  margin-top: auto;
}

.inspector-list .armory-spells {
  display: flex; flex-direction: column; gap: 8px;
}

/* Item Card Detail View in Inspector */
.inspector-item-card {
  padding: 14px 16px; border: 1px solid rgba(201, 156, 82, .4); border-top: 2px solid rgba(201, 156, 82, .55); border-radius: 3px;
  background: linear-gradient(180deg, rgba(42, 33, 26, .92) 0%, rgba(26, 20, 16, .96) 100%);
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px; margin-bottom: 12px; flex-shrink: 0;
}
.inspector-card-heading {
  display: flex; align-items: center; gap: 10px;
}
.inspector-card-mark {
  font-size: 26px; color: #ffa35a; width: 32px; text-align: center;
}
.inspector-card-heading h4 {
  margin: 0; font: 400 19px/1.1 var(--font-inscription); color: #f6edd4; letter-spacing: .06em;
}
.inspector-card-status {
  font: 800 9.5px/1 var(--font-script); letter-spacing: .16em; color: #b9dca8; text-transform: uppercase;
}
.inspector-card-status.in-training {
  color: #e5b072;
}
.inspector-card-desc {
  margin: 0; font: 500 12.5px/1.35 var(--font-script); color: rgba(234, 220, 182, .88);
}
.inspector-card-facts {
  margin: 0; font: 700 11.5px/1.3 var(--font-script); color: rgba(236, 201, 127, .95); letter-spacing: .03em;
}
.inspector-card-lore {
  margin: 4px 0 0; font: 500 11px/1.4 var(--font-script); color: rgba(234, 220, 182, .65); font-style: italic;
  border-top: 1px solid rgba(201, 156, 82, .2); padding-top: 6px;
}
.inspector-card-action {
  margin-top: 8px;
}
#armory-equip-btn.equipped {
  background: #3a4a35; border-color: #6a9a5a; color: #d0f0c0; cursor: default;
}

/* Connected Siege Workshop Screen */
.siege-machine-nav {
  grid-area: tabs; min-width: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; pointer-events: auto;
}
.siege-tab {
  padding: 7px 4px; overflow-wrap: anywhere; border: 1px solid rgba(201, 156, 82, .55); border-radius: 3px;
  background: linear-gradient(180deg, #383028 0%, #1c1814 100%);
  color: rgba(234, 220, 182, .8); font: 800 11.5px/1 var(--font-script); letter-spacing: .16em;
  cursor: pointer; transition: all .14s ease;
}
.siege-tab:hover {
  border-color: var(--heraldry-brass-light); color: #fff; filter: brightness(1.15);
}
.siege-tab.selected {
  background: linear-gradient(180deg, #7a221b 0%, #46130f 100%);
  border-color: var(--heraldry-brass-light); color: var(--heraldry-cream);
  box-shadow: 0 0 14px rgba(236, 201, 127, .35), inset 0 1px 0 rgba(255,255,255,.2);
}

.siege-viewport-controls {
  grid-area: tools; min-width: 0;
  display: flex; align-items: center; gap: 12px; pointer-events: auto; z-index: 15;
}

/* Siege Inspector Panel */
.siege-inspector {
  grid-area: details; position: relative; inset: auto; width: auto; max-height: none;
  min-width: 0; min-height: 0; overflow: hidden; pointer-events: auto; display: flex; flex-direction: column;
  padding: 14px 16px; border-radius: 3px;
  box-shadow: -8px 0 32px rgba(0, 0, 0, .75);
}
.siege-inspector-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--heraldry-brass) rgba(34,29,25,.35);
  padding: 0 4px 8px 0; display: flex; flex-direction: column; gap: 14px;
}
.siege-header {
  margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid rgba(201, 156, 82, .35);
}
.siege-badge {
  display: inline-block; padding: 2px 8px; border: 1px solid rgba(201, 156, 82, .4); border-radius: 2px;
  background: rgba(30, 24, 20, .8); color: var(--heraldry-brass-light);
  font: 800 9px/1 var(--font-script); letter-spacing: .2em; margin-bottom: 6px;
}
.siege-header h3 {
  margin: 0 0 4px; font: 400 22px/1.1 var(--font-inscription); color: #f6edd4; letter-spacing: .06em;
}
.siege-subtitle {
  margin: 0; font: 600 11.5px/1.3 var(--font-script); color: var(--heraldry-brass-light); letter-spacing: .1em;
}
.siege-overview-text {
  margin: 0 0 8px; font: 500 12.5px/1.4 var(--font-script); color: rgba(234, 220, 182, .9);
}
.siege-facts-pill {
  display: inline-block; padding: 4px 8px; background: rgba(18, 14, 12, .6);
  border: 1px solid rgba(201, 156, 82, .3); border-radius: 2px;
  color: rgba(236, 201, 127, .9); font: 700 10.5px/1 var(--font-script); letter-spacing: .04em;
}
.siege-attacks-list {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
}
.siege-attack-card {
  padding: 8px 12px; border: 1px solid rgba(201, 156, 82, .35); border-radius: 2px;
  background: rgba(28, 22, 18, .7); display: flex; flex-direction: column; gap: 2px;
}
.siege-attack-card strong {
  color: #f1e4c2; font: 400 14px/1.2 var(--font-inscription); letter-spacing: .04em;
}
.siege-attack-card small {
  color: rgba(234, 220, 182, .75); font: 500 11px/1.3 var(--font-script);
}
.siege-attack-card em {
  color: rgba(236, 201, 127, .85); font: 700 10.5px/1 var(--font-script); font-style: normal;
}
.siege-controls-box {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  border: 1px solid rgba(201, 156, 82, .35); border-radius: 2px; background: rgba(28, 22, 18, .7);
}
.siege-controls-row {
  display: grid; grid-template-columns: 80px 1fr; gap: 8px; align-items: baseline;
  font: 500 11px/1.35 var(--font-script); color: rgba(234, 220, 182, .85);
}
.siege-controls-row strong {
  font: 800 10px/1 var(--font-script); color: var(--heraldry-brass-light); letter-spacing: .12em;
}

/* A selected siege Skill is equipment: it settles below the alternatives.
   The rest of the inspector (controls, lore, details) remains swipeable. */
.siege-armory-machines .armory-spells { display:flex; flex-direction:column; gap:8px; }
.siege-armory-machines .spell-card { min-height:54px; touch-action:manipulation; }
.siege-preview-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.siege-preview-controls p { margin:0; color:var(--heraldry-brass-light); font:600 10px/1.4 var(--font-script); letter-spacing:.06em; }
.siege-preview-controls button { flex:none; min-height:34px; }
.siege-preview-controls [hidden] { display:none; }
.siege-inspector-scroll { overflow-anchor:none; touch-action:pan-y; -webkit-overflow-scrolling:touch; scroll-padding-block:12px 18px; }
@media (prefers-reduced-motion: reduce) { .siege-armory-machines .spell-card { transition:none; } }

/* Heraldry Chamber Stage */
.heraldry-stage-controls {
  grid-area: tools; min-width: 0;
  display: flex; align-items: center; gap: 12px; pointer-events: auto; z-index: 15;
}
.heraldry-inspector {
  grid-area: details; position: relative; inset: auto; width: auto; max-height: none;
  min-width: 0; min-height: 0; overflow: hidden; pointer-events: auto; display: flex; flex-direction: column;
  padding: 14px 16px; border-radius: 3px;
  box-shadow: -8px 0 32px rgba(0, 0, 0, .75);
}
.heraldry-header {
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(201, 156, 82, .35);
}
.heraldry-header h3 {
  margin: 0 0 8px; font: 400 20px/1.1 var(--font-inscription); color: #f6edd4; letter-spacing: .06em;
}

/* Challenge Ledger Stage */
.armory-challenges-stage {
  position: absolute; inset: 0; pointer-events: auto; z-index: 30;
  background: rgba(12, 10, 8, .6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 40px 24px;
}
.challenges-panel-inner {
  position: relative; width: 100%; max-width: 820px; height: calc(100% - 40px);
  max-height: 720px; display: flex; flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,.85);
}
.challenges-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(201, 156, 82, .35);
  flex-shrink: 0;
}
.challenges-header h2 {
  margin: 0; font: 400 24px/1.1 var(--font-inscription); color: #f6edd4; letter-spacing: .06em;
}
.challenges-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--heraldry-brass) rgba(34,29,25,.35);
  padding: 0 6px 12px 0;
}

/* Shared Spell/Tech/Ultimate Cards */
.armory-slot { margin: 14px 0 6px; color: var(--heraldry-brass-light); font: 800 10px/1 var(--font-script); letter-spacing: .22em; }
.armory-blade { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid rgba(201, 156, 82, .35); background: rgba(34, 29, 25, .55); }
.armory-blade b { font: 400 17px/1.1 var(--font-inscription); color: #f1e4c2; }
.armory-blade small { color: rgba(234, 220, 182, .7); font: 500 12px/1.35 var(--font-script); }
.armory-spells { display: grid; gap: 8px; }
.spell-card {
  position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; column-gap: 8px; row-gap: 3px; align-items: center; width: 100%;
  padding: 10px 12px; border: 1px solid rgba(201, 156, 82, .4); border-radius: 2px; background: linear-gradient(180deg, var(--heraldry-iron-light), var(--heraldry-iron));
  color: var(--heraldry-cream); text-align: left; cursor: pointer; transition: border-color .18s ease, transform .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.spell-card:hover { border-color: var(--heraldry-brass-light); background: linear-gradient(180deg, #45382c, var(--heraldry-iron)); }
.spell-card:active { transform: translateY(1px); }
.spell-card:focus-visible { outline: 2px solid var(--heraldry-cream); outline-offset: 2px; }
.spell-card .spell-mark { grid-row: 1 / span 3; font-size: 22px; color: #ffa35a; text-align: center; }
.spell-card[data-spell="frostfire"] .spell-mark { color: #8fdcff; }
.spell-card[data-spell="gale"] .spell-mark { color: #e6eee3; }
.spell-card[data-spell="steel"] .spell-mark { color: #d8e1ea; }
.spell-card .spell-name { font-size: 18px; line-height: 1.12; font-family: var(--font-inscription); letter-spacing: .06em; }
.spell-card i { font: 800 9px/1 var(--font-script); letter-spacing: .18em; font-style: normal; color: #b9dca8; }
.spell-card small { grid-column: 2 / 4; color: rgba(234, 220, 182, .78); font: 500 12px/1.35 var(--font-script); }
.spell-card em { grid-column: 2 / 4; color: rgba(236, 201, 127, .85); font: 700 11px/1.3 var(--font-script); font-style: normal; letter-spacing: .03em; }

.spell-card:not(.equipped) {
  opacity: 0.88;
}
.spell-card:not(.equipped):hover {
  opacity: 1;
  border-color: rgba(236, 201, 127, .7);
  transform: translateY(-1px);
}

.spell-card.equipped {
  border-color: var(--heraldry-brass-light);
  background: linear-gradient(180deg, #3d3025, #241c16);
  box-shadow: 0 0 0 1px rgba(236, 201, 127, .45), 0 0 18px rgba(236, 201, 127, .18) inset;
}
.spell-card.equipped i {
  color: #c9e8b6;
  text-shadow: 0 0 6px rgba(185, 220, 168, 0.4);
}

/* Selection motion is a single FLIP animation driven by the actual new card
   positions. CSS keyframes here previously fought the reorder and made cards
   jump, swell twice, and jitter. */
#armory-inspector .spell-card.just-equipped { z-index: 1; }
#armory-inspector .inspector-scroll {
  overflow-anchor: none;
  scroll-padding-block: 12px 18px;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
#armory-inspector .inspector-list { min-height: 100%; }
#armory-inspector .inspector-item-card { scroll-margin-top: 18px; }
#armory-inspector .spell-card:active,
#armory-inspector .spell-card:not(.equipped):hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  #armory-inspector .spell-card { transition: none; }
}

.spell-card.selected-inspect { border-color: #ffd685; box-shadow: 0 0 12px rgba(236, 201, 127, .4); }
.spell-card[data-spell="frostfire"].equipped { box-shadow: 0 0 0 1px rgba(143, 220, 255, .4), 0 0 18px rgba(143, 220, 255, .12) inset; }
.spell-card[disabled] { opacity: .65; cursor: not-allowed; }
.armory-note { margin-top: 12px; }

/* Visual hidden utility */
.visual-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Landscape Mobile Responsiveness */
@container app (max-height: 500px) {
  .armory-stage-header { height: 44px; padding: 4px clamp(12px, 2.5vw, 24px); }
  .armory-stage-header .back-button { padding: 4px 10px; font-size: 11px; }
  .armory-stage-header h2 { font-size: 14px; }
  .armory-ledger-btn { min-height: 30px; padding: 4px 10px; font-size: 10px; }
  .armory-renown-pill { height: 28px; padding: 0 8px; font-size: 9.5px; }

  .armory-category-rail { gap: 5px; }
  .armory-slot-plaque { min-height: 42px; padding: 5px 6px; gap: 5px; }
  .armory-slot-plaque .plaque-icon { width: 22px; height: 22px; }
  .armory-slot-plaque .plaque-icon svg { width: 14px; height: 14px; }
  .armory-slot-plaque .plaque-label { font-size: 8px; letter-spacing: .09em; }
  .armory-slot-plaque .plaque-name { font-size: 11px; }
  .armory-nav-siege-btn { min-height: 38px; padding: 5px 6px; font-size: 9px; }
  .siege-inspector, .heraldry-inspector, .armory-inspector .inspector-inner { padding: 8px 10px; }
  .inspector-header, .siege-header { margin-bottom: 5px; padding-bottom: 5px; }
  .inspector-header h3, .siege-header h3, .heraldry-header h3 { font-size: 15px; }
  .siege-tab { padding: 6px 2px; font-size: 9px; letter-spacing: .07em; }
  .armory-kit-footer { justify-content: center; }
  .armory-status-summary { display: none; }
  .armory-turn-hint { font-size: 8px; }
  .armory-reset-btn { padding: 4px 8px; font-size: 9px; }
  .spell-card { padding: 6px 8px; }
  .spell-card .spell-name { font-size: 14px; }
  .spell-card small { font-size: 10px; }
}

/* --- the credits and the voice library: opened from a quiet button in the settings' footer ----------------------- */
.settings-foot { justify-content: space-between; align-items: center; }
.settings-credits { padding: 6px 8px; border: 0; background: none; color: rgba(234, 220, 182, .38); font: 700 10px/1 var(--font-script); letter-spacing: .22em; cursor: pointer; }
.settings-credits:hover, .settings-credits:focus-visible { color: var(--heraldry-brass-light); outline: none; }
.credits-screen { z-index: 81; }
.credits-shell { grid-template-rows: auto auto minmax(0, 1fr); }
/* the search, held above the list while it scrolls */
.credits-search { display: flex; align-items: center; gap: 10px; padding: 10px 18px 8px; }
.credits-search .game-input { flex: 1; min-width: 0; height: 38px; padding: 8px 10px; font: 500 16px/1.2 var(--font-script); }
.credits-search .game-input::placeholder { color: rgba(234, 220, 182, .42); }
.credits-search .game-input:focus { border-color: var(--heraldry-brass-light); }
.credits-search small { flex: none; color: rgba(234, 220, 182, .55); font: 700 10px/1 var(--font-script); letter-spacing: .12em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.credits-search small:empty { display: none; }
.credits-body mark { padding: 0 1px; border-radius: 2px; background: rgba(231, 196, 124, .32); color: inherit; }
.credits-empty { margin: 18px 0; text-align: center; }
@container app (max-height: 500px) {
  .credits-search { padding: 6px 14px 4px; }
  .credits-search .game-input { height: 34px; }
}
.credits-card { margin: 10px 0 6px; padding: 16px 14px 12px; text-align: center; border: 1px solid rgba(201, 156, 82, .35); background: radial-gradient(ellipse at 50% 0%, rgba(138, 41, 34, .28), transparent 70%), rgba(20, 17, 14, .5); }
.credits-title { margin: 0 0 10px; font: 400 22px/1 var(--font-inscription); letter-spacing: .12em; color: #f1dfae; }
.credits-line { margin: 6px 0; display: grid; gap: 2px; }
.credits-line small { color: rgba(234, 220, 182, .55); font: 600 10px/1.2 var(--font-script); letter-spacing: .2em; text-transform: uppercase; }
.credits-line b { color: var(--heraldry-brass-light); font: 400 19px/1.1 var(--font-inscription); letter-spacing: .06em; }
.credits-note { margin: 10px auto 0; max-width: 42ch; color: rgba(234, 220, 182, .6); font: italic 500 12px/1.4 var(--font-script); }
.voice-entry { padding: 10px 0 11px; border-bottom: 1px solid rgba(201, 156, 82, .12); }
.voice-entry header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.voice-entry header b { font: 600 15px/1.2 var(--font-script); color: #f1e4c2; }
.voice-status { flex: none; color: rgba(185, 220, 168, .8); font: 800 9px/1 var(--font-script); letter-spacing: .16em; }
.voice-coming .voice-status { color: rgba(240, 178, 116, .85); }
.voice-unrecorded .voice-status { color: rgba(234, 220, 182, .4); }
.voice-entry q { display: block; margin: 5px 0 4px; color: #f6e7c0; font: 400 16px/1.3 var(--font-inscription); quotes: "\201C" "\201D"; }
.voice-unrecorded q { color: rgba(234, 220, 182, .55); }
.voice-when { margin: 0; color: rgba(234, 220, 182, .7); font: 500 12px/1.4 var(--font-script); }
.voice-note { margin: 3px 0 0; color: rgba(230, 196, 106, .75); font: italic 500 12px/1.4 var(--font-script); }
/* the play buttons sit beside the line they play, not on a row of their own */
.voice-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.voice-entry > * { grid-column: 1; }
.voice-entry > header { grid-column: 1 / -1; }
.voice-takes { grid-column: 2; grid-row: 2 / span 3; align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 150px; }
.voice-entry > .voice-loading { grid-column: 2; grid-row: 2 / span 3; align-self: center; margin-top: 0; }
.voice-play { min-width: 40px; padding: 7px 10px; border: 1px solid rgba(201, 156, 82, .55); border-radius: 2px; background: rgba(34, 29, 25, .85); color: #f1dfae; font: 800 12px/1 var(--font-script); letter-spacing: .08em; cursor: pointer; }
.voice-play:hover, .voice-play.playing { background: linear-gradient(180deg, #e7c47c, #b8893f); color: #2a1c10; }
.voice-loading { display: inline-block; margin-top: 8px; color: rgba(234, 220, 182, .4); font: 700 9px/1 var(--font-script); letter-spacing: .2em; }
.voice-direction { display: block; margin: 5px 0 4px; color: rgba(234, 220, 182, .6); font: italic 500 13px/1.3 var(--font-script); }
.voice-title-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.voice-variation-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px solid rgba(201, 156, 82, .38); border-radius: 2px; background: rgba(34, 29, 25, .7); color: #e7c47c; font: 700 10px/1 var(--font-script); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.voice-variation-toggle:hover, .voice-variation-toggle:focus-visible { background: rgba(201, 156, 82, .22); border-color: #e7c47c; color: #fff; outline: none; }
.voice-variation-arrow { display: inline-block; font-size: 10px; line-height: 1; transition: transform .18s ease; }
.voice-variation-arrow.open { transform: rotate(180deg); }
.voice-variations-drawer { grid-column: 1 / -1; margin-top: 10px; padding: 8px 12px; border: 1px solid rgba(201, 156, 82, .2); border-radius: 2px; background: rgba(20, 17, 14, .45); display: flex; flex-direction: column; gap: 8px; }
.voice-variations-drawer.hidden { display: none; }
.voice-variation-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px dashed rgba(201, 156, 82, .15); }
.voice-variation-item:last-child { border-bottom: none; padding-bottom: 2px; }
.voice-variation-item-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.voice-variation-tag { color: #c99c52; font: 800 9px/1 var(--font-script); letter-spacing: .12em; text-transform: uppercase; }
.voice-variation-title { color: #f1dfae; font: 600 13px/1.2 var(--font-script); }
.voice-variation-content q { display: block; margin: 3px 0; color: #f6e7c0; font: 400 15px/1.3 var(--font-inscription); }
.voice-variation-play-wrap { display: flex; align-items: center; justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .voice-variation-arrow { transition: none; } }
/* a thumb's worth of button on a touch screen (it stays quiet to look at) */
.settings-credits { min-height: 36px; min-width: 72px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.touch-ui .settings-credits { min-height: 44px; min-width: 96px; padding: 10px 14px; font-size: 11px; color: rgba(234, 220, 182, .5); }
.touch-ui .voice-variation-toggle { min-height: 32px; padding: 6px 10px; font-size: 11px; }
/* the ultimate's card: the spell cards' frame, its mark in ember */
.ultimate-card .spell-mark { color: #f0a36a; }

/* Fixed Armory crown and tabs; only the choices scroll within the hanging cloth. */
.armory-inner { height: calc(100% - 32px); max-height: calc(100% - 32px); overflow: hidden; padding-bottom: calc(var(--hem) + 14px); }
.armory-inner > .back-button, .armory-inner > .eyebrow, .armory-inner > h2, .armory-tabs { flex-shrink: 0; }
.armory-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--heraldry-brass) rgba(34,29,25,.35); padding: 0 5px 8px 0; }
.armory-scroll:focus-visible { outline: 1px solid var(--heraldry-brass-light); outline-offset: 2px; }
.armory-scroll-hint { flex-shrink: 0; margin: 8px 0 0; padding-top: 6px; border-top: 1px solid rgba(236,201,127,.4); color: var(--heraldry-brass-light); font: 700 9px/1.3 var(--font-script); letter-spacing: .09em; }
.controls-group { grid-column: 1 / -1; margin: 6px 0 2px; color: var(--heraldry-brass-light); font: 800 10px/1.1 var(--font-script); letter-spacing: .15em; }
.rules-copy p { margin: 0 0 7px; }
/* Castle Chronicles: the reference is a small icon rack. Only the
   selected effect has prose; controls remain folded until requested. */
#how-panel .chronicles-chapter { margin: 0; padding: 4px 0 10px; border-top: 0; }
#how-panel .chronicles-chapter .controls-group { margin: 0 0 4px; font-size: 11px; }
#how-panel .chronicles-brief {
  margin: 0 0 9px; color: rgba(234,220,182,.8);
  font: 500 12px/1.3 var(--font-script);
}
.chronicles-affliction-list {
  display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 7px; max-width: 310px; padding: 2px 0 7px;
}
.chronicles-affliction-icon {
  width: 100%; min-height: 43px; display: grid; place-items: center;
  padding: 8px; border: 1px solid rgba(201,156,82,.44); border-radius: 3px;
  color: #e9d49b; background: rgba(25,18,15,.48); cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.chronicles-affliction-icon svg { width: 23px; height: 23px; pointer-events: none; }
.chronicles-affliction-icon:is(:hover,.selected) {
  color: #f7e8be; border-color: #ebc67d; background: rgba(130,80,37,.33);
}
.chronicles-affliction-icon:focus-visible { outline: 2px solid #f3d797; outline-offset: 2px; }
.chronicles-affliction-detail {
  margin: 5px 0 4px; padding: 9px 10px;
  border: 1px solid rgba(201,156,82,.37); border-left: 3px solid #dec17c;
  background: rgba(24,17,13,.42);
}
.chronicles-affliction-detail[hidden] { display: none; }
.chronicles-affliction-detail h4 {
  margin: 0 0 4px; color: var(--heraldry-cream);
  font: 600 13px/1.2 var(--font-inscription);
}
.chronicles-affliction-detail p {
  margin: 0 0 6px; color: rgba(241,228,202,.89);
  font: 500 12px/1.45 var(--font-script);
}
.chronicles-affliction-detail small {
  display: block; color: var(--heraldry-brass-light);
  font: 700 9px/1.25 var(--font-script); letter-spacing: .08em;
}
.chronicles-controls {
  margin: 7px 0 0; border-top: 1px solid rgba(201,156,82,.4);
}
.chronicles-controls > summary {
  display: block; padding: 11px 2px 10px; cursor: pointer; list-style: none;
  color: #f2dfa8; font: 700 12px/1.25 var(--font-inscription);
  letter-spacing: .1em;
}
.chronicles-controls > summary::-webkit-details-marker { display: none; }
.chronicles-controls > summary::before { content: '▸'; display: inline-block; margin-right: 9px; }
.chronicles-controls[open] > summary::before { content: '▾'; }
.chronicles-controls > summary:focus-visible { outline: 2px solid #f3d797; outline-offset: 2px; }
.chronicles-controls .controls-grid { gap: 7px 12px; padding: 7px 0 10px; }
.chronicles-controls .how-settings { min-height: 39px; margin: 7px 0 5px; font-size: 12px; }
.menu-command:active, .back-button:active, .armory-tabs button:active, .mode-choice:active, .wide-button:active { transform: translateY(1px); }
@container app (max-height: 500px) {
  .armory-inner { padding-top: 18px; padding-bottom: calc(var(--hem) + 9px); }
  .armory-inner .back-button { margin-bottom: 5px; }
  .armory-inner > .eyebrow { margin-bottom: 4px; }
  .armory-inner > h2 { font-size: 24px; margin-bottom: 6px; }
  .armory-scroll-hint { margin-top: 4px; font-size: 8px; }
}

/* Keep the manual crown visible while keys and rules scroll inside the banner. */
#how-panel .manual-inner { height: calc(100% - 20px); max-height: calc(100% - 20px); overflow: hidden; }
/* The banner-scroll is the ACTUAL child of manual-inner. Give it a finite
   flex height so the nested manual-scroll can scroll on phones and desktop. */
#how-panel .manual-inner > .banner-scroll {
  flex: 1 1 auto; min-height: 0; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  margin-bottom: 0; padding-bottom: calc(var(--hem) + 15px);
}
#how-panel .manual-inner > .banner-scroll > :not(.manual-scroll) { flex: 0 0 auto; }
#how-panel .manual-scroll {
  min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: var(--heraldry-brass) rgba(25, 14, 10, .3);
  padding: 0 6px 10px 0; touch-action: pan-y;
}
.manual-scroll::-webkit-scrollbar { width: 5px; }
.manual-scroll::-webkit-scrollbar-thumb { background: var(--heraldry-brass); border-radius: 2px; }
.manual-scroll::-webkit-scrollbar { width: 5px; }
.manual-scroll::-webkit-scrollbar-thumb { background: var(--heraldry-brass); border-radius: 2px; }
/* the library's sections, each folding away under its name and how many lines it holds */
.credits-section { border-bottom: 1px solid rgba(201, 156, 82, .18); }
.credits-section > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 2px; cursor: pointer; list-style: none; color: #f1e4c2; font: 600 14px/1.2 var(--font-script); letter-spacing: .04em; }
.credits-section > summary::-webkit-details-marker { display: none; }
.credits-section > summary::before { content: "\25B8"; margin-right: 8px; color: var(--heraldry-brass-light); transition: transform .14s ease; }
.credits-section[open] > summary::before { transform: rotate(90deg); }
.credits-section > summary > span { flex: 1; }
.credits-section > summary > small { color: rgba(234, 220, 182, .5); font: 700 10px/1 var(--font-script); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.credits-section > summary:focus-visible { outline: 2px solid var(--heraldry-cream); outline-offset: 2px; }
.credits-section > .voice-entry { padding-left: 14px; }
.touch-ui .credits-section > summary { padding: 14px 2px; }
@media (prefers-reduced-motion: reduce) { .credits-section > summary::before { transition: none; } }

/* --- the yard, watched (menuPresentation.mjs): the banner drawn aside like a hanging standard pulled to the side, its
   rod with it, quick going and a touch slower coming back; the camera recomposes alongside (MenuScene) ------------ */
#menu .banner-panel, #menu::after, #menu .herald-tab {
  transition: transform .26s cubic-bezier(.2, .8, .25, 1), visibility 0s linear 0s;
}
#menu.withdrawn .banner-panel, #menu.withdrawn::after, #menu.withdrawn .herald-tab {
  transform: translateX(calc(-1 * (var(--banner-left) + var(--banner-width) + 80px)));
  transition: transform .23s cubic-bezier(.55, 0, .8, .35), visibility 0s linear .23s;
  visibility: hidden;
}
/* (the inscription over the opened yard: a breath, then gone) */
.yard-inscription {
  position: absolute; z-index: 6; left: 50%; top: calc(var(--safe-t, 0px) + 22px); margin: 0; transform: translate(-50%, -4px);
  color: rgba(245, 232, 200, .86); font: 400 15px/1 var(--font-inscription); letter-spacing: .32em; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 14px rgba(0, 0, 0, .35); opacity: 0; pointer-events: none;
}
.yard-inscription span { color: var(--heraldry-brass-light); }
.yard-inscription.show { animation: yard-inscription 2.6s ease both; }
@keyframes yard-inscription { 0% { opacity: 0; transform: translate(-50%, -4px); } 18%, 72% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }

/* the scene's own controls, lower right: an iron plaque with a brass edge (not a command: the yard is not a match) */
.yard-controls {
  position: absolute; z-index: 9; right: calc(var(--safe-r, 0px) + clamp(16px, 2.6cqw, 40px)); bottom: calc(var(--safe-b, 0px) + 18px);
  display: flex; align-items: flex-end; gap: 8px; pointer-events: none;
}
.yard-controls > *, .yard-observe > * { pointer-events: auto; }
.yard-observe { display: flex; align-items: center; gap: 6px; }
.yard-observe[hidden], .yard-button[hidden] { display: none; }
.yard-button {
  display: grid; justify-items: end; gap: 2px; min-height: 40px; padding: 8px 14px 8px 30px; position: relative;
  border: 1px solid rgba(201, 156, 82, .62); background: linear-gradient(180deg, rgba(42, 36, 30, .86), rgba(24, 20, 17, .9));
  color: var(--heraldry-cream); cursor: pointer; text-align: right; box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  transition: border-color .12s ease, background .12s ease, transform .1s ease;
}
.yard-button::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg);
  background: var(--heraldry-brass); transition: background .12s ease;
}
.yard-button span { font: 400 14px/1 var(--font-inscription); letter-spacing: .14em; white-space: nowrap; }
.yard-button small { color: rgba(234, 220, 182, .7); font: 600 10px/1.1 var(--font-script); letter-spacing: .06em; white-space: nowrap; }
.yard-button:hover { border-color: var(--heraldry-brass-light); background: linear-gradient(180deg, rgba(56, 47, 38, .9), rgba(30, 25, 21, .92)); }
.yard-button:hover::before { background: var(--heraldry-brass-light); }
.yard-button:active { transform: translateY(1px); }
.yard-button:focus-visible, .yard-toggle:focus-visible, .foot-link:focus-visible, .herald-tab:focus-visible, .herald-close:focus-visible { outline: 2px solid var(--heraldry-brass-light); outline-offset: 2px; }
.yard-toggle {
  min-height: 34px; padding: 6px 10px; border: 1px solid rgba(201, 156, 82, .38); background: rgba(20, 17, 14, .62); color: rgba(234, 220, 182, .82);
  font: 700 10px/1 var(--font-script); letter-spacing: .16em; cursor: pointer; transition: border-color .12s ease, color .12s ease;
}
.yard-toggle:hover { border-color: rgba(236, 201, 127, .8); color: var(--heraldry-cream); }
.yard-toggle[aria-pressed="false"] { color: rgba(234, 220, 182, .5); }
/* the yard given the whole screen: the pointer keeps out of the picture once it has been still a moment */
body.yard-still, body.yard-still * { cursor: none !important; }
/* the subtitle with the banner gone: the middle of the screen, low */
.subtitle.menu-caption { transition: opacity .18s ease, transform .18s ease, left .42s cubic-bezier(.2, .8, .25, 1), bottom .42s cubic-bezier(.2, .8, .25, 1); }
.subtitle.menu-caption.observing { left: 50%; bottom: calc(var(--safe-b, 0px) + 8%); }
/* the herald's call that challengers await: over the middle of the yard when the banner is aside */
body.observing .herald-toast { left: 50cqw; max-width: calc(100cqw - 40px); }
/* the drag hint is for the stage, not the yard */
.menu-world.observing .turn-hint { display: none; }

/* --- the banner's foot: the server's state in a word, the Herald (on a narrow screen), the Credits ------------ */
.banner-foot { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding-top: 7px; border-top: 1px solid rgba(201, 156, 82, .3); }
.link-mark { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; min-width: 0; color: rgba(234, 220, 182, .72); font: 600 10.5px/1.2 var(--font-script); letter-spacing: .05em; white-space: nowrap; }
.link-mark b { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.link-mark i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #d9a441; box-shadow: 0 0 5px rgba(217, 164, 65, .7); }
.link-mark[data-tone="online"] i { background: #7fc26b; box-shadow: 0 0 5px rgba(127, 194, 107, .7); }
.link-mark[data-tone="offline"] i { background: #c9564a; box-shadow: 0 0 5px rgba(201, 86, 74, .7); }
.foot-link { min-height: 30px; padding: 4px 7px; border: 0; background: none; color: rgba(234, 220, 182, .62); font: 700 10px/1 var(--font-script); letter-spacing: .2em; cursor: pointer; }
.foot-link:hover { color: var(--heraldry-brass-light); }
/* (the Herald has its tab on the banner's edge; its foot link is for where the tab will not fit) */
.foot-herald { display: none; }
/* the plaques' small descriptions: easier to read, the banner no bigger */
.menu-command small { color: rgba(234, 220, 182, .78); }
/* Armory stays reachable while the command banner scrolls. */
#menu > .banner-panel { top: 70px; max-height: calc(100% - 70px); }
#menu::after { top: 66px; }
.armory-shortcut {
  position: absolute; z-index: 9; top: 9px; left: var(--banner-left); width: var(--banner-width);
  min-height: 48px; padding: 6px 18px; display: flex; align-items: center; justify-content: center; gap: 14px;
  pointer-events: auto; cursor: pointer; border: 1px solid #b7a375; border-radius: 3px;
  color: #f1e5c7; background: linear-gradient(165deg, #667078 0%, #343c43 33%, #23292e 56%, #414a51 100%);
  box-shadow: inset 0 1px 0 #b7b9b5, inset 0 -2px 0 #151b20, inset 0 0 0 3px #30373c, 0 3px 7px #0008;
  transition: transform .26s ease, visibility 0s linear 0s, filter .12s ease;
}
.armory-shortcut::before, .armory-shortcut::after {
  content: ""; position: absolute; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #c3ae80;
  box-shadow: 0 1px 1px #000; transform: translateY(-50%);
}
.armory-shortcut::before { left: 7px; }
.armory-shortcut::after { right: 7px; }
.armory-shortcut-copy { min-width: 0; display: grid; gap: 3px; text-align: center; }
.armory-shortcut strong { font: 400 17px/1 var(--font-inscription); letter-spacing: .1em; }
.armory-shortcut small { font: 500 11px/1.2 var(--font-script); color: #d4d6d1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.armory-shortcut svg { flex: none; width: 23px; height: 23px; }
.armory-sword { fill: #d6d7ce; stroke: #e7d4a7; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.armory-spell { fill: #9cd8e4; stroke: #d9f2ef; stroke-width: .7; }
.armory-shortcut:hover { filter: brightness(1.15); }
.armory-shortcut:active { filter: brightness(.9); }
.armory-shortcut:focus-visible { outline: 2px solid #f4d58e; outline-offset: 3px; }
#menu.withdrawn .armory-shortcut {
  transform: translateX(calc(-1 * (var(--banner-left) + var(--banner-width) + 80px)));
  visibility: hidden; transition: transform .23s ease, visibility 0s linear .23s;
}
@media (prefers-reduced-motion: reduce) { .armory-shortcut, #menu.withdrawn .armory-shortcut { transition: none; } }

/* --- the Herald: a wax-sealed tab on the banner's edge, and the notice drawn out from it ---------------------- */
.herald-tab {
  position: absolute; z-index: 9; top: 128px; left: calc(var(--banner-left) + var(--banner-width) - 2px); display: grid; justify-items: center; gap: 5px;
  width: 30px; padding: 10px 0 12px; border: 1px solid rgba(110, 82, 46, .55); border-left: 0; pointer-events: auto; cursor: pointer;
  background: linear-gradient(90deg, #cdb98b, #e3d4ac 40%, #d8c69a); color: var(--heraldry-ink); box-shadow: 2px 2px 7px rgba(0, 0, 0, .35);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 50% 100%, 0 calc(100% - 8px));
}
.herald-tab span:last-child { writing-mode: vertical-rl; font: 400 12px/1 var(--font-inscription); letter-spacing: .2em; }
.herald-seal { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #c2463a, #8d241d 62%, #5c1712); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.herald-tab:hover { background: linear-gradient(90deg, #d8c597, #ecdcb4 40%, #e1cfa3); }
.herald-tab[aria-expanded="true"] { background: linear-gradient(90deg, #e1cfa3, #f0e2bb 40%, #e6d4a8); }
.herald-notice {
  position: absolute; z-index: 10; top: 64px; left: calc(var(--banner-left) + var(--banner-width) + 36px); width: min(360px, calc(100cqw - var(--banner-left) - var(--banner-width) - 56px));
  max-height: calc(100% - 96px); display: flex; flex-direction: column; pointer-events: auto; overflow: hidden;
  border: 1px solid rgba(110, 82, 46, .6); background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 248, 225, .5), transparent 60%),
    repeating-linear-gradient(0deg, rgba(90, 64, 34, .045) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #ecdfba, #e2d1a6 70%, #d8c497);
  color: var(--heraldry-ink); box-shadow: 0 2px 0 rgba(255, 255, 255, .25) inset, 0 14px 34px rgba(0, 0, 0, .45);
  transform-origin: 0 64px; animation: herald-sheet-in .26s cubic-bezier(.2, .8, .25, 1) both;
}
.herald-notice.closing { animation: herald-sheet-out .18s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes herald-sheet-in { from { opacity: 0; transform: translateX(-14px) scaleX(.94); } }
@keyframes herald-sheet-out { to { opacity: 0; transform: translateX(-12px) scaleX(.95); } }
.herald-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid rgba(110, 82, 46, .35); }
.herald-head h2 { margin: 0; font: 400 16px/1.1 var(--font-inscription); letter-spacing: .12em; color: #4a2a1c; }
.herald-close { flex: none; width: 32px; height: 32px; border: 1px solid rgba(110, 82, 46, .4); background: rgba(255, 250, 235, .35); color: #4a2a1c; font: 700 14px/1 var(--font-script); cursor: pointer; }
.herald-close:hover { background: rgba(255, 250, 235, .7); }
.herald-body { overflow: auto; padding: 12px 16px 16px; overscroll-behavior: contain; }
.herald-latest h3 { margin: 0 0 6px; font: 400 18px/1.15 var(--font-inscription); color: #6d2018; }
.herald-latest p { margin: 0 0 8px; font: 500 13px/1.5 var(--font-script); color: #2f2219; }
.herald-changes h4 { margin: 12px 0 6px; padding-top: 10px; border-top: 1px solid rgba(110, 82, 46, .3); font: 400 12px/1 var(--font-inscription); letter-spacing: .24em; color: #6b4e2c; }
.herald-changes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.herald-changes li { display: grid; grid-template-columns: 74px 1fr; gap: 8px; font: 500 12.5px/1.4 var(--font-script); color: #2f2219; }
.herald-changes time { color: #7a5a35; font-weight: 700; font-size: 11px; letter-spacing: .03em; padding-top: 1px; }
.herald-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(110, 82, 46, .3); font: italic 500 13px/1.45 var(--font-script); }

/* a narrow screen (the banner across most of it): the Herald from the banner's foot, the notice over the yard */
@container app (max-width: 760px) {
  .herald-tab { display: none; }
  .foot-herald { display: inline-block; }
  .herald-notice { left: auto; right: 12px; width: min(340px, calc(100cqw - 24px)); top: 12px; max-height: calc(100% - 24px); transform-origin: 100% 0; }
  .yard-button small { display: none; }
  /* (the yard's own sound and subtitle switches only where there is room for them: the Settings have both) */
  .yard-toggle { display: none; }
}
/* a short screen (a phone on its side): the controls smaller, the tab nearer the top */
@container app (max-height: 500px) {
  .herald-tab { top: 74px; }
  .yard-controls { bottom: calc(var(--safe-b, 0px) + 10px); }
  .yard-button { min-height: 38px; padding: 6px 12px 6px 26px; }
  .yard-button small { display: none; }
  .banner-foot { margin-top: 2px; padding-top: 3px; }
  /* (the server's state as its mark alone, its words in the title: the short banner keeps its height for the commands) */
  .link-mark b { display: none; }
  .touch-ui .banner-foot .foot-link { min-height: 34px; padding: 4px 9px; }
  .herald-notice { top: 8px; max-height: calc(100% - 16px); }
}
/* touch: targets big enough for a thumb */
.touch-ui .yard-button { min-height: 46px; }
.touch-ui .yard-toggle { min-height: 44px; padding: 8px 12px; }
.touch-ui .foot-link { min-height: 40px; padding: 6px 10px; }
.touch-ui .herald-close { width: 44px; height: 44px; }
@media (prefers-reduced-motion: reduce) {
  #menu .banner-panel, #menu::after, #menu .herald-tab, #menu.withdrawn .banner-panel, #menu.withdrawn::after, #menu.withdrawn .herald-tab { transition: none; }
  .herald-notice, .herald-notice.closing { animation: none; }
  .yard-inscription.show { animation: none; opacity: 0; }
  .menu-vignette::before, .menu-vignette::after { transition: none; }
}

/* Keep the cloth silhouette and hem outside the scrolling content. */
.banner-panel:has(> .banner-scroll) { overflow: hidden; padding: 0; }
.banner-scroll {
  min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  margin-bottom: calc(var(--hem) + 10px); padding: 34px 30px 16px;
  scrollbar-width: thin; scrollbar-color: #c99c52 transparent; scroll-padding-block: 18px;
}
.banner-scroll::-webkit-scrollbar { width: 5px; }
.banner-scroll::-webkit-scrollbar-thumb { background: #b18b51; }
.menu-command small, .mode-choice small { color: #e6d7b2; font-size: 12px; line-height: 1.4; }
.primary-command small { color: #3c2914; }
.credits-shell { grid-template-rows: auto minmax(0, 1fr); }
.credits-body { min-height: 0; padding-top: 0; scroll-padding-top: 100px; }
.credits-body .credits-card { margin-top: 18px; }
.credits-search { position: sticky; top: 0; z-index: 1; flex-wrap: wrap; padding: 12px 0; background: #241e19; border-bottom: 1px solid #655038; }
.credits-search label { width: 100%; color: #e7c47c; font: 700 12px/1.4 var(--font-script); letter-spacing: .15em; }
.credits-search > label:first-child { flex: 1; width: auto; }
.credits-search .credits-sort { flex: none; display: flex; align-items: center; gap: 5px; width: auto; margin-left: auto; color: #b9ac91; font: 500 11px/1.2 var(--font-script); letter-spacing: 0; }
.credits-sort select { min-width: 0; max-width: 142px; min-height: 30px; padding: 4px 6px; border: 1px solid #655038; border-radius: 2px; background: #241e19; color: #d5c7ab; font: inherit; cursor: pointer; }
.credits-sort select:focus-visible { outline: 2px solid #e7c47c; outline-offset: 2px; }
.credits-search > .game-input { flex-basis: 100%; order: 2; }
.credits-search > small { order: 3; }
.credits-search .game-input::placeholder { color: #b9ac91; }
.credits-search small, .credits-line small { color: #c1b59b; }
.credits-support { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; margin: 12px 0; padding: 10px 12px; border: 1px solid #655038; background: rgba(78, 28, 26, .18); }
.credits-support h3 { grid-column: 1; margin: 0 0 4px; color: #e7c47c; font: 600 12px/1.3 var(--font-script); letter-spacing: .1em; }
.credits-support p { grid-column: 1; margin: 0; color: #e6d7b2; font: 500 14px/1.4 var(--font-script); }
.credits-support a { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid #8f7348; color: #f1dfae; text-decoration: none; font: 600 14px/1.3 var(--font-script); }
.credits-support a:hover { background: rgba(201, 156, 82, .12); border-color: #c99c52; }
.credits-support a:focus-visible { outline: 2px solid #e7c47c; outline-offset: 3px; }
.credits-support small { grid-column: 1 / -1; margin-top: 6px; color: #c1b59b; font: 500 12px/1.5 var(--font-script); }
@container app (max-width: 480px) {
  .credits-support { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .credits-support h3 { margin: 0; }
  .credits-support a { grid-column: 1; grid-row: auto; justify-self: start; }
  .credits-support small { margin: 0; }
}
.voice-play:focus-visible, .credits-section summary:focus-visible, .herald-archive summary:focus-visible { outline: 2px solid #e7c47c; outline-offset: 2px; }
.herald-latest p { font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
.herald-latest h3 { line-height: 1.3; margin-bottom: 10px; }
.herald-changes ul { gap: 13px; }
.herald-changes li { font-size: 13px; line-height: 1.55; grid-template-columns: 78px minmax(0, 1fr); }
.herald-changes time { font-size: 12px; color: #694820; }
.herald-archive { margin-top: 15px; border-top: 1px solid #b7a27a; padding-top: 10px; }
.herald-archive summary { cursor: pointer; color: #6d2018; font: 700 13px/1.5 var(--font-script); margin-bottom: 10px; }
@container app (max-height: 500px) {
  .banner-scroll { padding: 12px 18px 14px; }
  #menu .menu-command small { display: block; }
  .credits-search { padding: 8px 0; }
}
@container app (max-width: 640px) {
  .banner-scroll { padding: 24px 22px 16px; }
  .herald-changes li { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
}
.menu-scroll-cue { position:absolute; z-index:2; left:24px; right:24px; bottom:calc(var(--hem) + 12px); min-height:30px; border:1px solid #c99c5266; background:#5a211d; color:#f1dfae; font:700 10px/1 var(--font-script); letter-spacing:.12em; cursor:pointer; box-shadow:0 -8px 14px #69251e; }
.menu-scroll-cue:hover { background:#742b24; border-color:#e7c47c; }
.menu-scroll-cue:focus-visible { outline:2px solid #e7c47c; outline-offset:2px; }
.menu-scroll-cue[hidden] { display:none; }
@container app (max-height:640px) {
  #menu .banner-scroll { padding-top:16px; }
  #menu .crest { width:26px; height:31px; margin-bottom:4px; }
  #menu .game-brand { margin-bottom:12px; }
  #menu .eyebrow { font-size:10px; margin-bottom:4px; }
  #menu h1 { font-size:24px; white-space:normal; letter-spacing:.015em; }
}

/* Prevent narrow Armory and manual banners from expanding their grid tracks
   under long spell names, equipment notes, translations and control labels. */
.armory-inner,.armory-scroll,.armory-spells,.armory-blade,.spell-card {min-width:0;max-width:100%}
.spell-card > :is(.spell-name,small,em,i),
.armory-blade > :is(b,small),.armory-slot,.armory-note,
.banner-panel .controls-grid :is(span,b),.banner-panel .rules-copy {
 min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal;white-space:normal
}
.armory-tabs {min-width:0;max-width:100%;display:flex;flex-wrap:wrap;gap:4px}
.armory-tabs button {min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal}
.banner-panel .controls-grid {grid-template-columns:minmax(80px,96px) minmax(0,1fr)}

.solo-options { display: none; } /* The right companion is already visible on desktop. */
@container app (max-width: 640px) {
  #solo-menu .solo-options { display: block; }
}

/* CASTLEWARD paired game-mode standards
   Solo and Open Rooms share one large activity/list standard and one narrower
   detail/creation standard. Both widths are shell-relative, not viewport-relative,
   because the client can rotate its game shell independently on mobile. */
#solo-menu,
#rooms-menu {
  --banner-width: min(520px, 42cqw);
}
#solo-menu > .side-screen-inner,
#rooms-menu > .side-screen-inner {
  --banner-width: min(520px, 42cqw);
  width: var(--banner-width);
  min-width: 0;
}
#solo-menu > .companion-banner,
#rooms-menu > .companion-banner {
  --hem: 32px;
  left: auto;
  right: clamp(18px, 3.5cqw, 48px);
  width: min(370px, 32cqw);
  min-width: 0;
  max-width: calc(100cqw - 24px);
}
/* The right standard gets its own brass rod; the section's default rod belongs
   to the left standard. Both fittings remain outside the clipped cloth. */
#solo-menu::before,
#rooms-menu::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 12px;
  right: calc(clamp(18px, 3.5cqw, 48px) - 22px);
  width: calc(min(370px, 32cqw) + 44px);
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(#f2d692, #b98a3e 55%, #6f5122);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
}
#solo-menu .companion-return,
#rooms-menu .companion-return { display: none; }
#solo-menu .companion-banner .banner-scroll,
#rooms-menu .companion-banner .banner-scroll {
  min-width: 0;
  overflow-wrap: anywhere;
}
#solo-menu .companion-banner :is(.game-input, .mode-choice, .lobby-config),
#rooms-menu .companion-banner :is(.game-input, .mode-choice, .lobby-config) {
  min-width: 0;
  max-width: 100%;
}
@container app (max-width: 900px) {
  #solo-menu,
  #rooms-menu { --banner-width: min(450px, 45cqw); }
  #solo-menu > .side-screen-inner,
  #rooms-menu > .side-screen-inner {
    --banner-width: min(450px, 45cqw);
    width: var(--banner-width);
  }
  #solo-menu > .companion-banner,
  #rooms-menu > .companion-banner {
    right: 18px;
    width: min(360px, 43cqw);
  }
  #solo-menu::before,
  #rooms-menu::before {
    right: -4px;
    width: calc(min(360px, 43cqw) + 44px);
  }
}
@container app (max-width: 640px) {
  #solo-menu,
  #rooms-menu { --banner-left: 12px; --banner-width: calc(100cqw - 24px); }
  #solo-menu > .side-screen-inner,
  #rooms-menu > .side-screen-inner,
  #solo-menu > .companion-banner,
  #rooms-menu > .companion-banner {
    --banner-width: calc(100cqw - 24px);
    left: 12px;
    right: auto;
    width: calc(100cqw - 24px);
    max-width: calc(100cqw - 24px);
  }
  #solo-menu::before,
  #rooms-menu::before {
    left: -10px;
    right: auto;
    width: calc(100cqw + 20px);
  }
  #solo-menu[data-panel="list"] > .companion-banner,
  #rooms-menu[data-panel="list"] > .companion-banner,
  #solo-menu[data-panel="details"] > .side-screen-inner,
  #rooms-menu[data-panel="details"] > .side-screen-inner {
    display: none;
  }
  #solo-menu[data-panel="list"]::before,
  #rooms-menu[data-panel="list"]::before,
  #solo-menu[data-panel="details"]::after,
  #rooms-menu[data-panel="details"]::after {
    display: none;
  }
  #solo-menu .companion-return,
  #rooms-menu .companion-return {
    display: inline-flex;
  }
}

/* Compact room docket in the secondary banner. The room rules are paired
   name/value entries, not eight independent blocks of vertically stacked text. */
#rooms-menu .room-selected-info {
  margin: 12px 0 14px;
  min-width: 0;
  font: 500 13px/1.4 var(--font-script);
  color: rgba(234, 220, 182, .83);
}
#rooms-menu .room-selected-info dl { margin: 0; display: grid; gap: 0; }
#rooms-menu .room-selected-info dl > div {
  display: grid;
  grid-template-columns: minmax(0, 100px) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(234, 220, 182, .19);
}
#rooms-menu .room-selected-info dt {
  min-width: 0;
  color: var(--heraldry-brass-light);
  font: 800 10px/1.25 var(--font-script);
  letter-spacing: .11em;
  overflow-wrap: anywhere;
}
#rooms-menu .room-selected-info dd {
  min-width: 0;
  margin: 0;
  color: #f1e4c2;
  font: 700 13px/1.3 var(--font-script);
  text-align: right;
  overflow-wrap: anywhere;
}
#rooms-menu .room-row.selected,
#rooms-menu .room-row[aria-pressed="true"] {
  border-color: var(--heraldry-brass-light);
  background: linear-gradient(180deg, rgba(91, 65, 38, .98), rgba(48, 35, 27, .98));
  box-shadow: inset 3px 0 var(--heraldry-brass-light);
}
@container app (min-width: 641px) {
  /* The left standard already has the editable name. On a phone the list
     vanishes in details view, so keep the right-hand name field there. */
  #solo-menu .solo-companion > .banner-scroll > label[for="solo-right-name"],
  #solo-menu #solo-right-name,
  #rooms-menu .rooms-companion > .banner-scroll > label[for="rooms-right-name"],
  #rooms-menu #rooms-right-name { display: none; }
}

/* Integrated from PR #379: filter controls, room detail surface and validated public-room forms. */
.mode-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 3px 0 14px;
}
.mode-filters button {
  padding: 7px 9px;
  border: 1px solid rgba(201,156,82,.45);
  border-radius: 2px;
  background: rgba(31,24,22,.63);
  color: var(--heraldry-cream);
  font: 700 11px/1.15 var(--font-script);
  letter-spacing: .06em;
  cursor: pointer;
}
.mode-filters button:hover, .mode-filters button:focus-visible {
  border-color: var(--heraldry-brass-light);
}
.mode-filters button.selected, .mode-filters button[aria-pressed="true"] {
  background: linear-gradient(#ecd397,#b98a3e);
  border-color: var(--heraldry-brass-light);
  color: #291b13;
}
.room-selected-info {
  padding: 12px 10px;
  margin: 4px 0 16px;
  min-height: 56px;
  border: 1px solid rgba(201,156,82,.32);
  background: rgba(22,18,15,.34);
  color: var(--heraldry-cream);
  font: 500 13px/1.45 var(--font-script);
  overflow-wrap: anywhere;
}
#room-list .room-row.selected,
#room-list .room-row[aria-pressed="true"] {
  border-color: var(--heraldry-brass-light);
  background: linear-gradient(180deg,rgba(100,71,44,.95),rgba(44,36,29,.95));
  box-shadow: inset 3px 0 0 var(--heraldry-brass-light);
}
.lobby-config {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(201,156,82,.4);
}
.lobby-config[hidden], .lobby-config [hidden] { display: none !important; }
.lobby-config label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--heraldry-brass-light);
  font: 700 11px/1.25 var(--font-script);
  letter-spacing: .08em;
}
.lobby-config .game-input { width: 100%; min-width: 0; }
.lobby-config :is(button, select, input) { max-width: 100%; }
#rooms-menu .banner-panel :is(h2,.room-row,button),
#solo-menu .banner-panel :is(h2,button) {
  overflow-wrap: anywhere;
}


/* --- Paired heraldic standards: one decision banner, one rules banner. ---
   Every panel scrolls INSIDE its cloth and can never reach the finial bar. */
#breakthrough-menu, #private-menu { --banner-width:min(510px,42cqw); }
#breakthrough-menu > .side-screen-inner,
#private-menu > .side-screen-inner {
  --banner-width:min(510px,42cqw);width:var(--banner-width);min-width:0;
}
#breakthrough-menu > .companion-banner,
#private-menu > .companion-banner {
  --hem:32px;left:auto;right:clamp(18px,3.5cqw,48px);
  width:min(410px,34cqw);max-width:calc(100cqw - 24px);min-width:0;
}
#breakthrough-menu .companion-banner .banner-scroll,
#private-menu .companion-banner .banner-scroll { min-width:0; }
#breakthrough-menu .companion-banner :is(.game-input,.vote-row,.mode-choice),
#private-menu .companion-banner :is(.game-input,.lobby-config,.mode-choice) {
  min-width:0;max-width:100%;
}
#breakthrough-menu .mettle-companion .vote-row {
  display:grid;grid-template-columns:minmax(0,1fr);gap:7px;
  padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid #e9d7ac29;
}
#breakthrough-menu .mettle-companion .vote-row > span {
  display:block;min-width:0;grid-column:1/-1;color:#e9c984;
  font:800 10px/1.3 var(--font-script);letter-spacing:.16em;
}
#breakthrough-menu .mettle-companion .vote-row > button {
  justify-self:start;min-width:0;max-width:100%;font-size:clamp(12px,1.18cqw,17px);
  line-height:1.12;overflow-wrap:normal;text-wrap:balance;white-space:normal;
}
#breakthrough-menu .mettle-companion .vote-row {
  display:flex;align-items:center;flex-wrap:wrap;
}
#breakthrough-menu .mettle-companion .vote-row > span {flex:0 0 100%;}
#breakthrough-menu .mettle-companion .vote-chip small { font:600 10px/1.1 var(--font-script); }
#breakthrough-menu .mettle-order-note {border-top:1px solid #e9d7ac38;padding-top:9px;}
#breakthrough-menu .mettle-options,
#private-menu .private-options {display:none;}
#breakthrough-menu .companion-return,
#private-menu .companion-return {display:none;}
#private-menu .private-mode-tabs {margin:4px 0 12px;}
#private-menu .private-mode-tabs button {min-height:42px;padding:9px 10px;}
#private-menu .private-settings-form {
  margin:4px 0 12px;padding:0;border:0;gap:12px;
}
#private-menu .private-settings-form label {font-size:11px;}
#private-menu .private-settings-form input[type=number] {font-variant-numeric:tabular-nums;}
#private-menu #private-create-right {display:none;}
@container app (min-width:641px){
  #breakthrough-menu .mettle-companion label[for="breakthrough-right-name"],
  #breakthrough-menu #breakthrough-right-name,
  #private-menu .private-companion label[for="private-right-name"],
  #private-menu #private-right-name {display:none;}
}
#private-menu .private-rule-foot {padding-top:8px;border-top:1px solid #e9d7ac38;}

/* A forged rod instead of a featureless rounded yellow capsule:
   squared iron/brass ferrules, thin highlight and dark undercut. */
.menu-screen::after,.side-screen::after,.lobby-screen::after,
#solo-menu::before,#rooms-menu::before,
#breakthrough-menu::before,#private-menu::before {
  top:5px;height:12px;border:1px solid #704718;border-radius:2px;
  background:
    linear-gradient(90deg,#8e652b 0%,#e4ba65 1.2%,#926528 2.3%,transparent 2.4%,
      transparent 97.6%,#926528 97.7%,#e4ba65 98.8%,#8e652b 100%),
    linear-gradient(180deg,#f1d28c 0%,#d2a457 22%,#8c642b 64%,#c59a4e 82%,#674720 100%);
  box-shadow:inset 0 1px 0 #f8e1a6aa,inset 0 -2px 0 #58381780,0 3px 6px #0007;
}
#breakthrough-menu::before,#private-menu::before {
  content:"";display:block;position:absolute;z-index:2;
  right:calc(clamp(18px,3.5cqw,48px) - 22px);
  width:calc(min(410px,34cqw) + 44px);
}
/* Headings begin well BELOW the rod. The left and right cloth have the
   same crown padding, even on short landscape screens. */
#solo-menu > .banner-panel .banner-scroll,
#rooms-menu > .banner-panel .banner-scroll,
#breakthrough-menu > .banner-panel .banner-scroll,
#private-menu > .banner-panel .banner-scroll {
  padding-top:43px;
}
#solo-menu .companion-banner .eyebrow,
#rooms-menu .companion-banner .eyebrow,
#breakthrough-menu .companion-banner .eyebrow,
#private-menu .companion-banner .eyebrow {
  margin-bottom:8px;line-height:1.3;overflow-wrap:normal;
}
#solo-menu .companion-banner h2,
#rooms-menu .companion-banner h2,
#breakthrough-menu .companion-banner h2,
#private-menu .companion-banner h2 {line-height:1.08;text-wrap:balance;}
@container app (max-width:900px) {
  #breakthrough-menu,#private-menu {--banner-width:min(440px,45cqw);}
  #breakthrough-menu > .side-screen-inner,
  #private-menu > .side-screen-inner {
    --banner-width:min(440px,45cqw);width:var(--banner-width);
  }
  #breakthrough-menu > .companion-banner,
  #private-menu > .companion-banner {right:18px;width:min(360px,43cqw);}
  #breakthrough-menu::before,#private-menu::before {
    right:-4px;width:calc(min(360px,43cqw) + 44px);
  }
}
@container app (max-height:500px) {
  #solo-menu > .banner-panel .banner-scroll,
  #rooms-menu > .banner-panel .banner-scroll,
  #breakthrough-menu > .banner-panel .banner-scroll,
  #private-menu > .banner-panel .banner-scroll {padding-top:27px;}
  #breakthrough-menu .mettle-companion .vote-row {gap:4px;margin-bottom:4px;}
  #breakthrough-menu .mettle-companion .vote-row > button {padding:5px 7px;}
  #private-menu .private-settings-form {gap:6px;}
}
@container app (max-width:640px) {
  #breakthrough-menu,#private-menu {
    --banner-left:12px;--banner-width:calc(100cqw - 24px);
  }
  #breakthrough-menu > .side-screen-inner,
  #private-menu > .side-screen-inner,
  #breakthrough-menu > .companion-banner,
  #private-menu > .companion-banner {
    --banner-width:calc(100cqw - 24px);
    left:12px;right:auto;width:calc(100cqw - 24px);
    max-width:calc(100cqw - 24px);
  }
  #breakthrough-menu::before,#private-menu::before {
    left:-10px;right:auto;width:calc(100cqw + 20px);
  }
  #breakthrough-menu[data-panel="list"] > .companion-banner,
  #private-menu[data-panel="list"] > .companion-banner,
  #breakthrough-menu[data-panel="details"] > .side-screen-inner,
  #private-menu[data-panel="details"] > .side-screen-inner {display:none;}
  #breakthrough-menu[data-panel="list"]::before,
  #private-menu[data-panel="list"]::before,
  #breakthrough-menu[data-panel="details"]::after,
  #private-menu[data-panel="details"]::after {display:none;}
  #breakthrough-menu .companion-return,
  #private-menu .companion-return {display:inline-flex;}
  #breakthrough-menu .mettle-options,
  #private-menu .private-options {display:block;}
  #private-menu #private-create-right {display:block;}
  #breakthrough-menu .mettle-companion .vote-row > button {font-size:14px;}
}

#breakthrough-menu [hidden], #breakthrough-menu[data-solo-mode="true"]::before { display: none !important; }

@container app (max-width: 550px) and (min-height: 430px) {
  .armory-stage-header { padding-inline: 6px; }
  .armory-stage-header h2 { font-size: 12px; }
  .armory-renown-pill { display: none; }
  .armory-kit-stage, .armory-kit-stage.inspecting {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto 0px;
    grid-template-areas: "nav" "preview" "tools" "details";
    transition: none;
  }
  .armory-kit-stage.inspecting { grid-template-rows: auto minmax(6rem, 1fr) auto minmax(0, 1.15fr); }
  .armory-category-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .armory-slot-plaque { justify-content: center; padding: 4px 1px; min-height: 42px; }
  .armory-slot-plaque .plaque-icon, .armory-slot-plaque .plaque-name { display: none; }
  .armory-slot-plaque .plaque-label { font-size: 7px; letter-spacing: .03em; }
  .armory-nav-siege-btn { margin: 0; padding: 4px; font-size: 8px; letter-spacing: .06em; }
  .armory-nav-siege-btn .nav-arrow { display: none; }
  .armory-siege-stage, .armory-heraldry-stage { grid-template-columns: minmax(0, 1fr); }
  .armory-heraldry-stage { grid-template-areas: "preview" "tools" "details"; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); }
  .armory-siege-stage { grid-template-areas: "tabs" "preview" "tools" "details"; grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .armory-kit-stage { transition: none; }
}

/* Chronicles shows the exact combat glyphs, with their live status palette,
   not a second set of dark decorative tile backgrounds. */
#chronicles-affliction-list .chronicles-affliction-icon {
  background:transparent;border:1px solid transparent;box-shadow:none;
  color:#e7d599;min-height:42px;padding:6px;
}
#chronicles-affliction-list .chronicles-affliction-icon svg {width:26px;height:26px;}
#chronicles-affliction-list .chronicles-affliction-icon[data-effect="frozen"],
#chronicles-affliction-list .chronicles-affliction-icon[data-effect="chilled"],
#chronicles-affliction-list .chronicles-affliction-icon[data-effect="frostbound"] {color:#b5e4f1;}
#chronicles-affliction-list .chronicles-affliction-icon[data-effect="blustered"] {color:#c3dacc;}
#chronicles-affliction-list .chronicles-affliction-icon[data-effect="shaken"],
#chronicles-affliction-list .chronicles-affliction-icon[data-effect="rupture"] {color:#d9b99a;}
#chronicles-affliction-list .chronicles-affliction-icon[data-effect="staggered"] {color:#e9afa1;}
#chronicles-affliction-list .chronicles-affliction-icon:is(.selected,:hover) {
  background:rgba(201,156,82,.10);border-color:#ebc67d;
}