/* =====================================================================
   NEW GAME (Agent X): the personality quiz on the back of the Guild's notice, the reveal, the confirm page and
   the 40-starter journal. Field-journal kit: client/ui/journal.css (.fj-*). Logic: client/ui/newgame.js.
   Sizes are rem, and html's font-size follows the viewport height (theme.css), so 720p → 4K scales as one.
   ===================================================================== */

/* the night: the title's harbor sketch stays behind, darker, like a camp under a bridge */
#starter[data-ng="quiz"].screen { background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(26, 20, 12, 0.55), rgba(6, 6, 8, 0.93)); }
#starter[data-ng="quiz"] .starter-box { display: none; }
.ng-quiz { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem 16px; overflow: hidden auto; }
.ng-quiz.hidden { display: none; }

/* ---------------------------------------------------------------- the night card (narration) */
.ng-night { position: relative; width: min(46rem, 100%); min-height: min(26rem, 80vh); display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; animation: ng-fade 0.8s ease-out both; }
.ng-night__text { display: flex; flex-direction: column; gap: 0.9rem; text-align: center; }
.ng-night__text p { margin: 0; font-family: var(--font-prose); font-style: italic; font-size: 1.45rem; line-height: 1.5; color: #efe3c6; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); }
.ng-night__acts { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; justify-content: center; min-height: 3rem; }
.ng-night .ng-x { position: absolute; top: 0; right: 0; }
.ng-direct { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.45rem 1.1rem; }
.ng-direct small { font-family: var(--font-prose); font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 0.82rem; opacity: 0.72; }
.ng-night--fold .ng-night__text p { font-size: 1.35rem; }
.ng-next { gap: 0.5rem; }
@keyframes ng-fade { from { opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------- the sheet (the back of the notice) */
.ng-sheet { --pad: clamp(1.1rem, 3vw, 2.2rem); width: min(42rem, 100%); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; padding: var(--pad) calc(var(--pad) * 1.15) calc(var(--pad) * 0.9); transform: rotate(-0.7deg); animation: ng-sheet-in 0.7s cubic-bezier(.2, .8, .2, 1) both; }
.ng-sheet > * { position: relative; }
@keyframes ng-sheet-in { from { opacity: 0; transform: translateY(18px) rotate(-3deg) scale(0.97); } }
.ng-sheet .ng-pin { left: 50%; top: 0.55rem; margin-left: -0.45rem; }
.ng-sheet .ng-tape { right: 1.6rem; top: -0.4rem; --r: 7deg; }
.ng-sheet .ng-x { position: absolute; right: 0.8rem; top: 0.8rem; z-index: 4; }
.ng-guildstamp { position: absolute !important; right: 1.4rem; bottom: 1rem; font-size: 0.8rem; --r: -9deg; pointer-events: none; }
.ng-head { text-align: center; border-bottom: 1px solid rgba(31, 42, 74, 0.217); padding-bottom: 0.55rem; margin-bottom: 0.7rem; }
.ng-head .fj-label { letter-spacing: 0.3em; }
.ng-head h2 { margin: 0.15rem 0 0.25rem; font-family: var(--font-print); font-weight: 400; font-size: clamp(1.45rem, 2.3vw + 0.6rem, 2.1rem); line-height: 1.05; letter-spacing: 0.04em; }
.ng-sub { margin: 0; font-family: var(--font-prose); font-style: italic; font-size: 1.02rem; color: var(--ink-soft); }
.ng-chatot { margin: 0.35rem 0 0; font-size: 1.12rem !important; }
.ng-sheet.is-result .ng-chatot, .ng-sheet.is-result .ng-sub { display: none; }
.ng-prog { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 1.2rem; margin-bottom: 0.3rem; font-family: var(--font-display); font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.ng-dots { display: flex; gap: 0.32rem; }
.ng-dots i { width: 0.5rem; height: 0.5rem; border: 1.5px solid var(--ink-soft); border-radius: 50%; opacity: 0.55; }
.ng-dots i.is-done { background: var(--ink-blue); border-color: var(--ink-blue); opacity: 0.85; }
.ng-dots i.is-now { border-color: var(--ink-red); opacity: 1; transform: scale(1.25); }
.ng-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 0.2rem 0.15rem 0.4rem; }
.ng-body.is-in { animation: ng-fade 0.45s ease-out both; }
.ng-foot { display: flex; justify-content: flex-end; min-height: 0.2rem; }
.ng-foot:empty { display: none; }

/* the question and its answers: printed question, tick-boxes you mark in pen */
.ng-q { margin: 0.2rem 0 0.9rem; font-family: var(--font-prose); font-size: 1.42rem; line-height: 1.38; color: var(--ink); text-shadow: var(--fj-ink-smudge); min-height: 2.6em; }
.ng-ans.ui-choices { margin: 0; gap: 0.15rem; align-items: stretch; }
.ng-quiz .ng-ans .ui-choice, .ng-quiz .ng-yn .ui-choice { --b-line: transparent; --b-fill: transparent; clip-path: none; justify-content: flex-start; min-width: 0; width: 100%; padding: 0.42rem 0.6rem 0.42rem 0.4rem; gap: 0.75rem; text-align: left;
  font-family: var(--font-prose); font-weight: 500; font-size: 1.22rem; letter-spacing: 0; color: var(--ink); text-shadow: none; border-radius: var(--r-sm); filter: none; }
.ng-quiz .ng-ans .ui-choice::before, .ng-quiz .ng-yn .ui-choice::before { inset: 0; clip-path: none; border-radius: var(--r-sm); }
.ng-quiz .ng-ans .ui-choice .ui-key, .ng-quiz .ng-yn .ui-choice .ui-key { flex: none; order: 2; margin-left: auto; opacity: 0.55; transform: scale(0.85); }
.ng-quiz .ng-ans .ui-choice::after { content: ''; order: 0; flex: none; width: 1.05rem; height: 1.05rem; border: 1.6px solid var(--ink-soft); border-radius: var(--r-sm) 3px 2px 4px; transform: rotate(-2deg); background: rgba(255, 252, 240, 0.35); position: static; animation: none; }
.ng-quiz .ng-ans .ui-choice span:not(.ui-key) { order: 1; }
.ng-quiz .ng-ans .ui-choice:hover:not(:disabled), .ng-quiz .ng-ans .ui-choice:focus-visible, .ng-quiz .ng-ans .ui-choice:focus,
.ng-quiz .ng-yn .ui-choice:hover:not(:disabled), .ng-quiz .ng-yn .ui-choice:focus-visible, .ng-quiz .ng-yn .ui-choice:focus { --b-fill: linear-gradient(90deg, rgba(44, 74, 99, 0.13), rgba(44, 74, 99, 0.02)); color: var(--ink-blue); filter: none; outline: none; }
.ng-quiz .ng-ans .ui-choice:focus-visible::after, .ng-quiz .ng-ans .ui-choice:focus::after { border-color: var(--ink-blue); }
.ng-quiz .ng-ans .ui-choice:disabled { opacity: 0.45; }
.ng-quiz .ng-ans .ui-choice.is-picked { opacity: 1; color: var(--ink-blue); }
.ng-quiz .ng-ans .ui-choice.is-picked::after { content: '✓'; display: grid; place-items: center; font-family: var(--font-hand); font-weight: 700; font-size: 1.6rem; line-height: 0; color: var(--ink-red); border-color: var(--ink-soft); animation: ng-tick 0.3s ease-out both; }
@keyframes ng-tick { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ng-quiz .ui-choice-hint { color: var(--ink-soft); text-shadow: none; }

/* the tally and the nature */
.ng-count { margin: 0.2rem 0 0.4rem; font-family: var(--font-prose); font-style: italic; font-size: 1.15rem; color: var(--ink-soft); }
.ng-reveal { margin: 0.2rem 0 0.2rem; font-family: var(--font-print); font-weight: 400; font-size: clamp(1.6rem, 2.4vw + 0.7rem, 2.35rem); line-height: 1.15; color: var(--ink); text-shadow: var(--fj-ink-smudge); }
.ng-nat { color: var(--vermilion); font-weight: 400; }
.ng-seal { display: flex; justify-content: flex-end; margin: -0.4rem 0.6rem 0.2rem 0; }
.ng-seal .fj-stamp { font-size: 1.25rem; --r: -8deg; animation: ng-stamp 0.32s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes ng-stamp { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } }
.ng-blurb { margin: 0.2rem 0 0.8rem; font-family: var(--font-prose); font-size: 1.22rem; line-height: 1.5; color: var(--ink); }
.ng-after { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.ng-hand { font-family: var(--font-hand); font-weight: 600; font-size: 1.35rem; color: var(--ink-blue); line-height: 1.2; }
.ng-after .ng-hand { align-self: stretch; margin: 0; }

/* "Could you be …?" */
.ng-pol { position: relative; margin: 0; width: 9.5rem; flex: none; padding: 0.5rem 0.5rem 1.7rem; background: #fbf6ea; box-shadow: 0 4px 12px rgba(15, 30, 70, 0.256); transform: rotate(-3deg); }
.ng-pol img { width: 100%; aspect-ratio: 1; display: block; image-rendering: pixelated; background: #e9dfc7; }
.ng-pol figcaption { position: absolute; left: 0; right: 0; bottom: 0.15rem; text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.ng-pol .fj-tape { top: -0.55rem; left: 50%; margin-left: -2.2rem; }
.ng-pol--sm { width: 5.4rem; padding: 0.3rem 0.3rem 1.25rem; }
.ng-pol--sm figcaption { font-size: 0.98rem; }
.ng-pol--sm .fj-tape { width: 2.6rem; height: 0.9rem; margin-left: -1.3rem; top: -0.4rem; }
.ng-guess { display: flex; gap: 1.4rem; align-items: center; margin: 0.6rem 0 0.4rem; }
.ng-guess__r { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.ng-stamps { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ng-quiz .tstamp, .ng-confirm .tstamp { font-family: var(--font-print); font-size: 0.82rem; letter-spacing: 0.14em; padding: 0.15rem 0.55rem; border: 2px solid var(--tc, var(--ink)); color: var(--tc, var(--ink)); border-radius: var(--r-sm); transform: rotate(-3deg); display: inline-block; mix-blend-mode: multiply; -webkit-mask: var(--grain-mask); mask: var(--grain-mask); }
.ng-note { margin: 0; }
.ng-ask { margin: 0.5rem 0 0.4rem; font-family: var(--font-prose); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--ink); }
.ng-yn.ui-choices { margin: 0.2rem 0 0; flex-direction: row; flex-wrap: wrap; gap: 0.4rem 0.8rem; }
.ng-quiz .ng-yn .ui-choice { width: auto; flex: 1 1 13rem; border: 1.5px solid rgba(31, 42, 74, 0.217); padding: 0.5rem 0.9rem; justify-content: center; font-weight: 600; }
.ng-quiz .ng-yn .ui-choice:first-child { border-color: var(--ink-blue); }
.ng-alts { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed rgba(31, 42, 74, 0.217); }
.ng-alts__row { display: flex; gap: 1.2rem; margin-top: 0.55rem; flex-wrap: wrap; }
.ng-alt { all: unset; cursor: pointer; border-radius: 4px; transition: transform 0.2s; }
.ng-alt:hover, .ng-alt:focus-visible, .ng-alt:focus { transform: translateY(-3px) rotate(2deg); outline: 2px dashed var(--ink-blue); outline-offset: 4px; }

/* the confirm page */
.ng-confirm { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center; padding: 0.4rem 0 0.2rem; }
.ng-confirm .ng-pol { margin: 0.6rem 0 0.3rem; }
.ng-confirm__sp { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-print); font-size: 1.5rem; color: var(--ink); flex-wrap: wrap; justify-content: center; }
.ng-chip { font-family: var(--font-hand); font-size: 1.15rem; color: var(--ink-red); transform: rotate(-3deg); }
.ng-askname { font-family: var(--font-prose); font-style: italic; font-size: 1.25rem; color: var(--ink); margin-top: 0.3rem; }
#ng-nick { width: min(18rem, 90%); text-align: center; background: transparent; border: 0; border-bottom: 1.5px dashed rgba(31, 42, 74, 0.341); border-radius: 0; font-family: var(--font-hand); font-weight: 700; font-size: 2rem; color: var(--ink-blue); padding: 0 0.2rem; outline: none; box-shadow: none; }
#ng-nick::placeholder { color: rgba(44, 74, 99, 0.33); }
#ng-nick:focus { border-bottom-color: var(--ink-blue); }
.ng-hint { font-family: var(--font-prose); font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }
.ng-confirm__acts { display: flex; gap: 1rem; margin-top: 0.6rem; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- the starter journal (40 starters) */
#starter .sp-journal .page.l { padding-bottom: 0.8rem; }
#starter .sp-journal .lead { margin-bottom: 0.4rem; }
.ng-filters { display: flex; flex-wrap: wrap; gap: 0.25rem 0.3rem; margin: 0 0 0.35rem; padding-bottom: 0.4rem; border-bottom: 1px dashed rgba(31, 42, 74, 0.186); }
.ng-ftab { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: baseline; gap: 0.25rem; padding: 0.16rem 0.5rem 0.12rem; font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid transparent; border-radius: var(--r-sm); }
.ng-ftab small { font-family: var(--font-hand); font-size: 1rem; letter-spacing: 0; text-transform: none; opacity: 0.8; }
.ng-ftab:hover, .ng-ftab:focus-visible, .ng-ftab:focus { color: var(--ink); background: rgba(44, 74, 99, 0.08); outline: none; }
.ng-ftab.is-on { color: var(--tc, var(--ink)); border-bottom-color: var(--tc, var(--ink-red)); background: rgba(255, 250, 235, 0.55); }
#starter .sp-journal #starter-grid { grid-template-columns: repeat(auto-fill, minmax(4.9rem, 1fr)); gap: 0.85rem 0.7rem; padding: 0.7rem 0.5rem 1rem; align-content: start; }
#starter .sp-journal .starter-card { font: inherit; font-family: var(--font-hand); font-weight: 700; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.3rem 0.3rem 0.35rem; outline: none; }
#starter .sp-journal .starter-card .nm { font-size: 1.02rem; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#starter .sp-journal .starter-card .pips { display: flex; gap: 0.22rem; height: 0.5rem; }
#starter .sp-journal .starter-card .pips i { width: 0.5rem; height: 0.5rem; background: var(--tc); transform: rotate(45deg) scale(0.85); opacity: 0.85; }
#starter .sp-journal .starter-card:focus-visible, #starter .sp-journal .starter-card:focus { transform: rotate(0deg) translateY(-3px) scale(1.05); box-shadow: 0 8px 14px rgba(15, 30, 70, 0.24), 0 0 0 2px var(--ink-blue); }
#starter .sp-journal .starter-card:focus img { filter: none; }
#starter .sp-journal .starter-card.is-guess { box-shadow: 0 2px 4px rgba(15, 30, 70, 0.224), 0 0 0 2px rgba(168, 50, 31, 0.55); }
.ng-ribbon { position: absolute; left: -0.35rem; right: -0.35rem; top: -0.55rem; text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 0.9rem; line-height: 1.25; color: #fff8ea; background: var(--vermilion); transform: rotate(-4deg); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-rtop { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; min-height: 1.6rem; margin: -0.4rem 0 0.4rem; }
.ng-rtop:empty { display: none; }
.ng-rtop .ng-hand { font-size: 1.4rem; color: var(--ink-red); margin-right: auto; }
.ng-rtop .fj-label { margin-right: 0; }
.ng-line { grid-column: 1 / -1; margin: 0.5rem 0 0; font-family: var(--font-hand); font-weight: 700; font-size: 1.45rem; line-height: 1.25; color: var(--ink); }
.ng-guessmark { display: inline-block; margin-left: 0.7rem; font-size: 1.05rem !important; vertical-align: middle; }
#starter .sp-journal .prev .notes { font-size: 1.22rem; }

/* ---------------------------------------------------------------- the in-game retake */
.ng-retake { position: fixed; inset: 0; z-index: calc(var(--z-screen, 100) + 10); background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(26, 20, 12, 0.6), rgba(6, 6, 8, 0.9)); animation: ng-fade 0.4s ease-out both; }
.ng-retake .ng-quiz { position: absolute; }

/* ---------------------------------------------------------------- short and narrow windows */
@media (max-height: 640px) {
  .ng-q { font-size: 1.25rem; margin-bottom: 0.5rem; }
  .ng-quiz .ng-ans .ui-choice { font-size: 1.08rem; padding-block: 0.3rem; }
  .ng-head { padding-bottom: 0.35rem; margin-bottom: 0.4rem; }
  .ng-sub { display: none; }
}
@media (max-width: 760px) {
  .ng-sheet { transform: none; }
  .ng-guess { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .ng-pol { width: 7.5rem; }
  #starter .sp-journal #starter-grid { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: 0.6rem 0.5rem; }
  #starter .sp-journal .page.l { max-height: 52vh; }
  #starter .sp-journal .prev .notes, #starter .sp-journal .prev .sketch { display: none; }
  .ng-line { font-size: 1.2rem; }
  .ng-ftab { padding-inline: 0.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ng-sheet, .ng-night, .ng-body.is-in, .ng-seal .fj-stamp { animation: none; }
}

/* ghost buttons on paper: ink, not the HUD's light text */
.ng-sheet .ui-btn--ghost, #starter .sp-journal .ui-btn--ghost { color: var(--ink-soft); text-shadow: none; --b-line: rgba(31, 42, 74, 0.217); }
.ng-sheet .ui-btn--ghost:hover, .ng-sheet .ui-btn--ghost:focus, #starter .sp-journal .ui-btn--ghost:hover, #starter .sp-journal .ui-btn--ghost:focus { color: var(--ink-blue); }
.ng-sheet .ui-btn--ghost .ui-key, #starter .sp-journal .ui-btn--ghost .ui-key { filter: none; }
/* the sheet keeps one size from the first question to the confirm page, so nothing jumps while text types */
.ng-sheet { min-height: min(36rem, calc(100vh - 2rem)); }
/* 4K at 1× device pixels: html's font-size tops out at 26px, so the notice grows with zoom instead */
@media (min-width: 2400px) and (min-height: 1350px) { .ng-sheet, .ng-night { zoom: 1.55; } }
@media (min-width: 3200px) and (min-height: 1800px) { .ng-sheet, .ng-night { zoom: 1.85; } }