/* Key labels on the board and the keybinding editor. Badges exist only while
   body.keys-visible is set; the host gets .has-keybadge so it can anchor them. */
.has-keybadge { position: relative; }
.keybadge {
  position: absolute; top: 3px; left: 3px; z-index: 5;
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e4c589; border-radius: 6px;
  background: #0f1c26; color: #ffe9b8;
  font: 700 12px/1 var(--ui, system-ui, sans-serif); letter-spacing: .02em;
  box-shadow: 0 2px 8px #000a, inset 0 0 0 1px #e4c58933;
  cursor: pointer; pointer-events: auto; user-select: none;
}
.keybadge:hover { background: #1c3444; border-color: #ffe3a1; }
.keybadge--unbound { opacity: .55; font-weight: 500; }
body:not(.keys-visible) .keybadge { display: none; }

/* Keep badges inside their controls: the board, hand, and top bar clip anything
   placed above an edge, especially in the narrow layout. */
.field > .keybadge { top: 6px; left: 6px; }
.slot__card > .keybadge { top: 3px; right: 3px; left: auto; }
#bigaction > .keybadge { top: 3px; right: 3px; left: auto; }
#open-voice-menu > .keybadge, #open-room-chat > .keybadge { top: 3px; right: 3px; left: auto; }
#toggle-keys > .keybadge { top: 50%; right: 3px; left: auto; transform: translateY(-50%); }
.hand > .card > .keybadge { top: 3px; right: 3px; left: auto; }

#toggle-keys { min-height: 32px; padding: 4px 38px 4px 10px; font: 600 12px var(--ui, sans-serif); }
#toggle-keys[aria-pressed="true"] { outline: 1px solid #e4c589; }

/* Capture dialog */
#keybind-capture { min-width: min(92vw, 380px); padding: 18px 20px; border: 1px solid #bb995a; border-radius: 10px; background: #0d1a24; color: #f2dfb5; font: 14px var(--ui, sans-serif); }
#keybind-capture::backdrop { background: #050c12aa; }
#keybind-capture h2 { margin: 0 0 8px; font-size: 18px; }
#keybind-capture p { margin: 6px 0; line-height: 1.45; }
#keybind-conflict { color: #ffc98a; }
.keybind-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.keybind-actions button { padding: 8px 14px; border: 1px solid #8fb4c6; border-radius: 6px; background: #183b4c; color: #fff; font: inherit; cursor: pointer; }

/* Menu section */
.keybind-menu h3 { margin: 12px 0 4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #cdb887; }
.keybind-intro, .keybind-show { margin: 0 0 8px; font-size: 13px; }
.keybind-list { display: grid; gap: 4px; }
.keybind-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid #ffffff12; font-size: 13px; }
.keybind-key { min-width: 64px; padding: 5px 10px; border: 1px solid #e4c589; border-radius: 6px; background: #0f1c26; color: #ffe9b8; font: 700 12px var(--ui, sans-serif); cursor: pointer; }
.keybind-key:hover { background: #1c3444; }
.keybind-key--unbound { opacity: .55; font-weight: 500; }
.keybind-reset { margin-top: 12px; padding: 7px 12px; border: 1px solid #8fb4c6; border-radius: 6px; background: #183b4c; color: #fff; font: inherit; cursor: pointer; }

/* The generic menu section lays children out on a grid; this one is a plain list. */
.menu-section.keybind-menu { display: block; }
.keybind-menu > * { width: auto; max-width: none; }
.keybind-menu .keybind-show { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.keybind-menu .keybind-show input { width: auto; margin: 0; }

/* Keep shortcuts clear of ornamental frames and control labels. */
#fields > .field > .keybadge { top:14px; left:14px; z-index:12; min-width:26px; height:26px; }
body.keys-visible #chain-approve { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
#chain-approve > .keybadge { position:static; flex:0 0 auto; min-width:32px; height:20px; padding:0 4px; font-size:10px; box-shadow:none; }
#devbar #toggle-keys {
 display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:6px 10px;
 border:1px solid #8c7449; border-radius:7px;
 background:linear-gradient(#1d303c,#0c1923); color:#f1d59a;
 font:600 12px/1.2 var(--ui,sans-serif); cursor:pointer;
}
#devbar #toggle-keys > .keybadge { position:static; transform:none; height:22px; }
#devbar #toggle-keys[aria-pressed=true] { outline:none; border-color:#e4c589; background:linear-gradient(#3c3827,#1e282a); }
#devbar #toggle-keys:hover { border-color:#ffe3a1; }
#devbar #toggle-keys:focus-visible { outline:2px solid #ffe3a1; outline-offset:2px; }

/* Leave cost and Might corners visible on hand cards. */
.hand > .card > .keybadge { left:50%; right:auto; top:5px; transform:translateX(-50%); }

#base-you>.keybadge{top:12px;left:14px;z-index:12}
#keyboard-settings{width:min(620px,calc(100vw - 28px));max-height:85dvh;box-sizing:border-box;overflow:auto;padding:24px;border:1px solid #c8a666;border-radius:12px;background:#0c202b;color:#f3e3bd}
#keyboard-settings::backdrop{background:#02070dbb;backdrop-filter:blur(4px)}
#keyboard-settings header{display:flex;align-items:center;justify-content:space-between;gap:16px}
#keyboard-settings h2{font:26px Georgia,serif;margin:0 0 16px}
#keyboard-settings header button{padding:8px 14px;background:#223c48;border:1px solid #ac925c;border-radius:5px}
#exit-match-confirm{width:min(440px,calc(100vw - 32px));padding:28px;border:1px solid #c4a568;border-radius:12px;background:linear-gradient(145deg,#102b39,#06141e);color:#eee8d9;box-shadow:0 20px 80px #000a}
#exit-match-confirm::backdrop{background:#020810b8;backdrop-filter:blur(4px)}
#exit-match-confirm h2{font:600 26px Georgia,serif;color:#efcf8d;margin:0 0 12px}
#exit-match-confirm p{line-height:1.6;color:#c2d1db}
#exit-match-confirm .exit-actions{display:flex;gap:12px;margin-top:22px}
#exit-match-confirm button{flex:1;padding:12px;border:1px solid #9f874f;border-radius:6px;background:#102735;color:#f4e6c6;cursor:pointer}
#exit-match-confirm .exit-confirm{background:linear-gradient(#efd48e,#c69e50);color:#19212a;font-weight:700}
#exit-match-confirm button:focus-visible{outline:2px solid #83e5ff;outline-offset:3px}

/* Keyboard targeting stays visible over card art. */
.unit[data-oid]:focus-visible, .rune[data-oid]:focus-visible, #hand > .card:focus-visible, #fields > .field:focus-visible, #base-you:focus-visible, #base-opp:focus-visible { outline: 3px solid #ffe18a; outline-offset: 3px; }