:root{
  --gold:#d9b871;
  --gold-bright:#f0d493;
  --ink:#0b0c0e;
  --panel:rgba(10,9,8,.72);
  --panel-light:rgba(20,17,14,.55);
  --border:rgba(255,255,255,.14);
  --text:#eee6d5;
  --text-dim:#c9c0ae;
  --tile-size:78px;
  --tile-gap:22px 46px;
  --tile-bg:rgba(10,10,12,.62);
  --tile-border:rgba(255,255,255,.22);
  --tile-icon:#f1ead8;
  --tile-label-color:#f1e9d8;
}

body.theme-day{
  --tile-bg:rgba(24,17,9,.82);
  --tile-border:rgba(20,13,4,.55);
  --tile-icon:#fbf1dc;
  --tile-label-color:#fff8e8;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  font-family:'Cormorant Garamond','Segoe UI',serif;
  font-family:'Trebuchet MS',sans-serif;
  color:var(--text);
  position:relative;
  isolation:isolate;
}

/* ---------- backgrounds ---------- */
.bg-layer{
  position:fixed;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:-2;
  transition:opacity 1.1s ease;
}
.bg-day{background-image:url('background/day.png'); opacity:0;}
.bg-night{background-image:url('background/night.png'); opacity:1;}
body.theme-day .bg-day{opacity:1;}
body.theme-day .bg-night{opacity:0;}

.vignette{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  box-shadow:inset 0 0 18vw rgba(0,0,0,.75);
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  transition:background .6s ease, box-shadow .6s ease;
}
body.theme-day .vignette{
  box-shadow:inset 0 0 18vw rgba(0,0,0,.55);
  background:radial-gradient(ellipse at center, rgba(10,7,2,.16) 40%, rgba(0,0,0,.5) 100%);
}

/* ---------- login screen ---------- */
.hidden{display:none !important;}

.login-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  background:rgba(6,6,8,.55);
  backdrop-filter:blur(2px);
}
.login-card{
  width:320px;
  max-width:90vw;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:36px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  box-shadow:0 25px 70px rgba(0,0,0,.6);
}
.login-title{
  font-family:'Cinzel Decorative','Cinzel',serif;
  font-size:26px;
  letter-spacing:1.5px;
  color:#f2ead9;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.login-sub{
  margin:0 0 6px;
  font-size:12.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-dim);
}
.login-input{
  width:100%;
  background:rgba(0,0,0,.4);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 14px;
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  outline:none;
  transition:border-color .2s;
}
.login-input:focus{border-color:var(--gold);}
.login-btn{
  width:100%;
  background:rgba(217,184,113,.18);
  border:1px solid var(--gold);
  color:var(--gold-bright);
  font-family:inherit;
  font-weight:600;
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:11px 14px;
  border-radius:8px;
  cursor:pointer;
  transition:background .2s;
}
.login-btn:hover{background:rgba(217,184,113,.32);}
.login-error{
  min-height:14px;
  margin:0;
  font-size:12.5px;
  color:#e35b5b;
}

/* ---------- header ---------- */
.site-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:22px 30px 0;
  position:relative;
  z-index:20;
}
.logo-wrap{text-align:center; flex:1;}
.logo{
  font-family:'Cinzel Decorative','Cinzel',serif;
  font-size:clamp(28px,4vw,44px);
  letter-spacing:2px;
  margin:0;
  color:#f2ead9;
  text-shadow:0 2px 10px rgba(0,0,0,.8), 0 0 24px rgba(200,170,100,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.logo-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.1em;
  height:1.1em;
  margin:0 4px;
}
.logo-badge .fa-shield-halved{
  position:absolute;
  font-size:1.5em;
  color:#2d3f66;
  -webkit-text-stroke:1px #8fa3d1;
}
.logo-badge .fa-dragon{
  position:relative;
  font-size:.62em;
  color:#e7ecf7;
}
.logo-badge.small{font-size:16px; margin:0 6px;}

.tagline{
  margin:2px 0 0;
  font-size:13px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--text-dim);
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}

.theme-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  color:var(--text-dim);
  font-size:15px;
  user-select:none;
}
.switch-track{
  position:relative;
  width:46px;
  height:24px;
  background:rgba(0,0,0,.5);
  border:1px solid var(--border);
  border-radius:20px;
  display:inline-block;
}
.switch-track input{
  position:absolute;
  inset:0;
  opacity:0;
  margin:0;
  cursor:pointer;
}
.switch-thumb{
  position:absolute;
  top:2px; left:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--gold-bright);
  transition:transform .25s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.6);
}
.switch-track input:checked ~ .switch-thumb{transform:translateX(22px);}

/* ---------- discord connect bar ---------- */
.connect-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:16px auto 0;
  padding:0 20px;
  position:relative;
  z-index:20;
}
.status-pill{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--text-dim);
  padding:9px 16px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:999px;
  white-space:nowrap;
}
.status-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#8a8a8a;
  transition:background .2s, box-shadow .2s;
}
.status-dot.online{
  background:#4fd67a;
  box-shadow:0 0 8px #4fd67a;
}
.connect-input{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:999px;
  padding:9px 16px;
  color:var(--text);
  font-family:inherit;
  font-size:12.5px;
  outline:none;
  width:210px;
  transition:border-color .2s;
}
.connect-input::placeholder{color:var(--text-dim);}
.connect-input:focus{border-color:var(--gold);}
.connect-btn{
  background:rgba(217,184,113,.16);
  border:1px solid var(--gold);
  color:var(--gold-bright);
  font-family:inherit;
  font-weight:600;
  font-size:12px;
  letter-spacing:.5px;
  padding:10px 18px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s, transform .1s;
}
.connect-btn:hover{background:rgba(217,184,113,.3);}
.connect-btn:active{transform:scale(.97);}
.connect-btn-ghost{
  background:var(--panel);
  border-color:var(--border);
  color:var(--text-dim);
}
.connect-btn-ghost:hover{background:var(--panel-light); color:var(--text);}

@media (max-width:640px){
  .connect-input{width:160px;}
  .status-pill,.connect-input,.connect-btn{font-size:11.5px; padding:8px 12px;}
}

/* ---------- sound grid ---------- */
.sound-grid{
  max-width:900px;
  margin:18px auto 190px;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--tile-gap);
  justify-items:center;
  position:relative;
  z-index:10;
}

.tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:120px;
}
.tile-label{
  font-size:11.5px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--tile-label-color);
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.75);
  margin-bottom:10px;
  text-align:center;
  min-height:28px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  line-height:1.25;
}
.tile-btn{
  position:relative;
  width:var(--tile-size);
  height:var(--tile-size);
  border-radius:50%;
  background:var(--tile-bg);
  border:2px solid var(--tile-border);
  color:var(--tile-icon);
  font-size:26px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .25s, border-color .25s, box-shadow .25s, transform .15s;
  backdrop-filter:blur(1px);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.tile-btn:hover{
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 4px 18px rgba(0,0,0,.5);
}
.tile-btn .icon-playing{display:none;}
.tile-btn.playing{
  border-color:var(--gold-bright);
  box-shadow:0 0 0 3px rgba(240,212,147,.15), 0 0 22px rgba(240,212,147,.45);
  animation:tile-pulse 1.8s ease-in-out infinite;
}
.tile-btn.playing .icon-default{display:none;}
.tile-btn.playing .icon-playing{
  display:inline-block;
  animation:spin 2.4s linear infinite;
}

@keyframes tile-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(240,212,147,.12), 0 0 18px rgba(240,212,147,.4);}
  50%{box-shadow:0 0 0 6px rgba(240,212,147,.2), 0 0 30px rgba(240,212,147,.6);}
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.volume-wrap{
  width:82px;
  height:0;
  overflow:hidden;
  opacity:0;
  margin-top:8px;
  transition:height .25s ease, opacity .25s ease, margin .25s ease;
}
.tile-btn.playing + .volume-wrap{
  height:18px;
  opacity:1;
}
.volume-slider{
  width:100%;
  accent-color:var(--gold-bright);
  cursor:pointer;
}

/* ---------- now playing panel ---------- */
.active-panel{
  position:fixed;
  right:26px;
  bottom:100px;
  width:230px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  z-index:25;
  transform:translateY(12px) scale(.97);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.active-panel.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.active-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.active-panel h3{
  margin:0;
  font-family:'Cinzel',serif;
  font-size:14px;
  letter-spacing:1px;
  color:var(--gold-bright);
}
.close-panel{background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:14px;}
#activeList{list-style:none; margin:0; padding:0; max-height:220px; overflow-y:auto;}
#activeList li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:6px 0;
  font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#activeList li:last-child{border-bottom:none;}
#activeList button{
  background:none;
  border:none;
  color:var(--text-dim);
  cursor:pointer;
}
#activeList button:hover{color:#e35b5b;}
.empty-msg{
  font-size:12.5px;
  color:var(--text-dim);
  margin:4px 0 0;
  text-align:center;
}

/* ---------- tab bar ---------- */
.tab-bar{
  position:fixed;
  bottom:26px;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20;
  padding:0 24px;
}
.tabs{
  display:flex;
  align-items:center;
  gap:2px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:30px;
  padding:6px;
  backdrop-filter:blur(3px);
}
.tab{
  background:none;
  border:none;
  color:var(--text-dim);
  font-family:inherit;
  font-size:12.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:9px 18px;
  border-radius:22px;
  cursor:pointer;
  transition:color .2s, background .2s;
  white-space:nowrap;
}
.tab:hover{color:var(--text);}
.tab.active{
  background:rgba(217,184,113,.18);
  color:var(--gold-bright);
}
.note-toggle{
  background:none;
  border:none;
  color:var(--text-dim);
  font-size:14px;
  cursor:pointer;
  padding:9px 14px 9px 10px;
  border-left:1px solid var(--border);
  margin-left:4px;
}
.note-toggle:hover, .note-toggle.active{color:var(--gold-bright);}

.stop-all{
  position:fixed;
  right:26px;
  bottom:30px;
  background:rgba(120,20,20,.55);
  border:1px solid rgba(255,120,120,.35);
  color:#f5d9d9;
  font-family:inherit;
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:11px 18px;
  border-radius:24px;
  cursor:pointer;
  z-index:20;
  transition:background .2s, transform .1s;
}
.stop-all:hover{background:rgba(160,25,25,.75);}
.stop-all:active{transform:scale(.96);}

/* ---------- responsive ---------- */
@media (max-width: 720px){
  :root{--tile-size:60px; --tile-gap:22px 14px;}
  .sound-grid{grid-template-columns:repeat(3,1fr); margin-bottom:210px;}
  .tile-label{font-size:9.5px;}
  .site-header{padding:16px 16px 0;}
  .active-panel{right:10px; width:180px;}
  .tabs{flex-wrap:wrap; justify-content:center;}
  .tab{padding:7px 10px; font-size:10.5px;}
  .stop-all{right:10px; bottom:150px; padding:8px 14px;}
}
@media (max-width: 420px){
  .sound-grid{grid-template-columns:repeat(2,1fr);}
}

/* Мини-тост (уведомления подключения/ошибок) */
.toast{
  position:fixed; left:50%; bottom:88px; transform:translateX(-50%);
  max-width:90vw; padding:10px 18px; border-radius:10px;
  background:rgba(20,14,8,.94); color:#f3e6cf;
  border:1px solid rgba(200,160,90,.45);
  font-family:'Cinzel',serif; font-size:14px; letter-spacing:.02em;
  box-shadow:0 8px 30px rgba(0,0,0,.5); z-index:1000;
}

/* Индикатор наличия звука — зелёная звёздочка в углу кнопки */
.sound-indicator{
  position:absolute;
  top:-3px;
  right:-3px;
  font-size:11px;
  line-height:1;
  color:#4ade80;
  filter:drop-shadow(0 0 3px rgba(74,222,128,.75));
  pointer-events:none;
}