:root{--coda-touch-controls-height:332px;--coda-joystick-size:clamp(216px,60vw,244px);--coda-joystick-thumb-size:88px;--coda-touch-room-controls-height:max(calc(var(--coda-joystick-size) + 20px),236px);--coda-dpad-size:calc(var(--coda-joystick-size) / 3);--coda-touch-actions-width:clamp(96px,26.7vw,120px)}
/* The map remains available between the joystick and the action buttons. */
.coda-touch-controls{position:fixed;inset:auto 0 0;z-index:110;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;height:calc(var(--coda-touch-controls-height) + env(safe-area-inset-bottom,0px));padding:10px max(10px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));background:linear-gradient(transparent,#0812262e);border:0;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.coda-touch-controls[hidden],.coda-touch-button[hidden]{display:none!important}
.coda-joystick{position:relative;display:block;isolation:isolate;width:var(--coda-joystick-size);height:var(--coda-joystick-size);flex:0 0 auto;padding:0;border:2px solid #a4b6d58f;border-radius:50%;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:grab;box-sizing:border-box;background:radial-gradient(circle at 50% 7%,#c6f8ecaa 0 2px,transparent 3px),radial-gradient(circle at 93% 50%,#c6f8ecaa 0 2px,transparent 3px),radial-gradient(circle at 50% 93%,#c6f8ecaa 0 2px,transparent 3px),radial-gradient(circle at 7% 50%,#c6f8ecaa 0 2px,transparent 3px),radial-gradient(circle,#30425d88 0 40%,#182338b8 71%);box-shadow:inset 0 0 25px #050d2544,0 3px 14px #030a1d77;backdrop-filter:blur(3px)}
.coda-joystick:focus-visible{outline:3px solid #91ffeb;outline-offset:4px}
.coda-joystick.is-held{border-color:#b5ffe4;box-shadow:inset 0 0 25px #245b6a44,0 0 19px #65f7d52e;cursor:grabbing}
.coda-joystick-ring{position:absolute;inset:15%;border:1px solid #b6cfdd4d;border-radius:50%;pointer-events:none}
.coda-joystick-thumb{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:var(--coda-joystick-thumb-size);height:var(--coda-joystick-thumb-size);border:2px solid #d2d1ef;border-radius:50%;box-sizing:border-box;background:radial-gradient(circle at 35% 25%,#677998ed,#393c5ef5 68%);box-shadow:inset 0 2px 2px #f4eaff66,inset 0 -5px 10px #141b3c88,0 5px 13px #030b2288;transform:translate3d(calc(-50% + var(--coda-stick-x,0px)),calc(-50% + var(--coda-stick-y,0px)),0);transition:transform .1s ease-out;pointer-events:none}
.coda-joystick-thumb::after{content:"";width:28%;height:28%;border:2px solid #d7f4eb8c;border-radius:50%;box-shadow:inset 0 1px 4px #15283e66}
.coda-joystick.is-held .coda-joystick-thumb{transition:none;border-color:#d5ffeb;background:radial-gradient(circle at 35% 25%,#619d9aee,#315e6cf5 68%)}
.coda-joystick-label{position:absolute;left:0;right:0;bottom:15px;text-align:center;pointer-events:none;color:#d7e9f5;font:750 14px/1.3 system-ui;letter-spacing:.7px;text-shadow:0 1px 3px #071225}
.coda-joystick.is-held .coda-joystick-label{opacity:0}
.coda-joystick-help{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.coda-touch-button{padding:6px!important;border:2px solid #b4a2d8!important;border-radius:15px!important;background:linear-gradient(#403559e8,#252c46e8)!important;color:#fff5ff!important;min-width:72px;min-height:72px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;touch-action:none;box-shadow:inset 0 1px #e9c7ff33,0 3px 8px #030a1d99;font:18px/1.15 system-ui!important;backdrop-filter:blur(4px)}
.coda-touch-button:focus-visible{outline:3px solid #91ffeb;outline-offset:3px}.coda-touch-button.is-held{background:#357b6de8!important;border-color:#cbffec!important;box-shadow:inset 0 2px #163c38,0 0 18px #65f7d56a}
.coda-touch-symbol{font-size:44px;line-height:1}.coda-touch-symbol svg{width:44px;height:44px}
.coda-touch-actions{display:grid;grid-template-columns:var(--coda-touch-actions-width);gap:8px;align-items:stretch;flex:0 0 auto;pointer-events:auto;touch-action:none}.coda-touch-actions .coda-touch-button{min-height:104px;min-width:0}.coda-touch-interact{background:linear-gradient(#316e70eb,#205154eb)!important;border-color:#9af4e7!important}.coda-touch-emote{grid-column:1/-1;min-height:88px!important;flex-direction:column;gap:4px}.coda-touch-emote .coda-touch-symbol svg{width:36px;height:36px}.coda-touch-controls:not(:has(.coda-touch-emote:not([hidden]))) .coda-touch-actions{grid-template-columns:var(--coda-touch-actions-width)}.coda-touch-label{font-weight:750;font-size:18px}
@media(orientation:landscape){:root{--coda-joystick-size:clamp(200px,58dvh,232px);--coda-joystick-thumb-size:92px;--coda-touch-controls-height:calc(var(--coda-joystick-size) + 30px);--coda-touch-actions-width:128px}.coda-touch-controls{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}.coda-touch-actions{grid-template-columns:112px 128px}.coda-touch-actions .coda-touch-button{min-height:112px}.coda-touch-emote{min-height:96px!important;flex-direction:row;gap:10px}}
@media(max-width:370px){:root{--coda-touch-actions-width:96px}.coda-touch-controls{padding-left:6px;padding-right:6px;gap:6px}.coda-touch-actions{grid-template-columns:var(--coda-touch-actions-width)}.coda-touch-actions .coda-touch-button,.coda-touch-emote{grid-column:auto;flex-direction:column}.coda-touch-controls:not(:has(.coda-touch-emote:not([hidden]))) .coda-touch-actions{grid-template-columns:var(--coda-touch-actions-width)}.coda-touch-label{font-size:16px}}
@media(max-width:350px){:root{--coda-touch-actions-width:80px}.coda-touch-actions .coda-touch-button{padding-inline:3px!important}.coda-touch-label{font-size:15px}}
@media(prefers-reduced-motion:reduce){.coda-joystick-thumb{transition:none}}