:root { --ink:#142b29; --muted:#6b7f7b; --paper:#ffffff; --card:#fffdfa; --line:#dfe4db; --lime:#d7ec6d; --orange:#ef784d; --map:#dbe9dc; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; } [hidden] { display:none !important; }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:24px; }.auth-card { width:min(390px,100%); display:grid; gap:12px; padding:32px; border:1px solid var(--line); border-radius:12px; background:var(--card); }.auth-card h1 { margin:0 0 12px; font-size:27px; letter-spacing:-1px; }.auth-card label { font-weight:700; font-size:14px; }.auth-card input { width:100%; min-height:43px; padding:9px 11px; border:1px solid #b8c6bd; border-radius:6px; background:#fff; font:inherit; color:var(--ink); }.auth-card button { min-height:43px; border:1px solid var(--ink); border-radius:6px; background:var(--ink); color:#fff; font:700 14px Manrope,Arial,sans-serif; cursor:pointer; }.auth-card button:first-of-type { margin-top:10px; background:#fff; color:var(--ink); }.auth-status { min-height:20px; margin:3px 0 0; color:var(--muted); font-size:13px; line-height:1.45; }.auth-status.error { color:#b13a27; }
.page-shell { width:min(1120px,calc(100% - 40px)); margin:auto; }.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.brand { display:flex; gap:11px; align-items:center; text-decoration:none; color:var(--ink); font:500 10px/1.1 "DM Mono",monospace; letter-spacing:1.2px; }.brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:var(--ink); color:var(--lime); font:700 17px/1 Manrope; }.nav-actions { display:flex; gap:12px; align-items:center; }.icon-button,.avatar { border:0; background:transparent; color:var(--ink); cursor:pointer; }.icon-button { font-size:25px; }.avatar { display:grid; place-items:center; border-radius:50%; background:var(--orange); color:#fff; font-weight:800; }.avatar.small { width:35px; height:35px; }.avatar.large { width:76px; height:76px; font-size:25px; box-shadow:7px 7px 0 var(--lime); }
.hero { position:relative; min-height:335px; padding:76px 6.5% 52px; overflow:hidden; }.profile { display:flex; align-items:center; gap:22px; }.eyebrow { margin:0 0 8px; color:var(--muted); font:500 10px/1.1 "DM Mono",monospace; letter-spacing:1.4px; }.hero h1,.section-heading h2,.start-card h2,dialog h2 { margin:0; font-size:clamp(28px,4vw,42px); letter-spacing:-1.8px; }.identity { margin:6px 0 0; color:var(--muted); font-size:13px; }.identity span { padding:0 7px; color:var(--orange); }.hero-copy { position:relative; z-index:1; margin:44px 0 0; font-size:20px; line-height:1.5; letter-spacing:-.6px; }.hero-copy strong { font-weight:800; }.sun-orbit { position:absolute; right:-90px; top:37px; width:286px; height:286px; border:1px solid var(--line); border-radius:50%; }.sun { position:absolute; left:46px; top:40px; color:var(--orange); font-size:45px; }
.section-card,.start-card { border:1px solid var(--line); border-radius:12px; background:var(--card); }.journey { padding:34px 40px; }.section-heading { display:flex; justify-content:space-between; align-items:start; }.section-heading h2,.start-card h2 { font-size:26px; letter-spacing:-1.1px; }.journey-content { display:flex; gap:22px; align-items:center; margin-top:31px; padding-top:28px; border-top:1px solid var(--line); }.compass { display:grid; place-items:center; width:59px; height:59px; border-radius:50%; background:var(--lime); font-size:24px; }.journey h3,.empty-content h3 { margin:0 0 5px; font-size:16px; }.journey p,.empty-content p,.start-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }.start-card { display:flex; align-items:center; justify-content:space-between; gap:25px; margin:20px 0; padding:37px 40px; background:var(--ink); color:#fff; }.start-card .eyebrow { color:var(--lime); }.start-card p { margin-top:9px; color:#bfd0c8; }.add-button { border:0; border-radius:99px; background:var(--lime); color:var(--ink); padding:14px 20px; font-family:inherit; font-weight:800; white-space:nowrap; cursor:pointer; }.add-button:hover { transform:translateY(-2px); box-shadow:0 5px 0 #a9c44b; }.add-button span { font-size:19px; vertical-align:-1px; margin-right:4px; }
.map-section { overflow:hidden; margin:20px 0 26px; padding:34px 40px 0; }.map-count { font:500 10px "DM Mono",monospace; color:var(--muted); padding-top:8px; }.map-visual { position:relative; height:275px; margin:27px -40px 0; background:#edf3eb; overflow:hidden; }.map-grid { position:absolute; inset:0; background-image:linear-gradient(#d7e5d7 1px,transparent 1px),linear-gradient(90deg,#d7e5d7 1px,transparent 1px); background-size:31px 31px; opacity:.65; }.continent { position:absolute; background:var(--map); border:1px solid #c5d8c5; filter:drop-shadow(2px 3px 0 rgba(55,105,74,.08)); }.continent-one { left:11%; top:18%; width:226px; height:95px; border-radius:58% 42% 48% 32%; transform:rotate(-14deg); }.continent-two { left:31%; top:53%; width:94px; height:132px; border-radius:39% 56% 61% 41%; transform:rotate(21deg); }.continent-three { right:21%; top:18%; width:232px; height:117px; border-radius:45% 60% 45% 38%; transform:rotate(9deg); }.continent-four { right:12%; bottom:-15px; width:130px; height:91px; border-radius:50% 46% 38% 52%; transform:rotate(16deg); }.map-message { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-size:12px; color:var(--muted); }.map-message strong { color:var(--ink); font-size:16px; margin:6px 0; }.pin { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--orange); color:#fff; font-size:20px; }.two-up { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.empty-card { min-height:224px; padding:34px 40px; }.empty-content { padding-top:35px; text-align:center; }.line-icon { display:inline-grid; place-items:center; width:35px; height:35px; margin-bottom:9px; border:1px solid var(--line); border-radius:50%; color:var(--orange); font-size:20px; } footer { padding:44px 0 32px; color:var(--muted); font:500 10px "DM Mono",monospace; letter-spacing:1.2px; text-align:center; } footer span { padding:0 8px; color:var(--orange); }
dialog { width:min(390px,calc(100% - 36px)); padding:32px; border:0; border-radius:14px; color:var(--ink); box-shadow:0 20px 60px #102a274d; } dialog::backdrop { background:#142b2966; } dialog p:not(.eyebrow) { line-height:1.7; color:var(--muted); font-size:14px; }.close { position:absolute; right:16px; top:11px; border:0; background:none; font-size:25px; cursor:pointer; color:var(--muted); } dialog .add-button { margin-top:10px; }
@media(max-width:650px) { .page-shell { width:min(100% - 24px,1120px); }.topbar { height:69px; }.hero { padding:49px 10px 43px; min-height:320px; }.sun-orbit { right:-164px; top:62px; }.hero-copy { font-size:18px; }.journey,.empty-card { padding:28px 23px; }.start-card { align-items:flex-start; flex-direction:column; padding:30px 23px; }.map-section { padding:28px 23px 0; }.map-visual { margin-left:-23px; margin-right:-23px; }.two-up { grid-template-columns:1fr; gap:14px; }.map-message { background:#edf3ebaa; }.continent-one { left:-12%; width:180px; }.continent-three { right:-13%; width:196px; } }

/* Compact profile action row and recent activity list. */
.hero {min-height:0;padding-top:48px;padding-bottom:32px;}
.profile-action-row {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;}
.profile-action-copy {min-width:0;}
.profile-action-row .hero-copy {margin:0;font-size:16px;}
.profile-stats {display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px;}
.profile-stats>span {white-space:nowrap;}
.profile-stats>span+span::before {content:'·';margin-right:12px;color:var(--muted);}
.profile-stats b {font-size:24px;color:var(--ink);font-weight:600;margin-right:5px;}
.profile-action-row .add-button {flex-shrink:0;}
.recent-list {list-style:none;margin:0;padding:0;text-align:left;}
.recent-list li+li {border-top:1px solid var(--line);}
.recent-row {display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,2fr) auto;align-items:center;gap:24px;padding:18px 0;color:var(--ink);text-decoration:none;font-size:13px;}
a.recent-row:hover {background:#f7f9f7;}
.recent-row strong {font-weight:600;}
.recent-place {overflow-wrap:anywhere;}
.recent-row time {color:var(--muted);white-space:nowrap;}
.empty-content.has-records {padding-top:16px;}
@media(max-width:650px){.hero{padding:32px 10px 24px;}.profile-action-row{gap:16px;flex-wrap:wrap;}.profile-stats b{font-size:20px;}.profile-action-row .add-button{margin-left:auto;}.recent-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;}.recent-place{grid-column:1;grid-row:2;}.recent-row time{grid-column:2;grid-row:1 / 3;font-size:11px;}}
/* Sport selection: one full-width row per sport, six visible rows at most. */
html:has(#adventureDialog[open]) {overflow:hidden;scrollbar-gutter:stable;}
#adventureDialog {width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:24px;border:1px solid #e5e9e5;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 20px 60px #102a2726;}
#adventureDialog[open] {display:flex;flex-direction:column;animation:sport-dialog-in .18s ease-out;}
#adventureDialog::backdrop {background:rgba(0,0,0,.28);}
.sport-dialog-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;margin-bottom:16px;}
#adventureDialog h2 {font:600 22px/1.3 Manrope,Arial,sans-serif;letter-spacing:-.5px;}
.sport-dialog-heading form {margin:0;}
.sport-dialog-close {display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#6b7f7b;cursor:pointer;}
.sport-dialog-close:hover {background:#f1f4f0;color:#142b29;}
.sport-choice-list {list-style:none;margin:0;padding:2px;min-height:0;max-height:340px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.sport-choice-list li+li {border-top:1px solid #edf0ed;}
.sport-choice {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 14px;border-radius:11px;color:#142b29;text-decoration:none;font:500 14px/1.5 Manrope,Arial,sans-serif;transition:background .16s ease;}
.sport-choice:hover {background:#f1f4f0;}
.sport-choice:active {background:#e7ede5;}
.sport-choice-arrow {flex-shrink:0;color:#6b7f7b;transition:transform .16s ease;}
.sport-choice:hover .sport-choice-arrow {transform:translateX(3px);}
.sport-choice:focus-visible,.sport-dialog-close:focus-visible {outline:2px solid #799486;outline-offset:-2px;}
@keyframes sport-dialog-in {from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){#adventureDialog[open]{animation:none;}.sport-choice,.sport-choice-arrow{transition:none;}.sport-choice:hover .sport-choice-arrow{transform:none;}}
/* Registration fields and profile details */
.auth-card select { width:100%; min-height:43px; padding:9px 11px; border:1px solid #b8c6bd; border-radius:6px; background:#fff; font:inherit; color:var(--ink); }
.auth-card #registrationFields { display:grid; gap:12px; }.auth-actions { display:grid; gap:12px; }.auth-actions button:first-child { background:#fff; color:var(--ink); }
.brand-logo { display:block; width:auto; height:42px; max-width:220px; object-fit:contain; }
@media(max-width:650px) { .brand-logo { height:34px; max-width:180px; } }
.public-id { margin:5px 0 0; color:var(--muted); font:500 13px "DM Mono",monospace; letter-spacing:.3px; }
.profile-details { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; padding:0; color:var(--muted); font-size:12px; }
.profile-details span { padding:8px 11px; border:1px solid var(--line); border-radius:99px; background:var(--card); }
.activity-choice { display:inline-block; text-decoration:none; }

/* Profile photo and identity block */
.profile-overview { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:42px; align-items:center; }
.profile-overview .profile,.profile-copy { min-width:0; }
.profile-copy { overflow-wrap:anywhere; }
.sport-counts { min-width:0; }
.sport-counts h2 { margin:0 0 16px; font-size:14px; font-weight:600; }
.sport-counts>p { margin:0; color:var(--muted); font-size:12px; }
.sport-counts-list { display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:38px; gap:10px 22px; max-height:182px; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:#bdc8bf transparent; padding:0 6px 0 0; }
.sport-counts-list:empty { display:none; }
.sport-counts-list.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sport-counts-list:focus-visible { outline:2px solid #93aaa2; outline-offset:4px; border-radius:4px; }
.sport-count-row { min-width:0; }
.sport-count-label { display:flex; justify-content:space-between; gap:8px; font-size:12px; line-height:18px; margin-bottom:7px; }
.sport-count-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sport-count-number { flex-shrink:0; font-variant-numeric:tabular-nums; }
.sport-count-track { height:6px; overflow:hidden; border-radius:99px; background:#e2e7de; }
.sport-count-fill { height:100%; border-radius:inherit; transition:width .3s ease; }
@media(max-width:900px) { .profile-overview { grid-template-columns:1fr; gap:28px; } }
@media(max-width:600px) { .sport-counts-list.two-columns { grid-template-columns:minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) { .sport-count-fill { transition:none; } }
.profile { gap:25px; }
.profile-avatar { position:relative; flex:0 0 116px; width:116px; height:116px; }
.profile-avatar .avatar.large { position:absolute; inset:0; width:116px; height:116px; font-size:35px; box-shadow:none; }
.avatar-image { position:absolute; inset:0; width:116px; height:116px; border-radius:50%; object-fit:cover; background:var(--orange); box-shadow:none; }
.avatar-upload { position:absolute; z-index:2; right:-3px; bottom:-3px; display:grid; width:26px; height:26px; place-items:center; border:1px solid #d7ddd6; border-radius:50%; background:#fff; color:#313936; cursor:pointer; box-shadow:0 2px 7px rgba(20,43,41,.14); }
.avatar-upload:hover { background:#f2f4ef; color:var(--ink); }
.avatar-upload:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.avatar-upload svg { display:none; }
.avatar-upload::before,.avatar-upload::after { position:absolute; width:10px; height:1.5px; border-radius:2px; background:currentColor; content:""; }
.avatar-upload::after { transform:rotate(90deg); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.profile-name-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; }
.profile-name-line .public-id { margin:0; color:var(--muted); font:500 12px "DM Mono",monospace; letter-spacing:.3px; }
.profile-meta { display:flex; flex-wrap:wrap; gap:7px; margin:7px 0 0; color:var(--muted); font-size:13px; }
.profile-meta span:nth-child(2) { color:var(--orange); }
.avatar-upload-status { min-height:16px; margin:8px 0 0; color:var(--muted); font-size:12px; }
.avatar-upload-status.error { color:#b13a27; }
@media(max-width:650px) { .profile { align-items:flex-start; gap:18px; }.profile-avatar { flex-basis:94px; width:94px; height:94px; }.profile-avatar .avatar.large,.avatar-image { width:94px; height:94px; }.profile-avatar .avatar.large { font-size:30px; box-shadow:none; }.avatar-image { box-shadow:none; }.avatar-upload { right:-3px; bottom:-3px; width:24px; height:24px; }.avatar-upload::before,.avatar-upload::after { width:9px; }.profile-name-line { gap:6px; }.profile-meta { font-size:12px; } }