:root {
  --teal: #00A5A8;
  --text: #a0c8ca;
  --dim: #2a7a7b;
  --deep: #1e5e60;
  --line: #0d3537;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  overflow: hidden;
}
a { color: var(--teal); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--teal); color: #000; }

/* ---- the knights, drifting ---- */
#logo-wrap {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; user-select: none; z-index: 0;
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50%  { transform: translate(calc(-50% + 18px), calc(-50% - 12px)) rotate(-0.6deg) scale(1.025); }
  100% { transform: translate(calc(-50% - 14px), calc(-50% + 10px)) rotate(0.5deg) scale(1.04); }
}
#logo {
  font-family: 'Courier New', monospace;
  line-height: 1.15; letter-spacing: 0.05em;
  color: var(--teal); white-space: pre;
  filter: blur(1.3px);
  opacity: 0.13;
  animation: glow 10s ease-in-out infinite alternate;
}
@keyframes glow {
  from { opacity: 0.09; }
  to   { opacity: 0.16; }
}

/* ---- top ---- */
#top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 34px;
}
.brand { color: var(--teal); font-weight: bold; font-size: 15px; letter-spacing: 0.02em; }
.brand:hover { text-decoration: none; color: #fff; }

#srv { text-align: right; max-width: min(420px, 60vw); }
#srv-toggle { color: var(--text); font-size: 13px; }
#srv-toggle:hover #srv-line { color: #fff; }
#srv-line b { color: #fff; font-weight: normal; }

#srv-panel {
  margin-top: 10px;
  text-align: left; font-size: 13px;
}
#srv[data-closed] #srv-panel { display: none; }
#srv-name { color: #fff; margin-bottom: 8px; }
#srv-players { border-collapse: collapse; width: 100%; font-size: 12px; }
#srv-players td { padding: 2px 0; color: var(--text); }
#srv-players td + td { text-align: right; color: var(--dim); padding-left: 18px; white-space: nowrap; }
#srv-players .name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-join { margin-top: 10px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; }
#copy-connect { color: var(--teal); font-family: 'Courier New', monospace; font-size: 13px; }
#copy-connect:hover { color: #fff; }

/* ---- top left ---- */
.tag { color: var(--dim); font-size: 13px; margin-top: 4px; }
.mail { display: inline-block; font-size: 13px; margin-top: 2px; }

/* ---- music + links ---- */
#notice {
  position: fixed; left: 34px; bottom: 26px; z-index: 30;
  color: var(--teal); font-size: 20px; text-align: left; line-height: 1.3;
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
#notice::before { content: '\25B8  '; }
#notice::after { content: '_'; }
#notice.show { opacity: 1; pointer-events: auto; }
#notice:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

#corner {
  position: fixed; right: 34px; bottom: 24px; z-index: 30;
  display: flex; align-items: center; gap: 26px;
}
#player { display: flex; align-items: center; gap: 14px; font-size: 12px; }
#pbtn { color: var(--teal); min-width: 3.2em; text-align: left; }
#pbtn:hover { color: #fff; }
.track { color: var(--dim); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 64px; height: 1px; background: var(--deep); outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
input[type=range]::-moz-range-thumb { width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--teal); }

#socials { display: flex; align-items: center; gap: 16px; }
#socials a { display: block; width: 19px; height: 19px; }
#socials svg { width: 100%; height: 100%; fill: var(--teal); transition: fill .15s, transform .15s; }
#socials a:hover svg { fill: #fff; transform: translateY(-2px); }

/* ---- phones ---- */
@media (max-width: 760px) {
  body { overflow: auto; }
  #top { position: static; flex-direction: column; gap: 14px; padding: 18px 20px 0; }
  #srv { text-align: left; max-width: none; }
  #top { padding-bottom: 150px; }
  #notice { left: 20px; right: 20px; bottom: 64px; font-size: 17px; }
  #corner { left: 20px; right: 20px; bottom: 18px; justify-content: space-between; gap: 12px; }
  .track { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #logo-wrap, #logo { animation: none; }
}