/* The character select of ARC-DEC-070 item 3 on the Huntica theme (./huntica.css), at the geometry of the design's board
   "2 · Seleção de personagem": the logo at 24, 20; the world and the window centred left of the side column's 340 px, the
   window between 130 px from the top and 70 px from the bottom. Below 900 x 620 px the scene scrolls (item 7). */
.hx-select > div { position: relative; flex: 1; min-width: 900px; min-height: 620px; }
.hx-corner { position: absolute; left: 24px; top: 20px; width: 144px; height: 100px; }
.hx-corner img { width: 160px; height: 120px; margin: -20px 0 0 -16px; object-fit: contain; mix-blend-mode: lighten; }
.hx-corner img:not([src]) { visibility: hidden; }
.hx-world { position: absolute; left: 0; right: 340px; top: 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hx-world span { letter-spacing: 6px; text-transform: uppercase; color: var(--hx-muted); }
.hx-world b { font: 600 34px/50px "Grenze Gotisch", Georgia, serif; letter-spacing: 4px; color: #e2bd4f; text-shadow: 2px 2px 0 #000; }
.hx-centre { position: absolute; inset: 130px 340px 70px 0; display: flex; align-items: center; justify-content: center; }
.hx-centre .hx-win { width: 560px; }
.hx-centre .hx-body { padding: 12px 14px; }
.hx-select [data-tone="ok"] { color: #71dc71; }
/* The sunk table: a header row on the title bar's blue, then a row per character, the selected one gold-edged. */
.hx-table { background: #0c1121; border: 1px solid var(--hx-edge); box-shadow: var(--hx-well); }
.hx-table > div, .hx-table li, .hx-table [data-select], .hx-table [data-deleted] { display: grid; align-items: center; }
.hx-table > div { grid-template-columns: 1fr 96px 40px 61px 84px; height: 24px; padding: 0 3px 0 12px; font-weight: bold; color: #f2f2f2; background: #1b2c66; border-bottom: 1px solid #b8902c; }
.hx-table > div > :nth-child(4) { padding-left: 17px; }
.hx-table ul { min-height: 180px; margin: 0; padding: 3px; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.hx-table li { grid-template-columns: 1fr 52px 84px; border-bottom: 1px solid #1f2848; }
.hx-table [data-select], .hx-table [data-deleted] { grid-template-columns: 1fr 96px 40px; gap: 0; min-height: 34px; padding: 0 8px; text-align: left; background: none; box-shadow: none; border-color: transparent; }
.hx-table [data-select]:hover { background: #18203c; }
.hx-table [aria-pressed="true"] { background: #26346a; border-color: #b8902c; }
.hx-table [data-select] > :first-child { font-weight: bold; }
.hx-table > div > :nth-child(3), .hx-table [data-select] > :last-child { text-align: right; }
.hx-table li > span { padding-left: 8px; color: var(--hx-muted); }
.hx-table [data-reserve] { padding: 0 6px; }
.hx-actions { display: flex; align-items: center; gap: 6px; color: var(--hx-muted); }
.hx-centre footer { display: flex; justify-content: space-between; padding: 7px 14px; border-top: 1px solid #0a0e1c; box-shadow: inset 0 1px 0 #3d4a78; }
.hx .hx-prim { min-width: 90px; font-weight: bold; color: #1a1306; background: #c9a23a; box-shadow: inset 1px 1px 0 #f6dc84, inset -1px -1px 0 #6b5418; }
.hx .hx-prim:disabled { color: #2a2210; background: #5e5232; box-shadow: inset 1px 1px 0 #7a6a3e, inset -1px -1px 0 #3a3018; }
.hx-select small { font-size: 10px; line-height: 1.3; color: var(--hx-warn); }
/* The side column pinned 16 px from the top and the right, its title bar holding the page's language selector where the
   design has PT and EN, and the 34 px bar 14 px above the bottom: each control no rule backs is locked with its reason. */
.hx-select .hx-side { position: absolute; right: 16px; top: 16px; bottom: 70px; width: 310px; }
.hx-select .hx-side .hx-tbar { place-items: center start; padding-left: 10px; }
.hx-select .hx-side .hx-body { flex: 1; padding: 12px; }
.hx-select .hx-side .hx-body > div { display: flex; flex-direction: column; gap: 3px; }
.hx-select .hx-side button { min-height: 30px; justify-content: flex-start; font-weight: bold; }
.hx-bar { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: #0c1121; border: 1px solid var(--hx-edge); box-shadow: var(--hx-well); }
.hx-bar button { padding: 0 8px; font-size: 10px; }
.hx-bar small { white-space: nowrap; }
/* Item 7: the bar holds its buttons and its one-line reason down to 1250 px wide, so the scene stops shrinking there. */
.hx-select > div { min-width: 1250px; }
/* The create dialog: a backdrop over the scene and a 440 px window centred in it, its fieldsets the design's groups. */
.hx-actions > span:last-child { margin-left: auto; }
.hx-modal { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); }
.hx-modal .hx-win { width: 440px; }
.hx-modal fieldset { margin: 0; padding: 6px 10px 10px; display: grid; gap: 6px; border: 1px solid #0a0e1c; box-shadow: 1px 1px 0 #3d4a78, inset 1px 1px 0 #3d4a78; }
.hx-modal legend { padding: 0 4px; font: 600 15px "Grenze Gotisch", Georgia, serif; letter-spacing: 0.3px; color: var(--hx-gold); }
.hx-modal fieldset > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.hx-modal fieldset:last-of-type > div { grid-template-columns: repeat(3, 1fr); }
.hx-modal button { min-height: 28px; }
.hx-modal [aria-pressed="true"] { color: var(--hx-gold); background: #10162c; box-shadow: inset 0 0 0 1px #b8902c; }
.hx-modal footer { display: flex; justify-content: flex-end; gap: 6px; padding: 7px 14px; border-top: 1px solid #0a0e1c; }
.hx-modal .hx-body > p { text-align: left; }
.hx-modal small[aria-live]:not([data-tone="bad"]) { color: #cfcfcf; }
.hx-table [data-deleted] { font-style: italic; color: var(--hx-muted); }
.hx-modal:last-child .hx-win { width: 420px; }
.hx-actions > * { flex: none; white-space: nowrap; }
.hx-actions > small { flex: 1; white-space: normal; }