/* ============================================================
   DAWNFALL — SCP-3008 interactive floor plan
   Requires: shared.css, auth.css
   ============================================================ */

/* ── Blueprint palette ───────────────────────────────────── */

:root {
  --bp-bg:            #0d1f3c;
  --bp-line:          #4a9eff;
  --bp-text:          #c8e0ff;
  --bp-text-muted:    #5a90c0;
  --bp-text-accent:   #90c8ff;
  --bp-text-danger:   #ff6b6b;
  --bp-text-unknown:  #304880;
  --bp-danger:        #cc4444;
  --bp-hatch:         #cc3333;

  --bp-zone-safe:     rgba(50, 120, 255, 0.10);
  --bp-zone-exit:     rgba(200, 40, 40, 0.12);
  --bp-zone-corr:     rgba(30, 70, 180, 0.12);
  --bp-zone-camp:     rgba(60, 140, 255, 0.12);
  --bp-zone-storage:  rgba(30, 80, 200, 0.10);
  --bp-zone-transit:  rgba(50, 180, 255, 0.09);
  --bp-zone-shadow:   rgba(5, 10, 50, 0.45);

  --bp-panel-bg:      rgba(10, 25, 60, 0.96);
  --bp-panel-border:  rgba(74, 158, 255, 0.30);
  --bp-bar-track:     rgba(74, 158, 255, 0.15);
  --bp-bar-fill:      rgba(74, 158, 255, 0.50);
  --bp-hover:         rgba(74, 158, 255, 0.08);
  --bp-hover-danger:  rgba(200, 50, 50, 0.10);
  --bp-hover-shadow:  rgba(30, 60, 180, 0.08);
}

/* auth-pg normally grows to fill the page; here it only wraps the banner */
.auth-pg { flex: none; }

/* ── Entity animation in banner icon ────────────────────── */

.auth-pg-icon {
  width: 80px;
  height: 80px;
  overflow: hidden;
  background: #04020a;
  border-color: var(--bp-line);
  padding: 0;
}

@media (max-width: 640px) {
  .auth-pg-icon { width: 56px; height: 56px; }
}

.entity-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: entityFloat 3s ease-in-out infinite;
}

@keyframes entityFloat {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-5px); }
}

.entity-main,
.entity-ghost-r,
.entity-ghost-c {
  position: absolute;
  bottom: 0;
  height: 90%;
  width: auto;
  max-width: 100%;
  image-rendering: pixelated;
}

.entity-main {
  z-index: 2;
  animation: entityGlitch 4s steps(1) infinite;
}

.entity-ghost-r {
  z-index: 1;
  mix-blend-mode: screen;
  filter: saturate(0) sepia(1) hue-rotate(320deg) saturate(4) brightness(1.2);
  opacity: 0;
  animation: entityGhostR 4s steps(1) infinite;
}

.entity-ghost-c {
  z-index: 1;
  mix-blend-mode: screen;
  filter: saturate(0) sepia(1) hue-rotate(160deg) saturate(4) brightness(1.2);
  opacity: 0;
  animation: entityGhostC 4s steps(1) infinite;
}

@keyframes entityGlitch {
  0%    { clip-path: none; transform: translate(0,0); filter: none; }
  4%    { clip-path: inset(48% 0 49% 0); transform: translate(2px,0);   filter: drop-shadow(2px 0 0 oklch(0.7 0.22 15/0.35)); }
  4.5%  { clip-path: none; transform: translate(0,0); filter: none; }
  18%   { clip-path: inset(5% 0 72% 0);  transform: translate(-6px,0);   filter: drop-shadow(-4px 0 0 oklch(0.7 0.25 15/0.9)) brightness(1.5); }
  18.4% { clip-path: inset(60% 0 8% 0);  transform: translate(5px,1px);  filter: drop-shadow(4px 0 0 oklch(0.7 0.22 200/0.9)) brightness(1.3); }
  18.8% { clip-path: inset(30% 0 40% 0); transform: translate(-4px,-1px);filter: drop-shadow(0 0 6px oklch(0.8 0.3 285)) brightness(2); }
  19.2% { clip-path: none; transform: translate(0,0); filter: none; }
  38%   { clip-path: inset(35% 0 48% 0); transform: translate(6px,0) skewX(-2deg);   filter: drop-shadow(-4px 0 0 oklch(0.7 0.25 15/0.85)) brightness(1.5); }
  38.4% { clip-path: inset(70% 0 5% 0);  transform: translate(-5px,-1px) skewX(2deg);filter: drop-shadow(0 0 8px oklch(0.8 0.3 285)) brightness(2); }
  38.8% { clip-path: none; transform: translate(0,0); filter: none; }
  62%   { clip-path: inset(22% 0 58% 0); transform: translate(-7px,1px); filter: drop-shadow(5px 0 0 oklch(0.7 0.25 15/0.9)) brightness(1.7); }
  62.4% { clip-path: inset(65% 0 12% 0); transform: translate(6px,-1px); filter: drop-shadow(-5px 0 0 oklch(0.7 0.22 200/0.9)) hue-rotate(300deg); }
  62.8% { clip-path: inset(40% 0 35% 0); transform: translate(-3px,2px); filter: drop-shadow(0 0 10px oklch(0.9 0.35 285)) brightness(2.5); }
  63.2% { clip-path: none; transform: translate(0,0); filter: none; }
  86%   { clip-path: inset(8% 0 76% 0);  transform: translate(-6px,0);   filter: drop-shadow(4px 0 0 oklch(0.7 0.25 15/0.9)) brightness(1.8); }
  86.4% { clip-path: inset(52% 0 16% 0); transform: translate(5px,-1px); filter: drop-shadow(-4px 0 0 oklch(0.7 0.22 200/0.9)) hue-rotate(150deg); }
  86.8% { clip-path: none; transform: translate(0,0); filter: none; }
  100%  { clip-path: none; transform: translate(0,0); filter: none; }
}

@keyframes entityGhostR {
  0%,100% { opacity: 0; transform: translate(0,0); }
  4%    { opacity: 0.20; transform: translate(-2px,0); }
  4.6%  { opacity: 0; }
  18%   { opacity: 0.55; transform: translate(-5px,0); }
  18.6% { opacity: 0.45; transform: translate(-4px,1px); }
  19.2% { opacity: 0; }
  38%   { opacity: 0.55; transform: translate(-6px,0); }
  38.6% { opacity: 0.45; transform: translate(-4px,-1px); }
  39%   { opacity: 0; }
  62%   { opacity: 0.60; transform: translate(-7px,1px); }
  62.6% { opacity: 0.50; transform: translate(-5px,-1px); }
  63.2% { opacity: 0; }
  86%   { opacity: 0.60; transform: translate(-6px,0); }
  86.6% { opacity: 0.50; transform: translate(-5px,-1px); }
  87%   { opacity: 0; }
}

@keyframes entityGhostC {
  0%,100% { opacity: 0; transform: translate(0,0); }
  4%    { opacity: 0.18; transform: translate(2px,0); }
  4.6%  { opacity: 0; }
  18.3% { opacity: 0.50; transform: translate(5px,0); }
  18.9% { opacity: 0.45; transform: translate(4px,-1px); }
  19.4% { opacity: 0; }
  38.4% { opacity: 0.50; transform: translate(6px,0); }
  38.9% { opacity: 0.45; transform: translate(4px,1px); }
  39.4% { opacity: 0; }
  62.3% { opacity: 0.55; transform: translate(7px,-1px); }
  62.8% { opacity: 0.45; transform: translate(5px,1px); }
  63.4% { opacity: 0; }
  86.4% { opacity: 0.50; transform: translate(6px,1px); }
  87%   { opacity: 0.40; transform: translate(4px,-1px); }
  87.5% { opacity: 0; }
}

/* ── Title overrides ─────────────────────────────────────── */

.auth-pg-title span:not(.scp-title-prefix) {
  background-image: var(--red-gradient);
  display: inline-block;
  animation: scp-3008-glitch 4s steps(1) 2s infinite;
}

@keyframes scp-3008-glitch {
  0%, 12%, 100% { transform: none;                           filter: none; }
  2%            { transform: translateX( 2px) skewX( 4deg);  filter: hue-rotate(120deg) drop-shadow(-2px 0 rgba(220,38,38,0.9)); }
  4%            { transform: translateX(-2px);               filter: saturate(0)        drop-shadow( 2px 0 rgba(0,200,255,0.7)); }
  6%            { transform: translateX( 1px);               filter: hue-rotate(220deg) drop-shadow(-1px 0 rgba(220,38,38,0.5)); }
  8%            { transform: none;                           filter: none; }
}

.auth-pg-title .scp-title-prefix {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--text);
  display: inline-block;
  animation: scp-title-glitch 4s steps(1) infinite;
}

@keyframes scp-title-glitch {
  0%, 12%, 100% { transform: none;                           filter: none; }
  2%            { transform: translateX(-2px) skewX(-5deg);  filter: hue-rotate(160deg) drop-shadow( 2px 0 rgba(220,38,38,0.9)); }
  4%            { transform: translateX( 2px);               filter: brightness(0.15)   drop-shadow(-2px 0 rgba(0,220,180,0.7)); }
  6%            { transform: translateX(-1px);               filter: hue-rotate( 80deg) drop-shadow( 2px 0 rgba(220,38,38,0.5)); }
  8%            { transform: none;                           filter: none; }
}

/* ── Wrapper ─────────────────────────────────────────────── */

.scp-floor-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 24px;
  position: relative;
}

.scp-map-scroll {
  width: 100%;
}

.plan-wrapper {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

/* ── SVG layers ──────────────────────────────────────────── */

.plan-svg {
  display: block;
  width: 100%;
  height: auto;
}

.scp-zones-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: all;
}

/* ── SVG element styling ─────────────────────────────────── */

.plan-svg .scp-bg                { fill:   var(--bp-bg); }
.plan-svg .scp-grid              { stroke: var(--bp-line); }
.plan-svg .scp-walls             { stroke: var(--bp-line); fill: none; }
.plan-svg .scp-cross             { stroke: var(--bp-danger); fill: none; }
.plan-svg .scp-scale             { stroke: var(--bp-line); }
.plan-svg .scp-scale text        { fill:   var(--bp-text-muted); }
.plan-svg .scp-house             { stroke: var(--bp-text-accent); }
.plan-svg #hatch-danger line     { stroke: var(--bp-hatch); }

.plan-svg .zone-safe             { fill: var(--bp-zone-safe); }
.plan-svg .zone-exit             { fill: var(--bp-zone-exit); }
.plan-svg .zone-corr             { fill: var(--bp-zone-corr); }
.plan-svg .zone-camp             { fill: var(--bp-zone-camp); }
.plan-svg .zone-storage          { fill: var(--bp-zone-storage); }
.plan-svg .zone-transit          { fill: var(--bp-zone-transit); }
.plan-svg .zone-shadow           { fill: var(--bp-zone-shadow); }

.plan-svg .lbl                   { fill: var(--bp-text); }
.plan-svg .lbl-muted             { fill: var(--bp-text-muted); }
.plan-svg .lbl-accent            { fill: var(--bp-text-accent); }
.plan-svg .lbl-danger            { fill: var(--bp-text-danger); }
.plan-svg .lbl-unknown           { fill: var(--bp-text-unknown); }

/* ── Zone hover tints ────────────────────────────────────── */

.scp-zone {
  fill: transparent;
  cursor: pointer;
  transition: fill 0.15s;
}

.scp-zone:hover                             { fill: var(--bp-hover); }

.scp-zone[data-zone="exit"]:hover,
.scp-zone[data-zone="corr"]:hover,
.scp-zone[data-zone="storage"]:hover,
.scp-zone[data-zone="dark"]:hover           { fill: var(--bp-hover-danger); }

.scp-zone[data-zone="shadow"]:hover         { fill: var(--bp-hover-shadow); }

/* ── Info panel ──────────────────────────────────────────── */

.scp-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 220px;
  background: var(--bp-panel-bg);
  border: 1px solid var(--bp-panel-border);
  border-radius: var(--card-radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 14px 16px;
  z-index: 10;
  font-family: "Dawnfall", sans-serif;
}

.scp-panel-idle {
  font-size: 14px;
  color: rgba(200, 224, 255, 0.45);
  text-align: center;
  margin: 0;
  padding: 4px 0;
}

.scp-panel-name {
  font-family: "Dawnfall", sans-serif;
  font-size: 20px;
  color: var(--bp-text);
  margin-bottom: 2px;
}

.scp-panel-type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(200, 224, 255, 0.45);
  margin-bottom: 10px;
  font-family: var(--font-body, sans-serif);
}

.scp-panel-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(200, 224, 255, 0.82);
}

.scp-panel-desc.scp-panel-danger-text {
  color: var(--bp-text-danger);
  font-family: "Dawnfall", sans-serif;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.scp-panel-desc.scp-panel-unknown-text {
  color: var(--bp-text-unknown);
  font-family: "Dawnfall", sans-serif;
  letter-spacing: 0.25em;
  text-align: center;
  font-size: 26px;
  padding: 6px 0;
}

@keyframes scp-glitch {
  0%   { transform: translateX(0);                   color: rgba(200,224,255,0.28); text-shadow: none; }
  10%  { transform: translateX(-3px) skewX(-3deg);   color: var(--bp-line);         text-shadow:  2px 0 rgba(220,38,38,0.8); }
  20%  { transform: translateX(2px);                 color: rgba(200,224,255,0.06); text-shadow: -2px 0 rgba(0,220,255,0.7); }
  30%  { transform: translateX(0);                   color: rgba(220,38,38,0.85);   text-shadow: none; }
  40%  { transform: translateX(-2px) scaleX(1.04);   color: rgba(200,224,255,0.45); text-shadow:  3px 0 rgba(0,220,255,0.5); }
  50%  { transform: translateX(3px) skewX(2deg);     color: rgba(200,224,255,0.28); text-shadow: -3px 0 rgba(220,38,38,0.6); }
  60%  { transform: translateX(-1px);                color: #00d4ff;                text-shadow:  2px 0 rgba(0,220,255,0.8); }
  70%  { transform: translateX(2px) scaleX(0.97);    color: rgba(200,224,255,0.1);  text-shadow: -1px 0 rgba(220,38,38,0.5); }
  80%  { transform: translateX(0) skewX(-1deg);      color: rgba(200,224,255,0.55); text-shadow: none; }
  90%  { transform: translateX(-2px);                color: rgba(200,224,255,0.15); text-shadow:  2px 0 rgba(220,38,38,0.7); }
  100% { transform: translateX(0);                   color: rgba(200,224,255,0.28); text-shadow: none; }
}

.scp-panel-desc.scp-panel-glitch-text {
  font-family: "Dawnfall", sans-serif;
  letter-spacing: 0.25em;
  text-align: center;
  font-size: 26px;
  padding: 6px 0;
  animation: scp-glitch 0.55s steps(1) infinite;
}

/* ── Countdown bar ───────────────────────────────────────── */

.scp-panel-bar-wrap {
  height: 1px;
  background: var(--bp-bar-track);
  border-radius: 0;
  overflow: hidden;
  margin-top: 12px;
}

.scp-panel-bar {
  height: 100%;
  width: 100%;
  background: var(--bp-bar-fill);
  border-radius: 0;
  transform-origin: left;
}

/* ── Footer ──────────────────────────────────────────────── */

.scp-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
}

.scp-attribution {
  font-size: 11px;
  color: var(--text);
  text-align: center;
  margin: 0;
  line-height: 1.6;
}

.scp-attribution a          { color: var(--text); text-decoration: none; }
.scp-attribution a:hover    { color: var(--text-muted); }

.scp-footer > a {
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s;
}
.scp-footer > a:hover       { color: var(--text-muted); }

/* ── Map glitch on wipeout ───────────────────────────────── */

@keyframes map-glitch {
  0%,100% { filter: none; transform: none; }
  8%      { filter: hue-rotate(90deg) saturate(2) brightness(1.4); transform: translateX(3px); }
  16%     { filter: hue-rotate(200deg) saturate(3) brightness(0.8); transform: translateX(-4px) skewX(-1deg); }
  24%     { filter: none; transform: none; }
  40%     { filter: hue-rotate(320deg) saturate(2.5) brightness(1.6); transform: translateX(5px) skewX(2deg); }
  48%     { filter: invert(0.12) hue-rotate(160deg); transform: translateX(-3px); }
  56%     { filter: none; transform: none; }
  72%     { filter: hue-rotate(40deg) saturate(3) brightness(1.3); transform: translateX(4px); }
  80%     { filter: none; transform: none; }
}

.scp-map-glitch {
  animation: map-glitch 0.6s steps(1) infinite;
}

/* ── Simulation canvas ───────────────────────────────────── */

.scp-sim-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 640px) {
  .scp-floor-wrap {
    flex-direction: column;
    padding: 0;
    align-items: stretch;
  }

  .scp-map-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .plan-wrapper {
    min-width: 580px;
    max-width: none;
    padding: 8px;
  }

  .scp-panel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid var(--bp-panel-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}