/* PoolPro - v4 "Clubhouse, grown up" (2026-08-23).
   Same warm, friendly bones; matured so it reads as a tool for adults who play
   league rather than a childrens learning app. Cartoon-bright fills pulled
   toward real table colours, sticker shadows shortened, rounded display face
   swapped for a warm serif. Chunky rounded cards, ink outlines and springy
   motion all stay. Mobile-first; the shot diagram is the
   star. All class names / DOM hooks preserved from v2. CSS only.
   Full tokens: docs/design-system.md */

:root {
  /* Surfaces (warm light) */
  --bg:        #FAF7F1;
  --bg-2:      #F2EDE3;
  --surface:   #FFFFFF;
  --surface-2: #F2EDE3;
  --elevated:  #FFFFFF;
  --line:      #262329;   /* ink — outlines are part of the look */
  --line-soft: #DFD8CA;   /* quiet hairline where a full outline is too loud */

  /* Felt green — bright, cartoon-real table cloth */
  --felt:      #2A9B69;
  --felt-dark: #1F8659;
  --felt-deep: #196F4C;
  --felt-line: #145E40;

  /* Brand accents */
  --coral:       #E05A48;  /* primary CTA fill (ink text on it) */
  --coral-text:  #B23A2B;  /* coral as text on bg */
  --sunny:       #E5AC35;
  --teal:        #1D9E92;
  --teal-text:   #0C6A5B;
  --lilac:       #8C7BB8;

  --accent:      #1D9E92;      /* legacy alias — teal */
  --accent-2:    #178C82;
  --accent-dark: #0C6A5B;
  --accent-glow: rgba(29, 158, 146, 0.26);

  /* Tints (chip fills) */
  --tint-teal:  #E4F2EC;
  --tint-coral: #FAE6E2;
  --tint-sun:   #F7EDD5;
  --tint-lilac: #EDE9F5;
  --tint-blue:  #E7F0FE;

  /* Text */
  --ink:      #262329;
  --ink-2:    #45414B;
  --muted:    #6B6772;
  --muted-2:  #8C8894;

  /* Semantic */
  --gold:     #E8A800;
  --cleared:  #21B9A9;
  --unlocked: #2F6FED;
  --locked:   #B9B4BE;
  --danger:   #D6402F;

  --card:   var(--surface);
  --paper:  var(--bg);

  /* Sticker depth: outline + hard offset. No blur anywhere. */
  --shadow:    3px 3px 0 var(--ink);
  --shadow-sm: 2px 2px 0 var(--ink);
  --shadow-lg: 4px 4px 0 var(--ink);
  --ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--teal);

  --radius:    20px;
  --radius-sm: 14px;
  --radius-lg: 24px;

  --font: "Nunito Sans", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", "Nunito Sans", Georgia, serif;

  /* Motion */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.012em;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  text-wrap: balance;
}

::selection { background: var(--tint-sun); color: var(--ink); }

/* ---- Header / nav ---- */
.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1.1rem;
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 20;
}
.app-header__brand { display: flex; align-items: center; gap: 0.6rem; }
.app-header h1 {
  font-size: 1.35rem;
  margin: 0;
  font-weight: 700;
  color: var(--ink);
}
.app-header__logo {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--teal);
}
.app-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nav-btn {
  border: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
              transform 0.15s var(--spring), box-shadow 0.15s var(--ease);
}
.nav-btn:hover {
  background: var(--tint-teal);
  color: var(--ink);
}
.nav-btn:active { transform: scale(0.96); }
.nav-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.nav-btn.is-active {
  background: var(--teal);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ---- Gamification strip ---- */
.gami-strip {
  max-width: 1080px;
  margin: 1rem auto 0;
  padding: 0 1.1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
.xp-bar {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.7rem 0.95rem;
  box-shadow: var(--shadow-sm);
}
.xp-bar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.xp-bar__level { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.xp-bar__xp { font-size: 0.8rem; color: var(--teal-text); font-weight: 800; }
.xp-bar__track {
  height: 12px;
  margin: 0.45rem 0 0.3rem;
  background: var(--bg-2);
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.xp-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--teal);
  transition: width 0.5s var(--spring);
}
.xp-bar__next { font-size: 0.75rem; color: var(--muted); }

.streak {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.55rem 0.95rem;
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);
}
.streak.is-active { background: var(--tint-sun); }
.streak__flame { filter: none; }
.streak__count { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.streak__label { color: var(--ink-2); }
.streak__last { margin-left: auto; color: var(--muted); font-size: 0.75rem; }

.badges[data-role="badges"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.badges--empty .badges__none { color: var(--muted); font-size: 0.8rem; }
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ink);
  background: var(--tint-sun);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  animation: chip-pop 0.3s var(--spring) both;
}
@keyframes chip-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- Layout ---- */
.app-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.25rem 1.1rem 3.5rem;
}
.screen { animation: screen-in 0.24s var(--ease) both; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen h2 { margin-top: 0.4rem; font-size: 1.5rem; }
.screen__lead { color: var(--muted); margin-top: -0.15rem; }
.app-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 1.5rem 1rem 2.5rem;
  border-top: 2px dashed var(--line-soft);
}

/* ---- Filters ---- */
.filters { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1rem 0 1.5rem; }
.filter { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
.filter select {
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 12rem;
  min-height: 44px;
  cursor: pointer;
  transition: box-shadow 0.18s var(--ease);
}
.filter select:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- Cards (shared surface) ---- */
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.shot-card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.18s var(--spring), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.shot-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.shot-card.is-made { background: var(--tint-teal); }
.shot-card__head { display: flex; flex-direction: column; gap: 0.4rem; }
.shot-card__title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-2);
  font-weight: 800;
  border: 1.5px solid var(--ink);
}
.badge--diff { color: var(--ink); }
.badge--beginner    { background: var(--tint-teal); }
.badge--intermediate{ background: var(--tint-blue); }
.badge--advanced    { background: var(--tint-sun); }
.badge--pro         { background: var(--tint-lilac); }
.badge--skill { background: var(--tint-blue); color: var(--ink-2); }
.badge--type { background: var(--tint-teal); color: var(--ink-2); }

.shot-card__diagram {
  background: var(--felt-deep);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
}
.shot-card__diagram svg { display: block; width: 100%; height: auto; }
.shot-card__desc { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.shot-card__stats { display: flex; gap: 1rem; font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.shot-card__actions { display: flex; gap: 0.5rem; margin-top: auto; }

/* ---- SVG table look ---- */
.poolpro-table .cloth { fill: var(--felt); stroke: var(--felt-line); stroke-width: 0.8; }
.poolpro-table .pocket { fill: #20242C; }
.poolpro-table .target-pocket { fill: var(--sunny); }
.poolpro-table .target-pocket-highlight { stroke: var(--sunny); stroke-width: 1; }
.poolpro-table .ball.object { fill: #F2D94E; stroke: #2D2A32; stroke-width: 0.6; }
.poolpro-table .ball.cue { fill: #ffffff; stroke: #2D2A32; stroke-width: 0.6; }

/* ---- Buttons ---- */
.btn {
  border: 2px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  min-height: 44px;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s var(--ease), transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.btn:hover { background: var(--tint-teal); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn--made, .btn--attempt.btn--made {
  background: var(--coral);
  color: var(--ink);
}
.btn--made:hover { background: #FF7F70; }
.btn--disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---- Progress bars ---- */
.progress-bar { height: 12px; background: var(--bg-2); border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.progress-bar__fill { height: 100%; border-radius: 999px; background: var(--teal); transition: width 0.5s var(--spring); }
.completion-label { font-size: 0.8rem; color: var(--muted); }

/* ---- Modules ---- */
.module-list { display: grid; gap: 1.1rem; }
.module-card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
  transition: transform 0.18s var(--spring), box-shadow 0.18s var(--ease);
}
.module-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.module-card__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.module-card__order {
  display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--sunny); color: var(--ink);
  border: 2px solid var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
}
.module-card__title { margin: 0; font-size: 1.1rem; flex: 1 1 auto; }
.module-card__completion { display: grid; gap: 0.3rem; margin: 0.8rem 0; }
.module-card__lesson { color: var(--ink-2); }
.module-card__drills h4 { margin: 0.8rem 0 0.4rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-family: var(--font); font-weight: 800; }
.drill-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.drill { font-size: 0.9rem; padding: 0.4rem 0.7rem; background: var(--bg-2); border: 1.5px solid var(--line-soft); border-radius: 10px; transition: background 0.15s var(--ease); }
.drill.is-made { background: var(--tint-teal); border-color: var(--teal); color: var(--ink); font-weight: 700; }
.drill__check { color: var(--teal-text); }

/* ---- Progress screen ---- */
.level-list { display: grid; gap: 0.9rem; }
.level-row {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-left: 8px solid var(--locked);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  box-shadow: var(--shadow-sm);
  display: grid; gap: 0.45rem;
}
.level-row--cleared { border-left-color: var(--teal); }
.level-row--unlocked { border-left-color: var(--unlocked); }
.level-row--locked { border-left-color: var(--locked); opacity: 0.6; }
.level-row__head { display: flex; align-items: center; justify-content: space-between; }
.level-row__title { margin: 0; font-size: 1.05rem; }
.level-state { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; padding: 0.2rem 0.65rem; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); }
.level-state--cleared { background: var(--teal); }
.level-state--unlocked { background: var(--tint-blue); }
.level-state--locked { background: var(--bg-2); color: var(--muted); }

/* ---- Stance placeholder ---- */
.stance-placeholder {
  max-width: 460px; margin: 1.5rem auto; text-align: center;
  background: var(--surface);
  border: 2px dashed var(--ink);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
}
.stance-icon { width: 96px; height: 96px; stroke: var(--muted); }
.stance-placeholder h3 { margin: 0.6rem 0; color: var(--teal-text); }
.stance-note { font-size: 0.83rem; color: var(--muted); }

/* ---- Stance aligner (real webcam) ---- */
.stance-aligner { max-width: 520px; margin: 1.2rem auto; display: grid; gap: 0.9rem; }
.stance-aligner__stage {
  position: relative; aspect-ratio: 4 / 3; width: 100%;
  background: var(--ink); border: 2px solid var(--ink);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
}
.stance-aligner__video,
.stance-aligner__overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.stance-aligner__overlay { pointer-events: none; }
.stance-aligner__controls { display: flex; gap: 0.6rem; justify-content: center; }
.stance-aligner__message { text-align: center; min-height: 1.2em; color: var(--teal-text); font-weight: 800; margin: 0; }

/* ---- Daily Drill ---- */
.daily-drill { display: grid; gap: 0.7rem; }
.daily-drill__title { margin: 0.4rem 0 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.daily-drill__count { color: var(--teal-text); font-weight: 800; margin: 0; }
.daily-drill__empty { color: var(--muted); max-width: 40ch; }
.daily-drill__list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.daily-drill__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.7rem 0.95rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  min-height: 48px;
  transition: transform 0.15s var(--spring), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}
.daily-drill__item:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); background: var(--tint-teal); }
.daily-drill__name { font-weight: 700; }

/* ---- Stats dashboard ---- */
.stats { display: grid; gap: 1rem; }
.stats__title { margin: 0.4rem 0 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.stats-weakest, .stats-next {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-sm);
}
.stats-weakest { border-left: 8px solid var(--coral); }
.stats-weakest__label, .stats-next__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 800; }
.stats-weakest__value { font-size: 1.15rem; color: var(--ink); font-weight: 800; }
.stats-next { border-left: 8px solid var(--teal); cursor: pointer; transition: transform 0.15s var(--spring), box-shadow 0.15s var(--ease); }
.stats-next[data-shot-id]:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.stats-next__reason { margin: 0.3rem 0 0; color: var(--ink-2); }
.stats-heatmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; }
.stats-heatmap__cell {
  display: grid; gap: 0.15rem;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  box-shadow: var(--shadow-sm);
}
.stats-heatmap__label { font-size: 0.78rem; color: var(--muted); font-weight: 700; }
.stats-heatmap__pct { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--teal-text); line-height: 1; font-variant-numeric: tabular-nums; }
.stats-heatmap__count { font-size: 0.74rem; color: var(--muted-2); }
.stats-decks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.stats-decks__row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.8rem; align-items: center;
  background: var(--bg-2); border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 0.5rem 0.8rem; font-size: 0.9rem;
}
.stats-decks__pct { color: var(--teal-text); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Decks browser ---- */
.deck-search { margin: 0.75rem 0 1rem; }
.deck-search__input {
  width: 100%; max-width: 420px;
  padding: 0.65rem 0.95rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem; font-family: var(--font); font-weight: 600;
  min-height: 48px;
  transition: box-shadow 0.18s var(--ease);
}
.deck-search__input::placeholder { color: var(--muted-2); }
.deck-search__input:focus-visible { outline: none; box-shadow: var(--ring); }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.deck-card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: transform 0.18s var(--spring), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.deck-card:hover, .deck-card:focus-visible { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); background: var(--tint-teal); outline: none; }
.deck-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.deck-card__title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.deck-card__desc { color: var(--muted); margin: 0; font-size: 0.9rem; }
.deck-card__count { align-self: flex-start; font-size: 0.78rem; font-weight: 800; color: var(--ink); background: var(--tint-sun); border: 1.5px solid var(--ink); padding: 0.18rem 0.65rem; border-radius: 999px; }

/* ---- Deck detail ---- */
.btn--back { background: none; border: none; box-shadow: none; min-height: 44px; color: var(--teal-text); font-weight: 800; cursor: pointer; padding: 0.25rem 0; margin-bottom: 0.25rem; transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); }
.btn--back:hover { opacity: 0.8; transform: translateX(-2px); background: none; }
.btn--back:active { transform: translateX(-2px) scale(0.97); box-shadow: none; }
.deck-shot-list { display: flex; flex-direction: column; gap: 0.6rem; }
.deck-shot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.65rem 0.95rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--spring), background 0.15s var(--ease);
}
.deck-shot:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
/* Flashcard thumbnail: the shot's real layout at a glance. */
.deck-shot__thumb { flex: 0 0 132px; width: 132px; border-radius: 10px; overflow: hidden; border: 2px solid var(--ink); background: var(--felt-deep); }
.deck-shot__thumb svg { display: block; width: 100%; height: auto; }
.deck-shot__main { flex: 1 1 auto; min-width: 0; }
.deck-shot.is-fav { background: var(--tint-sun); }
.deck-shot__title { margin: 0 0 0.25rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.deck-shot__actions { display: flex; align-items: center; gap: 0.5rem; }
.btn--fav { background: var(--surface); border: 2px solid var(--ink); border-radius: 12px; cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 0.3rem 0.5rem; min-height: 44px; min-width: 44px; color: var(--gold); box-shadow: 2px 2px 0 var(--ink); transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.15s var(--ease); }
.btn--fav:hover { background: var(--tint-sun); }
.btn--fav:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn--fav.is-fav { background: var(--tint-sun); }
.btn--play { background: var(--coral); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 0.45rem 1rem; min-height: 44px; cursor: pointer; font-family: var(--font); font-weight: 800; box-shadow: 2px 2px 0 var(--ink); transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.15s var(--ease); }
.btn--play:hover { background: #FF7F70; }
.btn--play:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* ---- Live shot view ---- */
.shot-stage { margin: 0.75rem 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--felt-deep); border: 2px solid var(--ink); }
.shot-canvas { display: block; width: 100%; height: auto; }
.shot-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.shot-complete { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.shot-complete .btn, .diagram__actions .btn--made, .diagram__actions .btn--miss { border: 2px solid var(--ink); border-radius: 999px; padding: 0.5rem 1.1rem; cursor: pointer; font-weight: 800; }
.shot-complete .btn--made, .diagram__actions .btn--made { background: var(--coral); color: var(--ink); }
.shot-complete .btn--miss, .diagram__actions .btn--miss { background: var(--surface); color: var(--ink); }
.diagram__actions { gap: 0.5rem; flex-wrap: wrap; }
.shot-controls .btn { background: var(--surface); border: 2px solid var(--ink); border-radius: 999px; padding: 0.5rem 1rem; cursor: pointer; font-weight: 800; }
.shot-controls .btn[aria-pressed="true"] { background: var(--teal); color: var(--ink); }

/* ---- misc ---- */
.empty, .loading { color: var(--muted); }
.svg-error, .boot-error { color: var(--danger); font-size: 0.85rem; }

@media (min-width: 720px) {
  .gami-strip { grid-template-columns: 2fr 1.4fr; }
  .gami-strip .badges[data-role="badges"] { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  /* Header stays ONE row on a phone. It used to stack brand over the status
     chips, which made it 113px against a 35px logo - more than 3x the logo and
     a third of the table's vertical space. The nav is already fixed to the
     bottom below 720px, so the row only carries the brand and the chips. */
  .app-header { flex-wrap: nowrap; padding: 0.5rem 0.85rem; gap: 0.5rem; }
  .app-header h1 { font-size: 1.1rem; }
  .app-header__brand { flex: none; }
  /* The XP bar is the only chip carrying no number, and the level chip beside
     it says the same thing. Dropping it on phones is what makes the row fit at
     full text size even at max values (Lv 10 / 365d / 120/120). */
  .app-header .gami-xp { display: none; }
  .app-nav { justify-content: center; }
  .shot-grid { grid-template-columns: 1fr; }
  .screen h2, .daily-drill__title, .stats__title { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ============================================================================
   SHOT VIEW — diagram-first instructional screen. The star of the app:
   the table gets maximum width in a sticker frame; strike card, stars,
   chips, description, overlay toggles + Watch below.
   ========================================================================== */

.screen--diagram { display: flex; flex-direction: column; gap: 0.85rem; }

.shot__topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.btn--ghost {
  background: transparent; border: 2px solid var(--ink);
  box-shadow: none;
  color: var(--ink-2); font-size: 0.85rem; padding: 0.4rem 0.8rem;
}
.btn--ghost:hover { background: var(--bg-2); color: var(--ink); }
.btn--ghost:active { transform: scale(0.97); }

.diagram__title { margin: 0; font-family: var(--font-display); font-size: 1.4rem; }

/* --- the table diagram: full-bleed landscape card, sticker frame --- */
.diagram__table {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--felt-deep);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-lg);
}
.diagram__table .shot-diagram { display: block; width: 100%; height: auto; }

/* --- difficulty stars (tinted by --tier from the model) --- */
.stars { display: inline-flex; gap: 0.12rem; line-height: 1; }
.stars__star { color: var(--line-soft); font-size: 1.1rem; }
.stars__star.is-on { color: var(--tier, var(--sunny)); }

.diagram__body { display: flex; flex-direction: column; gap: 0.85rem; }
.diagram__cards { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: stretch; }

/* --- strike card: cue-ball graphic + power readout --- */
.strike-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-sm);
  min-width: 148px;
}
.strike-card__head {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 800;
}
.strike__ball { width: 78px; height: 78px; }
.strike__dot { transition: cx 0.25s var(--ease), cy 0.25s var(--ease); }
.strike__dot--draw   { fill: #2F6FED; }
.strike__dot--follow { fill: #E8912D; }
.strike__dot--stun   { fill: #0E7A69; }
.strike-card__label { font-size: 0.85rem; font-weight: 700; color: var(--ink); text-align: center; }

.power { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.power__label {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-text); font-weight: 800;
}
.power__pips { display: inline-flex; gap: 3px; }
.power__pip {
  width: 8px; height: 13px; border-radius: 3px;
  background: var(--bg-2); border: 1.5px solid var(--ink);
}
.power__pip.is-on { background: var(--coral); }

/* --- fact chips --- */
.diagram__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-content: flex-start; flex: 1; }
.chip {
  font-size: 0.78rem; font-weight: 800;
  padding: 0.34rem 0.7rem; border-radius: 999px;
  background: var(--bg-2); color: var(--ink-2);
  border: 1.5px solid var(--ink);
}
.chip--skill  { background: var(--tint-blue); color: var(--ink); }
.chip--pocket { background: var(--tint-sun); color: var(--ink); }
.chip--cut    { background: var(--tint-teal); color: var(--ink); }
.chip--tier   {
  background: color-mix(in srgb, var(--tier, var(--teal)) 22%, #ffffff);
  color: var(--ink);
  border-color: var(--ink);
}

.diagram__desc { margin: 0; }

/* --- overlay toggles --- */
.diagram__overlays { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn--toggle {
  font-size: 0.84rem; padding: 0.44rem 0.9rem;
  background: var(--surface); border: 2px solid var(--ink); color: var(--ink-2);
  box-shadow: none;
}
.btn--toggle::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 0.45rem;
  border-radius: 50%; background: var(--line-soft); border: 1.5px solid var(--ink); vertical-align: middle;
}
.btn--toggle.is-on {
  color: var(--ink);
  background: var(--tint-teal);
}
.btn--toggle.is-on::before { background: var(--teal); }

/* --- Watch (secondary CTA) --- */
.diagram__actions { display: flex; }
.btn--watch {
  flex: 1; justify-content: center;
  font-size: 0.95rem; font-weight: 800; padding: 0.7rem 1rem;
  background: var(--surface);
  border: 2px solid var(--ink); color: var(--ink);
}
.btn--watch:hover { background: var(--tint-teal); }

@media (min-width: 720px) {
  .diagram__body { display: grid; grid-template-columns: auto 1fr; grid-template-areas:
      "cards cards" "desc desc" "overlays actions"; align-items: start; }
  .diagram__cards { grid-area: cards; }
  .diagram__desc { grid-area: desc; }
  .diagram__overlays { grid-area: overlays; }
  .diagram__actions { grid-area: actions; justify-content: flex-end; }
  .btn--watch { flex: 0 0 auto; }
}

/* ===================================================================
   Celebration — a bold, full-screen milestone moment (deck cleared,
   streak milestone, badge earned, level up). Confined to ui/celebrate.js.
   Warm-white wash, giant display type, sticker card, confetti.
   =================================================================== */

.celebrate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 253, 247, 0.90);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: celebrate-fade 0.28s var(--ease) both;
}

@keyframes celebrate-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.celebrate__card {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2.2rem 2.6rem;
  max-width: min(88vw, 30rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  animation: celebrate-pop 0.45s var(--spring) both;
}

@keyframes celebrate-pop {
  from { transform: scale(0.85) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.celebrate__spark {
  width: 62px;
  height: 62px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: var(--sunny);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  animation: celebrate-spin 2s var(--ease) both;
}

@keyframes celebrate-spin {
  0%   { transform: rotate(-12deg) scale(0.6); }
  55%  { transform: rotate(8deg) scale(1.06); }
  100% { transform: rotate(0deg) scale(1); }
}

.celebrate__kicker {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-text);
}

.celebrate__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.celebrate__extras {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-2);
}

/* --- confetti / particle burst --- */
.celebrate__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.celebrate__particle {
  position: absolute;
  top: -8%;
  width: 9px;
  height: 15px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: celebrate-fall;
  animation-timing-function: cubic-bezier(0.3, 0.1, 0.2, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes celebrate-fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate3d(var(--drift, 0), 108vh, 0) rotate(540deg); opacity: 0; }
}

/* ===================================================================
   Quiet toast — the refined, motion-free variant honouring
   prefers-reduced-motion. No particles, no flash: a small sticker chip.
   =================================================================== */
.celebrate-toast {
  position: fixed;
  left: 50%;
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(92vw, 26rem);
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm);
}

.celebrate-toast__dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sunny);
  border: 1.5px solid var(--ink);
}

.celebrate-toast__text {
  font-size: 0.9rem;
  color: var(--ink-2);
}
.celebrate-toast__text strong { color: var(--ink); font-weight: 800; }

/* Safety net: if the OS asks for reduced motion, strip the animations from the
   bold overlay too (the JS already prefers the quiet toast, but this guarantees
   no motion sneaks through). */
@media (prefers-reduced-motion: reduce) {
  .celebrate,
  .celebrate__card,
  .celebrate__spark,
  .celebrate__particle {
    animation: none !important;
  }
  .celebrate__particles { display: none; }
}

/* ---- League (Poolstat) screen ---- */
.screen--league .card { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); margin-top: 0.8rem; }
.league-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.6rem; }
.league-player { margin: 0; font-family: var(--font-display); font-size: 1.35rem; }
.league-comp { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.85rem; }
.league-form { display: flex; gap: 0.3rem; }
.form-chip { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-weight: 800; font-size: 0.85rem; border: 2px solid var(--ink); }
.form-chip--w { background: var(--tint-teal); color: var(--teal-text); }
.form-chip--l { background: var(--tint-coral); color: var(--coral-text); }
.league-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.6rem; margin-top: 0.8rem; }
.stat-card { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-sm); padding: 0.7rem 0.4rem; text-align: center; display: flex; flex-direction: column; gap: 0.15rem; box-shadow: 2px 2px 0 var(--ink); }
.stat-card__num { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-card__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 800; }
.trend { display: flex; align-items: flex-end; gap: 0.35rem; height: 90px; margin-top: 0.5rem; }
.trend__bar { flex: 1; background: var(--bg-2); border-radius: 4px 4px 0 0; display: flex; align-items: flex-end; height: 100%; }
.trend__fill { width: 100%; background: var(--teal); border: 1.5px solid var(--ink); border-bottom: none; border-radius: 4px 4px 0 0; }
.league-results { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.league-result { display: flex; gap: 0.8rem; align-items: baseline; padding: 0.45rem 0.6rem; border-radius: 10px; background: var(--bg-2); border-left: 4px solid transparent; }
.league-result.is-win { border-left-color: var(--teal); }
.league-result.is-loss { border-left-color: var(--coral); }
.league-result__date { font-size: 0.78rem; color: var(--muted); min-width: 3.2rem; }
.league-result__score { font-weight: 800; min-width: 4rem; font-variant-numeric: tabular-nums; }
.league-result__opp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.league-field { display: block; margin-top: 0.7rem; font-size: 0.85rem; font-weight: 800; }
.league-field input, .league-field textarea { display: block; width: 100%; margin-top: 0.3rem; background: var(--surface); color: inherit; border: 2px solid var(--ink); border-radius: 12px; padding: 0.55rem 0.7rem; font: inherit; font-weight: 600; min-height: 44px; }
.league-field input:focus-visible, .league-field textarea:focus-visible { outline: none; box-shadow: var(--ring); }
.league-field--advanced { opacity: 0.75; }
.league-setup__actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.league-status { min-height: 1.2em; margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--teal-text); font-weight: 700; }
.league-status.is-error { color: var(--coral-text); }
.league-manage { margin-top: 1rem; }
.league-manage summary { cursor: pointer; color: var(--muted); }

.btn:active, .nav-btn:active, .journey-node:active { transform: scale(0.97); }
.nav-btn, .journey-node { transition: transform 0.12s var(--ease), opacity 0.15s ease, background 0.15s var(--ease); }

/* ---- Journey home screen ---- */
.journey-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.journey-top h2 { margin: 0; }
.journey-top__count { font-size: 0.8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.journey-hero { display: flex; gap: 1rem; align-items: stretch; margin-top: 0.75rem; padding: 0.9rem; cursor: pointer; background: var(--tint-teal); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.15s var(--spring), box-shadow 0.15s var(--ease); }
.journey-hero:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.journey-hero__thumb { flex: 0 0 42%; max-width: 260px; border-radius: 12px; overflow: hidden; border: 2px solid var(--ink); }
.journey-hero__thumb svg { display: block; width: 100%; height: auto; }
.journey-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; justify-content: center; }
.journey-hero__kicker { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--coral-text); font-weight: 800; }
.journey-hero__title { margin: 0; font-family: var(--font-display); font-size: 1.3rem; }
.journey-hero__cta { margin-top: 0.4rem; border: 2px solid var(--ink); border-radius: 999px; padding: 0.6rem 1.3rem; cursor: pointer; font-family: var(--font); font-weight: 800; font-size: 1rem; background: var(--coral); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); min-height: 48px; transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.15s var(--ease); }
.journey-hero__cta:hover { background: #FF7F70; }
.journey-hero__cta:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.journey-tier { margin-top: 1.3rem; }
.journey-tier__head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--line-soft); padding-bottom: 0.3rem; margin-bottom: 0.6rem; }
.journey-tier__head h4 { margin: 0; }
.journey-tier__count { font-size: 0.8rem; color: var(--teal-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.journey-path { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.journey-node { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 100%; background: var(--surface); color: inherit; border: 2px solid var(--ink); border-radius: 999px; padding: 0.35rem 0.8rem 0.35rem 0.4rem; min-height: 44px; cursor: pointer; font: inherit; font-size: 0.83rem; font-weight: 700; }
.journey-node__num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bg-2); border: 1.5px solid var(--ink); font-weight: 800; font-size: 0.75rem; flex: 0 0 auto; }
.journey-node__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey-node.is-done { background: var(--tint-teal); }
.journey-node.is-done .journey-node__num { background: var(--teal); color: var(--ink); }
.journey-node.is-next { background: var(--tint-sun); box-shadow: 2px 2px 0 var(--ink); }
.journey-node.is-next .journey-node__num { background: var(--sunny); color: var(--ink); }
.journey-node.is-upcoming { opacity: 0.5; }

/* ---- Sticky thumb-reach action bar on shot screens ---- */
.action-bar { position: sticky; bottom: 0.5rem; z-index: 30; display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.55rem; margin-top: 0.8rem; background: var(--bg); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }
.action-bar .btn { min-height: 48px; flex: 1 1 auto; font-size: 0.95rem; border-radius: 999px; }
.action-bar .btn--made { flex: 2 1 auto; }

/* ---- Feedback toast ---- */
.pp-toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%) translateY(0); z-index: 200; background: var(--teal); color: var(--ink); border: 2px solid var(--ink); font-weight: 800; padding: 0.65rem 1.3rem; border-radius: 999px; box-shadow: var(--shadow-sm); animation: pp-toast-in 0.25s var(--spring, ease); pointer-events: none; }
.pp-toast--try { background: var(--surface); color: var(--ink); }
.pp-toast.is-out { opacity: 0; transform: translateX(-50%) translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; }
@keyframes pp-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.92); } }

/* ---- Gami strip pill ---- */
/* Header strip: compact status in the top bar. It used to be a full-width
   block of cards above the content, which pushed the table below the fold. */
.app-header .gami-strip { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-wrap: nowrap; }
.gami-chip { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; padding: 0.2rem 0.5rem; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); white-space: nowrap; line-height: 1.2; }
/* Level and streak are feedback, not the point of the app. No fill, no
   outline, so they read below the brand and well below the table. */
.gami-chip--lvl, .gami-chip--streak { background: none; border-color: transparent; color: var(--muted); }
.gami-xp { width: 56px; height: 7px; background: var(--surface-2); border: 2px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.gami-xp__fill { display: block; height: 100%; background: var(--felt); }
.gami-award { font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: 999px; background: var(--sunny); border: 2px solid var(--line); white-space: nowrap; animation: gami-award-in 320ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }

/* Card detail: the table is the point, so the chrome around it stays small. */
.card-detail__head { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.5rem; }
.card-detail__ident { min-width: 0; }
.card-detail__title { font-size: 1.15rem; margin: 0; line-height: 1.15; }
.card-detail__sub { font-size: 0.8rem; color: var(--ink-2); margin: 0; }
.btn--back { flex: 0 0 auto; width: 44px; padding: 0; font-size: 1.05rem; line-height: 1; font-weight: 800; border-radius: 999px; }
.btn--sm { padding: 0.4rem 0.8rem; font-size: 0.82rem; box-shadow: var(--shadow-sm); }
.card-detail__controls, .card-detail__play { gap: 0.45rem; }

/* Paging: arrows either side, under the table. */
.card-detail__paging { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.5rem 0 0.75rem; }
.btn--arrow { padding: 0.25rem 0.75rem; font-size: 1.05rem; line-height: 1.1; font-weight: 800; border-radius: 999px; box-shadow: var(--shadow-sm); }
.btn--arrow[disabled] { opacity: 0.35; box-shadow: none; cursor: default; }

@media (max-width: 520px) {
  .app-header .gami-strip { gap: 0.3rem; }
  .gami-xp { width: 38px; }
}

/* Setup helper: collapsed by default, because most layouts copy off the card
   by eye and the picture is what you want while playing. */
.setup { border: 2px solid var(--line); border-radius: 12px; background: var(--surface-2); margin: 1rem 0; overflow: hidden; }
.setup__toggle { cursor: pointer; padding: 0.75rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.setup__toggle::-webkit-details-marker { display: none; }
/* Drawn with borders rather than a glyph: U+25B8 is not in Nunito Sans and
   rendered as a tofu box. */
.setup__toggle::before { content: ""; display: inline-block; width: 0; height: 0; flex: none;
  border-left: 7px solid var(--teal-text); border-top: 5px solid transparent;
  border-bottom: 5px solid transparent; transition: transform 140ms ease; }
.setup[open] .setup__toggle::before { transform: rotate(90deg); }
.setup__toggle:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.setup__diagram { margin: 0 0.75rem 0.6rem; overflow: hidden; }
.setup__diagram svg { display: block; width: 100%; height: auto; }
/* The caption is a caption. The diagram above it is the instruction. */
.setup__step { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.75rem; }
.setup__caption { flex: 1; margin: 0; text-align: center; display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.85rem; color: var(--ink-2); line-height: 1.35; }
.setup__caption b { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.setup__count { margin: 0.5rem 0 0.85rem; text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); }

/* Award flash: what the last logged attempt just earned. */
.gami-award { align-self: center; display: inline-flex; align-items: baseline; gap: 0.45rem; background: var(--tint-gold, #ffe9a8); border: 2px solid var(--ink); border-radius: 999px; padding: 0.3rem 0.85rem; box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; animation: gami-award-in 320ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.gami-award__xp { font-weight: 800; font-size: 0.9rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.gami-award__why { font-size: 0.72rem; font-weight: 700; color: var(--ink); opacity: 0.7; text-transform: lowercase; }
@keyframes gami-award-in { from { transform: scale(0.75) translateY(4px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gami-award { animation: none; } }
.gami-pill { align-self: center; background: var(--tint-teal); border: 2px solid var(--ink); color: var(--ink); font-weight: 800; font-size: 0.8rem; padding: 0.3rem 0.8rem; border-radius: 999px; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); }

/* ---- Flashcard SVG: real ball colours + aim arrow ---- */
.poolpro-table .ball.object.ball--red { fill: #E04A38; stroke: #2D2A32; }
.poolpro-table .ball.object.ball--yellow { fill: #F2C230; stroke: #2D2A32; }
.poolpro-table .ball.object.ball--black { fill: #20242C; stroke: #000; }
.poolpro-table .aim-arrow { stroke: rgba(255,255,255,0.9); stroke-width: 0.9; stroke-dasharray: 2.4 1.6; }
.poolpro-table .aim-arrow-head { fill: #ffffff; }
.deck-shot__tick { color: var(--teal-text); font-weight: 800; }
.deck-shot.is-made .deck-shot__thumb { outline: 2px solid var(--teal); outline-offset: -2px; }

/* ---- Diagram details expander ---- */
.diagram__more { margin-top: 0.6rem; }
.diagram__more summary { cursor: pointer; color: var(--muted); font-size: 0.88rem; padding: 0.3rem 0; min-height: 44px; display: flex; align-items: center; }
.diagram__more[open] summary { color: var(--teal-text); }

/* ---- Bottom nav on phones (table-side, one-handed) ---- */
@media (max-width: 720px) {
  .app-header { position: static; }
  /* Six destinations used to scroll sideways, so Stats and League were off
     screen and the row read as cut off. Equal columns fit all six at 360px.
     44px is the tap-target floor, so the height comes off the padding. */
  .app-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; flex-wrap: nowrap; gap: 0.15rem; padding: 0.3rem 0.35rem calc(0.3rem + env(safe-area-inset-bottom)); background: var(--bg); border-top: 2px solid var(--ink); }
  .app-nav .nav-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0.4rem 0.2rem; font-size: 0.74rem; border-radius: 999px; text-align: center; }
  .app-nav .nav-btn.is-active { box-shadow: 2px 2px 0 var(--ink); }
  .app-main { padding-bottom: 5.5rem; }
  .action-bar { bottom: 4.6rem; }
  .journey-hero { flex-direction: column; }
  .journey-hero__thumb { flex: none; max-width: none; }
  .pp-toast { bottom: 9rem; }
}

/* ---- Pattern Cards screen (T13) ---- */
.cards__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.cards__head h2 { margin: 0; }
/* One row that scrolls, like the bottom nav. Wrapping cost three rows of
   chrome before a single card was on screen. */
.cards__filters { display: flex; flex-wrap: nowrap; overflow-x: auto; align-items: center; gap: 0.5rem; margin: 0.75rem 0 1rem; padding-bottom: 0.15rem; scrollbar-width: none; }
.cards__filters::-webkit-scrollbar { display: none; }
.cards__filters .pill { flex: 0 0 auto; }
.card-tile__name { font-family: var(--font-display); font-weight: 700; }
.pill {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--ink);
  color: var(--ink-2);
  cursor: pointer;
  min-height: 40px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.pill:hover { background: var(--tint-teal); }
.pill:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.pill:focus-visible { outline: none; box-shadow: var(--ring); }
.pill--active { background: var(--teal); color: var(--surface); border-color: var(--ink); }
.pill--active:hover { background: var(--accent-2); }

.cards__grid, .drills__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 240px forced one tile per row on a phone, so a 20-card tier was a
     5,800px scroll. 148px gives two columns from 330px up. */
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 1rem;
}
.card-tile, .drill-tile {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.9rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  cursor: pointer;
  transition: transform 0.18s var(--spring), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.card-tile:hover, .drill-tile:hover,
.card-tile:focus-visible, .drill-tile:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
  background: var(--tint-teal);
  outline: none;
}
.card-tile__thumb, .drill-tile__thumb {
  padding: 0;
}
.card-tile__thumb svg, .drill-tile__thumb svg { display: block; width: 100%; height: auto; }
.card-tile__meta, .drill-tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
}

/* ---- Pattern Card detail ---- */
/* No frame. The table in the photo already has its own timber and cushions;
   wrapping it in a green border drew a second, fake rail around the real one
   and cost ~42px of width on a phone. */
.card-detail__diagram, .drill-detail__diagram {
  margin: 0.75rem 0;
}
.card-detail__diagram svg, .drill-detail__diagram svg { display: block; width: 100%; height: auto; }
.card-detail__controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.card-detail__setup { display: flex; flex-direction: column; gap: 0.35rem; padding-left: 1.2rem; color: var(--ink-2); }
.card-detail__log, .drill-detail__log {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  box-shadow: var(--shadow-sm);
  margin: 0.5rem 0 0.75rem;
}
.card-detail__log select, .drill-detail__log input[type="number"] {
  padding: 0.4rem 0.6rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  min-height: 44px;
}
.card-detail__log label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 700; color: var(--ink-2); }
.card-detail__stats { color: var(--muted); font-size: 0.9rem; font-weight: 700; margin: 0.25rem 0 0; }

/* ---- Drills screen (T13) ---- */
.drill-detail__history { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.drill-detail__history li {
  background: var(--bg-2);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}

/* ---- Stats tiers table (T13) ---- */
.stats-tiers {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: 0.88rem;
}
.stats-tiers th, .stats-tiers td { padding: 0.5rem 0.7rem; text-align: left; }
.stats-tiers thead th {
  background: var(--bg-2);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.stats-tiers tbody tr + tr { border-top: 1.5px solid var(--line-soft); }
.stats-tiers tbody td:nth-child(4) { color: var(--teal-text); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Daily Drill: pattern card + drill picks (T13) ---- */
.daily-drill__card, .daily-drill__drill {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.15s var(--spring), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}
.daily-drill__card:hover, .daily-drill__drill:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow);
  background: var(--tint-teal);
}
.daily-drill__card h3, .daily-drill__drill h3 { margin: 0 0 0.25rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.daily-drill__card p, .daily-drill__drill p { margin: 0; color: var(--ink-2); font-size: 0.9rem; }

/* ---- Toggle button active state (T13) ---- */
.btn--active {
  background: var(--teal);
  color: var(--surface);
  border-color: var(--ink);
}
.btn--active:hover { background: var(--accent-2); }

/* --- Difficulty ranking + play flow (pattern cards) --- */
.badge--rank {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}

/* .btn--primary was in the markup but had no rule, so every button on the
   card screen rendered identically and nothing read as the main action. */
.btn--primary { background: var(--coral); color: var(--ink); }
.btn--primary:hover { background: #FF7F70; }
.card-detail__cleared { flex: 1 1 100%; font-size: 1.05rem; padding: 0.7rem 1rem; }
.card-detail__miss { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.card-detail__rank {
  font-size: 0.72em;
  opacity: 0.85;
  white-space: nowrap;
}