:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;font-synthesis:none;}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#16334b}
body{-webkit-font-smoothing:antialiased}
.display{height:100dvh;width:100%;position:relative;overflow:hidden;background:#1c4d68}
.scenery,.picture,.light-filter,.weather-filter,.readability,.haze,.clouds,.particles{position:absolute;inset:0;pointer-events:none}
/* A single image avoids repeated CSS-background tiles in kiosk compositors. */
.scenery{z-index:0}.picture{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;background:none}
.light-filter{background:transparent}
body[data-display-ready] .light-filter{transition:background 1s}
body.phase-dawn .light-filter{background:linear-gradient(155deg,rgba(81,45,118,.49),rgba(253,155,101,.19) 40%,rgba(34,52,100,.1) 76%)}
body.phase-dusk .light-filter{background:linear-gradient(165deg,rgba(252,119,91,.28),rgba(91,50,119,.48) 47%,rgba(14,33,73,.38) 100%)}
body.phase-night .light-filter{background:rgba(7,24,57,.67);}
body.phase-night .scenery:after{content:"";position:absolute;inset:0;background:rgba(8,25,68,.24)}
.weather-filter{background:transparent}
body[data-display-ready] .weather-filter{transition:background .6s}
body.weather-cloudy .weather-filter{background:rgba(47,61,73,.20)}
body.weather-fog .weather-filter{background:linear-gradient(rgba(244,249,252,.44),rgba(225,233,231,.19))}
body.weather-rain .weather-filter,body.weather-thunder .weather-filter{background:rgba(23,47,72,.37)}
body.weather-wind .weather-filter{background:rgba(36,65,78,.14)}
body.weather-snow .weather-filter{background:rgba(195,217,230,.10)}
.readability{z-index:0;background:linear-gradient(180deg,rgba(1,14,31,.44),rgba(6,23,43,.22) 23%,rgba(10,32,50,.05) 47%,rgba(4,18,34,.24) 65%,rgba(2,16,33,.76) 100%)}
.haze{top:43%;height:31%;background:linear-gradient(transparent,rgba(250,251,237,.10),transparent)}
.orb{position:absolute;left:69%;top:14%;height:clamp(74px,15vw,150px);aspect-ratio:1;background:#ffefc1;border-radius:50%;box-shadow:0 0 55px 12px #fff6ce8c,0 0 140px 45px #f4d4a443;opacity:0}
.phase-day.weather-clear .orb,.phase-day.weather-partly_cloudy .orb,.phase-dawn.weather-clear .orb,.phase-dusk.weather-clear .orb{opacity:.95}
.phase-dawn .orb,.phase-dusk .orb{top:34%;left:78%;background:#ffb58a;box-shadow:0 0 110px 40px #ffb18c7d}
.phase-night .orb{top:12%;left:75%;opacity:.8;height:clamp(56px,10vw,90px);background:#eef6ef;box-shadow:0 0 58px 12px #c9e7f06b}
.clouds{opacity:0;z-index:1}
.clouds i{position:absolute;display:block;width:39%;height:6%;top:22%;left:0;transform:translateX(calc(-100% - var(--cloud-overhang,7vw) - 2px))}
.clouds i:not(:empty){animation:drift 58s linear -20s infinite both}
.clouds i:nth-child(2){top:34%;width:52%;animation-delay:-46s;animation-duration:68s;opacity:.75}
.clouds i:nth-child(3){top:13%;width:25%;animation-delay:-29s;animation-duration:52s;opacity:.66}
.weather-cloudy .clouds,.weather-partly_cloudy .clouds,.weather-rain .clouds,.weather-snow .clouds,.weather-thunder .clouds{opacity:1}
/* Include the PNG's soft edges: even the whole image is outside at each reset. */
@keyframes drift{
 from{transform:translateX(calc(-100% - var(--cloud-overhang,7vw) - 2px))}
 to{transform:translateX(calc(100vw + var(--cloud-overhang,7vw) + 2px))}
}
.particles{z-index:2;overflow:hidden}
.particle{display:block;position:absolute;top:-8%;width:2px;height:30px;border-radius:2px;background:linear-gradient(transparent,#d3eaf7a0);opacity:.62;animation:fall linear infinite}
body.weather-snow .particle{width:9px;height:9px;background:#fff;border-radius:50%;box-shadow:0 0 8px #fff9}
body.weather-thunder .particle{opacity:.85}
@keyframes fall{to{transform:translate3d(-150px,114vh,0)}}
.topbar{position:absolute;top:5.0%;left:7.3%;right:7.3%;display:flex;align-items:center;justify-content:space-between;gap:15px}
.brand{font-size:clamp(12px,1.65vw,25px);letter-spacing:.21em;font-weight:750;text-shadow:0 2px 12px #0a15274d}
.brand-orbit{font-size:1.85em;line-height:0;vertical-align:-.1em;margin-right:.28em}
.hero{position:absolute;top:18%;left:7.3%;right:7.3%}
.place-tag{font-size:clamp(11px,1.55vw,20px);font-weight:730;letter-spacing:.23em;color:#eaf6ff}
h1{font-size:clamp(35px,6.6vw,82px);margin:.18em 0 .10em;font-weight:740;letter-spacing:-.045em;line-height:1.11;text-shadow:0 5px 22px #09253c52;overflow-wrap:break-word}
#date{font-size:clamp(15px,2.1vw,26px);font-weight:500;margin:0;letter-spacing:.02em;color:#ecf7ff}
.glass-card{margin-top:10%;padding:4% 5% 3.9%;border:1px solid #ffffff4e;border-radius:clamp(18px,2vw,34px);background:linear-gradient(155deg,#133e5c63,#15324f70);box-shadow:0 15px 70px #001e3f1c}
.main-reading{display:flex;align-items:center;justify-content:space-between}
.temperature{font-size:clamp(90px,16.8vw,207px);font-weight:270;line-height:.99;letter-spacing:-.09em;white-space:nowrap}
.degree{font-size:.62em;vertical-align:.27em;margin-left:.06em;letter-spacing:0}
.weather-icon{width:24%;max-width:170px;min-width:75px;aspect-ratio:1}
.weather-icon svg{height:100%;width:100%;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.condition{font-size:clamp(21px,3.2vw,44px);font-weight:580;margin:4% 0 7%}
.stats{border-top:1px solid #ffffff55;padding-top:5%;display:grid;grid-template-columns:1fr 1fr;gap:10%}
.stats>div{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.stats-label{flex:0 0 100%;font-size:clamp(11px,1.5vw,18px);font-weight:650;color:#d3e3ed;letter-spacing:.11em;margin-bottom:1.5%}
.stats strong{font-size:clamp(21px,3.6vw,45px);font-weight:650;line-height:1.2}
.stats-unit{font-size:clamp(12px,1.7vw,22px);color:#d9e7ef}
.bottom{position:absolute;bottom:6.5%;left:7.3%;right:7.3%;display:flex;flex-direction:column;gap:12px}
.bottom-date{display:flex;flex-direction:column;gap:.2em}
.clock-caption{font-size:clamp(12px,1.6vw,20px);font-weight:690;letter-spacing:.18em;color:#dbeaf6}
#clock{font-size:clamp(65px,13vw,155px);font-weight:330;letter-spacing:-.055em;line-height:1}
.foot-detail{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;border-top:1px solid #ffffff4a;padding-top:3%;font-size:clamp(10px,1.25vw,15px);color:#e4f0f8}
.foot-detail small{line-height:1.5;text-align:right;font-size:inherit;opacity:.78}
.demo-label{position:absolute;z-index:8;top:0;left:0;right:0;text-align:center;background:#f9d267;color:#151b26;font-size:clamp(11px,1.5vw,22px);padding:.3em;font-weight:800;letter-spacing:.07em}
@media (max-aspect-ratio: 3/4){.topbar{top:5.2%}.hero{top:20%}.glass-card{margin-top:11%}.bottom{bottom:7%}}
@media (min-aspect-ratio:3/4){.hero{top:18%}.glass-card{max-width:800px;margin-top:3%;padding:2.5% 4%}.condition{margin:1% 0 3%}.temperature{font-size:clamp(70px,10vw,160px)}.bottom{bottom:4%}#clock{font-size:clamp(65px,9vw,135px)}}
@media (prefers-reduced-motion:reduce){.clouds i:not(:empty),.particle{animation:none}}
@media (prefers-reduced-motion:reduce){
  .clouds i:not(:empty){transform:none;left:8%}
  .clouds i:nth-child(2){left:48%}
  .clouds i:nth-child(3){left:57%}
}

.foot-detail a{color:inherit;text-decoration:underline;text-decoration-color:#ffffff70;text-underline-offset:2px}

/* Five near-term hourly snapshots. Distinct from the large current condition. */
.hourly-forecast{position:absolute;left:7.3%;right:7.3%;bottom:23%;z-index:2;min-width:0}
.hourly-heading{font-size:clamp(12px,1.55vw,19px);letter-spacing:.18em;font-weight:750;text-shadow:0 2px 14px #071a32;margin-bottom:12px}
.hourly-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:linear-gradient(130deg,#112b47ab,#2547618c);border:1px solid #ffffff55;border-radius:clamp(16px,2.5vw,30px);overflow:hidden;box-shadow:0 14px 55px #05142e3b;min-height:140px}
.hourly-item{min-width:0;text-align:center;padding:16px 3px 13px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:5px;min-height:140px}
.hourly-item+.hourly-item{border-left:1px solid #ffffff37}
.hourly-time{font-size:clamp(13px,1.85vw,23px);font-weight:600;letter-spacing:.005em;font-variant-numeric:tabular-nums}
.hourly-icon{display:block;width:clamp(31px,5.8vw,72px);height:clamp(31px,5.8vw,72px)}
.hourly-icon svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round;}
.hourly-temp{font-size:clamp(18px,2.55vw,31px);font-weight:650;font-variant-numeric:tabular-nums}
.hourly-empty{grid-column:1/-1;display:flex;align-items:center;justify-content:center;text-align:center;margin:0;padding:20px;font-size:clamp(14px,1.8vw,22px);color:#e5eef7}
@media(min-aspect-ratio:3/4){.hourly-forecast{bottom:25%;max-width:900px}.hourly-list,.hourly-item{min-height:110px}.hourly-item{padding:10px 3px}}
@media(max-width:520px){.hourly-forecast{bottom:20%}.hourly-heading{margin-bottom:6px}.hourly-list,.hourly-item{min-height:110px}.hourly-item{padding:9px 2px 8px}.hourly-icon{width:31px;height:31px}.hourly-time{font-size:12px}.hourly-temp{font-size:17px}}

@media(min-aspect-ratio:3/4){.hero{top:9%}.glass-card{margin-top:2%;padding:2% 3%}.condition{margin:1% 0 2%}.hourly-forecast{bottom:24%}}
@media(max-width:520px){.bottom{bottom:2%}.foot-detail{font-size:9px}}

/* v0.3: Easy Bistro portrait layout inspired by approved concept, no stock imagery. */
.topbar{top:3.3%;left:auto;right:5.8%;width:24%;height:auto;z-index:5;align-items:flex-start;justify-content:flex-end}
.bistro-logo{display:block;width:100%;max-height:245px;object-fit:contain;}
.hero{top:5.1%;left:6.2%;right:6.2%}
.hero h1{max-width:65%;margin:0 0 .28em;font-size:clamp(36px,6.4vw,82px);font-weight:750;line-height:1.15}
.date-time{display:flex;align-items:baseline;gap:1.2em;flex-wrap:wrap;color:#f4f9ff;font-size:clamp(15px,2.15vw,29px);text-shadow:0 3px 14px #091c32a0;max-width:67%}
#date{margin:0;font-size:inherit;font-weight:500;color:inherit}
#clock{font-size:inherit;font-weight:550;letter-spacing:0;line-height:1;font-variant-numeric:tabular-nums}
.glass-card{margin-top:11%;padding:0;background:none;box-shadow:none;border:0;max-width:91%}
.main-reading{justify-content:flex-start;gap:5.5%;align-items:center}
.temperature{font-size:clamp(104px,20vw,244px);font-weight:500;letter-spacing:-.085em;text-shadow:0 5px 18px #071a3255}
.degree{font-size:.63em}
.weather-icon{width:17%;max-width:210px;min-width:76px}
.weather-icon svg{stroke-width:3.0}
.condition{margin:1.2% 0 5%;font-size:clamp(24px,3.35vw,44px);font-weight:580;text-shadow:0 3px 12px #081b3088}
.stats{display:flex;border-top:none;padding-top:0;gap:24px;align-items:center;max-width:91%}
.stats .stat{display:flex;flex-wrap:nowrap;align-items:center;gap:.36em;white-space:nowrap}
.stat-symbol{font-size:clamp(18px,2.8vw,33px);line-height:1;opacity:.94}
.stats-label{flex:0 0 auto;font-size:clamp(13px,1.85vw,23px);font-weight:550;letter-spacing:0;margin:0;color:#fff}
.stats strong{font-size:clamp(15px,2.35vw,27px);font-weight:670}
.stats-unit{font-size:clamp(12px,1.7vw,21px);color:#fff}
.hourly-forecast{left:5%;right:5%;bottom:5.1%;max-width:none}
.hourly-heading{display:none}
.hourly-list{background:linear-gradient(125deg,#091729ae,#23384eae);border:1px solid #ffffff62;border-radius:clamp(20px,2.7vw,34px);min-height:200px;box-shadow:0 18px 60px #07152652}
.hourly-item{min-height:200px;padding:22px 3px 18px;gap:6px}
.hourly-time{font-size:clamp(13px,2.0vw,25px)}
.hourly-icon{width:clamp(33px,6.2vw,76px);height:clamp(33px,6.2vw,76px)}
.hourly-temp{font-size:clamp(21px,2.8vw,35px)}
.bottom{bottom:.8%;left:5%;right:5%;gap:0}
.foot-detail{font-size:clamp(9px,1.03vw,13px);padding-top:0;border:0;opacity:.85}
/* sun/moon must never shine through heavy cloud, rain, storm, fog or snow */
.phase-night .orb{opacity:0}
.phase-night.weather-clear .orb,.phase-night.weather-partly_cloudy .orb{opacity:.77}
.phase-dawn.weather-partly_cloudy .orb,.phase-dusk.weather-partly_cloudy .orb{opacity:.55}
.weather-cloudy .orb,.weather-fog .orb,.weather-rain .orb,.weather-snow .orb,.weather-thunder .orb{opacity:0!important}
.fog-banks,.lightning{position:absolute;inset:0;pointer-events:none}
.fog-banks{opacity:0;z-index:2;background:repeating-linear-gradient(178deg,transparent 0 115px,rgba(245,249,246,.22) 148px,transparent 230px);animation:fog-slide 30s ease-in-out infinite alternate}
.weather-fog .fog-banks{opacity:.95}
@keyframes fog-slide{to{transform:translateY(-24px)}}
.weather-wind .clouds{opacity:.44}
.lightning{opacity:0;background:linear-gradient(75deg,transparent 0 60%,rgba(225,245,255,.75) 60.5% 61%,transparent 62%);}
.weather-thunder .lightning{animation:flash 13s linear infinite}
@keyframes flash{0%,89%,92%,100%{opacity:0}90%,91%{opacity:.55}}
/* Keep all text readable on common portrait Android/Chromium sizes. */
@media(max-aspect-ratio:3/4){
 .hero{top:5.1%}.glass-card{margin-top:11%;padding:0}
 .hourly-forecast{bottom:5.1%;max-width:none}
 .hourly-list,.hourly-item{min-height:200px}
 .bottom{bottom:.8%}
}
@media(min-aspect-ratio:3/4){
 .hero{top:4%}.glass-card{margin-top:3%;padding:0}
 .hourly-forecast{bottom:7%;max-width:900px}
 .hourly-list,.hourly-item{min-height:115px}.hourly-item{padding:10px 3px}
 .topbar{width:15%;top:2%}
}
@media(max-width:520px){
 .hero{top:5.1%}.topbar{width:24%}.hero h1{max-width:70%}
 .date-time{font-size:clamp(12px,2.15vw,17px);max-width:74%}
 .glass-card{margin-top:14%}.temperature{font-size:clamp(83px,20vw,116px)}
 .weather-icon{min-width:59px}.condition{font-size:clamp(18px,4.2vw,24px)}
 .stats{gap:12px}.stat-symbol{display:none}.stats-label{font-size:10px}.stats strong{font-size:13px}.stats-unit{font-size:10px}
 .hourly-forecast{bottom:6%}.hourly-list,.hourly-item{min-height:110px}.hourly-item{padding:9px 2px 8px}
 .bottom{bottom:.7%}.foot-detail{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.fog-banks,.lightning{animation:none}}

/* v0.4 - hillityt, mutta hyvin luettavat tekstit teeman mukaan. */
:root {
  --ink-primary:#e9f0ed;
  --ink-secondary:#d5e4df;
  --ink-tertiary:#becfcb;
  --outline-ink:#dbe9e5;
  --panel-edge:rgba(218,230,224,.35);
  --moon-glow:#e9e6cd;
  --moon-shadow:#314056;
  --icon-cloud-fill:#1b3445;
}
body.phase-dawn {
  --ink-primary:#f7ebdb;--ink-secondary:#ebd7c9;--ink-tertiary:#dac8bb;
  --outline-ink:#f3e1d4;--panel-edge:rgba(241,218,200,.38);
}
body.phase-day {
  --ink-primary:#eaf2ed;--ink-secondary:#d6e5df;--ink-tertiary:#bed6ce;
  --outline-ink:#e5f0e8;--panel-edge:rgba(221,239,230,.36);
}
body.phase-dusk {
  --ink-primary:#f5e7dd;--ink-secondary:#e8d2cb;--ink-tertiary:#d8c2bd;
  --outline-ink:#f0ddd4;--panel-edge:rgba(240,212,199,.36);
}
body.phase-night {
  --ink-primary:#dfe9f4;--ink-secondary:#c8d9e9;--ink-tertiary:#afc4d9;
  --outline-ink:#d9e5f0;--panel-edge:rgba(191,216,234,.35);
  --moon-glow:#f1e8c7;
}
body.season-alkusyksy.phase-day,body.season-alkusyksy.phase-dusk {
  --ink-primary:#f2e6d8;--ink-secondary:#e9d5c2;--ink-tertiary:#dbc3ac;
}
body.season-talvi.phase-day,body.season-alkukevat.phase-day {
  --ink-primary:#f2f5f3;--ink-secondary:#dae8ed;--ink-tertiary:#cbdce1;
}
body.weather-fog {
  --ink-primary:#f4f2eb;--ink-secondary:#e0e3e0;--ink-tertiary:#d0d8d7;
}
.hero,.hourly-forecast,.foot-detail {color:var(--ink-primary)}
.hero h1,.temperature,.condition,.stats strong,.hourly-time,.hourly-temp {color:var(--ink-primary)}
.date-time,.stats-label,.stats-unit,.hourly-empty,.foot-detail {color:var(--ink-secondary)}
.stats-label,.foot-detail small {color:var(--ink-tertiary)}
.weather-icon svg,.hourly-icon svg {stroke:var(--outline-ink)}
.hourly-list {border-color:var(--panel-edge)}
.hourly-item+.hourly-item {border-color:var(--panel-edge)}
.hero h1 {text-shadow:0 3px 18px rgba(2,16,27,.36)}
/* Kuu on laskettu kuun vaihe, ei aina valkoinen täysikuu. */
.moon-disc {fill:var(--moon-shadow);stroke:none}
.moon-lit {fill:var(--moon-glow);stroke:none}
.moon-contour {fill:none;stroke:var(--outline-ink);stroke-width:1.3}
.icon-cloud {fill:var(--icon-cloud-fill);stroke:var(--outline-ink);stroke-width:2.8}
body.phase-night .orb {
  background:none!important;box-shadow:none!important;
}
body.phase-night .orb svg {width:100%;height:100%;display:block}
/* Ehtojen ollessa huonot kuuta ei näytetä taustassa, kuvakkeissa erikseen. */
body.phase-night .orb:empty {opacity:0!important}
/* Kuusymboli ei saa jäädä Easy Bistro -logon alle. */
body.phase-night .orb{top:27%;left:73%}


/* v0.4.1 – pehmeämpi teksti, luonnollisempi kuu ja hieman korostetumpi yömaisema. */
body.phase-night .picture{}
body.phase-night .readability{background:linear-gradient(180deg,rgba(1,12,28,.36),rgba(6,20,41,.16) 20%,rgba(10,28,48,.03) 43%,rgba(6,22,40,.17) 63%,rgba(3,14,30,.64) 100%)}
.scenery::before{content:'';position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;background:linear-gradient(180deg,rgba(91,120,152,0) 0%,rgba(82,109,141,.06) 25%,rgba(90,122,150,.13) 58%,rgba(13,28,49,.16) 100%);z-index:0;opacity:0}
body.phase-night .scenery::before{opacity:.9}
:root{--ink-primary:#dfe6e6;--ink-secondary:#c5d2d1;--ink-tertiary:#b0c0be;--outline-ink:#cfdcda;--panel-edge:rgba(201,214,209,.24);--moon-glow:#ece2ba;--moon-shadow:#314056;--icon-cloud-fill:#1b3445}
body.phase-dawn{--ink-primary:#ecdfd2;--ink-secondary:#ddc9bc;--ink-tertiary:#cdb9ac;--outline-ink:#ead8cb;--panel-edge:rgba(220,197,181,.25)}
body.phase-day{--ink-primary:#dde6e1;--ink-secondary:#c7d6d0;--ink-tertiary:#b3c6bf;--outline-ink:#d8e3dd;--panel-edge:rgba(200,214,207,.25)}
body.phase-dusk{--ink-primary:#ebddd2;--ink-secondary:#dcc6bc;--ink-tertiary:#cdb4ad;--outline-ink:#e7d4ca;--panel-edge:rgba(219,194,183,.25)}
body.phase-night{--ink-primary:#d2deec;--ink-secondary:#bccddf;--ink-tertiary:#a7bad0;--outline-ink:#c8d6e2;--panel-edge:rgba(177,197,216,.23);--moon-glow:#f0e4b5}
body.weather-fog{--ink-primary:#edeae2;--ink-secondary:#d7d8d3;--ink-tertiary:#c3cbc8}
.hero h1,.temperature,.condition,.stats strong,.hourly-time,.hourly-temp,.hourly-heading{color:var(--ink-primary)}
.date-time,.stats-label,.stats-unit,.hourly-empty,.foot-detail,.hourly-item{color:var(--ink-secondary)}
.stats-label,.foot-detail small{color:var(--ink-tertiary)}
.hero h1{color:var(--ink-primary);text-shadow:0 3px 16px rgba(3,12,22,.18)}
.date-time,#date,#clock,.condition,.stats,.hourly-heading,.hourly-list,.foot-detail{}
.condition{opacity:.96}.stats{border-top-color:rgba(255,255,255,.17)}
.glass-card{border-color:rgba(255,255,255,.16);background:linear-gradient(155deg,rgba(16,43,64,.17),rgba(15,36,58,.12))}
.hourly-heading{opacity:.82;letter-spacing:.16em;margin-bottom:10px}
.hourly-list{background:linear-gradient(130deg,rgba(17,43,71,.58),rgba(37,71,97,.45));border-color:rgba(255,255,255,.19);box-shadow:0 12px 48px rgba(5,20,46,.22)}
.hourly-item{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.hourly-item+.hourly-item{border-left-color:rgba(255,255,255,.13)}
.hourly-time{opacity:.84;font-weight:580}.hourly-temp{opacity:.92}.hourly-icon svg{stroke:var(--outline-ink);opacity:.88;}
.foot-detail small,.foot-detail a{opacity:.74}
.moon-lit{fill:var(--moon-glow);stroke:none;}
.moon-sky{fill:var(--moon-glow);stroke:none;}
.moon-softglow{fill:rgba(239,232,193,.16);stroke:none;}
.moon-newhint{fill:rgba(239,232,193,.12);stroke:none;}
.moon-disc,.moon-contour{display:none}
body.phase-night .orb{top:25%;left:74%;opacity:.72;height:clamp(48px,8vw,78px);}
body.phase-night .orb svg{overflow:visible}

/* v0.4.2: yhdenmukaisen sääjakson koonti, tähtiyökuvakkeet, ylimääräinen lasitausta pois. */
.glass-card{background:none!important;border:0!important;box-shadow:none!important;}
.hourly-summary[hidden]{display:none!important}
.hourly-summary{position:relative;z-index:2;text-align:center;font-size:clamp(13px,1.6vw,21px);font-weight:600;letter-spacing:.04em;color:var(--ink-secondary);text-shadow:0 1px 8px rgba(2,13,29,.25);margin-bottom:10px}
.hourly-list.is-uniform{align-items:stretch}
.hourly-list.is-uniform .hourly-item{justify-content:space-evenly;gap:12px}
.hourly-list.is-uniform .hourly-time{font-size:clamp(15px,2vw,25px);opacity:.84}
.hourly-list.is-uniform .hourly-temp{font-size:clamp(23px,3vw,37px)}
.hourly-star{fill:none;stroke:var(--outline-ink);stroke-width:2.3;stroke-linecap:round;opacity:.83}
.hourly-star-dot{fill:var(--outline-ink);stroke:none}
@media(max-width:520px){.hourly-summary{font-size:12px;margin-bottom:7px}.hourly-list.is-uniform .hourly-temp{font-size:19px}}


/* 1.1.0 PRODUCTION SEASONAL SCENERY — seasonal color separation, genuinely clear air and trees. */
/* 100% static scenery and 4 composited SVG groups; no SVG animation on the server. */
.wind-trees{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.wind-tree{transform-box:view-box;will-change:transform}
body.wind-breeze .wind-tree{animation:tree-sway 7.8s ease-in-out infinite;animation-delay:var(--delay)}
body.wind-gust .wind-tree{animation-duration:4.1s;animation-timing-function:ease-in-out}
@keyframes tree-sway{
  0%,100%{transform:rotate(calc(-1.6deg * var(--sway-factor,1)))}
  31%{transform:rotate(calc(2.1deg * var(--sway-factor,1)))}
  58%{transform:rotate(calc(-.6deg * var(--sway-factor,1)))}
  84%{transform:rotate(calc(3deg * var(--sway-factor,1)))}
}
/* Haze is not atmospheric background color: reserve it for ACTUAL fog. */
.haze{opacity:0!important}
body.weather-fog .haze{opacity:1!important;background:linear-gradient(180deg,transparent,rgba(236,244,241,.26),rgba(231,241,240,.21),transparent)}
body.phase-day.weather-clear .picture{}
body.phase-day.weather-clear .readability{background:linear-gradient(180deg,rgba(3,23,43,.34) 0%,rgba(3,28,48,.13) 19%,transparent 48%,rgba(7,31,35,.07) 70%,rgba(5,24,32,.58) 100%)}
body.phase-day.weather-clear .light-filter{background:transparent}
body.phase-day.weather-clear .weather-filter{background:transparent}
body.phase-day.weather-clear .orb{background:#fff4be;opacity:1;box-shadow:0 0 54px 14px rgba(255,241,174,.47),0 0 140px 42px rgba(255,241,174,.17)}
body.phase-day.weather-partly_cloudy .picture{}
body.phase-day.weather-wind .picture{}
/* Only actually overcast / wet weather should desaturate the view. */
body.phase-day.weather-cloudy .weather-filter{background:rgba(35,48,63,.12)}
body.phase-day.weather-rain .weather-filter,body.phase-day.weather-thunder .weather-filter{background:rgba(23,47,72,.30)}
body.phase-day.weather-fog .weather-filter{background:linear-gradient(rgba(235,244,243,.26),rgba(219,229,231,.38))}
/* Ruska is vivid even when clear, but autumn without leaves stays muted. */
body.season-alkusyksy.phase-day.weather-clear .picture{}
body.season-talvi.phase-day.weather-clear .picture{}
@media(prefers-reduced-motion:reduce){.wind-tree{animation:none!important;will-change:auto}}

/* 1.3.0: lighting and soft edges are exported into PNGs at build time.
   Only small transparent images move; no filtered full-screen GPU surfaces. */
.display{height:100vh;height:100dvh}
.scenery{z-index:0;overflow:hidden}.scenery::before,.scenery::after{display:none!important}
.hero,.hourly-forecast,.bottom{z-index:5}.topbar{z-index:6}
.wind-trees{inset:auto;left:50%;top:50%;width:max(100vw,56.25vh);height:max(100vh,177.7778vw);transform:translate(-50%,-50%);z-index:1}
@supports(height:100dvh){.wind-trees{width:max(100vw,56.25dvh);height:max(100dvh,177.7778vw)}}
.wind-tree{position:absolute;display:block;transform-box:border-box;will-change:auto}
body.wind-breeze .wind-tree{will-change:transform}
.clouds{z-index:2}.clouds i{background:none;border-radius:0}
.clouds img{position:absolute;max-width:none;display:block}
.fog-banks{background:none;z-index:3}.fog-banks img{width:100%;height:100%;object-fit:cover}
.orb,.phase-dawn .orb,.phase-dusk .orb,.phase-night .orb{background:none!important;box-shadow:none!important}
.orb img{position:absolute;width:480%;height:480%;left:-190%;top:-190%;max-width:none}
body.weather-snow .particle{box-shadow:none}
body[data-postal-intro] .glass-card,
body[data-postal-intro] .hourly-forecast,
body[data-postal-intro] .scenery {
  visibility: hidden;
}