:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;width:100%;height:100vh}#root{width:100%;height:100%}h1{font-size:3.2em;line-height:1.1}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#f5f5f5}}.App{height:100vh;display:flex;align-items:center;justify-content:center;padding:3rem;box-sizing:border-box;position:relative}.tiles-container{display:flex;flex-direction:column;gap:2rem;width:90%;max-width:1000px;height:calc(100vh - 4rem)}.tile{border-radius:12px;padding:3rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px #0000001a;color:#fff;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px;position:relative;overflow:hidden}.tile:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;filter:blur(40px)}.tile-image{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:1;transition:transform .3s ease}.tile:hover .tile-image{transform:scale(1.1)}.tile-firered{background:#d63031}.tile-firered:before{background:radial-gradient(circle at 50% 50%,#ff6348 10%,transparent 15%),radial-gradient(circle at 60% 40%,#e84118 15%,transparent 20%),radial-gradient(circle at 65% 55%,#ff4757 15%,transparent 22%),radial-gradient(circle at 55% 65%,#c23616 18%,transparent 25%),radial-gradient(circle at 40% 65%,#ff7675 20%,transparent 28%),radial-gradient(circle at 30% 55%,#d63031 22%,transparent 30%),radial-gradient(circle at 30% 40%,#ff5252 25%,transparent 33%),radial-gradient(circle at 40% 30%,#e57373 28%,transparent 36%),radial-gradient(circle at 55% 30%,#ff6f00 30%,transparent 38%),radial-gradient(circle at 70% 35%,#c62828 32%,transparent 40%),radial-gradient(circle at 75% 50%,#ffab91 35%,transparent 43%),radial-gradient(circle at 70% 65%,#bf360c 38%,transparent 46%),radial-gradient(circle at 55% 75%,#ff1744 40%,transparent 48%),radial-gradient(circle at 38% 75%,#b71c1c 42%,transparent 50%),radial-gradient(circle at 25% 60%,#ff6e40 45%,transparent 53%),radial-gradient(circle at 22% 42%,#ef5350 48%,transparent 56%),#e53935}.tile-emerald{background:#27ae60}.tile-emerald:before{background:radial-gradient(circle at 50% 50%,#2ecc71 10%,transparent 15%),radial-gradient(circle at 58% 42%,#00b894 15%,transparent 20%),radial-gradient(circle at 62% 54%,#55efc4 15%,transparent 22%),radial-gradient(circle at 54% 64%,#1abc9c 18%,transparent 25%),radial-gradient(circle at 42% 66%,#16a085 20%,transparent 28%),radial-gradient(circle at 32% 58%,#26de81 22%,transparent 30%),radial-gradient(circle at 30% 44%,#00897b 25%,transparent 33%),radial-gradient(circle at 38% 34%,#a5d6a7 28%,transparent 36%),radial-gradient(circle at 52% 30%,#004d40 30%,transparent 38%),radial-gradient(circle at 66% 34%,#4db6ac 32%,transparent 40%),radial-gradient(circle at 72% 48%,#00695c 35%,transparent 43%),radial-gradient(circle at 70% 62%,#1de9b6 38%,transparent 46%),radial-gradient(circle at 58% 72%,#66bb6a 40%,transparent 48%),radial-gradient(circle at 42% 74%,#00bfa5 42%,transparent 50%),radial-gradient(circle at 28% 66%,#81c784 45%,transparent 53%),radial-gradient(circle at 24% 48%,#26a69a 48%,transparent 56%),#27ae60}.tile-heartgold{background:#f39c12}.tile-heartgold:before{background:radial-gradient(circle at 50% 50%,#ffd700 10%,transparent 15%),radial-gradient(circle at 59% 41%,#f39c12 15%,transparent 20%),radial-gradient(circle at 64% 53%,#ffeaa7 15%,transparent 22%),radial-gradient(circle at 56% 63%,#fdcb6e 18%,transparent 25%),radial-gradient(circle at 43% 65%,#ffb142 20%,transparent 28%),radial-gradient(circle at 33% 57%,#e67e22 22%,transparent 30%),radial-gradient(circle at 31% 43%,#f1c40f 25%,transparent 33%),radial-gradient(circle at 39% 33%,#ffe082 28%,transparent 36%),radial-gradient(circle at 53% 29%,#ff6f00 30%,transparent 38%),radial-gradient(circle at 67% 33%,#fff59d 32%,transparent 40%),radial-gradient(circle at 73% 47%,#e65100 35%,transparent 43%),radial-gradient(circle at 71% 61%,#ffb300 38%,transparent 46%),radial-gradient(circle at 59% 71%,#ffd54f 40%,transparent 48%),radial-gradient(circle at 43% 73%,#ff8f00 42%,transparent 50%),radial-gradient(circle at 29% 65%,#ffca28 45%,transparent 53%),radial-gradient(circle at 25% 49%,#fbc02d 48%,transparent 56%),radial-gradient(circle at 28% 35%,#ffab00 50%,transparent 58%),radial-gradient(circle at 42% 26%,#ff9800 52%,transparent 60%),#f39c12}.tile:hover{transform:translateY(-4px);box-shadow:0 8px 12px #0003}.tile:active{transform:translateY(-2px)}.tile h2{margin:0 0 .5rem;font-size:1.5rem}.tile p{margin:0;opacity:.9;font-size:1rem}.help-button{position:fixed;top:1rem;right:1rem;width:30px;height:30px;border-radius:6px;background:#d3d3d3;border:none;color:#333;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;z-index:1000;display:flex;align-items:center;justify-content:center}.help-button:hover{background:#b8b8b8}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s ease;padding:2rem;box-sizing:border-box}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#242424;padding:2rem;border-radius:16px;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;position:relative;color:#ffffffde;animation:slideUp .3s ease;box-sizing:border-box}@media(prefers-color-scheme:light){.modal-content{background:#f5f5f5;color:#213547;box-shadow:0 20px 60px #00000026}}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close{position:absolute;top:1rem;right:1rem;background:#ffffff1a;border:none;color:#ffffffde;font-size:2rem;width:40px;height:40px;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;line-height:1}.modal-close:hover{background:#fff3;transform:rotate(90deg)}@media(prefers-color-scheme:light){.modal-close{background:#0000000d;color:#213547}.modal-close:hover{background:#0000001a}}.modal-content h2{margin-top:0;margin-bottom:1rem;font-size:2rem}.modal-content p{line-height:1.6;margin-bottom:1rem;opacity:.95}.game-list{margin-top:1.5rem;background:#ffffff0d;padding:1.5rem;border-radius:8px}@media(prefers-color-scheme:light){.game-list{background:#0000000d}}.game-list h3{margin-top:0;margin-bottom:1rem;font-size:1.3rem;color:#ffffffde}@media(prefers-color-scheme:light){.game-list h3{color:#213547}}.game-list ul{list-style:none;padding:0;margin:0}.game-list li{padding:.5rem 0;color:#ffffffde}@media(prefers-color-scheme:light){.game-list li{color:#213547}}.game-list li:last-child{border-bottom:none}.game-list strong{color:#ffffffb3}@media(prefers-color-scheme:light){.game-list strong{color:#213547cc}}