/* Postcard Puzzles: CASL's colours, big type, and a calm puzzle table. */
:root {
  --green: #2F5D50; --green-d: #17332B; --green-50: #EEF5F1; --green-200: #CFE3D8;
  --terra: #C97A4A; --terra-d: #A9663F; --terra-50: #FBF2EA; --terra-300: #EABF9C;
  --cream: #F7F2EA; --cream-2: #F0E8DA; --cream-3: #E8DCC8; --ink: #1F2A26; --ink-2: #4A544F; --muted: #6B716D;
  --serif: "Fraunces", Georgia, serif; --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --felt: #DCE8DF;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
a { color: var(--green); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 22px; border-radius: 14px; border: 1.5px solid transparent; font-weight: 800; font-size: 1rem; cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn-go { background: var(--green); color: #fff; }
.btn-go:hover { background: #244A40; }
.btn-soft { background: var(--terra-50); border-color: var(--terra-300); color: #8C5335; }
.btn-soft:hover { background: #F6E5D6; }
.btn-ghost { background: transparent; color: var(--green); }
.btn-ghost:hover { background: var(--green-50); }
.b-ic { width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid var(--cream-3); background: #fff; font-size: 1.25rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.b-ic[aria-pressed="false"] { opacity: .75; }

/* ---------- the postcard rack ---------- */
.top { max-width: 1120px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; color: var(--green); }
.top-r { display: flex; align-items: center; gap: 10px; }
.sizes { display: inline-flex; border: 1.5px solid var(--cream-3); border-radius: 12px; overflow: hidden; background: #fff; }
.tz { min-width: 44px; height: 46px; border: 0; background: none; cursor: pointer; font-weight: 800; color: var(--ink-2); }
.tz0 { font-size: .9rem; } .tz1 { font-size: 1.1rem; } .tz2 { font-size: 1.3rem; }
.tz[aria-pressed="true"] { background: var(--green); color: #fff; }
.home { max-width: 1120px; margin: 0 auto; padding: 8px 20px 48px; }
.hero { max-width: 720px; }
.kick { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--terra-d); }
.h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); line-height: 1.05; color: var(--green-d); margin: 6px 0 10px; }
.h1 em { color: var(--terra); font-style: italic; }
.lede { font-size: 1.12rem; color: var(--ink-2); margin: 0 0 22px; }
.resume { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; background: #fff; border: 1.5px solid var(--terra-300); border-radius: 20px; padding: 14px 18px; margin: 0 0 24px; box-shadow: 0 8px 24px rgba(43, 38, 32, .07); }
.resume img { width: 120px; height: auto; border-radius: 10px; }
.resume h2 { font-family: var(--serif); font-weight: 600; margin: 2px 0; font-size: 1.35rem; color: var(--green-d); }
.resume p { margin: 0; color: var(--ink-2); }
.resume > div { flex: 1 1 200px; }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 22px; }
.pick-l { font-weight: 800; }
.seg { display: inline-flex; background: #fff; border: 1.5px solid var(--cream-3); border-radius: 16px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: none; border-radius: 12px; padding: 8px 16px; min-height: 52px; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.seg button b { font-size: 1.2rem; }
.seg button span { font-size: .82rem; color: var(--muted); font-weight: 700; }
.seg button[aria-checked="true"] { background: var(--green); color: #fff; }
.seg button[aria-checked="true"] span { color: var(--green-200); }
.rack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.card { width: 100%; text-align: left; cursor: pointer; background: #fff; border: 1px solid var(--cream-3); border-radius: 10px; padding: 10px 10px 14px; box-shadow: 0 2px 0 var(--cream-3), 0 10px 22px rgba(43, 38, 32, .08); display: flex; flex-direction: column; gap: 4px; transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: rotate(-1deg) translateY(-3px); box-shadow: 0 2px 0 var(--cream-3), 0 16px 30px rgba(43, 38, 32, .14); }
.rack li:nth-child(even) .card:hover { transform: rotate(1deg) translateY(-3px); }
.card-img { position: relative; display: block; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--cream-2); margin-bottom: 6px; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-done { position: absolute; top: 8px; right: 8px; background: rgba(23, 51, 43, .88); color: #fff; font-size: .78rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.card-t { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--green-d); padding: 0 4px; }
.card-w { color: var(--muted); font-size: .92rem; padding: 0 4px; }
.card-stamps { display: flex; gap: 6px; padding: 6px 4px 0; }
.card-stamps i { font-style: normal; font-size: .72rem; font-weight: 800; color: var(--muted); border: 1.5px dashed var(--cream-3); border-radius: 6px; padding: 1px 6px; }
.card-stamps i.on { color: #fff; background: var(--terra); border: 1.5px solid var(--terra); }
.tally { color: var(--ink-2); margin: 22px 0 0; font-weight: 700; }
.how { margin-top: 32px; background: #fff; border: 1px solid var(--cream-3); border-radius: 20px; padding: 18px 22px; max-width: 760px; }
.how h2 { font-family: var(--serif); font-weight: 600; color: var(--green-d); margin: 0 0 6px; font-size: 1.35rem; }
.how ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.how li { margin: 6px 0; }
.foot { margin-top: 28px; color: var(--muted); font-size: .92rem; }
.loading { text-align: center; padding: 80px 20px; font-size: 1.1rem; color: var(--ink-2); }

/* ---------- the table ---------- */
body.is-play { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.is-play #app { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--cream-3); }
.b-back { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 0; background: none; font-weight: 800; color: var(--green); cursor: pointer; font-size: 1rem; }
.b-back:hover { background: var(--green-50); }
.b-back span[aria-hidden] { font-size: 1.3rem; line-height: 1; }
.bar-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bar-t { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--green-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bar-sub { font-size: .88rem; color: var(--ink-2); font-weight: 700; }
.table { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: radial-gradient(ellipse at 30% 20%, #E7F0E9 0%, var(--felt) 60%, #CFDFD4 100%); }
.board { position: absolute; border-radius: 6px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 2px rgba(47, 93, 80, .35), inset 0 2px 10px rgba(23, 51, 43, .18); }
.board::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--pic); background-size: 100% 100%; opacity: 0; transition: opacity .3s ease; }
.board.faint::before { opacity: .22; }
.pz { position: absolute; left: 0; top: 0; will-change: transform; cursor: grab; filter: drop-shadow(0 2px 2px rgba(23, 51, 43, .35)); outline: none; }
.pz canvas { display: block; pointer-events: none; transition: transform .15s ease; }
.pz.up { cursor: grabbing; filter: drop-shadow(0 10px 10px rgba(23, 51, 43, .35)); }
.pz.up canvas { transform: scale(1.04); }
.pz.in { cursor: default; filter: none; pointer-events: none; }
.pz.pop canvas { animation: pop .6s ease-out; }
.pz:focus-visible canvas { outline: 3px solid var(--terra); outline-offset: -3px; border-radius: 8px; }
.pz.held canvas { outline: 3px dashed var(--terra); outline-offset: -3px; border-radius: 8px; }
@keyframes pop { 0% { filter: brightness(1.35); } 100% { filter: none; } }
.whole-pic { position: absolute; z-index: 5000; border-radius: 6px; background-size: 100% 100%; opacity: 0; transition: opacity 1s ease; pointer-events: none; box-shadow: 0 12px 36px rgba(23, 51, 43, .3); }
.whole-pic.on { opacity: 1; }
.tools { flex: none; display: flex; justify-content: center; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--cream-3); overflow-x: auto; }
.tool { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 72px; min-height: 58px; padding: 6px 10px; border-radius: 14px; border: 1.5px solid var(--cream-3); background: #fff; cursor: pointer; font-size: .82rem; font-weight: 800; color: var(--ink-2); }
.tool:hover { background: var(--cream); }
.tool .ti { font-size: 1.3rem; line-height: 1.1; }
.tool[aria-pressed="true"] { background: var(--green-50); border-color: var(--green-200); color: var(--green-d); }
.tool-hint { background: var(--terra-50); border-color: var(--terra-300); color: #8C5335; }
@media (max-width: 480px) { .b-lab { display: none; } .tool { min-width: 64px; padding: 6px 6px; font-size: .76rem; } }

/* ---------- overlays: peek, finished, questions ---------- */
#ov { display: none; }
#ov.on { display: block; position: fixed; inset: 0; z-index: 9000; }
.ov-back { position: absolute; inset: 0; background: rgba(23, 38, 34, .6); }
.ov-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; background: #fff; border-radius: 22px; padding: clamp(16px, 4vw, 28px); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.ov-box.peek img { width: 100%; height: auto; border-radius: 10px; display: block; }
.ov-box.ask { width: min(460px, calc(100vw - 24px)); }
.ov-box.ask h2 { font-family: var(--serif); font-weight: 600; margin: 0; color: var(--green-d); }
.ov-box.ask p { margin: 0; color: var(--ink-2); }
.done-t { font-family: var(--serif); font-weight: 600; font-size: 2rem; margin: 4px 0 0; color: var(--green-d); outline: none; }
.done-p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.done-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* the postcard turns over to show a true fact */
.pc { width: 100%; max-width: 560px; aspect-ratio: 3 / 2; perspective: 1400px; }
.pc-in { position: relative; width: 100%; height: 100%; transition: transform .9s cubic-bezier(.3, .7, .2, 1); transform-style: preserve-3d; }
.pc.flip .pc-in { transform: rotateY(180deg); }
.pc-front, .pc-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 26px rgba(23, 51, 43, .2); }
.pc-front { background: #fff; padding: 8px; }
.pc-front img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.pc-back { transform: rotateY(180deg); background: #FFFDF8; display: grid; grid-template-columns: 1.35fr 1fr; text-align: left; padding: 18px; gap: 16px; background-image: linear-gradient(90deg, transparent calc(57% - 1px), var(--cream-3) calc(57% - 1px), var(--cream-3) calc(57% + 1px), transparent calc(57% + 1px)); }
.pc-note { display: flex; flex-direction: column; gap: 8px; padding-right: 8px; }
.pc-hi { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 3.4vw, 1.4rem); color: var(--terra-d); }
.pc-fact { margin: 0; font-size: clamp(.86rem, 2.6vw, 1.02rem); color: var(--ink); }
.pc-sign { margin: auto 0 0; font-family: var(--serif); font-style: italic; color: var(--green); font-size: .95rem; }
.pc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.pc-stamp { width: 64px; height: 78px; border: 2px dashed var(--terra); border-radius: 4px; background: var(--terra-50); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800; letter-spacing: .08em; color: var(--terra-d); }
.pc-stamp b { font-size: 1.8rem; line-height: 1.2; }
.pc-lines { align-self: stretch; display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.pc-lines i { display: block; height: 1.5px; background: var(--cream-3); }
.pc-where { margin: auto 0 0; font-size: .82rem; color: var(--muted); font-weight: 700; }
#confetti { position: fixed; inset: 0; z-index: 9500; pointer-events: none; width: 100vw; height: 100vh; }
@media (prefers-reduced-motion: reduce) { .card, .pz canvas, .pc-in, .board::before, .whole-pic { transition: none !important; } .pz.pop canvas { animation: none; } }