/* v=global_mobile_product_redesign_20260807: social sports app visual system */
:root {
  --bg: #f5f8f3;
  --card: #ffffff;
  --ink: #13231c;
  --muted: #718078;
  --line: #e1e9e2;
  --green: #147354;
  --green-2: #29a66d;
  --mint: #e3f6e9;
  --lime: #d7f36d;
  --blue: #5b70e9;
  --shadow-soft: 0 12px 30px rgba(20, 42, 31, .07);
  --shadow-float: 0 22px 55px rgba(20, 42, 31, .14);
}

html { background: #dce7df; }
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(215,243,109,.22), transparent 28%),
    radial-gradient(circle at 92% 14%, rgba(112,211,165,.18), transparent 26%),
    #eaf0ea;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0 45%, rgba(255,255,255,.16) 45.2% 45.5%, transparent 45.7%); opacity: .55; }
.app-shell, .app, .other-page, .mine-page {
  background: linear-gradient(180deg, #f8fbf7 0%, var(--bg) 70%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 70px rgba(27,56,40,.08);
}

/* Shared shell and navigation */
.hero, .circle-simple-hero, .other-hero, .mine-page-hero {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 34px 34px;
  box-shadow: 0 18px 38px rgba(12, 62, 45, .18);
}
.hero::before, .circle-simple-hero::before, .other-hero::before, .mine-page-hero::before {
  content: ""; position: absolute; width: 210px; height: 210px; right: -74px; top: -98px; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.06), 0 0 0 38px rgba(255,255,255,.045);
}
.hero::after, .circle-simple-hero::after, .other-hero::after, .mine-page-hero::after {
  content: ""; position: absolute; right: 28px; bottom: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 18px -8px 0 rgba(255,255,255,.65), 32px 5px 0 rgba(255,255,255,.3);
}
.hero > *, .circle-simple-hero > *, .other-hero > *, .mine-page-hero > * { position: relative; z-index: 1; }
.hero { padding: 20px 18px 25px; background: linear-gradient(145deg, #0b392b 0%, #126448 54%, #58b77b 100%); }
.hero h1 { font-size: 31px; letter-spacing: -.055em; }
.hero-top { gap: 13px; }
.hero-subtitle { color: rgba(255,255,255,.8); letter-spacing: .01em; }
.location-button { width: 48px; height: 48px; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); }
.location-icon { width: 25px; height: 25px; }
.avatar { width: 42px; height: 42px; box-shadow: 0 8px 18px rgba(7,48,34,.18); }
.hero-top .auth-entry-button { height: 36px; padding-inline: 13px; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.14); }
.bottom-nav {
  height: auto;
  min-height: 76px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(218,229,221,.9);
  background: rgba(252,254,251,.88);
  box-shadow: 0 -12px 30px rgba(17,39,27,.08);
  backdrop-filter: blur(22px);
}
.bottom-nav button { color: #8a978f; font-size: 11px; font-weight: 800; transition: color .18s ease, transform .18s ease; }
.bottom-nav button.active { color: var(--green); }
.bottom-nav button:active { transform: translateY(1px); }
.bottom-nav .nav-icon { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto 2px; background: transparent; }
.bottom-nav .nav-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav .nav-publish { color: #20351e; transform: translateY(-1px); }
.bottom-nav .nav-publish .nav-icon { width: 48px; height: 48px; margin: -18px auto 2px; border: 5px solid rgba(255,255,255,.9); border-radius: 17px; background: linear-gradient(145deg, var(--lime), #a8df54); box-shadow: 0 11px 22px rgba(120,170,55,.3); }
.bottom-nav .nav-publish .nav-icon svg { width: 24px; height: 24px; stroke: #24401b; stroke-width: 2.2; }

/* Home: discovery first, then the calendar and agenda */
.ai-review-entry { margin-top: 14px; }
.ai-review-card { border: 1px solid #e0ebe2; border-radius: 22px; background: linear-gradient(135deg, #fff 0%, #eff9e9 100%); box-shadow: var(--shadow-soft); }
.ai-review-icon { border-radius: 15px; background: #e5f4d6; }
.calendar-card { margin-top: 18px; padding: 17px; border: 1px solid rgba(222,234,224,.95); border-radius: 30px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-float); }
.calendar-card .section-kicker, .agenda-section .section-kicker { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.calendar-card .section-title h2 { font-size: 22px; }
.calendar-actions button { background: #f0f7ef; border: 1px solid #e2eee2; }
.calendar-actions button#todayButton { padding-inline: 13px; background: #e5f5e7; color: var(--green); }
.weekday-row { margin-top: 16px; font-size: 10px; font-weight: 900; letter-spacing: .05em; }
.day-cell { min-height: 54px; border-radius: 17px; background: #f6faf6; border-color: #edf2ed; }
.day-cell .num { font-size: 16px; }
.day-cell.selected { background: #143d30; box-shadow: 0 10px 22px rgba(20,61,48,.24); }
.agenda-section { margin-top: 22px; }
.agenda-section .sticky-title { padding-top: 5px; background: linear-gradient(var(--bg) 78%, rgba(245,248,243,0)); }
.agenda-list { gap: 13px; }
.game-card { padding: 13px; border-radius: 26px; border: 1px solid #e1eae2; box-shadow: var(--shadow-soft); background: rgba(255,255,255,.95); transition: transform .18s ease, box-shadow .18s ease; }
.game-card:active { transform: scale(.99); box-shadow: 0 8px 20px rgba(20,42,31,.08); }
.game-time { border-radius: 19px; background: linear-gradient(160deg, #e4f7e8, #c6edd1); }
.game-header h3 { font-size: 16px; letter-spacing: -.02em; }
.status-pill { padding: 6px 8px; border-radius: 999px; font-size: 10px; }
.tags span { padding: 5px 8px; border-radius: 999px; background: #f1f6f1; }
.progress { height: 6px; border-radius: 999px; background: #edf2ee; }
.game-footer { padding-top: 8px; }
.join-button { min-height: 34px; padding-inline: 13px; border-radius: 999px; font-weight: 900; }

/* Shared cards, controls and sheets */
.section-title h2 { letter-spacing: -.045em; }
.text-button { border: 1px solid #dce9df; background: #f1f8f2; color: var(--green); font-size: 11px; }
.bottom-sheet { max-height: 90vh; padding: 11px 18px calc(24px + env(safe-area-inset-bottom)); border-radius: 32px 32px 0 0; background: rgba(255,255,255,.97); box-shadow: 0 -22px 55px rgba(12,36,25,.22); }
.sheet-handle { height: 4px; margin-bottom: 12px; background: #d7e2d8; }
.sheet-close { width: 32px; height: 32px; border: 1px solid #e0e8e1; background: #f4f8f4; color: #718078; box-shadow: none; }
.sheet-title { font-size: 22px; letter-spacing: -.045em; }
.sheet-subtitle { color: #748179; line-height: 1.45; }
.sheet-actions { gap: 8px; margin-top: 18px; }
.sheet-actions button { min-height: 45px; border-radius: 15px; }
.primary-action { background: var(--green); box-shadow: 0 8px 16px rgba(20,115,84,.18); }
.secondary-action { border: 1px solid #dfeae1; background: #f0f7f1; }
.field input, .field select, .field textarea { min-height: 44px; border-radius: 14px; background: #fbfdfb; }

/* Circle */
.circle-simple-hero, .other-hero, .mine-page-hero { min-height: 138px; padding: 18px 18px 22px; background: linear-gradient(145deg, #0b392b 0%, #126448 54%, #58b77b 100%); }
.circle-simple-hero { display: block !important; align-items: initial; }
.circle-simple-hero::before { content: ""; width: 210px; height: 210px; right: -74px; top: -98px; border: 1px solid rgba(255,255,255,.26); box-shadow: 0 0 0 18px rgba(255,255,255,.06), 0 0 0 38px rgba(255,255,255,.045); }
.circle-hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; }
.circle-hero-kicker { color: rgba(255,255,255,.66); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.circle-hero-location { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 800; }
.circle-hero-location svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.circle-simple-hero h1, .other-hero h1, .mine-page-hero h1 { font-size: 31px; letter-spacing: -.06em; }
.circle-simple-hero h1 { margin: 16px 0 3px; }
.circle-simple-hero > p { margin: 0; color: rgba(255,255,255,.8); font-size: 12px; line-height: 1.4; }
.circle-search-section { margin-top: 14px; }
.circle-search-box { min-height: 48px; border: 1px solid #e1ebe2; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-soft); }
.circle-search-box > span { width: 30px; height: 30px; border-radius: 11px; background: #eff7ef; font-size: 15px; }
.circle-search-box > span svg { width: 17px; height: 17px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.circle-section-kicker { margin: 0 0 2px; color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.partner-recommend-section, .circle-venue-section, .club-recommend-section { margin-top: 21px; }
.partner-recommend-card, .venue-showcase, .club-recommend-card { border-color: #e1eae2; box-shadow: var(--shadow-soft); }
.partner-recommend-card { border-radius: 25px; }
.venue-showcase { padding: 15px; border-radius: 28px; }
.venue-showcase-desc { font-size: 12px; }
.venue-card { border-radius: 20px; background: #f9fcf9; }
.club-recommend-card { border-radius: 22px; }

/* Other */
.other-hero::before { content: "TOOLS / DATA"; width: auto; height: auto; right: 18px; top: 24px; border: 0; box-shadow: none; color: rgba(255,255,255,.58); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.other-feature-section { margin-top: 18px; }
.other-feature-card { border-radius: 22px; border-color: #e1eae2; box-shadow: var(--shadow-soft); background: rgba(255,255,255,.95); }
.other-feature-card > span { width: 46px; height: 46px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); }
.other-feature-card i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #f1f6f1; color: var(--green); }
.other-detail-card { border-radius: 25px; background: linear-gradient(145deg, #fbfefb, #eff8f1); border-color: #deebe0; box-shadow: var(--shadow-soft); }

/* Mine */
.mine-page-hero::before { content: ""; width: 210px; height: 210px; right: -74px; top: -98px; border: 1px solid rgba(255,255,255,.26); box-shadow: 0 0 0 18px rgba(255,255,255,.06), 0 0 0 38px rgba(255,255,255,.045); }
.mine-page-hero p { max-width: 235px; }
.mine-home-link { border: 1px solid rgba(255,255,255,.22); }
.mine-identity-card { border-radius: 25px; border-color: #dfebe1; box-shadow: var(--shadow-soft); }
.mine-stats-grid .mine-stat-card, .mine-points-card, .mine-menu-list button { border-color: #e1eae2; box-shadow: var(--shadow-soft); }
.mine-page-section-title h2 { letter-spacing: -.04em; }
.mine-detail-card { border-radius: 24px; box-shadow: var(--shadow-soft); }

/* Motion and accessibility */
button, a, .game-card, .venue-card, .club-recommend-card, .other-feature-card { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(91,112,233,.28); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* v=other_hero_layout_20260808: align the tools page with the home and circle heroes */
.other-hero { display: block !important; align-items: initial; min-height: 138px; padding: 18px 18px 22px; background: linear-gradient(145deg, #0b392b 0%, #126448 54%, #58b77b 100%); }
.other-hero::before { content: ""; width: 210px; height: 210px; right: -74px; top: -98px; border: 1px solid rgba(255,255,255,.26); box-shadow: 0 0 0 18px rgba(255,255,255,.06), 0 0 0 38px rgba(255,255,255,.045); }
.other-hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; }
.other-hero-kicker { color: rgba(255,255,255,.66); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.other-hero-location { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 800; }
.other-hero-location svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.other-hero h1 { margin: 16px 0 3px; font-size: 31px; letter-spacing: -.06em; }
.other-hero > p { margin: 0; color: rgba(255,255,255,.8); font-size: 12px; line-height: 1.4; }
.other-feature-section { margin-top: 21px; }
.other-feature-card { min-height: 74px; padding: 12px 14px; }
.other-feature-card > span.other-feature-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; }
.other-feature-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.other-feature-card.message-feature-card > span.other-feature-icon { color: #8c6500; }
.other-feature-card.ai-data-card > span.other-feature-icon { color: #395dc5; }
.other-feature-card:not(.message-feature-card):not(.ai-data-card) > span.other-feature-icon { color: var(--green); }
.other-feature-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.other-feature-card i { color: var(--green); }

/* v=shared_home_action_20260808: consistent return-home action across secondary pages */
.page-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.page-home-link { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; padding: 0 9px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 10px; font-weight: 900; line-height: 1; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.page-home-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-home-link:active { transform: translateY(1px); background: rgba(255,255,255,.22); }
.mine-page-hero .mine-home-link.page-home-link { width: auto; height: 30px; padding: 0 9px; border-radius: 999px; font-size: 10px; }
.mine-page-hero .mine-home-link.page-home-link svg { width: 15px; height: 15px; }