:root{--left-margin-top:0px;--left-margin-right:0px;--left-margin-bottom:0px;--left-margin-left:100px;--center-margin-top:10px;--center-margin-right:0px;--center-margin-bottom:5px;--center-margin-left:0px;--right-margin-top:-90px;--right-margin-right:0px;--right-margin-bottom:0px;--right-margin-left:-100px}.kingdom{position:absolute;justify-content:center}.kingdom,.kingdom-content{display:flex;align-items:center}.kingdom-content{flex-direction:column}.hexagon{width:100px;height:55px;background-color:#eee;position:relative;transform:rotate(90deg)}.hexagon:after,.hexagon:before{content:"";position:absolute;width:0;border-left:50px solid transparent;border-right:50px solid transparent}.hexagon:before{bottom:100%;border-bottom:27.5px solid #eee}.hexagon:after{top:100%;border-top:27.5px solid #eee}.hexagon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}.kingdom-name{font-weight:700;font-size:24px;color:#000}.kingdom-energy{font-size:12px;color:#000}.defense{width:60px;height:10px;border:2px solid #eee;margin:0}.attack{width:0;height:0;border:15px solid transparent;border-top:none;border-bottom:30px solid #eee;margin:0;transform:rotate(180deg)}.attack.filled{border-bottom-color:red}.defense.filled{background-color:blue}.left{transform:rotate(120deg);margin:var(--left-margin-top) var(--left-margin-right) var(--left-margin-bottom) var(--left-margin-left)}.left.attack{margin:0 -20px -20px 140px}.center{margin:var(--center-margin-top) var(--center-margin-right) var(--center-margin-bottom) var(--center-margin-left)}.right{transform:rotate(60deg);margin:var(--right-margin-top) var(--right-margin-right) var(--right-margin-bottom) var(--right-margin-left)}.right.attack{transform:rotate(240deg);margin:0 160px 0 0}.game-board{position:relative;width:600px;height:600px;margin:0 auto}@media (max-width:640px){.game-board{zoom:.8}}@media (max-width:511px){.game-board{zoom:.6}}@media (max-width:391px){.game-board{zoom:.54}}