/* =============================================================================
   lobby_style_themes.css — Decorative Style Themes for Project Seon
   Подключается ПОСЛЕ lobby.css. Темы активируются через:
     body[data-style-theme="runic"]
     body[data-style-theme="forest"]
     body[data-style-theme="gothic"]
     body[data-style-theme="arcane-sanctum"]
     body[data-style-theme="eldritch"]
     body[data-style-theme="celestial"]

   JS для переключения: document.body.dataset.styleTheme = 'runic'
   Сохранить: localStorage.setItem('styleTheme', 'runic')
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=IM+Fell+English:ital@0;1&family=Uncial+Antiqua&family=MedievalSharp&display=swap');


/* Style theme picker widget */
.style-theme-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.style-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
#style-panel {
  max-height: 80vh;
  overflow-y: auto;
}

.style-theme-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  font-family: 'Cinzel', serif;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.5px;
  min-width: 58px;
  position: relative;
  overflow: hidden;
}

.style-theme-chip:hover { transform: translateY(-1px); }

.style-theme-chip.active .style-chip-icon { transform: scale(1.15); }

.style-chip-icon {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.25s ease;
}

/* --- Sanctum (default) — двойная рамка, золотые засечки, классика --- */
.style-theme-chip[data-style-theme=""] {
  border: 2px double rgba(212,160,23,0.2);
}
.style-theme-chip[data-style-theme=""]:hover {
  border-color: rgba(212,160,23,0.4);
  color: #ffd700;
  background: linear-gradient(180deg, rgba(212,160,23,0.06) 0%, transparent 100%);
}
.style-theme-chip[data-style-theme=""].active {
  border-color: rgba(212,160,23,0.6);
  color: #ffd700;
  background: linear-gradient(180deg, rgba(212,160,23,0.1) 0%, rgba(212,160,23,0.03) 100%);
  box-shadow: inset 0 0 16px rgba(212,160,23,0.06), 0 0 8px rgba(212,160,23,0.15);
}

/* --- Runic — угловатые вырезы, ridge-бордер, каменная геометрия --- */
.style-theme-chip[data-style-theme="runic"] {
  border: 2px ridge rgba(95,184,160,0.25);
  border-radius: 2px;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.style-theme-chip[data-style-theme="runic"]:hover {
  border-color: rgba(95,184,160,0.5);
  color: #7fd4bc;
  background: linear-gradient(135deg, rgba(95,184,160,0.08) 0%, transparent 50%, rgba(95,184,160,0.04) 100%);
}
.style-theme-chip[data-style-theme="runic"].active {
  border-color: rgba(95,184,160,0.7);
  color: #7fd4bc;
  background: linear-gradient(135deg, rgba(95,184,160,0.12) 0%, transparent 50%, rgba(95,184,160,0.06) 100%);
  box-shadow: inset 0 0 12px rgba(95,184,160,0.08);
}

/* --- Forest — органичная форма, мягкие скругления, плавные грани --- */
.style-theme-chip[data-style-theme="forest"] {
  border-radius: 14px 6px 14px 6px;
  border: 1px solid rgba(68,170,100,0.2);
}
.style-theme-chip[data-style-theme="forest"]:hover {
  border-color: rgba(68,170,100,0.4);
  color: #6dcea0;
  background: radial-gradient(ellipse at 30% 80%, rgba(68,170,100,0.1) 0%, transparent 70%);
}
.style-theme-chip[data-style-theme="forest"].active {
  border-color: rgba(68,170,100,0.6);
  color: #6dcea0;
  background: radial-gradient(ellipse at 30% 80%, rgba(68,170,100,0.14) 0%, transparent 70%);
  box-shadow: 0 0 10px rgba(68,170,100,0.12), inset 0 -4px 10px rgba(68,170,100,0.06);
}

/* --- Gothic — стрельчатая арка, крестообразный орнамент, острые грани --- */
.style-theme-chip[data-style-theme="gothic"] {
  border-radius: 2px 2px 8px 8px;
  border: 1px solid rgba(120,100,150,0.25);
  border-top: 2px solid rgba(120,100,150,0.3);
}
.style-theme-chip[data-style-theme="gothic"]::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(120,100,150,0.4), rgba(120,100,150,0));
}
.style-theme-chip[data-style-theme="gothic"]:hover {
  border-color: rgba(120,100,150,0.5);
  color: #a9a;
  background: linear-gradient(180deg, rgba(120,100,150,0.08) 0%, transparent 60%);
}
.style-theme-chip[data-style-theme="gothic"].active {
  border-color: rgba(120,100,150,0.6);
  color: #a9a;
  background: linear-gradient(180deg, rgba(120,100,150,0.12) 0%, transparent 60%);
  box-shadow: inset 0 2px 10px rgba(120,100,150,0.1), 0 0 8px rgba(120,100,150,0.12);
}
.style-theme-chip[data-style-theme="gothic"].active::after {
  background: linear-gradient(90deg, transparent, rgba(120,100,150,0.7), rgba(120,100,150,0));
}

/* --- Arcane Sanctum — магический круг, бирюзовое сияние, сфера --- */
.style-theme-chip[data-style-theme="arcane-sanctum"] {
  border-radius: 50% / 40%;
  border: 1px solid rgba(45,212,191,0.2);
}
.style-theme-chip[data-style-theme="arcane-sanctum"]::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px dashed rgba(45,212,191,0.15);
  pointer-events: none;
  transition: border-color 0.25s;
}
.style-theme-chip[data-style-theme="arcane-sanctum"]:hover {
  border-color: rgba(45,212,191,0.4);
  color: #5ee8d0;
  background: radial-gradient(circle at 50% 50%, rgba(45,212,191,0.1) 0%, transparent 70%);
}
.style-theme-chip[data-style-theme="arcane-sanctum"]:hover::after { border-color: rgba(45,212,191,0.25); }
.style-theme-chip[data-style-theme="arcane-sanctum"].active {
  border-color: rgba(45,212,191,0.5);
  color: #5ee8d0;
  background: radial-gradient(circle at 50% 50%, rgba(45,212,191,0.15) 0%, transparent 70%);
  box-shadow: 0 0 14px rgba(45,212,191,0.15), inset 0 0 14px rgba(45,212,191,0.06);
}
.style-theme-chip[data-style-theme="arcane-sanctum"].active::after { border-color: rgba(45,212,191,0.35); }

/* --- Eldritch (Бездна / HK Abyss) — void-чёрный, минимальный --- */
.style-theme-chip[data-style-theme="eldritch"] {
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  font-family: 'Cormorant Garamond', serif;
}
.style-theme-chip[data-style-theme="eldritch"]:hover {
  border-color: rgba(255,255,255,0.15);
  color: #a0a0a8;
  background: rgba(255,255,255,0.03);
}
.style-theme-chip[data-style-theme="eldritch"].active {
  border-color: rgba(255,255,255,0.12);
  color: #a0a0a8;
  background: rgba(255,255,255,0.04);
  box-shadow: none;
}

/* --- Celestial — мягкое сияние, облачная форма, лунная подсветка --- */
.style-theme-chip[data-style-theme="celestial"] {
  border-radius: 16px;
  border: 1px solid rgba(96,165,250,0.15);
}
.style-theme-chip[data-style-theme="celestial"]::after {
  content: '';
  position: absolute;
  top: 4px; right: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(96,165,250,0.3);
  box-shadow: -8px 6px 0 1px rgba(96,165,250,0.15), -16px 2px 0 0 rgba(96,165,250,0.1);
  transition: opacity 0.25s;
  opacity: 0.5;
}
.style-theme-chip[data-style-theme="celestial"]:hover {
  border-color: rgba(96,165,250,0.35);
  color: #93c5fd;
  background: radial-gradient(ellipse at 50% 20%, rgba(96,165,250,0.1) 0%, transparent 70%);
}
.style-theme-chip[data-style-theme="celestial"]:hover::after { opacity: 1; }
.style-theme-chip[data-style-theme="celestial"].active {
  border-color: rgba(96,165,250,0.45);
  color: #93c5fd;
  background: radial-gradient(ellipse at 50% 20%, rgba(96,165,250,0.14) 0%, transparent 70%);
  box-shadow: 0 0 16px rgba(96,165,250,0.12), 0 0 4px rgba(96,165,250,0.2);
}
.style-theme-chip[data-style-theme="celestial"].active::after { opacity: 1; background: rgba(96,165,250,0.5); }


/* ===========================================================================
   THEME: RUNIC — ᚱᚢᚾᛁᚲ
   Нордическая мифология. Грубый камень, потрескавшийся гранит, тёплые тона
   старой кости и ржавчины. Толстые каменные бордеры, текстура камня.
   Шрифт: MedievalSharp (рукописный средневековый). Цвет: охра, бронза, кость.
   =========================================================================== */

body[data-style-theme="runic"] {
  --lobby-gold: #c8a060;
  --lobby-secondary: #a08050;
  --lobby-gold-dim: rgba(180,140,70,0.4);
  --lobby-radius: 3px;
  --lobby-radius-lg: 4px;
  background: #0c0a08;
}

body[data-style-theme="runic"] .lobby-app {
  background: #0c0a08;
  font-family: 'MedievalSharp', 'Philosopher', sans-serif;
}

/* Warm firelight atmosphere */
body[data-style-theme="runic"] .lobby-app::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(180,120,40,0.08), rgba(180,120,40,0) 65%),
    radial-gradient(ellipse 50% 70% at 0% 100%, rgba(40,25,10,0.6), rgba(40,25,10,0)),
    radial-gradient(ellipse 50% 70% at 100% 100%, rgba(30,20,10,0.5), rgba(30,20,10,0));
}

/* Stone grain texture */
body[data-style-theme="runic"] .lobby-app::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.06;
  background-size: 400px 400px;
}

/* Header: heavy stone lintel */
body[data-style-theme="runic"] .lobby-header {
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 80%, transparent);
  border-bottom: 3px solid rgba(180,140,70,0.35);
}

body[data-style-theme="runic"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(180,140,70,0.4) 30%,
    rgba(200,160,80,0.6) 50%,
    rgba(180,140,70,0.4) 70%,
    transparent 95%);
  height: 1px;
}

/* Logo: Norse inscription */
body[data-style-theme="runic"] .lobby-logo {
  font-family: 'Uncial Antiqua', 'MedievalSharp', serif;
  letter-spacing: 6px;
  color: #d4b070;
  text-shadow:
    0 0 20px rgba(200,150,60,0.4),
    0 0 50px rgba(180,120,40,0.15),
    2px 2px 0 rgba(0,0,0,0.9);
  text-transform: uppercase;
}

body[data-style-theme="runic"] .lobby-logo::after {
  content: 'ᚠ ᚢ ᚦ ᚨ ᚱ ᚲ ᚷ ᚹ';
  font-size: 11px;
  letter-spacing: 6px;
  color: rgba(200,160,80,0.45);
  text-shadow: none;
  font-family: 'Segoe UI Symbol', sans-serif;
}

/* ── CARDS: Rough stone slabs, thick borders, warm tones ── */
body[data-style-theme="runic"] .lobby-card {
  background:
    linear-gradient(170deg, rgba(60,40,20,0.25) 0%, rgba(30,20,10,0.15) 50%, rgba(10,8,5,0.35) 100%);
  border: 2px solid rgba(180,140,70,0.3);
  border-radius: 3px;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(200,160,80,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* Warm bronze accent bar */
body[data-style-theme="runic"] .lobby-card::before {
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(180,140,70,0.1) 0%,
    rgba(200,160,80,0.5) 20%,
    rgba(220,180,90,0.7) 50%,
    rgba(200,160,80,0.5) 80%,
    rgba(180,140,70,0.1) 100%);
}

body[data-style-theme="runic"] .lobby-card:hover {
  border-color: rgba(200,160,80,0.5);
  background:
    linear-gradient(170deg, rgba(60,40,20,0.3) 0%, rgba(30,20,10,0.2) 50%, rgba(10,8,5,0.4) 100%);
  box-shadow:
    0 8px 30px rgba(0,0,0,0.6),
    0 0 15px rgba(180,120,40,0.08),
    inset 0 1px 0 rgba(200,160,80,0.15);
}

/* Large rune watermark */
body[data-style-theme="runic"] .lobby-card::after {
  content: 'ᚱ';
  position: absolute;
  bottom: 6px;
  right: 14px;
  font-size: 28px;
  color: rgba(200,160,80,0.1);
  pointer-events: none;
  font-family: 'Segoe UI Symbol', sans-serif;
}

body[data-style-theme="runic"] .lobby-card-name {
  font-family: 'Uncial Antiqua', 'MedievalSharp', serif;
  color: #d4b878;
  text-shadow: 0 0 12px rgba(200,160,80,0.25);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 15px;
}

body[data-style-theme="runic"] .lobby-card-meta,
body[data-style-theme="runic"] .lobby-card-desc,
body[data-style-theme="runic"] .lobby-card-char {
  font-family: 'MedievalSharp', 'Philosopher', sans-serif;
}

/* Tabs: stone notches */
body[data-style-theme="runic"] .lobby-tab {
  font-family: 'MedievalSharp', 'Philosopher', sans-serif;
  border-radius: 2px 2px 0 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
}

body[data-style-theme="runic"] .lobby-tab.active {
  border-bottom: 3px solid #c8a060;
  color: #d4b070;
  text-shadow: 0 0 12px rgba(200,160,80,0.4);
  background: linear-gradient(180deg, rgba(180,140,70,0.08), rgba(180,140,70,0));
}

body[data-style-theme="runic"] .lobby-tab.active::after {
  background: rgba(180,140,70,0.25);
}

body[data-style-theme="runic"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(180,140,70,0.12), rgba(180,140,70,0));
}

/* Buttons: heavy stone, beveled */
body[data-style-theme="runic"] .lobby-btn {
  font-family: 'MedievalSharp', 'Philosopher', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
}

body[data-style-theme="runic"] .lobby-btn.primary {
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(180,140,70,0.25) 0%, rgba(140,100,40,0.12) 100%);
  border: 2px solid rgba(200,160,80,0.5);
  color: #e0d0a0;
  box-shadow:
    inset 0 1px 0 rgba(220,180,90,0.25),
    inset 0 -2px 0 rgba(0,0,0,0.3),
    0 2px 4px rgba(0,0,0,0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

body[data-style-theme="runic"] .lobby-btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(200,160,80,0.35) 0%, rgba(160,120,50,0.18) 100%);
  border-color: rgba(220,180,90,0.7);
  box-shadow:
    inset 0 1px 0 rgba(220,180,90,0.35),
    inset 0 -2px 0 rgba(0,0,0,0.3),
    0 0 12px rgba(180,140,70,0.15),
    0 4px 8px rgba(0,0,0,0.4);
  filter: none;
  transform: translateY(-1px);
}

body[data-style-theme="runic"] .lobby-btn.secondary {
  border: 2px solid rgba(180,140,70,0.3);
  border-radius: 3px;
  color: #c8a060;
  background: rgba(180,140,70,0.05);
}

body[data-style-theme="runic"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(200,160,80,0.5);
  background: rgba(180,140,70,0.1);
  box-shadow: 0 0 10px rgba(180,140,70,0.1);
}

/* Inputs */
body[data-style-theme="runic"] .lobby-input,
body[data-style-theme="runic"] .lobby-textarea,
body[data-style-theme="runic"] .lobby-select {
  font-family: 'MedievalSharp', 'Philosopher', sans-serif;
  border: 2px solid rgba(180,140,70,0.2);
  border-radius: 3px;
  background: rgba(60,40,20,0.12);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

body[data-style-theme="runic"] .lobby-input:focus,
body[data-style-theme="runic"] .lobby-textarea:focus {
  border-color: rgba(200,160,80,0.5);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 8px rgba(180,140,70,0.12);
}

body[data-style-theme="runic"] .lobby-card-badge {
  border-radius: 3px;
  letter-spacing: 2px;
  font-family: 'MedievalSharp', sans-serif;
  text-transform: uppercase;
  border-width: 2px;
}

/* Rune glyphs */
body[data-style-theme="runic"] .lobby-panel::after {
  content: '⋯ ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛞᛟ ⋯';
  display: block;
  text-align: center;
  font-size: 12px;
  color: rgba(200,160,80,0.2);
  letter-spacing: 4px;
  padding: 24px 0 10px;
  pointer-events: none;
}

body[data-style-theme="runic"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(180,140,70,0.3);
  border-radius: 2px;
}

body[data-style-theme="runic"] .lobby-panel label,
body[data-style-theme="runic"] .lobby-panel h3 {
  font-family: 'MedievalSharp', 'Philosopher', sans-serif;
  letter-spacing: 1px;
}


/* ===========================================================================
   THEME: FOREST — Лесная / Друидская
   Живой лес, переплетённые ветви, кора и мох. Органические формы,
   асимметричные скругления, видимые зелёные текстуры, толстые левые бордеры.
   =========================================================================== */

body[data-style-theme="forest"] {
  background: #070f07;
  --lobby-gold: #8cc850;
  --lobby-secondary: #5a9;
  --lobby-gold-dim: rgba(68,170,100,0.4);
  --lobby-radius: 8px;
  --lobby-radius-lg: 14px 6px 14px 6px;
}

body[data-style-theme="forest"] .lobby-app {
  background: #070f07;
  font-family: 'IM Fell English', 'Philosopher', serif;
}

/* Deep forest atmospheric layers */
body[data-style-theme="forest"] .lobby-app::before {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(60,140,60,0.1), rgba(60,140,60,0) 65%),
    radial-gradient(ellipse 70% 50% at 0% 80%, rgba(20,60,30,0.6), rgba(20,60,30,0)),
    radial-gradient(ellipse 70% 50% at 100% 80%, rgba(10,40,20,0.5), rgba(10,40,20,0)),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(80,50,20,0.3), rgba(80,50,20,0));
}

/* Organic canopy texture — fractalNoise instead of turbulence to avoid pixel blocks */
body[data-style-theme="forest"] .lobby-app::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.05;
  background-size: 400px 400px;
}

/* Header: canopy border */
body[data-style-theme="forest"] .lobby-header {
  background: linear-gradient(180deg, rgba(5,25,8,0.7) 0%, rgba(5,20,8,0.3) 80%, transparent);
  border-bottom: 3px solid rgba(80,160,60,0.3);
}

body[data-style-theme="forest"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(60,160,80,0.4) 30%,
    rgba(120,200,60,0.6) 50%,
    rgba(60,160,80,0.4) 70%,
    transparent);
}

/* Logo: ancient druidic inscription */
body[data-style-theme="forest"] .lobby-logo {
  font-family: 'IM Fell English', 'Philosopher', serif;
  color: #a8d878;
  letter-spacing: 5px;
  text-shadow:
    0 0 25px rgba(80,160,60,0.5),
    0 0 60px rgba(80,160,60,0.2),
    0 2px 4px rgba(0,0,0,0.8);
}

body[data-style-theme="forest"] .lobby-logo::after {
  content: '⸙ ❧ ⸙';
  font-size: 12px;
  letter-spacing: 10px;
  color: rgba(80,160,60,0.5);
}

body[data-style-theme="forest"] .lobby-logo::before {
  content: '❧';
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  opacity: 0.5;
  animation: forestLeafSway 6s ease-in-out infinite;
}

@keyframes forestLeafSway {
  0%, 100% { transform: translateY(-50%) rotate(-5deg); opacity: 0.4; }
  50% { transform: translateY(-55%) rotate(5deg); opacity: 0.6; }
}

/* ── CARDS: Bark-textured panels with thick vine borders ── */
body[data-style-theme="forest"] .lobby-card {
  background:
    linear-gradient(160deg,
      rgba(40,100,30,0.15) 0%,
      rgba(20,50,15,0.1) 50%,
      rgba(10,25,8,0.3) 100%);
  border: 1px solid rgba(60,140,60,0.2);
  border-left: 4px solid rgba(80,180,60,0.5);
  border-radius: 14px 6px 14px 6px;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(80,160,60,0.12),
    inset 0 0 20px rgba(40,100,30,0.06);
}

/* Visible green vine accent on top */
body[data-style-theme="forest"] .lobby-card::before {
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 14px 6px 0 0;
  background: linear-gradient(90deg,
    rgba(80,180,60,0.6) 0%,
    rgba(120,200,60,0.5) 30%,
    rgba(80,160,60,0.3) 60%,
    transparent 100%);
}

body[data-style-theme="forest"] .lobby-card:hover {
  border-color: rgba(80,160,60,0.35);
  border-left-color: rgba(100,200,70,0.7);
  background:
    linear-gradient(160deg,
      rgba(40,100,30,0.2) 0%,
      rgba(20,50,15,0.12) 50%,
      rgba(10,25,8,0.35) 100%);
  box-shadow:
    0 8px 30px rgba(0,0,0,0.5),
    0 0 25px rgba(60,140,60,0.08),
    inset 0 1px 0 rgba(80,160,60,0.18);
}

/* Large leaf ornament */
body[data-style-theme="forest"] .lobby-card::after {
  content: '❧';
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-size: 24px;
  color: rgba(80,160,60,0.2);
  pointer-events: none;
}

body[data-style-theme="forest"] .lobby-card-name {
  font-family: 'IM Fell English', serif;
  color: #b8e888;
  text-shadow: 0 0 15px rgba(80,160,60,0.3);
  font-size: 17px;
  font-style: italic;
}

body[data-style-theme="forest"] .lobby-card-meta,
body[data-style-theme="forest"] .lobby-card-desc,
body[data-style-theme="forest"] .lobby-card-char {
  font-family: 'IM Fell English', serif;
}

/* Tabs: organic shapes */
body[data-style-theme="forest"] .lobby-tab {
  font-family: 'IM Fell English', 'Philosopher', serif;
  border-radius: 12px 4px 0 0;
  font-style: italic;
}

body[data-style-theme="forest"] .lobby-tab.active {
  border-bottom: 3px solid #90c850;
  color: #90c850;
  text-shadow: 0 0 15px rgba(80,160,60,0.4);
  background: linear-gradient(180deg, rgba(80,160,60,0.1), rgba(80,160,60,0));
}

body[data-style-theme="forest"] .lobby-tab.active::after {
  background: rgba(80,160,60,0.25);
}

body[data-style-theme="forest"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(80,160,60,0.12), rgba(80,160,60,0));
}

/* Buttons: bark-like, organic */
body[data-style-theme="forest"] .lobby-btn {
  font-family: 'IM Fell English', serif;
  font-style: italic;
}

body[data-style-theme="forest"] .lobby-btn.primary {
  background: linear-gradient(135deg, rgba(60,140,60,0.3) 0%, rgba(40,100,30,0.2) 100%);
  border: 2px solid rgba(80,180,60,0.5);
  color: #b0e070;
  border-radius: 12px 4px 12px 4px;
  box-shadow:
    inset 0 1px 0 rgba(120,200,60,0.15),
    0 2px 8px rgba(0,0,0,0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

body[data-style-theme="forest"] .lobby-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(80,160,60,0.4) 0%, rgba(60,130,40,0.25) 100%);
  border-color: rgba(100,200,70,0.7);
  box-shadow:
    0 0 18px rgba(80,160,60,0.2),
    inset 0 1px 0 rgba(120,200,60,0.2),
    0 4px 12px rgba(0,0,0,0.4);
  filter: none;
  transform: translateY(-1px);
}

body[data-style-theme="forest"] .lobby-btn.secondary {
  border: 2px solid rgba(60,140,60,0.3);
  border-radius: 12px 4px 12px 4px;
  color: #8cc850;
  background: rgba(60,140,60,0.05);
}

body[data-style-theme="forest"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(80,160,60,0.5);
  background: rgba(60,140,60,0.1);
}

/* Inputs */
body[data-style-theme="forest"] .lobby-input,
body[data-style-theme="forest"] .lobby-textarea,
body[data-style-theme="forest"] .lobby-select {
  font-family: 'IM Fell English', serif;
  border-radius: 10px 4px 10px 4px;
  border: 2px solid rgba(60,140,60,0.2);
  background: rgba(40,100,30,0.08);
}

body[data-style-theme="forest"] .lobby-input:focus,
body[data-style-theme="forest"] .lobby-textarea:focus {
  border-color: rgba(80,160,60,0.5);
  box-shadow: 0 0 12px rgba(80,160,60,0.15);
}

body[data-style-theme="forest"] .lobby-card-badge {
  border-radius: 12px;
  font-family: 'IM Fell English', serif;
  font-style: italic;
}

body[data-style-theme="forest"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(60,140,60,0.3);
  border-radius: 4px;
}

body[data-style-theme="forest"] .lobby-panel label,
body[data-style-theme="forest"] .lobby-panel h3 {
  font-family: 'IM Fell English', serif;
}


/* ===========================================================================
   THEME: GOTHIC — Готическая / Тёмное Средневековье
   Проклятый замок, тёмный камень, железо, тяжёлые тени. Никаких витражей —
   только мрак, холодный камень, двойные бордеры, кровь на стенах.
   Шрифт: Cinzel (готический засечный). Цвет: тёмно-багровый, пепел, кость.
   =========================================================================== */

body[data-style-theme="gothic"] {
  background: #13101a;
  --lobby-gold: #908098;
  --lobby-secondary: #706080;
  --lobby-gold-dim: rgba(100,80,115,0.4);
  --lobby-radius: 1px;
  --lobby-radius-lg: 2px;
}

body[data-style-theme="gothic"] .lobby-app {
  background: #13101a;
  font-family: 'Cinzel', 'Philosopher', serif;
}

/* Oppressive darkness — lightened */
body[data-style-theme="gothic"] .lobby-app::before {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(55,42,72,0.14), rgba(55,42,72,0) 60%),
    radial-gradient(ellipse 80% 80% at 0% 100%, rgba(0,0,0,0.5), rgba(0,0,0,0)),
    radial-gradient(ellipse 80% 80% at 100% 100%, rgba(0,0,0,0.5), rgba(0,0,0,0));
}

/* Heavy stone grain */
body[data-style-theme="gothic"] .lobby-app::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.06;
}

/* Header: iron lintel */
body[data-style-theme="gothic"] .lobby-header {
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 80%, transparent);
  border-bottom: 3px double rgba(90,75,110,0.5);
}

body[data-style-theme="gothic"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent 10%,
    rgba(85,70,105,0.4) 30%,
    rgba(100,85,120,0.5) 50%,
    rgba(85,70,105,0.4) 70%,
    transparent 90%);
  height: 1px;
}

/* Logo: blood-inscribed, flickering torchlight */
body[data-style-theme="gothic"] .lobby-logo {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  color: #b0a8b8;
  letter-spacing: 6px;
  text-shadow:
    0 0 15px rgba(100,85,120,0.5),
    0 0 40px rgba(85,70,105,0.2),
    0 2px 4px rgba(0,0,0,0.95),
    1px 1px 0 rgba(0,0,0,0.9);
  animation: gothicFlicker 8s ease-in-out infinite;
}

@keyframes gothicFlicker {
  0%, 100% { text-shadow: 0 0 15px rgba(100,85,120,0.5), 0 0 40px rgba(85,70,105,0.2), 0 2px 4px rgba(0,0,0,0.95); }
  25% { text-shadow: 0 0 20px rgba(115,95,135,0.6), 0 0 50px rgba(100,85,120,0.25), 0 2px 4px rgba(0,0,0,0.95); }
  50% { text-shadow: 0 0 10px rgba(85,70,105,0.35), 0 0 30px rgba(78,62,98,0.12), 0 2px 4px rgba(0,0,0,0.95); }
  75% { text-shadow: 0 0 18px rgba(110,92,130,0.55), 0 0 45px rgba(95,78,115,0.22), 0 2px 4px rgba(0,0,0,0.95); }
}

body[data-style-theme="gothic"] .lobby-logo::after {
  content: '† ⁕ †';
  font-size: 9px;
  letter-spacing: 12px;
  color: rgba(105,88,125,0.4);
}

/* ── CARDS: Dark iron-bound stone, double borders, heavy shadows ── */
body[data-style-theme="gothic"] .lobby-card {
  background:
    linear-gradient(175deg,
      rgba(38,28,52,0.2) 0%,
      rgba(16,12,28,0.15) 50%,
      rgba(0,0,0,0.4) 100%);
  border: 3px double rgba(80,65,100,0.45);
  border-radius: 1px;
  box-shadow:
    0 6px 25px rgba(0,0,0,0.7),
    0 12px 50px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(130,115,150,0.08);
}

/* Dark red accent bar */
body[data-style-theme="gothic"] .lobby-card::before {
  left: 0;
  right: 0;
  height: 2px;
  top: 0;
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(85,70,105,0.5) 25%,
    rgba(115,95,135,0.6) 50%,
    rgba(85,70,105,0.5) 75%,
    transparent 95%);
}

body[data-style-theme="gothic"] .lobby-card:hover {
  border-color: rgba(105,88,125,0.6);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.7),
    0 0 20px rgba(78,62,98,0.08),
    inset 0 1px 0 rgba(130,115,150,0.12);
}

/* Gothic cross watermark */
body[data-style-theme="gothic"] .lobby-card::after {
  content: '✝';
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-size: 22px;
  color: rgba(90,75,110,0.12);
  pointer-events: none;
}

body[data-style-theme="gothic"] .lobby-card-name {
  font-family: 'Cinzel', serif;
  color: #b8b0c0;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(100,85,120,0.2);
  text-transform: uppercase;
  font-size: 13px;
}

body[data-style-theme="gothic"] .lobby-card-meta,
body[data-style-theme="gothic"] .lobby-card-desc,
body[data-style-theme="gothic"] .lobby-card-char {
  font-family: 'Cinzel', serif;
  font-size: 12px;
}

/* Tabs */
body[data-style-theme="gothic"] .lobby-tab {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  border-radius: 0;
}

body[data-style-theme="gothic"] .lobby-tab.active {
  border-bottom: 3px solid rgba(105,88,125,0.7);
  color: #b0a8b8;
  text-shadow: 0 0 12px rgba(100,85,120,0.4);
  background: linear-gradient(180deg, rgba(60,48,78,0.08), rgba(60,48,78,0));
}

body[data-style-theme="gothic"] .lobby-tab.active::after {
  background: rgba(90,70,120,0.25);
}

body[data-style-theme="gothic"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(80,65,100,0.1), rgba(80,65,100,0));
}

/* Buttons: iron, heavy, dark */
body[data-style-theme="gothic"] .lobby-btn {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
}

body[data-style-theme="gothic"] .lobby-btn.primary {
  background: linear-gradient(180deg, rgba(60,48,78,0.3) 0%, rgba(30,22,45,0.25) 100%);
  border: 3px double rgba(90,75,110,0.5);
  color: #b8b0b8;
  border-radius: 1px;
  box-shadow:
    inset 0 1px 0 rgba(130,115,150,0.1),
    0 3px 8px rgba(0,0,0,0.6);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

body[data-style-theme="gothic"] .lobby-btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(80,60,110,0.4) 0%, rgba(45,35,62,0.3) 100%);
  border-color: rgba(115,95,135,0.7);
  box-shadow:
    0 0 15px rgba(78,62,98,0.15),
    inset 0 1px 0 rgba(130,115,150,0.15),
    0 4px 12px rgba(0,0,0,0.6);
  filter: none;
  transform: translateY(-1px);
}

body[data-style-theme="gothic"] .lobby-btn.secondary {
  border: 3px double rgba(80,65,100,0.35);
  border-radius: 1px;
  color: #908098;
  background: rgba(60,48,78,0.05);
}

body[data-style-theme="gothic"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(105,88,125,0.5);
  background: rgba(60,48,78,0.1);
}

/* Inputs */
body[data-style-theme="gothic"] .lobby-input,
body[data-style-theme="gothic"] .lobby-textarea,
body[data-style-theme="gothic"] .lobby-select {
  font-family: 'Cinzel', serif;
  border: 2px solid rgba(80,65,100,0.3);
  border-radius: 1px;
  background: rgba(50,10,18,0.1);
  font-size: 12px;
}

body[data-style-theme="gothic"] .lobby-input:focus,
body[data-style-theme="gothic"] .lobby-textarea:focus {
  border-color: rgba(105,88,125,0.5);
  box-shadow: 0 0 8px rgba(80,65,100,0.1);
}

body[data-style-theme="gothic"] .lobby-card-badge {
  border-radius: 1px;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 9px;
  border-width: 2px;
}

body[data-style-theme="gothic"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(90,70,120,0.35);
}

body[data-style-theme="gothic"] .lobby-panel label,
body[data-style-theme="gothic"] .lobby-panel h3 {
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}


/* ===========================================================================
   THEME: ARCANE SANCTUM — Арканный Санктум
   Магическая башня, кристаллы, светящиеся руны. Всё окутано бирюзовым
   магическим сиянием. Пунктирные внутренние рамки, светящиеся бордеры.
   =========================================================================== */

body[data-style-theme="arcane-sanctum"] {
  background: #040e0c;
  --lobby-gold: #80d4c4;
  --lobby-secondary: #2dd4bf;
  --lobby-gold-dim: rgba(45,212,191,0.4);
  --lobby-radius: 8px;
  --lobby-radius-lg: 10px;
}

body[data-style-theme="arcane-sanctum"] .lobby-app {
  background: #040e0c;
  font-family: 'Philosopher', sans-serif;
}

/* Magical ether layers */
body[data-style-theme="arcane-sanctum"] .lobby-app::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(20,160,140,0.14), rgba(20,160,140,0) 65%),
    radial-gradient(ellipse 40% 60% at 10% 50%, rgba(20,130,120,0.08), rgba(20,130,120,0)),
    radial-gradient(ellipse 40% 60% at 90% 50%, rgba(20,170,140,0.08), rgba(20,170,140,0)),
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(5,30,25,0.5), rgba(5,30,25,0));
}

/* Star field */
body[data-style-theme="arcane-sanctum"] .lobby-app::after {
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(130,240,220,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 15%, rgba(130,240,220,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 65%, rgba(110,230,210,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 55%, rgba(130,240,220,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 80%, rgba(110,230,210,0.25) 0%, transparent 100%);
  opacity: 0.6;
}

body[data-style-theme="arcane-sanctum"] .lobby-header {
  background: linear-gradient(180deg, rgba(5,30,25,0.4), rgba(5,30,25,0));
  border-bottom: 2px solid rgba(30,190,170,0.3);
}

body[data-style-theme="arcane-sanctum"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(30,190,170,0.5) 30%,
    rgba(110,230,210,0.7) 50%,
    rgba(30,190,170,0.5) 70%,
    transparent);
}

/* Logo: arcane script, glowing */
body[data-style-theme="arcane-sanctum"] .lobby-logo {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  color: #a8f0e4;
  letter-spacing: 5px;
  text-shadow:
    0 0 25px rgba(60,220,200,0.7),
    0 0 60px rgba(20,160,140,0.4),
    0 0 100px rgba(15,140,120,0.2),
    0 2px 4px rgba(0,0,0,0.9);
  animation: arcaneGlow 4s ease-in-out infinite;
}

@keyframes arcaneGlow {
  0%, 100% { text-shadow: 0 0 25px rgba(60,220,200,0.7), 0 0 60px rgba(20,160,140,0.4), 0 0 100px rgba(15,140,120,0.2); }
  50% { text-shadow: 0 0 35px rgba(70,230,210,0.8), 0 0 80px rgba(30,190,170,0.5), 0 0 120px rgba(20,160,140,0.3); }
}

body[data-style-theme="arcane-sanctum"] .lobby-logo::after {
  content: '✦ ⊹ ◈ ⊹ ✦';
  font-size: 10px;
  letter-spacing: 8px;
  color: rgba(60,220,200,0.5);
}

/* ── CARDS: Crystal facets with dashed inner frame and glow ── */
body[data-style-theme="arcane-sanctum"] .lobby-card {
  background:
    linear-gradient(155deg,
      rgba(20,160,140,0.12) 0%,
      rgba(15,120,100,0.06) 40%,
      rgba(5,20,18,0.3) 100%);
  border: 2px solid rgba(30,190,170,0.3);
  border-radius: 10px;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.5),
    0 0 20px rgba(20,160,140,0.08),
    inset 0 1px 0 rgba(120,240,220,0.12);
  outline: 1px dashed rgba(30,190,170,0.2);
  outline-offset: -8px;
}

/* Teal glow accent bar */
body[data-style-theme="arcane-sanctum"] .lobby-card::before {
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(30,190,170,0.5) 25%,
    rgba(120,240,220,0.7) 50%,
    rgba(30,190,170,0.5) 75%,
    transparent 95%);
}

body[data-style-theme="arcane-sanctum"] .lobby-card:hover {
  border-color: rgba(60,220,200,0.5);
  outline-color: rgba(30,190,170,0.35);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.5),
    0 0 35px rgba(20,160,140,0.15),
    inset 0 1px 0 rgba(120,240,220,0.18);
}

/* Arcane star watermark */
body[data-style-theme="arcane-sanctum"] .lobby-card::after {
  content: '✦';
  position: absolute;
  bottom: 6px;
  right: 14px;
  font-size: 22px;
  color: rgba(60,220,200,0.2);
  pointer-events: none;
}

body[data-style-theme="arcane-sanctum"] .lobby-card-name {
  color: #b8f4ec;
  text-shadow: 0 0 12px rgba(60,220,200,0.4);
}

/* Tabs */
body[data-style-theme="arcane-sanctum"] .lobby-tab.active {
  border-bottom: 3px solid #40d4bc;
  color: #90e8d8;
  text-shadow: 0 0 15px rgba(30,190,170,0.5);
  background: linear-gradient(180deg, rgba(20,160,140,0.08), rgba(20,160,140,0));
}

body[data-style-theme="arcane-sanctum"] .lobby-tab.active::after {
  background: rgba(30,190,170,0.3);
}

body[data-style-theme="arcane-sanctum"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(20,160,140,0.12), rgba(20,160,140,0));
}

/* Buttons: glowing magical */
body[data-style-theme="arcane-sanctum"] .lobby-btn.primary {
  background: linear-gradient(135deg, rgba(20,160,140,0.3) 0%, rgba(10,120,100,0.18) 100%);
  border: 2px solid rgba(30,190,170,0.5);
  color: #a8f0e4;
  border-radius: 10px;
  box-shadow:
    0 0 12px rgba(20,160,140,0.2),
    inset 0 1px 0 rgba(120,240,220,0.1);
  text-shadow: 0 0 8px rgba(60,220,200,0.3);
}

body[data-style-theme="arcane-sanctum"] .lobby-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(30,190,170,0.4) 0%, rgba(15,140,120,0.25) 100%);
  border-color: rgba(60,220,200,0.7);
  box-shadow:
    0 0 25px rgba(20,160,140,0.35),
    inset 0 0 15px rgba(60,220,200,0.08);
  filter: none;
  transform: translateY(-1px);
}

body[data-style-theme="arcane-sanctum"] .lobby-btn.secondary {
  border: 2px dashed rgba(30,190,170,0.3);
  border-radius: 10px;
  color: #80d4c4;
  background: rgba(20,160,140,0.04);
}

body[data-style-theme="arcane-sanctum"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(30,190,170,0.5);
  background: rgba(20,160,140,0.1);
  box-shadow: 0 0 12px rgba(20,160,140,0.15);
}

/* Inputs */
body[data-style-theme="arcane-sanctum"] .lobby-input,
body[data-style-theme="arcane-sanctum"] .lobby-textarea,
body[data-style-theme="arcane-sanctum"] .lobby-select {
  border: 2px solid rgba(30,190,170,0.2);
  border-radius: 10px;
  background: rgba(20,160,140,0.06);
}

body[data-style-theme="arcane-sanctum"] .lobby-input:focus,
body[data-style-theme="arcane-sanctum"] .lobby-textarea:focus {
  border-color: rgba(30,190,170,0.5);
  box-shadow: 0 0 15px rgba(20,160,140,0.2);
}

body[data-style-theme="arcane-sanctum"] .lobby-card-badge {
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(20,160,140,0.1);
}

body[data-style-theme="arcane-sanctum"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(20,160,140,0.35);
}


/* ===========================================================================
   THEME: ELDRITCH — Бездна (Hollow Knight Abyss)
   Абсолютная чернота. Белый текст на чёрном. Чёрные частицы, восходящие
   из бездны. Серо-чёрные карточки с видимыми границами.
   Шрифт: Cormorant Garamond. Нулевые радиусы. Монохром.
   =========================================================================== */

body[data-style-theme="eldritch"] {
  background: #1e1e24;
  --lobby-gold: #c0c0c8;
  --lobby-secondary: #808088;
  --lobby-gold-dim: rgba(180,180,190,0.3);
  --lobby-gold-bright: #e0e0e4;
  --lobby-text: #d0d0d4;
  --lobby-text-muted: #909098;
  --lobby-text-dim: #606068;
  --lobby-card-bg: rgba(255,255,255,0.03);
  --lobby-card-border: rgba(255,255,255,0.08);
  --lobby-input-bg: rgba(255,255,255,0.03);
  --lobby-input-border: rgba(255,255,255,0.08);
  --lobby-input-focus: rgba(255,255,255,0.2);
  --lobby-radius: 0px;
  --lobby-radius-lg: 0px;
}

body[data-style-theme="eldritch"] .lobby-app {
  background: #1e1e24;
  font-family: 'Cormorant Garamond', 'Perpetua', serif;
  font-size: var(--font-base, 15px);
}

/* Dark pockets in grey — lightened */
body[data-style-theme="eldritch"] .lobby-app::before {
  background:
    radial-gradient(ellipse 60% 50% at 15% 80%, rgba(0,0,0,0.35), rgba(0,0,0,0) 60%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(0,0,0,0.28), rgba(0,0,0,0) 55%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0,0,0,0.40), rgba(0,0,0,0) 65%),
    radial-gradient(ellipse 40% 30% at 70% 60%, rgba(0,0,0,0.22), rgba(0,0,0,0) 50%);
}

/* Particles are handled by JS — see lobby.js abyssParticleSystem */
body[data-style-theme="eldritch"] .lobby-app::after {
  opacity: 0;
}

/* ── Theme ambient particles ── */
.abyss-particle {
  position: absolute !important;
  border-radius: 50%;
  background: #000;
  pointer-events: none;
  z-index: 0 !important;
  will-change: transform, opacity, width, height;
}
.theme-ambient {
  position: absolute !important;
  pointer-events: none;
  z-index: 0 !important;
  will-change: transform, opacity;
}
/* Runic: glowing rune characters */
.theme-ambient.rune {
  font-family: 'Segoe UI Symbol', 'Noto Sans Runic', sans-serif;
  color: rgba(200,160,80,0.35);
  text-shadow: 0 0 8px rgba(200,160,80,0.3);
  font-weight: bold;
}
/* Forest: firefly — warm-white core, big green glow halo, blinks via JS */
.theme-ambient.firefly {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,255,180,0.9) 0%, rgba(140,220,70,0.5) 40%, transparent 70%);
  box-shadow: 0 0 12px 6px rgba(120,200,60,0.4), 0 0 24px 10px rgba(80,180,40,0.15);
}
/* Gothic: cathedral dust — soft blur, slow rotation via JS */
.theme-ambient.dust {
  border-radius: 50%;
  background: rgba(180,170,200,0.2);
  box-shadow: 0 0 4px 2px rgba(160,150,180,0.12);
  filter: blur(0.8px);
}
/* Arcane: teal sparkle — 4-point star via clip-path, rotates via JS */
.theme-ambient.sparkle {
  background: rgba(45,212,191,0.55);
  box-shadow: 0 0 8px 3px rgba(30,190,170,0.35), 0 0 16px 5px rgba(20,170,150,0.15);
  clip-path: polygon(50% 0%, 60% 35%, 100% 50%, 60% 65%, 50% 100%, 40% 65%, 0% 50%, 40% 35%);
}
/* Arcane Sanctum: orb — мягкий магический шар, плавное свечение */
.theme-ambient.arcane-orb {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80,220,200,0.5) 0%, rgba(45,190,170,0.25) 45%, transparent 70%);
  box-shadow: 0 0 10px 5px rgba(60,200,180,0.2), 0 0 22px 8px rgba(40,180,160,0.08);
}
/* Celestial: shooting star */
.theme-ambient.shootingstar {
  height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(200,220,255,0.15) 40%, rgba(220,235,255,0.6) 85%, rgba(255,255,255,0.9) 100%);
  border-radius: 1px;
  transform-origin: right center;
}
/* Winter: snowflake */
.theme-ambient.snowflake {
  color: rgba(200,230,245,0.4);
  text-shadow: 0 0 4px rgba(168,216,234,0.3);
  filter: blur(0.3px);
}
/* Cosmic: soft nebula glow */
.theme-ambient.nebula-spark {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192,132,252,0.6) 0%, rgba(168,85,247,0.15) 40%, transparent 70%);
  box-shadow: 0 0 8px 2px rgba(168,85,247,0.12);
}
/* Sandstorm: sand grain */
.theme-ambient.sand {
  border-radius: 50%;
  background: rgba(212,180,120,0.4);
  box-shadow: 0 0 2px 0.5px rgba(200,160,90,0.2);
}
/* Volcanic: ember — hot core, dark smoke trail via CSS gradient */
.theme-ambient.ember {
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,220,100,0.8) 0%, rgba(255,120,30,0.6) 35%, rgba(180,40,10,0.2) 70%, transparent 100%);
  box-shadow: 0 0 4px 2px rgba(255,120,30,0.35), 0 3px 8px 2px rgba(180,40,10,0.15);
}
/* Underwater: bubble — transparent, highlight shimmer, grows via JS */
.theme-ambient.bubble {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(200,240,255,0.15) 0%, transparent 50%);
  border: 1px solid rgba(120,200,240,0.25);
  box-shadow: inset 0 -2px 4px rgba(100,180,220,0.1), 0 0 6px 1px rgba(100,180,230,0.06);
}
/* Manuscript: warm dust mote */
.theme-ambient.mote {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,180,100,0.5) 0%, rgba(200,160,80,0.25) 50%, transparent 100%);
  box-shadow: 0 0 4px rgba(200,160,80,0.3);
}
/* Manuscript: faded ink characters drifting */
.theme-ambient.ink-char {
  font-family: 'Almendra', 'Cormorant Garamond', serif;
  color: rgba(180,145,80,0.18);
  text-shadow: 0 0 6px rgba(200,160,80,0.12);
  font-style: italic;
}
/* Dwarven Forge: forge spark — white-hot core, orange trail, sharp */
.theme-ambient.forge-spark {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,220,0.9) 0%, rgba(255,180,50,0.7) 40%, rgba(220,100,10,0.3) 70%, transparent 100%);
  box-shadow: 0 0 3px 1px rgba(255,200,80,0.6), 0 0 8px 2px rgba(255,140,30,0.3);
}
/* Shadowfell: shadow wisp — elongated dark smear, ghostly */
.theme-ambient.shadow-wisp {
  border-radius: 40% 60% 50% 50%;
  background: radial-gradient(ellipse, rgba(80,80,120,0.18) 0%, rgba(60,60,100,0.10) 50%, transparent 80%);
  box-shadow: 0 0 16px 8px rgba(60,60,100,0.10);
  filter: blur(3px);
}

/* ── Particle interaction animations ── */
/* Bubble pop */
.theme-ambient.bubble.pop {
  animation: bubblePop .3s ease-out forwards;
}
@keyframes bubblePop {
  0% { transform: scale(1); opacity: 0.5; }
  40% { transform: scale(1.6); opacity: 0.7; border-color: rgba(200,240,255,0.5); }
  100% { transform: scale(2); opacity: 0; }
}
.burst-particle.bubble-frag {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,230,255,0.6), transparent);
  border: none;
  box-shadow: 0 0 3px rgba(140,210,240,0.4);
}

/* Snowflake melt */
.theme-ambient.snowflake.melt {
  animation: snowMelt .5s ease-out forwards;
}
@keyframes snowMelt {
  0% { transform: scale(1); opacity: 0.4; filter: blur(0.3px); }
  50% { transform: scale(0.5); opacity: 0.6; filter: blur(2px); color: rgba(180,220,240,0.6); }
  100% { transform: scale(0); opacity: 0; filter: blur(4px); }
}

/* Ember/spark flare */
.theme-ambient.flare {
  animation: emberFlare .4s ease-out;
}
@keyframes emberFlare {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(2.5); filter: brightness(3); box-shadow: 0 0 12px 4px rgba(255,200,60,0.8); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Rune activate */
.theme-ambient.rune-activate {
  animation: runeGlow .8s ease-out;
}
@keyframes runeGlow {
  0% { text-shadow: 0 0 8px rgba(200,160,80,0.3); transform: scale(1); }
  20% { text-shadow: 0 0 20px rgba(255,200,80,0.9), 0 0 40px rgba(200,160,80,0.5); transform: scale(1.3); color: rgba(255,220,120,0.9); }
  100% { text-shadow: 0 0 8px rgba(200,160,80,0.3); transform: scale(1); }
}

/* Nebula sparkle burst */
.theme-ambient.sparkle-burst {
  animation: nebulaBurst .6s ease-out;
}
@keyframes nebulaBurst {
  0% { transform: scale(1); filter: brightness(1); }
  25% { transform: scale(1.8); filter: brightness(2.5); box-shadow: 0 0 16px 6px rgba(192,132,252,0.6); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Shadow wisp dissolve */
.theme-ambient.shadow-wisp.dissolve {
  animation: wispDissolve .6s ease-out forwards;
}
@keyframes wispDissolve {
  0% { transform: scale(1); opacity: 0.18; filter: blur(3px); }
  30% { transform: scale(1.4); opacity: 0.25; filter: blur(6px); }
  100% { transform: scale(2); opacity: 0; filter: blur(12px); }
}

body[data-style-theme="eldritch"] .lobby-header {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

body[data-style-theme="eldritch"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent 15%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.06) 65%,
    transparent 85%);
}

/* Logo: white on black, Perpetua-like, breathing */
body[data-style-theme="eldritch"] .lobby-logo {
  font-family: 'Cormorant Garamond', 'Perpetua', serif;
  color: #d0d0d8;
  letter-spacing: 8px;
  font-weight: 600;
  font-size: inherit;
  text-shadow: 0 0 30px rgba(255,255,255,0.1);
  animation: abyssBreath 12s ease-in-out infinite;
}

@keyframes abyssBreath {
  0%, 100% { color: #b0b0b8; text-shadow: 0 0 20px rgba(255,255,255,0.06); }
  50% { color: #e0e0e4; text-shadow: 0 0 40px rgba(255,255,255,0.12); }
}

body[data-style-theme="eldritch"] .lobby-logo::after {
  content: '~ ◇ ~';
  font-size: 11px;
  letter-spacing: 8px;
  color: rgba(255,255,255,0.15);
  text-shadow: none;
}

/* ── CARDS: Darker grey panels on grey bg, visible borders ── */
body[data-style-theme="eldritch"] .lobby-card {
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Thin white top line */
body[data-style-theme="eldritch"] .lobby-card::before {
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.1) 25%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.1) 75%,
    transparent);
}

body[data-style-theme="eldritch"] .lobby-card:hover {
  border-color: rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  transform: translateY(-2px);
  box-shadow: 0 10px 35px rgba(0,0,0,0.5);
}

/* Void diamond */
body[data-style-theme="eldritch"] .lobby-card::after {
  content: '◇';
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-size: 18px;
  color: rgba(255,255,255,0.08);
  pointer-events: none;
  font-family: 'Cormorant Garamond', serif;
  animation: voidPulse 10s ease-in-out infinite;
}

@keyframes voidPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

body[data-style-theme="eldritch"] .lobby-card-name {
  font-family: 'Cormorant Garamond', 'Perpetua', serif;
  color: #e0e0e4;
  letter-spacing: 3px;
  font-size: 18px;
  font-weight: 600;
  text-shadow: none;
  text-transform: uppercase;
}

body[data-style-theme="eldritch"] .lobby-card-meta,
body[data-style-theme="eldritch"] .lobby-card-desc,
body[data-style-theme="eldritch"] .lobby-card-char {
  font-family: 'Cormorant Garamond', serif;
  color: #b0b0b8;
  font-size: 14px;
  letter-spacing: 0.5px;
}

body[data-style-theme="eldritch"] .lobby-card-badge {
  border-radius: 0;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  background: transparent !important;
  color: rgba(255,255,255,0.4) !important;
  border-color: rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
}

/* Tabs: thin, white text */
body[data-style-theme="eldritch"] .lobby-tab {
  font-family: 'Cormorant Garamond', 'Perpetua', serif;
  letter-spacing: 4px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  color: #808088;
}

body[data-style-theme="eldritch"] .lobby-tab.active {
  border-bottom: 1px solid rgba(255,255,255,0.2);
  color: #d0d0d8;
  text-shadow: none;
  background: transparent;
}

body[data-style-theme="eldritch"] .lobby-tab.active::after {
  background: rgba(255,255,255,0.04);
}

body[data-style-theme="eldritch"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), rgba(255,255,255,0));
}

/* Buttons: ghost with white text */
body[data-style-theme="eldritch"] .lobby-btn {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}

body[data-style-theme="eldritch"] .lobby-btn.primary {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  color: #d0d0d8;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}

body[data-style-theme="eldritch"] .lobby-btn.primary:hover:not(:disabled) {
  background: rgba(0,0,0,0.45);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
  filter: none;
  color: #e8e8ec;
}

body[data-style-theme="eldritch"] .lobby-btn.secondary {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  color: #909098;
  background: transparent;
}

body[data-style-theme="eldritch"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(255,255,255,0.15);
  color: #c0c0c8;
  background: rgba(255,255,255,0.03);
  box-shadow: none;
}

/* Inputs: dark, white text */
body[data-style-theme="eldritch"] .lobby-input,
body[data-style-theme="eldritch"] .lobby-textarea,
body[data-style-theme="eldritch"] .lobby-select {
  font-family: 'Cormorant Garamond', serif;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  background: rgba(0,0,0,0.2);
  font-size: var(--font-base, 15px);
  letter-spacing: 0.5px;
  color: #d0d0d4;
}

body[data-style-theme="eldritch"] .lobby-input:focus,
body[data-style-theme="eldritch"] .lobby-textarea:focus {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 0 10px rgba(255,255,255,0.03);
}

body[data-style-theme="eldritch"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 0;
}

body[data-style-theme="eldritch"] .lobby-panel::after {
  content: '~ ◇ ~';
  display: block;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  color: rgba(255,255,255,0.1);
  letter-spacing: 6px;
  padding: 24px 0 10px;
  pointer-events: none;
}

body[data-style-theme="eldritch"] .lobby-panel label,
body[data-style-theme="eldritch"] .lobby-panel h3 {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 1px;
  font-weight: 600;
  color: #c0c0c8;
}


/* ===========================================================================
   THEME: CELESTIAL — Небесная / Астральная
   Звёздное небо, лунное серебро, небесный синий. Мягкие pill-формы,
   светящиеся бордеры, звёздное поле на фоне, облачные панели.
   =========================================================================== */

body[data-style-theme="celestial"] {
  background: #060810;
  --lobby-gold: #93c5fd;
  --lobby-secondary: #60a5fa;
  --lobby-gold-dim: rgba(96,165,250,0.4);
  --lobby-radius: 16px;
  --lobby-radius-lg: 20px;
}

body[data-style-theme="celestial"] .lobby-app {
  background: #060810;
  font-family: 'Philosopher', sans-serif;
}

/* Star-filled celestial dome */
body[data-style-theme="celestial"] .lobby-app::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(160,180,255,0.1), rgba(160,180,255,0) 65%),
    radial-gradient(ellipse 40% 60% at 25% 40%, rgba(100,120,220,0.06), rgba(100,120,220,0)),
    radial-gradient(ellipse 40% 60% at 75% 40%, rgba(120,100,220,0.06), rgba(120,100,220,0));
}

/* Animated starfield */
body[data-style-theme="celestial"] .lobby-app::after {
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 10%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 5%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(2px 2px at 72% 18%, rgba(200,220,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 8%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 45%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 38%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 55%, rgba(200,220,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 42%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 5% 70%, rgba(200,220,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 65%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 85%, rgba(255,255,255,0.3) 0%, transparent 100%);
  opacity: 0.7;
  animation: celestialTwinkle 8s ease-in-out infinite;
}

@keyframes celestialTwinkle {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.5; }
}

body[data-style-theme="celestial"] .lobby-header {
  background: linear-gradient(180deg, rgba(10,15,35,0.5), rgba(10,15,35,0));
  border-bottom: 2px solid rgba(140,170,255,0.2);
}

body[data-style-theme="celestial"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(180,200,255,0.4) 30%,
    rgba(220,230,255,0.6) 50%,
    rgba(180,200,255,0.4) 70%,
    transparent);
}

/* Logo: radiant celestial inscription */
body[data-style-theme="celestial"] .lobby-logo {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  color: #d8e8ff;
  letter-spacing: 5px;
  text-shadow:
    0 0 25px rgba(180,200,255,0.7),
    0 0 60px rgba(140,170,255,0.4),
    0 0 100px rgba(100,140,255,0.2),
    0 2px 6px rgba(0,0,0,0.8);
  animation: celestialShine 6s ease-in-out infinite;
}

@keyframes celestialShine {
  0%, 100% { text-shadow: 0 0 25px rgba(180,200,255,0.7), 0 0 60px rgba(140,170,255,0.4), 0 0 100px rgba(100,140,255,0.2); }
  50% { text-shadow: 0 0 35px rgba(200,220,255,0.8), 0 0 80px rgba(160,190,255,0.5), 0 0 130px rgba(120,160,255,0.3); }
}

body[data-style-theme="celestial"] .lobby-logo::after {
  content: '☽ ✦ ☾';
  font-size: 11px;
  letter-spacing: 10px;
  color: rgba(180,200,255,0.5);
}

/* ── CARDS: Luminous cloud panels with glow borders ── */
body[data-style-theme="celestial"] .lobby-card {
  background:
    linear-gradient(160deg,
      rgba(140,170,255,0.1) 0%,
      rgba(100,130,255,0.05) 40%,
      rgba(10,15,40,0.2) 100%);
  border: 2px solid rgba(140,170,255,0.25);
  border-radius: 18px;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.3),
    0 0 15px rgba(120,150,255,0.08),
    inset 0 1px 0 rgba(220,230,255,0.12);
}

/* Luminous top glow */
body[data-style-theme="celestial"] .lobby-card::before {
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(160,190,255,0.5) 25%,
    rgba(200,215,255,0.7) 50%,
    rgba(160,190,255,0.5) 75%,
    transparent);
}

body[data-style-theme="celestial"] .lobby-card:hover {
  border-color: rgba(160,190,255,0.45);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.3),
    0 0 30px rgba(140,170,255,0.12),
    inset 0 1px 0 rgba(220,230,255,0.18);
}

/* Moon ornament */
body[data-style-theme="celestial"] .lobby-card::after {
  content: '☽';
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 20px;
  color: rgba(180,200,255,0.2);
  pointer-events: none;
}

body[data-style-theme="celestial"] .lobby-card-name {
  color: #d0dcff;
  text-shadow: 0 0 12px rgba(160,180,255,0.4);
}

/* Tabs: rounded glow */
body[data-style-theme="celestial"] .lobby-tab {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  border-radius: 12px 12px 0 0;
}

body[data-style-theme="celestial"] .lobby-tab.active {
  border-bottom: 3px solid rgba(140,170,255,0.6);
  color: #c0d0ff;
  text-shadow: 0 0 15px rgba(140,170,255,0.5);
  background: linear-gradient(180deg, rgba(120,150,255,0.08), rgba(120,150,255,0));
}

body[data-style-theme="celestial"] .lobby-tab.active::after {
  background: rgba(120,150,255,0.25);
}

body[data-style-theme="celestial"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(140,170,255,0.1), rgba(140,170,255,0));
}

/* Buttons: luminous pills with glow */
body[data-style-theme="celestial"] .lobby-btn.primary {
  background: linear-gradient(135deg, rgba(120,150,255,0.25) 0%, rgba(80,110,220,0.15) 100%);
  border: 2px solid rgba(140,170,255,0.4);
  color: #c8d8ff;
  border-radius: 20px;
  box-shadow:
    0 0 12px rgba(120,150,255,0.15),
    inset 0 1px 0 rgba(200,215,255,0.1);
  text-shadow: 0 0 6px rgba(160,180,255,0.3);
}

body[data-style-theme="celestial"] .lobby-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(140,170,255,0.35) 0%, rgba(100,130,240,0.22) 100%);
  border-color: rgba(160,190,255,0.6);
  box-shadow:
    0 0 25px rgba(120,150,255,0.3),
    inset 0 1px 0 rgba(200,215,255,0.15);
  filter: none;
  transform: translateY(-1px);
}

body[data-style-theme="celestial"] .lobby-btn.secondary {
  border: 2px solid rgba(140,170,255,0.25);
  border-radius: 20px;
  color: #93c5fd;
  background: rgba(120,150,255,0.04);
}

body[data-style-theme="celestial"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(140,170,255,0.4);
  background: rgba(120,150,255,0.08);
  box-shadow: 0 0 10px rgba(120,150,255,0.12);
}

/* Inputs: soft pill shape */
body[data-style-theme="celestial"] .lobby-input,
body[data-style-theme="celestial"] .lobby-textarea,
body[data-style-theme="celestial"] .lobby-select {
  border: 2px solid rgba(140,170,255,0.2);
  border-radius: 16px;
  background: rgba(120,150,255,0.05);
}

body[data-style-theme="celestial"] .lobby-input:focus,
body[data-style-theme="celestial"] .lobby-textarea:focus {
  border-color: rgba(140,170,255,0.45);
  box-shadow: 0 0 15px rgba(120,150,255,0.15);
}

body[data-style-theme="celestial"] .lobby-card-badge {
  border-radius: 20px;
}

body[data-style-theme="celestial"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(140,170,255,0.3);
  border-radius: 10px;
}




/* =============================================================================
   IN-GAME UI — Decorative overrides per style theme
   ============================================================================= */

body[data-style-theme] #rpg-header { position: relative; }
body[data-style-theme] #col-left { position: relative; }
body[data-style-theme] .stat-bar .fill { box-shadow: none; }

/* ---------------------------------------------------------------------------
   RUNIC in-game
   --------------------------------------------------------------------------- */
body[data-style-theme="runic"] #rpg-header {
  border-bottom: 3px solid rgba(180,140,70,0.35);
}
body[data-style-theme="runic"] #col-left {
  border-right: 3px solid rgba(180,140,70,0.25);
}
body[data-style-theme="runic"] #col-right {
  border-left: 3px solid rgba(180,140,70,0.25);
}
body[data-style-theme="runic"] .col-left-header {
  border-bottom: 2px solid rgba(180,140,70,0.25);
  font-family: 'MedievalSharp', 'Philosopher', sans-serif;
}
body[data-style-theme="runic"] #room-name {
  border-radius: 2px;
  border: 2px solid rgba(180,140,70,0.3);
  font-family: 'Uncial Antiqua', 'MedievalSharp', serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}
body[data-style-theme="runic"] .brand-name {
  border-radius: 2px;
  border: 2px solid rgba(180,140,70,0.3);
  font-family: 'Uncial Antiqua', serif;
}
body[data-style-theme="runic"] #cmd-input {
  border-radius: 2px;
  border: 2px solid rgba(180,140,70,0.25);
  font-family: 'MedievalSharp', 'Philosopher', sans-serif;
  background: rgba(60,40,20,0.08);
}
body[data-style-theme="runic"] #cmd-input:focus {
  border-color: rgba(200,160,80,0.5);
  box-shadow: 0 0 8px rgba(180,140,70,0.12);
}
body[data-style-theme="runic"] #col-left::before {
  content: 'ᚱ';
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 20px;
  color: rgba(200,160,80,0.12);
  pointer-events: none;
  z-index: 1;
}
body[data-style-theme="runic"] .journal-room-desc {
  border-left: 4px solid rgba(180,140,70,0.35);
}
body[data-style-theme="runic"] #npc-chat-header {
  border-bottom: 2px solid rgba(180,140,70,0.25);
}
body[data-style-theme="runic"] .stat-bar { border-radius: 2px; }
body[data-style-theme="runic"] .stat-bar .fill { border-radius: 2px; }
body[data-style-theme="runic"] .glass-panel {
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   FOREST in-game
   --------------------------------------------------------------------------- */
body[data-style-theme="forest"] #rpg-header {
  border-bottom: 2px solid rgba(68,170,100,0.3);
}
body[data-style-theme="forest"] #col-left {
  border-right: 2px solid rgba(68,170,100,0.2);
}
body[data-style-theme="forest"] #col-right {
  border-left: 2px solid rgba(68,170,100,0.2);
}
body[data-style-theme="forest"] .col-left-header {
  border-bottom: 2px solid rgba(68,170,100,0.2);
  font-family: 'IM Fell English', serif;
  font-style: italic;
}
body[data-style-theme="forest"] #room-name {
  border-radius: 12px 4px 12px 4px;
  border: 2px solid rgba(68,170,100,0.25);
  font-family: 'IM Fell English', serif;
  font-style: italic;
}
body[data-style-theme="forest"] .brand-name {
  border-radius: 12px 4px 12px 4px;
  border: 2px solid rgba(68,170,100,0.25);
  font-family: 'IM Fell English', serif;
}
body[data-style-theme="forest"] #cmd-input {
  border-radius: 12px;
  border: 2px solid rgba(68,170,100,0.2);
  font-family: 'IM Fell English', serif;
  background: rgba(40,100,30,0.05);
}
body[data-style-theme="forest"] #cmd-input:focus {
  border-color: rgba(68,170,100,0.5);
  box-shadow: 0 0 12px rgba(68,170,100,0.12);
}
body[data-style-theme="forest"] .journal-room-desc {
  border-left: 4px solid rgba(68,170,100,0.35);
  border-radius: 0 10px 10px 0;
}
body[data-style-theme="forest"] #col-left::after {
  content: '❧';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: rgba(68,170,100,0.15);
  pointer-events: none;
  z-index: 1;
}
body[data-style-theme="forest"] .stat-bar { border-radius: 8px; }
body[data-style-theme="forest"] .stat-bar .fill { border-radius: 8px; }
body[data-style-theme="forest"] #npc-chat-header {
  border-bottom: 2px solid rgba(68,170,100,0.2);
}
body[data-style-theme="forest"] .glass-panel {
  border-radius: 12px 4px 12px 4px;
}

/* ---------------------------------------------------------------------------
   GOTHIC in-game
   --------------------------------------------------------------------------- */
body[data-style-theme="gothic"] #rpg-header {
  border-bottom: 3px double rgba(90,70,120,0.4);
}
body[data-style-theme="gothic"] #col-left {
  border-right: 2px double rgba(80,60,110,0.3);
}
body[data-style-theme="gothic"] #col-right {
  border-left: 2px double rgba(80,60,110,0.3);
}
body[data-style-theme="gothic"] .col-left-header {
  border-bottom: 2px double rgba(80,60,110,0.3);
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}
body[data-style-theme="gothic"] #room-name {
  border-radius: 1px;
  border: 2px double rgba(80,60,110,0.35);
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}
body[data-style-theme="gothic"] .brand-name {
  border-radius: 1px;
  border: 2px double rgba(80,60,110,0.35);
  font-family: 'Cinzel', serif;
}
body[data-style-theme="gothic"] #cmd-input {
  border-radius: 1px;
  border: 2px solid rgba(80,60,110,0.3);
  font-family: 'Cinzel', serif;
  background: rgba(50,10,18,0.06);
}
body[data-style-theme="gothic"] #cmd-input:focus {
  border-color: rgba(105,80,135,0.5);
  box-shadow: 0 0 8px rgba(75,55,100,0.1);
}
body[data-style-theme="gothic"] #col-left::before {
  content: '✝';
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 18px;
  color: rgba(90,70,120,0.12);
  pointer-events: none;
  z-index: 1;
}
body[data-style-theme="gothic"] .journal-room-desc {
  border-left: 4px solid rgba(90,70,120,0.35);
}
body[data-style-theme="gothic"] .stat-bar { border-radius: 1px; }
body[data-style-theme="gothic"] .stat-bar .fill { border-radius: 1px; }
body[data-style-theme="gothic"] #npc-chat-header {
  border-bottom: 2px double rgba(80,60,110,0.3);
}
body[data-style-theme="gothic"] .glass-panel {
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   ARCANE SANCTUM in-game
   --------------------------------------------------------------------------- */
body[data-style-theme="arcane-sanctum"] #rpg-header {
  border-bottom: 2px solid rgba(45,212,191,0.3);
  box-shadow: 0 1px 0 rgba(45,212,191,0.1), 0 2px 12px rgba(45,212,191,0.06);
}
body[data-style-theme="arcane-sanctum"] #col-left {
  border-right: 2px solid rgba(45,212,191,0.2);
}
body[data-style-theme="arcane-sanctum"] #col-right {
  border-left: 2px solid rgba(45,212,191,0.2);
}
body[data-style-theme="arcane-sanctum"] .col-left-header {
  border-bottom: 2px solid rgba(45,212,191,0.2);
}
body[data-style-theme="arcane-sanctum"] #room-name {
  border-radius: 8px;
  border: 2px solid rgba(45,212,191,0.25);
  box-shadow: 0 0 10px rgba(45,212,191,0.08);
}
body[data-style-theme="arcane-sanctum"] .brand-name {
  border-radius: 8px;
  border: 2px solid rgba(45,212,191,0.25);
  box-shadow: 0 0 10px rgba(45,212,191,0.08);
}
body[data-style-theme="arcane-sanctum"] #cmd-input {
  border-radius: 10px;
  border: 2px solid rgba(45,212,191,0.25);
  background: rgba(20,160,140,0.04);
}
body[data-style-theme="arcane-sanctum"] #cmd-input:focus {
  border-color: rgba(45,212,191,0.5);
  box-shadow: 0 0 15px rgba(45,212,191,0.18);
}
body[data-style-theme="arcane-sanctum"] #col-left::before {
  content: '✦';
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 18px;
  color: rgba(45,212,191,0.15);
  pointer-events: none;
  z-index: 1;
}
body[data-style-theme="arcane-sanctum"] .journal-room-desc {
  border-left: 4px solid rgba(45,212,191,0.3);
  outline: 1px dashed rgba(45,212,191,0.12);
  outline-offset: 3px;
  border-radius: 0 6px 6px 0;
}
body[data-style-theme="arcane-sanctum"] #npc-chat-header {
  border-bottom: 2px solid rgba(45,212,191,0.2);
  box-shadow: 0 1px 6px rgba(45,212,191,0.06);
}
body[data-style-theme="arcane-sanctum"] .stat-bar { border-radius: 8px; }
body[data-style-theme="arcane-sanctum"] .stat-bar .fill { border-radius: 8px; }
body[data-style-theme="arcane-sanctum"] .glass-panel {
  border-radius: 10px;
}

/* ---------------------------------------------------------------------------
   ELDRITCH (ABYSS) in-game — void everything
   --------------------------------------------------------------------------- */
body[data-style-theme="eldritch"] #rpg-header {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
body[data-style-theme="eldritch"] #rpg-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), rgba(255,255,255,0));
  pointer-events: none;
}
body[data-style-theme="eldritch"] #col-left {
  border-right: 1px solid rgba(255,255,255,0.03);
}
body[data-style-theme="eldritch"] #col-right {
  border-left: 1px solid rgba(255,255,255,0.03);
}
body[data-style-theme="eldritch"] .col-left-header {
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}
body[data-style-theme="eldritch"] #room-name,
body[data-style-theme="eldritch"] .brand-name,
body[data-style-theme="eldritch"] .char-name {
  font-family: 'Cormorant Garamond', 'Perpetua', serif;
  letter-spacing: 2px;
  font-weight: 600;
  text-transform: uppercase;
}
body[data-style-theme="eldritch"] #room-name {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.05);
}
body[data-style-theme="eldritch"] .brand-name {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.05);
}
body[data-style-theme="eldritch"] #rpg-app {
  font-family: 'Cormorant Garamond', 'Perpetua', serif;
  font-size: var(--font-base, 15px);
}
body[data-style-theme="eldritch"] #cmd-input {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.04);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--font-base, 15px);
  background: rgba(255,255,255,0.01);
}
body[data-style-theme="eldritch"] #cmd-input:focus {
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
body[data-style-theme="eldritch"] #col-left::before {
  content: '◇';
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 16px;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  z-index: 1;
  font-family: 'Cormorant Garamond', serif;
  animation: voidPulse 10s ease-in-out infinite;
}
body[data-style-theme="eldritch"] .journal-room-desc {
  border-left: 2px solid rgba(255,255,255,0.05);
  border-radius: 0;
}
body[data-style-theme="eldritch"] .msg-room-title {
  font-family: 'Cormorant Garamond', 'Perpetua', serif;
  letter-spacing: 3px;
  font-weight: 600;
  color: #808088;
  text-shadow: none;
  text-transform: uppercase;
}
body[data-style-theme="eldritch"] .msg-room-title::after {
  content: '  ~ ◇ ~';
  font-size: 8px;
  color: rgba(255,255,255,0.06);
  letter-spacing: 3px;
  vertical-align: middle;
}
body[data-style-theme="eldritch"] .stat-bar { border-radius: 0; }
body[data-style-theme="eldritch"] .stat-bar .fill { border-radius: 0; }
body[data-style-theme="eldritch"] #npc-chat-header {
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-family: 'Cormorant Garamond', serif;
}
body[data-style-theme="eldritch"] .glass-panel {
  border-radius: 0;
}

/* ---------------------------------------------------------------------------
   CELESTIAL in-game
   --------------------------------------------------------------------------- */
body[data-style-theme="celestial"] #rpg-header {
  border-bottom: 2px solid rgba(160,180,255,0.2);
  box-shadow: 0 1px 0 rgba(160,180,255,0.08), 0 2px 16px rgba(100,140,255,0.05);
}
body[data-style-theme="celestial"] #rpg-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,180,255,0.25), rgba(160,180,255,0));
  pointer-events: none;
}
body[data-style-theme="celestial"] #col-left {
  border-right: 2px solid rgba(160,180,255,0.15);
}
body[data-style-theme="celestial"] #col-right {
  border-left: 2px solid rgba(160,180,255,0.15);
}
body[data-style-theme="celestial"] .col-left-header {
  border-bottom: 2px solid rgba(160,180,255,0.15);
}
body[data-style-theme="celestial"] #room-name {
  border-radius: 14px;
  border: 2px solid rgba(160,180,255,0.2);
  box-shadow: 0 0 10px rgba(140,170,255,0.08);
}
body[data-style-theme="celestial"] .brand-name {
  border-radius: 14px;
  border: 2px solid rgba(160,180,255,0.2);
  box-shadow: 0 0 10px rgba(140,170,255,0.08);
}
body[data-style-theme="celestial"] #cmd-input {
  border-radius: 16px;
  border: 2px solid rgba(160,180,255,0.2);
  background: rgba(120,150,255,0.04);
}
body[data-style-theme="celestial"] #cmd-input:focus {
  border-color: rgba(160,180,255,0.45);
  box-shadow: 0 0 14px rgba(140,170,255,0.15);
}
body[data-style-theme="celestial"] #col-left::before {
  content: '☽';
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 18px;
  color: rgba(160,180,255,0.15);
  pointer-events: none;
  z-index: 1;
}
body[data-style-theme="celestial"] .journal-room-desc {
  border-left: 4px solid rgba(160,180,255,0.3);
  border-radius: 0 12px 12px 0;
}
body[data-style-theme="celestial"] .stat-bar { border-radius: 10px; }
body[data-style-theme="celestial"] .stat-bar .fill { border-radius: 10px; }
body[data-style-theme="celestial"] #npc-chat-header {
  border-bottom: 2px solid rgba(160,180,255,0.15);
}
body[data-style-theme="celestial"] .glass-panel {
  border-radius: 16px;
}

/* =============================================================================
   IN-GAME UI — Extended decorative overrides (buttons, exits, inventory, chat)
   ============================================================================= */

/* --- RUNIC in-game extended --- */
body[data-style-theme="runic"] .exit-btn {
  border-radius: 2px;
  border: 2px solid rgba(180,140,70,0.25);
  font-family: 'MedievalSharp', sans-serif;
}
body[data-style-theme="runic"] .exit-btn:hover {
  border-color: rgba(200,160,80,0.5);
  box-shadow: 0 0 6px rgba(180,140,70,0.15);
}
body[data-style-theme="runic"] .action-btn,
body[data-style-theme="runic"] .extra-btn,
body[data-style-theme="runic"] .compass-btn {
  border-radius: 2px;
  font-family: 'MedievalSharp', sans-serif;
}
body[data-style-theme="runic"] .util-btn {
  border-radius: 2px;
  border: 1px solid rgba(180,140,70,0.2);
}
body[data-style-theme="runic"] .inv-item {
  border-radius: 2px;
  font-family: 'MedievalSharp', sans-serif;
}
body[data-style-theme="runic"] #npc-chat {
  border-radius: 2px;
  border: 2px solid rgba(180,140,70,0.2);
}
body[data-style-theme="runic"] #npc-chat-input {
  border-radius: 2px;
  border: 1px solid rgba(180,140,70,0.2);
  font-family: 'MedievalSharp', sans-serif;
}
body[data-style-theme="runic"] .msg-room-title {
  font-family: 'Uncial Antiqua', 'MedievalSharp', serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* --- FOREST in-game extended --- */
body[data-style-theme="forest"] .exit-btn {
  border-radius: 10px;
  border: 2px solid rgba(68,170,100,0.2);
  font-family: 'IM Fell English', serif;
  font-style: italic;
}
body[data-style-theme="forest"] .exit-btn:hover {
  border-color: rgba(68,170,100,0.5);
  box-shadow: 0 0 8px rgba(68,170,100,0.12);
}
body[data-style-theme="forest"] .action-btn,
body[data-style-theme="forest"] .extra-btn,
body[data-style-theme="forest"] .compass-btn {
  border-radius: 10px;
  font-family: 'IM Fell English', serif;
}
body[data-style-theme="forest"] .util-btn {
  border-radius: 10px;
  border: 1px solid rgba(68,170,100,0.15);
}
body[data-style-theme="forest"] .inv-item {
  border-radius: 8px;
  font-family: 'IM Fell English', serif;
}
body[data-style-theme="forest"] #npc-chat {
  border-radius: 14px 6px 14px 6px;
  border: 2px solid rgba(68,170,100,0.2);
}
body[data-style-theme="forest"] #npc-chat-input {
  border-radius: 10px;
  border: 1px solid rgba(68,170,100,0.2);
  font-family: 'IM Fell English', serif;
}
body[data-style-theme="forest"] .msg-room-title {
  font-family: 'IM Fell English', serif;
  font-style: italic;
}

/* --- GOTHIC in-game extended --- */
body[data-style-theme="gothic"] .exit-btn {
  border-radius: 1px;
  border: 2px double rgba(80,60,110,0.3);
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}
body[data-style-theme="gothic"] .exit-btn:hover {
  border-color: rgba(105,80,135,0.5);
  box-shadow: 0 0 6px rgba(75,55,100,0.1);
}
body[data-style-theme="gothic"] .action-btn,
body[data-style-theme="gothic"] .extra-btn,
body[data-style-theme="gothic"] .compass-btn {
  border-radius: 1px;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}
body[data-style-theme="gothic"] .util-btn {
  border-radius: 1px;
  border: 1px double rgba(80,60,110,0.25);
}
body[data-style-theme="gothic"] .inv-item {
  border-radius: 1px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
}
body[data-style-theme="gothic"] #npc-chat {
  border-radius: 2px;
  border: 2px double rgba(80,60,110,0.3);
}
body[data-style-theme="gothic"] #npc-chat-input {
  border-radius: 1px;
  border: 1px solid rgba(80,60,110,0.25);
  font-family: 'Cinzel', serif;
}
body[data-style-theme="gothic"] .msg-room-title {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* --- ARCANE SANCTUM in-game extended --- */
body[data-style-theme="arcane-sanctum"] .exit-btn {
  border-radius: 8px;
  border: 2px solid rgba(45,212,191,0.2);
}
body[data-style-theme="arcane-sanctum"] .exit-btn:hover {
  border-color: rgba(45,212,191,0.5);
  box-shadow: 0 0 10px rgba(45,212,191,0.15);
}
body[data-style-theme="arcane-sanctum"] .action-btn,
body[data-style-theme="arcane-sanctum"] .extra-btn,
body[data-style-theme="arcane-sanctum"] .compass-btn {
  border-radius: 8px;
}
body[data-style-theme="arcane-sanctum"] .util-btn {
  border-radius: 8px;
  border: 1px solid rgba(45,212,191,0.15);
}
body[data-style-theme="arcane-sanctum"] .inv-item {
  border-radius: 6px;
}
body[data-style-theme="arcane-sanctum"] #npc-chat {
  border-radius: 10px;
  border: 2px solid rgba(45,212,191,0.2);
  box-shadow: 0 0 12px rgba(45,212,191,0.06);
}
body[data-style-theme="arcane-sanctum"] #npc-chat-input {
  border-radius: 8px;
  border: 1px solid rgba(45,212,191,0.2);
}

/* --- ELDRITCH in-game extended --- */
body[data-style-theme="eldritch"] .exit-btn {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.04);
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 1px;
}
body[data-style-theme="eldritch"] .exit-btn:hover {
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
  background: rgba(255,255,255,0.02);
}
body[data-style-theme="eldritch"] .action-btn,
body[data-style-theme="eldritch"] .extra-btn,
body[data-style-theme="eldritch"] .compass-btn {
  border-radius: 0;
  font-family: 'Cormorant Garamond', serif;
}
body[data-style-theme="eldritch"] .util-btn {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.04);
}
body[data-style-theme="eldritch"] .inv-item {
  border-radius: 0;
  font-family: 'Cormorant Garamond', serif;
}
body[data-style-theme="eldritch"] #npc-chat {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.04);
}
body[data-style-theme="eldritch"] #npc-chat-input {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.04);
  font-family: 'Cormorant Garamond', serif;
}

/* --- CELESTIAL in-game extended --- */
body[data-style-theme="celestial"] .exit-btn {
  border-radius: 14px;
  border: 2px solid rgba(160,180,255,0.2);
}
body[data-style-theme="celestial"] .exit-btn:hover {
  border-color: rgba(160,180,255,0.45);
  box-shadow: 0 0 10px rgba(140,170,255,0.12);
}
body[data-style-theme="celestial"] .action-btn,
body[data-style-theme="celestial"] .extra-btn,
body[data-style-theme="celestial"] .compass-btn {
  border-radius: 14px;
}
body[data-style-theme="celestial"] .util-btn {
  border-radius: 14px;
  border: 1px solid rgba(160,180,255,0.15);
}
body[data-style-theme="celestial"] .inv-item {
  border-radius: 10px;
}
body[data-style-theme="celestial"] #npc-chat {
  border-radius: 16px;
  border: 2px solid rgba(160,180,255,0.15);
  box-shadow: 0 0 12px rgba(140,170,255,0.05);
}
body[data-style-theme="celestial"] #npc-chat-input {
  border-radius: 14px;
  border: 1px solid rgba(160,180,255,0.15);
}

/* =============================================================================
   IN-GAME UI — Dramatic visual overrides (backgrounds, glows, textures)
   ============================================================================= */

/* --- RUNIC dramatic --- */
body[data-style-theme="runic"] #rpg-app {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(180,140,70,0.015) 40px, rgba(180,140,70,0.015) 41px),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(180,140,70,0.015) 40px, rgba(180,140,70,0.015) 41px),
    radial-gradient(ellipse at 20% 50%, rgba(120,80,30,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(120,80,30,0.04) 0%, transparent 60%);
}
body[data-style-theme="runic"] .glass-panel {
  background: linear-gradient(135deg, rgba(40,30,15,0.50), rgba(25,20,10,0.50));
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(180,140,70,0.08);
}
body[data-style-theme="runic"] #mini-map {
  border: 2px solid rgba(180,140,70,0.25);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(180,140,70,0.08), inset 0 0 20px rgba(0,0,0,0.3);
}
body[data-style-theme="runic"] #room-name {
  background: linear-gradient(135deg, rgba(180,140,70,0.12), rgba(140,100,40,0.06));
  text-shadow: 0 0 15px rgba(200,160,80,0.25);
}
body[data-style-theme="runic"] .brand-name {
  background: linear-gradient(135deg, rgba(180,140,70,0.1), rgba(140,100,40,0.05));
  text-shadow: 0 0 12px rgba(200,160,80,0.2);
}
body[data-style-theme="runic"] .stat-bar {
  background: rgba(180,140,70,0.08);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
body[data-style-theme="runic"] .stat-bar .fill {
  box-shadow: none;
}
body[data-style-theme="runic"] .msg-important {
  background: rgba(180,140,70,0.08);
  border-left-color: rgba(200,160,80,0.6);
}
body[data-style-theme="runic"] .msg-combat {
  border-left: 2px solid rgba(200,160,80,0.4);
  background: rgba(180,140,70,0.04);
}
body[data-style-theme="runic"] #hud-bar {
  border-top: 2px solid rgba(180,140,70,0.2);
}
body[data-style-theme="runic"] .inv-item:hover {
  background: linear-gradient(90deg, rgba(180,140,70,0.08), rgba(180,140,70,0) 70%);
  border-color: rgba(180,140,70,0.3);
}
body[data-style-theme="runic"] .inv-item.inv-equipped {
  border-left: 3px solid rgba(200,160,80,0.6);
  background: rgba(180,140,70,0.04);
}
body[data-style-theme="runic"] .chat-msg.from-npc {
  background: linear-gradient(135deg, rgba(180,140,70,0.06), rgba(140,100,40,0.03));
  border: 1px solid rgba(180,140,70,0.12);
}

/* --- FOREST dramatic --- */
body[data-style-theme="forest"] #rpg-app {
  background:
    radial-gradient(ellipse at 10% 90%, rgba(40,120,50,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 10%, rgba(40,120,50,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(30,80,40,0.08) 0%, transparent 40%);
}
body[data-style-theme="forest"] .glass-panel {
  background: linear-gradient(135deg, rgba(15,30,18,0.50), rgba(10,22,12,0.50));
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(68,170,100,0.06);
}
body[data-style-theme="forest"] #mini-map {
  border: 2px solid rgba(68,170,100,0.2);
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(68,170,100,0.06), inset 0 0 20px rgba(0,0,0,0.3);
}
body[data-style-theme="forest"] #room-name {
  background: linear-gradient(135deg, rgba(68,170,100,0.1), rgba(40,120,60,0.05));
  text-shadow: 0 0 15px rgba(80,200,120,0.2);
}
body[data-style-theme="forest"] .brand-name {
  background: linear-gradient(135deg, rgba(68,170,100,0.08), rgba(40,120,60,0.04));
  text-shadow: 0 0 12px rgba(80,200,120,0.15);
}
body[data-style-theme="forest"] .stat-bar {
  background: rgba(68,170,100,0.06);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
body[data-style-theme="forest"] .stat-bar .fill {
  box-shadow: none;
}
body[data-style-theme="forest"] .msg-important {
  background: rgba(68,170,100,0.06);
  border-left-color: rgba(80,200,120,0.5);
  border-radius: 0 10px 10px 0;
}
body[data-style-theme="forest"] .msg-combat {
  border-left: 2px solid rgba(80,200,120,0.35);
  background: rgba(68,170,100,0.03);
}
body[data-style-theme="forest"] #hud-bar {
  border-top: 2px solid rgba(68,170,100,0.15);
}
body[data-style-theme="forest"] .inv-item:hover {
  background: linear-gradient(90deg, rgba(68,170,100,0.06), rgba(68,170,100,0) 70%);
  border-color: rgba(68,170,100,0.25);
}
body[data-style-theme="forest"] .inv-item.inv-equipped {
  border-left: 3px solid rgba(80,200,120,0.5);
  background: rgba(68,170,100,0.03);
}
body[data-style-theme="forest"] .chat-msg.from-npc {
  background: linear-gradient(135deg, rgba(68,170,100,0.05), rgba(40,120,60,0.02));
  border: 1px solid rgba(68,170,100,0.1);
  border-radius: 12px 12px 12px 4px;
}

/* --- GOTHIC dramatic --- */
body[data-style-theme="gothic"] #rpg-app {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(80,15,25,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(60,10,18,0.04) 0%, transparent 40%),
    linear-gradient(180deg, rgba(40,8,15,0.06) 0%, transparent 30%, transparent 70%, rgba(40,8,15,0.06) 100%);
}
body[data-style-theme="gothic"] .glass-panel {
  background: linear-gradient(135deg, rgba(30,18,26,0.50), rgba(24,14,20,0.50));
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(90,70,120,0.08);
}
body[data-style-theme="gothic"] #mini-map {
  border: 2px double rgba(80,60,110,0.3);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(0,0,0,0.25), inset 0 0 20px rgba(0,0,0,0.25);
}
body[data-style-theme="gothic"] #room-name {
  background: linear-gradient(135deg, rgba(90,70,120,0.1), rgba(80,15,25,0.05));
  text-shadow: 0 0 10px rgba(110,90,140,0.2);
}
body[data-style-theme="gothic"] .brand-name {
  background: linear-gradient(135deg, rgba(90,70,120,0.08), rgba(80,15,25,0.04));
  text-shadow: 0 0 10px rgba(110,90,140,0.15);
}
body[data-style-theme="gothic"] .stat-bar {
  background: rgba(80,60,110,0.14);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
body[data-style-theme="gothic"] .stat-bar .fill {
  box-shadow: none;
}
body[data-style-theme="gothic"] .msg-important {
  background: rgba(90,70,120,0.08);
  border-left: 3px double rgba(110,90,140,0.5);
}
body[data-style-theme="gothic"] .msg-combat {
  border-left: 2px double rgba(110,90,140,0.4);
  background: rgba(75,55,100,0.05);
}
body[data-style-theme="gothic"] #hud-bar {
  border-top: 3px double rgba(80,60,110,0.3);
}
body[data-style-theme="gothic"] .inv-item:hover {
  background: linear-gradient(90deg, rgba(90,70,120,0.08), rgba(90,70,120,0) 70%);
  border-color: rgba(90,70,120,0.3);
}
body[data-style-theme="gothic"] .inv-item.inv-equipped {
  border-left: 3px double rgba(110,90,140,0.5);
  background: rgba(90,70,120,0.04);
}
body[data-style-theme="gothic"] .chat-msg.from-npc {
  background: linear-gradient(135deg, rgba(80,60,110,0.06), rgba(60,10,18,0.03));
  border: 1px double rgba(80,60,110,0.15);
  border-radius: 2px;
}

/* --- ARCANE SANCTUM dramatic --- */
body[data-style-theme="arcane-sanctum"] #rpg-app {
  background:
    radial-gradient(circle at 30% 20%, rgba(45,212,191,0.04) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(45,212,191,0.03) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(20,160,140,0.02) 0%, transparent 50%);
}
body[data-style-theme="arcane-sanctum"] .glass-panel {
  background: linear-gradient(135deg, rgba(10,25,22,0.50), rgba(8,20,18,0.50));
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 1px rgba(45,212,191,0.15), inset 0 1px 0 rgba(45,212,191,0.06);
}
body[data-style-theme="arcane-sanctum"] #mini-map {
  border: 2px solid rgba(45,212,191,0.2);
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(45,212,191,0.06), inset 0 0 20px rgba(0,0,0,0.3);
}
body[data-style-theme="arcane-sanctum"] #room-name {
  background: linear-gradient(135deg, rgba(45,212,191,0.1), rgba(20,160,140,0.05));
  text-shadow: 0 0 15px rgba(45,212,191,0.25);
  box-shadow: 0 0 12px rgba(45,212,191,0.06);
}
body[data-style-theme="arcane-sanctum"] .brand-name {
  background: linear-gradient(135deg, rgba(45,212,191,0.08), rgba(20,160,140,0.04));
  text-shadow: 0 0 12px rgba(45,212,191,0.2);
}
body[data-style-theme="arcane-sanctum"] .stat-bar {
  background: rgba(45,212,191,0.06);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
body[data-style-theme="arcane-sanctum"] .stat-bar .fill {
  box-shadow: none;
}
body[data-style-theme="arcane-sanctum"] .msg-important {
  background: rgba(45,212,191,0.06);
  border-left-color: rgba(45,212,191,0.5);
}
body[data-style-theme="arcane-sanctum"] .msg-combat {
  border-left: 2px solid rgba(45,212,191,0.35);
  background: rgba(45,212,191,0.03);
}
body[data-style-theme="arcane-sanctum"] #hud-bar {
  border-top: 2px solid rgba(45,212,191,0.2);
}
body[data-style-theme="arcane-sanctum"] .inv-item:hover {
  background: linear-gradient(90deg, rgba(45,212,191,0.06), rgba(45,212,191,0) 70%);
  border-color: rgba(45,212,191,0.25);
}
body[data-style-theme="arcane-sanctum"] .inv-item.inv-equipped {
  border-left: 3px solid rgba(45,212,191,0.5);
  background: rgba(45,212,191,0.03);
}
body[data-style-theme="arcane-sanctum"] .chat-msg.from-npc {
  background: linear-gradient(135deg, rgba(45,212,191,0.05), rgba(20,160,140,0.02));
  border: 1px solid rgba(45,212,191,0.1);
  box-shadow: 0 0 8px rgba(45,212,191,0.04);
}

/* --- ELDRITCH dramatic --- */
body[data-style-theme="eldritch"] #rpg-app {
  background:
    radial-gradient(ellipse at 25% 35%, rgba(0,0,0,0.14) 0%, transparent 35%),
    radial-gradient(ellipse at 75% 65%, rgba(0,0,0,0.10) 0%, transparent 30%),
    radial-gradient(ellipse at 50% 90%, rgba(0,0,0,0.08) 0%, transparent 40%);
}
body[data-style-theme="eldritch"] .glass-panel {
  background: rgba(24,24,30,0.50);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.05);
}
body[data-style-theme="eldritch"] #mini-map {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
}
body[data-style-theme="eldritch"] #room-name {
  background: rgba(255,255,255,0.02);
  text-shadow: none;
  color: #909098;
}
body[data-style-theme="eldritch"] .brand-name {
  background: rgba(255,255,255,0.02);
  text-shadow: none;
  color: #909098;
}
body[data-style-theme="eldritch"] .char-name {
  background: rgba(255,255,255,0.02);
  text-shadow: none;
}
body[data-style-theme="eldritch"] .stat-bar {
  background: rgba(255,255,255,0.05);
  box-shadow: none;
}
body[data-style-theme="eldritch"] .stat-bar .fill {
  box-shadow: none;
  opacity: 0.8;
}
body[data-style-theme="eldritch"] .msg-important {
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(255,255,255,0.06);
  border-radius: 0;
}
body[data-style-theme="eldritch"] .msg-combat {
  border-left: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.06);
}
body[data-style-theme="eldritch"] #hud-bar {
  border-top: 1px solid rgba(255,255,255,0.04);
}
body[data-style-theme="eldritch"] .inv-item:hover {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
}
body[data-style-theme="eldritch"] .inv-item.inv-equipped {
  border-left: 2px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.01);
}
body[data-style-theme="eldritch"] .chat-msg.from-npc {
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 0;
}
body[data-style-theme="eldritch"] .chat-msg.from-player {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 0;
}
body[data-style-theme="eldritch"] .entities-title {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 0;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}
body[data-style-theme="eldritch"] .npc-name {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 0;
  font-family: 'Cormorant Garamond', serif;
}

/* --- CELESTIAL dramatic --- */
body[data-style-theme="celestial"] #rpg-app {
  background:
    radial-gradient(circle at 20% 15%, rgba(140,170,255,0.04) 0%, transparent 35%),
    radial-gradient(circle at 80% 85%, rgba(100,140,255,0.03) 0%, transparent 35%),
    radial-gradient(circle at 60% 40%, rgba(160,180,255,0.02) 0%, transparent 40%);
}
body[data-style-theme="celestial"] .glass-panel {
  background: linear-gradient(135deg, rgba(14,18,30,0.50), rgba(10,14,24,0.50));
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 1px rgba(160,180,255,0.12), inset 0 1px 0 rgba(160,180,255,0.05);
}
body[data-style-theme="celestial"] #mini-map {
  border: 2px solid rgba(160,180,255,0.15);
  border-radius: 12px;
  box-shadow: 0 0 16px rgba(140,170,255,0.05), inset 0 0 20px rgba(0,0,0,0.3);
}
body[data-style-theme="celestial"] #room-name {
  background: linear-gradient(135deg, rgba(160,180,255,0.08), rgba(120,150,255,0.04));
  text-shadow: 0 0 15px rgba(160,180,255,0.2);
  box-shadow: 0 0 10px rgba(140,170,255,0.05);
}
body[data-style-theme="celestial"] .brand-name {
  background: linear-gradient(135deg, rgba(160,180,255,0.06), rgba(120,150,255,0.03));
  text-shadow: 0 0 12px rgba(160,180,255,0.15);
}
body[data-style-theme="celestial"] .stat-bar {
  background: rgba(160,180,255,0.06);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
body[data-style-theme="celestial"] .stat-bar .fill {
  box-shadow: none;
}
body[data-style-theme="celestial"] .msg-important {
  background: rgba(160,180,255,0.05);
  border-left-color: rgba(160,180,255,0.45);
  border-radius: 0 14px 14px 0;
}
body[data-style-theme="celestial"] .msg-combat {
  border-left: 2px solid rgba(160,180,255,0.3);
  background: rgba(140,170,255,0.03);
}
body[data-style-theme="celestial"] #hud-bar {
  border-top: 2px solid rgba(160,180,255,0.15);
}
body[data-style-theme="celestial"] .inv-item:hover {
  background: linear-gradient(90deg, rgba(160,180,255,0.06), rgba(160,180,255,0) 70%);
  border-color: rgba(160,180,255,0.2);
}
body[data-style-theme="celestial"] .inv-item.inv-equipped {
  border-left: 3px solid rgba(160,180,255,0.4);
  background: rgba(140,170,255,0.03);
}
body[data-style-theme="celestial"] .chat-msg.from-npc {
  background: linear-gradient(135deg, rgba(160,180,255,0.04), rgba(120,150,255,0.02));
  border: 1px solid rgba(160,180,255,0.08);
  box-shadow: 0 0 8px rgba(140,170,255,0.03);
  border-radius: 14px;
}

/* Column separator glow effects per theme */
body[data-style-theme="runic"] #col-left { box-shadow: 1px 0 8px rgba(180,140,70,0.06); }
body[data-style-theme="runic"] #col-right { box-shadow: -1px 0 8px rgba(180,140,70,0.06); }
body[data-style-theme="forest"] #col-left { box-shadow: 1px 0 8px rgba(68,170,100,0.05); }
body[data-style-theme="forest"] #col-right { box-shadow: -1px 0 8px rgba(68,170,100,0.05); }
body[data-style-theme="gothic"] #col-left { box-shadow: 1px 0 6px rgba(0,0,0,0.18); }
body[data-style-theme="gothic"] #col-right { box-shadow: -1px 0 6px rgba(0,0,0,0.18); }
body[data-style-theme="arcane-sanctum"] #col-left { box-shadow: 1px 0 10px rgba(45,212,191,0.05); }
body[data-style-theme="arcane-sanctum"] #col-right { box-shadow: -1px 0 10px rgba(45,212,191,0.05); }
body[data-style-theme="celestial"] #col-left { box-shadow: 1px 0 10px rgba(140,170,255,0.04); }
body[data-style-theme="celestial"] #col-right { box-shadow: -1px 0 10px rgba(140,170,255,0.04); }

/* =============================================================================
   IN-GAME — Unique journal / output-scroll backgrounds per theme
   Только плавные градиенты, никаких repeating-linear, никаких сеток
   ============================================================================= */

/* RUNIC — тлеющие угли, тёплый янтарь по краям */
body[data-style-theme="runic"] #output-scroll {
  background:
    radial-gradient(ellipse 100% 30% at 50% 0%,   rgba(200,150,60,0.08)  0%, transparent 100%),
    radial-gradient(ellipse 40%  60% at 0%   50%,  rgba(180,120,40,0.06)  0%, transparent 100%),
    radial-gradient(ellipse 40%  60% at 100% 50%,  rgba(180,120,40,0.06)  0%, transparent 100%),
    radial-gradient(ellipse 100% 25% at 50% 100%,  rgba(160,100,30,0.07)  0%, transparent 100%),
    /* Рунические знаки */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cg stroke='rgba(200,160,60,0.05)' stroke-width='0.7' fill='none'%3E%3Cpath d='M30 15v18M24 22l6 5'/%3E%3Cpath d='M130 20v15l5-8'/%3E%3Cpath d='M210 35v12M205 38l10 4'/%3E%3Cpath d='M65 85v16M60 88l10 6'/%3E%3Cpath d='M170 78v14l-5-7'/%3E%3Cpath d='M235 95v10M230 98l10 3'/%3E%3Cpath d='M25 150v15M20 155l10 5'/%3E%3Cpath d='M115 142v18l6-9'/%3E%3Cpath d='M195 160v12M190 163l10 4'/%3E%3Cpath d='M50 210v14M45 214l10 5'/%3E%3Cpath d='M155 225v12l5-6'/%3E%3Cpath d='M228 215v15M223 220l10 4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, auto, auto, 250px 250px;
}
body[data-style-theme="runic"] #output-scroll::-webkit-scrollbar-thumb {
  background: rgba(180,140,70,0.25);
}

/* FOREST — свет сквозь кроны, живая тень */
body[data-style-theme="forest"] #output-scroll {
  background:
    radial-gradient(ellipse 70%  45% at 25%  0%,   rgba(80,180,60,0.08)  0%, transparent 100%),
    radial-gradient(ellipse 50%  40% at 80% 100%,  rgba(40,140,50,0.07)  0%, transparent 100%),
    radial-gradient(ellipse 90%  20% at 50%  50%,  rgba(30,100,35,0.04)  0%, transparent 100%),
    radial-gradient(ellipse 30%  80% at 5%   60%,  rgba(20,80,25,0.05)   0%, transparent 100%);
}
body[data-style-theme="forest"] #output-scroll::-webkit-scrollbar-thumb {
  background: rgba(68,170,100,0.2);
}

/* GOTHIC — кровь и тьма, тени ползут с краёв (осветлено) */
body[data-style-theme="gothic"] #output-scroll {
  background:
    radial-gradient(ellipse 60%  50% at 50%  0%,   rgba(90,75,120,0.13)  0%, transparent 100%),
    radial-gradient(ellipse 35%  70% at 0%   50%,  rgba(60,48,85,0.07)   0%, transparent 100%),
    radial-gradient(ellipse 35%  70% at 100% 50%,  rgba(60,48,85,0.07)   0%, transparent 100%),
    radial-gradient(ellipse 60%  35% at 50% 100%,  rgba(70,55,100,0.06)  0%, transparent 100%);
}
body[data-style-theme="gothic"] #output-scroll::-webkit-scrollbar-thumb {
  background: rgba(90,75,110,0.25);
}

/* ARCANE SANCTUM — звёздный туман, бирюзовая дымка */
body[data-style-theme="arcane-sanctum"] #output-scroll {
  background:
    radial-gradient(ellipse 80%  55% at 50%  0%,   rgba(45,212,191,0.09) 0%, transparent 100%),
    radial-gradient(ellipse 50%  50% at 15%  70%,  rgba(20,160,140,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 45%  45% at 85%  30%,  rgba(30,190,170,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 60%  25% at 50% 100%,  rgba(15,140,120,0.05)  0%, transparent 100%);
}
body[data-style-theme="arcane-sanctum"] #output-scroll::-webkit-scrollbar-thumb {
  background: rgba(45,212,191,0.2);
}

/* ELDRITCH — бездна поглощает, пустота без резких границ (осветлено) */
body[data-style-theme="eldritch"] #output-scroll {
  background:
    radial-gradient(ellipse 70%  60% at 20%  15%,  rgba(10,8,18,0.30)    0%, transparent 100%),
    radial-gradient(ellipse 60%  55% at 85%  80%,  rgba(8,6,16,0.22)     0%, transparent 100%),
    radial-gradient(ellipse 50%  40% at 55%  5%,   rgba(15,10,25,0.18)   0%, transparent 100%),
    radial-gradient(ellipse 80%  30% at 50%  50%,  rgba(60,50,80,0.06)   0%, transparent 100%);
}
body[data-style-theme="eldritch"] #output-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
}

/* CELESTIAL — лунный свет, ни зерна, только небо */
body[data-style-theme="celestial"] #output-scroll {
  background:
    radial-gradient(ellipse 90%  50% at 50%  0%,   rgba(147,197,253,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 40%  35% at 75%  5%,   rgba(180,210,255,0.05) 0%, transparent 100%),
    radial-gradient(ellipse 35%  45% at 15%  80%,  rgba(100,150,240,0.04) 0%, transparent 100%),
    radial-gradient(ellipse 60%  20% at 50% 100%,  rgba(80,130,220,0.04)  0%, transparent 100%);
}
body[data-style-theme="celestial"] #output-scroll::-webkit-scrollbar-thumb {
  background: rgba(160,180,255,0.2);
}
/* ============================================================
   WINTER — ледяной мир
   ============================================================ */

/* Chip */
.style-theme-chip[data-style-theme="winter"] {
  border-radius: 16px;
  border: 1px solid rgba(168,216,234,0.15);
}
.style-theme-chip[data-style-theme="winter"]::after {
  content: ''; position: absolute; top: 3px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(200,230,245,0.3);
  box-shadow: -6px 4px 0 1px rgba(168,216,234,0.15);
  transition: opacity 0.25s; opacity: 0.5;
}
.style-theme-chip[data-style-theme="winter"]:hover {
  border-color: rgba(168,216,234,0.35); color: #a8d8ea;
  background: radial-gradient(ellipse at 50% 20%, rgba(168,216,234,0.1) 0%, transparent 70%);
}
.style-theme-chip[data-style-theme="winter"]:hover::after { opacity: 1; }
.style-theme-chip[data-style-theme="winter"].active {
  border-color: rgba(168,216,234,0.45); color: #a8d8ea;
  background: radial-gradient(ellipse at 50% 20%, rgba(168,216,234,0.14) 0%, transparent 70%);
  box-shadow: 0 0 16px rgba(168,216,234,0.12), 0 0 4px rgba(168,216,234,0.2);
}
.style-theme-chip[data-style-theme="winter"].active::after { opacity: 1; background: rgba(168,216,234,0.5); }

/* Lobby dark */
body[data-style-theme="winter"] {
  background: #080c12;
  --lobby-gold: #a8d8ea;
  --lobby-secondary: #7cb8d4;
  --lobby-gold-dim: rgba(168,216,234,0.4);
  --lobby-radius: 16px;
  --lobby-radius-lg: 20px;
}
body[data-style-theme="winter"] .lobby-app {
  background: #080c12;
}
body[data-style-theme="winter"] .lobby-app::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(168,216,234,0.08), transparent 65%),
    radial-gradient(ellipse 40% 60% at 20% 40%, rgba(140,200,230,0.05), transparent),
    radial-gradient(ellipse 40% 60% at 80% 40%, rgba(120,190,220,0.05), transparent);
}
/* Мерцающий иней */
body[data-style-theme="winter"] .lobby-app::after {
  background-image:
    radial-gradient(1.5px 1.5px at 8% 15%, rgba(220,240,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 8%, rgba(200,230,250,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 12%, rgba(220,240,255,0.35) 0%, transparent 100%),
    radial-gradient(2px 2px at 68% 6%, rgba(180,220,245,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 18%, rgba(220,240,255,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 40%, rgba(200,230,250,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 35%, rgba(220,240,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 42%, rgba(200,230,250,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 55%, rgba(220,240,255,0.2) 0%, transparent 100%);
  opacity: 0.6;
  animation: celestialTwinkle 10s ease-in-out infinite;
}

body[data-style-theme="winter"] .lobby-header {
  background: linear-gradient(180deg, rgba(8,20,35,0.5), rgba(8,20,35,0));
  border-bottom: 2px solid rgba(168,216,234,0.2);
}
body[data-style-theme="winter"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent, rgba(168,216,234,0.3) 30%, rgba(200,230,245,0.5) 50%, rgba(168,216,234,0.3) 70%, transparent);
}
body[data-style-theme="winter"] .lobby-logo {
  font-family: 'IM Fell English SC', serif;
  color: #d0e8f4;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(168,216,234,0.6), 0 0 50px rgba(140,200,230,0.3), 0 2px 6px rgba(0,0,0,0.8);
}
body[data-style-theme="winter"] .lobby-logo::after {
  content: '❄ ✧ ❄'; font-size: 11px; letter-spacing: 10px;
  color: rgba(168,216,234,0.4);
}
body[data-style-theme="winter"] .lobby-card {
  background: linear-gradient(160deg, rgba(168,216,234,0.08) 0%, rgba(140,200,230,0.04) 40%, rgba(8,15,25,0.2) 100%);
  border: 2px solid rgba(168,216,234,0.2);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 15px rgba(168,216,234,0.06), inset 0 1px 0 rgba(220,240,255,0.1);
}
body[data-style-theme="winter"] .lobby-card::before {
  left: 10%; right: 10%; height: 3px; border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, transparent, rgba(168,216,234,0.4) 25%, rgba(200,230,245,0.6) 50%, rgba(168,216,234,0.4) 75%, transparent);
}
body[data-style-theme="winter"] .lobby-card:hover {
  border-color: rgba(168,216,234,0.4);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3), 0 0 30px rgba(168,216,234,0.1), inset 0 1px 0 rgba(220,240,255,0.15);
}
body[data-style-theme="winter"] .lobby-card::after {
  content: '❄'; position: absolute; bottom: 8px; right: 16px;
  font-size: 18px; color: rgba(168,216,234,0.15); pointer-events: none;
}
body[data-style-theme="winter"] .lobby-card-name { color: #c0dce8; text-shadow: 0 0 10px rgba(168,216,234,0.3); }
body[data-style-theme="winter"] .lobby-tab {
  font-family: 'IM Fell English SC', serif; border-radius: 12px 12px 0 0;
}
body[data-style-theme="winter"] .lobby-tab.active {
  border-bottom: 3px solid rgba(168,216,234,0.5); color: #b0d4e4;
  text-shadow: 0 0 12px rgba(168,216,234,0.4);
  background: linear-gradient(180deg, rgba(168,216,234,0.06), transparent);
}
body[data-style-theme="winter"] .lobby-tab.active::after { background: rgba(168,216,234,0.2); }
body[data-style-theme="winter"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(168,216,234,0.08), transparent);
}
body[data-style-theme="winter"] .lobby-btn.primary {
  background: linear-gradient(135deg, rgba(168,216,234,0.2) 0%, rgba(120,180,210,0.12) 100%);
  border: 2px solid rgba(168,216,234,0.35); color: #b8d8ea; border-radius: 20px;
  box-shadow: 0 0 12px rgba(168,216,234,0.1), inset 0 1px 0 rgba(220,240,255,0.08);
  text-shadow: 0 0 6px rgba(168,216,234,0.25);
}
body[data-style-theme="winter"] .lobby-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(168,216,234,0.3) 0%, rgba(140,200,230,0.2) 100%);
  border-color: rgba(168,216,234,0.55);
  box-shadow: 0 0 25px rgba(168,216,234,0.2), inset 0 1px 0 rgba(220,240,255,0.12);
  filter: none; transform: translateY(-1px);
}
body[data-style-theme="winter"] .lobby-btn.secondary {
  border: 2px solid rgba(168,216,234,0.2); border-radius: 20px;
  color: #a8d8ea; background: rgba(168,216,234,0.03);
}
body[data-style-theme="winter"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(168,216,234,0.35); background: rgba(168,216,234,0.06);
  box-shadow: 0 0 10px rgba(168,216,234,0.08);
}
body[data-style-theme="winter"] .lobby-input,
body[data-style-theme="winter"] .lobby-textarea,
body[data-style-theme="winter"] .lobby-select {
  border: 2px solid rgba(168,216,234,0.18); border-radius: 16px;
  background: rgba(168,216,234,0.04);
}
body[data-style-theme="winter"] .lobby-input:focus,
body[data-style-theme="winter"] .lobby-textarea:focus {
  border-color: rgba(168,216,234,0.4); box-shadow: 0 0 14px rgba(168,216,234,0.12);
}
body[data-style-theme="winter"] .lobby-card-badge { border-radius: 20px; }
body[data-style-theme="winter"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(168,216,234,0.25); border-radius: 10px;
}

/* In-game UI */
body[data-style-theme="winter"] #rpg-header {
  border-bottom: 2px solid rgba(168,216,234,0.18);
  box-shadow: 0 1px 0 rgba(168,216,234,0.06), 0 2px 16px rgba(140,200,230,0.04);
}
body[data-style-theme="winter"] #col-left { border-right: 2px solid rgba(168,216,234,0.12); }
body[data-style-theme="winter"] #col-right { border-left: 2px solid rgba(168,216,234,0.12); }
body[data-style-theme="winter"] .col-left-header { border-bottom: 2px solid rgba(168,216,234,0.12); }
body[data-style-theme="winter"] #room-name {
  border-radius: 14px; border: 2px solid rgba(168,216,234,0.18);
  box-shadow: 0 0 8px rgba(168,216,234,0.06);
}
body[data-style-theme="winter"] .brand-name {
  border-radius: 14px; border: 2px solid rgba(168,216,234,0.18);
  box-shadow: 0 0 8px rgba(168,216,234,0.06);
}
body[data-style-theme="winter"] #cmd-input {
  border-radius: 16px; border: 2px solid rgba(168,216,234,0.18);
  background: rgba(168,216,234,0.03);
}
body[data-style-theme="winter"] #cmd-input:focus {
  border-color: rgba(168,216,234,0.4); box-shadow: 0 0 12px rgba(168,216,234,0.12);
}
body[data-style-theme="winter"] #col-left::before {
  content: '❄'; position: absolute; bottom: 6px; right: 10px;
  font-size: 16px; color: rgba(168,216,234,0.12); pointer-events: none; z-index: 1;
}
body[data-style-theme="winter"] .journal-room-desc {
  border-left: 4px solid rgba(168,216,234,0.25); border-radius: 0 12px 12px 0;
}
body[data-style-theme="winter"] .stat-bar { border-radius: 10px; }
body[data-style-theme="winter"] .stat-bar .fill { border-radius: 10px; }
body[data-style-theme="winter"] #npc-chat-header { border-bottom: 2px solid rgba(168,216,234,0.12); }
body[data-style-theme="winter"] .glass-panel { border-radius: 16px; }

/* Extended in-game */
body[data-style-theme="winter"] .exit-btn { border-radius: 14px; border: 2px solid rgba(168,216,234,0.18); }
body[data-style-theme="winter"] .exit-btn:hover { border-color: rgba(168,216,234,0.4); box-shadow: 0 0 8px rgba(168,216,234,0.1); }
body[data-style-theme="winter"] .action-btn,
body[data-style-theme="winter"] .extra-btn,
body[data-style-theme="winter"] .compass-btn { border-radius: 14px; }
body[data-style-theme="winter"] .util-btn { border-radius: 14px; border: 1px solid rgba(168,216,234,0.12); }
body[data-style-theme="winter"] .inv-item { border-radius: 10px; }
body[data-style-theme="winter"] #npc-chat { border-radius: 16px; border: 2px solid rgba(168,216,234,0.12); box-shadow: 0 0 10px rgba(168,216,234,0.04); }
body[data-style-theme="winter"] #npc-chat-input { border-radius: 14px; border: 1px solid rgba(168,216,234,0.12); }

/* Dramatic */
body[data-style-theme="winter"] #rpg-app {
  background:
    radial-gradient(circle at 25% 15%, rgba(168,216,234,0.03) 0%, transparent 35%),
    radial-gradient(circle at 75% 85%, rgba(140,200,230,0.02) 0%, transparent 35%);
}
body[data-style-theme="winter"] .glass-panel {
  background: linear-gradient(135deg, rgba(12,18,28,0.50), rgba(8,14,22,0.50));
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 1px rgba(168,216,234,0.1), inset 0 1px 0 rgba(168,216,234,0.04);
}
body[data-style-theme="winter"] #mini-map {
  border: 2px solid rgba(168,216,234,0.12); border-radius: 12px;
  box-shadow: 0 0 14px rgba(168,216,234,0.04), inset 0 0 20px rgba(0,0,0,0.3);
}
body[data-style-theme="winter"] #room-name {
  background: linear-gradient(135deg, rgba(168,216,234,0.06), rgba(140,200,230,0.03));
  text-shadow: 0 0 12px rgba(168,216,234,0.15);
}
body[data-style-theme="winter"] .brand-name {
  background: linear-gradient(135deg, rgba(168,216,234,0.05), rgba(140,200,230,0.02));
  text-shadow: 0 0 10px rgba(168,216,234,0.12);
}
body[data-style-theme="winter"] .stat-bar { background: rgba(168,216,234,0.05); box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); }
body[data-style-theme="winter"] .stat-bar .fill { box-shadow: none; }
body[data-style-theme="winter"] .msg-important {
  background: rgba(168,216,234,0.04); border-left-color: rgba(168,216,234,0.4); border-radius: 0 14px 14px 0;
}
body[data-style-theme="winter"] .msg-combat { border-left: 2px solid rgba(168,216,234,0.25); background: rgba(168,216,234,0.02); }
body[data-style-theme="winter"] #hud-bar { border-top: 2px solid rgba(168,216,234,0.12); }
body[data-style-theme="winter"] .inv-item:hover {
  background: linear-gradient(90deg, rgba(168,216,234,0.05), rgba(168,216,234,0) 70%);
  border-color: rgba(168,216,234,0.18);
}
body[data-style-theme="winter"] .inv-item.inv-equipped { border-left: 3px solid rgba(168,216,234,0.35); background: rgba(168,216,234,0.02); }
body[data-style-theme="winter"] .chat-msg.from-npc {
  background: linear-gradient(135deg, rgba(168,216,234,0.03), rgba(140,200,230,0.01));
  border: 1px solid rgba(168,216,234,0.06); border-radius: 14px;
}
body[data-style-theme="winter"] #col-left { box-shadow: 1px 0 8px rgba(168,216,234,0.03); }
body[data-style-theme="winter"] #col-right { box-shadow: -1px 0 8px rgba(168,216,234,0.03); }


/* ============================================================
   COSMIC — глубокий космос, туманности
   ============================================================ */

/* Chip */
.style-theme-chip[data-style-theme="cosmic"] {
  border-radius: 14px;
  border: 1px solid rgba(192,132,252,0.15);
}
.style-theme-chip[data-style-theme="cosmic"]::after {
  content: ''; position: absolute; top: 5px; right: 7px;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(192,132,252,0.35);
  box-shadow: -7px 3px 0 1px rgba(168,85,247,0.2), -14px 6px 0 0 rgba(192,132,252,0.1);
  transition: opacity 0.25s; opacity: 0.5;
}
.style-theme-chip[data-style-theme="cosmic"]:hover {
  border-color: rgba(192,132,252,0.35); color: #c084fc;
  background: radial-gradient(ellipse at 50% 30%, rgba(192,132,252,0.1) 0%, transparent 70%);
}
.style-theme-chip[data-style-theme="cosmic"]:hover::after { opacity: 1; }
.style-theme-chip[data-style-theme="cosmic"].active {
  border-color: rgba(192,132,252,0.5); color: #c084fc;
  background: radial-gradient(ellipse at 50% 30%, rgba(192,132,252,0.15) 0%, transparent 70%);
  box-shadow: 0 0 18px rgba(192,132,252,0.15), 0 0 4px rgba(168,85,247,0.2);
}
.style-theme-chip[data-style-theme="cosmic"].active::after { opacity: 1; background: rgba(192,132,252,0.55); }

/* Lobby dark */
body[data-style-theme="cosmic"] {
  background: #110c1e;
  --lobby-gold: #c084fc;
  --lobby-secondary: #a855f7;
  --lobby-gold-dim: rgba(192,132,252,0.4);
  --lobby-radius: 14px;
  --lobby-radius-lg: 18px;
}
body[data-style-theme="cosmic"] .lobby-app { background: #110c1e; }
body[data-style-theme="cosmic"] .lobby-app::before {
  background:
    radial-gradient(ellipse 55% 50% at 25% 20%, rgba(130,65,210,0.16), transparent 60%),
    radial-gradient(ellipse 45% 55% at 75% 50%, rgba(190,90,230,0.10), transparent 55%),
    radial-gradient(ellipse 65% 45% at 50% 80%, rgba(90,45,170,0.12), transparent 60%);
}
/* Космические туманности — глубокие облака */
body[data-style-theme="cosmic"] .lobby-app::after {
  background:
    radial-gradient(ellipse 35% 30% at 15% 20%, rgba(160,100,240,0.12), transparent),
    radial-gradient(ellipse 30% 35% at 75% 15%, rgba(130,65,210,0.10), transparent),
    radial-gradient(ellipse 25% 40% at 85% 50%, rgba(190,110,230,0.08), transparent),
    radial-gradient(ellipse 40% 25% at 40% 75%, rgba(150,85,210,0.10), transparent),
    radial-gradient(ellipse 30% 25% at 10% 65%, rgba(110,55,190,0.08), transparent),
    radial-gradient(ellipse 35% 30% at 55% 35%, rgba(192,132,252,0.06), transparent);
  opacity: 1;
}

body[data-style-theme="cosmic"] .lobby-header {
  background: linear-gradient(180deg, rgba(10,6,20,0.5), rgba(10,6,20,0));
  border-bottom: 2px solid rgba(192,132,252,0.2);
}
body[data-style-theme="cosmic"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent, rgba(192,132,252,0.3) 30%, rgba(220,180,255,0.5) 50%, rgba(192,132,252,0.3) 70%, transparent);
}
body[data-style-theme="cosmic"] .lobby-logo {
  font-family: 'Metamorphous', serif;
  color: #dcc8ff;
  letter-spacing: 4px;
  text-shadow: 0 0 25px rgba(192,132,252,0.6), 0 0 60px rgba(168,85,247,0.3), 0 2px 6px rgba(0,0,0,0.8);
}
body[data-style-theme="cosmic"] .lobby-logo::after {
  content: '✧ ⋆ ✧'; font-size: 11px; letter-spacing: 10px;
  color: rgba(192,132,252,0.4);
}
body[data-style-theme="cosmic"] .lobby-card {
  background: linear-gradient(160deg, rgba(192,132,252,0.08) 0%, rgba(120,60,200,0.04) 40%, rgba(6,4,16,0.2) 100%);
  border: 2px solid rgba(192,132,252,0.2);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 0 15px rgba(192,132,252,0.06), inset 0 1px 0 rgba(230,210,255,0.08);
}
body[data-style-theme="cosmic"] .lobby-card::before {
  left: 10%; right: 10%; height: 3px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.4) 25%, rgba(220,180,255,0.6) 50%, rgba(192,132,252,0.4) 75%, transparent);
}
body[data-style-theme="cosmic"] .lobby-card:hover {
  border-color: rgba(192,132,252,0.4);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3), 0 0 30px rgba(192,132,252,0.1), inset 0 1px 0 rgba(230,210,255,0.12);
}
body[data-style-theme="cosmic"] .lobby-card::after {
  content: '✧'; position: absolute; bottom: 8px; right: 16px;
  font-size: 18px; color: rgba(192,132,252,0.15); pointer-events: none;
}
body[data-style-theme="cosmic"] .lobby-card-name { color: #d0c0f0; text-shadow: 0 0 10px rgba(192,132,252,0.3); }
body[data-style-theme="cosmic"] .lobby-tab {
  font-family: 'Metamorphous', serif; border-radius: 10px 10px 0 0;
}
body[data-style-theme="cosmic"] .lobby-tab.active {
  border-bottom: 3px solid rgba(192,132,252,0.55); color: #c8b0f0;
  text-shadow: 0 0 14px rgba(192,132,252,0.4);
  background: linear-gradient(180deg, rgba(192,132,252,0.07), transparent);
}
body[data-style-theme="cosmic"] .lobby-tab.active::after { background: rgba(192,132,252,0.22); }
body[data-style-theme="cosmic"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(192,132,252,0.08), transparent);
}
body[data-style-theme="cosmic"] .lobby-btn.primary {
  background: linear-gradient(135deg, rgba(192,132,252,0.22) 0%, rgba(120,60,200,0.12) 100%);
  border: 2px solid rgba(192,132,252,0.38); color: #c8b0f0; border-radius: 18px;
  box-shadow: 0 0 12px rgba(192,132,252,0.12), inset 0 1px 0 rgba(230,210,255,0.08);
  text-shadow: 0 0 6px rgba(192,132,252,0.25);
}
body[data-style-theme="cosmic"] .lobby-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(192,132,252,0.32) 0%, rgba(140,80,220,0.2) 100%);
  border-color: rgba(192,132,252,0.55);
  box-shadow: 0 0 25px rgba(192,132,252,0.25), inset 0 1px 0 rgba(230,210,255,0.12);
  filter: none; transform: translateY(-1px);
}
body[data-style-theme="cosmic"] .lobby-btn.secondary {
  border: 2px solid rgba(192,132,252,0.22); border-radius: 18px;
  color: #c084fc; background: rgba(192,132,252,0.03);
}
body[data-style-theme="cosmic"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(192,132,252,0.38); background: rgba(192,132,252,0.06);
  box-shadow: 0 0 10px rgba(192,132,252,0.1);
}
body[data-style-theme="cosmic"] .lobby-input,
body[data-style-theme="cosmic"] .lobby-textarea,
body[data-style-theme="cosmic"] .lobby-select {
  border: 2px solid rgba(192,132,252,0.18); border-radius: 14px;
  background: rgba(192,132,252,0.04);
}
body[data-style-theme="cosmic"] .lobby-input:focus,
body[data-style-theme="cosmic"] .lobby-textarea:focus {
  border-color: rgba(192,132,252,0.42); box-shadow: 0 0 14px rgba(192,132,252,0.12);
}
body[data-style-theme="cosmic"] .lobby-card-badge { border-radius: 18px; }
body[data-style-theme="cosmic"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(192,132,252,0.25); border-radius: 10px;
}

/* In-game UI */
body[data-style-theme="cosmic"] #rpg-header {
  border-bottom: 2px solid rgba(192,132,252,0.18);
  box-shadow: 0 1px 0 rgba(192,132,252,0.06), 0 2px 16px rgba(120,60,200,0.04);
}
body[data-style-theme="cosmic"] #col-left { border-right: 2px solid rgba(192,132,252,0.12); }
body[data-style-theme="cosmic"] #col-right { border-left: 2px solid rgba(192,132,252,0.12); }
body[data-style-theme="cosmic"] .col-left-header { border-bottom: 2px solid rgba(192,132,252,0.12); }
body[data-style-theme="cosmic"] #room-name {
  border-radius: 12px; border: 2px solid rgba(192,132,252,0.18);
  box-shadow: 0 0 8px rgba(192,132,252,0.06);
}
body[data-style-theme="cosmic"] .brand-name {
  border-radius: 12px; border: 2px solid rgba(192,132,252,0.18);
  box-shadow: 0 0 8px rgba(192,132,252,0.06);
}
body[data-style-theme="cosmic"] #cmd-input {
  border-radius: 14px; border: 2px solid rgba(192,132,252,0.18);
  background: rgba(192,132,252,0.03);
}
body[data-style-theme="cosmic"] #cmd-input:focus {
  border-color: rgba(192,132,252,0.42); box-shadow: 0 0 12px rgba(192,132,252,0.12);
}
body[data-style-theme="cosmic"] #col-left::before {
  content: '✧'; position: absolute; bottom: 6px; right: 10px;
  font-size: 16px; color: rgba(192,132,252,0.12); pointer-events: none; z-index: 1;
}
body[data-style-theme="cosmic"] .journal-room-desc {
  border-left: 4px solid rgba(192,132,252,0.28); border-radius: 0 10px 10px 0;
}
body[data-style-theme="cosmic"] .stat-bar { border-radius: 8px; }
body[data-style-theme="cosmic"] .stat-bar .fill { border-radius: 8px; }
body[data-style-theme="cosmic"] #npc-chat-header { border-bottom: 2px solid rgba(192,132,252,0.12); }
body[data-style-theme="cosmic"] .glass-panel { border-radius: 14px; }

/* Extended in-game */
body[data-style-theme="cosmic"] .exit-btn { border-radius: 12px; border: 2px solid rgba(192,132,252,0.18); }
body[data-style-theme="cosmic"] .exit-btn:hover { border-color: rgba(192,132,252,0.42); box-shadow: 0 0 8px rgba(192,132,252,0.1); }
body[data-style-theme="cosmic"] .action-btn,
body[data-style-theme="cosmic"] .extra-btn,
body[data-style-theme="cosmic"] .compass-btn { border-radius: 12px; }
body[data-style-theme="cosmic"] .util-btn { border-radius: 12px; border: 1px solid rgba(192,132,252,0.12); }
body[data-style-theme="cosmic"] .inv-item { border-radius: 8px; }
body[data-style-theme="cosmic"] #npc-chat { border-radius: 14px; border: 2px solid rgba(192,132,252,0.12); box-shadow: 0 0 10px rgba(192,132,252,0.04); }
body[data-style-theme="cosmic"] #npc-chat-input { border-radius: 12px; border: 1px solid rgba(192,132,252,0.12); }

/* Dramatic — глубина космоса */
body[data-style-theme="cosmic"] #rpg-app {
  background:
    radial-gradient(circle at 25% 20%, rgba(140,70,220,0.10) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(200,100,240,0.07) 0%, transparent 35%),
    radial-gradient(circle at 50% 45%, rgba(192,132,252,0.06) 0%, transparent 45%),
    radial-gradient(circle at 10% 70%, rgba(110,55,190,0.06) 0%, transparent 30%),
    radial-gradient(circle at 65% 15%, rgba(170,85,230,0.05) 0%, transparent 30%);
}
body[data-style-theme="cosmic"] .glass-panel {
  background: linear-gradient(135deg, rgba(14,8,24,0.50), rgba(8,5,18,0.50));
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 1px rgba(192,132,252,0.12), inset 0 1px 0 rgba(192,132,252,0.06);
}
body[data-style-theme="cosmic"] #mini-map {
  border: 2px solid rgba(192,132,252,0.12); border-radius: 10px;
  box-shadow: 0 0 14px rgba(192,132,252,0.04), inset 0 0 20px rgba(0,0,0,0.35);
}
body[data-style-theme="cosmic"] #room-name {
  background: linear-gradient(135deg, rgba(192,132,252,0.06), rgba(120,60,200,0.03));
  text-shadow: 0 0 14px rgba(192,132,252,0.18);
}
body[data-style-theme="cosmic"] .brand-name {
  background: linear-gradient(135deg, rgba(192,132,252,0.05), rgba(120,60,200,0.02));
  text-shadow: 0 0 10px rgba(192,132,252,0.14);
}
body[data-style-theme="cosmic"] .stat-bar { background: rgba(192,132,252,0.05); box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); }
body[data-style-theme="cosmic"] .stat-bar .fill { box-shadow: none; }
body[data-style-theme="cosmic"] .msg-important {
  background: rgba(192,132,252,0.04); border-left-color: rgba(192,132,252,0.42); border-radius: 0 12px 12px 0;
}
body[data-style-theme="cosmic"] .msg-combat { border-left: 2px solid rgba(192,132,252,0.28); background: rgba(192,132,252,0.02); }
body[data-style-theme="cosmic"] #hud-bar { border-top: 2px solid rgba(192,132,252,0.12); }
body[data-style-theme="cosmic"] .inv-item:hover {
  background: linear-gradient(90deg, rgba(192,132,252,0.05), rgba(192,132,252,0) 70%);
  border-color: rgba(192,132,252,0.18);
}
body[data-style-theme="cosmic"] .inv-item.inv-equipped { border-left: 3px solid rgba(192,132,252,0.38); background: rgba(192,132,252,0.02); }
body[data-style-theme="cosmic"] .chat-msg.from-npc {
  background: linear-gradient(135deg, rgba(192,132,252,0.03), rgba(120,60,200,0.01));
  border: 1px solid rgba(192,132,252,0.06); border-radius: 12px;
}
body[data-style-theme="cosmic"] #col-left { box-shadow: 1px 0 8px rgba(192,132,252,0.03); }
body[data-style-theme="cosmic"] #col-right { box-shadow: -1px 0 8px rgba(192,132,252,0.03); }


/* ============================================================
   SANDSTORM — горячие пески, древние руины
   ============================================================ */

/* Chip */
.style-theme-chip[data-style-theme="sandstorm"] {
  border-radius: 4px;
  border: 1px solid rgba(212,160,96,0.2);
}
.style-theme-chip[data-style-theme="sandstorm"]::after {
  content: ''; position: absolute; bottom: 3px; left: 5px; right: 5px;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,160,96,0.3), rgba(212,160,96,0.05));
  transition: opacity 0.25s; opacity: 0.5;
}
.style-theme-chip[data-style-theme="sandstorm"]:hover {
  border-color: rgba(212,160,96,0.4); color: #d4a060;
  background: linear-gradient(180deg, rgba(212,160,96,0.08) 0%, transparent 70%);
}
.style-theme-chip[data-style-theme="sandstorm"]:hover::after { opacity: 1; }
.style-theme-chip[data-style-theme="sandstorm"].active {
  border-color: rgba(212,160,96,0.5); color: #d4a060;
  background: linear-gradient(180deg, rgba(212,160,96,0.12) 0%, transparent 70%);
  box-shadow: 0 0 14px rgba(212,160,96,0.1), 0 0 3px rgba(212,160,96,0.18);
}
.style-theme-chip[data-style-theme="sandstorm"].active::after { opacity: 1; background: linear-gradient(90deg, rgba(212,160,96,0.5), rgba(212,160,96,0.1)); }

/* Lobby dark */
body[data-style-theme="sandstorm"] {
  background: #0e0a06;
  --lobby-gold: #d4a060;
  --lobby-secondary: #c09050;
  --lobby-gold-dim: rgba(212,160,96,0.4);
  --lobby-radius: 4px;
  --lobby-radius-lg: 6px;
}
body[data-style-theme="sandstorm"] .lobby-app { background: #0e0a06; }
body[data-style-theme="sandstorm"] .lobby-app::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,160,96,0.06), transparent 60%),
    radial-gradient(ellipse 50% 60% at 20% 60%, rgba(160,100,40,0.04), transparent 55%),
    radial-gradient(ellipse 50% 60% at 80% 60%, rgba(140,90,30,0.04), transparent 55%);
}
/* Песчаная дымка */
body[data-style-theme="sandstorm"] .lobby-app::after {
  background:
    radial-gradient(ellipse 100% 30% at 50% 100%, rgba(212,160,96,0.06), transparent),
    radial-gradient(ellipse 80% 20% at 30% 80%, rgba(180,120,50,0.04), transparent),
    radial-gradient(ellipse 80% 20% at 70% 85%, rgba(160,100,40,0.04), transparent);
  opacity: 0.8;
}

body[data-style-theme="sandstorm"] .lobby-header {
  background: linear-gradient(180deg, rgba(18,12,6,0.5), rgba(18,12,6,0));
  border-bottom: 2px solid rgba(212,160,96,0.2);
}
body[data-style-theme="sandstorm"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent, rgba(212,160,96,0.25) 30%, rgba(240,200,140,0.4) 50%, rgba(212,160,96,0.25) 70%, transparent);
}
body[data-style-theme="sandstorm"] .lobby-logo {
  font-family: 'Almendra', serif;
  color: #e0c090;
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(212,160,96,0.5), 0 0 50px rgba(180,120,50,0.25), 0 2px 6px rgba(0,0,0,0.8);
}
body[data-style-theme="sandstorm"] .lobby-logo::after {
  content: '☥ ◆ ☥'; font-size: 11px; letter-spacing: 10px;
  color: rgba(212,160,96,0.35);
}
body[data-style-theme="sandstorm"] .lobby-card {
  background: linear-gradient(160deg, rgba(212,160,96,0.06) 0%, rgba(160,100,40,0.03) 40%, rgba(14,10,6,0.2) 100%);
  border: 2px solid rgba(212,160,96,0.2);
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(240,200,140,0.06);
}
body[data-style-theme="sandstorm"] .lobby-card::before {
  left: 0; right: 0; height: 3px; border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, rgba(212,160,96,0.15), rgba(240,200,140,0.3), rgba(212,160,96,0.15));
}
body[data-style-theme="sandstorm"] .lobby-card:hover {
  border-color: rgba(212,160,96,0.38);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(240,200,140,0.1);
}
body[data-style-theme="sandstorm"] .lobby-card::after {
  content: '☥'; position: absolute; bottom: 8px; right: 16px;
  font-size: 18px; color: rgba(212,160,96,0.12); pointer-events: none;
}
body[data-style-theme="sandstorm"] .lobby-card-name { color: #d0b080; text-shadow: 0 0 8px rgba(212,160,96,0.25); }
body[data-style-theme="sandstorm"] .lobby-tab {
  font-family: 'Almendra', serif; border-radius: 4px 4px 0 0;
}
body[data-style-theme="sandstorm"] .lobby-tab.active {
  border-bottom: 3px solid rgba(212,160,96,0.5); color: #c8a070;
  text-shadow: 0 0 10px rgba(212,160,96,0.35);
  background: linear-gradient(180deg, rgba(212,160,96,0.05), transparent);
}
body[data-style-theme="sandstorm"] .lobby-tab.active::after { background: rgba(212,160,96,0.18); }
body[data-style-theme="sandstorm"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(212,160,96,0.06), transparent);
}
body[data-style-theme="sandstorm"] .lobby-btn.primary {
  background: linear-gradient(135deg, rgba(212,160,96,0.18) 0%, rgba(160,100,40,0.1) 100%);
  border: 2px solid rgba(212,160,96,0.35); color: #d0b080; border-radius: 4px;
  box-shadow: 0 0 10px rgba(212,160,96,0.08), inset 0 1px 0 rgba(240,200,140,0.06);
  text-shadow: 0 0 6px rgba(212,160,96,0.2);
}
body[data-style-theme="sandstorm"] .lobby-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(212,160,96,0.28) 0%, rgba(180,120,50,0.18) 100%);
  border-color: rgba(212,160,96,0.5);
  box-shadow: 0 0 20px rgba(212,160,96,0.18), inset 0 1px 0 rgba(240,200,140,0.1);
  filter: none; transform: translateY(-1px);
}
body[data-style-theme="sandstorm"] .lobby-btn.secondary {
  border: 2px solid rgba(212,160,96,0.2); border-radius: 4px;
  color: #d4a060; background: rgba(212,160,96,0.03);
}
body[data-style-theme="sandstorm"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(212,160,96,0.35); background: rgba(212,160,96,0.06);
  box-shadow: 0 0 8px rgba(212,160,96,0.08);
}
body[data-style-theme="sandstorm"] .lobby-input,
body[data-style-theme="sandstorm"] .lobby-textarea,
body[data-style-theme="sandstorm"] .lobby-select {
  border: 2px solid rgba(212,160,96,0.18); border-radius: 4px;
  background: rgba(212,160,96,0.04);
}
body[data-style-theme="sandstorm"] .lobby-input:focus,
body[data-style-theme="sandstorm"] .lobby-textarea:focus {
  border-color: rgba(212,160,96,0.4); box-shadow: 0 0 12px rgba(212,160,96,0.1);
}
body[data-style-theme="sandstorm"] .lobby-card-badge { border-radius: 4px; }
body[data-style-theme="sandstorm"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(212,160,96,0.25); border-radius: 2px;
}

/* In-game UI */
body[data-style-theme="sandstorm"] #rpg-header {
  border-bottom: 2px solid rgba(212,160,96,0.18);
  box-shadow: 0 1px 0 rgba(212,160,96,0.06);
}
body[data-style-theme="sandstorm"] #col-left { border-right: 2px solid rgba(212,160,96,0.12); }
body[data-style-theme="sandstorm"] #col-right { border-left: 2px solid rgba(212,160,96,0.12); }
body[data-style-theme="sandstorm"] .col-left-header { border-bottom: 2px solid rgba(212,160,96,0.12); }
body[data-style-theme="sandstorm"] #room-name {
  border-radius: 4px; border: 2px solid rgba(212,160,96,0.18);
}
body[data-style-theme="sandstorm"] .brand-name {
  border-radius: 4px; border: 2px solid rgba(212,160,96,0.18);
}
body[data-style-theme="sandstorm"] #cmd-input {
  border-radius: 4px; border: 2px solid rgba(212,160,96,0.18);
  background: rgba(212,160,96,0.03);
}
body[data-style-theme="sandstorm"] #cmd-input:focus {
  border-color: rgba(212,160,96,0.4); box-shadow: 0 0 10px rgba(212,160,96,0.1);
}
body[data-style-theme="sandstorm"] #col-left::before {
  content: '☥'; position: absolute; bottom: 6px; right: 10px;
  font-size: 16px; color: rgba(212,160,96,0.1); pointer-events: none; z-index: 1;
}
body[data-style-theme="sandstorm"] .journal-room-desc {
  border-left: 4px solid rgba(212,160,96,0.25); border-radius: 0 4px 4px 0;
}
body[data-style-theme="sandstorm"] .stat-bar { border-radius: 2px; }
body[data-style-theme="sandstorm"] .stat-bar .fill { border-radius: 2px; }
body[data-style-theme="sandstorm"] #npc-chat-header { border-bottom: 2px solid rgba(212,160,96,0.12); }
body[data-style-theme="sandstorm"] .glass-panel { border-radius: 4px; }

/* Extended in-game */
body[data-style-theme="sandstorm"] .exit-btn { border-radius: 4px; border: 2px solid rgba(212,160,96,0.18); }
body[data-style-theme="sandstorm"] .exit-btn:hover { border-color: rgba(212,160,96,0.4); box-shadow: 0 0 6px rgba(212,160,96,0.1); }
body[data-style-theme="sandstorm"] .action-btn,
body[data-style-theme="sandstorm"] .extra-btn,
body[data-style-theme="sandstorm"] .compass-btn { border-radius: 4px; }
body[data-style-theme="sandstorm"] .util-btn { border-radius: 4px; border: 1px solid rgba(212,160,96,0.12); }
body[data-style-theme="sandstorm"] .inv-item { border-radius: 2px; }
body[data-style-theme="sandstorm"] #npc-chat { border-radius: 4px; border: 2px solid rgba(212,160,96,0.12); }
body[data-style-theme="sandstorm"] #npc-chat-input { border-radius: 4px; border: 1px solid rgba(212,160,96,0.12); }

/* Dramatic */
body[data-style-theme="sandstorm"] #rpg-app {
  background:
    radial-gradient(circle at 50% 100%, rgba(212,160,96,0.04) 0%, transparent 40%),
    radial-gradient(circle at 20% 30%, rgba(180,120,50,0.02) 0%, transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(160,100,40,0.02) 0%, transparent 35%);
}
body[data-style-theme="sandstorm"] .glass-panel {
  background: linear-gradient(135deg, rgba(18,14,8,0.50), rgba(12,8,4,0.50));
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(212,160,96,0.04);
}
body[data-style-theme="sandstorm"] #mini-map {
  border: 2px solid rgba(212,160,96,0.12); border-radius: 4px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}
body[data-style-theme="sandstorm"] #room-name {
  background: linear-gradient(135deg, rgba(212,160,96,0.06), rgba(180,120,50,0.03));
  text-shadow: 0 0 10px rgba(212,160,96,0.15);
}
body[data-style-theme="sandstorm"] .brand-name {
  background: linear-gradient(135deg, rgba(212,160,96,0.04), rgba(180,120,50,0.02));
  text-shadow: 0 0 8px rgba(212,160,96,0.12);
}
body[data-style-theme="sandstorm"] .stat-bar { background: rgba(212,160,96,0.05); box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); }
body[data-style-theme="sandstorm"] .stat-bar .fill { box-shadow: none; }
body[data-style-theme="sandstorm"] .msg-important {
  background: rgba(212,160,96,0.04); border-left-color: rgba(212,160,96,0.4); border-radius: 0 4px 4px 0;
}
body[data-style-theme="sandstorm"] .msg-combat { border-left: 2px solid rgba(212,160,96,0.25); background: rgba(212,160,96,0.02); }
body[data-style-theme="sandstorm"] #hud-bar { border-top: 2px solid rgba(212,160,96,0.12); }
body[data-style-theme="sandstorm"] .inv-item:hover {
  background: linear-gradient(90deg, rgba(212,160,96,0.05), rgba(212,160,96,0) 70%);
  border-color: rgba(212,160,96,0.18);
}
body[data-style-theme="sandstorm"] .inv-item.inv-equipped { border-left: 3px solid rgba(212,160,96,0.35); background: rgba(212,160,96,0.02); }
body[data-style-theme="sandstorm"] .chat-msg.from-npc {
  background: linear-gradient(135deg, rgba(212,160,96,0.03), rgba(180,120,50,0.01));
  border: 1px solid rgba(212,160,96,0.06); border-radius: 4px;
}
body[data-style-theme="sandstorm"] #col-left { box-shadow: 1px 0 6px rgba(0,0,0,0.25); }
body[data-style-theme="sandstorm"] #col-right { box-shadow: -1px 0 6px rgba(0,0,0,0.25); }

/* ============================================================
   VOLCANIC — раскалённая лава, огненные недра
   ============================================================ */

/* Chip */
.style-theme-chip[data-style-theme="volcanic"] {
  border-radius: 3px;
  border: 1px solid rgba(232,80,32,0.2);
}
.style-theme-chip[data-style-theme="volcanic"]::after {
  content: ''; position: absolute; bottom: 3px; left: 5px; right: 5px;
  height: 2px;
  background: linear-gradient(90deg, rgba(232,80,32,0.4), rgba(208,64,24,0.1));
  transition: opacity 0.25s; opacity: 0.5;
}
.style-theme-chip[data-style-theme="volcanic"]:hover {
  border-color: rgba(232,80,32,0.4); color: #e85020;
  background: linear-gradient(180deg, rgba(232,80,32,0.1) 0%, transparent 70%);
}
.style-theme-chip[data-style-theme="volcanic"]:hover::after { opacity: 1; }
.style-theme-chip[data-style-theme="volcanic"].active {
  border-color: rgba(232,80,32,0.5); color: #e85020;
  background: linear-gradient(180deg, rgba(232,80,32,0.14) 0%, transparent 70%);
  box-shadow: 0 0 14px rgba(232,80,32,0.12), 0 0 3px rgba(232,80,32,0.2);
}
.style-theme-chip[data-style-theme="volcanic"].active::after { opacity: 1; background: linear-gradient(90deg, rgba(232,80,32,0.55), rgba(208,64,24,0.15)); }

/* Lobby dark */
body[data-style-theme="volcanic"] {
  background: #0c0404;
  --lobby-gold: #e85020;
  --lobby-secondary: #d04018;
  --lobby-gold-dim: rgba(232,80,32,0.4);
  --lobby-radius: 3px;
  --lobby-radius-lg: 6px;
}
body[data-style-theme="volcanic"] .lobby-app { background: #0c0404; }
body[data-style-theme="volcanic"] .lobby-app::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(232,80,32,0.08), transparent 60%),
    radial-gradient(ellipse 50% 60% at 20% 40%, rgba(180,40,10,0.04), transparent 55%),
    radial-gradient(ellipse 50% 60% at 80% 40%, rgba(160,30,8,0.04), transparent 55%);
}
/* Тёмный дым сверху */
body[data-style-theme="volcanic"] .lobby-app::after {
  background:
    radial-gradient(ellipse 100% 40% at 50% 0%, rgba(20,8,4,0.15), transparent),
    radial-gradient(ellipse 80% 30% at 30% 100%, rgba(232,80,32,0.06), transparent),
    radial-gradient(ellipse 80% 30% at 70% 100%, rgba(208,64,24,0.05), transparent);
  opacity: 0.8;
}

body[data-style-theme="volcanic"] .lobby-header {
  background: linear-gradient(180deg, rgba(12,4,4,0.5), rgba(12,4,4,0));
  border-bottom: 2px solid rgba(232,80,32,0.2);
}
body[data-style-theme="volcanic"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent, rgba(232,80,32,0.3) 30%, rgba(255,120,50,0.45) 50%, rgba(232,80,32,0.3) 70%, transparent);
}
body[data-style-theme="volcanic"] .lobby-logo {
  font-family: 'Almendra', serif;
  color: #ff8040;
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(232,80,32,0.5), 0 0 50px rgba(180,40,10,0.3), 0 2px 6px rgba(0,0,0,0.8);
}
body[data-style-theme="volcanic"] .lobby-logo::after {
  content: '\2666 \25C6 \2666'; font-size: 11px; letter-spacing: 10px;
  color: rgba(232,80,32,0.35);
}
body[data-style-theme="volcanic"] .lobby-card {
  background: linear-gradient(160deg, rgba(232,80,32,0.07) 0%, rgba(180,40,10,0.03) 40%, rgba(12,4,4,0.2) 100%);
  border: 2px solid rgba(232,80,32,0.2);
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,120,50,0.06);
}
body[data-style-theme="volcanic"] .lobby-card::before {
  left: 0; right: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, rgba(232,80,32,0.2), rgba(255,120,50,0.35), rgba(232,80,32,0.2));
}
body[data-style-theme="volcanic"] .lobby-card:hover {
  border-color: rgba(232,80,32,0.4);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,120,50,0.1);
}
body[data-style-theme="volcanic"] .lobby-card::after {
  content: '\2727'; position: absolute; bottom: 8px; right: 16px;
  font-size: 18px; color: rgba(232,80,32,0.12); pointer-events: none;
}
body[data-style-theme="volcanic"] .lobby-card-name { color: #ff8040; text-shadow: 0 0 8px rgba(232,80,32,0.3); }
body[data-style-theme="volcanic"] .lobby-tab {
  font-family: 'Almendra', serif; border-radius: 3px 3px 0 0;
}
body[data-style-theme="volcanic"] .lobby-tab.active {
  border-bottom: 3px solid rgba(232,80,32,0.55); color: #e06030;
  text-shadow: 0 0 10px rgba(232,80,32,0.4);
  background: linear-gradient(180deg, rgba(232,80,32,0.06), transparent);
}
body[data-style-theme="volcanic"] .lobby-tab.active::after { background: rgba(232,80,32,0.2); }
body[data-style-theme="volcanic"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(232,80,32,0.08), transparent);
}
body[data-style-theme="volcanic"] .lobby-btn.primary {
  background: linear-gradient(135deg, rgba(232,80,32,0.2) 0%, rgba(180,40,10,0.12) 100%);
  border: 2px solid rgba(232,80,32,0.38); color: #ff8040; border-radius: 3px;
  box-shadow: 0 0 10px rgba(232,80,32,0.1), inset 0 1px 0 rgba(255,120,50,0.06);
  text-shadow: 0 0 6px rgba(232,80,32,0.25);
}
body[data-style-theme="volcanic"] .lobby-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(232,80,32,0.3) 0%, rgba(208,64,24,0.2) 100%);
  border-color: rgba(232,80,32,0.55);
  box-shadow: 0 0 20px rgba(232,80,32,0.2), inset 0 1px 0 rgba(255,120,50,0.12);
  filter: none; transform: translateY(-1px);
}
body[data-style-theme="volcanic"] .lobby-btn.secondary {
  border: 2px solid rgba(232,80,32,0.2); border-radius: 3px;
  color: #e85020; background: rgba(232,80,32,0.03);
}
body[data-style-theme="volcanic"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(232,80,32,0.38); background: rgba(232,80,32,0.07);
  box-shadow: 0 0 8px rgba(232,80,32,0.1);
}
body[data-style-theme="volcanic"] .lobby-input,
body[data-style-theme="volcanic"] .lobby-textarea,
body[data-style-theme="volcanic"] .lobby-select {
  border: 2px solid rgba(232,80,32,0.18); border-radius: 3px;
  background: rgba(232,80,32,0.04);
}
body[data-style-theme="volcanic"] .lobby-input:focus,
body[data-style-theme="volcanic"] .lobby-textarea:focus {
  border-color: rgba(232,80,32,0.45); box-shadow: 0 0 12px rgba(232,80,32,0.12);
}
body[data-style-theme="volcanic"] .lobby-card-badge { border-radius: 3px; }
body[data-style-theme="volcanic"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(232,80,32,0.28); border-radius: 2px;
}

/* In-game UI */
body[data-style-theme="volcanic"] #rpg-header {
  border-bottom: 2px solid rgba(232,80,32,0.2);
  box-shadow: 0 1px 0 rgba(232,80,32,0.08);
}
body[data-style-theme="volcanic"] #col-left { border-right: 2px solid rgba(232,80,32,0.14); }
body[data-style-theme="volcanic"] #col-right { border-left: 2px solid rgba(232,80,32,0.14); }
body[data-style-theme="volcanic"] .col-left-header { border-bottom: 2px solid rgba(232,80,32,0.14); }
body[data-style-theme="volcanic"] #room-name {
  border-radius: 3px; border: 2px solid rgba(232,80,32,0.2);
}
body[data-style-theme="volcanic"] .brand-name {
  border-radius: 3px; border: 2px solid rgba(232,80,32,0.2);
}
body[data-style-theme="volcanic"] #cmd-input {
  border-radius: 3px; border: 2px solid rgba(232,80,32,0.2);
  background: rgba(232,80,32,0.03);
}
body[data-style-theme="volcanic"] #cmd-input:focus {
  border-color: rgba(232,80,32,0.45); box-shadow: 0 0 10px rgba(232,80,32,0.12);
}
body[data-style-theme="volcanic"] #col-left::before {
  content: '\2727'; position: absolute; bottom: 6px; right: 10px;
  font-size: 16px; color: rgba(232,80,32,0.1); pointer-events: none; z-index: 1;
}
body[data-style-theme="volcanic"] .journal-room-desc {
  border-left: 4px solid rgba(232,80,32,0.3); border-radius: 0 3px 3px 0;
}
body[data-style-theme="volcanic"] .stat-bar { border-radius: 2px; }
body[data-style-theme="volcanic"] .stat-bar .fill { border-radius: 2px; }
body[data-style-theme="volcanic"] #npc-chat-header { border-bottom: 2px solid rgba(232,80,32,0.14); }
body[data-style-theme="volcanic"] .glass-panel { border-radius: 3px; }

/* Extended in-game */
body[data-style-theme="volcanic"] .exit-btn { border-radius: 3px; border: 2px solid rgba(232,80,32,0.2); }
body[data-style-theme="volcanic"] .exit-btn:hover { border-color: rgba(232,80,32,0.45); box-shadow: 0 0 6px rgba(232,80,32,0.12); }
body[data-style-theme="volcanic"] .action-btn,
body[data-style-theme="volcanic"] .extra-btn,
body[data-style-theme="volcanic"] .compass-btn { border-radius: 3px; }
body[data-style-theme="volcanic"] .util-btn { border-radius: 3px; border: 1px solid rgba(232,80,32,0.14); }
body[data-style-theme="volcanic"] .inv-item { border-radius: 2px; }
body[data-style-theme="volcanic"] #npc-chat { border-radius: 3px; border: 2px solid rgba(232,80,32,0.14); }
body[data-style-theme="volcanic"] #npc-chat-input { border-radius: 3px; border: 1px solid rgba(232,80,32,0.14); }

/* Dramatic */
body[data-style-theme="volcanic"] #rpg-app {
  background:
    radial-gradient(circle at 50% 100%, rgba(232,80,32,0.06) 0%, transparent 40%),
    radial-gradient(circle at 20% 30%, rgba(180,40,10,0.03) 0%, transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(160,30,8,0.03) 0%, transparent 35%);
}
body[data-style-theme="volcanic"] .glass-panel {
  background: linear-gradient(135deg, rgba(16,6,4,0.50), rgba(10,3,2,0.50));
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(232,80,32,0.05);
}
body[data-style-theme="volcanic"] #mini-map {
  border: 2px solid rgba(232,80,32,0.14); border-radius: 3px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.35);
}
body[data-style-theme="volcanic"] #room-name {
  background: linear-gradient(135deg, rgba(232,80,32,0.07), rgba(180,40,10,0.04));
  text-shadow: 0 0 10px rgba(232,80,32,0.18);
}
body[data-style-theme="volcanic"] .brand-name {
  background: linear-gradient(135deg, rgba(232,80,32,0.05), rgba(180,40,10,0.03));
  text-shadow: 0 0 8px rgba(232,80,32,0.14);
}
body[data-style-theme="volcanic"] .stat-bar { background: rgba(232,80,32,0.06); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
body[data-style-theme="volcanic"] .stat-bar .fill { box-shadow: 0 0 4px rgba(232,80,32,0.15); }
body[data-style-theme="volcanic"] .msg-important {
  background: rgba(232,80,32,0.05); border-left-color: rgba(232,80,32,0.45); border-radius: 0 3px 3px 0;
}
body[data-style-theme="volcanic"] .msg-combat { border-left: 2px solid rgba(232,80,32,0.3); background: rgba(232,80,32,0.03); }
body[data-style-theme="volcanic"] #hud-bar { border-top: 2px solid rgba(232,80,32,0.14); }
body[data-style-theme="volcanic"] .inv-item:hover {
  background: linear-gradient(90deg, rgba(232,80,32,0.06), rgba(232,80,32,0) 70%);
  border-color: rgba(232,80,32,0.2);
}
body[data-style-theme="volcanic"] .inv-item.inv-equipped { border-left: 3px solid rgba(232,80,32,0.4); background: rgba(232,80,32,0.03); }
body[data-style-theme="volcanic"] .chat-msg.from-npc {
  background: linear-gradient(135deg, rgba(232,80,32,0.04), rgba(180,40,10,0.02));
  border: 1px solid rgba(232,80,32,0.08); border-radius: 3px;
}
body[data-style-theme="volcanic"] #col-left { box-shadow: 1px 0 6px rgba(0,0,0,0.3); }
body[data-style-theme="volcanic"] #col-right { box-shadow: -1px 0 6px rgba(0,0,0,0.3); }

/* ============================================================
   UNDERWATER — глубины океана, подводные течения
   ============================================================ */

/* Chip */
.style-theme-chip[data-style-theme="underwater"] {
  border-radius: 12px;
  border: 1px solid rgba(64,168,200,0.2);
}
.style-theme-chip[data-style-theme="underwater"]::after {
  content: ''; position: absolute; bottom: 4px; left: 8px; right: 8px;
  height: 2px;
  background: linear-gradient(90deg, rgba(64,168,200,0.05), rgba(64,168,200,0.3), rgba(64,168,200,0.05));
  transition: opacity 0.25s; opacity: 0.5;
  border-radius: 1px;
}
.style-theme-chip[data-style-theme="underwater"]:hover {
  border-color: rgba(64,168,200,0.4); color: #40a8c8;
  background: linear-gradient(180deg, rgba(64,168,200,0.08) 0%, transparent 70%);
}
.style-theme-chip[data-style-theme="underwater"]:hover::after { opacity: 1; }
.style-theme-chip[data-style-theme="underwater"].active {
  border-color: rgba(64,168,200,0.5); color: #40a8c8;
  background: linear-gradient(180deg, rgba(64,168,200,0.12) 0%, transparent 70%);
  box-shadow: 0 0 14px rgba(64,168,200,0.1), 0 0 3px rgba(64,168,200,0.18);
}
.style-theme-chip[data-style-theme="underwater"].active::after { opacity: 1; background: linear-gradient(90deg, rgba(64,168,200,0.1), rgba(64,168,200,0.5), rgba(64,168,200,0.1)); }

/* Lobby dark */
body[data-style-theme="underwater"] {
  background: #040810;
  --lobby-gold: #40a8c8;
  --lobby-secondary: #3090b0;
  --lobby-gold-dim: rgba(64,168,200,0.4);
  --lobby-radius: 10px;
  --lobby-radius-lg: 14px;
}
body[data-style-theme="underwater"] .lobby-app { background: #040810; }
body[data-style-theme="underwater"] .lobby-app::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(64,168,200,0.06), transparent 60%),
    radial-gradient(ellipse 50% 60% at 20% 60%, rgba(48,144,176,0.04), transparent 55%),
    radial-gradient(ellipse 50% 60% at 80% 60%, rgba(40,120,160,0.04), transparent 55%);
}
/* Каустический свет */
body[data-style-theme="underwater"] .lobby-app::after {
  background:
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(64,168,200,0.07), transparent),
    radial-gradient(ellipse 80% 20% at 30% 20%, rgba(48,144,176,0.04), transparent),
    radial-gradient(ellipse 80% 20% at 70% 15%, rgba(40,120,160,0.04), transparent);
  opacity: 0.8;
}

body[data-style-theme="underwater"] .lobby-header {
  background: linear-gradient(180deg, rgba(4,8,16,0.5), rgba(4,8,16,0));
  border-bottom: 2px solid rgba(64,168,200,0.18);
}
body[data-style-theme="underwater"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent, rgba(64,168,200,0.2) 30%, rgba(100,200,230,0.35) 50%, rgba(64,168,200,0.2) 70%, transparent);
}
body[data-style-theme="underwater"] .lobby-logo {
  font-family: 'Almendra', serif;
  color: #60c8e0;
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(64,168,200,0.5), 0 0 50px rgba(48,144,176,0.25), 0 2px 6px rgba(0,0,0,0.8);
}
body[data-style-theme="underwater"] .lobby-logo::after {
  content: '\2248 \25C6 \2248'; font-size: 11px; letter-spacing: 10px;
  color: rgba(64,168,200,0.35);
}
body[data-style-theme="underwater"] .lobby-card {
  background: linear-gradient(160deg, rgba(64,168,200,0.06) 0%, rgba(48,144,176,0.03) 40%, rgba(4,8,16,0.2) 100%);
  border: 2px solid rgba(64,168,200,0.18);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(100,200,230,0.06);
}
body[data-style-theme="underwater"] .lobby-card::before {
  left: 0; right: 0; height: 3px; border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, rgba(64,168,200,0.15), rgba(100,200,230,0.28), rgba(64,168,200,0.15));
}
body[data-style-theme="underwater"] .lobby-card:hover {
  border-color: rgba(64,168,200,0.35);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(100,200,230,0.1);
}
body[data-style-theme="underwater"] .lobby-card::after {
  content: '\2248'; position: absolute; bottom: 8px; right: 16px;
  font-size: 18px; color: rgba(64,168,200,0.12); pointer-events: none;
}
body[data-style-theme="underwater"] .lobby-card-name { color: #60c0e0; text-shadow: 0 0 8px rgba(64,168,200,0.25); }
body[data-style-theme="underwater"] .lobby-tab {
  font-family: 'Almendra', serif; border-radius: 10px 10px 0 0;
}
body[data-style-theme="underwater"] .lobby-tab.active {
  border-bottom: 3px solid rgba(64,168,200,0.5); color: #50b0d0;
  text-shadow: 0 0 10px rgba(64,168,200,0.35);
  background: linear-gradient(180deg, rgba(64,168,200,0.05), transparent);
}
body[data-style-theme="underwater"] .lobby-tab.active::after { background: rgba(64,168,200,0.16); }
body[data-style-theme="underwater"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(64,168,200,0.06), transparent);
}
body[data-style-theme="underwater"] .lobby-btn.primary {
  background: linear-gradient(135deg, rgba(64,168,200,0.18) 0%, rgba(48,144,176,0.1) 100%);
  border: 2px solid rgba(64,168,200,0.35); color: #60c0e0; border-radius: 10px;
  box-shadow: 0 0 10px rgba(64,168,200,0.08), inset 0 1px 0 rgba(100,200,230,0.06);
  text-shadow: 0 0 6px rgba(64,168,200,0.2);
}
body[data-style-theme="underwater"] .lobby-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(64,168,200,0.28) 0%, rgba(48,144,176,0.18) 100%);
  border-color: rgba(64,168,200,0.5);
  box-shadow: 0 0 20px rgba(64,168,200,0.18), inset 0 1px 0 rgba(100,200,230,0.1);
  filter: none; transform: translateY(-1px);
}
body[data-style-theme="underwater"] .lobby-btn.secondary {
  border: 2px solid rgba(64,168,200,0.18); border-radius: 10px;
  color: #40a8c8; background: rgba(64,168,200,0.03);
}
body[data-style-theme="underwater"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(64,168,200,0.35); background: rgba(64,168,200,0.06);
  box-shadow: 0 0 8px rgba(64,168,200,0.08);
}
body[data-style-theme="underwater"] .lobby-input,
body[data-style-theme="underwater"] .lobby-textarea,
body[data-style-theme="underwater"] .lobby-select {
  border: 2px solid rgba(64,168,200,0.16); border-radius: 10px;
  background: rgba(64,168,200,0.04);
}
body[data-style-theme="underwater"] .lobby-input:focus,
body[data-style-theme="underwater"] .lobby-textarea:focus {
  border-color: rgba(64,168,200,0.4); box-shadow: 0 0 12px rgba(64,168,200,0.1);
}
body[data-style-theme="underwater"] .lobby-card-badge { border-radius: 10px; }
body[data-style-theme="underwater"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(64,168,200,0.22); border-radius: 5px;
}

/* In-game UI */
body[data-style-theme="underwater"] #rpg-header {
  border-bottom: 2px solid rgba(64,168,200,0.16);
  box-shadow: 0 1px 0 rgba(64,168,200,0.06);
}
body[data-style-theme="underwater"] #col-left { border-right: 2px solid rgba(64,168,200,0.1); }
body[data-style-theme="underwater"] #col-right { border-left: 2px solid rgba(64,168,200,0.1); }
body[data-style-theme="underwater"] .col-left-header { border-bottom: 2px solid rgba(64,168,200,0.1); }
body[data-style-theme="underwater"] #room-name {
  border-radius: 10px; border: 2px solid rgba(64,168,200,0.16);
}
body[data-style-theme="underwater"] .brand-name {
  border-radius: 10px; border: 2px solid rgba(64,168,200,0.16);
}
body[data-style-theme="underwater"] #cmd-input {
  border-radius: 10px; border: 2px solid rgba(64,168,200,0.16);
  background: rgba(64,168,200,0.03);
}
body[data-style-theme="underwater"] #cmd-input:focus {
  border-color: rgba(64,168,200,0.4); box-shadow: 0 0 10px rgba(64,168,200,0.1);
}
body[data-style-theme="underwater"] #col-left::before {
  content: '\2248'; position: absolute; bottom: 6px; right: 10px;
  font-size: 16px; color: rgba(64,168,200,0.1); pointer-events: none; z-index: 1;
}
body[data-style-theme="underwater"] .journal-room-desc {
  border-left: 4px solid rgba(64,168,200,0.22); border-radius: 0 10px 10px 0;
}
body[data-style-theme="underwater"] .stat-bar { border-radius: 5px; }
body[data-style-theme="underwater"] .stat-bar .fill { border-radius: 5px; }
body[data-style-theme="underwater"] #npc-chat-header { border-bottom: 2px solid rgba(64,168,200,0.1); }
body[data-style-theme="underwater"] .glass-panel { border-radius: 10px; }

/* Extended in-game */
body[data-style-theme="underwater"] .exit-btn { border-radius: 10px; border: 2px solid rgba(64,168,200,0.16); }
body[data-style-theme="underwater"] .exit-btn:hover { border-color: rgba(64,168,200,0.38); box-shadow: 0 0 6px rgba(64,168,200,0.1); }
body[data-style-theme="underwater"] .action-btn,
body[data-style-theme="underwater"] .extra-btn,
body[data-style-theme="underwater"] .compass-btn { border-radius: 10px; }
body[data-style-theme="underwater"] .util-btn { border-radius: 10px; border: 1px solid rgba(64,168,200,0.1); }
body[data-style-theme="underwater"] .inv-item { border-radius: 6px; }
body[data-style-theme="underwater"] #npc-chat { border-radius: 10px; border: 2px solid rgba(64,168,200,0.1); }
body[data-style-theme="underwater"] #npc-chat-input { border-radius: 10px; border: 1px solid rgba(64,168,200,0.1); }

/* Dramatic */
body[data-style-theme="underwater"] #rpg-app {
  background:
    radial-gradient(circle at 50% 0%, rgba(64,168,200,0.04) 0%, transparent 40%),
    radial-gradient(circle at 20% 70%, rgba(48,144,176,0.02) 0%, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(40,120,160,0.02) 0%, transparent 35%);
}
body[data-style-theme="underwater"] .glass-panel {
  background: linear-gradient(135deg, rgba(6,12,20,0.50), rgba(4,8,14,0.50));
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(64,168,200,0.04);
}
body[data-style-theme="underwater"] #mini-map {
  border: 2px solid rgba(64,168,200,0.1); border-radius: 10px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}
body[data-style-theme="underwater"] #room-name {
  background: linear-gradient(135deg, rgba(64,168,200,0.06), rgba(48,144,176,0.03));
  text-shadow: 0 0 10px rgba(64,168,200,0.15);
}
body[data-style-theme="underwater"] .brand-name {
  background: linear-gradient(135deg, rgba(64,168,200,0.04), rgba(48,144,176,0.02));
  text-shadow: 0 0 8px rgba(64,168,200,0.12);
}
body[data-style-theme="underwater"] .stat-bar { background: rgba(64,168,200,0.05); box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); }
body[data-style-theme="underwater"] .stat-bar .fill { box-shadow: 0 0 3px rgba(64,168,200,0.12); }
body[data-style-theme="underwater"] .msg-important {
  background: rgba(64,168,200,0.04); border-left-color: rgba(64,168,200,0.4); border-radius: 0 10px 10px 0;
}
body[data-style-theme="underwater"] .msg-combat { border-left: 2px solid rgba(64,168,200,0.25); background: rgba(64,168,200,0.02); }
body[data-style-theme="underwater"] #hud-bar { border-top: 2px solid rgba(64,168,200,0.1); }
body[data-style-theme="underwater"] .inv-item:hover {
  background: linear-gradient(90deg, rgba(64,168,200,0.05), rgba(64,168,200,0) 70%);
  border-color: rgba(64,168,200,0.16);
}
body[data-style-theme="underwater"] .inv-item.inv-equipped { border-left: 3px solid rgba(64,168,200,0.35); background: rgba(64,168,200,0.02); }
body[data-style-theme="underwater"] .chat-msg.from-npc {
  background: linear-gradient(135deg, rgba(64,168,200,0.03), rgba(48,144,176,0.01));
  border: 1px solid rgba(64,168,200,0.06); border-radius: 10px;
}
body[data-style-theme="underwater"] #col-left { box-shadow: 1px 0 8px rgba(0,0,0,0.2); }
body[data-style-theme="underwater"] #col-right { box-shadow: -1px 0 8px rgba(0,0,0,0.2); }

/* ============================================================
   MANUSCRIPT — древний манускрипт, тёплый свет свечей
   ============================================================ */

/* Chip — пергаментный стиль с чернильной рамкой */
.style-theme-chip[data-style-theme="manuscript"] {
  border-radius: 5px;
  border: 1px solid rgba(180,140,70,0.25);
  background: linear-gradient(170deg, rgba(40,30,16,0.4) 0%, rgba(20,14,6,0.2) 100%);
}
.style-theme-chip[data-style-theme="manuscript"]::after {
  content: ''; position: absolute; bottom: 4px; left: 6px; right: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,160,96,0.35), rgba(180,140,70,0.2), transparent);
  transition: opacity 0.25s; opacity: 0.4;
}
.style-theme-chip[data-style-theme="manuscript"]:hover {
  border-color: rgba(200,160,96,0.45); color: #d4b478;
  background: linear-gradient(170deg, rgba(50,38,18,0.5) 0%, rgba(30,20,8,0.3) 100%);
  text-shadow: 0 0 6px rgba(200,160,96,0.2);
}
.style-theme-chip[data-style-theme="manuscript"]:hover::after { opacity: 1; }
.style-theme-chip[data-style-theme="manuscript"].active {
  border-color: rgba(200,160,96,0.55); color: #d4b478;
  background: linear-gradient(170deg, rgba(50,38,18,0.55) 0%, rgba(30,20,8,0.35) 100%);
  box-shadow: 0 0 12px rgba(200,160,96,0.08), inset 0 0 8px rgba(180,140,60,0.06);
  text-shadow: 0 0 8px rgba(200,160,96,0.25);
}
.style-theme-chip[data-style-theme="manuscript"].active::after { opacity: 1; background: linear-gradient(90deg, transparent, rgba(200,160,96,0.5), rgba(180,140,70,0.25), transparent); }

/* Lobby dark */
body[data-style-theme="manuscript"] {
  background: #0c0806;
  --lobby-gold: #c8a060;
  --lobby-secondary: #b09050;
  --lobby-gold-dim: rgba(200,160,96,0.4);
  --lobby-radius: 5px;
  --lobby-radius-lg: 8px;
}
body[data-style-theme="manuscript"] .lobby-app { background: #0c0806; }
body[data-style-theme="manuscript"] .lobby-app::before {
  background:
    radial-gradient(ellipse 65% 55% at 50% 95%, rgba(210,170,100,0.14), transparent 55%),
    radial-gradient(ellipse 40% 45% at 25% 75%, rgba(190,150,75,0.08), transparent 50%),
    radial-gradient(ellipse 40% 45% at 75% 75%, rgba(180,140,65,0.08), transparent 50%),
    radial-gradient(ellipse 50% 30% at 50% 20%, rgba(200,160,80,0.04), transparent 50%),
    /* Свечной свет — отблески снизу */
    radial-gradient(ellipse 75% 40% at 50% 100%, rgba(210,170,100,0.10), transparent),
    radial-gradient(ellipse 50% 25% at 35% 90%, rgba(190,150,75,0.07), transparent),
    radial-gradient(ellipse 50% 25% at 65% 85%, rgba(190,150,80,0.07), transparent);
}
/* Пергаментное зерно */
body[data-style-theme="manuscript"] .lobby-app::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.04;
}

body[data-style-theme="manuscript"] .lobby-header {
  background: linear-gradient(180deg, rgba(12,8,6,0.5), rgba(12,8,6,0));
  border-bottom: 2px solid rgba(200,160,96,0.18);
}
body[data-style-theme="manuscript"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent, rgba(200,160,96,0.22) 30%, rgba(220,180,120,0.35) 50%, rgba(200,160,96,0.22) 70%, transparent);
}
body[data-style-theme="manuscript"] .lobby-logo {
  font-family: 'Almendra', serif;
  color: #d8b878;
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(200,160,96,0.45), 0 0 50px rgba(180,140,70,0.2), 0 2px 6px rgba(0,0,0,0.8);
}
body[data-style-theme="manuscript"] .lobby-logo::after {
  content: '\2741 \25C6 \2741'; font-size: 11px; letter-spacing: 10px;
  color: rgba(200,160,96,0.35);
}
body[data-style-theme="manuscript"] .lobby-card {
  background: linear-gradient(160deg, rgba(200,160,96,0.06) 0%, rgba(176,144,80,0.03) 40%, rgba(12,8,6,0.2) 100%);
  border: 2px solid rgba(200,160,96,0.18);
  border-radius: 5px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(220,180,120,0.06);
}
body[data-style-theme="manuscript"] .lobby-card::before {
  left: 0; right: 0; height: 3px; border-radius: 5px 5px 0 0;
  background: linear-gradient(90deg, rgba(200,160,96,0.15), rgba(220,180,120,0.28), rgba(200,160,96,0.15));
}
body[data-style-theme="manuscript"] .lobby-card:hover {
  border-color: rgba(200,160,96,0.35);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(220,180,120,0.1);
}
body[data-style-theme="manuscript"] .lobby-card::after {
  content: '\2741'; position: absolute; bottom: 8px; right: 16px;
  font-size: 18px; color: rgba(200,160,96,0.12); pointer-events: none;
}
body[data-style-theme="manuscript"] .lobby-card-name { color: #d0b070; text-shadow: 0 0 8px rgba(200,160,96,0.25); }
body[data-style-theme="manuscript"] .lobby-tab {
  font-family: 'Almendra', serif; border-radius: 5px 5px 0 0;
}
body[data-style-theme="manuscript"] .lobby-tab.active {
  border-bottom: 3px solid rgba(200,160,96,0.5); color: #c0a060;
  text-shadow: 0 0 10px rgba(200,160,96,0.35);
  background: linear-gradient(180deg, rgba(200,160,96,0.05), transparent);
}
body[data-style-theme="manuscript"] .lobby-tab.active::after { background: rgba(200,160,96,0.16); }
body[data-style-theme="manuscript"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(200,160,96,0.06), transparent);
}
body[data-style-theme="manuscript"] .lobby-btn.primary {
  background: linear-gradient(135deg, rgba(200,160,96,0.18) 0%, rgba(176,144,80,0.1) 100%);
  border: 2px solid rgba(200,160,96,0.35); color: #d0b070; border-radius: 5px;
  box-shadow: 0 0 10px rgba(200,160,96,0.08), inset 0 1px 0 rgba(220,180,120,0.06);
  text-shadow: 0 0 6px rgba(200,160,96,0.2);
}
body[data-style-theme="manuscript"] .lobby-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(200,160,96,0.28) 0%, rgba(176,144,80,0.18) 100%);
  border-color: rgba(200,160,96,0.5);
  box-shadow: 0 0 20px rgba(200,160,96,0.18), inset 0 1px 0 rgba(220,180,120,0.1);
  filter: none; transform: translateY(-1px);
}
body[data-style-theme="manuscript"] .lobby-btn.secondary {
  border: 2px solid rgba(200,160,96,0.18); border-radius: 5px;
  color: #c8a060; background: rgba(200,160,96,0.03);
}
body[data-style-theme="manuscript"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(200,160,96,0.35); background: rgba(200,160,96,0.06);
  box-shadow: 0 0 8px rgba(200,160,96,0.08);
}
body[data-style-theme="manuscript"] .lobby-input,
body[data-style-theme="manuscript"] .lobby-textarea,
body[data-style-theme="manuscript"] .lobby-select {
  border: 2px solid rgba(200,160,96,0.16); border-radius: 5px;
  background: rgba(200,160,96,0.04);
}
body[data-style-theme="manuscript"] .lobby-input:focus,
body[data-style-theme="manuscript"] .lobby-textarea:focus {
  border-color: rgba(200,160,96,0.4); box-shadow: 0 0 12px rgba(200,160,96,0.1);
}
body[data-style-theme="manuscript"] .lobby-card-badge { border-radius: 5px; }
body[data-style-theme="manuscript"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(200,160,96,0.22); border-radius: 3px;
}

/* In-game UI */
body[data-style-theme="manuscript"] #rpg-header {
  border-bottom: 2px solid rgba(200,160,96,0.16);
  box-shadow: 0 1px 0 rgba(200,160,96,0.06);
}
body[data-style-theme="manuscript"] #col-left { border-right: 2px solid rgba(200,160,96,0.1); }
body[data-style-theme="manuscript"] #col-right { border-left: 2px solid rgba(200,160,96,0.1); }
body[data-style-theme="manuscript"] .col-left-header { border-bottom: 2px solid rgba(200,160,96,0.1); }
body[data-style-theme="manuscript"] #room-name {
  border-radius: 5px; border: 2px solid rgba(200,160,96,0.16);
}
body[data-style-theme="manuscript"] .brand-name {
  border-radius: 5px; border: 2px solid rgba(200,160,96,0.16);
}
body[data-style-theme="manuscript"] #cmd-input {
  border-radius: 5px; border: 2px solid rgba(200,160,96,0.16);
  background: rgba(200,160,96,0.03);
}
body[data-style-theme="manuscript"] #cmd-input:focus {
  border-color: rgba(200,160,96,0.4); box-shadow: 0 0 10px rgba(200,160,96,0.1);
}
body[data-style-theme="manuscript"] #col-left::before {
  content: '\2741'; position: absolute; bottom: 6px; right: 10px;
  font-size: 16px; color: rgba(200,160,96,0.1); pointer-events: none; z-index: 1;
}
body[data-style-theme="manuscript"] .journal-room-desc {
  border-left: 4px solid rgba(200,160,96,0.22); border-radius: 0 5px 5px 0;
}
body[data-style-theme="manuscript"] .stat-bar { border-radius: 3px; }
body[data-style-theme="manuscript"] .stat-bar .fill { border-radius: 3px; }
body[data-style-theme="manuscript"] #npc-chat-header { border-bottom: 2px solid rgba(200,160,96,0.1); }
body[data-style-theme="manuscript"] .glass-panel { border-radius: 5px; }

/* Extended in-game */
body[data-style-theme="manuscript"] .exit-btn { border-radius: 5px; border: 2px solid rgba(200,160,96,0.16); }
body[data-style-theme="manuscript"] .exit-btn:hover { border-color: rgba(200,160,96,0.38); box-shadow: 0 0 6px rgba(200,160,96,0.1); }
body[data-style-theme="manuscript"] .action-btn,
body[data-style-theme="manuscript"] .extra-btn,
body[data-style-theme="manuscript"] .compass-btn { border-radius: 5px; }
body[data-style-theme="manuscript"] .util-btn { border-radius: 5px; border: 1px solid rgba(200,160,96,0.1); }
body[data-style-theme="manuscript"] .inv-item { border-radius: 3px; }
body[data-style-theme="manuscript"] #npc-chat { border-radius: 5px; border: 2px solid rgba(200,160,96,0.1); }
body[data-style-theme="manuscript"] #npc-chat-input { border-radius: 5px; border: 1px solid rgba(200,160,96,0.1); }

/* Dramatic — тёплый свет свечи */
body[data-style-theme="manuscript"] #rpg-app {
  background:
    radial-gradient(circle at 50% 95%, rgba(210,170,100,0.08) 0%, transparent 40%),
    radial-gradient(circle at 25% 50%, rgba(190,150,75,0.04) 0%, transparent 35%),
    radial-gradient(circle at 75% 50%, rgba(190,150,80,0.04) 0%, transparent 35%),
    radial-gradient(circle at 50% 5%,  rgba(180,140,60,0.03) 0%, transparent 30%);
}
body[data-style-theme="manuscript"] .glass-panel {
  background: linear-gradient(170deg, rgba(22,16,8,0.50), rgba(14,10,4,0.50));
  box-shadow: 0 4px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(200,160,96,0.06);
}
body[data-style-theme="manuscript"] #mini-map {
  border: 2px solid rgba(200,160,96,0.1); border-radius: 5px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}
body[data-style-theme="manuscript"] #room-name {
  background: linear-gradient(135deg, rgba(200,160,96,0.10), rgba(176,144,80,0.05));
  text-shadow: 0 0 12px rgba(200,160,96,0.22);
}
body[data-style-theme="manuscript"] .brand-name {
  background: linear-gradient(135deg, rgba(200,160,96,0.08), rgba(176,144,80,0.04));
  text-shadow: 0 0 10px rgba(200,160,96,0.18);
}
body[data-style-theme="manuscript"] .stat-bar { background: rgba(200,160,96,0.05); box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); }
body[data-style-theme="manuscript"] .stat-bar .fill { box-shadow: 0 0 3px rgba(200,160,96,0.1); }
body[data-style-theme="manuscript"] .msg-important {
  background: rgba(200,160,96,0.04); border-left-color: rgba(200,160,96,0.4); border-radius: 0 5px 5px 0;
}
body[data-style-theme="manuscript"] .msg-combat { border-left: 2px solid rgba(200,160,96,0.22); background: rgba(200,160,96,0.02); }
body[data-style-theme="manuscript"] #hud-bar { border-top: 2px solid rgba(200,160,96,0.1); }
body[data-style-theme="manuscript"] .inv-item:hover {
  background: linear-gradient(90deg, rgba(200,160,96,0.05), rgba(200,160,96,0) 70%);
  border-color: rgba(200,160,96,0.16);
}
body[data-style-theme="manuscript"] .inv-item.inv-equipped { border-left: 3px solid rgba(200,160,96,0.35); background: rgba(200,160,96,0.02); }
body[data-style-theme="manuscript"] .chat-msg.from-npc {
  background: linear-gradient(135deg, rgba(200,160,96,0.03), rgba(176,144,80,0.01));
  border: 1px solid rgba(200,160,96,0.06); border-radius: 5px;
}
body[data-style-theme="manuscript"] #col-left { box-shadow: 1px 0 6px rgba(0,0,0,0.22); }
body[data-style-theme="manuscript"] #col-right { box-shadow: -1px 0 6px rgba(0,0,0,0.22); }

/* ============================================================
   DWARVEN-FORGE — раскалённая кузня внутри горы
   Уникальные фишки: пульсирующий горн снизу, SVG-заклёпки,
   шрифт MedievalSharp, heat shimmer анимация, grunge текстура
   ============================================================ */

@keyframes forgeGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes forgeHeatShimmer {
  0%   { transform: translateY(0) scaleX(1); }
  25%  { transform: translateY(-1px) scaleX(1.002); }
  50%  { transform: translateY(0) scaleX(0.998); }
  75%  { transform: translateY(1px) scaleX(1.001); }
  100% { transform: translateY(0) scaleX(1); }
}

/* Chip */
.style-theme-chip[data-style-theme="dwarven-forge"] {
  border: 2px ridge rgba(180,120,40,0.35);
  border-radius: 1px;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.style-theme-chip[data-style-theme="dwarven-forge"]::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 3px;
  background: rgba(255,140,30,0.5);
  box-shadow: 0 0 6px rgba(255,120,20,0.4);
  border-radius: 50%;
  transition: all 0.25s; opacity: 0.4;
}
.style-theme-chip[data-style-theme="dwarven-forge"]:hover {
  border-color: rgba(220,140,50,0.6); color: #e8a030;
  background: linear-gradient(0deg, rgba(255,100,20,0.12) 0%, transparent 60%);
}
.style-theme-chip[data-style-theme="dwarven-forge"]:hover::after { opacity: 1; width: 20px; }
.style-theme-chip[data-style-theme="dwarven-forge"].active {
  border-color: rgba(220,140,50,0.7); color: #f0b040;
  background: linear-gradient(0deg, rgba(255,100,20,0.16) 0%, rgba(200,80,10,0.04) 50%, transparent 100%);
  box-shadow: 0 0 14px rgba(255,120,20,0.12), inset 0 -4px 10px rgba(255,100,20,0.06);
}
.style-theme-chip[data-style-theme="dwarven-forge"].active::after {
  opacity: 1; width: 22px;
  background: rgba(255,160,40,0.7);
  box-shadow: 0 0 10px rgba(255,120,20,0.6);
  animation: forgeGlow 3s ease-in-out infinite;
}

/* Lobby dark */
body[data-style-theme="dwarven-forge"] {
  background: #0e0906;
  --lobby-gold: #e8a030;
  --lobby-secondary: #cc7a20;
  --lobby-gold-dim: rgba(220,140,50,0.4);
  --lobby-radius: 1px;
  --lobby-radius-lg: 2px;
}
body[data-style-theme="dwarven-forge"] .lobby-app {
  background: #0e0906;
  font-family: 'MedievalSharp', 'Almendra', serif;
}
/* Раскалённый горн снизу + дым сверху */
body[data-style-theme="dwarven-forge"] .lobby-app::before {
  background:
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(220,160,40,0.10), transparent 55%),
    radial-gradient(ellipse 25% 20% at 35% 95%, rgba(200,140,30,0.06), transparent 45%),
    radial-gradient(ellipse 25% 20% at 65% 95%, rgba(210,150,35,0.06), transparent 45%),
    radial-gradient(ellipse 80% 20% at 50% 0%, rgba(8,5,3,0.5), transparent);
  animation: forgeGlow 6s ease-in-out infinite;
}
/* Каменная текстура — мелкие зернистые точки */
body[data-style-theme="dwarven-forge"] .lobby-app::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='rgba(180,120,40,0.04)' stroke='none'%3E%3Ccircle cx='15' cy='25' r='1.2'/%3E%3Ccircle cx='65' cy='10' r='0.8'/%3E%3Ccircle cx='120' cy='35' r='1'/%3E%3Ccircle cx='175' cy='20' r='0.7'/%3E%3Ccircle cx='40' cy='80' r='1.1'/%3E%3Ccircle cx='95' cy='70' r='0.9'/%3E%3Ccircle cx='150' cy='85' r='1.3'/%3E%3Ccircle cx='25' cy='130' r='0.8'/%3E%3Ccircle cx='80' cy='145' r='1'/%3E%3Ccircle cx='135' cy='120' r='0.7'/%3E%3Ccircle cx='185' cy='140' r='1.1'/%3E%3Ccircle cx='55' cy='180' r='0.9'/%3E%3Ccircle cx='110' cy='190' r='1.2'/%3E%3Ccircle cx='165' cy='175' r='0.8'/%3E%3C/g%3E%3Cg stroke='rgba(180,120,40,0.025)' stroke-width='0.5' fill='none'%3E%3Cpath d='M5 60 Q20 58 35 62 Q50 66 65 61'/%3E%3Cpath d='M100 110 Q120 107 140 112 Q160 116 180 110'/%3E%3Cpath d='M30 160 Q50 157 70 162'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 1;
}

body[data-style-theme="dwarven-forge"] .lobby-header {
  background: linear-gradient(180deg, rgba(14,9,6,0.6), rgba(14,9,6,0));
  border-bottom: 3px ridge rgba(180,120,40,0.25);
}
body[data-style-theme="dwarven-forge"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent, rgba(255,140,30,0.25) 25%, rgba(255,180,60,0.45) 50%, rgba(255,140,30,0.25) 75%, transparent);
  animation: forgeGlow 4s ease-in-out infinite;
}
body[data-style-theme="dwarven-forge"] .lobby-logo {
  font-family: 'MedievalSharp', serif;
  color: #f0b040;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(255,140,30,0.6), 0 0 50px rgba(220,80,10,0.35), 0 3px 8px rgba(0,0,0,0.9);
}
body[data-style-theme="dwarven-forge"] .lobby-logo::after {
  content: '⚒ ⚔ ⚒'; font-size: 12px; letter-spacing: 12px;
  color: rgba(255,140,30,0.35);
}
body[data-style-theme="dwarven-forge"] .lobby-card {
  background: linear-gradient(170deg, rgba(40,25,15,0.4) 0%, rgba(20,12,8,0.5) 50%, rgba(30,16,8,0.35) 100%);
  border: 2px ridge rgba(180,120,40,0.22);
  border-radius: 1px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,180,60,0.04), inset 0 -1px 0 rgba(255,100,20,0.03);
}
body[data-style-theme="dwarven-forge"] .lobby-card::before {
  left: 0; right: 0; height: 3px; border-radius: 1px 1px 0 0;
  background: linear-gradient(90deg, rgba(180,120,40,0.15), rgba(255,160,40,0.3), rgba(180,120,40,0.15));
}
body[data-style-theme="dwarven-forge"] .lobby-card:hover {
  border-color: rgba(220,140,50,0.4);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45), inset 0 -2px 12px rgba(255,100,20,0.05);
}
body[data-style-theme="dwarven-forge"] .lobby-card::after {
  content: '⚒'; position: absolute; bottom: 8px; right: 16px;
  font-size: 18px; color: rgba(220,140,50,0.1); pointer-events: none;
}
body[data-style-theme="dwarven-forge"] .lobby-card-name {
  font-family: 'MedievalSharp', serif;
  color: #e8a030; letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255,140,30,0.3);
}
body[data-style-theme="dwarven-forge"] .lobby-tab {
  font-family: 'MedievalSharp', serif; border-radius: 1px 1px 0 0;
}
body[data-style-theme="dwarven-forge"] .lobby-tab.active {
  border-bottom: 3px solid rgba(255,140,30,0.55); color: #e8a030;
  text-shadow: 0 0 10px rgba(255,140,30,0.4);
  background: linear-gradient(180deg, rgba(255,100,20,0.06), transparent);
}
body[data-style-theme="dwarven-forge"] .lobby-tab.active::after { background: rgba(255,140,30,0.18); }
body[data-style-theme="dwarven-forge"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(180,120,40,0.1), transparent);
}
body[data-style-theme="dwarven-forge"] .lobby-btn.primary {
  background: linear-gradient(180deg, rgba(180,100,20,0.2) 0%, rgba(140,60,10,0.25) 100%);
  border: 2px ridge rgba(220,140,50,0.4); color: #f0b040; border-radius: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,200,80,0.08);
  text-shadow: 0 0 6px rgba(255,140,30,0.3);
}
body[data-style-theme="dwarven-forge"] .lobby-btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(220,120,20,0.3) 0%, rgba(180,80,10,0.3) 100%);
  border-color: rgba(255,160,40,0.55);
  box-shadow: 0 2px 12px rgba(255,100,20,0.15), inset 0 1px 0 rgba(255,200,80,0.12);
  filter: none; transform: translateY(-1px);
}
body[data-style-theme="dwarven-forge"] .lobby-btn.secondary {
  border: 2px ridge rgba(180,120,40,0.2); border-radius: 1px;
  color: #cc7a20; background: rgba(180,100,20,0.04);
}
body[data-style-theme="dwarven-forge"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(220,140,50,0.38); background: rgba(220,120,20,0.08);
  box-shadow: 0 0 8px rgba(255,120,20,0.1);
}
body[data-style-theme="dwarven-forge"] .lobby-input,
body[data-style-theme="dwarven-forge"] .lobby-textarea,
body[data-style-theme="dwarven-forge"] .lobby-select {
  border: 2px ridge rgba(180,120,40,0.2); border-radius: 1px;
  background: rgba(40,25,15,0.3);
}
body[data-style-theme="dwarven-forge"] .lobby-input:focus,
body[data-style-theme="dwarven-forge"] .lobby-textarea:focus {
  border-color: rgba(220,140,50,0.45); box-shadow: 0 0 10px rgba(255,120,20,0.12);
}
body[data-style-theme="dwarven-forge"] .lobby-card-badge { border-radius: 1px; font-family: 'MedievalSharp', serif; }
body[data-style-theme="dwarven-forge"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(180,120,40,0.3); border-radius: 1px;
}

/* In-game UI */
body[data-style-theme="dwarven-forge"] #rpg-header {
  border-bottom: 3px ridge rgba(180,120,40,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body[data-style-theme="dwarven-forge"] #col-left { border-right: 2px ridge rgba(180,120,40,0.15); }
body[data-style-theme="dwarven-forge"] #col-right { border-left: 2px ridge rgba(180,120,40,0.15); }
body[data-style-theme="dwarven-forge"] .col-left-header {
  border-bottom: 2px ridge rgba(180,120,40,0.15);
  font-family: 'MedievalSharp', serif;
  letter-spacing: 1px;
}
body[data-style-theme="dwarven-forge"] #room-name {
  border-radius: 1px; border: 2px ridge rgba(180,120,40,0.2);
  font-family: 'MedievalSharp', serif;
}
body[data-style-theme="dwarven-forge"] .brand-name {
  border-radius: 1px; border: 2px ridge rgba(180,120,40,0.2);
  font-family: 'MedievalSharp', serif;
}
body[data-style-theme="dwarven-forge"] #cmd-input {
  border-radius: 1px; border: 2px ridge rgba(180,120,40,0.2);
  background: rgba(40,25,15,0.25);
  font-family: 'MedievalSharp', serif;
}
body[data-style-theme="dwarven-forge"] #cmd-input:focus {
  border-color: rgba(220,140,50,0.45); box-shadow: 0 0 10px rgba(255,120,20,0.12);
}
body[data-style-theme="dwarven-forge"] #col-left::before {
  content: '⚒'; position: absolute; bottom: 6px; right: 10px;
  font-size: 16px; color: rgba(220,140,50,0.08); pointer-events: none; z-index: 1;
}
body[data-style-theme="dwarven-forge"] .journal-room-desc {
  border-left: 4px ridge rgba(180,120,40,0.3); border-radius: 0;
}
body[data-style-theme="dwarven-forge"] .stat-bar { border-radius: 1px; }
body[data-style-theme="dwarven-forge"] .stat-bar .fill { border-radius: 1px; }
body[data-style-theme="dwarven-forge"] #npc-chat-header {
  border-bottom: 2px ridge rgba(180,120,40,0.15);
  font-family: 'MedievalSharp', serif;
}
body[data-style-theme="dwarven-forge"] .glass-panel { border-radius: 1px; }

/* Extended in-game */
body[data-style-theme="dwarven-forge"] .exit-btn { border-radius: 1px; border: 2px ridge rgba(180,120,40,0.2); }
body[data-style-theme="dwarven-forge"] .exit-btn:hover { border-color: rgba(220,140,50,0.45); box-shadow: 0 0 6px rgba(255,120,20,0.12); }
body[data-style-theme="dwarven-forge"] .action-btn,
body[data-style-theme="dwarven-forge"] .extra-btn,
body[data-style-theme="dwarven-forge"] .compass-btn { border-radius: 1px; }
body[data-style-theme="dwarven-forge"] .util-btn { border-radius: 1px; border: 1px solid rgba(180,120,40,0.15); }
body[data-style-theme="dwarven-forge"] .inv-item { border-radius: 1px; }
body[data-style-theme="dwarven-forge"] #npc-chat { border-radius: 1px; border: 2px ridge rgba(180,120,40,0.15); }
body[data-style-theme="dwarven-forge"] #npc-chat-input { border-radius: 1px; border: 1px solid rgba(180,120,40,0.15); }

/* Dramatic */
body[data-style-theme="dwarven-forge"] #rpg-app {
  background:
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(220,160,40,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 25% 25% at 20% 85%, rgba(200,140,30,0.03) 0%, transparent 40%),
    radial-gradient(ellipse 25% 25% at 80% 85%, rgba(210,150,35,0.03) 0%, transparent 40%),
    radial-gradient(ellipse 100% 25% at 50% 0%, rgba(8,5,3,0.25) 0%, transparent 100%);
}
body[data-style-theme="dwarven-forge"] .glass-panel {
  background: linear-gradient(170deg, rgba(24,16,10,0.50), rgba(16,10,6,0.50));
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(180,120,40,0.04);
  border: 1px ridge rgba(180,120,40,0.08);
}
body[data-style-theme="dwarven-forge"] #mini-map {
  border: 2px ridge rgba(180,120,40,0.15); border-radius: 1px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.45);
}
body[data-style-theme="dwarven-forge"] #room-name {
  background: linear-gradient(135deg, rgba(180,100,20,0.08), rgba(140,60,10,0.04));
  text-shadow: 0 0 10px rgba(255,140,30,0.15);
}
body[data-style-theme="dwarven-forge"] .brand-name {
  background: linear-gradient(135deg, rgba(180,100,20,0.05), rgba(140,60,10,0.03));
  text-shadow: 0 0 8px rgba(255,140,30,0.1);
}
body[data-style-theme="dwarven-forge"] .stat-bar { background: rgba(180,100,20,0.06); box-shadow: inset 0 1px 2px rgba(0,0,0,0.35); }
body[data-style-theme="dwarven-forge"] .stat-bar .fill { box-shadow: 0 0 4px rgba(255,120,20,0.15); }
body[data-style-theme="dwarven-forge"] .msg-important {
  background: rgba(255,100,20,0.04); border-left-color: rgba(255,140,30,0.4); border-radius: 0;
}
body[data-style-theme="dwarven-forge"] .msg-combat { border-left: 3px solid rgba(255,120,20,0.3); background: rgba(255,100,20,0.02); }
body[data-style-theme="dwarven-forge"] #hud-bar { border-top: 3px ridge rgba(180,120,40,0.15); }
body[data-style-theme="dwarven-forge"] .inv-item:hover {
  background: linear-gradient(90deg, rgba(255,120,20,0.06), rgba(255,120,20,0) 70%);
  border-color: rgba(180,120,40,0.2);
}
body[data-style-theme="dwarven-forge"] .inv-item.inv-equipped { border-left: 3px solid rgba(255,140,30,0.4); background: rgba(180,100,20,0.03); }
body[data-style-theme="dwarven-forge"] .chat-msg.from-npc {
  background: linear-gradient(135deg, rgba(40,25,15,0.15), rgba(20,12,8,0.1));
  border: 1px ridge rgba(180,120,40,0.08); border-radius: 1px;
}
body[data-style-theme="dwarven-forge"] #col-left { box-shadow: 2px 0 8px rgba(0,0,0,0.4); }
body[data-style-theme="dwarven-forge"] #col-right { box-shadow: -2px 0 8px rgba(0,0,0,0.4); }
body[data-style-theme="dwarven-forge"] .msg-room-title {
  font-family: 'MedievalSharp', serif;
  letter-spacing: 1px;
}
body[data-style-theme="dwarven-forge"] .entities-title {
  font-family: 'MedievalSharp', serif;
}

/* Output scroll — горн внизу, дым вверху */
body[data-style-theme="dwarven-forge"] #output-scroll {
  background:
    radial-gradient(ellipse 50% 25% at 50% 100%, rgba(220,160,40,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 80% 20% at 50% 0%,   rgba(10,6,3,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 25% 35% at 5% 85%,   rgba(200,140,30,0.03) 0%, transparent 50%),
    radial-gradient(ellipse 25% 35% at 95% 85%,  rgba(200,140,30,0.03) 0%, transparent 50%);
}
body[data-style-theme="dwarven-forge"] #output-scroll::-webkit-scrollbar-thumb {
  background: rgba(180,120,40,0.25);
}

/* ============================================================
   SHADOWFELL — угасающий мир-отражение, всё блёкнет и искажается
   Уникальные фишки: CSS filter desaturation, медленная пульсация
   виньетки, искажённые тени-дубли, мерцающий полупрозрачный текст
   ============================================================ */

@keyframes shadowBreath {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}
@keyframes shadowVignette {
  0%, 100% { box-shadow: inset 0 0 80px 30px rgba(0,0,0,0.35); }
  50% { box-shadow: inset 0 0 100px 40px rgba(0,0,0,0.5); }
}
@keyframes shadowFlicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.85; }
  95% { opacity: 0.95; }
  97% { opacity: 0.8; }
}

/* Chip */
.style-theme-chip[data-style-theme="shadowfell"] {
  border: 1px solid rgba(120,120,140,0.15);
  border-radius: 3px;
  position: relative;
}
.style-theme-chip[data-style-theme="shadowfell"]::after {
  content: ''; position: absolute; inset: 2px;
  border: 1px solid rgba(100,100,120,0.06);
  border-radius: 2px;
  transition: all 0.25s;
  pointer-events: none;
}
.style-theme-chip[data-style-theme="shadowfell"]:hover {
  border-color: rgba(140,140,160,0.3); color: #9090a8;
  background: radial-gradient(ellipse at 50% 50%, rgba(100,100,120,0.08) 0%, transparent 70%);
}
.style-theme-chip[data-style-theme="shadowfell"]:hover::after { border-color: rgba(120,120,140,0.1); }
.style-theme-chip[data-style-theme="shadowfell"].active {
  border-color: rgba(140,140,160,0.35); color: #a0a0b0;
  background: radial-gradient(ellipse at 50% 50%, rgba(120,120,140,0.1) 0%, transparent 70%);
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.style-theme-chip[data-style-theme="shadowfell"].active::after { border-color: rgba(140,140,160,0.12); }

/* Lobby dark */
body[data-style-theme="shadowfell"] {
  background: #1e1e28;
  --lobby-gold: #b0b0c8;
  --lobby-secondary: #9090a8;
  --lobby-gold-dim: rgba(140,140,165,0.3);
  --lobby-radius: 3px;
  --lobby-radius-lg: 5px;
}
body[data-style-theme="shadowfell"] .lobby-app {
  background: #1e1e28;
  font-family: 'Cormorant Garamond', 'Perpetua', serif;
  filter: saturate(0.75) contrast(1.02);
}
/* Глубокая виньетка, пульсирующая */
body[data-style-theme="shadowfell"] .lobby-app::before {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, transparent 35%, rgba(0,0,0,0.20) 100%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(0,0,0,0.12), transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 20%, rgba(0,0,0,0.10), transparent 60%);
  animation: shadowVignette 12s ease-in-out infinite;
}
/* Проступающие тени — полупрозрачные «пятна» тьмы (осветлено) */
body[data-style-theme="shadowfell"] .lobby-app::after {
  background-image:
    radial-gradient(ellipse 20% 30% at 15% 35%, rgba(0,0,0,0.08), transparent),
    radial-gradient(ellipse 25% 20% at 75% 65%, rgba(0,0,0,0.06), transparent),
    radial-gradient(ellipse 15% 25% at 45% 80%, rgba(0,0,0,0.07), transparent),
    radial-gradient(ellipse 20% 15% at 85% 25%, rgba(0,0,0,0.05), transparent),
    radial-gradient(ellipse 18% 22% at 30% 60%, rgba(0,0,0,0.06), transparent);
  opacity: 1;
  animation: shadowBreath 15s ease-in-out infinite;
}

body[data-style-theme="shadowfell"] .lobby-header {
  background: linear-gradient(180deg, rgba(20,20,26,0.5), rgba(20,20,26,0));
  border-bottom: 1px solid rgba(120,120,140,0.10);
}
body[data-style-theme="shadowfell"] .lobby-header::after {
  background: linear-gradient(90deg,
    transparent, rgba(120,120,140,0.08) 30%, rgba(150,150,170,0.12) 50%, rgba(120,120,140,0.08) 70%, transparent);
}
body[data-style-theme="shadowfell"] .lobby-logo {
  font-family: 'Cormorant Garamond', serif;
  color: #b8b8cc;
  letter-spacing: 6px;
  text-transform: uppercase;
  font-weight: 500;
  text-shadow: 0 0 30px rgba(140,140,170,0.35), 0 4px 12px rgba(0,0,0,0.6);
  animation: shadowFlicker 20s ease-in-out infinite;
}
body[data-style-theme="shadowfell"] .lobby-logo::after {
  content: '· · ·'; font-size: 14px; letter-spacing: 12px;
  color: rgba(120,120,140,0.15);
}
body[data-style-theme="shadowfell"] .lobby-card {
  background: rgba(30,30,40,0.55);
  border: 1px solid rgba(130,130,155,0.16);
  border-radius: 3px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
body[data-style-theme="shadowfell"] .lobby-card::before {
  left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140,140,165,0.15), transparent);
}
body[data-style-theme="shadowfell"] .lobby-card:hover {
  border-color: rgba(150,150,175,0.25);
  background: rgba(35,35,48,0.65);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  transform: translateY(-2px);
}
body[data-style-theme="shadowfell"] .lobby-card::after {
  content: '◌'; position: absolute; bottom: 8px; right: 16px;
  font-size: 18px; color: rgba(120,120,140,0.06); pointer-events: none;
  animation: shadowBreath 10s ease-in-out infinite;
}
body[data-style-theme="shadowfell"] .lobby-card-name {
  font-family: 'Cormorant Garamond', serif;
  color: #c0c0d0; letter-spacing: 3px;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(160,160,190,0.2);
  text-transform: uppercase;
  font-size: 17px;
}
body[data-style-theme="shadowfell"] .lobby-card-meta,
body[data-style-theme="shadowfell"] .lobby-card-desc,
body[data-style-theme="shadowfell"] .lobby-card-char {
  font-family: 'Cormorant Garamond', serif;
  color: #a8a8c0;
  font-size: 15px;
  font-weight: 500;
}
body[data-style-theme="shadowfell"] .lobby-tab {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
  border-radius: 3px 3px 0 0;
}
body[data-style-theme="shadowfell"] .lobby-tab.active {
  border-bottom: 1px solid rgba(140,140,165,0.25); color: #b0b0c0;
  text-shadow: none;
  background: linear-gradient(180deg, rgba(100,100,120,0.06), transparent);
}
body[data-style-theme="shadowfell"] .lobby-tab.active::after { background: rgba(120,120,140,0.06); }
body[data-style-theme="shadowfell"] .lobby-tabs::after {
  background: linear-gradient(90deg, transparent, rgba(120,120,140,0.04), transparent);
}
body[data-style-theme="shadowfell"] .lobby-btn.primary {
  background: rgba(120,120,140,0.12);
  border: 1px solid rgba(130,130,155,0.22); color: #c0c0d0; border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  text-shadow: none;
  letter-spacing: 2px; text-transform: uppercase;
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
}
body[data-style-theme="shadowfell"] .lobby-btn.primary:hover:not(:disabled) {
  background: rgba(120,120,140,0.14);
  border-color: rgba(140,140,160,0.25);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  filter: none; transform: translateY(-1px);
}
body[data-style-theme="shadowfell"] .lobby-btn.secondary {
  border: 1px solid rgba(130,130,155,0.15); border-radius: 3px;
  color: #9898b0; background: transparent;
  letter-spacing: 1px;
}
body[data-style-theme="shadowfell"] .lobby-btn.secondary:hover:not(:disabled) {
  border-color: rgba(140,140,160,0.2); background: rgba(100,100,120,0.04);
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
body[data-style-theme="shadowfell"] .lobby-input,
body[data-style-theme="shadowfell"] .lobby-textarea,
body[data-style-theme="shadowfell"] .lobby-select {
  border: 1px solid rgba(130,130,155,0.12); border-radius: 3px;
  background: rgba(0,0,0,0.18);
  font-family: 'Cormorant Garamond', serif;
  color: #b8b8cc;
}
body[data-style-theme="shadowfell"] .lobby-input:focus,
body[data-style-theme="shadowfell"] .lobby-textarea:focus {
  border-color: rgba(140,140,160,0.2); box-shadow: 0 0 12px rgba(0,0,0,0.3);
}
body[data-style-theme="shadowfell"] .lobby-card-badge {
  border-radius: 3px;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px; text-transform: uppercase;
  font-size: 11px; font-weight: 600;
  background: transparent !important;
  color: rgba(176,176,200,0.55) !important;
  border-color: rgba(130,130,155,0.16) !important;
}
body[data-style-theme="shadowfell"] .lobby-content::-webkit-scrollbar-thumb {
  background: rgba(120,120,140,0.12); border-radius: 3px;
}

/* In-game UI — desaturated */
body[data-style-theme="shadowfell"] #rpg-app {
  filter: saturate(0.75) contrast(1.02);
}
body[data-style-theme="shadowfell"] #rpg-header {
  border-bottom: 1px solid rgba(120,120,140,0.06);
}
body[data-style-theme="shadowfell"] #rpg-header::after {
  content: '';
  position: absolute; bottom: -1px; left: 25%; right: 25%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120,120,140,0.05), transparent);
  pointer-events: none;
}
body[data-style-theme="shadowfell"] #col-left { border-right: 1px solid rgba(120,120,140,0.05); }
body[data-style-theme="shadowfell"] #col-right { border-left: 1px solid rgba(120,120,140,0.05); }
body[data-style-theme="shadowfell"] .col-left-header {
  border-bottom: 1px solid rgba(120,120,140,0.05);
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
}
body[data-style-theme="shadowfell"] #room-name,
body[data-style-theme="shadowfell"] .brand-name {
  border-radius: 3px; border: 1px solid rgba(120,120,140,0.06);
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
}
body[data-style-theme="shadowfell"] #cmd-input {
  border-radius: 3px; border: 1px solid rgba(120,120,140,0.06);
  background: rgba(0,0,0,0.1);
  font-family: 'Cormorant Garamond', serif;
}
body[data-style-theme="shadowfell"] #cmd-input:focus {
  border-color: rgba(140,140,160,0.15); box-shadow: none;
}
body[data-style-theme="shadowfell"] #col-left::before {
  content: '◌'; position: absolute; bottom: 6px; right: 10px;
  font-size: 16px; color: rgba(120,120,140,0.04); pointer-events: none; z-index: 1;
  animation: shadowBreath 10s ease-in-out infinite;
}
body[data-style-theme="shadowfell"] .journal-room-desc {
  border-left: 2px solid rgba(120,120,140,0.08); border-radius: 0;
}
body[data-style-theme="shadowfell"] .msg-room-title {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 3px; text-transform: uppercase; font-weight: 600;
  color: #a8a8c0;
}
body[data-style-theme="shadowfell"] .stat-bar { border-radius: 2px; }
body[data-style-theme="shadowfell"] .stat-bar .fill { border-radius: 2px; opacity: 0.8; }
body[data-style-theme="shadowfell"] #npc-chat-header {
  border-bottom: 1px solid rgba(120,120,140,0.05);
  font-family: 'Cormorant Garamond', serif;
}
body[data-style-theme="shadowfell"] .glass-panel { border-radius: 3px; }

/* Extended in-game */
body[data-style-theme="shadowfell"] .exit-btn { border-radius: 3px; border: 1px solid rgba(120,120,140,0.08); }
body[data-style-theme="shadowfell"] .exit-btn:hover { border-color: rgba(140,140,160,0.18); box-shadow: 0 0 8px rgba(0,0,0,0.25); }
body[data-style-theme="shadowfell"] .action-btn,
body[data-style-theme="shadowfell"] .extra-btn,
body[data-style-theme="shadowfell"] .compass-btn { border-radius: 3px; }
body[data-style-theme="shadowfell"] .util-btn { border-radius: 3px; border: 1px solid rgba(120,120,140,0.06); }
body[data-style-theme="shadowfell"] .inv-item { border-radius: 2px; }
body[data-style-theme="shadowfell"] #npc-chat { border-radius: 3px; border: 1px solid rgba(120,120,140,0.06); }
body[data-style-theme="shadowfell"] #npc-chat-input { border-radius: 3px; border: 1px solid rgba(120,120,140,0.06); }

/* Dramatic */
body[data-style-theme="shadowfell"] .glass-panel {
  background: rgba(24,24,32,0.50);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  border: 1px solid rgba(130,130,155,0.10);
}
body[data-style-theme="shadowfell"] #mini-map {
  border: 1px solid rgba(120,120,140,0.08); border-radius: 3px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}
body[data-style-theme="shadowfell"] #room-name {
  background: rgba(0,0,0,0.06);
  text-shadow: none; color: #a8a8c0;
}
body[data-style-theme="shadowfell"] .brand-name {
  background: rgba(0,0,0,0.06);
  text-shadow: none; color: #a8a8c0;
}
body[data-style-theme="shadowfell"] .stat-bar { background: rgba(120,120,140,0.03); box-shadow: none; }
body[data-style-theme="shadowfell"] .stat-bar .fill { box-shadow: none; }
body[data-style-theme="shadowfell"] .msg-important {
  background: rgba(120,120,140,0.02); border-left: 2px solid rgba(120,120,140,0.1); border-radius: 0;
}
body[data-style-theme="shadowfell"] .msg-combat { border-left: 1px solid rgba(120,120,140,0.06); background: rgba(0,0,0,0.06); }
body[data-style-theme="shadowfell"] #hud-bar {
  border-top: 1px solid rgba(120,120,140,0.05);
}
body[data-style-theme="shadowfell"] .inv-item:hover {
  background: rgba(120,120,140,0.03);
  border-color: rgba(120,120,140,0.08);
}
body[data-style-theme="shadowfell"] .inv-item.inv-equipped { border-left: 2px solid rgba(120,120,140,0.12); background: rgba(0,0,0,0.05); }
body[data-style-theme="shadowfell"] .chat-msg.from-npc {
  background: rgba(0,0,0,0.1);
  border: 1px solid rgba(120,120,140,0.04); border-radius: 3px;
}
body[data-style-theme="shadowfell"] .entities-title {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px; text-transform: uppercase;
}
body[data-style-theme="shadowfell"] .npc-name {
  font-family: 'Cormorant Garamond', serif;
}
body[data-style-theme="shadowfell"] #col-left { box-shadow: 2px 0 12px rgba(0,0,0,0.2); }
body[data-style-theme="shadowfell"] #col-right { box-shadow: -2px 0 12px rgba(0,0,0,0.2); }

/* Output scroll — угасающий мир */
body[data-style-theme="shadowfell"] #output-scroll {
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%, transparent 35%, rgba(0,0,0,0.05) 100%),
    radial-gradient(ellipse 40% 35% at 20% 20%, rgba(0,0,0,0.03), transparent),
    radial-gradient(ellipse 35% 40% at 80% 75%, rgba(0,0,0,0.02), transparent);
}
body[data-style-theme="shadowfell"] #output-scroll::-webkit-scrollbar-thumb {
  background: rgba(120,120,140,0.08);
}