/* Klucz do oznaczania drzew iglastych — dodatki do wspólnego systemu wyglądu (../wspolne/system.css).
   Kolory, kroje pisma, nagłówek, panele, werdykt i zasada wciśnięcia przycisków są we wspólnym pliku; tu tylko to, co inne w tej grze. */

/* --- nagłówek --------------------------------------------------------------- */
/* zielnik: pieczątki nie są przyciskami (bez kursora i podświetlenia), oznaczony okaz w kolorze gatunku */
.stamps li { cursor: auto; }
.stamps li:not(.now):not(.done):hover { border-style: dashed; }
.stamps li.done { background: var(--hue); }

/* --- układ ------------------------------------------------------------------- */
.desk { grid-template-columns: minmax(400px, 1fr) minmax(0, 1.4fr); } /* okaz po lewej, klucz po prawej */
.key { background: rgba(255, 252, 244, .78); border: 1.5px solid var(--ink); border-radius: var(--r-panel); box-shadow: var(--lift); } /* jak panele we wspólnym systemie */
.key { position: relative; min-height: 0; padding: 22px 12px 10px; }
.board-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; }
.board { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* --- klucz: gałązki, punkty, etykiety gatunków ---------------------------------- */
.edges { position: absolute; inset: 0; overflow: visible; }
.edge { fill: none; stroke: #cdb98a; stroke-width: 5; stroke-linecap: round; transition: stroke .25s, stroke-width .25s; }
/* przebyta droga jest neutralna (tusz); zielona dopiero po dobrej odpowiedzi, czerwona przerywana po złej */
.edge.on { stroke: var(--ink); stroke-width: 7; }
.res-ok .edge.on { stroke: var(--moss); stroke-width: 8; }
.res-bad .edge.on { stroke: var(--berry); stroke-dasharray: 3 13; }

.node {
  position: absolute; display: grid; grid-template-columns: 1fr 1fr; background: var(--card);
  border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--lift); transition: opacity .25s, box-shadow .25s, border-color .25s;
}
.node-no {
  position: absolute; left: 50%; top: -16px; width: 32px; height: 32px; margin-left: -16px; z-index: 2;
  display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 16px var(--type);
}
.opt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px;
  padding: 13px 6px 6px; background: none; border: 0; border-radius: 14px 0 0 14px; min-width: 0;
}
.opt + .opt { border-left: 1.5px dashed var(--line); border-radius: 0 14px 14px 0; }
.opt .pic { width: 86px; height: 52px; flex: none; }
.opt-tag { position: absolute; left: 9px; top: 5px; font: 700 15px var(--type); color: var(--resin); }
.opt + .opt .opt-tag { left: auto; right: 9px; }
.opt-txt { font: 600 15px/1.16 var(--body); text-align: center; text-wrap: balance; }
.opt:disabled { cursor: default; }

.node.is-off { opacity: .5; box-shadow: none; }
.node.is-active { border-color: var(--resin); animation: pulse 1.6s ease-in-out infinite; }
.node.is-active .node-no { background: var(--resin); }
.node.is-active .opt:hover, .node.is-done .opt:not(.chosen):hover { background: var(--resin-tint); }
.node.is-done .opt.chosen { background: var(--paper-2); }
.res-ok .node.is-done { border-color: var(--moss); }
.res-ok .node.is-done .node-no { background: var(--moss); }
.res-ok .node.is-done .opt.chosen { background: var(--moss-tint); }
.node.is-done .opt:not(.chosen) > * { opacity: .4; }
.node.is-hint { border-color: var(--berry); animation: wiggle .5s 2; }
.node.is-hint .node-no { background: var(--berry); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 119, 43, .45), var(--lift); } 50% { box-shadow: 0 0 0 9px rgba(201, 119, 43, 0), var(--lift); } }
@keyframes wiggle { 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }

.leaf {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--card); border: 1.5px solid var(--ink); border-top: 7px solid var(--hue); border-radius: 6px 6px 14px 14px;
  box-shadow: var(--lift); transition: transform .3s, background .3s, color .3s;
}
.leaf b { font: 700 17px/1.1 var(--type); }
.leaf i { font: italic 14.5px/1.15 var(--body); color: var(--ink-soft); }
.leaf.is-ok { background: var(--hue); color: #fff; transform: scale(1.14) rotate(-2deg); z-index: 3; }
.leaf.is-ok i { color: rgba(255, 255, 255, .85); }
.leaf.is-bad { border-color: var(--berry); background: var(--bad-tint); animation: wiggle .4s 2; }
.leaf.is-bad b { text-decoration: line-through; text-decoration-color: var(--berry); }
.leaf.is-ok::after, .leaf.is-bad::after {
  position: absolute; right: -12px; top: -18px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 2px solid var(--card); border-radius: 50%; color: #fff; font: 700 17px/1 var(--body);
}
.leaf.is-ok::after { content: "✓"; background: var(--moss); }
.leaf.is-bad::after { content: "✕"; background: var(--berry); }

/* --- okaz ------------------------------------------------------------------- */
.specimen { display: grid; grid-template-rows: minmax(230px, 1fr) auto auto; gap: 12px; min-height: 0; }
/* plansza to płótno 3D: nic nie przewija się w środku, etykieta okazu leży na płótnie */
.stage { overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #fffdf6, #f2ead6); }
#view { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#view.grabbing { cursor: grabbing; }
.stage-label { position: absolute; left: 12px; top: 12px; z-index: 2; }
.stage-ctrl { position: absolute; right: 10px; top: 10px; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.stage-ctrl button {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--card); font: 700 15px/1 var(--body); padding: 0;
}
.stage-ctrl button:hover { background: var(--resin-tint); }
.stage-hint { position: absolute; right: 14px; bottom: 8px; margin: 0; font: 14px var(--body); color: var(--ink-soft); pointer-events: none; }
.stage.is-ok::after {
  content: "OZNACZONO"; position: absolute; right: 96px; top: 20px; padding: 4px 12px; border: 3px double var(--berry); border-radius: 6px;
  color: var(--berry); font: 700 19px var(--type); letter-spacing: .14em; transform: rotate(9deg); animation: stamp .35s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes stamp { from { opacity: 0; transform: rotate(9deg) scale(2.4); } }

.insets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.inset { margin: 0; padding: 4px 5px 5px; display: flex; flex-direction: column; align-items: center; background: var(--card); border: 1.5px solid var(--line); border-radius: 8px; box-shadow: 2px 3px 0 rgba(38, 48, 42, .08); }
.inset:nth-child(odd) { transform: rotate(-.7deg); }
.inset:nth-child(even) { transform: rotate(.6deg); }
.inset figcaption { font: 700 10.5px var(--type); text-transform: uppercase; letter-spacing: .1em; color: var(--resin); }
.inset .pic { width: 100%; height: auto; display: block; }
.inset span { font: 12.5px/1.2 var(--body); color: var(--ink); text-align: center; text-wrap: balance; min-height: 2.4em; display: grid; place-items: center; } /* miejsce na 2 linie */

/* --- pytanie / wynik ----------------------------------------------------------- */
.ask { min-height: 168px; }
.q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.question h3 { margin: 0; font: 700 16px var(--type); }
.question h3 span { display: inline-block; margin-right: 6px; padding: 2px 10px; border-radius: 999px; background: var(--resin); color: #fff; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 104px; padding: 14px 12px 10px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--lift); text-align: left;
  font: 600 15px/1.25 var(--body); transition: transform .12s, background .12s, box-shadow .12s;
}
.choice:hover { background: var(--resin-tint); transform: translate(-1px, -3px); box-shadow: 5px 7px 0 rgba(38, 48, 42, .18); }

.choice .pic { width: 92px; height: auto; }
.choice-tag { position: absolute; left: 14px; top: -12px; padding: 1px 10px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 700 15px var(--type); }

.verdict .latin { margin-top: 0; font: italic 14px var(--body); color: var(--ink-soft); }
.verdict .hint { font: 16px/1.25 var(--body); } /* podpowiedź większa niż reszta werdyktu, jak w Odpornych */
.verdict .btn { margin-top: 12px; }

/* --- tryb ciemny („Ciemny, Uczeń”, lista „Tryb”) -----------------------------------------------------------------------
   Kartki i panele są ciemne (tokeny w ../wspolne/system.css). Okaz 2D ma jasną mgłę i ciemny tusz, więc plansza okazu zostaje
   jasnym arkuszem z jasnymi kolorami; piktogramy klucza i kart obserwacji leżą na jasnych kartkach.
   Tylko strona „Ucznia” (body bez data-ui): naukowiec.html wczytuje ten sam arkusz, ale ma własny tryb ciemny. */
:root[data-tryb="ciemny"] body:not([data-ui]) .stage {
  color-scheme: light; color: #26302a;
  --paper: #f4eede; --paper-2: #e9dfc6; --card: #fffaf0; --ink: #26302a; --ink-soft: #5b6257; --line: #cdbf9c;
  --resin: #c9772b; --resin-tint: #fdebc8; --berry: #b8322a; --moss: #4c6b3c;
}
:root[data-tryb="ciemny"] body:not([data-ui]) .key { background: rgba(35, 40, 32, .88); }
:root[data-tryb="ciemny"] body:not([data-ui]) :is(.inset .pic, .choice .pic, .opt .pic) { background: #fffaf0; border-radius: 8px; }

/* --- szeroki ekran: lewy panel ma wysokość swojej treści (Piotr, 30.10.2026) -----------------------------------------------
   Wspólne arkusze trzymają grę w wysokości okna, a opis gry (.o-grze) kładą tuż pod oknem. W niskim oknie (laptop, pasek
   Safari) werdykt wychodził poza biurko i opis zakrywał go razem z przyciskiem „Następny okaz”. Teraz: gdy okaz, karty
   i werdykt mieszczą się w oknie, nic się nie zmienia (gra wypełnia okno); gdy nie, biurko rośnie do wysokości lewego
   panelu, klucz po prawej rośnie razem z nim, strona się przewija, a opis leży pod biurkiem. Oba wyglądy (Uczeń i Naukowiec). */
@media (min-width: 901px) {
  html, body { height: auto; }
  body { position: relative; min-height: 100vh; min-height: 100dvh; } /* .o-grze { top: 100% } liczy się teraz od dołu strony, nie okna */
}

/* --- telefon i wąski tablet (na końcu pliku, żeby wygrywało z resztą) ---------------- */
.board-sizer { height: 1px; pointer-events: none; }
@media (max-width: 900px) {
  /* minmax(0, 1fr), nie 1fr: pomocniczy pasek planszy klucza (.board-sizer, szerokość planszy w skali telefonu, ok. 600 px)
     rozpychał kolumnę „1fr” do swojej szerokości i cała strona wychodziła poza ekran telefonu (Piotr, 28.10.2026, iPhone) */
  .desk { grid-template-columns: minmax(0, 1fr); } /* musi być tu: dwie kolumny z góry pliku wygrałyby z systemem */
  .desk > * { min-width: 0; }
  .specimen { order: -1; }
  .stage { height: min(95vw, 440px); }
  #view { touch-action: pan-y; } /* w bok obraca okaz, w pionie przewija stronę */
  .insets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choices { grid-template-columns: 1fr; }
  .choice { min-height: 0; font-size: 14.5px; }
  /* drzewko w czytelnej skali, przewijane w bok; aktywny punkt sam wraca na środek */
  .key { height: auto; padding: 22px 6px 8px; }
  .board-wrap { height: 560px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
}