/* OpenTee "glass" skin — look and feel only.
   Loads after styles.css. Same OpenTee colors (fairway green, brass gold), same screens, same markup.
   Changes: soft-glow background instead of striped header bands, page titles sit on the background,
   translucent cards with hairline borders, bold system type for big numbers, tinted (not solid) selected
   states, tile-style stats, and a floating pill tab bar. */

:root{
  --display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --glass:rgba(255,255,255,.82); --glass-line:rgba(15,31,23,.08); --tint:color-mix(in srgb,var(--brand) 11%,transparent);
  --glow-a:rgba(20,84,58,.13); --glow-b:rgba(167,125,42,.10); --track:rgba(15,31,23,.06);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --app:#070f0a; --glass:rgba(22,38,29,.62); --glass-line:rgba(233,241,234,.075); --tint:rgba(79,191,134,.14);
  --glow-a:rgba(46,140,88,.30); --glow-b:rgba(220,183,93,.12); --track:rgba(0,0,0,.28); --chip:rgba(233,241,234,.07)}}
:root[data-theme="dark"]{
  --app:#070f0a; --glass:rgba(22,38,29,.62); --glass-line:rgba(233,241,234,.075); --tint:rgba(79,191,134,.14);
  --glow-a:rgba(46,140,88,.30); --glow-b:rgba(220,183,93,.12); --track:rgba(0,0,0,.28); --chip:rgba(233,241,234,.07)}

body{letter-spacing:-.005em}

/* Background: two soft glows on the app surface */
.phone{isolation:isolate}
.phone::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(440px 340px at -6% -4%,var(--glow-a),transparent 70%),
             radial-gradient(460px 420px at 108% 78%,var(--glow-b),transparent 70%)}

/* Page header: no band, big title on the background */
.head{background:transparent;color:var(--fg);border-radius:0;padding:22px 20px 6px;gap:4px;overflow:visible}
.head::before{display:none}
.head h2{font-size:32px;font-weight:750;letter-spacing:-.035em;line-height:1.05}
.head .eyebrow{color:var(--muted);font-size:13.5px;font-weight:500}
.head .back{color:var(--brand);opacity:1;font-weight:600;margin-bottom:-4px}
.head{padding-top:calc(22px + env(safe-area-inset-top,0px))}
@media (min-width:600px){.head{padding-top:30px}}
.prog i{background:var(--track)}
.prog i.on{background:var(--brand)}
.main{gap:10px;padding:14px 16px 28px}

/* Cards: translucent glass, hairline border, no drop shadow */
.card,.note-row{background:var(--glass);border:1px solid var(--glass-line);box-shadow:none;border-radius:20px;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
.card{padding:16px;gap:11px}
.card > h3,.card > .row:first-child > h3{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.card h3{font-family:var(--display);font-weight:650;letter-spacing:-.02em}
h3.sec{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:14px 4px 0}
.row .muted,.muted{font-size:13.5px}
.empty{border:1px dashed var(--glass-line);background:var(--glass);border-radius:18px;font-size:14px}

/* Game cards */
.g-date{background:var(--tint);border-radius:13px;width:52px;height:56px}
.g-date small{text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;font-weight:700}
.g-date b{font-size:23px;font-weight:750}
.g-main h3{font-size:17px}
.g-time{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em}
.slots .dot{width:9px;height:9px;border-width:1.5px}
.g-foot b,.g-foot .num{font-family:var(--display)}

/* Tags and pills: small rounded rectangles; tinted, never solid */
.tag{background:var(--chip);border-radius:7px;padding:4px 8px;font-size:12px;font-weight:600;color:var(--muted)}
.pill{border-radius:7px;padding:4px 8px;font-size:11px;letter-spacing:.06em}
.pill.confirmed{background:var(--tint);color:var(--brand)}
.pill.pending{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.pill.hosting{background:var(--chip);color:var(--fg)}

/* Chips and filters: glass, selected = green tint + green text */
.chip{background:var(--glass);border-color:var(--glass-line);font-size:13.5px;min-height:38px}
.chip[aria-pressed="true"]{background:var(--tint);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.filter-bar select{background-color:var(--glass);border:1px solid var(--glass-line);border-radius:12px}
.filter-bar .chip,.filter-more{border-radius:12px}
.filter-more[aria-expanded="true"]{background:var(--tint);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}

/* Inputs */
input,select,textarea{background:var(--glass);border-color:var(--glass-line);border-radius:12px}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}

/* Buttons */
.btn{border-radius:14px;font-weight:700;box-shadow:none;min-height:50px}
.btn.alt{background:var(--chip);color:var(--fg);border:1px solid var(--glass-line)}
.btn.alt.danger,.btn.danger.alt{color:var(--bad)}
.btn.gold{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.card .btn{min-height:46px}

/* Stats become tiles with big numbers */
.stats{gap:8px}
.stat,.stat:first-child{background:var(--chip);border:1px solid var(--glass-line);border-radius:14px;padding:10px 12px}
.stat b{font-size:26px;font-weight:750;letter-spacing:-.04em}
.stat span{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.avatar{border-color:transparent;box-shadow:0 0 0 2px var(--brand),0 0 0 6px var(--tint)}

/* Score + hole grids read like a data table */
.score-grid .hd,.hole-grid .hd{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.pos,.neg{font-family:var(--display)}

/* Floating pill tab bar */
.tabs{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:20;
  border:1px solid var(--glass-line);border-radius:30px;padding:5px;gap:2px;background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 14px 32px -14px rgba(0,0,0,.55)}
.tab{min-height:52px;border-radius:24px;font-size:10.5px;gap:3px}
.tab svg{width:21px;height:21px}
.tab[aria-current="page"]{background:var(--tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 30%,transparent)}
.tab[aria-current="page"]::before{display:none}
.badge{top:4px;border-color:transparent}
/* keep content clear of the floating bar */
/* Room for the floating bar + the iPhone home-indicator area, plus breathing space above the bar */
.phone:has(.tabs:not([hidden])) .main{padding-bottom:calc(116px + env(safe-area-inset-bottom,0px))}
.phone:has(.tabs:not([hidden])) .foot{padding-bottom:calc(102px + env(safe-area-inset-bottom,0px))}
.foot{background:linear-gradient(to bottom,transparent,var(--app) 26%);border-top:0}

/* Sheet, toast, menus */
.sheet{background:var(--app);border-top:1px solid var(--glass-line)}
.sheet::before{background:var(--glass-line);height:5px;width:38px}
.sheet h3{font-size:22px;font-weight:750}
.toast{border-radius:14px}
.opts{background:var(--surface);border-color:var(--glass-line)}

/* Chat bubbles */
.bubble.them{background:var(--glass);border-color:var(--glass-line)}

/* Welcome stays a dark brand moment, now with glows instead of stripes */
.hero{background:#070f0a;color:#eaf3ec}
.hero::before{background:radial-gradient(420px 360px at 0% 0%,rgba(46,140,88,.38),transparent 70%),radial-gradient(420px 380px at 100% 100%,rgba(220,183,93,.16),transparent 70%)}
.hero .mark{font-family:var(--display);font-size:52px;font-weight:800;letter-spacing:-.045em}
.hero li span.ic{border-radius:11px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}

/* Nothing shows below the floating tab bar: the page fades into the background behind it */
.phone:has(.tabs:not([hidden]))::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:19;pointer-events:none;
  height:calc(100px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to bottom,rgba(0,0,0,0),var(--app) 38%)}
@supports (background:linear-gradient(in oklab,red,blue)){
  .phone:has(.tabs:not([hidden]))::after{background:linear-gradient(to bottom in oklab,color-mix(in srgb,var(--app) 0%,transparent),var(--app) 38%)}}
/* Scrolling stays inside the screen: no whole-page bounce that drags the tab bar around */
.main{overscroll-behavior-y:contain}




/* Every screen scrolls instead of squashing: iPhone Safari let cards and buttons shrink to fit the
   screen (so long pages like Manage game, with many requests, could not scroll and got cut off). */
.main{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.main > *{flex-shrink:0}

/* No double-tap zoom anywhere in the app (taps also respond faster). */
html,body,*{touch-action:manipulation}

/* ---- Phones: the PAGE scrolls (6.6) ----
   iPhone home-screen apps would not scroll the inner content box reliably (6.1–6.5), so on phones the
   whole page scrolls like a normal website and the tab bar, its fade, sheets and toasts are pinned to
   the screen. Desktop keeps the framed phone with an inner scroll box. */
@media (max-width:599px){
  html,body{height:auto;min-height:100%;overflow:visible;overscroll-behavior:auto}
  body{background:var(--app)}
  .stage,.phone{max-width:100vw;overflow-x:clip}
  .stage{height:auto!important;min-height:100vh;min-height:100dvh;display:block}
  .phone{height:auto;min-height:100vh;min-height:100dvh;overflow:visible;max-height:none}
  #screen{flex:1 0 auto!important;min-height:auto!important}
  .main{flex:1 0 auto;min-height:auto;overflow:visible;scroll-behavior:auto}
  .main.hero{min-height:100vh;min-height:100dvh}
  .phone::before{position:fixed}
  .phone:has(.tabs:not([hidden]))::after{position:fixed}
  .tabs{position:fixed}
  .foot{position:sticky;bottom:0;z-index:15}
  .sheet-wrap,.toast{position:fixed}
}
/* Home-screen app: iOS anchors bottom:0 short by the status-bar height (black-translucent bug), so pin
   the bar and its fade from the top using 100vh, which is the full screen there. */
@media (max-width:599px) and (display-mode: standalone){
  .phone,.main.hero{min-height:100vh}
  .tabs{top:calc(100vh - 64px - 12px - env(safe-area-inset-bottom,0px));bottom:auto}
  .phone:has(.tabs:not([hidden]))::after{top:calc(100vh - 100px - env(safe-area-inset-bottom,0px));bottom:auto}
  .sheet-wrap{top:0;bottom:auto;height:100vh}
}

/* Safari on iPhone (not the home-screen app): its see-through floating address bar sits below our tab bar
   and Safari draws the page behind it, so extend the fade down past the bottom of the screen to cover
   that area too. Same visible fade above the tab bar as before (starts 100px above the bottom, solid after 38px). */
@media (max-width:599px) and (not (display-mode: standalone)){
  .phone:has(.tabs:not([hidden]))::after{bottom:-200px;height:calc(300px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to bottom,rgba(0,0,0,0) 0,var(--app) 38px,var(--app) 100%)}
  @supports (background:linear-gradient(in oklab,red,blue)){
    .phone:has(.tabs:not([hidden]))::after{background:linear-gradient(to bottom in oklab,color-mix(in srgb,var(--app) 0%,transparent) 0,var(--app) 38px,var(--app) 100%)}}
}