/* All colours in one place, so they are easy to change. */
:root {
  --background: #0d0f14;
  --card: #171a22;
  --card-border: #252a36;
  --text: #f2f4f8;
  --muted: #b3b9c9;
  --blue: #2f8cff;
  --orange: #ff8a1f;
  --good: #3ad08f;
  --error: #ff6b6b;
  --track: #0f1218;
  --win: #ffd166;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--background);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.4;
}
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.screen {
  max-width: 560px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* Buttons */
.button {
  background: linear-gradient(135deg, var(--blue), #5a6bff);
  border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 600; cursor: pointer;
}
.button:active { transform: scale(.97); }
.text-button { background: none; border: 0; color: var(--blue); padding: 10px; cursor: pointer; font-weight: 600; }
.round-button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--card-border);
  background: var(--card); display: grid; place-items: center; cursor: pointer; flex: none;
}
.round-button svg { width: 22px; height: 22px; }
.round-button.busy svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 16px;
}
.message { background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.4); color: #ffd0d0; border-radius: 12px; padding: 12px; }
.message.info { background: rgba(47,140,255,.12); border-color: rgba(47,140,255,.4); color: var(--text); }

/* Search */
.logo {
  font-size: 2rem; margin: 24px 0 4px; letter-spacing: .02em;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.intro { margin: 0 0 16px; color: var(--muted); }
.search label { display: block; font-size: .85rem; color: var(--muted); margin: 8px 0 6px; }
.search select, .search input {
  width: 100%; background: var(--track); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px;
  font-size: 16px; /* 16px prevents zooming in on iPhone */
}
.search-bar { display: flex; gap: 8px; }
.search-bar input { flex: 1; min-width: 0; }
.results { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.results button {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 12px; cursor: pointer;
}
.results button:active { border-color: var(--blue); }
.results .name { font-weight: 600; display: block; }

.avatar, .avatar-empty {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--track);
  display: grid; place-items: center; font-weight: 700; color: var(--muted);
}

/* Overview */
.header { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; min-height: 48px; }
.header-text { flex: 1; min-width: 0; }
.header h1 { margin: 0; font-size: 1.4rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modes { display: grid; gap: 6px; }
/* One flat row per mode: rank icon, name/rank/MMR, and on the right the distance to the target.
   Each card is tinted with the colour of its rank (data-rank, set in app.js). */
.mode {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 48px 1fr auto; gap: 0 12px; align-items: center;
  padding: 10px 14px; border: 0; border-radius: 14px;
  border-left: 4px solid var(--rank-solid, var(--card-border));
  background: linear-gradient(100deg, var(--rank-tint, transparent) 0%, transparent 75%), var(--card);
}
.mode .icon, .mode .icon-empty { width: 48px; height: 48px; object-fit: contain; }
.mode .icon { filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
[data-rank="bronze"]   { --rank-tint: rgba(200,130,60,.28);  --rank-solid: #c8823c; }
[data-rank="silver"]   { --rank-tint: rgba(190,200,215,.22); --rank-solid: #bec8d7; }
[data-rank="gold"]     { --rank-tint: rgba(240,190,60,.26);  --rank-solid: #f0be3c; }
[data-rank="platinum"] { --rank-tint: rgba(64,200,220,.30);  --rank-solid: #40c8dc; }
[data-rank="diamond"]  { --rank-tint: rgba(70,130,255,.32);  --rank-solid: #4682ff; }
[data-rank="champion"] { --rank-tint: rgba(170,90,255,.32);  --rank-solid: #aa5aff; }
[data-rank="gc"]       { --rank-tint: rgba(255,70,90,.32);   --rank-solid: #ff465a; }
[data-rank="ssl"]      { --rank-tint: rgba(255,255,255,.22); --rank-solid: #ffffff; }
.mode .icon-empty { border-radius: 50%; background: var(--track); }
.mode .info { min-width: 0; display: flex; flex-direction: column; }
.mode h2 { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.mode .rank, .mode .mmr { color: var(--muted); font-size: .78rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.goal .to-go { font-size: 1.75rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.goal .to-go small { font-size: .7rem; font-weight: 600; color: var(--muted); }
.goal .games { color: var(--win); font-weight: 700; font-size: .95rem; margin-top: 2px; white-space: nowrap; }
.goal.reached .to-go, .goal.reached .to-go small, .goal.reached .games { color: #7cf29a; }
.bar { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--track); }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); }
.mode.reached .bar span { background: var(--good); }
.mode.empty { opacity: .55; padding: 8px 12px; }
.mode.empty .icon, .mode.empty .icon-empty { width: 32px; height: 32px; }
.mode .info .rank { color: var(--text); opacity: .85; }

.footer { text-align: center; font-size: .8rem; margin: 10px 0 0; }
/* Sticky action bar at the bottom of the screen */
#overview-screen { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; gap: 10px; justify-content: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(17, 19, 26, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--card-border); box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
/* Styled like the mode cards: dark card, rank-coloured edge and tint */
.dock-button {
  flex: 1; max-width: 264px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border: 0; border-radius: 12px; cursor: pointer;
  font-weight: 800; font-size: 1rem; color: var(--text);
  border-left: 4px solid #4a5163;
  background: linear-gradient(100deg, rgba(150,160,185,.16) 0%, transparent 80%), var(--card);
}
.dock-button.primary {
  border-left-color: #4682ff;
  background: linear-gradient(100deg, rgba(70,130,255,.42) 0%, rgba(70,130,255,.08) 80%), var(--card);
}
.dock-button svg { width: 20px; height: 20px; flex: none; }
/* Edit MMR: just icon and text, no button shape */
#edit-mmr-button { padding: 12px; border-left: 0; background: none; color: var(--muted); font-weight: 700; }
.dock-button:active { transform: scale(.97); }
.dock-button:disabled { opacity: .5; }

/* Dialogs */
dialog {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  background: var(--card); color: var(--text); border: 1px solid var(--card-border); border-radius: 18px; padding: 20px;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { margin: 0 0 8px; }
.table-head, .row { display: grid; gap: 8px; align-items: center; }
.table-head { font-size: .8rem; color: var(--muted); margin: 12px 0 4px; }
.row { margin-bottom: 8px; }
.row input {
  width: 100%; background: var(--track); border: 1px solid var(--card-border); border-radius: 10px; padding: 8px;
  font-size: 16px; text-align: right;
}
.buttons { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }

/* Manual MMR entry */
.manual-hint { text-align: center; margin-top: 24px; }
.manual-hint .text-button { display: block; margin: 0 auto; }
.table-head.two, .row.two { grid-template-columns: 1fr 120px; }

/* Target rank picker, top right */
.target {
  height: 44px; padding: 0 12px; border-radius: 22px; border: 0;
  background: var(--card); font-weight: 700; font-size: 16px; cursor: pointer;
}
.goal .games.muted { color: var(--muted); font-weight: 600; }

/* Photo scan */
.manual-hint .scan-button { margin-top: -4px; }
.text-button:disabled, .button:disabled { opacity: .5; }
#mmr-scan-note { margin: 0 0 8px; }
.row.name-row { grid-template-columns: 1fr 1.6fr; margin-top: 4px; }
.row.name-row input { text-align: left; }

/* Tabs: Overview / Session */
.tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--card); border-radius: 12px; padding: 4px; margin: 0 0 10px; }
/* The highlight slides under the active tab */
.tabs::before {
  content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px);
  border-radius: 9px; background: #2a3040; transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.tabs[data-active="session"]::before { transform: translateX(calc(100% + 4px)); }
.tabs button { position: relative; border: 0; background: none; border-radius: 9px; padding: 8px; font-weight: 700; color: var(--muted); cursor: pointer; transition: color .2s; }
.tabs button.active { color: var(--text); }

/* Session */
/* Session start picker: a pill with a small label above the chosen time */
.session-pick {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  height: 48px; padding: 0 34px 0 16px; border-radius: 24px; background: var(--card); max-width: 55%; cursor: pointer;
}
.session-pick span { font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.1; }
.session-pick::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); pointer-events: none;
}
.session-summary { text-align: center; margin: 0 0 12px; }
.session-summary:empty { display: none; }
.goal.up .to-go, .goal.up .games { color: #7cf29a; }
.goal.down .to-go, .goal.down .games { color: #ff7a85; }
.mode.idle { opacity: .35; filter: grayscale(.6); }
#player-platform:empty { display: none; }

/* Welcome screen = landing page */
.hero { padding: 28px 0 8px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--card-border);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.eyebrow .name { color: #fff; }
.eyebrow .for { color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: none; }
.eyebrow img { width: 20px; height: 20px; object-fit: contain; }
.hero-title { font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; margin: 16px 0 12px; }
.gc-text { background: linear-gradient(90deg, #ff465a, #ff8a5c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: var(--muted); font-size: 1.02rem; margin: 0 0 20px; }
.hero-cta {
  display: flex; justify-content: center; width: 100%; padding: 15px; border-radius: 14px; text-decoration: none;
  font-weight: 800; font-size: 1.05rem; color: #fff;
  background: linear-gradient(100deg, #ff465a, #ff7a4d); box-shadow: 0 10px 30px rgba(255,70,90,.35);
}
.hero-demo { display: grid; gap: 28px; margin: 34px 0 8px; }
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.demo-head .demo-title { margin: 0; font-size: clamp(.95rem, 4.6vw, 1.25rem); white-space: nowrap; }
.demo-head .target-pick > button { padding: 0 30px 0 14px; }
.demo-head .target-pick::after { right: 13px; }
.demo-head .target-pick { flex: none; max-width: none; }
#demo-goal.fade-in { animation: fade-in .25s ease-out; }
.demo .details { display: none; }
.demo .mode.open .details { display: grid; }
.demo-title { font-size: 1.25rem; font-weight: 800; line-height: 1.2; margin: 0 0 4px; }
.demo-sub { color: var(--muted); font-size: .92rem; margin: 0 0 12px; }
.demo { animation: rise-in .6s cubic-bezier(.2, .8, .2, 1) backwards; }
.demo-block:nth-child(2) .demo { animation-delay: .15s; }
.demo .mode { box-shadow: 0 14px 34px rgba(0,0,0,.5); cursor: default; }
/* Features: plain text with an icon, so they don't look like app cards */
.features { display: grid; gap: 18px; margin: 34px 0 34px; padding: 22px 4px 0; border-top: 1px solid var(--card-border); }
.feature { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; }
.feature img, .feature svg { grid-row: span 2; width: 30px; height: 30px; margin: 4px 0 0 7px; object-fit: contain; color: var(--rank-solid); }
.feature h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.feature p { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.setup-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 12px; scroll-margin-top: 16px; }
.welcome-title { font-size: 2.2rem; font-weight: 800; margin: 24px 0 4px; }
.step {
  position: relative; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px;
  border: 0; border-left: 4px solid var(--rank-solid); padding: 14px 14px 16px;
  background: linear-gradient(100deg, var(--rank-tint) 0%, transparent 80%), var(--card);
}
.step[data-rank="champion"] { --rank-tint: rgba(170,90,255,.32); --rank-solid: #aa5aff; }
.step[data-rank="diamond"]  { --rank-tint: rgba(70,130,255,.32); --rank-solid: #4682ff; }
.step[data-rank="cta"]      { --rank-tint: rgba(255,70,90,.26); --rank-solid: #ff4f5a; }
.scan-button.wide { display: flex; align-items: center; justify-content: center; gap: 8px; }
.scan-button.wide svg { width: 20px; height: 20px; flex: none; }
.step-head { display: flex; align-items: flex-start; gap: 10px; }
.step-number {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: var(--rank-solid);
}
.step label { font-weight: 800; font-size: 1.05rem; line-height: 26px; }
.step p { margin: 0; }
.step input {
  width: 100%; background: var(--track); border: 1px solid var(--card-border); border-radius: 12px;
  padding: 12px; font-size: 16px;
}
.step .example { width: 100%; height: auto; border-radius: 10px; display: block; }
.button.wide { width: 100%; margin-top: 4px; }
.text-button.center { display: block; margin: 4px auto 0; }
/* Rank change this session: a small coloured pill "▲ from [logo]", centred on the MMR line */
.mode .mmr:has(.rank-change) { display: flex; align-items: center; overflow: visible; }
.rank-change {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 16px; margin-left: 6px; padding: 0 7px 0 6px; border-radius: 8px;
  font-weight: 800; font-size: .66rem; line-height: 1;
}
.rank-change.up { color: #7cf29a; background: rgba(60,200,110,.2); box-shadow: inset 0 0 0 1px rgba(124,242,154,.35); }
.rank-change.down { color: #ff7a85; background: rgba(230,70,90,.2); box-shadow: inset 0 0 0 1px rgba(255,122,133,.35); }
.mini-rank { width: 12px; height: 12px; object-fit: contain; display: block; }
/* Narrow phones: a bit more room for the text next to the rank logo */
@media (max-width: 380px) {
  .mode { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 10px 12px 10px 10px; }
  .mode .icon, .mode .icon-empty { width: 40px; height: 40px; }
  .goal .to-go { font-size: 1.55rem; }
}

/* Target rank picker with rank logos */
.target-pick { padding: 0; }
.target-pick > button {
  height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 34px 0 16px; background: none; border: 0; cursor: pointer; text-align: left;
}
.target-pick > button > span:first-child { font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.1; }
.session-pick .target-value { display: flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 800; line-height: 1.3; color: #fff; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.session-pick .target-value img { width: 20px; height: 20px; object-fit: contain; }
.pick-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 100%;
  display: grid; gap: 4px; padding: 6px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--card-border); box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.pick-menu button {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-radius: 10px;
  background: none; font-weight: 800; font-size: 1rem; cursor: pointer; text-align: left;
}
.pick-menu button img { width: 32px; height: 32px; object-fit: contain; }
.session-menu { min-width: 170px; max-height: 60vh; overflow-y: auto; }
.session-menu button { font-size: 1rem; padding: 10px 12px; white-space: nowrap; }
.pick-menu button[aria-selected="true"] { background: #2a3040; }

/* Card details: tap a mode to unfold it */
.mode:has(.details) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.details {
  grid-column: 1 / -1; display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.2, .8, .2, 1);
}
.mode.open .details { grid-template-rows: 1fr; }
.details-clip { overflow: hidden; min-height: 0; margin: 0 -8px; padding: 0 8px; }
.details-body {
  min-width: 0; padding-top: 12px; display: grid; gap: 12px; cursor: default;
  opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.mode.open .details-body { opacity: 1; transform: none; }
.mode.idle.open { opacity: 1; filter: none; }
.detail-block { min-width: 0; display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.detail-block h3 { margin: 0; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* Rank line: one dash per rank in its colour, filled up to your MMR */
.rank-line { display: flex; gap: 4px; margin-bottom: 4px; }
.dash { flex: 1; display: grid; justify-items: center; gap: 6px; min-width: 0; }
.dash-bar { position: relative; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.08); }
.dash-bar::before { content: ''; position: absolute; inset: 0; background: var(--rank-solid); opacity: .22; }
.dash-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rank-solid); border-radius: 3px; }
.dash img { width: 100%; max-width: 18px; aspect-ratio: 1; height: auto; object-fit: contain; }
.dash.ahead img { opacity: .45; filter: grayscale(.5); }
.dash.goal img { opacity: 1; filter: none; }
.dash.now img { max-width: 24px; margin: -3px 0; filter: drop-shadow(0 0 6px var(--rank-solid)); }
.session-line { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.sl-labels { position: relative; height: 18px; margin-bottom: 4px; }
.sl-label { position: absolute; top: 0; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.sl-label.to-left { transform: translateX(-100%); }
.sl-label.now { color: #7cf29a; }
.sl-label.now.lost { color: #ff7a85; }
.sl-label:not(.now) { color: var(--muted); }
.sl-bars { position: relative; display: flex; gap: 4px; }
.sl-dash { position: relative; flex: 1; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.07); }
.sl-dash::before { content: ''; position: absolute; inset: 0; background: var(--rank-solid); opacity: .18; }
.sl-dash i { position: absolute; top: 0; bottom: 0; }
.sl-base { left: 0; background: var(--rank-solid); opacity: .45; }
.sl-moved { background: var(--rank-solid); }
.sl-moved.lost { background: repeating-linear-gradient(135deg, #ff7a85 0 4px, rgba(255,122,133,.45) 4px 8px); }
.sl-dash b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--card); opacity: .8; }
.sl-pin { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; }
.sl-pin.start { border: 2px solid var(--muted); background: var(--card); }
.sl-pin.now { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #7cf29a; border: 2px solid #fff; box-shadow: 0 0 8px #7cf29a; }
.sl-pin.now.lost { background: #ff7a85; box-shadow: 0 0 8px #ff7a85; }
.sl-pin.now.same { background: var(--text); box-shadow: 0 0 8px rgba(255,255,255,.5); }
.sl-label.now.same { color: var(--text); }
.sl-icons { display: flex; gap: 4px; margin-top: 8px; }
.sl-icon { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 2px; opacity: .5; }
.sl-icon.here { opacity: 1; }
.sl-icon img { width: 100%; max-width: 22px; aspect-ratio: 1; height: auto; object-fit: contain; }
.session-line.many .sl-icon span { display: none; }
.session-line.many .sl-dash b { display: none; }
.session-line.many .sl-icon:not(.here) img { max-width: 16px; }
.sl-icon span { font-size: .6rem; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.15; }
.detail-row { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; }
.detail-row span, .route li > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-row b { flex: none; }
.route b { min-width: 64px; }
.detail-row.up b { color: #7cf29a; }
.detail-row.down b { color: #ff7a85; }
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.route li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: .85rem; font-weight: 700; }
.route img { width: 24px; height: 24px; object-fit: contain; }
.route .route-mmr { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.route b { color: var(--win); text-align: right; }
.start-now { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.sn { display: grid; justify-items: center; text-align: center; gap: 2px; }
.sn span { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sn img { width: 40px; height: 40px; object-fit: contain; }
.sn b { font-size: .82rem; }
.sn small { font-size: .75rem; color: var(--muted); }
.sn-arrow { font-size: 1.2rem; color: var(--muted); }

/* ---------- Subtle animations ---------- */
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes view-in-left { from { opacity: 0; transform: translateX(-14px); } }
@keyframes view-in-right { from { opacity: 0; transform: translateX(14px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }

/* Menus unfold from the button they belong to */
.pick-menu:not([hidden]) { animation: menu-in .18s cubic-bezier(.2, .8, .2, 1); transform-origin: top right; }
.pick-menu button { transition: background-color .15s; }
.pick-menu button:active { background: #2a3040; }
/* The arrow turns when the menu is open */
.session-pick::after { transition: transform .2s, margin-top .2s; }
.session-pick:has([aria-expanded="true"])::after { transform: rotate(225deg); margin-top: -1px; }
.session-pick > button { transition: transform .12s; }
.session-pick > button:active { transform: scale(.97); }

/* Switching tabs: the new view slides in from its side, the header picker fades in */
.view-in-left { animation: view-in-left .28s cubic-bezier(.2, .8, .2, 1); }
.view-in-right { animation: view-in-right .28s cubic-bezier(.2, .8, .2, 1); }
.session-pick.fade-in { animation: fade-in .25s ease-out; }

/* Cards come in one after another when the screen opens */
.mode.rise-in { animation: rise-in .35s cubic-bezier(.2, .8, .2, 1) backwards; }

/* Buttons respond to a tap */
.dock-button, .button, .text-button, .round-button { transition: transform .12s, opacity .2s; }
.button:active, .round-button:active { transform: scale(.95); }

/* Dialogs rise in over a fading backdrop */
dialog[open] { animation: dialog-in .25s cubic-bezier(.2, .8, .2, 1); }
dialog[open]::backdrop { animation: fade-in .25s ease-out; }

/* Scan overlay: the photo with a beam sweeping over it while Claude reads it */
.scan-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px 16px; background: rgba(8, 9, 14, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: fade-in .2s ease-out;
}
.scan-overlay[hidden] { display: none; }
.scan-overlay.leaving { opacity: 0; transition: opacity .25s ease-in; }
.scan-frame {
  position: relative; max-width: min(100%, 560px); border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  animation: dialog-in .3s cubic-bezier(.2, .8, .2, 1);
}
.scan-frame img { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #000; }
.scan-beam {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px; margin-left: -1.5px;
  background: #7fe3ff; box-shadow: 0 0 12px 3px rgba(127, 227, 255, .8), 0 0 60px 18px rgba(127, 227, 255, .25);
  animation: scan-sweep 1.6s ease-in-out infinite alternate;
}
.scan-overlay.done .scan-beam { animation-play-state: paused; opacity: 0; transition: opacity .2s; }
.scan-overlay.done .scan-frame { border-color: #4ade80; box-shadow: 0 0 0 2px rgba(74, 222, 128, .5), 0 18px 50px rgba(0, 0, 0, .5); transition: border-color .2s, box-shadow .2s; }
.scan-status { margin: 0; font-weight: 700; color: #fff; }
.scan-overlay:not(.done) .scan-status { animation: pulse 1.4s ease-in-out infinite; }
@keyframes scan-sweep { from { left: 0; } to { left: 100%; } }
@keyframes pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Landing: the setup steps use the same red as the main button */
.button.cta-red { background: linear-gradient(100deg, #ff465a, #ff7a4d); }
.text-button.cta-red { color: #ff7f72; }
.cta-note { display: flex; justify-content: center; gap: 16px; margin: 10px 0 0; font-size: .82rem; color: var(--muted); }
.cta-note span { white-space: nowrap; }
/* App name above the username in the dashboard */
.brand { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; line-height: 1.2; }
.brand .of { color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: none; }
.fine-print { margin: 28px 0 8px; text-align: center; font-size: .72rem; color: var(--muted); opacity: .7; }