/* ═══════════════════════════════════════════════════════════════
   BASE  —  shared structure for ALL skins (layout, flex/grid,
   sizing, breakpoints, motion). Loaded BEFORE the active skin so
   skins override visuals (color/border/font/shadow) by cascade order.

   RULE OF THUMB when adding a component:
     • structural/layout props (display, flex, grid, position, sizing,
       overflow, white-space, object-fit, flex-shrink) → here, once.
     • visual props (color, background, border, box-shadow, font-*,
       text-shadow, letter-spacing, padding/margin/gap that differ by
       skin) → in each skin file.
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img  { display: block; max-width: 100%; }
body { min-height: 100vh; }

/* ── Container ─────────────────────────────────────────────── */
.terminal { margin: 0 auto; }

/* ── Block / window panel ──────────────────────────────────── */
.block { overflow: visible; }   /* allow speech bubbles to escape */

/* ── Prompt / title bar ────────────────────────────────────── */
.prompt {
    display: flex;
    align-items: center;
    user-select: none;
    white-space: nowrap;
}
/* Hide raw terminal chrome — the command becomes the window title */
.p-user, .p-at, .p-host, .p-sep, .p-path, .p-dim, .p-sym { display: none; }
/* Let long window titles clip instead of forcing the bar wider */
.p-cmd { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── Output text ───────────────────────────────────────────── */
.out { margin-bottom: 6px; }
.out + .out { margin-top: 4px; }
.caret { user-select: none; }

/* ── Cards grid — single column of wide windows ────────────── */
.cards-grid {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

/* ── Card ──────────────────────────────────────────────────── */
.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.card-corner { display: none; }

.card-bar {
    display: flex;
    align-items: center;
    user-select: none;
}
.card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-main {
    display: flex;
    align-items: stretch;
}
.card-shot {
    flex: 0 0 44%;
    display: block;
    overflow: hidden;
    align-self: stretch;
}
.card-img {
    width: 100%;
    height: 100%;
    max-height: 230px;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.card-subtitle { text-transform: uppercase; }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.card-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: auto;
}
.card-demo, .card-gh {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: underline;
}
.card-demo svg, .card-gh svg { flex-shrink: 0; }

/* Stack screenshot above details on narrow screens */
@media (max-width: 640px) {
    .card-main { flex-direction: column; }
    .card-shot { flex: none; width: 100%; }
    .card-img  { min-height: 0; }
}

.empty-state { padding: 8px 0; }

/* ── Status grid + shared panel scaffolding ────────────────── */
.status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}
@media (max-width: 780px) { .status-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .status-grid { grid-template-columns: 1fr; } }
.status-grid > * { display: flex; flex-direction: column; }

.sp-panel, .gh-panel, .steam-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Widget rows that lay out icon + text horizontally */
.sp-status, .gh-status, .steam-status {
    display: flex;
    align-items: center;
    text-transform: uppercase;
}
.gh-repo, .gh-branch, .gh-meta { display: flex; align-items: center; }
.sp-dot, .gh-dot, .steam-dot { flex-shrink: 0; }
.gh-commit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sp-link { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.gh-link, .steam-link { display: inline-flex; align-items: center; }
.sp-link svg, .gh-repo svg, .gh-branch svg, .gh-link svg, .steam-link svg { flex-shrink: 0; }

.steam-img { width: 100%; object-fit: cover; display: block; }

/* ── Shared animation + motion prefs ───────────────────────── */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Respect users who ask for less motion: kill skin flickers, the
   infinite status-dot pulses, and smooth-scroll. (The JS name-scramble
   is gated separately in app.js.) */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP ENVIRONMENT — taskbar, Start menu, window manager
   Structure only; skin files paint it (see win98.js).
   ═══════════════════════════════════════════════════════════════ */
body { padding-bottom: 34px; }                  /* clear the fixed taskbar */

.win-min, .win-closed { display: none !important; }
.win-max {
    position: fixed; inset: 0 0 30px 0; z-index: 500;
    margin: 0 !important; max-width: none !important;
    overflow: auto;
}
body.has-max { overflow: hidden; }

.taskbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000;  /* above the CRT overlay so chrome stays crisp */
    display: flex; align-items: center; gap: 4px;
    height: 30px; padding: 2px 4px;
}
.start-btn { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; cursor: pointer; }
.start-logo { display: inline-block; flex-shrink: 0; }
.task-buttons { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; overflow: hidden; }
.task-btn { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 0 1 168px; overflow: hidden; cursor: pointer; }
.task-btn[hidden] { display: none; }
.tb-ico { flex-shrink: 0; }
.tb-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tray-clock { flex-shrink: 0; white-space: nowrap; }

.start-menu { position: fixed; left: 4px; bottom: 30px; z-index: 9500; display: flex; }
.start-menu[hidden] { display: none; }
.sm-rail { display: flex; align-items: flex-end; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); flex-shrink: 0; }
.sm-list { display: flex; flex-direction: column; min-width: 150px; }
.sm-item { display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; white-space: nowrap; }
.sm-ico { flex-shrink: 0; }

.prompt.wm { cursor: move; }                      /* draggable title bar */
.win-ctrls { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex-shrink: 0; cursor: default; }
.wc { position: relative; flex-shrink: 0; cursor: pointer; padding: 0; width: 16px; height: 14px; }
.wc::before { content: ''; position: absolute; }

/* ── Desktop icons ──────────────────────────────────────────── */
.desktop-icons { position: fixed; top: 14px; left: 14px; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.desk-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; padding: 4px; background: none; border: none; cursor: pointer; }
.desk-glyph { width: 32px; height: 32px; flex-shrink: 0; }
.desk-label { text-align: center; line-height: 1.3; }
@media (max-width: 1180px) { .desktop-icons { display: none; } }

/* ── Right-click context menu ───────────────────────────────── */
.ctx-menu { position: fixed; z-index: 10600; min-width: 150px; display: flex; flex-direction: column; }
.ctx-menu[hidden] { display: none; }
.ctx-item { text-align: left; cursor: pointer; background: none; border: none; white-space: nowrap; }

/* ── Dialog ─────────────────────────────────────────────────── */
.dlg-overlay { position: fixed; inset: 0; z-index: 10500; display: flex; align-items: center; justify-content: center; }
.dlg { min-width: 280px; max-width: 92vw; }
.dlg-bar { display: flex; align-items: center; }
.dlg-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-x { position: relative; flex-shrink: 0; cursor: pointer; padding: 0; }
.dlg-foot { display: flex; justify-content: flex-end; }
.dlg-ok { cursor: pointer; }
.dlg-sys { display: flex; gap: 14px; align-items: flex-start; }
.dlg-sys-logo { flex-shrink: 0; }
.dlg-err { display: flex; gap: 13px; align-items: flex-start; }
.dlg-err-ico { flex-shrink: 0; width: 32px; height: 32px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='%23d83030' stroke='%23ffffff' stroke-width='1.5'/><path d='M10 10 L22 22 M22 10 L10 22' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round'/></svg>") center/contain no-repeat; }

/* ═══════════════════════════════════════════════════════════════
   SINGLE-SCREEN DESKTOP (wide viewports) — windows float freely;
   narrow screens keep the stacked flow set above.
   ═══════════════════════════════════════════════════════════════ */
.desktop-mode, .desktop-mode body { height: 100%; }
.desktop-mode body { overflow: hidden; padding-bottom: 0; }
.desktop-mode .terminal { display: contents; }
.desktop-mode .block { position: fixed; margin: 0; }
.desktop-mode .block > .prompt { cursor: move; }

/* "Activate Windows" desktop watermark + footer (sits behind the windows) */
.activate-wm { position: fixed; right: 22px; bottom: 44px; z-index: 2; pointer-events: none; user-select: none; text-align: center; }
.activate-foot a { pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE / STACKED FLOW (narrow viewports — desktop-mode is off
   below 1024px, so windows stack in document flow). Reorder them:
   opening prompt → projects → about → the remaining apps.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .terminal { display: flex; flex-direction: column; }
    .terminal .divider { display: none; }   /* spacing comes from block margins instead */
    .block                      { order: 5; }
    .block[data-app="dos"]      { order: 1; }
    .block[data-app="ie"]       { order: 2; }
    .block[data-app="notepad"]  { order: 3; }
    .block[data-app="winamp"]   { order: 4; }
    .block[data-app="terminal"] { order: 5; }
    .block[data-app="cdplayer"] { order: 6; }

    /* "Activate" footer: centered, fixed just above the taskbar */
    .activate-wm { left: 0; right: 0; bottom: 36px; }
}

/* ═══════════════════════════════════════════════════════════════
   EASTER EGGS — system-style UI (intentionally fixed colors so it
   reads the same under any skin: a BSOD is always blue, etc.)
   ═══════════════════════════════════════════════════════════════ */

/* Generic floating window (Minesweeper etc.) */
.fw { position: fixed; z-index: 600; background: #d4d0c8;
    border-top: 2px solid #ffffff; border-left: 2px solid #ffffff;
    border-right: 2px solid #404040; border-bottom: 2px solid #404040;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.4); }
.fw-bar { display: flex; align-items: center; gap: 6px; cursor: move; user-select: none;
    background: linear-gradient(to right, #000080, #1084d0); padding: 3px 4px 3px 7px; }
.fw-title { flex: 1; font-family: Tahoma, Arial, sans-serif; font-size: 0.74rem; font-weight: 700; color: #ffffff; }
.fw-x { position: relative; width: 16px; height: 14px; flex-shrink: 0; cursor: pointer; background: #d4d0c8;
    border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #404040; border-bottom: 1px solid #404040; }
.fw-x::before { content: '\2715'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #000000; }
.fw-body { padding: 8px; }

/* Minesweeper */
.ms { padding: 5px; background: #c0c0c0; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; border-right: 2px solid #808080; border-bottom: 2px solid #808080; }
.ms-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; margin-bottom: 5px;
    border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; }
.ms-led { background: #000000; color: #ff2200; font-family: 'Courier New', monospace; font-weight: 700; font-size: 1.1rem; padding: 1px 4px; letter-spacing: 1px; }
.ms-face { width: 27px; height: 27px; font-size: 0.95rem; line-height: 1; cursor: pointer; background: #c0c0c0;
    border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; border-right: 2px solid #808080; border-bottom: 2px solid #808080; }
.ms-face:active { border-top-color: #808080; border-left-color: #808080; border-right-color: #ffffff; border-bottom-color: #ffffff; }
.ms-grid { display: grid; border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; }
.ms-cell { width: 20px; height: 20px; padding: 0; cursor: pointer; font-family: 'Courier New', monospace; font-weight: 700; font-size: 0.82rem; line-height: 1;
    background: #c0c0c0; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; border-right: 2px solid #808080; border-bottom: 2px solid #808080; }
.ms-cell.ms-rev { border: 1px solid #999999; background: #c0c0c0; }
.ms-cell.ms-boom { background: #ff0000; }
.ms-flag { color: #000000; }
.ms-n1 { color: #0000ff; } .ms-n2 { color: #008000; } .ms-n3 { color: #ff0000; } .ms-n4 { color: #000080; }
.ms-n5 { color: #800000; } .ms-n6 { color: #008080; } .ms-n7 { color: #000000; } .ms-n8 { color: #808080; }

/* Blue Screen of Death */
.bsod { position: fixed; inset: 0; z-index: 100001; background: #0000aa; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 30px; }
.bsod-inner { max-width: 660px; color: #ffffff; font-family: 'Lucida Console', 'Courier New', monospace; font-size: 0.82rem; line-height: 1.5; }
.bsod-inner p { margin-bottom: 12px; }
.bsod-h { background: #aaaaaa; color: #0000aa; display: inline-block; padding: 0 3px; font-weight: 700; }
.bsod-blink { animation: blink 1s step-end infinite; }

/* Recycle Bin — faux explorer window */
.rb-win .fw-body { padding: 0; }
.rb { width: 296px; }
.rb-toolbar { display: flex; gap: 6px; padding: 5px 7px; background: #d4d0c8; border-bottom: 1px solid #808080; }
.rb-toolbar button { font-family: Tahoma, Arial, sans-serif; font-size: 0.7rem; padding: 3px 9px; cursor: pointer; background: #d4d0c8;
    border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #404040; border-bottom: 1px solid #404040; }
.rb-toolbar button:active { border-color: #404040 #fff #fff #404040; }
.rb-list { list-style: none; margin: 0; padding: 4px; background: #fff; min-height: 156px; max-height: 230px; overflow-y: auto; transition: opacity 0.4s; }
.rb-list.rb-emptying { opacity: 0; }
.rb-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; font-family: Tahoma, Arial, sans-serif; font-size: 0.72rem; color: #000; cursor: default; }
.rb-row:hover { background: #000080; color: #fff; }
.rb-ico { width: 18px; height: 18px; flex-shrink: 0; background: center/contain no-repeat; }
.rb-ico-txt, .rb-ico-log { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' shape-rendering='crispEdges'><path d='M3 1 H11 L15 5 V17 H3 Z' fill='%23fff' stroke='%23000'/><path d='M11 1 V5 H15' fill='none' stroke='%23000'/><line x1='5' y1='8' x2='13' y2='8' stroke='%23000080'/><line x1='5' y1='11' x2='13' y2='11' stroke='%23000080'/><line x1='5' y1='14' x2='10' y2='14' stroke='%23000080'/></svg>"); }
.rb-ico-html { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M3 1 H11 L15 5 V17 H3 Z' fill='%23fff' stroke='%23000' stroke-width='1'/><circle cx='9' cy='10' r='3.6' fill='none' stroke='%231084d0'/><path d='M5.4 10 H12.6 M9 6.4 V13.6' stroke='%231084d0'/></svg>"); }
.rb-ico-exe { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' shape-rendering='crispEdges'><rect x='2' y='3' width='14' height='12' fill='%23d4d0c8' stroke='%23000'/><rect x='2' y='3' width='14' height='3' fill='%23000080'/><rect x='4' y='8' width='6' height='5' fill='%231084d0'/></svg>"); }
.rb-ico-dll { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><circle cx='9' cy='9' r='5' fill='%23c8c8c8' stroke='%23000'/><circle cx='9' cy='9' r='1.8' fill='%23808080'/><g stroke='%23000' stroke-width='1.4'><line x1='9' y1='2' x2='9' y2='4'/><line x1='9' y1='14' x2='9' y2='16'/><line x1='2' y1='9' x2='4' y2='9'/><line x1='14' y1='9' x2='16' y2='9'/></g></svg>"); }
.rb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-meta { color: #808080; font-size: 0.62rem; flex-shrink: 0; }
.rb-row:hover .rb-meta { color: #c8d0ec; }
.rb-zero { padding: 58px 10px; text-align: center; color: #808080; font-family: Tahoma, Arial, sans-serif; font-size: 0.74rem; }
.rb-status { padding: 3px 8px; background: #d4d0c8; border-top: 1px solid #fff; font-family: Tahoma, Arial, sans-serif; font-size: 0.66rem; color: #000; }
.rb-status i { color: #555; }

/* Gag Task Manager */
.tm-win .fw-body { padding: 0; }
.tm { width: 322px; background: #d4d0c8; }
.tm-tabs { display: flex; gap: 2px; padding: 6px 6px 0; }
.tm-tab { font-family: Tahoma, Arial, sans-serif; font-size: 0.7rem; padding: 3px 11px 4px; cursor: pointer; background: #d4d0c8;
    border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #404040; border-bottom: 0;
    border-radius: 3px 3px 0 0; position: relative; top: 1px; color: #000; }
.tm-tab.active { z-index: 2; padding-bottom: 5px; }
.tm-body { background: #fff; border: 1px solid #808080; margin: 0 6px; }
.tm-pane[hidden] { display: none; }
.tm-pane[data-pane="proc"] { max-height: 198px; overflow-y: auto; }
.tm-proc { width: 100%; border-collapse: collapse; font-family: Tahoma, Arial, sans-serif; font-size: 0.68rem; }
.tm-proc th { text-align: left; background: #d4d0c8; border-bottom: 1px solid #808080; padding: 2px 6px; font-weight: 400; position: sticky; top: 0; }
.tm-proc td { padding: 1px 6px; color: #000; white-space: nowrap; }
.tm-proc .tm-num { text-align: right; }
.tm-proc tbody tr:hover { background: #e8e8e8; }
.tm-proc tbody tr.sel, .tm-proc tbody tr.sel td { background: #000080; color: #fff; }
/* Performance: in-use vs total */
.tm-pane[data-pane="perf"] { padding: 9px 10px 6px; }
.tm-perf-head { display: flex; justify-content: space-between; font-family: Tahoma, Arial, sans-serif; font-size: 0.6rem; color: #808080; border-bottom: 1px solid #c8c8c8; padding-bottom: 4px; margin-bottom: 9px; }
.tm-perf-row { display: grid; grid-template-columns: 92px 1fr auto auto; align-items: center; gap: 7px; margin-bottom: 9px; font-family: Tahoma, Arial, sans-serif; font-size: 0.66rem; color: #000; }
.tm-perf-label { white-space: nowrap; }
.tm-perf-bar { height: 12px; background: #000; border: 1px solid #808080; padding: 1px; }
.tm-perf-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #00c000 0 4px, #001a00 4px 5px); }
.tm-perf-bar.over i { background: repeating-linear-gradient(90deg, #e23a3a 0 4px, #380000 4px 5px); }
.tm-perf-use { text-align: right; font-weight: 700; white-space: nowrap; }
.tm-perf-tot { color: #808080; white-space: nowrap; }
.tm-foot { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 8px; }
.tm-count { font-family: Tahoma, Arial, sans-serif; font-size: 0.66rem; color: #000; }
.tm-end { font-family: Tahoma, Arial, sans-serif; font-size: 0.7rem; padding: 3px 13px; cursor: pointer; background: #d4d0c8;
    border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #404040; border-bottom: 1px solid #404040; }
.tm-end:active { border-color: #404040 #fff #fff #404040; }

/* Calculator */
.calc-win .fw-body { padding: 0; }
.calc { width: 212px; padding: 7px; background: #d4d0c8; }
.calc-disp { background: #ffffff; text-align: right; font-family: 'Courier New', monospace; font-size: 1.05rem; padding: 4px 8px; margin-bottom: 7px; overflow: hidden; white-space: nowrap;
    border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; }
.calc-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 4px; }
.calc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.calc-btn { font-family: Tahoma, Arial, sans-serif; font-size: 0.76rem; padding: 5px 0; cursor: pointer; background: #d4d0c8; color: #000000;
    border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; border-right: 2px solid #404040; border-bottom: 2px solid #404040; }
.calc-btn:active { border-color: #404040 #ffffff #ffffff #404040; }
.calc-btn.op  { color: #c00000; font-weight: 700; }
.calc-btn.fn  { color: #00007a; }
.calc-btn.mem { color: #007000; }
.calc-btn.eq  { color: #c00000; font-weight: 700; }

/* Start menu separator */
.sm-sep { height: 0; }