/* ══════════════════════════════════════════════════════════════
   SLAKTARBANDY — "BANDET FRÅN SNÖSTORP"
   80-tals skräckfilm. Analogt, urblekt, slafsigt. Aldrig neon.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Palett — gulnad furu, lysrör, torkat blod, band-svart */
  --pine:        #a68a5b;
  --pine-dark:   #6b5836;
  --pine-deep:   #3d3220;
  --fluoro:      #cfd8c2;
  --fluoro-dim:  #8b957e;
  --blood:       #6e0f0f;
  --blood-bright:#a01818;
  --blood-dry:   #4a0d0d;
  --tape-black:  #0a0908;
  --panel:       #141008;
  --panel-2:     #1c1710;
  --bone:        #d8cfbd;
  --bone-dim:    #9a917e;
  --moss:        #7a9a6d;
  --brass:       #b08b59;
  --silver:      #9a9a92;
  --bronze:      #8a6b4f;
  --ekg-green:   #9ec49a;

  --text-main:   var(--bone);
  --text-muted:  var(--bone-dim);
  --text-secondary: var(--fluoro-dim);

  --color-win:   var(--moss);
  --color-mid:   var(--brass);
  --color-loss:  var(--blood-bright);
  --accent-primary: var(--blood-bright);
  --border-subtle: rgba(216, 207, 189, 0.12);

  --font-horror: 'Nosifer', cursive;
  --font-camp:   'Creepster', cursive;
  /* heter så av historiska skäl — är numera skrivmaskin (akter/dokument) */
  --font-vcr:    'Special Elite', 'Courier New', monospace;
  --font-type:   'Special Elite', 'Courier New', monospace;
  --font-body:   'Outfit', sans-serif;

  /* Alias som app.js inline-stilar använder */
  --bg-primary:   var(--tape-black);
  --font-display: var(--font-camp);
  --font-vintage: var(--font-camp);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--tape-black);
  color: var(--text-main);
  font-family: var(--font-body);
  overflow-x: hidden;
  min-height: 100vh;
}

.hidden { display: none !important; }

::selection { background: var(--blood); color: var(--bone); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tape-black); }
::-webkit-scrollbar-thumb { background: var(--pine-deep); border-radius: 5px; border: 2px solid var(--tape-black); }
::-webkit-scrollbar-thumb:hover { background: var(--blood); }

/* ══════════════════════════════════════════════
   GLOBALT LJUS — vignett + flackande lysrör i salen
   ══════════════════════════════════════════════ */

.shadow-overlay {
  position: fixed; inset: 0;
  z-index: 89;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 45%, rgba(0,0,0,0.55) 100%);
  animation: fluoro-flicker 7s infinite steps(1);
}

/* Strömavbrott — mörkret breder ut sig från lysröret i taket */
.blackout {
  position: fixed; inset: 0;
  z-index: 93;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 130% 110% at 68% 8%, #000 25%, rgba(0, 0, 0, 0.86) 100%);
}

body.light-fail .blackout { animation: blackout-flicker 0.5s steps(1) both; }

/* ── Prologen: helskärms-intro innan salen öppnas ── */
#intro-overlay {
  position: fixed; inset: 0;
  z-index: 200;
  background: #050302;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity 1.4s ease;
}
#intro-overlay.intro-done {
  opacity: 0;
  pointer-events: none;
}
.intro-lines {
  font-family: var(--font-type);
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  color: #c9bfa8;
  letter-spacing: 0.06em;
  line-height: 2.2;
  text-align: center;
  padding: 0 1.5rem;
  max-width: 46rem;
  min-height: 11rem;
  text-shadow: 0 0 14px rgba(160, 24, 24, 0.25);
}
.intro-line { display: block; }
.intro-caret {
  display: inline-block;
  width: 0.55em;
  color: var(--blood-bright);
  animation: intro-blink 0.85s steps(1) infinite;
}
@keyframes intro-blink { 50% { opacity: 0; } }
.intro-hint {
  position: absolute;
  bottom: 8vh;
  font-family: var(--font-type);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 1.2s ease;
}
#intro-overlay.intro-hint-on .intro-hint { opacity: 0.75; }

@keyframes blackout-flicker {
  0%   { opacity: 0; }
  10%  { opacity: 0.88; }
  22%  { opacity: 0.08; }
  34%  { opacity: 0.72; }
  46%, 100% { opacity: 0; }
}

/* Ljuset dör när en akt öppnas — filmisk övergång */
body.lights-out .blackout { animation: blackout-dip 0.38s ease-out both; }

@keyframes blackout-dip {
  0%   { opacity: 0; }
  30%  { opacity: 0.7; }
  100% { opacity: 0; }
}

@keyframes fluoro-flicker {
  0%, 100% { opacity: 1; }
  91% { opacity: 1; }
  92% { opacity: 0.82; }
  93% { opacity: 1; }
  95% { opacity: 0.9; }
  96% { opacity: 1; }
}

.audio-toggle {
  position: fixed;
  top: 44px; right: 16px;
  z-index: 96;
  font-family: var(--font-vcr);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--fluoro);
  background: rgba(10, 9, 8, 0.7);
  border: 1px solid rgba(207, 216, 194, 0.35);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  text-shadow: inherit;
}

.audio-toggle:hover { border-color: var(--blood-bright); color: #fff; }
.audio-toggle span { color: var(--blood-bright); }
.audio-toggle.on span { color: var(--moss); }

/* ══════════════════════════════════════════════
   GYMPASALEN (huvudvy)
   ══════════════════════════════════════════════ */

#gympasal-rum {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(10, 9, 8, 0.25), rgba(10, 9, 8, 0.55)),
    url('photos/vhs/GymHall.webp') center 35% / cover no-repeat,
    var(--tape-black);
}

.room-shadow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(10, 9, 8, 0.5) 85%),
    linear-gradient(to top, rgba(10, 9, 8, 0.85), transparent 30%);
}

/* Lysrörets gloria — salens enda ljuskälla, allt flimmer utgår härifrån */
.tube-glow {
  position: absolute;
  left: 68%; top: 8.5%;
  width: 46%; height: 34%;
  transform: translate(-50%, -40%);
  background: radial-gradient(ellipse at 50% 22%,
    rgba(216, 232, 200, 0.4) 0%,
    rgba(216, 232, 200, 0.13) 38%,
    transparent 68%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  animation: fluoro-flicker 7s infinite steps(1);
}

/* Strömmen går: röret dör först, sen följer salen efter */
body.light-fail .tube-glow { animation: tube-die 0.5s steps(1) both; }

@keyframes tube-die {
  0%   { opacity: 1; }
  10%  { opacity: 0.02; }
  22%  { opacity: 0.9; }
  34%  { opacity: 0.05; }
  46%, 100% { opacity: 1; }
}

/* ── Skölden — trofén på väggen, det enda högljudda ── */
.crest-wrap {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none; /* markörerna på golvet ska alltid gå att nå */
}

.crest {
  display: block;
  width: clamp(280px, 56vmin, 640px);
  height: auto;
  transform-origin: 50% 0; /* hänger på sin spik — pendeln drivs av JS-fysik i app.js */
  filter:
    saturate(0.92)
    drop-shadow(0 34px 60px rgba(0, 0, 0, 0.8))
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6));
}

/* Bloddroppen under skölden BORTTAGEN 2026-07-22 (användaren: "inte verklig,
   kommer för sällan, tillför inget"). */

/* ── Sanning-chippet — IHOPFÄLLT till en liten lägeslampa; expanderar vid
   hover (desktop) eller första trycket (pekskärm). Användaren 2026-07-22:
   "något litet som blir större när man hovrar över det". ── */
/* Sanning-lampan finns bara kvar i Obduktionen (2026-07-23): MÅLSKILLNAD-fliken.
   Spelarakten har i stället omkopplaren direkt på målskillnadskorten — se
   .stat-card--truth nedan. buildTruthChips monterar lampan bara i insights. */
#view-insights .truth-chip { display: none; }
#view-insights[data-obd-active="malskillnad"] .truth-chip { display: inline-flex; }

.truth-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 35px;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.42rem;
  background: linear-gradient(160deg, #2a251d, #171310);
  border: 1px solid rgba(166, 138, 91, 0.35);
  box-shadow: inset 0 1px 0 rgba(216, 207, 189, 0.08), 0 6px 18px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: max-width 0.28s ease, padding 0.28s ease;
}

.truth-chip:hover, .truth-chip:focus-within, .truth-chip.open {
  max-width: 440px;
  padding: 0.42rem 0.65rem;
}

/* Lägeslampan — det enda som syns i ihopfällt läge.
   Grönaktig = nedskriven fakta, blodröd = extrapolerad. */
.truth-dot {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cfd8c4, #5d6b52);
  box-shadow: 0 0 7px rgba(207, 216, 194, 0.45);
  transition: background 0.3s, box-shadow 0.3s;
}

.truth-chip:has(input:checked) .truth-dot {
  background: radial-gradient(circle at 35% 30%, #c14b3a, #6e0f0f);
  box-shadow: 0 0 9px rgba(160, 24, 24, 0.65);
}

.truth-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.truth-label {
  font-family: var(--font-type);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}

.toggle-switch { position: relative; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 2; margin: 0; }

.toggle-slider {
  display: block;
  width: 52px; height: 26px;
  background: #0d0b09;
  border: 1px solid rgba(166, 138, 91, 0.4);
  border-radius: 13px;
  position: relative;
  transition: background 0.3s;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a8274, #4a4438);
  transition: transform 0.25s ease, background 0.25s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.toggle-switch input:checked + .toggle-slider { background: var(--blood-dry); }
.toggle-switch input:checked + .toggle-slider::after {
  transform: translateX(26px);
  background: radial-gradient(circle at 35% 30%, #d8cfbd, #8a6b4f);
}

.truth-chip:has(input:checked) .truth-label--sim,
.truth-chip:has(input:not(:checked)) .truth-label--raw { color: var(--fluoro); }

/* ⓘ-knappen — tryckvänlig även utan hover (mobil) */
.truth-info {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(166, 138, 91, 0.45);
  background: #0d0b09;
  color: var(--text-muted);
  font-family: var(--font-type);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.truth-info:hover, .truth-chip.open .truth-info { color: var(--fluoro); border-color: var(--fluoro); }

/* Förklaringsrutan — hover på desktop, .open via tryck på mobil */
.truth-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(320px, 82vw);
  padding: 0.8rem 0.9rem;
  background: #14110d;
  border: 1px solid rgba(166, 138, 91, 0.4);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.8);
  font-family: var(--font-type);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-main);
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.truth-popover strong { color: var(--fluoro); display: block; margin-bottom: 0.35rem; letter-spacing: 0.08em; }
.truth-popover p + p { margin-top: 0.45rem; }
.truth-popover em { color: var(--blood-bright); font-style: normal; }

/* Förklaringsrutan öppnas av ⓘ-knappen (inte av att chippet expanderar) */
@media (hover: hover) {
  .truth-info:hover ~ .truth-popover,
  .truth-popover:hover { opacity: 1; visibility: visible; transform: translateY(0); }
}
.truth-chip.open .truth-popover { opacity: 1; visibility: visible; transform: translateY(0); }

/* ── Bevismarkörerna — brottsplatsens meny ── */
.evidence-menu {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.evidence {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px; /* generös träffyta runt objektet */
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Rekvisita-objektet — genererad bild på svart bakgrund, screen-blend smälter in den.
   Masken tonar ut bildens kanter så att ingen "låda" syns mot golvet. */
.evidence__obj {
  width: var(--obj, 90px);
  height: auto;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 66% 66% at 50% 48%, #000 55%, transparent 76%);
  mask-image: radial-gradient(ellipse 66% 66% at 50% 48%, #000 55%, transparent 76%);
  transition: transform 0.16s ease, filter 0.16s ease;
}

/* Mörk gloria bakom objektet — drop-shadow syns inte under screen-blend */
.evidence::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 40%;
  width: 130%;
  aspect-ratio: 1.3;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* Liten skrivmaskinslapp — syns svagt, vaknar vid rörelse */
.evidence__tag {
  font-family: var(--font-type);
  font-size: clamp(0.58rem, 1.4vw, 0.68rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(216, 207, 189, 0.6);
  background: radial-gradient(ellipse at center, rgba(5, 4, 3, 0.6), transparent 74%);
  padding: 0.2em 0.7em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  transition: color 0.16s ease;
}

.evidence:hover .evidence__obj,
.evidence:active .evidence__obj {
  transform: translateY(-3px) scale(1.06);
  filter: brightness(1.25);
}

.evidence:hover .evidence__tag,
.evidence:active .evidence__tag { color: var(--bone); }

.evidence:focus-visible {
  outline: 2px dashed #e9ca3c;
  outline-offset: 2px;
}

/* Nedräkningslapp — nästa slakt (icke-interaktiv). Desktop: uppspikad högst upp
   till vänster i salen (beslut 2026-07-23); mobil: kvar nere till vänster. */
.slakt-note {
  position: absolute;
  z-index: 5;
  top: clamp(12px, 3vh, 28px);
  left: clamp(0.8rem, 3vw, 2rem);
  padding: 0.55rem 0.9rem;
  font-family: var(--font-vcr);
  font-size: clamp(0.6rem, 1.8vw, 0.78rem);
  letter-spacing: 0.1em;
  color: var(--blood);
  background: linear-gradient(175deg, #d8cfbd 0%, #c4b896 55%, #b3a582 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.75);
  transform: rotate(-1.8deg);
  pointer-events: none;
}

/* Placering i salen — rekvisita på olika djup (anpassad till GymHall.png) */
#ev-1 { top: 65%; left: 52.5%; --obj: 108px; } /* pokalen vid den övergivna klubban */
#ev-2 { top: 59%; left: 18.5%; --obj: 92px; }  /* masken vid scenöppningen */
#ev-3 { top: 62%; right: 7%; --obj: 118px; }   /* sågen vid ribbstolen */
#ev-4 { top: 72%; left: 40%; --obj: 148px; }   /* akten i förgrunden, närmast betraktaren */
#ev-5 { top: 76%; left: 11%; --obj: 118px; }   /* regelboken — tappad på golvet, vit pärm */

/* Sågens klinga är mörk i källmaterialet — ljusa upp den så den läser i dunklet */
#ev-3 .evidence__obj { filter: brightness(1.45); }
#ev-3:hover .evidence__obj, #ev-3:active .evidence__obj { filter: brightness(1.8); }

/* ══════════════════════════════════════════════
   MODALER & VYER
   ══════════════════════════════════════════════ */

#modal-backdrop {
  position: fixed; inset: 0;
  z-index: 96;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(5, 4, 3, 0.74) 52%, rgba(40, 4, 4, 0.9) 100%);
  backdrop-filter: blur(3px);
}

/* Lightboxen — AI-/originalporträttet utan polaroidram och filter (2026-07-23) */
#lightbox {
  position: fixed; inset: 0;
  z-index: 120; /* över vyerna (97) och backdrop (96) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(5, 4, 3, 0.94);
  cursor: zoom-out;
  animation: lightbox-in 0.18s ease-out;
}
#lightbox.hidden { display: none; }
#lightbox-img {
  max-width: min(92vw, 1024px);
  max-height: 82vh;
  max-height: 82svh;
  object-fit: contain;
  border: 6px solid #d8cfbd;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9);
}
.lightbox-hint {
  font-family: var(--font-type);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(216, 207, 189, 0.55);
}
@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.main { position: relative; z-index: 97; }

.view {
  display: none;
  position: fixed;
  z-index: 97;
  inset: 4vh 4vw;
  max-width: 1060px;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.9rem clamp(1.2rem, 3vw, 2.5rem) clamp(1.2rem, 3vw, 2.5rem);
  background:
    repeating-linear-gradient(to bottom,
      rgba(216, 207, 189, 0.015) 0px, rgba(216, 207, 189, 0.015) 2px,
      transparent 2px, transparent 5px),
    linear-gradient(165deg, var(--panel-2), var(--panel) 60%, #0e0b07);
  border: 1px solid rgba(166, 138, 91, 0.3);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(216, 207, 189, 0.06);
  animation: modal-in 0.55s ease-out both;
}

.view--active { display: block; }

@keyframes modal-in {
  0%   { opacity: 0; transform: translateY(22px) scale(1.015); filter: brightness(2.4) sepia(1) hue-rotate(-45deg) saturate(3); }
  18%  { opacity: 1; filter: brightness(1.7) sepia(0.6) hue-rotate(-30deg) saturate(2); }
  45%  { transform: translateY(-3px) scale(0.998); filter: none; }
  100% { opacity: 1; transform: none; filter: none; }
}

/* ── Modalens flytande topp-kluster: sanning-chip + ✕ svävar över innehållet
   utan att trycka ner det (användaren 2026-07-22). Baren tar ingen plats i
   flödet (height:0) och släpper igenom klick — knapparna har egen träffyta. ── */
.modal-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.5rem;
  height: 0;
  padding: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

.modal-topbar > * { pointer-events: auto; margin-top: 0.7rem; }

.modal-close {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  font-family: var(--font-vcr);
  font-size: 1.1rem;
  color: var(--bone);
  background: var(--blood-dry);
  border: 1px solid rgba(216, 207, 189, 0.25);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.modal-close:hover { background: var(--blood-bright); transform: rotate(90deg); }

/* Rubrikblocket lämnar plats åt det flytande klustret i högra kanten */
.view__header { margin-bottom: 1.6rem; padding-right: 6.5rem; }

.view__title {
  font-family: var(--font-camp);
  font-weight: 400;
  font-size: clamp(1.9rem, 6vw, 3rem);
  color: var(--bone);
  letter-spacing: 0.04em;
  text-shadow: 0 0 16px rgba(110, 15, 15, 0.55), 0 4px 14px rgba(0,0,0,0.8);
}

.view__desc {
  font-family: var(--font-type);
  color: var(--text-muted);
  font-size: clamp(0.8rem, 2.4vw, 0.95rem);
  margin-top: 0.4rem;
}

/* ── Kort / paneler ── */
.card {
  background: rgba(10, 9, 8, 0.55);
  border: 1px solid var(--border-subtle);
  margin-bottom: 1.6rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border-subtle);
}

.card__title {
  font-family: var(--font-camp);
  font-weight: 400;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  color: var(--fluoro);
  letter-spacing: 0.06em;
}

.card__note {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

.card__controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Träplakett-skin (maratontabellen) */
.card-plaque {
  background:
    repeating-linear-gradient(to bottom,
      transparent 0px, transparent 34px,
      rgba(0,0,0,0.28) 34px, rgba(0,0,0,0.28) 36px),
    linear-gradient(100deg, #4a3a24 0%, #5a4527 30%, #42331e 65%, #4e3d26 100%);
  border: 6px solid var(--pine-deep);
  outline: 1px solid rgba(166, 138, 91, 0.5);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.85),
    inset 0 0 60px rgba(0,0,0,0.5);
}

.card-plaque .card__header { border-bottom-color: rgba(0,0,0,0.4); }

.plaque-title {
  color: var(--brass);
  text-shadow: 0 2px 0 rgba(0,0,0,0.7), 0 -1px 0 rgba(216,207,189,0.2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.card-plaque .table { color: #e8dfc9; }
.card-plaque .table th { color: var(--brass); border-bottom-color: rgba(0,0,0,0.45); }
.card-plaque .table td { border-bottom-color: rgba(0,0,0,0.3); }

.plaque-sub {
  font-family: var(--font-vcr);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--bone-dim);
  text-transform: none;
}

/* EKG-maskin-skin (slaktbänkens graf) */
.card-ekg #compare-chart {
  background:
    repeating-linear-gradient(to right, rgba(158, 196, 154, 0.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, rgba(158, 196, 154, 0.05) 0 1px, transparent 1px 28px),
    #06110a;
  border: 1px solid rgba(158, 196, 154, 0.2);
  margin: 0 1.4rem 1.4rem;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.8);
}

/* ── Statistikkort ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}

.stat-card {
  position: relative;
  padding: 1rem 1.1rem;
  background: linear-gradient(160deg, #1e1a14, #12100b);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 6px; left: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6b6255, #26211a);
}

.stat-card--accent { border-color: rgba(160, 24, 24, 0.5); }

.stat-card__label {
  font-family: var(--font-vcr);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}

.stat-card__value {
  font-family: var(--font-camp);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--fluoro);
  line-height: 1;
}

.stat-card--accent .stat-card__value { color: var(--blood-bright); }

.stat-card__detail {
  font-family: var(--font-type);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* Spelaraktens sanning-omkopplare sitter på målskillnadskorten (2026-07-23) */
.stat-card--truth { cursor: pointer; }
.stat-card--truth:hover { border-color: rgba(160, 24, 24, 0.55); }

.stat-card__truth {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
  font-family: var(--font-type);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.truth-dot--mini {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.truth-dot--mini.truth-dot--sim {
  background: radial-gradient(circle at 35% 30%, #c14b3a, #6e0f0f);
  box-shadow: 0 0 6px rgba(160, 24, 24, 0.65);
}

/* ── Tabeller ── */
.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.table th {
  font-family: var(--font-vcr);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: left;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

/* Sorterbara rubriker — klick sorterar, markör visar aktiv kolumn + riktning */
.table th[data-sort] { cursor: pointer; user-select: none; transition: color 0.15s; }
.table th[data-sort]:hover { color: var(--fluoro); }
.table th[data-sort]:hover::after { content: ' ▾'; opacity: 0.45; }
.table th.sorted-desc::after { content: ' ▼'; color: var(--blood-bright); }
.table th.sorted-asc::after  { content: ' ▲'; color: var(--blood-bright); }
.table th.sorted-desc, .table th.sorted-asc { color: var(--fluoro); }

.table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(216, 207, 189, 0.06);
  white-space: nowrap;
}

.table tbody tr { cursor: pointer; transition: background 0.15s; }
.table tbody tr:hover { background: rgba(160, 24, 24, 0.12); }

.td--rank { font-family: var(--font-vcr); color: var(--text-muted); width: 2.5rem; }
.td--rank-1 { color: var(--brass) !important; text-shadow: 0 0 8px rgba(176,139,89,0.5); }
.td--rank-2 { color: var(--silver) !important; }
.td--rank-3 { color: var(--bronze) !important; }

.td--name { font-weight: 600; }
.td--pts { font-family: var(--font-vcr); color: var(--fluoro); }
.td--bar { min-width: 90px; }

.table-player-cell { display: flex; align-items: center; gap: 0.7rem; }

.table-player-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(166, 138, 91, 0.4);
  filter: sepia(0.3) contrast(1.05) brightness(0.92);
}

.winrate-badge {
  font-family: var(--font-vcr);
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid;
}

.winrate-badge--high { color: var(--color-win); border-color: rgba(122,154,109,0.5); }
.winrate-badge--mid  { color: var(--color-mid); border-color: rgba(176,139,89,0.5); }
.winrate-badge--low  { color: var(--color-loss); border-color: rgba(160,24,24,0.5); }

.dist-bar {
  display: flex;
  height: 8px;
  min-width: 80px;
  background: #0d0b09;
  border: 1px solid rgba(216,207,189,0.1);
  overflow: hidden;
}

.dist-bar__seg--win  { background: var(--color-win); }
.dist-bar__seg--mid  { background: var(--color-mid); }
.dist-bar__seg--loss { background: var(--color-loss); }

/* ── Selects & toggles ── */
.select {
  font-family: var(--font-vcr);
  font-size: 0.75rem;
  color: var(--bone);
  background: #0d0b09;
  border: 1px solid var(--border-subtle);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

.toggle-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.toggle-label input { accent-color: var(--blood-bright); width: 16px; height: 16px; cursor: pointer; }
.toggle-text { font-family: var(--font-type); font-size: 0.78rem; color: var(--text-muted); }

/* ══════════════════════════════════════════════
   KÖTTKVARNEN — polaroid-fallakter
   ══════════════════════════════════════════════ */

.player-search-wrap { margin-bottom: 1.4rem; }

.player-search {
  width: 100%;
  max-width: 380px;
  font-family: var(--font-type);
  font-size: 0.95rem;
  color: var(--bone);
  background: #0d0b09;
  border: 1px solid var(--border-subtle);
  padding: 0.7rem 1rem;
  outline: none;
}

.player-search:focus { border-color: var(--blood-bright); }
.player-search::placeholder { color: var(--bone-dim); }

.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 1.4rem;
  margin-bottom: 1.5rem;
}

.player-card {
  position: relative;
  cursor: pointer;
  background: linear-gradient(172deg, #ddd3bd 0%, #cfc3a8 60%, #bfb294 100%);
  padding: 10px 10px 14px;
  transform: rotate(var(--tilt, -1.6deg));
  box-shadow: 0 10px 25px rgba(0,0,0,0.7);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.player-card:nth-child(3n+1) { --tilt: 1.8deg; }
.player-card:nth-child(4n+2) { --tilt: -2.4deg; }
.player-card:nth-child(5n+3) { --tilt: 0.9deg; }

.player-card::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  width: 64px; height: 20px;
  background: rgba(216, 207, 189, 0.45);
  border-left: 1px dashed rgba(10,9,8,0.12);
  border-right: 1px dashed rgba(10,9,8,0.12);
  transform: translateX(-50%) rotate(-3deg);
  z-index: 2;
}

.player-card:hover {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 16px 40px rgba(0,0,0,0.85), 0 0 30px rgba(160, 24, 24, 0.25);
  z-index: 3;
}

.player-card__photo-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #0d0b09;
  border: 1px solid rgba(10,9,8,0.2);
}

.player-card__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.32) contrast(1.08) brightness(0.9) saturate(0.9);
  transition: filter 0.3s;
}

.player-card:hover .player-card__photo { filter: sepia(0.15) contrast(1.1) brightness(1); }

.player-card__name {
  font-family: var(--font-type);
  font-size: 0.92rem;
  color: #2a2118;
  text-align: center;
  margin-top: 0.7rem;
  line-height: 1.2;
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-card__stats {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  font-family: var(--font-vcr);
  font-size: 0.62rem;
  color: #4a3a28;
  margin-top: 0.3rem;
}

.player-card__stat-val { color: var(--blood); font-size: 0.8rem; }
.player-card .text-accent { color: var(--blood); }

/* ── Spelardetalj (akten) ── */
.player-detail { margin-top: 1rem; }

/* scrollIntoView ska aldrig lägga innehåll under den fasta topp-baren (~93px) */
.player-detail, #player-grid, .player-search-wrap { scroll-margin-top: 110px; }

.btn-back-to-list {
  font-family: var(--font-vcr);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(10, 9, 8, 0.6);
  border: 1px solid rgba(166, 138, 91, 0.5);
  padding: 0.75rem 1.3rem;
  cursor: pointer;
  margin-bottom: 1.4rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-back-to-list:hover { border-color: var(--blood-bright); color: #fff; background: rgba(110, 15, 15, 0.35); }

.player-detail__header-wrap {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.player-detail__photo-large {
  width: clamp(140px, 30vw, 210px);
  aspect-ratio: 1;
  object-fit: cover;
  border: 8px solid #d8cfbd;
  box-shadow: 0 14px 35px rgba(0,0,0,0.75);
  transform: rotate(-1.5deg);
  filter: sepia(0.25) contrast(1.06) brightness(0.94);
  cursor: zoom-in; /* öppnar lightboxen (2026-07-23) */
}

/* Porträttkolumnen i spelarakten: foto + ORIGINAL/AI-toggle + karaktärstext */
.player-detail__photocol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 240px;
  flex-shrink: 0;
}

.portrait-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  background: linear-gradient(160deg, #2a251d, #171310);
  border: 1px solid rgba(166, 138, 91, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.portrait-label {
  font-family: var(--font-type);
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}

.portrait-toggle:has(input:checked) .portrait-label--ai,
.portrait-toggle:has(input:not(:checked)) .portrait-label--orig { color: var(--fluoro); }

/* Mindre variant av sanning-toggeln */
.toggle-switch--small .toggle-slider { width: 42px; height: 21px; }
.toggle-switch--small .toggle-slider::after { width: 15px; height: 15px; }
.toggle-switch--small input:checked + .toggle-slider::after { transform: translateX(21px); }

/* Karaktärstexten — vem porträttet föreställer, i aktspråk */
.player-lore {
  border-left: 3px solid var(--blood-bright);
  padding: 0.55rem 0.8rem;
  background: rgba(10, 9, 8, 0.45);
  font-family: var(--font-type);
}

.player-lore__alias {
  font-family: var(--font-camp);
  font-size: 1.05rem;
  color: var(--blood-bright);
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.player-lore__text {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-main);
  margin: 0;
}

.player-detail__info { flex: 1; min-width: 240px; }

.player-detail__name {
  font-family: var(--font-camp);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--bone);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  text-shadow: 0 3px 10px rgba(0,0,0,0.8);
}

.player-detail__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 0.7rem;
}

.player-detail__meta-item {
  background: rgba(10,9,8,0.5);
  border: 1px solid var(--border-subtle);
  padding: 0.7rem 0.8rem;
}

.player-detail__meta-value {
  font-family: var(--font-camp);
  font-size: 1.5rem;
  color: var(--fluoro);
  line-height: 1.1;
}

.player-detail__meta-label {
  font-family: var(--font-vcr);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.text-win { color: var(--color-win) !important; }
.text-loss { color: var(--color-loss) !important; }
.text-accent { color: var(--blood-bright); }

/* Spelarakten som EGEN sida: när en akt är öppen göms registret helt (2026-07-22) */
#view-player.detail-open .view__header,
#view-player.detail-open .player-search-wrap,
#view-player.detail-open .player-grid { display: none; }

/* Kompakt akt: karaktärstext till vänster, Win%-grafen direkt till höger (desktop) */
.player-detail__main {
  display: grid;
  grid-template-columns: minmax(210px, 300px) 1fr;
  gap: 1.6rem;
  margin-top: 1.8rem;
  align-items: start;
}

.player-detail__lorecol:empty { display: none; }
.player-detail__lorecol:empty + .player-detail__chart { grid-column: 1 / -1; }

.player-detail__chart { margin-top: 0; }
.player-chart-svg { width: 100%; height: auto; }

.player-detail__seasons h4,
.player-detail__chart h4 {
  font-family: var(--font-vcr) !important;
  letter-spacing: 0.15em !important;
  color: var(--fluoro-dim) !important;
}

/* Rykten/citat */
.quote-box {
  font-family: var(--font-type);
  font-size: 0.85rem;
  color: var(--bone);
  background:
    linear-gradient(172deg, rgba(216, 207, 189, 0.08), rgba(216, 207, 189, 0.03));
  border-left: 3px solid var(--blood);
  padding: 0.7rem 1rem;
}

/* ══════════════════════════════════════════════
   ARKIVET — säsonger som mappar/akter
   ══════════════════════════════════════════════ */

.season-picker {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  margin-top: 1.2rem;
  padding-top: 0.5rem;
  overflow-x: auto;           /* smala skärmar: svep sidledes i stället för radbrytning */
  scrollbar-width: thin;
  padding-bottom: 0.3rem;
}

.season-btn {
  position: relative;
  flex-shrink: 0;
  font-family: var(--font-vcr);
  font-size: 0.64rem;
  letter-spacing: 0.02em;
  color: #4a3a28;
  background: linear-gradient(172deg, #d8cfbd 0%, #c4b896 60%, #b3a582 100%);
  border: 1px solid rgba(61, 50, 32, 0.5);
  border-radius: 2px;
  padding: 0.6rem 0.5rem 0.5rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
  transition: transform 0.18s ease, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}

/* Mappfliken */
.season-btn::before {
  content: '';
  position: absolute;
  top: -7px; left: 6px;
  width: 42%; height: 7px;
  background: #c4b896;
  border: 1px solid rgba(61, 50, 32, 0.5);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.season-btn:hover {
  transform: translateY(-4px);
  color: var(--blood);
  border-color: rgba(110, 15, 15, 0.6);
}

.season-btn--active {
  color: var(--blood);
  border-color: var(--blood-bright);
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.7), 0 0 18px rgba(160, 24, 24, 0.3);
}

.season-btn--active::before {
  background: #d8cfbd;
}

/* ── Årets Slaktare — mästarkortet i Arkivet ── */
.champion-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
  padding: 1.1rem 1.4rem;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0px, transparent 34px,
      rgba(0,0,0,0.28) 34px, rgba(0,0,0,0.28) 36px),
    linear-gradient(100deg, #3a1512 0%, #4a1a14 40%, #2a0f0c 100%);
  border: 6px solid var(--pine-deep);
  outline: 1px solid rgba(160, 24, 24, 0.55);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.85),
    inset 0 0 60px rgba(0,0,0,0.55);
  transform: rotate(-0.4deg);
}

.champion-card__photo {
  width: clamp(84px, 18vw, 120px);
  height: clamp(84px, 18vw, 120px);
  object-fit: cover;
  border: 6px solid #d8cfbd;
  box-shadow: 0 10px 25px rgba(0,0,0,0.7);
  transform: rotate(-2deg);
  filter: sepia(0.28) contrast(1.06) brightness(0.92);
}

.champion-card__title {
  font-family: var(--font-horror);
  font-weight: 400;
  font-size: clamp(1rem, 4.2vw, 1.6rem);
  color: var(--blood-bright);
  letter-spacing: 0.05em;
  text-shadow: 0 0 14px rgba(110, 15, 15, 0.8), 0 3px 10px rgba(0,0,0,0.9);
  margin-bottom: 0.15rem;
}

.champion-card__name {
  font-family: var(--font-camp);
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  color: var(--bone);
  letter-spacing: 0.03em;
}

.champion-card__stats {
  font-family: var(--font-vcr);
  font-size: clamp(0.68rem, 2.1vw, 0.82rem);
  color: var(--brass);
  margin-top: 0.35rem;
}

.champion-card__runner {
  font-family: var(--font-type);
  font-size: clamp(0.62rem, 1.9vw, 0.75rem);
  color: var(--bone-dim);
  margin-top: 0.4rem;
}

/* ══════════════════════════════════════════════
   MATCHLOGG — skrivmaskinsrapporter
   ══════════════════════════════════════════════ */

#match-log-card {
  background:
    linear-gradient(172deg, #241f16 0%, #1a1610 100%);
}

.match-log {
  padding: 0.6rem 1.2rem 1.2rem;
  max-height: 480px;
  overflow-y: auto;
}

.match-item {
  display: flex;
  gap: 1rem;
  padding: 0.85rem 0.4rem;
  border-bottom: 1px dashed rgba(216, 207, 189, 0.12);
  font-family: var(--font-type);
}

.match-item__nr {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-vcr);
  font-size: 0.85rem;
  color: var(--blood-bright);
  border: 1px solid rgba(160, 24, 24, 0.4);
  border-radius: 50%;
}

.match-item__body { flex: 1; min-width: 0; }

.match-item__teams {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.8rem;
  line-height: 1.5;
}

.match-item__label {
  flex-shrink: 0;
  font-family: var(--font-vcr);
  font-size: 0.65rem;
  width: 1.1rem;
  text-align: center;
}

.match-item__label--win  { color: var(--color-win); }
.match-item__label--mid  { color: var(--color-mid); }
.match-item__label--loss { color: var(--color-loss); }

.match-item__players { color: var(--bone); }

.match-item__score {
  font-family: var(--font-vcr);
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.match-item__score strong { color: var(--fluoro); font-size: 0.8rem; }
.match-item__format { color: var(--brass); }

/* ══════════════════════════════════════════════
   SLAKTBÄNKEN — jämförelse
   ══════════════════════════════════════════════ */

.compare-picker-wrap {
  padding: 1.2rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.15);
}

.compare-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem 0.35rem 0.35rem;
  background: #0d0b09;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.compare-badge:hover { transform: translateY(-2px); border-color: rgba(166,138,91,0.5); }

.compare-badge.active {
  border-color: var(--blood-bright);
  background: rgba(110, 15, 15, 0.35);
  box-shadow: 0 0 14px rgba(160, 24, 24, 0.25);
}

.compare-badge-img {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  filter: sepia(0.3) brightness(0.9);
}

.compare-badge-name {
  font-family: var(--font-vcr);
  font-size: 0.68rem;
  color: var(--bone);
  letter-spacing: 0.06em;
}

#compare-chart { padding: 1rem 1.5rem; }

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   RESPONSIVT (mobil-first-justeringar)
   ══════════════════════════════════════════════ */

@media (max-width: 720px) {
  .view { inset: 2.5vh 2.5vw; }

  /* iPhone-kraschfix (2026-07-23, "Toistuva ongelma" i Safari): landningens
     avkodade bildminne var ~48 MB på mobilen. Här laddas de lätta varianterna
     (GymHall-m 1376px, skölden 1024px via srcset, rekvisita 512px) → ~12 MB. */
  #gympasal-rum {
    background:
      linear-gradient(rgba(10, 9, 8, 0.25), rgba(10, 9, 8, 0.55)),
      url('photos/vhs/GymHall-m.webp') center 35% / cover no-repeat,
      var(--tape-black);
  }

  /* Skölden dominerar även mobilen — men drop-shadow-rasteriseringen varje
     pendelframe är dyr på iOS, så mobilen får bara färgmättnaden.
     2026-07-23 (kväll): lyft 40%→31% + krympt 80vw→72vw efter att skölden på
     fruans iPhone låg ÖVER masken/sågen/pokalen (se överlappet nedan). */
  .crest-wrap { top: 31%; }
  .crest {
    width: min(72vw, 340px);
    filter: saturate(0.92);
    will-change: transform; /* pendeln komponeras om utan omrastering */
  }

  /* Lappen kvar nere till vänster på mobil (uppe skulle den krocka med skölden);
     smalare så att den inte når regelboks-kortets etikett */
  .slakt-note { top: auto; bottom: clamp(10px, 2.5vh, 24px); transform: rotate(1.8deg); max-width: 58vw; }

  /* Markörerna UTSPRIDDA så inget ligger under skölden eller på varandra
     (användarrapport 2026-07-23 kväll: "det ligger saker ovanpå varandra").
     Skölden spänner nu ~5–57% av höjden → sidomarkörerna vid 44–47% ligger
     BREDVID sköldens insvängda hörn, resten trappar neråt under den. */
  #ev-2 { top: 47%; left: 3%;  --obj: 64px; }  /* masken — bredvid skölden, vänster */
  #ev-3 { top: 45%; right: 2%; --obj: 72px; }  /* sågen — bredvid skölden, höger */
  #ev-1 { top: 61%; left: 47%; --obj: 76px; }  /* pokalen — under skölden, mitten */
  #ev-4 { top: 66%; left: 13%; --obj: 92px; }  /* fallakterna — vänster under */
  #ev-5 { top: 79%; right: 5%; --obj: 68px; }  /* regelboken — längst ner till höger */

  .player-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }

  .player-detail__header-wrap { flex-direction: column; align-items: center; text-align: center; }

  /* Mobil: karaktärstext och graf staplas i stället för sida vid sida */
  .player-detail__main { grid-template-columns: 1fr; gap: 1.1rem; }

  .table th, .table td { padding: 0.55rem 0.6rem; font-size: 0.8rem; }

  /* Ljudknappen närmare hörnet så den inte ligger på regelboks-kortet */
  .audio-toggle { top: auto; bottom: 12px; right: 10px; }
}

@media (max-width: 400px) {
  .evidence__tag { font-size: 0.55rem; letter-spacing: 0.14em; }
}

/* ══════════════════════════════════════════════
   OBDUKTIONEN — flikar, rekord-referat, lagbygge
   ══════════════════════════════════════════════ */

.obd-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }

.obd-tab {
  font-family: var(--font-type);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  background: linear-gradient(160deg, #221d16, #14100c);
  border: 1px solid rgba(166, 138, 91, 0.3);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.obd-tab:hover { color: var(--bone); border-color: var(--brass); }
.obd-tab.active {
  color: var(--fluoro);
  border-color: var(--fluoro);
  box-shadow: 0 0 12px rgba(207, 216, 194, 0.15), inset 0 0 8px rgba(207, 216, 194, 0.06);
}

.obd-panel { animation: obd-in 0.3s ease-out; }
@keyframes obd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.obd-hint {
  font-family: var(--font-type);
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.8rem;
  letter-spacing: 0.04em;
}

/* Fakta-rad ovanför säsongstabellen — det som stack ut den säsongen */
.season-fact {
  font-family: var(--font-type);
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin: 0.2rem 0 1rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--blood-dim, #6b0f0f);
}
.season-fact:empty { display: none; }

/* Rekordkort — håll över / tryck för matchreferatet */
.record-card { position: relative; cursor: help; }

.record-pop {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translate(-50%, -4px);
  width: min(340px, 80vw);
  max-height: min(65vh, 560px);
  overflow-y: auto;
  scrollbar-width: thin;
  z-index: 40;
  background: #14110d;
  border: 1px solid rgba(166, 138, 91, 0.4);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.85);
  padding: 0.8rem 0.9rem;
  font-family: var(--font-type);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--text-main);
  text-align: left;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.record-pop strong { color: var(--fluoro); display: block; margin-bottom: 0.3rem; letter-spacing: 0.08em; }
.record-pop b { color: var(--fluoro); font-weight: normal; letter-spacing: 0.05em; }
.record-pop .rp-score { font-family: var(--font-camp); color: var(--blood-bright); font-size: 1.15rem; }
.record-pop .rp-note { color: var(--text-muted); display: block; margin-top: 0.4rem; font-style: italic; }
.record-pop .rp-quote { color: var(--text-muted); font-style: italic; }

@media (hover: hover) {
  .record-card:hover .record-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}
.record-card.open .record-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Sista kortet till höger: låt popovern hålla sig innanför modalens kant */
.record-card:last-child .record-pop {
  left: auto;
  right: 0;
  transform: translate(0, -4px);
}
@media (hover: hover) {
  .record-card:last-child:hover .record-pop { transform: translate(0, 0); }
}
.record-card:last-child.open .record-pop { transform: translate(0, 0); }

/* Mobil: korten ligger två och två — den centrerade popovern (340 px) sticker
   utanför skärmkanten. Förankra vänsterkolumnens popovers vid kortets vänsterkant
   och högerkolumnens vid kortets högerkant så håller sig allt innanför.
   (Kort 5 är udda = vänsterkolumn — udda-regeln vinner över :last-child-undantaget
   ovan eftersom denna media-fråga ligger senare i filen.) */
@media (max-width: 720px) {
  .record-pop { width: min(340px, calc(100vw - 32px)); }
  .record-card:nth-child(odd) .record-pop,
  .record-card:nth-child(odd):hover .record-pop,
  .record-card:nth-child(odd).open .record-pop { left: 0; right: auto; transform: none; }
  .record-card:nth-child(even) .record-pop,
  .record-card:nth-child(even):hover .record-pop,
  .record-card:nth-child(even).open .record-pop { left: auto; right: 0; transform: none; }
}

/* Lagbygget */
#team-result { margin-top: 1rem; }

.team-verdict {
  border: 1px dashed rgba(166, 138, 91, 0.45);
  padding: 1rem 1.2rem;
  font-family: var(--font-type);
  text-align: center;
}
.team-verdict .tv-names { font-size: 0.9rem; color: var(--bone); letter-spacing: 0.05em; }
.team-verdict .tv-line { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-main); }
.team-verdict .tv-rank { margin-top: 0.6rem; font-family: var(--font-camp); font-size: 1.7rem; color: var(--blood-bright); }
.team-verdict .tv-sub { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Legend för flerserjegrafen (kärngängets närvaro) */
.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  justify-content: center;
  margin-top: 0.5rem;
  font-family: var(--font-type);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.trend-legend .tl-item i {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: -0.05rem;
}

/* Mobil: topp-klustret är redan kompakt (chippet är en lampa tills det expanderar) */
@media (max-width: 720px) {
  .modal-topbar { gap: 0.45rem; }
  .obd-tab { font-size: 0.62rem; padding: 0.42rem 0.6rem; }
}

/* ══════════════════════════════════════════════
   REGELBOKEN — upphittad vit pärm + PDF-läsaren
   ══════════════════════════════════════════════ */

/* Pärmen i salen: SVG på svart botten — screen-blenden (från .evidence__obj)
   släcker det svarta och låter den vita pärmens kanter glöda svagt */
#ev-5 .evidence__obj--binder { filter: brightness(1.05); }
#ev-5:hover .evidence__obj--binder, #ev-5:active .evidence__obj--binder { filter: brightness(1.5); }

.rules-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 720px;
}
.rule-book {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(180deg, rgba(28, 22, 16, 0.92), rgba(18, 14, 10, 0.94));
  border: 1px solid rgba(160, 24, 24, 0.22);
  border-left: 3px solid rgba(160, 24, 24, 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.rule-book--latest {
  border-left-color: var(--blood-bright);
  background: linear-gradient(180deg, rgba(52, 18, 14, 0.55), rgba(24, 15, 11, 0.95));
}
.rule-book__year {
  font-family: var(--font-camp);
  font-size: 2rem;
  color: var(--bone);
  min-width: 4.2rem;
  text-align: center;
  text-shadow: 0 0 12px rgba(160, 24, 24, 0.35);
}
.rule-book--latest .rule-book__year { color: var(--blood-bright); }
/* Arkivkortet — länken till den gamla sajten (arkiv/). Dämpad brons-ton som
   skiljer historien från pärmarna utan att skrika. */
.rule-book--arkiv { border-left-color: rgba(166, 138, 91, 0.6); }
.rule-book--arkiv .rule-book__year { font-size: 1.05rem; letter-spacing: 0.14em; color: var(--fluoro); }
.rule-book__body { flex: 1; min-width: 0; }
.rule-book__title {
  font-family: var(--font-type);
  font-size: 0.95rem;
  color: var(--text-main);
  letter-spacing: 0.05em;
}
.rule-book__note {
  font-family: var(--font-type);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  letter-spacing: 0.03em;
}
.rule-book__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.btn-rule {
  font-family: var(--font-type);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  color: var(--bone);
  background: rgba(94, 13, 13, 0.35);
  border: 1px solid rgba(160, 24, 24, 0.6);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-rule:hover { background: rgba(160, 24, 24, 0.55); color: #fff; }
.btn-rule--dl { background: transparent; border-color: rgba(201, 191, 168, 0.3); color: var(--text-secondary); }
.btn-rule--dl:hover { border-color: var(--bone); color: var(--bone); background: rgba(201, 191, 168, 0.08); }

/* PDF-läsaren — ligger över akten, sajten lever kvar under */
#pdf-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(3, 2, 1, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
}
#pdf-overlay.hidden { display: none; }
.pdf-frame-wrap {
  position: relative;
  width: min(1000px, 100%);
  height: 100%;
  background: #0a0705;
  border: 1px solid rgba(160, 24, 24, 0.4);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), 0 0 24px rgba(160, 24, 24, 0.15);
}
#pdf-frame { width: 100%; height: 100%; border: none; background: #111; }
#pdf-frame.hidden { display: none; }

.pdf-close {
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  z-index: 2;
}

@media (max-width: 720px) {
  .rule-book { flex-wrap: wrap; gap: 0.7rem; }
  .rule-book__year { font-size: 1.5rem; min-width: 3.2rem; }
  .rule-book__actions { width: 100%; }
  .btn-rule { flex: 1; text-align: center; }
  #pdf-overlay { padding: 0; }
  .pdf-frame-wrap { border: none; }
  .pdf-close { top: 0.4rem; right: 0.4rem; }
}

/* ══════════════════════════════════════════════
   REDUCED MOTION — respektera användaren
   ══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}