/*
  Oops, You're Dead — 80s Neon Theme
  Load this AFTER /styles.css:
  <link rel="stylesheet" href="/styles.css" />
  <link rel="stylesheet" href="/themes/neon-80s.css" />
*/

:root {
  --neon-bg-0: #070812;
  --neon-bg-1: #11072b;
  --neon-bg-2: #061f3d;
  --neon-panel: rgba(7, 8, 18, 0.88);
  --neon-panel-soft: rgba(14, 18, 42, 0.78);
  --neon-red: #ff2b6d;
  --neon-red-soft: rgba(255, 43, 109, 0.34);
  --neon-blue: #27d7ff;
  --neon-blue-soft: rgba(39, 215, 255, 0.32);
  --neon-purple: #a855ff;
  --neon-yellow: #ffe66d;
  --neon-green: #2dff9a;
  --neon-text: #f7fbff;
  --neon-muted: #b9c8ff;
  --neon-dark-text: #050711;
}

body {
  color: var(--neon-text);
  background:
    linear-gradient(rgba(255, 43, 109, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 215, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 15% 8%, rgba(255, 43, 109, 0.34), transparent 26%),
    radial-gradient(circle at 85% 10%, rgba(39, 215, 255, 0.34), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(168, 85, 255, 0.28), transparent 36%),
    linear-gradient(135deg, var(--neon-bg-0), var(--neon-bg-1) 45%, var(--neon-bg-2));
  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto,
    auto,
    auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.035) 0,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: screen;
  opacity: 0.28;
  z-index: 9999;
}

.card {
  border-color: rgba(39, 215, 255, 0.75);
  background:
    linear-gradient(180deg, rgba(14, 18, 42, 0.94), rgba(5, 7, 17, 0.94)),
    var(--neon-panel);
  box-shadow:
    0 0 0 1px rgba(255, 43, 109, 0.4) inset,
    0 0 22px rgba(39, 215, 255, 0.18),
    0 0 38px rgba(255, 43, 109, 0.14),
    0 18px 40px rgba(0, 0, 0, 0.55);
}

h1,
h2,
h3,
a,
.big-link {
  color: var(--neon-blue);
  text-shadow:
    0 0 8px rgba(39, 215, 255, 0.7),
    0 0 18px rgba(39, 215, 255, 0.38);
}

h1 {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.muted {
  color: var(--neon-muted);
}

input,
select,
textarea {
  background: rgba(5, 7, 17, 0.92);
  border-color: rgba(39, 215, 255, 0.58);
  color: var(--neon-text);
  box-shadow: 0 0 12px rgba(39, 215, 255, 0.1) inset;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--neon-red);
  box-shadow:
    0 0 0 2px rgba(255, 43, 109, 0.16),
    0 0 18px rgba(255, 43, 109, 0.28);
}

button,
.button-link {
  background: linear-gradient(180deg, rgba(255, 43, 109, 0.95), rgba(132, 24, 98, 0.96));
  border: 1px solid rgba(255, 43, 109, 0.88);
  color: var(--neon-text);
  box-shadow:
    0 0 12px rgba(255, 43, 109, 0.26),
    0 0 18px rgba(255, 43, 109, 0.16) inset;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.36);
}

button:hover,
.button-link:hover {
  background: linear-gradient(180deg, rgba(255, 84, 136, 1), rgba(174, 36, 124, 1));
  border-color: rgba(255, 151, 188, 1);
  box-shadow:
    0 0 18px rgba(255, 43, 109, 0.48),
    0 0 24px rgba(255, 43, 109, 0.22) inset;
}

.secondary,
.secondary-link,
.admin-tab-button,
.sub-tab-button {
  background: linear-gradient(180deg, rgba(39, 215, 255, 0.22), rgba(13, 54, 92, 0.8));
  border: 1px solid rgba(39, 215, 255, 0.55);
  color: var(--neon-text);
}

.secondary:hover,
.secondary-link:hover,
.admin-tab-button:hover,
.sub-tab-button:hover {
  background: linear-gradient(180deg, rgba(39, 215, 255, 0.36), rgba(18, 76, 120, 0.92));
  box-shadow: 0 0 16px rgba(39, 215, 255, 0.34);
}

.danger-button {
  background: linear-gradient(180deg, rgba(255, 43, 109, 0.98), rgba(124, 12, 42, 0.98));
  border-color: rgba(255, 43, 109, 0.9);
}

.success {
  border-color: rgba(45, 255, 154, 0.72);
  background: rgba(45, 255, 154, 0.13);
}

.error {
  border-color: rgba(255, 43, 109, 0.75);
  background: rgba(255, 43, 109, 0.14);
}

.admin-tabs {
  background: rgba(5, 7, 17, 0.62);
  border-color: rgba(39, 215, 255, 0.32);
  box-shadow:
    0 0 18px rgba(39, 215, 255, 0.12),
    0 0 24px rgba(255, 43, 109, 0.08) inset;
}

.admin-tab-button.active,
.sub-tab-button.active {
  background: linear-gradient(180deg, rgba(39, 215, 255, 0.88), rgba(21, 108, 160, 0.96));
  border-color: rgba(148, 237, 255, 1);
  color: var(--neon-dark-text);
  box-shadow:
    0 0 18px rgba(39, 215, 255, 0.52),
    0 0 28px rgba(39, 215, 255, 0.22) inset;
  text-shadow: none;
}

.admin-section,
.admin-item,
.team-card,
.tag-card,
.event-card,
.objective-card,
.join-qr-card,
.join-player-card {
  border-color: rgba(39, 215, 255, 0.26);
  background: var(--neon-panel-soft);
  box-shadow:
    0 0 0 1px rgba(255, 43, 109, 0.12) inset,
    0 0 14px rgba(39, 215, 255, 0.08);
}

.admin-status-card {
  border-color: rgba(39, 215, 255, 0.52);
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 43, 109, 0.16), transparent 42%),
    radial-gradient(circle at 88% 20%, rgba(39, 215, 255, 0.18), transparent 44%),
    rgba(5, 7, 17, 0.76);
  box-shadow:
    0 0 18px rgba(39, 215, 255, 0.16),
    0 0 18px rgba(255, 43, 109, 0.12) inset;
}

.admin-status-label {
  color: var(--neon-red);
  text-shadow: 0 0 8px rgba(255, 43, 109, 0.66);
}

.status-pill {
  border-color: rgba(39, 215, 255, 0.46);
  background: rgba(39, 215, 255, 0.12);
  color: var(--neon-text);
}

.status-pill-good,
.status-pill-waiting {
  border-color: rgba(45, 255, 154, 0.62);
  background: rgba(45, 255, 154, 0.13);
}

.status-pill-paused {
  border-color: rgba(255, 230, 109, 0.68);
  background: rgba(255, 230, 109, 0.13);
}

.status-pill-ended {
  border-color: rgba(255, 43, 109, 0.68);
  background: rgba(255, 43, 109, 0.14);
}

.ready-button {
  background: linear-gradient(180deg, rgba(45, 255, 154, 0.98), rgba(10, 168, 117, 0.98));
  border-color: rgba(150, 255, 206, 0.95);
  color: #04150d;
  box-shadow:
    0 0 20px rgba(45, 255, 154, 0.38),
    0 0 30px rgba(45, 255, 154, 0.18) inset;
  text-shadow: none;
}

.ready-button:hover {
  background: linear-gradient(180deg, rgba(116, 255, 190, 1), rgba(28, 208, 142, 1));
  box-shadow:
    0 0 28px rgba(45, 255, 154, 0.58),
    0 0 34px rgba(45, 255, 154, 0.25) inset;
}

.profile-icon-button {
  border-color: rgba(39, 215, 255, 0.72);
  background: rgba(5, 7, 17, 0.72);
  box-shadow:
    0 0 14px rgba(39, 215, 255, 0.26),
    0 0 18px rgba(255, 43, 109, 0.16) inset;
}

.profile-icon-button:hover {
  border-color: rgba(255, 43, 109, 0.95);
  background: rgba(255, 43, 109, 0.14);
  box-shadow: 0 0 18px rgba(255, 43, 109, 0.38);
}

.profile-fallback-svg {
  fill: rgba(39, 215, 255, 0.9);
  filter: drop-shadow(0 0 6px rgba(39, 215, 255, 0.55));
}

.admin-map,
#adminMap {
  border-color: rgba(39, 215, 255, 0.78);
  background: #070812;
  box-shadow:
    0 0 18px rgba(39, 215, 255, 0.18),
    0 0 30px rgba(255, 43, 109, 0.1) inset;
}

.map-status,
.join-qr-placeholder,
.modal-backdrop .card {
  background: rgba(5, 7, 17, 0.82);
  border-color: rgba(39, 215, 255, 0.32);
}

.join-qr-image {
  box-shadow:
    0 0 0 3px rgba(39, 215, 255, 0.25),
    0 0 24px rgba(39, 215, 255, 0.28),
    0 0 28px rgba(255, 43, 109, 0.18);
}

.join-player-row {
  background: rgba(39, 215, 255, 0.08);
  border: 1px solid rgba(39, 215, 255, 0.18);
}

.fallback-avatar {
  background: rgba(255, 43, 109, 0.2);
  border-color: rgba(255, 43, 109, 0.48);
}

.score {
  color: var(--neon-red);
  text-shadow:
    0 0 10px rgba(255, 43, 109, 0.7),
    0 0 24px rgba(255, 43, 109, 0.38);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #070812;
  color: var(--neon-text);
  border-color: rgba(39, 215, 255, 0.7);
}

.leaflet-control-zoom a,
.leaflet-control-attribution {
  background: rgba(5, 7, 17, 0.88) !important;
  color: var(--neon-blue) !important;
  border-color: rgba(39, 215, 255, 0.4) !important;
}

.map-vertex-pin {
  background: var(--neon-blue);
  border-color: #070812;
  color: #04131a;
  box-shadow: 0 0 12px rgba(39, 215, 255, 0.64);
}

.map-objective-pin {
  background: var(--neon-red);
  box-shadow: 0 0 12px rgba(255, 43, 109, 0.64);
}

.map-draft-objective-pin,
.map-you-pin {
  background: var(--neon-green);
  box-shadow: 0 0 12px rgba(45, 255, 154, 0.64);
}
