.puzzle-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:54px; padding-block:52px; align-items:start; }
.puzzle-page h1 { font-size:clamp(2.7rem,5.3vw,4.8rem); line-height:1.04; letter-spacing:-.055em; margin:20px 0; }
.puzzle-page .hero-sub { color:var(--muted); max-width:42ch; font-size:1.08rem; line-height:1.65; }
.puzzle-page .signup-row { flex-direction:column; }
.puzzle-page .signup-row button { min-height:52px; }
.puzzle-page .signup-consent { display:flex; gap:10px; font-weight:400; margin-bottom:0; }
.puzzle-consent input { width:18px; height:18px; flex:none; margin-top:3px; accent-color:var(--gold-bright); }
.puzzle-launch { font-size:.82rem; line-height:1.65; color:var(--ink); margin-top:20px; }
.puzzle-launch span { color:var(--muted); font-size:.73rem; }
.puzzle-card { background:linear-gradient(150deg,var(--navy-800),var(--navy-900)); border:1px solid var(--line); border-radius:var(--radius-panel); padding:28px; box-shadow:0 18px 48px #0003; }
.puzzle-eyebrow { color:var(--gold-bright); text-transform:uppercase; letter-spacing:.12em; font-size:.65rem; font-weight:750; margin-bottom:8px; }
.puzzle-card h2 { font-size:1.7rem; letter-spacing:-.035em; }
.puzzle-label { font-size:.68rem; color:#bacbe1; text-transform:uppercase; letter-spacing:.12em; margin:25px 0 12px; }
.puzzle-table { display:flex; flex-direction:column; gap:12px; }
.puzzle-meld { display:flex; flex-wrap:wrap; gap:5px; }
.puzzle-tile { display:flex; align-items:center; flex-direction:column; justify-content:center; width:48px; height:65px; background:linear-gradient(145deg,#f8f4e8,#eee7d2); border:1px solid #c8bd9c; border-bottom:4px solid #b9aa80; border-radius:7px; flex:none; box-shadow:0 3px 9px #0004; }
.puzzle-tile b { font-size:28px; line-height:1; font-weight:850; }
.puzzle-tile small { color:#1d2126; font-size:7px; line-height:1; text-transform:uppercase; letter-spacing:.03em; margin-top:6px; font-weight:750; }
/* Match the standard tile palette in packages/app/src/ui/theme.ts. */
.tile-B { color:#1f63c8; }.tile-R { color:#d8352a; }.tile-O { color:#e89a16; }.tile-K { color:#1d2126; }
.puzzle-rack { background:#071222; border-radius:10px; padding:12px; border-bottom:4px solid #694e27; }
.puzzle-instructions { color:#bdcde1; font-size:.82rem; line-height:1.55; margin-top:16px; }
button.puzzle-tile { font-family:inherit; padding:0; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.puzzle-tile[aria-pressed="true"] { outline:3px solid var(--gold-bright); outline-offset:3px; transform:translateY(-4px); }
.puzzle-dropzone { min-height:70px; padding:7px; border:1px dashed #8ca9ce55; border-radius:9px; }
.puzzle-new-row { width:100%; min-height:44px; margin-top:12px; background:#07122266; color:#c7d7e9; font:inherit; font-size:.8rem; cursor:pointer; }
.puzzle-drop-active { background:rgb(255 199 102 / 15%); border-color:var(--gold-bright); }
.puzzle-dropzone[data-dropzone="table"]:empty::before { content:'Drop tiles here'; color:#a9bdd7; font-size:.8rem; align-self:center; padding:12px; pointer-events:none; }
.puzzle-invalid { border-color:#ff9b93; outline:1px solid #ff9b93; }
.puzzle-controls { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.puzzle-controls .btn { min-height:44px; padding:10px 14px; font-size:.8rem; }
.puzzle-controls button:disabled { opacity:.45; cursor:default; }
.puzzle-feedback { min-height:45px; font-size:.82rem; line-height:1.5; color:#dce9f8; margin-top:14px; }
.puzzle-drag-origin { opacity:.35; }
.puzzle-drag-ghost { position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%,-60%); box-shadow:0 12px 24px #0008; }
.puzzle-dropzone:focus-visible,.puzzle-tile:focus-visible,.puzzle-controls button:focus-visible { outline:3px solid var(--gold-bright); outline-offset:3px; }
.puzzle-prompt { font-size:.84rem; color:#d7e2ef; line-height:1.6; margin-top:20px; }
.puzzle-rules,.puzzle-hint,.puzzle-solution { margin-top:18px; border-top:1px solid #ffffff26; padding-top:16px; font-size:.85rem; color:var(--muted); line-height:1.65; }
.puzzle-page summary { min-height:44px; cursor:pointer; color:var(--ink); font-weight:650; }
.puzzle-page details p,.puzzle-solution .puzzle-table { margin-top:14px; }
.puzzle-footnote { color:var(--muted); font-size:.72rem; margin-top:16px; }
.puzzle-about { border-top:1px solid var(--line); padding-block:45px; display:grid; grid-template-columns:1.2fr 1fr; gap:60px; }
.puzzle-about h2 { font-size:2rem; margin:16px 0; }.puzzle-about p { color:var(--muted); line-height:1.7; margin-bottom:14px; }.puzzle-about a { color:var(--gold-bright); }
.puzzle-pack-list { padding:24px; border:1px solid var(--line); border-radius:20px; }.puzzle-pack-list h3 { margin-bottom:16px; }
.pack-intro { max-width:670px; padding-block:40px; }.pack-intro>p { line-height:1.7; color:var(--muted); }
.puzzle-pack { display:grid; gap:28px; max-width:730px; margin-bottom:30px; }.puzzle-print-note { color:var(--muted); font-size:.8rem; margin-bottom:30px; }
@media(max-width:880px) { .puzzle-hero { grid-template-columns:1fr; gap:26px; padding-block:25px; }.puzzle-intro { display:contents; }.puzzle-intro>.eyebrow { order:0; }.puzzle-intro h1 { order:1; margin:0; }.puzzle-intro .hero-sub { order:2; }.puzzle-preview { order:3; }.puzzle-intro .hero-cta { order:4; margin-top:0; }.puzzle-launch { order:5; margin-top:0; }.puzzle-about { grid-template-columns:1fr; gap:24px; }.puzzle-card { padding:22px; }.puzzle-page .hero-cta { margin:0; } }
@media(max-width:400px) { .puzzle-tile { width:39px; height:57px; }.puzzle-tile b { font-size:25px; }.puzzle-tile small { font-size:6px; }.puzzle-meld { gap:4px; }.puzzle-card { padding:16px; }.puzzle-dropzone { padding:4px; } }
@media print { .puzzle-controls,.puzzle-new-row,.puzzle-instructions,.puzzle-feedback { display:none; }.puzzle-dropzone { border:0; } }
@media print { .puzzle-page { background:white; color:black; }.site-header,.site-footer,.analytics-consent,.analytics-preferences,.puzzle-print-note { display:none!important; }.puzzle-card { background:white; box-shadow:none; border-color:#777; break-inside:avoid; }.puzzle-page h1 { font-size:32px; }.puzzle-page p,.puzzle-page summary { color:black!important; }.puzzle-pack { display:block; max-width:none; }.puzzle-card { margin-bottom:24px; }.puzzle-rack { background:white; }.puzzle-tile { box-shadow:none; }.pack-intro { padding-block:10px; } }