/* Writing games (jargon dictionary + cliché bingo) */
main.games { max-width: 960px; margin: 4vh auto; padding: 0 16px; }
.games h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); margin: 0 0 8px; }
.g-lead { color: var(--muted); font-size: 1.1rem; margin: 0 0 28px; max-width: 640px; }
.g-crumb { font-size: .9rem; color: var(--muted); margin: 0 0 8px; }
.g-crumb a { color: var(--accent); text-decoration: none; }
.g-crumb a:hover { text-decoration: underline; }

.g-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.g-card { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--card); border: 1px solid #e8e3da; border-radius: 16px; color: var(--fg); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.g-card:hover { border-color: var(--accent); box-shadow: 0 6px 22px rgba(14, 90, 100, .12); transform: translateY(-2px); }
.g-card h2 { margin: 4px 0 0; font-size: 1.3rem; }
.g-card p { margin: 0; color: var(--muted); }
.g-icon { font-size: 2rem; }
.g-go { margin-top: auto; padding-top: 10px; color: var(--accent); font-weight: 700; }

.g-terms { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.g-terms a { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 16px 18px; background: var(--card); border: 1px solid #e8e3da; border-radius: 14px; color: var(--fg); text-decoration: none; }
.g-terms a:hover { border-color: var(--accent); }
.g-terms strong { color: var(--accent); font-size: 1.1rem; }
.g-terms span { color: var(--muted); font-size: .95rem; }

.g-term { display: grid; gap: 14px; margin: 20px 0 28px; max-width: 720px; }
.g-box { padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid #e8e3da; }
.g-box h2 { font-size: .95rem; margin: 0 0 6px; color: var(--muted); font-weight: 700; }
.g-box p { margin: 0; font-size: 1.25rem; font-weight: 600; overflow-wrap: anywhere; }
.g-box.plain { border-color: var(--accent); border-width: 2px; }
.g-box.sounds { background: #f6f2ea; }
.g-box.better { background: #E3F0F1; border-color: #C5DEE1; }
.g-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; max-width: 720px; }
.g-pager a { color: var(--accent); text-decoration: none; }
.g-pager a:hover { text-decoration: underline; }

.g-cta { margin: 48px 0 0; padding: 28px 24px; text-align: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #0A4048, #1B7380); }
.g-cta h2 { margin: 0 0 8px; font-size: clamp(1.3rem, 3.5vw, 1.7rem); }
.g-cta p { margin: 0 0 18px; opacity: .92; }
.g-cta .primary { display: inline-block; background: var(--cta); color: #fff; border: 2px solid #fff; font-weight: 700; text-decoration: none; }

.bingo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 560px; }
.bingo-cell { aspect-ratio: 1; font: inherit; font-size: clamp(.68rem, 2.6vw, .95rem); font-weight: 600; line-height: 1.25; padding: 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; overflow-wrap: anywhere; transition: background .15s, transform .1s; }
.bingo-cell:hover { border-color: var(--accent); }
.bingo-cell:active { transform: scale(.96); }
.bingo-cell[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.bingo-cell.free { cursor: default; background: #E3F0F1; color: var(--accent); border-color: #E3F0F1; }
.bingo-count { color: var(--muted); margin: 12px 0; }
.bingo-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.bingo-win { margin-top: 24px; padding: 22px; max-width: 512px; border-radius: 16px; background: #E3F0F1; border: 2px solid var(--accent); text-align: center; }
.bingo-win h2 { margin: 0 0 6px; color: var(--accent); font-size: 1.8rem; }
.bingo-win p { margin: 0 0 10px; }
.bingo-win .primary { display: inline-block; text-decoration: none; margin-top: 6px; }
@media (max-width: 480px) { .bingo { gap: 5px; } .bingo-cell { border-radius: 8px; padding: 2px; } }

/* bingo: how to play */
.g-how { max-width: 560px; box-sizing: border-box; margin: -8px 0 24px; padding: 14px 18px; background: var(--card); border: 1px solid #e8e3da; border-radius: 14px; }
.g-how summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.g-how ol { margin: 10px 0 0; padding-inline-start: 1.3em; display: grid; gap: 6px; }
.g-how li { line-height: 1.55; }
.g-how li::marker { color: var(--accent); font-weight: 700; }
.g-tip { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: #E3F0F1; font-size: .95rem; }

/* bingo page: everything centred on the page (owner 22.10) */
.bingo, .g-how, .bingo-win { margin-inline: auto; }
.g-how { margin-top: -8px; text-align: start; }
.bingo-count { text-align: center; }
.bingo-acts { justify-content: center; }
main.games:has(#bingo) > h1, main.games:has(#bingo) > .g-lead, main.games:has(#bingo) > .g-crumb { text-align: center; margin-inline: auto; }

/* centred game pages (which + word), like the bingo page */
main.g-centre > h1, main.g-centre > .g-lead, main.g-centre > .g-crumb { text-align: center; margin-inline: auto; }
main.g-centre .g-how { margin-inline: auto; }

/* "Which is more persuasive?" */
.which { max-width: 760px; margin: 0 auto; text-align: center; scroll-margin-top: 90px; }
.which-round { color: var(--muted); font-size: .9rem; margin: 0 0 4px; }
.which-topic { font-size: 1.3rem; margin: 0 0 16px; }
.which-topic:focus { outline: none; }
.which-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.which-opt { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 140px; padding: 20px 18px; font: inherit; font-size: 1.08rem; line-height: 1.55; text-align: start; color: var(--fg); background: var(--card); border: 2px solid #e8e3da; border-radius: 16px; cursor: pointer; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .1s; }
.which-opt:not(:disabled):hover { border-color: var(--accent); box-shadow: 0 6px 22px rgba(14, 90, 100, .12); }
.which-opt:not(:disabled):active { transform: scale(.98); }
.which-opt:disabled { cursor: default; }
.which-text { flex: 1; overflow-wrap: anywhere; }
.which-tag { font-size: .85rem; font-weight: 700; }
.which-tag:empty, .which-pct:empty { display: none; }
.which-opt.is-good { border-color: var(--accent); background: #F2F8F8; }
.which-opt.is-good .which-tag { color: var(--accent); }
.which-opt.is-bad { opacity: .8; }
.which-opt.is-bad .which-tag { color: var(--muted); }
.which-opt.is-picked { box-shadow: 0 0 0 3px rgba(14, 90, 100, .25); }
.which-opt.is-bad.is-picked { box-shadow: 0 0 0 3px rgba(29, 27, 24, .14); opacity: 1; }
.which-pct { position: relative; display: block; padding: 4px 10px; border-radius: 8px; background: #efebe4; font-size: .88rem; font-weight: 600; color: var(--fg); z-index: 0; overflow: hidden; }
.which-pct::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p, 0); background: #C5DEE1; z-index: -1; transition: width .5s; }
.which-reveal { margin: 18px auto 0; padding: 18px 20px; max-width: 620px; border-radius: 14px; background: var(--card); border: 1px solid #e8e3da; }
.which-verdict { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; }
.which-verdict.ok { color: var(--accent); }
.which-verdict.no { color: #8a5a00; }
.which-why { margin: 0 0 10px; }
.which-novotes { margin: 0 0 10px; color: var(--muted); font-size: .9rem; }
.which-next { margin-top: 4px; }
.which-end { margin: 8px auto 0; padding: 26px 22px; max-width: 520px; border-radius: 16px; background: #E3F0F1; border: 2px solid var(--accent); }
.which-score { margin: 0 0 8px; color: var(--accent); font-size: 1.9rem; }
.which-score:focus { outline: none; }
.which-band { margin: 0 0 16px; }
@media (max-width: 600px) { .which-pair { grid-template-columns: 1fr; } .which-opt { min-height: 0; } }

/* "Word of the day" */
.word-day { color: var(--muted); font-weight: 600; font-size: .6em; }
.word { max-width: 520px; margin: 0 auto; text-align: center; }
.word-board { display: grid; gap: 6px; width: min(330px, 100%); margin: 0 auto; }
.word-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.word-row.shake { animation: word-shake .35s; }
@keyframes word-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.wt { display: grid; place-items: center; aspect-ratio: 1; font-size: clamp(1.4rem, 7vw, 1.9rem); font-weight: 700; line-height: 1; border: 2px solid #ddd7cc; border-radius: 8px; background: var(--card); color: var(--fg); user-select: none; }
.wt.filled { border-color: #8a857c; }
.wt.correct { background: #0E5A64; border-color: #0E5A64; color: #fff; }
.wt.present { background: #f2b33d; border-color: #f2b33d; color: #1d1b18; }
.wt.absent { background: #77736b; border-color: #77736b; color: #fff; }
.word-legend { list-style: none; padding: 0; margin: 8px 0 2px; display: grid; gap: 6px; }
.word-legend li { display: flex; align-items: center; gap: 10px; }
.word-legend .wt { width: 30px; font-size: 1rem; border-radius: 6px; flex: none; }
.word-msg { min-height: 1.6em; margin: 10px 0; font-weight: 700; }
.word-kb { display: grid; gap: 6px; width: min(500px, 100%); margin: 0 auto; }
.word-kb-row { display: flex; gap: 5px; justify-content: center; align-items: center; }
.wk { flex: 1 1 0; min-width: 0; margin: 0; max-width: 44px; height: 52px; padding: 0; font: inherit; font-size: 1.15rem; font-weight: 700; border: 0; border-radius: 8px; background: #e6e1d8; color: var(--fg); cursor: pointer; touch-action: manipulation; }
.wk.wide { flex-grow: 1.6; max-width: 72px; font-size: 1rem; }
.wk:active { transform: scale(.95); }
.wk.correct { background: #0E5A64; color: #fff; }
.wk.present { background: #f2b33d; color: #1d1b18; }
.wk.absent { background: #77736b; color: #fff; }
.word-end { margin: 16px auto 0; padding: 22px 20px; border-radius: 16px; background: var(--card); border: 1px solid #e8e3da; }
.word-result { margin: 0 0 12px; color: var(--accent); font-size: 1.6rem; }
.word-result:focus { outline: none; }
.word-tip { padding: 12px 14px; border-radius: 12px; background: #E3F0F1; text-align: start; }
.word-tip p { margin: 4px 0 0; }
.word-next { color: var(--muted); margin: 14px 0; }
.word-count { font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.word-end h3 { font-size: 1rem; margin: 16px 0 8px; }
.word-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; }
.word-stats div { display: flex; flex-direction: column-reverse; }
.word-stats dt { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.word-stats dd { margin: 0; font-size: 1.5rem; font-weight: 700; }
.word-dist { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 4px; }
.word-dist li { display: flex; align-items: center; gap: 8px; }
.word-dist b { width: 1em; }
.word-bar { display: block; padding: 1px 8px; border-radius: 4px; background: #77736b; color: #fff; font-size: .85rem; font-weight: 700; text-align: end; box-sizing: border-box; }
.word-bar.now { background: #0E5A64; }
@media (max-width: 400px) { .word-board { width: min(290px, 100%); gap: 5px; } .word-row { gap: 5px; } .word-msg { margin: 6px 0; } .wk { height: 48px; font-size: 1.05rem; } .word-kb-row { gap: 4px; } .wk.wide { font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) { .word-row.shake { animation: none; } }
.word-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* every games page centred on the page (owner 22.10): headings, lead, crumb, term boxes, pager */
main.games > h1, main.games > .g-lead, main.games > .g-crumb { text-align: center; margin-inline: auto; }
.g-term, .g-pager { margin-inline: auto; }

/* word: the confirm key stands out (owner 22.10: it was hard to find), and pulses once 5 letters are typed */
.wk.enter { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; max-width: 84px; flex-grow: 2; }
.wk.enter:hover { filter: brightness(1.08); }
.wk.enter.ready { animation: word-ready 1.2s ease-in-out infinite; }
@keyframes word-ready { 0%, 100% { box-shadow: 0 0 0 0 rgba(14, 90, 100, .55); } 50% { box-shadow: 0 0 0 7px rgba(14, 90, 100, 0); } }
@media (prefers-reduced-motion: reduce) { .wk.enter.ready { animation: none; outline: 3px solid #7FC1CA; } }

/* word: colour legend beside the board (start side), one compact row under the board on narrow screens */
.word-stage { position: relative; width: min(330px, 100%); margin: 0 auto; }
.word-stage .word-board { width: 100%; }
.word-side { position: absolute; top: 50%; left: calc(100% + 28px); transform: translateY(-50%); width: max-content; margin: 0; padding: 14px 16px; text-align: start; background: var(--card); border: 1px solid #e8e3da; border-radius: 14px; font-size: .95rem; }
@media (max-width: 760px) {
  .word-side { position: static; transform: none; width: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 12px 0 0; padding: 0; background: none; border: 0; font-size: .82rem; color: var(--muted); }
  .word-side li { gap: 6px; }
  .word-side .wt { width: 22px; font-size: .8rem; border-radius: 5px; }
}
@media (max-width: 400px) { .word-stage { width: min(290px, 100%); } }
/* word: on narrow screens the floating share button sat on top of the confirm key -> hidden on this page only
   (the end screen has its own share button) */
@media (max-width: 760px) { body:has(#word) .site-share { display: none; } }
/* word: the next free tile always has the purple frame (owner 22.10); typed tiles a dark frame with a small pop */
.wt.filled { border-color: #8a857c; animation: word-pop .12s ease-out; }
.wt.next { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(14, 90, 100, .25); }
@keyframes word-pop { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .wt.filled { animation: none; } }
/* games: one bold line that says what the goal is, above the lead (owner 22.10) */
main.games > .g-goal { text-align: center; margin: 4px auto 6px; font-size: 1.25rem; font-weight: 700; color: var(--accent); }
main.games > .g-goal + .g-lead { margin-top: 0; }
/* word: subtle hint, hidden until asked for (owner 22.10) */
.word-hint { margin: 12px auto 0; max-width: 330px; }
.word-hint summary { display: inline-block; cursor: pointer; list-style: none; color: var(--accent); font-weight: 700; padding: 6px 14px; border: 1px solid #C5DEE1; border-radius: 99px; background: #F2F8F8; }
.word-hint summary::-webkit-details-marker { display: none; }
.word-hint[open] summary { background: #E3F0F1; }
.word-hint p { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #E3F0F1; font-size: .98rem; }

/* "Feature or benefit?" (owner 22.10): one card at a time, two big purple answer buttons, swipe toward a button */
.ft { max-width: 560px; margin: 0 auto; text-align: center; scroll-margin-top: 90px; }
.ft-n { color: var(--muted); font-size: .9rem; margin: 0 0 8px; }
.ft-card { display: grid; place-items: center; min-height: 150px; padding: 26px 22px; box-sizing: border-box; background: var(--card); border: 2px solid #e8e3da; border-radius: 18px; box-shadow: 0 6px 22px rgba(29, 27, 24, .06); touch-action: pan-y; user-select: none; cursor: grab; transition: transform .2s, border-color .2s, background .2s; }
.ft-card:focus { outline: none; }
.ft-card:focus-visible { box-shadow: 0 0 0 3px rgba(14, 90, 100, .3); }
.ft-text { margin: 0; font-size: clamp(1.25rem, 4.6vw, 1.55rem); font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.ft-card.ok { border-color: var(--accent); background: #F2F8F8; }
.ft-card.no { border-color: #d9a441; background: #fdf8ee; }
.ft-card.ok, .ft-card.no { cursor: default; }
.ft-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 0; }
.ft-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px; font: inherit; color: #fff; background: #0E5A64; border: 2px solid #0E5A64; border-radius: 14px; cursor: pointer; touch-action: manipulation; transition: filter .15s, transform .1s, box-shadow .15s; }
.ft-btn b { font-size: 1.3rem; font-weight: 700; }
.ft-btn small { font-size: .85rem; opacity: .9; }
.ft-btn:not(:disabled):hover { filter: brightness(1.1); }
.ft-btn:not(:disabled):active { transform: scale(.97); }
.ft-btn.is-hot { box-shadow: 0 0 0 4px rgba(14, 90, 100, .35); transform: scale(1.03); }
.ft-btn:disabled { cursor: default; opacity: .45; }
.ft-btn.is-answer { opacity: 1; }
.ft-btn.is-picked:not(.is-answer) { background: #8a857c; border-color: #8a857c; opacity: 1; }
.ft-reveal { margin: 16px auto 0; padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid #e8e3da; }
.ft-verdict { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; }
.ft-verdict.ok { color: var(--accent); }
.ft-verdict.no { color: #8a5a00; }
.ft-why { margin: 0 0 10px; }
.ft-as { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #E3F0F1; }
.ft-as p { margin: 4px 0 0; font-size: 1.1rem; font-weight: 600; }
.ft-end { margin: 8px auto 0; padding: 26px 22px; max-width: 520px; border-radius: 16px; background: #E3F0F1; border: 2px solid var(--accent); }
.ft-score { margin: 0 0 8px; color: var(--accent); font-size: 1.9rem; }
.ft-score:focus { outline: none; }
.ft-band { margin: 0 0 16px; }
@media (prefers-reduced-motion: reduce) { .ft-card, .ft-btn { transition: none; } }

/* "6 words that sell" (owner 22.10): examples, the form, the weekly pick and the wall */
.six { max-width: 640px; margin: 0 auto; text-align: center; }
.six h2 { font-size: 1.25rem; margin: 0 0 12px; }
.six-ex, .six-form, .six-thanks, .six-week, .six-wall { margin: 0 0 28px; }
.six-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.six-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 16px; text-align: start; background: var(--card); border: 1px solid #e8e3da; border-radius: 14px; }
.six-item .six-text { flex: 1 1 220px; }
.six-text { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.six-topic { display: inline-block; padding: 2px 10px; border-radius: 99px; background: #efebe4; color: var(--muted); font-size: .82rem; }
.six-item.ex { background: #faf8f4; border-style: dashed; }
.six-note { margin: 8px 0 0; color: var(--muted); font-size: .9rem; }
.six-form { display: grid; gap: 6px; padding: 20px; text-align: start; background: var(--card); border: 2px solid #C5DEE1; border-radius: 16px; }
.six-form h2 { text-align: center; }
.six-form label { font-weight: 700; }
.six-form input { font: inherit; font-size: 1.1rem; padding: 12px 14px; border: 1px solid #d8d2c7; border-radius: 10px; background: #fff; color: var(--fg); width: 100%; box-sizing: border-box; }
.six-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.six-count { margin: 0 0 8px; color: var(--muted); font-size: .92rem; }
.six-count.ok { color: var(--accent); font-weight: 700; }
.six-count.over { color: #8a5a00; font-weight: 700; }
.six-privacy { margin: 4px 0 6px; color: var(--muted); font-size: .88rem; }
.six-send { justify-self: center; min-width: 160px; font-weight: 700; background: #0E5A64; border-color: #0E5A64; color: #fff; }
.six-msg { margin: 4px 0 0; min-height: 1.4em; text-align: center; color: #8a5a00; font-weight: 700; }
.six-msg:empty { min-height: 0; }
.six-thanks { padding: 22px; border-radius: 16px; background: #E3F0F1; border: 2px solid var(--accent); }
.six-thanks-p { margin: 0 0 14px; font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.six-thanks-p:focus { outline: none; }
.six-week { padding: 20px; border-radius: 16px; background: #E3F0F1; border: 2px solid var(--accent); }
.six-week h2 { color: var(--accent); }
.six-week .six-text { font-size: 1.35rem; margin-bottom: 8px; }
.six-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 99px; background: #efebe4; }
.six-tabs button { font: inherit; padding: 8px 18px; border: 0; border-radius: 99px; background: transparent; color: var(--fg); cursor: pointer; }
.six-tabs button[aria-selected="true"] { background: #0E5A64; color: #fff; font-weight: 700; }
.six-vote { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; padding: 6px 14px; font: inherit; font-weight: 700; border: 1px solid #C5DEE1; border-radius: 99px; background: #F2F8F8; color: var(--accent); cursor: pointer; touch-action: manipulation; }
.six-vote:hover { border-color: var(--accent); }
.six-vote[aria-pressed="true"] { background: #0E5A64; border-color: #0E5A64; color: #fff; cursor: default; }
.six-empty { color: var(--muted); }
.six-share { margin-top: 4px; }
/* feature game: on narrow screens the floating share button sat on the answer buttons -> hidden on this page only
   (the end screen has its own share button) */
@media (max-width: 760px) { body:has(#feature) .site-share { display: none; } }
/* six: the sender's own entry, shown right after it went live */
.six-mine { margin: 12px 0 14px; }
/* six: the count says what is missing; the send button looks faded until there are 6 words but still answers a click */
.six-count.under { color: #8a5a00; font-weight: 700; }
.six-send.dim { opacity: .55; }

/* "Letters to fill in" (owner 22.10): the form, the tone pills, the letter on paper, the other letters */
.lt-types-h { text-align: center; font-size: 1.3rem; margin: 0 0 14px; }
.lt-cards .g-card { text-align: start; }
.lt-privacy { margin: 14px auto 0; color: var(--muted); font-size: .9rem; text-align: center; }
.lt { max-width: 640px; margin: 0 auto; scroll-margin-top: 90px; }
.lt-form { text-align: start; display: grid; gap: 14px; padding: 22px 20px; background: var(--card); border: 2px solid #C5DEE1; border-radius: 16px; }
.lt-form h2, .lt-out h2 { margin: 0; font-size: 1.25rem; text-align: center; }
.lt-out h2:focus { outline: none; }
.lt-field { display: grid; gap: 6px; }
.lt-field label { font-weight: 700; }
.lt-opt { font-weight: 400; color: var(--muted); font-size: .9rem; }
.lt-form input[type="text"], .lt-field input { font: inherit; font-size: 1.05rem; padding: 11px 14px; border: 1px solid #d8d2c7; border-radius: 10px; background: #fff; color: var(--fg); width: 100%; box-sizing: border-box; }
.lt-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.lt-tones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 0; padding: 0; border: 0; }
.lt-tones legend { width: 100%; margin: 0 0 8px; padding: 0; font-weight: 700; text-align: center; }
.lt-tone { position: relative; cursor: pointer; }
.lt-tone input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lt-tone > span { display: inline-block; padding: 9px 16px; border: 2px solid #C5DEE1; border-radius: 99px; background: #F2F8F8; color: var(--accent); font-weight: 700; transition: background .15s, color .15s; }
.lt-tone input:checked + span { background: #0E5A64; border-color: #0E5A64; color: #fff; }
.lt-tone input:focus-visible + span { outline: 3px solid #7FC1CA; outline-offset: 2px; }
.lt-err { margin: 0; min-height: 0; text-align: center; color: #8a5a00; font-weight: 700; }
.lt-err:empty { display: none; }
.lt-write { justify-self: center; min-width: 200px; font-weight: 700; background: #0E5A64; border-color: #0E5A64; color: #fff; font-size: 1.08rem; }
.lt-form .lt-privacy { margin: 0; }
.lt-out { margin: 28px 0 0; display: grid; gap: 14px; scroll-margin-top: 90px; }
.lt-paper { padding: 28px 26px; background: #fff; border: 1px solid #e3ddd2; border-radius: 16px; box-shadow: 0 8px 26px rgba(29, 27, 24, .08); text-align: start; line-height: 1.75; font-size: 1.08rem; overflow-wrap: anywhere; }
.lt-paper p { margin: 0 0 14px; }
.lt-paper p:last-child { margin: 0; }
.lt-paper .lt-greet, .lt-paper .lt-sign { font-weight: 700; }
.lt-live { margin: -4px 0 0; color: var(--muted); font-size: .88rem; text-align: center; }
.lt-acts { justify-content: center; }
.lt-acts .primary { font-weight: 700; }
.lt-bridge { margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; background: #E3F0F1; text-align: center; }
.lt-bridge a { color: var(--accent); font-weight: 700; white-space: nowrap; }
.lt-tip { margin: 0; text-align: center; }
.lt-more { max-width: 640px; margin: 36px auto 0; text-align: center; }
.lt-more h2 { font-size: 1.15rem; margin: 0 0 12px; }
.lt-more ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lt-more a { display: inline-block; padding: 8px 14px; border: 1px solid #C5DEE1; border-radius: 99px; background: var(--card); color: var(--accent); font-weight: 700; text-decoration: none; }
.lt-more a:hover { border-color: var(--accent); }
@media (max-width: 480px) { .lt-form { padding: 18px 14px; } .lt-paper { padding: 22px 18px; font-size: 1.02rem; } .lt-acts button { flex: 1 1 40%; } }
/* letters: on narrow screens the floating share button sat on the letter's action buttons -> hidden on these pages only
   (the letter has its own share button) */
@media (max-width: 760px) { body:has(#letters) .site-share { display: none; } }
/* letters on phones: the action buttons go right under the heading, above the letter, so a long letter never pushes them
   under the floating corner buttons */
@media (max-width: 760px) { .lt-out > h2 { order: -2; } .lt-out > .lt-acts { order: -1; } }
/* free persuasion checker (/he/games/check) - reuses the letters form (lt-*) */
.ck-form textarea { font: inherit; font-size: 1.02rem; line-height: 1.6; padding: 12px 14px; border: 1px solid #d8d2c7; border-radius: 10px; background: #fff; color: var(--fg); width: 100%; box-sizing: border-box; resize: vertical; min-height: 180px; }
.ck-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ck-count { margin: 0; color: var(--muted); font-size: .85rem; text-align: end; }
.ck-file { display: grid; justify-items: center; gap: 4px; text-align: center; }
.ck-file-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 16px; border: 1px dashed #9CC7CD; border-radius: 99px; color: var(--accent); font-weight: 700; background: #F2F8F8; }
.ck-file-btn:hover { border-color: var(--accent); }
.ck-file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ck-file-btn:focus-within { outline: 3px solid #7FC1CA; outline-offset: 2px; }
.ck-file-note { margin: 0; color: var(--muted); font-size: .85rem; }
.ck-file-msg { margin: 0; font-size: .9rem; font-weight: 700; color: var(--accent); }
.ck-file-msg:empty { display: none; }
.ck-go:disabled { opacity: .6; cursor: wait; }
.ck-loading { margin: 0; text-align: center; color: var(--muted); font-weight: 700; }
.ck-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #C5DEE1; border-top-color: var(--accent); border-radius: 50%; vertical-align: -2px; animation: ck-spin .8s linear infinite; }
@keyframes ck-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ck-spin { animation: none; } }
.ck-score { display: flex; align-items: center; gap: 20px; padding: 20px; background: var(--card); border: 2px solid #C5DEE1; border-radius: 16px; text-align: start; }
.ck-ring { --p: 0; --c: #c0392b; flex: none; width: 112px; height: 112px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--card) 78%, transparent 79%), conic-gradient(var(--c) calc(var(--p) * 1%), #DDEAEC 0); }
.ck-out[data-band="mid"] .ck-ring { --c: #c98a00; }
.ck-out[data-band="high"] .ck-ring { --c: #1e8e5a; }
.ck-num { font-size: 2.2rem; line-height: 1; font-weight: 700; color: var(--fg); }
.ck-ring small { color: var(--muted); font-size: .8rem; }
.ck-label { margin: 0; color: var(--muted); font-size: .9rem; font-weight: 700; }
.ck-headline { margin: 2px 0 6px; font-size: 1.12rem; font-weight: 700; line-height: 1.45; }
.ck-band { margin: 0; color: var(--muted); }
.ck-sub { margin: 8px 0 0; font-size: 1.1rem; text-align: center; }
.ck-criteria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; text-align: start; }
.ck-criteria li { padding: 14px 16px; background: var(--card); border: 1px solid #e8e3da; border-radius: 14px; display: grid; gap: 6px; }
.ck-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ck-pts { font-weight: 700; color: var(--muted); direction: ltr; unicode-bidi: isolate; }
.ck-bar { height: 8px; border-radius: 99px; background: #DDEAEC; overflow: hidden; }
.ck-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #c0392b; transition: width .6s ease; }
.ck-criteria li[data-level="mid"] .ck-bar i { background: #c98a00; }
.ck-criteria li[data-level="good"] .ck-bar i { background: #1e8e5a; }
.ck-hint { margin: 0; color: var(--muted); font-size: .82rem; }
.ck-note { margin: 0; line-height: 1.55; }
.ck-box { text-align: start; }
.ck-box h3 { font-size: 1rem; margin: 0 0 6px; color: var(--accent); }
.ck-box p { margin: 0; line-height: 1.65; }
.ck-good { border-color: #bfe3cf; background: #f3fbf6; }
.ck-good h3 { color: #1e8e5a; }
.ck-dna { display: grid; gap: 8px; border-color: #C5DEE1; background: #F2F8F8; }
.ck-dna[hidden] { display: none; }
.ck-dna h3 { margin: 0; }
.ck-dna .ck-pts { font-size: 1.15rem; color: var(--fg); }
.ck-dna[data-level="mid"] .ck-bar i { background: #c98a00; }
.ck-dna[data-level="high"] .ck-bar i { background: #1e8e5a; }
.ck-reason { margin: 0; text-align: center; }
@media (max-width: 480px) { .ck-score { flex-direction: column; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .ck-bar i { transition: none; } }
/* checker: keep the actions after the result on phones (the letters rule above moves them to the top) */
@media (max-width: 760px) { .ck-out > h2, .ck-out > .lt-acts { order: 0; } }

.g-cta .primary:hover { background: var(--cta-hover); }