/* Phones (up to 760 px). Loaded after planet.css, so these rules take the place of the desktop ones.
   "The globe first" (approved on 29/10/2026, renders/telemovel/): the globe is the content and everything else is a thin layer on it.
   The bar on top is one line; the question has no box and sits on a dark fade at the top of the screen; the hints and the search
   sit at the bottom, within reach of the thumb, on a second fade. Every box is as tight as its text. There are no zoom buttons
   (pinch to zoom) and the map credit is a small "i". The career picker, the archive and the Pro panel follow the same rules.
   Sizes: body text 11-13 px, controls 24-36 px tall, the question 16 px; what is typed in the search stays at 16 px. */
.cp-strip { display: none; }

@media (max-width: 760px) {
  :root { --t-q: 1rem; --edge: 1rem; }

  /* The bar on top, on one line: the globe icon, the modes in a segmented control, the points, the plan and "i" */
  .nav { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0.5rem; padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) 0.75rem 0; }
  .brand { font-size: 0; gap: 0; } /* the icon alone; the button keeps its label for screen readers */
  .brand svg { width: 1.25rem; height: 1.25rem; }
  .modes { grid-column: 2; grid-row: 1; justify-self: center; gap: 0; padding: 0.125rem; border-radius: 999px; background: rgba(127, 127, 127, 0.14); }
  .modes button { height: 1.625rem; padding: 0 0.6875rem; font-size: 0.75rem; border-radius: 999px; }
  .modes button[aria-pressed='true'] { background: rgba(255, 255, 255, 0.16); }
  .nav-tools { gap: 0.25rem; }
  .me { font-size: 0.6875rem; margin-right: 0.25rem; }
  #points-label { display: none; }
  .plan-chip { min-height: 1.5rem; padding: 0 0.5rem; font-size: 0.6875rem; }
  .icon-btn { width: 1.5rem; height: 1.5rem; }
  /* In a career, the way back is the arrow alone: "Careers" is already among the modes */
  .career-back { min-height: 1.75rem; padding: 0 0.375rem; border: 0; background: none; }
  .career-back span { display: none; }

  /* The fades: only the top and the bottom of the globe darken, where the text sits; the middle stays clear.
     --q-height is the height of the question on screen (src/main.js). */
  #globe-frame::before, #globe-frame::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
  #globe-frame::before { top: 0; height: calc(var(--nav-height, 2.75rem) + var(--q-height, 5.5rem) + 2.5rem); background: linear-gradient(to bottom, rgba(10, 10, 10, 0.96) 0%, rgba(10, 10, 10, 0.82) 60%, rgba(10, 10, 10, 0)); }
  #globe-frame::after { bottom: 0; height: 7.5rem; background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.6) 55%, rgba(10, 10, 10, 0)); }
  .career #globe-frame::after { height: 10rem; }

  /* Daily and careers: the question, without a box */
  #question { left: 0; right: 0; top: calc(var(--nav-height, 2.75rem) + 0.375rem); padding: 0 1rem; align-items: stretch; text-align: left; gap: 0.3125rem; pointer-events: none; }
  #question h1, .multi-moment #question h1 { max-width: none; font-size: var(--t-q); line-height: 1.24; letter-spacing: -0.01em; text-shadow: 0 1px 0.75rem rgba(0, 0, 0, 0.9); text-wrap: pretty; }
  .kicker { justify-content: flex-start; font-size: 0.6875rem; }
  #question .kicker { font-size: 0.625rem; gap: 0.375rem; letter-spacing: 0.01em; }
  .bars i { width: 0.75rem; height: 0.125rem; }
  .multi-moment #question::before { display: none; }
  /* The guesses: the ones left are dots, a miss is a small pill with its distance, the points still possible are plain text */
  #question .chips { justify-content: flex-start; align-items: center; gap: 0.25rem; pointer-events: auto; }
  #question .chip { height: 1.25rem; padding: 0 0.375rem; font-size: 0.6875rem; border-radius: 999px; gap: 0.25rem; backdrop-filter: none; }
  #question .chip small, #question .chip .mono { font-size: 0.625rem; }
  #question .chip.empty { width: 0.5rem; height: 0.5rem; padding: 0; font-size: 0; border-width: 1px; border-color: rgba(255, 255, 255, 0.45); background: none; }
  #question .chip:not(.empty):not(.wrong):not(.right) { border: 0; background: none; padding: 0 0 0 0.25rem; }

  /* In a career, who and how far on one flat line instead of a pill with three buttons: "Lionel Messi · step 3 of 12      Easy" */
  .player { width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 0.5rem; padding: 0; border: 0; border-radius: 0; background: none; font-size: 0.6875rem; }
  .player b { font-weight: 600; }
  .player .difficulty { margin-left: auto; }
  .player .difficulty button:not([aria-pressed='true']) { display: none; }
  .player .difficulty button[aria-pressed='true'] { padding: 0; border-radius: 0; background: none; color: var(--accent); font: 500 0.6875rem var(--font); }

  /* No zoom buttons: on a phone the globe zooms with two fingers */
  .zoom, .multi-moment .zoom { display: none; }

  /* The map credit: folded into a small "i" (src/vector-globe.js folds it on narrow screens); tapping it opens the credit */
  #globe .maplibregl-ctrl-bottom-right { bottom: calc(env(safe-area-inset-bottom, 0px) + 4.875rem); }
  .career #globe .maplibregl-ctrl-bottom-right { bottom: calc(env(safe-area-inset-bottom, 0px) + 8rem); }
  /* with a hint open, the "i" moves above it */
  body:has(#hint:not([hidden])) #globe .maplibregl-ctrl-bottom-right { bottom: calc(env(safe-area-inset-bottom, 0px) + 7rem); }
  .career:has(#hint:not([hidden])) #globe .maplibregl-ctrl-bottom-right { bottom: calc(env(safe-area-inset-bottom, 0px) + 10.25rem); }
  .maplibregl-ctrl-attrib { font-size: 0.625rem; }
  .maplibregl-ctrl-attrib.maplibregl-compact { max-width: calc(100vw - 7rem); }
  #globe .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; margin: 0 0.5rem 0.25rem 0; border-radius: 50%; background: transparent; }
  #globe .maplibregl-ctrl-attrib-button { width: 1.25rem; height: 1.25rem; background-size: 0.875rem; background-repeat: no-repeat; background-position: center; }
  #globe .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-button { background-color: transparent; opacity: 0.4; }
  #globe .maplibregl-ctrl-attrib.maplibregl-compact-show { background: color-mix(in srgb, var(--panel) 94%, transparent); color: var(--muted); }
  #globe .maplibregl-ctrl-attrib.maplibregl-compact-show a { color: var(--fg); }

  /* Hints and search, at the bottom: the hints with a thin outline, the search in a capsule */
  .dock { left: 0.625rem; right: 0.625rem; width: auto; transform: none; bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem); gap: 0.3125rem; }
  .career .dock { bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5rem); }
  body:has(#result:not([hidden])) .dock { visibility: hidden; } /* nothing shows through the result sheet */
  .hints { justify-content: flex-start; gap: 0.25rem; }
  .hints button { flex: 0 1 auto; justify-content: center; gap: 0.25rem; height: 1.5rem; padding: 0 0.5rem; font-size: 0.6875rem; border: 1px solid var(--line); border-radius: 0.375rem; background: color-mix(in srgb, var(--panel) 80%, transparent); }
  .hints small { font-size: 0.5625rem; }
  /* An open hint: one line with a blue dot, outlined like the hint buttons so it is not bare text on the globe */
  .hint { font-size: 0.75rem; line-height: 1.3; padding: 0.3125rem 0.5rem; border: 1px solid var(--line); border-radius: 0.375rem; background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--fg); }
  .hint::before { content: ''; display: inline-block; width: 0.375rem; height: 0.375rem; margin: 0 0.375rem 0.0625rem 0; border-radius: 50%; background: var(--accent); }
  .dock .search { border-radius: 1.125rem; background: color-mix(in srgb, var(--panel) 97%, transparent); } /* the map credit must not show through the results */
  .search-row { min-height: 2.25rem; padding: 0 0.375rem 0 0.75rem; gap: 0.5rem; }
  .search-row svg { width: 1rem; height: 1rem; }
  .search-row input { font-size: 1rem; } /* what is typed stays at 16 px: iOS zooms the whole page when a smaller field is focused */
  .search-row input::placeholder { font-size: 0.75rem; }
  .results button { padding: 0.3125rem 0.5rem; font-size: 0.8125rem; }
  .results small { font-size: 0.6875rem; }

  /* The career timeline, without a box, on the bottom fade */
  .timeline { left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 0.375rem); padding: 0.25rem 0.875rem; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .timeline li { flex: 0 0 6.25rem; font-size: 0.6875rem; padding-top: 0.75rem; }
  .timeline b { font-size: 0.625rem; }

  /* The stadium reveal: the question without a box, the photo as large as the space allows, the name and the actions in a short bar */
  body:not(.multi-moment) .reveal-question { display: flex; left: 0; right: 0; top: calc(var(--nav-height, 2.75rem) + 0.375rem); width: auto; gap: 0; padding: 0 1rem; }
  body:not(.multi-moment) .reveal-question::before { display: none; }
  body:not(.multi-moment) .reveal-question .kicker { display: none; }
  body:not(.multi-moment) #reveal-question-text { font-size: var(--t-q); line-height: 1.24; letter-spacing: -0.01em; text-shadow: 0 1px 0.75rem rgba(0, 0, 0, 0.9); text-wrap: pretty; }
  body:not(.multi-moment) .reveal-bar { left: 0.625rem; right: 0.625rem; width: auto; transform: none; bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem); flex-wrap: wrap; padding: 0.4375rem 0.4375rem 0.4375rem 0.75rem; gap: 0.25rem 0.375rem; border-radius: 1rem; }
  .reveal-bar .reveal-info { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.375rem; }
  .reveal-info h2 { margin: 0; font-size: 0.9375rem; line-height: 1.25; letter-spacing: -0.01em; }
  .reveal-info p { font-size: 0.6875rem; line-height: 1.3; }
  .reveal-info .credit { flex-basis: 100%; font-size: 0.5625rem; opacity: 0.8; } /* always shown: the photo licences ask for it */
  .reveal-bar > .btn { min-height: 2.125rem; font-size: 0.8125rem; padding: 0 0.75rem; border-radius: 999px; }
  #reveal-confirm { order: 2; flex: 2 1 0; }
  #back { order: 1; flex: 0 0 auto; }
  .revealing .modes { display: none; } /* more room for the photo */
  #ring text { display: none; } /* the altitude figure and the coordinates would take room from the photo */

  /* The result: a low sheet that rises from the bottom, the points beside the title; the globe stays visible above it */
  .result { align-items: end; justify-items: stretch; background: transparent; }
  .result section { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 0.0625rem; align-items: center; text-align: left; border-radius: 1rem 1rem 0 0; padding: 0.75rem 1rem calc(env(safe-area-inset-bottom, 0px) + 0.625rem); background: color-mix(in srgb, var(--panel) 98%, transparent); }
  .result .kicker { grid-column: 1; grid-row: 1; justify-content: flex-start; }
  .result h2 { grid-column: 1; grid-row: 2; font-size: 1rem; }
  #result-detail { grid-column: 1; grid-row: 3; font-size: 0.6875rem; }
  .points { grid-column: 2; grid-row: 1 / 4; font-size: 1.625rem; line-height: 1; }
  .result .row, .share-menu { grid-column: 1 / -1; }
  .result .row { flex-wrap: nowrap; gap: 0.375rem; margin-top: 0.5rem; }
  .result .row .btn { flex: 1 1 0; min-height: 2.125rem; padding: 0 0.625rem; font-size: 0.8125rem; border-radius: 999px; }

  /* Career picker: the globe shows in the middle; the player and the levels on top, the players and the start at the bottom */
  .career-picker::before { background: linear-gradient(to bottom, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.9) 38%, rgba(10, 10, 10, 0.35) 56%, rgba(10, 10, 10, 0.35) 66%, rgba(10, 10, 10, 0.92) 84%, rgba(10, 10, 10, 0.98) 100%); }
  .cp-left { left: 1rem; right: 1rem; width: auto; top: calc(var(--nav-height, 2.75rem) + 0.625rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0; }
  .cp-kick { grid-column: 1; grid-row: 1; font-size: 0.6875rem; gap: 0.375rem; }
  .cp-kick::before { width: 0.75rem; }
  #cp-years { grid-column: 2; grid-row: 1; font-size: 0.6875rem; }
  .cp-first { grid-column: 1 / -1; grid-row: 2; margin-top: 0.375rem; font-size: 0.9375rem; }
  .cp-last { grid-column: 1 / -1; grid-row: 3; font-size: 2.25rem; }
  /* the three levels side by side, outlined like the hints */
  .cp-levels { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; width: 100%; margin-top: 0.75rem; }
  .cp-levels button, .cp-levels button:last-child { flex-direction: column; align-items: flex-start; gap: 0.0625rem; padding: 0.375rem 0.5rem 0.4375rem; border: 1px solid var(--line); border-radius: 0.5rem; background: color-mix(in srgb, var(--panel) 80%, transparent); font-size: 0.8125rem; font-weight: 500; }
  .cp-levels button::before { display: none; }
  .cp-levels button small { display: flex; align-items: center; margin-left: 0; font-size: 0.625rem; }
  .cp-levels button small .lock { width: 0.6875rem; height: 0.6875rem; margin-left: 0.25rem; }
  .cp-levels button[aria-pressed='true'] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
  .cp-strip { display: block; grid-column: 1 / -1; grid-row: 5; margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
  .cp-tabs { left: 1rem; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 3.375rem); gap: 0.25rem; padding-right: 1rem; overflow-x: auto; scrollbar-width: none; }
  .cp-tabs button, .cp-tabs button.single, .cp-tabs button[aria-pressed='true'] { flex: 0 0 auto; width: auto; min-width: 0; flex-direction: row; align-items: baseline; justify-content: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border: 1px solid var(--line); border-radius: 0.5rem; background: color-mix(in srgb, var(--panel) 80%, transparent); }
  .cp-tabs button small { font-size: 0.625rem; }
  .cp-tabs button b { font-size: 0.8125rem; }
  .cp-tabs button[aria-pressed='true'] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
  .cp-tabs .cp-soon-tag { position: static; align-self: center; margin-left: 0.125rem; font-size: 0.625rem; }
  .cp-coming-soon { bottom: 10rem; gap: 0.75rem; }
  .cp-coming-soon h2 { font-size: 2rem; }
  .cp-coming-soon p { font-size: 0.875rem; }
  .cp-go { left: 1rem; right: 1rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem); align-items: stretch; gap: 0.25rem; }
  .cp-go .btn { width: 100%; min-height: 2.25rem; margin-top: 0.125rem; font-size: 0.875rem; border-radius: 999px; }
  .cp-go .cp-meta { text-align: center; }
  #cp-summary { display: none; } /* "12 moments · Easy" repeats the chosen level */
  #cp-progress { font-size: 0.6875rem; }
  /* the saved / completed line adds a row to the bottom block, so the player buttons move up with it */
  .career-picker:has(#cp-progress:not([hidden])) .cp-tabs { bottom: calc(env(safe-area-inset-bottom, 0px) + 4.5rem); }

  /* Archive: a dark page that scrolls. The desktop shade is a layer over the whole screen; on a phone it would paint over the text,
     so the page has its own background. The title, the range and the total share one band. */
  .archive::before { display: none; }
  .archive { background: rgba(10, 10, 10, 0.9); }
  .ar-left { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0; padding: calc(var(--nav-height, 2.75rem) + 0.625rem) 1rem 0; }
  .ar-left > .cp-kick { display: none; }
  .ar-title { grid-column: 1; grid-row: 1; margin: 0; font-size: 1.5rem; }
  #ar-range { grid-column: 1; grid-row: 2; font-size: 0.6875rem; }
  .ar-total { grid-column: 2; grid-row: 1 / 3; margin: 0; text-align: right; }
  .ar-total small { font-size: 0.625rem; }
  .ar-total b { font-size: 1.25rem; }
  .ar-total b span { font-size: 0.6875rem; margin-left: 0.25rem; }
  .ar-filters { grid-column: 1 / -1; grid-row: 3; flex-wrap: nowrap; margin-top: 0.625rem; gap: 0.25rem; scrollbar-width: none; }
  .ar-filters button { white-space: nowrap; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 0.5rem; font-size: 0.75rem; }
  .ar-filters button small { font-size: 0.625rem; }
  .pro-line { grid-column: 1 / -1; grid-row: 4; margin-top: 0.5rem; font-size: 0.6875rem; }
  .ar-list { padding: 0.625rem 1rem 2rem; }
  .ar-item { margin-bottom: 0.3125rem; }
  .ar-row { padding: 0.4375rem 0.75rem; border-radius: 0.625rem; gap: 0.5rem; }
  .ar-l b { font-size: 0.9375rem; }
  .ar-r b { font-size: 0.875rem; }
  .ar-l > span, .ar-r > span { font-size: 0.6875rem; }
  /* a locked day on one line: "#9  Pro · Locked ........ Unlock" */
  .ar-item.locked .ar-row { padding-top: 0.375rem; padding-bottom: 0.375rem; }
  .ar-item.locked .ar-l, .ar-item.locked .ar-r { flex-direction: row; align-items: baseline; gap: 0.5rem; }
  .ar-item.locked .ar-r b { display: none; }
  .ar-pad { padding: 0.375rem 0 0.25rem; }
  .ar-q { padding: 0.375rem 0.625rem; border-radius: 0.5rem; }
  .ar-q b { font-size: 0.75rem; }
  .ar-q small { font-size: 0.6875rem; }
  .ar-acts { margin-top: 0.375rem; }
  .ar-acts .btn, .ar-confirm .btn { min-height: 2rem; font-size: 0.8125rem; border-radius: 999px; }
  .ar-confirm { padding: 0.5rem 0.625rem; font-size: 0.75rem; }

  /* Pro, Account and About: opaque (nothing of the screen below reads through), a small title, the sections in a segmented
     control like the modes, the cards as tight as their text */
  .hub { padding: 0.625rem 1rem 1.5rem; background: var(--bg); }
  .hub-side { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 0.625rem; }
  .hub .cp-kick { display: none; }
  .hub .ar-title { margin: 0; padding-right: 2.25rem; font-size: 1.5rem; line-height: 1.1; }
  .hub .cp-meta { margin-top: 0.125rem; padding-right: 2.25rem; font-size: 0.6875rem; }
  .hub-close { top: 0.625rem; right: 1rem; width: 1.75rem; height: 1.75rem; font-size: 1.125rem; }
  .hub-tabs { display: flex; gap: 0; width: 100%; margin-top: 0.625rem; padding: 0.125rem; border-radius: 999px; background: rgba(127, 127, 127, 0.14); }
  .hub-tabs button { flex: 1; height: 1.75rem; padding: 0; border: 0 !important; border-radius: 999px; font-size: 0.75rem; color: var(--muted); }
  .hub-tabs button[aria-pressed='true'] { background: rgba(255, 255, 255, 0.16); color: var(--fg); }
  .hub-body { padding-bottom: 0.5rem; }
  .hub-card { margin-bottom: 0.5rem; padding: 0.75rem 0.875rem; border-radius: 0.75rem; }
  .hub-card h3 { margin-bottom: 0.375rem; font-size: 0.9375rem; }
  .hub-card p { margin-bottom: 0.5rem; font-size: 0.8125rem; line-height: 1.45; }
  .hub-card p.hub-fine { font-size: 0.6875rem; }
  .hub-list { margin-bottom: 0.625rem; padding-left: 1rem; font-size: 0.8125rem; line-height: 1.55; }
  .hub-buy { gap: 0.5rem; padding-top: 0.625rem; }
  .hub-price { font-size: 1.5rem; }
  .hub-price small { font-size: 0.6875rem; }
  .hub-row { gap: 0.75rem; padding: 0.4375rem 0; font-size: 0.8125rem; }
  .hub .btn { min-height: 2.25rem; padding: 0 1rem; font-size: 0.875rem; border-radius: 999px; }
  .hub-social { gap: 0.5rem 1rem; font-size: 0.8125rem; }
}

/* Narrow phones (320-359 px): the bar on top keeps to one line without the globe icon ("Daily" goes to the same place) */
@media (max-width: 359px) {
  .brand { display: none; }
  .modes button { padding: 0 0.5rem; font-size: 0.6875rem; }
}

/* Short phones (iPhone SE and similar): the line under the levels goes, so the players and the start keep clear of them */
@media (max-width: 760px) and (max-height: 700px) {
  .cp-strip { display: none; }
}