/* ===== Tokens ===== */
:root {
  --ui-face: #c3c3c3;
  --ui-light: #ffffff;
  --ui-hi: #dfdfdf;
  --ui-shadow: #808080;
  --ui-dark: #0a0a0a;
  --ui-text: #0a0a0a;
  --bevel-out: inset -1px -1px var(--ui-dark), inset 1px 1px var(--ui-light), inset -2px -2px var(--ui-shadow), inset 2px 2px var(--ui-hi);
  --bevel-in: inset -1px -1px var(--ui-light), inset 1px 1px var(--ui-shadow), inset -2px -2px var(--ui-hi), inset 2px 2px var(--ui-dark);

  --accent: #39ff14;
  --accent-2: #ff2bd6;
  --accent-glow: rgba(57, 255, 20, .55);
  --desk: #0b7676;
  --desk-2: #064848;
  --title-a: #000080;
  --title-b: #1084d0;
  --danger: #ff3344;
  --amber: #ffb000;

  --page: #050806;
  --screen: #020a04;
  --phosphor: #8dffa8;

  --font-ui: 'Pixelify Sans', 'Tahoma', 'Segoe UI', system-ui, sans-serif;
  --font-term: 'VT323', 'Courier New', monospace;
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;

  --tb-h: 42px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html[data-motion="reduced"] { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--page);
  color: var(--phosphor);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.35;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.booting { overflow: hidden; }
img, canvas { display: block; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px dotted var(--accent); outline-offset: 2px; }
code { font-family: var(--font-term); font-size: 1.1em; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 8px; z-index: 5000; background: #000; color: #fff; padding: 8px 12px; }


/* ===== Retro chrome ===== */
.btn {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: var(--ui-face);
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.1;
  padding: 6px 12px;
  min-height: 32px;
  cursor: pointer;
  box-shadow: var(--bevel-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  touch-action: manipulation;
}
.btn:hover { background: #cfcfcf; }
.btn:active, .btn[aria-pressed="true"], .btn.pressed {
  box-shadow: var(--bevel-in);
  background: #b9b9b9;
  padding-top: 7px; padding-bottom: 5px;
}
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn:disabled, .btn[aria-disabled="true"] { color: #8a8a8a; text-shadow: 1px 1px #fff; cursor: not-allowed; }
.btn:disabled:active, .btn[aria-disabled="true"]:active { box-shadow: var(--bevel-out); padding: 6px 12px; }
.btn-sm { font-size: 13px; min-height: 26px; padding: 3px 8px; }
.btn-sm:active, .btn-sm[aria-pressed="true"] { padding: 4px 8px 2px; }
.btn img { width: 20px; height: 20px; }

.screen {
  background: var(--screen);
  color: var(--phosphor);
  box-shadow: var(--bevel-in);
  font-family: var(--font-term);
}

.meter {
  --p: 0;
  position: relative;
  height: 24px;
  background: #fff;
  box-shadow: var(--bevel-in);
  padding: 3px;
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  width: calc(var(--p) * 1%);
  background: repeating-linear-gradient(90deg, var(--title-a) 0 9px, transparent 9px 11px);
  transition: width .9s steps(10, end);
}
.meter-alt > i { background: repeating-linear-gradient(90deg, var(--accent) 0 9px, transparent 9px 11px); filter: brightness(.8); }
.meter > span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 20px/1 var(--font-term);
  color: #000;
  text-shadow: 0 0 2px #fff, 0 0 3px #fff;
  white-space: nowrap;
}

.src-badge {
  font: 12px/1 var(--font-pixel);
  padding: 4px 5px 3px;
  background: #000;
  color: var(--accent);
  letter-spacing: .04em;
  white-space: nowrap;
}
body.is-waiting .src-badge { color: #000; background: var(--amber); animation: blink-badge 2.4s steps(1) infinite; }
body.is-error .src-badge { background: var(--danger); color: #fff; }
@keyframes blink-badge { 0%, 85% { opacity: 1; } 86%, 100% { opacity: .55; } }

/* ===== Windows ===== */
.win {
  position: absolute;
  background: var(--ui-face);
  color: var(--ui-text);
  box-shadow: var(--bevel-out), 6px 8px 0 rgba(0, 0, 0, .35);
  padding: 3px;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: calc(100% - 12px);
  max-height: calc(100% - var(--tb-h) - 14px);
  outline: none;
}
.win.min { display: none; }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: calc(100% - var(--tb-h)); max-height: none; max-width: none; }
.win.dragging { opacity: .92; }
.win.opening { animation: win-in .2s steps(4, end); }
.win.closing { animation: win-out .15s steps(3, end) forwards; pointer-events: none; }
@keyframes win-in { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes win-out { to { transform: scale(.75); opacity: 0; } }

.win-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 3px 2px 6px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
}
.desktop .win-title { cursor: grab; touch-action: none; }
.win:not(.active):not(.popup) .win-title { background: linear-gradient(90deg, #7b7b7b, #b4b4b4); color: #e6e6e6; }
.win-title img { width: 18px; height: 18px; flex: none; }
.win-title h2 {
  margin: 0; flex: 1; min-width: 0;
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-ctrls { display: flex; gap: 2px; flex: none; }
.wc { width: 24px; height: 22px; min-height: 0; padding: 0; position: relative; }
.wc:active { padding: 0; }
.wc::before { content: ''; position: absolute; }
.wc-min::before { width: 8px; height: 2px; background: #000; bottom: 6px; left: 7px; }
.wc-max::before { width: 10px; height: 9px; border: 1px solid #000; border-top-width: 2px; left: 6px; top: 5px; }
.wc-close::before, .wc-close::after {
  content: ''; position: absolute; width: 11px; height: 2px; background: #000; left: 6px; top: 10px;
}
.wc-close::before { transform: rotate(45deg); }
.wc-close::after { transform: rotate(-45deg); }
.win-body { padding: 10px; overflow: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.win-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Popups */
.popup { min-width: 0; max-width: calc(100% - 12px); }
.popup .win-title { background: linear-gradient(90deg, var(--title-a), var(--title-b)); }
.popup-error .win-title { background: linear-gradient(90deg, #7a0010, #e0182d); }
.popup-mutation .win-title { background: linear-gradient(90deg, var(--title-a), var(--accent)); color: #000; }
.popup-mutation .win-title h2 { color: #fff; text-shadow: 1px 1px 0 #000; }
.popup-body { display: flex; gap: 12px; align-items: flex-start; padding: 14px 12px 8px; }
.popup-icon { width: 32px; height: 32px; flex: none; }
.popup-text { font-size: 15px; line-height: 1.35; }
.popup-text p { margin: 0 0 8px; }
.popup-text .meter { margin-top: 6px; }
.popup-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px 10px 10px; }
.popup-btns .btn { min-width: 76px; }
.mut-pop { display: flex; gap: 12px; align-items: center; }
.mut-pop canvas { width: 128px; height: 128px; flex: none; background: var(--screen); box-shadow: var(--bevel-in); }
.mut-pop small { font: 10px var(--font-pixel); color: #555; }
.mut-pop strong { display: block; font: 15px/1.3 var(--font-pixel); margin: 6px 0; }
.mut-pop p { margin: 0; font-size: 14px; }

/* Notepad */
.notepad {
  margin: 0;
  background: #fff;
  box-shadow: var(--bevel-in);
  padding: 10px;
  font: 18px/1.25 var(--font-term);
  white-space: pre-wrap;
  word-break: break-word;
  color: #111;
}

/* Toasts */
.toasts {
  position: fixed; right: 12px; bottom: calc(var(--tb-h) + 12px + env(safe-area-inset-bottom));
  z-index: 4000; display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none; max-width: min(340px, calc(100vw - 24px));
}
.toast {
  background: #ffffe1; color: #000; border: 1px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .5);
  padding: 8px 10px; font-size: 14px;
  animation: toast-in .25s steps(3, end);
  pointer-events: auto;
}
.toast b { display: block; font: 10px/1.4 var(--font-pixel); margin-bottom: 3px; }
.toast.out { opacity: 0; transition: opacity .3s; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

/* ===== Boot screen ===== */
.boot {
  position: fixed; inset: 0; z-index: 6000;
  background: #000; color: #bbb;
  display: grid; place-items: center;
  font-family: var(--font-term);
  cursor: pointer;
  transition: opacity .45s steps(4, end);
}
.boot.done { opacity: 0; pointer-events: none; }
.boot-inner { width: min(640px, calc(100vw - 32px)); }
.boot-logo {
  font: clamp(22px, 7vw, 44px)/1 var(--font-pixel);
  color: var(--accent);
  text-shadow: 3px 3px 0 #0b3d0b, 0 0 18px rgba(57, 255, 20, .45);
  margin-bottom: 20px;
}
.boot-lines { margin: 0 0 14px; min-height: 11em; font: clamp(17px, 4.4vw, 22px)/1.25 var(--font-term); white-space: pre-wrap; color: #c8c8c8; }
.boot-bar { height: 18px; border: 2px solid #555; padding: 2px; }
.boot-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 13px); transition: width .2s steps(3); }
.boot-hint { margin: 12px 0 0; font-size: 18px; color: #666; animation: blink-badge 1.4s steps(1) infinite; }

.dots::after { content: '...'; animation: dots 1.2s steps(4, end) infinite; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; }
@keyframes dots { to { width: 1.5em; } }

/* ===== Reduced motion ===== */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}