/* A cool violet palette identifies trial-only selections without changing shared layouts. */
.trial-room-screen, body.trial-preparation-active #app {
  --surface: #171a30; --surface-2: #22263f; --line: #606589; --border: #606589;
  --text: #f1efff; --muted: #c2c5df; --gold: #cac1ff; --gold-strong: #dbd3ff;
  --primary-bg: #494278; --primary-hover: #635994; --primary-border: #b6a7ed; --primary-text: #fff5ff;
  --selected-bg: #313553; --selected-border: #b4abef; --selected-text: #eeeaff;
  --ga-control-border: #73779b; --ga-control-bg: linear-gradient(180deg, #292c48, #1b1e34);
  --ga-action-bg: linear-gradient(180deg, #75649e, #4d437d 55%, #37325d);
  --accent-rgb: 181 165 239;
}
body.trial-preparation-active #app :is(.equipment-deck-shell, .formation-screen, .panel, .equipment-loadout-board, .equipment-parameter-board, .hero-command-summary, .inventory-control-deck, .formation-deck, .party-team-card, .equipment-accordion, .orb-panel, .party-settings-dialog, .equip-confirm-dialog, .party-team-picker-dialog) {
  border-color: #64678d; background-color: #181b30;
  background-image: linear-gradient(145deg, rgb(114 92 169 / 14%), rgb(19 24 43 / 95%));
}
body.trial-preparation-active #app :is(.equipment-board-heading strong, .formation-roster-heading h3, .page-heading h1) { color: #ebe4ff; }
body.trial-preparation-active #app .inventory-toolbar[hidden] { display: none; }
.trial-preparation-banner { color: #eee4ff; border-color: #a496d4; background: linear-gradient(135deg, #343052, #19263a); }
.trial-room-screen { max-width: 960px; margin: 0 auto; padding: 8px; overflow-wrap: anywhere; }
.trial-room-screen p { font-size: var(--ga-font-body); line-height: 1.7; }
.trial-room-screen h3 { font-size: var(--ga-font-section); margin: 16px 0 8px; }
.trial-cost { margin: 8px 0; padding: 12px; border: 1px solid var(--border, #394453); background: var(--surface); }
.trial-status { min-height: 1.2em; font-size: var(--ga-font-note); color: var(--muted); }
.trial-tabs,.trial-actions,.trial-commands { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.trial-tabs > * { flex: 1; }
.trial-actions > *, .trial-commands > * { flex: 1 1 180px; white-space: normal; }
.trial-commands small { display: block; font-size: var(--ga-font-note); }
.trial-floor-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.trial-room-screen .trial-floor { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px; text-align: left; white-space: normal; }
.trial-floor-number { color: var(--muted); font-size: var(--ga-font-note); }
.trial-floor strong { font-size: var(--ga-font-section); }
.trial-floor small { font-size: var(--ga-font-note); line-height: 1.6; }
.trial-preparation,.trial-practice,.trial-result,.trial-combat { padding: 16px; border: 1px solid var(--border, #394453); background: var(--surface); border-radius: 4px; margin: 12px 0; min-width: 0; }
.trial-room-screen label { display: flex; flex-direction: column; gap: 8px; font-size: var(--ga-font-body); }
.trial-room-screen input,.trial-room-screen select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; font-size: max(1rem,16px); color: var(--text); background: var(--surface); border: 1px solid var(--border, #394453); border-radius: 2px; padding: 8px; }
.trial-practice form { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.trial-practice form label { flex: 1 1 120px; }
.trial-note,.trial-room-screen .trial-note { color: var(--muted); font-size: var(--ga-font-note); }
.trial-combat-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: var(--ga-font-section); }
.trial-actors { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 8px; margin: 12px 0; }
.trial-actor { display: flex; gap: 8px; padding: 8px; border: 1px solid var(--border, #394453); min-width: 0; }
.trial-actor img { width: 64px; height: 80px; object-fit: contain; flex: 0 0 64px; }
.trial-actor > div { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 4px; }
.trial-actor span { font-size: var(--ga-font-note); }
.trial-actor meter { width: 100%; }
.trial-enemies .trial-actor img { width: 88px; height: 100px; flex-basis: 88px; }
.trial-fallen { opacity: .6; }
.trial-room-screen summary { cursor: pointer; padding: 12px 0; min-height: 44px; box-sizing: border-box; }
.trial-log { max-height: 240px; overflow: auto; padding: 8px; border: 1px solid var(--border, #394453); }
.trial-log p { margin: 0 0 8px; font-size: var(--ga-font-note); }
.trial-room-screen pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.trial-metrics { border-collapse: collapse; width: 100%; font-size: var(--ga-font-body); table-layout: fixed; }
.trial-metrics caption { text-align: left; padding: 8px 0; }
.trial-metrics th,.trial-metrics td { border-bottom: 1px solid var(--border, #394453); padding: 8px 4px; text-align: right; }
.trial-metrics th:first-child { text-align: left; width: 44%; }
.trial-checks,.trial-medals { padding-left: 20px; line-height: 1.8; }
.trial-medal { color: var(--text); font-weight: bold; }
.trial-version { font-size: var(--ga-font-note) !important; color: var(--muted); }
.trial-error { border: 1px solid #bf7373; padding: 12px; }
.trial-confirm { width: min(520px,100%); max-height: 85dvh; overflow: auto; padding: 16px; background: var(--surface, #17202a); border: 1px solid var(--border, #394453); border-radius: 4px; box-sizing: border-box; }
.trial-room-screen .arena-kit-dialog { max-width: calc(100vw - 24px); }
.trial-room-screen .arena-kit-members { flex-wrap: wrap; }
.trial-room-screen .arena-kit-members > button { flex: 1 1 120px; }
@media (max-width: 600px) {
  .trial-floor-list { grid-template-columns: 1fr; gap: 8px; }
  .trial-room-screen .trial-floor { padding: 12px; }
  .trial-preparation,.trial-practice,.trial-result,.trial-combat { padding: 8px; }
  .trial-actions > *, .trial-commands > * { flex-basis: 130px; }
  .trial-actors { grid-template-columns: 1fr; }
}

/* The entrance scene and heading share the same responsive URL/cache entry. */
.trial-room-screen { --trial-hall-art: url('/images/trial-room-v1-20261101/hall-960.webp'); }
#app .trial-room-screen .trial-room-heading.page-heading {
  background-color: #101426;
  background-image: linear-gradient(90deg, rgb(12 15 32 / 90%), rgb(12 15 32 / 74%) 55%, rgb(12 15 32 / 34%)), var(--trial-hall-art);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.trial-hall-art { margin: 12px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #101426; }
.trial-hall-art picture, .trial-hall-art img { display: block; width: 100%; }
.trial-hall-art img { height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
@media (max-width: 600px) {
  .trial-room-screen { --trial-hall-art: url('/images/trial-room-v1-20261101/hall-480.webp'); }
}
@supports (background-image: image-set(url('') type('image/avif'))) {
  .trial-room-screen { --trial-hall-art: image-set(url('/images/trial-room-v1-20261101/hall-960.avif') type('image/avif'), url('/images/trial-room-v1-20261101/hall-960.webp') type('image/webp')); }
  @media (max-width: 600px) {
    .trial-room-screen { --trial-hall-art: image-set(url('/images/trial-room-v1-20261101/hall-480.avif') 1x type('image/avif'), url('/images/trial-room-v1-20261101/hall-960.avif') 2x type('image/avif'), url('/images/trial-room-v1-20261101/hall-480.webp') 1x type('image/webp'), url('/images/trial-room-v1-20261101/hall-960.webp') 2x type('image/webp')); }
  }
}

/* Shared tower battle geometry and gradients; only the facility palette changes. */
body.trial-battle-active #app .battle-shell { --battle-deck-gold: 192 158 235; --battle-deck-crystal: 172 151 232; }
body.trial-battle-active #app .battle-header { border-color: #9474cb; }
body.trial-battle-active #app .battle-difficulty-label { color: #dfc3ff; }
body.trial-battle-active #app .command-dock { border-color: #9474cb; }
body.trial-battle-active #app .command-button { border-color: #78609b; }
body.trial-battle-active #app .command-button:not(:disabled):hover { border-color: #c29cec; }