/* ============================================================
   JoeDuke OS — Design System
   Neon synthwave desktop environment
   ============================================================ */

/* thai */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-400-thai.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-500-thai.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-500-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-600-thai.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-600-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-700-thai.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-700-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/chakra-petch-normal-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jet-brains-mono-normal-variable-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* Brand neon */
  --cyan: #16e0ff;
  --cyan-soft: #6cefff;
  --magenta: #ff21c0;
  --magenta-soft: #ff6fd8;
  --purple: #7b3ff2;
  --violet: #b16cff;

  /* Surfaces */
  --bg-0: #06060e;
  --bg-1: #0b0b18;
  --panel: rgba(15, 16, 32, 0.72);
  --panel-solid: #0e0f20;
  --panel-border: rgba(120, 130, 200, 0.22);
  --glass-hi: rgba(255, 255, 255, 0.06);

  /* Text */
  --text: #eef0ff;
  --text-dim: #a7abce;
  --text-mute: #6b6f92;

  /* Type */
  --font-ui: 'Chakra Petch', system-ui, sans-serif;
  --font-serif: 'Chakra Petch', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Effects */
  --glow-cyan: 0 0 18px rgba(22, 224, 255, 0.55);
  --glow-magenta: 0 0 18px rgba(255, 33, 192, 0.55);
  --shadow-win: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--panel-border);
  --radius: 14px;
  --taskbar-h: 46px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
}

#root { height: 100%; }

button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(123, 63, 242, 0.4); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(22, 224, 255, 0.5); background-clip: padding-box; }

/* ============================================================
   DESKTOP SHELL
   ============================================================ */
.os {
  position: relative;
  height: 100%;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* Wallpaper slideshow */
.wallpaper {
  position: absolute;
  inset: -6%;
  z-index: 0;
}
.wp-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease;
  transform: scale(1.04);
  will-change: opacity, transform;
}
.wp-layer.active { opacity: 1; }

.wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(123, 63, 242, 0.16), transparent 55%),
    radial-gradient(100% 80% at 50% 120%, rgba(255, 33, 192, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(6, 6, 14, 0.55), rgba(6, 6, 14, 0.78));
}

/* Synthwave grid floor */
.grid-floor {
  position: absolute;
  left: -20%; right: -20%; bottom: 0;
  height: 38%;
  z-index: 1;
  background-image:
    linear-gradient(rgba(22, 224, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 33, 192, 0.15) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(420px) rotateX(68deg);
  transform-origin: bottom;
  mask-image: linear-gradient(180deg, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
  animation: gridmove 9s linear infinite;
  pointer-events: none;
}
@keyframes gridmove { to { background-position: 0 64px, 64px 0; } }

.scanlines {
  position: absolute; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: 0.5;
}
.vignette { position: absolute; inset: 0; z-index: 59; pointer-events: none;
  box-shadow: inset 0 0 240px 40px rgba(0,0,0,0.7); }

/* ============================================================
   DESKTOP ICONS
   ============================================================ */
.desktop-icons {
  position: absolute;
  top: 26px; left: 22px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, 92px);
  gap: 6px 10px;
}
.dicon {
  width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 6px 9px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .15s;
  text-align: center;
}
.dicon:hover { background: rgba(22, 224, 255, 0.08); border-color: rgba(22,224,255,0.25); transform: translateY(-2px); }
.dicon .glyph {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(123,63,242,0.35), rgba(15,16,32,0.9));
  border: 1px solid var(--panel-border);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.08);
}
.dicon .glyph svg { width: 28px; height: 28px; }
.dicon .label {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--text);
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  line-height: 1.15;
}

/* ============================================================
   WINDOWS
   ============================================================ */
.window {
  position: absolute;
  z-index: 10;
  display: flex; flex-direction: column;
  background: var(--panel);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-win);
  overflow: hidden;
  opacity: 1;
  animation: winpop .26s cubic-bezier(.2,.9,.3,1.2);
}
.window::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(22,224,255,0.6), transparent 35%, transparent 65%, rgba(255,33,192,0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.window.focused { box-shadow: 0 36px 90px -18px rgba(0,0,0,0.85), 0 0 0 1px rgba(22,224,255,0.35), 0 0 40px -8px rgba(123,63,242,0.5); }
.window.minimized { display: none; }
.window.maximized { border-radius: 0; }
@keyframes winpop { from { transform: translateY(12px) scale(.97); } }

.win-titlebar {
  flex: 0 0 auto;
  height: 42px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px 0 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
  border-bottom: 1px solid var(--panel-border);
  cursor: grab;
}
.win-titlebar:active { cursor: grabbing; }
.win-titlebar .tb-icon { width: 20px; height: 20px; display: grid; place-items: center; }
.win-titlebar .tb-icon svg { width: 18px; height: 18px; }
.win-title {
  font-family: var(--font-ui); font-weight: 600; font-size: 13.5px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-title .accent { color: var(--cyan); }
.win-controls { margin-left: auto; display: flex; gap: 8px; }
.win-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); transition: transform .12s, box-shadow .12s; }
.win-dot:hover { transform: scale(1.15); }
.win-dot.min { background: #2a2c45; }
.win-dot.min:hover { background: var(--cyan); box-shadow: var(--glow-cyan); }
.win-dot.max { background: #2a2c45; }
.win-dot.max:hover { background: var(--purple); box-shadow: 0 0 14px rgba(123,63,242,0.7); }
.win-dot.close { background: #2a2c45; }
.win-dot.close:hover { background: var(--magenta); box-shadow: var(--glow-magenta); }

.win-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.win-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize; z-index: 3;
  background: linear-gradient(135deg, transparent 50%, rgba(22,224,255,0.5) 50%);
}

/* ============================================================
   TASKBAR
   ============================================================ */
.taskbar {
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  height: var(--taskbar-h);
  z-index: 100;
  display: flex; align-items: center; gap: 7px;
  padding: 0 8px;
  background: rgba(10, 10, 22, 0.72);
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid var(--panel-border);
  border-radius: 13px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
}

.start-btn {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 13px 0 7px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(22,224,255,0.16), rgba(255,33,192,0.16));
  border: 1px solid rgba(120,130,200,0.25);
  transition: box-shadow .18s, transform .12s;
}
.start-btn:hover { box-shadow: 0 0 22px -2px rgba(123,63,242,0.7); }
.start-btn:active { transform: scale(.97); }
.start-btn img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,33,192,0.5)); }
.start-btn .start-name { font-family: var(--font-ui); font-weight: 700; letter-spacing: .03em; font-size: 13px; }
.start-btn .start-name b { color: var(--cyan); }
.start-btn .start-name i { color: var(--magenta); font-style: normal; }

.tb-divider { width: 1px; height: 24px; background: var(--panel-border); margin: 0 1px; }

.tb-apps { display: flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.tb-empty { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); letter-spacing: .04em; padding-left: 6px; opacity: .7; }
.tb-app {
  position: relative;
  height: 34px; min-width: 40px; padding: 0 11px;
  display: flex; align-items: center; gap: 7px;
  border-radius: 9px;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  transition: background .14s, color .14s, border-color .14s, opacity .14s;
  white-space: nowrap;
}
.tb-app svg { width: 17px; height: 17px; flex: 0 0 auto; }
.tb-app:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.tb-app.open { background: rgba(22,224,255,0.1); color: var(--text); border-color: rgba(22,224,255,0.22); }
.tb-app.min { opacity: .55; background: rgba(255,255,255,0.04); border-color: transparent; }
.tb-app.min:hover { opacity: 1; }
.tb-app.open::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 16px; height: 3px; border-radius: 3px; background: var(--cyan); box-shadow: var(--glow-cyan);
}
.tb-app.min::after { display: none; }
.tb-app.focused::after { background: var(--magenta); box-shadow: var(--glow-magenta); }

.tb-tray { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.tray-link {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; color: var(--text-dim);
  transition: color .14s, background .14s, transform .12s;
}
.tray-link:hover { color: var(--text); background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.tray-link.discord:hover { color: #8ea1ff; }
.tray-link.youtube:hover { color: #ff5c5c; }
.tray-link.twitch:hover { color: #9146ff; }
.tray-link svg { width: 18px; height: 18px; }

.tb-clock {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  padding: 0 10px 0 6px; min-width: 86px;
  font-family: var(--font-mono); line-height: 1.05;
}
.tb-clock .time { font-size: 13px; font-weight: 500; color: var(--text); }
.tb-clock .date { font-size: 10px; color: var(--text-mute); }

/* ============================================================
   START MENU
   ============================================================ */
.start-menu {
  position: absolute;
  left: 12px; bottom: calc(var(--taskbar-h) + 20px);
  width: 380px; z-index: 120;
  background: rgba(10, 11, 24, 0.92);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  box-shadow: 0 30px 70px -16px rgba(0,0,0,0.85), 0 0 40px -10px rgba(123,63,242,0.45);
  overflow: hidden;
  animation: menupop .2s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes menupop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.start-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(22,224,255,0.1), rgba(255,33,192,0.1));
  border-bottom: 1px solid var(--panel-border);
}
.start-head img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255,33,192,0.55)); }
.start-head .sh-title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; }
.start-head .sh-title b { color: var(--cyan); font-style: normal; font-family: var(--font-ui); }
.start-head .sh-sub { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); }
.start-apps { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 11px;
  border: 1px solid transparent; text-align: left;
  transition: background .14s, border-color .14s, transform .12s;
}
.sm-item:hover { background: rgba(22,224,255,0.08); border-color: rgba(22,224,255,0.22); transform: translateX(2px); }
.sm-item .smi-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(150deg, rgba(123,63,242,0.4), rgba(15,16,32,0.9)); border: 1px solid var(--panel-border); }
.sm-item .smi-icon svg { width: 19px; height: 19px; }
.sm-item .smi-label { font-size: 13px; font-weight: 600; }
.start-foot {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-top: 1px solid var(--panel-border); background: rgba(0,0,0,0.25);
}
.start-foot .sf-links { margin-left: auto; display: flex; gap: 6px; }

/* ============================================================
   SHARED CONTENT STYLES
   ============================================================ */
.win-pad { padding: 28px 32px 34px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--cyan); font-weight: 600; margin-bottom: 12px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--cyan); box-shadow: var(--glow-cyan); }
.win-h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 38px; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 14px;
  text-wrap: balance;
}
.win-h1 .neon-c { color: var(--cyan); font-style: normal; font-family: var(--font-ui); text-shadow: var(--glow-cyan); }
.win-h1 .neon-m { color: var(--magenta); font-style: normal; font-family: var(--font-ui); text-shadow: var(--glow-magenta); }
.lead { font-family: var(--font-ui); font-weight: 400; font-size: 16px; line-height: 1.62; color: var(--text-dim); max-width: 64ch; }
.lead.body { margin-top: 14px; }
p.copy { font-family: var(--font-ui); font-weight: 400; font-size: 14px; line-height: 1.62; color: var(--text-dim); max-width: 66ch; }
p.copy + p.copy { margin-top: 14px; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 22px; border-radius: 11px;
  font-family: var(--font-ui); font-weight: 700; font-size: 14px; letter-spacing: .03em;
  white-space: nowrap;
  transition: transform .12s, box-shadow .18s, background .18s;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: linear-gradient(135deg, var(--cyan), var(--purple)); color: #06060e; box-shadow: 0 0 24px -4px rgba(22,224,255,0.6); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 34px -2px rgba(22,224,255,0.85); }
.btn-magenta { background: linear-gradient(135deg, var(--magenta), var(--purple)); color: #fff; box-shadow: 0 0 24px -4px rgba(255,33,192,0.6); }
.btn-magenta:hover { transform: translateY(-2px); box-shadow: 0 0 34px -2px rgba(255,33,192,0.85); }
.btn-ghost { border: 1px solid var(--panel-border); color: var(--text); background: rgba(255,255,255,0.03); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); transform: translateY(-2px); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--panel-border); color: var(--text-dim);
  font-family: var(--font-mono);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-on { background: #2dffb0; box-shadow: 0 0 10px #2dffb0; animation: pulse 2s ease-in-out infinite; }
.status-off { background: #ff5a5a; box-shadow: 0 0 10px #ff5a5a; }
@keyframes pulse { 50% { opacity: .45; } }

/* image placeholder */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(123,63,242,0.14) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, rgba(22,224,255,0.06), rgba(255,33,192,0.06));
  border: 1px solid var(--panel-border);
  display: grid; place-items: center;
}
.ph .ph-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute); padding: 5px 10px; border: 1px dashed rgba(150,150,190,0.3);
  border-radius: 6px; background: rgba(6,6,14,0.6);
}

.divider { height: 1px; background: var(--panel-border); margin: 26px 0; }

/* boot screen */
.boot {
  position: absolute; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  background: radial-gradient(120% 100% at 50% 40%, #14122a, #06060e 70%);
  animation: bootfade .6s ease;
}
.boot.out { animation: bootout .7s ease forwards; }
@keyframes bootout { to { opacity: 0; visibility: hidden; } }
.boot img { width: 130px; height: 130px; object-fit: contain; filter: drop-shadow(0 0 26px rgba(255,33,192,0.65)); animation: bootlogo 2.4s ease-in-out infinite; }
@keyframes bootlogo { 50% { transform: scale(1.06); filter: drop-shadow(0 0 40px rgba(22,224,255,0.8)); } }
.boot .boot-name { font-family: var(--font-serif); font-size: 34px; }
.boot .boot-name b { font-family: var(--font-ui); font-style: normal; color: var(--cyan); }
.boot .boot-name i { color: var(--magenta); font-style: normal; }
.boot-bar { width: 240px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.boot-bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: var(--glow-cyan); animation: bootload 2.4s ease forwards; }
@keyframes bootload { to { width: 100%; } }
.boot-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); }

/* ---- Wallpaper credit + placeholder stripes ---- */
.wp-credit {
  position: absolute; right: 16px; top: 16px; z-index: 4;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
  color: var(--text-dim); padding: 6px 12px; border-radius: 999px;
  background: rgba(6,6,14,0.55); border: 1px solid var(--panel-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wp-ph-stripes {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(45deg, rgba(123,63,242,0.08) 0 16px, transparent 16px 32px);
  mask-image: radial-gradient(80% 70% at 50% 45%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000, transparent 75%);
}

/* ---- Hero welcome widget ---- */
.hero-widget {
  position: absolute; z-index: 3;
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: min(560px, 84vw); text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity .5s, filter .5s, transform .5s;
}
.hero-widget.dim { opacity: 0; filter: blur(6px); pointer-events: none; transform: translate(-50%, -52%) scale(.97); }
.hero-logo { width: 116px; height: 116px; object-fit: contain; filter: drop-shadow(0 0 30px rgba(255,33,192,0.55)); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.hero-kicker { margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--cyan); text-shadow: var(--glow-cyan); }
.hero-title { font-family: var(--font-ui); font-weight: 700; font-size: clamp(48px, 9vw, 92px); line-height: .95; letter-spacing: -.02em; margin: 6px 0 4px; }
.hero-title .hc { color: var(--cyan); text-shadow: 0 0 26px rgba(22,224,255,.6); }
.hero-title .hm { color: var(--magenta); text-shadow: 0 0 26px rgba(255,33,192,.6); }
.hero-sub { font-family: var(--font-ui); font-weight: 400; font-size: 15.5px; line-height: 1.55; color: var(--text-dim); max-width: 48ch; margin: 8px auto 22px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-hint { margin-top: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-mute); }

/* ---- Timeline (About) ---- */
.timeline { margin-top: 30px; }
.tl-item { display: grid; grid-template-columns: 56px 1fr; gap: 4px; }
.tl-rail { position: relative; display: flex; justify-content: center; }
.tl-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--cyan), var(--magenta)); opacity: .4; }
.tl-item:first-child .tl-rail::before { top: 22px; }
.tl-item:last-child .tl-rail::before { bottom: auto; height: 22px; }
.tl-node { position: relative; margin-top: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-1); border: 2px solid var(--cyan); box-shadow: var(--glow-cyan); }
.tl-node.next { border-color: var(--magenta); box-shadow: var(--glow-magenta); animation: pulse 1.8s ease-in-out infinite; }
.tl-card { padding: 0 0 30px 14px; }
.tl-card.next { padding-bottom: 6px; }
.tl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.tl-tag { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--cyan); }
.tl-tag.next { color: var(--magenta); }
.tl-kind { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); }
.tl-title { font-family: var(--font-ui); font-weight: 700; font-size: 19px; margin-bottom: 9px; letter-spacing: .01em; }
.tl-hw { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); padding: 6px 11px; border: 1px solid var(--panel-border); border-radius: 8px; margin-bottom: 12px; background: rgba(123,63,242,0.08); }
.tl-hw svg { width: 15px; height: 15px; color: var(--violet); }

/* ---- Servers ---- */
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 26px; }
.server-card { border: 1px solid var(--panel-border); border-radius: 13px; overflow: hidden; background: rgba(255,255,255,0.02); transition: transform .18s, box-shadow .2s, border-color .2s; }
.server-card:hover { transform: translateY(-4px); border-color: rgba(22,224,255,0.4); box-shadow: 0 18px 40px -16px rgba(0,0,0,.7), 0 0 26px -10px rgba(22,224,255,.5); }
.server-art { height: 130px; }
.sc-status { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: rgba(6,6,14,0.8); border: 1px solid var(--panel-border); }
.sc-status.on { color: #2dffb0; } .sc-status.off { color: #ff8a8a; }
.server-body { padding: 16px 17px 18px; }
.sc-name { font-family: var(--font-ui); font-weight: 700; font-size: 18px; margin-bottom: 7px; }
.sc-type { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; color: var(--cyan); margin-bottom: 11px; }
.sc-type svg { width: 14px; height: 14px; }
.sc-desc { font-size: 14px; }

/* ---- Team ---- */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.team-card { display: flex; gap: 16px; padding: 18px; border-radius: 14px; border: 1px solid var(--panel-border); background: rgba(255,255,255,0.02); transition: transform .18s, box-shadow .2s; }
.team-card:hover { transform: translateY(-3px); }
.team-card.cyan:hover { box-shadow: 0 0 30px -10px rgba(22,224,255,.6); border-color: rgba(22,224,255,.4); }
.team-card.magenta:hover { box-shadow: 0 0 30px -10px rgba(255,33,192,.6); border-color: rgba(255,33,192,.4); }
.team-avatar { width: 88px; height: 88px; flex: 0 0 auto; border-radius: 12px; }
.tm-name { font-family: var(--font-ui); font-weight: 700; font-size: 21px; }
.tm-role { font-family: var(--font-mono); font-size: 12px; margin: 4px 0 10px; }
.tm-role.cyan { color: var(--cyan); } .tm-role.magenta { color: var(--magenta); }
.tm-bio { font-size: 13.5px; }
.team-cta { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border: 1px dashed var(--panel-border); border-radius: 13px; background: rgba(123,63,242,0.06); }

/* ---- FAQ ---- */
.faq-list { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--panel-border); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.02); transition: border-color .2s; }
.faq-item.open { border-color: rgba(22,224,255,0.35); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; font-family: var(--font-ui); font-weight: 600; font-size: 15.5px; text-align: left; }
.faq-item.open .faq-q { color: var(--cyan); }
.faq-chev { width: 18px; height: 18px; transition: transform .25s; flex: 0 0 auto; }
.faq-item.open .faq-chev { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner .copy { padding: 0 18px 17px; font-size: 14.5px; }

/* ---- Leaderboard ---- */
.lb { margin-top: 24px; display: flex; flex-direction: column; gap: 7px; }
.lb-row { display: grid; grid-template-columns: 40px 38px 1fr auto auto; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 11px; border: 1px solid var(--panel-border); background: rgba(255,255,255,0.02); transition: transform .14s, border-color .18s; }
.lb-row:hover { transform: translateX(3px); border-color: rgba(123,63,242,.4); }
.lb-row.top { background: linear-gradient(90deg, rgba(123,63,242,0.1), rgba(255,255,255,0.02)); }
.lb-rank { font-family: var(--font-mono); font-weight: 700; font-size: 15px; text-align: center; color: var(--text-dim); display: grid; place-items: center; }
.lb-rank svg { width: 20px; height: 20px; color: #ffd24a; }
.lb-rank.r1 { color: #ffd24a; } .lb-rank.r2 { color: var(--cyan); } .lb-rank.r3 { color: var(--magenta); }
.lb-av { width: 38px; height: 38px; border-radius: 9px; }
.lb-name { font-family: var(--font-ui); font-weight: 600; font-size: 15px; }
.lb-game { height: 24px; font-size: 10.5px; }
.lb-val { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--cyan); }

/* ---- Gallery ---- */
.gal-wrap { container-type: inline-size; }
.gallery-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row dense; gap: 12px; }
.gal-tile { border-radius: 12px; cursor: pointer; overflow: hidden; transition: transform .2s, box-shadow .2s; aspect-ratio: 4 / 3; }
.gal-tile:hover { transform: scale(1.03); box-shadow: 0 0 26px -8px rgba(22,224,255,.6); z-index: 1; }
.gal-tile.wide { grid-column: span 2; grid-row: span 2; aspect-ratio: unset; }
.gal-tile.tall { grid-row: span 2; aspect-ratio: unset; }
.gal-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* gallery container queries — react to window width, not viewport */
@container (max-width: 560px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gal-tile.wide { grid-column: span 2; grid-row: span 2; }
  .gal-tile.tall { grid-row: span 2; }
}
@container (max-width: 360px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gal-tile.wide { grid-column: span 1; grid-row: span 1; aspect-ratio: 4 / 3; }
  .gal-tile.tall { grid-row: span 1; aspect-ratio: 4 / 3; }
}

/* pagination */
.gal-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.gal-page-info { font-size: 13px; color: var(--text-mute); font-family: var(--font-mono); min-width: 50px; text-align: center; }

/* image viewer window */
.iv-wrap { display: flex; flex-direction: column; }
.iv-frame { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; padding: 6px; overflow: hidden; }
.iv-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; display: block; }
.iv-footer { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--panel-solid); border-top: 1px solid var(--panel-border); flex-shrink: 0; }
.iv-nav { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--panel-border); color: var(--text); cursor: pointer; flex-shrink: 0; transition: background .15s, border-color .15s; }
.iv-nav:hover { background: rgba(22,224,255,.15); border-color: rgba(22,224,255,.4); color: var(--cyan); }
.iv-nav svg { width: 15px; height: 15px; }
.iv-info { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.iv-cap { font-family: var(--font-ui); font-size: 13px; color: var(--text-dim); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.iv-counter { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); }
.iv-empty { display: grid; place-items: center; color: var(--text-mute); font-family: var(--font-mono); font-size: 13px; }

/* ---- Tiers (Donate) ---- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.tier { position: relative; display: flex; flex-direction: column; padding: 24px 20px; border-radius: 14px; border: 1px solid var(--panel-border); background: rgba(255,255,255,0.02); transition: transform .18s, box-shadow .2s; }
.tier:hover { transform: translateY(-4px); }
.tier.best { border-color: rgba(22,224,255,0.45); box-shadow: 0 0 34px -12px rgba(22,224,255,.6); }
.tier-flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--cyan), var(--purple)); color: #06060e; }
.tier-name { font-family: var(--font-ui); font-weight: 700; font-size: 20px; }
.tier-price { font-family: var(--font-mono); font-size: 13px; color: var(--text-mute); margin: 4px 0 16px; }
.tier-perks { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; flex: 1; }
.tier-perks li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-dim); }
.tier-perks svg { width: 14px; height: 14px; color: var(--violet); flex: 0 0 auto; }
.tier .btn { width: 100%; justify-content: center; }

@media (max-width: 720px) {
  .desktop-icons { grid-template-columns: repeat(2, 80px); }
  .tb-app .tb-label { display: none; }
  .start-menu { width: calc(100% - 24px); }
  .team-grid, .tier-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
}

/* ============================================================
   ACCESSORIES — Kalkulačka + Poznámkový blok
   ============================================================ */
textarea, input { user-select: text; -webkit-user-select: text; }

.app-fill { height: 100%; display: flex; flex-direction: column; }

/* ---- Kalkulačka ---- */
.calc { padding: 16px; gap: 14px; }
.calc-screen {
  flex: 0 0 auto;
  border-radius: 14px;
  padding: 18px 20px 14px;
  background: linear-gradient(160deg, rgba(22,224,255,0.08), rgba(6,6,14,0.85));
  border: 1px solid var(--panel-border);
  box-shadow: inset 0 2px 18px rgba(0,0,0,0.55), 0 0 22px -10px rgba(22,224,255,0.5);
  text-align: right;
  overflow: hidden;
}
.calc-expr {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
  color: var(--text-mute); height: 18px; white-space: nowrap; overflow: hidden;
}
.calc-disp {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(30px, 9vw, 44px); line-height: 1.1; color: var(--text);
  text-shadow: 0 0 18px rgba(22,224,255,0.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calc-disp.err { color: var(--magenta); text-shadow: var(--glow-magenta); font-size: 30px; }

.calc-pad {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.ck {
  border-radius: 12px;
  font-family: var(--font-ui); font-weight: 700; font-size: 20px;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--panel-border);
  transition: transform .08s, background .14s, box-shadow .16s, color .14s, border-color .14s;
  display: grid; place-items: center;
}
.ck:hover { background: rgba(255,255,255,0.09); border-color: rgba(120,130,200,0.4); }
.ck:active { transform: scale(.94); }
.ck.op { color: var(--cyan); background: rgba(22,224,255,0.08); border-color: rgba(22,224,255,0.28); }
.ck.op:hover { background: rgba(22,224,255,0.16); box-shadow: 0 0 18px -6px rgba(22,224,255,0.7); }
.ck.op.active { background: var(--cyan); color: #06060e; box-shadow: var(--glow-cyan); }
.ck.act { color: var(--violet); font-size: 17px; background: rgba(123,63,242,0.1); border-color: rgba(123,63,242,0.28); }
.ck.act:hover { background: rgba(123,63,242,0.2); }
.ck.dot { color: var(--text-dim); }
.ck.eq {
  background: linear-gradient(135deg, var(--magenta), var(--purple));
  color: #fff; border-color: transparent; box-shadow: 0 0 22px -6px rgba(255,33,192,0.7);
}
.ck.eq:hover { box-shadow: 0 0 30px -4px rgba(255,33,192,0.95); }
.calc-hint {
  flex: 0 0 auto; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--text-mute);
}

/* ---- Poznámkový blok ---- */
.note { padding: 0; }
.note-layout { flex: 1 1 auto; display: grid; grid-template-columns: 210px 1fr; min-height: 0; }

/* sidebar */
.note-side {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--panel-border);
  background: rgba(6,6,14,0.35);
}
.note-new {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 12px 8px; height: 38px; flex: 0 0 auto;
  border-radius: 10px;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .02em;
  color: #06060e; background: linear-gradient(135deg, var(--cyan), var(--purple));
  box-shadow: 0 0 20px -6px rgba(22,224,255,0.6);
  transition: transform .1s, box-shadow .16s;
}
.note-new svg { width: 16px; height: 16px; }
.note-new:hover { transform: translateY(-1px); box-shadow: 0 0 28px -4px rgba(22,224,255,0.85); }
.note-new:active { transform: scale(.97); }

.note-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 5px; }
.note-item {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 30px 10px 12px;
  border-radius: 10px; text-align: left;
  border: 1px solid transparent;
  transition: background .14s, border-color .14s;
}
.note-item:hover { background: rgba(255,255,255,0.05); }
.note-item.active { background: rgba(22,224,255,0.1); border-color: rgba(22,224,255,0.3); }
.ni-title {
  font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-item.active .ni-title { color: var(--cyan); }
.ni-prev {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ni-del {
  position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; color: var(--text-mute);
  opacity: 0; transition: opacity .14s, color .14s, background .14s;
}
.ni-del svg { width: 14px; height: 14px; }
.note-item:hover .ni-del { opacity: 1; }
.ni-del:hover { color: var(--magenta); background: rgba(255,33,192,0.12); }
.note-count {
  flex: 0 0 auto; padding: 9px 14px; border-top: 1px solid var(--panel-border);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--text-mute);
}

/* editor */
.note-editor { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 14px 0; }
.note-toolbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px;
}
.note-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em;
}
.note-status .status-dot { width: 8px; height: 8px; border-radius: 50%; }
.note-status.ok { color: #2dffb0; }
.note-status.ok .status-dot { background: #2dffb0; box-shadow: 0 0 10px #2dffb0; }
.note-status.pending { color: #ffce5a; }
.note-status.pending .status-dot { background: #ffce5a; box-shadow: 0 0 10px #ffce5a; animation: pulse 1s ease-in-out infinite; }
.note-tools { display: flex; gap: 7px; }
.note-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 9px;
  font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: .02em;
  color: var(--text-dim); border: 1px solid var(--panel-border); background: rgba(255,255,255,0.03);
  transition: color .14s, border-color .14s, background .14s, transform .1s;
}
.note-btn svg { width: 15px; height: 15px; }
.note-btn:hover { color: var(--cyan); border-color: rgba(22,224,255,0.4); background: rgba(22,224,255,0.07); }
.note-btn:active { transform: scale(.96); }
.note-btn.danger:hover { color: var(--magenta); border-color: rgba(255,33,192,0.45); background: rgba(255,33,192,0.07); }
.note-area {
  flex: 1 1 auto; min-height: 0;
  width: 100%; resize: none;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(6,6,14,0.5);
  color: var(--text);
  font-family: var(--font-mono); font-size: 14px; line-height: 1.7;
  outline: none;
  transition: border-color .16s, box-shadow .16s;
  box-shadow: inset 0 2px 14px rgba(0,0,0,0.4);
}
.note-area::placeholder { color: var(--text-mute); }
.note-area:focus { border-color: rgba(22,224,255,0.45); box-shadow: inset 0 2px 14px rgba(0,0,0,0.4), 0 0 0 1px rgba(22,224,255,0.3), 0 0 22px -10px rgba(22,224,255,0.6); }
.note-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 4px 14px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--text-mute);
}
.note-foot-hint { color: var(--violet); opacity: .8; }

/* ============================================================
   DESKTOP CONTEXT MENU
   ============================================================ */
.ctx-menu {
  position: absolute; z-index: 130; width: 226px;
  padding: 7px;
  background: rgba(10, 11, 24, 0.94);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  box-shadow: 0 26px 60px -16px rgba(0,0,0,0.85), 0 0 36px -12px rgba(123,63,242,0.5);
  animation: ctxpop .14s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes ctxpop { from { opacity: 0; transform: scale(.95) translateY(-4px); } }
.ctx-label {
  padding: 6px 11px 7px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute);
}
.ctx-item {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 9px; text-align: left;
  font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--text);
  transition: background .13s, color .13s, transform .1s;
}
.ctx-item .ctx-ic { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--cyan);
  background: linear-gradient(150deg, rgba(123,63,242,0.35), rgba(15,16,32,0.9));
  border: 1px solid var(--panel-border); }
.ctx-item .ctx-ic svg { width: 15px; height: 15px; }
.ctx-item:hover { background: rgba(22,224,255,0.1); transform: translateX(2px); }
.ctx-item.danger .ctx-ic { color: var(--magenta); }
.ctx-item.danger:hover { background: rgba(255,33,192,0.12); }
.ctx-item.disabled { opacity: .38; pointer-events: none; }
.ctx-sep { height: 1px; background: var(--panel-border); margin: 6px 8px; }

/* ============================================================
   MANAGED IMAGE SLOTS (uploaded via Administrace)
   ============================================================ */
.server-art { position: relative; overflow: hidden; }
.server-art.has-img, .team-avatar.has-img, .gal-tile.has-img {
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.gal-tile.has-img { background-color: var(--panel-solid); }
.start-head img, .start-btn img, .hero-logo, .boot img { background: transparent; }

/* ============================================================
   ADMINISTRACE
   ============================================================ */
.admin { min-height: 0; }

/* login */
.admin-login { display: grid; place-items: center; padding: 30px; }
.al-card {
  width: min(380px, 100%); text-align: center;
  display: flex; flex-direction: column; align-items: center;
  padding: 34px 30px; border-radius: 18px;
  border: 1px solid var(--panel-border);
  background: rgba(6,6,14,0.5);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7), 0 0 40px -16px rgba(123,63,242,0.5);
}
.al-lock {
  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(123,63,242,0.4), rgba(15,16,32,0.9));
  border: 1px solid var(--panel-border); color: var(--cyan); margin-bottom: 18px;
  box-shadow: 0 0 24px -8px rgba(22,224,255,0.6);
}
.al-lock svg { width: 28px; height: 28px; }
.al-title { font-family: var(--font-serif); font-size: 28px; margin-bottom: 8px; }
.al-sub { font-family: var(--font-ui); font-weight: 400; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 22px; }
.al-form { display: flex; flex-direction: column; gap: 11px; width: 100%; }
.al-input {
  height: 46px; border-radius: 11px; padding: 0 16px;
  background: rgba(6,6,14,0.6); border: 1px solid var(--panel-border);
  color: var(--text); font-family: var(--font-mono); font-size: 15px; letter-spacing: .1em;
  outline: none; transition: border-color .16s, box-shadow .16s;
}
.al-input:focus { border-color: rgba(22,224,255,0.5); box-shadow: 0 0 0 1px rgba(22,224,255,0.3); }
.al-input.err { border-color: var(--magenta); box-shadow: 0 0 0 1px rgba(255,33,192,0.4); }
.al-form .btn { width: 100%; justify-content: center; }
.al-err { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--magenta-soft); }
.al-hint { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); letter-spacing: .04em; }
.al-hint b { color: var(--cyan); }

/* admin shell */
.admin-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--panel-border);
  background: rgba(6,6,14,0.3);
}
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.atab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: 9px;
  font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; letter-spacing: .02em;
  color: var(--text-dim); border: 1px solid transparent; background: rgba(255,255,255,0.03);
  transition: color .14s, border-color .14s, background .14s;
}
.atab svg { width: 15px; height: 15px; }
.atab:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.atab.active { color: var(--cyan); background: rgba(22,224,255,0.1); border-color: rgba(22,224,255,0.3); }

.admin-body { flex: 1 1 auto; overflow-y: auto; padding: 22px 24px 28px; min-height: 0; }
.admin-section { margin-bottom: 8px; }
.as-title { font-family: var(--font-ui); font-weight: 700; font-size: 19px; margin-bottom: 6px; }
.as-desc { font-family: var(--font-ui); font-weight: 400; font-size: 13px; line-height: 1.55; color: var(--text-dim); max-width: 72ch; margin-bottom: 20px; }

/* dropzones */
.dz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 13px; }
.dz-grid.wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.slot { display: flex; flex-direction: column; gap: 9px; }
.slot-cap { font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--text); }
.slot-cap span { color: var(--text-mute); font-weight: 500; }

.dz {
  position: relative; overflow: hidden; cursor: pointer;
  border: 1.5px dashed var(--panel-border); border-radius: 12px;
  background: rgba(6,6,14,0.4);
  display: grid; place-items: center; min-height: 96px;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.dz:hover { border-color: rgba(22,224,255,0.5); background: rgba(22,224,255,0.05); }
.dz.over { border-color: var(--cyan); background: rgba(22,224,255,0.12); box-shadow: 0 0 0 2px rgba(22,224,255,0.3), 0 0 26px -8px rgba(22,224,255,0.6) inset; }
.dz.filled { border-style: solid; }
.dz-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.dz-empty { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px; text-align: center; pointer-events: none; }
.dz-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--cyan);
  background: linear-gradient(150deg, rgba(123,63,242,0.35), rgba(15,16,32,0.9)); border: 1px solid var(--panel-border); }
.dz-ic svg { width: 17px; height: 17px; }
.dz-label { font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; color: var(--text-dim); }
.dz-hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-mute); letter-spacing: .04em; }
.dz-clear {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  color: var(--text); background: rgba(6,6,14,0.75); border: 1px solid var(--panel-border);
  backdrop-filter: blur(6px); transition: color .14s, background .14s, transform .1s;
}
.dz-clear svg { width: 14px; height: 14px; }
.dz-clear:hover { color: var(--magenta); border-color: rgba(255,33,192,0.5); transform: scale(1.08); }
.dz-busy { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: rgba(6,6,14,0.65); font-family: var(--font-mono); font-size: 12px; color: var(--cyan); letter-spacing: .06em; }

.sm-item.admin .smi-icon { color: var(--magenta); background: linear-gradient(150deg, rgba(255,33,192,0.32), rgba(15,16,32,0.9)); }

/* gallery caption overlay */
.gal-tile { position: relative; }
.gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 22px 12px 9px; font-family: var(--font-ui); font-weight: 600; font-size: 12px; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9); line-height: 1.25;
  background: linear-gradient(180deg, transparent, rgba(6,6,14,0.85));
  white-space: normal;
}

/* team color: violet variant */
.team-card.violet:hover { box-shadow: 0 0 30px -10px rgba(177,108,255,.6); border-color: rgba(177,108,255,.4); }
.tm-role.violet { color: var(--violet); }

/* ---- admin: media item with caption ---- */
.media-item { display: flex; flex-direction: column; gap: 7px; }
.cap-input {
  height: 34px; border-radius: 8px; padding: 0 11px;
  background: rgba(6,6,14,0.55); border: 1px solid var(--panel-border);
  color: var(--text); font-family: var(--font-ui); font-size: 12.5px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.cap-input::placeholder { color: var(--text-mute); }
.cap-input:focus { border-color: rgba(22,224,255,0.45); box-shadow: 0 0 0 1px rgba(22,224,255,0.25); }

/* ---- admin: editable records (team / servers) ---- */
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.rec {
  position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 14px;
  padding: 15px; border-radius: 14px;
  border: 1px solid var(--panel-border); background: rgba(255,255,255,0.02);
}
.rec .dz { min-height: 0; align-self: start; }
.rec-del {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  color: var(--text-mute); border: 1px solid var(--panel-border); background: rgba(6,6,14,0.6);
  transition: color .14s, border-color .14s, background .14s;
}
.rec-del svg { width: 15px; height: 15px; }
.rec-del:hover { color: var(--magenta); border-color: rgba(255,33,192,0.5); background: rgba(255,33,192,0.1); }
.rec-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.f-input, .f-area {
  width: 100%; border-radius: 8px; padding: 9px 11px;
  background: rgba(6,6,14,0.55); border: 1px solid var(--panel-border);
  color: var(--text); font-family: var(--font-ui); font-size: 13px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.f-area { font-family: var(--font-ui); font-weight: 400; font-size: 13px; line-height: 1.5; resize: vertical; min-height: 62px; }
.f-input::placeholder, .f-area::placeholder { color: var(--text-mute); }
.f-input:focus, .f-area:focus { border-color: rgba(22,224,255,0.45); box-shadow: 0 0 0 1px rgba(22,224,255,0.25); }

.colorpick { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.cp-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); margin-right: 2px; }
.swatch { width: 22px; height: 22px; border-radius: 7px; border: 2px solid transparent; transition: transform .1s, box-shadow .14s; }
.swatch.cyan { background: var(--cyan); }
.swatch.magenta { background: var(--magenta); }
.swatch.violet { background: var(--violet); }
.swatch:hover { transform: scale(1.12); }
.swatch.sel { border-color: var(--text); box-shadow: 0 0 0 2px rgba(255,255,255,0.15), 0 0 14px -2px currentColor; }

.toggle {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 14px; border-radius: 9px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  border: 1px solid var(--panel-border); background: rgba(6,6,14,0.5);
  transition: color .14s, border-color .14s, background .14s;
}
.toggle.on { color: #2dffb0; border-color: rgba(45,255,176,0.4); background: rgba(45,255,176,0.08); }
.toggle.off { color: #ff8a8a; border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); }
.toggle:hover { filter: brightness(1.15); }

.add-rec {
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 20px; border-radius: 11px;
  font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; letter-spacing: .02em;
  color: var(--cyan); border: 1px dashed rgba(22,224,255,0.4); background: rgba(22,224,255,0.05);
  transition: background .15s, box-shadow .15s, transform .1s;
}
.add-rec svg { width: 17px; height: 17px; }
.add-rec:hover { background: rgba(22,224,255,0.12); box-shadow: 0 0 22px -8px rgba(22,224,255,0.6); transform: translateY(-1px); }

/* ============================================================
   SPRÁVCE ÚLOH
   ============================================================ */
.tm { padding: 16px; gap: 14px; }
.tm-cards { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.tm-card {
  position: relative; overflow: hidden;
  padding: 15px 16px 12px; border-radius: 14px;
  border: 1px solid var(--panel-border); background: rgba(6,6,14,0.45);
}
.tm-card.cpu { box-shadow: inset 0 0 30px -18px rgba(22,224,255,0.7); }
.tm-card.ram { box-shadow: inset 0 0 30px -18px rgba(255,33,192,0.7); }
.tm-head { display: flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--text); }
.tm-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(150deg, rgba(123,63,242,0.35), rgba(15,16,32,0.9)); border: 1px solid var(--panel-border); }
.tm-card.cpu .tm-ic { color: var(--cyan); }
.tm-card.ram .tm-ic { color: var(--magenta); }
.tm-ic svg { width: 16px; height: 16px; }
.tm-sub { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.tm-big { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 8px; font-family: var(--font-mono); }
.tm-big b { font-size: 40px; font-weight: 700; line-height: 1; }
.tm-card.cpu .tm-big b { color: var(--cyan); text-shadow: 0 0 18px rgba(22,224,255,0.5); }
.tm-card.ram .tm-big b { color: var(--magenta); text-shadow: 0 0 18px rgba(255,33,192,0.5); }
.tm-big i { font-style: normal; font-size: 14px; color: var(--text-dim); }
.spark { width: 100%; height: 46px; display: block; }
.tm-meta { margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; color: var(--text-mute); }

.tm-proc { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--panel-border); border-radius: 13px; overflow: hidden; background: rgba(255,255,255,0.02); }
.tm-proc-head, .tm-row { display: grid; grid-template-columns: 1.6fr 0.8fr 1.3fr 0.8fr; align-items: center; gap: 10px; padding: 9px 14px; }
.tm-proc-head { flex: 0 0 auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); border-bottom: 1px solid var(--panel-border); background: rgba(6,6,14,0.4); }
.tm-proc-head span:nth-child(3), .tm-proc-head span:nth-child(4) { text-align: right; }
.tm-proc-list { flex: 1 1 auto; overflow-y: auto; }
.tm-row { border-bottom: 1px solid rgba(120,130,200,0.08); font-size: 13px; }
.tm-row:hover { background: rgba(22,224,255,0.05); }
.tm-row.off { opacity: .5; }
.tm-name { display: flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-name .status-dot { width: 7px; height: 7px; flex: 0 0 auto; }
.tm-kind { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); }
.tm-cpu { display: flex; align-items: center; gap: 9px; justify-content: flex-end; font-family: var(--font-mono); font-size: 12px; color: var(--cyan); }
.tm-bar { width: 56px; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; flex: 0 0 auto; }
.tm-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--purple)); border-radius: 4px; transition: width .6s ease; }
.tm-ram { text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--magenta-soft); }
.tm-foot { flex: 0 0 auto; text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; color: var(--text-mute); }

@media (max-width: 560px) { .tm-cards { grid-template-columns: 1fr; } }

/* ============================================================
   SETTINGS / ICON SIZE / ACCENT / MOTION
   ============================================================ */
.os { --accent: #16e0ff; --accent-rgb: 22,224,255; }
.os.accent-magenta { --accent: #ff21c0; --accent-rgb: 255,33,192; }
.os.accent-violet  { --accent: #b16cff; --accent-rgb: 177,108,255; }

/* accent applied to a few prominent spots (later source order wins) */
.dicon:hover { background: rgba(var(--accent-rgb), 0.09); border-color: rgba(var(--accent-rgb), 0.28); }
.tb-app.open { background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.24); }
.tb-app.open::after { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.hero-title .hc { color: var(--accent); }

/* icon sizes */
.desktop-icons { grid-template-columns: repeat(2, var(--ic-w, 92px)); }
.dicon { width: var(--ic-w, 92px); }
.icons-sm { --ic-w: 76px; }
.icons-sm .dicon .glyph { width: 42px; height: 42px; border-radius: 11px; }
.icons-sm .dicon .glyph svg { width: 21px; height: 21px; }
.icons-sm .dicon .label { font-size: 10.5px; }
.icons-lg { --ic-w: 110px; }
.icons-lg .dicon .glyph { width: 68px; height: 68px; border-radius: 18px; }
.icons-lg .dicon .glyph svg { width: 35px; height: 35px; }
.icons-lg .dicon .label { font-size: 13.5px; }

/* trash badge */
.dicon .glyph { position: relative; }
.dicon-badge {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--magenta); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  box-shadow: 0 0 12px -2px var(--magenta); border: 1.5px solid rgba(6,6,14,0.8);
}

/* reduce motion */
.no-motion *, .no-motion *::before, .no-motion *::after {
  animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important;
}

/* ---- Nastavení ---- */
.settings { padding: 0; }
.set-scroll { flex: 1 1 auto; overflow-y: auto; padding: 8px 22px 22px; min-height: 0; }
.set-row {
  display: flex; align-items: center; gap: 18px;
  padding: 17px 2px; border-bottom: 1px solid rgba(120,130,200,0.1);
}
.set-text { flex: 1 1 auto; min-width: 0; }
.set-title { font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--text); }
.set-desc { font-family: var(--font-ui); font-weight: 400; font-size: 12.5px; color: var(--text-mute); line-height: 1.45; margin-top: 3px; }
.set-ctrl { flex: 0 0 auto; }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(6,6,14,0.55); border: 1px solid var(--panel-border); }
.seg-btn {
  padding: 7px 13px; border-radius: 7px; font-family: var(--font-ui); font-weight: 600; font-size: 12.5px;
  color: var(--text-dim); transition: color .14s, background .14s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { color: #06060e; background: linear-gradient(135deg, var(--cyan), var(--purple)); box-shadow: 0 0 16px -6px rgba(22,224,255,0.7); }

.set-swatches { display: flex; gap: 9px; }

.switch {
  width: 50px; height: 28px; border-radius: 999px; padding: 3px;
  background: rgba(255,255,255,0.08); border: 1px solid var(--panel-border);
  display: flex; align-items: center; transition: background .18s;
}
.switch .knob { width: 20px; height: 20px; border-radius: 50%; background: var(--text-mute); transition: transform .18s, background .18s; }
.switch.on { background: rgba(22,224,255,0.25); border-color: rgba(22,224,255,0.5); }
.switch.on .knob { transform: translateX(22px); background: var(--cyan); box-shadow: 0 0 12px -2px var(--cyan); }

.set-reset { padding-top: 18px; }

/* ---- Koš ---- */
.trash { padding: 0; }
.trash.empty { display: grid; place-items: center; padding: 30px; }
.trash-empty { text-align: center; max-width: 320px; }
.te-ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 17px; display: grid; place-items: center;
  color: var(--text-mute); background: linear-gradient(150deg, rgba(123,63,242,0.3), rgba(15,16,32,0.9)); border: 1px solid var(--panel-border); }
.te-ic svg { width: 30px; height: 30px; }
.trash-empty h3 { font-family: var(--font-serif); font-size: 23px; margin-bottom: 8px; }

.trash-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--panel-border); }
.trash-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); letter-spacing: .03em; }
.trash-list { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.trash-item { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--panel-border); background: rgba(255,255,255,0.02); }
.ti-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; color: var(--cyan);
  background: linear-gradient(150deg, rgba(123,63,242,0.32), rgba(15,16,32,0.9)); border: 1px solid var(--panel-border); }
.ti-ic svg { width: 18px; height: 18px; }
.ti-info { flex: 1 1 auto; min-width: 0; }
.ti-title { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); margin-top: 2px; }
.ti-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.ti-actions .note-btn.danger { padding: 0 10px; }

/* ---- admin: Koš tab ---- */
.admin-trash-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.admin-trash-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 20px; }
.admin-trash-empty .te-ic { width: 56px; height: 56px; margin-bottom: 14px; }
.trash-rec { display: block; }
.tr-meta { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); margin-bottom: 2px; }
.ti-ic.sm { width: 26px; height: 26px; border-radius: 7px; }
.ti-ic.sm svg { width: 14px; height: 14px; }
.tr-actions { display: flex; gap: 8px; margin-top: 4px; }
.atb-actions { display: flex; align-items: center; gap: 9px; }
.add-rec.sm { height: 34px; padding: 0 14px; font-size: 12.5px; }

/* image icon (custom trash) */
.ti-ic.img { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }

/* icon picker */
.iconpick { display: flex; flex-direction: column; gap: 7px; }
.ip-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); }
.ip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-btn {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  color: var(--text-dim); border: 1px solid var(--panel-border); background: rgba(6,6,14,0.5);
  transition: color .13s, border-color .13s, background .13s, transform .1s;
}
.ip-btn svg { width: 18px; height: 18px; }
.ip-btn:hover { color: var(--cyan); border-color: rgba(22,224,255,0.4); background: rgba(22,224,255,0.06); transform: translateY(-1px); }
.ip-btn.sel { color: #06060e; background: linear-gradient(135deg, var(--cyan), var(--purple)); border-color: transparent; box-shadow: 0 0 16px -6px rgba(22,224,255,0.7); }
.ip-btn.upload.sel { background: none; box-shadow: none; padding: 2px; }
.ip-img { width: 100%; height: 100%; border-radius: 7px; background-size: cover; background-position: center; }

/* ============================================================
   IN-WINDOW TABS (žebříček kategorie ap.)
   ============================================================ */
.win-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 6px; }
.wtab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px; border-radius: 10px;
  font-family: var(--font-ui); font-weight: 600; font-size: 13px; letter-spacing: .01em;
  color: var(--text-dim); border: 1px solid var(--panel-border); background: rgba(255,255,255,0.03);
  transition: color .14s, border-color .14s, background .14s, transform .1s;
}
.wtab svg { width: 15px; height: 15px; }
.wtab:hover { color: var(--text); background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.wtab.active {
  color: #06060e; border-color: transparent;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  box-shadow: 0 0 18px -6px rgba(22,224,255,0.7);
}

/* ============================================================
   START MENU SEARCH
   ============================================================ */
.start-search { position: relative; margin: 4px 12px 10px; }
.start-search .ss-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-mute); pointer-events: none; }
.ss-input {
  width: 100%; height: 38px; border-radius: 10px; padding: 0 34px;
  background: rgba(6,6,14,0.6); border: 1px solid var(--panel-border);
  color: var(--text); font-family: var(--font-ui); font-size: 13.5px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ss-input::placeholder { color: var(--text-mute); }
.ss-input:focus { border-color: rgba(22,224,255,0.45); box-shadow: 0 0 0 1px rgba(22,224,255,0.25); }
.ss-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--text-mute); }
.ss-clear svg { width: 13px; height: 13px; }
.ss-clear:hover { color: var(--magenta); background: rgba(255,33,192,0.1); }
.start-empty { padding: 18px 12px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); }

/* ============================================================
   ADMIN: links / data / leaderboard editor
   ============================================================ */
.rec-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rec-del.static { position: static; transform: none; flex: 0 0 auto; }
.f-input.num { width: 90px; flex: 0 0 auto; text-align: right; }

.links-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.link-row { display: flex; align-items: center; gap: 13px; }
.link-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; color: var(--cyan);
  background: linear-gradient(150deg, rgba(123,63,242,0.32), rgba(15,16,32,0.9)); border: 1px solid var(--panel-border); }
.link-ic svg { width: 19px; height: 19px; }
.link-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.link-label { font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; color: var(--text-dim); }
.link-ok { color: #2dffb0; font-size: 14px; }
.link-off { color: var(--text-mute); font-size: 14px; }

.data-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.import-btn { cursor: pointer; }
.data-note { font-family: var(--font-ui); font-size: 12.5px; color: var(--text-mute); line-height: 1.5; }

.lb-edit-cat { margin-bottom: 20px; }
.lb-edit-head { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--cyan); margin-bottom: 9px; }
.lb-edit-rows { display: flex; flex-direction: column; gap: 7px; margin-bottom: 9px; }
.lb-edit-row { display: flex; align-items: center; gap: 8px; }
.lb-edit-row .f-input:first-child { flex: 1 1 auto; }

/* ============================================================
   MOBILNÍ VERZE — home screen telefonu
   ============================================================ */
@media (max-width: 640px) {
  /* brandová hlavička nahoře (z hero widgetu) */
  .hero-widget {
    position: absolute; left: 0; right: 0; top: 0; bottom: auto;
    transform: none; width: auto; max-width: none;
    padding: 26px 18px 16px;
    display: flex; flex-direction: column; align-items: center;
    border-bottom: 1px solid var(--panel-border);
    background: linear-gradient(180deg, rgba(8,9,20,0.5), transparent);
  }
  .hero-widget.dim { opacity: 0; pointer-events: none; }
  .hero-logo { width: 62px; height: 62px; }
  .hero-kicker { margin-top: 9px; font-size: 9.5px; letter-spacing: .22em; }
  .hero-title { font-size: 44px; margin: 2px 0 0; }
  .hero-sub, .hero-hint, .hero-cta { display: none; }

  /* ikony jako vycentrovaná app-mřížka */
  .desktop-icons {
    position: absolute; left: 14px; right: 14px;
    top: 190px; bottom: 84px;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 18px 6px; align-content: start;
    overflow-y: auto; padding: 6px 2px 12px;
  }
  .dicon { width: auto; padding: 10px 4px 8px; }
  .dicon .glyph { width: 60px; height: 60px; border-radius: 16px; }
  .dicon .glyph svg { width: 30px; height: 30px; }
  .dicon .label { font-size: 12px; }
  .dicon:active { background: rgba(var(--accent-rgb), 0.12); transform: scale(.96); }
  .dicon-badge { top: -4px; right: 10px; }

  /* okna na celou plochu */
  .window:not(.maximized) {
    left: 0 !important; top: 0 !important;
    width: 100% !important;
    height: calc(100% - 64px) !important;
    border-radius: 0 !important;
    border-left: none !important; border-right: none !important; border-top: none !important;
  }
  .win-titlebar { padding-top: max(8px, env(safe-area-inset-top)); }
  .win-resize { display: none; }
  .win-pad { padding: 22px 18px 26px; }

  /* spodní dock */
  .taskbar {
    left: 8px; right: 8px; bottom: 8px; height: 52px;
    gap: 6px; padding: 0 8px; border-radius: 16px;
  }
  .start-btn { padding: 0 9px; height: 38px; }
  .start-btn img { width: 28px; height: 28px; }
  .start-btn .start-name { display: none; }
  .tb-divider:first-of-type { display: none; }
  .tb-apps { gap: 6px; }
  .tb-app { height: 38px; min-width: 38px; padding: 0 9px; }
  .tb-app svg { width: 19px; height: 19px; }
  .tb-app .tb-label { display: none; }
  .tb-empty { display: none; }
  .tb-tray { display: none; }
  .tb-clock { min-width: auto; padding: 0 8px 0 4px; }
  .tb-clock .date { display: none; }
  .tb-clock .time { font-size: 13px; }

  /* start menu jako bottom sheet */
  .start-menu {
    left: 8px; right: 8px; width: auto; bottom: 66px;
    max-height: 72vh; border-radius: 18px;
  }
  .start-apps { grid-template-columns: 1fr; }

  /* obsah oken */
  .win-h1 { font-size: clamp(28px, 8vw, 40px); }
  .server-grid, .team-grid, .tier-grid { grid-template-columns: 1fr; }
  .tm-cards { grid-template-columns: 1fr; }
  .win-tabs { gap: 6px; }
  .wtab { height: 34px; padding: 0 12px; font-size: 12.5px; }

  /* admin / nastavení */
  .admin-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .admin-tabs { gap: 4px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .atab { height: 32px; padding: 0 11px; font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
  .admin-body { padding: 18px 16px 24px; }
  .rec { grid-template-columns: 1fr; }
  .rec .dz { max-width: 200px; }
  .dz-grid, .dz-grid.wide, .slot-grid { grid-template-columns: 1fr 1fr; }
  .set-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ctx-menu { width: min(230px, calc(100vw - 24px)); }

  /* snake na výšku */
  .snake-board { max-width: min(86vw, 420px); }
  .snake-pad { grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(2, 58px); }
}

/* mezistupeň pro malé tablety / landscape telefon */
@media (min-width: 641px) and (max-width: 820px) {
  .desktop-icons { grid-template-columns: repeat(2, 88px); }
  .hero-title { font-size: clamp(44px, 11vw, 72px); }
  .server-grid, .team-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SNAKE
   ============================================================ */
.snake { padding: 14px; gap: 12px; align-items: center; }
.snake-hud {
  flex: 0 0 auto; width: 100%; max-width: 460px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); letter-spacing: .04em;
}
.snake-hud b { color: var(--cyan); font-size: 17px; margin-left: 4px; }
.snake-hud .sh-best b { color: var(--magenta); }
.snake-board {
  position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1;
  display: grid; gap: 2px; padding: 8px;
  background: rgba(6,6,14,0.55); border: 1px solid var(--panel-border); border-radius: 14px;
  box-shadow: inset 0 0 40px -16px rgba(22,224,255,0.6);
}
.sk-cell { border-radius: 3px; background: rgba(255,255,255,0.025); }
.sk-cell.body { background: var(--cyan); opacity: .82; box-shadow: 0 0 7px -1px rgba(22,224,255,0.6); }
.sk-cell.head { background: #eaffff; box-shadow: 0 0 12px 0 var(--cyan); }
.sk-cell.food { background: var(--magenta); box-shadow: 0 0 12px 0 var(--magenta); animation: foodpulse 1s ease-in-out infinite; }
@keyframes foodpulse { 50% { transform: scale(0.78); } }

.snake-overlay {
  position: absolute; inset: 0; z-index: 2; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 28px;
  background: rgba(8,9,20,0.86); backdrop-filter: blur(6px);
}
.snake-overlay h3 { font-family: var(--font-serif); font-size: 27px; }
.snake-overlay .copy { max-width: 34ch; font-size: 13.5px; }
.so-ic { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; color: var(--cyan);
  background: linear-gradient(150deg, rgba(123,63,242,0.4), rgba(15,16,32,0.9)); border: 1px solid var(--panel-border); box-shadow: 0 0 22px -8px rgba(22,224,255,0.7); }
.so-ic svg { width: 28px; height: 28px; }

.snake-pad {
  flex: 0 0 auto; display: grid; gap: 7px;
  grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(2, 50px);
  grid-template-areas: ". up ." "left down right";
}
.sk-btn {
  border-radius: 12px; display: grid; place-items: center;
  color: var(--cyan); border: 1px solid var(--panel-border); background: rgba(255,255,255,0.04);
  transition: background .12s, transform .08s, box-shadow .14s;
}
.sk-btn:hover { background: rgba(22,224,255,0.1); }
.sk-btn:active { transform: scale(.92); box-shadow: 0 0 16px -4px rgba(22,224,255,0.7); }
.sk-btn svg { width: 22px; height: 22px; }
.sk-btn.up { grid-area: up; } .sk-btn.down { grid-area: down; }
.sk-btn.left { grid-area: left; } .sk-btn.right { grid-area: right; }
/* ---- Welcome / nápověda ---- */
.wlc .wlc-tips { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.wlc .wlc-tip { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: var(--glass); border-radius: 6px; border: 1px solid var(--border); }
.wlc .wlc-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.wlc .wlc-icon svg { width: 18px; height: 18px; }
.wlc .wlc-text { display: flex; flex-direction: column; gap: 2px; }
.wlc .wlc-text strong { font-size: 13px; color: var(--fg); }
.wlc .wlc-text span { font-size: 11px; color: var(--fg-muted); }
/* ---- Donate buttons ---- */
.donate-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.donate-btn { width: 100%; justify-content: center; font-size: 15px; padding: 13px 20px; }
.btn-violet { background: linear-gradient(135deg, var(--purple), #7b2fc7); color: #fff; border: none; }
.btn-violet:hover { filter: brightness(1.15); }
/* ---- Donate tier additions ---- */
.tier-desc { font-size: 13px; color: var(--text-dim); margin: 0 0 18px; flex: 1; line-height: 1.6; }
.tier.magenta.best { border-color: rgba(255,0,200,.45); box-shadow: 0 0 34px -12px rgba(255,0,200,.5); }
.tier.violet.best  { border-color: rgba(140,80,255,.45); box-shadow: 0 0 34px -12px rgba(140,80,255,.5); }
.f-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-muted); cursor: pointer; user-select: none; }
/* ---- BSOD Easter Egg ---- */
.bsod {
  position: fixed; inset: 0; z-index: 99999;
  background: #0050a0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: bsod-in .15s ease;
}
@keyframes bsod-in { from { opacity: 0; } to { opacity: 1; } }
.bsod-inner {
  max-width: 640px; width: 90%;
  color: #fff; font-family: var(--font-mono);
}
.bsod-face {
  font-size: 100px; line-height: 1; margin-bottom: 32px;
  font-family: var(--font-ui);
}
.bsod-msg {
  font-size: 20px; line-height: 1.7; margin-bottom: 40px;
}
.bsod-pct {
  font-size: 28px; font-weight: 700; margin-bottom: 48px;
}
.bsod-pct-num {
  font-size: 42px;
}
.bsod-detail {
  border-left: 4px solid rgba(255,255,255,.3);
  padding-left: 20px; font-size: 14px; line-height: 1.8; opacity: .85;
}
/* ---- User chip (taskbar) ---- */
.user-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 0 10px 0 6px; height: 32px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: var(--fg); font-size: 12px; font-family: var(--font-ui);
  cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.user-chip:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.user-chip.loading { opacity: .4; pointer-events: none; border-style: dashed; }
.user-chip.is-admin { border-color: rgba(0,230,180,.35); }
.user-chip.is-admin:hover { border-color: rgba(0,230,180,.6); }
.chip-avatar {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  background: var(--panel-bg); flex-shrink: 0;
}
.chip-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--neon-c); color: #000; font-weight: 700; font-size: 11px;
}
.chip-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.chip-badge {
  font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: rgba(0,230,180,.18); color: var(--neon-c);
  font-weight: 600; letter-spacing: .04em;
}
.chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.2); animation: pulse 1.4s infinite;
}