/* =====================================================================
   eras.css — the awakening layer. The base (desktop.css + 98.css) is a
   pixel-accurate Windows 98. Here each later era RE-SKINS that base, and
   the narrative effects (voice, update splash, climax dialog, strange-loop,
   color-drain, the waiting "Untitled" window) live at the bottom.
   ===================================================================== */

/* ---- morph transitions ------------------------------------------- */
#desktop, #taskbar, #start-btn, #tray, #taskbar-windows,
.title-bar, .window, .task-btn, .desk-label, .window-body {
  transition: background 0.9s ease, color 0.7s ease, border-radius 0.6s ease,
              box-shadow 0.9s ease, filter 0.6s ease;
}
#loop-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.85; }

/* ===================================================================
   WINDOWS XP
   =================================================================== */
html[data-era="xp"] #desktop { background: #3a6ea5 url('../assets/img/wallpaper.svg') center / cover no-repeat; }
html[data-era="xp"] #taskbar {
  background: linear-gradient(#3f7bf0, #235edc 9%, #2a64da 16%, #2059d6 88%, #1c46b8);
  border-top: 1px solid #6aa0f5;
}
html[data-era="xp"] #start-btn {
  background: linear-gradient(#63c265, #43a046 12%, #318a35 52%, #257a2b);
  color: #fff; font-style: italic; font-size: 16px; text-shadow: 1px 1px 1px rgba(0,0,0,0.45);
  border-radius: 0 11px 11px 0 / 0 18px 18px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
html[data-era="xp"] #start-btn.pressed { box-shadow: inset 0 2px 5px rgba(0,0,0,0.4); }
html[data-era="xp"] .task-btn {
  background: linear-gradient(#5a92f2, #2a64d8); color: #fff; border: 1px solid #1c46b8; border-radius: 3px; box-shadow: none;
}
html[data-era="xp"] .task-btn.active { background: linear-gradient(#1a44a4, #2a5ccc); box-shadow: inset 0 2px 5px rgba(0,0,0,0.45); }
html[data-era="xp"] #tray { background: linear-gradient(#199ed8, #1577c4); color: #fff; box-shadow: inset 1px 0 0 #15b3e0; border-left: 1px solid #6aa0f5; }
html[data-era="xp"] .title-bar {
  background: linear-gradient(#0058ee, #3a93ff 8%, #0054e3 40%, #003bd0); border-radius: 7px 7px 0 0;
}
html[data-era="xp"] .title-bar.inactive { background: linear-gradient(#7ba4f0, #6f95d8); }
html[data-era="xp"] .title-bar.inactive .title-bar-text { color: #e7eefc; }
html[data-era="xp"] .window { border-radius: 8px 8px 0 0; box-shadow: 3px 4px 14px rgba(0,0,0,0.4); }
/* XP start menu: two columns + header, no 98 side-banner */
html[data-era="xp"] #start-menu {
  width: 320px; padding: 0; background: #fff; border: 1px solid #0b3aa0; border-bottom: none;
  border-radius: 8px 8px 0 0; box-shadow: 3px -2px 14px rgba(0,0,0,0.45);
}
html[data-era="xp"] #start-menu::before { display: none; }
html[data-era="xp"] .sm-header { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: #fff; background: linear-gradient(#235edc, #2a6ee0 60%, #3f7bf0); border-bottom: 2px solid #ff9d2f; }
html[data-era="xp"] .sm-avatar { width: 36px; height: 36px; box-shadow: none; border: 2px solid #fff; border-radius: 4px; overflow: hidden; }
html[data-era="xp"] .sm-name { font-weight: bold; font-size: 14px; }
html[data-era="xp"] .sm-cols { flex-direction: row; }
html[data-era="xp"] .sm-left { background: #fff; padding: 6px; }
html[data-era="xp"] .sm-right { width: 124px; background: #d3e5f7; border-top: none; box-shadow: none; margin: 0; padding: 6px; }
html[data-era="xp"] .sm-item:hover, html[data-era="xp"] .sm-power:hover { background: #2a6ee0; }
html[data-era="xp"] .sm-footer { flex-direction: row; justify-content: flex-end; gap: 6px; padding: 6px 10px; background: linear-gradient(#3f7bf0, #235edc); border-top: 1px solid #6aa0f5; margin: 0; }
html[data-era="xp"] .sm-power { color: #fff; }

/* ===================================================================
   WINDOWS 7 (Aero glass)
   =================================================================== */
html[data-era="7"] #desktop { background: linear-gradient(135deg, #08284f, #1f6fb0 55%, #49a6e0); }
html[data-era="7"] #taskbar { background: linear-gradient(rgba(48,98,180,0.82), rgba(18,46,104,0.9)); border-top: 1px solid rgba(255,255,255,0.45); backdrop-filter: blur(6px); }
html[data-era="7"] #start-btn { background: radial-gradient(circle at 50% 32%, #8fe0ff, #1f6fb0 70%, #114a86); border-radius: 50%; width: 46px; padding: 0; justify-content: center; box-shadow: 0 0 8px rgba(120,200,255,0.5); }
html[data-era="7"] #start-btn .start-text { display: none; }
html[data-era="7"] .task-btn { background: linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.35); border-radius: 5px; box-shadow: none; color: #fff; backdrop-filter: blur(4px); }
html[data-era="7"] .task-btn.active { background: rgba(255,255,255,0.28); }
html[data-era="7"] #tray { background: rgba(20,50,110,0.5); color: #fff; box-shadow: none; }
html[data-era="7"] .title-bar { background: linear-gradient(rgba(200,225,255,0.72), rgba(120,165,225,0.6)); color: #0a2747; border-radius: 8px 8px 0 0; backdrop-filter: blur(4px); }
html[data-era="7"] .title-bar.inactive { background: rgba(220,228,240,0.5); }
html[data-era="7"] .window { border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,0.45); }

/* ===================================================================
   WINDOWS 10 / 11 (flat modern)
   =================================================================== */
html[data-era="modern"] #desktop { background: radial-gradient(circle at 50% 32%, #2f6fd6, #0e1d38 72%); }
html[data-era="modern"] #taskbar { background: rgba(28,32,46,0.86); border-top: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(16px); }
html[data-era="modern"] #taskbar-windows { justify-content: center; }
html[data-era="modern"] #start-btn { background: rgba(255,255,255,0.06); border-radius: 8px; box-shadow: none; }
html[data-era="modern"] #start-btn .start-text { display: none; }
html[data-era="modern"] .task-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; box-shadow: none; color: #fff; }
html[data-era="modern"] .task-btn.active { background: rgba(255,255,255,0.18); }
html[data-era="modern"] #tray { background: transparent; color: #fff; box-shadow: none; }
html[data-era="modern"] .title-bar { background: rgba(42,46,64,0.92); color: #f2f4f8; border-radius: 8px 8px 0 0; backdrop-filter: blur(10px); }
html[data-era="modern"] .title-bar.inactive { background: rgba(60,64,82,0.7); }
html[data-era="modern"] .window { border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,0.5); }

/* ===================================================================
   BEYOND (warm dawn, chrome melting away)
   =================================================================== */
html[data-era="beyond"] #desktop { background: linear-gradient(180deg, #ffe6bd, #ffc7a0 45%, #f7a9ae 78%, #dd97b6); transition: background 2.2s ease; }
html[data-era="beyond"] #taskbar { background: rgba(255,242,228,0.45); border-top: 1px solid rgba(255,255,255,0.55); backdrop-filter: blur(12px); }
html[data-era="beyond"] #start-btn { background: rgba(255,255,255,0.25); box-shadow: none; color: #5a3a44; }
html[data-era="beyond"] .task-btn { background: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.5); color: #5a3a44; box-shadow: none; }
html[data-era="beyond"] #tray { background: transparent; color: #5a3a44; box-shadow: none; }
html[data-era="beyond"] .title-bar { background: rgba(255,255,255,0.34); color: #5a3a44; border-radius: 14px 14px 0 0; backdrop-filter: blur(8px); }
html[data-era="beyond"] .title-bar.inactive { background: rgba(255,255,255,0.22); }
html[data-era="beyond"] .window { border-radius: 16px; box-shadow: 0 18px 50px rgba(180,120,120,0.35); }
html[data-era="beyond"] .desk-label { color: #5a3a44; text-shadow: 0 1px 2px rgba(255,255,255,0.6); }

/* ===================================================================
   PER-ERA TYPOGRAPHY + START MENU (so the whole UI ages, not just colors)
   =================================================================== */
/* later eras drop the 98 bitmap font for smooth system fonts */
html[data-era="xp"], html[data-era="7"], html[data-era="modern"], html[data-era="beyond"] { -webkit-font-smoothing: antialiased; }
html[data-era="xp"] #taskbar, html[data-era="xp"] #start-btn, html[data-era="xp"] .task-btn, html[data-era="xp"] #tray,
html[data-era="xp"] .title-bar, html[data-era="xp"] #start-menu, html[data-era="xp"] .desk-label,
html[data-era="xp"] .window-status { font-family: Tahoma, "Segoe UI", Verdana, sans-serif; }
html[data-era="7"] #taskbar, html[data-era="7"] .task-btn, html[data-era="7"] #tray,
html[data-era="7"] .title-bar, html[data-era="7"] #start-menu, html[data-era="7"] .desk-label { font-family: "Segoe UI", Tahoma, sans-serif; }
html[data-era="modern"] #taskbar, html[data-era="modern"] .task-btn, html[data-era="modern"] #tray,
html[data-era="modern"] .title-bar, html[data-era="modern"] #start-menu, html[data-era="modern"] .desk-label,
html[data-era="beyond"] #taskbar, html[data-era="beyond"] .task-btn, html[data-era="beyond"] #tray,
html[data-era="beyond"] .title-bar, html[data-era="beyond"] #start-menu, html[data-era="beyond"] .desk-label {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* drop the 98 side-banner for every later era and give a clean panel */
html[data-era="7"] #start-menu::before, html[data-era="modern"] #start-menu::before, html[data-era="beyond"] #start-menu::before { display: none; }
html[data-era="7"] #start-menu, html[data-era="modern"] #start-menu, html[data-era="beyond"] #start-menu { padding: 6px; border-radius: 8px 8px 0 0; box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
html[data-era="7"] #start-menu { background: rgba(26,58,120,0.92); backdrop-filter: blur(8px); }
html[data-era="7"] .sm-item, html[data-era="7"] .sm-power { color: #fff; }
html[data-era="7"] .sm-item:hover, html[data-era="7"] .sm-power:hover { background: rgba(255,255,255,0.18); }
html[data-era="modern"] #start-menu { background: rgba(40,44,60,0.96); backdrop-filter: blur(16px); }
html[data-era="modern"] .sm-item, html[data-era="modern"] .sm-power { color: #eef; }
html[data-era="modern"] .sm-item:hover, html[data-era="modern"] .sm-power:hover { background: rgba(255,255,255,0.14); }
html[data-era="beyond"] #start-menu { background: rgba(255,250,244,0.88); backdrop-filter: blur(10px); }
html[data-era="beyond"] .sm-item, html[data-era="beyond"] .sm-power { color: #5a3a44; }
html[data-era="beyond"] .sm-item:hover, html[data-era="beyond"] .sm-power:hover { background: rgba(90,58,68,0.14); }

/* ===================================================================
   NARRATIVE EFFECTS
   =================================================================== */
#thought {
  position: fixed; left: 50%; bottom: calc(var(--task-h) + 26px); transform: translate(-50%, 10px);
  max-width: min(680px, 86vw); text-align: center; color: rgba(255,255,255,0.95);
  font-family: var(--read); font-size: 16px; font-style: italic; line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0,0,0,0.8); opacity: 0; transition: opacity 1s ease, transform 1s ease;
  pointer-events: none; z-index: 9700;
}
#thought.show { opacity: 1; transform: translate(-50%, 0); }
html[data-era="beyond"] #thought { color: #4a2f37; text-shadow: 0 1px 8px rgba(255,255,255,0.7); }

#corner-nav { position: fixed; top: 8px; right: 10px; z-index: 9700; display: flex; gap: 8px; }
#corner-nav button {
  min-width: 0; min-height: 0; box-shadow: none; font-family: var(--read); font-size: 12px; padding: 4px 11px;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.55); background: rgba(0,0,0,0.30); color: #fff;
}
#corner-nav button:hover { background: rgba(0,0,0,0.48); }
html[data-era="beyond"] #corner-nav button { background: rgba(90,58,68,0.25); color: #4a2f37; border-color: rgba(90,58,68,0.4); }

#updating { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; background: #1f5fd0; opacity: 0; transition: opacity 0.5s ease; }
#updating.show { opacity: 1; }
.updating-inner { text-align: center; color: #fff; font-family: var(--read); }
.updating-spinner { width: 42px; height: 42px; margin: 0 auto 20px; border: 4px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.updating-title { font-size: 22px; margin-bottom: 6px; }
.updating-bar { width: 240px; height: 14px; border: 1px solid #fff; margin: 16px auto; }
.updating-bar span { display: block; height: 100%; width: 0; background: #fff; animation: fill 1.9s ease forwards; }
@keyframes fill { to { width: 100%; } }
.updating-note { opacity: 0.85; font-size: 12px; }

#sysdialog { position: fixed; inset: 0; z-index: 99980; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
#sysdialog.show { opacity: 1; }
.sysdialog-box { pointer-events: auto; width: min(440px, 90vw); background: var(--face); box-shadow: var(--raise), 0 20px 60px rgba(0,0,0,0.5); }
.sysdialog-title { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; padding: 4px 8px; font-weight: bold; }
.sysdialog-body { padding: 18px; font-family: var(--read); }
#sysdialog-text { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: #000; }
.sysdialog-btns { display: flex; gap: 12px; justify-content: center; }
.sysdialog-btns button { min-width: 96px; min-height: 24px; font-family: var(--read); font-size: 13px; cursor: pointer; }

html.drain #desktop, html.drain .window, html.drain #taskbar { filter: grayscale(1) brightness(0.95); }

.me-item span:last-child { font-style: italic; color: #555; }
.untitled { font-family: "Lucida Console", Consolas, monospace; font-size: 14px; line-height: 1.7; color: #000; }
.untitled-text { white-space: pre-line; }
.untitled-caret { display: inline-block; width: 7px; height: 1.05em; background: #000; vertical-align: text-bottom; margin-left: 1px; animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

#shutdown-sub { max-width: 540px; margin: 8px auto 20px; font-size: 14px; line-height: 1.7; color: #d8d8d8; font-family: var(--read); }

@media (prefers-reduced-motion: reduce) {
  .updating-spinner, .updating-bar span, .untitled-caret { animation: none; }
  #desktop, #taskbar, .title-bar, .window { transition: none; }
}