.hud-content { position:relative; }
.home-panel, .settings-panel { position:absolute; inset:0; }
.home-panel { display:grid; grid-template-columns:42% 58%; height:100%; color:var(--nav-ink); font:12px/1.2 "Segoe UI",sans-serif; }
.home-panel[hidden] { display:none; }
.home-orb { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-width:0; padding-top:12px; }
.home-orbit { position:relative; width:var(--orb-size, 100%); aspect-ratio:1; }
.home-stats { position:relative; min-width:0; padding:8px 6px 14px 0; }
.stats-connection { position:absolute; bottom:2px; left:8px; font-size:9px; opacity:.65; }
.stat-list { position:relative; height:100%; }
.hud-stat { position:absolute; width:100%; height:104px; top:calc(var(--slot) * (100% - 104px) / 3); --fill:0%; }
.hud-stat.stat-left { top:calc(var(--slot) * (100% - 104px) / 3 + 25px); }
.stat-badge { position:absolute; width:66px; height:75px; }
.stat-right .stat-badge { right:3px; }
.stat-left .stat-badge { left:3px; }
.stat-badge-back { position:absolute; inset:7px 7px 8px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background:radial-gradient(ellipse at 45% 25%,var(--stat-accent),#04172f 85%); }
.stat-frame { position:absolute; width:100%; height:100%; filter:drop-shadow(0 0 2px var(--stat-accent)); }
.stat-symbol { position:absolute; width:34px; height:34px; top:50%; left:52%; transform:translate(-50%,-50%); filter:drop-shadow(0 0 1px #07172e) drop-shadow(0 1px 1px #07172e); }
.stat-value { position:absolute; top:72px; left:7px; width:52px; padding:0; box-sizing:border-box; border:1px solid color-mix(in srgb,var(--stat-accent) 65%,white); border-radius:6px; background:#10233d; color:#fff; text-align:center; font:700 14px/16px Arial,sans-serif; font-variant-numeric:tabular-nums; text-shadow:none; box-shadow:none; filter:none; }
.stat-label { position:absolute; top:91px; left:-11px; width:88px; text-align:center; font-size:12px; line-height:14px; font-weight:750; letter-spacing:.35px; color:var(--stat-accent); background:linear-gradient(180deg,color-mix(in srgb,var(--stat-accent),#fff 35%) 0%,var(--stat-accent) 45%,color-mix(in srgb,var(--stat-accent),#142848 40%) 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 0 rgb(255 255 255 / .35)); }
:root[data-theme="dark"] .stat-label { background-image:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--stat-accent),#fff 45%) 40%,var(--stat-accent) 100%); filter:drop-shadow(0 1px 1px #07101f) drop-shadow(0 0 3px color-mix(in srgb,var(--stat-accent),transparent 70%)); }
.stat-body { position:absolute; left:73px; right:73px; top:35px; }
.stat-track { height:var(--stat-bar-height, 15px); position:relative; border-radius:999px; background:linear-gradient(180deg,#f4fdff 0%,#a8dcff 28%,#4476ae 50%,#79bfea 72%,#e3f8ff 100%); box-shadow:0 0 0 1px #4776a9,0 2px 4px #173d6340,inset 0 1px 0 #fff; }
.stat-track svg { display:none; }
.stat-track-well { position:absolute; inset:4px; background:linear-gradient(180deg,#203650,#3a5572); border-radius:20px; overflow:hidden; box-shadow:inset 0 1px 2px #020d20b3; }
.stat-fill { position:absolute; top:0; left:0; width:var(--fill); height:100%; border-radius:20px; background:linear-gradient(180deg,color-mix(in srgb,var(--stat-accent) 45%,white) 0%,var(--stat-accent) 48%,color-mix(in srgb,var(--stat-accent) 76%,#143054) 100%); box-shadow:inset 0 1px 0 #ffffff85,inset 0 -1px 0 #07234535; transition:width 350ms ease; }

.stat-right .stat-fill { left:auto; right:0; }
.stat-condition { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(prefers-reduced-motion:reduce) { .stat-fill { transition:none; } }


.home-maze { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:var(--maze-opacity,.65); }
.home-orb, .home-stats { z-index:1; }
.home-orb { position:relative; }
.maze-lines { fill:none; stroke:var(--maze-color,#16bfff); stroke-width:var(--maze-width,1); stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 var(--maze-glow,2px) var(--maze-color,#16bfff)); }
.maze-bulbs circle { r:var(--maze-bulb-size,2px); fill:var(--maze-bulb-color,#d2f7ff); stroke:var(--maze-color,#16bfff); stroke-width:.7px; filter:drop-shadow(0 0 var(--maze-glow,2px) var(--maze-bulb-color,#d2f7ff)); }


/* A quiet static mesh with sparse electrical trails moving along its edges. */
.home-maze { overflow:hidden; }
.mesh-base { opacity:.24; }
.mesh-current { fill:none; stroke:color-mix(in srgb,var(--maze-color,#16bfff) 75%,var(--maze-bulb-color,#d2f7ff)); stroke-width:var(--maze-width,1); stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:16 2016; stroke-dashoffset:16; opacity:.95; filter:drop-shadow(0 0 var(--maze-glow,2px) var(--maze-color,#16bfff)); animation:mesh-flow 24s linear infinite; animation-delay:var(--flow-delay); }
@keyframes mesh-flow { from { stroke-dashoffset:16; } to { stroke-dashoffset:-2016; } }
@media(prefers-reduced-motion:reduce) { .mesh-current { animation:none; display:none; } }

/* Fine broken sparks ride the current, while the background remains steady. */
.mesh-static { stroke:var(--maze-bulb-color,#d2f7ff); stroke-width:calc(var(--maze-width,1) * .7); stroke-dasharray:2 3 1 4 2 4 0 2016; animation:mesh-flow 24s linear infinite,mesh-crackle .31s steps(3,end) infinite; animation-delay:var(--flow-delay),var(--flow-delay); }
@keyframes mesh-crackle { 0%,100% { opacity:.5; } 35% { opacity:.95; } 70% { opacity:.65; } }
@media(prefers-reduced-motion:reduce) { .mesh-static { animation:none; display:none; } }

.home-orbit { flex-shrink:0; }
.home-food { width:calc(100% - 20px); margin:10px 10px 8px; display:grid; gap:7px; min-height:0; overflow:auto; }
.food-card { border:1px solid var(--nav-divider); border-radius:8px; padding:8px 10px; background:linear-gradient(135deg,color-mix(in srgb,var(--nav-accent) 9%,var(--nav-background)),var(--nav-background)); }
.food-card header { display:flex; align-items:center; gap:7px; color:var(--nav-ink); }
.food-card header svg { width:20px; height:20px; flex:none; color:var(--nav-accent); }
.food-card h2 { margin:0; font-size:12px; font-weight:650; }
.food-card p { margin:4px 0; font-size:10px; }
.food-card small { display:block; font-size:9px; line-height:1.4; opacity:.75; }

/* Original inner-strip pixels are revealed by the same stat value as the rail. */
.stat-strip-empty { opacity:.18; }
.stat-strip-progress { stroke-dashoffset:var(--meter-offset,100); transition:stroke-dashoffset 350ms ease; }
@media(prefers-reduced-motion:reduce) { .stat-strip-progress { transition:none; } }

.stat-symbol [fill="none"] { stroke:#23476c; }
[data-stat-row="fun"] .stat-symbol circle { fill:#23476c; stroke:#23476c; }

:root[data-theme="dark"] .stat-track { box-shadow:0 0 0 1px #5899cc,0 0 5px #4bbcff55,inset 0 1px 0 #fff; }
:root[data-theme="dark"] .stat-track-well { background:linear-gradient(180deg,#08182e,#18324a); }

.stat-strip-lit { filter:drop-shadow(0 0 7px #98f5ff); }
/* Theme-matched glass bubbles, with a clear center for Home information. */
.home-maze { display:none; }
.home-panel::before { content:''; position:absolute; inset:0; pointer-events:none; background:url('home-bubbles-light.png') center/cover no-repeat; opacity:.38; }
:root[data-theme=dark] .home-panel::before { background-image:url('home-bubbles-dark.png'); opacity:.4; }