/* Thumb controls share the stone, parchment and muted gold of the arena UI. */
#touch-controls[hidden],#landscape-gate:not([open]){display:none!important}
#touch-controls{position:fixed;inset:0;z-index:36;pointer-events:none;user-select:none;-webkit-user-select:none;touch-action:none}
#touch-controls [data-touch]{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}
#touch-look{position:absolute;inset:0 0 0 29%;z-index:-1}
#touch-stick{position:absolute;width:112px;height:112px;left:max(24px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));border:1px solid #d7c29366;border-radius:50%;background:#101b254a;box-shadow:inset 0 0 0 12px #101b252c;display:grid;place-items:center}
#touch-stick:after{content:'';position:absolute;inset:16px;border:1px solid #d7c29324;border-radius:50%}
#touch-stick i{width:43px;height:43px;border:1px solid #d7c29399;background:#15232dbb;border-radius:50%;pointer-events:none;will-change:transform}
#touch-stick span{position:absolute;bottom:-17px;color:#e1d6b988;font-size:10px;letter-spacing:1px;text-transform:uppercase}
#touch-stick.sprinting{border-color:#94a394}
.touch-combat,.touch-movement,.touch-top{position:absolute;display:flex;gap:5px}
.touch-combat{bottom:max(14px,env(safe-area-inset-bottom));right:max(16px,env(safe-area-inset-right));flex-direction:column}
.touch-combat>div{display:flex;gap:5px}
.touch-movement{left:max(14px,env(safe-area-inset-left));bottom:157px}
.touch-top{right:max(16px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top))}
#touch-controls button{width:62px;min-height:53px;margin:0;padding:4px 2px 3px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;border:1px solid #d7c29366;border-radius:2px;background:#101b25a8;color:#e1d6b9;box-shadow:inset 0 0 0 2px #15232d55;text-transform:uppercase;font-size:10px;letter-spacing:0;line-height:1.1;transition:background .08s,border-color .08s}
#touch-controls button svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:miter;pointer-events:none}
#touch-controls button span{pointer-events:none;max-width:100%;overflow:hidden}
#touch-controls button.held{background:#556352bd;border-color:#c5d6ae;color:#f1e8ce}
#touch-controls [data-touch=guard]{border-color:#d7c293bb;background:#37433da8}
#touch-controls .touch-movement button,#touch-controls .touch-top button{width:48px;min-height:45px;font-size:9px}
#touch-controls .touch-top button svg{width:22px;height:22px}
#touch-controls [data-touch=skip]{display:none}
.training #touch-controls [data-touch=skip]{display:flex}
#landscape-gate{box-sizing:border-box;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:32px;border:0;background:radial-gradient(ellipse at 50% 42%,#24343d,#101b25 68%);color:#e1d6b9;text-align:center;overflow:auto}
#landscape-gate[open]{display:flex;flex-direction:column;justify-content:center;align-items:center}
#landscape-gate::backdrop{background:#101b25}
#landscape-gate svg{width:120px;height:100px;fill:none;stroke:#d7c293;stroke-width:2;shape-rendering:crispEdges;margin-bottom:20px}
#landscape-gate h2{font-family:'Cloister Pixel',monospace;font-size:28px;font-weight:normal;margin:0 0 12px}#landscape-gate p{font-size:16px;color:#94a394}
.touch-mode.playing{overscroll-behavior:none}
.touch-mode.playing #game{touch-action:none}
.touch-mode.playing #help-line,.touch-mode.playing #practice-log,.touch-mode.playing #combat-hud,.touch-mode.playing #defense-hud,.touch-mode.playing #perf{display:none!important}
.touch-mode.playing #vitals-orbs{left:max(14px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));bottom:auto;width:78px;height:83px}
.touch-mode.playing .wordmark{display:none}
.touch-mode #emote-wheel{z-index:45;pointer-events:auto;touch-action:none;width:min(290px,80dvh);height:min(290px,80dvh)}
.touch-mode #emote-wheel [role=button]{cursor:pointer}
.touch-mode input[type=email],.touch-mode input[type=password],.touch-mode input[type=text]{font-size:16px}
.touch-mode #trainer-lesson{max-height:80dvh;overflow-y:auto}
.touch-mode.training.playing #trainer-lesson{top:8px;bottom:auto;left:50%;width:min(340px,45vw);padding:8px 12px;max-height:130px;pointer-events:none}
.touch-mode.training.playing #trainer-lesson h2{font-size:16px;margin:4px 0}
.touch-mode.training.playing #lesson-words,.touch-mode.training.playing #lesson-shortcuts{display:none}
.touch-mode.training.playing #lesson-keys{font-size:11px;margin:4px 0;line-height:1.25}
.touch-mode.training.playing .trainer-rule{font-size:9px}
@media (max-height:500px) and (orientation:landscape){
 .touch-mode #lobby{padding:94px max(18px,env(safe-area-inset-right)) 18px max(18px,env(safe-area-inset-left));gap:16px;overflow:auto;pointer-events:auto}
 .touch-mode .wordmark,.touch-mode .wordmark .riposte-logo{width:160px}
 .touch-mode .wordmark>span{display:none}
 .touch-mode .account-panel h1{font-size:27px}
 .touch-mode .lobby-nav{top:15px;right:max(18px,env(safe-area-inset-right));left:auto;flex-wrap:wrap;max-width:70vw;justify-content:flex-end;gap:6px}
 .touch-mode #lobby .lobby-nav button{font-size:12px;padding:8px}
 .touch-mode #lobby .account-panel{width:300px;flex-shrink:0}
 .touch-mode #menu{max-height:92dvh;overflow:auto}
 .touch-mode #match-hud{top:12px}
 .touch-mode #round-announcement{font-size:26px}
 .touch-mode #match-result{max-height:90dvh;overflow:auto}
}
.touch-help{display:none}
.touch-mode .controls{display:none}
.touch-mode .touch-help{display:grid;gap:8px;font-size:12px;line-height:1.5;color:#c5c5ad}
.touch-mode .touch-help p{margin:0}
@media (max-height:360px){#touch-controls button{min-height:45px;width:57px}#touch-controls button svg{height:22px}.touch-movement{bottom:140px}#touch-stick{width:100px;height:100px}.touch-mode.training.playing #trainer-lesson{max-height:100px}}