/* 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: rgba(255, 255, 255, 0.22) transparent; }
#chapter-select { overflow: hidden; }
.backbtn {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 6px 16px 6px 10px; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--glass); color: var(--text); font: 600 0.92rem var(--font-body); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-tap-highlight-color: transparent;
}
.backbtn:hover, .backbtn:focus-visible { border-color: var(--sel); box-shadow: var(--sel-glow); outline: none; }

/* 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 (real places, fantasy): one kind's tabs are shown at a time */
.cs__cats { display: flex; 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: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 */
.mainmenu__secondary .gbtn--trophies { grid-column: 1 / -1; }
.gbtn--trophies > .ico { color: #ffd060; }
@media (orientation: landscape) and (max-height: 540px) {
  .mainmenu__secondary { grid-template-columns: repeat(5, 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; }