* {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

[x-cloak] { display: none !important; }

/* phone portrait mode */
:root {
  --dial-size: 95vw;
  --vertical-center: 50%;
}


/* desktop landscape */
@media (orientation: landscape) {
  :root {
    --dial-size: 70vh;
    --orbit-radius: 44;
    --orb-temp-offset: 4.5; /* (orb diam - temp circle diam) / 2 */
  }
}


/* tablet landscape */
@media (pointer: coarse) and (min-width: 768px) and (orientation: landscape) {
  :root {
    --dial-size: 40vw;
  }
}

/* tablet portrait */
@media (pointer: coarse) and (min-width: 768px) and (orientation: portrait) {
  :root {
    --dial-size: 60vw;
  }
}

/* phone portrait */
@media (pointer: coarse) and (max-width: 767px) and (orientation: portrait) {
  .days-mask {
    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 50%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 50%);
  }
}

:root {
  --dial-fraction: calc(var(--dial-size) / 70);
}


@media (pointer: fine) {
  html, body {
    overscroll-behavior: none;
  }
}

/* phones & tablets */
@media (pointer: coarse) {

  :root {
    --vertical-center: 50%; /* same center-y as desktop */
    --orbit-radius: 46;
  }

  html, body {
    overscroll-behavior-x: none;
  }

  body.capacitor.first-load {
    background-image: none !important;
    background-color: #270778;
  }
  
  .days {
    touch-action: none;
  }

}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 20px;
  transition: background 1s linear;
  font-family: "DM Mono", monospace;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-user-select: none;
  user-select: none;
}


@media (pointer: coarse) {
  .temp-unit-toggle {
    top: auto;
    bottom: calc(var(--dial-fraction) * 2);
    right: calc(var(--dial-fraction) * 2);
  }

  .capacitor .temp-unit-toggle {
    padding-bottom: 21px;
  }
}

#starfield {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

#starfield.visible {
  opacity: 1;
}

.page-centered {
  left: 50%;
  top: var(--vertical-center);
  transform: translate(-50%, -50%) translateZ(0);
  position: absolute; 
}

.centered {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  position: absolute; 
}

.glow,
.sky-circle,
.highlow-circle,
.temperature-circle,
.center-circle,
.selector,
.center-dial {
  will-change: transform, opacity;
}

.loader {
  position: fixed;
  width: 24.5vh;
  height: 24.5vh;
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  background: conic-gradient(#ffe29d 0deg, #f3c558 360deg);
}

.loading .loader {
  opacity: 1;
  animation: spin 0.5s linear infinite;
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.today {
  width: var(--dial-size);
  height: var(--dial-size);
  position: fixed;
}

.loading .today, .loading .days, .loading .selection-ray, .loading .temp-arc {
  opacity: 0;
}

.loading .selection-ray {
  display: none;
}

.today.collapsing .sky-circle, .today.collapsing .selector {
  transform: scale(0) rotate(-540deg);
}

.today.collapsing .temperature-circle, .today.collapsing .highlow-circle {
  transform: translate(-50%, -50%) scale(0) rotate(180deg);
}

.today.collapsing .highlow-circle,
.today.collapsing .center-circle,
.today.collapsing .clock-labels,
.today.collapsing .selector,
.today.collapsing .glow,
.today.collapsing .precipitation-hour,
.today.collapsing .selection-ray,
.today.collapsing .temp-labels {
  opacity: 0;
} 

.hover-zone {
  width: var(--dial-size);
  height: var(--dial-size);
  position: fixed;
  border-radius: 50%;
  z-index: 100;
  opacity: 0;
  touch-action: none;
}

.circles { width: 100%; height: 100%; transform: rotate(180deg); }

.sky-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 10;
  position: absolute;
  transition: transform 0.5s ease;
}

.day-arc-label {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 12;
  pointer-events: none;
  transform: rotate(180deg);
}

.day-arc-label text {
  font-family: "DM Mono", monospace;
  font-size: 8px;
  font-weight: 100;
  font-style: italic;
  fill: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.4px;
  opacity: 0.4;
  text-transform: lowercase;
}
/*
.dragging .day-arc-label {
  display: none;
}*/

.midnight-marker {
  width: 1px;
  height: calc(var(--dial-size) / 2);
  z-index: 12;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 54%,
    rgba(255, 255, 255, 0.6) 54%,
    rgba(255, 255, 255, 0.2) 100%
  );
  position: fixed;
  top: 50%;
  left: 50%;
}

.day-flash {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 11;
  pointer-events: none;
  background: white;
  opacity: 0;
  mask-image: radial-gradient(
    circle,
    transparent 26%,
    black 27%
  );
  -webkit-mask-image: radial-gradient(
    circle,
    transparent 26%,
    black 27%
  );
}

.day-flash.flash {
  animation: day-flash 0.3s ease-out;
}

@keyframes day-flash {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}

.history-mask {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 15;
  pointer-events: none;
  top: 50%;
  left: 50%;
}

.highlow-circle {
  width: 54%;
  height: 54%;
  border-radius: 50%;
  z-index: 20;
  mix-blend-mode: hard-light;
  opacity: 0.7;
  top: 50%;
  left: 50%;
}
.temperature-circle {
  width: 50%; height: 50%; border-radius: 50%; z-index: 30;
  top: 50%;
  left: 50%;
}
.center-circle {
  width: 35%; height: 35%; border-radius: 50%; z-index: 40; 
  top: 50%;
  left: 50%;
}

.highlow-circle, .temperature-circle, .temp-labels, .clock-labels, .glow, .precipitation-hour {
  transition: opacity 0.5s ease;
}

.temperature-circle, .highlow-circle, .selector {
  transition: transform 0.5s ease;
}

.center-dial {
  width: 100%; height: 100%; border-radius: 50%;
  background: conic-gradient(white 0deg, black 360deg);
  mix-blend-mode: soft-light; opacity: 0.2;
}

.selector {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: conic-gradient(rgba(255, 255, 255, 0.5) 0deg, transparent 15deg);
  border-radius: 50%; mix-blend-mode: overlay; z-index: 50;
  mask-image: radial-gradient(circle at center, transparent 0%, transparent 5%, black 20%);
  -webkit-mask-image: radial-gradient(circle at center, transparent 0%, transparent 5%, black 20%);
}

.selector-hidden {
  opacity: 0;
  pointer-events: none;
}

.condition {
  width: calc(var(--dial-fraction) * 12.25);
  height: calc(var(--dial-fraction) * 12.25);
  z-index: 100;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.day-condition {
  width: 45%; height: 45%;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}

.glow {
  width: 100%; height: 100%; border-radius: 50%;
  background: #ffecc1; filter: blur(20px);
  mix-blend-mode: overlay; opacity: 0.5;
}

.highlow-circle { mix-blend-mode: normal !important; }
.center-dial { mix-blend-mode: normal !important; }
.selector { mix-blend-mode: normal !important; }
.clock-label { mix-blend-mode: normal !important; }

.loading-text { font-family: monospace; color: #555; }

.clock-labels, .temp-labels {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
}

.clock-label, .temp-label {
  position: absolute;
  top: 50%;
  left: 50%;    
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none; 
  pointer-events: none;
  font-weight: 100;
  mix-blend-mode: overlay;
}

.clock-label {
  font-style: italic;
  color: black;
  transition: color 0.5s ease;
  opacity: 0.5;
  width: calc(var(--dial-fraction) * 5);
  height: calc(var(--dial-fraction) * 5);
  font-size: calc(var(--dial-fraction) * 2);
}

.temp-label {
  color: white;
  font-style: normal;
  font-weight: 400;
  border-radius: 50%;
  height: 40px;
  z-index: 60;
  font-size: calc(var(--dial-fraction) * 2);
  width: calc(var(--dial-fraction) * 5);
  height: calc(var(--dial-fraction) * 5);
  font-style: italic;
  opacity: 0.8;
}

.temp-label-high {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
  color: black;
}

.temp-label-low {
  opacity: 1;
  background-color: rgba(17, 6, 41, 0.5);
}

.temp-label-active {
  background-color: rgba(255,241,255,0.85);
  mix-blend-mode: normal;
  opacity: 1 !important;
  text-shadow: none;
  color: black;
  width: calc(var(--dial-fraction) * 8);
  height: calc(var(--dial-fraction) * 8);
  font-size: calc(var(--dial-fraction) * 3.1);
}

.temp-label .temp-units {
  font-weight: 100;
}

.other-day {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 30;
  top: 50%;
  left: 50%;
  will-change: auto;
  animation: fadeIn 0.5s ease;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.selected-day {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  outline: 1px solid rgba(255, 255, 255, 1);
}

@keyframes fadeIn {
  from { opacity: 0; }
}

.other-day:hover {
  cursor: pointer;
}
/*
.dragging .other-day {
  transition: opacity 0.2s ease, transform 0.2s ease;
}*/

.scrolling .other-day {
  transition: none !important;
}

.orb-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg);
  will-change: transform;
}

.day-temp {
  position: absolute;
  border-radius: 50%;
  width: calc(var(--dial-fraction) * 4);
  height: calc(var(--dial-fraction) * 4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--dial-fraction) * 1.6);
  white-space: nowrap;
  font-style: italic;
  font-weight: 500;
  color: white;
}

.day-temp .temp-units {
  opacity: 0.6;
  font-weight: 300;
}

.day-high {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  top: 0;
  right: 0;
}

.day-low {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  bottom: 0;
  left: 0;
}

.selected-day .day-high {
  background-color: rgba(255, 255, 255, 1);
}

.selected-day .day-low {
  background-color: rgba(0, 0, 0, 1);
}

.days-mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 100;
  pointer-events: none;
}

.days {
  width: 110vh;
  height: 110vh;
  position: fixed;
  border-radius: 50%;
  z-index: 100;
  transform: translate(-50%, -50%) translateZ(0);
  pointer-events: auto;
  will-change: transform;
}

.days.transitioning {
  transition: transform 0.4s ease-out;
}

.days.transitioning .orb-content {
  transition: transform 0.4s ease-out;
}

.day-label {
  position: absolute;
  top: 0.2vh;
  padding: 3px 10px;
  border-radius: 30px;
  font-size: 1.7vh;
  font-style: italic;
  transition: opacity 0.5s ease;
  color: black;
  text-transform: lowercase;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 0 5px rgba(255,255,255,0.5);
  text-align: center;
}

.selected-day .day-label, .selected-day .day-date {
  color: white;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.day-date {
  position: absolute;
  bottom: 0.3vh;
  padding: 3px 10px;
  border-radius: 30px;
  font-size: 1.5vh;
  font-style: italic;
  color: black;
  font-weight: 400;
  white-space: nowrap;
  text-shadow: 0 0 5px rgba(255,255,255,0.5);
  text-align: center;
  opacity: 0.7;
}


.selection-ray {
  position: fixed;
  top: var(--vertical-center);
  left: 50%;
  width: 200vh;
  height: 200vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  background: conic-gradient(
    from 200deg at 85% 15%,
    transparent 15deg,
    rgba(255, 255, 255, 0.6) 20deg,
    rgba(255, 255, 255, 0.6) 30deg,
    transparent 35deg
  );
  transform: translate(-50%, -50%);
}


.temp-arc {
  position: fixed;
  left: 50%;
  top: var(--vertical-center);
  width: calc(var(--dial-fraction) * 2 * var(--orbit-radius));
  height: calc(var(--dial-fraction) * 2 * var(--orbit-radius));
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  pointer-events: none;
  z-index: 25;
}

.dragging .temp-arc, .loading .temp-arc {
  display: none;
}

.low-temp-arc {
  transform: translate(
    calc(-50% - var(--dial-fraction) * var(--orb-temp-offset)),
    calc(-50% + var(--dial-fraction) * var(--orb-temp-offset))
  );
  border-color: rgba(0, 0, 0, 0.2);
}

.high-temp-arc {
  transform: translate(
    calc(-50% + var(--dial-fraction) * var(--orb-temp-offset)),
    calc(-50% - var(--dial-fraction) * var(--orb-temp-offset))
  );
  border-color: rgba(255, 255, 255, 0.3);
}


.temp-unit-toggle {
  position: fixed;
  bottom: calc(var(--dial-fraction) * 2);
  right: calc(var(--dial-fraction) * 2);
  z-index: 200;
  font-size: 24px;
  font-family: "DM Mono", monospace;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 10px;
  border-radius: 30px;
  cursor: pointer;
  opacity: 1;
  user-select: none;
  display: flex;
  gap: 0;
  line-height: 24px;
  height: 44px;
}

.main:has(.location-input:focus) .temp-unit-toggle {
  display: none;
}

.capacitor .temp-unit-toggle {
  margin-bottom: 15px;
}

.temp-unit-toggle.first-load {
  opacity: 0;
}

.temp-unit-toggle:hover {
  background: rgba(255, 255, 255, 0.4);
}

.night-hour .temp-unit-toggle {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.night-hour .temp-unit-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dragging .temp-unit-toggle {
  visibility: hidden;
}

.temp-unit-option {
  opacity: 0.3;
}

.temp-unit-option.active {
  opacity: 1;
}

.temp-unit-divider {
  opacity: 0.2;
  font-weight: 100;
  margin: 0 5px;
}


/*
.scrolling .rain-animation .drop {
  visibility: hidden;
}*/

@supports (-webkit-touch-callout: none) {
  /* Safari-only */
  .glow {
    display: none;
  }

  .dragging .glow {
    display: initial;
  }
  .highlow-circle { mix-blend-mode: normal; opacity: 0.5; }
  .center-dial { mix-blend-mode: normal; }
  .selector { mix-blend-mode: normal; }

  .selection-ray {
    opacity: 0.2 !important;
  }


}



/* tablet */
@media (pointer: coarse) and (min-width: 768px) {
  .day-temp {
    width: calc(var(--dial-fraction) * 5);
    height: calc(var(--dial-fraction) * 5);
    font-size: calc(var(--dial-fraction) * 2);
  }

  .day-date {
    font-size: calc(var(--dial-fraction) * 1.8);
  }

  .day-label {
    font-size: calc(var(--dial-fraction) * 2.3);
  }

  :root {
    --orb-temp-offset: 5.5;
  }


  .temp-unit-toggle {
    top: auto;
    bottom: calc(var(--dial-fraction) * 2);
  }
}


@media (max-width: 767px) {

  .highlow-circle,
  .center-dial,
  .selector,
  .clock-label {
    mix-blend-mode: normal !important;
  }
  .glow { display: none !important; }
  .day-label { backdrop-filter: none !important; }

  .scrolling .rain-animation .drop {
    visibility: hidden;
  }

  .sky-circle {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  }

  .day-date {
    font-size: calc(var(--dial-fraction) * 1.8);
  }

  .day-label {
    font-size: calc(var(--dial-fraction) * 2.3);
  }

  .day-temp {
    width: calc(var(--dial-fraction) * 5);
    height: calc(var(--dial-fraction) * 5);
    font-size: calc(var(--dial-fraction) * 2);
  }

  .temp-arc {
    display: none;
  }

  .temp-unit-toggle {
    top: auto;
    bottom: calc(var(--dial-fraction) * 2);
  }

  .selection-ray {
    display: none;
  }


}