* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  :root { --place-accent:#0466a8; --place-accent-light:#00b4d8; --place-accent-dark:#023e7d; }
  html,body { height:100%; margin:0; padding:0; }
  body {
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    color:#fff; overflow:hidden; min-height:100dvh;
    background:radial-gradient(circle at 50% -10%, #1b2c3f, #0a1019);
    display:flex; align-items:center; justify-content:center;
  }
  .app {
    width:100%; max-width:480px; height:100dvh; display:flex; flex-direction:column;
    padding:calc(14px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom));
    gap:10px; position:relative; overflow:hidden; isolation:isolate;
    transition:background 0.18s linear;
  }
  .app {
    background:linear-gradient(160deg,#00b4d8 0%,#0466a8 55%,#023e7d 100%);
  }
  .app.bg-slow { transition:background 1.0s ease !important; }
  .app[data-age="adult"][data-tod="dawn"]  { background:linear-gradient(160deg,#ffb088 0%,#ff7d6b 45%,#7c5fb8 100%); }
  .app[data-age="adult"][data-tod="day"]   { background:linear-gradient(160deg,#00b4d8 0%,#0466a8 55%,#023e7d 100%); }
  .app[data-age="adult"][data-tod="dusk"]  { background:linear-gradient(160deg,#ff8c66 0%,#c25688 50%,#5a3a8a 100%); }
  .app[data-age="adult"][data-tod="night"] { background:linear-gradient(160deg,#1a2847 0%,#0d1530 55%,#05080f 100%); }
  .app[data-age="child"][data-tod="dawn"]  { background:linear-gradient(160deg,#ffb88c 0%,#ff7d8a 50%,#b85a8f 100%); }
  .app[data-age="child"][data-tod="day"]   { background:linear-gradient(160deg,#ff9e00 0%,#ff5d73 55%,#e02f6b 100%); }
  .app[data-age="child"][data-tod="dusk"]  { background:linear-gradient(160deg,#ff7d4f 0%,#d94670 50%,#6a3a7a 100%); }
  .app[data-age="child"][data-tod="night"] { background:linear-gradient(160deg,#3a1a3f 0%,#1f0d2a 55%,#0a0515 100%); }
  .app[data-age="baby"][data-tod="dawn"]   { background:linear-gradient(160deg,#ffc4d0 0%,#c08cff 50%,#7d6cd6 100%); }
  .app[data-age="baby"][data-tod="day"]    { background:linear-gradient(160deg,#8e8bff 0%,#c08cff 50%,#ff8fc8 100%); }
  .app[data-age="baby"][data-tod="dusk"]   { background:linear-gradient(160deg,#9d7bff 0%,#a05cc8 50%,#ff8fa3 100%); }
  .app[data-age="baby"][data-tod="night"]  { background:linear-gradient(160deg,#2a1f4a 0%,#1a1230 55%,#0a0518 100%); }
  /* Eilen ja huominen: omat värimaailmat (specificity-temppu [data-age]:lla) */
  .app[data-view="hours"][data-age]    { background:linear-gradient(160deg,#3a6fa5 0%,#1f3a5f 55%,#0f1e35 100%); }
  .app[data-view="tomorrow"][data-age] { background:linear-gradient(160deg,#7c6cd1 0%,#4a3a8f 55%,#1c1638 100%); }
  /* Piilota agebar ja taustakerrokset kun ei tänään-näkymässä */
  .agebar { transition:opacity .28s ease, transform .28s ease; }
  .app[data-view="hours"] .agebar,
  .app[data-view="tomorrow"] .agebar { opacity:0; pointer-events:none; transform:translateY(8px); }
  /* Lisätieto-kontrollit (temp-pilli, päivitä/jaa, paikat-väkänen) vain tänään-näkymässä */
  .agebar, .wx-mini, .actionbar, .places-cue, .acts-cue { transition:opacity .28s ease, transform .28s ease; }
  .app[data-view="hours"] .wx-mini, .app[data-view="tomorrow"] .wx-mini,
  .app[data-view="hours"] .actionbar, .app[data-view="tomorrow"] .actionbar,
  .app[data-view="hours"] .places-cue, .app[data-view="tomorrow"] .places-cue,
  .app[data-view="hours"] .acts-cue, .app[data-view="tomorrow"] .acts-cue { opacity:0; pointer-events:none; }
  .veil, .watermark { transition:opacity .35s ease; }
  .app[data-view="hours"] .veil,
  .app[data-view="tomorrow"] .veil,
  .app[data-view="hours"] .watermark,
  .app[data-view="tomorrow"] .watermark { opacity:0 !important; }
  /* DESKTOP: keskitetty puhelinleveä kortti tumman taustan päällä */
  @media (min-width:520px){
    .app { height:min(100dvh,940px); border-radius:34px; box-shadow:0 30px 90px rgba(0,0,0,.5); }
  }
  .veil { position:absolute; inset:0; z-index:-1; background:#1c2b3e; opacity:0; transition:opacity .7s ease; pointer-events:none; }
  /* aurinko-ankkuroitu tummuusverho: liukuu pehmeästi nousun/laskun ympärillä */
  .duskveil { position:absolute; inset:0; z-index:-1; background:#04060d; opacity:0; transition:opacity 1.4s ease; pointer-events:none; }
  .watermark { position:absolute; inset:0; z-index:-1; display:flex; align-items:center; justify-content:center; opacity:.12; pointer-events:none; }
  .watermark svg { width:78%; max-width:340px; filter:drop-shadow(0 10px 30px rgba(0,0,0,.2)); animation:bob 6s ease-in-out infinite; }
  @keyframes bob { 0%,100%{transform:translateY(-6px)} 50%{transform:translateY(10px)} }

  /* TOP */
  .topbar { display:flex; align-items:center; gap:8px; }
  .glass { background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); }
  .pill { color:#fff; border-radius:999px; padding:9px 15px; font-weight:700; font-size:.95rem;
    display:flex; gap:6px; align-items:center; max-width:62%; overflow:hidden; white-space:nowrap; cursor:pointer;
    text-shadow:0 1px 4px rgba(0,0,0,.35); }
  .pill:active { transform:scale(.97); }
  .pill span { overflow:hidden; text-overflow:ellipsis; }
  .icon-btn { color:#fff; width:42px; height:42px; border-radius:50%; font-size:1.15rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex:none; }
  .icon-btn.refreshing svg { animation:sp 1s linear infinite; transform-origin:center; }
  .icon-btn svg { width:18px; height:18px; }
  .wx-mini { margin-left:auto; display:flex; align-items:center; gap:7px; cursor:pointer; }
  .wx-mini:active { transform:scale(.96); }
  .wx-mini svg { width:38px; height:38px; }
  .wx-mini .t { font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.6rem; letter-spacing:-1px;
    text-shadow:0 2px 10px rgba(0,0,0,.18); }

  /* STAGE */
  /* safe center: keskittää kun mahtuu, mutta vierittyy ylhäältä (ei leikkaa) kun sisältö ylittää korkeuden */
  .stage { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:safe center; gap:5px; padding-bottom:6px; }
  .avatar { width:clamp(72px,22vw,104px); aspect-ratio:1; margin:0 auto 3px; border-radius:50%; overflow:hidden;
    background:rgba(255,255,255,.95); box-shadow:0 10px 24px rgba(0,0,0,.2); border:2px solid rgba(255,255,255,.6); }
  /* Eilis-kortin auetessa muu sisältö häivytetään paikallaan (opacity, ei korkeusmuutosta → ei pomppua) */
  .stage { position:relative; }
  .stage .avatar, .stage .headline, .stage .hint, .stage .hint-note, .stage .outfit { transition:opacity .22s ease; }
  .stage.arc-open .avatar,
  .stage.arc-open .headline,
  .stage.arc-open .hint,
  .stage.arc-open .hint-note,
  .stage.arc-open .outfit,
  .stage.arc-open .spares,
  .stage.arc-open .alerts { opacity:0; pointer-events:none; }
  .avatar svg { width:100%; height:100%; display:block; animation:pop .5s cubic-bezier(.2,.9,.3,1.25) both; }
  .stage.dense .avatar { width:clamp(58px,14vw,72px); }
  .stage.dense { gap:3px; }
  .stage.dense .outfit { gap:8px 8px; }
  @keyframes pop { from{opacity:0; transform:scale(.55)} to{opacity:1; transform:scale(1)} }
  .headline { font-family:'Bricolage Grotesque'; font-weight:800; font-size:2.05rem; line-height:1.02;
    letter-spacing:-1.2px; text-align:center; text-shadow:0 3px 16px rgba(0,0,0,.22); }
  .hint { display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:7px; padding:0 8px; margin-top:2px; }
  .hint-note { text-align:center; font-size:.82rem; font-weight:600; opacity:.72;
    margin-top:2px; margin-bottom:4px; padding:0 8px; line-height:1.35; }
  .stage.dense .info-chip { font-size:.8rem; padding:5px 10px; }
  /* INLINE PÄIVÄN KAARI -kortti (vertailutekstin alla, EI modaali) */
  .hint-note.clickable { cursor:pointer; }
  .hint-note .cmp-chev { display:inline-block; opacity:.7; margin-left:4px; font-size:.9em;
    transition:transform .3s ease; }
  .hint-note.open .cmp-chev { transform:rotate(180deg); }
  .arc-wrap { max-height:0; opacity:0; overflow:hidden; transition:opacity .25s ease; }
  /* Auki: keskitetty overlay-kortti stagen päällä (ei vie layout-tilaa → ei pomppua) */
  .arc-wrap.open { position:absolute; inset:0; z-index:3; max-height:none; opacity:1; overflow:auto;
    display:flex; align-items:safe center; justify-content:center; }
  .arc-wrap.open .arc-inner { animation:whypop .3s cubic-bezier(.2,.9,.3,1.1) both; }
  .arc-inner { background:rgba(255,255,255,.94); color:#15212e; border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.16); padding:14px; margin:8px auto 0;
    max-width:340px; width:100%; }
  .arc-yest { font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:600;
    line-height:1.45; text-align:center; }
  .arc-div { height:1px; background:rgba(21,33,46,.1); margin:13px 0; }
  .arc-grid { display:grid; gap:6px; }
  .arc-col { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
  .arc-name { font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700;
    color:#6b7a8d; letter-spacing:.3px; line-height:1.1; }
  .arc-temp { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:18px; color:#15212e; }
  /* sää-ikoni omalla "taivas"-laatallaan, jotta valkoiset pilvet erottuvat valkoisesta kortista */
  .arc-icon { width:40px; height:40px; border-radius:11px; padding:5px;
    background:linear-gradient(160deg,#8ec5f0 0%,#5e9fe0 100%);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.35); display:flex; }
  .arc-icon svg { width:100%; height:100%; }
  .stage.dense .arc-inner { padding:11px; }
  .stage.dense .arc-yest { font-size:13px; }
  .stage.dense .arc-temp { font-size:16px; }
  .stage.dense .arc-icon { width:34px; height:34px; border-radius:10px; }
  .outfit { display:grid; grid-template-columns:repeat(4,1fr); gap:10px 8px; align-content:center; }
  @media (max-width:359px) { .outfit { grid-template-columns:repeat(3,1fr); } }
  .chip { display:flex; flex-direction:column; align-items:center; gap:5px; animation:rise .5s cubic-bezier(.2,.8,.2,1) both; }
  .chip:nth-child(2){animation-delay:.04s}.chip:nth-child(3){animation-delay:.08s}.chip:nth-child(4){animation-delay:.12s}
  .chip:nth-child(5){animation-delay:.16s}.chip:nth-child(6){animation-delay:.2s}.chip:nth-child(7){animation-delay:.24s}
  .chip:nth-child(8){animation-delay:.28s}.chip:nth-child(9){animation-delay:.32s}.chip:nth-child(n+10){animation-delay:.36s}
  @keyframes rise { from{opacity:0; transform:translateY(14px) scale(.92)} to{opacity:1; transform:none} }
  .tile { width:100%; max-width:70px; aspect-ratio:1; background:rgba(255,255,255,.94); border-radius:18px;
    display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.16); }
  .tile svg { width:62%; height:62%; }
  .tile.emoji { font-size:1.8rem; }
  .lbl { font-size:.73rem; font-weight:600; text-align:center; line-height:1.12; max-width:88px;
    text-shadow:0 1px 6px rgba(0,0,0,.18);
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

  /* MUKAAN (spares) + HUOMIOT (alerts) */
  .spares { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
  .spares-label { font-size:.72rem; font-weight:700; opacity:.65;
    letter-spacing:.5px; text-transform:uppercase; text-align:center; }
  .spares-row { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  .spares-row .chip { animation:rise .4s ease both; }
  .spares-row .chip .tile { max-width:50px; opacity:0.65; box-shadow:0 4px 12px rgba(0,0,0,.10); }
  .spares-row .chip .lbl { font-size:.68rem; opacity:0.7; max-width:64px; }
  .alerts { margin-top:6px; display:flex; flex-direction:column; gap:3px;
    align-items:center; padding:0 8px; }
  .alert-line { display:flex; gap:6px; align-items:center; font-size:.8rem;
    font-weight:600; opacity:0.78; text-shadow:0 1px 4px rgba(0,0,0,.2); }
  .alert-line span:first-child { font-size:.95rem; }
  .stage.dense .spares-label { font-size:.68rem; }
  .stage.dense .spares-row .chip .tile { max-width:44px; }
  .stage.dense .alert-line { font-size:.75rem; }

  /* AGE BAR (bottom, thumb zone) */
  .agebar { display:flex; gap:6px; border-radius:999px; padding:6px; }
  .agebar button { flex:1; border:none; background:transparent; color:#fff; font-family:'Bricolage Grotesque';
    font-weight:700; font-size:1.05rem; padding:14px 6px; border-radius:999px; cursor:pointer; transition:.22s; }
  .agebar button.active { background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.18); }
  .app[data-age="adult"] .agebar button.active { color:#0466a8; }
  .app[data-age="child"] .agebar button.active { color:#e02f6b; }
  .app[data-age="baby"]  .agebar button.active { color:#7d52d6; }

  /* OVERLAY (haku) */
  .overlay { position:fixed; inset:0; z-index:10; background:rgba(10,20,35,.5);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; }
  .sheet { background:#fff; color:#15212e; border-radius:22px; padding:18px; width:100%; max-width:360px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
  .sheet h3 { margin:0 0 12px; font-family:'Bricolage Grotesque'; font-size:1.2rem; }
  .sheet input { width:100%; border:1px solid #e0e7ee; border-radius:13px; padding:13px 14px; font-size:1rem; outline:none; font-family:inherit; }
  .sheet input:focus { border-color:#00b4d8; }
  .sheet .row { display:flex; gap:8px; margin-top:10px; }
  .sheet button { flex:1; border:none; border-radius:13px; padding:13px; font-size:.98rem; font-weight:700; cursor:pointer; font-family:inherit; }
  .b-go { background:#00b4d8; color:#fff; }
  .b-gps { background:#eef3f7; color:#15212e; }
  .legal { font-size:.84rem; line-height:1.45; color:#3d4d5c; }
  .legal p { margin:0 0 9px; }
  .legal ul { margin:0 0 9px; padding-left:18px; }
  .legal li { margin-bottom:6px; }
  .legal a { color:#0096c7; }
  /* MIKSI-MODAL — keskitetty (sama .overlay/.sheet/.b-go -kieli) */
  .headline.has-why { cursor:pointer; }
  .headline.has-why::after { content:'i'; font-family:'Bricolage Grotesque',serif; font-weight:800;
    font-size:.34em; line-height:1; vertical-align:super; margin-left:.45em;
    display:inline-flex; align-items:center; justify-content:center; width:1.7em; height:1.7em;
    border-radius:50%; background:rgba(255,255,255,.22); color:#fff;
    border:1px solid rgba(255,255,255,.5); text-shadow:none;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  .headline.has-why:active::after { transform:scale(.9); }
  #whyOverlay .sheet { animation:whypop .28s cubic-bezier(.2,.9,.3,1.1) both; }
  @keyframes whypop { from{opacity:0; transform:translateY(12px) scale(.96)} to{opacity:1; transform:none} }
  .why-list { display:flex; flex-direction:column; gap:11px; margin:2px 0 14px; }
  .why-line { display:flex; gap:9px; align-items:flex-start;
    font-size:.96rem; line-height:1.45; color:#3d4d5c; }
  .why-line .ic { flex:none; font-size:1.12rem; line-height:1.3; }
  /* SLIDES (eilen / tänään / huomenna) */
  .slides { flex:1; min-height:0; display:flex; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    scrollbar-width:none; -ms-overflow-style:none; margin:0 -18px; }
  .slides::-webkit-scrollbar { display:none; }
  .slide { flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
    padding:0 18px; display:flex; flex-direction:column; min-width:0; overflow-y:auto; }
  .slide::-webkit-scrollbar { display:none; }
  .dots { display:none; gap:8px; justify-content:center; padding:6px 0 2px; }
  .dots .dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.32);
    border:none; padding:0; cursor:pointer; transition:.2s; }
  .dots .dot.active { background:#fff; width:22px; border-radius:4px; }

  /* TIME SPOTS — pienet aikapistekortit (käytetään huomenna-cardissa) */
  .time-spots { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:4px 4px 0; }
  .ts { background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.18);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-radius:14px; padding:8px 10px 9px; min-width:62px;
    display:flex; flex-direction:column; align-items:center; gap:2px; }
  .ts.now { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.36); }
  .ts-time { font-family:'Bricolage Grotesque'; font-weight:800; font-size:.82rem; opacity:.9; letter-spacing:.3px; }
  .ts-icon { width:36px; height:36px; margin:1px 0; }
  .ts-icon svg { width:100%; height:100%; }
  .ts-temp { font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.15rem; letter-spacing:-.5px; }
  .ts-pop { font-size:.7rem; color:#9bd0ff; font-weight:700; min-height:.85em; }
  .ts-pop.dry { opacity:0; }

  /* HOURS CARD — vasen swipe: keskitetty nyt-hero + tulevat tunnit erikseen */
  .hours-card { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; padding:4px 4px; min-height:0; animation:rise .45s cubic-bezier(.2,.8,.2,1) both; }
  .hours-card .hc-title, .day-card .hc-title { font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.55rem;
    letter-spacing:-.6px; text-align:center; text-shadow:0 2px 12px rgba(0,0,0,.2); }
  .hours-card .hc-sub, .day-card .hc-sub { text-align:center; font-size:.85rem; opacity:.78; font-weight:700;
    letter-spacing:.3px; text-transform:uppercase; }

  /* NYT-hero */
  .hc-now { display:flex; flex-direction:column; align-items:center; gap:2px; }
  .hc-now .hcn-icon { width:82px; height:82px; }
  .hc-now .hcn-icon svg { width:100%; height:100%; }
  .hc-now .hcn-temp { font-family:'Bricolage Grotesque'; font-weight:800; font-size:3.4rem; line-height:.95;
    letter-spacing:-2px; text-shadow:0 3px 18px rgba(0,0,0,.22); }
  .hc-now .hcn-temp .hcn-min { font-size:1.6rem; font-weight:700; opacity:.7; margin-left:10px; letter-spacing:-.5px; }
  .hc-now .hcn-feels { font-size:.95rem; opacity:.78; font-weight:600; }
  .hc-now .hcn-desc { font-size:1.05rem; font-weight:700; margin-top:2px; text-align:center; }
  .hc-now .hcn-chips { display:flex; gap:7px; margin-top:6px; flex-wrap:wrap; justify-content:center; }

  /* YHTENÄINEN INFOPILLI — sama joka näkymässä (juuri nyt / huomenna / etusivu) */
  .info-chip { display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    font-size:.85rem; font-weight:700;
    background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 12px;
    -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); }

  /* tulevat tunnit -nauha */
  .hours-strip { display:flex; gap:6px; width:100%; overflow-x:auto; padding:2px 2px 4px; justify-content:center;
    scrollbar-width:none; -ms-overflow-style:none; }
  .hours-strip::-webkit-scrollbar { display:none; }
  .hc-col { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:47px;
    background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.22); border-radius:14px; padding:8px 5px;
    -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); }
  .hc-col .hcc-time { font-family:'Bricolage Grotesque'; font-weight:800; font-size:.85rem; letter-spacing:.2px; }
  .hc-col .hcc-icon { width:34px; height:34px; }
  .hc-col .hcc-icon svg { width:100%; height:100%; }
  .hc-col .hcc-temp { font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.15rem; letter-spacing:-.5px; }
  .hc-col .hcc-pop { font-size:.72rem; font-weight:700; color:#9bd0ff; min-height:.9em; }
  .hc-col .hcc-pop.dry { opacity:0; }

  /* DAY CARD (huomenna) */
  .day-card { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:4px 4px; }
  .day-card .dc-label { font-family:'Bricolage Grotesque'; font-weight:700; font-size:.95rem;
    letter-spacing:.5px; text-transform:uppercase; opacity:.85; }
  .day-card .dc-date { font-size:.82rem; opacity:.75; font-weight:600; margin-top:-4px; }
  .day-card .dc-icon { width:clamp(96px,28vw,128px); height:clamp(96px,28vw,128px); margin:2px 0; }
  .day-card .dc-icon svg { width:100%; height:100%; }
  .day-card .dc-desc { font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.5rem; letter-spacing:-.5px; text-align:center; }
  .day-card .dc-temps { display:flex; gap:14px; align-items:baseline; margin-top:2px; }
  .day-card .dc-tmax { font-family:'Bricolage Grotesque'; font-weight:800; font-size:2.4rem; line-height:1; color:#fff; }
  .day-card .dc-tmin { font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.3rem; opacity:.75; }
  .day-card .dc-compare { background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-radius:14px; padding:8px 13px; font-weight:700; font-size:.92rem; text-align:center;
    box-shadow:0 4px 14px rgba(0,0,0,.12); max-width:280px; }
  .day-card .dc-stats { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:0 8px; }
  .day-card .dc-stat { background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.18);
    border-radius:12px; padding:7px 12px; font-size:.82rem; font-weight:700;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .day-card .dc-stat span { opacity:.7; font-weight:600; margin-right:4px; }
  .day-card .dc-tip { font-size:.92rem; font-weight:600; opacity:.95; text-align:center; padding:4px 12px; }

  /* LYHYET RUUDUT (puhelin, jossa selainpalkki + turva-alueet) — tiivistä jotta kaikki mahtuu ilman skrollia */
  @media (max-height:720px){
    .hours-card, .day-card { gap:5px; }
    .hours-card .hc-title, .day-card .hc-title { font-size:1.3rem; }
    .hours-card .hc-sub, .day-card .hc-sub { font-size:.75rem; }
    .hc-now { gap:1px; }
    .hc-now .hcn-icon { width:62px; height:62px; }
    .hc-now .hcn-temp { font-size:2.7rem; }
    .hc-now .hcn-desc { font-size:.95rem; }
    .hc-now .hcn-chips { margin-top:4px; gap:6px; }
    .info-chip { font-size:.8rem; padding:5px 10px; }
    .day-card .dc-compare { padding:6px 11px; font-size:.84rem; }
    .hc-col .hcc-icon { width:28px; height:28px; }
    .hc-col { padding:7px 5px; }
    .headline { font-size:1.85rem; }
    .avatar { width:clamp(56px,16vw,82px); margin-bottom:0; }
    .stage { gap:3px; }
    .outfit { gap:8px 6px; }
    .tile { max-width:64px; }
  }

  .status { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; font-weight:600; }
  .status .btn { border:none; background:#fff; color:#0466a8; font-weight:700; padding:13px 22px; border-radius:14px; cursor:pointer; font-family:inherit; }
  .hidden { display:none !important; }
  .share-toast {
    position:fixed; left:50%; bottom:calc(110px + env(safe-area-inset-bottom));
    transform:translateX(-50%); background:rgba(0,0,0,.82); color:#fff;
    padding:10px 18px; border-radius:999px; font-size:.9rem; font-weight:600;
    z-index:20; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .share-toast.show { opacity:1; transform:translateX(-50%) translateY(-6px); }
  .install-hint { display:none; align-items:center; gap:10px;
    background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.18);
    border-radius:14px; padding:9px 12px; font-size:.85rem; font-weight:600;
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    animation:slidein .35s ease-out; color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.3); }
  .install-hint.show { display:flex; }
  .install-hint .txt { flex:1; line-height:1.3; }
  .install-hint .close { background:none; border:none; color:#fff; font-size:1.2rem;
    cursor:pointer; padding:2px 8px; opacity:.65; }
  .install-hint .close:active { opacity:1; transform:scale(.92); }
  @keyframes slidein { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
  .spin { display:inline-block; animation:sp 1s linear infinite; font-size:1.6rem; }
  @keyframes sp { to { transform:rotate(360deg); } }

  /* TEST GRID */
  .testview { position:fixed; inset:0; background:#0a1019; color:#fff; padding:14px; overflow:auto; z-index:9999;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:.78rem; }
  .testview h2 { font-family:'Bricolage Grotesque'; margin:0 0 10px; }
  .testview .controls { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
  .testview .controls button { background:#1f3a5f; color:#fff; border:none; border-radius:8px; padding:6px 10px; cursor:pointer; font-weight:700; }
  .testview .controls button.active { background:#00b4d8; }
  .testview table { border-collapse:collapse; width:100%; }
  .testview th, .testview td { border:1px solid #2a3a4f; padding:6px 8px; text-align:left; vertical-align:top; }
  .testview th { background:#15212e; font-weight:700; position:sticky; top:0; }
  .testview .hl { color:#ffd166; font-weight:700; }
  .testview .items { opacity:.85; font-size:.72rem; }

  /* PLACE-TINT — siirtää pohjagradientin SÄVYÄ sijainnin mukaan. mix-blend-mode:color säilyttää
     alustan kirkkauden (= kellonajan tummuus) ja muuttaa vain väriä. Ei uusia selektorikombinaatioita. */
  .place-tint { position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(160deg, var(--place-accent-light), var(--place-accent));
    mix-blend-mode:color; opacity:.6;
    transition:background 1.2s ease, opacity 1.2s ease; }

  /* PÄÄRUUTU pystypagerin sisällä — liukuu alas kun paikat avataan */
  .main-page { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px;
    position:relative; transition:transform .35s ease; }
  .app.places-open .main-page { transform:translateY(100%); }

  /* yläreunan diskreetti vihje: ylempänä on lisää sisältöä */
  .places-cue { display:flex; align-items:center; justify-content:center; height:14px; margin-bottom:-4px;
    opacity:.6; cursor:pointer; flex:none; }
  .places-cue svg { width:28px; height:10px; }
  .places-cue:active { opacity:1; transform:translateY(1px); }

  /* PÄÄRUUDUN toimintorivi (päivitä/jaa) paikkatiedon alapuolella */
  .actionbar { display:flex; gap:8px; justify-content:flex-start; flex:none; }
  .actionbar .icon-btn { width:36px; height:36px; }
  .actionbar .icon-btn svg { width:16px; height:16px; }

  /* PAIKAT-NÄKYMÄ — pääruudun yläpuolella, liukuu alaspäin näkyviin; sisältö keskitetty */
  .places { position:absolute; inset:0; z-index:6; transform:translateY(-100%);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; overflow-y:auto;
    padding:calc(16px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
    background:linear-gradient(160deg, var(--place-accent-light) 0%, var(--place-accent) 55%, var(--place-accent-dark) 100%);
    transition:transform .35s ease, background 1.2s ease; }
  .app.places-open .places { transform:translateY(0); }
  .places-head { width:100%; max-width:360px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .places-head .icon-btn { width:38px; height:38px; font-size:1.05rem; }
  .places-title { font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.4rem; letter-spacing:-.5px;
    text-shadow:0 2px 10px rgba(0,0,0,.2); }
  .places-list { display:flex; flex-direction:column; gap:10px; width:100%; max-width:360px; }
  .place-card { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.94); color:#15212e;
    border-radius:18px; box-shadow:0 8px 20px rgba(0,0,0,.16); padding:14px; cursor:pointer;
    border-left:4px solid transparent; transition:transform .15s ease; }
  .place-card:active { transform:scale(.98); }
  .place-card.active { border-left-color:var(--place-accent); }
  .pc-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .pc-name { font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.25rem; letter-spacing:-.4px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pc-temp { font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.05rem; color:#5b6b7d; min-height:1.1em; }
  .pc-icon { width:42px; height:42px; flex:none; }
  .pc-icon svg { width:100%; height:100%; }
  .pc-del { flex:none; border:none; background:rgba(21,33,46,.07); color:#5b6b7d; width:32px; height:32px;
    border-radius:50%; font-size:.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .pc-del:active { transform:scale(.9); }
  .place-add { border:2px dashed rgba(255,255,255,.5); background:transparent; color:#fff;
    font-family:'Bricolage Grotesque'; font-weight:700; font-size:1.05rem; padding:14px; border-radius:18px;
    cursor:pointer; text-shadow:0 1px 6px rgba(0,0,0,.2); transition:transform .15s ease, background .2s ease; }
  .place-add:active { transform:scale(.98); background:rgba(255,255,255,.08); }
  .places-empty { display:flex; flex-direction:column; align-items:center; gap:12px; padding:30px 10px; text-align:center; }
  .places-empty .pe-icon { font-size:2.4rem; opacity:.8; }
  .places-empty .pe-text { font-weight:600; opacity:.85; }
  .gps-hint { text-align:center; font-size:.82rem; font-weight:600; opacity:.7; margin-top:-4px; padding:0 12px; }

  /* alareunan diskreetti vihje: alempana on lisää sisältöä (symmetrinen places-cuen kanssa) */
  .acts-cue { display:flex; align-items:center; justify-content:center; height:14px; margin-top:2px;
    opacity:.6; cursor:pointer; flex:none; }
  .acts-cue svg { width:28px; height:10px; }
  .acts-cue:active { opacity:1; transform:translateY(-1px); }

  /* takaisin-chevronit aktiviteetit/paikat-näkymissä */
  .acts-back-cue, .places-back-cue {
    display:flex; align-items:center; justify-content:center;
    height:14px; opacity:.6; cursor:pointer; flex:none; width:100%; max-width:360px;
  }
  .acts-back-cue { margin-bottom:-2px; }
  .places-back-cue { margin-top:2px; }
  .acts-back-cue svg, .places-back-cue svg { width:28px; height:10px; }
  .acts-back-cue:active, .places-back-cue:active { opacity:1; }
  .acts-back-cue:active { transform:translateY(1px); }
  .places-back-cue:active { transform:translateY(-1px); }

  /* first-time swipe-hint — koreografioitu, sekvensoitu */
  @keyframes dotsHintFirst {
    0%   { width:7px; opacity:.32; box-shadow:none; }
    8%   { width:16px; opacity:1; box-shadow:0 0 14px rgba(255,255,255,.7); }
    16%  { width:7px; opacity:.32; box-shadow:none; }
    50%  { width:16px; opacity:1; box-shadow:0 0 14px rgba(255,255,255,.7); }
    58%  { width:7px; opacity:.32; box-shadow:none; }
    100% { width:7px; opacity:.32; box-shadow:none; }
  }
  @keyframes dotsHintThird {
    0%   { width:7px; opacity:.32; box-shadow:none; }
    16%  { width:7px; opacity:.32; box-shadow:none; }
    20%  { width:16px; opacity:1; box-shadow:0 0 14px rgba(255,255,255,.7); }
    28%  { width:7px; opacity:.32; box-shadow:none; }
    62%  { width:16px; opacity:1; box-shadow:0 0 14px rgba(255,255,255,.7); }
    70%  { width:7px; opacity:.32; box-shadow:none; }
    100% { width:7px; opacity:.32; box-shadow:none; }
  }
  @keyframes cueHintTop {
    0%   { opacity:.6; transform:translateY(0); filter:drop-shadow(0 0 0 transparent); }
    28%  { opacity:.6; transform:translateY(0); filter:drop-shadow(0 0 0 transparent); }
    34%  { opacity:1; transform:translateY(8px); filter:drop-shadow(0 0 10px rgba(255,255,255,.7)); }
    42%  { opacity:.6; transform:translateY(0); filter:drop-shadow(0 0 0 transparent); }
    76%  { opacity:1; transform:translateY(8px); filter:drop-shadow(0 0 10px rgba(255,255,255,.7)); }
    84%  { opacity:.6; transform:translateY(0); filter:drop-shadow(0 0 0 transparent); }
    100% { opacity:.6; transform:translateY(0); filter:drop-shadow(0 0 0 transparent); }
  }
  @keyframes cueHintBottom {
    0%   { opacity:.6; transform:translateY(0); filter:drop-shadow(0 0 0 transparent); }
    42%  { opacity:.6; transform:translateY(0); filter:drop-shadow(0 0 0 transparent); }
    48%  { opacity:1; transform:translateY(-8px); filter:drop-shadow(0 0 10px rgba(255,255,255,.7)); }
    56%  { opacity:.6; transform:translateY(0); filter:drop-shadow(0 0 0 transparent); }
    88%  { opacity:1; transform:translateY(-8px); filter:drop-shadow(0 0 10px rgba(255,255,255,.7)); }
    96%  { opacity:.6; transform:translateY(0); filter:drop-shadow(0 0 0 transparent); }
    100% { opacity:.6; transform:translateY(0); filter:drop-shadow(0 0 0 transparent); }
  }
  .swipe-hint .dots .dot:not(.active):nth-child(1) { animation:dotsHintFirst 4.5s ease forwards; }
  .swipe-hint .dots .dot:not(.active):nth-child(3) { animation:dotsHintThird 4.5s ease forwards; }
  .swipe-hint .places-cue { animation:cueHintTop 4.5s ease forwards; }
  .swipe-hint .acts-cue { animation:cueHintBottom 4.5s ease forwards; }

  .app.activities-open .main-page { transform:translateY(-100%); }

  /* AKTIVITEETIT-NÄKYMÄ — pääruudun alapuolella, liukuu ylöspäin näkyviin */
  .activities { position:absolute; inset:0; z-index:6; transform:translateY(100%);
    display:flex; flex-direction:column; align-items:center; justify-content:safe center; gap:12px; overflow-y:auto;
    padding:calc(16px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
    background:linear-gradient(160deg, var(--place-accent-light) 0%, var(--place-accent) 55%, var(--place-accent-dark) 100%);
    transition:transform .35s ease, background 1.2s ease; }
  .app.activities-open .activities { transform:translateY(0); }
  .acts-head { width:100%; max-width:360px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .acts-head .icon-btn { width:38px; height:38px; font-size:1.2rem; }
  .acts-title { font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.4rem; letter-spacing:-.5px;
    text-shadow:0 2px 10px rgba(0,0,0,.2); }
  .acts-sub { width:100%; max-width:360px; font-family:'Bricolage Grotesque'; font-weight:700;
    font-size:1rem; opacity:.8; margin-top:-4px; text-shadow:0 1px 6px rgba(0,0,0,.2); }
  .acts-list { display:flex; flex-direction:column; gap:10px; width:100%; max-width:360px; }
  /* TOP 3 — isommat kortit, ei status-merkkiä */
  .act-card.big { padding:16px; }
  .act-card.big .act-emoji { font-size:2.5rem; width:48px; }
  .act-card.big .act-name { font-size:1.2rem; }
  .act-card.big .act-reason { font-size:.9rem; }
  /* footer: huomio-rivi + näytä kaikki */
  .acts-foot { width:100%; max-width:360px; margin-top:6px; padding-top:12px;
    border-top:1px solid rgba(255,255,255,.2); display:flex; flex-direction:column; gap:8px; }
  .acts-note { display:flex; gap:8px; align-items:flex-start; font-size:.88rem; font-weight:600;
    opacity:.85; line-height:1.35; text-shadow:0 1px 6px rgba(0,0,0,.18); }
  .acts-note span:first-child { flex:none; }
  .acts-showall { align-self:center; background:none; border:none; color:#fff;
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.9rem; opacity:.82;
    cursor:pointer; padding:6px 12px; text-shadow:0 1px 6px rgba(0,0,0,.2); }
  .acts-showall:active { transform:scale(.97); opacity:1; }
  /* "Muita vaihtoehtoja" -erotin */
  .acts-divider { width:100%; max-width:360px; display:flex; align-items:center; gap:10px;
    margin:12px 0 2px; opacity:.6; }
  .acts-divider::before, .acts-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.3); }
  .acts-divider span { font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.78rem;
    text-shadow:0 1px 6px rgba(0,0,0,.2); }
  /* MUUT AKTIVITEETIT — emoji-rivi, tap → inline-laajennus */
  .emoji-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:100%; max-width:360px; }
  .emoji-cell { position:relative; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.94); color:#15212e; border:none; border-radius:13px; padding:9px 11px;
    box-shadow:0 6px 16px rgba(0,0,0,.14); cursor:pointer; font-family:inherit; transition:transform .15s ease; }
  .emoji-cell:active { transform:scale(.95); }
  .ec-emoji { font-size:1.7rem; line-height:1; }
  .gc-star { position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:#FFD166;
    box-shadow:0 0 0 2px rgba(255,209,102,.3); }
  .emoji-cell.active { box-shadow:0 0 0 2px var(--place-accent), 0 6px 16px rgba(0,0,0,.18); }
  /* yhteinen detail-palkki rivin alla — ei reflow-hyppyä, vain palkki animoituu */
  .ec-detailbar { width:100%; max-width:360px; max-height:0; opacity:0; overflow:hidden; padding:0 13px;
    background:rgba(255,255,255,.94); color:#15212e; border-radius:13px; box-shadow:0 6px 16px rgba(0,0,0,.14);
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.88rem; white-space:nowrap;
    text-overflow:ellipsis; transition:max-height .28s ease, opacity .28s ease, padding .28s ease, margin .28s ease; }
  .ec-detailbar.open { max-height:54px; opacity:1; padding:11px 13px; margin-top:2px; }
  .ec-detailbar span { transition:opacity .15s ease; }
  .acts-cat { width:100%; max-width:360px; font-family:'Bricolage Grotesque'; font-weight:700;
    font-size:.9rem; letter-spacing:.6px; text-transform:uppercase; opacity:.7;
    text-shadow:0 1px 6px rgba(0,0,0,.2); margin:6px 2px -2px; }
  .acts-cat:first-child { margin-top:0; }
  .act-card { background:rgba(255,255,255,.94); color:#15212e; border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.16); padding:13px; cursor:pointer; transition:transform .15s ease;
    border-left:4px solid transparent; }
  .act-card.great { border-left-color:#ffc83d; }
  .act-card:active { transform:scale(.98); }
  .act-row { display:flex; align-items:center; gap:13px; }
  .act-emoji { font-size:2rem; line-height:1; flex:none; width:40px; text-align:center; }
  .act-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .act-name { font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.12rem; letter-spacing:-.3px; }
  .act-reason { font-size:.82rem; font-weight:600; color:#5b6b7d; opacity:.85; line-height:1.3; }
  .act-status { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
  .act-status .as-emoji { font-size:1.35rem; line-height:1; }
  .act-status .as-word { font-size:.66rem; font-weight:700; color:#6b7a8d; letter-spacing:.2px; }
  .act-tips { max-height:0; opacity:0; overflow:hidden; transition:max-height .35s ease, opacity .35s ease, margin .35s ease; }
  .act-card.open .act-tips { max-height:200px; opacity:1; margin-top:11px; }
  .act-tips .at-div { height:1px; background:rgba(21,33,46,.1); margin-bottom:10px; }
  .act-tip { display:flex; gap:8px; align-items:flex-start; font-size:.86rem; font-weight:600;
    color:#3d4d5c; line-height:1.4; margin-bottom:6px; }
  .act-tip:last-child { margin-bottom:0; }
  .act-tip .at-dot { color:var(--place-accent); flex:none; }
  .acts-empty { padding:30px 10px; text-align:center; font-weight:600; opacity:.85; }