/**
 * OPGame Design-Tokens — "Nautical Logbook" + "Abyss"
 *
 * Zwei Themes, gemappt auf das bestehende data-theme-System:
 *   - Logbook  (warmes Pergament, Messing, Tinte)   -> data-theme="light"  (Default)
 *   - Abyss    (tiefes Nachtblau, Amber, Glas)      -> data-theme="dark"
 *
 * Diese Datei wird NACH main.css / components.css / theme.css geladen und
 * ueberschreibt die Werte der bestehenden CSS-Variablen. Dadurch koennen
 * alle vorhandenen Seiten ohne HTML-Aenderungen bereits den neuen Look
 * annehmen.
 *
 * Neue Tokens (zusaetzlich zu den gemappten alten Namen):
 *   --font-display, --font-ui, --font-mono
 *   --brass, --brass-light, --brass-deep
 *   --curse, --sea, --rule, --paper-shadow, --grain
 *   --ink, --ink-soft, --ink-muted (Alias zu text-*)
 */

/* =========================================================================
   FONTS
   ========================================================================= */

:root {
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* =========================================================================
   LOGBOOK (Default / light)
   ========================================================================= */

:root,
[data-theme="light"] {
  /* Neue Tokens */
  --bg:            #f4ede0;
  --bg-soft:       #ede4d1;
  --bg-deep:       #e4d8bf;
  --card:          #fbf6ea;
  --card-border:   rgba(92, 64, 35, 0.18);
  --rule:          rgba(92, 64, 35, 0.22);
  --ink:           #1f1a12;
  --ink-soft:      #3d3320;
  --ink-muted:     #6e5d40;
  --brass:         #b88434;
  --brass-light:   #d4a04a;
  --brass-deep:    #8a5f1f;
  --curse:         #6b4980;
  --sea:           #2a6d80;
  --grain:         rgba(92, 64, 35, 0.04);
  --paper-shadow:  0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 8px rgba(92,64,35,0.08);

  /* Alte Variablen-Namen neu belegt (rueckwaertskompatibel) */
  --bg-sand:       #ede4d1;          /* bg-soft */
  --bg-cream:      #f4ede0;          /* bg */
  --wood-brown:    #8a5f1f;          /* brass-deep */
  --wood-light:    #d4a04a;          /* brass-light */
  --ocean-blue:    #2a6d80;          /* sea */
  --ocean-dark:    #163449;          /* navy */
  --bg-warm:       #fbf6ea;          /* card */
  --card-white:    #fbf6ea;          /* card */
  --navy:          #163449;
  --gold:          #b88434;          /* brass */
  --gold-light:    #d4a04a;          /* brass-light */
  --text-primary:  #1f1a12;          /* ink */
  --text-secondary:#3d3320;          /* ink-soft */
  --text-muted:    #6e5d40;          /* ink-muted — dunkler fuer besseren Kontrast */
  --border-color:  rgba(92, 64, 35, 0.22);
  --shadow:        0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 8px rgba(92,64,35,0.08);
  --shadow-lg:     0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(92,64,35,0.18);
  --focus-ring:    3px solid rgba(184, 132, 52, 0.55);
}

/* =========================================================================
   ABYSS (dark)
   ========================================================================= */

[data-theme="dark"] {
  --bg:            #0a1420;
  --bg-soft:       #0f1a2a;
  --bg-deep:       #060c16;
  --card:          rgba(20, 34, 54, 0.72);
  --card-border:   rgba(180, 210, 240, 0.12);
  --rule:          rgba(180, 210, 240, 0.1);
  --ink:           #e8efff;
  --ink-soft:      #cbd6e8;
  --ink-muted:     #8a9ab4;
  --brass:         #e4a84a;
  --brass-light:   #f4c778;
  --brass-deep:    #b88434;
  --curse:         #a080d0;
  --sea:           #4aa8c4;
  --grain:         rgba(180, 210, 240, 0.02);
  --paper-shadow:  0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 32px rgba(0,0,0,0.4);

  --bg-sand:       #0f1a2a;
  --bg-cream:      #0a1420;
  --wood-brown:    #b88434;
  --wood-light:    #f4c778;
  --ocean-blue:    #4aa8c4;
  --ocean-dark:    #0a1420;
  --bg-warm:       #0a1420;
  --bg-dark:       #060c16;
  --card-white:    #14223666;
  --navy:          #e4a84a;
  --gold:          #e4a84a;
  --gold-light:    #f4c778;
  --text-primary:  #e8efff;
  --text-secondary:#cbd6e8;
  --text-muted:    #8a9ab4;
  --border-color:  rgba(180, 210, 240, 0.12);
  --shadow:        0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg:     0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 48px rgba(0,0,0,0.55);
  --focus-ring:    3px solid rgba(228, 168, 74, 0.65);

  --success:       #4ade80;
  --danger:        #e06a56;
  --warning:       #fb923c;
}

/* System-Dark-Mode respektieren (wenn kein data-theme gesetzt wurde) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0a1420;
    --bg-soft:       #0f1a2a;
    --bg-deep:       #060c16;
    --card:          rgba(20, 34, 54, 0.72);
    --card-border:   rgba(180, 210, 240, 0.12);
    --rule:          rgba(180, 210, 240, 0.1);
    --ink:           #e8efff;
    --ink-soft:      #b6c4dc;
    --ink-muted:     #6a7c96;
    --brass:         #e4a84a;
    --brass-light:   #f4c778;
    --brass-deep:    #b88434;
    --curse:         #a080d0;
    --sea:           #4aa8c4;
    --grain:         rgba(180, 210, 240, 0.02);
    --paper-shadow:  0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 32px rgba(0,0,0,0.4);

    --bg-sand:       #0f1a2a;
    --bg-cream:      #0a1420;
    --wood-brown:    #b88434;
    --wood-light:    #f4c778;
    --ocean-blue:    #4aa8c4;
    --ocean-dark:    #0a1420;
    --bg-warm:       #0a1420;
    --bg-dark:       #060c16;
    --card-white:    #14223666;
    --navy:          #e4a84a;
    --gold:          #e4a84a;
    --gold-light:    #f4c778;
    --text-primary:  #e8efff;
    --text-secondary:#b6c4dc;
    --text-muted:    #6a7c96;
    --border-color:  rgba(180, 210, 240, 0.12);
    --shadow:        0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 32px rgba(0,0,0,0.4);
    --shadow-lg:     0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 48px rgba(0,0,0,0.55);
    --focus-ring:    3px solid rgba(228, 168, 74, 0.65);
  }
}

/* =========================================================================
   BODY / BASE — neue Basis-Typo + Paper-Grain Background
   ========================================================================= */

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  /* Subtle paper grain */
  background-image:
    radial-gradient(circle at 15% 20%, var(--grain) 0, transparent 40%),
    radial-gradient(circle at 85% 75%, var(--grain) 0, transparent 40%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
}

/* Display-Schrift fuer Hero-Titel / Banner */
.font-display,
.display-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.font-mono,
.mono,
.amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   PAPER-CARD — neue Basisoptik fuer Karten (optional, per Klasse)
   ========================================================================= */

.paper-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--paper-shadow);
  padding: 1.25rem;
}

.paper-card--flat {
  box-shadow: none;
}

/* Brass-Button (Primary-Action im neuen Design) */
.btn-brass {
  background: linear-gradient(180deg, var(--brass-light), var(--brass));
  color: #1f1a12;
  border: 1px solid var(--brass-deep);
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 2px 6px rgba(138, 95, 31, 0.35);
}
.btn-brass:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--brass), var(--brass-deep));
  color: #fff;
}

/* Ruler / Trennlinie im Logbook-Stil */
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 1rem 0;
}

/* =========================================================================
   ANIMATIONS (Keyframes aus dem Design-Prototyp)
   ========================================================================= */

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 132, 52, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(184, 132, 52, 0); }
}

@keyframes hammerBang {
  0%   { transform: rotate(-40deg) translateY(-6px); opacity: 0; }
  20%  { transform: rotate(-40deg) translateY(-6px); opacity: 1; }
  55%  { transform: rotate(8deg)  translateY(2px); }
  70%  { transform: rotate(-4deg) translateY(0); }
  100% { transform: rotate(0)     translateY(0); opacity: 0.9; }
}

@keyframes coinFall {
  0%   { transform: translateY(-8px) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(60px) rotate(240deg); opacity: 0; }
}

@keyframes waveShift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes countdownPulse {
  0%, 100% { transform: scale(1);    color: inherit; }
  50%      { transform: scale(1.08); color: var(--danger, #9c3b2e); }
}

@keyframes koStamp {
  0%   { transform: scale(3) rotate(-24deg); opacity: 0; }
  35%  { transform: scale(1) rotate(-10deg); opacity: 1; }
  100% { transform: scale(1) rotate(-10deg); opacity: 1; }
}

@keyframes parallaxDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-120px); }
}

@keyframes confettiFall {
  0%   { transform: translateY(-40px) rotate(0); opacity: 1; }
  100% { transform: translateY(320px) rotate(520deg); opacity: 0; }
}

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

@keyframes badgePop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Utility-Klassen fuer die neuen Keyframes (optional einsetzbar) */
.anim-pulse-glow      { animation: pulseGlow 2.4s ease-in-out infinite; }
.anim-countdown-pulse { animation: countdownPulse 1s ease-in-out infinite; }
.anim-shake           { animation: shakeX 0.4s ease-in-out; }
.anim-badge-pop       { animation: badgePop 0.35s cubic-bezier(0.2, 1.2, 0.4, 1) both; }

/* =========================================================================
   GLOBAL POLISH — Toasts, Modals, Battle-Arena
   (gilt auf Landing, Lobby, GM und allen Unterseiten)
   ========================================================================= */

/* ---------- Toasts: Paper mit farbigem Linksrand ---------- */

.toast {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--brass);
  border-radius: 6px;
  box-shadow: var(--paper-shadow);
  font-family: var(--font-ui);
  font-weight: 500;
  padding: 10px 14px !important;
  font-size: 13px !important;
}

.toast.success {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-left-color: #4caf50;
}

.toast.error {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-left-color: var(--danger);
}

.toast.warning {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-left-color: var(--brass);
}

/* ---------- Modal: Paper mit Brass-Top-Streifen ---------- */

.modal-overlay {
  background: rgba(15, 26, 42, 0.55) !important;
  backdrop-filter: blur(3px);
}

.modal {
  background: var(--card) !important;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

.modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brass-deep), var(--brass), var(--brass-light), var(--brass), var(--brass-deep));
  z-index: 1;
}

.modal-header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.modal-header h2,
.modal-header h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
  margin: 0;
}

.modal-close {
  color: var(--ink-muted) !important;
  transition: color 0.15s, background 0.15s;
  border-radius: 4px;
}

.modal-close:hover {
  color: var(--danger);
  background: rgba(156, 59, 46, 0.08);
}

/* ---------- Battle-Arena-Polish (Player + GM) ---------- */

.battle-arena h2,
.battle-arena h3,
.battle-arena h4 {
  font-family: var(--font-display);
  color: #fff9ec;
}

.battle-arena .current-bid,
.battle-arena .stat-value {
  font-variant-numeric: tabular-nums;
}

/* VS-Divider fuer Battle-Arena */
.battle-vs,
.vs-divider {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--brass-light);
  letter-spacing: -1px;
}

/* ---------- Image-Filter-Bar (Stammdaten → Bilder) ---------- */

.image-filter-bar {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  background: rgba(92, 64, 35, 0.06);
  border: 1px solid var(--card-border);
  border-radius: 6px;
}

[data-theme="dark"] .image-filter-bar {
  background: rgba(180, 210, 240, 0.04);
}

.image-filter {
  padding: 6px 14px !important;
  font-family: var(--font-ui);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-soft) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  min-height: auto !important;
}

.image-filter:hover:not(.active) {
  color: var(--ink) !important;
  background: rgba(92, 64, 35, 0.05) !important;
}

.image-filter.active {
  color: #fff9ec !important;
  background: linear-gradient(180deg, var(--brass-light), var(--brass)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
}

/* ---------- Berry-Log-Tabelle ---------- */

.berry-log-list {
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--card);
}

.berry-log-table {
  font-family: var(--font-ui);
  font-size: 12px;
}

.berry-log-table thead {
  background: rgba(92, 64, 35, 0.06) !important;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule) !important;
}

[data-theme="dark"] .berry-log-table thead {
  background: rgba(180, 210, 240, 0.04) !important;
}

.berry-log-table th {
  font-family: var(--font-ui);
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-muted) !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--rule) !important;
}

.berry-log-table td {
  padding: 8px 10px !important;
  border-bottom: 1px dotted var(--rule) !important;
  color: var(--ink);
}

.berry-log-table td:nth-child(n+3),
.berry-log-table .amount,
.berry-log-table .balance {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.berry-log-table tbody tr:hover {
  background: rgba(184, 132, 52, 0.05) !important;
}

/* Berry-Summary-Cards */
.berry-summary-card {
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 4px;
  box-shadow: var(--paper-shadow);
}

.berry-summary-card.in { border-left: 3px solid #4caf50 !important; }
.berry-summary-card.out { border-left: 3px solid var(--danger) !important; }
.berry-summary-card.neutral { border-left: 3px solid var(--brass) !important; }

.berry-summary-value {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.berry-summary-label {
  color: var(--ink-muted) !important;
  font-weight: 600;
}

/* ---------- Badges im neuen Stil ---------- */

.badge {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.6px;
  font-size: 10px;
  padding: 3px 10px;
}

.badge-success {
  background: #4caf50;
  color: #fff9ec;
}

.badge-warning {
  background: rgba(184, 132, 52, 0.18);
  color: var(--brass-deep);
  border: 1px solid rgba(184, 132, 52, 0.35);
}

[data-theme="dark"] .badge-warning {
  color: var(--brass-light);
  background: rgba(228, 168, 74, 0.15);
}

.badge-danger {
  background: var(--danger);
  color: #fff9ec;
}

.badge-secondary {
  background: rgba(92, 64, 35, 0.08);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}

[data-theme="dark"] .badge-secondary {
  background: rgba(180, 210, 240, 0.06);
}

/* ---------- Schere-Stein-Papier (SSP) Modal im Logbook-Look ---------- */

.ssp-overlay {
  background: rgba(15, 26, 42, 0.55) !important;
  backdrop-filter: blur(3px);
}

.ssp-modal {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.ssp-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brass-deep), var(--brass), var(--brass-light), var(--brass), var(--brass-deep));
}

.ssp-modal h3 {
  color: var(--ink) !important;
  font-family: var(--font-display);
  font-weight: 600;
}

.ssp-modal p,
.ssp-modal .ssp-result,
.ssp-modal .ssp-status {
  color: var(--ink-soft);
}

.ssp-choice-btn {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  border: 2px solid var(--card-border) !important;
  border-radius: 8px;
}

[data-theme="dark"] .ssp-choice-btn {
  background: rgba(20, 34, 54, 0.5) !important;
}

.ssp-choice-btn:hover:not(:disabled) {
  border-color: var(--brass) !important;
  background: rgba(184, 132, 52, 0.08) !important;
}

.ssp-choice-btn.selected {
  border-color: var(--brass) !important;
  background: rgba(184, 132, 52, 0.15) !important;
  box-shadow: 0 0 12px rgba(184, 132, 52, 0.3);
}

.ssp-timer {
  color: var(--brass) !important;
  font-family: var(--font-mono);
}

/* ---------- Streaming-Modus (global, ueberschreibt altes TV-Banner) ---------- */

html[data-streaming="on"] body::before {
  content: '● STREAMING · FOG OF WAR' !important;
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  background: var(--danger);
  color: #fff9ec;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(156, 59, 46, 0.4);
  border: none;
  inset: auto;
  width: auto;
  height: auto;
}