/* =====================================================================
   BANGBOWBING OS — Y2K GLOSS design system  (ledger item 25)
   Aqua / iMac / Winamp 2001: brushed-chrome frames, candy gel buttons,
   glass highlight streaks, generous radii, real typography. The pixel
   face is demoted to tiny accent labels; body copy is a modern stack.
   Wallpaper stays visible — exactly ONE soft vignette sits over it.
   Body text keeps >= 4.5:1. Owned by the os wave; never edit ../styles.css.
   ===================================================================== */

:root {
  /* --- brushed chrome (window frames, taskbar, dialogs) --- */
  --chrome-1:  #fdfdff;   /* top highlight of a metal ramp */
  --chrome-2:  #eceff6;
  --chrome-3:  #d8dde9;
  --chrome-4:  #b9c1d2;   /* foot of the ramp */
  --chrome-5:  #98a2b8;   /* hairline shade */
  --chrome-edge: rgba(255, 255, 255, 0.95);
  --chrome-line: rgba(20, 26, 44, 0.22);
  --metal: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-2) 46%,
                                   var(--chrome-3) 54%, var(--chrome-4) 100%);
  --metal-soft: linear-gradient(180deg, #ffffff 0%, var(--chrome-2) 55%, var(--chrome-3) 100%);

  /* --- ink --- */
  --ink:       #131828;   /* on chrome  ~15:1 */
  --ink-dim:   #4a5268;   /* on chrome  ~6.4:1 */
  --ink-inv:   #ffffff;

  /* --- dark panels inside the chrome --- */
  --screen:     #131426;
  --screen-2:   #1d1e33;
  --screen-3:   #272a45;
  --screen-ink: #eef1fb;  /* ~16:1 on --screen */
  --screen-dim: #b7bdd6;  /* ~9.8:1 on --screen */
  --screen-rim: rgba(255, 255, 255, 0.14);

  /* --- candy accents --- */
  --aqua:    #2e9bff;
  --aqua-lt: #7fe3ff;     /* accent on dark */
  --aqua-ink:#0b5fb4;     /* accent on chrome, 5.3:1 */
  --candy:   #ff5fc8;
  --candy-2: #d1198f;
  --tang:    #ff9a3d;
  --lime:    #7ee06a;
  --violet:  #9b7cff;

  /* legacy accent aliases still referenced by app modules */
  --neon-c: var(--aqua-lt);
  --neon-m: var(--candy);
  --neon-a: var(--tang);
  --neon-l: var(--lime);
  --neon-v: var(--violet);

  /* legacy chrome aliases (apps written against the Win98 palette) */
  --face:      var(--chrome-2);
  --face-2:    var(--chrome-1);
  --face-hi:   #ffffff;
  --face-edge: rgba(255, 255, 255, 0.9);
  --face-lo:   var(--chrome-5);
  --face-dk:   rgba(20, 26, 44, 0.3);

  /* --- title bars: glossy gel, dark enough for white type everywhere --- */
  --tb-active:   linear-gradient(180deg, #7a3fe0 0%, #5a22bd 48%, #46168f 52%, #5c26b4 100%);
  --tb-inactive: linear-gradient(180deg, #f4f6fb 0%, #dfe4ee 48%, #d2d8e6 52%, #c3cbdc 100%);

  --desk:  #0a0810;
  --line:  rgba(255, 255, 255, 0.16);
  --taskbar-h: 56px;
  --scan-op: 0.06;

  --r-win: 14px;
  --r-pane: 10px;
  --r-btn: 999px;

  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
             "Helvetica Neue", Arial, sans-serif;
  --font-display: "Orbitron", "Inter", system-ui, sans-serif;
  --font-pixel: "Silkscreen", "Courier New", monospace;   /* tiny accents only */
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --shadow-win: 0 2px 4px rgba(6, 4, 16, 0.3), 0 18px 46px rgba(6, 4, 16, 0.5);
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%,
                                   rgba(255, 255, 255, 0.28) 46%,
                                   rgba(255, 255, 255, 0) 47%,
                                   rgba(255, 255, 255, 0.16) 100%);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--desk);
  color: var(--screen-ink);
  font-family: var(--font-ui);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--aqua-lt); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--candy); color: #16041a; }

/* thin gel scrollbars, so panes stop looking like 1998 */
* { scrollbar-width: thin; scrollbar-color: rgba(155, 124, 255, 0.6) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.18); }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, #b9a4ff, #7c56e0) padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #cdbcff, #8f6bf0) padding-box; }

/* the one reusable gloss overlay */
.glossy { position: relative; overflow: hidden; }
.glossy::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.06));
  pointer-events: none;
}

/* legacy bevel classes kept as flat chrome so nothing loses its border */
.bevel-up, .bevel-down {
  border: 1px solid var(--chrome-line);
  border-radius: 8px;
  background: var(--metal);
}
.bevel-sunk {
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* =====================================================================
   DESKTOP
   ===================================================================== */
#os {
  position: fixed;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
#os.is-up { opacity: 1; }

#wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0a0810 url("../assets/bodega-1600.jpg") center / cover no-repeat;
}
#wallpaper canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* THE single overlay: one soft vignette, nothing else. The wallpaper is
   meant to be looked at (bing, Sep 7: "don't put so many layers over it"). */
#wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 42%,
    rgba(8, 6, 16, 0) 42%, rgba(8, 6, 16, 0.30) 78%, rgba(8, 6, 16, 0.52) 100%);
}

/* optional scanline film — OFF by default now, and gentle when switched on */
#crt {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.5) 2px 3px);
  opacity: var(--scan-op);
}
body.no-crt #crt { display: none; }

/* =====================================================================
   DESKTOP ICONS — big glossy tiles, tight grid
   ===================================================================== */
#icons {
  position: absolute;
  inset: 14px 14px calc(var(--taskbar-h) + 12px) 14px;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 104px);
  grid-auto-columns: 100px;
  gap: 4px;
  align-content: start;
}
.icon {
  width: 100px;
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 7px 4px 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #fff;
  text-align: center;
  user-select: none;
  touch-action: manipulation;
  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}
.icon .ico {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55));
  transition: transform 0.18s var(--ease), filter 0.18s var(--ease);
}
/* the ONE place a plate goes over the wallpaper: a label needs a contrast
   floor no photo can undercut (white on this composite is ~11:1) */
.icon .lbl {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(11, 9, 22, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.icon:hover { background: rgba(255, 255, 255, 0.10); }
.icon:hover .ico {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(127, 227, 255, 0.55));
}
.icon.sel {
  background: rgba(126, 92, 255, 0.30);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.icon.sel .lbl { background: rgba(20, 8, 44, 0.72); }

/* =====================================================================
   WINDOWS
   ===================================================================== */
#windows {
  position: absolute;
  inset: 0 0 var(--taskbar-h) 0;
  z-index: 2;
  pointer-events: none;
}
.win {
  position: absolute;
  min-width: 260px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  padding: 0 4px 4px;
  background: var(--metal);
  border: 1px solid var(--chrome-line);
  border-radius: var(--r-win);
  box-shadow: inset 0 1px 0 var(--chrome-edge), var(--shadow-win);
  animation: winIn 0.16s var(--ease);
}
@keyframes winIn { from { opacity: 0; transform: scale(0.97) translateY(8px); } }
.win.is-min { animation: winOut 0.14s var(--ease) forwards; }
@keyframes winOut { to { opacity: 0; transform: scale(0.9) translateY(26px); } }
.win.is-max {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0;
}
.win.is-focused {
  box-shadow:
    inset 0 1px 0 var(--chrome-edge),
    0 0 0 1px rgba(155, 124, 255, 0.55),
    0 3px 6px rgba(6, 4, 16, 0.35),
    0 26px 64px rgba(6, 4, 16, 0.62);
}

/* --- title bar: gel with a glass streak --- */
.win-tb {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin: 0 -1px;
  padding: 0 8px 0 10px;
  background: var(--tb-inactive);
  border-radius: calc(var(--r-win) - 1px) calc(var(--r-win) - 1px) 0 0;
  cursor: default;
  touch-action: none;
  overflow: hidden;
}
.win.is-focused .win-tb { background: var(--tb-active); }
.win-tb::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.win.is-max .win-tb { border-radius: 0; }
.win-tb .ico { width: 20px; height: 20px; flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.win-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win.is-focused .win-title { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }

/* --- traffic-light gel orbs --- */
.win-btns { display: flex; gap: 7px; flex: 0 0 auto; }
.wb {
  position: relative;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: 50%;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.22), 0 1px 1px rgba(0, 0, 0, 0.25);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 52%);
  background-color: #b9c1d2;
}
.wb::after {                       /* specular dot */
  content: "";
  position: absolute;
  top: 2px;
  left: 3.5px;
  width: 11px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}
.wb svg { position: relative; z-index: 1; opacity: 0.55; transition: opacity 0.15s var(--ease); }
.wb:hover svg { opacity: 1; }
.wb-min { background-color: #ffc23d; }
.wb-max { background-color: #56d05c; }
.wb-close { background-color: #ff6058; }
.wb:active { box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4); }
.win:not(.is-focused) .wb { background-color: #c7cddb; }
.win:not(.is-focused) .wb svg { opacity: 0.28; }

/* --- body --- */
.win-body {
  flex: 1 1 auto;
  min-height: 0;
  margin: 4px 0 0;
  overflow: auto;
  border-radius: var(--r-pane);
  background: var(--chrome-2);
  color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16);
}
.win-body.sunk {
  background: var(--screen);
  color: var(--screen-ink);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 var(--screen-rim), inset 0 8px 22px rgba(0, 0, 0, 0.45);
}
.win.is-max .win-body { border-radius: 0; margin-top: 0; }
.win.is-max { padding: 0; }

/* --- status bar --- */
.win-status {
  flex: 0 0 auto;
  display: flex;
  gap: 5px;
  margin: 4px 0 0;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #3d4459;
}
.win-status span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(20, 26, 44, 0.14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-status span:first-child { flex: 1 1 auto; }

/* --- resize handles --- */
.rs { position: absolute; z-index: 3; touch-action: none; }
.rs-n  { top: -3px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.rs-s  { bottom: -3px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.rs-w  { left: -3px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.rs-e  { right: -3px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.rs-nw { top: -3px; left: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.rs-ne { top: -3px; right: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.rs-sw { bottom: -3px; left: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.rs-se { bottom: -3px; right: -3px; width: 16px; height: 16px; cursor: nwse-resize; }
.win.is-max .rs { display: none; }
body.is-mobile .rs { display: none; }

/* =====================================================================
   TASKBAR — brushed chrome shelf with a glass lip
   ===================================================================== */
#taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--taskbar-h);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: linear-gradient(180deg,
    rgba(253, 253, 255, 0.94) 0%, rgba(232, 236, 245, 0.92) 44%,
    rgba(205, 212, 226, 0.92) 52%, rgba(178, 187, 205, 0.94) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 -1px 0 rgba(20, 26, 44, 0.28), 0 -14px 34px rgba(6, 4, 16, 0.35);
}

/* gel pill button, the taskbar/start/menu workhorse */
.tb-btn {
  position: relative;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(20, 26, 44, 0.26);
  border-radius: var(--r-btn);
  background: var(--metal-soft);
  box-shadow: inset 0 1px 0 #fff, inset 0 -6px 10px rgba(255, 255, 255, 0.55),
              0 1px 2px rgba(6, 4, 16, 0.28);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  transition: filter 0.15s var(--ease), transform 0.1s var(--ease);
}
.tb-btn::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 48%;
  border-radius: 999px 999px 40% 40% / 999px 999px 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
  pointer-events: none;
}
.tb-btn .ico { width: 22px; height: 22px; flex: 0 0 auto; position: relative; z-index: 1; }
.tb-btn .lbl, .tb-btn .tb-pip { position: relative; z-index: 1; }
.tb-btn:hover { filter: brightness(1.05); }
.tb-btn:active { transform: translateY(1px); }
.tb-btn.on {
  background: linear-gradient(180deg, #7a3fe0 0%, #5a22bd 48%, #46168f 52%, #5c26b4 100%);
  border-color: rgba(40, 8, 90, 0.6);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(6, 4, 16, 0.4);
}
.tb-btn.on::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.02)); }

#start-btn {
  flex: 0 0 auto;
  padding: 0 18px 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
#start-btn .ico { width: 26px; height: 26px; }
#start-btn .lbl { position: relative; z-index: 1; }
#start-logo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; position: relative; z-index: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.35); }

#tasks {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow: hidden;
}
#tasks .tb-btn {
  flex: 0 1 190px;
  min-width: 46px;
  justify-content: flex-start;
  font-weight: 500;
}
#tasks .tb-btn .lbl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- tray: inset glass capsule --- */
#tray {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px 0 8px;
  border-radius: var(--r-btn);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(255, 255, 255, 0.35));
  border: 1px solid rgba(20, 26, 44, 0.18);
  box-shadow: inset 0 2px 4px rgba(20, 26, 44, 0.22), 0 1px 0 rgba(255, 255, 255, 0.75);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
#tray .tray-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
}
#tray .tray-btn .ico { width: 19px; height: 19px; }
#tray .tray-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(20, 26, 44, 0.2);
  box-shadow: inset 0 1px 0 #fff;
}
#clock { min-width: 68px; text-align: center; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
#coins { display: none; align-items: center; gap: 5px; color: #5a3a00; }
#coins.on { display: flex; }

/* gel range slider for radio volume */
.vol {
  -webkit-appearance: none;
  appearance: none;
  width: 76px;
  height: 22px;
  background: transparent;
}
.vol::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6f7688, #b6bdcd);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -5px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: radial-gradient(circle at 40% 28%, #ffffff 0 22%, #dfe5f0 45%, #a9b3c7 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.vol::-moz-range-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6f7688, #b6bdcd);
}
.vol::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: radial-gradient(circle at 40% 28%, #ffffff 0 22%, #dfe5f0 45%, #a9b3c7 100%);
}

.sm-band {
  flex: 0 0 34px;
  position: relative;
  /* sunset caps the top 26%; everything below is dark enough for the white
     vertical wordmark to clear 4.5:1 wherever the menu height puts it */
  background: linear-gradient(180deg, #ffb45c 0%, #ff5fc8 12%, #7c3fe0 26%,
                                      #4a17a8 55%, #240842 100%);
}
.sm-band::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 52%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}
.sm-band span {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform-origin: left bottom;
  transform: rotate(-90deg);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.sm-list {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px;
  max-height: calc(100vh - var(--taskbar-h) - 26px);
  overflow: auto;
}
.sm-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  background: none;
  border: 0;
  border-radius: 9px;
  text-align: left;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.sm-item .ico { width: 26px; height: 26px; flex: 0 0 auto; }
.sm-item:hover:not(:disabled),
.sm-item:focus-visible:not(:disabled) {
  background: linear-gradient(180deg, #7a3fe0, #4f1cae);
  color: #fff;
  outline: none;
}
.sm-item:disabled { color: #6d758b; cursor: not-allowed; }
.sm-item .tag {
  margin-left: auto;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(20, 26, 44, 0.1);
  color: var(--ink-dim);
}
.sm-item:hover .tag { background: rgba(255, 255, 255, 0.25); color: #fff; }
.sm-item .caret { margin-left: auto; font-size: 11px; opacity: 0.6; }
.sm-sep { height: 1px; margin: 7px 6px; background: rgba(20, 26, 44, 0.16); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); }
.sm-head {
  padding: 4px 10px 6px;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
}
.sm-sub { padding-left: 16px; }
.sm-sub[hidden] { display: none; }

/* =====================================================================
   APP CONTENT KIT — reusable inside windows
   ===================================================================== */
.pad { padding: 16px; }
.screen {
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(127, 227, 255, 0.08), transparent 62%),
    var(--screen);
  color: var(--screen-ink);
  min-height: 100%;
}
.stub { padding: 18px; display: grid; gap: 13px; align-content: start; }
.stub h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
}
.stub .kicker {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--aqua-lt);
}
.stub p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--screen-dim); max-width: 64ch; }
.stub ul { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.75; color: var(--screen-dim); }
.stub li::marker { color: var(--candy); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #2a1500;
  background: linear-gradient(180deg, #ffd39a, var(--tang));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.badge.wait { color: #04303d; background: linear-gradient(180deg, #b9f2ff, #4bc9ec); }
.badge.live { color: #fff; background: linear-gradient(180deg, #ff8ed9, var(--candy-2)); }
.badge.dim  { color: #1c2030; background: linear-gradient(180deg, #e2e6f0, #b6bdcd); }

.meter {
  height: 16px;
  padding: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0c0d18, #23253c);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffa8e2 0%, var(--candy) 48%, #c9188a 52%, #ff74d0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* --- gel button --- */
.btn {
  position: relative;
  padding: 8px 16px;
  border: 1px solid rgba(20, 26, 44, 0.3);
  border-radius: var(--r-btn);
  background: var(--metal-soft);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(6, 4, 16, 0.3);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  overflow: hidden;
  transition: filter 0.15s var(--ease), transform 0.1s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 48%;
  border-radius: 999px 999px 40% 40% / 999px 999px 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.12));
  pointer-events: none;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover:not(:disabled) { filter: brightness(1.06); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3); }
.btn:disabled { color: #757d92; cursor: not-allowed; filter: saturate(0.4); }
.btn[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(180deg, #7a3fe0, #4f1cae);
  border-color: rgba(40, 8, 90, 0.6);
}
.btn.primary {
  color: #3d0524;
  background: linear-gradient(180deg, #ffd0ec 0%, #ff9ad8 48%, #ff86cf 52%, #ffb3e2 100%);
  border-color: rgba(110, 8, 70, 0.45);
}
.btn.primary:disabled { color: #5c3149; }
.btn.on {
  color: #06280d;
  background: linear-gradient(180deg, #c6f7b6 0%, #7ee06a 48%, #46b23a 52%, #86e871 100%);
  border-color: rgba(10, 70, 20, 0.5);
}
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

fieldset.group {
  margin: 0 0 14px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(20, 26, 44, 0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.25));
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20, 26, 44, 0.08);
}
fieldset.group legend {
  padding: 0 8px;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
}
.check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13.5px; color: var(--ink); }
.check input { width: 17px; height: 17px; accent-color: #6a30d8; }
.hint { font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); }
.holo {
  background: linear-gradient(92deg, #ffb45c, #ff5fc8 28%, #9b7cff 52%, #7fe3ff 76%, #b8ff4f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =====================================================================
   PANELS the apps are built from
   ===================================================================== */
.card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #262848, var(--screen-2));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 10px rgba(0, 0, 0, 0.35);
}
.balance strong { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--tang); }
.profile-card .avatar {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(160deg, #7a3fe0, #3d1080);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.45);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: #fff;
}

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
.tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 11px;
  border-radius: 12px;
  background: linear-gradient(180deg, #262848, var(--screen-2));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 10px rgba(0, 0, 0, 0.32);
  color: var(--screen-ink);
  text-align: left;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}
.tile:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(255, 95, 200, 0.75); }
.tile.is-off { opacity: 0.85; cursor: not-allowed; }
.tile-art { width: 100%; height: 82px; object-fit: cover; border-radius: 8px; margin-bottom: 5px; filter: saturate(1.1); }
.tile-name { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: #fff; }
.tile-meta { font-size: 12px; color: var(--screen-dim); }

.notice {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #ffe0c2;
  background: linear-gradient(180deg, rgba(255, 154, 61, 0.16), rgba(255, 154, 61, 0.06));
  border: 1px solid rgba(255, 154, 61, 0.32);
  border-left: 3px solid var(--tang);
}
.notice strong { color: var(--tang); font-weight: 700; letter-spacing: 0.03em; }

.tvscreen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  border: 1px solid rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.5);
}
.tvposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) brightness(0.55) contrast(1.12); }
.tvnoise {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px);
  animation: tvroll 7s linear infinite;
}
@keyframes tvroll { to { background-position: 0 60px; } }
.tvhud { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.tvlabel { position: absolute; left: 12px; bottom: 12px; display: grid; gap: 3px; }
.tvlabel strong { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: #fff; text-shadow: 0 2px 6px #000; }
.tvlabel span { font-size: 11.5px; color: #e2dbf0; text-shadow: 0 1px 4px #000; }

.chatframe {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--screen-2);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}
.chatlog { overflow: auto; padding: 10px; display: grid; gap: 7px; align-content: start; }
.chatline { font-size: 12.5px; line-height: 1.55; color: var(--screen-ink); }
.chatline b { margin-right: 6px; font-weight: 700; font-size: 12px; color: var(--aqua-lt); }
.chatline.sys b { color: var(--screen-dim); }
.chatline.op b { color: var(--candy); }
.chatinput { display: flex; gap: 7px; padding: 8px; border-top: 1px solid var(--screen-rim); }
.chatinput input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: #0d0e1a;
  color: var(--screen-ink);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.grid-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.thumb { margin: 0; }
.thumb img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.thumb figcaption { margin-top: 6px; font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.1em; color: var(--screen-dim); }

.feed { display: grid; gap: 12px; }
.post {
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #262848, var(--screen-2));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 3px solid var(--candy);
}
.post h3 { margin: 8px 0 5px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: #fff; }
.post p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--screen-dim); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 12.5px; }
.kv dt { font-family: var(--font-pixel); font-size: 9px; color: var(--screen-dim); }
.kv dd { margin: 0; }

.meter.busy i { width: 38%; animation: meterRun 2.1s ease-in-out infinite alternate; }
@keyframes meterRun { from { width: 12%; } to { width: 84%; } }

.about {
  display: grid;
  gap: 9px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1c1d33, var(--screen));
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.about .hint, .about p { color: var(--screen-dim); margin: 0; }
.about-word { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: 0.05em; }
.about-logo { width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 4px 14px rgba(0, 0, 0, 0.55); }

/* =====================================================================
   BOOT v2 — same beats, glossier and tighter
   ===================================================================== */
#boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #05040c;
  color: #dbe6ff;
  overflow: hidden;
  transition: opacity 0.5s var(--ease);
}
#boot.gone { opacity: 0; pointer-events: none; }
#boot-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
#boot.power #boot-flash { animation: powerOn 0.58s var(--ease) forwards; }
@keyframes powerOn {
  0%   { opacity: 0; transform: scaleY(0.004) scaleX(1.4); }
  8%   { opacity: 1; transform: scaleY(0.006) scaleX(1.4); }
  26%  { opacity: 0.85; transform: scaleY(1) scaleX(1); }
  100% { opacity: 0; transform: scaleY(1) scaleX(1); }
}
#post {
  position: absolute;
  inset: 0;
  padding: 26px 26px 60px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: #b9c8e8;
  overflow: hidden;
}
#post[hidden] { display: none; }
#post .b { color: #fff; font-weight: 600; }
#post .ok { color: var(--lime); }
#post .warn { color: var(--tang); }
#post .m { color: #ff8ed9; }

#splash {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 80% at 50% 116%, rgba(255, 95, 200, 0.30), transparent 60%),
    radial-gradient(90% 70% at 50% -14%, rgba(46, 155, 255, 0.24), transparent 62%),
    #06050e;
}
#splash[hidden] { display: none; }
/* one slow chrome sweep behind the card instead of the old neon grid */
#splash::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 34%, rgba(255, 255, 255, 0.07) 46%,
    rgba(155, 124, 255, 0.12) 50%, rgba(255, 255, 255, 0.07) 54%, transparent 66%);
  animation: bootSweep 4.6s var(--ease) infinite;
}
@keyframes bootSweep { from { transform: translateX(-32%); } to { transform: translateX(32%); } }

.splash-card {
  position: relative;
  width: min(560px, 88vw);
  padding: 30px 30px 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(38, 34, 62, 0.86), rgba(14, 12, 26, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -18px 40px rgba(0, 0, 0, 0.4),
    0 30px 90px rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.splash-card::after {                 /* glass lip across the top of the card */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 44%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.splash-sun {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 26%, rgba(255, 255, 255, 0.95) 0 14%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #ffd36b 0%, #ff8f5e 44%, #ff5fc8 100%);
  box-shadow: 0 0 46px rgba(255, 143, 94, 0.5), inset 0 -8px 18px rgba(120, 20, 80, 0.4);
}
.splash-logo {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 46px rgba(255, 143, 94, 0.45);
}
.splash-word {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 4.6vw, 31px);
  letter-spacing: 0.09em;
  text-align: center;
  margin: 0;
}
/* the shine: a white streak layered over the holo ramp, both clipped to the
   glyphs, so the sweep travels across the wordmark itself */
.splash-word.sweep {
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%),
    linear-gradient(92deg, #ffb45c, #ff5fc8 28%, #9b7cff 52%, #7fe3ff 76%, #b8ff4f);
  background-size: 260% 100%, 100% 100%;
  background-position: -140% 0, 0 0;
  background-repeat: no-repeat;
  animation: wordShine 3.1s var(--ease) infinite;
}
@keyframes wordShine {
  0%   { background-position: -140% 0, 0 0; }
  55%  { background-position: 240% 0, 0 0; }
  100% { background-position: 240% 0, 0 0; }
}
.splash-sub {
  position: relative;
  z-index: 1;
  margin: 11px 0 22px;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: #cbd3ea;
}
.splash-bar {
  position: relative;
  z-index: 1;
  height: 18px;
  padding: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0a0a14, #22243c);
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.14);
}
.splash-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #b6f4ff 0%, #4fc9f5 46%, #1d8fdc 54%, #63d6ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 14px rgba(79, 201, 245, 0.6);
  /* short on purpose: rAF already writes this every frame, so a long
     transition would only make the fill lag behind the percentage */
  transition: width 0.08s linear;
}
.splash-tick {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  min-height: 17px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--aqua-lt);
}
.splash-foot {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #9aa3bf;
}
#boot-skip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.22em;
  color: #7e86a2;
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

/* =====================================================================
   MOBILE
   ===================================================================== */
@media (max-width: 759px) {
  :root { --taskbar-h: 62px; }
  .win-tb { height: 40px; }
  .pad { padding: 12px; }
}
body.is-mobile .win { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *:not(.casino, .casino *), *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.06s !important;
  }
}

/* =====================================================================
   LIVE APPS — TV / CHAT / ACCOUNTS (ledger items 5, 6, 7)
   ===================================================================== */

/* --- tray coin readout: the id alone loses to "#tray .tray-btn" --- */
#tray #coins {
  display: none;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  color: #4a2f00;
  background: linear-gradient(180deg, #fff3d6, #ffd487);
  border: 1px solid rgba(120, 80, 0, 0.28);
  box-shadow: inset 0 1px 0 #fff;
}
#tray #coins.on { display: inline-flex; align-items: center; }
#tray #coins .ico { width: 16px; height: 16px; }
#tray #coins span { font-family: var(--font-ui); font-weight: 700; font-size: 12px; }

/* --- unread pip on a taskbar button --- */
.tb-pip {
  flex: 0 0 auto;
  min-width: 19px;
  padding: 2px 6px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #ff8ed9, #d1198f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* --- item 28: an app running with no window of its own --------------- */
.tb-btn.bg {
  background: linear-gradient(180deg, #e7ecf6 0%, #cfd7e8 52%, #c3cde1 100%);
  border-style: dashed;
  border-color: rgba(20, 26, 44, 0.34);
}
.tb-btn.bg .lbl { font-style: italic; }
.tb-run {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}
.tb-run i {
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: #4a5268;              /* 6.76:1 on the button face when idle */
}
.tb-btn.bg.running .tb-run i {
  background: linear-gradient(180deg, #1d8f4a, #0d5f2e);
  animation: tbRun 0.9s steps(5) infinite;
}
.tb-btn.bg.running .tb-run i:nth-child(2) { animation-delay: 0.15s; }
.tb-btn.bg.running .tb-run i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tbRun { 0%, 100% { height: 3px; } 50% { height: 11px; } }
@media (prefers-reduced-motion: reduce) {
  .tb-btn.bg.running .tb-run i { animation: none; height: 8px; }
}

/* the Quit menu that right-click / long-press pops over the taskbar */
.tb-menu {
  position: fixed;
  z-index: 940;
  min-width: 186px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(253, 253, 255, 0.98), rgba(226, 231, 241, 0.97));
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(20, 26, 44, 0.3);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff, 0 18px 44px rgba(6, 4, 16, 0.55);
  animation: menuIn 0.12s var(--ease);
}
.tb-menu .sm-item { font-size: 13px; }

/* =============================================================== dialog */
.dlg-back {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 4, 14, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: dlgIn 0.15s var(--ease);
}
@keyframes dlgIn { from { opacity: 0; } }
.dlg {
  width: min(410px, 100%);
  padding: 0 4px 4px;
  background: var(--metal);
  color: var(--ink);
  border: 1px solid var(--chrome-line);
  border-radius: var(--r-win);
  box-shadow: inset 0 1px 0 var(--chrome-edge), 0 28px 76px rgba(0, 0, 0, 0.7);
}
.dlg-tb {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin: 0 -1px;
  padding: 0 8px 0 12px;
  border-radius: calc(var(--r-win) - 1px) calc(var(--r-win) - 1px) 0 0;
  background: var(--tb-active);
  overflow: hidden;
}
.dlg-tb::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.dlg-title {
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.dlg .wb-x {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.32);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 52%);
  background-color: #ff6058;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1;
  color: rgba(24, 10, 4, 0.7);
}
.dlg-body { padding: 16px; background: var(--chrome-2); border-radius: var(--r-pane); margin-top: 4px; }
.dlg-note { margin: 0 0 13px; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); }
.tabs { display: flex; gap: 5px; margin-bottom: 14px; }
.tab {
  flex: 1 1 0;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(20, 26, 44, 0.24);
  background: var(--metal-soft);
  box-shadow: inset 0 1px 0 #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
}
.tab.on {
  color: #fff;
  background: linear-gradient(180deg, #7a3fe0, #4f1cae);
  border-color: rgba(40, 8, 90, 0.6);
}
.field { display: block; margin-bottom: 12px; }
.field-label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}
.dlg .field-label { color: var(--ink-dim); }
.input {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(20, 26, 44, 0.3);
  box-shadow: inset 0 2px 4px rgba(20, 26, 44, 0.16);
}
.input:focus { outline: none; border-color: var(--aqua); box-shadow: inset 0 2px 4px rgba(20, 26, 44, 0.12), 0 0 0 3px rgba(46, 155, 255, 0.35); }
.input:disabled { color: #6d7488; background: #e8ebf3; }
.dlg-err { min-height: 17px; margin: 3px 0 9px; font-size: 12.5px; line-height: 1.45; color: #a1123f; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }

/* =====================================================================
   MONEY APPS — wallet / casino / store / gallery / posts (items 8-11)
   Same Y2K gloss as the shell: chrome ramps, gel buttons, one highlight
   per surface. Nothing here re-declares a colour that :root already has.
   ===================================================================== */

/* --- shared kit --------------------------------------------------- */
.app-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.loadbox { display: grid; gap: 9px; padding: 14px 0; }
.loadbox .meter { max-width: 260px; }
.gate {
  display: grid;
  gap: 11px;
  padding: 20px 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, #262848, var(--screen-2));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 10px rgba(0, 0, 0, 0.35);
}
.gate .kicker { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.2em; color: var(--aqua-lt); }
.onewaynote {
  margin: 4px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--screen-rim);
  font-size: 11.5px;
  color: var(--screen-dim);
}
.tabs.apptabs { margin-bottom: 0; flex-wrap: wrap; }
.tabs.apptabs {
  gap: 0;
  border-bottom: 1px solid var(--screen-rim);
}
.tabs.apptabs .tab {
  flex: 0 1 auto;
  padding: 7px 12px 8px;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: none;
  box-shadow: none;
  color: var(--screen-dim);
}
.tabs.apptabs .tab.on {
  color: #fff;
  background: none;
  border-bottom-color: var(--aqua-lt);
}
.tabs.apptabs .tab:hover:not(.on) { color: var(--screen-ink); }
.tabs.apptabs .tab:focus-visible { outline: 2px solid var(--aqua-lt); outline-offset: -2px; }
.btn.chip { padding: 5px 11px; font-size: 11.5px; }
.btn.big { padding: 11px 20px; font-size: 14px; letter-spacing: 0.04em; justify-self: start; }
.flashline {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--screen-ink);
  background: linear-gradient(180deg, rgba(155, 124, 255, 0.22), rgba(155, 124, 255, 0.08));
  border: 1px solid rgba(155, 124, 255, 0.4);
}
.flashline.good {
  color: #dbffe6;
  background: linear-gradient(180deg, rgba(126, 224, 106, 0.2), rgba(126, 224, 106, 0.07));
  border-color: rgba(126, 224, 106, 0.42);
}

/* --- lightbox ----------------------------------------------------- */
.lb-back {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(6, 4, 14, 0.82);
  backdrop-filter: blur(4px);
}
.lb-box {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  width: min(1000px, 100%);
  max-height: 100%;
  padding: 10px;
  border-radius: var(--r-win);
  background: linear-gradient(180deg, #1d1e33, #101124);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-win);
}
.lb-bar { display: flex; align-items: center; gap: 9px; }
.lb-count { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.16em; color: var(--aqua-lt); }
.lb-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  border-radius: 10px;
  background: #07070f;
  border: 1px solid rgba(0, 0, 0, 0.6);
}
.lb-media { max-width: 100%; max-height: min(66vh, 640px); border-radius: 6px; }
.lb-media.is-loading { position: absolute; opacity: 0; pointer-events: none; }
.lb-spin { display: grid; gap: 10px; justify-items: center; font-size: 12px; color: var(--screen-dim); }
.lb-spin i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--aqua-lt);
  animation: lbspin 0.8s linear infinite;
}
@keyframes lbspin { to { transform: rotate(360deg); } }
.lb-fail { display: grid; gap: 6px; justify-items: center; padding: 26px; text-align: center; }
.lb-fail strong { font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.18em; color: var(--tang); }
.lb-fail span { font-size: 12px; color: var(--screen-dim); word-break: break-all; }
.lb-cap { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 0 2px 2px; }
.lb-title { font-weight: 700; font-size: 13px; color: #fff; }
.lb-when { font-size: 11.5px; color: var(--screen-dim); }
.lb-nav {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border-radius: 50%;
  border: 1px solid rgba(20, 26, 44, 0.35);
  background: var(--metal-soft);
  box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(0, 0, 0, 0.5);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}
.lb-nav.prev { left: -12px; }
.lb-nav.next { right: -12px; }
.lb-nav:hover { filter: brightness(1.07); }

/* =====================================================================
   CASES + EMOTE INVENTORY (ledger item 30) and MOD TOOLS (item 31)
   ---------------------------------------------------------------------
   Rarity is one palette used in five places (picker slot, reel cell, reveal
   card, inventory tile, chat pull line), so the tokens live here once. Every
   rarity plate carries DARK ink (#17110a, >= 8:1 on all five) — a bright tag
   with white type would fail on common and legendary.
   ===================================================================== */
:root {
  --rar-common:    #cfd6e6;
  --rar-uncommon:  #7ce7a4;
  --rar-rare:      #74c7ff;
  --rar-epic:      #d3a2ff;
  --rar-legendary: #ffc861;
}
.r-common    { --rar: var(--rar-common); }
.r-uncommon  { --rar: var(--rar-uncommon); }
.r-rare      { --rar: var(--rar-rare); }
.r-epic      { --rar: var(--rar-epic); }
.r-legendary { --rar: var(--rar-legendary); }

.rtag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #17110a;
  background: var(--rar, var(--rar-common));
}

/* --- animated emotes (item 32) ---------------------------------------
   GIF / APNG / animated WebP animate because they are <img> elements and
   nothing here freezes them: no canvas snapshot, and NO background paint on
   the image itself, which would fill the transparent pixels. A plate BEHIND
   the image (.eslot, .inv-tile, .case-cell) is fine and deliberate — that is
   how you can see the alpha is really there. --- */
.emote, .inv-img, .case-win-img, .eslot img, .case-cell img {
  background: none;
  background-color: transparent;
}
.emote { image-rendering: auto; }

/* The ANIM stamp. The hub decides `animated` from the file's own bytes and
   ships it on /api/emotes and on every case payload; this is the only thing
   the frontend does with it — a label, never a swap for a still frame. It sits
   in a corner the count stamp does not use (.lock is bottom-right, .inv-qty is
   the bottom row) and keeps dark ink on a bright plate. */
.eslot .anim, .inv-tile .anim {
  padding: 0 3px;
  border-radius: 4px;
  font-family: var(--font-pixel);
  font-size: 7px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #17110a;
  background: #7fe3ff;
  pointer-events: none;
}
/* A 44x37 picker slot has no room for a chip in flow, so it corners the stamp
   the way .lock already does — top-LEFT, the one corner .lock never uses. */
.eslot .anim { position: absolute; top: 3px; left: 3px; }
/* The inventory tile is roomy enough to keep the stamp OUT of the picture:
   it rides in flow under the count, so nothing covers the emote it describes. */
.inv-tile .anim { margin-top: 1px; }
/* a locked slot is greyed on purpose — the stamp goes with it */
.eslot.locked .anim { filter: grayscale(1) brightness(0.75); }

/* --- the picker footer ----------------------------------------------- */
.picker-more {
  grid-column: 1 / -1;
  margin-top: 3px;
  padding: 7px 9px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #17110a;
  cursor: pointer;
  background: linear-gradient(180deg, #ffe0b0, var(--tang));
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.picker-more:hover { filter: brightness(1.06); }
/* the last copy of an emote: a warning ring, not a lock */
.eslot.case.last-one { box-shadow: 0 0 0 1px var(--tang) inset; }

/* --- inventory + pull history ---------------------------------------- */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.inv-tile {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 9px 6px;
  border-radius: 10px;
  background: var(--screen-2);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--rar) 22%, var(--screen-2)), var(--screen-2));
  border: 1px solid var(--rar, var(--rar-common));
}
.inv-img { width: 34px; height: 34px; object-fit: contain; }
.inv-name { font-size: 10.5px; color: var(--screen-dim); overflow-wrap: anywhere; text-align: center; }
.inv-qty {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  color: #17110a;
  background: var(--rar, var(--rar-common));
  border-radius: 999px;
  padding: 1px 7px;
}

.pull-list { display: grid; gap: 7px; }
.pull-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--screen-2);
  border-left: 3px solid var(--rar, var(--rar-common));
}
.pull-row img.emote { height: 28px; }
.pull-row .emote.missing { width: 28px; height: 28px; border-radius: 6px; background: #2a2c47; }
.pull-name { font-size: 12.5px; color: var(--screen-ink); }

/* --- toasts (desktop-level notices) ---------------------------------- */
#toasts {
  position: fixed;
  right: 14px;
  bottom: calc(var(--taskbar-h) + 14px);
  z-index: 900;
  display: grid;
  gap: 8px;
  justify-items: end;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(360px, calc(100vw - 28px));
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--screen-ink);
  background: linear-gradient(180deg, #262845, var(--screen-2));
  border: 1px solid var(--screen-rim);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: toastIn 0.22s ease-out;
}
.toast.good { border-left: 3px solid var(--lime); }
.toast.bad { border-left: 3px solid #ff5f8a; }
.toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s; }
.toast-text { flex: 1 1 auto; min-width: 0; }
.toast-x {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--screen-dim);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--screen-rim);
}
.toast-x:hover { color: #fff; background: rgba(255, 255, 255, 0.18); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* --- narrow windows / phones -------------------------------------- */
@media (max-width: 759px) {
  .inv-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  #toasts { left: 10px; right: 10px; justify-items: stretch; }
  .toast { max-width: none; }
  .lb-back { padding: 10px; }
  .lb-nav.prev { left: 2px; }
  .lb-nav.next { right: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}