/* ============================================================
   STAY FOREVER CHALLENGE
   ============================================================ */

@font-face {
  font-display: swap;
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/vt323-v18-latin-regular.woff2") format("woff2");
}

:root {
  --c-bg: #080c18;
  --c-panel-bg: #0c1224;
  --c-primary: #ffb000;
  --c-primary-dim: #DA7700;
  --terminal-color: var(--c-primary);
  --terminal-dim: var(--c-primary-dim);
  --c-cyan: #00BCD2;
  --c-cyan-dim: #0a6a7a;
  --c-cyan-glow: rgba(0, 216, 240, 0.15);
  --c-cyan-ghost: rgba(0, 216, 240, 0.06);
  --c-success: #23ff83;
  --c-danger: #d03451;
  --c-gray: #2a3050;
  --c-gray-light: #747890;
  --c-plastic: #141830;
  --c-greyscale: 0;
  --c-imgoverlay: 0;
  --c-border-color: #494949;
  --c-bg-light: #0b0b0b;
  --c-bg-lighter: #181818;
  --glow: 0 0 5px rgba(0, 216, 240, 0.4);
  --glow-amber: 0 0 8px rgba(240, 160, 48, 0.3);
  --scanline: rgba(0, 0, 0, 0.5);
  --font-main: "VT323", monospace;
  --boss-cell-size: 34px;
  --c-frame: rgba(0, 216, 240, 0.34);
  --c-frame-dim: rgba(0, 216, 240, 0.2);
  --c-frame-bright: rgba(118, 237, 255, 0.65);
  --c-frame-ghost: rgba(0, 216, 240, 0.08);
  --ui-text: #f4f7ff;
  --ui-text-dim: #adafc7;
  --ui-surface: #101631;
  --ui-surface-2: #0a1023;
  --ui-shadow: 0 12px 28px rgba(0, 0, 0, 0.46);
  --s-0: #040508;
  --s-1: #080808;
  --s-2: #000000;
  --s-3: #4b4b4b;
  --hairline: rgba(140, 175, 255, 0.12);
  --hairline-bright: rgba(150, 200, 255, 0.28);
  --bevel-up: inset 0 2px 0 rgb(255 255 255 / 0%), inset 0 -3px 0 rgb(44 44 44);
  --bevel-down: inset 0 2px 0 rgb(134 134 134 / 19%), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  --bevel-amber: inset 0px 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(110, 63, 1, 0.55);
  --bevel-green: inset 0px 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(1, 110, 1, 0.55);
  --bevel-amber-down: inset 0 3px 0 rgba(110, 62, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}


* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #515151 #0c0c0c;
}

body {
  font-family: var(--font-main);
  color: var(--c-primary);
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06) 1px, transparent 1px, transparent 3px );
  pointer-events: none;
  z-index: 999999;
  opacity: 1;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--c-cyan-dim);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-cyan);
}

/* =========================================
   1. MONITOR & GEHÄUSE
   ========================================= */

#right-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: auto;
  flex: 1;
  padding: 0px;
}

#monitor-casing {
  background: linear-gradient(180deg, #373739 0%, #1b1b1b 100%);
  padding: 14px 14px 8px 14px;
  border-radius: 15px;
  border: 1px solid rgb(51 53 59);
  position: relative;
  width: fit-content;
  max-width: 98vw;
  margin: 0 auto;
  z-index: 50;
  border-top: 1px solid rgb(124 124 124);
  border-bottom: 4px solid rgb(39 39 39);
  box-shadow: rgb(0, 0, 0) 0px 0px 13px inset, rgba(0, 0, 0, 0.8) 0px 21px 29px;
}

#monitor-screen {
  background-color: #000000;
  border: 2px solid #121212;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  width: 1300px;
  max-width: 100%;
  height: 85vh;
}

/* TOP BAR  */

#top_bar {
  display: flex;
  flex-wrap: wrap;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  justify-content: space-between;
  padding: 8px 14px;
  align-items: center;
  z-index: 9999;
}

#topbar_right {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 60%;
  justify-content: space-between;
}

#game-container {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  transform-origin: center center;
}

/* Untere Leiste*/

#monitor-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding: 0 10px;
}

.jigsaw-header-row {
  width: 90%;
  max-width: 400px;
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-radius: 4px;
  margin: 0 auto 10px;
}

.jigsaw-description {
  color: #fff;
  font-size: 1em;
  margin-bottom: 15px;
  text-align: center;
}

.jigsaw-description b {
  font-weight: 400;
  color: var(--c-primary);
}

/* Warnung, wenn die Aktionen fuer die offenen Teile knapp werden */
.jigsaw-count-warn {
  color: var(--c-danger);
  font-weight: 400;
}

.jigsaw-success {
  border: 2px solid #0f0;
  padding: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 900;
  font-style: italic;
  font-size: 1.1rem;
  color: #39484b;
}

.avatar-stack img {
  image-rendering: pixelated;
}

.count-badge {
  font-size: 0.8em;
  opacity: 0.7;
  margin-left: 5px;
}

.proof-info {
  font-size: 1em;
  margin-bottom: 5px;
}

.clue-slots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
  min-height: 40px;
}

.info-field {
  color: var(--c-primary);
  font-size: 1.1em;
}

.profile-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 20px;
  background: #111112;
}

#btn-start-challenge {z-index: 9;}


/* PROFILE POPUP */

 #profile-wrapper {
            width: 100%;
            padding: 20px;
            position: relative;
            min-height: 100vh;
            overflow: hidden;
            background: #101011;
        }
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
            gap: 10px;
            margin-top: 15px;
            margin-bottom: 30px;
        }

        .tc-card {
            background: #232323;
            /* border: 1px solid #555; */
            border-radius: 0px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            cursor: pointer;
            position: relative;
        }

        .tc-card:hover {
            border-color: var(--c-primary);
            z-index: 10;
        }

        .tc-img-container {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
            overflow: hidden;
        }

        .tc-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .tc-name {
            background: #222;
            color: #ccc;
            font-size: 0.8em;
            text-align: center;
            padding: 4px 2px;
            border-top: 1px solid #444;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'VT323', monospace;
            text-transform: uppercase;
        }

        .tc-card:hover .tc-name {
            background: var(--c-primary);
            color: #000;
            font-weight: bold;
        }

        /* Das eigene Karten-Popup des Profils ist entfallen - profile.php nutzt
           jetzt openCardPopup() aus data_sammelkarten.js (.card-popup-container). */
        @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.iframe-wrap {
  flex-grow: 1;
  background: var(--c-bg);
  height: 70vh;
}

.iframe-full {
  width: 100%;
  height: 100%;
  border: none;
}

.ach-notification .title {
  color: var(--c-success);
  font-size: 1.1em;
  font-weight: 400;
}

.ach-title {
  margin-bottom: 2px;
  font-size: 1em;
}

.ach-global-stat.common {
  color: #888;
}

.ach-global-stat.rare {
  color: #c0c0c0;
}

.ach-global-stat.ultra {
  color: #d4af37;
}

.align-start {
  align-items: flex-start;
}

.text-muted {
  color: #ccc;
}

.input-centered {
  margin-top: 15px;
  text-align: center;
  font-size: 1.2em;
  width: calc(100% - 6px);
  padding: 3px;
}

.input-locked {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--c-frame-dim);
  color: #888;
}

.btn-fullwidth {
  margin-top: 10px;
  width: 100% !important;
}

.text-muted-light {
  color: #888;
}

.text-line {
  line-height: 1.3;
}

.margin-top-lg {
  margin-top: 20px;
}

.box-success {
  margin-bottom: 25px;
  border: 2px solid var(--c-success);
  padding: 10px 15px;
  background: rgba(0, 50, 0, 0.3);
  border-radius: 6px;
}

.box-primary {
  color: #fff;
  border: 1px solid var(--c-border-color);
  padding: 5px 15px;
  border-radius: 0px;
  display: inline-block;
  width: auto;
  background: #0c0c0c;
}

.box-primary-inline {
  display: inline-block;
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
  padding: 5px;
  margin-top: 5px;
  border-radius: 5px;
}

.box-xp {
  display: inline-block;
  color: var(--c-gray-light);
  border: 1px solid var(--c-frame-dim);
  padding: 2px 8px;
  margin-top: 2px;
  font-size: 0.8em;
  border-radius: 4px;
}

.hero-level {
  margin: 0;
  font-size: 3em;
  color: var(--c-primary);
}

.file-box-success {
  text-align: center;
  border-color: var(--c-success);
  max-width: 450px;
  margin: 0 auto;
}

.file-header-success {
  background: var(--c-success);
  color: #000;
}

.file-body-block {
  display: block;
}

.avatar-preview {
  margin-bottom: 15px;
}

.avatar-large {
  width: 100px;
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.paragraph {
  font-size: 1.1em;
  margin-bottom: 20px;
}

.result-panel {
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.result-label {
  font-size: 0.9em;
  color: var(--c-gray-light);
}

.result-score {
  font-size: 1.8em;
  font-weight: bold;
  color: #fff;
}

.result-unit {
  font-size: 0.5em;
}

.column-gap-10 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hint-item {
  list-style: none;
  margin-top: 15px;
  display: inline-block;
  margin-right: 15px;
  width: 90%;
}

/* Frisch aufgedeckter Hinweis in der Abreise-Liste: sanft einblenden statt aufploppen */

@keyframes hintReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hint-reveal {
  animation: hintReveal 0.45s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .hint-reveal {
    animation: none;
  }
}

.hint-tile {
  position: relative;
  min-width: 50%;
  max-width: 50%;
  cursor: pointer;
  border-top: 4px solid #fff;
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
  border-bottom: 15px solid #fff;
  overflow: hidden;
  transition: transform 0.1s ease;
}

.hint-tile:hover {
  transform: scale(1.08) rotate(0deg);
  z-index: 100;
}

.hint-img {
  width: 100%;
  display: block;
}

.hint-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.extra-hint-margin {
  margin-top: 10px;
}

.text-small {
  font-size: 0.8em;
}

.margin-bottom-md {
  margin-bottom: 15px;
}

.text-center {
  text-align: center;
}

.small-note {
  font-size: 0.9em;
  color: #fff;
}

.btn-action-primary {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.border-box-success {
  border: 1px solid var(--c-success);
  color: var(--c-success);
  background: rgba(0, 240, 160, 0.05);
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 10px;
}

.monitor-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.monitor-brand {
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.1rem;
  color: #555555;
}

.monitor-brand::before {
  content: "";
  width: 24px;
  height: 22px;
  margin-right: 5px;
  background: url(img/wurschtmaster.png) no-repeat;
  display: inline-block;
  position: relative;
  top: 4px;
}

#monitor-power-btn {
  width: 28px;
  height: 28px;
  border-radius: 50% !important;
  border: none !important;
  background: radial-gradient(circle at 30% 30%, #0e0e0e, #313131) !important;
  box-shadow: 0 0 3px rgb(0 0 0 / 20%) !important;
  cursor: pointer !important;
  color: #757575 !important;
}

#monitor-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a2040;
  box-shadow: inset 1px 1px 1px #000;
  transition: all 0.2s;
}

.led-on {
  background-color: #ffb000 !important;
  box-shadow: 0 0 8px #ffb000, inset -1px -1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* =========================================
   INTERFACE
   ========================================= */

.panel-header {
  border-bottom: 1px solid rgba(0, 216, 240, 0.12);
  padding: 8px 14px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  justify-content: space-between;
  color: var(--c-cyan-dim);
  background: rgba(0, 216, 240, 0.03);
}

.header-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 15px;
  max-width: 300px;
  color: #fff;
}

#user-profile-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 20px;
}

#user-prof-header {
  height: 36px;
    width: 36px;
    border-radius: 999px;
    overflow: hidden;
}

#main-screen {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  filter: grayscale(var(--c-greyscale));
}

.board-content {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.btn-solution-action {
  border-color: var(--c-success);
  color: var(--c-success);
}

.profile-modal-maxwidth {
  max-width: 800px;
  width: 95%;
}

.profile-modal-title {
  text-align: center;
  padding: 5px;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 20px;
  font-size: 1.2em;
}

.profile-footer-row {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-end;
}

.profile-footer-row button.btn-primary {width: auto;}

.generated-avatar {
  position: relative !important;
  width: 48px !important;
  height: 60px !important;
  margin: 0 auto;
  border: none !important;
  background: var(--c-bg);
  top: -7px;
  left: -3px;
}

.chat-item .generated-avatar {left: -7px;}

.generated-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#avatar_endscreen {
  position: relative;
  width: 73px;
  height: 70px;
  margin: 0 auto;
  border: 1px solid var(--c-border-color);
  background: var(--c-bg);
  overflow: hidden;
}

#avatar_endscreen img {
  width: 90px !important;
  height: auto !important;
  top: -30px !important;
  left: -13px !important;
}

.avatar-stack {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--c-bg);
}

.avatar-stack .avatar-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.avatar-stack .layer-1 {
  z-index: 1;
}

.avatar-stack .layer-2 {
  z-index: 2;
}

.avatar-stack .layer-3 {
  z-index: 3;
}

.avatar-stack .layer-4 {
  z-index: 4;
}

.avatar-stack .layer-5 {
  z-index: 5;
}

.avatar-stack .layer-6 {
  z-index: 6;
}

.avatar-stack .layer-7 {
  z-index: 7;
}

.avatar-stack .layer-8 {
  z-index: 8;
}

.profile-level {
  font-size: 1.5em;
  color: #fff;
  margin-top: 10px;
}

.chat-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--c-bg-light);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 1.4rem;
}

.chat-item .chat-avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  transform-origin: top left;
  border: 1px solid var(--c-border-color);
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
}

.chat-item .chat-body {
  font-size: 0.95em;
  word-break: break-word;
  margin-top: 2px;
}

.chat-item .chat-name {
  color: var(--c-primary);
  text-transform: uppercase;
}

.chat-item .chat-name:hover {
  text-decoration: none;
  cursor: pointer;
  color: #fff !important;
}

.popup-notice {
  border: 1px dashed var(--c-primary);
  padding: 15px;
  text-align: center;
  margin: 0 auto;
  max-width: 400px;
}

.popup-notice-title {
  font-size: 1.2em;
  margin-bottom: 10px;
  animation: blink 1s infinite;
}

.popup-notice-subtitle {
  font-size: 0.8em;
  color: var(--c-gray-light);
}

.hs-center {
  text-align: center;
}

.hs-success {
  color: var(--c-success);
}

.hs-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.hs-link:hover {
  text-decoration: none;
  color: var(--c-primary);
}

.text-primary {
  color: var(--c-primary);
}

.hstack {
  display: flex;
}

.hstack-center {
  justify-content: center;
  align-items: center;
}

.hstack-gap-10 {
  gap: 10px;
}

.hstack-gap-15 {
  gap: 15px;
}

.vstack {
  display: flex;
  flex-direction: column;
}

.file-box-centered {
  max-width: 400px;
  text-align: center;
}

.file-right, .file-stats {
  width: 100%;
  margin-top: 10px;
}

.file-stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #ffffff;
  margin-bottom: 3px;
}

.file-stats-row span {
  color: #8f8f8f;
}

.inline-success {
  color: var(--c-success) !important;
}

.inline-danger {
  color: var(--c-danger);
}

.inline-muted {
  color: var(--c-gray-light);
}

.hs-table th, .hs-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 4px 6px;
}

.hs-table th.hs-header-left {
  text-align: left;
}

.hs-col-rank {
  width: 35px;
  text-align: center;
}

.ach-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ach-stats {
  margin-top: 8px;
  margin-bottom: 10px;
}

.lightbox-image-wrapper {
  position: relative;
  height: auto;
  max-width: 60%;
  object-fit: cover;
}

.lightbox-image-main {
  max-width: 100%;
  max-height: 80vh;
  border: 4px solid #fff;
  box-shadow: 0 0 50px #000;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 325px;
}

.lightbox-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--terminal-color);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 8px;
  font-weight: 400;
  color: #000;
  /* Klebt oben im Scroll-Container #screen-right (25px Padding). Der schwarze
     Schatten deckt das Padding darueber und seitlich ab, damit dort kein
     durchscrollender Text sichtbar ist - wie bei #text-output .board-tabs. */
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 -25px 0 25px #000;
}

.chat-messages-box {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px 0px;
  border: none !important;
  background: none !important;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 4px;
}

.chat-input-row {
  display: flex;
  gap: 10px;
}

.chat-input-row input {
  flex: 1;
  border: 1px solid var(--c-frame-dim);
  background: #0c1224;
  color: #fff;
  padding: 8px 10px;
  border-radius: 4px;
}

button.btn-action-main.chat-send-button {
  color: #000 !important;
  border-radius: 8px !important;
  margin-top: 0px;
}

/* LINKE SEITE */

#screen-left {
  width: 40%;
  display: flex;
  flex-direction: column;
  border: none;
  filter: grayscale(var(--c-greyscale));
  border-radius: 0;
  position: relative;
  height: 100%;
}

#location-name-image {
  margin: 20px 5px 0px 5px;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

#underscreen-wrap {
  display: block;
  width: 100%;
  margin: 0px;
}

#current-location {
  margin: 15px 15px;
  display: block;
  font-size: 1.2em;
  color: #c1c1c1;
}

#button-container-underscreen {
  padding: 6px 10px 10px 10px;
}

.screen-left-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#location-image-wrapper {
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  height: 100%;
}

#location-image {
  width: auto;
  display: block;
  filter: sepia(0.05) contrast(1.05) brightness(1.1);
  position: relative;
  z-index: 1;
  max-width: 95%;
  object-fit: contain;
  max-height: 500px;
  min-width: 90%;
}

#location-image.encounter-location {
  opacity: 0.2;
  filter: sepia(0.05) contrast(1.05) brightness(1.1) blur(2px);
}

#encounter-image {
  width: auto;
  display: block;
  position: absolute;
  z-index: 2;
  max-width: 95%;
  max-height: 100%;
  object-fit: contain;
}

/* RECHTE SEITE */

#screen-right {
  flex: 1;
  padding: 25px;
  background: #000000;
  overflow-y: auto;
  font-size: 1.6rem;
  line-height: 1.1em;
  color: var(--c-primary);
  border-bottom: 16px solid #000000;
  border-radius: 20px;
  margin-right: 15px;
  align-items: stretch;
}

#text-output b {
  font-weight: normal;
}

.random_event {
  padding-left: 7px;
  border-left: 3px solid var(--c-cyan-dim);
}

/* =========================================
   BUTTONS
   ========================================= */

#button-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-content: flex-start;
  width: 100%;
  padding: 15px 2% 20px 2%;
  border-radius: 0;
  background: #1f1f1f!important;
  margin: 0;
}

#button-container-main-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

button {
  font-family: var(--font-main);
  text-transform: uppercase;
  font-size: 1.2rem;
  cursor: pointer;
  background: rgba(0, 216, 240, 0.03);
  border: 1px solid var(--c-cyan-dim);
  color: var(--c-primary);
  padding: 0;
  transition: all 0.15s ease;
  position: relative;
  background-image: none;
  border-radius: 2px;
}

button:active {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#btn-menu-login::before, #btn-menu-register::before {
  background: var(--c-cyan-dim);
}

#btn-menu-login:hover::before, #btn-menu-register:hover::before {
  background: var(--c-cyan);
}

#instructions-screen button::after, #instructions-screen button::before {
  background: var(--c-cyan-dim);
}

#instructions-screen button:hover::after, #instructions-screen button:hover::before {
  background: var(--c-primary);
}

#credits-screen h2 {
  margin-top: 0px;
  font-weight: 400;
  color: #fff;
}

#credits-screen p {
  margin-top: 0;
  color: #fff;
  font-size: 1.2em;
}

#credits-list-container {
  margin-top: 8px;
}

.credits-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  text-align: left;
}

.credits-name {
  color: #fff;
}

.credits-count {
  color: var(--c-gray-light);
  white-space: nowrap;
}

.credits-empty, .credits-loading, .credits-error {
  padding: 20px;
  text-align: center;
}

.credits-empty, .credits-loading {
  color: #666;
}

.credits-error {
  color: #ff6666;
}

@media (max-width: 900px) {
  .credits-list {
    grid-template-columns: 1fr;
  }

}

.btn-action-main:hover, #dialog-buttons .btn-action-main:hover {
  background: #ffc648 !important;
  color: #000 !important;
  border: none;
}

#ta-save-name-input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  margin-bottom: 10px;
  background: #111;
  color: #0f0;
  border: 1px solid var(--c-border-color);
  font-family: var(--font-main) !important;
}

.btn-action-main.btn-travel {
  border-color: var(--c-primary) !important;
  color: #000 !important;
  margin-top: 0px;
  background: var(--c-primary) !important;
  border: 1px solid var(--c-primary) !important;
}

.btn-action-main.btn-travel:hover {
  background: #ffc040 !important;
  color: #000 !important;
  box-shadow: 0 0 25px rgba(240, 160, 48, 0.3);
}

.btn-action-main.btn-jobs, .btn-action-main.btn-player, .btn-action-main.btn-inventory-main {
  border: 1px solid #5b5b5b !important;
  margin-top: 0px;
  background: #252525 !important;
  color: #fff !important;
}

.extra-hint-text {
  margin-top: 20px;
}

.hint-mark {
  display: inline;
}

.hint-mark img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  margin-right: 4px;
  position: relative;
  top: 2px;
  border-radius: 50%;
}

.hint-mark-podcaster img {
  background: var(--c-success);
}

.hint-mark-podcaster {
  color: var(--c-success);
}

.hint-mark-game img {
  background: var(--c-primary);
}

.hint-mark-game {
  color: var(--c-primary);
}

.inv-actions {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Item-Zeilen (Händler + Inventar): einzeilig, Name + Preis antippbar,
   rechts EIN Haupt-Button. Beim Händler steht die Beschreibung in seiner
   Sprechblase, im Inventar klappt sie unter der Zeile auf (.inv-card-details). */
.inv-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inv-card-head {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.inv-row > .inv-btn {
  flex: 0 0 auto;
  padding: 5px 10px !important;
}

.inv-price {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--c-primary);
  padding: 2px 0;
  font-size: 0.9em;
  white-space: nowrap;
}

.inv-card:hover {
  border-color: #5b5b5b;
}

.inv-card.is-selected {
  border-color: var(--c-primary);
}

.inv-card-details {
  display: none;
}

.inv-card.is-selected .inv-card-details {
  display: block;
  animation: cardRise 0.2s ease-out;
}

.inv-desc {
  margin-top: 8px;
  color: #ccc;
  font-size: 0.9em;
  line-height: 1.3em;
  text-align: left;
}

.inv-card-details .inv-actions .inv-btn {
  flex: 0 0 auto;
  padding: 5px 16px !important;
}

/* Meldung ohne eigene Karte (z.B. nach dem Verkaufen) über der Liste */
.inv-info {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 12px;
  text-align: left;
  font-size: 0.9em;
  line-height: 1.3em;
}

.item-info-name {
  font-style: normal;
  color: #fff;
}

.inv-btn {
  flex: 1;
  font-size: 0.8em !important;
  padding: 5px 2px !important;
  border: 1px solid #434343 !important;
  background: #252525;
  color: #fafafa !important;
  border-radius: 8px !important;
}

.inv-btn:hover {
  border-color: #fff;
  color: #000 !important;
  background: #fff;
  box-shadow: none;
}

.inv-name {
  color: #fff;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Mobil: Preis (+ Fan-Portraits) unter den Namen, Portraits duerfen umbrechen.
   Nebeneinander blieb fuer Name + Preis + VERKAUFEN zu wenig Breite. */
@media (max-width: 800px) {
  .inv-card-head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
  }

  .inv-price {
    flex-wrap: wrap;
  }
}

.inv-empty {
  margin-top: 15px;
}

/* POPUPS */

#dialog-message {
  margin: 0px 0px 20px 0px;
  font-size: 1.2em !important;
  color: #fff !important;
}

#dialog-message img {
  display: block;
  margin: 0 auto;
}

h2#dialog-title {
  color: #fff;
  margin-top: 0;
  font-weight: 400;
}

/* Popups ohne Headline (z.B. Befragen/Bestechen) verschenken keinen Platz */
h2#dialog-title:empty {
  display: none;
}

#dialog-buttons {
  justify-content: center;
  gap: 5px;
}

/* =========================================
   CONTENT ELEMENTE
   ========================================= */

/* ACHIEVEMENTS */

.ach-container {
  margin-bottom: 20px;
}

.ach-list {
  padding-right: 0;
}

.ach-icon {
  border-radius: 20px;
  background: var(--c-primary-dim);
  width: 36px;
  text-align: center;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.ach-icon img {
  max-width: 48px;
}

.ach-content {
  padding-right: 20px;
  text-shadow: none;
}

.ach-desc {
  font-size: 0.9em !important;
}

.ach-status {
  position: absolute;
  right: 10px;
  font-size: 18px;
}

.ach-status img {
  height: 24px;
  position: relative;
  top: 5px;
}

.ach-item.unlocked {
  border-color: var(--c-cyan);
  background: var(--c-bg-light);
}

.ach-item.unlocked .ach-title {
  color: var(--c-primary);
}

.ach-item.locked {
  opacity: 0.8;
  border-style: dashed;
  filter: grayscale(100%);
}

.ach-item.locked .ach-desc {
  color: transparent !important;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  background: transparent;
  user-select: none;
  cursor: help;
  font-size: 0.9em;
}

.ach-item.locked .ach-desc::after {
  content: "[DATEN VERSCHLÜSSELT]";
  position: absolute;
  left: 52px;
  background: rgba(0, 0, 0, 0.8);
  color: var(--c-gray-light);
  font-size: 0.7em;
}

.ach-global-stat {
  font-size: 0.75em;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
}

.ach-item.locked .ach-global-stat {
  display: none;
}

@keyframes slide-in-right {
  from {
    transform: translateX(120%);
  }
  to {
    transform: translateX(0);
  }
}

.inv-container {
  border: none;
  padding: 0;
}

/* minmax(0, 1fr) statt auto: sonst wird die Spalte so breit wie die breiteste
   Karte (z.B. viele Fan-Portraits neben dem Preis) und ALLE Karten laufen rechts raus. */
.inv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}


/* =========================================
   OVERLAYS & POPUPS
   ========================================= */

.security-box, .file-box {
  background: #0a1020;
  border: 2px solid var(--c-success);
  color: var(--c-success);
  padding: 20px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 0 30px var(--c-cyan-glow), 0 20px 60px rgba(0, 0, 0, 0.7);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  animation: securitySlam 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 8px;
}

.file-box {
  border-color: var(--c-cyan-dim) !important;
  color: #fff !important;
  font-size: 1.2em;
  background: #000 !important;
}

.file-box.profile-box {
  height: 90%;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-cyan);
  clip-path: none;
  border-width: 2px;
}

.security-header {
  background: var(--c-success);
  color: #000;
  font-weight: 400;
  padding: 8px 12px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-size: 1.3em;
}

.security-question-box {
  border: 1px solid rgba(0, 216, 240, 0.2);
  padding: 15px;
  margin: 20px 0;
  background: rgba(0, 216, 240, 0.04);
  color: var(--c-success);
  font-style: italic;
}

.security-actions {
  display: grid;
  grid-template-columns: none;
  gap: 15px;
  margin-top: 20px;
}

.security-content {
  font-size: 1.2em;
  color: #fff;
}

.btn-popup {
  background: rgba(0, 216, 240, 0.05) !important;
  border: 1px solid var(--c-success) !important;
  color: var(--c-success) !important;
  padding: 10px !important;
  cursor: pointer;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1em;
}

.btn-popup:hover {
  background: var(--c-cyan) !important;
  color: #000 !important;
  border-color: var(--c-cyan-dim) !important;
  box-shadow: none;
}

.file-body {
  display: flex;
  gap: 20px;
  padding: 20px;
  align-items: flex-start;
}

.file-big-img {
  width: 120px;
  height: 150px;
  object-fit: cover;
}

.file-bio {
  padding: 0px 20px;
}

.file-bio strong, .file-bio b {
  font-weight: 400;
  text-decoration: underline;
}

em.talk {
  display: block;
  color: var(--ui-text-dim);
}

em.talk b {
  color: #fff !important;
}

em.beuster-talk {
  color: var(--c-primary);
  display: block;
}

.mp-hidden, .mp-big-msg.mp-hidden {
  display: none;
}

/* Lobby-Ansicht: links Lobbys, rechts Bestenliste */
.mp-lobby-body {
  padding: 20px;
  display: flex;
  gap: 20px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.mp-lobby-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mp-lobby-panel .home-panel-title {
  display: block;
  margin-bottom: 10px;
}

.mp-lobby-actions {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mp-lobby-actions button {
  width: 31%;
  padding: 5px 5px;
}

.mp-lobby-label {width: 100%;}

#mp-lobby-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.home-leaderboard.mp-hs-panel {
  flex: 0 0 420px;
  min-width: 0;
}

@media (max-width: 800px) {
  .mp-lobby-body {
    flex-direction: column;
    overflow-y: auto;
    padding: 10px;
  }

  .mp-lobby-panel, .home-leaderboard.mp-hs-panel {
    flex: 0 0 auto;
  }

  #mp-lobby-list, .mp-hs-panel .mp-hs-list {
    overflow: visible;
  }
}

.mp-lobby-host {
  color: #fff;
  font-size: 1.2em;
}

.btn-action-main.mp-submit-btn {
  margin-top: 0px;
}

.mp-lobby-actions button.btn-action-main, button.btn-action-main.mp-lobby-join, button.btn-action-main.mp-submit-btn, .mp-main button.btn-action-main {
  color: #000 !important;
}

#instructions-screen, #credits-screen {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  max-width: 95vw;
  background: #0b0b0b;
  border: 1px solid #272727;
  box-shadow: 0 0 40px #303030, 0 20px 60px rgba(0, 0, 0, 0.8);
  padding: 40px;
  text-align: left;
  color: var(--c-primary);
}

#instructions-screen button {
  margin: 0 auto 10px auto !important;
  display: block;
}

#credits-screen {
  z-index: 2000;
  max-height: 82vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  height: 90vh;
}

#highscore-list-container, #credits-list-container, .mp-hs-list {
  flex: 1;
  overflow-y: auto;
  margin-top: 10px;
  font-size: 1em;
}

#highscore-list-container thead, .mp-hs-list thead {
  position: relative;
  z-index: 10;
  top: -1px;
}

#highscore-list-container::-webkit-scrollbar, .mp-hs-list::-webkit-scrollbar {
  width: 4px;
}

#highscore-list-container::-webkit-scrollbar-track, .mp-hs-list::-webkit-scrollbar-track {
  background: transparent;
}

#highscore-list-container::-webkit-scrollbar-thumb, .mp-hs-list::-webkit-scrollbar-thumb {
  background: var(--c-cyan-dim);
  border-radius: 4px;
}

#credits-list-container::-webkit-scrollbar {
  width: 4px;
}

#credits-list-container::-webkit-scrollbar-track {
  background: transparent;
}

#credits-list-container::-webkit-scrollbar-thumb {
  background: var(--c-cyan-dim);
  border-radius: 4px;
}

.hs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1em;
  color: #fff;
}

.hs-table th {
  position: sticky;
  top: -1px;
  background: #777777;
  color: #000;
  padding: 8px;
  z-index: 2;
  font-weight: 400;
  text-align: center;
}

.hs-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-border-color);
}

.hs-money {
  color: #fff;
}

.hs-score {
  font-weight: 400;
  text-align: left;
}

.hs-avatar-cell {
  width: 45px;
  text-align: center;
  padding: 2px !important;
  overflow: hidden;
  height: 45px;
}

.hs-avatar-cell span {
  height: 45px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  width: 45px;
}

.hs-highlight {
  background-color: rgb(129 129 129 / 20%) !important;
}

.hs-highlight td {
  color: #fff !important;
}

.hs-table td.hs-center.hs-score {
  text-align: center;
}

#credits-back {
  width: auto !important;
  min-width: 150px;
  padding: 10px 18px !important;
  margin: 12px 0 0 auto !important;
  border-radius: 4px;
}

.menu-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  max-width: 95vw;
  background: #0a1020;
  border: 1px solid var(--c-cyan);
  box-shadow: 0 0 40px var(--c-cyan-glow), 0 20px 60px rgba(0, 0, 0, 0.8);
  padding: 40px;
  text-align: center;
  color: var(--c-primary);
}

#instructions-screen {
  z-index: 2000;
  font-size: 1.2em;
  color: #fff;
  line-height: 1.1em;
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.menu-buttons button, #instructions-screen button, #credits-screen button {
  width: 100%;
  max-width: 400px;
  padding: 15px;
  font-size: 1.4rem;
  border: none;
  background: var(--c-primary);
  color: #000;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-main);
  margin: 5px;
  box-shadow: var(--bevel-amber);
}

#instructions-screen h2 {
  margin-top: 0px;
  font-weight: 400;
  color: #fff;
}

.menu-buttons button:hover, #instructions-screen button:hover, #credits-screen button:hover {
  background: #ffc74a;
  color: #000;
  border-color: var(--c-primary);
}

.menu-buttons button.btn-abort, #instructions-screen button.btn-abort {
  border-color: #94a194 !important;
  color: #a9a9a9;
  background: #181818 !important;
}

/* Highscore Tabs */

.inv-btn-sell:hover {
  background: var(--c-success);
  color: #000;
}

.text-danger {
  color: var(--c-danger) !important;
}

.auth-form-body {
  text-align: left;
}

.auth-label {
  font-size: 0.8em;
  color: var(--c-gray-light);
}

.auth-input {
  width: 100%;
  margin-bottom: 15px;
  padding: 10px;
  background: var(--c-bg);
  color: var(--c-primary);
  border: 1px solid var(--c-frame);
  font-family: inherit;
  font-size: 1em;
  box-sizing: border-box;
}

.auth-input-sm {
  margin-bottom: 10px;
}

.auth-forgot-row {
  text-align: center;
  margin-bottom: 10px;
}

#game-dialog-overlay .btn-forgot-pw {
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  cursor: pointer;
  box-shadow: none;
  font-size: 0.9em;
}

#game-dialog-overlay .btn-forgot-pw:hover {
  text-decoration: underline;
}

.auth-hint-text {
  font-size: 0.7em;
  color: #eee;
  line-height: 1.3;
}

.auth-hint-error {
  font-size: 0.75em;
  color: var(--c-danger, #ff5555);
  margin: -10px 0 6px 0;
  line-height: 1.3;
}

.auth-btn-full {
  width: 100%;
}

#game-dialog-overlay .auth-btn-cancel, #dialog-buttons .btn-action-main.btn-abort {
  margin-top: 10px;
  width: 100%;
  font-size: 0.8em;
  border-color: #272727 !important;
  color: #ffffff !important;
  background: #4b4b4b !important;
  box-shadow: none !important;
}

#game-dialog-overlay .auth-btn-cancel:hover, #dialog-buttons .btn-action-main.btn-abort:hover {
  color: #fff !important;
  background: #181818 !important;
  border-color: #272727 !important;
  box-shadow: none !important;
}

.auth-btn-cancel {
  color: #9ca09c !important;
  background: #181818 !important;
  border-color: #272727 !important;
}

#instructions-screen button.auth-btn-cancel {
  color: #fff !important;
}

#instructions-screen button.auth-btn-cancel:hover {
  color: #000 !important;
}

.menu-buttons button.btn-abort:hover {
  background: var(--c-primary-dim) !important;
  border-color: #673b43 !important;
}

#dev-game-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgb(14, 14, 14);
  z-index: 1500;
  padding: 84px 0px 0px 0px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Scrollen statt Abschneiden, wenn der Inhalt höher als der Monitor ist */
  overflow-y: auto;
}

#dev-game-interface {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
  flex-shrink: 0;
  /* margin:auto zentriert vertikal, schneidet bei Überlänge aber nicht oben ab */
  margin: auto 0;
  padding: 25px 0 20px 0;
  box-sizing: border-box;
  user-select: none;
  /* Drag startet auf Karten/Slots (preventDefault), daher darf hier vertikal gescrollt werden */
  touch-action: pan-y;
}

.dev-slots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  width: 100%;
  max-width: 700px;
  margin-bottom: 20px;
}

.dev-slot {
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed var(--c-border-color);
  border-radius: 8px;
  min-height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 4px 10px;
  transition: all 0.2s;
  touch-action: none;
}

.dev-slot-label {
  color: var(--c-primary);
  text-align: left;
  pointer-events: none;
  font-size: 1.2em;
  text-transform: uppercase;
}

.dev-slot.drag-hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--c-primary);
}

.dev-slot.filled {
  border-style: solid;
  border-color: #ffb000;
  background: var(--c-bg-light);
  cursor: grab;
}

.dev-slot.filled:active {
  cursor: grabbing;
}

.dev-slot-content {
  width: auto;
  height: 75px;
  object-fit: cover;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.dev-slot.correct {
  border-color: var(--c-success);
  box-shadow: 0 0 15px var(--c-success);
}

.dev-slot.wrong {
  border-color: var(--c-danger);
}

.dev-slot-placeholder {
  font-size: 2em;
  opacity: 0.15;
  pointer-events: none;
}

.dev-pool-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
}

.dev-pool-card {
  width: auto;
  height: 140px;
  background: rgba(0, 216, 240, 0.03);
  border: 1px solid var(--c-border-color);
  cursor: grab;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s;
  touch-action: none;
}

.dev-pool-card:hover {
  border-color: #fff;
}

.dev-pool-card:active {
  cursor: grabbing;
  border-color: #fff;
}

.dev-pool-card.dragging-source {
  opacity: 0.3;
}

/* Spielname als Tooltip (gleicher Look wie .btn-icon-tool). Sitzt innerhalb
   der Karte, weil overflow:hidden einen Tooltip ueber der Karte abschneiden wuerde. */
.dev-pool-card[aria-label]:hover::after {
  content: attr(aria-label);
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 12px);
  box-sizing: border-box;
  background: #0a1020;
  border: 1px solid #fff;
  color: #fff;
  padding: 3px 8px;
  font-size: 0.85em;
  text-align: center;
  z-index: 999;
  pointer-events: none;
}

.dev-pool-card.dragging-source:hover::after {
  display: none;
}

.dev-pool-card img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  pointer-events: none;
}

.dev-dragging-clone {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 80px;
  height: 110px;
  opacity: 0.9;
  will-change: transform;
  border: 1px solid #fff;
  border-radius: 4px;
  background: rgba(0, 216, 240, 0.03);
}

.dev-dragging-clone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 500px) {
  .dev-slot {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 80px;
  }

  .dev-slot-label {
    margin-bottom: 0;
    text-align: left;
    font-size: 1.1em;
  }

  .dev-slot-content {
    width: 50px;
    height: 70px;
  }

}

#tl-game-interface {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow-y: auto;
  user-select: none;
  touch-action: none;
  padding-top: 10px;
}

.tl-slots-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
  margin-bottom: 40px;
}

.tl-slot {
  width: 130px;
  height: 180px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed var(--c-border-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s;
  touch-action: none;
}

.tl-card-inner {max-height: 100%;}

.tl-slot-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  color: var(--c-primary);
  font-size: 1.5em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tl-slot.filled {
  border-style: solid;
  border-color: #fff;
  background: #0a0a0a;
  cursor: grab;
}

.tl-slot-img {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  pointer-events: none;
}

.tl-year-reveal {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 5px 0;
  font-size: 1.2em;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.3s;
  z-index: 20;
}

.tl-slot.reveal .tl-year-reveal {
  transform: translateY(0);
  opacity: 1;
  font-weight: 400;
  border-radius: 0px 0px 8px 8px;
}

.tl-slot.correct {
  border-color: var(--c-success);
  box-shadow: 0 0 15px var(--c-success);
}

.tl-slot.wrong {
  border-color: var(--c-danger);
}

.tl-pool-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  width: 100%;
  padding: 10px;
}

.tl-pool-card {
  width: auto;
  height: 155px;
  background: rgba(0, 216, 240, 0.03);
  border: 1px solid var(--c-border-color);
  cursor: grab;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  touch-action: none;
}

.tl-pool-card.dragging-source {
  opacity: 0.9;
}

/* Karte liegt in einem Slot: nur ausblenden, nicht aus dem DOM nehmen
   (verhindert Flackern beim Umsortieren) */
.tl-pool-card.tl-card-used {
  display: none;
}

.tl-pool-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.dragging-clone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.perk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.perk-card {
  border: 1px solid rgba(0, 216, 240, 0.1);
  padding: 10px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}

.perk-card:hover {
  background: rgb(0 0 0 / 15%);
  border-color: #ffffff !important;
}

.perk-card.available {
  border-color: var(--c-border-color);
}

.perk-card.maxed {
  border-color: var(--c-primary);
  opacity: 0.7;
}

.perk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--c-border-color);
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.perk-name {
  color: var(--c-primary);
  font-size: 1.2em;
}

.perk-name img {
  image-rendering: pixelated;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 0px;
  position: relative;
  top: -2px;
}

.ach-notification img {
  image-rendering: pixelated;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 0px;
  position: relative;
  top: -5px;
}

.perk-desc {
  font-size: 1em;
  color: #747474;
  line-height: 1em;
  text-shadow: none;
  flex-grow: 1;
  margin-bottom: 10px;
}

.perk-stats {
  font-size: 1.1em;
  color: #fff;
  margin-bottom: 5px;
  line-height: 1em;
}

.perk-level-dots {
  color: var(--c-gray-light);
  font-size: 0.8em;
  letter-spacing: 2px;
}

.perk-level-dots span.active {
  color: var(--c-success);
}

.perk-points-row {
  margin-bottom: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.perk-points-value {
  font-size: 1.2em;
  color: var(--c-success);
  font-weight: bold;
}

.perk-resource-group {
  display: flex;
  align-items: center;
  gap: 18px;
}

.perk-reset-row {
  margin: -15px 0 25px;
  display: flex;
  justify-content: flex-end;
}

.btn-perk-reset {
  width: auto;
  margin-top: 0;
  padding: 5px 14px;
  color: #fff;
  border-color: #fff;
  border-radius: 6px;
}

.btn-perk-reset:hover {
  box-shadow: none;
  border-color: #fff;
  background: #fff;
  color: #000;
}

.perk_star {
      display: inline !important;
      width: 20px;
      height: 20px;
      margin: 0px 0px 0px -10px !important;
      position: relative;
      top: 2px;
}

.btn-buy-perk .perk_star {
  margin: 0px -4px 0px -10px !important;
    top: 4px;
}

.perk-points-value .perk_star {
      width: 26px;
    height: 26px;
    margin: 0px -8px 0px -10px !important;
    top: 5px;
}

.perk-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.btn-buy-perk {
  width: 100%;
  margin-top: 10px;
  padding: 5px;
  background: rgba(0, 216, 240, 0.03);
  border: 1px solid var(--c-success);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  border-radius: 6px !important;
}

.btn-buy-perk:disabled {
  border-color: rgba(0, 216, 240, 0.15);
  color: #c5c5c5;
  cursor: not-allowed;
}

/* --- PERKS (Spieler-Board, volle Breite) --- */
.perk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 10px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border-color);
}

.perk-toolbar .perk-points-row {
  margin: 0;
  gap: 14px;
}

.perk-grid-v2 {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 0;
}

.perk-card-v2 {
  gap: 10px;
  padding: 12px;
}

.perk-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.perk-icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border-color);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
}

.perk-icon img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  object-fit: contain;
}

.perk-card-v2:not(.owned):not(.maxed) .perk-icon img {
  filter: grayscale(0.85);
  opacity: 0.6;
}

.perk-card-v2.available .perk-icon {
  border-color: var(--c-success);
}

.perk-card-v2.maxed .perk-icon {
  border-color: var(--c-primary);
}

.perk-head-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.perk-card-v2 .perk-name {
  font-size: 1.15em;
  line-height: 1;
}

.perk-pips {
  display: flex;
  align-items: center;
  gap: 4px;
}

.perk-pip {
  width: 16px;
  height: 6px;
  border: 1px solid var(--c-gray-light);
  background: transparent;
}

.perk-pip.active {
  background: var(--c-success);
  border-color: var(--c-success);
}

.perk-card-v2.maxed .perk-pip.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.perk-pip-label {
  margin-left: 6px;
  font-size: 0.8em;
  color: var(--c-gray-light);
}

.perk-card-v2 .perk-desc {
  margin: 0;
  line-height: 1.15em;
  font-size: 0.95em;
  flex-grow: 1;
}

.perk-effects {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.perk-effect {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 8px;
  border-left: 3px solid var(--c-gray-light);
  background: rgba(255, 255, 255, 0.03);
  line-height: 1.1em;
}

.perk-effect-label {
  font-size: 0.72em;
  letter-spacing: 1px;
  color: var(--c-gray-light);
}

.perk-effect-value {
  color: #fff;
}

.perk-effect-current {
  border-left-color: var(--c-success);
}

.perk-card-v2.maxed .perk-effect-current {
  border-left-color: var(--c-primary);
}

.perk-card-v2 .btn-buy-perk {
  margin-top: 0;
}

/* Maximierte Perks nicht mehr ausgrauen, die sind ja gerade das Ziel. */
.perk-card-v2.maxed {
  opacity: 1;
}

#chat-input-field {
  flex-grow: 1;
  background: var(--c-bg);
  color: var(--c-primary);
  border: 1px solid var(--c-frame);
  padding: 8px;
  font-family: inherit;
  font-size: 1em;
  height: 46px;
  align-self: flex-end;
}

.xp-bar-bg {
  width: 100%;
  height: 8px;
  background: rgb(189 189 189 / 28%);
  border: none;
  position: relative;
  border-radius: 20px;
}

.xp-bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent );
  animation: xpShine 3s ease-in-out infinite;
}

@keyframes xpShine {
  0% {
    left: -60%;
  }
  100% {
    left: 160%;
  }
}

/* =========================================
   MINIGAMES
   ========================================= */

/* HACKING */

#hack_info_header {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  display: block;
  margin-bottom: 15px;
}

.hacking-bar {
  font-size: 1.2em !important;
}

.hacking-hint {
  font-size: 0.9em !important;
  margin-bottom: 25px !important;
}

/* Hacking-Overlay: legt sich wie Jigsaw/Memory über das Spielinterface,
   der Hacking-Screen sitzt mittig */
#hack-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 65px 15px 20px 15px;
  box-sizing: border-box;
  overflow-y: auto;
}

.hack-overlay-inner {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

#hack-overlay .hacking-bar,
#hack-overlay .hacking-hint {
  width: 100% !important;
  display: flex;
  justify-content: center;
}

.hack-inline-container {
  margin: 15px 0;
  border: 2px dashed var(--c-success);
  background-color: #001100;
  padding: 10px;
  color: var(--c-success);
  animation: hackAppear 0.5s ease-out;
  max-width: 500px;
  margin: 0 auto;
}

@keyframes hackAppear {
  from {
    opacity: 0;
    transform: scaleY(0.1);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

.hack-header {
  border-bottom: 1px solid var(--c-success);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.hack-attempts {
  font-size: 0.9em;
  padding-bottom: 6px;
}

.hack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 15px;
  margin-bottom: 10px;
}

.hack-word {
  cursor: pointer;
  text-align: center;
  letter-spacing: 2px;
  padding: 2px;
}

.hack-word:hover {
  background: var(--c-success);
  color: #000;
}

.hack-log {
  max-height: 180px;
  border-top: 1px solid #004400;
  padding-top: 5px;
  overflow-y: auto;
  font-size: 0.85em;
  color: #88ff88;
  background: rgba(0, 0, 0, 0.3);
}

/* B. BOSS KAMPF */

#boss-grid {
  display: grid;
  grid-template-columns: repeat(15, var(--boss-cell-size));
  grid-template-rows: repeat(15, var(--boss-cell-size));
  gap: 0px;
  background: rgba(0, 216, 240, 0.03);
  border: 4px solid rgba(0, 216, 240, 0.2);
  margin: 10px 0;
}

.boss-floor-var1 {
  background-image: url(img/assets/boss/generic/grass2.png);
  filter: brightness(1.1) sepia(0.1);
  z-index: 0;
}

.boss-floor-var2 {
  background-image: url(img/assets/boss/generic/grass3.png);
  filter: hue-rotate(347deg) brightness(1.1);
  z-index: 0;
}

/* --- HINDERNISSE --- */

.boss-wall {
  background-image: url(img/assets/boss/generic/wall.png);
}

/* Fallback */

.boss-tree {
  background-image: url(img/assets/boss/generic/obstacle-1.png);
}

.boss-rock {
  background-image: url(img/assets/boss/generic/obstacle-2.png);
}

.boss-bush {
  background-image: url(img/assets/boss/generic/obstacle-3.png);
}

.boss-log {
  background-image: url(img/assets/boss/generic/obstacle-4.png);
}

.boss-water {
  background-image: url(img/assets/boss/generic/water.gif);
}

.boss-ghost.enemy-1 {
  background-image: url(img/assets/boss/generic/enemy-1.png);
}

.boss-ghost.enemy-2 {
  background-image: url(img/assets/boss/generic/enemy-2.png);
}

.boss-ghost.enemy-3 {
  background-image: url(img/assets/boss/generic/enemy-3.png);
}

.boss-potion {
  background-image: url(img/assets/boss/generic/powerup.png);
  animation: floatItem 2s infinite ease-in-out;
  transform: scale(0.8);
}

.boss-entity.guybrush {
  background-image: url(img/characters/guybrush-1.png);
  background-size: contain;
}

.boss-entity.mario {
  background-image: url(img/characters/mario-1.png);
  background-size: contain;
}

.boss-entity.doomguy {
  background-image: url(img/characters/doom-1.png);
  background-size: contain;
}

.boss-entity.dukenukem {
  background-image: url(img/characters/duke-1.png);
  background-size: contain;
}

.boss-entity.samus {
  background-image: url(img/characters/samus-1.png);
  background-size: contain;
}

.boss-entity.lara {
  background-image: url(img/characters/lara-1.png);
  background-size: contain;
}

.boss-entity.larry_laffer {
  background-image: url(img/characters/larry-1.png);
  background-size: contain;
}

.boss-entity.link {
  background-image: url(img/characters/link-1.png);
  background-size: contain;
}

.boss-entity.snake {
  background-image: url(img/characters/snake-1.png);
  background-size: contain;
}

.boss-entity.gordon {
  background-image: url(img/characters/gordon-1.png);
  background-size: contain;
}

.boss-entity.cloud {
  background-image: url(img/characters/cloud-1.png);
  background-size: contain;
}

.boss-entity.geralt {
  background-image: url(img/characters/geralt-1.png);
  background-size: contain;
}

.boss-entity.george_stobbart {
  background-image: url(img/characters/george-1.png);
  background-size: contain;
}

.boss-entity.simon_sorcerer {
  background-image: url(img/characters/simon-1.png);
  background-size: contain;
}

.boss-entity.kyle_katarn {
  background-image: url(img/characters/kyle-1.png);
  background-size: contain;
}

.boss-entity.zak_mckracken {
  background-image: url(img/characters/zak-1.png);
  background-size: contain;
}

.boss-entity.ryu {
  background-image: url(img/characters/ryu-1.png);
  background-size: contain;
}

.boss-entity.max_payne {
  background-image: url(img/characters/max-1.png);
  background-size: contain;
}

.boss-entity.leon_kennedy {
  background-image: url(img/characters/leon-1.png);
  background-size: contain;
}

.boss-entity.tifa {
  background-image: url(img/characters/tifa-1.png);
  background-size: contain;
}

.boss-entity.aerith {
  background-image: url(img/characters/aerith-1.png);
  background-size: contain;
}

.boss-entity.archie {
  background-image: url(img/characters/archie-1.png);
  background-size: contain;
}

.boss-entity.arthas {
  background-image: url(img/characters/arthas-1.png);
  background-size: contain;
}

.boss-entity.blair {
  background-image: url(img/characters/blair-1.png);
  background-size: contain;
}

.boss-entity.captain_falcon {
  background-image: url(img/characters/falcon-1.png);
  background-size: contain;
}

.boss-entity.giana {
  background-image: url(img/characters/giana-1.png);
  background-size: contain;
}

.boss-entity.ivan {
  background-image: url(img/characters/ivan-1.png);
  background-size: contain;
}

.boss-entity.kane {
  background-image: url(img/characters/kane-1.png);
  background-size: contain;
}

.boss-entity.keen {
  background-image: url(img/characters/keen-1.png);
  background-size: contain;
}

.boss-entity.kerrigan {
  background-image: url(img/characters/kerrigan-1.png);
  background-size: contain;
}

.boss-entity.lula {
  background-image: url(img/characters/lula-1.png);
  background-size: contain;
}

.boss-entity.maniac {
  background-image: url(img/characters/maniac-1.png);
  background-size: contain;
}

.boss-entity.subzero {
  background-image: url(img/characters/subzero-1.png);
  background-size: contain;
}

.boss-entity.waluigi {
  background-image: url(img/characters/waluigi-1.png);
  background-size: contain;
}

.boss-entity.wario {
  background-image: url(img/characters/wario-1.png);
  background-size: contain;
}

.boss-potion.hud, .boss-powerup.hud {
  width: 50px;
  height: 50px;
  animation: none !important;
  background-size: contain;
}

.boss-player {
  z-index: 99999999999;
}

.boss-ghost {
  z-index: 8;
}

.boss-header {
  font-size: 1.4em;
  color: var(--c-primary);
}

.boss-dialogue {
  color: #fff;
  font-style: italic;
  min-height: 20px;
  font-size: 1.2em;
  text-align: center;
  max-width: 90%;
}

.gunnar.boss-enemy {
  background-image: url(img/assets/boss/sf_gunnar.png);
  z-index: 9999;
}

.chris.boss-enemy {
  background-image: url(img/assets/boss/sf_chris.png);
  z-index: 9999;
}

.fabian.boss-enemy {
  background-image: url(img/assets/boss/sf_fabian.png);
  z-index: 9999;
}

.henner.boss-enemy {
  background-image: url(img/assets/boss/sf_henner.png);
  z-index: 9999;
}

.cbeuster.boss-enemy {
  background-image: url(img/assets/boss/sf_beuster.png);
  z-index: 9999;
}

.rahel.boss-enemy {
  background-image: url(img/assets/boss/sf_rahel.png);
  z-index: 9999;
}

.heinrich.boss-enemy {
  background-image: url(img/assets/boss/sf_heinrich.png);
  z-index: 9999;
}

.mhaire.boss-enemy {
  background-image: url(img/assets/boss/sf_mhaire.png);
  z-index: 9999;
}

.cgenzel.boss-enemy {
  background-image: url(img/assets/boss/sf_genzel.png);
  z-index: 9999;
}

.christopher.boss-enemy {
  background-image: url(img/assets/boss/sf_cbaer.png);
  z-index: 9999;
}

.paul.boss-enemy {
  background-image: url(img/assets/boss/sf_paul.png);
  z-index: 9999;
}

.andre.boss-enemy {
  background-image: url(img/assets/boss/sf_andre.png);
  z-index: 9999;
}

.domschott.boss-enemy {
  background-image: url(img/assets/boss/sf_dom.png);
  z-index: 9999;
}

.boss-controls-hint {
  color: var(--c-gray);
}

.boss-dpad {
  display: none;
  grid-template-columns: repeat(3, 64px);
  grid-template-rows: repeat(2, 64px);
  gap: 10px;
  margin-top: 15px;
}

.dpad-btn {
  background: rgba(0, 216, 240, 0.03);
  border: 2px solid var(--c-success);
  color: var(--c-success);
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  touch-action: manipulation;
  user-select: none;
}

.dpad-btn:active {
  background: var(--c-success);
  color: #000;
}

.boss-potion-btn {
  display: none;
}

.dpad-up {
  grid-column: 2;
  grid-row: 1;
}

.dpad-left {
  grid-column: 1;
  grid-row: 2;
}

.dpad-down {
  grid-column: 2;
  grid-row: 2;
}

.dpad-right {
  grid-column: 3;
  grid-row: 2;
}

/* SCI FI THEME */

.theme-scifi #boss-world {
  background-image: url(img/assets/boss/scifi/grass1.png) !important;
  background-color: #000;
}

.theme-scifi .boss-floor-var1 {
  background-image: url(img/assets/boss/scifi/grass2.png);
  filter: brightness(1.1) sepia(0.1);
}

.theme-scifi .boss-floor-var2 {
  background-image: url(img/assets/boss/scifi/grass3.png);
  filter: hue-rotate(347deg) brightness(1.1);
}

.theme-scifi .boss-tree {
  background-image: url(img/assets/boss/scifi/obstacle-1.png);
}

.theme-scifi .boss-rock {
  background-image: url(img/assets/boss/scifi/obstacle-2.png);
}

.theme-scifi .boss-water {
  background-image: url(img/assets/boss/scifi/water.gif);
}

.theme-scifi .boss-bush {
  background-image: url(img/assets/boss/scifi/obstacle-3.png);
}

.theme-scifi .boss-log {
  background-image: url(img/assets/boss/scifi/obstacle-2.png);
}

.theme-scifi .boss-ghost.enemy-1 {
  background-image: url(img/assets/boss/scifi/enemy-1.png);
}

.theme-scifi .boss-ghost.enemy-2 {
  background-image: url(img/assets/boss/scifi/enemy-2.png);
}

.theme-scifi .boss-ghost.enemy-3 {
  background-image: url(img/assets/boss/scifi/enemy-3.png);
}

.theme-scifi .boss-potion {
  background-image: url(img/assets/boss/scifi/powerup.png);
}

.theme-scifi .boss-powerup {
  background-image: url(img/assets/boss/scifi/battery.png);
}

.theme-scifi .boss-player {
  z-index: 99999999999;
  position: relative;
}

.theme-scifi .boss-player:before {
  content: "";
  position: absolute;
  left: 8px;
  top: 14%;
  background: url(img/assets/boss/scifi/player_overlay.png);
  background-size: contain;
  width: 100%;
  height: 100%;
  z-index: 9;
}

.theme-scifi .boss-player img {
  left: 12.5% !important;
}

/* RPG THEME */

.theme-rpg #boss-world {
  background-image: url(img/assets/boss/rpg/grass1.png) !important;
  background-color: #000;
}

.theme-rpg .boss-floor-var1 {
  background-image: url(img/assets/boss/rpg/grass2.png);
  filter: brightness(1.1) sepia(0.1);
}

.theme-rpg .boss-floor-var2 {
  background-image: url(img/assets/boss/rpg/grass3.png);
  filter: hue-rotate(347deg) brightness(1.1);
}

.theme-rpg .boss-tree {
  background-image: url(img/assets/boss/rpg/obstacle-1.png);
}

.theme-rpg .boss-rock {
  background-image: url(img/assets/boss/rpg/obstacle-2.png);
}

.theme-rpg .boss-bush {
  background-image: url(img/assets/boss/rpg/obstacle-3.png);
}

.theme-rpg .boss-log {
  background-image: url(img/assets/boss/rpg/obstacle-4.gif);
}

.theme-rpg .boss-water {
  background-image: url(img/assets/boss/rpg/water.gif);
}

.theme-rpg .boss-ghost.enemy-1 {
  background-image: url(img/assets/boss/rpg/enemy-1.png);
}

.theme-rpg .boss-ghost.enemy-2 {
  background-image: url(img/assets/boss/rpg/enemy-2.png);
}

.theme-rpg .boss-ghost.enemy-3 {
  background-image: url(img/assets/boss/rpg/enemy-3.png);
}

.theme-rpg .boss-potion {
  background-image: url(img/assets/boss/rpg/powerup.png);
}

.theme-rpg .boss-powerup {
  background-image: url(img/assets/boss/rpg/battery.png);
}

.theme-rpg .boss-wall-block {
  background-image: url(img/assets/boss/rpg/wall.png);
}

/* HORROR THEME */

.theme-horror #boss-world {
  background-image: url(img/assets/boss/horror/grass1.png) !important;
  background-color: #000;
  filter: grayscale(0.2);
}

.theme-horror .boss-floor-var1 {
  background-image: url(img/assets/boss/horror/grass2.png);
  filter: brightness(1.1) sepia(0.1) grayscale(0.5);
}

.theme-horror .boss-floor-var2 {
  background-image: url(img/assets/boss/horror/grass3.png);
  filter: hue-rotate(347deg) brightness(1.1) grayscale(0.5);
}

.theme-horror .boss-tree {
  background-image: url(img/assets/boss/horror/obstacle-1.png);
  filter: grayscale(0.5);
}

.theme-horror .boss-rock {
  background-image: url(img/assets/boss/horror/obstacle-2.png);
  filter: grayscale(0.5);
}

.theme-horror .boss-bush {
  background-image: url(img/assets/boss/horror/obstacle-3.gif);
  filter: grayscale(0.5);
}

.theme-horror .boss-log {
  background-image: url(img/assets/boss/horror/obstacle-4.png);
  filter: grayscale(0.5);
}

.theme-horror .boss-water {
  background-image: url(img/assets/boss/horror/water.png);
  filter: grayscale(0.5);
}

.theme-horror .boss-ghost.enemy-1 {
  background-image: url(img/assets/boss/horror/enemy-1.png);
  filter: grayscale(0.5);
}

.theme-horror .boss-ghost.enemy-2 {
  background-image: url(img/assets/boss/horror/enemy-2.png);
  filter: grayscale(0.5);
}

.theme-horror .boss-ghost.enemy-3 {
  background-image: url(img/assets/boss/horror/enemy-3.png);
  filter: grayscale(0.5);
}

.theme-horror .boss-potion {
  background-image: url(img/assets/boss/horror/powerup.png);
  filter: grayscale(0.22);
}

.theme-horror .boss-powerup {
  background-image: url(img/assets/boss/horror/battery.png);
}

.theme-horror .boss-wall-block {
  background-image: url(img/assets/boss/horror/wall.png);
  filter: grayscale(0.5);
}

/* KRIMI THEME */

.theme-krimi #boss-world {
  background-image: url(img/assets/boss/krimi/grass1.png) !important;
  background-color: #000;
}

.theme-krimi .boss-player {
  filter: grayscale(1);
}

.theme-krimi .boss-floor-var1 {
  background-image: url(img/assets/boss/krimi/grass2.png);
  filter: brightness(1.1) sepia(0.1);
}

.theme-krimi .boss-floor-var2 {
  background-image: url(img/assets/boss/krimi/grass3.png);
  filter: hue-rotate(347deg) brightness(1.1);
}

.theme-krimi .boss-tree {
  background-image: url(img/assets/boss/krimi/obstacle-1.png);
}

.theme-krimi .boss-rock {
  background-image: url(img/assets/boss/krimi/obstacle-2.png);
}

.theme-krimi .boss-bush {
  background-image: url(img/assets/boss/krimi/obstacle-3.gif);
}

.theme-krimi .boss-log {
  background-image: url(img/assets/boss/krimi/obstacle-4.png);
}

.theme-krimi .boss-water {
  background-image: url(img/assets/boss/krimi/water.png);
}

.theme-krimi .boss-ghost.enemy-1 {
  background-image: url(img/assets/boss/krimi/enemy-1.png);
}

.theme-krimi .boss-ghost.enemy-2 {
  background-image: url(img/assets/boss/krimi/enemy-2.png);
}

.theme-krimi .boss-ghost.enemy-3 {
  background-image: url(img/assets/boss/krimi/enemy-3.png);
}

.theme-krimi .boss-potion {
  background-image: url(img/assets/boss/krimi/powerup.png);
}

.theme-krimi .boss-powerup {
  background-image: url(img/assets/boss/krimi/battery.png);
}

.theme-krimi .boss-wall-block {
  background-image: url(img/assets/boss/krimi/wall.png);
}

/* ADVENTURE THEME */

.theme-adventure #boss-world {
  background-image: url(img/assets/boss/adventure/grass1.png) !important;
  background-color: #000;
}

.theme-adventure .boss-floor-var1 {
  background-image: url(img/assets/boss/adventure/grass2.png);
  filter: brightness(1.1) sepia(0.1);
}

.theme-adventure .boss-floor-var2 {
  background-image: url(img/assets/boss/adventure/grass3.png);
  filter: hue-rotate(347deg) brightness(1.1);
}

.theme-adventure .boss-tree {
  background-image: url(img/assets/boss/adventure/obstacle-1.png);
}

.theme-adventure .boss-rock {
  background-image: url(img/assets/boss/adventure/obstacle-2.png);
}

.theme-adventure .boss-bush {
  background-image: url(img/assets/boss/adventure/obstacle-3.gif);
}

.theme-adventure .boss-log {
  background-image: url(img/assets/boss/adventure/obstacle-4.png);
}

.theme-adventure .boss-water {
  background-image: url(img/assets/boss/adventure/water.png);
}

.theme-adventure .boss-ghost.enemy-1 {
  background-image: url(img/assets/boss/adventure/enemy-1.png);
}

.theme-adventure .boss-ghost.enemy-2 {
  background-image: url(img/assets/boss/adventure/enemy-2.png);
}

.theme-adventure .boss-ghost.enemy-3 {
  background-image: url(img/assets/boss/adventure/enemy-3.png);
}

.theme-adventure .boss-potion {
  background-image: url(img/assets/boss/adventure/powerup.png);
}

.theme-adventure .boss-powerup {
  background-image: url(img/assets/boss/adventure/battery.png);
}

.theme-adventure .boss-wall-block {
  background-image: url(img/assets/boss/adventure/wall.png);
}

/* TEXT-ADVENTURE THEME */

.theme-textadventure #boss-world {
  background-image: url(img/assets/boss/textadventure/grass1.png) !important;
  background-color: #000;
}

.theme-textadventure .boss-floor-var1 {
  background-image: url(img/assets/boss/textadventure/grass2.png);
  filter: brightness(1.1) sepia(0.1);
}

.theme-textadventure .boss-floor-var2 {
  background-image: url(img/assets/boss/textadventure/grass3.png);
  filter: hue-rotate(347deg) brightness(1.1);
}

.theme-textadventure .boss-tree {
  background-image: url(img/assets/boss/textadventure/obstacle-1.png);
}

.theme-textadventure .boss-rock {
  background-image: url(img/assets/boss/textadventure/obstacle-2.png);
}

.theme-textadventure .boss-bush {
  background-image: url(img/assets/boss/textadventure/obstacle-3.png);
}

.theme-textadventure .boss-log {
  background-image: url(img/assets/boss/textadventure/obstacle-4.png);
}

.theme-textadventure .boss-water {
  background-image: url(img/assets/boss/textadventure/water.png);
}

.theme-textadventure .boss-ghost.enemy-1 {
  background-image: url(img/assets/boss/textadventure/enemy-1.png);
}

.theme-textadventure .boss-ghost.enemy-2 {
  background-image: url(img/assets/boss/textadventure/enemy-2.png);
}

.theme-textadventure .boss-ghost.enemy-3 {
  background-image: url(img/assets/boss/textadventure/enemy-3.png);
}

.theme-textadventure .boss-potion {
  background-image: url(img/assets/boss/textadventure/powerup.png);
}

.theme-textadventure .boss-powerup {
  background-image: url(img/assets/boss/textadventure/battery.png);
}

.theme-textadventure .boss-wall-block {
  background-image: url(img/assets/boss/textadventure/wall.png);
}

/* FPS THEME */

.theme-fps #boss-world {
  background-image: url(img/assets/boss/fps/grass1.png) !important;
  background-color: #000;
}

.theme-fps .boss-floor-var1 {
  background-image: url(img/assets/boss/fps/grass2.png);
  filter: brightness(1.1) sepia(0.1);
}

.theme-fps .boss-floor-var2 {
  background-image: url(img/assets/boss/fps/grass3.png);
  filter: hue-rotate(347deg) brightness(1.1);
}

.theme-fps .boss-tree {
  background-image: url(img/assets/boss/fps/obstacle-1.png);
}

.theme-fps .boss-rock {
  background-image: url(img/assets/boss/fps/obstacle-2.png);
}

.theme-fps .boss-bush {
  background-image: url(img/assets/boss/fps/obstacle-3.png);
}

.theme-fps .boss-log {
  background-image: url(img/assets/boss/fps/obstacle-4.png);
}

.theme-fps .boss-water {
  background-image: url(img/assets/boss/fps/water.png);
}

.theme-fps .boss-ghost.enemy-1 {
  background-image: url(img/assets/boss/fps/enemy-1.png);
}

.theme-fps .boss-ghost.enemy-2 {
  background-image: url(img/assets/boss/fps/enemy-2.png);
}

.theme-fps .boss-ghost.enemy-3 {
  background-image: url(img/assets/boss/fps/enemy-3.png);
}

.theme-fps .boss-potion {
  background-image: url(img/assets/boss/fps/powerup.png);
}

.theme-fps .boss-powerup {
  background-image: url(img/assets/boss/fps/battery.png);
}

.theme-fps .boss-wall-block {
  background-image: url(img/assets/boss/fps/wall.png);
}

/* JRPG THEME */

.theme-jrpg #boss-world {
  background-image: url(img/assets/boss/jrpg/grass1.png) !important;
  background-color: #000;
}

.theme-jrpg .boss-floor-var1 {
  background-image: url(img/assets/boss/jrpg/grass2.png);
  filter: brightness(1.1) sepia(0.1);
}

.theme-jrpg .boss-floor-var2 {
  background-image: url(img/assets/boss/jrpg/grass3.png);
  filter: hue-rotate(347deg) brightness(1.1);
}

.theme-jrpg .boss-tree {
  background-image: url(img/assets/boss/jrpg/obstacle-1.png);
}

.theme-jrpg .boss-rock {
  background-image: url(img/assets/boss/jrpg/obstacle-2.png);
}

.theme-jrpg .boss-bush {
  background-image: url(img/assets/boss/jrpg/obstacle-3.png);
}

.theme-jrpg .boss-log {
  background-image: url(img/assets/boss/jrpg/obstacle-4.png);
}

.theme-jrpg .boss-water {
  background-image: url(img/assets/boss/jrpg/water.png);
}

.theme-jrpg .boss-ghost.enemy-1 {
  background-image: url(img/assets/boss/jrpg/enemy-1.png);
}

.theme-jrpg .boss-ghost.enemy-2 {
  background-image: url(img/assets/boss/jrpg/enemy-2.png);
}

.theme-jrpg .boss-ghost.enemy-3 {
  background-image: url(img/assets/boss/jrpg/enemy-3.png);
}

.theme-jrpg .boss-potion {
  background-image: url(img/assets/boss/jrpg/powerup.png);
}

.theme-jrpg .boss-powerup {
  background-image: url(img/assets/boss/jrpg/battery.png);
}

.theme-jrpg .boss-wall-block {
  background-image: url(img/assets/boss/jrpg/wall.png);
}

/* C64 THEME */

.theme-c64 #boss-world {
  background-image: url(img/assets/boss/c64/grass1.png) !important;
  background-color: #000;
}

.theme-c64 .boss-floor-var1 {
  background-image: url(img/assets/boss/c64/grass2.png);
  filter: brightness(1.1) sepia(0.1);
}

.theme-c64 .boss-floor-var2 {
  background-image: url(img/assets/boss/c64/grass3.png);
  filter: hue-rotate(347deg) brightness(1.1);
}

.theme-c64 .boss-tree {
  background-image: url(img/assets/boss/c64/obstacle-1.png);
}

.theme-c64 .boss-rock {
  background-image: url(img/assets/boss/c64/obstacle-2.png);
}

.theme-c64 .boss-bush {
  background-image: url(img/assets/boss/c64/obstacle-3.png);
}

.theme-c64 .boss-log {
  background-image: url(img/assets/boss/c64/obstacle-4.png);
}

.theme-c64 .boss-water {
  background-image: url(img/assets/boss/c64/water.png);
}

.theme-c64 .boss-ghost.enemy-1 {
  background-image: url(img/assets/boss/c64/enemy-1.png);
}

.theme-c64 .boss-ghost.enemy-2 {
  background-image: url(img/assets/boss/c64/enemy-2.png);
}

.theme-c64 .boss-ghost.enemy-3 {
  background-image: url(img/assets/boss/c64/enemy-3.png);
}

.theme-c64 .boss-potion {
  background-image: url(img/assets/boss/c64/powerup.png);
}

.theme-c64 .boss-powerup {
  background-image: url(img/assets/boss/c64/battery.png);
}

.theme-c64 .boss-wall-block {
  background-image: url(img/assets/boss/c64/wall.png);
}

.boss-wall-block {
  background-image: url(img/assets/boss/generic/wall.png);
}

@keyframes floatItem {
  0% {
    margin-top: 0px;
    opacity: 0.8;
  }
  50% {
    margin-top: -5px;
    opacity: 1;
  }
  100% {
    margin-top: 0px;
    opacity: 0.9;
  }
}

@keyframes player-blink {
  0% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.5;
    filter: brightness(0.5) sepia(1) hue-rotate(-50deg) saturate(3);
  } /* Rötliches Dunkelwerden */
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

.boss-player-low {
  animation: player-blink 1s infinite ease-in-out;
}

.boss-player-critical {
  animation: player-blink 0.4s infinite ease-in-out;
  box-shadow: 0 0 15px red;
  border-radius: 50%;
}

/* FREQUENCY */

#freq-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  box-sizing: border-box;
  background: #000;
  border: none;
  padding: 20px;
  z-index: 2000;
  text-align: center;
  box-shadow: 0 0 50px #000;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 8px;
  padding-top: 84px;
}

.freq-screen {
  position: relative;
  width: 100%;
  height: 250px;
  background: #080c18;
  border: 1px solid rgba(0, 216, 240, 0.15);
  margin: 15px 0;
  overflow: hidden;
}

.freq-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: blur(10px) grayscale(1);
}

#game-dialog-overlay button.btn-action-main.main-secondary {
  background: #181818 !important;
  border: 1px solid var(--c-primary) !important;
  color: var(--c-primary) !important;
}

#game-dialog-overlay button.btn-action-main.main-secondary:hover {
  background: var(--c-primary) !important;
  color: #000 !important;
}

/* Slider */

input[type="range"].retro-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
}

input[type="range"].retro-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 25px;
  width: 15px;
  background: var(--c-primary);
  border: 1px solid #000;
  cursor: pointer;
  margin-top: -10px;
}

input[type="range"].retro-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: rgba(0, 216, 240, 0.08);
  border: 1px solid rgba(0, 216, 240, 0.2);
}

#player-name-input {
  background: #080c18;
  border: 2px solid var(--terminal-color);
  color: var(--terminal-color);
  font-family: "VT323", monospace;
  font-size: 1.5em;
  padding: 10px;
  width: 80%;
  margin-bottom: 20px;
  text-align: center;
  outline: none;
}

#player-name-input:focus {
  box-shadow: 0 0 15px var(--glow-color);
}

#hl-interface {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 37px;
  box-sizing: border-box;
}

.hl-header-area {
  text-align: center;
  margin-bottom: 0px;
  width: 100%;
  padding: 0px 15px;
}

.hl-board {
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  max-width: 95%;
}

.hl-header-headline {
  font-size: 1.5em;
  color: var(--c-primary);
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.hl-subhead {
  color: #fff;
  margin-bottom: 25px;
  font-size: 1em;
}

.hl-cards-row {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.hl-three-slots {
  width: 100%;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
}

.hl-center-column {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.hl-card {
  background: #000;
  border: 2px solid var(--c-border-color);
  border-radius: 4px;
  padding: 10px;
  width: 200px;
  text-align: center;
  position: relative;
  transition: transform 0.3s;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.hl-card.target {
  border-color: var(--c-primary);
}

.hl-card-center {
  min-height: 100%;
  border: none;
}

.hl-card-draggable {
  cursor: grab;
}

.hl-candidate-wrapper.dragging, .hl-candidate-wrapper.disabled {
  opacity: 0.35;
}

.hl-img-box {
  width: 100%;
  height: 130px;
  background: #000;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hl-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hl-title {
  color: #fff;
  margin-bottom: 5px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  width: 100%;
}

.hl-year {
  font-size: 1.5em;
  font-weight: 400;
  color: var(--c-primary);
  margin: 5px 0;
  text-shadow: 0 0 10px var(--glow);
  letter-spacing: 1px;
}

.hl-year.hidden {
  color: var(--c-gray-light);
  text-shadow: none;
  letter-spacing: normal;
  display: none;
}

.hl-drop-slot {
  width: 200px;
  min-height: 260px;
  border: 2px dashed rgb(233 233 233 / 25%);
  background: rgb(255 255 255 / 9%);
  border-radius: 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  justify-content: center;
}

.hl-drop-slot.drop-hover {
  border-color: var(--c-primary);
  background: rgba(0, 216, 240, 0.08);
}

.hl-slot-body {
  min-height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hl-candidate-wrapper {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hl-slot-placeholder {
  color: #858585;
  font-size: 1.2em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hl-slot-card {
  width: 100%;
}

/* Platzierte Karte füllt die komplette Slot-Kachel aus */
.hl-drop-slot.filled {
  justify-content: stretch;
  border-color: transparent;
}

.hl-drop-slot.filled .hl-slot-body {
  flex: 1;
  align-items: stretch;
}

.hl-drop-slot.filled .hl-slot-card {
  height: auto;
}

.hl-slot-card.correct {
  border-color: var(--c-success);
}

.hl-slot-card.wrong {
  border-color: var(--c-danger);
}

.hl-candidate-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hl-candidate-label {
  color: var(--c-gray-light);
  letter-spacing: 1px;
  font-size: 0.95em;
  display: none;
}

/* VS Text */

.hl-feedback-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
  font-weight: 900;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hl-feedback-overlay.correct {
  color: var(--c-success);
  border: 4px solid var(--c-success);
  text-shadow: 0 0 20px #000;
}

.hl-feedback-overlay.wrong {
  color: var(--c-danger);
  border: 4px solid var(--c-danger);
  text-shadow: 0 0 20px #000;
}

.hl-feedback-overlay span {
  display: block;
  font-size: 0.55em;
  margin-top: 8px;
}

.hl-streak-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}

.hl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 216, 240, 0.06);
  border: 1px solid rgb(255 255 255);
}

.hl-dot.won {
  background: var(--c-success);
  border-color: var(--c-success);
  box-shadow: 0 0 8px var(--c-success);
}

.hl-dot.lost {
  background: var(--c-danger);
  border-color: var(--c-danger);
  box-shadow: 0 0 8px var(--c-danger);
}

.hl-dot.active {
  background: var(--c-success);
  border-color: var(--c-success);
  box-shadow: 0 0 8px var(--c-success);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.anim-slide {
  animation: slideIn 0.3s ease-out;
}

@keyframes popIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* =========================================
   TEXT ADVENTURE
   ========================================= */

#verb-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 20000;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
}

.verb-popup-content {
  background: var(--c-bg-light);
  border: 2px solid var(--c-border-color);
  padding: 20px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.verb-popup-header {
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-size: 1.6rem;
  color: #fff;
  font-weight: 400;
}

.verb-list-container {
  overflow-y: auto;
  flex-grow: 1;
  margin-bottom: 20px;
  padding-right: 10px;
}

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

.verb-item {
  background: var(--c-bg-lighter);
  border: 1px solid var( --c-border-color);
  padding: 8px;
  text-align: center;
  font-size: 0.9em;
  color: #7d7d7d;
  cursor: default;
  transition: all 0.2s;
}

.verb-item:hover {
  border-color: var(--terminal-color);
  color: var(--terminal-color);
  background: rgba(0, 216, 240, 0.06);
}

.verb-list-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.verb-list-container::-webkit-scrollbar-track {
  background: rgba(0, 216, 240, 0.03);
}

.verb-list-container::-webkit-scrollbar-thumb {
  background: rgba(0, 216, 240, 0.1);
  border-radius: 4px;
}

.verb-close-btn {
  background: var(--c-primary);
  color: #000 !important;
  border: none;
  padding: 10px;
  font-family: "VT323", monospace;
  font-size: 1.2rem;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 400;
  margin-top: auto;
}

.verb-close-btn:hover {
  background: #ff7777;
}

.ta-input-line {
  display: flex;
  align-items: center;
  margin-top: 10px;
  border-top: 1px dashed rgba(0, 216, 240, 0.12);
  padding-top: 10px;
  background: rgba(0, 20, 0, 0.5);
}

#ta-input-ghost {
  position: absolute;
  left: 2px;
  top: 0px;
  width: 100%;
  height: 100%;
  color: var(--c-gray-light);
  pointer-events: none;
  z-index: 1;
  font-size: 1.4rem;
  white-space: pre;
  overflow: hidden;
  display: flex;
  align-items: center;
}

#ta-input {
  background: transparent;
  border: none;
  color: var(--terminal-color);
  font-family: "VT323", monospace;
  font-size: 1.4rem;
  flex-grow: 1;
  outline: none;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  width: 100%;
}

#ta-input:focus {
  box-shadow: none !important;
}

.controls-locked-ta button {
  opacity: 0.2;
  pointer-events: none;
  filter: grayscale(1);
}

.ta_scenario_select {
  border: 1px solid var(--c-border-color);
  margin-bottom: 6px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
  background: rgba(255, 176, 0, 0.02);
}

.ta_scenario_select:hover {
  background: #2f2f2f;
}

.ta_scenario_select img {
  height: 20px;
  position: relative;
  top: 3px;
}

#ta-status-bar {
  position: sticky;
  top: -25px;
  width: 100%;
  background-color: var(--c-primary);
  color: #000;
  border-bottom: 2px solid #000;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-main);
  text-transform: uppercase;
  z-index: 100;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  margin-bottom: 15px;
}

#ta-location-display {
  text-align: left;
}

#ta-score-display {
  text-align: right;
}

.npc_talk {
  margin-top: 0px;
  margin-bottom: 10px;
}

/* PUZZLE MINIGAME */

#jigsaw-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 1);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 65px 10px 20px 10px;
  overflow: hidden;
}

.jigsaw-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  min-height: 0;
  justify-content: center;
  gap: 10px;
}

#jigsaw-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  aspect-ratio: 5 / 4;
  width: auto;
  max-width: 90vw;
  height: 100%;
  max-height: 45vh;
  background: rgba(255, 255, 255, 0.05);
  position: relative;
  margin: 0 auto;
  border-radius: 25px;
}

.jigsaw-slot.jigsaw-corner-tl {
  border-top-left-radius: 25px !important;
}

.jigsaw-slot.jigsaw-corner-tr {
  border-top-right-radius: 25px !important;
}

.jigsaw-slot.jigsaw-corner-bl {
  border-bottom-left-radius: 25px !important;
}

.jigsaw-slot.jigsaw-corner-br {
  border-bottom-right-radius: 25px !important;
}

/* Kein will-change auf den Teilen: 30-60 eigene GPU-Ebenen sprengen auf Mobilgeraeten
   den Grafikspeicher -> Overlay flackert / Hintergrund scheint durch */
.jigsaw-piece {
  cursor: grab;
  touch-action: none;
  position: relative;
}

.jigsaw-piece.dragging {
  cursor: grabbing;
  margin: 0 !important;
  border: 1px solid var(--c-cyan);
  transition: none !important;
  will-change: transform;
}

/* Waehrend des Puzzles den verdeckten Spielbildschirm nicht mehr rendern */
/* Laeuft ein Minispiel-Overlay, wird der verdeckte Spielbildschirm nicht mehr
   gezeichnet. Sonst muss der Browser beim Ziehen alles darunter mitrendern und
   zeigt auf Mobilgeraeten kurz den Hintergrund, wenn er nicht hinterherkommt. */
body:not(.chat-menu-open) #game-container.minigame-open > :not(#top_bar):not(#jigsaw-overlay):not(#hack-overlay):not(#hl-interface):not(#dev-game-overlay):not(#tl-game-overlay) {
  visibility: hidden;
}

/* Chat laeuft im Textfenster unter den Minispiel-Overlays: solange er offen ist,
   Overlays ausblenden (Spielstand bleibt erhalten, Chat schliessen = weiterspielen). */
body.chat-menu-open #jigsaw-overlay,
body.chat-menu-open #hack-overlay,
body.chat-menu-open #freq-overlay,
body.chat-menu-open #hl-interface,
body.chat-menu-open #dev-game-overlay,
body.chat-menu-open #tl-game-overlay,
body.chat-menu-open #memory-overlay {
  display: none !important;
}

.jigsaw-piece.placed {
  position: static;
  cursor: default;
  border: none;
  pointer-events: none;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  margin: 0 !important;
}

.jigsaw-win-anim {
  animation: flashGreen 1s forwards;
  border: 2px solid var(--c-success) !important;
}

/* Spielende: fertiges Motiv liegt ueber dem ganzen Brett (verdeckt Raster und leere Felder) */
.jigsaw-final-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
}

/* Spielname direkt unter dem Brett - absolut, damit das Brett nicht verrutscht */
.jigsaw-final-name {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 12px;
  text-align: center;
  color: #fff;
  font-size: 1.3em;
  font-weight: bold;
}

/* Pool und Buttons machen dem Spielnamen Platz (visibility: Layout bleibt stehen) */
#jigsaw-overlay.jigsaw-reveal #jigsaw-pieces-pool,
#jigsaw-overlay.jigsaw-reveal .minigame-buttons {
  visibility: hidden;
}

/* Motiv-Vorschau im HILFE-Dialog */
.jigsaw-help-preview {
  max-width: 100%;
  max-height: 50vh;
  width: auto;
  height: auto;
  border: 1px solid var(--c-border-color);
  border-radius: 6px;
}

#jigsaw-overlay .btn-location {
  flex-shrink: 0;
  margin-top: 10px;
  width: auto;
  padding: 10px 30px;
}

#jigsaw-pieces-pool {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  width: 100%;
  flex: 0 1 auto;
  max-height: 25vh;
  overflow-y: auto;
  gap: 10px;
  padding: 10px;
}

/* Keine Aktionen mehr: Brett/Pool sind tot und werden sichtbar abgedimmt */
.jigsaw-input-locked {
  pointer-events: none !important;
  filter: grayscale(0.6) brightness(0.7);
  transition: filter 0.2s ease;
}

.jigsaw-piece.in-pool {
  position: relative !important;
  transform: none !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  /* exakt so gross wie ein Feld auf dem Brett (Variable kommt aus module_jigsaw.js) */
  width: var(--jigsaw-cell-w, 80px) !important;
  height: var(--jigsaw-cell-h, 80px) !important;
  aspect-ratio: auto;
  box-sizing: border-box;
  flex: 0 0 auto;
  border: 1px solid var(--c-border-color);
}

.jigsaw-piece.in-slot {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  margin: 0 !important;
  border: none !important;
  pointer-events: auto;
  display: block !important;
}

.jigsaw-piece.dragging {
  position: fixed !important;
  z-index: 9999 !important;
  pointer-events: none;
  opacity: 0.9;
  transform: none !important;
  box-shadow: 0 0 15px var(--c-primary);
}

.jigsaw-slot {
  border: 1px dotted #555555;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

/* Feedback beim Platzieren - bewusst OHNE filter/transform/opacity:
   die lassen den Slot waehrend der Animation auf eine eigene GPU-Ebene wandern.
   Endet die Animation, baut der Browser die Ebenen neu und zeichnet dabei den
   Pool neu -> alle Teile im Pool flackern kurz auf (v.a. mobil).
   Aufhellen/Einfaerben laeuft daher ueber die Hintergrundfarbe eines ::after,
   das Zittern ueber left. */
@keyframes placeCorrect {
  0% {
    box-shadow:
      inset 0 0 0 3px var(--c-success),
      0 0 20px var(--c-success);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px transparent,
      0 0 0px transparent;
  }
}

@keyframes placeCorrectFlash {
  0% { background-color: rgba(255, 255, 255, 0.35); }
  100% { background-color: rgba(255, 255, 255, 0); }
}

.slot-success {
  animation: placeCorrect 0.6s ease-out;
}

.slot-success::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: placeCorrectFlash 0.6s ease-out forwards;
}

@keyframes placeError {
  0% {
    box-shadow:
      inset 0 0 0 3px var(--c-danger),
      0 0 20px var(--c-danger);
    left: -2px;
  }
  25% {
    left: 2px;
  }
  50% {
    left: -2px;
  }
  75% {
    left: 2px;
  }
  100% {
    box-shadow:
      inset 0 0 0 1px transparent,
      0 0 0px transparent;
    left: 0;
  }
}

@keyframes placeErrorFlash {
  0% { background-color: rgba(255, 60, 40, 0.45); }
  100% { background-color: rgba(255, 60, 40, 0); }
}

.slot-error {
  animation: placeError 0.5s ease-out;
}

.slot-error::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: placeErrorFlash 0.5s ease-out forwards;
}

.jigsaw-header {
  color: var(--c-primary);
  font-size: 1.5em;
  text-align: center;
  flex-shrink: 0;
  margin-bottom: 0px;
  border-color: var(--c-primary);
  width: 90%;
  max-width: 400px;
  display: flex;
  justify-content: space-between;
}

.jigsaw-piece.jigsaw-corner-tl {
  border-top-left-radius: 25px !important;
}

.jigsaw-piece.jigsaw-corner-tr {
  border-top-right-radius: 25px !important;
}

.jigsaw-piece.jigsaw-corner-bl {
  border-bottom-left-radius: 25px !important;
}

.jigsaw-piece.jigsaw-corner-br {
  border-bottom-right-radius: 25px !important;
}

/* Hardmode: keine abgerundeten Ecken (Brett, Slots, Teile) */
#jigsaw-board.jigsaw-board-square,
.jigsaw-slot.jigsaw-corner-square,
.jigsaw-piece.jigsaw-corner-square {
  border-radius: 0 !important;
}


 /* Pool Layout */
        #jigsaw-pieces-pool {
            gap: 10px;
            padding: 10px;
        }


        /* Teil im Slot: FIX GEGEN GRÖSSENÄNDERUNG */
        .jigsaw-piece.in-slot {
            position: static !important; 
            width: 100% !important;
            height: 100% !important;
            transform: none !important;
            margin: 0 !important;
            border: none !important; /* Kein Rand, der Größe addiert */
            pointer-events: auto; 
            display: block !important; /* WICHTIG: Entfernt "Ghost Space" unter Bildern */
        }

        /* Das gezogene Teil */
        .jigsaw-piece.dragging {
            position: fixed !important;
            z-index: 9999 !important;
            pointer-events: none;
            opacity: 0.9;
            transform: none !important;
            box-shadow: 0 0 15px var(--c-primary);
        }
        
        /* Slot Fix */
        .jigsaw-slot {
            position: relative;
            background: rgb(213 213 213 / 22%);
            overflow: hidden; /* WICHTIG: Verhindert, dass Inhalt den Slot aufdrückt */
            padding: 0 !important; /* Sicherstellen, dass kein Padding da ist */
        }

/* DESKTOP */

@media (min-width: 900px) {
  .jigsaw-container {
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    height: 60vh;
    width: 100%;
    max-width: 100%;
  }

  #jigsaw-board {
    margin: 0 !important;
    flex: 2;
    height: 100%;
    max-height: none;
    width: auto;
    aspect-ratio: auto;
    min-width: 0;
    max-width: 666px;
  }

  /* wird per JS gesetzt, sobald das Brett seine endgueltige Breite hat:
     der Pool bekommt den Platz, den das Brett nicht braucht */
  #jigsaw-pieces-pool.pool-fill-rest {
    flex: 1 1 auto !important;
    max-width: 420px;
  }

  /* Nebeneinander-Layout: Pool ganz raus, damit das fertige Motiv mittig steht */
  #jigsaw-overlay.jigsaw-reveal #jigsaw-pieces-pool {
    display: none !important;
  }

  #jigsaw-pieces-pool {
    flex: 0 0 280px;
    height: 100%;
    max-height: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    box-sizing: border-box;
  }

}

/* =========================================
   DEBUGGING TOOLS
   ========================================= */

#debug-btn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #aa0000;
  color: white;
  border: 2px solid white;
  padding: 8px 12px;
  z-index: 10000;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  opacity: 0.7;
  border-radius: 4px;
}

#debug-btn:hover {
  opacity: 1;
  transform: scale(1.05);
}

#debug-menu {
  position: fixed;
  bottom: 60px;
  right: 10px;
  width: 200px;
  background: rgba(0, 216, 240, 0.06);
  border: 2px solid #fff;
  padding: 10px;
  z-index: 10000;
  display: none;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

#debug-menu button {
  font-size: 12px;
  padding: 8px;
  background: rgba(0, 216, 240, 0.1);
  color: #fff;
  border: 1px solid rgba(0, 216, 240, 0.2);
  text-align: left;
}

#debug-menu button:hover {
  background: #ffb000;
  color: #000;
}

/* =========================================
   ANIMATIONEN & GLITCHES
   ========================================= */

/* Power Off/On */

.monitor-off {
  animation: crtOff 0.4s ease-in forwards;
  pointer-events: none;
}

@keyframes crtOff {
  0% {
    transform: scale(1, 1);
    filter: brightness(1);
    opacity: 1;
  }
  40% {
    transform: scale(1, 0.002);
    filter: brightness(5);
    opacity: 1;
  }
  100% {
    transform: scale(0, 0);
    opacity: 0;
  }
}

.turn-on-effect {
  animation: crtOn 0.6s ease-out forwards;
  transform-origin: center;
}

@keyframes crtOn {
  0% {
    transform: scale(1, 0.002);
    filter: brightness(5);
    opacity: 0;
  }
  30% {
    transform: scale(1, 0.002);
    opacity: 0.8;
  }
  100% {
    transform: scale(1, 1);
    filter: brightness(1);
    opacity: 1;
  }
}

/* Scanline */

@keyframes scanlineMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

/* Glitches */

.switch-a #location-image {
  animation: glitchA 0.5s forwards;
}

@keyframes glitchA {
  0% {
    transform: skewX(30deg) scaleX(1.1);
    filter: contrast(2);
  }
  20% {
    transform: skewX(-20deg);
    filter: sepia(1);
  }
  60% {
    transform: skewX(5deg);
  }
  100% {
    transform: skew(0) scaleX(1);
    filter: none;
  }
}

.switch-b #location-image {
  animation: glitchB 0.5s linear;
}

@keyframes glitchB {
  0% {
    transform: translateY(0);
    opacity: 0.8;
    filter: blur(2px);
  }
  40% {
    transform: translateY(100%);
    opacity: 0;
  }
  41% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

.switch-c #location-image {
  animation: glitchC 0.5s steps(6) forwards;
}

@keyframes glitchC {
  0% {
    filter: brightness(10) saturate(0);
    transform: scale(0.95);
  }
  50% {
    filter: brightness(2) sepia(1);
  }
  100% {
    filter: sepia(0.3) hue-rotate(-30deg);
    transform: scale(1);
  }
}

.switch-d #location-image {
  animation: glitchD 0.4s ease-in-out;
}

@keyframes glitchD {
  0% {
    filter: hue-rotate(0deg);
    transform: translate(0);
  }
  50% {
    filter: hue-rotate(-90deg) invert(0.2);
    transform: translate(10px, -2px);
    opacity: 0.7;
  }
  100% {
    filter: hue-rotate(0deg);
    transform: translate(0);
    opacity: 1;
  }
}

.switch-e #location-image {
  animation: glitchE 0.5s steps(4);
}

@keyframes glitchE {
  0% {
    filter: grayscale(1) contrast(5);
  }
  50% {
    filter: grayscale(1) contrast(0.5);
    transform: translateX(20px);
  }
  100% {
    filter: none;
    transform: scale(1);
  }
}

.switch-f #location-image {
  animation: glitchF 0.3s ease-out;
}

@keyframes glitchF {
  0% {
    filter: brightness(1);
  }
  10% {
    filter: brightness(20) saturate(0);
  }
  30% {
    filter: brightness(0);
  }
  100% {
    filter: brightness(1);
  }
}

.switch-g #location-image {
  animation: glitchG 0.6s ease-in-out;
}

@keyframes glitchG {
  0% {
    transform: skew(0, 0);
  }
  25% {
    transform: skew(10deg, 5deg);
    filter: hue-rotate(30deg);
  }
  75% {
    transform: skew(5deg, 2deg);
  }
  100% {
    transform: skew(0, 0);
  }
}

.switch-h #location-image {
  animation: glitchH 0.4s cubic-bezier(0.1, 0.7, 1, 0.1);
}

@keyframes glitchH {
  0% {
    transform: scaleX(1);
    opacity: 1;
  }
  30% {
    transform: scaleX(2.5) translateX(-10%);
    opacity: 0.6;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.switch-i #location-image {
  animation: glitchI 0.5s steps(3);
}

@keyframes glitchI {
  0% {
    filter: blur(0);
  }
  33% {
    filter: blur(15px) contrast(3);
  }
  100% {
    filter: blur(0);
  }
}

.switch-j #location-image {
  animation: glitchJ 0.5s steps(10);
}

@keyframes glitchJ {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    filter: brightness(0);
  }
  100% {
    opacity: 1;
  }
}

.typing-cursor::after {
  content: "█";
  animation: blink 1s infinite;
  margin-left: 2px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* =========================================
   REISEPAS
   ========================================= */

.passport-container {
  display: flex;
  flex-direction: column;
}

.passport-header, .inv-header, .ach-header {
  background: var(--c-primary);
  color: #000;
  text-align: center;
  text-transform: uppercase;
  padding: 5px;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.passport-stats {
  margin: 0px 0 8px 0;
  margin-bottom: 15px;
}

.passport-progress-bg {
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-bg-light);
  height: 8px;
  width: 100%;
  margin-top: 9px;
  border: 1px solid var(--c-success);
}

.passport-progress-fill {
  background: var(--c-success);
  height: 100%;
  width: 0%;
  transition: width 0.5s ease-out;
}

.passport-list {
  padding-right: 0;
  margin-top: 10px;
}

.pass-entry {
  display: flex;
  align-items: center;
  border: 1px solid var(--c-border-color);
  background: rgba(0, 216, 240, 0.03);
  margin-bottom: 4px;
  padding: 10px 5px;
  position: relative;
  transition: all 0.2s;
}

.pass-entry.visited {
  border-color: var(--c-border-color);
}

.pass-entry.visited:hover {
  background: #000000;
  border-color: #c3bcac;
}

.pass-thumb {
  width: 80px;
  object-fit: scale-down;
  margin-right: 10px;
  height: 70px;
}

.pass-info {
  flex: 1;
}

.pass-name {
  color: #fff;
  font-size: 0.9em;
  max-width: 80%;
  line-height: 0.7em;
}

.pass-date {
  font-size: 0.8em;
  color: var(--c-gray-light);
  text-shadow: none;
}

.pass-rank {
  font-size: 0.75em;
  color: #dcdfeb;
  margin-top: 3px;
  font-style: italic;
  letter-spacing: 0.5px;
}

.pass-stamp {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(15deg);
  border: 2px solid var(--c-success);
  color: var(--c-success);
  font-size: 0.8rem;
  padding: 2px 5px;
  text-transform: uppercase;
  pointer-events: none;
  border-radius: 5px;
}

.pass-entry.locked {
  opacity: 0.5;
  filter: grayscale(1);
}

.pass-thumb-placeholder {
  width: 60px;
  height: 40px;
  background: rgba(0, 216, 240, 0.06);
  color: var(--c-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 10px;
  border: 1px dashed rgba(0, 216, 240, 0.15);
}

.pass-entry.locked .pass-name {
  color: var(--c-gray);
  text-decoration: line-through;
}

.locked-preview {
  filter: grayscale(100%) contrast(1.2) brightness(0.7) !important;
  opacity: 0.2;
}

.clue-postcard {
  display: block;
  max-width: 90%;
  height: auto;
  border: 5px solid #fff;
  border-bottom-width: 20px;
  margin: 15px auto;
  transform: rotate(-2deg);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  filter: sepia(0.5) contrast(1.1);
  transition: transform 0.2s;
}

.clue-postcard:hover {
  transform: rotate(0deg) scale(1.05);
  z-index: 10;
}

.tools-wrapper {
  grid-column: span 6;
  display: flex;
  gap: 4px;
  height: 42px;
  margin-top: 0px;
  filter: grayscale(var(--c-greyscale));
}

#underscreen-wrap .tools-wrapper {
  flex-direction: column;
  height: auto;
}

#underscreen-wrap .tools-wrapper .btn-icon-tool img {
  height: 49px;
}

.btn-icon-tool {
  flex: 1;
  font-size: 1.4rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-lighter);
  color: var(--c-gray-light) !important;
  position: relative;
  padding: 0px 5px;
  min-width: 50px;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: 1px solid var(--c-border-color);
  border-radius: 4px;
}

.btn-icon-tool:hover {
  border-color: #fff !important;
  background: rgba(0, 216, 240, 0.1) !important;
  color: #fff !important;
  transform: translateY(0px) !important;
  box-shadow: 0 0 12px var(--c-cyan-glow);
}

.btn-icon-tool img {
  max-height: 90%;
  max-width: 90%;
  width: auto;
  height: auto;
  image-rendering: pixelated;
}

.btn-icon-tool:hover img {
  opacity: 1;
  filter: brightness(1.2);
}

/* Label kommt aus aria-label statt title: title wuerde zusaetzlich den
   nativen Browser-Tooltip einblenden, aria-label nicht. */

.btn-icon-tool[aria-label]:hover::after,
.inv-equip-flag[aria-label]:hover::after,
.inv-style-flag[aria-label]:hover::after,
.inv-liker[aria-label]:hover::after {
  content: attr(aria-label);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: #0a1020;
  border: 1px solid #fff;
  color: #fff;
  padding: 3px 8px;
  font-size: 0.85em;
  white-space: nowrap;
  z-index: 999;
  pointer-events: none;
}

#top_bar .btn-icon-tool:hover::after {
  bottom: inherit;
  top: 108%;
}

/* Bestechungs-Hinweis im Inventar: Mini-Portraits der Personen, die das Item
   moegen. Nutzt den Tooltip der Regel oben, nur rechtsbuendig statt zentriert -
   die Icons sitzen am rechten Kartenrand, zentriert liefe der Tooltip raus. */
.inv-liker {
  position: relative;
  display: inline-flex;
  cursor: help;
}

.inv-liker[aria-label]:hover::after {
  left: auto;
  right: 0;
  transform: none;
}

.inv-liker img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1px solid rgb(73 73 73);
  border-radius: 999px;
  background: #111;
  padding: 1px;
  image-rendering: pixelated;
}

.btn-icon-tool.has-notification {
  filter: none !important;
}

.btn-icon-tool.has-notification::before {
  content: "";
  position: absolute;
  top: -6px;
  right: -5px;
  width: 12px;
  height: 12px;
  background: var(--c-success);
  border-radius: 50%;
  border: 1px solid #000;
  box-shadow: 0 0 6px var(--c-success);
  z-index: 3;
  pointer-events: none;
}

.btn-icon-tool:active {
  transform: translateY(0px) scale(0.92) !important;
  transition: all 0.05s !important;
}

/* =========================================
  REISEKARTE
   ========================================= */

.travel_lead-img {
  position: absolute;
  top: -11px;
  right: -7px;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 1px solid #595959;
  border-radius: 999px;
  background: #111;
  pointer-events: none;
  padding: 1px;
}

#travel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #050505;
  z-index: 99999;
  display: none;
  overflow: hidden;
}

/* Karten-Ebene: wird per JS waehrend der Reise sanft aufs Ziel gezoomt und gedreht */
#travel-map-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform;
}

/* Raster mit Ueberstand, damit beim Drehen/Zoomen keine Kanten auftauchen */
.travel-map-grid {
  position: absolute;
  inset: -30%;
  background-image: linear-gradient(rgba(0, 50, 0, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 50, 0, 0.2) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Nebenpunkte schweben minimal. Eigene translate-Property, damit das
   transform (Zentrierung/Label-Ausrichtung) unangetastet bleibt. */
.map-point.drift,
.map-label.drift {
  animation: mapPointDrift var(--drift-dur, 4s) ease-in-out var(--drift-delay, 0s) infinite alternate;
}

@keyframes mapPointDrift {
  from { translate: calc(var(--drift-x, 0px) * -1) calc(var(--drift-y, 0px) * -1); }
  to   { translate: var(--drift-x, 0px) var(--drift-y, 0px); }
}

@media (prefers-reduced-motion: reduce) {
  .map-point.drift,
  .map-label.drift {
    animation: none;
  }
}

#travel-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.map-point {
  position: absolute;
  width: 15px;
  height: 15px;
  background: var(--c-gray-light);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0.8;
}

.map-point.start {
  background: var(--c-primary);
  box-shadow: 0 0 10px var(--c-primary);
  width: 15px;
  height: 15px;
}

.map-point.end {
  background: var(--c-success);
  box-shadow: 0 0 10px var(--c-success);
  width: 15px;
  height: 15px;
}

.map-label {
  position: absolute;
  font-size: 18px;
  color: var(--c-gray-light);
  white-space: nowrap;
  z-index: 2;
  opacity: 0.7;
  pointer-events: none;
}

.map-label.align-right {
  transform: translate(0, -50%);
  margin-left: 12px;
  text-align: left;
}

.map-label.align-left {
  transform: translate(-100%, -50%);
  margin-left: -12px;
  text-align: right;
}

.map-label.active {
  color: #fff;
  opacity: 1;
  text-shadow: 0 0 5px #000;
}

#travel-vehicle {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

#travel-zoom-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  z-index: 10;
  transform: translate(-50%, -50%) scale(0.01);
  opacity: 0;
  filter: brightness(0.5) blur(5px);
  border: 10px solid #fff;
  transition: transform 2.5s ease-in, opacity 2.5s ease-in, filter 2.5s linear;
  overflow: hidden;
  background: #080c18;
}

#travel-zoom-wrapper.zooming {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  filter: brightness(1) blur(0);
  border-width: 0;
}

/* Finale vor dem Bosskampf: die Bilder sind der Star, nicht die Karte.
   Startet deutlich groesser und fast deckend, statt als winziger Punkt. */
#travel-zoom-wrapper.finale {
  transform: translate(-50%, -50%) scale(0.45);
  opacity: 0.9;
  filter: brightness(0.85) blur(2px);
  border-width: 6px;
}

/* Zwei Klassen -- schlaegt .zooming unabhaengig von der Reihenfolge. */
#travel-zoom-wrapper.finale.zooming {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  filter: brightness(1) blur(0);
  border-width: 0;
}

#travel-zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 30px solid #f8f8f8;
  border-bottom-width: 80px;
  z-index: 11;
}

/* Wechsel zwischen den Screenshots waehrend der finalen Reise */
#travel-zoom-img.shot-swap {
  animation: travelShotSwap 0.32s ease-in-out;
}

@keyframes travelShotSwap {
  0% { opacity: 1; }
  48% { opacity: 0; }
  52% { opacity: 0; }
  100% { opacity: 1; }
}

.switch-a #travel-zoom-img {
  animation: glitchA 0.5s forwards;
}

.switch-b #travel-zoom-img {
  animation: glitchB 0.5s linear;
}

.switch-c #travel-zoom-img {
  animation: glitchC 0.5s steps(6) forwards;
}

.switch-d #travel-zoom-img {
  animation: glitchD 0.4s ease-in-out;
}

.switch-e #travel-zoom-img {
  animation: glitchE 0.5s steps(4);
}

.switch-f #travel-zoom-img {
  animation: glitchF 0.3s ease-out;
}

.switch-g #travel-zoom-img {
  animation: glitchG 0.6s ease-in-out;
}

.switch-h #travel-zoom-img {
  animation: glitchH 0.4s cubic-bezier(0.1, 0.7, 1, 0.1);
}

.switch-i #travel-zoom-img {
  animation: glitchI 0.5s steps(3);
}

.switch-j #travel-zoom-img {
  animation: glitchJ 0.5s steps(10);
}

/* BILDERRÄTSEL MULTIPLAYER */

/* Startet unter der #top_bar (Offset setzt module_mp_bild.js), damit diese sichtbar bleibt */
.mp-modal {
  position: absolute;
  top: var(--mp-top-offset, 0px);
  left: 0;
  width: 100%;
  height: calc(100% - var(--mp-top-offset, 0px));
  background: #000;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 25px;
}

.mp-modal.mp-menu-hidden {
  display: none;
}

.mp-modal.mp-detached {
  position: fixed;
  z-index: 999999;
}

.mp-modal.minimized {
  height: 50px;
  width: 375px;
  bottom: -5px;
  left: auto;
  right: 0px;
  border: 1px solid #000;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 20px #000;
  cursor: pointer;
  z-index: 9999999;
  top: auto;
  padding: 0;
}

.mp-modal.minimized .mp-body, .mp-modal.minimized .mp-round-display, .mp-modal.minimized .mp-header-title img {
  display: none;
}

/* Header im Stil der Board-Tabs (Minigames/Detektiv-Board) */
.mp-header {
  flex: 0 0 auto;
}

.mp-header .mp-header-title {
  cursor: default;
  gap: 4px 12px;
}

.mp-header-title img {
  margin-right: 0;
}

.mp-status-badge {
  padding: 1px 8px;
}

/* Minimieren-Button sitzt links vom X: keine Eckrundung, schmaler Spalt als Trenner */
.mp-header .board-close-btn.mp-header-btn {
  border-radius: 0 !important;
  margin-right: 1px;
}

.mp-modal.minimized .mp-header {
  height: 100%;
}

.mp-modal.minimized .board-tab {
  min-height: 0;
  padding: 6px 10px;
}

/* Spielansicht: Spielerleiste oben, Bild + Eingabe, Reaktionsleiste unten */
.mp-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  gap: 12px;
  padding-top: 12px;
}

.mp-player-bar {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

.mp-player-bar .mp-player-card {
  flex: 1 1 0;
  max-width: 25%;
}

/* Kompaktes Badge: Avatar | Name | Punkte in einer Reihe */
.mp-player-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 10px 4px 4px;
  border: 1px solid;
  border-radius: 6px;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.mp-player-card.me {
  border-color: var(--c-primary) !important;
}

.mp-player-card.has-guessed {
  border-color: var(--c-success) !important;
  box-shadow: inset 0 0 10px rgba(51, 255, 51, 0.15);
}

.mp-badge-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  overflow: hidden;
}

.mp-badge-avatar .generated-avatar {
  transform: scale(0.8);
  transform-origin: 50% 0;
  left: -7px;
}

.mp-p-name {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-p-score {
  flex: 0 0 auto;
  color: var(--c-success);
  font-size: 1.2em;
}

.mp-p-rank {
  flex: 0 0 auto;
  width: 34px;
  text-align: center;
  color: var(--c-primary);
  font-size: 1.2em;
}

.mp-p-reward {
  flex: 0 0 auto;
  color: var(--c-success);
}

/* Reaktion: steigt über dem Badge auf und verblasst */
.mp-reaction-pop {
  position: absolute;
  right: 0px;
  top: -2px;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 20;
  animation: mpReactionPop 2.6s ease-out forwards;
}

@keyframes mpReactionPop {
  0% { transform: translateY(10px) scale(0.4); opacity: 0; }
  12% { transform: translateY(-2px) scale(1.25); opacity: 1; }
  25% { transform: translateY(0) scale(1); }
  80% { opacity: 1; }
  100% { transform: translateY(-10px) scale(1); opacity: 0; }
}

.mp-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 16px;
}

.mp-image-area {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Kein overflow hier, sonst schneidet es die Autocomplete-Liste ab */
.mp-side {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.mp-side .mp-input-wrap {
  flex-direction: column;
  align-items: stretch;
  max-width: none;
}

.mp-feedback-msg {
  color: #fff;
}

/* Größe setzt fitMpImage() passend zum Seitenverhältnis des Bildes */
.mp-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(27 31 42);
  background: var(--c-bg);
}

.mp-reaction-bar {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mp-reaction-bar::-webkit-scrollbar {
  display: none;
}

.mp-reaction-btn {
  flex: 1 0 44px;
  height: 44px;
  font-size: 1em;
  line-height: 1;
  padding: 0;
  background: #191919;
  border: none;
  border-radius: 6px !important;
  cursor: pointer;
  transition: all 0.2s;
}

.mp-reaction-btn img {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  image-rendering: pixelated;
  pointer-events: none;
}

.mp-reaction-btn:hover {
  background: #2b2b2b;
  box-shadow: none !important;
}

.mp-reaction-bar.cooldown .mp-reaction-btn {
  opacity: 0.4;
  pointer-events: none;
}

/* Endbildschirm: eine Karte (Ergebnis, Rangliste, Schließen), eher oben als mittig */
.mp-end {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4vh 0 10px;
}

.mp-end-card {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mp-end-result {
  text-align: center;
  padding: 6px 0 14px;
}

.mp-end-title {
  font-size: 3em;
  line-height: 1;
}

.mp-end-sub {
  color: #fff;
  margin-top: 8px;
}

.mp-end-list .mp-player-card {
  padding: 6px 12px 6px 4px;
}

.mp-end-close {
  align-self: center;
  min-width: 200px;
}

.mp-end-win .mp-end-title {
  color: var(--c-success);
}

.mp-end-place .mp-end-title {
  color: var(--c-primary);
}

.mp-end-lose .mp-end-title {
  color: var(--c-danger);
}

.mp-end-card .home-panel-title {
  display: block;
  margin-bottom: -4px;
}

.mp-end-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mp-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.mp-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

.mp-tile {
  background: #161616;
  width: 100%;
  height: 100%;
  transition: opacity 0.8s ease;
  border: 1px solid rgb(255 255 255 / 8%);
  box-sizing: border-box;
  opacity: 1;
}

.mp-tile.revealed {
  opacity: 0;
}

.mp-input-wrap {
  width: 100%;
  max-width: 500px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 5px;
}

.mp-input-container {
  position: relative;
  flex-grow: 1;
}

.mp-input {
  width: 100%;
  padding: 10px;
  font-family: "VT323", monospace;
  font-size: 1.3em;
  background: var(--c-bg);
  color: var(--c-primary);
  border: 1px solid var(--c-cyan);
  box-sizing: border-box;
  border-bottom: bone !important;
}

.mp-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #050505;
  border-top: none;
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.9);
}

.mp-ac-item {
  padding: 10px;
  cursor: pointer;
  color: #ccc;
  border-bottom: 1px dashed rgba(0, 216, 240, 0.12);
  font-family: "VT323", monospace;
  font-size: 1.2em;
  transition: all 0.2s;
}

.mp-ac-item:hover {
  background: rgba(255, 176, 0, 0.2);
  color: var(--c-primary);
  padding-left: 15px;
}

.mp-ac-item.mp-ac-active {
  background: rgba(255, 176, 0, 0.4);
  color: var(--c-primary);
  padding-left: 15px;
  border-left: 3px solid var(--c-primary);
}

.mp-big-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.95);
  padding: 30px 50px;
  border: 1px solid var(--c-primary);
  font-size: 3em;
  font-weight: bold;
  text-align: center;
  color: #fff;
  z-index: 10;
  box-shadow: 0 0 50px #000;
}

.lobby-card {
  background: rgba(0, 216, 240, 0.03);
  border: 1px solid rgba(0, 216, 240, 0.12);
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-tool-btn {
  color: #fff !important;
  border: 1px solid var(--c-primary);
  width: 30px;
  height: 30px;
  font-size: 24px;
}

.topbar-tool-btn:hover {
  color: #000 !important;
  background: #fff;
  box-shadow: none;
}

@media (max-width: 800px) {
  .mp-player-bar {
    flex-wrap: wrap;
  }

  .mp-player-bar .mp-player-card {
    flex: 1 1 calc(50% - 4px);
    max-width: calc(50% - 4px);
  }

  .mp-stage {
    flex-direction: column;
  }

  .mp-image-area {
    min-height: 180px;
  }

  .mp-side {
    flex: 0 0 auto;
  }

  .mp-reaction-btn {
    flex: 0 0 44px;
  }
}

/* =========================================
   BILD-HINWEISE & LIGHTBOX
   ========================================= */

.clue-wrapper {
  transform: rotate(var(--rotation, 0deg));
  position: relative;
  display: inline-block;
  cursor: zoom-in;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin: 20px 10px 0px 0px;
}

.clue-wrapper:hover {
  transform: rotate(0deg) scale(1.05) !important;
  z-index: 100;
}

.clue-img-base {
  display: block;
  max-width: 100%;
  height: auto;
  border: 5px solid #fff;
  border-bottom-width: 15px;
  width: 370px;
}

.clue-overlay-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Bis Bild und Overlay geladen sind (clueImgLoaded in script.js): nichts zeigen,
   damit das Bild nie kurz ohne Overlay zu sehen ist. */
.clue-wrapper img,
.hint-tile img,
.lightbox-image-wrapper img {
  transition: opacity 0.2s ease;
}

.clue-loading img {
  opacity: 0;
}

.clue-wrapper.clue-loading {
  min-height: 200px;
  background: rgba(255, 255, 255, 0.06);
}

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.lightbox-close-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background: #000;
  color: white;
  font-weight: 400;
  font-size: 1.1em;
  cursor: pointer;
  border: 1px solid var(--terminal-color);
  text-transform: uppercase;
}

.lightbox-close-btn:hover {
  background: var(--c-primary);
  color: #000;
  box-shadow: 0 0 15px var(--c-primary);
  border: 1px solid var(--c-primary);
}

.monitor-mode-btn {
  width: 20px;
  height: 20px;
  background: rgb(171 171 171 / 8%);
  border: 1px solid rgb(169 169 169 / 8%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 1px 1px 2px rgb(201 201 201 / 10%), 0 0 5px #000;
  margin-top: 6px;
  position: relative;
}

.monitor-mode-btn:active {
  transform: scale(0.95);
  background: rgba(0, 216, 240, 0.06);
}

.monitor-mode-btn::after {
  content: "MODE";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: sans-serif;
  font-size: 9px;
  color: #3d3d3d;
  font-weight: bold;
  pointer-events: none;
}

/* --- PODCASTER LAUFSTEG (Start Screen) --- */

/* ============================================================
   HAUPTMENÜ (im Monitor) — HOME
   ============================================================ */

#start-screen {
  height: 100%;
  overflow-y: auto;
  padding: 22px;
  color: var(--ui-text);
}

.home-menu {
  display: flex;
  gap: 20px;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 100%;
}

.home-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-right {
  width: 340px;
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
}

.home-panel-title {
  color: #fff;
  font-size: 1.1em;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.home-mygames .home-panel-title, .home-leaderboard .home-panel-title {
  display: block;
  margin-bottom: 10px;
}

#home-character {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 10px;
}

/* --- Charakter-Karte --- */

.home-char-top {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  width: 50%;
  flex-wrap: wrap;
}

.home-char-avatar {
  width: 72px;
  height: 90px;
  flex-shrink: 0;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-char-avatar .generated-avatar {
  top: 0 !important;
  left: 0 !important;
  transform: scale(1.4);
  transform-origin: center;
}

.home-char-avatar-empty {
  color: var(--c-gray-light);
  font-size: 2.4em;
}

.home-char-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 60%;
}

.home-char-welcome {
  font-size: 0.9em;
  color: var(--ui-text-dim);
}

.home-char-name {
  font-size: 1.6em;
  color: #fff;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-char-name-empty {
  color: var(--c-gray-light);
  font-size: 1em;
}

.home-char-level {
  color: var(--c-primary);
  font-size: 0.9em;
  margin-top: 5px;
}

.home-xp-track {
  height: 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-primary);
  border-radius: 5px;
  overflow: hidden;
  margin-top: 4px;
}

.home-xp-fill {
  height: 100%;
  background: var(--c-primary);
  box-shadow: var(--glow-amber);
}

.home-xp-copy {
  font-size: 0.72em;
  color: var(--ui-text-dim);
  margin-top: 3px;
  display: none;
}

.home-profile-btn {
  padding: 9px 20px;
  border: 1px solid var(--c-primary);
  color: var(--c-primary);
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 4px;
  width: auto;
}

.home-profile-btn:hover {
  background: var(--c-primary);
  color: #000;
  border: 1px solid var(--c-primary);
  box-shadow: none;
}

/* --- Deine Spiele --- */

.home-mygames-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 150px;
  overflow-y: auto;
}

.home-mygame-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 4px 5px;
  border: 1px solid var(--c-border-color);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}

#pe-feed .home-mygame-row {
  border: none;
}
.home-mygame-name {
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-mygame-visits {
  color: var(--c-gray-light);
  flex-shrink: 0;
  font-size: 0.82em;
}

.home-hint {
  color: #666666;
  font-size: 1em;
  padding: 6px 2px;
  line-height: 1.1;
}

/* --- Bestenliste / Ruhmeshalle --- */

.home-leaderboard {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.home-leaderboard-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.home-hs-date {
  color: #fff;
  font-size: 0.8em;
}

.home-hs-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-border-color);
  margin: 8px 0 10px;
  padding-left: 5px;
}

.home-hs-tabs .hs-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: #6f6f6f;
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 1em;
  border-radius: 6px 6px 0 0;
  position: relative;
  top: 1px;
  transition: color 0.15s ease;
}

.home-hs-tabs .hs-tab-btn:hover:not(.active) {
  color: #fff;
}

.home-hs-list {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 400px;
}

/* --- Rechte Menü-Spalte --- */

.home-title {
  text-align: center;
  margin-bottom: 8px;
}

.home-title .matrix-text {
  display: block;
  font-size: 1.9em;
  color: var(--c-primary);
  line-height: 31px;
  text-shadow: 0 0 14px rgba(255, 176, 0, 0.4);
}

.home-subtitle {
  color: #ffffff;
  font-size: 0.9em;
  margin-top: 0px;
}

.home-menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Kleinere Nebenbuttons im Hauptmenü (Anleitung, Editor, Forum, Credits) */
.home-menu-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.home-menu-secondary button {
  width: 100%;
  padding: 7px 6px;
  font-size: 1em;
}

/* ANLEITUNG-Popup */
.guide-content {
  text-align: left;
  font-size: 0.9em;
  line-height: 1.45;
}

.guide-content h3 {
  margin: 14px 0 4px;
  font-size: 1em;
  color: var(--c-primary);
  letter-spacing: 0.05em;
}

.guide-content h3:first-child {
  margin-top: 0;
}

.guide-content p {
  margin: 0 0 4px;
}

.guide-content ul {
  margin: 0;
  padding-left: 18px;
}

.guide-content li {
  margin-bottom: 3px;
}

/* Kontext-Hilfe: Profi-Tipps zugeklappt, damit Einsteiger nicht erschlagen werden */
.guide-content .guide-pro {
  margin-top: 14px;
  border: 1px solid var(--c-border-color);
  border-radius: 4px;
  padding: 6px 10px;
}

.guide-content .guide-pro summary {
  cursor: pointer;
  color: var(--c-primary);
  letter-spacing: 0.05em;
  list-style: none;
  user-select: none;
}

.guide-content .guide-pro summary::-webkit-details-marker {
  display: none;
}

.guide-content .guide-pro summary::before {
  content: '▶ ';
  font-size: 0.8em;
}

.guide-content .guide-pro[open] summary::before {
  content: '▼ ';
}

.guide-content .guide-pro[open] summary {
  margin-bottom: 6px;
}

/* Challenge-Tag + Berliner Uhrzeit unter dem Titel */
.home-daily-clock {
  margin-top: 6px;
  font-size: 0.75em;
  color: var(--c-gray-light);
  line-height: 1.4;
}

.home-daily-clock b {
  color: #fff;
  font-weight: normal;
}

.home-daily-clock-local {
  white-space: nowrap;
}

/* CHALLENGE STARTEN, wenn die Tages-Challenge heute schon beendet ist */
.home-menu-buttons button.challenge-locked,
.home-menu-buttons button.challenge-locked:hover {
  position: relative;
  background: #3a3a3a;
  color: #8a8a8a;
  border-color: #555 !important;
  box-shadow: none;
  cursor: not-allowed;
  filter: grayscale(1);
}

.home-menu-buttons button.challenge-locked[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  z-index: 50;
  width: max-content;
  max-width: 280px;
  padding: 6px 10px;
  background: #000;
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
  font-size: 0.8em;
  line-height: 1.3;
  white-space: normal;
  pointer-events: none;
}



@media (max-width: 900px) {
  .home-menu {
    flex-direction: column;
  }

  .home-right {
    width: 100%;
    flex: 1 1 auto;
    order: -1;
  }

  .home-hs-list {
    max-height: none;
  }

}

#podcaster-runway {
  width: 100%;
  height: 120px;
  position: absolute;
  overflow: visible;
  bottom: -5px;
  left: 0px;
  display: block;
}

.runway-sprite {
  position: absolute;
  bottom: 5px;
  height: 120px;
  width: auto;
  left: -150px;
  pointer-events: none;
  image-rendering: pixelated;
  will-change: left, transform;
  z-index: 99;
}

/* --- ANIMATIONEN --- */

@keyframes walk-normal {
  0% {
    left: -100px;
  }
  100% {
    left: 100%;
  }
}

@keyframes walk-hop {
  0% {
    left: -100px;
    transform: translateY(0);
  }
  10% {
    transform: translateY(-25px);
  }
  25% {
    transform: translateY(10px);
  }
  30% {
    transform: translateY(0px);
  }
  45% {
    transform: translateY(-25px);
  }
  60% {
    transform: translateY(15px);
  }
  70% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(-20px);
  }
  90% {
    transform: translateY(10px);
  }
  100% {
    left: 100%;
    transform: translateY(0);
  }
}

@keyframes walk-return {
  0% {
    left: -100px;
    transform: scaleX(1);
  }
  45% {
    left: 40%;
    transform: scaleX(1);
  }
  50% {
    left: 40%;
    transform: scaleX(-1);
  }
  100% {
    left: -150px;
    transform: scaleX(-1);
  }
}

@keyframes walk-return-mid {
  0% {
    left: -100px;
    transform: scaleX(1);
  }
  65% {
    left: 60%;
    transform: scaleX(1);
  }
  70% {
    left: 60%;
    transform: scaleX(-1);
  }
  100% {
    left: -150px;
    transform: scaleX(-1);
  }
}

@keyframes walk-jitter {
  0% {
    left: -100px;
    transform: skewX(0deg);
  }
  25% {
    transform: skewX(5deg);
  }
  50% {
    transform: skewX(-5deg);
  }
  75% {
    transform: skewX(5deg);
  }
  100% {
    left: 100%;
    transform: skewX(0deg);
  }
}

.anim-normal {
  animation: walk-normal linear forwards;
}

.anim-hop {
  animation: walk-hop linear forwards;
}

.anim-return {
  animation: walk-return ease-in-out forwards;
}

.anim-return-mid {
  animation: walk-return-mid ease-in-out forwards;
}

.anim-jitter {
  animation: walk-jitter linear forwards;
}

/* SF QUIZ */

#quiz_popup {
  background: #000;
  border: 2px solid var(--c-border-color);
  padding: 20px;
  max-width: 600px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  font-size: 1.2em;
  color: #fff;
  position: relative;
}

  #quiz_beuster {
    position: absolute;
    right: -21px;
    top: -33px;
  }

#quiz_popup h2 {
  color: var(--c-primary);
  margin-top: 0;
  padding-bottom: 10px;
  font-weight: 400;
}

#quiz_button_wrap {
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: 10px;
  width: 100%;
}

#quiz_button_wrap button.btn-action-main {
  grid-column: auto;
  height: 55px;
  margin-top: 0px;
  background: var(--c-bg-lighter) !important;
  color: #fff !important;
  border-color: var(--c-border-color) !important;
}

#quiz_button_wrap button.btn-action-main:hover {
  background: var(--c-primary) !important;
  color: #000 !important;
  box-shadow: 0 0 15px var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}

/* Linke Spalte: Die Aussagen */

.item-clue-column {
  flex: 1;
  border-right: 1px dashed rgba(0, 216, 240, 0.15);
  padding-right: 10px;
  overflow-y: auto;
}

/* Rechte Spalte: Die Items */

.item-target-column {
  flex: 1;
  padding: 10px;
  display: grid;
  overflow-y: auto;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  /* Zeilen nicht strecken: Karten behalten ihre Größe, auch wenn Filter nur wenige übrig lassen */
  align-content: start;
}

/* --- DRAGGABLE CLUE CARD (Links) --- */

.clue-cat-logic {
  border-left-color: #d400ff;
  background: rgba(212, 0, 255, 0.05);
}

.item-target-card {
  padding: 5px 10px;
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
}

.item-target-card.selected {
  border-color: var(--c-primary);
  box-shadow: 0 0 15px rgba(51, 255, 51, 0.2);
}

.item-target-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-select-btn {
  font-size: 1.1em;
  cursor: pointer;
  color: #eee;
  transition: color 0.2s;
  letter-spacing: 1px;
}

.item-select-btn:hover {
  color: #fff;
}

.item-target-card.excluded {
  opacity: 0.4;
  filter: grayscale(1);
  border-color: rgba(0, 216, 240, 0.15);
  background: rgba(0, 0, 0, 0.2);
}

.item-target-card.excluded .item-select-btn {
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
}

.item-emoji {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-emoji img {
  object-fit: cover;
  width: 50px;
}

/* --- META INFO GRID --- */

.game-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.game-meta-grid img, #dialog-title .meta-label-all img {
  height: 24px;
  width: auto;
}

.game-meta-grid .meta-label-all, #dialog-title .meta-label-all {
  padding: 8px 10px;
  font-size: 1em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 5px;
}

/* Gleiches Label im Händler-Popup, nur inline neben dem Titel statt als Grid-Zelle */

#dialog-title .meta-label-all {
  display: inline-flex;
  font-size: 0.6em;
  margin-left: 12px;
  vertical-align: middle;
}

#game_info_wrap {
  padding: 0px 20px;
  border-radius: 0;
  font-size: 0.9em;
  gap: 5px;
  margin: 0;
  align-items: baseline;
  width: 100%;
  flex: 1;
  color: #b8c8d0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#game_info_wrap #current-location {
  font-size: 1.2em;
}

#game-meta-info {
  width: 100%;
}

.meta-item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid var(--c-border-color);
  padding: 10px 0px 5px 0px;
}

#game_info_wrap .btn-tiny {
  width: auto;
  padding: 2px 10px;
  border: 1px solid #b8c8d0;
  color: #ffffff;
  border-radius: 10px !important;
  margin-top: 10px;
  font-size: 1em;
}

#game_info_wrap .btn-tiny.active {
  background: #ffffff;
  border-color: #b8c8d0 !important;
  color: #000;
}

#game_info_wrap .btn-tiny:hover {
  color: #000 !important;
  border-color: #fff !important;
  background: #d8d8d8;
  box-shadow: none;
}

.meta-label {
  color: #8f8f8f;
}

.meta-value {
  color: #fff;
}

/* Der kleine Cover-Button */

.btn-tiny {
  background: var(--c-bg-light);
  border: 1px solid var(--c-border-color);
  color: var(--c-primary);
  font-size: 0.9em;
  cursor: pointer;
  padding: 0 4px;
  width: 100%;
  text-transform: uppercase;
}

.btn-tiny:hover {
  background: var(--c-primary);
  color: #000 !important;
  box-shadow: none;
}

.btn-tiny.active {
  background: var(--c-primary-dim);
  border-color: var(--c-primary);
  color: #000;
}

.btn-tiny.btn-trade {
  width: auto;
  font-size: 0.9em;
}

button.card_details {
  border: none;
  background: transparent;
  padding: 2px 0px 2px 5px;
  position: relative;
  right: -4px;
  font-size: 0.8em;
}

button.card_details:hover {
  border: none;
  background: transparent;
  box-shadow: none;
}

#trade_wrap {
  padding-top: 15px;
  margin: 15px 0px;
}

#trade_wrap .btn-tiny {
  width: auto;
  padding: 0px 10px;
  border-color: var(--c-primary);
  border-radius: 8px;
}

#trade_wrap input {
  font-size: 0.9em;
  color: #fff;
}

#trade_wrap #trade_input {
  display: flex;
  gap: 10px;
}

#trade_input input {
  flex-grow: 1;
  background: var(--c-bg);
  border: 1px solid var(--c-border-color);
  color: var(--c-primary);
  padding: 5px;
  font-family: inherit;
}

#trade-code-input:focus {
  box-shadow: none;
  border: 1px solid #fff !important;
  outline: none;
}

/* --- SAMMELKARTEN POPUP (Quartett-Style) --- */

.card-popup-container {
  background: var(--c-bg-light);
  border: 2px solid var(--c-border-color);
  width: 500px;
  max-width: 90%;
  padding: 15px;
  position: relative;
  text-align: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--c-border-color);
  padding-bottom: 5px;
  margin-bottom: 2px;
  color: #fff;
}

.card-name {
  font-size: 1.4em;
  font-weight: 400;
  color: #fff;
}

.card-number {
  font-size: 1.4em;
  font-weight: 400;
  color: #000;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  letter-spacing: -2px;
}

.card-set-label {
  font-size: 1em;
  color: var(--c-primary);
  letter-spacing: 2px;
  margin-bottom: 15px;
  margin-top: 3px;
  text-align: left;
}

.card-image-box {
  width: 100%;
  margin-bottom: 15px;
  overflow: hidden;
}

.card-image-box img {
  width: 100%;
  image-rendering: pixelated;
  max-height: 300px;
  object-fit: contain;
}

.card-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  text-align: left;
  padding: 10px;
}

.card-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 1.1em;
  border-bottom: 1px dotted var(--c-border-color);
  flex-direction: column;
  padding-bottom: 7px;
}

.card-stat-row span:last-child {
  color: var(--c-primary);
}

/* --- SAMMELKARTEN LISTE */

.card-list-item {
  cursor: default;
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid var(--c-border-color);
  transition: background 0.2s;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
}

.card-list-item:hover {
  background: rgba(0, 216, 240, 0.06);
}

.card-list-thumb {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  background: #080c18;
  border: 1px solid var(--c-border-color);
}

.card-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-collection-scroll-area {
  padding-bottom: 20px;
}

#text-output::-webkit-scrollbar {
  width: 8px;
}

#text-output::-webkit-scrollbar-track {
  background: #080c18;
}

#text-output::-webkit-scrollbar-thumb {
  background: var(--c-primary-dim);
  border: 1px solid var(--c-primary);
}

.accordion-header {
  background: #1a1a1a;
  color: #fff !important;
  padding: 10px 15px;
  margin-top: 10px;
  margin-bottom: 2px;
  cursor: pointer;
  border: 1px solid var(--c-border-color);
  border-left: 4px solid var(--c-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

.accordion-header:hover {
  background: #252525;
}

.accordion-header.active {
  background: rgba(0, 216, 240, 0.06);
  border-bottom: none;
}

.accordion-content {
  display: none;
  border: 1px solid rgba(0, 216, 240, 0.1);
  border-top: none;
  padding: 5px;
  background: rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

.acc-icon {
  font-size: 0.8em;
  color: var(--c-gray-light);
  transition: transform 0.2s;
}

.btn-icon-tool.active {
  background: rgb(45 142 153 / 23%) !important;
  border-color: #fff;
}

.btn-icon-tool.active img {
  opacity: 1;
}

#game-dialog-overlay button {
  height: auto;
}

#game-dialog-overlay .btn-tiny {
  background: var(--c-primary);
  color: #000;
}

.trade-code-display {
  background: var(--c-primary-dim);
  border: 1px dashed var(--c-primary);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 1.5em;
  padding: 15px;
  margin: 15px 0;
  user-select: text;
}

#btn-menu-login, #btn-menu-register {
  border: 1px solid var(--c-primary);
  color: #fff;
  font-size: 1em;
  padding: 6px 16px;
  border-radius: 0px;
  background: rgba(10, 16, 32, 0.8);
}

#btn-menu-login:hover, #btn-menu-register:hover {
  background: var(--c-primary) !important;
  color: #000 !important;
  border-color: var(--c-primary) !important;
}

/* =========================================
   BUTTONS
    ========================================= */

#controls-area {
  border: none;
  position: relative;
  z-index: 1200;
  flex-shrink: 0;
  border-radius: 0;
  padding: 15px 15px;
  width: 100%;
}

button:hover {
}

button.btn-location:hover {
  color: #000 !important;
  background: var(--terminal-dim);
}

.btn-location.visited::after, .btn-location.visited::before {
  background: #574b324d !important;
}

 #button-container-main-actions .btn-action-main.active, #button-container-main-actions .btn-action-main.btn-travel.active {
  background: transparent !important;
  color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  border: 1px solid var(--c-primary-dim) !important;
  box-shadow: none !important;
}

#button-container-main-actions .btn-action-main {
  margin-top: 0px;
  min-height: 46px;
  border-radius: 8px;
  font-size: 1.2em;
  border: none !important;
}

#button-container-main-actions .btn-action-main.btn-jobs {
  background: var(--c-primary) !important;
  color: #000 !important;
  border-color: var(--c-primary) !important;
}

#button-container-main-actions .btn-action-main:hover {
  box-shadow: var(--bevel-down) !important;
}

button.btn-location {
  position: relative;
  overflow: visible;
  overflow-wrap: break-word;
  background: transparent;
  border: none;
  font-size: 1em;
  grid-column: span 1;
  min-height: 48px;
  padding: 6px 8px;
  color: #000;
  border-radius: 3px;
  background: var(--c-primary);
  box-shadow: var(--bevel-amber);
}


button.btn-location.bnt-abflug {
  background: var(--c-bg-lighter);
  color: #fff !important;
  border: 1px solid #595959 !important;
  font-size: 0.9em !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  height: auto;
}

button.btn-location.bnt-abflug:hover {
  background: var(--c-primary) !important;
  color: #000 !important;
}

button.btn-location.bnt-abflug.guided-travel-target {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 1px rgba(255, 176, 0, 0.45), 0 0 14px rgba(255, 176, 0, 0.35) !important;
}

button.btn-location.btn-shop {
  background: #e7e7e7;
  color: #000;
  border-radius: 2px !important;
  box-shadow: none !important;
  height: 100%;
}

button.btn-location.btn-shop:hover {
  background: var(--c-primary);
}

.btn-cls-tab {
  border: none !important;
  font-size: 17px;
  margin-right: 10px;
  background: #000000;
  box-shadow: none !important;
  border-radius: 50% !important;
  width: 25px;
  height: 25px;
  line-height: 1.6em;
}

.btn-cls-tab:hover {
  color: #000 !important;
  background: #fff !important;
}

/* JOB BOARD */

.job-board .perk-name {
  font-size: 1em;
}

.job-board .perk-desc {
  font-size: 0.9em;
}

/* --- PROFIL & AVATAR STYLES --- */

#profile-visual {
  overflow: hidden;
  border-radius: 999px;
}

/* 1. DAS WIDGET (Oben Links) */

/* Das Mini-Bild Container */

.profile-name {
  color: var(--c-primary);
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 1.1em;
  text-shadow: 0 0 2px var(--c-primary-dim);
}

/* 2. DER EDITOR (Popup Content) */

/* Die Layer Bilder */

.avatar-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

/* Steuerungen */

.btn-arrow:hover {
  background: var(--c-primary);
  color: #000 !important;
  box-shadow: none;
}

.btn-arrow:active {
  box-shadow: none;
}

#profile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 4000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.profile-modal-box {
  width: 95%;
  max-width: 950px;
  background: var(--c-bg-light);
  border: 2px solid var(--c-border-color);
  box-shadow: 0 0 40px rgba(0, 0, 0, 1);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px;
  box-sizing: border-box;
  animation: popIn 0.3s ease-out;
  margin: auto;
  max-height: 95vh;
  overflow-y: auto;
  border-radius: 8px;
}

@keyframes popIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.avatar-preview-box {
  width: 200px;
  height: 260px;
  margin: 5px auto;
  background: #080c18;
  border: 1px solid var(--c-cyan);
  border-radius: 0px;
  position: relative;
  overflow: hidden;
}

.avatar-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}

.control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  padding: 5px 10px;
  height: 40px;
  border: none;
  z-index: 2;
}

.btn-arrow {
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 6%);
  border: 1px solid #fff;
  color: #fff;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 50% !important;
  font-size: 0.5em;
}

.control-label {
  color: #fff;
  font-size: 1.1em;
  cursor: pointer;
  flex-grow: 1;
  text-align: center;
  transition: color 0.2s;
  text-transform: uppercase;
}

.control-label:hover {
  color: #fff;
}

#prof-username {
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
  background: rgba(0, 216, 240, 0.03);
  border: 1px solid rgb(255 255 255);
  color: #fff;
  margin-bottom: 0px;
  /* text-transform: uppercase; */
}

.input-error {
  border-color: #ff3333 !important;
  animation: shakeInput 0.4s ease-in-out;
}

@keyframes shakeInput {
  0%,
  100% {
    transform: translateX(0);
  }
  25%,
  75% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
}

/* ACCORDION STYLES */

.acc-container {
  background: rgba(255, 255, 255, 0.05);
  border-top: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

/* Höhe wird per JS (toggleAccordion) auf die volle Inhaltshöhe animiert */
.acc-container.open {
  position: relative;
  top: -6px;
  border: none;
}

.acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 5px;
  padding: 10px;
}

.acc-item {
  width: 70px;
  height: 100px;
  background: rgb(0 216 240 / 30%);
  position: relative;
  cursor: pointer;
}

.acc-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Status: Selected */

.acc-item.selected {
  border: 2px solid var(--c-primary);
  box-shadow: 0 0 5px var(--c-primary);
}

/* Status: Locked */

.acc-item.locked {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(1);
}

.acc-item.locked::after {
  content: "🔒";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}

/* Status: Unlocked (kleiner grüner Punkt oder Haken) */

.acc-item.unlocked:not(.selected)::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  background: var(--c-success);
  border-radius: 50%;
  box-shadow: 0 0 3px var(--c-success);
}

/* Status: Besonderes Teil (per Erfolg/Item freischaltbar) */

.acc-item.special.unlocked {
  background: rgb(255 176 0 / 40%);
}

.acc-item.special.unlocked:not(.selected)::after {
  content: "★";
  width: auto;
  height: auto;
  bottom: 1px;
  right: 3px;
  background: none;
  box-shadow: none;
  color: var(--c-primary);
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 0 3px #000;
}

/* Tooltip dazu (gleicher Look wie .btn-icon-tool), per JS fixed positioniert */
#avatar-unlock-tip {
  display: none;
  position: fixed;
  z-index: 5000;
  max-width: 240px;
  background: #0a1020;
  border: 1px solid #fff;
  color: #fff;
  padding: 3px 8px;
  font-size: 0.85em;
  line-height: 1.3;
  pointer-events: none;
}

#avatar-unlock-tip b {
  color: var(--c-primary);
}

.profile-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 20px;
  align-items: start;
  width: 100%;
}

.editor-col-left {
  padding-right: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.editor-col-right {
  max-height: 450px;
  overflow-y: auto;
  padding-right: 5px;
}

/* Scrollbar Design für die rechte Spalte */

.editor-col-right::-webkit-scrollbar {
  width: 6px;
}

.editor-col-right::-webkit-scrollbar-thumb {
  background: rgba(0, 216, 240, 0.1);
  border-radius: 3px;
}

.editor-col-right::-webkit-scrollbar-track {
  background: rgba(0, 216, 240, 0.03);
}

.avatar-preview-box.large-preview {
  width: 171px;
  height: 240px;
  border: 1px solid var(--c-border-color);
  background: #080c18;
  position: relative;
  overflow: hidden;
}

/* --- MEMORY OVERLAY --- */

#memory-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 3000;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 88px;
  padding-bottom: 20px;
}

/* Wrapper: füllt den Platz zwischen Header und Footer */

.memory-grid-fill {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(5px, 1.2vmin, 12px);
  aspect-ratio: 1;
  height: 100%;
  width: 43%;
  max-width: 94vw;
  max-height: 94vw;
  margin: 0;
  flex-shrink: 0;
}

/* Hardmode: 12 Paare (6x4) – gleiche Höhe wie das normale 4x4-Board, dafür breiter */

.memory-grid.memory-grid-hard {
  grid-template-columns: repeat(6, 1fr);
  aspect-ratio: 3 / 2;
  width: 64.5%;
  max-width: min(94vw, calc((85dvh - 220px) * 1.5));
  max-height: none;
  gap: clamp(4px, 1vmin, 10px);
}

/* Die Karten */

.memory-card {
  aspect-ratio: 1;
  background: rgba(0, 216, 240, 0.06);
  border: 1px solid var(--c-gray-light);
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.1s, border-color 0.2s;
  box-shadow: 0 0 8px #000;
  border-radius: 4px;
}

.memory-card:hover {
  border-color: var(--c-primary);
  z-index: 10;
}

.memory-card.revealed {
  border-color: #fff;
  cursor: default;
  transform: none;
}

.memory-card.matched {
  border-color: var(--c-success);
  opacity: 0.4;
  cursor: default;
  transform: none;
  filter: grayscale(100%);
}

/* Die Rückseite (Muster) */

.memory-back {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient( 45deg, #111, #111 8px, #1a1a1a 8px, #1a1a1a 16px );
}

/* Die Vorderseite (Bild) */

.memory-front {
  width: 100%;
  height: 100%;
  display: none;
  object-fit: fill;
}

.memory-header-bar {
  border-color: var(--c-primary) !important;
  width: 50% !important;
  max-width: none !important;
  margin: 0 auto 4px auto;
  text-align: center;
  justify-content: center;
  flex-shrink: 0;
  border-bottom: none !important;
  flex: 1 1 0;
}

.memory-stats {
  color: var(--c-primary);
}

.memory-hint {
  color: #fff;
  font-size: 1em;
  margin-bottom: 4px;
  text-align: center;
  flex-shrink: 0;
  flex: 1 1 0;
}

.memory-hardmode-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.7em;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--c-danger);
  border: 1px solid var(--c-danger);
  border-radius: 3px;
  vertical-align: middle;
  top: -2px;
  position: relative;
}

/* --- HARDMODE-ABFRAGE (Popup) --- */

.hardmode-prompt {
  text-align: left;
  line-height: 1.5;
  font-size: 0.9em;
  margin-top: -20px;
}

.hardmode-prompt .hardmode-note {
  text-align: center;
  font-size: 0.85em;
  opacity: 0.75;
  margin: 0;
}

.btn-hardmode-yes {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--c-primary-dim) !important;
}

.btn-hardmode-yes .btn-hardmode-sub {
  font-size: 0.8em;
  letter-spacing: 0px;
  white-space: normal;
  margin-top: 4px;
  padding: 0 8px;
}

button.btn-hardmode-no {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  color: #000 !important;
  padding: 15px 0px !important;
  font-size: 1.1em !important;
  background: var(--c-primary) !important;
  border: none !important;
  box-shadow: var(--bevel-amber) !important;
}

button.btn-hardmode-no .btn-hardmode-sub {
  font-size: 0.8em;
  letter-spacing: 0px;
}

.memory-result-box {
  text-align: center;
  animation: fadeIn 0.5s;
}

.memory-result-title {
  font-size: 2em;
  margin-bottom: 10px;
}

.memory-result-fail {
  color: var(--c-danger);
}

.memory-result-text {
  color: #fff;
}

.memory-card.revealed .memory-front, .memory-card.matched .memory-front {
  display: block;
}

.memory-card.revealed .memory-back, .memory-card.matched .memory-back {
  display: none;
}

/* Header anpassen */

#memory-overlay .jigsaw-header {
  width: 100%;
  max-width: none;
  display: flex;
  justify-content: center;
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: 10px;
  margin-bottom: 5px;
  flex-shrink: 0;
  width: 100% !important;
  /* white-space: nowrap; */
  gap: 20px;
}

.text-encounter {
  color: var(--c-primary);
}

/* =========================================
   INTRO / COMIC
    ========================================= */

#intro-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 25%, #131a33 0%, var(--c-bg) 60%, #05070f 100%);
  /* muss ueber #top_bar (9999) liegen, sonst schneidet die Kopfleiste
     das erste Panel an */
  z-index: 10000;
  overflow: hidden;
}

#comic-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 14px;
  gap: 12px;
}

.comic-page {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "p1 p1 p1 p1 p1 p1 p1 p2 p2 p2 p2 p2"
    "p3 p3 p3 p3 p3 p3 p3 p4 p4 p4 p4 p4"
    "p5 p5 p5 p5 p6 p6 p6 p6 p6 p6 p6 p6";
  cursor: pointer;
  overflow: hidden;
}

/* Der Klick zum Aufdecken haengt auf der ganzen Comicseite. Ohne das hier
   legt Mobile beim Tippen seinen hellen Tap-Highlight ueber den kompletten
   Container -- es sieht aus, als wuerden bei jedem Schritt alle Panels
   kurz aufleuchten. Am Desktop (Maus) gibt es den Effekt nicht. */

#intro-overlay,
.comic-page,
.comic-panel,
.comic-panel-inner,
#comic-title-card {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Ein Panel existiert von Anfang an (damit das Raster steht), ist aber leer,
   bis es per WEITER aufgedeckt wird. */

.comic-panel {
  position: relative;
  border: 2px solid var(--c-border-color);
  border-radius: 3px;
  background: rgba(4, 6, 14, 0.55);
  overflow: hidden;
  min-height: 0;
}

.comic-panel::after {
  content: "";
}

.comic-panel-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  opacity: 0;
  transform: scale(0.94) rotate(-0.6deg);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
  background-size: cover;
  background-position: center center;
}

.comic-panel.revealed {
  border-color: #fff;
  background: var(--c-panel-bg);
}

.comic-panel.revealed::after {
  opacity: 0;
}

.comic-panel.revealed .comic-panel-inner {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Establishing-Shot: Hintergrundbild + Erzaehlkasten oben links */

.comic-panel-photo .comic-panel-inner {
  align-items: flex-end;
  justify-content: flex-start;
  image-rendering: pixelated;
}

.comic-panel-photo .comic-panel-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 24, 0.1) 0%, rgba(8, 12, 24, 0.25) 45%, rgba(8, 12, 24, 0.8) 100%);
}

.comic-caption {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  max-width: 96%;
  background: #fff;
  color: #12100a;
  padding: 8px 12px;
  font-size: 1em;
  line-height: 1.15;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}

.comic-caption strong {
  letter-spacing: 0.04em;
}

/* Sprecher: Portrait unten, Sprechblase darueber */

.comic-speaker {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  height: 100%;
  min-width: 0;
  flex: 1 1 0;
  gap: 10px;
}

.comic-speaker-flip {
  flex-direction: row-reverse;
}

.comic-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  flex: 0 0 auto;
  max-width: 42%;
}

/* Zweiter Sprecher im Panel: haelt seinen Platz von Anfang an frei (sonst
   springt das Layout beim Einblenden) und taucht erst per Klick auf. */

.comic-speaker-late {
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.comic-speaker-late.revealed {
  opacity: 1;
  transform: none;
}

.comic-bubble {
  position: relative;
  flex: 1 1 auto;
  align-self: flex-start;
  min-width: 0;
  background: #ffffff;
  color: #12100a;
  border: 2px solid #000;
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}

.comic-bubble::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 18px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 4px solid transparent;
  border-top: 14px solid #000;
  display: none;
}

.comic-bubble::before {
  content: "";
  position: absolute;
  bottom: -19px;
  left: 21px;
  z-index: 1;
  width: 0;
  height: 0;
  border-right: 25px solid transparent;
  border-left: 3px solid transparent;
  border-top: 20px solid #ffffff;
}

.comic-speaker-flip .comic-bubble::after {
  left: auto;
  right: 18px;
  border-left: 4px solid transparent;
  border-right: 14px solid transparent;
}

.comic-speaker-flip .comic-bubble::before {
  left: auto;
  right: 21px;
  border-right: 3px solid transparent;
  border-left: 21px solid transparent;
}

.comic-portrait-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.comic-portrait {
  height: 210px;
  width: auto;
  /* max-width: 100%; */
  image-rendering: pixelated;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.55));
}

.comic-speaker-flip .comic-portrait,
.comic-speaker-flip .comic-avatar {
  transform: scaleX(-1);
}

/* Spieler-Avatar: dieselben Layer wie ueberall, nur in Portraitgroesse */

.comic-avatar {
  position: relative;
  display: flex;
  height: 100%;
  transform: scaleX(-1) scale(1.3) !important;
  top: 31px;
}

.comic-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.comic-avatar .comic-avatar-base {
  position: relative;
  inset: auto;
  height: 100%;
  width: auto;
}

.comic-avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-frame-ghost);
  color: var(--c-gray-light);
  font-size: 2em;
}

.comic-speaker-name {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 0.66em;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-cyan);
  text-shadow: 0 1px 0 #000;
}

/* Steuerleiste */

#comic-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.comic-progress {
  font-size: 0.9em;
  letter-spacing: 0.14em;
  color: var(--c-gray-light);
  display: none;
}

.comic-next-btn,
.comic-skip-btn {
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.comic-next-btn {
  background: var(--c-primary);
  color: #12100a;
  border: 1px solid #000;
  padding: 9px 22px;
  font-size: 1.1em;
  box-shadow: var(--bevel-amber), 3px 3px 0 rgba(0, 0, 0, 0.55);
  letter-spacing: 1px;
}

.comic-next-btn:hover {
  filter: brightness(1.12);
  background: var(--c-primary);
  color: #000;
  box-shadow: none;
}

.comic-next-btn:active {
  box-shadow: var(--bevel-amber-down);
  transform: translate(2px, 2px);
}

.comic-skip-btn {
  background: transparent;
  color: var(--c-gray-light);
  border: 1px solid var(--c-gray);
  padding: 8px 14px;
  font-size: 0.85em;
  display: none;
}

.comic-skip-btn:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
}

/* Schmale Screens: Panels mit zwei Sprechern bekommen eine eigene, volle
   Zeile -- nebeneinander wird sonst jede Sprechblase ein Wortturm. */

@media (max-width: 900px) {
  #comic-intro {
    padding: 12px 12px 10px;
  }

  .comic-page {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, minmax(185px, 1fr));
    grid-template-areas:
      "p1 p1"
      "p2 p2"
      "p3 p3"
      "p4 p5"
      "p6 p6";
    overflow-y: auto;
  }

  .comic-bubble {
    font-size: 0.85em;
    padding: 6px 9px;
  }

  .comic-caption {
    font-size: 0.9em;
  }
}

@media (max-width: 700px) {
  .comic-page {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, auto) minmax(180px, auto) minmax(360px, auto) minmax(180px, auto) minmax(180px, auto) minmax(360px, auto);
    grid-template-areas:
      "p1"
      "p2"
      "p3"
      "p4"
      "p5"
      "p6";
  }

  /* Zwei Sprecher untereinander statt nebeneinander. */

  .comic-panel-duo .comic-panel-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .comic-panel-duo .comic-speaker {
    height: auto;
    min-height: 0;
  }

  .comic-panel-duo .comic-speaker-flip {
    justify-content: flex-start;
  }

  .comic-speaker-name {
    font-size: 0.62em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comic-panel-inner {
    transition: opacity 0.2s linear;
    transform: none;
  }

  .comic-panel.revealed .comic-panel-inner {
    transform: none;
  }

  .comic-speaker-late {
    transition: opacity 0.2s linear;
    transform: none;
  }

  .comic-speaker-late.revealed {
    transform: none;
  }
}

/* =========================================
   INTRO / TITELKARTE
   Laeuft nach der Comicseite, vor der Tutorial-Abfrage.
   Der ganze Ablauf steckt in den animation-delays unten.
    ========================================= */

#comic-intro {
  transition: opacity 0.45s ease;
}

#comic-intro.comic-intro-hidden {
  opacity: 0;
  pointer-events: none;
}

#comic-title-card {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 24px;
  cursor: pointer;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, #16203f 0%, #080c18 55%, #03050c 100%);
}

#comic-title-card.visible {
  display: flex;
}

/* CRT-Flimmern ueber der ganzen Karte */

#comic-title-card::after {
  display: "";
}

/* Der Lichtbalken, der beim Titeleinschlag einmal durchwischt */

#comic-title-card::before {
  content: "";
  position: absolute;
  left: -30%;
  top: 0;
  width: 30%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient( 100deg, transparent 0%, rgba(255, 176, 0, 0.14) 45%, rgba(255, 235, 190, 0.3) 50%, rgba(255, 176, 0, 0.14) 55%, transparent 100% );
}

#comic-title-card.playing::before {
  animation: ctcSweep 1.1s ease-out 1.15s 1;
}

@keyframes ctcSweep {
  0% {
    left: -30%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    left: 110%;
    opacity: 0;
  }
}

/* Die Titelplatte: zieht sich erst als Linie auf, dann in die Hoehe */

.ctc-plate {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(1080px, 100%);
  padding: clamp(16px, 3.2vh, 34px) clamp(18px, 3vw, 46px);
  text-align: center;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

#comic-title-card.playing .ctc-plate {
  animation: ctcPlate 0.75s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

@keyframes ctcPlate {
  0% {
    transform: scaleX(0.04) scaleY(0.02);
    opacity: 0;
  }
  35% {
    transform: scaleX(1) scaleY(0.02);
    opacity: 1;
  }
  100% {
    transform: scaleX(1) scaleY(1);
    opacity: 1;
  }
}

.ctc-eyebrow {
  font-size: clamp(0.75rem, 1.5vw, 1.05rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--c-cyan);
  opacity: 0;
}

#comic-title-card.playing .ctc-eyebrow {
  animation: ctcFadeUp 0.5s ease-out 0.55s both;
}

.ctc-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

.ctc-line {
  display: block;
  opacity: 0;
  color: var(--c-primary);
  white-space: nowrap;
}

/* Zeile 1 + 2 fuehren hin, Zeile 3 ist die Pointe -> deutlich groesser */

.ctc-line-a {
  font-size: clamp(1rem, 3vw, 2.3rem);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--ui-text);
  text-shadow: 0 0 12px rgba(160, 200, 255, 0.35);
}

.ctc-line-b {
  font-size: clamp(0.85rem, 2.2vw, 1.7rem);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: #fff;
  text-shadow: 0 0 14px rgba(0, 216, 210, 0.5);
  margin-bottom: -10px;
}

.ctc-line-c {
  position: relative;
  font-size: clamp(1.7rem, 6.6vw, 5.2rem);
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(255, 176, 0, 0.85), 0 0 34px rgba(255, 120, 0, 0.5), 0 4px 0 rgba(120, 60, 0, 0.55);
}

#comic-title-card.playing .ctc-line-a {
  animation: ctcSlam 0.45s cubic-bezier(0.15, 1.35, 0.4, 1) 0.75s both;
}

#comic-title-card.playing .ctc-line-b {
  animation: ctcSlam 0.45s cubic-bezier(0.15, 1.35, 0.4, 1) 0.98s both;
}

#comic-title-card.playing .ctc-line-c {
  animation: ctcSlam 0.55s cubic-bezier(0.15, 1.4, 0.35, 1) 1.2s both;
}

@keyframes ctcSlam {
  0% {
    opacity: 0;
    transform: scale(1.7);
    filter: blur(7px);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes ctcPulse {
  0%,
  100% {
    text-shadow: 0 0 10px rgba(255, 176, 0, 0.85), 0 0 34px rgba(255, 120, 0, 0.5), 0 4px 0 rgba(120, 60, 0, 0.55);
  }
  50% {
    text-shadow: 0 0 16px rgba(255, 200, 90, 1), 0 0 52px rgba(255, 140, 0, 0.7), 0 4px 0 rgba(120, 60, 0, 0.55);
  }
}

/* RGB-Versatz auf der Pointe: zwei versetzte Kopien, die sich einrucken */

.ctc-line-c::before,
.ctc-line-c::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  text-shadow: none;
}

.ctc-line-c::before {
  color: #ff2f6d;
}

.ctc-line-c::after {
  color: var(--c-cyan);
}

#comic-title-card.playing .ctc-line-c::before {
  animation: ctcSplitLeft 0.8s ease-out 1.2s both;
}

#comic-title-card.playing .ctc-line-c::after {
  animation: ctcSplitRight 0.8s ease-out 1.2s both;
}

@keyframes ctcSplitLeft {
  0% {
    opacity: 0.85;
    transform: translate(-16px, -4px);
  }
  55% {
    opacity: 0.6;
    transform: translate(7px, 3px);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}

@keyframes ctcSplitRight {
  0% {
    opacity: 0.85;
    transform: translate(16px, 4px);
  }
  55% {
    opacity: 0.6;
    transform: translate(-7px, -3px);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}

/* Untertitel wird getippt -- VT323 ist dicktengleich, daher ch-Breite */

.ctc-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 6px;
  font-size: clamp(0.8rem, 1.9vw, 1.35rem);
  letter-spacing: 0.06em;
  color: #fff;
  opacity: 0;
}

#comic-title-card.playing .ctc-sub {
  animation: ctcFadeUp 0.3s ease-out 1.85s both;
}

.ctc-sub-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  vertical-align: bottom;
}

#comic-title-card.playing .ctc-sub-text {
  animation: ctcType 1.35s steps(34, end) 1.95s both;
}

@keyframes ctcType {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.ctc-caret {
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  background: var(--c-primary);
  opacity: 0;
  display: none;
}

#comic-title-card.playing .ctc-caret {
  animation: ctcCaret 0.9s steps(1, end) 1.95s infinite;
}

@keyframes ctcCaret {
  0%,
  49% {
    opacity: 0.9;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.ctc-start {
  position: relative;
  /* z-index: 3; */
  opacity: 0;
}

#comic-title-card.playing .ctc-start {
  animation: ctcFadeUp 0.45s ease-out 3.5s both;
}

@keyframes ctcFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 700px) {
  #comic-title-card {
    gap: 20px;
  }

  .ctc-line-a,
  .ctc-line-b,
  .ctc-line-c {
    white-space: normal;
  }

  .ctc-line-b {
    letter-spacing: 0.35em;
    text-indent: 0.35em;
  }
}

/* Ohne Bewegung: alles einfach da, nur der Untertitel blendet auf */

@media (prefers-reduced-motion: reduce) {
  #comic-title-card.playing .ctc-plate,
  #comic-title-card.playing .ctc-eyebrow,
  #comic-title-card.playing .ctc-line-a,
  #comic-title-card.playing .ctc-line-b,
  #comic-title-card.playing .ctc-line-c,
  #comic-title-card.playing .ctc-sub,
  #comic-title-card.playing .ctc-start {
    animation: ctcFadeUp 0.3s ease-out both;
  }

  #comic-title-card.playing .ctc-sub-text {
    animation: none;
    width: auto;
  }

  #comic-title-card.playing::before,
  #comic-title-card.playing .ctc-line-c::before,
  #comic-title-card.playing .ctc-line-c::after,
  #comic-title-card.playing .ctc-caret {
    animation: none;
  }
}

/* =========================================
   COSMETIC UNLOCK TOAST (Avatar Teile)
    ========================================= */

.cosmetic-toast {
  position: fixed;
  bottom: 20px;
  right: -400px;
  width: 320px;
  background: rgba(10, 10, 10, 0.95);
  border: 2px solid var(--c-success);
  box-shadow: 0 0 20px rgba(50, 255, 50, 0.2);
  display: flex;
  align-items: center;
  padding: 10px;
  z-index: 99999;
  transition: right 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-family: "VT323", monospace;
}

.cosmetic-toast.show {
  right: 20px;
}

.cosmetic-img-container {
  width: 60px;
  height: 60px;
  background: #080c18;
  border: 1px solid rgba(0, 216, 240, 0.12);
  margin-right: 15px;
  position: relative;
  flex-shrink: 0;
}

.cosmetic-img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cosmetic-text {
  display: flex;
  flex-direction: column;
}

.cosmetic-title {
  color: var(--c-success);
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 2px;
}

.cosmetic-desc {
  color: #eee;
  font-size: 1em;
}

button.popup_close {
  font-size: 1em;
  color: #000 !important;
  padding: 10px;
  border: none;
  position: absolute;
  right: 0px;
  top: 0px;
  border-radius: 0px 0px 0px 5px;
  background: var(--c-primary);
}

button.popup_close:hover {
  box-shadow: none;
  color: #000;
  background: var(--c-primary-dim);
}

#profile-iframe-overlay .file-box {
  box-shadow: none;
}

#profile-wrapper::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;
}

#profile-wrapper h1, #profile-wrapper h2, #profile-wrapper h3, #profile-wrapper h4 {
  font-weight: 400;
  color: #fff;
  border-bottom: 1px solid var(--c-border-color);
  padding-bottom: 5px;
  margin-top: 15px;
  margin-bottom: 5px;
}

.prof-header {
  border-bottom: 1px solid var(--c-border-color);
  padding-bottom: 15px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.prof-title {
  font-size: 2em;
  color: var(--c-primary);
  text-transform: uppercase;
}

.prof-subtitle {
  color: #9f9f9f;
}

.prof-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.prof-left {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.prof-left button.btn-location {
  margin-top: 10px;
  background: var(--c-primary) !important;
  color: #000 !important;
}

#prof_left_details {
  flex: 1;
}

#prof_left_details h3 {
  margin-top: 25px;
}

.prof-right {
  flex: 1;
  min-width: 300px;
}

.big-avatar-frame {
  width: 159px;
  height: 234px;
  position: relative;
  overflow: hidden;
  margin-right: 25px;
  border-radius: 12px;
}

.big-avatar-frame img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-border-color);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
}

.stat-val {
  color: #fff;
  font-size: 1.2em;
}

.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
}

.ach-badge {
  aspect-ratio: 1;
  background: #232323;
  /* border: 1px solid var(--c-border-color); */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  cursor: help;
  position: relative;
}

.ach-badge:hover {
  border-color: var(--c-gray-light);
  background: #000;
}

.ach-badge:hover .ach-badge-inner,
#card-grid-container .tc-card:hover .ach-badge-inner {
  display: block;
}

/* Sammelkarten im Profil: Tooltip darf über die Karte hinausragen,
   das Bild clippt .tc-img-container selbst. */
#card-grid-container .tc-card {
  overflow: visible;
  font-size: 24px;
}

.ach-badge-inner {
  display: none;
  position: absolute;
  bottom: 110%;
  left: -1px;
  background: #000000;
  border: 1px solid #6f6f6f;
  color: #fff;
  padding: 2px 5px;
  font-size: 0.9em;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}

.ach-badge-inner.align-right {
  left: auto;
  right: -1px;
}

.btn-back {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background: var(--c-primary);
  color: #000;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}

.btn-back:hover {
  background: #fff;
}

.btn-location.btn-back {
  margin-top: 0px;
  font-weight: 400;
  border-radius: 2px !important;
  box-shadow: none !important;
  background: #595959 !important;
  color: #fff!important;
  height: 100%;
}

.btn-location.btn-back:hover {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}

#profile_wrap_ingame {
  flex-wrap: wrap;
  padding: 0;
  border-radius: 0;
  font-size: 0.9em;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  /* flex: 1; */
  color: #a7bac4;
  /* text-transform: uppercase; */
  width: 30%;
}

#monitor-audio-btn {
  margin-right: 0px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #777;
  padding: 2px 5px;
  border-radius: 8px !important;
}

#monitor-audio-btn img {
  display: block;
  width: 23px;
  height: 23px;
  image-rendering: pixelated;
}

#monitor-audio-btn:hover {
  box-shadow: none;
}

/* =========================================
   FREQUENCY MINIGAME STYLES
    ========================================= */

/* Der Hauptcontainer */

.freq-modal-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* --- LINKE SPALTE (ZIEL) --- */

.freq-sidebar {
  flex: 0 0 240px;
  text-align: center;
  padding: 15px;
  margin-top: 20px;
}

.freq-label {
  color: var(--c-primary);
  font-size: 1em;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.freq-target-name {
  color: #fff;
  font-size: 1.3em;
  margin-bottom: 15px;
  line-height: 1.2;
  text-shadow: 0 0 5px #000;
}

.freq-cover-wrapper {
  position: relative;
  margin-bottom: 15px;
  width: 100%;
}

.freq-cover-img {
  width: 100%;
  height: auto;
  border: 1px solid var(--c-border-color);
  box-shadow: 0 0 15px #000;
  display: block;
}

.freq-scanlines-static {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.3) 3px );
  pointer-events: none;
}

.freq-info {
  color: var(--c-primary);
  font-size: 0.9em;
  padding-top: 10px;
}

/* --- RECHTE SPALTE (MODULATOR) --- */

.freq-interface {
  flex: 1;
  min-width: 300px;
  max-width: 100%;
}

.freq-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}

.freq-header .hl-streak-bar {
  margin-bottom: 0;
}

/* --- DER BILDSCHIRM (RESPONSIVE) --- */

.freq-screen-container {
  position: relative;
  width: 100%;
  aspect-ratio: 540 / 420;
  border: 2px solid var(--c-border-color);
  background: #080c18;
  overflow: hidden;
}

/* Canvas und Layer müssen sich skalieren */

#noise-canvas, #freq-img-layer, .freq-scanlines-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#noise-canvas {
  z-index: 20;
  pointer-events: none;
  opacity: 0.8;
}

.freq-scanlines-overlay {
  background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.5) 3px );
  z-index: 25;
  pointer-events: none;
}

#freq-img-layer {
  z-index: 10;
}

#freq-img-layer img {
  width: 100%;
  height: 100%;
}

/* --- CONTROLS --- */

.freq-controls {
  margin-top: 15px;
  width: 100%;
}

.freq-slider {
  width: 100%;
  cursor: pointer;
}

/* Frequency slider: clearer track + larger handle */

.freq-controls input[type="range"].retro-slider::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent;
  border: 1px solid var(--c-primary);
}

.freq-controls input[type="range"].retro-slider::-webkit-slider-thumb {
  width: 20px;
  height: 30px;
  margin-top: -12px;
  border: 1px solid #00161a;
}

.freq-controls input[type="range"].retro-slider::-moz-range-track {
  height: 8px;
  background: transparent;
  border: 1px solid var(--c-primary);
}

.freq-controls input[type="range"].retro-slider::-moz-range-thumb {
  width: 20px;
  height: 30px;
  border: 1px solid #00161a;
}

.freq-status-text {
  margin: 10px 0;
  color: var(--c-gray-light);
  height: 20px;
  text-align: center;
}

/* =========================================
   MINIGAME-BUTTONLEISTE (global einheitlich)
   Referenz-Look: FRECQUENCY (SIGNAL LOGGEN / ABBRECHEN)
   Markup: <div class="minigame-buttons">
             <button class="btn-action-main">PRIMÄR</button>
             <button class="btn-action-main btn-abort">ABBRECHEN</button>
           </div>
  ========================================= */

.minigame-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  flex-shrink: 0;
}

/* Primär (Amber, flach – wie SIGNAL LOGGEN) */
.minigame-buttons .btn-action-main {
  margin-top: 0;
  padding: 5px 10px;
  font-size: 1em;
  min-height: 42px;
  border-radius: 3px;
  background: var(--c-primary) !important;
  border: 1px solid var(--c-primary) !important;
  color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  min-width: 170px;
}

.minigame-buttons .btn-action-main:hover {
  background: #ffc040 !important;
  border-color: #ffc040 !important;
  color: #000 !important;
  box-shadow: 0 0 25px rgba(240, 160, 48, 0.3) !important;
}

/* Sekundär / ABBRECHEN (neutral – bleibt auch beim Hover neutral) */
.minigame-buttons .btn-action-main.btn-abort {
  background: var(--c-bg-lighter) !important;
  border: 1px solid var(--c-border-color) !important;
  color: #d9d9d9 !important;
  box-shadow: none !important;
}

.minigame-buttons .btn-action-main.btn-abort:hover {
  background: var(--c-bg-light) !important;
  border-color: var(--c-border-color) !important;
  color: #fff !important;
  box-shadow: none !important;
  width: auto;
}

.minigame-buttons .btn-action-main:active {
  box-shadow: var(--bevel-amber-down) !important;
}

.minigame-buttons .btn-action-main.btn-abort:active {
  box-shadow: var(--bevel-down) !important;
}

/* Jigsaw-Overlay: Leiste muss über dem Board liegen */
#jigsaw-overlay .minigame-buttons {
  position: relative;
  z-index: 2001;
}

/* =========================================
   BOSS KAMPF
  ========================================= */

.boss-ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
}

.boss-ui-element {
  pointer-events: auto;
}

/* Das eigentliche Spielfeld (wird per JS verschoben) */

#boss-overlay {
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #080c18;
  z-index: 9999;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  isolation: isolate;
}

/* Das eigentliche Spielfeld */

#boss-world {
  background-image: url(img/assets/boss/generic/grass1.png) !important;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.2s ease-out;
  transform-origin: 0 0;
  background-repeat: repeat;
  background-size: var(--boss-tile, 64px) var(--boss-tile, 64px);
}

/* Die Kachelgröße kommt aus --boss-tile (per JS aus bossState.tileSize gesetzt,
   64px am Desktop / 48px mobil). Feste Pixelwerte würden hier die per JS
   berechneten Positionen sprengen - die Kacheln überlappen dann. */

.boss-cell {
  /* background-image: url(img/assets/boss/generic/grass.jpg); */
  background-size: 100%;
  width: var(--boss-tile, 64px);
  height: var(--boss-tile, 64px);
  position: absolute;
  box-sizing: border-box;
}

/* --- ENTITIES (Bewegung) --- */

.boss-entity {
  width: var(--boss-tile, 64px);
  height: var(--boss-tile, 64px);
  position: absolute;
  transition: top 0.1s linear, left 0.1s linear;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 10;
}

/* --- YIKES! ANIMATIONEN --- */

/* 1. Wackeln / Vibrieren */

@keyframes shakeBoss {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

.boss-shock {
  animation: shakeBoss 0.5s;
}

/* 2. Sprechblase */

.boss-speech-bubble {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #000;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 1.2em;
  white-space: nowrap;
  border: 2px solid #000;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s, top 0.2s;
  pointer-events: none;
  font-family: "VT323", monospace;
}

.boss-speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* Sichtbar machen */

.boss-shock .boss-speech-bubble {
  opacity: 1;
  top: -50px;
}

/* Z-Index Hierarchie (Boss über Gegnern) */

.entity-potion {
  z-index: 5;
}

.entity-ghost {
  z-index: 20;
}

.entity-boss {
  z-index: 30;
}

.entity-player {
  z-index: 40;
  width: 46px;
}

.boss-enemy {
  background-color: transparent;
}

/* Der Boss wird eingesaugt */

@keyframes boss-capture-spin {
  0% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  30% {
    transform: scale(1.4) rotate(45deg);
    filter: brightness(2) hue-rotate(90deg);
  }
  100% {
    transform: scale(0) rotate(720deg);
    opacity: 0;
  }
}

.boss-captured {
  animation: boss-capture-spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  z-index: 100 !important;
}

/* Der Spieler jubelt (kleiner Hopser) */

@keyframes player-victory-hop {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px) scale(1.2);
  }
}

.player-victory {
  animation: player-victory-hop 0.5s ease-in-out infinite;
  z-index: 101 !important;
}

/* Bildschirm-Blitz */

.boss-capture-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  pointer-events: none;
  animation: flash-screen 0.8s ease-out;
  z-index: 999;
}

@keyframes flash-screen {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

/* --- BOSS FÄHIGKEITEN --- */

/* 1. LASER */

.boss-laser-beam {
  position: absolute;
  background: rgba(255, 0, 0, 0.7);
  z-index: 90;
  pointer-events: none;
  box-shadow: 0 0 10px red;
  animation: laser-flash 0.3s forwards;
}

@keyframes laser-flash {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 2. FALLE (Trapper) */

.boss-trap {
  background: radial-gradient(circle, #000000 20%, transparent 70%);
  border: 1px dashed #fff;
  border-radius: 50%;
  animation: trap-pulse 1s infinite;
}

@keyframes trap-pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.7;
  }
}

/* 3. TELEPORT EFFEKT */

.boss-teleporting {
  animation: teleport-blink 0.5s linear;
}

@keyframes teleport-blink {
  0% {
    transform: scale(1);
    filter: invert(0);
  }
  50% {
    transform: scale(0.1);
    filter: invert(1);
  }
  100% {
    transform: scale(1);
    filter: invert(0);
  }
}

/* Anzeige der Fähigkeit unter dem Namen */

.boss-ability-tag {
  font-size: 0.7em;
  color: #ffff00;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: -15px;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 10;
  display: none;
}

/* --- BOSS HUD LEISTE (oben) --- */

/* Exakt eine Kachel hoch (--boss-tile), durchgehend über die volle Breite.
   Die Kamera schiebt das Spielfeld darunter. */

#boss-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--boss-tile, 64px);
  z-index: 200;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 0 12px;
  overflow: hidden;
  font-family: var(--font-main);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 22, 49, 0.96), rgba(8, 12, 24, 0.96));
  border-bottom: 1px solid var(--c-border-color);
  box-shadow: none;
}

.boss-hud-group {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.boss-hud-mod {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 12px;
  min-width: 0;
}

.boss-hud-mod + .boss-hud-mod {
  border-left: 1px solid var(--hairline);
}

.boss-hud-label {
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
  font-size: 0.8em;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 6px var(--c-cyan-glow);
  white-space: nowrap;
}

.boss-hud-key {
  padding: 1px 6px 2px;
  border: 1px solid var(--c-primary-dim);
  border-radius: 3px;
  background: rgba(255, 176, 0, 0.12);
  /* box-shadow: var(--bevel-amber); */
  color: #fff;
  font-size: 0.85em;
  letter-spacing: 1px;
  text-shadow: none;
}

.boss-hud-slots {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-height: 30px;
}

#boss-topbar .boss-potion.hud, #boss-topbar .boss-powerup.hud {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  transform: none;
}

/* Zählform (ein Icon + ×N) statt einer Icon-Reihe - nur wo der Platz knapp ist */

.boss-hud-count {
  display: none;
  color: var(--c-primary);
  line-height: 1;
  white-space: nowrap;
}

.boss-hud-empty {
  opacity: 0.18;
  filter: grayscale(1);
}

#boss-lives img {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  animation: none !important;
  background-size: contain;
}

/* Aufgesammeltes Beweis-Item */

.boss-hud-item {
  max-width: 260px;
  transition: background 0.25s, box-shadow 0.25s;
}

.boss-hud-item .boss-hud-label {
  color: var(--c-gray-light);
  text-shadow: none;
  transition: color 0.25s, text-shadow 0.25s;
}

.boss-hud-item .boss-hud-slots {
  gap: 8px;
  opacity: 0.4;
  filter: grayscale(1);
  transition: opacity 0.25s, filter 0.25s;
}

.boss-hud-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  font-size: 1.1em;
  line-height: 1;
  color: var(--ui-text-dim);
}

.boss-hud-item-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.boss-hud-item-name {
  color: var(--ui-text-dim);
  font-size: 0.9em;
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.25s, text-shadow 0.25s;
}

.boss-hud-item.collected {
  background: linear-gradient(180deg, rgba(255, 176, 0, 0.14), rgba(255, 176, 0, 0));
  box-shadow: inset 0 -2px 0 var(--c-primary);
}

.boss-hud-item.collected .boss-hud-label {
  color: var(--c-primary);
  text-shadow: var(--glow-amber);
}

.boss-hud-item.collected .boss-hud-slots {
  opacity: 1;
  filter: drop-shadow(0 0 5px var(--c-primary-dim));
}

.boss-hud-item.collected .boss-hud-item-name {
  color: var(--c-primary);
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.45);
}


/* UI Anpassungen für Fullscreen */

.boss-header-fs {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 2em;
  text-shadow: 0 0 10px var(--c-primary);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
  padding-bottom: 20px;
}

.boss-dpad-fs {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

/* Tablets sind breiter als die Handy-Ansicht, haben aber auch keine Tastatur:
   Touch-Steuerung wie auf dem Handy einblenden. */

@media (hover: none), (pointer: coarse) {
  .boss-dpad {
    display: grid;
  }

  .boss-dpad.boss-dpad-fs {
    left: 20px;
    right: auto;
    bottom: 20px;
  }

  .boss-controls-hint,
  .boss-hud-key {
    display: none;
  }
}

/* --- BOSS INTRO POPUP (FAHNDUNGSPLAKAT) --- */

.boss-intro-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  border: 2px solid var(--c-primary);
  box-shadow: 0 0 100px 8px rgba(0, 0, 0, 1);
  padding: 30px;
  text-align: center;
  z-index: 99999;
  width: 90%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.boss-intro-modal button.btn-action-main {
  background: var(--c-primary);
  width: 100%;
  color: #000 !important;
  border-color: var(--c-primary) !important;
  font-size: 1.2em;
}

.boss-intro-modal button.btn-action-main:hover {
  background: #fdba23 !important;
  color: #000 !important;
}

/* Grafiken laden noch (preloadBossGraphics) */
.boss-intro-modal button.btn-action-main:disabled,
.boss-intro-modal button.btn-action-main:disabled:hover {
  background: var(--c-gray) !important;
  border-color: var(--c-gray) !important;
  color: #fff !important;
  cursor: wait;
}

.boss-intro-title {
  color: #fff;
  font-size: 2em;
  padding-bottom: 10px;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.boss-intro-img-box {
  width: 120px;
  height: 120px;
  margin: 10px 0;
  position: relative;
  overflow: hidden;
}

.boss-intro-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boss-intro-quote {
  color: #fff;
  font-style: italic;
  font-size: 1.2em;
  margin: 5px 0;
  text-shadow: 0 2px 2px #000;
}

.boss-intro-instruction {
  color: var(--c-gray-light);
  font-family: "VT323", monospace;
  font-size: 1.1em;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 4px;
}


/* Blitz */

.player-lightning {
  position: absolute;
  height: 4px;
  background: #fff;
  box-shadow: 0 0 10px #ffff00, 0 0 20px #ffaa00;
  z-index: 100;
  transform-origin: 0 50%;
  pointer-events: none;
  animation: flashBeam 0.2s linear;
}

@keyframes flashBeam {
  0% {
    opacity: 1;
    height: 6px;
  }
  100% {
    opacity: 0;
    height: 1px;
  }
}

/* Spieler zielt (Pulsieren) */

.player-aiming {
  filter: drop-shadow(0 0 10px yellow) brightness(1.5);
  animation: aimPulse 0.5s infinite alternate;
}

@keyframes aimPulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

/* Boss Betäubt */

.boss-stunned {
  filter: grayscale(1) brightness(0.5);
  opacity: 0.8;
}

/* Powerup Batterie */

.boss-powerup {
  z-index: 5;
  animation: floatItem 2s infinite ease-in-out;
  background-image: url(img/assets/boss/generic/battery.png);
  transform: scale(0.8);
  animation-delay: 1s;
}

/* Spieler wurde getroffen (Unverwundbarkeits-Phase) */

.boss-player-hit {
  animation: playerInvulnerable 0.2s infinite;
  opacity: 0.7;
}

@keyframes playerInvulnerable {
  0% {
    filter: brightness(1) opacity(1);
  }
  50% {
    filter: brightness(5) sepia(1) hue-rotate(-50deg) opacity(0.5);
  }
  100% {
    filter: brightness(1) opacity(1);
  }
}

/* Container für die Action-Buttons unten rechts */

.boss-actions-container {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 20px;
  z-index: 1000;
}

/* Basis-Style für runde Action-Buttons */

.boss-action-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s, background 0.2s;
}

.boss-action-btn:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.2);
}

#boss-potion-slots {
  display: flex;
}

/* Spezifische Farben */

.btn-shoot {
  border-color: #ffd700;
  color: #ffd700;
  text-shadow: 0 0 5px #ff8800;
}

.btn-potion {
  border-color: #00ffff;
  color: #00ffff;
  text-shadow: 0 0 5px #0088ff;
}

/* =========================================
   NEUES HAUPTMENÜ (Desktop vs Mobile)
    ========================================= */

.top-right-auth {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}

/* Die Auth-Leiste (LOGIN/LOGOUT/REGISTRIEREN) gehört nur ins Hauptmenü.
   Im laufenden Spiel wird sie ausgeblendet – der Logout bleibt über den
   Weg zurück ins Hauptmenü erreichbar. */

body.game-active .top-right-auth {
  display: none !important;
}

/* --- DETEKTIV BOARD (V3 - SPLIT SCREEN) --- */

.board-tab-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.board-split-view {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
  gap: 10px;
}

/* --- LINKE SPALTE: HINWEISE --- */

.board-sidebar {
  flex-shrink: 0;
  padding: 10px;
  width: 30%;
  min-width: 200px;
  max-width: 300px;
  background: #0c0c0c;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid #202020;
  justify-content: unset;
}

.clue-list-header {
  color: var(--c-primary);
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-size: 1.2em;
  letter-spacing: 1px;
}

.clue-empty {
  color: #8f8f8f;
  font-style: italic;
  margin-top: 20px;
  font-size: 1.1em;
  margin-bottom: 20px;
}

/* --- RECHTE SPALTE: MATRIX --- */

.lens-btn {
  background: #1a1a1a;
  border: 1px solid rgba(0, 216, 240, 0.12);
  color: #fff !important;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  text-transform: uppercase;
}

.lens-btn.active, .lens-btn:hover {
  border-color: #ffff !important;
  color: #fff !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.lens-btn img {
  height: 32px;
  width: auto;
  image-rendering: pixelated;
}

/* DAS GRID (Scrollt eigenständig) */

.board-grid {
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: start;
  gap: 8px;
  border-bottom: 15px solid #050505;
}

.board-grid.board-grid-games {
  display: block;
  gap: 0px;
}

.suspect-genres, .game-select-genre, .item-target-genre {
  font-size: 0.9em;
  color: #8f8f8f;
}

.suspect-genres b {
  font-weight: 400;
  color: var(--c-primary);
}

/* Scrollbar Styles */

.board-sidebar::-webkit-scrollbar, .board-grid::-webkit-scrollbar {
  width: 6px;
}

.board-sidebar::-webkit-scrollbar-thumb, .board-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 216, 240, 0.08);
  border-radius: 3px;
}

/* --- SUSPECT CARD (Optimiert) --- */

.suspect-card.excluded .suspect-img-wrapper, .suspect-card.excluded .suspect-data-field.info-field, .suspect-card.excluded .clue-slots, .suspect-card.excluded .suspect-action-slot div {
  opacity: 0.6;
}

.suspect-card.excluded .suspect-img-wrapper {
  filter: grayscale(100%);
}

.suspect-img-wrapper {
  width: 100%;
  aspect-ratio: 1/1;
  background: #000000;
  position: relative;
  cursor: pointer;
  max-height: 175px;
}

.suspect-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 130px;
  height: 100%;
  object-fit: cover;
}

.suspect-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  justify-content: space-between;
}

.suspect-body .btn-tiny {
  font-size: 1em;
  padding: 8px 4px;
  border-color: #fff;
  border-radius: 8px;
  background: transparent;
  color: #fff;
}

.suspect-body .btn-tiny:hover {
  background: #fff;
  box-shadow: none;
}

.suspect-name {
  font-size: 1.1em;
  color: #fff;
  margin-bottom: 4px;
}

.suspect-data-field {
  font-size: 1em;
  color: #fff;
  border: 1px dashed rgba(0, 216, 240, 0.12);
  padding: 2px 5px;
  min-height: 18px;
  margin-bottom: 5px;
  display: none !important;
}

/* --- FULLSCREEN BOARD OVERLAY --- */

.board-fullscreen-overlay {
  position: absolute;
  top: var(--top-bar-height, 86px);
  left: 0;
  right: 0;
  bottom: calc(var(--controls-area-height, 150px) + 12px);
  z-index: 999;
  background: #050505;
  height: 94%;
}

/* Close Button oben rechts im Board */

.board-close-btn {
  background: #ff3100;
  border: none !important;
  color: #fff;
  padding: 0 18px;
  cursor: pointer;
  font-family: "VT323", monospace;
  font-size: 1.2em;
  border-radius: 0px 8px 0px 0px !important;
  line-height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: var(--bevel-amber);
}

.board-close-btn:hover {
  background: var(--c-danger);
  color: #000 !important;
  transform: none !important;
  box-shadow: var(--bevel-amber) !important;
  filter: none;
}

/* --- ANPASSUNG DES CONTAINERS --- */

.board-container {
  flex-direction: column;
  display: flex;
  overflow: hidden;
  background: #050505;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 10px;
}

.player-fullscreen-overlay {
  background: radial-gradient( circle at top right, rgba(255, 176, 0, 0.08), transparent 28% ), linear-gradient(180deg, #050505 0%, #07101c 100%);
}

.player-board-container {
  background: transparent;
}

.player-board-content {
  padding: 16px;
  background: #000;
  border-bottom: 20px solid #000;
}

.player-screen-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  min-height: 100%;
  background: #000;
}

.player-screen-sidebar, .player-screen-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.player-panel {
  border: 1px solid var(--c-border-color);
  background: var(--c-bg-light);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 14px;
}

.player-panel-title, .player-panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--c-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.player-panel-badge {
  color: #fff;
  font-size: 0.95em;
}

.player-avatar-preview {
  display: flex;
  justify-content: center;
  margin: 14px 0 10px;
}

.player-avatar-preview .generated-avatar {
  width: 126px !important;
  height: 176px !important;
  top: 0;
  border: 1px solid var(--c-border-color) !important;
}

.player-nameplate {
  text-align: center;
  color: #fff;
  font-size: 1.45em;
  letter-spacing: 1px;
  /* text-transform: uppercase; */
}

.player-level-line, .player-xp-copy {
  text-align: center;
  color: var(--c-gray-light);
}

.player-level-line {
  margin-top: 6px;
  color: var(--c-primary);
}

.player-xp-track {
  width: 100%;
  height: 10px;
  border: 1px solid var(--c-success);
  background: rgba(255, 255, 255, 0.03);
  margin-top: 10px;
  overflow: hidden;
  border-radius: 20px;
}

.player-xp-fill {
  height: 100%;
  background: var(--c-success);
  box-shadow: 0 0 14px rgba(0, 216, 240, 0.3);
}

.player-progress-subline, .player-progress-node-desc, .player-progress-node-state {
  color: #fff;
}

button.player-edit-btn {
  width: 100%;
  margin-top: 14px;
  color: #000 !important;
  padding: 10px 10px;
  box-shadow: var(--bevel-amber) !important;
  border: none;
}

.player-achievements-panel {
  min-height: 0;
  flex: 1;
}

.player-achievement-progress {
  margin-bottom: 12px;
}

.player-ach-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 689px;
  overflow-y: auto;
  padding-right: 4px;
}

.player-perks-panel .perk-grid {
  margin-top: 0;
}

/* FORTSCHRITT-Tab: 50/50, jede Spalte scrollt fuer sich. */
.player-progress-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  flex: 1 1 0;
  min-height: 0;
}

.player-progress-split .player-achievements-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.player-progress-split .player-ach-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}

.player-progress-split .player-progress-shell {
  min-height: 0;
}

.player-progress-split .player-progress-path-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

.player-progress-split .player-progress-path {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.player-progress-hero-copy {
  flex: 1;
  min-width: 0;
}

.player-progress-hero .player-xp-copy {
  text-align: left;
  margin-top: 10px;
}

/* BEARBEITEN unter dem Avatar im AUSRUESTUNG-Tab */
button.equip-avatar-edit-btn {
  width: 100%;
  margin-top: 10px;
  padding: 6px 10px;
}

.player-progress-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.player-progress-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.player-progress-level-badge {
  font-size: 1.35em;
  border: none;
  padding: 10px 14px;
  background: var(--c-primary);
  white-space: nowrap;
  color: #000;
}

.player-progress-path {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  padding-left: 0px;
  margin-top: 12px;
}

.player-progress-node {
  position: relative;
  display: grid;
  grid-template-columns: 74px 52px minmax(0, 1fr);
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--c-border-color);
  background: var(--c-bg-light);
  opacity: 0.5;
}

.player-progress-node.unlocked {
  border-color: rgba(80, 255, 160, 0.28);
  background: rgb(30 157 88 / 29%);
  opacity: 1;
}

.player-progress-node.next {
  border-color: var(--c-gray-light);
  box-shadow: 0 0 0 1px rgba(255, 176, 0, 0.08);
  border-style: dashed;
  opacity: 1;
}

.player-progress-node.future {
  border-style: dashed;
}

.player-progress-node-level {
  color: #fff;
  font-size: 0.92em;
  letter-spacing: 1px;
  padding-top: 12px;
}

.player-progress-node-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.5em;
  position: relative;
  z-index: 1;
  border-radius: 999px;
}

.player-progress-node-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.player-progress-node-title, .player-levelup-unlocks-title {
  color: var(--c-primary);
  font-size: 1.05em;
  margin-bottom: 4px;
}

.player-levelup-unlocks {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}

.player-levelup-unlock-entry {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 10px;
}

.player-levelup-unlock-entry img {
  width: 28px;
  height: 28px;
}

@media (max-width: 980px) {
  .player-screen-grid {
    grid-template-columns: 1fr;
  }

  .player-ach-list {
    max-height: 320px;
  }

  /* Einspaltig scrollt die ganze Seite. */
  .player-progress-split {
    grid-template-columns: minmax(0, 1fr);
    flex: 1 0 auto;
  }

  .player-progress-split .player-ach-list {
    flex: none;
    max-height: 320px;
  }

  .player-progress-split .player-progress-path-panel,
  .player-progress-split .player-progress-path {
    flex: none;
    overflow: visible;
  }

}

@media (max-width: 700px) {
  .player-board-content {
    padding: 12px;
  }

  .player-progress-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .player-progress-node {
    grid-template-columns: 1fr;
  }

  .player-progress-path::before {
    display: none;
  }

  .player-progress-node-level {
    padding-top: 0;
  }

}

/* --- DRAG & DROP ERWEITERUNGEN --- */

/* Der Hinweis in der Sidebar (Ziehbar) */

.clue-item:active {
  cursor: grabbing;
}

.suspect-clue-item {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  text-transform: none;
  line-height: 1em;
}

.suspect-clue-item div b {
  color: var(--c-primary);
  font-weight: 400;
}

.suspect-clue-item.exhausted {
  opacity: 0.75;
}

button.suspect-clue-item:hover {
  color: #fff !important;
  background: var(--c-bg-lighter);
  box-shadow: none;
}

/* Die Karte als Ziel (Dropzone) */

/* Bereich IN der Karte für angeheftete Hinweise */

.clue-chip {
  background: var(--c-primary-dim);
  color: #000;
  font-size: 0.65em;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  max-width: 100%;
  text-overflow: ellipsis;
  border: 1px solid var(--c-primary);
}

.clue-chip:hover {
  background: #ff4444;
  border-color: #ff4444;
  color: #fff;
  text-decoration: line-through;
}

/* BASIS (Default) */

.clue-item {
  background: rgba(0, 216, 240, 0.03);
  border-left: 3px solid var(--c-primary-dim);
  padding: 8px;
  margin-bottom: 8px;
  font-size: 0.85em;
  color: #ccc;
  line-height: 1.3;
  cursor: grab;
  transition: transform 0.2s, background 0.2s;
  user-select: none;
  border-left-width: 4px;
  border-left-style: solid;
  /* border-radius: 8px; */
  border-top: none;
  border-right: none;
  border-bottom: none;
}

/* 1. PHYSICAL (Aussehen: Haare, Augen, Kleidung...) -> BLAU */

.clue-cat-physical {
  border-left-color: #00d2ff;
  background: linear-gradient( 90deg, rgba(0, 210, 255, 0.1) 0%, rgba(0, 0, 0, 0) 100% );
}

/* 2. JOB (GameStar, Podcast, Beruf) -> GELB/ORANGE */

.clue-cat-job {
  border-left-color: #ffb000;
  background: linear-gradient( 90deg, rgba(255, 176, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100% );
}

.clue-cat-hobbys {
  border-left-color: #ff6f33;
  background: linear-gradient( 90deg, rgb(255 117 51 / 10%) 0%, rgba(0, 0, 0, 0) 100% );
}

/* 3. GAMING (Spiele, Genres, Plattformen) -> ROT/PINK */

.clue-cat-gaming {
  border-left-color: #ff3366;
  background: linear-gradient( 90deg, rgba(255, 51, 102, 0.1) 0%, rgba(0, 0, 0, 0) 100% );
}

/* 4. CHARACTER (Wohnort, Verhalten, Fahrzeuge, Hobby) -> GRÜN */

.clue-cat-character {
  border-left-color: var(--c-success);
}

/* --- SIDEBAR GRUPPEN --- */

.clue-group-header {
  color: #fff;
  font-size: 1em;
  text-transform: uppercase;
  margin-top: 15px;
  margin-bottom: 5px;
  padding-bottom: 2px;
}

.clue-group-header:first-child {
  margin-top: 0;
}

/* Die Chips selbst (Sidebar & Karte) */

.clue-item, .clue-chip {
  font-size: 1.1em;
  line-height: 1.1em;
}

/* Damit Chips auf der Karte auch bunt sind */

.clue-chip.clue-cat-physical {
  border-color: #00d2ff;
  color: #00d2ff;
  background: rgba(0, 210, 255, 0.1);
}

.clue-chip.clue-cat-job {
  border-color: #ffb000;
  color: #ffb000;
  background: rgba(255, 176, 0, 0.1);
}

.clue-chip.clue-cat-hobbys {
  border-color: #ff6f33;
  color: #ff6f33;
  background: rgb(255 117 51 / 10%);
}

.clue-chip.clue-cat-gaming {
  border-color: #ff3366;
  color: #ff3366;
  background: rgba(255, 51, 102, 0.1);
}

.clue-chip.clue-cat-character {
  border-color: var(--c-success);
  color: var(--c-success);
  background: rgba(51, 255, 51, 0.1);
}

#tl-game-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0e0e0e;
  z-index: 1500;
  padding: 90px 10px 10px 10px;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}

.dragging-clone {
  width: 110px;
  height: 155px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--c-cyan);
  border-radius: 6px;
  background: rgba(0, 216, 240, 0.03);
  position: fixed;
  z-index: 2600;
  /* Position kommt per transform aus dem JS */
  transform: rotate(-4deg);
  will-change: transform;
  opacity: 0.92;
  /* kein drop-shadow-Filter: muesste auf Mobilgeraeten pro Bewegung neu
     berechnet werden, box-shadow oben reicht */
  pointer-events: none !important;
}

/* --- DETEKTIV BOARD V2 (TABS) --- */

.board-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  background: #3d3d3d;
  color: #fff;
  cursor: pointer;
  border-right: 1px solid #000;
  font-size: 1.1em;
  transition: all 0.2s;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  box-shadow: var(--bevel-up);
}

.board-tabs .board-tab:first-of-type {
  border-top-left-radius: 8px;
}

/* JOBS-Board rendert in #text-output (scrollt in #screen-right) -> Tab-Leiste oben fixieren, wie bei den Overlay-Boards */
/* Der Scroll-Container #screen-right hat 25px Padding. In diesem Streifen ober-
   und seitlich der klebenden Leiste blieb der durchscrollende Text sichtbar.
   Der Schatten (Offset nach oben + Spread) deckt das Padding mit ab und wird
   vom overflow des Containers sauber abgeschnitten. */
#text-output .board-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #050505;
  box-shadow: 0 -25px 0 25px #050505;
}

.board-tab img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  position: relative;
  top: 0px;
  max-height: 32px;
  margin-right: 5px;
}

/* FOOTER LÖSUNG */

.board-footer {
  padding: 15px 20px 25px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.solution-preview {
  display: flex;
  gap: 10px;
  font-size: 1.1em;
  margin-right: 10px;
}

#solution_send_btn {
  height: 53px;
  padding: 0px 10px;
  min-height: 20px;
  margin-top: 0px !important;
  background: var(--c-primary) !important;
  color: #000 !important;
  border: 1px solid var(--c-primary) !important;
  transition: all ease .3s;
  font-size: 1.1em !important;
}

#solution_send_btn:hover {
  background: var(--c-success) !important;
  border-color: var(--c-success) !important;
  box-shadow: 0 0 15px var(--c-success) !important;
}

.sol-slot {
  padding: 5px 10px;
  color: #fff;
  min-width: 100px;
  text-align: center;
}

.sol-slot.wrong {
  border-color: var(--c-danger);
  color: var(--c-danger);
  animation: flashRed 0.5s;
}

/* INTERROGATE BUTTON */

button.btn-interrogate:hover {
  color: #000 !important;
  background: var(--c-primary);
}

.pod-talk {
  color: #afafaf;
}

.podcaster-challenge-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  text-align: center;
}

.podcaster-challenge-speaker {
  display: none;
}

.podcaster-challenge-quote {
  color: var(--c-primary);
  font-size: 1em;
  line-height: 1.1;
}

.podcaster-challenge-slot-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 18px;
}

.podcaster-challenge-slot-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-gray-light);
  background: #000;
  border-radius: 10px;
  padding: 12px 10px;
}

.podcaster-challenge-slot-frame::before, .podcaster-challenge-slot-frame::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 18px;
  pointer-events: none;
  z-index: 1;
}

.podcaster-challenge-slot-frame::before {
  top: 0;
  background: linear-gradient(180deg, rgba(5, 8, 16, 0.95), rgba(5, 8, 16, 0));
}

.podcaster-challenge-slot-frame::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(5, 8, 16, 0.95), rgba(5, 8, 16, 0));
}

.podcaster-challenge-slot-reel {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  font-size: 1.2em;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255, 176, 0, 0.25);
  min-height: 1.4em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.podcaster-challenge-detail {
  text-align: center;
  color: var(--c-gray-light);
  font-size: 0.95em;
  min-height: 2.2em;
  display: none !important;
}

.podcaster-challenge-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.podcaster-challenge-pill {
  border: 1px solid var(--c-border-color);
  border-radius: 999px;
  padding: 7px 10px;
  text-align: center;
  color: #ccc;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

.podcaster-challenge-pill.active {
  border-color: var(--c-primary);
  color: #fff;
}


.games-grid-select {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 4fr));
  gap: 10px;
  height: 100%;
  overflow-y: auto;
  width: 100%;
  padding-right: 15px;
}

.game-select-card {
  border: 1px solid rgb(32 32 32);
  background: rgb(12 12 12);
  cursor: pointer;
  text-align: center;
  padding: 5px;
  height: auto;
  max-height: 270px;
}

.game-select-card:hover {
  border-color: #fff;
}

.game-select-card.selected {
  border-color: var(--c-primary);
}

.game-select-img {
  width: auto;
  min-height: 95px;
  object-fit: cover;
  max-width: 90%;
  max-height: 165px;
}

.game-select-name {
  font-size: 1em;
  padding: 2px;
  color: #fff;
}

/* ITEMS LOGIC */

.year-filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
  max-height: 80px;
  overflow-y: auto;
}

.year-checkbox {
  display: flex;
  align-items: center;
  background: #080c18;
  border: 1px solid rgba(0, 216, 240, 0.12);
  padding: 2px 6px;
  cursor: pointer;
  user-select: none;
}

.year-checkbox input {
  margin-right: 5px;
  cursor: pointer;
}

.year-checkbox:hover {
  border-color: var(--c-gray-light);
}


.suspect-card.interrogated {
  border-color: #000000 !important;
  background: rgb(105 105 105 / 5%);
}

.suspect-card.interrogated .suspect-name {
  color: #fff;
}


.btn-interrogate.done {
  background: transparent;
  border: 1px solid #00ffff;
  color: #00ffff;
  animation: none;
}



.status-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--c-success);
  color: #000;
  font-weight: 400;
  font-size: 0.8em;
  padding: 2px 5px;
  border-radius: 4px;
  z-index: 10;
}

/* --- CLUE EXHAUSTED STATE --- */

.clue-item.exhausted {
  opacity: 0.5;
  pointer-events: none;
  border-color: rgba(0, 216, 240, 0.12);
  color: var(--c-gray-light);
  background: transparent;
}

/* Strike Slot (Das X) */

.tl-pool-card, .tl-slot.filled {
  -webkit-touch-callout: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.tl-touch-clone {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.9;
  /* Position kommt per transform aus dem JS (siehe moveTouchClone) */
  transform: scale(1.1) rotate(3deg);
  will-change: transform;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  background: rgba(0, 216, 240, 0.03);
  border: 1px solid var(--c-cyan);
  border-radius: 6px;
  width: 100px;
  height: 140px;
}

.tl-touch-clone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Highlight für den Slot unter dem Finger */

.tl-slot.drag-hover {
  z-index: 10;
  background: rgba(255, 176, 0, 0.2);
  border-color: var(--c-primary);
  transform: scale(1.05);
}

.matrix-text {
  position: relative;
  z-index: 2;
}

.matrix-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: glitch 2s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-2px, -2px);
  color: var(--c-primary);
  text-shadow: 0 0 5px var(--c-primary), 0 0 15px var(--c-primary);
  /* line-height: 25px; */
  opacity: 0.5;
}

/* Glitch effect for the text */

@keyframes glitch {
  0%,
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    transform: translate(0);
  }
  33% {
    clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%);
    transform: translate(-1px, -1px);
  }
  66% {
    clip-path: polygon(0 95%, 100% 85%, 100% 100%, 0 100%);
    transform: translate(1px, 1px);
  }
}

/* =========================================
   RESPONSIVE
    ========================================= */

@media (max-width: 800px) {
  body {
    font-size: 18px;
  }

  .mp-modal {padding: 15px 0px;}

  #profile_wrap_ingame, #topbar_right {
    width: 100%;
  }

  .game-meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2px 4px;
  }

  .game-meta-grid .meta-label-all {
    padding: 3px 6px;
    font-size: 0.85em;
  }

  .game-meta-grid img {
    height: 18px;
    display: none;
  }

  #start-screen, #instructions-screen {
    padding: 15px;
    position: relative;
    top: 0px;
    left: 0px;
    transform: none;
    border: none;
    width: 100%;
    clip-path: none;
  }

  .home-menu-buttons {
    display: block;
    display: grid;
    grid-template-columns: auto auto;
  }

  .home-menu-buttons button.btn-primary {
    font-size: 1em;
    padding: 16px 5px;
  }

  .home-menu-secondary {
    margin-top: 0px;
    width: 100%;
    grid-column: span 2;
  }

  #hl-interface {
    height: 100vh;
    padding: 2% 15px;
  }

  #hl-interface .hl-header-area {
    height: 20%;
  }

  #hl-interface .hl-board {
    height: 70%;
  }

  #hl-interface .minigame-buttons {
    height: 8%;
  }

  #jigsaw-overlay {
    padding: 2% 15px;
  }

  #btn-start-challenge {width: 100%;grid-column: span 2;}

  #freq-mobile-wrap {display: flex;}
  .freq-cover-wrapper {margin-bottom: 0px;}


  .hl-info {width: 50%;text-align: center;display: flex;flex-wrap: wrap;justify-content: center;align-content: center;}

  #travel-hints-container {padding-bottom: 100px;}


  .freq-target-name {
    line-height: 1;
  }

  #jigsaw-overlay .minigame-buttons {
    width: 90%;
  }

  .minigame-buttons .btn-action-main {
    min-width: auto;
  }

  .jigsaw-header.jigsaw-header-row span {
    text-align: left;
  }

  .jigsaw-header.jigsaw-header-row span#jigsaw-move-counter {
    text-align: right;
  }

  #dev-game-overlay {
    padding: 10px 15px;
  }

  .btn-secondary {
      word-break: break-word;
  }

  .hint-tile {max-width: 100%; max-height: 300px;}


  /* INTRO */
  .comic-portrait {height: 155px;}
  .ctc-line-a, .ctc-line-b {font-size: 0.7em;}
  .ctc-line-c {    margin-top: 10px;
    font-size: 1.3em;}
    .ctc-sub-text {font-size: 1.4em;}


  /* TUTORIAL */
  #guided-hotspot-tooltip .guided-hotspot-actions {margin-top: 5px;}

  .mp-lobby-actions button {width: 31%;}
  .mp-lobby-label {width: 100%; display: block; margin-bottom: 5px;}

  #mp-overlay .mp-header {font-size: 1em;}

  .dev-slot-placeholder img {
    height: 40px;
  }

  .tl-slots-row {margin-bottom: 10px;}

  .dialog-box {width: 90% !important;padding: 15px !important;}

  #memory-overlay .memory-header-bar, #memory-overlay .memory-hint {
    flex: 0;
    width: 100% !important;
    display: flex;
    justify-content: space-around;
  }

  .memory-grid-fill {flex: none;}

  #podcaster-runway {
    display: none !important;
  }

  #monitor-bottom-bar {
    display: none;
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    padding: 0 20px;
  }

  #game-container .panel-header {
    display: none;
  }

  .freq-info {
    font-size: 1.1em;
  }

  #top_bar .btn-icon-tool img {
    max-height: 40px;
  }

  #screen-left {
    height: auto;
    flex-shrink: 0;
    width: 100%;
    display: flex;
    grid-template-columns: 1fr 1fr;
    border-right: none;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    flex-wrap: wrap;
    flex-direction: row;
    height: 30%;
    margin: 0px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  #underscreen-wrap {
    border-left: 1px solid rgba(0, 216, 240, 0.1);
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0px 10px 0px;
    width: auto;
  }

  #underscreen-wrap #game-meta-info {
    display: none;
  }

  #underscreen-wrap .game-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0px;
    align-self: flex-end;
  }

  #game_info_wrap {
    display: none;
  }

  #location-image-wrapper {
    min-height: min-content;
    padding: 10px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    flex: 1;
  }

  #text-output {padding-bottom: 24vh;}

  /* Kein Extra-Platz unten bei Chat, Inventar, Reisepass, Sammelkarten */
  #text-output:has(> .chat-container),
  #text-output:has(> .inv-container),
  #text-output:has(> .passport-container),
  #text-output:has(> #trade_wrap) {
    padding-bottom: 0;
  }

  #button-container {
    grid-template-columns: repeat(3, 1fr);
    padding: 10px 15px 15px 15px;
    overflow-y: hidden;
    overflow-x: hidden;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: #000 !important;
  }

  #button-container-main-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .panel-header {
    display: flex;
    flex-wrap: wrap;
  }

  #home-character {
    flex-direction: column;
  }

  .home-char-top {width: 100%;}

  .btn-location {
    grid-column: span 1;
    height: 45px;
    font-size: 1.1rem !important;
  }

  .security-actions {
    grid-template-columns: 1fr;
  }

  .turn-on-effect {
    animation: none !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .inv-intro span {
    float: none;
    display: block;
  }

  #controls-area {
    width: 100%;
    background: transparent;
    margin-top: 0;
  }

  #controls-area .btn-action-main.btn-travel {
    grid-column: span 3 !important;
  }

  .btn-action-main, .tools-wrapper {
    height: auto;
  }

  #sf-quiz-overlay {
    height: auto !important;
    position: absolute !important;
    padding: 10px !important;
  }

  #quiz_button_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }

  #button-container[style="display: grid; grid-template-columns: repeat(10, 1fr);"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* JIGSAW */

  #jigsaw-pieces-pool {
    gap: 6px !important;
    max-height: none;
    border-top: 10px solid #000;
    padding-top: 0px;
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
  }

  /* MEMORY */

  .memory-grid {width: 100%;}

  /* Hardmode hochkant: 4x6, Breite so begrenzt, dass alle 6 Reihen ins Bild passen */
  .memory-grid.memory-grid-hard {
    grid-template-columns: repeat(4, 1fr);
    aspect-ratio: 2 / 3;
    width: min(100%, calc((100dvh - 190px) * 2 / 3));
    max-width: 100%;
  }

  /* HIGHER / LOWER */

  .hl-board {
    padding: 0px;
    width: 100%;
  }

  .hl-candidate-area {
    width: 100%;
  }

  /* FREQ */

  #freq-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    transform: none;
    width: 100%;
    max-width: 100%;
    padding: 10px;
    height: 100%;
  }

  .freq-cover-img {
    width: auto;
    margin: 0 auto;
    height: 120px;
  }

  .dev-pool-card {
    width: auto;
    height: 110px;
  }

  .dev-slot.drag-hover {
    transform: none;
  }

  #tl-game-overlay, #tl-game-interface {
    height: auto !important;
    overflow-y: visible !important;
    min-height: 100%;
  }

  #dev-game-interface, #tl-game-interface {
    touch-action: auto;
  }

  /* Das Split-View drehen: Oben/Unten statt Links/Rechts */

  /* Sidebar nach OBEN */

  /* Überschriften in der Sidebar kompakter */

  .board-sidebar .clue-list-header, .board-sidebar .clue-group-header {
    width: 100%;
    font-size: 0.9em;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  /* Grid nimmt den Rest ein */

  /* Karten auf dem Handy: 2 Spalten */

  /* Games Grid auch anpassen */

  /* Footer aufräumen */

  /* =========================================
          BOSS KAMPF MOBILE CONTROLS
          ========================================= */

  .boss-dpad {
    display: grid;
  }

  .boss-controls-hint {
    display: none;
  }

  /* 1. D-PAD STEUERKREUZ (Unten Links) */

  .boss-dpad.boss-dpad-fs {
    left: 10px !important;
    bottom: 10px !important;
    transform: none !important;
    gap: 2px;
  }

  .boss-dpad.boss-dpad-fs .dpad-btn {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .boss-potion-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 70px;
    height: 70px;
    background: rgba(0, 20, 20, 0.8);
    border: 2px solid #00ffff;
    border-radius: 50%;
    color: #00ffff;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1100;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    transition: transform 0.1s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .boss-potion-btn:active {
    transform: scale(0.9);
    background: rgba(0, 50, 50, 0.9);
  }

  /* 3. HUD LEISTE KOMPAKTER */

  #boss-topbar {
    padding: 0 4px;
    gap: 4px;
  }

  .boss-hud-mod {
    padding: 0 5px;
    gap: 1px;
    flex: 0 0 auto;
  }

  /* Blitze/Tränke als "Icon ×N": sonst laufen die Module ineinander,
     sobald mehr als 2-3 Stück im Inventar sind. */

  .boss-hud-slots .boss-potion.hud ~ .boss-potion.hud,
  .boss-hud-slots .boss-powerup.hud ~ .boss-powerup.hud {
    display: none;
  }

  .boss-hud-count {
    display: inline-block;
    font-size: 0.9em;
  }

  .boss-hud-label {
    font-size: 0.6em;
    letter-spacing: 1px;
    gap: 4px;
  }

  .boss-hud-slots {
    min-height: 22px;
    gap: 2px;
  }

  #boss-topbar .boss-potion.hud, #boss-topbar .boss-powerup.hud {
    width: 22px;
    height: 22px;
  }

  #boss-lives img {
    width: 20px;
    height: 20px;
  }

  .boss-hud-item {
    max-width: 120px;
  }

  .boss-hud-item-icon {
    width: 22px;
    height: 22px;
  }

  /* Kein Platz und keine Tastatur: Hier zählen die Touch-Buttons */

  .boss-hud-key {
    display: none;
  }

  .boss-powerup.hud {
    width: 30px;
    height: 30px;
  }

  #memory-overlay {
    overflow: hidden;
    padding: 8px;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* gap: 0px; */
  }

  .freq-sidebar {
    flex: 0 0 auto;
    width: 100%;
    max-width: 300px;
    margin-top: 0;
    height: 30vh;
  }

  .tl-slot-label {
    font-size: 1.5em;
  }

  .hl-three-slots {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "center center" "earlier later";
    width: min(100%, 620px);
    align-items: stretch;
    justify-items: stretch;
  }

  .hl-three-slots .hl-drop-slot[data-direction="earlier"] {
    grid-area: earlier;
  }

  .hl-three-slots .hl-center-column .hl-card {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
  }

  .hl-year {
    font-size: 1.5em !important;
    width: 100%;
  }

  .hl-subhead {
    text-align: center;
  }

  /* --- TABS --- */

  .board-tab {
    flex: 1 1 0;
    padding: 8px 2px;
    font-size: 0.8em;
  }

  .board-tab.mp-header-title  {
    font-size: 1.1em;
  }

  .board-close-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 0 12px;
    margin-top: 0;
    line-height: 1.1em;
  }

  /* --- HINWEIS-LEISTE (Sidebar als horizontaler Tray) --- */

  /* Platzfresser auf Mobile verstecken */

  .clue-list-header, .clue-group-header {
    display: none !important;
  }

  .clue-item {
    font-size: 0.75em;
    padding: 6px;
    white-space: normal;
    line-height: 1.2;
    width: 47%;
    height: auto;
  }

  /* --- TAB 1: SUSPECTS --- */

  .lens-btn {
    flex: 1;
    padding: 4px;
    font-size: 0.75em;
  }

  .suspect-name {
    font-size: 1em;
  }

  .suspect-data-field {
    font-size: 0.85em;
  }

  /* --- TAB 2: SPIELE --- */

  .year-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .year-checkbox {
    font-size: 0.8em;
    padding: 4px 8px;
  }

  .game-select-card {
    font-size: 0.8em;
    padding: 5px;
  }

  .game-select-name {
    font-size: 0.8em;
  }

  /* --- TAB 3: ITEMS --- */

  .item-clue-column {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 2px solid var(--c-frame);
    padding-bottom: 10px;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
  }

  .item-clue-column .clue-list-header, .item-clue-column > div:nth-child(2) {
    display: none;
  }

  .item-select-btn {
    font-size: 0.8em;
    padding: 5px;
  }

  .sol-slot {
    min-width: 0;
    flex: 1 1 30%;
    font-size: 0.7em;
    padding: 5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}

@media (max-height: 750px) {
  #memory-overlay {
    overflow: hidden;
    padding: 8px;
  }

}

/* Hardmode im Querformat (Handy quer): wieder 6x4, damit die Karten nicht winzig werden */
@media (max-width: 800px) and (orientation: landscape) {
  .memory-grid.memory-grid-hard {
    grid-template-columns: repeat(6, 1fr);
    aspect-ratio: 3 / 2;
    width: min(100%, calc((100dvh - 150px) * 1.5));
  }
}

/* ============================================================
   ANIMATION SYSTEM v2 — Ambient Life & Interaction Feedback
    ============================================================ */

/* === A. AMBIENT — subtle but VISIBLE === */

/* 1. Body: slow drifting ambient glow */

@keyframes ambientGlow {
  0% {
    opacity: 0.4;
    transform: translate(0, 0) scale(1);
  }
  33% {
    opacity: 0.6;
    transform: translate(30px, -20px) scale(1.1);
  }
  66% {
    opacity: 0.3;
    transform: translate(-20px, 15px) scale(0.95);
  }
  100% {
    opacity: 0.4;
    transform: translate(0, 0) scale(1);
  }
}

body::before {
  inset: 0;
  background-image: linear-gradient( rgba(255, 255, 255, 0.02) 1px, transparent 1px ), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 18px 18px;
  content: "" !important;
  position: fixed !important;
  width: 600px;
  height: 600px;
  top: -100px;
  left: -100px;
  background: radial-gradient( circle, rgba(255, 176, 0, 0.06) 0%, transparent 70% ) !important;
  opacity: 1 !important;
  pointer-events: none;
  z-index: 0 !important;
  animation: ambientGlow 20s ease-in-out infinite;
  filter: blur(60px);
}

/* 2. Monitor screen: breathing vignette */

/* 3. Location image: random glitch flicker */

@keyframes crtFlicker {
  0% {
    opacity: 1;
    filter: var(--c-imgoverlay);
  }
  92% {
    opacity: 1;
    filter: var(--c-imgoverlay);
  }
  92.5% {
    opacity: 0.7;
    filter: var(--c-imgoverlay) brightness(1.2);
  }
  93% {
    opacity: 1;
    filter: var(--c-imgoverlay);
  }
  93.3% {
    opacity: 0.85;
    filter: var(--c-imgoverlay);
  }
  93.6% {
    opacity: 1;
    filter: var(--c-imgoverlay);
  }
  100% {
    opacity: 1;
    filter: var(--c-imgoverlay);
  }
}

#location-image-wrapper {
  animation: crtFlicker 8s linear infinite;
}

/* 5. Top bar: pulsing orange border */

/* 6. Monitor casing: subtle outer glow breathe */

@keyframes casingGlow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 176, 0, 0.02), 0 20px 60px rgba(0, 0, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 176, 0, 0.05), 0 20px 60px rgba(0, 0, 0, 0.7);
  }
}

#monitor-casing {
  animation: casingGlow 8s ease-in-out infinite;
}

/* 7. Scanlines: speed up slightly */

#location-image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient( to bottom, transparent 50%, rgba(0, 20, 30, 0.2) 51% );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 10;
  opacity: 0.3;
  animation: scanlineMove 6s linear infinite !important;
}

/* === B. BUTTON FEEDBACK === */

/* 1. Click: flash + press (all buttons) */

button:active:not(:disabled) {
  filter: brightness(1.4);
  transition: all 0.05s ease !important;
}

/* 2. Location buttons: glow pulse on hover */

@keyframes btnHoverGlow {
  0%,
  100% {
    box-shadow: 0 0 6px #00ffff;
  }
  50% {
    box-shadow:
      0 0 18px rgba(255, 176, 0, 0.3),
      inset 0 0 8px rgba(255, 176, 0, 0.05);
  }
}

/* 3. ABREISEN button: persistent pulse */

/* === C. POPUPS & DIALOGS === */

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dialogPopIn {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#game-dialog-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  justify-content: center;
  align-items: center;
  background: rgb(0 0 0 / 85%);
  backdrop-filter: blur(2px);
  z-index: 99999 !important;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation: overlayFadeIn 0.2s ease-out;
}

/* 2. Security/file boxes */

@keyframes securitySlam {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.security-overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(6, 8, 16, 0.95) !important;
  z-index: 9999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: overlayFadeIn 0.2s ease-out;
}

/* 3. Menu containers */

@keyframes menuSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.menu-container, #instructions-screen {
  animation: menuSlideIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#instructions-screen b {
  font-weight: 400;
  color: var(--c-primary);
}

/* 4. Achievement toast: bounce in from right */

@keyframes toastBounce {
  0% {
    transform: translateX(120%);
    opacity: 0;
  }
  50% {
    transform: translateX(-8px);
    opacity: 1;
  }
  70% {
    transform: translateX(4px);
  }
  100% {
    transform: translateX(0);
  }
}

.ach-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #0c1224;
  border: 1px solid var(--c-cyan);
  color: #fff;
  padding: 15px;
  z-index: 3000;
  box-shadow: 0 0 20px var(--c-cyan-glow), 0 10px 30px rgba(0, 0, 0, 0.5);
  max-width: 300px;
  animation: toastBounce 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* === D. LIST CASCADES === */

/* Achievement items */

@keyframes listSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ach-item {
  display: flex;
  align-items: center;
  background: rgba(0, 216, 240, 0.03);
  border: 1px solid rgba(0, 216, 240, 0.1);
  padding: 8px;
  margin-bottom: 5px;
  position: relative;
  filter: grayscale(var(--c-greyscale));
  animation: listSlideIn 0.25s ease-out both;
}

.ach-item:nth-child(1) {
  animation-delay: 0.02s;
}

.ach-item:nth-child(2) {
  animation-delay: 0.04s;
}

.ach-item:nth-child(3) {
  animation-delay: 0.06s;
}

.ach-item:nth-child(4) {
  animation-delay: 0.08s;
}

.ach-item:nth-child(5) {
  animation-delay: 0.1s;
}

.ach-item:nth-child(6) {
  animation-delay: 0.12s;
}

.ach-item:nth-child(7) {
  animation-delay: 0.14s;
}

.ach-item:nth-child(8) {
  animation-delay: 0.16s;
}

.ach-item:nth-child(9) {
  animation-delay: 0.18s;
}

.ach-item:nth-child(10) {
  animation-delay: 0.2s;
}

/* Perk cards */

@keyframes cardRise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.perk-card:nth-child(1) {
  animation-delay: 0.03s;
}

.perk-card:nth-child(2) {
  animation-delay: 0.06s;
}

.perk-card:nth-child(3) {
  animation-delay: 0.09s;
}

.perk-card:nth-child(4) {
  animation-delay: 0.12s;
}

.perk-card:nth-child(5) {
  animation-delay: 0.15s;
}

.perk-card:nth-child(6) {
  animation-delay: 0.18s;
}

.perk-card:nth-child(7) {
  animation-delay: 0.21s;
}

.perk-card:nth-child(8) {
  animation-delay: 0.24s;
}

/* Inventory & notebook */

.inv-card {
  border: 1px solid var(--c-border-color);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  background: var(--c-bg-light);
  animation: cardRise 0.2s ease-out both;
}

/* HÄNDLER (SHOP) */

/* Nach einem Kauf werden die Karten neu gezeichnet: dabei nicht neu einblenden */
.inv-grid.shop-no-anim .inv-card {
  animation: none;
}

/* Zufälliges Portrait links, Begrüßungstext rechts */
.shop-greeting {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
  animation: cardRise 0.2s ease-out both;
}

.shop-merchant-img {
  width: 120px;
  flex: 0 0 120px;
  object-fit: cover;
  background: #0c0c0c;
  image-rendering: pixelated;
  border-radius: 999px;
}

.shop-greeting-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  font-style: italic;
  box-sizing: border-box;
  border: none;
  text-align: left;
  padding-left: 0px;
  font-size: 0.9em;
  line-height: 1em;
}

@media (max-width: 600px) {
  .shop-greeting {
    flex-direction: row;
    gap: 8px;
  }

  .shop-merchant-img {
    width: 90px;
    flex: 0 0 auto;
    height: 90px;
  }
}

/* Desktop: Händler-Popup breiter, Karten zweispaltig, damit das Sortiment
   ohne Scrollen passt. Per :has() statt Extra-Klasse, weil Alerts/Confirms
   dasselbe Overlay wiederverwenden und dann automatisch wieder schmal sind. */
@media (min-width: 900px) {
  .dialog-box:has(.shop-greeting) {
    max-width: 860px;
    max-height: 90%;
  }

  .dialog-box:has(.shop-greeting) .inv-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 8px;
  }

  .shop-greeting .shop-merchant-img {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
  }
}

.shop-card-bought {
  opacity: 0.45 !important;   /* !important schlägt die cardRise-Animation (fill-mode both) */
  filter: grayscale(1);
}

/* Pfeil am Shirt-Symbol: besser / schlechter / gleich als das angelegte Item.
   Die Zahlen dazu stehen im Tooltip des Symbols. */
.shop-equip-mark {
  margin-left: 2px;
  font-size: 0.75em;
}

/* Tooltips beim Händler können länger werden: umbrechen statt aus dem Popup laufen */
.shop-flag[aria-label]:hover::after {
  white-space: normal;
  width: max-content;
  max-width: 240px;
  text-align: left;
  line-height: 1.2em;
}

/* "×2" neben dem Preis: hat der Spieler schon. Tooltip kommt von .inv-liker */
.shop-owned-badge {
  padding: 0 6px;
  border: 1px solid var(--c-border-color);
  border-radius: 999px;
  color: #b1b1b1;
  font-size: 0.85em;
}

/* === E. DATA FEEDBACK === */

/* Top-Bar value flash (Züge/Konto): grün bei Zuwachs, rot bei Verlust */

@keyframes valuePopUp {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
    color: var(--c-success);
    text-shadow: 0 0 8px var(--c-success);
  }
  100% {
    transform: scale(1);
    text-shadow: none;
  }
}

@keyframes valuePopDown {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
    color: var(--c-danger);
    text-shadow: 0 0 8px var(--c-danger);
  }
  100% {
    transform: scale(1);
    text-shadow: none;
  }
}

.value-flash-up {
  animation: valuePopUp 0.6s ease-out;
  display: inline-block;
}

.value-flash-down {
  animation: valuePopDown 0.6s ease-out;
  display: inline-block;
}

/* Move counter critical warning */

@keyframes moveBlink {
  0%,
  100% {
    color: var(--c-danger);
    opacity: 1;
  }
  50% {
    color: #fff;
    opacity: 0.7;
  }
}

.moves-critical {
  animation: moveBlink 0.8s ease-in-out infinite;
}

/* ==========================================
   ANTI-FLICKER & SCROLL FIXES (MOBILE)
    ========================================== */

.board-content, #text-output, .chat-messages-box, #jigsaw-pieces-pool, .inv-grid, .item-clue-column {
  -webkit-overflow-scrolling: touch;
  backface-visibility: hidden;
  will-change: auto;
}

/* Mobile compositor safety: avoids clipped corners/half-painted overlays on some devices */

@media (hover: none), (pointer: coarse) {
  #boss-world, .boss-entity {
    transition: none !important;
  }

  #game-dialog-overlay, .security-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
  }

  .board-content, #text-output, .chat-messages-box, #jigsaw-pieces-pool, .inv-grid, .item-clue-column {
    transform: none !important;
    will-change: auto !important;
    backface-visibility: visible;
  }

}

/* Verhindert versehentliches Markieren/Auswählen von Bildern beim Wischen */

#dialog-message, .ach-desc, .chat-item .chat-body, .inline-muted, .text-muted-light {
  color: #fff;
  line-height: 1.1em;
}

#dialog-message b {
  font-weight: 400;
  color: var(--c-primary);
}

#dialog-message .inv-name {text-align: left;}

#text-output {
  color: #ffffff;
  /* height: 100%; */
}

#text-output b, #text-output strong {
  color: var(--c-primary);
}

/* FÜR TA */

#text-output.ta-mode-output {
  color: #d9d9d9;
  font-size: 1em;
  line-height: 1em;
}

.instant-load button.btn-location {
  font-size: 0.9em;
  border: 1px solid #fff;
  background: transparent;
  box-shadow: none;
  border-radius: 6px;
  color: #fff;
  text-align: left;
  width: auto;
  display: inline-block;
}

.instant-load button.btn-location:hover {
  background: var(--c-primary) !important;
  color: #000 !important;
  border-color: var(--c-primary) !important;
}

.file-box, .ach-item, .chat-messages-box, .result-panel, .perk-card, .lobby-card, .mp-player-card {
  background: var(--c-bg-lighter);
  border-color: #525252 !important;
  box-shadow: var(--ui-shadow);
}

/* Unified button style */

button, .btn-buy-perk, .btn-popup, .topbar-tool-btn {
  border-radius: 0px;
  border: 1px solid var(--c-border-color);
  transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
  background: transparent;
}

button:hover, .btn-location:hover, .btn-popup:hover, .topbar-tool-btn:hover {
}

button:active, .btn-location:active, .btn-action-main:active, .btn-buy-perk:active, .btn-popup:active, .topbar-tool-btn:active {
  transform: translateY(1px) scale(0.995);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 216, 240, 0.22);
}

button:disabled, .btn-buy-perk:disabled {
  opacity: 0.52 !important;
  filter: saturate(0.68);
}

.btn-buy-perk:hover {
  background-color: var(--c-success);
  color: #000 !important;
  border-color: var(--c-success) !important;
  box-shadow: none;
}

button#btn-save-profile {
  color: #000 !important;
}

/* Unified input style */

input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], textarea, select, #chat-input-field, .auth-input, .mp-input {
  background: #000000;
  color: var(--ui-text);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 9px;
}

input:focus, textarea:focus, select:focus, #chat-input-field:focus, .auth-input:focus, .mp-input:focus {
  outline: none;
  border-color: rgb(255 255 255 / 65%);
}

button:focus-visible, .btn-location:focus-visible, .btn-action-main:focus-visible, .btn-buy-perk:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  outline-offset: 2px;
}

.btn-abort {
  border-color: var(--c-border-color) !important;
  color: #d9d9d9 !important;
  background: var(--c-bg-lighter) !important;
  box-shadow: none;
}

button.btn-abort:hover {
  background: var(--c-bg-light) !important;
  color: #fff !important;
  border-color: var(--c-border-color) !important;
}

/* ==========================================
   TUTORIAL OVERLAY
    ========================================== */

#tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}

.tutorial-step-counter {
  font-size: 0.72em;
  color: #666;
  margin-bottom: 10px;
  letter-spacing: 0.08em;
}

#guided-hotspot-tooltip {
  position: fixed;
  max-width: 340px;
  min-width: 240px;
  background: rgb(15 15 15 / 94%);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--c-primary);
  border-radius: 12px;
  z-index: 9999999999 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(var(--c-primary-rgb, 255,192,0), 0.2);
  padding: 15px;
  pointer-events: auto;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Sprecherzeile im Tutorial-Fliesstext. Der Erzaehler bekommt bewusst keine --
   er bleibt namen- und gesichtsloser Fliesstext. */

/* Wortwechsel, den ein Tutorial-Schritt in den Spieltext nachschiebt */

.tut-banter {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-gray);
}

.tut-line {
  margin-bottom: 12px;
  line-height: 1em;
}

.tut-line:last-child {
  margin-bottom: 0;
}

.tut-speaker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 9px;
  vertical-align: -9px;
}

.tut-speaker img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 38%;
  background: #0c1020;
  border: 2px solid var(--c-primary);
  flex: 0 0 auto;
}

.tut-speaker b {
  color: var(--c-cyan);
  font-size: 0.85em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Kopfzeile im Tutorial-Kasten: runder Sprecher-Avatar neben der Ueberschrift */

.guided-hotspot-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

.guided-hotspot-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  /* Buesten sind 250x338 -- cover + hoher Bildausschnitt setzt den Kopf in den Kreis */
  object-fit: cover;
  object-position: center 50%;
  background: #0c1020;
  border: 2px solid var(--c-primary);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6);
}

#guided-hotspot-tooltip[data-story="1"] .guided-hotspot-avatar {
  border-color: var(--c-primary);
}

/* Gesperrter Klick im Tutorial: kurzer roter Blink am Hinweis-Kasten.
   Bewusst ohne transform -- der wird beim Positionieren gesetzt. */

@keyframes guidedNudge {
  0%, 100% {
    border-color: var(--c-primary);
  }
  30%, 70% {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 3px rgba(208, 52, 81, 0.3), 0 8px 32px rgba(0, 0, 0, 0.8);
  }
}

#guided-hotspot-tooltip[data-nudge="1"] {
  animation: guidedNudge 0.45s ease;
}

/* Reine Erzaehl-Schritte: etwas mehr Platz, sie haben kein Ziel im Interface */

#guided-hotspot-tooltip[data-story="1"] {
  max-width: 400px;
  border-color: var(--c-primary);
}

#guided-hotspot-tooltip[data-story="1"] h3 {
  color: var(--c-primary);
}

#guided-hotspot-tooltip h3 {
  margin: 0;
  font-size: 1.2em;
  color: var(--c-primary);
  text-transform: uppercase;
  font-weight: 400;
}

#guided-hotspot-tooltip p {
  margin: 0;
  font-size: 1.1em;
  color: #fff;
  line-height: 1.1;
}

#guided-hotspot-tooltip .tutorial-step-counter {
  font-size: 0.72em;
  color: #7ea9ff;
  margin-bottom: 10px;
  letter-spacing: 0.08em;
  display: none;
}

#guided-hotspot-tooltip .guided-hotspot-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

#guided-hotspot-tooltip .guided-hotspot-next-btn {
  background: var(--c-primary);
  color: #000;
  border: 1px solid var(--c-primary);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85em;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

#guided-hotspot-tooltip .guided-hotspot-next-btn:hover {
  background: var(--c-primary);
  color: #000 !important;
  border-color: #000 !important;
  box-shadow: 0 4px 12px rgba(var(--c-primary-rgb, 255,192,0), 0.3);
}

#guided-hotspot-tooltip::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgb(15 15 15 / 94%);
  border: 1px solid var(--c-primary);
  transform: rotate(45deg);
}

/* Pfeil-Position kommt aus dem Script (--guided-arrow-x/y), damit er auch
   auf das Ziel zeigt, wenn der Kasten an den Bildrand geschoben wurde. */

#guided-hotspot-tooltip.arrow-bottom::before {
  bottom: -6px;
  left: var(--guided-arrow-x, 24px);
  border-top: none;
  border-left: none;
}

#guided-hotspot-tooltip.arrow-top::before {
  top: -6px;
  left: var(--guided-arrow-x, 24px);
  border-bottom: none;
  border-right: none;
}

#guided-hotspot-tooltip.arrow-right::before {
  right: -7px;
  top: var(--guided-arrow-y, 21px);
  border-bottom: none;
  border-left: none;
}

#guided-hotspot-tooltip.arrow-left::before {
  left: -7px;
  top: var(--guided-arrow-y, 20px);
  border-top: none;
  border-right: none;
}

#guided-hotspot-tooltip.arrow-none::before {
  display: none;
}

/* Mobil schwebt der Hinweis-Kasten sonst mitten ueber dem Spieltext. Hier
   dockt er stattdessen unten an: volle Breite, undurchsichtig, ohne Pfeil.
   Die Inline-Positionierung aus dem Script muss dafuer ueberschrieben werden. */

@media (max-width: 700px) {
  #guided-hotspot-tooltip {
    position: fixed !important;
    left: 6px !important;
    right: 6px !important;
    top: auto !important;
    bottom: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    max-height: 42vh;
    overflow-y: auto;
    padding: 10px 10px;
    background: #0d0f16 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #guided-hotspot-tooltip[data-story="1"] {
    max-width: none !important;
  }

  #guided-hotspot-tooltip::before {
    display: none !important;
  }

  /* Der Kasten meldet seine Hoehe als --guided-dock-h; so viel Platz haelt
     das Spielfeld unten frei. Ohne Tutorial ist der Wert 0. */

  /* !important, weil der Mobile-Block weiter unten padding:0 setzt. */

  #game-container {
    padding-bottom: var(--guided-dock-h, 0px) !important;
  }
}

/* Mobile Menu Optimization */

@media (max-width: 900px) {
  body.menu-active-mobile #screen-left {
    display: none !important;
  }

}

/* --- Haptic & App Feel --- */

body {
  background: radial-gradient(100% 120% at 8% 0%, rgb(87 33 0 / 11%), transparent 43%), radial-gradient(120% 120% at 96% 0%, rgba(255, 64, 176, 0.09), transparent 36%), radial-gradient(140% 130% at 50% 100%, rgba(255, 176, 0, 0.08), transparent 55%), #00030e !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior-y: none;
}

input, textarea {
  user-select: auto;
  -webkit-user-select: auto;
}

img {
  -webkit-touch-callout: none;
  user-drag: none;
  -webkit-user-drag: none;
}

button, .ta_scenario_select {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* =========================================================
   MOBILE-FIXES (Juli 2026) — konsolidiert
   Dieser Block steht bewusst am DATEIENDE, damit er die
   älteren, teils widersprüchlichen Mobile-Regeln weiter
   oben (zwei historische Board-Blöcke) sicher überschreibt.
   ========================================================= */

@media (max-width: 800px) {
  /* --- 1) VOLLE BILDSCHIRMHÖHE NUTZEN ---
     Vorher: #monitor-screen height:auto + #screen-right fix 50vh
     => unter dem Inhalt blieb ein leerer schwarzer Bereich
     (z.B. Chat nutzte nur den halben Screen). Jetzt wird die
     Höhe als Flex-Kette durchgereicht. */

  #monitor-casing {
    width: 100vw;
    height: 100vh;
    max-width: none;
    padding: 0px;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    height: 100dvh;
  }

  #monitor-screen {
    width: 100%;
    border: none;
    overflow: visible;
    height: 100%;
    overflow-y: auto;
  }

  #main-screen {
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  #right-wrap {
    padding: 0px;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
  }

   #location-name-image {
    margin: 0px;
   }

   .lightbox-image-wrapper {
    max-width: 90%;
   }


   .lightbox-image-main {
    min-width: 100%;
   }

  #screen-right {
    flex: 1 1 auto;
    min-height: 0 !important;
    max-height: none !important;
    margin-right: 0;
    padding: 10px 15px;
  }

  /* Chat füllt die verfügbare Höhe, Nachrichtenliste scrollt intern */

  #text-output:has(> .chat-container) {
    height: 100%;
  }

  /* --- 2) TOP-BAR: LOGIN/LOGOUT nicht über der XP-Anzeige ---
     Wird jetzt global geregelt (siehe .top-right-auth weiter oben):
     body.game-active blendet die Auth-Leiste auf allen Größen aus. */

  /* --- 3) DETEKTIV-BOARD: Vollbild statt fester Höhen ---
     Vorher: Overlay height:75% hebelte die bottom-Verankerung aus,
     der AUFLÖSEN-Footer kollidierte mit der COMMAND_INPUT-Leiste.
     Jetzt belegt das Board den Bereich unter der Top-Bar komplett
     und liegt über der Steuerleiste (Schließen via ✕). */

  .board-fullscreen-overlay {
    top: var(--top-bar-height, 60px);
    bottom: 0 !important;
    height: auto !important;
    z-index: 1300;
  }

  #current-location {
    display: none;
  }

  .board-container {
    border: none !important;
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .board-tabs {
    flex-wrap: wrap;
    gap: 1px;
    padding: 5px;
    flex-direction: row;
    flex: 0 0 auto;
  }

  .board-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .board-tab-container {
    height: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .board-split-view {
    gap: 0 !important;
    height: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden !important;
    flex-direction: column !important;
  }

  /* Hinweis-Leiste oben: natürliche Höhe statt 150px/16vh,
     dadurch werden Erklärtexte nicht mehr abgeschnitten */

  .board-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 2px solid var(--c-primary) !important;
    max-width: none;
    background: rgba(0, 0, 0, 0.5);
    align-items: stretch;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 30vh;
    overflow-y: auto !important;
    overflow-x: hidden;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-start;
    gap: 6px;
    padding: 8px !important;
  }

  .board-sidebar .clue-empty {
    width: 100%;
    margin: 4px 0;
    font-size: 0.95em;
  }

  .clue-list-wrapper {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  /* Karten-Bereich nimmt den Rest und scrollt vertikal */

  .board-grid {
    width: 100% !important;
    background: #050505;
    padding-bottom: 10px !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px !important;
    flex: 1 1 auto !important;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  /* ITEM-Tab: wieder kompaktes 2-Spalten-Grid statt riesiger
     horizontal scrollender Karten */

  .item-target-column {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    padding: 8px;
  }

  .item-target-card {
    padding: 8px;
    height: auto;
  }

  /* Footer (Lösung + AUFLÖSEN) kompakt, kollidiert nicht mehr
     mit der Steuerleiste, da das Board nun darüber liegt */

  .board-footer {
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
  }

  #top_bar {
    padding: 6px 8px;
    gap: 4px;
    z-index: 998;
  }

  #topbar_right {
    gap: 3px;
  }

  .matrix-text::before {
    display: none !important;
  }

  #game-container {
    padding: 0;
  }

  .btn-popup {
    padding: 12px;
  }

  .file-body {
    flex-direction: column;
    padding: 0px;
  }

  .file-bio {
    padding: 5px 5px 20px 5px;
  }

  #location-image {
    max-height: 100%;
    max-width: 100%;
    min-height: 130px;
    padding: 5px;
  }

  #quiz_popup {
    padding: 10px;
  }

  #debug-btn {
    right: -70px;
  }

  .jigsaw-container {
    gap: 0px;
    justify-content: flex-start;
  }

  .freq-info {
    padding-top: 0px;
  }

  /* DEV GAME */

  #dev-game-interface {
    padding-bottom: 0px;
    overflow: hidden;
  }

  .dev-slots-grid {
    gap: 10px;
  }

  .boss-hud-item-name {
    display: none;
  }

  .profile-editor-grid {
    grid-template-columns: 1fr;
  }

  .editor-col-right {
    max-height: none;
  }

  .freq-modal-container {
    flex-direction: column;
    align-items: center;
    gap: 0px;
    height: 100%;
  }

  .freq-interface {
    width: 100%;
    max-width: 100%;
  }

  .tl-slot {
    width: 100px;
    height: 140px;
  }

  .tl-pool-card, .dragging-clone {
    width: 90px;
    height: 125px;
  }

  .hl-three-slots .hl-center-column {
    grid-area: center;
    width: 100%;
  }

  .hl-three-slots .hl-drop-slot[data-direction="later"] {
    grid-area: later;
  }

  .hl-three-slots .hl-drop-slot {
    width: 100% !important;
    min-height: 150px;
    height: 150px;
    overflow: hidden;
    text-align: center;
  }

  .hl-slot-body {
    min-height: 120px;
  }

  .hl-candidate-wrapper .hl-card {
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .hl-img-box {
    height: 90px !important;
    width: 50%;
  }

  .suspect-card {
    min-height: auto;
    padding: 8px;
    gap: 10px;
  }

  .suspect-img-wrapper {
    width: 60px;
    height: 131px;
    flex-shrink: 0;
  }

  .games-grid-select {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .game-select-img {
    height: 60px;
  }

  .item-target-header {
    align-items: flex-start !important;
  }

  /* --- FOOTER --- */

  .solution-preview {
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
  }

  #solution_send_btn {
    width: 100%;
    padding: 10px;
  }

}

/* --- BUTTONS GLOBAL */

/* PRIMARY */
button.btn-primary  {width: 100%;padding: 15px;font-size: 1.2em;letter-spacing: 1px;border-radius: 6px;border: none;text-transform: uppercase;cursor: pointer;font-family: var(--font-main);border-radius: 6px;min-height: 42px;height: auto;}

button.primary-confirm {background: var(--c-primary);color: #000;box-shadow: var(--bevel-amber);}

button.primary-confirm:hover {
  background: linear-gradient(180deg, #ffd056 0%, #ffb61c 100%);
  border-color: #d89200 !important;
  color: #1a0f00;
  box-shadow: var(--bevel-amber), 0 0 18px rgba(255, 176, 0, 0.35);
}

button.primary-confirm.active, button.primary-neutral.active, button.primary-confirm.active:hover, button.primary-neutral.active:hover {
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
  background: transparent;
  box-shadow: none;
}

button.primary-cancel {
  /* background: #4b4b4b;
  box-shadow: var(--bevel-up);
  color: #fff; */
  background: rgb(24, 24, 24);
  box-shadow: none;
  border: 2px solid var(--c-border-color);
  color: #fff;
}

button.primary-cancel:hover {
  color: #fff;
  background: #1c1c1c;
  border-color: var(--c-border-color);
  box-shadow: none !important;
}

button.primary-neutral {
    color: #fff;
    background: linear-gradient(180deg, var(--s-2) 0%, var(--s-1) 100%);
    border: 1px solid #2c2c2c;
    box-shadow: var(--bevel-up);
}

button.primary-neutral:hover {
  background: var(--c-primary);
  border-color: var(--c-primary) !important;
  color: #000;
  box-shadow: none !important;
}

button:active, .ta_scenario_select:active {
  transition: transform 0.05s ease;
  transform: translateY(2px) scale(0.99);
  box-shadow: var(--bevel-down);
  transition-duration: 0.04s;
}


/* SECONDARY */

.btn-secondary {
  width: auto;
  padding: 10px;
  font-size: 1.1em;
  border: 1px solid var(--c-border-color);
  text-transform: none;
  cursor: pointer;
  font-family: var(--font-main);
  border-radius: 6px;
  height: auto;
  /* white-space: nowrap; */
}

.btn-secondary.visited {
  background: #595959;
  border-color: var(--hairline);
  color: #ffffff;
  opacity: 0.4;
  box-shadow: none;
}

/* Gesperrter Ort (PUZZLE): besucht, aber noch nicht gelöst */
.btn-secondary.location-blocked {
  /* border: 1px solid var(--c-danger) !important; */
  background: #492828;
}

.btn-secondary.visited:hover {
  opacity: 1;
}

.secondary-confirm {
  color: #fff;
  background: var(--c-bg-lighter);
  border-color: #595959;
}

.secondary-cancel {
  color: #fff;
  border-color: #fff;
}

.secondary-confirm:hover {
  background: var(--c-primary);
  color: #000;
  box-shadow: 0 0 15px var(--c-primary) !important;
}

.secondary-cancel:hover {
  color: #000;
  background: #fff;
  box-shadow: none;
  border-color: #fff;
}

.secondary-neutral {
  color: #fff;
}

.secondary-neutral:hover {
  color: #000;
  box-shadow: none;
  background: var(--c-primary);
}

.btn-primary.primary-neutral.btn-detective-board {
  background: var(--c-success);
  color: #000;
  box-shadow: var(--bevel-green);
}

.btn-primary.primary-neutral.btn-detective-board:hover {
  box-shadow: var(--bevel-green), 0 0 18px rgb(0 255 50 / 35%) !important;
  border-color: var(--c-success) !important;
}


/* MISC BUTTONS */
.btn-secondary.extra-hint-btn {
  font-size:0.9em;
  text-align: left;
}

.btn-jigsaw-help {
  white-space: pre;
}

#quiz_button_wrap .btn-secondary {
  font-size: 0.9em;
  width: 100%;
  white-space: normal;
  background: var(--c-primary);
  color: #000;
  box-shadow: var(--bevel-amber);
  border: none !important;
}

.btn-interrogate-encounter, .btn-bribe-encounter {
  font-size: 1em !important;
}



/* Sanfter Standard-Hover statt hartem Schwarz */

button:hover {
  background: var(--s-3);
  color: var(--ui-text);
  border-color: var(--c-primary);
  box-shadow: var(--bevel-up), 0 0 10px rgba(255, 176, 0, 0.12);
}

/* Tastatur-Fokus sichtbar machen */

button:focus-visible, input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --- 2) PRIMÄRE AKTIONEN (Amber-CTA) ------------------- */

.btn-action-main {
  background: linear-gradient(180deg, #ffc23d 0%, #ffab00 100%);
  border: none;
  color: #000;
  box-shadow: var(--bevel-amber);
  border-radius: 6px;
  font-size: 0.9em;
  padding: 5px 10px;
  /* text-transform: none; */
  min-height: 42px;
}

.btn-action-main.btn-bribe-encounter {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}

.btn-action-main.btn-bribe-encounter:hover {
  background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    border-color: #fff !important;
}

.btn-action-main:hover, #dialog-buttons .btn-action-main:hover, .btn-action-main.btn-travel:hover {
  background: linear-gradient(180deg, #ffd056 0%, #ffb61c 100%) !important;
  border-color: #d89200 !important;
  color: #1a0f00 !important;
  box-shadow: var(--bevel-amber), 0 0 18px rgba(255, 176, 0, 0.35) !important;
}

.btn-action-main:active, .btn-location:active {
  box-shadow: var(--bevel-amber-down);
}

.btn-action-main.btn-travel {
  box-shadow: var(--bevel-amber), 0 0 14px rgba(255, 176, 0, 0.22);
}

/* --- 3) SEKUNDÄRE WERKZEUGE (Navy statt Grau) ---------- */

.btn-action-main.btn-detective-board, .btn-action-main.btn-jobs, .btn-action-main.btn-player, .btn-action-main.btn-inventory-main {
  background: linear-gradient(180deg, var(--s-3) 0%, var(--s-2) 100%) !important;
  border: 1px solid #5b5b5b;
  color: var(--ui-text) !important;
  box-shadow: var(--bevel-up) !important;
  text-shadow: none;
}

.btn-action-main.btn-detective-board:hover, .btn-action-main.btn-jobs:hover, .btn-action-main.btn-player:hover, .btn-action-main.btn-inventory-main:hover {
  border-color: var(--c-primary) !important;
  color: #fff !important;
  box-shadow: var(--bevel-up), 0 0 14px rgba(255, 176, 0, 0.18);
}

.btn-action-main.btn-detective-board:active, .btn-action-main.btn-jobs:active, .btn-action-main.btn-player:active, .btn-action-main.btn-inventory-main:active {
  box-shadow: var(--bevel-down);
}

/* --- 5) TOP-BAR & STATUS ------------------------------- */

#top_bar {
  background: #1f1f1f;
  border-bottom: 1px solid rgb(33 33 33);
}

.game-meta-grid .meta-label-all, #dialog-title .meta-label-all {
  background: rgb(23 23 23);
  border: 1px solid var(--c-border-color);
  border-radius: 4px;
}

.xp-bar-fill {
  height: 100%;
  width: 0%;
  transition: width 0.5s ease-out;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--c-success));
  box-shadow: 0 0 10px rgba(255, 176, 0, 0.45);
}

/* --- 6) PANELS & FLÄCHEN (Struktur statt Grau) --------- */

#game-container {
  background-color: var(--s-0);
}

#screen-left {
  background: #1f1f1f;
}

#button-container {
  background: transparent;
}

#controls-area {
  align-self: stretch;
  background: var(--s-1);
  border-top: 1px solid var(--hairline);
}

#controls-area::before {
  content: "[ COMMAND_INPUT ]";
  position: absolute;
  top: -7px;
  right: 20px;
  font-size: 0.8rem;
  padding: 0 10px;
  letter-spacing: 2px;
  background: var(--s-1);
  color: var(--ui-text-dim);
}

/* Hauptmenü */

.home-panel {
  border-radius: 8px;
  padding: 14px 16px;
  background: #191919;
  /* border: 1px solid var(--c-border-color); */
}

.home-hs-tabs .hs-tab-btn {
  box-shadow: none;
}

.home-hs-tabs .hs-tab-btn.active {
  background: #181818;
  color: #fff;
  border-color: var(--c-border-color);
  border-bottom-color: transparent;
}

/* Dialoge */

.dialog-box {
  padding: 30px;
  width: 80%;
  max-width: 500px;
  text-align: center;
  max-height: 80%;
  overflow: auto;
  position: relative;
  animation: dialogPopIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: linear-gradient(180deg, var(--s-1) 0%, var(--s-0) 100%);
  border: 2px solid #525252;
  border-radius: 8px;
}

/* --- 7) DETEKTIV-BOARD --------------------------------- */

.board-tabs {
  display: flex;
  background: var(--s-0);
  border-bottom: 1px solid var(--hairline);
}

.board-tab:hover {
  background: linear-gradient(180deg, var(--s-3) 0%, var(--s-2) 100%);
  color: #fff;
}

.board-tab.active {
  background: linear-gradient(180deg, #ffc23d 0%, #ffab00 100%);
  color: #1a0f00;
  box-shadow: var(--bevel-amber);
}

.board-footer {
  background: var(--s-1);
  border-top: 1px solid var(--c-border-color);
}

/* Leerer Slot bleibt neutral grau, erst die Auswahl (.filled) faerbt ihn orange */

.sol-slot {
  background: var(--s-2);
  border: 1px solid var(--c-border-color);
  border-radius: 3px;
}

.sol-slot.filled {
  border-color: var(--c-primary);
  color: #fff;
  box-shadow: 0 0 8px rgba(255, 176, 0, 0.2);
}

.suspect-card {
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(180deg, var(--s-2) 0%, var(--s-1) 100%);
  border: 1px solid var(--hairline);
  border-radius: 0px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.suspect-card:hover {
}

.btn-interrogate {
  background: transparent;
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
  width: 100%;
  cursor: pointer;
  font-size: 1em;
  padding: 8px 4px;
  border-radius: 3px !important;
  box-shadow: var(--bevel-up);
}

.item-target-card {
  background: linear-gradient(180deg, var(--s-2) 0%, var(--s-1) 100%);
  border: 1px solid var(--hairline);
  border-radius: 4px;
}

.item-target-card:hover {
  border-color: var(--c-primary);
  box-shadow: 0 0 12px rgba(255, 176, 0, 0.15);
}

/* --- 8) SONSTIGE FLÄCHEN ------------------------------- */

.credits-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--s-1);
  border: 1px solid var(--hairline);
  border-radius: 4px;
}


@media (hover: none), (pointer: coarse) {
  .suspect-card:hover {
    transform: none;
  }

  .dialog-box, .security-box, .file-box, .menu-container, #instructions-screen {
    animation: none !important;
  }

}

/*
   COMMUNITY-EDITOR */

.editor-form label {
  display: block;
  margin-top: 10px;
  font-size: 0.9em;
  color: var(--ui-text-dim);
}

.editor-form h3 {
  color: var(--c-primary);
  margin: 10px 0 5px 0;
  font-weight: 400;
}

.editor-form input, .editor-form select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  font-family: inherit;
  font-size: 1em;
}

.editor-form input.pe-input-error {
  border-color: var(--c-danger) !important;
  color: var(--c-danger);
  box-shadow: 0 0 0 1px var(--c-danger);
}

.pe-tag-preview b {
  color: #fff;
  font-weight: 400;
}

.pe-tag-preview {
  margin-top: 4px;
  min-height: 1.2em;
  font-size: 0.9em;
  color: var(--ui-text-dim);
}

.pe-field-error {
  margin-top: 4px;
  font-size: 0.9em;
  color: var(--c-danger);
}

.editor-form .row {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.editor-form .row input {
  flex: 1;
  min-width: 0;
}

.editor-form .upload-btn {
  padding: 8px 15px;
  height: 43px;
  flex-shrink: 0;
  margin-top: 5px;
  background: #000;
  border-radius: 6px;
  color: #fff;
  border: 1px solid #fff;
}

.editor-form .upload-btn:hover {
  background: #fff;
  color: #000;
  box-shadow: none;
}

.editor-form .hint {
  font-size: 0.8em;
  color: var(--ui-text-dim);
}

.editor-form-scroll {
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 10px;
  padding-left: 5px;
}

.editor-section {
  margin-top: 20px;
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
}

.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.editor-loc-card {
  margin-bottom: 10px;
  padding: 10px;
  background: var(--s-1);
  border: 1px solid var(--hairline);
}

.editor-loc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ui-text);
}

.editor-remove-btn {
  background: transparent !important;
  border: none !important;
  color: var(--c-danger) !important;
  padding: 2px 6px;
}

.chip {
  display: inline-block;
  background: var(--s-1);
  padding: 2px 8px;
  border: 1px solid var(--hairline-bright);
  border-radius: 2px;
  font-size: 0.8em;
  margin: 2px;
  color: var(--ui-text);
}

.chip span {
  cursor: pointer;
  color: var(--c-danger);
  margin-left: 5px;
}

.thumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 10px;
}

.thumb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--s-1);
  padding: 5px;
  border: 1px solid var(--c-border-color);
  width: 31%;
}

.thumb-item img {
  width: auto;
  height: 110px;
  object-fit: contain;
  border: 1px solid var(--c-border-color);
}

.thumb-item span {
  font-size: 0.75em;
  color: #fff;
  white-space: nowrap;
}

.editor-form .hs-table img {
  height: 60px;
  object-fit: cover;
  border: none;
  display: block;
  margin: 0 auto;
}

.editor-form .hs-table button {
  padding: 5px 10px;
  font-size: 1em;
  border-color: var(--c-primary);
}

#pe-games-table.hs-table th {text-align: left;}
#pe-games-table td {font-size: 1.1em;}
#pe-games-table tr:hover {background: var(--c-bg-lighter);}

/* Aktionsleiste: Editor-Buttons dürfen mehrzeilig umbrechen */

#button-container-main-actions .btn-editor-action {
  white-space: normal;
  height: auto;
  min-height: 46px;
  padding: 12px 8px;
  line-height: 1.2;
  font-size: 1.2em;
}

/* Editor-Overlay: Tab-Leiste + X wie Minigames-Hub / Bilderrätsel */

/* Startet unter der #top_bar (Offset setzt module_player_editor.js) */
.pe-modal {
  position: absolute;
  top: var(--pe-top-offset, 0px);
  left: 0;
  width: 100%;
  height: calc(100% - var(--pe-top-offset, 0px));
  background: #000;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 25px;
}

/* Der Chat läuft im Textfenster unter dem Overlay */
body.chat-menu-open .pe-modal {
  display: none;
}

/* Im Editor zeigt die Topbar statt Konto/Züge die Editor-Tokens (#pe-token-grid) */
body.editor-open #top_bar .game-meta-grid:not(.pe-token-grid) {
  display: none;
}

body:not(.editor-open) .pe-token-grid {
  display: none;
}

.pe-token-count {
  color: var(--c-success);
}

.pe-header {
  flex: 0 0 auto;
}

.pe-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0px 5px;
  margin-top: 12px;
}

/* ?-Tooltips im Formular (Basis: .bribe-help / .bribe-help-tip) */
.pe-tip {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}

.pe-tip .pe-tip-btn {
  width: 22px;
  height: 22px;
  font-size: 14px;
}

/* .pe-tip davor: die Basis .bribe-help-tip steht weiter unten und würde sonst gewinnen */
.pe-tip .pe-tip-box {
  left: 0;
  right: auto;
  bottom: auto;
  top: calc(100% + 6px);
  width: min(340px, 80vw);
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  z-index: 20;
}

.pe-tip-btn.open + .pe-tip-box,
.pe-tip-btn:focus-visible + .pe-tip-box {
  display: block;
}

@media (hover: hover) {
  .pe-tip-btn:hover + .pe-tip-box {
    display: block;
  }
}

.pe-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 15px;
}

.pe-actions:empty {
  display: none;
}

/* Im Overlay scrollt .pe-body, die Formulare brauchen keinen eigenen Scrollbereich */
.pe-modal .editor-form-scroll {
  max-height: none;
  overflow: visible;
}

/* Dashboard: links eigene Einreichungen, rechts die der anderen */

.pe-dashboard {
  display: flex;
  gap: 20px;
  height: 100%;
}

.pe-dash-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pe-panel {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pe-panel .home-panel-title {
  display: block;
  margin-bottom: 10px;
}

.pe-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pe-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pe-row-sub {
  color: #666;
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pe-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pe-status {
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.82em;
  white-space: nowrap;
}

.pe-status-pending {
  color: var(--c-primary);
}

.pe-status-approved {
  color: var(--c-success);
}

.pe-status-rejected {
  color: var(--c-danger);
}

.pe-feed-text {
  min-width: 0;
  color: var(--ui-text);
}

.pe-feed-text b {
  color: #fff;
  font-weight: 400;
}

@media (max-width: 800px) {
  .two-col-grid {
    grid-template-columns: 1fr;
  }

  .pe-modal {
    padding: 10px;
  }

  .pe-header .board-tab {
    padding: 6px;
    font-size: 0.9em;
  }

  /* Mobil hängt der Tooltip an der ganzen Überschrift/Zeile, damit er nicht über den Rand ragt */
  .pe-tip {
    position: static;
  }

  .editor-form h3, .editor-form label {
    position: relative;
  }

  .pe-tip .pe-tip-box {
    width: auto;
    right: 0;
  }

  .pe-dashboard {
    flex-direction: column;
    height: auto;
  }

  .pe-dash-col, .pe-panel {
    flex: 0 0 auto;
  }

  .pe-list {
    overflow: visible;
  }

}

/* ==========================================
   BESTECHEN-MINISPIEL (Popup im Dialog-Overlay)
   ========================================== */

/* Kopf, Aktionen, Balken untereinander (Balken direkt über BEFRAGEN).
   Desktop: Popup breiter, die Aktionen stehen dort zweispaltig. */
.bribe-mini {
  text-align: left;
}

@media (min-width: 900px) {
  .dialog-box:has(.bribe-mini) {
    max-width: 760px;
    max-height: 90%;
  }

  .bribe-mini .bribe-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.bribe-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

/* Exakt im Seitenverhaeltnis der Grafiken (250x338). Die drei Stimmungen liegen
   als Ebenen uebereinander, eingeblendet wird nur die aktive (data-mood) - ein
   src-Tausch wuerde das skalierte Pixel-Bild jedes Mal anders rastern. */
.bribe-portrait {
  position: relative;
  overflow: hidden;
  height: 125px;
  width: auto;
  aspect-ratio: 250 / 338;
  /* border: 2px solid var(--c-border-color); */
  border-radius: 4px;
  flex-shrink: 0;
  background: #000;
}

.bribe-portrait-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0;
}

.bribe-portrait[data-mood="like"] .bribe-portrait-layer[data-mood="like"],
.bribe-portrait[data-mood="neutral"] .bribe-portrait-layer[data-mood="neutral"],
.bribe-portrait[data-mood="dislike"] .bribe-portrait-layer[data-mood="dislike"] {
  opacity: 1;
}

.bribe-head-info {
  flex: 1;
  min-width: 0;
}

.bribe-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bribe-pod-name {
  color: var(--c-primary);
  font-size: 1.2em;
  min-width: 0;
}

/* Zuege + Anleitungs-? oben rechts; der Tooltip klappt darunter auf */
.bribe-head-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Zuege-Anzeige im Popup-Kopf (gleiche Optik wie in der Top-Bar) */
.bribe-moves {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 0.8em;
  color: #fff;
  white-space: nowrap;
  background: rgb(23 23 23);
  border: 1px solid var(--c-border-color);
  border-radius: 4px;
}

.bribe-moves img {
  height: 18px;
  width: auto;
}

.bribe-section-label {
  margin-bottom: 6px;
  font-size: 0.75em;
  letter-spacing: 1px;
  color: var(--c-gray-light);
}

.bribe-section-label span {
  letter-spacing: 0;
  opacity: 0.7;
}

/* Balken-Block: sitzt direkt ueber dem BEFRAGEN-Button */
.bribe-stop-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border-color);
}

.bribe-chance-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.9em;
  color: #fff;
  margin-bottom: 8px;
}

.bribe-chance-value {
  color: var(--c-primary);
  font-size: 1.2em;
}

.bribe-help {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  font-family: var(--font-main);
  font-size: 1em;
  line-height: 1;
  color: var(--c-gray-light);
  background: #181818;
  border: 1px solid var(--c-border-color);
  border-radius: 50%;
  cursor: help;
  box-shadow: none;
}

.bribe-help:hover, .bribe-help.open {
  color: var(--c-primary);
  border-color: var(--c-primary);
  background: #181818;
  box-shadow: none;
}

.bribe-help-tip {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  padding: 10px 12px;
  font-size: 0.9em;
  line-height: 1.2;
  color: #fff;
  background: #0c0c0c;
  border: 1px solid var(--c-primary);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.bribe-help-tip b { color: var(--c-primary); font-weight: 400; }

/* Anleitung im Kopf: klappt nach unten auf, rechtsbuendig am ?-Button */
.bribe-help-tip.bribe-help-tip-head {
  left: auto;
  right: 0;
  bottom: auto;
  top: calc(100% + 6px);
  width: min(360px, 80vw);
}

.bribe-help.open + .bribe-help-tip,
.bribe-help:focus-visible + .bribe-help-tip {
  display: block;
}

@media (hover: hover) {
  .bribe-help:hover + .bribe-help-tip {
    display: block;
  }
}

.bribe-bar {
  position: relative;
  height: 40px;
  background: #101010;
  border: 1px solid var(--c-border-color);
  border-radius: 3px;
  overflow: hidden;
}

.bribe-bar-fill {
  position: absolute;
  top: 0; left: 25%; bottom: 0;
  width: 50%;
  background: linear-gradient(90deg, var(--c-primary-dim), var(--c-primary) 50%, var(--c-primary-dim));
  box-shadow: 0 0 10px rgba(255, 176, 0, 0.35);
}

/* Goldene Mitte: Treffer hier = keine Zugkosten + zwei Hinweise */
.bribe-bar-gold {
  position: absolute;
  top: 0; bottom: 0;
  left: 48%;
  width: 4%;
  background: linear-gradient(90deg, #b8860b, #ffe066 50%, #b8860b);
  box-shadow: 0 0 8px rgba(255, 224, 102, 0.8);
  pointer-events: none;
  z-index: 1;
}

.bribe-bar-needle {
  display: none;
  position: absolute;
  top: -2px; bottom: -2px;
  width: 3px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  z-index: 2;
}

.bribe-bar.bribe-result-success .bribe-bar-fill {
  background: linear-gradient(90deg, #0a7a3f, var(--c-success) 50%, #0a7a3f);
  box-shadow: 0 0 12px rgba(35, 255, 131, 0.5);
}

.bribe-bar.bribe-result-fail .bribe-bar-fill {
  background: linear-gradient(90deg, #5a1020, var(--c-danger) 50%, #5a1020);
  box-shadow: 0 0 12px rgba(208, 52, 81, 0.5);
}

.bribe-bar.bribe-result-gold {
  border-color: #ffe066;
  box-shadow: 0 0 14px rgba(255, 224, 102, 0.7);
}

.bribe-bar.bribe-result-gold .bribe-bar-gold {
  animation: bribe-gold-flash 0.3s ease-in-out 3;
}

@keyframes bribe-gold-flash {
  50% { background: #fff; box-shadow: 0 0 16px #fff; }
}

.bribe-gold-text { color: #ffe066; }

/* Waehrend des Zeiger-Stoppens ist das ganze Popup Tippflaeche */
.bribe-mini.bribe-spinning {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Status beim Zeiger-Stoppen unter dem Balken (Platz ist fest reserviert, nichts springt) */
.bribe-stop-status {
  margin-top: 6px;
  min-height: 1.4em;
  text-align: center;
  font-size: 1em;
  color: #fff;
}

.bribe-mini.bribe-spinning .bribe-breakdown { display: none; }

/* Reaktion auf Verhandlungs-Aktionen (Grafik-Tausch passiert im JS) */
.bribe-portrait.bribe-react-like {
  animation: bribe-react-hop 0.45s ease-out;
}

.bribe-portrait.bribe-react-dislike {
  animation: bribe-react-shake 0.4s ease-in-out;
}

.bribe-portrait.bribe-react-neutral {
  border-color: var(--c-gray-light);
}

@keyframes bribe-react-hop {
  30% { transform: translateY(-6px); }
  60% { transform: translateY(0); }
  80% { transform: translateY(-2px); }
}

@keyframes bribe-react-shake {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .bribe-portrait.bribe-react-like,
  .bribe-portrait.bribe-react-dislike,
  .bribe-bar.bribe-result-gold .bribe-bar-gold {
    animation: none;
  }
}

/* Aufschluesselung des Trefferbereichs: Tooltip am i-Button (Basis aus .bribe-help-tip) */
.bribe-breakdown {
  color: var(--c-gray-light);
  width: 50%;
  right: 0px;
  left: inherit;
}

/* ABBRECHEN und BEFRAGEN nebeneinander (nur in diesem Popup) */
.dialog-box:has(.bribe-mini) #dialog-buttons {
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}

.dialog-box:has(.bribe-mini) #dialog-buttons button {
  flex: 1 1 0;
  min-width: 0;
  max-width: 300px;
  margin: 0;
}

.bribe-up { color: var(--c-success); }
.bribe-down { color: var(--c-danger); }
.bribe-neutral { color: var(--c-gray-light); }

/* Aktionen als einzeilige Zeilen: Name links, Kosten rechts.
   Handy einspaltig, Desktop zweispaltig (siehe oben). */
.bribe-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.bribe-action {
  display: flex;
}

.bribe-action-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  line-height: 1.2em;
  font-family: var(--font-main);
  font-size: 1em;
  text-align: left;
  background: #181818;
  color: #fff;
  border: 1px solid var(--c-border-color);
  border-radius: 3px;
  cursor: pointer;
}

.bribe-action-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  box-shadow: none;
  background: #181818;
}

.bribe-action-btn:active, #monitor-audio-btn:active {
  transform: none;
  box-shadow: none;
}

.bribe-action.selected .bribe-action-btn {
  border-color: var(--c-primary);
  /* background: #241b04; */
  color: var(--c-primary);
}

/* Item-Geschenk-Aktion (Slot 6, wenn Lieblings-Item im Inventar liegt) */
.bribe-action-gift .bribe-action-btn {
  border-color: var(--c-cyan);
  background: #0a1a1e;
  color: var(--c-cyan);
}

.bribe-action-gift .bribe-action-btn:hover {
  border-color: var(--c-cyan);
  color: #fff;
}

.bribe-action-gift .bribe-action-cost {
  color: var(--c-cyan);
}

.bribe-action-label {
  flex: 1;
  min-width: 0;
}

.bribe-action-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.bribe-action-cost {
  color: var(--c-gray-light);
  font-size: 0.85em;
  white-space: nowrap;
}

.bribe-action.bribe-unaffordable .bribe-action-btn {
  opacity: 0.45;
}

.bribe-action.bribe-unaffordable .bribe-action-cost {
  color: var(--c-danger);
}

.bribe-mini.bribe-spinning .bribe-actions-panel {
  pointer-events: none;
  opacity: 0.5;
}

@media (max-width: 500px) {
  .bribe-portrait {
    height: 76px;
  }
}

/* ==========================================================================
   TAGES-STREAK (Endscreen) — buildStreakPanelHtml() in script.js
   ========================================================================== */
.result-streak {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.result-streak-days {
  font-size: 1.15em;
  letter-spacing: 0.05em;
  color: var(--c-primary);
}

.result-streak-hint {
  font-size: 0.75em;
  opacity: 0.7;
}

/* ==========================================================================
   AUSRÜSTUNG (Spieler-Menü, 3. Tab) — equipment.js
   Links die "Anziehpuppe" (Avatar + Slots), rechts alle ausruestbaren Items.
   Desktop: Drag & Drop mit der Maus. Touch: ANLEGEN/ABLEGEN + Slot antippen.
   ========================================================================== */
/* Beide Kaesten fuellen die volle Hoehe; laengere Item-Listen scrollen
   innerhalb ihres Kastens. */
.equip-screen-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr);
  align-items: stretch;
  flex: 1 1 0;
  min-height: 0;
}

.equip-doll-panel,
.equip-items-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.equip-doll-panel {
  overflow-y: auto;
}

/* --- Anziehpuppe --- */
.equip-doll {
  margin: auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "s1 av s2"
    "s3 av s4";
  gap: 14px 22px;
  padding-top: 14px;
}

.equip-doll-avatar {
  align-self: center;
  text-align: center;
}

.equip-doll-avatar .player-avatar-preview {
  margin: 0 0 8px;
}

.equip-doll-avatar .player-nameplate {
  font-size: 1.2em;
}

.equip-doll-hint {
  margin-top: 14px;
  font-size: 0.8em;
  color: #747474;
  text-align: center;
  line-height: 1.4;
}

.equip-hint-touch {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .equip-hint-pointer {
    display: none;
  }

  .equip-hint-touch {
    display: inline;
  }
}

/* --- Slots --- */
.equip-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--c-border-color);
  background: var(--c-bg-lighter);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.equip-slot.empty {
  border-style: dashed;
}

/* Kleine Verbindungslinie zum Avatar */
.equip-slot::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 22px;
  border-top: 1px dashed var(--c-border-color);
}

.equip-slot.side-left::after {
  right: -23px;
}

.equip-slot.side-right::after {
  left: -23px;
}

.equip-slot:hover,
.equip-slot.filtered {
  border-color: #fff;
}

.equip-slot.filtered {
  box-shadow: inset 0 0 0 1px #fff;
}

.equip-slot.previewing {
  border-color: var(--c-primary);
}

.equip-slot-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.equip-slot-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.equip-slot-titles {
  min-width: 0;
}

.equip-slot-name {
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 1em;
}

.equip-slot-stat {
  font-size: 0.8em;
  color: #747474;
  line-height: 1.3;
}

.equip-slot-item {
  padding: 6px 8px;
  border: 1px dashed var(--c-border-color);
  background: #000;
  font-size: 0.85em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.equip-slot-item.empty {
  color: #747474;
  text-align: center;
}

.equip-slot-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  font-size: 0.9em;
}

.equip-slot-value {
  color: var(--c-primary);
  white-space: nowrap;
}

.equip-slot.empty .equip-slot-value {
  color: #747474;
}

.equip-slot-diff {
  font-size: 0.9em;
  white-space: nowrap;
}

.equip-slot.just-equipped {
  animation: equip-flash 0.8s ease-out;
}

@keyframes equip-flash {
  0% { box-shadow: inset 0 0 0 2px var(--c-success), 0 0 24px rgba(35, 255, 131, 0.6); }
  100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 transparent; }
}

/* --- Balken --- */
.equip-bar {
  position: relative;
  height: 10px;
  background: #101010;
  border: 1px solid var(--c-border-color);
  border-radius: 3px;
  overflow: hidden;
}

.equip-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--c-primary-dim), var(--c-primary));
  box-shadow: 0 0 10px rgba(255, 176, 0, 0.35);
  transition: width 0.35s ease;
}

.equip-bar-ghost {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.equip-bar-ghost.ghost-up { background: rgba(35, 255, 131, 0.55); }
.equip-bar-ghost.ghost-down { background: rgba(208, 52, 81, 0.6); }

/* --- Item-Liste --- */
.equip-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.equip-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: #000;
  border: 1px solid var(--c-border-color);
  border-radius: 4px;
  color: #b1b1b1;
  font: inherit;
  font-size: 0.8em;
  cursor: pointer;
}

.equip-filter-chip:hover {
  border-color: #fff;
  color: #fff;
}

.equip-filter-chip.active {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.equip-filter-chip img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.equip-chip-count {
  color: #fff;
  opacity: 0.6;
}

.equip-slot-desc {
  margin-top: 10px;
  font-size: 0.85em;
  color: #747474;
  line-height: 1.4;
}

.equip-item-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

.equip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--c-border-color);
  background: var(--c-bg-lighter);
  user-select: none;
}

.equip-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.equip-item-info {
  flex: 1;
  min-width: 0;
}

.equip-item-name {
  color: #fff;
  font-size: 0.88em;
}

.equip-item-meta {
  margin-top: 2px;
  font-size: 0.8em;
  color: #747474;
}

.equip-item-diff {
  font-size: 0.85em;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .equip-item,
  .equip-slot.filled .equip-slot-item {
    cursor: grab;
  }

  .equip-item:hover {
    border-color: #fff;
  }
}

.equip-empty-hint {
  padding: 10px;
  border: 1px dashed var(--c-border-color);
  font-size: 0.9em;
  color: #b1b1b1;
  text-align: center;
  line-height: 1.4;
}

/* .inv-btn bringt flex:1 mit — hier sollen die Buttons aber nicht mitwachsen. */
button.equip-btn-unequip,
button.equip-btn-equip {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 5px 12px !important;
  white-space: nowrap;
}

button.equip-btn-equip {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
}

button.equip-btn-equip:hover {
  background: var(--c-primary);
  color: #000 !important;
}

/* --- Drag & Drop --- */
body.equip-dragging,
body.equip-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

.equip-slot.drop-no {
  opacity: 0.35;
}

.equip-slot.drop-ok {
  border-color: var(--c-primary);
  box-shadow: 0 0 12px rgba(255, 176, 0, 0.25);
}

.equip-slot.drop-hover {
  background: rgba(255, 176, 0, 0.12);
  box-shadow: inset 0 0 0 2px var(--c-primary), 0 0 18px rgba(255, 176, 0, 0.45);
}

.equip-items-panel.drop-ok {
  outline: 1px dashed var(--c-primary);
  outline-offset: -1px;
}

.equip-items-panel.drop-hover {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
  background: rgba(255, 176, 0, 0.06);
}

.drag-source {
  opacity: 0.4;
}

.equip-drag-ghost {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  padding: 6px 10px;
  background: #000;
  border: 1px solid var(--c-primary);
  color: #fff;
  font-size: 0.85em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  transform: rotate(-2deg);
}

/* --- Responsive --- */
@media (max-width: 980px) {
  /* Einspaltig scrollt die ganze Seite, eine zweite Scrollbox nervt auf Touch. */
  .equip-screen-grid {
    grid-template-columns: 1fr;
    flex: 1 0 auto;
  }

  .equip-doll-panel {
    overflow: visible;
  }

  .equip-item-list {
    flex: none;
    overflow: visible;
  }
}

@media (max-width: 600px) {
  .equip-doll {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "av av"
      "s1 s2"
      "s3 s4";
    gap: 8px;
  }

  .equip-slot {
    padding: 8px;
    gap: 6px;
  }

  .equip-slot::after {
    display: none;
  }

  .equip-slot-name {
    font-size: 0.85em;
  }

  .equip-slot-stat {
    font-size: 0.72em;
  }

  .equip-slot-icon {
    width: 18px;
    height: 18px;
  }

  .equip-slot-value-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  button.equip-btn-unequip {
    padding: 4px 8px !important;
    font-size: 0.8em;
  }

  .equip-doll-avatar .player-avatar-preview .generated-avatar {
    width: 84px !important;
    height: 118px !important;
  }

  .equip-doll-avatar .player-nameplate {
    font-size: 1em;
  }

  .equip-chip-label {
    display: none;
  }

  .equip-filter-chip {
    padding: 6px 10px;
  }

  .equip-item {
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  .equip-item-info {
    flex-basis: calc(100% - 30px);
  }

  .equip-item-diff {
    margin-left: 30px;
  }
}

/* --- Symbol im Inventar --- */
button.inv-equip-flag,
span.inv-equip-flag {
  background: none;
  border: none;
  padding: 0;
  margin-right: 6px;
  cursor: pointer;
  vertical-align: -3px;
  line-height: 1;
  position: relative;
}

button.inv-equip-flag img,
span.inv-equip-flag img {
  width: 16px;
  height: 16px;
}

button.inv-equip-flag:hover img {
  transform: scale(1.15);
}

button.inv-style-flag,
span.inv-style-flag {
  background: none;
  border: none;
  padding: 0;
  margin-right: 6px;
  cursor: pointer;
  vertical-align: -3px;
  line-height: 1;
  position: relative;
}

button.inv-style-flag img,
span.inv-style-flag img {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 0 4px rgba(255, 176, 0, 0.6));
}

button.inv-style-flag:hover img {
  transform: scale(1.15);
}

.inv-equip-flag[aria-label]:hover::after,
.inv-style-flag[aria-label]:hover::after {
  left: 0;
  transform: none;
}

/* Beim Haendler sind die Symbole reine Hinweise, nicht anklickbar. */
span.inv-equip-flag.shop-flag,
span.inv-style-flag.shop-flag {
  cursor: help;
  display: inline-block;
}

/* Erklaer-Popup hinter dem Stern auf der Item-Karte */
.style-unlock-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  line-height: 1.3em;
}

.style-unlock-img {
  width: 72px;
  height: auto;
  flex-shrink: 0;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--c-primary);
}

@media (max-width: 700px) {
  .style-unlock-hint {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* =========================================
   BUTTON-HIERARCHIE (Umbau 2026-09)
   - SPIELER: Avatar oben links (mit Perk-Punkte-Bubble)
   - INVENTAR / REISEPASS / SAMMELKARTEN: runde Icon-Buttons unten links neben COVER ANSEHEN
   - ABREISEN / HINWEISE: zweispaltig unter den Ortsbuttons im #button-container
   - #controls-area entfaellt im Spiel, bleibt nur fuer den Editor
   ========================================= */

/* --- Aktionszeile unter den Ortsbuttons --- */

.main-actions-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0px;
  padding-top: 10px;
  /* Gestrichelt statt --hairline: die Hairline ist auf dem fast schwarzen Grund zu
     schwach, um die Ortsbuttons sichtbar von den Hauptaktionen zu trennen. Gleiche
     Optik wie der Trenner in #travel-hints-container. */
}

.main-actions-row > button {
  width: 100%;
  min-height: 46px;
  padding: 10px 8px;
  font-size: 1.1em;
}

/* Waehrend des Textadventures war die alte #controls-area ausgegraut. Die
   Aktionszeile sitzt jetzt woanders, das Lock-Flag haengt aber weiterhin an
   #controls-area - daher ueber :has() nachgezogen. */
#game-container:has(#controls-area.controls-locked-ta) .main-actions-row button {
  opacity: 0.2;
  pointer-events: none;
  filter: grayscale(1);
}

/* --- Zaehler-Badge an Topbar-Icons (Inventar) --- */

.btn-icon-tool .tool-badge {
  position: absolute;
  bottom: 2px;
  right: 3px;
  min-width: 16px;
  padding: 0 3px;
  font-size: 0.75rem;
  line-height: 15px;
  text-align: center;
  color: #000;
  background: var(--c-primary);
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
}

/* Unverteilte Perk-Punkte am Avatar oben links. Die Bubble haengt an
   #user-profile-display, weil #user-prof-header den Avatar rund abschneidet. */
#user-profile-display {
  position: relative;
}

#user-profile-display .tool-badge {
  position: absolute;
  left: 24px;
  bottom: -4px;
  min-width: 16px;
  padding: 0 3px;
  font-size: 0.75rem;
  line-height: 15px;
  text-align: center;
  color: #000;
  border-radius: 8px;
  pointer-events: none;
  z-index: 18;
}

.tool-badge-perk {
  background: #3ddc5a;
}

/* Runde Buttons sind kleiner als die Topbar-Icons: Zaehler an den Rand. */
.btn-meta-round .tool-badge {
  bottom: -3px;
  right: -4px;
}

/* --- Inventar + Reisepass + Sammelkarten unten links --- */

#meta-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 20px;
  margin-top: 10px;
}

#meta-actions .btn-tiny {
  width: 150px;
  padding: 2px 10px;
  border: 1px solid #838383;
  color: #c9c9c9;
  border-radius: 10px !important;
  margin-top: 0;
  font-size: 1em;
  background: transparent;
}

/* Abreise-Bildschirm: Daten-Zeile des aktuellen Spiels ausblenden.
   visibility statt display, damit das Layout nicht springt. */
#screen-left.travel-preview-mode #game_info_wrap {
  visibility: hidden;
}

#meta-actions .btn-tiny.active {
  background: #ffffff;
  border-color: #b8c8d0 !important;
  color: #000;
}

#meta-actions .btn-tiny:hover {
  color: #000 !important;
  border-color: #fff !important;
  background: #d8d8d8;
  box-shadow: none;
}

.btn-meta-round {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 34px;
  padding: 0;
  border-radius: 50% !important;
  /* kein overflow:hidden - sonst wird der aria-label-Tooltip abgeschnitten */
}

.btn-meta-round img {
  max-width: 28px;
  max-height: 28px;
}

/* Die runden Buttons sitzen am linken Rand: Tooltip linksbuendig statt
   zentriert, sonst ragt er beim Inventar links aus dem Bildschirm. */
#meta-actions .btn-meta-round[aria-label]:hover::after {
  left: 0;
  transform: none;
}

/* --- #controls-area verschwindet im Spiel, bleibt im Editor --- */

#controls-area {
  display: none;
}

body.editor-mode #controls-area {
  display: block;
}

@media (max-width: 800px) {
  /* #game_info_wrap ist auf Mobil ausgeblendet, #meta-actions haengt daneben
     im #underscreen-wrap und bleibt damit erreichbar. */
  #meta-actions {
    padding: 0 10px;
    margin-top: 4px;
  }

  .main-actions-row {
    margin-top: 8px;
    padding-top: 8px;
  }

  .main-actions-row > button {
    min-height: 42px;
    font-size: 1rem;
    padding: 8px 4px;
  }

  /* Topbar: Chat, Hilfe, Ende. */
  #button-container-topbar .btn-icon-tool {
    min-width: 42px;
    padding: 0 2px;
  }
}


/* =========================================================
   MOBILES FLACKERN AUF DEM HAUPTSCREEN (Sept. 2026)
   Symptom: mal flackert nur die Kopfleiste, mal nur der Text,
   mal das ganze Bild - und es beruhigt sich, sobald der
   Schreibmaschineneffekt durch ist.

   Ursache ist kein einzelner Fehler, sondern Budget: ueber dem
   Spielbildschirm laufen mehrere Dauer-Animationen, die der
   Browser NICHT auf der GPU halten kann (box-shadow, filter,
   background-position). Jede zwingt ihn, Bild fuer Bild grosse
   Flaechen neu zu zeichnen. Solange zusaetzlich getippt wird,
   reicht das auf dem Handy nicht mehr fuer 60fps und es werden
   halb fertige Frames angezeigt.

   Auf dem Desktop bleibt alles unveraendert.
   ========================================================= */

@media (hover: none), (pointer: coarse) {
  /* #monitor-casing ist mobil der komplette Viewport (100vw x 100dvh).
     casingGlow animiert darauf die box-shadow -> Vollbild-Repaint in
     jedem Frame, dauerhaft. Mobil ist das Gehaeuse ohnehin unsichtbar
     (background: none, box-shadow: none), der Effekt kostet also nur. */
  #monitor-casing {
    animation: none !important;
    box-shadow: none !important;
  }

  /* 600x600-Flaeche mit blur(60px), fixiert und dauerhaft animiert.
     Ein bewegter Weichzeichner ist mit Abstand der teuerste Effekt
     auf der Seite. */
  body::before {
    animation: none !important;
    display: none !important;
  }

  /* Scanline-Raster ueber dem gesamten Viewport (z-index 999999).
     Es liegt ueber allem, wird also bei jedem Repaint darunter
     mitgezeichnet. Eigene Compositor-Ebene -> es wird einmal
     gerastert und danach nur noch drueberkopiert. */
  body::after {
    transform: translateZ(0);
    will-change: transform;
  }

  /* CRT-Flackern des Standortbilds: animiert filter und opacity und
     haelt das Bild dadurch dauerhaft auf einer eigenen GPU-Ebene.
     Der Farbfilter des Monitor-Farbschalters (--c-imgoverlay) bleibt
     als statischer Wert erhalten. */
  #location-image-wrapper {
    animation: none !important;
    filter: var(--c-imgoverlay);
  }

  /* Wandernde Scanlines auf dem Bild: animiert background-position,
     das laesst sich nicht kompositieren -> Repaint pro Frame. */
  #location-image-wrapper::after {
    animation: none !important;
  }
}

/* --- Viewport-Hoehe festnageln -------------------------------
   body hatte min-height: 100vh, #monitor-casing aber height: 100dvh.
   100vh ist auf Mobilgeraeten die GROSSE Viewporthoehe (Adressleiste
   eingeklappt), 100dvh die aktuelle. Solange die Adressleiste sichtbar
   ist, ist die Seite dadurch um genau deren Hoehe scrollbar. Jede
   Wischbewegung klappt die Leiste ein oder aus, 100dvh aendert sich
   waehrenddessen laufend und das komplette Layout wird neu berechnet -
   sichtbar als Flackern ueber den ganzen Screen.

   100svh ist die KLEINE Viewporthoehe und damit konstant: kein
   Seitenscroll, keine Adressleisten-Animation, keine Relayouts.
   ------------------------------------------------------------- */

@media (max-width: 800px) {
  body {
    min-height: 100svh;
  }

  #monitor-casing {
    height: 100svh;
  }

  /* Chat-Eingabe fokussiert: auf den Bereich über der Tastatur legen.
     --vv-height / --vv-top setzt script.js (initChatKeyboardViewport). */
  body.chat-keyboard-open #monitor-casing {
    position: fixed;
    top: var(--vv-top, 0px);
    left: 0;
    height: var(--vv-height, 100svh);
  }

  /* Restliche Überdeckung ausgleichen (misst script.js: --chat-kb-extra) */
  body.chat-keyboard-open .chat-container {
    padding-bottom: var(--chat-kb-extra, 0px);
  }

  /* Ortsbild beim Tippen ausblenden, sonst bleibt kaum Platz für Nachrichten */
  body.chat-keyboard-open #screen-left {
    display: none;
  }
}

/* -------------------------------------------------------------
   MOBIL: Ortsbild (#screen-left) scrollt mit dem Text weg.
   #screen-left liegt als Overlay über #screen-right, ein
   Platzhalter (::before, Höhe --sl-h) reserviert den Platz.
   --sl-h / --sl-shift setzt script.js (scroll + ResizeObserver).
   Chat ausgenommen: der braucht die feste Höhe von #screen-right.
   ------------------------------------------------------------- */

@media (max-width: 800px) {
  #main-screen.sl-scroll-away:not(:has(.chat-container)) {
    position: relative;
  }

  #main-screen.sl-scroll-away:not(:has(.chat-container)) #screen-left {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    margin-bottom: 0;
    transform: translateY(calc(-1 * var(--sl-shift, 0px)));
    will-change: transform;
  }

  #main-screen.sl-scroll-away:not(:has(.chat-container)) #screen-right::before {
    content: "";
    display: block;
    height: calc(var(--sl-h, 0px) + 10px);
  }
}


/* =========================================================
   VERHÖR (module_verhoer.js)
   Beweisakte im Board, Footer-Slots und der Verhörraum.
   Gleiche Bausteine wie der Rest des Boards: dunkle Flächen,
   Hairlines, Amber als einzige Akzentfarbe, Großbuchstaben-Labels.
   ========================================================= */

/* --- Beweiskarte (Sidebar und Verhörraum) --- */

.verhoer-howto {
  font-size: 0.95em;
  color: var(--ui-text-dim);
  margin: -4px 0 10px;
}

.verhoer-group { margin-bottom: 12px; }

.verhoer-group-label {
  font-size: 1em;
  letter-spacing: 1px;
  color: var(--c-gray-light);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.verhoer-ev {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin-bottom: 6px;
  padding: 7px 9px 7px 10px;
  background: var(--s-1);
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  border-left-style: solid;
  border-radius: 3px;
  color: var(--ui-text);
  font-size: 1.05em;
  line-height: 1.15;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
}

.verhoer-ev:not([class*="clue-cat-"]) { border-left-color: var(--c-primary-dim); }
/* Merkmals-Kategorien: gleiche Farben wie die alten Hinweis-Karten */
.verhoer-ev.clue-cat-physical { border-left-color: #00d2ff; }
.verhoer-ev.clue-cat-job { border-left-color: #ffb000; }
.verhoer-ev.clue-cat-hobbys { border-left-color: #ff6f33; }
.verhoer-ev.clue-cat-gaming { border-left-color: #ff3366; }
.verhoer-ev.clue-cat-character { border-left-color: var(--c-success); }
.verhoer-ev.clue-cat-sf { border-left-color: #d400ff; }
.verhoer-ev-alibi { border-left-color: var(--c-cyan) !important; }
.verhoer-ev-genre { border-left-color: #b583ff !important; }
.verhoer-ev-suspicion { border-left-color: #b583ff !important; border-left-style: dashed; }
.verhoer-ev-fluff { border-left-color: var(--c-border-color) !important; color: var(--ui-text-dim); }

.verhoer-ev:not(.is-static):hover {
  border-top-color: var(--c-border-color);
  border-right-color: var(--c-border-color);
  border-bottom-color: var(--c-border-color);
}

/* Personen-Sidebar: nur Ansicht, vorgelegt wird im Verhör */
.verhoer-ev.is-static { cursor: default; }

.verhoer-ev-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 0.82em;
  color: var(--c-gray-light);
}

.verhoer-ev.selected {
  /* border-color: var(--c-primary); */
  background: rgba(255, 176, 0, 0.08);
}

.verhoer-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.verhoer-link:hover {color: var(--c-primary);background: none;box-shadow: none;}

.verhoer-filter-badge {
  flex: 0 0 auto;
  padding: 0 5px;
  border: 1px solid var(--c-primary);
  border-radius: 2px;
  color: var(--c-primary);
  text-transform: uppercase;
  font-size: 0.9em;
}

/* --- Board-Karten --- */

.suspect-card.verhoer-proven,
.game-select-card.verhoer-proven,
.item-target-card.verhoer-proven {
  border-color: var(--c-success) !important;
}

.status-badge.verhoer-badge-proven { background: var(--c-success); color: #000; }
.status-badge.verhoer-badge-out { background: var(--s-3); color: #ddd; }
.status-badge.verhoer-badge-info { background: var(--s-3); color: #ddd; }

.verhoer-badge-inline {
  font-size: 0.8em;
  padding: 0 5px;
  border-radius: 2px;
}

.verhoer-badge-inline.proven { background: var(--c-success); color: #000; }

.verhoer-reason {
  font-size: 0.85em;
  color: var(--c-gray-light);
  line-height: 1.1;
}

.verhoer-btn-selected {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
}

/* --- Footer: drei Slots --- */

.sol-slot.verhoer-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 130px;
  padding: 4px 10px;
  text-align: left;
  cursor: pointer;
}

.verhoer-slot-label {
  font-size: 0.9em;
}

.verhoer-slot-value {
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.verhoer-slot.is-suspect .verhoer-slot-label { color: var(--c-primary); }
.verhoer-slot.is-proven { border-color: var(--c-success) !important; box-shadow: none; }
.verhoer-slot.is-proven .verhoer-slot-label,
.verhoer-slot.is-proven .verhoer-slot-value { color: var(--c-success); }
.verhoer-slot.is-empty .verhoer-slot-value {}

#solution_send_btn.verhoer-not-ready { opacity: 0.5; }
#solution_send_btn.verhoer-ready { animation: verhoerPulse 1.6s ease-in-out infinite; }

/* --- Verhörraum --- */

.verhoer-panel {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: #212121;
}

.verhoer-head {
  display: none;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}

.verhoer-head-title {
  color: var(--c-primary);
  font-size: 1.25em;
  letter-spacing: 1px;
}

.verhoer-pill {
  font-size: 0.85em;
  letter-spacing: 1px;
  padding: 0 7px;
  border: 1px solid var(--c-border-color);
  border-radius: 2px;
  color: var(--ui-text-dim);
}

.verhoer-pill-proven { border-color: var(--c-success); color: var(--c-success); }
.verhoer-pill-cleared { border-color: var(--c-cyan); color: var(--c-cyan); }
.verhoer-pill-stuck { border-color: var(--c-danger); color: var(--c-danger); }

.verhoer-close {
  margin-left: auto;
  background: none;
  border: none;
  font: inherit;
  color: var(--c-gray-light);
  cursor: pointer;
}

.verhoer-close:hover { color: var(--c-primary); }

/* Beide Seiten gleich breit und gleich hoch, das Gespräch dazwischen */
.verhoer-arena {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 150px;
  gap: 16px;
  align-items: stretch;
}

.verhoer-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 8px;
  background: #000;
  border: 1px solid #fff;
}

.verhoer-side-file {
  margin-top: auto;
  padding-top: 6px;
  align-self: flex-start;
  font-size: 0.9em;
  font-weight: 400;
}

.verhoer-figure.is-clickable { cursor: pointer; }

.verhoer-side-challenger {border-color: var(--c-primary);}
.verhoer-side.is-empty {border-style: dashed;opacity: 1;}

.verhoer-figure {
  position: relative;
  aspect-ratio: 1 / 1;
  /* background: #000; */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.verhoer-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.verhoer-figure img.verhoer-figure-cover { object-fit: contain; }

.verhoer-figure-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.verhoer-figure-empty {
  font-size: 4em;
  color: var(--s-3);
}

.verhoer-side-label {
  margin-top: 6px;
  font-size: 0.8em;
  letter-spacing: 1px;
  color: var(--c-primary);
}

.verhoer-side-challenger .verhoer-side-label { color: var(--c-danger); }

.verhoer-side-name {
  color: #fff;
  font-size: 1.1em;
  line-height: 1.05;
}

.verhoer-dossier {
  font-size: 0.85em;
  color: var(--c-gray-light);
  line-height: 1.15;
  display: none;
}

.verhoer-dossier ul {
  margin: 3px 0 0 14px;
  padding: 0;
}

.verhoer-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 0;
  text-align: center;
  letter-spacing: 2px;
  font-size: 0.95em;
  color: #000;
  animation: verhoerRibbon 0.3s ease-out;
}

.verhoer-ribbon.proven { background: var(--c-success); }
.verhoer-ribbon.cleared {background: var(--c-success);}
.verhoer-ribbon.refuted { background: var(--c-danger); color: #fff; }

.verhoer-figure:has(.verhoer-ribbon.refuted) img { filter: grayscale(1); opacity: 0.6; }

@keyframes verhoerRibbon {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Gespräch in der Mitte */
/* Gespräch in der Mitte: Angeklagter links, Einwand rechts (wie die Seiten) */
.verhoer-dialog {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.verhoer-say {
  align-self: flex-start;
  max-width: 85%;
  padding: 8px 12px;
  background: var(--s-1);
  border: 1px solid var(--hairline);
  /* border-left: 3px solid var(--c-primary); */
  color: var(--ui-text);
  font-size: 1.15em;
  line-height: 1.25;
  border: 1px solid #ffff;
}

.verhoer-say b { color: #fff; font-weight: 400; }

.verhoer-say.challenger {
  align-self: flex-end;
  text-align: right;
}

.verhoer-say.system {
  align-self: stretch;
  max-width: none;
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 0.95em;
  color: var(--c-gray-light);
}

.verhoer-who {
  display: block;
  font-size: 0.75em;
  letter-spacing: 1px;
  color: var(--c-primary);
  text-transform: uppercase;
}

.verhoer-say.challenger .verhoer-who { color: var(--c-danger); }

/* Aufgabe + Hand */
.verhoer-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  color: var(--ui-text-dim);
  font-size: 1.05em;
}

.verhoer-task b { color: var(--c-primary); font-weight: 400; }

/* Schon vorgebracht (linke Spalte): leicht ausgegraut */
.verhoer-group-played {
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

.verhoer-ev.is-played { opacity: 0.45; }

/* Ergebnis */
.verhoer-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #fff;
  background: var(--s-1);
}

.verhoer-result-proven { border-color: var(--c-success); }
.verhoer-result-stuck {border-color: #fff;}
.verhoer-result-text { color: var(--ui-text); font-size: 1.1em; }
.verhoer-result-text b { color: #fff; font-weight: 400; }
.verhoer-result-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.verhoer-result-actions button { width: auto; }

@keyframes verhoerPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 176, 0, 0); }
  50% { box-shadow: 0 0 12px rgba(255, 176, 0, 0.45); }
}

@media (max-width: 800px) {
  .verhoer-panel { padding: 10px; gap: 10px; }
  .verhoer-arena {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .verhoer-dialog { grid-column: 1 / -1; grid-row: 2; }
  .verhoer-side { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; }
  .verhoer-figure { width: 52px; flex: 0 0 52px; }
  .verhoer-side-label, .verhoer-side-name { flex: 1 1 60%; }
  .verhoer-dossier, .verhoer-side .verhoer-link { flex: 1 1 100%; }
  .verhoer-ribbon { font-size: 0.7em; letter-spacing: 0; }
  .verhoer-say { max-width: 100%; }
  .verhoer-side-file { margin-top: 0; padding-top: 0; }
  .verhoer-side, .verhoer-dialog, .verhoer-task, .verhoer-ev { min-width: 0; overflow-wrap: anywhere; }
  .verhoer-head { flex-wrap: wrap; }
  .verhoer-close { font-size: 0.9em; }
  .sol-slot.verhoer-slot { min-width: 0; flex: 1 1 0; }
  .verhoer-slot-value { max-width: 100%; }
  .board-sidebar .verhoer-group,
  .board-sidebar .verhoer-howto,
  .board-sidebar .clue-list-header { width: 100%; }
}

/* --- Geständnis --- */

.verhoer-confession {
  width: 95%;
  max-width: 560px;
  border-color: var(--c-primary) !important;
}

.verhoer-confession .file-header {
  color: var(--c-success);
  text-align: center;
  font-size: 1.3em;
}

.verhoer-confession .file-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.verhoer-confession-top {
  display: flex;
  gap: 14px;
  align-items: center;
}

.verhoer-confession-top img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  flex: 0 0 110px;
  background: #000;
}

.verhoer-confession-quote {
  color: #fff;
  font-size: 1.1em;
  line-height: 1.2;
}

.verhoer-confession-quote b {
  font-weight: 400;
  color: var(--c-primary);
}

/* --- Bonusrunde: Kisten --- */

.boss-chest {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatItem 2s infinite ease-in-out;
  filter: drop-shadow(0 0 6px gold);
}

.boss-chest.opened {
  display: none;
}

/* Kisten-Grafik: crate.png aus dem jeweiligen Theme-Ordner, sonst generic. */
.boss-chest-icon {
  display: inline-block;
  width: 80%;
  height: 80%;
  background: url(img/assets/boss/generic/crate.png) center / contain no-repeat;
}

.theme-scifi .boss-chest-icon { background-image: url(img/assets/boss/scifi/crate.png); }
.theme-rpg .boss-chest-icon { background-image: url(img/assets/boss/rpg/crate.png); }
.theme-horror .boss-chest-icon { background-image: url(img/assets/boss/horror/crate.png); }
.theme-krimi .boss-chest-icon { background-image: url(img/assets/boss/krimi/crate.png); }
.theme-adventure .boss-chest-icon { background-image: url(img/assets/boss/adventure/crate.png); }
.theme-textadventure .boss-chest-icon { background-image: url(img/assets/boss/textadventure/crate.png); }
.theme-fps .boss-chest-icon { background-image: url(img/assets/boss/fps/crate.png); }
.theme-jrpg .boss-chest-icon { background-image: url(img/assets/boss/jrpg/crate.png); }
.theme-c64 .boss-chest-icon { background-image: url(img/assets/boss/c64/crate.png); }

.boss-hud-item .boss-chest-icon {
  width: 22px;
  height: 22px;
}

@media (max-width: 800px) {
  .verhoer-confession-top img { width: 72px; height: 72px; flex-basis: 72px; }
}


/* =========================================================
   MOBIL: KOPFLEISTE IM SPIEL (Nov. 2026)
   Zwei ruhige Zeilen statt drei unterschiedlich hoher Bloecke:
   1) Avatar | Name + schmaler Level-Balken | Menue, Chat, Hilfe, Ende
   2) Zuege, Konto, Hinweise als gleich hohe Chips ueber die volle Breite
   Cover, Inventar, Reisepass und Sammelkarten (#meta-actions) ziehen
   mobil in das Ausklappmenue #mobile-more-menu (script.js:
   syncMobileMoreMenu).
   Selektoren beginnen mit ":root body", damit die Spezifitaet der
   frueheren :root body-Variante erhalten bleibt.
   ========================================================= */

#mobile-more-btn,
#mobile-more-menu,
.meta-cover-icon {
  display: none;
}

@media (max-width: 800px) {
  :root body #top_bar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "profile tools"
      "stats   stats";
    align-items: center;
    gap: 8px 10px;
    padding: 8px 12px;
  }

  :root body #topbar_right {
    display: contents;
  }

  /* --- Zeile 1 links: Avatar, daneben Name ueber Level + Balken --- */
  :root body #profile_wrap_ingame {
    grid-area: profile;
    position: relative;
    width: auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 4px;
    align-items: center;
    font-size: 1em;
  }

  /* Perk-Bubble haengt dadurch an #profile_wrap_ingame (gleiche Ecke wie vorher) */
  :root body #user-profile-display {
    display: contents;
  }

  :root body #user-prof-header {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  :root body #profile-name {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: 0.8em !important;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: end;
  }

  :root body #profile_wrap_ingame .header-box {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    max-width: 150px;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    align-self: start;
  }

  :root body #profile_wrap_ingame .header-box > div:first-child {
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }

  :root body #profile_wrap_ingame .header-label {
    font-size: 0.65em;
    line-height: 1;
    white-space: nowrap;
  }

  :root body #level-num {
    font-size: 1em !important;
  }

  :root body #xp-text {
    display: none;
  }

  :root body #profile_wrap_ingame .xp-bar-bg {
    flex: 1 1 auto;
    min-width: 40px;
    height: 4px;
  }

  /* --- Zeile 1 rechts: vier gleich grosse Quadrate --- */
  :root body #button-container-topbar {
    grid-area: tools;
  }

  :root body #button-container-topbar .tools-wrapper {
    height: 38px;
    gap: 6px;
  }

  :root body #button-container-topbar .btn-icon-tool {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    font-size: 1rem !important;
  }

  :root body #button-container-topbar .btn-icon-tool[aria-label^="AUFGEBEN"] {
    font-size: 0.7rem !important;
  }

  :root body #button-container-topbar .btn-icon-tool img {
    max-width: 24px;
    max-height: 24px;
  }

  /* Tooltips bleiben auf Touch nach dem Tippen kleben - hier unnoetig */
  :root body #button-container-topbar .btn-icon-tool[aria-label]:hover::after {
    display: none;
  }

  /* Menue-Button: drei Striche */
  :root body #mobile-more-btn {
    display: flex;
  }

  .mobile-more-icon {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }

  :root body #mobile-more-btn.open {
    background: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
  }

  /* --- Zeile 2: Status-Chips, gleich hoch, volle Breite --- */
  :root body #top_bar .game-meta-grid {
    grid-area: stats;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
  }

  :root body.editor-open #top_bar .game-meta-grid:not(.pe-token-grid) {
    display: none;
  }

  :root body #top_bar .game-meta-grid .meta-label-all {
    flex: 1 1 auto;
    justify-content: center;
    height: 28px;
    margin: 0;
    padding: 0 6px;
    gap: 4px;
    font-size: 0.7em;
    line-height: 1;
    white-space: nowrap;
  }

  :root body .meta-key-long {
    display: none;
  }

  /* --- Ausklappmenue --- */
  :root body #mobile-more-menu:not([hidden]) {
    display: block;
    position: absolute;
    top: 50px;
    right: 12px;
    z-index: 1000;
    min-width: 220px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    background: #1f1f1f;
    border: 1px solid var(--c-border-color);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 70%);
  }

  :root body #mobile-more-menu #meta-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: auto;
    margin: 0;
    padding: 0;
  }

  :root body #mobile-more-menu #meta-actions .btn-meta-round,
  :root body #mobile-more-menu #meta-actions .btn-tiny {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    background: transparent;
    color: #e6e6e6 !important;
    font-size: 0.95rem !important;
    text-align: left;
    text-transform: uppercase;
    box-shadow: none;
  }

  :root body #mobile-more-menu #meta-actions .btn-tiny .meta-cover-icon {
    display: block;
    image-rendering: pixelated;
  }

  :root body #mobile-more-menu #meta-actions .btn-meta-round img,
  :root body #mobile-more-menu #meta-actions .btn-tiny .meta-cover-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    max-width: 26px;
    max-height: 26px;
    object-fit: contain;
  }

  /* Beschriftung aus aria-label, dauerhaft statt als Tooltip */
  :root body #mobile-more-menu #meta-actions .btn-meta-round[aria-label]::after,
  :root body #mobile-more-menu #meta-actions .btn-meta-round[aria-label]:hover::after {
    content: attr(aria-label);
    order: 1;
    position: static;
    transform: none;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-size: inherit;
    white-space: normal;
    z-index: auto;
  }

  /* Item-Zaehler rechtsbuendig in der Zeile statt am Icon */
  :root body #mobile-more-menu #meta-actions .tool-badge {
    order: 2;
    position: static;
    margin-left: auto;
  }

  :root body #mobile-more-menu #meta-actions .btn-meta-round:hover,
  :root body #mobile-more-menu #meta-actions .btn-tiny:hover {
    background: rgb(255 255 255 / 8%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: none;
  }

  :root body #mobile-more-menu #meta-actions .active {
    background: #fff !important;
    color: #000 !important;
  }
}

/* =========================================================
   MOBIL: HINWEIS-BOARD (Nov. 2026)
   Ziel: Verdaechtige/Spiele/Items bzw. das Verhoer bekommen
   den Grossteil der Hoehe statt ~35%.
   - Beweisakte in den Uebersichts-Tabs einklappbar (Kopfzeile
     mit Zusammenfassung, toggleBoardEvidence in
     module_detective_board.js)
   - Verhoer: ein Scrollbereich, Verhoer oben, Beweise darunter
   - Footer: Slots einzeilig kompakt, FALL ABSCHLIESSEN erst,
     wenn alle drei Teile belegt sind
   - Tabs schlanker
   ========================================================= */

.board-evidence-summary {
  display: none;
}

@media (max-width: 800px) {
  /* --- Tabs --- */
  :root body #board-overlay .board-tabs {
    padding: 4px;
  }

  :root body #board-overlay .board-tab {
    min-height: 40px;
    padding: 4px 2px;
    font-size: 0.75em;
  }

  :root body #board-overlay .board-tab img {
    width: 22px;
    height: 22px;
    max-height: 22px;
    margin-right: 4px;
  }

  /* --- Beweisakte (Uebersicht) --- */
  :root body #board-overlay .board-sidebar:not(.verhoer-hand) {
    max-height: 50vh;
    padding: 0 8px 8px !important;
  }

  :root body #board-overlay:not(.board-evidence-open) .board-sidebar:not(.verhoer-hand) {
    padding: 0 !important;
    overflow: hidden !important;
  }

  :root body #board-overlay:not(.board-evidence-open) .board-sidebar:not(.verhoer-hand) > :not(.board-evidence-toggle) {
    display: none !important;
  }

  :root body #board-overlay .board-sidebar > .clue-list-header.board-evidence-toggle {
    display: flex !important;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 2;
    flex: 0 0 auto;
    width: calc(100% + 16px);
    margin: 0 -8px;
    padding: 10px 12px;
    background: #0c0c0c;
    color: var(--c-primary);
    font-size: 0.85em;
    letter-spacing: 1px;
    cursor: pointer;
    user-select: none;
  }

  :root body #board-overlay:not(.board-evidence-open) .board-sidebar > .clue-list-header.board-evidence-toggle {
    width: 100%;
    margin: 0;
  }

  :root body #board-overlay .board-evidence-summary {
    display: inline;
    margin-left: auto;
    color: var(--c-gray-light);
    letter-spacing: 0;
    white-space: nowrap;
  }

  :root body #board-overlay .board-evidence-toggle.has-filters .board-evidence-summary {
    color: var(--c-primary);
  }

  /* Pfeil: zu = nach unten, offen = nach oben */
  :root body #board-overlay .board-evidence-toggle::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin: 0 2px 4px 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  :root body #board-overlay.board-evidence-open .board-evidence-toggle::after {
    margin: 4px 2px 0 0;
    transform: rotate(-135deg);
  }

  /* --- Verhoer: ein Scrollbereich, Verhoer oben, Beweise drunter --- */
  :root body #board-overlay .board-split-view.verhoer-split {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  :root body #board-overlay .verhoer-split .verhoer-panel {
    order: 1;
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }

  :root body #board-overlay .verhoer-split .board-sidebar.verhoer-hand {
    order: 2;
    flex: 0 0 auto !important;
    max-height: none;
    overflow: visible !important;
    border-bottom: none !important;
    border-top: 2px solid var(--c-primary);
    padding: 10px !important;
  }

  /* --- Footer --- */
  :root body #board-overlay .board-footer {
    gap: 6px;
    padding: 6px 8px !important;
  }

  :root body #board-overlay .solution-preview {
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
  }

  :root body #board-overlay .sol-slot.verhoer-slot {
    gap: 0;
    padding: 3px 6px;
    font-size: 0.75em;
    line-height: 1.15;
  }

  :root body #board-overlay .verhoer-slot-label {
    font-size: 0.8em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* FALL ABSCHLIESSEN erst, wenn Person, Spiel und Item belegt sind */
  :root body #board-overlay .board-actions.board-actions-not-ready {
    display: none !important;
  }

  :root body #board-overlay .board-actions {
    width: 100%;
  }

  :root body #board-overlay #solution_send_btn {
    height: 44px;
    padding: 0 10px;
    font-size: 1em !important;
  }
}