/* ==========================================================================
   MS-DOS 6.00 // 1993 486DX2-66 SVGA CRT Workstation & TUI Design System
   Authentic IBM VGA 8x16 CP437 Font + Exact 16-Color VGA DAC Palette
   ========================================================================== */

@font-face {
  font-family: "Px437 IBM VGA 8x16";
  src: url("../fonts/Px437_IBM_VGA_8x16.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: fallback; /* ~100ms block, then swap in within 3s; fallback metrics below are close to 8x16 */
}

:root,
[data-video="vga"] {
  /* Exact IBM VGA Hardware DAC 16-Color Palette */
  --vga-0: #000000;
  --vga-1: #0000aa;
  --vga-2: #00aa00;
  --vga-3: #00aaaa;
  --vga-4: #aa0000;
  --vga-5: #aa00aa;
  --vga-6: #aa5500;
  --vga-7: #aaaaaa;
  --vga-8: #555555;
  --vga-9: #5555ff;
  --vga-10: #55ff55;
  --vga-11: #55ffff;
  --vga-12: #ff5555;
  --vga-13: #ff55ff;
  --vga-14: #ffff55;
  --vga-15: #ffffff;

  /* Default Mode CO80 (Color VGA) Tokens */
  --crt-bg-center: #090a0d;
  --crt-bg-edge: #030305;
  --dos-fg: #b4b6b8;
  --dos-fg-bright: #ffffff;
  --dos-fg-dim: #8a8e94; /* 6.0:1 on CRT background (WCAG AA) */
  --dos-cyan: #55ffff;
  --dos-yellow: #ffff55;
  --dos-green: #55ff55;
  --dos-red: #ff5555;
  --dos-blue-bg: #0000aa;
  --dos-cyan-bg: #00aaaa;
  --dos-silver-bg: #aaaaaa;
  --dos-glow: rgba(210, 225, 255, 0.16);
  --dos-glow-bright: rgba(255, 255, 255, 0.34);

  /* Typography */
  --dos-font: "Px437 IBM VGA 8x16", "Courier New", "Lucida Console", "DejaVu Sans Mono", monospace;
  --dos-font-size: clamp(18px, 1.75vw, 24px);
  --dos-line-height: 1.15;
}

/* Monochrome Hercules Amber Mode */
[data-video="amber"] {
  --crt-bg-center: #110b04;
  --crt-bg-edge: #060401;
  --dos-fg: #ffaa22;
  --dos-fg-bright: #ffd97d;
  --dos-fg-dim: #b8761a; /* 5.2:1 */
  --dos-cyan: #ffc952;
  --dos-yellow: #ffe299;
  --dos-green: #ffc952;
  --dos-red: #ff8822;
  --dos-blue-bg: #221402;
  --dos-cyan-bg: #8a520a;
  --dos-silver-bg: #d98c18;
  --dos-glow: rgba(255, 170, 34, 0.32);
  --dos-glow-bright: rgba(255, 215, 120, 0.5);
}

/* Monochrome IBM 5151 MDA Green Mode */
[data-video="green"] {
  --crt-bg-center: #071108;
  --crt-bg-edge: #020603;
  --dos-fg: #44ee58;
  --dos-fg-bright: #9dffaa;
  --dos-fg-dim: #2fa33f; /* 6.0:1 */
  --dos-cyan: #7aff8a;
  --dos-yellow: #b2ffbe;
  --dos-green: #66ff77;
  --dos-red: #7aff8a;
  --dos-blue-bg: #061d09;
  --dos-cyan-bg: #1d6b28;
  --dos-silver-bg: #44cc56;
  --dos-glow: rgba(68, 238, 88, 0.32);
  --dos-glow-bright: rgba(155, 255, 170, 0.5);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background-color: #181715;
  font-family: var(--dos-font);
  color: var(--dos-fg);
}

::selection {
  background: var(--dos-fg-bright);
  color: #000000;
}

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

/* ==========================================================================
   1993 Sculpted Beige SVGA PC Monitor Bezel & Recessed Collar
   ========================================================================== */

.pc-monitor {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  padding: 16px 22px 12px;
  background:
    linear-gradient(180deg, #dcd6c8 0%, #cbc3b2 55%, #b8af9d 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -3px 8px rgba(0, 0, 0, 0.28);
}

/* Top subtle embossed NEC/IBM style monitor header */
.bezel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  user-select: none;
}

.brand-plate {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #3f3b34;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.brand-model {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #655f54;
}

.bezel-top-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.os-switch-link {
  font-size: 11px;
  font-weight: 700;
  color: #3a352c;
  text-decoration: none;
  background: #c4bcab;
  padding: 3px 10px;
  border-radius: 3px;
  border: 1px solid #968d7d;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: background-color 120ms ease, color 120ms ease;
}

.os-switch-primary {
  background: #1a4b63;
  color: #f4f8fa;
  border-color: #0e2d3d;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.os-switch-primary:hover {
  background: #236280 !important;
  color: #ffffff !important;
}

.os-switch-link:hover {
  background: #d2cbbd;
  color: #1f1d19;
}

/* Dark recessed inner CRT bezel collar */
.crt-collar {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: linear-gradient(180deg, #252422 0%, #171615 100%);
  border-radius: 16px;
  border-top: 3px solid #7d7668;
  border-left: 3px solid #8c8576;
  border-right: 3px solid #dfd9cc;
  border-bottom: 3px solid #eae5d9;
  box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.9);
}

.vga-tube {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 48%, var(--crt-bg-center) 0%, var(--crt-bg-edge) 100%);
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.85),
    0 0 0 1px #090909;
  overflow: hidden;
}

/* Fine SVGA aperture grille / scanlines */
.vga-tube::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.24) 50%
  );
  background-size: 100% 4px;
}

/* Subtle glass reflection & corner shadow */
.vga-tube::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 16;
  background:
    radial-gradient(circle at 50% 50%, transparent 66%, rgba(0, 0, 0, 0.48) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 32%);
}

/* Degauss Coil Wobble Animation */
@keyframes crt-degauss {
  0% { transform: scale(1) skewX(0deg); filter: hue-rotate(0deg) brightness(1); }
  15% { transform: scale(1.025, 0.97) skewX(2.5deg); filter: hue-rotate(55deg) brightness(1.5); }
  35% { transform: scale(0.98, 1.02) skewX(-2deg); filter: hue-rotate(-45deg) brightness(1.3); }
  60% { transform: scale(1.01, 0.99) skewX(1deg); filter: hue-rotate(20deg) brightness(1.1); }
  82% { transform: scale(0.997, 1.003) skewX(-0.4deg); filter: hue-rotate(-8deg); }
  100% { transform: scale(1) skewX(0deg); filter: hue-rotate(0deg) brightness(1); }
}

.degaussing .vga-tube {
  animation: crt-degauss 520ms ease-out;
}

/* ==========================================================================
   VGA Text Buffer & Scrolling Screen
   ========================================================================== */

.dos-screen {
  position: relative;
  z-index: 4;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 26px 26px;
  font-family: var(--dos-font);
  font-size: var(--dos-font-size);
  line-height: var(--dos-line-height);
  color: var(--dos-fg);
  text-shadow: 0 0 4px var(--dos-glow);
  cursor: text;
}

.dos-screen::-webkit-scrollbar {
  width: 12px;
}

.dos-screen::-webkit-scrollbar-track {
  background: #0a0a0c;
}

.dos-screen::-webkit-scrollbar-thumb {
  background: #44464a;
  border: 2px solid #0a0a0c;
}

#dos-output {
  display: flex;
  flex-direction: column;
}

.dos-line {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  min-height: calc(1em * var(--dos-line-height));
}

/* Tighter line-height for CP437 box-drawing blocks so vertical borders connect seamlessly! */
.dos-box {
  white-space: pre;
  overflow-x: auto;
  line-height: 1.0;
  margin: 0;
}

/* VGA Text Attributes */
.c-bright { color: var(--dos-fg-bright); text-shadow: 0 0 6px var(--dos-glow-bright); }
.c-dim    { color: var(--dos-fg-dim); }
.c-cyan   { color: var(--dos-cyan); }
.c-yellow { color: var(--dos-yellow); }
.c-green  { color: var(--dos-green); }
.c-red    { color: var(--dos-red); }
.c-inv    {
  background: var(--dos-fg);
  color: #000000;
  text-shadow: none;
  padding: 0 2px;
}
.c-banner {
  background: var(--dos-blue-bg);
  color: var(--dos-fg-bright);
  display: inline-block;
}

/* Interactive Links & Command Chips */
.dos-link {
  color: var(--dos-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.dos-link:hover {
  background: var(--dos-cyan);
  color: #000000;
  text-decoration: none;
  text-shadow: none;
}

.dos-cmd-chip {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--dos-yellow);
  cursor: pointer;
  border-bottom: 1px dotted var(--dos-fg-dim);
}

.dos-cmd-chip:hover,
.dos-cmd-chip:focus-visible {
  background: var(--dos-yellow);
  color: #000000;
  text-shadow: none;
  outline: none;
}

/* File / directory name chips inside DIR, DIR /W and TREE /F output keep their VGA attribute colour */
.dos-file-chip {
  color: inherit;
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.dos-file-chip.c-cyan {
  color: var(--dos-cyan);
}

.dos-file-chip:hover,
.dos-file-chip:focus-visible {
  background: var(--dos-fg);
  color: #000000;
}

.dos-file-chip.c-cyan:hover,
.dos-file-chip.c-cyan:focus-visible {
  background: var(--dos-cyan);
}

/* MOTD command hint rows: tappable command + description (stacks on narrow screens) */
.dos-hint-row {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding-left: 4ch;
  min-height: calc(1em * var(--dos-line-height));
}

.dos-hint-row .dos-cmd-chip {
  flex: 0 0 auto;
  white-space: pre;
  min-width: 24ch;
  text-align: left;
}

.dos-hint-desc {
  flex: 1 1 auto;
  min-width: 0;
}

/* "tap here to type" placeholder shown on touch devices until the prompt is focused */
.dos-touch-placeholder {
  display: none;
  margin-left: 1ch;
  color: var(--dos-fg-dim);
  font-style: italic;
  pointer-events: none;
}

.dos-prompt-row.show-touch-hint .dos-touch-placeholder {
  display: inline;
}

/* Blinking "[ Press any key or tap to skip ]" hint during POST / boot */
@keyframes boot-hint-blink {
  0%, 59% { opacity: 1; }
  60%, 100% { opacity: 0.15; }
}

.boot-skip-hint {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 14;
  padding: 1px 8px;
  font-family: var(--dos-font);
  font-size: calc(var(--dos-font-size) * 0.85);
  color: var(--dos-fg-bright);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--dos-fg-dim);
  pointer-events: none;
  animation: boot-hint-blink 1.1s steps(1, end) infinite;
}

.boot-skip-hint[hidden] {
  display: none !important;
}

/* ==========================================================================
   Active Prompt & Authentic MS-DOS Underscore / Overstrike Cursor
   ========================================================================== */

.dos-prompt-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  min-height: calc(1em * var(--dos-line-height));
}

.dos-prompt-row[hidden] {
  display: none !important;
}

#dos-prompt-str {
  white-space: pre;
  color: var(--dos-fg);
}

.dos-input-mirror {
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--dos-fg);
}

@keyframes vga-underscore-blink {
  0%, 49% {
    border-bottom-color: var(--dos-fg-bright);
  }
  50%, 100% {
    border-bottom-color: transparent;
  }
}

@keyframes vga-block-blink {
  0%, 49% {
    background-color: var(--dos-fg-bright);
    color: #000000;
  }
  50%, 100% {
    background-color: transparent;
    color: var(--dos-fg);
  }
}

#dos-cursor {
  display: inline-block;
  min-width: 1ch;
  border-bottom: 3px solid var(--dos-fg-bright);
  animation: vga-underscore-blink 530ms steps(1, end) infinite;
}

/* Overstrike mode (Insert key toggled) uses full block cursor like DOSKEY */
.overstrike #dos-cursor {
  border-bottom: none;
  background-color: var(--dos-fg-bright);
  color: #000000;
  text-shadow: none;
  animation: vga-block-blink 530ms steps(1, end) infinite;
}

#dos-input {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  font-size: 16px;
}

/* ==========================================================================
   Full-Screen VGA TUI Overlay (EDIT.COM, MSD.EXE, DEFRAG.EXE, DOSKEY F7)
   ========================================================================== */

.tui-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  font-family: var(--dos-font);
  font-size: var(--dos-font-size);
  line-height: 1.08;
  background: var(--dos-blue-bg);
  color: var(--dos-fg);
  text-shadow: none;
  user-select: none;
}

.tui-overlay[hidden] {
  display: none !important;
}

/* MS-DOS EDIT.COM Top Menu Bar & Pull-Down Menus */
.tui-menubar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 14px;
  background: var(--dos-silver-bg);
  color: #000000;
  flex-shrink: 0;
}

.tui-menubar[hidden],
.tui-titlebar[hidden],
.tui-menu-left[hidden],
.tui-pulldown[hidden] {
  display: none !important;
}

.tui-menu-left,
.tui-menu-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.tui-menu-item {
  appearance: none;
  background: none;
  border: none;
  padding: 0 6px;
  font: inherit;
  color: #000000;
  cursor: pointer;
}

.tui-menu-item:hover,
.tui-menu-item:focus-visible,
.tui-menu-item.open {
  background: #000000;
  color: var(--dos-fg-bright);
  outline: none;
}

.tui-menu-item:hover .tui-hotkey,
.tui-menu-item.open .tui-hotkey {
  color: var(--dos-yellow);
}

.tui-pulldown {
  position: absolute;
  top: calc(var(--dos-font-size) * 1.15 + 4px);
  left: 14px;
  z-index: 25;
  min-width: 240px;
  background: var(--dos-silver-bg);
  color: #000000;
  border: 3px double #000000;
  padding: 3px 4px;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.82);
}

.tui-pd-item {
  appearance: none;
  background: none;
  border: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 1px 8px;
  font: inherit;
  color: #000000;
  text-align: left;
  cursor: pointer;
}

.tui-pd-item:hover,
.tui-pd-item:focus-visible,
.tui-pd-item.active {
  background: #000000;
  color: var(--dos-fg-bright);
  outline: none;
}

.tui-pd-sep {
  border-top: 1px solid #000000;
  margin: 3px 0;
}

.tui-hotkey {
  color: var(--vga-4);
}

[data-video="amber"] .tui-hotkey,
[data-video="green"] .tui-hotkey {
  color: #000000;
  text-decoration: underline;
}

.tui-titlebar {
  text-align: center;
  padding: 4px 12px 2px;
  color: var(--dos-fg-bright);
}

.tui-title-badge {
  background: var(--dos-silver-bg);
  color: #0000aa;
  padding: 0 10px;
}

[data-video="amber"] .tui-title-badge,
[data-video="green"] .tui-title-badge {
  color: #000000;
}

.tui-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 2px 12px 6px;
  padding: 10px 16px;
  border: 2px solid var(--dos-fg);
  color: var(--dos-fg-bright);
  white-space: pre-wrap;
  line-height: 1.18;
  user-select: text;
}

.tui-body::-webkit-scrollbar {
  width: 14px;
}

.tui-body::-webkit-scrollbar-track {
  background: var(--dos-silver-bg);
}

.tui-body::-webkit-scrollbar-thumb {
  background: #000000;
  border: 2px solid var(--dos-silver-bg);
}

.tui-statusbar {
  display: flex;
  justify-content: space-between;
  padding: 2px 14px;
  background: var(--dos-cyan-bg);
  color: #000000;
}

.tui-status-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0 4px;
  font: inherit;
  color: #000000;
  cursor: pointer;
}

.tui-status-btn:hover {
  background: #000000;
  color: var(--dos-fg-bright);
}

/* File Picker Modal inside EDIT.COM */
.tui-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 92%);
  max-height: 80%;
  display: flex;
  flex-direction: column;
  background: var(--dos-silver-bg);
  color: #000000;
  border: 3px double #000000;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.72);
  padding: 10px 14px;
  z-index: 20;
}

.tui-modal[hidden] {
  display: none !important;
}

.tui-modal-title {
  text-align: center;
  font-weight: normal;
  margin: 0 0 8px;
  background: #000000;
  color: var(--dos-fg-bright);
  padding: 2px 8px;
}

.tui-file-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px 12px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #000000;
  background: var(--dos-blue-bg);
  color: var(--dos-fg-bright);
}

.tui-file-btn {
  appearance: none;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  color: var(--dos-fg-bright);
  padding: 2px 6px;
  cursor: pointer;
}

.tui-file-btn:hover,
.tui-file-btn:focus-visible {
  background: var(--dos-silver-bg);
  color: #000000;
  outline: none;
}

/* MSD Diagnostics Grid */
.msd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 8px 16px;
  padding: 6px 0;
}

.msd-card {
  background: var(--dos-silver-bg);
  color: #000000;
  padding: 6px 10px;
  box-shadow: 6px 6px 0 #000000;
}

.msd-card-title {
  color: var(--vga-4);
  border-bottom: 1px solid #444;
  margin-bottom: 4px;
}

[data-video="amber"] .msd-card-title,
[data-video="green"] .msd-card-title {
  color: #000000;
  font-weight: bold;
}

/* ==========================================================================
   Award Modular BIOS v4.50PG POST Graphics (Award Emblem + EPA Energy Star)
   ========================================================================== */

.bios-post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 4px;
}

.bios-post-left {
  flex: 1 1 auto;
  min-width: 0;
}

.bios-brand-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.bios-award-logo {
  width: 40px;
  height: 62px;
  image-rendering: pixelated;
  flex-shrink: 0;
  margin-top: 2px;
}

.bios-brand-lines {
  white-space: pre-wrap;
  line-height: 1.22;
}

.bios-epa-logo {
  width: clamp(170px, 22vw, 244px);
  height: auto;
  aspect-ratio: 136 / 84;
  image-rendering: pixelated;
  flex-shrink: 0;
}

[data-video="amber"] .bios-award-logo,
[data-video="amber"] .bios-epa-logo {
  filter: grayscale(1) sepia(1) hue-rotate(-14deg) saturate(4.5) brightness(1.06);
}

[data-video="green"] .bios-award-logo,
[data-video="green"] .bios-epa-logo {
  filter: grayscale(1) sepia(1) hue-rotate(68deg) saturate(5) brightness(1.05);
}

/* ==========================================================================
   Authentic Two-Pane Norton Commander 4.0 / 5.0 (NC.EXE)
   ========================================================================== */

.nc-overlay {
  position: absolute;
  inset: 0;
  z-index: 16;
  display: flex;
  flex-direction: column;
  background: #000000;
  color: var(--dos-cyan);
  font-family: var(--dos-font);
  font-size: var(--dos-font-size);
  line-height: 1.12;
  user-select: none;
  overflow: hidden;
}

.nc-overlay[hidden],
.nc-pulldown[hidden],
.nc-viewer[hidden],
.nc-dialog-backdrop[hidden],
.nc-dual-panels[hidden],
.nc-topbar[hidden] {
  display: none !important;
}

/* Row 1: Top Pull-Down Menu Bar */
.nc-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--dos-cyan-bg);
  color: #000000;
  padding: 1px 10px;
  flex-shrink: 0;
}

.nc-topmenus {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nc-topmenu-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0 8px;
  font: inherit;
  color: #000000;
  cursor: pointer;
}

.nc-hk {
  color: var(--dos-yellow);
}

.nc-topmenu-btn:hover,
.nc-topmenu-btn:focus-visible,
.nc-topmenu-btn.open {
  background: #000000;
  color: var(--dos-fg-bright);
  outline: none;
}

.nc-clock {
  background: var(--dos-cyan-bg);
  color: #000000;
  padding: 0 4px;
}

/* Interactive Cyan Pull-Down Menu Box (F9 / Mouse Click) */
.nc-pulldown {
  position: absolute;
  top: calc(var(--dos-font-size) * 1.12 + 2px);
  left: 8px;
  z-index: 32;
  min-width: 268px;
  background: var(--dos-cyan-bg);
  color: var(--dos-fg-bright);
  border: 3px double #000000;
  padding: 3px 4px;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.88);
}

.nc-pd-item {
  appearance: none;
  background: none;
  border: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 1px 8px;
  font: inherit;
  color: var(--dos-fg-bright);
  cursor: pointer;
  text-align: left;
  white-space: pre;
}

.nc-pd-item:hover,
.nc-pd-item:focus-visible,
.nc-pd-item.active {
  background: #000000;
  color: var(--dos-fg-bright);
  outline: none;
}

.nc-pd-sep {
  border-top: 1px solid #000000;
  margin: 3px 0;
}

/* Rows 2..23: Dual 50%/50% Orthodox Directory Panels */
.nc-dual-panels {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--dos-blue-bg);
  padding: 8px 4px 2px;
}

.nc-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--dos-blue-bg);
  border: 3px double var(--dos-cyan);
}

.nc-panel.hidden-pane {
  visibility: hidden;
}

/* Centered Path Header Badge on Top Double Border */
.nc-panel-title {
  position: absolute;
  top: -0.78em;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1.05;
  padding: 0 7px;
  background: var(--dos-blue-bg);
  color: var(--dos-cyan);
  white-space: nowrap;
  max-width: 86%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  z-index: 2;
}

.nc-panel.active .nc-panel-title {
  background: var(--dos-cyan-bg);
  color: #000000;
}

/* Brief Mode: 3 Equal Columns with Continuous Bright Cyan Vertical Lines */
.nc-brief-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.nc-brief-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--dos-cyan);
  padding-top: 7px;
  overflow: hidden;
}

.nc-brief-col:last-child {
  border-right: none;
}

.nc-col-hdr {
  color: var(--dos-yellow);
  text-align: center;
  padding: 0 4px 2px;
  flex-shrink: 0;
  white-space: pre;
}

.nc-col-hdr-first {
  display: flex;
  justify-content: space-between;
  padding: 0 6px 2px;
  color: var(--dos-yellow);
  flex-shrink: 0;
}

/* Full Mode: Name | Size | Date | Time with Continuous Vertical Dividers */
.nc-full-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-top: 4px;
}

.nc-full-hdr,
.nc-full-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9ch 9ch 7ch;
  align-items: center;
  width: 100%;
}

.nc-full-hdr {
  color: var(--dos-yellow);
  flex-shrink: 0;
}

.nc-full-hdr > span,
.nc-full-row > span {
  padding: 0 5px;
  border-right: 1px solid var(--dos-cyan);
  overflow: hidden;
  white-space: pre;
}

.nc-full-hdr > span:last-child,
.nc-full-row > span:last-child {
  border-right: none;
}

.nc-full-filler {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9ch 9ch 7ch;
}

.nc-full-filler > span {
  border-right: 1px solid var(--dos-cyan);
}

.nc-full-filler > span:last-child {
  border-right: none;
}

/* Individual File / Directory Entry Button */
.nc-entry {
  appearance: none;
  background: none;
  border: none;
  width: 100%;
  padding: 0 5px;
  font: inherit;
  line-height: 1.13;
  text-align: left;
  cursor: pointer;
  white-space: pre;
  overflow: hidden;
  color: var(--dos-cyan);
}

.nc-entry.nc-full-row {
  padding: 0;
}

.nc-entry.is-dir {
  color: var(--dos-fg-bright);
}

.nc-entry.is-exec {
  color: var(--dos-green);
}

.nc-entry.is-tagged {
  color: var(--dos-yellow) !important;
}

/* Active Panel Selection Cursor Bar (Cyan #00AAAA bg, Black #000000 text) */
.nc-panel.active .nc-entry.is-cursor {
  background: var(--dos-cyan-bg);
  color: #000000;
}

.nc-panel.active .nc-entry.is-cursor.nc-full-row > span {
  border-right-color: #000000;
}

.nc-panel.active .nc-entry.is-cursor.is-tagged {
  color: var(--dos-yellow) !important;
}

/* Quick View / Info / Tree Auxiliary Panel Content */
.nc-aux-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
  color: var(--dos-cyan);
  white-space: pre-wrap;
  line-height: 1.15;
  user-select: text;
}

/* Bottom Mini-Status Row inside Each Panel */
.nc-ministatus {
  flex-shrink: 0;
  border-top: 1px solid var(--dos-cyan);
  padding: 2px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--dos-cyan);
  white-space: pre;
  overflow: hidden;
}

/* Internal F3 File Viewer (NCVIEW) */
.nc-viewer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--dos-blue-bg);
}

.nc-viewer-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: var(--dos-cyan-bg);
  color: #000000;
  padding: 1px 10px;
  flex-shrink: 0;
  white-space: pre;
}

.nc-viewer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 14px;
  color: var(--dos-fg-bright);
  white-space: pre-wrap;
  line-height: 1.16;
  user-select: text;
  outline: none;
}

/* NC Classic Modal Dialogs (Grey, Cyan, Red Alert, Drive Selector) */
.nc-dialog-backdrop {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.nc-dialog {
  min-width: min(460px, 92%);
  max-width: min(640px, 94%);
  max-height: 82%;
  display: flex;
  flex-direction: column;
  background: var(--dos-silver-bg);
  color: #000000;
  border: 3px double #000000;
  padding: 10px 18px 12px;
  box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.88);
}

.nc-dialog.theme-cyan {
  background: var(--dos-cyan-bg);
  color: #000000;
}

.nc-dialog.theme-red {
  background: var(--vga-4);
  color: var(--dos-fg-bright);
  border-color: var(--dos-fg-bright);
}

.nc-dlg-title {
  text-align: center;
  margin-bottom: 8px;
  color: inherit;
}

.nc-dlg-body {
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.2;
  margin-bottom: 12px;
}

.nc-dlg-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.nc-dlg-btn {
  appearance: none;
  border: none;
  background: var(--dos-fg-bright);
  color: #000000;
  font: inherit;
  padding: 1px 14px;
  cursor: pointer;
  box-shadow: 6px 6px 0 #000000;
}

.nc-dlg-btn.primary,
.nc-dlg-btn:hover,
.nc-dlg-btn:focus-visible {
  background: var(--dos-yellow);
  color: #000000;
  outline: none;
}

.nc-menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.nc-menu-opt {
  appearance: none;
  background: none;
  border: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 2px 8px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.nc-menu-opt:hover,
.nc-menu-opt:focus-visible {
  background: #000000;
  color: var(--dos-fg-bright);
  outline: none;
}

/* Row 24: Live MS-DOS Command Line inside NC */
.nc-cmdline {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  background: #000000;
  color: var(--dos-fg);
  padding: 1px 4px;
  overflow: hidden;
}

.nc-cmd-input {
  white-space: pre;
}

.nc-cmd-prompt {
  color: var(--dos-fg);
}

#nc-cmd-cursor {
  display: inline-block;
  min-width: 1ch;
  border-bottom: 3px solid var(--dos-fg-bright);
  animation: dos-blink 0.9s steps(1, end) infinite;
}

/* Row 25: Classic 1..10 Function Key Shortcut Button Bar */
.nc-fnbar {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  background: #000000;
  padding: 0 2px 1px;
}

.nc-fn-btn {
  appearance: none;
  border: none;
  background: #000000;
  padding: 0;
  margin: 0;
  font: inherit;
  display: flex;
  align-items: stretch;
  cursor: pointer;
  overflow: hidden;
}

.nc-fn-num {
  background: #000000;
  color: var(--dos-fg-bright);
  padding: 0 1px 0 2px;
  flex-shrink: 0;
}

.nc-fn-lbl {
  background: var(--dos-cyan-bg);
  color: #000000;
  flex: 1 1 auto;
  text-align: left;
  padding: 0 3px;
  white-space: nowrap;
  overflow: hidden;
}

.nc-fn-btn:hover .nc-fn-lbl,
.nc-fn-btn:focus-visible .nc-fn-lbl {
  background: var(--dos-fg-bright);
  color: #000000;
}

.nc-fn-btn:focus-visible {
  outline: none;
}

@media (max-width: 820px) {
  .nc-dual-panels {
    grid-template-columns: 1fr;
  }
  .nc-fnbar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: 2px;
  }
  .bios-epa-logo {
    width: 140px;
  }
}

/* ==========================================================================
   Bottom 486 Hardware Front Panel (7-Segment Turbo LED, HDD LED, Buttons)
   ========================================================================== */

.bezel-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 6px 0;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  user-select: none;
}

.hw-indicators {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 7-Segment Green Turbo Display ("66") */
.turbo-window {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #111310;
  border: 2px inset #8d8677;
  border-radius: 3px;
  padding: 2px 8px;
}

.turbo-digits {
  font-family: var(--dos-font);
  font-size: 18px;
  line-height: 1;
  color: #39ff5a;
  text-shadow: 0 0 8px rgba(57, 255, 90, 0.8);
}

.turbo-digits.slow {
  color: #ffaa22;
  text-shadow: 0 0 8px rgba(255, 170, 34, 0.8);
}

.turbo-caption {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9e988c;
}

.led-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #4a453c;
}

.led-dot {
  width: 9px;
  height: 5px;
  border-radius: 1px;
  border: 1px solid rgba(0, 0, 0, 0.45);
}

.led-pwr {
  background: #2ee84e;
  box-shadow: 0 0 6px #2ee84e;
}

.led-hdd {
  background: #3d2c14;
  transition: background-color 40ms linear, box-shadow 40ms linear;
}

.led-hdd.active {
  background: #ff9d1c;
  box-shadow: 0 0 8px #ff9d1c;
}

.bezel-switches {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bezel-switch-panel {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pc-btn {
  appearance: none;
  background: linear-gradient(180deg, #e5dfd2 0%, #c8c0af 100%);
  color: #36322b;
  border: 1px solid #7f786a;
  border-top-color: #f3efe6;
  border-left-color: #ebe5d8;
  border-radius: 3px;
  padding: 4px 9px;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.pc-btn:hover,
.pc-btn:focus-visible {
  background: linear-gradient(180deg, #efeae0 0%, #d4cdbe 100%);
  color: #151310;
  outline: none;
}

.pc-btn:active {
  border-top-color: #7f786a;
  border-left-color: #7f786a;
  transform: translateY(1px);
}

.pc-btn-reset {
  color: #7c241b;
}

/* ⚙ SETUP toggle only exists on narrow screens (collapses the five hardware switches) */
.pc-btn-setup {
  display: none;
}

/* Mobile Touch Bar inside CRT */
.dos-touchbar {
  display: none;
  position: relative;
  z-index: 12;
  gap: 6px;
  padding: 7px 10px;
  background: #111216;
  border-top: 1px solid #333;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 0 0 auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #444 #111216;
}

.dos-tkey {
  appearance: none;
  flex: 0 0 auto;
  background: #202228;
  color: var(--dos-fg-bright);
  border: 1px solid #555;
  border-radius: 3px;
  padding: 4px 9px;
  font-family: var(--dos-font);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.dos-tkey:active {
  background: var(--dos-fg-bright);
  color: #000000;
}

@media (max-width: 768px) {
  .pc-monitor {
    padding: 6px;
  }

  .crt-collar {
    padding: 4px;
    border-radius: 10px;
  }

  .dos-screen {
    padding: 12px 12px 18px;
  }

  .brand-model {
    display: none;
  }

  .dos-touchbar {
    display: flex;
  }
}

/* ==========================================================================
   Phone layout (≤ 600px): single-column hints, collapsible SETUP panel,
   wrapping bezel links, shorter prompt area
   ========================================================================== */

@media (max-width: 600px) {
  :root {
    --dos-font-size: 15px;
  }

  .pc-monitor {
    padding: 4px 4px 2px;
  }

  .bezel-top {
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 2px 4px 6px;
  }

  .bezel-top-links {
    flex-wrap: wrap;
    gap: 6px;
  }

  .os-switch-link {
    font-size: 10px;
    padding: 3px 8px;
  }

  .dos-screen {
    padding: 8px 8px 14px;
  }

  .dos-line,
  .dos-box {
    font-size: 15px;
  }

  .dos-box {
    font-size: 12px;
  }

  /* MOTD hint rows: command on one line, description underneath in a smaller dim font */
  .dos-hint-row {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 1ch;
    margin-bottom: 2px;
  }

  .dos-hint-row .dos-cmd-chip {
    min-width: 0;
    padding: 1px 4px;
    margin-left: -4px;
  }

  .dos-hint-desc {
    font-size: 12px;
    line-height: 1.2;
    color: var(--dos-fg-dim);
    padding-left: 2ch;
  }

  .dos-tkey {
    font-size: 15px;
    padding: 6px 10px;
  }

  .bezel-bottom {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px 2px 0;
  }

  .hw-indicators {
    gap: 10px;
  }

  .bezel-switches {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .pc-btn-setup {
    display: inline-block;
  }

  .bezel-switch-panel {
    display: none;
    flex-basis: 100%;
    justify-content: flex-end;
    gap: 5px;
    padding-top: 4px;
  }

  .bezel-switch-panel.open {
    display: flex;
  }

  .bezel-switch-panel .pc-btn {
    font-size: 9.5px;
    padding: 3px 6px;
  }

  .boot-skip-hint {
    right: 8px;
    bottom: 54px;
    font-size: 12px;
  }
}

/* ==========================================================================
   Accessibility: keyboard focus rings & reduced motion
   ========================================================================== */

.pc-btn:focus-visible,
.os-switch-link:focus-visible,
.dos-tkey:focus-visible,
.tui-menu-item:focus-visible,
.tui-pd-item:focus-visible,
.tui-file-btn:focus-visible,
.tui-status-btn:focus-visible,
.nc-topmenu-btn:focus-visible,
.nc-pd-item:focus-visible,
.nc-entry:focus-visible,
.nc-dlg-btn:focus-visible,
.nc-menu-opt:focus-visible,
.nc-fn-btn:focus-visible,
.dos-cmd-chip:focus-visible,
.dos-link:focus-visible {
  outline: 2px solid var(--dos-yellow) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #dos-cursor,
  #nc-cmd-cursor {
    animation: none !important;
  }
  .degaussing .vga-tube {
    animation: none !important;
  }
  .vga-tube::before {
    background: none !important; /* no scanline flicker */
  }
  .boot-skip-hint {
    animation: none !important;
  }
  .win31-flag,
  .win31-trail i {
    animation: none !important;
  }
  .led-hdd {
    transition: none !important;
  }
}

/* ==========================================================================
   Generic 80x25 VGA Text-Mode Frame Buffer (DEFRAG.EXE, NIBBLES.BAS)
   ========================================================================== */

.vga80-overlay {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: var(--vga80-bg, #0000aa);
  font-family: var(--dos-font);
  user-select: none;
  outline: none;
}

.vga80-overlay[hidden] {
  display: none !important;
}

.vga80-grid {
  --v80-fs: 16px;
  font-size: var(--v80-fs);
  line-height: 1;
  white-space: pre;
  flex: 0 0 auto;
  width: 40em; /* 80 cells x 0.5em (Px437 8x16 advance) */
  margin: auto;
  cursor: default;
}

.v80-row {
  height: 1em;
  line-height: 1em;
  overflow: hidden;
  white-space: pre;
}

.v80-row span {
  display: inline-block;
  height: 1em;
  line-height: 1em;
  vertical-align: top;
}

/* Exact VGA attribute palette (foreground fN / background bN) */
.f0 { color: #000000; } .f1 { color: #0000aa; } .f2 { color: #00aa00; } .f3 { color: #00aaaa; }
.f4 { color: #aa0000; } .f5 { color: #aa00aa; } .f6 { color: #aa5500; } .f7 { color: #aaaaaa; }
.f8 { color: #555555; } .f9 { color: #5555ff; } .f10 { color: #55ff55; } .f11 { color: #55ffff; }
.f12 { color: #ff5555; } .f13 { color: #ff55ff; } .f14 { color: #ffff55; } .f15 { color: #ffffff; }
.b0 { background: #000000; } .b1 { background: #0000aa; } .b2 { background: #00aa00; } .b3 { background: #00aaaa; }
.b4 { background: #aa0000; } .b5 { background: #aa00aa; } .b6 { background: #aa5500; } .b7 { background: #aaaaaa; }
.b8 { background: #555555; } .b9 { background: #5555ff; } .b10 { background: #55ff55; } .b11 { background: #55ffff; }
.b12 { background: #ff5555; } .b13 { background: #ff55ff; } .b14 { background: #ffff55; } .b15 { background: #ffffff; }

@keyframes v80-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.v80-blink {
  animation: v80-blink 0.9s steps(1, end) infinite;
}

/* Hercules / MDA monochrome adapters render the 80x25 buffer in their phosphor colour */
[data-video="amber"] .vga80-overlay,
[data-video="green"] .vga80-overlay {
  filter: grayscale(1) contrast(1.15);
}

[data-video="amber"] .vga80-grid {
  filter: sepia(1) saturate(4) hue-rotate(-14deg);
}

[data-video="green"] .vga80-grid {
  filter: sepia(1) saturate(5) hue-rotate(68deg);
}

/* ==========================================================================
   Microsoft Windows 3.1 Startup Splash (WIN.COM)
   ========================================================================== */

.win31-splash {
  position: absolute;
  inset: 0;
  z-index: 19;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #000000;
  font-family: "Times New Roman", Georgia, serif;
  user-select: none;
  cursor: default;
}

.win31-splash[hidden] {
  display: none !important;
}

.win31-splash.failed {
  background: #000000;
}

.win31-splash.failed .win31-logo-wrap {
  display: none;
}

.win31-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.win31-bitmap {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  aspect-ratio: 4 / 3;
  image-rendering: pixelated;
  user-select: none;
}

.win31-trail {
  position: absolute;
  left: 0;
  top: 54%;
  width: 150px;
  height: 100px;
  pointer-events: none;
}

.win31-trail i {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #000000;
  opacity: 0;
  animation: win31-trail-in 1.2s ease-out forwards;
}

.win31-trail i:nth-child(1) { left: 0; top: 70px; background: #d40000; animation-delay: 0.05s; }
.win31-trail i:nth-child(2) { left: 14px; top: 58px; background: #d40000; animation-delay: 0.1s; }
.win31-trail i:nth-child(3) { left: 28px; top: 48px; background: #008a00; animation-delay: 0.15s; }
.win31-trail i:nth-child(4) { left: 42px; top: 40px; background: #0000c8; animation-delay: 0.2s; }
.win31-trail i:nth-child(5) { left: 56px; top: 34px; background: #e0c000; animation-delay: 0.25s; }
.win31-trail i:nth-child(6) { left: 70px; top: 30px; background: #000000; animation-delay: 0.3s; width: 8px; height: 8px; }
.win31-trail i:nth-child(7) { left: 10px; top: 86px; background: #000000; animation-delay: 0.12s; width: 4px; height: 4px; }
.win31-trail i:nth-child(8) { left: 24px; top: 78px; background: #000000; animation-delay: 0.18s; width: 4px; height: 4px; }
.win31-trail i:nth-child(9) { left: 40px; top: 66px; background: #000000; animation-delay: 0.24s; width: 5px; height: 5px; }
.win31-trail i:nth-child(10) { left: 58px; top: 56px; background: #000000; animation-delay: 0.3s; width: 6px; height: 6px; }
.win31-trail i:nth-child(11) { left: 78px; top: 48px; background: #000000; animation-delay: 0.36s; width: 7px; height: 7px; }
.win31-trail i:nth-child(12) { left: 96px; top: 44px; background: #000000; animation-delay: 0.42s; width: 9px; height: 9px; }

@keyframes win31-trail-in {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.win31-flag {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 150px;
  height: 130px;
  margin-left: 110px;
  transform: skewY(-9deg) perspective(300px) rotateY(16deg);
  filter: drop-shadow(0 0 0 #000);
  animation: win31-fly 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes win31-fly {
  from { transform: translateX(-140px) skewY(-9deg) perspective(300px) rotateY(16deg) scale(0.6); opacity: 0; }
  to { transform: translateX(0) skewY(-9deg) perspective(300px) rotateY(16deg) scale(1); opacity: 1; }
}

.win31-flag .pane {
  display: block;
  border: 3px solid #000000;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0 4px, transparent 4px 10px);
}

.pane-red { background-color: #e0201c; }
.pane-green { background-color: #15a03a; }
.pane-blue { background-color: #1444e0; }
.pane-yellow { background-color: #f6cf16; }

.win31-text {
  position: relative;
  z-index: 2;
  text-align: left;
  line-height: 1.05;
}

.win31-ms {
  font-size: 20px;
  letter-spacing: 0.02em;
}

.win31-ms sup {
  font-size: 9px;
}

.win31-win {
  font-size: 58px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2px 0 8px;
}

.win31-ver {
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
}

.win31-copy {
  margin-top: 26px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  color: #222;
}

.win31-fail {
  font-family: var(--dos-font);
  font-size: var(--dos-font-size);
  color: #aaaaaa;
  padding: 24px 32px;
  align-self: flex-start;
  width: 100%;
  text-align: left;
}

.win31-fail[hidden] {
  display: none !important;
}

@media (max-width: 600px) {
  .win31-logo-wrap {
    flex-direction: column;
    gap: 12px;
  }
  .win31-flag {
    width: 110px;
    height: 96px;
    margin-left: 0;
  }
  .win31-trail {
    display: none;
  }
  .win31-win {
    font-size: 40px;
  }
  .win31-text {
    text-align: center;
  }
}