/* ============================================================
   Oil Imperium — Retro-Oberfläche
   Palette aus dem Titelbild (Copper-Sonnenuntergang):
   Nacht #1a0b33 · Lila #4a1a55 · Wein #8f2f52 · Rost #cf5533
   Orange #f68b12 · Gold #ffc41c · Öl #050208 · Sand #e8dfce
   ============================================================ */

:root {
    --nacht: #1a0b33;
    --lila: #4a1a55;
    --wein: #8f2f52;
    --rost: #cf5533;
    --orange: #f68b12;
    --gold: #ffc41c;
    --gold-dunkel: #a8874c;
    --oel: #050208;
    --sand: #e8dfce;
    --creme: #fff8e8;
    --gruen: #4caf50;
    --panel: #241040;
    --panel-hell: #33195a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: #0a0514;
    color: var(--sand);
    font-family: 'Courier New', ui-monospace, monospace;
    min-height: 100%;
}

#buehne {
    max-width: 1024px;
    margin: 0 auto;
    min-height: 100dvh;
    position: relative;
    border-left: 2px solid var(--lila);
    border-right: 2px solid var(--lila);
    background: var(--nacht);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* CRT-Scanlines über allem */
#scanlines {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom, transparent 0 2px, rgba(0, 0, 0, 0.12) 2px 4px);
    z-index: 50;
}

.schirm { display: none; flex: 1; flex-direction: column; }
.schirm.aktiv { display: flex; }

/* ---------- Titel ---------- */
#titel { align-items: center; justify-content: flex-start; }
#titelbild { width: 100%; max-height: 60dvh; display: block; pointer-events: none; }

.titel-menue {
    display: flex; flex-direction: column; gap: 0.8rem;
    align-items: center; padding: 1.2rem;
}

#firmenname {
    background: var(--oel); color: var(--gold);
    border: 2px solid var(--gold-dunkel);
    font: inherit; font-size: 1.1rem; font-weight: bold;
    padding: 0.5rem 1rem; text-align: center; width: 16rem;
}

button {
    font-family: inherit; font-weight: bold; cursor: pointer;
    background: var(--panel-hell); color: var(--sand);
    border: 2px solid var(--gold-dunkel);
    padding: 0.4rem 0.9rem;
}
button:hover { background: var(--wein); }
button:disabled { opacity: 0.4; cursor: default; }

button.gross {
    font-size: 1.05rem; padding: 0.7rem 1.6rem;
    background: linear-gradient(180deg, var(--gold), var(--orange));
    color: var(--oel); border: 2px solid var(--creme);
    box-shadow: 0 3px 0 var(--gold-dunkel);
    text-transform: uppercase; letter-spacing: 0.08em;
}
button.gross:hover { filter: brightness(1.1); }
button.gross:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-dunkel); }

/* ---------- HUD ---------- */
#topbar {
    display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem;
    background: var(--oel); color: var(--gold);
    border-bottom: 2px solid var(--gold-dunkel);
    padding: 0.45rem 0.8rem; font-size: 0.85rem; font-weight: bold;
}
#hud-firma { color: var(--creme); }
#hud-wert { margin-left: auto; }

#tabs { display: flex; background: var(--panel); border-bottom: 2px solid var(--gold-dunkel); }
.tab {
    flex: 1; border: none; border-right: 1px solid var(--lila);
    background: transparent; padding: 0.55rem 0.4rem;
    text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem;
}
.tab.aktiv { background: linear-gradient(180deg, var(--gold), var(--orange)); color: var(--oel); }

#inhalt { flex: 1; overflow-y: auto; padding: 0.8rem; }
.tabseite { display: none; }
.tabseite.aktiv { display: block; }

h2 {
    color: var(--gold); font-size: 1.1rem; text-transform: uppercase;
    letter-spacing: 0.08em; margin-bottom: 0.7rem;
    padding-bottom: 0.3rem; position: relative;
}
h2::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 3.5rem; height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
}

/* ---------- Karte ---------- */
#tab-karte.aktiv { display: grid; grid-template-columns: 1fr 260px; gap: 0.8rem; }
#regionen { grid-column: 1 / -1; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.region-knopf { font-size: 0.8rem; }
.region-knopf.aktiv { background: var(--wein); border-color: var(--gold); color: var(--creme); }

#parzellen {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
    align-content: start;
}

.parzelle {
    background: var(--panel); border: 2px solid var(--lila);
    padding: 0.4rem; cursor: pointer; text-align: center;
    min-height: 5.4rem; position: relative;
}
.parzelle:hover { border-color: var(--gold-dunkel); }
.parzelle.gewaehlt { border-color: var(--gold); background: var(--panel-hell); }
.parzelle svg { width: 44px; height: 44px; display: block; margin: 0 auto; }
.parzelle .p-name { font-size: 0.7rem; color: var(--sand); }
.parzelle .p-status { font-size: 0.62rem; color: var(--gold-dunkel); display: block; }
.parzelle.fremd { opacity: 0.75; }
.parzelle.fremd .p-status { color: var(--rost); }

#detail {
    background: var(--panel); border: 2px solid var(--gold-dunkel);
    padding: 0.7rem; font-size: 0.85rem; align-self: start;
}
#detail h3 { color: var(--gold); font-size: 0.95rem; margin-bottom: 0.5rem; }
#detail p { margin-bottom: 0.45rem; line-height: 1.45; }
#detail button { display: block; width: 100%; margin-top: 0.5rem; font-size: 0.85rem; }
.gedimmt { color: #8f7fa8; }
.klein { font-size: 0.72rem; }
.geld { color: var(--gold); }
.gut { color: var(--gruen); }
.schlecht { color: var(--rost); }

/* ---------- Markt / Firma / Rangliste ---------- */
#preischart {
    width: 100%; max-width: 560px; image-rendering: pixelated;
    background: var(--oel); border: 2px solid var(--gold-dunkel);
}
#markt-info, #firma-info, #rang-info { margin-top: 0.8rem; font-size: 0.88rem; line-height: 1.6; }

table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td { border: 1px solid var(--lila); padding: 0.35rem 0.5rem; text-align: left; }
th { background: var(--panel); color: var(--gold); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Fußleiste ---------- */
#fussleiste {
    display: flex; gap: 0.6rem; align-items: center;
    background: var(--oel); border-top: 2px solid var(--gold-dunkel);
    padding: 0.5rem 0.7rem;
}
#ticker { flex: 1; overflow: hidden; white-space: nowrap; font-size: 0.8rem; color: var(--orange); }
#ticker-text { display: inline-block; padding-left: 100%; animation: laufband 18s linear infinite; }
@keyframes laufband { to { transform: translateX(-100%); } }
#btn-monat { white-space: nowrap; font-size: 0.9rem; padding: 0.55rem 1.1rem; }

/* ---------- Dialoge ---------- */
dialog {
    background: var(--panel); color: var(--sand);
    border: 3px solid var(--gold); max-width: 34rem; width: 92%;
    padding: 1.1rem; font-family: inherit;
    margin: auto;
}
dialog::backdrop { background: rgba(5, 2, 8, 0.8); }
dialog h2 { margin-bottom: 0.8rem; }
dialog .gross { margin-top: 1rem; width: 100%; }
#bericht-inhalt, #ende-inhalt { font-size: 0.88rem; line-height: 1.55; }
#bericht-inhalt table { margin: 0.5rem 0; }

/* ---------- Büro-Szene ---------- */
#buero-szene svg { width: 100%; max-height: 62dvh; display: block; border: 2px solid var(--gold-dunkel); background: var(--oel); }
#buero-status { margin-top: 0.5rem; text-align: center; }
.hotspot { cursor: pointer; }
.hotspot:hover { filter: brightness(1.35) drop-shadow(0 0 3px var(--gold)); }

/* ---------- Regions-Landschaft über der Karte ---------- */
#region-szene { grid-column: 1 / -1; }
#region-szene svg { width: 100%; display: block; border: 2px solid var(--gold-dunkel); }

/* ---------- Bohranimation ---------- */
#bohr-container svg { width: 100%; max-width: 320px; display: block; margin: 0 auto; border: 2px solid var(--gold-dunkel); }
#bohrdialog.erfolg #bohr-fontaene { opacity: 1; animation: fontaene 0.5s ease-out; }
#bohrdialog.erfolg #bohr-oel { opacity: 1; transition: opacity 0.4s; }
#bohrdialog.erfolg #bohr-turm { animation: rappeln 0.15s linear 4; }
#bohrdialog.fehlschlag #bohr-staub { opacity: 1; animation: staub 1.6s ease-out forwards; }
#bohrdialog.bohrt #bohr-turm { animation: rappeln 0.22s linear infinite; }
@keyframes rappeln {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
}
@keyframes fontaene {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes staub {
    0% { opacity: 0; transform: translateY(6px) scale(0.6); }
    30% { opacity: 0.9; }
    100% { opacity: 0.25; transform: translateY(-8px) scale(1.15); }
}
#bohr-fontaene, #bohr-staub { transform-origin: 110px 52px; }

/* ---------- Handy ---------- */
@media (max-width: 700px) {
    #tab-karte.aktiv { grid-template-columns: 1fr; }
    #parzellen { grid-template-columns: repeat(4, 1fr); }
    .parzelle svg { width: 34px; height: 34px; }
    #topbar { font-size: 0.72rem; gap: 0.2rem 0.8rem; }
    #btn-monat { font-size: 0.78rem; }
}