:root{
  --ink:#EFF5FA;              /* main text color */
  --ink-dim:rgba(239,245,250,.72);   /* softer text, e.g. the condition line */
  --brass:#CDA463;             /* the gold/brass accent color */
  --brass-soft:rgba(205,164,99,.32);
  --glass:rgba(12,15,22,.40);       /* translucent card background */
  --glass-hi:rgba(12,15,22,.55);    /* slightly stronger version, for hover/popups */
  --glass-border:rgba(205,164,99,.28);
  --radius:16px;                /* corner rounding used on the gauge cards */
}

*{
  box-sizing:border-box;
}
html,body{
  margin:0;
  padding:0;
  height:100%;
}
body{
  font-family:'JetBrains Mono',monospace;
  color:var(--ink);
  overflow-x:hidden;
  min-height:100vh;
  background:#0b0f18; 
}

#sky{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}
.veil{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none; 
  background:linear-gradient(180deg,
    rgba(0,0,0,.04) 0%,
    rgba(0,0,0,.30) 32%,
    rgba(0,0,0,.34) 72%,
    rgba(0,0,0,.16) 100%);
}

.stage{
  position:relative;
  z-index:2;
  min-height:100vh;
  max-width:640px;
  margin:0 auto;
  padding:28px 24px 22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
}

.chrome{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.place{display:flex;align-items:center;gap:9px;min-width:0;}
.place span.name{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:60vw;
}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--brass);
  flex:none;
  box-shadow:0 0 0 3px var(--brass-soft);
}
.dot.loading{animation:pulse 1.1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.4;}50%{opacity:1;}}
.localtime{font-variant-numeric:tabular-nums;letter-spacing:.08em;}

.hero{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.icon{
  width:104px;height:104px;
  margin-bottom:2px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.4));
}
.icon svg{width:100%;height:100%;display:block;}
.temp{
  font-family:'Fraunces',serif;
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(64px,20vw,124px); 
  line-height:.95;
  letter-spacing:-.02em;
  text-shadow:0 6px 26px rgba(0,0,0,.42);
}
.cond{
  font-family:'Fraunces',serif;
  font-size:clamp(16px,3.6vw,20px);
  font-weight:400;
  font-style:italic;
  color:var(--ink-dim);
  text-shadow:0 2px 12px rgba(0,0,0,.4);
  margin-top:2px;
}

.readouts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.gauge{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:12px 8px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  text-align:center;
}
.g-label{
  font-size:9.5px;
  letter-spacing:.13em;
  color:var(--brass);
  text-transform:uppercase;
}
.g-value{
  font-size:15px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.controls{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
}
.search-wrap{position:relative;flex:1;min-width:0;}
#citySearch{
  width:100%;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:999px;
  padding:11px 16px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#citySearch::placeholder{color:var(--ink-dim);}
#citySearch:focus-visible,
button:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
}
.suggestions{
  position:absolute;
  bottom:calc(100% + 8px);
  left:0;right:0;
  background:var(--glass-hi);
  border:1px solid var(--glass-border);
  border-radius:12px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  max-height:220px;
  overflow-y:auto;
}
.suggestions button{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  color:var(--ink);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  padding:10px 14px;
  cursor:pointer;
  border-bottom:1px solid rgba(205,164,99,.14);
}
.suggestions button:last-child{border-bottom:none;}
.suggestions button:hover,
.suggestions button:focus-visible{background:rgba(205,164,99,.16);}

#locateBtn{
  flex:none;
  width:42px;height:42px;
  border-radius:50%;
  background:var(--glass);
  border:1px solid var(--glass-border);
  color:var(--brass);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
#locateBtn svg{width:18px;height:18px;}
#locateBtn:hover{background:var(--glass-hi);}
#locateBtn.spinning svg{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.foot{
  font-size:10px;
  letter-spacing:.05em;
  color:var(--ink-dim);
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}

.toast{
  position:fixed;
  left:50%;bottom:22px;
  transform:translateX(-50%);
  z-index:5;
  background:var(--glass-hi);
  border:1px solid var(--glass-border);
  border-radius:999px;
  padding:10px 18px;
  font-size:12px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  max-width:88vw;
  text-align:center;
}

@media (max-width:420px){
  .readouts{grid-template-columns:repeat(2,1fr);}
}
@media (prefers-reduced-motion:reduce){
  .dot.loading{animation:none;}
  #locateBtn.spinning svg{animation:none;}
}