html,body{height:100%;margin:0;padding:0}body{background:linear-gradient(135deg,#2c3e50,#34495e);color:#ecf0f1;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;display:flex;flex-direction:column;align-items:center;justify-content:center}.container{max-width:800px;margin:0 auto;padding:20px;text-align:center}header{margin-bottom:20px}header h1{color:#f1c40f;margin-bottom:10px}header p{margin:5px 0}header a{color:#3498db;text-decoration:none}header a:hover{text-decoration:underline}#tetris{position:relative;background:#555;border-radius:5px;box-shadow:0 10px 20px rgba(0,0,0,0.3);margin:0 auto;display:flex}#scene{height:100%;position:relative;background:#2f2f2f;border-radius:5px 0 0 5px}#gameOver{height:100%;width:100%;position:absolute;background:rgba(0,0,0,0.85);z-index:999;color:#ffe100;text-align:center;display:none;border-radius:5px;display:flex;flex-direction:column;justify-content:center;align-items:center}#gameOver h1{margin-top:0;font-size:2.5em;text-shadow:0 0 10px rgba(255,225,0,0.5)}#gameOver a,#gameOver a:visited{color:#66bc29;text-decoration:none;padding:10px 20px;background:rgba(102,188,41,0.2);border-radius:5px;transition:all .3s ease}#gameOver a:hover{background:rgba(102,188,41,0.4);transform:scale(1.05)}#gameOver h3{color:orange;font-size:1.5em}#side{height:100%;position:relative;top:0;right:0;text-align:center;background:#3f3f3f;border-radius:0 5px 5px 0;padding:10px;box-sizing:border-box}#info{width:120px;margin:0 auto}#preview{width:80px;height:80px;background:#2f2f2f;margin:10px auto;border-radius:3px;border:1px solid #555}#levelInfo{color:#fff;font-size:18px;margin:10px 0}#level{color:orange;font-size:32px;text-shadow:0 0 5px rgba(255,165,0,0.5)}#scoreInfo{color:#fff;font-size:18px;margin-top:0}#score{color:orange;font-size:24px;text-shadow:0 0 5px rgba(255,165,0,0.5)}#rewardInfo{color:yellow;font-weight:bold;height:20px;font-size:18px;text-shadow:0 0 5px rgba(255,255,0,0.5)}#controls{margin-top:20px;border-top:1px solid #555;padding-top:10px}#controls p{margin:5px 0;font-weight:bold}#controls ul{list-style:none;padding:0;margin:5px 0;text-align:left}#controls li{margin:5px 0;font-size:14px}#touch-controls{display:none;justify-content:center;flex-wrap:wrap;margin-top:20px;gap:10px}#touch-controls button{background:#3498db;color:white;border:0;border-radius:5px;padding:15px;font-size:20px;min-width:60px;cursor:pointer;transition:background .3s;box-shadow:0 4px 6px rgba(0,0,0,0.1)}#touch-controls button:active{background:#2980b9;transform:translateY(2px)}#btn-drop{background:#e74c3c;flex-basis:48%;margin-top:10px}#btn-drop:active{background:#c0392b}#btn-pause{background:#f39c12;flex-basis:48%;margin-top:10px}#btn-pause:active{background:#d35400}footer{margin-top:30px;text-align:center;font-size:14px;color:#bdc3c7;padding:15px 0}footer a{color:#3498db;text-decoration:none;display:inline-block;padding:8px 15px;background:rgba(52,152,219,0.1);border-radius:4px;transition:all .3s ease;margin-left:5px}footer a:hover{background:rgba(52,152,219,0.2);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.1)}footer svg{margin-left:5px}.invisible{visibility:hidden}.animated{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@media(max-width:768px){.desktop-only{display:none}.mobile-only{display:flex}#tetris{flex-direction:column}#side{border-radius:0 0 5px 5px;width:100%!important;height:auto}#scene{border-radius:5px 5px 0 0;width:100%!important}#info{display:flex;flex-wrap:wrap;justify-content:space-around;width:100%;max-width:400px}#preview{order:3}}@media(min-width:769px){.mobile-only{display:none}.desktop-only{display:block}}.source-link{margin:15px 0}.github-link{display:inline-flex;align-items:center;background:#24292e;color:white!important;padding:8px 16px;border-radius:4px;font-weight:bold;transition:all .3s ease;box-shadow:0 2px 5px rgba(0,0,0,0.2)}.github-link svg{margin-right:8px}.github-link:hover{background:#2c3e50;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.3);text-decoration:none!important}