:root{font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#f0f8ff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-height:100vh;background:linear-gradient(-45deg,#ff6ec4,#7873f5,#67d6ff,#ffc93c);background-size:400% 400%;animation:rainbowFlow 15s ease infinite;display:flex;justify-content:center;align-items:flex-start;padding:2rem}@keyframes rainbowFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@media (prefers-color-scheme: light){:root{color:#222}body{background:linear-gradient(-45deg,#ffecd2,#fcb69f,#a18cd1,#fbc2eb);background-size:400% 400%;animation:rainbowFlow 15s ease infinite}}#root{width:100%;max-width:600px;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);background-color:#ffffff0d;border-radius:1rem;padding:2rem;box-shadow:0 8px 32px #0000004d}h1{font-size:2.8rem;color:#ffe066;letter-spacing:.1em;text-shadow:1px 1px 4px rgba(0,0,0,.4)}a{font-weight:500;color:gold;text-decoration:none}a:hover{color:#ff8c00}button{border-radius:.5rem;border:none;padding:.75em 1.25em;font-size:1rem;font-weight:700;font-family:inherit;background:linear-gradient(to right,#f2709c,#ff9472);color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 4px 12px #0003}button:hover{transform:translateY(-2px);box-shadow:0 6px 18px #00000040}button:focus,button:focus-visible{outline:3px solid #ffda77;outline-offset:2px}@media (prefers-color-scheme: light){h1{color:#ff4081}button{background:linear-gradient(to right,#a1c4fd,#c2e9fb);color:#111}button:hover{transform:scale(1.02)}}.tile{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;text-transform:uppercase;color:#fff;background-color:#121213;border:2px solid #3a3a3c;transition:all .2s ease;box-sizing:border-box;-webkit-user-select:none;user-select:none;animation:pop .25s ease-in-out}@keyframes pop{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:.8}}@keyframes rainbow-border{0%{border-color:#ff6ec4}16%{border-color:#7873f5}33%{border-color:#67d6ff}50%{border-color:#ffc93c}66%{border-color:#ff6ec4}83%{border-color:#7873f5}to{border-color:#67d6ff}}@keyframes twinkle{0%,to{opacity:.7}50%{opacity:1}}.board:before,.board:after{content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:1rem;animation:rainbow-border 6s linear infinite}.app-container{background:linear-gradient(to bottom right,#191970,#0d1a2b);box-shadow:0 4px 32px #0006;border:1px solid #4c5a6a;color:#fff;max-width:520px;margin:2rem auto;padding:2.5rem;border-radius:1rem;text-align:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;transition:all .3s ease}.title{color:#fff;border-bottom:2px solid #4c5a6a;padding-bottom:.5rem;font-size:2.5rem;margin-bottom:1.5rem;letter-spacing:.1em;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.4)}.result{margin-top:1.5rem;font-size:1.3rem;color:#fff;font-weight:600}.restart-btn{margin-top:1.5rem;background:linear-gradient(to right,#32cd32,#228b22);color:#fff;border:none;border-radius:.5rem;padding:.9em 2em;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .2s ease,background .2s ease}.restart-btn:hover{background:linear-gradient(to right,#28a428,#1e7f1e);transform:scale(1.05)}.error{color:#fffbe6;background:#d19c28;border-radius:.5rem;padding:.6em 1em;margin:1em auto 0;max-width:340px;font-size:1.1rem;font-weight:500;box-shadow:0 3px 10px #0003;text-align:center;line-height:1.4}.tile{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;text-transform:uppercase;color:#fff;background-color:#0a7a06;border:2px solid #3a3a3c;box-sizing:border-box;-webkit-user-select:none;user-select:none;animation:pop .25s ease-in-out;transform-style:preserve-3d;perspective:1000px;transition:transform .4s ease,background-color .3s ease}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg);background-color:#121213}to{transform:rotateX(0)}}.tile.revealed{animation:flip .6s ease forwards;transform-origin:bottom}.tile.correct{background:linear-gradient(145deg,#6aaa64,#538d4e);border-color:#538d4e;box-shadow:0 0 10px #538d4eaa}.tile.present{background:linear-gradient(145deg,#c9b458,#b59f3b);border-color:#b59f3b;box-shadow:0 0 10px #b59f3baa}.tile.absent{background-color:#3a3a3c;border-color:#3a3a3c;opacity:.85}.tile:empty{border-color:#3a3a3c}@media (max-width: 500px){.tile{width:45px;height:45px;font-size:1.5rem}}.tile.special{width:80px;height:60px;font-size:1.1rem;background:linear-gradient(145deg,#4b6cb7,#182848);color:#fff;border-radius:.5rem}.tile.special.correct{background-color:#538d4e;border-color:#538d4e;color:#fff}.tile.special.present{background-color:#b59f3b;border-color:#b59f3b;color:#fff}.tile.special.absent{background-color:#3a3a3c;border-color:#3a3a3c;color:#888}.tile.special:hover{background:linear-gradient(145deg,#5d8df4,#29438a);transform:translateY(-2px);box-shadow:0 6px 12px #00000059}.tile.special.revealed{animation:flip .6s ease forwards;transform-origin:bottom;background-color:#121213;box-shadow:none;cursor:default;-webkit-user-select:none;user-select:none;transition:none}.tile.special.correct{background:linear-gradient(145deg,#6aaa64,#538d4e);border-color:#538d4e;box-shadow:0 0 10px #538d4eaa}.tile.special.present{background:linear-gradient(145deg,#c9b458,#b59f3b);border-color:#b59f3b;box-shadow:0 0 10px #b59f3baa}.tile.special.absent{background-color:#3a3a3c;border-color:#3a3a3c;opacity:.85;box-shadow:none}.tile.special:empty{border-color:#3a3a3c;background:linear-gradient(145deg,#4b6cb7,#182848);color:#fff;box-shadow:none;cursor:default;-webkit-user-select:none;user-select:none;transition:none}@keyframes rainbow-border{0%{border-color:#ff4d4d}20%{border-color:#ffdb4d}40%{border-color:#4dff4d}60%{border-color:#4dd2ff}80%{border-color:#b84dff}to{border-color:#ff4d4d}}@keyframes twinkle{0%,to{opacity:.8;transform:scale(1)}50%{opacity:.2;transform:scale(1.3)}}.board{display:grid;grid-template-rows:repeat(6,1fr);gap:12px;margin:2rem auto;width:fit-content;padding:12px;background:radial-gradient(ellipse at center,#121213,#1a1a1a);border-radius:16px;position:relative;animation:rainbow-border 6s infinite linear;border:4px solid;box-shadow:0 8px 24px #ffffff1a;overflow:hidden}.board:before,.board:after{content:"";position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:twinkle 2s infinite ease-in-out;box-shadow:20px 30px #fff,60px 80px #fff,120px 20px #fff,160px 60px #fff,40px 140px #fff,100px 100px #fff,180px 40px #fff;z-index:0;opacity:.7}.board-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;justify-content:center;z-index:1;position:relative}.tile{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;text-transform:uppercase;color:#fff;background-color:#1e1e1f;border:2px solid #3a3a3c;box-sizing:border-box;-webkit-user-select:none;user-select:none;animation:pop .25s ease-in-out,rainbow-border 4s infinite linear;border-radius:10px;box-shadow:0 0 12px #ffffff26;transition:transform .2s ease,box-shadow .2s ease;z-index:1}.tile:hover{transform:scale(1.05);box-shadow:0 0 16px #ffffff4d}@keyframes pop{0%{transform:scale(.9)}50%{transform:scale(1.05)}to{transform:scale(1)}}.keyboard{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:2rem}.keyboard-row{display:flex;justify-content:center;gap:8px}.key{width:48px;height:64px;font-size:1.3rem;font-weight:700;text-transform:uppercase;background:linear-gradient(to top left,#4b6cb7,#182848);color:#fff;border:2px solid #3a3a3c;border-radius:.5rem;box-shadow:0 4px 10px #00000040;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.key:hover{background:linear-gradient(to bottom right,#5d8df4,#29438a);transform:translateY(-2px);box-shadow:0 6px 12px #00000059}.key.special{width:80px;font-size:1.1rem}.key.correct{background-color:#538d4e;border-color:#538d4e;color:#fff}.key.present{background-color:#b59f3b;border-color:#b59f3b;color:#fff}.key.absent{background-color:#3a3a3c;border-color:#3a3a3c;color:#888}.key.correct{background-color:#538d4e;color:#fff}.key.present{background-color:#b59f3b;color:#fff}.key.absent{background-color:#3a3a3c;color:#fff}.key.special{font-weight:700;background-color:#565f7e}