/* The accessory programs: Minesweeper, Paint, Media Player and Pinball.
 *
 * Everything here is namespaced (.xpmenu-, .ms-, .pt-, .wmp-, .pb-) because it
 * lives inside windows drawn by xp.css and must not reach into them. There are
 * no inline styles anywhere in these programs: the page ships
 * `style-src 'self'` with no unsafe-inline, so a style attribute is blocked.
 */

/* --- classic menu bar ---------------------------------------------------- */

.xpmenu-bar {
  display: flex;
  align-items: stretch;
  height: 20px;
  flex: 0 0 20px;
  padding: 0 1px;
  background: #ece9d8;
  border-bottom: 1px solid #aca899;
  font: 11px Tahoma, "Segoe UI", sans-serif;
  user-select: none;
}
.xpmenu-title { display: flex; align-items: center; padding: 0 8px; color: #000; cursor: default; }
.xpmenu-title:hover, .xpmenu-title.open { background: #316ac5; color: #fff; }

.xpmenu-drop {
  position: fixed;
  z-index: 4000;
  min-width: 168px;
  padding: 2px;
  background: #ece9d8;
  border: 1px solid;
  border-color: #fff #716f64 #716f64 #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .35);
  font: 11px Tahoma, "Segoe UI", sans-serif;
  user-select: none;
}
.xpmenu-item {
  display: flex;
  align-items: center;
  height: 19px;
  padding: 0 16px 0 22px;
  position: relative;
  white-space: nowrap;
  color: #000;
  cursor: default;
}
.xpmenu-item:hover { background: #316ac5; color: #fff; }
.xpmenu-item.disabled, .xpmenu-item.disabled:hover { color: #aca899; background: transparent; }
.xpmenu-item.checked::before { content: "\2713"; position: absolute; left: 7px; font-weight: 700; }
.xpmenu-accel { margin-left: auto; padding-left: 26px; }
.xpmenu-sep {
  height: 0;
  margin: 3px 1px;
  border-top: 1px solid #aca899;
  border-bottom: 1px solid #fff;
}

/* --- Minesweeper --------------------------------------------------------- */

.ms-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ece9d8;
  font: 11px Tahoma, "Segoe UI", sans-serif;
}
.ms-outer {
  flex: 1;
  overflow: auto;
  padding: 6px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #c0c0c0;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #808080;
}
.ms-board { width: max-content; }
.ms-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  margin-bottom: 6px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #808080,
              inset -2px -2px 0 #fff, inset 2px 2px 0 #404040;
}
.ms-led {
  display: flex;
  padding: 1px;
  background: #000;
  box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #808080;
}
.ms-led svg { display: block; }
.ms-smiley {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 0;
  background: #c0c0c0;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #808080;
  cursor: default;
}
.ms-smiley:active { box-shadow: inset 1px 1px 0 #808080; }
.ms-smiley svg { display: block; pointer-events: none; }

.ms-fieldwrap {
  display: inline-block;
  padding: 3px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #808080,
              inset -2px -2px 0 #fff, inset 2px 2px 0 #404040;
}
.ms-field { display: grid; gap: 0; }
.ms-cell {
  width: 16px; height: 16px;
  position: relative;
  font: 700 12px/16px Tahoma, sans-serif;
  text-align: center;
  color: #000;
  background: #c0c0c0;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #808080;
}
.ms-cell.open, .ms-cell.down {
  box-shadow: none;
  border-left: 1px solid #808080;
  border-top: 1px solid #808080;
}
.ms-cell.boom { background: #ff0000; }
.ms-cell svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.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; }

.ms-formrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ms-formrow label { min-width: 60px; }
.ms-formrow input { width: 70px; }
.ms-nameprompt { margin: 10px 0 4px; }
.ms-nameinput { width: 100%; }

/* --- 3D Pinball ---------------------------------------------------------- */

.pb-root { display: flex; flex-direction: column; height: 100%; background: #000; }
.pb-game { flex: 1; display: flex; min-height: 0; }
.pb-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #04040e;
}
.pb-table { display: block; background: #04040e; }
.pb-deck {
  /* Allowed to shrink so a narrow window squeezes the deck before it squeezes
     the table out of existence. */
  flex: 0 1 186px;
  min-width: 116px;
  overflow: auto;
  padding: 10px;
  background: #0a0a18;
  border-left: 2px solid #1b1b38;
  color: #8fe3ff;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font: 11px Tahoma, "Segoe UI", sans-serif;
}
.pb-row { display: flex; gap: 16px; }
.pb-label {
  color: #4f7fa8; font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
}
.pb-score {
  font: 700 25px/1.1 "Courier New", monospace;
  color: #ffd24a; text-shadow: 0 0 9px rgba(255, 180, 40, .85); letter-spacing: 1px;
}
.pb-small {
  font: 14px/1.2 "Courier New", monospace;
  color: #7ef0ff; text-shadow: 0 0 7px rgba(90, 220, 255, .7);
}
.pb-rank { font-size: 12px; font-weight: 700; color: #ff9d3c; text-shadow: 0 0 8px rgba(255, 140, 40, .7); }
.pb-msg {
  min-height: 52px; font-size: 10.5px; line-height: 15px;
  color: #a8ffd0; text-shadow: 0 0 6px rgba(80, 255, 160, .5);
}
.pb-sep { height: 1px; background: #1e2a4a; }
.pb-lamps { display: flex; gap: 5px; flex-wrap: wrap; }
.pb-lamp { width: 13px; height: 13px; border-radius: 50%; background: #16233d; box-shadow: inset 0 0 3px #000; }
.pb-lamp.on { background: #ffcf3a; box-shadow: 0 0 8px #ffb400, inset 0 0 3px #a06a00; }
.pb-keys { margin-top: auto; font-size: 9.5px; color: #5f7fa0; line-height: 15px; }
.pb-keys b { color: #9fc8e8; }

/* --- Paint --------------------------------------------------------------- */

.pt-root { display: flex; flex-direction: column; height: 100%; background: #ece9d8;
  font: 11px Tahoma, "Segoe UI", sans-serif; }
.pt-body { flex: 1; display: flex; min-height: 0; }

.pt-toolbox { flex: 0 0 56px; padding: 2px; background: #ece9d8; overflow: auto; }
.pt-tools { display: grid; grid-template-columns: repeat(2, 25px); gap: 1px;
  justify-content: center; padding: 2px 0 4px; }
.pt-tool { width: 25px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: #ece9d8; cursor: default; }
.pt-tool:hover { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #716f64; }
.pt-tool.on { box-shadow: inset 1px 1px 0 #716f64, inset -1px -1px 0 #fff;
  background: repeating-conic-gradient(#fff 0 25%, #d8d4c4 0 50%) 0 0/4px 4px; }
.pt-tool svg { display: block; pointer-events: none; }
.pt-opts { min-height: 74px; margin-top: 2px; padding: 4px 2px; display: flex;
  flex-direction: column; align-items: center; gap: 3px;
  box-shadow: inset 1px 1px 0 #aca899, inset -1px -1px 0 #fff; }
.pt-opt { display: flex; align-items: center; justify-content: center; background: #ece9d8; cursor: default; }
.pt-opt:hover { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #716f64; }
.pt-opt.on { box-shadow: inset 1px 1px 0 #716f64, inset -1px -1px 0 #fff; background: #d8d4c4; }
.pt-optgrid2 { display: grid; grid-template-columns: repeat(2, 24px); gap: 2px; }
.pt-optgrid3 { display: grid; grid-template-columns: repeat(3, 18px); gap: 1px; }
.pt-optrow { display: flex; gap: 2px; }

.pt-workwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-work { flex: 1; overflow: auto; background: #808080; position: relative;
  box-shadow: inset 1px 1px 0 #716f64, inset 2px 2px 0 #aca899; }
.pt-host { position: absolute; left: 5px; top: 5px; }
.pt-board, .pt-overlay { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.pt-board { background: #fff; box-shadow: 0 0 0 1px #000; }
.pt-grid, .pt-ants { position: absolute; left: 0; top: 0; pointer-events: none; display: none; }
.pt-grid.on { display: block;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 1px, transparent 1px 100%),
                    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 100%); }
.pt-ants.on { display: block;
  background-image: repeating-linear-gradient(90deg,#000 0 3px,#fff 3px 6px),
                    repeating-linear-gradient(90deg,#000 0 3px,#fff 3px 6px),
                    repeating-linear-gradient(0deg,#000 0 3px,#fff 3px 6px),
                    repeating-linear-gradient(0deg,#000 0 3px,#fff 3px 6px);
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat; animation: pt-ants .6s linear infinite; }
@keyframes pt-ants { to { background-position: 6px 0, -6px 100%, 0 -6px, 100% 6px; } }
.pt-handle { position: absolute; width: 5px; height: 5px; background: #fff; box-shadow: 0 0 0 1px #000; z-index: 6; }
.pt-handle.e { cursor: e-resize; } .pt-handle.s { cursor: s-resize; } .pt-handle.se { cursor: se-resize; }
.pt-textbox { position: absolute; z-index: 20; display: none; background: transparent; border: 0;
  outline: 0; resize: none; overflow: hidden; padding: 0; margin: 0; line-height: 1.2;
  white-space: pre; font-family: Tahoma, sans-serif; }
.pt-textbox.on { display: block; }

.pt-colorbox { display: flex; align-items: center; gap: 6px; padding: 3px 4px; background: #ece9d8; }
.pt-cur { position: relative; width: 32px; height: 32px; flex: 0 0 32px; }
.pt-sw { position: absolute; width: 18px; height: 18px;
  box-shadow: inset 1px 1px 0 #aca899, inset -1px -1px 0 #fff; }
.pt-bg { right: 0; bottom: 0; }
.pt-fg { left: 0; top: 0; z-index: 2; }
.pt-palette { display: grid; grid-template-columns: repeat(14, 16px);
  grid-template-rows: repeat(2, 16px); gap: 1px; }
.pt-swatch { width: 16px; height: 16px; box-shadow: inset 1px 1px 0 #aca899, inset -1px -1px 0 #fff;
  cursor: default; }
.pt-swatch > i { display: block; width: 100%; height: 100%; }

.pt-formrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.pt-formrow label { min-width: 104px; }
.pt-radio { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.pt-cc { display: flex; gap: 10px; align-items: flex-start; }
.pt-ccfield { cursor: crosshair; box-shadow: inset 1px 1px 0 #aca899, inset -1px -1px 0 #fff; }
.pt-cclum { cursor: ns-resize; box-shadow: inset 1px 1px 0 #aca899, inset -1px -1px 0 #fff; }
.pt-ccside { display: flex; flex-direction: column; gap: 5px; width: 118px; }
.pt-ccpreview { width: 64px; height: 40px; box-shadow: inset 1px 1px 0 #aca899, inset -1px -1px 0 #fff; }
.pt-ccrow { display: flex; align-items: center; gap: 6px; }
.pt-ccrow label { min-width: 42px; }
.pt-ccnum { width: 56px; }

/* --- Windows Media Player ------------------------------------------------ */

.wmp-root { display: flex; flex-direction: column; height: 100%; background: #dbe8fb;
  font: 11px Tahoma, "Segoe UI", sans-serif; }
.wmp-body { flex: 1; display: flex; min-height: 0; padding: 3px 3px 0; gap: 3px; }
.wmp-features { flex: 0 0 116px; display: flex; flex-direction: column; padding: 4px 3px; gap: 2px;
  border: 1px solid #0e2f70; border-radius: 4px;
  background: linear-gradient(180deg,#2f6fd4,#1f56b6 22%,#17419a 70%,#123680); }
.wmp-fbtn { display: flex; align-items: center; height: 25px; padding: 0 6px; border-radius: 3px;
  color: #dbe8fc; font-size: 10.5px; line-height: 12px; border: 1px solid transparent;
  text-shadow: 0 1px 1px rgba(0,0,0,.45); cursor: default; }
.wmp-fbtn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35); color: #fff; }
.wmp-fbtn.on { color: #fff; font-weight: 700; border-color: #b45f06;
  background: linear-gradient(180deg,#ffb64a,#f7962a 45%,#e07d13 55%,#ffb040);
  text-shadow: 0 1px 1px rgba(120,60,0,.6); }
.wmp-main { flex: 1; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid #0e2f70; border-radius: 4px; overflow: hidden; background: #000; }
.wmp-hdr { height: 22px; flex: 0 0 22px; display: flex; align-items: center; padding: 0 6px;
  background: linear-gradient(180deg,#4c8ee6,#2a68cd 45%,#1e56b8 55%,#3a7cdb);
  color: #fff; font-weight: 700; text-shadow: 0 1px 1px rgba(0,0,0,.5); border-bottom: 1px solid #0e2f70; }
.wmp-screen { flex: 1; display: flex; min-height: 0; position: relative; }
.wmp-stage { flex: 1; min-width: 0; position: relative; background: #000; overflow: hidden; }
.wmp-viz { display: block; width: 100%; height: 100%; }
.wmp-playlist { flex: 0 0 190px; display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(180deg,#1d3f7d,#16305f); border-left: 1px solid #0e2f70; color: #dce8fb; }
.wmp-playlist.hidden { display: none; }
.wmp-plhdr { height: 21px; display: flex; align-items: center; padding: 0 5px; color: #fff;
  font-weight: 700; text-shadow: 0 1px 1px rgba(0,0,0,.5);
  background: linear-gradient(180deg,#3a7cdb,#1e56b8); border-bottom: 1px solid #0e2f70; }
.wmp-pllist { flex: 1; overflow: auto; padding: 2px 0; }
.wmp-plrow { display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 4px; line-height: 14px;
  cursor: default; }
.wmp-plrow:hover { background: rgba(255,255,255,.1); }
.wmp-plrow.playing { background: linear-gradient(180deg,#ffb64a,#e07d13); color: #241200; font-weight: 700; }
.wmp-idx { width: 12px; flex: 0 0 12px; text-align: center; color: #8fb0e0; font-size: 10px; }
.wmp-plrow.playing .wmp-idx, .wmp-plrow.playing .wmp-du { color: #4a2a00; }
.wmp-ti { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wmp-du { color: #9ab8e6; font-size: 10px; }
.wmp-plfoot { padding: 4px 6px; border-top: 1px solid #0e2f70; font-size: 10px; color: #a9c6ee;
  display: flex; justify-content: space-between; background: rgba(0,0,0,.2); }

.wmp-alt { position: absolute; inset: 0; display: none; background: #ece9d8; color: #000; overflow: auto; }
.wmp-alt.on { display: block; }
.wmp-pad { padding: 16px; line-height: 17px; }
.wmp-lib { display: flex; height: 100%; }
.wmp-tree { flex: 0 0 150px; background: #fff; border-right: 1px solid #a5b6d0; padding: 4px 0; }
.wmp-node { padding: 2px 8px; white-space: nowrap; }
.wmp-node.sel { background: #316ac5; color: #fff; }
.wmp-list { flex: 1; background: #fff; overflow: auto; min-width: 0; }
.wmp-lvhead { display: flex; background: linear-gradient(180deg,#fdfdfd,#e8ecf3);
  border-bottom: 1px solid #9fb0c8; position: sticky; top: 0; }
.wmp-lvhead div { padding: 3px 6px; border-right: 1px solid #cfd8e6; }
.wmp-lvrow { display: flex; border-bottom: 1px solid #f0f2f6; }
.wmp-lvrow div { padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wmp-lvrow:nth-child(even) { background: #f6f8fc; }
.wmp-list .c-n { flex: 0 0 26px; text-align: right; color: #666; }
.wmp-list .c-t { flex: 1; min-width: 0; }
.wmp-list .c-a { flex: 0 0 110px; }
.wmp-list .c-d { flex: 0 0 50px; text-align: right; }

.wmp-controls { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center;
  padding: 4px 10px 5px; gap: 5px;
  background: linear-gradient(180deg,#eaf1fc,#cfdef4 30%,#b3c8e8 70%,#9fb8de);
  border-top: 1px solid #7f9fcd; box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
.wmp-seekrow { display: flex; align-items: center; gap: 8px; }
.wmp-time { font-size: 10px; color: #143257; width: 34px; }
.wmp-time.r { text-align: right; }
.wmp-seek, .wmp-vol { position: relative; height: 12px; display: flex; align-items: center; cursor: default; }
.wmp-seek { flex: 1; }
.wmp-vol { width: 74px; margin-left: 4px; }
.wmp-trough { position: absolute; left: 0; right: 0; height: 6px; border-radius: 3px;
  background: linear-gradient(180deg,#6e86a8,#b7c8e0);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.7); }
.wmp-fill { position: absolute; left: 0; height: 6px; border-radius: 3px; width: 0;
  background: linear-gradient(180deg,#a9e0ff,#2f9de8 45%,#0d6fc0 55%,#58bdf5); }
.wmp-thumb { position: absolute; width: 9px; height: 13px; border-radius: 2px; margin-left: -4px;
  background: linear-gradient(180deg,#fff,#e6ecf6 45%,#c3d0e4 55%,#f2f5fa);
  border: 1px solid #3d5f92; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.wmp-ctlrow { display: flex; align-items: center; gap: 7px; }
.wmp-rbtn { width: 21px; height: 21px; border-radius: 50%; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: default;
  background: radial-gradient(circle at 50% 28%, #fff 0%, #e4ecf7 38%, #b6c7de 66%, #8199bb 88%, #62789b 100%);
  box-shadow: 0 0 0 1px #3f5c86, 0 1px 2px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.85); }
.wmp-rbtn:hover { filter: brightness(1.12); }
.wmp-rbtn:active { filter: brightness(.86); }
.wmp-rbtn.big { width: 40px; height: 40px;
  background: radial-gradient(circle at 50% 26%, #f4fbff 0%, #b7e2fb 22%, #56b1ef 48%, #1f7ad2 70%, #0d4e94 88%, #08376b 100%);
  box-shadow: 0 0 0 1px #062c56, 0 0 0 3px rgba(255,255,255,.55), 0 0 0 4px rgba(20,60,120,.5),
              0 2px 5px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.8); }
.wmp-rbtn svg { display: block; pointer-events: none; }

/* Text toolbar: only on screen while the Text tool is selected, which is how
   Paint did it — the bar appeared with the tool rather than living permanently. */
.pt-textbar { display: none; align-items: center; gap: 4px; padding: 3px 5px;
  background: #ece9d8; border-bottom: 1px solid #aca899; }
.pt-textbar.on { display: flex; }
.pt-font { width: 132px; }
.pt-size { width: 56px; }
.pt-tbtn { width: 22px; height: 21px; display: flex; align-items: center; justify-content: center;
  background: #ece9d8; cursor: default; }
.pt-tbtn.b { font-weight: 700; }
.pt-tbtn.i { font-style: italic; }
.pt-tbtn.u { text-decoration: underline; }
.pt-tbtn:hover { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #716f64; }
.pt-tbtn.on { box-shadow: inset 1px 1px 0 #716f64, inset -1px -1px 0 #fff; background: #d8d4c4; }