/* LTO Tennis — Concept 2: minimal premium sport.
   Крупные цели нажатия и контраст: основная аудитория — пожилые игроки. */

:root {
  --bg: #f5f5f2;
  --card: #ffffff;
  --ink: #0e0e0e;
  --muted: #55554f;
  --line: #deded8;
  --ball: #c6d62c;
  --ball-deep: #aebf14;
  --danger: #b3261e;
  --radius: 18px;
  --maxw: 560px;
}

html { font-size: 21px; -webkit-text-size-adjust: 100%; }
html[data-text='std'] { font-size: 18px; }
html[data-text='xl'] { font-size: 24px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
body.noscroll { overflow: hidden; }

#app { max-width: var(--maxw); margin: 0 auto; padding: 0 16px calc(32px + env(safe-area-inset-bottom)); }

h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.center { text-align: center; padding: 24px 0; }

/* ---------- логотип ---------- */
.logo { --lh: 1.5rem; position: relative; display: block; flex: none; align-self: flex-start; height: var(--lh); width: calc(var(--lh) * 2.5); cursor: pointer; }
.logo-svg { display: block; width: 100%; height: 100%; fill: var(--ink); }
.logo-ball { position: absolute; left: 66.8%; top: 17%; width: 26.4%; height: 66%; display: block; }
.logo-ball.spin { animation: ballspin 1.3s cubic-bezier(0.25, 0.8, 0.3, 1); }
@keyframes ballspin { to { transform: rotate(720deg); } }
.logo-xl { --lh: 4.2rem; margin: 14px 0 8px; }

/* ---------- шапка ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 0 10px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; border: 0; background: none; padding: 6px 4px; margin-left: -4px; text-align: left; }
.org {
  font-size: 0.5rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  line-height: 1.3;
}
.brand .org { max-width: 7rem; }

.hello { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; margin: 10px 0 14px; }

.banner {
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; margin: 4px 0 8px; font-weight: 600;
}

/* ---------- кнопки ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 3.3rem; padding: 10px 18px; border-radius: 14px; border: 2px solid var(--ink);
  background: var(--card); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; text-align: center;
  transition: transform 0.06s ease;
}
.btn:active:not(:disabled) { transform: scale(0.985); }
.btn-primary { background: var(--ball); box-shadow: 0 3px 0 var(--ink); }
.btn-primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--ink); transform: translateY(2px); }
.btn-outline { background: var(--card); }
.btn-ghost { border-color: transparent; background: transparent; text-decoration: underline; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-disabled, .btn:disabled { background: #e8e8e3; border-color: #c9c9c2; color: #6c6c66; box-shadow: none; cursor: not-allowed; }
.btn.is-busy::after {
  content: ''; width: 1em; height: 1em; border-radius: 50%; border: 3px solid var(--ink); border-top-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row, .btn-col { display: grid; gap: 10px; }

/* ---------- переключатели ---------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: #e9e9e4; padding: 4px; border-radius: 16px; }
.seg button {
  border: 0; background: transparent; border-radius: 12px; min-height: 3rem; padding: 6px 8px; font-weight: 700; line-height: 1.15;
}
.seg button small { display: block; font-size: 0.68rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.seg button[aria-pressed='true'] { background: var(--ink); color: #fff; }
.seg button[aria-pressed='true'] small { color: #d9d9d3; }
.seg-sm button { min-height: 2.6rem; min-width: 3rem; font-size: 0.8rem; letter-spacing: 0.08em; }
.seg-week { margin-bottom: 12px; }

/* ---------- карточки ---------- */
.card { background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.card h2 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; }

.card.mine { background: var(--ink); color: #fff; border-color: var(--ink); }
.card.mine h2 { color: var(--ball); }
.card.mine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.card.mine li button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left;
  min-height: 3rem; padding: 8px 14px; border: 0; border-radius: 12px; background: #1d1d1b; color: #fff; flex-wrap: wrap;
}
.card.mine li .u-when { display: grid; gap: 2px; min-width: 0; }
.card.mine li .u-when b { white-space: nowrap; }
.u-court { white-space: nowrap; }
.card.mine li .u-time { color: var(--ball); font-weight: 700; white-space: nowrap; font-size: 0.85rem; }
.u-court { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: #cfcfc8; }
.u-court .cico { width: 1.1rem; height: 1.1rem; flex: none; }
.u-court.c1 { color: #f3b895; }
.u-court.c2 { color: #a9dc9d; }
.u-court.inline { font-size: 0.9rem; margin-top: 4px; }
.sheet .u-court.c1 { color: #8f3d1a; }
.sheet .u-court.c2 { color: #1f5a2d; }
.card.mine .muted { color: #c9c9c3; }

.install-bar {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 8px 8px 8px 14px; margin-bottom: 14px; font-size: 0.78rem;
}
.install-bar { flex-wrap: wrap; }
.install-bar b { flex: 1 1 8rem; line-height: 1.25; }
.btn-sm { width: auto; min-height: 2.8rem; padding: 6px 14px; font-size: 0.8rem; box-shadow: none !important; }
.x-sm { width: 2.8rem; height: 2.8rem; border: 0; background: transparent; font-size: 1rem; font-weight: 800; color: var(--muted); flex: none; }
.steps { margin: 0 0 12px; padding-left: 1.3em; display: grid; gap: 8px; }

/* ---------- дни ---------- */
.days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; }
.day {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 4.6rem; padding: 6px 0 4px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); font-weight: 700;
}
.day .dow { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.day .num { font-size: 1.2rem; font-weight: 800; line-height: 1.1; }
.day .mark { height: 0.9rem; display: flex; align-items: center; }
.day .mark { height: 1.3rem; }
.day .mark .ball-ico { width: 1.2rem; height: 1.2rem; }
.day.is-past { opacity: 0.5; }
.day.is-today .dow::after { content: ' •'; }
.day[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; opacity: 1; }
.day[aria-pressed='true'] .dow { color: #d9d9d3; }

.day-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; text-transform: none; margin-bottom: 4px; }
.note { color: var(--muted); font-weight: 500; font-size: 0.85rem; margin-bottom: 14px; }
.note-closed { color: var(--danger); font-weight: 600; }

/* ---------- слот и корты ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 5px; border-radius: 999px; background: #e8e8e3;
  font-weight: 700; font-size: 0.75rem; white-space: nowrap;
}
.badge:not(:has(.ball-ico)) { padding-left: 12px; }
.badge-in { background: var(--ball); }
.badge .ball-ico { width: 1.35em; height: 1.35em; }

.sched { position: relative; }
.slot-group { display: grid; gap: 10px; margin-bottom: 20px; }

/* панель корта: у каждого корта своё оформление */
.cp {
  --c-bg: #f4f4f0; --c-ink: #222; --c-line: #deded8; --c-pip: #0e0e0e;
  position: relative; overflow: hidden; border-radius: 16px; padding: 12px 14px 6px; background: var(--c-bg); border: 1px solid var(--c-line);
}
.cp > * { position: relative; z-index: 1; }
.cp .court-art { position: absolute; z-index: 0; width: 120px; color: var(--c-ink); opacity: 0.1; pointer-events: none; }
.cp-mayan {
  --c-bg: #f8eee2; --c-ink: #8f3d1a; --c-line: #e9d3bb; --c-pip: #b4532a;
}
.cp-mayan .court-art { right: -8px; bottom: -6px; }
.cp-palmas {
  --c-bg: #e9f4e6; --c-ink: #1f5a2d; --c-line: #c4e0be; --c-pip: #2f7d3d;
}
.cp-palmas .court-art { right: -14px; bottom: -22px; width: 170px; }
.cp.is-here { box-shadow: 0 0 0 3px var(--ink); border-color: var(--ink); }

/* лента по верхнему краю: майя — глиф Ик и цифры майя (Mayan), пальмовые листья (Palmas) */
.court-band { height: 12px; margin: -14px -14px 12px; background-repeat: repeat-x; background-size: 20px 10px; opacity: 0.55; }
.cp-mayan .court-band {
  background-size: 40px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cg fill='none' stroke='%238f3d1a' stroke-width='1.1'%3E%3Crect x='1' y='1' width='14' height='10' rx='3'/%3E%3Crect x='22' y='1' width='14' height='10' rx='3'/%3E%3C/g%3E%3Cg fill='%238f3d1a'%3E%3Cpath d='M4.5 3.6h7v2H9V9H7V5.6H4.5z'/%3E%3Crect x='24.5' y='7.4' width='9' height='1.8' rx='.6'/%3E%3Ccircle cx='25.4' cy='4.4' r='1.05'/%3E%3Ccircle cx='29' cy='4.4' r='1.05'/%3E%3Ccircle cx='32.6' cy='4.4' r='1.05'/%3E%3C/g%3E%3C/svg%3E");
}
.cp-palmas .court-band {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M1 9C5 0 15 0 19 9C14 5 6 5 1 9Z' fill='%231f5a2d'/%3E%3C/svg%3E");
}

.cp > header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cp-title { flex: 1; min-width: 0; }
.cp-time { font-weight: 800; font-size: 1.05rem; line-height: 1.2; margin-top: 1px; }
.cp-title .badge { margin-top: 6px; }
.cp-count { text-align: right; line-height: 1; flex: none; }
.cp-count b { font-size: 1.7rem; font-weight: 800; color: var(--c-ink); }
.cp-count small { font-size: 0.8rem; font-weight: 700; color: #55554f; }
.nobody { color: #55554f; font-weight: 600; font-size: 0.85rem; margin: 12px 0 8px; }
.emblem { display: block; position: relative; width: 3.9rem; flex: none; margin: -4px 0 -4px -4px; }
.emblem.pyr { height: calc(3.9rem * 56 / 64); }
.emblem.palm-e { height: 3.9rem; }
.pyr i { position: absolute; display: block; border-radius: 2px; }
.pyr .b0 { background: var(--c-pip); }
.pyr .b1 { background: #cf7140; }
.pyr .b2 { background: #8f3d1a; }
.pyr .stairs { background: repeating-linear-gradient(to bottom, var(--c-bg) 0, var(--c-bg) 8.5%, rgba(143, 61, 26, 0.5) 8.5%, rgba(143, 61, 26, 0.5) 10%); border-radius: 0; opacity: 0.92; }
.pyr .door { background: var(--c-bg); border-radius: 40% 40% 0 0; }
.p-sway, .p-trunk, .p-crown { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.cp h4 { font-size: 1.15rem; font-weight: 800; color: var(--c-ink); letter-spacing: -0.01em; }

.meter { display: flex; gap: 4px; margin-bottom: 10px; }
.meter i { flex: 1; height: 0.6rem; border-radius: 999px; background: rgba(0, 0, 0, 0.1); }
.meter i.on { background: var(--c-pip); }
.meter i.x { background: transparent; border: 2px dashed rgba(0, 0, 0, 0.25); margin-left: 4px; }
.meter i.x.on { background: var(--c-pip); border-color: var(--c-pip); }
.extra-note { font-size: 0.8rem; background: rgba(255, 255, 255, 0.7); border: 1px dashed var(--c-pip); border-radius: 10px; padding: 8px 12px; margin: -4px 0 12px; font-weight: 600; }
.cp .btn-outline { background: rgba(255, 255, 255, 0.85); }
.cp .btn .cico { width: 1.3em; height: 1.3em; flex: none; }

.cp ol { list-style: none; margin: 12px 0 0; padding: 0; }
.cp li { display: flex; align-items: center; gap: 12px; min-height: 2.4rem; padding: 4px 4px; border-bottom: 1px solid var(--c-line); }
.cp li:last-child { border-bottom: 0; }
.cp li .n { width: 1.4rem; flex: none; color: #55554f; font-size: 0.8rem; font-weight: 600; }
.cp li .who { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.cp li .who em { font-style: normal; color: #55554f; font-weight: 500; font-size: 0.8rem; }
.cp li.empty .who { color: #a9a9a2; }
.cp li.me { background: rgba(198, 214, 44, 0.35); border-radius: 10px; border-bottom-color: transparent; }
.cp li.me .who { font-weight: 800; }
.cp li.extra { border-top: 1px dashed var(--c-pip); }
.cp li .xtag { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #55554f; border: 1px solid currentColor; border-radius: 6px; padding: 0 5px; vertical-align: middle; }
.cp li .ball-ico { width: 1.15rem; height: 1.15rem; flex: none; }
.cp li .rm {
  min-width: 2.75rem; min-height: 2.75rem; border: 0; background: transparent; color: var(--danger); font-size: 1.1rem; font-weight: 800; margin-right: -8px;
}

.foot { display: grid; gap: 10px; margin-top: 22px; }

/* ---------- мячики ---------- */
.ball-ico { width: 1.1rem; height: 1.1rem; display: block; flex: none; }
.ball-ico.drop { animation: drop 0.9s cubic-bezier(0.3, 0, 0.4, 1) both; }
.ball-ico.bounce { animation: bounce 0.7s cubic-bezier(0.3, 0, 0.4, 1) both; }
@keyframes drop {
  0% { transform: translateY(-1.8rem) scale(0.7); opacity: 0; }
  35% { transform: translateY(0) scale(1.15, 0.85); opacity: 1; }
  55% { transform: translateY(-0.7rem) scale(0.95, 1.05); }
  75% { transform: translateY(0) scale(1.08, 0.92); }
  100% { transform: none; }
}
@keyframes bounce {
  0% { transform: translateY(-0.9rem) scale(0.8); opacity: 0; }
  45% { transform: translateY(0) scale(1.2, 0.8); opacity: 1; }
  70% { transform: translateY(-0.3rem); }
  100% { transform: none; }
}

/* ---------- приветствие ---------- */
.welcome { position: relative; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.welcome-top { display: flex; justify-content: flex-end; padding: calc(14px + env(safe-area-inset-top)) 0 0; position: relative; z-index: 1; }
.welcome-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 8vh; }
.welcome h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin: 14px 0 8px; }
.lead { font-size: 1.05rem; margin-bottom: 22px; font-weight: 500; }
.rackets { position: absolute; right: -60px; top: 80px; width: 340px; color: #e8e8e2; z-index: 0; transform: rotate(8deg); }
.welcome form { display: grid; gap: 8px; }
.welcome label, .sheet label { font-weight: 700; font-size: 0.85rem; }

.input {
  width: 100%; min-height: 3.5rem; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 14px; background: #fff;
  font: inherit; font-size: 1.05rem; font-weight: 600; color: var(--ink);
}
.input[aria-invalid='true'] { border-color: var(--danger); }
.field-err { min-height: 1.2em; color: var(--danger); font-weight: 600; font-size: 0.85rem; }

/* ---------- окно ---------- */
#sheet[hidden] { display: none; }
.backdrop { position: fixed; inset: 0; background: rgba(14, 14, 14, 0.55); z-index: 40; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: var(--maxw); margin: 0 auto;
  background: var(--bg); border-radius: 24px 24px 0 0; max-height: 92dvh; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom); outline: none; animation: rise 0.18s ease-out;
}
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
.sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 8px 20px; }
.sheet h2 { font-size: 1.3rem; font-weight: 800; }
.sheet .x { width: 3rem; height: 3rem; border: 0; background: #e9e9e4; border-radius: 50%; font-size: 1.1rem; font-weight: 800; flex: none; }
.sheet-body { overflow-y: auto; padding: 8px 20px 24px; display: grid; gap: 10px; align-content: start; }
.sheet .lead { margin-bottom: 8px; }
.sec { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
.rules { margin: 0; }
.rules dt { font-weight: 800; margin-top: 14px; }
.rules dd { margin: 2px 0 0; color: #2a2a27; }

/* ---------- уведомление ---------- */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60; max-width: 520px; margin: 0 auto;
  background: var(--ink); color: #fff; padding: 16px 18px; border-radius: 16px; font-weight: 700; text-align: center;
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: none; }
.toast.err { background: var(--danger); }

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

/* ---------- ракетки на фоне страницы ---------- */
.bg-rackets {
  position: fixed; right: -90px; bottom: -40px; width: min(78vw, 380px); color: #e6e6df; z-index: 0; pointer-events: none; transform: rotate(-10deg);
}
.bg-rackets svg { width: 100%; height: auto; display: block; }
body.is-welcome .bg-rackets { display: none; }
#app { position: relative; z-index: 1; }

/* ---------- имя уже занято ---------- */
.chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; font-size: 0.85rem; }
.chip { min-height: 2.8rem; min-width: 3.6rem; padding: 4px 16px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; font-weight: 800; }
.warn { background: #fff3cd; border: 1px solid #e6c85a; border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 0.85rem; }

/* ---------- оживающие значки кортов ---------- */
.cp.anim:not(.in) .pyr i, .cp.anim:not(.in) .palm-e { opacity: 0; }
.cp.in .pyr .brick { animation: brick 0.55s cubic-bezier(0.3, 1.3, 0.5, 1) both; animation-delay: var(--d); }
.cp.in .pyr .stairs, .cp.in .pyr .door { animation: fadein 0.6s ease-out 1.25s both; }
@keyframes brick {
  0% { opacity: 0; transform: translateY(-1.2rem); }
  60% { opacity: 1; transform: translateY(0.1rem); }
  100% { opacity: 1; transform: none; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* пальма: появляется снизу, затем ствол и крона качаются как целые блоки (обычные HTML-трансформации, без анимации внутри SVG) */
.cp.in .palm-e { animation: palmrise 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
@keyframes palmrise { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
.p-sway { transform-origin: 50% 96%; }
.p-crown { transform-origin: 51.5% 37.5%; }
.cp.vis .p-sway { animation: sway 5s ease-in-out infinite alternate; }
.cp.vis .p-crown { animation: crown 3.2s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
@keyframes crown { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }

@media (prefers-reduced-motion: reduce) {
  .cp.anim:not(.in) .pyr i, .cp.anim:not(.in) .palm-e { opacity: 1 !important; }
}

/* ---------- установка на экран «Домой» ---------- */
.install-bar { gap: 12px; }
.install-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--ink); color: var(--ball); flex: none; }
.install-ico svg { width: 1.5rem; height: 1.5rem; }
.install-text { flex: 1 1 9rem; min-width: 0; }
.install-text b { display: block; line-height: 1.25; }
.install-text small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.install-welcome { margin-top: 22px; padding: 12px; font-size: 0.9rem; background: rgba(255, 255, 255, 0.85); }
.install-welcome .btn-sm { flex: 1 1 100%; width: 100%; min-height: 3.2rem; font-size: 0.95rem; }

/* ---------- поп-ап «добавить на экран Домой» ---------- */
.install-pop {
  position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 45; max-width: 520px; margin: 0 auto;
  background: var(--ink); color: #fff; border-radius: 20px; padding: 16px 16px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: rise 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.pop-title { font-weight: 800; font-size: 1.05rem; padding-right: 2.4rem; line-height: 1.25; }
.pop-text { margin: 6px 0 12px; font-size: 0.85rem; line-height: 1.4; color: #e3e3dd; }
.pop-buttons { display: flex; gap: 8px; align-items: center; }
.install-pop .x-sm { position: absolute; top: 6px; right: 6px; color: #c9c9c3; }
.install-pop .btn-ghost { color: #fff; border-color: transparent; }
.pop-arrow { position: absolute; left: 50%; bottom: -1.5rem; margin-left: -0.6rem; font-size: 1.3rem; color: var(--ball); animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.35rem); } }
.install-pop.has-arrow { bottom: calc(44px + env(safe-area-inset-bottom)); }