body{font-family:Play,sans-serif;margin:0;overflow:hidden;color:#fff;-webkit-user-select:none;user-select:none;background-color:#050510}#ui-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10}h1{font-size:3rem;margin:0 0 20px;text-shadow:0 0 10px rgba(255,255,255,.5);pointer-events:auto}.main-layout{display:flex;justify-content:space-between;width:80%;max-width:800px;height:80%;pointer-events:none}.left-panel,.right-panel{display:flex;flex-direction:column;gap:20px;pointer-events:auto}.panel-box{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);padding:15px;border-radius:8px;text-align:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 4px 6px #0000004d}.panel-label{margin:0 0 10px;font-size:1.2rem;color:#aaa;letter-spacing:2px}.panel-value{font-size:1.5rem;font-weight:700;margin:0}button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 16px;cursor:pointer;font-family:inherit;font-size:1rem;transition:all .2s;margin:5px;pointer-events:auto}button:hover{background:rgba(255,255,255,.3);transform:scale(1.05)}button:active{transform:scale(.95)}#game-over{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:4rem;font-weight:700;color:#f33;text-shadow:0 0 20px black;z-index:100;background:rgba(0,0,0,.8);padding:40px;border-radius:10px;border:2px solid #ff3333}canvas{display:block;margin:0 auto}.pastel-theme .panel-box{border-color:#ffb6c180}.neon-theme .panel-box{border-color:#00ffff80;box-shadow:0 0 10px #0ff3}.futuristic-theme .panel-box{border-color:#64c8ffcc;background:rgba(10,20,40,.7);box-shadow:0 0 15px #0096ff4d;border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.futuristic-theme h1{font-family:Courier New,Courier,monospace;letter-spacing:5px}body.pastel-theme{--background-color: #f0e6f2;--text-color: #7b6d8d;--button-bg: #d1c4e9;--button-text: #5e548e;--border-color: #bca0dc;--h1-color: #a1887f;--ui-bg: linear-gradient(135deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .1));--backdrop: blur(10px)}body.neon-theme{--background-color: #000000;--text-color: #00ffff;--button-bg: rgba(255, 0, 255, .2);--button-text: #ffffff;--border-color: #00ffff;--h1-color: #ff00ff;--ui-bg: linear-gradient(135deg, rgba(0, 0, 0, .7), rgba(0, 20, 40, .5));--backdrop: blur(5px);--glow: 0 0 10px #00ffff, 0 0 20px #ff00ff}body.futuristic-theme{--background-color: #050510;--text-color: #aaddff;--button-bg: rgba(0, 150, 255, .2);--button-text: #ffffff;--border-color: #00ccff;--h1-color: #ffffff;--ui-bg: linear-gradient(180deg, rgba(10, 20, 40, .85), rgba(0, 0, 0, .9));--backdrop: blur(15px);--glow: 0 0 15px rgba(0, 200, 255, .5);font-family:Play,sans-serif}#ui-container{font-family:Play,sans-serif;position:absolute;top:50%;right:20px;transform:translateY(-50%);background:var(--ui-bg);padding:30px;border-radius:20px;box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:var(--backdrop);backdrop-filter:var(--backdrop);border:1px solid rgba(255,255,255,.1);width:250px;transition:all .5s ease}.pastel-theme #ui-container,.neon-theme #ui-container,.futuristic-theme #ui-container{color:var(--text-color)}#ui-container h1{font-size:2.5em;text-align:center;margin-bottom:30px;text-transform:uppercase;letter-spacing:3px;text-shadow:0 0 10px rgba(255,255,255,.5)}.pastel-theme #ui-container h1,.neon-theme #ui-container h1,.futuristic-theme #ui-container h1{color:var(--h1-color)}.neon-theme #ui-container h1{text-shadow:0 0 10px #ff00ff,0 0 20px #ff00ff}.futuristic-theme #ui-container h1{background:linear-gradient(to right,#00ffff,#ffffff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0px 0px 20px rgba(0,255,255,.5)}.info-line{display:flex;justify-content:space-between;margin:15px 0;font-size:1.2em;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:5px}.info-line p:first-child{font-weight:700;opacity:.8}#next-piece-container{text-align:center;margin:20px 0;background:rgba(0,0,0,.2);padding:10px;border-radius:10px}#next-piece-canvas{background:transparent;margin-top:10px}.theme-buttons,.control-buttons{display:flex;flex-direction:column;gap:10px;margin-top:25px}.theme-buttons button,.control-buttons button{padding:12px;font-family:Play,sans-serif;font-weight:700;font-size:1em;border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.pastel-theme button,.neon-theme button,.futuristic-theme button{background-color:var(--button-bg);color:var(--button-text);border:1px solid var(--border-color)}.pastel-theme button:hover,.neon-theme button:hover,.futuristic-theme button:hover{background-color:var(--border-color);color:#fff;transform:translateY(-2px);box-shadow:0 0 15px var(--border-color)}#game-over{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:4em;font-weight:700;color:var(--h1-color);text-align:center;text-shadow:0 0 30px rgba(0,0,0,.8);background:rgba(0,0,0,.7);padding:40px;border-radius:20px;border:2px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}