/* Face to face (facecall.html, game/facecall, docs/115): a video call with Cara. Her picture fills the screen; over it
   the call's top bar and self view, her captions, the game panel (across the bottom on a phone held upright, down the
   right side when the screen is wider than tall), the call bar, and the sheets. Glass panels, the Sat-Link green for
   the call, red to hang up. */

:root {
  --fc-glass: rgba(12, 19, 16, 0.8); --fc-glass-2: rgba(255, 255, 255, 0.08); --fc-line: rgba(255, 255, 255, 0.14);
  --fc-green: #3ff090; --fc-green-2: #20b868; --fc-red: #e0453a; --fc-gold: #ffcf6b; --fc-text: #f4f7f5; --fc-dim: rgba(244, 247, 245, 0.7);
  --fc-bar: 64px; --fc-top: 56px; --fc-gap: 10px; --fc-side: min(400px, 46vw);
}
html, body { height: 100%; }
body.fc { margin: 0; overflow: hidden; background: #0b100d; color: var(--fc-text); font-family: var(--font-body); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
.fc button { font: inherit; color: inherit; }
.fc kbd { font: 700 0.62rem/1 var(--font-body); padding: 2px 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); color: var(--fc-dim); margin-left: auto; }

/* the picture */
.fc__video { position: fixed; inset: 0; }
.fc__canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.fc__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.35)); }
.fc__loading { position: fixed; inset: 0 0 auto 0; top: 30%; display: grid; justify-items: center; gap: 12px; text-align: center; pointer-events: none; }
.fc__loading img { width: 96px; height: 96px; border-radius: 50%; border: 3px solid rgba(63, 240, 144, 0.6); animation: fc-pulse 1.4s ease-in-out infinite alternate; }
.fc__loading p { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--fc-glass); font-weight: 600; }
@keyframes fc-pulse { from { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(63, 240, 144, 0.4); } to { transform: scale(1.02); box-shadow: 0 0 0 14px rgba(63, 240, 144, 0); } }

/* the top bar */
.fc__top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px; min-height: var(--fc-top); box-sizing: border-box;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); }
/* the way back to the main menu: bold, in the menu's orange, so it is never missed */
.fc__back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem; padding: 8px 16px 8px 12px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 164, 88, 0.34), rgba(240, 106, 30, 0.26)); border: 1.5px solid #ff9a4a; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.fc__back span { font-size: 1.3em; line-height: 1; }
.fc__back:hover, .fc__back:focus-visible { background: linear-gradient(180deg, rgba(255, 164, 88, 0.48), rgba(240, 106, 30, 0.36)); outline: none; }
.fc__who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.15; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.fc__who b { font-size: 1.05rem; }
.fc__who span { white-space: nowrap; font-size: 0.8rem; color: var(--fc-dim); font-variant-numeric: tabular-nums; }
.fc[data-call="active"] .fc__who span { color: var(--fc-green); font-weight: 700; }
.fc .minutes--hud { flex: none; }

/* the self view */
.fc__self { position: fixed; z-index: 4; top: calc(var(--fc-top) + 6px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 64px; height: 86px; border-radius: 12px;
  background: linear-gradient(160deg, #2c3a34, #151d19); border: 1px solid var(--fc-line); display: grid; place-items: center; align-content: center; gap: 2px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.fc__self span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); font-weight: 800; }
.fc__self small { font-size: 0.6rem; color: var(--fc-dim); }

/* her captions: above the panel */
.fc__cap { position: fixed; z-index: 4; left: 50%; transform: translateX(-50%); bottom: calc(var(--fc-panel-h, 40vh) + var(--fc-bar) + 18px + env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 32px)); box-sizing: border-box;
  margin: 0; padding: 9px 14px; border-radius: 14px; background: rgba(8, 14, 11, 0.78); font: 600 1rem/1.35 var(--font-body); text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); pointer-events: none; }
.fc__cap.is-practice::before { content: var(--who, 'Cara'); display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fc-green); margin-bottom: 2px; }

/* the game panel */
.fc__panel { position: fixed; z-index: 3; left: 0; right: 0; bottom: calc(var(--fc-bar) + env(safe-area-inset-bottom)); max-height: 46vh; overflow: auto; overscroll-behavior: contain;
  box-sizing: border-box; padding: 10px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); background: var(--fc-glass);
  border-top: 1px solid var(--fc-line); border-radius: 18px 18px 0 0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); scrollbar-width: thin; }
.fcg__head { display: flex; align-items: center; gap: 8px; }
.fcg__icon { font-size: 1.25rem; }
.fcg__title { margin: 0; font: 800 1.02rem/1.2 var(--font-body); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcg__score { font: 700 0.85rem/1 var(--font-body); color: var(--fc-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fcg__fold { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--fc-glass-2); cursor: pointer; flex: none; }
.fcg__body { display: grid; gap: 8px; margin-top: 8px; }
.fcg__body[hidden] { display: none; }
.fcg__sub { font-size: 0.78rem; color: var(--fc-dim); letter-spacing: 0.02em; }
.fcg__practice { justify-self: start; border: 1px dashed rgba(63, 240, 144, 0.5); background: rgba(63, 240, 144, 0.08); color: var(--fc-dim); border-radius: 999px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer; }
.fcg__practice b { color: var(--fc-green); }
.fcg__big { font: 800 clamp(1.6rem, 6vw, 2.4rem)/1.1 var(--font-body); text-align: center; letter-spacing: 0.01em; }
.fcg__prompt { margin: 0; font: 700 1.02rem/1.35 var(--font-body); text-align: center; }
.fcg__note { margin: 0; font-size: 0.9rem; line-height: 1.4; color: var(--fc-dim); text-align: center; }
.fcg__timer { position: relative; height: 8px; border-radius: 999px; background: var(--fc-glass-2); overflow: hidden; }
.fcg__timer[hidden] { display: none; }
.fcg__timer i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--fc-gold), var(--fc-green)); border-radius: inherit; }
.fcg__timer span { position: absolute; right: 0; top: -18px; font-size: 0.75rem; color: var(--fc-dim); font-variant-numeric: tabular-nums; }
.fcg__meter { display: grid; gap: 3px; font-size: 0.72rem; color: var(--fc-dim); }
.fcg__meter i { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #ff7a6b, var(--fc-gold)); transition: width 0.15s; }
.fcg__breath { justify-self: center; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); display: grid; place-items: center; }
.fcg__breath i { width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle, rgba(140, 230, 255, 0.75), rgba(63, 240, 144, 0.35)); transform: scale(0.45); }
.fcg__story { display: grid; gap: 4px; max-height: 120px; overflow: auto; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); font-size: 0.9rem; line-height: 1.4; }
.fcg__story p { margin: 0; }
.fcg__story b { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; margin-right: 4px; color: var(--fc-green); }
.fcg__story .is-you b { color: var(--fc-gold); }
.fcg__map { position: relative; height: 120px; border-radius: 12px; background: radial-gradient(ellipse at 30% 40%, #3f6a52 0 18%, transparent 19%), radial-gradient(ellipse at 52% 36%, #4c7258 0 14%, transparent 15%), radial-gradient(ellipse at 78% 52%, #3f6a52 0 13%, transparent 14%), radial-gradient(ellipse at 25% 70%, #456e55 0 12%, transparent 13%), linear-gradient(#1d4a68, #163a52); border: 1px solid var(--fc-line); }
.fcg__pin { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: rgba(12, 19, 16, 0.85); cursor: pointer; font-size: 0.95rem; display: grid; place-items: center; padding: 0; }
.fcg__pin:hover { transform: translate(-50%, -50%) scale(1.15); }
.fcg__input { display: flex; gap: 6px; }
.fcg__input input { flex: 1; min-width: 0; font: 600 1rem var(--font-body); color: var(--fc-text); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--fc-line); border-radius: 12px; padding: 10px 12px; }
.fcg__input input:focus { outline: 2px solid var(--fc-green); outline-offset: 1px; }
.fcg__cta { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(63, 240, 144, 0.08); border: 1px solid rgba(63, 240, 144, 0.35); text-align: center; }
.fcg__cta p { margin: 0; font-size: 0.9rem; line-height: 1.4; }

/* the buttons */
.fcg__btns { display: grid; gap: 6px; }
.fcg__btns--pad { grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); }
.fcg__btns--answer { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fcg__btns--chip { display: flex; flex-wrap: wrap; }
.fcg__btns--primary, .fcg__btns--ghost { display: flex; flex-wrap: wrap; justify-content: center; }
.fcb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--fc-line); background: var(--fc-glass-2);
  color: var(--fc-text); font: 600 0.95rem/1.25 var(--font-body); cursor: pointer; text-align: left; text-decoration: none; transition: background 0.12s, transform 0.08s, border-color 0.12s; }
.fcb:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.fcb:active:not(:disabled) { transform: scale(0.97); }
.fcb:focus-visible { outline: 2px solid var(--fc-green); outline-offset: 2px; }
.fcb:disabled { opacity: 0.45; cursor: default; }
.fcb__icon { font-size: 1.1rem; line-height: 1; }
.fcb__label { flex: 1; }
.fcb__note { font-size: 0.9rem; }
.fcb--pad { flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 6px 4px; text-align: center; position: relative; }
.fcb--pad .fcb__icon { font-size: 1.7rem; }
.fcb--pad .fcb__label { font-size: 0.72rem; flex: none; }
.fcb--pad kbd { position: absolute; top: 4px; right: 4px; }
.fcb--pad.is-on { background: rgba(63, 240, 144, 0.3); border-color: var(--fc-green); box-shadow: 0 0 16px rgba(63, 240, 144, 0.45); }
.fcb--pad:disabled.is-on { opacity: 1; }
.fcb--chip { min-height: 38px; border-radius: 999px; padding: 6px 12px; font-size: 0.88rem; }
.fcb--primary { background: var(--fc-green-2); border-color: var(--fc-green); color: #04140b; font-weight: 800; justify-content: center; }
.fcb--primary:hover:not(:disabled) { background: var(--fc-green); }
.fcb--ghost { background: transparent; justify-content: center; }
.fcb--call { background: linear-gradient(135deg, var(--fc-green-2), #17a05a); border-color: var(--fc-green); color: #04140b; font-weight: 800; justify-content: center; }
.fcb--call:hover { background: var(--fc-green); }
.fcb.is-right { background: rgba(63, 240, 144, 0.28); border-color: var(--fc-green); opacity: 1; }
.fcb.is-wrong { background: rgba(224, 69, 58, 0.3); border-color: var(--fc-red); opacity: 1; }
.fcb.is-picked { border-color: var(--fc-gold); box-shadow: inset 0 0 0 1px var(--fc-gold); }
.fcb.is-her { border-color: #8fc8ff; box-shadow: inset 0 0 0 1px #8fc8ff; opacity: 1; }
.fcb.is-her::after { content: var(--who, 'Cara'); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8fc8ff; }
.fcb.is-right.is-picked, .fcb.is-picked:disabled { opacity: 1; }

/* the call bar */
.fcbar { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; height: calc(var(--fc-bar) + env(safe-area-inset-bottom)); box-sizing: border-box; display: flex; align-items: center; gap: 6px;
  padding: 6px max(10px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px, env(safe-area-inset-left)); background: rgba(6, 10, 8, 0.92); border-top: 1px solid var(--fc-line); }
.fcbar__call { margin-left: auto; display: flex; gap: 6px; }
.fcbar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 56px; height: 50px; padding: 0 8px; border: 0; border-radius: 14px; background: var(--fc-glass-2); cursor: pointer; font-size: 0.68rem; font-weight: 700; }
.fcbar__btn span:first-child { font-size: 1.2rem; }
.fcbar__btn:hover { background: rgba(255, 255, 255, 0.16); }
.fcbar__btn:focus-visible { outline: 2px solid var(--fc-green); }
.fcbar__btn--call { flex-direction: row; gap: 8px; min-width: 132px; font-size: 0.95rem; background: var(--fc-green-2); color: #04140b; box-shadow: 0 0 0 0 rgba(63, 240, 144, 0.6); animation: fc-call 2s ease-out infinite; }
.fcbar__btn--call:hover { background: var(--fc-green); }
@keyframes fc-call { 0% { box-shadow: 0 0 0 0 rgba(63, 240, 144, 0.55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(63, 240, 144, 0); } }
.fcbar__btn--end { background: var(--fc-red); color: #fff; }
.fcbar__btn--end:hover { background: #f05a4e; }
.fcbar__btn.is-off { background: rgba(224, 69, 58, 0.45); }

/* the sheets */
.fc__sheet { position: fixed; z-index: 8; left: 50%; transform: translateX(-50%); bottom: calc(var(--fc-bar) + 8px + env(safe-area-inset-bottom)); width: min(720px, calc(100vw - 16px)); max-height: calc(100vh - var(--fc-bar) - 80px);
  overflow: auto; box-sizing: border-box; padding: 14px; border-radius: 20px; background: rgba(12, 19, 16, 0.96); border: 1px solid var(--fc-line); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.fc__sheet[hidden] { display: none; }
.fcs__head { display: flex; align-items: center; justify-content: space-between; }
.fcs__head h2 { margin: 0; font: 800 1.15rem/1.2 var(--font-body); }
.fcs__x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--fc-glass-2); cursor: pointer; }
.fcs__lede { margin: 6px 0 10px; color: var(--fc-dim); font-size: 0.9rem; }
.fcs__tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.fcs__tab { flex: none; border: 1px solid var(--fc-line); background: transparent; border-radius: 999px; padding: 7px 12px; cursor: pointer; font-weight: 700; font-size: 0.88rem; }
.fcs__tab.is-on { background: var(--fc-green-2); border-color: var(--fc-green); color: #04140b; }
.fcs__cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 6px; }
.fcs__card { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--fc-line); }
.fcs__card.is-current { border-color: var(--fc-gold); }
.fcs__card p { margin: 0; font-size: 0.88rem; line-height: 1.4; color: var(--fc-dim); }
.fcs__card .fcs__live { color: #bff5d6; font-size: 0.8rem; }
.fcs__cardhead { display: flex; align-items: center; gap: 8px; }
.fcs__cardhead h3 { margin: 0; font-size: 1rem; }
.fcs__icon { font-size: 1.4rem; }
.fcs__acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.fcs__acts .fcb { flex: 1; justify-content: center; min-height: 40px; }
.fcs__sub { margin: 14px 0 6px; font-size: 0.9rem; color: var(--fc-dim); }
.fcs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.fcs__swatch { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; border: 2px solid var(--fc-line); cursor: pointer; font-weight: 700; background: var(--fc-glass-2); }
.fcs__swatch span { font-size: 1.5rem; }
.fcs__swatch.is-on { border-color: var(--fc-green); }
.fcs__swatch--studio { background: linear-gradient(#7f948c, #a3b3ac); color: #14202a; }
.fcs__swatch--dark { background: radial-gradient(circle at 50% 40%, #3a3f3c, #1a1d1c); }
.fcs__swatch--midnight { background: radial-gradient(circle at 50% 40%, #2c3a5a, #10162a); }
.fcs__swatch--forest { background: radial-gradient(circle at 50% 40%, #2c4a38, #101c15); }
.fcs__swatch--plum { background: radial-gradient(circle at 50% 40%, #4a2e48, #1c1020); }
.fcs__swatch--blackboard { background: linear-gradient(#5a3d24, #5a3d24) top / 100% 6px no-repeat, radial-gradient(circle at 50% 45%, #3a5a4a, #2f4a3d); }
.fcs__swatch--whiteboard { background: radial-gradient(circle at 50% 45%, #cfd2ca, #b9bcb4); color: #1d2a33; }
.fcs__swatch--lecture { background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 14px), linear-gradient(#4a3220, #6e4a2c 50%, #3c2818); }
.fcs__swatch--library { background: repeating-linear-gradient(90deg, #7a2e24 0 6px, #2e4a6b 6px 11px, #3d5a34 11px 18px, #8a6a2a 18px 23px), #2a1c12; }
.fcs__swatch--glow { background: linear-gradient(#6b4a86, #d0717a 45%, #f6a46a); }
.fcs__swatch--tent { background: linear-gradient(#8f8055, #c2ae7c); color: #2a2210; }
.fcs__swatch--night { background: linear-gradient(#050a1e, #253a6a); }

/* the end of a call */
.fc__summary { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.55); }
.fc__summary[hidden] { display: none; }
.fcsum__card { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; padding: 20px; border-radius: 22px; background: rgba(12, 19, 16, 0.97); border: 1px solid var(--fc-line); text-align: center; display: grid; gap: 10px; justify-items: center; }
.fcsum__face { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--fc-green); }
.fcsum__card h2 { margin: 0; font: 800 1.4rem/1.2 var(--font-body); }
.fcsum__time { margin: 0; color: var(--fc-dim); }
.fcsum__time b { color: var(--fc-green); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.fcsum__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; width: 100%; text-align: left; }
.fcsum__cols section { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); }
.fcsum__cols h3 { margin: 0 0 6px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-gold); }
.fcsum__cols ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.92rem; line-height: 1.35; }
.fcsum__acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fcsum__acts .fcb { justify-content: center; }
.fc__toast { position: fixed; z-index: 10; top: calc(var(--fc-top) + 14px); left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: var(--fc-glass); font-weight: 700; pointer-events: none; }
.fc__toast[hidden] { display: none; }

/* a folded panel: only its header */
.fc.is-folded .fc__panel { max-height: none; }
.fc .phone { z-index: 60; }

/* wider than tall: the panel down the right, the picture on the left */
@media (min-aspect-ratio: 1/1) {
  .fc__panel { left: auto; right: 0; top: calc(var(--fc-top) + env(safe-area-inset-top)); bottom: calc(var(--fc-bar) + env(safe-area-inset-bottom)); width: var(--fc-side); max-height: none; border-radius: 18px 0 0 18px; border-top: 0; border-left: 1px solid var(--fc-line); }
  .fc.is-folded .fc__panel { bottom: auto; }
  .fc__self { right: calc(var(--fc-side) + 12px); }
  .fc__cap { left: calc((100vw - var(--fc-side)) / 2); bottom: calc(var(--fc-bar) + 14px + env(safe-area-inset-bottom)); width: min(520px, calc(100vw - var(--fc-side) - 32px)); }
}
/* a phone on its side: everything a little tighter */
@media (min-aspect-ratio: 1/1) and (max-height: 500px) {
  :root { --fc-bar: 52px; --fc-top: 46px; --fc-side: min(380px, 48vw); }
  .fcbar__btn { height: 42px; min-width: 48px; }
  .fcbar__btn span:last-child { display: none; }
  .fcbar__btn--call span:last-child { display: inline; }
  .fcg__big { font-size: 1.5rem; }
  .fc__self { display: none; }
  .fcb--pad { min-height: 52px; }
  .fcb--pad .fcb__icon { font-size: 1.4rem; }
}
/* a narrow phone: smaller bar labels */
@media (max-width: 400px) {
  .fcbar__btn { min-width: 48px; padding: 0 6px; }
  .fc__back { padding: 7px 10px; }
  .fcg__btns--answer { grid-template-columns: 1fr 1fr; }
  .fcb { font-size: 0.88rem; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) { .fcbar__btn--call, .fc__loading img { animation: none; } }

/* a narrow phone held upright: Base's own camera tile, always off, is a small round badge (on its side it is hidden,
   above); a line through it says off */
@media (max-width: 560px) {
  .fc__self { width: 34px; height: 34px; border-radius: 50%; gap: 0; }
  .fc__self small { display: none; }
  .fc__self span { width: auto; height: auto; background: none; font-size: 0.9rem; opacity: 0.75; }
  .fc__self::after { content: ''; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; border-radius: 1px; background: var(--fc-dim); transform: rotate(-45deg); opacity: 0.8; }
}

/* ---- the classroom (facecall.html?class=1): the teachers, and the board the teacher writes on (docs/115) ---- */
/* the chat in the side panel: what the teacher says, what Base says or types, and a line to type on */
.fcg__chat { display: grid; gap: 6px; }
.fcg__log { display: grid; gap: 6px; align-content: start; max-height: 32vh; min-height: 84px; overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--fc-line); scrollbar-width: thin; }
.fcg__hello { margin: 0; color: var(--fc-dim); font-size: 0.85rem; }
.fcg__msg { margin: 0; padding: 6px 10px; border-radius: 12px; max-width: 92%; font-size: 0.92rem; line-height: 1.4; }
.fcg__msg b { display: block; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 2px; }
.fcg__msg.is-teacher { justify-self: start; background: rgba(63, 240, 144, 0.1); border: 1px solid rgba(63, 240, 144, 0.25); }
.fcg__msg.is-teacher b { color: var(--fc-green); }
.fcg__msg.is-you { justify-self: end; background: rgba(140, 180, 255, 0.12); border: 1px solid rgba(140, 180, 255, 0.28); }
.fcg__msg.is-you b { color: #9ec0ff; text-align: right; }
.fcg__say { display: flex; gap: 6px; }
.fcg__say input { flex: 1; min-width: 0; min-height: 42px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--fc-line); background: rgba(255, 255, 255, 0.08); color: var(--fc-text); font: 500 0.95rem var(--font-body); }
.fcg__say input:focus { outline: none; border-color: var(--fc-green); }
.fcg__chat:not(.is-live) .fcg__say { opacity: 0.7; }
@media (max-aspect-ratio: 1/1) { .fcg__log { max-height: 18vh; } }
.fcg__tutors { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.fcg__tutors::-webkit-scrollbar { display: none; }
.fcg__tutor { flex: none; display: grid; justify-items: center; gap: 2px; padding: 4px 6px 3px; border-radius: 12px; border: 1.5px solid transparent; background: rgba(255, 255, 255, 0.05); color: var(--fc-text); font: 600 0.72rem var(--font-body); cursor: pointer; }
.fcg__tutor img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.2); }
.fcg__tutor.is-on { border-color: var(--fc-green); background: rgba(63, 240, 144, 0.1); }
.fcg__tutor.is-on img { border-color: var(--fc-green); }
.fcg__tutor:hover, .fcg__tutor:focus-visible { border-color: rgba(255, 255, 255, 0.4); outline: none; }
.fcg__board { border-radius: 12px; padding: 12px 14px; border: 6px solid #5a3d24; box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35); }
.fcg__board h3 { margin: 0 0 6px; font-size: 1.05rem; text-decoration: underline; text-underline-offset: 4px; }
.fcg__board p { margin: 0 0 4px; font-size: 1rem; line-height: 1.35; }
.fcg__board--chalk { background: radial-gradient(circle at 50% 40%, #3a5a4a, #2a4236); color: #eef3ea; font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; text-shadow: 0 0 1px rgba(255, 255, 255, 0.4); }
.fcg__board--marker { background: #eceee9; color: #16325f; border-color: #a9afb3; font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; }
.fcg__board--marker h3 { color: #b0281c; }

/* the Shop's backdrops (docs/102): painted swatches from wardrobe.js; locked ones show a price, a second tap buys */
.fcs__swatch.is-shop { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.fcs__swatch.is-locked { border-style: dashed; border-color: rgba(255, 214, 107, 0.7); }
.fcs__swatch.is-ask { border-style: solid; border-color: #ffd66b; box-shadow: 0 0 0 2px rgba(255, 214, 107, 0.35), 0 0 18px rgba(255, 214, 107, 0.45); }
.fcs__price { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: rgba(10, 14, 12, 0.72); color: #ffd66b; font-size: 0.72rem; font-weight: 800; text-shadow: none; }
.fcs__swatch.is-ask .fcs__price { background: linear-gradient(135deg, #ffd36b, #ff9a3d); color: #2a1604; }

/* ---- the sketchbook call (facecall.html?sketch=1, game/facecall/sketchcall.js): her sketchbook (css/call.css, as on a
   chapter's video call) down the left of a wide screen, across the bottom of a tall one; she is framed in the rest */
.fc.is-sketchcall { --skw: min(60vw, 1040px, calc((100vh - 300px) * 1.4286 + 44px)); }
.fc.is-sketchcall .fc__panel { display: none; }
.fc__sk { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.fc__sk .sk { top: calc(var(--fc-top) + 16px + env(safe-area-inset-top)); bottom: calc(var(--fc-bar) + 12px + env(safe-area-inset-bottom)); left: max(14px, env(safe-area-inset-left)); }
.fc__sk .sk__asks [data-ask="map"], .fc__sk .sk__asks [data-ask="way"], .fc__sk .sk__asks [data-ask="plan"] { display: none; }
.fc.is-bookopen .fc__self { right: max(12px, env(safe-area-inset-right)); }
.fcbar__btn.is-on { background: rgba(242, 194, 37, 0.3); }
@media (min-aspect-ratio: 1/1) {
  .fc.is-bookopen .fc__cap { left: calc((100vw + 14px + max(420px, var(--skw))) / 2); width: min(420px, calc(100vw - max(420px, var(--skw)) - 44px)); }
}
@media (max-aspect-ratio: 1/1) {
  .fc__sk .sk { left: 8px; right: 8px; width: auto; top: 42vh; }
  .fc.is-bookopen .fc__cap { bottom: calc(58vh + 8px); width: min(520px, calc(100vw - 24px)); }
}
/* the shelves of her drawings */
.fcs__head h2 .fcd__count { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(242, 194, 37, 0.22); color: var(--fc-gold); font-size: 0.72rem; vertical-align: middle; }
.fcd__bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.fcd__find { flex: 1 1 200px; min-width: 0; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--fc-line); background: rgba(255, 255, 255, 0.08); color: var(--fc-text); font: 500 0.95rem var(--font-body); }
.fcd__find:focus { outline: none; border-color: var(--fc-gold); }
.fcd__chip { min-height: 40px; padding: 6px 12px; border: 1px solid var(--fc-line); border-radius: 999px; background: var(--fc-glass-2); cursor: pointer; font-weight: 700; font-size: 0.85rem; }
.fcd__chip:hover { background: rgba(255, 255, 255, 0.16); }
.fcd__chip[aria-pressed="true"] { background: rgba(255, 208, 120, 0.3); border-color: #ffd078; }
.fcs__tab small { opacity: 0.65; font-weight: 600; }
.fcd__styles { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.fcd__styles b { flex: none; font-size: 0.78rem; color: var(--fc-dim); }
.fcd__styles > div { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.fcd__style { flex: none; display: flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--fc-line); border-radius: 999px; background: transparent; cursor: pointer; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.fc .fcd__style.is-on { background: #fbf6e9; color: #2c4236; border-color: #fbf6e9; }
.fcd__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; }
.fc .fcd__tile { display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; padding: 6px 4px 6px; border: 1px solid var(--fc-line); border-radius: 12px; background: #fbf6e9; color: #3b3a42; cursor: pointer; }
.fcd__pic { display: block; width: 100%; aspect-ratio: 100 / 70; font-family: 'Caveat', 'Segoe Print', cursive; font-weight: 600; }
.fcd__tile b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 1.02rem/1.15 'Caveat', 'Segoe Print', cursive; }
.fcd__tile b span { font-size: 0.85em; }
.fcd__tile:hover { background: #fff8e4; box-shadow: 0 0 0 2px rgba(242, 194, 37, 0.6); }
.fcd__tile.is-on { box-shadow: 0 0 0 2px #d6412e; }
.fcd__none { grid-column: 1 / -1; margin: 10px 0; color: var(--fc-dim); text-align: center; }
@media (max-width: 400px) { .fcd__grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .fcd__chip { padding: 6px 10px; font-size: 0.8rem; } }
@media (max-width: 480px) { .fc.is-sketchcall:not([data-call="idle"]) .fcbar__btn[data-bar="frame"] { display: none; } }

/* a call from one of her places (docs/157): the Things sheet's buttons, and the name of a thing under the mouse */
.fcs__grid--things { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.fcs__thing { font-size: 0.85rem; line-height: 1.2; text-align: center; min-height: 64px; }
.fcs__thing span { font-size: 1.45rem; }
.fc__tip { position: fixed; z-index: 7; padding: 5px 10px; border-radius: 999px; background: rgba(8, 14, 11, 0.82); color: #fff; font-weight: 700; font-size: 0.85rem; pointer-events: none; white-space: nowrap; }
.fc__tip[hidden] { display: none; }
@media (max-width: 400px) { .fcs__grid--things { grid-template-columns: repeat(3, 1fr); gap: 6px; } .fcs__thing { font-size: 0.74rem; padding: 8px 4px; } }