:root{
  --bg:#0f1720; --panel:#17212b; --panel2:#1e2a36; --ink:#e7eef5; --muted:#9fb0c0;
  --line:#2a3946; --accent:#38d39f; --accent2:#5aa9ff; --warn:#ffb84d; --danger:#ff6b6b;
  --sun:#ffd257; --company:#5aa9ff; --load:#38d39f; --breach:#ff6b6b; --surplus:#26485a;
  --radius:12px; --shadow:0 2px 10px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
h1,h2,h3{line-height:1.2}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.2rem;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none}
.topbar-sub{color:var(--muted);font-size:.9rem}

/* hub */
.hub{max-width:960px;margin:2rem auto;padding:0 1.2rem}
.lead{color:var(--muted);max-width:64ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.5rem}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:.15s}
.card:hover{border-color:var(--accent)}
.card.disabled{opacity:.55}
.card h2{margin:.1rem 0 .4rem}
.card p{color:var(--muted);margin:.2rem 0 .8rem}
.badge{display:inline-block;font-size:.75rem;padding:.15rem .55rem;border-radius:999px;background:var(--panel2);color:var(--accent)}
.card.disabled .badge{color:var(--muted)}

/* game shell */
.game-wrap{max-width:820px;margin:1.2rem auto;padding:0 1.2rem}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1.3rem;box-shadow:var(--shadow)}
.panel h1{margin:.1rem 0 .5rem}
.panel h2{margin:.1rem 0 .3rem}

button.big,.big{display:inline-block;width:100%;margin-top:1rem;background:var(--accent);color:#06231a;
  border:none;border-radius:10px;padding:.75rem 1rem;font-weight:700;font-size:1rem;cursor:pointer}
button.big:hover{filter:brightness(1.06)}

.rules{color:var(--muted);padding-left:1.1rem}
.rules li{margin:.25rem 0}
.rules b,.lead b{color:var(--ink)}

/* battery */
.battery{position:relative;height:26px;border-radius:8px;background:var(--panel2);
  border:1px solid var(--line);overflow:hidden;margin:.3rem 0}
.battery-fill{position:absolute;inset:0 auto 0 0;transition:width .2s}
.bat-ok{background:linear-gradient(90deg,#2ea87f,var(--accent))}
.bat-mid{background:linear-gradient(90deg,#b98a2e,var(--sun))}
.bat-low{background:linear-gradient(90deg,#a23,var(--danger))}
.battery-label{position:relative;z-index:1;display:block;text-align:center;line-height:26px;
  font-weight:600;font-size:.85rem;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.startbat{margin:.6rem 0}

/* day */
.day-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.4rem}
.day-progress{color:var(--muted);font-size:.9rem}
.type-kantoor{background:#123;color:var(--accent2)}
.type-thuis{background:#132;color:var(--accent)}
.type-weekend{background:#221;color:var(--sun)}
.hint{color:var(--muted);font-size:.9rem;margin:.4rem 0 .8rem}

.ctrl{display:block;margin:1rem 0}
.ctrl>span{display:flex;justify-content:space-between;font-weight:600;margin-bottom:.3rem}
.ctrl em{color:var(--accent);font-style:normal}
input[type=range]{width:100%}
.appliances{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .8rem;margin-top:.2rem}
.appl-item{display:flex;align-items:center;gap:.4rem;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:.35rem .5rem;font-size:.9rem;cursor:pointer}
.appl-item em{margin-left:auto;color:var(--muted);font-style:normal;font-size:.82rem}

/* office continuity */
.office-panel{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.office-panel h3{margin:.1rem 0 .5rem;font-size:1rem}
.office-msg{font-size:.9rem;margin:.5rem 0 0}
.office-msg.ok{color:var(--accent)}
.office-msg.breach{color:var(--danger);font-weight:600}

/* preview */
.preview{margin-top:1rem;padding:.8rem;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.preview-warn{border-color:var(--warn)}
.preview-danger{border-color:var(--danger)}
.prev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem}
.prev-grid>div{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.5rem .6rem}
.prev-grid span{display:block;color:var(--muted);font-size:.8rem}
.prev-grid b{font-size:1.15rem}
.prev-grid .hi{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#062018;border:none}
.prev-grid .hi span{color:#062018}
.big-grid b{font-size:1.4rem}
.warn{color:var(--warn);font-weight:600;margin:.6rem 0 0}

/* flow table */
.flow{width:100%;border-collapse:collapse;margin:.8rem 0}
.flow th,.flow td{text-align:left;padding:.35rem .5rem;border-bottom:1px solid var(--line)}
.flow th{color:var(--muted)}
.flow td.neg{color:var(--danger)} .flow td.pos{color:var(--accent)}
.flow tr.total td{font-weight:700;border-top:2px solid var(--line);border-bottom:none}
.week-tbl th:nth-child(n+2),.week-tbl td:nth-child(n+2){white-space:nowrap}
.hint.mini{font-size:.82rem;margin:.5rem 0 0}

.explain{color:var(--muted);margin-top:1rem}
.explain b{color:var(--ink)}
.gameover h1{color:var(--danger)}

/* monochrome lijn-iconen */
.ic{width:1.05em;height:1.05em;vertical-align:-.18em;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dc-icon .ic{width:1.5rem;height:1.5rem}
.price-name .ic{color:var(--muted)}

/* besparingsregels (dagresultaat) */
.saving-box{margin-top:.7rem;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.save-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.45rem .75rem;border-top:1px solid var(--line)}
.save-row:first-child{border-top:none}
.save-row .ic{color:var(--muted)}
.save-row b{color:var(--accent);font-weight:700;white-space:nowrap}
.save-row.total{background:var(--panel2);font-weight:600}
.save-row.total b{font-size:1.1rem}
.save-row.penalty b{color:var(--danger)}
.save-row.penalty span{color:var(--warn)}
.prev-grid .pen b{color:var(--danger)}

/* chart */
.chart{width:100%;height:auto;background:var(--panel2);border-radius:10px}
.c-grid{stroke:var(--line);stroke-width:1}
.c-ylab,.c-xlab{fill:var(--muted);font-size:9px}
.c-xlab{text-anchor:middle}.c-ylab{text-anchor:end}
.c-presence{fill:rgba(90,169,255,.08)}
.c-surplus{fill:var(--surplus);opacity:.6}
.c-company-bar{fill:var(--company);opacity:.85}
.c-solar-area{fill:var(--sun);opacity:.16}
.c-surplus2{fill:var(--sun);opacity:.30}
.c-solar-line{fill:none;stroke:var(--sun);stroke-width:2}
.c-load{fill:var(--load)}
.c-load-breach{fill:var(--breach)}
.c-cap{fill:none;stroke:var(--warn);stroke-width:1.5;stroke-dasharray:4 3}
.c-soc{fill:none;stroke:var(--accent);stroke-width:2.5}
.c-soc-dot{fill:var(--accent)}
.c-soc-lab{fill:var(--muted);font-size:9px;text-anchor:middle}
.c-charge{fill:var(--accent)}
.c-consume{fill:var(--danger)}
.c-barlab{font-size:9px;text-anchor:middle;font-weight:700}
.c-barlab.charge{fill:var(--accent)}
.c-barlab.consume{fill:var(--danger)}
.c-note{fill:var(--muted);font-size:8px;text-anchor:end}
.chart-legend{color:var(--muted);font-size:.8rem;margin:.4rem 0 0;text-align:center}
.c-charge-sw{background:var(--accent)} .c-consume-sw{background:var(--danger)}

/* lege-batterij-animatie (game over) */
.gameover{text-align:center}
.empty-battery{display:inline-flex;align-items:center;margin:.3rem auto 1rem}
.eb-body{position:relative;width:150px;height:66px;border:5px solid var(--danger);border-radius:9px;
  background:#160c0c;overflow:hidden;display:flex;align-items:center;justify-content:center}
.eb-cap{width:10px;height:30px;background:var(--danger);border-radius:0 4px 4px 0;margin-left:3px}
.eb-fill{position:absolute;left:0;top:0;bottom:0;width:9%;background:var(--danger);
  animation:eb-blink 1.1s steps(1,end) infinite}
.eb-bolt{position:relative;display:flex;animation:eb-flicker 1.1s ease-in-out infinite}
.eb-bolt .ic{width:1.9rem;height:1.9rem;stroke:var(--danger)}
@keyframes eb-blink{0%,100%{opacity:.9}50%{opacity:.12}}
@keyframes eb-flicker{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}

/* levels */
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;margin-top:.5rem}
.level-card{display:block;text-align:left;background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:.8rem .9rem;cursor:pointer;width:auto;margin:0;font:inherit}
.level-card:hover{border-color:var(--accent);filter:none}
.level-card h3{margin:.1rem 0 .3rem;color:var(--accent)}
.level-card p{margin:.2rem 0 .5rem;color:var(--muted);font-size:.88rem}
.level-meta{font-size:.78rem;color:var(--muted)}
.level-card.roadmap{cursor:default}
.level-card.roadmap:hover{border-color:var(--line);filter:none}
.level-card.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.level-card.locked{opacity:.55}
.level-badge{display:inline-block;font-size:.7rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;
  margin-bottom:.35rem;background:var(--panel);color:var(--muted)}
.level-card.current .level-badge{background:var(--accent);color:#06231a}
.unlock{margin:1rem 0 .3rem;padding:.6rem .9rem;border-radius:10px;text-align:center;font-weight:700;
  background:rgba(56,211,159,.15);border:1px solid var(--accent);color:var(--accent)}
h3.sec{margin:1.4rem 0 .5rem;font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
button.secondary{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}

/* weekstrip (grafische weekindeling) */
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.day-chip{display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center;
  padding:.6rem .3rem;border-radius:10px;border:1px solid var(--line);background:var(--panel2)}
.day-chip .dc-day{font-weight:700;font-size:.8rem;color:var(--muted)}
.day-chip .dc-icon{font-size:1.5rem;line-height:1.3}
.day-chip .dc-label{font-weight:600;font-size:.82rem}
.day-chip .dc-sub{font-size:.68rem;color:var(--muted)}
.day-chip.type-kantoor{background:rgba(90,169,255,.14);border-color:var(--accent2)}
.day-chip.type-kantoor .dc-day{color:var(--accent2)}
.day-chip.type-thuis{background:rgba(56,211,159,.10)}
.day-chip.type-weekend{opacity:.7}

/* prijsvisual */
.price-viz{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:1rem}
.price-row{display:flex;align-items:center;gap:.7rem;margin:.5rem 0}
.price-name{flex:0 0 42%;font-weight:600;font-size:.95rem}
.price-track{flex:1;background:rgba(255,255,255,.05);border-radius:8px;overflow:hidden}
.price-fill{display:flex;align-items:baseline;gap:.15rem;min-width:max-content;
  padding:.55rem .8rem;border-radius:8px;color:#06231a}
.price-fill b{font-size:1.5rem;font-weight:800;line-height:1}
.price-fill small{font-size:.75rem;opacity:.8}
.p-duur{background:linear-gradient(90deg,#c85a2a,var(--warn))}
.p-goedkoop{background:linear-gradient(90deg,#2ea87f,var(--accent))}
.price-diff{margin-top:.8rem;padding:.7rem .9rem;border-radius:10px;text-align:center;
  background:linear-gradient(90deg,var(--accent),var(--accent2));color:#06231a;font-size:1rem}
.price-diff b{font-weight:800}
@media(max-width:560px){ .price-name{flex-basis:38%;font-size:.85rem} .day-chip .dc-sub{display:none} }

@media(max-width:620px){ .appliances{grid-template-columns:1fr} }