/* All touch geometry is relative to the existing central render window. */
.touch-guide { display: none; }
.reference-hud.reference-touch #touchControls {
 --stick-size: clamp(96px, calc(48px / var(--reference-scale, 1)), 118px);
 display: block; position: absolute; inset: 0; width: 100%; height: 100%;
 z-index: 8; padding: 0; margin: 0; pointer-events: none;
}
.reference-hud.reference-touch #touchControls .touch-side {
 position: absolute; bottom: 15%; width: var(--stick-size); height: var(--stick-size); pointer-events: none;
}
.reference-hud.reference-touch #touchControls .move-side { left: 10%; }
.reference-hud.reference-touch #touchControls .attack-side { right: 10%; }
.reference-hud.reference-touch #touchControls .joystick {
 position: relative; width: 100%; height: 100%; border: 3px double #b19b7a;
 border-radius: 50%; background: radial-gradient(circle,#25191cc9 35%,#0b0909de 66%);
 box-shadow: inset 0 0 0 6px #2a201b,0 2px 5px #0006;
 opacity: .4; pointer-events: auto; touch-action: none; user-select: none;
 transition: opacity .1s;
}
.reference-hud.reference-touch #touchControls .joystick.engaged { opacity: .7; }
.reference-hud.reference-touch #touchControls .joystick::before { content: ''; position: absolute; left: 13%; top: 50%; width: 74%; height: 1px; background: #a486653f; }
.reference-hud.reference-touch #touchControls .joystick::after { content: ''; position: absolute; left: 50%; top: 13%; width: 1px; height: 74%; background: #a486653f; }
.reference-hud.reference-touch #touchControls :is(#joystickKnob,#attackKnob) {
 position: absolute; left: 32%; top: 32%; width: 36%; height: 36%;
 border: 2px solid #998370; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#716050,#251c18);
 box-shadow: 0 2px 6px #0007; pointer-events: none; translate: none;
}
.reference-hud.reference-touch #touchControls #attackKnob { background: radial-gradient(circle at 35% 30%,#895144,#32191b); }
.reference-hud.reference-touch #touchBomb {
 position: absolute; left: auto; right: 14%; bottom: 39%; margin: 0;
 width: 58px; height: 58px; font-size: 22px; border: 2px solid #8b7561;
 background: #211917a6; color: #e3c6a2; opacity: .6; pointer-events: auto; touch-action: none;
}
.reference-hud.reference-touch #touchBomb small { display: block; font-size: 12px; line-height: 12px; }
.reference-hud.reference-touch #touchPause {
 position: absolute; top: 8px; right: 155px; width: 64px; height: 40px;
 border: 1px solid #8f7858; border-radius: 4px; background: #17100fbb;
 color: #dfc6a3; font: 18px 'KaiTi','Microsoft YaHei',serif; pointer-events: auto; touch-action: manipulation;
}
.reference-hud.reference-touch .control-strip { display: none; }
.reference-hud.reference-touch #pauseButton { display: none; }
.reference-hud.reference-touch .touch-guide {
 display: flex; position: absolute; left: 480px; top: 774px; width: 660px; height: 39px;
 z-index: 10; align-items: center; justify-content: space-around; margin: 0;
 color: #dfc7aa; font: 19px 'KaiTi','Microsoft YaHei',serif; pointer-events: none;
}
.reference-hud.reference-touch :is(#shopBuy,#shopRefresh) kbd { display: none; }
/* The existing purchase panel must not cover either thumbstick in a shop. */
.reference-hud.reference-touch #shopPanel { top: 10%; bottom: auto; }
body:not(.in-main-menu) #touchControls[hidden] { display: none; }