/* Parmate player app styles. Loaded by index.html in <head>. Blocks kept in original order (cascade). */
/* ===== block 1 (was index.html line 68) ===== */
:root {
  --bg:       #f4f6f2;
  --surface:  #ffffff;
  --surface2: #eef1ec;
  --border:   rgba(0,0,0,0.07);
  --border2:  rgba(0,0,0,0.13);
  --gold:     #07430f;
  --gold2:    #1f5e36;
  --gold-dim: rgba(42,122,72,0.10);
  --green:    #2a7a48;
  --muted:    #374151;
  --cream:    #1a2820;
  --white:    #0f1a14;
  --red:      #c0392b;
  --red-dim:  rgba(192,57,43,0.10);
  --tee1:     #2060c0;
  --tee2:     #b8860b;
  --tee3:     #c0392b;
  --radius:   12px;
  --radius-sm:8px;
  --tab-h:    64px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  min-height: 100vh; min-height:100dvh;
  overflow: hidden; /* tabs handle scroll */
}

body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(74,158,106,0.08) 0%, transparent 60%),
    repeating-linear-gradient(175deg, transparent, transparent 60px, rgba(255,255,255,0.005) 60px, rgba(255,255,255,0.005) 120px);
}







/* Remove old bg from appContent — let body handle it */
.app-content.unlocked {
  background-image: none;
  background-color: transparent;
}

/* ═══════════════════════════════════
   TAB SYSTEM
═══════════════════════════════════ */
.tab-pages {
  display: flex;
  width: 200%;
  height: 100vh; height: 100dvh;
  transition: transform 0.35s cubic-bezier(0.32,0,0.2,1);
  position: relative; z-index: 1;
}
.tab-pages.show-mydata { transform: translateX(-50%); }

.tab-page {
  width: 50%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
}

/* ── Bottom Tab Bar ── */
.bottom-tabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border2);
  display: none; /* hidden until logged in */
  align-items: stretch;
  z-index: 90;
  backdrop-filter: blur(12px);
}
.bottom-tabs.visible { display: flex; }

.tab-btn-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0 4px;
  transition: all 0.18s;
  position: relative;
}
.tab-btn-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--gold);
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: opacity 0.18s;
}
.tab-btn-bar.active::after { opacity: 1; }

.tab-btn-icon {
  font-size: 1.3rem;
  line-height: 1;
  filter: grayscale(1) opacity(0.45);
  transition: filter 0.18s;
}
.tab-btn-bar.active .tab-btn-icon { filter: none; }

.tab-btn-label {
  font-family: 'Roboto', sans-serif;
  font-size: 0.60rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.18s;
}
.tab-btn-bar.active .tab-btn-label { color: var(--gold); }

/* ═══════════════════════════════════
   SHARED LAYOUT
═══════════════════════════════════ */
.page-inner {
  max-width: 480px;
  margin: 0 auto;
}

.header {
  padding: 52px 20px 24px;
  text-align: center;
}
.header-flag { font-size:2rem; margin-bottom:12px; display:block; filter:drop-shadow(0 0 12px rgba(200,168,75,0.3)); }
.header h1 { font-family:'Inter',sans-serif; font-size:2.2rem; font-weight:700; color:var(--white); line-height:1; letter-spacing:-0.02em; }
.header h1 em { color:#07430f; font-style:italic; }
.header-sub { margin-top:8px; font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.header-auth { margin-top:14px; display:flex; align-items:center; justify-content:center; gap:10px; min-height:36px; }
.user-pill { display:none; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border2); border-radius:20px; padding:5px 12px 5px 5px; cursor:pointer; transition:background 0.15s; position:relative; }
.user-pill.visible { display:flex; }
.user-pill:active { background:var(--surface2); }
.user-pill-avatar { width:28px; height:28px; border-radius:50%; background:var(--surface2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:0.9rem; overflow:hidden; flex-shrink:0; }
.user-pill-badge { position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff; font-size:0.55rem; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); }

/* Profile overlay */
.profile-overlay { position:fixed; inset:0; background:var(--bg); z-index:200; overflow-y:auto; transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.32,0,0,1); }
.profile-overlay.open { transform:translateY(0); }
.profile-inner { max-width:480px; margin:0 auto; padding:0 16px 100px; }
.profile-header { display:flex; align-items:center; gap:12px; padding:16px 0 12px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.profile-title { font-size:1.1rem; font-weight:700; color:var(--white); flex:1; }

/* Avatar grid */
.avatar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:12px 0; }
.avatar-option { position:relative; cursor:pointer; }
.avatar-option input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.avatar-option label { display:block; border-radius:50%; border:3px solid transparent; cursor:pointer; transition:border-color 0.15s; overflow:hidden; aspect-ratio:1; background:#000; }
.avatar-option label img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.avatar-option input:checked + label { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim); }

/* Profile card */
.profile-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:16px; }
.profile-card-title { font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); margin-bottom:12px; }

/* Team card */
.team-buddy-card { background:var(--surface2); border-radius:var(--radius-sm); padding:12px; display:flex; align-items:center; gap:12px; margin-top:8px; }
.team-buddy-avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.team-buddy-avatar img { width:100%; height:100%; object-fit:cover; }
.team-buddy-info { flex:1; }
.team-buddy-name { font-size:0.88rem; font-weight:700; color:var(--white); }
.team-buddy-meta { font-size:0.72rem; color:var(--muted); margin-top:2px; }
.team-buddy-status { font-size:0.65rem; font-weight:700; padding:3px 8px; border-radius:10px; }
.team-buddy-status.pending { background:rgba(200,120,0,0.15); color:#c87800; }
.team-buddy-status.active  { background:rgba(42,122,72,0.15);  color:var(--green); }
/* ── WHAT'S NEW MODAL ───────────────────────────────────────── */
.whats-new-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.whats-new-crown  { font-size:2rem; line-height:1; }
.whats-new-title  { font-family:'Inter',sans-serif; font-size:1.15rem; font-weight:700; color:var(--white); }
.whats-new-version{ font-size:0.65rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-top:2px; }
.whats-new-item   { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.whats-new-item:last-of-type { border-bottom:none; }
.whats-new-icon   { font-size:1.2rem; flex-shrink:0; width:28px; text-align:center; margin-top:1px; }
.whats-new-text   { flex:1; }
.whats-new-label  { font-size:0.85rem; font-weight:700; color:var(--white); margin-bottom:2px; }
.whats-new-desc   { font-size:0.75rem; color:var(--muted); line-height:1.5; }
.legal-overlay { position:fixed; inset:0; background:var(--bg); z-index:220; overflow-y:auto; transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.32,0,0,1); }
.legal-overlay.open { transform:translateY(0); }
.legal-inner { max-width:480px; margin:0 auto; padding:0 20px 80px; }
.legal-section { margin-bottom:24px; }
.legal-section h2 { font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--green); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.legal-section p, .legal-section li { font-size:0.82rem; color:var(--white); line-height:1.65; margin-bottom:6px; }
.legal-section ul { padding-left:18px; margin-bottom:8px; }
.legal-section a { color:var(--green); text-decoration:underline; }
.legal-tab-bar { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:20px; margin-top:8px; }
.legal-tab { flex:1; padding:10px 0; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.15s; }
.legal-tab.active { color:var(--green); border-bottom-color:var(--green); }
.buddy-overlay { position:fixed; inset:0; background:var(--bg); z-index:210; overflow-y:auto; transform:translateY(100%); transition:transform 0.32s cubic-bezier(0.32,0,0,1); }
.buddy-overlay.open { transform:translateY(0); }
.buddy-overlay-inner { max-width:480px; margin:0 auto; padding:0 16px 100px; }
.buddy-search-bar { display:flex; align-items:center; gap:0; background:var(--surface); border:1.5px solid var(--border2); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; transition:border-color 0.2s; }
.buddy-search-bar:focus-within { border-color:var(--gold); }
.buddy-search-bar input { flex:1; background:transparent; border:none; color:var(--white); padding:13px 14px; font-size:0.92rem; outline:none; min-width:0; }
.buddy-search-bar-icon { padding:0 12px 0 14px; font-size:1rem; flex-shrink:0; line-height:1; }
.buddy-result-card { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px; cursor:pointer; transition:border-color 0.15s; }
.buddy-result-card:active { border-color:var(--gold); }
.buddy-result-avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.buddy-result-avatar img { width:100%; height:100%; object-fit:cover; }
.buddy-result-name { font-size:0.95rem; font-weight:700; color:var(--white); }
.buddy-result-meta { font-size:0.75rem; color:var(--muted); margin-top:2px; }
.buddy-result-arrow { margin-left:auto; font-size:1.1rem; color:var(--muted); }
/* ── PUBLIC PROFILE OVERLAY ───────────────────────────────── */
.pub-profile-hero { display:flex; flex-direction:column; align-items:center; padding:24px 0 20px; text-align:center; }
.pub-profile-avatar { width:88px; height:88px; border-radius:50%; overflow:hidden; border:3px solid var(--gold); background:var(--border); display:flex; align-items:center; justify-content:center; font-size:2.4rem; margin-bottom:12px; }
.pub-profile-avatar img { width:100%; height:100%; object-fit:cover; }
.pub-profile-name { font-size:1.3rem; font-weight:700; color:var(--white); }
.pub-profile-hcp  { font-size:0.88rem; color:var(--muted); margin-top:4px; }
.pub-profile-course { font-size:0.78rem; color:var(--muted); margin-top:2px; }
.pub-profile-badges { display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.pub-profile-badge { background:var(--surface2); border:1px solid var(--border); border-radius:20px; padding:4px 12px; font-size:0.72rem; color:var(--muted); }
.btn-add-buddy { width:100%; padding:15px; background:var(--green); color:#fff; border:none; border-radius:var(--radius); font-family:'Roboto',sans-serif; font-size:0.82rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; margin-top:8px; transition:all 0.15s; }
.btn-add-buddy:active { opacity:0.85; transform:scale(0.98); }
.btn-add-buddy.sent { background:var(--surface2); color:var(--muted); cursor:default; }
.btn-add-buddy.already { background:var(--surface2); color:var(--green); cursor:default; }
/* ── MY BUDDIES LIST ──────────────────────────────────────── */
.buddy-list-card { display:flex; align-items:center; gap:12px; background:var(--surface2); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px; }
.buddy-list-name { font-size:0.9rem; font-weight:700; color:var(--white); flex:1; }
.buddy-list-hcp  { font-size:0.72rem; color:var(--muted); margin-top:2px; }
.team-type-toggle { display:flex; gap:0; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border2); margin-bottom:12px; }
.team-type-btn { flex:1; padding:9px 0; font-size:0.75rem; font-weight:700; letter-spacing:0.06em; border:none; background:var(--surface2); color:var(--muted); cursor:pointer; transition:all 0.15s; }
.team-type-btn.active { background:var(--green); color:#fff; }
/* Buddy slot cards inside add-team form */
.buddy-slot { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; margin-top:8px; }
.buddy-slot-label { font-size:0.65rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.buddy-slot-selected { display:flex; align-items:center; gap:8px; background:var(--surface); padding:8px 10px; border-radius:var(--radius-sm); margin-top:6px; }
.buddy-slot-selected-name { font-size:0.82rem; font-weight:700; color:var(--green); flex:1; }
.buddy-slot-clear { background:none; border:none; cursor:pointer; color:var(--muted); font-size:1rem; padding:0 4px; }

/* Buddy search */
.buddy-search-input { width:100%; background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radius-sm); color:var(--white); padding:10px 12px; font-size:0.88rem; outline:none; }
.buddy-search-input:focus { border-color:var(--gold); }
.buddy-search-results { margin-top:8px; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius-sm); overflow:hidden; display:none; }
.buddy-search-result { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--border); }
.buddy-search-result:last-child { border-bottom:none; }
.buddy-search-result:active { background:var(--surface2); }
.buddy-search-avatar { width:32px; height:32px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:0.9rem; }
.buddy-search-avatar img { width:100%; height:100%; object-fit:cover; }

/* Pending request card */
.request-card { background:var(--surface2); border-radius:var(--radius-sm); padding:12px; display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.request-card-actions { display:flex; gap:8px; flex-shrink:0; }
.btn-accept { background:var(--green); color:#fff; border:none; border-radius:var(--radius-sm); padding:7px 14px; font-size:0.72rem; font-weight:700; cursor:pointer; }
.btn-decline { background:none; border:1px solid var(--border2); color:var(--muted); border-radius:var(--radius-sm); padding:7px 14px; font-size:0.72rem; cursor:pointer; }
.user-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px rgba(74,158,106,0.6); flex-shrink:0; }
.user-name { font-size:0.65rem; color:var(--cream); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-signout { background:none; border:none; font-family:'Roboto',sans-serif; font-size:0.58rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0; transition:color 0.2s; }
.btn-signout:active { color:var(--red); }

/* ═══════════════════════════════════
   LOCKED HERO
═══════════════════════════════════ */
.locked-hero {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; text-align:center; padding:40px 24px; gap:16px;
  background-image: url('icons/login-bg.jpg');
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  position: relative;
}
.locked-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.05) 35%,
    rgba(0,0,0,0.45) 70%,
    rgba(0,0,0,0.70) 100%
  );
  z-index: 0;
}
.locked-hero > * { position: relative; z-index: 1; }
.locked-hero-flag { font-size:3rem; filter:drop-shadow(0 0 16px rgba(200,168,75,0.3)); margin-bottom:4px; }
.locked-hero h1 { font-family:'Inter',sans-serif; font-size:2.4rem; font-weight:700; color:#ffffff; line-height:1; letter-spacing:-0.02em; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.locked-hero h1 em { color:#ffffff; font-style:italic; }
.locked-hero-sub { font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.85); }
.locked-hero-desc { font-size:0.78rem; color:rgba(255,255,255,0.85); line-height:1.8; max-width:280px; }
.locked-features { display:flex; flex-direction:column; gap:8px; margin:8px 0; text-align:left; width:100%; max-width:280px; }
.locked-feature { display:flex; align-items:center; gap:10px; font-size:0.72rem; color:rgba(255,255,255,0.9); }
.locked-feature-icon { width:28px; height:28px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.85rem; flex-shrink:0; }
.btn-locked-signin { width:100%; max-width:280px; padding:16px; background:var(--gold); border:none; border-radius:var(--radius); font-family:'Roboto',sans-serif; font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#ffffff; cursor:pointer; transition:all 0.2s; box-shadow:0 8px 32px rgba(0,0,0,0.3); margin-top:8px; }
.btn-locked-signin:active { transform:scale(0.98); background:var(--gold2); }
.locked-terms { font-size:0.58rem; color:rgba(255,255,255,0.6); line-height:1.6; }

/* ═══════════════════════════════════
   CALCULATOR TAB
═══════════════════════════════════ */
.app-content { display:none; }
.app-content.unlocked { display:block; }

.section { margin:0 16px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.section-header { padding:14px 18px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.section-header.collapsed { border-bottom:none; }
.section-icon { font-size:0.9rem; opacity:0.7; }
.section-title { font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); flex:1; }
.section-toggle { font-size:1.1rem; font-weight:400; color:var(--muted); line-height:1; margin-left:4px; flex-shrink:0; transition:none; }
.section-body { padding:18px; background:#ffffff; }
.section-body.collapsed { display:none; }

.btn-save-inline {
  background:none; border:1px solid rgba(200,168,75,0.3); border-radius:20px;
  padding:5px 12px; font-family:'Roboto',sans-serif; font-size:0.55rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--gold);
  cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:5px; flex-shrink:0;
}
.btn-save-inline:active { background:var(--gold-dim); transform:scale(0.97); }
.btn-save-inline.saved { color:var(--green); border-color:rgba(74,158,106,0.3); }

.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field:last-child { margin-bottom:0; }
.field label { font-size:0.60rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }

input[type=text], input[type=number], select {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 3px;
  color: var(--cream);
  font-family: 'Roboto', sans-serif;
  font-size: 0.90rem;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.2s;
  appearance: textfield;
  -moz-appearance: textfield;
  width: 100%;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance:none; }
input:focus, select:focus { border-color: #2a7a48; outline: none; background: #ffffff; }
input::placeholder { color: rgba(0,0,0,0.28); }
input { transition:border-color 0.4s, background 0.2s; }

.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.gender-pills { display:flex; gap:8px; }
.gender-pill { position:relative; flex:1; }
.gender-pill input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.gender-pill label { display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 10px; border:1px solid var(--border2); border-radius:var(--radius-sm); font-size:0.75rem; color:var(--muted); cursor:pointer; transition:all 0.18s; white-space:nowrap; }
.gender-pill input:checked + label { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
.gender-pill label:active { transform:scale(0.97); }

.tee-pills { display:flex; gap:8px; flex-wrap:wrap; }
.tee-pill { position:relative; }
.tee-pill input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.tee-pill label { display:flex; align-items:center; gap:6px; padding:9px 14px; border:1px solid var(--border2); border-radius:20px; font-size:0.60rem; color:var(--muted); cursor:pointer; transition:all 0.18s; white-space:nowrap; }
.tee-pill label .dot { width:8px; height:8px; border-radius:50%; }
.tee-pill input:checked + label { border-color:currentColor; }
.tee-pill.t1 input:checked + label { color:var(--tee1); background:rgba(74,130,216,0.1); }
.tee-pill.t2 input:checked + label { color:var(--tee2); background:rgba(200,168,75,0.1); }
.tee-pill.t3 input:checked + label { color:var(--tee3); background:rgba(224,128,128,0.1); }
.tee-pill label:active { transform:scale(0.97); }

.player-card { background:#ffffff; border:1px solid rgba(0,0,0,0.10); border-radius:var(--radius-sm); padding:16px; margin-bottom:10px; position:relative; }
/* Player add/remove controls */
.player-count-controls { display:flex; align-items:center; justify-content:center; gap:10px; margin:20px; }
.btn-player-add, .btn-player-remove { width:28px; height:28px; border-radius:50%; border:none; font-size:0.80rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; flex-shrink:0; }
.btn-player-add    { background:var(--green); color:#fff; }
.btn-player-add:active    { background:var(--gold2); transform:scale(0.95); }
.btn-player-remove { background:var(--red); color:#fff; }
.btn-player-remove:active { opacity:0.8; transform:scale(0.95); }
.btn-player-add:disabled, .btn-player-remove:disabled { opacity:0.3; cursor:default; transform:none; }
.player-count-label { font-size:0.72rem; color:var(--muted); font-weight:600; }
/* Player name dropdown */
.player-name-wrap { position:relative; }
.player-suggestions { position:absolute; top:100%; left:0; right:0; z-index:40; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius-sm); margin-top:2px; max-height:180px; overflow-y:auto; box-shadow:0 4px 16px rgba(0,0,0,0.12); display:none; }
.player-suggestion-item { padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.player-suggestion-item:last-child { border-bottom:none; }
.player-suggestion-item:active { background:var(--surface2); }
.player-suggestion-name { font-size:0.84rem; font-weight:600; color:var(--white); }
.player-suggestion-hcp  { font-size:0.72rem; color:var(--muted); }
.player-card:last-child { margin-bottom:0; }
.player-card-num { position:absolute; top:10px; right:14px; font-family:'Inter',sans-serif; font-size:2.2rem; font-weight:700; color:rgba(0,0,0,0.06); line-height:1; pointer-events:none; user-select:none; }

.team-label { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.team-label-num { font-family:'Inter',sans-serif; font-size:2.5rem; font-weight:700; color:#1a3d28; opacity:0.35; line-height:1; }
.team-name-input { background:transparent; border:none; border-bottom:2px solid rgba(0,0,0,0.18); border-radius:0; padding:4px 2px; font-family:'Inter',sans-serif; font-size:1.3rem; font-weight:600; color:#1a2820; width:100%; transition:border-color 0.2s; }
.team-name-input:focus { border-bottom-color:#2a7a48; outline:none; }
.team-name-input::placeholder { color:rgba(0,0,0,0.25); }

.fmt-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fmt-pill { position:relative; }
.fmt-pill input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.fmt-pill label { display:block; padding:10px 14px; border:1px solid var(--border2); border-radius:var(--radius-sm); font-size:0.65rem; color:var(--muted); cursor:pointer; transition:all 0.18s; line-height:1.5; }
.fmt-pill label strong { display:block; color:var(--cream); font-size:0.75rem; margin-bottom:2px; }
.fmt-pill input:checked + label { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
.fmt-pill input:checked + label strong { color:var(--gold2); }
.fmt-pill label:active { transform:scale(0.98); }

/* Holes toggle */
.holes-toggle { display:flex; gap:6px; align-items:center; }
.holes-toggle-btn { background:none; border:1px solid var(--border2); border-radius:20px; padding:5px 14px; font-family:'Roboto',sans-serif; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:all 0.18s; line-height:1; }
.holes-toggle-btn.active { background:var(--gold-dim); border-color:var(--gold); color:var(--gold); font-weight:500; }
.holes-toggle-btn:active { transform:scale(0.96); }
.holes-note { display:none; margin-top:10px; padding:9px 12px; background:rgba(200,168,75,0.06); border:1px solid rgba(200,168,75,0.18); border-radius:var(--radius-sm); font-size:0.62rem; color:var(--gold); line-height:1.6; }
.holes-note.visible { display:block; }
.par-hint { font-size:0.55rem; color:var(--muted); opacity:0.8; margin-top:2px; }

/* Game mode toggle */
.mode-toggle {
  display: flex;
  margin: 0 16px 16px;
  background: #1a3d28;
  border: 1px solid #143020;
  border-radius: var(--radius);
  overflow: hidden;
}
.mode-btn {
  flex: 1;
  padding: 14px 10px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
  position: relative;
}
.mode-btn + .mode-btn {
  border-left: 1px solid rgba(255,255,255,0.10);
}
.mode-btn.active {
  background: rgba(255,255,255,0.10);
}
.mode-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: #7ecf9e;
  border-radius: 2px 2px 0 0;
}
.mode-btn-icon { font-size: 1.4rem; line-height: 1; }
.mode-btn-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.80rem;
  font-weight: 600;
  color: rgba(255,255,255,0.60);
  transition: color 0.2s;
}
.mode-btn.active .mode-btn-label { color: #ffffff; }
.mode-btn-desc {
  font-size: 0.60rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--surface);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.mode-btn.active .mode-btn-desc { opacity: 1; color: var(--surface); }

/* Calc bar */
.calc-wrap {
  position: fixed; bottom:0; left:0; right:0;
  padding: 12px 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 8px);
  background: linear-gradient(to top, var(--bg) 50%, transparent);
  z-index: 50; max-width:480px; margin:0 auto; left:50%; transform:translateX(-50%); width:100%;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0.2s;
}
.calc-wrap.hidden { opacity:0; visibility:hidden; }
.btn-calc {
  width:100%; padding:18px; background:var(--gold); border:none; border-radius:var(--radius);
  font-family:'Roboto',sans-serif; font-size:0.8rem; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color:#eef1ec; cursor:pointer;
  transition:all 0.2s; box-shadow:0 8px 32px rgba(200,168,75,0.25);
  pointer-events: all;
}
.btn-calc:active { transform:scale(0.98); background:var(--gold2); }

.info-note { margin:0 16px 16px; padding:12px 14px; background:rgba(74,142,200,0.07); border:1px solid rgba(74,142,200,0.18); border-radius:var(--radius-sm); font-size:0.65rem; color:#7aace0; line-height:1.7; }

/* Reset button — lives in course section header */
.btn-reset-inline {
  background: none;
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 5px 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
  line-height: 1;
}
.btn-reset-inline:active { color: var(--red); border-color: rgba(200,90,74,0.4); transform: scale(0.95); }

/* ═══════════════════════════════════
   MY DATA TAB
═══════════════════════════════════ */
.mydata-header {
  padding: 52px 20px 20px;
  text-align: center;
}
.mydata-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem; font-weight: 700;
  color: var(--white); line-height: 1;
  letter-spacing: -0.01em;
}
.mydata-header h2 em { color: var(--gold); font-style: normal; }
.mydata-sub { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

.mydata-section-label {
  margin: 0 16px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mydata-section-label-text {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.mydata-section-label-count {
  font-size: 0.55rem;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 2px 8px;
}
.mydata-section-label::after { content:''; flex:1; height:1px; background:var(--border); }

/* Saved card */
.saved-card {
  margin: 0 16px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: fadeCardIn 0.3s ease both;
}
@keyframes fadeCardIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.saved-card-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  opacity: 0.7;
}
.saved-card-body { flex: 1; min-width: 0; }
.saved-card-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem; font-weight: 600;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.saved-card-meta {
  font-size: 0.6rem;
  color: var(--muted);
  line-height: 1.7;
}
.saved-card-meta strong { color: var(--cream); }
.saved-card-actions { display:flex; gap:6px; flex-shrink:0; }

.btn-card-load {
  background: var(--gold-dim);
  border: 1px solid rgba(200,168,75,0.3);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.btn-card-load:active { background: rgba(200,168,75,0.2); transform:scale(0.97); }

.btn-card-delete {
  background: none;
  border: 1px solid rgba(200,90,74,0.25);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 0.75rem;
  color: var(--red);
  cursor: pointer;
  transition: all 0.18s;
  display: flex; align-items: center;
}
.btn-card-delete:active { background: var(--red-dim); transform:scale(0.97); }

/* Empty state */
.saved-empty {
  margin: 0 16px 10px;
  padding: 20px;
  text-align: center;
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.7;
}
.saved-empty-icon { font-size: 1.6rem; opacity: 0.3; margin-bottom: 8px; display: block; }

/* Full slots note */
.slots-full-note {
  margin: 0 16px 10px;
  padding: 9px 12px;
  background: rgba(200,168,75,0.06);
  border: 1px solid rgba(200,168,75,0.18);
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  color: var(--gold);
  line-height: 1.6;
  display: none;
}
.slots-full-note.visible { display: block; }

.mydata-spacer { height: 24px; }

/* ═══════════════════════════════════
   MATCH OVERLAYS
*/
.match-overlay { position:fixed; inset:0; background:var(--bg); z-index:120; overflow-y:auto; transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.32,0,0,1); }
.match-overlay.open { transform:translateY(0); }
.match-overlay-inner { max-width:480px; margin:0 auto; padding:0 12px 100px; }
.match-overlay-header { display:flex; align-items:center; gap:12px; padding:16px 0 12px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.match-overlay-title { font-size:1.1rem; font-weight:700; color:var(--white); flex:1; }
.match-setup-steps { display:flex; align-items:center; gap:4px; }
.mss { width:24px; height:24px; border-radius:50%; background:var(--surface2); border:1px solid var(--border2); color:var(--muted); font-size:0.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.mss.active { background:var(--gold); border-color:var(--gold); color:#000; }
.mss.done { background:var(--green); border-color:var(--green); color:#fff; }
.mss-line { width:12px; height:1px; background:var(--border2); }

/* Gate cards */
.match-gate-body { padding-top:8px; }
.match-gate-sub { color:var(--muted); font-size:0.85rem; margin-bottom:20px; }
.match-gate-cards { display:flex; flex-direction:column; gap:12px; }
.match-gate-card { background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); padding:20px 16px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:4px; transition:border-color 0.2s, background 0.2s; }
.match-gate-card:active { background:var(--surface2); border-color:var(--gold); }
.match-gate-card-icon { font-size:1.8rem; margin-bottom:4px; }
.match-gate-card-title { font-size:1rem; font-weight:700; color:var(--white); }
.match-gate-card-desc { font-size:0.8rem; color:var(--muted); }

/* Setup steps */
.match-setup-step { padding-top:4px; }
.match-step-label { font-size:1rem; font-weight:700; color:var(--gold); margin-bottom:16px; }
.match-step-sublabel { font-size:0.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:10px; margin-top:4px; }
.match-holes-toggle { display:flex; gap:8px; margin-top:12px; }

/* Review card */
.ms-review-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:12px; }
.ms-review-card-title { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:8px; }
.ms-review-row { display:flex; justify-content:space-between; font-size:0.85rem; padding:3px 0; border-bottom:1px solid var(--border); }
.ms-review-row:last-child { border-bottom:none; }
.ms-review-row span:first-child { color:var(--muted); }
.ms-review-row span:last-child { color:var(--white); font-weight:600; }
.ms-review-hcp { display:inline-block; background:var(--gold-dim); color:var(--gold); border-radius:6px; padding:2px 8px; font-size:0.8rem; font-weight:700; margin-top:6px; }

/* Per-hole par grid */
.ms-par-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:3px; margin-bottom:8px; }
.ms-par-hole { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; }
.ms-par-hole-num { font-size:0.60rem; color:var(--muted); font-weight:600; }
.ms-par-btn-group { display:flex; flex-direction:column; gap:2px; width:100%; }
.ms-par-btn { background:var(--surface2); border:1px solid var(--border); border-radius:4px; color:var(--gold); font-size:0.68rem; font-weight:600; padding:3px 0; cursor:pointer; text-align:center; width:100%; }
.ms-par-btn.active { background:var(--gold); border-color:var(--gold); color:#fcfcfc; }
.ms-par-total-row { display:flex; justify-content:space-between; align-items:center; padding:8px 4px 0; border-top:1px solid var(--border); margin-top:4px; }

/* Course name row */
.ms-course-name-row { display:flex; align-items:flex-end; gap:8px; margin-bottom:12px; }
.ms-course-actions { display:flex; gap:6px; padding-bottom:1px; flex-shrink:0; }
/* Match setup team load picker */
.ms-team-load-bar { display:flex; align-items:center; gap:8px; margin-bottom:12px; background:var(--surface2); border-radius:var(--radius-sm); padding:8px 12px; }
.ms-team-load-label { font-size:0.72rem; color:var(--muted); flex:1; }
.ms-team-load-btn { font-size:0.72rem; font-weight:700; color:var(--green); background:none; border:1px solid var(--green); border-radius:var(--radius-sm); padding:4px 10px; cursor:pointer; white-space:nowrap; }
.ms-team-load-dropdown { background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:12px; }
.ms-team-load-item { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--border); }
.ms-team-load-item:last-child { border-bottom:none; }
.ms-team-load-item:active { background:var(--surface2); }
.ms-team-load-name { font-size:0.85rem; font-weight:700; color:var(--white); flex:1; }
.ms-team-load-meta { font-size:0.7rem; color:var(--muted); }

/* Reset button */
.ms-reset-btn { background:none; border:1px solid var(--border2); border-radius:var(--radius-sm); color:var(--muted); font-size:0.7rem; padding:6px 10px; cursor:pointer; }
.ms-reset-btn:active { color:var(--cream); border-color:var(--cream); }

/* Course dropdown */
.ms-course-dropdown { position:absolute; top:100%; left:0; right:0; z-index:50; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius-sm); margin-top:4px; overflow-y:auto; max-height:255px; box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.ms-course-dropdown-item { padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--border); }
.ms-course-dropdown-item:last-child { border-bottom:none; }
.ms-course-dropdown-item:active { background:var(--surface2); }
.ms-course-dropdown-name { font-size:0.80rem; font-weight:600; color:var(--gold2); }
.ms-course-dropdown-meta { font-size:0.72rem; color:var(--muted); margin-top:2px; }
.ms-course-dropdown-empty { padding:12px; font-size:0.8rem; color:var(--muted); text-align:center; }
.ms-course-dropdown-divider { padding:6px 12px; font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); background:var(--surface2); border-bottom:1px solid var(--border); }
.ms-course-badge { font-size:0.7rem; margin-right:3px; }
.ms-course-badge.shared   { opacity:1; }
.ms-course-badge.personal { opacity:0.5; }

/* Dual course */
.ms-dual-course-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin-bottom:6px; margin-top:4px; }
.ms-combined-par-row { display:flex; justify-content:space-between; align-items:center; background:var(--surface2); border-radius:var(--radius-sm); padding:8px 12px; margin-top:10px; }
.ms-combined-par-label { font-size:0.8rem; color:var(--muted); }
.ms-combined-par-val { font-size:0.95rem; font-weight:700; color:var(--gold); }

/* SI input */
/* SI tap-to-edit badge */
.ms-par-si-badge {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--cream);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 2px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
  display: block;
}
.ms-par-si-badge:active,
.ms-par-si-badge.editing { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }

/* SI editor popup */
.si-editor-popup { position:fixed; inset:0; z-index:250; display:flex; align-items:flex-end; }
.si-editor-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.si-editor-sheet { position:relative; width:100%; background:var(--surface); border-radius:20px 20px 0 0; padding:24px 20px 40px; max-width:480px; margin:0 auto; }
.si-editor-title { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:6px; }
.si-editor-hint { font-size:0.78rem; color:var(--muted); margin-bottom:16px; }
.si-editor-input { width:100%; background:var(--surface2); border:2px solid var(--gold); border-radius:var(--radius); color:var(--gold); font-size:2rem; font-weight:700; padding:12px; text-align:center; outline:none; -moz-appearance:textfield; margin-bottom:16px; font-family:'Inter',sans-serif; }
.si-editor-input::-webkit-outer-spin-button,
.si-editor-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.si-editor-btns { display:flex; gap:12px; }
.ms-par-index-label { font-size:0.48rem; color:var(--muted); text-align:center; margin-top:1px; }

/* Edit button in saved card */
.btn-card-edit { background:none; border:1px solid var(--border2); border-radius:var(--radius-sm); color:var(--muted); font-size:0.72rem; padding:6px 10px; cursor:pointer; }
.btn-card-edit:active { background:var(--surface2); color:var(--cream); }

/* Par summary in review */
.ms-par-summary { display:flex; flex-wrap:wrap; gap:4px; }
.ms-par-summary-hole { font-size:0.72rem; color:var(--muted); background:var(--surface2); border-radius:4px; padding:2px 5px; }
.ms-par-summary-hole strong { color:var(--white); margin-left:2px; }
.ms-par-summary-hole em { color:var(--muted); font-style:normal; font-size:0.65rem; margin-left:2px; opacity:0.7; }

/* Par/SI review table */
.ms-par-table { width:100%; border-collapse:collapse; font-size:0.72rem; }
.ms-par-table th { background:var(--surface2); color:var(--muted); font-weight:600; text-align:center; padding:4px 2px; border:1px solid var(--border); font-size:0.65rem; }
.ms-par-table td { text-align:center; padding:4px 2px; border:1px solid var(--border); color:var(--muted); }
.ms-par-table td strong { color:var(--white); font-weight:700; }
.ms-par-table-label { color:var(--muted); font-size:0.65rem; font-weight:600; text-transform:uppercase; background:var(--surface2); white-space:nowrap; padding:4px 6px !important; }

/* Live match return banner */
.live-match-banner { position:fixed; top:0; left:0; right:0; z-index:90; background:var(--green); color:#fff; display:flex; align-items:center; gap:10px; padding:10px 16px; cursor:pointer; font-size:0.82rem; font-weight:600; }
.live-match-banner-dot { width:8px; height:8px; border-radius:50%; background:#fff; animation:livepulse 1.2s infinite; flex-shrink:0; }
.live-match-banner-text { flex:1; }
.live-match-banner-arrow { font-size:1.2rem; opacity:0.8; }
@keyframes livepulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* End match button */
.btn-end-match { background:var(--red-dim); border:1px solid var(--red); border-radius:var(--radius-sm); color:var(--red); font-family:'Roboto',sans-serif; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; padding:10px 14px; cursor:pointer; }
.btn-end-match:active { background:var(--red); color:#fff; }

/* End match modal */
.end-match-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; }
.end-match-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.6); }
.end-match-sheet { position:relative; width:100%; background:var(--surface); border-radius:20px 20px 0 0; padding:24px 20px 40px; max-width:480px; margin:0 auto; }
.end-match-title { font-size:1.1rem; font-weight:700; color:var(--white); margin-bottom:10px; }
.end-match-body { font-size:0.85rem; color:var(--muted); margin-bottom:24px; line-height:1.5; }
.end-match-btns { display:flex; gap:12px; }
.end-match-btn-cancel { flex:1; background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radius); color:var(--cream); padding:14px; font-size:0.9rem; font-weight:600; cursor:pointer; }
.end-match-btn-confirm { flex:1; background:var(--red); border:none; border-radius:var(--radius); color:#fff; padding:14px; font-size:0.9rem; font-weight:600; cursor:pointer; }

/* Code display */
.match-code-body { display:flex; flex-direction:column; align-items:center; padding-top:16px; }
.match-code-label { color:var(--muted); font-size:0.85rem; margin-bottom:16px; text-align:center; }
.match-code-display { font-size:3.5rem; font-weight:800; letter-spacing:0.18em; color:var(--gold); font-family:'Inter',sans-serif; margin-bottom:20px; }
.match-code-qr { background:#fff; border-radius:12px; padding:12px; margin-bottom:20px; }
.match-code-share-btn { background:var(--surface2); border:1px solid var(--border2); color:var(--white); border-radius:var(--radius); padding:12px 28px; font-size:0.9rem; font-weight:600; cursor:pointer; margin-bottom:24px; }
.match-code-status { font-size:0.85rem; color:var(--muted); text-align:center; }
.match-code-waiting { color:var(--muted); }
.match-code-connected { color:var(--green); font-weight:600; }
.match-fallback-link { font-size:0.75rem; color:var(--muted); text-decoration:underline; cursor:pointer; opacity:0.6; }
.match-fallback-link:active { opacity:1; }

/* Live match read-only opponent column */
.sc-score-tap.live-readonly { cursor:default; opacity:0.75; }
.sc-score-tap.live-readonly:active { transform:none; }
.sc-score-tap-hint.live { font-size:0.65rem; color:var(--muted); }

/* Join match */
.join-code-input-wrap { display:flex; justify-content:center; margin-top:16px; }
.join-code-input { font-size:2.2rem; font-weight:800; letter-spacing:0.25em; text-align:center; text-transform:uppercase; background:var(--surface); border:2px solid var(--border2); border-radius:var(--radius); color:var(--gold); padding:16px 20px; width:100%; max-width:280px; font-family:'Inter',sans-serif; outline:none; }
.join-code-input:focus { border-color:var(--gold); }
.join-code-error { background:var(--red-dim); border:1px solid var(--red); border-radius:var(--radius-sm); color:var(--red); padding:10px 14px; font-size:0.85rem; margin-top:16px; text-align:center; }
.join-confirm-card { background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); padding:14px; margin-bottom:12px; }
.join-confirm-card-title { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:8px; }
.join-confirm-row { display:flex; justify-content:space-between; font-size:0.85rem; padding:3px 0; border-bottom:1px solid var(--border); }
.join-confirm-row:last-child { border-bottom:none; }
.join-confirm-row span:first-child { color:var(--muted); }
.join-confirm-row span:last-child { color:var(--white); font-weight:600; }
.join-confirm-hcp { display:inline-block; background:var(--gold-dim); color:var(--gold); border-radius:6px; padding:2px 8px; font-size:0.8rem; font-weight:700; margin-top:6px; }

/*
   RESULTS OVERLAY
═══════════════════════════════════ */
.results-overlay { position:fixed; inset:0; background:var(--bg); z-index:100; overflow-y:auto; transform:translateY(100%); transition:transform 0.4s cubic-bezier(0.32,0,0,1); }
.results-overlay.open { transform:translateY(0); }
.results-inner { max-width:480px; margin:0 auto; padding:0 0 80px; }
.results-back { position:sticky; top:0; background:linear-gradient(to bottom, var(--bg) 80%, transparent); padding:16px 16px 12px; z-index:10; }
.btn-back { background:none; border:1px solid var(--border2); border-radius:var(--radius-sm); color:var(--muted); font-family:'Roboto',sans-serif; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; padding:10px 16px; cursor:pointer; display:flex; align-items:center; gap:8px; transition:all 0.2s; }
.btn-back:active { color:var(--cream); }
.results-hero { padding:16px 20px 28px; text-align:center; }
.results-hero-flag { font-size:2rem; margin-bottom:10px; display:block; }
.results-event { font-family:'Inter',sans-serif; font-size:1.8rem; font-weight:700; color:var(--white); margin-bottom:6px; }
.results-meta { font-size:0.6rem; letter-spacing:0.1em; color:var(--muted); line-height:1.8; }
.result-card { margin:0 16px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; animation:slideUp 0.4s ease both; }
.result-card:nth-child(2) { animation-delay:0.05s; }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.result-card-top { padding:18px 20px 14px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.result-team-name { font-family:'Inter',sans-serif; font-size:1.5rem; font-weight:700; color:var(--white); line-height:1; flex:1; }
.result-hcp-block { text-align:right; flex-shrink:0; }
.result-hcp-num { font-family:'Inter',sans-serif; font-size:3rem; font-weight:700; color:var(--gold); line-height:1; }
.result-hcp-label { font-size:0.55rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.result-strokes { display:inline-flex; align-items:center; background:rgba(255,255,255,0.05); border-radius:20px; padding:3px 10px; font-size:0.65rem; color:var(--muted); margin-top:6px; }
.result-players { padding:0 20px 18px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; padding-top:12px; }
.result-player-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.result-player-name { font-size:0.82rem; color:var(--cream); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-player-meta { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.result-player-hcp { font-size:0.85rem; color:var(--gold); }
.tee-dot-sm { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.result-pct { font-size:0.6rem; color:var(--muted); min-width:36px; text-align:right; }
.result-vs-badge { display:flex; align-items:center; justify-content:center; padding:10px; background:var(--surface2); border-left:1px solid var(--border); border-right:1px solid var(--border); margin:0 16px 12px; border-radius:var(--radius-sm); gap:10px; font-size:0.65rem; color:var(--muted); letter-spacing:0.08em; }
.result-vs-diff { font-family:'Inter',sans-serif; font-size:1.5rem; font-weight:700; color:var(--cream); }

/* ═══════════════════════════════════
   TOAST
═══════════════════════════════════ */
.toast { position:fixed; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px); left:50%; transform:translateX(-50%) translateY(20px); padding:12px 20px; border-radius:var(--radius-sm); font-size:0.72rem; z-index:200; max-width:340px; text-align:center; line-height:1.5; opacity:0; pointer-events:none; transition:all 0.25s; backdrop-filter:blur(8px); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error { background:rgba(200,90,74,0.95); color:#fff; }
.toast.success { background:rgba(74,158,106,0.95); color:#fff; }

/* ═══════════════════════════════════
   AUTH OVERLAYS
═══════════════════════════════════ */
#authLoadingOverlay { position:fixed; inset:0; background:#134d2b; z-index:300; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; }
#authLoadingOverlay[style*="display: none"], #authLoadingOverlay[style*="display:none"] { pointer-events:none !important; }
.auth-spinner { width:30px; height:30px; border:2px solid rgba(255,255,255,0.25); border-top-color:#ffffff; border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.auth-spinner-text { font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.75); }

.modal-overlay { position:fixed; inset:0; background:rgba(5,15,8,0.88); backdrop-filter:blur(8px); z-index:200; display:flex; align-items:flex-end; justify-content:center; animation:fadeIn 0.2s ease both; }
.modal-overlay.hidden { display:none; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.auth-sheet { background:var(--surface); border:1px solid var(--border2); border-bottom:none; border-radius:var(--radius) var(--radius) 0 0; width:100%; max-width:480px; padding:32px 24px calc(32px + env(safe-area-inset-bottom)); position:relative; animation:sheetUp 0.32s cubic-bezier(0.32,0,0,1) both; max-height:90vh; overflow-y:auto; }
@keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.auth-sheet::before { content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:36px; height:4px; background:var(--border2); border-radius:2px; }
.auth-sheet::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold),transparent 70%); border-radius:var(--radius) var(--radius) 0 0; }
.auth-sheet-icon { text-align:center; font-size:1.8rem; margin-bottom:10px; }
.auth-sheet-title { font-family:'Inter',sans-serif; font-size:1.6rem; font-weight:700; color:var(--white); text-align:center; margin-bottom:4px; }
.auth-sheet-sub { font-size:0.58rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:24px; }
.btn-google { width:100%; padding:14px 16px; background:#fff; border:none; border-radius:var(--radius-sm); font-family:'Roboto',sans-serif; font-size:0.72rem; letter-spacing:0.04em; color:#ffffff; cursor:pointer; transition:all 0.18s; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; background:#4285F4; }
.btn-google:active { background:#3367D6; transform:scale(0.98); }
.auth-divider { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--border2); }
.auth-divider span { font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.auth-fields { display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
#pausedRoundConfirm.sub-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:none; align-items:center; justify-content:center; z-index:9999; padding:24px; }
#pausedRoundConfirm.sub-overlay.visible { display:flex; }
#pausedRoundConfirm .sub-dialog { background:#fff; border-radius:18px; padding:24px 22px; max-width:340px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,0.25); }
#pausedRoundConfirm .sub-dialog-title { font-size:1.15rem; font-weight:800; color:#1a1a1a; margin-bottom:10px; }
#pausedRoundConfirm .sub-dialog-text { font-size:0.9rem; color:#555; line-height:1.55; margin-bottom:20px; }
#pausedRoundConfirm .sub-dialog-actions { display:flex; gap:10px; }
#pausedRoundConfirm .sub-dialog-btn { flex:1; padding:12px; border-radius:10px; font-size:0.92rem; font-weight:700; cursor:pointer; border:1.5px solid transparent; }
#pausedRoundConfirm .sub-dialog-btn.no { background:#f2f2f2; color:#333; }
#pausedRoundConfirm .sub-dialog-btn.yes { background:#c0392b; color:#fff; }
.btn-auth { width:100%; padding:15px; background:var(--gold); border:none; border-radius:var(--radius-sm); font-family:'Roboto',sans-serif; font-size:0.72rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:#0a1a10; cursor:pointer; transition:all 0.18s; }

/* ── AUTH MODAL: larger inputs + readable button (EDIT THESE FOR THE LOGIN SCREEN) ── */
/* Email/password fields on the "Welcome back" / "Create account" modal.
   The base input rule only targets type=text/number, so email/password fell
   back to tiny browser defaults — this makes them full-size and legible. */
#authModal .auth-fields .field input {
  font-size: 16px;      /* ← larger font. 16px also stops iOS auto-zoom on focus */
  padding: 14px 14px;   /* ← taller box */
  line-height: 1.3;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  color: #1a1a1a;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}
#authModal .auth-fields .field input::placeholder { color: rgba(0,0,0,0.32); }
#authModal .auth-fields .field label { font-size: 0.72rem; }   /* ← EMAIL / PASSWORD label size */
/* SIGN IN / CREATE ACCOUNT button text colour (was dark → now white) */
#authModal .btn-auth { color: #ffffff; }
.btn-auth:active { transform:scale(0.98); background:var(--gold2); }
.btn-auth:disabled { opacity:0.5; pointer-events:none; }
.auth-switch { text-align:center; margin-top:14px; font-size:0.62rem; color:var(--muted); }
.auth-switch button { background:none; border:none; font-family:'Roboto',sans-serif; font-size:0.62rem; color:var(--gold); cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0; }
.auth-error { background:rgba(200,90,74,0.12); border:1px solid rgba(200,90,74,0.28); border-radius:var(--radius-sm); padding:10px 12px; font-size:0.65rem; color:#e08878; display:none; margin-bottom:12px; line-height:1.5; }
.auth-error.visible { display:block; }
/* ═══════════════════════════════════
   SCORECARD OVERLAY
═══════════════════════════════════ */
.scorecard-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 110;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32,0,0,1);
}
.scorecard-overlay.open { transform: translateY(0); }
.scorecard-inner { max-width: 480px; margin: 0 auto; padding: 0 0 100px; }

/* Sticky header bar */
.sc-header {
  position: sticky; top: 0;
  background: var(--bg);
  padding: 16px 16px 0;
  z-index: 10;
}
.sc-header-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 12px;
}
.sc-title-block {}
.sc-course-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--white); line-height: 1.2;
}
.sc-meta {
  font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  margin-top: 3px;
}

/* Live score banner */
.sc-score-banner {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.sc-score-item { text-align: center; }
.sc-score-label {
  font-size: 0.52rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 2px;
}
.sc-score-val {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem; font-weight: 700;
  color: var(--white); line-height: 1;
}
.sc-score-val.under { color: var(--green); }
.sc-score-val.over  { color: var(--red); }
.sc-score-val.even  { color: var(--gold); }
.sc-score-divider { width: 1px; height: 32px; background: var(--border2); }
.sc-holes-progress {
  font-size: 0.6rem; color: var(--muted);
  letter-spacing: 0.08em;
}

/* Hole rows */
.sc-holes { padding: 0 16px; }
.sc-hole-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 12px;
  transition: border-color 0.2s;
}
.sc-hole-row.complete { border-color: rgba(74,158,106,0.25); }

.sc-hole-num {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  color: rgba(0,0,0,0.25);
  text-align: center;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.sc-hole-row.complete .sc-hole-num { color: var(--gold); }

/* Par selector */
.sc-par-btns { display: flex; gap: 4px; }
.sc-par-btn {
  width: 34px; height: 34px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.85rem;
  color: #1a2820;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sc-par-btn.active {
  background: rgba(200,168,75,0.15);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 700;
}
.sc-par-btn:active { transform: scale(0.93); }

/* Score stepper */
.sc-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.sc-step-btn {
  width: 36px; height: 36px;
  background: none; border: none;
  font-size: 1.1rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sc-step-btn:active { background: rgba(255,255,255,0.06); color: var(--cream); }
.sc-score-display {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem; font-weight: 700;
  color: var(--white);
  min-width: 32px;
  text-align: center;
  line-height: 1;
}
.sc-score-display.birdie { color: var(--green); }
.sc-score-display.eagle  { color: var(--gold2); }
.sc-score-display.bogey  { color: #e0a080; }
.sc-score-display.double { color: var(--red); }

/* Vs par badge on each hole */
.sc-vs-par {
  font-size: 0.55rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 28px;
  text-align: right;
}
.sc-vs-par.under { color: var(--green); }
.sc-vs-par.over  { color: var(--red); }

/* Compact Save Round button (inline, not fixed) */
.btn-save-round-sm {
  background: var(--green);
  border: none; border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.btn-save-round-sm:active { opacity: 0.85; transform: scale(0.97); }
.btn-save-round-sm:disabled { opacity: 0.4; pointer-events: none; }

/* Bottom save button (inside sc-holes, after last hole) */
.sc-save-bottom {
  margin: 12px 16px 8px;
}

/* Carousel */
.sc-carousel { padding: 8px 16px 16px; display:flex; flex-direction:column; gap:16px; }

.sc-carousel-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sc-carousel-btn { background:var(--surface2); border:1px solid var(--border2); border-radius:50%; width:44px; height:44px; font-size:1.6rem; color:var(--cream); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.15s; }
.sc-carousel-btn:active { background:var(--gold-dim); color:var(--gold); }
.sc-carousel-btn:disabled { opacity:0.3; cursor:default; }
.sc-carousel-hole-info { text-align:center; flex:1; }
.sc-carousel-hole-num { font-size:1.3rem; font-weight:800; color:var(--white); font-family:'Inter',sans-serif; }
.sc-carousel-par-info { font-size:0.82rem; color:var(--muted); margin-top:2px; }

.sc-carousel-scores { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; }
.sc-carousel-team { display:flex; flex-direction:column; align-items:center; gap:8px; }
.sc-carousel-team-name { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.sc-carousel-score-tap { background:#fff; border:2px solid rgba(0,0,0,0.12); border-radius:16px; width:100%; min-height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s; gap:4px; padding:12px; }
.sc-carousel-score-tap:active { border-color:var(--gold); background:rgba(200,168,75,0.05); }
.sc-carousel-score-tap.live-readonly { cursor:default; border-color:rgba(0,0,0,0.08); background:#fafafa; }
.sc-carousel-score-tap.scored { border-color:rgba(74,158,106,0.4); }
.sc-carousel-score-val { font-size:2.8rem; font-weight:800; color:#1a2820; font-family:'Inter',sans-serif; line-height:1; }
.sc-carousel-score-val.eagle  { color:#1a6b3a; }
.sc-carousel-score-val.birdie { color:#2d9b5a; }
.sc-carousel-score-val.bogey  { color:#c87a3a; }
.sc-carousel-score-val.double { color:#c85a4a; }
.sc-carousel-score-hint { font-size:0.72rem; color:rgba(0,0,0,0.35); }
.sc-carousel-result-badge { font-size:1.1rem; font-weight:800; text-align:center; min-width:32px; }
.sc-carousel-result-badge.win  { color:var(--green); }
.sc-carousel-result-badge.loss { color:var(--red); }
.sc-carousel-result-badge.half { color:var(--muted); }

.sc-carousel-dots { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; padding:4px 0; }
.sc-carousel-dot { width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,0.12); transition:all 0.2s; }
.sc-carousel-dot.both  { background:var(--green); }
.sc-carousel-dot.mine  { background:var(--tee1); }
.sc-carousel-dot.current { outline:2px solid var(--gold); outline-offset:2px; }

.sc-all-holes-btn { background:none; border:1px solid var(--border2); border-radius:20px; color:var(--muted); font-size:0.78rem; padding:8px 20px; cursor:pointer; }
.sc-all-holes-btn:active { background:var(--surface2); color:var(--cream); }

/* All holes overlay */
.ah-hole-row { display:grid; grid-template-columns:28px 32px 1fr 1fr 28px; gap:8px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--border); cursor:pointer; }
.ah-hole-row:active { background:var(--surface2); }
.ah-hole-row.current-hole { background:var(--gold-dim); }
.ah-hole-num { font-size:0.9rem; font-weight:700; color:var(--muted); text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; }
.ah-hole-num.done { color:var(--gold); }
.ah-par { font-size:0.78rem; color:var(--muted); text-align:center; }
.ah-score { font-size:1rem; font-weight:700; text-align:center; color:#1a2820; }
.ah-score.eagle  { color:#1a6b3a; }
.ah-score.birdie { color:#2d9b5a; }
.ah-score.bogey  { color:#c87a3a; }
.ah-score.double { color:#c85a4a; }
.ah-score.empty  { color:rgba(0,0,0,0.2); font-weight:400; font-size:0.85rem; }
.ah-result { font-size:0.65rem; font-weight:700; text-align:right; }
.ah-result.win  { color:var(--green); }
.ah-result.loss { color:var(--red); }
.ah-result.half { color:var(--muted); }
.ah-stroke-dot { font-size:0.55rem; font-weight:700; padding:1px 3px; border-radius:3px; display:inline-block; }
.ah-stroke-dot.my  { color:#fff; background:var(--tee1); }
.ah-stroke-dot.opp { color:#fff; background:var(--red); }

/* Totals row */
.rv-totals-row { display:grid; grid-template-columns:28px 32px 1fr 1fr 28px; gap:8px; padding:12px 14px; border-top:2px solid var(--border); background:var(--surface2); }
.rv-totals-label { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); text-align:center; }
.rv-totals-par { font-size:0.85rem; font-weight:600; color:var(--muted); text-align:center; }
.rv-totals-score { font-size:1.1rem; font-weight:800; color:#1a2820; text-align:center; }
.btn-save-round-full {
  width: 100%; padding: 16px;
  background: var(--green);
  border: none; border-radius: var(--radius);
  font-family: 'Roboto', sans-serif;
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(74,158,106,0.25);
}
.btn-save-round-full:active { opacity: 0.88; transform: scale(0.99); }
.btn-save-round-full:disabled { opacity: 0.4; pointer-events: none; }

/* Column header row */
.sc-col-header {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 12px;
  padding: 6px 14px 6px;
  margin: 0 16px 4px;
}
.sc-col-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.9;
}
.sc-col-label.score-col { min-width: 110px; text-align: center; }
.sc-col-label.badge-col { min-width: 28px; text-align: right; }

/* Score tap target (replaces stepper) */
.sc-score-tap {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  min-width: 110px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s;
  flex-shrink: 0;
  gap: 8px;
}
.sc-score-tap:active { border-color: var(--gold); background: rgba(200,168,75,0.07); }
.sc-score-tap.active-input { border-color: var(--gold); background: rgba(200,168,75,0.07); }
.sc-score-tap-hint {
  font-size: 0.62rem;
  color: rgba(0,0,0,0.3);
  letter-spacing: 0.06em;
}

/* Number keyboard overlay */
.numpad-overlay {
  position: fixed; inset: 0;
  z-index: 130;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.numpad-overlay.open {
  pointer-events: all;
  opacity: 1;
}
.numpad-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
}
.numpad-sheet {
  position: relative; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  max-width: 480px; width: 100%;
  margin: 0 auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32,0,0,1);
}
.numpad-overlay.open .numpad-sheet { transform: translateY(0); }

.numpad-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.numpad-hole-label {
  font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.numpad-display {
  font-family: 'Inter', sans-serif;
  font-size: 2rem; font-weight: 700;
  color: var(--white); min-width: 60px;
  text-align: center; line-height: 1;
}
.numpad-display.has-val { color: var(--gold); }
.numpad-confirm {
  background: var(--gold);
  border: none; border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #0a1a10; cursor: pointer;
  transition: all 0.18s;
}
.numpad-confirm:active { background: var(--gold2); transform: scale(0.97); }

.numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.numpad-key {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  height: 58px;
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem; font-weight: 600;
  color: var(--cream);
  cursor: pointer;
  transition: all 0.12s;
  display: flex; align-items: center; justify-content: center;
}
.numpad-key:active { background: rgba(200,168,75,0.15); color: var(--gold); transform: scale(0.96); }
.numpad-key.del { font-size: 1rem; color: var(--muted); }
.numpad-key.del:active { color: var(--red); background: var(--red-dim); }
.numpad-key.zero { grid-column: span 2; }

/* ═══════════════════════════════════
   ROUND CARDS (My Data tab)
═══════════════════════════════════ */
.round-card {
  margin: 0 16px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.2s;
  animation: fadeCardIn 0.3s ease both;
}
.round-card:active { border-color: var(--border2); }

.round-card-icon { font-size: 1.4rem; flex-shrink: 0; opacity: 0.7; }
.round-card-body { flex: 1; min-width: 0; }
.round-card-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem; font-weight: 600;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.round-card-meta { font-size: 0.6rem; color: var(--muted); line-height: 1.7; }
.round-card-meta strong { color: var(--cream); }

.round-score-badge {
  flex-shrink: 0;
  text-align: center;
}
.round-score-num {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem; font-weight: 700;
  line-height: 1;
}
.round-score-num.under { color: var(--green); }
.round-score-num.over  { color: var(--red); }
.round-score-num.even  { color: var(--gold); }
.round-score-lbl {
  font-size: 0.5rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  margin-top: 2px;
}

.round-card-chevron {
  font-size: 0.75rem; color: var(--muted);
  opacity: 0.5; flex-shrink: 0;
}

/* ═══════════════════════════════════
   ROUND VIEW OVERLAY (read-only)
═══════════════════════════════════ */
.round-view-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 115;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32,0,0,1);
}
.round-view-overlay.open { transform: translateY(0); }
.round-view-inner { max-width: 480px; margin: 0 auto; padding: 0 0 40px; }

/* reuse sc-header, sc-score-banner, sc-col-header styles */
/* Read-only hole row */
.rv-hole-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 0 16px 8px;
  display: grid;
  grid-template-columns: 28px 40px 1fr 40px;
  align-items: center;
  padding: 11px 14px;
  gap: 10px;
}
.rv-hole-row.match {
  grid-template-columns: 28px 36px 1fr 1fr 40px;
  gap: 8px;
}
.rv-hole-row.complete { border-color: rgba(74,158,106,0.22); }

.rv-col-header {
  display: grid;
  grid-template-columns: 28px 40px 1fr 40px;
  gap: 10px;
  padding: 6px 14px 6px;
  margin: 0 16px 4px;
}
.rv-col-header.match {
  grid-template-columns: 28px 36px 1fr 1fr 40px;
  gap: 8px;
}

.rv-hole-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem; font-weight: 700;
  color: var(--muted); text-align: center;
}
.rv-par { font-size: 0.8rem; color: var(--muted); text-align: center; }
.rv-score {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--white); text-align: center;
}
.rv-score.birdie { color: var(--green); }
.rv-score.eagle  { color: var(--gold2); }
.rv-score.bogey  { color: #e0a080; }
.rv-score.double { color: var(--red); }
.rv-score.empty  { color: rgba(255,255,255,0.15); font-size: 0.8rem; }
.rv-badge { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: right; font-weight: 600; }
.rv-badge.under { color: var(--green); }
.rv-badge.over  { color: var(--red); }
.rv-badge.even  { color: var(--muted); }
.rv-badge.empty { color: transparent; }
.rv-badge.win   { color: var(--green); }
.rv-badge.loss  { color: var(--red); }
.rv-badge.half  { color: var(--muted); }
/* ═══════════════════════════════════
   MATCH SCORECARD ADDITIONS
═══════════════════════════════════ */

/* Match banner — replaces single banner in match mode */
.sc-match-banner {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.sc-match-team {
  flex: 1;
  text-align: center;
  padding: 4px 8px;
}
.sc-match-team-name {
  font-size: 0.52rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-match-score {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem; font-weight: 700;
  color: var(--white); line-height: 1;
}
.sc-match-score.under { color: var(--green); }
.sc-match-score.over  { color: var(--red); }
.sc-match-score.even  { color: var(--gold); }
.sc-match-hcp {
  font-size: 0.5rem; color: var(--muted);
  margin-top: 2px; letter-spacing: 0.08em;
}
.sc-match-total {
  font-size: 0.58rem; color: var(--muted);
  margin-top: 3px; letter-spacing: 0.05em;
  min-height: 0.8rem;
}
.sc-match-divider {
  width: 1px; background: var(--border2);
  margin: 4px 0;
}
.sc-match-status {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 4px 12px;
  min-width: 72px;
}
.sc-match-status-label {
  font-size: 0.5rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 3px;
}
.sc-match-status-val {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem; font-weight: 700;
  color: var(--cream); line-height: 1.2;
  text-align: center;
}
.sc-match-status-val.leading { color: var(--green); }
.sc-match-status-val.trailing { color: var(--red); }
.sc-match-status-val.square { color: var(--gold); }

/* Match hole row — dual score columns */
.sc-hole-row.match {
  grid-template-columns: 28px auto 1fr 1fr 28px;
  gap: 8px;
  padding: 10px 12px;
  align-items: center;
}
.sc-score-tap.my-team  { border-color: rgba(74,130,216,0.35); width:100%; }
.sc-score-tap.opp-team { border-color: rgba(200,90,74,0.25);  width:100%; }
.sc-score-tap.my-team:active  { border-color: var(--tee1); background: rgba(74,130,216,0.1); }
.sc-score-tap.opp-team:active { border-color: var(--red);  background: rgba(200,90,74,0.08); }
.sc-score-tap.my-team.active-input  { border-color: var(--tee1); background: rgba(74,130,216,0.1); }
.sc-score-tap.opp-team.active-input { border-color: var(--red);  background: rgba(200,90,74,0.08); }

/* Hole net result badge (match mode) */
.sc-hole-result {
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.05em; text-align: right;
  min-width: 28px;
}
.sc-hole-result.win  { color: var(--green); }
.sc-hole-result.loss { color: var(--red); }
.sc-hole-result.half { color: var(--muted); }

/* Match col header */
.sc-col-header.match {
  grid-template-columns: 28px auto 1fr 1fr 28px;
  gap: 8px;
  padding: 6px 12px 6px;
  margin: 0 16px 4px;
}
.sc-col-label.dual { text-align: center; }

/* Stroke indicator dot on hole number */
.sc-stroke-dot {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  text-align: center;
  margin-top: 3px;
  line-height: 1;
  padding: 1px 4px;
  border-radius: 4px;
}
.sc-stroke-dot.my  { color: #fff; background: var(--tee1); }
.sc-stroke-dot.opp { color: #fff; background: var(--red); }

/* ===== block 2 (was index.html line 1620, id="newui-styles") ===== */

/* ===== NEW-UI SCREEN SYSTEM ===== */
.screen{position:fixed;inset:0;z-index:100;display:none;overflow:hidden;background:#000;
  --green:#1a6b3c;--green-dark:#0e3d22;--green-deep:#134d2b;--green-hover:#145530;
  --gold:#F5A623;--gold-soft:#ffd06b;--bg:#ffffff;--surface:#f4f9f6;--canvas-tint:#f0f4f1;
  --text:#111111;--text-2:#444444;--text-3:#777777;
  --text-primary:#111111;--text-secondary:#444444;--text-muted:#777777;
  --card-shadow:0 2px 8px rgba(0,0,0,0.08);--ui-bg:#ffffff;}
.screen.active{display:block;}
/* ===== Screen 01 · Login ===== */
#screen-login { background:#134d2b; }   /* R1: green, never black, while the photo loads */
#screen-login .splash {position: absolute;
    inset: 0;
    background-color: #134d2b;
    background-image: url('icons/login-bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;}
#screen-login .splash::after {content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.28) 35%,
      rgba(0, 0, 0, 0.38) 70%,
      rgba(0, 0, 0, 0.45) 100%
    );
    pointer-events: none;}
#screen-login .splash-inner {position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 28px;}
#screen-login .logo-block {position: absolute;
    top: 22%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;}
#screen-login .crown {width: 66px;
    height: auto;
    margin-bottom: 8px;
    display: block;}
#screen-login .wordmark {font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 42px;
    letter-spacing: -0.02em;
    color: #ffffff;
    line-height: 1;
    margin: 0;}
#screen-login .tagline {margin-top: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 0.9;}
#screen-login .cta-wrap {position: absolute;
    top: 65%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 28px;}
#screen-login .cta {width: 100%;
    max-width: 320px;
    height: 56px;
    border-radius: 28px;
    background: #1a6b3c;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms ease;}
#screen-login .cta:hover,
#screen-login .cta:active {background: #145530;}
#screen-login .cta .arrow {display: inline-block;
    margin-left: 2px;
    flex-shrink: 0;}
#screen-login .footer-text {margin-top: 14px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #ffffff;
    opacity: 0.6;
    line-height: 1.45;}
#screen-login .footer-text .line2 {margin-top: 6px;}
#screen-login .footer-text a {color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;}
/* ===== Screen 02 · Home ===== */
#screen-home{flex-direction:column;background:var(--bg);}
#screen-home.active{display:flex;}
#screen-home .app-header {height: 56px; flex: 0 0 56px;
    background: var(--green);
    display: flex; align-items: center;
    padding: 0 16px;
    position: relative;}
#screen-home .logo {position: absolute; left: 16px; top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: 6px;}
#screen-home .logo .crown {display: block; width: 26px; height: 26px; object-fit: contain;}
#screen-home .logo .wordmark {font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 22px;
    color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-home .header-icons {position: absolute; right: 16px; top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: 12px;}
#screen-home .icon-btn {width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.9);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: transparent;}
#screen-home .icon-btn svg {display: block;}
#screen-home .cover {height: 200px; flex: 0 0 200px;
    position: relative;
    background-color: #2d6a4f;
    background-image: url('icons/home-cover.png');
    background-size: cover;
    background-position: center 22%;
    overflow: hidden;}
#screen-home .cover::after {content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;}
#screen-home .cover-cam {position: absolute;
    right: 12px; bottom: 12px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
    backdrop-filter: blur(4px);}
#screen-home .cover-cam svg {color: #fff;}
#screen-home .avatar {position: absolute;
    left: 16px; bottom: 36px;
    width: 78px; height: 78px;
    border-radius: 50%;
    border: 3px solid #fff;
    overflow: hidden;
    background: linear-gradient(180deg, #bfe4ff 0%, #cfeeff 50%, #6dbf6e 50%, #4ea757 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    z-index: 3;}
#screen-home .avatar > .sky-cloud {position: absolute;
    top: 16px; left: 14px;
    width: 22px; height: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 6px -4px 0 -1px #fff, 14px -1px 0 -1px #fff;
    opacity: 0.95;}
#screen-home .avatar > .sky-hill {position: absolute;
    left: 18px; bottom: 4px;
    width: 36px; height: 14px;
    background: #88c98a;
    border-radius: 50% 50% 4px 4px / 80% 80% 4px 4px;}
#screen-home .avatar-cam {position: absolute;
    left: 70px; bottom: 34px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--green-dark);
    border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);}
#screen-home .avatar-cam svg {color: #fff;}
#screen-home .cover-username {position: absolute;
    left: 16px; bottom: 8px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 20px;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.55);
    z-index: 3;}
#screen-home .stats-bar {height: 44px; flex: 0 0 44px;
    background: var(--green-deep);
    display: flex; align-items: center;
    padding: 0 16px;
    gap: 12px;
    position: relative;}
#screen-home .buddies-stack {display: flex; align-items: center;}
#screen-home .buddies-stack .bud {width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -8px;
    background-size: cover; background-position: center;}
#screen-home .buddies-stack .bud:first-child {margin-left: 0;}
#screen-home .buddies-stack .bud.b1 {background: linear-gradient(135deg, #f4a261, #e76f51);}
#screen-home .buddies-stack .bud.b2 {background: linear-gradient(135deg, #2a9d8f, #264653);}
#screen-home .buddies-stack .bud.b3 {background: linear-gradient(135deg, #e9c46a, #f4a261);}
#screen-home .buddies-count {color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 600; font-size: 13px;
    letter-spacing: 0.06em;}
#screen-home .buddies-count strong {font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 15px;
    margin-right: 4px;}
#screen-home .hcp {margin-left: auto;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 15px;
    letter-spacing: 0.04em;}
#screen-home .hcp .small {font-weight: 500; font-size: 11px;
    opacity: 0.9; margin-left: 2px;}
#screen-home .scroll-area {flex: 1 1 auto;
    overflow-y: auto; overflow-x: hidden;
    background: var(--bg);
    padding-bottom: 90px;}
#screen-home .scroll-area::-webkit-scrollbar {width: 0;}
#screen-home .section {margin: 16px 16px 0;
    display: flex; align-items: center;
    background: transparent; border: 0; border-radius: 0; overflow: visible;}
#screen-home .section-tag {display: inline-flex; align-items: center;
    height: 28px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 16px;
    color: #111;
    background: transparent;
    white-space: nowrap;
    letter-spacing: 0.1px;}
#screen-home .section-tag.gold {color: #111;}
#screen-home .row-wrap {margin: 10px 0 0;
    position: relative;}
#screen-home .side-arrow {position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
    z-index: 2;
    pointer-events: none;}
#screen-home .side-arrow.left {left: 0;}
#screen-home .side-arrow.right {right: 0;}
#screen-home .side-arrow svg {display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));}
#screen-home .row-card {background: var(--green);
    border-radius: 0;
    padding: 12px 44px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--card-shadow);}
#screen-home .row-card::-webkit-scrollbar {display: none;}
#screen-home .row-card {scrollbar-width: none;}
#screen-home .match {border: 1.5px solid rgba(255,255,255,0.85);
    border-radius: 10px;
    padding: 12px 14px 10px;
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 10px;
    row-gap: 2px;
    min-width: 0;
    position: relative;
    width: 200px;
    flex: 0 0 200px;
    scroll-snap-align: start;}
#screen-home .badge {grid-row: 1 / span 3;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--green-deep);
    border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 15px;
    align-self: center;
    flex-shrink: 0;}
#screen-home .badge.win {background: #2e8a4d;}
#screen-home .badge.loss {background: #c0392b;}
#screen-home .badge.duo {background: #2e8a4d; font-size: 12px; letter-spacing: -0.02em;}
#screen-home .match-course {grid-column: 2;
    font-family: 'Roboto', sans-serif;
    font-weight: 500; font-size: 13.5px;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;}
#screen-home .match-line {grid-column: 2;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: rgba(255,255,255,0.9);
    line-height: 1.25;
    white-space: nowrap;}
#screen-home .match-line .tlhcp {font-weight: 700; font-size: 10.5px;
    color: var(--gold);
    margin-left: 4px;
    letter-spacing: 0.04em;}
#screen-home .match-date {grid-column: 2;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    color: rgba(255,255,255,0.7);
    line-height: 1.25;}
#screen-home .match-team {grid-column: 1 / -1;
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 12px;
    color: var(--gold);
    text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#screen-home .match-team .vs {color: rgba(255,255,255,0.85); font-weight: 500; margin: 0 4px;}
#screen-home .tr-avatars {display: inline-flex; margin-left: 8px; vertical-align: middle;}
#screen-home .tr-av {width: 18px; height: 18px; border-radius: 50%; background-size: cover; background-position: center; border: 1.5px solid var(--green, #1a6b3c); margin-left: -6px; box-shadow: 0 0 0 1px rgba(255,255,255,0.4);}
#screen-home .tr-av:first-child {margin-left: 0;}
#screen-home .match.cta {grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    padding: 16px 12px;
    border-style: solid;
    width: 160px;
    flex: 0 0 160px;}
#screen-home .match.cta .label {font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 20px;
    color: var(--gold);
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.05;}
#screen-home .teams-wrap {margin: 10px 0 0;
    position: relative;}
#screen-home .teams-card {background: var(--green);
    border-radius: 0;
    padding: 12px 44px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--card-shadow);}
#screen-home .teams-card::-webkit-scrollbar {display: none;}
#screen-home .teams-card {scrollbar-width: none;}
#screen-home .team-card {border: 1.5px solid rgba(245,166,35,0.9);
    border-radius: 10px;
    padding: 12px;
    width: 160px;
    flex: 0 0 160px;
    height: 104px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: space-between;
    scroll-snap-align: start;}
#screen-home .team-card .name {font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    color: var(--gold);
    letter-spacing: 0.02em;}
#screen-home .team-card .icon-row {display: flex; align-items: center; gap: 8px;}
#screen-home .team-card .member {width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    background-size: cover;}
#screen-home .team-card .member.m1 {background: linear-gradient(135deg, #e9c46a, #f4a261);}
#screen-home .team-card .member.m2 {background: linear-gradient(135deg, #88c98a, #4ea757);}
#screen-home .team-card.add {border-style: dashed;
    justify-content: center;
    gap: 8px;}
#screen-home .team-card.add .plus {width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);}
#screen-home .team-card.add .name {color: var(--gold);}
#screen-home .dock {position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 86px;
    z-index: 15;
    pointer-events: none;}
#screen-home .bottom-nav {position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 64px;
    background: var(--green);
    display: grid;
    grid-template-columns: 1fr 1fr 96px 1fr 1fr;
    align-items: center;
    pointer-events: auto;
    padding-bottom: 6px;}
#screen-home .nav-tab {display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    color: #fff; cursor: pointer;
    opacity: 0.85;
    position: relative;}
#screen-home .nav-tab.active {opacity: 1;}
#screen-home .nav-tab.active::before {content: "";
    position: absolute; top: 2px;
    width: 22px; height: 3px;
    border-radius: 2px;
    background: var(--gold);}
#screen-home .nav-tab img.nav-icon {filter: brightness(0) invert(1);}
#screen-home .nav-tab .label {font-family: 'Inter', sans-serif;
    font-weight: 500; font-size: 9.5px;
    letter-spacing: 0.02em;}
#screen-home .nav-icon {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-home .play-btn {position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4;}
#screen-home .play-btn span {display: block;}
/* ===== Screen 03 · Choose Game ===== */
#screen-choosegame{flex-direction:column;background:var(--bg);}
#screen-choosegame.active{display:flex;}
#screen-choosegame .app-header {height: 56px; flex: 0 0 56px;
    background: var(--green);
    display: flex; align-items: center;
    padding: 0 16px;
    position: relative;}
#screen-choosegame .logo {position: absolute; left: 16px; top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: 6px;}
#screen-choosegame .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-choosegame .logo .wordmark {font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 20px;
    color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-choosegame .header-icons {position: absolute; right: 16px; top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: 12px;}
#screen-choosegame .icon-btn {width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.9);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: transparent; padding: 0;
    cursor: pointer;}
#screen-choosegame .icon-btn svg {display: block;}
#screen-choosegame .body-area {flex: 1 1 auto;
    background: var(--canvas-tint);
    padding: 12px 12px 86px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;}
#screen-choosegame .game-card {flex: 1 1 0;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background-color: #2d6a4f;
    background-size: cover;
    background-position: center center;
    box-shadow: var(--card-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease;
    border: 0;
    padding: 0;
    width: 100%;}
#screen-choosegame .game-card::before {content: "";
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.38);
    pointer-events: none;}
#screen-choosegame .game-card:active {transform: scale(1.02);}
#screen-choosegame .game-label {position: relative;
    z-index: 2;
    background: rgba(19,77,43,0.82);
    border-radius: 12px;
    padding: 10px 24px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.2px;}
#screen-choosegame .game-label span {display: block;}
#screen-choosegame .game-card.team-round {background-image: url('icons/cg-team-round.jpg');}
#screen-choosegame .game-card.team-match {background-image: url('icons/cg-team-match.jpg');}
#screen-choosegame .game-card.join-match {background-image: url('icons/cg-join-match.jpg');}
#screen-choosegame .dock {position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 86px;
    z-index: 50;
    pointer-events: none;}
#screen-choosegame .bottom-nav {position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 72px;
    background: var(--green);
    display: grid;
    grid-template-columns: 1fr 1fr 96px 1fr 1fr;
    align-items: center;
    pointer-events: auto;
    padding-bottom: 6px;}
#screen-choosegame .nav-tab {display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    color: #fff;
    cursor: pointer;
    opacity: 0.65;
    position: relative;
    background: transparent; border: 0; padding: 0;}
#screen-choosegame .nav-tab.active {opacity: 1;}
#screen-choosegame .nav-spacer {position: relative; align-self: stretch;}
#screen-choosegame .nav-spacer.active::before {content: "";
    position: absolute; top: 4px; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 3px;
    border-radius: 2px;
    background: var(--gold);}
#screen-choosegame .nav-tab.active::before {content: "";
    position: absolute; top: 4px;
    width: 22px; height: 3px;
    border-radius: 2px;
    background: var(--gold);}
#screen-choosegame .nav-tab svg {display: block;}
#screen-choosegame .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-choosegame .nav-tab .label {font-family: 'Inter', sans-serif;
    font-weight: 500; font-size: 10px;
    letter-spacing: 0.02em;
    color: #fff;}
#screen-choosegame .play-btn {position: absolute;
    left: 50%; bottom: 22px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 11px;
    line-height: 1.05;
    letter-spacing: 0.06em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4;
    text-transform: uppercase;}
#screen-choosegame .play-btn:hover,
#screen-choosegame .play-btn:active {background: var(--green-hover);}
#screen-choosegame .play-btn span {display: block;}
/* ===== accourse (AC01) ===== */
#screen-accourse{flex-direction:column;background:var(--bg);}
#screen-accourse.active{display:flex;}
#screen-accourse .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-accourse .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-accourse .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-accourse .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-accourse .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-accourse .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-accourse .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-accourse .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-accourse .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-accourse .body-area {flex: 1 1 auto; background: #fff; padding: 24px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-accourse .progress-bar {display: flex; align-items: center; gap: 6px;
    margin-bottom: 24px;}
#screen-accourse .progress-step {flex: 1; height: 4px; border-radius: 2px;
    background: #e0e0e0; transition: background 0.2s;}
#screen-accourse .progress-step.active {background: var(--green);}
#screen-accourse .progress-step.done {background: var(--gold);}
#screen-accourse .progress-label {font-family: 'Inter', sans-serif; font-size: 11px;
    color: var(--text-3); white-space: nowrap;}
#screen-accourse .form-section {margin-bottom: 28px;}
#screen-accourse .section-label {font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; display: block;}
#screen-accourse .text-field {width: 100%; height: 48px;
    border: 1.5px solid var(--green); border-radius: 8px;
    padding: 0 14px; background: #fff;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
    outline: none;}
#screen-accourse .text-field:focus {border-color: var(--gold); border-width: 2px;}
#screen-accourse .text-field::placeholder {color: var(--text-3);}
#screen-accourse .dropdown-wrap {position: relative;}
#screen-accourse .dropdown-field {width: 100%; height: 48px;
    border: 1.5px solid var(--green); border-radius: 8px;
    padding: 0 36px 0 14px;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
    background: #fff; appearance: none; outline: none; cursor: pointer;}
#screen-accourse .dropdown-field.placeholder {color: var(--text-3);}
#screen-accourse .chev-icon {position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--green); pointer-events: none;}
#screen-accourse .toggle-group {display: flex; gap: 10px;}
#screen-accourse .toggle-pill {flex: 1; height: 48px; border-radius: 8px;
    border: 1.5px solid var(--green);
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    cursor: pointer; background: #fff; color: var(--green);
    display: flex; align-items: center; justify-content: center;
    gap: 8px; transition: all 0.15s;}
#screen-accourse .toggle-pill.active {background: var(--green); color: #fff; border-color: var(--green);}
#screen-accourse .readonly-field {width: 100%; height: 48px;
    border: 1.5px solid #ddd; border-radius: 8px;
    padding: 0 14px; background: #f9f9f9;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-3);
    display: flex; align-items: center;}
#screen-accourse .helper {font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-top: 6px;}
#screen-accourse .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-accourse .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-accourse .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-accourse .nav-tab.active {opacity: 1;}
#screen-accourse .nav-spacer {position: relative; align-self: stretch;}
#screen-accourse .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-accourse .nav-tab svg {display: block;}
#screen-accourse .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-accourse .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-accourse .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-accourse .play-btn span {display: block;}
/* ===== acloops (AC02) ===== */
#screen-acloops{flex-direction:column;background:var(--bg);}
#screen-acloops.active{display:flex;}
#screen-acloops .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-acloops .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-acloops .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-acloops .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-acloops .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-acloops .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-acloops .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-acloops .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-acloops .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-acloops .body-area {flex: 1 1 auto; background: #fff; padding: 24px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-acloops .progress-bar {display: flex; align-items: center; gap: 6px; margin-bottom: 24px;}
#screen-acloops .progress-step {flex: 1; height: 4px; border-radius: 2px; background: #e0e0e0;}
#screen-acloops .progress-step.done {background: var(--gold);}
#screen-acloops .progress-step.active {background: var(--green);}
#screen-acloops .progress-label {font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); white-space: nowrap;}
#screen-acloops .loop-card {border: 1.5px solid var(--green); border-radius: 10px;
    padding: 16px; margin-bottom: 20px;
    background: #fff;}
#screen-acloops .loop-card-header {font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    color: var(--green); text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 14px;}
#screen-acloops .section-label {font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; display: block;}
#screen-acloops .text-field {width: 100%; height: 48px;
    border: 1.5px solid var(--green); border-radius: 8px;
    padding: 0 14px; background: #fff;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text);
    outline: none; margin-bottom: 14px;}
#screen-acloops .text-field:focus {border-color: var(--gold); border-width: 2px;}
#screen-acloops .text-field::placeholder {color: var(--text-3);}
#screen-acloops .toggle-group {display: flex; gap: 10px;}
#screen-acloops .toggle-pill {flex: 1; height: 44px; border-radius: 8px;
    border: 1.5px solid var(--green);
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    cursor: pointer; background: #fff; color: var(--green);
    transition: all 0.15s;}
#screen-acloops .toggle-pill.active {background: var(--gold); color: var(--green); border-color: var(--gold);}
#screen-acloops .info-note {background: #f0f7f3; border: 1px solid #c8e6c9;
    border-radius: 8px; padding: 12px 14px;
    font-family: 'Inter', sans-serif; font-size: 12px;
    color: var(--text-2); line-height: 1.6;
    margin: 0 0 20px;}
#screen-acloops .info-note strong {color: var(--green);}
#screen-acloops #loop2Card {display: none;}
#screen-acloops .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-acloops .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-acloops .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-acloops .nav-tab.active {opacity: 1;}
#screen-acloops .nav-spacer {position: relative; align-self: stretch;}
#screen-acloops .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-acloops .nav-tab svg {display: block;}
#screen-acloops .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-acloops .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-acloops .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-acloops .play-btn span {display: block;}
/* ===== aclayout (AC03) ===== */
#screen-aclayout{flex-direction:column;background:var(--bg);}
#screen-aclayout.active{display:flex;}
#screen-aclayout .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-aclayout .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-aclayout .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-aclayout .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-aclayout .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-aclayout .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-aclayout .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-aclayout .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-aclayout .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-aclayout .body-area {flex: 1 1 auto; background: #fff; padding: 24px 16px 92px; overflow-y: auto; min-height: 0; overflow-x: hidden;}
#screen-aclayout .progress-bar {display: flex; align-items: center; gap: 6px; margin-bottom: 22px;}
#screen-aclayout .progress-step {flex: 1; height: 4px; border-radius: 2px; background: #e0e0e0;}
#screen-aclayout .progress-step.done {background: var(--gold);}
#screen-aclayout .progress-step.active {background: var(--green);}
#screen-aclayout .progress-label {font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); white-space: nowrap;}
#screen-aclayout .section-label {font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; display: block;}
#screen-aclayout .loop-name-field {display: flex; align-items: center; width: 100%; max-width: 100%; height: 48px; border: 1.5px solid var(--green); border-radius: 8px; padding: 0 14px; background: #fff; margin-bottom: 22px;}
#screen-aclayout .loop-name-field input {border: none; outline: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); flex: 1;}
#screen-aclayout .loop-name-field input::placeholder {color: var(--text-3);}
#screen-aclayout .tee-block {margin-bottom: 22px;}
#screen-aclayout .tee-header {display: flex; align-items: center; gap: 8px; margin-bottom: 12px;}
#screen-aclayout .tee-dot {width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;}
#screen-aclayout .tee-dot.champion {background: var(--tee1);}
#screen-aclayout .tee-dot.medal {background: var(--tee2);}
#screen-aclayout .tee-dot.senior{background:#2f6fd0;}
#screen-aclayout .tee-dot.forward {background: var(--tee3);}
#screen-aclayout .tee-name {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text);}
#screen-aclayout .rsp-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 100%;}
#screen-aclayout .rsp-cell {display: flex; flex-direction: column; gap: 4px;}
#screen-aclayout .rsp-label {font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase;}
#screen-aclayout .rsp-input {height: 48px; width: 100%; border: 1.5px solid var(--green); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); background: #fff; cursor: pointer; outline: none;}
#screen-aclayout .rsp-input:focus {border-color: var(--gold); border-width: 2px;}
#screen-aclayout .rsp-input.empty {color: var(--text-3); font-size: 13px; font-weight: 400;}
#screen-aclayout input.rsp-input {text-align: center;}
#screen-aclayout input.rsp-input::placeholder {color: var(--text-3); font-size: 13px; font-weight: 400;}
#screen-aclayout .divider {height: 1px; background: rgba(0,0,0,0.07); margin: 20px 0;}
#screen-aclayout .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-aclayout .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-aclayout .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-aclayout .nav-tab.active {opacity: 1;}
#screen-aclayout .nav-spacer {position: relative; align-self: stretch;}
#screen-aclayout .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-aclayout .nav-tab svg {display: block;}
#screen-aclayout .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-aclayout .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-aclayout .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-aclayout .play-btn span {display: block;}
/* ===== acparsi (AC04) ===== */
#screen-acparsi{flex-direction:column;background:var(--bg);}
#screen-acparsi.active{display:flex;}
#screen-acparsi .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-acparsi .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-acparsi .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-acparsi .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-acparsi .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-acparsi .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-acparsi .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-acparsi .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-acparsi .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-acparsi .body-area {flex: 1 1 auto; background: #fff; padding: 16px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-acparsi .progress-bar {display: flex; align-items: center; gap: 6px; margin-bottom: 16px;}
#screen-acparsi .progress-step {flex: 1; height: 4px; border-radius: 2px; background: #e0e0e0;}
#screen-acparsi .progress-step.done {background: var(--gold);}
#screen-acparsi .progress-step.active {background: var(--green);}
#screen-acparsi .progress-label {font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); white-space: nowrap;}
#screen-acparsi .loop-field {display: flex; align-items: center; width: 100%; height: 46px; border: 1.5px solid var(--green); border-radius: 8px; padding: 0 14px; background: #fff; margin-bottom: 16px;}
#screen-acparsi .loop-field input {border: none; outline: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); flex: 1;}
#screen-acparsi .loop-field input::placeholder {color: var(--text-3);}
#screen-acparsi .section-label {font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px;}
#screen-acparsi .hole-grid {display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: 4px;}
#screen-acparsi .hole-num {height: 26px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-2);}
#screen-acparsi .par-row {display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: 3px;}
#screen-acparsi .par-btn {height: 30px; width: 100%; border-radius: 6px; border: 1.5px solid var(--green); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; background: #fff; color: var(--green); display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.1s;}
#screen-acparsi .par-btn.active {background: var(--green); color: #fff;}
#screen-acparsi .si-row {display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-top: 12px;}
#screen-acparsi .si-cell {display: flex; flex-direction: column; align-items: center; gap: 3px;}
#screen-acparsi .si-lbl {font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase;}
#screen-acparsi .si-input {width: 100%; height: 30px; border: 1.5px solid var(--green); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--text); background: #fff; cursor: pointer; transition: border-color 0.15s, background 0.15s;}
#screen-acparsi .si-input.active {border-color: var(--gold); border-width: 2px; background: #fffbe6;}
#screen-acparsi .par-total {margin-top: 14px; display: flex; align-items: center; gap: 10px;}
#screen-acparsi .par-total-label {font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-2);}
#screen-acparsi .par-total-value {font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; color: var(--green);}
#screen-acparsi .si-note {font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-top: 8px; line-height: 1.5;}
#screen-acparsi .si-note span {color: var(--green); font-weight: 600;}
#screen-acparsi .numpad-overlay {position: absolute; left: 0; right: 0; bottom: 72px; background: #f5f5f5; border-top: 1px solid #ddd; padding: 10px 12px 12px; z-index: 20; display: none;}
#screen-acparsi .numpad-overlay.open {display: block;}
#screen-acparsi .numpad-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
#screen-acparsi .numpad-context {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3);}
#screen-acparsi .numpad-display {font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700; color: var(--text); min-width: 40px; text-align: right;}
#screen-acparsi .numpad-ok {background: var(--green); color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer;}
#screen-acparsi .numpad-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
#screen-acparsi .num-btn {height: 46px; background: #fff; border: 1px solid #ddd; border-radius: 10px; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 500; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center;}
#screen-acparsi .num-btn:active {background: #e8e8e8;}
#screen-acparsi .num-btn.del {font-size: 16px; color: var(--text-3);}
#screen-acparsi .num-btn.zero {grid-column: 1 / 3;}
#screen-acparsi .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-acparsi .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-acparsi .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-acparsi .nav-tab.active {opacity: 1;}
#screen-acparsi .nav-spacer {position: relative; align-self: stretch;}
#screen-acparsi .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-acparsi .nav-tab svg {display: block;}
#screen-acparsi .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-acparsi .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-acparsi .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-acparsi .play-btn span {display: block;}
/* ===== acconfirm (AC05) ===== */
#screen-acconfirm{flex-direction:column;background:var(--bg);}
#screen-acconfirm.active{display:flex;}
#screen-acconfirm .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-acconfirm .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-acconfirm .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-acconfirm .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-acconfirm .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-acconfirm .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-acconfirm .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-acconfirm .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-acconfirm .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-acconfirm .body-area {flex: 1 1 auto; background: #fff; padding: 16px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-acconfirm .progress-bar {display: flex; align-items: center; gap: 6px; margin-bottom: 20px;}
#screen-acconfirm .progress-step {flex: 1; height: 4px; border-radius: 2px; background: #e0e0e0;}
#screen-acconfirm .progress-step.done {background: var(--gold);}
#screen-acconfirm .progress-step.active {background: var(--green);}
#screen-acconfirm .progress-label {font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); white-space: nowrap;}
#screen-acconfirm .confirm-section {margin-bottom: 20px;}
#screen-acconfirm .confirm-section-title {font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    color: var(--green); letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;}

/* ── Tappable summary rows that open the full Loop Layout / Par&SI views ── */
/* Global boxed-card style so these rows look identical on TR summary AND TM tmhcp. */
.summary-open-row { width:100%; height:48px; border:1.5px solid var(--green); border-radius:8px;
    padding:0 14px; display:flex; align-items:center; justify-content:space-between;
    font-family:'Inter',sans-serif; font-size:14px; color:var(--text); background:#fff;
    margin-bottom:10px; cursor:pointer; box-sizing:border-box; }
.summary-open-row:active { background:#f5fdf8; }
.summary-open-row .row-label { font-weight:500; }
.summary-open-row .row-value { font-size:13px; }
#screen-acconfirm .confirm-section-title::after {content: ''; flex: 1; height: 1px; background: rgba(26,107,60,0.15);}
#screen-acconfirm .summary-row {display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
    font-family: 'Roboto', sans-serif; font-size: 13px;}
#screen-acconfirm .summary-row:last-child {border-bottom: none;}
#screen-acconfirm .row-key {color: var(--text-3); font-weight: 400;}
#screen-acconfirm .row-val {color: var(--text); font-weight: 500; text-align: right;}
#screen-acconfirm .tee-table {width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px;}
#screen-acconfirm .tee-table th {font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 6px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.08);}
#screen-acconfirm .tee-table th:first-child {text-align: left;}
#screen-acconfirm .tee-table td {padding: 7px 6px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.05); color: var(--text); font-family: 'Roboto', sans-serif;}
#screen-acconfirm .tee-table td:first-child {text-align: left;}
#screen-acconfirm .tee-dot {display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle;}
#screen-acconfirm .tee-dot.c {background: var(--tee1);}
#screen-acconfirm .tee-dot.m {background: var(--tee2);}
#screen-acconfirm .tee-dot.f {background: var(--tee3);}
#screen-acconfirm .si-mini {display: grid; grid-template-columns: repeat(9,1fr); gap: 3px; margin-top: 6px;}
#screen-acconfirm .si-mini-cell {text-align: center;}
#screen-acconfirm .si-mini-h {font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; color: var(--text-3);}
#screen-acconfirm .si-mini-v {font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--text); background: #f5f5f5; border-radius: 4px; padding: 3px 0;}
#screen-acconfirm .save-btn {width: 100%; height: 52px;
    background: var(--green); color: #fff;
    border: none; border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
    letter-spacing: 0.08em; cursor: pointer; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 8px; transition: opacity 0.15s;}
#screen-acconfirm .save-btn:active {opacity: 0.85;}
#screen-acconfirm .success-overlay {display: none; position: absolute; inset: 0;
    background: #fff; border-radius: 42px;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; z-index: 50; padding: 32px;}
#screen-acconfirm .success-overlay.show {display: flex;}
#screen-acconfirm .success-icon {width: 72px; height: 72px; border-radius: 50%;
    background: #e8f5e9; display: flex; align-items: center; justify-content: center;
    font-size: 36px;}
#screen-acconfirm .success-title {font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: var(--green); text-align: center;}
#screen-acconfirm .success-sub {font-family: 'Roboto', sans-serif; font-size: 13px; color: var(--text-3); text-align: center; line-height: 1.6;}
#screen-acconfirm .success-btn {width: 100%; height: 48px; background: var(--green); color: #fff;
    border: none; border-radius: 10px; font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 8px;}
#screen-acconfirm .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-acconfirm .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-acconfirm .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-acconfirm .nav-tab.active {opacity: 1;}
#screen-acconfirm .nav-spacer {position: relative; align-self: stretch;}
#screen-acconfirm .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-acconfirm .nav-tab svg {display: block;}
#screen-acconfirm .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-acconfirm .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-acconfirm .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-acconfirm .play-btn span {display: block;}
/* ===== Screen 04 · TR Choose Course ===== */
#screen-trcourse{flex-direction:column;background:var(--bg);}
#screen-trcourse.active{display:flex;}
/* kill leaked old-engine .section box (transparent, no border/radius) */
#screen-trcourse .section{background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
/* course dropdown overlaps content below and scrolls after ~5 rows */
#screen-trcourse .body-area{overflow-y:auto;overflow-x:visible;}
#screen-trcourse .app-header {height: 56px; flex: 0 0 56px;
    background: var(--green);
    display: flex; align-items: center;
    padding: 0 16px;
    position: relative;}
#screen-trcourse .logo {position: absolute; left: 16px; top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: 6px;}
#screen-trcourse .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-trcourse .logo .wordmark {font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 20px;
    color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-trcourse .header-icons {position: absolute; right: 16px; top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: 12px;}
#screen-trcourse .icon-btn {width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.9);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: transparent; padding: 0;
    cursor: pointer;}
#screen-trcourse .icon-btn svg {display: block;}
#screen-trcourse .body-area {flex: 1 1 auto;
    background: var(--canvas-tint);
    padding: 12px 12px 86px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;}
#screen-trcourse .game-card {flex: 1 1 0;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background-color: #2d6a4f;
    background-size: cover;
    background-position: center center;
    box-shadow: var(--card-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease;
    border: 0;
    padding: 0;
    width: 100%;}
#screen-trcourse .game-card::before {content: "";
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.38);
    pointer-events: none;}
#screen-trcourse .game-card:active {transform: scale(1.02);}
#screen-trcourse .game-label {position: relative;
    z-index: 2;
    background: rgba(19,77,43,0.82);
    border-radius: 12px;
    padding: 10px 24px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.2px;}
#screen-trcourse .game-label span {display: block;}
#screen-trcourse .game-card.team-round {background-image: url('icons/tr04-a.jpg');}
#screen-trcourse .game-card.team-match {background-image: url('icons/tr04-b.jpg');}
#screen-trcourse .game-card.join-match {background-image: url('icons/tr04-c.jpg');}
#screen-trcourse .dock {position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 86px;
    z-index: 15;
    pointer-events: none;}
#screen-trcourse .bottom-nav {position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 72px;
    background: var(--green);
    display: grid;
    grid-template-columns: 1fr 1fr 96px 1fr 1fr;
    align-items: center;
    pointer-events: auto;
    padding-bottom: 6px;}
#screen-trcourse .nav-tab {display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    color: #fff;
    cursor: pointer;
    opacity: 0.65;
    position: relative;
    background: transparent; border: 0; padding: 0;}
#screen-trcourse .nav-tab.active {opacity: 1;}
#screen-trcourse .nav-spacer {position: relative; align-self: stretch;}
#screen-trcourse .nav-tab.active::before {content: "";
    position: absolute; top: 4px;
    width: 22px; height: 3px;
    border-radius: 2px;
    background: var(--gold);}
#screen-trcourse .nav-tab svg {display: block;}
#screen-trcourse .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-trcourse .nav-tab .label {font-family: 'Inter', sans-serif;
    font-weight: 500; font-size: 10px;
    letter-spacing: 0.02em;
    color: #fff;}
#screen-trcourse .play-btn {position: absolute;
    left: 50%; bottom: 22px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 11px;
    line-height: 1.05;
    letter-spacing: 0.06em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4;
    text-transform: uppercase;}
#screen-trcourse .play-btn:hover,
#screen-trcourse .play-btn:active {background: var(--green-hover);}
#screen-trcourse .play-btn span {display: block;}
#screen-trcourse .body-area.course {background: #ffffff;
    padding: 0 0 92px;
    gap: 0;
    overflow-y: auto;}
#screen-trcourse .sub-header {flex: 0 0 auto;
    height: 44px;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;}
#screen-trcourse .sub-header .title {font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--green);
    letter-spacing: -0.1px;}
#screen-trcourse .sub-header .actions {display: flex;
    align-items: center;
    gap: 8px;}
#screen-trcourse .sub-header .round-btn {width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    border: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;}
#screen-trcourse .sub-header .round-btn:hover {background: var(--green-hover);}
#screen-trcourse .sub-header .round-btn svg {display: block;}
#screen-trcourse .sub-header .back-pill {background: var(--green);
    color: #fff;
    border: 0;
    border-radius: 20px;
    padding: 7px 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-transform: uppercase;}
#screen-trcourse .sub-header .back-pill:hover {background: var(--green-hover);}
#screen-trcourse .form-area {padding: 0 16px 16px;}
#screen-trcourse .section-label {font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    margin: 24px 0 10px;
    line-height: 1.2;}
#screen-trcourse .section:first-child .section-label {margin-top: 24px;}
#screen-trcourse .section + .section .section-label {margin-top: 28px;}
#screen-trcourse .field {position: relative;
    width: 100%;
    height: 52px;
    border: 1.5px solid var(--green);
    border-radius: 10px;
    background: #ffffff;
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    align-items: center;
    padding: 0 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;}
#screen-trcourse .field:focus-within {box-shadow: 0 0 0 3px rgba(26,107,60,0.12);
    border-color: var(--green-deep);}
#screen-trcourse .field input {flex: 1 1 auto;
    border: 0;
    outline: 0;
    background: transparent;
    height: 100%;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--text);
    padding: 0;
    min-width: 0;}
#screen-trcourse .field input::placeholder {color: var(--text-3);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;}
#screen-trcourse .field .chev {flex: 0 0 auto;
    color: var(--green);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    margin-left: 8px;
    user-select: none;}
#screen-trcourse .add-new-row {display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
    cursor: pointer;
    user-select: none;}
#screen-trcourse .add-new-row .add-text {font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--text-2);}
#screen-trcourse .add-new-row .db-icon {width: 22px; height: 22px;
    color: var(--green);
    display: inline-flex; align-items: center; justify-content: center;}
#screen-trcourse .add-new-row .db-icon svg {display: block;}
#screen-trcourse .pill-group {display: flex;
    gap: 12px;
    align-items: center;}
#screen-trcourse .pill {border: 1.5px solid var(--text-2);
    background: transparent;
    color: var(--text-2);
    border-radius: 24px;
    padding: 10px 24px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 64px;
    line-height: 1;}
#screen-trcourse .pill.active {background: var(--gold);
    border-color: var(--gold);
    color: var(--green);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(225,194,69,0.4);}
#screen-trcourse .pill:hover:not(.active) {border-color: var(--green);
    color: var(--green);}
#screen-trcourse .loop-stack {display: flex;
    flex-direction: column;
    gap: 12px;}
#screen-trcourse .helper-text {font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.4;
    margin-top: 8px;}
#screen-trcourse .play-btn.next-btn {background: var(--green);
    border-color: #ffffff;
    color: #ffffff;
    opacity: 1;
    box-shadow:
      0 8px 18px rgba(0,0,0,0.25),
      0 0 0 6px rgba(26,107,60,0.15);
    transition:
      background 0.25s ease,
      border-color 0.25s ease,
      color 0.2s ease,
      box-shadow 0.35s ease;
    cursor: pointer;}
#screen-trcourse .play-btn.next-btn.active {background: var(--green);
    border-color: var(--gold);
    color: #fff;
    cursor: pointer;
    box-shadow:
      0 0 0 4px rgba(225,194,69,0.28),
      0 0 22px 2px rgba(225,194,69,0.55),
      0 10px 22px rgba(0,0,0,0.28);
    animation: nextPulse 2.2s ease-in-out infinite;}
#screen-trcourse 0%,
#screen-trcourse 100% {transform: translateX(-50%);}
#screen-trcourse 20% {transform: translateX(calc(-50% - 5px));}
#screen-trcourse 40% {transform: translateX(calc(-50% + 5px));}
#screen-trcourse 60% {transform: translateX(calc(-50% - 3px));}
#screen-trcourse 80% {transform: translateX(calc(-50% + 3px));}
#screen-trcourse 0%,
#screen-trcourse 100% {box-shadow:
        0 0 0 4px rgba(225,194,69,0.28),
        0 0 18px 2px rgba(225,194,69,0.45),
        0 10px 22px rgba(0,0,0,0.28);}
#screen-trcourse 50% {box-shadow:
        0 0 0 6px rgba(225,194,69,0.35),
        0 0 28px 4px rgba(225,194,69,0.7),
        0 10px 22px rgba(0,0,0,0.28);}
#screen-trcourse .field.course-field {cursor: pointer;}
#screen-trcourse .field.course-field input {cursor: pointer; caret-color: var(--green);}
#screen-trcourse .field .chev {flex: 0 0 auto;
    color: var(--green);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    margin-left: 8px;
    user-select: none;
    transition: transform 0.22s ease;}
#screen-trcourse .field.course-field.open .chev {transform: rotate(180deg);}
#screen-trcourse .course-dropdown {position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid var(--green);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    z-index: 40;
    max-height: 280px;
    overflow-y: auto;
    display: none;}
#screen-trcourse .course-dropdown.open {display: block;}
#screen-trcourse .course-dropdown .option {padding: 12px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid #eef2ef;
    display: flex;
    align-items: center;
    gap: 10px;}
#screen-trcourse .course-dropdown .option:last-child {border-bottom: 0;}
#screen-trcourse .course-dropdown .option:hover,
#screen-trcourse .course-dropdown .option.highlight {background: var(--surface);}
#screen-trcourse .course-dropdown .option .pin {width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); flex: 0 0 auto;}
#screen-trcourse .course-dropdown .empty {padding: 14px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-3);
    font-style: italic;}
#screen-trcourse .loop-stack .field {position: relative;
    cursor: default;
    overflow: hidden;}
#screen-trcourse .loop-stack .field.fillable {cursor: pointer;}
#screen-trcourse .loop-stack .field.fillable input {pointer-events: none;
    color: var(--text);}
#screen-trcourse .loop-stack .field.selected {background: rgba(26,107,60,0.06);
    border-color: var(--green-deep);
    border-width: 2px;
    padding: 0 15px;
    box-shadow: 0 0 0 3px rgba(26,107,60,0.12);}
#screen-trcourse .loop-stack .field.selected input {font-weight: 600;
    color: var(--green-deep);}
#screen-trcourse .loop-stack .field .loop-check {flex: 0 0 auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--green);
    display: flex; align-items: center; justify-content: center;
    color: transparent;
    background: #fff;
    margin-left: 8px;
    transition: all 0.15s ease;}
#screen-trcourse .loop-stack .field.selected .loop-check {background: var(--green);
    color: #fff;
    border-color: var(--green);}
#screen-trcourse .loop-stack .field .loop-meta {flex: 0 0 auto;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--text-3);
    margin-left: 8px;}
#screen-trcourse .loop-stack .field.selected .loop-meta {color: var(--green-deep);}
/* ===== trloop ===== */
#screen-trloop{flex-direction:column;background:var(--bg);}
#screen-trloop.active{display:flex;}
#screen-trloop .section{background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-trloop .app-header {height: 56px; flex: 0 0 56px;
    background: var(--green);
    display: flex; align-items: center;
    padding: 0 16px;
    position: relative;}
#screen-trloop .logo {position: absolute; left: 16px; top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: 6px;}
#screen-trloop .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-trloop .logo .wordmark {font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 20px;
    color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-trloop .header-icons {position: absolute; right: 16px; top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: 12px;}
#screen-trloop .icon-btn {width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.9);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: transparent; padding: 0; cursor: pointer;}
#screen-trloop .icon-btn svg {display: block;}
#screen-trloop .sub-header {flex: 0 0 44px;
    background: var(--gold);
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 16px;}
#screen-trloop .sub-header .title {font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 16px;
    color: var(--green); letter-spacing: -0.1px;}
#screen-trloop .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-trloop .back-pill {background: var(--green); color: #fff;
    border: none; border-radius: 20px;
    padding: 6px 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 12px;
    letter-spacing: 0.06em; cursor: pointer;}
#screen-trloop .body-area {flex: 1 1 auto;
    background: #fff;
    padding: 20px 16px 92px;
    overflow-y: auto;
    min-height: 0;}
#screen-trloop .section {margin-bottom: 22px;}
#screen-trloop .section-label {font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 600;
    color: var(--text-2); margin-bottom: 8px;}
#screen-trloop .loop-name-field {display: flex; align-items: center;
    width: 100%; height: 48px;
    border: 1.5px solid var(--green);
    border-radius: 8px;
    padding: 0 14px;
    background: #fff;
    font-family: 'Inter', sans-serif; font-size: 14px;
    color: var(--text);}
#screen-trloop .loop-name-field input {border: none; outline: none; background: transparent;
    font-family: 'Inter', sans-serif; font-size: 14px;
    color: var(--text); flex: 1;}
#screen-trloop .loop-name-field input::placeholder {color: var(--text-3);}
#screen-trloop .tee-block {margin-bottom: 20px;}
#screen-trloop .tee-header {display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;}
#screen-trloop .tee-dot {width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;}
#screen-trloop .tee-dot.champion {background: #4a82d8; border: 1.5px solid #3a6fbe;}
#screen-trloop .tee-dot.medal {background: var(--gold); border: 1.5px solid #c8a830;}
#screen-trloop .tee-dot.forward {background: #e06060; border: 1.5px solid #cc4848;}
#screen-trloop .tee-name {font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 600;
    color: var(--text);}
#screen-trloop .rsp-grid {display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;}
#screen-trloop .rsp-cell {display: flex; flex-direction: column; gap: 4px;}
#screen-trloop .rsp-cell .rsp-label {font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 600;
    color: var(--text-3); letter-spacing: 0.04em;
    text-transform: uppercase;}
#screen-trloop .rsp-input {height: 44px;
    border: 1.5px solid var(--green);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 16px; font-weight: 600;
    color: var(--text);
    background: #fff; cursor: pointer;}
#screen-trloop .rsp-input.empty {color: var(--text-3);
    font-size: 14px; font-weight: 400;}
#screen-trloop .divider {height: 1px; background: rgba(0,0,0,0.07);
    margin: 18px 0;}
#screen-trloop .dock {position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 86px;
    z-index: 15;
    pointer-events: none;}
#screen-trloop .bottom-nav {position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 72px;
    background: var(--green);
    display: grid;
    grid-template-columns: 1fr 1fr 96px 1fr 1fr;
    align-items: center;
    pointer-events: auto;
    padding-bottom: 6px;}
#screen-trloop .nav-tab {display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px; color: #fff;
    cursor: pointer; opacity: 0.65;
    position: relative;
    background: transparent; border: 0; padding: 0;}
#screen-trloop .nav-tab.active {opacity: 1;}
#screen-trloop .nav-spacer {position: relative; align-self: stretch;}
#screen-trloop .nav-tab.active::before {content: "";
    position: absolute; top: 4px;
    width: 22px; height: 3px;
    border-radius: 2px; background: var(--gold);}
#screen-trloop .nav-tab svg {display: block;}
#screen-trloop .nav-tab img.nav-icon {display: block; width: 24px; height: 24px;
    object-fit: contain; filter: brightness(0) invert(1);}
#screen-trloop .nav-tab .label {font-family: 'Inter', sans-serif;
    font-weight: 500; font-size: 10px;
    letter-spacing: 0.02em; color: #fff;}
#screen-trloop .play-btn {position: absolute;
    left: 50%; bottom: 22px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green); color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 15px;
    line-height: 1.05; letter-spacing: 0.06em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto; cursor: pointer;
    z-index: 4; text-transform: uppercase;}
#screen-trloop .play-btn span {display: block;}
#screen-trloop .next-btn {background: var(--green);
    border-color: #fff; color: #fff;
    opacity: 1;
    transition: background 0.25s, box-shadow 0.35s;}
#screen-trloop .next-btn:not(.active) {background: #aaa;
    box-shadow: none;
    border-color: #fff;
    opacity: 0.7;}
/* ===== trparsi ===== */
#screen-trparsi{flex-direction:column;background:var(--bg);}
#screen-trparsi.active{display:flex;}
#screen-trparsi .section{background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-trparsi .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-trparsi .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-trparsi .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-trparsi .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-trparsi .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-trparsi .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-trparsi .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-trparsi .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-trparsi .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-trparsi .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-trparsi .body-area {flex: 1 1 auto; background: #fff; padding: 16px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-trparsi .loop-field {display: flex; align-items: center; width: 100%; height: 46px; border: 1.5px solid var(--green); border-radius: 8px; padding: 0 14px; background: #fff; margin-bottom: 18px;}
#screen-trparsi .loop-field input {border: none; outline: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); flex: 1;}
#screen-trparsi .loop-field input::placeholder {color: var(--text-3);}
#screen-trparsi .section-label {font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px;}
#screen-trparsi .hole-grid {display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: 4px;}
#screen-trparsi .hole-num {height: 28px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-2);}
#screen-trparsi .par-row {display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: 3px;}
#screen-trparsi .par-btn {height: 32px; width: 100%; border-radius: 6px; border: 1.5px solid var(--green); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; background: #fff; color: var(--green); display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.1s;}
#screen-trparsi .par-btn.active {background: var(--green); color: #fff;}
#screen-trparsi .si-row {display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-top: 14px;}
#screen-trparsi .si-cell {display: flex; flex-direction: column; align-items: center; gap: 3px;}
#screen-trparsi .si-label {font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase;}
#screen-trparsi .si-input {width: 100%; height: 34px;
    border: 1.5px solid var(--green); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    color: var(--text); background: #fff; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;}
#screen-trparsi .si-input.active {border-color: var(--gold); border-width: 2px;
    background: #fffbe6;}
#screen-trparsi .par-total {margin-top: 16px; display: flex; align-items: center; gap: 10px;}
#screen-trparsi .par-total-label {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-2);}
#screen-trparsi .par-total-value {font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; color: var(--green);}
#screen-trparsi .numpad-overlay {position: absolute;
    left: 0; right: 0; bottom: 72px; top: auto;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    padding: 10px 12px 12px;
    z-index: 20;
    pointer-events: auto; opacity: 1;
    display: none;}
#screen-trparsi .numpad-overlay.open {display: block;}
#screen-trparsi .numpad-header {display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;}
#screen-trparsi .numpad-context {font-family: 'Inter', sans-serif; font-size: 12px;
    color: var(--text-3);}
#screen-trparsi .numpad-display {font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700;
    color: var(--text); min-width: 40px; text-align: right;}
#screen-trparsi .numpad-ok {background: var(--green); color: #fff;
    border: none; border-radius: 8px;
    padding: 8px 18px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.04em;}
#screen-trparsi .numpad-grid {display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;}
#screen-trparsi .num-btn {height: 46px;
    background: #fff; border: 1px solid #ddd; border-radius: 10px;
    font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 500;
    color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.1s;}
#screen-trparsi .num-btn:active {background: #e8e8e8;}
#screen-trparsi .num-btn.del {font-size: 16px; color: var(--text-3);}
#screen-trparsi .num-btn.zero {grid-column: 1 / 3;}
#screen-trparsi .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-trparsi .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-trparsi .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-trparsi .nav-tab.active {opacity: 1;}
#screen-trparsi .nav-spacer {position: relative; align-self: stretch;}
#screen-trparsi .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-trparsi .nav-tab svg {display: block;}
#screen-trparsi .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-trparsi .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-trparsi .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-trparsi .play-btn span {display: block;}
#screen-trloop .tee-dot.senior{background:#2f6fd0;}
/* ===== trteam ===== */
#screen-trteam{flex-direction:column;background:var(--bg);}
#screen-trteam.active{display:flex;}
#screen-trteam .section{background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-trteam .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-trteam .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-trteam .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-trteam .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-trteam .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-trteam .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-trteam .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-trteam .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-trteam .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-trteam .action-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-trteam .body-area {flex: 1 1 auto; background: #fff; padding: 24px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-trteam .form-section {margin-bottom: 28px;}
#screen-trteam .form-section.carousel-section {margin-top: 44px;}
#screen-trteam .section-label {font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px;}
#screen-trteam .dropdown-field {display: flex; align-items: center; width: 100%; height: 48px; border: 1.5px solid var(--green); border-radius: 8px; padding: 0 14px; background: #fff; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 14px; justify-content: space-between;}
#screen-trteam .dropdown-field .chev {color: var(--green); font-size: 18px;}
#screen-trteam .dropdown-field.placeholder span:first-child {color: var(--text-3);}
#screen-trteam .dropdown-field.selected span:first-child {color: var(--text); font-weight: 600;}
#screen-trteam .helper {font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-top: 6px; text-align: right;}
#screen-trteam .player-carousel {display: flex; align-items: center; gap: 0;}
#screen-trteam .carousel-arrow {width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--green); font-size: 20px; font-weight: 700; cursor: pointer; padding: 0;}
#screen-trteam .carousel-arrow:disabled {color: #ccc; cursor: default;}
#screen-trteam .carousel-track {flex: 1; display: flex; gap: 10px; overflow: hidden; justify-content: center;}
#screen-trteam .player-card {display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 calc(33% - 7px); cursor: pointer;}
#screen-trteam .avatar-wrap {width: 68px; height: 68px; border-radius: 50%; overflow: hidden; border: 2.5px solid transparent; background: #f0f4f1; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s;}
#screen-trteam .avatar-wrap img {width: 100%; height: 100%; object-fit: cover; display: block;}
#screen-trteam .player-card.selected .avatar-wrap {border-color: var(--green);}
#screen-trteam .player-card.dimmed {opacity: 0.35; cursor: not-allowed; pointer-events: none;}
#screen-trteam .player-nickname {font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; color: var(--text-2); text-align: center;}
#screen-trteam .player-hcp {font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); text-align: center;}
#screen-trteam .select-counter {font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); text-align: center; margin-top: 12px;}
#screen-trteam .select-counter span {color: var(--green); font-weight: 700;}
#screen-trteam .size-dropdown {display: none; position: absolute; left: 16px; right: 16px; background: #fff; border: 1.5px solid var(--green); border-radius: 10px; z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,0.12); overflow: hidden;}
#screen-trteam .size-option {padding: 14px 16px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; border-bottom: 1px solid #eee;}
#screen-trteam .size-option:last-child {border-bottom: none;}
#screen-trteam .size-option:hover {background: #f5fdf8;}
#screen-trteam .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-trteam .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-trteam .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-trteam .nav-tab.active {opacity: 1;}
#screen-trteam .nav-spacer {position: relative; align-self: stretch;}
#screen-trteam .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-trteam .nav-tab svg {display: block;}
#screen-trteam .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-trteam .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-trteam .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-trteam .play-btn span {display: block;}
/* ===== trtee ===== */
#screen-trtee{flex-direction:column;background:var(--bg);}
#screen-trtee.active{display:flex;}
#screen-trtee .section{background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-trtee .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-trtee .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-trtee .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-trtee .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-trtee .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-trtee .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-trtee .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-trtee .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-trtee .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-trtee .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-trtee .body-area {flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-trtee .player-block {margin-bottom: 8px;}
#screen-trtee .player-label {font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); text-align: center; margin-bottom: 10px;}
#screen-trtee .player-avatar-wrap {width: 72px; height: 72px; border-radius: 50%;
    overflow: hidden; border: 2.5px solid var(--green);
    background: #f0f4f1; margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;}
#screen-trtee .player-avatar-wrap img {width: 100%; height: 100%; object-fit: cover; display: block;}
#screen-trtee .player-meta {text-align: center; margin-bottom: 12px;}
#screen-trtee .player-nickname {font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: var(--text-2); margin-right: 8px;}
#screen-trtee .player-hcp {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3);}
#screen-trtee .tee-group {display: flex; gap: 8px; margin-bottom: 16px;}
#screen-trtee .tee-btn {flex: 1; min-width: 0; height: 38px; padding: 0 6px;
    border-radius: 8px; border: none;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    cursor: pointer; background: var(--green); color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    white-space: nowrap;
    opacity: 0.45; transition: opacity 0.15s;}
#screen-trtee .tee-btn.active {opacity: 1;}
#screen-trtee .tee-dot {width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;}
#screen-trtee .tee-dot.champion {background: var(--tee1);}
#screen-trtee .tee-dot.medal {background: var(--tee2);}
#screen-trtee .tee-dot.forward {background: var(--tee3);}
#screen-trtee .player-divider {height: 1px; background: rgba(0,0,0,0.07); margin-bottom: 20px;}
#screen-trtee .player-block:last-child .player-divider {display: none;}
#screen-trtee .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-trtee .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-trtee .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-trtee .nav-tab.active {opacity: 1;}
#screen-trtee .nav-spacer {position: relative; align-self: stretch;}
#screen-trtee .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-trtee .nav-tab svg {display: block;}
#screen-trtee .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-trtee .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-trtee .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-trtee .play-btn span {display: block;}
/* ===== trformat ===== */
#screen-trformat{flex-direction:column;background:var(--bg);}
#screen-trformat.active{display:flex;}
#screen-trformat .section{background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-trformat .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-trformat .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-trformat .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-trformat .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-trformat .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-trformat .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-trformat .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-trformat .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-trformat .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-trformat .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-trformat .body-area {flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-trformat .team-size-badge {display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-bottom: 22px;
    background: #f0f7f3; border: 1.5px solid var(--green);
    border-radius: 8px; padding: 10px 14px;}
#screen-trformat .badge-label {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3);}
#screen-trformat .badge-value {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--green);}
#screen-trformat .section-title {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
    color: var(--text); text-align: center;
    margin-bottom: 18px; letter-spacing: 0.04em; text-transform: uppercase;}
#screen-trformat .format-row {display: grid; grid-template-columns: 130px 1fr; gap: 10px; margin-bottom: 12px;}
#screen-trformat .format-pill {height: 72px; border-radius: 8px;
    border: 1.5px solid var(--green);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
    cursor: pointer; background: #fff; color: var(--green);
    transition: all 0.15s; text-align: center; padding: 0 6px;}
#screen-trformat .format-pill.active {background: var(--green); color: #fff; border-color: var(--green);}
#screen-trformat .format-desc {height: 72px; border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    padding: 10px 14px; text-align: center;
    font-family: 'Roboto', sans-serif; font-size: 12px;
    color: var(--text-3); line-height: 1.5; background: #f9f9f9;}
#screen-trformat .custom-row {display: grid; grid-template-columns: 130px 1fr; gap: 10px; margin-bottom: 12px;}
#screen-trformat .custom-inputs {display: flex; gap: 6px; align-items: center; height: 72px;}
#screen-trformat .custom-field {flex: 1; height: 44px;
    border: 1.5px solid var(--green); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;}
#screen-trformat .custom-field input {width: 100%; height: 100%; border: none; outline: none;
    background: transparent; text-align: center;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text);}
#screen-trformat .custom-field input::placeholder {color: #bbb;}
#screen-trformat .custom-sep {font-size: 18px; color: var(--text-3); font-weight: 300;}
#screen-trformat .custom-inputs-4p {display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px; padding: 6px 0;}
#screen-trformat .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-trformat .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-trformat .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-trformat .nav-tab.active {opacity: 1;}
#screen-trformat .nav-spacer {position: relative; align-self: stretch;}
#screen-trformat .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-trformat .nav-tab svg {display: block;}
#screen-trformat .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-trformat .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-trformat .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-trformat .play-btn span {display: block;}
/* ===== trsummary ===== */
#screen-trsummary{flex-direction:column;background:var(--bg);}
#screen-trsummary.active{display:flex;}
#screen-trsummary .section{background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-trsummary .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-trsummary .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-trsummary .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-trsummary .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-trsummary .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-trsummary .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-trsummary .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-trsummary .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-trsummary .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-trsummary .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-trsummary .body-area {flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-trsummary .summary-row {width: 100%; height: 48px;
    border: 1.5px solid var(--green); border-radius: 8px;
    padding: 0 14px; display: flex; align-items: center;
    justify-content: space-between;
    font-family: 'Inter', sans-serif; font-size: 14px;
    color: var(--text); background: #fff; margin-bottom: 10px;}
#screen-trsummary .summary-row.highlight {border-color: var(--gold); border-width: 2px;}
#screen-trsummary .row-label {font-weight: 500;}
#screen-trsummary .row-value {color: var(--text-3); font-size: 13px;}
#screen-trsummary .section-divider {height: 1px; background: rgba(0,0,0,0.07); margin: 16px 0;}
#screen-trsummary .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-trsummary .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-trsummary .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-trsummary .nav-tab.active {opacity: 1;}
#screen-trsummary .nav-spacer {position: relative; align-self: stretch;}
#screen-trsummary .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-trsummary .nav-tab svg {display: block;}
#screen-trsummary .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-trsummary .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-trsummary .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-trsummary .play-btn span {display: block;}
/* ===== trresult ===== */
#screen-trresult{flex-direction:column;background:var(--bg);}
#screen-trresult.active{display:flex;}
#screen-trresult .section{background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-trresult .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-trresult .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-trresult .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-trresult .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-trresult .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-trresult .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-trresult .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-trresult .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-trresult .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-trresult .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-trresult .body-area {flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-trresult .course-header {text-align: center; margin-bottom: 6px;}
#screen-trresult .course-name {font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700;
    color: var(--text); margin-bottom: 4px;}
#screen-trresult .course-meta {font-family: 'Roboto', sans-serif; font-size: 12px;
    color: var(--text-3); line-height: 1.6;}
#screen-trresult .course-meta span {margin: 0 4px;}
#screen-trresult .thcp-card {border: 1.5px solid var(--green); border-radius: 10px;
    padding: 14px 16px; margin: 16px 0;
    display: flex; align-items: center; justify-content: space-between;}
#screen-trresult .thcp-left {display: flex; align-items: center; gap: 10px;}
#screen-trresult .thcp-rank {font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
    color: var(--text-3); min-width: 18px;}
#screen-trresult .thcp-name {font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600;
    color: var(--text);}
#screen-trresult .thcp-right {text-align: right;}
#screen-trresult .thcp-value {font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 800;
    color: var(--green); line-height: 1;}
#screen-trresult .thcp-label {font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
    color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase;}
#screen-trresult .breakdown-card {border: 1.5px solid rgba(0,0,0,0.1); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 16px;
    background: #f9fdf9;}
#screen-trresult .breakdown-row {display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;}
#screen-trresult .breakdown-row:last-child {margin-bottom: 0;}
#screen-trresult .breakdown-left {display: flex; align-items: center; gap: 8px;}
#screen-trresult .player-label {font-family: 'Roboto', sans-serif; font-size: 12px;
    color: var(--text-3); min-width: 36px;}
#screen-trresult .player-name {font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    color: var(--text);}
#screen-trresult .tee-dot {width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;}
#screen-trresult .tee-dot.medal {background: var(--tee2);}
#screen-trresult .tee-dot.champion {background: #fff; border: 1px solid #bbb;}
#screen-trresult .tee-dot.senior {background: #2f6fd0;}
#screen-trresult .tee-dot.forward {background: var(--tee3);}
#screen-trresult .breakdown-right {display: flex; align-items: center; gap: 10px;}
#screen-trresult .player-hcp {font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
    color: var(--text); min-width: 34px; text-align: right;}
#screen-trresult .player-pct {font-family: 'Inter', sans-serif; font-size: 12px;
    color: var(--text-3); min-width: 30px; text-align: right;}
#screen-trresult .strokes-info {text-align: right; font-family: 'Inter', sans-serif;
    font-size: 12px; color: var(--text-3);
    margin-top: 4px; font-style: italic;}
#screen-trresult .strokes-info strong {color: var(--green); font-style: normal;}
#screen-trresult .start-btn {width: 100%; height: 52px;
    background: var(--green); color: #fff;
    border: none; border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
    letter-spacing: 0.08em; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 8px;}
#screen-trresult .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-trresult .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-trresult .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-trresult .nav-tab.active {opacity: 1;}
#screen-trresult .nav-spacer {position: relative; align-self: stretch;}
#screen-trresult .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-trresult .nav-tab svg {display: block;}
#screen-trresult .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-trresult .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-trresult .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-trresult .play-btn span {display: block;}
#screen-trtee .tee-dot.senior{background:#2f6fd0;}
/* ===== trscore ===== */
#screen-trscore{flex-direction:column;background:var(--bg);}
#screen-trscore.active{display:flex;}
#screen-trscore .section{background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-trscore .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-trscore .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-trscore .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-trscore .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-trscore .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-trscore .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-trscore .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-trscore .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-trscore .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-trscore .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-trscore .body-area {flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-trscore .section {margin-bottom: 44px;}
#screen-trscore .section:last-child {margin-bottom: 0;}
#screen-trscore .context-course {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px;}
#screen-trscore .context-meta {font-family: 'Roboto', sans-serif; font-size: 11px; color: var(--text-3);}
#screen-trscore .stats-bar {display: grid; grid-template-columns: repeat(4,1fr); border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden;}
#screen-trscore .stat-cell {padding: 8px 6px; text-align: center; border-right: 1px solid rgba(0,0,0,0.1);}
#screen-trscore .stat-cell:last-child {border-right: none;}
#screen-trscore .stat-label {display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px;}
#screen-trscore .stat-value {font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--text);}
#screen-trscore .hole-nav {display: flex; align-items: center; justify-content: space-between;}
#screen-trscore .hole-arrow {width: 32px; height: 32px; background: none; border: none; font-size: 22px; color: var(--green); cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700;}
#screen-trscore .hole-info {text-align: center;}
#screen-trscore .hole-title {font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; color: var(--text);}
#screen-trscore .hole-par {font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-3); margin-top: 2px;}
#screen-trscore .hole-si {font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--green); margin-top: 3px;}
#screen-trscore .score-area {border: 1.5px solid var(--green); border-radius: 10px;
    height: 80px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; gap: 4px;
    transition: background 0.15s;}
#screen-trscore .score-area:active {background: #f0f7f3;}
#screen-trscore .score-display {font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 800; color: var(--text); line-height: 1; text-align: center;}
#screen-trscore .score-hint {font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-3); text-align: center;}
#screen-trscore .dot-row {display: flex; align-items: center; justify-content: center; gap: 5px;}
#screen-trscore .dot {width: 8px; height: 8px; border-radius: 50%; background: #ddd; transition: background 0.15s, transform 0.15s; cursor: pointer;}
#screen-trscore .dot.active {background: var(--green); transform: scale(1.3);}
#screen-trscore .dot.scored {background: var(--gold);}
#screen-trscore .all-holes-btn {display: flex; align-items: center; justify-content: center; gap: 6px; width: 130px; margin: 0 auto; background: none; border: 1.5px solid var(--green); border-radius: 20px; padding: 7px 14px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--green); cursor: pointer;}
#screen-trscore .save-round-btn {display: block; margin: 0 auto; background: none; border: 1.5px solid #ccc; border-radius: 20px; padding: 8px 24px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-3); cursor: pointer; letter-spacing: 0.04em;}
#screen-trscore .numpad-overlay {position: absolute; left: 0; right: 0; bottom: 72px; background: #f5f5f5; border-top: 1px solid #ddd; padding: 10px 12px 12px; z-index: 20; display: none;}
#screen-trscore .numpad-overlay.open {display: block;}
#screen-trscore .numpad-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
#screen-trscore .numpad-context {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3);}
#screen-trscore .numpad-display {font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 800; color: var(--text); min-width: 40px; text-align: right;}
#screen-trscore .numpad-ok {background: var(--green); color: #fff; border: none; border-radius: 8px; padding: 8px 20px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer;}
#screen-trscore .numpad-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
#screen-trscore .num-btn {height: 46px; background: #fff; border: 1px solid #ddd; border-radius: 10px; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 500; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center;}
#screen-trscore .num-btn:active {background: #e8e8e8;}
#screen-trscore .num-btn.del {font-size: 16px; color: var(--text-3);}
#screen-trscore .num-btn.zero {grid-column: 1 / 3;}
#screen-trscore .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-trscore .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-trscore .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-trscore .nav-tab.active {opacity: 1;}
#screen-trscore .nav-spacer {position: relative; align-self: stretch;}
#screen-trscore .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-trscore .nav-tab svg {display: block;}
#screen-trscore .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-trscore .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-trscore .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-trscore .play-btn span {display: block;}
/* ===== trfull ===== */
#screen-trfull{flex-direction:column;background:var(--bg);}
#screen-trfull.active{display:flex;}
#screen-trfull .section{background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-trfull .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-trfull .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-trfull .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-trfull .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-trfull .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-trfull .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-trfull .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-trfull .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-trfull .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-trfull .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-trfull .body-area {flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-trfull .course-name {font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px;}
#screen-trfull .course-meta {font-family: 'Roboto', sans-serif; font-size: 11px; color: var(--text-3); margin-bottom: 16px;}
#screen-trfull .stats-bar {display: grid; grid-template-columns: repeat(4,1fr); border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden; margin-bottom: 20px;}
#screen-trfull .stat-cell {padding: 9px 6px; text-align: center; border-right: 1px solid rgba(0,0,0,0.1);}
#screen-trfull .stat-cell:last-child {border-right: none;}
#screen-trfull .stat-label {display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px;}
#screen-trfull .stat-value {font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--text);}
#screen-trfull .stat-value.positive {color: var(--red);}
#screen-trfull .stat-value.negative {color: var(--blue);}
#screen-trfull .sc-table {width: 100%; border-collapse: collapse; font-size: 13px; border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden;}
#screen-trfull .sc-table thead tr {background: var(--green);}
#screen-trfull .sc-table th {color: #fff; padding: 9px 6px; text-align: center; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;}
#screen-trfull .sc-table tbody tr:nth-child(even) {background: #f7fbf8;}
#screen-trfull .sc-table tbody tr:last-child {background: #eef5f0;}
#screen-trfull .sc-table td {padding: 10px 6px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.06); color: var(--text); font-family: 'Roboto', sans-serif;}
#screen-trfull .sc-table tbody tr:last-child td {font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; border-bottom: none;}
#screen-trfull .over-par {color: var(--red) !important; font-weight: 700;}
#screen-trfull .under-par {color: var(--blue) !important; font-weight: 700;}
#screen-trfull .si-badge {display: inline-block;
    font-size: 10px; font-weight: 600;
    padding: 1px 5px; border-radius: 4px;
    font-family: 'Inter', sans-serif;}
#screen-trfull .si-hard {background: #fde8e8; color: var(--red);}
#screen-trfull .si-average {background: #fff8e1; color: #b8860b;}
#screen-trfull .si-easy {background: #e8f5e9; color: var(--green);}
#screen-trfull .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-trfull .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-trfull .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-trfull .nav-tab.active {opacity: 1;}
#screen-trfull .nav-spacer {position: relative; align-self: stretch;}
#screen-trfull .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-trfull .nav-tab svg {display: block;}
#screen-trfull .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-trfull .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-trfull .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-trfull .play-btn span {display: block;}

/* ===== TEAM MATCH · Opponent Team Details (screen-tmopp) ===== */
#screen-tmopp .body-area { flex: 1 1 auto; background: #fff; padding: 24px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-tmopp .form-section { margin-bottom: 28px; }
#screen-tmopp .section-label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
#screen-tmopp .name-field-wrap { position: relative; }
#screen-tmopp .name-field { display: flex; align-items: center; width: 100%; height: 48px; border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden; background: #fff; }
#screen-tmopp .name-field input { flex: 1; height: 100%; border: none; outline: none; padding: 0 14px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); background: transparent; }
#screen-tmopp .name-field input::placeholder { color: var(--text-3); }
#screen-tmopp .name-field .chev-btn { background: none; border: none; padding: 0 12px; color: var(--green); font-size: 18px; cursor: pointer; flex-shrink: 0; height: 100%; display: flex; align-items: center; }
#screen-tmopp .helper { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-top: 6px; text-align: right; }
#screen-tmopp .saved-dd { display: none; position: absolute; left: 0; right: 0; top: 52px; background: #fff; border: 1.5px solid var(--green); border-radius: 10px; z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,0.12); overflow: hidden; }
#screen-tmopp .saved-dd-item { padding: 12px 14px; font-family: 'Inter', sans-serif; font-size: 13px; cursor: pointer; border-bottom: 1px solid #eee; }
#screen-tmopp .saved-dd-item:last-child { border-bottom: none; }
#screen-tmopp .saved-dd-item:hover { background: #f5fdf8; }
#screen-tmopp .saved-dd-item .team-name-dd { font-weight: 600; color: var(--text); }
#screen-tmopp .saved-dd-item .team-meta-dd { font-size: 11px; color: var(--text-3); margin-top: 2px; }
#screen-tmopp .size-field { display: flex; align-items: center; width: 100%; height: 48px; border: 1.5px solid var(--green); border-radius: 8px; padding: 0 14px; background: #fff; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 14px; justify-content: space-between; }
#screen-tmopp .size-field.placeholder span:first-child { color: var(--text-3); }
#screen-tmopp .size-field.selected span:first-child { color: var(--text); font-weight: 600; }
#screen-tmopp .size-dd { display: none; position: absolute; left: 16px; right: 16px; background: #fff; border: 1.5px solid var(--green); border-radius: 10px; z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,0.12); overflow: hidden; }
#screen-tmopp .size-opt { padding: 14px 16px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; border-bottom: 1px solid #eee; }
#screen-tmopp .size-opt:last-child { border-bottom: none; }
#screen-tmopp .size-opt:hover { background: #f5fdf8; }
#screen-tmopp .players-section { margin-top: 44px; }
#screen-tmopp .player-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; opacity: 1; transition: opacity 0.2s; }
#screen-tmopp .player-row.hidden { display: none; }
#screen-tmopp .player-num { width: 20px; flex-shrink: 0; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-3); text-align: center; }
#screen-tmopp .player-name-in { flex: 1; height: 46px; border: 1.5px solid var(--green); border-radius: 8px; padding: 0 12px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); outline: none; background: #fff; transition: background 0.2s; }
#screen-tmopp .player-name-in::placeholder { color: var(--text-3); }
#screen-tmopp .player-name-in.autofilled { background: #f0f9f4; border-color: var(--green); }
#screen-tmopp .player-hcp-in { width: 72px; height: 46px; border: 1.5px solid var(--green); border-radius: 8px; padding: 0 10px; text-align: center; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); outline: none; background: #fff; transition: background 0.2s; }
#screen-tmopp .player-hcp-in::placeholder { color: var(--text-3); }
#screen-tmopp .player-hcp-in.autofilled { background: #f0f9f4; }
#screen-tmopp .toast { display: none; position: absolute; bottom: 88px; left: 16px; right: 16px; background: var(--green); color: #fff; border-radius: 10px; padding: 12px 16px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; text-align: center; z-index: 40; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
#screen-tmopp .toast.show { display: block; }
#screen-tmopp .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-tmopp .nav-tab svg { display: block; }
#screen-tmopp .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-tmopp .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }

/* ===== TEAM MATCH · Team Handicap (screen-tmhcp) ===== */
#screen-tmhcp .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-tmhcp .course-header { text-align: center; margin-bottom: 6px; }
#screen-tmhcp .course-name { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
#screen-tmhcp .course-meta { font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-3); line-height: 1.6; }
#screen-tmhcp .thcp-card { border: 1.5px solid var(--green); border-radius: 10px;
    padding: 14px 16px; margin: 14px 0 0;
    display: flex; align-items: center; justify-content: space-between; }
#screen-tmhcp .thcp-left { display: flex; align-items: center; gap: 10px; }
#screen-tmhcp .thcp-rank { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-3); min-width: 18px; }
#screen-tmhcp .thcp-name { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); }
#screen-tmhcp .thcp-right { text-align: right; }
#screen-tmhcp .thcp-value { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 800; color: var(--green); line-height: 1; }
#screen-tmhcp .thcp-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; }
#screen-tmhcp .breakdown-card { border: 1.5px solid rgba(0,0,0,0.1); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 16px; background: #f9fdf9; }
#screen-tmhcp .breakdown-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
#screen-tmhcp .breakdown-row:last-child { margin-bottom: 0; }
#screen-tmhcp .b-left { display: flex; align-items: center; gap: 8px; }
#screen-tmhcp .p-label { font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-3); min-width: 36px; }
#screen-tmhcp .p-name { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--text); }
#screen-tmhcp .tee-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--tee2); }
#screen-tmhcp .tee-dot.champion { background: var(--tee1); }
#screen-tmhcp .tee-dot.medal { background: var(--tee2); }
#screen-tmhcp .tee-dot.senior { background: #2f6fd0; }
#screen-tmhcp .tee-dot.forward { background: var(--tee3); }
#screen-tmhcp .b-right { display: flex; align-items: center; gap: 10px; }
#screen-tmhcp .p-hcp { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); min-width: 34px; text-align: right; }
#screen-tmhcp .p-pct { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); min-width: 30px; text-align: right; }
#screen-tmhcp .strokes-info { text-align: right; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); margin-top: 6px; font-style: italic; }
#screen-tmhcp .strokes-info strong { color: var(--green); font-style: normal; }
#screen-tmhcp .match-code-btn { width: 100%; height: 52px;
    background: var(--green); color: #fff;
    border: none; border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
    letter-spacing: 0.08em; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    margin-top: 8px; text-transform: uppercase; }

/* ===== TEAM MATCH · Match Code (screen-tmcode) ===== */
#screen-tmcode .body-area { flex: 1 1 auto; background: #fff; padding: 28px 16px 92px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 28px; }
#screen-tmcode .share-instruction { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
    color: var(--text-2); text-align: center; margin-bottom: 0; }
#screen-tmcode .match-code { font-family: 'Inter', sans-serif; font-size: 36px; font-weight: 800;
    color: var(--green); letter-spacing: 0.12em;
    text-align: center; margin-bottom: 0;
    cursor: pointer; user-select: all; }
#screen-tmcode .or-divider { font-family: 'Roboto', sans-serif; font-size: 13px;
    color: var(--text-3); margin-bottom: 0; }
#screen-tmcode .qr-wrap { width: 180px; height: 180px;
    border: 2px solid var(--text); border-radius: 4px;
    position: relative; margin-bottom: 0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; }
#screen-tmcode .scan-label { position: absolute;
    font-family: 'Inter', sans-serif; font-size: 9px;
    font-weight: 700; letter-spacing: 0.12em;
    color: var(--text); text-transform: uppercase; }
#screen-tmcode .scan-top { top: -14px; left: 50%; transform: translateX(-50%); }
#screen-tmcode .scan-bottom { bottom: -14px; left: 50%; transform: translateX(-50%) rotate(180deg); }
#screen-tmcode .scan-left { left: -14px; top: 50%; transform: translateY(-50%) rotate(-90deg); }
#screen-tmcode .scan-right { right: -14px; top: 50%; transform: translateY(-50%) rotate(90deg); }
#screen-tmcode .qr-inner { width: 140px; height: 140px;
    display: grid; grid-template-columns: repeat(7,1fr);
    grid-template-rows: repeat(7,1fr); gap: 2px; }
#screen-tmcode .qr-cell { background: var(--text); border-radius: 1px; }
#screen-tmcode .qr-cell.w { background: #fff; }
#screen-tmcode .share-btn { width: 180px; height: 44px;
    background: var(--green); color: #fff;
    border: none; border-radius: 8px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    cursor: pointer; margin-bottom: 0;
    transition: opacity 0.15s; }
#screen-tmcode .share-btn:active { opacity: 0.8; }
#screen-tmcode .waiting-wrap { text-align: center; }
#screen-tmcode .waiting-text { font-family: 'Inter', sans-serif; font-size: 13px;
    color: var(--text-2); margin-bottom: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px; }
#screen-tmcode .spinner { width: 16px; height: 16px;
    border: 2px solid rgba(26,107,60,0.2);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    flex-shrink: 0; }
#screen-tmcode to { transform: rotate(360deg); }
#screen-tmcode .skip-link { font-family: 'Inter', sans-serif; font-size: 12px;
    color: var(--text-3); text-align: center; line-height: 1.6;
    cursor: pointer; }
#screen-tmcode .skip-link a { color: var(--text-3); text-decoration: none; border-bottom: 1px solid #ccc; }
#screen-tmcode .toast { display: none; position: absolute;
    top: 180px; left: 50%; transform: translateX(-50%);
    background: var(--green); color: #fff;
    border-radius: 8px; padding: 8px 20px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
    z-index: 40; white-space: nowrap; }
#screen-tmcode .toast.show { display: block; }

/* ===== TEAM MATCH · cloned chrome CSS (header/frame/dock/action-pill) ===== */
/* --- screen-tmopp chrome --- */
#screen-tmopp .action-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-tmopp .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-tmopp .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-tmopp .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-tmopp .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-tmopp .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-tmopp .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-tmopp .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-tmopp .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-tmopp .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-tmopp .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-tmopp .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-tmopp .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-tmopp .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-tmopp .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-tmopp .nav-tab.active { opacity: 1; }
#screen-tmopp .nav-spacer { position: relative; align-self: stretch; }
#screen-tmopp .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-tmopp .nav-tab svg { display: block; }
#screen-tmopp .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-tmopp .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-tmopp .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-tmopp .play-btn span { display: block; }
/* --- screen-tmhcp chrome --- */
#screen-tmhcp .action-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-tmhcp .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-tmhcp .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-tmhcp .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-tmhcp .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-tmhcp .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-tmhcp .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-tmhcp .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-tmhcp .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-tmhcp .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-tmhcp .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-tmhcp .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-tmhcp .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-tmhcp .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-tmhcp .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-tmhcp .nav-tab.active { opacity: 1; }
#screen-tmhcp .nav-spacer { position: relative; align-self: stretch; }
#screen-tmhcp .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-tmhcp .nav-tab svg { display: block; }
#screen-tmhcp .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-tmhcp .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-tmhcp .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-tmhcp .play-btn span { display: block; }
/* --- screen-tmcode chrome --- */
#screen-tmcode .action-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-tmcode .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-tmcode .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-tmcode .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-tmcode .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-tmcode .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-tmcode .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-tmcode .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-tmcode .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-tmcode .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-tmcode .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-tmcode .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-tmcode .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-tmcode .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-tmcode .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-tmcode .nav-tab.active { opacity: 1; }
#screen-tmcode .nav-spacer { position: relative; align-self: stretch; }
#screen-tmcode .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-tmcode .nav-tab svg { display: block; }
#screen-tmcode .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-tmcode .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-tmcode .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-tmcode .play-btn span { display: block; }
/* ===== TEAM MATCH · base layout ===== */
#screen-tmopp{flex-direction:column;background:var(--bg);}
#screen-tmhcp{flex-direction:column;background:var(--bg);}
#screen-tmcode{flex-direction:column;background:var(--bg);}
#screen-tmscore{flex-direction:column;background:var(--bg);}
#screen-tmsummary{flex-direction:column;background:var(--bg);}
#screen-tmfull{flex-direction:column;background:var(--bg);}

/* ===== TEAM MATCH · UI polish (pill fit + toast position) ===== */
/* The screens render display:block in the live app, so the sub-header's intended
   `flex:0 0 44px` is ignored and the gold bar shrink-wraps its content. Restore a
   real fixed height on every redesigned sub-header so the action pills always sit
   inside the bar with margin (consistent across the whole reused flow). */
.sub-header { min-height: 44px; box-sizing: border-box; }
/* Make the ACTIVE TM screens proper flex columns (higher specificity than
   .screen.active so it only applies when shown, preserving show/hide). This lets
   body-area's flex:1 work — it fills the available height and scrolls internally,
   so content clears the fixed bottom dock instead of overflowing under it. */
#screen-tmopp.screen.active, #screen-tmhcp.screen.active, #screen-tmcode.screen.active, #screen-tmscore.screen.active, #screen-tmfull.screen.active, #screen-tmsummary.screen.active { display: flex; }
/* Balance the bottom nav on screens that have no central NEXT button: drop the
   reserved centre column and the spacer so the four tabs space out evenly. */
#screen-tmhcp .bottom-nav, #screen-tmcode .bottom-nav { grid-template-columns: 1fr 1fr 1fr 1fr; }
#screen-tmhcp .nav-spacer, #screen-tmcode .nav-spacer { display: none; }
/* Create Match Code: sleeker pill that clears the dock */
#screen-tmhcp .match-code-btn { height: 50px; margin-top: 4px; margin-bottom: 8px; flex: 0 0 auto; }
#screen-tmopp .action-pill, #screen-tmhcp .action-pill, #screen-tmcode .action-pill,
#screen-tmopp .back-pill,   #screen-tmhcp .back-pill,   #screen-tmcode .back-pill {
  height: 32px; padding: 0 14px; font-size: 11px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
#screen-tmopp .sub-header .title, #screen-tmhcp .sub-header .title, #screen-tmcode .sub-header .title { font-size: 15px; }
/* save toast: sit clearly above the protruding NEXT button, fully visible.
   A global `.toast` rule applies transform:translateX(-50%); since these toasts
   use left/right positioning (not left:50%), that transform must be cancelled. */
#screen-tmopp .toast, #screen-tmopp .toast.show { bottom: 124px; left: 24px; right: 24px; max-width: 320px; margin: 0 auto; transform: none; }
#screen-tmcode .toast, #screen-tmcode .toast.show { transform: none; }

/* ===== TEAM MATCH · 9H Scorecard (screen-tmscore) ===== */
#screen-tmscore .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-tmscore .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-tmscore .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-tmscore .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-tmscore .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-tmscore .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-tmscore .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-tmscore .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-tmscore .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-tmscore .body-area { flex: 1 1 auto; background: #fff; padding: 14px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-tmscore .course-name { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
#screen-tmscore .course-meta { font-family: 'Roboto', sans-serif; font-size: 11px; color: var(--text-3); margin-bottom: 10px; }
#screen-tmscore .best-score-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 8px; }
#screen-tmscore .best-score-label span { color: var(--green); }
#screen-tmscore .stats-bar { display: grid; grid-template-columns: repeat(4,1fr); border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
#screen-tmscore .stat-cell { padding: 8px 4px; text-align: center; border-right: 1px solid rgba(0,0,0,0.1); }
#screen-tmscore .stat-cell:last-child { border-right: none; }
#screen-tmscore .stat-label { display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
#screen-tmscore .stat-value { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); }
#screen-tmscore .stat-value.pos { color: var(--red); }
#screen-tmscore .stat-value.neg { color: var(--blue); }
#screen-tmscore .perspective-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
#screen-tmscore .persp-btn { flex: 1; height: 34px; border-radius: 20px; border: 1.5px solid var(--green); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; background: #fff; color: var(--green); transition: all 0.15s; }
#screen-tmscore .persp-btn.active { background: var(--green); color: #fff; }
#screen-tmscore .sc-table { width: 100%; border-collapse: collapse; font-size: 12px; border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
#screen-tmscore .sc-table thead tr { background: var(--green); }
#screen-tmscore .sc-table th { color: #fff; padding: 8px 4px; text-align: center; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
#screen-tmscore .sc-table tbody tr:nth-child(even) { background: #f7fbf8; }
#screen-tmscore .sc-table td { padding: 8px 4px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.06); color: var(--text); font-family: 'Roboto', sans-serif; }
#screen-tmscore .totals-row td { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; background: #eef5f0; border-bottom: none; }
#screen-tmscore .over-par { color: var(--red) !important; font-weight: 700; }
#screen-tmscore .under-par { color: var(--blue) !important; font-weight: 700; }
#screen-tmscore .stroke-note { font-family: 'Roboto', sans-serif; font-size: 11px; color: var(--text-3); margin-bottom: 12px; }
#screen-tmscore .result-card { border: 1.5px solid #e0e0e0; border-radius: 10px;
    padding: 14px 16px; display: flex; align-items: center;
    justify-content: space-between; background: #f9f9f9; }
#screen-tmscore .result-left { flex: 1; }
#screen-tmscore .result-team { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 4px; }
#screen-tmscore .result-breakdown { font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-3); }
#screen-tmscore .result-score { width: 56px; height: 56px; border-radius: 50%;
    background: var(--gold); display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800;
    color: var(--green); flex-shrink: 0;
    transition: background 0.2s; }
#screen-tmscore .result-score.won { background: var(--gold); color: var(--green); }
#screen-tmscore .result-score.lost { background: var(--red);  color: #fff; }
#screen-tmscore .result-score.draw { background: #aaa;        color: #fff; }
#screen-tmscore .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-tmscore .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-tmscore .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-tmscore .nav-tab.active { opacity: 1; }
#screen-tmscore .nav-spacer { position: relative; align-self: stretch; }
#screen-tmscore .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-tmscore .nav-tab svg { display: block; }
#screen-tmscore .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-tmscore .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-tmscore .numpad-overlay { position: absolute; left: 0; right: 0; bottom: 72px; background: #f5f5f5; border-top: 1px solid #ddd; padding: 10px 12px 12px; z-index: 20; display: none; }
#screen-tmscore .numpad-overlay.open { display: block; }
#screen-tmscore .numpad-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#screen-tmscore .numpad-context { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); }
#screen-tmscore .numpad-display { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 800; color: var(--text); min-width: 40px; text-align: right; }
#screen-tmscore .numpad-ok { background: var(--green); color: #fff; border: none; border-radius: 8px; padding: 8px 20px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }
#screen-tmscore .numpad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#screen-tmscore .num-btn { height: 46px; background: #fff; border: 1px solid #ddd; border-radius: 10px; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 500; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#screen-tmscore .num-btn:active { background: #e8e8e8; }
#screen-tmscore .num-btn.del { font-size: 16px; color: var(--text-3); }
#screen-tmscore .num-btn.zero { grid-column: 1 / 3; }
#screen-tmscore .sc-table td.editable { cursor: pointer; }
#screen-tmscore .sc-table td.editable:hover { background: #f0f9f4 !important; }
#screen-tmscore .sc-table td.editing { background: #fffbe6 !important; outline: 2px solid var(--gold); }
#screen-tmscore .toast { display: none; position: absolute; bottom: 88px; left: 16px; right: 16px; background: var(--green); color: #fff; border-radius: 10px; padding: 12px 16px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; text-align: center; z-index: 40; }
#screen-tmscore .toast.show { display: block; }

/* ===== TEAM MATCH · 18H Scorecard (screen-tmfull) ===== */
#screen-tmfull .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-tmfull .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-tmfull .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-tmfull .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-tmfull .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-tmfull .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-tmfull .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-tmfull .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-tmfull .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-tmfull .body-area { flex: 1 1 auto; background: #fff; padding: 14px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-tmfull .course-name { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
#screen-tmfull .course-meta { font-family: 'Roboto', sans-serif; font-size: 11px; color: var(--text-3); margin-bottom: 8px; }
#screen-tmfull .best-score-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
#screen-tmfull .best-score-label span { color: var(--green); }
#screen-tmfull .stats-bar { display: grid; grid-template-columns: repeat(4,1fr); border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
#screen-tmfull .stat-cell { padding: 8px 4px; text-align: center; border-right: 1px solid rgba(0,0,0,0.1); }
#screen-tmfull .stat-cell:last-child { border-right: none; }
#screen-tmfull .stat-label { display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
#screen-tmfull .stat-value { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); }
#screen-tmfull .stat-value.pos { color: var(--red); }
#screen-tmfull .stat-value.neg { color: var(--blue); }
#screen-tmfull .perspective-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
#screen-tmfull .persp-btn { flex: 1; height: 34px; border-radius: 20px; border: 1.5px solid var(--green); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; background: #fff; color: var(--green); }
#screen-tmfull .persp-btn.active { background: var(--green); color: #fff; }
#screen-tmfull .half-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: var(--green); letter-spacing: 0.06em; text-transform: uppercase; margin: 14px 0 6px; }
#screen-tmfull .sc-table { width: 100%; border-collapse: collapse; font-size: 12px; border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden; margin-bottom: 4px; }
#screen-tmfull .sc-table thead tr { background: var(--green); }
#screen-tmfull .sc-table th { color: #fff; padding: 7px 4px; text-align: center; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
#screen-tmfull .sc-table tbody tr:nth-child(even) { background: #f7fbf8; }
#screen-tmfull .sc-table td { padding: 7px 4px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.06); color: var(--text); font-family: 'Roboto', sans-serif; }
#screen-tmfull .totals-row td { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; background: #eef5f0; border-bottom: none; }
#screen-tmfull .over-par { color: var(--red) !important; font-weight: 700; }
#screen-tmfull .under-par { color: var(--blue) !important; font-weight: 700; }
#screen-tmfull .editable { cursor: pointer; }
#screen-tmfull .editable:hover { background: #f0f9f4 !important; }
#screen-tmfull .editing { background: #fffbe6 !important; outline: 2px solid var(--gold); }
#screen-tmfull .stroke-note { font-family: 'Roboto', sans-serif; font-size: 11px; color: var(--text-3); margin: 4px 0 12px; }
#screen-tmfull .result-card { border: 1.5px solid #e0e0e0; border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; background: #f9f9f9; margin-top: 8px; }
#screen-tmfull .result-left { flex: 1; }
#screen-tmfull .result-team { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 4px; }
#screen-tmfull .result-breakdown { font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-3); }
#screen-tmfull .result-score { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800; color: var(--green); flex-shrink: 0; transition: background 0.2s; }
#screen-tmfull .result-score.won { background: var(--gold); color: var(--green); }
#screen-tmfull .result-score.lost { background: var(--red);  color: #fff; }
#screen-tmfull .result-score.draw { background: #aaa;        color: #fff; }
#screen-tmfull .numpad-overlay { position: absolute; left: 0; right: 0; bottom: 72px; background: #f5f5f5; border-top: 1px solid #ddd; padding: 10px 12px 12px; z-index: 20; display: none; }
#screen-tmfull .numpad-overlay.open { display: block; }
#screen-tmfull .numpad-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#screen-tmfull .numpad-context { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); }
#screen-tmfull .numpad-display { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 800; color: var(--text); min-width: 40px; text-align: right; }
#screen-tmfull .numpad-ok { background: var(--green); color: #fff; border: none; border-radius: 8px; padding: 8px 20px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }
#screen-tmfull .numpad-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
#screen-tmfull .num-btn { height: 46px; background: #fff; border: 1px solid #ddd; border-radius: 10px; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 500; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#screen-tmfull .num-btn:active { background: #e8e8e8; }
#screen-tmfull .num-btn.del { font-size: 16px; color: var(--text-3); }
#screen-tmfull .num-btn.zero { grid-column: 1/3; }
#screen-tmfull .toast { display: none; position: absolute; bottom: 88px; left: 16px; right: 16px; background: var(--green); color: #fff; border-radius: 10px; padding: 12px 16px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; text-align: center; z-index: 40; }
#screen-tmfull .toast.show { display: block; }
#screen-tmfull .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-tmfull .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-tmfull .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-tmfull .nav-tab.active { opacity: 1; }
#screen-tmfull .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-tmfull .nav-tab svg { display: block; }
#screen-tmfull .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-tmfull .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }

/* ===== TEAM MATCH · Game Summary (screen-tmsummary) ===== */
#screen-tmsummary .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-tmsummary .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-tmsummary .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-tmsummary .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-tmsummary .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-tmsummary .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-tmsummary .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-tmsummary .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-tmsummary .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-tmsummary .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-tmsummary .summary-row { width: 100%; height: 48px;
    border: 1.5px solid var(--green); border-radius: 8px;
    padding: 0 14px; display: flex; align-items: center;
    justify-content: space-between;
    font-family: 'Inter', sans-serif; font-size: 14px;
    color: var(--text); background: #fff; margin-bottom: 10px; }
#screen-tmsummary .summary-row.team-active { border-color: var(--gold); border-width: 2px; }
#screen-tmsummary .summary-row.team-dim { border-color: #ccc; opacity: 0.4; }
#screen-tmsummary .row-label { font-weight: 500; }
#screen-tmsummary .row-value { color: var(--text-3); font-size: 13px; }
#screen-tmsummary .section-divider { height: 1px; background: rgba(0,0,0,0.07); margin: 14px 0; }
#screen-tmsummary .hint-text { font-family: 'Inter', sans-serif; font-size: 12px;
    color: var(--text-3); text-align: center;
    margin-top: 20px; font-style: italic; }
#screen-tmsummary .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-tmsummary .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-tmsummary .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-tmsummary .nav-tab.active { opacity: 1; }
#screen-tmsummary .nav-spacer { position: relative; align-self: stretch; }
#screen-tmsummary .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-tmsummary .nav-tab svg { display: block; }
#screen-tmsummary .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-tmsummary .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-tmsummary .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-tmsummary .play-btn span { display: block; }

/* ===== TEAM MATCH · scorecard/summary dock fix (clone trtee nav/play-btn) ===== */
#screen-tmscore .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-tmscore .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-tmscore .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-tmscore .nav-tab.active { opacity: 1; }
#screen-tmscore .nav-spacer { position: relative; align-self: stretch; }
#screen-tmscore .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-tmscore .nav-tab svg { display: block; }
#screen-tmscore .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-tmscore .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-tmscore .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-tmscore .play-btn span { display: block; }
#screen-tmfull .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-tmfull .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-tmscore.tmview .bottom-nav, #screen-tmfull.tmview .bottom-nav { grid-template-columns: 1fr 1fr 1fr 1fr; }
#screen-tmscore.tmview .nav-spacer, #screen-tmfull.tmview .nav-spacer { display: none; }
#screen-tmfull .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-tmfull .nav-tab.active { opacity: 1; }
#screen-tmfull .nav-spacer { position: relative; align-self: stretch; }
#screen-tmfull .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-tmfull .nav-tab svg { display: block; }
#screen-tmfull .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-tmfull .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-tmfull .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-tmfull .play-btn span { display: block; }
#screen-tmsummary .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-tmsummary .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-tmsummary .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-tmsummary .nav-tab.active { opacity: 1; }
#screen-tmsummary .nav-spacer { position: relative; align-self: stretch; }
#screen-tmsummary .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-tmsummary .nav-tab svg { display: block; }
#screen-tmsummary .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-tmsummary .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-tmsummary .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-tmsummary .play-btn span { display: block; }

/* ===== MENU CLUSTER · My Teams (screen-myteams) ===== */
#screen-myteams .section-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin: 4px 2px 10px; }
#screen-myteams .main-team-card { background: linear-gradient(150deg, #1a6b3c 0%, #0e3d22 100%);
    border-radius: 16px; padding: 18px; color: #fff;
    position: relative; overflow: hidden; margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(26,107,60,0.28); }
#screen-myteams .main-badge { position: absolute; top: 14px; right: 14px;
    background: var(--gold); color: var(--green);
    font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 3px 9px; border-radius: 10px; }
#screen-myteams .mt-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 4px; }
#screen-myteams .mt-name { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 800; font-style: italic; margin-bottom: 14px; }
#screen-myteams .mt-members { display: flex; align-items: center; gap: -8px; margin-bottom: 16px; }
#screen-myteams .mt-avatar { width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid #0e3d22; overflow: hidden; margin-right: -10px; background: #2d7a4f; }
#screen-myteams .mt-avatar:last-of-type { margin-right: 10px; }
#screen-myteams .mt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-myteams .mt-size { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
#screen-myteams .mt-stats { display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 14px; }
#screen-myteams .mt-stat { flex: 1; text-align: center; }
#screen-myteams .mt-stat:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.15); }
#screen-myteams .mt-stat-val { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 800; line-height: 1; }
#screen-myteams .mt-stat-val.gold { color: var(--gold); }
#screen-myteams .mt-stat-lbl { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.65); margin-top: 4px; }
#screen-myteams .team-card { background: #fff; border-radius: 12px; border: 1.5px solid rgba(0,0,0,0.07);
    padding: 14px; margin-bottom: 10px; cursor: pointer;
    display: flex; align-items: center; gap: 12px; transition: border-color 0.15s; }
#screen-myteams .team-card:active { border-color: var(--green); background: #f5fdf8; }
#screen-myteams .team-avatars { display: flex; align-items: center; flex-shrink: 0; }
#screen-myteams .team-avatars .ta { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; overflow: hidden; margin-right: -10px; background: #2d7a4f; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
#screen-myteams .team-avatars .ta:last-child { margin-right: 0; }
#screen-myteams .team-avatars .ta img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-myteams .team-info { flex: 1; min-width: 0; margin-left: 6px; }
#screen-myteams .team-name { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-myteams .team-meta { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-top: 2px; }
#screen-myteams .team-chevron { font-size: 20px; font-weight: 700; color: #ccc; flex-shrink: 0; }
#screen-myteams .create-team-btn { width: 100%; height: 52px; border-radius: 14px;
    border: 2px dashed var(--green); background: rgba(26,107,60,0.04);
    color: var(--green); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 6px; }
#screen-myteams .create-team-btn:active { background: rgba(26,107,60,0.1); }
#screen-myteams .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-myteams .play-btn span { display: block; }
#screen-myteams{flex-direction:column;background:var(--bg);}
#screen-myteams.screen.active{display:flex;}

/* ===== My Teams chrome (cloned) ===== */
#screen-myteams .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-myteams .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-myteams .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-myteams .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-myteams .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-myteams .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-myteams .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-myteams .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-myteams .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-myteams .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-myteams .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-myteams .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-myteams .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-myteams .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-myteams .nav-tab.active { opacity: 1; }
#screen-myteams .nav-spacer { position: relative; align-self: stretch; }
#screen-myteams .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-myteams .nav-tab svg { display: block; }
#screen-myteams .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-myteams .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-myteams .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-myteams .play-btn span { display: block; }
#screen-myteams .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-myteams .play-btn span { display: block; }

/* ===== MENU CLUSTER · Game History (screen-matches) ===== */
#screen-matches .type-toggle { display: flex; gap: 8px; margin-bottom: 0; }
#screen-matches .type-btn { flex: 1; height: 40px; border-radius: 20px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; border: 1.5px solid var(--green);
    background: #fff; color: var(--green);
    transition: all 0.15s; letter-spacing: 0.02em; }
#screen-matches .type-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
#screen-matches .filter-row { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; }
#screen-matches .filter-pill { height: 30px; padding: 0 14px; flex-shrink: 0;
    border-radius: 15px; border: 1.5px solid var(--green);
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    cursor: pointer; background: #fff; color: var(--green);
    white-space: nowrap; }
#screen-matches .filter-pill.active { background: var(--green); color: #fff; }
#screen-matches .round-card { display: flex; align-items: center; gap: 0;
    background: #fff; border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.08);
    padding: 14px 12px; margin-bottom: 10px;
    cursor: pointer; transition: border-color 0.15s;
    position: relative; }
#screen-matches .round-card:active { border-color: var(--green); background: #f5fdf8; }
#screen-matches .round-left { flex: 1; min-width: 0; }
#screen-matches .round-date { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
#screen-matches .round-course { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-matches .round-meta { font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
#screen-matches .round-format { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--green); font-weight: 600; }
#screen-matches .round-right { text-align: right; flex-shrink: 0; margin-right: 8px; }
#screen-matches .round-gross { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
#screen-matches .round-par-label { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 4px; }
#screen-matches .round-vspar { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; line-height: 1; }
#screen-matches .round-vspar-label { font-family: 'Inter', sans-serif; font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
#screen-matches .round-chevron { font-size: 20px; font-weight: 700; color: #ccc; flex-shrink: 0; }

/* ===== matches chrome (cloned) ===== */
#screen-matches .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-matches .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-matches .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-matches .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-matches .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-matches .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-matches .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-matches .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-matches .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-matches .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-matches .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-matches .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-matches .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-matches .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-matches .nav-tab.active { opacity: 1; }
#screen-matches .nav-spacer { position: relative; align-self: stretch; }
#screen-matches .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-matches .nav-tab svg { display: block; }
#screen-matches .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-matches .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-matches .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-matches .play-btn span { display: block; }
#screen-matches .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-matches .play-btn span { display: block; }
#screen-matches{flex-direction:column;background:var(--bg);}
#screen-matches.screen.active{display:flex;}

/* ===== notifications chrome (cloned from matches) ===== */
#screen-notifications .type-toggle { display: flex; gap: 8px; margin-bottom: 0; }
#screen-notifications .type-btn { flex: 1; height: 40px; border-radius: 20px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; border: 1.5px solid var(--green);
    background: #fff; color: var(--green);
    transition: all 0.15s; letter-spacing: 0.02em; }
#screen-notifications .type-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
#screen-notifications .filter-row { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; }
#screen-notifications .filter-pill { height: 30px; padding: 0 14px; flex-shrink: 0;
    border-radius: 15px; border: 1.5px solid var(--green);
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    cursor: pointer; background: #fff; color: var(--green);
    white-space: nowrap; }
#screen-notifications .filter-pill.active { background: var(--green); color: #fff; }
#screen-notifications .round-card { display: flex; align-items: center; gap: 0;
    background: #fff; border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.08);
    padding: 14px 12px; margin-bottom: 10px;
    cursor: pointer; transition: border-color 0.15s;
    position: relative; }
#screen-notifications .round-card:active { border-color: var(--green); background: #f5fdf8; }
#screen-notifications .round-left { flex: 1; min-width: 0; }
#screen-notifications .round-date { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
#screen-notifications .round-course { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-notifications .round-meta { font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
#screen-notifications .round-format { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--green); font-weight: 600; }
#screen-notifications .round-right { text-align: right; flex-shrink: 0; margin-right: 8px; }
#screen-notifications .round-gross { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
#screen-notifications .round-par-label { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 4px; }
#screen-notifications .round-vspar { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; line-height: 1; }
#screen-notifications .round-vspar-label { font-family: 'Inter', sans-serif; font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
#screen-notifications .round-chevron { font-size: 20px; font-weight: 700; color: #ccc; flex-shrink: 0; }
#screen-notifications .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-notifications .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-notifications .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-notifications .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-notifications .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-notifications .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-notifications .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-notifications .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-notifications .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-notifications .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-notifications .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-notifications .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-notifications .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-notifications .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-notifications .nav-tab.active { opacity: 1; }
#screen-notifications .nav-spacer { position: relative; align-self: stretch; }
#screen-notifications .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-notifications .nav-tab svg { display: block; }
#screen-notifications .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-notifications .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-notifications .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-notifications .play-btn span { display: block; }
#screen-notifications .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-notifications .play-btn span { display: block; }
#screen-notifications{flex-direction:column;background:var(--bg);}
#screen-notifications.screen.active{display:flex;}


/* ===== MENU CLUSTER · FAQ (screen-faq) ===== */
#screen-faq .search-wrap { position: relative; margin-bottom: 20px; }
#screen-faq .search-input { width: 100%; height: 48px; border-radius: 24px; border: 1.5px solid rgba(0,0,0,0.1);
    background: #fff; padding: 0 16px 0 44px; font-family: 'Inter', sans-serif; font-size: 14px;
    color: var(--text); outline: none; transition: border-color 0.15s; }
#screen-faq .search-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26,107,60,0.08); }
#screen-faq .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
#screen-faq .section-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin: 0 2px 10px; }
#screen-faq .faq-pop { background: var(--green); border-radius: 12px; padding: 14px;
    display: flex; align-items: center; gap: 12px; margin-bottom: 8px; cursor: pointer;
    box-shadow: 0 3px 10px rgba(26,107,60,0.18); }
#screen-faq .fp-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
#screen-faq .fp-q { flex: 1; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }
#screen-faq .fp-chevron { font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.6); flex-shrink: 0; }
#screen-faq .faq-cat-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin: 18px 2px 8px; }
#screen-faq .faq-group { background: #fff; border-radius: 12px; border: 1.5px solid rgba(0,0,0,0.07); overflow: hidden; }
#screen-faq .faq-row { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); cursor: pointer; gap: 12px; }
#screen-faq .faq-row:last-child { border-bottom: none; }
#screen-faq .faq-row:active { background: #f5fdf8; }
#screen-faq .fr-q { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.3; }
#screen-faq .fr-chevron { font-size: 18px; font-weight: 700; color: #ccc; flex-shrink: 0; }
#screen-faq .no-results { display: none; text-align: center; padding: 40px 20px; }
#screen-faq .no-results svg { color: #ccc; margin-bottom: 12px; }
#screen-faq .no-results-text { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-3); }
#screen-faq .no-results-text b { color: var(--text-2); }
#screen-faq .contact-card { margin-top: 20px; background: rgba(225,194,69,0.12); border: 1.5px solid rgba(225,194,69,0.4);
    border-radius: 12px; padding: 16px; text-align: center; }
#screen-faq .contact-title { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
#screen-faq .contact-sub { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
#screen-faq .contact-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 9px 18px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }

/* ===== faq chrome (cloned) ===== */
#screen-faq .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-faq .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-faq .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-faq .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-faq .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-faq .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-faq .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-faq .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-faq .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-faq .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-faq .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-faq .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-faq .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-faq .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-faq .nav-tab.active { opacity: 1; }
#screen-faq .nav-spacer { position: relative; align-self: stretch; }
#screen-faq .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-faq .nav-tab svg { display: block; }
#screen-faq .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-faq .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-faq .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-faq .play-btn span { display: block; }
#screen-faq .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-faq .play-btn span { display: block; }

/* ===== MENU CLUSTER · FAQ Topic (screen-faqtopic) ===== */
#screen-faqtopic .article-head { background: linear-gradient(150deg, #1a6b3c 0%, #0e3d22 100%);
    padding: 22px 22px 24px; color: #fff; }
#screen-faqtopic .breadcrumb { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
#screen-faqtopic .article-title { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 22px; line-height: 1.25; letter-spacing: -0.3px; }
#screen-faqtopic .article-readtime { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 10px; display: flex; align-items: center; gap: 6px; }
#screen-faqtopic .article-body { padding: 22px 22px 8px; }
#screen-faqtopic .article-body p { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.65; color: var(--text-2); margin: 0 0 16px; }
#screen-faqtopic .article-body h3 { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--text); margin: 24px 0 10px; }
#screen-faqtopic .article-body strong { color: var(--text); font-weight: 700; }
#screen-faqtopic .formula-box { background: #f5f7f5; border-left: 3px solid var(--green); border-radius: 8px;
    padding: 14px 16px; margin: 4px 0 18px;
    font-family: 'Roboto Mono', 'Roboto', monospace; font-size: 13px; font-weight: 600;
    color: var(--green); line-height: 1.6; }
#screen-faqtopic .step-list { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: step; }
#screen-faqtopic .step-list li { position: relative; padding: 0 0 14px 38px; counter-increment: step;
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; color: var(--text-2); }
#screen-faqtopic .step-list li::before { content: counter(step); position: absolute; left: 0; top: -1px;
    width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; }
#screen-faqtopic .step-list li:not(:last-child)::after { content: ""; position: absolute; left: 12.5px; top: 26px; bottom: 4px; width: 1.5px; background: rgba(26,107,60,0.2); }
#screen-faqtopic .tip-box { background: rgba(225,194,69,0.12); border: 1px solid rgba(225,194,69,0.4);
    border-radius: 10px; padding: 14px 16px; margin: 4px 0 18px;
    display: flex; gap: 10px; }
#screen-faqtopic .tip-box .tip-icon { color: #b89c20; flex-shrink: 0; margin-top: 1px; }
#screen-faqtopic .tip-box p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.55; }
#screen-faqtopic .tip-box strong { color: #8a6d00; }
#screen-faqtopic .feedback { margin: 8px 22px 0; padding: 18px; border-top: 1px solid rgba(0,0,0,0.08);
    text-align: center; }
#screen-faqtopic .feedback-q { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
#screen-faqtopic .feedback-btns { display: flex; gap: 10px; justify-content: center; }
#screen-faqtopic .fb-btn { display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid rgba(0,0,0,0.12); background: #fff; border-radius: 22px;
    padding: 9px 20px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    color: var(--text-2); cursor: pointer; transition: all 0.15s; }
#screen-faqtopic .fb-btn:active { transform: scale(0.96); }
#screen-faqtopic .fb-btn.yes.selected { background: var(--green); color: #fff; border-color: var(--green); }
#screen-faqtopic .fb-btn.no.selected { background: var(--red); color: #fff; border-color: var(--red); }
#screen-faqtopic .feedback-thanks { display: none; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--green); font-weight: 600; margin-top: 10px; }
#screen-faqtopic .feedback-thanks.visible { display: block; }
#screen-faqtopic .related { padding: 8px 22px 0; }
#screen-faqtopic .related-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin: 16px 0 10px; }
#screen-faqtopic .related-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(0,0,0,0.06); cursor: pointer; gap: 12px; }
#screen-faqtopic .related-row:last-child { border-bottom: none; }
#screen-faqtopic .rr-q { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--green); line-height: 1.3; }
#screen-faqtopic .rr-chevron { font-size: 18px; font-weight: 700; color: #ccc; flex-shrink: 0; }

/* ===== faqtopic chrome (cloned) ===== */
#screen-faqtopic .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-faqtopic .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-faqtopic .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-faqtopic .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-faqtopic .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-faqtopic .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-faqtopic .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-faqtopic .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-faqtopic .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-faqtopic .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-faqtopic .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-faqtopic .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-faqtopic .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-faqtopic .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-faqtopic .nav-tab.active { opacity: 1; }
#screen-faqtopic .nav-spacer { position: relative; align-self: stretch; }
#screen-faqtopic .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-faqtopic .nav-tab svg { display: block; }
#screen-faqtopic .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-faqtopic .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-faqtopic .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-faqtopic .play-btn span { display: block; }
#screen-faqtopic .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-faqtopic .play-btn span { display: block; }
#screen-faq{flex-direction:column;background:var(--bg);}
#screen-faq.screen.active{display:flex;}
#screen-faqtopic{flex-direction:column;background:var(--bg);}
#screen-faqtopic.screen.active{display:flex;}

/* ===== Hamburger Menu overlay ===== */
/* ===== Hamburger Menu — true overlay (blurs current screen) ===== */
.menu-overlay { position: fixed; inset: 0; z-index: 1000; display: none; }
.menu-overlay.open { display: block; }
.menu-scrim { position: absolute; inset: 0; background: rgba(8,28,16,0.40);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .25s ease; }
.menu-overlay.open .menu-scrim { opacity: 1; }
#menuOverlay .menu-panel { position: absolute; top: 0; right: 0; height: 100%;
  width: 86%; max-width: 330px; background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,0.30);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow-y: auto; }
.menu-overlay.open #menuOverlay .menu-panel, #menuOverlay.open .menu-panel { transform: translateX(0); }
#menuOverlay .menu-header { background: var(--green-dark);
    padding: 52px 20px 20px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    flex-shrink: 0; }
#menuOverlay .menu-avatar-wrap { width: 76px; height: 76px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.6);
    overflow: hidden; background: var(--green);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
#menuOverlay .menu-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
#menuOverlay .menu-user-info { display: flex; flex-direction: column; gap: 4px; }
#menuOverlay .menu-user-name { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700;
    color: #fff; font-style: italic; }
#menuOverlay .menu-account-tier { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    color: var(--gold); }
#menuOverlay .menu-items { flex: 1; overflow-y: auto; padding: 6px 0; }
#menuOverlay .menu-lang { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid rgba(0,0,0,0.08); }
#menuOverlay .menu-lang-label { font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:#374151; }
#menuOverlay .menu-lang-seg { display:flex; border:1px solid #1a6b3c; border-radius:18px; overflow:hidden; }
#menuOverlay .menu-lang-opt { background:#fff; border:none; padding:6px 16px; font-size:13px; font-weight:700; color:#1a6b3c; cursor:pointer; }
#menuOverlay .menu-lang-opt.active { background:#1a6b3c; color:#fff; }
#menuOverlay .menu-item { display: flex; align-items: center; justify-content: space-between;
    padding: 15px 20px;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
    color: var(--text); cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background 0.1s; }
#menuOverlay .menu-item:last-child { border-bottom: none; }
.menu-badge-pro { background: var(--green); color:#fff; font-size:0.6rem; font-weight:800; letter-spacing:0.05em; padding:2px 7px; border-radius:10px; margin-left:auto; margin-right:8px; }
#screen-editcourses { flex-direction: column; background: var(--bg, #f4f6f4); }#screen-editcourses.active { display: flex; }
#screen-editcourses .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-editcourses .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-editcourses .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-editcourses .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-editcourses .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-editcourses .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-editcourses .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-editcourses .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-editcourses .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-editcourses .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-editcourses .body-area { flex: 1 1 auto; background: var(--bg, #f4f6f4); padding: 20px 16px 40px; overflow-y: auto; min-height: 0; }
#screen-editcourses .ec-intro { font-size:0.85rem; color:var(--text-2, #666); line-height:1.45; margin:4px 4px 14px; }
#screen-editcourses .ec-search { width:100%; box-sizing:border-box; padding:12px 14px; border:1.5px solid var(--border, #ddd); border-radius:12px; font-size:0.95rem; margin-bottom:14px; outline:none; }
#screen-editcourses .ec-search:focus { border-color:var(--green); }
#screen-editcourses .ec-list { display:flex; flex-direction:column; gap:8px; }
#screen-editcourses .ec-course-row { display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--border, #e5e5e5); border-radius:12px; padding:14px 14px; cursor:pointer; transition:border-color 0.15s, background 0.15s; }
#screen-editcourses .ec-course-row:hover { border-color:var(--green); background:#f5fdf8; }
#screen-editcourses .ec-course-row:active { background:#e8f5e9; }
#screen-editcourses .ec-course-main { flex:1; min-width:0; }
#screen-editcourses .ec-course-name { font-size:0.98rem; font-weight:700; color:var(--text, #1a1a1a); }
#screen-editcourses .ec-course-meta { font-size:0.78rem; color:var(--text-3, #888); margin-top:2px; }
#screen-editcourses .ec-course-chevron { color:var(--green); font-size:1.3rem; flex-shrink:0; }
#screen-editcourses .ec-empty { text-align:center; color:var(--text-3, #999); padding:32px 16px; font-size:0.9rem; }

/* ===== subscription screen ===== */
#screen-subscription { flex-direction: column; background: var(--bg, #f4f6f4); }
#screen-subscription.active { display: flex; }
#screen-subscription .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-subscription .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-subscription .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-subscription .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-subscription .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-subscription .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-subscription .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-subscription .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-subscription .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-subscription .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-subscription .body-area { flex: 1 1 auto; background: var(--bg, #f4f6f4); padding: 20px 16px 40px; overflow-y: auto; min-height: 0; }
#screen-subscription .sub-card { background:#fff; border:1.5px solid var(--border,#e5e5e5); border-radius:16px; padding:22px 20px; }
#screen-subscription .sub-status-badge { display:inline-block; font-size:0.68rem; font-weight:800; letter-spacing:0.06em; padding:4px 12px; border-radius:12px; margin-bottom:12px; }
#screen-subscription .sub-status-badge.pro { background:var(--green); color:#fff; }
#screen-subscription .sub-status-badge.free { background:#eee; color:#666; }
#screen-subscription .sub-title { font-size:1.25rem; font-weight:800; color:var(--text,#1a1a1a); margin-bottom:6px; }
#screen-subscription .sub-desc { font-size:0.9rem; color:var(--text-2,#666); line-height:1.5; margin-bottom:18px; }
#screen-subscription .sub-rows { margin-top:8px; }
#screen-subscription .sub-row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--border,#eee); }
#screen-subscription .sub-row:last-child { border-bottom:none; }
#screen-subscription .sub-row-label { font-size:0.85rem; color:var(--text-3,#888); }
#screen-subscription .sub-row-val { font-size:0.9rem; font-weight:700; color:var(--text,#1a1a1a); text-align:right; }
#screen-subscription .sub-row-val.ok { color:var(--green); }
#screen-subscription .sub-row-val.warn { color:#c0392b; }
#screen-subscription .sub-cta { width:100%; padding:14px; background:var(--green); color:#fff; border:none; border-radius:12px; font-size:0.98rem; font-weight:800; cursor:pointer; }
#screen-subscription .sub-action-wrap { margin-top:20px; }
#screen-subscription .sub-cancel-btn { width:100%; padding:14px; background:#fff; color:#c0392b; border:1.5px solid #e0b4ae; border-radius:12px; font-size:0.95rem; font-weight:700; cursor:pointer; }
#screen-subscription .sub-cancel-btn:active { background:#fdf0ee; }
#screen-subscription .sub-cancelled-note { background:#fdf6ec; border:1.5px solid var(--gold,#e1c245); border-radius:12px; padding:16px 18px; font-size:0.88rem; color:#6b5518; line-height:1.55; }
#screen-subscription .sub-cancelled-note b { color:var(--green); }
/* dialogs (shared look) */
#screen-subscription .sub-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.5); display:none; align-items:center; justify-content:center; z-index:60; padding:24px; }
#screen-subscription .sub-overlay.visible { display:flex; }
#screen-subscription .sub-dialog { background:#fff; border-radius:18px; padding:24px 22px; max-width:340px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,0.25); }
#screen-subscription .sub-dialog-title { font-size:1.15rem; font-weight:800; color:var(--text,#1a1a1a); margin-bottom:10px; }
#screen-subscription .sub-dialog-text { font-size:0.9rem; color:var(--text-2,#555); line-height:1.55; margin-bottom:20px; }
#screen-subscription .sub-dialog-text b { color:var(--green); }
#screen-subscription .sub-dialog-actions { display:flex; gap:10px; }
#screen-subscription .sub-dialog-btn { flex:1; padding:12px; border-radius:10px; font-size:0.92rem; font-weight:700; cursor:pointer; border:1.5px solid transparent; }
#screen-subscription .sub-dialog-btn.no { background:#f2f2f2; color:var(--text,#333); }
#screen-subscription .sub-dialog-btn.yes { background:#c0392b; color:#fff; }
#screen-subscription .sub-dialog-btn.ok { background:var(--green); color:#fff; }
#menuOverlay .menu-item:hover { background: #f5fdf8; }
#menuOverlay .menu-item:active { background: #e8f5e9; }
#menuOverlay .menu-chevron { font-size: 18px; font-weight: 700; color: var(--green); }


/* ===== hide scrollbars (new-UI) — keep scroll, drop the grey bar ===== */
.screen ::-webkit-scrollbar, #menuOverlay ::-webkit-scrollbar,
.body-area::-webkit-scrollbar, .filter-row::-webkit-scrollbar, .type-toggle::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.screen, .screen *, #menuOverlay, #menuOverlay * { scrollbar-width: none; -ms-overflow-style: none; }

/* ===== HOME (redesign — clean & calm) ===== */
#screen-home { flex-direction: column; background: #ffffff; }
#screen-home.screen.active { display: flex; }
#screen-home .home-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 112px; }

/* hero cover */
#screen-home .hh-cover { position: relative; height: 176px; background-size: cover; background-position: center;
  background-image: linear-gradient(180deg,#dff1f6 0%,#c4e6cf 42%,#5fae79 78%,#2f8a52 100%); }
#screen-home .hh-cover::after { content:""; position:absolute; left:0; right:0; bottom:0; height:110px;
  background: linear-gradient(transparent, rgba(8,30,16,0.62)); pointer-events:none; }
#screen-home .hh-cover-cam { position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: rgba(14,61,34,0.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; }
#screen-home .hh-cover-cam:active { background: rgba(14,61,34,0.8); }

/* buddies + hcp — green box overlaid top-right on the cover */
#screen-home .hh-cover-stats { position:absolute; top:14px; right:14px; z-index:3; background:#1a6b3c;
  border-radius:14px; padding:8px 15px; display:flex; flex-direction:column; gap:1px; box-shadow:0 6px 16px rgba(8,30,16,0.35); }
#screen-home .hh-cs-row { font-family:Inter,sans-serif; font-size:12px; font-weight:600; letter-spacing:0.05em; color:rgba(255,255,255,0.92); line-height:1.55; white-space:nowrap; }
#screen-home .hh-cs-row b { font-size:17px; font-weight:800; margin-right:5px; color:#fff; }
#screen-home .hh-cs-buddies { cursor:pointer; }
#screen-home .hh-cs-buddies b { color:#e1c245; }

/* avatar (top-left) + name (bottom-left), overlaid on the cover */
#screen-home .hh-avatar-wrap { position:absolute; top:16px; left:16px; z-index:2; width:74px; height:74px; }
#screen-home .hh-avatar { width:74px; height:74px; border-radius:50%; border:3px solid #e1c245;
  object-fit:cover; background:#2d7a4f; box-shadow:0 6px 16px rgba(0,0,0,0.32); display:block; }
#screen-home .hh-avatar-cam { position:absolute; right:-2px; bottom:2px; width:28px; height:28px; border-radius:50%;
  border:2px solid #fff; background:#1a6b3c; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
#screen-home .hh-name { position:absolute; left:18px; bottom:14px; right:96px; z-index:2; font-family:Inter,sans-serif; font-size:21px; font-weight:800;
  color:#fff; letter-spacing:-0.2px; text-shadow:0 1px 6px rgba(0,0,0,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* sections — elevated cards for depth */
#screen-home .hh-section { margin: 14px 14px 0; background:#fff; border:1px solid #e6f0ea; border-radius:18px;
  padding: 15px 0 14px; box-shadow: 0 8px 22px rgba(16,61,34,0.10), 0 2px 5px rgba(0,0,0,0.045); }
#screen-home .hh-sec-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 12px; }
#screen-home .hh-sec-title { font-family: Inter, sans-serif; font-size: 16px; font-weight: 800; color: #14321f; }
#screen-home .hh-sec-title span { color: #9aa3a0; font-weight: 600; font-size: 13px; }
#screen-home .hh-viewall { background: none; border: none; color: #1a6b3c; font-family: Inter, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; padding:4px 2px; }
#screen-home .hh-row { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px; }
#screen-home .hh-empty { color:#9aa3a0; font-family:Inter,sans-serif; font-size:13px; padding: 2px 18px 8px; }
#screen-home .hh-course-card { flex:0 0 auto; min-width:132px; background:#fff; border:1px solid #e7ece9; border-radius:14px; padding:12px 14px; box-shadow:0 1px 3px rgba(0,0,0,0.05); cursor:pointer; }
#screen-home .hh-course-name { font-family:Inter,sans-serif; font-size:14px; font-weight:700; color:#14321f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
#screen-home .hh-course-meta { font-family:Inter,sans-serif; font-size:12px; color:#777; margin-top:2px; }
#screen-home .hh-course-best { font-family:Inter,sans-serif; font-size:15px; font-weight:800; margin-top:8px; line-height:1; }
#screen-home .hh-course-best span { font-size:9px; font-weight:600; letter-spacing:0.08em; color:#9aa3a0; }
#screen-notifications .notif-list { display:flex; flex-direction:column; gap:10px; padding:4px 0 12px; }
#screen-notifications .notif-item { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e7ece9; border-radius:14px; padding:13px 14px; box-shadow:0 1px 3px rgba(0,0,0,0.05); position:relative; }
#screen-notifications .notif-item.unread { background:#f3faf5; border-color:#cfe6d8; }
#screen-notifications .notif-ic { font-size:20px; width:38px; height:38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:#eef4f0; border-radius:10px; }
#screen-notifications .notif-body { flex:1; min-width:0; }
#screen-notifications .notif-title { font-family:Inter,sans-serif; font-size:14px; font-weight:600; color:#14321f; line-height:1.3; }
#screen-notifications .notif-sub { font-family:Inter,sans-serif; font-size:12px; color:#777; margin-top:2px; }
#screen-notifications .notif-dot { width:9px; height:9px; border-radius:50%; background:#1a6b3c; flex:0 0 auto; }
#screen-notifications .notif-empty { color:#9aa3a0; font-family:Inter,sans-serif; font-size:14px; text-align:center; padding:40px 18px; }
.header-icons .icon-btn .notif-badge { position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#e1c245; color:#14321f; font-family:Inter,sans-serif; font-size:10px; font-weight:800; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--green); }

/* round/match card */
#screen-home .hh-card { flex: 0 0 80%; max-width: 290px; background:#fafcfb; border:1px solid #e9f0ec; border-radius:14px;
  padding:13px 15px; display:flex; align-items:center; justify-content:space-between; box-shadow: none; }
#screen-home .hh-card-date { font-family:Inter,sans-serif; font-size:11px; color:#9aa3a0; font-weight:500; }
#screen-home .hh-card-course { font-family:Inter,sans-serif; font-size:15px; font-weight:700; color:#14321f; margin:2px 0 1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
#screen-home .hh-card-meta { font-family:Inter,sans-serif; font-size:12px; color:#777; }
#screen-home .hh-card-fmt { font-family:Inter,sans-serif; font-size:12px; font-weight:700; color:#1a6b3c; margin-top:4px; }
#screen-home .hh-card-r { text-align:right; flex:0 0 auto; padding-left:10px; }
#screen-home .hh-card-gross { font-family:Inter,sans-serif; font-size:24px; font-weight:800; color:#14321f; line-height:1; }
#screen-home .hh-card-lbl { font-family:Inter,sans-serif; font-size:9px; font-weight:600; letter-spacing:0.08em; color:#9aa3a0; margin-top:1px; }
#screen-home .hh-card-vspar { font-family:Inter,sans-serif; font-size:14px; font-weight:700; margin-top:6px; line-height:1; }
#screen-home .hh-match-badge { flex:0 0 auto; width:54px; height:54px; border-radius:50%; background:#e1c245; color:#0e3d22;
  font-family:Inter,sans-serif; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; }
#screen-home .hh-match-badge.loss { background:#c85a4a; color:#fff; }
#screen-home .hh-match-badge.as { background:#e7ece9; color:#555; }

/* team card */
#screen-home .hh-team-card { flex: 0 0 80%; max-width: 290px; background: linear-gradient(160deg,#1a6b3c 0%,#0e3d22 100%);
  border-radius:16px; padding:14px 16px; color:#fff; }
#screen-home .hh-team-top { display:flex; align-items:center; justify-content:space-between; }
#screen-home .hh-team-label { font-family:Inter,sans-serif; font-size:9px; font-weight:700; letter-spacing:0.1em; color:#e1c245; }
#screen-home .hh-team-main { font-family:Inter,sans-serif; font-size:9px; font-weight:700; color:#0e3d22; background:#e1c245; border-radius:10px; padding:2px 8px; }
#screen-home .hh-team-name { font-family:Inter,sans-serif; font-size:18px; font-weight:800; font-style:italic; margin:6px 0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#screen-home .hh-team-mid { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
#screen-home .hh-team-mid img { width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,0.6); object-fit:cover; background:#2d7a4f; }
#screen-home .hh-team-mid span { font-family:Inter,sans-serif; font-size:13px; color:rgba(255,255,255,0.85); }
#screen-home .hh-team-stats { display:flex; gap:8px; border-top:1px solid rgba(255,255,255,0.15); padding-top:10px; }
#screen-home .hh-team-stats > div { flex:1; text-align:center; }
#screen-home .hh-team-stats b { display:block; font-family:Inter,sans-serif; font-size:15px; font-weight:800; color:#fff; }
#screen-home .hh-team-stats span { font-family:Inter,sans-serif; font-size:9px; font-weight:600; letter-spacing:0.06em; color:rgba(255,255,255,0.6); }

#menuOverlay .menu-signout { display:flex; align-items:center; gap:12px; padding:16px 22px; margin-top:6px; border-top:1px solid #eee; color:#c85a4a; font-family:Inter,sans-serif; font-size:15px; font-weight:600; cursor:pointer; }
#menuOverlay .menu-signout:active { background:#faf0ee; }
#menuOverlay .menu-signout svg { width:20px; height:20px; flex:0 0 20px; }

/* ===== profile chrome (cloned) ===== */
#screen-profile .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-profile .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-profile .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-profile .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-profile .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-profile .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-profile .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-profile .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-profile .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-profile .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-profile .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-profile .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-profile .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-profile .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-profile .nav-tab.active { opacity: 1; }
#screen-profile .nav-spacer { position: relative; align-self: stretch; }
#screen-profile .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-profile .nav-tab svg { display: block; }
#screen-profile .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-profile .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-profile .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-profile .play-btn span { display: block; }
#screen-profile .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-profile .play-btn span { display: block; }
#screen-profile{flex-direction:column;background:var(--bg);}
#screen-profile{flex-direction:column;background:var(--bg);}
#screen-profile.screen.active{display:flex;}

/* ===== content · screen-profile ===== */
#screen-profile .profile-hero { background: linear-gradient(160deg, #1a6b3c 0%, #0e3d22 100%);
    padding: 24px 20px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 12px; }
#screen-profile .avatar-wrap { width: 88px; height: 88px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.7);
    overflow: hidden; background: #2d7a4f;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    flex-shrink: 0; }
#screen-profile .avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-profile .profile-name { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 800;
    color: #fff; font-style: italic; text-align: center; letter-spacing: -0.3px; }
#screen-profile .profile-username { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,0.65); text-align: center; margin-top: -8px; }
#screen-profile .profile-meta-row { display: flex; align-items: center; gap: 16px; justify-content: center; }
#screen-profile .profile-meta-item { display: flex; align-items: center; gap: 5px;
    font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255,255,255,0.75); }
#screen-profile .profile-meta-item svg { opacity: 0.7; }
#screen-profile .tier-badge { background: rgba(225,194,69,0.2); border: 1px solid rgba(225,194,69,0.6);
    border-radius: 12px; padding: 3px 10px;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; }
#screen-profile .action-row { display: flex; gap: 10px; padding: 14px 16px 0; }
#screen-profile .action-btn { flex: 1; height: 40px; border-radius: 20px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
    letter-spacing: 0.03em; border: none; }
#screen-profile .action-btn.primary { background: var(--green); color: #fff; }
#screen-profile .action-btn.secondary { background: #fff; color: var(--green); border: 1.5px solid var(--green); }
#screen-profile .section { padding: 14px 16px 0; }
#screen-profile .section-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3);
    margin-bottom: 10px; }
#screen-profile .stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 8px; }
#screen-profile .stat-card { background: #fff; border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.07);
    padding: 12px 10px; text-align: center; }
#screen-profile .stat-value { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 800;
    color: var(--text); line-height: 1; }
#screen-profile .stat-value.green { color: var(--green); }
#screen-profile .stat-value.gold { color: #c9a820; }
#screen-profile .stat-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3);
    margin-top: 4px; }
#screen-profile .hcp-card { background: #fff; border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.07);
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; }
#screen-profile .hcp-left { display: flex; flex-direction: column; gap: 2px; }
#screen-profile .hcp-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
#screen-profile .hcp-value { font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 900; color: var(--green); line-height: 1; }
#screen-profile .hcp-right { text-align: right; }
#screen-profile .hcp-course-label { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
#screen-profile .hcp-course-name { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--text); }
#screen-profile .best-card { background: #fff; border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.07);
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; }
#screen-profile .best-left { flex: 1; min-width: 0; }
#screen-profile .best-top-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 3px; }
#screen-profile .best-course { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-profile .best-meta { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-top: 2px; }
#screen-profile .best-score-wrap { text-align: right; flex-shrink: 0; margin-left: 12px; }
#screen-profile .best-score { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 900; color: var(--blue); line-height: 1; }
#screen-profile .best-score-label { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }

/* ===== editprofile chrome (cloned) ===== */
#screen-editprofile .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-editprofile .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-editprofile .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-editprofile .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-editprofile .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-editprofile .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-editprofile .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-editprofile .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-editprofile .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-editprofile .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-editprofile .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-editprofile .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-editprofile .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-editprofile .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-editprofile .nav-tab.active { opacity: 1; }
#screen-editprofile .nav-spacer { position: relative; align-self: stretch; }
#screen-editprofile .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-editprofile .nav-tab svg { display: block; }
#screen-editprofile .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-editprofile .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-editprofile .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-editprofile .play-btn span { display: block; }
#screen-editprofile .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-editprofile .play-btn span { display: block; }
#screen-editprofile{flex-direction:column;background:var(--bg);}
#screen-editprofile{flex-direction:column;background:var(--bg);}
#screen-editprofile.screen.active{display:flex;}

/* ===== content · screen-editprofile ===== */
#screen-editprofile .save-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 16px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-editprofile .avatar-main-wrap { position: relative; width: 88px; height: 88px; }
#screen-editprofile .avatar-main { width: 88px; height: 88px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.7);
    overflow: hidden; background: #2d7a4f;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
#screen-editprofile .avatar-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-editprofile .avatar-change-btn { position: absolute; bottom: 0; right: 0;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--gold); border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--green); }
#screen-editprofile .avatar-hint { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(255,255,255,0.55); }
#screen-editprofile .avatar-picker { display: none; padding: 14px 16px 16px;
    background: #fff; border-bottom: 1px solid rgba(0,0,0,0.07); }
#screen-editprofile .avatar-picker.visible { display: block; }
#screen-editprofile .picker-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 10px; }
#screen-editprofile .avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
#screen-editprofile .av-opt { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    border: 2.5px solid transparent; cursor: pointer; transition: border-color 0.15s; }
#screen-editprofile .av-opt.selected { border-color: var(--green); box-shadow: 0 0 0 2px rgba(26,107,60,0.25); }
#screen-editprofile .av-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-editprofile .cover-grid { grid-template-columns: repeat(2, 1fr); }
#screen-editprofile .cover-grid .av-opt { aspect-ratio: 2.67 / 1; border-radius: 10px; }
#screen-editprofile .picker-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
#screen-editprofile .pager-nav { width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0,0,0,0.06); color: var(--text); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#screen-editprofile .pager-nav:disabled { opacity: 0.3; cursor: default; }
#screen-editprofile .pager-dot { width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,0.06); color: var(--text-3); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; }
#screen-editprofile .pager-dot.active { background: var(--green); color: #fff; }
#screen-editprofile .picker-close-row { display: flex; justify-content: flex-end; margin-top: 10px; }
#screen-editprofile .picker-close-btn { background: var(--green); color: #fff; border: none; border-radius: 16px; padding: 6px 16px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; }
#screen-editprofile .section { padding: 14px 16px 0; }
#screen-editprofile .section-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin-bottom: 8px; padding-left: 2px; }
#screen-editprofile .form-group { background: #fff; border-radius: 12px; border: 1.5px solid rgba(0,0,0,0.07); overflow: hidden; }
#screen-editprofile .form-row { padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.06); }
#screen-editprofile .form-row:last-child { border-bottom: none; }
#screen-editprofile .form-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 5px; }
#screen-editprofile .form-input { width: 100%; border: none; background: transparent;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text);
    outline: none; padding: 0; }
#screen-editprofile .form-input::placeholder { color: #bbb; font-weight: 400; }
#screen-editprofile .form-input:focus { color: var(--green); }
#screen-editprofile .hcp-row { display: flex; align-items: center; justify-content: space-between; }
#screen-editprofile .hcp-badge { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--text-3); background: rgba(0,0,0,0.05); border-radius: 8px; padding: 2px 8px; }
#screen-editprofile .gender-pills { display: flex; gap: 8px; padding-top: 2px; }
#screen-editprofile .g-pill { flex: 1; height: 34px; border-radius: 17px; border: 1.5px solid rgba(0,0,0,0.12); background: #fff; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-3); cursor: pointer; transition: all 0.15s; }
#screen-editprofile .g-pill.active { background: var(--green); color: #fff; border-color: var(--green); }
#screen-editprofile .save-toast { display: none; position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    background: var(--green); color: #fff; border-radius: 20px; padding: 10px 20px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    white-space: nowrap; z-index: 40; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    animation: fadeUp 0.25s ease; }
#screen-editprofile from { opacity:0; transform: translateX(-50%) translateY(8px); }
#screen-editprofile to { opacity:1; transform: translateX(-50%) translateY(0); }
#screen-editprofile .banner-wrap { position: relative; width: 100%; height: 150px; flex-shrink: 0;
    background: linear-gradient(135deg, #1a6b3c 0%, #0e3d22 55%, #c9a820 100%);
    overflow: hidden; }
#screen-editprofile .banner-wrap .banner-img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: none; }
#screen-editprofile .banner-edit-btn { position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #fff;
    background: rgba(0,0,0,0.4); border: 1.5px solid rgba(255,255,255,0.7);
    backdrop-filter: blur(2px);
    transition: background 0.15s; }
#screen-editprofile .banner-edit-btn:hover { background: rgba(0,0,0,0.6); }
#screen-editprofile .banner-edit-btn:active { background: rgba(0,0,0,0.7); }
#screen-editprofile .avatar-hero { margin-top: -110px; position: relative; z-index: 2;
    padding: 0 20px 14px;
    display: flex; flex-direction: column; align-items: center; gap: 8px; }
#screen-editprofile .avatar-hero .avatar-hint { color: rgba(255,255,255,0.9); text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
#screen-editprofile .upload-row { margin-bottom: 10px; }
#screen-editprofile .upload-photo-btn { display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 44px; border-radius: 10px;
    background: var(--green); color: #fff;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; border: none;
    box-shadow: 0 2px 8px rgba(26,107,60,0.25); }
#screen-editprofile .picker-divider { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#screen-editprofile .picker-divider::before, #screen-editprofile .picker-divider::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,0.1); }
#screen-editprofile .picker-divider span { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3);
    white-space: nowrap; }
#screen-editprofile .avatar-main.has-upload { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(225,194,69,0.4), 0 4px 16px rgba(0,0,0,0.35); }
#screen-editprofile .upload-badge { display: none; position: absolute; top: -2px; right: -2px;
    background: var(--gold); border-radius: 50%; width: 20px; height: 20px;
    align-items: center; justify-content: center; border: 2px solid #fff; }
#screen-editprofile .upload-badge.visible { display: flex; }
#screen-editprofile .upload-badge svg { display: block; }

/* ===== buddyprofile chrome (cloned) ===== */
#screen-buddyprofile .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-buddyprofile .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-buddyprofile .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-buddyprofile .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-buddyprofile .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-buddyprofile .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-buddyprofile .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-buddyprofile .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-buddyprofile .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-buddyprofile .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-buddyprofile .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-buddyprofile .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-buddyprofile .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-buddyprofile .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-buddyprofile .nav-tab.active { opacity: 1; }
#screen-buddyprofile .nav-spacer { position: relative; align-self: stretch; }
#screen-buddyprofile .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-buddyprofile .nav-tab svg { display: block; }
#screen-buddyprofile .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-buddyprofile .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-buddyprofile .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-buddyprofile .play-btn span { display: block; }
#screen-buddyprofile .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-buddyprofile .play-btn span { display: block; }
#screen-buddyprofile{flex-direction:column;background:var(--bg);}
#screen-buddyprofile{flex-direction:column;background:var(--bg);}
#screen-buddyprofile.screen.active{display:flex;}

/* ===== content · screen-buddyprofile ===== */
#screen-buddyprofile .profile-hero { background: linear-gradient(160deg, #1a6b3c 0%, #0e3d22 100%);
    padding: 24px 20px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 12px; }
#screen-buddyprofile .avatar-wrap { width: 88px; height: 88px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.7);
    overflow: hidden; background: #2d7a4f;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    flex-shrink: 0; }
#screen-buddyprofile .avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-buddyprofile .profile-name { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 800;
    color: #fff; font-style: italic; text-align: center; letter-spacing: -0.3px; }
#screen-buddyprofile .profile-username { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,0.65); text-align: center; margin-top: -8px; }
#screen-buddyprofile .profile-meta-row { display: flex; align-items: center; gap: 16px; justify-content: center; }
#screen-buddyprofile .profile-meta-item { display: flex; align-items: center; gap: 5px;
    font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255,255,255,0.75); }
#screen-buddyprofile .profile-meta-item svg { opacity: 0.7; }
#screen-buddyprofile .tier-badge { background: rgba(225,194,69,0.2); border: 1px solid rgba(225,194,69,0.6);
    border-radius: 12px; padding: 3px 10px;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; }
#screen-buddyprofile .action-row { display: flex; gap: 10px; padding: 14px 16px 0; }
#screen-buddyprofile .action-btn { flex: 1; height: 40px; border-radius: 20px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
    letter-spacing: 0.03em; border: none; }
#screen-buddyprofile .action-btn.primary { background: var(--green); color: #fff; }
#screen-buddyprofile .action-btn.secondary { background: #fff; color: var(--green); border: 1.5px solid var(--green); }
#screen-buddyprofile .section { padding: 14px 16px 0; }
#screen-buddyprofile .section-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3);
    margin-bottom: 10px; }
#screen-buddyprofile .stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 8px; }
#screen-buddyprofile .stat-card { background: #fff; border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.07);
    padding: 12px 10px; text-align: center; }
#screen-buddyprofile .stat-value { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 800;
    color: var(--text); line-height: 1; }
#screen-buddyprofile .stat-value.green { color: var(--green); }
#screen-buddyprofile .stat-value.gold { color: #c9a820; }
#screen-buddyprofile .stat-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3);
    margin-top: 4px; }
#screen-buddyprofile .hcp-card { background: #fff; border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.07);
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; }
#screen-buddyprofile .hcp-left { display: flex; flex-direction: column; gap: 2px; }
#screen-buddyprofile .hcp-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
#screen-buddyprofile .hcp-value { font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 900; color: var(--green); line-height: 1; }
#screen-buddyprofile .hcp-right { text-align: right; }
#screen-buddyprofile .hcp-course-label { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
#screen-buddyprofile .hcp-course-name { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--text); }
#screen-buddyprofile .best-card { background: #fff; border-radius: 10px;
    border: 1.5px solid rgba(0,0,0,0.07);
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; }
#screen-buddyprofile .best-left { flex: 1; min-width: 0; }
#screen-buddyprofile .best-top-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 3px; }
#screen-buddyprofile .best-course { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-buddyprofile .best-meta { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-top: 2px; }
#screen-buddyprofile .best-score-wrap { text-align: right; flex-shrink: 0; margin-left: 12px; }
#screen-buddyprofile .best-score { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 900; color: var(--blue); line-height: 1; }
#screen-buddyprofile .best-score-label { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }

/* ===== settings chrome (cloned) ===== */
#screen-settings .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-settings .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-settings .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-settings .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-settings .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-settings .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-settings .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-settings .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-settings .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-settings .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-settings .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-settings .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-settings .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-settings .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-settings .nav-tab.active { opacity: 1; }
#screen-settings .nav-spacer { position: relative; align-self: stretch; }
#screen-settings .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-settings .nav-tab svg { display: block; }
#screen-settings .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-settings .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-settings .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-settings .play-btn span { display: block; }
#screen-settings .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-settings .play-btn span { display: block; }
#screen-settings{flex-direction:column;background:var(--bg);}
#screen-settings{flex-direction:column;background:var(--bg);}
#screen-settings.screen.active{display:flex;}

/* ===== content · screen-settings ===== */
#screen-settings .edit-field-wrap { display: none; padding: 0 16px 14px; background: #f0faf5;
    border-top: 1px solid rgba(26,107,60,0.12); }
#screen-settings .edit-field-wrap.visible { display: block; }
#screen-settings .edit-field-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3);
    margin-bottom: 6px; margin-top: 12px; }
#screen-settings .edit-field-input { width: 100%; height: 44px; border-radius: 8px;
    border: 1.5px solid rgba(26,107,60,0.35); background: #fff;
    padding: 0 12px; font-family: 'Inter', sans-serif; font-size: 14px;
    color: var(--text); outline: none; }
#screen-settings .edit-field-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26,107,60,0.1); }
#screen-settings .edit-action-row { display: flex; gap: 8px; margin-top: 10px; }
#screen-settings .edit-cancel-btn { flex: 1; height: 40px; border-radius: 20px; border: 1.5px solid #ccc;
    background: #fff; color: var(--text-3); font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700; cursor: pointer; }
#screen-settings .edit-save-btn { flex: 2; height: 40px; border-radius: 20px; border: none;
    background: var(--green); color: #fff; font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700; cursor: pointer; }
#screen-settings .verify-overlay { display: none; position: absolute; inset: 0; border-radius: 42px;
    background: rgba(0,0,0,0.55); z-index: 50;
    align-items: flex-end; justify-content: center; }
#screen-settings .verify-overlay.visible { display: flex; }
#screen-settings .verify-sheet { background: #fff; border-radius: 24px 24px 0 0;
    padding: 24px 20px 36px; width: 100%; }
#screen-settings .verify-handle { width: 40px; height: 4px; background: #ddd; border-radius: 2px;
    margin: 0 auto 18px; }
#screen-settings .verify-title { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 18px;
    color: var(--text); margin-bottom: 6px; }
#screen-settings .verify-sub { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-3);
    margin-bottom: 20px; line-height: 1.5; }
#screen-settings .verify-sub span { color: var(--green); font-weight: 700; }
#screen-settings .verify-code-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
#screen-settings .verify-digit { width: 44px; height: 54px; border-radius: 10px;
    border: 2px solid rgba(0,0,0,0.15); background: #f9f9f9;
    font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 24px;
    text-align: center; color: var(--text); outline: none;
    transition: border-color 0.15s; }
#screen-settings .verify-digit:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(26,107,60,0.1); }
#screen-settings .verify-digit.filled { border-color: var(--green); background: #fff; }
#screen-settings .verify-resend { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3);
    text-align: center; margin-bottom: 18px; }
#screen-settings .verify-resend a { color: var(--green); font-weight: 600; cursor: pointer; text-decoration: none; }
#screen-settings .verify-confirm-btn { width: 100%; height: 48px; border-radius: 24px; border: none;
    background: var(--green); color: #fff; font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 15px; letter-spacing: 0.04em; cursor: pointer; }
#screen-settings .verify-confirm-btn:disabled { background: #ccc; cursor: default; }
#screen-settings .verify-cancel { width: 100%; margin-top: 10px; background: none; border: none;
    font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-3);
    cursor: pointer; padding: 6px; }
#screen-settings .edit-icon-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(26,107,60,0.3);
    background: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--green); flex-shrink: 0; }
#screen-settings .edit-icon-btn:active { background: #f0faf5; }
#screen-settings .account-header { background: linear-gradient(160deg, #1a6b3c 0%, #0e3d22 100%);
    padding: 20px 20px 18px;
    display: flex; align-items: center; gap: 14px; }
#screen-settings .acct-avatar { width: 60px; height: 60px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    overflow: hidden; background: #2d7a4f; flex-shrink: 0; }
#screen-settings .acct-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-settings .acct-info { flex: 1; min-width: 0; }
#screen-settings .acct-name { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 800; color: #fff; font-style: italic; }
#screen-settings .acct-email { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-settings .acct-tier { margin-top: 6px; display: inline-block; background: rgba(225,194,69,0.2); border: 1px solid rgba(225,194,69,0.6); border-radius: 10px; padding: 2px 8px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; }
#screen-settings .section { padding: 14px 16px 0; }
#screen-settings .section-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3);
    margin-bottom: 8px; padding-left: 2px; }
#screen-settings .settings-group { background: #fff; border-radius: 12px;
    border: 1.5px solid rgba(0,0,0,0.07);
    overflow: hidden; }
#screen-settings .settings-row { display: flex; align-items: center; justify-content: space-between;
    padding: 15px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    cursor: pointer; }
#screen-settings .settings-row:last-child { border-bottom: none; }
#screen-settings .settings-row:active { background: #f5fdf8; }
#screen-settings .row-left { display: flex; align-items: center; gap: 12px; }
#screen-settings .row-icon { width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; }
#screen-settings .row-icon.green { background: rgba(26,107,60,0.12); color: var(--green); }
#screen-settings .row-icon.blue { background: rgba(58,123,213,0.12); color: var(--blue); }
#screen-settings .row-icon.gold { background: rgba(225,194,69,0.15); color: #b89c20; }
#screen-settings .row-icon.red { background: rgba(200,90,74,0.12);  color: var(--red); }
#screen-settings .row-icon.grey { background: rgba(0,0,0,0.06);      color: var(--text-3); }
#screen-settings .row-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text); }
#screen-settings .row-sublabel { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-top: 1px; }
#screen-settings .row-right { display: flex; align-items: center; gap: 8px; }
#screen-settings .row-value { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-3); }
#screen-settings .row-chevron { font-size: 18px; font-weight: 700; color: #ccc; }
#screen-settings .row-badge { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; }
#screen-settings .row-badge.connected { background: rgba(26,107,60,0.12); color: var(--green); }
#screen-settings .row-badge.free { background: rgba(225,194,69,0.15); color: #b89c20; }
#screen-settings .toggle { width: 44px; height: 26px; background: #ddd; border-radius: 13px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
#screen-settings .toggle.on { background: var(--green); }
#screen-settings .toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: transform 0.2s; }
#screen-settings .toggle.on::after { transform: translateX(18px); }
#screen-settings .danger-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--red); }
#screen-settings .signout-btn { width: 100%; height: 48px; border-radius: 12px; border: 1.5px solid var(--red);
    background: #fff; color: var(--red);
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 14px; }

/* ===== createteam chrome (cloned) ===== */
#screen-createteam .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-createteam .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-createteam .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-createteam .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-createteam .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-createteam .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-createteam .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-createteam .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-createteam .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-createteam .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-createteam .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-createteam .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-createteam .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-createteam .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-createteam .nav-tab.active { opacity: 1; }
#screen-createteam .nav-spacer { position: relative; align-self: stretch; }
#screen-createteam .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-createteam .nav-tab svg { display: block; }
#screen-createteam .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-createteam .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-createteam .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-createteam .play-btn span { display: block; }
#screen-createteam .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-createteam .play-btn span { display: block; }
#screen-createteam{flex-direction:column;background:var(--bg);}
#screen-createteam{flex-direction:column;background:var(--bg);}
#screen-createteam.screen.active{display:flex;}

/* ===== content · screen-createteam ===== */
#screen-createteam .field-label { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin: 0 2px 8px; }
#screen-createteam .field-block { margin-bottom: 20px; }
#screen-createteam .name-input { width: 100%; height: 50px; border-radius: 12px;
    border: 1.5px solid rgba(0,0,0,0.12); background: #fff;
    padding: 0 14px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600;
    color: var(--text); outline: none; transition: border-color 0.15s; }
#screen-createteam .name-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26,107,60,0.1); }
#screen-createteam .name-input.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,90,74,0.12); }
#screen-createteam .error-msg { display: none; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--red); margin-top: 6px; padding-left: 2px; }
#screen-createteam .error-msg.visible { display: block; }
#screen-createteam .size-pills { display: flex; gap: 10px; }
#screen-createteam .size-pill { flex: 1; height: 54px; border-radius: 12px;
    border: 1.5px solid rgba(0,0,0,0.12); background: #fff;
    font-family: 'Inter', sans-serif; cursor: pointer; transition: all 0.15s;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#screen-createteam .size-pill .sp-num { font-size: 18px; font-weight: 800; color: var(--text); }
#screen-createteam .size-pill .sp-lbl { font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
#screen-createteam .size-pill.active { border-color: var(--green); background: rgba(26,107,60,0.06); }
#screen-createteam .size-pill.active .sp-num { color: var(--green); }
#screen-createteam .size-pill.active .sp-lbl { color: var(--green); }
#screen-createteam .select-counter { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); margin: 0 2px 10px; }
#screen-createteam .select-counter b { color: var(--green); }
#screen-createteam .select-counter.full b { color: var(--gold); }
#screen-createteam .buddy-carousel { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; }
#screen-createteam .buddy-chip { flex-shrink: 0; width: 72px; cursor: pointer; position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px; }
#screen-createteam .bc-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
    border: 2.5px solid transparent; background: #2d7a4f; transition: border-color 0.15s; }
#screen-createteam .bc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-createteam .bc-name { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72px; }
#screen-createteam .bc-hcp { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; color: var(--green); text-align: center; margin-top: -3px; }
#screen-createteam .bc-hcp span { font-weight: 500; color: var(--text-3); }
#screen-createteam .add-guest-chip { flex-shrink: 0; width: 72px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px; }
#screen-createteam .ag-circle { width: 60px; height: 60px; border-radius: 50%;
    border: 2.5px dashed var(--green); background: rgba(26,107,60,0.05);
    display: flex; align-items: center; justify-content: center; color: var(--green); }
#screen-createteam .add-guest-chip .bc-name { color: var(--green); font-weight: 700; }
#screen-createteam .buddy-chip.guest .bc-avatar { border-color: var(--gold); background: #c9a820; }
#screen-createteam .buddy-chip.guest.selected .bc-avatar { border-color: var(--gold); }
#screen-createteam .guest-tag { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    background: var(--gold); color: var(--green);
    font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
#screen-createteam .guest-overlay { display: none; position: absolute; inset: 0; border-radius: 42px;
    background: rgba(0,0,0,0.55); z-index: 50;
    align-items: flex-end; justify-content: center; }
#screen-createteam .guest-overlay.visible { display: flex; }
#screen-createteam .guest-sheet { background: #fff; border-radius: 24px 24px 0 0; padding: 24px 20px 32px; width: 100%; }
#screen-createteam .guest-handle { width: 40px; height: 4px; background: #ddd; border-radius: 2px; margin: 0 auto 18px; }
#screen-createteam .guest-title { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 18px; color: var(--text); margin-bottom: 4px; }
#screen-createteam .guest-sub { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-3); margin-bottom: 18px; line-height: 1.5; }
#screen-createteam .guest-field-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 6px; }
#screen-createteam .guest-input { width: 100%; height: 46px; border-radius: 10px; border: 1.5px solid rgba(0,0,0,0.15);
    background: #fff; padding: 0 12px; font-family: 'Inter', sans-serif; font-size: 14px;
    color: var(--text); outline: none; margin-bottom: 14px; }
#screen-createteam .guest-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26,107,60,0.1); }
#screen-createteam .guest-input.error { border-color: var(--red); }
#screen-createteam .guest-actions { display: flex; gap: 8px; margin-top: 4px; }
#screen-createteam .guest-cancel { flex: 1; height: 46px; border-radius: 23px; border: 1.5px solid #ccc; background: #fff; color: var(--text-3); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }
#screen-createteam .guest-add { flex: 2; height: 46px; border-radius: 23px; border: none; background: var(--green); color: #fff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }
#screen-createteam .bc-check { display: none; position: absolute; top: 0; right: 6px;
    width: 22px; height: 22px; border-radius: 50%; background: var(--green);
    border: 2px solid #fff; align-items: center; justify-content: center; }
#screen-createteam .buddy-chip.selected .bc-avatar { border-color: var(--green); }
#screen-createteam .buddy-chip.selected .bc-check { display: flex; }
#screen-createteam .buddy-chip.disabled { opacity: 0.4; pointer-events: none; }
#screen-createteam .you-chip .bc-avatar { border-color: var(--gold); }
#screen-createteam .you-chip .bc-badge { position: absolute; top: 0; right: 6px;
    width: 22px; height: 22px; border-radius: 50%; background: var(--gold);
    border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 800; color: var(--green); }
#screen-createteam .create-btn { width: 100%; height: 52px; border-radius: 14px; border: none;
    background: var(--green); color: #fff; font-family: 'Roboto', sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
    margin-top: 8px; transition: background 0.15s; }
#screen-createteam .create-btn:disabled { background: #ccc; cursor: default; }

/* ===== Team flow: Team Created (full-screen) ===== */
#screen-teamcreated { flex-direction: column; background: linear-gradient(180deg,#0e3d22,#1a6b3c); overflow: hidden; }
#screen-teamcreated.screen.active { display: flex; }
#screen-teamcreated .bg-layer { background: linear-gradient(180deg,#15532f,#0e3d22); }
#screen-teamcreated .bg-layer { position: absolute; inset: 0; z-index: 0; }
#screen-teamcreated .bg-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-teamcreated .bg-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,58,32,0.35) 0%, rgba(10,58,32,0.15) 40%, rgba(10,58,32,0.55) 100%); z-index: 1; }
#screen-teamcreated .content { position: relative; z-index: 5; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; padding: 0 24px; min-height: 0; }
#screen-teamcreated .celebrate-icon { margin-top: 56px; width: 96px; height: 96px; border-radius: 50%;
    background: rgba(225,194,69,0.2); border: 2px solid var(--gold);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 40px rgba(225,194,69,0.3);
    animation: pop 0.5s cubic-bezier(0.34,1.56,0.64,1); }
#screen-teamcreated .celebrate-title { margin-top: 22px; font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 28px;
    color: #fff; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,0.3); letter-spacing: -0.3px; }
#screen-teamcreated .celebrate-sub { margin-top: 8px; font-family: 'Inter', sans-serif; font-size: 14px;
    color: rgba(255,255,255,0.85); text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    line-height: 1.5; max-width: 280px; }
#screen-teamcreated .team-card { margin-top: 30px; width: 100%; background: rgba(255,255,255,0.97);
    border-radius: 18px; padding: 22px 20px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.3); backdrop-filter: blur(8px);
    animation: rise 0.5s ease 0.2s both; }
#screen-teamcreated .tc-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green); text-align: center; margin-bottom: 4px; }
#screen-teamcreated .tc-name { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 800; font-style: italic; color: var(--text); text-align: center; margin-bottom: 18px; letter-spacing: -0.3px; }
#screen-teamcreated .tc-members { display: flex; justify-content: center; gap: 0; margin-bottom: 16px; }
#screen-teamcreated .tc-avatar { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; overflow: hidden; margin-right: -14px; background: #2d7a4f; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
#screen-teamcreated .tc-avatar:last-child { margin-right: 0; }
#screen-teamcreated .tc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-teamcreated .tc-meta { display: flex; justify-content: center; gap: 20px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 14px; }
#screen-teamcreated .tc-meta-item { text-align: center; }
#screen-teamcreated .tc-meta-val { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800; color: var(--green); }
#screen-teamcreated .tc-meta-lbl { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-top: 2px; }
#screen-teamcreated .btn-stack { width: 100%; margin-top: auto; margin-bottom: 28px; display: flex; flex-direction: column; gap: 10px; }
#screen-teamcreated .btn-primary { width: 100%; height: 54px; border-radius: 14px; border: none;
    background: var(--gold); color: var(--green); font-family: 'Roboto', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
    box-shadow: 0 6px 18px rgba(225,194,69,0.4);
    display: flex; align-items: center; justify-content: center; gap: 8px; }
#screen-teamcreated .btn-ghost { width: 100%; height: 50px; border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.1);
    color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
    cursor: pointer; backdrop-filter: blur(4px); }
@keyframes pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ===== teamoverview chrome (cloned) ===== */
#screen-teamoverview .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-teamoverview .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-teamoverview .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-teamoverview .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-teamoverview .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-teamoverview .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-teamoverview .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-teamoverview .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-teamoverview .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-teamoverview .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-teamoverview .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-teamoverview .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-teamoverview .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-teamoverview .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-teamoverview .nav-tab.active { opacity: 1; }
#screen-teamoverview .nav-spacer { position: relative; align-self: stretch; }
#screen-teamoverview .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-teamoverview .nav-tab svg { display: block; }
#screen-teamoverview .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-teamoverview .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-teamoverview .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-teamoverview .play-btn span { display: block; }
#screen-teamoverview .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-teamoverview .play-btn span { display: block; }
#screen-teamoverview{flex-direction:column;background:var(--bg);}
#screen-teamoverview{flex-direction:column;background:var(--bg);}
#screen-teamoverview.screen.active{display:flex;}

/* ===== content · screen-teamoverview ===== */
#screen-teamoverview .team-hero { background: linear-gradient(150deg, #1a6b3c 0%, #0e3d22 100%);
    border-radius: 18px; padding: 22px 20px; color: #fff;
    position: relative; overflow: hidden; margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(26,107,60,0.28); }
#screen-teamoverview .th-main-badge { position: absolute; top: 16px; right: 16px;
    background: var(--gold); color: var(--green);
    font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 10px;
    display: flex; align-items: center; gap: 4px; }
#screen-teamoverview .th-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 4px; }
#screen-teamoverview .th-name { font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 800; font-style: italic; margin-bottom: 18px; letter-spacing: -0.3px; }
#screen-teamoverview .th-members { display: flex; flex-direction: column; gap: 10px; }
#screen-teamoverview .th-member { display: flex; align-items: center; gap: 12px; }
#screen-teamoverview .thm-avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); overflow: hidden; background: #2d7a4f; flex-shrink: 0; }
#screen-teamoverview .thm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#screen-teamoverview .thm-info { flex: 1; min-width: 0; }
#screen-teamoverview .thm-name { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; }
#screen-teamoverview .thm-role { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(255,255,255,0.6); }
#screen-teamoverview .thm-hcp { text-align: right; }
#screen-teamoverview .thm-hcp-val { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; color: var(--gold); line-height: 1; }
#screen-teamoverview .thm-hcp-lbl { font-family: 'Inter', sans-serif; font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); }
#screen-teamoverview .stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
#screen-teamoverview .stat-box { background: #fff; border-radius: 12px; border: 1.5px solid rgba(0,0,0,0.07); padding: 14px 8px; text-align: center; }
#screen-teamoverview .stat-box-val { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 800; color: var(--text); line-height: 1; }
#screen-teamoverview .stat-box-val.green { color: var(--green); }
#screen-teamoverview .stat-box-val.gold { color: #c9a820; }
#screen-teamoverview .stat-box-lbl { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-top: 5px; }
#screen-teamoverview .section-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin: 6px 2px 10px; }
#screen-teamoverview .best-card { background: #fff; border-radius: 12px; border: 1.5px solid rgba(0,0,0,0.07);
    padding: 16px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between; }
#screen-teamoverview .best-left { flex: 1; min-width: 0; }
#screen-teamoverview .best-top { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
#screen-teamoverview .best-course { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); }
#screen-teamoverview .best-meta { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-top: 3px; }
#screen-teamoverview .best-score-wrap { text-align: right; flex-shrink: 0; margin-left: 14px; }
#screen-teamoverview .best-score { font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 900; color: var(--blue); line-height: 1; }
#screen-teamoverview .best-score-lbl { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
#screen-teamoverview .action-stack { display: flex; flex-direction: column; gap: 10px; }
#screen-teamoverview .btn-primary { width: 100%; height: 52px; border-radius: 14px; border: none;
    background: var(--green); color: #fff; font-family: 'Roboto', sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.15s; }
#screen-teamoverview .btn-primary.is-main { background: rgba(225,194,69,0.15); color: #b89c20; cursor: default; }
#screen-teamoverview .btn-secondary { width: 100%; height: 48px; border-radius: 14px; border: 1.5px solid rgba(0,0,0,0.12);
    background: #fff; color: var(--text-2); font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px; }
#screen-teamoverview .btn-danger { width: 100%; height: 48px; border-radius: 14px; border: 1.5px solid var(--red);
    background: #fff; color: var(--red); font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ===== rounddetail chrome (cloned) ===== */
#screen-rounddetail .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-rounddetail .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-rounddetail .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-rounddetail .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-rounddetail .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-rounddetail .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-rounddetail .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-rounddetail .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-rounddetail .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-rounddetail .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-rounddetail .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-rounddetail .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-rounddetail .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-rounddetail .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-rounddetail .nav-tab.active { opacity: 1; }
#screen-rounddetail .nav-spacer { position: relative; align-self: stretch; }
#screen-rounddetail .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-rounddetail .nav-tab svg { display: block; }
#screen-rounddetail .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-rounddetail .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-rounddetail .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-rounddetail .play-btn span { display: block; }
#screen-rounddetail .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-rounddetail .play-btn span { display: block; }
#screen-rounddetail{flex-direction:column;background:var(--bg);}
#screen-rounddetail{flex-direction:column;background:var(--bg);}
#screen-rounddetail.screen.active{display:flex;}

/* ===== content · screen-rounddetail ===== */
#screen-rounddetail .round-meta-header { background: #f0f9f4; border: 1.5px solid var(--green);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
#screen-rounddetail .meta-date { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
#screen-rounddetail .meta-course { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
#screen-rounddetail .meta-row { font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
#screen-rounddetail .meta-thcp { display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px; background: var(--green);
    border-radius: 6px; padding: 4px 10px;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: #fff; }
#screen-rounddetail .stats-bar { display: grid; grid-template-columns: repeat(4,1fr); border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
#screen-rounddetail .stat-cell { padding: 9px 4px; text-align: center; border-right: 1px solid rgba(0,0,0,0.1); }
#screen-rounddetail .stat-cell:last-child { border-right: none; }
#screen-rounddetail .stat-label { display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
#screen-rounddetail .stat-value { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); }
#screen-rounddetail .stat-value.pos { color: var(--red); }
#screen-rounddetail .stat-value.neg { color: var(--blue); }
#screen-rounddetail .sc-table { width: 100%; border-collapse: collapse; font-size: 13px; border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden; }
#screen-rounddetail .sc-table thead tr { background: var(--green); }
#screen-rounddetail .sc-table th { color: #fff; padding: 9px 4px; text-align: center; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
#screen-rounddetail .sc-table tbody tr:nth-child(even) { background: #f7fbf8; }
#screen-rounddetail .sc-table td { padding: 10px 4px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.06); color: var(--text); font-family: 'Roboto', sans-serif; }
#screen-rounddetail .sc-table tbody tr:last-child td { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; background: #eef5f0; border-bottom: none; }
#screen-rounddetail .over-par { color: var(--red) !important; font-weight: 700; }
#screen-rounddetail .under-par { color: var(--blue) !important; font-weight: 700; }
#screen-rounddetail .si-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; font-family: 'Inter', sans-serif; }
#screen-rounddetail .si-hard { background: #fde8e8; color: var(--red); }
#screen-rounddetail .si-avg { background: #fff8e1; color: #b8860b; }
#screen-rounddetail .si-easy { background: #e8f5e9; color: var(--green); }
#screen-rounddetail .readonly-badge { display: flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3);
    margin-top: 10px; justify-content: center; }

/* ===== faqadmin chrome (cloned) ===== */
#screen-faqadmin .app-header { height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative; }
#screen-faqadmin .logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
#screen-faqadmin .logo .crown { display: block; width: 24px; height: 24px; object-fit: contain; }
#screen-faqadmin .logo .wordmark { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1; }
#screen-faqadmin .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
#screen-faqadmin .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer; }
#screen-faqadmin .sub-header { flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
#screen-faqadmin .sub-header .title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
#screen-faqadmin .sub-header .actions { display: flex; align-items: center; gap: 8px; }
#screen-faqadmin .back-pill { background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
#screen-faqadmin .body-area { flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0; }
#screen-faqadmin .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none; }
#screen-faqadmin .bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px; }
#screen-faqadmin .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0; }
#screen-faqadmin .nav-tab.active { opacity: 1; }
#screen-faqadmin .nav-spacer { position: relative; align-self: stretch; }
#screen-faqadmin .nav-tab.active::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold); }
#screen-faqadmin .nav-tab svg { display: block; }
#screen-faqadmin .nav-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#screen-faqadmin .nav-tab .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#screen-faqadmin .play-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase; }
#screen-faqadmin .play-btn span { display: block; }
#screen-faqadmin .play-btn { position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700; font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15);
    pointer-events: auto;
    cursor: pointer;
    z-index: 4; }
#screen-faqadmin .play-btn span { display: block; }
#screen-faqadmin{flex-direction:column;background:var(--bg);}
#screen-faqadmin{flex-direction:column;background:var(--bg);}
#screen-faqadmin.screen.active{display:flex;}

/* ===== Admin FAQ Manager content ===== */
#screen-faqadmin .admin-tag { margin-left: 4px; background: var(--gold); color: var(--green); font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 8px; }
#screen-faqadmin .sub-btns { display: flex; gap: 8px; align-items: center; }
#screen-faqadmin .pill { border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; cursor: pointer; }
#screen-faqadmin .pill.green { background: var(--green); color: #fff; }
#screen-faqadmin .pill.ghost { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
#screen-faqadmin .body-area { flex: 1 1 auto; background: #f5f7f5; overflow-y: auto; min-height: 0; padding: 16px 16px 24px; }
#screen-faqadmin .list-search-wrap { position: relative; margin-bottom: 16px; }
#screen-faqadmin .list-search { width: 100%; height: 44px; border-radius: 22px; border: 1.5px solid rgba(0,0,0,0.1); background: #fff; padding: 0 14px 0 42px; font-family: 'Inter', sans-serif; font-size: 14px; outline: none; }
#screen-faqadmin .list-search:focus { border-color: var(--green); }
#screen-faqadmin .list-search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
#screen-faqadmin .cat-block { margin-bottom: 18px; }
#screen-faqadmin .cat-head { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin: 0 2px 8px; display: flex; justify-content: space-between; align-items: center; }
#screen-faqadmin .cat-count { background: rgba(0,0,0,0.06); color: var(--text-3); border-radius: 10px; padding: 1px 8px; font-size: 10px; }
#screen-faqadmin .article-item { background: #fff; border-radius: 12px; border: 1.5px solid rgba(0,0,0,0.07); padding: 13px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
#screen-faqadmin .ai-main { flex: 1; min-width: 0; cursor: pointer; }
#screen-faqadmin .ai-q { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
#screen-faqadmin .ai-meta { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-top: 3px; display: flex; align-items: center; gap: 8px; }
#screen-faqadmin .ai-pop { color: #b89c20; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
#screen-faqadmin .ai-actions { display: flex; gap: 6px; flex-shrink: 0; }
#screen-faqadmin .ai-btn { width: 30px; height: 30px; border-radius: 8px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#screen-faqadmin .ai-btn.edit { background: rgba(26,107,60,0.1); color: var(--green); }
#screen-faqadmin .ai-btn.del { background: rgba(200,90,74,0.1); color: var(--red); }
#screen-faqadmin .editor { display: none; }
#screen-faqadmin .editor.active { display: block; }
#screen-faqadmin .list-view.hidden { display: none; }
#screen-faqadmin .field { margin-bottom: 16px; }
#screen-faqadmin .field-label { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 7px; padding-left: 2px; }
#screen-faqadmin .field-input, #screen-faqadmin .field-select { width: 100%; height: 46px; border-radius: 10px; border: 1.5px solid rgba(0,0,0,0.12); background: #fff; padding: 0 12px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); outline: none; }
#screen-faqadmin .field-input:focus, #screen-faqadmin .field-select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26,107,60,0.08); }
#screen-faqadmin .field-select { appearance: none; cursor: pointer; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23777" stroke-width="3"><polyline points="6 9 12 15 18 9"/></svg>'); background-repeat: no-repeat; background-position: right 14px center; }
#screen-faqadmin .lang-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
#screen-faqadmin .lang-tab { padding: 5px 12px; border-radius: 14px; border: 1.5px solid rgba(0,0,0,0.12); background: #fff; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-3); cursor: pointer; }
#screen-faqadmin .lang-tab.active { background: var(--green); color: #fff; border-color: var(--green); }
#screen-faqadmin .row-2 { display: flex; gap: 10px; }
#screen-faqadmin .row-2 .field { flex: 1; }
#screen-faqadmin .toggle-row { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1.5px solid rgba(0,0,0,0.12); border-radius: 10px; padding: 12px 14px; }
#screen-faqadmin .toggle-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text); }
#screen-faqadmin .toggle-sub { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-3); margin-top: 1px; }
#screen-faqadmin .toggle { width: 44px; height: 26px; background: #ddd; border-radius: 13px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
#screen-faqadmin .toggle.on { background: var(--green); }
#screen-faqadmin .toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: transform 0.2s; }
#screen-faqadmin .toggle.on::after { transform: translateX(18px); }
#screen-faqadmin .blocks-label { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin: 8px 2px 10px; }
#screen-faqadmin .block { background: #fff; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; position: relative; }
#screen-faqadmin .block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#screen-faqadmin .block-type { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 8px; }
#screen-faqadmin .block-type.p { background: rgba(0,0,0,0.06); color: var(--text-3); }
#screen-faqadmin .block-type.h3 { background: rgba(26,107,60,0.12); color: var(--green); }
#screen-faqadmin .block-type.formula { background: rgba(26,107,60,0.12); color: var(--green); }
#screen-faqadmin .block-type.steps { background: rgba(58,123,213,0.12); color: var(--blue); }
#screen-faqadmin .block-type.tip { background: rgba(225,194,69,0.18); color: #b89c20; }
#screen-faqadmin .block-ctrl { display: flex; gap: 4px; }
#screen-faqadmin .bc-btn { width: 26px; height: 26px; border-radius: 7px; border: none; background: rgba(0,0,0,0.05); color: var(--text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
#screen-faqadmin .bc-btn.del { background: rgba(200,90,74,0.1); color: var(--red); }
#screen-faqadmin .block-textarea { width: 100%; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; padding: 8px 10px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text); outline: none; resize: vertical; min-height: 44px; line-height: 1.5; }
#screen-faqadmin .block-textarea:focus { border-color: var(--green); }
#screen-faqadmin .block-textarea.mono { font-family: 'Roboto Mono', monospace; color: var(--green); }
#screen-faqadmin .step-input-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
#screen-faqadmin .step-input { flex: 1; height: 38px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; padding: 0 10px; font-family: 'Inter', sans-serif; font-size: 13px; outline: none; }
#screen-faqadmin .step-input:focus { border-color: var(--green); }
#screen-faqadmin .step-del { width: 30px; height: 38px; border: none; background: rgba(200,90,74,0.1); color: var(--red); border-radius: 8px; cursor: pointer; flex-shrink: 0; }
#screen-faqadmin .add-step-btn { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--green); background: none; border: none; cursor: pointer; padding: 4px 0; }
#screen-faqadmin .add-block-palette { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
#screen-faqadmin .abp-btn { display: inline-flex; align-items: center; gap: 5px; border: 1.5px dashed var(--green); background: rgba(26,107,60,0.04); color: var(--green); border-radius: 18px; padding: 8px 12px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; }
#screen-faqadmin .abp-btn:active { background: rgba(26,107,60,0.1); }
#screen-faqadmin .save-bar { display: flex; gap: 10px; margin-top: 8px; }
#screen-faqadmin .save-btn { flex: 2; height: 50px; border-radius: 13px; border: none; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; }
#screen-faqadmin .cancel-btn { flex: 1; height: 50px; border-radius: 13px; border: 1.5px solid rgba(0,0,0,0.15); background: #fff; color: var(--text-3); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; }
#screen-faqadmin .toast { display: none; position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; border-radius: 20px; padding: 11px 22px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; z-index: 60; box-shadow: 0 4px 16px rgba(0,0,0,0.25); white-space: nowrap; }
#screen-faqadmin .toast.show { display: block; animation: tup 0.25s ease; }
@keyframes tup { from { opacity:0; transform: translateX(-50%) translateY(8px);} to {opacity:1; transform: translateX(-50%) translateY(0);} }

/* FAQ admin entry (gated) */
#screen-faq .faq-admin-entry { display:block; width:100%; margin:0 0 12px; padding:11px 14px; background:#fff;
  border:1.5px dashed #1a6b3c; border-radius:12px; color:#1a6b3c; font-family:Inter,sans-serif; font-size:13px; font-weight:700; cursor:pointer; }
#screen-faq .faq-admin-entry:active { background:#f0f7f2; }

/* ===== block 3 (was index.html line 6016) ===== */
/* ===== Live scorecard redesign — mockup Screen 33 (visual only) ===== */
.scorecard-overlay { background:#f4f6f2; }
.sc-header { background:#f4f6f2; padding:0; }
.sc-subhdr { background:#e1c245; height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.sc-subhdr-title { font-family:'Roboto',sans-serif; font-weight:700; font-size:16px; color:#1a6b3c; }
.sc-subhdr-back { background:#1a6b3c; color:#fff; border:none; border-radius:20px; padding:6px 16px; font-family:'Roboto',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.06em; cursor:pointer; }
.sc-header-top { padding:14px 16px 0; margin-bottom:10px; }
.sc-header-top #sc_saveBtnTop, .sc-header-top #sc_backBtn { display:none !important; }
.sc-course-name { color:#111; font-size:15px; font-weight:700; }
.sc-meta { color:#777; font-size:11px; text-transform:none; letter-spacing:normal; font-family:'Roboto',sans-serif; }

/* three-box team summary */
.sc-match-banner { background:transparent; border:none; padding:0 16px; gap:8px; margin-bottom:16px; align-items:stretch; }
.sc-match-team, .sc-match-status { background:#fff; border:1.5px solid #1a6b3c; border-radius:10px; padding:10px 6px; flex:1; text-align:center; }
.sc-match-divider { display:none; }
.sc-match-team-name { font-size:0.62rem; color:#777; letter-spacing:0.06em; }
.sc-match-score { color:#111; font-size:1.4rem; }
.sc-match-score.under { color:#1a6b3c; } .sc-match-score.over { color:#c85a4a; } .sc-match-score.even { color:#e1c245; }
.sc-match-hcp { color:#777; font-size:0.6rem; }
.sc-match-status-label { font-size:0.62rem; color:#777; letter-spacing:0.06em; text-transform:uppercase; }
.sc-match-status-val { font-size:1.1rem; font-weight:800; color:#111; }

/* hole nav */
.sc-carousel-hole-num { color:#111; }
.sc-carousel-par-info { color:#444; }
.sc-carousel-btn { background:#fff; border:1.5px solid #1a6b3c; color:#1a6b3c; }
.sc-carousel-btn:active { background:#1a6b3c; color:#fff; }

/* score boxes — green border */
.sc-carousel-score-tap { border:1.5px solid #1a6b3c; border-radius:14px; background:#fff; }
.sc-carousel-score-tap:active { border-color:#1a6b3c; background:rgba(26,107,60,0.06); }
.sc-carousel-score-tap.live-readonly { border-color:rgba(26,107,60,0.35); background:#fafafa; }
.sc-carousel-score-val { color:#111; }
.sc-carousel-team-name { color:#1a6b3c; font-size:0.82rem; }

/* progress dots — blue, gold current */
.sc-carousel-dot { background:rgba(58,123,213,0.25); width:9px; height:9px; }
.sc-carousel-dot.both, .sc-carousel-dot.mine { background:#3a7bd5; }
.sc-carousel-dot.current { outline:2px solid #e1c245; outline-offset:2px; }

/* all-holes button — green filled */
.sc-all-holes-btn { background:#1a6b3c; border:none; color:#fff; font-weight:700; }
.sc-all-holes-btn:active { background:#155a31; color:#fff; }

/* bottom action bar — SAVE outline + END red */
.sc-save-bottom { display:flex; gap:10px; padding:16px; }
.btn-save-round-full { background:#fff; border:1.5px solid #1a6b3c; color:#1a6b3c; flex:1; }
.btn-save-round-full:active { background:rgba(26,107,60,0.06); }
.sc-end-round-btn { flex:1; background:#c0392b; border:none; color:#fff; border-radius:24px; font-weight:700; font-size:0.95rem; padding:14px; cursor:pointer; }
.sc-end-round-btn:active { opacity:0.9; }

/* ===== block 4 (was index.html line 6634) ===== */
  /* Add Buddy (Screen 43) chrome */
  #buddySearchOverlay .buddy-overlay-inner { max-width:480px; margin:0 auto; padding:0; height:100%; display:flex; flex-direction:column; background:#fff; }
  #buddySearchOverlay .ab-appheader { height:56px; flex:0 0 56px; background:#1a6b3c; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
  #buddySearchOverlay .ab-logo { display:flex; align-items:center; gap:6px; }
  #buddySearchOverlay .ab-logo img { width:24px; height:24px; object-fit:contain; }
  #buddySearchOverlay .ab-logo span { font-family:'Roboto',sans-serif; font-weight:700; font-size:20px; color:#fff; }
  #buddySearchOverlay .ab-icons { display:flex; gap:10px; }
  #buddySearchOverlay .ab-ic { width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.85); color:#fff; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
  #buddySearchOverlay .ab-subheader { flex:0 0 44px; background:#e1c245; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
  #buddySearchOverlay .ab-title { font-family:'Roboto',sans-serif; font-weight:700; font-size:18px; color:#1a6b3c; }
  #buddySearchOverlay .ab-back { background:#1a6b3c; color:#fff; border:none; border-radius:20px; padding:7px 16px; font-family:'Roboto',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.06em; cursor:pointer; }
  #buddySearchOverlay .ab-body { flex:1 1 auto; min-height:0; padding:22px 16px 24px; overflow-y:auto; }
  #buddySearchOverlay .ab-search-label { display:flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-size:15px; font-weight:700; color:#1a6b3c; margin-bottom:12px; }
  #buddySearchOverlay .ab-search-wrap { position:relative; margin-bottom:20px; }
  #buddySearchOverlay #buddySearchInput { width:100%; height:50px; border:1.5px solid #1a6b3c; border-radius:10px; padding:0 38px 0 16px; font-family:'Inter',sans-serif; font-size:15px; color:#111; outline:none; box-sizing:border-box; background:#fff; }
  #buddySearchOverlay #buddySearchInput:focus { border-color:#e1c245; box-shadow:0 0 0 3px rgba(225,194,69,0.2); }
  #buddySearchOverlay .ab-chevron { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#1a6b3c; font-size:18px; font-weight:700; pointer-events:none; }
  #buddySearchOverlay #buddySearchStatus { font-family:'Roboto',sans-serif; font-size:13px; color:#777; text-align:center; padding:18px 0; }
  #buddySearchOverlay .ab-section-label { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#777; margin:18px 0 10px; }
  #buddySearchOverlay .ab-dock { position:static; flex:0 0 72px; width:100%; height:72px; background:#1a6b3c; display:grid; grid-template-columns:1fr 1fr 96px 1fr 1fr; align-items:center; }
  #buddySearchOverlay .ab-tab { display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; background:transparent; border:0; cursor:pointer; font-family:'Inter',sans-serif; font-size:10px; opacity:0.85; }
  #buddySearchOverlay .ab-tab svg { display:block; }
  #buddySearchOverlay .ab-play { position:relative; align-self:stretch; }
  #buddySearchOverlay .ab-play-btn { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:84px; height:84px; border-radius:50%; background:#1a6b3c; border:4px solid #e1c245; color:#fff; font-family:'Inter',sans-serif; font-weight:800; font-size:13px; line-height:1.15; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,0.25); z-index:4; }
  /* shared rows (global so the profile screen's buddy list matches too) */
  .ab-row { display:flex; align-items:center; gap:10px; border:1.5px solid #e1c245; border-radius:12px; padding:12px 14px; margin-bottom:12px; background:#fff; }
  .ab-row-name { flex:1 1 auto; min-width:0; font-family:'Inter',sans-serif; font-size:15px; font-weight:600; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ab-row-sub { font-family:'Roboto',sans-serif; font-size:12px; color:#777; font-weight:400; }
  .ab-btn { border:1.5px solid #e1c245; background:#fff; color:#1a6b3c; border-radius:10px; padding:8px 13px; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
  .ab-btn.added { border-color:#1a6b3c; background:#f0f9f4; color:#1a6b3c; cursor:default; }
  .ab-btn.remove { border-color:#c0392b; color:#c0392b; }

/* ===== block 5 (was index.html line 6706) ===== */
  #publicProfileOverlay .buddy-overlay-inner { max-width:480px; margin:0 auto; padding:0; height:100%; display:flex; flex-direction:column; background:#fff; }
  #publicProfileOverlay .pp-appheader { height:56px; flex:0 0 56px; background:#1a6b3c; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
  #publicProfileOverlay .pp-logo { display:flex; align-items:center; gap:6px; }
  #publicProfileOverlay .pp-logo img { width:24px; height:24px; object-fit:contain; }
  #publicProfileOverlay .pp-logo span { font-family:'Roboto',sans-serif; font-weight:700; font-size:20px; color:#fff; }
  #publicProfileOverlay .pp-icons { display:flex; gap:10px; }
  #publicProfileOverlay .pp-ic { width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.9); color:#fff; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
  #publicProfileOverlay .pp-subheader { flex:0 0 44px; background:#e1c245; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
  #publicProfileOverlay .pp-title { font-family:'Roboto',sans-serif; font-weight:700; font-size:18px; color:#1a6b3c; }
  #publicProfileOverlay .pp-back { background:#1a6b3c; color:#fff; border:none; border-radius:20px; padding:7px 16px; font-family:'Roboto',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.06em; cursor:pointer; }
  #publicProfileOverlay .pp-body { flex:1 1 auto; min-height:0; padding:26px 20px 24px; overflow-y:auto; text-align:center; }
  #publicProfileOverlay .pp-cover { height:140px; margin:-26px -20px 0; background:#1a6b3c center/cover no-repeat; background-image:linear-gradient(135deg,#1a6b3c 0%,#0e3d22 100%); position:relative; }
  #publicProfileOverlay .pp-cover::after { content:""; position:absolute; left:0; right:0; bottom:0; height:70px; background:linear-gradient(transparent, rgba(8,30,16,0.30)); pointer-events:none; }
  #publicProfileOverlay .pp-avatar { width:112px; height:112px; border-radius:50%; border:4px solid #fff; margin:-58px auto 16px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:48px; background:#f0f9f4; position:relative; z-index:1; box-shadow:0 6px 16px rgba(0,0,0,0.22); }
  #publicProfileOverlay .pp-avatar img { width:100%; height:100%; object-fit:cover; }
  #publicProfileOverlay .pp-name { font-family:'Inter',sans-serif; font-size:24px; font-weight:800; color:#1a6b3c; margin-bottom:8px; }
  #publicProfileOverlay .pp-meta { font-family:'Roboto',sans-serif; font-size:14px; color:#777; margin-bottom:22px; line-height:1.5; }
  #publicProfileOverlay .pp-meta b { color:#111; font-weight:700; }
  #publicProfileOverlay .pp-buddycount { font-family:'Inter',sans-serif; font-size:15px; color:#111; margin-bottom:20px; }
  #publicProfileOverlay .pp-buddycount .n { color:#e1c245; font-weight:800; font-size:18px; }
  #publicProfileOverlay .pp-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:300px; margin:0 auto 22px; }
  #publicProfileOverlay .pp-stat { background:#1a4d2e; border-radius:12px; padding:16px 8px; }
  #publicProfileOverlay .pp-stat .num { font-family:'Inter',sans-serif; font-size:26px; font-weight:800; color:#e1c245; line-height:1; margin-bottom:6px; }
  #publicProfileOverlay .pp-stat .lbl { font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:#fff; line-height:1.2; }
  #publicProfileOverlay .btn-add-buddy { display:inline-block; width:auto; min-width:170px; background:#fff; border:1.5px solid #1a6b3c; color:#1a6b3c; border-radius:24px; padding:11px 28px; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; cursor:pointer; }
  #publicProfileOverlay .btn-add-buddy.already, #publicProfileOverlay .btn-add-buddy.sent { background:#f0f9f4; border-color:#1a6b3c; color:#1a6b3c; cursor:default; }
  #publicProfileOverlay .pp-dock { position:static; flex:0 0 72px; width:100%; height:72px; background:#1a6b3c; display:grid; grid-template-columns:1fr 1fr 96px 1fr 1fr; align-items:center; }
  #publicProfileOverlay .pp-tab { display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; background:transparent; border:0; cursor:pointer; font-family:'Inter',sans-serif; font-size:10px; opacity:0.85; }
  #publicProfileOverlay .pp-tab svg { display:block; }
  #publicProfileOverlay .pp-play { position:relative; align-self:stretch; }
  #publicProfileOverlay .pp-play-btn { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:84px; height:84px; border-radius:50%; background:#1a6b3c; border:4px solid #e1c245; color:#fff; font-family:'Inter',sans-serif; font-weight:800; font-size:13px; line-height:1.15; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,0.25); z-index:4; }

/* ===== block 6 (was index.html line 16213) ===== */
      #joinMatchOverlay .join-instruction { font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:#444; text-align:center; line-height:1.6; margin:10px 0 18px; }
      #joinMatchOverlay .join-code-row { display:flex; gap:10px; align-items:center; justify-content:center; margin-bottom:18px; }
      #joinMatchOverlay .join-cbox { width:52px; height:64px; border:2px solid #1a6b3c; border-radius:10px; font-family:'Inter',sans-serif; font-size:28px; font-weight:800; color:#1a6b3c; text-align:center; background:#fff; outline:none; text-transform:uppercase; transition:border-color .15s, box-shadow .15s; }
      #joinMatchOverlay .join-cbox.filled { background:#f0f9f4; }
      #joinMatchOverlay .join-cbox:focus { border-color:#e1c245; border-width:2.5px; box-shadow:0 0 0 3px rgba(225,194,69,0.2); }
      #joinMatchOverlay .join-qr-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:52px; background:#fff; color:#1a6b3c; border:1.5px solid #1a6b3c; border-radius:10px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; cursor:pointer; transition:background .15s; margin-bottom:12px; }
      #joinMatchOverlay .join-qr-btn:active { background:#f0f9f4; }
      #joinMatchOverlay .join-go-btn { width:100%; height:52px; background:#1a6b3c; color:#fff; border:none; border-radius:10px; font-family:'Inter',sans-serif; font-size:15px; font-weight:700; letter-spacing:0.06em; cursor:pointer; text-transform:uppercase; opacity:1; transition:opacity .2s; }
      #joinMatchOverlay .join-go-btn:disabled { opacity:0.4; pointer-events:none; cursor:default; }
    
/* ===== block 7 (was index.html line 16247) ===== */
      #joinStep2 .js2-code-badge { display:flex; align-items:center; justify-content:center; gap:8px; margin:6px 0 20px; background:#f0f9f4; border:1.5px solid #1a6b3c; border-radius:8px; padding:10px 14px; }
      #joinStep2 .js2-code-label { font-family:'Inter',sans-serif; font-size:12px; color:#777; }
      #joinStep2 .js2-code-val { font-family:'Inter',sans-serif; font-size:16px; font-weight:800; color:#1a6b3c; letter-spacing:0.12em; }
      #joinStep2 .js2-section { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; color:#1a6b3c; letter-spacing:0.08em; text-transform:uppercase; margin:16px 0 8px; }
      #joinStep2 .js2-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(0,0,0,0.06); font-family:'Roboto',sans-serif; font-size:13px; gap:12px; }
      #joinStep2 .js2-key { color:#777; flex:0 0 auto; }
      #joinStep2 .js2-val { color:#111; font-weight:500; text-align:right; }
      #joinStep2 .js2-thcp { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; color:#1a6b3c; }
      #joinStep2 .js2-card { background:#fff; border:1px solid rgba(26,107,60,0.12); border-radius:14px; padding:16px 16px 8px; margin:0 0 14px; box-shadow:0 2px 10px rgba(0,0,0,0.04); }
      #joinStep2 .js2-card-hdr { font-family:'Inter',sans-serif; font-size:11px; font-weight:800; color:#1a6b3c; letter-spacing:0.09em; text-transform:uppercase; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
      #joinStep2 .js2-card-hdr::before { content:''; width:16px; height:3px; background:#F5A623; border-radius:2px; flex:0 0 auto; }
      #joinStep2 .js2-teamname { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; color:#111; margin:0 0 10px; }
      #joinStep2 .js2-player { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(0,0,0,0.05); }
      #joinStep2 .js2-player:last-of-type { border-bottom:none; }
      #joinStep2 .js2-pchip { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:#1a6b3c; color:#fff; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
      #joinStep2 .js2-pname { flex:1 1 auto; font-family:'Roboto',sans-serif; font-size:14px; font-weight:600; color:#111; }
      #joinStep2 .js2-phcp { flex:0 0 auto; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; color:#1a6b3c; background:#f0f9f4; border-radius:20px; padding:3px 10px; }
      #joinStep2 .js2-thcp-row { display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:12px; border-top:1.5px solid rgba(26,107,60,0.10); }
      #joinStep2 .js2-thcp-lbl { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; color:#555; text-transform:uppercase; letter-spacing:0.06em; }
      #joinStep2 .js2-thcp-badge { font-family:'Inter',sans-serif; font-size:22px; font-weight:800; color:#fff; background:#1a6b3c; border-radius:10px; padding:4px 16px; min-width:44px; text-align:center; }
      #joinStep2 .js2-kv { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(0,0,0,0.05); font-family:'Roboto',sans-serif; font-size:13px; gap:12px; }
      #joinStep2 .js2-kv:last-child { border-bottom:none; }
      #joinStep2 .js2-kv .k { color:#777; flex:0 0 auto; }
      #joinStep2 .js2-kv .v { color:#111; font-weight:600; text-align:right; }
      #joinStep2 .js2-yourteam-card { background:#f9fdfb; border:1px solid rgba(26,107,60,0.14); border-radius:14px; padding:16px; margin:0 0 14px; }
      #joinStep2 .js2-yourteam-card .js2-card-hdr { margin-bottom:6px; }
      #joinStep2 .js2-player-sub { background:#fff; border:1px solid rgba(0,0,0,0.07); border-radius:12px; padding:12px 12px 6px; margin:12px 0 0; }
      #joinStep2 .js2-player-sub .match-step-sublabel { margin-top:0 !important; color:#1a6b3c; font-weight:700; }
      #joinStep2 .js2-teedot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
      #joinStep2 .js2-open-btn { width:100%; height:52px; background:#1a6b3c; color:#fff; border:none; border-radius:10px; font-family:'Inter',sans-serif; font-size:15px; font-weight:700; letter-spacing:0.04em; cursor:pointer; margin-top:22px; }
      #joinStep2 .js2-open-btn:disabled { opacity:0.5; cursor:default; }
    
/* ===== block 8 (was index.html line 17106) ===== */
      #screen-chat.screen.active{display:flex;flex-direction:column;}
      #screen-chat .app-header{height:56px;flex:0 0 56px;background:var(--green);display:flex;align-items:center;padding:0 16px;}
      #screen-chat .sub-header{flex:0 0 54px;background:var(--gold);display:flex;align-items:center;justify-content:space-between;padding:0 14px;gap:10px;}
      #screen-chat .back-pill{background:var(--green);color:#fff;border:none;border-radius:20px;padding:7px 16px;font-weight:700;font-size:12px;letter-spacing:0.06em;cursor:pointer;}
      #screen-chat .chat-peer{display:flex;align-items:center;gap:10px;min-width:0;}
      #screen-chat .chat-peer img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#fff;flex:0 0 34px;border:2px solid rgba(255,255,255,0.7);}
      #screen-chat .chat-peer .nm{font-weight:700;font-size:1rem;color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
      #screen-chat .chat-msgs{flex:1 1 auto;overflow-y:auto;min-height:0;background:var(--canvas-tint);padding:14px 12px;display:flex;flex-direction:column;gap:8px;}
      #screen-chat .cbubble{max-width:78%;padding:8px 12px;border-radius:14px;font-size:0.9rem;line-height:1.35;word-wrap:break-word;}
      #screen-chat .cbubble.me{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:4px;}
      #screen-chat .cbubble.them{align-self:flex-start;background:#fff;color:var(--text);border:1px solid rgba(0,0,0,0.08);border-bottom-left-radius:4px;}
      #screen-chat .cbubble .ct{display:block;white-space:pre-wrap;}
      #screen-chat .cbubble .cmeta{display:block;font-size:0.62rem;opacity:0.6;margin-top:3px;text-align:right;}
      #screen-chat .chat-empty{margin:auto;text-align:center;color:var(--text-3);font-size:0.85rem;padding:20px;}
      #screen-chat .chat-counter{flex:0 0 auto;display:none;font-size:0.62rem;color:var(--text-3);text-align:right;padding:0 14px 4px;background:#fff;}
      #screen-chat .chat-counter.over{color:#c85a4a;font-weight:700;}
      #screen-chat .chat-composer{flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;padding:8px 12px calc(12px + env(safe-area-inset-bottom, 0px));background:#fff;border-top:1px solid rgba(0,0,0,0.08);}
      #screen-chat .chat-composer textarea{flex:1 1 auto;resize:none;border:1px solid rgba(0,0,0,0.15);border-radius:18px;padding:9px 14px;font-family:inherit;font-size:0.9rem;min-height:40px;max-height:96px;line-height:1.3;outline:none;box-sizing:border-box;}
      #screen-chat .chat-composer textarea:focus{border-color:var(--green);}
      #screen-chat .chat-send{flex:0 0 40px;width:40px;height:40px;border-radius:50%;border:none;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
      #screen-chat .chat-send:disabled{opacity:0.4;cursor:default;}
      #screen-chat .actions{display:flex;align-items:center;gap:8px;}
      #screen-chat .chat-actionbar{flex:0 0 auto;display:flex;justify-content:flex-end;padding:6px 12px;background:#fff;border-bottom:1px solid rgba(0,0,0,0.06);}
      #screen-chat .chat-blockbtn{display:flex;align-items:center;gap:6px;background:none;border:1px solid #c85a4a;color:#c85a4a;border-radius:16px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;}
      #screen-chat .chat-blockbtn:active{background:#fcefec;}
      #screen-chat .chat-blockbtn.is-blocked{border-color:#1a6b3c;color:#1a6b3c;}
      #screen-chat .chat-blocked-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px));background:#fff;border-top:1px solid rgba(0,0,0,0.08);font-size:0.85rem;color:#555;line-height:1.4;}
      
/* ===== block 9 (was index.html line 17162) ===== */
      #screen-inbox.screen.active{display:flex;flex-direction:column;}
      #screen-inbox .sub-header{flex:0 0 54px;background:var(--gold);display:flex;align-items:center;justify-content:space-between;padding:0 14px;}
      #screen-inbox .sub-header .title{font-family:'Roboto',sans-serif;font-weight:700;font-size:16px;color:var(--green);}
      #screen-inbox .back-pill{background:var(--green);color:#fff;border:none;border-radius:20px;padding:7px 16px;font-weight:700;font-size:12px;letter-spacing:0.06em;cursor:pointer;}
      #screen-inbox .inbox-list{flex:1 1 auto;overflow-y:auto;min-height:0;background:var(--bg);padding:4px 0 calc(4px + env(safe-area-inset-bottom, 0px));}
      #screen-inbox .ibx-row{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-bottom:1px solid rgba(0,0,0,0.06);}
      #screen-inbox .ibx-row:active{background:#f0f4f1;}
      #screen-inbox .ibx-row img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#eee;flex:0 0 46px;}
      #screen-inbox .ibx-main{flex:1 1 auto;min-width:0;}
      #screen-inbox .ibx-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
      #screen-inbox .ibx-name{font-weight:700;font-size:0.95rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
      #screen-inbox .ibx-time{font-size:0.68rem;color:var(--text-3);flex:0 0 auto;}
      #screen-inbox .ibx-prev{font-size:0.82rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
      #screen-inbox .ibx-row.unread .ibx-name{color:var(--green);}
      #screen-inbox .ibx-row.unread .ibx-prev{color:var(--text);font-weight:600;}
      #screen-inbox .ibx-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--green);color:#fff;font-size:0.66rem;font-weight:800;line-height:20px;text-align:center;}
      #screen-inbox .inbox-empty{margin:40px auto;text-align:center;color:var(--text-3);font-size:0.88rem;padding:20px;line-height:1.5;}
      
/* ===== block 10 (was index.html line 18019) ===== */
        #screen-notifications .og-section-label { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; color:#1a6b3c; letter-spacing:0.08em; text-transform:uppercase; margin:2px 0 10px; }
        #screen-notifications .open-game-card { display:flex; align-items:stretch; gap:12px; background:#f0f9f4; border:1.5px solid #1a6b3c; border-radius:12px; padding:12px; margin-bottom:10px; }
        #screen-notifications .og-btns { display:flex; flex-direction:column; gap:8px; flex:0 0 auto; justify-content:center; }
        #screen-notifications .og-btn { border:none; border-radius:8px; padding:9px 14px; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; min-width:96px; }
        #screen-notifications .og-cancel { background:#fff; border:1.5px solid #c0392b; color:#c0392b; }
        #screen-notifications .og-continue { background:#1a6b3c; color:#fff; }
        #screen-notifications .og-info { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; }
        #screen-notifications .og-badge { align-self:flex-start; display:inline-block; font-family:'Inter',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:2px 8px; border-radius:10px; margin-bottom:5px; }
        #screen-notifications .og-badge.active { background:#1a6b3c; color:#fff; }
        #screen-notifications .og-badge.waiting { background:#e1c245; color:#1a6b3c; }
        #screen-notifications .og-title { font-family:'Inter',sans-serif; font-size:14px; font-weight:700; color:#111; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        #screen-notifications .og-sub { font-family:'Roboto',sans-serif; font-size:12px; color:#777; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        #screen-notifications .notif-del { flex:0 0 auto; margin-left:8px; width:28px; height:28px; border:none; border-radius:50%; background:transparent; color:#bbb; font-size:14px; line-height:1; cursor:pointer; align-self:center; }
        #screen-notifications .notif-del:hover, #screen-notifications .notif-del:active { background:#fbeae8; color:#c0392b; }
        #screen-notifications .sub-header { gap:6px; padding:0 12px; }
        #screen-notifications .sub-header .title { font-size:14px; flex:0 0 auto; white-space:nowrap; }
        #screen-notifications .sub-header .actions { gap:6px; flex-wrap:nowrap; }
        #screen-notifications .sub-header .back-pill { padding:6px 11px; font-size:11px; line-height:1; white-space:nowrap; letter-spacing:0.02em; }
        #screen-notifications .bell-req-card { display:flex; align-items:center; gap:10px; border:1.5px solid #1a6b3c; background:#f0f9f4; border-radius:12px; padding:12px 14px; margin-bottom:10px; }
        #screen-notifications .bell-req-info { flex:1 1 auto; min-width:0; }
        #screen-notifications .bell-req-name { font-family:'Inter',sans-serif; font-size:15px; font-weight:700; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        #screen-notifications .bell-req-sub { font-family:'Roboto',sans-serif; font-size:12px; color:#777; }
        #screen-notifications .bell-req-actions { display:flex; gap:8px; flex:0 0 auto; }
        #screen-notifications .bell-req-accept, #screen-notifications .bell-req-decline { width:36px; height:36px; border-radius:50%; border:1.5px solid; font-size:15px; font-weight:700; cursor:pointer; }
        #screen-notifications .bell-req-accept { background:#1a6b3c; border-color:#1a6b3c; color:#fff; }
        #screen-notifications .bell-req-decline { background:#fff; border-color:#c0392b; color:#c0392b; }
      
/* ===== block 11 (was index.html line 19462) ===== */
        #screen-trteam .trb-addrow{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap;}
        #screen-trteam .trb-addbtn{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--green);color:var(--green);border-radius:20px;padding:8px 16px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;}
        #screen-trteam .trb-addbtn:active{background:#eef7f1;}
        #screen-trteam .trb-guestform{margin:14px auto 0;max-width:340px;background:#f7faf8;border:1px solid var(--green);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;}
        #screen-trteam .trb-guest-sub{font-family:'Inter',sans-serif;font-size:12px;color:#556;text-align:center;line-height:1.4;}
        #screen-trteam .trb-guest-input{border:1px solid rgba(0,0,0,0.15);border-radius:10px;padding:10px 12px;font-family:'Inter',sans-serif;font-size:14px;outline:none;}
        #screen-trteam .trb-guest-input:focus{border-color:var(--green);}
        #screen-trteam .trb-guest-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;}
        #screen-trteam .trb-guest-cancel{background:none;border:none;color:#888;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;cursor:pointer;padding:8px 10px;}
        #screen-trteam .trb-guest-add{background:var(--green);color:#fff;border:none;border-radius:20px;padding:9px 18px;font-family:'Inter',sans-serif;font-size:14px;font-weight:700;cursor:pointer;}
        #screen-trteam .player-nickname .guest-tag{display:inline-block;background:var(--gold);color:#1a4a2a;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;padding:1px 5px;border-radius:6px;vertical-align:middle;margin-left:3px;}
        
/* ===== block 12 (was index.html line 24059) ===== */
.sc-share-overlay{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;padding:20px;}
.sc-share-modal{background:#fff;border-radius:18px;padding:18px;max-width:360px;width:100%;max-height:92vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
.sc-share-title{font-family:'Inter',sans-serif;font-weight:800;font-size:18px;color:#1a6b3c;text-align:center;}
.sc-size-row{display:flex;gap:8px;justify-content:center;}
.sc-size-opt{flex:1;background:#fff;border:1.5px solid #1a6b3c;color:#1a6b3c;border-radius:18px;padding:8px;font-family:'Inter',sans-serif;font-weight:700;font-size:13px;cursor:pointer;}
.sc-size-opt.active{background:#1a6b3c;color:#fff;}
.sc-preview-wrap{display:flex;justify-content:center;background:#f0f4f1;border-radius:12px;padding:10px;min-height:120px;align-items:center;}
.sc-preview-wrap img{max-width:100%;max-height:58vh;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.18);}
.sc-share-actions{display:flex;gap:8px;}
.sc-share-btn{flex:1;background:#1a6b3c;color:#fff;border:none;border-radius:22px;padding:12px;font-family:'Inter',sans-serif;font-weight:800;font-size:15px;cursor:pointer;}
.sc-dl-btn{flex:0 0 auto;background:#fff;border:1.5px solid #1a6b3c;color:#1a6b3c;border-radius:22px;padding:12px 18px;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;cursor:pointer;}
.sc-share-close{background:none;border:none;color:#888;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;cursor:pointer;padding:4px;}
.round-share-btn{flex:0 0 auto;background:#1a6b3c;color:#fff;border:none;border-radius:8px;width:36px;height:36px;font-size:1.05rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0 2px;}

/* ===== Dutch (NL): single-word round buttons (VOLGENDE, OPSLAAN ...) are longer than NEXT/SAVE.
   i18n.js sets <html lang="nl">; "PLAY GOLF" (two spans) is not affected. ===== */
html[lang="nl"] .play-btn span:only-child {font-size: 11px !important; letter-spacing: 0.02em !important;}


/* ===== Solo Round setup (screen-solosetup) · copied from Choose Tee / Scramble Format + Solo parts ===== */
#screen-solosetup{flex-direction:column;background:var(--bg);}
#screen-solosetup.active{display:flex;}
#screen-solosetup .section{background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-solosetup .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-solosetup .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-solosetup .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-solosetup .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-solosetup .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-solosetup .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-solosetup .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-solosetup .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-solosetup .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-solosetup .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-solosetup .body-area {flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-solosetup .player-block {margin-bottom: 8px;}
#screen-solosetup .player-label {font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); text-align: center; margin-bottom: 10px;}
#screen-solosetup .player-avatar-wrap {width: 72px; height: 72px; border-radius: 50%;
    overflow: hidden; border: 2.5px solid var(--green);
    background: #f0f4f1; margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;}
#screen-solosetup .player-avatar-wrap img {width: 100%; height: 100%; object-fit: cover; display: block;}
#screen-solosetup .player-meta {text-align: center; margin-bottom: 12px;}
#screen-solosetup .player-nickname {font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: var(--text-2); margin-right: 8px;}
#screen-solosetup .player-hcp {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3);}
#screen-solosetup .tee-group {display: flex; gap: 8px; margin-bottom: 16px;}
#screen-solosetup .tee-btn {flex: 1; min-width: 0; height: 38px; padding: 0 6px;
    border-radius: 8px; border: none;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    cursor: pointer; background: var(--green); color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    white-space: nowrap;
    opacity: 0.45; transition: opacity 0.15s;}
#screen-solosetup .tee-btn.active {opacity: 1;}
#screen-solosetup .tee-dot {width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;}
#screen-solosetup .tee-dot.champion {background: var(--tee1);}
#screen-solosetup .tee-dot.medal {background: var(--tee2);}
#screen-solosetup .tee-dot.forward {background: var(--tee3);}
#screen-solosetup .player-divider {height: 1px; background: rgba(0,0,0,0.07); margin-bottom: 20px;}
#screen-solosetup .player-block:last-child .player-divider {display: none;}
#screen-solosetup .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-solosetup .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-solosetup .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-solosetup .nav-tab.active {opacity: 1;}
#screen-solosetup .nav-spacer {position: relative; align-self: stretch;}
#screen-solosetup .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-solosetup .nav-tab svg {display: block;}
#screen-solosetup .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-solosetup .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-solosetup .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-solosetup .play-btn span {display: block;}
#screen-solosetup .tee-dot.senior{background:#2f6fd0;}
#screen-solosetup .section-title {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
    color: var(--text); text-align: center;
    margin-bottom: 18px; letter-spacing: 0.04em; text-transform: uppercase;}
#screen-solosetup .format-pill {height: 72px; border-radius: 8px;
    border: 1.5px solid var(--green);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
    cursor: pointer; background: #fff; color: var(--green);
    transition: all 0.15s; text-align: center; padding: 0 6px;}
#screen-solosetup .format-pill.active {background: var(--green); color: #fff; border-color: var(--green);}
#screen-solosetup .so-course {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 18px; color: var(--green); text-align: center;}
#screen-solosetup .so-course-meta {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); text-align: center; margin: 2px 0 14px;}
#screen-solosetup .so-player {text-align: center; margin-bottom: 6px;}
#screen-solosetup .so-player-name {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text); margin-top: 6px;}
#screen-solosetup .section-title {margin: 14px 0 8px;}
#screen-solosetup .so-field {display: flex; align-items: center; gap: 6px; height: 44px; border: 1.5px solid rgba(26,107,60,0.35); border-radius: 8px; padding: 0 12px; background: #fff;}
#screen-solosetup .so-field input {flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--text);}
#screen-solosetup .so-field span {font-family: 'Inter', sans-serif; font-weight: 700; color: var(--text-3);}
#screen-solosetup .tee-group {flex-wrap: wrap; margin-bottom: 0;}
#screen-solosetup .tee-btn {min-width: 86px;}
#screen-solosetup .tee-dot.blue {background: #2f6fd6;}
#screen-solosetup .tee-dot.senior {background: #c9a227;}
#screen-solosetup .so-formats {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
#screen-solosetup .so-formats .format-pill {height: 48px; font-size: 14px;}
#screen-solosetup .so-fmt-desc {font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.45; color: var(--text-3); margin-top: 8px;}
#screen-solosetup .so-allow {display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center;}
#screen-solosetup .so-pct input {width: 52px; flex: 0 0 52px; text-align: right; -moz-appearance: textfield; appearance: textfield;}
#screen-solosetup .so-field input::-webkit-outer-spin-button, #screen-solosetup .so-field input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
#screen-solosetup .so-allow-hint {font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.4; color: var(--text-3);}
#screen-solosetup .so-result {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px;}
#screen-solosetup .so-res-cell {border-radius: 10px; background: #f4f8f5; border: 1px solid rgba(26,107,60,0.15); padding: 10px 8px; display: flex; flex-direction: column; align-items: center;}
#screen-solosetup .so-res-cell.main {background: var(--green); border-color: var(--green);}
#screen-solosetup .so-res-label {font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);}
#screen-solosetup .so-res-cell.main .so-res-label {color: rgba(255,255,255,0.8);}
#screen-solosetup .so-res-value {font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: 700; color: var(--green); line-height: 1.2;}
#screen-solosetup .so-res-cell.main .so-res-value {color: #fff;}
#screen-solosetup .so-tee-meta, #screen-solosetup .so-nine {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); text-align: center; margin-top: 8px;}
#screen-solosetup .so-warn, #screen-solosetup .so-warn-inline {font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.4; color: #8a5a00; background: #fff6e0; border-radius: 8px; padding: 8px 10px; margin-top: 10px;}
/* Solo on the shared scorecards */
#screen-trscore .so-hole-strokes {font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: #b07d12; margin-top: 3px;}
#screen-trscore .so-hole-strokes.none {color: var(--text-3); font-weight: 500;}
#screen-trfull .so-dots, #screen-rounddetail .so-dots {color: #b07d12; font-size: 11px; font-weight: 700; margin-left: 1px; letter-spacing: -1px;}
#screen-trfull .so-dots.minus, #screen-rounddetail .so-dots.minus {color: var(--text-3); letter-spacing: 0;}
/* Choose Game: fourth card */
#screen-choosegame .game-card.solo-round {background-image: url('icons/covers/6.jpg');}

/* ===== What's New, now a section at the top of Help & FAQ (was a pop-up) ===== */
#screen-faq .wn-card {background: #fff; border: 1.5px solid rgba(26,107,60,0.18); border-radius: 12px; margin: 0 0 18px; overflow: hidden;}
#screen-faq .wn-card summary {list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;}
#screen-faq .wn-card summary::-webkit-details-marker {display: none;}
#screen-faq .wn-crown {font-size: 24px; line-height: 1;}
#screen-faq .wn-sum-text {flex: 1; display: flex; flex-direction: column;}
#screen-faq .wn-sum-title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; color: var(--green);}
#screen-faq .wn-sum-ver {font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-top: 2px;}
#screen-faq .wn-chev {font-size: 22px; color: var(--text-3); transition: transform 0.2s ease;}
#screen-faq .wn-card[open] .wn-chev {transform: rotate(90deg);}
#screen-faq .wn-body {padding: 0 14px 12px;}
#screen-faq .wn-body .whats-new-label {color: var(--text); font-family: 'Inter', sans-serif;}
#screen-faq .wn-body .whats-new-desc {color: var(--text-3); font-family: 'Inter', sans-serif;}
#screen-faq .wn-body .whats-new-item {border-bottom-color: rgba(0,0,0,0.07);}

/* ===== Solo setup, cleaner layout (14 Oct): compact format switch with (i), one handicap box ===== */
#screen-solosetup .so-fmt-row {display: flex; align-items: center; gap: 10px; margin-top: 16px;}
#screen-solosetup .so-seg {flex: 1; display: flex; background: #eef4f0; border-radius: 20px; padding: 3px;}
#screen-solosetup .so-seg .so-fmt {flex: 1; height: 32px; border: 0; border-radius: 17px; background: transparent; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--green); cursor: pointer;}
#screen-solosetup .so-seg .so-fmt.active {background: var(--green); color: #fff;}
#screen-solosetup .so-info {flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--green); background: #fff; color: var(--green); font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 14px; line-height: 1; cursor: pointer;}
#screen-solosetup .so-result {grid-template-columns: 1fr; margin-top: 16px;}
#screen-solosetup .so-res-cell.main {flex-direction: row; justify-content: space-between; padding: 10px 16px;}
#screen-solosetup .so-res-cell.main .so-res-value {font-size: 26px;}
#screen-solosetup .so-info.on {background: var(--green); color: #fff;}
#screen-solosetup .so-fmt-info {font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.45; color: var(--text-3); background: #f4f8f5; border-radius: 8px; padding: 8px 10px; margin-top: 8px;}

/* ===== 1vs1 Match Play (A3, 15 Oct): screens m1setup / m1score / m1full, cloned from Solo setup + Team Round scorecard ===== */
#screen-m1setup {flex-direction:column;background:var(--bg);}
#screen-m1setup.active {display:flex;}
#screen-m1setup .section {background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-m1setup .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-m1setup .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-m1setup .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-m1setup .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-m1setup .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-m1setup .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-m1setup .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-m1setup .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-m1setup .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-m1setup .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-m1setup .body-area {flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-m1setup .player-block {margin-bottom: 8px;}
#screen-m1setup .player-label {font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); text-align: center; margin-bottom: 10px;}
#screen-m1setup .player-avatar-wrap {width: 72px; height: 72px; border-radius: 50%;
    overflow: hidden; border: 2.5px solid var(--green);
    background: #f0f4f1; margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;}
#screen-m1setup .player-avatar-wrap img {width: 100%; height: 100%; object-fit: cover; display: block;}
#screen-m1setup .player-meta {text-align: center; margin-bottom: 12px;}
#screen-m1setup .player-nickname {font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: var(--text-2); margin-right: 8px;}
#screen-m1setup .player-hcp {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3);}
#screen-m1setup .tee-group {display: flex; gap: 8px; margin-bottom: 16px;}
#screen-m1setup .tee-btn {flex: 1; min-width: 0; height: 38px; padding: 0 6px;
    border-radius: 8px; border: none;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
    cursor: pointer; background: var(--green); color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    white-space: nowrap;
    opacity: 0.45; transition: opacity 0.15s;}
#screen-m1setup .tee-btn.active {opacity: 1;}
#screen-m1setup .tee-dot {width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;}
#screen-m1setup .tee-dot.champion {background: var(--tee1);}
#screen-m1setup .tee-dot.medal {background: var(--tee2);}
#screen-m1setup .tee-dot.forward {background: var(--tee3);}
#screen-m1setup .player-divider {height: 1px; background: rgba(0,0,0,0.07); margin-bottom: 20px;}
#screen-m1setup .player-block:last-child .player-divider {display: none;}
#screen-m1setup .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-m1setup .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-m1setup .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-m1setup .nav-tab.active {opacity: 1;}
#screen-m1setup .nav-spacer {position: relative; align-self: stretch;}
#screen-m1setup .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-m1setup .nav-tab svg {display: block;}
#screen-m1setup .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-m1setup .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-m1setup .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-m1setup .play-btn span {display: block;}
#screen-m1setup .tee-dot.senior {background:#2f6fd0;}
#screen-m1setup .section-title {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
    color: var(--text); text-align: center;
    margin-bottom: 18px; letter-spacing: 0.04em; text-transform: uppercase;}
#screen-m1setup .format-pill {height: 72px; border-radius: 8px;
    border: 1.5px solid var(--green);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
    cursor: pointer; background: #fff; color: var(--green);
    transition: all 0.15s; text-align: center; padding: 0 6px;}
#screen-m1setup .format-pill.active {background: var(--green); color: #fff; border-color: var(--green);}
#screen-m1setup .so-course {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 18px; color: var(--green); text-align: center;}
#screen-m1setup .so-course-meta {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); text-align: center; margin: 2px 0 14px;}
#screen-m1setup .so-player {text-align: center; margin-bottom: 6px;}
#screen-m1setup .so-player-name {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text); margin-top: 6px;}
#screen-m1setup .section-title {margin: 14px 0 8px;}
#screen-m1setup .so-field {display: flex; align-items: center; gap: 6px; height: 44px; border: 1.5px solid rgba(26,107,60,0.35); border-radius: 8px; padding: 0 12px; background: #fff;}
#screen-m1setup .so-field input {flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--text);}
#screen-m1setup .so-field span {font-family: 'Inter', sans-serif; font-weight: 700; color: var(--text-3);}
#screen-m1setup .tee-group {flex-wrap: wrap; margin-bottom: 0;}
#screen-m1setup .tee-btn {min-width: 86px;}
#screen-m1setup .tee-dot.blue {background: #2f6fd6;}
#screen-m1setup .tee-dot.senior {background: #c9a227;}
#screen-m1setup .so-formats {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
#screen-m1setup .so-formats .format-pill {height: 48px; font-size: 14px;}
#screen-m1setup .so-fmt-desc {font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.45; color: var(--text-3); margin-top: 8px;}
#screen-m1setup .so-allow {display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center;}
#screen-m1setup .so-pct input {width: 52px; flex: 0 0 52px; text-align: right; -moz-appearance: textfield; appearance: textfield;}
#screen-m1setup .so-field input::-webkit-outer-spin-button, #screen-m1setup .so-field input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
#screen-m1setup .so-allow-hint {font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.4; color: var(--text-3);}
#screen-m1setup .so-result {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px;}
#screen-m1setup .so-res-cell {border-radius: 10px; background: #f4f8f5; border: 1px solid rgba(26,107,60,0.15); padding: 10px 8px; display: flex; flex-direction: column; align-items: center;}
#screen-m1setup .so-res-cell.main {background: var(--green); border-color: var(--green);}
#screen-m1setup .so-res-label {font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);}
#screen-m1setup .so-res-cell.main .so-res-label {color: rgba(255,255,255,0.8);}
#screen-m1setup .so-res-value {font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: 700; color: var(--green); line-height: 1.2;}
#screen-m1setup .so-res-cell.main .so-res-value {color: #fff;}
#screen-m1setup .so-tee-meta, #screen-m1setup .so-nine {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); text-align: center; margin-top: 8px;}
#screen-m1setup .so-warn, #screen-m1setup .so-warn-inline {font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.4; color: #8a5a00; background: #fff6e0; border-radius: 8px; padding: 8px 10px; margin-top: 10px;}
#screen-m1setup .so-fmt-row {display: flex; align-items: center; gap: 10px; margin-top: 16px;}
#screen-m1setup .so-seg {flex: 1; display: flex; background: #eef4f0; border-radius: 20px; padding: 3px;}
#screen-m1setup .so-seg .so-fmt {flex: 1; height: 32px; border: 0; border-radius: 17px; background: transparent; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--green); cursor: pointer;}
#screen-m1setup .so-seg .so-fmt.active {background: var(--green); color: #fff;}
#screen-m1setup .so-info {flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--green); background: #fff; color: var(--green); font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 14px; line-height: 1; cursor: pointer;}
#screen-m1setup .so-result {grid-template-columns: 1fr; margin-top: 16px;}
#screen-m1setup .so-res-cell.main {flex-direction: row; justify-content: space-between; padding: 10px 16px;}
#screen-m1setup .so-res-cell.main .so-res-value {font-size: 26px;}
#screen-m1setup .so-info.on {background: var(--green); color: #fff;}
#screen-m1setup .so-fmt-info {font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.45; color: var(--text-3); background: #f4f8f5; border-radius: 8px; padding: 8px 10px; margin-top: 8px;}
#screen-m1score {flex-direction:column;background:var(--bg);}
#screen-m1score.active {display:flex;}
#screen-m1score .section {background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-m1score .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-m1score .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-m1score .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-m1score .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-m1score .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-m1score .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-m1score .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-m1score .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-m1score .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-m1score .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-m1score .body-area {flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-m1score .section {margin-bottom: 44px;}
#screen-m1score .section:last-child {margin-bottom: 0;}
#screen-m1score .context-course {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px;}
#screen-m1score .context-meta {font-family: 'Roboto', sans-serif; font-size: 11px; color: var(--text-3);}
#screen-m1score .stats-bar {display: grid; grid-template-columns: repeat(4,1fr); border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden;}
#screen-m1score .stat-cell {padding: 8px 6px; text-align: center; border-right: 1px solid rgba(0,0,0,0.1);}
#screen-m1score .stat-cell:last-child {border-right: none;}
#screen-m1score .stat-label {display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px;}
#screen-m1score .stat-value {font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--text);}
#screen-m1score .hole-nav {display: flex; align-items: center; justify-content: space-between;}
#screen-m1score .hole-arrow {width: 32px; height: 32px; background: none; border: none; font-size: 22px; color: var(--green); cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700;}
#screen-m1score .hole-info {text-align: center;}
#screen-m1score .hole-title {font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; color: var(--text);}
#screen-m1score .hole-par {font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-3); margin-top: 2px;}
#screen-m1score .hole-si {font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--green); margin-top: 3px;}
#screen-m1score .score-area {border: 1.5px solid var(--green); border-radius: 10px;
    height: 80px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; gap: 4px;
    transition: background 0.15s;}
#screen-m1score .score-area:active {background: #f0f7f3;}
#screen-m1score .score-display {font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 800; color: var(--text); line-height: 1; text-align: center;}
#screen-m1score .score-hint {font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--text-3); text-align: center;}
#screen-m1score .dot-row {display: flex; align-items: center; justify-content: center; gap: 5px;}
#screen-m1score .dot {width: 8px; height: 8px; border-radius: 50%; background: #ddd; transition: background 0.15s, transform 0.15s; cursor: pointer;}
#screen-m1score .dot.active {background: var(--green); transform: scale(1.3);}
#screen-m1score .dot.scored {background: var(--gold);}
#screen-m1score .all-holes-btn {display: flex; align-items: center; justify-content: center; gap: 6px; width: 130px; margin: 0 auto; background: none; border: 1.5px solid var(--green); border-radius: 20px; padding: 7px 14px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--green); cursor: pointer;}
#screen-m1score .save-round-btn {display: block; margin: 0 auto; background: none; border: 1.5px solid #ccc; border-radius: 20px; padding: 8px 24px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-3); cursor: pointer; letter-spacing: 0.04em;}
#screen-m1score .numpad-overlay {position: absolute; left: 0; right: 0; bottom: 72px; background: #f5f5f5; border-top: 1px solid #ddd; padding: 10px 12px 12px; z-index: 20; display: none;}
#screen-m1score .numpad-overlay.open {display: block;}
#screen-m1score .numpad-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
#screen-m1score .numpad-context {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3);}
#screen-m1score .numpad-display {font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 800; color: var(--text); min-width: 40px; text-align: right;}
#screen-m1score .numpad-ok {background: var(--green); color: #fff; border: none; border-radius: 8px; padding: 8px 20px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer;}
#screen-m1score .numpad-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
#screen-m1score .num-btn {height: 46px; background: #fff; border: 1px solid #ddd; border-radius: 10px; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 500; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center;}
#screen-m1score .num-btn:active {background: #e8e8e8;}
#screen-m1score .num-btn.del {font-size: 16px; color: var(--text-3);}
#screen-m1score .num-btn.zero {grid-column: 1 / 3;}
#screen-m1score .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-m1score .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-m1score .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-m1score .nav-tab.active {opacity: 1;}
#screen-m1score .nav-spacer {position: relative; align-self: stretch;}
#screen-m1score .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-m1score .nav-tab svg {display: block;}
#screen-m1score .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-m1score .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-m1score .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-m1score .play-btn span {display: block;}
#screen-m1full {flex-direction:column;background:var(--bg);}
#screen-m1full.active {display:flex;}
#screen-m1full .section {background:transparent;border:0;border-radius:0;overflow:visible;margin:0;}
#screen-m1full .app-header {height: 56px; flex: 0 0 56px; background: var(--green); display: flex; align-items: center; padding: 0 16px; position: relative;}
#screen-m1full .logo {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px;}
#screen-m1full .logo .crown {display: block; width: 24px; height: 24px; object-fit: contain;}
#screen-m1full .logo .wordmark {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.2px; line-height: 1;}
#screen-m1full .header-icons {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px;}
#screen-m1full .icon-btn {width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; padding: 0; cursor: pointer;}
#screen-m1full .sub-header {flex: 0 0 44px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#screen-m1full .sub-header .title {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: var(--green);}
#screen-m1full .sub-header .actions {display: flex; align-items: center; gap: 8px;}
#screen-m1full .back-pill {background: var(--green); color: #fff; border: none; border-radius: 20px; padding: 6px 14px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; cursor: pointer;}
#screen-m1full .body-area {flex: 1 1 auto; background: #fff; padding: 20px 16px 92px; overflow-y: auto; min-height: 0;}
#screen-m1full .course-name {font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px;}
#screen-m1full .course-meta {font-family: 'Roboto', sans-serif; font-size: 11px; color: var(--text-3); margin-bottom: 16px;}
#screen-m1full .stats-bar {display: grid; grid-template-columns: repeat(4,1fr); border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden; margin-bottom: 20px;}
#screen-m1full .stat-cell {padding: 9px 6px; text-align: center; border-right: 1px solid rgba(0,0,0,0.1);}
#screen-m1full .stat-cell:last-child {border-right: none;}
#screen-m1full .stat-label {display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px;}
#screen-m1full .stat-value {font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--text);}
#screen-m1full .stat-value.positive {color: var(--red);}
#screen-m1full .stat-value.negative {color: var(--blue);}
#screen-m1full .sc-table {width: 100%; border-collapse: collapse; font-size: 13px; border: 1.5px solid var(--green); border-radius: 8px; overflow: hidden;}
#screen-m1full .sc-table thead tr {background: var(--green);}
#screen-m1full .sc-table th {color: #fff; padding: 9px 6px; text-align: center; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;}
#screen-m1full .sc-table tbody tr:nth-child(even) {background: #f7fbf8;}
#screen-m1full .sc-table tbody tr:last-child {background: #eef5f0;}
#screen-m1full .sc-table td {padding: 10px 6px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.06); color: var(--text); font-family: 'Roboto', sans-serif;}
#screen-m1full .sc-table tbody tr:last-child td {font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; border-bottom: none;}
#screen-m1full .over-par {color: var(--red) !important; font-weight: 700;}
#screen-m1full .under-par {color: var(--blue) !important; font-weight: 700;}
#screen-m1full .si-badge {display: inline-block;
    font-size: 10px; font-weight: 600;
    padding: 1px 5px; border-radius: 4px;
    font-family: 'Inter', sans-serif;}
#screen-m1full .si-hard {background: #fde8e8; color: var(--red);}
#screen-m1full .si-average {background: #fff8e1; color: #b8860b;}
#screen-m1full .si-easy {background: #e8f5e9; color: var(--green);}
#screen-m1full .dock {position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 15; pointer-events: none;}
#screen-m1full .bottom-nav {position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: var(--green); display: grid; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; pointer-events: auto; padding-bottom: 6px;}
#screen-m1full .nav-tab {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; cursor: pointer; opacity: 0.65; position: relative; background: transparent; border: 0; padding: 0;}
#screen-m1full .nav-tab.active {opacity: 1;}
#screen-m1full .nav-spacer {position: relative; align-self: stretch;}
#screen-m1full .nav-tab.active::before {content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--gold);}
#screen-m1full .nav-tab svg {display: block;}
#screen-m1full .nav-tab img.nav-icon {display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1);}
#screen-m1full .nav-tab .label {font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff;}
#screen-m1full .play-btn {position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: 0.06em; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); pointer-events: auto; cursor: pointer; z-index: 4; text-transform: uppercase;}
#screen-m1full .play-btn span {display: block;}/* 1vs1 own components */
#screen-choosegame .game-card.match-1v1 {background-image: url('icons/covers/5.jpg');}
#screen-m1setup .body-area {padding-top: 16px;}
#screen-m1setup .so-course-meta {margin-bottom: 12px;}
#screen-m1setup .m1-player {border: 1px solid rgba(26,107,60,0.15); background: #fafcfb; border-radius: 12px; padding: 10px 12px;}
#screen-m1setup .m1-p-head {display: flex; align-items: center; gap: 10px;}
#screen-m1setup .m1-av, #screen-m1score .m1-av {width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; object-fit: cover; background: #e8f0eb; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15);}
#screen-m1setup .m1-p-name {flex: 1; min-width: 0; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#screen-m1setup .m1-pick {flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 38px; padding: 0 10px; border: 1.5px dashed rgba(26,107,60,0.45); border-radius: 8px; background: #fff; cursor: pointer;}
#screen-m1setup .m1-pick.set {border-style: solid; border-color: transparent; background: transparent; padding-left: 0;}
#screen-m1setup .m1-pick-name {font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#screen-m1setup .m1-pick.set .m1-pick-name {color: var(--text);}
#screen-m1setup .m1-chev {font-size: 20px; color: var(--green); line-height: 1;}
#screen-m1setup .m1-idx {display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 0 0 66px;}
#screen-m1setup .m1-idx span {font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-3);}
#screen-m1setup .m1-idx input {width: 66px; height: 34px; border: 1.5px solid rgba(26,107,60,0.35); border-radius: 8px; background: #fff; text-align: center; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); outline: none; -moz-appearance: textfield; appearance: textfield;}
#screen-m1setup .m1-idx input::-webkit-outer-spin-button, #screen-m1setup .m1-idx input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
#screen-m1setup .m1-player .tee-group {margin-top: 10px;}
#screen-m1setup .m1-player .tee-btn {height: 32px; min-width: 76px; font-size: 12px;}
#screen-m1setup .m1-vs {display: flex; align-items: center; gap: 10px; margin: 8px 0;}
#screen-m1setup .m1-vs::before, #screen-m1setup .m1-vs::after {content: ""; flex: 1; height: 1px; background: rgba(0,0,0,0.08);}
#screen-m1setup .m1-vs span {font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold);}
#screen-m1setup .m1-gender {display: flex; gap: 6px; margin-top: 10px;}
#screen-m1setup .m1-g {flex: 1; height: 28px; border-radius: 14px; border: 1px solid rgba(26,107,60,0.3); background: #fff; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--green); cursor: pointer;}
#screen-m1setup .m1-g.active {background: var(--green); border-color: var(--green); color: #fff;}
#screen-m1setup .so-fmt-row {margin-top: 14px;}
#screen-m1setup .m1-allow {display: flex; align-items: center; justify-content: space-between; margin-top: 10px;}
#screen-m1setup .m1-allow-label {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text);}
#screen-m1setup .m1-allow .so-field {width: 104px; height: 38px;}
#screen-m1setup .m1-allow .so-field input {text-align: right;}
#screen-m1setup .so-result {margin-top: 12px;}
#screen-m1setup .so-res-label {text-transform: none; letter-spacing: 0; font-size: 13px;}
#screen-m1setup .m1-res-sub {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); text-align: center; margin-top: 6px;}
#screen-m1setup .m1-sheet {position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,0.38); display: none; align-items: flex-end;}
#screen-m1setup .m1-sheet.open {display: flex;}
#screen-m1setup .m1-sheet-card {width: 100%; max-height: 72%; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; padding: 14px 16px 20px; box-shadow: 0 -6px 20px rgba(0,0,0,0.15);}
#screen-m1setup .m1-sheet-head {display: flex; align-items: center; justify-content: space-between; font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 700; color: var(--green); margin-bottom: 8px;}
#screen-m1setup .m1-sheet-x {width: 32px; height: 32px; border: 0; border-radius: 50%; background: #eef4f0; color: var(--green); font-size: 20px; line-height: 1; cursor: pointer;}
#screen-m1setup .m1-sheet-list {overflow-y: auto; min-height: 0; flex: 1 1 auto;}
#screen-m1setup .m1-bud {display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 4px; border: 0; border-bottom: 1px solid rgba(0,0,0,0.06); background: transparent; cursor: pointer; text-align: left;}
#screen-m1setup .m1-bud img {width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #e8f0eb;}
#screen-m1setup .m1-bud-name {flex: 1; min-width: 0; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#screen-m1setup .m1-bud-hcp {font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-3);}
#screen-m1setup .m1-sheet-empty {font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-3); padding: 10px 4px;}
#screen-m1setup .m1-guest {display: flex; gap: 8px; margin-top: 12px;}
#screen-m1setup .m1-guest input {flex: 1; min-width: 0; height: 42px; border: 1.5px solid rgba(26,107,60,0.35); border-radius: 8px; padding: 0 12px; font-family: 'Inter', sans-serif; font-size: 15px; outline: none;}
#screen-m1setup .m1-guest-btn {flex: 0 0 auto; height: 42px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--green); color: #fff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer;}

#screen-m1score .section {margin-bottom: 16px;}
#screen-m1score .numpad-overlay {top: auto; box-shadow: 0 -6px 16px rgba(0,0,0,0.12);}   /* bottom sheet: both player rows stay visible */
#screen-m1score .body-area {padding-top: 14px;}
#screen-m1score .m1-status {display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #eef4f0; border: 1.5px solid rgba(26,107,60,0.2);}
#screen-m1score .m1-status.up {background: var(--green); border-color: var(--green);}
#screen-m1score .m1-status.dormie {box-shadow: inset 0 0 0 2px var(--gold);}
#screen-m1score .m1-status.done {background: var(--gold); border-color: var(--gold);}
#screen-m1score .m1-st-main {font-family: 'Roboto', sans-serif; font-size: 19px; font-weight: 700; color: var(--green); line-height: 1.2; text-align: center;}
#screen-m1score .m1-st-sub {font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-3); text-align: center;}
#screen-m1score .m1-status.up .m1-st-main {color: #fff;}
#screen-m1score .m1-status.up .m1-st-sub {color: var(--gold);}
#screen-m1score .m1-status.done .m1-st-main, #screen-m1score .m1-status.done .m1-st-sub {color: var(--green);}
#screen-m1score .hole-par {font-weight: 600;}
#screen-m1score .m1-row {display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid rgba(26,107,60,0.18); border-radius: 12px; margin-bottom: 8px; background: #fff; transition: background 0.15s, border-color 0.15s;}
#screen-m1score .m1-row.won {border-color: var(--green); background: #f0f7f3;}
#screen-m1score .m1-row-mid {flex: 1; min-width: 0;}
#screen-m1score .m1-row-name {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#screen-m1score .m1-row-st {font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: #b07d12; margin-top: 1px;}
#screen-m1score .m1-row-st.none {color: var(--text-3); font-weight: 500;}
#screen-m1score .m1-concede {flex: 0 0 auto; height: 26px; padding: 0 9px; border: 1px solid #d5d5d5; border-radius: 13px; background: #fff; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); cursor: pointer;}
#screen-m1score .m1-concede.on {background: #c85a4a; border-color: #c85a4a; color: #fff;}
#screen-m1score .m1-score {flex: 0 0 56px; height: 50px; border: 1.5px solid var(--green); border-radius: 10px; background: #fff; font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 800; color: var(--text); cursor: pointer;}
#screen-m1score .m1-score.active {background: #e3f1e8;}
#screen-m1score .m1-score.locked {border-color: #ccc; color: var(--text-3);}
#screen-m1score .m1-hole-res {min-height: 18px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--green); text-align: center; margin-top: 2px;}
#screen-m1score .dot.won {background: var(--green);}
#screen-m1score .dot.lost {background: #c85a4a;}
#screen-m1score .dot.halved {background: var(--gold);}
#screen-m1score .dot.extra {border-radius: 2px;}
#screen-m1score .save-round-btn.ready {border-color: var(--green); background: var(--green); color: #fff;}
#screen-m1score .m1-finish {position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; padding: 16px;}
#screen-m1score .m1-finish.open {display: flex;}
#screen-m1score .m1-fin-card {width: 100%; max-width: 330px; background: #fff; border-radius: 18px; padding: 20px 18px 16px; text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,0.25);}
#screen-m1score .m1-fin-crown img {width: 44px; height: 44px; object-fit: contain;}
#screen-m1score .m1-fin-title {font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 700; color: var(--green); margin-top: 6px; line-height: 1.2;}
#screen-m1score .m1-fin-sub {font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-3); margin-top: 4px;}
#screen-m1score .m1-fin-btns {display: flex; flex-direction: column; gap: 8px; margin-top: 16px;}
#screen-m1score .m1-fin-btn {height: 44px; border-radius: 22px; border: 1.5px solid var(--green); background: #fff; color: var(--green); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer;}
#screen-m1score .m1-fin-btn.primary {background: var(--green); color: #fff;}
#screen-m1score .m1-fin-btn.link {border: 0; height: 32px; font-weight: 600; color: var(--text-3);}

#screen-m1full .m1-table {font-size: 12px;}
#screen-m1full .m1-table th {padding: 9px 3px; font-size: 10px;}
#screen-m1full .m1-table td {padding: 8px 3px;}
#screen-m1full .m1-table th:nth-child(4), #screen-m1full .m1-table th:nth-child(5) {max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#screen-m1full .m1-win, #screen-rounddetail .m1-win {display: inline-block; min-width: 24px; padding: 1px 4px; border-radius: 6px; background: #dcefe3; font-weight: 700;}
#screen-m1full .m1-dots, #screen-rounddetail .m1-dots {color: #b07d12; font-size: 10px; font-weight: 700; margin-left: 1px; letter-spacing: -1px;}
#screen-m1full .m1-mst, #screen-rounddetail .m1-mst {font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: var(--text-3);}
#screen-m1full .m1-mst.a, #screen-rounddetail .m1-mst.a {color: var(--green);}
#screen-m1full .m1-mst.b, #screen-rounddetail .m1-mst.b {color: #c85a4a;}
#screen-m1full .m1-extra td:first-child, #screen-rounddetail .m1-extra td:first-child {color: #b07d12; font-weight: 700;}
#screen-rounddetail .sc-table.m1-mode th, #screen-rounddetail .sc-table.m1-mode td {padding-left: 3px; padding-right: 3px;}
#screen-matches .type-toggle.m1-four .type-btn {font-size: 12px; letter-spacing: 0;}
/* v30: four buttons size to their label (short 1vs1 / Solo give room to Team Round / Team Match), so text never runs over the edge */
#screen-matches .type-toggle.m1-four {gap: 6px;}
#screen-matches .type-toggle.m1-four .type-btn {flex: 1 1 auto; min-width: 0; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;}
@media (max-width: 350px) { #screen-matches .type-toggle.m1-four .type-btn {font-size: 11px; padding: 0 6px;} }

/* 1vs1 setup, 15 Oct round 2: one type scale (names 15px, controls 13px, labels 11px), aligned opponent row, no allowance */
#screen-m1setup .m1-p-head {align-items: center; gap: 10px; min-height: 44px;}
#screen-m1setup .m1-p-name, #screen-m1setup .m1-pick-name {font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--text);}
#screen-m1setup .m1-pick {height: 40px; padding: 0 10px; align-self: center;}
#screen-m1setup .m1-pick:not(.set) .m1-pick-name {color: var(--green); font-weight: 600;}
#screen-m1setup .m1-pick.set {padding-left: 0;}
#screen-m1setup .m1-idx {flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 1.5px solid rgba(26,107,60,0.35); border-radius: 8px; background: #fff;}
#screen-m1setup .m1-idx span {font-size: 11px; letter-spacing: 0.06em;}
#screen-m1setup .m1-idx input {width: 46px; height: 36px; border: 0; padding: 0; text-align: right; font-size: 15px; background: transparent;}
#screen-m1setup .m1-player .tee-btn, #screen-m1setup .m1-g, #screen-m1setup .so-seg .so-fmt {font-size: 13px;}
#screen-m1setup .m1-result {margin-top: 14px; padding: 12px 16px; border-radius: 10px; background: var(--green); color: #fff; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.35; text-align: center;}
#screen-m1setup .m1-res-sub {font-size: 12px;}
/* names are never cut: they wrap inside narrow columns */
#screen-m1full .stat-label, #screen-rounddetail .stats-bar .stat-label {overflow-wrap: anywhere; line-height: 1.25;}
#screen-m1full .m1-table th:nth-child(4), #screen-m1full .m1-table th:nth-child(5) {max-width: none; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; font-size: 11px; line-height: 1.2;}
#screen-rounddetail .sc-table.m1-mode th:nth-child(4), #screen-rounddetail .sc-table.m1-mode th:nth-child(5) {white-space: normal; overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; line-height: 1.2;}
#screen-m1score .m1-row-name {white-space: normal; overflow-wrap: anywhere;}
/* player names in the stats boxes: normal case so a long name fits on one line */
#screen-m1full .stat-label.m1-name-lbl, #screen-rounddetail .stats-bar .stat-label.m1-name-lbl {text-transform: none; letter-spacing: 0; font-size: 11px; overflow-wrap: anywhere;}
#screen-m1full .stats-bar .stat-cell:nth-child(2), #screen-m1full .stats-bar .stat-cell:nth-child(3),
#screen-rounddetail .stats-bar.m1-names .stat-cell:nth-child(2), #screen-rounddetail .stats-bar.m1-names .stat-cell:nth-child(3) {padding-left: 2px; padding-right: 2px;}
#screen-m1full .stat-label.m1-name-lbl, #screen-rounddetail .stats-bar .stat-label.m1-name-lbl {overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: clip;}
#screen-m1full .stat-label.m1-name-lbl.long, #screen-rounddetail .stats-bar .stat-label.m1-name-lbl.long {font-size: 10px;}
#screen-m1full .stat-label.m1-name-lbl.xlong, #screen-rounddetail .stats-bar .stat-label.m1-name-lbl.xlong {font-size: 9px;}
/* ===== 1vs1 setup, Route B (15 Oct): section labels, divider, outlined tees, opponent folded into one line, two-step sheet ===== */
#screen-m1setup .body-area {padding-bottom: 130px;}   /* scrolls; START never covers the last line */
#screen-m1setup .m1-lbl {font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px;}
#screen-m1setup .m1-player .tee-group {margin-top: 10px;}
#screen-m1setup .m1-tees .tee-btn {height: 34px; border-radius: 17px; border: 1px solid rgba(26,107,60,0.3); background: #fff; color: var(--green); opacity: 1; font-size: 13px;}
#screen-m1setup .m1-tees .tee-btn.active {background: var(--green); border-color: var(--green); color: #fff;}
#screen-m1setup .m1-choose {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 14px; border: 1.5px dashed rgba(26,107,60,0.45); border-radius: 10px; background: #fff; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--green); cursor: pointer; box-sizing: border-box;}
#screen-m1setup .m1-opp {display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; font: inherit; box-sizing: border-box;}
#screen-m1setup .m1-opp-txt {flex: 1; min-width: 0; display: flex; flex-direction: column;}
#screen-m1setup .m1-opp .m1-p-name {white-space: normal; overflow-wrap: anywhere;}
#screen-m1setup .m1-opp-meta {font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-2); margin-top: 2px;}
#screen-m1setup .m1-edit {display: flex; align-items: center; gap: 4px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--green);}
#screen-m1setup .m1-hr {height: 1px; background: rgba(0,0,0,0.08); margin: 22px 0 18px;}
#screen-m1setup .so-fmt-row {margin-top: 0;}
#screen-m1setup .play-btn.m1-wait {opacity: 0.55;}
/* sheet */
#screen-m1setup .m1-sheet-card {max-height: 86%; overflow-y: auto;}
#screen-m1setup .m1-step .m1-lbl {margin-top: 16px;}
#screen-m1setup #m1_step1 .m1-lbl:first-child {margin-top: 6px;}
#screen-m1setup .m1-bud .m1-chev {margin-left: 4px;}
#screen-m1setup .m1-or {display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-3);}
#screen-m1setup .m1-or::before, #screen-m1setup .m1-or::after {content: ""; flex: 1; height: 1px; background: rgba(0,0,0,0.08);}
#screen-m1setup .m1-guest {margin-top: 0;}
#screen-m1setup .m1-d-who {display: flex; align-items: center; gap: 10px; margin-top: 6px;}
#screen-m1setup .m1-d-name {flex: 1; min-width: 0; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); overflow-wrap: anywhere;}
#screen-m1setup .m1-link {border: 0; background: none; padding: 6px 0; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--green); cursor: pointer; white-space: nowrap;}
#screen-m1setup .m1-idx-lg {width: 150px; height: 44px; box-sizing: border-box;}
#screen-m1setup .m1-idx-lg input {font-size: 16px; width: 60px;}
#screen-m1setup .m1-gseg {display: flex;}
#screen-m1setup .m1-gseg .m1-g {flex: 1; height: 36px; border: 0; border-radius: 18px; background: transparent; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--green); cursor: pointer;}
#screen-m1setup .m1-gseg .m1-g.active {background: var(--green); color: #fff;}
#screen-m1setup .m1-cap {font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-3); margin-top: 6px; min-height: 0;}
#screen-m1setup .m1-cap:empty {display: none;}
#screen-m1setup .m1-done {display: block; width: 100%; height: 48px; margin-top: 22px; border: 0; border-radius: 24px; background: var(--green); color: #fff; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer;}
#screen-m1setup .m1-dots {display: flex; gap: 6px; justify-content: center; margin-top: 16px;}
#screen-m1setup .m1-dots i {width: 8px; height: 8px; border-radius: 50%; background: #d6dfd9;}
#screen-m1setup .m1-dots i.on {background: var(--green);}

/* ── v26 · 1vs1 LIVE between buddies (app-m1live.js) ── */
#screen-m1setup .m1-live {display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border: 1px solid rgba(26,107,60,0.15); border-radius: 12px; background: #f3f8f5; cursor: pointer; position: relative;}
#screen-m1setup .m1-live-txt {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;}
#screen-m1setup .m1-live-t {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--text);}
#screen-m1setup .m1-live-s {font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--text-3); line-height: 1.35;}
#screen-m1setup .m1-live input {position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;}
#screen-m1setup .m1-switch {flex: 0 0 44px; width: 44px; height: 26px; border-radius: 13px; background: #cfd8d3; position: relative; transition: background 0.15s;}
#screen-m1setup .m1-switch::after {content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.15s;}
#screen-m1setup .m1-live input:checked + .m1-switch {background: var(--green);}
#screen-m1setup .m1-live input:checked + .m1-switch::after {transform: translateX(18px);}
#screen-m1setup .m1-live input:focus-visible + .m1-switch {box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green);}

#screen-m1score .m1-live-pill {display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 700; background: #e3f1e8; color: var(--green);}
#screen-m1score .m1-live-pill.wait {background: #f6f1e2; color: #8a6d1a;}
#screen-m1score .m1-live-pill.off {background: #f0f0f0; color: var(--text-3);}
#screen-m1score .m1-row-by {font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; color: #c85a4a; margin-top: 1px;}

.m1l-prompt {position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity 0.15s;}
.m1l-prompt.open {opacity: 1;}
.m1l-prompt .m1l-card {width: 100%; max-width: 330px; background: #fff; border-radius: 18px; padding: 20px 18px 16px; text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,0.25);}
.m1l-prompt .m1l-ic {font-size: 34px; line-height: 1;}
.m1l-prompt .m1l-title {font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 700; color: var(--green); margin-top: 8px; line-height: 1.25;}
.m1l-prompt .m1l-sub {font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); margin-top: 4px;}
.m1l-prompt .m1l-txt {font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-3); margin-top: 8px; line-height: 1.4;}
.m1l-prompt .m1l-btns {display: flex; flex-direction: column; gap: 8px; margin-top: 16px;}
.m1l-prompt .m1l-btn {height: 44px; border-radius: 22px; border: 1.5px solid var(--green); background: #fff; color: var(--green); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer;}
.m1l-prompt .m1l-btn.primary {background: var(--green); color: #fff;}
.m1l-prompt .m1l-btn.link {border-color: transparent; color: var(--text-3); height: 36px;}
#screen-notifications .m1l-card-bell .og-title {white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25;}

/* ── v28 · Profile reminder ── */
.m1l-prompt .pm-miss {text-align: left; margin: 10px auto 0; padding: 0 0 0 18px; max-width: 260px; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.5;}
#screen-editprofile .form-input.pm-missing {box-shadow: 0 0 0 2px #c85a4a; border-radius: 8px;}
#screen-editprofile .gender-pills.pm-missing {box-shadow: 0 0 0 2px #c85a4a; border-radius: 19px;}

/* ── v32 · Scramble Format: pills only, explanations behind the "i", custom in a pop-up ── */
#screen-trformat .tf-head {display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 8px; margin-bottom: 14px;}
#screen-trformat .tf-head .section-title {grid-column: 2; margin-bottom: 0;}
#screen-trformat .so-info {grid-column: 3; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--green); background: #fff; color: var(--green); font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 14px; line-height: 1; cursor: pointer; padding: 0;}
#screen-trformat .so-info.on {background: var(--green); color: #fff;}
#screen-trformat .so-fmt-info {font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.45; color: var(--text-3); background: #f4f8f5; border-radius: 8px; padding: 10px 12px; margin: 0 0 14px;}
#screen-trformat .tf-info-row + .tf-info-row {margin-top: 6px;}
#screen-trformat .tf-info-row b {color: var(--green); font-weight: 700; white-space: nowrap;}
#screen-trformat .tf-info-foot {padding-top: 6px; border-top: 1px solid rgba(26,107,60,0.12); margin-top: 8px !important;}
#screen-trformat .tf-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
#screen-trformat .tf-pill {min-height: 72px; border-radius: 10px; border: 1.5px solid var(--green); background: #fff; color: var(--green); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px; cursor: pointer; transition: all 0.15s; text-align: center;}
#screen-trformat .tf-pill.active {background: var(--green); color: #fff;}
#screen-trformat .tf-pct {font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 800; line-height: 1.2; white-space: nowrap;}
#screen-trformat .tf-sub {font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.8;}
#screen-trformat .tf-custom:not(.active) {border-style: dashed;}
@media (max-width: 350px) { #screen-trformat .tf-pct {font-size: 13px;} }
#screen-trformat .tf-sheet {position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,0.38); display: none; align-items: flex-end;}
#screen-trformat .tf-sheet.open {display: flex;}
#screen-trformat .tf-card {width: 100%; background: #fff; border-radius: 16px 16px 0 0; padding: 14px 16px 22px; box-shadow: 0 -6px 20px rgba(0,0,0,0.15);}
#screen-trformat .tf-card-head {display: flex; align-items: center; justify-content: space-between; font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 700; color: var(--green);}
#screen-trformat .tf-x {width: 32px; height: 32px; border: 0; border-radius: 50%; background: #eef4f0; color: var(--green); font-size: 20px; line-height: 1; cursor: pointer;}
#screen-trformat .tf-card-txt {font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--text-3); margin: 6px 0 12px; line-height: 1.4;}
#screen-trformat .tf-fields {display: flex; flex-direction: column; gap: 8px;}
#screen-trformat .tf-field {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid rgba(26,107,60,0.15); border-radius: 10px; background: #fafcfb;}
#screen-trformat .tf-field > span:first-child {font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text);}
#screen-trformat .tf-in {display: flex; align-items: center; gap: 4px;}
#screen-trformat .tf-in input {width: 72px; height: 38px; border: 1.5px solid rgba(26,107,60,0.35); border-radius: 8px; background: #fff; text-align: center; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); outline: none; -moz-appearance: textfield; appearance: textfield;}
#screen-trformat .tf-in input::-webkit-outer-spin-button, #screen-trformat .tf-in input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
#screen-trformat .tf-in input:focus {border-color: var(--green);}
#screen-trformat .tf-in i {font-style: normal; font-family: 'Inter', sans-serif; font-weight: 700; color: var(--text-3);}
#screen-trformat .tf-err {min-height: 18px; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: #c85a4a; margin-top: 8px;}
#screen-trformat .tf-save {width: 100%; height: 46px; margin-top: 4px; border: 0; border-radius: 23px; background: var(--green); color: #fff; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer;}

/* ── v32 · Account Settings: email change ── */
#screen-settings .email-edit-note {font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--text-3); margin-top: 8px; line-height: 1.5;}
#screen-settings .email-edit-msg {font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.45; margin-top: 8px; min-height: 0;}
#screen-settings .email-edit-msg:empty {display: none;}
#screen-settings .email-edit-msg.err {color: #c85a4a;}
#screen-settings .email-edit-msg.ok {color: var(--green); background: #eef6f1; border-radius: 8px; padding: 8px 10px;}
#screen-settings .edit-save-btn:disabled {opacity: 0.55; cursor: default;}


/* ── v33 Add Buddy + Buddy Profile overlays: same header, title bar, dock and
   PLAY button as every other screen (values taken from #screen-profile) ── */
#buddySearchOverlay .ab-appheader, #publicProfileOverlay .pp-appheader { background: #1a6b3c; }
#buddySearchOverlay .ab-logo span, #publicProfileOverlay .pp-logo span { letter-spacing: -0.2px; line-height: 1; }
#buddySearchOverlay .ab-icons, #publicProfileOverlay .pp-icons { gap: 12px; }
#buddySearchOverlay .ab-ic, #publicProfileOverlay .pp-ic { border-color: rgba(255,255,255,0.9); }
#buddySearchOverlay .ab-subheader, #publicProfileOverlay .pp-subheader { background: #F5A623; }
#buddySearchOverlay .ab-title, #publicProfileOverlay .pp-title { font-size: 16px; color: #1a6b3c; }
#buddySearchOverlay .ab-back, #publicProfileOverlay .pp-back { padding: 6px 14px; background: #1a6b3c; }
#buddySearchOverlay .ab-dock, #publicProfileOverlay .pp-dock { background: rgb(19,77,43); padding-bottom: 6px; box-sizing: border-box; }
#buddySearchOverlay .ab-tab, #publicProfileOverlay .pp-tab { gap: 4px; opacity: 0.65; padding: 0; }
#buddySearchOverlay .ab-tab span, #publicProfileOverlay .pp-tab span { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.02em; color: #fff; }
#buddySearchOverlay .ab-tab img.nav-icon, #publicProfileOverlay .pp-tab img.nav-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
#buddySearchOverlay .ab-play-btn, #publicProfileOverlay .pp-play-btn {
  bottom: 12px; background: #1a6b3c; border: 4px solid #fff;
  font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25), 0 0 0 6px rgba(26,107,60,0.15); }
/* search field like Help & FAQ */
#buddySearchOverlay .ab-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3, #888); pointer-events: none; display: flex; }
#buddySearchOverlay #buddySearchInput { height: 48px; border-radius: 24px; border: 1.5px solid rgba(0,0,0,0.1); padding: 0 16px 0 44px; font-size: 14px; }
#buddySearchOverlay #buddySearchInput:focus { border-color: #1a6b3c; box-shadow: 0 0 0 3px rgba(26,107,60,0.08); }