:root{--bg: #0f0f12;--tile: #1c1c22;--tile-hover: #2a2a34;--accent: #ffd24a;--text: #f4f4f5}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}.page{height:100dvh;display:flex;flex-direction:column;align-items:center;padding:4vh 16px}.header{text-align:center;margin-bottom:3vh;flex-shrink:0}.cta{margin:0;padding:14px 32px;background:var(--accent);color:#0f0f12;border:none;border-radius:50px;font-size:1rem;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 4px 20px #ffd24a59}.cta:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 28px #ffd24a80}.cta:active{transform:scale(.98)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2.5vw,24px);width:100%;max-width:600px}.tile{aspect-ratio:1;width:100%;border:none;border-radius:18px;background:var(--tile);color:var(--text);font-size:clamp(2rem,6vw,3.5rem);font-weight:700;cursor:pointer;display:grid;place-items:center;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.tile:hover{background:var(--tile-hover);transform:translateY(-4px) scale(1.03);box-shadow:0 12px 30px #00000073;color:var(--accent)}.tile:active{transform:translateY(-1px) scale(.99)}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:10;animation:fade .2s ease}.modal-inner{margin:0;max-width:min(90vw,900px);max-height:85vh;display:flex;flex-direction:column;align-items:center}.img-wrap{position:relative;display:inline-flex;max-width:100%;max-height:78vh}.img-wrap img{max-width:100%;max-height:78vh;border-radius:12px;object-fit:contain;box-shadow:0 20px 60px #0009;animation:pop .22s ease;display:block}.flip-hint{position:absolute;bottom:14px;right:14px;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:1rem;font-weight:700;padding:10px 18px;border-radius:24px;display:flex;align-items:center;gap:7px;pointer-events:none;letter-spacing:.03em}.has-easter{cursor:pointer}.has-easter .img-wrap img{transition:transform .35s ease}.has-easter:hover .img-wrap img{transform:scale(1.02)}.has-easter .img-wrap img.flipped{animation:flip-in .35s ease}.modal-inner figcaption{margin-top:16px;font-size:2rem;font-weight:700;color:var(--accent);letter-spacing:.05em}.close{position:fixed;top:18px;right:24px;background:none;border:none;color:var(--text);font-size:2.5rem;line-height:1;cursor:pointer;opacity:.7;transition:opacity .15s ease}.close:hover{opacity:1}.nav{position:fixed;top:50%;transform:translateY(-50%);z-index:20;background:#ffffff26;border:2px solid rgba(255,255,255,.25);color:var(--text);width:72px;height:72px;border-radius:50%;font-size:2.8rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s ease,border-color .15s ease,transform .15s ease}.nav:hover{background:#ffffff47;border-color:#ffffff80;transform:translateY(-50%) scale(1.08)}.nav-left{left:20px}.nav-right{right:20px}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:scale(.96)}}@keyframes flip-in{0%{transform:rotateY(90deg) scale(.95);opacity:0}to{transform:rotateY(0) scale(1);opacity:1}}@media (max-width: 480px){.nav{width:46px;height:46px;font-size:1.6rem}}
