:root{
  --sky-night-top:#0b1030; --sky-night-bottom:#1b2a4a;
  --sun:#ffcf5c; --sun-core:#fff3d0; --sun-glow:#ffe9a8; --moon:#e9f0fb; --moon-shadow:#c7d3e8; --moon-glow:#aebbdd;
  --panel:#1e2a38; --panel-cell:#3f5a73; --panel-active:#6fd8ff;
  --card-bg:#fdf9ef; --card-bg-soft:#f8f2e1; --card-border:#e4d7b6; --ink:#2b2620; --ink-soft:#6b6154;
  --money:#3e8e52; --loss:#c24b3b; --accent:#e8a33d; --accent-deep:#c9821f; --accent-soft:#f6d9a4;
  --track:#efe6cf;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:radial-gradient(circle at 18% -10%, #f6ecd2 0%, #e9e2cd 42%, #ded4b8 100%);
  color:var(--ink);
  min-height:100vh;
  padding:18px;
}
.wrap{max-width:1080px;margin:0 auto;}
h1{
  font-size:1.6rem; margin:0 0 4px; font-weight:800; letter-spacing:-0.015em;
  display:flex; align-items:center; gap:9px;
}
h1 .sun-badge{
  display:inline-flex; width:30px; height:30px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 35% 30%, var(--sun-core), var(--sun) 55%, var(--accent-deep) 100%);
  box-shadow:0 0 14px 3px rgba(232,163,61,0.5);
  cursor:pointer; transition:transform 0.1s;
}
h1 .sun-badge:active{transform:scale(0.9);}
.tagline{color:var(--ink-soft); margin:0 0 18px; font-size:0.92rem;}

.layout{
  display:grid; grid-template-columns: 1fr; gap:16px;
}
@media(min-width:840px){
  .layout{grid-template-columns: 1.05fr 1fr;}
}

/* ---------- SCENE ---------- */
.scene-card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px;
  overflow:hidden; box-shadow:0 10px 0 -4px rgba(0,0,0,0), 0 4px 14px rgba(60,45,20,0.10), 0 1.5px 0 var(--card-border);
}
.site-tabs{
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--card-border); background:var(--card-bg-soft);
}
.site-tab{
  border:1px solid var(--card-border); background:#fff; border-radius:20px;
  padding:5px 12px; font-size:0.75rem; font-weight:700; color:var(--ink-soft);
  cursor:pointer; font-family:inherit; white-space:nowrap; transition:background 0.15s, color 0.15s;
}
.site-tab.active{background:var(--accent); border-color:var(--accent-deep); color:#fff;}
.site-tab-add{border-style:dashed; color:var(--accent-deep); background:transparent;}
.site-tab-add:disabled{opacity:0.45; cursor:not-allowed;}
.site-summary{padding:6px 14px 0; font-size:0.7rem; color:var(--ink-soft);}
.scene{
  position:relative; height:300px; overflow:hidden;
  transition:background 0.6s linear;
}
.stars{position:absolute; inset:0; transition:opacity 0.6s linear;}
.star{position:absolute; width:2px; height:2px; background:#fff; border-radius:50%;}
.celestial{
  position:absolute; width:34px; height:34px; border-radius:50%;
  transition:opacity 0.4s linear; left:0; bottom:0;
}
.sun{
  background:radial-gradient(circle at 35% 30%, var(--sun-core) 0%, var(--sun) 55%, var(--accent-deep) 100%);
  box-shadow:0 0 26px 10px var(--sun-glow);
}
.moon{
  background:radial-gradient(circle at 30% 30%, var(--moon) 0%, var(--moon-shadow) 100%);
  box-shadow:0 0 16px 6px var(--moon-glow), inset -8px -3px 0 0 rgba(180,195,220,0.55);
}

.stage{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:22px;
}

.roofplan-wrap{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  perspective:480px;
}
.roofplan{
  width:190px; height:120px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 20px),
    var(--track);
  border:1px solid var(--card-border); border-radius:4px;
  box-shadow:0 18px 24px -14px rgba(30,25,15,0.45);
  transform-origin:center bottom;
  transform: rotateX(66deg);
}
.roof-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:16px;
  gap:3px; padding:9px; height:100%;
}
.panel-unit{
  border:1px solid #8698a3; background:#eef2f4; border-radius:2px;
  transition:background 0.3s linear, box-shadow 0.3s linear;
}
.panel-unit.active{background:var(--panel-active); border-color:#3f9fcf; box-shadow:0 0 5px 1px rgba(111,216,255,0.65);}
.panel-extra{
  grid-column:1/-1; font-size:0.6rem; color:var(--ink-soft); font-weight:700; text-align:center;
}
.roofplan.upgraded{width:240px;}
.roofplan.upgraded .roof-grid{grid-template-columns:repeat(8, 1fr);}
.roofplan-caption{font-size:0.68rem; color:var(--ink-soft); font-weight:600;}

.battery-gauge{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.battery-gauge-track{
  width:22px; height:110px; background:var(--track); border:1px solid var(--card-border);
  border-radius:5px; display:flex; align-items:flex-end; overflow:hidden;
}
.battery-gauge-fill{
  width:100%; background:linear-gradient(180deg,#6fd8ff,#3f9fcf);
  transition:height 0.4s linear;
}
.battery-gauge-caption{font-size:0.68rem; color:var(--ink-soft); font-weight:600; text-align:center; line-height:1.3;}

.scene-footer{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 12px;
  padding:11px 16px; border-top:1px solid var(--card-border); font-size:0.85rem;
  background:var(--card-bg-soft);
}
.clock{font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:0.02em;}
.season-tag{
  display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--ink-soft);
}
.speed-toggle{display:flex; gap:3px; flex-wrap:wrap; background:#fff; padding:3px; border-radius:10px; border:1px solid var(--card-border);}
.speed-toggle button{
  border:none; background:transparent; border-radius:7px; padding:4px 8px;
  font-size:0.74rem; cursor:pointer; font-weight:700; color:var(--ink-soft); transition:background 0.15s, color 0.15s;
}
.speed-toggle button:hover{background:var(--accent-soft);}
.speed-toggle button.active{background:var(--accent); color:#fff; box-shadow:inset 0 1px 2px rgba(0,0,0,0.15);}

.tariff-panel{
  display:flex; flex-wrap:wrap; gap:9px;
  padding:12px 16px 16px; background:var(--card-bg-soft);
}
.tariff-card{
  background:#fff; border:1px solid var(--card-border); border-radius:10px;
  padding:8px 12px; flex:1 1 150px; min-width:150px;
}
.tariff-card .label{font-size:0.68rem; color:var(--ink-soft); font-weight:600;}
.tariff-card .value{font-size:1rem; font-weight:800; margin-top:2px; color:var(--accent-deep);}

/* ---------- DASHBOARD ---------- */
.panel-card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px;
  padding:18px 18px 14px; box-shadow:0 4px 14px rgba(60,45,20,0.10), 0 1.5px 0 var(--card-border);
}
.money-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px;}
.reset-btn{
  border:1px solid var(--card-border); background:#fff; border-radius:9px; padding:6px 11px;
  font-size:0.72rem; font-weight:700; color:var(--ink-soft); cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:border-color 0.15s, color 0.15s;
}
.reset-btn:hover{border-color:var(--accent); color:var(--accent-deep);}
.money{font-size:2rem; font-weight:800; letter-spacing:-0.02em;}
.money.neg{color:var(--loss);}
.netflow{
  display:inline-block; font-size:0.78rem; font-weight:800; margin-top:2px;
  padding:2px 8px; border-radius:20px;
}
.netflow.pos{color:var(--money); background:rgba(62,142,82,0.12);}
.netflow.neg{color:var(--loss); background:rgba(194,75,59,0.12);}

.stat-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:16px;
}
.stat{
  background:#fff; border:1px solid var(--card-border); border-left:3px solid var(--accent-soft);
  border-radius:10px; padding:8px 11px;
}
.stat .label{font-size:0.68rem; color:var(--ink-soft); text-transform:none; font-weight:600;}
.stat .value{font-size:1.08rem; font-weight:800; margin-top:2px;}

.battery-wrap{margin-bottom:16px;}
.battery-bar{
  height:15px; background:var(--track); border-radius:8px; overflow:hidden; border:1px solid var(--card-border);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.08);
}
.battery-fill{height:100%; background:linear-gradient(90deg,#8ee3ff,#3f9fcf); transition:width 0.4s linear;}

.power-flows{margin-bottom:16px;}
.power-flow-row{margin-bottom:10px;}
.power-flow-row:last-child{margin-bottom:0;}
.power-flow-row .label{
  font-size:0.75rem; color:var(--ink-soft); font-weight:600; margin-bottom:4px;
  display:flex; justify-content:space-between; gap:8px;
}
.feedin-fill{background:linear-gradient(90deg,#a8e08a,var(--money));}
.direct-fill{background:linear-gradient(90deg,#e0a3d0,#a8437f);}
.charge-fill{background:linear-gradient(90deg,#ffd98a,var(--accent-deep));}

h2{
  font-size:0.82rem; margin:0 0 9px; font-weight:800; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:0.06em;
}

.chart-wrap{
  height:100px; margin-bottom:16px; background:#fff; border:1px solid var(--card-border);
  border-radius:10px; padding:8px;
}

.shop-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:16px;}
.shop-btn{
  position:relative;
  background:#fff; border:1px solid var(--card-border); border-radius:11px; padding:10px 11px;
  text-align:left; cursor:pointer; font-family:inherit;
  transition:border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.shop-btn .name{font-size:0.82rem; font-weight:800; display:flex; align-items:center; gap:5px;}
.shop-btn .effect{font-size:0.7rem; color:var(--ink-soft); margin-top:2px;}
.shop-btn .cost{font-size:0.78rem; font-weight:700; margin-top:6px; color:var(--accent-deep);}
.shop-btn .cost .strike{text-decoration:line-through; color:var(--ink-soft); font-weight:600; margin-right:5px; font-size:0.85em;}
.shop-btn:disabled{opacity:0.42; cursor:not-allowed;}
.shop-btn:not(:disabled):hover{border-color:var(--accent); box-shadow:0 3px 8px rgba(201,130,31,0.16); transform:translateY(-1px);}
.shop-btn:not(:disabled):active{transform:translateY(0);}
.offer-badge{
  position:absolute; top:-8px; right:-6px; background:var(--loss); color:#fff;
  font-size:0.6rem; font-weight:800; padding:3px 7px; border-radius:20px;
  box-shadow:0 2px 5px rgba(0,0,0,0.25); animation:offer-pulse 1.3s ease-in-out infinite;
}
@keyframes offer-pulse{
  0%,100%{transform:scale(1);} 50%{transform:scale(1.08);}
}
.shop-btn.premium{
  border:1px solid var(--accent-deep);
  background:linear-gradient(180deg, #fff 0%, var(--accent-soft) 220%);
}
.shop-btn.premium .effect{color:var(--ink-soft);}
.premium-badge{
  position:absolute; top:-8px; left:-6px;
  background:linear-gradient(135deg,#f0c369,#c9821f); color:#fff;
  font-size:0.58rem; font-weight:800; padding:3px 7px; border-radius:20px; letter-spacing:0.03em;
  box-shadow:0 2px 5px rgba(0,0,0,0.25);
}

.log{
  background:#fff; border:1px solid var(--card-border); border-radius:10px;
  padding:9px 11px; height:140px; overflow-y:auto; font-size:0.78rem;
}
.log::-webkit-scrollbar{width:7px;}
.log::-webkit-scrollbar-thumb{background:var(--card-border); border-radius:6px;}
.log div{padding:3.5px 0; border-bottom:1px dashed var(--card-border); color:var(--ink-soft);}
.log div:last-child{border-bottom:none;}
.log div.fresh{color:var(--ink); font-weight:600;}

.footstats{
  margin-top:12px; font-size:0.74rem; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:10px;
}

.gameover-overlay{
  position:fixed; inset:0; background:rgba(18,14,8,0.88);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.gameover-overlay.show{display:flex;}
.gameover-box{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px;
  padding:30px 28px; max-width:360px; text-align:center; color:var(--ink);
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
}
.gameover-box h2{
  font-size:1.4rem; margin:0 0 6px; text-transform:none; letter-spacing:normal; color:var(--ink);
}
.gameover-box p{font-size:0.85rem; color:var(--ink-soft); margin:0 0 16px;}
.gameover-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; text-align:left;
}
.gameover-stats .stat{padding:8px 10px; border-left-color:var(--card-border);}
.gameover-box button{
  background:var(--accent); border:1px solid var(--accent-deep); color:#fff; font-weight:800;
  border-radius:10px; padding:10px 22px; font-size:0.9rem; cursor:pointer; font-family:inherit;
  box-shadow:0 3px 8px rgba(201,130,31,0.35); transition:transform 0.1s;
}
.gameover-box button:hover{transform:translateY(-1px);}

.pause-banner{
  display:none; align-items:center; gap:8px;
  background:var(--accent-soft); border:1px solid var(--accent-deep); color:var(--accent-deep);
  font-weight:700; font-size:0.82rem; border-radius:10px; padding:9px 14px; margin-bottom:14px;
}

/* ---------- LANDING / TOP-LISTE ---------- */
.card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px;
  padding:24px; box-shadow:0 4px 14px rgba(60,45,20,0.10), 0 1.5px 0 var(--card-border);
  max-width:420px; margin:60px auto;
}
.card label{font-size:0.8rem; font-weight:700; color:var(--ink-soft); display:block; margin-bottom:6px;}
.card input[type="text"]{
  width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--card-border);
  font-size:1rem; font-family:inherit; margin-bottom:12px;
}
.card button.primary{
  background:var(--accent); border:1px solid var(--accent-deep); color:#fff; font-weight:800;
  border-radius:10px; padding:10px 18px; font-size:0.95rem; cursor:pointer; font-family:inherit;
  box-shadow:0 3px 8px rgba(201,130,31,0.35); width:100%;
}
.card .error{color:var(--loss); font-size:0.82rem; margin:8px 0 0; min-height:1.2em;}
.card .hint{color:var(--ink-soft); font-size:0.78rem; margin-top:14px; line-height:1.5;}
.card .existing-link{
  background:#fff; border:1px solid var(--card-border); border-radius:10px; padding:12px 14px; margin-bottom:16px;
}
.card .existing-link a{color:var(--accent-deep); font-weight:700; text-decoration:none;}
.card .existing-link a:hover{text-decoration:underline;}

.leaderboard-table{width:100%; border-collapse:collapse; font-size:0.9rem;}
.leaderboard-table th, .leaderboard-table td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--card-border);}
.leaderboard-table th{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft);}
.leaderboard-table td.rank{font-weight:800; color:var(--accent-deep); width:2.5em;}
.top-link{display:inline-block; margin-top:14px; font-size:0.82rem; color:var(--accent-deep); text-decoration:none; font-weight:700;}
.top-link:hover{text-decoration:underline;}