/* Spot the Scam: only what the shared system (/assets/jf.css) doesn't cover.
   The message mock-ups (text, email, call, notice) stay square, 3px lines, tokens only. */
.scam-done { width: 100%; max-width: 620px; text-align: left; }
.scam-storage { margin: 0 var(--jf-s4) var(--jf-s4); }

.scam-round-body { max-width: 860px; margin-inline: auto; }
.scam-q-title { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.8rem); }
.scam-context { display: grid; gap: var(--jf-s1); padding-left: var(--jf-s4); border-left: var(--jf-rule) solid var(--jf-blue); }
.scam-context p { font-size: var(--jf-t-lede); line-height: 1.45; }

/* Message mock-up: shared frame */
.scam-msg { margin: 0; border: var(--jf-line) solid var(--jf-edge); background: var(--jf-paper-2); }
.scam-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--jf-s1) var(--jf-s4); padding: var(--jf-s3) var(--jf-s4); border-bottom: var(--jf-line) solid var(--jf-edge); background: var(--jf-paper); }
.scam-msg-from { font-weight: 600; overflow-wrap: anywhere; }
.scam-from-label { font-weight: 700; font-size: var(--jf-t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--jf-ink-soft); }
.scam-msg-body { margin: 0; padding: var(--jf-s5) var(--jf-s4); font-size: 1.125rem; line-height: 1.5; overflow-wrap: anywhere; }
/* Example addresses look like links but are plain text: nothing to click */
.scam-fakelink { color: var(--jf-link-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Text message: a square speech bubble on the phone's screen */
.scam-msg[data-kind="sms"] .scam-msg-body { padding: var(--jf-s5) var(--jf-s4) var(--jf-s6); }
.scam-msg[data-kind="sms"] .scam-msg-body p { position: relative; max-width: min(100%, 46ch); padding: var(--jf-s3) var(--jf-s4); background: var(--jf-paper); border: var(--jf-line) solid var(--jf-edge); }
.scam-msg[data-kind="sms"] .scam-msg-body p::after { content: ""; position: absolute; left: -3px; bottom: -16px; width: 20px; height: 14px; background: var(--jf-edge); clip-path: polygon(0 0, 100% 0, 0 100%); }

/* Email: header lines over a white-paper body */
.scam-msg[data-kind="email"] .scam-msg-body { background: var(--jf-paper); border-top: var(--jf-rule) solid var(--jf-blue); }

/* Phone call: the call screen, then what the caller says */
.scam-msg[data-kind="call"] { background: var(--jf-ink); color: var(--jf-paper); }
.scam-msg[data-kind="call"] .scam-msg-head { flex-direction: column; align-items: center; text-align: center; background: var(--jf-ink); color: var(--jf-paper); border-bottom-color: var(--jf-paper); padding-block: var(--jf-s5); }
.scam-msg[data-kind="call"] .scam-msg-head h3::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--jf-s2); border-radius: 50%; background: var(--jf-red); }
.scam-msg[data-kind="call"] .scam-from-label { color: inherit; opacity: .8; }
.scam-msg[data-kind="call"] .scam-msg-from { font-size: 1.15rem; }
.scam-msg[data-kind="call"] .scam-msg-body { text-align: center; font-style: italic; }
.scam-msg[data-kind="call"] .scam-msg-body p::before { content: "“"; }
.scam-msg[data-kind="call"] .scam-msg-body p::after { content: "”"; }

/* Round: the call, the clock and the red-flag hunt */
.scam-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jf-s3) var(--jf-s5); }
.scam-timer { display: flex; align-items: center; gap: var(--jf-s3); flex: 1 1 200px; max-width: 340px; }
.scam-timer-bar { flex: 1; height: 18px; border: var(--jf-line) solid var(--jf-edge); background: var(--jf-paper); box-shadow: var(--jf-sunken); }
.scam-timer-bar span { display: block; height: 100%; background: var(--jf-yellow); box-shadow: var(--jf-bevel); transition: width .1s linear; }
.scam-timer-bar span.is-low { background: var(--jf-red); }
.scam-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jf-s4); }
.scam-call { min-height: 76px; font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); }
.scam-key { padding: 0 6px; border: 2px solid currentColor; font-size: .75rem; opacity: .8; }
@media (hover: none) { .scam-key { display: none; } }
.scam-hunt { display: grid; gap: var(--jf-s2); }
.scam-hunt-status { font-size: 1rem; }

/* Words of the message: plain text, then buttons during the hunt */
.scam-w { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
button.scam-w { display: inline; margin: 0; padding: 0 1px; line-height: inherit; text-align: inherit; background: none; border: 0; border-bottom: 2px dashed currentColor; border-radius: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { button.scam-w:not(:disabled):hover { background: var(--jf-yellow); color: #141414; } }
button.scam-w:disabled { cursor: default; }
.scam-msg:has(button.scam-w) .scam-msg-body { line-height: 2.2; }
.scam-flag.is-found { background: var(--jf-yellow); color: #141414; box-shadow: inset 0 -3px 0 #141414; }
.scam-flag.is-missed { outline: 3px dashed var(--jf-bad); outline-offset: 2px; }
button.scam-w.is-flag { border-bottom-color: transparent; color: #141414; }
.scam-w.is-miss { border-bottom-color: transparent; text-decoration: line-through 3px var(--jf-bad); opacity: .65; }
.scam-chips { display: flex; flex-wrap: wrap; gap: var(--jf-s2); list-style: none; padding: 0; }
.scam-chips:empty { display: none; }
.scam-chip { padding: var(--jf-s1) var(--jf-s3); border: var(--jf-line) solid var(--jf-edge); font-weight: 700; font-size: var(--jf-t-label); letter-spacing: .06em; text-transform: uppercase; }
.scam-chip.is-found { background: var(--jf-yellow); color: #141414; box-shadow: var(--jf-bevel); }
.scam-chip.is-missed { border-style: dashed; border-color: var(--jf-bad); }
.scam-breakdown { letter-spacing: .04em; }
.scam-rank { font-weight: 700; font-size: var(--jf-t-h3); text-transform: uppercase; color: var(--jf-accent-text); }
.scam-feedback { display: grid; gap: var(--jf-s4); }
.scam-feedback-title { font-size: 1.2rem; }

/* Results */
.scam-review { max-width: 860px; margin: var(--jf-s7) auto 0; padding-top: var(--jf-s5); border-top: var(--jf-line) solid var(--jf-edge); }
.scam-review h3 { margin-bottom: var(--jf-s4); }
.scam-review-list { list-style: none; padding: 0; display: grid; gap: var(--jf-s3); }
.scam-review-list li { display: grid; gap: var(--jf-s1); padding: var(--jf-s3) var(--jf-s4); border: var(--jf-line) solid var(--jf-edge); border-left-width: 10px; }
.scam-review-list li.is-right { border-left-color: var(--jf-good); }
.scam-review-list li.is-wrong { border-left-color: var(--jf-bad); }
.scam-review-list p { color: var(--jf-ink-soft); }
.scam-checks-h { margin-top: var(--jf-s7); }
.scam-report { max-width: 62ch; margin-inline: auto; }
.scam-review-list .scam-review-sit { font-style: italic; }