/* ============================================================
   DESKTOP-OS — windows.css
   Window chrome used by the Window Manager for every app window.
   ============================================================ */

.os-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  min-height: 140px;
  background: var(--win-face);
  border-top: 2px solid var(--win-light);
  border-left: 2px solid var(--win-light);
  border-bottom: 2px solid var(--win-shadow);
  border-right: 2px solid var(--win-shadow);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.os-window:focus { outline: none; } /* focus shown via titlebar color instead */

.os-window.maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: calc(100% - var(--taskbar-h)) !important;
  box-shadow: none;
}

/* ---------- Titlebar ---------- */
.titlebar {
  height: 24px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 3px;
  background: var(--title-gray);   /* unfocused */
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  cursor: move;
  user-select: none;
  touch-action: none;              /* enables pointer-event dragging on touch */
}

.os-window.focused > .titlebar { background: var(--title-blue); }

.titlebar .title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 2px;
}

.tb-btn {
  flex: 0 0 auto;
  width: 18px; height: 16px;
  line-height: 14px;
  padding: 0;
  font-size: 11px;
  font-weight: bold;
  font-family: Tahoma, sans-serif;
  text-align: center;
  color: #000;
  background: var(--win-face);
  border-top: 1px solid var(--win-light);
  border-left: 1px solid var(--win-light);
  border-bottom: 1px solid var(--win-shadow);
  border-right: 1px solid var(--win-shadow);
  cursor: pointer;
}

.tb-btn:active {
  border-top-color: var(--win-shadow);
  border-left-color: var(--win-shadow);
  border-bottom-color: var(--win-light);
  border-right-color: var(--win-light);
}

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

/* ---------- Window body ---------- */
.window-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.window-body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* SkiClone body: the game canvas fills it edge to edge */
.ski-body { background: #ffffff; }
.ski-body canvas { display: block; }


/* ============================================================
   MINESWEEPER — classic Win95 chrome
   ============================================================ */
.ms-root {
  padding: 6px;
  background: #c0c0c0;
  height: 100%;
  box-sizing: border-box;
  font-family: Tahoma, 'MS Sans Serif', sans-serif;
  user-select: none;
}

.ms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 5px;
  margin-bottom: 6px;
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}

.ms-led {
  min-width: 40px;
  padding: 1px 3px;
  background: #000;
  color: #ff0000;
  font-family: 'Courier New', monospace;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
  border: 1px solid #808080;
}

.ms-face {
  width: 26px; height: 26px;
  font-size: 15px;
  line-height: 1;
  background: #c0c0c0;
  cursor: pointer;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #808080;
  border-right: 2px solid #808080;
}
.ms-face:active {
  border-top-color: #808080; border-left-color: #808080;
  border-bottom-color: #fff; border-right-color: #fff;
}

.ms-grid {
  display: grid;
  gap: 0;
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  width: max-content;
  margin: 0 auto;
}

.ms-cell {
  width: 20px; height: 20px;
  padding: 0;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  background: #c0c0c0;
  cursor: pointer;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #808080;
  border-right: 2px solid #808080;
}

.ms-cell.open {
  border: 1px solid #a0a0a0;
  background: #c0c0c0;
  cursor: default;
}
.ms-cell.boom { background: #ff0000; }
.ms-cell.flag { color: #ff0000; }

/* the classic number colours */
.ms-cell.n1 { color: #0000ff; }
.ms-cell.n2 { color: #008000; }
.ms-cell.n3 { color: #ff0000; }
.ms-cell.n4 { color: #000080; }
.ms-cell.n5 { color: #800000; }
.ms-cell.n6 { color: #008080; }
.ms-cell.n7 { color: #000000; }
.ms-cell.n8 { color: #808080; }

/* ============================================================
   DESKTOP PETS — the layer never eats clicks meant for icons
   ============================================================ */
.pets-layer {
  position: absolute;
  inset: 0;
  /* A <canvas> is a REPLACED element: inset:0 does NOT stretch it. Its
     display size comes from its width/height attributes, which we set to
     W x devicePixelRatio for sharpness. Without the two lines below, the
     canvas renders at DOUBLE size on any retina screen or phone, and the
     animals get drawn far below the fold — invisible. */
  width: 100%;
  height: 100%;
  z-index: 6;             /* above wallpaper + icons, below windows (100+) */
  pointer-events: none;
}