/* Phone shell (mobile redesign, Nov 2026): tab bar, menu, full-width search, short tour, shared-link welcome.
   Phone-only rules live inside @media (max-width: 760px); desktop is unchanged (its own top bar, with the same ≡ menu
   and red glass: css/desktop-header.css). js/shell.js builds the menu and the tab faces, app.js the search results. */

/* new pieces that exist only on a phone */
.menu-btn, .tab-face, .shell-hello, .linger-chip { display: none; }

/* ---- the tip jar's red glass, on every screen (where it sits: a phone's top row, below; a computer's top bar, beside its
   plate: css/desktop-header.css). No words, the site's red, a soft glint now and then so it's found: once after the page
   settles, then three more, two minutes apart, and that's all (a ring that fades and the faintest tilt; none when
   motion is turned down, at the end of this file). The later ones are a 2-minute cycle whose first 1.5% is the glint,
   so the glass rests between them. */
.tip-btn { display: grid; place-items: center; padding: 0; border: 2px solid #fff7e6; border-radius: 50%; background: var(--red); color: #fff; box-shadow: var(--shadow);
  animation: tipGlint 1.8s ease-out 3s 1, tipNudge 120s linear 60s 3; }
.tip-btn .ic { stroke-width: 2.2; }
.tip-btn:active { transform: scale(.94); }
@keyframes tipGlint {
  0% { box-shadow: var(--shadow), 0 0 0 0 rgba(163, 53, 44, .28); transform: none; }
  35% { transform: scale(1.04) rotate(-4deg); }
  100% { box-shadow: var(--shadow), 0 0 0 8px rgba(163, 53, 44, 0); transform: none; }
}
@keyframes tipNudge {
  0% { box-shadow: var(--shadow), 0 0 0 0 rgba(163, 53, 44, .28); transform: none; }
  0.5% { transform: scale(1.04) rotate(-4deg); }
  1.5%, 100% { box-shadow: var(--shadow), 0 0 0 8px rgba(163, 53, 44, 0); transform: none; }
}

/* the phone tour (js/tour.js, .tour.phone): Polly's card stays put, so no little ship sails between the stops; the
   spyglass's brass ring is thinner, so it doesn't reach over the neighbouring ≡ */
.tour.phone .tour-ship, .tour.phone .tour-sea { display: none; }
.tour.phone .tour-glass:not(.g2) { box-shadow: 0 0 0 3px #c9a86a, 0 0 0 5px rgba(109, 79, 19, .5), 0 0 18px 3px rgba(255, 236, 190, .35); }

/* ---- search results (every screen): what each result is, and a next step when nothing matches ---------------------- */
.sr-ic.kind { background: #eef1f4; border-color: var(--navy); color: var(--navy); }
.search-results li.sr-empty { padding-bottom: 2px; }
.search-results li.sr-suggest { gap: 10px; color: var(--navy); font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.search-results li.sr-suggest > .ic { flex: none; width: 22px; height: 22px; color: var(--red); }

/* ---- the ≡ menu (a phone's, and a computer's from the title: css/desktop-header.css): one plain list -------------- */
.shell-menu { display: flex; flex-direction: column; min-height: 100%; }
.sm-head { display: grid; gap: 2px; padding: 18px 68px 14px 20px; border-bottom: 1px solid var(--line); }
.sm-head b { font: 400 25px/1.1 var(--serif-sc); letter-spacing: .06em; color: var(--ink); }
.sm-head small { font: italic 15px/1.3 var(--serif); color: var(--ink-2); }
.sm-list { list-style: none; margin: 0; padding: 6px 0; }
.sm-list > li > button, .sm-list > li > a, .sm-lang > summary { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 6px 20px;
  border: 0; background: none; font: 600 16px/1.25 var(--sans); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
@media (hover: hover) { .sm-list > li > button:hover, .sm-list > li > a:hover, .sm-lang > summary:hover, .sm-lang li button:hover { background: rgba(51, 41, 31, .06); } }
.sm-list > li > button:active, .sm-list > li > a:active, .sm-lang > summary:active, .sm-lang li button:active { background: rgba(51, 41, 31, .08); }
.sm-list .ic { flex: none; width: 22px; height: 22px; color: var(--red); }
.sm-lang > summary { list-style: none; }
.sm-lang > summary::-webkit-details-marker { display: none; }
.sm-lang > summary em { margin-left: auto; font: 600 15px var(--sans); color: var(--ink-3); }
.sm-lang > summary .sm-chev { width: 18px; height: 18px; color: var(--ink-3); transition: transform .2s; }
.sm-lang[open] > summary .sm-chev { transform: rotate(180deg); }
.sm-lang ul { list-style: none; margin: 0 0 6px; padding: 0; }
.sm-lang li button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 0 20px 0 56px; border: 0; background: none;
  font: 500 15.5px var(--sans); color: var(--ink); text-align: left; }
.sm-lang li button[aria-current] { color: var(--red); font-weight: 700; }
.sm-lang li button .ic { width: 18px; height: 18px; color: var(--red); }
.sm-fine { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding: 14px 20px 18px; border-top: 1px solid var(--line); font: italic 14px var(--serif); color: var(--ink-3); }
.sm-fine .ic { width: 18px; height: 18px; color: var(--ink-3); }

@media (max-width: 760px) {
  /* ---- the frame (style.css's phone spec, with the tab bar): every tap target 48px, the right column 48px wide; the
     tab bar is 56px plus the gesture area (--ph-bar); the top row (≡ and the search) sits at --ph-top; panels that
     rise from the bottom start an edge above the tab bar; sheets sit a gap above it (--ph-sheet-bottom) */
  :root { --ph-tap: 48px; --ph-col: 48px; --ph-bar: calc(56px + var(--ph-sb));
    --ph-above-bar: calc(var(--ph-bar) + var(--ph-edge)); --ph-search-top: var(--ph-top); --ph-sheet-bottom: calc(var(--ph-bar) + 8px); }

  /* ---- top row: ≡ at the left, the tip jar's red glass at the right, the search between them ------------------- */
  .menu-btn { position: absolute; z-index: 7; left: var(--ph-left); top: var(--ph-top); display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
    border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel); box-shadow: var(--shadow); color: var(--ink); }
  .menu-btn .ic { width: 24px; height: 24px; }
  .search { left: calc(var(--ph-left) + 48px + var(--ph-gap)); right: calc(var(--ph-right) + 48px + var(--ph-gap)); top: var(--ph-top); }
  /* the tip jar's red glass (its look and its glint: the top of this file), a tap at the row's right end */
  .tip-btn { position: absolute; z-index: 7; right: var(--ph-right); top: var(--ph-top); width: 48px; height: 48px; }
  .tip-btn .ic { width: 24px; height: 24px; }
  .search input { height: 48px; border-radius: 24px; padding: 0 14px 0 42px; font-size: 16px; }
  .search-ic { left: 15px; top: 16px; }
  .search-results { top: 54px; max-height: 50vh; max-height: 50dvh; overflow-y: auto; overscroll-behavior: contain; }
  .search-results li { min-height: 52px; }
  .search-results li.sr-empty { min-height: 0; padding-top: 10px; }
  .search:focus-within { z-index: 41; }                                   /* its results open over a sheet, and over a toast */
  .drawer-open .search { opacity: 1; pointer-events: auto; }               /* the search stays in reach over a sheet */

  /* the title: under the top row on arrival (and the welcome), then it steps aside at the first touch (js/shell.js) */
  .cartouche { left: 50%; top: calc(var(--ph-top) + 48px + var(--ph-gap)); translate: -50% 0; white-space: nowrap; transition: opacity .5s ease, transform .5s ease; }
  #app.shell-quiet .cartouche, .room-open .cartouche { opacity: 0; transform: translateY(-8px) scale(.96); }
  /* …and it never sits over the chart while a sheet is open or a shared link's welcome line says what the site is */
  #app.drawer-open .cartouche, #app:has(.shell-hello:not(.out)) .cartouche { opacity: 0; transform: translateY(-8px) scale(.96); }

  /* ---- the tab bar: the top bar's buttons, each an icon over a label --------------------------------------------- */
  .hud { left: 0; right: 0; top: auto; bottom: 0; z-index: 8; height: var(--ph-bar); gap: 0; padding: 0 var(--ph-sr) var(--ph-sb) var(--ph-sl);
    background: var(--panel); border-top: 1px solid var(--line-2); box-shadow: 0 -10px 24px -16px rgba(60, 40, 15, .5); }
  .drawer-open .hud { opacity: 1; pointer-events: auto; }                  /* the tabs stay while a sheet is open */
  #app .hud > .hud-btn, #app .hud > .rank, #app .hud:has(#academyBtn) > #filtersBtn {
    position: relative; flex: 1 1 0; min-width: min-content; width: auto; height: 56px; margin: 0; padding: 6px 3px 5px; gap: 3px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink-2); container-type: normal; }
  #filtersBtn { order: 1; } #rankBtn { order: 2; } #crewsBtn { order: 3; } #boatshowBtn { order: 4; } #workshopBtn { order: 5; } #rumBtn { order: 6; } #academyBtn { order: 7; }
  #app .hud .ic, #app .hud .rum-btn .ic { width: 24px; height: 24px; color: currentColor !important; }
  /* the label under the icon (Crews' and Academy's own names, shown again; Explore's; the faces' labels) */
  #app .hud > button > span:not(.tab-face), #app .hud .tab-lbl, #app .hud:has(#academyBtn) #filtersBtn span {
    display: block; position: static; width: auto; height: auto; overflow: hidden; clip-path: none; max-width: 100%;
    font: 600 12px/1.15 var(--sans); letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; }
  /* Passport and Games show their phone face instead of the rank and the Rum Cask */
  #rankBtn > :not(.tab-face), #rumBtn > :not(.tab-face) { display: none !important; }
  #app .hud .tab-face { display: contents; }
  #app .hud > button:hover { background: none; }
  #app .hud > button:active { background: rgba(51, 41, 31, .06); }
  /* the open page's tab: ink-red, with a mark along its top edge */
  #app .hud > button[aria-current] { color: var(--red); }
  #app .hud > button[aria-current]::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--red); }
  /* the ribbon (js/shell.js fitTabs): six tabs, or names that don’t fit side by side. Each tab keeps its own width
     (its icon and whole name, at least 64px; a little more where the bar has room to spare) and the bar scrolls
     sideways with the finger, snapping to tabs; a soft fade at an edge that has more, with a small chevron in it (a
     tab can end right at the edge, and then nothing of the next one peeks out). .tabs-measure: each tab's own width,
     measured for a moment. */
  #app .hud.tabs-measure > button, #app .hud.tabs-measure:has(#academyBtn) > #filtersBtn { flex: none; width: max-content; min-width: 0; padding: 6px 3px 5px; }
  #app .hud.tabs-measure > button > span:not(.tab-face), #app .hud.tabs-measure .tab-lbl, #app .hud.tabs-measure:has(#academyBtn) #filtersBtn span { max-width: none; overflow: visible; }
  #app .hud.ribbon { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 30px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #app .hud.ribbon::-webkit-scrollbar { display: none; }
  #app .hud.ribbon > button, #app .hud.ribbon:has(#academyBtn) > #filtersBtn { flex: 1 0 auto; min-width: 64px; padding: 6px 12px 5px; scroll-snap-align: start; }
  #app .hud.ribbon > button > span:not(.tab-face), #app .hud.ribbon .tab-lbl, #app .hud.ribbon:has(#academyBtn) #filtersBtn span { max-width: none; overflow: visible; text-overflow: clip; }
  #app .hud.ribbon::before, #app .hud.ribbon::after { content: ''; position: sticky; z-index: 2; flex: none; width: 34px; height: 56px; pointer-events: none; opacity: 0; transition: opacity .2s; }
  #app .hud.ribbon::before { order: -1; left: 0; margin-right: -34px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23655440' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 2.5L4 6l3.5 3.5'/%3E%3C/svg%3E") left 2px center / 12px 12px no-repeat,
      linear-gradient(to right, var(--panel) 35%, rgba(248, 242, 227, 0)); }
  #app .hud.ribbon::after { order: 99; right: 0; margin-left: -34px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23655440' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 2.5L8 6l-3.5 3.5'/%3E%3C/svg%3E") right 2px center / 12px 12px no-repeat,
      linear-gradient(to left, var(--panel) 35%, rgba(248, 242, 227, 0)); }
  #app .hud.ribbon.fade-l::before, #app .hud.ribbon.fade-r::after { opacity: 1; }

  /* badges and marks beside the icon: new episodes (a count), news in the quests (a gold dot), a course set */
  #app .hud .hud-badge { position: absolute; top: 3px; left: calc(50% + 7px); right: auto; height: 18px; min-width: 18px; padding: 0 5px; font-size: 11px; }
  .tab-new { position: absolute; top: 5px; left: calc(50% + 8px); width: 11px; height: 11px; border-radius: 50%; background: #d9a441; box-shadow: 0 0 0 2px var(--panel); }
  #filtersBtn.on-course::after, #filtersBtn.pending::after { top: 6px; right: auto; left: calc(50% + 8px); }

  /* ---- the right column: the compass on top of the map tools, a tap wide, an edge above the tab bar -------------- */
  .mapctl { right: var(--ph-right); bottom: var(--ph-above-bar); width: var(--ph-col); }
  .compass { right: var(--ph-right); top: auto; bottom: calc(var(--ph-above-bar) + 3 * var(--ph-tap) + 2px + var(--ph-gap)); }
  .coach button { min-height: 44px; }

  /* the small print and the floating language pill live in the ≡ menu */
  .imprint, .lang-pill.floating { display: none !important; }

  /* ---- Explore's Chart Room and the winds: bottom sheets like a port's (js/sheet.js, app.js roomSheet/windsSheet), from
     under the search row down to a gap above the tab bar, which they slide under; they rest lower (the Chart Room at
     60% of the screen, the winds at 42%: the chart stays in sight), their grip and header drag them, a tap on the
     grip switches peek and full, and at full their content scrolls. Closed, they're hidden as before. -------------- */
  #app .chartroom, #app .wind-panel { top: calc(var(--ph-top) + 48px + var(--ph-gap)); bottom: var(--ph-sheet-bottom); left: calc(8px + var(--ph-sl)); right: calc(8px + var(--ph-sr));
    width: auto; max-height: none; padding-top: 0; border-radius: 20px 20px 16px 16px; overflow-x: hidden; overflow-y: hidden; overscroll-behavior: contain;
    touch-action: none; transition: transform .32s cubic-bezier(.2, .8, .2, 1); -webkit-tap-highlight-color: transparent; scrollbar-width: none; }
  #app .chartroom.sheet-full, #app .wind-panel.sheet-full { overflow-y: auto; touch-action: pan-y; }
  #app .chartroom.sheet-full.at-top, #app .wind-panel.sheet-full.at-top { touch-action: pan-down; }
  #app .chartroom.dragging, #app .wind-panel.dragging { transition: none; }
  .sh-grip { position: sticky; top: 0; z-index: 4; display: flex !important; justify-content: center; align-items: flex-start; width: calc(100% + 32px); height: 22px;
    margin: 0 -16px; padding: 9px 0 0; border: 0; border-radius: 20px 20px 0 0; background: var(--panel); cursor: grab; touch-action: none; }
  .sh-grip i { width: 36px; height: 4px; border-radius: 99px; background: var(--line-2); transition: width .2s, background .2s; }
  .dragging > .sh-grip i { width: 48px; background: var(--ink-3); }
  .sh-grip:focus-visible { outline-offset: -4px; }
  .wind-panel .wp-top { top: 22px; }                                      /* stuck under the grip */
  /* their taps: the Chart Room's fold, tabs and ideas; the winds' ×, months (two rows of six) and winds */
  .chartroom .cr-toggle, .wind-panel .wp-head .icon-btn { width: 44px; height: 44px; margin-right: -6px; }
  .chartroom .cr-tabs button { height: 44px; }
  .chartroom .jr-seg button { height: 40px; }
  .chartroom .jr-idea { height: 40px; }
  .wind-panel .wp-strip { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .wind-panel .wp-strip button { min-height: 44px; align-content: center; }
  .wind-panel .wp-chip { height: 40px; }
  .wind-panel .wp-back { min-height: 44px; }
  /* (the panel's sheet, a gap above the tab bar at --ph-sheet-bottom, is mobile-panels.css's) */

  /* ---- a pull down at the top of a page, a dialog or a sheet scrolls nothing further and never reloads the page (the
     browser's pull-to-refresh): their scroll stays theirs, and the page itself takes none (the panel's sheet, the
     Chart Room's and the winds' have it already) ------------------------------------------------------------------- */
  html, body { overscroll-behavior-y: contain; }
  #modal > .modal-card { overscroll-behavior: contain; }

  /* ---- Passport, Crews and Games are tab pages: from the top of the screen down to the tab bar, which stays -------- */
  #modal.tab-page { inset: 0 0 var(--ph-bar) 0; padding: var(--ph-st) var(--ph-sr) 0 var(--ph-sl); place-items: stretch; }
  #modal.tab-page .modal-backdrop { background: var(--paper); backdrop-filter: none; }
  #modal.tab-page > .modal-card { width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; }

  /* ---- the ≡ menu: a sheet from the left, the whole height ------------------------------------------------------- */
  #modal.menu-open { padding: 0; place-items: stretch start; }
  #modal.menu-open > .modal-card { width: min(340px, 88vw); height: 100%; max-height: none; border-radius: 0 20px 20px 0; border-left: 0;
    padding: var(--ph-st) 0 var(--ph-sb) var(--ph-sl); transform: translateX(-28px); }
  #modal.menu-open.on > .modal-card { transform: none; }

  /* ---- a shared link's first visit: one line above the card -------------------------------------------------------- */
  /* (one line at 360px in every language: a short text, the tour a word; it sits over the little chart left above the
     sheet) */
  .shell-hello { position: absolute; z-index: 8; left: var(--ph-left); right: var(--ph-right); display: flex; align-items: center; gap: 6px;
    padding: 0 4px 0 14px; border-radius: 14px; background: #2b2219; color: #f4e6c0; box-shadow: var(--shadow); transition: opacity .3s; }
  .shell-hello p { margin: 0; flex: 1; min-width: 0; font: 500 13px/1.3 var(--sans); }
  .shell-hello .link-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; font-size: 13px; color: #f6d58a;
    text-decoration-color: rgba(246, 213, 138, .5); white-space: nowrap; }
  .shell-hello .link-btn .ic { width: 18px; height: 18px; }
  .shell-hello.out, .shell-hello.hide { opacity: 0; pointer-events: none; }

  /* ---- once: what the right column's icons and the Explore tab are (app.js railHint) ------------------------------- */
  .rail-caps { position: fixed; inset: 0; z-index: 9; pointer-events: none; transition: opacity .35s; }
  .rail-caps.out { opacity: 0; }
  .rail-cap { position: absolute; translate: 0 -50%; padding: 5px 11px; border-radius: 999px; background: #2b2219; color: #f4e6c0; box-shadow: var(--shadow);
    font: 600 13px/1.2 var(--sans); white-space: nowrap; animation: capIn .4s ease-out both; }
  .rail-cap.up { translate: none; max-width: 112px; white-space: normal; }       /* (on two lines, clear of the column's captions) */
  .rail-cap::after { content: ''; position: absolute; top: 50%; right: -5px; width: 10px; height: 10px; margin-top: -5px; background: inherit; rotate: 45deg; border-radius: 2px; }
  .rail-cap.up::after { top: auto; bottom: -5px; right: auto; left: 20px; margin: 0; }
  .rail-cap:nth-child(2) { animation-delay: .12s; } .rail-cap:nth-child(3) { animation-delay: .24s; } .rail-cap:nth-child(4) { animation-delay: .36s; }
  @keyframes capIn { from { opacity: 0; transform: translateX(8px); } }

  /* ---- a crew left on the chart after its sheet was dragged away (app.js lingerOn): a chip above the tab bar, left
     of the right column; its name brings the sheet back, its × clears the chart ------------------------------------- */
  .linger-chip { position: absolute; z-index: 8; left: var(--ph-left); bottom: var(--ph-above-bar); display: flex; align-items: center; height: 44px;
    max-width: calc(100% - var(--ph-left) - var(--ph-beside-col)); border-radius: 22px; border: 1px solid var(--line-2); background: var(--panel);
    box-shadow: var(--shadow); animation: capIn .3s ease-out both; }
  .linger-chip button { display: flex; align-items: center; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .linger-chip .lc-name { min-width: 0; gap: 8px; padding: 0 2px 0 14px; font: 700 14px var(--sans); }
  .linger-chip .lc-name > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .linger-chip .lc-name .ic { flex: none; width: 18px; height: 18px; color: var(--red); }
  .linger-chip .lc-x { flex: none; justify-content: center; width: 44px; color: var(--ink-3); }
  .linger-chip .lc-x .ic { width: 18px; height: 18px; }
  #app:has(.linger-chip) .coach { display: none; }                         /* (the first-visit hint's place: the chip has it) */

  /* ---- toasts: never over YouTube's consent text (the player's gate): at the foot of the screen while it shows ----- */
  body:has(#modal:not([hidden]) .th-gate) .toasts { top: auto; bottom: calc(var(--ph-sb) + 16px); }

  /* ---- the phone tour: Polly's card in one place, above the tab bar; its buttons a tap tall ------------------------- */
  .tour-card.sheet-dock { left: var(--ph-left); right: var(--ph-right); width: auto; bottom: calc(var(--ph-bar) + 12px); top: auto; }
  .tour-card.sheet-dock .tc-polly { width: 48px; height: 48px; }
  .tour-card.sheet-dock .tc-polly .polly { width: 40px; height: 40px; }
  .tour-card.sheet-dock .tc-head h3 { font-size: 21px; }
  .tour-card.sheet-dock .tc-text { margin: 8px 0 4px; font-size: 15px; line-height: 1.45; }
  .tour-card.sheet-dock .tc-foot .btn { height: 44px; padding: 0 16px; font-size: 14px; }
  .tour-card.sheet-dock .tc-foot .link-btn { min-height: 44px; }
  /* the entries with "Skip": the knots give way (the kicker says "Log entry 2 of 4") and Back is an arrow, so the
     skip link keeps one line in every language */
  .tour-card.sheet-dock .tc-foot:has(.tc-skip) .tc-knots { display: none; }
  .tour-card.sheet-dock .tc-foot .tc-back-ic { flex: none; width: 44px; padding: 0; }
  .tour-card.sheet-dock .tc-back-ic .ic { width: 20px; height: 20px; }
  /* the last entry: Spin the compass on a row of its own above, so Back and Set sail stay on the bottom row, where
     Back and Next were */
  .tour-card.sheet-dock .tc-foot.last .tc-knots { order: -2; }
  .tour-card.sheet-dock .tc-foot.last [data-t="spin"] { order: -1; flex-basis: 100%; }

  /* ---- taps a finger can hit (44px): where the drawing stays small, the button's box grows and its margins take
     the growth back, so the line and the layout don't move ------------------------------------------------------ */
  /* the welcome card: the terms link in its sentence, the language links in their row */
  .tour-card .tc-legal .link-btn, .tour-card .lang-links .link-btn, .gate-card small .link-btn, .gate-card p a:not(.btn) {
    display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; margin-block: -13px; vertical-align: middle; }
  .tour-card .lang-links .link-btn { padding-inline: 4px; margin-inline: -4px; }
  .tour-card .lang-links { row-gap: 8px; }
  /* the shell's × buttons: the dialogs', the player's, the Crews and Games pages' */
  .modal-x, .theatre .th-top .icon-btn, .modal-card .cp-head > .icon-btn, .modal-card .lk-head > .icon-btn { width: 44px; height: 44px; }
  .modal-x::after, .theatre .th-top .icon-btn::after { inset: -2px; }
  .modal-x { right: 8px; top: 8px; }
  /* the player's consent gate, and the buttons on a clue card */
  .gate-actions .btn { min-height: 44px; }
  .toast.card .tc-btns .btn { min-height: 44px; }
  .toast-undo { position: relative; }
  .toast-undo::after { content: ''; position: absolute; inset: -12px -6px; }
  /* Explore's Save / Clear (and its other text links), the player's Subscribe, Like and crew, the privacy notes' "Clear
     my logbook": a tap tall, the line as it was (the port's and the route's links: mobile-panels.css) */
  .chartroom .link-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin-block: -11px; }
  .theatre .th-actions .btn { min-height: 44px; }
  .theatre .crew-link.bare { min-height: 44px; margin-block: -13px; vertical-align: middle; }
  .modal-card .btn.sm[data-act="reset"] { height: 44px; padding: 0 16px; }
}

/* ---- the Sail Academy, the Boat Show and the Workshop (when switched on) are tab pages like Passport, Crews and Games:
   above the tab bar, which stays (the Boat Show's and the Workshop's own rules: css/boatshow.css, css/workshop.css) */
@media (max-width: 760px) {
  body.academy-on .game-overlay.academy { bottom: var(--ph-bar); }
}
/* the tip glass's glint (a phone's and a computer's): none when the visitor has motion turned down */
@media (prefers-reduced-motion: reduce) { .tip-btn { animation: none; } }
/* Readable on a phone (as at the end of css/cabin.css): the old italic is hard to read small, so on a phone the words to
   read are upright. Names keep the serif, upright (search results at 17px); sentences are Manrope at 15 to 16px, lines
   beside them 14px, nothing under 13px. Lettering on the chart (places, seas, winds, routes, the scale) stays italic, as
   on a chart, and so do Latin species names. This file loads after css/style.css and css/views.css, so these win. */
@media (max-width: 760px) {
  .search-results b { font: 400 17px/1.2 var(--serif); }
  .near-name, .place-chip, .wp-chip, .wp-month b, .bz-where, .loading-inner { font-style: normal; }
  .cp-none, .row-meta.muted, .bt-letter .bt-sign, .bz-prompt, .pq-mem.unmet .pq-mem-top small { font-style: normal; }
  .c-sub { font: 400 14.5px/1.4 var(--sans); }
  .th-where { font: 500 14px var(--sans); }
  .wp-tip { font: 400 15px/1.45 var(--sans) !important; }
  .nt-date { font: 500 13.5px var(--sans); }
  .tc-aside { font: 400 15px/1.45 var(--sans); }
  .qd-speaker { font: 600 14px var(--sans); }
  .pq-log small { font-style: normal; font-size: 13px; }
  .pq-log li.needed.ready p { font: 400 15px/1.45 var(--sans); }
  .loupe-far { font-style: normal; font-size: 13px; }
  .bz-wait { font: 400 15px/1.4 var(--sans) !important; }
  .m5v-drag { font: 400 13px var(--sans); }
  .m5v-iucn em { font: 400 14px var(--sans); }
  .sm-head small { font: 400 14px/1.35 var(--sans); }
  .sm-fine { font: 400 13.5px var(--sans); }
  .coach { font-size: 13px; }                     /* the first-visit hint ("Tap a port to open it…") */
  .search-results small { font-size: 13px; }
}