/* ═══════════════════════════════════════════════════
   🦇 ETT SVENSKT D&D-ÄVENTYR — TERMINAL GOTHIC v3
   Castlevania × DOS × Linux terminal
   Länkas EFTER inline-stilar så att detta vinner.
   ═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&family=VT323&family=Cinzel:wght@400;700;900&family=Spectral:ital,wght@0,300;0,400;0,500;1,400&family=IBM+Plex+Mono:wght@400;500;600&family=DotGothic16&display=swap');

/* ── PALETT ── */
:root {
  --ink: #08080d;
  --stone: #0e0e14;
  --stone-2: #12121a;
  --stone-3: #181822;
  --edge: #2a2a3a;
  --edge-hi: #3a3a50;
  --bone: #b8b8c8;
  --bone-bright: #e0e0ec;
  --bone-dim: #6a6a80;
  --gold: #c9a227;
  --gold-bright: #e8c65a;
  --blood: #8b1a2a;
  --blood-bright: #d43a4d;
  --ember: #d4691e;
  --arcane: #7b4fd4;
  --poison: #5a9a4e;
  --teal: #4e8a93;
  --term-green: #33cc33;
  --term-amber: #ccaa33;
  /* Typsnitt (sätts av fonts.js, dessa är fallback/default = Pixel) */
  --font-display: 'Press Start 2P', monospace;
  --font-body: 'Silkscreen', monospace;
}

/* ── 0. GLOBAL RESET ── */
*, *::before, *::after {
  border-radius: 0 !important;
  box-sizing: border-box;
}
canvas, img { image-rendering: pixelated; }

/* ── PIXEL SPRITES (ersätter emojis) ── */
.pxs {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;   /* centrera mot textens x-höjd — ingen uppåt-offset */
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  flex-shrink: 0;
}

/* ── Flex-bärare: sprite + text centrerade med gap ──
   (endan element som redan är inline/flex — rör inte block/tabell-layouter) */
.top-btn, .send-btn, .rune-btn, .go-btn, .summon-btn, .gate-btn,
.msg .who, .dice-label, .die-btn, .at-item, .att-item, .fi-name,
.roll-request .rr-label, .oracle-head h3, .rr-btn, #loc-name,
.model-label, .att-dropzone .att-text, .toast {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

/* ── Sprite-storlek per kontext (konsekvent skala) ── */
/* Knappar + labels: 0.9em */
.top-btn .pxs, .send-btn .pxs, .rune-btn .pxs, .go-btn .pxs,
.summon-btn .pxs, .gate-btn .pxs, .at-item .pxs, .att-item .pxs,
.fi-name .pxs, .toast .pxs, .rr-btn .pxs, .roll-request .rr-label .pxs,
.oracle-head h3 .pxs, .dice-label .pxs, .die-btn .pxs,
.att-dropzone .att-text .pxs, .model-label .pxs {
  width: 0.9em; height: 0.9em;
}

/* Chattens avsändar-rader: sprite i textstorlek */
.msg .who .pxs { width: 1em; height: 1em; }

/* NPC-listan (redan flex): sprite i textstorlek */
.npc-row .pxs { width: 0.95em; height: 0.95em; }

/* Sidebar-plats: block-flex så texten radbryts inuti och ikonen centreras mot hela blocket */
#loc-name { display: flex; align-items: center; gap: 0.4em; }
#loc-name .pxs { width: 0.95em; height: 0.95em; }

/* Brand/loggor: 1em */
.brand .pxs { width: 1em; height: 1em; }

/* Porträtt/avatarer: större, i sin ruta */
.pv-portrait .pxs, .pc-avatar .pxs, .cp-icon .pxs, .vc-icon .pxs,
.rune .pxs { width: 1.2em; height: 1.2em; }

/* Tärningsbrickan: lås + tärning samma storlek */
#tray-lock { display: inline-flex; align-items: center; }
#tray-lock .pxs { width: 1em; height: 1em; }
.die .pxs { width: 1.1em; height: 1.1em; }

/* Stora symboler: login-sigill, arketyper, vägskäl */
.sigil-icon .pxs { width: 44px; height: 44px; }
.arch .icon .pxs, .path .icon .pxs { width: 32px; height: 32px; }

/* Rubriker: sprite i rubrikstorlek */
.gate-title .pxs, .destiny-title h1 .pxs, .masthead h1 .pxs,
.head h1 .pxs, .hall-title .pxs, .char-name .pxs { width: 1em; height: 1em; }

/* ── 1. TYPOGRAFI — variabel-driven (fonts.js byter tema) ── */
body, input, textarea, select, button, a, span, div, p, h1, h2, h3, h4, li, label {
  font-family: var(--font-body) !important;
  letter-spacing: 0.02em !important;
}
h1, .gate-title, .destiny-title h1, .masthead h1, .head h1,
.forge-head .brand, .topbar .brand, .char-name, .pv-name, .d-name,
.cp-name, .hall-title {
  font-family: var(--font-display) !important;
  line-height: 1.6 !important;
  text-shadow: 2px 2px 0 #000 !important;
  animation: none !important;
}
/* Brödtext i chatten — läsbar body-font */
.msg .text, .pv-story, .pv-gear, .oracle-msg.a {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: .82rem !important;
  line-height: 1.8 !important;
}
/* Terminal/VT323 & DotGothic är små i px — skala upp brödtexten lite */
.font-terminal .msg .text, .font-terminal .pv-story, .font-terminal .pv-gear,
.font-dot .msg .text, .font-dot .pv-story, .font-dot .pv-gear {
  font-size: 1rem !important;
}
/* Gothic: brödtext i Spectral, lite större och elegantare */
.font-gothic .msg .text, .font-gothic .pv-story, .font-gothic .pv-gear {
  font-size: .95rem !important;
  line-height: 1.7 !important;
}
/* Input — monospace, inte kursiv */
input, textarea, select {
  font-style: normal !important;
}
input::placeholder, textarea::placeholder {
  font-style: normal !important;
  color: var(--bone-dim) !important;
  opacity: .7;
}

/* ── 2. BAKGRUND — platt, ingen gradient-glans ── */
body {
  background: var(--ink) !important;
}
/* Ta bort alla radial-gradient bakgrunder */
body[style], .app, .gate, .layout {
  background-image: none !important;
}

/* ── 3. SCANLINES + CRT ── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.18) 0px,
    rgba(0,0,0,.18) 1px,
    transparent 1px,
    transparent 3px
  );
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 998; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%);
}

/* ── 4. PANELER — terminal-fönster ── */
.panel, .panel-box, .scroll-box, .gate-frame, .hoard, .modal-box,
.continue-panel, .path, .arch, .oracle, .roll-request {
  background: var(--stone) !important;
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
  position: relative;
}
/* Dubbelram via ::before — terminal-style */
.panel::before, .panel-box::before, .scroll-box::before,
.gate-frame::before, .modal-box::before, .continue-panel::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--edge);
  pointer-events: none;
  z-index: 1;
  opacity: .5;
}
/* Hörn-markörer (DOS box-drawing feel) */
.corner { display: none !important; }

/* ── 5. KNAPPAR — DOS-style, platta ── */
button, .go-btn, .summon-btn, .pv-go, .gate-btn, .rr-btn,
.modal-btn, .rune-btn, .send-btn, .top-btn, .back, .blank-btn,
.pv-reroll, .danger-btn, .buy-btn, .mini-btn, .coin-btn, .fchip {
  background: var(--stone-3) !important;
  border: 1px solid var(--edge) !important;
  color: var(--bone) !important;
  box-shadow: none !important;
  transition: none !important;
  text-shadow: none !important;
  filter: none !important;
  position: relative;
}
button::after, .go-btn::after, .summon-btn::after, .pv-go::after,
.gate-btn::after { display: none !important; }

button:hover, .go-btn:hover, .summon-btn:hover, .pv-go:hover,
.gate-btn:hover, .rr-btn:hover, .top-btn:hover, .send-btn:hover,
.rune-btn:hover, .danger-btn:hover, .back:hover, .pv-reroll:hover {
  background: var(--edge) !important;
  border-color: var(--gold) !important;
  color: var(--gold-bright) !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}
button:active, .go-btn:active, .gate-btn:active, .send-btn:active {
  background: var(--gold) !important;
  color: var(--ink) !important;
}
/* Primär-knappar (guld) */
.go-btn, .summon-btn, .pv-go, .gate-btn, .send-btn {
  background: var(--gold) !important;
  border-color: var(--gold-bright) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
.go-btn:hover, .summon-btn:hover, .pv-go:hover, .gate-btn:hover, .send-btn:hover {
  background: var(--gold-bright) !important;
  color: var(--ink) !important;
}
/* Farliga knappar */
.danger-btn, .top-btn.danger {
  border-color: var(--blood) !important;
  color: var(--blood-bright) !important;
}
.danger-btn:hover, .top-btn.danger:hover {
  background: var(--blood) !important;
  color: #fff !important;
}

/* ── 6. CHATT — terminal-log ── */
.msg { border: none !important; box-shadow: none !important; padding: .4rem 0 !important; }
.msg.dm {
  border-left: 2px solid var(--gold) !important;
  padding-left: .8rem !important;
  background: transparent !important;
}
.msg.npc {
  border-left: 2px solid var(--arcane) !important;
  padding-left: .8rem !important;
  background: transparent !important;
}
.msg.player {
  text-align: right !important;
}
.msg.player .text {
  display: inline-block;
  text-align: left;
  background: var(--stone-2) !important;
  border: 1px solid var(--edge) !important;
  padding: .5rem .8rem !important;
  box-shadow: none !important;
}
.msg.system .box {
  background: transparent !important;
  border: 1px dashed var(--edge) !important;
  box-shadow: none !important;
  color: var(--bone-dim) !important;
}
.msg.dm .who, .msg.player .who {
  font-size: .6rem !important;
  text-transform: uppercase !important;
  letter-spacing: .15em !important;
  color: var(--bone-dim) !important;
}
.msg.dm .who { color: var(--gold) !important; }
.msg.dm .text em, .msg.npc .text em {
  font-style: normal !important;
  color: var(--bone-dim) !important;
}

/* ── 7. INPUTFÄLT — terminal prompt ── */
.input-row textarea, #prompt, .world-prompt,
.add-form input, .add-form select, .oracle-input input, .field input {
  background: var(--ink) !important;
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
  color: var(--term-green) !important;
  caret-color: var(--term-green);
}
.input-row textarea:focus, #prompt:focus, .world-prompt:focus, .field input:focus {
  border-color: var(--term-green) !important;
  box-shadow: 0 0 0 1px rgba(51,204,51,.2) !important;
}
/* Prompt-prefix känsla */
.input-row { position: relative; }
.input-row::before {
  content: '>';
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--term-green);
  font-size: .8rem;
  z-index: 2;
  pointer-events: none;
}
.input-row textarea { padding-left: 1.8rem !important; }

/* ── 8. SIDEBAR — terminal panel ── */
.sidebar {
  background: var(--stone) !important;
  border-right: 1px solid var(--edge) !important;
}
.side-label {
  color: var(--term-green) !important;
  font-size: .55rem !important;
  text-transform: uppercase !important;
  letter-spacing: .2em !important;
}
.side-label::before { content: '┌─ '; color: var(--edge); }
.side-label::after { content: ' ─┐'; color: var(--edge); }
.pc-card {
  background: var(--stone-2) !important;
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
}
.pc-card:hover { border-color: var(--gold) !important; transform: none !important; }
.pc-name {
  font-family: 'Press Start 2P', monospace !important;
  font-size: .6rem !important;
  color: var(--bone-bright) !important;
}
.pc-sub { font-style: normal !important; color: var(--bone-dim) !important; font-size: .6rem !important; }
.pc-hp {
  height: 6px !important;
  background: var(--ink) !important;
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
}
.pc-hp i {
  background: var(--blood-bright) !important;
  background-image: none !important;
}
/* NPC-rader */
.npc-row { transition: none !important; }
.npc-row:hover { background: var(--stone-2) !important; }
.npc-row.dead { opacity: .4; text-decoration: line-through; }
.npc-dot { border-radius: 0 !important; box-shadow: none !important; width: 6px !important; height: 6px !important; }
.npc-name { font-size: .68rem !important; white-space: nowrap !important; }
.npc-role { font-size: .55rem !important; font-style: normal !important; color: var(--bone-dim) !important; }
/* Plats */
#loc-name { font-size: .68rem !important; color: var(--term-amber) !important; }
#loc-sub { font-size: .58rem !important; font-style: normal !important; color: var(--bone-dim) !important; }

/* ── 9. TOPBAR — terminal header ── */
.topbar {
  background: var(--stone) !important;
  border-bottom: 1px solid var(--edge) !important;
  box-shadow: none !important;
}
.topbar .brand {
  font-size: .65rem !important;
  color: var(--gold) !important;
  text-shadow: none !important;
}
.topbar .campaign { color: var(--bone-dim) !important; font-style: normal !important; }
.model-select {
  background: var(--stone-2) !important;
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
}
.model-select select { color: var(--bone-bright) !important; }

/* ── 10. TÄRNINGAR ── */
.dice-tray {
  border-top: 1px solid var(--edge) !important;
  background: var(--stone) !important;
}
.die-btn {
  clip-path: none !important;
  background: var(--stone-2) !important;
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
  transition: none !important;
}
.die-btn:hover {
  border-color: var(--gold) !important;
  transform: none !important;
  box-shadow: none !important;
}
.die-btn .d-num { font-family: 'Press Start 2P', monospace !important; font-size: .55rem !important; }
.die {
  clip-path: none !important;
  border: 1px solid var(--gold) !important;
  box-shadow: none !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: .7rem !important;
  animation-timing-function: steps(2) !important;
}

/* ── 11. BARER — segmenterade ── */
.bar, .trough, .trust-bar, .ex-bar {
  border: 1px solid var(--edge) !important;
  background: var(--ink) !important;
  box-shadow: none !important;
}
.fill, .bar-fill, .trust-fill, .ex-fill {
  box-shadow: none !important;
  background-image: none !important;
}
.fill.hp, .bar-hp .bar-fill { background-color: var(--blood-bright) !important; }
.fill.xp, .bar-xp .bar-fill { background-color: var(--gold) !important; }

/* ── 12. FLIKAR / TABS ── */
.tab {
  border: 1px solid var(--edge) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: none !important;
  background: var(--stone) !important;
}
.tab.active {
  border-color: var(--gold) !important;
  background: var(--stone-2) !important;
  box-shadow: none !important;
}
.tab.active::before { content: '> '; color: var(--gold); }

/* ── 13. TOAST ── */
.toast {
  background: var(--stone) !important;
  border: 1px solid var(--gold) !important;
  box-shadow: none !important;
  color: var(--gold-bright) !important;
}

/* ── 14. SCROLLBARS ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--edge); border: 1px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--edge-hi); }
::selection { background: rgba(51,204,51,.3); color: #fff; }

/* ── 15. LOGIN ── */
.gate-frame { background: var(--stone) !important; }
.gate-title { font-size: .9rem !important; color: var(--bone-bright) !important; }
.gate-sub, .gate-footer { font-style: normal !important; color: var(--bone-dim) !important; }
.gate-frame.shake { animation: shake-px .3s steps(3) !important; }
@keyframes shake-px {
  0%,100% { transform: translateX(0); }
  33% { transform: translateX(-5px); }
  66% { transform: translateX(5px); }
}
.gate-frame.success { border-color: var(--term-green) !important; }
.sigil { border: 1px solid var(--gold) !important; background: var(--stone-2) !important; box-shadow: none !important; }
.sigil-ring, .sigil-ring.inner { display: none !important; }

/* ── 16. VÄGSKÄLET / ARKETYPER ── */
.path, .arch {
  background: var(--stone) !important;
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
  transition: none !important;
}
.path:hover, .arch:hover {
  border-color: var(--gold) !important;
  transform: none !important;
  box-shadow: none !important;
}
.path .glow, .arch .glow { display: none !important; }
.path::before, .arch::before { display: none !important; }
.arch.selected { border-color: var(--gold) !important; background: var(--stone-2) !important; }
.path h2, .arch h3 { color: var(--bone-bright) !important; }
.path p, .arch .lore { font-style: normal !important; color: var(--bone-dim) !important; }
.path .tag, .arch .tag { border-color: var(--edge) !important; color: var(--bone-dim) !important; }

/* ── 17. FÖRHANDSVISNING ── */
.pv-portrait, .pc-avatar, .cp-icon, .vc-icon {
  border-radius: 0 !important;
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
  background: var(--stone-2) !important;
}
.pv-stat, .ability {
  clip-path: none !important;
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
  background: var(--stone-2) !important;
}
.pv-stat .s, .ability .score { font-family: 'Press Start 2P', monospace !important; font-size: .9rem !important; }
.pv-trait { border: 1px solid var(--edge) !important; box-shadow: none !important; background: var(--stone-2) !important; }
.pv-story { border-left: 2px solid var(--gold) !important; font-style: normal !important; }

/* ── 18. ORACLE ── */
.oracle {
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
  background: var(--stone) !important;
}
.oracle-msg { border-radius: 0 !important; }
.oracle-msg.q { border: 1px solid var(--arcane) !important; box-shadow: none !important; }
.oracle-msg.a { border: 1px solid var(--edge) !important; box-shadow: none !important; }

/* ── 19. ASCII-ART ── */
.ascii-art {
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
  background: var(--ink) !important;
}
.ascii-art pre {
  font-family: 'Courier New', monospace !important;
  color: var(--term-green) !important;
  line-height: 1.2 !important;
  font-size: .7rem !important;
}
.art-label { color: var(--bone-dim) !important; }

/* ── 20. ROLL REQUEST ── */
.roll-request {
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
  background: var(--stone) !important;
}
.rr-btn { border-color: var(--gold) !important; color: var(--gold) !important; }

/* ── 21. DM-TANKAR ── */
.w-text, #thought-text {
  font-style: normal !important;
  color: var(--term-green) !important;
}
#dm-status.show .w-text, #dm-status.show #thought-text {
  animation: blink-cursor 1.2s steps(1) infinite;
}
@keyframes blink-cursor { 0%,49% { opacity: 1; } 50%,100% { opacity: .3; } }

/* ── 22. FOG / VIGNETTE / EMBERS ── */
.fog { display: none !important; }
.vignette { box-shadow: inset 0 0 120px 40px rgba(0,0,0,.7) !important; }
#embers { opacity: .4; }

/* ── 23. DROPZONE / FILER ── */
.dropzone {
  border: 1px dashed var(--edge) !important;
  box-shadow: none !important;
  transition: none !important;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--term-green) !important; }
.file-item { background: var(--stone-2) !important; border: 1px solid var(--edge) !important; }

/* ── 24. QUEST / NOTES ── */
.quest { border: 1px solid var(--edge) !important; box-shadow: none !important; }
.quest:hover { border-color: var(--ember) !important; }
.notes-list li::before { content: '> ' !important; color: var(--term-green); }

/* ── 25. VALVET ── */
.vault-chip {
  background: var(--stone-2) !important;
  border: 1px solid var(--edge) !important;
  box-shadow: none !important;
}
.vault-chip:hover { border-color: var(--gold) !important; transform: none !important; }

/* ── 26. RUBRIK-SKALA ── */
.gate-title { font-size: .85rem !important; }
.destiny-title h1 { font-size: 1.1rem !important; }
.masthead h1, .head h1 { font-size: .9rem !important; }
.topbar .brand, .forge-head .brand { font-size: .6rem !important; }
.char-name, .pv-name, .d-name { font-size: .9rem !important; }
.hall-title { font-size: .7rem !important; }
.cp-name { font-size: .9rem !important; }

/* ── 27. BLINKING CURSOR (terminal feel) ── */
.input-row textarea::after {
  content: '█';
  animation: blink-cursor 1s steps(1) infinite;
  color: var(--term-green);
}

/* ── 28. RESPONSIVT ── */
@media (max-width: 560px) {
  .gate-title { font-size: .7rem !important; }
  .destiny-title h1 { font-size: .85rem !important; }
  .head h1 { font-size: .7rem !important; }
  .msg .text { font-size: .72rem !important; }
}