/* ============================================================
   Seedcode - css/game.css
   Pflanzenraum, Töpfe, Balken, Genanzeige, DNA-Labor.
   ============================================================ */

/* ---------- Raum ---------- */

.room {
    grid-area: room;
    position: relative;
    min-width: 0;   /* verhindert, dass die Topfreihe das Panel zusammendrückt */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(255, 212, 94, .16), transparent 62%),
        linear-gradient(180deg, #16212a 0%, #101820 62%, #0d1319 100%);
    transition: background .6s ease;
}

.room.night {
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(79, 163, 255, .07), transparent 60%),
        linear-gradient(180deg, #0d151c 0%, #0a1016 70%, #080d11 100%);
}

.room::after {
    /* Lichtkegel der Lampe */
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 46%;
    background: linear-gradient(180deg, rgba(255, 220, 130, .12), transparent);
    pointer-events: none;
    transition: opacity .6s ease;
}
.room.night::after { opacity: 0; }

.room-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: flex-end;
    scrollbar-width: thin;
    min-width: 0;
}

.pot-row {
    --zoom: 1;
    display: flex;
    align-items: flex-end;
    gap: calc(14px * var(--zoom));
    padding: 12px 16px 16px;
    margin: auto auto 0;
    min-width: min-content;
}

.pot-cell {
    position: relative;
    width: calc(196px * var(--zoom));
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 6px 4px 4px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.pot-cell.selected {
    border-color: var(--accent);
    background: rgba(99, 210, 154, .07);
}

.pot-svg {
    display: block;
    width: 100%;
    height: calc(min(46vh, 312px) * var(--zoom));
    min-height: 200px;
    overflow: visible;
}

.pot-label {
    text-align: center;
    font-size: .76rem;
    line-height: 1.25;
    color: var(--text-dim);
    margin-top: 2px;
}
.pot-label b { display: block; color: var(--text); font-size: .82rem; }

.pot-badges {
    position: absolute;
    top: 4px; right: 6px;
    display: flex; flex-direction: column; gap: 3px;
    align-items: flex-end;
    z-index: 2;
}
.badge {
    font-size: .72rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--bg-3);
    border: 1px solid var(--line);
}
.badge.good { border-color: var(--good); color: var(--good); }
.badge.warn { border-color: var(--warn); color: var(--warn); }
.badge.bad  { border-color: var(--bad);  color: var(--bad); }

.pot-add {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: calc(min(46vh, 312px) * var(--zoom));
    min-height: 200px;
    border: 1px dashed var(--line);
    color: var(--text-dim);
}
.pot-add .plus { font-size: 2.2rem; line-height: 1; margin-bottom: 6px; }

/* ---------- Steuerleiste im Raum ---------- */

.room-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(13, 19, 25, .88);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(6px);
    z-index: 5;
}

.lamp-block {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}
.lamp-title { font-size: .8rem; color: var(--text-dim); white-space: nowrap; }
.lamp-title b { color: var(--text); }

.slider {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--text-dim);
    min-width: 190px;
    flex: 1 1 190px;
}
.slider span { white-space: nowrap; }
.slider b { color: var(--text); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

.zoom-block { display: flex; gap: 6px; }

/* ---------- Balken ---------- */

.bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--bg);
    border: 1px solid var(--line);
    overflow: hidden;
    min-width: 60px;
}
.bar i {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width .25s linear;
}
.bar-water i    { background: var(--water); }
.bar-light i    { background: var(--light); }
.bar-nutrient i { background: var(--nutrient); }
.bar-grow i     { background: var(--accent); }
.bar-health i   { background: linear-gradient(90deg, var(--bad), var(--warn) 45%, var(--good)); }
.bar-n i { background: #4fa3ff; }
.bar-p i { background: #ff8f4f; }
.bar-k i { background: #c98cff; }
.bar-structural i { background: #7fc7ff; }
.bar-flower i     { background: #ff8fc0; }
.bar-metabolic i  { background: #ffd45e; }
.bar-hidden { opacity: .35; }

.metric {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: .84rem;
}
.metric span { flex: 0 0 108px; color: var(--text-dim); }
.metric b { flex: 0 0 54px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Gene ---------- */

.gene-group { margin-bottom: 10px; }
.gene-group h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }

.gene-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: .82rem;
}
.gene-label { flex: 0 0 118px; color: var(--text-dim); }
.gene-value { flex: 0 0 66px; text-align: right; font-variant-numeric: tabular-nums; display: flex; gap: 5px; justify-content: flex-end; align-items: center; }

.swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid rgba(255,255,255,.25); }

/* ---------- Samen ---------- */

.seed-card {
    display: flex;
    gap: 10px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
    margin-bottom: 10px;
}
.seed-preview { flex: 0 0 74px; }
.seed-info { flex: 1; min-width: 0; }
.seed-info > b { display: block; }

.preview-svg {
    width: 100%;
    height: 108px;
    display: block;
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
    border-radius: var(--radius-sm);
    overflow: visible;
}

/* ---------- Labor / Shop ---------- */

.dna-row, .upgrade, .shop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: .86rem;
}
.dna-row:last-child, .upgrade:last-child, .shop-row:last-child { border-bottom: none; }
.dna-row > div:first-child, .upgrade > div:first-child, .shop-row > div:nth-child(2) { flex: 1; min-width: 0; }
.shop-row > div:first-child:not(.shop-mini) { flex: 1; min-width: 0; }
.upgrade.owned { opacity: .72; }
.shop-mini { flex: 0 0 56px; }
.shop-mini .preview-svg { height: 74px; }

/* ---------- DNA-Editor ---------- */

.dna-editor { display: flex; flex-direction: column; gap: 12px; }

.dna-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px;
}
.dna-preview .preview-svg { width: 140px; height: 170px; flex: 0 0 140px; }
.dna-cost { font-size: .9rem; color: var(--text-dim); }
.dna-cost b { font-size: 1.5rem; color: var(--accent); display: block; font-variant-numeric: tabular-nums; }
.dna-cost b.over { color: var(--bad); }

.dna-gene {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    font-size: .82rem;
}
.dna-gene label { flex: 0 0 116px; color: var(--text-dim); }
.dna-gene input[type="range"] { flex: 1; min-width: 90px; }
.dna-value { flex: 0 0 58px; text-align: right; font-variant-numeric: tabular-nums; }

.genome-preview { display: flex; justify-content: center; }
.genome-preview .preview-svg { width: 170px; height: 210px; }

/* ---------- Mobil ---------- */

@media (max-width: 900px) {
    .room-scroll { align-items: center; }
    .room-bar { padding-bottom: 10px; }
    .room { padding-bottom: 96px; }
    .pot-cell { width: calc(158px * var(--zoom)); }
    .pot-svg { height: calc(min(34vh, 262px) * var(--zoom)); min-height: 176px; }
    .pot-add { height: calc(min(34vh, 262px) * var(--zoom)); min-height: 176px; }
    .metric span { flex: 0 0 92px; }
    .gene-label { flex: 0 0 104px; }
    .dna-preview { flex-direction: column; align-items: stretch; }
    .dna-preview .preview-svg { width: 100%; flex: none; height: 150px; }
}