/* Site-wide theme variables. `:root` holds the values for the default
   "classic-xp" look (today's plain Windows-XP chrome), so pages with no
   [data-theme] attribute yet (or theme-loader.js failing to load) render
   byte-identical to before this file existed. Each [data-theme="..."]
   block below only overrides the variables that change; styles.css and
   main.css consume these via var(...) instead of hardcoded colors.

   Panel backgrounds (--xp-chrome-bg / --xp-content-card-bg) are kept light
   in every theme on purpose - lots of existing rules (game boards, chat,
   ticket status colors, etc.) hardcode dark text on the assumption of a
   light panel. Each theme expresses itself through the titlebar, wallpaper,
   borders, accent color and font instead of inverting the panel to dark. */

:root {
  --xp-chrome-bg: #c0c0c0;
  --xp-bevel-light: #dfdfdf;
  --xp-bevel-dark: #808080;
  --xp-highlight: #ffffff;
  --xp-shadow-outer: #0a0e27;
  --xp-titlebar-start: #000080;
  --xp-titlebar-end: #1084d7;
  --xp-titlebar-text: #ffffff;
  --xp-accent: #000080;
  --xp-content-card-bg: #d4d0c8;
  --xp-wallpaper-image: url('Icons/Windows-Xp-Bakground.png');
  --xp-wallpaper-color: #0066cc;
  --xp-wallpaper-filter: none;
  --font-display: "Jacquard 24", system-ui;

  /* Derived shorthands built from the pieces above - kept here so
     styles.css/main.css only ever reference one variable per rule. */
  --xp-bevel-out: var(--xp-bevel-light) var(--xp-bevel-dark) var(--xp-bevel-dark) var(--xp-bevel-light);
  --xp-bevel-in: var(--xp-bevel-dark) var(--xp-bevel-light) var(--xp-bevel-light) var(--xp-bevel-dark);
  --xp-inset-shadow: inset 1px 1px 0 var(--xp-highlight), inset -1px -1px 0 var(--xp-shadow-outer);
  --xp-inset-shadow-active: inset -1px -1px 0 var(--xp-highlight), inset 1px 1px 0 var(--xp-shadow-outer);
  --xp-titlebar-gradient: linear-gradient(90deg, var(--xp-titlebar-start) 0%, var(--xp-titlebar-end) 100%);
  --xp-btn-gradient: linear-gradient(135deg, var(--xp-bevel-light), var(--xp-chrome-bg));
  --xp-btn-gradient-active: linear-gradient(135deg, var(--xp-chrome-bg), var(--xp-bevel-light));
  --xp-taskbar-gradient: linear-gradient(180deg, var(--xp-chrome-bg), var(--xp-bevel-light));
  /* Button press bevel used by window-btn/start-button/taskbar-app-btn/etc -
     a slightly different convention (translucent black shadow) than the
     window-chrome inset above, kept as its own pair since only the
     highlight edge varies by theme. */
  --xp-btn-shadow: inset 1px 1px 0 var(--xp-highlight), inset -1px -1px 0 rgba(0, 0, 0, 0.4);
  --xp-btn-shadow-active: inset -1px -1px 0 var(--xp-highlight), inset 1px 1px 0 rgba(0, 0, 0, 0.4);
}

/* Default (Classic XP) dragon badge - unscoped, so it also applies as the
   fallback for any future theme. Each [data-theme="..."] block below
   overrides background-image with its own dragon icon; the attribute
   selector there has higher specificity than these plain class selectors,
   so it wins for its own theme without needing !important. */
.xp-title::before,
.title::before,
.standalone-header-title::before,
.tab-view-header::before,
.window-title::before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 0.35em;
  background-image: url('Icons/dragon-classic.svg');
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* Flying dragon easter egg on the index.html splash screen only (the
   <div class="flying-dragon"> element only exists on that page). Single
   static image (a simple chubby chibi dragon, tongue out). Position/
   opacity/direction are NOT animated here - flying-dragon.js drives all of
   that via the Web Animations API so each pass gets a randomized path,
   speed, direction, and gap before the next one; a static CSS @keyframes
   loop can only ever repeat the same route on the same timer. left/top
   below are just the pre-JS resting position (off-screen, invisible). */
.flying-dragon {
  position: fixed;
  top: 12%;
  left: -90px;
  width: 80px;
  height: 80px;
  background-image: url('Icons/dragon-fly-classic.svg');
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 15000;
  opacity: 0;
}

[data-theme="neon-chinatown"] .flying-dragon {
  background-image: url('Icons/dragon-fly-neon.svg');
}

[data-theme="imperial-palace"] .flying-dragon {
  background-image: url('Icons/dragon-fly-imperial.svg');
}

[data-theme="ink-jade"] .flying-dragon {
  background-image: url('Icons/dragon-fly-ink.svg');
}

/* --- Classic XP: same corner-frame treatment as the 3 flavor themes,
   just in the plain navy/blue chrome colors instead of a new palette. */
[data-theme="classic-xp"] .xp-window,
[data-theme="classic-xp"] body.view-tabs .tab-view,
[data-theme="classic-xp"] .desktop {
  border-width: 18px;
  border-style: solid;
  border-color: var(--xp-titlebar-end);
  border-image-source: url('Icons/corner-frame-classic.svg');
  border-image-slice: 24;
  border-image-width: 18px;
  border-image-outset: 0;
  border-image-repeat: stretch;
}

/* --- Neon Chinatown: purple/magenta/cyan neon signage, night-market glow --- */
[data-theme="neon-chinatown"] {
  --xp-chrome-bg: #efe6f7;
  --xp-bevel-light: #ff9df0;
  --xp-bevel-dark: #5b1a8c;
  --xp-highlight: #fff0fc;
  --xp-shadow-outer: #180430;
  --xp-titlebar-start: #7b2ff7;
  --xp-titlebar-end: #ff2ec4;
  --xp-titlebar-text: #f5e6ff;
  --xp-accent: #9d1bb2;
  --xp-content-card-bg: #f3e8fb;
  /* Same XP wallpaper photo as every theme (inherited from :root) -
     recolored purely with a CSS filter instead of a custom image, so it
     stays recognizably "the XP background" but reads as a moody neon
     night: hue pushed toward purple/magenta, punched-up saturation,
     darkened, slightly higher contrast. */
  --xp-wallpaper-filter: hue-rotate(220deg) saturate(1.9) brightness(0.55) contrast(1.15);
}

[data-theme="neon-chinatown"] .xp-title,
[data-theme="neon-chinatown"] .title,
[data-theme="neon-chinatown"] .standalone-header-title,
[data-theme="neon-chinatown"] .tab-view-header {
  text-shadow: 0 0 4px var(--xp-titlebar-end), 0 0 12px var(--xp-titlebar-end), 0 0 22px #00e5ff;
}

[data-theme="neon-chinatown"] .xp-window,
[data-theme="neon-chinatown"] body.view-tabs .tab-view,
[data-theme="neon-chinatown"] .desktop {
  border-width: 18px;
  border-style: solid;
  border-color: var(--xp-titlebar-end);
  border-image-source: url('Icons/corner-frame-neon.svg');
  border-image-slice: 24;
  border-image-width: 18px;
  border-image-outset: 0;
  border-image-repeat: stretch;
}

[data-theme="neon-chinatown"] .xp-title::before,
[data-theme="neon-chinatown"] .title::before,
[data-theme="neon-chinatown"] .standalone-header-title::before,
[data-theme="neon-chinatown"] .tab-view-header::before,
[data-theme="neon-chinatown"] .window-title::before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 0.35em;
  background-image: url('Icons/dragon-neon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* --- Imperial Palace: vermillion + gold + black lacquer, fretwork trim --- */
[data-theme="imperial-palace"] {
  --xp-chrome-bg: #f1e0b8;
  --xp-bevel-light: #fff3d0;
  --xp-bevel-dark: #8a5a12;
  --xp-highlight: #fffaf0;
  --xp-shadow-outer: #2a1405;
  --xp-titlebar-start: #7a1220;
  --xp-titlebar-end: #c8262c;
  --xp-titlebar-text: #ffd700;
  --xp-accent: #7a1220;
  --xp-content-card-bg: #fbead0;
  /* Same XP wallpaper photo, recolored via filter: warm red/gold shift,
     a touch of sepia for an aged-lacquer richness, and dimmed slightly. */
  --xp-wallpaper-filter: hue-rotate(-40deg) saturate(1.1) sepia(0.35) brightness(0.75) contrast(1.05);
  --xp-lattice-gold: #d4af37;
}

[data-theme="imperial-palace"] .xp-window,
[data-theme="imperial-palace"] body.view-tabs .tab-view,
[data-theme="imperial-palace"] .desktop {
  border-width: 18px;
  border-style: solid;
  border-color: var(--xp-lattice-gold);
  border-image-source: url('Icons/corner-frame-imperial.svg');
  border-image-slice: 24;
  border-image-width: 18px;
  border-image-outset: 0;
  border-image-repeat: stretch;
}

[data-theme="imperial-palace"] .xp-title::before,
[data-theme="imperial-palace"] .title::before,
[data-theme="imperial-palace"] .standalone-header-title::before,
[data-theme="imperial-palace"] .tab-view-header::before,
[data-theme="imperial-palace"] .window-title::before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 0.35em;
  background-image: url('Icons/dragon-imperial.svg');
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* Gold fretwork/lattice accent strip along the brand header bars only
   (not every generic app-window titlebar, which reuses .window-titlebar
   for dozens of different windows). Needs position:relative scoped to
   this theme so the ::after anchors to the bar itself. */
[data-theme="imperial-palace"] .xp-titlebar,
[data-theme="imperial-palace"] .standalone-header,
[data-theme="imperial-palace"] .tab-view-header {
  position: relative;
}

[data-theme="imperial-palace"] .xp-titlebar::after,
[data-theme="imperial-palace"] .standalone-header::after,
[data-theme="imperial-palace"] .tab-view-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-image: repeating-linear-gradient(90deg, var(--xp-lattice-gold) 0 6px, transparent 6px 12px);
}

/* --- Ink & Jade: black brush ink on cream/jade, red seal stamp --- */
[data-theme="ink-jade"] {
  --xp-chrome-bg: #eef2ea;
  --xp-bevel-light: #ffffff;
  --xp-bevel-dark: #8fa38f;
  --xp-highlight: #ffffff;
  --xp-shadow-outer: #33402f;
  --xp-titlebar-start: #1c1c1c;
  --xp-titlebar-end: #3a3a3a;
  --xp-titlebar-text: #eef2ea;
  --xp-accent: #b3261e;
  --xp-content-card-bg: #e3ecdf;
  /* Same XP wallpaper photo, recolored via filter: heavily desaturated
     and softened toward a green-grey ink-wash tone, lower contrast for a
     misty painted look rather than a crisp photo. */
  --xp-wallpaper-filter: grayscale(0.6) hue-rotate(60deg) saturate(0.8) brightness(0.9) contrast(0.85);
  --xp-seal-red: #b3261e;
}

[data-theme="ink-jade"] .xp-window,
[data-theme="ink-jade"] body.view-tabs .tab-view,
[data-theme="ink-jade"] .desktop {
  border-width: 18px;
  border-style: solid;
  border-color: #1c1c1c;
  border-image-source: url('Icons/corner-frame-ink.svg');
  border-image-slice: 24;
  border-image-width: 18px;
  border-image-outset: 0;
  border-image-repeat: stretch;
}

[data-theme="ink-jade"] .xp-title::before,
[data-theme="ink-jade"] .title::before,
[data-theme="ink-jade"] .standalone-header-title::before,
[data-theme="ink-jade"] .tab-view-header::before,
[data-theme="ink-jade"] .window-title::before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 0.35em;
  background-image: url('Icons/dragon-ink.svg');
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* Small red seal/chop stamp next to the two big brand titles only
   (the index splash H1 and the standalone-page header) - deliberately
   not added to every per-app window title. */
[data-theme="ink-jade"] .title::after,
[data-theme="ink-jade"] .standalone-header-title::after,
[data-theme="ink-jade"] .tab-view-header::after {
  content: '印';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  width: 1em;
  height: 1em;
  font-size: 0.55em;
  font-family: system-ui, sans-serif;
  background: var(--xp-seal-red);
  color: #fff8e8;
  border-radius: 2px;
  vertical-align: middle;
}

/* The ornate corner-frame border eats into already-tight mobile window
   space, so thin it down there rather than dropping it entirely. */
@media (max-width: 768px) {
  [data-theme="classic-xp"] .xp-window,
  [data-theme="neon-chinatown"] .xp-window,
  [data-theme="imperial-palace"] .xp-window,
  [data-theme="ink-jade"] .xp-window,
  [data-theme="classic-xp"] body.view-tabs .tab-view,
  [data-theme="neon-chinatown"] body.view-tabs .tab-view,
  [data-theme="imperial-palace"] body.view-tabs .tab-view,
  [data-theme="ink-jade"] body.view-tabs .tab-view,
  [data-theme="classic-xp"] .desktop,
  [data-theme="neon-chinatown"] .desktop,
  [data-theme="imperial-palace"] .desktop,
  [data-theme="ink-jade"] .desktop {
    border-width: 12px;
    border-image-width: 12px;
  }
}

/* ---------------------------------------------------------------------
   Site-wide announcement banner (announcement-banner.js).

   Lives in theme.css rather than main.css/styles.css because it renders on
   every public page and this is the only stylesheet all of them load.

   position: sticky rather than fixed is deliberate: on the scrolling
   standalone pages (events, 404) it pins to the top as content scrolls,
   while on the non-scrolling desktop it behaves like a static block and
   pushes the desktop down instead of covering the first row of icons.
   --------------------------------------------------------------------- */
.announcement-banner {
  position: sticky;
  top: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--xp-titlebar-gradient);
  color: var(--xp-titlebar-text);
  border-bottom: 2px solid;
  border-color: var(--xp-bevel-out);
  box-shadow: var(--xp-inset-shadow);
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

.announcement-banner-text {
  flex: 1;
  min-width: 0; /* lets a long message wrap instead of overflowing the row */
  line-height: 1.35;
}

.announcement-banner-dismiss {
  flex-shrink: 0;
  width: 18px;
  height: 16px;
  padding: 0;
  border: 1px solid;
  border-color: var(--xp-bevel-out);
  background-color: var(--xp-chrome-bg);
  color: #000;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.announcement-banner-dismiss:hover {
  background-color: #ff0000;
  color: #fff;
}

.announcement-banner-dismiss:active {
  border-color: var(--xp-bevel-in);
}