:root{
  --bg:#f1f1f1;
  --panel:#eaeaea;
  --accent:#d33;
  --muted:#666;
  --screen-bg: #0b1620;
  --screen-glow: rgba(20,200,255,0.06);
  --touch-size: 52px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body,#shell{height:100%;margin:0;background:var(--bg);color:#111}
#shell{display:flex;gap:12px;padding:10px;height:100vh;align-items:center;justify-content:center}

/* Left rail - compact controls for mobile */
#left-rail{
  width:180px;
  background:var(--panel);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 6px 18px rgba(10,10,10,0.08);
  min-height:86vh;
}

#logo{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#brand-img{width:100%;max-width:140px;height:auto;display:block;border-radius:8px;box-shadow:0 6px 14px rgba(10,10,10,0.06)}
.logo-line{font-weight:700;font-size:14px}
.logo-line.nintendo{color:var(--accent);font-size:16px;letter-spacing:1px}

/* Info area */
#info{display:flex;flex-direction:column;gap:10px}
.info-row{display:flex;flex-direction:column;gap:6px}
.label{font-size:12px;color:var(--muted)}
#location{padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);font-size:14px}
#temp-read,#time-read{font-weight:700}

/* Controls */
#controls{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.ctrl{
  height:var(--touch-size);
  border-radius:10px;
  background:white;border:1px solid rgba(0,0,0,0.06);
  font-size:14px;padding:10px;
  display:flex;align-items:center;justify-content:center;
  gap:8px;touch-action:manipulation;
}
.ctrl:active{transform:scale(0.995)}
#temp-slider-wrap{padding:6px;background:transparent}
#temp{width:100%}
#bottom-row{display:flex;gap:8px}

/* Main screen (TV) */
#screen-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:86vh;
}
#screen{
  width:100%;
  max-width:540px;
  aspect-ratio: 4/3;
  background:linear-gradient(180deg,var(--screen-bg),#04202a);
  border-radius:14px;
  box-shadow: 0 20px 50px rgba(2,6,10,0.35);
  position:relative;
  overflow:hidden;
  padding:18px;
  border:8px solid #0c1b22;
}

/* sky & ground */
#sky{position:absolute;inset:18px 18px 120px 18px;pointer-events:none}
#ground{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,#0c2b2f,#07181a);display:flex;align-items:center;justify-content:center}

/* Info overlay on screen */
#info-overlay{color:white;text-align:center;text-shadow:0 6px 18px rgba(0,0,0,0.6)}
#big-temp{font-size:44px;font-weight:800}
#small-info{font-size:14px;color:rgba(255,255,255,0.9);margin-top:6px}

/* Weather objects: simple, lightweight CSS shapes + animation */
.weather-obj{position:absolute;left:0;top:0;right:0;bottom:0;display:block;opacity:0;transition:opacity 400ms ease}

/* Sun */
#sun{opacity:0;pointer-events:none}
#sun::before{
  content:"";position:absolute;right:14%;top:8%;width:86px;height:86px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff8b8 0%,#ffd85b 30%,#ffb94d 65%,#ff8c00 100%);
  filter:drop-shadow(0 10px 20px rgba(255,150,0,0.12));
}

/* Clouds */
#clouds::before,#clouds::after{
  content:"";position:absolute;background:#dfeff6;border-radius:40px;filter:drop-shadow(0 6px 10px rgba(0,0,0,0.06));
}
#clouds::before{width:180px;height:60px;left:6%;top:18%}
#clouds::after{width:120px;height:40px;left:26%;top:8%}

/* Rain */
#rain{pointer-events:none}
.rain-drop{
  position:absolute;left:50%;top:36%;width:4px;height:18px;border-radius:2px;background:#7fd3ff;opacity:0.95;
  transform:translateX(-50%);
  animation:rainFall 700ms linear infinite;
  box-shadow:0 6px 10px rgba(0,80,120,0.15);
}
.rain-drop:nth-child(2){left:30%;animation-delay:120ms}
.rain-drop:nth-child(3){left:70%;animation-delay:240ms}
.rain-drop:nth-child(4){left:15%;animation-delay:360ms}
.rain-drop:nth-child(5){left:85%;animation-delay:480ms}

@keyframes rainFall{0%{transform:translateY(-8px) scaleY(0.9)}100%{transform:translateY(38px) scaleY(1.1);opacity:0}}

/* Snow */
.snowflake{
  position:absolute;left:50%;top:20%;width:10px;height:10px;border-radius:50%;background:white;
  transform:translateX(-50%);
  animation:snowFall 1800ms linear infinite;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
}
.snowflake:nth-child(2){left:30%;animation-delay:300ms}
.snowflake:nth-child(3){left:70%;animation-delay:600ms}
.snowflake:nth-child(4){left:15%;animation-delay:1100ms}
.snowflake:nth-child(5){left:85%;animation-delay:1500ms}

@keyframes snowFall{0%{transform:translateY(-10px) rotate(0) }100%{transform:translateY(60px) rotate(180deg);opacity:0.9}}

/* Visible classes */
.visible{opacity:1}

/* Night tint */
.night #screen{background:linear-gradient(180deg,#08101a,#02070a)}
.night #sun::before{opacity:0.15;filter:blur(6px)}
.night .logo-line{color:#eee}
.night #big-temp{color:#dbeeff}

/* Responsive / Mobile friendly */
@media (max-width:640px){
  #shell{padding:8px;gap:8px}
  #left-rail{width:150px;padding:10px;min-height:94vh}
  #screen{max-width:420px}
  #big-temp{font-size:36px}
}