/* Lock and Lay: the desktop's top bar and left bar. The top bar's look (#1077). It sits on top of the bar's layout in style.css (#185) and is loaded
   right after it, so the same selectors here win. What you HAVE (date, cash, net worth, collection) sits in dark wells
   with a solid coin each; what you can PRESS (level, goals, online, the controls, you) is raised. At laptop widths the
   meter, the faces, the date's coin and the word "online" give way before your name does. */
#hud { --hud-h: 40px; --hud-r: 20px; grid-template-columns: minmax(0, 1fr) auto; --well: #fbf8f1; --lift: var(--paper); --gold: #8a5a00; background: linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 60%, var(--paper)), var(--paper)); box-shadow: 0 1px 0 var(--rule), 0 8px 22px rgba(0, 0, 0, .22); }
:root[data-theme="dark"] #hud { --well: #141210; --lift: #2e2a25; --gold: #f1cd6a; background: linear-gradient(180deg, #2b2823, #1d1b18); }
#hud .brand-cell { padding: 0 10px 0 16px; }
/* the right side takes what it needs and the left gets the rest: nothing ever sits on top of anything. Only the rank's
   name gives (it ends in "…"); the coins, the numbers and your name do not */
#hud .ledger { min-width: 0; } #hud .brand-cell, #hud .stats-cap, #hud .chips .cell { flex: none; }
#hud .chips { flex: 0 1 auto; min-width: 0; } #hud .chips .level-cell { flex: 0 1 auto; min-width: 42px; }
#hud .level-chip { max-width: 100%; min-width: 0; overflow: hidden; } #hud .level-chip.ready { overflow: visible; }
#hud .lv-rank { display: flex; align-items: center; min-width: 0; } #hud .lv-rn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #hud .lv-rank .pstar, #hud .lv-rank .lv-rtag { flex: none; }
#hud .hud-right { min-width: max-content; }
/* the counters */
#hud .stats-cap { height: auto; margin: 0 6px 0 4px; padding: 0; gap: 7px; background: none; border: 0; box-shadow: none; }
#hud .stats-cap .cell.stat, #hud .stats-cap .cell.stat + .cell.stat { height: var(--hud-h); padding: 0 14px 0 5px; gap: 8px; border-radius: 999px; background: var(--well); border: 1px solid var(--rule); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); }
#hud .stats-cap .cell.stat + .cell.stat::before { display: none; }
#hud .stats-cap .st-i { display: block; width: 30px; height: 30px; padding: 6.5px; border-radius: 50%; stroke-width: 2.1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .5); }
#hud .date-cell .st-i { background: linear-gradient(180deg, #9dcbe8, #4f8bb3); stroke: #0c2a3d; }
#hud .cash-cell .st-i { background: linear-gradient(180deg, #ffdc73, #d99a1c); stroke: #4a3000; }
#hud .worth-cell .st-i { background: linear-gradient(180deg, #8bdb9f, #3d9456); stroke: #0a3317; }
#hud .space-cell .st-i { background: linear-gradient(180deg, #f1ab5b, #c56f1b); stroke: #401f06; }
#hud .st-body { gap: 2px; }
#hud .st-body .lbl { font-size: 9px; letter-spacing: .11em; line-height: 1; }
#hud .st-val { font-size: 16.5px; font-weight: 700; line-height: 1; }
#hud #hDate { font-size: 14.5px; font-weight: 600; }
#hud .cash-cell .st-val { color: var(--gold); }
#hud .tick-up .st-val { color: #6fcf8a; } #hud .tick-down .st-val { color: #f07a68; }
#hud .stats-cap .cell.stat.cash-low { background: color-mix(in srgb, var(--amber) 22%, var(--well)); border-color: var(--amber); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3), 0 0 0 2px color-mix(in srgb, var(--amber) 28%, transparent); }
#hud .st-meter { width: 40px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink-3) 30%, transparent); }
#hud .st-spark { display: none; }
/* what you can press: raised */
#hud .level-chip, #hud .goals-chip, #hud .online-chip, #hud .who-chip, #hud .tool-group { height: var(--hud-h); border-radius: 999px; background: linear-gradient(180deg, var(--lift), var(--paper-2)); border: 1px solid var(--rule-2); box-shadow: 0 2px 0 rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .08s, box-shadow .08s, border-color .12s; }
#hud .level-chip:hover, #hud .goals-chip:hover, #hud .online-chip:hover, #hud .who-chip:hover { background: linear-gradient(180deg, var(--paper-3), var(--paper-2)); border-color: var(--ink-3); color: var(--ink); }
#hud .level-chip:active, #hud .goals-chip:active, #hud .online-chip:active, #hud .who-chip:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05); }
#hud .chips { gap: 7px; padding: 0 4px; }
/* level: a solid badge, your rank, and the XP bar */
#hud .level-chip { padding: 0 14px 0 5px; gap: 9px; }
#hud .level-chip .lv-ring { width: 30px; height: 30px; background: linear-gradient(180deg, #7ad08f, #2f7f48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .5); color: #06260f; }
#hud .level-chip .lv-ring::before { display: none; }
#hud .level-chip .lv-ring .lv-n text { fill: #06260f; font-weight: 800; }
#hud .lv-meta { gap: 4px; min-width: 0; flex: 0 1 auto; }
#hud .level-chip .lv-rank { font-size: 12.5px; font-weight: 700; line-height: 1; }
#hud .lv-sub { display: none; }
#hud .lv-bar { display: flex; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink-3) 32%, transparent); overflow: hidden; }
#hud .lv-bar i { flex: none; height: 100%; width: calc(var(--p) * 1%); border-radius: 3px; background: linear-gradient(90deg, #4e9f63, #8fe0a3); transition: width .5s; }
#hud .lv-bar i.r { width: max(0%, calc((var(--r) - var(--p)) * 1%)); border-radius: 0 3px 3px 0; background: #6f93b8; }
#hud .lv-rank .pstar { height: 13px; margin-left: 5px; padding: 0 4px 0 3px; font-size: 9.5px; }
/* ready to prestige: the gold chip (prestige.css) keeps its own colours */
#hud .level-chip.ready .lv-ring { background: linear-gradient(180deg, #fff3a8, #e79a12); } #hud .level-chip.ready .lv-ring .lv-n text { fill: #3d2600; }
#hud .level-chip.ready::after { top: -12px; right: -8px; }
#hud .level-chip.ready .lv-bar { background: rgba(61, 38, 0, .22); } #hud .level-chip.ready .lv-bar i { background: #3d2600; }
/* goals: the word, three pips, the count */
#hud .goals-chip { padding: 0 13px; gap: 8px; }
#hud .goals-chip .gc-txt { display: inline; font-size: 12.5px; font-weight: 700; color: var(--ink); }
#hud .gc-segs { gap: 4px; }
#hud .gc-segs i { width: 13px; height: 13px; border-radius: 50%; background: var(--well); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 1px var(--rule-2); }
#hud .gc-segs i.part::after { width: 100%; height: var(--g); inset: auto 0 0 0; background: color-mix(in srgb, #6fcf8a 70%, transparent); }
#hud .gc-segs i.on { background: #58c176 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3l2.1 2.1L9.2 4' fill='none' stroke='%2306260f' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: 0 0 0 1px #2f7f48; }
#hud .goals-chip b { font-size: 12.5px; color: var(--ink-2); }
#hud .goals-chip.all { border-color: #2f7f48; background: linear-gradient(180deg, color-mix(in srgb, #58c176 30%, var(--lift)), color-mix(in srgb, #58c176 16%, var(--paper-2))); }
/* online */
#hud .online-chip { padding: 0 13px 0 9px; color: var(--ink); font-weight: 600; font-size: 12.5px; }
#hud .on-avs span { border-color: var(--paper-2); }
/* the controls and you */
#hud .tool-group { flex: none; }
#hud .tool-group .tool { height: calc(var(--hud-h) - 2px); width: 40px; }
#hud .tool-group > .tool, #hud .tool-group > .menu-wrap { border-left-color: var(--rule-2); }
#hud .who-chip { padding: 0 14px 0 5px; font-family: var(--sans); font-size: 13.5px; font-weight: 700; max-width: none; flex: none; }
#hud .who-av { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .5); }
#hud .who-n { max-width: 140px; }
#hud .sup-hud { height: var(--hud-h); width: var(--hud-h); padding: 0; justify-content: center; border: 1px solid var(--rule); border-radius: 50%; background: var(--well); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); }
#hud .sup-hud { overflow: hidden; }
#hud .sup-hud.on { background: radial-gradient(circle, rgba(79, 154, 98, .3), var(--well) 70%); border-color: rgba(79, 154, 98, .7); }
#hud .sup-hud:hover { width: auto; padding: 0 12px 0 8px; border-radius: 999px; }
#hud .hud-right { gap: 7px; padding: 0 12px 0 0; }
/* room at 1440 and under: the meter and the faces go first, never your name */
@media (max-width: 1500px) { #hud .lv-rank .lv-rtag { display: none; } #hud .brand-cell { padding: 0 8px 0 14px; } #hud .brand-cell .brand { font-size: 23px; } #hud .stats-cap { gap: 5px; margin: 0 4px 0 2px; } #hud .chips { gap: 5px; padding: 0 2px; } #hud .hud-right { gap: 5px; padding: 0 10px 0 0; } #hud .date-cell .st-i { display: none; } #hud .stats-cap .date-cell { padding-left: 13px; } #hud .goals-chip b { display: none; } #hud .online-chip .on-w { display: none; } #hud .tool-group .tool { width: 36px; } #hud .who-n { max-width: 112px; } #hud .st-meter { display: none; } #hud .on-avs { display: none; } #hud .online-chip { padding: 0 12px 0 10px; } #hud .stats-cap .cell.stat, #hud .stats-cap .cell.stat + .cell.stat { padding-right: 12px; } }
@media (max-width: 1340px) { #hud .st-body .lbl { display: none; } #hud .lv-meta { display: none; } #hud .level-chip { padding: 0 5px; } #hud .goals-chip .gc-txt { display: none; } #hud .goals-chip b { display: inline; } #hud .who-n { display: none; } #hud .who-chip { padding: 0 5px; } #hud .date-cell .st-i { display: none; } #hud .stats-cap .date-cell { padding-left: 12px; } }
/* narrower than a small laptop (#1096's picture showed the Gems chip under the gear at 1100 px): the free-tub count, then
   who is online, then the date give way, so the counters and chips that are left never run under the controls */
@media (max-width: 1240px) { #hud .h-space { display: none; } #hud .brand-cell { padding: 0 6px 0 12px; } #hud .brand-cell .brand { font-size: 21px; } }
@media (max-width: 1150px) { #hud .online-cell { display: none; } }
@media (max-width: 1060px) { #hud .date-cell { display: none; } }

/* ---- the left bar (#1092): the same language as the top bar. Every panel is a raised slab in its own colour with a
   thick bottom edge (and only a faint sheen: a glossy gradient was too much); the open one sits pressed in, ringed, with a marker on the bar's edge; a rule sets the tools
   (Rodents, Design, Phone) apart. Same width, tiles, labels, shortcuts and badges as before. ---- */
#rail { --lift: var(--paper); background: linear-gradient(90deg, var(--paper), color-mix(in srgb, var(--paper-2) 60%, var(--paper))); border-right: 0; box-shadow: 1px 0 0 var(--rule), 8px 0 22px rgba(0, 0, 0, .22); padding: 10px 0 10px; }
:root[data-theme="dark"] #rail { background: linear-gradient(90deg, #1d1b18, #2a2723); }
#rail .tile { --hi: color-mix(in srgb, var(--tc) 62%, #fff); --top: color-mix(in srgb, var(--tc) 90%, #fff); --lo: color-mix(in srgb, var(--tc) 62%, #000); gap: 8px; padding: 5px 4px 6px; margin: 1px 8px; color: var(--ink-2); font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
#rail .tile .tico { width: 44px; height: 40px; border-radius: 13px; background: linear-gradient(180deg, var(--top), var(--tc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 0 var(--lo), 0 6px 7px rgba(0, 0, 0, .26); }
#rail .tile .tico svg { width: 23px; height: 23px; stroke-width: 2; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); }
#rail .tile:hover { background: transparent; color: var(--ink); transform: none; }
#rail .tile:hover .tico, #rail .tile.hov .tico { transform: translateY(-2px); filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 0 var(--lo), 0 9px 10px rgba(0, 0, 0, .3); }
#rail .tile.pressed .tico, #rail .tile:active .tico { transform: translateY(3px); filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 0 var(--lo); }
/* the open panel: pressed in, ringed in its own colour, a marker on the edge */
#rail .tile.active, #rail .tile.on { color: var(--ink); }
/* pressed all the way in: no bottom edge, so the ring (an outline, drawn from the face itself) is centred on what you see */
#rail .tile.active .tico, #rail .tile.on .tico, #rail .tile.active:hover .tico, #rail .tile.on:hover .tico { transform: none; filter: none; outline: 2px solid var(--hi); outline-offset: 2px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3), 0 0 9px 1px color-mix(in srgb, var(--hi) 30%, transparent); }
#rail .tile.active::after, #rail .tile.on::after { content: ''; position: absolute; left: -8px; top: 7px; width: 4px; height: 36px; border-radius: 0 4px 4px 0; background: var(--hi); }
#rail .tile .badge { top: -4px; right: 2px; min-width: 19px; padding: 2px 5px; font: 700 10.5px/1.25 var(--sans); background: linear-gradient(180deg, #ff6a57, #d63a2a); box-shadow: 0 0 0 2px var(--paper), 0 2px 3px rgba(0, 0, 0, .4); z-index: 2; }
#rail .rail-gap { position: relative; min-height: 14px; }
#rail .rail-gap::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 1px; background: var(--rule); }
@media (max-height: 720px) { #rail .tile { gap: 6px; padding: 3px 4px 4px; } #rail .tile .tico { width: 38px; height: 33px; border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 3px 0 var(--lo), 0 5px 6px rgba(0, 0, 0, .26); } #rail .tile .tico svg { width: 20px; height: 20px; } #rail .tile.active::after, #rail .tile.on::after { top: 4px; height: 31px; } }
/* "NEW" keeps its green; the tutorial's pulse is a ring that breathes round the slab (the old one flattened it) */
#rail .tile .badge.soft { background: linear-gradient(180deg, #5cb574, #3c8a52); font-size: 9px; letter-spacing: .06em; }
#rail .tile.pulse .tico { animation: railpulse2 1.3s ease-in-out infinite; }
@keyframes railpulse2 { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 0 var(--lo), 0 6px 7px rgba(0, 0, 0, .26), 0 0 0 0 rgba(111, 207, 138, 0); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 0 var(--lo), 0 6px 7px rgba(0, 0, 0, .26), 0 0 0 7px rgba(111, 207, 138, .45); } }
@media (max-height: 600px) { #rail .tile { gap: 0; padding: 3px 4px 6px; } }
@media (prefers-reduced-motion: reduce) { #rail .tile.pulse .tico { animation: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 0 var(--lo), 0 0 0 4px rgba(111, 207, 138, .5); } }

/* ---- the rank crest (levels.js levelCrest, #1398): the rank's metal, the XP round its edge, a gold star for a prestige */
#hud .level-chip { padding-left: 4px; gap: 7px; overflow: visible; }
.lv-crest { flex: none; display: block; width: 42px; height: 46px; margin: -8px -2px -6px -4px; overflow: visible; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .28)); transform-origin: 50% 60%; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.lv-crest .c-track { fill: color-mix(in srgb, var(--edge) 80%, #000); stroke: rgba(0, 0, 0, .35); stroke-width: 3.4; stroke-linejoin: round; }
.lv-crest .c-xp { fill: none; stroke: #9ff7b2; stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 1.6px rgba(140, 255, 170, .9)); transition: stroke-dasharray .6s ease; }
.lv-crest .c-rest { fill: none; stroke: #8db8ff; stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.lv-crest .c-face { stroke: var(--edge); stroke-width: 1.2; stroke-linejoin: round; }
.lv-crest .c-shine { fill: rgba(255, 255, 255, .32); pointer-events: none; }
.lv-crest .c-num { font-family: var(--gmf, 'Lilita One'), 'Arial Rounded MT Bold', sans-serif; font-weight: 400; fill: #fff; stroke: var(--edge); stroke-width: 3.2; stroke-linejoin: round; paint-order: stroke; letter-spacing: .02em; }
.lv-crest.t-silver .c-num, .lv-crest.t-gold .c-num { fill: #fffdf4; }
.lv-crest .c-star circle { fill: #ffcf3a; stroke: #6b3f00; stroke-width: 1.2; }
.lv-crest .c-star path { fill: #fff6cf; stroke: #a86400; stroke-width: .5; stroke-linejoin: round; }
/* the gold seal (#1484): flat colours, no ring, no shine (the XP is the chip's bar) */
.lv-seal .c-rim { fill: #a86c00; }
.lv-seal .c-face { fill: #f2b824; stroke: none; }
.lv-seal .c-num { fill: #3d2600; stroke: none; }
.lv-seal.t-silver .c-num, .lv-seal.t-gold .c-num { fill: #3d2600; }
#hud .level-chip:hover .lv-crest { transform: translateY(-1px) rotate(-5deg) scale(1.06); }
#hud .level-chip .lv-rn { font-family: var(--gmf, 'Lilita One'), var(--sans); font-weight: 400; font-size: 14px; letter-spacing: .015em; }
#hud .level-chip .lv-bar { height: 6px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25); }
#hud .level-chip .lv-bar i:first-child { background: linear-gradient(180deg, #a9f8bb, #4fb46c); box-shadow: 0 0 6px rgba(120, 230, 150, .55); }
/* a level gained: the crest pops and its ring flashes */
#hLevel.lv-up .lv-crest { animation: lvCrestPop 1.1s cubic-bezier(.3, 1.6, .5, 1); }
#hLevel.lv-up .lv-crest .c-xp, #hLevel.lv-up .lv-crest .c-track { animation: lvRingFlash 1.1s ease-out; }
@keyframes lvCrestPop { 0% { transform: scale(1); } 22% { transform: scale(1.32) rotate(-8deg); } 48% { transform: scale(.94) rotate(3deg); } 100% { transform: none; } }
@keyframes lvRingFlash { 0%, 30% { stroke: #fff6b0; filter: drop-shadow(0 0 5px rgba(255, 230, 120, 1)); } 100% { } }
/* ready to prestige: the crest glows gold with the chip (steady: nothing in the bar loops) */
#hud .level-chip.ready .lv-crest { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .28)) drop-shadow(0 0 6px rgba(255, 200, 60, .9)); }
@media (prefers-reduced-motion: reduce) { .lv-crest, #hLevel.lv-up .lv-crest { animation: none; transition: none; } }

/* ---- flat colours (#1474): every gradient in the two bars becomes one solid colour; the shapes, edges, wells and
   shadows stay as they were ---- */
#hud { background: color-mix(in srgb, var(--paper-2) 30%, var(--paper)); }
:root[data-theme="dark"] #hud { background: #242120; }
#rail { background: color-mix(in srgb, var(--paper-2) 30%, var(--paper)); }
:root[data-theme="dark"] #rail { background: #242120; }
#hud .date-cell .st-i { background: #6aa9d2; } #hud .cash-cell .st-i { background: #f0b43a; }
#hud .worth-cell .st-i { background: #5cb874; } #hud .space-cell .st-i { background: #e08a3a; }
#hud .level-chip, #hud .goals-chip, #hud .online-chip, #hud .who-chip, #hud .tool-group { background: var(--lift); }
#hud .level-chip:hover, #hud .goals-chip:hover, #hud .online-chip:hover, #hud .who-chip:hover { background: var(--paper-3); }
#hud .goals-chip.all { background: color-mix(in srgb, #58c176 24%, var(--lift)); }
#hud .sup-hud.on { background: color-mix(in srgb, #4f9a62 22%, var(--well)); }
#hud .lv-bar i, #hud .level-chip .lv-bar i:first-child { background: #5fc27a; }
:root #hud .gems-chip, :root #hud .gems-chip:hover { background: #4535c4; }
:root #hud .gems-chip .gc-plus { background: #3fcf6b; }
#rail .tile .tico { background: var(--tc); }
#rail .tile .badge { background: #e2483a; }
#rail .tile .badge.soft { background: #48a463; }