:root {
  /* Colours from the classic (2003-2008) green Steam client skin. */
  --window: #4c5844;
  --list: #3e4637;
  --text: #d8ded3;
  --dim: #a0aa95;
  --disabled: #75806f;
  --bevel-light: #889180;
  --bevel-dark: #282e22;
  --select: #958831;
  --accent: #c4b550;

  /* Windows 2000 desktop and taskbar. */
  --desktop: #3a6ea5;
  --face: #d4d0c8;
  --highlight: #0a246a;
  --raised: inset -1px -1px #404040, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px var(--face);
  --sunken: inset -1px -1px #fff, inset 1px 1px #404040, inset -2px -2px var(--face), inset 2px 2px #808080;
  --taskbar-height: 30px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--desktop);
  color: var(--text);
  font: 13px/1.4 Tahoma, Verdana, "Segoe UI", sans-serif;
}

/* ---- Desktop ---- */

.desktop {
  position: fixed; inset: 0 0 var(--taskbar-height) 0;
  overflow: hidden; background: var(--desktop);
}
/* Logo centred on the desktop like a Windows "Center" wallpaper. */
.wallpaper {
  position: absolute; inset: 0; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; user-select: none;
}
.wallpaper img { width: min(720px, 85vw); max-height: 70vh; object-fit: contain; }
.guild {
  position: absolute; right: 48px; bottom: 40px;
  color: #fff; text-align: right; pointer-events: none; user-select: none;
  font: clamp(26px, 3.4vw, 52px)/1.05 "Franklin Gothic Medium", "Franklin Gothic", "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 2px 2px 0 rgb(0 0 0 / 0.25);
}

/* Icons fill the left edge top to bottom, then start a new column, like Windows arranges them. */
.desktop-icons {
  position: absolute; top: 8px; bottom: 8px; left: 6px;
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 76px); grid-auto-columns: 84px; gap: 4px 2px;
}
.desktop-icon {
  position: relative; align-self: start; width: 84px; padding: 2px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; color: #fff; cursor: default;
  font: 11px Tahoma, Verdana, sans-serif; text-align: center;
}
.desktop-icon .art { display: block; width: 32px; height: 32px; object-fit: contain; }
/* Long names show two lines until the icon is selected, then the whole name. */
.desktop-icon .label {
  padding: 0 2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.desktop-icon:focus { outline: none; z-index: 1; }
.desktop-icon:focus .label {
  -webkit-line-clamp: unset; overflow: visible;
  background: var(--highlight); outline: 1px dotted #fff;
}

/* ---- Steam windows ---- */

/* Every panel is beveled: light edge top-left, dark edge bottom-right (reversed when sunken). */
.window, .panel, .tab, th, .button {
  border: 1px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.list, .players, .button:active {
  border: 1px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}

.window { position: absolute; background: var(--window); color: var(--text); }
.window:focus { outline: none; }
#browser { left: 110px; top: 80px; width: min(820px, calc(100vw - 16px)); }
#game-info { width: min(400px, calc(100vw - 16px)); }
@media (max-width: 700px) { #browser { left: 8px; top: 8px; } }

.titlebar {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 4px 10px;
  cursor: move; user-select: none; touch-action: none;
}
.title { flex: 1; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.window.inactive .title, .offline .title { color: var(--dim); }
.title-button {
  all: unset; display: grid; place-items: center; width: 18px; height: 16px;
  color: var(--dim); font-size: 14px; line-height: 1; cursor: pointer;
}
.title-button:hover, .title-button:focus-visible { color: var(--text); }

/* Tabs (decorative, like the original's Internet / Favorites / ... row). */
/* Tabs that don't fit a narrow window get cut off; the extra 1px at the bottom keeps the
   active tab's overlap onto the panel from being clipped. */
.tabs {
  display: flex; gap: 2px; padding: 4px 10px 1px; margin-bottom: -1px;
  position: relative; z-index: 1; overflow: hidden;
}
.tab {
  padding: 3px 12px 2px; border-bottom: 0;
  background: var(--window); color: var(--dim); white-space: nowrap;
}
.tab.active {
  margin: -2px 0 -1px; padding-top: 5px;
  border-bottom: 1px solid var(--window); /* hides the panel edge so the tab joins it */
  color: var(--text);
}
@media (max-width: 520px) { .tab:not(.active) { display: none; } }

.panel { margin: 0 10px 10px; padding: 8px; }

/* Once resized, the browser has a fixed size and the server list stretches to fill it. */
#browser { display: flex; flex-direction: column; }
#browser .panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#browser .list { flex: 1 1 auto; }
#browser.resized .list { min-height: 0; max-height: none; }

/* Diagonal grip in the bottom-right corner, like the old Steam windows. */
.resize-grip {
  position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px;
  cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg,
    transparent 0 45%, var(--bevel-light) 45% 52%, var(--bevel-dark) 52% 59%,
    transparent 59% 66%, var(--bevel-light) 66% 73%, var(--bevel-dark) 73% 80%,
    transparent 80% 87%, var(--bevel-light) 87% 94%, var(--bevel-dark) 94%);
}
.statusbar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px; margin-top: 8px;
}
#status { color: var(--dim); }
#status.error { color: var(--accent); }

.button {
  display: inline-block; padding: 3px 14px;
  background: var(--window); color: var(--text);
  font: inherit; text-decoration: none; cursor: pointer;
}
.button:focus-visible { outline: 1px dotted var(--text); outline-offset: -4px; }
.button[aria-disabled="true"] { color: var(--disabled); pointer-events: none; }

/* The server list. */
.list {
  /* Leaves room for the window's title bar, tabs and status bar, the taskbar, and some desktop around it. */
  min-height: min(320px, calc(100vh - 290px)); max-height: calc(100vh - 290px);
  min-height: min(320px, calc(100dvh - 290px)); max-height: calc(100dvh - 290px);
  overflow: auto; background: var(--list);
}
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th {
  position: sticky; top: 0; z-index: 1;
  padding: 0; background: var(--window); font-weight: normal; text-align: left;
}
th button {
  all: unset; display: block; width: 100%; box-sizing: border-box;
  padding: 2px 6px; white-space: nowrap; cursor: pointer;
}
th button:focus-visible { outline: 1px dotted var(--text); outline-offset: -3px; }
.arrow { margin-left: 6px; font-size: 9px; }
td { padding: 2px 6px; white-space: nowrap; }
.icon { width: 20px; padding: 2px 0; text-align: center; }
th.icon button { padding: 2px 0; text-align: center; }
.icon svg { vertical-align: -1px; }
.list td.name { white-space: normal; overflow-wrap: anywhere; min-width: 12em; }
.list tbody tr { cursor: pointer; }
.list tbody tr:focus-visible { outline: 1px dotted var(--text); outline-offset: -1px; }
.list tr.offline td { color: var(--disabled); }
.list tr.selected td { background: var(--select); color: #fff; }
/* On phones, drop the Game column (it's still in Game Info) so the rest fits. */
@media (max-width: 520px) {
  .list th:nth-child(4), .list td:nth-child(4) { display: none; }
  .list td.name { min-width: 8em; }
}

/* The Game Info window. */
.content { padding: 6px 10px 0; }
.window-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 10px; }

dl {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 2px 14px; margin: 0 0 10px;
}
dt { color: var(--dim); }
dd { margin: 0; overflow-wrap: anywhere; }
.offline dd.status { color: var(--accent); }

/* A fixed-size box like the original Game Info window: the window keeps its shape whatever the
   player count, and the list scrolls once it's full. It only shrinks on short screens. */
.players { height: clamp(100px, calc(100vh - 360px), 280px); overflow-y: auto; background: var(--list); }
.players th { padding: 2px 6px; }
.players td { white-space: normal; overflow-wrap: anywhere; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.players .num { white-space: nowrap; }
.unnamed { color: var(--disabled); }
.empty { margin: 0; padding: 4px 6px; color: var(--dim); }

/* Beveled green scrollbars. Chromium ignores ::-webkit-scrollbar once scrollbar-color
   is set, so only give scrollbar-color to browsers that don't support the former. */
.list::-webkit-scrollbar, .players::-webkit-scrollbar { width: 16px; height: 16px; }
.list::-webkit-scrollbar-track, .players::-webkit-scrollbar-track { background: var(--list); }
.list::-webkit-scrollbar-corner { background: var(--window); }
.list::-webkit-scrollbar-thumb, .players::-webkit-scrollbar-thumb {
  background: var(--window);
  border: 1px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
@supports not selector(::-webkit-scrollbar) {
  .list, .players { scrollbar-color: var(--window) var(--list); }
}

/* ---- Windows 2000 taskbar and Start menu ---- */

.taskbar, .start-menu { color: #000; font: 11px Tahoma, Verdana, sans-serif; }
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10001;
  height: var(--taskbar-height); padding: 4px 2px 2px;
  display: flex; align-items: center; gap: 4px;
  background: var(--face); box-shadow: inset 0 1px var(--face), inset 0 2px #fff;
}
.w-button {
  display: flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 6px; border: 0;
  background: var(--face); box-shadow: var(--raised);
  color: #000; font: inherit; cursor: default;
}
.w-button:active, .w-button[aria-pressed="true"], .w-button[aria-expanded="true"] { box-shadow: var(--sunken); }
.w-button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.start { font-weight: bold; padding-left: 4px; }
.grip { width: 2px; height: 20px; margin: 0 2px; box-shadow: inset -1px 0 #fff, inset 1px 0 #808080; }
.tasks { flex: 1; min-width: 0; display: flex; gap: 3px; }
.task { flex: 0 1 160px; min-width: 0; }
.task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task[aria-pressed="true"] {
  /* The checkered look of the active window's button. */
  background: var(--face) repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 2px 2px;
}
.tray {
  height: 22px; padding: 0 10px; display: flex; align-items: center;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080; white-space: nowrap;
}

.start-menu {
  position: fixed; left: 2px; bottom: calc(var(--taskbar-height) - 2px); z-index: 10000;
  display: flex; min-width: 210px; min-height: 200px; padding: 3px;
  background: var(--face); box-shadow: var(--raised);
}
.banner {
  width: 24px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
  background: linear-gradient(to top, var(--highlight), #000);
}
/* Reads bottom-to-top, like the "Windows 2000 Professional" strip. */
.banner > span {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  color: #c0c0c0; font: 17px "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.banner b { color: #fff; }
#start-items { list-style: none; margin: 0; padding: 0; flex: 1; }
#start-items button {
  all: unset; box-sizing: border-box; width: 100%;
  display: flex; align-items: center; gap: 8px; padding: 6px 24px 6px 8px;
  cursor: default; white-space: nowrap;
}
#start-items button:hover, #start-items button:focus-visible { background: var(--highlight); color: #fff; }
#start-items .separator { height: 2px; margin: 3px 2px; box-shadow: inset 0 1px #808080, inset 0 -1px #fff; }