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

/* --- nagłówek --------------------------------------------------------------- */
.brand h1 em { color: var(--soil); } /* kolor tej gry: ziemia */

/* --- układ: panel po lewej, plansza po prawej ---------------------------------- */
.desk { grid-template-columns: minmax(360px, 1fr) minmax(0, 1.6fr); }
/* plansza to płótno z przekrojem gleby: nic nie przewija się w środku, etykieta etapu leży na płótnie */
.stage { overflow: hidden; background: #efe6d0; }
#field { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
.stage-label { position: absolute; left: 14px; top: 12px; z-index: 2; }

/* wskaźniki: energia i cel */
.hud {
  position: absolute; right: 12px; top: 12px; z-index: 2; width: 270px; padding: 9px 12px 8px; pointer-events: none;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: var(--lift-sm);
}
.meter { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; margin-bottom: 6px; }
.meter:last-child { margin-bottom: 0; }
.meter span { grid-column: 1 / -1; font: 700 10.5px var(--type); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.meter b { font: 700 13px var(--type); text-align: right; white-space: nowrap; }
.bar { position: relative; height: 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; transition: width .15s; }
.bar.energy i { background: var(--resin); }
.bar.goal i { background: var(--moss); }
.bar em { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); }

/* przyciski akcji na planszy */
.actions { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 8px; align-items: center; }
.act {
  display: inline-flex; align-items: center; gap: 7px; /* ikona i napis w jednym rzędzie (owocnik, mikroskop) */
  min-height: 40px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card);
  font: 700 14px var(--type); box-shadow: 2px 3px 0 rgba(38, 48, 42, .18);
}
.act:hover:not(:disabled) { background: var(--resin-tint); }
.act.main { background: var(--resin); color: #fff; }
.act.main:hover:not(:disabled) { background: #b5651f; }
.act:disabled { opacity: .45; cursor: default; }
/* „Zacznij etap od nowa”: ikona z Figmy (DS 40:28) w środku przycisku, zamiast znaku ↺ (27.10.2026) */
.act[data-act="again"] { display: inline-grid; place-items: center; min-width: 44px; padding-right: 10px; padding-left: 10px; }
.act svg.ik { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* nakładka: wstęp, wygrana, przegrana, quiz */
.over { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 18px; background: rgba(38, 32, 24, .32); }
.ocard {
  width: min(540px, 100%); max-height: 100%; overflow: auto; padding: 18px 22px 20px; background: var(--card);
  border: 2px solid var(--ink); border-radius: 18px; box-shadow: 4px 6px 0 rgba(38, 48, 42, .25); animation: rise .3s ease-out both;
}
.ocard.ok { border-color: var(--moss); background: #f1f7e8; }
.ocard.bad { border-color: var(--berry); background: #fdf0ea; }
.ocard h2 { margin: 8px 0 6px; font: 700 24px/1.15 var(--type); }
.ocard p { margin: 6px 0 0; font-size: 16px; line-height: 1.4; }
.ocard .goal { font-weight: 600; }
.ocard .lbl { font: 700 12px var(--type); text-transform: uppercase; letter-spacing: .1em; color: var(--moss); }
.ocard .note { padding: 10px 12px; background: #fff; border: 1.5px dashed var(--line); border-radius: 10px; }
.ocard .fact { padding: 10px 12px; background: var(--resin-tint); border-radius: 10px; font-size: 15px; }
.ocard .btn { margin-top: 14px; }
.answers { display: grid; gap: 8px; margin-top: 12px; }
.ans {
  text-align: left; padding: 11px 14px; border: 2px solid var(--ink); border-radius: 12px; background: #fff;
  font: 600 15.5px/1.3 var(--body); box-shadow: 2px 3px 0 rgba(38, 48, 42, .12);
}
.ans:hover:not(:disabled) { background: var(--resin-tint); }
.ans.right { background: var(--moss-tint); border-color: var(--moss); }
.ans.wrong { background: var(--berry-tint); border-color: var(--berry); }
.ans.dim { opacity: .55; }
.ans:disabled { cursor: default; }
.why { padding: 10px 12px; border-radius: 10px; }
.why.ok { background: var(--moss-tint); }
.why.no { background: var(--berry-tint); }

/* komunikat na planszy, nad przyciskami akcji (we wspólnym systemie jest przyklejony do okna) */
.toast { position: absolute; bottom: 66px; z-index: 6; max-width: 86%; }

/* --- panel boczny ---------------------------------------------------------------- */
h3.sub { margin: 16px 0 8px; }
.box .goal { margin-top: 8px; padding-top: 8px; border-top: 1.5px dashed var(--line); }
.learn ul { margin: 0; padding-left: 18px; }
.learn li { font-size: 15px; line-height: 1.4; margin: 4px 0; }
.safety { margin-top: 8px !important; padding: 8px 10px; background: var(--berry-tint); border-radius: 8px; font-weight: 600; }
.fact p { font-size: 15px; }
.rolecard { margin-top: 12px; padding: 12px 14px; background: #f1f7e8; border: 2px solid var(--moss); border-radius: 12px; }
.rolecard > b { display: block; margin-top: 6px; font: 700 20px var(--type); }
.rolecard p { margin: 6px 0; font-size: 14.5px; line-height: 1.35; }
.rolecard .small { font-size: 13.5px; color: var(--ink-soft); }
.trees { margin: 6px 0; padding-left: 18px; }
.trees li { font-size: 14.5px; line-height: 1.35; margin: 4px 0; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.step { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; padding: 6px 8px; background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; transition: background .15s, border-color .15s; }
.step svg { width: 52px; height: 44px; }
.step span { font-size: 13.5px; line-height: 1.25; }
.step.on { background: var(--resin-tint); border: 2px solid var(--resin); }
.log { list-style: none; margin: 0; padding: 0; }
.log li { padding: 7px 0 7px 18px; border-bottom: 1px dashed var(--line); font-size: 14.5px; line-height: 1.35; position: relative; }
.log li::before { content: "✎"; position: absolute; left: 0; color: var(--resin); }
.log li:first-child { color: var(--ink); font-weight: 600; }
.log li:not(:first-child) { color: var(--ink-soft); }
.log li.muted { font-weight: 400; color: var(--ink-soft); }
.log li.muted::before { content: ""; }
.notes { margin-top: 16px; padding: 12px 14px; background: #fff; border: 1.5px dashed var(--ink-soft); border-radius: 12px; }
.notes ol { margin: 0; padding-left: 20px; }
.notes li { font-size: 14.5px; line-height: 1.4; margin: 6px 0; }
.row .btn { margin-top: 0; }

/* --- telefon i wąski tablet ------------------------------------------------------- */
@media (max-width: 900px) {
  .desk { grid-template-columns: 1fr; } /* musi być tu: dwie kolumny z góry pliku wygrałyby z systemem */
  .stage { height: min(168vw, 800px); }
  .stage-label { display: none; }
  .hud { left: 10px; right: 10px; top: 8px; width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 10px; }
  .meter { margin: 0; }
  .meter span { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .meter b { font-size: 11.5px; }
  .actions { left: 10px; right: 10px; bottom: 10px; justify-content: flex-end; }
  .act { min-height: 44px; font-size: 13.5px; }
  .toast { bottom: 70px; }
  .steps { grid-template-columns: 1fr; }
  .ocard { padding: 16px 16px 18px; }
  .ocard h2 { font-size: 21px; }
  .ocard p { font-size: 15px; }
}

/* --- tryb ciemny („Ciemny, Uczeń”, lista „Tryb”) -----------------------------------------------------------------------
   Kartki, panel i przyciski są ciemne (tokeny w ../wspolne/system.css). Przekrój gleby ma ciemny tusz i jasne niebo, więc
   plansza zostaje jasnym arkuszem: dostaje z powrotem jasne kolory, także dla kart, przycisków i wskaźników na niej.
   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;
  --moss: #4c6b3c; --moss-tint: #dcebc9; --moss-pale: #e4f0d3; --resin: #c9772b; --resin-tint: #fdebc8; --berry: #b8322a; --berry-tint: #fbe3d6;
  --soil: #6a4a31; --ok: #4c6b3c; --ok-tint: #e4f0d3; --bad: #b8322a; --bad-tint: #fbe3d6; --focus: #c9772b; --focus-tint: #fdebc8;
  --accent: #4c6b3c; --accent-tint: #dcebc9; --na-kolorze: #fff;
  --lift: 3px 4px 0 rgba(38, 48, 42, .16); --lift-sm: 2px 3px 0 rgba(38, 48, 42, .14);
}
:root[data-tryb="ciemny"] body:not([data-ui]) .rolecard { background: #263121; }
:root[data-tryb="ciemny"] body:not([data-ui]) .notes { background: var(--paper-2); }
:root[data-tryb="ciemny"] body:not([data-ui]) .step svg { background: #fffaf0; border-radius: 8px; }