:root {
  --bg1: #ff5fa2;
  --bg2: #7c4dff;
  --card: rgba(255, 255, 255, 0.14);
  --card2: rgba(255, 255, 255, 0.18);
  --stroke: rgba(255, 255, 255, 0.22);
  --text: rgba(255, 255, 255, 0.96);
  --muted: rgba(255, 255, 255, 0.78);
  --tiny: rgba(255, 255, 255, 0.7);
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  --radius: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* Prevent scrolling */
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  /* Neutral base; each panel renders its own animated sky (Samsung-like). */
  background: radial-gradient(
      1200px 900px at 20% 10%,
      rgba(255, 255, 255, 0.1),
      transparent 60%
    ),
    radial-gradient(
      1200px 900px at 85% 90%,
      rgba(255, 255, 255, 0.1),
      transparent 60%
    ),
    linear-gradient(145deg, #0b1020 0%, #121a33 55%, #0b2440 120%);
}

.app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* Default sky in case JS hasn't applied a theme yet */
  background: linear-gradient(180deg, rgba(120, 90, 255, 0.22), rgba(40, 120, 255, 0.1));
}

.panel::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(
      520px 320px at 25% 15%,
      rgba(255, 255, 255, 0.18),
      transparent 60%
    ),
    radial-gradient(
      520px 320px at 85% 80%,
      rgba(255, 255, 255, 0.14),
      transparent 60%
    );
  filter: blur(0px);
  pointer-events: none;
}

.panel > * {
  position: relative;
  z-index: 1;
}

.panel > .wx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.wx__sky,
.wx__stars,
.wx__rays,
.wx__sparkles,
.wx__sun,
.wx__moon,
.wx__clouds,
.wx__mist,
.wx__rain,
.wx__snow,
.wx__lightning,
.wx__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---- Sky base (day/night) ---- */
.wx__sky {
  background: linear-gradient(180deg, #6fd2ff 0%, #7aa6ff 55%, #a77bff 120%);
  transition: background 700ms ease;
}

.panel.wx-time--day .wx__sky {
  background: radial-gradient(
      900px 520px at 20% 15%,
      rgba(255, 255, 255, 0.45),
      transparent 55%
    ),
    linear-gradient(180deg, #78dcff 0%, #6ea5ff 55%, #a07bff 120%);
}

.panel.wx-time--night .wx__sky {
  background: radial-gradient(
      900px 520px at 20% 15%,
      rgba(190, 200, 255, 0.2),
      transparent 55%
    ),
    linear-gradient(180deg, #061126 0%, #0b1b3b 45%, #1a1040 120%);
}

/* ---- Cartoon Rays / Sparkles ---- */
.wx__rays {
  opacity: 0;
  inset: -20%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 230, 120, 0.18) 0deg 10deg,
    rgba(255, 255, 255, 0.0) 10deg 22deg
  );
  filter: blur(0.4px);
  transform-origin: 60% 20%;
  animation: wx-rays-spin 18s linear infinite;
  mix-blend-mode: screen;
}

.panel.wx-time--day.wx-type--clear .wx__rays {
  opacity: 0.75;
}
.panel.wx-time--day.wx-type--cloudy .wx__rays {
  opacity: 0.25;
}

@keyframes wx-rays-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.wx__sparkles {
  opacity: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 40%, rgba(255,255,255,0.7) 0 1.5px, transparent 3px),
    radial-gradient(circle at 70% 22%, rgba(255,255,255,0.8) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,0.65) 0 1.5px, transparent 3px),
    radial-gradient(circle at 55% 28%, rgba(255,255,255,0.75) 0 1.5px, transparent 3px);
  animation: wx-sparkles 3.4s ease-in-out infinite;
  mix-blend-mode: screen;
}

.panel.wx-time--day.wx-type--clear .wx__sparkles {
  opacity: 0.8;
}
.panel.wx-time--night.wx-type--clear .wx__sparkles {
  opacity: 0.35;
}

@keyframes wx-sparkles {
  0%, 100% {
    transform: translateY(0);
    filter: brightness(1);
  }
  50% {
    transform: translateY(2px);
    filter: brightness(1.25);
  }
}

/* ---- Vignette for readability ---- */
.wx__vignette {
  background: radial-gradient(
      900px 520px at 50% 0%,
      transparent 35%,
      rgba(0, 0, 0, 0.22) 100%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.18));
  opacity: 0.9;
}

/* Slightly calmer overlay on very bright day skies so text pops */
.panel.wx-time--day .wx__vignette {
  opacity: 0.95;
}

.panel.wx-time--night .wx__vignette {
  opacity: 0.85;
}

/* ---- Sun / Moon ---- */
.wx__sun {
  inset: -10% -10% auto auto;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.98) 0 18%,
    rgba(255, 240, 140, 0.95) 19% 38%,
    rgba(255, 210, 80, 0.5) 39% 60%,
    transparent 61%
  );
  filter: blur(0.2px);
  transform: translate(0, 0);
  opacity: 0;
  animation: wx-sun-float 8s ease-in-out infinite;
  mix-blend-mode: screen;
}

.panel.wx-time--day.wx-type--clear .wx__sun,
.panel.wx-time--day.wx-type--cloudy .wx__sun,
.panel.wx-time--day.wx-type--drizzle .wx__sun {
  opacity: 0.95;
}

.panel.wx-time--day.wx-type--rain .wx__sun,
.panel.wx-time--day.wx-type--thunder .wx__sun,
.panel.wx-time--day.wx-type--fog .wx__sun,
.panel.wx-time--day.wx-type--snow .wx__sun {
  opacity: 0.25;
  filter: blur(1.5px);
}

.wx__moon {
  inset: -12% auto auto -10%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 255, 255, 0.98) 0 22%,
    rgba(210, 225, 255, 0.9) 23% 44%,
    rgba(160, 190, 255, 0.35) 45% 64%,
    transparent 65%
  );
  opacity: 0;
  animation: wx-moon-float 10s ease-in-out infinite;
  mix-blend-mode: screen;
}

.panel.wx-time--night .wx__moon {
  opacity: 0.9;
}

@keyframes wx-sun-float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-10px, 8px) scale(1.02);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes wx-moon-float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(14px, 10px) scale(1.02);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* ---- Stars ---- */
.wx__stars {
  opacity: 0;
  background: radial-gradient(
      circle at 15% 20%,
      rgba(255, 255, 255, 0.9) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 55% 18%,
      rgba(255, 255, 255, 0.8) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 72% 32%,
      rgba(255, 255, 255, 0.85) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 35% 42%,
      rgba(255, 255, 255, 0.65) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 85% 14%,
      rgba(255, 255, 255, 0.75) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 25% 10%,
      rgba(255, 255, 255, 0.75) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 10% 38%,
      rgba(255, 255, 255, 0.65) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 90% 44%,
      rgba(255, 255, 255, 0.7) 0 1px,
      transparent 2px
    );
  animation: wx-stars-twinkle 6.5s ease-in-out infinite;
}

.panel.wx-time--night .wx__stars {
  opacity: 0.75;
}

.panel.wx-time--night.wx-type--cloudy .wx__stars,
.panel.wx-time--night.wx-type--rain .wx__stars,
.panel.wx-time--night.wx-type--thunder .wx__stars,
.panel.wx-time--night.wx-type--fog .wx__stars {
  opacity: 0.25;
  filter: blur(0.6px);
}

@keyframes wx-stars-twinkle {
  0%,
  100% {
    filter: brightness(1) blur(0px);
    transform: translateY(0);
  }
  50% {
    filter: brightness(1.25) blur(0.2px);
    transform: translateY(1px);
  }
}

/* ---- Clouds ---- */
.wx__clouds {
  opacity: 0;
  background: radial-gradient(
      140px 90px at 20% 28%,
      rgba(255, 255, 255, 0.28),
      transparent 70%
    ),
    radial-gradient(
      180px 110px at 45% 22%,
      rgba(255, 255, 255, 0.24),
      transparent 72%
    ),
    radial-gradient(
      220px 140px at 70% 30%,
      rgba(255, 255, 255, 0.22),
      transparent 74%
    ),
    radial-gradient(
      260px 160px at 85% 18%,
      rgba(255, 255, 255, 0.18),
      transparent 75%
    );
  filter: blur(2.5px);
  transform: translateX(-6%);
  animation: wx-cloud-drift 16s linear infinite, wx-cloud-bob 5.8s ease-in-out infinite;
}

.wx__clouds::before,
.wx__clouds::after {
  content: "";
  position: absolute;
  inset: -10% -15% 25% -15%;
  background:
    radial-gradient(160px 120px at 18% 58%, rgba(255,255,255,0.65), transparent 72%),
    radial-gradient(220px 160px at 34% 62%, rgba(255,255,255,0.55), transparent 72%),
    radial-gradient(280px 200px at 52% 58%, rgba(255,255,255,0.5), transparent 73%),
    radial-gradient(240px 170px at 70% 62%, rgba(255,255,255,0.46), transparent 73%),
    radial-gradient(220px 160px at 84% 56%, rgba(255,255,255,0.42), transparent 73%);
  filter: blur(1px);
  opacity: 0.0;
  transform: translateX(0);
}

.wx__clouds::after {
  inset: -5% -18% 35% -18%;
  opacity: 0.0;
  filter: blur(1.4px);
  animation: wx-cloud-drift-2 20s linear infinite;
}

.panel.wx-type--cloudy .wx__clouds {
  opacity: 0.9;
}
.panel.wx-type--drizzle .wx__clouds {
  opacity: 0.85;
}
.panel.wx-type--rain .wx__clouds {
  opacity: 0.95;
}
.panel.wx-type--thunder .wx__clouds {
  opacity: 1;
}
.panel.wx-type--fog .wx__clouds {
  opacity: 0.65;
  filter: blur(10px);
}

.panel.wx-type--cloudy .wx__clouds::before,
.panel.wx-type--drizzle .wx__clouds::before,
.panel.wx-type--rain .wx__clouds::before,
.panel.wx-type--thunder .wx__clouds::before {
  opacity: 1;
}
.panel.wx-type--cloudy .wx__clouds::after,
.panel.wx-type--drizzle .wx__clouds::after,
.panel.wx-type--rain .wx__clouds::after,
.panel.wx-type--thunder .wx__clouds::after {
  opacity: 0.8;
}

.panel.wx-time--night .wx__clouds {
  background: radial-gradient(
      160px 100px at 20% 28%,
      rgba(180, 190, 255, 0.18),
      transparent 70%
    ),
    radial-gradient(
      200px 120px at 45% 22%,
      rgba(160, 170, 255, 0.16),
      transparent 72%
    ),
    radial-gradient(
      240px 150px at 70% 30%,
      rgba(150, 160, 255, 0.14),
      transparent 74%
    ),
    radial-gradient(
      280px 170px at 85% 18%,
      rgba(130, 140, 255, 0.12),
      transparent 75%
    );
}

@keyframes wx-cloud-drift {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(10%);
  }
}

@keyframes wx-cloud-drift-2 {
  0% {
    transform: translateX(14%);
  }
  100% {
    transform: translateX(-14%);
  }
}

@keyframes wx-cloud-bob {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 6px;
  }
}

/* ---- Mist / Fog ---- */
.wx__mist {
  opacity: 0;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.12),
      transparent
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    ),
    radial-gradient(
      520px 260px at 50% 70%,
      rgba(255, 255, 255, 0.14),
      transparent 70%
    );
  background-size: 220% 100%, 260% 100%, 100% 100%;
  background-position: 0% 0%, 100% 0%, 50% 50%;
  filter: blur(8px);
  animation: wx-mist 14s ease-in-out infinite;
}

.panel.wx-type--fog .wx__mist {
  opacity: 0.95;
}
.panel.wx-type--rain .wx__mist,
.panel.wx-type--drizzle .wx__mist {
  opacity: 0.35;
}
.panel.wx-type--snow .wx__mist {
  opacity: 0.5;
}

@keyframes wx-mist {
  0%,
  100% {
    background-position: 0% 0%, 100% 0%, 50% 50%;
  }
  50% {
    background-position: 100% 0%, 0% 0%, 52% 48%;
  }
}

/* ---- Rain ---- */
.wx__rain {
  opacity: 0;
  filter: blur(0.1px);
  transform: translateY(-25%);
}

.wx__rain::before,
.wx__rain::after {
  content: "";
  position: absolute;
  inset: -10% 0;
  background:
    radial-gradient(10px 14px at 10% 10%, rgba(210,245,255,0.75) 0 40%, transparent 42%),
    radial-gradient(10px 14px at 25% 22%, rgba(210,245,255,0.65) 0 40%, transparent 42%),
    radial-gradient(10px 14px at 42% 14%, rgba(210,245,255,0.7) 0 40%, transparent 42%),
    radial-gradient(10px 14px at 58% 26%, rgba(210,245,255,0.62) 0 40%, transparent 42%),
    radial-gradient(10px 14px at 74% 16%, rgba(210,245,255,0.72) 0 40%, transparent 42%),
    radial-gradient(10px 14px at 88% 24%, rgba(210,245,255,0.6) 0 40%, transparent 42%);
  background-size: 220px 220px;
  background-position: 0 0;
  transform: skewX(-10deg);
  animation: wx-drops 1.05s linear infinite;
  opacity: 0;
}

.wx__rain::after {
  background-size: 300px 300px;
  opacity: 0;
  animation-duration: 1.35s;
}

.panel.wx-type--rain .wx__rain {
  opacity: 0.75;
}
.panel.wx-type--drizzle .wx__rain {
  opacity: 0.4;
}
.panel.wx-type--thunder .wx__rain {
  opacity: 0.9;
}

.panel.wx-type--rain .wx__rain::before,
.panel.wx-type--rain .wx__rain::after {
  opacity: 0.9;
}
.panel.wx-type--drizzle .wx__rain::before,
.panel.wx-type--drizzle .wx__rain::after {
  opacity: 0.55;
  animation-duration: 1.65s;
}
.panel.wx-type--thunder .wx__rain::before,
.panel.wx-type--thunder .wx__rain::after {
  opacity: 1;
  animation-duration: 0.9s;
}

@keyframes wx-drops {
  0% {
    background-position: 0 -40px;
    transform: translateY(-10%) skewX(-10deg);
  }
  100% {
    background-position: 0 220px;
    transform: translateY(15%) skewX(-10deg);
  }
}

/* ---- Snow ---- */
.wx__snow {
  opacity: 0;
  background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.85) 0 1px,
      transparent 2px
    )
    0 0 / 80px 80px,
    radial-gradient(
        circle,
        rgba(255, 255, 255, 0.65) 0 1px,
        transparent 2px
      )
      20px 30px / 110px 110px,
    radial-gradient(
        circle,
        rgba(220, 240, 255, 0.75) 0 1px,
        transparent 2px
      )
      10px 10px / 140px 140px;
  filter: blur(0.2px);
  animation: wx-snow-fall 7.5s linear infinite;
}

.panel.wx-type--snow .wx__snow {
  opacity: 0.8;
}

@keyframes wx-snow-fall {
  0% {
    transform: translateY(-12%);
  }
  100% {
    transform: translateY(18%);
  }
}

/* ---- Lightning (thunderstorm) ---- */
.wx__lightning {
  opacity: 0;
  background: radial-gradient(
      900px 420px at 70% 20%,
      rgba(255, 255, 255, 0.25),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 55%);
  mix-blend-mode: screen;
}

.wx__lightning::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 340px;
  left: 60%;
  top: 12%;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.15));
  clip-path: polygon(42% 0%, 62% 0%, 50% 34%, 74% 34%, 34% 100%, 44% 58%, 22% 58%);
  filter: drop-shadow(0 12px 20px rgba(255,255,255,0.25));
  opacity: 0;
  transform: rotate(8deg);
}

.panel.wx-type--thunder .wx__lightning {
  opacity: 1;
  animation: wx-lightning 4.8s linear infinite;
}

@keyframes wx-lightning {
  0%,
  84%,
  100% {
    filter: brightness(1);
    opacity: 0;
  }
  85% {
    opacity: 0.9;
  }
  86% {
    opacity: 0.15;
  }
  87% {
    opacity: 0.95;
  }
  88% {
    opacity: 0.08;
  }
  89% {
    opacity: 0.75;
  }
  90% {
    opacity: 0;
  }
}

.panel.wx-type--thunder .wx__lightning::before {
  animation: wx-bolt 4.8s linear infinite;
}

@keyframes wx-bolt {
  0%, 84%, 100% { opacity: 0; transform: rotate(8deg) translateY(0); }
  85% { opacity: 1; transform: rotate(6deg) translateY(0); }
  86% { opacity: 0.1; }
  87% { opacity: 1; transform: rotate(10deg) translateY(2px); }
  88% { opacity: 0.05; }
  89% { opacity: 0.85; }
  90% { opacity: 0; }
}

/* If user prefers reduced motion, calm everything down */
@media (prefers-reduced-motion: reduce) {
  .wx__sun,
  .wx__moon,
  .wx__stars,
  .wx__rays,
  .wx__sparkles,
  .wx__clouds,
  .wx__mist,
  .wx__rain,
  .wx__snow,
  .wx__lightning {
    animation: none !important;
  }
  .openMe.is-shaking {
    animation: none !important;
  }
}

.panel--idan {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.panel--ira {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.openMe {
  position: absolute;
  left: 16px;
  bottom: 70px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  text-align: left;
}

.openMe__icon {
  font-size: 18px;
  line-height: 1;
}

.openMe__text {
  font-weight: 750;
  letter-spacing: -0.01em;
  font-size: 12px;
  text-transform: uppercase;
}

.openMe.is-shaking {
  animation: openme-shake 0.55s ease-in-out 3;
}

@keyframes openme-shake {
  0% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-2px) rotate(-1deg); }
  30% { transform: translateX(3px) rotate(1deg); }
  45% { transform: translateX(-3px) rotate(-1deg); }
  60% { transform: translateX(2px) rotate(1deg); }
  75% { transform: translateX(-1px) rotate(0deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.passcodeLock {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #0b1020 0%, #121a33 55%, #0b2440 120%);
  backdrop-filter: blur(12px);
}

.passcodeLock[hidden] {
  display: none;
}

.passcodeLock__content {
  text-align: center;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 20, 40, 0.85);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  min-width: 280px;
}

.passcodeLock__title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.85);
}

.passcodeLock__input {
  width: 100%;
  padding: 14px 18px;
  font-size: 28px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  text-align: center;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.passcodeLock__input:focus {
  border-color: rgba(255, 95, 162, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 95, 162, 0.2);
}

.passcodeLock__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.1em;
}

.passcodeLock__error {
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(255, 100, 100, 0.9);
  font-weight: 650;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.85);
}

@keyframes passcode-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80% { transform: translateX(8px); }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.modal__content {
  position: relative;
  width: min(520px, 92vw);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 20, 40, 0.78);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  padding: 16px 16px 18px;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.modal__title {
  margin: 6px 40px 12px 0;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.modal__subtitle {
  margin: -6px 0 12px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.modal__image {
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  display: block;
}

.modal__imgPlaceholder {
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  height: 240px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.panel__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Leave room for the top-right weather block */
  padding-right: 150px;
}

.nameRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.name {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 30px;
  line-height: 1.05;
  /* Soft black outline + lift for readability on bright skies */
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 0 2px rgba(0, 0, 0, 0.75),
    0 10px 26px rgba(0, 0, 0, 0.35);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px; /* Reduced padding */
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 650;
  font-size: 11px; /* Reduced font size */
  backdrop-filter: blur(12px);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}

.sub {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.75);
}

.clock {
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.92);
  font-size: 32px;
  line-height: 1.1;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.85);
}

.dot {
  opacity: 0.7;
}

.status {
  font-weight: 650;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.85);
}

/* Weather positioning */
.cardGrid {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  z-index: 10;
  pointer-events: none; /* Let clicks pass through */
}

.panel--idan .cardGrid {
  top: 16px;
  right: 16px;
  align-items: flex-end;
}

.panel--ira .cardGrid {
  top: 16px;
  right: 16px;
  align-items: flex-end;
}

.card {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  text-align: right;
  /* Hide the Today card completely to save space? 
     Or keep it but minimal. */
}

/* Hide the Today forecast detailed row to save space */
.card[aria-label*="Today"] {
    display: none; 
}

.card__title {
  display: none; /* Hide labels "Right now", "Today" */
}

.big {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  justify-content: flex-end;
}

.emoji {
  font-size: 24px; /* Reduced from 34px */
  line-height: 1;
}

.temp {
  font-size: 24px; /* Reduced from 40px */
  font-weight: 850;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--muted);
  font-size: 11px; /* Reduced */
}

.row {
  display: none; /* Hide detailed stats */
}

.character {
  position: absolute;
  bottom: 80px;
  right: 16px;
  font-size: 156px; /* Increased by 30% from 120px */
  line-height: 1;
  height: 40%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
  transform-origin: bottom center;
  will-change: transform;
}

.panel__footer {
  margin-top: auto;
  padding-top: 4px;
  /* Hide footer text if it interferes with bottom weather? */
}

.tiny {
  font-size: 10px;
  color: var(--tiny);
}


/* Landscape */
@media (min-width: 900px) and (orientation: landscape) {
  .app {
    flex-direction: row;
  }
  .panel--idan {
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }
  .panel--ira {
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* Positioning adjustment for landscape if needed */
  .panel--ira .cardGrid {
      top: 16px;
  }
}