*{box-sizing:border-box}body{margin:0;background:#f0f4f4;color:#2d4955;font-family:Arial,sans-serif;letter-spacing:0}header{max-width:1160px;margin:auto;padding:22px 24px 16px;display:flex;align-items:center;justify-content:space-between}small{font-size:10px;color:#487f70;font-weight:bold}h1{font-size:27px;margin:7px 0 0}button{font:inherit;cursor:pointer;touch-action:none;border:1px solid #c1d5cc;background:white;color:#2f6158;border-radius:5px;padding:10px 16px}button:hover{background:#e4eee8}button:focus-visible{outline:3px solid #e69064;outline-offset:3px}#pause{width:43px;height:43px;padding:0;font-weight:bold}main{max-width:1160px;margin:0 auto;padding:0 24px}.hud{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:bold;padding:12px 0 15px}#timer{color:#ae594c}canvas{width:100%;height:min(65vh,620px);display:block;background:#b7d4b5;border-radius:6px;touch-action:none}.bottom{min-height:61px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}#cross{background:#347f75;color:white;font-size:12px;white-space:nowrap}kbd{font:10px Arial;opacity:.65;margin-left:10px}.pad{display:grid;grid-template-columns:repeat(3,45px);gap:5px;justify-content:center;padding:0 0 16px}.pad button{height:40px;padding:0;font-size:22px}.pad button:first-child{grid-column:2}.pad button:nth-child(2){grid-column:1}#overlay{position:fixed;inset:0;background:#eff5f1ee;backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}#overlay[hidden]{display:none}h2{font-size:32px;margin:16px 0 0}#detail{font-size:15px;line-height:1.6;max-width:350px}#continue{background:#337e73;color:white;border:0;font-weight:bold;margin-top:15px;padding:14px 26px}@media(max-width:600px){header{padding:17px 16px 12px}h1{font-size:21px}small{font-size:8px}main{padding:0 12px}.hud{font-size:10px}canvas{height:55vh;min-height:340px}.bottom{font-size:10px;min-height:68px}#cross{font-size:11px;padding:10px}kbd{display:none}h2{font-size:26px}}
.hud{flex-wrap:wrap;align-items:center}#health{color:#b33e59;white-space:nowrap}.bottom #message{min-width:0}#cross{min-width:125px}#cross:disabled{opacity:.7;cursor:default}
@media(max-width:600px){.hud>span{flex-basis:calc(50% - 8px)}.hud>span:nth-child(even){text-align:right}}