/* 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 { font-size: 22px; }
.name b { color: var(--no); font-weight: inherit; }
.clock, .marks { opacity: 0; transition: opacity 300ms; }
.playing .clock, .playing .marks, .done .clock, .done .marks { opacity: 1; }
.clock { display: flex; align-items: baseline; gap: 10px; }
.timer { font-size: 20px; font-variant-numeric: tabular-nums; }
.misses { font-size: 17px; color: var(--no); display: inline-block; }
.marks { 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 { opacity: 1; visibility: visible; }
.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 { height: calc(var(--room) + var(--gap) + var(--hint)); display: flex; flex-direction: column; align-items: center; }
.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 .big { display: block; margin: 0 auto; min-width: 160px; }