/* Source artwork converted from the game textures in Kruphixx/cssource-hud.
   See assets/README.md for provenance. Only this game's view uses this theme. */
.source-logo, .console-language { display: none; }
body[data-game="cs-source"] {
  --source-unit: clamp(.75px, .0925925926vh, 1.5px);
  background: #292b22 url('assets/background.webp') center / 100% 100% no-repeat;
}
body[data-game="cs-source"]::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background: #000; opacity: 0;
}
body[data-game="cs-source"].console-open::before { opacity: .35; }
body[data-game="cs-source"] .source-logo {
  display: block; position: absolute; left: 3.4vw; top: 37.8vh;
  width: 61vw; height: 15.4vh; object-fit: fill;
  user-select: none; pointer-events: none;
}
body[data-game="cs-source"].console-open .source-logo { opacity: .55; }
body[data-game="cs-source"] .game-menu { left: 3.75%; top: 51.7%; bottom: auto; gap: 0; }
body[data-game="cs-source"] .menu-item {
  min-height: 0; padding: 0; margin: 0; border: 0;
  font: 600 calc(21.5 * var(--source-unit))/calc(49 * var(--source-unit)) Verdana, Geneva, sans-serif;
  text-transform: uppercase; color: #fff; text-shadow: none;
}
body[data-game="cs-source"] .menu-item:hover,
body[data-game="cs-source"] .menu-item:focus-visible { color: #c8c8c8; }
body[data-game="cs-source"] .menu-item:active { color: #c0ba50; }
body[data-game="cs-source"] .console-window {
  --frame: #888; --light: #aaa; --shadow: #444;
  padding: 0 max(10px, .83333vw) max(10px, .78125vw);
  border: 0; border-radius: 8px; background: rgb(134 134 134 / 87%);
  color: #ddd; font: 400 10px/13px 'Lucida Console', Consolas, monospace;
}
body[data-game="cs-source"] .console-window:not(.is-active) { background: rgb(160 160 160 / 13%); }
body[data-game="cs-source"] .console-titlebar {
  flex-basis: max(32px, 1.97917vw); gap: 0;
  font: 700 10px/1 Tahoma, Arial, sans-serif; color: rgb(255 255 255 / 75%);
}
body[data-game="cs-source"] .console-steam { display: none; }
body[data-game="cs-source"] .console-titlebar h2 { font: inherit; transform: translateY(-4px); }
body[data-game="cs-source"] .console-close,
body[data-game="cs-source"] .console-close:active {
  width: 26px; height: 26px; min-width: 26px;
  margin-right: -12px; border: 0; background: none;
}
body[data-game="cs-source"] .console-close svg { width: 11px; height: 11px; color: #c8c8c8; }
body[data-game="cs-source"] .console-output {
  padding: 1px 8px; background: rgb(0 0 0 / 27%);
  outline: none;
  border-color: #454545 #b8b8b8 #b8b8b8 #454545;
  color-scheme: light;
}
body[data-game="cs-source"] .console-output p { min-height: 13px; }
body[data-game="cs-source"] .console-scrollbar { flex-basis: 16px; background: rgb(160 160 160 / 94%); border-color: #454545 #b8b8b8 #b8b8b8 #454545; }
body[data-game="cs-source"] .scroll-step { flex-basis: 16px; background: #555; border-color: #b8b8b8 #444 #444 #b8b8b8; }
body[data-game="cs-source"] .scroll-step::after { border-left-width: 4px; border-right-width: 4px; }
body[data-game="cs-source"] .scroll-up::after { border-bottom: 4px solid #fff; }
body[data-game="cs-source"] .scroll-down::after { border-top: 4px solid #fff; }
body[data-game="cs-source"] .scroll-thumb { background: #999; border-color: #bcbcbc #818181 #818181 #bcbcbc; }
body[data-game="cs-source"] .scroll-thumb:hover,
body[data-game="cs-source"] .scroll-thumb:active { background: #999; }
body[data-game="cs-source"] .console-commandbar {
  position: relative; flex-basis: max(24px, 1.25vw);
  margin-top: max(7px, .41667vw); gap: max(12px, .625vw);
  font: 400 11px/13px Tahoma, Arial, sans-serif;
}
body[data-game="cs-source"] .console-command {
  padding-right: 19px; background: rgb(80 80 80 / 28%); color: #eee;
  border-color: #444 #bababa #bababa #444; font: inherit;
}
body[data-game="cs-source"] .console-language {
  display: none; place-items: center; position: absolute;
  right: calc(max(64px, 3.33333vw) + max(12px, .625vw) + 2px);
  top: 2px; bottom: 2px; width: 13px;
  background: #ccc; color: #111; font: 8px/1 Tahoma, sans-serif;
  user-select: none; pointer-events: none;
}
body[data-game="cs-source"] .console-command:focus + .console-language { display: grid; }
body[data-game="cs-source"] .console-submit {
  width: max(64px, 3.33333vw); padding-left: 4px;
  border-color: #c5c5c5 #333 #333 #c5c5c5; background: rgb(160 160 160 / 40%); font: inherit;
}
body[data-game="cs-source"] .console-resize { width: 15px; height: 15px; padding: 0; }
body[data-game="cs-source"] .console-resize svg { display: none; }
body[data-game="cs-source"] .console-resize::after {
  content: ''; position: absolute; right: 2px; bottom: 2px; width: 11px; height: 11px;
  background: repeating-linear-gradient(135deg, transparent 0 2px, #ddd 2px 3px);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
body[data-game="cs-source"] .console-suggestions {
  padding: 2px 3px; border: 1px solid; border-color: #a0a0a0 #666 #666 #a0a0a0;
  background: rgb(134 134 134 / 87%); color: #fff;
  box-shadow: none; font: 10px/13px Tahoma, Arial, sans-serif;
}
body[data-game="cs-source"] .console-suggestion { padding: 0 2px; }
body[data-game="cs-source"] .console-suggestion:hover,
body[data-game="cs-source"] .console-suggestion[aria-selected="true"] { background: #ff9b00; color: #000; }
body[data-game="cs-source"] .console-window ::selection { background: #ff9b00; color: #000; }
body[data-game="cs-source"] .console-output ::selection { background: #ff9b00; color: #000; }
body[data-game="cs-source"] .console-output.copy-feedback ::selection,
body[data-game="cs-source"] #startup-content.copy-feedback::selection { background: #ff9b00; color: #000; }

/* The Source system menu opens from a click on the title bar. */
body[data-game="cs-source"] .window-menu {
  min-width: 0; padding: 3px; background: #808080; box-shadow: none;
  border-color: #b8b8b8 #444 #444 #b8b8b8;
  font: 11px/18px Tahoma, Arial, sans-serif;
}
body[data-game="cs-source"] .window-menu-item { padding: 0 5px; color: #fff; }
body[data-game="cs-source"] .console-window:not(.is-active) .window-menu-item { color: #c0c0c0; }
body[data-game="cs-source"] .window-menu-item:hover,
body[data-game="cs-source"] .window-menu-item:focus { background: #ff9b00; color: #000; }

body[data-game="cs-source"] .startup-dialog {
  padding: 0 15px 15px; border: 0; border-radius: 8px;
  background: rgb(134 134 134 / 87%); color: #ddd;
  font: 13px/16px Tahoma, Arial, sans-serif;
}
body[data-game="cs-source"] .startup-dialog:not(.is-active) { background: rgb(134 134 134 / 45%); }
body[data-game="cs-source"] .startup-dialog .heading {
  height: 38px; margin: 0; padding: 0;
}
body[data-game="cs-source"] .startup-dialog .window-icon { display: none; }
body[data-game="cs-source"] .startup-dialog .heading .wrapper .text {
  font: 700 10px/10px Tahoma, Arial, sans-serif; color: #fff;
  transform: translateY(-4px);
}
body[data-game="cs-source"] .startup-dialog:not(.is-active) .heading .wrapper .text { color: #ccc; }
body[data-game="cs-source"] .startup-dialog .heading .close {
  width: 26px; height: 26px; padding: 0; margin-right: -11px; border: 0;
  background: transparent url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 21 21"%3E%3Cpath d="m3 3 15 15M18 3 3 18" fill="none" stroke="%23ccc" stroke-width="3"/%3E%3C/svg%3E') center no-repeat;
}
body[data-game="cs-source"] .startup-dialog .content { padding: 16px 0; }
body[data-game="cs-source"] .startup-dialog .startup-label { color: #ddd; margin-bottom: 8px; }
body[data-game="cs-source"] #startup-content {
  height: 21px; padding: 1px 2px; background: rgb(0 0 0 / 27%); color: #ddd;
  border-color: #444 #b8b8b8 #b8b8b8 #444; font: 11px/15px Tahoma, Arial, sans-serif;
}
body[data-game="cs-source"] #startup-content::selection { background: #ff9b00; color: #000; }
body[data-game="cs-source"] .startup-dialog .footer-btns { margin: 0; }
body[data-game="cs-source"] .startup-dialog .startup-copy {
  width: 64px; height: 24px; min-height: 0; padding: 2px 4px;
  background: rgb(160 160 160 / 40%); color: #fff;
  border-color: #c5c5c5 #333 #333 #c5c5c5; font: 11px/13px Tahoma, Arial, sans-serif;
}
body[data-game="cs-source"] .startup-copy-status { font: 11px/13px Tahoma, Arial, sans-serif; }
@media (max-width: 600px) {
  body[data-game="cs-source"] { background-size: auto 100%; background-position: 60% center; }
  body[data-game="cs-source"] .source-logo { left: 5%; top: 28%; width: 90%; height: auto; }
  body[data-game="cs-source"] .game-menu { left: 6%; }
  body[data-game="cs-source"] .menu-item { min-height: 48px; font-size: 20px; }
  body[data-game="cs-source"] .console-command { font-size: 16px; }
}