:root {
      --face: #c0c0c0;
      --light: #ffffff;
      --mid: #dfdfdf;
      --shadow: #808080;
      --dark: #000000;
      --accent: #000080;
      --text: #000000;
      --link: #0000ee;
      --taskbar: #d4d0c8;
    }

    * { box-sizing: border-box; }

    html, body {
      height: 100%;
      margin: 0;
      background: linear-gradient(135deg, #2b2b2b 0%, #1e1e1e 100%);
      background-attachment: fixed;
      color: var(--text);
      font-family: system-ui, Tahoma, Verdana, "MS Sans Serif", Arial, sans-serif;
      overflow: hidden;
    }

    .desktop {
      height: 100%;
      padding: 12px;
      position: relative;
    }

    /* Desktop icon grid (auto-flows into columns, wraps as needed) */
    .icons {
      position: absolute;
      top: 12px;
      left: 12px;
      bottom: 56px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: flex-start;
      gap: 4px;
      z-index: 0;
    }

    .icon-link { text-decoration: none; }

    button.icon-link {
      appearance: none;
      border: 0;
      padding: 0;
      background: transparent;
      font: inherit;
    }

    .icon {
      width: 72px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
      font-size: 0.8rem;
      text-align: center;
      margin: 8px;
      cursor: default;
      user-select: none;
      transition: transform 0.05s ease, filter 0.1s ease;
    }

    .icon img {
      width: 48px;
      height: 48px;
      object-fit: cover;
      image-rendering: auto;
    }

    .icon img.icon-contain { object-fit: contain; background: #fff; }

    .icon span {
      text-shadow: 1px 1px 0 #000;
      margin-top: 2px;
    }

    .icon:hover { filter: brightness(1.2); }
    .icon:active { transform: translateY(1px); }

    .icon-link:focus-visible .icon,
    .control-btn:focus-visible,
    .start-btn:focus-visible,
    .task:focus-visible,
    .start-item:focus-visible,
    .dialog-close:focus-visible,
    .btn-98:focus-visible,
    .btn-98-small:focus-visible,
    .ms-face:focus-visible,
    .ms-cell:focus-visible {
      outline: 2px dotted #fff;
      outline-offset: 2px;
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .window {
      width: min(560px, 92vw);
      background: var(--face);
      border: 2px solid var(--dark);
      box-shadow:
        1px 1px 0 var(--shadow),
        -1px -1px 0 var(--light),
        inset -1px -1px 0 var(--shadow),
        inset 1px 1px 0 var(--light);
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      user-select: none;
      z-index: 1;
    }

    .window.maximized {
      top: 0 !important;
      left: 0 !important;
      width: 100%;
      height: calc(100% - 44px);
      transform: none !important;
    }

    .window-overwatch { top: 80px; }
    .window-minesweeper { top: 90px; width: auto; }
    .window-media { top: 70px; width: min(420px, 92vw); }
    .window-twitch { top: 60px; width: min(560px, 92vw); }
    .window-games { top: 75px; width: min(620px, 92vw); }

    .title-bar {
      height: 28px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 6px;
      color: #fff;
      background: linear-gradient(90deg, var(--accent), #3a6ea5);
      cursor: grab;
      touch-action: none;
    }

    .title-bar:active { cursor: grabbing; }

    .title-icon {
      display: inline-flex;
      width: 18px;
      height: 18px;
      align-items: center;
      justify-content: center;
      background: #f0f0f0;
      border: 1px solid #000;
    }

    .title-text {
      font-weight: 700;
      letter-spacing: .2px;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .title-controls { display: inline-flex; gap: 2px; }

    .control-btn {
      width: 20px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      background: var(--face);
      border: 2px solid var(--dark);
      box-shadow:
        inset -1px -1px 0 var(--shadow),
        inset 1px 1px 0 var(--light);
      cursor: pointer;
      line-height: 0;
      color: #000;
      padding: 0;
      font: inherit;
    }

    .control-btn:active {
      box-shadow:
        inset 1px 1px 0 var(--shadow),
        inset -1px -1px 0 var(--light);
    }

    .games-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .game-card {
      min-width: 0;
      padding: 8px;
      background: var(--face);
      border: 2px solid var(--dark);
      box-shadow: inset -1px -1px 0 var(--shadow), inset 1px 1px 0 var(--light);
      text-align: center;
    }

    .game-card img {
      width: 72px;
      height: 72px;
      object-fit: cover;
      border: 1px solid #000;
    }

    .game-card strong { display: block; margin-top: 6px; }
    .game-card span { display: block; margin-top: 3px; font-size: .75rem; color: #333; }
    .games-actions { display: flex; justify-content: center; }

    .icons-fade,
    .icons-hint { display: none; }

    .window-body { padding: 14px; display: grid; gap: 14px; }

    .profile { display: flex; align-items: center; gap: 12px; }

    .avatar {
      width: 72px;
      height: 72px;
      flex: 0 0 auto;
      border: 2px solid var(--dark);
      box-shadow:
        1px 1px 0 var(--shadow),
        -1px -1px 0 var(--light),
        inset -1px -1px 0 var(--shadow),
        inset 1px 1px 0 var(--light);
      background: url('img/profile.png') center/cover no-repeat;
    }

    .ow-avatar {
      background-image: url('img/overwatch.svg');
      background-color: #f99e1a;
    }

    .username {
      font-weight: bold;
      font-size: 1.2rem;
    }

    .group-box {
      border: 2px solid var(--dark);
      box-shadow:
        1px 1px 0 var(--shadow),
        -1px -1px 0 var(--light),
        inset -1px -1px 0 var(--shadow),
        inset 1px 1px 0 var(--light);
      padding: 12px;
      background: var(--mid);
      position: relative;
    }

    .group-title {
      position: absolute;
      top: -12px;
      left: 10px;
      background: var(--mid);
      display: inline-block;
      padding: 0 6px;
      font-weight: 700;
    }

    .links { display: grid; gap: 10px; }

    .btn-98 {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--text);
      padding: 10px 12px;
      background: var(--face);
      border: 2px solid var(--dark);
      box-shadow:
        inset -1px -1px 0 var(--shadow),
        inset 1px 1px 0 var(--light);
      font-weight: 600;
      font-family: inherit;
      font-size: inherit;
      text-align: left;
      cursor: default;
    }

    .btn-98:active {
      box-shadow:
        inset 1px 1px 0 var(--shadow),
        inset -1px -1px 0 var(--light);
      transform: translateY(1px);
    }

    .status-bar {
      display: flex;
      justify-content: space-between;
      padding-top: 6px;
      font-size: .85rem;
      color: #222;
    }

    /* Overwatch rank cards */
    .ow-ranks {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .ow-role {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 4px;
      background: var(--face);
      border: 2px solid var(--dark);
      box-shadow:
        inset -1px -1px 0 var(--shadow),
        inset 1px 1px 0 var(--light);
      text-align: center;
    }

    .ow-role-label { font-weight: 700; font-size: .8rem; }
    .ow-rank-text { font-size: .8rem; }
    .ow-rank-icon { width: 40px; height: 40px; object-fit: contain; }
    .ow-message { margin: 0; font-size: .9rem; }
    .ow-message-wide { grid-column: 1 / -1; }

    .ow-profile-link { color: var(--link); font-size: .85rem; }

    /* Media player (Winamp-style) */
    .mp-screen {
      font-family: "Courier New", monospace;
      background: #0b0f17;
      color: #1ed760;
      padding: 6px 8px;
      border: 2px solid;
      border-color: var(--shadow) var(--light) var(--light) var(--shadow);
      margin-bottom: 10px;
      font-size: .8rem;
      overflow: hidden;
      white-space: nowrap;
    }
    .mp-screen span {
      display: inline-block;
      padding-left: 100%;
      animation: mp-scroll 14s linear infinite;
    }
    @keyframes mp-scroll { to { transform: translateX(-100%); } }

    .mp-embed { width: 100%; height: 352px; border: 0; display: block; border-radius: 4px; }

    .tw-embed { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }

    /* Boot splash */
    .boot {
      position: fixed;
      inset: 0;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
    }
    .boot.hidden { opacity: 0; visibility: hidden; transition: opacity .5s ease; }
    .boot-inner { text-align: center; color: #fff; font-family: Tahoma, system-ui, sans-serif; }
    .boot-logo { font-size: 2rem; font-weight: 700; }
    .boot-sub { color: #5a8fc5; letter-spacing: 5px; margin: 10px 0 26px; font-size: .8rem; }
    .boot-bar { width: 220px; height: 18px; border: 2px solid #fff; margin: 0 auto; padding: 2px; }
    .boot-bar-fill {
      height: 100%;
      width: 0;
      background: repeating-linear-gradient(90deg, #000080 0 10px, #3a6ea5 10px 14px);
      animation: boot-fill 2.2s ease forwards;
    }
    @keyframes boot-fill { to { width: 100%; } }

    /* CRT scanline overlay */
    .crt {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9000;
      background: repeating-linear-gradient(
        rgba(0, 0, 0, 0) 0 2px,
        rgba(0, 0, 0, 0.13) 2px 4px
      );
      animation: crt-flicker 6s infinite;
    }
    @keyframes crt-flicker { 0%, 100% { opacity: .55; } 50% { opacity: .7; } }
    body.no-crt .crt { display: none; }
    @media (prefers-reduced-motion: reduce) {
      .crt,
      .boot-bar-fill,
      .mp-screen span { animation: none; }
      .boot.hidden,
      .icon { transition: none; }
      .mp-screen span { padding-left: 0; }
    }

    /* Minesweeper */
    .ms-body { padding: 8px; }

    .ms-panel {
      border: 3px solid;
      border-color: var(--shadow) var(--light) var(--light) var(--shadow);
      background: var(--face);
      padding: 6px;
    }

    .ms-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 3px solid;
      border-color: var(--shadow) var(--light) var(--light) var(--shadow);
      padding: 5px 6px;
      margin-bottom: 6px;
    }

    .ms-led {
      font-family: "Courier New", monospace;
      font-weight: 700;
      font-size: 1.3rem;
      letter-spacing: 2px;
      background: #000;
      color: #ff2d2d;
      padding: 2px 5px;
      min-width: 52px;
      text-align: right;
    }

    .ms-face {
      width: 32px;
      height: 32px;
      font-size: 1.1rem;
      display: grid;
      place-items: center;
      background: var(--face);
      border: 2px solid;
      border-color: var(--light) var(--shadow) var(--shadow) var(--light);
      cursor: pointer;
      padding: 0;
    }
    .ms-face:active { border-color: var(--shadow) var(--light) var(--light) var(--shadow); }

    .ms-grid {
      border: 3px solid;
      border-color: var(--shadow) var(--light) var(--light) var(--shadow);
    }

    .ms-row {
      display: grid;
      grid-template-columns: repeat(9, 26px);
      height: 26px;
    }

    .ms-cell {
      width: 26px;
      height: 26px;
      padding: 0;
      margin: 0;
      font-weight: 700;
      font-size: 0.95rem;
      line-height: 1;
      display: grid;
      place-items: center;
      background: var(--face);
      border: 3px solid;
      border-color: var(--light) var(--shadow) var(--shadow) var(--light);
      cursor: default;
      user-select: none;
      -webkit-touch-callout: none;
      touch-action: manipulation;
      font-family: "Courier New", monospace;
    }

    .ms-cell.revealed {
      border: 1px solid var(--shadow);
      cursor: default;
    }

    .ms-cell.mine { background: #c0c0c0; }
    .ms-cell.exploded { background: #ff2d2d; }

    /* Classic number colors */
    .ms-cell.n1 { color: #0000ff; }
    .ms-cell.n2 { color: #007b00; }
    .ms-cell.n3 { color: #ff0000; }
    .ms-cell.n4 { color: #00007b; }
    .ms-cell.n5 { color: #7b0000; }
    .ms-cell.n6 { color: #007b7b; }
    .ms-cell.n7 { color: #000000; }
    .ms-cell.n8 { color: #7b7b7b; }

    .taskbar {
      height: 44px;
      background: var(--taskbar);
      border-top: 2px solid var(--dark);
      box-shadow: inset 0 1px 0 var(--light);
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 4px 6px;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 5;
    }

    .start-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      background: var(--face);
      border: 2px solid var(--dark);
      box-shadow:
        inset -1px -1px 0 var(--shadow),
        inset 1px 1px 0 var(--light);
      font-weight: 700;
      cursor: default;
      color: #000;
      font: inherit;
    }

    .start-btn:active {
      box-shadow:
        inset 1px 1px 0 var(--shadow),
        inset -1px -1px 0 var(--light);
    }

    .task {
      padding: 4px 8px;
      background: var(--face);
      border: 2px solid var(--dark);
      box-shadow:
        inset -1px -1px 0 var(--shadow),
        inset 1px 1px 0 var(--light);
      font-size: 0.9rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: default;
      color: #000;
      font-family: inherit;
      text-align: left;
    }

    .tasks {
      display: flex;
      min-width: 0;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .tasks .task { flex: 1 1 110px; min-width: 72px; }

    .task.active {
      box-shadow:
        inset 1px 1px 0 var(--shadow),
        inset -1px -1px 0 var(--light);
    }

    .clock {
      font-variant-numeric: tabular-nums;
      font-size: 0.85rem;
      color: #000;
    }

    /* Start menu */
    .start-menu {
      position: fixed;
      bottom: 44px;
      left: 4px;
      width: 220px;
      background: var(--face);
      border: 2px solid var(--dark);
      box-shadow:
        1px 1px 0 var(--shadow),
        -1px -1px 0 var(--light),
        inset -1px -1px 0 var(--shadow),
        inset 1px 1px 0 var(--light);
      display: none;
      z-index: 6;
    }

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

    .start-menu-title {
      padding: 6px;
      font-weight: 700;
      border-bottom: 1px solid var(--shadow);
      background: linear-gradient(90deg, var(--accent), #3a6ea5);
      color: #fff;
    }

    .start-item {
      padding: 6px 8px;
      background: transparent;
      border: none;
      text-align: left;
      font: inherit;
      cursor: default;
    }

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

    /* Dialog */
    .dialog-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.25);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 7;
      border: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      padding: 0;
    }

    .dialog-backdrop[open] { display: flex; }

    .dialog-backdrop::backdrop { background: rgba(0, 0, 0, 0.25); }

    .dialog {
      width: 320px;
      background: var(--face);
      border: 2px solid var(--dark);
      box-shadow:
        1px 1px 0 var(--shadow),
        -1px -1px 0 var(--light),
        inset -1px -1px 0 var(--shadow),
        inset 1px 1px 0 var(--light);
    }

    .dialog-title-bar {
      background: var(--accent);
      color: #fff;
      padding: 4px 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 700;
      font-size: 0.9rem;
    }

    .dialog-close {
      background: var(--face);
      border: 2px solid;
      border-color: var(--light) var(--shadow) var(--shadow) var(--light);
      color: var(--text);
      cursor: default;
      font: inherit;
      line-height: 1;
      padding: 1px 4px;
    }

    .dialog-body { padding: 10px; font-size: 0.9rem; }

    .dialog-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      padding: 8px 10px;
    }

    .btn-98-small {
      min-width: 70px;
      padding: 3px 10px;
      background: var(--face);
      border: 2px solid var(--dark);
      box-shadow:
        inset -1px -1px 0 var(--shadow),
        inset 1px 1px 0 var(--light);
      cursor: default;
      font-size: 0.85rem;
    }

    .btn-98-small:active {
      box-shadow:
        inset 1px 1px 0 var(--shadow),
        inset -1px -1px 0 var(--light);
      transform: translateY(1px);
    }

    @media (max-width: 600px) {
      /* Icons become a horizontal scrolling strip across the top */
      .icons {
        flex-direction: row;
        flex-wrap: nowrap;
        right: 12px;
        bottom: auto;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
      }
      .icons-fade {
        display: block;
        position: absolute;
        z-index: 2;
        top: 12px;
        right: 12px;
        width: 34px;
        height: 76px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, #202020 88%);
      }
      .icons-hint {
        display: block;
        position: absolute;
        z-index: 3;
        top: 92px;
        right: 15px;
        color: #fff;
        font-size: .62rem;
        text-shadow: 1px 1px #000;
        pointer-events: none;
      }
      .icon { width: 76px; margin: 4px 2px; }
      .icon span { font-size: .68rem; }
      .window { top: 130px; }
      .ow-rank-icon { width: 32px; height: 32px; }
      .avatar { width: 56px; height: 56px; }
      .title-text { font-size: .95rem; }
      .games-grid { grid-template-columns: 1fr; }
      .game-card { display: grid; grid-template-columns: 58px 1fr; column-gap: 10px; text-align: left; align-items: center; }
      .game-card img { width: 58px; height: 58px; grid-row: 1 / 3; }
      .game-card strong { margin-top: 0; }
      #twWin {
        position: fixed;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100% - 44px);
        transform: none !important;
      }
      #twWin .window-body {
        height: calc(100% - 28px);
        padding: 10px;
        display: flex;
        flex-direction: column;
      }
      #twWin .tw-embed { flex: 1; min-height: 0; height: 100%; aspect-ratio: auto; }
    }