.dice{box-sizing:border-box;width:clamp(4rem,30vw,20vh);aspect-ratio:1;padding:.25rem;background-color:gray;border-radius:1rem;cursor:pointer;color:#000}.dice svg{display:block;width:100%;height:100%}html,body{background:#000;color:#fff;margin:0;padding:0;height:100%;font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}#app{height:100%}#main-screen{text-align:center;max-width:480px;margin:auto;display:flex;flex-direction:column;padding:1rem}#content{max-width:480px;margin:auto;padding:1rem;color:#ccc}#content h1{color:#10ac84}#content h2,#content h3{color:#eee}#sides{display:flex;justify-content:space-between;gap:.5rem}.loss{text-align:center;width:1.5rem;padding:.25rem;margin-bottom:.25rem;position:relative;width:100%;font-size:10vh}.loss__total{right:0;font-size:.5em}.dice{margin-bottom:1rem}.dice.disabled{opacity:.3}#attacker .dice{transition:.2s ease-out;background:#ee5253}#attacker .loss{color:#ee5253}#defender .dice{background:#2e86de}#defender .loss{color:#2e86de}.button{padding:.6em clamp(1rem,1em,10vw);line-height:1em;border-radius:1rem;border:0;background:#10ac84;color:#000;font-weight:700;outline:0;cursor:pointer}.button:active{background:#0c7e61}#button{flex-grow:1;font-size:5vh;width:100%;display:block}#toggles{display:flex;flex-wrap:wrap;justify-content:center;margin:1rem auto}.toggle-btn{background:none;border:0;color:#888;font-size:2vh;padding:1rem;cursor:pointer;outline:0;display:flex;align-items:center;justify-content:center;gap:.4rem}.toggle-btn__dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:currentColor}.toggle-btn.active{color:#10ac84}#reinforcement-tracker{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:.25rem}.reinf-btn{width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid #10ac84;background:none;color:#10ac84;font-size:1.2rem;cursor:pointer;outline:0;display:flex;align-items:center;justify-content:center}.reinf-btn:active{background:#10ac84;color:#000}.reinf-info{display:flex;flex-direction:column;align-items:center;color:#ccc;font-size:2vh;line-height:1.4}.reinf-troops{color:#10ac84;font-weight:700;font-size:2.5vh}#about{font-size:2vh;justify-content:space-between;gap:1rem;padding:1rem 0;position:relative}#about h1{color:#10ac84;font-weight:700;font-size:1rem;margin:0}#about a{color:#666}#buttons{position:sticky;text-align:right;bottom:1.5rem;right:1.5rem;left:1.5rem}#scroll-top{width:3rem;height:3rem;border-radius:50%;border:0;background:#10ac84;color:#000;font-size:1.5rem;font-weight:700;cursor:pointer;outline:0;z-index:100}#scroll-top:active{background:#0c7e61}.cheatsheet{margin-top:2rem;border-top:1px solid #333;padding-top:1rem}.cheatsheet h3{margin:1.2rem 0 .4rem}.cheatsheet ol,.cheatsheet ul{margin:0;padding-left:1.2rem}.cheatsheet li{margin-bottom:.2rem}.cheatsheet p{margin:.3rem 0}.cheatsheet table{width:100%;border-collapse:collapse;font-size:.9rem;margin:.4rem 0}.cheatsheet th,.cheatsheet td{border:1px solid #444;padding:.3rem .5rem;text-align:center}.cheatsheet th{background:#1a1a1a;color:#10ac84;font-weight:600}.cheatsheet td:first-child{text-align:left}