/* Shared Win95 look for the desktop and the game window. */
:root {
  --face: #c0c0c0;
  --light: #ffffff;
  --shadow: #808080;
  --dark: #000000;
  --title: #000080;
  --title-end: #1084d0;
  --title-off: #808080;
  --title-off-end: #b5b5b5;
  --desk: #008080;
  --select: #000080;
  --font: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, Geneva, "Segoe UI", sans-serif;
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font);
  font-size: 12px;
  color: #000;
}

.raised {
  background: var(--face);
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px #dfdfdf;
}

.sunken {
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow),
              inset -2px -2px #dfdfdf, inset 2px 2px var(--dark);
}

.window {
  background: var(--face);
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px #dfdfdf,
              inset -2px -2px var(--shadow), inset 2px 2px var(--light);
  padding: 3px;
  box-sizing: border-box;
}

.title-bar {
  background: linear-gradient(90deg, var(--title), var(--title-end));
  color: #fff;
  font-weight: bold;
  height: 18px;
  padding: 0 2px 0 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
}

.window.inactive .title-bar {
  background: linear-gradient(90deg, var(--title-off), var(--title-off-end));
  color: #dcdcdc;
}

.title-bar > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-bar img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.title-btns {
  display: flex;
  gap: 2px;
}

.title-btns button {
  width: 16px;
  height: 14px;
  padding: 0;
  border: 0;
  font: bold 10px/1 var(--font);
  color: #000;
  background: var(--face);
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px #dfdfdf;
  cursor: pointer;
}

.title-btns button + .close {
  margin-left: 2px;
}

.title-btns button:active {
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--dark),
              inset -2px -2px #dfdfdf, inset 2px 2px var(--shadow);
}

.window .content {
  padding: 8px;
}

.btn {
  min-width: 75px;
  min-height: 23px;
  padding: 0 12px;
  border: 0;
  background: var(--face);
  font: 12px var(--font);
  color: #000;
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px #dfdfdf;
  cursor: pointer;
}

.btn:active, .btn.pressed {
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--dark),
              inset -2px -2px #dfdfdf, inset 2px 2px var(--shadow);
}

.btn:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.field {
  font: 12px var(--font);
  padding: 3px 4px;
  border: 0;
  background: #fff;
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow),
              inset -2px -2px #dfdfdf, inset 2px 2px var(--dark);
  outline: none;
}

/* Menubar (File/Edit/...) */
.menubar {
  display: flex;
  padding: 1px 0;
  background: var(--face);
}

.menu {
  position: relative;
}

.menu > span {
  display: block;
  padding: 3px 7px;
  cursor: default;
}

.menu:hover > span, .menu.open > span {
  background: var(--select);
  color: #fff;
}

.menu ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin: 0;
  padding: 2px;
  list-style: none;
  min-width: 150px;
  background: var(--face);
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px #dfdfdf,
              inset -2px -2px var(--shadow), inset 2px 2px var(--light);
}

.menu:hover ul, .menu.open ul {
  display: block;
}

.menu ul a {
  display: block;
  padding: 3px 20px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.menu ul a:hover {
  background: var(--select);
  color: #fff;
}

.menu .sep {
  height: 0;
  margin: 3px 1px;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--light);
}

.statusbar {
  display: flex;
  gap: 2px;
  padding: 2px;
}

.statusbar > span {
  flex: 1;
  padding: 2px 4px;
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}