*{box-sizing:border-box;margin:0;padding:0}:root{--vh: 1vh}html{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;background:#4a5d3a;color:#eee;margin:0;padding:0;min-height:100vh;min-height:-webkit-fill-available;overflow-x:hidden}.container{width:100%;max-width:400px;margin:0 auto;padding:0;text-align:center;position:relative;min-height:100vh;min-height:-webkit-fill-available}h1{font-size:2rem;margin-bottom:30px;color:#f39c12}.header{position:fixed;top:0;left:0;right:0;height:80px;padding-top:env(safe-area-inset-top);display:flex;align-items:center;justify-content:space-between;z-index:999;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));background:transparent}.header-btn{background:transparent;border:none;font-size:2rem;cursor:pointer;transition:all .3s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));width:50px;height:50px;display:flex;align-items:center;justify-content:center;padding:0}.header-btn:hover{transform:scale(1.2);filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}.header-center{display:flex;align-items:center;justify-content:center;gap:15px}.header-icon{font-size:2rem;display:flex;align-items:center;justify-content:center;height:50px;line-height:1}.screen{display:none;animation:fadeIn .3s ease-in;padding-top:calc(80px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom));padding-left:20px;padding-right:20px;min-height:100vh;min-height:-webkit-fill-available}.screen.active{display:block}.screen-content{width:100%;max-width:360px;margin:0 auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#battle-screen .screen-content{display:flex;flex-direction:column;height:calc(var(--vh, 1vh) * 100 - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));justify-content:space-between}#battle-screen h1{margin:10px 0;text-align:center}#setup-attacker,#setup-defender{background-attachment:fixed}#setup-attacker .screen-content,#setup-defender .screen-content{justify-content:flex-start;padding-top:40px}.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0}.color-option{width:60px;height:60px;border-radius:10px;border:3px solid transparent;cursor:pointer;transition:all .3s ease}.color-option:hover{transform:scale(1.1)}.color-option.selected{border-color:#fff;box-shadow:0 0 20px #ffffff80}.input-group{margin:30px 0}label{font-size:1.2rem;display:block;margin-bottom:15px}.army-selector label{text-align:center}input[type=number]{width:120px;padding:15px;font-size:1.5rem;text-align:center;background:#16213e;border:2px solid #3282b8;border-radius:10px;color:#fff}.army-selector{margin:20px 0}.army-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px auto;padding:0;max-width:320px}.army-btn{padding:30px;font-size:2rem;font-weight:700;background:#ffffff1a;border:3px solid rgba(255,255,255,.3);border-radius:15px;color:#fff;cursor:pointer;transition:all .3s ease;min-height:80px;display:flex;align-items:center;justify-content:center}.army-btn:hover{background:#fff3;transform:scale(1.05);border-color:#ffffff80}.army-btn.selected{background:#ffffff4d;box-shadow:0 0 20px #fff9;border-color:#fff}@media (min-width: 600px){.army-buttons{grid-template-columns:repeat(5,1fr)}.army-btn{padding:20px;font-size:1.5rem;min-height:60px}}.btn{background:#3282b8;color:#fff;border:none;padding:18px 40px;font-size:1.2rem;border-radius:10px;cursor:pointer;transition:all .3s ease;font-weight:600;min-height:56px}.btn:hover{background:#2563a0;transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:#e74c3c}.btn-secondary:hover{background:#c0392b}#battle-screen .player-info{display:flex;justify-content:space-between;gap:15px;margin:10px 0}.player-card{padding:15px 12px;border-radius:15px;flex:1;text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:100px}.player-card h3{margin-bottom:10px;font-size:1.4rem;font-weight:600}.player-card.card-winner{animation:winnerGlow 1.5s ease-out;box-shadow:0 0 30px #2ecc71cc}.player-card.card-loser{animation:loserGlow 1.5s ease-out;box-shadow:0 0 30px #e74c3ccc}.player-card.card-tie{animation:tieGlow 1.5s ease-out;box-shadow:0 0 30px #f1c40fcc}@keyframes winnerGlow{0%{box-shadow:0 0 #2ecc7100}50%{box-shadow:0 0 40px #2ecc71}to{box-shadow:0 0 30px #2ecc71cc}}@keyframes loserGlow{0%{box-shadow:0 0 #e74c3c00}50%{box-shadow:0 0 40px #e74c3c}to{box-shadow:0 0 30px #e74c3ccc}}@keyframes tieGlow{0%{box-shadow:0 0 #f1c40f00}50%{box-shadow:0 0 40px #f1c40f}to{box-shadow:0 0 30px #f1c40fcc}}.army-count{font-size:2.5rem;font-weight:700;margin:10px 0;position:relative}#battle-screen .dice-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:10px 0;min-height:140px}.die{width:45px;height:45px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;box-shadow:0 4px 10px #0000004d;opacity:0;animation:rollDice .5s ease-out forwards}@media (min-width: 600px){.die{width:50px;height:50px;font-size:1.8rem}}.attacker-die{background:#c00;color:#fff;position:relative}.defender-die{background:#06c;color:#fff;position:relative}.die.winner{box-shadow:0 0 20px #2ecc71cc;border:3px solid #2ecc71}.die.loser{box-shadow:0 0 20px #e74c3ccc;border:3px solid #e74c3c}.vs-separator{font-size:1.2rem;margin:0;color:#f39c12;font-weight:700;line-height:1}.dice-comparison{display:flex;align-items:center;justify-content:center;gap:8px;margin:5px 0;position:relative}.dice-row{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}.attacker-dice-group,.defender-dice-group{display:flex;gap:8px;align-items:center;padding:6px 10px;border-radius:8px;background:#ffffff0d}.attacker-dice-group{border:2px solid rgba(204,0,0,.3)}.defender-dice-group{border:2px solid rgba(0,102,204,.3)}@media (max-width: 400px){.dice-comparison{flex-direction:column;gap:5px}.vs-separator{font-size:1.2rem;margin:5px 0}}.comparison-arrow{font-size:1.5rem;color:#2ecc71;animation:bounce .5s ease-out}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes rollDice{0%{transform:rotate(0) scale(0);opacity:0}50%{transform:rotate(180deg) scale(1.2);opacity:1}to{transform:rotate(360deg) scale(1);opacity:1}}#battle-screen .result-message{font-size:1.3rem;padding:20px;margin:10px 0;background:#ffffff1a;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;min-height:80px;line-height:1.3}.result-message.attacker-wins{background:#c003;border:2px solid #cc0000}.result-message.defender-wins{background:#06c3;border:2px solid #0066cc}.result-message.both-lose{background:#f1c40f33;border:2px solid #f1c40f}.result-message strong{display:inline}.battle-info{font-size:.9rem;opacity:.8;margin-top:5px}#battle-screen .button-container{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:15px;width:100%;max-width:320px;margin:10px auto}.players-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:30px 0}@media (max-width: 600px){.players-grid{grid-template-columns:repeat(2,1fr)}}.player-color-card{padding:20px;border-radius:15px;border:3px solid transparent;display:flex;align-items:center;justify-content:center;min-height:80px;transition:all .3s ease}.player-color-card:hover{border-color:#ffffff80;transform:scale(1.05)}.player-name-on-card{width:100%;padding:10px;font-size:1rem;background:#ffffffe6;border:none;border-radius:8px;color:#333;text-align:center;font-weight:700}.player-name-on-card::placeholder{color:#666;font-weight:400}.player-selection{display:flex;flex-direction:column;gap:20px;margin:30px 0}.player-select-btn{background:#ffffff0d;border:2px solid #3282b8;border-radius:15px;padding:25px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:space-between}.player-select-btn:hover{background:#3282b833;transform:translateY(-2px)}.player-name-display{font-size:1.3rem;color:#fff}.player-color-indicator{width:40px;height:40px;border-radius:10px;border:2px solid #fff}.settings-section{margin:30px 0;padding:20px;background:#ffffff0d;border-radius:15px}.settings-section h2{font-size:1.3rem;margin-bottom:20px;color:#f39c12}.language-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.language-btn{display:flex;align-items:center;gap:10px;padding:15px 25px;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:10px;color:#fff;font-size:1.1rem;cursor:pointer;transition:all .3s ease}.language-btn:hover{background:#fff3;transform:translateY(-2px)}.language-btn.active{background:#3282b84d;border-color:#3282b8;box-shadow:0 0 20px #3282b880}