/* Character choice stays beside the game controls, including on phones. */
#chosen-spell { display: block; color: #7e658e; font-size: 10px; margin-top: 3px; }
.roster-abilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 9px; margin-top: 13px; }
.trait-card { border: 1px solid #ded3e5; background: #faf7ee; border-radius: 7px; padding: 12px; }
.trait-card strong { display: block; color: #614779; font-size: 11px; line-height: 1.5; }
.trait-card p { font-size: 11px; line-height: 1.6; color: #7f7088; margin: 6px 0 0; }
.trait-note { color: #8b7a90; font-size: 10px; line-height: 1.6; }
.wizard-choice small { font-size: 10px; margin-top: 6px; color: #735585; text-align: center; }
.trait-progress { padding: 6px 18px; background: #eee7f3; color: #74568d; font: 9px/1.4 'Courier New', monospace; letter-spacing: .7px; border-top: 1px solid #ded3e5; }
.bolt.artifact-echo { background: none; border-radius: 0; box-shadow: none; width: 2.8%; height: 4.5%; filter: drop-shadow(0 0 4px #a4f6ec); }
.bolt.artifact-echo svg { width: 100%; height: 100%; overflow: visible; }
.bolt.spell-gem { filter: drop-shadow(0 0 4px #b9b0ff); }
.player.halo-ward .ward-ring { border-color: #ffde84; background: #ffe6a522; box-shadow: 0 0 24px #ffe39566; }
.game-cabinet:fullscreen, .game-cabinet.expanded { overflow-y: auto; }
.wizard-bar { display: flex; align-items: center; gap: 10px; min-height: 57px; padding: 5px 18px; background: #eee7f3; border-bottom: 1px solid #d7cbdc; }
.chosen-wizard-art { width: 44px; height: 44px; flex: 0 0 44px; }
.chosen-wizard-art svg { width: 100%; height: 100%; }
.wizard-bar > div:nth-child(2) { flex: 1; }
.wizard-bar strong, .wizard-bar > div > span { display: block; }
.wizard-bar > div > span { font: 8px 'Courier New', monospace; letter-spacing: 1px; color: #81708c; margin-bottom: 4px; }
.wizard-bar strong { font-size: 12px; color: #524060; }
.wizard-bar button { border: 1px solid #c9b9d5; border-radius: 5px; padding: 9px 11px; background: #faf6fc; color: #624a78; font-size: 11px; }
.wizard-bar button:hover { background: #e3d5ef; }
.roster-dialog { border: 1px solid #b3a0c1; border-radius: 16px; background: var(--paper); color: var(--ink); width: min(720px, calc(100vw - 32px)); max-height: min(820px, calc(100dvh - 32px)); padding: 25px; box-shadow: 0 18px 90px #201a4166; overflow: auto; }
.roster-dialog::backdrop { background: #211b3abd; backdrop-filter: blur(3px); }
.roster-heading { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
#roster-dialog > .roster-heading { position: sticky; top: -25px; z-index: 2; background: var(--paper); padding: 12px 0; margin-top: -12px; }
.roster-heading .eyebrow { font-size: 9px; color: #8c6a9f; margin: 0 0 9px; }
.roster-heading h2 { font: 30px/1.1 Georgia, serif; letter-spacing: -.5px; margin: 0; }
.roster-close { border: 1px solid #d9cfdf; background: #fffaf1; color: #625169; border-radius: 5px; padding: 10px 12px; white-space: nowrap; font-size: 11px; }
.roster-close span { margin-left: 10px; }
#roster-intro { font-size: 12px; line-height: 1.7; color: #827287; max-width: 490px; margin: 15px 0; }
.roster-current { display: flex; align-items: center; gap: 12px; border: 1px solid #ded3e5; border-radius: 8px; background: #ebe2f0; padding: 9px 14px; }
.roster-current > img { width: 68px; height: 68px; image-rendering: pixelated; flex-shrink: 0; }
.roster-current > div { flex: 1; }
#roster-selected { display: block; font-size: 12px; line-height: 1.6; color: #624573; }
#roster-count { display: block; font: 10px 'Courier New', monospace; color: #8d7795; margin-top: 7px; }
#remove-wizard { border: none; background: none; color: #8a697a; font-size: 10px; text-decoration: underline; padding: 10px 0; }
.roster-tools { display: flex; gap: 12px; margin-top: 19px; }
.roster-tools input[type=search] { flex: 1; width: 0; min-width: 0; background: #fffdfa; border: 1px solid #d7cddd; border-radius: 6px; color: #66526f; padding: 12px; font: 12px Arial, sans-serif; }
#import-wizards { background: #f1d69a; color: #544035; border: 1px solid #d8bf83; border-radius: 6px; padding: 11px 16px; font-size: 12px; font-weight: 700; }
.roster-status { font-size: 11px; line-height: 1.7; color: #7e6b86; min-height: 20px; margin: 12px 0; overflow-wrap: anywhere; }
.roster-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wizard-choice { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; background: #eee8f1; border: 1px solid #ded2e5; border-radius: 8px; padding: 12px 8px 13px; color: #766282; }
.wizard-choice:hover { background: #e3d7ed; border-color: #a589b8; }
.wizard-choice[aria-pressed=true] { background: #e5d5ef; border: 2px solid #9672b3; padding: 11px 7px 12px; }
.wizard-choice img { width: 100%; height: 105px; object-fit: contain; image-rendering: pixelated; }
.wizard-choice strong { font: bold 12px/1.5 'Courier New', monospace; margin-top: 9px; text-align: center; overflow-wrap: anywhere; }
.wizard-choice span { font-size: 10px; margin-top: 5px; }
#roster-empty { padding: 25px 10px; text-align: center; font-size: 12px; color: #8d7498; }
.roster-foot { font-size: 10px; line-height: 1.8; color: #8d7c96; border-top: 1px solid #ded3e5; padding-top: 15px; margin: 20px 0 0; }
.roster-foot a { display: block; color: #745488; }
.wizard-load-form { padding: 15px; background: #ece2f2; border: 1px solid #d3c2df; border-radius: 9px; }
.wizard-load-form > label { display: block; font: bold 10px 'Courier New', monospace; letter-spacing: 1px; color: #715088; margin-bottom: 8px; }
.wizard-load-controls { display: flex; gap: 8px; }
.wizard-load-controls input { min-width: 0; width: 100%; flex: 1; border: 1px solid #cab4d8; border-radius: 6px; padding: 12px; font: 15px 'Courier New', monospace; color: #56366e; background: #fffdf8; }
.wizard-load-controls input[aria-invalid=true] { border-color: #a24c66; }
#load-wizard, #use-loaded-wizard { border: 1px solid #765990; background: #74558e; color: #fff8e8; border-radius: 6px; padding: 12px 16px; font-size: 12px; font-weight: bold; }
#load-wizard { white-space: nowrap; }
#cancel-wizard-load, #dismiss-loaded-wizard { border: 0; background: none; color: #735681; text-decoration: underline; padding: 10px; font-size: 11px; }
.wizard-load-form p { color: #80688d; font-size: 11px; line-height: 1.6; margin: 9px 0 0; }
.loaded-wizard { background: #f7efd9; border: 1px solid #d9c18b; border-radius: 10px; padding: 15px; margin: 15px 0 22px; }
.loaded-wizard-heading { display: flex; align-items: center; gap: 14px; }
.loaded-wizard-heading img { width: 92px; height: 92px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.loaded-wizard-heading h3 { font: 22px/1.3 Georgia, serif; margin: 5px 0; color: #674774; }
.loaded-wizard-heading .eyebrow { font-size: 8px; color: #967347; }
.wizard-traits { font-size: 11px; line-height: 1.7; color: #7e6988; overflow-wrap: anywhere; margin: 10px 0; }
.loaded-wizard-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.roster-section-heading { margin: 20px 0 10px; }
.roster-section-heading h3 { font: 21px Georgia, serif; color: #654c78; margin: 0; }
.roster-section-heading p { font-size: 11px; color: #8b7496; margin: 6px 0 0; }
.featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 23px; }
.featured-grid .wizard-choice { background: #f4ecd6; border-color: #d8c696; }
.featured-grid .wizard-choice[aria-pressed=true] { border-color: #9672b3; background: #e5d5ef; }
.featured-grid .wizard-choice img { height: 94px; }
.game-cabinet:fullscreen .stage, .game-cabinet.expanded .stage { width: min(100%, calc((100dvh - 350px) * 1.6)); }
@media (max-width: 580px) {
  .wizard-bar { padding: 4px 11px; gap: 8px; min-height: 52px; }
  .chosen-wizard-art { width: 37px; height: 40px; flex-basis: 37px; }
  .wizard-bar strong { font-size: 11px; }
  .wizard-bar > div > span { font-size: 7px; }
  .wizard-bar button { font-size: 10px; padding: 9px; }
  .roster-dialog { padding: 19px; border-radius: 12px; }
  #roster-dialog > .roster-heading { top: -19px; }
  .roster-heading h2 { font-size: 25px; max-width: 190px; }
  .roster-heading .eyebrow { font-size: 7px; }
  .roster-close { padding: 9px; font-size: 10px; }
  .roster-close span { margin-left: 4px; }
  .roster-current { gap: 8px; padding: 9px; flex-wrap: wrap; }
  .roster-current > img { width: 55px; height: 55px; }
  #roster-selected { font-size: 10px; }
  #roster-count { font-size: 9px; }
  #remove-wizard { margin-left: auto; }
  .roster-tools { gap: 7px; }
  .roster-tools input[type=search] { font-size: 11px; padding: 10px; }
  #import-wizards { padding: 10px; font-size: 11px; }
  .roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .roster-status { font-size: 10px; }
  .wizard-choice img { height: 100px; }
  .roster-abilities { grid-template-columns: 1fr; gap: 6px; }
  .trait-card { padding: 9px 11px; }
  .trait-card p { margin-top: 3px; }
  #chosen-spell { font-size: 9px; }
  .wizard-load-form, .loaded-wizard { padding: 11px; }
  .wizard-load-controls { flex-wrap: wrap; gap: 6px; }
  .wizard-load-controls input { flex-basis: 75px; width: 75px; font-size: 16px; padding: 10px; }
  #load-wizard { padding: 10px; font-size: 11px; }
  .loaded-wizard-heading { align-items: flex-start; gap: 9px; }
  .loaded-wizard-heading img { width: 65px; height: 65px; }
  .loaded-wizard-heading h3 { font-size: 18px; }
  .featured-grid .wizard-choice img { height: 80px; }
  .game-cabinet:fullscreen .stage, .game-cabinet.expanded .stage { width: min(100%, calc((100dvh - 370px) * 1.22)); }
}