/* ═══════════════════════════════════════════════════════════════════════
   WOW LAYER :: CYBERDROP v4 — DYSTOPIAN OVERDRIVE (2077 / EDGERUNNERS)
   Additive Layer. Lädt nach allen anderen Stylesheets und übersteuert
   gezielt. Keine Klassen/IDs entfernen, JS-Logik hängt daran.
   Gedämpfte Farbpalette, blickdichte Panels, unregelmäßige Glitches.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --glass: rgba(4, 4, 7, .94);
}

/* ── BACKGROUND: giftiger Smog, sehr gedämpft ───────────────────────── */
body::before {
  content: '';
  position: fixed; inset: -10%;
  background:
    radial-gradient(ellipse 36% 26% at 10% 15%, rgba(255, 0, 60, .05), transparent 58%),
    radial-gradient(ellipse 34% 26% at 92% 8%, rgba(0, 212, 255, .03), transparent 60%),
    radial-gradient(ellipse 65% 42% at 50% 105%, rgba(120, 20, 180, .05), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.7) 100%);
  pointer-events: none; z-index: 0;
  animation: smogDrift 34s ease-in-out infinite alternate;
}
@keyframes smogDrift {
  0%   { transform: translate3d(-1%, -1%, 0) scale(1); }
  100% { transform: translate3d(1%, 1%, 0) scale(1.04); }
}

/* Harte Vignette: Ränder ersaufen im Schwarz, Blickfang bleibt in der Mitte */
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 125% 88% at 50% 42%, transparent 26%, rgba(0,0,0,.62) 74%, rgba(0,0,0,.93) 100%),
    linear-gradient(0deg, rgba(10,0,4,.55) 0%, transparent 22%);
}

/* Diagonale Regenstreifen — nasse Straßen statt trockener Retro-Vibes */
.rain-streaks {
  position: fixed; inset: -20% -20%; z-index: 2; pointer-events: none;
  opacity: .06; mix-blend-mode: screen;
  background: repeating-linear-gradient(100deg, rgba(180,210,255,.5) 0 1px, transparent 1px 90px);
  animation: rainFall 0.4s linear infinite;
}
@keyframes rainFall {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-14px, 34px); }
}

/* Corrupted-city canvas (von wow.js bespielt) */
#wow-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* Konstantes Filmkorn — billig via SVG feTurbulence, kein JS-Overhead */
.grain-overlay {
  position: fixed; inset: -10px; z-index: 95; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: .05;
  mix-blend-mode: overlay;
  animation: grainShift .5s steps(1) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(2%, 1%); }
}

/* Signal-Korruption: kurzer Vollbild-Glitch, von JS getriggert */
.glitch-burst { position: fixed; inset: 0; z-index: 96; pointer-events: none; opacity: 0; }
.glitch-burst::before, .glitch-burst::after {
  content: ''; position: absolute; inset: 0; mix-blend-mode: screen;
}
.glitch-burst::before { background: rgba(0, 255, 229, .09); }
.glitch-burst::after  { background: rgba(255, 0, 60, .09); }
.glitch-burst.active { animation: glitchBurstAnim .3s steps(1) 1; }
.glitch-burst.active::before { animation: glitchSlideA .3s steps(1) 1; }
.glitch-burst.active::after  { animation: glitchSlideB .3s steps(1) 1; }
@keyframes glitchBurstAnim {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  16%  { opacity: 0; }
  40%  { opacity: .85; }
  46%  { opacity: 0; }
  70%  { opacity: .5; }
  78%  { opacity: 0; }
}
@keyframes glitchSlideA {
  0%   { transform: translateX(0); clip-path: inset(8% 0 74% 0); }
  25%  { transform: translateX(-18px); clip-path: inset(42% 0 18% 0); }
  50%  { transform: translateX(10px); clip-path: inset(70% 0 4% 0); }
  75%  { transform: translateX(-6px); clip-path: inset(20% 0 55% 0); }
  100% { transform: translateX(0); clip-path: inset(0 0 100% 0); }
}
@keyframes glitchSlideB {
  0%   { transform: translateX(0); clip-path: inset(60% 0 14% 0); }
  25%  { transform: translateX(16px); clip-path: inset(15% 0 65% 0); }
  50%  { transform: translateX(-12px); clip-path: inset(4% 0 82% 0); }
  75%  { transform: translateX(8px); clip-path: inset(48% 0 30% 0); }
  100% { transform: translateX(0); clip-path: inset(100% 0 0 0); }
}

/* Große Störung: Signalabbruch mit Rot-Alarm statt kurzem Flimmern */
.glitch-burst.big { animation: glitchBurstBig .55s steps(1) 1; }
.glitch-burst.big::before { animation: glitchSlideA .5s steps(1) 2; }
.glitch-burst.big::after  { animation: glitchSlideBig .55s steps(1) 1; }
@keyframes glitchBurstBig {
  0%   { opacity: 0; }
  4%   { opacity: 1; background: #000; }
  10%  { opacity: .1; }
  14%  { opacity: 1; }
  20%  { opacity: 0; }
  50%  { opacity: .9; }
  56%  { opacity: 0; }
  72%  { opacity: .6; }
  78%  { opacity: 0; }
  90%  { opacity: .4; }
  100% { opacity: 0; }
}
@keyframes glitchSlideBig {
  0%   { transform: translateX(0) scaleY(1); clip-path: inset(0 0 0 0); background: rgba(255,0,60,.35); }
  10%  { transform: translateX(-30px); clip-path: inset(30% 0 40% 0); background: rgba(255,0,60,.5); }
  30%  { transform: translateX(24px); clip-path: inset(10% 0 70% 0); background: rgba(255,0,60,.3); }
  55%  { transform: translateX(-16px); clip-path: inset(60% 0 12% 0); background: rgba(255,0,60,.4); }
  100% { transform: translateX(0); clip-path: inset(100% 0 0 0); background: rgba(255,0,60,.2); }
}

/* ── SCROLLBARS ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .5); }
::-webkit-scrollbar-thumb { background: #3a0d1e; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #5c1230; }
* { scrollbar-width: thin; scrollbar-color: #3a0d1e rgba(0, 0, 0, .5); }

/* ── TEXT SELECTION ─────────────────────────────────────────────────── */
::selection { background: rgba(255, 0, 60, .5); color: #fff; text-shadow: none; }

/* ── VIEW TRANSITIONS: harter Cut statt weichem Warp ────────────────── */
@keyframes viewGlitchIn {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0); filter: saturate(2) contrast(1.3); }
  8%   { opacity: 1; clip-path: inset(45% 0 40% 0); transform: translateX(-8px); }
  16%  { clip-path: inset(10% 0 75% 0); transform: translateX(6px); }
  24%  { clip-path: inset(0 0 0 0); transform: translateX(0); filter: saturate(1); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: none; transform: none; }
}
.view > .home-layout,
.view > .center-panel,
.view > .lobby-layout,
.view > .game-layout,
.view > .game-over-layout,
.view > .tournament-layout {
  animation: viewGlitchIn .4s steps(6, end) both;
}

/* ── HARD-EDGE PANELS: weniger Glas, mehr beschädigter Monitor ──────── */
.center-panel,
.profile-popup,
.modal-box,
.match-ready-box,
.easter-egg-panel,
.replay-box,
.room-list-box,
.qr-modal-box {
  background: var(--glass);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  position: relative;
}
.center-panel::after,
.profile-popup::after,
.modal-box::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, .12) 3px, rgba(0, 0, 0, .12) 4px);
  mix-blend-mode: multiply;
}

.center-panel {
  border: 1px solid rgba(0, 212, 255, .3);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .5),
    0 20px 50px rgba(0, 0, 0, .85),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Ruhige, gedämpfte Kante statt buntem Warnstreifen */
.center-panel::before {
  border: none;
  height: 1px; bottom: auto;
  background: rgba(255, 45, 107, .3);
}

.panel-title {
  color: var(--text);
  -webkit-text-fill-color: initial;
  background: none;
  position: relative;
  text-shadow: 0 0 6px rgba(255, 45, 107, .3);
  animation: hardGlitchText 7s steps(1) infinite;
}
@keyframes hardGlitchText {
  0%, 94%, 100% { text-shadow: 0 0 6px rgba(255,45,107,.3); transform: none; }
  95% { transform: translate(-2px, 1px) skewX(-3deg); text-shadow: -3px 0 0 rgba(0,255,229,.4), 3px 0 0 rgba(255,0,60,.3); }
  96% { transform: translate(2px, -1px); text-shadow: 3px 0 0 rgba(255,0,60,.3), -3px 0 0 var(--blue); }
  97% { transform: none; text-shadow: 0 0 6px rgba(255,45,107,.3); }
}

/* ── BUTTONS: harte Kante, gelb-schwarzer Warnstreifen statt Shine ──── */
.btn-primary, .btn-secondary, .btn-mode, .btn-ready,
.btn-challenge-accept, .btn-challenge-decline, .btn-copy {
  position: relative; overflow: hidden;
  transition: all .12s steps(2, end);
}
.btn-primary {
  background: var(--pink);
  animation: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 10px rgba(255, 45, 107, .3);
}
.btn-primary:hover {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 255, 255, .4);
  transform: translate(-1px, -1px);
}
.btn-primary:active { transform: translate(1px, 1px); }
.btn-secondary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 10px rgba(0, 212, 255, .25);
}

/* ── INPUTS ─────────────────────────────────────────────────────────── */
.cyber-input:focus {
  border-color: var(--pink);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .4),
    0 0 12px rgba(255, 45, 107, .2);
}
.cyber-input { transition: border-color .12s, box-shadow .12s; }

/* ── HOME: Wordmark hart statt weich ────────────────────────────────── */
.game-wordmark {
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  letter-spacing: .28em;
  opacity: 1;
  color: var(--pink);
  text-shadow: 0 0 8px rgba(255, 45, 107, .5);
  animation: wordmarkGlitch 6s steps(1) infinite;
}
@keyframes wordmarkGlitch {
  0%, 90%, 100% { text-shadow: 0 0 8px rgba(255,45,107,.5); transform: none; clip-path: inset(0 0 0 0); }
  91% { transform: translate(-4px, 1px); clip-path: inset(20% 0 55% 0); text-shadow: 3px 0 0 rgba(0,255,229,.4), -3px 0 0 rgba(255,0,60,.4); }
  92% { transform: translate(3px, -1px); clip-path: inset(60% 0 10% 0); text-shadow: -3px 0 0 rgba(0,255,229,.4), 3px 0 0 rgba(255,0,60,.4); }
  93% { transform: translate(-2px, 2px); clip-path: inset(5% 0 80% 0); text-shadow: 0 0 8px rgba(255,45,107,.5); }
  94% { transform: none; clip-path: inset(0 0 0 0); }
}
.tagline { color: rgba(180, 190, 210, .4); text-shadow: none; letter-spacing: .45em; }

.btn-mode {
  border: 1px solid rgba(0, 212, 255, .18);
  background: linear-gradient(160deg, rgba(0, 212, 255, .02), rgba(0, 0, 0, .75));
  will-change: transform;
}
.btn-mode:hover {
  border-color: var(--pink);
  background: linear-gradient(160deg, rgba(255, 45, 107, .06), rgba(0, 0, 0, .8));
  box-shadow: 0 6px 0 rgba(0, 0, 0, .5), 0 0 14px rgba(255, 45, 107, .15);
  transform: translate(-2px, -2px);
}
.btn-mode .mode-icon { transition: transform .15s steps(2, end), text-shadow .15s; }
.btn-mode:hover .mode-icon { transform: scale(1.2); text-shadow: 0 0 10px rgba(255, 45, 107, .5); }

.player-badge {
  border: 1px solid rgba(0, 212, 255, .25);
  background: linear-gradient(120deg, rgba(0, 212, 255, .03), rgba(0, 0, 0, .75));
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
  position: relative; overflow: hidden;
}
.badge-name { text-shadow: 0 0 6px rgba(0, 212, 255, .4); }

/* ── MODE CARDS: harte 3D-Neigung, gedämpfter Glow ──────────────────── */
.mode-card {
  background: linear-gradient(165deg, rgba(0, 212, 255, .02), rgba(0, 0, 0, .78));
  will-change: transform;
  transition: transform .12s ease-out, border-color .15s, box-shadow .15s, background .15s;
  position: relative;
}
.mode-card:hover {
  border-color: var(--pink);
  background: linear-gradient(165deg, rgba(255, 45, 107, .06), rgba(0, 0, 0, .82));
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .6), 0 0 18px rgba(255, 45, 107, .15);
  transform: translate(-3px, -3px);
}
.mode-card-icon { transition: transform .18s steps(3, end), text-shadow .18s; }
.mode-card:hover .mode-card-icon { transform: scale(1.25); text-shadow: 0 0 12px rgba(255,45,107,.5); }
.mode-card:hover .mode-card-name { color: #fff; text-shadow: 0 0 8px rgba(0,212,255,.4); }

/* ── LEADERBOARD ────────────────────────────────────────────────────── */
.leaderboard-container {
  background: var(--glass);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
}
.tab-btn.active {
  background: linear-gradient(180deg, rgba(0, 212, 255, .1), rgba(0, 212, 255, .02));
  box-shadow: inset 0 -2px 0 rgba(0, 212, 255, .5);
  text-shadow: 0 0 6px rgba(0,212,255,.4);
}
.lb-row { transition: background .1s, transform .1s; }
.lb-row:hover {
  background: linear-gradient(90deg, rgba(255, 45, 107, .06), transparent 80%);
  transform: translateX(3px);
  box-shadow: inset 3px 0 0 rgba(255, 45, 107, .5);
}
.lb-row.gold-row { box-shadow: inset 3px 0 0 var(--gold); }
.lb-row.silver-row { box-shadow: inset 3px 0 0 #c0c0c0; }
.lb-row.bronze-row { box-shadow: inset 3px 0 0 #cd7f32; }

/* ── GAME BOARD: harte Arena statt sanfter Aura ─────────────────────── */
.game-board {
  background: rgba(2, 2, 6, .93);
  border: 1px solid rgba(0, 212, 255, .25);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 24px 60px rgba(0, 0, 0, .85),
    0 0 24px rgba(0, 212, 255, .06);
  position: relative;
}
.game-board::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.1) 3px, rgba(0,0,0,.1) 4px);
}

.board-cell {
  border-radius: 2px;
  background: rgba(4, 4, 10, .92);
  border: 1px solid rgba(0, 212, 255, .1);
  transition: background .1s, box-shadow .1s, border-color .1s;
}
.board-cell:hover {
  background: rgba(0, 212, 255, .08);
  box-shadow: inset 0 0 10px rgba(0, 212, 255, .2);
  border-color: rgba(0, 212, 255, .4);
}
.board-cell:has(.token.ghost) {
  box-shadow: inset 0 0 14px rgba(255, 45, 107, .3);
  border-color: rgba(255, 45, 107, .5);
}

/* Token-Drop: härterer Datamosh-Trail statt weichem Bloom */
.token.dropping { animation: tokenDropHard .26s steps(5, end); }
@keyframes tokenDropHard {
  0%   { transform: translateY(-320%); opacity: .6; filter: contrast(1.6) saturate(1.8); }
  60%  { transform: translateY(2%); }
  80%  { transform: translateY(-4%); filter: none; }
  100% { transform: translateY(0); opacity: 1; filter: none; }
}

.col-arrow { font-size: 1.15rem; }
.col-arrow:hover { color: var(--pink); text-shadow: 0 0 8px rgba(255,45,107,.5); }

.player-info {
  border-radius: 2px;
  background: linear-gradient(160deg, rgba(0, 212, 255, .02), rgba(0, 0, 0, .75));
}
.player-info.active {
  border-color: var(--blue);
  background: linear-gradient(160deg, rgba(0, 212, 255, .06), rgba(0, 0, 0, .78));
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 10px rgba(0, 212, 255, .18);
}

.turn-indicator.my-turn {
  background: rgba(0, 212, 255, .08);
  color: #fff; text-shadow: 0 0 6px rgba(0,212,255,.5);
  box-shadow: inset 0 -2px 0 rgba(0, 212, 255, .5);
}

/* ── LOBBY ──────────────────────────────────────────────────────────── */
.lobby-code { background: rgba(0, 5, 0, .6); border-radius: 2px; position: relative; overflow: hidden; }
.lobby-code::after {
  content: '';
  position: absolute; top: -20%; bottom: -20%; width: 20%; left: -40%;
  background: repeating-linear-gradient(115deg, rgba(57,255,20,.2) 0 4px, transparent 4px 8px);
  animation: codeShine 3.6s steps(4, end) infinite;
}
@keyframes codeShine { 0%, 55% { left: -40%; } 85%, 100% { left: 120%; } }

/* ── GAME OVER: harter Cut-In statt weichem Scale-In ────────────────── */
.game-over-title {
  color: var(--pink);
  -webkit-text-fill-color: initial;
  background: none;
  text-shadow: 0 0 10px rgba(255,45,107,.5), 3px 0 0 rgba(0,255,229,.3), -3px 0 0 rgba(255,0,60,.3);
  animation: gameOverGlitchIn .5s steps(6, end) both;
}
@keyframes gameOverGlitchIn {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.3); }
  30%  { opacity: 1; clip-path: inset(40% 0 20% 0); transform: scale(1.05) translateX(-6px); }
  60%  { clip-path: inset(10% 0 60% 0); transform: scale(1) translateX(4px); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1) translateX(0); }
}
.elo-change { border-radius: 2px; }
.elo-change.positive { background: rgba(57, 255, 20, .08); animation: eloPop .3s steps(3, end) both .3s; }
.elo-change.negative { background: rgba(255, 0, 60, .08); }
@keyframes eloPop { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }

/* ── LOADING SCREEN ─────────────────────────────────────────────────── */
.loading-logo {
  color: var(--pink);
  -webkit-text-fill-color: initial;
  background: none;
  text-shadow: 0 0 12px rgba(255,45,107,.5);
  animation: wordmarkGlitch 3.5s steps(1) infinite;
}
.loading-bar-wrap { border-radius: 0; overflow: hidden; box-shadow: 0 0 8px rgba(0, 212, 255, .12); }
.loading-bar {
  background: var(--pink);
  box-shadow: 0 0 10px rgba(255, 45, 107, .4);
}

/* ── LOGIN GATE ─────────────────────────────────────────────────────── */
.login-gate-content {
  background: var(--glass);
  border-radius: 0;
  border-color: rgba(255, 45, 107, .5);
  box-shadow: 0 0 20px rgba(255, 45, 107, .15), inset 0 0 30px rgba(255, 45, 107, .03);
}
.login-gate-warning { text-shadow: none; }
.login-gate-title {
  color: var(--blue);
  -webkit-text-fill-color: initial;
  background: none;
  text-shadow: 0 0 10px rgba(0,212,255,.5);
  animation: wordmarkGlitch 5s steps(1) infinite;
}
.login-gate-desc { background: rgba(255, 45, 107, .04); border-color: rgba(255, 45, 107, .2); }
.login-gate-btn { box-shadow: 0 0 12px rgba(255, 45, 107, .25) !important; }

/* ── OVERLAYS ───────────────────────────────────────────────────────── */
.overlay { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); background: rgba(0, 0, 0, .92); }
.challenge-inner, .challenge-sent-inner { background: rgba(4, 2, 3, .96); border-radius: 0; }

/* ── ACHIEVEMENT POPUP ──────────────────────────────────────────────── */
.achievement-popup { background: rgba(2, 12, 2, .92); border-radius: 0; }

/* ── SKIN PICKER ────────────────────────────────────────────────────── */
.skin-option:hover { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(0, 212, 255, .5)); }
.skin-option.selected { animation: selectedSkinPulse 1.4s steps(2, end) infinite; }
@keyframes selectedSkinPulse { 0%, 100% { box-shadow: 0 0 8px var(--pink); } 50% { box-shadow: 0 0 18px var(--pink), 0 0 32px rgba(255,45,107,.3); } }

.mode-card, .btn-mode, .lb-row, .tab-btn, .btn-timer { user-select: none; }

/* ── REDUCED MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  #wow-canvas, .grain-overlay, .glitch-burst { display: none; }
}

/* ── MOBILE FEINSCHLIFF ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .game-wordmark { font-size: clamp(1.4rem, 7vw, 2rem); letter-spacing: .2em; }
  body::before { animation: none; }
  .mode-card:hover, .btn-mode:hover { transform: none; }
}