@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&display=swap');

:root {
  color-scheme: dark;
  --bg-void: #07050f;
  --bg-deep: #110d1f;
  --bg-panel: #1b1533;
  --bg-panel-alt: #251d45;
  --bg-panel-dark: #0e0b1a;

  --border-outer: #090612;
  --border-mid: #6f639e;
  --border-light: #dfd9f5;
  --border-gold: #f5c542;
  --border-gold-bright: #fff3b0;

  --accent-gold: #f5c542;
  --accent-cyan: #52e3e8;
  --accent-hp: #e84855;
  --accent-hp-hi: #ff7b86;
  --accent-mp: #3b8eea;
  --accent-mp-hi: #7ec0ff;
  --accent-green: #5ad67d;
  --accent-poison: #95e649;

  --text-main: #f4f1fc;
  --text-muted: #b3aad1;
  --text-dim: #7e73a3;

  --font-pixel: 'Press Start 2P', 'Courier New', monospace;
  --font-ui: 'Silkscreen', 'Courier New', monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-void);
  color: var(--text-main);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: none;
}

canvas.pixelated,
.pixelated canvas,
.dungeon-canvas-wrap canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ============================================================================
   16-BIT SNES PIXEL BEVEL PANELS (kein backdrop-filter über WebGL!)
   ============================================================================ */
.snes-panel {
  background: linear-gradient(180deg, #241b47 0%, #15102b 100%);
  border: 3px solid var(--border-light);
  box-shadow:
    inset 0 0 0 3px var(--border-mid),
    0 0 0 3px var(--border-outer),
    6px 6px 0 0 rgba(0, 0, 0, 0.72);
  padding: 14px;
  position: relative;
}

.snes-panel-gold {
  border-color: var(--border-gold-bright);
  box-shadow:
    inset 0 0 0 3px #b5841b,
    0 0 0 3px var(--border-outer),
    0 0 18px rgba(245, 197, 66, 0.28),
    6px 6px 0 0 rgba(0, 0, 0, 0.8);
}

.snes-panel-danger {
  background: linear-gradient(180deg, #3c1328 0%, #1f0a17 100%);
  border-color: #ff9aa6;
  box-shadow:
    inset 0 0 0 3px #a8283b,
    0 0 0 3px var(--border-outer),
    6px 6px 0 0 rgba(0, 0, 0, 0.8);
}

.snes-title {
  font-family: var(--font-pixel);
  font-size: 13px;
  line-height: 1.4;
  color: var(--accent-gold);
  text-shadow: 2px 2px 0 #090612;
  margin: 0 0 10px 0;
  letter-spacing: 0.5px;
}

.snes-kicker {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================================
   16-BIT BUTTONS & INPUTS
   ============================================================================ */
.snes-btn {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  background: #2e2459;
  border: 2px solid var(--border-light);
  box-shadow:
    inset -2px -2px 0 #171130,
    inset 2px 2px 0 #564696,
    2px 2px 0 #07050f;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 80ms steps(2), background-color 80ms linear;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

.snes-btn:hover:not(:disabled) {
  background: #3d3075;
  border-color: var(--accent-gold);
  color: var(--border-gold-bright);
}

.snes-btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: inset 2px 2px 0 #140e29;
}

.snes-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.snes-btn-primary {
  background: #8f6310;
  border-color: var(--border-gold-bright);
  color: #fffbe6;
  box-shadow:
    inset -2px -2px 0 #4d3305,
    inset 2px 2px 0 #d99f26,
    2px 2px 0 #07050f;
}

.snes-btn-primary:hover:not(:disabled) {
  background: #ab7815;
  color: #ffffff;
}

.snes-btn-danger {
  background: #7a1c2d;
  border-color: #ffb3bd;
  color: #fff0f3;
  box-shadow:
    inset -2px -2px 0 #420c16,
    inset 2px 2px 0 #b8324a,
    2px 2px 0 #07050f;
}

.snes-btn-danger:hover:not(:disabled) {
  background: #9c243a;
}

.snes-btn-active {
  background: #1d5b6b;
  border-color: var(--accent-cyan);
  color: #e6feff;
}

.snes-input,
.snes-select {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-main);
  background: #0d0a1a;
  border: 2px solid var(--border-mid);
  box-shadow: inset 2px 2px 0 #05030a;
  padding: 8px 10px;
  min-height: 38px;
  outline: none;
}

.snes-input:focus,
.snes-select:focus {
  border-color: var(--accent-gold);
}

/* ============================================================================
   HP / MP PIXEL BARS
   ============================================================================ */
.vital-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.vital-track {
  height: 12px;
  background: #090713;
  border: 2px solid #594f80;
  position: relative;
  overflow: hidden;
}

.vital-fill-hp {
  height: 100%;
  background: linear-gradient(180deg, var(--accent-hp-hi) 0%, var(--accent-hp) 60%, #991f2b 100%);
  transition: width 160ms steps(8);
}

.vital-fill-mp {
  height: 100%;
  background: linear-gradient(180deg, var(--accent-mp-hi) 0%, var(--accent-mp) 60%, #1d4e8f 100%);
  transition: width 160ms steps(8);
}

.obs-vital-track {
  height: 22px;
  background: #090713;
  border: 2px solid #4d4375;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.obs-vital-track .vital-fill-hp,
.obs-vital-track .vital-fill-mp {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

/* Vertikale HP / MP Säulen in der OBS-Heldenkarte (spart horizontale Breite) */
.obs-vital-bars-vertical {
  display: flex;
  align-items: stretch;
  gap: 7px;
  padding: 10px 0 8px 0;
  flex-shrink: 0;
}

.obs-vital-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.obs-vital-track.is-vertical {
  width: 16px;
  height: auto;
  flex: 1;
  min-height: 96px;
  background: #080612;
  border: 2px solid #4b4073;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.85);
}

.obs-vital-track.is-vertical::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(7, 5, 15, 0) 0px,
    rgba(7, 5, 15, 0) 11px,
    rgba(7, 5, 15, 0.42) 11px,
    rgba(7, 5, 15, 0.42) 13px
  );
}

.obs-vital-track.is-vertical .vital-fill-hp {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--accent-hp-hi) 0%, var(--accent-hp) 55%, #8c1a26 100%);
  transition: height 180ms steps(8);
}

.obs-vital-track.is-vertical .vital-fill-mp {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--accent-mp-hi) 0%, var(--accent-mp) 55%, #19447d 100%);
  transition: height 180ms steps(8);
}

.obs-vital-col-tag {
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.4px;
}

.obs-vital-col-tag.is-hp {
  color: var(--accent-hp-hi);
}

.obs-vital-col-tag.is-mp {
  color: var(--accent-mp-hi);
}

.obs-vital-label {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.4px;
  text-shadow:
    1px 1px 0 #07050f,
    -1px -1px 0 #07050f,
    1px -1px 0 #07050f,
    -1px 1px 0 #07050f;
}

/* ============================================================================
   AUTH GATEKEEPER & SLOT-LOBBY FULLSCREEN OVERLAYS
   ============================================================================ */
.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: radial-gradient(circle at center, #1d1538 0%, #080612 85%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gate-overlay[hidden] {
  display: none !important;
}

.gate-dialog {
  width: 100%;
  max-width: 540px;
}

.slot-lobby-dialog {
  width: 100%;
  max-width: 920px;
}

.slot-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 820px) {
  .slot-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   AV-HUB PORTRAIT (.camera-box 16:9) & 3-LAYER PAPER-DOLL
   ============================================================================ */
.av-portrait-box,
.av-cam-frame {
  width: 128px;
  height: 72px;
  background: #0d0a18;
  border: 3px solid var(--border-mid);
  box-shadow: inset 0 0 0 2px #05030a;
  position: relative;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}

.av-portrait-box.is-player-self {
  width: 144px;
  height: 81px;
}

.av-portrait-box.is-obs-large {
  width: 212px;
  height: 159px;
  justify-self: start;
  border: 0;
  border-right: 2px solid #3c3266;
  box-shadow: none;
}

.av-portrait-box.is-obs-large .camera-box {
  position: absolute;
  top: 0;
  left: -35px;
  width: 282px;
  height: 159px;
}

.av-cam-frame.is-admin-preview {
  width: 192px;
  height: 108px;
}

.av-fallback-slate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  image-rendering: pixelated;
}

.av-cam-frame.has-av-streamer .av-fallback-slate {
  display: none;
}

.camera-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  opacity: 1;
  z-index: 2;
}

.av-cam-frame:not(.has-av-streamer) .camera-box {
  visibility: hidden;
}

.camera-box .avhub-cam-stage {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.camera-box .avhub-cam-canvas,
.camera-box video,
.camera-box canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* ============================================================================
   DIABLO-STIL AUSRÜSTUNG (6 SLOTS) + RUCKSACK & DRAG-AND-DROP
   ============================================================================ */
.diablo-gear-bag-layout {
  display: grid;
  grid-template-columns: minmax(275px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.diablo-doll-panel,
.diablo-bag-panel {
  background: #100c1f;
  border: 2px solid #443970;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.diablo-bag-panel.is-drag-over {
  border-color: var(--accent-gold);
}

.diablo-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  border-bottom: 1px solid #352c59;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.diablo-slots-board {
  position: relative;
  padding: 8px;
  border: 2px solid #2c244d;
  background: radial-gradient(circle at 50% 45%, #1d1638 0%, #0b0816 90%);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diablo-slots-board.is-hero-drop-ready {
  border-color: var(--accent-green);
  box-shadow: inset 0 0 18px rgba(90, 214, 125, 0.28);
}

.diablo-slots-board.is-drag-over {
  border-color: var(--accent-gold);
  box-shadow: inset 0 0 22px rgba(245, 197, 66, 0.35);
}

.diablo-silhouette-svg {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  opacity: 0.72;
  pointer-events: none;
}

.diablo-slots-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    '. head acc'
    'weapon body shield'
    '. boots .';
  gap: 8px;
}

.slot-area-head { grid-area: head; }
.slot-area-acc { grid-area: acc; }
.slot-area-weapon { grid-area: weapon; }
.slot-area-body { grid-area: body; }
.slot-area-shield { grid-area: shield; }
.slot-area-boots { grid-area: boots; }

.diablo-equip-slot {
  min-height: 82px;
  padding: 5px 4px;
  background: rgba(16, 12, 31, 0.92);
  border: 2px solid #564a85;
  box-shadow: inset 2px 2px 0 #090612;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  cursor: pointer;
  transition: border-color 80ms linear, background-color 80ms linear;
}

.diablo-equip-slot.is-empty {
  border-style: dashed;
  border-color: #3d3363;
  background: rgba(11, 8, 22, 0.78);
  cursor: default;
}

.diablo-equip-slot.is-filled:hover,
.diablo-equip-slot.is-mirrored-hover {
  border-color: var(--accent-gold);
  background: #241b4a;
}

.diablo-equip-slot.is-drag-valid {
  border-color: var(--accent-green) !important;
  box-shadow: 0 0 0 2px rgba(90, 214, 125, 0.45);
  background: rgba(20, 61, 40, 0.75) !important;
}

.diablo-equip-slot.is-drag-invalid {
  opacity: 0.42;
}

.diablo-equip-slot.is-drag-over {
  border-color: var(--accent-gold) !important;
  transform: scale(1.03);
}

.diablo-slot-label {
  font-size: 9px;
  color: var(--accent-gold);
  letter-spacing: 0.4px;
}

.diablo-slot-icon {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diablo-slot-placeholder {
  font-size: 10px;
  color: var(--text-dim);
}

.diablo-slot-stats {
  font-size: 10px;
  font-weight: bold;
  color: var(--accent-cyan);
}

.diablo-inspector-bar {
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent-cyan);
  background: #100c1f;
  border: 2px solid #3c3263;
  padding: 7px 10px;
  min-height: 34px;
}

.diablo-equip-slot.is-dragging,
.backpack-slot-tile.is-dragging {
  opacity: 0.45;
}

.backpack-slot-tile.is-drag-valid {
  border-color: var(--accent-green);
}

.backpack-slot-tile.is-drag-over {
  border-color: var(--accent-gold);
  background: #2b2157;
}

/* ============================================================================
   1920x1080 BROADCAST VIEWPORT (/obs.html)
   ============================================================================ */
.obs-viewport-root {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #05030a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.obs-stage-1080p {
  width: 1920px;
  height: 1080px;
  position: relative;
  overflow: hidden;
  background: #080612;
  flex-shrink: 0;
  transform-origin: center center;
}

/* 480x270 Three.js Canvas exakt Faktor 4 -> 1920x1080 + HD-2D Kino-Vignette (ohne backdrop-filter!) */
.obs-dungeon-bg {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  z-index: 1;
}

.obs-dungeon-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(
      ellipse 76% 70% at 50% 45%,
      rgba(0, 0, 0, 0) 42%,
      rgba(7, 5, 18, 0.46) 80%,
      rgba(3, 2, 9, 0.86) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4, 3, 12, 0.48) 0%,
      rgba(0, 0, 0, 0) 18%,
      rgba(0, 0, 0, 0) 76%,
      rgba(4, 3, 12, 0.62) 100%
    );
}

.obs-dungeon-bg canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.obs-top-hud {
  position: absolute;
  top: 20px;
  left: 24px;
  right: 24px;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.obs-top-right-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.obs-map-panel {
  padding: 6px;
  display: block;
  background: linear-gradient(180deg, rgba(24, 18, 48, 0.94) 0%, rgba(12, 9, 25, 0.96) 100%);
}

.obs-map-panel canvas {
  display: block;
  border: 0;
}

.obs-bottom-hud {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 18px;
  align-items: stretch;
}

/* Einziger sauberer Rahmen (kein Doppelrahmen im aktiven Zustand!) */
.obs-hero-card {
  width: 438px;
  min-width: 0;
  display: grid;
  grid-template-columns: 212px auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 0 14px 0 0;
  background: linear-gradient(180deg, rgba(28, 21, 54, 0.95) 0%, rgba(13, 10, 27, 0.97) 100%);
  border: 3px solid #483d73;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.78);
  position: relative;
  transition:
    transform 150ms ease-out,
    border-color 150ms ease-out,
    box-shadow 150ms ease-out;
}

.obs-hero-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 10px 0 8px 0;
}

.obs-hero-name {
  font-size: 16px;
  line-height: 1.15;
  color: var(--accent-gold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obs-hero-class {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obs-vital-numbers {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
}

.obs-vital-stat-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-main);
}

.obs-vital-stat-key {
  font-size: 10px;
  min-width: 22px;
  letter-spacing: 0.4px;
}

.obs-vital-stat-line.is-hp .obs-vital-stat-key {
  color: var(--accent-hp-hi);
}

.obs-vital-stat-line.is-mp .obs-vital-stat-key {
  color: var(--accent-mp-hi);
}

.obs-buffs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
  align-items: center;
}

.obs-buffs-row[hidden] {
  display: none;
}

.buff-badge {
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border: 2px solid #594b8a;
  background: #140f29;
  color: var(--text-muted);
  text-transform: uppercase;
}

.buff-badge.is-shield {
  border-color: var(--accent-cyan);
  color: #e3feff;
  background: #133c4a;
}

.buff-badge.is-inspired {
  border-color: var(--accent-gold);
  color: #fff8cf;
  background: #4a350d;
}

.buff-badge.is-poison {
  border-color: var(--accent-poison);
  color: #dcffba;
  background: #1f3b11;
}

.buff-badge.is-ko {
  border-color: #ff8c99;
  color: #ffd9df;
  background: #4a1220;
}

.obs-hero-card.is-active-turn {
  border-color: var(--accent-gold);
  box-shadow:
    0 0 22px rgba(245, 197, 66, 0.42),
    0 12px 28px rgba(0, 0, 0, 0.86);
  transform: translateY(-5px);
}

.obs-hero-card.is-active-turn .av-portrait-box.is-obs-large {
  border-right-color: rgba(245, 197, 66, 0.45);
}

.obs-hero-card.is-ko {
  filter: grayscale(0.85);
  opacity: 0.72;
}

.obs-mirror-anchor {
  position: absolute;
  top: 104px;
  left: 50%;
  transform: translateX(-50%);
  width: 840px;
  max-height: 740px;
  z-index: 22;
  pointer-events: none;
}

.obs-mirror-card {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.985);
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 420ms;
}

.obs-mirror-card.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.obs-combat-anchor {
  position: absolute;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  width: 1380px;
  z-index: 30;
}

/* ============================================================================
   QUIZSHOW OVERLAY & ITEM CARDS
   ============================================================================ */
.quiz-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.quiz-option-btn {
  text-align: left;
  justify-content: flex-start;
  padding: 14px 16px;
  font-size: 15px;
  min-height: 58px;
  white-space: normal;
  line-height: 1.35;
}

.quiz-option-btn.is-eliminated {
  opacity: 0.25;
  text-decoration: line-through;
}

.quiz-option-btn.is-correct-reveal {
  background: #176139 !important;
  border-color: #9ef7be !important;
  color: #ffffff !important;
}

.quiz-option-btn.is-wrong-reveal {
  background: #7a1c2d !important;
  border-color: #ffa6b2 !important;
}

.item-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.item-row-card {
  background: #140f29;
  border: 2px solid #564a85;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.item-row-card:hover,
.item-row-card.is-mirrored-hover {
  border-color: var(--accent-gold);
  background: #241b4a;
}

.item-pixel-sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  flex-shrink: 0;
}

.item-icon-frame {
  width: 34px;
  height: 34px;
  background: #0b0816;
  border: 2px solid #483d73;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.backpack-grid {
  display: grid;
  gap: 8px;
}

.backpack-grid.is-cap-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.backpack-grid.is-cap-12 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.backpack-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.backpack-slot-tile {
  position: relative;
  min-height: 84px;
  background: #140f29;
  border: 2px solid #564a85;
  box-shadow: inset 2px 2px 0 #090612;
  padding: 14px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.backpack-mini-grid .backpack-slot-tile {
  min-height: 68px;
  padding: 12px 4px 4px;
}

.backpack-slot-tile.is-empty {
  background: #0c0918;
  border-style: dashed;
  border-color: #3a315c;
  cursor: default;
}

.backpack-slot-tile:not(.is-empty):hover,
.backpack-slot-tile.is-mirrored-hover {
  border-color: var(--accent-gold);
  background: #241b4a;
}

.backpack-slot-num {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 9px;
  color: var(--text-dim);
}

.diablo-bag-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #352c59;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.bag-trash-hint {
  font-size: 11px;
  color: var(--text-muted);
  flex: 1;
  min-width: 160px;
}

.bag-trash-zone {
  min-width: 190px;
  max-width: 320px;
  padding: 6px 10px;
  background: #180c19;
  border: 2px dashed #6b354b;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 80ms linear, background-color 80ms linear;
}

.bag-trash-zone.is-drag-valid {
  border-color: #ff9aa6;
  background: #291122;
}

.bag-trash-zone.is-drag-over {
  border-color: var(--accent-gold);
  border-style: solid;
  background: #471628;
}

.bag-trash-zone.has-items {
  border-style: solid;
  border-color: #c94b63;
}

.bag-trash-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bag-trash-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bag-trash-items:empty {
  display: none;
}

.trash-rescue-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: #2b1324;
  border: 1px solid #ff8c99;
  cursor: pointer;
}

.trash-rescue-chip:hover {
  border-color: var(--accent-gold);
  background: #3b1830;
}

.trash-countdown-pill {
  font-size: 10px;
  font-weight: bold;
  color: var(--accent-gold);
  margin-left: auto;
}

.trash-rescue-btn {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  background: #175c38;
  border: 1px solid #7cf2b0;
  color: #ffffff;
  cursor: pointer;
}

.event-log-scroll {
  height: 118px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.45;
  background: #0c0918;
  border: 2px solid #483d73;
  padding: 8px 10px;
}

.event-log-line {
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.log-cat-COMBAT {
  color: #ff8c99;
}
.log-cat-LOOT {
  color: var(--accent-gold);
}
.log-cat-TURN {
  color: var(--accent-cyan);
}
.log-cat-SYSTEM {
  color: #c8bfff;
}

/* ============================================================================
   PLAYER COCKPIT (/player.html)
   ============================================================================ */
.player-shell {
  max-width: 1760px;
  margin: 0 auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100vh;
}

.player-party-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.player-hero-box {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: border-color 80ms linear, transform 80ms steps(2);
}

.player-hero-box.is-ko {
  filter: grayscale(0.8);
  opacity: 0.72;
}

.player-hero-box.is-transfer-ready {
  border-color: var(--accent-cyan) !important;
  box-shadow:
    inset 0 0 0 2px rgba(82, 227, 232, 0.45),
    0 0 0 3px #07050f,
    0 0 14px rgba(82, 227, 232, 0.25);
}

.player-hero-box.is-transfer-ready.is-drag-over {
  border-color: var(--accent-green) !important;
  background: linear-gradient(180deg, #1b4a36 0%, #11291e 100%);
  transform: scale(1.02);
}

.player-hero-box.is-transfer-full {
  border-color: #ff6b81 !important;
  opacity: 0.65;
}

.player-switch-slot-btn {
  min-height: 22px;
  padding: 2px 7px;
  font-size: 10px;
}

.player-bag-cap-hint {
  font-size: 10px;
  color: var(--text-dim);
  margin-left: auto;
}

.player-self-tag {
  font-size: 10px;
  font-weight: bold;
  padding: 1px 5px;
  background: #16495c;
  border: 1px solid var(--accent-cyan);
  color: #e6feff;
}

.player-turn-tag {
  font-size: 10px;
  font-weight: bold;
  padding: 1px 5px;
  background: #61430a;
  border: 1px solid var(--accent-gold);
  color: #fff6bd;
}

.player-stage-row {
  display: grid;
  grid-template-columns: minmax(0, 2.35fr) minmax(320px, 380px);
  gap: 14px;
  align-items: start;
}

.player-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.player-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.player-stats-panel {
  display: flex;
  flex-direction: column;
}

.player-stats-panel #plStatsSkillsHost {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.player-stats-panel #plStatsSkillsHost > div {
  flex: 1;
}

.player-viewport-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #06040d;
  border: 3px solid var(--border-light);
  box-shadow: inset 0 0 0 3px var(--border-mid), 4px 4px 0 #05030a;
  position: relative;
  overflow: hidden;
}

.player-viewport-box::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    ellipse 78% 72% at 50% 48%,
    rgba(0, 0, 0, 0) 44%,
    rgba(6, 4, 15, 0.44) 80%,
    rgba(3, 2, 9, 0.84) 100%
  );
}

.player-viewport-box canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.dpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 380px;
}

.dpad-grid-compact {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  gap: 5px;
  flex-shrink: 0;
}

.dpad-arrow-btn {
  min-height: 36px;
  padding: 4px 6px;
  font-size: 15px;
  line-height: 1;
}

/* ============================================================================
   COMBAT SCHADENS-ANIMATIONEN (ROT-BLINKEN, BLUT-PARTIKEL & MONSTER-TREFFER)
   ============================================================================ */
.av-cam-frame.is-cam-red-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: rgba(255, 30, 58, 0.58);
  box-shadow: inset 0 0 28px rgba(255, 20, 48, 0.95);
  animation: camRedFlash 580ms steps(6) forwards;
}

@keyframes camRedFlash {
  0% { opacity: 0.95; }
  30% { opacity: 0.25; }
  55% { opacity: 0.85; }
  100% { opacity: 0; }
}

.is-hero-damaged {
  border-color: #ff475e !important;
  box-shadow:
    inset 0 0 0 3px #c91832,
    0 0 18px rgba(255, 42, 75, 0.75) !important;
  animation: heroHitShake 420ms steps(4) 1;
}

.obs-hero-card.is-hero-damaged {
  box-shadow:
    0 0 24px rgba(255, 42, 75, 0.85),
    0 8px 24px rgba(0, 0, 0, 0.82) !important;
}

@keyframes heroHitShake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-5px, 2px); }
  50% { transform: translate(5px, -2px); }
  75% { transform: translate(-3px, 1px); }
  100% { transform: translate(0, 0); }
}

.obs-monster-canvas-wrap.is-monster-hit {
  animation: monsterHitShake 420ms steps(4) 1;
}

.obs-monster-canvas-wrap.is-monster-hit canvas {
  filter: brightness(2.2) saturate(1.8) hue-rotate(-20deg);
}

.is-monster-panel-hit {
  box-shadow:
    inset 0 0 0 3px #ffe45e,
    0 0 18px rgba(255, 228, 94, 0.65) !important;
}

@keyframes monsterHitShake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(7px, -3px); }
  50% { transform: translate(-7px, 3px); }
  75% { transform: translate(4px, -1px); }
  100% { transform: translate(0, 0); }
}

.blood-pixel-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  pointer-events: none;
  z-index: 25;
  box-shadow: 1px 1px 0 #090612;
  animation: pixelBloodBurst 620ms cubic-bezier(0.18, 0.85, 0.35, 1) forwards;
}

@keyframes pixelBloodBurst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  70% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 20px)), calc(-50% + var(--ty, 30px))) scale(0.5);
  }
}

.combat-dmg-float {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  text-shadow:
    2px 2px 0 #090612,
    -1px -1px 0 #090612,
    1px -1px 0 #090612,
    -1px 1px 0 #090612;
  animation: floatDamagePop 880ms steps(12) forwards;
}

.combat-dmg-float.is-player-dmg {
  color: #ff475e;
}

.combat-dmg-float.is-monster-dmg {
  color: #ffe45e;
}

@keyframes floatDamagePop {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.9);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -34px) scale(1);
  }
}

@media (max-width: 1080px) {
  .player-party-strip,
  .player-stage-row,
  .player-bottom-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .diablo-gear-bag-layout {
    grid-template-columns: 1fr;
  }
}