/* ===========================================================================
   games.css — Minesweeper, Paint and Solitaire.

   Every class here is prefixed (xpm- / ms- / pt- / sl-). That is deliberate:
   generic names like `.bar` and `.window` have already leaked onto Webamp's
   own markup twice and painted stray strips across it. Nothing in this file
   is allowed to match anything it does not own.

   The bevels are the classic 3px Win9x/XP-dialog borders, drawn with inset
   box-shadow rather than nested divs — one element, four shades, no markup.
   =========================================================================== */

/* ------------------------------------------------------------ app windows */
html:not([data-skin="mobile"]) .win-minesweeper,
html:not([data-skin="mobile"]) .win-paint,
html:not([data-skin="mobile"]) .win-solitaire {
  width: max-content;
}
/* Apps paint edge to edge — the 8px window-body padding is for data widgets.
   Also NOT scrollable: these size themselves, and an inner scrollbar on a
   Minesweeper board looks broken. Paint re-enables it on its canvas area. */
html:not([data-skin="mobile"]) .win-minesweeper > .win-body,
html:not([data-skin="mobile"]) .win-paint > .win-body,
html:not([data-skin="mobile"]) .win-solitaire > .win-body {
  padding: 0; margin: 0; overflow: hidden;
}

.xpm-app {
  background: #d4d0c8;
  font: 11px Tahoma, "MS Sans Serif", sans-serif;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  position: relative;
}

/* ------------------------------------------------------------------ bevels */
.xpm-out {                                     /* raised — buttons, panels */
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.xpm-in {                                      /* sunken — fields, boards */
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080,
              inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
.xpm-press {                                   /* a raised thing, pushed in */
  box-shadow: inset 1px 1px #808080, inset -1px -1px #dfdfdf;
}

/* -------------------------------------------------------------- menu bar */
.xpm-menubar {
  display: flex; align-items: stretch;
  background: #d4d0c8;
  padding: 1px 2px;
  flex: 0 0 auto;
  border-bottom: 1px solid #d4d0c8;
}
.xpm-menubar > button {
  font: 11px Tahoma, "MS Sans Serif", sans-serif;
  background: none; border: 0; padding: 3px 7px 4px;
  color: #000; cursor: default; border-radius: 0;
  min-width: 0; min-height: 0; box-shadow: none;
}
.xpm-menubar > button:focus { outline: none; }
.xpm-menubar > button[aria-expanded="true"] {
  background: #0a246a; color: #fff;
}
.xpm-menubar > button u { text-decoration: underline; }

.xpm-menu {
  position: absolute; z-index: 40;
  background: #d4d0c8; padding: 2px;
  min-width: 132px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px #808080, inset 2px 2px #dfdfdf,
              2px 2px 3px rgba(0, 0, 0, .35);
}
.xpm-menu button {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font: 11px Tahoma, "MS Sans Serif", sans-serif;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 3px 18px 3px 20px; text-align: left; color: #000;
  cursor: default; min-height: 0; position: relative;
}
.xpm-menu button:hover:not([disabled]) { background: #0a246a; color: #fff; }
.xpm-menu button[disabled] { color: #808080; text-shadow: 1px 1px #fff; }
.xpm-menu button[aria-checked="true"]::before {
  content: "✓"; position: absolute; left: 6px; font-size: 10px;
}
.xpm-menu button .xpm-acc { margin-left: auto; padding-left: 18px; opacity: .85; }
.xpm-menu hr {
  border: 0; height: 2px; margin: 3px 1px;
  box-shadow: inset 0 1px #808080, inset 0 -1px #fff;
}

/* -------------------------------------------------------------- dialogs
   Modal inside the app window rather than a second desktop window: an app
   dialog belongs to its app, and this way it cannot be dragged away from
   the thing it is asking about. */
.xpm-modal {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .08);
  display: flex; align-items: center; justify-content: center;
}
.xpm-dlg {
  background: #d4d0c8; min-width: 200px; max-width: 92%;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px #808080, inset 2px 2px #dfdfdf,
              3px 3px 8px rgba(0, 0, 0, .4);
  padding: 3px;
}
.xpm-dlg-title {
  background: linear-gradient(180deg, #0055ea 0%, #2787ec 8%, #0d5fd8 40%, #0a4fbd 88%, #0a4fbd 100%);
  color: #fff; font-weight: bold; padding: 3px 4px 4px 6px;
  display: flex; align-items: center; justify-content: space-between;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
}
.xpm-dlg-body { padding: 12px 14px 10px; }
.xpm-dlg-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.xpm-dlg-foot { display: flex; gap: 6px; justify-content: center; padding: 4px 10px 10px; }
.xpm-btn {
  font: 11px Tahoma, "MS Sans Serif", sans-serif;
  background: #d4d0c8; color: #000; border: 0; border-radius: 0;
  padding: 4px 10px; min-width: 72px; cursor: default;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.xpm-btn:active { box-shadow: inset 1px 1px #808080, inset -1px -1px #dfdfdf; padding: 5px 9px 3px 11px; }
.xpm-btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.xpm-field {
  font: 11px Tahoma, "MS Sans Serif", sans-serif;
  background: #fff; border: 0; padding: 3px 4px; border-radius: 0;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080,
              inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
.xpm-table { border-collapse: collapse; width: 100%; }
.xpm-table td { padding: 2px 10px 2px 0; white-space: nowrap; }

/* ------------------------------------------------------------ status bar */
.xpm-status {
  display: flex; gap: 2px; flex: 0 0 auto; padding: 2px;
  background: #d4d0c8;
}
.xpm-status span {
  padding: 2px 6px; min-width: 60px;
  box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080;
}
.xpm-status span.grow { flex: 1; }

/* ===========================================================================
   MINESWEEPER
   =========================================================================== */
.ms-wrap { padding: 6px; background: #d4d0c8; }
.ms-frame { padding: 6px; background: #d4d0c8; }

.ms-panel {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 5px; margin-bottom: 6px; background: #d4d0c8;
}
.ms-led {
  display: flex; gap: 1px; background: #000; padding: 1px;
  box-shadow: inset 1px 1px #808080, inset -1px -1px #fff;
}
.ms-led svg { display: block; width: 13px; height: 23px; }

.ms-face {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 0;
  background: #d4d0c8; cursor: default; min-width: 0; min-height: 0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  display: grid; place-items: center;
}
.ms-face:active, .ms-face.down {
  box-shadow: inset 1px 1px #808080, inset -1px -1px #dfdfdf;
}
.ms-face svg { display: block; width: 17px; height: 17px; }

.ms-grid {
  display: grid; background: #bdbdbd; padding: 3px;
  line-height: 0; cursor: default;
}
.ms-cell {
  width: 16px; height: 16px; box-sizing: border-box;
  background: #bdbdbd;
  font: bold 12px/16px Tahoma, "MS Sans Serif", sans-serif;
  text-align: center; letter-spacing: 0;
  box-shadow: inset -2px -2px #7b7b7b, inset 2px 2px #fff;
}
/* A revealed cell is FLAT with a single dark hairline top and left — that
   hairline is the whole reason the board reads as a grid rather than a blob. */
.ms-cell.open {
  box-shadow: none;
  border-top: 1px solid #7b7b7b;
  border-left: 1px solid #7b7b7b;
}
.ms-cell.down { box-shadow: none; border-top: 1px solid #7b7b7b; border-left: 1px solid #7b7b7b; }
.ms-cell svg { display: block; width: 16px; height: 16px; margin: -1px 0 0 -1px; }
.ms-cell.open svg { margin: -1px 0 0 -1px; }
.ms-cell.boom { background: #f00; }

/* The canonical number colours. Getting these wrong is the single most
   noticeable way a clone stops looking like the real thing. */
.ms-n1 { color: #0000ff; }
.ms-n2 { color: #008000; }
.ms-n3 { color: #ff0000; }
.ms-n4 { color: #000080; }
.ms-n5 { color: #800000; }
.ms-n6 { color: #008080; }
.ms-n7 { color: #000000; }
.ms-n8 { color: #808080; }

.ms-best td:first-child { padding-right: 20px; }

/* ===========================================================================
   PAINT
   =========================================================================== */
.pt-main { display: flex; flex: 1; min-height: 0; }
.pt-left { display: flex; flex-direction: column; flex: 0 0 auto; padding: 2px 1px; }

.pt-tools {
  display: grid; grid-template-columns: repeat(2, 25px); gap: 0;
  padding: 2px; background: #d4d0c8; width: max-content;
}
.pt-tool {
  width: 25px; height: 24px; padding: 0; border: 0; border-radius: 0;
  background: #d4d0c8; cursor: default; min-width: 0; min-height: 0;
  display: grid; place-items: center;
}
.pt-tool svg { display: block; width: 16px; height: 16px; }
.pt-tool:hover:not([disabled]) {
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.pt-tool[aria-pressed="true"] {
  box-shadow: inset 1px 1px #808080, inset -1px -1px #dfdfdf;
  background: #efefef;
}
.pt-tool[disabled] { opacity: .45; }

/* The options box under the toolbar. In real Paint it is empty for some
   tools — an empty sunken rectangle, not a collapsed one, so the toolbar
   never changes height as you switch tools. */
.pt-opts {
  margin-top: 4px; width: 52px; height: 68px;
  background: #d4d0c8; padding: 3px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
}
.pt-opt {
  background: #d4d0c8; border: 0; border-radius: 0; padding: 0;
  cursor: default; min-width: 0; min-height: 0;
  display: grid; place-items: center;
}
.pt-opt[aria-pressed="true"] { background: #0a246a; }
.pt-opt svg { display: block; }

.pt-canvas-area {
  flex: 1; min-width: 0; min-height: 0; overflow: auto;
  background: #808080; padding: 4px;
  box-shadow: inset 1px 1px #808080, inset -1px -1px #dfdfdf;
}
.pt-canvas-host { position: relative; width: max-content; padding-right: 6px; padding-bottom: 6px; }
/* ⚠️ The white background and the frame belong to the IMAGE canvas ONLY.
   This rule used to be `.pt-canvas-host canvas`, which also matched the
   preview overlay stacked on top of it — an OPAQUE WHITE SHEET over the
   picture. Everything drawn was hidden the instant it left the overlay, so
   pencil and brush appeared to do nothing at all and a shape "vanished" the
   moment it was committed on mouse-up. The pixels were always there; they
   were simply behind a white rectangle. Never style both canvases together. */
.pt-canvas-host canvas.pt-base {
  display: block; background: #fff; cursor: crosshair;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080,
              0 0 0 1px #000;
  image-rendering: pixelated;
}
.pt-canvas-host canvas.pt-ov {
  display: block; background: transparent; box-shadow: none;
  cursor: crosshair; image-rendering: pixelated;
}
/* The three sizing handles down the right and bottom edges. Decorative here
   (the canvas size is set from Image > Attributes) but their absence is
   immediately obvious to anyone who used Paint. */
.pt-handle { position: absolute; width: 5px; height: 5px; background: #fff; box-shadow: 0 0 0 1px #000; }

.pt-palette-bar { display: flex; align-items: center; gap: 6px; padding: 3px 4px; flex: 0 0 auto; }
.pt-current {
  position: relative; width: 32px; height: 30px; flex: 0 0 auto;
  background: #d4d0c8; padding: 2px;
}
.pt-current i {
  position: absolute; width: 14px; height: 14px; display: block;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080,
              inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
.pt-current i.fg { left: 4px; top: 3px; z-index: 2; }
.pt-current i.bg { left: 14px; top: 13px; }
.pt-palette { display: grid; grid-template-columns: repeat(14, 16px); grid-auto-rows: 15px; gap: 1px; padding: 2px; }
.pt-sw {
  width: 16px; height: 15px; padding: 0; border: 0; border-radius: 0;
  cursor: default; min-width: 0; min-height: 0;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080,
              inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

/* ===========================================================================
   SOLITAIRE
   =========================================================================== */
.sl-felt {
  flex: 1; min-height: 0; position: relative;
  background: #008000; overflow: hidden;
}
.sl-card, .sl-slot {
  position: absolute; width: 71px; height: 96px; border-radius: 5px;
}
.sl-slot {
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .06);
}
.sl-slot.foundation { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.sl-card {
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  border: 1px solid #000; overflow: hidden; cursor: default;
}
.sl-card svg { display: block; width: 100%; height: 100%; }
.sl-card.drag { box-shadow: 2px 4px 8px rgba(0, 0, 0, .5); }
.sl-card.hint { outline: 2px solid #ff0; outline-offset: -2px; }

/* The flight layer for the win cascade — outside the normal card flow so a
   bouncing card can be drawn over everything without disturbing the table. */
.sl-fly { position: absolute; inset: 0; pointer-events: none; z-index: 500; overflow: hidden; }

.sl-toast {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  z-index: 600;
}