/* =====================================================================
   Parlons français · shared styles (Build 1 · foundations)
   Every value below comes from the Figma « Components · shared library »
   and the spacing rules set on the solo screens (1 Nov 2026).
   Sizes: phone < 700 px · iPad 700–1099 px · desktop ≥ 1100 px
   ===================================================================== */

:root {
  /* colours */
  --ink: #3D311E;        /* text, main buttons (dark brown is for main buttons only) */
  --muted: #6B5A40;      /* labels, captions */
  --line: #E6DCC8;       /* borders, tracks */
  --page: #FFFDF7;       /* page background (cream) */
  --panel: #FFFFFF;      /* panels, fields */
  --sand: #F6EFE1;       /* neutral tag, word badge, current nav item */
  --off: #B8AC96;        /* empty checkbox and radio rings */
  --yes: #2E7D4F; --yes-bg: #E6F4EA;   /* right (only after checking) */
  --no: #B3261E;  --no-bg: #FBE9E7;    /* wrong (only after checking) */
  --disabled: #E9E0CF; --disabled-text: #A89C88;
  --play: #FFD233;       /* the large play button (Ça s'entend) */
  /* type */
  --font-display: "Kalam", "Comic Neue", cursive;
  --font-text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lh-text: 1.4;
  /* type scale (desktop and iPad · phone below) */
  --fs-title: 32px;      /* screen title, Kalam */
  --fs-instruction: 20px;/* instruction panel, Kalam, 125 % */
  --fs-body: 17px; --fs-label: 15px; --fs-caption: 15px; --fs-small: 14px; --fs-tag: 13px;
  --fs-button: 17px;
  /* spacing rules */
  --column: 640px;       /* content column on desktop and iPad */
  --gap-column: 20px;    /* between panels */
  --pad-panel: 24px;     /* panel padding */
  --gap-block: 20px;     /* between blocks inside a panel */
  --gap-list: 10px;      /* between rows of a list */
  --gap-label: 8px;      /* between a label and its content */
  --pad-instruction: 18px 32px;
  --btn-h: 56px; --btn-w: 260px;
  --radius-panel: 20px; --radius-btn: 14px;
  color-scheme: light;
}
@media (min-width: 700px) and (max-width: 1099px) { :root { --btn-h: 60px; --btn-w: 312px; } }
@media (max-width: 699px) {
  :root {
    --fs-title: 28px; --fs-body: 16px; --fs-label: 14px; --fs-caption: 14px; --fs-button: 16px;
    --gap-column: 16px; --pad-panel: 16px; --gap-block: 16px; --gap-list: 8px; --gap-label: 6px;
    --pad-instruction: 12px 16px; --btn-h: 52px; --btn-w: 100%;
  }
}

/* ---------- base ---------- */
.pf { font-family: var(--font-text); color: var(--ink); background: var(--page); line-height: var(--lh-text); font-size: var(--fs-body); }
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf-title { font: 700 var(--fs-title)/1.15 var(--font-display); margin: 0; }
.pf-label { font: 700 var(--fs-label)/var(--lh-text) var(--font-text); color: var(--muted); margin: 0; }
.pf-caption { font: 400 var(--fs-caption)/var(--lh-text) var(--font-text); color: var(--muted); margin: 0; max-width: 460px; }
.pf-text { font: 400 var(--fs-body)/var(--lh-text) var(--font-text); margin: 0; max-width: 460px; }
@media (max-width: 699px) { .pf-caption, .pf-text { max-width: none; } }

/* ---------- layout ---------- */
.pf-column { width: min(100% - 24px, var(--column)); margin: 0 auto; display: flex; flex-direction: column; gap: var(--gap-column); }
.pf-panel { background: var(--panel); border: 1.2px solid var(--line); border-radius: var(--radius-panel); padding: var(--pad-panel); display: flex; flex-direction: column; gap: var(--gap-block); }
.pf-group { display: flex; flex-direction: column; gap: var(--gap-label); }      /* a label and its content */
.pf-list { display: flex; flex-direction: column; gap: var(--gap-list); }        /* rows of a list */
.pf-instruction { background: var(--panel); border: 1.2px solid var(--line); border-radius: var(--radius-panel); padding: var(--pad-instruction); font: 700 var(--fs-instruction)/1.25 var(--font-display); margin: 0; }

/* ---------- Button · primary, secondary, disabled ---------- */
.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--btn-w); height: var(--btn-h); padding: 0 20px; border-radius: var(--radius-btn); border: 1.5px solid var(--ink); font: 700 var(--fs-button)/var(--lh-text) var(--font-text); cursor: pointer; text-decoration: none; white-space: nowrap; }
.pf-btn--primary { background: var(--ink); color: var(--page); }
.pf-btn--secondary { background: var(--panel); color: var(--ink); }
.pf-btn:disabled, .pf-btn--disabled { background: var(--disabled); color: var(--disabled-text); border-color: var(--disabled); cursor: not-allowed; }
.pf-btn--hug { min-width: 0; padding: 0 24px; }   /* rows of three buttons on desktop and iPad */
.pf-btn:focus-visible { outline: 3px solid #5BA8FF; outline-offset: 2px; }
.pf-actions { display: flex; gap: 16px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 699px) { .pf-actions { flex-direction: column; gap: 12px; } .pf-actions .pf-btn { width: 100%; } }

/* ---------- Pill (top bar: level, timer, progress, score) ---------- */
.pf-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 20px; background: var(--panel); border: 1.2px solid var(--line); font: 700 14px/var(--lh-text) var(--font-text); color: var(--ink); white-space: nowrap; }

/* ---------- Tag (information: neutral, good, bad) ---------- */
.pf-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 12px; font: 700 var(--fs-tag)/var(--lh-text) var(--font-text); white-space: nowrap; }
.pf-tag--neutral { background: var(--sand); color: var(--muted); }
.pf-tag--good { background: var(--yes-bg); color: var(--yes); }
.pf-tag--bad { background: var(--no-bg); color: var(--no); }

/* ---------- Badge (a word the player works with) ---------- */
.pf-badge { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 20px; font: 700 20px/1.2 var(--font-display); white-space: nowrap; }
.pf-badge--word { background: var(--sand); color: var(--ink); }
.pf-badge--banned { background: var(--no-bg); color: var(--no); text-decoration: line-through; }
.pf-badge--selected { background: var(--panel); color: var(--ink); border: 2px solid var(--ink); }
@media (max-width: 699px) { .pf-badge { font-size: 18px; } }

/* ---------- Toggle (segmented control for settings) ---------- */
.pf-toggle { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--panel); border: 1.2px solid var(--line); }
.pf-toggle__item { flex: 1; min-height: 48px; padding: 12px 20px; border-radius: 10px; border: 2px solid transparent; background: transparent; font: 700 16px/var(--lh-text) var(--font-text); color: var(--ink); cursor: pointer; }
.pf-toggle__item[aria-pressed="true"] { background: var(--panel); border-color: var(--ink); }
@media (max-width: 699px) { .pf-toggle__item { min-height: 44px; padding: 10px 12px; font-size: 15px; } }

/* ---------- Checkbox ---------- */
.pf-check { appearance: none; width: 22px; height: 22px; margin: 0; flex: none; border-radius: 6px; background: var(--panel); border: 1.5px solid var(--off); display: inline-grid; place-content: center; cursor: pointer; }
.pf-check:checked { border: 2px solid var(--ink); }
.pf-check:checked::after { content: ""; width: 14px; height: 14px; background: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D311E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* ---------- Option row (answers: default, selected, right, wrong) ---------- */
.pf-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1.2px solid var(--line); font: 400 17px/var(--lh-text) var(--font-text); color: var(--ink); text-align: left; cursor: pointer; }
.pf-option::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--off); }
.pf-option[aria-checked="true"] { border: 2px solid var(--ink); font-weight: 700; }
.pf-option[aria-checked="true"]::before { box-shadow: inset 0 0 0 6px var(--ink); }
.pf-option--right { background: var(--yes-bg); border: 2px solid var(--yes); color: var(--yes); font-weight: 700; }
.pf-option--right::before { box-shadow: inset 0 0 0 6px var(--yes); }
.pf-option--wrong { background: var(--no-bg); border: 2px solid var(--no); color: var(--no); font-weight: 700; }
.pf-option--wrong::before { box-shadow: inset 0 0 0 6px var(--no); }
@media (max-width: 699px) { .pf-option { padding: 10px 16px; font-size: 16px; } }

/* ---------- Level chip (phone) and level box (desktop, iPad) ---------- */
.pf-level-chip { display: inline-flex; flex-direction: column; align-items: center; width: 76px; padding: 8px 12px; border-radius: 14px; background: var(--panel); border: 1.2px solid var(--line); cursor: pointer; }
.pf-level-chip b { font: 700 20px/1.15 var(--font-display); color: var(--ink); }
.pf-level-chip span { font: 700 12px/var(--lh-text) var(--font-text); color: var(--muted); }
.pf-level-chip[aria-pressed="true"] { border: 2px solid var(--ink); }
.pf-level-chip[aria-pressed="true"] span { color: var(--ink); }
.pf-level-box { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1.2px solid var(--line); cursor: pointer; }
.pf-level-box .pf-check { pointer-events: none; }
.pf-level-box__top { display: flex; align-items: center; gap: 10px; }
.pf-level-box__top b { font: 700 24px/1.15 var(--font-display); color: var(--ink); }
.pf-level-box__top span { font: 700 15px/var(--lh-text) var(--font-text); color: var(--muted); }
.pf-level-box p { margin: 2px 0 0; font: 400 15px/var(--lh-text) var(--font-text); color: var(--muted); }
.pf-level-box[aria-pressed="true"] { border: 2px solid var(--ink); }
.pf-level-box[aria-pressed="true"] .pf-level-box__top span, .pf-level-box[aria-pressed="true"] p { color: var(--ink); }

/* ---------- Theme chip (Petit Bac) ---------- */
.pf-theme-chip { display: inline-flex; padding: 8px 14px; border-radius: 20px; background: var(--panel); border: 1.2px solid var(--line); font: 700 15px/var(--lh-text) var(--font-text); color: var(--ink); cursor: pointer; }
.pf-theme-chip[aria-pressed="true"] { border: 2px solid var(--ink); }

/* ---------- Play (large: Ça s'entend · small: « Both », « Play ») ---------- */
.pf-play { display: inline-grid; place-content: center; width: 64px; height: 64px; border-radius: 32px; background: var(--play); border: 0; cursor: pointer; }
.pf-play svg { width: 30px; height: 30px; }
@media (max-width: 699px) { .pf-play { width: 56px; height: 56px; border-radius: 28px; } .pf-play svg { width: 26px; height: 26px; } }
.pf-play-small { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; background: var(--panel); border: 1.2px solid var(--line); font: 700 13px/var(--lh-text) var(--font-text); color: var(--ink); cursor: pointer; }
.pf-play-small svg { width: 14px; height: 14px; }

/* ---------- Page nav button (« ← Challenges ») ---------- */
.pf-nav-btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 14px; border-radius: 20px; background: var(--panel); border: 1.2px solid var(--line); font: 700 15px/var(--lh-text) var(--font-text); color: var(--ink); text-decoration: none; cursor: pointer; }
.pf-nav-btn svg { width: 18px; height: 18px; }

/* ---------- Score, check rows, review items (results) ---------- */
.pf-score { background: var(--panel); border: 1.2px solid var(--line); border-radius: var(--radius-panel); padding: var(--pad-panel); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pf-score__points { font: 700 56px/1.05 var(--font-display); }
.pf-score__summary { font: 400 15px/var(--lh-text) var(--font-text); color: var(--muted); text-align: center; }
@media (max-width: 699px) { .pf-score__points { font-size: 48px; } }
.pf-checklist { background: var(--panel); border: 1.2px solid var(--line); border-radius: var(--radius-panel); padding: 8px var(--pad-panel); }
.pf-check-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); font: 400 17px/var(--lh-text) var(--font-text); }
.pf-check-row:first-child { border-top: 0; }
.pf-check-row > :first-child { flex: 1; }
.pf-check-row__value { font-weight: 700; }
.pf-check-row__value--count { color: var(--no); }
.pf-check-row svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 699px) { .pf-checklist { padding: 4px var(--pad-panel); } .pf-check-row { padding: 12px 0; font-size: 16px; } }
.pf-review { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; }
.pf-review + .pf-review { border-top: 1px solid var(--line); }
.pf-review__q { font: 700 15px/var(--lh-text) var(--font-text); color: var(--muted); }
.pf-review__line { display: flex; align-items: center; gap: 8px; }
.pf-review__line svg { width: 18px; height: 18px; flex: none; }
.pf-review__right { font: 700 17px/var(--lh-text) var(--font-text); }
.pf-review__yours { font: 400 16px/var(--lh-text) var(--font-text); color: var(--muted); }
.pf-mistake { color: var(--no); text-decoration: line-through; }
.pf-fix { font-weight: 700; }

/* ---------- Example step (start screens) ---------- */
.pf-example { display: flex; flex-direction: column; }
.pf-example__step { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.pf-example__step:first-child { border-top: 0; }
.pf-example__step > .pf-example__label { flex: none; width: 112px; font: 700 13px/var(--lh-text) var(--font-text); color: var(--muted); }
.pf-example__step > :last-child { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 699px) { .pf-example__step { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0; } .pf-example__step > .pf-example__label { width: auto; } }

/* ---------- Timer bar ---------- */
.pf-timer { display: flex; flex-direction: column; gap: 6px; }
.pf-timer__label { font: 700 14px/var(--lh-text) var(--font-text); color: var(--muted); }
.pf-timer__track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pf-timer__left { height: 100%; border-radius: 4px; background: var(--ink); }

/* ---------- Main navigation (Group play · Solo play · My progress) ---------- */
.pf-mainnav { display: flex; gap: 4px; align-items: center; }
.pf-mainnav a { padding: 8px 14px; border-radius: 19px; font: 400 16px/var(--lh-text) var(--font-text); color: var(--muted); text-decoration: none; }
.pf-mainnav a[aria-current="page"] { background: var(--sand); color: var(--ink); font-weight: 700; }
@media (max-width: 699px) { .pf-mainnav { display: none; } }   /* on phone, it lives in the menu */

/* ---------- Top bar (logo · main navigation · icons) ---------- */
.pf-topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 32px; height: 72px; padding: 0 40px; background: var(--page); border-bottom: 1px solid var(--line); }
.pf-topbar__logo { font: 700 26px/1.15 var(--font-display); color: var(--ink); text-decoration: none; white-space: nowrap; }
.pf-topbar .pf-mainnav { position: absolute; left: 50%; transform: translateX(-50%); }
.pf-topbar__icons { margin-left: auto; display: flex; gap: 8px; }
.pf-icon-btn { display: inline-grid; place-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sand); border: 0; color: var(--ink); cursor: pointer; text-decoration: none; }
.pf-icon-btn svg { width: 22px; height: 22px; }
.pf-icon-btn:focus-visible, .pf-mainnav a:focus-visible, .pf-menu__item:focus-visible { outline: 3px solid #5BA8FF; outline-offset: 2px; }
@media (min-width: 700px) and (max-width: 1099px) { .pf-topbar { padding: 0 32px; } }
@media (max-width: 699px) { .pf-topbar { height: 56px; padding: 0 16px; } }

/* ---------- Menu (bottom sheet on phone, panel under the button on desktop and iPad) ---------- */
.pf-menu-dim { position: fixed; inset: 0; z-index: 40; background: rgba(61, 49, 30, .40); }
.pf-menu { position: fixed; z-index: 41; background: var(--panel); display: flex; flex-direction: column; gap: 4px; }
.pf-menu[hidden], .pf-menu-dim[hidden] { display: none; }
.pf-menu__handle { width: 40px; height: 5px; border-radius: 3px; background: var(--line); align-self: center; margin-bottom: 4px; }
.pf-menu__title { font: 700 20px/1.6 var(--font-display); color: var(--ink); margin: 0; }
.pf-menu__item { display: block; padding: 14px; border-radius: 14px; font: 400 17px/1.35 var(--font-text); color: var(--ink); text-decoration: none; }
.pf-menu__item[aria-current="page"] { background: var(--sand); font-weight: 700; }
@media (max-width: 699px) { .pf-menu { left: 0; right: 0; bottom: 0; padding: 12px 16px calc(40px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; } }
@media (min-width: 700px) { .pf-menu { top: 76px; right: 24px; width: 320px; padding: 12px 16px 16px; border-radius: 20px; border: 1.2px solid var(--line); box-shadow: 0 12px 32px -12px rgba(61,49,30,.35); } .pf-menu__handle { display: none; } }

/* ---------- Home ---------- */
.pf-home__body { padding: 96px 40px; }
.pf-home__hero { display: flex; align-items: center; gap: 60px; max-width: 1360px; margin: 0 auto; }
.pf-home__pitch { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.pf-home__intro { display: flex; flex-direction: column; gap: 12px; }
.pf-home__title { font: 700 64px/1.1 var(--font-display); margin: 0; max-width: 380px; }
.pf-home__lead { font: 400 20px/1.4 var(--font-text); color: var(--muted); margin: 0; max-width: 460px; }
.pf-home__actions { display: flex; flex-direction: column; gap: 12px; width: 350px; }
.pf-home__actions .pf-btn { width: 100%; min-width: 0; height: 56px; }
.pf-home__board { flex: none; width: 660px; }
.pf-home__board svg { display: block; width: 100%; height: auto; border-radius: 16px; }
@media (max-width: 1099px) {
  .pf-home__hero { flex-direction: column; align-items: stretch; gap: 40px; }
  .pf-home__title { max-width: none; }
  .pf-home__board { width: 100%; }
}
@media (min-width: 700px) and (max-width: 1099px) { .pf-home__body { padding: 48px 32px 64px; } .pf-home__title { font-size: 56px; } .pf-home__lead { font-size: 19px; max-width: 560px; } }
@media (max-width: 699px) {
  .pf-home__body { padding: 24px 16px 40px; } .pf-home__hero { gap: 28px; }
  .pf-home__title { font-size: 44px; } .pf-home__lead { font-size: 17px; max-width: none; }
  .pf-home__actions { width: 100%; } .pf-home__actions .pf-btn { height: 52px; font-size: 16px; }
}

/* ---------- Solo pages: page frame ---------- */
.pf-page { padding: 32px 0 40px; }
@media (max-width: 699px) { .pf-page { padding: 16px 0 30px; } .pf-page .pf-column { width: calc(100% - 24px); } }

/* ---------- Today card (solo hub) ---------- */
.pf-today { gap: 14px; }
.pf-today__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-today__goal { font: 700 30px/1.15 var(--font-display); margin: 0; }
.pf-progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pf-progress > span { display: block; height: 100%; border-radius: 4px; background: var(--muted); }
.pf-today .pf-actions { justify-content: flex-end; padding-top: 4px; gap: 12px; }
.pf-today .pf-actions .pf-btn { min-width: 0; padding: 0 24px; }
@media (max-width: 699px) { .pf-today { gap: 12px; } .pf-today__goal { font-size: 26px; } .pf-today .pf-actions { gap: 10px; padding-top: 2px; } .pf-today .pf-actions .pf-btn { width: 100%; } }

/* ---------- Challenge tiles ---------- */
.pf-tiles { display: grid; grid-template-columns: repeat(3, 186px); gap: 12px; }   /* fixed tile width, as designed */
.pf-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 126px; padding: 16px; border-radius: 16px; border: 1.5px solid; text-decoration: none; }
.pf-tile svg { width: 24px; height: 24px; }
.pf-tile b { display: block; font: 700 20px/1.15 var(--font-display); }
.pf-tile span { display: block; font: 400 14px/1.4 var(--font-text); }
@media (max-width: 699px) { .pf-tiles { grid-template-columns: repeat(2, 163px); } .pf-tile { min-height: 105px; gap: 12px; padding: 12px 16px; } .pf-tile b { font-size: 19px; } }
@media (max-width: 380px) { .pf-tiles { grid-template-columns: repeat(2, 1fr); } }   /* very small phones: tiles share the width */

/* ---------- My progress ---------- */
.pf-heading { display: flex; flex-direction: column; gap: 4px; }
.pf-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pf-figure { background: var(--panel); border: 1.2px solid var(--line); border-radius: var(--radius-panel); padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.pf-figure b { font: 700 30px/1.1 var(--font-display); }
.pf-figure span { font: 400 14px/1.4 var(--font-text); color: var(--muted); }
@media (max-width: 699px) { .pf-figures { gap: 8px; } .pf-figure { padding: 12px; } .pf-figure b { font-size: 24px; } .pf-figure span { font-size: 13px; } }
.pf-next { display: flex; align-items: center; gap: 16px; }
.pf-next > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pf-next b { font: 700 17px/1.4 var(--font-text); }
.pf-next span { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-next .pf-btn { min-width: 0; padding: 0 24px; }
@media (max-width: 699px) { .pf-next { gap: 12px; } .pf-next b { font-size: 16px; } .pf-next span { font-size: 14px; } .pf-next .pf-btn { width: auto; padding: 0 20px; } }
@media (max-width: 699px) { .pf-empty-cta .pf-btn { width: 100%; } }
.pf-stats { gap: 14px; }
.pf-stats__head { display: flex; align-items: baseline; gap: 12px; }
.pf-stats__head .pf-label { flex: 1; }
.pf-stats__head .pf-caption { font-size: 14px; text-align: right; white-space: nowrap; }
.pf-stat { display: flex; align-items: center; gap: 12px; min-height: 39px; }
.pf-stat__icon { flex: none; display: grid; place-content: center; width: 28px; height: 28px; border-radius: 14px; }
.pf-stat__icon svg { width: 16px; height: 16px; }
.pf-stat__text { flex: none; width: 200px; display: flex; flex-direction: column; }
.pf-stat__text b { font: 700 15px/1.4 var(--font-text); }
.pf-stat__text span { font: 400 13px/1.4 var(--font-text); color: var(--muted); }
.pf-stat__text--inline { flex-direction: row; align-items: baseline; gap: 8px; width: 240px; }
.pf-stat .pf-progress { flex: 1; }
.pf-stat__value { flex: none; width: 72px; text-align: right; font: 700 15px/1.4 var(--font-text); }
@media (max-width: 699px) { .pf-stat__text { width: 120px; } .pf-stat__text--inline { width: 160px; } .pf-stat__text b { font-size: 14px; } .pf-stat__text span { font-size: 12px; } .pf-stat__value { width: 56px; font-size: 14px; } .pf-stats__head .pf-caption { font-size: 13px; } }
.pf-today__line, .pf-heading__lead { font: 400 16px/1.4 var(--font-text); color: var(--muted); margin: 0; max-width: 460px; }
@media (max-width: 699px) { .pf-today__line, .pf-heading__lead { font-size: 15px; max-width: none; } }

/* ---------- Start screens ---------- */
.pf-start .pf-column { padding-top: 20px; }
@media (max-width: 699px) { .pf-start .pf-column { padding-top: 10px; } }
.pf-identity { display: flex; align-items: center; gap: 14px; }
.pf-identity__badge { flex: none; display: grid; place-content: center; width: 56px; height: 56px; border-radius: 14px; border: 1.5px solid; }
.pf-identity__badge svg { width: 30px; height: 30px; }
.pf-identity__name { font: 700 28px/1.15 var(--font-display); margin: 0; }
.pf-identity__desc { font: 400 16px/1.4 var(--font-text); color: var(--muted); margin: 0; }
@media (max-width: 699px) { .pf-identity__badge { width: 40px; height: 40px; } .pf-identity__badge svg { width: 22px; height: 22px; } .pf-identity__name { font-size: 24px; } .pf-identity__desc { font-size: 15px; } }
.pf-example__step .pf-example__prompt { font: 700 22px/1.15 var(--font-display); }
.pf-example__step .pf-example__strong { font: 700 16px/1.4 var(--font-text); }
.pf-example__step .pf-example__check { font: 700 15px/1.4 var(--font-text); color: var(--yes); }
.pf-example__step .pf-example__check--bad { color: var(--no); }
.pf-example__write { font: 400 16px/1.4 var(--font-text); margin: 0; }
.pf-example__write b { font-weight: 700; }
.pf-example__step > .pf-example__checks { gap: 4px 16px; }   /* the checks, side by side with a clear gap */
@media (max-width: 699px) { .pf-example__step .pf-example__prompt { font-size: 20px; } .pf-example__step .pf-example__strong, .pf-example__write { font-size: 15px; } .pf-example__step .pf-example__check { font-size: 14px; } }
.pf-levels { gap: 8px; }
.pf-levels__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-levels__chips { display: none; gap: 8px; }
.pf-levels__covers { display: none; font: 400 14px/1.4 var(--font-text); color: var(--muted); margin: 0; }
@media (max-width: 699px) { .pf-levels { gap: 16px; } .pf-levels__grid { display: none; } .pf-levels__chips { display: flex; } .pf-levels__covers { display: block; } }
.pf-start .pf-actions { justify-content: flex-end; }
/* Ça s'entend: the round in figures */
.pf-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pf-fact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px; border-radius: 12px; background: var(--sand); }
.pf-fact b { font: 700 26px/1.15 var(--font-display); }
.pf-fact span { font: 700 13px/1.4 var(--font-text); color: var(--muted); }
@media (max-width: 699px) { .pf-facts { gap: 8px; } .pf-fact { padding: 10px; } .pf-fact b { font-size: 22px; } .pf-fact span { font-size: 12px; } }
/* Petit Bac: themes */
.pf-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-theme { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 8px 10px 8px 8px; border-radius: 14px; background: var(--panel); border: 1.2px solid var(--line); font: 400 14px/1.25 var(--font-text); color: var(--ink); text-align: left; cursor: pointer; }
.pf-theme[aria-pressed="true"] { border: 2px solid var(--ink); font-weight: 700; }
.pf-theme__icon { flex: none; display: grid; place-content: center; width: 32px; height: 32px; border-radius: 16px; background: #D6F2F2; }
.pf-theme__icon svg { width: 20px; height: 20px; }
@media (max-width: 699px) { .pf-themes { grid-template-columns: 1fr 1fr; } .pf-theme { min-height: 44px; padding: 6px 10px 6px 8px; font-size: 13px; } .pf-theme__icon { width: 30px; height: 30px; border-radius: 15px; } .pf-theme__icon svg { width: 18px; height: 18px; } }
/* Vite, vite !: level pills */
.pf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-level-pill { padding: 8px 16px; border-radius: 20px; background: var(--panel); border: 1.2px solid var(--line); font: 700 18px/1.15 var(--font-display); color: var(--ink); cursor: pointer; }
.pf-level-pill[aria-pressed="true"] { border: 2px solid var(--ink); }

/* ---------- Inside a challenge: context top bar, button at the bottom of the screen ---------- */
.pf-topbar--challenge { border-bottom: 3px solid var(--deck-accent, var(--line)); }
.pf-topbar__context { font: 700 15px/1.4 var(--font-text); color: var(--muted); }
.pf-start { min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); display: flex; flex-direction: column; padding: 0; }
.pf-start .pf-column { flex: 1; padding: 20px 0 40px; }
.pf-start .pf-actions { margin-top: auto; }
@media (max-width: 699px) { .pf-start { min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); } .pf-start .pf-column { padding: 10px 0 30px; } }

.pf-topbar__deck { display: inline-flex; align-items: center; gap: 8px; font: 700 18px/1.2 var(--font-display); }
.pf-topbar__deck svg { width: 20px; height: 20px; }

/* ---------- In a challenge ---------- */
.pf-topbar--play { gap: 12px; }
.pf-topbar--play .pf-topbar__deck { font-size: 20px; }
.pf-topbar__pills { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.pf-topbar--play .pf-icon-btn { border-radius: 20px; }
@media (max-width: 699px) { .pf-topbar--play { padding: 0 12px; gap: 8px; } .pf-topbar__pills { gap: 8px; } .pf-topbar--play .pf-icon-btn { width: 36px; height: 36px; border-radius: 18px; } .pf-topbar--play .pf-topbar__deck { font-size: 18px; } }
.pf-play-page { min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); display: flex; flex-direction: column; }
.pf-play-page .pf-column { flex: 1; padding: 20px 0 40px; }
.pf-play-page .pf-actions { margin-top: auto; justify-content: flex-end; }   /* buttons grouped on the right, as designed */
@media (max-width: 699px) { .pf-play-page { min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); } .pf-play-page .pf-column { width: calc(100% - 24px); padding: 10px 0 30px; } .pf-play-page .pf-actions { flex-direction: column-reverse; } }
.pf-prompt { display: flex; flex-direction: column; gap: 8px; }
.pf-prompt__big { font: 700 40px/1.15 var(--font-display); margin: 0; }
.pf-prompt__big--q { font-size: 36px; }
.pf-prompt__line { font: 400 17px/1.4 var(--font-text); margin: 0; }
.pf-prompt__line b { font-weight: 700; }
@media (max-width: 699px) { .pf-prompt { gap: 6px; } .pf-prompt__big { font-size: 32px; } .pf-prompt__big--q { font-size: 26px; } .pf-prompt__line { font-size: 16px; } }
.pf-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-answer { padding: 16px; border-radius: 14px; background: var(--panel); border: 1.2px solid var(--line); font: 400 18px/1.4 var(--font-text); color: var(--ink); text-align: left; cursor: pointer; }
.pf-answer[aria-checked="true"] { border: 2px solid var(--ink); font-weight: 700; }
.pf-answer--right { background: var(--yes-bg); border: 2px solid var(--yes); color: var(--yes); font-weight: 700; }
.pf-answer--wrong { background: var(--no-bg); border: 2px solid var(--no); color: var(--no); font-weight: 700; }
.pf-answer:disabled { cursor: default; }
@media (max-width: 699px) { .pf-answers { grid-template-columns: 1fr; gap: 8px; } .pf-answer { padding: 14px 16px; font-size: 17px; } }
.pf-verdict { display: flex; flex-direction: column; gap: 4px; }
.pf-verdict b { font: 700 17px/1.4 var(--font-text); color: var(--yes); }
.pf-verdict b.pf-verdict--bad { color: var(--no); }
.pf-verdict span { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-listen { display: flex; align-items: center; gap: 16px; }
.pf-listen b { display: block; font: 700 17px/1.4 var(--font-text); }
.pf-listen span { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
/* the « Leave this challenge? » dialog */
.pf-dialog-dim { position: fixed; inset: 0; z-index: 50; background: rgba(61, 49, 30, .45); display: grid; place-items: center; padding: 16px; }
.pf-dialog { width: min(440px, 100%); background: var(--panel); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 24px; box-shadow: 0 20px 48px -16px rgba(61,49,30,.4); }
.pf-dialog h2 { font: 700 24px/1.25 var(--font-display); margin: 0 0 8px; }
.pf-dialog p { font: 400 17px/1.4 var(--font-text); margin: 0; }
.pf-dialog .pf-actions { justify-content: stretch; gap: 12px; }
.pf-dialog .pf-actions .pf-btn { flex: 1; min-width: 0; }
@media (max-width: 699px) { .pf-dialog { padding: 20px; gap: 20px; } .pf-dialog h2 { font-size: 22px; } .pf-dialog p { font-size: 16px; } .pf-dialog .pf-actions { flex-direction: column-reverse; } }
/* Vite, vite !: typing */
.pf-type { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1.2px solid var(--line); background: var(--panel); font: 700 28px/1.2 var(--font-display); color: var(--ink); }
.pf-type:focus { outline: none; border: 2px solid var(--ink); }
.pf-accents { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-accent { min-width: 44px; height: 44px; border-radius: 12px; background: var(--sand); border: 0; font: 700 18px/1 var(--font-text); color: var(--ink); cursor: pointer; }
.pf-link { align-self: flex-start; background: none; border: 0; padding: 4px 0; font: 700 15px/1.4 var(--font-text); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pf-option:disabled { cursor: default; }

/* ---------- Free mode: writing fields, self-check ---------- */
.pf-field { width: 100%; min-height: 120px; padding: 14px 16px; border-radius: 14px; border: 1.2px solid var(--line); background: var(--panel); font: 400 17px/1.4 var(--font-text); color: var(--ink); resize: vertical; }
.pf-field:focus { outline: none; border: 2px solid var(--ink); }
.pf-field--line { min-height: 0; resize: none; font-weight: 600; }
.pf-field-meta { display: flex; justify-content: flex-end; font: 400 13px/1.4 var(--font-text); color: var(--muted); }
.pf-start-line { font: 700 30px/1.2 var(--font-display); margin: 0; }
.pf-word { font: 700 36px/1.15 var(--font-display); margin: 0; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-flag { font: 700 14px/1.4 var(--font-text); color: var(--no); }
.pf-self { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1.2px solid var(--line); font: 400 17px/1.4 var(--font-text); color: var(--ink); text-align: left; cursor: pointer; }
.pf-self .pf-check { pointer-events: none; }
.pf-self[aria-checked="true"] { border: 2px solid var(--ink); font-weight: 700; }
.pf-self--empty { background: var(--sand); border-color: transparent; color: var(--muted); cursor: default; }
.pf-auto { font: 700 15px/1.4 var(--font-text); color: var(--yes); margin: 0; }
.pf-auto--bad { color: var(--no); }
.pf-letter { display: flex; align-items: center; gap: 20px; }
.pf-letter b { display: grid; place-content: center; width: 72px; height: 72px; border-radius: 16px; background: #D6F2F2; border: 1.5px solid #4CC9CB; font: 700 40px/1 var(--font-display); color: #004749; }
.pf-letter span { display: block; font: 700 17px/1.4 var(--font-text); }
.pf-letter small { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-cat { display: flex; flex-direction: column; gap: 8px; }
.pf-words { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.pf-words span { display: block; font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-words b { font: 600 17px/1.4 var(--font-text); }
.pf-check-row svg.pf-x { width: 20px; height: 20px; }
@media (max-width: 699px) { .pf-field { font-size: 16px; } .pf-start-line { font-size: 24px; } .pf-word { font-size: 30px; } .pf-self { padding: 12px 16px; font-size: 16px; } .pf-auto { font-size: 14px; } .pf-words { grid-template-columns: 1fr; } .pf-letter b { width: 60px; height: 60px; font-size: 34px; } }
/* the writing field: label, text and count inside one bordered box, as designed */
.pf-fieldbox { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--panel); }
.pf-fieldbox:focus-within, .pf-fieldbox--filled { border-color: var(--ink); }
.pf-fieldbox textarea { width: 100%; min-height: 64px; border: 0; padding: 0; background: transparent; font: 400 17px/1.4 var(--font-text); color: var(--ink); resize: vertical; }
.pf-fieldbox textarea:focus { outline: none; }
.pf-fieldbox--panel { border-radius: 20px; padding: 24px; }
@media (max-width: 699px) { .pf-fieldbox textarea { font-size: 16px; } .pf-fieldbox--panel { padding: 16px; } }
.pf-field--line { padding: 12px 14px; border-radius: 10px; border-width: 1.2px; font-weight: 600; }

/* ---------- Correction states (checking · couldn't check · daily limit) ---------- */
.pf-fieldbox--locked { background: #FBF7EF; border-color: var(--line) !important; }
.pf-fieldbox--locked textarea, .pf-field[readonly] { color: var(--ink); }
.pf-message { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--sand); }
.pf-message b { font: 700 16px/1.4 var(--font-text); color: var(--ink); }
.pf-message span { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-message--bad { background: var(--no-bg); }
.pf-message--bad b, .pf-message--bad span { color: var(--no); }
@media (max-width: 699px) { .pf-message { padding: 12px 16px; } .pf-message b { font-size: 15px; } .pf-message span { font-size: 14px; } }
.pf-why { font: 400 15px/1.4 var(--font-text); color: var(--muted); margin: 0; }
.pf-btn--busy { pointer-events: none; }   /* « Checking… »: keeps the main button's look while the app works */

/* ---------- Au guichet: goal and phrases, conversation ---------- */
.pf-goals { display: flex; flex-direction: column; gap: 8px; }
.pf-goal { display: flex; align-items: center; gap: 10px; font: 400 17px/1.4 var(--font-text); color: var(--muted); }
.pf-goal__mark { flex: none; display: grid; place-content: center; width: 22px; height: 22px; border-radius: 11px; box-shadow: inset 0 0 0 1.5px var(--off); }
.pf-goal--done { color: var(--ink); }
.pf-goal--done .pf-goal__mark { background: var(--yes); box-shadow: none; }
.pf-goal__mark svg { width: 14px; height: 14px; }
.pf-chat { display: flex; flex-direction: column; gap: 10px; }
.pf-bubble { align-self: flex-start; max-width: 85%; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-radius: 16px; background: var(--panel); border: 1.2px solid var(--line); }
.pf-bubble small { font: 700 12px/1.4 var(--font-text); color: var(--muted); }
.pf-bubble p { margin: 0; font: 400 16px/1.4 var(--font-text); color: var(--ink); }
.pf-bubble--you { align-self: flex-end; background: var(--sand); border-color: transparent; gap: 2px; }
.pf-bubble--typing p { color: var(--muted); }
.pf-reply { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 16px; background: var(--panel); border: 1.2px solid var(--line); }
.pf-reply:focus-within { border-color: var(--ink); }
.pf-reply input { flex: 1; min-width: 0; border: 0; padding: 8px 0; background: transparent; font: 400 17px/1.4 var(--font-text); color: var(--ink); }
.pf-reply input:focus { outline: none; }
.pf-reply input::placeholder { color: var(--off); }
.pf-send { flex: none; display: grid; place-content: center; width: 40px; height: 40px; border-radius: 20px; background: var(--ink); border: 0; cursor: pointer; }
.pf-send:disabled { background: var(--disabled); cursor: default; }
.pf-send svg { width: 20px; height: 20px; }
@media (max-width: 699px) { .pf-goal { font-size: 16px; } .pf-reply input { font-size: 16px; } }

/* ---------- Group play · setup (Build 7, stage 1) ---------- */
body:has(.pf-setup-page), html:has(.pf-setup-page) { height: auto; overflow: auto; background: var(--page); }
.pf-setup-page { min-height: 100vh; display: flex; flex-direction: column; }
.pf-setup { flex: 1; display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 40px; padding: 32px 40px 40px; align-items: start; max-width: 1440px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.pf-setup__rail { display: flex; flex-direction: column; gap: 20px; }
.pf-setup__railtitle, .pf-setup__side h2 { margin: 0; font: 700 20px/1.3 var(--font-display); color: var(--ink); }
.pf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pf-step { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 14px; border-radius: 14px; font: 400 16px/1.4 var(--font-text); color: var(--muted); background: none; border: 0; width: 100%; text-align: left; box-sizing: border-box; }
a.pf-step, button.pf-step { cursor: pointer; text-decoration: none; }
.pf-step__n { flex: none; display: grid; place-content: center; width: 24px; height: 24px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line); font: 700 13px/1 var(--font-text); color: var(--muted); }
.pf-step--current { background: var(--panel); box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); font-weight: 700; }
.pf-step--current .pf-step__n { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); background: var(--panel); }
.pf-step--done { color: var(--ink); }
.pf-step--done .pf-step__n { background: var(--ink); box-shadow: none; }
.pf-step--done .pf-step__n svg { width: 14px; height: 14px; }
.pf-setup__main { display: flex; flex-direction: column; gap: 20px; min-height: 100%; }
.pf-setup__steplabel { margin: 0; font: 700 16px/1.4 var(--font-text); color: var(--muted); }
.pf-setup__content { display: flex; flex-direction: column; gap: 40px; }
.pf-setup__block { display: flex; flex-direction: column; gap: 12px; }
.pf-setup__title { margin: 0; font: 700 32px/1.2 var(--font-display); color: var(--ink); }
.pf-setup__sub { margin: 4px 0 0; font: 400 17px/1.4 var(--font-text); color: var(--muted); }
.pf-setup__h { margin: 0; font: 700 20px/1.3 var(--font-text); color: var(--ink); }
.pf-setup__actions { margin-top: auto; display: flex; justify-content: flex-end; padding-top: 8px; }
.pf-setup__actions .pf-btn { width: 260px; }
.pf-setup__side { display: flex; flex-direction: column; gap: 24px; }
.pf-summary { display: flex; flex-direction: column; gap: 16px; }
.pf-summary div { display: flex; flex-direction: column; gap: 8px; }
.pf-summary span { font: 700 15px/1.4 var(--font-text); color: var(--muted); }
.pf-summary b { font: 600 16px/1.4 var(--font-text); color: var(--ink); }
.pf-summary i { font: normal 400 16px/1.4 var(--font-text); color: var(--muted); }
.pf-setup__prog { display: none; }
.pf-progressbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pf-progressbar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
/* numbers, teams, map choices, dice, gates */
.pf-nums { display: flex; gap: 10px; }
.pf-nums button { flex: 1; height: 60px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--line); font: 700 28px/1 var(--font-display); color: var(--ink); cursor: pointer; }
.pf-nums button[aria-pressed="true"] { border: 2px solid var(--ink); }
.pf-team { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1.2px solid var(--line); }
.pf-team__dot { flex: none; width: 20px; height: 20px; border-radius: 10px; }
.pf-team__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-team__text input { border: 0; padding: 0; background: transparent; font: 700 17px/1.4 var(--font-text); color: var(--ink); width: 100%; }
.pf-team__text input + input { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-team__text input:focus { outline: none; text-decoration: underline; text-decoration-color: var(--line); }
.pf-team__move { flex: none; display: flex; flex-direction: column; gap: 0; }
.pf-team__move button { background: none; border: 0; padding: 0 2px; height: 14px; line-height: 14px; font-size: 10px; color: var(--muted); cursor: pointer; }
.pf-mapopt { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 16px; background: var(--panel); border: 1.2px solid var(--line); text-align: left; width: 100%; cursor: pointer; box-sizing: border-box; }
.pf-mapopt[aria-checked="true"] { border: 2px solid var(--ink); }
.pf-radio { flex: none; width: 22px; height: 22px; border-radius: 11px; box-shadow: inset 0 0 0 1.5px var(--off); }
[aria-checked="true"] > .pf-radio { box-shadow: inset 0 0 0 6px var(--ink); }
.pf-mapopt__thumb { flex: none; width: 108px; height: 76px; display: grid; place-content: center; }
.pf-mapopt__thumb svg { width: 108px; height: 76px; }
.pf-mapopt b { display: block; font: 700 17px/1.4 var(--font-text); color: var(--ink); }
.pf-mapopt span.t { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-setup-map svg { width: 100%; height: auto; max-height: 420px; display: block; }
.pf-mapfacts { display: flex; gap: 24px; flex-wrap: wrap; }
.pf-mapfacts div { display: flex; align-items: baseline; gap: 6px; }
.pf-mapfacts b { font: 700 17px/1 var(--font-display); color: var(--ink); }
.pf-mapfacts span { font: 700 12px/1 var(--font-text); color: var(--muted); }
.pf-pieces { display: flex; flex-direction: column; gap: 12px; }
.pf-pieces div { display: flex; align-items: center; gap: 12px; }
.pf-pieces b { font: 700 22px/1 var(--font-display); color: var(--ink); min-width: 28px; }
.pf-pieces span { font: 400 15px/1.4 var(--font-text); color: var(--ink); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chips span { font: 700 11px/1 var(--font-text); padding: 4px 6px; border-radius: 6px; background: var(--sand); color: var(--ink); }
.pf-checkrow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; cursor: pointer; font: 400 17px/1.4 var(--font-text); color: var(--ink); }
.pf-checkrow:first-child { border-top: 0; }
.pf-checkrow .pf-check { pointer-events: none; flex: none; }
.pf-tileic { flex: none; display: grid; place-content: center; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid; }
.pf-die-area { height: 144px; display: grid; place-content: center; }
.pf-die-area button { background: none; border: 0; cursor: pointer; padding: 0; }
.pf-die-area svg { width: 96px; height: 96px; }
.pf-roll { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 16px; border-radius: 16px; background: var(--panel); border: 1.2px solid var(--line); width: 100%; text-align: left; cursor: pointer; box-sizing: border-box; font: 700 17px/1.4 var(--font-text); color: var(--ink); }
.pf-roll--first { border: 2px solid var(--ink); }
.pf-roll span.n { flex: 1; }
.pf-roll span.v { display: grid; place-content: center; width: 42px; height: 34px; border-radius: 10px; background: var(--sand); font: 700 16px/1 var(--font-text); }
.pf-prompt-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: 16px; background: var(--panel); border: 2px solid var(--ink); font: 700 17px/1.4 var(--font-text); color: var(--ink); box-sizing: border-box; }
.pf-sofar { display: flex; flex-direction: column; gap: 10px; }
.pf-sofar div { display: flex; align-items: center; gap: 10px; }
.pf-sofar b { font: 700 17px/1.4 var(--font-text); }
.pf-sofar span { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-setup .pf-gatemap svg { width: 100%; height: auto; display: block; }
/* iPad: progress card above the step, side panels under it */
@media (max-width: 1199px) {
  .pf-setup { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 32px 32px; max-width: 820px; }
  .pf-setup__rail, .pf-summary-panel { display: none; }
  .pf-setup__prog { display: flex; flex-direction: column; gap: 12px; }
  .pf-setup__steplabel--desk { display: none; }
  .pf-setup__actions .pf-btn { width: 336px; height: 60px; }
}
/* phone: the step and its progress live in the top bar */
@media (max-width: 699px) {
  .pf-setup-page > .pf-topbar { display: none; }
  .pf-setup { padding: 12px 12px 30px; gap: 12px; }
  .pf-setup .pf-panel { padding: 16px; }
  .pf-setup__main { gap: 16px; }
  .pf-setup__prog { display: none; }
  .pf-setup__content { gap: 28px; }
  .pf-setup__title { font-size: 26px; }
  .pf-nums button { height: 56px; }
  .pf-setup__actions .pf-btn { width: 100%; height: 52px; }
  .pf-mapopt__thumb { display: none; }
}
.pf-phonebar { display: none; }
@media (max-width: 699px) {
  .pf-phonebar { display: block; position: sticky; top: 0; z-index: 5; background: var(--page); }
  .pf-phonebar__row { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; }
  .pf-phonebar__row button { background: none; border: 0; padding: 0; width: 22px; height: 22px; cursor: pointer; color: var(--ink); }
  .pf-phonebar__row span { font: 700 15px/1.4 var(--font-text); color: var(--muted); }
  .pf-phonebar .pf-progressbar { border-radius: 0; }
  .pf-phonebar .pf-progressbar i { border-radius: 0; }
}
.pf-setup__col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pf-setup__under { display: none; }
@media (max-width: 1199px) { .pf-setup__side { display: none; } .pf-setup__under { display: flex; flex-direction: column; gap: 24px; } .pf-setup__under:empty { display: none; } }
@media (max-width: 699px) { .pf-setup__col, .pf-setup__under { gap: 12px; } }
/* the group game's phone-sized frame (#app) is released on the new screens: full width, normal scrolling */
#app:has(.pf-setup-page) { width: 100%; height: auto; margin: 0; overflow: visible; border-radius: 0; box-shadow: none; display: block; container-type: normal; background: var(--page); }
/* desktop: the step list and the step panel run the full height, « Next » at the bottom (as in the design) */
@media (min-width: 1200px) {
  .pf-setup { min-height: calc(100vh - 72px); align-items: stretch; }
  .pf-setup__rail { align-self: stretch; }
  .pf-setup__col { align-self: stretch; }
  .pf-setup__col > .pf-setup__main { flex: 1; }
  .pf-setup__side { align-self: start; }
}
/* iPad and phone: the step panel also runs the full height, « Next » at the bottom */
@media (max-width: 1199px) { .pf-setup__col { min-height: calc(100vh - 72px - 56px); } .pf-setup__col > .pf-setup__main { flex: 1; } }
@media (max-width: 699px) { .pf-setup__col { min-height: calc(100vh - 62px - 42px); } .pf-setup .pf-toggle__item { white-space: nowrap; padding-left: 8px; padding-right: 8px; } }

/* ---------- Group play · the turn (Build 7, stage 2) ---------- */
.pf-gametop { display: flex; align-items: center; gap: 12px; }
.pf-gametop .pf-pill { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; font: 700 14px/1.4 var(--font-text); color: var(--ink); }
.pf-gametop__pills { display: flex; gap: 8px; margin-left: auto; }
.pf-turnline { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 16px/1.4 var(--font-text); color: var(--ink); }
.pf-turnline .pf-team__dot { width: 10px; height: 10px; }
.pf-order { display: flex; flex-direction: column; gap: 12px; }
.pf-orderteam { display: flex; align-items: center; gap: 14px; height: 68px; padding: 0 18px; border-radius: 16px; background: var(--panel); border: 1.2px solid var(--line); box-sizing: border-box; }
.pf-orderteam--now { border: 2px solid var(--ink); }
.pf-orderteam div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-orderteam b { font: 700 17px/1.4 var(--font-text); color: var(--ink); }
.pf-orderteam span.s { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-nowtag { flex: none; padding: 6px 12px; border-radius: 20px; border: 1.2px solid var(--line); font: 700 13px/1.4 var(--font-text); color: var(--ink); }
.pf-ordernote { padding: 12px 16px; border-radius: 16px; background: var(--sand); font: 400 15px/1.4 var(--font-text); color: var(--muted); margin: 0; }
.pf-thisturn { display: flex; flex-direction: column; gap: 14px; }
.pf-thisturn div { display: flex; align-items: center; gap: 10px; font: 400 16px/1.4 var(--font-text); color: var(--muted); }
.pf-thisturn div.on { color: var(--ink); font-weight: 700; }
.pf-thisturn div.done { color: var(--ink); }
.pf-thisturn .pf-step__n { width: 24px; height: 24px; }
.pf-thisturn div.on .pf-step__n { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.pf-thisturn div.done .pf-step__n { background: var(--ink); box-shadow: none; }
.pf-thisturn div.done .pf-step__n svg { width: 14px; height: 14px; }
.pf-squares { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-sq { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 116px; padding: 16px; border-radius: 16px; border: 2px solid; text-align: left; cursor: pointer; box-sizing: border-box; }
.pf-sq--wide { grid-column: 1 / -1; background: var(--panel); border-color: var(--ink); }
.pf-sq__top { display: flex; align-items: flex-start; justify-content: space-between; }
.pf-sq__top svg { width: 28px; height: 28px; }
.pf-sq__tag { font: 700 11px/1.4 var(--font-text); letter-spacing: .04em; }
.pf-sq__name { font: 700 21px/1.2 var(--font-display); }
.pf-gatedie { height: 192px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.pf-gatedie svg { width: 96px; height: 96px; }
.pf-gatedie p { margin: 0; font: 700 20px/1.4 var(--font-text); color: var(--ink); }
.pf-deckpill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font: 700 15px/1.2 var(--font-display); align-self: flex-start; }
.pf-deckpill svg { width: 16px; height: 16px; }
.pf-lvrow { display: flex; align-items: center; gap: 20px; height: 72px; padding: 0 20px; border-radius: 16px; background: var(--panel); border: 1.2px solid var(--line); width: 100%; cursor: pointer; text-align: left; box-sizing: border-box; }
.pf-lvrow[aria-checked="true"] { border: 2px solid var(--ink); }
.pf-lvrow b { font: 700 26px/1 var(--font-display); color: var(--ink); width: 40px; }
.pf-lvrow span.t { flex: 1; font: 400 17px/1.4 var(--font-text); color: var(--ink); }
.pf-lvrow[aria-checked="true"] span.t { font-weight: 700; }
.pf-lvdots { display: flex; gap: 6px; }
.pf-lvdots i { width: 10px; height: 10px; border-radius: 5px; background: var(--line); }
.pf-lvdots i.on { background: #C8323C; }
.pf-gcard { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.pf-gcard__band { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 32px; flex: none; }
.pf-gcard__band svg { width: 20px; height: 20px; }
.pf-gcard__band b { flex: 1; font: 700 18px/1.2 var(--font-display); }
.pf-gcard__band span { padding: 4px 10px; border-radius: 14px; background: var(--panel); font: 700 13px/1.4 var(--font-text); color: var(--ink); }
.pf-gcard__body { flex: 1; display: flex; flex-direction: column; gap: 32px; padding: 28px 32px; }
.pf-gcard__big { margin: 0; font: 700 40px/1.2 var(--font-display); color: var(--ink); }
.pf-gcard__big--md { font-size: 30px; }
.pf-gcard__opts { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font: 400 17px/1.4 var(--font-text); }
.pf-gcard__opts b { font-weight: 700; }
.pf-gcard__opts .right { font-weight: 700; color: var(--yes); }
.pf-gcard .pf-actions { margin-top: auto; }
.pf-verbpanel { display: flex; align-items: center; gap: 12px; }
.pf-verbpanel div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pf-verbpanel b { font: 700 26px/1.2 var(--font-display); color: var(--ink); }
.pf-verbpanel button.pf-roundbtn { flex: none; width: 40px; height: 40px; border-radius: 20px; border: 1.2px solid var(--line); background: var(--panel); display: grid; place-content: center; cursor: pointer; color: var(--ink); }
.pf-verbpanel--link { width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.pf-timerpanel { display: flex; flex-direction: column; gap: 10px; }
.pf-timerpanel b { font: 700 40px/1 var(--font-display); color: var(--ink); }
.pf-timerpanel.done b { color: var(--no); font-size: 28px; }
.pf-timerpanel .pf-progressbar i { transition: width .2s linear; }
.pf-turnstrip { display: none; }
/* iPad: turn order as a strip; this-turn panel hidden; verb and timer side by side above the card */
@media (max-width: 1199px) {
  .pf-turnstrip { display: flex; gap: 12px; }
  .pf-turnstrip .pf-orderteam { flex: 1; height: auto; padding: 10px 14px; }
  .pf-setup--game .pf-setup__under { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .pf-setup--game .pf-setup__under > .pf-thisturn-panel { display: none; }
}
@media (max-width: 699px) {
  .pf-turnstrip { display: none; }
  .pf-setup--game .pf-setup__under { grid-template-columns: 1fr; }
  .pf-gcard__band { padding: 0 16px; } .pf-gcard__body { padding: 20px 16px; gap: 20px; } .pf-gcard__big { font-size: 30px; }
  .pf-squares { gap: 10px; } .pf-sq { height: 96px; padding: 12px; } .pf-sq__name { font-size: 18px; }
  .pf-lvrow { height: 60px; }
}
.pf-gamephone { display: none; }
@media (max-width: 699px) { .pf-gamephone { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; position: sticky; top: 0; z-index: 5; background: var(--page); border-bottom: 1px solid var(--line); } .pf-gamephone .pf-turnline { flex: 1; font-size: 15px; } }
/* the card fills the middle column, its buttons at the bottom (as in the design) */
.pf-setup--game .pf-setup__col > .pf-gcard { flex: 1; }
/* iPad: turn order, then timer and verb, then the instruction and the card. Phone: instruction, verb, card; timer as a pill in the top line */
@media (max-width: 1199px) {
  .pf-setup--game .pf-setup__col > .pf-turnstrip { order: 0; }
  .pf-setup--game .pf-setup__col > .pf-setup__under { order: 1; }
  .pf-setup--game .pf-setup__col > .pf-instruction { order: 2; }
  .pf-setup--game .pf-setup__col > .pf-gcard, .pf-setup--game .pf-setup__col > .pf-setup__main { order: 3; }
}
@media (max-width: 699px) {
  .pf-setup--game .pf-setup__col > .pf-instruction { order: 1; }
  .pf-setup--game .pf-setup__col > .pf-setup__under { order: 2; }
  .pf-setup--game .pf-setup__under > .pf-timer-host { display: none; }
}
.pf-timerpill { display: none; }
@media (max-width: 699px) { .pf-timerpill { display: inline-flex; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); font: 700 14px/1.4 var(--font-text); color: var(--ink); cursor: pointer; } .pf-timerpill.done { color: var(--no); } }

/* ---------- Group play · duels (Build 7, stage 3) ---------- */
.pf-hidden { flex: 1; min-height: 260px; display: grid; place-content: center; gap: 8px; text-align: center; border-radius: 16px; background: var(--sand); font: 700 15px/1.4 var(--font-text); color: var(--muted); }
.pf-hidden svg { width: 28px; height: 28px; margin: 0 auto; }
.pf-timerpanel small { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-sayopt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1.2px solid var(--line); font: 700 17px/1.4 var(--font-text); color: var(--ink); text-align: left; cursor: pointer; box-sizing: border-box; }
.pf-sayopt[aria-checked="true"] { border: 2px solid var(--ink); }
.pf-sayopt small { margin-left: auto; font: 700 12px/1.4 var(--font-text); color: var(--muted); }
.pf-heard { display: flex; flex-direction: column; gap: 16px; }
.pf-heard div { display: flex; align-items: baseline; gap: 16px; }
.pf-heard b { font: 700 26px/1 var(--font-display); color: var(--muted); width: 24px; }
.pf-heard span { font: 700 40px/1.2 var(--font-display); color: var(--ink); }
.pf-listen { display: flex; flex-direction: column; gap: 12px; }
.pf-listen button { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 10px 14px; border-radius: 20px; border: 1.2px solid var(--line); background: var(--panel); font: 700 14px/1.4 var(--font-text); color: var(--ink); cursor: pointer; }
.pf-listen button.speaking { border-color: var(--ink); }
.pf-listen svg { width: 14px; height: 14px; }
.pf-verdictnote { padding: 12px 16px; border-radius: 14px; background: var(--yes-bg, #E6F4EA); font: 700 16px/1.4 var(--font-text); color: var(--yes); margin: 0; }
.pf-verdictnote--no { background: var(--no-bg); color: var(--no); }
@media (max-width: 699px) { .pf-heard span { font-size: 30px; } .pf-hidden { min-height: 200px; } }

/* ---------- Group play · results, showdowns, rules, end, printed mode (Build 7, stage 4) ---------- */
.pf-bigtext { margin: 0; font: 700 17px/1.4 var(--font-text); color: var(--ink); }
.pf-bigletter { display: grid; place-content: center; width: 104px; height: 104px; border-radius: 20px; border: 2px solid; font: 700 64px/1 var(--font-display); }
.pf-letterrow { display: flex; align-items: center; gap: 20px; }
.pf-cats { display: flex; flex-direction: column; gap: 10px; }
.pf-cats div { display: flex; gap: 14px; font: 400 17px/1.4 var(--font-text); color: var(--ink); }
.pf-cats b { width: 18px; font-weight: 700; color: var(--muted); }
.pf-sq--pick { height: 96px; }
.pf-sq--pick[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ink); }
.pf-sq--pick .pf-sq__name { font-size: 22px; }
.pf-teampick { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; border-radius: 16px; background: var(--panel); border: 1.2px solid var(--line); width: 100%; text-align: left; cursor: pointer; box-sizing: border-box; }
.pf-teampick div { display: flex; flex-direction: column; }
.pf-teampick b { font: 700 17px/1.4 var(--font-text); color: var(--ink); }
.pf-teampick span.s { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-teampick--tie { justify-content: center; }
.pf-scorerows { display: flex; flex-direction: column; }
.pf-scorerows div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.pf-scorerows div:first-child { border-top: 0; }
.pf-scorerows b { font: 700 17px/1.4 var(--font-text); } .pf-scorerows span { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-rules h2 { margin: 0; font: 700 20px/1.3 var(--font-text); color: var(--ink); }
.pf-rules p, .pf-rules li { font: 400 17px/1.5 var(--font-text); color: var(--ink); margin: 0; }
.pf-rules ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.pf-rules section { display: flex; flex-direction: column; gap: 10px; }
.pf-clock { display: flex; align-items: baseline; gap: 12px; }
.pf-clock b { font: 700 38px/1 var(--font-display); color: var(--ink); }
.pf-clock span { font: 700 17px/1.4 var(--font-text); color: var(--ink); }
.pf-timerbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-timerbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1.2px solid var(--line); cursor: pointer; text-align: left; }
.pf-timerbtn.on { border: 2px solid var(--ink); }
.pf-timerbtn b { font: 700 38px/1 var(--font-display); color: var(--ink); }
.pf-timerbtn span { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
.pf-linkrow { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1.2px solid var(--line); text-decoration: none; color: var(--ink); font: 700 16px/1.4 var(--font-text); cursor: pointer; width: 100%; box-sizing: border-box; text-align: left; }
.pf-single { max-width: 760px; margin: 0 auto; width: 100%; padding: 32px 40px 40px; box-sizing: border-box; flex: 1; display: flex; flex-direction: column; }
.pf-single > .pf-setup__main { flex: 1; }
@media (max-width: 699px) { .pf-single { padding: 12px; } .pf-timerbtn b, .pf-clock b { font-size: 30px; } .pf-bigletter { width: 80px; height: 80px; font-size: 48px; } }
/* the game menu and conjugations (drawn by app.js) on the new designs: a side panel on wide screens, a sheet on phones */
#app:has(.pf-setup-page) .overlay { position: fixed; inset: 0; z-index: 50; background: rgba(61,49,30,.35); display: flex; justify-content: flex-end; align-items: stretch; }
#app:has(.pf-setup-page) .overlay .sheet { width: min(420px, 100%); height: 100%; max-height: none; border-radius: 0; background: var(--page); padding: 24px; box-sizing: border-box; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; font-family: var(--font-text); color: var(--ink); }
#app:has(.pf-setup-page) .overlay .sheet .grabber { display: none; }
#app:has(.pf-setup-page) .overlay .sheet-head .label { font: 700 20px/1.3 var(--font-display); color: var(--ink); margin: 0; text-transform: none; letter-spacing: 0; }
#app:has(.pf-setup-page) .overlay .menu-list { background: var(--panel); border: 1.2px solid var(--line); border-radius: 16px; overflow: hidden; }
#app:has(.pf-setup-page) .overlay .menu-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; cursor: pointer; color: var(--ink); }
#app:has(.pf-setup-page) .overlay .menu-row:first-child { border-top: 0; }
#app:has(.pf-setup-page) .overlay .menu-row b { font: 700 16px/1.4 var(--font-text); display: block; }
#app:has(.pf-setup-page) .overlay .menu-row .t span { font: 400 14px/1.4 var(--font-text); color: var(--muted); }
#app:has(.pf-setup-page) .overlay .menu-row .t { flex: 1; display: flex; flex-direction: column; }
#app:has(.pf-setup-page) .overlay .menu-row.danger b { color: var(--no); }
#app:has(.pf-setup-page) .overlay .cj-verb { font: 700 40px/1.1 var(--font-display); margin: 0; }
#app:has(.pf-setup-page) .overlay .cj-en { font: 400 18px/1.4 var(--font-text); color: var(--muted); margin: 0; }
#app:has(.pf-setup-page) .overlay .seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--panel); border: 1.2px solid var(--line); }
#app:has(.pf-setup-page) .overlay .seg button { flex: 1; height: 44px; border: 0; border-radius: 10px; background: none; font: 700 15px/1 var(--font-text); color: var(--ink); cursor: pointer; }
#app:has(.pf-setup-page) .overlay .seg button.on { background: var(--panel); box-shadow: inset 0 0 0 2px var(--ink); }
#app:has(.pf-setup-page) .overlay .tense h3 { font: 700 17px/1.4 var(--font-text); margin: 0 0 6px; }
#app:has(.pf-setup-page) .overlay .cj-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
#app:has(.pf-setup-page) .overlay .cj-row .pr { width: 96px; font: 400 17px/1.4 var(--font-text); color: var(--muted); }
#app:has(.pf-setup-page) .overlay .cj-row .fm { flex: 1; font: 700 18px/1.4 var(--font-text); }
@media (max-width: 699px) { #app:has(.pf-setup-page) .overlay { align-items: flex-end; } #app:has(.pf-setup-page) .overlay .sheet { height: auto; max-height: 90vh; border-radius: 20px 20px 0 0; } }