@font-face {
  font-family: 'W95F';
  src: url('W95F.otf') format('opentype');
  font-display: block;
}

:root {
  /* Twilight theme (matches RetroSkin.cs default) */
  --face: rgb(64, 56, 88);
  --face-light: rgb(96, 84, 128);
  --highlight: rgb(144, 128, 184);
  --shadow: rgb(40, 32, 56);
  --dark-shadow: rgb(16, 12, 24);
  --sunken-bg: rgb(32, 24, 48);
  --title-active: rgb(80, 32, 112);
  --title-grad-end: rgb(192, 96, 184);
  --title-text: rgb(248, 232, 240);
  --title-inactive: rgb(80, 72, 104);
  --body-text: rgb(232, 224, 248);
  --disabled-text: rgb(128, 116, 152);
  --desktop: rgb(24, 16, 40);
}

[data-theme="win95"] {
  --face: rgb(192, 192, 192);
  --face-light: rgb(223, 223, 223);
  --highlight: rgb(255, 255, 255);
  --shadow: rgb(128, 128, 128);
  --dark-shadow: rgb(0, 0, 0);
  --sunken-bg: rgb(255, 255, 255);
  --title-active: rgb(0, 0, 128);
  --title-grad-end: rgb(16, 132, 208);
  --title-text: rgb(255, 255, 255);
  --title-inactive: rgb(128, 128, 128);
  --body-text: rgb(0, 0, 0);
  --disabled-text: rgb(128, 128, 128);
  --desktop: rgb(0, 128, 128);
}

[data-theme="banana"] {
  --face: rgb(252, 232, 152);
  --face-light: rgb(255, 244, 185);
  --highlight: rgb(255, 250, 220);
  --shadow: rgb(176, 132, 56);
  --dark-shadow: rgb(90, 62, 20);
  --sunken-bg: rgb(252, 240, 200);
  --title-active: rgb(220, 168, 44);
  --title-grad-end: rgb(244, 208, 100);
  --title-text: rgb(50, 30, 10);
  --title-inactive: rgb(196, 168, 116);
  --body-text: rgb(36, 22, 8);
  --disabled-text: rgb(168, 140, 88);
  --desktop: rgb(220, 178, 72);
}

[data-theme="rainyday"] {
  --face: rgb(160, 176, 192);
  --face-light: rgb(192, 208, 224);
  --highlight: rgb(224, 232, 240);
  --shadow: rgb(96, 112, 128);
  --dark-shadow: rgb(32, 48, 64);
  --sunken-bg: rgb(224, 232, 240);
  --title-active: rgb(32, 64, 128);
  --title-grad-end: rgb(96, 144, 192);
  --title-text: rgb(255, 255, 255);
  --title-inactive: rgb(112, 128, 144);
  --body-text: rgb(0, 0, 0);
  --disabled-text: rgb(112, 128, 144);
  --desktop: rgb(64, 96, 128);
}

[data-theme="plum"] {
  --face: rgb(192, 160, 192);
  --face-light: rgb(216, 192, 216);
  --highlight: rgb(240, 224, 240);
  --shadow: rgb(112, 80, 112);
  --dark-shadow: rgb(48, 16, 48);
  --sunken-bg: rgb(240, 224, 240);
  --title-active: rgb(96, 32, 96);
  --title-grad-end: rgb(160, 96, 160);
  --title-text: rgb(255, 255, 255);
  --title-inactive: rgb(128, 112, 128);
  --body-text: rgb(0, 0, 0);
  --disabled-text: rgb(128, 112, 128);
  --desktop: rgb(96, 64, 96);
}

[data-theme="forest"] {
  --face: rgb(120, 152, 104);
  --face-light: rgb(160, 192, 144);
  --highlight: rgb(208, 232, 192);
  --shadow: rgb(56, 88, 48);
  --dark-shadow: rgb(16, 40, 16);
  --sunken-bg: rgb(208, 224, 184);
  --title-active: rgb(40, 96, 40);
  --title-grad-end: rgb(112, 168, 88);
  --title-text: rgb(248, 255, 232);
  --title-inactive: rgb(96, 120, 96);
  --body-text: rgb(8, 24, 8);
  --disabled-text: rgb(88, 112, 80);
  --desktop: rgb(48, 80, 48);
}

[data-theme="terminal"] {
  --face: rgb(16, 32, 16);
  --face-light: rgb(32, 64, 32);
  --highlight: rgb(80, 200, 80);
  --shadow: rgb(8, 24, 8);
  --dark-shadow: rgb(0, 8, 0);
  --sunken-bg: rgb(0, 16, 0);
  --title-active: rgb(0, 120, 0);
  --title-grad-end: rgb(80, 200, 80);
  --title-text: rgb(192, 255, 192);
  --title-inactive: rgb(32, 80, 32);
  --body-text: rgb(120, 240, 120);
  --disabled-text: rgb(64, 120, 64);
  --desktop: rgb(0, 16, 0);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--desktop);
  color: var(--body-text);
  font-family: 'W95F', 'Tahoma', 'Verdana', sans-serif;
  font-size: 16px;
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keep pixelated rendering only on raster sprites/images, not canvases. */
img { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── Embedded mode (app running inside the desktop's iframe) ─── */
body.embedded { background: transparent; }
body.embedded .retro-window {
  /* The desktop wrapper draws the drop shadow; keep only the bevel insets
     so the window exactly fills the host iframe. */
  box-shadow:
    inset 1px 1px 0 var(--face-light),
    inset -1px -1px 0 var(--shadow),
    inset 2px 2px 0 var(--face),
    inset -2px -2px 0 var(--face);
}

/* ── Retro Window ────────────────────────────────────────────── */
.retro-window {
  position: absolute;
  background: var(--face);
  /* 3px raised outer frame: outer highlight + dark, inner facelight + shadow */
  border-top: 1px solid var(--highlight);
  border-left: 1px solid var(--highlight);
  border-right: 1px solid var(--dark-shadow);
  border-bottom: 1px solid var(--dark-shadow);
  box-shadow:
    inset 1px 1px 0 var(--face-light),
    inset -1px -1px 0 var(--shadow),
    inset 2px 2px 0 var(--face),
    inset -2px -2px 0 var(--face),
    4px 4px 0 rgba(0, 0, 0, 0.43);
  padding: 3px;
}

.retro-titlebar {
  height: 18px;
  background: linear-gradient(to right, var(--title-active), var(--title-grad-end));
  color: var(--title-text);
  display: flex;
  align-items: center;
  padding: 0 2px 0 4px;
  font-size: 16px;
  line-height: 18px;
  font-family: 'W95F', sans-serif;
  cursor: grab;
}

.retro-titlebar.dragging { cursor: grabbing; }

.retro-titlebar.inactive {
  background: var(--title-inactive);
  color: var(--face);
}

.retro-titlebar-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.retro-titlebar-buttons {
  display: flex;
  gap: 2px;
}

.retro-titlebar-btn {
  width: 15px;
  height: 14px;
  background: var(--face);
  border-top: 1px solid var(--highlight);
  border-left: 1px solid var(--highlight);
  border-right: 1px solid var(--dark-shadow);
  border-bottom: 1px solid var(--dark-shadow);
  box-shadow:
    inset 1px 1px 0 var(--face-light),
    inset -1px -1px 0 var(--shadow);
  color: var(--body-text);
  font-size: 10px;
  font-family: 'W95F', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.retro-titlebar-btn:active {
  border-top: 1px solid var(--dark-shadow);
  border-left: 1px solid var(--dark-shadow);
  border-right: 1px solid var(--highlight);
  border-bottom: 1px solid var(--highlight);
  box-shadow:
    inset 1px 1px 0 var(--shadow),
    inset -1px -1px 0 var(--face-light);
}

/* Glyphs drawn with pseudo-elements for pixel accuracy */
.retro-titlebar-btn[data-glyph="close"]::before {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 7px; height: 7px;
  background:
    linear-gradient(to bottom right, transparent 42%, var(--body-text) 42%, var(--body-text) 58%, transparent 58%),
    linear-gradient(to bottom left,  transparent 42%, var(--body-text) 42%, var(--body-text) 58%, transparent 58%);
}

.retro-titlebar-btn[data-glyph="minimize"]::before {
  content: '';
  position: absolute;
  left: 3px; bottom: 2px;
  width: 7px; height: 2px;
  background: var(--body-text);
}

.retro-window-body {
  padding: 0;
  background: var(--face);
}

/* ── Menu Bar ────────────────────────────────────────────────── */
.retro-menubar {
  height: 20px;
  display: flex;
  background: var(--face);
  padding: 0 4px;
  align-items: stretch;
  font-size: 16px;
  font-family: 'W95F', sans-serif;
}

.retro-menu-item {
  padding: 0 10px;
  display: flex;
  align-items: center;
  color: var(--body-text);
  cursor: pointer;
}

.retro-menu-item:hover, .retro-menu-item.open {
  background: var(--title-active);
  color: var(--title-text);
}

.retro-menu-item.disabled {
  color: var(--disabled-text);
  cursor: default;
}

.retro-menu-item.disabled:hover {
  background: transparent;
  color: var(--disabled-text);
}

/* ── Status Bar ──────────────────────────────────────────────── */
.retro-statusbar {
  height: 24px;
  background: var(--face);
  display: flex;
  align-items: center;
  padding: 2px;
  font-size: 14px;
  font-family: 'W95F', sans-serif;
  gap: 4px;
}

.retro-status-cell {
  flex: 1;
  padding: 0 6px;
  height: 100%;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--shadow);
  border-left: 1px solid var(--shadow);
  border-right: 1px solid var(--highlight);
  border-bottom: 1px solid var(--highlight);
  color: var(--body-text);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.retro-btn {
  background: var(--face);
  color: var(--body-text);
  font-family: 'W95F', sans-serif;
  font-size: 16px;
  border-top: 1px solid var(--highlight);
  border-left: 1px solid var(--highlight);
  border-right: 1px solid var(--dark-shadow);
  border-bottom: 1px solid var(--dark-shadow);
  box-shadow:
    inset 1px 1px 0 var(--face-light),
    inset -1px -1px 0 var(--shadow);
  padding: 2px 8px;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.retro-btn:active, .retro-btn.pressed {
  border-top: 1px solid var(--dark-shadow);
  border-left: 1px solid var(--dark-shadow);
  border-right: 1px solid var(--highlight);
  border-bottom: 1px solid var(--highlight);
  box-shadow:
    inset 1px 1px 0 var(--shadow),
    inset -1px -1px 0 var(--face-light);
  padding: 3px 7px 1px 9px;
}

.retro-btn:disabled, .retro-btn.disabled {
  color: var(--disabled-text);
  cursor: default;
}

/* ── Sunken panel (LCD, text input, list) ────────────────────── */
.retro-sunken {
  background: var(--sunken-bg);
  border-top: 1px solid var(--shadow);
  border-left: 1px solid var(--shadow);
  border-right: 1px solid var(--highlight);
  border-bottom: 1px solid var(--highlight);
  box-shadow:
    inset 1px 1px 0 var(--dark-shadow),
    inset -1px -1px 0 var(--face-light);
}

/* ── Theme picker popup ──────────────────────────────────────── */
.retro-theme-picker {
  position: absolute;
  background: var(--face);
  border-top: 1px solid var(--highlight);
  border-left: 1px solid var(--highlight);
  border-right: 1px solid var(--dark-shadow);
  border-bottom: 1px solid var(--dark-shadow);
  box-shadow:
    inset 1px 1px 0 var(--face-light),
    inset -1px -1px 0 var(--shadow),
    4px 4px 0 rgba(0, 0, 0, 0.43);
  padding: 4px;
  z-index: 1000;
  font-family: 'W95F', sans-serif;
  font-size: 14px;
}

.retro-theme-picker-item {
  padding: 3px 16px 3px 8px;
  cursor: pointer;
  color: var(--body-text);
}

.retro-theme-picker-item:hover {
  background: var(--title-active);
  color: var(--title-text);
}

.retro-theme-picker-item.active::before {
  content: '• ';
}