/* ============================================================================
   Peter's PC — VTSL/OS 1.0
   A 1997 workstation, rendered in the VTSL cloud palette.
   Rules of the house: no border-radius, 2px chiseled bevels, everything snaps.
   ============================================================================ */

:root {
  /* --- brand, carried over from the original design canvas --- */
  --accent:      oklch(0.72 0.14  255);
  --accent-hi:   oklch(0.84 0.10  255);
  --link:        oklch(0.78 0.12  255);
  --ink:         oklch(0.17 0.02  255);
  --ghost:       oklch(0.85 0.06  255);

  /* --- OS chrome --- */
  --desk:        oklch(0.145 0.022 258);
  --desk-2:      oklch(0.185 0.028 262);
  --face:        oklch(0.255 0.020 255);   /* window + button face   */
  --face-2:      oklch(0.225 0.018 255);   /* sunken well            */
  --bev-hi:      oklch(0.40  0.028 255);   /* top-left highlight     */
  --bev-lo:      oklch(0.105 0.014 255);   /* bottom-right shadow    */
  --edge:        oklch(0.32  0.024 255);

  --text:        oklch(0.93 0.008 255);
  --dim:         oklch(0.72 0.015 255);
  --dimmer:      oklch(0.60 0.018 255);
  --term:        oklch(0.89 0.09  225);    /* CRT phosphor, ice blue */
  --term-dim:    oklch(0.62 0.06  225);
  --warn:        oklch(0.82 0.15  75);

  --title-on-a:  oklch(0.32 0.09 262);
  --title-on-b:  oklch(0.58 0.15 255);
  --title-off-a: oklch(0.26 0.015 255);
  --title-off-b: oklch(0.33 0.018 255);

  --taskbar-h: 44px;
  --hatch: repeating-linear-gradient(135deg, oklch(0.27 0.03 255) 0 9px, oklch(0.23 0.025 255) 9px 18px);

  --cur-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='26'%3E%3Cellipse cx='17' cy='19' rx='15' ry='6.5' fill='%2381a9ec'/%3E%3Ccircle cx='12' cy='12' r='7.5' fill='%2381a9ec'/%3E%3Ccircle cx='23' cy='14' r='6' fill='%23a9c6f4'/%3E%3Crect x='28' y='20' width='5' height='5' fill='%23e9edf5'/%3E%3C/svg%3E") 4 4, auto;
  --cur-point: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='26'%3E%3Cellipse cx='17' cy='19' rx='15' ry='6.5' fill='%23e9edf5'/%3E%3Ccircle cx='12' cy='12' r='7.5' fill='%23e9edf5'/%3E%3Ccircle cx='23' cy='14' r='6' fill='%2381a9ec'/%3E%3Crect x='28' y='20' width='5' height='5' fill='%2381a9ec'/%3E%3C/svg%3E") 4 4, pointer;

  --sys: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --crt: 'VT323', 'Space Mono', ui-monospace, monospace;
  --body: Archivo, Helvetica, Arial, sans-serif;
  --display: 'Archivo Black', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  background-color: #121620;
  background: var(--desk);
  color: var(--text);
  font-family: var(--sys);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  cursor: var(--cur-default);
  overflow: hidden;                 /* the desktop does not scroll */
  overscroll-behavior: none;
}
button, a, [role="button"] { cursor: var(--cur-point); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; }

:focus-visible { outline: 2px dotted var(--accent-hi); outline-offset: 1px; }
::selection { background: var(--accent); color: var(--ink); }

/* Chiseled edges — the whole visual language of this thing. */
.bev-out { border: 2px solid; border-color: var(--bev-hi) var(--bev-lo) var(--bev-lo) var(--bev-hi); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--accent); color: var(--ink); padding: 10px 16px; font-weight: 700; }
.skip:focus { left: 0; }

/* ============================ BOOT / POST ================================= */
#boot {
  position: fixed; inset: 0; z-index: 900; background: #05070c;
  font-family: var(--crt); font-size: 21px; line-height: 1.32; color: var(--term);
  padding: clamp(18px, 5vw, 60px); overflow: hidden; white-space: pre-wrap;
  text-shadow: 0 0 6px oklch(0.7 0.12 225 / 0.55);
}
#boot .cursor { display: inline-block; width: 0.55em; height: 1em; background: var(--term); vertical-align: -0.14em; animation: blink 1s steps(1) infinite; }
#boot .skiphint { position: absolute; right: clamp(18px,5vw,60px); bottom: clamp(18px,5vw,60px); font-size: 17px; color: var(--term-dim); }
@keyframes blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
#boot.done { animation: crt-off 420ms cubic-bezier(.6,0,.9,.2) forwards; pointer-events: none; }
@keyframes crt-off {
  0%   { transform: scaleY(1);     opacity: 1; filter: brightness(1); }
  55%  { transform: scaleY(0.012); opacity: 1; filter: brightness(3); }
  100% { transform: scaleY(0.012) scaleX(0); opacity: 0; filter: brightness(3); }
}

/* ============================ DESKTOP ===================================== */
#desktop {
  position: fixed; inset: 0 0 var(--taskbar-h) 0;
  background:
    radial-gradient(120% 90% at 22% 8%, var(--desk-2) 0%, transparent 62%),
    var(--desk);
  overflow: hidden;
}

/* brand clouds, drifting behind everything */
.driftfield { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.drifter { position: absolute; left: 0; opacity: 0.06; animation: drift linear infinite; }
@keyframes drift { from { transform: translateX(-32vw) } to { transform: translateX(132vw) } }
@keyframes bob   { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes pop   { from { transform: scale(.5); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.cloud { position: relative; display: block; }
.cloud i { position: absolute; border-radius: 999px; background: var(--cf, var(--ghost)); display: block; }
.cloud .b { left: 0; bottom: 0; width: 100%; height: 52%; }
.cloud .l { left: 12%; top: 0; width: 46%; aspect-ratio: 1; }
.cloud .r { right: 5%; top: 15%; width: 37%; aspect-ratio: 1; background: var(--cf2, var(--cf, var(--ghost))); }

/* dither + scanlines: the CRT is the texture, applied only to the desktop */
#desktop::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.5;
  background-image:
    radial-gradient(oklch(0.5 0.05 255 / 0.16) 1px, transparent 1px),
    radial-gradient(oklch(0.5 0.05 255 / 0.10) 1px, transparent 1px);
  background-size: 4px 4px, 4px 4px;
  background-position: 0 0, 2px 2px;
}
#crt {
  position: fixed; inset: 0; pointer-events: none; z-index: 700;
  background: repeating-linear-gradient(to bottom, oklch(0 0 0 / 0.20) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: 0.55;
}
#crt::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 110% at 50% 50%, transparent 55%, oklch(0 0 0 / 0.5) 100%);
}

/* ---------------------------- desktop icons ------------------------------ */
#icons {
  position: absolute; inset: 10px auto 10px 10px; z-index: 2;
  display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start;
  gap: 2px; max-height: calc(100% - 20px);
}
.dicon {
  width: 108px; padding: 9px 4px 8px; background: none; border: 1px dotted transparent;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: var(--text); font-family: var(--sys); font-size: 11px; line-height: 1.3; text-align: center;
}
.dicon:hover .glyph { filter: brightness(1.18); }
.dicon .label { padding: 1px 4px; overflow-wrap: anywhere; hyphens: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dicon.sel { border-color: oklch(0.75 0.05 255 / 0.7); }
.dicon.sel .label { background: var(--accent); color: var(--ink); }

/* Icons are drawn, not imported — 32px CSS constructions. */
.glyph { width: 34px; height: 30px; position: relative; flex: none; image-rendering: pixelated; }
.glyph .folder-b { position: absolute; inset: 6px 0 0 0; background: oklch(0.66 0.13 250); border: 2px solid; border-color: oklch(0.80 0.10 250) oklch(0.28 0.06 250) oklch(0.28 0.06 250) oklch(0.80 0.10 250); }
.glyph .folder-t { position: absolute; left: 0; top: 1px; width: 46%; height: 7px; background: oklch(0.72 0.12 250); border: 2px solid; border-color: oklch(0.84 0.09 250) oklch(0.30 0.06 250) transparent oklch(0.84 0.09 250); }
.glyph .page { position: absolute; inset: 1px 5px 1px 5px; background: oklch(0.90 0.01 255); border: 2px solid oklch(0.35 0.02 255); }
.glyph .page::before { content: ""; position: absolute; inset: 4px 3px auto 3px; height: 2px; background: oklch(0.45 0.02 255); box-shadow: 0 4px 0 oklch(0.45 0.02 255), 0 8px 0 oklch(0.45 0.02 255), 0 12px 0 oklch(0.45 0.02 255); }
.glyph .exe { position: absolute; inset: 1px 3px; background: oklch(0.30 0.03 258); border: 2px solid; border-color: oklch(0.52 0.05 258) oklch(0.14 0.02 258) oklch(0.14 0.02 258) oklch(0.52 0.05 258); }
.glyph .exe::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent-hi); font-size: 13px; }
.glyph .term { position: absolute; inset: 1px 3px; background: #05070c; border: 2px solid; border-color: oklch(0.48 0.04 255) oklch(0.12 0.02 255) oklch(0.12 0.02 255) oklch(0.48 0.04 255); }
.glyph .term::after { content: ">_"; position: absolute; left: 4px; top: 2px; color: var(--term); font-family: var(--crt); font-size: 17px; }
.glyph .bin { position: absolute; inset: 3px 7px 0 7px; background: oklch(0.42 0.02 255); border: 2px solid; border-color: oklch(0.60 0.03 255) oklch(0.18 0.01 255) oklch(0.18 0.01 255) oklch(0.60 0.03 255); }
.glyph .bin::before { content: ""; position: absolute; left: -4px; right: -4px; top: -3px; height: 4px; background: oklch(0.55 0.03 255); }
.glyph .zip { position: absolute; inset: 1px 5px; background: oklch(0.72 0.10 90); border: 2px solid; border-color: oklch(0.86 0.09 90) oklch(0.32 0.05 90) oklch(0.32 0.05 90) oklch(0.86 0.09 90); }
.glyph .zip::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: repeating-linear-gradient(to bottom, oklch(0.25 0.03 90) 0 3px, transparent 3px 6px); }
.glyph .cloudy { position: absolute; inset: 4px 0; --cf: var(--accent); --cf2: var(--accent-hi); }

/* Glyphs also render at 15px in title bars and 14px on taskbar buttons —
   the drawn contents have to come down with the box or they spill out. */
.tglyph .term::after { font-size: 10px; left: 2px; top: -2px; }
.tglyph .exe::after  { font-size: 8px; }
.tglyph .zip::after  { width: 2px; margin-left: -1px; }
.tglyph .folder-t    { height: 4px; }
.mitem .glyph .term::after { font-size: 13px; top: -1px; }
.mitem .glyph .exe::after  { font-size: 10px; }
.fileitem .glyph .exe::after { font-size: 12px; }

/* ============================ WINDOWS ===================================== */
#windows { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.win {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column;
  background: var(--face); min-width: 260px; min-height: 140px;
  box-shadow: 3px 3px 0 oklch(0 0 0 / 0.45), 0 14px 44px oklch(0 0 0 / 0.5);
  animation: pop 130ms ease-out;
}
.win[hidden] { display: none; }
.win.min { display: none; }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }

.tbar {
  display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 7px; flex: none;
  background: linear-gradient(90deg, var(--title-off-a), var(--title-off-b));
  color: oklch(0.72 0.015 255); user-select: none; touch-action: none;
}
.win.focus .tbar { background: linear-gradient(90deg, var(--title-on-a), var(--title-on-b)); color: oklch(0.98 0.01 255); }
.tbar .tname { flex: 1; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbar .tglyph { width: 15px; height: 13px; flex: none; }
.tbtns { display: flex; gap: 3px; flex: none; }
.tbtn {
  width: 20px; height: 18px; background: var(--face); color: var(--text);
  border: 2px solid; border-color: var(--bev-hi) var(--bev-lo) var(--bev-lo) var(--bev-hi);
  font-family: var(--sys); font-size: 11px; font-weight: 700; line-height: 1;
  display: grid; place-items: center; padding: 0;
}
.tbtn:hover { background: var(--edge); }
.tbtn:active { border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); }
.tbtn.x:hover { background: oklch(0.55 0.20 25); color: #fff; }

.wbody { flex: 1; min-height: 0; overflow: auto; background: var(--face); }
.wbody.sunken { margin: 3px; background: var(--face-2); border: 2px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); }
.wbody.pad { padding: 16px 18px; }
.wbody::-webkit-scrollbar { width: 15px; height: 15px; }
.wbody::-webkit-scrollbar-track { background: var(--face-2); }
.wbody::-webkit-scrollbar-thumb { background: var(--face); border: 2px solid; border-color: var(--bev-hi) var(--bev-lo) var(--bev-lo) var(--bev-hi); }

.grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
  background: repeating-linear-gradient(135deg, transparent 0 2px, var(--bev-hi) 2px 3px, transparent 3px 5px); }

.statusbar { flex: none; display: flex; gap: 3px; padding: 3px; font-size: 11px; color: var(--dim); }
.statusbar span { padding: 2px 7px; border: 2px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); }
.statusbar span:first-child { flex: 1; }

/* ============================ TASKBAR ===================================== */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); z-index: 600;
  display: flex; align-items: center; gap: 5px; padding: 4px 5px;
  background: var(--face); border-top: 2px solid var(--bev-hi);
}
#start {
  display: flex; align-items: center; gap: 7px; padding: 4px 11px 4px 7px; flex: none;
  background: var(--face); color: var(--text); font-family: var(--sys); font-weight: 700; font-size: 12.5px;
  border: 2px solid; border-color: var(--bev-hi) var(--bev-lo) var(--bev-lo) var(--bev-hi);
}
#start .cloud { width: 26px; height: 17px; --cf: var(--accent); --cf2: var(--accent-hi); animation: bob 5s ease-in-out infinite; }
#start[aria-expanded="true"], #start:active { border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); background: var(--face-2); }

#tasks { flex: 1; display: flex; gap: 4px; overflow: hidden; }
.tsk {
  min-width: 0; max-width: 190px; flex: 1 1 auto; display: flex; align-items: center; gap: 7px;
  padding: 4px 9px; background: var(--face); color: var(--dim); font-family: var(--sys); font-size: 11.5px;
  border: 2px solid; border-color: var(--bev-hi) var(--bev-lo) var(--bev-lo) var(--bev-hi);
  white-space: nowrap; overflow: hidden;
}
.tsk .tn { overflow: hidden; text-overflow: ellipsis; }
.tsk.on { border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); background: var(--face-2); color: var(--text); font-weight: 700; }
.tsk .tglyph { width: 14px; height: 12px; flex: none; }

#tray {
  flex: none; display: flex; align-items: center; gap: 9px; padding: 5px 11px;
  border: 2px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo);
  font-size: 11.5px; color: var(--dim);
}
#tray .cloud { width: 18px; height: 12px; --cf: var(--accent); }
#clock { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ---------------------------- start menu --------------------------------- */
#startmenu {
  position: fixed; left: 5px; bottom: calc(var(--taskbar-h) + 2px); z-index: 650; width: 268px;
  background: var(--face); display: flex;
  border: 2px solid; border-color: var(--bev-hi) var(--bev-lo) var(--bev-lo) var(--bev-hi);
  box-shadow: 3px 3px 0 oklch(0 0 0 / 0.45), 0 12px 34px oklch(0 0 0 / 0.5);
  animation: pop 110ms ease-out;
}
#startmenu[hidden] { display: none; }
#startmenu .rail {
  flex: none; width: 30px; writing-mode: vertical-rl; transform: rotate(180deg);
  background: linear-gradient(0deg, var(--title-on-a), var(--title-on-b));
  color: oklch(0.98 0.01 255); font-family: var(--display); font-size: 15px; letter-spacing: 0.06em;
  display: grid; place-items: center; padding: 12px 0;
}
#startmenu .items { flex: 1; padding: 4px; min-width: 0; }
.mitem {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 8px 10px;
  background: none; border: 0; color: var(--text); font-family: var(--sys); font-size: 12.5px; text-align: left;
}
.mitem:hover, .mitem:focus-visible { background: var(--accent); color: var(--ink); outline: none; }
.mitem .glyph { width: 22px; height: 20px; }
.msep { height: 2px; margin: 4px 6px; border-top: 1px solid var(--bev-lo); border-bottom: 1px solid var(--bev-hi); }

/* ============================ APPS ======================================== */

/* ---- Explorer (My Games) ---- */
.explorer { display: flex; flex-direction: column; height: 100%; }
.toolbar {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 5px 8px;
  border-bottom: 1px solid var(--bev-lo); box-shadow: 0 1px 0 var(--bev-hi); font-size: 11.5px; color: var(--dim);
}
.path { flex: 1; padding: 4px 8px; background: var(--face-2); color: var(--term); font-size: 11.5px;
  border: 2px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; padding: 12px; align-content: start; }
.fileitem {
  background: none; border: 1px dotted transparent; padding: 10px 4px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; color: var(--text); font-family: var(--sys); font-size: 11px; text-align: center; line-height: 1.3;
}
.fileitem:hover { border-color: oklch(0.75 0.05 255 / 0.5); }
.fileitem .label { padding: 1px 4px; }
.fileitem.sel .label { background: var(--accent); color: var(--ink); }
.fileitem .sub { color: var(--dimmer); font-size: 10px; }

/* ---- Game detail ---- */
.gamewin { display: flex; flex-direction: column; gap: 0; }
.gamewin .keyart {
  aspect-ratio: 16 / 9; background-image: var(--hatch); position: relative;
  display: flex; align-items: flex-end; padding: 12px; margin: 3px;
  border: 2px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo);
}
.gamewin .keyart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gamewin .keyart .tag { position: relative; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(0.72 0.02 255); background: oklch(0.16 0.02 255 / 0.86); padding: 5px 9px; }
.gamewin .meat { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.gamewin h2 { font-family: var(--display); font-size: clamp(22px, 3.4vw, 32px); letter-spacing: -0.03em; margin: 0; line-height: 1; }
.gamewin p { margin: 0; font-family: var(--body); font-size: 14px; line-height: 1.55; color: var(--dim); max-width: 48ch; }
.kv { display: grid; grid-template-columns: 92px 1fr; gap: 4px 14px; font-size: 11.5px; }
.kv dt { color: var(--dimmer); text-transform: uppercase; letter-spacing: 0.07em; }
.kv dd { margin: 0; color: var(--text); }
.pill { display: inline-block; padding: 3px 8px; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent-hi); border: 2px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px;
  background: var(--face); color: var(--text); font-family: var(--sys); font-size: 12.5px; font-weight: 700;
  border: 2px solid; border-color: var(--bev-hi) var(--bev-lo) var(--bev-lo) var(--bev-hi); text-decoration: none;
}
.btn:hover { background: var(--edge); color: var(--text); text-decoration: none; }
.btn:active { border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); }
.btn.primary { background: var(--accent); color: var(--ink); border-color: var(--accent-hi) oklch(0.42 0.10 255) oklch(0.42 0.10 255) var(--accent-hi); }
.btn.primary:hover { background: var(--accent-hi); color: var(--ink); }
.btn[aria-disabled="true"] { color: var(--dimmer); pointer-events: none; }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Notepad (game.log / studio.txt) ---- */
.pad { font-family: var(--sys); font-size: 12.5px; line-height: 1.72; color: var(--text); padding: 14px 16px; }
.pad h2 { font-family: var(--display); font-size: 19px; letter-spacing: -0.02em; margin: 0 0 4px; }
.pad .meta { color: var(--dimmer); font-size: 11px; margin-bottom: 14px; }
.pad hr { border: 0; border-top: 1px solid var(--bev-lo); border-bottom: 1px solid var(--bev-hi); margin: 14px 0; }
.logline { display: grid; grid-template-columns: 96px 74px 1fr; gap: 14px; padding: 5px 0; align-items: baseline; }
.logline .d { color: var(--dimmer); }
.logline .v { color: var(--accent-hi); }
.logline .t { color: var(--text); }
.empty { color: var(--dimmer); font-style: italic; padding: 10px 0; }
.person { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--bev-lo); }
.person .por { aspect-ratio: 1; background-image: var(--hatch); border: 2px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo); }
.person .nm { font-weight: 700; }
.person .rl { color: var(--accent-hi); font-size: 11px; }
.person .nt { color: var(--dim); font-size: 11.5px; line-height: 1.5; margin-top: 4px; }

/* ---- Terminal ---- */
.termwin { background: #05070c; height: 100%; display: flex; flex-direction: column; }
.termout {
  flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px;
  font-family: var(--crt); font-size: 19px; line-height: 1.36; color: var(--term);
  white-space: pre-wrap; word-break: break-word; text-shadow: 0 0 5px oklch(0.7 0.12 225 / 0.4);
}
.termout::-webkit-scrollbar { width: 12px; }
.termout::-webkit-scrollbar-track { background: #05070c; }
.termout::-webkit-scrollbar-thumb { background: oklch(0.3 0.04 225); }
.termout .cmd { color: oklch(0.98 0.02 225); }
.termout .muted { color: var(--term-dim); }
.termout .warn { color: var(--warn); }
.termout .ok { color: oklch(0.85 0.16 145); }
.termout a { color: var(--accent-hi); text-decoration: underline; }
.termline { display: flex; align-items: baseline; gap: 9px; padding: 0 14px 12px; font-family: var(--crt); font-size: 19px; }
.termline .ps1 { color: var(--accent-hi); flex: none; text-shadow: 0 0 5px oklch(0.7 0.12 225 / 0.4); }
.termline input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 0;
  font-family: var(--crt); font-size: 19px; color: var(--term); caret-color: var(--term);
}

/* ---- Cloud Liability Simulator ---- */
.gamewrap { display: flex; flex-direction: column; height: 100%; }
.field {
  flex: 1; min-height: 200px; position: relative; margin: 3px; overflow: hidden;
  background: oklch(0.26 0.045 258);
  background-image: radial-gradient(circle at 35% 15%, oklch(0.34 0.06 255) 0%, transparent 60%);
  border: 2px solid; border-color: var(--bev-lo) var(--bev-hi) var(--bev-hi) var(--bev-lo);
}
.field .hud { position: absolute; left: 10px; top: 9px; z-index: 2; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: oklch(0.96 0.02 255); background: oklch(0.16 0.03 255 / 0.7); padding: 5px 9px; }
.field .idle { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; text-align: center;
  font-size: 12.5px; line-height: 1.75; color: oklch(0.9 0.03 255); }
.catchable { position: absolute; border: 0; padding: 0; background: none; --cf: oklch(0.96 0.02 255); --cf2: oklch(0.88 0.05 255);
  animation: pop 240ms ease, bob 3.4s ease-in-out infinite; }
.gamebar { flex: none; display: flex; align-items: center; gap: 12px; padding: 7px; }
.gamebar .score { font-size: 12px; color: var(--dim); margin-left: auto; }

/* ---- Recycle Bin ---- */
.binlist { padding: 10px 14px; font-size: 12.5px; line-height: 2; color: var(--dim); }
.binlist li { list-style: none; display: flex; gap: 10px; align-items: baseline; }
.binlist li::before { content: "✕"; color: oklch(0.6 0.15 25); flex: none; font-size: 11px; }

/* ---- Dialogs ---- */
.dlg { padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; }
.dlg .bang { font-size: 30px; line-height: 1; color: var(--accent-hi); flex: none; }
.dlg .msg { font-size: 12.5px; line-height: 1.65; color: var(--text); }
.dlg .msg strong { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 6px; letter-spacing: -0.01em; }

/* ---- About ---- */
.about { padding: 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.about .cloud { width: 72px; height: 46px; --cf: var(--accent); --cf2: var(--accent-hi); animation: bob 5s ease-in-out infinite; }
.about .wm { font-family: var(--display); font-size: 27px; letter-spacing: -0.03em; line-height: 1; }
.about .wm em { display: block; font-style: normal; font-size: 15px; color: var(--accent-hi); letter-spacing: 0.24em; margin-top: 4px; }
.about .ver { font-size: 11.5px; color: var(--dimmer); line-height: 1.7; }
.about .specs { width: 100%; margin-top: 6px; }

/* ============================ RESPONSIVE ================================== */
@media (max-width: 760px) {
  :root { --taskbar-h: 52px; }
  #icons { inset: 8px 8px auto 8px; flex-direction: row; flex-wrap: wrap; align-content: flex-start; max-height: none; gap: 4px; }
  .dicon { width: 94px; font-size: 10.5px; }
  /* windows become full-bleed sheets — no dragging on a phone */
  .win { left: 0 !important; top: 0 !important; width: 100% !important;
         height: 100% !important; box-shadow: none; }
  .grip { display: none; }
  #tasks { display: none; }
  #tray { margin-left: auto; }
  #startmenu { width: calc(100vw - 10px); }
  .termout, .termline, .termline input { font-size: 17px; }
}
@media (max-width: 360px) { #start span:last-child { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .driftfield, #crt { display: none; }
}

/* Search engines and no-JS visitors get the plain document underneath. */
#fallback { position: fixed; inset: 0; overflow: auto; z-index: 800; background: var(--desk); padding: 40px 22px; }
#fallback .inner { max-width: 68ch; margin: 0 auto; font-family: var(--body); line-height: 1.6; color: var(--dim); }
#fallback h1 { font-family: var(--display); color: var(--text); letter-spacing: -0.03em; }
#fallback h2 { font-family: var(--display); color: var(--text); font-size: 18px; margin-top: 30px; letter-spacing: -0.02em; }