.touch{display:flex;align-items:center;gap:16px;margin:20px 0 0;padding:16px 24px;background:linear-gradient(135deg,#181e2b,#111620);border:1px solid #353849;border-radius:12px;-webkit-user-select:none;user-select:none;touch-action:none}.dpad{display:grid;grid-template-columns:54px 54px 54px;grid-template-rows:48px 48px 48px;gap:3px;touch-action:none}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}.pad-center{grid-area:2/2;display:grid;place-items:center;color:#a4a7bc;background:#2b3245;border-radius:5px;font-size:20px}.touch .dpad button{font-size:22px;padding:0;border-radius:8px;background:linear-gradient(#3b455d,#252d40);box-shadow:0 4px #080c13;border-color:#555f78}.touch .actions{align-items:center;gap:15px}.touch .actions button{width:82px;height:82px;border-radius:50%;padding:0;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#101521;font-weight:700;border:3px solid #ffffff44;box-shadow:0 6px #090c13,inset 0 3px #ffffff55}.actions button span{font-size:23px;font-weight:700}.touch .actions .punch{background:#66b7f6}.touch .actions .kick{background:#ffb04e}.touch .actions .jump{width:64px;height:64px;background:#c3b7ed;font-size:10px}.touch button.active,.touch button:active{transform:translateY(3px);filter:brightness(1.35);box-shadow:0 1px #080c13}.touch-hint{color:#7e899e;line-height:1.9;font-size:11px;letter-spacing:2px}.cabinet{aspect-ratio:16/9}.cabinet canvas{object-fit:contain}.cabinet:fullscreen .touch{position:absolute;bottom:10px;left:20px;right:20px;z-index:4;background:#10162277;border:0;padding:8px;pointer-events:none}.cabinet:fullscreen .touch button,.cabinet:fullscreen .dpad{pointer-events:auto}.cabinet:fullscreen .touch-hint{display:none}@media(max-width:650px){.touch{padding:12px 10px;gap:5px}.dpad{grid-template-columns:44px 44px 44px;grid-template-rows:42px 42px 42px}.touch-hint{display:none}.touch .actions{gap:7px}.touch .actions button{width:65px;height:65px;font-size:10px}.touch .actions .jump{width:49px;height:49px;font-size:9px}.actions button span{font-size:18px}.cabinet{aspect-ratio:16/9}#overlay h1{font-size:clamp(32px,9vw,55px);margin:8px 0}#overlay .eyebrow{font-size:8px;letter-spacing:1px}#message{font-size:10px;line-height:1.4;margin:6px}#overlay .start-note{display:none}.choices button{padding:8px;font-size:10px}.choices{margin:6px}main{padding:12px 10px}}@media(max-width:380px){.dpad{grid-template-columns:38px 38px 38px;grid-template-rows:38px 38px 38px}.touch .actions button{width:57px;height:57px}.touch .actions .jump{width:43px;height:43px}.touch .actions{gap:5px}}@media(orientation:landscape) and (max-height:600px){main{padding:8px 12px}header{margin-bottom:10px}.brand{font-size:17px}.cabinet{max-height:calc(100dvh - 185px);width:auto;aspect-ratio:16/9;margin:auto}.touch{padding:6px 18px;margin-top:8px}.dpad{grid-template-columns:34px 34px 34px;grid-template-rows:30px 30px 30px}.touch .actions button{width:64px;height:64px}footer,.bottom{display:none}}
