.game-commands-module { margin: 28px 0 24px; }
.game-commands-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 0 0 12px; }
.game-commands-eyebrow { display: none; }
.game-commands-heading h2 { margin: 0; color: #eff7ff; font-size: 18px; }
.game-commands-hint { color: #7189a8; font-size: 10px; }
.game-commands-table { overflow: visible; border: 1px solid rgba(74, 133, 204, .2); }
.game-command-header, .game-command-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(92px, 122px); gap: 14px; align-items: center; }
.game-command-header { padding: 8px 14px; color: #7f9cbd; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.game-command-header span:last-child { text-align: right; }
.game-command-row { position: relative; min-height: 0; padding: 9px 14px; border-top: 1px solid rgba(74, 133, 204, .1); }
.game-command-row:nth-child(odd) { background: rgba(20, 24, 46, .52); }
.game-command-row:nth-child(even) { background: rgba(33, 39, 66, .42); }
.game-command-name { display: flex; align-items: baseline; gap: 9px; min-width: 0; color: #e7f2ff; font-size: 12px; }
.game-command-name code { flex: 0 0 auto; color: #f0c56f; font: inherit; font-weight: 800; }
.game-command-name small { overflow-wrap: anywhere; color: #8ca4c2; font-size: 10px; }
.game-command-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #55e6ff; box-shadow: 0 0 9px rgba(85, 230, 255, .75); }
.game-command-action { position: relative; display: flex; justify-content: flex-end; }
.game-command-more { padding: 3px 0; border: 0; border-bottom: 1px solid rgba(98, 228, 255, .42); background: transparent; color: #62e4ff; cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; }
.game-command-more:hover, .game-command-more:focus-visible { color: #fff; border-bottom-color: #62e4ff; outline: none; }
.game-command-popover { position: absolute; right: 0; top: calc(100% + 9px); z-index: 30; display: none; width: min(360px, calc(100vw - 34px)); padding: 13px 14px; border: 1px solid rgba(98, 228, 255, .45); border-radius: 6px; background: linear-gradient(145deg, rgba(7, 17, 33, .99), rgba(16, 25, 49, .99)); box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 0 18px rgba(0, 177, 255, .14); }
.game-command-action:hover .game-command-popover, .game-command-action:focus-within .game-command-popover { display: block; }
.game-command-popover-title { margin-bottom: 8px; color: #f0c56f; font-size: 13px; font-weight: 900; }
.game-command-popover p { margin: 0; color: #e8f4ff; font-size: 10px; line-height: 1.4; }
.game-command-cost { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(98, 228, 255, .16); font-size: 10px; }
.game-command-cost span { color: #7f9cbd; }
.game-command-cost strong { color: #62e49a; font-weight: 800; text-align: right; }

/* Let the last-row details card extend above the footer instead of being covered by it. */
#content, #content.site-content { position: relative; z-index: 2; }
.footer, .site-footer { position: relative; z-index: 1; }

@media (max-width: 680px) {
    .game-commands-heading { align-items: start; flex-direction: column; gap: 4px; }
    .game-command-header, .game-command-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding-right: 12px; padding-left: 12px; }
    .game-command-name { align-items: flex-start; flex-wrap: wrap; gap: 5px 8px; }
    .game-command-name small { flex-basis: 100%; padding-left: 14px; }
    .game-command-popover { position: fixed; right: 12px; left: 12px; top: auto; bottom: 12px; width: auto; }
}