:root{--spacing:1em;--max-width:800px;--font-family-sans-serif:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;--font-family-monospace:Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;--font-size-m:1rem;--font-size-l:1.5rem;--font-size-xl:2rem;--font-weight-bold:bold;--color-black:#111;--color-black-light:#222;--color-black-lighter:#333;--color-white:#fff;--color-off-white:#eee;--color-outline:#fa3;--border-radius:25px;--border-radius-small:15px;--box-shadow-color:#0003;--header-z-index:100}*{box-sizing:border-box}html,body{overscroll-behavior-y:contain;margin:0;padding:0}html{scroll-behavior:smooth;background-color:var(--color-black);min-height:100%}body{min-height:100svh;font-family:var(--font-family-sans-serif);flex-direction:column;display:flex;overflow-x:hidden}h1,h2,h3{margin:0}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--color-outline);outline-offset:2px}dialog{width:var(--max-width);justify-content:center;align-items:center;gap:calc(var(--spacing) * 3);background:0 0;border:0;flex-direction:column;display:flex}dialog:focus,dialog:focus-visible{outline:none}dialog[open]{animation:.2s ease-out forwards dialog-fade-in}dialog::backdrop{background-color:#000c}@keyframes dialog-fade-in{0%{opacity:0}to{opacity:1}}.dialog-text{-webkit-user-select:none;user-select:none;color:var(--color-off-white);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold)}.container{width:100%;padding:var(--spacing);flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex;position:relative}@media screen and (width>=1024px){.container{padding:var(--spacing) calc(var(--spacing) * 1.5)}}image-selector{gap:var(--spacing);width:100%;margin-bottom:var(--spacing);grid-template-rows:max-content 1fr;grid-template-columns:1fr;display:grid}.images-grid{gap:calc(var(--spacing) * 2);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-auto-rows:350px;width:100%;margin:0 auto;display:grid}@media screen and (width>=1024px){.images-grid{max-width:var(--max-width);grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}}@media screen and (width>=1440px){.images-grid{max-width:calc(var(--max-width) * 1.5);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}.image-card{background-color:var(--color-black);border:0;padding:0;transition:all .2s ease-out;position:relative;overflow:hidden}.image-card:not([image-loaded]){background-size:300% 300%;background-image:linear-gradient(90deg, var(--color-black) 0%, var(--color-black-lighter) 50%, var(--color-black) 100%);animation:1.5s ease-out infinite alternate forwards image-card-load}@keyframes image-card-load{0%{background-position:0%}to{background-position:100%}}.image-card:focus,.image-card:hover{box-shadow:0 5px 10px var(--box-shadow-color)}.image-card-overlay{opacity:0;justify-content:center;align-items:center;gap:var(--spacing);width:100%;height:100%;padding:var(--spacing);color:var(--color-off-white);background-color:#0009;flex-direction:column;transition:opacity .5s ease-out;display:flex;position:absolute;top:0;left:0;transform:translateY(100%)}.image-card[image-loaded]:hover .image-card-overlay,.image-card[image-loaded]:focus-within .image-card-overlay{opacity:1;transform:translateY(0)}.image-card-best-score{-webkit-user-select:none;user-select:none;font-size:var(--font-size-l);font-family:var(--font-family-sans-serif);margin-top:auto}.image-card-score{-webkit-user-select:none;user-select:none;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);font-family:var(--font-family-monospace)}.image-card-overlay za-button{margin-top:auto}@media (hover:none) and (pointer:coarse){.image-card-overlay za-button{transition:transform .3s ease-out .5s;transform:translateY(200%)}.image-card:hover .image-card-overlay za-button{transform:translateY(0)}}.image-card img{object-fit:cover;opacity:0;width:100%;height:100%}image-container{width:var(--width);height:var(--height);background-color:var(--color-black);position:relative;overflow:hidden}image-container[loaded]{border:3px solid var(--color-black);border-radius:var(--border-radius-small)}.pieces-container-overlay{opacity:0;justify-content:center;align-items:center;gap:var(--spacing);width:100%;height:100%;color:var(--color-off-white);font-size:var(--font-size-l);font-family:var(--font-family-sans-serif);background-color:#000000d9;flex-direction:column;display:flex;position:absolute;top:0;left:0}.pieces-container-score{font-weight:var(--font-weight-bold);font-size:var(--font-size-xl);font-family:var(--font-family-monospace)}image-piece{width:var(--width);height:var(--height);translate:calc(var(--position-x) * 1px) calc(var(--position-y) * 1px) 0;display:block;position:absolute}image-piece[selected]:after{content:"";background-color:#0009;width:100%;height:100%;display:inline-block;position:absolute;top:0;left:0}image-piece button{cursor:pointer;width:var(--width);height:var(--height);background-color:#0000;background-repeat:no-repeat;background-size:var(--background-width) var(--background-height);background-position:var(--image-position-x) var(--image-position-y);border:0;padding:0}.display-none{display:none}puzzle-screen{justify-content:center;align-items:center;row-gap:calc(var(--spacing) * 3);flex:1;grid-template:"timer audio pause"50px"image image image"max-content/1fr 1fr 1fr;width:100%;display:grid}@media screen and (width>=1024px){puzzle-screen{row-gap:var(--spacing);grid-template-rows:50px 50px 1fr;grid-template-columns:1fr var(--width) 1fr;grid-template-areas:".image timer"".image pause"".image audio"}}puzzle-screen za-pause-button{grid-area:pause;justify-self:flex-end;display:none}puzzle-screen[started] za-pause-button{display:initial}puzzle-screen[solved] za-pause-button{display:none}puzzle-screen game-timer{grid-area:timer;place-self:center flex-start;display:none}puzzle-screen[started] game-timer{display:initial}@media screen and (width>=1024px){puzzle-screen game-timer{place-self:flex-start flex-end}}puzzle-screen image-container{grid-area:image;justify-self:center}puzzle-screen za-bg-music{grid-area:audio;place-self:center;display:none}puzzle-screen[started] za-bg-music{display:initial}@media screen and (width>=1024px){puzzle-screen za-bg-music{place-self:flex-start flex-end}}