*{box-sizing:border-box;margin:0;padding:0}body{grid-template-rows:1fr auto;min-height:100vh;font-family:Times New Roman,Times,serif;display:grid}#main{grid-template-columns:1fr auto 1fr;place-items:center;display:grid}#game-frame{grid-template:".top.""left center right"1fr".bottom."/auto 1fr auto;gap:4px;display:grid}#game-top{flex-direction:row;grid-area:top;justify-content:space-between;align-items:center;display:flex}#game-left{flex-direction:column;grid-area:left;justify-content:flex-start;align-items:center;gap:8px;padding:8px;display:flex}#game-right{flex-direction:column;grid-area:right;justify-content:flex-start;align-items:center;gap:8px;padding:8px;display:flex}#game-bottom{flex-direction:row;grid-area:bottom;justify-content:flex-end;align-items:center;display:flex}#game-container{flex-direction:row;grid-area:center;justify-content:center;align-items:center;display:flex}#stud-details-container{align-items:left;border:1px solid #000;flex-direction:column;justify-content:center;width:auto;min-width:50px;height:auto;padding:5px;display:flex}#foot{border-top:1px solid #000;flex-direction:row;align-items:flex-start;gap:8px;padding:16px;display:flex}button{background-color:#0000;border:1px solid #000;justify-content:center;align-items:center;width:auto;height:32px;padding:0 15px;font-size:18px;transition:background .15s;display:flex}button:hover{cursor:pointer;background:#ff86ff}#button:disabled{opacity:.4;cursor:not-allowed;background:0 0}#baseplate-element{gap:2px;display:grid}.cell{border:1px solid #000;justify-content:center;align-items:center;width:64px;height:64px;font-size:18px;transition:background .15s;display:flex}.cell:hover{background:red}.cell--populated{cursor:pointer}.cell--populated:hover{filter:brightness(.85)}#spawn-status{color:#555;align-self:center;font-size:14px}.points-float{z-index:1000;pointer-events:none;color:#01b637;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:12px;animation:1.2s ease-out forwards points-float;position:fixed}@keyframes points-float{0%{opacity:1;transform:translate(0)rotate(0)}10%{opacity:1;transform:translate(-5px,-8px)rotate(-8deg)}20%{opacity:1;transform:translate(5px,-16px)rotate(8deg)}30%{opacity:1;transform:translate(-5px,-24px)rotate(-8deg)}40%{opacity:1;transform:translate(5px,-32px)rotate(8deg)}50%{opacity:.9;transform:translate(-5px,-40px)rotate(-8deg)}60%{opacity:.7;transform:translate(5px,-48px)rotate(8deg)}70%{opacity:.5;transform:translate(-3px,-56px)rotate(-4deg)}80%{opacity:.3;transform:translate(3px,-64px)rotate(4deg)}to{opacity:0;transform:translateY(-72px)rotate(0)}}