/* The class equipment screen follows the metal, type and heraldry of the board. */
[data-class="field"]    { --class-accent:#e0bd72; --class-ink:#2b2617; --class-line:#766849; }
[data-class="vanguard"] { --class-accent:#ffb180; --class-ink:#32231d; --class-line:#865b48; }
[data-class="sentinel"] { --class-accent:#a0d5df; --class-ink:#162b33; --class-line:#507580; }
dialog.deck-setup {
  width:min(825px,calc(100% - 32px)); max-height:min(93dvh,930px); border:1px solid var(--class-line);
  background:#141a16; border-radius:9px; color:#f1f1e6; box-shadow:0 28px 110px #000b;
}
.deck-setup .dialog-content { max-height:min(93dvh,930px); }
.deck-setup .dialog-header { min-height:49px; padding:10px 22px; border-bottom:1px solid #41483b; background:#1c231e; }
.deck-setup .dialog-header h2 { display:flex; align-items:center; gap:11px; font-size:23px; }
.deck-setup .dialog-header h2::before { content:""; width:12px; height:12px; border:1.5px solid var(--class-accent); transform:rotate(45deg); box-shadow:inset 0 0 0 3px #1c231e, inset 0 0 0 6px var(--class-accent); }
.deck-setup .dialog-close { min-width:38px; min-height:36px; }
.deck-setup .dialog-body { display:block; min-height:0; padding:18px 22px; overscroll-behavior:contain; scrollbar-color:#70775f #20271e; }
.deck-setup .doctrine-group>legend { color:#f5f3e8; margin:0 0 12px; font:700 clamp(27px,3vw,36px)/1 'Field Condensed',sans-serif; }
.class-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.class-choice { display:block; position:relative; isolation:isolate; cursor:pointer; color:#fff; height:clamp(115px,14.8vh,161px); overflow:hidden; border:1px solid #576053; border-radius:5px; background:#222a24; }
.class-choice>img { position:absolute; width:100%; height:100%; inset:0; z-index:-3; object-fit:cover; object-position:70% 36%; transition:transform 220ms ease,filter 220ms ease; filter:saturate(.9); }
.class-choice::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(0deg,#080e0df0 0%,#080e0d86 28%,#080e0d00 71%),linear-gradient(90deg,#07101744,transparent 60%); }
.class-choice::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:transparent; }
.class-choice input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; margin:0; }
.class-choice:has(input:checked) { border-color:var(--class-accent); box-shadow:0 0 0 1px var(--class-accent); }
.class-choice:has(input:checked)::after { background:var(--class-accent); }
.class-choice:has(input:focus-visible) { outline:2px solid white; outline-offset:3px; }
.class-choice:hover>img { transform:scale(1.04); filter:saturate(1.08); }
.class-selector-mark { pointer-events:none; position:absolute; top:9px; right:9px; width:17px; height:17px; background:#101b19a8; border:1px solid #d3d9caaa; border-radius:50%; }
.class-choice:has(input:checked) .class-selector-mark { background:var(--class-accent); border-color:var(--class-accent); }
.class-choice:has(input:checked) .class-selector-mark::after { content:""; position:absolute; left:4px; top:4px; height:4px; width:7px; border:solid var(--class-ink); border-width:0 0 2px 2px; transform:rotate(-45deg); }
.class-choice-type { pointer-events:none; position:absolute; bottom:12px; left:12px; right:9px; display:grid; grid-template-columns:31px minmax(0,1fr); column-gap:7px; align-items:end; }
.class-choice-type .class-insignia { align-self:center; grid-row:span 2; width:31px; color:var(--class-accent); filter:drop-shadow(0 1px 2px #070907); }
.class-choice-type strong { font:700 clamp(20px,2.4vw,28px)/.97 'Field Condensed',sans-serif; letter-spacing:.1px; }
.class-choice-type>span { margin-top:3px; font:500 11px/1.15 var(--sans); color:#e0e7dc; }
.class-dossier { margin-top:13px; border:1px solid var(--class-line); border-radius:5px; overflow:hidden; }
.class-focus { position:relative; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:16px; padding:15px 17px; border-bottom:1px solid #465047; background:linear-gradient(112deg,var(--class-ink),#1a221e 67%); }
.focus-copy small, .equipped-class small { display:block; color:var(--class-accent); font:600 10.5px/1.2 var(--mono); text-transform:uppercase; letter-spacing:.085em; }
.focus-copy h3 { margin:5px 0 3px; font:700 29px/.99 'Field Condensed',sans-serif; }
.focus-copy p { margin:0; font:13px/1.43 var(--sans); color:#e0e4d7; max-width:46ch; }
.class-pieces { min-width:0; text-align:center; padding:3px 4px 5px; border:1px solid #ffffff17; border-radius:4px; background:linear-gradient(160deg,#9a9b832e,#69726828); }
.class-pieces>div { display:flex; justify-content:center; filter:drop-shadow(0 3px 2px #0c100caa); }
.class-pieces .chess-piece { display:block; width:16%; max-width:54px; height:auto; }
.class-pieces>span { display:block; color:#e2e4da; font:11px/1.25 var(--sans); }
.deck-cards { padding:11px 15px; background:#1b231d; }
.deck-heading h3 { margin:0; color:#ecefe1; font:650 17px/1.1 'Field Condensed',sans-serif; }
.deck-heading small { font-size:11.5px; color:#c3cabc; }
.deck-cards .brief-deck { gap:7px; }
.deck-cards .brief-card { display:flex; align-items:center; gap:7px; padding:0 4px 0 0; min-height:44px; border:1px solid #505949; background:#283127; }
.deck-cards .brief-card:hover,.deck-cards .brief-card:focus-visible { border-color:var(--class-accent); }
.deck-cards .brief-card img { width:36%; max-width:63px; align-self:stretch; height:auto; min-height:42px; aspect-ratio:1.3; object-fit:cover; }
.deck-cards .brief-card span { padding:0; font:650 16px/1.03 'Field Condensed',sans-serif; }
.opening-hand { color:#c3cbbd; font:12px/1.5 var(--sans); margin:8px 0 0; }
.opening-hand b { margin-right:5px; color:#e5e8dc; }
.setup-king-rule { display:flex; align-items:center; gap:10px; margin:12px 0; padding:8px 12px; background:#242a22; border:1px solid #414b3e; border-radius:4px; }
.setup-king-rule .icon { width:20px; height:20px; color:#d3c59e; flex:none; }
.setup-king-rule p { margin:0; font:12.5px/1.45 var(--sans); color:#d7dece; }
.setup-king-rule b { color:#f4ecd5; }
.setup-king-rule button,.manual-drill { margin-left:auto; flex:none; color:var(--class-accent,#e6ce96); font:600 12px var(--sans); min-height:40px; text-decoration:underline; text-underline-offset:3px; }
.manual-drill { display:block; margin:4px 0 0; }
.setup-options { border:1px solid #465044; border-radius:4px; background:#1d251f; }
.setup-options summary { min-height:43px; display:flex; align-items:center; gap:8px; cursor:pointer; padding:7px 13px; }
.setup-options summary::-webkit-details-marker { display:none; }
.setup-options summary strong { font:650 17px/1 'Field Condensed',sans-serif; }
.setup-options summary span { color:#c6d0bf; margin-left:auto; font:12px/1.3 var(--sans); }
.setup-options summary::after { content:""; width:7px; height:7px; margin:-3px 2px 0 4px; transform:rotate(-45deg); border:solid #cbd4c2; border-width:0 0 1.5px 1.5px; }
.setup-options[open] summary::after { transform:rotate(135deg); margin-top:3px; }
.setup-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:14px; border-top:1px solid #465044; }
.setup-fields .option { display:grid; place-content:center; min-height:42px; }
.opposing-control label { display:block; margin:0 0 7px; color:#c4cebb; font:600 11px/1.3 var(--mono); }
.opposing-control select { width:100%; padding:8px 10px; min-height:42px; color:#e6e9dc; color-scheme:dark; background:#293328; border:1px solid #59644f; border-radius:3px; }
.deck-setup .dialog-footer { min-height:64px; padding:9px 22px; background:linear-gradient(110deg,var(--class-ink),#1e261f); border-color:var(--class-line); }
.equipped-class { margin-right:auto; display:flex; gap:7px; align-items:center; min-width:0; }
.equipped-class .class-insignia { display:block; width:30px; color:var(--class-accent); }
.equipped-class small { font-size:9px; }
.equipped-class b { display:block; margin-top:2px; font:650 20px/1 'Field Condensed',sans-serif; }
.deck-setup .dialog-footer .primary-button { color:#171b17; background:var(--class-accent); border-color:var(--class-accent); min-height:43px; padding-inline:18px; }
.deck-setup .dialog-footer .secondary-button { min-height:43px; }
.deck-setup .dialog-body>.dialog-note { padding-top:10px; color:#f0c88b; }
@media(max-width:620px) {
  dialog.deck-setup { width:calc(100% - 12px); max-height:96dvh; }
  .deck-setup .dialog-content { max-height:96dvh; }
  .deck-setup .dialog-header { min-height:43px; padding:7px 12px; }
  .deck-setup .dialog-body { padding:12px; }
  .deck-setup .doctrine-group>legend { font-size:27px; margin-bottom:9px; }
  .class-grid { gap:6px; }
  .class-choice { height:clamp(103px,25.5vw,137px); }
  .class-choice::before { background:linear-gradient(0deg,#050b0afc,#080f0bb0 32%,transparent 74%); }
  .class-choice-type { left:8px; right:4px; bottom:9px; display:block; }
  .class-choice-type strong,.class-choice-type>span { display:block; }
  .class-choice-type strong { font-size:clamp(20px,5.2vw,25px); }
  .class-choice-type>span { font-size:10.5px; }
  .class-choice-type .class-insignia { position:absolute; bottom:calc(100% + 6px); width:22px; }
  .class-choice .class-selector-mark { right:5px; top:5px; }
  .class-focus { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; padding:10px; }
  .focus-copy small { font-size:9px; }
  .focus-copy h3 { font-size:24px; }
  .focus-copy p { font-size:12px; line-height:1.38; }
  .class-pieces { padding:6px 3px; }
  .class-pieces>span { font-size:10.5px; }
  .deck-cards { padding:9px 10px; }
  .deck-cards .brief-deck { grid-template-columns:1fr 1fr; gap:5px; }
  .deck-cards .brief-card { min-height:44px; }
  .deck-cards .brief-card img { width:38px; min-height:42px; }
  .opening-hand { font-size:11.5px; }
  .setup-king-rule { padding:5px 8px; gap:8px; margin:9px 0; }
  .setup-king-rule p { font-size:12px; }
  .setup-options summary { padding:7px 9px; }
  .deck-setup .dialog-footer { padding:8px 12px max(8px,env(safe-area-inset-bottom)); min-height:58px; gap:7px; }
  .equipped-class .class-insignia { width:24px; }
  .setup-fields { gap:11px; padding:10px; }
}
@media(max-width:380px) {
  .deck-setup .dialog-body { padding:10px; }
  .setup-fields { grid-template-columns:1fr; }
  .equipped-class small { font-size:8px; }
  .equipped-class b { font-size:17px; }
  .deck-setup .dialog-footer .primary-button,.deck-setup .dialog-footer .secondary-button { padding-inline:9px; }
}
.setup-king-rule button { display:inline-flex; align-items:center; gap:4px; }
.setup-king-rule button .icon { width:13px; height:13px; color:currentColor; }
@media(max-width:480px) {
  .class-focus { display:block; }
  .class-pieces { display:flex; align-items:center; padding:3px 7px; gap:6px; margin-top:8px; }
  .class-pieces>div { flex:1; min-width:0; }
  .class-pieces .chess-piece { width:16.6%; }
  .class-pieces>span { width:32%; line-height:1.35; text-wrap:balance; }
  #war-room:has(#hand-panel:not([hidden])) .board-panel .section-header { gap:6px; }
  #war-room:has(#hand-panel:not([hidden])) .board-panel h2,#hand-panel .section-header h2 { white-space:nowrap; font-size:18px; }
  #war-room #hand-jump:not([hidden]) { width:auto; white-space:nowrap; }
  #hand-panel .hand-guide { white-space:nowrap; padding-inline:4px; }
  #war-room #board-turn { text-wrap:balance; text-align:center; }
}
@media(max-width:350px) {
  #war-room:has(#hand-panel:not([hidden])) .board-panel h2 .icon,#hand-panel .section-header h2 .icon { display:none; }
}