/* ==========================================================
   BASE — zmienne, reset, wspólne "klocki" w stylu Windows 98
   ========================================================== */

:root {
  /* Kolory marki */
  --desktop-bg: #087877;
  --brand-pink: #ff2bd6;
  --brand-black: #0a0a0a;

  /* Paleta Win98 */
  --face: #c0c0c0;
  --light: #ffffff;
  --light-2: #dfdfdf;
  --shadow: #808080;
  --dark: #0a0a0a;
  --title-active: linear-gradient(90deg, #000080, #1084d0);
  --title-inactive: linear-gradient(90deg, #808080, #b5b5b5);
  --highlight: #000080;
  --highlight-text: #ffffff;

  /* Wymiary */
  --taskbar-h: 42px;
  --radius: 0;

  /* Czcionki */
  --font-ui: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
  --font-pixel: "Pixelify Sans", "VT323", monospace;   /* banner w MENU */
  --font-title: "Press Start 2P", "VT323", monospace;  /* nagłówki */
  --font-mono: "VT323", "Courier New", monospace;

  /* Obramowania 3D (box-shadow) */
  --bevel-out: inset -1px -1px var(--dark), inset 1px 1px var(--light),
               inset -2px -2px var(--shadow), inset 2px 2px var(--light-2);
  --bevel-in:  inset -1px -1px var(--light), inset 1px 1px var(--dark),
               inset -2px -2px var(--light-2), inset 2px 2px var(--shadow);
  --bevel-field: inset -1px -1px var(--light), inset 1px 1px var(--shadow),
                 inset -2px -2px var(--light-2), inset 2px 2px var(--dark);
  --bevel-thin-in: inset -1px -1px var(--light), inset 1px 1px var(--shadow);
}

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

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--desktop-bg);
  color: #000;
  font-family: var(--font-ui);
  font-size: 13px;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Przycisk Win98 ---------- */
.btn {
  background: var(--face);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--bevel-out);
  padding: 4px 12px;
  min-height: 26px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}
.btn:active:not(:disabled),
.btn.is-pressed {
  box-shadow: var(--bevel-in);
}
.btn:active:not(:disabled) > * { transform: translate(1px, 1px); }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn:disabled {
  color: var(--shadow);
  text-shadow: 1px 1px 0 var(--light);
  cursor: not-allowed;
}

/* ---------- Pole tekstowe / select ---------- */
.field {
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: var(--bevel-field);
  padding: 4px 6px;
}
select.field { padding-right: 4px; }

/* ---------- Pomocnicze ---------- */
.pixelated { image-rendering: pixelated; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
.separator {
  height: 0;
  margin: 4px 2px;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--light);
}