/* Game windows and HUD. Everything inside a game uses Inter. */
.gw {
  --b1: #1f9d55; --b2: #ffc83d; --b3: #0f3d2a; --bt: #fff; --bs: #e9f8ef;
  position: relative; overflow: hidden; isolation: isolate;
  container-type: inline-size;
  font-family: "Inter", system-ui, sans-serif;
  border-radius: 22px;
  background: var(--poster, linear-gradient(#bfe6ff, #eefaff)) center / cover no-repeat;
  -webkit-font-smoothing: antialiased;
}
.gw > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gw[data-brand="eco"] { --b1: #1f9d55; --b2: #ffcf3d; --b3: #0f3d2a; --bs: #e8f8ee; }
.gw[data-brand="stem"] { --b1: #5b4cf0; --b2: #ff8a3d; --b3: #1f1660; --bs: #eeecff; }
.gw[data-brand="camp"] { --b1: #ff6a2b; --b2: #1fc7b6; --b3: #5a1f08; --bs: #fff0e8; }
.gw[data-brand="museum"] { --b1: #b6392a; --b2: #e8b04b; --b3: #3e120c; --bs: #fbf1e6; }
.gw[data-brand="delta"] { --b1: #0c8f83; --b2: #59c7fc; --b3: #0c1b24; --bs: #e6f7f5; }

.hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; font-size: max(9.5px, 1.62cqw); color: #10202b; line-height: 1.25; }
.hud.instant *, .hud.instant { transition: none !important; animation-duration: 0s !important; }
.hud.instant .hd-burst.on .hd-stars span { transform: none; }
.hud > * { position: absolute; }

/* top bar */
.hd-top { left: 1.1em; right: 1.1em; top: 1em; display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.hd-brand { display: flex; align-items: center; gap: .6em; padding: .35em .9em .35em .4em; border-radius: 99px; background: var(--b1); color: #fff; box-shadow: 0 .22em 0 var(--b3), 0 .6em 1.4em rgba(0,0,0,.18); }
.hd-brand b { display: block; font-weight: 800; font-size: 1.05em; letter-spacing: -.01em; white-space: nowrap; }
.hd-brand small { display: block; font-size: .72em; font-weight: 600; opacity: .85; letter-spacing: .04em; text-transform: uppercase; }
.hd-logo { width: 2.2em; height: 2.2em; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.hd-logo svg { width: 1.35em; height: 1.35em; fill: var(--b1); }
.hd-stats { display: flex; gap: .45em; transform-origin: right center; }
.hd-stats.bump { animation: hd-bump .5s ease; }
.hd-stat { display: flex; align-items: center; gap: .35em; height: 2.3em; padding: 0 .8em 0 .55em; border-radius: 99px; background: rgba(255,255,255,.94); box-shadow: 0 .2em 0 rgba(12,27,36,.18), 0 .5em 1.2em rgba(0,0,0,.12); font-weight: 800; font-variant-numeric: tabular-nums; }
.hd-stat svg { width: 1.4em; height: 1.4em; fill: #ffc21a; filter: drop-shadow(0 .08em 0 #d68a00); }
.hd-stat i { font-style: normal; font-size: .75em; font-weight: 900; color: #fff; background: var(--b1); border-radius: .4em; padding: .15em .35em; }
.hd-stat b { min-width: 1.4em; text-align: right; }
@keyframes hd-bump { 30% { transform: scale(1.12); } }

/* mission */
.hd-mission { left: 1.1em; top: 4.2em; max-width: 46%; display: flex; gap: .7em; align-items: stretch; padding: .65em .9em .7em .65em; border-radius: 1em; background: rgba(255,255,255,.95); box-shadow: 0 .25em 0 rgba(12,27,36,.16), 0 .8em 1.6em rgba(0,0,0,.12); opacity: 0; transform: translateY(-.8em); transition: .45s cubic-bezier(.2,1.4,.4,1); }
.hd-mission.on { opacity: 1; transform: none; }
.hd-mission small { display: block; font-size: .7em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--b1); }
.hd-mission b { display: block; font-weight: 750; font-size: 1em; letter-spacing: -.005em; }
.hd-lv { flex: none; display: grid; place-items: center; min-width: 2.5em; border-radius: .7em; background: var(--b2); color: var(--b3); font-weight: 900; font-size: .85em; padding: 0 .4em; box-shadow: inset 0 -.2em 0 rgba(0,0,0,.12); }
.hd-lv:empty { display: none; }
.hd-mission.mini { padding: .4em .7em .42em .45em; gap: .5em; }
.hd-mission.mini small { display: none; }
.hd-mission.mini b { font-size: .86em; max-width: 26em; }
.hd-mission.mini .hd-lv { min-width: 2.1em; font-size: .75em; padding: .25em .4em; }
.hd-mission b { transition: font-size .3s; }
/* layers: world labels sit under the game panels */
.hd-tag, .hd-vbox { z-index: 1; }
.hd-top, .hd-mission, .hd-bubble, .hd-cards, .hd-panel, .hd-prompt, .hd-prog, .hd-board, .hd-ring, .hd-votes, .hd-photo { z-index: 2; }
.hd-toast, .hd-burst, .hd-fly, .hd-flash { z-index: 4; }

/* AI helper bubble */
.hd-bubble { right: 1.1em; top: 4.2em; width: 38%; display: flex; gap: .6em; align-items: flex-start; padding: .7em .9em .75em .6em; border-radius: 1em 1em 1em .3em; background: #10202b; color: #fff; box-shadow: 0 .25em 0 rgba(0,0,0,.35), 0 .8em 1.8em rgba(0,0,0,.2); opacity: 0; transform: scale(.9) translateY(-.4em); transform-origin: top right; transition: .4s cubic-bezier(.2,1.4,.4,1); }
.hd-bubble.on { opacity: 1; transform: none; }
.hd-bubble > div { flex: 1; min-width: 0; }
.hd-bot { flex: none; width: 2.9em; height: 2.9em; animation: hd-float 2.4s ease-in-out infinite; }
.hd-bot svg { width: 100%; height: 100%; }
@keyframes hd-float { 50% { transform: translateY(-.15em) rotate(-3deg); } }
.hd-who { display: flex; align-items: center; gap: .5em; margin: 0 0 .25em; font-size: .8em; }
.hd-who b { font-weight: 800; letter-spacing: .02em; }
.hd-chip { font-size: .85em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .15em .5em; border-radius: 99px; background: var(--b2); color: var(--b3); }
.hd-bubble.check .hd-chip { background: #3be0c2; color: #063a33; }
.hd-bubble.warn .hd-chip { background: #ff7a59; color: #fff; }
.hd-say { margin: 0; font-weight: 600; font-size: .98em; min-height: 2.5em; }
.hd-conf { display: flex; align-items: center; gap: .5em; margin: .45em 0 0; font-size: .75em; font-weight: 700; color: rgba(255,255,255,.75); }
.hd-conf span { flex: 1; height: .55em; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; }
.hd-conf i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--b2), #3be0c2); transition: width 1s cubic-bezier(.3,.8,.3,1) .3s; }
.hd-conf em { font-style: normal; white-space: nowrap; }

/* choice cards */
.hd-cards { left: 1.1em; right: 1.1em; bottom: 1em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; opacity: 0; transform: translateY(1.2em); transition: .45s cubic-bezier(.2,1.3,.4,1); }
.hd-cards.on { opacity: 1; transform: none; }
.hd-pick { grid-column: 1 / -1; margin: 0 0 -.1em; justify-self: start; font-size: .75em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(16,32,43,.72); padding: .3em .7em; border-radius: 99px; }
.hd-card { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .6em; min-height: 3.6em; padding: .55em .8em .6em .55em; border-radius: .9em; background: #fff; color: #10202b; font-weight: 700; font-size: .95em; line-height: 1.2; box-shadow: 0 .3em 0 #c9d3da, 0 .7em 1.4em rgba(0,0,0,.14); transition: transform .2s, box-shadow .2s, background .25s, color .25s, opacity .3s; }
.hd-k { flex: none; width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: .55em; background: var(--bs); color: var(--b1); font-weight: 900; }
.hd-card.picked { background: var(--b1); color: #fff; box-shadow: 0 .3em 0 var(--b3), 0 .7em 1.4em rgba(0,0,0,.2); transform: translateY(-.2em); }
.hd-card.picked .hd-k { background: #fff; color: var(--b1); }
.hd-card.dim { opacity: .55; }

/* bottom panel: meters and per-game widgets */
.hd-panel { left: 1.1em; right: 1.1em; bottom: 1em; display: flex; gap: .6em; align-items: flex-end; opacity: 0; transform: translateY(1.2em); transition: .45s cubic-bezier(.2,1.3,.4,1); }
.hd-panel.on { opacity: 1; transform: none; }
.hd-meters { display: grid; gap: .4em; padding: .6em .75em; border-radius: 1em; background: rgba(255,255,255,.95); box-shadow: 0 .25em 0 rgba(12,27,36,.16), 0 .8em 1.6em rgba(0,0,0,.12); min-width: 15.5em; }
.hd-meter { display: grid; grid-template-columns: 1.4em 4.6em 1fr 2em 1.1em; align-items: center; gap: .45em; font-weight: 750; font-size: .9em; }
.hd-mi svg { width: 1.3em; height: 1.3em; fill: var(--b1); display: block; }
.hd-mb { height: .75em; border-radius: 99px; background: #e6ecf0; overflow: hidden; box-shadow: inset 0 .1em 0 rgba(0,0,0,.08); }
.hd-mb i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #29c46f, #7be08a); transition: width .9s cubic-bezier(.3,.8,.3,1); }
.hd-meter.low .hd-mb i { background: linear-gradient(90deg, #ff6a4a, #ffa25a); }
.hd-meter b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 850; }
.hd-trend svg { width: 1.1em; height: 1.1em; display: block; }
.hd-trend.up svg { fill: #1fb45f; } .hd-trend.down svg { fill: #f0533a; }
.hd-slot { padding: .6em .75em; border-radius: 1em; background: rgba(255,255,255,.95); box-shadow: 0 .25em 0 rgba(12,27,36,.16), 0 .8em 1.6em rgba(0,0,0,.12); }
.hd-slot > small, .hd-cap { display: block; font-size: .7em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5b6b76; margin-bottom: .35em; }

/* toast, facilitator prompt */
.hd-toast { left: 50%; top: 64%; display: flex; align-items: center; gap: .55em; padding: .6em 1.1em .65em .65em; border-radius: 99px; background: #fff; font-weight: 800; font-size: 1.1em; white-space: nowrap; box-shadow: 0 .3em 0 rgba(12,27,36,.2), 0 1em 2em rgba(0,0,0,.2); opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: .4s cubic-bezier(.2,1.6,.4,1); }
.hd-toast.on { opacity: 1; transform: translate(-50%, -50%); }
.hd-toast span { width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #1fb45f; }
.hd-toast span svg { width: 1.1em; height: 1.1em; }
.hd-toast.bad span { background: #f0533a; }
.hd-toast.bad b { color: #b5321d; }
.hd-prompt { right: 1.1em; bottom: 5.9em; max-width: 34%; padding: .55em .85em .6em; border-radius: 1em .3em 1em 1em; background: var(--b2); color: var(--b3); box-shadow: 0 .25em 0 rgba(0,0,0,.18), 0 .8em 1.6em rgba(0,0,0,.14); opacity: 0; transform: translateY(.6em); transition: .4s cubic-bezier(.2,1.4,.4,1); }
.hd-prompt.on { opacity: 1; transform: none; }
.hd-prompt small { display: block; font-size: .7em; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.hd-prompt b { display: block; font-weight: 800; }

/* finger */
.hd-finger { left: 0; top: 0; width: 2.6em; height: 2.6em; margin: -.25em 0 0 -.95em; opacity: 0; transition: transform .75s cubic-bezier(.45,0,.2,1), opacity .3s; z-index: 5; }
.hd-finger.on { opacity: 1; }
.hd-finger svg { width: 100%; height: 100%; filter: drop-shadow(0 .2em .3em rgba(0,0,0,.35)); transform-origin: 40% 10%; }
.hd-finger i { position: absolute; left: 30%; top: 0; width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border-radius: 50%; border: .2em solid #fff; opacity: 0; }
.hd-finger.tap svg { animation: hd-press .35s ease; }
.hd-finger.tap i { animation: hd-ring .6s ease-out; }
@keyframes hd-press { 40% { transform: scale(.82) translateY(.1em); } }
@keyframes hd-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }

/* celebration */
.hd-burst { left: 50%; top: 31%; width: 0; height: 0; opacity: 0; transition: opacity .3s; }
.hd-burst.on { opacity: 1; }
.hd-stars { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; gap: .2em; align-items: flex-end; }
.hd-stars span { width: 3.4em; height: 3.4em; transform: scale(0); }
.hd-stars span:nth-child(2) { width: 4.4em; height: 4.4em; }
.hd-stars svg { width: 100%; height: 100%; fill: #d6dde3; filter: drop-shadow(0 .18em 0 rgba(0,0,0,.2)); }
.hd-stars .won svg { fill: #ffc21a; filter: drop-shadow(0 .18em 0 #c77d00) drop-shadow(0 0 .8em rgba(255,200,40,.6)); }
.hd-burst.on .hd-stars span { animation: hd-star .55s cubic-bezier(.2,1.8,.4,1) forwards; animation-delay: calc(var(--i) * .16s); }
@keyframes hd-star { to { transform: scale(1); } }
.hd-rays { position: absolute; left: 0; top: 0; width: 16em; height: 16em; margin: -8em 0 0 -8em; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,226,120,.55) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); opacity: 0; transform: scale(.3); }
.hd-burst.on .hd-rays { animation: hd-rays 2.4s ease-out forwards; }
@keyframes hd-rays { 0% { opacity: 0; transform: scale(.3) rotate(0); } 20% { opacity: 1; } 100% { opacity: .55; transform: scale(1) rotate(40deg); } }
.hd-stamp { position: absolute; left: 0; top: -.4em; transform: translate(-50%, -50%) rotate(-12deg) scale(2.2); padding: .35em .8em; border: .22em solid #b6392a; border-radius: .5em; color: #b6392a; background: rgba(255,248,236,.92); font-weight: 900; font-size: 1.5em; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; box-shadow: 0 0 0 .18em rgba(255,248,236,.92); }
.hd-burst.on .hd-stamp { animation: hd-stamp .45s cubic-bezier(.3,1.4,.5,1) .15s forwards; }
@keyframes hd-stamp { to { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } }
.hd-gate { position: absolute; left: 0; top: -1.2em; transform: translateX(-50%); width: 15em; padding: .6em .8em .7em; border-radius: .9em; background: #1f1660; color: #fff; box-shadow: 0 .25em 0 rgba(0,0,0,.35); text-align: center; opacity: 0; }
.hd-gate b { display: block; font-weight: 900; font-size: 1.15em; margin-bottom: .4em; }
.hd-gate span { display: block; height: .7em; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.hd-gate i { display: block; height: 100%; width: 60%; border-radius: 99px; background: linear-gradient(90deg, #ff8a3d, #ffd23f); }
.hd-burst.on .hd-gate { animation: hd-show .3s ease forwards; }
@keyframes hd-show { to { opacity: 1; } }
.hd-burst.on .hd-gate i { animation: hd-gatefill 1.1s cubic-bezier(.3,.8,.3,1) .3s forwards; }
@keyframes hd-gatefill { to { width: 100%; } }
.hd-burst.lots > i { width: .7em; height: 1em; }
.hd-badge { position: absolute; left: 0; top: 4.9em; transform: translateX(-50%) scale(.6); display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; padding: .4em .8em .4em .45em; border-radius: 99px; background: var(--b2); color: var(--b3); font-style: normal; font-weight: 850; font-size: .9em; box-shadow: 0 .2em 0 rgba(0,0,0,.2); opacity: 0; }
.hd-badge svg { width: 1.2em; height: 1.2em; padding: .15em; border-radius: 50%; background: #fff; color: var(--b1); }
.hd-burst.on .hd-badge { animation: hd-badge .5s cubic-bezier(.2,1.6,.4,1) .7s forwards; }
@keyframes hd-badge { to { opacity: 1; transform: translateX(-50%) scale(1); } }
.hd-fly { position: absolute; left: 0; top: 0; z-index: 5; margin: -.8em 0 0 -2.2em; padding: .35em .7em; border-radius: 99px; background: #ffc21a; color: #3a2600; font-weight: 900; font-size: .95em; white-space: nowrap; box-shadow: 0 .2em 0 #c77d00; opacity: 0; }
.hd-fly.go { animation: hd-flyto 1.5s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes hd-flyto { 0% { opacity: 0; transform: var(--from); } 15%, 35% { opacity: 1; transform: var(--from); } 85% { opacity: 1; transform: var(--to); } 100% { opacity: 0; transform: var(--to) scale(.5); } }
.hd-burst p { position: absolute; left: 0; top: 2.6em; transform: translateX(-50%); margin: 0; white-space: nowrap; padding: .45em 1em; border-radius: 99px; background: #10202b; color: #fff; font-weight: 800; box-shadow: 0 .25em 0 rgba(0,0,0,.3); }
.hd-burst > i { position: absolute; left: 0; top: 0; width: .6em; height: .9em; border-radius: .15em; background: var(--c); opacity: 0; }
.hd-burst.on > i { animation: hd-conf 1.3s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes hd-conf { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -4)) rotate(540deg); } }

/* collection chips (journal, artefacts, photos) */
.hd-chips { display: flex; flex-wrap: wrap; gap: .35em; max-width: 24em; }
.hd-chips span { display: inline-flex; align-items: center; gap: .35em; padding: .25em .6em .25em .3em; border-radius: 99px; background: #eef2f4; color: #9aa7b0; font-weight: 750; font-size: .82em; transition: .35s cubic-bezier(.2,1.5,.4,1); }
.hd-chips span i { width: 1.15em; height: 1.15em; border-radius: 50%; background: #cfd8de; transition: background .3s; }
.hd-chips span.got { background: var(--bs); color: #10202b; transform: scale(1.04); }
.hd-chips span.got i { background: var(--c, var(--b1)); box-shadow: inset 0 -.15em 0 rgba(0,0,0,.15); }
.hd-count { font-weight: 850; font-variant-numeric: tabular-nums; color: var(--b1); }

/* labels pinned to things in the world */
.hd-tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); padding: .3em .6em; border-radius: .5em; background: #fff; font-weight: 800; font-size: .82em; white-space: nowrap; box-shadow: 0 .2em 0 rgba(0,0,0,.18); opacity: 0; transition: opacity .3s; }
.hd-tag.on { opacity: 1; animation: hd-in .35s ease; }
@keyframes hd-in { from { opacity: 0; } }
.hd-tag::after { content: ""; position: absolute; left: 50%; bottom: -.35em; margin-left: -.35em; border: .35em solid transparent; border-bottom: 0; border-top-color: #fff; }
.hd-tag.ai { background: #10202b; color: #fff; }
.hd-tag.ai::after { border-top-color: #10202b; }
.hd-tag.good { background: #1fb45f; color: #fff; } .hd-tag.good::after { border-top-color: #1fb45f; }
.hd-tag.bad { background: #f0533a; color: #fff; } .hd-tag.bad::after { border-top-color: #f0533a; }

/* vision boxes (rover camera) */
.hd-vbox { position: absolute; left: 0; top: 0; border: .18em solid #3be0c2; border-radius: .35em; box-shadow: 0 0 0 .1em rgba(0,0,0,.25); opacity: 0; transition: opacity .3s, border-color .3s; }
.hd-vbox.on { opacity: 1; animation: hd-in .35s ease; }
.hd-vbox b { position: absolute; left: -.18em; bottom: 100%; margin-bottom: .2em; padding: .15em .45em; border-radius: .3em; background: #3be0c2; color: #063a33; font-size: .78em; font-weight: 850; white-space: nowrap; }
.hd-vbox.bad { border-color: #ff7a59; } .hd-vbox.bad b { background: #ff7a59; color: #fff; }

/* code blocks (STEM) */
.hd-code { display: grid; gap: .25em; }
.hd-blk { display: flex; align-items: center; gap: .4em; padding: .38em .7em .42em; border-radius: .45em .45em .45em .45em; background: var(--c, #5b4cf0); color: #fff; font-weight: 800; font-size: .85em; position: relative; box-shadow: inset 0 -.18em 0 rgba(0,0,0,.18); transform-origin: left center; transition: .4s cubic-bezier(.2,1.5,.4,1); }
.hd-blk::before { content: ""; position: absolute; left: .9em; top: -.2em; width: 1.2em; height: .35em; border-radius: 0 0 .3em .3em; background: inherit; filter: brightness(.92); }
.hd-blk.hat { border-radius: 1em .6em .45em .45em; }
.hd-blk.hat::before { display: none; }
.hd-blk em { font-style: normal; background: rgba(255,255,255,.95); color: #10202b; border-radius: 99px; padding: .05em .5em; font-weight: 800; }
.hd-blk.new { animation: hd-snap .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes hd-snap { 0% { transform: translateX(1.4em) scale(.9); opacity: 0; } }
.hd-blk.swap { animation: hd-shake .45s; }
@keyframes hd-shake { 25% { transform: translateX(-.2em); } 75% { transform: translateX(.2em); } }

/* vote tiles, leaderboard and countdown (camp) */
.hd-votes { left: 1.1em; right: 1.1em; bottom: 1em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.hd-vote { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: .45em; min-height: 3.9em; padding: .6em .75em; border-radius: .9em; color: #fff; font-weight: 800; background: var(--c); box-shadow: 0 .3em 0 rgba(0,0,0,.25), 0 .7em 1.4em rgba(0,0,0,.16); transition: transform .25s, opacity .3s; }
.hd-vote .k { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: .5em; background: rgba(255,255,255,.25); margin-right: .4em; }
.hd-vote p { margin: 0; display: flex; align-items: flex-start; font-size: .95em; line-height: 1.2; }
.hd-vote .k { flex: none; margin-top: -.1em; }
.hd-vote .dots { display: flex; gap: .2em; flex-wrap: wrap; min-height: 1em; }
.hd-vote .dots i { width: .95em; height: .95em; border-radius: 50%; background: #fff; box-shadow: inset 0 -.12em 0 rgba(0,0,0,.2); animation: hd-dot .35s cubic-bezier(.2,1.8,.4,1); }
@keyframes hd-dot { from { transform: scale(0); } }
.hd-vote.win { transform: translateY(-.3em) scale(1.03); box-shadow: 0 .3em 0 rgba(0,0,0,.25), 0 0 0 .2em #fff, 0 1em 2em rgba(0,0,0,.25); }
.hd-vote.lose { opacity: .5; }
.hd-board { left: 1.1em; top: 9.6em; width: 12.5em; padding: .55em .6em .6em; border-radius: 1em; background: rgba(16,32,43,.9); color: #fff; box-shadow: 0 .25em 0 rgba(0,0,0,.35); }
.hd-board small { display: block; font-size: .7em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); margin: 0 0 .3em .2em; }
.hd-board ol { list-style: none; margin: 0; padding: 0; position: relative; height: 8.4em; }
.hd-board li { position: absolute; left: 0; right: 0; height: 1.9em; display: flex; align-items: center; gap: .45em; padding: 0 .45em; border-radius: .5em; font-weight: 750; font-size: .9em; transition: top .6s cubic-bezier(.3,1.3,.4,1), background .3s; }
.hd-board li i { width: 1.15em; height: 1.15em; border-radius: .35em; background: var(--c); flex: none; }
.hd-board li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.hd-board li.me { background: rgba(255,255,255,.14); }
.hd-ring { left: 50%; top: 1em; transform: translateX(-50%); display: flex; align-items: center; gap: .5em; padding: .3em .8em .3em .35em; border-radius: 99px; background: rgba(255,255,255,.95); font-weight: 850; box-shadow: 0 .2em 0 rgba(12,27,36,.18); font-variant-numeric: tabular-nums; }
.hd-ring svg { width: 1.9em; height: 1.9em; transform: rotate(-90deg); }
.hd-ring circle { fill: none; stroke-width: 4; }
.hd-ring .bg { stroke: #e6ecf0; } .hd-ring .fg { stroke: var(--b1); stroke-linecap: round; transition: stroke-dashoffset .3s linear; }

/* artefact cards (museum) and photo card (rover) */
.hd-arts { display: flex; gap: .4em; }
.hd-art { width: 4.2em; padding: .3em .3em .35em; border-radius: .7em; background: #f4ece0; text-align: center; font-size: .78em; font-weight: 800; color: #8a7a66; transition: .4s cubic-bezier(.2,1.5,.4,1); }
.hd-art span { display: block; height: 2.6em; border-radius: .5em; margin-bottom: .25em; background: #e5d9c6; display: grid; place-items: center; }
.hd-art span svg { width: 1.9em; height: 1.9em; fill: #c8b79e; transition: fill .3s; }
.hd-art.got { background: var(--b2); color: var(--b3); transform: translateY(-.15em); }
.hd-art.got span { background: #fff6e4; }
.hd-art.got span svg { fill: var(--b1); }
.hd-photo { right: 1.1em; bottom: 1em; width: 9.5em; padding: .4em .4em .55em; background: #fff; border-radius: .5em; box-shadow: 0 .3em 0 rgba(0,0,0,.2), 0 1em 2em rgba(0,0,0,.2); transform: rotate(4deg) scale(.4); opacity: 0; transition: .5s cubic-bezier(.2,1.5,.4,1); font-weight: 800; font-size: .82em; text-align: center; }
.hd-photo.on { transform: rotate(4deg); opacity: 1; }
.hd-photo canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: .3em; margin-bottom: .35em; background: #b8532f; }
.hd-flash { inset: 0; background: #fff; opacity: 0; }
.hd-flash.on { animation: hd-flash .6s ease-out; }
@keyframes hd-flash { 0% { opacity: .9; } 100% { opacity: 0; } }

/* small screens: give the HUD a little more weight */
@container (max-width: 520px) {
  .hud { font-size: max(10.5px, 2.95cqw); }
  .hd-brand small, .hd-pick, .st-xp, .hd-board, .hd-slot, .hd-chip, .hd-who b, .hd-conf, .hd-ring svg { display: none !important; }
  .hd-brand { padding: .3em .7em .3em .3em; }
  .hd-logo { width: 1.9em; height: 1.9em; }
  .hd-mission small { display: none; }
  .hd-mission { padding: .45em .7em .5em .45em; }
  .hd-card { min-height: 0; padding: .45em .6em .5em .45em; font-size: .9em; }
  .hd-k { width: 1.6em; height: 1.6em; }
  .hd-cards { gap: .3em; }
  .hd-votes .hd-vote { min-height: 0; }
  .hd-votes .hd-vote p { font-size: .8em; }
  .hd-say { min-height: 0; font-size: .92em; }
  .hd-bot { width: 2.3em; height: 2.3em; }
  .hd-meters { padding: .45em .6em; }
  .hd-meter { font-size: .85em; }
  .hd-prog { width: 62%; }
  .hd-ring { top: 3.4em; left: auto; right: 1.1em; transform: none; padding: .25em .6em; font-size: .9em; }
  .hd-burst { top: 30%; }
  .hd-tag { font-size: .85em; }
  .hd-vbox.opt { display: none; }
  .hud:has(.hd-prog) .hd-toast { top: 74%; }
  .hd-mission { max-width: 80%; }
  .hd-bubble { width: auto; left: 1.1em; top: auto; bottom: 1em; border-radius: 1em; }
  .hud:has(.hd-panel.on) .hd-bubble, .hud:has(.hd-cards.on) .hd-bubble, .hud:has(.hd-votes) .hd-bubble { opacity: 0; }
  .hd-panel { flex-direction: column; align-items: stretch; gap: .4em; }
  .hd-meters { min-width: 0; }
  .hd-chips { max-width: none; }
  .hd-chips span { font-size: .78em; }
  .hd-art { width: auto; flex: 1; }
  .hd-toast { top: 38%; font-size: 1em; }
  .hd-prompt { bottom: auto; top: 10.6em; right: 1.1em; max-width: 64%; }
  .hd-cards { grid-template-columns: 1fr; gap: .35em; }
  .hd-card { min-height: 2.6em; }
  .hd-prompt { max-width: 60%; }
  .hd-board { width: 10.5em; }
  .hd-votes { gap: .35em; } .hd-vote { min-height: 4em; padding: .5em; }
}

@media (prefers-reduced-motion: reduce) {
  .hud *, .hud { transition-duration: .01s !important; animation: none !important; }
  .hd-burst.on .hd-stars span { transform: none; }
  .hd-burst > i { display: none; }
}

/* program panel (STEM) */
.hd-prog { right: 1.1em; top: 10.6em; width: 31%; padding: .55em .6em .65em; border-radius: 1em; background: rgba(255,255,255,.95); box-shadow: 0 .25em 0 rgba(12,27,36,.16), 0 .8em 1.6em rgba(0,0,0,.12); opacity: 0; transform: translateX(-1em); transition: .45s cubic-bezier(.2,1.3,.4,1); }
.hd-prog.on { opacity: 1; transform: none; }
@container (max-width: 520px) { .hd-prog { top: 10.6em; right: auto; left: 1.1em; width: 60%; } .hd-board { top: 10.6em; width: 10.5em; } .hd-photo { bottom: 7.5em; } }