/* ===== Evidence documents (TV, phone, print) ===== */
.hand-goldie { font-family: var(--f-hand-goldie); }
.hand-bev { font-family: var(--f-hand-bev); font-size: 1.18em; }
.hand-toby, .hand-ellie, .hand-young { font-family: var(--f-hand-young); }

.doc { position: relative; color: var(--ink); margin: 0 auto; max-width: 46rem; }
.doc p + p { margin-top: 0.5em; }

/* Index cards (note + recipe) with ruled lines */
.card-note, .card-recipe {
  padding: 1.6rem 1.8rem 1.4rem;
  box-shadow: var(--shadow-2);
  border-radius: 0.2rem;
  background-image:
    linear-gradient(transparent 0, transparent calc(2.1rem - 2px), rgba(80, 120, 170, 0.28) calc(2.1rem - 2px), rgba(80, 120, 170, 0.28) 2.1rem),
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.5), transparent 40%);
  background-size: 100% 2.1rem, auto;
  background-position: 0 1.25rem, 0 0;
  background-color: #fbf6ea;
  transform: rotate(-0.6deg);
}
.card-recipe { border-top: 0.35rem solid #c84a4a; transform: rotate(0.5deg); }
.hline { font-size: 1.45rem; line-height: 2.1rem; margin: 0 !important; color: #23314f; }
.hand-bev .hline, .hline.hand-bev { font-size: 1.62rem; }
.note-date { position: absolute; top: 0.6rem; right: 1rem; font-family: var(--f-hand-goldie); color: #6a5544; font-size: 1rem; }
.hline.sign { text-align: right; font-weight: 700; }
.recipe-head { font-family: var(--f-display); font-style: italic; font-size: 0.9rem; color: #9b3a3a; letter-spacing: 0.06em; }
.recipe-title { font-family: inherit; font-size: 1.7rem; color: #9b3a3a; line-height: 2.1rem; margin: 0 0 0.1rem; font-weight: 700; }

/* Notebook scrap with a torn top edge */
.card-scrap {
  background: #fdfdf6;
  padding: 2rem 1.6rem 1.2rem 3.2rem;
  box-shadow: var(--shadow-2);
  transform: rotate(1.4deg);
  background-image:
    linear-gradient(90deg, transparent 2.4rem, rgba(220, 80, 80, 0.45) 2.4rem, rgba(220, 80, 80, 0.45) calc(2.4rem + 2px), transparent calc(2.4rem + 2px)),
    linear-gradient(transparent calc(2.1rem - 2px), rgba(80, 120, 170, 0.3) 2.1rem);
  background-size: 100% 100%, 100% 2.1rem;
  background-position: 0 0, 0 1.95rem;
  -webkit-clip-path: polygon(0 4%, 6% 1%, 13% 4%, 22% 0, 31% 3%, 40% 1%, 50% 4%, 60% 0, 70% 3%, 80% 1%, 90% 4%, 100% 1%, 100% 100%, 0 100%);
  clip-path: polygon(0 4%, 6% 1%, 13% 4%, 22% 0, 31% 3%, 40% 1%, 50% 4%, 60% 0, 70% 3%, 80% 1%, 90% 4%, 100% 1%, 100% 100%, 0 100%);
}
.card-scrap .hline { color: #2d2d6a; }

/* Newspaper */
.newspaper { padding: 1.3rem 1.5rem 1.5rem; box-shadow: var(--shadow-2); background-color: #efe6d2; filter: sepia(0.15); max-width: 52rem; }
.np-mast { font-family: var(--f-display); font-weight: 900; font-size: 2.3rem; text-align: center; letter-spacing: -0.01em; line-height: 1; font-variation-settings: "SOFT" 0, "WONK" 1; }
.np-dateline { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); margin: 0.6rem 0 0.8rem; padding: 0.25rem 0; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.np-head { font-family: var(--f-display); font-weight: 900; font-size: 2.05rem; text-align: center; line-height: 1.05; }
.np-sub { text-align: center; font-style: italic; margin: 0.45rem 0 0.9rem !important; color: var(--ink-soft); }
.np-cols { display: flex; gap: 1.2rem; }
.np-body { flex: 1; font-family: Georgia, 'Times New Roman', serif; font-size: 1.02rem; line-height: 1.5; text-align: justify; hyphens: auto; }
.np-body p:first-child::first-letter { font-family: var(--f-display); font-weight: 900; float: left; font-size: 3.1em; line-height: 0.85; margin: 0.06em 0.08em 0 0; }
.np-side { flex: 0 0 30%; border-left: 1px solid var(--ink); padding-left: 1rem; font-size: 0.95rem; }
.np-side-t { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; margin-bottom: 0.3rem; }

/* Typed letters */
.letter { padding: 1.5rem 1.8rem 1.8rem; box-shadow: var(--shadow-2); max-width: 46rem; overflow: hidden; }
.lh { font-family: var(--f-display); font-weight: 900; font-size: 1.6rem; letter-spacing: 0.04em; color: #7b2332; text-align: center; }
.lh-sub { text-align: center; font-style: italic; font-size: 0.9rem; color: var(--ink-soft); border-bottom: 2px solid #7b2332; padding-bottom: 0.5rem; margin-bottom: 0.9rem; }
.typed { font-family: var(--f-type); font-size: 1.02rem; line-height: 1.5; color: #222; }
.sig-row { display: flex; align-items: baseline; gap: 0.8rem; margin-top: 1.1rem; flex-wrap: wrap; }
.sig { font-size: 2.1rem; color: #1f2f6b; border-bottom: 1px solid #555; padding: 0 0.6rem; line-height: 1.1; }
.sticky {
  position: relative; display: block; max-width: 22rem; margin: 1.1rem 0 0 auto; padding: 0.9rem 1rem;
  background: #ffe88a; box-shadow: var(--shadow-1); font-size: 1.32rem; line-height: 1.3; color: #2a2a55; transform: rotate(-2deg);
}

/* UV letter: dark violet room + beam that reveals the hidden marks */
.uv-doc { --bx: 30%; --by: 30%; outline-offset: 0.3rem; }
.uv-marks, .uv-dark, .uv-beam { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
.uv-on .uv-dark { opacity: 1; background: rgba(18, 6, 48, 0.86);
  -webkit-mask-image: radial-gradient(circle at var(--bx) var(--by), transparent 0, transparent 16%, #000 27%);
  mask-image: radial-gradient(circle at var(--bx) var(--by), transparent 0, transparent 16%, #000 27%); }
.uv-on .uv-beam { opacity: 1; background: radial-gradient(circle at var(--bx) var(--by), rgba(110, 60, 230, 0.62) 0, rgba(100, 50, 230, 0.3) 17%, transparent 27%); mix-blend-mode: multiply; }
.uv-on .uv-marks { opacity: 1;
  -webkit-mask-image: radial-gradient(circle at var(--bx) var(--by), #000 0, #000 15%, transparent 25%);
  mask-image: radial-gradient(circle at var(--bx) var(--by), #000 0, #000 15%, transparent 25%); }
.uv-on { cursor: crosshair; touch-action: none; }
/* Neon green on paper needs a dark halo to read: shadow first, then the glow. */
.uv-trace { position: absolute; left: 32%; right: 6%; bottom: 1.4rem; height: 3.2rem; color: var(--uv-glow);
  filter: drop-shadow(0 0 1.5px #082200) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 8px var(--uv-glow)); }
.uv-trace svg { width: 100%; height: 100%; }
.uv-trace path { stroke-width: 3.4; }
.uv-initials { position: absolute; right: 1.2rem; top: 42%; transform: rotate(-8deg); font-family: var(--f-hand-bev); font-weight: 700; font-size: 2.3rem; color: var(--uv-glow);
  -webkit-text-stroke: 0.6px #0d3300;
  text-shadow: 0 0 2px #061a00, 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 3px #061a00, 0 0 12px var(--uv-glow), 0 0 26px rgba(184, 255, 106, 0.7); }
.uv-found, .tool-bar { max-width: 46rem; margin: 0.9rem auto 0; }
.uv-found { background: rgba(124, 77, 255, 0.18); border: 2px solid rgba(184, 255, 106, 0.55); color: var(--on-dark); border-radius: var(--radius); padding: 0.75rem 1rem; }
.tool-bar { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.9rem; margin-top: 0; }
.tool-help { color: var(--on-dark-soft); font-size: 0.95rem; }
.print-flap { margin-top: 0.8rem; border: 2px dashed #7c4dff; padding: 0.6rem; font-size: 0.9rem; color: #2a1a5e; background: #f1ebff; }

/* VHS frames */
.vhs { max-width: 50rem; }
.vhs-screen { border-radius: 0.6rem; box-shadow: 0 0 0 0.5rem #151515, 0 0 0 0.62rem #3a3a3a, var(--shadow-2); }
.vhs-screen img { filter: saturate(1.15) contrast(1.05) blur(0.3px); }
.vhs-overlay { font-family: var(--f-vhs); color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,0.55), -1px 0 rgba(255,0,80,0.45), 1px 0 rgba(0,200,255,0.45); font-size: 2.2rem; pointer-events: none; }
.vhs-overlay span { position: absolute; }
.vhs-play { top: 4%; left: 4%; }
.vhs-time { top: 4%; right: 4%; }
.vhs-sp { bottom: 4%; left: 4%; }
.vhs-counter { bottom: 4%; right: 4%; }
.vhs-lines { pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 4px); animation: vhsroll 7s linear infinite; }
@keyframes vhsroll { from { background-position: 0 0; } to { background-position: 0 120px; } }
.vhs-log { margin-top: 1.1rem; background: rgba(10, 8, 6, 0.55); border-left: 0.35rem solid var(--pumpkin); border-radius: 0.4rem; padding: 0.8rem 1rem; color: var(--on-dark); }
.vhs-log-t { font-family: var(--f-vhs); font-size: 1.4rem; color: var(--gold); letter-spacing: 0.08em; }
.vhs-log p { margin-top: 0.35rem; }
.vhs-log b { color: var(--pumpkin-2); letter-spacing: 0.04em; }

/* Floor plan */
.map-doc { padding: 1rem; box-shadow: var(--shadow-2); max-width: 60rem; border-radius: 0.4rem; }
.map-clock { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.7rem; }
.map-clock-l { font-family: var(--f-display); font-weight: 700; margin-right: 0.3rem; }
.map-t { background: #fffaf0; }
.map-t.on { background: var(--pumpkin); color: #fff; }
.floorplan { width: 100%; height: auto; display: block; }
.map-stage .floorplan { max-height: 62vh; width: auto; max-width: 100%; margin: 0 auto; }
.room-label { font-family: var(--f-display); font-weight: 700; font-size: 24px; fill: #3b2618; }
.map-cart { font-family: var(--f-vhs); font-size: 26px; fill: #f2d48a; letter-spacing: 2px; }
.map-note { font-size: 20px; font-weight: 700; fill: #a94a17; font-family: var(--f-body); }
.map-small { font-size: 19px; font-weight: 700; fill: #4a3322; font-family: var(--f-body); }
.map-tiny { font-size: 16px; fill: #5b4636; font-family: var(--f-body); }
.tok-l { font-family: var(--f-display); font-weight: 900; font-size: 30px; }
.tok-n { font-family: var(--f-body); font-weight: 700; font-size: 18px; fill: #2b1d14; paint-order: stroke; stroke: #fffaf0; stroke-width: 5px; stroke-linejoin: round; }
.token { transition: transform 0.5s ease; }
.map-legend { margin-top: 0.6rem !important; font-size: 0.95rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.lg { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 3px solid #a8323e; }
.lg.seen { background: #a8323e; }
.lg.claimed { border-style: dashed; background: #fffaf0; }
.map-print { break-inside: avoid; margin-bottom: 0.6rem; }
.map-print-t { font-family: var(--f-display); font-weight: 700; }

/* Judge's scorecard */
.scorecard { padding: 1.3rem 1.5rem; box-shadow: var(--shadow-2); border: 0.3rem double #6f8360; }
.sc-head { font-family: var(--f-display); font-weight: 900; text-align: center; color: #4b5d3f; letter-spacing: 0.04em; }
.sc-judge { margin: 0.4rem 0 0.7rem; }
.sc-judge .hand-goldie { font-size: 1.4rem; }
.scorecard table { width: 100%; border-collapse: collapse; }
.scorecard th, .scorecard td { border-bottom: 1px solid #b9a57f; padding: 0.4rem 0.3rem; text-align: left; }
.scorecard td.hand-goldie { font-size: 1.55rem; color: #1f2f6b; text-align: center; }
.scorecard th:not(:first-child) { text-align: center; }
.sc-doodle { margin-top: 0.8rem; font-size: 1.55rem; color: #c0394b; transform: rotate(-2deg); text-align: right; }

/* Answering machine */
.machine { max-width: 46rem; }
.am-body { background: linear-gradient(180deg, #e9e0cd, #cfc3aa); border-radius: 1rem; padding: 1.1rem 1.2rem; box-shadow: var(--shadow-2), inset 0 2px 0 rgba(255,255,255,0.6); color: #2b2b2b; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand brand" "win lcd" "play play"; gap: 0.8rem 1rem; align-items: center; }
.am-brand { grid-area: brand; font-family: var(--f-body); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.875rem; color: #6a6153; }
.am-window { grid-area: win; display: flex; gap: 0.7rem; background: #2a2622; padding: 0.6rem 0.8rem; border-radius: 0.5rem; }
.reel { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: radial-gradient(circle, #e8e2d6 0 22%, #3a332c 23% 40%, #8b7d6a 41% 60%, #3a332c 61%); }
.playing .reel { animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.am-lcd { grid-area: lcd; background: #9fb08a; color: #1d2a12; font-family: var(--f-vhs); font-size: 1.3rem; padding: 0.4rem 0.7rem; border-radius: 0.35rem; box-shadow: inset 0 2px 6px rgba(0,0,0,0.3); display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: center; }
.am-led { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #5a1010; }
.playing .am-led { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }
.am-count { margin-left: auto; font-size: 1.6rem; }
.am-play { grid-area: play; justify-self: start; }
.am-from { margin-top: 0.7rem; color: var(--on-dark-soft); font-size: 0.95rem; }
.am-transcript { margin-top: 0.8rem; background: var(--paper); color: var(--ink); border-radius: 0.5rem; padding: 0.9rem 1.1rem; box-shadow: var(--shadow-1); max-height: 46vh; overflow-y: auto; }
.am-transcript p { opacity: 0.12; transition: opacity 0.4s ease; margin-top: 0.4rem; }
.am-transcript p.on, .am-transcript.all p { opacity: 1; }
.am-transcript b { color: var(--wine); }

/* Receipt */
.receipt-doc { max-width: 40rem; display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.receipt { flex: 1 1 17rem; background: #fbfbf7; font-family: var(--f-type); font-size: 1rem; padding: 1.1rem 1rem 1.4rem; box-shadow: var(--shadow-2); transform: rotate(-1.2deg); color: #222;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 97%, 95% 100%, 90% 97%, 85% 100%, 80% 97%, 75% 100%, 70% 97%, 65% 100%, 60% 97%, 55% 100%, 50% 97%, 45% 100%, 40% 97%, 35% 100%, 30% 97%, 25% 100%, 20% 97%, 15% 100%, 10% 97%, 5% 100%, 0 97%);
  clip-path: polygon(0 0, 100% 0, 100% 97%, 95% 100%, 90% 97%, 85% 100%, 80% 97%, 75% 100%, 70% 97%, 65% 100%, 60% 97%, 55% 100%, 50% 97%, 45% 100%, 40% 97%, 35% 100%, 30% 97%, 25% 100%, 20% 97%, 15% 100%, 10% 97%, 5% 100%, 0 97%); }
.rc-store { text-align: center; font-weight: 700; }
.rc-date { text-align: center; }
.rc-rule { border-top: 2px dashed #888; margin: 0.5rem 0; }
.rc-row { display: flex; justify-content: space-between; gap: 0.8rem; }
.rc-total { font-weight: 700; }
.rc-thanks { text-align: center; margin-top: 0.6rem; font-size: 0.875rem; }
.receipt-doc .sticky { flex: 1 1 14rem; margin: 0.5rem 0 0; }

/* Polaroid with loupe */
.polaroid-doc { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; max-width: 62rem; }
/* No tilt here: the loupe maths needs the photo square to the screen. */
.polaroid.big { flex: 1 1 22rem; max-width: 34rem; padding: 0.8rem 0.8rem 3rem; }
.polaroid.big { max-width: min(34rem, 62vh); }
.polaroid.big .cap { font-size: 1.5rem; bottom: 0.6rem; }
.loupe-stage { touch-action: none; cursor: crosshair; }
.sideboard-art { padding: 0 !important; }
.sideboard-art svg, .loupe-media svg { width: 100% !important; height: 100% !important; opacity: 1 !important; }
.loupe { position: absolute; width: 42%; height: 0; padding-top: 42%; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
  box-shadow: 0 0 0 0.45rem #b8862f, 0 0 0 0.62rem #6b4a1e, 0 0.8rem 1.6rem rgba(0,0,0,0.6), inset 0 0 1.4rem rgba(0,0,0,0.55); overflow: hidden; }
.loupe-in { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.loupe-media { position: absolute !important; max-width: none !important; object-fit: cover; }
.aiming .loupe { opacity: 1; }
.loupe-side { flex: 1 1 15rem; color: var(--on-dark); }
.loupe-t { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; margin-bottom: 0.4rem; }
.details { margin: 0; padding-left: 1.3rem; }
.details li { margin-bottom: 0.5rem; }
.details li.found { color: var(--on-dark); font-weight: 700; }
.muted-d { color: var(--on-dark-soft); font-weight: 400; font-style: italic; }
.loupe-help { color: var(--on-dark-soft); font-size: 0.95rem; margin-top: 0.6rem !important; }

/* Narrow screens */
@media (max-width: 640px) {
  .np-cols { flex-direction: column; }
  .np-side { border-left: 0; border-top: 1px solid var(--ink); padding: 0.6rem 0 0; }
  .np-mast { font-size: 1.7rem; }
  .np-head { font-size: 1.55rem; }
  .card-note, .card-recipe { padding: 1.4rem 1.1rem 1.2rem; }
  .hline { font-size: 1.25rem; }
  .vhs-overlay { font-size: 1.4rem; }
  .letter { padding: 1.2rem 1.1rem 1.4rem; }
}