.app-background{background:linear-gradient(135deg,rgb(26,35,52) 0%,rgb(35,47,68) 100%);min-height:100vh;color:#fff;margin:0;display:flex;flex-direction:column}.grid-container{display:grid;margin:0 auto}.cell-perspective{perspective:1000px}.grid-cell{background:rgb(50,62,84);border:2px solid rgba(70,85,110,.5);border-radius:8px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:700;color:#f0f5fa;-webkit-user-select:none;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,background-color,border-color}.grid-cell.active{background:rgb(59,130,246);color:#fff;border-color:#3b82f6;box-shadow:0 0 16px #3b82f680}.grid-cell.partial{background:rgb(70,85,110);color:#dce1eb;border-color:#46556e}.grid-cell.absent{background:rgb(45,52,65);color:#8c96aa;border-color:transparent}.grid-cell.empty{background:transparent;border:2px solid rgba(70,85,110,.5);color:#b4bed24d}.grid-cell.current{background:rgba(255,255,255,.05);border:2px solid rgba(180,190,210,.5)}.keyboard-container{background:rgb(48,58,76);border:1px solid rgba(70,85,110,.4);border-radius:12px;padding:8px;width:100%;max-width:800px;margin:0 auto}@media (min-width: 640px){.keyboard-container{padding:16px}}@media (max-height: 800px){.keyboard-container{padding:4px 8px}}.keyboard-row{display:flex;gap:4px;justify-content:center;margin-bottom:6px}@media (min-width: 640px){.keyboard-row{gap:6px}}@media (max-height: 800px){.keyboard-row{gap:4px;margin-bottom:4px}}.keyboard-row:last-child{margin-bottom:0}.key{background:rgb(58,70,92);border:1px solid rgba(80,95,120,.3);border-radius:6px;padding:0;color:#dce1eb;font-size:13px;font-weight:600;text-align:center;cursor:pointer;transition:all .15s;box-shadow:0 1px 3px #0000004d;height:48px;display:flex;align-items:center;justify-content:center;flex:1;max-width:50px}@media (min-width: 640px){.key{font-size:14px;padding:12px 16px;height:auto;max-width:none;min-width:40px}}@media (min-width: 640px) and (max-height: 800px){.key{padding:0;height:36px;font-size:13px;min-width:36px}}.key:hover{background:rgb(68,80,102);transform:translateY(-1px)}.key:active{transform:translateY(0)}.key.active{background:rgb(59,130,246);color:#fff;border-color:#3b82f6;box-shadow:0 0 12px #3b82f666,0 2px 4px #0000004d}.key.special{background:rgb(58,70,92);color:#f0f5fa;font-weight:700;flex:1.5;max-width:70px;font-size:11px}@media (min-width: 640px){.key.special{min-width:60px;max-width:none;font-size:13px}}@media (min-width: 640px) and (max-height: 800px){.key.special{font-size:11px;min-width:50px}}.key.correct{background:rgb(59,130,246);color:#fff;border-color:#3b82f6}.key.partial{background:rgb(130,145,165);color:#dce1eb}.key.incorrect{background:rgb(45,52,65);color:#8c96aa;opacity:.8;border-color:transparent;box-shadow:none}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(2)}to{transform:scale(1)}}.animate-pop{animation:pop .15s ease-in-out forwards}@keyframes flipIn{0%{transform:rotateX(0)}45%{transform:rotateX(-90deg)}55%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}.animate-flip{animation:flipIn .6s ease-in-out;animation-fill-mode:backwards}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.animate-shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes jump{0%,20%{transform:translateY(0)}40%{transform:translateY(-20px)}50%{transform:translateY(0)}60%{transform:translateY(-10px)}80%{transform:translateY(0)}to{transform:translateY(0)}}.animate-jump{animation:jump 1s ease-in-out}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgb(50,62,84);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:rgb(70,85,110)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background-color:#1a2334d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:1rem}.modal-content{background-color:#232f44;border:1px solid rgba(70,85,110,.5);border-radius:12px;box-shadow:0 25px 50px -12px #00000080;padding:1.5rem;width:100%;position:relative;max-height:90vh;overflow-y:auto}.modal-close-button{position:absolute;top:.5rem;right:1rem;color:#8c96aa;font-size:1.5rem;line-height:2rem;z-index:10;background:transparent;border:none;cursor:pointer}.modal-close-button:hover{color:#fff}.btn-base{font-weight:700;padding:12px 16px;border-radius:6px;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;border:none;background:rgb(59,130,246);color:#fff;box-shadow:0 2px 4px #0003}.btn-base:hover{background:rgb(37,99,235);transform:translateY(-1px)}.btn-base:active{transform:translateY(0)}