@import"https://fonts.googleapis.com/css2?family=Cinzel&display=swap";html,body{margin:0;padding:0;height:100%;width:100%;font-family:Cinzel,serif;background:linear-gradient(160deg,#1a1a1a,#121212);color:#f5f5f5;display:flex;justify-content:center;align-items:center;overflow-x:hidden;box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.tracker{width:100%;max-width:100vw;display:flex;flex-direction:column;align-items:center;padding:1rem}.players{display:flex;flex-direction:column;align-items:center;width:100%}.player{width:100%;text-align:center;padding:1rem}.opponent{transform:rotate(180deg)}.hp{font-size:5rem;font-weight:700;color:#fc8;text-shadow:0 0 8px rgba(255,204,136,.4)}.controls button{font-size:1.5rem;margin:0 .75rem;padding:.5rem 1rem;border:none;border-radius:8px;background-color:#292929;color:#fff;cursor:pointer;transition:.3s ease;box-shadow:0 0 4px #fc83}.controls button:hover{background-color:#fc8;color:#121212}.time-phase{text-align:center;margin:1rem 0;padding:1rem;background-color:#222;border-radius:16px;border:1px solid rgba(255,255,255,.1);width:100%;box-shadow:inset 0 0 10px #ffcc881a}.phase-label{font-size:2rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .3s ease}.phase-label-icon{width:3rem;height:3rem;vertical-align:middle}.phase-label.rolling{opacity:.25;transform:scale(.9)}@media (orientation: landscape){.players{flex-direction:row;justify-content:space-between}.player{width:48%;padding:.5rem}.time-phase{width:100%;margin-top:1rem}.hp{font-size:6rem}}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-4px)}to{transform:translate(0)}}.phase-label.shake{animation:shake .4s ease-in-out infinite}