:root { color-scheme: light; font-family: ui-rounded, "Avenir Next", system-ui, sans-serif; color: #293c43; background: #fff5df; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 8% 8%, #ffdbb0 0, transparent 30%), radial-gradient(circle at 100% 80%, #dcf0d7 0, transparent 35%), #fff5df; min-height: 100vh; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; font-weight: 800; color: inherit; cursor: pointer; border: 2px solid #b2c7bd; border-radius: 16px; background: #fffdf5; min-height: 48px; padding: 10px 17px; box-shadow: 0 3px 0 #c6d6cc; }
button:hover { background: #eef7e8; }
button:active { transform: translateY(2px); box-shadow: none; }
button:focus-visible, a:focus-visible { outline: 4px solid #943b78; outline-offset: 4px; }
button[hidden] { display: none; }
.game { max-width: 1460px; padding: 25px 34px 22px; margin: auto; }
.topbar { margin-bottom: 24px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.4rem, 2.7vw, 2.35rem); letter-spacing: -.055em; line-height: 1.14; }
.eyebrow { font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 6px; color: #566963; }
.stamp { background: #f7c66c; padding: 12px 16px; border-radius: 50%; font-size: 1.35rem; transform: rotate(8deg); border: 2px solid #e8b966; }
.album { background: #fffdf6; padding: 24px; border: 2px solid #e8ddc4; border-radius: 28px; box-shadow: 0 8px 0 #eadfc8; }
.scene-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
h2 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); letter-spacing: -.04em; }
.tally { display: flex; gap: 7px; }
.tally span { display: grid; place-items: center; height: 33px; width: 33px; border: 2px dashed #849b94; border-radius: 50%; color: transparent; }
.tally span.filled { color: #fff; border: 2px solid #2b796d; background: #2b796d; }
.instruction { margin: 14px 0 18px; font-size: 1.05rem; font-weight: 650; }
.instruction span { display: inline-block; color: #276f62; margin-right: 4px; }
.pictures { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.picture { min-width: 0; }
h3 { font-size: .8rem; letter-spacing: .05em; margin: 0 0 8px 6px; color: #516962; }
h3 span { font-size: 1.1rem; }
.scene { position: relative; width: 100%; aspect-ratio: 600 / 410; border: 3px solid #435958; border-radius: 21px; overflow: hidden; isolation: isolate; background: #d4eef0; }
.scene > svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.detail { position: absolute; padding: 0; border: 3px solid transparent; border-radius: 30%; min-height: 0; background: transparent; box-shadow: none; z-index: 2; }
.detail:hover { background: #fff7ce22; }
.detail:active { transform: none; }
.detail:focus-visible { outline: 4px solid #943b78; outline-offset: -4px; background: #fff6c844; }
.detail.found { border: 3px solid #156e60; box-shadow: 0 0 0 3px #fff9d5; background: #fff8cd14; }
.detail.found::after { content: '✓'; position: absolute; right: -5px; top: -8px; color: #fff; background: #156e60; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; font-size: 17px; border: 2px solid #fff9d5; }
.detail.match { border: 3px dashed #476e9f; background: #ffffff44; }
.hint-region { position: absolute; border: 5px dashed #ae6726; background: #ffedaa44; border-radius: 30px; pointer-events: none; z-index: 1; }
.detail.hinted { border: 4px dashed #ae6726; background: #ffe9a255; }
.play-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 19px; min-height: 58px; }
#status { max-width: 520px; font-weight: 650; line-height: 1.5; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
#next { background: #2b796d; color: white; border-color: #215f54; box-shadow: 0 3px 0 #174f45; }
.scene-picker { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 25px 0 17px; }
.scene-picker button { position: relative; min-width: 62px; font-size: 1.35rem; padding: 8px 14px; }
.scene-picker button[aria-current="true"] { border: 3px solid #2b796d; background: #e2f1dd; }
.scene-picker .earned { position: absolute; right: -5px; top: -6px; font-size: .8rem; background: #2b796d; color: white; border-radius: 50%; padding: 1px 4px; }
.bottom-line { display: flex; justify-content: center; align-items: center; gap: 22px; color: #5b6e64; font-size: .85rem; }
.bottom-line button { box-shadow: none; border: 0; background: transparent; text-decoration: underline; font-size: .85rem; }
.keyboard-note { text-align: center; margin-top: 10px; font-size: .76rem; color: #5f7068; }
.pictures.big { grid-template-columns: minmax(0,1fr); max-width: 950px; margin: auto; }
.pictures.big .picture { overflow-x: auto; padding-bottom: 6px; }
.pictures.big .scene { width: max(100%, 600px); }
.party { position: absolute; inset: 0; pointer-events: none; z-index: 3; display: flex; justify-content: space-around; align-items: center; color: #a75c19; font-size: clamp(28px, 4vw, 55px); }
.party span { animation: cheer 1.5s ease-out both; text-shadow: 0 2px #fff; }
.party span:nth-child(even) { animation-delay: .12s; }
.celebrate .scene > svg .friend { transform-box: fill-box; transform-origin: center bottom; animation: wiggle .6s ease-in-out 3; }
@keyframes cheer { 0% { opacity: 0; transform: translateY(90px) scale(.4) rotate(-25deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-130px) scale(1.3) rotate(25deg); } }
@keyframes wiggle { 0%,100% { rotate: 0deg; } 30% { rotate: -5deg; } 70% { rotate: 5deg; } }
@media (max-width: 850px) { .game { padding: 18px 14px; } .album { padding: 16px; } .pictures { gap: 12px; } .play-footer { flex-direction: column; align-items: stretch; } .actions { justify-content: flex-start; } .stamp { display: none; } }
@media (max-width: 760px) { .pictures { grid-template-columns: minmax(0,1fr); gap: 16px; } .album { padding: 12px; border-radius: 20px; } .scene-heading { align-items: flex-start; } .tally { gap: 4px; } .tally span { width: 24px; height: 24px; font-size: .8rem; } .instruction { font-size: .93rem; } .scene { border-width: 2px; border-radius: 14px; } .bottom-line { gap: 4px; flex-wrap: wrap; } .keyboard-note { display: none; } .scene-picker { gap: 8px; } .scene-picker button { min-width: 54px; padding: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .party { display: none; } }