/* =====================================================================
   GM CONSOLE POLISH // rev 1
   Layered on top of asoc.css / gm-controls.css. Fixes only what the
   screenshots showed: the arcade grid clipping its own cards, chat bubbles
   reserving space for a hidden button, a stray emoji on RAID SETUP,
   and a rail whose labels used four different type treatments.
   ===================================================================== */

/* 1. MINI GAMES arcade ------------------------------------------------
   The panel sits beside the 230px rail, so it is ~1140px wide on a 1440px
   screen, not 1440. Columns now follow the panel width, rows start at the top
   and scroll instead of overflowing upward over the tabs. */
html body #gm-panel .gm-minigames-menu {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-content: start;
  align-items: start;
  grid-auto-rows: min-content;
  gap: 16px;
  padding: 22px clamp(18px, 3vw, 44px) 30px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #5b3a73 transparent;
}
html body #gm-panel .gm-minigames-menu > div { padding-bottom: 16px; }
html body #gm-panel .gm-minigames-menu > div b { font-size: 18px; letter-spacing: .22em; }
html body #gm-panel .gm-minigames-menu > div small { font-size: 11px; }
html body #gm-panel .gm-minigames-menu > button {
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  align-self: stretch;
  height: auto;
  min-height: 128px;
  padding: 18px 18px;
  border-radius: 12px;
}
html body #gm-panel .gm-minigames-menu > button > :is(img, .gm-minigame-art) { width: 72px; height: 72px; }
html body #gm-panel .gm-minigames-menu > button .oly-mini-art {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  letter-spacing: 0;
  white-space: nowrap;
}
html body #gm-panel .gm-minigames-menu > button .minigame-title { font-size: 22px; line-height: 1.08; }
html body #gm-panel .gm-minigames-menu > button .minigame-desc { margin-top: 6px; font-size: 14px; line-height: 1.36; }
html body #gm-panel .gm-minigames-menu > button .minigame-status { margin-top: 10px; padding: 4px 11px; font-size: 12px; }

/* 2. CHAT bubbles --------------------------------------------------------
   Every one-line bubble was locked to 68px so it lines up with the stacked
   X / heart controls, but those only exist on messages awaiting a verdict.
   A plain message (empty quick-actions slot) now sizes to its text. The
   invisible add-reaction button also held a 22px row open under each bubble;
   it leaves the flow and fades in beside the bubble on hover as before. */
html body #gm-panel .gm-chat-bubble-cluster:has(> .gm-chat-quick-actions:empty) .gm-chat-message-main { min-height: 0 !important; }
html body #gm-panel .gm-chat-message-main { position: relative; }
html body #gm-panel .gm-chat-reactions:not(.has-reactions) {
  min-height: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}
html body #gm-panel .gm-chat-reactions:not(.has-reactions) .gm-chat-reaction-add {
  position: absolute;
  right: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  min-height: 0;
}

/* 3. RAID SETUP keeps one icon -------------------------------------------
   dragon-raid.css still prepends a dragon emoji next to the drawn claw icon.
   The live-state dot is left alone. */
html body #dragon-raid-setup-btn:not(.is-live)::before { content: none; display: none; }

/* 4. RAIL labels: one type treatment ---------------------------------------
   Four fonts, weights from 400 to 900 and sizes from 10 to 14px across a
   column of equal buttons. Same family, weight and tracking everywhere; the
   two stacked buttons keep their second line. */
html body #battle-controls-panel :is(
  #nema-asoc-btn .nema-label, #bice-asoc-btn .bice-label, #quests-btn > span,
  #broker-transmog-btn > span, #library-btn-footer > span:last-child,
  #dragon-raid-setup-btn > span, #reset-board-btn > span,
  #sound-toggle-btn .sound-toggle-label, #master-access-btn > span,
  #load-shell-btn > span, #poison-gm-button > b
) {
  font: 900 12px/1.1 var(--font-machine);
  letter-spacing: .2em;
}
html body #battle-controls-panel #black-market-gm-button > span:first-child { font: 900 11px/1.1 var(--font-machine); letter-spacing: .2em; }
html body #battle-controls-panel :is(#black-market-gm-button, #poison-gm-button) small { font-size: 8px; letter-spacing: .16em; }

/* 5. Header text that was 8-9px --------------------------------------------- */
html body #gm-panel :is(.gm-chat-tab, .gm-minigames-toggle) { font-size: 10.5px; }
html body #gm-panel #gm-chat-presence .gm-presence-label { font-size: 10px; }
html body #gm-panel .gm-latest-readout-label { font-size: 9.5px; }

/* 6. MASTER ACCESS menu / BACKDOOR log ---------------------------------------
   The menu let the button text behind it ghost through and used 8px text.
   Diagnostics timestamps ("09:10:36 PM") wrapped onto two lines. */
html body #master-access-menu {
  background: linear-gradient(180deg, #171222, #09080d);
}
html body #master-access-menu .master-access-status small { font-size: .62rem; }
html body #master-access-menu .master-access-status strong { font-size: .74rem; }
html body .gm-runtime-diagnostics-events div { grid-template-columns: 96px 80px minmax(0, 1fr); }
html body .gm-runtime-diagnostics-events time { white-space: nowrap; }

/* 7. CHAOS button, under POISON ----------------------------------------------
   Same anatomy as the other rail buttons: drawn icon, label, one-line caption.
   chaos.css styled it as a standalone block with its own font, so it gets
   re-skinned here instead of editing that file. */
html body #battle-controls-panel #chaos-gm-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: var(--rail-btn, 46px) !important;
  height: var(--rail-btn, 46px) !important;
  padding: 4px 10px !important;
  border: 1px solid #8b45c4 !important;
  border-radius: 7px !important;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 18% 110%, rgba(166, 75, 255, .24), transparent 42%),
    linear-gradient(110deg, #12071d, #2a0f42 52%, #10061a) !important;
  color: #f1dcff !important;
  box-shadow: inset 0 0 0 2px rgba(8, 3, 12, .72), inset 0 0 22px rgba(166, 75, 255, .12), 0 0 12px rgba(150, 70, 220, .12) !important;
}
html body #battle-controls-panel #chaos-gm-button .chaos-action-icon {
  color: #d58cff;
  filter: drop-shadow(0 0 6px rgba(190, 90, 255, .55));
}
html body #battle-controls-panel #chaos-gm-button .gm-action-copy {
  display: grid;
  gap: 3px;
  padding: 0;
  font: inherit;
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
}
html body #battle-controls-panel #chaos-gm-button .gm-action-copy b {
  font: 900 12px/1.1 var(--font-machine);
  letter-spacing: .2em;
  text-shadow: 0 0 8px rgba(200, 110, 255, .8);
}
html body #battle-controls-panel #chaos-gm-button .gm-action-copy small {
  font: 800 8px/1 var(--font-machine);
  letter-spacing: .16em;
  color: #a68bc0;
}
html body #battle-controls-panel #chaos-gm-button:hover .chaos-action-icon { transform: scale(1.08) rotate(8deg); }

/* Final command-art layer. This file loads after the rail component sheets,
   so keep the two dynamically restyled controls pinned to their portraits. */
html body #battle-controls-panel #poison-gm-button {
  background-image:
    linear-gradient(90deg, rgba(2, 12, 4, .24), rgba(4, 19, 7, .76) 38%, rgba(4, 19, 7, .76) 62%, rgba(2, 12, 4, .24)),
    url('../assets/ui/gm-pill-poison.png') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body #battle-controls-panel #chaos-gm-button {
  background-image:
    linear-gradient(90deg, rgba(8, 2, 15, .24), rgba(16, 6, 25, .78) 38%, rgba(16, 6, 25, .78) 62%, rgba(8, 2, 15, .24)),
    url('../assets/ui/gm-pill-chaos.png') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* SYSTEM PORTRAITS // original art under the existing compact controls. */
html body #battle-controls-panel :is(#load-shell-btn,#reset-board-btn,#sound-toggle-btn,#master-access-btn) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
html body #battle-controls-panel :is(#load-shell-btn,#reset-board-btn,#sound-toggle-btn,#master-access-btn) > * {
  position: relative;
  z-index: 2;
}
html body #battle-controls-panel #load-shell-btn {
  background-image:
    linear-gradient(90deg, rgba(1, 10, 15, .28), rgba(5, 16, 22, .8) 38%, rgba(5, 16, 22, .8) 62%, rgba(1, 10, 15, .28)),
    url('../assets/ui/gm-pill-load-shell.png') !important;
  text-shadow: 0 1px 2px #000, 0 0 9px rgba(90, 220, 255, .52) !important;
}
html body #battle-controls-panel #reset-board-btn {
  background-image:
    linear-gradient(90deg, rgba(16, 2, 4, .25), rgba(25, 6, 9, .78) 38%, rgba(25, 6, 9, .78) 62%, rgba(16, 2, 4, .25)),
    url('../assets/ui/gm-pill-reset-board.png') !important;
  text-shadow: 0 1px 2px #000, 0 0 9px rgba(255, 91, 104, .54) !important;
}
html body #battle-controls-panel #sound-toggle-btn {
  background-image:
    linear-gradient(90deg, rgba(2, 8, 14, .25), rgba(5, 13, 22, .79) 38%, rgba(5, 13, 22, .79) 62%, rgba(2, 8, 14, .25)),
    url('../assets/ui/gm-pill-sounds.png') !important;
  text-shadow: 0 1px 2px #000, 0 0 9px rgba(94, 206, 255, .52) !important;
}
html body #battle-controls-panel #master-access-btn {
  background-image:
    linear-gradient(90deg, rgba(9, 2, 14, .25), rgba(16, 5, 24, .79) 38%, rgba(16, 5, 24, .79) 62%, rgba(9, 2, 14, .25)),
    url('../assets/ui/gm-pill-master-access.png') !important;
  text-shadow: 0 1px 2px #000, 0 0 9px rgba(206, 112, 255, .54) !important;
}

/* Command rail reading order: mission to identity, raid, toxins, wager,
   then the maintenance entrance. Geometry remains owned by the rail layout. */
html body #battle-controls-panel #quests-btn { order: 7 !important; }
html body #battle-controls-panel #broker-transmog-btn { order: 8 !important; }
html body #battle-controls-panel #dragon-raid-setup-btn { order: 9 !important; }
html body #battle-controls-panel #poison-gm-button { order: 10 !important; }
html body #battle-controls-panel #chaos-gm-button { order: 11 !important; }
html body #battle-controls-panel #library-btn-footer { order: 12 !important; }
html body #battle-controls-panel #reset-board-btn { order: 13 !important; }
html body #battle-controls-panel #sound-toggle-btn { order: 14 !important; }
html body #battle-controls-panel .master-access-wrap { order: 15 !important; }

/* 8. RAIL height budget (AMUSE) -----------------------------------------------
   The command stack and the bottom-pinned dock were both fixed at 46px
   buttons, so on a ~810px tall window they met exactly with no room for
   CHAOS, and on 768px they already overlapped (RESET BOARD sat on top of
   POISON). Button height now follows the window height instead. */
@media (min-width: 761px) {
  html body.room-mode-casual #battle-controls-panel {
    --rail-btn: clamp(33px, calc(41px + (100vh - 810px) / 10), 46px);
  }
  html body.room-mode-casual #battle-controls-panel > .battle-controls-utility-row {
    gap: 6px !important;
    padding-top: 10px !important;
  }
  html body.room-mode-casual #battle-controls-panel > .battle-controls-utility-row > :is(button, .master-access-wrap),
  html body.room-mode-casual #battle-controls-panel > .gm-system-dock > :is(button, .master-access-wrap),
  html body.room-mode-casual #battle-controls-panel > .gm-system-dock .master-access-btn {
    min-height: var(--rail-btn) !important;
    height: var(--rail-btn) !important;
  }
  html body.room-mode-casual #battle-controls-panel > .gm-system-dock { gap: 6px; padding-top: 10px; }
}
@media (min-width: 761px) and (max-height: 790px) {
  html body.room-mode-casual #battle-controls-panel { --rail-btn: clamp(35px, calc(42px + (100vh - 768px) / 8), 41px); }
  html body.room-mode-casual #battle-controls-panel > .battle-controls-grid > :is(#nema-asoc-btn, #bice-asoc-btn, #black-market-gm-button) {
    min-height: 44px !important;
    height: 44px !important;
  }
  html body #battle-controls-panel #master-access-btn > span { letter-spacing: .12em; white-space: nowrap; }
}


/* 9. LOAD SHELL / board creator ------------------------------------------------
   The creator shell was header (61) + template bar (106) + a grid sized to
   100vh-110, so on any window shorter than ~850px the bottom of the form fell
   off-screen. It is now a flex column that fits the window exactly, the form
   and the preview scroll on their own, and the template bar is one slim row. */
html body #forge-overlay.active { padding: 12px 16px !important; align-items: stretch !important; }
html body #forge-overlay.active .forge-shell:has(.creator-grid) {
  display: flex; flex-direction: column;
  height: calc(100vh - 24px); height: calc(100dvh - 24px);
  max-height: none;
}
html body #forge-overlay .forge-shell:has(.creator-grid) > * { flex: 0 0 auto; }
html body #forge-overlay .forge-shell:has(.creator-grid) > .creator-grid {
  flex: 1 1 auto; min-height: 0 !important;
  grid-template-rows: minmax(0, 1fr);
}
html body #forge-overlay .creator-form { max-height: none !important; min-height: 0; }
html body #forge-overlay .creator-preview { min-height: 0; }

html body #forge-overlay .creator-command-strip {
  margin: 8px 20px 8px; padding: 6px 10px; gap: 8px 14px; flex-wrap: nowrap;
}
html body #forge-overlay .creator-template-tools { flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
html body #forge-overlay .creator-template-tools .forge-select { flex: 0 1 300px; min-width: 160px; min-height: 34px; }
html body #forge-overlay .creator-template-tools .forge-btn { white-space: nowrap; }
html body #forge-overlay .creator-shortcuts { flex: 0 0 auto; font-size: .66rem; color: #7d8b93; white-space: nowrap; }

/* readable micro text */
html body #forge-overlay .creator-form .cell-field-label { font-size: .64rem; letter-spacing: .06em; }
html body #forge-overlay .creator-col-header { font-size: .68rem; }
html body #forge-overlay .maker-clue-column header small,
html body #forge-overlay .creator-maker-kicker { font-size: .64rem; }
html body #forge-overlay .creator-maker button:disabled,
html body #forge-overlay .maker-clue-column button:disabled { opacity: .6; color: #7f6c8a; border-color: #3a3042; }

/* the four-across clue grid truncated clues at ~126px per field: 2 x 2 until the
   window is wide enough to give each column real room */
@media (max-width: 1699px) {
  html body #forge-overlay .creator-cols:not(.single-column) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* readiness check: two compact columns instead of one long red strip */
html body #forge-overlay .creator-quality-report {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 8px; max-height: 280px; overflow-y: auto;
}
html body #forge-overlay .creator-quality-report > b { grid-column: 1 / -1; }
html body #forge-overlay .creator-quality-report span { padding: 4px 7px; }

/* 10. POISON TARGET picker -----------------------------------------------------
   poison.js injects a plain rounded-rectangle skin (Arial, 1px border). This
   re-skins it as the same chamfered armory plate used by the creator: diagonal
   corners with real edge lines, hazard stripe, recessed search, slab rows with a
   status bar, chamfered check boxes and cast button. Selectors carry an
   html/body prefix so they win over the injected <style>. */
html body #poison-target-picker {
  --cut: 14px; --tox: #8dff6a; --tox-d: #4fbf2b; --edge: rgba(120, 230, 84, .6);
  width: min(440px, 92vw);
  max-height: min(640px, calc(100vh - 24px));
  border: 1px solid #48632b; border-radius: 14px;
  font-family: var(--font-machine);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 4px),
    radial-gradient(120% 55% at 0 0, rgba(77, 255, 46, .11), transparent 62%),
    linear-gradient(165deg, #050805, #0c140a);
  clip-path: none;
  box-shadow: 0 18px 50px #000b, inset 0 1px #a2d86822;
}
html body #poison-target-picker::before {
  content: ''; position: absolute; z-index: 2; top: 0; left: var(--cut); right: 0; height: 5px; pointer-events: none;
  background: repeating-linear-gradient(135deg, #d8b52a 0 7px, #0b0f08 7px 14px); opacity: .9;
}
html body #poison-target-picker::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 46px rgba(77, 255, 46, .05);
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 100% 100% / var(--cut) var(--cut) no-repeat;
}

html body #poison-target-picker .poison-picker-head {
  grid-template-columns: 52px 1fr auto; gap: 14px; padding: 20px 16px 14px 20px;
  border-bottom: 0; position: relative;
}
html body #poison-target-picker .poison-picker-head::after {
  content: ''; position: absolute; left: 20px; right: 16px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--tox-d), rgba(79, 191, 43, .15) 70%, transparent);
}
html body #poison-target-picker .poison-picker-head img {
  width: 52px; height: 52px; padding: 2px; border: 0; border-radius: 0; box-sizing: border-box;
  background: linear-gradient(135deg, var(--tox), #1d4a12 70%);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
html body #poison-target-picker .poison-picker-head b {
  font: 900 17px/1.2 var(--font-machine); letter-spacing: .14em; color: #d2edaa;
  text-shadow: none;
}
html body #poison-target-picker .poison-picker-head small {
  margin-top: 7px; font: 800 9px/1.2 var(--font-machine); letter-spacing: .2em; color: #6f8f66;
}
html body #poison-target-picker .poison-picker-close {
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center; font-size: 20px; line-height: 1; color: #9fd88a;
  box-shadow: inset 0 0 0 1px #2f5a24; background: rgba(5, 8, 5, .8);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: color .15s, box-shadow .15s, background .15s;
}
html body #poison-target-picker .poison-picker-close:hover { color: #fff; background: rgba(120, 30, 24, .55); box-shadow: inset 0 0 0 1px #ff6a5a; }

html body #poison-target-picker .poison-picker-search {
  margin: 14px 16px 8px 20px; padding: 9px 12px 9px 36px; height: 40px; min-height: 40px; flex: 0 0 40px; box-sizing: border-box; border: 0; border-radius: 8px;
  font: 800 12px/20px var(--font-machine); letter-spacing: .07em; color: #eaf8e5;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%238dff6a' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5 14 14' stroke='%238dff6a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 12px 50% / 14px 14px no-repeat,
    linear-gradient(180deg, #030503, #070b06);
  box-shadow: inset 0 0 0 1px #2a4a22, inset 0 2px 6px rgba(0, 0, 0, .7);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
html body #poison-target-picker .poison-picker-search::placeholder { color: #9aac87; letter-spacing: .07em; }
html body #poison-target-picker .poison-picker-search:focus {
  box-shadow: inset 0 0 0 1px var(--tox), inset 0 0 16px rgba(94, 228, 56, .18), inset 0 2px 6px rgba(0, 0, 0, .7);
}

html body #poison-target-picker .poison-target-list {
  padding: 4px 12px 14px 20px; gap: 6px; scrollbar-width: thin; scrollbar-color: #3f8a2a #060a06;
}
html body #poison-target-picker .poison-target-list::-webkit-scrollbar { width: 8px; }
html body #poison-target-picker .poison-target-list::-webkit-scrollbar-track { background: #060a06; box-shadow: inset 1px 0 0 #1b3016; }
html body #poison-target-picker .poison-target-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4fbf2b, #2a6a1a); }

html body #poison-target-picker .poison-target-group {
  margin: 8px 0 2px; font: 900 9.5px/1 var(--font-machine); letter-spacing: .26em; color: var(--tox);
}
html body #poison-target-picker .poison-target-group::before {
  content: ''; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); box-shadow: 0 0 8px currentColor; flex: none;
}
html body #poison-target-picker .poison-target-group.is-offline { color: #6f786b; }

html body #poison-target-picker .poison-target-option {
  --cut: 10px; --edge: #264420; --slab: #0a100a;
  position: relative; grid-template-columns: 22px 42px 1fr auto !important; gap: 12px; padding: 9px 12px 9px 16px;
  border: 0; border-radius: 0; font-family: var(--font-machine);
  background:
    linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), var(--edge) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 100% 100% / var(--cut) var(--cut) no-repeat,
    linear-gradient(90deg, var(--slab), #080c07);
  box-shadow: inset 0 0 0 1px var(--edge);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: box-shadow .15s, background-color .15s;
}
html body #poison-target-picker .poison-target-option::before {
  content: ''; position: absolute; left: 0; top: var(--cut); bottom: 0; width: 3px; background: var(--tox-d); opacity: .85;
}
html body #poison-target-picker .poison-target-option.is-offline::before { background: #38423a; }
html body #poison-target-picker .poison-target-option:hover { --edge: #4f9a35; --slab: #101a0d; }
html body #poison-target-picker .poison-target-option.is-selected {
  --edge: #7dff58; --slab: #153a10; box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 26px rgba(94, 228, 56, .14);
}
html body #poison-target-picker .poison-target-option.is-selected::before { background: var(--tox); box-shadow: 0 0 10px var(--tox); opacity: 1; }
html body #poison-target-picker .poison-target-option:focus-visible { outline: 0; --edge: #a8ff8a; }

html body #poison-target-picker .poison-target-option img {
  width: 40px; height: 40px; border: 0; box-shadow: 0 0 0 2px #070b06, 0 0 0 3px #3f7a2c;
}
html body #poison-target-picker .poison-target-option.is-selected img { box-shadow: 0 0 0 2px #070b06, 0 0 0 3px var(--tox), 0 0 12px rgba(120, 255, 70, .4); }
html body #poison-target-picker .poison-target-option b { font: 900 13px/1 var(--font-machine); letter-spacing: .08em; color: #eaf8e5; }
html body #poison-target-picker .poison-target-option small { margin-top: 5px; font: 800 8.5px/1 var(--font-machine); letter-spacing: .16em; color: #62785c; }
html body #poison-target-picker .poison-target-option strong {
  padding: 5px 9px; font: 900 9px/1 var(--font-machine); letter-spacing: .18em; color: var(--tox);
  background: rgba(77, 255, 46, .07); box-shadow: inset 0 0 0 1px rgba(120, 230, 84, .35);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
html body #poison-target-picker .poison-target-option strong.offline { color: #7b8577; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px #2e362d; }
html body #poison-target-picker .poison-target-option.is-selected strong { color: #072a06; background: var(--tox); box-shadow: none; }

html body #poison-target-picker .poison-check {
  width: 20px; height: 20px; border: 0; border-radius: 0; background: #030503; box-shadow: inset 0 0 0 1px #3f6335, inset 0 1px 4px rgba(0, 0, 0, .8);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); font-size: 13px;
}
html body #poison-target-picker .poison-target-option.is-selected .poison-check { background: var(--tox); box-shadow: none; color: #072a06; }
html body #poison-target-picker .poison-target-option .poison-tag { border-radius: 0; margin-left: 8px; font-family: var(--font-machine); }

html body #poison-target-picker .poison-picker-foot {
  gap: 8px; padding: 12px 12px 18px 20px; border-top: 0; position: relative; background: rgba(0, 0, 0, .3);
}
html body #poison-target-picker .poison-picker-foot::before {
  content: ''; position: absolute; left: 20px; right: 12px; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--tox-d), rgba(79, 191, 43, .15) 70%, transparent);
}
html body #poison-target-picker .poison-picker-tools button {
  padding: 0; height: 32px; border: 0; border-radius: 0; font: 900 10px/1 var(--font-machine); letter-spacing: .16em; color: #9fd88a;
  background: linear-gradient(180deg, #0d150b, #080d07); box-shadow: inset 0 0 0 1px #2f5a24;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
html body #poison-target-picker .poison-picker-tools button:hover { color: #e4ffd6; box-shadow: inset 0 0 0 1px var(--tox), inset 0 0 14px rgba(94, 228, 56, .16); }
html body #poison-target-picker .poison-cast-btn {
  height: 44px; padding: 0 10px; border: 0; border-radius: 0; font: 900 12px/1 var(--font-machine); letter-spacing: .24em; color: #072a06;
  background: linear-gradient(180deg, #a6ff7f, #5fcf36 55%, #3f9f22); box-shadow: inset 0 0 0 1px #d4ffbd, inset 0 -3px 0 rgba(0, 0, 0, .2);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
html body #poison-target-picker .poison-cast-btn:not(:disabled):hover { filter: brightness(1.08); }
html body #poison-target-picker .poison-cast-btn:disabled {
  opacity: 1; color: #55704d; text-shadow: none; box-shadow: inset 0 0 0 1px #234019;
  background: repeating-linear-gradient(135deg, #0b130a 0 8px, #0e170c 8px 16px);
}
html body #poison-target-picker .poison-cast-btn.is-armed {
  color: #ffe3df; text-shadow: none; box-shadow: inset 0 0 0 1px #ff8a7c, 0 0 0 transparent;
  background: repeating-linear-gradient(135deg, #7a1a14 0 10px, #4d0e0a 10px 20px);
}
html body #poison-target-picker .poison-cast-btn.is-casting { color: #b8ff87; background: #0e2009; box-shadow: inset 0 0 0 1px var(--tox); }
html body #poison-target-picker .poison-picker-empty { font-family: var(--font-machine); letter-spacing: .18em; font-size: 11px; }

/* 11. GM composer + latest readout ---------------------------------------------
   The "SHADOW BROKER" label in front of the composer said nothing the panel
   does not already say, and cost the input ~100px. It is hidden (kept while
   editing a sent message, where the label doubles as the edit indicator), so
   the pill extends the full width of the bar. The emoji picker opens from a
   wolf with a soft grey glow. The LATEST READOUT strip is 20% larger. */
body.room-mode-casual #gm-broker-bar #shadow-broker-form:not(.editing-message) > .shadow-broker-form-label { display: none !important; }
html body #gm-broker-bar #shadow-broker-form:not(.editing-message) { gap: 0 !important; grid-template-columns: minmax(0, 1fr) !important; max-width: none !important; width: 100% !important; }
html body #gm-broker-bar #shadow-broker-form > .gm-composer-shell { flex: 1 1 100% !important; width: 100% !important; }
html body #gm-broker-bar #gm-emoji-toggle .gm-wolf-glyph {
  display: block; font-size: 1.28rem; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(178, 184, 196, .6)) drop-shadow(0 0 8px rgba(150, 156, 170, .3));
  transition: filter .15s ease;
}
html body #gm-broker-bar #gm-emoji-toggle:hover .gm-wolf-glyph,
html body #gm-broker-bar #gm-emoji-toggle[aria-expanded="true"] .gm-wolf-glyph {
  filter: drop-shadow(0 0 4px rgba(214, 219, 228, .78)) drop-shadow(0 0 11px rgba(176, 182, 196, .4));
}
html body #gm-panel .gm-latest-readout { min-height: 30px; padding: 5px 11px; gap: 11px; }
html body #gm-panel .gm-latest-readout-label { font-size: 11.4px; }
html body #gm-panel .gm-latest-readout-state { font-size: 8.8px; }
html body #gm-panel .gm-latest-readout-state strong { font-size: 8px; }
html body #gm-panel .gm-latest-readout-more { font-size: 8.4px; }

/* 12. Emoji picker opens right above the wolf button (was anchored to the far right of the bar). */
html body #gm-broker-bar #gm-emoji-picker.gm-emoji-picker { left: 44px !important; right: auto !important; transform-origin: bottom left; }