/* The game's menus: the title screen and main menu (index.html) with its chapter select, team and extras screens, and
   the pieces play.html's start, pause and complete screens share with it (game buttons, icons, chapter tiles).
   Touch first: every control is at least 44 px, the layouts follow the safe areas, and the selected control (focus or
   hover) gets the same glow, so the arrow keys and a mouse feel the same. */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --glass: rgba(8, 17, 12, 0.66);
  --glass-hi: rgba(16, 28, 21, 0.84);
  --edge: rgba(255, 255, 255, 0.13);
  --sel: #ffb15c;
  --sel-glow: 0 0 0 1px rgba(255, 177, 92, 0.4), 0 0 22px rgba(255, 150, 60, 0.25);
  --call: #3ddc84;
}

/* ---- icons: 24-unit line drawings in the text colour ---- */
.ico { width: 1.35em; height: 1.35em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--solid { fill: currentColor; stroke: none; }

/* ---- the game button: a glass bar with an icon, a label and a line under it ---- */
.gbtn {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; margin: 0;
  padding: 8px 18px 8px 16px; border: 1px solid var(--edge); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)), var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text); font: 600 1rem/1.2 var(--font-body); text-align: left; text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gbtn::before { content: ''; position: absolute; left: 5px; top: 50%; width: 4px; height: 0; border-radius: 4px; background: var(--sel); transform: translateY(-50%); transition: height 0.14s ease; }
.gbtn:hover, .gbtn:focus-visible { border-color: rgba(255, 190, 110, 0.85); transform: translateX(3px); box-shadow: var(--sel-glow), 0 8px 22px rgba(0, 0, 0, 0.35); outline: none; }
.gbtn:hover::before, .gbtn:focus-visible::before { height: 56%; }
.gbtn:active { transform: translateX(3px) scale(0.985); filter: brightness(1.1); }
.gbtn > .ico { color: #ffd48f; }
.gbtn__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gbtn__label { font-size: 1.05rem; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbtn__sub { font-size: 0.78rem; font-weight: 500; color: #b9c8bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbtn--primary, .gbtn.cbtn--primary { background: linear-gradient(135deg, #ffa458, #f06a1e 70%, #d9571a); border-color: rgba(255, 214, 160, 0.55); color: #1f0d03; box-shadow: 0 10px 28px rgba(240, 106, 30, 0.35); }
.gbtn--primary > .ico, .gbtn--primary .gbtn__sub, .gbtn.cbtn--primary > .ico { color: rgba(31, 13, 3, 0.82); }
.gbtn--primary::before, .gbtn.cbtn--primary::before { background: #fff3e0; }
.gbtn--primary:hover, .gbtn--primary:focus-visible, .gbtn.cbtn--primary:hover, .gbtn.cbtn--primary:focus-visible { border-color: #fff1dc; box-shadow: 0 0 0 2px rgba(255, 241, 220, 0.75), 0 0 30px rgba(255, 140, 50, 0.5), 0 10px 28px rgba(0, 0, 0, 0.35); }
.gbtn--tall { min-height: 68px; }
.gbtn--tall .gbtn__label { font-size: 1.22rem; font-weight: 700; }
.gbtn--video > .ico { color: var(--call); }
.gbtn--voice > .ico { color: #8ff0b5; }
.gbtn--call { background: linear-gradient(135deg, #52e896, #22b565); border-color: rgba(200, 255, 220, 0.55); color: #062112; box-shadow: 0 10px 28px rgba(61, 220, 132, 0.3); }
.gbtn--call > .ico { color: #062112; }
.gbtn--call::before { background: #eafff2; }
.gbtn--ghost { background: rgba(255, 255, 255, 0.03); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.gbtn--small { min-height: 48px; padding: 6px 12px; gap: 10px; }
.gbtn--small .gbtn__label { font-size: 0.95rem; }
.gbtn--small .gbtn__sub { font-size: 0.7rem; }

/* ---- the title screen ---- */
html:has(> body.menu-body) { height: 100%; }
body.menu-body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #06100a; -webkit-tap-highlight-color: transparent; }
.title { position: fixed; inset: 0; overflow: hidden; }
.title__bg { position: absolute; inset: 0; overflow: hidden; background: #0c1d12; }
.title__art { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: 60% 45%; animation: title-drift 38s ease-in-out infinite alternate; }
@keyframes title-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.4%, -1%); } }
.title__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 12, 8, 0.6) 0%, rgba(5, 12, 8, 0.25) 30%, rgba(5, 12, 8, 0.45) 55%, rgba(5, 12, 8, 0.9) 100%); transition: background-color 0.3s ease; }
#fireflies { position: absolute; inset: 0; width: 100%; height: 100%; }
.title__cara { position: absolute; left: 50%; bottom: calc(var(--sab) - 3vh); height: min(80vh, 175vw); width: auto; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.65)); transition: opacity 0.3s ease; }
.title:not([data-screen="main"]) .title__shade { background-color: rgba(4, 10, 7, 0.78); }
.title:not([data-screen="main"]) #fireflies { visibility: hidden; }
.title:not([data-screen="main"]) .title__cara { opacity: 0; }
.title:not([data-screen="main"]) .title__corner { display: none; }
.title__corner {
  position: absolute; z-index: 5; top: calc(12px + var(--sat)); right: calc(12px + var(--sar)); width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--edge); background: var(--glass); color: #fff;
  cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.title__corner:hover, .title__corner:focus-visible { border-color: var(--sel); box-shadow: var(--sel-glow); outline: none; }

/* screens: one at a time, each a hash (game/menu.js) */
.screen {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
}
.screen.is-entering { animation: screen-in 0.24s ease-out both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* main menu: the name at the top, the menu at the bottom where a thumb reaches it (a phone held upright) */
.screen--main { align-items: center; justify-content: flex-start; gap: 12px; text-align: center; }
.logo { margin-top: max(1.5vh, 6px); }
.logo__eyebrow { font: 600 clamp(0.82rem, 3.1vw, 1.04rem)/1.35 var(--font-display); letter-spacing: 0.09em; color: #ffe0b4; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.7); }
/* the four letters the name is made of, so CARA reads as what it stands for */
.logo__eyebrow b { font-weight: 900; color: #fff7ea; }
@media (max-width: 480px) { .logo__eyebrow { font-size: 0.84rem; letter-spacing: 0.04em; padding: 0 30px; } }
.logo__title { margin: 2px 0 0; padding-left: 0.16em; font: 900 clamp(3.6rem, 19vw, 7.6rem)/0.95 var(--font-display); letter-spacing: 0.16em; color: #fff7ea; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.75), 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 70px rgba(255, 170, 80, 0.22); }
.logo__tag { margin: 6px 0 0; font: 500 clamp(0.9rem, 3.8vw, 1.2rem)/1.35 var(--font-display); color: #ffe6c0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 16px rgba(0, 0, 0, 0.7); }
.mainmenu { width: min(440px, 100%); display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.mainmenu__primary { display: flex; flex-direction: column; gap: 8px; }
.mainmenu__secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gbtn__sub--2 { font-size: 0.72rem; }
.title__pitch { margin: 0; max-width: 440px; font-size: 0.78rem; line-height: 1.45; color: #c2d0c5; text-shadow: 0 1px 2px #000; }
.title__keys { display: none; }
@media (hover: hover) and (pointer: fine) { .title__keys { display: inline; color: #93a597; } }

/* a screen on its side, tall enough (desktops, iPads, laptops): the menu on the left, Cara on the right */
@media (orientation: landscape) and (min-height: 541px) {
  .screen--main { align-items: flex-start; justify-content: center; gap: 3.4vh; text-align: left; padding-left: calc(max(5.5vw, 28px) + var(--sal)); }
  .logo { margin: 0; }
  .logo__title { padding-left: 0; font-size: clamp(4.4rem, 9vw, 8.4rem); }
  .mainmenu { width: clamp(300px, 36vw, 430px); margin-top: 0; }
  .title__pitch { max-width: clamp(300px, 36vw, 430px); }
  .title__shade { background: linear-gradient(90deg, rgba(5, 12, 8, 0.9) 0%, rgba(5, 12, 8, 0.72) 30%, rgba(5, 12, 8, 0.2) 60%, rgba(5, 12, 8, 0.05) 100%), linear-gradient(180deg, rgba(5, 12, 8, 0.25) 0%, transparent 40%, rgba(5, 12, 8, 0.75) 100%); }
  /* as tall as the screen allows, but never wider than the room right of the menu (she is 4:5) */
  .title__cara { left: auto; right: max(2vw, calc(50% - 720px)); bottom: 0; height: min(94vh, 900px, calc((100vw - 380px) * 1.25)); transform: none; }
}
/* a phone on its side: the name on the left, the menu on the right, everything a notch smaller */
@media (orientation: landscape) and (max-height: 540px) {
  .screen--main { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding-top: calc(10px + var(--sat)); padding-bottom: calc(10px + var(--sab)); }
  .logo { flex: 1 1 auto; align-self: flex-start; margin: 2vh 0 0; }
  .logo__title { padding-left: 0; font-size: clamp(2.8rem, 17vh, 4.6rem); }
  .logo__tag { font-size: 0.86rem; max-width: 28ch; }
  .mainmenu { flex: none; width: min(390px, 52vw); gap: 6px; margin-top: 0; }
  .mainmenu__primary { gap: 6px; }
  .gbtn { min-height: 44px; padding: 4px 12px; gap: 10px; border-radius: 12px; }
  .gbtn--tall { min-height: 54px; }
  .gbtn__label { font-size: 0.95rem; }
  .gbtn--tall .gbtn__label { font-size: 1.05rem; }
  .gbtn__sub { font-size: 0.7rem; }
  .gbtn__sub--2 { display: none; }
  .mainmenu__secondary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .mainmenu__secondary .gbtn { flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; padding: 4px 2px; text-align: center; }
  .mainmenu__secondary .gbtn .gbtn__sub { display: none; }
  .mainmenu__secondary .gbtn__label { font-size: 0.72rem; }
  .mainmenu__secondary .gbtn:hover, .mainmenu__secondary .gbtn:focus-visible { transform: translateY(-2px); }
  .mainmenu__secondary .gbtn::before { display: none; }
  .title__pitch { display: none; }
  .title__shade { background: linear-gradient(90deg, rgba(5, 12, 8, 0.78) 0%, rgba(5, 12, 8, 0.2) 42%, rgba(5, 12, 8, 0.35) 58%, rgba(5, 12, 8, 0.85) 80%); }
  .title__cara { left: 31%; bottom: -3vh; height: 106vh; transform: none; }
  .title__corner { top: auto; right: auto; bottom: calc(10px + var(--sab)); left: calc(12px + var(--sal)); }
}

/* ---- the screens under the main menu: chapters, team, extras ---- */
.screen--sub { gap: 12px; }
.screen--sub > * { width: 100%; max-width: 1180px; margin-inline: auto; }
.screen__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; flex: none; }
.screen__title { margin: 0; font: 700 clamp(1.5rem, 4.4vw, 2.3rem)/1.1 var(--font-display); letter-spacing: 0.06em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.screen__hint { margin: 0; flex-basis: 100%; font-size: 0.85rem; line-height: 1.4; color: #b9c8bd; }
.screen__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow: auto; overscroll-behavior: contain; padding: 4px; margin: -4px; scrollbar-width: thin; }
.screen__body, .cs__grid { scrollbar-color: var(--sb-thumb) var(--sb-track); }
#chapter-select { overflow: hidden; }
/* Back and Main menu on every screen under the main menu: big enough and bright enough not to be missed (Back in the
   menu's own orange, with a bold arrow; Main menu beside the title, pushed to the right) */
.backbtn, .homebtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 8px 18px 8px 12px; border-radius: 999px;
  font: 700 1rem var(--font-body); cursor: pointer; flex: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.backbtn { border: 1.5px solid #ff9a4a; background: linear-gradient(180deg, rgba(255, 164, 88, 0.5), rgba(240, 106, 30, 0.4)); color: #fff; }
.backbtn .ico { width: 1.3em; height: 1.3em; stroke-width: 2.6; }
.homebtn { margin-left: auto; border: 1.5px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.1); color: #fff; }
.homebtn .ico { width: 1.2em; height: 1.2em; stroke-width: 2.2; }
.backbtn:hover, .backbtn:focus-visible, .homebtn:hover, .homebtn:focus-visible { border-color: var(--sel); box-shadow: var(--sel-glow); outline: none; }
.backbtn:hover { background: linear-gradient(180deg, rgba(255, 164, 88, 0.45), rgba(240, 106, 30, 0.34)); }
@media (max-width: 480px) { .homebtn span { display: none; } .homebtn { padding: 8px 12px; } }

/* the chapter select (game/menu-ui.js): campaign tabs, the campaign's line, a tile per chapter */
.cs { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.cs__tabs { display: flex; gap: 6px; flex: none; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
.cs__tabs::-webkit-scrollbar { display: none; }
.cs__tab {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 15px; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--glass); color: #dfe8e1; font: 600 0.88rem var(--font-body); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cs__tab small { font-size: 0.72rem; font-weight: 600; color: #9fb0a3; font-variant-numeric: tabular-nums; }
.cs__tab[aria-selected="true"] { background: linear-gradient(135deg, rgba(255, 164, 88, 0.3), rgba(240, 106, 30, 0.22)); border-color: #ff9a4a; color: #fff; }
.cs__tab[aria-selected="true"] small { color: #ffd48f; }
.cs__tab:hover, .cs__tab:focus-visible { border-color: var(--sel); box-shadow: var(--sel-glow); outline: none; }
/* the kinds of campaign (Cara's story, real places, legends, fantasy): one kind's tabs are shown at a time. Four
   buttons are wider than a phone, so they wrap to a second row rather than run off the edge */
.cs__cats { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.cs__cat {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 14px; border-radius: 10px;
  border: 1px solid var(--edge); background: rgba(8, 14, 11, 0.55); color: #c3cfc5; font: 700 0.76rem var(--font-body); letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cs__cat small { font-size: 0.7rem; letter-spacing: 0; color: #9fb0a3; font-variant-numeric: tabular-nums; }
.cs__cat[aria-pressed="true"] { background: rgba(255, 164, 88, 0.16); border-color: #ff9a4a; color: #fff; }
.cs__cat[aria-pressed="true"] small { color: #ffd48f; }
.cs__cat[data-cat="fantasy"][aria-pressed="true"] { background: rgba(170, 130, 255, 0.2); border-color: #b48aff; }
.cs__cat[data-cat="fantasy"][aria-pressed="true"] small { color: #d8c4ff; }
.cs__cat[data-cat="story"][aria-pressed="true"] { background: rgba(255, 208, 122, 0.18); border-color: #ffd07a; }
.cs__cat[data-cat="story"][aria-pressed="true"] small { color: #ffe6b0; }
.cs__cat[data-cat="legends"][aria-pressed="true"] { background: rgba(92, 204, 160, 0.18); border-color: #5fd0a0; }
.cs__cat[data-cat="legends"][aria-pressed="true"] small { color: #bff0da; }
.cs__cat:hover, .cs__cat:focus-visible { border-color: var(--sel); box-shadow: var(--sel-glow); outline: none; }
/* a tab of the other kind: .cs__tab's display would otherwise beat the hidden attribute */
.cs__tab[hidden] { display: none; }
.cs__panel { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.cs__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; flex: none; }
.cs__title { margin: 0; font: 700 1.2rem/1.25 var(--font-display); letter-spacing: 0.04em; color: #ffe6c0; }
.cs__count { order: 2; margin: 0; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #9fb0a3; }
.cs__tagline { order: 3; flex-basis: 100%; margin: 0; font-size: 0.86rem; line-height: 1.4; color: #c3cfc5; }
.cs__grid {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; gap: 12px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); grid-auto-rows: max-content;   /* rows as tall as their tiles: the grid scrolls, the tiles never squash */
  padding: 5px 5px 14px; margin: -5px; scrollbar-width: thin;
}
.cs-tile {
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none;
  background: linear-gradient(160deg, var(--c1), var(--c2) 55%, var(--c3)); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; -webkit-tap-highlight-color: transparent;
}
.cs-tile__art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.cs-tile__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.cs-tile__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8, 14, 11, 0.5)); }
.cs-tile__mark { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(2.2rem, 4.4vw, 3.1rem)/1 var(--font-display); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.45); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3); }
.cs-tile__go { position: absolute; z-index: 1; right: 10px; bottom: 10px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #ff8a3d; color: #1a0c04; font-size: 0.8rem; opacity: 0; transform: scale(0.7); transition: opacity 0.15s ease, transform 0.15s ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.cs-tile__body { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; background: rgba(8, 14, 11, 0.82); }
.cs-tile__body > * { flex-shrink: 0; }
.cs-tile__label { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-2); }
.cs-tile__name { font: 700 1.06rem/1.2 var(--font-display); letter-spacing: 0.02em; }
.cs-tile__blurb { font-size: 0.8rem; line-height: 1.38; color: #c3cfc5; }
.cs-tile__foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 7px; }
.cs-tile__state, .cs-tile__flag { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #b9c8bd; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; }
.cs-tile[data-state="progress"] .cs-tile__state { background: rgba(255, 177, 92, 0.16); color: #ffd48f; }
.cs-tile[data-state="done"] .cs-tile__state { background: rgba(61, 220, 132, 0.16); color: #8ff0b5; }
.cs-tile[data-state="done"] .cs-tile__state::before { content: '✓ '; }
.cs-tile[data-state="current"] .cs-tile__state { background: #ff8a3d; color: #1a0c04; }
.cs-tile__flag { background: rgba(120, 200, 255, 0.14); color: #bfe3ff; }
.cs-tile:hover, .cs-tile:focus-visible { transform: translateY(-3px); border-color: rgba(255, 190, 110, 0.9); box-shadow: 0 0 0 2px rgba(255, 177, 92, 0.45), 0 16px 34px rgba(0, 0, 0, 0.5); outline: none; }
.cs-tile:hover .cs-tile__go, .cs-tile:focus-visible .cs-tile__go { opacity: 1; transform: none; }
.cs-tile:hover .cs-tile__art img, .cs-tile:focus-visible .cs-tile__art img { transform: scale(1.05); }
.cs-tile:active { transform: translateY(-1px) scale(0.99); }

/* a phone held upright: the chapters as a list, the picture on the left */
@media (orientation: portrait) and (max-width: 600px) {
  .cs__grid { grid-template-columns: 1fr; gap: 8px; }
  .cs-tile { flex-direction: row; }
  .cs-tile__art { flex: none; width: 30%; aspect-ratio: auto; }
  .cs-tile__mark { font-size: 1.7rem; }
  .cs-tile__go { display: none; }
  .cs-tile__body { padding: 9px 11px 10px; }
  .cs-tile__blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.76rem; }
  .cs-tile:hover, .cs-tile:focus-visible { transform: none; }
}
/* a phone on its side: one row that scrolls sideways */
@media (orientation: landscape) and (max-height: 540px) {
  .screen--sub { gap: 8px; padding-top: calc(8px + var(--sat)); padding-bottom: calc(8px + var(--sab)); }
  .screen__head { flex-wrap: nowrap; }
  .screen__title { font-size: 1.3rem; }
  .screen__hint { flex-basis: auto; font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs { gap: 6px; }
  .cs__panel { gap: 6px; }
  .cs__tagline { display: none; }
  .cs__title { font-size: 1rem; }
  .cs__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(196px, 29vw); grid-template-rows: minmax(0, 1fr); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding-bottom: 8px; }
  .cs-tile { scroll-snap-align: start; }
  .cs-tile__art { flex: 1 1 0; min-height: 40px; aspect-ratio: auto; }
  .cs-tile__body { flex: none; padding: 8px 10px 9px; }
  .cs-tile__blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.74rem; }
}

/* the team: who takes the field leg, and their files */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.teamslot { --tc: #ff8a3d; position: relative; display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--edge); background: var(--glass-hi); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.teamslot.is-on { border-color: var(--tc); background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 24%, transparent), var(--glass-hi) 62%); }
.teamslot:hover, .teamslot:has(:focus-visible) { border-color: rgba(255, 190, 110, 0.9); box-shadow: var(--sel-glow); transform: translateY(-2px); }
.teamcard { display: grid; grid-template-columns: 72px 1fr; gap: 3px 14px; align-items: start; width: 100%; margin: 0; padding: 14px 14px 8px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.teamcard:focus-visible { outline: none; }
.teamcard__face { grid-row: span 4; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #1d2a22; border: 3px solid var(--tc); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35); }
.teamcard__name { font: 700 1.04rem/1.2 var(--font-display); letter-spacing: 0.02em; }
.teamcard__blurb { font-size: 0.8rem; line-height: 1.4; color: #c3cfc5; }
.teamcard__quote { font: 500 0.84rem/1.35 var(--font-display); color: #ffe6c0; }
.teamcard__pick { justify-self: start; margin-top: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--edge); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #dfe8e1; }
.teamslot.is-on .teamcard__pick { border-color: transparent; background: var(--tc); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.teamslot__links { display: flex; justify-content: flex-end; padding: 0 10px 10px; }
.teamslot__profile { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; color: var(--accent-2); font-size: 0.84rem; font-weight: 600; text-decoration: none; }
.teamslot__profile:hover, .teamslot__profile:focus-visible { border-color: var(--sel); outline: none; }
.storylink { display: flex; align-items: center; gap: 12px; max-width: 560px; padding: 10px 14px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, 0.2); background: rgba(8, 17, 12, 0.55); color: inherit; text-decoration: none; }
.storylink:hover, .storylink:focus-visible { border-color: var(--sel); border-style: solid; outline: none; box-shadow: var(--sel-glow); }
.storylink img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 32%; }
.storylink b { display: block; font-size: 0.92rem; }
.storylink small { display: block; font-size: 0.78rem; color: #9fb0a3; }
.storylink i { margin-left: auto; font-style: normal; font-size: 1.4rem; color: var(--accent-2); }

/* extras: the longer pages */
.xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.xtile { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid var(--edge); background: var(--glass-hi); color: inherit; text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; -webkit-tap-highlight-color: transparent; }
.xtile img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.xtile span { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.xtile b { font: 700 1.05rem/1.25 var(--font-display); }
.xtile small { font-size: 0.82rem; line-height: 1.4; color: #c3cfc5; }
.xtile:hover, .xtile:focus-visible { transform: translateY(-3px); border-color: rgba(255, 190, 110, 0.9); box-shadow: var(--sel-glow), 0 14px 30px rgba(0, 0, 0, 0.45); outline: none; }
@media (orientation: portrait) and (max-width: 600px) {
  .xgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .xtile span { padding: 9px 10px 11px; }
  .xtile b { font-size: 0.92rem; }
  .xtile small { font-size: 0.74rem; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .xgrid { grid-template-columns: repeat(4, 1fr); }
  .xtile img { aspect-ratio: 16 / 8; }
  .xtile small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.74rem; }
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .teamcard { grid-template-columns: 52px 1fr; padding: 10px 10px 4px; }
  .teamcard__face { width: 52px; height: 52px; }
  .teamcard__blurb { display: none; }
}

/* trophies (game/trophies-ui.js): the crown, the count and the tiers on top, then a card per trophy by group; the
   main menu's Trophies screen and play.html's Trophies panel */
/* Trophies shares its row with Today’s Expedition (game/daily): six small buttons, three rows of two */
.mainmenu__secondary .gbtn--trophies { grid-column: auto; }
.gbtn--trophies > .ico { color: #ffd060; }
@media (orientation: landscape) and (max-height: 540px) {
  .mainmenu__secondary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mainmenu__secondary .gbtn--trophies { grid-column: auto; }
}
.trl { display: flex; flex-direction: column; gap: 20px; }
.trl ul { list-style: none; margin: 0; padding: 0; }
.trl [data-tier="bronze"] { --tc: #c9783a; --thi: #f5c08a; --tlo: #6a3612; --tglow: rgba(220, 130, 60, 0.3); }
.trl [data-tier="silver"] { --tc: #aab6c2; --thi: #f4f8fb; --tlo: #56616c; --tglow: rgba(190, 210, 230, 0.28); }
.trl [data-tier="gold"] { --tc: #e8b030; --thi: #fff0b0; --tlo: #7a5208; --tglow: rgba(255, 190, 60, 0.35); }
.trl [data-tier="platinum"] { --tc: #8fd8e8; --thi: #ffffff; --tlo: #3a6a7a; --tglow: rgba(150, 230, 255, 0.45); }
.trsum { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px 20px; align-items: center; }
.trsum__count { margin: 0 0 8px; font-size: 0.9rem; color: #c3cfc5; }
.trsum__count b { margin-right: 4px; font: 700 1.9rem/1 var(--font-display); color: #fff7ea; }
.trsum__bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.trsum__bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f06a1e, #ffa458 60%, #ffd48f); }
.trsum__tiers { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 0.8rem; color: #c3cfc5; }
.trsum__tier b { color: #fff; font-variant-numeric: tabular-nums; }
.trsum__tier i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; background: radial-gradient(circle at 35% 30%, var(--thi), var(--tc) 60%, var(--tlo)); }
.trsum__crown .trophy { padding: 16px; }
.trsum__crown .trophy__medal { width: 66px; height: 66px; font-size: 2.1rem; }
.trgroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 10px; }
.trgroup__title { margin: 0; font: 700 1.15rem/1.25 var(--font-display); letter-spacing: 0.04em; color: #ffe6c0; }
.trgroup__count { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #9fb0a3; font-variant-numeric: tabular-nums; }
.trgroup__about { flex-basis: 100%; margin: 0; font-size: 0.84rem; line-height: 1.4; color: #b9c8bd; }
.trgroup__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 10px; }
.trophy {
  display: flex; gap: 12px; align-items: flex-start; min-width: 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--edge);
  background: var(--glass-hi); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.trophy[data-state="got"] { border-color: color-mix(in srgb, var(--tc) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 17%, transparent), var(--glass-hi) 62%); }
.trophy:hover, .trophy:focus-visible { border-color: rgba(255, 190, 110, 0.9); box-shadow: var(--sel-glow); outline: none; }
.trophy__medal {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 1.55rem; line-height: 1;
  background: radial-gradient(circle at 35% 30%, var(--thi), var(--tc) 55%, var(--tlo));
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 14px var(--tglow);
}
.trophy[data-state="locked"] .trophy__medal, .trophy[data-state="secret"] .trophy__medal { filter: grayscale(1) brightness(0.5); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(0, 0, 0, 0.35); }
.trophy[data-state="secret"] .trophy__medal { font: 700 1.5rem var(--font-display); color: #fff; }
.trophy__body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trophy__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.trophy__title { font: 700 1rem/1.25 var(--font-display); letter-spacing: 0.02em; }
.trophy[data-state="locked"] .trophy__title, .trophy[data-state="secret"] .trophy__title { color: #d5ddd7; }
.trophy[data-state="secret"] .trophy__text { font-style: italic; }
.trophy__new { padding: 2px 8px; border-radius: 999px; background: #ff8a3d; color: #1a0c04; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.trophy__text { font-size: 0.82rem; line-height: 1.4; color: #c3cfc5; }
.trophy__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 5px; font-size: 0.72rem; }
.trophy__tier { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 24%, transparent); color: var(--thi); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.trophy[data-state="locked"] .trophy__tier, .trophy[data-state="secret"] .trophy__tier { background: rgba(255, 255, 255, 0.07); color: #aab8ad; }
.trophy__when { font-weight: 600; color: #9fb0a3; }
.trophy[data-state="got"] .trophy__when { color: #8ff0b5; }
.trophy__progress { flex: 1; display: inline-flex; align-items: center; gap: 8px; min-width: 130px; }
.trophy__bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.trophy__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffa458, #ffd48f); }
.trophy__count { font-weight: 700; color: #dfe8e1; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .trsum { grid-template-columns: 1fr; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .trl { gap: 14px; }
  .trophy { padding: 9px 11px; gap: 10px; }
  .trophy__medal { width: 42px; height: 42px; font-size: 1.25rem; }
  .trsum__crown .trophy__medal { width: 50px; height: 50px; font-size: 1.6rem; }
  .trophy__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.76rem; }
}

.noscript { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0; padding: 14px; text-align: center; background: rgba(5, 12, 8, 0.9); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .title__art { animation: none; }
  .screen.is-entering { animation: none; }
  .gbtn, .cs-tile, .xtile, .teamslot, .trophy { transition: none; }
}

/* the bonus scenes gallery (Extras → Bonus scenes, game/menu.js): each campaign, each chapter, a link per scene */
.bgal__camp { display: flex; flex-direction: column; gap: 8px; }
.bgal__title { margin: 6px 0 0; font: 700 1.05rem/1.25 var(--font-display); letter-spacing: 0.04em; color: #ffe6c0; }
.bgal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.bgal__chapter { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; border: 1px solid var(--edge); background: linear-gradient(160deg, color-mix(in srgb, var(--c2, #4a7a3e) 38%, transparent), color-mix(in srgb, var(--c3, #12261a) 70%, transparent)), var(--glass-hi); }
.bgal__head { display: flex; flex-direction: column; gap: 1px; padding: 0 4px 2px; }
.bgal__head span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2, #ffd48f); }
.bgal__head b { font: 700 1rem/1.2 var(--font-display); letter-spacing: 0.02em; }
.bgal__scene { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 12px; border: 1px solid transparent; background: rgba(8, 14, 11, 0.55); color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; }
.bgal__scene i { flex: none; font-style: normal; font-size: 1.25rem; line-height: 1; }
.bgal__scene span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bgal__scene b { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bgal__scene small { font-size: 0.72rem; color: #9fb0a3; }
.bgal__scene em { flex: none; padding: 2px 8px; border-radius: 999px; background: #ff8a3d; color: #1a0c04; font-style: normal; font-size: 0.66rem; font-weight: 700; }
.bgal__scene em.is-seen { background: rgba(61, 220, 132, 0.16); color: #8ff0b5; }
.bgal__scene:hover, .bgal__scene:focus-visible { border-color: var(--sel); box-shadow: var(--sel-glow); transform: translateX(2px); outline: none; }

/* the Arcade button: colourful, so it is not missed among the main menu's quieter buttons; and the Arcade screen's groups */
.gbtn.gbtn--arcade { position: relative; overflow: hidden; color: #fff; border-color: rgba(255, 220, 150, 0.6); background: linear-gradient(115deg, #7a3cff 0%, #e2479a 38%, #ff8a3d 70%, #ffd25a 100%); background-size: 180% 100%; animation: arcade-shift 6s ease-in-out infinite alternate; box-shadow: 0 6px 22px rgba(226, 71, 154, 0.35); }
.gbtn.gbtn--arcade .gbtn__sub { color: rgba(255, 255, 255, 0.9); }
.gbtn.gbtn--arcade > .ico { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.gbtn.gbtn--arcade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-120%); animation: arcade-shine 4.5s ease-in-out infinite; pointer-events: none; }
.gbtn.gbtn--arcade:hover, .gbtn.gbtn--arcade:focus-visible { box-shadow: 0 0 0 2px rgba(255, 230, 170, 0.9), 0 10px 28px rgba(226, 71, 154, 0.5); }
.gbtn__badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); font: 700 0.68rem/1.5 var(--font-body); letter-spacing: 0.02em; vertical-align: 2px; }
@keyframes arcade-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes arcade-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.arcade__group { margin: 4px 2px 10px; font: 700 0.95rem/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: #ffd9a0; }
.arcade__grid + .arcade__group { margin-top: 20px; }
.arcade__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
/* the Arcade's two tabs, 3D and 2D (docs/120): the chapter select's tab look */
.arcade__tabs { margin: 0 0 16px; }
@media (prefers-reduced-motion: reduce) { .gbtn.gbtn--arcade, .gbtn.gbtn--arcade::after { animation: none; } }

/* the Shop (docs/102): the seventh small button, a row of its own under the six, its bag in gold */
.mainmenu__secondary .gbtn--shop { grid-column: 1 / -1; }
.gbtn--shop > .ico { color: #ffcf6b; }
/* the Shop's page on the menu: the console's cards (shared.css .shop…), wider */
.shop--menu { width: 100%; max-width: 900px; margin: 0 auto; }
.shop--menu .shop__grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.shop--menu .shop__art { height: 112px; }
.shop--menu .shop__art .shop__fig { width: 58px; height: 98px; }
.shop--menu .shop__body h4 { font-size: 0.95rem; }
.shop--menu .shop__body p { font-size: 0.76rem; }
.shop--menu .shop__wallet { max-width: 520px; width: 100%; margin: 0 auto; }
@media (max-width: 420px) { .shop--menu .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .shop--menu .shop__art { height: 100px; } }
@media (min-width: 700px) {
  .shop--menu .shop__stage { grid-template-columns: 220px 1fr; gap: 20px; padding: 16px 20px; }
  .shop--menu .shop__stageart { height: 190px; }
  .shop--menu .shop__stageart .shop__fig { width: 96px; height: 160px; }
  .shop--menu .shop__stagebody h3 { font-size: 1.6rem; }
  .shop--menu .shop__stagebody p { font-size: 0.92rem; }
  .shop--menu .shop__tabs { justify-content: center; }
  .shop--menu .shop__tab { flex: 0 0 auto; padding: 8px 18px; font-size: 0.88rem; }
}
.shop--menu .shop__note { display: none; }   /* (the screen's own hint says it) */

/* ---- Stories (#stories; game/stories/stories-menu.js, docs/116): films of Cara, a tile each: the poster, the title,
   the length, and two ways to watch it. The main menu's button is a cinema's dusk: plum into amber. */
.gbtn.gbtn--stories { color: #fff; border-color: rgba(255, 200, 130, 0.5); background: linear-gradient(115deg, #2a1d3a 0%, #5a2a4a 45%, #b0582a 100%); box-shadow: 0 6px 20px rgba(176, 88, 42, 0.28); }
.gbtn.gbtn--stories .gbtn__sub { color: rgba(255, 236, 214, 0.88); }
.gbtn.gbtn--stories > .ico { color: #ffd9a0; }
.gbtn.gbtn--stories:hover, .gbtn.gbtn--stories:focus-visible { box-shadow: 0 0 0 2px rgba(255, 220, 170, 0.85), 0 10px 26px rgba(176, 88, 42, 0.45); }
.story-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.story-tabs__tab { min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--edge); background: var(--glass-hi); color: var(--text); font: 600 0.92rem var(--font-body); cursor: pointer; }
.story-tabs__tab.is-on { background: linear-gradient(180deg, #ffb35c, #ff8a3d); border-color: transparent; color: #2a1406; }
.story-tabs__tab:disabled { cursor: not-allowed; opacity: 0.6; }
.story-tabs__tab small { margin-left: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #ffc46e; }
/* four tabs do not fit a phone's width: one row that scrolls sideways, rather than a tab wrapped on to a line of its own */
@media (max-width: 560px) {
  .story-tabs { flex: none; min-height: 44px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 2px; }
  .story-tabs::-webkit-scrollbar { display: none; }
  .story-tabs__tab { flex: none; padding: 6px 13px; scroll-snap-align: start; }
}
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 14px; }
.story-tile { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-radius: 16px; overflow: hidden; border: 1px solid var(--edge); background: var(--glass-hi); }
.story-tile__poster { position: relative; min-height: 100%; background: #0b0b0b; }
.story-tile__poster img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.story-tile__len { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.7); color: #fff; font: 700 0.76rem var(--font-body); }
.story-tile__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; min-width: 0; }
.story-tile__kicker { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #ffc46e; }
.story-tile__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.15; }
.story-tile__blurb { margin: 0; font-size: 0.86rem; line-height: 1.45; color: #c9d6cc; }
.story-tile__meta, .story-tile__resume { margin: 0; font-size: 0.78rem; color: #9fb0a3; }
.story-tile__resume a { color: #ffc46e; }
.story-tile__go { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 6px; }
.story-tile__btn { min-height: 52px; }
.story-grid[hidden] { display: none; }
.story-grid__about { grid-column: 1 / -1; margin: 0; font-size: 0.88rem; color: #c9d6cc; }
.story-tile__endings { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 700; color: #ffc46e; }
.story-tile__ends { display: inline-flex; gap: 4px; }
.story-tile__end { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px dashed rgba(255, 196, 110, 0.5); font-size: 0.85rem; color: #9fb0a3; }
.story-tile__end.is-found { border-style: solid; background: rgba(255, 179, 92, 0.2); }
@media (max-width: 700px) {
  .story-tile { grid-template-columns: 1fr; }
  .story-tile__poster img { height: auto; }
}

/* ---- the main menu, tidied (7 October 2026): Continue; Play, four tiles in a 2 × 2; With Cara, one card that opens the
   ways to call her (#cara); and an icon bar for the rest. Every button keeps its id, so menu.js is as it was ---- */
.mainmenu__group { display: flex; flex-direction: column; gap: 6px; }
.mainmenu__label { margin: 4px 0 0 2px; font: 700 0.66rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 228, 190, 0.78); text-shadow: 0 1px 3px #000; text-align: left; }
.mainmenu__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gbtn--tile { min-height: 56px; padding: 6px 10px; gap: 9px; }
.gbtn--tile .gbtn__text { min-width: 0; }
.gbtn--tile .gbtn__label { font-size: 0.98rem; white-space: nowrap; }
.gbtn--tile .gbtn__sub { font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.gbtn--tile > .ico { flex: none; }
.gbtn--hub { min-height: 60px; }
.gbtn--hub .gbtn__label { font-size: 1.12rem; font-weight: 800; }
.gbtn--hub .gbtn__sub { color: rgba(6, 33, 18, 0.82); }
.gbtn__go { margin-left: auto; font: 800 1.5rem/1 var(--font-body); opacity: 0.75; }
/* the icon bar: an icon over a short word; the second lines stay in the page (menu.js writes them) as tooltips' words,
   out of sight */
.mainmenu__bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.gbtn--icon { flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 5px 2px; text-align: center; border-radius: 12px; }
.gbtn--icon .gbtn__text { align-items: center; }
.gbtn--icon .gbtn__label { font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.gbtn--icon .gbtn__sub { display: none; }
.gbtn--icon > .ico { width: 20px; height: 20px; }
.gbtn--icon::before { display: none; }
.gbtn--icon:hover, .gbtn--icon:focus-visible { transform: translateY(-2px); }
.gbtn--icon.gbtn--trophies > .ico { color: #ffd060; }
.gbtn--icon.gbtn--shop > .ico { color: #ffcf6b; }
/* the Call Cara screen: the four ways, and the minutes above them */
.cara-ways { width: min(560px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.cara-ways .gbtn--way { min-height: 66px; }
.cara-ways .gbtn--way .gbtn__label { font-size: 1.08rem; }
.title .cara-ways .minutes.minutes--full { position: static; display: inline-flex; align-self: flex-start; margin-bottom: 4px; }
/* a phone held upright: the bar wraps to two rows of three */
@media (max-width: 420px) {
  .mainmenu__bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gbtn--tile .gbtn__label { font-size: 0.9rem; white-space: normal; line-height: 1.12; }
}
/* a phone on its side: tighter still */
@media (orientation: landscape) and (max-height: 540px) {
  .mainmenu__label { display: none; }
  .mainmenu__tiles { gap: 6px; }
  .gbtn--tile { min-height: 44px; }
  .gbtn--tile .gbtn__sub { display: none; }
  .gbtn--tile .gbtn__label { white-space: normal; line-height: 1.1; font-size: 0.9rem; }
  .gbtn--hub { min-height: 46px; }
  .mainmenu__bar { gap: 5px; }
  .gbtn--icon { min-height: 44px; }
}
/* a short desktop window (a laptop at 1280 × 720) */
@media (orientation: landscape) and (min-height: 541px) and (max-height: 800px) {
  .screen--main { gap: 2vh; }
  .logo__title { font-size: clamp(3.8rem, 7.6vw, 6.6rem); }
  .mainmenu { gap: 6px; }
  .gbtn--tile { min-height: 50px; }
}

/* With Cara: Call Cara and Stories side by side (Stories on the main menu itself, so it is not missed) */
.mainmenu__pair { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; }
.mainmenu__pair .gbtn--hub { min-width: 0; }
.mainmenu__pair .gbtn--hub .gbtn__text { min-width: 0; }
.mainmenu__pair .gbtn--hub .gbtn__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mainmenu__pair .gbtn--stories .gbtn__label { font-size: 1.12rem; font-weight: 800; }
.mainmenu__pair .gbtn--stories .gbtn__go { color: #ffd9a0; }
@media (max-width: 360px) { .mainmenu__pair { grid-template-columns: 1fr; } }
/* the Tutorials tile: the fifth in Play, across both columns (index.html #tutorials), and its screen's groups */
.gbtn--tutorials { grid-column: 1 / -1; min-height: 48px; }
.tut-group { display: grid; gap: 8px; margin: 0 0 18px; }
.tut-group__title { margin: 6px 0 0; font: 800 1.05rem/1.2 var(--font-body); letter-spacing: 0.02em; color: #ffe8bf; }
.story-tile__btn--small { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
.story-tile__btn--small .gbtn__label { font-size: 0.86rem; }

/* a switch between two related screens in a screen's header (Trophies and the Field Guide, docs/141) */
.screen__switch { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 214, 150, 0.28); background: rgba(0, 0, 0, 0.25); color: #ffe2b0; font-size: 0.85rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.screen__switch small { font-weight: 500; color: #b9c8bd; }
.screen__switch:hover, .screen__switch:focus-visible { background: rgba(255, 214, 150, 0.12); outline: none; box-shadow: 0 0 0 2px #ffe2b0; }
@media (max-width: 560px) { .screen__switch small { display: none; } }