:root {
      --bg: #100e0c;
      --bg-soft: #17130f;
      --panel: #211b16;
      --panel-2: #2b231c;
      --panel-3: #352a21;
      --line: #604f3f;
      --line-soft: rgba(96, 79, 63, 0.55);
      --text: #eee4d6;
      --muted: #ad9f8d;
      --accent: #7a2d24;
      --accent-hover: #91382d;
      --gold: #c1a36b;
      --bronze: #9e7a49;
      --event-bg: #1a1511;
      --event-inner: #241d17;
      --event-glow: rgba(193, 163, 107, 0.11);
      --shadow: rgba(0, 0, 0, 0.45);
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100%;
      background:
        radial-gradient(circle at top, rgba(110, 74, 44, 0.12), transparent 34rem),
        linear-gradient(180deg, #17130f 0%, #0d0b0a 100%);
      color: var(--text);
      font-family: Georgia, "Times New Roman", serif;
    }

    button { font: inherit; }
    .hidden { display: none !important; }

    /* Hauptmenü */
    #main-menu {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 2rem;
    }

    .menu-card {
      width: min(600px, 94vw);
      padding: 3.4rem 2.7rem;
      text-align: center;
      background:
        linear-gradient(180deg, rgba(45, 36, 28, .97), rgba(27, 22, 18, .98));
      border: 1px solid var(--line);
      box-shadow: 0 28px 70px var(--shadow);
      position: relative;
    }

    .menu-card::before,
    .menu-card::after {
      content: "";
      position: absolute;
      left: 12%;
      right: 12%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--bronze), transparent);
    }

    .menu-card::before { top: 1rem; }
    .menu-card::after { bottom: 1rem; }

    .game-title {
      margin: 0;
      font-size: clamp(2.5rem, 7vw, 4.8rem);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .game-subtitle {
      margin-top: 0.45rem;
      color: var(--gold);
      font-size: 0.98rem;
      letter-spacing: 0.08em;
    }

    .version {
      margin-top: 0.5rem;
      margin-bottom: 2.8rem;
      color: var(--muted);
      letter-spacing: 0.15em;
      font-size: 0.8rem;
      text-transform: uppercase;
    }

    .main-menu-buttons {
      display: grid;
      gap: 0.8rem;
    }

    .menu-button,
    .top-button,
    .reaction-button,
    .back-button {
      border: 1px solid var(--line);
      background: var(--panel-2);
      color: var(--text);
      cursor: pointer;
      transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
    }

    .menu-button {
      width: 100%;
      padding: 0.95rem 1.2rem;
      font-size: 1.04rem;
      letter-spacing: 0.04em;
    }

    .menu-button:hover,
    .top-button:hover,
    .reaction-button:hover,
    .back-button:hover {
      background: var(--panel-3);
      border-color: var(--gold);
    }

    .menu-button.primary {
      background: var(--accent);
      border-color: #a44a3f;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    }

    .menu-button.primary:hover {
      background: var(--accent-hover);
    }

    /* Spielansicht */
    #game-screen {
      min-height: 100vh;
      padding: 0;
    }

    .game-shell {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto auto 1fr;
    }

    .game-header {
      padding: 0.85rem 1.3rem 0.72rem;
      text-align: center;
      border-bottom: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(27, 23, 19, 0.98), rgba(20, 17, 14, 0.98));
    }

    .game-header h1 {
      margin: 0;
      font-size: clamp(1.4rem, 2.7vw, 2.05rem);
      text-transform: uppercase;
      letter-spacing: 0.15em;
    }

    .chapter-line {
      margin-top: 0.3rem;
      color: var(--muted);
      font-size: 0.88rem;
      letter-spacing: 0.04em;
    }

    .top-nav {
      display: flex;
      gap: 0.45rem;
      align-items: center;
      flex-wrap: wrap;
      padding: 0.56rem 0.8rem;
      background: #211b16;
      border-bottom: 1px solid var(--line);
    }

    .top-button {
      padding: 0.5rem 0.78rem;
      font-size: 0.88rem;
      background: #2a221b;
    }

    .top-nav .spacer { flex: 1; }

    .game-grid {
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(190px, 20%) minmax(0, 60%) minmax(190px, 20%);
      background: #15110e;
    }

    .side-panel {
      min-width: 0;
      padding: 1rem;
      background:
        linear-gradient(180deg, rgba(36, 29, 23, .98), rgba(28, 23, 19, .98));
    }

    .left-panel { border-right: 1px solid var(--line); }
    .right-panel { border-left: 1px solid var(--line); }

    .panel-title {
      margin: 0 0 1rem;
      padding-bottom: 0.55rem;
      border-bottom: 1px solid var(--line);
      font-size: 0.82rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--gold);
    }

    .portrait {
      width: 100%;
      aspect-ratio: 4 / 5;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      background:
        linear-gradient(145deg, rgba(92, 71, 54, 0.3), rgba(29, 24, 20, 0.9));
      color: var(--muted);
      text-align: center;
      padding: 1rem;
      box-shadow: inset 0 0 30px rgba(0,0,0,.25);
    }

    .character-name {
      margin: 0.85rem 0 0.14rem;
      font-size: 1.24rem;
      letter-spacing: 0.03em;
    }

    .character-role {
      margin: 0 0 0.8rem;
      color: var(--gold);
      font-size: 0.86rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .status-block {
      border-top: 1px solid var(--line-soft);
      margin-top: 0.85rem;
      padding-top: 0.75rem;
      display: grid;
      gap: 0.65rem;
    }

    .status-row small {
      display: block;
      color: var(--muted);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 0.12rem;
    }

    .status-row span {
      font-size: 0.9rem;
    }

    .center-column {
      min-width: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      background: var(--event-bg);
      position: relative;
      box-shadow:
        inset 18px 0 30px rgba(0,0,0,.15),
        inset -18px 0 30px rgba(0,0,0,.15);
    }

    .center-column::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-left: 1px solid rgba(193, 163, 107, .18);
      border-right: 1px solid rgba(193, 163, 107, .18);
    }

    .event-banner {
      padding: 1.1rem 1.35rem 1rem;
      border-bottom: 1px solid var(--line);
      background:
        radial-gradient(circle at center, rgba(127, 89, 48, 0.12), transparent 60%),
        linear-gradient(180deg, #2c2219 0%, #211a15 100%);
      box-shadow: 0 8px 22px rgba(0,0,0,.28);
      position: relative;
      z-index: 1;
    }

    .event-banner::after {
      content: "";
      position: absolute;
      left: 10%;
      right: 10%;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: .6;
    }

    .event-kicker {
      margin: 0 0 0.28rem;
      color: var(--gold);
      font-size: 0.74rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-align: center;
    }

    .event-title {
      margin: 0;
      text-align: center;
      font-size: clamp(1.4rem, 2vw, 1.95rem);
      letter-spacing: 0.05em;
    }

    .event-meta {
      margin-top: 0.62rem;
      color: var(--muted);
      font-size: 0.87rem;
      display: flex;
      justify-content: center;
      gap: 0.55rem 1rem;
      flex-wrap: wrap;
    }

    .event-meta span::before {
      content: "•";
      margin-right: 0.55rem;
      color: var(--bronze);
    }

    .event-meta span:first-child::before {
      content: "";
      margin: 0;
    }

    /* zentraler Fokus */
    .event-area {
      min-height: 440px;
      margin: 1rem 1.1rem 0.9rem;
      padding: clamp(1.35rem, 2.5vw, 2.1rem) clamp(1.2rem, 3vw, 2.6rem);
      overflow: auto;
      background:
        linear-gradient(180deg, rgba(41, 32, 25, .96), rgba(31, 25, 20, .98));
      border: 1px solid rgba(193, 163, 107, .32);
      box-shadow:
        0 16px 34px rgba(0,0,0,.32),
        inset 0 0 38px var(--event-glow);
      position: relative;
    }

    .event-area::before {
      content: "";
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(193, 163, 107, .08);
      pointer-events: none;
    }

    .event-focus-label {
      display: inline-block;
      margin-bottom: 1rem;
      padding-bottom: 0.35rem;
      border-bottom: 1px solid var(--line-soft);
      color: var(--gold);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .event-text {
      max-width: 850px;
      margin: 0 auto;
      font-size: 1.08rem;
      line-height: 1.82;
    }

    .event-text p:first-child { margin-top: 0; }

    .reaction-area {
      border-top: 1px solid var(--line);
      padding: 0.95rem 1.2rem 1.15rem;
      background:
        linear-gradient(180deg, rgba(30, 24, 19, .98), rgba(24, 20, 16, .99));
      box-shadow: 0 -8px 22px rgba(0,0,0,.18);
    }

    .reaction-label {
      margin: 0 0 0.72rem;
      color: var(--gold);
      font-size: 0.76rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .reactions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.65rem;
    }

    .reaction-button {
      padding: 0.84rem 0.95rem;
      text-align: center;
      background: #2b231c;
    }

    .reaction-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 16px rgba(0,0,0,.18);
    }

    .companions {
      display: grid;
      gap: 0.8rem;
    }

    .companion-card {
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 0.75rem;
      align-items: center;
      padding: 0.65rem;
      border: 1px solid var(--line-soft);
      background: rgba(49, 39, 31, .6);
    }

    .companion-avatar {
      width: 64px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      background:
        linear-gradient(145deg, #3a2d23, #241d17);
      color: var(--muted);
      font-size: 0.68rem;
      text-align: center;
    }

    .companion-name {
      margin: 0;
      font-size: 1rem;
    }

    .companion-state {
      margin: 0.18rem 0 0;
      color: var(--muted);
      font-size: 0.81rem;
      line-height: 1.35;
    }

    /* Popup */
    .modal-layer {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 1rem;
      background: rgba(0, 0, 0, 0.72);
      z-index: 20;
    }

    .modal {
      width: min(620px, 95vw);
      max-height: 82vh;
      overflow: auto;
      padding: 1.4rem;
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: 0 30px 70px rgba(0,0,0,.55);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: center;
      margin-bottom: 1rem;
    }

    .modal-header h2 {
      margin: 0;
      font-size: 1.25rem;
    }

    .modal-close {
      min-width: 2.2rem;
      height: 2.2rem;
      border: 1px solid var(--line);
      background: var(--panel-2);
      color: var(--text);
      cursor: pointer;
    }

    .modal p {
      color: var(--muted);
      line-height: 1.6;
    }

    .back-button {
      margin-top: 1rem;
      padding: 0.75rem 1rem;
    }

    @media (max-width: 1050px) {
      .reactions {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 920px) {
      .game-grid {
        grid-template-columns: 1fr;
      }

      .left-panel,
      .right-panel {
        border: 0;
        border-bottom: 1px solid var(--line);
      }

      .right-panel {
        border-top: 1px solid var(--line);
      }

      .portrait {
        max-width: 220px;
      }

      .companions {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      }

      .event-area {
        margin-left: .7rem;
        margin-right: .7rem;
      }
    }

    @media (max-width: 620px) {
      .top-nav .spacer { display: none; }

      .top-button {
        flex: 1 1 calc(50% - 0.45rem);
      }
    }
  
    /* v0.3: stärkere visuelle Hierarchie */
    .game-header {
      position: relative;
      box-shadow: 0 5px 18px rgba(0,0,0,.22);
    }

    .chapter-line {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: .3rem .5rem;
    }

    .campaign-label {
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: .1em;
      font-size: .7rem;
    }

    .campaign-value {
      color: var(--muted);
    }

    .chapter-separator {
      color: var(--line);
      margin: 0 .15rem;
    }

    .side-panel {
      opacity: .96;
    }

    .left-panel,
    .right-panel {
      box-shadow: inset 0 0 30px rgba(0,0,0,.12);
    }

    .center-column {
      z-index: 1;
      box-shadow:
        0 0 0 1px rgba(193,163,107,.08),
        0 0 40px rgba(0,0,0,.24),
        inset 18px 0 30px rgba(0,0,0,.16),
        inset -18px 0 30px rgba(0,0,0,.16);
    }

    .event-banner {
      min-height: 145px;
      overflow: hidden;
      display: grid;
      place-items: center;
      isolation: isolate;
      padding: 0;
    }

    .event-banner-art {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(20,16,13,.92), rgba(20,16,13,.38) 35%, rgba(20,16,13,.38) 65%, rgba(20,16,13,.92)),
        linear-gradient(180deg, rgba(35,27,21,.28), rgba(18,14,11,.82)),
        radial-gradient(circle at 50% 35%, rgba(138,94,50,.24), transparent 55%);
      z-index: -2;
    }

    .event-banner-art::after {
      content: "Bannerbild – später";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(238,228,214,.08);
      font-size: 2.2rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .event-banner-content {
      width: 100%;
      padding: 1.25rem 1.4rem 1.15rem;
      background: linear-gradient(180deg, rgba(29,23,18,.12), rgba(20,16,13,.38));
      text-shadow: 0 2px 8px rgba(0,0,0,.65);
    }

    .event-title {
      font-size: clamp(1.55rem, 2.2vw, 2.15rem);
    }

    .event-area {
      border-color: rgba(193,163,107,.42);
      box-shadow:
        0 18px 40px rgba(0,0,0,.38),
        0 0 26px rgba(193,163,107,.05),
        inset 0 0 45px rgba(193,163,107,.07);
    }

    .event-focus-label {
      position: relative;
      padding-left: .9rem;
    }

    .event-focus-label::before {
      content: "";
      position: absolute;
      left: 0;
      top: .1rem;
      bottom: .1rem;
      width: 3px;
      background: var(--accent);
    }

    .reaction-area {
      position: relative;
    }

    .reaction-area::before {
      content: "";
      position: absolute;
      left: 18%;
      right: 18%;
      top: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: .48;
    }

    .reaction-label {
      text-align: center;
      margin-bottom: .8rem;
    }

    .reaction-button {
      min-height: 52px;
      border-color: rgba(96,79,63,.82);
    }

    .reaction-button:hover {
      border-color: var(--gold);
      background: linear-gradient(180deg, #392d23, #2f261e);
    }

    .companion-card {
      transition: border-color .15s ease, background .15s ease, transform .15s ease;
    }

    .companion-card:hover {
      border-color: rgba(193,163,107,.7);
      background: rgba(58,46,36,.72);
      transform: translateY(-1px);
    }

    @media (min-width: 1280px) {
      .game-grid {
        grid-template-columns: 19% 62% 19%;
      }

      .event-area {
        margin-left: 1.4rem;
        margin-right: 1.4rem;
      }
    }

  
    /* v0.4: flexibles Event-Darstellungsgerüst */
    .event-content-stack {
      max-width: 900px;
      margin: 0 auto;
      display: grid;
      gap: 1rem;
    }

    .event-block {
      position: relative;
    }

    .narration-block {
      font-size: 1.08rem;
      line-height: 1.82;
    }

    .narration-block p {
      margin: 0 0 1rem;
    }

    .narration-block p:last-child {
      margin-bottom: 0;
    }

    .narration-block.compact {
      padding-top: .25rem;
      color: #ded2c3;
    }

    .scene-note {
      display: flex;
      gap: .8rem;
      align-items: baseline;
      padding: .7rem .85rem;
      border-left: 3px solid var(--bronze);
      background: rgba(193,163,107,.055);
    }

    .scene-note-label {
      flex: 0 0 auto;
      color: var(--gold);
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .12em;
    }

    .scene-note-text {
      color: var(--muted);
      font-size: .92rem;
      font-style: italic;
    }

    .dialogue-block {
      padding: 1rem 1.1rem 1.05rem;
      border: 1px solid rgba(96,79,63,.8);
      background:
        linear-gradient(180deg, rgba(46,37,29,.82), rgba(37,30,24,.88));
      box-shadow: inset 0 0 20px rgba(0,0,0,.12);
    }

    .dialogue-speaker-row {
      display: flex;
      gap: .8rem;
      align-items: center;
      margin-bottom: .8rem;
    }

    .dialogue-avatar {
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      background: linear-gradient(145deg, #3b2f25, #241d17);
      color: var(--muted);
      font-size: .62rem;
      text-align: center;
    }

    .dialogue-speaker {
      color: var(--gold);
      font-size: 1rem;
      letter-spacing: .04em;
    }

    .dialogue-role {
      margin-top: .12rem;
      color: var(--muted);
      font-size: .78rem;
    }

    .dialogue-text {
      padding-left: .1rem;
      font-size: 1.1rem;
      line-height: 1.65;
      color: var(--text);
    }

    .event-area {
      scrollbar-width: thin;
      scrollbar-color: var(--line) transparent;
    }

    .event-area::-webkit-scrollbar {
      width: 8px;
    }

    .event-area::-webkit-scrollbar-thumb {
      background: var(--line);
      border-radius: 99px;
    }

    .event-area::-webkit-scrollbar-track {
      background: transparent;
    }

    @media (max-width: 620px) {
      .scene-note {
        display: block;
      }

      .scene-note-label {
        margin-bottom: .25rem;
      }

      .dialogue-block {
        padding: .9rem;
      }
    }

  
    /* v0.5: Reaktionsarten */
    .reaction-button {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: .28rem;
      min-height: 68px;
      padding: .72rem .9rem;
      text-align: left;
      overflow: hidden;
    }

    .reaction-button::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--line);
      transition: background .15s ease;
    }

    .reaction-type {
      color: var(--muted);
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .13em;
    }

    .reaction-text {
      color: var(--text);
      font-size: .94rem;
      line-height: 1.35;
    }

    .reaction-action::before {
      background: var(--bronze);
    }

    .reaction-dialogue::before {
      background: var(--accent);
    }

    .reaction-observe::before {
      background: #777064;
    }

    .reaction-button:hover .reaction-type {
      color: var(--gold);
    }

    .reaction-hint {
      max-width: 850px;
      margin: -.15rem auto .8rem;
      text-align: center;
      color: var(--muted);
      font-size: .78rem;
    }

  
    /* v0.7: Charaktererstellung */
    #creator-screen {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 2rem;
    }

    .creator-card {
      width: min(680px, 95vw);
      padding: 2.5rem;
      background: linear-gradient(180deg, rgba(45,36,28,.98), rgba(27,22,18,.99));
      border: 1px solid var(--line);
      box-shadow: 0 28px 70px var(--shadow);
    }

    .creator-eyebrow {
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: .72rem;
      text-align: center;
    }

    .creator-card h1 {
      margin: .35rem 0 0;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: clamp(1.7rem, 4vw, 2.5rem);
    }

    .creator-intro {
      margin: .7rem 0 2rem;
      text-align: center;
      color: var(--muted);
    }

    .creator-form {
      display: grid;
      gap: 1.3rem;
    }

    .creator-field {
      display: grid;
      gap: .45rem;
    }

    .creator-label {
      color: var(--gold);
      font-size: .76rem;
      text-transform: uppercase;
      letter-spacing: .13em;
    }

    .creator-field input,
    .creator-field select {
      width: 100%;
      min-height: 48px;
      padding: .7rem .8rem;
      border: 1px solid var(--line);
      background: #1e1915;
      color: var(--text);
      font: inherit;
      outline: none;
    }

    .creator-field input:focus,
    .creator-field select:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 2px rgba(193,163,107,.08);
    }

    .creator-field small {
      color: var(--muted);
      font-size: .76rem;
    }

    .name-row {
      display: grid;
      grid-template-columns: 1fr 50px;
      gap: .55rem;
    }

    .dice-button {
      border: 1px solid var(--line);
      background: var(--panel-2);
      color: var(--text);
      cursor: pointer;
      font-size: 1.25rem;
    }

    .dice-button:hover {
      border-color: var(--gold);
      background: var(--panel-3);
    }

    .creator-actions {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: .7rem;
      margin-top: 2rem;
    }

    .creator-error {
      margin-top: .9rem;
      color: #d59a8f;
      text-align: center;
      font-size: .86rem;
    }

    .character-basics {
      display: grid;
      gap: .55rem;
      padding: .75rem 0;
      border-top: 1px solid var(--line-soft);
    }

    .character-basics div {
      display: grid;
      gap: .1rem;
    }

    .character-basics small {
      color: var(--muted);
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .character-basics span {
      font-size: .9rem;
    }

    @media (max-width: 560px) {
      .creator-card { padding: 1.5rem; }
      .creator-actions { grid-template-columns: 1fr; }
    }

  
    /* v0.8: verzweigte Vorgeschichte */
    .creator-progress {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.8rem;
      max-width: 180px;
    }

    .creator-step-dot {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      background: #1d1814;
      color: var(--muted);
      font-size: .75rem;
    }

    .creator-step-dot.active {
      border-color: var(--gold);
      color: var(--gold);
      background: #2d241c;
    }

    .creator-step-line {
      height: 1px;
      flex: 1;
      background: var(--line);
    }

    .background-heading {
      margin-bottom: 1.15rem;
    }

    .background-heading h2 {
      margin: .4rem 0 .45rem;
      text-align: left;
      text-transform: none;
      letter-spacing: .02em;
      font-size: 1.55rem;
    }

    .background-heading p {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
      font-size: .9rem;
    }

    .background-options {
      display: grid;
      gap: .65rem;
    }

    .background-option {
      width: 100%;
      padding: .85rem .95rem;
      border: 1px solid var(--line);
      background: rgba(38,30,24,.8);
      color: var(--text);
      cursor: pointer;
      text-align: left;
      font: inherit;
      transition: border-color .15s ease, background .15s ease;
    }

    .background-option:hover {
      border-color: var(--gold);
      background: rgba(52,41,32,.9);
    }

    .background-option.selected {
      border-color: var(--gold);
      background: rgba(83,60,38,.45);
      box-shadow: inset 3px 0 0 var(--gold);
    }

    .background-option strong {
      display: block;
      margin-bottom: .2rem;
      font-size: .96rem;
      font-weight: normal;
      color: var(--text);
    }

    .background-option small {
      display: block;
      color: var(--muted);
      line-height: 1.4;
      font-size: .76rem;
    }
#prologue-screen{min-height:100vh;display:grid;place-items:center;padding:2rem;background:#17130f}.prologue-card{width:min(780px,95vw);padding:clamp(2rem,5vw,4rem);border:1px solid var(--line);background:linear-gradient(180deg,rgba(42,34,27,.96),rgba(24,20,16,.99));box-shadow:0 30px 80px rgba(0,0,0,.45)}.prologue-kicker{text-align:center;color:var(--gold);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem}.prologue-card h1{text-align:center;font-size:clamp(2rem,5vw,3.2rem);font-weight:normal}.prologue-divider{width:80px;height:1px;margin:1.4rem auto 2rem;background:var(--gold)}.prologue-text{max-width:650px;margin:auto;font-size:1.04rem;line-height:1.85;color:#ded5c8}.prologue-text p{margin:0 0 1.25rem}.prologue-text strong,.prologue-ending strong{color:var(--gold);font-weight:normal}.prologue-ending{display:grid;gap:.25rem;margin:2.4rem auto 0;text-align:center}.prologue-ending span{color:var(--muted)}.prologue-ending strong{font-size:1.3rem}.prologue-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:.7rem;max-width:560px;margin:2rem auto 0}@media(max-width:560px){.prologue-actions{grid-template-columns:1fr}}


/* v1.3: Charakterwerte */
.prologue-character-summary {
  max-width: 650px;
  margin: 2rem auto 0;
  padding: 1.1rem;
  border: 1px solid var(--line);
  background: rgba(18,15,12,.45);
}

.summary-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .9rem;
}

.summary-heading span {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
}

.summary-heading small {
  color: var(--muted);
  font-size: .7rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

.stat-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .65rem .7rem;
  border: 1px solid rgba(183,146,94,.22);
  background: rgba(54,43,33,.45);
}

.stat-card span {
  color: var(--muted);
  font-size: .76rem;
}

.stat-card strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: normal;
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-top: .8rem;
}

.skill-label {
  margin-right: .15rem;
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.skill-chip {
  padding: .32rem .5rem;
  border: 1px solid rgba(183,146,94,.3);
  color: #d8c8b2;
  background: rgba(72,54,39,.35);
  font-size: .72rem;
}

.skill-empty {
  color: var(--muted);
  font-size: .76rem;
}

.character-modal-head {
  display: grid;
  gap: .15rem;
  margin-bottom: 1rem;
}

.character-modal-head strong {
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: normal;
}

.character-modal-head span {
  color: var(--muted);
  font-size: .8rem;
}

.modal-stat-grid {
  margin-top: .5rem;
}

@media (max-width: 650px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .summary-heading {
    display: grid;
  }
}


/* v1.4: Charakterfenster */
.character-modal-section {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}

.character-modal-section h3 {
  margin: 0 0 .75rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  font-weight: normal;
}

.bio-list {
  display: grid;
  gap: .55rem;
}

.bio-list div {
  display: grid;
  gap: .15rem;
  padding: .55rem .65rem;
  border: 1px solid rgba(96,79,63,.45);
  background: rgba(42,34,27,.32);
}

.bio-list span {
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.bio-list strong {
  color: var(--text);
  font-size: .82rem;
  font-weight: normal;
  line-height: 1.35;
}


/* v1.5: Skill-Stufen & vorbereitete Zustände */
.skill-chip {
  display: grid;
  gap: .08rem;
  min-width: 145px;
}

.skill-chip strong {
  color: var(--text);
  font-size: .74rem;
  font-weight: normal;
}

.skill-chip small {
  color: var(--muted);
  font-size: .64rem;
}

.condition-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

.condition-card {
  display: grid;
  gap: .15rem;
  padding: .65rem .7rem;
  border: 1px solid rgba(183,146,94,.22);
  background: rgba(54,43,33,.35);
}

.condition-card span {
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.condition-card strong {
  color: var(--text);
  font-size: .8rem;
  font-weight: normal;
}

.condition-card small {
  color: var(--muted);
  font-size: .64rem;
}

@media (max-width: 650px) {
  .condition-grid {
    grid-template-columns: 1fr;
  }
}

/* v1.6: Creator-Balance */
.bio-list div small {
  color: var(--gold);
  opacity: .78;
  font-size: .64rem;
  letter-spacing: .04em;
}

/* v1.7: Contubernium */
.companion-card {
  width: 100%;
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.companion-card:hover {
  border-color: rgba(183,146,94,.55);
  background: rgba(75,58,43,.48);
}
.companion-info small {
  display: block;
  margin-top: .18rem;
  color: var(--muted);
  font-size: .62rem;
}
.companion-profile-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
}
.companion-profile-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  color: var(--gold);
  font-size: 1.2rem;
}
.companion-profile-head div:last-child {
  display: grid;
  gap: .15rem;
}
.companion-profile-head strong {
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: normal;
}
.companion-profile-head span {
  color: var(--muted);
  font-size: .75rem;
}
.companion-profile-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.companion-profile-meta div {
  display: grid;
  gap: .15rem;
  padding: .55rem;
  border: 1px solid rgba(96,79,63,.45);
}
.companion-profile-meta span {
  color: var(--muted);
  font-size: .64rem;
  text-transform: uppercase;
}
.companion-profile-meta strong {
  font-size: .78rem;
  font-weight: normal;
}
.companion-traits {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .8rem 0;
}
.companion-traits span {
  padding: .3rem .45rem;
  border: 1px solid rgba(183,146,94,.28);
  color: #d8c8b2;
  font-size: .68rem;
}
.companion-description {
  color: #d8d0c4;
  line-height: 1.65;
  font-size: .84rem;
}
@media(max-width:600px){
  .companion-profile-meta{grid-template-columns:1fr}
}


/* =========================================================
   v1.8.3 – kompaktere Spiel-UI + zuverlässiges Scrollen
   ========================================================= */

html,
body {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto !important;
}

body.game-active {
  height: auto;
  min-height: 100vh;
  overflow-y: auto !important;
}

/* Die Spielansicht darf höher als das Browserfenster werden. */
#game-screen,
.game-screen,
.game-shell,
.game-layout,
.game-page {
  height: auto !important;
  min-height: 100vh;
  max-height: none !important;
  overflow: visible !important;
}

/* Kopfbereich etwas ruhiger und flacher. */
.game-header,
.top-header,
.main-header {
  padding-top: 8px !important;
  padding-bottom: 7px !important;
}

.game-title,
.main-title {
  font-size: clamp(1.65rem, 2.2vw, 2.45rem) !important;
  line-height: 1.05 !important;
  margin-bottom: 4px !important;
}

.campaign-line,
.chapter-line,
.game-subtitle {
  font-size: .78rem !important;
  line-height: 1.25 !important;
}

/* Menüleiste kompakter. */
.game-nav,
.main-nav,
.top-nav {
  min-height: 45px !important;
  padding: 6px 8px !important;
}

.game-nav button,
.main-nav button,
.top-nav button,
.menu-button,
.nav-button {
  padding: 7px 12px !important;
  min-height: 32px !important;
  font-size: .86rem !important;
}

/* Hauptspalten bleiben ungefähr 20 / 60 / 20. */
.game-columns,
.main-columns,
.game-content-grid {
  height: auto !important;
  min-height: calc(100vh - 122px) !important;
  max-height: none !important;
  align-items: stretch !important;
  overflow: visible !important;
}

/* Seitenleisten dichter. */
.character-panel,
.left-panel,
.companions-panel,
.right-panel,
.sidebar {
  padding: 12px !important;
}

.character-panel h2,
.left-panel h2,
.companions-panel h2,
.right-panel h2,
.sidebar h2 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  font-size: .92rem !important;
}

.portrait-placeholder,
.character-portrait {
  min-height: 245px !important;
  height: clamp(245px, 34vh, 390px) !important;
}

/* Charakterdaten links enger setzen. */
.character-summary,
.character-details,
.character-stats {
  line-height: 1.25 !important;
}

.character-summary h3,
.character-details h3,
.player-name {
  margin-top: 10px !important;
  margin-bottom: 3px !important;
}

.character-summary p,
.character-details p,
.character-stats p {
  margin: 4px 0 !important;
}

/* Banner / Eventkopf erhält weniger vertikale Höhe. */
.event-header,
.event-banner,
.current-event-header {
  padding-top: 22px !important;
  padding-bottom: 20px !important;
  min-height: 120px !important;
}

.event-header h1,
.event-banner h1,
#event-title {
  font-size: clamp(1.75rem, 2.35vw, 2.65rem) !important;
  line-height: 1.05 !important;
  margin: 5px 0 7px !important;
}

.event-meta {
  font-size: .82rem !important;
  gap: 8px !important;
}

/* Der eigentliche Spielbereich bleibt optisch der Schwerpunkt. */
.event-area,
.event-main,
.event-stage,
.event-content-wrapper {
  min-height: 430px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.event-card,
.event-content,
.event-panel {
  min-height: 390px !important;
  height: auto !important;
  max-height: none !important;
  padding: 18px 22px !important;
  overflow: visible !important;
}

.event-block {
  margin-bottom: 14px !important;
}

.narration-block p,
.dialogue-text {
  line-height: 1.55 !important;
}

/* Reaktionsbereich darf die Seite nach unten verlängern. */
.reaction-area,
.reactions,
.reaction-panel,
#reaction-container {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-top: 14px !important;
  padding-bottom: 18px !important;
}

.reaction-option,
.reaction-button {
  padding: 11px 14px !important;
}

/* Rechte Kameradenkarten deutlich kompakter. */
.present-companion,
.companion-card,
.present-card {
  min-height: 0 !important;
  padding: 10px !important;
  margin-bottom: 9px !important;
}

.present-companion .avatar,
.companion-card .avatar,
.present-card .avatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}

.present-companion strong,
.companion-card strong,
.present-card strong {
  font-size: .9rem !important;
  line-height: 1.15 !important;
}

.present-companion small,
.companion-card small,
.present-card small {
  font-size: .68rem !important;
}

/* Kleine Displays: Seitenleisten dürfen normal mit der Seite laufen. */
@media (max-height: 850px) and (min-width: 1100px) {
  .portrait-placeholder,
  .character-portrait {
    height: 250px !important;
    min-height: 250px !important;
  }

  .event-header,
  .event-banner,
  .current-event-header {
    min-height: 105px !important;
    padding-top: 16px !important;
    padding-bottom: 15px !important;
  }

  .present-companion,
  .companion-card,
  .present-card {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* Wenn der Bildschirm schmaler wird, lieber sauber umbrechen als abschneiden. */
@media (max-width: 1050px) {
  .game-columns,
  .main-columns,
  .game-content-grid {
    grid-template-columns: 1fr !important;
  }

  .character-panel,
  .left-panel,
  .companions-panel,
  .right-panel {
    min-height: auto !important;
  }
}


/* =========================================================
   v1.8.4 – tatsächlicher Compact-Desktop-Pass
   ========================================================= */
@media (min-width: 1200px) {
  body {
    font-size: 14px !important;
  }

  /* Gesamtkopf sichtbar kleiner */
  header,
  .game-header,
  .top-header,
  .main-header {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  header h1,
  .game-title,
  .main-title {
    font-size: 1.75rem !important;
    letter-spacing: .16em !important;
    margin: 0 0 2px !important;
  }

  header .campaign-context,
  .campaign-line,
  .chapter-line,
  .game-subtitle {
    font-size: .68rem !important;
  }

  nav,
  .game-nav,
  .main-nav,
  .top-nav {
    min-height: 36px !important;
    padding: 4px !important;
  }

  nav button,
  .game-nav button,
  .main-nav button,
  .top-nav button,
  .menu-button,
  .nav-button {
    font-size: .75rem !important;
    min-height: 27px !important;
    padding: 5px 9px !important;
  }

  /* Spalten: Seitenleisten wirklich schmaler, Mitte größer */
  .game-layout,
  .game-columns,
  .main-columns,
  .game-content-grid {
    grid-template-columns: 18.5% 63% 18.5% !important;
  }

  .sidebar,
  .character-panel,
  .left-panel,
  .companions-panel,
  .right-panel {
    padding: 8px !important;
  }

  .sidebar h2,
  .character-panel h2,
  .left-panel h2,
  .companions-panel h2,
  .right-panel h2 {
    font-size: .78rem !important;
    margin-bottom: 6px !important;
  }

  .portrait-placeholder,
  .character-portrait {
    height: 220px !important;
    min-height: 220px !important;
  }

  .player-name,
  .character-summary h3,
  .character-details h3 {
    font-size: 1rem !important;
    margin-top: 7px !important;
  }

  .character-summary,
  .character-details,
  .character-stats {
    font-size: .72rem !important;
    line-height: 1.18 !important;
  }

  /* Eventkopf deutlich flacher */
  .event-header,
  .event-banner,
  .current-event-header {
    min-height: 88px !important;
    padding: 12px 14px 10px !important;
  }

  .event-header h1,
  .event-banner h1,
  #event-title {
    font-size: 1.85rem !important;
    margin: 2px 0 5px !important;
  }

  .event-meta {
    font-size: .7rem !important;
  }

  /* Große Leerflächen reduzieren */
  .event-area,
  .event-main,
  .event-stage,
  .event-content-wrapper {
    min-height: 330px !important;
  }

  .event-card,
  .event-content,
  .event-panel {
    min-height: 300px !important;
    padding: 14px 18px !important;
  }

  .narration-block p,
  .dialogue-text {
    font-size: .9rem !important;
    line-height: 1.42 !important;
  }

  .dialogue-block {
    padding: 11px 14px !important;
  }

  .scene-note {
    padding: 9px 12px !important;
  }

  .reaction-area,
  .reactions,
  .reaction-panel,
  #reaction-container {
    padding-top: 9px !important;
    padding-bottom: 10px !important;
  }

  .reaction-option,
  .reaction-button {
    min-height: 0 !important;
    padding: 8px 11px !important;
    font-size: .78rem !important;
  }

  /* Direkt anwesend: kompakter und mehr Platz für Namen */
  .present-companion,
  .companion-card,
  .present-card {
    padding: 7px !important;
    margin-bottom: 6px !important;
    min-height: 64px !important;
  }

  .present-companion .avatar,
  .companion-card .avatar,
  .present-card .avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .present-companion strong,
  .companion-card strong,
  .present-card strong {
    font-size: .78rem !important;
  }

  .present-companion small,
  .companion-card small,
  .present-card small {
    font-size: .59rem !important;
  }
}


/* =========================================================
   v2.0.2 – zentrierte, kompaktere Desktop-Oberfläche
   ========================================================= */

body {
  background: #15110e;
}

.main-menu,
.creator-screen,
.prologue-screen,
.game-screen {
  width: min(100%, 1680px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.game-screen {
  min-height: 100vh;
  border-left: 1px solid rgba(183,146,94,.14);
  border-right: 1px solid rgba(183,146,94,.14);
  box-shadow:
    -22px 0 45px rgba(0,0,0,.18),
     22px 0 45px rgba(0,0,0,.18);
}

.game-screen > header,
.game-screen > nav,
.game-screen > .game-grid {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.game-grid {
  grid-template-columns: 18% minmax(0, 64%) 18% !important;
  column-gap: 0 !important;
}

.left-panel,
.right-panel {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.center-column {
  min-width: 0;
}

.event-banner {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.event-area {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.event-content-stack {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.reaction-area {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.reaction-list {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1800px) {
  .main-menu,
  .creator-screen,
  .prologue-screen,
  .game-screen {
    width: min(calc(100% - 120px), 1680px) !important;
  }
}

@media (max-width: 1750px) {
  .main-menu,
  .creator-screen,
  .prologue-screen,
  .game-screen {
    width: min(calc(100% - 24px), 1680px) !important;
  }
}

@media (max-width: 1100px) {
  .main-menu,
  .creator-screen,
  .prologue-screen,
  .game-screen {
    width: 100% !important;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  .game-grid {
    grid-template-columns: 1fr !important;
  }

  .event-content-stack,
  .reaction-list {
    max-width: none;
  }
}


/* =========================================================
   v2.0.3 – FIX: tatsächliche Spielcontainer zentrieren
   ========================================================= */

/* Das HTML verwendet IDs (#game-screen etc.), keine .game-screen-Klasse. */
#game-screen {
  width: min(calc(100% - 96px), 1600px) !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  min-height: 100vh !important;
  background: #15110e;
  border-left: 1px solid rgba(183,146,94,.18);
  border-right: 1px solid rgba(183,146,94,.18);
  box-shadow:
    -34px 0 56px rgba(0,0,0,.26),
     34px 0 56px rgba(0,0,0,.26);
}

#game-screen > .game-shell {
  width: 100% !important;
  max-width: 1600px !important;
  margin: 0 !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
}

/* Auch Hauptmenü, Creator und Vorstellung bleiben optisch in derselben Breitenwelt. */
#main-menu,
#creator-screen,
#prologue-screen {
  width: min(calc(100% - 96px), 1600px) !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Innerhalb der kompakten Fläche bekommt die Story etwas mehr Gewicht. */
#game-screen .game-grid {
  width: 100% !important;
  grid-template-columns: 18% minmax(0, 64%) 18% !important;
}

#game-screen .game-header,
#game-screen .top-nav,
#game-screen .game-grid {
  max-width: 100% !important;
}

/* Textblöcke nicht über die ganze Mittelspalte ziehen. */
#game-screen .event-content-stack,
#game-screen .reaction-list {
  width: min(100%, 940px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Auf sehr breiten Bildschirmen bleiben die Seitenränder klar sichtbar. */
@media (min-width: 1800px) {
  #game-screen,
  #main-menu,
  #creator-screen,
  #prologue-screen {
    width: 1600px !important;
  }
}

/* Auf normalen 16:9-Desktops nur moderate Außenabstände. */
@media (max-width: 1700px) {
  #game-screen,
  #main-menu,
  #creator-screen,
  #prologue-screen {
    width: calc(100% - 32px) !important;
    max-width: 1600px !important;
  }
}

/* Auf kleineren Displays wieder volle Breite. */
@media (max-width: 1100px) {
  #game-screen,
  #main-menu,
  #creator-screen,
  #prologue-screen {
    width: 100% !important;
    max-width: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }
}


/* =========================================================
   v2.1 – Lesbarkeit, Charakterstatus, Fähigkeiten, Story-Polish
   ========================================================= */

#game-screen .game-header h1 {
  font-size: clamp(2.2rem, 2.8vw, 3.2rem) !important;
  letter-spacing: .18em !important;
  line-height: 1 !important;
}

#game-screen .chapter-line {
  font-size: .86rem !important;
  margin-top: 5px !important;
}

#game-screen .top-nav {
  min-height: 48px !important;
  padding: 7px 10px !important;
}

#game-screen .top-button {
  font-size: .92rem !important;
  min-height: 34px !important;
  padding: 7px 14px !important;
}

#game-screen .panel-title,
#game-screen .event-kicker,
#game-screen .event-focus-label,
#game-screen .reaction-title,
#game-screen .sidebar-section-title {
  font-size: .8rem !important;
  letter-spacing: .08em !important;
}

#game-screen .event-title {
  font-size: clamp(2rem, 2.6vw, 3rem) !important;
}

#game-screen .event-meta,
#game-screen .dialogue-role,
#game-screen .companion-info small,
#game-screen .reaction-type,
#game-screen .character-basics small,
#game-screen .status-meter small {
  font-size: .72rem !important;
}

#game-screen .narration-block p,
#game-screen .dialogue-text,
#game-screen .scene-note-text {
  font-size: 1rem !important;
  line-height: 1.62 !important;
}

#game-screen .dialogue-speaker {
  font-size: 1rem !important;
}

#game-screen .reaction-text {
  font-size: .95rem !important;
  line-height: 1.35 !important;
}

#game-screen .reaction-button {
  padding: 13px 16px !important;
  min-height: 62px !important;
}

/* Statusleisten */
#game-screen .status-bars {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

#game-screen .status-meter {
  display: grid;
  gap: 5px;
}

#game-screen .status-meter-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

#game-screen .status-meter-head span {
  font-size: .74rem;
  color: #d9d0c5;
}

#game-screen .status-track {
  height: 8px;
  border: 1px solid rgba(193,163,107,.22);
  background: rgba(0,0,0,.28);
  overflow: hidden;
}

#game-screen .status-fill {
  height: 100%;
  width: 0;
  transition: width .25s ease;
}

#game-screen .health-fill {
  background: linear-gradient(90deg, #5e6f42, #8b9d58);
}

#game-screen .fatigue-fill {
  background: linear-gradient(90deg, #8b5a2b, #b27a38);
}

#game-screen .morale-fill {
  background: linear-gradient(90deg, #3f5e70, #6f8ea0);
}

/* Sichtbare Fähigkeiten links */
#game-screen .sidebar-skills {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(193,163,107,.18);
}

#game-screen .sidebar-section-title {
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}

#game-screen .sidebar-skills-list {
  display: grid;
  gap: 5px;
}

#game-screen .sidebar-skill-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: baseline;
  font-size: .78rem;
}

#game-screen .sidebar-skill-name {
  color: #ded4c8;
}

#game-screen .sidebar-skill-level {
  color: var(--muted);
  font-size: .68rem;
}

#game-screen .sidebar-skill-empty {
  color: var(--muted);
  font-size: .72rem;
  font-style: italic;
}

/* Kameradenkarten besser lesbar */
#game-screen .companion-info strong {
  font-size: .88rem !important;
  line-height: 1.2 !important;
}

#game-screen .companion-info span {
  font-size: .74rem !important;
}

/* Bei sehr breiten Screens nicht wieder winzig werden */
@media (min-width: 1800px) {
  #game-screen {
    font-size: 15px !important;
  }
}


/* v2.11: verständlicher Charakterzustand */
.sidebar-attributes {
  margin-top: 1rem;
}
.sidebar-attributes-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .38rem .5rem;
}
.sidebar-attribute-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem;
  padding: .38rem .45rem;
  border: 1px solid rgba(183,146,94,.16);
  background: rgba(54,43,33,.22);
}
.sidebar-attribute-row span {
  color: var(--muted);
  font-size: .72rem;
}
.sidebar-attribute-row strong {
  color: var(--text);
  font-size: .82rem;
  font-weight: normal;
}
.sidebar-attribute-row strong small {
  color: var(--muted);
  font-size: .62rem;
}
.sidebar-attribute-row.is-affected {
  border-color: rgba(183,146,94,.42);
}
.sidebar-attribute-row.is-affected strong {
  color: var(--gold);
}
.sidebar-condition-note {
  margin-top: .55rem;
  padding: .55rem .6rem;
  border-left: 2px solid rgba(183,146,94,.55);
  background: rgba(54,43,33,.24);
}
.sidebar-condition-note:empty {
  display: none;
}
.sidebar-condition-note strong {
  display: block;
  margin-bottom: .2rem;
  color: var(--gold);
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sidebar-condition-note p {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}
.character-system-help {
  margin: -.2rem 0 .75rem;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}
.stat-card small {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.3;
}
.stat-card.is-affected strong {
  color: var(--gold);
}
.condition-explanation {
  display: grid;
  gap: .45rem;
  margin-top: .75rem;
}
.condition-explanation p {
  margin: 0;
  padding: .55rem .65rem;
  border-left: 2px solid rgba(183,146,94,.48);
  background: rgba(54,43,33,.25);
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}


/* v2.12: Kameraden, Contubernium & Kontakte */
.social-help {
  margin: 0 0 .85rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}
.social-roster, .unit-member-list {
  display: grid;
  gap: .55rem;
}
.social-person-card {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .7rem;
  color: inherit;
  text-align: left;
  font: inherit;
  border: 1px solid rgba(183,146,94,.25);
  background: rgba(54,43,33,.28);
}
button.social-person-card { cursor: pointer; }
button.social-person-card:hover, .unit-member:hover {
  border-color: rgba(183,146,94,.6);
  background: rgba(75,58,43,.45);
}
.social-avatar, .unit-member-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  color: var(--gold);
}
.social-person-main { display:grid; gap:.1rem; min-width:0; }
.social-person-main strong { color:var(--text); font-size:.92rem; }
.social-person-main span { color:var(--muted); font-size:.74rem; }
.social-person-main small { color:var(--gold); opacity:.82; font-size:.68rem; }
.social-relation { display:grid; gap:.15rem; text-align:right; }
.social-relation span { color:var(--muted); font-size:.67rem; }
.social-empty {
  padding: 1rem;
  border: 1px dashed rgba(183,146,94,.28);
  color: var(--muted);
}
.social-empty strong { color:var(--text); }
.social-empty p { margin:.45rem 0 0; line-height:1.55; font-size:.8rem; }
.social-empty-large { padding:1.25rem; }
.unit-heading {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  padding-bottom:.8rem;
  border-bottom:1px solid rgba(183,146,94,.22);
}
.unit-heading > div:first-child { display:grid; gap:.18rem; }
.unit-heading > div:first-child strong { color:var(--gold); font-size:1.12rem; }
.unit-heading > div:first-child span { color:var(--muted); font-size:.76rem; }
.unit-command { display:grid; text-align:right; gap:.12rem; }
.unit-command small { color:var(--muted); text-transform:uppercase; font-size:.62rem; letter-spacing:.08em; }
.unit-command strong { color:var(--text); font-size:.86rem; }
.unit-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; margin:1rem 0; }
.unit-metric { padding:.75rem; border:1px solid rgba(183,146,94,.22); background:rgba(54,43,33,.25); }
.unit-metric-head { display:flex; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.unit-metric-head strong { color:var(--text); font-size:.78rem; }
.unit-metric-head span { color:var(--gold); font-size:.68rem; }
.unit-meter { height:6px; background:rgba(255,255,255,.07); overflow:hidden; }
.unit-meter-fill { height:100%; background:var(--gold); opacity:.78; }
.unit-metric small { display:block; margin-top:.5rem; color:var(--muted); font-size:.68rem; line-height:1.4; }
.unit-section { margin-top:1rem; }
.unit-section h3 { margin:0 0 .55rem; color:var(--gold); font-size:.86rem; text-transform:uppercase; letter-spacing:.06em; }
.unit-member-list { grid-template-columns:1fr 1fr; }
.unit-member {
  display:grid; grid-template-columns:38px 1fr; gap:.6rem; align-items:center;
  padding:.55rem; border:1px solid rgba(183,146,94,.2); background:rgba(54,43,33,.2);
  color:inherit; text-align:left; font:inherit; cursor:pointer;
}
.unit-member-avatar { width:34px; height:34px; }
.unit-member > span:last-child { display:grid; gap:.1rem; }
.unit-member strong { color:var(--text); font-size:.8rem; }
.unit-member small { color:var(--muted); font-size:.67rem; }
.unit-system-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }
.unit-system-grid div { display:grid; gap:.2rem; padding:.65rem; border-left:2px solid rgba(183,146,94,.45); background:rgba(54,43,33,.22); }
.unit-system-grid strong { color:var(--text); font-size:.76rem; }
.unit-system-grid span { color:var(--muted); font-size:.68rem; line-height:1.4; }
@media(max-width:760px){
  .unit-metrics,.unit-system-grid{grid-template-columns:1fr}
  .unit-member-list{grid-template-columns:1fr}
  .social-person-card{grid-template-columns:40px 1fr}
  .social-relation{grid-column:2;text-align:left}
}


/* v2.14: aktive Contubernium-Auswirkungen */
.unit-active-effects {
  display: grid;
  gap: .45rem;
}
.unit-active-effects p {
  margin: 0;
  padding: .55rem .65rem;
  border-left: 2px solid rgba(183,146,94,.48);
  background: rgba(54,43,33,.23);
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.45;
}


/* =========================================================
   v2.15 – Wiki
   ========================================================= */

.wiki-intro {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: .85rem;
  border: 1px solid rgba(183,146,94,.24);
  background: rgba(54,43,33,.27);
}
.wiki-intro > div {
  display: grid;
  gap: .3rem;
}
.wiki-intro strong {
  color: var(--gold);
  font-size: 1rem;
}
.wiki-intro p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.55;
  max-width: 680px;
}
.wiki-intro > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .72rem;
  border: 1px solid rgba(183,146,94,.24);
  padding: .35rem .5rem;
}
.wiki-search-row {
  margin-top: .8rem;
}
.wiki-search {
  width: 100%;
  padding: .72rem .8rem;
  border: 1px solid rgba(183,146,94,.32);
  background: rgba(20,17,14,.58);
  color: var(--text);
  font: inherit;
  font-size: .86rem;
  outline: none;
}
.wiki-search:focus {
  border-color: rgba(183,146,94,.7);
}
.wiki-categories {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .7rem 0;
}
.wiki-category {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  padding: .45rem .6rem;
  border: 1px solid rgba(183,146,94,.22);
  background: rgba(54,43,33,.2);
  color: var(--muted);
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
}
.wiki-category span {
  opacity: .7;
}
.wiki-category:hover,
.wiki-category.active {
  color: var(--gold);
  border-color: rgba(183,146,94,.55);
  background: rgba(75,58,43,.42);
}
.wiki-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.wiki-result-card {
  display: grid;
  gap: .25rem;
  padding: .75rem;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border: 1px solid rgba(183,146,94,.22);
  background: rgba(54,43,33,.22);
}
.wiki-result-card:hover {
  border-color: rgba(183,146,94,.58);
  background: rgba(75,58,43,.42);
}
.wiki-result-card strong {
  color: var(--text);
  font-size: .9rem;
}
.wiki-result-card p {
  margin: 0;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.45;
}
.wiki-result-type {
  color: var(--gold);
  opacity: .85;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .62rem;
}
.wiki-empty {
  padding: 1rem;
  border: 1px dashed rgba(183,146,94,.28);
}
.wiki-empty strong {
  color: var(--text);
}
.wiki-empty p {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}
.wiki-back {
  margin-bottom: .8rem;
  padding: .45rem 0;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
}
.wiki-entry {
  display: grid;
  gap: .8rem;
}
.wiki-entry-head {
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(183,146,94,.23);
}
.wiki-entry-head h3 {
  margin: .2rem 0;
  color: var(--gold);
  font-size: 1.45rem;
  font-weight: normal;
}
.wiki-entry-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.wiki-entry-text {
  color: var(--text);
  font-size: .88rem;
  line-height: 1.65;
}
.wiki-entry-text p {
  margin: 0;
}
.wiki-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.wiki-keywords span {
  padding: .28rem .42rem;
  color: var(--muted);
  font-size: .66rem;
  border: 1px solid rgba(183,146,94,.2);
}
.wiki-imperium-placeholder,
.wiki-imperium-disabled {
  margin-top: .9rem;
  padding: .7rem .8rem;
  border-left: 2px solid rgba(183,146,94,.38);
  background: rgba(54,43,33,.2);
}
.wiki-imperium-placeholder strong,
.wiki-imperium-disabled span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
}
.wiki-imperium-placeholder p,
.wiki-imperium-disabled small {
  display: block;
  margin: .25rem 0 0;
  color: var(--muted);
  opacity: .75;
  font-size: .68rem;
  line-height: 1.45;
}
.wiki-inline-link {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px dotted rgba(183,146,94,.72);
  background: transparent;
  color: #d9bd84;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
.wiki-inline-link:hover {
  color: var(--gold);
  border-bottom-style: solid;
}
.event-meta .wiki-inline-link {
  font-size: inherit;
}
@media (max-width: 720px) {
  .wiki-results {
    grid-template-columns: 1fr;
  }
  .wiki-intro {
    display: grid;
  }
}


/* v2.17 – Gerüchte & Varros Analyse */
.rumor-varro {
  padding: .85rem;
  border: 1px solid rgba(183,146,94,.3);
  background: rgba(54,43,33,.28);
}
.rumor-varro-head, .rumor-section-head, .rumor-card-head {
  display:flex; justify-content:space-between; gap:.8rem; align-items:flex-start;
}
.rumor-varro-head > div {display:grid; gap:.08rem}
.rumor-varro-head small {color:var(--gold); text-transform:uppercase; letter-spacing:.08em; font-size:.62rem}
.rumor-varro-head strong {color:var(--text); font-size:.92rem}
.rumor-varro-head > span {color:var(--gold); font-size:.72rem}
.rumor-varro .unit-meter {margin-top:.55rem}
.rumor-varro p, .rumor-system-note p {margin:.55rem 0 0;color:var(--muted);font-size:.74rem;line-height:1.5}
.rumor-section {margin-top:1rem}
.rumor-section h3 {margin:0;color:var(--gold);font-size:.84rem;text-transform:uppercase;letter-spacing:.06em}
.rumor-section-head > span {color:var(--muted);font-size:.72rem}
.rumor-list,.intel-list {display:grid;gap:.55rem;margin-top:.55rem}
.rumor-card,.intel-card {padding:.75rem;border:1px solid rgba(183,146,94,.22);background:rgba(54,43,33,.22)}
.rumor-card-head > div {display:grid;gap:.2rem}
.rumor-card strong,.intel-card strong {color:var(--text);font-size:.88rem}
.rumor-card-head > small {color:var(--muted);font-size:.65rem}
.rumor-status {width:max-content;padding:.18rem .3rem;border:1px solid rgba(183,146,94,.3);color:var(--muted);font-size:.59rem;text-transform:uppercase;letter-spacing:.05em}
.rumor-status.confirmed {color:var(--gold);border-color:rgba(183,146,94,.6)}
.rumor-card p,.intel-card p {margin:.5rem 0;color:var(--muted);font-size:.76rem;line-height:1.5}
.rumor-card footer {display:flex;justify-content:space-between;gap:.5rem;padding-top:.45rem;border-top:1px solid rgba(183,146,94,.13)}
.rumor-card footer span,.intel-card small {color:var(--muted);opacity:.78;font-size:.64rem;line-height:1.4}
.intel-card {border-left:3px solid rgba(183,146,94,.7)}
.rumor-source-list {display:grid;gap:.4rem;margin-top:.55rem}
.rumor-source-list div {display:flex;justify-content:space-between;gap:.7rem;padding:.55rem .65rem;border-left:2px solid rgba(183,146,94,.4);background:rgba(54,43,33,.2)}
.rumor-source-list strong {color:var(--text);font-size:.74rem}
.rumor-source-list span {color:var(--muted);font-size:.67rem}
.rumor-system-note {margin-top:1rem;padding:.7rem .8rem;border:1px dashed rgba(183,146,94,.25)}
.rumor-system-note strong {color:var(--gold);font-size:.75rem}

/* v2.19–2.22 Systemausbau */
.relationship-panel,.injury-list,.contact-system-note{margin-top:.8rem;padding:.7rem;border:1px solid rgba(183,146,94,.22);background:rgba(54,43,33,.2)}
.relationship-head{display:flex;justify-content:space-between;color:var(--gold);font-size:.76rem}
.relationship-values,.contact-values{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-top:.55rem}
.contact-values{grid-template-columns:repeat(3,1fr);margin:.7rem 0}
.relationship-values div,.contact-values div{display:grid;gap:.15rem;padding:.45rem;background:rgba(20,17,14,.3)}
.relationship-values span,.contact-values span{color:var(--muted);font-size:.62rem}
.relationship-values strong,.contact-values strong{color:var(--text);font-size:.82rem}
.relationship-effects{margin-top:.55rem}
.relationship-effects p,.contact-system-note{margin:.25rem 0;color:var(--muted);font-size:.7rem;line-height:1.45}
.injury-list{display:grid;gap:.4rem}
.injury-list>strong{color:var(--gold);font-size:.76rem}
.injury-list div{display:flex;justify-content:space-between;gap:.6rem}
.injury-list span{font-size:.75rem}.injury-list small{color:var(--muted);font-size:.65rem}
.game-menu-grid{display:grid;gap:.55rem}
.game-menu-action{display:grid;gap:.2rem;text-align:left;padding:.8rem;border:1px solid rgba(183,146,94,.28);background:rgba(54,43,33,.25);color:var(--text);font:inherit;cursor:pointer}
.game-menu-action:hover:not(:disabled){border-color:rgba(183,146,94,.65);background:rgba(75,58,43,.42)}
.game-menu-action:disabled{opacity:.42;cursor:not-allowed}
.game-menu-action strong{color:var(--gold);font-size:.86rem}.game-menu-action span{color:var(--muted);font-size:.7rem;line-height:1.4}
.game-menu-action.danger strong{color:#c99b8e}.save-note{color:var(--muted);font-size:.7rem;line-height:1.45}
@media(max-width:720px){.relationship-values{grid-template-columns:repeat(2,1fr)}}


/* v2.23 – Charakterbereich: Fähigkeiten dauerhaft sichtbar */
#game-screen .sidebar-skills {
  display: block !important;
  visibility: visible !important;
  max-height: none !important;
  overflow: visible !important;
}

#game-screen .sidebar-skills-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-height: none !important;
  overflow: visible !important;
}

#game-screen .sidebar-skill-row {
  min-height: 24px;
}

#game-screen .character-panel,
#game-screen .left-panel,
#game-screen .sidebar {
  max-height: none !important;
  overflow: visible !important;
}


/* v2.23 – linke Charakterleiste kompakter */
#game-screen .left-panel .portrait {
  min-height: 175px !important;
  height: clamp(175px, 22vh, 245px) !important;
}

#game-screen .left-panel .character-basics {
  margin-bottom: .55rem !important;
}

#game-screen .left-panel .status-block {
  margin-top: .55rem !important;
}

#game-screen .left-panel .sidebar-attributes {
  margin-top: .7rem !important;
}

#game-screen .left-panel .sidebar-skills {
  margin-top: .7rem !important;
  padding-top: .7rem !important;
}


/* v2.24 – Gerüchtearchiv */
.rumor-main-toolbar,
.rumor-archive-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.75rem;
}
.rumor-main-toolbar > div {
  display:grid;
  gap:.12rem;
}
.rumor-main-toolbar > div strong {
  color:var(--gold);
  font-size:.82rem;
}
.rumor-main-toolbar > div span,
.rumor-archive-toolbar > span {
  color:var(--muted);
  font-size:.68rem;
}
.rumor-archive-button {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.48rem .7rem;
  border:1px solid rgba(183,146,94,.42);
  background:rgba(54,43,33,.35);
  color:var(--text);
  font:inherit;
  font-size:.75rem;
  cursor:pointer;
}
.rumor-archive-button:hover {
  border-color:rgba(183,146,94,.75);
  background:rgba(75,58,43,.5);
}
.rumor-archive-button span {
  display:grid;
  place-items:center;
  min-width:1.25rem;
  height:1.25rem;
  padding:0 .25rem;
  border:1px solid rgba(183,146,94,.25);
  color:var(--gold);
  font-size:.64rem;
}
.rumor-archive-list {
  display:grid;
  gap:.55rem;
}
.rumor-archive-card {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  padding:.8rem;
  border:1px solid rgba(183,146,94,.25);
  background:rgba(54,43,33,.25);
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.rumor-archive-card:hover {
  border-color:rgba(183,146,94,.62);
  background:rgba(75,58,43,.43);
}
.rumor-archive-card > div {
  display:grid;
  gap:.2rem;
}
.rumor-archive-card strong {
  color:var(--text);
  font-size:.88rem;
}
.rumor-archive-card small {
  color:var(--muted);
  font-size:.66rem;
}
.rumor-archive-open {
  flex:0 0 auto;
  color:var(--gold);
  font-size:.7rem;
}
.rumor-archive-detail {
  display:grid;
  gap:1rem;
}
.rumor-archive-detail > header {
  padding-bottom:.7rem;
  border-bottom:1px solid rgba(183,146,94,.22);
}
.rumor-archive-detail > header small {
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:.62rem;
}
.rumor-archive-detail > header h3 {
  margin:.25rem 0 0;
  color:var(--text);
  font-size:1.15rem;
  font-weight:normal;
}
.rumor-archive-section {
  display:grid;
  gap:.55rem;
}
.rumor-archive-section h4 {
  margin:0;
  color:var(--gold);
  font-size:.77rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.rumor-archive-rumors {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.4rem;
}
.rumor-archive-rumors > div {
  display:grid;
  gap:.1rem;
  padding:.55rem .6rem;
  border:1px solid rgba(183,146,94,.17);
  background:rgba(54,43,33,.18);
}
.rumor-archive-rumors strong {
  color:var(--text);
  font-size:.75rem;
}
.rumor-archive-rumors span {
  color:var(--muted);
  font-size:.62rem;
}
.rumor-event-history {
  display:grid;
  gap:.35rem;
}
.rumor-event-history-row {
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  gap:.55rem;
  padding:.48rem .55rem;
  border-left:2px solid rgba(183,146,94,.38);
  background:rgba(54,43,33,.18);
}
.rumor-event-history-row > span {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid rgba(183,146,94,.25);
  color:var(--gold);
  font-size:.62rem;
}
.rumor-event-history-row > div {
  display:grid;
  gap:.08rem;
}
.rumor-event-history-row strong {
  color:var(--text);
  font-size:.75rem;
}
.rumor-event-history-row small {
  color:var(--muted);
  font-size:.61rem;
}
.varro-resolution,
.final-resolution {
  padding:.75rem;
  border:1px solid rgba(183,146,94,.25);
  background:rgba(54,43,33,.24);
}
.varro-resolution {
  border-left:3px solid rgba(183,146,94,.68);
}
.varro-resolution-head {
  display:flex;
  align-items:center;
  gap:.55rem;
}
.varro-resolution-head > span {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(183,146,94,.4);
  color:var(--gold);
}
.varro-resolution-head > div {
  display:grid;
  gap:.08rem;
}
.varro-resolution-head small {
  color:var(--muted);
  font-size:.61rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.varro-resolution-head strong {
  color:var(--gold);
  font-size:.78rem;
}
.varro-resolution p,
.final-resolution p {
  margin:.15rem 0 0;
  color:var(--text);
  font-size:.78rem;
  line-height:1.55;
}
.varro-resolution > small,
.final-resolution > small {
  color:var(--muted);
  font-size:.64rem;
  line-height:1.45;
}
@media(max-width:720px) {
  .rumor-archive-rumors {
    grid-template-columns:1fr;
  }
  .rumor-main-toolbar {
    align-items:flex-end;
  }
}


/* v2.29 – direkter Kampagne-2-Teststart */
.main-menu-buttons .campaign-jump {
  border-style: dashed;
}
.main-menu-buttons .campaign-jump::before {
  content: "↪ ";
  opacity: .8;
}

/* v2.31 – qualitative Beziehungen */
.relationship-values.qualitative strong {
  text-transform: none;
  font-size: .74rem;
}
.relationship-values.qualitative div {
  min-height: 46px;
}


/* v2.85 · Pilum-Minispiel */
.reaction-minigame{border-color:#9a7b3f!important;box-shadow:inset 3px 0 0 #c2a25a;background:linear-gradient(90deg,rgba(120,82,35,.28),rgba(35,28,21,.85))!important}
.reaction-minigame::before{content:"➶"!important;color:#d7bd78!important}
.pilum-game{color:var(--text);min-width:0}.pilum-game-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.pilum-game-head strong{display:block;color:#ead6a2;font-size:1.08rem}.pilum-game-head span{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}.pilum-game-stats{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.pilum-game-stats span{border:1px solid var(--line);padding:5px 8px;background:rgba(0,0,0,.2);white-space:nowrap}.pilum-game-stats b{color:#ead6a2}.pilum-arena{position:relative;height:260px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(#7f8890 0 46%,#77715c 47% 59%,#5f5b43 60%);margin-bottom:14px}.pilum-ground{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(175deg,transparent 0 13%,rgba(64,55,37,.35) 14% 17%,transparent 18%),linear-gradient(#756b4d,#51472f)}.pilum-soldier{position:absolute;left:13%;bottom:42px;width:42px;height:95px;background:linear-gradient(90deg,#4b3526,#806044);border-radius:18px 18px 8px 8px;box-shadow:0 5px 16px rgba(0,0,0,.35)}.pilum-soldier::before{content:"";position:absolute;left:8px;top:-28px;width:27px;height:29px;border-radius:50%;background:#a77e5c;border:4px solid #55504a}.pilum-soldier::after{content:"";position:absolute;left:-12px;top:42px;width:65px;height:8px;background:#70513a;transform:rotate(-13deg);transform-origin:center}.pilum-weapon{position:absolute;left:22px;top:27px;width:145px;height:4px;background:linear-gradient(90deg,#775231 0 75%,#bbb8aa 76% 100%);transform:rotate(-11deg);transform-origin:2px 50%;z-index:4}.pilum-weapon::after{content:"";position:absolute;right:-10px;top:-3px;border-left:12px solid #c9c6b8;border-top:5px solid transparent;border-bottom:5px solid transparent}.pilum-weapon.flying{transition:none}.pilum-target{position:absolute;right:12%;bottom:38px;width:82px;height:104px;border-radius:42% 42% 35% 35%;background:radial-gradient(circle,#c5a65a 0 7%,#792e25 8% 34%,#b9974e 35% 40%,#8d392c 41% 69%,#c2a25a 70% 76%,#713126 77%);border:4px solid #4a3524;box-shadow:0 3px 12px rgba(0,0,0,.45)}.pilum-target i{position:absolute;left:34px;top:98px;width:10px;height:70px;background:#59432b;z-index:-1}.pilum-distance{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-size:.75rem;color:#e1d2af;background:rgba(0,0,0,.3);padding:4px 7px}.pilum-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:12px}.pilum-panel{border:1px solid var(--line);background:rgba(0,0,0,.18);padding:13px}.pilum-meter-wrap{margin:4px 0 15px}.pilum-meter-label{display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem;margin-bottom:5px}.pilum-meter{height:27px;position:relative;border:1px solid #584d38;background:#15130f;overflow:hidden}.pilum-zones{position:absolute;inset:0}.pilum-needle{position:absolute;top:-2px;bottom:-2px;width:4px;background:#f6ead0;box-shadow:0 0 8px rgba(255,255,255,.8);left:0}.pilum-action{width:100%;border:1px solid #7c6840;background:#3a3020;color:#f4e6bf;padding:11px 13px;font:inherit;font-weight:bold;cursor:pointer}.pilum-action:hover{background:#4a3d27}.pilum-action:disabled{opacity:.5;cursor:not-allowed}.pilum-hint{font-size:.72rem!important;line-height:1.4!important;margin:8px 0 0!important}.pilum-result{line-height:1.5;color:#d8cdb4}.pilum-grade{font-size:1.45rem;color:#f0daa2;margin-bottom:7px}.pilum-small{font-size:.78rem;color:var(--muted)}
@media(max-width:760px){.pilum-layout{grid-template-columns:1fr}.pilum-game-head{flex-direction:column}.pilum-game-stats{justify-content:flex-start}.pilum-arena{height:220px}.pilum-target{right:7%}.pilum-soldier{left:7%}}

/* v2.86 · Schild-&-Gladius-Minispiel */
.reaction-minigame[data-minigame="gladius"]::before{content:"⚔"!important;color:#d7bd78!important}
.gladius-game{color:var(--text);min-width:0}
.gladius-game-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}
.gladius-game-head strong{display:block;color:#ead6a2;font-size:1.08rem}.gladius-game-head span{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}
.gladius-game-stats{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.gladius-game-stats span{border:1px solid var(--line);padding:5px 8px;background:rgba(0,0,0,.2);white-space:nowrap}.gladius-game-stats b{color:#ead6a2}
.gladius-arena{height:300px;position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(to bottom,#77705f 0 49%,#8d7953 49% 53%,#5d4c35 53% 100%);margin-bottom:14px}
.gladius-fighter{position:absolute;bottom:48px;width:130px;height:190px}.gladius-player{left:9%}.gladius-enemy{right:9%;transform:scaleX(-1)}
.gladius-fighter .g-head{position:absolute;width:38px;height:38px;border-radius:50%;background:#b48863;left:46px;top:10px;border:2px solid #594331}.gladius-fighter .g-head::before{content:"";position:absolute;width:44px;height:18px;background:#77716a;left:-5px;top:-7px;border:2px solid #48433e;border-radius:50% 50% 20% 20%}
.gladius-fighter .g-body{position:absolute;width:56px;height:82px;left:36px;top:50px;background:#87372d;border:2px solid #59251f}.gladius-fighter .g-shield{position:absolute;width:54px;height:84px;left:8px;top:62px;border-radius:34% 34% 28% 28%;background:radial-gradient(circle,#c8aa63 0 7%,#85362c 8% 72%,#bea05d 73% 80%,#6f2d26 81%);border:3px solid #493323}.gladius-fighter .g-arm{position:absolute;width:62px;height:10px;background:#b48863;left:82px;top:70px;transform:rotate(-14deg);transform-origin:left center}.gladius-fighter .g-sword{position:absolute;width:67px;height:5px;background:#c7c4ba;left:133px;top:67px;transform:rotate(-14deg);transform-origin:left center;border:1px solid #66635e}.gladius-fighter .g-leg{position:absolute;width:14px;height:62px;background:#76624b;top:130px}.gladius-fighter .g-leg.a{left:45px}.gladius-fighter .g-leg.b{left:73px}
.gladius-intent{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(410px,58%);background:rgba(18,15,11,.9);border:1px solid #6c5a3b;padding:14px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}.gladius-intent-icon{font-size:38px;margin-bottom:4px}.gladius-intent-title{font-size:1.12rem;color:#f0d7a0;margin-bottom:6px}.gladius-intent-text{font-size:.82rem;color:#d9cdb1;line-height:1.45}
.gladius-timer{position:absolute;left:0;right:0;bottom:0;height:8px;background:#18140f}.gladius-timer-fill{height:100%;width:100%;background:#c4a35c;transform-origin:left center}
.gladius-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:12px}.gladius-panel{border:1px solid var(--line);background:rgba(0,0,0,.18);padding:13px}.gladius-progress{display:flex;gap:8px;margin-bottom:13px}.gladius-progress i{height:10px;flex:1;background:#18150f;border:1px solid #4a402f}.gladius-progress i.done{background:#6b7c56}.gladius-progress i.fail{background:#7d342b}.gladius-progress i.current{background:#c0a05a}
.gladius-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.gladius-actions button,.gladius-start{font:inherit;font-weight:bold;border:1px solid #78653e;color:#f4e6bf;cursor:pointer;padding:12px 8px}.gladius-actions .attack{background:#5a281f}.gladius-actions .block{background:#2f3d49}.gladius-actions .dodge{background:#3d4631}.gladius-actions button:hover,.gladius-start:hover{filter:brightness(1.16)}.gladius-actions button:disabled,.gladius-start:disabled{opacity:.42;cursor:not-allowed}.gladius-feedback{margin-top:12px;min-height:70px;padding:11px;border:1px solid #4a402f;background:#18150f;line-height:1.45}.gladius-start{margin-top:11px;width:100%;background:#3a3020}.gladius-story{line-height:1.55;color:#d9ccb0;min-height:175px}.gladius-story strong{color:#f0d8a0}.gladius-small{font-size:.76rem;color:var(--muted)}
@media(max-width:760px){.gladius-layout{grid-template-columns:1fr}.gladius-game-head{flex-direction:column}.gladius-game-stats{justify-content:flex-start}.gladius-arena{height:250px}.gladius-player{left:2%}.gladius-enemy{right:2%}.gladius-intent{width:64%}}


/* v2.88 · Wachdienst-Minispiel */
.reaction-minigame[data-minigame="watch"]::before{content:"◉"!important;color:#d7bd78!important}
.watch-game{border:1px solid #514d3c;background:#141613;color:#eee7d5}
.watch-head{padding:14px 16px;border-bottom:1px solid #494738;display:flex;justify-content:space-between;gap:14px;align-items:center}.watch-head strong{display:block;color:#ead8aa;font-size:1.05rem}.watch-head span{display:block;color:#aaa58f;font-size:.82rem;margin-top:3px}.watch-stats{display:flex;gap:8px;flex-wrap:wrap}.watch-stats span{border:1px solid #494738;background:#1d1e1a;padding:6px 8px;color:#d5c8a8}.watch-stats b{color:#f0dca8}
.watch-scene{height:330px;position:relative;overflow:hidden;cursor:crosshair;border-bottom:1px solid #494738;background:linear-gradient(#172027 0 50%,#222720 50% 55%,#24251c 55% 100%)}
.watch-moon{position:absolute;right:12%;top:28px;width:48px;height:48px;border-radius:50%;background:#d8d3b4;box-shadow:0 0 35px #d8d3b466}.watch-wall{position:absolute;left:0;right:0;bottom:0;height:84px;background:#4b4235;border-top:7px solid #655744}.watch-tower{position:absolute;left:7%;bottom:78px;width:82px;height:132px;background:#504638;border:5px solid #342e26}.watch-tower:before{content:"";position:absolute;left:-10px;right:-10px;top:-22px;height:25px;background:repeating-linear-gradient(90deg,#574b3c 0 16px,transparent 16px 27px)}.watch-gate{position:absolute;left:42%;bottom:78px;width:140px;height:110px;background:#4d4336;border:6px solid #332c24}.watch-gate:after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:78px;background:#211b17;border-radius:45px 45px 0 0}.watch-tent{position:absolute;width:100px;height:60px;background:#756849;clip-path:polygon(50% 0,100% 100%,0 100%);bottom:81px}.watch-tent.t1{left:24%}.watch-tent.t2{right:17%}.watch-fire{position:absolute;left:67%;bottom:87px;font-style:normal;font-size:25px;filter:brightness(.7)}.watch-tree{position:absolute;right:4%;bottom:81px;font-style:normal;font-size:68px;filter:brightness(.35)}.watch-guard{position:absolute;left:13%;bottom:83px;font-style:normal;font-size:40px;filter:brightness(.6)}
.watch-change{position:absolute;display:none;z-index:8;width:auto!important;padding:2px!important;border:0!important;background:transparent!important;font-size:28px;animation:watchPulse 1.4s infinite}.watch-change.c1{right:7%;bottom:108px}.watch-change.c2{left:30%;bottom:132px;font-size:24px}.watch-change.c3{left:59%;bottom:99px;font-size:24px}.watch-change.c4{left:48%;bottom:166px;font-size:20px}@keyframes watchPulse{0%,100%{filter:brightness(.72)}50%{filter:brightness(.98)}}.watch-timer{position:absolute;left:0;right:0;bottom:0;height:7px;background:#0b0c0b;z-index:10}.watch-timer i{display:block;height:100%;width:100%;background:#b79c60;transform-origin:left}
.watch-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;padding:16px}.watch-panel{border:1px solid #494738;background:#22231f;padding:14px}.watch-progress{display:flex;gap:7px;margin-bottom:12px}.watch-progress i{height:9px;flex:1;background:#151612;border:1px solid #454333}.watch-progress i.done{background:#607a55}.watch-progress i.fail{background:#7c342d}.watch-progress i.current{background:#b79c60}.watch-feedback,.watch-story{line-height:1.5;padding:12px;background:#161713;border:1px solid #444233;min-height:100px}.watch-story{min-height:185px;color:#d8cdb3}.watch-feedback strong,.watch-story strong{color:#ecd49d}.watch-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.watch-actions button,.watch-start{padding:11px;background:#393221;border:1px solid #77663f;color:#f0e3bd;font-family:inherit;font-weight:bold;cursor:pointer}.watch-start{width:100%}.watch-actions button:disabled,.watch-start:disabled{opacity:.4}.watch-small{font-size:.78rem;color:#aaa58f}@media(max-width:800px){.watch-layout{grid-template-columns:1fr}.watch-scene{height:280px}.watch-head{flex-direction:column;align-items:flex-start}}

/* v2.89 Stützpunkt */
.base-shell{display:grid;gap:16px}.base-resourcebar,.base-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.base-resourcebar span,.base-stats span{padding:8px 10px;border:1px solid rgba(212,180,107,.28);border-radius:8px;background:rgba(0,0,0,.18)}.base-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:18px}.estate-map{position:relative;min-height:470px;border:1px solid rgba(212,180,107,.35);border-radius:12px;overflow:hidden;background:linear-gradient(#5c553d 0 72%,#3d5961 72%);box-shadow:inset 0 0 45px rgba(0,0,0,.35)}.estate-zone{position:absolute;min-width:105px;padding:10px 8px;border:1px dashed rgba(245,225,174,.5);border-radius:8px;background:rgba(45,38,28,.82);color:#eee1c4;cursor:pointer}.estate-zone.built{border-style:solid;background:rgba(91,70,38,.92)}.base-level{display:block;font-size:10px;opacity:.75;margin-top:3px}.z-watch{left:5%;top:6%}.z-house{left:34%;top:25%;width:30%;height:90px}.z-gate{right:5%;top:8%}.z-stable{left:7%;top:49%}.z-store{left:36%;top:51%}.z-work{right:7%;top:49%}.z-quarters{left:19%;top:27%}.z-training{right:13%;top:28%}.z-dock{right:9%;bottom:8%}.estate-sea{position:absolute;left:0;right:0;bottom:0;height:28%;padding:55px 18px 10px;color:#d9e5e5;font-family:serif;letter-spacing:1px}.estate-wall{position:absolute;left:3%;right:3%;top:3%;height:66%;border:2px dashed rgba(226,203,148,.45);pointer-events:none;border-radius:10px;padding:4px;color:#e5d1a0;font-size:11px}.estate-wall.built{border-style:solid}.base-project-list{display:grid;gap:8px;max-height:500px;overflow:auto;padding-right:3px}.base-project{text-align:left;padding:11px;border:1px solid rgba(212,180,107,.25);border-radius:8px;background:rgba(0,0,0,.16);color:inherit}.base-project strong,.base-project span,.base-project small{display:block}.base-project span{margin:5px 0;font-size:12px;opacity:.85}.base-project small{opacity:.68}.base-project:disabled{opacity:.45}.base-locked{padding:18px;border:1px solid rgba(212,180,107,.25);border-radius:10px}.base-locked h3{margin-top:0}@media(max-width:800px){.base-layout{grid-template-columns:1fr}.estate-map{min-height:420px}.estate-zone{min-width:88px;font-size:11px}}

/* v2.92 – größerer, grafischer Stützpunkt */
.base-modal-mode .modal{width:min(1480px,96vw);max-height:92vh;padding:1.1rem 1.2rem 1.2rem}.base-modal-mode #modal-content{min-width:0}.base-modal-mode .modal-header{margin-bottom:.7rem}.base-shell{display:grid;gap:14px}.base-topline{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;padding:10px 12px;border:1px solid rgba(212,180,107,.2);background:linear-gradient(90deg,rgba(76,60,34,.35),rgba(0,0,0,.08));border-radius:10px}.base-topline>div:first-child{display:grid;gap:3px}.base-topline>div:first-child strong{font-size:1.15rem;color:#ead5a0}.base-topline>div:first-child span{font-size:.82rem;color:#aaa58f}.base-resourcebar{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.base-resourcebar span{min-width:92px;display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:center;padding:7px 9px;border:1px solid rgba(212,180,107,.26);border-radius:8px;background:rgba(10,10,8,.34)}.base-resourcebar small{font-size:.67rem;color:#aaa58f}.base-resourcebar b{grid-column:2;font-size:.95rem}.base-layout{display:grid;grid-template-columns:minmax(650px,1.65fr) minmax(280px,.55fr);gap:16px;align-items:start}.base-map-column{min-width:0}.estate-map{position:relative;min-height:660px;overflow:hidden;border:1px solid rgba(212,180,107,.38);border-radius:14px;background:linear-gradient(#8b7a4d 0 68%,#456b75 68% 100%);box-shadow:inset 0 0 70px rgba(0,0,0,.28)}.estate-ground-texture{position:absolute;inset:0 0 32% 0;opacity:.45;background-image:radial-gradient(circle at 12% 20%,rgba(255,255,255,.08) 0 1px,transparent 2px),radial-gradient(circle at 70% 55%,rgba(0,0,0,.08) 0 1px,transparent 2px);background-size:28px 28px,34px 34px}.estate-road{position:absolute;background:#b9a67a;box-shadow:inset 0 0 0 2px rgba(77,59,35,.16)}.road-main{left:0;top:24%;width:34%;height:10%;transform:rotate(-2deg);transform-origin:left center}.road-courtyard{left:28%;top:31%;width:44%;height:9%;transform:rotate(12deg)}.estate-courtyard{position:absolute;left:34%;top:24%;width:32%;height:30%;border-radius:45% 45% 38% 38%;background:rgba(197,180,137,.42);border:1px solid rgba(99,75,42,.2)}.estate-palms{position:absolute;color:#41552d;font-size:38px;opacity:.75;text-shadow:0 3px 2px rgba(0,0,0,.2)}.palm-a{left:18%;top:17%}.palm-b{right:20%;top:18%}.palm-c{left:71%;top:48%}.estate-zone{position:absolute;z-index:4;display:grid;gap:2px;justify-items:center;align-content:center;min-width:112px;min-height:70px;padding:8px 10px;border:1px dashed rgba(242,222,169,.55);border-radius:8px;background:linear-gradient(180deg,rgba(62,51,34,.78),rgba(38,31,23,.86));color:#eee3c8;box-shadow:0 7px 16px rgba(0,0,0,.18);cursor:pointer;transition:transform .15s ease,border-color .15s ease,filter .15s ease}.estate-zone:hover{transform:translateY(-2px);border-color:#d4b46b;filter:brightness(1.08)}.estate-zone.built{border-style:solid;background:linear-gradient(180deg,#77623d,#493b28)}.estate-zone.level-2{box-shadow:0 9px 22px rgba(0,0,0,.3),inset 0 0 0 1px rgba(235,205,133,.2)}.estate-zone .zone-icon{font-size:1.45rem;line-height:1}.estate-zone strong{font-size:.84rem}.estate-zone small{font-size:.62rem;color:#cabd9f}.base-level{display:block;font-size:.58rem;letter-spacing:.04em;text-transform:uppercase;color:#ddc788}.base-level-open{color:#a99e84}.z-watch{left:5%;top:7%}.z-house{left:37%;top:18%;width:27%;height:128px}.z-gate{right:5%;top:10%}.z-stable{left:8%;top:44%;width:16%;height:96px}.z-store{left:29%;top:51%;width:15%;height:84px}.z-work{right:8%;top:47%;width:15%;height:88px}.z-quarters{left:18%;top:25%;width:15%;height:90px}.z-training{right:18%;top:28%;width:15%;height:92px}.z-dock{right:12%;bottom:8%;width:16%;height:76px;background:linear-gradient(180deg,rgba(82,64,38,.9),rgba(50,39,28,.95))}.estate-wall{position:absolute;z-index:2;left:3.2%;right:3.2%;top:3%;height:61%;border:3px dashed rgba(228,206,151,.45);border-radius:18px;pointer-events:none}.estate-wall span{position:absolute;left:50%;top:-13px;transform:translateX(-50%);padding:3px 8px;background:#67583a;color:#e7d5ac;font-size:.66rem;border-radius:5px}.estate-wall.built{border-style:solid;border-color:#8b7047}.estate-wall.level-2{border-width:5px;border-color:#6b5335}.estate-coastline{position:absolute;z-index:1;left:-4%;right:-4%;top:64%;height:9%;background:#b49a62;transform:rotate(-1deg);box-shadow:0 -5px 16px rgba(0,0,0,.12)}.estate-sea{position:absolute;z-index:0;left:0;right:0;bottom:0;height:34%;overflow:hidden;background:linear-gradient(#537987,#294c5a)}.wave{position:absolute;left:-10%;width:120%;height:1px;background:rgba(228,240,236,.28)}.w1{top:24%}.w2{top:48%}.w3{top:72%}.sea-label{position:absolute;left:4%;bottom:12%;font-size:.68rem;letter-spacing:.24em;color:rgba(232,241,237,.55)}.liburna{position:absolute;right:33%;top:45%;display:grid;justify-items:center;color:#d8c79e;text-shadow:0 2px 4px #000}.liburna span{font-size:1.4rem}.liburna small{font-size:.58rem}.base-person{position:absolute;z-index:8;width:38px;height:38px;padding:0;border:2px solid #d2b36b;border-radius:50%;background:#25241d;color:#f2e6c9;box-shadow:0 3px 8px rgba(0,0,0,.4);cursor:pointer}.base-person span{font-weight:bold}.base-person small{position:absolute;left:50%;top:40px;transform:translateX(-50%);white-space:nowrap;padding:2px 5px;background:rgba(20,20,17,.88);border-radius:4px;font-size:.58rem;color:#e8dcc1}.person-crispus{left:53%;top:30%}.person-marcus{left:47%;top:41%}.person-decimus{right:19%;top:54%}.person-gaius{left:13%;top:55%}.person-nikandros{left:19%;top:49%}.person-iarbas{left:7%;top:56%}.person-corvinus{right:19%;bottom:18%}.person-diodoros{right:26%;bottom:11%}.person-publius{right:31%;bottom:17%}.base-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:9px}.base-stats span{display:grid;gap:3px;padding:8px 9px;background:rgba(0,0,0,.18);border:1px solid rgba(212,180,107,.2);border-radius:7px}.base-stats small{font-size:.65rem;color:#aaa58f}.base-stats b{font-size:.9rem}.base-project-panel{min-width:0;border:1px solid rgba(212,180,107,.26);border-radius:10px;background:rgba(12,12,10,.24);padding:12px}.base-panel-heading>span{font-size:.64rem;letter-spacing:.16em;color:#c8aa68}.base-panel-heading h3{margin:3px 0 5px}.base-panel-heading p{margin:0 0 11px;font-size:.76rem!important;line-height:1.45!important}.base-project-list{display:grid;gap:8px;max-height:665px;overflow:auto;padding-right:4px}.base-project{display:grid;gap:5px;text-align:left;padding:10px 11px;border:1px solid rgba(212,180,107,.2);border-radius:8px;background:linear-gradient(180deg,rgba(55,46,31,.45),rgba(20,19,16,.45));color:inherit}.base-project:hover:not(:disabled){border-color:#c8aa68;background:rgba(85,66,37,.38)}.base-project:disabled{opacity:.48}.base-project-title{display:flex;justify-content:space-between;gap:8px}.base-project-title span{font-size:.63rem;color:#c9b584}.base-project p{margin:0!important;font-size:.7rem!important;line-height:1.38!important}.base-project-cost{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.65rem;color:#cfc2a4}.base-project-cost b{margin-left:auto;color:#dfc985}.base-lock-icon{font-size:3rem;color:#c8aa68}.base-locked{text-align:center;padding:34px 20px}.base-locked h3{font-size:1.2rem}
@media(max-width:1100px){.base-layout{grid-template-columns:1fr}.base-project-list{max-height:none;grid-template-columns:repeat(2,minmax(0,1fr))}.estate-map{min-height:610px}.base-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.base-modal-mode .modal{width:98vw;padding:.8rem}.base-topline{align-items:stretch;flex-direction:column}.base-resourcebar{justify-content:flex-start}.base-layout{grid-template-columns:1fr}.estate-map{min-height:520px}.estate-zone{min-width:76px;min-height:60px;padding:5px;font-size:.72rem}.z-house{width:30%;height:105px}.base-project-list{grid-template-columns:1fr}.base-stats{grid-template-columns:repeat(2,1fr)}.base-person{width:32px;height:32px}.base-person small{display:none}}

/* v2.93 – sichtbare Baustufen & Gebäudeinspektor */
.structure-visual{position:relative;display:block;width:58px;height:31px;margin:0 auto 2px;transition:.2s ease}.structure-visual i{position:absolute;display:block;transition:.2s ease}.structure-ground{left:3px;right:3px;bottom:1px;height:7px;border-radius:50%;background:rgba(19,16,11,.28)}.structure-frame{left:11px;right:11px;bottom:5px;height:17px;border:1px dashed rgba(232,209,155,.45);background:rgba(75,62,42,.22)}.structure-roof{left:7px;right:7px;bottom:21px;height:6px;transform:skewX(-24deg);background:rgba(91,70,43,.18)}.structure-visual em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:1.18rem;color:#e5d3a8;text-shadow:0 2px 3px rgba(0,0,0,.5)}.structure-visual.stage-empty .structure-frame{height:8px;border-color:rgba(231,210,160,.4);background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(68,53,33,.6) 7px 9px)}.structure-visual.stage-empty .structure-roof{display:none}.structure-visual.stage-empty em{opacity:.48;font-size:.9rem}.structure-visual.stage-basic .structure-frame{border-style:solid;background:repeating-linear-gradient(90deg,#695439 0 6px,#806746 6px 9px)}.structure-visual.stage-basic .structure-roof{background:#5b4630}.structure-visual.stage-complete{width:64px;height:35px}.structure-visual.stage-complete .structure-frame{height:21px;border:1px solid #b99b5e;background:linear-gradient(90deg,#806845,#9a8055 50%,#735d3d)}.structure-visual.stage-complete .structure-roof{bottom:25px;height:8px;background:#443526;box-shadow:0 2px 0 rgba(211,180,108,.25)}.structure-visual.stage-complete em{font-size:1.32rem;color:#f0d99e}.estate-zone.selected,.base-project.selected{outline:2px solid rgba(224,190,111,.78);outline-offset:2px;filter:brightness(1.12)}.base-selection{display:grid;gap:7px;margin:0 0 11px;padding:12px;border:1px solid rgba(212,180,107,.32);border-radius:9px;background:linear-gradient(145deg,rgba(91,69,37,.28),rgba(16,15,12,.38));min-height:132px}.base-selection>small{font-size:.59rem;letter-spacing:.14em;color:#c9aa68}.base-selection>strong{font-family:Georgia,serif;font-size:1rem;color:#ead8ad}.base-selection>p{margin:0!important;font-size:.72rem!important;line-height:1.42!important;color:#bbb29d}.base-selection-effect{display:flex;justify-content:space-between;gap:8px;font-size:.65rem;color:#d3c39e;border-top:1px solid rgba(212,180,107,.14);padding-top:7px}.base-complete-note{padding:8px;border-radius:6px;background:rgba(87,104,62,.24);font-size:.7rem;color:#d8d8b3}.base-build-button{display:grid;gap:2px;width:100%;padding:9px 10px;margin-top:2px;text-align:left;border:1px solid rgba(212,180,107,.48);border-radius:7px;background:linear-gradient(#79603a,#4e3e2a);color:#f2e3c2;cursor:pointer}.base-build-button:hover:not(:disabled){filter:brightness(1.12)}.base-build-button:disabled{opacity:.42;cursor:not-allowed}.base-build-button span{font-weight:700}.base-build-button small{font-size:.61rem;color:#d4c5a4}.estate-zone.stage-empty{opacity:.88}

/* v2.94 – lebendiger Stützpunkt */
.estate-detail{position:absolute;z-index:3;pointer-events:none;color:#493a27;text-shadow:0 1px rgba(255,255,255,.12)}.detail-amphorae{left:31%;top:61%;font-size:1rem;letter-spacing:-3px}.detail-crates{right:27%;top:58%;font-size:.78rem;transform:rotate(-4deg)}.detail-fire{left:57%;top:47%;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#c58b43 0 16%,#6e4d2e 18% 38%,transparent 40%);color:#e2b768;animation:baseFire 2.2s ease-in-out infinite}.detail-corral{left:5%;top:39%;width:22%;height:25%;border:3px double rgba(77,55,32,.62);border-radius:45% 36% 42% 30%;transform:rotate(-3deg)}.detail-corral.expanded{width:25%;height:27%}.detail-corral i{position:absolute;left:12%;right:10%;top:52%;border-top:2px dashed rgba(77,55,32,.5)}.detail-corral span{position:absolute;font-size:1.1rem;color:#49392b}.detail-corral span:nth-of-type(1){left:25%;top:25%;transform:rotate(-18deg)}.detail-corral span:nth-of-type(2){right:18%;bottom:16%;transform:rotate(12deg)}.detail-corral span:nth-of-type(3){right:35%;top:14%}.detail-workbench{right:7%;top:57%;width:60px;height:25px;border-bottom:5px solid #5c452c}.detail-workbench span{font-size:1.05rem}.detail-workbench i{position:absolute;left:9px;right:4px;bottom:4px;border-top:3px solid #80613a}.detail-target{right:19%;top:39%;width:38px;height:55px;border-left:2px solid #61492e}.detail-target span{position:absolute;top:-8px;left:-12px;font-size:1.5rem;color:#5e4930}.detail-target i{position:absolute;left:-10px;bottom:0;width:20px;border-top:2px solid #5c472e}.construction-scaffold{position:absolute;z-index:5;color:#d0b171;font-size:2.4rem;opacity:.7;pointer-events:none}.scaffold-watch{left:8%;top:12%}.scaffold-quarters{left:22%;top:32%}.dock-visual{position:absolute;z-index:3;right:13%;top:65%;width:18%;height:23%;pointer-events:none}.dock-pier{position:absolute;right:25%;top:0;width:42%;height:100%;background:repeating-linear-gradient(90deg,#61482d 0 8px,#8a6841 8px 12px);clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);box-shadow:0 3px 6px rgba(0,0,0,.3)}.dock-visual.level-2 .dock-pier{width:55%;right:18%;background:repeating-linear-gradient(90deg,#533d29 0 7px,#9b7546 7px 11px)}.dock-post{position:absolute;top:10%;width:5px;height:90%;background:#3e3023}.post-a{right:19%}.post-b{right:73%}.dock-crane{position:absolute;right:0;top:4%;font-size:2rem;color:#4b3826}.small-boat{position:absolute;color:#c6ae7a;font-size:.8rem;opacity:.8;text-shadow:0 2px #203d47}.boat-a{left:14%;top:30%;transform:rotate(-4deg)}.boat-b{left:23%;top:66%;transform:rotate(5deg)}.liburna{transition:.25s ease;animation:liburnaBob 4s ease-in-out infinite}.liburna.level-2 span{font-size:1.7rem}.liburna .mast{position:absolute;left:50%;top:-24px;height:31px;border-left:2px solid #bda879}.liburna .sail{position:absolute;left:51%;top:-20px;width:22px;height:19px;background:rgba(214,195,150,.78);clip-path:polygon(0 0,100% 55%,0 100%)}.wall-post{position:absolute;width:8px;height:15px;background:#4d3825;box-shadow:inset 0 0 0 1px #80613d}.wp-a{left:-5px;top:14%}.wp-b{right:-5px;top:14%}.wp-c{left:-5px;bottom:14%}.wp-d{right:-5px;bottom:14%}.base-map-caption{display:flex;justify-content:space-between;gap:12px;padding:6px 3px 0;color:#b9aa8b}.base-map-caption span{font-family:Georgia,serif;font-size:.76rem}.base-map-caption small{font-size:.62rem;color:#8f897b}@keyframes baseFire{0%,100%{filter:brightness(.9);transform:scale(.96)}50%{filter:brightness(1.2);transform:scale(1.05)}}@keyframes liburnaBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(3px) rotate(1deg)}}@media(max-width:720px){.estate-detail,.construction-scaffold{opacity:.55}.base-map-caption{display:none}}