/* Oasis Windcrest site styles.
   The approved mockup stylesheet, unchanged, without the mockup marker and the logo review sheet styles.
   Palette, roles and type come from the Oasis "Common Horizon Night" tokens.
   Flat shapes only: no glow, no bevel, no shadow. Aqua is a micro-accent.
   The block at the end replaces the mockups' inline styles (the Content Security Policy forbids them). */

:root {
  --void: #070B14;
  --midnight: #0D1426;
  --night: #101A2E;
  --indigo: #2D315C;
  --dusk: #66506F;
  --ember: #FFB067;
  --starlight: #F7F0E8;
  --aqua: #76D7CC;
  --muted: #AEB7C7;
  --line: rgba(247, 240, 232, 0.12);
  --line-strong: rgba(247, 240, 232, 0.24);
  --ember-wash: rgba(255, 176, 103, 0.10);
  --font-display: Bahnschrift, "DIN Alternate", "Barlow Semi Condensed", "Franklin Gothic Medium", "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--muted);
  font: 16px/1.55 var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--starlight); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ember); }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--starlight); margin: 0; letter-spacing: 0.005em; }
h1 { font-size: clamp(34px, 6.2vw, 64px); line-height: 1.04; }
h2 { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.15; }
h3 { font-size: 19px; line-height: 1.25; }
p { margin: 0; }
.mono { font-family: var(--font-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); }
.lead { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--muted); max-width: 34em; }
.small { font-size: 14px; }
.dim { color: rgba(174, 183, 199, 0.72); }
.starlight { color: var(--starlight); }
.ember { color: var(--ember); }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--void); position: relative; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
/* Logo. The files come only from assets/logo/. Smallest sizes: field tile 16 px, colour mark without field 24 px,
   one colour 32 px, horizontal lockup 32 px high (the header uses 40). Clear space: 3 modules. No outline is added.
   The lockup is a picture rendered from its SVG (its name is live Bahnschrift text, which phones lack). */
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; padding: 0 10px 0 0; }
.brand-lockup { height: 40px; width: auto; flex: none; }
.brand-mark-only { display: none; width: 40px; height: 40px; flex: none; }
@media (max-width: 379px) { .brand-lockup { display: none; } .brand-mark-only { display: block; } }
.logo-large { width: 72px; height: 72px; margin-bottom: 18px; }
.foot-brand { display: flex; align-items: flex-start; gap: 10px; }
/* mark-mono.svg is one colour (black as a plain image): painted through a mask in the page's muted grey. */
.foot-brand .mark-mono {
  flex: none; width: 32px; height: 32px; margin-top: -4px; background-color: var(--muted);
  -webkit-mask: url("/assets/logo/mark-mono.svg") center / contain no-repeat;
  mask: url("/assets/logo/mark-mono.svg") center / contain no-repeat;
}
.nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 4px; font-size: 15px; }
.nav a:hover { color: var(--starlight); background: var(--midnight); }
.nav a[aria-current="page"] { color: var(--starlight); box-shadow: inset 0 -2px 0 var(--ember); border-radius: 0; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; color: var(--starlight); background: var(--midnight); }
.user-chip small { display: block; color: var(--muted); font-size: 12px; line-height: 1.2; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 20px; border-radius: 4px; border: 1px solid transparent; font: 600 16px/1 var(--font-display); letter-spacing: 0.02em; text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--ember); color: #1a1208; }
.btn-primary:hover { background: #ffc085; }
.btn-ghost { background: transparent; color: var(--starlight); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--starlight); }
.btn-small { min-height: 34px; padding: 6px 12px; font-size: 14px; }
.btn-block { width: 100%; }

/* Surfaces */
.card { background: var(--midnight); border: 1px solid var(--line); border-radius: 6px; padding: 22px; }
.card.tight { padding: 16px; }
.card h3 + p, .card h3 + ul { margin-top: 8px; }
.rule { height: 2px; background: var(--line-strong); border: 0; margin: 0; }
.section { padding: clamp(44px, 7vw, 84px) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.side { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) {
  .grid.cols-3, .grid.cols-2, .grid.side { grid-template-columns: minmax(0, 1fr); }
}

/* Pixel bits: a live dot, a block avatar, a step number */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); flex: none; display: inline-block; }
.dot.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.dot.warn { background: var(--ember); }
.status-line { display: inline-flex; align-items: center; gap: 8px; color: var(--starlight); }
.step-no { width: 34px; height: 34px; display: grid; place-items: center; background: var(--ember); color: #1a1208; font: 700 17px/1 var(--font-display); border-radius: 2px; margin-bottom: 14px; }
.avatar { width: 28px; height: 28px; flex: none; border-radius: 2px; image-rendering: pixelated; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); overflow: hidden; background: var(--indigo); }
.avatar i { display: block; }
.avatar.lg { width: 44px; height: 44px; }

/* Key/value rows */
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; margin: 0; font-size: 15px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--starlight); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; color: var(--starlight); white-space: nowrap; }
.pill.ember { border-color: rgba(255, 176, 103, 0.5); color: var(--ember); }
.tag { display: inline-block; padding: 2px 8px; border-radius: 2px; background: var(--night); border: 1px solid var(--line); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-display); }
.tag.you { background: var(--ember-wash); border-color: rgba(255, 176, 103, 0.45); color: var(--ember); }

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ul.checks li { padding-left: 22px; position: relative; }
ul.checks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--ember); }
ol.rules { margin: 0; padding-left: 0; list-style: none; counter-reset: r; display: grid; gap: 12px; }
ol.rules li { counter-increment: r; padding-left: 38px; position: relative; }
ol.rules li::before { content: counter(r); position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; font: 600 14px/1 var(--font-display); color: var(--ember); border: 1px solid rgba(255, 176, 103, 0.45); border-radius: 2px; }

/* Home hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--midnight); }
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-top: clamp(48px, 8vw, 104px); padding-bottom: clamp(150px, 20vw, 230px); }
.hero h1 { margin: 14px 0 18px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-art { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(120px, 17vw, 200px); z-index: 1; }
.hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-sky i { position: absolute; width: 3px; height: 3px; background: var(--starlight); opacity: 0.5; }
.hero-sky .far-world { position: absolute; right: 9%; top: 15%; width: clamp(18px, 2.6vw, 30px); aspect-ratio: 1; border-radius: 50%; background: var(--aqua); }
.status-card { background: var(--void); }
.status-card .kv { margin-top: 16px; }
.status-card .rule { margin: 16px 0; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-sky .far-world { top: 26px; right: 22px; }
}

/* Feature split with the fog preview */
.fog-preview { aspect-ratio: 4 / 3; width: 100%; border-radius: 6px; border: 1px solid var(--line); background: var(--void); overflow: hidden; }
.fog-preview canvas { width: 100%; height: 100%; image-rendering: pixelated; }

/* Notices */
.notice { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.notice:first-child { border-top: 0; padding-top: 0; }
.notice time { font-family: var(--font-mono); font-size: 13px; color: var(--ember); padding-top: 2px; }
.notice strong { color: var(--starlight); font-weight: 600; }

/* Footer */
.site-footer { margin-top: auto; border-top: 1px solid var(--line); padding: 26px 0 34px; font-size: 14px; }
.site-footer .wrap { display: flex; gap: 18px 28px; flex-wrap: wrap; justify-content: space-between; }
.site-footer a { color: var(--muted); }

/* Map page */
body.map-page { height: 100vh; height: 100dvh; overflow: hidden; }
.map-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.map-side { border-right: 1px solid var(--line); background: var(--midnight); overflow-y: auto; padding: 18px 18px 48px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.map-stage { position: relative; min-height: 0; background: var(--void); overflow: hidden; touch-action: none; }
.map-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.map-stage canvas:active { cursor: grabbing; }
.map-hud { position: absolute; z-index: 2; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.map-hud.tl { left: 14px; top: 14px; right: 70px; }
.map-hud.br { right: 14px; bottom: 14px; flex-direction: column; align-items: stretch; }
.map-hud.bl { left: 14px; bottom: 14px; right: 70px; }
.hud-box { background: rgba(7, 11, 20, 0.88); border: 1px solid var(--line-strong); border-radius: 4px; padding: 7px 11px; font-size: 13px; color: var(--starlight); }
.hud-btn { width: 40px; height: 40px; display: grid; place-items: center; background: rgba(7, 11, 20, 0.88); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--starlight); font: 600 20px/1 var(--font-display); cursor: pointer; }
.hud-btn:hover { border-color: var(--starlight); }
select.hud-box { appearance: none; font: inherit; font-size: 13px; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.side-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.side-title h2 { font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.member { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 4px; }
.member + .member { margin-top: 2px; }
.member:hover { background: var(--night); }
.member .name { color: var(--starlight); font-weight: 600; font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.member .where { font-size: 13px; color: var(--muted); }
.member .age { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.member.off .name { color: var(--muted); font-weight: 400; }
.privacy-box { border: 1px solid rgba(255, 176, 103, 0.4); background: var(--ember-wash); border-radius: 6px; padding: 12px 14px; font-size: 14px; color: var(--starlight); }
.privacy-box p + p { margin-top: 6px; color: var(--muted); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15px; color: var(--starlight); }
.toggle input { appearance: none; width: 36px; height: 20px; border-radius: 2px; background: var(--night); border: 1px solid var(--line-strong); position: relative; cursor: pointer; flex: none; margin: 0; }
.toggle input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: var(--muted); transition: transform 0.12s; }
.toggle input:checked { border-color: var(--ember); }
.toggle input:checked::after { transform: translateX(16px); background: var(--ember); }
.field { display: grid; gap: 6px; font-size: 14px; }
.field select, .field input[type="text"] { width: 100%; min-height: 40px; background: var(--void); color: var(--starlight); border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px 10px; font: 15px var(--font-body); }
.legend { display: grid; gap: 8px; font-size: 13px; }
.legend div { display: flex; align-items: center; gap: 10px; }
.swatch { width: 16px; height: 16px; flex: none; border-radius: 2px; }
@media (max-width: 860px) {
  body.map-page { height: auto; overflow: auto; }
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  .map-stage { height: min(66vh, 560px); height: min(66dvh, 560px); min-height: 380px; order: -1; }
  .map-side { border-right: 0; border-top: 1px solid var(--line); overflow: visible; }
}

/* Team page */
.team-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.team-swatch { width: 56px; height: 56px; border-radius: 4px; background: var(--ember); flex: none; display: grid; place-items: center; font: 700 22px/1 var(--font-display); color: #1a1208; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font: 600 12px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0 10px 10px 0; border-bottom: 1px solid var(--line); }
.table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .who { display: flex; align-items: center; gap: 10px; color: var(--starlight); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.bar { height: 8px; background: var(--night); border-radius: 1px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ember); }
.quest-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 6px 12px; align-items: center; font-size: 14px; }
.quest-row .bar { grid-column: 1 / -1; }
.quest-row b { color: var(--starlight); font-weight: 600; }
.quest-row span { text-align: right; }
.waypoint { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.waypoint:first-of-type { border-top: 0; }
.waypoint .flag { width: 12px; height: 12px; background: var(--starlight); }
.waypoint .flag.e { background: var(--ember); }
.waypoint b { color: var(--starlight); font-weight: 600; }
.page-title { padding-top: clamp(28px, 5vw, 52px); padding-bottom: clamp(20px, 3vw, 30px); }

/* Sign-in page */
.signin-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; padding: clamp(28px, 6vw, 72px) var(--gutter); }
.signin-grid { width: 100%; max-width: 940px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.signin-card { padding: clamp(22px, 4vw, 36px); }
.signin-card h1 { font-size: clamp(28px, 4vw, 36px); margin-bottom: 10px; }
.steps { display: grid; gap: 0; margin-top: 4px; }
.step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
.step .step-no { margin: 0; }
.step h3 { font-size: 17px; }
.step.todo .step-no { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); }
.codebox { display: flex; gap: 8px; margin-top: 10px; }
.codebox input { flex: 1; min-width: 0; min-height: 44px; text-align: center; letter-spacing: 0.3em; text-transform: uppercase; background: var(--void); color: var(--starlight); border: 1px solid var(--line-strong); border-radius: 4px; font: 600 18px var(--font-mono); }
kbd { font-family: var(--font-mono); font-size: 0.9em; background: var(--night); border: 1px solid var(--line-strong); border-radius: 3px; padding: 1px 7px; color: var(--starlight); }
@media (max-width: 860px) { .signin-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Site additions: former inline styles, and parts the mockups did not have ---- */
[hidden] { display: none !important; }
.mb-0 { margin-bottom: 0; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.lead-17 { font-size: 17px; }
.h2-feature { margin: 10px 0 14px; }
.title-page { font-size: clamp(30px, 5vw, 46px); }
.grid.cols-2.feature { align-items: center; gap: clamp(24px, 5vw, 56px); }
.actions-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.rule-signin { margin: 22px 0 16px; }
.rule-tight { margin: 14px 0; }
.page-body { padding-bottom: clamp(44px, 7vw, 84px); }
.narrow { max-width: 760px; }
.narrow-card { max-width: 560px; width: 100%; }

/* Hero: stars and the ridge drawing (positions were inline in the mockup) */
.hero-sky .s1 { left: 6%; top: 18%; }
.hero-sky .s2 { left: 17%; top: 52%; opacity: 0.3; }
.hero-sky .s3 { left: 31%; top: 11%; opacity: 0.35; }
.hero-sky .s4 { left: 44%; top: 30%; }
.hero-sky .s5 { left: 58%; top: 9%; opacity: 0.3; }
.hero-sky .s6 { left: 69%; top: 41%; opacity: 0.4; }
.hero-sky .s7 { left: 79%; top: 22%; opacity: 0.3; }
.hero-sky .s8 { left: 93%; top: 47%; }
.hero-art { object-fit: cover; object-position: left bottom; }
.status-card .section-head { margin-bottom: 0; }
.names { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* Forms on the account and admin pages */
.form-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.form-row input[type="text"], .field textarea {
  flex: 1; min-width: 0; min-height: 44px; background: var(--void); color: var(--starlight); border: 1px solid var(--line-strong);
  border-radius: 4px; padding: 8px 10px; font: 16px var(--font-body);
}
.field textarea { min-height: 90px; resize: vertical; }
.msg { margin-top: 10px; font-size: 14px; color: var(--starlight); }
.msg.warn { color: var(--ember); }
.btn-danger { background: transparent; color: var(--ember); border-color: rgba(255, 176, 103, 0.5); }
.btn-danger:hover { border-color: var(--ember); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.address { font: 600 18px var(--font-mono); color: var(--starlight); overflow-wrap: anywhere; }

/* Privacy page */
.prose h2 { font-size: 22px; margin: 34px 0 10px; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 10px; }
.prose ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.prose strong { color: var(--starlight); font-weight: 600; }

/* Team page (former inline styles of the mockup) */
.team-title { margin-right: auto; }
.section-head-14 { margin-bottom: 14px; }
.section-head-10 { margin-bottom: 10px; }
.section-head-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.who-off { color: var(--muted); font-weight: 400; }
.strong { font-weight: 600; }
.waypoint-ally { grid-template-columns: auto 1fr auto; }
.select-dim, .form-row select {
  min-height: 44px; background: var(--void); color: var(--starlight); border: 1px solid var(--line-strong);
  border-radius: 4px; padding: 8px 10px; font: 16px var(--font-body);
}
.form-row input[inputmode="numeric"] { max-width: 110px; }

/* Map page: Leaflet sits in the stage; the fog is the page background */
.map-stage .leaflet-container { position: absolute; inset: 0; background: var(--void); font: 13px var(--font-body); }
.map-stage .leaflet-control-zoom { display: none; }
.map-marker { width: 14px; height: 14px; border: 2px solid var(--void); }
.map-marker.you { background: var(--ember); }
.map-marker.mate { background: var(--starlight); }
.map-marker.other { background: var(--aqua); }
.map-marker.waypoint { width: 10px; height: 10px; background: var(--ember); transform: rotate(45deg); }
.map-marker.death { width: 10px; height: 10px; background: var(--muted); }
.map-label { color: var(--starlight); font: 12px var(--font-body); white-space: nowrap; text-shadow: none; background: var(--void); padding: 1px 4px; border-radius: 3px; }
.swatch.you { background: var(--ember); }
.swatch.mate { background: var(--starlight); }
.swatch.claims { background: rgba(255, 176, 103, 0.2); box-shadow: inset 0 0 0 2px var(--ember); }
.swatch.explored { background: #6f9a4d; }
.swatch.fog { background: var(--void); box-shadow: inset 0 0 0 1px rgba(247, 240, 232, 0.24); }
.hud-dot { margin-right: 6px; }
.member { cursor: pointer; }

/* Admin pages */
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.admin-tabs a { color: var(--muted); text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; }
.admin-tabs a[aria-current="page"] { color: var(--starlight); border-color: var(--line-strong); }
.table td.wrap-any { overflow-wrap: anywhere; }
.weight-3 { color: var(--ember); font-weight: 600; }
.admin-map-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: calc(100dvh - 140px); }
@media (max-width: 860px) { .admin-map-layout { grid-template-columns: minmax(0, 1fr); } .admin-map-layout .map-stage { height: 70vh; order: -1; } }

/* "Open on my phone" (A14): only on wide screens */
.qr-open { display: none; }
@media (min-width: 860px) { .qr-open { display: inline-flex; } }
.qr-dialog { background: var(--midnight); color: var(--starlight); border: 1px solid var(--line-strong); border-radius: 6px; padding: 22px; max-width: 360px; }
.qr-dialog::backdrop { background: rgba(7, 11, 20, 0.8); }
.qr-canvas { display: block; margin: 14px auto; width: 232px; height: 232px; image-rendering: pixelated; }
.qr-actions { margin-top: 14px; display: flex; justify-content: flex-end; }
.qr-choice { min-width: 64px; font: 600 22px var(--font-mono); }
.qr-number { font: 600 56px var(--font-mono); color: var(--starlight); margin: 18px 0; letter-spacing: 4px; }
.session-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }