/* ============================================================================
   TRZY PERŁY — styl makiety.  Identyfikacja FREE HOME: papier, butelkowa
   zieleń, złoto, grafit. Bez neonów, bez niebieskich akcentów.

   ZASADA UKŁADU: główną rolę gra MAKIETA. Sterowanie mieści się w jednym
   cienkim pasku u góry; nic innego nie wchodzi w kadr, dopóki użytkownik
   sam tego nie otworzy.
   ========================================================================== */
:root{
  --papier:#f7f5ef; --papier2:#efece2;
  --las:#1b4332; --zloto:#c9a84c; --grafit:#3c4045;
  --tekst:#22271f; --mute:#5d655a; --linia:rgba(27,67,50,.16);
  --cien:0 6px 20px rgba(31,41,33,.14);
  --pasek-h:52px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--papier)}
body{font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--tekst);-webkit-tap-highlight-color:transparent}
canvas#scena{position:fixed;inset:0;display:block;touch-action:none}
h1,h2,.tytul{font-family:Georgia,"Times New Roman",serif;font-weight:600}

#ladowanie{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--papier);transition:opacity .35s}
#ladowanie.schowane{opacity:0;pointer-events:none}
.lad{text-align:center;color:var(--las)}
.lad b{font-family:Georgia,serif;font-size:20px}
.lad small{color:var(--mute)}

/* ====================== PASEK STEROWANIA (jeden, u góry) ================= */
#pasek[hidden]{display:none}
#pasek{position:fixed;left:10px;right:10px;top:10px;z-index:22;
  display:flex;align-items:center;gap:8px;min-height:var(--pasek-h);
  padding:6px 10px;border-radius:14px;
  background:rgba(247,245,239,.95);backdrop-filter:saturate(1.2) blur(6px);
  border:1px solid var(--linia);box-shadow:var(--cien);
  overflow-x:auto;overflow-y:visible;scrollbar-width:none}
#pasek::-webkit-scrollbar{display:none}
#pasek > *{flex:0 0 auto}
.marka{font-family:Georgia,serif;color:var(--las);letter-spacing:.06em;font-size:15px}
.marka b{color:var(--zloto)}
.inw{font-size:12.5px;color:var(--mute)}
#licznik{font-size:12.5px;color:var(--las);font-weight:600;
  padding:3px 9px;border-radius:999px;background:rgba(27,67,50,.07);white-space:nowrap}
#licznik .krotki{display:none}
.rozdziel{width:1px;height:24px;background:var(--linia)}

/* Pierwsza ikona odpycha grupę do prawej krawędzi paska. */
#btn-slonce{margin-left:auto}
.ikona{appearance:none;border:1px solid transparent;background:transparent;color:var(--mute);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:10px;font-size:12.5px;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s}
.ikona:hover{color:var(--tekst);background:var(--papier2)}
.ikona .znak{font-size:15px;line-height:1}
/* Stan „włączone" niesie kolor marki, nie sam cień — musi być czytelny
   także na zdjęciu makiety pod spodem. */
.ikona.wl{color:var(--las);background:rgba(27,67,50,.08);border-color:var(--linia)}
.ikona.on{background:var(--las);border-color:var(--las);color:#f4f1e6}
.btn{appearance:none;border:1px solid var(--linia);background:#fff;color:var(--tekst);cursor:pointer;
  padding:8px 13px;border-radius:999px;font-size:13px;min-height:38px;transition:background .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--zloto);background:var(--papier2)}
.btn.zloty{background:var(--zloto);border-color:var(--zloto);color:#20301f;font-weight:600}
.rzad{display:flex;gap:6px;flex-wrap:wrap}

/* ---------------------------------------------------------------- legenda */
/* Cienka linijka w rogu — informacja pomocnicza, nie element sterowania. */
#legenda[hidden]{display:none}
#legenda{position:fixed;left:14px;bottom:12px;z-index:18;
  display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--mute);
  padding:5px 11px;border-radius:999px;background:rgba(247,245,239,.82);border:1px solid var(--linia)}
.leg{display:inline-flex;align-items:center;gap:5px}
.leg i{width:9px;height:9px;border-radius:2px;display:inline-block}

/* ---------------------------------------------------------------- panel */
#panel{position:fixed;right:12px;top:calc(var(--pasek-h) + 20px);bottom:12px;width:320px;z-index:24;
  background:rgba(247,245,239,.97);border:1px solid var(--linia);border-radius:16px;box-shadow:var(--cien);
  display:flex;flex-direction:column;transform:translateX(calc(100% + 24px));transition:transform .32s cubic-bezier(.22,.8,.3,1)}
#panel.otwarty{transform:none}
.panel-glowa{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:var(--las);color:#f4f1e6;border-radius:15px 15px 0 0}
.panel-glowa .tytul{font-size:17px;color:#fff}
.zamknij{width:30px;height:30px;border:none;border-radius:9px;background:rgba(255,255,255,.15);color:#fff;font-size:17px;cursor:pointer}
.panel-cialo{padding:13px 16px;display:grid;gap:9px;overflow:auto;flex:1}
.pole{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px dashed var(--linia);padding-bottom:6px}
.pole small{color:var(--mute);font-size:12px}
.pole b{font-family:Georgia,serif;font-size:15px;color:var(--las);text-align:right}
.plakietka{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-family:inherit;
  color:#fff;background:var(--kolor)}
.panel-stopka{padding:12px 16px;display:grid;gap:8px;border-top:1px solid var(--linia)}

/* ---------------------------------------------------------------- słońce */
/* Jeden wiersz pod paskiem: godzina, suwak, data. Nic poza tym — makieta ma
   pokazać, gdzie idzie słońce, a nie raportować azymuty. */
#sun-panel{position:fixed;right:12px;top:calc(var(--pasek-h) + 20px);z-index:23;
  display:flex;align-items:center;gap:12px;
  width:min(94vw,420px);padding:10px 14px;border-radius:12px;
  background:rgba(247,245,239,.97);border:1px solid var(--linia);box-shadow:var(--cien)}
#sun-panel[hidden]{display:none}
.sun-godzina{font-family:Georgia,serif;font-size:19px;color:var(--las);
  font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:62px}
#sun-panel input[type=range]{appearance:none;flex:1 1 auto;height:4px;border-radius:99px;
  background:linear-gradient(90deg,#d8d4c8,var(--zloto));outline:none;cursor:pointer}
#sun-panel input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--las);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
#sun-panel input[type=date]{flex:0 0 auto;width:130px;padding:6px 8px;border-radius:8px;
  font:inherit;font-size:12.5px;border:1px solid var(--linia);background:#fff;color:var(--tekst)}

#etykieta{position:fixed;left:0;top:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .12s;
  background:rgba(27,67,50,.94);color:#fff;padding:5px 11px;border-radius:8px;font-size:12.5px;display:flex;gap:8px;align-items:center}
#etykieta.widoczna{opacity:1}
#etykieta b{font-family:Georgia,serif;font-size:14px;color:var(--zloto)}

body.bez-paneli #pasek,body.bez-paneli #panel,body.bez-paneli #legenda,
body.bez-paneli #sun-panel{display:none}

/* ============================== TELEFON ================================= */
@media (max-width:900px),(pointer:coarse){
  /* Na wąskim ekranie pasek ZAWIJA SIĘ w dwa niskie rzędy zamiast przewijać
     w poziomie. Przewijanie chowało przyciski Słońce i Pełny ekran poza
     kadrem — użytkownik nie miał jak ich znaleźć. Dwa rzędy to nadal
     ułamek tego, co zajmowały dawne panele. */
  /* Pasek MUSI zostać jednoliniowy — zawijanie wypychało przycisk pełnego
     ekranu do drugiego rzędu i podwajało wysokość belki. Skracamy licznik
     i zwężamy ikony, wtedy wszystko mieści się w jednej linii. */
  #pasek{gap:4px;padding:5px 8px;flex-wrap:nowrap;overflow:visible}
  #pasek .rozdziel{display:none}
  #licznik{padding:3px 8px}
  #licznik .pelny{display:none}
  #licznik .krotki{display:inline}
  .marka{font-size:14px}
  .inw{display:none}
  .ikona .opis{display:none}          /* na wąskim ekranie same znaki */
  .ikona{padding:8px 7px;min-height:40px}
  /* panel segmentu wysuwa się OD DOŁU */
  #panel{left:0;right:0;bottom:0;top:auto;width:auto;max-height:62vh;border-radius:18px 18px 0 0;
    transform:translateY(calc(100% + 24px))}
  #panel.otwarty{transform:none}
  .panel-glowa{border-radius:17px 17px 0 0}
  #sun-panel{left:10px;right:10px;width:auto;max-width:none;flex-wrap:wrap;row-gap:8px}
  #sun-panel input[type=range]{flex:1 1 60%}
  #legenda{left:10px;right:10px;bottom:10px;justify-content:center;font-size:11px;gap:10px}
  #etykieta{display:none}
}
@supports(padding:max(0px)){
  @media (max-width:900px),(pointer:coarse){
    .panel-stopka{padding-bottom:max(12px,env(safe-area-inset-bottom))}
    #legenda{bottom:max(10px,env(safe-area-inset-bottom))}
  }
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001s!important}}

/* ------------------------------------------------------------ pełny ekran */
/* Pasek zostaje — bez niego nie da się wyjść z pełnego ekranu ani zmienić
   filtra. Chowamy tylko legendę, żeby oddać maksimum kadru. */
body.pelny-ekran #legenda{opacity:.55}

/* ---------------------------------------------------------------- wnętrze */
/* Osobny, równie wąski pasek — w środku domu sterowanie makietą nie ma sensu,
   więc podmieniamy pasek zamiast dokładać kolejny rząd przycisków. */
#pasek-wnetrza{position:fixed;left:10px;right:10px;top:10px;z-index:22;
  display:flex;align-items:center;gap:6px;min-height:var(--pasek-h);
  padding:6px 10px;border-radius:14px;
  background:rgba(247,245,239,.95);border:1px solid var(--linia);box-shadow:var(--cien)}
#pasek-wnetrza[hidden]{display:none}
.chipw{appearance:none;border:1px solid var(--linia);background:#fff;color:var(--tekst);
  cursor:pointer;padding:8px 16px;border-radius:999px;font-size:13px;min-height:38px;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s}
.chipw:hover{border-color:var(--zloto);background:var(--papier2)}
.chipw.on{background:var(--las);border-color:var(--las);color:#f4f1e6;font-weight:600}
.chipw.wroc{margin-left:auto;border-color:transparent;background:transparent;color:var(--mute)}
.chipw.wroc:hover{color:var(--las);background:var(--papier2)}