.splash-screen{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;background-color:#000;color:#fff;font-size:2em;opacity:1;position:absolute;top:0;left:0;z-index:1}.splash-screen{color:#fff;font-size:2em;opacity:1;transition:opacity .7s ease-in-out}.word{display:inline-block;opacity:0;margin:10px;font-size:3em;font-weight:900}@media (max-width: 768px){.splash-screen{font-size:1.5em}.word{margin:5px;font-size:2em}}@media (max-width: 480px){.splash-screen{font-size:1.2em}.word{margin:3px;font-size:1.5em}}.main-menu{position:relative;z-index:1}.header{display:flex;justify-content:space-between;align-items:center;padding:10px;position:absolute;top:0;width:100%}.options-button{background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;transition:transform .2s ease}.options-button:hover{transform:scale(1.1);color:#e96430d9}.profile-button{padding:10px 20px;font-size:1rem;color:#fff;background-color:#323232b3;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.profile-button:hover{background-color:#e96430d9}.play-button-container{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100%;display:flex;justify-content:center}.play-button{width:30%;padding:15px 40px;font-size:2rem;color:#fff;background-color:#cc7847cc;border:none;border-radius:10px;cursor:pointer;transition:background-color .3s ease,transform .2s ease}.play-button:hover{background-color:#e96430d9;transform:scale(1.1)}@media (min-width: 769px){.play-button{padding:10px 20px;font-size:2.2rem}.play-button-container{height:15%}}@media (max-width: 768px){.play-button{width:70%;padding:12px 30px;font-size:1.5rem}}@media (max-width: 480px){.play-button{width:80%;padding:10px 20px;font-size:1.2rem}}.back-button{position:absolute;top:10px;left:10px;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,color .3s ease}.back-button:hover{transform:scale(1.1);color:#e96430d9}.back-icon{font-size:1.5rem}.play-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;color:#fff;text-align:center;margin:0}.play-screen-button{display:block;margin:10px;padding:15px 30px;font-size:18px;cursor:pointer;background-color:#cc7847d9;color:#fff;border:none;border-radius:5px;transition:background-color .3s ease}.play-screen-button:hover{background-color:#e96430d9}.profile-screen img{width:150px;height:150px;border-radius:50%}.profile-screen,.settings-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;color:#fff;text-align:center;margin:0}.logout-button{display:block;margin:10px;padding:15px 30px;font-size:18px;cursor:pointer;background-color:#cc7847d9;color:#fff;border:none;border-radius:5px;transition:background-color .3s ease}.logout-button:hover{background-color:#e96430d9}.singleplayer-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;color:#fff;text-align:center;margin:0}.singleplayer-button{display:block;margin:10px;padding:15px 30px;font-size:18px;cursor:pointer;background-color:#cc7847d9;color:#fff;border:none;border-radius:5px;transition:background-color .3s ease}.singleplayer-button:hover{background-color:#e96430d9}.multiplayer-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;color:#fff;text-align:center;margin:0}.multiplayer-button{display:block;margin:10px;padding:15px 30px;font-size:18px;cursor:pointer;background-color:#cc7847d9;color:#fff;border:none;border-radius:5px;transition:background-color .3s ease}.multiplayer-button:hover{background-color:#e96430d9}.arena-menu{text-align:center;padding:20px;overflow-y:auto;max-height:100vh;box-sizing:border-box}@media (max-width: 768px){.map-selection{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px}.map-sliver-wrapper{height:120px}.map-name{font-size:16px}.arena-button{font-size:16px;padding:8px 16px}}.map-selection{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin:20px auto;max-width:1000px}.map-sliver-wrapper{height:150px;border:2px solid transparent;border-radius:10px;cursor:pointer;position:relative;overflow:hidden;background-color:#000;transition:transform .3s ease,box-shadow .3s ease}.map-sliver-wrapper:hover{transform:scale(1.05);box-shadow:0 0 15px #00f6ff80}.map-sliver-wrapper.selected{border-color:#00f6ff;box-shadow:0 0 15px #00f6ff}.map-sliver{display:flex;flex-direction:column;position:relative;top:0;height:100%}.map-sliver img{width:100%;height:100%;object-fit:cover;border-radius:10px}.map-sliver img:not([src]){display:none}.map-name{position:absolute;bottom:10px;left:20px;color:#fff;font-size:20px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.7)}.map-sliver-wrapper .arena-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}.map-sliver-wrapper.selected .arena-button{opacity:.8;pointer-events:auto;transform:translate(-50%,-50%) scale(1.1)}.arena-button{padding:10px 20px;font-size:18px;background-color:#6c757d;color:#fff;border:none;border-radius:5px;cursor:pointer;opacity:.5;transition:opacity .3s ease-in-out}.arena-button.active{background-color:#ce7e33;opacity:1}.arena-button.disabled{cursor:not-allowed}.map-page{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;overflow:hidden;position:relative}.map-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:1;pointer-events:auto}.start-battle-button-container{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;justify-content:center;width:100%;z-index:2}.start-battle-button{background-color:#4caf50;border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:pointer;border-radius:12px;box-shadow:0 4px #999;transition:.3s}.start-battle-button:disabled{background-color:#ddd;cursor:not-allowed}.start-battle-button:not(:disabled):hover{background-color:#45a049}.start-battle-button:not(:disabled):active{background-color:#3e8e41;box-shadow:0 2px #666;transform:translateY(2px)}.banner{position:fixed;top:0;left:50%;transform:translate(-50%);background-color:#000000b3;color:#fff;padding:10px;border-radius:10px;text-align:center;width:80%;max-width:600px;margin:20px auto 0;z-index:10}.banner-top-row,.banner-bottom-row{display:flex;justify-content:space-between;margin-bottom:5px}.banner-item{flex:1;text-align:center}.countdown-container{position:relative;height:10px;background-color:gray;border-radius:5px;overflow:hidden;margin-top:5px}.countdown-bar{height:100%;background-color:red;margin:0 auto}.time-left{margin-top:5px;font-weight:700;font-size:18px}.hamburger-menu{position:absolute;top:10px;right:10px;z-index:1}.hamburger-button{background-color:#333;color:#fff;font-size:24px;padding:10px;border:none;border-radius:5px;cursor:pointer}.menu-content{display:flex;flex-direction:column;position:absolute;top:40px;right:0;background-color:#fff;box-shadow:0 4px 8px #0000001a;border-radius:5px}.menu-content a{padding:10px;text-decoration:none;color:#000;border-bottom:1px solid #ddd}.menu-content a:hover{background-color:#f1f1f1}.menu-content a:last-child{border-bottom:none}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;font-size:20px;opacity:1;transition:opacity 1.2s ease-out}.loading-overlay.hidden{opacity:0;pointer-events:none}.loading-text{position:absolute;bottom:20px;left:20px;font-size:18px;font-family:Arial,sans-serif}button.start-battle-button{margin:0 auto;padding:10px 20px;font-size:16px}.planning-phase,.battle-phase,.income-phase{padding:20px;color:#fff}.unit-list,.units{margin-top:10px}.units{display:flex;justify-content:space-between}.unit-info{display:flex;flex-direction:column;align-items:flex-start;border:2px solid #000;padding:5px;position:absolute;bottom:5px;left:5px;background-color:#0003;border-radius:4px;box-shadow:0 4px 8px #0003}.unit-image{width:50px;height:50px;border-radius:50%}.unit-details{margin-left:10px}.debug-menu{display:flex;flex-direction:column;align-items:flex-start;border:2px solid #000;padding:5px;position:absolute;top:15px;left:15px;background-color:#0003;border-radius:4px;box-shadow:0 4px 8px #0003;color:#fff;transition:opacity .3s ease}.toggle-button{position:relative;top:5px;right:5px;background-color:#333;color:#fff;border:none;margin-left:10px;margin-bottom:10px;cursor:pointer;border-radius:5px}.menu{position:relative;top:5px;right:5px}.toggle-button:hover{background-color:#555}.debug-slot{width:60px;height:60px;border:1px solid #fff;margin:0 2px;padding:5px;text-align:center;background-color:#222;display:flex;justify-content:center;align-items:center;color:#fff;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hand-bar{display:flex;justify-content:space-evenly;position:absolute;bottom:10px;left:50%;transform:translate(-50%);background-color:#000c;padding:10px;z-index:10}.hand-slot{width:60px;height:60px;border:1px solid #fff;margin:0 2px;padding:5px;text-align:center;background-color:#222;display:flex;justify-content:center;align-items:center;color:#fff;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.unit-type{color:#fff}.empty-slot{color:#888}.pixi-canvas{position:fixed;top:0;left:0;z-index:0;width:100vw;height:100vh;display:block;pointer-events:auto}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background-color:#000;font-family:Arial,sans-serif}.main-content{position:relative;z-index:1;width:100vw;height:100vh;display:flex;flex-direction:column;pointer-events:none}.main-content *{pointer-events:auto}.auth-container{position:relative;display:flex;justify-content:center;align-items:center;height:100vh;background-color:#000}.auth-page-container{display:flex;justify-content:center;align-items:center;height:100vh;position:relative}.black-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#000;opacity:1;z-index:1}.auth-page{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px #0000001a;z-index:2;text-align:center}.auth-page h2{margin-bottom:20px}.auth-page input{width:90%;padding:10px;margin:10px 0;border:1px solid #ccc;border-radius:4px}.auth-page button{width:100%;padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;margin:5px 0}.auth-page button:hover{background-color:#0056b3}.error-message{color:red;margin-bottom:10px}.collection-page{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;color:#fff;text-align:center;margin:0}.collection-page-button{display:block;margin:10px;padding:15px 30px;font-size:18px;cursor:pointer;background-color:#cc7847d9;color:#fff;border:none;border-radius:5px;transition:background-color .3s ease}.collection-page-button:hover{background-color:#e96430d9}