:root {
  --afs-ink: #183247;
  --afs-ink-soft: #365268;
  --afs-muted: #657b8c;
  --afs-surface: #ffffff;
  --afs-bg: #f4f8f7;
  --afs-cream: #fff8e8;
  --afs-orange: #f2762e;
  --afs-orange-dark: #c44e10;
  --afs-yellow: #ffd75d;
  --afs-blue: #227db3;
  --afs-blue-dark: #10577f;
  --afs-green: #23875b;
  --afs-green-dark: #176344;
  --afs-red: #b83d42;
  --afs-border: #d7e3e8;
  --afs-border-strong: #c4d5dc;
  --afs-shadow-sm: 0 8px 22px rgba(24, 50, 71, .08);
  --afs-shadow: 0 20px 55px rgba(24, 50, 71, .14);
  --afs-radius-sm: 14px;
  --afs-radius: 22px;
  --afs-radius-lg: 34px;
}

.afs-site,
.afs-site * { box-sizing: border-box; }

.afs-site {
  color: var(--afs-ink);
  font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.afs-site [hidden] { display: none !important; }
.afs-site h1,
.afs-site h2,
.afs-site h3,
.afs-site p { overflow-wrap: anywhere; }
.afs-site h1,
.afs-site h2,
.afs-site h3 { color: var(--afs-ink); line-height: 1.13; }
.afs-site h1 { margin: .16em 0 .32em; font-size: clamp(2.1rem, 5vw, 4.45rem); letter-spacing: -.045em; }
.afs-site h2 { margin: .25em 0 .55em; font-size: clamp(1.45rem, 2.7vw, 2.25rem); letter-spacing: -.025em; }
.afs-site h3 { margin: .2em 0 .4em; font-size: 1.12rem; }
.afs-site p { color: var(--afs-muted); }
.afs-site a { color: var(--afs-blue-dark); }
.afs-site button,
.afs-site input,
.afs-site textarea,
.afs-site select { font: inherit; }

.afs-kicker,
.afs-card-eyebrow {
  display: inline-block;
  color: var(--afs-orange-dark);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.afs-site-nav {
  position: relative;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1280px, calc(100% - 1rem));
  margin: .5rem auto 1.25rem;
  padding: .62rem .7rem;
  border: 1px solid rgba(215, 227, 232, .9);
  border-radius: 20px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--afs-shadow-sm);
  backdrop-filter: blur(14px);
}
.afs-nav-brand,
.afs-nav-links a {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  min-height: 42px;
  border-radius: 13px;
  color: var(--afs-ink) !important;
  font-weight: 850;
  text-decoration: none !important;
}
.afs-nav-brand { padding: .35rem .75rem .35rem .42rem; }
.afs-nav-brand > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--afs-orange), #ff9c3e);
  color: #fff8d5;
  box-shadow: 0 7px 16px rgba(242, 118, 46, .23);
}
.afs-nav-links { display: flex; align-items: center; gap: .25rem; }
.afs-nav-links a { padding: .5rem .72rem; }
.afs-nav-links a > span { display: none; }
.afs-nav-links a:hover,
.afs-nav-links a:focus-visible,
.afs-nav-links a[aria-current="page"] { background: #edf5f7; }

.afs-button-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.afs-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  min-height: 48px;
  padding: .78rem 1.22rem;
  border: 0;
  border-radius: 14px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.afs-button:hover { transform: translateY(-1px); }
.afs-button:active { transform: translateY(0); }
.afs-button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.afs-button:focus-visible,
.afs-site input:focus-visible,
.afs-site textarea:focus-visible,
.afs-site select:focus-visible,
.afs-site summary:focus-visible { outline: 3px solid rgba(34, 125, 179, .3); outline-offset: 3px; }
.afs-button-primary { color: #fff !important; background: linear-gradient(135deg, var(--afs-orange), #f79332); box-shadow: 0 10px 22px rgba(242, 118, 46, .26); }
.afs-button-primary:hover { background: linear-gradient(135deg, var(--afs-orange-dark), var(--afs-orange)); }
.afs-button-secondary { color: #fff !important; background: linear-gradient(135deg, var(--afs-blue-dark), var(--afs-blue)); box-shadow: 0 10px 22px rgba(34, 125, 179, .22); }
.afs-button-quiet { color: var(--afs-ink) !important; border: 1px solid var(--afs-border); background: #f5f9fa; }
.afs-button-danger { color: var(--afs-red) !important; border: 1px solid #efd1d2; background: #fff4f4; }
.afs-button-large { min-height: 56px; padding: .95rem 1.45rem; font-size: 1.03rem; }
.afs-text-button { appearance: none; padding: .3rem 0; border: 0; color: var(--afs-red); background: transparent; font-weight: 800; cursor: pointer; text-decoration: underline; }

.afs-site label { display: flex; flex-direction: column; gap: .42rem; color: var(--afs-ink); font-weight: 800; }
.afs-site input,
.afs-site textarea,
.afs-site select {
  width: 100%;
  min-height: 50px;
  padding: .75rem .86rem;
  border: 2px solid var(--afs-border);
  border-radius: 13px;
  color: var(--afs-ink);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(24, 50, 71, .02);
}
.afs-site input::placeholder,
.afs-site textarea::placeholder { color: #8ca0ad; }
.afs-site textarea { min-height: 110px; resize: vertical; }
.afs-site input:hover,
.afs-site textarea:hover,
.afs-site select:hover { border-color: var(--afs-border-strong); }
.afs-site input:focus,
.afs-site textarea:focus,
.afs-site select:focus { border-color: var(--afs-blue); }
.afs-small { color: var(--afs-muted); font-size: .9rem; }
.afs-message { min-height: 1.45rem; padding: .55rem 0; color: var(--afs-ink-soft); font-weight: 800; }
.afs-message-error { color: var(--afs-red); }
.afs-message-warning { color: #916000; }
.afs-message-success { color: var(--afs-green-dark); }

/* Home */
.afs-home { width: min(1280px, 100%); margin: 0 auto; }
.afs-hero-premium {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 6vw, 5.6rem);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--afs-radius-lg);
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 215, 93, .42), transparent 32%),
    radial-gradient(circle at 18% 90%, rgba(34, 125, 179, .12), transparent 28%),
    linear-gradient(135deg, #fffaf0, #eaf7f7 58%, #edf5ff);
  box-shadow: var(--afs-shadow);
}
.afs-hero-premium::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .36;
  background-image: radial-gradient(rgba(24, 50, 71, .18) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.afs-hero-copy { position: relative; z-index: 2; }
.afs-hero-copy > p { max-width: 730px; margin: 0 0 1.5rem; font-size: clamp(1.05rem, 1.8vw, 1.27rem); }
.afs-trust-row { display: flex; flex-wrap: wrap; gap: .85rem 1.2rem; margin-top: 1.4rem; color: var(--afs-green-dark); font-size: .93rem; font-weight: 850; }
.afs-adventure-visual { position: relative; min-height: 420px; }
.afs-visual-map {
  position: absolute;
  inset: 5% 2% 7% 5%;
  overflow: hidden;
  border: 12px solid rgba(255, 255, 255, .9);
  border-radius: 34px;
  background:
    linear-gradient(33deg, transparent 46%, rgba(255, 255, 255, .85) 47%, rgba(255, 255, 255, .85) 52%, transparent 53%),
    linear-gradient(-24deg, transparent 46%, rgba(255, 255, 255, .68) 47%, rgba(255, 255, 255, .68) 51%, transparent 52%),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(24, 50, 71, .06) 45px 47px),
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(24, 50, 71, .06) 45px 47px),
    #cfe7d2;
  box-shadow: 0 30px 55px rgba(24, 50, 71, .22);
  transform: rotate(2deg);
}
.afs-visual-map::before,
.afs-visual-map::after { content: ""; position: absolute; border-radius: 50%; background: #a4d2e4; }
.afs-visual-map::before { width: 180px; height: 90px; top: 8%; right: -30px; }
.afs-visual-map::after { width: 120px; height: 170px; left: -34px; bottom: -28px; }
.afs-route-line { position: absolute; left: 26%; top: 25%; width: 48%; height: 48%; border: 5px dashed rgba(242, 118, 46, .75); border-top-color: transparent; border-left-color: transparent; border-radius: 50%; transform: rotate(18deg); }
.afs-pin { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 5px solid #fff; border-radius: 50% 50% 50% 10%; color: #fff; background: var(--afs-blue); box-shadow: 0 8px 18px rgba(24, 50, 71, .25); font-weight: 950; transform: rotate(-45deg); }
.afs-pin::first-letter { transform: rotate(45deg); }
.afs-pin-one { left: 20%; top: 18%; }
.afs-pin-two { right: 22%; top: 42%; }
.afs-pin-three { right: 10%; bottom: 12%; color: var(--afs-yellow); background: var(--afs-orange); }
.afs-team-dot { position: absolute; z-index: 4; left: 45%; top: 54%; width: 28px; height: 28px; border: 6px solid #fff; border-radius: 50%; background: var(--afs-green); box-shadow: 0 0 0 12px rgba(35, 135, 91, .14), 0 8px 20px rgba(24, 50, 71, .25); }
.afs-visual-card { position: absolute; z-index: 5; right: 0; bottom: 0; display: flex; flex-direction: column; min-width: 180px; padding: 1rem 1.2rem; border-radius: 18px; background: #fff; box-shadow: var(--afs-shadow); }
.afs-visual-card strong { font-size: 1.85rem; }
.afs-visual-card span { color: var(--afs-muted); font-weight: 750; }

.afs-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.afs-role-card { display: flex; gap: 1.25rem; align-items: flex-start; min-height: 210px; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--afs-border); border-radius: var(--afs-radius); color: var(--afs-ink) !important; background: #fff; box-shadow: var(--afs-shadow-sm); text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.afs-role-card:hover { transform: translateY(-3px); border-color: #b8d3dc; box-shadow: var(--afs-shadow); }
.afs-role-card p { margin: .35rem 0 .75rem; }
.afs-role-card strong { color: var(--afs-blue-dark); }
.afs-role-icon { display: grid; place-items: center; flex: 0 0 68px; width: 68px; height: 68px; border-radius: 20px; font-size: 2rem; }
.afs-role-play .afs-role-icon { background: #e6f5ee; }
.afs-role-plan .afs-role-icon { background: #e8f3fa; }
.afs-showcase { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin: 1.2rem 0; padding: clamp(1.7rem, 5vw, 4rem); border-radius: var(--afs-radius-lg); background: var(--afs-ink); }
.afs-showcase h2 { color: #fff; }
.afs-showcase > div:first-child p { color: #c9d9e4; font-size: 1.05rem; }
.afs-feature-list { display: grid; gap: .75rem; }
.afs-feature-list article { display: flex; gap: 1rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: rgba(255, 255, 255, .06); }
.afs-feature-list article > span { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; color: var(--afs-ink); background: var(--afs-yellow); font-weight: 950; }
.afs-feature-list h3 { color: #fff; }
.afs-feature-list p { margin: 0; color: #c9d9e4; }
.afs-safety-banner { display: flex; gap: 1rem; align-items: center; margin: 1.2rem 0; padding: 1.1rem 1.25rem; border: 1px solid #f0d8b4; border-radius: 18px; background: #fff8e9; }
.afs-safety-banner > span { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 15px; background: #ffe4b5; font-size: 1.45rem; }
.afs-safety-banner p { margin: .15rem 0 0; }
.afs-safety-banner > a { margin-left: auto; font-weight: 900; white-space: nowrap; }

/* Common panels/workspaces */
.afs-workspace-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.2rem; padding: clamp(1.4rem, 3.5vw, 2.5rem); border-radius: var(--afs-radius); background: linear-gradient(135deg, #fff8e9, #eef8f9); box-shadow: var(--afs-shadow-sm); }
.afs-workspace-header h1 { font-size: clamp(2.1rem, 4vw, 3.6rem); }
.afs-workspace-header p { max-width: 760px; margin-bottom: 0; }
.afs-panel,
.afs-login-card { position: relative; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--afs-border); border-radius: var(--afs-radius); background: var(--afs-surface); box-shadow: var(--afs-shadow-sm); }
.afs-panel-number { position: absolute; right: 1.1rem; top: 1rem; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: var(--afs-blue); font-weight: 950; }
.afs-tip-box { display: flex; gap: .8rem; align-items: flex-start; margin-top: 1rem; padding: .9rem; border-radius: 14px; background: #eff7fa; }
.afs-tip-box p { margin: 0; }
.afs-login-card { max-width: 650px; margin: 2rem auto; text-align: center; }
.afs-login-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 22px; background: #eff7fa; font-size: 2rem; }

/* Game */
.afs-game { width: min(1280px, 100%); margin: 0 auto; }
.afs-game-shell { position: relative; overflow: hidden; min-height: 670px; padding: clamp(.8rem, 2vw, 1.35rem); border: 1px solid var(--afs-border); border-radius: 28px; background: linear-gradient(180deg, #f8fcfb, #eff6f5); box-shadow: var(--afs-shadow); }
.afs-game-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 78px; padding: .7rem .85rem 1rem; }
.afs-game-brand { display: flex; align-items: center; gap: .85rem; }
.afs-game-logo { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; color: #fff5c5; background: linear-gradient(145deg, var(--afs-orange), #f89c3b); box-shadow: 0 9px 18px rgba(242, 118, 46, .24); font-size: 1.5rem; }
.afs-game-header h1 { margin: .05rem 0 0; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.025em; }
.afs-live-pills { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; }
.afs-status-pill { display: inline-flex; align-items: center; gap: .38rem; min-height: 36px; padding: .42rem .65rem; border: 1px solid #d4e8dd; border-radius: 999px; color: var(--afs-green-dark); background: #eff9f3; font-size: .78rem; font-weight: 850; }
.afs-status-pill:empty { display: none; }
.afs-status-pill > i { width: 8px; height: 8px; border-radius: 50%; background: var(--afs-green); box-shadow: 0 0 0 4px rgba(35, 135, 91, .13); }
.afs-status-pill.is-error { border-color: #efd1d2; color: var(--afs-red); background: #fff4f4; }
.afs-status-pill.is-error > i { background: var(--afs-red); box-shadow: 0 0 0 4px rgba(184, 61, 66, .12); }
.afs-onboarding-card { max-width: 760px; margin: clamp(1.2rem, 4vw, 3rem) auto; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(215, 227, 232, .95); border-radius: 28px; background: #fff; box-shadow: var(--afs-shadow); }
.afs-onboarding-card > p { font-size: 1.05rem; }
.afs-onboarding-number { display: grid; place-items: center; float: right; width: 46px; height: 46px; border-radius: 15px; color: #fff; background: var(--afs-blue); box-shadow: 0 8px 18px rgba(34, 125, 179, .2); font-weight: 950; }
.afs-code-form { margin-top: 1.3rem; }
.afs-code-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; }
.afs-code-input-row input { min-height: 58px; font-size: 1.35rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.afs-hunt-preview { margin: 1rem 0; padding: 1rem; border-radius: 16px; background: #f3f8fa; }
.afs-hunt-preview h3 { margin-top: 0; }
.afs-hunt-preview p { margin-bottom: 0; }
.afs-consent-points { display: grid; gap: .65rem; margin: 1.1rem 0; }
.afs-consent-points article { display: flex; gap: .8rem; padding: .85rem; border: 1px solid var(--afs-border); border-radius: 15px; background: #fbfdfd; }
.afs-consent-points article > span { font-size: 1.35rem; }
.afs-consent-points p { margin: .1rem 0 0; }
.afs-consent-check { flex-direction: row !important; align-items: flex-start; gap: .7rem !important; margin: 1rem 0; }
.afs-consent-check input { flex: 0 0 auto; width: 1.3rem; min-height: 1.3rem; margin-top: .15rem; }
.afs-gps-card { text-align: center; }
.afs-gps-orbit { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 1.5rem auto; border: 2px solid #d6e8ee; border-radius: 50%; }
.afs-gps-orbit::before,
.afs-gps-orbit::after { content: ""; position: absolute; border: 2px solid #d6e8ee; border-radius: 50%; }
.afs-gps-orbit::before { inset: 18px; }
.afs-gps-orbit::after { inset: 42px; }
.afs-gps-orbit span { z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; background: var(--green, var(--afs-green)); box-shadow: 0 0 0 12px rgba(35, 135, 91, .12); font-weight: 950; }
.afs-gps-orbit i { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--afs-orange); box-shadow: 0 0 0 6px rgba(242, 118, 46, .14); animation: afs-orbit 2s linear infinite; transform-origin: 0 0; }
@keyframes afs-orbit { from { transform: rotate(0deg) translateX(65px); } to { transform: rotate(360deg) translateX(65px); } }
.afs-gps-quality { max-width: 450px; margin: 0 auto 1rem; text-align: left; }
.afs-gps-quality > div:first-child { display: flex; justify-content: space-between; }
.afs-quality-track { overflow: hidden; height: 10px; margin-top: .4rem; border-radius: 999px; background: #e6eef1; }
.afs-quality-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--afs-red), var(--afs-yellow), var(--afs-green)); transition: width .25s ease; }
.afs-gps-quality p { margin: .4rem 0 0; }

.afs-play-area { position: relative; }
.afs-game-topline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; margin-bottom: .8rem; }
.afs-progress { padding: .78rem .9rem; border: 1px solid var(--afs-border); border-radius: 16px; background: #fff; box-shadow: var(--afs-shadow-sm); }
.afs-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .45rem; font-size: .88rem; }
.afs-progress-copy > span { font-weight: 900; }
.afs-progress-copy > strong { color: var(--afs-muted); }
.afs-progress > div:last-child { overflow: hidden; height: 10px; border-radius: 999px; background: #e5edef; }
.afs-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--afs-orange), var(--afs-yellow)); transition: width .35s ease; }
.afs-gps-chip { display: flex; align-items: center; gap: .55rem; min-width: 112px; padding: .68rem .8rem; border: 1px solid #d6e8dd; border-radius: 16px; background: #eff9f3; }
.afs-gps-chip > span { font-size: 1.4rem; }
.afs-gps-chip small,
.afs-gps-chip strong { display: block; line-height: 1.1; }
.afs-gps-chip small { color: var(--afs-muted); font-size: .7rem; }
.afs-gps-chip.is-warning { border-color: #eedda7; background: #fff9e7; }
.afs-gps-chip.is-error { border-color: #efd1d2; background: #fff4f4; }
.afs-game-stage { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .72fr); gap: .9rem; align-items: stretch; }
.afs-map-wrap { position: relative; min-width: 0; }
.afs-map { position: relative; width: 100%; min-height: 520px; overflow: hidden; border: 1px solid var(--afs-border); border-radius: 20px; background: #dfeaec; z-index: 0; }
.afs-game-map-wrap .afs-map { min-height: 610px; }
.afs-map-disabled { background: repeating-linear-gradient(45deg, #eaf1f3, #eaf1f3 12px, #dfe9ec 12px, #dfe9ec 24px); }
.afs-map-disabled-note,
.afs-map-message { position: absolute; z-index: 500; left: .8rem; right: .8rem; bottom: .8rem; padding: .75rem .9rem; border: 1px solid rgba(215, 227, 232, .95); border-radius: 13px; background: rgba(255, 255, 255, .95); box-shadow: var(--afs-shadow-sm); font-weight: 800; backdrop-filter: blur(10px); }
.afs-map-message:empty { display: none; }
.afs-map-controls { position: absolute; z-index: 500; right: .8rem; top: .8rem; }
.afs-map-button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--afs-border); border-radius: 15px; color: var(--afs-ink); background: rgba(255, 255, 255, .96); box-shadow: var(--afs-shadow-sm); font-size: 1.5rem; cursor: pointer; }
.afs-clue-sheet { display: flex; flex-direction: column; min-width: 0; padding: 1.15rem; border: 1px solid var(--afs-border); border-radius: 20px; background: #fff; box-shadow: var(--afs-shadow-sm); }
.afs-sheet-handle { display: none; width: 44px; height: 5px; margin: 0 auto .75rem; border-radius: 999px; background: #d6e1e5; }
.afs-clue-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.afs-station-badge { display: inline-flex; align-items: center; min-height: 28px; padding: .25rem .58rem; border-radius: 999px; color: var(--afs-orange-dark); background: #fff0df; font-size: .75rem; font-weight: 950; }
.afs-clue-heading h2 { margin-top: .45rem; }
.afs-direction { display: flex; flex-direction: column; align-items: center; flex: 0 0 72px; color: var(--afs-blue-dark); font-size: .72rem; font-weight: 850; text-align: center; }
.afs-direction i { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: .25rem; border-radius: 50%; background: #e9f4fa; font-size: 1.7rem; font-style: normal; transition: transform .3s ease; }
.afs-clue { flex: 1 1 auto; padding: .55rem 0; font-size: 1.04rem; }
.afs-clue > :first-child { margin-top: 0; }
.afs-clue > :last-child { margin-bottom: 0; }
.afs-distance-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; align-items: center; margin: .8rem 0; padding: .85rem; border-radius: 17px; background: linear-gradient(135deg, #eaf7fb, #f3faf7); }
.afs-distance-ring { display: grid; grid-template-columns: auto auto; place-items: baseline center; min-width: 82px; min-height: 82px; padding: .65rem; border: 8px solid rgba(34, 125, 179, .15); border-radius: 50%; background: #fff; }
.afs-distance-ring strong { font-size: 1.65rem; line-height: 1; }
.afs-distance-ring span { color: var(--afs-muted); font-size: .72rem; }
.afs-distance { display: block; margin-top: .12rem; color: var(--afs-blue-dark); font-size: 1.03rem; }
.afs-distance-card small { display: block; min-height: 1.2em; color: var(--afs-muted); }
.afs-answer-form { display: grid; gap: .55rem; }
.afs-button-complete { width: 100%; margin-top: .3rem; }
.afs-game-options { margin-top: auto; padding-top: .65rem; color: var(--afs-muted); font-size: .9rem; }
.afs-game-options summary { cursor: pointer; font-weight: 800; }
.afs-success-overlay { position: absolute; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(24, 50, 71, .62); backdrop-filter: blur(8px); }
.afs-success-card { width: min(520px, 100%); padding: clamp(1.5rem, 5vw, 3rem); border-radius: 28px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .22); text-align: center; }
.afs-success-burst { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 1rem; border-radius: 50%; color: #fff; background: var(--afs-green); box-shadow: 0 0 0 14px rgba(35, 135, 91, .12); font-size: 2.4rem; font-weight: 950; }
.afs-finished { max-width: 680px; margin: 2rem auto; padding: clamp(1.7rem, 5vw, 3.5rem); border-radius: 28px; background: #fff; box-shadow: var(--afs-shadow); text-align: center; }
.afs-treasure-icon { display: grid; place-items: center; width: 110px; height: 110px; margin: 0 auto 1.1rem; border-radius: 50%; color: var(--afs-orange-dark); background: var(--afs-yellow); box-shadow: 0 0 0 18px rgba(255, 215, 93, .18); font-size: 4rem; }

/* Planner */
.afs-planner { width: min(1380px, 100%); margin: 0 auto; }
.afs-hunt-switcher { min-width: 280px; }
.afs-planner-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-bottom: 1rem; }
.afs-planner-stepper button { display: flex; align-items: center; gap: .75rem; min-height: 70px; padding: .75rem .9rem; border: 1px solid var(--afs-border); border-radius: 17px; color: var(--afs-ink); background: #fff; box-shadow: var(--afs-shadow-sm); cursor: pointer; text-align: left; }
.afs-planner-stepper button > span { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: #edf4f6; font-weight: 950; }
.afs-planner-stepper strong,
.afs-planner-stepper small { display: block; }
.afs-planner-stepper small { color: var(--afs-muted); }
.afs-planner-stepper button.is-active { border-color: #f1b286; box-shadow: 0 0 0 3px rgba(242, 118, 46, .1); }
.afs-planner-stepper button.is-active > span { color: #fff; background: var(--afs-orange); }
.afs-planner-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.afs-form-panel,
.afs-location-panel { display: flex; flex-direction: column; gap: .85rem; }
.afs-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; }
.afs-search-results { display: grid; gap: .45rem; }
.afs-search-result { appearance: none; width: 100%; padding: .75rem .8rem; border: 1px solid var(--afs-border); border-radius: 12px; color: var(--afs-ink); background: #fff; cursor: pointer; text-align: left; }
.afs-search-result:hover { border-color: var(--afs-blue); background: #f4fafc; }
.afs-search-result strong,
.afs-search-result span { display: block; }
.afs-search-result span { color: var(--afs-muted); font-size: .82rem; }
.afs-step-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding: 1rem 0; }
.afs-route-workspace { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr); gap: 1rem; align-items: start; }
.afs-route-map-column,
.afs-station-column { min-width: 0; padding: .8rem; border: 1px solid var(--afs-border); border-radius: var(--afs-radius); background: #fff; box-shadow: var(--afs-shadow-sm); }
.afs-route-map-column { position: sticky; top: 1rem; }
.afs-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 54px; padding: .2rem .2rem .7rem; }
.afs-map-toolbar strong,
.afs-map-toolbar span { display: block; }
.afs-map-toolbar span { color: var(--afs-muted); font-size: .84rem; }
.afs-planner-map { min-height: 650px; }
.afs-route-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .7rem; }
.afs-route-summary > div { padding: .7rem; border-radius: 13px; background: #f3f8fa; }
.afs-route-summary span,
.afs-route-summary strong { display: block; }
.afs-route-summary span { color: var(--afs-muted); font-size: .74rem; }
.afs-station-column-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.afs-stations { display: grid; gap: .75rem; }
.afs-station { overflow: hidden; border: 2px solid var(--afs-border); border-radius: 18px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.afs-station.is-active { border-color: var(--afs-orange); box-shadow: 0 0 0 4px rgba(242, 118, 46, .1); }
.afs-station.is-treasure { border-color: #edc95c; background: #fffdf4; }
.afs-station-header { display: flex; align-items: center; gap: .7rem; padding: .75rem .8rem; background: #f7fafb; }
.afs-station.is-treasure .afs-station-header { background: #fff8da; }
.afs-station-number { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: var(--afs-blue); font-weight: 950; }
.afs-station.is-treasure .afs-station-number { color: var(--afs-orange-dark); background: var(--afs-yellow); }
.afs-station-title-summary { flex: 1 1 auto; min-width: 0; }
.afs-station-title-summary strong,
.afs-station-title-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afs-station-title-summary span { color: var(--afs-muted); font-size: .78rem; }
.afs-station-actions { display: flex; gap: .28rem; }
.afs-icon-button { appearance: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--afs-border); border-radius: 10px; color: var(--afs-ink); background: #fff; cursor: pointer; }
.afs-station-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .72rem; padding: .85rem; }
.afs-station-body .afs-wide { grid-column: 1 / -1; }
.afs-field-help { color: var(--afs-muted); font-size: .78rem; font-weight: 600; }
.afs-coordinate-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.afs-inline-check { flex-direction: row !important; align-items: flex-start; gap: .55rem !important; }
.afs-inline-check input { flex: 0 0 auto; width: 1.2rem; min-height: 1.2rem; margin-top: .15rem; }
.afs-station-warning { margin: 0 .85rem .85rem; padding: .7rem; border-radius: 12px; color: #845c00; background: #fff6d8; font-size: .84rem; font-weight: 750; }
.afs-review-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .7fr); gap: 1rem; }
.afs-review-list { display: grid; gap: .55rem; }
.afs-review-item { display: flex; justify-content: space-between; gap: .8rem; padding: .75rem; border-radius: 13px; background: #f4f8f9; }
.afs-review-item span { color: var(--afs-muted); }
.afs-publish-toggle { flex-direction: row !important; align-items: flex-start; gap: .8rem !important; margin-top: 1rem; padding: 1rem; border: 2px solid #cde6d8; border-radius: 16px; background: #f0faf4; }
.afs-publish-toggle input { flex: 0 0 auto; width: 1.35rem; min-height: 1.35rem; margin-top: .18rem; }
.afs-publish-toggle strong,
.afs-publish-toggle small { display: block; }
.afs-publish-toggle small { color: var(--afs-muted); }
.afs-safety-check ul { display: grid; gap: .55rem; padding-left: 1.25rem; }
.afs-after-save { margin-top: 1rem; padding: 1rem; border: 1px solid #cde6d8; border-radius: 16px; background: #f0faf4; }
.afs-after-save p { margin: .2rem 0 .75rem; }

/* Moderator */
.afs-moderator-app { width: min(1380px, 100%); margin: 0 auto; }
.afs-moderator-actions { display: flex; gap: .65rem; align-items: flex-end; }
.afs-moderator-actions label { min-width: 250px; }
.afs-live-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.afs-live-kpis article { padding: 1rem; border: 1px solid var(--afs-border); border-radius: 17px; background: #fff; box-shadow: var(--afs-shadow-sm); }
.afs-live-kpis span,
.afs-live-kpis strong { display: block; }
.afs-live-kpis span { color: var(--afs-muted); font-size: .82rem; font-weight: 750; }
.afs-live-kpis strong { margin-top: .15rem; font-size: 2rem; }
.afs-team-create-panel { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1rem 0; padding: 1.1rem; border: 1px solid var(--afs-border); border-radius: 18px; background: #fff; box-shadow: var(--afs-shadow-sm); }
.afs-team-create-panel h2 { margin-bottom: 0; font-size: 1.35rem; }
.afs-team-create-frontend { display: grid; grid-template-columns: minmax(230px, 1fr) auto; gap: .6rem; align-items: end; min-width: min(560px, 100%); }
.afs-code-result { margin: 1rem 0; padding: 1rem; border: 1px solid #cde6d8; border-left: 6px solid var(--afs-green); border-radius: 15px; background: #f0faf4; }
.afs-code-result code { display: inline-block; margin: .25rem .45rem; padding: .45rem .65rem; border-radius: 10px; background: #fff; font-size: 1.3rem; font-weight: 950; letter-spacing: .08em; }
.afs-live-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .72fr); gap: .9rem; }
.afs-live-map-panel,
.afs-team-panel { min-width: 0; padding: .8rem; border: 1px solid var(--afs-border); border-radius: var(--afs-radius); background: #fff; box-shadow: var(--afs-shadow-sm); }
.afs-team-panel-header { display: flex; align-items: center; justify-content: space-between; min-height: 54px; }
.afs-team-panel-header h2 { margin: 0; font-size: 1.3rem; }
.afs-team-panel-header span { color: var(--afs-muted); font-size: .78rem; }
.afs-team-list { display: grid; gap: .65rem; max-height: 670px; overflow: auto; padding-right: .2rem; }
.afs-live-team { padding: .9rem; border: 1px solid var(--afs-border); border-radius: 16px; background: #fbfdfd; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.afs-live-team:hover { border-color: #a9cbd8; transform: translateY(-1px); }
.afs-live-team.is-stale { border-color: #ead7aa; background: #fffbef; }
.afs-live-team.is-finished { border-color: #cde6d8; background: #f3fbf6; }
.afs-team-card-top { display: flex; justify-content: space-between; gap: .7rem; }
.afs-team-card-top h3 { margin: 0; }
.afs-team-status { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .48rem; border-radius: 999px; color: var(--afs-muted); background: #edf3f5; font-size: .7rem; font-weight: 900; }
.afs-team-status.is-live { color: var(--afs-green-dark); background: #e7f6ed; }
.afs-team-progress { overflow: hidden; height: 8px; margin: .65rem 0 .3rem; border-radius: 999px; background: #e4ecef; }
.afs-team-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--afs-blue), var(--afs-green)); }
.afs-team-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .7rem; margin: .55rem 0; color: var(--afs-muted); font-size: .8rem; }
.afs-team-meta strong { color: var(--afs-ink); }
.afs-row-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.afs-row-actions .afs-button { min-height: 38px; padding: .55rem .72rem; font-size: .78rem; }
.afs-empty { padding: 1rem; border-radius: 14px; background: #f2f7f8; color: var(--afs-muted); text-align: center; }
.afs-safety-compact { margin-bottom: 0; }

/* Help/legal/map markers */
.afs-help,
.afs-legal-text { width: min(1050px, 100%); margin: 0 auto; }
.afs-help-steps { display: grid; gap: .75rem; }
.afs-help-steps article { display: flex; gap: 1rem; padding: 1.1rem; border: 1px solid var(--afs-border); border-radius: 18px; background: #fff; box-shadow: var(--afs-shadow-sm); }
.afs-help-steps article > span { display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px; border-radius: 15px; color: #fff; background: var(--afs-blue); font-size: 1.25rem; font-weight: 950; }
.afs-help-steps h2 { margin-top: 0; }
.afs-help-steps p { margin-bottom: 0; }
.afs-map-icon-wrap { border: 0 !important; background: none !important; }
.afs-map-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 4px solid #fff; border-radius: 50%; color: #fff; background: var(--afs-blue); box-shadow: 0 5px 14px rgba(24, 50, 71, .34); font-size: .75rem; font-weight: 950; }
.afs-map-icon-treasure { color: var(--afs-orange-dark); background: var(--afs-yellow); font-size: 1.15rem; }
.afs-map-icon-team { background: var(--afs-green); }
.afs-map-icon-user { background: var(--afs-blue-dark); }
.leaflet-control-attribution { font-size: 10px !important; }

@media (max-width: 1100px) {
  .afs-hero-premium,
  .afs-showcase,
  .afs-route-workspace,
  .afs-live-layout { grid-template-columns: 1fr; }
  .afs-adventure-visual { min-height: 360px; }
  .afs-route-map-column { position: relative; top: auto; }
  .afs-planner-map { min-height: 520px; }
  .afs-team-create-panel { align-items: stretch; flex-direction: column; }
  .afs-team-create-frontend { min-width: 0; width: 100%; }
}

@media (max-width: 900px) {
  .afs-site-nav { align-items: stretch; flex-direction: column; border-radius: 18px; }
  .afs-nav-brand { justify-content: center; }
  .afs-nav-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .afs-nav-links a { justify-content: center; }
  .afs-nav-links a > span { display: inline; }
  .afs-role-grid,
  .afs-planner-columns,
  .afs-review-grid,
  .afs-game-stage { grid-template-columns: 1fr; }
  .afs-game-map-wrap .afs-map { min-height: 58vh; }
  .afs-clue-sheet { margin-top: -.5rem; border-radius: 22px 22px 18px 18px; }
  .afs-sheet-handle { display: block; }
  .afs-workspace-header { align-items: stretch; flex-direction: column; }
  .afs-hunt-switcher,
  .afs-moderator-actions label { min-width: 0; width: 100%; }
  .afs-moderator-actions { width: 100%; }
  .afs-live-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .afs-site { font-size: 15px; }
  .afs-site-nav { width: 100%; margin-top: 0; }
  .afs-nav-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem; }
  .afs-nav-links a { flex-direction: column; gap: .1rem; padding: .4rem .2rem; font-size: .72rem; }
  .afs-hero-premium { padding: 1.25rem; border-radius: 22px; }
  .afs-hero-premium h1 { font-size: 2.25rem; }
  .afs-adventure-visual { min-height: 290px; }
  .afs-visual-card { right: .4rem; min-width: 150px; }
  .afs-role-grid { grid-template-columns: 1fr; }
  .afs-role-card { min-height: 0; padding: 1.1rem; }
  .afs-role-icon { flex-basis: 52px; width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem; }
  .afs-showcase { padding: 1.2rem; border-radius: 22px; }
  .afs-safety-banner { align-items: flex-start; flex-wrap: wrap; }
  .afs-safety-banner > a { margin-left: 64px; }
  .afs-game-shell { min-height: 620px; padding: .55rem; border-radius: 20px; }
  .afs-game-header { align-items: flex-start; padding: .45rem .25rem .7rem; }
  .afs-game-logo { width: 42px; height: 42px; }
  .afs-live-pills { max-width: 46%; }
  .afs-onboarding-card { margin: .5rem auto; padding: 1.2rem; border-radius: 20px; }
  .afs-code-input-row,
  .afs-search-row,
  .afs-team-create-frontend { grid-template-columns: 1fr; }
  .afs-game-topline { grid-template-columns: 1fr auto; }
  .afs-game-stage { display: block; }
  .afs-game-map-wrap .afs-map { min-height: 56vh; border-radius: 17px; }
  .afs-clue-sheet { position: relative; z-index: 10; margin: -1rem .35rem 0; padding: 1rem; box-shadow: 0 -10px 30px rgba(24, 50, 71, .12); }
  .afs-distance-card { grid-template-columns: auto 1fr; }
  .afs-distance-ring { min-width: 72px; min-height: 72px; border-width: 6px; }
  .afs-planner-stepper { grid-template-columns: 1fr; }
  .afs-planner-stepper button { min-height: 58px; }
  .afs-route-map-column,
  .afs-station-column { padding: .55rem; border-radius: 17px; }
  .afs-planner-map { min-height: 58vh; }
  .afs-route-summary { grid-template-columns: 1fr; }
  .afs-station-column-header { align-items: stretch; flex-direction: column; }
  .afs-station-column-header .afs-button-row { display: grid; grid-template-columns: 1fr 1fr; }
  .afs-station-body { grid-template-columns: 1fr; }
  .afs-station-body .afs-wide { grid-column: auto; }
  .afs-coordinate-row { grid-template-columns: 1fr; }
  .afs-step-actions { align-items: stretch; flex-direction: column-reverse; }
  .afs-step-actions .afs-button { width: 100%; }
  .afs-moderator-actions { align-items: stretch; flex-direction: column; }
  .afs-live-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afs-live-kpis strong { font-size: 1.55rem; }
  .afs-team-meta { grid-template-columns: 1fr; }
  .afs-button { width: 100%; }
  .afs-row-actions .afs-button,
  .afs-code-result .afs-button { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .afs-site *,
  .afs-site *::before,
  .afs-site *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* 1.1 interaction refinements */
.afs-input-suffix { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; overflow: hidden; border: 2px solid var(--afs-border); border-radius: 13px; background: #fff; }
.afs-input-suffix:focus-within { border-color: var(--afs-blue); outline: 3px solid rgba(34, 125, 179, .16); }
.afs-input-suffix input { min-width: 0; border: 0 !important; border-radius: 0; box-shadow: none; }
.afs-input-suffix > span { padding: 0 .8rem; color: var(--afs-muted); font-weight: 900; }
.afs-hunt-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.afs-hunt-preview > div { padding: .8rem; border-radius: 14px; background: #f4f8f9; }
.afs-hunt-preview strong { display: block; margin-top: .18rem; }
.afs-hunt-preview .afs-hunt-description { grid-column: 1 / -1; color: var(--afs-muted); }
.afs-gps-chip.is-good { border-color: #b9dfc9; background: #eff9f3; }
.afs-icon-button:disabled { opacity: .35; cursor: not-allowed; }
.afs-icon-button:hover:not(:disabled) { border-color: var(--afs-blue); background: #edf7fb; }
.afs-code-result { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.afs-code-result > div { min-width: 0; }
.afs-code-result code { overflow-wrap: anywhere; }
.afs-code-result p { margin: .25rem 0 0; }
.afs-planner-stepper button.is-done > span { color: #fff; background: var(--afs-green); }
.afs-map.has-tile-error::after { content: "Kartenausschnitt konnte nicht vollständig geladen werden."; position: absolute; z-index: 900; left: .8rem; right: .8rem; top: .8rem; padding: .7rem .85rem; border-radius: 12px; color: #7c5200; background: rgba(255, 248, 220, .96); box-shadow: var(--afs-shadow-sm); font-weight: 850; }
@media (max-width: 620px) {
  .afs-hunt-preview { grid-template-columns: 1fr; }
  .afs-hunt-preview .afs-hunt-description { grid-column: auto; }
  .afs-code-result { align-items: stretch; flex-direction: column; }
}