:root { --unit: clamp(.75px, .0520833333vw, 1.5px); }
button { -webkit-user-select: none; user-select: none; }
.console-window {
  --unit: clamp(.75px, .0520833333vw, 1.5px);
  --frame: #4c5844; --panel: #3e4637; --light: #889180; --shadow: #282e23;
  position: fixed; inset: auto; left: 25.8vw; top: 2.7vh; width: 66.8vw; height: 89vh; margin: 0; max-width: none; max-height: none;
  padding: 0 calc(11 * var(--unit)) calc(11 * var(--unit));
  background: var(--frame); color: #d8ded3;
  border: 1px solid; border-color: var(--light) #343d2f #343d2f var(--light);
  font: 400 calc(24 * var(--unit))/calc(25 * var(--unit)) ArialPixel, Tahoma, Arial, sans-serif;
  overflow: hidden; color-scheme: dark;
}
.console-window[open] { display: flex; flex-direction: column; }
.console-window::backdrop { background: transparent; }
.console-titlebar {
  flex: 0 0 calc(52 * var(--unit)); display: flex; align-items: center;
  gap: calc(8 * var(--unit)); color: #f1f3ee;
  cursor: default; touch-action: none; user-select: none; outline: none;
}
.console-titlebar h2 { font: inherit; }
.console-titlebar .steam-icon { width: calc(24 * var(--unit)); height: calc(25 * var(--unit)); flex-shrink: 0; }
.console-steam { display: grid; place-items: center; flex-shrink: 0; width: calc(24 * var(--unit)); height: calc(25 * var(--unit)); padding: 0; border: 0; background: transparent; color: inherit; cursor: default; }
.console-output .console-header { -webkit-user-select: none; user-select: none; }
.console-bevel { background: var(--frame); border: 1px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); color: #f1f3ee; border-radius: 0; cursor: pointer; }
.console-bevel:active { border-color: var(--shadow) var(--light) var(--light) var(--shadow); }
.console-close { margin-left: auto; width: max(28px, 27 * var(--unit)); height: max(28px, 27 * var(--unit)); display: grid; place-items: center; }
.console-close svg { width: calc(21 * var(--unit)); height: calc(21 * var(--unit)); color: #aeb9a5; }
.console-output { min-height: 0; flex: 1; padding: 0 calc(2 * var(--unit)); background: var(--panel); border: 1px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); overflow-x: hidden; overflow-y: scroll; scrollbar-color: #59674f var(--panel); scrollbar-width: auto; outline: none; }
.console-output p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; min-height: calc(25 * var(--unit)); }
.console-history { display: flex; flex: 1; min-height: 0; }
.console-history .console-output { min-width: 0; border-right: 0; scrollbar-width: none; }
.console-history .console-output::-webkit-scrollbar { display: none; width: 0; }
.console-scrollbar { display: flex; flex-direction: column; flex: 0 0 calc(27 * var(--unit)); background: #59674f; border: 1px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); user-select: none; }
.scroll-step { display: grid; place-items: center; flex: 0 0 calc(25 * var(--unit)); padding: 0; background: #59674f; border: 1px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); border-radius: 0; touch-action: none; }
.scroll-step::after { content: ''; width: 0; height: 0; border-left: calc(6 * var(--unit)) solid transparent; border-right: calc(6 * var(--unit)) solid transparent; }
.scroll-up::after { border-bottom: calc(7 * var(--unit)) solid #aab59f; }
.scroll-down::after { border-top: calc(7 * var(--unit)) solid #aab59f; }
.scroll-step:active { border-color: var(--shadow) var(--light) var(--light) var(--shadow); }
.scroll-track { position: relative; flex: 1; min-height: 0; touch-action: none; }
.scroll-thumb { position: absolute; left: 0; right: 0; top: 0; background: var(--frame); border: 1px solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); touch-action: none; }
.scroll-thumb[hidden] { display: none; }
.scroll-thumb:focus-visible { outline: 1px dotted #ddd; outline-offset: -3px; }
.console-commandbar { display: flex; flex: 0 0 max(32px, 36 * var(--unit)); gap: calc(12 * var(--unit)); margin-top: calc(12 * var(--unit)); }
.console-command { flex: 1; min-width: 0; width: 0; background: var(--panel); border: 1px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); color: #d8ded3; border-radius: 0; padding: 2px; outline: none; }
.console-command::selection { background: #c4b550; color: #292c21; }
.console-submit { width: calc(96 * var(--unit)); flex-shrink: 0; text-align: left; padding-left: calc(7 * var(--unit)); }
.console-copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.console-window button:focus-visible { outline: 1px dotted #d8ded3; outline-offset: -4px; }
.resize-edge { position: absolute; touch-action: none; }
.resize-edge[data-edge="n"] { top: 0; left: 12px; right: 12px; height: 5px; cursor: ns-resize; }
.resize-edge[data-edge="s"] { bottom: 0; left: 12px; right: 20px; height: 5px; cursor: ns-resize; }
.resize-edge[data-edge="w"] { left: 0; top: 12px; bottom: 12px; width: 5px; cursor: ew-resize; }
.resize-edge[data-edge="e"] { right: 0; top: 12px; bottom: 20px; width: 5px; cursor: ew-resize; }
.resize-edge[data-edge="nw"], .resize-edge[data-edge="ne"], .resize-edge[data-edge="sw"] { width: 12px; height: 12px; }
.resize-edge[data-edge="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.resize-edge[data-edge="ne"] { right: 0; top: 0; cursor: nesw-resize; }
.resize-edge[data-edge="sw"] { left: 0; bottom: 0; cursor: nesw-resize; }
.console-resize { bottom: 0; right: 0; width: 20px; height: 20px; padding: 2px; border: 0; background: transparent; color: #929b88; cursor: nwse-resize; }
.console-resize svg { width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 600px) { .console-command { font-size: 16px; } .console-window { left: 2vw; width: 96vw; } }

.console-suggestions {
  position: fixed; z-index: 1; min-width: 108px; padding: 3px;
  background: #4c5844; color: #a0aa95;
  border: 1px solid; border-color: #889180 #282e23 #282e23 #889180;
  box-shadow: none; overflow: hidden; user-select: none;
  font: inherit; line-height: calc(33 * var(--unit));
}
.console-suggestions[hidden] { display: none; }
.console-suggestion { padding: 0 3px; cursor: pointer; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.console-suggestion[aria-selected="true"], .console-suggestion:hover { background: #3e4637; color: #d8ded3; }
.console-window { overflow: visible; }

.startup-dialog { width: 419px; max-height: calc(100dvh - 24px); overflow: hidden; resize: none; }
.startup-titlebar { cursor: default; touch-action: none; user-select: none; }
.startup-titlebar:focus-visible { outline: 1px dotted #dedfd6; outline-offset: 2px; }
.startup-content { text-align: left; }
.startup-label { display: block; color: #c4b550; margin-bottom: 8px; cursor: default; user-select: none; }
.startup-copy-status { align-self: center; margin-right: 12px; font-size: 14px; }
.startup-copy { min-height: 30px; }
.clipboard-helper { position: fixed; left: -9999px; top: 0; opacity: 0; }
#startup-content { display: block; width: 100%; min-width: 0; border-radius: 0; padding: 4px 3px; border: 1px solid; border-color: #292c21 #8c9284 #8c9284 #292c21; outline: none; background: #3e4637; color: #dedfd6; font: inherit; line-height: 1.25; white-space: nowrap; overflow: hidden; user-select: text; }
::selection { background: #c4b550; color: #292c21; }
#startup-content::selection, .console-output ::selection { background: #c4b550; color: #292c21; }
body[data-game] .console-output.copy-feedback ::selection,
body[data-game] #startup-content.copy-feedback::selection { background: #c4b550; color: #292c21; }
@media (max-width: 600px) { #startup-content { font-size: 16px; } }

/* GoldSrc keeps the contents readable while muting inactive title bars. */
.cs-dialog { font: 400 calc(24 * var(--unit))/calc(25 * var(--unit)) ArialPixel, Tahoma, Arial, sans-serif; }
.cs-dialog .heading .wrapper .text { font: inherit; }
.window-icon, .console-steam.window-icon { flex-shrink: 0; display: block; width: calc(24 * var(--unit)); height: calc(25 * var(--unit)); padding: 0; border: 0; border-radius: 0; background: transparent url('../images/steam.svg') center / contain no-repeat; cursor: default; }
[data-game-window] .console-titlebar, [data-game-window].cs-dialog .heading .wrapper .text { color: #929d87; }
[data-game-window] .window-icon { opacity: .48; }
[data-game-window] .console-close, [data-game-window] .heading .close { border-color: transparent; }
[data-game-window] .console-close svg { color: #929d87; }
[data-game-window].is-active .console-titlebar, [data-game-window].is-active.cs-dialog .heading .wrapper .text { color: #f1f3ee; }
[data-game-window].is-active .window-icon { opacity: 1; }
[data-game-window].is-active .console-close, [data-game-window].is-active .heading .close { border-color: #889180 #282e23 #282e23 #889180; }
[data-game-window].is-active .console-close svg { color: #c5cdbd; }
[data-game-window] .startup-label { color: #d8ded3; }
[data-game-window].is-active .startup-label { color: #c4b550; }
.window-menu { position: fixed; min-width: calc(180 * var(--unit)); max-width: calc(100vw - 12px); padding: 3px; border: 1px solid; border-color: #889180 #282e23 #282e23 #889180; background: #4c5844; box-shadow: 1px 1px 1px #0008; font: 400 calc(24 * var(--unit))/calc(29 * var(--unit)) ArialPixel, Tahoma, Arial, sans-serif; user-select: none; }
.window-menu[hidden], .window-menu-item[hidden] { display: none; }
.window-menu:focus { outline: none; }
.window-menu-item { display: block; width: 100%; border: 0; border-radius: 0; padding: 0 8px; background: transparent; color: #a0aa95; font: inherit; text-align: left; white-space: nowrap; cursor: default; }
.window-menu-item:hover, .window-menu-item:focus { background: #958831; color: #fff; outline: none; }