/* PickleCue Interactive Demo — 1:1 mirror of the iOS app's premium dark UI.
   Tokens copied from the app:
   canvas #0B0F14 · surface #151B23 · surfaceHigh #1E2630
   hairline rgba(255,255,255,.08) · text2 #9BA4B0 · text3 #6B7480
   emerald #059669 · emerald-light #6EE7B7 · lime #CDE34A · purple #8B5CF6 */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
    --bg: #0B0F14;
    --surface: #151B23;
    --surface-hi: #1E2630;
    --hairline: rgba(255,255,255,.08);
    --hairline-strong: rgba(255,255,255,.16);
    --t1: #FFFFFF;
    --t2: #9BA4B0;
    --t3: #6B7480;
    --green: #059669;
    --green-light: #6EE7B7;
    --lime: #CDE34A;
    --purple: #8B5CF6;
    --orange: #F59E0B;
    --teal: #5FA8B8;
    --pink: #EC4899;
    --blue: #38BDF8;
    --ink: #10160A;
    --font: ui-rounded, "SF Pro Rounded", -apple-system, "DM Sans", BlinkMacSystemFont, sans-serif;
}

body {
    font-family: var(--font);
    background: #060809;
    background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 14px 14px;
    min-height: 100vh;
}

.demo-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 16px;
    position: relative;
}

.demo-back {
    position: fixed;
    top: 18px; left: 20px;
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--t2); text-decoration: none;
    font-size: 13px; font-weight: 600; letter-spacing: .04em;
    z-index: 50;
}
.demo-back svg { width: 15px; height: 15px; }
.demo-back:hover { color: var(--lime); }

.demo-tag {
    margin-top: 22px;
    background: var(--lime); color: var(--ink);
    font-size: 11px; font-weight: 800; letter-spacing: .28em;
    padding: 7px 16px;
    transform: rotate(-2deg);
}

/* ─── iPhone frame ─── */
/* iPhone 17 Pro Max: 440 x 956 pt logical canvas. */
.iphone-frame {
    width: 462px; max-width: calc(100vw - 24px);
    border-radius: 62px;
    background: #1a1d21;
    padding: 11px;
    box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 28px 70px rgba(0,0,0,.65);
}
.iphone-screen {
    position: relative;
    background: var(--bg);
    border-radius: 52px;
    aspect-ratio: 440 / 956;
    max-height: calc(100vh - 140px);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.dynamic-island {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    width: 112px; height: 32px; border-radius: 18px;
    background: #000; z-index: 40;
}
.status-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 30px 4px;
    color: var(--t1); font-size: 14px; font-weight: 700;
    flex-shrink: 0; z-index: 30;
}
.status-icons { display: flex; gap: 5px; }
.status-icons svg { width: 16px; height: 16px; fill: var(--t1); }
.home-indicator {
    position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
    width: 130px; height: 5px; border-radius: 3px;
    background: rgba(255,255,255,.35); z-index: 40;
}

/* ─── Screens ─── */
.screen {
    position: absolute; inset: 44px 0 78px;
    overflow-y: auto;
    padding: 8px 16px 0;
    opacity: 0; pointer-events: none;
    transform: translateX(14px);
    transition: opacity .32s ease, transform .38s cubic-bezier(.32,.9,.35,1);
    scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active { opacity: 1; pointer-events: auto; transform: translateX(0); }
.scroll-pad { height: 36px; }

/* ─── Shared chrome ─── */
.circle-btn {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--surface-hi);
    border: 1px solid var(--hairline);
    display: flex; align-items: center; justify-content: center;
    color: var(--t1); font-size: 15px;
    flex-shrink: 0; cursor: pointer; position: relative;
}
.circle-btn svg { width: 17px; height: 17px; fill: var(--t1); }
.circle-btn.badge::after {
    content: attr(data-badge);
    position: absolute; top: -3px; right: -3px;
    min-width: 17px; height: 17px; border-radius: 9px;
    background: #EF4444; color: #fff;
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}

.section-h {
    display: flex; align-items: center; justify-content: space-between;
    margin: 20px 2px 10px;
}
.section-h span { font-size: 18px; font-weight: 800; color: var(--t1); }
.section-h a { font-size: 13px; font-weight: 700; color: var(--green-light); cursor: pointer; }

.card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 11px rgba(0,0,0,.28);
}

.lime-t { color: var(--lime) !important; }

/* ─── Pills & chips ─── */
.pill-purple {
    background: var(--purple); color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
.pill-purple.sm { font-size: 9.5px; padding: 2px 8px; }
.pill-lime {
    background: var(--lime); color: var(--ink);
    font-size: 10px; font-weight: 800;
    padding: 3px 9px; border-radius: 99px;
}
.pill-lime.sm { font-size: 10px; }
.pill-green {
    background: rgba(5,150,105,.18); color: var(--green-light);
    border: 1px solid rgba(5,150,105,.4);
    font-size: 10px; font-weight: 700;
    padding: 2px 9px; border-radius: 99px; white-space: nowrap;
}
.pill-blue {
    background: rgba(56,189,248,.16); color: var(--blue);
    border: 1px solid rgba(56,189,248,.35);
    font-size: 10px; font-weight: 700;
    padding: 2px 9px; border-radius: 99px; white-space: nowrap;
}
.caps { text-transform: uppercase; letter-spacing: .08em; }

/* ─── Greeting header (Home) ─── */
.greet-header { display: flex; align-items: center; gap: 11px; padding: 6px 2px 12px; }
.greet-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, #0E5C3F, var(--green));
    border: 2px solid rgba(5,150,105,.85);
    color: #fff; font-weight: 800; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
}
.greet-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.greet-sub { font-size: 12.5px; font-weight: 600; color: var(--t2); }
.greet-name { font-size: 21px; font-weight: 900; color: var(--t1); }

/* ─── Weather card ─── */
.weather-card {
    display: flex; align-items: center; gap: 13px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 11px rgba(0,0,0,.28);
    padding: 14px;
}
.weather-temp { font-size: 31px; font-weight: 900; color: var(--t1); line-height: 1.05; }
.weather-cond { font-size: 12.5px; font-weight: 700; color: var(--t1); margin-top: 2px; }
.weather-cond .ico { font-size: 11px; }
.weather-feels { font-size: 11px; font-weight: 500; color: var(--t3); margin-top: 2px; }
.weather-divider { width: 1px; height: 58px; background: var(--hairline); }
.weather-rows { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.weather-rows div { font-size: 12px; font-weight: 600; color: var(--t2); white-space: nowrap; }
.w-ico { font-size: 10px; }
.weather-badge {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: rgba(205,227,74,.12);
    color: var(--lime); font-size: 10.5px; font-weight: 800;
    border-radius: 12px; padding: 8px 11px;
}
.weather-badge span { font-size: 15px; }

/* ─── Hero cards (NEXT GAME / NEAR YOU / FEATURED) ─── */
.hero-card {
    position: relative;
    border-radius: 26px;
    border: 1px solid var(--hairline);
    overflow: hidden;
    padding: 17px;
    min-height: 198px;
    display: flex; flex-direction: column; gap: 8px;
    background:
        linear-gradient(to left, transparent 30%, rgba(0,0,0,.68)),
        linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 55%),
        linear-gradient(to bottom, rgba(0,0,0,.10) 35%, rgba(0,0,0,.78)),
        url("../images/hero-court.png") center/cover;
    box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 22px rgba(0,0,0,.45);
    margin-top: 4px;
    cursor: pointer;
}
.hero-top { display: flex; align-items: center; justify-content: space-between; }
.hero-caps { font-size: 10.5px; font-weight: 900; letter-spacing: .14em; color: var(--lime); }
.hero-count { font-size: 11.5px; font-weight: 700; color: var(--lime); }
.hero-pill {
    background: var(--lime); color: var(--ink);
    font-size: 10px; font-weight: 900; letter-spacing: .1em;
    padding: 4px 11px; border-radius: 99px;
    box-shadow: 0 2px 9px rgba(205,227,74,.4);
}
.hero-title { font-size: 23px; font-weight: 900; color: #fff; line-height: 1.12; text-shadow: 0 2px 6px rgba(0,0,0,.45); margin-top: auto; }
.hero-title.big { font-size: 26px; }
.hero-meta { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); display: flex; align-items: center; gap: 6px; }
.m-ico { font-size: 11px; }
.hero-meta-row { display: flex; align-items: center; gap: 8px; }
.hero-bottom { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.hero-players { font-size: 13px; font-weight: 700; color: #fff; }
.lime-cta {
    margin-left: auto;
    background: var(--lime); color: var(--ink);
    font-size: 12.5px; font-weight: 700;
    padding: 8px 15px; border-radius: 99px;
    box-shadow: 0 3px 10px rgba(205,227,74,.4);
    white-space: nowrap;
}
.green-cta {
    background: var(--green); color: #fff;
    font-size: 12.5px; font-weight: 700;
    padding: 8px 15px; border-radius: 99px;
    box-shadow: 0 3px 10px rgba(5,150,105,.5);
    white-space: nowrap;
}
.avatar-cluster { display: flex; }
.mini-av {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid #0D1A12;
    font-size: 9px; font-weight: 800; color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-right: -7px;
}
.mini-av.a1 { background: #57A77B; z-index: 3; }
.mini-av.a2 { background: var(--purple); z-index: 2; }
.mini-av.a3 { background: var(--teal); z-index: 1; }
.heart { margin-left: auto; color: #fff; font-size: 16px; opacity: .9; }

/* ─── Schedule | Glance row ─── */
.split-row { display: flex; gap: 11px; margin-top: 16px; align-items: stretch; }
.split-row.three { gap: 8px; }
.split-row .card { flex: 1; padding: 14px; min-width: 0; display: flex; flex-direction: column; }
.card-h { font-size: 14.5px; font-weight: 800; color: var(--t1); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.sched-item { margin-bottom: 9px; }
.s-title { font-size: 12.5px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-court { font-size: 10.5px; font-weight: 500; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-time { font-size: 10.5px; font-weight: 700; color: var(--lime); }
.card-link { font-size: 11.5px; font-weight: 700; color: var(--green-light); margin-top: auto; padding-top: 6px; cursor: pointer; }
.glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.g-tile {
    background: rgba(30,38,48,.6);
    border-radius: 12px; padding: 8px;
    display: flex; flex-direction: column; gap: 1px;
}
.g-tile.center { align-items: center; background: var(--surface); border: 1px solid var(--hairline); padding: 13px 8px; border-radius: 16px; }
.g-ico { font-size: 11px; }
.g-tile b { font-size: 16px; font-weight: 900; color: var(--t1); }
.g-tile i { font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--t3); }

/* ─── Feed (What's Happening) ─── */
.feed { display: flex; flex-direction: column; gap: 8px; }
.feed-row {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex; align-items: flex-start; gap: 8px;
    cursor: pointer;
}
.f-body { flex: 1; min-width: 0; }
.f-title { font-size: 13.5px; font-weight: 700; color: var(--t1); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.f-sub { font-size: 12px; font-weight: 500; color: var(--t2); margin-top: 2px; }
.f-time { font-size: 10.5px; font-weight: 500; color: var(--t3); margin-top: 3px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin-top: 6px; flex-shrink: 0; }

/* ─── Nearby Courts ─── */
.nearby-card { overflow: hidden; }
.map-preview, .courts-map {
    position: relative;
    height: 148px;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        radial-gradient(ellipse at 30% 40%, #18222b, #10161d);
    background-size: 34px 34px, 34px 34px, cover;
}
.map-pin {
    position: absolute; transform: translate(-50%,-50%);
    background: var(--lime); color: var(--ink);
    font-size: 9.5px; font-weight: 800;
    padding: 3px 8px; border-radius: 99px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.user-dot {
    position: absolute; transform: translate(-50%,-50%);
    width: 13px; height: 13px; border-radius: 50%;
    background: #3B82F6; border: 2.5px solid #fff;
    box-shadow: 0 0 0 5px rgba(59,130,246,.25);
}
.court-row {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 14px;
    border-top: 1px solid var(--hairline);
    cursor: pointer;
}
.court-row.tall { border-top: none; }
.c-ico {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.c-ico.green { background: rgba(5,150,105,.16); }
.c-ico.purple { background: rgba(139,92,246,.16); }
.c-ico.orange { background: rgba(245,158,11,.16); }
.c-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.c-body b { font-size: 13.5px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-body i { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--t2); }
.c-body u { text-decoration: none; font-size: 11px; font-weight: 500; color: var(--t3); }
.c-dist { font-size: 12px; font-weight: 700; color: var(--lime); }
.outline-btn {
    margin: 13px 14px 14px;
    border: 1px solid rgba(205,227,74,.55);
    color: var(--lime);
    font-size: 13px; font-weight: 700; text-align: center;
    border-radius: 13px; padding: 12px;
    cursor: pointer;
}
.lime-btn {
    margin: 12px 14px 14px;
    background: var(--lime); color: var(--ink);
    font-size: 13.5px; font-weight: 800; text-align: center;
    border-radius: 99px; padding: 13px;
    box-shadow: 0 3px 12px rgba(205,227,74,.35);
    cursor: pointer;
}
.lime-btn.big { margin: 0; flex: 1; background: var(--green); color: #fff; box-shadow: 0 3px 12px rgba(5,150,105,.4); }

/* ─── Recommended carousel ─── */
.reco-scroll {
    display: flex; gap: 11px;
    overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none;
}
.reco-scroll::-webkit-scrollbar { display: none; }
.reco-card {
    flex: 0 0 188px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 11px rgba(0,0,0,.28);
    cursor: pointer;
}
.reco-photo {
    height: 108px;
    background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.42)), url("../images/hero-court.png") center/cover;
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 8px;
}
.reco-photo .heart {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; margin: 0;
}
.reco-card b { display: block; font-size: 13px; font-weight: 700; color: var(--t1); padding: 9px 11px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reco-card i { display: block; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--t2); padding: 2px 11px 0; }
.reco-card u { display: block; text-decoration: none; font-size: 11px; font-weight: 500; color: var(--t3); padding: 2px 11px 11px; }

/* ─── Progress ─── */
.progress-card { padding: 15px; }
.prog-stats { display: flex; gap: 26px; margin-bottom: 14px; }
.prog-stats b { font-size: 21px; font-weight: 900; color: var(--t1); display: block; }
.prog-stats i { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--t3); }
.prog-bars { display: flex; align-items: flex-end; height: 88px; margin-bottom: 14px; }
.p-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.p-col span { width: 7px; border-radius: 4px; background: var(--lime); }
.p-col.empty span { height: 8px; background: var(--surface-hi); }
.p-col i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--t3); }
.pro-tip {
    display: flex; gap: 10px; align-items: flex-start;
    background: rgba(30,38,48,.55);
    border-radius: 14px; padding: 11px;
}
.tip-ico {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(205,227,74,.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.pro-tip b { font-size: 13px; font-weight: 800; color: var(--t1); display: block; }
.pro-tip i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--t2); }

/* ─── Hub headers (Play / Tournaments / Leagues / Courts) ─── */
.hub-header { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 8px 2px 12px; }
.hub-header.tight { padding-top: 2px; }
.hub-titles { flex: 1; min-width: 0; display: contents; }
.hub-titles h1 { font-size: 29px; font-weight: 900; color: var(--t1); letter-spacing: -.01em; flex: 1; }
/* Subtitle spans the full width below the title row (matches the app). */
.hub-titles p { font-size: 12px; font-weight: 500; color: var(--t2); order: 10; flex-basis: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Tab tray ─── */
.tray {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 0 6px;
    margin-bottom: 14px;
}
.tray-tab {
    flex: 1;
    text-align: center;
    font-size: 12.5px; font-weight: 700;
    color: var(--t2);
    padding: 13px 2px;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
}
.tray.sm .tray-tab { font-size: 11.5px; }
.tray-tab.active { color: var(--lime); }
.tray-tab.active::after {
    content: "";
    position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
    width: 56%; height: 2px; border-radius: 2px;
    background: var(--lime);
}
.badge-n {
    background: var(--purple); color: #fff;
    font-size: 9px; font-weight: 900;
    min-width: 15px; height: 15px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 3px; margin-left: 2px;
}

/* ─── Filter pills (Play) ─── */
.pills-row { display: flex; gap: 6px; margin-bottom: 13px; overflow-x: auto; scrollbar-width: none; }
.pills-row::-webkit-scrollbar { display: none; }
.pill {
    background: var(--surface);
    border: 1px solid var(--hairline);
    color: var(--t2);
    font-size: 11.5px; font-weight: 700;
    padding: 9px 11px; border-radius: 99px;
    white-space: nowrap; cursor: pointer;
}
.pill.sel { color: var(--lime); border-color: var(--lime); }

/* ─── Game rows ─── */
.play-seg { display: none; }
.play-seg.active { display: block; animation: segIn .34s cubic-bezier(.32,.9,.35,1); }
@keyframes segIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
.day-h { font-size: 14px; font-weight: 800; color: var(--t1); margin: 4px 2px 10px; }
.game-row {
    display: flex; align-items: center; gap: 11px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 11px rgba(0,0,0,.28);
    padding: 13px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform .18s ease;
}
.game-row:active { transform: scale(.976); }
.mono {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 900;
    flex-shrink: 0;
    border: 1.5px solid;
}
.mono.sm-m { width: 32px; height: 32px; font-size: 10px; }
.mono.green  { color: #6FBF8E; border-color: rgba(111,191,142,.6); background: rgba(111,191,142,.16); }
.mono.pink   { color: var(--pink); border-color: rgba(236,72,153,.6); background: rgba(236,72,153,.14); }
.mono.blue   { color: var(--blue); border-color: rgba(56,189,248,.6); background: rgba(56,189,248,.14); }
.mono.purple { color: var(--purple); border-color: rgba(139,92,246,.6); background: rgba(139,92,246,.14); }
.mono.teal   { color: var(--teal); border-color: rgba(95,168,184,.6); background: rgba(95,168,184,.14); }
.mono.orange { color: var(--orange); border-color: rgba(245,158,11,.6); background: rgba(245,158,11,.14); }
.g-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.g-body b { font-size: 14.5px; font-weight: 800; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.g-body i { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.g-body u { text-decoration: none; font-size: 11px; font-weight: 500; color: var(--t3); }
.g-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.g-dist { font-size: 11px; font-weight: 600; color: var(--t3); }
.g-count { font-size: 11.5px; font-weight: 800; color: var(--t2); }
.chev { color: var(--t3); font-size: 17px; font-weight: 700; flex-shrink: 0; }
.chev.right { margin-left: auto; }
.notice-row {
    background: rgba(205,227,74,.1);
    border: 1px solid rgba(205,227,74,.35);
    color: var(--lime);
    font-size: 12px; font-weight: 700; text-align: center;
    border-radius: 99px; padding: 10px;
}

/* ─── CTA cards ─── */
.cta-card {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, rgba(5,150,105,.22), rgba(255,255,255,.02));
    border: 1px solid var(--hairline);
    border-radius: 20px;
    padding: 14px;
    margin: 14px 0 10px;
}
.cta-ico {
    width: 46px; height: 46px; border-radius: 13px;
    background: rgba(5,150,105,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0;
}
.cta-body { flex: 1; min-width: 0; }
.cta-body b { font-size: 15px; font-weight: 800; color: var(--t1); display: block; }
.cta-body i { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--t2); }
.partner-row {
    display: flex; align-items: center; gap: 11px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    padding: 13px 14px;
    cursor: pointer;
}

/* ─── Compete segment control ─── */
.seg-control {
    display: flex; gap: 6px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 99px;
    padding: 4px;
    margin: 6px 0 12px;
}
.seg-pill {
    flex: 1; text-align: center;
    font-size: 13px; font-weight: 700;
    color: var(--t2);
    padding: 9px; border-radius: 99px;
    cursor: pointer;
    transition: all .28s cubic-bezier(.32,.9,.35,1);
}
.seg-pill.active { background: var(--green); color: #fff; }
.hub-pane { display: none; }
.hub-pane.active { display: block; animation: segIn .34s cubic-bezier(.32,.9,.35,1); }

/* ─── Quick actions ─── */
.qa-row { display: flex; gap: 8px; margin: 14px 0 4px; }
.qa {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    text-align: center;
    font-size: 10px; font-weight: 700; color: var(--t1);
    padding: 13px 4px; line-height: 1.35;
    cursor: pointer;
}
.qa span { display: block; font-size: 17px; margin-bottom: 5px; color: var(--green-light); }

/* ─── Courts screen ─── */
.courts-map { height: 360px; border-radius: 22px; border: 1px solid var(--hairline); position: relative; overflow: hidden; }
.courts-map .map-pin { font-size: 12px; padding: 4px 7px; }
.courts-sel { margin-top: 12px; }

/* ─── Profile ─── */
.profile-head { text-align: center; padding: 18px 0 16px; }
.profile-av {
    width: 84px; height: 84px; border-radius: 50%;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, #0E5C3F, var(--green));
    border: 3px solid rgba(5,150,105,.85);
    color: #fff; font-size: 32px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.profile-head h1 { font-size: 23px; font-weight: 900; color: var(--t1); }
.profile-head p { font-size: 13px; font-weight: 600; color: var(--t2); margin-top: 3px; }
.menu-card { margin-top: 16px; }
.menu-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--hairline);
    cursor: pointer;
}
.menu-row:last-child { border-bottom: none; }
.menu-row b { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--t1); }

/* ─── Game detail overlay ─── */
.detail-overlay {
    position: absolute; inset: 0;
    background: var(--bg);
    z-index: 35;
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.32,.9,.35,1);
    display: flex; flex-direction: column;
    border-radius: 46px;
    overflow: hidden;
}
.detail-overlay.open { transform: translateX(0); }
.detail-nav {
    display: flex; justify-content: space-between;
    padding: 56px 16px 6px;
    position: relative; z-index: 5;
}
.detail-scroll { flex: 1; overflow-y: auto; padding: 0 16px; scrollbar-width: none; }
.detail-scroll::-webkit-scrollbar { display: none; }
.detail-hero {
    margin: -104px -16px 12px;
    padding: 116px 17px 18px;
    background:
        linear-gradient(to left, transparent 30%, rgba(0,0,0,.68)),
        linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15) 45%, rgba(0,0,0,.8)),
        url("../images/hero-court.png") center/cover;
    display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
}
.detail-hero .hero-title { margin-top: 6px; }
.action-row { display: flex; gap: 8px; margin-bottom: 12px; }
.act {
    flex: 1;
    background: var(--surface-hi);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    text-align: center;
    font-size: 10.5px; font-weight: 700; color: var(--t1);
    padding: 11px 2px;
    cursor: pointer;
}
.act span { display: block; font-size: 16px; margin-bottom: 4px; }
.act.dim { opacity: .45; }
.spots-card { display: flex; align-items: center; justify-content: space-between; padding: 14px; margin-bottom: 12px; }
.spots-card b { font-size: 15px; font-weight: 800; color: var(--t1); display: block; }
.spots-card i { font-style: normal; font-size: 11.5px; color: var(--t2); }
.spots-n { font-size: 23px; font-weight: 900; color: var(--green-light); }
.spots-n.full { color: var(--purple); }
.players-card, .details-card { padding: 14px; margin-bottom: 12px; }
.p-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--t1); padding: 7px 0; }
.d-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.d-row:last-child { border-bottom: none; }
.d-row i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--t2); }
.d-row b { font-size: 12.5px; font-weight: 700; color: var(--t1); }
.detail-bar {
    padding: 11px 16px 30px;
    background: rgba(11,15,20,.92);
    border-top: 1px solid var(--hairline);
    text-align: center;
}
.detail-bar i { display: block; font-style: normal; font-size: 11px; font-weight: 600; color: var(--t2); margin-bottom: 8px; }

/* ─── Tab bar ─── */
.tab-bar {
    position: absolute; bottom: 14px; left: 14px; right: 14px;
    height: 62px;
    background: rgba(21,27,35,.94);
    border: 1px solid var(--hairline);
    border-radius: 99px;
    display: flex; align-items: center;
    z-index: 30;
    backdrop-filter: blur(14px);
}
.tab-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 9.5px; font-weight: 700; color: var(--t3);
    cursor: pointer;
    padding: 6px 0;
}
.t-ico { font-size: 17px; filter: grayscale(1) brightness(1.4); }
.tab-item.active { color: var(--green-light); position: relative; }
.tab-item.active::before {
    content: "";
    position: absolute; inset: -2px 4px;
    background: rgba(5,150,105,.18);
    border-radius: 99px;
    z-index: -1;
}
.tab-item.active .t-ico { filter: none; }

@media (max-height: 900px) {
    .iphone-frame { width: 420px; }
}


/* ─── SVG icon system (SF-Symbol stand-ins) ─── */
.i { width: 12px; height: 12px; vertical-align: -1.5px; flex-shrink: 0; }
.i.wi { color: var(--green-light); width: 11px; height: 11px; }
.i.sun { color: var(--lime); }
.i.big { width: 17px; height: 17px; display: block; margin: 0 auto 1px; }
.i.mi { color: var(--green-light); width: 12px; height: 12px; }
.i.gi { width: 12px; height: 12px; margin-bottom: 1px; }
.lime-i { color: var(--lime); } .purple-i { color: var(--purple); }
.orange-i { color: var(--orange); } .teal-i { color: var(--teal); }
.i.ci { width: 17px; height: 17px; }
.c-ico.green .i, .cta-ico .i, .tip-ico .i { color: var(--green-light); }
.c-ico.green .i { color: #6FBF8E; }
.c-ico.purple .i { color: var(--purple); }
.c-ico.orange .i { color: var(--orange); }
.tip-ico .i { color: var(--lime); }
.i.pi { width: 10px; height: 10px; }
.i.hp { width: 10px; height: 10px; vertical-align: -1px; }
.i.hi { width: 15px; height: 15px; color: #fff; }
.i.ti { width: 12px; height: 12px; }
.i.qi { width: 18px; height: 18px; display: block; margin: 0 auto 6px; color: var(--green-light); }
.i.xs { width: 9px; height: 9px; }
.i.ai { width: 16px; height: 16px; display: block; margin: 0 auto 4px; }
.i.hi2 { width: 14px; height: 14px; color: var(--green-light); }
.i.di { width: 12px; height: 12px; color: var(--green-light); margin-right: 2px; }
.i.st { width: 10px; height: 10px; color: var(--orange); }
.i.tbi { width: 19px; height: 19px; }
.circle-btn .i { width: 17px; height: 17px; }
.x-t { font-size: 15px; font-weight: 700; }
.heart .i { width: 13px; height: 13px; }
.reco-photo .heart .i { color: #fff; }

/* Tab bar uses currentColor now — drop the emoji grayscale hack. */
.t-ico { display: none; }
.tab-item .i.tbi { color: var(--t3); }
.tab-item.active .i.tbi { color: var(--green-light); }

/* Hero countdown: chip backing for contrast over the photo. */
.hero-count {
    background: rgba(0,0,0,.42);
    padding: 3px 9px;
    border-radius: 99px;
    backdrop-filter: blur(3px);
}

/* Detail i rows are flex now (icon + text) */
.d-row i { display: inline-flex; align-items: center; gap: 5px; }
.pill .i { vertical-align: -1.5px; }


/* ─── Embedded (iframed in the marketing hero) ─── */
.embedded body { background: var(--bg); }
.embedded .demo-back, .embedded .demo-tag, .embedded .dynamic-island { display: none; }
.embedded .demo-page { padding: 0; min-height: 100vh; }
.embedded .iphone-frame {
    width: 100%; max-width: none;
    padding: 0; border-radius: 0;
    background: transparent; box-shadow: none;
    display: flex; justify-content: center;
}
.embedded .iphone-screen {
    border-radius: 0;
    height: 100vh; max-height: none;
    width: min(100vw, 440px);
    aspect-ratio: auto;
    flex: 0 0 auto;
}

/* ─── Real app avatars + logo badges ─── */
img.greet-avatar { object-fit: cover; }
img.profile-av { object-fit: cover; }
.mini-av.img { object-fit: cover; background: #0D1A12; }
.p-av {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid var(--hairline-strong);
    flex-shrink: 0;
}
.logo-badge {
    width: 44px; height: 44px; border-radius: 50%;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.4));
}
.hero-top .logo-badge { width: 34px; height: 34px; margin-left: auto; }