html,
 body {
     margin: 0;
     height: 100%;
     overflow: hidden;
     background: #111;
 }

 #overlay {
     position: fixed;
     inset: 0;
     display: grid;
     place-items: center;
     background: radial-gradient(ellipse at center, rgba(0, 0, 0, .65), rgba(0, 0, 0, .85));
     color: #fff;
     text-align: center;
     gap: 14px;
     padding: 24px;
     transition: opacity .2s ease;
 }

 #overlay.hidden {
     opacity: 0;
     pointer-events: none;
 }

 .icon-button {
     width: 96px;
     height: 96px;
     border-radius: 999px;
     border: 2px solid #39f;
     display: grid;
     place-items: center;
     cursor: pointer;
     user-select: none;
     box-shadow: 0 6px 24px rgba(0, 0, 0, .35), inset 0 0 24px rgba(51, 153, 255, .25);
     transition: transform .1s ease, box-shadow .2s ease, border-color .2s ease;
     background: linear-gradient(180deg, #0b2540, #081a2b);
 }

 .icon-button:hover {
     transform: translateY(-2px);
     border-color: #6bf;
 }

 .icon-button:active {
     transform: translateY(0);
 }

 .mouse-icon {
     font-size: 42px;
     line-height: 1;
     filter: drop-shadow(0 2px 8px rgba(51, 153, 255, .5));
 }

 .hint {
     font: 14px/1.4 system-ui, sans-serif;
     opacity: .9;
 }

 .hint kbd {
     background: #222;
     border: 1px solid #444;
     padding: 2px 6px;
     border-radius: 4px;
     font-weight: 600;
 }

 #stats {
     position: fixed;
     top: 8px;
     left: 8px;
     color: #9bd;
     font: 12px/1 system-ui;
     opacity: .8
 }