/* Surface colors and simple scenery; spatial geometry is owned by world.js. */
.brand { background:var(--face); padding:8px 12px; border:2px solid var(--ink); border-radius:4px 9px 4px 9px; box-shadow:3px 3px 0 #789885; }
.brand[aria-current] { box-shadow:3px 3px 0 var(--yellow); }
.hud nav a { border:2px solid var(--ink); background:var(--face); border-radius:4px 8px 4px 8px; box-shadow:3px 3px 0 #789885; }
.hud [data-nav=apps] { --nav-color:var(--blue); }
.hud [data-nav=board] { --nav-color:var(--green); }
.hud [data-nav=about] { --nav-color:var(--yellow); }
.hud nav a[aria-current] { box-shadow:3px 3px 0 var(--nav-color); border-bottom-width:5px; padding-bottom:8px; }
.hud nav a:hover { background:#f8f3d6; }
.hud nav a:active,.brand:active { transform:translate(2px,2px); }
.hills-far { fill:#a7dfcf; stroke:#82baa9; stroke-width:2; }
.hills-near { fill:#75c7b5; stroke:#519e8e; stroke-width:2; }
.hill-patch { fill:#d6efcf; stroke:none; }
.hill-stripe { fill:#a3d9b4; stroke:none; }
.cloud { fill:#fffef7; stroke:#a6cede; stroke-width:2; }
.cloud-detail { fill:none; stroke:#c3dfdf; stroke-width:3; }
.ground-top { background:#9cce86; }
.ground-wall { background:linear-gradient(#8abb6c 0 11px,#e5d4a7 11px 100%); }
.region-front { background:var(--face); }
.region-front::before { content:''; position:absolute; left:0; top:0; bottom:0; width:12px; background:var(--section-color); }
.region-front::after { content:''; position:absolute; right:0; top:9px; width:65px; height:8px; background:var(--section-color); pointer-events:none; }
.region-front:hover { background:#fffff7; }
.region-front:focus-visible { outline-offset:-7px; outline-width:4px; }
.region-front:hover .enter-arrow { background:var(--section-color); color:var(--face); }
.region-about:hover .enter-arrow { color:var(--ink); }
.surface-content { border-top:8px solid var(--section-color); }
.region-kicker { color:var(--muted); }
.enter-arrow { border:2px solid var(--ink); border-radius:4px; background:#fffef8; transition:transform 150ms ease; }
.app-preview svg { stroke:var(--blue); }
.apps-motif { right:24px; bottom:23px; width:62px; height:48px; background:var(--blue); clip-path:polygon(0 35%,30% 35%,30% 0,65% 0,65% 35%,100% 35%,100% 100%,65% 100%,65% 68%,30% 68%,30% 100%,0 100%); }
.board-preview { color:var(--muted); }
#board-preview-label { color:var(--ink); }
.pin-indicator { color:var(--green); }
.personal-emblem { fill:var(--yellow); stroke-width:2.5; }
.personal-emblem path:last-child { fill:var(--ink); stroke:none; }
.service-item { border:2px solid var(--ink); border-top:7px solid var(--blue); background:#fffef7; box-shadow:3px 3px 0 #c5d4e6; }
.service-icon { background:#e0eaff; border:1.5px solid var(--ink); border-radius:5px; }
.service-icon svg { stroke:var(--blue); }
.service-action { border:2px solid var(--ink); background:#e0eaff; box-shadow:2px 2px 0 var(--ink); }
.service-action:hover { background:#c8d8ff; }
.return-home:hover { color:var(--section-color); }
.board-empty svg { fill:#deefdd; stroke:var(--green); stroke-width:3; }
.continuation-link { border:2px solid var(--ink); background:#deefdd; }
@media(prefers-reduced-motion:reduce) { .enter-arrow { transition:none; } }

.front-cloud { fill:#fffef7; stroke:#a6cede; stroke-width:2; }
.ground-decoration { fill:#f0c544; stroke:#476b52; stroke-width:2.5; }