/* ═══════════════════════════════════════════════
   MOURIES WEATHER — TV Broadcast Style
   ═══════════════════════════════════════════════ */

:root {
  --bg:        #c9504d;
  --bg2:       #b8453f;
  --surface:   #1e1e1e;
  --surface2:  #2a2a2a;
  --border:    rgba(255,255,255,0.10);
  --border2:   rgba(255,255,255,0.18);

  --text:      #f0f4ff;
  --muted:     #d4c8d8;
  --faint:     #9a88a2;
  --gold:      #e8c84a;
  --gold-dim:  rgba(232,200,74,0.15);
  --brand:     #c9504d;
  --brand-dim: rgba(193,82,79,0.12);
  --red-live:  #ef4444;

  --ff-h: 'Roboto Condensed', 'Barlow Condensed', 'Impact', sans-serif;
  --ff-b: 'Barlow', 'Helvetica Neue', sans-serif;

  --t-xs:   1.1rem;
  --t-sm:   1.25rem;
  --t-base: 1.45rem;
  --t-lg:   1.75rem;
  --t-xl:   2.2rem;
  --t-2xl:  3rem;
  --t-hero: 6rem;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.25rem; --s6:1.5rem; --s8:2rem; --s10:2.5rem;
  --s12:3rem; --s16:4rem;

  --r-sm:.375rem; --r-md:.75rem; --r-lg:1.25rem; --r-full:9999px;
  --tr: 220ms cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{
  font-family:var(--ff-b);
  background: #c9504d;
  color:var(--text);
  min-height:100dvh;
  overflow-x:hidden;
  max-width:100vw;
}
a{color:var(--gold);}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}

/* ── Canvas ── */
#skyCanvas{
  position:fixed;inset:0;
  width:100%;height:100%;
  pointer-events:none;z-index:0;
}

/* ── App ── */
.app{
  position:relative;z-index:1;
  max-width:680px;
  width:100%;
  margin:0 auto;
  padding:0 var(--s4) var(--s16);
  box-sizing:border-box;
  overflow-x:hidden;
}

/* ═══ TOPBAR ═══ */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s5);
  margin:var(--s4) 0 0;
  background:rgba(10,6,9,0.92);
  border-radius:var(--r-lg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  gap:var(--s3);
}
.topbar-left{display:flex;align-items:center;gap:var(--s3);min-width:0;flex:1;}

/* ═══ TICKER ═══ */
.ticker-wrap{
  display:flex;align-items:center;
  background:rgba(10,6,9,0.85);
  border-radius:var(--r-lg);
  overflow:hidden;
  height:44px;
  margin:var(--s3) 0 0;
  border:1px solid rgba(255,255,255,.07);
}
.ticker-label{
  flex-shrink:0;
  padding:0 14px;
  color:var(--gold);
  border-right:1px solid rgba(255,255,255,.12);
  height:100%;
  display:flex;align-items:center;
  animation:pulseDot 1.4s ease-in-out infinite;
}
.ticker-track{
  flex:1;
  overflow:hidden;
  position:relative;
  height:100%;
  display:flex;align-items:center;
}
.ticker-text{
  display:inline-block;
  white-space:nowrap;
  font-family:var(--ff-h);
  font-size:1.22rem;
  font-weight:700;
  letter-spacing:.04em;
  color:rgba(255,255,255,.9);
  padding-left:100%;
  animation:tickerScroll 28s linear infinite;
}
@keyframes tickerScroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.brand-mark{
  width:56px;height:56px;flex-shrink:0;
  border-radius:50%;
  object-fit:cover;
  /* Instagram-style gradient ring */
  border:3px solid transparent;
  background-clip:padding-box;
  outline:3px solid transparent;
  box-shadow:
    0 0 0 3px transparent,
    0 0 18px 4px rgba(201,80,77,0.85),
    0 0 38px 8px rgba(201,80,77,0.45),
    0 0 60px 12px rgba(255,120,80,0.25);
  /* Animated gradient border */
  position:relative;
}
.brand-mark-wrap{
  position:relative;
  flex-shrink:0;
  width:52px;height:52px;
  border-radius:50%;
  padding:3px;
  /* Sταθερό gradient ring — κόκκινο του logo προς χρυσό */
  background:conic-gradient(from 0deg, #c9504d, #e8c84a, #c9504d, #e8c84a, #c9504d);
  /* Glow effect σαν Instagram story */
  box-shadow:
    0 0 0 2px rgba(201,80,77,0.5),
    0 0 12px 4px rgba(201,80,77,0.8),
    0 0 28px 8px rgba(201,80,77,0.45),
    0 0 50px 14px rgba(232,200,74,0.2);
  /* Αργή περιστροφή μόνο του ring, χωρίς αλλαγή χρώματος */
  animation:ring-rotate 6s linear infinite;
}
@keyframes ring-rotate{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.brand-mark-inner{
  width:100%;height:100%;
  border-radius:50%;
  overflow:hidden;
  background:#0a0609;
  /* Counter-rotate so the logo stays still while ring spins */
  animation:ring-counter 6s linear infinite;
}
@keyframes ring-counter{
  from{transform:rotate(0deg);}
  to{transform:rotate(-360deg);}
}
.brand-mark-inner img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
}
.brand-text{min-width:0;flex:1;}
.brand-name{
  font-family:var(--ff-h);
  font-size:clamp(1.1rem, 4vw, 1.6rem);
  font-weight:900;
  letter-spacing:.06em;
  font-style:normal;
  color:#ffffff;
  display:block;line-height:1.1;
  white-space:normal;
  word-break:break-word;
}
.brand-loc{
  font-size:var(--t-xs);
  color:#ffffff;
  display:block;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-top:2px;
}
.brand-zarakas{
  font-family:'Dancing Script', cursive;
  font-size:1.1rem;
  font-weight:700;
  color:var(--brand);
  display:block;
  line-height:1.3;
  letter-spacing:.02em;
  opacity:1;
}
.topbar-right{display:flex;align-items:center;gap:var(--s3);flex-shrink:0;margin-left:var(--s3);}

.lang-btn{
  display:flex;align-items:center;gap:3px;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:var(--r-full);
  padding:8px 14px;
  font-family:var(--ff-h);
  font-size:var(--t-sm);
  font-weight:700;
  letter-spacing:.06em;
  color:#ffffff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  min-height:44px;
  transition:border-color var(--tr),background var(--tr);
}
.lang-btn:hover{border-color:var(--gold);background:var(--gold-dim);}
.lang-active{color:var(--gold);}
.lang-div{color:var(--faint);}

.music-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:50%;
  color:var(--muted);
  transition:border-color var(--tr),background var(--tr),color var(--tr);
  flex-shrink:0;
}
.music-btn:hover{border-color:var(--gold);color:var(--gold);}
.music-btn.playing{
  border-color:var(--brand);
  color:var(--brand);
  background:var(--brand-dim);
  animation:musicPulse 2s ease-in-out infinite;
}
@keyframes musicPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,80,77,.3);}
  50%{box-shadow:0 0 0 6px rgba(201,80,77,0);}
}

.live-badge{
  display:none;align-items:center;gap:var(--s2);
  background:rgba(220,38,38,.18);
  border:1px solid rgba(220,38,38,.4);
  border-radius:var(--r-full);
  padding:4px 10px;
  font-family:var(--ff-h);
  font-size:var(--t-xs);
  font-weight:800;
  letter-spacing:.1em;
  color:#f87171;
}
.live-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--red-live);
  box-shadow:0 0 6px var(--red-live);
  animation:pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;box-shadow:0 0 6px var(--red-live);}50%{opacity:.4;box-shadow:0 0 2px var(--red-live);}}

.update-time{
  font-size:var(--t-xs);color:var(--faint);
  font-family:var(--ff-h);letter-spacing:.04em;
  white-space:nowrap;display:none;
}
@media(min-width:480px){.live-badge{display:flex;}}
@media(min-width:520px){.update-time{display:block;}}

/* ═══ HERO ═══ */
.hero{
  margin:var(--s6) 0 var(--s5);
  background:var(--surface);
  border-radius:var(--r-lg);
  position:relative;
}
.hero::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.hero-inner{
  display:flex;align-items:center;
  gap:var(--s6);padding:var(--s8) var(--s8) var(--s6);
}
@media(max-width:440px){
  .hero-inner{flex-direction:column;align-items:flex-start;padding:var(--s6);}
}
.hero-left{flex-shrink:0;}
.hero-icon{
  font-size:100px;line-height:1;display:block;
  animation:iconFloat 5s ease-in-out infinite;
  filter:drop-shadow(0 0 28px rgba(245,166,35,.35));
}
/* ═══ FOG EFFECT ═══ */
.fog-effect{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:1em;
  height:.75em;
  vertical-align:middle;
}
.fog-effect span{
  display:block;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(210,220,235,.85),rgba(200,215,230,.6),transparent);
  filter:blur(1px);
}
.fog-effect span:nth-child(1){
  width:90%;margin-left:5%;
  animation:fogDrift 3.5s ease-in-out infinite;
}
.fog-effect span:nth-child(2){
  width:100%;
  animation:fogDrift 4.2s ease-in-out infinite .6s;
}
.fog-effect span:nth-child(3){
  width:75%;margin-left:12%;
  animation:fogDrift 3.8s ease-in-out infinite 1.1s;
}
.fog-freeze span{
  background:linear-gradient(90deg,transparent,rgba(190,230,255,.9),rgba(170,220,255,.65),transparent);
}
@keyframes fogDrift{
  0%,100%{ transform:translateX(-6%) scaleX(.97); opacity:.7; }
  50%{     transform:translateX( 6%) scaleX(1.03); opacity:1; }
}
/* Scale fog to container size */
.oc-icon .fog-effect    { width:100px; gap:10px; }
.oc-icon .fog-effect span { height:10px; }
.fp-icon .fog-effect,
.fdp-icon .fog-effect   { width:36px; gap:5px; }
.fp-icon .fog-effect span,
.fdp-icon .fog-effect span { height:5px; }
.st-icon .fog-effect    { width:32px; gap:4px; }
.st-icon .fog-effect span { height:4px; }
.hero-icon-wrap .fog-effect { width:64px; gap:8px; }
.hero-icon-wrap .fog-effect span { height:8px; }

@keyframes iconFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-9px) scale(1.03);}
}
.hero-right{flex:1;}
.hero-temp{
  font-family:var(--ff-h);font-size:var(--t-hero);
  font-weight:900;line-height:.92;
  color:var(--text);letter-spacing:-.01em;margin-bottom:var(--s3);
}
.hero-condition{
  font-family:var(--ff-h);font-size:var(--t-2xl);
  font-weight:700;color:var(--gold);
  letter-spacing:.02em;text-transform:uppercase;
  margin-bottom:var(--s2);line-height:1;
}
.hero-date{
  font-family:var(--ff-h);font-size:var(--t-lg);
  font-weight:800;color:#ffffff;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--s5);
  line-height:1.15;
}
.date-num{
  font-family:var(--ff-h);
  font-size:1em;
  font-weight:900;
  line-height:inherit;
  vertical-align:baseline;
  letter-spacing:inherit;
}
.hero-stats{display:flex;flex-wrap:wrap;gap:var(--s3);}
.stat-chip{
  display:flex;align-items:center;gap:var(--s2);
  background:rgba(255,255,255,.07);
  border:1px solid var(--border2);
  border-radius:var(--r-full);
  padding:var(--s2) var(--s4);
  font-family:var(--ff-h);font-size:var(--t-sm);
  font-weight:600;color:#ffffff;
  letter-spacing:.04em;white-space:nowrap;
}
.stat-chip svg{width:13px;height:13px;flex-shrink:0;color:var(--gold);}

.source-strip{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);
  padding:var(--s1) var(--s8);
  background:rgba(255,255,255,.03);
  border-top:1px solid rgba(255,255,255,0.04);
  font-family:var(--ff-h);font-size:0.42rem;
  font-weight:500;letter-spacing:.06em;
  color:rgba(255,255,255,0.08);text-transform:uppercase;
}
.src-lbl{color:rgba(255,255,255,0.08);margin-right:var(--s2);font-weight:600;}
.dot{color:rgba(255,255,255,0.08);}

/* ═══ SECTION LABEL ═══ */
.sec-label{
  display:flex;align-items:center;gap:var(--s3);
  font-family:'Roboto Condensed',var(--ff-h);
  font-size:var(--t-base);
  font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;color:#ffffff;
  margin-bottom:var(--s5);
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
}
.sec-bar{width:4px;height:22px;background:var(--gold);border-radius:var(--r-full);flex-shrink:0;}
.sec-live-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(220,38,38,.25);
  border:1px solid rgba(220,38,38,.5);
  border-radius:var(--r-full);
  padding:7px 18px;
  font-family:var(--ff-h);
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:.12em;
  color:#ffffff;
}
.sec-live-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--red-live);
  box-shadow:0 0 6px var(--red-live);
  animation:pulseDot 1.4s ease-in-out infinite;
  flex-shrink:0;
}

/* ═══ SKELETON ═══ */
.skel{
  border-radius:var(--r-lg);height:210px;
  background:linear-gradient(90deg,var(--surface) 0%,var(--surface2) 50%,var(--surface) 100%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
}
.story-skel{aspect-ratio:9/16;height:auto;}
.fullday-skel{height:160px;}
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}

/* ═══ FORECAST PANELS ═══ */
.forecast-section{margin-bottom:var(--s10);}
.panels-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s4);
}
@media(max-width:360px){.panels-grid{grid-template-columns:1fr;}}

.forecast-panel{
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);
  position:relative;
  cursor:pointer;
  transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  width:100%;
}
.forecast-panel:hover{
  transform:translateY(-4px);
  border-color:var(--border2);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.forecast-panel::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;border-radius:var(--r-full);
}
.forecast-panel[data-period="morning"]::before  {background:linear-gradient(180deg,#f9d56e,#f7b733);}
.forecast-panel[data-period="noon"]::before     {background:linear-gradient(180deg,#ffd166,#f5a623);}
.forecast-panel[data-period="afternoon"]::before{background:linear-gradient(180deg,#f5a623,#d45e1a);}
.forecast-panel[data-period="night"]::before    {background:linear-gradient(180deg,#4f6eb5,#1e3a6e);}

.fp-period{
  font-family:var(--ff-h);font-size:var(--t-sm);
  font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--s1);
  text-align:center;width:100%;
}
.fp-time{font-size:var(--t-xs);color:rgba(255,255,255,0.6);margin-bottom:var(--s4);letter-spacing:.04em;text-align:center;width:100%;}
.fp-icon{
  font-size:90px;line-height:1;margin-bottom:var(--s4);
  animation:iconFloat 6s ease-in-out infinite;
  text-align:center;
}
.fp-temp{
  font-family:var(--ff-h);font-size:4rem;
  font-weight:900;color:var(--text);line-height:1;margin-bottom:var(--s2);
  text-align:center;width:100%;
}
.fp-condition{
  font-family:var(--ff-h);font-size:var(--t-lg);
  font-weight:700;color:#c9504d;
  text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:var(--s5);line-height:1.2;
  text-align:center;width:100%;
}
.fp-stats{display:flex;flex-direction:column;gap:6px;width:100%;align-items:center;}
.fp-stat{
  display:flex;align-items:center;gap:var(--s2);
  font-size:var(--t-sm);color:rgba(255,255,255,0.75);
  font-family:var(--ff-h);font-weight:600;letter-spacing:.04em;
  justify-content:center;
}
.fp-stat svg{width:14px;height:14px;flex-shrink:0;}

/* ═══ STORY SECTION ═══ */
.story-section{margin-bottom:var(--s10);}
.story-hint{font-size:var(--t-sm);color:rgba(255,255,255,0.75);margin-bottom:var(--s5);line-height:1.5;}

.story-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s3);
  margin-bottom:var(--s4);
}
@media(max-width:480px){.story-grid{grid-template-columns:repeat(2,1fr);}}

/* Story thumb (9:16) */
.story-thumb{
  aspect-ratio:9/16;
  border-radius:var(--r-md);
  overflow:hidden;cursor:pointer;
  position:relative;
  border:1px solid var(--border);
  transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr);
}
.story-thumb:hover{
  transform:scale(1.05);
  border-color:var(--gold);
  box-shadow:0 0 20px rgba(232,200,74,.22);
}
.st-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:10px 8px;
}
.story-thumb[data-period="morning"]  .st-inner{background:linear-gradient(175deg,#1a0e00 0%,#4a2800 40%,#8b4500 80%,#c87820 100%);}
.story-thumb[data-period="noon"]     .st-inner{background:linear-gradient(175deg,#0a0800 0%,#2a1e00 40%,#6b4800 80%,#d4920a 100%);}
.story-thumb[data-period="afternoon"].st-inner{background:linear-gradient(175deg,#100800 0%,#3a1400 40%,#7a2800 80%,#c44a00 100%);}
.story-thumb[data-period="night"]    .st-inner{background:linear-gradient(175deg,#000510 0%,#050f28 40%,#0a1e50 80%,#1a3a8a 100%);}

.st-top{font-family:var(--ff-h);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.st-icon{font-size:28px;text-align:center;flex:1;display:flex;align-items:center;justify-content:center;}
.st-temp{font-family:var(--ff-h);font-size:26px;font-weight:900;color:#fff;line-height:1;text-align:center;}
.st-name{font-family:var(--ff-h);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);text-align:center;margin-top:2px;}

.st-tap{
  position:absolute;bottom:6px;right:6px;
  width:22px;height:22px;
  background:rgba(232,200,74,.2);
  border:1px solid rgba(232,200,74,.5);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--tr);
}
.story-thumb:hover .st-tap{opacity:1;}
.st-tap svg{width:11px;height:11px;color:var(--gold);}

/* ═══ FULL DAY CARD ═══ */
.fullday-wrap{width:100%;}

.fullday-card{
  width:100%;
  background:var(--surface);
  border-radius:var(--r-lg);
  cursor:pointer;
  position:relative;
  transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);
}
.fullday-card:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  border-color:var(--gold);
}
.fullday-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#f9d56e,#f5a623,#c44a00,#1a3a8a);
}
.fullday-inner{
  padding:var(--s6) var(--s8);
}
.fullday-header{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:var(--s6);
  flex-wrap:wrap;gap:var(--s3);
}
.fullday-title{
  font-family:var(--ff-h);font-size:var(--t-xl);
  font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);
}
.fullday-date{
  font-family:var(--ff-h);font-size:var(--t-sm);
  font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,0.75);
}
.fullday-periods{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s4);
}
@media(max-width:440px){.fullday-periods{grid-template-columns:repeat(2,1fr);}}

.fdp{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:var(--s2);
}
.fdp-period{
  font-family:var(--ff-h);font-size:0.58rem;
  font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:#ffffff;
  white-space:normal;
  word-break:break-word;
  text-align:center;
  line-height:1.2;
}
.fdp-icon{font-size:32px;animation:iconFloat 6s ease-in-out infinite;}
.fdp-temp{
  font-family:var(--ff-h);font-size:var(--t-xl);
  font-weight:900;color:var(--text);line-height:1;
}
.fdp-cond{
  font-family:var(--ff-h);font-size:var(--t-xs);
  font-weight:600;color:#9a88aa;
  text-transform:uppercase;letter-spacing:.04em;line-height:1.3;
}
/* Divider between periods */
.fdp:not(:last-child){
  border-right:1px solid var(--border);
  padding-right:var(--s4);
}
@media(max-width:440px){
  .fdp:nth-child(even){border-right:none;}
  .fdp:not(:last-child){padding-right:0;}
}

.fullday-footer{
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--s3);
}
.fullday-tap{
  display:flex;align-items:center;gap:var(--s2);
  font-family:var(--ff-h);font-size:var(--t-xs);
  font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
}
.fullday-tap svg{width:14px;height:14px;}
.fullday-brand{
  font-family:var(--ff-h);font-size:var(--t-xs);
  font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#9a88aa;
}

/* ═══ OVERLAY ═══ */
.overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.96);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:var(--s6);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.overlay.open{opacity:1;pointer-events:all;}

.overlay-card{
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.9);
  border:1px solid var(--border2);
  /* size set by JS depending on card type */
}

/* 9:16 portrait story */
.overlay-card.portrait{
  width:min(320px,78vw);
  aspect-ratio:9/16;
  position:relative;
}
/* Full-day landscape */
.overlay-card.landscape{
  width:min(600px,92vw);
  position:relative;
}

.oc-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:var(--s8) var(--s6);
}
/* landscape: different layout */
.overlay-card.landscape .oc-inner{
  position:relative;
  padding:var(--s8) var(--s8) var(--s6);
}

.oc-header{
  display:flex;align-items:center;justify-content:space-between;
}
.oc-logo{
  width:52px;height:52px;border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(201,80,77,0.7);
  box-shadow:0 0 12px rgba(193,82,79,0.5);
  flex-shrink:0;
}
.oc-brand{
  font-family:var(--ff-h);font-size:1.1rem;
  font-weight:900;letter-spacing:.06em;
  color:var(--gold);text-transform:uppercase;
  white-space:nowrap;
}
.oc-sub{
  font-family:var(--ff-h);font-size:0.95rem;
  font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
  white-space:nowrap;
}
.oc-mid{text-align:center;}
.oc-icon{font-size:125px;line-height:1;display:block;margin-bottom:var(--s4);}
.oc-cond{
  font-family:var(--ff-h);font-size:var(--t-xl);
  font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:rgba(255,255,255,.8);
}
.oc-temp-big{
  font-family:var(--ff-h);
  font-size:8.75rem;
  font-weight:900;color:#fff;
  line-height:.9;letter-spacing:-.02em;text-align:center;
  font-variant-numeric:tabular-nums;
}
/* Unified temperature glyph sizing */
.temp-num{
  font-family:var(--ff-h);
  font-weight:900;
  font-variant-numeric:tabular-nums;
  display:inline-block;
  vertical-align:baseline;
  line-height:1;
}
.temp-unit{
  font-family:var(--ff-h);
  font-weight:900;
  font-size:.55em;
  display:inline-block;
  vertical-align:top;
  line-height:1.2;
  letter-spacing:0;
}
.oc-details{
  display:flex;justify-content:center;gap:var(--s5);
  margin-top:var(--s4);flex-wrap:wrap;
}
.oc-det{
  font-family:var(--ff-h);font-size:var(--t-base);
  font-weight:600;color:rgba(255,255,255,.5);
  letter-spacing:.06em;text-transform:uppercase;
}
.oc-loc{
  font-family:var(--ff-h);font-size:var(--t-sm);
  font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.3);
  margin-top:var(--s3);text-align:center;
}

/* Full-day overlay grid */
.oc-fullday-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s5);
  margin:var(--s6) 0;
}
.oc-fdp{
  display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:var(--s2);
}
.oc-fdp:not(:last-child){border-right:1px solid rgba(255,255,255,.1);padding-right:var(--s5);}
.oc-fdp-period{
  font-family:var(--ff-h);font-size:0.6rem;
  font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
  word-break:break-word;text-align:center;
}
.oc-fdp-icon{font-size:45px;}
.oc-fdp-temp{
  font-family:var(--ff-h);font-size:var(--t-xl);
  font-weight:900;color:#fff;line-height:1;
}
.oc-fdp-cond{
  font-family:var(--ff-h);font-size:var(--t-xs);
  font-weight:600;color:rgba(255,255,255,.4);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.3;
}

.overlay-footer{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
}
.overlay-hint{
  font-family:var(--ff-h);font-size:var(--t-base);
  font-weight:600;letter-spacing:.06em;
  color:var(--muted);text-transform:uppercase;text-align:center;
}
.share-row{
  display:flex;align-items:center;flex-wrap:wrap;
  justify-content:center;gap:var(--s2);
  margin-bottom:var(--s3);
}
.share-btn{
  display:flex;align-items:center;gap:6px;
  border-radius:var(--r-full);
  padding:8px 14px;
  font-family:var(--ff-h);font-size:var(--t-sm);
  font-weight:700;letter-spacing:.06em;
  transition:transform var(--tr),box-shadow var(--tr),filter var(--tr);
  white-space:nowrap;
}
.share-btn:hover{transform:translateY(-2px);filter:brightness(1.15);}
.share-btn:active{transform:scale(.96);}
.share-fb{
  background:#1877f2;color:#fff;
  border:1px solid rgba(255,255,255,.15);
}
.share-tw{
  background:#111;color:#fff;
  border:1px solid rgba(255,255,255,.2);
}
.share-dl{
  background:var(--gold);color:#0a0609;
  border:1px solid rgba(0,0,0,.2);
}
.share-native{
  background:rgba(255,255,255,.1);color:var(--text);
  border:1px solid var(--border2);
}

.overlay-close{
  display:flex;align-items:center;gap:var(--s2);
  background:rgba(255,255,255,.08);
  border:1px solid var(--border2);
  border-radius:var(--r-full);
  padding:var(--s3) var(--s6);
  font-family:var(--ff-h);font-size:var(--t-base);
  font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
  transition:background var(--tr),color var(--tr);
}
.overlay-close:hover{background:rgba(255,255,255,.14);color:var(--text);}

/* ═══ REGION SECTION ═══ */
.region-section{margin-bottom:var(--s10);}

.region-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s4);
}

.region-skel{height:120px;}

.region-card{
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s8);
  position:relative;
  transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr);
  display:flex;
  align-items:center;
  gap:var(--s6);
}
.region-card:hover{
  transform:translateY(-3px);
  border-color:var(--border2);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
/* Zarakas gets gold accent */
.region-card.is-main{
  background:linear-gradient(135deg,var(--surface) 60%,rgba(232,200,74,.05) 100%);
}
.region-card.is-main::before{
  content:'★';
  position:absolute;top:var(--s3);right:var(--s3);
  font-size:10px;color:var(--gold);opacity:.7;
}

.rc-name{
  font-family:var(--ff-h);
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#ffffff;
  margin-bottom:var(--s1);
  white-space:normal;
  word-break:break-word;
  line-height:1.1;
}
.rc-name.main-name{color:var(--gold);}
.rc-elev{
  font-size:var(--t-sm);
  color:rgba(255,255,255,0.6);
  margin-bottom:var(--s3);
  letter-spacing:.04em;
}
.rc-left{flex-shrink:0;text-align:center;}
.rc-right{flex:1;}
.rc-row{
  display:flex;align-items:center;gap:var(--s3);
  margin-bottom:var(--s2);
}
.rc-icon{font-size:65px;line-height:1;display:block;margin-bottom:var(--s2);flex-shrink:0;}
.rc-temp{
  font-family:var(--ff-h);
  font-size:var(--t-2xl);
  font-weight:900;
  color:var(--text);
  line-height:1;
}
.rc-cond{
  font-family:var(--ff-h);
  font-size:calc(var(--t-base) * 0.82);
  font-weight:700;
  color:#ffffff;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.3;
  margin-top:var(--s1);
}
.rc-stats{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:var(--s3);
}
.rc-stat{
  display:flex;align-items:center;gap:5px;
  font-size:var(--t-sm);
  color:rgba(255,255,255,0.75);
  font-family:var(--ff-h);
  font-weight:600;
  letter-spacing:.04em;
  white-space:nowrap;
}
.rc-stat svg{width:12px;height:12px;flex-shrink:0;}
.rc-error{
  font-family:var(--ff-h);
  font-size:var(--t-xs);
  color:rgba(255,255,255,0.6);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:var(--s4);
}

/* ═══ LOGO WATERMARK ═══ */
.app::before{
  content:'';
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(480px,80vw);
  height:min(480px,80vw);
  border-radius:50%;
  background:url('logo.jpeg') center/cover no-repeat;
  opacity:0.04;
  pointer-events:none;
  z-index:0;
}

/* ═══ POST CARD SECTION ═══ */
.post-section{margin-bottom:var(--s10);}

.post-card{
  width:100%;
  /* 9:16 portrait — fits story format and has room for all info */
  aspect-ratio:9/16;
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:var(--s8);
  box-sizing:border-box;
  position:relative;
  font-family:var(--ff-h);
  gap:var(--s4);
}

.pc-header{
  display:flex;
  align-items:center;
  gap:var(--s4);
}
.pc-logo{
  width:52px;height:52px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(201,80,77,0.7);
  box-shadow:0 0 10px rgba(193,82,79,0.5);
  flex-shrink:0;
}
.pc-brand{
  font-size:1.2rem;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--gold);
  text-transform:uppercase;
  white-space:nowrap;
}
.pc-date{
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:.05em;
  color:#ffffff;
  text-transform:uppercase;
  margin-top:2px;
  white-space:normal;
  line-height:1.3;
}

.pc-hero{
  display:flex;
  align-items:center;
  gap:var(--s4);
  flex:1;
  padding:var(--s2) 0;
}
.pc-icon{
  font-size:3.8rem;
  line-height:1;
  flex-shrink:0;
}
.pc-temp{
  font-size:4.8rem;
  font-weight:900;
  color:#fff;
  line-height:1;
  letter-spacing:-.02em;
}

.pc-body{
  font-size:0.85rem;
  font-weight:500;
  color:rgba(255,255,255,.9);
  line-height:1.5;
  letter-spacing:.01em;
  font-family:var(--ff-b);
  max-width:100%;
}

/* pc-badge: dominant icon top-right */
.pc-badge{
  margin-left:auto;
  font-size:2.4rem;
  line-height:1;
  flex-shrink:0;
}

/* min/max range */
.pc-range{
  display:flex;
  align-items:baseline;
  gap:var(--s2);
  padding:var(--s2) 0;
}
.pc-range-min{
  font-family:var(--ff-h);
  font-size:3.8rem;
  font-weight:700;
  color:rgba(255,255,255,.65);
  line-height:1;
}
.pc-range-sep{
  font-family:var(--ff-h);
  font-size:3rem;
  font-weight:400;
  color:rgba(255,255,255,.35);
}
.pc-range-max{
  font-family:var(--ff-h);
  font-size:3.8rem;
  font-weight:900;
  color:#fff;
  line-height:1;
}
.pc-range-lbl{
  font-family:var(--ff-h);
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.3);
  align-self:flex-end;
  padding-bottom:6px;
}

/* period rows */
.pc-periods{
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:var(--s3);
}
.pc-period-row{
  display:flex;
  align-items:center;
  gap:var(--s4);
  padding:var(--s3) 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pc-period-lbl{
  font-family:var(--ff-h);
  font-size:1.5rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffffff;
  width:9rem;
  flex-shrink:0;
}
.pc-period-icon{ font-size:2.86rem; line-height:1; flex-shrink:0; }
.pc-period-temp{
  font-family:var(--ff-h);
  font-weight:900;
  font-size:2.2rem;
  color:#fff;
  flex:1;
}
.pc-period-wind{ display:none; }
.pc-rain{ display:none; }
.pc-meta{
  margin-left:auto;
  flex-shrink:0;
  white-space:nowrap;
  font-size:1.24rem;
  color:rgba(120,180,255,.9);
  font-family:var(--ff-h);
  font-weight:700;
}
.pc-meta-wind{
  color:rgba(255,255,255,.45);
}

.pc-footer{
  font-size:0.6rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(255,255,255,.3);
  margin-top:var(--s2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.post-actions{
  display:flex;
  gap:var(--s3);
  flex-wrap:wrap;
  margin-top:var(--s5);
}

/* ═══ MARINE SECTION ═══ */
.marine-section{margin-bottom:var(--s10);}

.marine-inner{
  background:var(--surface);
  border-radius:var(--r-lg);
  overflow:hidden;
  padding:var(--s6) var(--s8);
}

.marine-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--s6);
  gap:var(--s6);
}

.marine-sst{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s1);
}
.marine-sst-icon{font-size:2.8rem;line-height:1;}
.marine-sst-val{
  font-family:var(--ff-h);
  font-size:var(--t-2xl);
  font-weight:900;
  color:var(--text);
  line-height:1;
}
.marine-sst-lbl{
  font-family:var(--ff-h);
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffffff;
}

.marine-wave-big{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--s1);
}
.marine-wave-num{
  font-family:var(--ff-h);
  font-size:4.5rem;
  font-weight:900;
  color:#4fc3f7;
  line-height:1;
}
.marine-wave-unit{
  font-size:2rem;
  font-weight:700;
  color:rgba(79,195,247,.6);
}
.marine-wave-lbl{
  font-family:var(--ff-h);
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffffff;
}

.marine-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s3);
  padding-top:var(--s5);
  border-top:1px solid var(--border);
}
@media(max-width:440px){.marine-stats{grid-template-columns:repeat(2,1fr);}}

.marine-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s1);
  text-align:center;
}
.mst-label{
  font-family:var(--ff-h);
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffffff;
}
.mst-val{
  font-family:var(--ff-h);
  font-size:var(--t-xl);
  font-weight:900;
  color:#4fc3f7;
}
.marine-error{
  text-align:center;
  padding:var(--s8);
  color:var(--faint);
  font-family:var(--ff-h);
}
.marine-share-btn{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  margin-top:var(--s5);
  width:100%;
  padding:var(--s3) var(--s5);
  border-radius:var(--r-full);
  background:rgba(79,195,247,0.12);
  border:1px solid rgba(79,195,247,0.3);
  font-family:var(--ff-h);font-size:var(--t-sm);
  font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#4fc3f7;
  cursor:pointer;
  transition:background var(--tr),border-color var(--tr);
}
.marine-share-btn:hover{
  background:rgba(79,195,247,0.22);
  border-color:rgba(79,195,247,0.6);
}
.marine-share-btn svg{width:16px;height:16px;flex-shrink:0;}

/* ═══ FOOTER ═══ */
.footer{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);
  padding:var(--s3) 0;
  border-top:1px solid rgba(255,255,255,0.04);
  font-size:0.45rem;color:rgba(255,255,255,0.1);
  font-family:var(--ff-h);letter-spacing:.04em;text-transform:uppercase;
}
.footer a{color:rgba(255,255,255,0.1);}

/* ═══ SOCIAL BUTTONS ═══ */
.social-bar{
  display:flex;justify-content:center;align-items:center;gap:16px;
  padding:var(--s4) 0 var(--s8);
}
.social-btn{
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;
  border-radius:50%;
  color:#fff;
  text-decoration:none;
  flex-shrink:0;
  transition:transform .2s,box-shadow .2s;
  touch-action:manipulation;
}
.social-btn:hover,.social-btn:active{ transform:scale(1.12); }
.social-ig{
  background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
  box-shadow:0 4px 16px rgba(131,58,180,.45);
}
.social-fb{
  background:#1877f2;
  box-shadow:0 4px 16px rgba(24,119,242,.45);
}
.social-tt{
  background:#010101;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.12);
}
.social-icon{
  width:24px;height:24px;
  flex-shrink:0;
}

/* ═══ SHIMMER TEXT ═══ */
.shimmer-text{
  display:inline-block;
  background:linear-gradient(90deg,#c8b8d0 0%,var(--gold) 50%,var(--brand) 75%,#c8b8d0 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:textShimmer 2s linear infinite;
}
@keyframes textShimmer{to{background-position:-200% center;}}

/* ── Share Toast ─────────────────────────────── */
#shareToast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#1a1a2e;border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:14px 20px;
  color:#f0f4ff;font-family:var(--ff-b);font-size:1.15rem;font-weight:600;
  text-align:center;line-height:1.45;
  box-shadow:0 8px 32px rgba(0,0,0,.55);
  z-index:9999;pointer-events:none;
  opacity:0;transition:opacity .3s ease,transform .3s ease;
  max-width:88vw;
}
#shareToast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#shareToast .toast-icon{font-size:1.6rem;display:block;margin-bottom:4px;}

/* ══ REGION FORECAST SLIDER ══════════════════════════ */
.regfc-section{margin-bottom:var(--s10);}

.regfc-slider-wrap{
  display:flex;
  align-items:center;
  gap:var(--s3);
  position:relative;
}

.regfc-track-outer{
  flex:1;
  overflow:hidden;
  border-radius:var(--r-lg);
  cursor:grab;
  user-select:none;
}
.regfc-track-outer:active{cursor:grabbing;}

.regfc-track{
  display:flex;
  width:100%;
  will-change:transform;
}

.regfc-arrow{
  flex-shrink:0;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:50%;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:opacity var(--tr),background var(--tr);
  padding:0;
}
.regfc-arrow:hover{background:var(--surface2);}

.regfc-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:var(--s4);
  flex-wrap:wrap;
}
.rfs-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  border:none;cursor:pointer;padding:0;
  transition:background var(--tr),transform var(--tr);
}
.rfs-dot.active{background:var(--gold);transform:scale(1.3);}

.regfc-skel{height:220px;width:100%;}

/* ─ Individual slide ─ */
.rfs-slide{
  flex:0 0 100%;
  width:100%;
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s6) var(--s8);
  box-sizing:border-box;
}
.rfs-slide.rfs-main{
  background:linear-gradient(135deg,var(--surface) 60%,rgba(232,200,74,.06) 100%);
}

.rfs-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:var(--s5);
  flex-wrap:wrap;
  gap:var(--s2);
}
.rfs-loc{
  font-family:var(--ff-h);
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  line-height:1.1;
}
.rfs-loc-main{color:var(--gold);}
.rfs-meta{
  font-size:var(--t-sm);
  color:rgba(255,255,255,.55);
  letter-spacing:.04em;
  font-family:var(--ff-h);
  white-space:nowrap;
}

/* 4-column grid for the 4 periods */
.rfs-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s3);
}
@media(max-width:480px){
  .rfs-grid{grid-template-columns:repeat(2,1fr);}
}

.rfs-period{
  background:rgba(255,255,255,.04);
  border-radius:var(--r-md);
  padding:var(--s4) var(--s3);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--s2);
}

.rfs-plabel{
  font-family:var(--ff-h);
  font-size:var(--t-xs);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
.rfs-picon{font-size:2rem;line-height:1;}
.rfs-ptemp{
  font-family:var(--ff-h);
  font-size:var(--t-xl);
  font-weight:900;
  color:var(--text);
  line-height:1;
}
.rfs-ptemp .temp-num{font-size:inherit;}
.rfs-ptemp .temp-unit{font-size:.65em;opacity:.75;}
.rfs-pcond{
  font-family:var(--ff-h);
  font-size:calc(var(--t-sm)*0.85);
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.2;
}
.rfs-pmeta{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:var(--t-xs);
  color:rgba(255,255,255,.6);
  font-family:var(--ff-h);
  font-weight:600;
  letter-spacing:.03em;
}
.rfs-rain{color:#7ec8e3;}
.rfs-error{
  font-family:var(--ff-h);
  font-size:var(--t-base);
  color:rgba(255,255,255,.5);
  text-align:center;
  padding:var(--s10) 0;
}

/* ── REGION FORECAST SLIDER — mobile fixes ── */
.rfs-period{
  overflow:hidden;
  min-width:0;
}
.rfs-plabel{
  font-size:calc(var(--t-xs)*0.85);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
}
.rfs-pcond{
  font-size:calc(var(--t-xs)*0.9);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
}
.rfs-pmeta span{
  white-space:nowrap;
  font-size:calc(var(--t-xs)*0.85);
}
.rfs-ptemp{font-size:var(--t-lg);}
.rfs-picon{font-size:1.6rem;}