/* ═══════════════════════════════════════════
NumberFillIn — Newspaper-feel CSS
Only what Tailwind cannot do via utilities:
- Paper grain background texture
- Drop caps, ornamental dividers
- Column rules for the How-to-Play columns
- Print-friendly puzzle layout
═══════════════════════════════════════════ */
/* Body backdrop — solid colour EXACTLY matching scene.fog so the desk's
fog-faded edges have nothing to blend against but the same colour.
A single, very subtle warm vignette in the centre gives a hint of room
light without introducing texture differences at the edges. */
.desk-surface {
background-color: #3a2418;
background-image: radial-gradient(
ellipse 70% 55% at 50% 50%,
rgba(110, 75, 48, 0.40) 0%,
rgba(0, 0, 0, 0) 65%);
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Paper sheet sitting on the desk — cream bg + grain + tight contact shadow
so it reads as a real sheet on the wood. On lg+ we add a subtle CSS
perspective tilt that matches the 3D camera's reading angle — the paper
looks as if it's laid on the desk and seen from a sitting position. */
.paper-on-desk {
background-color: #f4ede0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
position: relative;
/* Tight contact shadow — paper resting on the wood, not floating above it */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.35),
0 4px 10px rgba(0, 0, 0, 0.25),
0 10px 24px -6px rgba(0, 0, 0, 0.30);
}
/* Two-state desktop opening sequence (no click needed):
• Initial — paper lying flat ON the desk (matched to 3D camera pitch)
• Reading — paper picked up to held-at-reading-distance angle
Initial rotateX(34deg) matches the camera's pitch from horizontal,
so the HTML paper visually shares the same plane as the 3D props
instead of hovering parallel to the screen. */
/* All cinematic tilt/scale/scroll-lock is scoped to .desk-scene (only the
game page has it). Static info pages — privacy, affiliate-disclosure —
share the .paper-on-desk class for the cream + grain + shadow base, but
skip the tilt because there's no 3D scene or auto-open animation to
coordinate with. */
@media (min-width: 1024px) {
.desk-scene .paper-on-desk {
/* Small newspaper laid on the desk. Scale 0.40 is the sweet spot:
small enough to feel prop-sized, big enough that the rasterised text
stays legible. rotateX(56°) matches the 3D camera's pitch onto the
desk plane (atan(12/18) ≈ 33.7° → desk normal 56.3° from view).
perspective(6000px) is intentionally loose: although a tighter value
(~2000-3000) would mathematically match the 3D camera's FOV-55°,
in practice that makes the paper's bottom edge bulge dramatically
— worse than the desk's apparent foreshortening at the paper's
on-screen location. 6000 keeps the foreshortening subtle. */
transform: translateY(22vh) perspective(6000px) rotateX(56deg) scale(0.40);
transform-origin: center top;
transition: transform 1.4s cubic-bezier(0.45, 0, 0.25, 1);
will-change: transform;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Initial-state shadow — the five layers below kill the "floating" cue
that one or two diffuse shadows alone leave behind. The trick: real
objects sitting on a surface have a VERY sharp, VERY dark contact
line right where the edge meets the surface, plus a dark AO band on
the inside of the bottom edge (light can't reach that corner).
Without those two, no amount of diffuse ambient shadow looks
"pressed" — it just looks "hovering with a shadow below."
1. Inset bottom AO band — darkens the inside of the contact edge
2. Inset warm vignette — overall paper-edge darkening
3. Tight touchdown — sharp, dark contact line directly under bottom
4. Directional contact — offset lower-left (matches 3D key light)
5. Diffuse ambient — large blur for soft surrounding shadow */
.desk-scene .paper-on-desk:not(.paper-reading) {
box-shadow:
inset 0 -22px 36px -12px rgba(20, 12, 6, 0.45), /* 1 AO at bottom */
inset 0 0 140px rgba(40, 20, 10, 0.22), /* 2 inner vignette */
0 5px 6px rgba(0, 0, 0, 0.60), /* 3 sharp touchdown */
-10px 20px 24px rgba(0, 0, 0, 0.52), /* 4 directional contact */
-22px 42px 70px rgba(0, 0, 0, 0.36); /* 5 diffuse ambient */
cursor: pointer;
}
/* Reading state — paper lifts off the desk and rotates toward the reader,
revealing the full newspaper at a comfortable reading size. */
.desk-scene .paper-on-desk.paper-reading {
transform: translateY(0) perspective(6000px) rotateX(22deg) scale(0.75);
}
/* Lock body scroll while the paper is still on the desk so the user
can't scroll past an empty page before the auto-animation fires. */
body.desk-scene:has(.paper-on-desk:not(.paper-reading)) {
overflow: hidden;
}
}
/* (Glow pulse removed — the warm halo around the paper was the strongest
"magical floating card" cue; gone now in favour of plain directional
contact shadow that ties the paper to the desk surface.) */
/* A worn paper edge — the sheet's top + bottom edges fade slightly toward the
shadow, like a slightly weathered newspaper. Decorative only. */
.paper-on-desk::before,
.paper-on-desk::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 6px;
pointer-events: none;
z-index: 1;
}
.paper-on-desk::before {
top: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10), transparent);
}
.paper-on-desk::after {
bottom: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.10), transparent);
}
/* Mobile: drop the margins/shadow so the sheet fills the viewport — there's
no "desk" to show on a small screen. */
@media (max-width: 768px) {
.paper-on-desk {
box-shadow: none;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.paper-on-desk::before,
.paper-on-desk::after { display: none; }
}
/* Opaque paper with the same grain — used on sticky elements that need to
mask the content scrolling behind them without losing the newsprint feel. */
.newsprint-bg {
background-color: #f4ede0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
}
.newsprint-bg-dark {
background-color: #e9dfc8;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
}
h1, h2, h3 {
text-rendering: optimizeLegibility;
}
[data-cell] {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* ─── Drop caps — classic newspaper opener ─── */
.drop-cap::first-letter {
font-family: "Playfair Display", Georgia, serif;
font-weight: 900;
font-size: 3.4em;
line-height: 0.85;
float: left;
padding: 0.05em 0.12em 0 0;
margin: 0.02em 0.08em 0 0;
color: #1a1612;
}
/* ─── Ornamental divider — a fleuron between sections ─── */
.fleuron-divider {
display: flex;
align-items: center;
gap: 1rem;
text-align: center;
color: #8a7a5e;
}
.fleuron-divider::before,
.fleuron-divider::after {
content: "";
flex: 1;
border-top: 1px solid rgba(26, 22, 18, 0.35);
}
.fleuron-divider > span {
font-family: "Playfair Display", Georgia, serif;
font-size: 1.25rem;
letter-spacing: 0.5rem;
color: #8a2a2a;
white-space: nowrap;
}
/* ─── Double-rule under masthead borders (classic newspaper) ─── */
.double-rule-top {
border-top: 4px double #1a1612;
}
.double-rule-bottom {
border-bottom: 4px double #1a1612;
}
/* ─── Column rules between How-to-Play columns (only at md+) ─── */
@media (min-width: 768px) {
.col-rules > * + * {
border-left: 1px solid rgba(26, 22, 18, 0.18);
padding-left: 1.5rem;
}
}
/* ─── Old-style figures + slight loose tracking for body Lora ─── */
.body-serif {
font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
letter-spacing: 0.005em;
}
/* ─── Print: clean black-and-white puzzle, hide affiliate/footer/modal ─── */
@media print {
body {
background: white !important;
color: black !important;
}
#affiliate-sidebar,
#reset-btn,
#difficulty-controls,
#win-banner,
footer {
display: none !important;
}
#grid-wrap [data-cell] {
background: white !important;
color: black !important;
}
}