@import"https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700&display=swap";.home{min-height:100dvh;background:linear-gradient(180deg,#87ceeb,#98d8c8 60%,#7cb342 85%,#5d4037);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.home-bg{position:absolute;top:0;left:0;width:100%;height:40%;pointer-events:none}.cloud{position:absolute;font-size:4rem;animation:float 6s ease-in-out infinite}.cloud-1{top:10%;left:10%;animation-delay:0s}.cloud-2{top:15%;right:15%;animation-delay:2s}.sun{position:absolute;top:8%;right:10%;font-size:5rem;animation:pulse 3s ease-in-out infinite}.bird{position:absolute;font-size:2rem;animation:fly 8s linear infinite}.bird-1{top:20%;left:-5%;animation-delay:0s}.bird-2{top:25%;left:-5%;animation-delay:3s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes fly{0%{transform:translate(0)}to{transform:translate(120vw)}}.home-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:.5rem}.title-container{text-align:center;animation:slideDown 1s ease-out}.title-icon{font-size:3rem;display:block;margin-bottom:.3rem;animation:bounce 2s ease-in-out infinite}.title{font-size:2.5rem;color:#2e7d32;text-shadow:3px 3px 0 #fff,5px 5px 0 rgba(0,0,0,.1);margin:0;font-family:Fredoka One,Comic Sans MS,cursive}.subtitle{font-size:1.2rem;color:#1565c0;text-shadow:2px 2px 0 #fff;margin:.3rem 0 0}.earth{font-size:5rem;animation:rotate 20s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.btn-start{background:linear-gradient(135deg,#4caf50,#8bc34a);color:#fff;border:none;padding:.9rem 2.5rem;font-size:1.3rem;border-radius:50px;cursor:pointer;box-shadow:0 5px #2e7d32,0 6px 12px #0003;transition:all .2s;font-family:inherit;font-weight:700;animation:slideUp 1s ease-out .5s both}.btn-start:hover{transform:translateY(-3px);box-shadow:0 9px #2e7d32,0 12px 20px #00000040}.btn-start:active{transform:translateY(3px);box-shadow:0 3px #2e7d32,0 5px 10px #0003}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.ground{position:absolute;bottom:0;width:100%;height:15%;background:linear-gradient(180deg,#7cb342,#5d4037);display:flex;justify-content:space-around;align-items:flex-end}.grass{font-size:2rem;transform-origin:bottom center;animation:sway 3s ease-in-out infinite}.grass-1{animation-delay:0s}.grass-2{animation-delay:.5s}.grass-3{animation-delay:1s}.grass-4{animation-delay:1.5s}.grass-5{animation-delay:2s}@keyframes sway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@media (max-width: 600px){.title{font-size:2rem}.subtitle{font-size:1.1rem}.earth{font-size:4rem}.title-icon{font-size:3.5rem}.btn-start{padding:1rem 2rem;font-size:1.2rem;min-height:56px;min-width:200px}.cloud{font-size:2.5rem}.sun{font-size:3rem}.grass{font-size:1.5rem}}@media (max-width: 380px){.title{font-size:1.7rem}.subtitle{font-size:1rem}.title-icon{font-size:3rem}.earth{font-size:3.5rem}}.menu{min-height:100vh;background:linear-gradient(180deg,#87ceeb,#98d8c8 60%,#7cb342 85%,#5d4037);padding:1rem}.menu-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#fffc;border-radius:15px;margin-bottom:1.5rem;box-shadow:0 4px 15px #0000001a}.menu-header h1{margin:0;font-size:1.5rem;color:#2e7d32}.btn-back{background:#4caf50;color:#fff;border:none;padding:.6rem 1.2rem;border-radius:25px;cursor:pointer;font-size:.9rem;font-weight:700;transition:all .2s}.units-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;max-width:1200px;margin:0 auto}.unit-card{background:#fff;border-radius:20px;padding:1rem;cursor:pointer;transition:all .3s;border:3px solid transparent;text-align:left;box-shadow:0 4px 15px #0000001a;display:flex;flex-direction:row;align-items:center;gap:1rem;min-height:80px}.unit-card:hover{transform:translateY(-3px);border-color:var(--unit-color);box-shadow:0 8px 25px #00000026}.unit-card:active{transform:scale(.98)}.unit-icon{font-size:2.5rem;background:linear-gradient(135deg,var(--unit-color) 0%,rgba(255,255,255,.3) 100%);width:56px;height:56px;min-width:56px;border-radius:50%;display:flex;align-items:center;justify-content:center}.unit-info{flex:1;min-width:0}.unit-number{font-size:.75rem;color:#666;text-transform:uppercase;letter-spacing:1px}.unit-title{margin:.1rem 0 0;font-size:1rem;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unit-board{display:none}@media (max-width: 600px){.menu{padding:.5rem}.units-grid{grid-template-columns:1fr;gap:.75rem}.menu-header{padding:.75rem;margin-bottom:1rem;border-radius:12px}.menu-header h1{font-size:1rem}.btn-back{padding:.5rem 1rem;font-size:.85rem;border-radius:20px;min-height:44px}.spacer{width:60px}.unit-card{padding:.75rem;min-height:72px}.unit-icon{font-size:2rem;width:48px;height:48px;min-width:48px}.unit-title{font-size:.95rem}}.game{height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;background:linear-gradient(180deg,#87ceeb,#98d8c8 60%,#7cb342 85%,#5d4037)}.game-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#fffc;border-radius:15px;margin:.5rem;box-shadow:0 4px 15px #0000001a;flex-shrink:0;z-index:50}.game-title{margin:0;font-size:1.3rem;color:#2e7d32;text-align:center}.spacer{width:80px}.btn-back{background:#4caf50;color:#fff;border:none;padding:.6rem 1.2rem;border-radius:25px;cursor:pointer;font-size:.9rem;font-weight:700;transition:all .2s;font-family:Nunito,Comic Sans MS,cursive;min-height:44px;display:flex;align-items:center}.btn-back:hover{background:#388e3c;transform:scale(1.05)}.board-area{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:0;min-height:0;overflow:hidden;position:relative}.board{width:100%;max-width:min(70vw,60vh);aspect-ratio:1;background:transparent;border-radius:20px;position:relative;box-shadow:none;border:none;overflow:visible}.path-lines{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.path-svg{width:100%;height:100%;overflow:visible}.path-svg line{stroke:#c8983259;stroke-width:4;stroke-dasharray:8,5;stroke-linecap:round}.box{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(145deg,#ffe57f,#ffd54f 60%,#ffca28);border:3px solid #D84315;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 8px #5a280033,inset 0 1px #ffffff80;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;z-index:2;width:14%;height:14%}.box:hover{transform:translate(-50%,-50%) scale(1.08)}.box.player{background:linear-gradient(145deg,#ff8a65,#ff5722);border-color:#bf360c;border-width:4px;transform:translate(-50%,-50%) scale(1.22);box-shadow:0 8px 24px #c83c0066;z-index:10}.box.passed{background:linear-gradient(145deg,#c8e6c9,#a5d6a7);border-color:#33691e}.box.future{background:linear-gradient(145deg,#ffe57f,#ffd54f 60%,#ffca28);border-color:#d84315}.box-icon{font-size:clamp(1.2rem,4.5vmin,2.6rem);line-height:1}.box-number{font-family:Lora,serif;font-size:clamp(.6rem,1.8vmin,1rem);font-weight:700;color:#5d4037;opacity:.9;line-height:1;margin-top:1px}.player-token{position:absolute;bottom:-.9rem;font-size:clamp(1.4rem,5vmin,3rem);animation:bounce .55s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.dice{width:clamp(70px,18vw,110px);height:clamp(70px,18vw,110px);background:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,filter .12s;touch-action:manipulation;-webkit-user-select:none;user-select:none}.dice:hover{transform:scale(1.1);filter:drop-shadow(0 6px 12px rgba(0,0,0,.3))}.dice:active{transform:scale(.92)}.dice.rolling{animation:shake .07s linear infinite}@keyframes shake{0%,to{transform:rotate(-10deg) scale(1.08)}50%{transform:rotate(10deg) scale(1.08)}}.dice-face{width:clamp(80px,20vw,120px);height:clamp(53px,13.3vw,80px);background:linear-gradient(145deg,#fff,#f0f0f0);border-radius:12px;border:3px solid #bbb;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);padding:10px 12px;gap:6px 8px;box-shadow:0 6px 20px #00000040,inset 0 1px #ffffffe6}.dice-dot{width:clamp(14px,3.5vw,20px);height:clamp(14px,3.5vw,20px);border-radius:50%;background:#ddd;transition:background .1s;align-self:center;justify-self:center}.dice-dot.filled{background:radial-gradient(circle,#c62828,#b71c1c);box-shadow:0 2px 4px #0000004d}.dice-placeholder{font-size:clamp(3rem,12vmin,5.5rem);filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}.controls{position:absolute;bottom:10rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;background:transparent;z-index:20}.start-message{background:#fffcf0f2;padding:.35rem 1.1rem;border-radius:14px;box-shadow:0 4px 20px #5a320a2e;border:2px solid #FFC107;white-space:nowrap;animation:pulse 2.2s ease-in-out infinite}.start-message p{font-size:clamp(.85rem,2.5vmin,1rem);color:#5d4037;font-weight:700;margin:0}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@media (max-width: 500px){.game-header{padding:.6rem .75rem;margin:.4rem;border-radius:12px}.game-title{font-size:1.1rem}.btn-back{padding:.5rem 1rem;font-size:.85rem;border-radius:20px;min-height:40px}.spacer{width:60px}.board{max-width:min(92vw,88vh)}.box{border-width:2px}}@media (max-width: 380px){.box-number{display:none}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.modal-content{background:#fff;border-radius:24px;padding:1.5rem;max-width:350px;width:100%;text-align:center;animation:modalIn .3s ease-out;box-shadow:0 15px 40px #00000040}@keyframes modalIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.modal-icon{font-size:3.5rem;margin-bottom:.5rem}.modal-content h2{margin:0 0 .4rem;color:#33691e;font-size:1.3rem}.modal-content p{margin:0 0 1rem;color:#555;font-size:1rem;line-height:1.35}.btn-continue{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border:none;padding:.8rem 1.8rem;font-size:1.1rem;border-radius:28px;cursor:pointer;font-weight:700;box-shadow:0 4px #2e7d32,0 6px 15px #0003;transition:all .2s;min-height:50px;touch-action:manipulation;font-family:Nunito,Comic Sans MS,cursive}.btn-continue:hover{transform:translateY(-2px)}.btn-continue:active{transform:translateY(2px);box-shadow:0 2px #2e7d32}.winner-overlay .modal-content.winner{background:linear-gradient(145deg,#fff9c4,#ffecb3);border:4px solid #FFD54F}.trophy{font-size:4rem;animation:trophyBounce .8s ease-in-out infinite}@keyframes trophyBounce{0%,to{transform:scale(1) rotate(-5deg)}50%{transform:scale(1.08) rotate(5deg)}}.winner-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;margin:.75rem 0}.winner-icon{font-size:1.5rem}.unit-name{font-weight:700;color:var(--unit-color)!important}.winner-buttons{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.summary-list{max-height:60vh;overflow-y:auto;text-align:left;margin:.5rem 0}.summary-item{display:flex;align-items:flex-start;gap:.75rem;padding:.5rem 0;border-bottom:1px solid rgba(0,0,0,.1)}.summary-item:last-child{border-bottom:none}.summary-icon{font-size:1.5rem;flex-shrink:0}.summary-text{flex:1}.summary-text strong{font-size:.9rem;color:#333;display:block;margin-bottom:.2rem}.summary-text p{font-size:.8rem;color:#666;margin:0;line-height:1.4}.app-footer{width:100%;padding:5% 5% 7%;text-align:center;box-sizing:border-box}.app-footer p{margin:0 auto;max-width:40rem;font-family:Nunito,Comic Sans MS,cursive;font-size:clamp(.8rem,3vw,1rem);font-weight:700;color:#fff;line-height:1.4;text-shadow:0 1px 4px rgba(0,0,0,.4)}.app-footer p span{opacity:.8;font-weight:400}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{font-family:Nunito,Comic Sans MS,cursive;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(180deg,#87ceeb,#98d8c8 60%,#7cb342 85%,#5d4037)}#root{height:100%}h1,h2{font-family:Fredoka One,Comic Sans MS,cursive}.app{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#87ceeb,#98d8c8 60%,#7cb342 85%,#5d4037)}.app>*:not(.app-footer){flex:1}button{font-family:inherit}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#e8f5e9}::-webkit-scrollbar-thumb{background:#4caf50;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#388e3c}