/* Win98 teal desktop — spec §4.1 + §4.4 (mobile touch/safe-area) */
html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background: #008080;
  font-family: 'Pixelated MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif;
  font-size: 12px;
  color: black;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

/* Keyboard focus — explicit Win98-style dotted outline on interactive elements.
   Default browser ring is too modern for the frame. */
.start-button:focus-visible,
.start-item:focus-visible,
.desktop-icon:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

/* ============================================================
   Win98 desktop chrome — spec §4.1, §4.4 (mobile hides chrome)
   ============================================================ */

/* Chrome container — mobile-hide gate.
   `display: contents` makes the wrapper transparent to layout (children hoist
   up to body). Lets us toggle all chrome (icons / taskbar / menu) with one
   media query rather than hiding each element individually. */
.desktop-chrome { display: contents; }

@media (max-width: 768px) {
  .desktop-chrome { display: none !important; }
}

/* Desktop icons — top-left stack */
.desktop-icons {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.desktop-icon {
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: white;
  font-size: 11px;
  padding: 4px;
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  /* Reset both user-agent button chrome AND 98.css's inherited bevel.
     `appearance: none` kills the UA box-ring; `box-shadow: none` kills
     98.css's four inset shadows that draw the raised-button frame on every
     <button>. `min-width`/`min-height` override 98.css's button minimums
     (75px wide / 23px tall) so the icon shrinks to its content. Without
     these the desktop icons render with a Win98 button frame around each
     one — NOT the flat label-under-icon look. This reset is load-bearing;
     it was missing on v0.2 port and had to be reapplied (see b19fd9f in
     the archive/v0.1 history). */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  margin: 0;
  font-family: inherit;
}

.desktop-icon img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  margin-bottom: 4px;
}

.desktop-icon.selected span,
.desktop-icon:hover span {
  background: #000080;
  outline: 1px dotted white;
}

/* Taskbar */
.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  display: flex;
  align-items: center;
  padding: 2px;
  z-index: 1000;
  box-shadow: inset 0 1px 0 #dfdfdf;
  padding-bottom: env(safe-area-inset-bottom);
}

.start-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  font-weight: bold;
  font-size: 11px;
  cursor: pointer;
  height: 22px;
  font-family: inherit;
}

.start-button:active,
.start-button.open {
  border-color: #808080 #ffffff #ffffff #808080;
}

.start-button img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.system-tray {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px inset #808080;
  font-size: 11px;
  height: 22px;
}

.clock {
  font-family: 'Pixelated MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
}

/* Start menu — spec §4.4 */
.start-menu {
  position: fixed;
  bottom: 28px;
  left: 2px;
  width: 200px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  z-index: 1001;
  padding: 2px;
}

.start-menu[hidden] { display: none !important; }

.start-menu-items { display: flex; flex-direction: column; }

.start-item {
  background: #c0c0c0;
  border: none;
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}

.start-item:hover {
  background: #000080;
  color: white;
}

.start-menu hr {
  border: none;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
  margin: 2px 0;
}

/* About Ink dialog — minimal typography on Win98 body color */
.about-ink {
  height: 100%;
  background: #c0c0c0;
  padding: 14px 18px;
  font-family: 'Pixelated MS Sans Serif', 'VT323', monospace;
  font-size: 12px;
  color: #000;
  overflow-y: auto;
}
.about-ink .about-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 2px;
  letter-spacing: 0.04em;
}
.about-ink .about-sub {
  margin: 0 0 10px;
  font-style: italic;
  color: #333;
}
.about-ink hr {
  border: 0;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
  margin: 10px 0;
}
.about-ink .about-line { margin: 2px 0; }
.about-ink .about-heading { margin: 4px 0 6px; font-weight: bold; }
.about-ink .about-credit {
  margin: 1px 0;
  font-size: 11px;
  color: #222;
}
.about-ink a, .about-ink a:visited { color: #000080; }

/* Buy window (Money Printer) */
.buy { padding: 12px; display: flex; flex-direction: column; gap: 10px; font-family: 'Pixelated MS Sans Serif', Tahoma, sans-serif; font-size: 11px; height: 100%; box-sizing: border-box; background: #c0c0c0; }
.buy-row { display: flex; align-items: center; gap: 8px; }
.buy-contract { flex: 1; font-family: 'Lucida Console', Consolas, monospace; font-size: 11px; padding: 3px 6px; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy-row button { font: inherit; padding: 3px 12px; border: 2px solid; border-color: #fff #808080 #808080 #fff; background: #c0c0c0; cursor: pointer; min-width: 72px; }
.buy-row button:active { border-color: #808080 #fff #fff #808080; }
.buy-status { font-size: 11px; color: #505050; min-height: 14px; }

/* Internet Explorer window */
.ie { display: flex; flex-direction: column; height: 100%; background: #c0c0c0; font-family: 'Pixelated MS Sans Serif', Tahoma, sans-serif; font-size: 11px; box-sizing: border-box; }
.ie-toolbar { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid #808080; }
.ie-tb-btn { font: inherit; padding: 3px 10px; border: 2px solid; border-color: #fff #808080 #808080 #fff; background: #c0c0c0; color: #505050; min-width: 62px; }
.ie-address { display: flex; align-items: center; gap: 6px; padding: 6px; border-bottom: 1px solid #808080; }
.ie-address-label { font-weight: 700; }
.ie-address-input { flex: 1; font-family: 'Lucida Console', Consolas, monospace; font-size: 12px; padding: 2px 4px; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.ie-go { font: inherit; padding: 2px 14px; border: 2px solid; border-color: #fff #808080 #808080 #fff; background: #c0c0c0; cursor: pointer; }
.ie-go:active { border-color: #808080 #fff #fff #808080; }
.ie-content { flex: 1; padding: 28px 24px; background: #fff; color: #000; overflow: auto; }
.ie-home-title { font-family: Georgia, 'Times New Roman', serif; font-size: 28px; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px; }
.ie-home-body { font-size: 12px; line-height: 1.45; margin-bottom: 6px; color: #303030; }
.ie-status { padding: 3px 8px; border-top: 1px solid #808080; background: #c0c0c0; color: #404040; font-size: 10px; }