/* SCAN Soccer Game — component styles. Mobile-first. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: calc(100% * var(--text-scale, 1)); }
body {
  background: var(--bg-charcoal);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1,h2,h3,.display { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 800; }

/* App shell layout */
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.screen { flex: 1; padding: var(--sp-5) var(--sp-4) 108px; }
.screen.center { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

/* Top bar */
.topbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); position: sticky; top: 0; background: var(--bg-charcoal); z-index: 5; }
.topbar .title { font-family: 'Montserrat'; font-weight: 800; font-size: var(--fs-h1); }
.topbar .spacer { flex: 1; }
.back-btn { background: none; border: none; color: var(--cyan); font-size: 1.4rem; cursor: pointer; padding: 4px 8px; min-width: var(--tap); min-height: var(--tap); }

/* Cards */
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.card.raised { background: var(--surface-2); }
.card h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); }
.tiny { font-size: var(--fs-tiny); }
.mt2{margin-top:var(--sp-2)} .mt3{margin-top:var(--sp-3)} .mt4{margin-top:var(--sp-4)}
.center-text{text-align:center}

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--cyan); color:#0B0D11; font-weight:700; border:none;
  border-radius: var(--r-btn); padding: 14px 18px; width:100%; min-height: var(--tap);
  font-size: var(--fs-body); cursor:pointer; transition: background .15s, transform .1s; }
.btn:active { background: var(--cyan-press); transform: scale(.99); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn.secondary { background: transparent; border:2px solid var(--cyan); color: var(--cyan); }
.btn.ghost { background: transparent; color: var(--text-muted); border:1px solid var(--border); }
.btn.small { width:auto; padding:10px 14px; min-height:40px; font-size:var(--fs-small); }
.btn-row { display:flex; gap:var(--sp-3); }
.btn-row .btn { width:auto; flex:1; }

/* Inputs */
.field { margin-bottom: var(--sp-4); }
.field label { display:block; font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width:100%; background: var(--surface-2); border:1px solid var(--border); color: var(--text-primary);
  border-radius: var(--r-btn); padding: 14px; font-size: var(--fs-body); min-height: var(--tap);
  font-family: inherit;
}
.field input[type="range"] {
  padding: 0; min-height: 32px; accent-color: var(--cyan); border: none; background: transparent;
}
.field .err { color: var(--red); font-size: var(--fs-tiny); margin-top:4px; }
.form-error { color: var(--red); font-size: var(--fs-small); margin-bottom: var(--sp-3); }

/* Chips / pills */
.chip { display:inline-flex; align-items:center; gap:6px; background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--r-pill); padding: 6px 12px; font-size: var(--fs-small); font-weight:700; }
.chip.view-opt.selected { border-color: var(--cyan); color: var(--cyan); }
.chip.view-opt.best-view { border-color: var(--volt); }
.chip.view-opt.best-view.selected { border-color: var(--volt); color: var(--volt); box-shadow: 0 0 0 2px rgba(230,255,0,.15); }
.chip.volt { color: var(--volt); }
.chip.flame { color: var(--orange); }
.pill-row { display:flex; gap: var(--sp-2); flex-wrap:wrap; }

/* XP bar */
.xp-track { background: var(--surface-2); border-radius: var(--r-pill); height: 12px; overflow:hidden; margin: 8px 0; }
.xp-fill { background: var(--volt); height:100%; width:0; transition: width .5s ease; }

/* Choice cards (onboarding, placement, quiz) */
.choice { display:block; width:100%; text-align:left; background: var(--surface-1); border:2px solid var(--border);
  border-radius: var(--r-card); padding: var(--sp-4); margin-bottom: var(--sp-3); color: var(--text-primary);
  font-size: var(--fs-body); cursor:pointer; transition: border-color .12s, background .12s; }
.choice:active { transform: scale(.995); }
.choice.selected { border-color: var(--cyan); }
.choice.correct { border-color: var(--green); background: rgba(74,222,128,.08); }
.choice.wrong { border-color: var(--red); background: rgba(248,113,113,.08); }

/* Check-that list */
.check-list { list-style:none; }
.check-list li { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border); }
.check-list li:last-child{ border-bottom:none; }
.check-icon { color: var(--green); font-weight:800; flex:none; }

/* Map nodes */
.world { margin-bottom: var(--sp-5); }
.world-head { display:flex; align-items:center; gap:10px; margin-bottom: var(--sp-2); }
.world-dot { width:12px; height:12px; border-radius:50%; }
.world.locked { opacity:.55; }
.nodes { display:flex; flex-direction:column; gap:10px; }
.node { display:flex; align-items:center; gap:12px; background: var(--surface-1); border:1px solid var(--border);
  border-radius: var(--r-card); padding: 14px; cursor:pointer; color: var(--text-primary); font-family: inherit; font-size: var(--fs-body); }
.node[disabled]{ cursor:not-allowed; opacity:.6; }
.node .status { margin-left:auto; font-size:1.2rem; }
.node.done { border-color: rgba(74,222,128,.5); }
.node.available { border-color: var(--cyan); }
.node .n-name { font-weight:700; }

/* Interactive learning map */
.world-toggle { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none;
  color: var(--text-primary); padding: 10px 2px; cursor:pointer; font-family:inherit; font-size:var(--fs-body); }
.w-track { display:block; background: var(--surface-2); border-radius: var(--r-pill); height:6px; overflow:hidden; margin-top:6px; }
.w-fill { display:block; height:100%; border-radius: var(--r-pill); transition: width .4s ease; }
.chev { color: var(--text-muted); font-size:.7rem; }
.map-path { position:relative; margin: 4px 0 14px 10px; padding-left: 16px; }
.map-path::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background: var(--wcolor, var(--border)); opacity:.35; border-radius:2px; }
.tech-card { position:relative; display:flex; align-items:center; gap:12px; background: var(--surface-1);
  border:1px solid var(--border); border-radius: var(--r-card); padding: 10px 12px; margin-bottom: 10px;
  cursor:pointer; color: var(--text-primary); }
.tech-card::before { content:""; position:absolute; left:-16px; top:50%; width:12px; height:3px;
  background: var(--wcolor, var(--border)); opacity:.35; }
.tech-card.done { border-color: rgba(74,222,128,.45); }
.tech-card.available { border-color: var(--cyan); }
.tech-card.locked { opacity:.55; cursor:not-allowed; }
.tech-card.here { border-width:2px; box-shadow: 0 0 0 3px rgba(42,165,230,.18); animation: herepulse 2s ease-in-out infinite; }
@keyframes herepulse { 0%,100% { box-shadow: 0 0 0 3px rgba(42,165,230,.14);} 50% { box-shadow: 0 0 0 7px rgba(42,165,230,.06);} }
.here-tag { position:absolute; top:-9px; right:12px; background: var(--cyan); color:#0B0D11;
  font-size:.6rem; font-weight:800; letter-spacing:.08em; border-radius: var(--r-pill); padding:2px 8px; }
.t-thumb { width:64px; height:36px; object-fit:cover; border-radius:8px; border:1px solid var(--border); flex:none; background: var(--surface-2); }
.t-thumb-dot { display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.t-meta { display:block; margin-top:2px; }
.t-chips { display:block; margin-top:2px; }
.t-score { padding:1px 8px; color: var(--cyan); font-size:.65rem; }

/* Energy bolts */
.energy { display:flex; gap:6px; align-items:center; }
.bolt { color: var(--volt); font-size:1.1rem; }
.bolt.spent { color: var(--border); }

/* Score ring */
.ring-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ring { width:140px; height:140px; }
.phase-bar { margin: 10px 0; }
.phase-bar .lbl { display:flex; justify-content:space-between; font-size:var(--fs-small); margin-bottom:4px; }
.bar-track { background: var(--surface-2); border-radius: var(--r-pill); height:10px; overflow:hidden; }
.bar-fill { height:100%; border-radius: var(--r-pill); }

/* Bottom tab bar — floating rounded dock (mockup style) */
.tabbar { position: fixed; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left:50%;
  transform:translateX(-50%); width: calc(100% - 20px); max-width:540px; display:flex; z-index:20;
  background: rgba(14, 20, 28, .92); border:1px solid #232e3c; border-radius:24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 6px 4px; }
.tabbar button { flex:1; position:relative; background:none; border:none; color: var(--text-muted);
  padding:8px 2px 6px; font-size: var(--fs-tiny); cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:4px; min-height:var(--tap); border-radius:18px; }
.tabbar button .ic { width:23px; height:23px; }
.tabbar button.active { color: var(--cyan); }
.tabbar button.active .ic { filter: drop-shadow(0 0 7px rgba(95,209,243,.75)); }
.tabbar button.active::after { content:""; position:absolute; bottom:2px; width:18px; height:3px;
  border-radius:2px; background: var(--cyan); box-shadow: 0 0 8px rgba(95,209,243,.8); }

/* Toast */
.toast-wrap { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:50; display:flex; flex-direction:column; gap:8px; width:92%; max-width:520px; }
.toast { background: var(--surface-2); border:1px solid var(--border); border-left:4px solid var(--cyan);
  border-radius:12px; padding:12px 14px; box-shadow: var(--shadow); animation: slidein .2s ease; }
.toast.volt { border-left-color: var(--volt); }
.toast.green { border-left-color: var(--green); }
@keyframes slidein { from { opacity:0; transform:translateY(-8px);} to {opacity:1; transform:none;} }

/* Badge grid */
.badge-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.badge { text-align:center; padding: var(--sp-3); border-radius: var(--r-card); background: var(--surface-1); border:1px solid var(--border); }
.badge.locked { opacity:.4; }
.badge .b-ic { font-size:1.8rem; }
.badge .b-name { font-size: var(--fs-tiny); margin-top:4px; }

/* Loading skeleton */
.skel { background: linear-gradient(90deg, var(--surface-1), var(--surface-2), var(--surface-1)); background-size:200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--r-card); height: 80px; margin-bottom: var(--sp-3); }
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

.hero-logo { width: auto; height: 130px; }
.q-media { margin-top: var(--sp-3); border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border); }
.q-media img { display: block; width: 100%; height: auto; }

/* Map hero banner */
.map-hero { position:relative; margin:-4px -4px 14px; border-radius:0 0 22px 22px; overflow:hidden;
  min-height:172px; background:#081420; }
.mh-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:38% 62%;
  opacity:.95; }
.map-hero::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,16,28,.25) 0%, rgba(6,16,28,0) 40%, rgba(6,16,28,.72) 100%); }
.mh-title { position:relative; z-index:1; font-family:'Montserrat'; font-size:1.55rem; margin:0;
  padding:18px 16px 0; text-shadow:0 2px 10px rgba(0,0,0,.8), 0 0 22px rgba(95,209,243,.35); }
.mh-sub { position:relative; z-index:1; margin:2px 0 0; padding:0 16px 92px; font-size:.78rem;
  color:#cfe3ea; text-shadow:0 1px 6px rgba(0,0,0,.8); }
.map-hero.nomh { min-height:0; }
.map-hero.nomh .mh-sub { padding-bottom:16px; }
.map-hero + .card { margin-top:-64px; }
.map-hero.nomh + .card { margin-top:0; }

/* Ocean overlay Learning Map */
.ocean-screen { background:
  radial-gradient(130% 50% at 50% -5%, #12253a 0%, transparent 60%),
  radial-gradient(90% 40% at 10% 40%, #0d1f31 0%, transparent 70%),
  radial-gradient(90% 40% at 90% 70%, #0d1f31 0%, transparent 70%),
  linear-gradient(180deg, #0a1522 0%, #06101c 55%, #040b14 100%); }
.map-ocean { position:relative; margin: 8px -8px 0; }
.map-ocean.textured::before { content:""; position:absolute; inset:-10px 0; z-index:0; pointer-events:none;
  background:url('../assets/map/ocean-bg.jpg') repeat-y center top / 100% auto; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); }
.map-ocean > * { position:relative; }
.cloud { position:absolute; width:120px; height:34px; border-radius:40px; background:#dfe7ee;
  opacity:.05; filter:blur(6px); pointer-events:none; z-index:3; }
.cloud::after { content:""; position:absolute; left:28%; top:-14px; width:55%; height:30px; border-radius:40px; background:inherit; }

.isle-scene { position:relative; padding: 2px 0 0; }
.isle-scene.locked .isle-art .isle-body { filter: saturate(.25) brightness(.72); }
.isle-label { display:flex; align-items:center; gap:8px; padding: 0 10px; cursor:pointer;
  position:relative; z-index:2; }
.isle-label strong { font-family:'Montserrat'; font-size:1.02rem; }
.isle-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.isle-count { font-size: var(--fs-tiny); font-weight:700; }
.isle-line { height:2px; flex:1; opacity:.35; border-radius:1px; margin-left:2px; }

.isle-stage { position:relative; height: 296px; cursor:pointer; }
.isle-art { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width: min(88%, 352px); }

/* Rendered island photos (assets/map/island-N.jpg) — feathered into the ocean. */
.isle-photo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(100%, 430px); height:100%; object-fit:cover; z-index:0; pointer-events:none;
  -webkit-mask-image: radial-gradient(74% 64% at 50% 50%, #000 55%, transparent 97%);
  mask-image: radial-gradient(74% 64% at 50% 50%, #000 55%, transparent 97%); }
.isle-stage.has-photo .isle-art { display:none; }
.isle-scene.locked .isle-photo { filter: saturate(.2) brightness(.5); }
.isle-trophy { display:none; position:absolute; left:50%; top:4%; transform:translateX(-50%);
  font-size:20px; z-index:2; filter: drop-shadow(0 2px 6px rgba(0,0,0,.65)); pointer-events:none; }
.isle-stage.has-photo .isle-trophy { display:block; }

.isle-node { position:absolute; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%;
  background:#1d2632; border:2px solid #37414f; color:#8B939E; font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 4px 10px rgba(0,0,0,.5); z-index:2; padding:0; }
.isle-node.done { background:#233225; border-color:#9be15d; color:#c8f77a;
  background:linear-gradient(180deg,#a7e34f,#7cc12f); color:#15300b; border-color:#c8f77a; }
.isle-node.available { border-color: var(--cyan); color: var(--cyan); }
.isle-node.here { background:#10394d; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(95,209,243,.25), 0 0 18px rgba(95,209,243,.55); animation: herepulse 2s ease-in-out infinite; }
.isle-node.locked { cursor:pointer; }
.here-chip { position:absolute; top:50%; transform:translateY(-50%); background: var(--cyan); color:#06222e;
  font-size:.6rem; font-weight:800; letter-spacing:.06em; white-space:nowrap; padding:4px 9px; border-radius:999px; }
.here-chip.right { left: calc(100% + 8px); }
.here-chip.left { right: calc(100% + 8px); }

.isle-trail { display:block; width:132px; height:96px; margin: -36px auto -30px; position:relative; z-index:3;
  pointer-events:none; overflow:visible; }
.isle-trail path { filter: drop-shadow(0 0 4px rgba(0,0,0,.6)); }
.isle-trail.lit path { animation: traildash 2.4s linear infinite;
  filter: drop-shadow(0 0 7px rgba(95,209,243,.85)); }
@keyframes traildash { to { stroke-dashoffset: -26.2; } }

/* Islands sit closer and weave left/right so the chain reads as one map */
.isle-scene:nth-child(odd) .isle-stage { transform: translateX(-3.5%); }
.isle-scene:nth-child(even) .isle-stage { transform: translateX(3.5%); }
.isle-scene + .isle-scene { margin-top: -6px; }
.isle-list { margin: 4px 8px 14px 18px; }

/* Home hub (mirrors the rendered-island mockup) */
.home-screen .card { position:relative; z-index:2; }
.home-head { display:grid; grid-template-columns:auto 1fr auto; gap:6px 10px; align-items:center;
  margin-bottom:10px; position:relative; z-index:2; }
.avatar-ring { grid-row:span 2; width:56px; height:56px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-family:'Montserrat'; font-weight:800; font-size:1.35rem; color:var(--cyan);
  background:#0d2231; border:2px solid var(--cyan); box-shadow:0 0 14px rgba(95,209,243,.45); }
.home-hi { font-family:'Montserrat'; font-size:1.15rem; }
.lv-shield { grid-row:span 2; align-self:start; width:50px; height:56px;
  filter:drop-shadow(0 0 8px rgba(232,255,58,.4)); font-family:'Montserrat'; }
.lv-shield svg { display:block; width:100%; height:100%; }
.head-xp { grid-column:2 / span 2; }
.head-xp .xp-track { margin:2px 0; }

.home-hero { position:relative; border-radius:20px; overflow:hidden; margin-bottom:12px;
  border:1px solid #1d2a3a; background:#081420; z-index:1; }
.hero-photo { display:block; width:100%; min-height:430px; object-fit:cover; object-position:13% 45%; opacity:.94; }
.hero-card { position:absolute; left:10px; top:10px; max-width:62%; padding:12px 14px; border-radius:16px;
  background:rgba(8,20,32,.82); border:1px solid rgba(95,209,243,.55); backdrop-filter:blur(3px);
  box-shadow:0 6px 24px rgba(0,0,0,.5); }
.hero-card h2 { font-size:1.25rem; margin:2px 0; }
.hero-isles { position:absolute; left:8px; right:8px; bottom:78px; display:flex; gap:8px; }
.mini-isle { position:relative; flex:1; height:84px; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; gap:4px; overflow:hidden; background:rgba(8,20,32,.72); color:var(--cyan);
  border:1px solid rgba(95,209,243,.5); font-size:.62rem; font-weight:800; letter-spacing:.1em;
  padding:6px 4px; border-radius:16px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.5); }
.mi-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.mi-label { position:relative; padding:2px 9px; border-radius:999px; background:rgba(6,16,26,.78);
  border:1px solid rgba(95,209,243,.45); }
.mi-face { display:none; font-size:1.05rem; position:relative; }
.mini-isle.noimg { justify-content:center; }
.mini-isle.noimg .mi-face { display:block; }
.mi-badge { position:absolute; top:5px; right:5px; min-width:18px; height:18px; border-radius:9px;
  background:var(--orange); color:#2b1502; font-size:.66rem; font-weight:800; display:flex;
  align-items:center; justify-content:center; padding:0 4px; }
.mi-badge.static { position:static; }
.hero-gate { position:absolute; left:10px; right:10px; bottom:10px; display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:14px; background:rgba(10,16,8,.82); border:1px solid rgba(232,255,58,.5);
  overflow:hidden; }
.gate-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  opacity:.4; filter:brightness(.8); }
.gate-lock { font-size:1.3rem; filter:drop-shadow(0 0 6px rgba(232,255,58,.6)); position:relative; }
.gate-chev { color:var(--volt); letter-spacing:.1em; position:relative; }

.dm-ring { width:64px; height:64px; flex:none; }
.home-cols { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;
  position:relative; z-index:2; align-items:stretch; }
.ph-row { display:flex; gap:5px; flex-wrap:wrap; }
.ph-chip { display:flex; flex-direction:column; align-items:center; gap:1px; padding:4px 7px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface-2); }
.ph-name { font-size:.58rem; color:var(--text-muted); }
.ph-score { font-size:.8rem; color:var(--volt); }

.unlock-card { position:relative; overflow:hidden; }
.unlock-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35;
  filter:saturate(.4) brightness(.6); }
.unlock-inner { position:relative; z-index:1; }

/* Next Unlock (mockup layout: action photo | text | gate art) */
.unlock-card2 { display:flex; align-items:center; gap:10px; }
.u2-act, .u2-gate { flex:none; width:96px; height:72px; object-fit:cover; border-radius:12px; }
.u2-gate { border:1px solid rgba(232,255,58,.4); }
@media (max-width: 380px) { .u2-gate { display:none; } }

/* Archipelago hero (Canva scene with positioned island chips) */
.home-hero.arch:not(.noarch) .arch-photo { min-height:0; aspect-ratio: 4 / 5; object-position:center; }
.home-hero.arch:not(.noarch) .hero-card { max-width:55%; }
.home-hero.arch:not(.noarch) .hero-isles { display:none; }
.home-hero.noarch .arch-labels, .home-hero.noarch .arch-node { display:none; }
.arch-node { position:absolute; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%;
  background:rgba(8,24,34,.85); border:2.5px solid var(--cyan); color:#fff; font-weight:800; font-size:1rem;
  font-family:'Montserrat'; cursor:pointer; z-index:2;
  box-shadow:0 0 0 4px rgba(95,209,243,.25), 0 0 18px rgba(95,209,243,.6); animation:herepulse 2s ease-in-out infinite; }
.arch-chip { position:absolute; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:5px;
  background:rgba(8,20,32,.8); color:var(--cyan); border:1px solid rgba(95,209,243,.55);
  font-size:.64rem; font-weight:800; letter-spacing:.1em; padding:6px 11px; border-radius:999px;
  cursor:pointer; z-index:2; box-shadow:0 4px 14px rgba(0,0,0,.55); backdrop-filter:blur(2px); }
.arch-chip .mi-badge { position:absolute; top:-8px; right:-8px; }

.qs-row { display:flex; }
.qs-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; background:none;
  border:none; border-left:1px solid var(--border); color:var(--text); font-size:.72rem; cursor:pointer; padding:6px 2px; }
.qs-btn:first-child { border-left:none; }
.qs-ico { width:44px; height:44px; border-radius:50%; border:2px solid; display:flex; align-items:center;
  justify-content:center; font-size:1.15rem; }

/* Practice Camp screen */
.pc-title { font-family:'Montserrat'; font-size:1.7rem; margin:0 0 8px; position:relative; z-index:2;
  text-shadow:0 0 18px rgba(95,209,243,.25); }
.pc-stats { display:flex; align-items:center; gap:0; background:rgba(14,20,28,.8); border:1px solid #232e3c;
  border-radius:14px; padding:9px 6px; margin-bottom:12px; position:relative; z-index:2; font-size:.8rem; }
.pc-stats > span { flex:1; text-align:center; border-left:1px solid #232e3c; }
.pc-stats > span:first-child { border-left:none; }
.pc-lv { display:inline-flex; width:20px; height:20px; border-radius:6px; border:2px solid var(--cyan);
  color:var(--cyan); font-weight:800; font-size:.72rem; align-items:center; justify-content:center;
  vertical-align:-4px; margin-right:2px; }
.pc-hero { position:relative; border-radius:20px; overflow:hidden; border:1px solid #1d2a3a;
  background:#081420; margin-bottom:12px; z-index:1; }
.pc-photo { display:block; width:100%; min-height:330px; object-fit:cover; object-position:50% 68%; opacity:.95; }
.pc-score-card { position:absolute; left:10px; right:10px; top:10px; padding:12px 14px; border-radius:16px;
  background:rgba(8,20,32,.84); border:1px solid rgba(95,209,243,.65); backdrop-filter:blur(3px);
  box-shadow:0 0 22px rgba(95,209,243,.28), 0 6px 24px rgba(0,0,0,.5); }
.pc-cam { flex:none; width:52px; height:52px; border-radius:50%; border:2px solid var(--cyan);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; background:#0d2231;
  box-shadow:0 0 12px rgba(95,209,243,.45); }
.pc-steps { list-style:none; margin:0; padding:0; font-size:.78rem; }
.pc-steps li { display:flex; align-items:center; gap:8px; padding:3px 0; color:var(--text-muted); }
.pc-steps li.done { color:var(--text); }
.pc-tick { flex:none; width:17px; height:17px; border-radius:50%; border:2px solid #37414f; font-size:.62rem;
  display:flex; align-items:center; justify-content:center; }
.pc-steps li.done .pc-tick { background:var(--green); border-color:var(--green); color:#0c2408; font-weight:800; }
.pc-h { font-family:'Montserrat'; margin:14px 0 8px; position:relative; z-index:2; }
.pc-assigns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pc-assigns .pc-assign:only-child { grid-column:span 2; }
.hex-badge { flex:none; width:40px; height:44px; align-self:flex-start; }
.hex-badge svg { width:100%; height:100%; filter:drop-shadow(0 0 6px rgba(155,225,93,.35)); }
.pc-gen { border:1.5px solid var(--volt); box-shadow:0 0 20px rgba(232,255,58,.14); }
.btn.volt { background:var(--volt); color:#20260a; }
.pm-carousel { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px; scroll-snap-type:x mandatory;
  position:relative; z-index:2; -webkit-overflow-scrolling:touch; }
.pm-card { flex:0 0 210px; scroll-snap-align:start; background:var(--surface-1); border:1px solid var(--border);
  border-radius:16px; padding:10px 10px 8px; cursor:pointer; }
.pm-card.gen { border-color:var(--volt); }
.pm-title { font-size:.85rem; line-height:1.25; }
.pm-media { position:relative; margin-top:8px; height:96px; border-radius:12px; overflow:hidden;
  background:#0d1a26; display:flex; align-items:center; justify-content:center; }
.pm-thumb { width:100%; height:100%; object-fit:cover; }
.pm-fallback { font-size:2rem; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.pm-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:38px; height:38px;
  border-radius:50%; background:rgba(8,20,32,.8); border:2px solid var(--cyan); color:var(--cyan);
  display:flex; align-items:center; justify-content:center; font-size:.85rem; padding-left:3px;
  box-shadow:0 0 12px rgba(95,209,243,.5); }
.pm-skill { margin-top:6px; }

/* Player Journey (Progress tab) */
.pj-title { font-family:'Montserrat'; font-size:1.6rem; margin:0 0 12px; text-align:center; position:relative; z-index:2; }
.pj-title::after { content:""; display:block; width:44px; height:3px; border-radius:2px; background:var(--cyan);
  margin:6px auto 0; box-shadow:0 0 10px rgba(95,209,243,.8); }
.pj-emblem { position:relative; flex:none; width:96px; height:96px; border-radius:16px; overflow:hidden; }
.pj-emblem img { width:100%; height:100%; object-fit:cover; }
.pj-lvtxt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Montserrat'; font-weight:800; font-size:1.5rem; color:var(--volt); line-height:1;
  text-shadow:0 0 10px rgba(232,255,58,.7), 0 2px 4px rgba(0,0,0,.8); padding-top:6px; }
.pj-lvtxt small { font-size:.62rem; letter-spacing:.14em; color:#cfe3ea; }
.pj-segs { display:flex; gap:3px; flex:1; }
.pj-seg { flex:1; height:12px; border-radius:4px; background:#1a2330; border:1px solid #232d3a; }
.pj-seg.on { background:var(--volt); border-color:var(--volt); box-shadow:0 0 8px rgba(232,255,58,.5); }
.pj-hexic { flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--cyan); border-radius:9px; font-size:.9rem;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background:#0d2231; }
.pj-gauges { display:flex; justify-content:space-evenly; }
.pj-gauge svg { width:84px; height:84px; display:block; margin:0 auto; }
.pj-spark { width:100%; max-width:150px; height:36px; }
.pj-isles { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px 8px; }
.pj-isle { text-align:center; }
.pj-thumb { position:relative; height:64px; border-radius:14px; overflow:hidden; background:#0d1a26;
  border:1px solid #1d2a3a; }
.pj-thumb img { width:100%; height:100%; object-fit:cover; }
.pj-isle.locked .pj-thumb img { filter:saturate(.25) brightness(.55); }
.pj-num { position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; border:2px solid;
  background:rgba(8,20,32,.85); font-size:.66rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pj-lock { position:absolute; right:4px; bottom:4px; font-size:.8rem; filter:drop-shadow(0 1px 3px rgba(0,0,0,.8)); }
.pj-iname { font-weight:700; margin-top:5px; line-height:1.15; }
.pj-badges { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 8px; }
.pj-badge { text-align:center; background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
  padding:10px 4px 8px; }
.pj-badge.earned { border-color:#2c3f52; box-shadow:0 0 14px rgba(95,209,243,.12); }
.pj-bimg { position:relative; width:56px; height:56px; margin:0 auto; }
.pj-bimg img { width:100%; height:100%; }
.pj-badge.locked .pj-bimg img { filter:grayscale(1) brightness(.42); }
.pj-block { position:absolute; right:-2px; bottom:-2px; font-size:.85rem; filter:drop-shadow(0 1px 3px rgba(0,0,0,.9)); }
.pj-bfall { font-size:2rem; line-height:56px; }
.pj-bname { margin-top:6px; line-height:1.15; }
.pj-badge.locked .pj-bname { color:var(--text-muted); }
.pj-mile { display:flex; align-items:center; gap:12px; border:1px solid rgba(95,209,243,.5); position:relative;
  overflow:hidden; flex-wrap:wrap; }
.pj-mile .btn { flex:1 1 100%; }
.pj-ball { flex:none; width:78px; height:78px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 16px rgba(95,209,243,.45); }

/* Technique screen (mockup style) */
.th-head { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; position:relative; z-index:2; }
.th-back { flex:none; width:42px; height:42px; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--border); color:var(--text); font-size:1.15rem; cursor:pointer; }
.th-name { font-family:'Montserrat'; font-size:1.45rem; margin:0; line-height:1.1; }
.th-lvlbox { flex:none; text-align:right; padding-top:4px; }
.th-hero { position:relative; border-radius:20px; overflow:hidden; border:1px solid #1d2a3a;
  background:#081420; margin-bottom:12px; z-index:1; }
.th-photo { display:block; width:100%; min-height:300px; object-fit:cover; object-position:0% 45%; opacity:.95; }
.th-cue { position:absolute; left:10px; top:10px; max-width:64%; padding:12px 14px; border-radius:16px;
  background:rgba(8,20,32,.84); border:1px solid rgba(95,209,243,.4); backdrop-filter:blur(3px); }
.th-cue h2 { font-size:1.08rem; line-height:1.3; }
.th-phases { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.th-phase { text-align:center; border:1px solid var(--border); border-radius:14px; padding:8px 6px;
  background:var(--surface-2); }
.th-phase.hot { border-color:var(--cyan); box-shadow:0 0 14px rgba(95,209,243,.2); }
.th-phase img { width:100%; height:64px; object-fit:cover; border-radius:10px; }
.th-pname { display:block; margin-top:6px; font-size:.78rem; }
.th-pcue { line-height:1.25; min-height:2.4em; }
.th-ladder { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; align-items:stretch; }
.th-lv { position:relative; text-align:center; border:1.5px solid var(--border); border-radius:16px;
  padding:16px 6px 10px; background:var(--surface-2); display:flex; flex-direction:column; gap:4px; }
.th-lv.passed { border-color:var(--volt); }
.th-lv.current { border-color:var(--cyan); box-shadow:0 0 14px rgba(95,209,243,.25); }
.th-lv.locked { opacity:.65; border-color:#37414f; }
.th-lvnum { position:absolute; top:-13px; left:50%; transform:translateX(-50%); width:26px; height:26px;
  border-radius:50%; background:#10202e; border:2px solid var(--cyan); color:#fff; font-weight:800;
  font-size:.8rem; display:flex; align-items:center; justify-content:center; }
.th-lv.passed .th-lvnum { border-color:var(--volt); color:var(--volt); }
.th-lv.locked .th-lvnum { border-color:#37414f; color:#8B939E; }
.th-lvimg { height:56px; border-radius:10px; overflow:hidden; }
.th-lvimg img { width:100%; height:100%; object-fit:cover; }
.th-lv.locked .th-lvimg img { filter:saturate(.3) brightness(.55); }
.th-lvname { font-size:.72rem; letter-spacing:.08em; color:var(--volt); }
.th-lv.current .th-lvname { color:var(--cyan); }
.th-lvtext { line-height:1.3; flex:1; }
.th-pass { font-size:.7rem; font-weight:800; color:var(--green); border:1px solid var(--green);
  border-radius:9px; padding:4px 6px; }
.th-lock { font-size:.95rem; }
.th-errs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.th-err { border:1px solid rgba(249,115,22,.4); border-radius:14px; overflow:hidden; background:var(--surface-2); }
.th-err img { width:100%; height:62px; object-fit:cover; display:block; }
.th-err p { padding:6px 7px; line-height:1.25; }
.th-gotit { display:flex; gap:10px; align-items:center; border:1px solid rgba(74,222,128,.45);
  box-shadow:0 0 16px rgba(74,222,128,.1); flex-wrap:wrap; }
.th-gate { flex:none; width:86px; height:86px; border-radius:14px; object-fit:cover; }
.th-gotit > .grow { flex:1 1 170px; }
.th-mastery { flex:1 1 100%; display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:10px; border:1px solid var(--border); border-radius:14px; padding:8px 10px; background:var(--surface-2); }
.th-mastery.locked img { filter:grayscale(1) brightness(.45); }
.th-actions { display:grid; grid-template-columns:1fr 1.2fr; gap:10px; position:relative; z-index:2; }
.th-actions .btn { width:100%; }

/* Notifications */
.bell-btn { position:relative; flex:none; width:40px; height:40px; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--border); color:var(--text); font-size:1.15rem; cursor:pointer; align-self:start; }
.bell-badge { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--orange); color:#2b1502; font-size:.66rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.notif-list { display:flex; flex-direction:column; gap:8px; }
.notif { display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface-1); border:1px solid var(--border); border-radius:14px; padding:12px; color:var(--text); font-family:inherit; }
.notif.unread { border-color:rgba(95,209,243,.5); background:rgba(95,209,243,.06); }
.notif-ic { flex:none; width:38px; height:38px; border-radius:50%; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.notif-dot { flex:none; width:9px; height:9px; border-radius:50%; background:var(--cyan); }

/* Coach Team Hub */
.ch-h { font-family:'Montserrat'; margin:16px 0 8px; }
.ch-rate { flex:none; width:42px; height:42px; border-radius:50%; border:2px solid; display:flex;
  align-items:center; justify-content:center; font-family:'Montserrat'; font-weight:800; font-size:1rem; }
.ch-pcard { border:1px solid var(--border); }
.ch-lrow { padding:9px 0; border-top:1px solid var(--border); align-items:center; }
.ch-lrow:first-of-type { border-top:none; }
.ch-rank { flex:none; width:26px; text-align:center; font-weight:800; font-size:.95rem; }

/* SCAN Report (player progression / scouting report) */
.rep-hero { display:flex; align-items:center; gap:14px; }
.rep-ring { flex:none; width:110px; height:110px; }
.rep-ring svg { width:100%; height:100%; display:block; }
.rep-phase { margin-bottom:12px; }
.rep-spark { width:100%; height:70px; margin-top:6px; }
.rep-thead { padding-bottom:6px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.rep-trow { padding:8px 0; border-bottom:1px solid var(--border); align-items:center; }
.rep-trow:last-child { border-bottom:none; }

/* Admin tabs */
.ad-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px;
  -webkit-overflow-scrolling:touch; }
.ad-tab { flex:none; background:transparent; border:1px solid var(--border); border-radius:999px;
  color:var(--text-muted); font-size:.74rem; font-weight:700; padding:8px 13px; cursor:pointer;
  white-space:nowrap; }
.ad-tab.on { background:var(--surface-2); border-color:var(--cyan); color:var(--cyan); }
.ad-tabs::-webkit-scrollbar { height:0; }

/* Question Bank + Daily Set */
.qb-chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px;
  position:relative; z-index:2; -webkit-overflow-scrolling:touch; }
.qb-chip { flex:none; display:inline-flex; align-items:center; gap:7px; background:transparent;
  border:1px solid var(--border); border-radius:999px; padding:7px 12px; cursor:pointer;
  color:var(--text-muted); font-size:.74rem; font-weight:700; white-space:nowrap; }
.qb-chip.on { background:var(--surface-2); color:var(--text); }
.qb-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.qb-card { position:relative; display:flex; align-items:center; gap:11px; width:100%;
  background:var(--surface-1); border:1px solid var(--border); border-radius:14px; padding:12px;
  margin-bottom:11px; cursor:pointer; color:var(--text); font-family:inherit; }
.qb-card.done { border-color:rgba(74,222,128,.35); }
.qb-card.locked { opacity:.5; cursor:default; }
.qb-thumb { flex:none; width:46px; height:38px; border-radius:9px; background:#0d0f13;
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.95rem; }
.qb-meta { display:flex; align-items:center; gap:8px; margin-top:5px; font-size:.72rem; }
.qb-lad { font-size:.62rem; font-weight:700; color:var(--cyan); background:#111318;
  border:1px solid var(--border); border-radius:999px; padding:2px 8px; }
.qb-aff { flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:.8rem; background:#20242c; color:var(--text-muted); }
.qb-aff.done { background:var(--green); color:#0B0D11; font-size:.95rem; }
.qb-here { position:absolute; top:-9px; right:12px; background:var(--cyan); color:#0B0D11;
  font-size:.56rem; font-weight:800; letter-spacing:.04em; padding:3px 8px; border-radius:999px; }
.qz-ic { flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:.85rem; color:#0B0D11; }

/* Practice Ladder */
.ladder-lvl { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--border); }
.ladder-lvl:first-child { border-top:none; }
.ladder-badge { flex:none; width:28px; height:28px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:.85rem; background: var(--surface-2); border:2px solid var(--border); }
.ladder-lvl.passed .ladder-badge { background: rgba(74,222,128,.15); border-color: var(--green); color: var(--green); }
.ladder-lvl.current .ladder-badge { border-color: var(--volt); color: var(--volt); }
.ladder-lvl.locked { opacity:.5; }
.mt1 { margin-top: 4px; }

/* Interactive: tap-the-zone (hotspots overlaid on the illustration) */
.hotspot-wrap { position: relative; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border); }
.hotspot-wrap img { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; width: 22%; aspect-ratio: 1 / 1; transform: translate(-50%,-50%);
  border-radius: 50%; background: transparent; border: none; cursor: pointer; padding: 0; }
.hotspot:active { background: rgba(42,165,230,.18); }
.hotspot.correct { box-shadow: inset 0 0 0 4px var(--green); background: rgba(74,222,128,.18); }
.hotspot .hs-lbl { display:none; }
/* Fallback when the zones image is missing: show real A/B/C buttons instead. */
.hotspot-wrap.no-img { display:flex; gap:10px; padding:14px; min-height:0; }
.hotspot-wrap.no-img .hotspot { position:static; transform:none; width:auto; flex:1; aspect-ratio:auto;
  min-height: var(--tap); border-radius: var(--r-btn); background: var(--surface-2); border:2px solid var(--border); }
.hotspot-wrap.no-img .hs-lbl { display:inline; font-weight:800; font-size:1.2rem; color: var(--text-primary); }
.frame-tile .t-fallback { display:flex; align-items:center; justify-content:center; min-height:64px; font-size:1.6rem; }

/* Interactive: tap-the-frame tiles */
.frame-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.frame-tile { position: relative; padding: 6px; margin-bottom: 0; }
.frame-tile img { display: block; width: 100%; height: auto; border-radius: 8px; }
.frame-tile .f-label { position: absolute; top: 10px; left: 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-pill); font-size: var(--fs-tiny);
  font-weight: 700; padding: 2px 8px; color: var(--text-primary); }
.big-emoji { font-size: 3rem; }
.list-plain { list-style:none; }
.list-plain li { padding:6px 0; display:flex; gap:8px; }
.divider { height:1px; background: var(--border); margin: var(--sp-4) 0; }
.row { display:flex; align-items:center; gap:10px; }
.grow { flex:1; }

/* ---- Parent dashboard (Phase 14) ---- */
.pd-childcard { cursor:pointer; transition: transform .08s ease, border-color .12s ease; }
.pd-childcard:active { transform: scale(.995); }
.pd-crow { display:flex; align-items:center; gap:14px; }
.pd-cring { flex:none; width:64px; height:64px; }
.pd-ring-svg { display:block; }
.pd-chev { flex:none; color: var(--text-muted); font-size:1.5rem; font-weight:700; }
.pd-noring { width:64px; height:64px; border-radius:50%; border:3px solid #232d3a; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.1; }
.pd-noring.big { width:104px; height:104px; }
.pd-hero { display:flex; align-items:center; gap:16px; }
.pd-hering { flex:none; width:104px; height:104px; }
.chip.small { font-size: var(--fs-tiny); padding:2px 8px; }
.pd-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.pd-cell { background: rgba(255,255,255,.03); border:1px solid var(--border); border-radius: var(--radius); padding:10px 6px; text-align:center; }
.pd-cell-v { font-size:1.25rem; font-weight:800; }
.pd-cell-l { font-size: var(--fs-tiny); color: var(--text-muted); margin-top:2px; }
.pd-goal { height:7px; background:#232d3a; border-radius:99px; overflow:hidden; }
.pd-goal-fill { height:100%; background: var(--volt); border-radius:99px; transition: width .5s ease; }
.pd-safety { border:1px solid rgba(56,224,224,.35); }
.pd-safety-ic { font-size:1.3rem; }
.pd-consent { border-top:1px solid var(--border); padding-top:10px; }

/* ---- Mastery Path (Phase 15) ---- */
.mp-card { cursor:pointer; transition: transform .08s ease; }
.mp-card:active { transform: scale(.995); }
.mp-card-ring { position:relative; width:44px; height:44px; flex:none; margin-right:10px; }
.mp-card-pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:800; }
.mp-card-chev { flex:none; color: var(--text-muted); font-size:1.4rem; font-weight:700; }
.mp-hero { display:flex; align-items:center; gap:16px; }
.mp-ring { flex:none; width:80px; height:80px; }
.mp-next { border:1px solid rgba(56,224,224,.4); }
.mp-step { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-top:1px solid var(--border); }
.mp-step:first-child { border-top:none; }
.mp-tick { flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; color: var(--text-muted); background: rgba(255,255,255,.04); font-size:.95rem; }
.mp-step.met .mp-tick { color:#0B0D11; background: var(--green); }
.mp-bar { height:6px; background:#232d3a; border-radius:99px; overflow:hidden; }
.mp-bar-fill { height:100%; background: var(--cyan); border-radius:99px; transition: width .5s ease; }
.mp-badge { display:flex; align-items:center; gap:12px; }

/* ---- Coach Feedback (Phase 16) ---- */
.cf-item { transition: transform .08s ease; }
.cf-item[onclick]:active { transform: scale(.995); }
.cf-ava { flex:none; width:34px; height:34px; border-radius:50%; background: rgba(56,224,224,.14);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-right:4px; }
.cf-notes { background: rgba(255,255,255,.03); border-left:3px solid var(--cyan); border-radius:6px;
  padding:8px 10px; font-style:italic; text-wrap:pretty; }
.cf-scores { display:flex; gap:10px; }
.cf-score { flex:1; text-align:center; background: rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius: var(--radius); padding:8px 4px; }
.cf-score-v { display:block; font-size:1.3rem; font-weight:800; }
.cf-score-l { font-size: var(--fs-tiny); color: var(--text-muted); }

/* ---- Score Insights (Phase 17 · richer AI scoring) ---- */
.si-card { }
.si-track { position:relative; height:10px; background:#232d3a; border-radius:99px; overflow:hidden; }
.si-band { position:absolute; top:0; bottom:0; background:rgba(56,224,224,.35); border-radius:99px; }
.si-dot { position:absolute; top:50%; width:14px; height:14px; margin-left:-7px; transform:translateY(-50%);
  background:#fff; border:3px solid var(--cyan); border-radius:50%; box-shadow:0 0 0 2px rgba(0,0,0,.3); }
.si-op { display:flex; align-items:flex-start; gap:10px; }
.si-gain { flex:none; min-width:46px; text-align:center; font-weight:800; color:#0B0D11; background:var(--volt);
  border-radius:8px; padding:3px 6px; font-size:.9rem; }

/* ---- Consistency / repeatability (Phase 18) ---- */
.cn-num { font-size:2rem; font-weight:800; line-height:1; flex:none; }
.cn-num-max { font-size:.8rem; font-weight:600; color:var(--text-muted); }
.cn-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle; }