/* Character options (M4-P4). Approved kit materials, same nine-slice recipes as the lobby and phone
   slices: navy panel, gold primary button, navy secondary buttons. arena-controls.css forces navy on
   every button with !important, so the button materials here are !important too. The dialog lives in
   the top layer, outside the screens' scoped --lm-* variables, so the art URLs are written out. */
.characterOptions {
  width: min(430px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box;
  margin: auto;   /* the global * { margin: 0 } reset would otherwise pin the modal to the top-left corner */
  border: 9px solid #d9a441; border-image: url('ui-kit-navy-panel.webp') 72 fill / 28px stretch;
  background: #17418f padding-box; border-radius: 16px; padding: 22px 26px;
  color: #fff7e5; box-shadow: 0 16px 50px #0009;
}
.characterOptions::backdrop { background: #07182daa; }
.characterOptions h2 { margin: 0 0 6px; color: #ffe39b; }
.characterOptions p { line-height: 1.45; margin: 0 0 8px; }
.characterPreview { height: 180px; display: grid; place-items: center; margin: 4px 0 8px; }
.characterPreview img { width: 120px; height: 180px; object-fit: contain; }
.characterOptions label[for] { display: block; margin-bottom: 6px; }
.characterOptions select { width: 100%; min-height: 44px; background: #fff7e5; color: #102e61; border: 2px solid #e3b95a; border-radius: 10px; font-size: 16px; padding: 8px; }
/* Preview caption (live) and the lobby pose Save will store: always visible, plainly worded. */
.characterPreviewCaption { margin: 0 0 10px !important; text-align: center; }
.characterPreviewCaption b, .characterSaveTarget b { color: #ffe39b; }
.characterPosePurpose { display: block; font-size: 14px; color: #dbe5f7; }
/* Shorter screens: a slightly smaller preview keeps Save/Cancel on screen without scrolling at 375x812. */
@media (max-height: 860px) { .characterPreview { height: 150px; } .characterPreview img { width: 100px; height: 150px; } }
.characterSaveTarget { margin: 0 0 4px !important; font-weight: 700; }
.characterOptions fieldset { border: 1px solid #e3b95a; border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px 10px 8px; margin: 4px 0 8px; }
.characterOptions legend { padding: 0 6px; }
.characterOptions fieldset label { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.characterOptions input { accent-color: #e3b95a; width: 20px; height: 20px; flex: 0 0 20px; }
.characterSaveNote { font-size: 13px; }
.characterActions { display: flex; gap: 12px; margin-top: 16px; }
/* Both actions share the row, so neither is ever clipped at narrow widths. */
.characterActions button { flex: 1 1 0; min-width: 0; padding: 10px 12px; }

/* Secondary (navy): the entry buttons and Cancel. Primary (gold): Apply. */
[data-character-options], .characterOptions [data-cancel] {
  min-height: 44px; padding: 10px 20px; font-weight: 800; font-size: 15px; cursor: pointer;
  border: 4px solid #c08a2a !important;
  border-image: url('ui-kit-navy-button.webp') 56 76 fill / 20px 27px stretch !important;
  background: #123c8a padding-box !important; color: #fff7e5 !important;
  border-radius: 999px; box-shadow: 0 3px 0 #6b4712, 0 7px 12px #07182d4d !important;
}
.characterOptions [data-apply] {
  min-height: 44px; font-weight: 800; font-size: 15px; cursor: pointer;
  border: 4px solid #c08a2a !important;
  border-image: url('ui-kit-gold-button.webp') 56 76 fill / 22px 30px stretch !important;
  background: #f8cf4f padding-box !important; color: #172a4f !important;
  border-radius: 999px; box-shadow: 0 4px 0 #8a5a14, 0 9px 16px #07182d4d !important;
}
:is([data-character-options], .characterOptions [data-cancel], .characterOptions [data-apply]):hover { filter: brightness(1.07) saturate(1.05); }
:is([data-character-options], .characterOptions [data-cancel], .characterOptions [data-apply]):active { transform: translateY(2px); }
.characterOptions :focus-visible, [data-character-options]:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.characterOptions select:focus-visible { outline-color: #e3b95a; }
#playerContainer [data-character-options] { display: block; margin: 12px auto; }
.knightWelcome [data-character-options] { margin-top: 12px; }

/* Small contextual knights beside existing headings/icons (guide, choose, oops). */
.contextKnight { display: inline-block; position: relative; width: 40px; height: 60px; vertical-align: middle; pointer-events: none; }
.contextKnight img { width: 40px; height: 60px; object-fit: contain; display: block; }
.contextKnight > span { display: none; }
.contextKnight:has(img[hidden]) > span { display: grid; place-items: center; position: absolute; inset: 0; }
.contextKnight img[hidden] { display: none; }

/* Point helper in the phone's opponent-card elimination prompt (M4-P4): just right of the pulsing
   swords (which reach ~29 px from centre at 110%), gesturing left toward the swords, title and
   options. Absolutely placed inside the 69 px icon row, so it takes no layout space: the title,
   timer and cards stay exactly where they were. Static: no animation of its own. */
.battleChoiceHead { position: relative; }
.battleChoiceHelper { position: absolute; top: 2px; left: calc(50% + 36px); width: 44px; height: 66px; pointer-events: none; }
.battleChoiceHelper img { display: block; width: 44px; height: 66px; object-fit: contain; filter: drop-shadow(0 2px 3px #07182d80); }
.battleChoiceHelper[hidden] { display: none; }
@media (max-width: 299px) { .battleChoiceHelper { display: none; } }