/* DiffPix: a game someone made for their family from their albums, in
   Marker Felt, its layout and its feel exact. The pair's shape, the bar
   and the gap come from layout.json (game.js sets them here). */

:root {
	--paper: #fdf6e3;
	--card: #fffdf7;
	--ink: #2d2620;
	--soft: #8a7f72;
	--yes: #2a9d4b;
	--no: #e0393e;
	--sun: #ffd23f;
	--sky: #5aa9e6;
	--top: env(safe-area-inset-top);
	/* A line under the pair, saying the photo's story is further down. */
	--hint: 24px;
	--room: calc(100dvh - var(--top) - env(safe-area-inset-bottom) - var(--bar) - var(--gap) - var(--hint));
	/* Both copies whole above the fold, as wide as the screen allows. */
	--width: min(100vw, calc(var(--room) / 2 * var(--shape-width) / var(--shape-height)));
	--hand: "Marker Felt", "Chalkboard SE", "Comic Sans MS", cursive;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font: 19px/1.35 var(--hand); overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; }
body { overflow: hidden; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }

header { position: fixed; z-index: 3; top: 0; left: 0; right: 0; padding-top: var(--top); background: var(--paper); }
header .in { height: var(--bar); width: min(100vw, max(var(--width), 360px)); margin: 0 auto; padding: 0 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.name { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: 0.5px; transform: rotate(-2deg); transition: font-size 250ms; }
.playing .name, .done .name, .bonus .name { font-size: 22px; }
.name b { color: var(--no); font-weight: inherit; }
/* Top left: the clock while playing, else the archive: on the start
   screen, and at the end, where the results show the time big and the
   way on is another day; the marks stay, to go back to a photo. */
.archive, .clock { grid-column: 1; grid-row: 1; }
.archive { justify-self: start; padding: 3px 10px; font-size: 17px; background: var(--card); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--ink); transition: opacity 300ms; }
.archive:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.playing .archive, .bonus .archive { opacity: 0; pointer-events: none; }
.clock, .marks { opacity: 0; transition: opacity 300ms; }
.playing .clock, .playing .marks, .done .marks, .bonus .clock { opacity: 1; }
.timer.low { color: var(--no); }
/* The bonus's countdown, in the marks' place top right, bigger: the time
   is the game now (Oz, 2026-10-31: "make it more prominent"; "top left
   needs to stay consistent the whole game"). */
.countdown { grid-column: 3; grid-row: 1; justify-self: end; display: none; padding: 0 10px; font-size: 26px; font-weight: 700; line-height: 32px; font-variant-numeric: tabular-nums; background: var(--sun); border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }
.bonus .countdown { display: block; }
.countdown.low { background: var(--no); color: white; }
.clock { display: flex; align-items: baseline; gap: 10px; pointer-events: none; }
.timer { font-size: 20px; font-variant-numeric: tabular-nums; }
.misses { font-size: 17px; color: var(--no); display: inline-block; }
.marks { grid-column: 3; grid-row: 1; justify-self: end; display: flex; }
.mark { width: 20px; height: 30px; border: 0; padding: 0; background: none; font-size: 19px; color: var(--soft); position: relative; }
.mark.yes { color: var(--yes); }
.mark.no { color: var(--no); }
.mark.on::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 0; height: 3px; border-radius: 2px; background: var(--ink); }
.pop { animation: pop 380ms cubic-bezier(.3, 1.6, .6, 1); }
@keyframes pop { from { transform: scale(1.9); } to { transform: none; } }

.home { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity 250ms, transform 250ms; }
.home.gone { opacity: 0; transform: scale(0.94); pointer-events: none; }
.big { min-width: 220px; padding: 14px 28px; font-size: 26px; border: 3px solid var(--ink); border-radius: 16px; background: var(--sun); box-shadow: 0 5px 0 var(--ink); transition: transform 80ms, box-shadow 80ms, opacity 200ms; }
.big.how { background: var(--sky); font-size: 22px; }
.big:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.big:disabled { opacity: 0.5; }

.count { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 140px; font-weight: 700; }
.count span { animation: count 900ms ease-out forwards; }
@keyframes count { 0% { transform: scale(0.4); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0; } }

/* Only scrolling: a double tap or a pinch never zooms the page (holding a
   photo zooms the pair, pairGestures.js). */
.slides { touch-action: pan-x pan-y; position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; top: calc(var(--top) + var(--bar)); display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; opacity: 0; visibility: hidden; transition: opacity 300ms; }
.slides::-webkit-scrollbar { display: none; }
.playing .slides, .done .slides, .bonus .slides { opacity: 1; visibility: visible; }
/* The bonus is its photo alone while it runs: no swiping, no arrows, no
   marks. */
.bonus .slides { overflow-x: hidden; touch-action: pan-y; }
.bonus .nav, .bonus .marks { pointer-events: none; }
html .bonus .nav { display: none; }
.slide { flex: 0 0 100%; height: 100%; overflow-y: auto; overflow-x: hidden; scroll-snap-align: start; scroll-snap-stop: always; overscroll-behavior-y: contain; }
.screen { position: relative; height: calc(var(--room) + var(--gap) + var(--hint)); display: flex; flex-direction: column; align-items: center; }
/* The bonus before it starts: its photos blurred, its rules and Start over
   them, so nothing is seen before the clock runs. */
.locked .frame img { filter: blur(7px); transform: scale(1.08); }
.offer { position: absolute; inset: 0 0 var(--hint); display: grid; place-items: center; padding: 12px; }
.offer .card { width: min(100%, 360px); padding: 18px 20px 20px; background: var(--card); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink); }
.offer h2 { margin: 0 0 8px; font-size: 28px; }
.offer p { margin: 0 0 8px; }
.offer ol { margin: 0 0 16px; padding-left: 24px; }
.offer li { margin: 5px 0; }
.offer .big { display: block; margin: 0 auto; min-width: 160px; }
.offer .skip { display: block; margin: 12px auto 0; padding: 4px; border: 0; background: none; color: var(--soft); font-size: 17px; text-decoration: underline; }
.photo { position: relative; width: var(--width); aspect-ratio: var(--shape-width) / var(--shape-height); overflow: hidden; background: #e9e1cf; }
.photo + .photo { margin-top: var(--gap); }
.frame { position: relative; width: 100%; height: 100%; will-change: transform; }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: none; -webkit-user-drag: none; pointer-events: none; }
.ring { position: absolute; border: 2.5px solid #ffe900; border-radius: 50%; box-shadow: 0 0 0 1.5px #000, inset 0 0 0 1.5px #000; opacity: 0; transform: scale(1.5); transition: opacity 220ms, transform 260ms cubic-bezier(.3, 1.5, .6, 1); pointer-events: none; }
/* Found: bright yellow, a thin black line on both its edges so it shows on
   anything, yellow too. */
.answered .ring { opacity: 1; transform: none; }
.tap { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; border-radius: 50%; background: var(--no); color: white; font: 700 20px/1 var(--hand); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); pointer-events: none; }
.tap.gone { animation: gone 750ms ease-out forwards; }
@keyframes gone { 0% { transform: scale(1.6); opacity: 0; } 15% { transform: none; opacity: 1; } 65% { opacity: 1; } 100% { transform: scale(0.8); opacity: 0; } }
.tap.kept { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 14px; opacity: 0.75; }
.more { height: var(--hint); line-height: var(--hint); font-size: 15px; color: var(--soft); pointer-events: none; transition: opacity 200ms; }
.note { width: min(100vw - 24px, var(--width) - 8px); margin: 8px auto 48px; padding: 16px 18px 18px; background: var(--card); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 4px 5px 0 rgba(45, 38, 32, .15); transform: rotate(-0.6deg); }
.note .label { font-size: 21px; font-weight: 700; margin-bottom: 8px; }
.note p { margin: 0; font-size: 18px; line-height: 1.45; }

.results .screen { justify-content: center; gap: 6px; padding: 0 20px; text-align: center; }
.results .time { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; transform: rotate(-2deg); }
.results .moves { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: min(100%, 330px); margin: 18px 0 4px; font-size: 30px; line-height: 1.15; }
.results .share { margin-top: 18px; min-width: 180px; }
.results .copied { height: 20px; font-size: 16px; color: var(--yes); opacity: 0; }
.results .copied.show { animation: copied 1600ms ease-out forwards; }
@keyframes copied { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.results .hint { margin-top: 2px; font-size: 16px; color: var(--soft); }

/* With a mouse, which can't swipe (holding a photo zooms it): a big plain
   < and > well out beside the pair. Never on a touch screen, which swipes:
   not even one that also says it hovers (game.js marks touch). */
.nav { display: none; }
@media (hover: hover) and (pointer: fine) {
	.playing .nav, .done .nav { display: block; position: fixed; z-index: 2; top: calc(var(--top) + var(--bar) + (var(--room) + var(--gap)) / 2 - 40px); width: 56px; height: 80px; padding: 0; border: 0; background: none; font: 64px/80px var(--hand); color: var(--ink); opacity: 0.55; transition: opacity 120ms; }
	.nav:hover { opacity: 1; }
	.nav:active { transform: translateY(2px); }
	.nav.prev { left: max(4px, calc(50% - var(--width) / 2 - 150px)); }
	.nav.next { right: max(4px, calc(50% - var(--width) / 2 - 150px)); }
	.nav:disabled { opacity: 0; pointer-events: none; }
}
@media (any-pointer: coarse) {
	.playing .nav, .done .nav { display: none; }
}
html.touch .nav { display: none !important; }


.sheet { position: fixed; z-index: 5; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(45, 38, 32, .35); opacity: 0; pointer-events: none; transition: opacity 200ms; }
.sheet.open { opacity: 1; pointer-events: auto; }
.sheet .card { width: min(100%, 380px); padding: 22px 22px 24px; background: var(--card); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink); transform: translateY(14px); transition: transform 220ms cubic-bezier(.3, 1.4, .6, 1); }
.sheet.open .card { transform: none; }
.sheet h2 { margin: 0 0 10px; font-size: 28px; }
.sheet ol { margin: 0 0 20px; padding-left: 24px; }
.sheet li { margin: 6px 0; }
.sheet p { margin: 0 0 10px; }
.sheet .list { list-style: none; max-height: 52dvh; overflow-y: auto; margin: 0 0 20px; padding: 2px 2px 6px; }
.sheet .list a { display: block; padding: 8px 14px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); font-size: 22px; text-decoration: none; }
.sheet .list a.on { background: var(--sun); }
.sheet .list span { font-size: 16px; color: var(--soft); }

.sheet .big { display: block; margin: 0 auto; min-width: 160px; }