.pinball-page-container *{box-sizing:border-box;margin:0;padding:0}.pinball-page-container{flex-direction:column;justify-content:center;align-items:center;min-height:calc(100vh - 64px);padding:20px;display:flex;position:relative}#app{z-index:1;background:#1a1a1a;border:2px solid #444;border-radius:8px;flex-direction:column;width:100%;max-width:1400px;height:80vh;max-height:800px;display:flex;position:relative;overflow:hidden}.setting-group{margin-bottom:20px}.setting-group label{color:#ccc;margin-bottom:8px;font-size:14px;display:block}.setting-group textarea,.setting-group select,.setting-group input{color:#fff;background:#1a1a1a;border:1px solid #555;border-radius:5px;width:100%;padding:10px;font-size:14px}.setting-group textarea{resize:vertical;height:80px;font-family:inherit}.settings-popup .setting-group{margin-bottom:8px}.setting-group input[type=checkbox]{width:auto;margin-right:8px}#game-area{flex:1;position:relative;overflow:hidden}#game-canvas{background:linear-gradient(135deg,#2d3748 0%,#1a202c 100%);width:100%;height:100%;display:block}#winner-display{z-index:500;background:rgba(0,0,0,.9);border:3px solid gold;border-radius:15px;justify-content:center;align-items:center;min-width:300px;padding:30px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 30px rgba(0,0,0,.5)}#winner-display.hidden{display:none}#winner-content{text-align:center;color:#fff;z-index:501}#winner-content h1{margin-bottom:20px;font-size:3rem;animation:1s ease-in-out infinite alternate bounce}#winner-name{color:gold;margin-bottom:30px;font-size:2rem;font-weight:700}#winner-buttons{justify-content:center;gap:15px;display:flex}.winner-btn{color:#fff;cursor:pointer;background:#4caf50;border:none;border-radius:8px;min-width:150px;padding:12px 24px;font-size:16px;font-weight:700;transition:all .3s}.winner-btn:hover{background:#45a049;transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.3)}.winner-btn.secondary{background:#ff9800}.winner-btn.secondary:hover{background:#f57c00}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-20px)}}.minimap{z-index:100;position:absolute;top:20px;left:20px}#minimap-canvas{background:#1a1a1a;border:2px solid #444;border-radius:5px;display:block;box-shadow:0 5px 15px rgba(0,0,0,.3)}.performance-monitor{z-index:101;color:#0f0;background:rgba(0,0,0,.9);border:2px solid #0f0;border-radius:5px;min-width:120px;padding:8px 12px;font-family:Courier New,monospace;font-size:14px;position:absolute;top:364px;left:20px}.performance-monitor.hidden{display:none}.performance-text{line-height:1.4}#fps-display{color:#0f0;font-weight:700}.leaderboard{z-index:100;scrollbar-width:none;-ms-overflow-style:none;background:rgba(0,0,0,.8);border:2px solid #444;border-radius:10px;min-width:250px;max-height:calc(80vh - 80px);padding:20px;position:absolute;top:20px;right:20px;overflow-y:auto}.leaderboard::-webkit-scrollbar{display:none}.leaderboard h3{color:gold;text-align:center;margin-bottom:15px;font-size:18px}.leaderboard-item{background:rgba(255,255,255,.1);border-left:4px solid;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:8px 12px;transition:all .3s;display:flex}.leaderboard-item.rank-1{background:rgba(255,215,0,.1);border-left-color:gold}.leaderboard-item.rank-2{background:rgba(192,192,192,.1);border-left-color:silver}.leaderboard-item.rank-3{background:rgba(205,127,50,.1);border-left-color:#cd7f32}.leaderboard-item.finished{opacity:.7;background:rgba(76,175,80,.2)}.leaderboard-item.preview{background:rgba(100,100,100,.1)}.leaderboard-rank{color:#fff;min-width:30px;font-size:16px;font-weight:700}.leaderboard-name{color:#fff;flex:1;margin-left:10px;font-size:14px}.leaderboard-status{color:#ccc;font-size:12px}.settings-popup{z-index:1000;background:#2d2d2d;border:2px solid #444;border-radius:10px;width:580px;max-width:calc(100% - 40px);transition:opacity .3s,transform .3s;position:absolute;bottom:20px;left:20px;box-shadow:0 10px 30px rgba(0,0,0,.5)}.settings-popup.hidden{opacity:0;pointer-events:none;transform:translateY(20px)}.settings-header{background:#333;border-bottom:1px solid #444;border-radius:8px 8px 0 0;padding:8px 15px}.settings-header h4{color:#fff;margin:0;font-size:16px}.settings-content{gap:20px;padding:12px;display:flex}.settings-left,.settings-right{flex-direction:column;flex:1;gap:8px;display:flex}.settings-right select,.settings-right input[type=number]{padding:8px;font-size:13px}.control-buttons{gap:10px;display:flex}.settings-popup .setting-group textarea{height:100px}.control-btn{color:#fff;cursor:pointer;background:#444;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:60px;height:50px;padding:12px 20px;font-size:18px;transition:all .2s;display:flex}.control-btn:hover{background:#555;transform:translateY(-2px)}.control-btn:active{transform:translateY(0)}.control-btn.primary{background:#4caf50}.control-btn.primary:hover{background:#45a049}.speed-control{background:rgba(255,255,255,.1);border-radius:6px;align-items:center;gap:10px;padding:8px 12px;display:flex}.settings-popup .speed-control{margin:0;padding:5px 8px}.speed-control label{color:#fff;min-width:35px;font-size:14px;font-weight:700}.speed-control input[type=range]{-webkit-appearance:none;background:#444;border-radius:3px;outline:none;width:80px;height:6px}.speed-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#4caf50;border-radius:50%;width:18px;height:18px}.speed-control input[type=range]::-moz-range-thumb{cursor:pointer;background:#4caf50;border:none;border-radius:50%;width:18px;height:18px}#speed-value{color:#4caf50;text-align:center;min-width:80px;font-size:13px;font-weight:700}#toast-container{z-index:1100;flex-direction:column;gap:10px;display:flex;position:absolute;top:20px;right:20px}.toast{color:#fff;background:#333;border-left:4px solid #4caf50;border-radius:8px;min-width:200px;padding:12px 20px;animation:.3s ease-out slideIn;box-shadow:0 4px 12px rgba(0,0,0,.3)}.toast.error{border-left-color:#f44336}.toast.success{border-left-color:#4caf50}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}#fireworks-container{pointer-events:none;z-index:500;position:absolute;top:0;bottom:0;left:0;right:0}.firework{border-radius:50%;width:6px;height:6px;animation:1s ease-out forwards explode;position:absolute}@keyframes explode{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(20)}}.fullscreen-btn{color:#fff;cursor:pointer;z-index:10;background:#4caf50;border:none;border-radius:8px;align-items:center;gap:8px;margin:16px auto 0;padding:12px 30px;font-size:16px;font-weight:700;transition:all .3s;display:flex;position:relative}.fullscreen-btn:hover{background:#45a049;transform:translateY(-2px);box-shadow:0 5px 15px rgba(76,175,80,.4)}.fullscreen-btn:active{transform:translateY(0)}#app:-webkit-full-screen{border:none;border-radius:0;max-width:100%;height:100vh;max-height:100%}#app:fullscreen{border:none;border-radius:0;max-width:100%;height:100vh;max-height:100%}.pinball-page-container:has(#app:-webkit-full-screen) .fullscreen-btn{display:none}.pinball-page-container:has(#app:fullscreen) .fullscreen-btn{display:none}@media (max-width:700px){.pinball-page-container{padding:10px}#app{height:70vh}.settings-popup{width:calc(100% - 40px);left:10px;right:10px}.settings-content{flex-direction:column;gap:15px}.control-buttons{flex-wrap:wrap}.fullscreen-btn{margin-top:15px;padding:10px 24px;font-size:14px}}@media (max-width:768px){.control-btn{min-width:50px;height:45px;padding:10px 15px;font-size:16px}#winner-content h1{font-size:2rem}#winner-name{font-size:1.5rem}.settings-popup{width:calc(100% - 20px);bottom:10px;left:10px;right:10px}}.map-selection-group{gap:8px;width:100%;display:flex}.map-display-input{color:#ddd;cursor:default;background:rgba(0,0,0,.3);border:1px solid rgba(74,158,255,.3);border-radius:4px;flex:1;padding:8px 12px;font-size:14px}.map-select-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4a9eff 0%,#357abd 100%);border:none;border-radius:4px;align-items:center;gap:6px;padding:8px 16px;font-weight:500;transition:all .2s;display:flex}.map-select-button:hover{background:linear-gradient(135deg,#5aafff 0%,#4489cc 100%);transform:translateY(-1px);box-shadow:0 4px 12px rgba(74,158,255,.3)}.map-modal-overlay{z-index:10000;background:rgba(0,0,0,.85);justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.map-modal-overlay.hidden{display:none}.map-modal{background:linear-gradient(135deg,#2a2a2a 0%,#1a1a1a 100%);border:1px solid rgba(74,158,255,.3);border-radius:12px;flex-direction:column;width:90%;max-width:1000px;max-height:80vh;animation:.3s ease-out slideUp;display:flex;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}.modal-header{background:rgba(0,0,0,.3);border-bottom:1px solid rgba(74,158,255,.2);justify-content:space-between;align-items:center;padding:20px;display:flex}.modal-header h2{color:#4a9eff;margin:0;font-size:24px}.modal-controls{align-items:center;gap:12px;display:flex}.map-editor-btn{color:#fff;cursor:pointer;background:#4a9eff;border:none;border-radius:6px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.map-editor-btn:hover{background:#357abd;transform:translateY(-1px);box-shadow:0 4px 12px rgba(74,158,255,.3)}.sort-select{color:#ddd;cursor:pointer;background:rgba(0,0,0,.5);border:1px solid rgba(74,158,255,.3);border-radius:4px;padding:8px 12px;font-size:14px}.modal-close-btn{color:#ddd;cursor:pointer;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50%;width:36px;height:36px;font-size:20px;transition:all .2s}.modal-close-btn:hover{background:rgba(255,74,74,.2);border-color:rgba(255,74,74,.5);transform:rotate(90deg)}.map-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;max-height:calc(80vh - 80px);padding:20px;display:grid;overflow-y:auto}.map-card{cursor:pointer;background:rgba(0,0,0,.5);border:2px solid transparent;border-radius:8px;transition:all .2s;position:relative;overflow:hidden}.map-card:hover{border-color:rgba(74,158,255,.5);transform:translateY(-4px);box-shadow:0 8px 24px rgba(74,158,255,.3)}.map-card.selected{border-color:#4a9eff;box-shadow:0 0 20px rgba(74,158,255,.5)}.map-card.selected:before{content:"✓";color:#fff;z-index:1;background:#4a9eff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-weight:700;display:flex;position:absolute;top:10px;right:10px}.map-thumbnail{background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);justify-content:center;align-items:center;width:100%;height:250px;display:flex;position:relative;overflow:hidden}.map-thumbnail img{object-fit:cover;width:100%;height:100%}.placeholder-thumbnail{color:rgba(74,158,255,.5);font-size:48px}.map-info{background:rgba(0,0,0,.3);padding:12px}.map-info h3{color:#ddd;margin:0 0 8px;font-size:16px;font-weight:500}.map-meta{color:#999;justify-content:space-between;align-items:center;font-size:12px;display:flex}.difficulty{color:#4a9eff;text-transform:capitalize;background:rgba(74,158,255,.2);border-radius:12px;padding:2px 8px}.difficulty.easy{color:#4caf50;background:rgba(76,175,80,.2)}.difficulty.medium{color:#ff9800;background:rgba(255,152,0,.2)}.difficulty.hard{color:#f44336;background:rgba(244,67,54,.2)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}