:root {
  --glass: rgba(12, 16, 20, .74);
  --glass-solid: rgba(12, 16, 20, .92);
  --line: rgba(255, 255, 255, .16);
  --ink: #f7f4ec;
  --muted: #cfc8b6;
  --gold: #ffc83d;
  --gold-2: #f2a91f;
  --gold-ink: #1d1504;
  --ok: #7fe08a;
  --draft: #ffb36b;
  --r: 18px;
}
* { box-sizing: border-box }
html, body { margin: 0; height: 100%; overflow: hidden; background: #cdd6d8; color: var(--ink);
  font: 19px/1.45 Inter, system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased }
button, input { font: inherit }
[hidden] { display: none !important }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab }
#c:active { cursor: grabbing }
body.hovering #c { cursor: pointer }

/* ---------- buttons ---------- */
.btn { min-height: 62px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .07); color: var(--ink); font-weight: 700; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  transition: background .15s, transform .1s; -webkit-tap-highlight-color: transparent }
.btn:hover { background: rgba(255, 255, 255, .16) }
.btn:active { transform: scale(.97) }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px }
.btn svg { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.btn svg.fill { fill: currentColor; stroke: none }
.btn.gold { background: linear-gradient(180deg, #ffd96e, var(--gold-2)); color: var(--gold-ink); border-color: transparent;
  box-shadow: 0 6px 22px rgba(255, 180, 30, .35) }
.btn.gold:hover { background: linear-gradient(180deg, #ffe08a, #f7b432) }
.btn.ghost { background: transparent }
.btn.sq { width: 62px; padding: 0 }
.btn.xl { min-height: 70px; font-size: 21px; padding: 0 28px; border-radius: 16px }
.btn[aria-pressed="true"] { background: rgba(255, 200, 61, .22); border-color: var(--gold); color: #fff }

/* ---------- HUD ---------- */
#brand { position: fixed; top: 16px; left: 16px; display: flex; gap: 12px; align-items: center; padding: 10px 18px 10px 10px;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(10px) }
#brand b { display: block; font: 900 21px/1.1 Archivo, sans-serif; letter-spacing: .02em }
#brand span { display: block; color: var(--muted); font-size: 15px }
.logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(160deg, #ffd96e, var(--gold-2)) }
.logo svg { width: 28px; height: 28px; fill: var(--gold-ink) }
.logo.big { width: 76px; height: 76px; border-radius: 20px; margin: 0 auto 18px }
.logo.big svg { width: 46px; height: 46px }

#minimap { position: fixed; top: 16px; right: 16px; width: 248px; height: 186px; border-radius: var(--r); overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .55); box-shadow: 0 8px 28px rgba(0, 0, 0, .35); cursor: pointer; background: #222 }
#minimap canvas { width: 100%; height: 100%; display: block }
#minimap .north { position: absolute; top: 6px; left: 8px; font: 900 15px Archivo; color: #fff; text-shadow: 0 1px 3px #000 }

#zoom { position: fixed; right: 16px; top: 218px; display: grid; gap: 8px; padding: 8px; background: var(--glass);
  border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(10px) }

#dock { position: fixed; left: 50%; bottom: calc(34px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 10px;
  padding: 10px; background: var(--glass); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(12px);
  max-width: calc(100vw - 32px) }

#credit { position: fixed; left: 0; right: 0; bottom: 0; padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); font-size: 12.5px; color: #eee;
  text-align: center; background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); pointer-events: none }

/* ---------- labels in the 3D scene ---------- */
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden }
.lbl { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; transition: opacity .25s }
.lbl.click { pointer-events: auto; cursor: pointer }
.lbl .in { display: flex; flex-direction: column; align-items: center }
.lbl .stem { width: 2px; height: calc(26px + var(--lift, 0px)); background: linear-gradient(var(--c, #fff), transparent) }
.lbl.group .tag { font: 900 17px Archivo, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px 8px 12px;
  border-radius: 999px; background: var(--glass-solid); border: 2.5px solid var(--c); color: #fff; display: flex; gap: 8px; align-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4) }
.lbl.group .tag i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c) }
.lbl.group .tag small { font: 600 14px Inter, sans-serif; letter-spacing: 0; text-transform: none; color: var(--muted) }
.lbl.group:hover .tag { background: #000 }
.lbl.pkg .in { animation: bob 2.6s ease-in-out infinite }
.lbl.pkg .tag { background: linear-gradient(180deg, #ffd96e, var(--gold-2)); color: var(--gold-ink); padding: 10px 18px; border-radius: 16px;
  text-align: center; box-shadow: 0 0 0 4px rgba(255, 214, 102, .35), 0 10px 32px rgba(255, 180, 30, .6) }
.lbl.pkg .tag b { display: block; font: 900 21px Archivo, sans-serif; letter-spacing: .03em }
.lbl.pkg .tag span { display: block; font: 700 14px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase }
.lbl.pkg .stem { height: calc(40px + var(--lift, 0px)); --c: #ffd96e }
.lbl.place { font: italic 600 17px Inter, sans-serif; color: #fff; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, .7) }
.lbl.road { font: 700 15px Inter, sans-serif; color: #2a1a00; background: #ffd27a; padding: 4px 10px; border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35) }
.lbl.num { font: 800 14px Inter, sans-serif; color: #fff; background: rgba(0, 0, 0, .6); border: 1.5px solid var(--c); border-radius: 8px; padding: 1px 7px }
@keyframes bob { 50% { transform: translateY(-8px) } }

#tip { position: fixed; z-index: 5; pointer-events: none; padding: 8px 12px; border-radius: 10px; background: var(--glass-solid);
  border: 1px solid var(--line); font-weight: 700; font-size: 16px; transform: translate(14px, 14px) }

/* ---------- info card ---------- */
#card { position: fixed; left: 16px; top: 100px; bottom: 130px; width: 410px; overflow: auto; padding: 22px 22px 18px;
  background: var(--glass-solid); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); animation: slidein .35s cubic-bezier(.2, .9, .3, 1) }
@keyframes slidein { from { transform: translateX(-30px); opacity: 0 } }
#card .x { position: absolute; top: 12px; right: 12px }
#card .eyebrow { font: 800 14px Inter; letter-spacing: .12em; text-transform: uppercase; color: var(--c, var(--gold)) }
#card h2 { margin: 4px 0 12px; font: 900 34px/1.1 Archivo, sans-serif; padding-right: 60px }
#card .badge { display: inline-flex; gap: 8px; align-items: center; padding: 7px 12px; border-radius: 999px; font-weight: 700; font-size: 16px;
  background: rgba(255, 200, 61, .16); color: #ffe39a; border: 1px solid rgba(255, 200, 61, .45) }
#card .badge svg { width: 18px; height: 18px; fill: currentColor }
#card .badge.plain { background: rgba(255, 255, 255, .08); color: var(--ink); border-color: var(--line) }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 }
.stats div { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px; text-align: center }
.stats b { display: block; font: 900 26px/1.1 Archivo, sans-serif }
.stats span { font-size: 14px; color: var(--muted) }
.facts { list-style: none; margin: 0 0 16px; padding: 0 }
.facts li { padding: 11px 0; border-top: 1px solid var(--line) }
.facts .k { display: block; font-size: 15px; color: var(--muted) }
.facts .v { display: block; font-weight: 700; font-size: 19px }
.src { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 6px }
.src.ok { color: #0c2a10; background: var(--ok) }
.src.draft { color: #2a1300; background: var(--draft) }
.src.map { color: #0b1a2a; background: #9fd3ff }
.card-btns { display: grid; gap: 10px }

/* ---------- sheets, captions, modals ---------- */
.sheet { position: fixed; left: 16px; top: 100px; bottom: 130px; width: 410px; overflow: auto; padding: 18px 18px;
  background: var(--glass-solid); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(14px) }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px }
.sheet h2 { margin: 0; font: 900 26px Archivo, sans-serif }
.grp { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; margin-top: 10px; padding: 14px; min-height: 76px;
  border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--ink); cursor: pointer }
.grp:hover { background: rgba(255, 255, 255, .12) }
.grp i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); flex: none }
.grp b { display: block; font: 900 21px Archivo, sans-serif }
.grp span { color: var(--muted); font-size: 16px }
.grp.star { border-color: rgba(255, 200, 61, .6); background: rgba(255, 200, 61, .1) }

#caption { position: fixed; left: 50%; bottom: 128px; transform: translateX(-50%); width: min(820px, calc(100vw - 32px));
  padding: 14px 16px 14px 22px; background: var(--glass-solid); border: 1px solid var(--line); border-radius: 20px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center;
  backdrop-filter: blur(12px); box-shadow: 0 16px 44px rgba(0, 0, 0, .45); animation: rise .4s ease-out }
@keyframes rise { from { transform: translate(-50%, 16px); opacity: 0 } }
.cap-step { grid-column: 1; font: 800 13px Inter; letter-spacing: .14em; text-transform: uppercase; color: var(--gold) }
.cap-text { grid-column: 1; margin: 0; font: 700 22px/1.3 Archivo, sans-serif }
.cap-btns { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px }

#toast { position: fixed; left: 50%; top: 100px; transform: translateX(-50%); padding: 14px 20px; border-radius: 14px;
  background: var(--glass-solid); border: 1px solid var(--line); font-weight: 700; font-size: 19px; max-width: calc(100vw - 32px); text-align: center }

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55) }
.modal-in { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px; border-radius: 22px;
  background: #12171c; border: 1px solid var(--line) }
.modal h2 { margin: 0 0 8px; font: 900 30px Archivo, sans-serif }
.help-list { padding: 0; margin: 0 0 20px; list-style: none }
.help-list li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 20px }
form label { display: block; margin: 12px 0; font-weight: 700; font-size: 17px }
form input { display: block; width: 100%; margin-top: 6px; min-height: 58px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--line);
  background: #0b0f12; color: var(--ink); font-size: 20px }
form input:focus { outline: none; border-color: var(--gold) }
form .row { display: flex; gap: 10px; margin-top: 18px }
.note { padding: 14px; border-radius: 12px; background: rgba(127, 224, 138, .14); border: 1px solid rgba(127, 224, 138, .4) }

/* ---------- intro & loading ---------- */
#intro { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .15), rgba(0, 0, 0, .6)) }
.intro-in { max-width: 860px; animation: rise2 1s ease-out }
@keyframes rise2 { from { transform: translateY(24px); opacity: 0 } }
.kicker { font: 800 16px Inter; letter-spacing: .2em; text-transform: uppercase; color: #ffe39a; text-shadow: 0 2px 8px #000; margin: 0 }
#intro h1 { margin: 8px 0 10px; font: 900 clamp(48px, 9vw, 104px)/.95 Archivo, sans-serif; letter-spacing: -.01em; text-transform: uppercase;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .55) }
#intro h1 em { font-style: normal; background: linear-gradient(180deg, #fff0b8, #ffc83d 55%, #e0901a); -webkit-background-clip: text;
  background-clip: text; color: transparent; filter: drop-shadow(0 4px 16px rgba(255, 170, 30, .45)) }
.lead { font-size: 22px; margin: 0 auto 26px; max-width: 640px; text-shadow: 0 2px 10px #000 }
.intro-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap }
.intro-btns .btn:not(.gold) { background: var(--glass) }

#loading { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: #0d1114; transition: opacity .6s }
#loading.done { opacity: 0; pointer-events: none }
.load-in { text-align: center; width: min(360px, 80vw) }
.load-in p { font: 800 22px Archivo, sans-serif; margin: 0 0 14px }
.bar { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden }
.bar i { display: block; height: 100%; width: 4%; background: linear-gradient(90deg, #ffd96e, var(--gold-2)); transition: width .3s }

body.intro #labels, body.intro #dock, body.intro #zoom { opacity: 0; pointer-events: none }
#labels, #dock, #zoom { transition: opacity .5s }

/* ---------- medium screens: dock buttons stack icon over text ---------- */
@media (max-width: 1180px) {
  #dock .btn { flex-direction: column; gap: 3px; min-height: 66px; min-width: 92px; padding: 6px 10px; font-size: 15px }
}

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  body { font-size: 18px }
  #brand { top: 10px; left: 10px; padding: 6px 12px 6px 6px }
  #brand b { font-size: 17px } #brand span { font-size: 13px }
  .logo { width: 36px; height: 36px } .logo svg { width: 22px; height: 22px }
  #minimap { top: 10px; right: 10px; width: 132px; height: 99px }
  #zoom { top: 118px; right: 10px; padding: 6px; gap: 6px }
  #zoom .btn.sq { width: 52px; min-height: 52px }
  #dock { left: 10px; right: 10px; transform: none; bottom: calc(28px + env(safe-area-inset-bottom)); display: grid;
    grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; max-width: none }
  #dock .btn { flex-direction: column; gap: 2px; min-height: 64px; padding: 4px; font-size: 14px }
  #dock .btn svg { width: 24px; height: 24px }
  #card, .sheet { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 62vh; border-radius: 22px 22px 0 0; z-index: 8;
    animation: up .35s cubic-bezier(.2, .9, .3, 1) }
  @keyframes up { from { transform: translateY(40px); opacity: 0 } }
  #card h2 { font-size: 28px }
  #caption { bottom: 190px; padding: 12px 14px; grid-template-columns: 1fr; text-align: center }
  .cap-btns { grid-column: 1; grid-row: auto; justify-content: center; margin-top: 8px }
  .cap-text { font-size: 19px }
  #toast { top: 120px }
}
#credit .short { display: none }
@media (max-width: 520px) {
  #brand span { display: none }
  #brand b { font-size: 16px }
  #minimap { width: 118px; height: 89px }
  #zoom { top: 108px }
  #credit .long { display: none }
  #credit .short { display: inline }
}