/* ============================================================================
   FREE HOME — styl rzutu 3D
   Papier, butelkowa zieleń, złoto. Nagłówki Georgia. Bez niebieskich akcentów.
   ========================================================================== */

:root{
  --papier:#f7f5ef;
  --papier-cien:#efece2;
  --las:#1b4332;
  --las-jasny:#2a5a43;
  --zloto:#c9a84c;
  --zloto-jasne:#e0c877;
  --tekst:#22271f;
  --tekst-mute:#5d655a;
  --linia:rgba(27,67,50,.16);
  --cien:0 6px 20px rgba(31,41,33,.13);
  --cien-mocny:0 12px 34px rgba(31,41,33,.20);
  --r:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{
  background:var(--papier);
  color:var(--tekst);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
body.noc{background:#16241d}

canvas#scena{position:fixed;inset:0;display:block;touch-action:none}

h1,h2,h3,.tytul{font-family:Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:.01em}

/* ------------------------------------------------------------------ ekran ładowania */
#ladowanie{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:var(--papier);transition:opacity .35s ease;
}
#ladowanie.schowane{opacity:0;pointer-events:none}
.lad-box{text-align:center;color:var(--las)}
.lad-box b{font-family:Georgia,serif;font-size:19px}
.lad-box small{color:var(--tekst-mute)}
.lad-kreska{
  width:120px;height:3px;margin:14px auto 0;border-radius:3px;
  background:linear-gradient(90deg,var(--zloto),var(--las));
  animation:puls 1.1s ease-in-out infinite;
}
@keyframes puls{0%,100%{opacity:.35}50%{opacity:1}}

/* ------------------------------------------------------------------ nagłówek */
#szapka{
  position:fixed;left:14px;top:12px;z-index:22;
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;border-radius:999px;
  background:rgba(247,245,239,.92);backdrop-filter:blur(6px);
  border:1px solid var(--linia);box-shadow:var(--cien);
}
#szapka .marka{font-family:Georgia,serif;font-size:15px;color:var(--las);letter-spacing:.06em}
#szapka .marka b{color:var(--zloto);font-weight:700}
#szapka .opis{font-size:12px;color:var(--tekst-mute)}

/* ------------------------------------------------------------------- panele */
/* Prawa kolumna: dwa panele jeden pod drugim, każdy ze swoim przewijaniem.
   Dzięki kolumnie flex nigdy na siebie nie nachodzą, niezależnie od treści. */
#kolumna{
  position:fixed;right:14px;top:12px;bottom:14px;z-index:24;
  width:266px;display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
}
#kolumna>.panel{pointer-events:auto}

.panel{
  position:relative;
  background:rgba(247,245,239,.95);backdrop-filter:blur(8px);
  border:1px solid var(--linia);border-radius:var(--r);
  box-shadow:var(--cien-mocny);
  overflow:hidden;display:flex;flex-direction:column;min-height:0;
}
#panel-dom{flex:1 1 auto;min-height:0}
#panel-slonce{flex:0 1 auto;min-height:0}

.panel-glowa{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;background:var(--las);color:#f4f1e6;
}
.panel-glowa .tytul{font-size:14px;color:#fff}
.panel-min{
  width:26px;height:26px;flex:0 0 26px;border:none;cursor:pointer;
  border-radius:8px;background:rgba(255,255,255,.14);color:#fff;
  font-size:16px;line-height:1;display:grid;place-items:center;
}
.panel-min:hover{background:rgba(255,255,255,.24)}
.panel-glowa{flex:0 0 auto}
.panel-cialo{padding:12px;display:grid;gap:11px;overflow:auto;min-height:0;flex:1 1 auto}
.panel.zwiniety{flex:0 0 auto}
.panel.zwiniety .panel-cialo{display:none}

.grupa{display:grid;gap:7px}
.grupa>.etykieta{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--tekst-mute)}

/* -------------------------------------------------------------- przyciski */
.rzad{display:flex;gap:6px;flex-wrap:wrap}
.btn{
  appearance:none;border:1px solid var(--linia);cursor:pointer;
  background:#fff;color:var(--tekst);
  padding:8px 12px;border-radius:999px;font-size:13px;font-weight:500;
  min-height:38px;transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{border-color:var(--zloto);background:var(--papier-cien)}
.btn.on{background:var(--las);border-color:var(--las);color:#f4f1e6}
.btn.zloty{background:var(--zloto);border-color:var(--zloto);color:#20301f;font-weight:600}
.btn.zloty:hover{background:var(--zloto-jasne)}
.btn.pelna{width:100%;justify-content:center}

.seg{display:flex;border:1px solid var(--linia);border-radius:999px;overflow:hidden;background:#fff}
.seg .btn{border:none;border-radius:0;flex:1;min-height:36px;padding:7px 6px;font-size:12.5px}
.seg .btn+.btn{border-left:1px solid var(--linia)}

/* ------------------------------------------------------------ przełączniki */
.przel{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
.przel input{appearance:none;width:42px;height:24px;border-radius:999px;background:#d8d4c8;position:relative;cursor:pointer;transition:background .18s;flex:0 0 42px}
.przel input:checked{background:var(--las)}
.przel input::after{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.przel input:checked::after{transform:translateX(18px)}

/* ------------------------------------------------------------------- suwak */
input[type=range]{
  appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(90deg,var(--zloto),var(--las))}
input[type=range]::-webkit-slider-thumb{
  appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;
  border:2px solid var(--zloto);margin-top:-8px;box-shadow:0 1px 4px rgba(0,0,0,.25);
}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:var(--zloto)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:2px solid var(--zloto);background:#fff;border-radius:50%}

input[type=date],input[type=number]{
  width:100%;padding:7px 9px;border:1px solid var(--linia);border-radius:10px;
  background:#fff;color:var(--tekst);font:inherit;font-size:13px;min-height:38px;
}

/* --------------------------------------------------------------- dane słońca */
.dane{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.dane div{background:#fff;border:1px solid var(--linia);border-radius:10px;padding:6px 8px}
.dane small{display:block;font-size:10.5px;color:var(--tekst-mute);text-transform:uppercase;letter-spacing:.06em}
.dane b{font-family:Georgia,serif;font-size:15px;color:var(--las)}
.godzina-duza{font-family:Georgia,serif;font-size:26px;color:var(--las);text-align:center;line-height:1}
#kompas{display:block;margin:2px auto 0}
#slonce-taras{font-size:12px;color:var(--tekst-mute);text-align:center}
#slonce-info{font-size:12.5px;color:#8a5a2b;text-align:center;display:none}
#slonce-info.widoczny{display:block}

/* ------------------------------------------------------------ pasek spaceru */
#pasek-spacer{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:26;
  display:none;gap:8px;align-items:center;
  padding:8px 10px;border-radius:999px;
  background:rgba(247,245,239,.95);border:1px solid var(--linia);box-shadow:var(--cien-mocny);
}
body.spacer-on #pasek-spacer{display:flex}
#minimapa{
  position:fixed;left:14px;bottom:16px;z-index:26;display:none;
  width:132px;height:132px;border-radius:12px;
  background:rgba(247,245,239,.95);border:1px solid var(--linia);box-shadow:var(--cien);
}
body.spacer-on #minimapa{display:block}

/* Dolna strefa dotyku = chodzenie (tylko w spacerze, tylko dotyk). */
#pas-ruchu{
  position:fixed;left:0;right:0;bottom:0;height:22vh;z-index:25;display:none;
  touch-action:none;
}
body.spacer-on #pas-ruchu{display:block}
#pas-ruchu .wskaz{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font-size:11.5px;color:var(--tekst-mute);background:rgba(247,245,239,.8);
  padding:4px 10px;border-radius:999px;border:1px solid var(--linia);
  pointer-events:none;
}
#pas-ruchu.trzymany .wskaz{opacity:.35}
@media (hover:hover) and (pointer:fine){ #pas-ruchu{display:none !important} }

/* ---------------------------------------------------------------- samotest */
#samotest{
  position:fixed;left:14px;bottom:14px;z-index:20;max-width:min(52vw,520px);
  font-size:11px;color:var(--tekst-mute);
  background:rgba(247,245,239,.9);border:1px solid var(--linia);
  padding:5px 9px;border-radius:8px;
}
#samotest.zle{color:#8c2f2a;border-color:#c98a86}
body.spacer-on #samotest{display:none}

/* ------------------------------------------------------------------ podpowiedź */
#podpowiedz{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:21;
  font-size:12.5px;color:var(--tekst-mute);
  background:rgba(247,245,239,.92);border:1px solid var(--linia);
  padding:7px 14px;border-radius:999px;box-shadow:var(--cien);
  transition:opacity .4s;
}
body.spacer-on #podpowiedz{display:none}

/* ============================== TELEFON ================================== */
@media (max-width:860px), (pointer:coarse){
  /* Na telefonie kolumna siada u DOŁU ekranu (dom zostaje widoczny u góry),
     a panele przełączamy zakładkami — jeden na raz. */
  #kolumna{
    left:10px;right:10px;width:auto;
    top:auto;bottom:10px;max-height:52vh;
  }
  #panel-dom{flex:0 1 auto}
  #panel-slonce{display:none}
  body.pokaz-slonce #panel-slonce{display:flex}
  body.pokaz-slonce #panel-dom{display:none}
  .panel-cialo{max-height:44vh}
  #szapka{left:10px;top:8px;padding:6px 11px}
  #szapka .opis{display:none}
  #samotest{display:none}
  #minimapa{width:104px;height:104px;left:10px;bottom:calc(22vh + 10px)}
  #pasek-spacer{bottom:calc(22vh + 10px)}
  #podpowiedz{bottom:auto;top:52px;font-size:11.5px}
  .btn{min-height:42px}
}

/* Zakładki przełączające panele na telefonie */
#zakladki{
  position:fixed;right:10px;top:8px;z-index:27;display:none;gap:6px;
}
@media (max-width:860px), (pointer:coarse){ #zakladki{display:flex} }
#zakladki .btn{padding:7px 12px;min-height:38px;font-size:12.5px;background:rgba(247,245,239,.95)}

/* Pełny ekran — panele nie mogą uciec poza ekran ani zablokować wyjścia. */
body.pelny-ekran #szapka{top:8px}
body.pelny-ekran .panel{max-height:92vh}

/* Bezpieczne obszary iPhone */
@supports (padding:max(0px)){
  @media (max-width:860px), (pointer:coarse){
    #panel-dom,#panel-slonce{bottom:max(10px,env(safe-area-inset-bottom))}
    #pas-ruchu{padding-bottom:env(safe-area-inset-bottom)}
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}

/* Tryb „czysty kadr" (?panele=0) — do zrzutów i prezentacji bez interfejsu. */
body.bez-paneli #kolumna,
body.bez-paneli #zakladki,
body.bez-paneli #samotest,
body.bez-paneli #podpowiedz{display:none !important}

/* ---------------------------------------------- pełny ekran: przycisk-ikona
   Zawsze na wierzchu (w nagłówku), żeby nie chował się w przewijanym panelu.
   Ikona przełącza się: strzałki na zewnątrz = wejdź, do środka = wyjdź.      */
.ikona-btn{
  appearance:none;border:1px solid var(--linia);cursor:pointer;
  background:#fff;color:var(--las);
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  display:grid;place-items:center;padding:0;
  transition:background .15s,border-color .15s,color .15s;
}
.ikona-btn:hover{border-color:var(--zloto);background:var(--papier-cien)}
.ikona-btn .ik-zam{display:none}
body.pelny-ekran .ikona-btn .ik-otw{display:none}
body.pelny-ekran .ikona-btn .ik-zam{display:block}
body.pelny-ekran .ikona-btn{background:var(--zloto);border-color:var(--zloto);color:#20301f}
body.spacer-on .ikona-btn{display:none}

/* W pełnym ekranie nagłówek i panele muszą zostać osiągalne (nie chowamy ich). */
body.pelny-ekran #szapka{z-index:30}
body.pelny-ekran #kolumna{z-index:29}