/* genes.css — Gen-Rechner (/genes, /en/genes, Companion App → Tools) */
.gn-wrap { max-width: 1040px; margin: 0 auto; padding: 36px 24px 90px; }
.gn-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent-bright); }
.gn-hero h1 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(30px, 4.5vw, 52px); margin: 8px 0 8px; line-height: 1; }
.gn-hero p { color: var(--text-soft); margin: 0 0 22px; max-width: 720px; }

.gn-card { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); padding: 20px; margin-bottom: 20px; }
.gn-card h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 21px; margin: 0 0 4px; }
.gn-card h3 { font-size: 15px; margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gn-sub { color: var(--text-soft); font-size: 14px; margin: 0 0 14px; }
.gn-hint { color: var(--text-faint); font-size: 12.5px; margin: 10px 0 0; }
.gn-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.gn-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft); }
.gn-empty, .gn-busy { color: var(--text-faint); margin: 8px 0; }

/* Gene als farbige Buchstaben */
.gn-genes { display: inline-flex; gap: 3px; vertical-align: middle; }
.gn-genes b { width: 22px; height: 24px; display: grid; place-items: center; border-radius: 5px; font: 700 13px var(--font-mono); color: #fff; }
.gn-genes.big b { width: 28px; height: 30px; font-size: 15px; }
/* gute Gene (G Y H) ein Grün, schlechte (W X) ein Rot – wie im Spiel */
.gn-G, .gn-Y, .gn-H { background: #4e8f2c; }
.gn-W, .gn-X { background: #a8392c; }
.gn-any { background: rgba(255,255,255,.08); color: var(--text-faint) !important; }

/* Scanner */
.gn-preview { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #0b0907; cursor: crosshair; display: block; touch-action: none; }
.gn-live { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.gn-label { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); }
.gn-cells { display: inline-flex; gap: 5px; border-radius: 8px; }
.gn-cells.flash { animation: gn-flash .6s ease-out; }
@keyframes gn-flash { from { box-shadow: 0 0 0 4px rgba(123,209,127,.7); } to { box-shadow: 0 0 0 0 rgba(123,209,127,0); } }
.gn-cell { width: 40px; height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: #fff; font: 700 20px var(--font-mono); cursor: pointer; }
.gn-cell:disabled { cursor: default; color: var(--text-faint); }
.gn-cell.unsure { outline: 2px dashed #ffbe55; outline-offset: 1px; }
.gn-live kbd { font: 10px var(--font-mono); padding: 1px 5px; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; margin-left: 4px; }
.gn-manual { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; font-size: 13px; color: var(--text-soft); }
.gn-manual input { width: 130px; font: 600 15px var(--font-mono); text-transform: uppercase; letter-spacing: .2em; }

.gn-listhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.gn-listhead h3 { margin: 0; }
.gn-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gn-plant { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.gn-plant small { color: var(--text-faint); font: 12px var(--font-mono); }
.gn-plant button { background: none; border: 0; color: var(--text-faint); font-size: 18px; cursor: pointer; padding: 0 4px; }
.gn-plant button:hover { color: #ff8080; }

/* Ziel */
.gn-target { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gn-sel { width: 64px; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--line); color: #fff; font: 700 15px var(--font-mono); text-align: center; }
.gn-sel option { background: var(--bg-elev); color: var(--text); }
.gn-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 10px; }

/* Ergebnis */
.gn-verdict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 10px; font-weight: 700; margin: 12px 0; }
.gn-verdict.ok { background: rgba(76,175,80,.12); border: 1px solid rgba(76,175,80,.4); }
.gn-verdict.no { background: rgba(214,48,48,.1); border: 1px solid rgba(214,48,48,.35); }
.gn-verdict small { font-weight: 400; color: var(--text-soft); }
.gn-step { border-left: 2px solid var(--accent); padding: 4px 0 4px 14px; margin: 16px 0; }
.gn-stephead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.gn-round { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .14em; padding: 3px 9px; border-radius: 999px; background: var(--accent-tint, rgba(238,126,44,.15)); color: var(--accent-bright); }
.gn-best { display: flex; flex-wrap: wrap; gap: 8px; }
.gn-bestitem { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; color: var(--text); }
.gn-bestitem:hover { border-color: var(--accent); }
.gn-bestitem small { color: var(--text-faint); font-size: 11.5px; }

@media (max-width: 640px) {
  .gn-wrap { padding: 24px 16px 70px; }
  .gn-genes b { width: 18px; height: 20px; font-size: 11px; }
  .gn-presets { margin-left: 0; }
}
/* in der Companion App ohne Website-Rahmen */
html.in-app .navbar, html.in-app footer, html.in-app .gn-hero { display: none !important; }
html.in-app .gn-wrap { padding-top: 16px; }
/* versteckte Knöpfe/Bereiche wirklich verstecken (.btn setzt sonst display) */
.gn-card [hidden] { display: none !important; }
.gn-manual input, .gn-card select#gn-rounds {
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
}
.gn-manual input::placeholder { color: var(--text-faint); letter-spacing: .05em; text-transform: none; font-weight: 400; }
.gn-manual input:focus { outline: none; border-color: var(--accent); }
.gn-searching { color: var(--accent-bright, #ff9a3c) !important; }
/* Gene schon in der Liste */
.gn-known { font-size: 12.5px; color: #7bd17f; }
.gn-plant.dup { animation: gn-dup .8s ease-out; }
@keyframes gn-dup { 0%, 40% { border-color: #7bd17f; box-shadow: 0 0 0 3px rgba(123,209,127,.35); } 100% { box-shadow: 0 0 0 0 rgba(123,209,127,0); } }
/* erkannte Buchstaben in Gen-Farbe (die Grundregel .gn-cell kommt später und überschrieb sie) */
.gn-cell.gn-G, .gn-cell.gn-Y, .gn-cell.gn-H { background: #4e8f2c; border-color: #6fb24a; }
.gn-cell.gn-W, .gn-cell.gn-X { background: #a8392c; border-color: #c95646; }
.gn-card .btn:disabled { opacity: .45; cursor: default; transform: none !important; filter: grayscale(.4); }

/* Umschalter (Ziel-Modus, Ansicht) */
.gn-seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); margin: 4px 0 12px; }
.gn-seg button { background: none; border: 0; color: var(--text-soft); font: 600 13px var(--font-body, inherit); padding: 7px 12px; border-radius: 7px; cursor: pointer; }
.gn-seg button:hover { color: var(--text); }
.gn-seg button.active { background: var(--accent); color: #fff; }
.gn-seg .gn-label { padding: 0 6px 0 8px; }

/* Ziel nach Anzahl */
.gn-count { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.gn-chip { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; font: 700 15px var(--font-mono); color: #fff; }
.gn-stepbtn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font: 700 16px var(--font-mono); cursor: pointer; }
.gn-stepbtn:hover:not(:disabled) { border-color: var(--accent); }
.gn-stepbtn:disabled { opacity: .35; cursor: default; }
.gn-count output { min-width: 18px; text-align: center; font: 700 17px var(--font-mono); }
.gn-rest { display: inline-flex; align-items: center; gap: 6px; color: var(--text-faint); font-size: 13px; }

/* Varianten-Karten (quadratisch) */
.gn-chance { display: inline-block; font: 600 11.5px var(--font-mono); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.gn-chance.sure { background: rgba(78,143,44,.18); color: #8fd16a; border: 1px solid rgba(78,143,44,.5); }
.gn-chance.risky { background: rgba(255,190,85,.12); color: #ffbe55; border: 1px solid rgba(255,190,85,.4); }
.gn-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin: 6px 0 18px; }
.gn-var { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); cursor: pointer; transition: border-color .15s, transform .15s; }
.gn-var:hover { border-color: var(--accent); transform: translateY(-2px); }
.gn-var.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.gn-varmeta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gn-varmeta small { color: var(--text-faint); font-size: 11.5px; }
.gn-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3px; width: 64%; aspect-ratio: 1; padding: 4px; border-radius: 6px; background: #5b4128; }
.gn-mini i { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 2px; padding: 3px; min-width: 0; min-height: 0; overflow: hidden; border-radius: 3px; background: rgba(0,0,0,.25); font-style: normal; }
.gn-mini i.c { background: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 3px, transparent 3px 6px); outline: 1px dashed rgba(255,255,255,.55); outline-offset: -2px; }
.gn-mini em { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; }

/* Schritte: quadratischer Planter (Holz, blau oder Raster) + Anleitung */
.gn-detail:empty { display: none; }
.gn-stepbody { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.gn-planter { position: relative; aspect-ratio: 1; width: 100%; border-radius: 10px; overflow: hidden; background: var(--bg) center / cover no-repeat; }
.gn-planter.v-wood { background-image: url('genes-img/planter-wood.webp'); }
.gn-planter.v-blue { background-image: url('genes-img/planter-blue.webp'); }
.gn-planter.v-grid { border: 1px solid var(--line); }
.gn-pgrid { position: absolute; inset: 7.5%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4%; }
.v-grid .gn-pgrid { inset: 3%; gap: 3%; }
.gn-pcell { display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 10px; background: rgba(12,9,6,.62); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(2px); text-align: center; padding: 4px; min-width: 0; }
.v-grid .gn-pcell { background: var(--bg-elev); border-color: var(--line); backdrop-filter: none; }
.gn-pcell.empty { background: rgba(12,9,6,.22); border-style: dashed; color: rgba(255,255,255,.55); font-size: 11px; }
.v-grid .gn-pcell.empty { background: transparent; color: var(--text-faint); }
.gn-pcell.child { border: 2px dashed var(--accent-bright, #ff9a3c); background: rgba(238,126,44,.22); }
.gn-pcell.child b { font: 700 13px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: #fff; }
.gn-pcell.child small { font-size: 10px; line-height: 1.25; color: rgba(255,255,255,.8); }
.v-grid .gn-pcell.child small { color: var(--text-soft); }
.v-grid .gn-pcell.child b { color: var(--accent-bright); }
.gn-genes.sq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 86%; }
.gn-genes.sq b { width: auto; height: auto; aspect-ratio: 1; font-size: clamp(10px, 2.6vw, 15px); }
.gn-how ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--text-soft); font-size: 14px; }
.gn-tally { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.gn-tally li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text); }
.gn-tally small { color: var(--text-faint); font-size: 12px; }
@media (max-width: 760px) {
  .gn-stepbody { grid-template-columns: 1fr; }
  .gn-vars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gn-var { aspect-ratio: auto; }
  .gn-pcell.child small { display: none; }
}

/* Runden-Gruppen: mehrere Planter je Runde (A, B, C) */
.gn-roundgroup { border-left: 2px solid var(--accent); padding: 2px 0 2px 14px; margin: 18px 0; }
.gn-roundgroup .gn-step { border-left: 0; padding-left: 0; margin: 12px 0 18px; }
.gn-roundhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gn-roundhead small { color: var(--text-soft); font-size: 13px; }
.gn-planterlabel { font: 700 12px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); color: var(--text); }