:root{color:#e9e9ef;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;-webkit-font-smoothing:antialiased;--lime:#b7f76b;background:#101116;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{margin:0}button,input{font:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:4px}.app-shell{width:100%;min-height:100dvh;padding:max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));margin:auto}.is-pairing{place-items:center;display:grid}.connection-form{gap:20px;width:100%;max-width:360px;display:grid}.connection-field{flex-direction:column;gap:8px;display:flex}.connection-field label{color:#c4c6d0;font-size:14px}.connection-field input{color:#f2f3f6;background:#191b23;border:1px solid #3a3d48;border-radius:10px;width:100%;min-height:52px;padding:12px 14px;font-size:16px}.connection-field .code-input{letter-spacing:6px;font-variant-numeric:tabular-nums}.code-input::placeholder{color:#777c8c}.connect-button{background:var(--lime);color:#17200d;border:0;border-radius:10px;min-height:52px;padding:12px 18px;font-size:16px;font-weight:650}.connect-button:disabled{opacity:.65;cursor:not-allowed}.connection-message{color:#b5b9c7;margin:0;font-size:14px;line-height:1.5}.connection-message.error{color:#ffabb5}.is-playing{flex-direction:column;justify-content:center;max-width:1040px;display:flex}.play-section{flex-direction:column;gap:24px;width:100%;display:flex}.console-toolbar{flex-direction:column;align-items:center;gap:10px;display:flex}.console-switch{background:#181a22;border:1px solid #363842;border-radius:12px;gap:4px;max-width:100%;padding:4px;display:inline-flex}.console-switch button{color:#a9adbd;background:0 0;border:0;border-radius:8px;min-width:0;min-height:44px;padding:10px clamp(6px,2vw,16px);font-size:13px;font-weight:600}.console-switch button[aria-pressed=true]{color:#fff;background:#353845}.demo-badge{color:#8f94a6;font-size:11px}.rotation-hint{display:none}@media (orientation:portrait){.rotation-hint{color:#bcc9d9;flex-direction:column;align-items:center;gap:20px;margin:60px 0;font-size:16px;display:flex}.rotation-hint svg{width:64px;height:64px}}@media (prefers-reduced-motion:no-preference){.console-switch button{transition:background .15s}}@media (orientation:landscape) and (height<=600px),(orientation:landscape) and (hover:none) and (pointer:coarse){:is(html:has(.is-playing),body:has(.is-playing)){overscroll-behavior:none;overflow:hidden}.app-shell.is-playing{width:100%;max-width:none;height:100dvh;min-height:0;padding:max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));margin:0;display:block;position:fixed;inset:0}.is-playing .play-section{width:100%;height:100%;display:block}.is-playing .console-toolbar{display:none}.app-shell.is-pairing{padding-top:max(12px, env(safe-area-inset-top));padding-bottom:max(12px, env(safe-area-inset-bottom))}.connection-form{grid-template-columns:1fr 1fr;gap:16px;max-width:520px}.connect-button,.connection-message{grid-column:1/-1}}.controller-card.hardware-controller{width:100%;height:410px;box-shadow:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;--cluster-size:clamp(132px, min(27cqw, 42cqh), 204px);--stick-size:clamp(72px, min(17cqw, 25cqh), 112px);--shoulder-width:clamp(48px, 8cqw, 84px);--cluster-top:max(54px, calc(35% - var(--cluster-size) / 2));--left-center:20%;--right-center:80%;background:0 0;border:0;border-radius:0;order:1;margin:0;padding:0;position:relative;overflow:visible;container-type:size}.controller-card.hardware-controller.snes{--cluster-size:clamp(132px, min(29cqw, 64cqh), 232px);--cluster-top:calc(53% - var(--cluster-size) / 2);--left-center:20%;--right-center:80%;height:320px}.hardware-controller .controller-artwork{pointer-events:none;position:absolute;inset:0}.hardware-controller .hardware-shell{filter:drop-shadow(0 6px 4px #0008);width:100%;height:100%;display:block;position:absolute;inset:0}.hardware-controller .controller-body{margin:0;padding:0;display:contents}.hardware-controller .dpad-zone,.hardware-controller .face-buttons{top:var(--cluster-top);width:var(--cluster-size);height:var(--cluster-size);gap:0;margin:0;padding:0;position:absolute;transform:translate(-50%)}.hardware-controller .dpad-zone{left:var(--left-center)}.hardware-controller .face-buttons{left:var(--right-center);background:0 0;right:auto}.hardware-controller .control-well{top:calc(var(--cluster-top) - 12px);width:calc(var(--cluster-size) + 24px);height:calc(var(--cluster-size) + 24px);background:radial-gradient(circle at 40% 25%,#33333a,#202026 60%,#111116 90%);border:2px solid #414147;border-radius:50%;position:absolute;transform:translate(-50%);box-shadow:inset 0 2px 2px #72727a66,0 3px 2px #07070b}.hardware-controller .directional-well{left:var(--left-center)}.hardware-controller .action-well{left:var(--right-center)}.hardware-controller.snes .directional-well{width:calc(var(--cluster-size) + 10px);height:calc(var(--cluster-size) + 10px);top:calc(var(--cluster-top) - 5px);background:#b6bdb5;border:1px solid #8b958b;box-shadow:inset 0 1px 2px #7c867c,0 1px 1px #f6f8ef}.hardware-controller.snes .action-well{top:calc(var(--cluster-top) - var(--cluster-size) * .15);width:calc(var(--cluster-size) * 1.3);height:calc(var(--cluster-size) * 1.3);background:linear-gradient(135deg,#949d93,#7b857c);border:3px solid #e5e9e0;box-shadow:inset 0 1px 2px #5a655b}.hardware-controller .dpad{filter:drop-shadow(0 3px 2px #0009);touch-action:none;background:0 0;width:100%;height:100%;margin:0;position:relative;transform:none}.hardware-controller .d-arm,.hardware-controller .d-center{pointer-events:none;color:#4d4e50;z-index:2;background:linear-gradient(130deg,#64656a,#3d3e43 45%,#292a2e);border:1px solid #0b0b0d;place-items:center;padding:0;display:grid;position:absolute;box-shadow:inset 1px 2px 1px #a0a0a866,inset -2px -2px 1px #111114}.hardware-controller .d-up,.hardware-controller .d-down{width:32%;height:36%;left:34%}.hardware-controller .d-up{border-radius:5px 5px 0 0;top:2%}.hardware-controller .d-down{border-radius:0 0 5px 5px;bottom:2%}.hardware-controller .d-left,.hardware-controller .d-right{width:36%;height:32%;top:34%}.hardware-controller .d-left{border-radius:5px 0 0 5px;left:2%}.hardware-controller .d-right{border-radius:0 5px 5px 0;right:2%}.hardware-controller .d-center{z-index:3;width:32%;height:32%;box-shadow:none;background:#3e4043;border:0;top:34%;left:34%}.hardware-controller.snes .d-center:after{content:"";background:#363a38;border-radius:50%;width:35%;height:35%;box-shadow:inset 1px 1px 2px #171d19}.hardware-controller .d-arm:after{content:"";clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 1px #ffffff25);background:#272b28;width:11px;height:11px}.hardware-controller .d-left:after{transform:rotate(-90deg)}.hardware-controller .d-right:after{transform:rotate(90deg)}.hardware-controller .d-down:after{transform:rotate(180deg)}.hardware-controller.ps2 .dpad{background:radial-gradient(circle,#0a0a0e 48%,#0000 49%)}.hardware-controller.ps2 .d-center,.hardware-controller.ps2 .d-arm:after{display:none}.hardware-controller.ps2 .d-up,.hardware-controller.ps2 .d-down{clip-path:polygon(10% 0,90% 0,100% 72%,50% 100%,0 72%);border-radius:6px;width:28%;height:35%;left:36%}.hardware-controller.ps2 .d-up{top:3%}.hardware-controller.ps2 .d-down{bottom:3%;transform:rotate(180deg)}.hardware-controller.ps2 .d-left,.hardware-controller.ps2 .d-right{clip-path:polygon(0 10%,72% 0,100% 50%,72% 100%,0 90%);border-radius:6px;width:35%;height:28%;top:36%}.hardware-controller.ps2 .d-left{left:3%}.hardware-controller.ps2 .d-right{right:3%;transform:rotate(180deg)}.hardware-controller .d-arm.pressed{filter:brightness(1.25);background:linear-gradient(#858b83,#555e54)}.hardware-controller .pad-button{touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:none;color:inherit;background:0 0;border:0;border-radius:0;place-items:center;margin:0;padding:0;display:grid;position:relative;transform:none}.hardware-controller .pad-button.pressed{box-shadow:none;filter:none;background:0 0;transform:none}.hardware-controller .button-cap{pointer-events:none;place-items:center;display:grid;position:relative}.hardware-controller .button-legend{pointer-events:none;position:absolute}.hardware-controller .pad-button.pressed .button-cap{filter:brightness(1.25);translate:0 2px}.hardware-controller .face{z-index:1;border-radius:50%;width:33.333%;height:33.333%;font-family:Arial,sans-serif;line-height:1;position:absolute}.hardware-controller .face.top,.hardware-controller .face.bottom{left:33.333%}.hardware-controller .face.top{top:0}.hardware-controller .face.bottom{bottom:0}.hardware-controller .face.left,.hardware-controller .face.right{top:33.333%}.hardware-controller .face.left{left:0}.hardware-controller .face.right{right:0}.hardware-controller .face .button-cap{background:radial-gradient(circle at 35% 20%,#424249,#26262d 60%,#17171d);border:2px solid #07070b;border-radius:50%;width:86%;height:86%;box-shadow:inset 0 1px 1px #9c9ca255,0 3px 2px #07070c}.hardware-controller .face-mark{stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;width:68%;height:68%}.hardware-controller .triangle{color:#79bbb1}.hardware-controller .square{color:#c7a1bc}.hardware-controller .circle{color:#d68c99}.hardware-controller .cross{color:#8f9dc9}.hardware-controller.snes .face-buttons{--snes-face-size:38%;--snes-backing-width:34%;--snes-pair-center:calc(25% + var(--snes-face-size) / 4);--snes-backing-length:calc((50% - var(--snes-face-size) / 2) * 1.41421 + var(--snes-backing-width))}.hardware-controller.snes .face-buttons:before,.hardware-controller.snes .face-buttons:after{content:"";width:var(--snes-backing-width);height:var(--snes-backing-length);pointer-events:none;background:#c4cbc1;border-radius:100px;position:absolute;transform:translate(-50%,-50%)rotate(45deg);box-shadow:inset 1px 1px 3px #f4f8ed,1px 2px 1px #626e64}.hardware-controller.snes .face-buttons:before{left:var(--snes-pair-center);top:var(--snes-pair-center)}.hardware-controller.snes .face-buttons:after{left:calc(100% - var(--snes-pair-center));top:calc(100% - var(--snes-pair-center))}.hardware-controller.snes .face{width:var(--snes-face-size);height:var(--snes-face-size)}.hardware-controller.snes .face.top,.hardware-controller.snes .face.bottom{left:calc((100% - var(--snes-face-size)) / 2)}.hardware-controller.snes .face.left,.hardware-controller.snes .face.right{top:calc((100% - var(--snes-face-size)) / 2)}.hardware-controller.snes .face .button-cap{border:1px solid #4c5548;width:82%;height:82%;box-shadow:inset 0 2px 2px #fff8,inset 0 -2px 2px #0004,0 2px 3px #3e493e88}.hardware-controller.snes .face .button-legend{color:#e3e9dd;font-size:clamp(11px,2.5cqw,15px);font-weight:700}.hardware-controller.snes .face.top .button-legend,.hardware-controller.snes .face.right .button-legend{top:0;left:87%}.hardware-controller.snes .face.left .button-legend,.hardware-controller.snes .face.bottom .button-legend{bottom:-1px;right:90%}.hardware-controller .snes-x .button-cap{background:radial-gradient(circle at 38% 25%,#4164da,#1240b0 65%,#113280)}.hardware-controller .snes-y .button-cap{background:radial-gradient(circle at 38% 25%,#3caa67,#048943 65%,#126c38)}.hardware-controller .snes-a .button-cap{background:radial-gradient(circle at 38% 25%,#fa6646,#e53219 65%,#b92213)}.hardware-controller .snes-b .button-cap{background:radial-gradient(circle at 38% 25%,#ffe16a,#f4bc0b 65%,#d79d03)}.hardware-controller .shoulders{z-index:4;pointer-events:none;height:44px;margin:0;position:absolute;inset:0}.hardware-controller .shoulders>div{gap:8px;display:flex;position:absolute;top:0}.hardware-controller .shoulders>div:first-child{left:calc(var(--left-center) - var(--shoulder-width) - 4px)}.hardware-controller .shoulders>div:last-child{right:calc(100% - var(--right-center) - var(--shoulder-width) - 4px)}.hardware-controller .shoulder{width:var(--shoulder-width);pointer-events:auto;height:44px;font-size:13px;font-weight:650}.hardware-controller .shoulder .button-cap{color:#a1a1a8;background:linear-gradient(#4a4a50,#232329 70%);border:1px solid #4b4b51;border-radius:15px 15px 5px 5px;width:100%;height:39px;box-shadow:inset 0 2px #83838a55,0 3px #0a0a10}.hardware-controller .shoulder.secondary .button-cap{color:#777780;background:linear-gradient(#35353b,#1d1d23)}.hardware-controller.snes .shoulders>div:first-child{left:calc(var(--left-center) - var(--shoulder-width) / 2)}.hardware-controller.snes .shoulders>div:last-child{right:calc(100% - var(--right-center) - var(--shoulder-width) / 2)}.hardware-controller.snes .shoulder .button-cap{color:#596457;background:linear-gradient(#c7cec5,#929d92);border-color:#737f72;border-radius:15px 15px 3px 3px;height:28px;box-shadow:inset 0 2px #f4f6ed,0 2px 1px #6c786c}.hardware-controller .center-controls{z-index:3;gap:0;padding:0;position:absolute;top:35%;left:50%;transform:translate(-50%)}.hardware-controller .system-buttons{gap:12px;margin:0;display:flex}.hardware-controller .system{letter-spacing:.1px;width:clamp(44px,9cqw,76px);height:52px;font-size:9px;font-weight:600}.hardware-controller .system .button-cap{background:linear-gradient(#71717a,#3a3a42);border:2px solid #07070c;border-radius:3px;width:24px;height:14px;margin-top:-12px;box-shadow:0 2px 1px #09090b}.hardware-controller .system .button-legend{color:#a5a5b0;font-size:9px;bottom:3px}.hardware-controller.ps2 .system:last-child .button-cap{clip-path:polygon(0 0,100% 50%,0 100%);border:0;border-radius:0;width:28px;height:17px}.hardware-controller.snes .center-controls{top:54%;left:47%}.hardware-controller.snes .system{height:60px}.hardware-controller.snes .system .button-cap{background:linear-gradient(#838e85,#46524a);border:1px solid #3e4941;border-radius:10px;width:38px;height:14px;margin-top:-6px;transform:rotate(-34deg);box-shadow:inset 0 2px 1px #a8b2aa,0 2px 2px #859086}.hardware-controller.snes .system .button-legend{color:#424e44;font-size:9px;font-style:italic;font-weight:750;bottom:2px}.hardware-controller .analog-row{height:calc(var(--stick-size) + 52px);pointer-events:none;margin:0;display:block;position:absolute;inset:auto 0 14px;transform:none}.hardware-controller .stick,.hardware-controller .stick-click{pointer-events:auto}.hardware-controller .stick-wrap{width:var(--stick-size);flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:0}.hardware-controller .stick-left{left:38%;transform:translate(-50%)}.hardware-controller .stick-right{right:38%;transform:translate(50%)}.hardware-controller .stick{touch-action:none;width:var(--stick-size);height:var(--stick-size);background:radial-gradient(circle,#141419 55%,#36363e 66%,#101015 72%);border:3px solid #09090e;border-radius:50%;flex-shrink:0;place-items:center;display:grid;box-shadow:0 0 0 8px #24242b,0 0 0 10px #45454c,0 5px 6px 12px #0005}.hardware-controller .stick-knob{pointer-events:none;background:repeating-radial-gradient(circle at 35% 30%,#43434a 0 1px,#3a3a42 1px 2px);border:1px solid #55555d;border-radius:50%;width:78%;height:78%;position:relative;box-shadow:inset 0 3px 4px #76767c55,inset 0 -4px 6px #16161b,0 4px 4px #0009}.hardware-controller .stick-knob:after{content:"";border:1px solid #96969c11;border-radius:50%;position:absolute;inset:5px}.hardware-controller .stick-click{color:#8a8a94;flex-shrink:0;min-width:44px;height:44px;font-size:9px}.hardware-controller .stick-click .button-cap{background:#15151c;border:1px solid #3f3f49;border-radius:9px;width:32px;height:17px}.hardware-controller .hardware-brand{text-align:center;position:absolute;transform:translate(-50%)}.hardware-controller .ps2-brand{color:#aaaab7;flex-direction:column;align-items:center;display:flex;top:12%;left:50%}.hardware-controller .ps2-brand strong{letter-spacing:1px;font:700 clamp(18px,4cqw,29px)/1 Georgia,serif}.hardware-controller .playstation-mark{width:23px;height:23px;margin:4px 0 0;display:block}.hardware-controller .playstation-name{margin-top:1px;font:9px Arial,sans-serif}.hardware-controller .hardware-analog{flex-direction:column;align-items:center;gap:5px;display:flex;position:absolute;top:54%;left:50%;transform:translate(-50%)}.hardware-controller .hardware-analog span{color:#9a9aa4;letter-spacing:.6px;font:8px Arial,sans-serif}.hardware-controller .hardware-analog i{background:repeating-linear-gradient(90deg,#33333b 0 5px,#1d1d23 5px 7px);border:1px solid #55555d;border-radius:5px 5px 2px 2px;width:27px;height:13px;box-shadow:0 1px 2px #050508}.hardware-controller .hardware-analog b{background:#e62458;border-radius:2px;width:16px;height:5px;box-shadow:0 0 5px #f42b6c88}.hardware-controller .snes-brand{color:#4d5950;white-space:nowrap;align-items:center;gap:6px;display:flex;top:18%;left:47%}.hardware-controller .snes-brand strong{letter-spacing:-1px;border-bottom:1px solid;font:italic 900 clamp(10px,2.8cqw,18px)/1 Arial Narrow,Arial,sans-serif;display:block}.hardware-controller .snes-brand small{letter-spacing:.35px;margin-top:2px;font:650 clamp(4px,.7cqw,6px) Arial,sans-serif;display:block}.hardware-controller .snes-emblem{grid-template:repeat(2,7px)/repeat(2,10px);gap:2px;display:grid;transform:rotate(23deg)}.hardware-controller .snes-emblem i{background:#525f55;border-radius:70% 35%}@media (width<=760px) and (orientation:portrait){.controller-card.hardware-controller{--cluster-size:132px;--stick-size:64px;--shoulder-width:48px;--cluster-top:44px;--left-center:18%;--right-center:82%;height:310px}.controller-card.hardware-controller.snes{--cluster-top:calc(49% - var(--cluster-size) / 2);--left-center:19%;--right-center:81%;height:245px}.hardware-controller.snes .center-controls{top:74%;left:50%}.hardware-controller.snes .snes-brand{top:16%;left:50%}.hardware-controller .center-controls{top:37%}.hardware-controller .system-buttons{gap:0}.hardware-controller .system{width:44px}.hardware-controller .ps2-brand{top:15%}.hardware-controller .hardware-analog{top:54%}.hardware-controller .analog-row{bottom:16px}.hardware-controller .stick-left{left:35%}.hardware-controller .stick-right{right:35%}}@media (width<=400px) and (orientation:portrait){.controller-card.hardware-controller{--left-center:24%;--right-center:76%;height:420px}.controller-card.hardware-controller.snes{--left-center:24%;--right-center:76%;height:300px}.hardware-controller.ps2 .center-controls{top:45%}}@media (orientation:landscape) and (height<=600px),(orientation:landscape) and (hover:none) and (pointer:coarse){.is-playing .controller-card.hardware-controller{--cluster-size:clamp(132px, min(23cqw, 51cqh), 204px);--stick-size:clamp(64px, min(12cqw, 28cqh), 112px);--shoulder-width:clamp(48px, 8cqw, 84px);--cluster-top:54px;--left-center:18%;--right-center:82%;width:min(100%,max(520px,210dvh));height:100%;margin:0 auto}.is-playing .controller-card.hardware-controller.snes{--cluster-size:clamp(132px, min(29cqw, 67cqh), 248px);--cluster-top:max(44px, calc(52% - var(--cluster-size) / 2));--left-center:20%;--right-center:80%;width:min(100%,220dvh)}.hardware-controller .hardware-shell{filter:drop-shadow(0 3px 2px #0007)}.hardware-controller .shoulder{height:44px}.hardware-controller .face .button-legend{font-size:14px}.hardware-controller .center-controls{top:28%}.hardware-controller.snes .center-controls{top:53%}.hardware-controller .system{width:clamp(44px,8cqw,72px)}.hardware-controller .system .button-legend{font-size:10px}.hardware-controller .ps2-brand{top:8%}.hardware-controller .ps2-brand strong{font-size:23px}.hardware-controller .playstation-mark{width:17px;height:17px;margin-top:3px}.hardware-controller .playstation-name{font-size:8px}.hardware-controller .hardware-analog{top:56%}.hardware-controller .analog-row{bottom:10px}.hardware-controller .stick{box-shadow:0 0 0 6px #24242b,0 0 0 8px #45454c,0 4px 4px 9px #0005}}@media (prefers-reduced-motion:no-preference){.hardware-controller .button-cap{transition:filter 60ms,translate 60ms}}@media (orientation:landscape) and (height<=270px){.hardware-controller.ps2 .hardware-brand{display:none}.hardware-controller.ps2 .center-controls{top:0}.hardware-controller .hardware-analog{top:54%}}.touch-controller{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;--edge:clamp(6px, 1cqw, 12px);--gap:clamp(8px, 1.4cqw, 14px);--header-height:clamp(48px, 18cqh, 60px);--key-height:clamp(48px, 17cqh, 56px);--body-top:calc(var(--edge) + var(--header-height) + var(--gap));--dpad-key:clamp(48px, min(6cqw, 17cqh), 60px);--dpad-gap:4px;--dpad-step:calc(var(--dpad-key) + var(--dpad-gap));--dpad-size:calc(var(--dpad-key) * 3 + var(--dpad-gap) * 2);--face-size:clamp(48px, min(7.5cqw, 21cqh), 72px);--action-size:calc(var(--face-size) * 3);--left-stick-size:clamp(84px, min(15cqw, 46cqh), 132px);--right-stick-size:clamp(72px, min(11cqw, 36cqh), 104px);--shoulder-width:clamp(56px, 11cqw, 112px);--system-width:clamp(48px, 10cqw, 100px);background:radial-gradient(at 50% 30%,#14202b66,#0000 70%),#0f151d;border:0;border-radius:14px;width:100%;height:clamp(280px,34vw,380px);margin:0;padding:0;position:relative;container-type:size}.touch-controller:before{content:"";border-radius:inherit;pointer-events:none;border:1px solid #3d5266;position:absolute;inset:0}.touch-controller .controller-body,.touch-controller .analog-row{display:contents}.touch-controller .shoulders,.touch-controller .analog-row,.touch-controller .stick-wrap{pointer-events:none}.touch-controller .pad-button,.touch-controller .stick{pointer-events:auto;touch-action:none}.touch-controller .pad-button,.touch-controller .d-arm{color:#f0f4fa;background:linear-gradient(145deg,#2b3847,#1b2530);border:1px solid #647d96;border-radius:12px;place-items:center;margin:0;padding:0;font-size:clamp(14px,2.4cqw,20px);font-weight:650;line-height:1;display:grid;box-shadow:inset 0 1px #b9cee126,0 2px 4px #0004}.touch-controller .button-cap{pointer-events:none;place-items:center;width:100%;height:100%;display:grid}.touch-controller .button-legend{pointer-events:none;display:none}.touch-controller .pad-button.pressed,.touch-controller .d-arm.pressed{background:linear-gradient(145deg,#456681,#2d465c);border-color:#badfff;box-shadow:inset 0 0 0 1px #a6d8ff55}.touch-controller .shoulders{inset:var(--edge) var(--edge) auto;height:var(--header-height);position:absolute}.touch-controller .shoulders>div{gap:var(--gap);display:flex;position:absolute;top:0}.touch-controller .shoulders>div:first-child{left:0}.touch-controller .shoulders>div:last-child{right:0}.touch-controller .shoulder{width:var(--shoulder-width);height:var(--header-height)}.touch-controller .center-controls{left:50%;top:var(--edge);position:absolute;transform:translate(-50%)}.touch-controller .system-buttons{gap:var(--gap);display:flex}.touch-controller .system{width:var(--system-width);height:var(--header-height);letter-spacing:.5px;font-size:clamp(11px,1.6cqw,16px)}.touch-controller .system .button-cap{display:none}.touch-controller .system .button-legend{display:block}.touch-controller .dpad-zone{left:calc(var(--edge) + var(--left-stick-size) + var(--gap));top:calc(var(--body-top) + (100cqh - var(--body-top) - var(--edge) - var(--dpad-size)) / 2);width:var(--dpad-size);height:var(--dpad-size);position:absolute}.touch-controller .dpad{touch-action:none;width:100%;height:100%;position:relative}.touch-controller .d-arm{width:var(--dpad-key);height:var(--dpad-key);pointer-events:none;position:absolute}.touch-controller .d-up{top:0;left:var(--dpad-step)}.touch-controller .d-down{bottom:0;left:var(--dpad-step)}.touch-controller .d-left{top:var(--dpad-step);left:0}.touch-controller .d-right{top:var(--dpad-step);right:0}.touch-controller .d-center{display:none}.touch-controller .d-arm:after{content:"";clip-path:polygon(50% 0,100% 100%,0 100%);background:#dbe4ef;width:39%;height:36%}.touch-controller .d-down:after{transform:rotate(180deg)}.touch-controller .d-left:after{transform:rotate(-90deg)}.touch-controller .d-right:after{transform:rotate(90deg)}.touch-controller .face-buttons{right:var(--edge);top:calc(var(--body-top) + (100cqh - var(--body-top) - var(--edge) - var(--action-size)) / 2);width:var(--action-size);height:var(--action-size);position:absolute}.touch-controller .face{width:var(--face-size);height:var(--face-size);border-radius:50%;position:absolute}.touch-controller .face.top{top:0;left:var(--face-size)}.touch-controller .face.bottom{bottom:0;left:var(--face-size)}.touch-controller .face.left{top:var(--face-size);left:0}.touch-controller .face.right{top:var(--face-size);right:0}.touch-controller .face-mark{stroke:currentColor;stroke-width:2.3px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;width:65%;height:65%}.touch-controller .triangle{color:#49d9b4}.touch-controller .square{color:#f195db}.touch-controller .circle{color:#ff8d98}.touch-controller .cross{color:#8fcaff}.touch-controller .stick-wrap{bottom:var(--edge);width:var(--stick-size);flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute}.touch-controller .stick-left{left:var(--edge);--stick-size:var(--left-stick-size)}.touch-controller .stick-right{right:calc(var(--edge) + var(--action-size) + var(--gap));--stick-size:var(--right-stick-size)}.touch-controller .stick{width:var(--stick-size);height:var(--stick-size);background:radial-gradient(circle at 40% 35%,#29394a,#121c26 70%);border:2px solid #728aa1;border-radius:50%;place-items:center;display:grid;position:relative;box-shadow:inset 0 0 0 4px #101923,inset 0 0 0 6px #40536a,0 2px 5px #0005}.touch-controller .stick-knob{pointer-events:none;background:radial-gradient(circle at 38% 25%,#596c81,#263748 75%);border:1px solid #667e97;border-radius:50%;width:58%;height:58%;box-shadow:inset 0 2px 3px #aec4df33,0 4px 8px #0007}.touch-controller .stick-click{width:min(100%,clamp(64px,10cqw,104px));height:var(--key-height);font-size:clamp(14px,2.2cqw,19px)}@media (orientation:portrait){.touch-controller{display:none}}@media (orientation:landscape) and (height<=600px),(orientation:landscape) and (hover:none) and (pointer:coarse){.is-playing .touch-controller{width:100%;height:100%;margin:0}}@media (orientation:landscape) and (height<=250px){.touch-controller{--edge:6px;--gap:8px;--header-height:44px;--key-height:44px;--dpad-key:44px;--face-size:48px;--left-stick-size:clamp(80px, 15cqw, 100px);--right-stick-size:72px}}@media (orientation:landscape) and (height<=230px){.touch-controller{--edge:0px;--gap:3px;--dpad-gap:0px;--face-size:44px;--left-stick-size:68px;--right-stick-size:64px}}.arcade-controller{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;--edge:clamp(8px, 1.5cqw, 18px);--gap:clamp(8px, 1.4cqw, 14px);--system-height:clamp(44px, 16cqh, 52px);--field-top:calc(var(--edge) + var(--system-height) + var(--gap));--field-height:calc(100cqh - var(--field-top) - var(--edge));--arc-rise:clamp(4px, 6cqh, 24px);--button-size:clamp(44px, min(9cqw, (var(--field-height) - var(--gap) - var(--arc-rise) * 2) / 2), 82px);--action-width:calc(var(--button-size) * 4.2 + var(--gap) * 3);--action-height:calc(var(--button-size) * 2 + var(--arc-rise) * 2 + var(--gap));--stick-size:clamp(88px, min(28cqw, var(--field-height)), 210px);background:linear-gradient(90deg,#505152 0 37%,#3c3d3f 37% 100%);border-radius:16px;width:100%;height:clamp(280px,34vw,380px);margin:0;position:relative;box-shadow:inset 0 0 0 3px #292a2b,inset 0 0 0 6px #686a6b,inset 0 0 0 8px #303132;container-type:size}.arcade-controller:before{content:"";left:var(--edge);right:var(--edge);top:calc(var(--field-top) - var(--gap) / 2);pointer-events:none;border-top:2px solid #292a2b;position:absolute;box-shadow:0 1px #797b7c55}.arcade-controller:after{content:"";left:37%;top:calc(var(--field-top) - var(--gap) / 2);bottom:var(--edge);pointer-events:none;border-left:2px solid #292a2b;position:absolute;box-shadow:1px 0 #797b7c55}.arcade-controller .pad-button{touch-action:none;color:#f3f3f1;border:2px solid #121314;place-items:center;margin:0;padding:0;font-weight:700;line-height:1;display:grid;position:relative;box-shadow:inset 0 1px 1px #b5b5b550,0 3px 4px #0008}.arcade-controller .button-cap{pointer-events:none;place-items:center;width:100%;height:100%;display:grid}.arcade-controller .button-legend{pointer-events:none;display:none}.arcade-controller .arcade-system{top:var(--edge);left:var(--edge);right:var(--edge);justify-content:space-between;display:flex;position:absolute}.arcade-controller .arcade-system>div{gap:var(--gap);display:flex}.arcade-controller .system{width:clamp(52px,9cqw,84px);height:var(--system-height);letter-spacing:.5px;background:linear-gradient(145deg,#565758,#242527);border-width:1px;border-radius:22px;font-size:clamp(12px,1.6cqw,16px)}.arcade-controller .system .button-cap{display:none}.arcade-controller .system .button-legend{display:block}.arcade-controller .arcade-buttons{right:var(--edge);top:calc(var(--field-top) + (var(--field-height) - var(--action-height)) / 2);width:var(--action-width);height:var(--action-height);position:absolute}.arcade-controller .arcade-button{width:var(--button-size);height:var(--button-size);background:#111214;border-radius:50%;padding:5px;font-size:clamp(17px,3cqw,27px);position:absolute;box-shadow:inset 0 0 0 2px #68696b,inset 0 0 0 5px #08090a,0 3px 5px #0009}.arcade-controller .arcade-button .button-cap{background:radial-gradient(at 32% 18%,#55575a,#292b2e 50%,#141517 85%);border:1px solid #4c4e51;border-radius:50%;box-shadow:inset 0 1px 2px #a4a4a426}.arcade-controller .arcade-button-1{left:calc(var(--button-size) * .2);top:var(--arc-rise);color:#9ad4f6}.arcade-controller .arcade-button-2{left:calc(var(--button-size) * 1.2 + var(--gap));color:#ede99b;top:0}.arcade-controller .arcade-button-3{left:calc(var(--button-size) * 2.2 + var(--gap) * 2);top:0}.arcade-controller .arcade-button-4{left:calc(var(--button-size) * 3.2 + var(--gap) * 3);top:0}.arcade-controller .arcade-button-5{left:0;top:calc(var(--button-size) + var(--arc-rise) * 2 + var(--gap));color:#a6e0a0}.arcade-controller .arcade-button-6{left:calc(var(--button-size) + var(--gap));top:calc(var(--button-size) + var(--arc-rise) + var(--gap));color:#f3a1a7}.arcade-controller .arcade-button-7{left:calc(var(--button-size) * 2 + var(--gap) * 2);top:calc(var(--button-size) + var(--arc-rise) + var(--gap))}.arcade-controller .arcade-button-8{left:calc(var(--button-size) * 3 + var(--gap) * 3);top:calc(var(--button-size) + var(--arc-rise) + var(--gap))}.arcade-controller .pad-button.pressed{border-color:#cbff8f;box-shadow:inset 0 0 0 2px #8ba869,0 0 0 2px #cbff8f66}.arcade-controller .arcade-button.pressed .button-cap,.arcade-controller .system.pressed{background:#344325}.arcade-controller .arcade-joystick{left:max(var(--edge), (37cqw - var(--stick-size)) / 2);top:calc(var(--field-top) + (var(--field-height) - var(--stick-size)) / 2);width:var(--stick-size);height:var(--stick-size);pointer-events:none;position:absolute}.arcade-controller .stick-wrap{pointer-events:none;width:100%;height:100%}.arcade-controller .stick{touch-action:none;pointer-events:auto;background:radial-gradient(circle,#222426 0 29%,#4b4d4e 30% 70%,#393b3c 71%);border:2px solid #252627;border-radius:50%;place-items:center;width:100%;height:100%;display:grid;position:relative;box-shadow:inset 0 0 0 2px #75777855,0 1px #85878855}.arcade-controller .stick-knob{pointer-events:none;background:radial-gradient(circle at 36% 26%,#77797b,#242628 32%,#101112 72%,#080909);border:2px solid #111213;border-radius:50%;width:58%;height:58%;display:block;box-shadow:inset 0 1px 3px #b1b3b54d,0 5px 7px #0009}@media (orientation:portrait){.arcade-controller{display:none}}@media (orientation:landscape) and (height<=600px),(orientation:landscape) and (hover:none) and (pointer:coarse){.is-playing .arcade-controller{width:100%;height:100%;margin:0}}@media (orientation:landscape) and (height<=230px){.arcade-controller{--edge:6px;--gap:6px;--system-height:44px;--arc-rise:4px}}
