:root {
  --bg: #040506;
  --text: #e8e4dc;
  --muted: #a8a096;
  --line: rgba(226,220,202,.18);
  --panel: rgba(7,8,9,.88);
  --panel-soft: rgba(12,13,14,.78);
  --red: #d6382d;
  --red-hot: #ff5143;
  --yellow: #d49a29;
  --green: #5ac477;
  --survivor: #bac27f;
  --killer: #e44336;
  --shadow: 0 25px 75px rgba(0,0,0,.68);
  --radius: 4px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  isolation: isolate;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.ambient-background {
  position: fixed;
  inset: 0;
  z-index: -4;
  overflow: hidden;
  background: #030405;
}
.ambient-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px) brightness(.28);
  transform: scale(1.05);
}
.ambient-overlay {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: radial-gradient(circle at center, transparent 10%, rgba(0,0,0,.4) 70%, rgba(0,0,0,.82) 100%);
}
.page-grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .045;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.1) 4px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,.06) 6px);
  mix-blend-mode: overlay;
}

/* Login v1.5: echtes responsives HTML, kein Bild-Overlay */
.login-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  background: #020304;
}
.login-background {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #020304;
}
.login-background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.02) contrast(1.08) brightness(1.28);
}
.login-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 44%, rgba(0,0,0,.02) 0 28%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.25));
}
.login-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 28px);
  padding:
    max(18px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.login-logo {
  display: block;
  width: min(920px, 90vw);
  max-height: min(22svh, 210px);
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.8));
  user-select: none;
  -webkit-user-drag: none;
}
.hazard-frame {
  position: relative;
  width: min(570px, calc(100vw - 30px));
  padding: 14px;
  background:
    repeating-linear-gradient(-45deg, #171717 0 18px, #c48a21 18px 36px);
  border: 1px solid rgba(235,177,54,.55);
  box-shadow:
    0 28px 90px rgba(0,0,0,.78),
    inset 0 0 0 1px rgba(255,255,255,.04);
  clip-path: polygon(2.2% 0, 97.8% 0, 100% 2.2%, 100% 97.8%, 97.8% 100%, 2.2% 100%, 0 97.8%, 0 2.2%);
}
.hazard-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 27%, rgba(0,0,0,.86) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 45%, rgba(0,0,0,.72) 0 1px, transparent 2px),
    linear-gradient(115deg, transparent 20%, rgba(255,255,255,.08) 20.5%, transparent 21%),
    linear-gradient(25deg, transparent 61%, rgba(0,0,0,.68) 61.5%, transparent 62%);
  background-size: 19px 23px, 29px 31px, 100% 100%, 100% 100%;
  opacity: .72;
}
.hazard-panel-inner {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 4.2vw, 48px);
  border: 1px solid rgba(218,165,59,.34);
  background:
    linear-gradient(rgba(6,7,8,.95), rgba(8,9,9,.94)),
    radial-gradient(circle at center, rgba(120,21,16,.12), transparent 58%);
  box-shadow: inset 0 0 55px rgba(0,0,0,.86);
}
.login-panel-header h1 {
  margin: 0;
  color: #dedbd4;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  font-size: clamp(2.25rem, 6vw, 4.1rem);
  font-weight: 800;
  letter-spacing: .065em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 3px 8px rgba(0,0,0,.9);
}
.heading-rule {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 16px 0 clamp(22px, 3vw, 30px);
  color: #8d877d;
}
.heading-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #777168);
}
.heading-rule span:last-child { background: linear-gradient(90deg, #777168, transparent); }
.heading-rule i { font-style: normal; font-size: .72rem; }
.login-form {
  display: grid;
  gap: 11px;
}
.login-form label {
  margin-top: 5px;
  color: #d6d0c5;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .065em;
}
.login-input-shell {
  position: relative;
  display: flex;
  align-items: center;
}
.login-field-icon {
  position: absolute;
  left: 14px;
  z-index: 2;
  color: #817a70;
  font-size: 1.15rem;
  pointer-events: none;
}
.login-input-shell input {
  width: 100%;
  min-height: 54px;
  padding: 0 54px 0 43px;
  border: 1px solid rgba(211,207,194,.48);
  border-radius: 0;
  background: rgba(1,2,2,.78);
  color: #f0ece4;
  font-size: 1rem;
  outline: none;
  box-shadow: inset 0 0 26px rgba(0,0,0,.68);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-input-shell input::placeholder { color: #8e877c; opacity: 1; }
.login-input-shell input:hover {
  border-color: rgba(225,218,197,.72);
  background: rgba(4,5,5,.9);
}
.login-input-shell input:focus {
  border-color: var(--yellow);
  background: rgba(3,4,4,.96);
  box-shadow:
    0 0 0 3px rgba(212,154,41,.15),
    0 0 18px rgba(212,154,41,.16),
    inset 0 0 24px rgba(0,0,0,.72);
}
.login-password-toggle {
  position: absolute;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #9b9489;
  font-size: 1.18rem;
  transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
}
.login-password-toggle:hover,
.login-password-toggle:focus-visible {
  color: var(--red-hot);
  text-shadow: 0 0 10px rgba(255,81,67,.65);
  transform: scale(1.06);
  outline: none;
}
.login-submit {
  width: 100%;
  min-height: 58px;
  margin-top: 13px;
  border: 1px solid rgba(198,190,174,.52);
  background:
    linear-gradient(180deg, rgba(18,19,19,.82), rgba(4,5,5,.92)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 6px, transparent 6px 12px);
  color: #ddd9d0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-weight: 900;
  letter-spacing: .105em;
  box-shadow: inset 0 0 30px rgba(0,0,0,.72);
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.login-submit:hover,
.login-submit:focus-visible {
  color: var(--red-hot);
  border-color: var(--red);
  background:
    linear-gradient(180deg, rgba(58,8,6,.88), rgba(15,3,3,.95)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 6px, transparent 6px 12px);
  box-shadow:
    0 0 24px rgba(214,56,45,.38),
    inset 0 0 28px rgba(122,15,11,.34);
  transform: translateY(-2px);
  outline: none;
}
.login-submit:active { transform: translateY(0); }
.login-error-message {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--red-hot);
  background: rgba(0,0,0,.82);
  color: #ffd5d0;
  text-align: center;
  font-size: .9rem;
  line-height: 1.42;
}

@media (max-height: 760px) and (min-width: 700px) {
  .login-shell { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .login-logo { width: min(700px, 82vw); max-height: 105px; }
  .hazard-frame { width: min(520px, calc(100vw - 30px)); padding: 11px; }
  .hazard-panel-inner { padding: 23px 32px; }
  .login-panel-header h1 { font-size: 2.45rem; }
  .heading-rule { margin: 10px 0 16px; }
  .login-input-shell input { min-height: 46px; }
  .login-submit { min-height: 48px; margin-top: 8px; font-size: 1.35rem; }
}

@media (max-width: 620px) {
  .login-shell { justify-content: center; gap: 14px; padding-left: 10px; padding-right: 10px; }
  .login-logo { width: min(96vw, 560px); max-height: 105px; }
  .hazard-frame { width: min(100%, 500px); padding: 9px; }
  .hazard-panel-inner { padding: 23px 18px 25px; }
  .login-panel-header h1 { font-size: clamp(2rem, 12vw, 3rem); }
  .heading-rule { margin: 12px 0 20px; }
  .login-input-shell input { min-height: 52px; font-size: 16px; }
  .login-submit { min-height: 54px; }
}

@media (max-width: 380px) {
  .login-logo { width: 96vw; max-height: 82px; }
  .hazard-panel-inner { padding: 20px 14px 22px; }
  .login-field-icon { left: 11px; }
  .login-input-shell input { padding-left: 38px; padding-right: 48px; }
}

/* Top navigation */

.topbar { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 18px; min-height: 68px; padding: 10px clamp(14px, 2.4vw, 34px); background: rgba(2,3,4,.78); border-bottom: 1px solid rgba(226,220,202,.12); backdrop-filter: blur(12px); }
.topbar-brand-row { display: flex; align-items: center; gap: 12px; }
.wordmark { color: var(--red-hot); font-weight: 900; letter-spacing: .07em; font-size: clamp(1rem, 1.6vw, 1.4rem); white-space: nowrap; }
.menu-toggle { display: none; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); background: rgba(0,0,0,.45); color: var(--text); }
.top-nav { display: flex; align-items: center; justify-content: center; gap: clamp(2px, .6vw, 8px); min-width: 0; }
.top-nav-empty { min-height: 1px; }
.top-nav a { padding: 10px clamp(8px, 1vw, 14px); border: 1px solid transparent; color: #d5d0c7; font-size: clamp(.82rem, 1vw, 1rem); white-space: nowrap; }
.top-nav a:hover, .top-nav a.active { border-color: rgba(214,56,45,.5); background: rgba(80,12,9,.3); color: #ff6657; }
.account-bar { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; white-space: nowrap; font-size: clamp(.8rem, 1vw, .96rem); }
.account-actions { position: relative; display: flex; align-items: center; gap: 10px; }
.account-identity { display: inline-flex; align-items: center; }
.account-bar strong { color: var(--red-hot); }
.account-bar form { margin: 0; }
.user-menu-button {
  min-width: 128px;
  color: var(--red-hot);
  background: rgba(16,2,2,.78);
  border: 1px solid rgba(232,25,21,.42);
  font-weight: 800;
  letter-spacing: .035em;
}
.user-menu-button:hover,
.user-menu-button[aria-expanded="true"] {
  color: #ff5b52;
  border-color: rgba(255,66,56,.72);
  box-shadow: inset 0 0 16px rgba(232,25,21,.1), 0 0 10px rgba(232,25,21,.16);
}
.user-settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: min(360px, calc(100vw - 28px));
  padding: 10px;
  color: #f0f1ef;
  background: repeating-linear-gradient(-45deg, #d0a72c 0 10px, #1b1b19 10px 20px);
  box-shadow: 0 18px 40px rgba(0,0,0,.56), 0 0 0 1px rgba(0,0,0,.9);
  overflow: hidden;
}
.user-settings-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(ellipse at 18% 28%, rgba(0,0,0,.85) 0 1px, transparent 2px 100%),
    radial-gradient(ellipse at 76% 63%, rgba(0,0,0,.75) 0 2px, transparent 3px 100%),
    repeating-linear-gradient(103deg, transparent 0 22px, rgba(0,0,0,.42) 23px 24px, transparent 25px 47px);
  mix-blend-mode: multiply;
}
.user-settings-menu-inner {
  position: relative;
  z-index: 1;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(8,11,12,.98), rgba(2,5,6,.97)),
    repeating-linear-gradient(8deg, transparent 0 6px, rgba(255,255,255,.012) 7px 8px);
  border: 1px solid rgba(208,167,44,.34);
  box-shadow: inset 0 0 26px rgba(0,0,0,.8);
}
.user-settings-menu-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    linear-gradient(117deg, transparent 0 31%, rgba(214,181,66,.34) 31.4% 31.7%, transparent 32%),
    linear-gradient(16deg, transparent 0 62%, rgba(255,255,255,.18) 62.2% 62.35%, transparent 62.7%),
    radial-gradient(circle at 80% 18%, rgba(111,78,18,.5), transparent 18%);
}
.user-settings-menu h3 {
  margin: 0 0 14px;
  color: var(--red-hot);
  font-size: 1.05rem;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.settings-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  cursor: pointer;
  white-space: normal;
}
.settings-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track {
  position: relative;
  width: 42px;
  height: 22px;
  border: 1px solid rgba(181,189,189,.42);
  background: rgba(30,34,34,.95);
  box-shadow: inset 0 0 8px rgba(0,0,0,.7);
  transition: border-color .16s ease, background .16s ease;
}
.toggle-track i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #9aa0a0;
  box-shadow: 0 1px 4px rgba(0,0,0,.7);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.settings-toggle input:checked + .toggle-track { border-color: rgba(158,240,0,.75); background: rgba(25,52,4,.9); }
.settings-toggle input:checked + .toggle-track i { transform: translateX(20px); background: var(--lime); box-shadow: 0 0 9px rgba(158,240,0,.55); }
.settings-toggle input:focus-visible + .toggle-track { outline: 2px solid rgba(214,181,66,.75); outline-offset: 2px; }
.toggle-label { color: #e3e5e2; line-height: 1.3; }
.user-menu-divider { height: 1px; margin: 12px 0; background: linear-gradient(90deg, transparent, rgba(214,181,66,.65), transparent); }
.user-menu-reset-button {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  color: #ff746d;
  background: rgba(35,4,3,.82);
  border: 1px solid rgba(232,25,21,.58);
  font-size: .8rem;
  letter-spacing: .035em;
}
.user-menu-reset-button:hover { color: #fff; border-color: rgba(255,72,61,.82); box-shadow: 0 0 13px rgba(232,25,21,.3); }


.page-main { width: min(1500px, calc(100% - clamp(16px, 3vw, 48px))); margin: 0 auto; padding: clamp(18px, 2.4vw, 34px) 0 54px; }

/* Controls */
.standard-form { display: grid; gap: 11px; }
.standard-form label { font-weight: 700; color: #ddd7cd; }
input, select, textarea { width: 100%; border: 1px solid rgba(226,220,202,.2); background: rgba(0,0,0,.62); color: var(--text); padding: 12px 14px; outline: none; border-radius: 0; }
input, select { min-height: 48px; }
textarea { resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus { border-color: rgba(212,154,41,.8); box-shadow: 0 0 0 3px rgba(212,154,41,.13); }
.input-shell { position: relative; display: flex; }
.input-shell input { padding-right: 50px; }
.password-toggle { position: absolute; right: 8px; top: 7px; width: 36px; height: 36px; border: 0; background: transparent; color: #9a9389; }
.primary-action, .secondary-action, .outline-action, .mini-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid rgba(226,220,202,.2); background: rgba(0,0,0,.55); color: #e2ddd4; text-align: center; }
.primary-action { border-color: rgba(214,56,45,.62); background: linear-gradient(180deg, rgba(62,8,6,.72), rgba(20,4,4,.9)); color: var(--red-hot); font-weight: 800; }
.secondary-action:hover, .outline-action:hover, .mini-action:hover, .primary-action:hover { filter: brightness(1.14); }
.compact-action { min-height: 38px; padding: 7px 12px; }
.inline-action { width: fit-content; }
.form-actions, .table-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.form-hint { margin: 0; color: var(--muted); line-height: 1.55; font-size: .91rem; }
.form-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check-row { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 10px; font-weight: 400 !important; }
.check-row input { width: 20px; height: 20px; min-height: 0; padding: 0; }
.alert { max-width: 1100px; margin: 0 auto 18px; padding: 13px 16px; border-left: 3px solid; background: rgba(0,0,0,.82); }
.alert-error { border-color: var(--red-hot); color: #ffd7d2; }
.alert-success { border-color: var(--green); color: #d8ffe1; }

/* Selection screen v1.8: background and cards are separate graphics */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.selection-page .ambient-background img {
  object-fit: cover;
  object-position: center;
  filter: brightness(.72);
  transform: scale(1.01);
}

.selection-page .ambient-overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.16) 42%, rgba(0,0,0,.42) 100%),
    radial-gradient(circle at 50% 55%, transparent 0 38%, rgba(0,0,0,.34) 88%);
}

.selection-page .page-main {
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 68px);
  display: grid;
  place-items: center;
  padding: clamp(120px, 18svh, 205px) clamp(14px, 3vw, 42px) clamp(18px, 3svh, 38px);
}

.selection-section {
  width: min(1120px, 100%);
  display: grid;
  place-items: center;
}

.selection-card-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  justify-items: center;
  gap: clamp(24px, 4vw, 66px);
}

.selection-card-button {
  --selection-accent: #d6d2c8;
  --selection-glow: rgba(214, 210, 200, .55);
  position: relative;
  display: block;
  height: min(66svh, 690px);
  max-height: 690px;
  max-width: 42vw;
  aspect-ratio: 0.64;
  isolation: isolate;
  outline: none;
  transform-origin: center bottom;
  transition: transform .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.selection-card-button.survivor-card-button {
  --selection-accent: #c8dc7b;
  --selection-glow: rgba(130, 178, 65, .82);
}

.selection-card-button.killer-card-button {
  --selection-accent: #f2473a;
  --selection-glow: rgba(207, 41, 30, .86);
}

.selection-card-button img {
  content-visibility: auto;
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transition: filter .18s ease;
}

.selection-card-button::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0.55%;
  pointer-events: none;
  opacity: 0;
  clip-path: polygon(4.4% 0, 95.6% 0, 100% 3.0%, 100% 97.0%, 95.6% 100%, 4.4% 100%, 0 97.0%, 0 3.0%);
  box-shadow:
    inset 0 0 0 3px var(--selection-accent),
    inset 0 0 24px color-mix(in srgb, var(--selection-accent) 24%, transparent);
  transition: opacity .18s ease;
}

.selection-card-button:hover,
.selection-card-button:focus-visible {
  transform: translateY(-4px) scale(1.012);
  filter:
    drop-shadow(0 0 6px var(--selection-accent))
    drop-shadow(0 0 18px var(--selection-glow))
    drop-shadow(0 20px 30px rgba(0,0,0,.56));
}

.selection-card-button:hover::after,
.selection-card-button:focus-visible::after {
  opacity: 1;
}

.selection-card-button:hover img,
.selection-card-button:focus-visible img {
  filter: brightness(1.06) contrast(1.025);
}

.selection-card-button:active {
  transform: translateY(-1px) scale(.996);
}

/* Survivor/Killer placeholder pages */
.side-placeholder-page .ambient-background img {
  filter: blur(7px) brightness(.34);
  transform: scale(1.045);
}

.side-placeholder-page .page-main {
  min-height: calc(100svh - 68px);
  display: grid;
  place-items: center;
}

.side-placeholder {
  width: min(720px, 100%);
  padding: clamp(28px, 5vw, 58px);
  text-align: center;
  background: rgba(4, 5, 6, .90);
  border: 1px solid rgba(226, 220, 202, .18);
  box-shadow: var(--shadow);
  backdrop-filter: blur(9px);
}

.side-placeholder.survivor-placeholder {
  border-color: rgba(190, 207, 118, .58);
  box-shadow: var(--shadow), 0 0 38px rgba(131, 161, 61, .16);
}

.side-placeholder.killer-placeholder {
  border-color: rgba(235, 58, 45, .62);
  box-shadow: var(--shadow), 0 0 38px rgba(186, 27, 19, .18);
}

.placeholder-emblem {
  width: 74px;
  height: 74px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226, 220, 202, .24);
  background: rgba(255, 255, 255, .04);
  font-size: 2rem;
}

.survivor-placeholder .placeholder-emblem,
.survivor-placeholder .section-kicker {
  color: var(--survivor);
}

.killer-placeholder .placeholder-emblem,
.killer-placeholder .section-kicker {
  color: var(--red-hot);
}

.side-placeholder h1 {
  margin: 8px 0 14px;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: .03em;
}

.side-placeholder > p:not(.section-kicker) {
  max-width: 55ch;
  margin: 0 auto;
  color: #c6bfb3;
  line-height: 1.7;
}

.placeholder-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 28px;
  padding: 11px 20px;
  border: 1px solid rgba(226, 220, 202, .24);
  background: rgba(0, 0, 0, .62);
  color: #e5dfd5;
  font-weight: 800;
  letter-spacing: .05em;
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.survivor-placeholder .placeholder-back:hover,
.survivor-placeholder .placeholder-back:focus-visible {
  border-color: #c4d77b;
  color: #d7e59e;
  box-shadow: 0 0 20px rgba(151, 184, 73, .24);
}

.killer-placeholder .placeholder-back:hover,
.killer-placeholder .placeholder-back:focus-visible {
  border-color: #f04437;
  color: #ff6658;
  box-shadow: 0 0 20px rgba(218, 45, 34, .25);
}

/* Challenge pages */
.challenge-dashboard { display: grid; gap: 24px; }
.progress-hero { display: grid; grid-template-columns: minmax(0,.8fr) minmax(360px,1.2fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(22px, 3vw, 38px); background: rgba(5,6,7,.87); border: 1px solid rgba(226,220,202,.16); box-shadow: var(--shadow); }
.progress-hero h1 { margin: 7px 0 10px; font-size: clamp(2rem, 4.2vw, 4rem); letter-spacing: .02em; }
.progress-hero p { color: #c7c1b6; line-height: 1.6; }
.section-kicker { margin: 0; color: var(--yellow); letter-spacing: .14em; font-size: .82rem; font-weight: 800; }
.progress-panel { padding: clamp(18px, 2.4vw, 28px); background: rgba(0,0,0,.52); border: 1px solid var(--line); }
.progress-label-row, .progress-scale { display: flex; justify-content: space-between; gap: 14px; }
.progress-label-row strong { font-size: clamp(1rem, 2vw, 1.35rem); }
.progress-track { height: 15px; margin-top: 15px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--red), #f15a43); }
.survivor-theme .progress-fill { background: linear-gradient(90deg, #7c8742, #d0d89a); }
.progress-scale { margin-top: 8px; color: var(--muted); font-size: .8rem; }
.challenge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: clamp(14px, 2vw, 22px); }
.challenge-card { min-height: 300px; display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 28px); background: rgba(5,6,7,.89); border: 1px solid rgba(226,220,202,.16); box-shadow: 0 15px 38px rgba(0,0,0,.42); }
.survivor-theme .challenge-card { border-color: rgba(187,194,127,.24); }
.killer-theme .challenge-card { border-color: rgba(228,67,54,.28); }
.challenge-card.completed { background: linear-gradient(180deg, rgba(8,22,13,.91), rgba(5,9,7,.91)); }
.killer-theme .challenge-card.completed { background: linear-gradient(180deg, rgba(35,7,6,.91), rgba(10,5,5,.91)); }
.challenge-card-top, .challenge-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.challenge-icon { width: 52px; height: 52px; display: grid; place-items: center; background: rgba(255,255,255,.06); font-size: 1.6rem; }
.challenge-state { font-size: .78rem; font-weight: 900; color: var(--muted); }
.challenge-card.completed .challenge-state { color: var(--green); }
.challenge-card h2 { margin: 22px 0 9px; font-size: clamp(1.25rem, 2vw, 1.65rem); }
.challenge-card > p { margin: 0; color: #bdb6ab; line-height: 1.62; }
.challenge-card-bottom { margin-top: auto; padding-top: 24px; align-items: flex-end; }
.challenge-card-bottom > strong { color: var(--red-hot); font-size: 1.15rem; }
.survivor-theme .challenge-card-bottom > strong { color: var(--survivor); }
.challenge-card-bottom form { margin: 0; }
.challenge-card-bottom button { margin: 0; min-height: 40px; padding: 8px 12px; }
.hidden-achievement { filter: grayscale(.55); }
.empty-panel { padding: 36px; background: rgba(0,0,0,.78); border: 1px solid var(--line); text-align: center; color: var(--muted); }

/* Admin pages */
.admin-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(330px,.72fr); gap: clamp(16px, 2vw, 26px); align-items: start; }
.single-panel { max-width: 1100px; margin: 0 auto; }
.content-card { padding: clamp(18px, 2.6vw, 30px); background: var(--panel); border: 1px solid rgba(212,154,41,.24); box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.panel-headline { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.panel-headline h1, .panel-headline h2 { margin: 6px 0 0; letter-spacing: .03em; }
.panel-headline h1 { font-size: clamp(1.8rem, 3.3vw, 3rem); }
.panel-headline h2 { font-size: clamp(1.35rem, 2.1vw, 1.8rem); }
.side-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; border: 1px solid var(--line); }
.side-tabs a { min-height: 46px; display: grid; place-items: center; background: rgba(0,0,0,.45); font-weight: 800; }
.side-tabs .survivor-tab { color: var(--survivor); background: rgba(91,101,47,.2); }
.side-tabs .killer-tab { color: var(--red-hot); background: rgba(91,15,11,.25); }
.percentage-summary { padding: 16px; margin-bottom: 18px; background: rgba(0,0,0,.42); border: 1px solid var(--line); }
.percentage-summary > div:first-child { display: flex; justify-content: space-between; gap: 14px; }
.percentage-summary small { display: block; margin-top: 8px; color: var(--muted); }
.admin-progress { height: 10px; margin-top: 10px; }
.percentage-live { padding: 12px; background: rgba(0,0,0,.48); border-left: 3px solid var(--yellow); color: #d8d1c5; }
.percentage-live.over-limit { border-color: var(--red-hot); color: #ffaea6; }
.responsive-table-wrap { overflow-x: auto; }
.data-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.data-table th, .data-table td { padding: 13px 11px; border-bottom: 1px solid rgba(226,220,202,.1); text-align: left; vertical-align: middle; }
.data-table th { color: #d0c9bd; font-size: .88rem; }
.data-table td small { display: block; margin-top: 5px; color: var(--muted); max-width: 48ch; }
.selected-row { background: rgba(119,24,18,.15); }
.status { display: inline-flex; padding: 6px 9px; font-weight: 800; font-size: .84rem; }
.status-active { color: #8bd99c; background: rgba(34,83,45,.32); }
.status-locked { color: #ff8175; background: rgba(92,15,11,.28); }
.mini-action { min-height: 34px; padding: 7px 10px; font-size: .87rem; }
.danger-action { color: #ff7d71; border-color: rgba(214,56,45,.4); }
.success-action { color: #8bd99c; border-color: rgba(90,196,119,.34); }
.empty-state { text-align: center !important; color: var(--muted); }
.table-meta { color: var(--muted); }

/* Responsive behavior */
@media (min-width: 2200px) {
  .page-main { max-width: 1800px; }
  .challenge-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1180px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar-brand-row { grid-column: 1; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .top-nav { display: none; grid-column: 1 / -1; order: 3; justify-content: flex-start; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid rgba(226,220,202,.1); }
  .top-nav.open { display: flex; }
  .account-bar { grid-column: 2; grid-row: 1; }
  .admin-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .progress-hero { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar { position: relative; grid-template-columns: 1fr; align-items: stretch; }
  .topbar-brand-row { grid-column: 1; justify-content: space-between; }
  .account-bar { grid-column: 1; grid-row: auto; justify-content: space-between; border-top: 1px solid rgba(226,220,202,.1); padding-top: 9px; }
  .top-nav { grid-column: 1; }
  .page-main { width: min(100% - 14px, 1500px); padding-top: 14px; }
  .selection-page .page-main { min-height: calc(100svh - 126px); padding-top: clamp(105px, 16svh, 155px); }
  .selection-card-button { height: min(59svh, 590px); max-width: 45vw; }
  .progress-hero { padding: 20px 16px; }
  .challenge-grid { grid-template-columns: 1fr; }
  .challenge-card { min-height: 260px; }
  .challenge-card-bottom { align-items: stretch; flex-direction: column; }
  .challenge-card-bottom form, .challenge-card-bottom button { width: 100%; }
  .form-grid-two { grid-template-columns: 1fr; }
  .panel-headline { flex-direction: column; }
  .panel-headline .outline-action { width: 100%; }
  .content-card { padding: 16px; }

  /* Table-to-card conversion */
  .responsive-table-wrap { overflow: visible; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; min-width: 0; }
  .data-table thead { display: none; }
  .data-table tr { margin-bottom: 14px; padding: 12px; border: 1px solid rgba(226,220,202,.14); background: rgba(0,0,0,.38); }
  .data-table td { position: relative; padding: 8px 0 8px 42%; border: 0; min-height: 36px; }
  .data-table td::before { content: attr(data-label); position: absolute; left: 0; width: 38%; color: #a9a196; font-weight: 700; font-size: .82rem; }
  .data-table td.empty-state { padding-left: 0; }
  .data-table td.empty-state::before { display: none; }
  .table-actions { flex-direction: column; }
  .table-actions form, .table-actions a, .table-actions button { width: 100%; }
}

@media (hover: none) and (pointer: coarse) {
  .selection-card-button:active {
    filter:
      drop-shadow(0 0 5px var(--selection-accent))
      drop-shadow(0 0 14px var(--selection-glow));
  }
  .selection-card-button:active::after { opacity: 1; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .selection-page .page-main { min-height: 0; padding: 72px 20px 8px; }
  .selection-card-button { height: min(72svh, 430px); max-width: 39vw; }
}


@media (max-width: 620px) and (orientation: portrait) {
  .selection-page .page-main { padding-top: 110px; align-items: start; }
  .selection-section { width: min(430px, 100%); }
  .selection-card-grid { grid-template-columns: 1fr; gap: 24px; }
  .selection-card-button { height: auto; width: min(82vw, 360px); max-width: none; aspect-ratio: 0.64; }
}

@media (max-width: 420px) {
  .account-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .account-bar .outline-action { width: 100%; }
  .wordmark { white-space: normal; }
}

/* Survivor Challenges v1.9 – separate cards, no progress bar */
.survivor-challenges-page .ambient-background img {
  object-position: center center;
  filter: brightness(.88) saturate(.96) contrast(1.04);
  transform: none;
}

.survivor-challenges-page .ambient-overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.08) 34%, rgba(0,0,0,.30) 100%),
    radial-gradient(circle at 50% 58%, transparent 0 44%, rgba(0,0,0,.28) 92%);
}

.survivor-challenges-page .page-main {
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 68px);
  display: grid;
  place-items: center;
  padding:
    clamp(230px, 29svh, 330px)
    clamp(18px, 5vw, 90px)
    clamp(24px, 4svh, 48px);
}

.survivor-challenges-stage {
  width: min(920px, 100%);
}

.survivor-challenge-layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .94fr);
  align-items: center;
  gap: clamp(18px, 2.5vw, 34px);
}

.survivor-locked-stack {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.survivor-challenge-card {
  --challenge-accent: #c5c5c5;
  --challenge-glow: rgba(196,196,196,.42);
  --challenge-clip: polygon(3.2% 0, 96.8% 0, 100% 3.1%, 100% 96.9%, 96.8% 100%, 3.2% 100%, 0 96.9%, 0 3.1%);
  position: relative;
  display: block;
  isolation: isolate;
  outline: none;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.survivor-challenge-card-active {
  --challenge-accent: #e6b849;
  --challenge-glow: rgba(232,178,48,.76);
  width: 100%;
  max-width: 430px;
  justify-self: end;
}

.survivor-challenge-card-locked {
  --challenge-accent: #b8b8b8;
  --challenge-glow: rgba(180,180,180,.45);
  width: 100%;
  cursor: not-allowed;
  opacity: .76;
}

.survivor-challenge-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  transition: filter .18s ease;
}

.survivor-challenge-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: .5%;
  pointer-events: none;
  opacity: 0;
  clip-path: var(--challenge-clip);
  box-shadow:
    inset 0 0 0 3px var(--challenge-accent),
    inset 0 0 26px color-mix(in srgb, var(--challenge-accent) 21%, transparent);
  transition: opacity .18s ease;
}

.survivor-challenge-card:hover,
.survivor-challenge-card:focus-visible {
  transform: translateY(-4px) scale(1.012);
  filter:
    drop-shadow(0 0 6px var(--challenge-accent))
    drop-shadow(0 0 20px var(--challenge-glow))
    drop-shadow(0 18px 28px rgba(0,0,0,.55));
}

.survivor-challenge-card:hover::after,
.survivor-challenge-card:focus-visible::after {
  opacity: 1;
}

.survivor-challenge-card:hover img,
.survivor-challenge-card:focus-visible img {
  filter: brightness(1.07) contrast(1.025);
}

.survivor-challenge-card-active:active {
  transform: translateY(-1px) scale(.995);
}

.survivor-rescue-card {
  --challenge-clip: polygon(3.4% 0, 96.6% 0, 100% 5.1%, 100% 94.9%, 96.6% 100%, 3.4% 100%, 0 94.9%, 0 5.1%);
}

.survivor-more-card {
  --challenge-clip: polygon(3.4% 0, 96.6% 0, 100% 5.8%, 100% 94.2%, 96.6% 100%, 3.4% 100%, 0 94.2%, 0 5.8%);
}

@media (max-width: 980px) {
  .survivor-challenges-page .page-main {
    padding-top: clamp(200px, 27svh, 280px);
  }

  .survivor-challenges-stage {
    width: min(780px, 100%);
  }
}

@media (max-width: 720px) {
  .survivor-challenges-page .ambient-background img {
    object-position: 48% center;
  }

  .survivor-challenges-page .page-main {
    min-height: calc(100svh - 126px);
    padding:
      clamp(190px, 27svh, 250px)
      12px
      30px;
  }

  .survivor-challenge-layout {
    grid-template-columns: 1fr;
    width: min(460px, 100%);
    margin: 0 auto;
  }

  .survivor-challenge-card-active {
    justify-self: center;
    width: min(88vw, 410px);
  }

  .survivor-locked-stack {
    width: min(88vw, 430px);
    justify-self: center;
  }
}

@media (max-width: 460px) {
  .survivor-challenges-page .page-main {
    padding-top: 175px;
  }

  .survivor-challenge-card:hover,
  .survivor-challenge-card:focus-visible {
    transform: translateY(-2px) scale(1.006);
  }
}

@media (max-height: 700px) and (orientation: landscape) {
  .survivor-challenges-page .page-main {
    padding: 150px 24px 18px;
  }

  .survivor-challenges-stage {
    width: min(780px, 100%);
  }

  .survivor-challenge-card-active {
    max-width: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .survivor-challenge-card,
  .survivor-challenge-card img,
  .survivor-challenge-card::after {
    transition: none;
  }
}


/* Survivor Challenges v1.10 – exact approved artwork, compact uncropped cards */
.survivor-challenges-page .ambient-background {
  top: 68px;
  bottom: 0;
  height: auto;
}

.survivor-challenges-page .ambient-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(.94) saturate(.98) contrast(1.02);
  transform: none;
}

.survivor-challenges-page .ambient-overlay {
  top: 68px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.04) 42%, rgba(0,0,0,.20) 100%),
    radial-gradient(circle at 50% 63%, transparent 0 46%, rgba(0,0,0,.18) 100%);
}

.survivor-challenges-page .page-main {
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 68px);
  display: grid;
  place-items: center;
  padding:
    clamp(285px, 31svh, 350px)
    clamp(18px, 4vw, 70px)
    clamp(24px, 4svh, 48px);
}

.survivor-challenges-stage {
  width: min(700px, 100%);
  overflow: visible;
}

.survivor-challenge-layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 300px);
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  overflow: visible;
}

.survivor-locked-stack {
  width: 300px;
  display: grid;
  gap: 15px;
  overflow: visible;
}

.survivor-challenge-card,
.survivor-challenge-card-active,
.survivor-challenge-card-locked {
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow: visible;
  clip-path: none;
  opacity: 1;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
}

.survivor-challenge-card-active {
  width: 330px;
  justify-self: center;
}

.survivor-challenge-card-locked {
  width: 300px;
  cursor: not-allowed;
  opacity: .86;
}

.survivor-challenge-card img {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: center;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  transition: filter .18s ease;
}

/* The approved card art already contains its complete border. No second border. */
.survivor-challenge-card::after {
  content: none !important;
  display: none !important;
}

.survivor-challenge-card-active:hover,
.survivor-challenge-card-active:focus-visible {
  transform: translateY(-3px) scale(1.01);
  filter:
    drop-shadow(0 0 5px rgba(246,197,72,.95))
    drop-shadow(0 0 16px rgba(226,168,38,.65))
    drop-shadow(0 14px 24px rgba(0,0,0,.52));
  outline: none;
}

.survivor-challenge-card-locked:hover,
.survivor-challenge-card-locked:focus-visible {
  transform: translateY(-2px) scale(1.008);
  filter:
    drop-shadow(0 0 4px rgba(218,218,218,.75))
    drop-shadow(0 0 13px rgba(170,170,170,.44))
    drop-shadow(0 12px 22px rgba(0,0,0,.50));
  outline: none;
  opacity: .96;
}

.survivor-challenge-card-active:hover img,
.survivor-challenge-card-active:focus-visible img {
  filter: brightness(1.07) contrast(1.02);
}

.survivor-challenge-card-locked:hover img,
.survivor-challenge-card-locked:focus-visible img {
  filter: brightness(1.09) contrast(1.02);
}

@media (max-width: 820px) {
  .survivor-challenges-page .ambient-background {
    top: 126px;
  }

  .survivor-challenges-page .ambient-overlay {
    top: 126px;
  }

  .survivor-challenges-page .page-main {
    min-height: calc(100svh - 126px);
    padding:
      clamp(270px, 32svh, 330px)
      14px
      34px;
  }

  .survivor-challenges-stage {
    width: min(620px, 100%);
  }

  .survivor-challenge-layout {
    grid-template-columns: minmax(0, 300px) minmax(0, 270px);
    gap: 16px;
  }

  .survivor-challenge-card-active {
    width: 300px;
  }

  .survivor-locked-stack,
  .survivor-challenge-card-locked {
    width: 270px;
  }
}

@media (max-width: 650px) {
  .survivor-challenges-page .ambient-background {
    top: 0;
  }

  .survivor-challenges-page .ambient-overlay {
    top: 0;
  }

  .survivor-challenges-page .ambient-background img {
    object-position: center top;
  }

  .survivor-challenges-page .page-main {
    min-height: auto;
    padding: 310px 12px 34px;
  }

  .survivor-challenge-layout {
    grid-template-columns: 1fr;
    width: min(340px, 100%);
    margin: 0 auto;
    gap: 16px;
  }

  .survivor-challenge-card-active {
    width: min(300px, 88vw);
    justify-self: center;
  }

  .survivor-locked-stack {
    width: min(300px, 88vw);
    justify-self: center;
  }

  .survivor-challenge-card-locked {
    width: 100%;
  }
}

@media (max-height: 760px) and (min-width: 651px) {
  .survivor-challenges-page .page-main {
    padding: 215px 18px 22px;
  }

  .survivor-challenges-stage {
    width: min(610px, 100%);
  }

  .survivor-challenge-layout {
    grid-template-columns: 285px 260px;
    gap: 15px;
  }

  .survivor-challenge-card-active {
    width: 285px;
  }

  .survivor-locked-stack,
  .survivor-challenge-card-locked {
    width: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .survivor-challenge-card,
  .survivor-challenge-card img {
    transition: none;
  }
}

/* =========================================================
   DBD Challenges v1.11 – neues Bodyguard-System
   ========================================================= */
.bodyguard-page .ambient-background img {
  filter: brightness(.34) saturate(.82) contrast(1.12) blur(1px);
  transform: scale(1.015);
}
.bodyguard-page .ambient-overlay {
  background:
    radial-gradient(circle at 50% 36%, rgba(6,16,19,.18), rgba(0,0,0,.74) 82%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.66));
}
.bodyguard-page .page-main {
  width: min(1840px, calc(100vw - 28px));
  max-width: none;
  padding: 18px 0 34px;
}
.bodyguard-shell {
  --lime: #9ef000;
  --lime-soft: rgba(158,240,0,.35);
  --red: #e81915;
  --steel: #a9b0b3;
  color: #eef0ed;
}
.bodyguard-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 16px;
}
.bodyguard-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 100%;
  text-align: center;
  flex-wrap: nowrap;
}
.bodyguard-title h1 {
  margin: 2px 0 0;
  font-size: clamp(2rem, 3.55vw, 4.2rem);
  line-height: .96;
  letter-spacing: .025em;
  white-space: nowrap;
  color: #f1f1ef;
  text-shadow: 0 3px 0 rgba(0,0,0,.7), 0 0 20px rgba(255,255,255,.08);
}
.bodyguard-emblem-icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(158,240,0,.18));
}

.hud-panel {
  position: relative;
  background: linear-gradient(145deg, rgba(4,9,12,.94), rgba(3,7,9,.82));
  border: 1px solid rgba(179,191,195,.36);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow: inset 0 0 28px rgba(90,118,126,.05), 0 12px 28px rgba(0,0,0,.38);
}
.hud-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 4px);
}
.hud-panel h2 {
  margin: 0;
  color: var(--lime);
  font-size: clamp(.9rem, 1.25vw, 1.15rem);
  letter-spacing: .055em;
}
.bodyguard-top-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(260px, 1.1fr) minmax(330px, 1.05fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}
.progress-panel, .rules-panel { padding: 18px 22px; }
.progress-panel { border-color: rgba(158,240,0,.65); }
.progress-fraction { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 8px; }
.progress-fraction strong { color: var(--lime); font-size: clamp(2.3rem, 4vw, 4rem); }
.progress-fraction span { color: #8d9496; font-size: 2.4rem; }
.progress-fraction b { color: #c9cdcd; font-size: clamp(1.5rem, 2.3vw, 2.5rem); }
.bodyguard-progress-track {
  position: relative;
  height: 18px;
  margin-right: 50px;
  overflow: hidden;
  border: 1px solid rgba(158,240,0,.45);
  border-radius: 6px;
  background: rgba(16,24,19,.82);
}
.bodyguard-progress-track span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #52bb00, #a6ff14);
  box-shadow: 0 0 18px rgba(129,255,0,.58);
  transition: width .22s ease;
}
.progress-percent { float: right; margin-top: -24px; color: var(--lime); font-size: 1.3rem; font-weight: 800; }
.progress-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; font-size: .82rem; }
.legend-positive { color: var(--lime); }
.legend-neutral { color: #d8dcdd; }
.legend-negative { color: #ff2a22; }
.matches-panel { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 20px; }
.matches-panel .target-icon { font-size: 3.2rem; color: #fff; }
.matches-panel small { display: block; color: #c0c5c5; font-size: .9rem; letter-spacing: .05em; }
.matches-panel strong { display: block; font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 500; }
.rules-panel ul { margin: 12px 0 0; padding-left: 20px; color: #d7dbda; line-height: 1.55; }

.bodyguard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
}
.survivor-browser { min-width: 0; }
.survivor-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.survivor-search {
  position: relative;
  width: min(340px, 100%);
  flex: 0 1 340px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(170,181,184,.42);
  background: rgba(3,8,11,.9);
}
.survivor-search span {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #d9ddde;
  font-size: 1.15rem;
  pointer-events: none;
}
.survivor-search input {
  border: 0;
  background: transparent;
  min-height: 44px;
  padding: 0 42px 0 12px;
}
.survivor-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.survivor-filters button {
  min-height: 44px;
  padding: 0 18px;
  color: #d8dcdb;
  background: rgba(4,9,12,.9);
  border: 1px solid rgba(168,178,180,.34);
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.survivor-filters button:hover,
.survivor-filters button.active {
  color: var(--lime);
  border-color: rgba(158,240,0,.72);
  box-shadow: inset 0 0 18px rgba(158,240,0,.09), 0 0 10px rgba(158,240,0,.12);
}
.survivor-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(88px, 1fr));
  gap: 8px;
}
.survivor-tile {
  position: relative;
  contain: layout paint style;
  min-height: 118px;
  padding: 8px 7px 9px;
  overflow: hidden;
  color: #eef0ef;
  background: linear-gradient(160deg, rgba(7,13,16,.96), rgba(4,8,10,.84));
  border: 1px solid rgba(155,166,169,.52);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.survivor-tile img {
  width: 38px;
  height: 48px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.16);
  opacity: .76;
}
.survivor-tile-name { display: block; min-height: 35px; margin-top: 4px; font-size: .78rem; line-height: 1.15; }
.survivor-tile-score { display: block; font-size: .98rem; }
.survivor-tile.status-positive { border-color: rgba(158,240,0,.72); }
.survivor-tile.status-positive .survivor-tile-score { color: var(--lime); }
.survivor-tile.status-negative { border-color: rgba(232,25,21,.85); }
.survivor-tile.status-negative .survivor-tile-score { color: #ff3027; }
.survivor-tile.status-neutral .survivor-tile-score { color: #d7dcdd; }
.survivor-tile:hover,
.survivor-tile:focus-visible { transform: translateY(-2px); filter: brightness(1.16); outline: none; }
.survivor-tile.status-positive:hover { box-shadow: 0 0 12px rgba(158,240,0,.35); }
.survivor-tile.status-negative:hover { box-shadow: 0 0 12px rgba(232,25,21,.38); }
.survivor-tile.current::after {
  content: "CURRENT";
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 4px;
  color: #091000;
  background: var(--lime);
  font-size: .48rem;
  font-weight: 900;
}
.survivor-tile[hidden] { display: none !important; }

.bodyguard-side { display: grid; gap: 12px; }
.current-survivor-panel { padding: 16px; text-align: center; border-color: rgba(158,240,0,.7); }
.current-survivor-panel > img {
  width: 112px;
  height: 140px;
  object-fit: cover;
  margin: 10px auto;
  border: 1px solid rgba(158,240,0,.34);
}
.current-survivor-panel h3 { margin: 8px 0 12px; font-size: clamp(1.5rem, 2vw, 2rem); }
.current-survivor-panel small { display: block; color: var(--lime); letter-spacing: .04em; }
.current-score { display: block; margin: 5px 0 16px; font-size: 3rem; font-weight: 500; }
.result-button {
  width: 100%;
  min-height: 52px;
  margin-top: 9px;
  color: white;
  font-size: 1.25rem;
  border-radius: 4px;
  border: 1px solid;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.result-button.escaped { background: linear-gradient(#46bf17, #299508); border-color: #77f043; }
.result-button.died { background: linear-gradient(#db2119, #a60d08); border-color: #ff392f; }
.result-button:hover:not(:disabled) { filter: brightness(1.18); transform: translateY(-1px); }
.result-button.escaped:hover:not(:disabled) { box-shadow: 0 0 16px rgba(89,238,36,.42); }
.result-button.died:hover:not(:disabled) { box-shadow: 0 0 16px rgba(255,49,38,.45); }
.result-button:disabled { opacity: .5; cursor: wait; }
.result-button.escaped.score-locked,
.result-button.escaped.score-locked:hover {
  color: #b8bcbc;
  background: linear-gradient(180deg, #3a3e3e, #242727);
  border-color: rgba(183,190,190,.48);
  box-shadow: inset 0 0 18px rgba(0,0,0,.35);
  filter: grayscale(1);
  opacity: .78;
  cursor: not-allowed;
  transform: none;
}
.recent-panel { padding: 14px; }
.recent-list { margin-top: 9px; }
.recent-list > div { display: grid; grid-template-columns: 1fr auto 34px; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.09); font-size: .8rem; }
.recent-list b.escaped { color: var(--lime); }
.recent-list b.died { color: #ff3027; }
.recent-list em { font-style: normal; text-align: right; }
.empty-copy { color: #9fa7a8; font-size: .84rem; }
.reset-challenge-button {
  min-height: 44px;
  color: #ff746d;
  background: rgba(35,4,3,.76);
  border: 1px solid rgba(232,25,21,.58);
}
.reset-challenge-button:hover { color: #fff; box-shadow: 0 0 13px rgba(232,25,21,.3); }
.recent-panel[hidden] { display: none !important; }
.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: grid;
  gap: 10px;
}
.dbd-toast {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: min(420px, calc(100vw - 30px));
  padding: 14px 16px;
  color: #f1f2ef;
  background: rgba(6,10,12,.96);
  border: 1px solid rgba(170,181,184,.38);
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
}
.dbd-toast.success { border-color: rgba(158,240,0,.45); }
.dbd-toast.warning { border-color: rgba(214,181,66,.55); }
.dbd-toast button { min-height: 34px; padding: 0 12px; color: var(--caution); background: rgba(0,0,0,.38); border: 1px solid rgba(214,181,66,.4); }
.hazard-dialog { width: min(520px, calc(100vw - 24px)); padding: 0; background: transparent; border: 0; }
.hazard-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(3px); }
.hazard-dialog-frame { padding: 12px; background: repeating-linear-gradient(-45deg, rgba(214,181,66,.92) 0 12px, rgba(28,28,28,.96) 12px 24px); }
.hazard-dialog-inner { padding: 24px; background: linear-gradient(145deg, rgba(7,10,12,.98), rgba(3,6,8,.96)); color: #f0f0ee; box-shadow: inset 0 0 0 1px rgba(214,181,66,.18); }
.hazard-dialog-inner small { color: var(--caution); letter-spacing: .08em; }
.hazard-dialog-inner h2 { margin: 8px 0 12px; font-size: clamp(1.35rem, 2.3vw, 1.9rem); }
.hazard-dialog-inner p { margin: 0 0 14px; color: #d7d9d6; line-height: 1.5; }
.hazard-dialog-inner input { margin-top: 4px; }
.hazard-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.danger-action { color: #fff; background: linear-gradient(#a41711, #6c0704); border: 1px solid rgba(255,67,57,.58); }
.bodyguard-summary {
  width: min(760px, 100%);
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(3,8,10,.9);
  border: 1px solid rgba(167,178,180,.36);
}
.bodyguard-summary > div { min-height: 72px; padding: 13px 18px; border-right: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 1px 12px; align-items: center; }
.bodyguard-summary > div:last-child { border-right: 0; }
.bodyguard-summary span { grid-row: 1 / 3; font-size: 1.8rem; }
.bodyguard-summary small { color: #bfc5c5; }
.bodyguard-summary strong { font-size: 1.55rem; font-weight: 500; }
.bodyguard-summary .positive span { color: var(--lime); }
.bodyguard-summary .negative span { color: #ff3027; }

.survivor-detail-dialog {
  width: min(430px, calc(100vw - 26px));
  padding: 22px;
  color: #eff0ee;
  background: linear-gradient(145deg, #0b1114, #040709);
  border: 1px solid rgba(158,240,0,.65);
  box-shadow: 0 28px 80px rgba(0,0,0,.72), 0 0 24px rgba(158,240,0,.12);
}
.survivor-detail-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(4px); }
.survivor-detail-dialog > img { width: 130px; height: 162px; object-fit: cover; display: block; margin: 0 auto 12px; }
.survivor-detail-dialog h2 { text-align: center; margin: 0 0 15px; }
.survivor-detail-dialog dl { margin: 0; }
.survivor-detail-dialog dl div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.dialog-close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: #ddd; font-size: 1.8rem; }
.dialog-select-button { width: 100%; min-height: 46px; margin-top: 18px; color: var(--lime); background: rgba(20,36,8,.72); border: 1px solid rgba(158,240,0,.58); }

/* Admin Survivor-Verwaltung */
.admin-survivor-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 18px; align-items: start; }
.admin-survivor-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: calc(100vh - 235px); overflow: auto; padding-right: 4px; }
.admin-survivor-row { content-visibility: auto; contain-intrinsic-size: 66px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; min-height: 66px; padding: 7px; border: 1px solid rgba(255,255,255,.11); background: rgba(2,7,9,.72); }
.admin-survivor-row:hover, .admin-survivor-row.selected { border-color: rgba(158,240,0,.54); background: rgba(18,29,8,.5); }
.admin-survivor-row img { width: 52px; height: 58px; object-fit: cover; }
.admin-survivor-row span { display: grid; gap: 3px; }
.admin-survivor-row small { color: #969fa1; }
.admin-survivor-row b { font-size: .75rem; }
.admin-survivor-row b.active { color: #9ef000; }
.admin-survivor-row b.inactive { color: #ff5c54; }
.survivor-upload-preview { width: 160px; height: 200px; object-fit: cover; margin: 0 auto 12px; border: 1px solid rgba(158,240,0,.35); }
.upload-rules { display: grid; gap: 4px; padding: 12px; color: #bac1c2; background: rgba(0,0,0,.3); border-left: 3px solid #9ef000; font-size: .84rem; }
.upload-rules strong { color: #9ef000; }
.check-line { display: flex !important; align-items: center; gap: 10px; }
.check-line input { width: auto; min-height: auto; }
.danger-check { color: #ff6d65; }

/* Admin Fortschritt */
.admin-progress-shell { width: min(1500px, 100%); margin: 0 auto; }
.user-progress-select select { min-width: 220px; }
.admin-progress-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.admin-progress-stats > div { padding: 14px; text-align: center; background: rgba(3,8,10,.86); border: 1px solid rgba(255,255,255,.12); }
.admin-progress-stats small { display: block; color: #aeb6b6; }
.admin-progress-stats strong { display: block; margin-top: 4px; font-size: 1.7rem; }
.admin-progress-stats .positive strong { color: #9ef000; }
.admin-progress-stats .negative strong { color: #ff3027; }
.admin-progress-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.admin-progress-card { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 8px; background: rgba(3,8,10,.86); border: 1px solid rgba(255,255,255,.17); }
.admin-progress-card img { width: 58px; height: 72px; object-fit: cover; }
.admin-progress-card div { display: grid; align-content: center; gap: 3px; }
.admin-progress-card span, .admin-progress-card small { color: #b8c0c1; }
.admin-progress-card.status-positive { border-color: rgba(158,240,0,.54); }
.admin-progress-card.status-negative { border-color: rgba(232,25,21,.62); }
.admin-progress-card[hidden] { display: none; }
.admin-reset-form { margin-top: 20px; text-align: right; }

@media (max-width: 1450px) {
  .survivor-grid { grid-template-columns: repeat(8, minmax(88px, 1fr)); }
}
@media (max-width: 1180px) {
  .bodyguard-top-grid { grid-template-columns: 1fr 1fr; }
  .rules-panel { grid-column: 1 / -1; }
  .survivor-grid { grid-template-columns: repeat(6, minmax(88px, 1fr)); }
  .admin-progress-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bodyguard-page .page-main { width: min(100% - 16px, 1840px); }
  .survivor-search { width: 100%; max-width: none; flex: 1 1 100%; }
  .toast-stack { left: 12px; right: 12px; bottom: 12px; }
  .bodyguard-top-grid { grid-template-columns: 1fr; }
  .rules-panel { grid-column: auto; }
  .bodyguard-main-grid { grid-template-columns: 1fr; }
  .bodyguard-side { grid-template-columns: 1fr 1fr; }
  .reset-challenge-button { grid-column: 1 / -1; }
  .survivor-grid { grid-template-columns: repeat(5, minmax(80px, 1fr)); }
  .admin-survivor-layout { grid-template-columns: 1fr; }
  .admin-survivor-list { max-height: none; }
  .admin-progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .bodyguard-title h1 { font-size: clamp(1.65rem, 7.2vw, 2.15rem); }
  .bodyguard-title { gap: 10px; }
  .bodyguard-emblem-icon { width: 46px; height: 46px; flex: 0 0 auto; }
  .account-bar { flex-direction: column; align-items: stretch; }
  .account-actions { justify-content: space-between; }
  .user-settings-menu { position: static; width: 100%; margin-top: 10px; }
  .bodyguard-top-grid { gap: 10px; }
  .progress-panel, .rules-panel { padding: 15px; }
  .bodyguard-side { grid-template-columns: 1fr; }
  .reset-challenge-button { grid-column: auto; }
  .survivor-grid { grid-template-columns: repeat(3, minmax(76px, 1fr)); gap: 6px; }
  .survivor-tile { min-height: 112px; }
  .bodyguard-summary { grid-template-columns: 1fr 1fr; }
  .bodyguard-summary > div:nth-child(2) { border-right: 0; }
  .bodyguard-summary > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
  .admin-survivor-list { grid-template-columns: 1fr; }
  .admin-progress-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-progress-grid { grid-template-columns: 1fr; }
}

/* v1.11.2 performance helpers */
img { image-rendering: auto; }
.ambient-background, .login-background { contain: strict; }
.ambient-background img, .login-background img { will-change: auto; }
@media (prefers-reduced-data: reduce) {
  .page-grain { display: none; }
  .ambient-background img, .login-background img { filter: brightness(.55); }
}

/* =========================================================
   DBD Challenges v1.11.3.1 – Rules Layout Hotfix
   ========================================================= */

/* Benutzer-Menü: Rules und Reset immer als klare, getrennte Zeilen. */
.user-menu-bodyguard-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
}
.user-menu-rules-link,
.user-menu-reset-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 10px 12px;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
}
.user-menu-rules-link {
  color: #d9ddde;
  background: linear-gradient(145deg, rgba(22,27,29,.92), rgba(7,10,12,.96));
  border: 1px solid rgba(174,184,187,.58);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .045em;
}
.user-menu-rules-link:hover,
.user-menu-rules-link:focus-visible {
  color: #fff;
  border-color: rgba(220,226,226,.86);
  box-shadow: inset 0 0 14px rgba(214,221,221,.06), 0 0 11px rgba(180,190,190,.16);
  outline: none;
}
.user-menu-reset-button {
  color: #ff746d;
  background: linear-gradient(145deg, rgba(48,7,5,.88), rgba(20,3,2,.94));
  border: 1px solid rgba(232,25,21,.62);
  font-size: .78rem;
  letter-spacing: .03em;
}
.user-menu-reset-button:hover,
.user-menu-reset-button:focus-visible {
  color: #fff;
  border-color: rgba(255,72,61,.9);
  box-shadow: inset 0 0 14px rgba(232,25,21,.08), 0 0 13px rgba(232,25,21,.28);
  outline: none;
}

/* Kompakter und besser gegliederter Rules-Einstieg auf der Bodyguard-Seite. */
.rules-link-panel {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 178px;
  padding: 20px 22px;
  color: #eef0ed;
  text-decoration: none;
  border-color: rgba(171,181,184,.46);
  transition: border-color .16s ease, filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
.rules-link-panel:hover,
.rules-link-panel:focus-visible {
  color: #fff;
  border-color: rgba(214,181,66,.82);
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(214,181,66,.13), 0 12px 28px rgba(0,0,0,.38);
  outline: none;
}
.rules-link-icon-box {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #101207;
  background: #9ef000;
  border: 1px solid rgba(202,255,102,.82);
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 900;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 0 16px rgba(158,240,0,.18);
}
.rules-link-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}
.rules-link-copy small {
  margin-bottom: 3px;
  color: #9ba4a5;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.rules-link-panel h2 {
  margin: 0;
  color: var(--lime);
  font-size: clamp(1.1rem, 1.45vw, 1.35rem);
  letter-spacing: .055em;
}
.rules-link-panel p {
  margin: 8px 0 14px;
  color: #c9cecd;
  line-height: 1.4;
}
.rules-link-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: #eef0ed;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.rules-link-action b {
  color: var(--lime);
  font-size: 1.2rem;
}

/* Eigene Rules-Seite. */
.bodyguard-rules-page .ambient-background img {
  filter: brightness(.36) saturate(.82) contrast(1.12);
  object-position: center top;
}
.bodyguard-rules-page .ambient-overlay {
  background:
    radial-gradient(circle at 50% 38%, rgba(8,18,17,.12), rgba(0,0,0,.76) 84%),
    linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.68));
}
.bodyguard-rules-page .page-main {
  width: min(1180px, calc(100% - 28px));
}
.rules-page-shell {
  display: grid;
  gap: 18px;
  padding-top: 8px;
}
.rules-back { width: fit-content; }
.rules-hazard-frame {
  position: relative;
  padding: 13px;
  overflow: hidden;
  background: repeating-linear-gradient(-45deg, #d0a72c 0 12px, #1b1b19 12px 24px);
  box-shadow: 0 24px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.9);
}
.rules-hazard-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .58;
  background:
    radial-gradient(ellipse at 13% 22%, rgba(0,0,0,.92) 0 2px, transparent 3px),
    radial-gradient(ellipse at 82% 72%, rgba(0,0,0,.82) 0 3px, transparent 4px),
    repeating-linear-gradient(104deg, transparent 0 31px, rgba(0,0,0,.52) 32px 33px, transparent 34px 58px);
  mix-blend-mode: multiply;
}
.rules-hazard-inner {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 4vw, 54px);
  color: #eff0ed;
  background:
    linear-gradient(145deg, rgba(7,11,12,.97), rgba(2,5,6,.96)),
    repeating-linear-gradient(7deg, transparent 0 7px, rgba(255,255,255,.012) 8px 9px);
  border: 1px solid rgba(214,181,66,.32);
  box-shadow: inset 0 0 42px rgba(0,0,0,.85);
}
.rules-hazard-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background:
    linear-gradient(117deg, transparent 0 30%, rgba(214,181,66,.35) 30.2% 30.45%, transparent 30.8%),
    linear-gradient(17deg, transparent 0 66%, rgba(255,255,255,.16) 66.2% 66.35%, transparent 66.7%),
    radial-gradient(circle at 83% 16%, rgba(99,70,15,.5), transparent 20%);
}
.rules-page-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.rules-page-heading img { width: 68px; height: 68px; object-fit: contain; }
.rules-page-heading p { margin: 0 0 5px; color: #e7bd43; font-weight: 800; letter-spacing: .09em; }
.rules-page-heading h1 { margin: 0; font-size: clamp(2rem, 5vw, 4.5rem); line-height: .98; }
.rules-intro,
.rules-outro {
  position: relative;
  z-index: 1;
  color: #d6dad8;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.65;
}
.rules-intro { margin: 0 0 25px; }
.rules-outro { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid rgba(214,181,66,.34); color: #e7bd43; }
.rules-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rules-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: rgba(0,0,0,.31);
  border: 1px solid rgba(199,205,204,.16);
}
.rules-list li > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #0a0c08;
  background: #d9af34;
  font-weight: 900;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.rules-list p { margin: 5px 0 0; color: #e5e7e4; line-height: 1.5; }

.rules-admin-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 18px;
  align-items: start;
}
.rules-admin-form textarea { min-height: 110px; }
.rules-admin-form textarea[name="rules_items"] { min-height: 280px; }
.rules-admin-preview { position: sticky; top: 92px; }
.compact-rules-preview { padding: 9px; }
.compact-rules-preview .rules-hazard-inner { padding: 22px; }
.compact-rules-preview h2 { margin: 7px 0 12px; color: #e7bd43; }
.compact-rules-preview p,
.compact-rules-preview li { color: #d8dcda; line-height: 1.45; }
.compact-rules-preview ol { padding-left: 22px; }

@media (max-width: 900px) {
  .rules-link-panel { min-height: 150px; }
  .rules-admin-shell { grid-template-columns: 1fr; }
  .rules-admin-preview { position: static; }
}
@media (max-width: 650px) {
  .rules-link-panel {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    min-height: 138px;
    padding: 16px;
  }
  .rules-link-icon-box { width: 44px; height: 44px; font-size: 1.6rem; }
  .rules-page-heading { align-items: flex-start; }
  .rules-page-heading img { width: 52px; height: 52px; }
  .rules-list li { grid-template-columns: 36px minmax(0, 1fr); padding: 12px; }
  .rules-list li > span { width: 32px; height: 32px; }
}


/* v1.11.3.2 – Bodyguard title alignment hotfix */
@media (max-width: 470px) {
  .bodyguard-title {
    flex-wrap: wrap;
  }
  .bodyguard-title h1 {
    width: 100%;
    white-space: normal;
  }
}

/* =========================================================
   DBD Challenges v1.11.5.1 – Mehrsprachigkeit DE / EN / RU
   ========================================================= */
html[lang="ru"] body,
body.lang-ru {
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}
html[lang="ru"] .bodyguard-title h1,
html[lang="ru"] .rules-page-heading h1,
html[lang="ru"] .panel-headline h1,
html[lang="ru"] .panel-headline h2 {
  letter-spacing: .01em;
  font-stretch: condensed;
}

.login-panel .hazard-panel-inner { position: relative; }
.login-language-button {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 11px;
  color: #d9dddc;
  background: rgba(7,10,12,.82);
  border: 1px solid rgba(174,181,182,.48);
  box-shadow: inset 0 0 12px rgba(255,255,255,.025);
}
.login-language-button:hover,
.login-language-button:focus-visible {
  color: #fff;
  border-color: rgba(215,221,222,.8);
  box-shadow: 0 0 12px rgba(210,217,219,.12);
  outline: none;
}
.login-language-button span { font-size: 1.1rem; }
.login-language-button strong { font-size: .82rem; }
.login-language-button b { font-size: 1.15rem; font-weight: 400; }

.user-menu-language-button {
  width: 100%;
  min-height: 54px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #e2e4e2;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(255,255,255,.018), transparent 35%),
    rgba(4,8,10,.78);
  border: 1px solid rgba(162,171,173,.58);
  box-shadow: inset 0 0 18px rgba(126,139,142,.035);
}
.user-menu-language-button::before,
.user-menu-rules-link::before {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  opacity: .24;
  background:
    linear-gradient(12deg, transparent 0 46%, rgba(205,211,212,.26) 47% 48%, transparent 49% 100%),
    linear-gradient(-9deg, transparent 0 72%, rgba(205,211,212,.18) 73% 74%, transparent 75% 100%);
}
.user-menu-language-button { position: relative; overflow: hidden; }
.user-menu-language-button span { display: grid; gap: 2px; position: relative; z-index: 1; }
.user-menu-language-button small { color: #989fa0; font-size: .68rem; letter-spacing: .08em; }
.user-menu-language-button strong { color: #eff1ef; font-size: .92rem; }
.user-menu-language-button b { position: relative; z-index: 1; color: #b6bdbd; font-size: 1.4rem; }
.user-menu-language-button:hover,
.user-menu-language-button:focus-visible {
  border-color: rgba(215,221,222,.84);
  background-color: rgba(18,24,26,.9);
  outline: none;
}

.language-dialog {
  width: min(510px, calc(100vw - 24px));
  max-height: calc(100svh - 24px);
  padding: 0;
  overflow: visible;
  color: #eef0ed;
  background: transparent;
  border: 0;
}
.language-dialog::backdrop {
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(4px);
}
.language-dialog-frame {
  padding: 9px;
  background:
    linear-gradient(100deg, transparent 0 14%, rgba(255,255,255,.18) 14.4% 14.8%, transparent 15.2% 100%),
    linear-gradient(-8deg, transparent 0 69%, rgba(0,0,0,.5) 69.4% 70%, transparent 70.5% 100%),
    repeating-linear-gradient(-45deg, #5e6465 0 8px, #25292a 8px 16px);
  box-shadow: 0 28px 90px rgba(0,0,0,.82), 0 0 0 1px rgba(209,215,216,.25);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
}
.language-dialog-inner {
  padding: 24px;
  background:
    radial-gradient(circle at 15% 0, rgba(112,127,130,.08), transparent 38%),
    linear-gradient(145deg, rgba(8,12,14,.99), rgba(2,5,7,.98));
  border: 1px solid rgba(195,202,203,.22);
  box-shadow: inset 0 0 30px rgba(114,127,130,.035);
}
.language-dialog-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.language-dialog-heading .language-globe {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #e6e9e7;
  border: 1px solid rgba(185,194,195,.58);
  transform: rotate(45deg);
  font-size: 1.35rem;
}
.language-dialog-heading small { color: #9aa2a3; letter-spacing: .09em; }
.language-dialog-heading h2 { margin: 3px 0 0; font-size: clamp(1.3rem, 3vw, 1.9rem); }
.language-options { display: grid; gap: 9px; }
.language-option {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr 24px;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 9px 13px;
  cursor: pointer;
  color: #d4d8d7;
  background: rgba(4,8,10,.8);
  border: 1px solid rgba(153,163,165,.36);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.language-option input { position: absolute; opacity: 0; pointer-events: none; }
.language-option .language-code {
  display: grid;
  place-items: center;
  width: 42px;
  height: 34px;
  color: #c6cbca;
  border: 1px solid rgba(177,186,187,.34);
  font-size: .72rem;
  letter-spacing: .1em;
}
.language-option i { color: transparent; font-style: normal; font-size: 1.1rem; }
.language-option:hover { border-color: rgba(210,218,219,.7); background: rgba(15,21,23,.9); }
.language-option.active {
  color: #fff;
  border-color: rgba(158,240,0,.72);
  background: rgba(18,31,9,.6);
  box-shadow: inset 0 0 18px rgba(158,240,0,.07), 0 0 12px rgba(158,240,0,.08);
}
.language-option.active .language-code { color: #9ef000; border-color: rgba(158,240,0,.52); }
.language-option.active i { color: #9ef000; }
.language-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.language-apply { color: #111; background: linear-gradient(#b7ef43, #79bd08); border: 1px solid #cfff70; }
.language-apply:disabled { opacity: .55; cursor: wait; }

.rules-language-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 16px;
}
.rules-language-tabs button {
  min-height: 44px;
  color: #c8cecd;
  background: rgba(4,8,10,.78);
  border: 1px solid rgba(158,168,170,.38);
}
.rules-language-tabs button.active {
  color: #9ef000;
  border-color: rgba(158,240,0,.7);
  box-shadow: inset 0 0 16px rgba(158,240,0,.08);
}
.rules-language-panel {
  margin: 0;
  padding: 0;
  border: 0;
}
.rules-language-panel[hidden] { display: none !important; }
.rules-language-panel legend {
  width: 100%;
  margin-bottom: 10px;
  color: #9ef000;
  font-size: .9rem;
  letter-spacing: .08em;
}

@media (max-width: 650px) {
  .login-language-button { position: static; margin: 0 0 16px auto; }
  .language-dialog-inner { padding: 18px; }
  .language-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .language-dialog-actions button { width: 100%; }
  .rules-language-tabs { grid-template-columns: 1fr; }
}
.user-menu-rules-link { position: relative; overflow: hidden; }
html[lang="ru"] .bodyguard-title h1 { font-size: clamp(1.45rem, 2.55vw, 3.2rem); }
@media (max-width: 1100px) {
  html[lang="ru"] .bodyguard-title { flex-wrap: wrap; }
  html[lang="ru"] .bodyguard-title h1 { width: 100%; white-space: normal; }
}


/* =========================================================
   DBD Challenges v1.11.5.1 – Survivor sperren, archivieren & löschen
   ========================================================= */
.admin-survivor-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.admin-survivor-filters a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  color: #c8cece;
  background: rgba(3,8,10,.72);
  border: 1px solid rgba(165,176,179,.28);
  transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.admin-survivor-filters a b {
  min-width: 22px;
  padding: 2px 6px;
  text-align: center;
  border-radius: 10px;
  color: #eef1ed;
  background: rgba(255,255,255,.08);
  font-size: .72rem;
}
.admin-survivor-filters a:hover,
.admin-survivor-filters a.active {
  color: #fff;
  border-color: rgba(214,181,66,.62);
  box-shadow: inset 0 0 18px rgba(214,181,66,.06);
}
.admin-survivor-filters a.filter-active.active { color: #9ef000; border-color: rgba(158,240,0,.62); }
.admin-survivor-filters a.filter-locked.active { color: #ff8b82; border-color: rgba(232,25,21,.55); }
.admin-survivor-filters a.filter-archived.active { color: #b7bec0; border-color: rgba(183,190,192,.55); }
.admin-survivor-row b.locked { color: #ff6258; }
.admin-survivor-row b.archived { color: #9da5a7; }
.admin-survivor-row.status-locked { border-color: rgba(232,25,21,.25); }
.admin-survivor-row.status-archived { opacity: .68; filter: grayscale(.62); border-style: dashed; }
.admin-survivor-row.status-archived:hover,
.admin-survivor-row.status-archived.selected { opacity: .92; filter: grayscale(.2); }
.survivor-admin-status {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: rgba(0,0,0,.28);
  border-left: 3px solid rgba(165,176,179,.55);
}
.survivor-admin-status small { color: #9da5a7; letter-spacing: .07em; }
.survivor-admin-status strong { font-size: 1.08rem; }
.survivor-admin-status p { margin: 3px 0 0; color: #b8c0c0; font-size: .84rem; line-height: 1.45; }
.survivor-admin-status.status-active { border-color: #9ef000; }
.survivor-admin-status.status-active strong { color: #9ef000; }
.survivor-admin-status.status-locked { border-color: #e81915; }
.survivor-admin-status.status-locked strong { color: #ff6258; }
.survivor-admin-status.status-archived { border-color: #8c9496; }
.survivor-admin-status.status-archived strong { color: #c4cacc; }
.disabled-check { opacity: .55; cursor: not-allowed; }
.survivor-admin-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.11);
}
.survivor-admin-actions h3 { margin: 0 0 2px; color: #c5cbca; font-size: .9rem; letter-spacing: .06em; }
.survivor-admin-actions form,
.survivor-admin-actions button { width: 100%; margin: 0; }
.survivor-admin-actions form button { width: 100%; min-height: 44px; }
.survivor-lock-button { color: #ff746d; border-color: rgba(232,25,21,.55); }
.survivor-unlock-button,
.survivor-restore-button { color: #9ef000; border-color: rgba(158,240,0,.5); }
.survivor-delete-button { min-height: 44px; margin-top: 4px !important; }
.survivor-delete-dialog { position: fixed; }
.archive-safety-note {
  padding: 10px 12px;
  color: #d7d9d6 !important;
  background: rgba(214,181,66,.08);
  border-left: 3px solid rgba(214,181,66,.72);
}
.survivor-delete-dialog input[name="confirm_text"] {
  width: 100%;
  min-height: 46px;
  color: #fff;
  border-color: rgba(214,181,66,.5);
  background: rgba(0,0,0,.38);
}
.survivor-delete-dialog [data-survivor-delete-confirm]:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.6);
}
@media (max-width: 650px) {
  .admin-survivor-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-survivor-filters a { justify-content: space-between; }
}


/* =========================================================
   DBD Challenges v1.11.6 – Selbstregistrierung & lokaler Spamschutz
   ========================================================= */
.auth-login-shell { justify-content: flex-start; padding-top: clamp(18px, 4vh, 54px); }
.auth-login-shell .login-logo { width: min(880px, 76vw); max-height: min(18svh, 165px); }
.auth-language-row { width: min(1160px, calc(100vw - 30px)); display: flex; justify-content: flex-end; margin-bottom: -8px; }
.auth-language-button { position: static; }
.auth-panels {
  width: min(1160px, calc(100vw - 30px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}
.auth-panels.registration-disabled { grid-template-columns: minmax(0, 570px); justify-content: center; }
.auth-panels .hazard-frame { width: 100%; }
.auth-panels .hazard-panel-inner { padding: clamp(22px, 2.8vw, 38px); }
.auth-panels .login-panel-header h1 { font-size: clamp(2.25rem, 4.3vw, 3.65rem); }
.registration-panel .hazard-frame { border-color: rgba(205,151,37,.65); }
.registration-panel-header h1 { letter-spacing: .045em; }
.registration-form { gap: 8px; }
.registration-form label { margin-top: 2px; }
.registration-form .login-input-shell input { min-height: 48px; }
.registration-submit { min-height: 54px; margin-top: 8px; font-size: clamp(1.15rem, 2.5vw, 1.55rem); }
.registration-success-message {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid #9ef000;
  background: rgba(7,27,4,.78);
  color: #cfff9c;
  text-align: center;
  font-size: .9rem;
  line-height: 1.42;
}
.registration-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.captcha-box {
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: stretch;
  gap: 8px;
}
.captcha-box img {
  width: 100%;
  height: 64px;
  object-fit: cover;
  border: 1px solid rgba(212,154,41,.7);
  background: #070909;
  image-rendering: auto;
}
.captcha-refresh {
  border: 1px solid rgba(212,154,41,.52);
  background: rgba(9,10,10,.9);
  color: #d7a539;
  font-size: 1.65rem;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.captcha-refresh:hover, .captcha-refresh:focus-visible { color: #ffe18b; border-color: #e4b43d; transform: rotate(20deg); outline: none; }
.settings-grid-form { gap: 18px; }
.settings-section { display: grid; gap: 10px; padding: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.2); }
.settings-section h2 { margin: 0 0 4px; color: var(--yellow); font-size: 1.15rem; }
.settings-number-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.settings-number-grid label { display: grid; gap: 6px; }
.pending-count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; margin-left: 8px; border-radius: 999px; background: #d49a29; color: #090909; font-size: .82rem; vertical-align: middle; }
.status-pending { color: #ffd36e; border-color: rgba(212,154,41,.6); background: rgba(90,61,5,.32); }
.status-rejected { color: #ff746d; border-color: rgba(232,25,21,.55); background: rgba(75,6,4,.32); }

@media (max-width: 980px) {
  .auth-login-shell { justify-content: flex-start; }
  .auth-login-shell .login-logo { width: min(700px, 92vw); max-height: 130px; }
  .auth-language-row { width: min(570px, calc(100vw - 24px)); }
  .auth-panels { width: min(570px, calc(100vw - 24px)); grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .auth-login-shell .login-logo { width: 96vw; max-height: 98px; }
  .auth-language-row, .auth-panels { width: min(100%, 500px); }
  .settings-number-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   DBD Challenges v1.11.6.1 – Login-Button-Layout-Fix
   ========================================================= */
.single-login-layout {
  justify-content: flex-start;
  padding-top: clamp(18px, 4vh, 54px);
}
.single-login-layout .login-logo {
  width: min(880px, 92vw);
  max-height: min(18svh, 165px);
}
.single-login-panel {
  width: min(570px, calc(100vw - 30px));
}
.single-login-panel .hazard-panel-inner {
  padding: clamp(28px, 4vw, 48px);
}
.login-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.login-action-grid-single { grid-template-columns: 1fr; }
.login-action-grid .login-submit {
  width: 100%;
  min-width: 0;
  margin-top: 0;
}
.login-action-button {
  color: #e5e7e5;
  background:
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 42%),
    rgba(6,8,9,.9);
  border: 1px solid rgba(157,165,167,.72);
  box-shadow: inset 0 0 16px rgba(170,180,182,.025);
}
.login-action-button:hover,
.login-action-button:focus-visible {
  color: #fff;
  border-color: rgba(216,222,223,.92);
  box-shadow: inset 0 0 20px rgba(174,183,185,.055), 0 0 12px rgba(194,202,203,.12);
}
.register-open-button {
  color: #d9dcdb;
}
.registration-dialog {
  width: min(590px, calc(100vw - 24px));
  max-height: calc(100svh - 24px);
  padding: 0;
  overflow: auto;
  color: #eef0ed;
  background: transparent;
  border: 0;
}
.registration-dialog::backdrop {
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(4px);
}
.registration-dialog-frame {
  padding: 12px;
  background:
    linear-gradient(12deg, transparent 0 33%, rgba(0,0,0,.42) 33.4% 34%, transparent 34.5% 100%),
    linear-gradient(-10deg, transparent 0 72%, rgba(255,222,105,.12) 72.4% 72.8%, transparent 73.2% 100%),
    repeating-linear-gradient(-45deg, #d1a12f 0 12px, #191919 12px 24px);
  box-shadow: 0 28px 90px rgba(0,0,0,.86), 0 0 0 1px rgba(235,190,62,.28);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.registration-dialog-inner {
  position: relative;
  padding: clamp(24px, 4vw, 40px);
  background:
    repeating-linear-gradient(-45deg, rgba(212,154,41,.018) 0 20px, rgba(0,0,0,.09) 20px 40px),
    linear-gradient(145deg, rgba(8,10,10,.99), rgba(2,4,5,.99));
  border: 1px solid rgba(212,154,41,.24);
  box-shadow: inset 0 0 30px rgba(212,154,41,.035);
}
.registration-dialog-header h1 {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
}
.registration-dialog-close {
  z-index: 4;
  top: 10px;
  right: 13px;
}
.registration-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.registration-dialog-actions .login-submit {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  color: #e5e7e5;
  background: rgba(6,8,9,.9);
  border: 1px solid rgba(157,165,167,.72);
}
.registration-dialog-actions .login-submit:hover,
.registration-dialog-actions .login-submit:focus-visible {
  border-color: rgba(216,222,223,.92);
}
@media (max-width: 620px) {
  .single-login-panel { width: min(100%, 500px); }
  .login-action-grid,
  .registration-dialog-actions { grid-template-columns: 1fr; }
  .registration-dialog-inner { padding: 24px 18px 20px; }
}