*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f6e7d4;color:#543825;font-family:system-ui,'Arial',sans-serif}body{display:flex;justify-content:center}#app{width:min(100%,460px);height:100dvh;min-height:480px;display:flex;flex-direction:column;padding:8px;gap:5px;background:#fff6e8;box-shadow:0 0 35px #8a5b3433}header{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}header>div{background:#f0d7b5;border:2px solid #c78f55;border-radius:10px;text-align:center;padding:4px 1px}small{display:block;font-size:10px;letter-spacing:1px}strong{font-size:clamp(15px,4.5vw,22px);font-variant-numeric:tabular-nums}.lives{text-align:center;color:#d36c59;letter-spacing:10px;font-size:15px;height:20px}#arena{flex:1;min-height:0;position:relative;overflow:hidden;border:4px solid #a77343;border-radius:13px;background:#f7e6c6}canvas{width:100%;height:100%;display:block;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#422b2088;padding:12px}.overlay.hidden{display:none}.panel{width:100%;max-height:100%;overflow:auto;text-align:center;background:#fff5e3;border:4px solid #bd8553;border-radius:20px;padding:15px 12px;box-shadow:0 6px 0 #70492c}h1{font-size:clamp(24px,7vw,34px);margin:3px 0}h2{margin:4px 0}p{margin:8px 0;line-height:1.5}.subtitle{font-size:13px;color:#a26b43}.rules{font-size:13px;background:#f6e4ca;border-radius:10px;padding:9px;text-align:left;line-height:1.65}.start{background:#e98b51;color:#fff;border:0;border-radius:15px;font-size:23px;font-weight:900;padding:12px 30px;margin-top:10px;box-shadow:0 4px 0 #ad5c32;cursor:pointer}footer{display:grid;grid-template-columns:1fr 1fr;gap:9px}.punch{min-height:clamp(65px,12vh,95px);border:3px solid #a9683d;border-radius:17px;background:#f6b574;color:#55311d;font-weight:900;font-size:clamp(16px,4.8vw,22px);touch-action:manipulation;user-select:none;cursor:pointer;box-shadow:0 5px 0 #b77a48}.punch:active,.punch.active{transform:translateY(4px);box-shadow:0 1px 0 #b77a48;background:#ffcc8d}kbd{display:block;font-size:11px;font-weight:400}.hint{text-align:center;font-size:10px;margin:0;line-height:1.3}.stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;text-align:left;margin:10px 0}.stats span{background:#f6e4ca;padding:8px;border-radius:8px;font-size:13px}@media(max-height:610px){.panel{padding:7px}.rules{font-size:11px;padding:5px}.start{padding:7px 20px}.hint{display:none}footer .punch{min-height:58px}}