:root{
  --bg:#050510; --fg:#eaf2ff; --muted:#94a3c7;
  --glass:rgba(255,255,255,.06);
  --border:#ffffff1a;
  --accent:#7aa2ff; --accent2:#c27dff;
}


*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
  color:var(--fg); background:var(--bg); overflow:hidden;
}

/* 3D vászon teljes háttér */
#universe{position:fixed; inset:0; display:block;}

/* HUD layout */
.hud{position:fixed; inset:0; display:grid; place-items:center; pointer-events:none}

/* Középső óra kártya */
.clock{
  pointer-events:auto;
  backdrop-filter: blur(12px);
  background: var(--glass);
  border:1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 10px 40px #000a;
  padding: 24px 36px;
  min-width: 320px; max-width: min(92vw, 780px);
  text-align:center; letter-spacing:.4px;
}
.time{font-weight:800; font-size: clamp(40px, 9vw, 96px)}
.date{margin-top:6px; color:var(--muted); font-size: clamp(14px, 2.2vw, 18px)}
.extra{margin-top:12px; color:var(--muted); display:grid; gap:4px; font-size: clamp(12px, 2vw, 16px)}
.extra strong{color:var(--fg)}

/* Oldalsó panelek */
.panel{
  position:fixed; top:16px; pointer-events:auto;
  backdrop-filter: blur(10px);
  background: var(--glass);
  border:1px solid var(--border);
  border-radius:16px; box-shadow: 0 8px 30px #000a;
  padding:12px 14px; color:var(--muted); min-width: 260px;
}
.panel.left{left:16px}
.panel.right{right:16px; text-align:right}

.panel-head{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--fg)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #7aa2ffaa}
.dot.purple{background:var(--accent2); box-shadow:0 0 12px #c27dffaa}
.panel .label{opacity:.9; font-size:12px}
.panel .value{color:var(--fg); font-weight:700; letter-spacing:.2px; margin-top:2px}
.panel-foot{margin-top:6px; font-size:12px; opacity:.8}
.wx-forecast ul, .wx-forecast li{list-style:none; margin:0; padding:0}
.wx-forecast li{display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px dashed #ffffff12}
.wx-forecast li:last-child{border-bottom:0}

/* Mobil */
@media (max-width: 900px){
  .panel{min-width:min(86vw, 360px); font-size:13px}
  .panel.left{left:12px; top:12px}
  .panel.right{right:12px; top:12px}
  .clock{padding:16px 18px; max-width: calc(100vw - 24px)}
  .time{font-size: clamp(36px, 16vw, 72px)}
}

/* Ultra kicsi (pl. mobil álló) – panelek egymás alatt */
@media (max-width: 560px){
  .panel.left{left:50%; transform:translateX(-50%); top:10px}
  .panel.right{left:50%; transform:translateX(-50%); right:auto; top:auto; bottom:10px; text-align:center}
}
/* Időjárás ikonok */
.wx-forecast li img {
  width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 0 4px #0006);
}

/* Dark/Light mód */
:root.light {
  --bg:#f0f3ff; --fg:#222; --muted:#444;
  --glass:rgba(0,0,0,.04);
  --border:#00000015;
  --accent:#1a73e8; --accent2:#9c27b0;
}
body.light { background: var(--bg); }
.toggle-theme {
  position: fixed; bottom: 16px; right: 16px;
  background: var(--glass); backdrop-filter: blur(8px);
  border:1px solid var(--border); border-radius: 10px;
  padding:8px 12px; font-size:13px; color:var(--fg);
  cursor:pointer; box-shadow:0 4px 20px #0004;
}

.panel-sep {
  margin: 10px 0;
  border-top: 1px solid #ffffff22;
}

.panel-sep {
  margin: 12px 0;
  border-top: 1px solid #ffffff22;
}

.panel-action {
  margin-top: 8px;
  text-align: center;
}

.shopping-button {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: var(--glass);
  color: var(--fg);
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: all 0.25s ease;
}

.shopping-button:hover {
  background: var(--accent);
  color: #fff;
}