/* ═══════════════════════════════════════════════════════════
   M1NES — one line of mines, everyone blows together.
   DA v3: WINDOWS 7 AERO, done properly.
   Real anatomy: glass frames that reveal the wallpaper (the
   wallpaper is a fixed-attachment gradient, so a lightened
   fixed copy behind each frame IS the blur, for free), caption
   buttons hanging from the top edge, the img0 wallpaper glow,
   Explorer toolbars with orb buttons, command links, the black
   glass taskbar with a Start orb and a show-desktop sliver.
   The goofy stays: polite OS dialogs in front of disaster.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* the wallpaper: img0 spirit. deep azure, center glow, four
     faint color wisps around it, two light streaks. */
  --wp:
    radial-gradient(circle 300px at 38% 26%, rgba(255, 130, 40, 0.13), transparent 70%),
    radial-gradient(circle 300px at 62% 25%, rgba(120, 205, 60, 0.12), transparent 70%),
    radial-gradient(circle 340px at 35% 42%, rgba(0, 170, 245, 0.16), transparent 70%),
    radial-gradient(circle 340px at 65% 44%, rgba(255, 195, 0, 0.11), transparent 70%),
    radial-gradient(circle 520px at 50% 34%, rgba(224, 244, 255, 0.4), rgba(130, 196, 255, 0.15) 55%, transparent 75%),
    linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.05) 38%, transparent 46%),
    linear-gradient(100deg, transparent 55%, rgba(255, 255, 255, 0.04) 62%, transparent 70%),
    radial-gradient(ellipse 140% 105% at 50% 30%, #4795e0 0%, #2d76c4 38%, #175094 68%, #0a2c60 100%);
  /* the same geometry, lightened and washed: what the wallpaper
     looks like through frosted glass. */
  --wp-glass:
    linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16)),
    radial-gradient(circle 520px at 50% 34%, rgba(240, 250, 255, 0.5), rgba(180, 220, 255, 0.22) 55%, transparent 75%),
    radial-gradient(ellipse 140% 105% at 50% 30%, #aed2f4 0%, #8db9e7 38%, #6c9ad0 68%, #5480b4 100%);

  --ink: #1e1e1e;
  --dim: #5a5a5a;
  --blue: #0066cc;
  --instr: #003399;          /* Win7 "main instruction" blue */
  --frame-dark: rgba(6, 22, 42, 0.78);
  --client: #ffffff;
  --led: #ff3b2f;
  --flag: #d02a1e;

  /* the minesweeper number wheel */
  --n1: #2458d8;
  --n2: #1e8a2e;
  --n3: #d92b1f;
  --n4: #123c8c;

  --sys: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
.wallpaper {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--sys);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--wp);
  background-attachment: fixed;
  background-color: #1a5aa4;
  overflow-x: hidden;
  padding-bottom: 60px; /* the taskbar */
  -webkit-font-smoothing: antialiased;
}

::selection { background: #3399ff; color: #fff; }
img { max-width: 100%; }
a { color: var(--blue); }

::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #e3e3e3, #cdcdcd);
  border: 1px solid #b3b3b3;
  border-radius: 2px;
}

:is(a, button, input, [tabindex]):focus-visible {
  outline: 1px dotted #444;
  outline-offset: 1px;
}

/* ═══════════ AERO WINDOWS ═══════════
   .win = the glass frame. ::before paints the "blurred
   wallpaper" (fixed-attachment lightened copy), .titlebar and
   .win-body sit above it. Caption buttons hang from the top
   edge, like the real thing. */

.win {
  position: relative;
  border-radius: 7px;
  border: 1px solid var(--frame-dark);
  padding: 30px 8px 8px;
  box-shadow:
    0 2px 6px rgba(3, 12, 26, 0.3),
    0 10px 26px rgba(3, 12, 26, 0.32);
  isolation: isolate;
}
.win::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 6px;
  /* inactive: an extra white wash over the glass */
  background:
    linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.14)),
    var(--wp-glass);
  background-attachment: fixed;
}
/* the one active window (nearest viewport center, or hovered) */
.win.focused, .win:hover, .win:focus-within {
  box-shadow:
    0 3px 9px rgba(3, 12, 26, 0.42),
    0 16px 42px rgba(3, 12, 26, 0.5);
}
.win.focused::before, .win:hover::before, .win:focus-within::before {
  background: var(--wp-glass);
  background-attachment: fixed;
}
/* the inner light border, just inside the dark outline */
.win::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  pointer-events: none;
}

.titlebar {
  position: absolute;
  top: 1px; left: 1px; right: 1px;
  height: 29px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 118px 2px 9px;
  border-radius: 6px 6px 0 0;
  /* the aero sheen: a bright pass across the glass */
  background:
    linear-gradient(112deg, transparent 18%, rgba(255, 255, 255, 0.38) 26%, rgba(255, 255, 255, 0.07) 34%, transparent 40%),
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0) 100%);
  user-select: none;
  opacity: 0.72;
}
.win.focused .titlebar, .win:hover .titlebar, .win:focus-within .titlebar { opacity: 1; }
.t-icon { width: 16px; height: 16px; flex: none; }
.t-text {
  font-size: 12px;
  color: #3d4d5f;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.8),
    0 0 3px rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win.focused .t-text, .win:hover .t-text, .win:focus-within .t-text {
  color: #0b1b2e;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 5px rgba(255, 255, 255, 0.95),
    0 0 2px rgba(255, 255, 255, 0.9);
}

/* caption buttons: glued to the top edge, rounded only at the
   bottom, neutral glass at rest, red close on hover. */
.caps {
  position: absolute;
  top: -1px;
  right: 9px;
  display: flex;
  z-index: 2;
}
.cap {
  width: 29px;
  height: 19px;
  padding: 0;
  border: 1px solid rgba(9, 26, 48, 0.75);
  border-right-width: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.22) 45%, rgba(140, 170, 205, 0.18) 50%, rgba(200, 225, 250, 0.32));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 1px 0 0 rgba(255, 255, 255, 0.35);
  display: grid;
  place-items: center;
  cursor: default;
}
.cap:first-child { border-radius: 0 0 0 4px; }
.cap:last-child { border-right-width: 1px; border-radius: 0 0 4px 0; }
.cap svg { display: block; filter: drop-shadow(0 0 1px rgba(8, 28, 52, 0.9)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); }
.cap:first-child:not(.cap-close) svg { transform: translateY(2px); }
.cap:hover {
  background:
    radial-gradient(circle 14px at 50% 55%, rgba(165, 225, 255, 0.9), rgba(70, 150, 220, 0.4) 65%, transparent 100%),
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25) 45%, rgba(140, 170, 205, 0.2) 50%, rgba(200, 225, 250, 0.35));
}
.cap:active { box-shadow: inset 0 2px 5px rgba(10, 30, 55, 0.5); }
.cap-close { width: 49px; }
.caps .cap:nth-child(2):not(.cap-close) { width: 27px; }
.cap-close:hover {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 175, 125, 0.95), rgba(225, 70, 35, 0.9) 55%, rgba(150, 25, 10, 0.95) 100%),
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 200, 180, 0.3));
}
.cap-close:active {
  background:
    radial-gradient(circle at 50% 115%, rgba(255, 160, 110, 0.9), rgba(190, 60, 30, 0.9) 45%, rgba(120, 15, 5, 0.95) 90%);
}

/* the client area */
.win-body {
  position: relative;
  background: var(--client);
  border: 1px solid rgba(20, 45, 75, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  border-radius: 1px;
  padding: clamp(12px, 2vw, 18px);
}

/* window flow on the desktop */
.desk {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(20px, 3.4vw, 40px) clamp(10px, 3vw, 26px) 40px;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vh, 36px);
}
.w-narrow { max-width: 760px; width: 100%; margin: 0 auto; }

/* ═══════════ EXPLORER CHROME ═══════════ */
.expbar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: calc(clamp(16px, 2.6vw, 26px) * -1) calc(clamp(16px, 2.6vw, 26px) * -1) 18px;
  padding: 6px 10px;
  background: linear-gradient(#fdfeff, #eef4fb 50%, #e2ecf7 50%, #dbe7f5);
  border-bottom: 1px solid #b8c8da;
}
.nav-orb {
  width: 27px; height: 27px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #12457f;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 50% 80%, #79c2f0, #2a76c0 60%, #0f4d92 100%);
  box-shadow: 0 1px 2px rgba(10, 30, 60, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.nav-orb:hover { filter: brightness(1.12); }
.nav-orb:active { filter: brightness(0.88); }
.nav-orb svg { display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.nav-orb.is-off {
  border-color: #8a97a5;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 50% 80%, #cfd8e2, #9fabb8 60%, #7c8894 100%);
  cursor: default;
}
.nav-orb.is-off:hover, .nav-orb.is-off:active { filter: none; }
.crumbs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #a9bbcc;
  box-shadow: inset 0 1px 2px rgba(30, 60, 95, 0.1);
  border-radius: 2px;
  height: 26px;
  padding: 0 4px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}
.crumbs span {
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 2px;
}
.crumbs span:hover {
  background: linear-gradient(#eaf6fd, #bee6fd);
  border-color: #7da2ce;
  cursor: default;
}
.crumbs .sep { padding: 0 1px; color: #6a7c8e; font-size: 10px; }
.searchbox {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #a9bbcc;
  box-shadow: inset 0 1px 2px rgba(30, 60, 95, 0.1);
  border-radius: 2px;
  height: 26px;
  padding: 0 8px;
  width: 168px;
  flex: none;
}
.searchbox input {
  border: none;
  background: none;
  font-family: var(--sys);
  font-size: 12.5px;
  width: 100%;
  padding: 0;
  color: var(--ink);
}
.searchbox input::placeholder { color: #98a4b0; }
.searchbox input:focus { outline: none; }
.searchbox svg { flex: none; opacity: 0.55; }
@media (max-width: 700px) { .searchbox { display: none; } }
/* on the hero the nav band sits on the Aero glass, like real Explorer */
.hero-win .expbar {
  margin: 3px 0 7px;
  padding: 0 2px;
  background: none;
  border-bottom: none;
  position: relative;
  z-index: 1;
}
.hero-win .crumbs, .hero-win .searchbox {
  border-color: #64798f;
  box-shadow: none;
}

/* ═══════════ MENU BAR ═══════════ */
.menubar {
  display: flex;
  gap: 1px;
  padding: 2px 6px;
  background: #f0f0f0;
  border-bottom: 1px solid #e3e6e9;
  font-size: 12.5px;
  user-select: none;
}
.menubar button {
  font-family: var(--sys);
  font-size: 12.5px;
  color: var(--ink);
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 3px 9px 4px;
  cursor: default;
}
.menubar button:hover {
  background: linear-gradient(#eaf6fd, #bee6fd);
  border-color: #7da2ce;
}

/* ═══════════ BUTTONS: the real Win7 recipe ═══════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sys);
  font-size: 12.5px;
  font-weight: 400;
  color: #000;
  background: linear-gradient(#f2f2f2, #ebebeb 50%, #dddddd 50%, #cfcfcf);
  border: 1px solid #707070;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  padding: 3px 12px 4px;
  min-width: 75px;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover {
  background: linear-gradient(#eaf6fd, #d9f0fc 50%, #bee6fd 50%, #a7d9f5);
  border-color: #3c7fb1;
}
.btn:active {
  background: linear-gradient(#e5f4fc, #c4e5f6 50%, #98d1ef 50%, #68b3db);
  border-color: #2c628b;
  box-shadow: inset 0 1px 2px rgba(20, 60, 100, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.btn[disabled] { color: #838383; border-color: #aeb2b5; background: #f4f4f4; cursor: default; }
.btn .b-icon { width: 16px; height: 16px; }
.btn-big { font-size: 13.5px; padding: 6px 18px 7px; }
/* the default button breathes blue, like the real one */
.btn-default { position: relative; border-color: #3c7fb1; }
.btn-default::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 5px 2px rgba(64, 195, 247, 0.75), inset 0 0 1px 1px rgba(130, 220, 255, 0.55);
  opacity: 0;
  animation: defaultPulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes defaultPulse {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 1; }
}
.js-wallet.connected { font-family: var(--mono); font-size: 12px; text-transform: none; }

/* command links */
.cmdlinks { display: flex; flex-direction: column; align-items: stretch; gap: 2px; max-width: 400px; margin: 0 auto; }
.cmdlink {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  text-align: left;
  padding: 10px 14px 11px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  background: none;
  font-family: var(--sys);
}
.cmdlink:hover {
  background: linear-gradient(#fdfdfd, #eef7fc);
  border-color: #b8d8ea;
  box-shadow: 0 1px 2px rgba(20, 50, 90, 0.1);
}
.cmdlink:active { background: linear-gradient(#f2fafd, #dcf0fa); border-color: #8bc1de; }
.cmdlink .cl-arrow { flex: none; margin-top: 3px; }
.cmdlink b { display: block; font-size: 16px; font-weight: 400; color: var(--blue); margin-bottom: 1px; }
.cmdlink small { font-size: 12px; color: var(--blue); }

/* ═══════════ TYPE ═══════════ */
.win-body h2 {
  font-size: clamp(17px, 2.3vw, 21px);
  font-weight: 400;
  color: var(--instr);
  margin: 0 0 10px;
}
.win-body p { margin: 7px 0; line-height: 1.45; font-size: 12.5px; }
.win-body p b { font-weight: 700; }
.muted { color: var(--dim); }

/* group boxes: etched, quiet */
.group {
  border: 1px solid #d5dfe5;
  border-radius: 4px;
  padding: 14px 15px 13px;
  position: relative;
  margin-top: 10px;
  background: #fff;
}
.group > .g-title {
  position: absolute;
  top: -9px; left: 10px;
  background: #fff;
  padding: 0 6px;
  font-size: 13px;
  color: var(--instr);
}

.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rv.rv-in :is(.cols2, .cols3) > .group { animation: cardIn 0.34s ease-out both; }
.rv.rv-in :is(.cols2, .cols3) > .group:nth-child(2) { animation-delay: 90ms; }
.rv.rv-in :is(.cols2, .cols3) > .group:nth-child(3) { animation-delay: 180ms; }
.cols4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* move cards: task-pane items with the cyan hover */
.move {
  border: 1px solid #e3eaf0;
  border-radius: 4px;
  padding: 13px 14px 12px;
  background: #fff;
  transition: border-color 0.12s ease, background 0.12s ease,
    transform 0.16s ease, box-shadow 0.16s ease;
}
.rv.rv-in .move { animation: cardIn 0.34s ease-out both; }
.rv.rv-in .move:nth-child(2) { animation-delay: 80ms; }
.rv.rv-in .move:nth-child(3) { animation-delay: 160ms; }
.rv.rv-in .move:nth-child(4) { animation-delay: 240ms; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
}
.move:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(20, 50, 90, 0.14); }
.move:hover {
  background: linear-gradient(#fafdfe, #ebf3fb);
  border-color: #b8d6f0;
}
.move .m-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.move .m-num {
  font-size: 17px;
  font-weight: 700;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  border: 1px solid #6a94bd;
  background: linear-gradient(#e9f3fc, #cbe0f4 48%, #b0cdea 52%, #c7dcf1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.move .m-num.c1 { color: var(--n1); }
.move .m-num.c2 { color: var(--n2); }
.move .m-num.c3 { color: var(--n3); }
.move .m-num.c4 { color: var(--n4); }
.move .m-head b { font-size: 14px; }
.move p { margin: 0; font-size: 12.5px; line-height: 1.45; }

/* ═══════════ LISTVIEW (tables, kv rows) ═══════════ */
.lv {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 12.5px;
}
.lv th {
  font-weight: 400;
  color: #1e3c5a;
  text-align: left;
  padding: 5px 10px 6px;
  background: linear-gradient(#ffffff, #f6f8fa 50%, #f0f2f4 50%, #eceef0);
  border-bottom: 1px solid #d6dde4;
  border-right: 1px solid #e4e9ee;
}
.lv th:last-child { border-right: none; }
.lv td { padding: 5px 10px 6px; border-bottom: 1px solid #f0f3f6; }
.lv tr:last-child td { border-bottom: none; }
.lv tbody tr:hover td { background: linear-gradient(#fafdfe, #ebf3fb); }
.lv td.num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 8px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 12.5px;
}
.kv:hover { background: linear-gradient(#fafdfe, #ebf3fb); border-color: #d5e7f7; }
.kv span { color: var(--dim); }
.kv b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* progress bar: Win7 green, indeterminate sweep */
.progress {
  height: 16px;
  border: 1px solid #b2b8bd;
  border-radius: 3px;
  background: linear-gradient(#eef0f2, #e2e5e8);
  box-shadow: inset 0 1px 2px rgba(60, 70, 80, 0.2);
  overflow: hidden;
  position: relative;
}
.progress .p-fill {
  position: absolute;
  top: 0; bottom: 0;
  width: 30%;
  border-radius: 2px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.15) 45%, rgba(0, 0, 0, 0.08) 50%, rgba(255, 255, 255, 0.15)),
    #12b02a;
  animation: pSweep 2.6s linear infinite, pGlow 2.6s linear infinite;
}
@keyframes pGlow {
  50% { filter: brightness(1.18); }
}
@keyframes pSweep {
  0% { left: -32%; }
  100% { left: 102%; }
}

/* notepad */
.notepad .win-body { padding: 0; }
.notepad .np-text {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 14px 18px 16px;
}
.notepad .np-text p { font-size: 12.5px; margin: 9px 0; }
.ini-sec { color: #0a5bb5; }
.ini-key { color: #7a1f8a; }

/* ═══════════ THE GAME WINDOW ═══════════ */
.game-body { padding: 0 !important; }
.game-body .menubar {
  background: linear-gradient(#f7fbfe, #e9f2fa);
  border-bottom: 1px solid #cfdded;
}
.game-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  background: linear-gradient(#eaf3fc, #d7e7f7 55%, #cbdff3);
  border-bottom: 1px solid #b6c9dc;
}
.led-block { text-align: center; }
.led {
  display: inline-block;
  background:
    linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 42%),
    linear-gradient(#141d2b, #070d17 55%, #03060c);
  border: 1px solid #030a14;
  border-radius: 2px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.55);
  padding: 3px 9px 4px;
  font-family: var(--mono);
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 700;
  color: var(--led);
  text-shadow: 0 0 7px rgba(255, 60, 40, 0.7);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
  text-align: right;
  position: relative;
}
.led::before {
  content: attr(data-ghost);
  position: absolute;
  inset: 3px 9px 4px;
  color: rgba(255, 64, 44, 0.22);
  text-align: right;
  letter-spacing: 0.1em;
  z-index: 0;
  transform: scaleY(1.18);
  transform-origin: bottom;
}
.led span {
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: scaleY(1.18);
  transform-origin: bottom;
}
.led.flash { animation: ledFlash 0.24s ease-out; }
@keyframes ledFlash {
  35% { text-shadow: 0 0 14px rgba(255, 90, 60, 1), 0 0 5px rgba(255, 120, 80, 0.9); }
}
.led-label {
  display: block;
  font-size: 11px;
  color: #40608a;
  margin-top: 4px;
}

.smiley {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #365a80;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 50% 85%, #cfe4f6, #93b9dd 55%, #6d97c2 100%);
  box-shadow: 0 2px 6px rgba(10, 35, 70, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.85), inset 0 -4px 6px rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.smiley:hover { filter: brightness(1.06); }
.smiley:active { box-shadow: inset 0 3px 6px rgba(10, 35, 70, 0.45); }
.smiley:active canvas { transform: translate(1px, 1px); }
.smiley canvas { width: 36px; height: 36px; transition: transform 0.18s ease; }
.smiley:hover canvas { transform: rotate(-6deg) scale(1.05); }

.game-frame {
  position: relative;
  padding: 10px;
  background: linear-gradient(#cadcee, #b3cbe4);
  box-shadow: inset 0 1px 4px rgba(20, 50, 90, 0.25);
}
.game-frame::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid #86a7c9;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(20, 50, 90, 0.3), 0 1px 0 rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.game-frame canvas { display: block; width: 100%; height: auto; }

/* status bar: flat Win7 gray */
.statusbar {
  display: flex;
  align-items: center;
  background: #f0f0f0;
  border-top: 1px solid #d9d9d9;
  font-size: 12.5px;
  color: #3a3a3a;
  padding: 5px 12px 6px;
}
.statusbar .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.statusbar .cell:first-child { flex: 1; min-width: 0; }
.statusbar .cell + .cell {
  flex: none;
  border-left: 1px solid #dedede;
  margin-left: 12px;
  padding-left: 12px;
}
.statusbar b { font-weight: 700; }

/* ═══════════ HERO ═══════════ */
.hero-win .win-body { text-align: center; }
.wordmark {
  font-family: var(--sys);
  font-size: clamp(48px, 9.5vw, 92px);
  font-weight: 200;
  letter-spacing: 0.02em;
  margin: 6px 0 0;
  color: #17395e;
  line-height: 1.08;
}
.wordmark .one { color: var(--flag); font-weight: 400; }
.wm-l {
  display: inline-block;
  animation: wmIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.15) calc(var(--i) * 80ms + 0.12s) both;
}
.wm-l.one { animation: wmDrop 0.65s cubic-bezier(0.25, 1.4, 0.4, 1) calc(var(--i) * 80ms + 0.2s) both; }
@keyframes wmIn {
  from { opacity: 0; transform: translateY(-22px); }
}
@keyframes wmDrop {
  0% { opacity: 0; transform: translateY(-64px) scale(1.15); }
  60% { opacity: 1; transform: translateY(4px) scale(0.98); }
  100% { opacity: 1; transform: none; }
}
.tagline { font-size: clamp(14px, 2vw, 16.5px); color: var(--instr); margin: 6px 0 2px; }
.tagline b { font-weight: 700; }
.hero-win .lede {
  max-width: 62ch;
  margin: 12px auto 18px;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}
.hero-hint { margin: 14px 0 2px; font-size: 12.5px; color: var(--dim); }

/* the phrase */
.phrase-win .win-body {
  overflow: hidden;
  text-align: center;
  font-size: clamp(23px, 3.6vw, 33px);
  font-weight: 200;
  letter-spacing: 0.04em;
  color: #12457f;
  line-height: 1.55;
  padding: clamp(28px, 5vw, 48px);
}
.phrase-win .win-body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.55) 50%, transparent 64%);
  transform: translateX(-130%);
  animation: phraseShine 7.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes phraseShine {
  0%, 68% { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}

/* ═══════════ TASKBAR: black glass ═══════════ */
.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 0 2px;
  background: linear-gradient(rgba(110, 125, 145, 0.3), rgba(22, 30, 42, 0.82) 34%, rgba(4, 8, 14, 0.9));
  backdrop-filter: blur(12px) saturate(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
  border-top: 1px solid rgba(160, 200, 240, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.start {
  width: 46px; height: 46px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(10, 25, 45, 0.85);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 50% 110%, rgba(130, 205, 255, 0.8), rgba(130, 205, 255, 0) 55%),
    radial-gradient(circle at 50% 60%, #3f96e4, #1a5da8 62%, #0a3a72 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 2px 7px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.start img { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)); }
.start:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 12px rgba(120, 200, 255, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.5); }
.start:active { filter: brightness(0.85); }

.task-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  font-family: var(--sys);
  font-size: 13px;
  color: #f2f7fd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  padding: 0 13px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.task-btn img { width: 21px; height: 21px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.task-btn:hover {
  background:
    radial-gradient(circle 46px at var(--mx, 50%) 120%, rgba(150, 215, 255, 0.55), rgba(150, 215, 255, 0.12) 65%, transparent 80%),
    linear-gradient(rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 255, 255, 0.38);
}
.task-btn.attn { animation: attnFlash 0.5s ease-in-out 3; }
@keyframes attnFlash {
  50% {
    background: linear-gradient(rgba(255, 190, 90, 0.75), rgba(220, 130, 30, 0.55) 50%, rgba(200, 110, 20, 0.5));
    border-color: rgba(255, 220, 160, 0.8);
  }
}
.task-btn:active, .task-btn.active {
  background:
    radial-gradient(circle at 50% 140%, rgba(150, 215, 255, 0.35), transparent 60%),
    linear-gradient(rgba(10, 20, 35, 0.5), rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
}

.tray {
  margin-left: auto;
  display: flex;
  align-items: center;
  align-self: stretch;
}
.tray-icons { display: flex; align-self: stretch; align-items: stretch; }
.tray-icons > * {
  display: grid;
  place-items: center;
  width: 26px;
  border: none;
  background: none;
  padding: 0;
  border-radius: 3px;
  cursor: pointer;
}
.tray-icons > *:hover { background: rgba(255, 255, 255, 0.1); }
.tray-icons svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)); }
.tray-clock {
  text-align: center;
  color: #f2f7fd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  font-size: 12px;
  line-height: 1.3;
  padding: 0 12px;
  border-radius: 2px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.tray-clock span { display: block; }
.tray-clock:hover { background: rgba(255, 255, 255, 0.08); }
.showdesk {
  width: 13px;
  align-self: stretch;
  border: none;
  border-left: 1px solid rgba(160, 200, 240, 0.45);
  background: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  padding: 0;
}
.showdesk:hover { background: rgba(255, 255, 255, 0.16); }

.task-btn > svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }

/* ═══════════ DESKTOP FURNITURE ═══════════ */
.dicons {
  position: fixed;
  top: 22px; left: 18px;
  z-index: 0;
  display: none;
  flex-direction: column;
  gap: 6px;
}
.dicon {
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 4px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  text-decoration: none;
}
.dicon:hover { background: rgba(160, 205, 250, 0.22); border-color: rgba(190, 225, 255, 0.4); }
.dicon:active { background: rgba(140, 190, 245, 0.35); border-color: rgba(190, 225, 255, 0.55); }
.dicon img, .dicon svg { width: 48px; height: 48px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.dicon span {
  font-size: 12px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.5);
  line-height: 1.25;
}

.gadget {
  position: fixed;
  top: 24px; right: 20px;
  z-index: 0;
  display: none;
  width: 120px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.gadget-face {
  width: 108px; height: 108px;
  border-radius: 50%;
  border: 1px solid rgba(8, 20, 38, 0.8);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 50% 60%, rgba(40, 62, 95, 0.92), rgba(10, 22, 40, 0.95) 75%);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(205, 215, 228, 0.95),
    0 0 0 4px rgba(70, 85, 105, 0.9),
    inset 0 1px 2px rgba(255, 255, 255, 0.35);
  position: relative;
}
.gadget-face .hand {
  position: absolute;
  left: 50%; top: 50%;
  transform-origin: 50% 100%;
  background: #eaf2fa;
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}
.gadget-face .h-h { width: 3.5px; height: 26px; margin: -26px 0 0 -1.75px; }
.gadget-face .h-m { width: 2.5px; height: 37px; margin: -37px 0 0 -1.25px; }
.gadget-face .h-s {
  width: 1.5px; height: 44px;
  margin: -44px 0 0 -0.75px;
  background: #e07a30;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}
.gadget-face .pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #eaf2fa;
}
.gadget-face .tick {
  position: absolute;
  left: 50%; top: 7px;
  width: 2px; height: 6px;
  margin-left: -1px;
  background: rgba(230, 240, 250, 0.55);
  transform-origin: 50% 47px;
}
.gadget label {
  font-size: 11.5px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.08em;
}
@media (min-width: 1330px) {
  .dicons { display: flex; }
  .gadget { display: flex; }
}

/* tray balloon */
.balloon {
  position: fixed;
  right: 12px;
  bottom: 58px;
  z-index: 70;
  width: 300px;
  background: linear-gradient(#ffffff, #f0f3f6);
  border: 1px solid #8a99a8;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  padding: 11px 30px 12px 13px;
  font-size: 12.5px;
  color: #333;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.balloon.on { opacity: 1; transform: none; }
.balloon::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -7px;
  width: 12px; height: 12px;
  background: #f0f3f6;
  border-right: 1px solid #8a99a8;
  border-bottom: 1px solid #8a99a8;
  transform: rotate(45deg) skew(12deg, 12deg);
}
.balloon b { display: block; font-size: 13px; color: #000; margin-bottom: 3px; }
.balloon .bl-x {
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: #444;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.balloon .bl-x:hover { background: linear-gradient(#f5bdb0, #e08a76); border-color: #b55; color: #fff; }

/* ═══════════ DIALOGS: task dialog anatomy ═══════════ */
.dlg-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(8, 18, 32, 0.08);
  padding: 16px;
}
.dialog { width: fit-content; min-width: 340px; max-width: min(500px, 94vw); }
.dialog .win-body { padding: 0; }
.dialog .d-main {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 18px 16px;
  background: #fff;
}
.dialog .d-icon { width: 32px; height: 32px; flex: none; }
.dialog .d-instr { font-size: 15.5px; color: var(--instr); margin: 1px 0 6px; }
.dialog .d-text { font-size: 13px; line-height: 1.6; color: #333; }
.dialog .d-text b { font-weight: 700; }
.dialog .d-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: #f0f0f0;
  border-top: 1px solid #dfdfdf;
  padding: 10px 14px;
}
.dialog .d-foot .btn { min-width: 75px; padding: 3px 16px 4px; font-size: 13px; }

/* ═══════════ REVEAL ═══════════ */
.rv { opacity: 0; transform: scale(0.975); transition: opacity 0.22s ease-out, transform 0.22s ease-out; }
.rv.rv-in { opacity: 1; transform: none; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 900px) {
  .cols4 { grid-template-columns: 1fr 1fr; }
  .cols3 { grid-template-columns: 1fr; }
  .cols2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .task-label { display: none; }
  .task-btn { padding: 0 10px; }
  .cols4 { grid-template-columns: 1fr; }
  .tray-date { display: none; }
  .crumbs { font-size: 12px; }
}

/* ═══════════ WIN7 TOOLTIPS ═══════════ */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  opacity: 0;
  animation: tipIn 0.12s ease-out 0.4s both;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 9px);
  background: linear-gradient(#ffffff, #eef2f7);
  border: 1px solid #767676;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  padding: 3px 8px 4px;
  font: 12px var(--sys);
  color: #333;
  text-shadow: none;
  white-space: nowrap;
  z-index: 96;
  pointer-events: none;
}
.tip-down[data-tip]:hover::after { bottom: auto; top: calc(100% + 9px); }
@keyframes tipIn { to { opacity: 1; } }

/* ═══════════ THE START MENU ═══════════ */
.startmenu {
  position: fixed;
  left: 4px;
  bottom: 54px;
  z-index: 80;
  width: 412px;
  border-radius: 8px;
  border: 1px solid rgba(6, 22, 42, 0.8);
  background:
    linear-gradient(rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.1)),
    var(--wp-glass);
  background-attachment: fixed;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  padding: 8px;
  transform-origin: 10% 100%;
}
.startmenu.on { animation: smIn 0.14s ease-out; }
@keyframes smIn {
  from { opacity: 0; transform: scale(0.96) translateY(5px); }
}
.sm-cols { display: flex; gap: 8px; }
.sm-left {
  background: #fdfdfd;
  border: 1px solid #b8c8d8;
  border-radius: 4px;
  padding: 6px;
  width: 238px;
  flex: none;
  display: flex;
  flex-direction: column;
}
.sm-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: var(--sys);
  font-size: 13px;
  color: #1e1e1e;
  text-decoration: none;
  background: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.sm-item img, .sm-item svg { width: 22px; height: 22px; flex: none; }
.sm-item:hover { background: linear-gradient(#eaf6fd, #bee6fd); border-color: #7da2ce; }
.sm-sep { height: 1px; background: #dde5ec; margin: 5px 2px; }
.sm-allprog { font-size: 12.5px; color: #1e1e1e; }
.sm-allprog svg { width: 14px; height: 14px; margin-left: 4px; }
.sm-search {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #a9bbcc;
  border-radius: 2px;
  height: 26px;
  padding: 0 8px;
}
.sm-search input {
  border: none;
  background: none;
  width: 100%;
  font-family: var(--sys);
  font-size: 12.5px;
  color: var(--ink);
}
.sm-search input:focus { outline: none; }
.sm-search input::placeholder { color: #98a4b0; font-style: italic; }
.sm-search svg { opacity: 0.55; flex: none; }
.sm-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  min-width: 0;
  background: linear-gradient(rgba(28, 52, 86, 0.42), rgba(16, 34, 60, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.sm-avatar {
  width: 52px; height: 52px;
  margin: 2px auto 10px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: radial-gradient(circle at 35% 25%, #7fb8e8, #1d5a9e);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  display: grid;
  place-items: center;
}
.sm-avatar img { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.sm-link {
  display: block;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: var(--sys);
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  background: none;
  text-align: left;
  width: 100%;
}
.sm-link:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
.sm-power {
  margin-top: auto;
  padding: 10px 2px 2px;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 480px) {
  .startmenu { width: calc(100vw - 8px); }
  .sm-left { width: 55%; }
}

/* ═══════════ AERO PEEK (show desktop hover) ═══════════ */
main .win :is(.titlebar, .caps, .win-body, .expbar) { transition: opacity 0.2s ease; }
.dicons, .gadget { transition: opacity 0.2s ease; }
body.peek main .win :is(.titlebar, .caps, .win-body, .expbar) { opacity: 0.08; }
body.peek :is(.dicons, .gadget) { opacity: 0.25; }

/* the elevation shield on committing actions */
.b-shield { flex: none; margin-right: 1px; }

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .btn-default::after { animation: none; opacity: 0.35; }
  .progress .p-fill { animation: none; left: 0; width: 0; }
  .balloon { transition: none; }
  .startmenu.on { animation: none; }
  main .win :is(.titlebar, .caps, .win-body, .expbar), .dicons, .gadget { transition: none; }
  .wm-l, .wm-l.one, .rv.rv-in .move, .rv.rv-in :is(.cols2, .cols3) > .group { animation: none; }
  .phrase-win .win-body::after { animation: none; opacity: 0; }
  .task-btn.attn, .led.flash { animation: none; }
  .move:hover { transform: none; }
  .smiley:hover canvas { transform: none; }
  [data-tip]:hover::after { animation: none; opacity: 1; }
}