/* Scam or Safe? A game from CASL (23 Sept 2026). Large type, calm colours, nothing moves on its own.
   Brand tokens as on thecasl.ca: Fraunces headings, Atkinson Hyperlegible body, cream, green, terracotta. */
:root {
  --cream-50: #FDFBF6; --cream-100: #F7F2EA; --cream-200: #F0E8DA; --cream-300: #E8DCC8;
  --ink-900: #2B2620; --ink-800: #3B3529; --ink-700: #574F42; --ink-600: #6E6455; --ink-400: #A69C8C; --ink-200: #DDD5C5; --ink-100: #EBE4D6;
  --green-900: #17332B; --green-800: #204239; --green-700: #2F5D50; --green-600: #3B7566; --green-500: #4C8C7B; --green-200: #C4DBD2; --green-100: #E3ECE7; --green-50: #F1F6F3;
  --terra-800: #8C5335; --terra-700: #A9663F; --terra-600: #C97A4A; --terra-300: #EABF9C; --terra-100: #F6E5D6; --terra-50: #FBF2EA;
  --flag-bg: #FBE1CF; --flag-ring: #D8925F;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --z: 1;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(20px * var(--z)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--cream-100); color: var(--ink-900); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
p, h1, h2, h3 { margin: 0; }
a { color: var(--green-700); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--terra-600); outline-offset: 3px; border-radius: 8px; }
[data-focus]:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { display: block; flex: none; }
.mark { width: 40px; height: 40px; flex: none; }

/* frame */
.top { position: sticky; top: 0; z-index: 10; background: rgba(247, 242, 234, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ink-100); padding-top: env(safe-area-inset-top); }
.top-in { max-width: 860px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--green-800); }
.brand small { font-family: var(--sans); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--terra-700); }
.sizes { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sizes span { font-size: .8rem; color: var(--ink-600); margin-right: 2px; }
.size { min-width: 48px; min-height: 48px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--ink-200); background: #fff; font-weight: 800; cursor: pointer; color: var(--green-800); }
.size[aria-pressed="true"] { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.size.s1 { font-size: 16px; } .size.s2 { font-size: 19px; } .size.s3 { font-size: 22px; }
@media (max-width: 520px) { .brand small, .sizes span { display: none; } .size { min-width: 44px; min-height: 44px; } .top-in { min-height: 60px; gap: 8px; } }
main { max-width: 860px; margin: 0 auto; padding: 22px 16px calc(64px + env(safe-area-inset-bottom)); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; padding: 14px 28px; border-radius: 16px; border: 2px solid transparent; font-weight: 800; font-size: 1.05rem; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background .15s ease-out, transform .1s ease-out; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--green-700); color: #fff; }
.btn-primary:hover { background: var(--green-800); }
.btn-scam { background: var(--terra-600); color: #fff; }
.btn-scam:hover { background: var(--terra-700); }
.btn-safe { background: var(--green-700); color: #fff; }
.btn-safe:hover { background: var(--green-800); }
.btn-outline { background: #fff; color: var(--green-800); border-color: var(--green-600); }
.btn-outline:hover { background: var(--green-50); }
.btn-big { min-height: 68px; font-size: 1.15rem; padding: 16px 34px; }

/* start */
.hero { display: grid; gap: 22px; align-items: center; }
.hero-art { border-radius: 26px; overflow: hidden; box-shadow: 0 20px 45px rgba(43, 38, 32, .14); background: var(--cream-200); aspect-ratio: 3 / 2; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kicker { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-700); }
.h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.3rem, 1.6rem + 4vw, 3.6rem); line-height: 1.02; letter-spacing: -.02em; color: var(--green-900); }
.h1 em { font-style: italic; font-weight: 500; color: var(--terra-700); }
.lede { font-size: 1.1rem; color: var(--ink-700); max-width: 34em; }
.how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.how li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink-800); }
.how .ic { color: var(--green-700); }
.start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.best { font-size: .9rem; color: var(--ink-600); }
@media (min-width: 800px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; } .hero-art { order: 2; } }

/* a round */
.progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-weight: 700; color: var(--ink-700); font-size: .95rem; }
.pbar { flex: 1; height: 10px; border-radius: 999px; background: var(--cream-300); overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 999px; background: var(--green-700); }
.score { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--ink-100); }
.q { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); line-height: 1.15; color: var(--green-900); text-align: center; margin: 18px 0 16px; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.choices .btn { width: 100%; }
@media (max-width: 420px) { .choices { grid-template-columns: 1fr; } }

/* message mock-ups */
.mock { width: 100%; max-width: 540px; }
.sms { background: #fff; border-radius: 26px; box-shadow: 0 16px 40px rgba(43, 38, 32, .12); border: 1px solid var(--ink-100); overflow: hidden; }
.sms-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--cream-50); border-bottom: 1px solid var(--ink-100); }
.av { width: 48px; height: 48px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--green-100); color: var(--green-800); }
.av.unknown { background: var(--cream-300); color: var(--ink-600); }
.who b { display: block; font-size: 1.02rem; }
.who small { display: block; font-size: .8rem; color: var(--ink-600); font-weight: 600; }
.sms-body { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.bubble { align-self: flex-start; max-width: 92%; padding: 14px 18px; border-radius: 22px 22px 22px 6px; background: #ECE7DE; font-size: 1.05rem; line-height: 1.5; }
.stamp { font-size: .75rem; color: var(--ink-600); padding-left: 6px; }
.call { background: var(--green-900); color: var(--cream-50); border-radius: 26px; box-shadow: 0 16px 40px rgba(23, 51, 43, .25); overflow: hidden; }
.call-top { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.call-top .av { background: rgba(255, 255, 255, .12); color: var(--cream-50); }
.call-top small { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-200); }
.call-top b { display: block; font-size: 1.15rem; }
.call-top div > span { display: block; font-size: .9rem; color: var(--green-100); }
.say { margin: 0 12px 12px; padding: 16px 18px; border-radius: 18px; background: var(--cream-50); color: var(--ink-900); }
.say small { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600); margin-bottom: 6px; }
.say p { font-size: 1.05rem; line-height: 1.55; }
.mail { background: #fff; border-radius: 22px; box-shadow: 0 16px 40px rgba(43, 38, 32, .12); border: 1px solid var(--ink-100); overflow: hidden; }
.mail-bar { display: flex; gap: 6px; padding: 12px 16px; background: var(--cream-200); }
.mail-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-200); }
.mail-head { padding: 14px 18px; border-bottom: 1px solid var(--ink-100); display: flex; flex-direction: column; gap: 6px; font-size: .95rem; }
.mail-head small { display: inline-block; min-width: 4.4em; color: var(--ink-600); font-weight: 700; }
.mail-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 14px; font-size: 1.02rem; }
.fakebtn { align-self: flex-start; padding: 10px 20px; border-radius: 10px; background: #1F5FAD; color: #fff; font-weight: 800; }
.browser { background: #fff; border-radius: 18px; box-shadow: 0 16px 40px rgba(43, 38, 32, .14); border: 1px solid var(--ink-200); overflow: hidden; }
.br-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--cream-200); }
.br-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-200); }
.br-bar span { flex: 1; height: 22px; margin-left: 8px; border-radius: 999px; background: #fff; }
.pop { margin: 16px; border-radius: 14px; overflow: hidden; border: 3px solid #B42318; }
.pop-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #B42318; color: #fff; font-weight: 800; }
.pop-body { padding: 16px 18px; background: #FFF5F3; color: #3A1A14; font-size: 1.05rem; font-weight: 600; line-height: 1.5; }
.social { background: #fff; border-radius: 22px; box-shadow: 0 16px 40px rgba(43, 38, 32, .12); border: 1px solid var(--ink-100); overflow: hidden; }
.social-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ink-100); }
.social-top .av { background: #DCE6F2; color: #2C4B72; }
.social-msg { padding: 16px 18px 20px; }
.social-msg .bubble { background: #E7EEF7; }
.lnk { color: #1F5FAD; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }

/* red flags: plain text until the player answers */
.fl { background: none; color: inherit; border-radius: 6px; }
.fl-n { display: none; }
.answered .fl { background: var(--flag-bg); box-shadow: 0 0 0 2px var(--flag-ring); padding: 1px 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.answered .call .fl { color: var(--ink-900); }
.answered .fl-n { display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em; margin-left: 4px; border-radius: 50%; background: var(--terra-700); color: #fff; font-size: .7em; font-weight: 800; vertical-align: .15em; }

/* the result */
.verdict { margin: 0 0 16px; border-radius: 22px; padding: 16px 18px; border: 2px solid; }
.verdict.good { background: var(--green-50); border-color: var(--green-200); }
.verdict.miss { background: var(--terra-50); border-color: var(--terra-300); }
.result { margin-top: 22px; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 16px; border: 2px solid var(--ink-100); background: #fff; }
.res-head { display: flex; align-items: flex-start; gap: 14px; }
.res-ic { width: 52px; height: 52px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.good .res-ic { background: var(--green-600); }
.miss .res-ic { background: var(--terra-600); }
.marked { font-size: .92rem; color: var(--ink-700); display: flex; align-items: center; gap: 8px; }
.marked i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--terra-700); color: #fff; font-size: .75em; font-weight: 800; }
.res-title { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: var(--green-900); }
.res-sub { color: var(--ink-700); margin-top: 4px; }
.h3 { font-size: 1.05rem; font-weight: 800; color: var(--green-900); }
.flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.flags li { display: flex; gap: 12px; align-items: flex-start; }
.flags .num { width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--terra-700); color: #fff; font-weight: 800; font-size: .85rem; margin-top: 1px; }
.whys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.whys li { display: flex; gap: 12px; align-items: flex-start; }
.whys .ic { color: var(--green-700); margin-top: 3px; }
.note { font-size: .95rem; color: var(--ink-700); font-style: italic; }
.todo { background: #fff; border-radius: 18px; padding: 16px 18px; border: 1px solid var(--ink-100); display: flex; gap: 12px; align-items: flex-start; }
.todo .ic { color: var(--terra-700); margin-top: 3px; }
.todo b { display: block; margin-bottom: 2px; }
.res-next { align-self: flex-end; }

/* the end */
.end-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 10px 0 24px; }
.big-score { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 1.8rem + 3vw, 3.4rem); line-height: 1.05; color: var(--green-900); }
.level { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; border-radius: 999px; background: var(--terra-600); color: #fff; font-weight: 800; font-size: 1.05rem; }
.level-text { color: var(--ink-700); max-width: 30em; }
.recap { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.recap li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--ink-100); }
.recap .mk { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.recap .ok .mk { background: var(--green-600); }
.recap .no .mk { background: var(--terra-600); }
.recap b { display: block; }
.recap span { display: block; font-size: .92rem; color: var(--ink-700); }
.signs { background: var(--green-900); color: var(--cream-50); border-radius: 28px; padding: 26px 24px; display: flex; flex-direction: column; gap: 18px; }
.signs h2 { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; line-height: 1.15; }
.signs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; counter-reset: s; }
.signs li { display: flex; gap: 14px; align-items: flex-start; counter-increment: s; }
.signs li::before { content: counter(s); width: 38px; height: 38px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--terra-600); color: #fff; font-weight: 800; }
.signs li b { display: block; font-size: 1.08rem; }
.signs li span { color: var(--green-100); }
.doubt { background: rgba(255, 255, 255, .07); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.doubt h3 { font-size: 1.1rem; }
.doubt p { color: var(--green-100); }
.doubt strong { color: #fff; }
.end-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.casl { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--ink-100); }
.casl p { color: var(--ink-700); font-size: .95rem; }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; padding: 14px 20px; border-radius: 14px; background: var(--green-900); color: #fff; font-weight: 700; box-shadow: 0 16px 36px rgba(0, 0, 0, .25); }
.foot { text-align: center; font-size: .85rem; color: var(--ink-600); margin-top: 26px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .top, .end-head, .recap, .end-actions, .casl, .foot, .toast { display: none !important; }
  main { padding: 0; }
  .signs { background: #fff; color: #17332B; border: 2px solid #2F5D50; }
  .signs li span, .doubt p { color: #3B3529; }
  .doubt { background: #F1F6F3; }
  .doubt strong { color: #17332B; }
  .print-only { display: block !important; }
}
.print-only { display: none; }