body{margin:0;font-family:Arial,sans-serif;background:#f8f4ea;color:#333}.game{min-height:100vh;padding:14px 24px 24px;box-sizing:border-box;text-align:center}.game-header{max-width:900px;margin:0 auto 12px}.game-header h1{font-size:2.5rem;margin:0 0 10px}.game-header p{font-size:1.15rem;margin:0}.shelf-section{max-width:900px;margin:12px auto}.shelf-section h2{font-size:1.5rem;margin-bottom:6px}.shelf{display:flex;justify-content:center;align-items:center;gap:12px;min-height:100px;padding:10px 20px;border-radius:18px;background:#fff;box-shadow:0 6px 16px #00000014}.letter-card{width:100px;height:100px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:#f4efe6;font-size:3.4rem;font-weight:700;box-shadow:0 4px 10px #00000014}.lowercase-card{cursor:grab}.lowercase-card:active{cursor:grabbing}.picture-card{width:120px;height:120px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:#f4efe6;padding:10px;box-sizing:border-box;cursor:grab;box-shadow:0 4px 10px #00000014}.picture-card:active{cursor:grabbing}.picture-card img{width:100%;height:100%;object-fit:contain;display:block}.match-family{display:flex;align-items:center;justify-content:center;gap:5px;padding:5px;border-radius:18px;background:#f4efe6;box-shadow:0 4px 10px #00000014}.family-upper,.family-lower,.family-picture{display:flex;align-items:center;justify-content:center;border-radius:14px}.family-upper{width:55px;height:90px;font-size:3.4rem;font-weight:700}.family-lower{width:62px;height:90px;background:#fff;border:3px dashed #d8cfc0;box-sizing:border-box;font-size:3.2rem;font-weight:700}.family-picture{width:78px;height:90px;background:#fff;border:3px dashed #d8cfc0;box-sizing:border-box;padding:6px}.family-picture img{width:100%;height:100%;object-fit:contain}.placeholder{font-size:1.8rem;font-weight:700;opacity:.35}@media(max-width:700px){.game-header h1{font-size:2rem}.shelf{gap:12px;padding:16px 10px}.letter-card{width:70px;height:70px;font-size:2.5rem}.picture-card{width:82px;height:82px}}.celebration-video{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(700px,90vw);max-height:85vh;object-fit:contain;z-index:1000;border-radius:24px;box-shadow:0 10px 40px #00000059;pointer-events:none}.next-level-button{position:fixed;left:50%;bottom:40px;transform:translate(-50%);z-index:1000;padding:18px 36px;font-size:1.5rem;font-weight:700;border:none;border-radius:18px;cursor:pointer;background:#fff;color:#333;box-shadow:0 8px 25px #00000040}.next-level-button:hover{transform:translate(-50%) scale(1.05)}.celebration-backdrop{position:fixed;inset:0;background:#0000008c;z-index:999}.middle-shelf{animation:moveRight 7s linear infinite alternate}.bottom-shelf{animation:moveLeft 7s linear infinite alternate}.middle-shelf,.bottom-shelf{background:#dff4ff}@keyframes moveRight{0%{transform:translate(-18vw)}to{transform:translate(18vw)}}@keyframes moveLeft{0%{transform:translate(18vw)}to{transform:translate(-18vw)}}.middle-shelf.level-complete,.bottom-shelf.level-complete{animation:none;transform:translate(0);transition:transform .6s ease-out}.start-screen{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:30px 20px;box-sizing:border-box;text-align:center}.start-card{width:min(850px,92vw);padding:42px 35px;box-sizing:border-box;background:#fff;border-radius:28px;box-shadow:0 8px 24px #0000001f}.start-card h1{font-size:2.7rem;margin:0 0 18px;line-height:1.15}.start-directions{font-size:1.25rem;line-height:1.5;margin:0 auto 28px;max-width:650px}.start-button{border:none;border-radius:18px;padding:17px 38px;font-size:1.4rem;font-weight:700;cursor:pointer;background:#dff4ff;color:#333;box-shadow:0 5px 12px #00000024;transition:transform .2s ease}.start-button:hover{transform:scale(1.06)}.start-card h2{margin:32px 0 15px;font-size:1.5rem}.level-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.level-buttons button{border:none;border-radius:14px;padding:12px 18px;min-width:75px;background:#dff4ff;color:#333;font-size:1.05rem;font-weight:700;cursor:pointer;box-shadow:0 4px 9px #0000001a;transition:transform .2s ease}.level-buttons button:hover{transform:scale(1.08)}@media(max-width:700px){.start-card{padding:30px 18px}.start-card h1{font-size:2rem}.start-directions{font-size:1.05rem}.level-buttons button{min-width:68px;padding:11px 14px}}.start-band-image{display:block;width:min(500px,90%);max-height:300px;object-fit:cover;object-position:center 25%;margin:0 auto 24px;border-radius:18px}.confetti-container{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1100}.confetti-piece{position:absolute;top:-20px;width:10px;height:18px;border-radius:2px;animation-name:confettiFall;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:.9}}.end-screen{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:30px 20px;box-sizing:border-box;text-align:center}.end-card{width:min(900px,94vw);padding:45px 40px;box-sizing:border-box;background:#fff;border-radius:28px;box-shadow:0 8px 24px #00000024}.end-card h1{font-size:3.5rem;margin:0 0 18px;line-height:1.1}.end-card h2{font-size:2rem;margin:0 0 25px}.end-card p{font-size:1.35rem;line-height:1.5;margin:14px auto;max-width:760px}.end-shine{font-size:1.7rem!important;font-weight:700}.coming-soon{font-size:1.5rem!important;font-weight:700;margin-top:25px!important}.brand-line{font-size:1.25rem!important;font-style:italic;font-weight:700;margin-top:28px!important}.play-again-button{margin-top:28px;border:none;border-radius:18px;padding:17px 38px;font-size:1.35rem;font-weight:700;cursor:pointer;background:#dff4ff;color:#333;box-shadow:0 5px 12px #00000024}.play-again-button:hover{transform:scale(1.06)}@media(max-width:700px){.end-card{padding:32px 20px}.end-card h1{font-size:2.5rem}.end-card h2{font-size:1.55rem}.end-card p{font-size:1.1rem}.end-shine,.coming-soon{font-size:1.3rem!important}}@media(max-width:850px){.start-screen{padding:15px 12px}.start-card{padding:24px 20px}.start-card h1{font-size:2.15rem;margin-bottom:10px}.start-directions{font-size:1.05rem;margin-bottom:14px}.start-band-image{width:min(400px,82%);max-height:190px;margin-bottom:14px}.start-card h2{margin:18px 0 10px}@keyframes moveRight{0%{transform:translate(-6vw)}to{transform:translate(6vw)}}@keyframes moveLeft{0%{transform:translate(6vw)}to{transform:translate(-6vw)}}}.lowercase-card,.picture-card{touch-action:none}@media(max-width:600px){.game{width:100%;max-width:100%;margin:0 auto;padding-left:10px;padding-right:10px;box-sizing:border-box}.game-header,.shelf-section{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.top-shelf{gap:5px;padding:8px 5px}.top-shelf .top-shelf{margin-left:auto;margin-right:auto}.match-family{gap:2px}.family-upper,.family-lower,.family-picture{width:34px;height:62px;min-width:34px}.family-upper,.family-lower{font-size:1.8rem}.family-picture img{max-width:30px;max-height:50px}}@media(max-width:600px){.top-shelf{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:8px 10px;padding:10px}.final-band-video{top:50%;left:50%;width:88vw;max-height:52vh;transform:translate(-50%,-50%);object-fit:cover}.match-family{gap:2px}.family-upper,.family-lower,.family-picture{width:42px;height:62px;min-width:42px}.family-upper,.family-lower{font-size:1.8rem}.family-picture img{max-width:36px;max-height:50px}}.lowercase-card,.picture-card{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}@media(min-width:601px)and (max-width:900px){.top-shelf{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:10px;padding:12px}}.match-family{gap:2px}.family-upper,.family-lower,.family-picture{width:46px;height:64px;min-width:46px}.family-upper,.family-lower{font-size:1.9rem}.family-picture img{max-width:34px;max-height:46px}@media(max-width:380px){.start-card{padding:22px 14px}.start-card h1{font-size:1.5rem;line-height:1.05;margin-bottom:10px}.start-directions{font-size:1rem;line-height:1.3;margin-bottom:14px}.start-band-image{max-height:210px;margin-bottom:14px}.start-button{margin-bottom:10px}.start-card h2{margin:14px 0 10px;font-size:1.35rem}.level-buttons{gap:8px}.game-header h1{font-size:1.25rem;line-height:.9}.game-header p{font-size:1rem;line-height:1}.shelf-section h2{font-size:1rem;margin-top:12px;margin-bottom:8px}}@media(max-width:360px){.middle-shelf,.bottom-shelf{gap:4px;padding-left:6px;padding-right:6px}.lowercase-card,.picture-card{width:62px;min-width:62px}.picture-card img{max-width:54px;max-height:58px}.game-header{margin-bottom:8px}.game-header h1{font-size:1.55rem;line-height:1.05;margin-bottom:8px}.shelf-section{margin-bottom:8px}.shelf-section h2{margin-top:8px;margin-bottom:6px}.top-shelf,.middle-shelf,.bottom-shelf{min-height:0}}.selected-card{outline:4px solid #ffd166;outline-offset:3px;transform:scale(1.06)}
