html,body,#root{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden}.interface{position:absolute;inset:0;background:#2a2a35;font-family:Just Another Hand,cursive;color:#fff;z-index:20;display:flex;align-items:center;justify-content:center;clip-path:circle(150% at 50% 50%);transition:clip-path .9s cubic-bezier(.77,0,.175,1)}.interface.exit{clip-path:circle(0% at 50% 50%)}.interface.exit .center-ui{opacity:0;transition:opacity .4s ease}.center-ui{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;position:relative}.loading-screen{display:flex;flex-direction:column;align-items:center;gap:32px}.loading-title{font-size:80px;font-weight:400;margin:0}.loader-container{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}.percent-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;color:#fff;z-index:2}.main-menu-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin-top:-20px}.title{font-size:80px;margin-bottom:40px}.play-btn{background:transparent;border:4px solid white;color:#fff;padding:12px 60px;font-size:70px;border-radius:24px;cursor:pointer;font-family:inherit;margin-bottom:80px;transition:transform .2s}.play-btn:hover{transform:scale(1.05);background:#fff;color:#2a2a35}.controls-container{display:flex;justify-content:center;gap:150px;margin-bottom:60px}.control-group{display:flex;flex-direction:column;align-items:center;gap:16px}.keys-grid{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px);gap:12px}.key{border:3px solid #b3c7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:32px;color:#b3c7ff}.key.up{grid-column:2}.key.left{grid-column:1;grid-row:2}.key.down{grid-column:2;grid-row:2}.key.right{grid-column:3;grid-row:2}.shift-key-wrapper{height:124px;display:flex;align-items:flex-end}.shift-key{width:120px;height:56px;font-size:30px;text-transform:uppercase}.control-label{font-size:40px;color:#b3c7ff}.credits-btn{background:transparent;border:none;color:#ffffff80;cursor:pointer;font-size:30px;font-family:inherit;margin-top:10px;transition:color .2s}.credits-btn:hover{color:#fff;text-decoration:underline}.kaykit-logo-bottom{position:absolute;bottom:30px;right:30px;width:140px}.modal-overlay{position:fixed;inset:0;background:#000000d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:100;animation:modalFade .3s ease-out}.modal-content{background:#1f2230;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;padding:50px;border-radius:32px;position:relative;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px #00000080;text-align:center}.close-btn{position:absolute;top:20px;right:25px;background:none;border:none;color:#fff;font-size:40px;cursor:pointer;line-height:1;opacity:.5;transition:opacity .2s}.close-btn:hover{opacity:1}.modal-title{margin-bottom:30px;font-size:60px;color:#fff}.modal-body section{margin-bottom:28px}.modal-body h3{color:#bcd7ff;font-size:30px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}.modal-body p{font-size:30px;margin:0}.modal-body ul{list-style:none;padding:0;margin:0}.modal-body li{margin:12px 0;font-size:28px;line-height:1.4}.modal-body a{color:#82aaff;text-decoration:none;transition:color .2s}.modal-body a:hover{color:#fff;text-decoration:underline}@keyframes modalFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}