:root{color-scheme:dark;--bg:#101718;--panel:#172021;--line:#2b3535;--ink:#e9ede5;--muted:#94a09a;--accent:#d0e7a4;--font:'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}.app-shell{max-width:520px;margin:auto;padding:0 28px;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.site-header{display:flex;align-items:center;justify-content:space-between;padding:29px 0 42px}.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:22px;letter-spacing:-1px;line-height:1}.brand-light{font-weight:400;color:#a9b5a9}.brand small{display:block;font-size:7px;font-weight:500;letter-spacing:2.05px;margin-top:8px;color:var(--muted)}.brand-mark{font-size:38px;color:var(--accent);letter-spacing:-8px;width:35px;transform:translateY(-4px)}.brand-mark span{opacity:.45}.icon-button{background:none;border:1px solid var(--line);border-radius:50%;width:40px;height:40px;display:grid;place-items:center}.icon-button svg{width:18px;fill:none;stroke:var(--ink);stroke-width:1.4}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--accent);display:flex;gap:9px;align-items:center;font-weight:600}.tiny-line{display:inline-block;width:18px;height:1px;background:var(--accent)}h1{font-size:clamp(32px,8.7vw,43px);letter-spacing:-1.9px;font-weight:500;line-height:1.14;margin:20px 0 16px}h1 span{color:#9eaaa1}.intro{font-size:13px;line-height:1.75;color:var(--muted);margin:0 0 28px}.game-card{border-radius:13px;overflow:hidden;border:1px solid #35433a;background:var(--panel)}.landscape{height:245px;position:relative;overflow:hidden;background:#607c78}.landscape>svg{position:absolute;width:100%;height:100%;inset:0}.landscape:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,#0b1c1be0)}.card-top,.card-bottom{position:absolute;z-index:1;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center}.card-top{top:18px}.edition-pill{font-size:8px;letter-spacing:1.1px;font-weight:700;background:#101e1a90;border:1px solid #d0dbbd55;padding:6px 8px;border-radius:4px}.card-index{font-size:7px;letter-spacing:1.1px;color:#e3e8d3}.card-bottom{bottom:17px;display:block}.game-kicker{font-size:7px;letter-spacing:1.8px;color:#c1d1b5}.card-bottom h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:43px;line-height:.88;letter-spacing:-.4px;margin:10px 0 0;text-shadow:0 2px 10px #0003}.card-bottom h2 span{color:var(--accent)}.art-note{position:absolute;bottom:4px;right:0;font-size:7px;letter-spacing:1.6px;writing-mode:vertical-rl}.card-info{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:12px 16px;font-size:9px;color:#afbcae}.card-info>span:first-child{display:flex;align-items:center;gap:7px;font-size:11px}.card-info>span:last-child{font-size:7px;letter-spacing:.65px}.card-info b{padding:0 3px;font-weight:400;color:var(--accent)}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#718076}.status-dot.live{background:var(--accent);box-shadow:0 0 9px #d0e7a450}.status-dot.error{background:#df9379}.connection-section{margin-top:30px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.section-heading h2{font-size:18px;font-weight:500;letter-spacing:-.5px;margin:0}.section-number{font-size:10px;color:#5e6b64}label{display:block;font-size:10px;color:#b5c0b5;letter-spacing:.25px;margin:0 0 10px}label span{float:right;color:#657567;font-size:8px;letter-spacing:1px}input,select{width:100%;min-height:48px;border:1px solid var(--line);border-radius:6px;background:#172021;color:var(--ink);padding:12px 14px;font-size:12px;outline:none}input:focus,select:focus{border-color:var(--accent)}input::placeholder{color:#758278;font-size:11px}.label-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px;margin-bottom:10px}.label-row label{margin:0}.text-button{padding:0;background:none;border:none;font-size:10px;color:var(--muted);line-height:1.5}.text-button:hover{color:var(--accent)}.code-wrap{position:relative}.code-wrap input{padding-right:62px}.code-wrap button{position:absolute;right:15px;top:16px;font-size:8px;letter-spacing:1px}.primary-button{width:100%;min-height:50px;border:0;border-radius:6px;color:#1b291b;background:var(--accent);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:space-between;padding:0 18px;margin-top:20px}.primary-button:hover{background:#dcefb8}.primary-button:disabled{opacity:.65;cursor:wait}.primary-button>span:last-child{font-size:24px;font-weight:400}.connection-message{font-size:9px;line-height:1.5;text-align:center;min-height:14px;margin:10px 0 0;color:#788779}.connection-message.error{color:#e9aa8c}.controller-card{margin-top:29px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;display:flex;align-items:center;gap:14px}.controller-symbol{display:flex;align-items:center;justify-content:space-between;border:1px solid #87957b;border-radius:15px;width:39px;height:50px;padding:5px;color:var(--accent);font-size:14px;transform:rotate(-10deg);flex-shrink:0}.controller-symbol span+span{font-size:15px;align-self:flex-end;margin-bottom:5px}.controller-card h3{font-size:12px;font-weight:500;margin:0 0 7px}.controller-card p{font-size:10px;line-height:1.65;color:var(--muted);margin:0}.arrow-button{margin-left:auto;border:0;background:none;font-size:22px;color:var(--accent)}.controller-summary{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#859381;margin-top:12px;gap:10px}footer{display:flex;align-items:center;justify-content:space-between;padding:32px 0 27px;font-size:7px;letter-spacing:1px;color:#637362;gap:9px}footer .text-button{font-size:8px;letter-spacing:0}.footer-dot{font-size:4px;color:#82966e}dialog{width:calc(100% - 32px);max-width:440px;border:1px solid #3c4b3c;border-radius:16px;background:#172021;color:var(--ink);padding:30px;box-shadow:0 24px 100px #0008}dialog::backdrop{background:#071011bb;backdrop-filter:blur(5px)}dialog h2{font-size:27px;letter-spacing:-1px;font-weight:500;margin:18px 0}dialog p{color:#a8b4a8;font-size:12px;line-height:1.8;white-space:pre-line}dialog label{margin-top:22px}.dialog-close{position:absolute;right:16px;top:14px;background:none;border:0;color:#94a08e;font-size:20px;padding:5px}.controller-readout{font-size:10px;line-height:1.8;color:var(--accent);margin:18px 0;overflow-wrap:anywhere}.control-note{font-size:10px!important;color:#84947e!important}#calibration{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}#calibration-step{font-size:16px;color:var(--accent)}#calibration-hint{font-size:11px}.secondary-button{background:none;border:1px solid #5b7051;border-radius:5px;padding:12px;color:var(--accent);display:block;width:100%;font-size:12px;margin-bottom:14px}.play-view{position:fixed;inset:0;background:#050908;z-index:10;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}[hidden]{display:none!important}#stream-frame,#stream-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.play-top{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));display:flex;align-items:center;gap:10px;z-index:3}.play-brand{font-size:15px;font-weight:700;text-shadow:0 1px 3px #000}.play-brand span{font-weight:400;color:#a8b49c}.live-pill{font-size:9px;display:flex;gap:6px;align-items:center;background:#0d171ccc;padding:7px 11px;border:1px solid #62745c44;border-radius:18px;margin-left:auto}.play-tool{background:#152018bb;border:1px solid #6a7c5744;width:34px;height:34px;border-radius:50%;font-size:16px;color:#dae2cf}.play-controls{position:absolute;inset:64px 18px 43px;inset-inline-start:max(18px,env(safe-area-inset-left));inset-inline-end:max(18px,env(safe-area-inset-right));display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.left-controls{display:flex;gap:10px;align-items:flex-end}.right-controls{display:flex;align-items:flex-end;gap:16px}.center-controls{display:flex;gap:9px;padding-bottom:7px;align-self:flex-end;margin:0 12px}.stick-pad{position:relative;border:1px solid #d2e7b455;background:#0c160e44;border-radius:50%;width:112px;height:112px;pointer-events:auto;touch-action:none;flex-shrink:0;display:grid;place-items:center}.stick-label{font-size:9px;letter-spacing:1.6px;color:#d4e2c699;position:absolute;bottom:17px;pointer-events:none}.stick-knob{width:41px;height:41px;border-radius:50%;border:1px solid #deefbe88;background:#cadbab22;pointer-events:none;will-change:transform}.touch-button{background:#11201280;border:1px solid #b9d99a80;color:#e3edcf;border-radius:50%;width:47px;height:47px;font-size:16px;pointer-events:auto;touch-action:none;padding:0}.touch-button.small{width:36px;height:36px;font-size:12px}.touch-button.pressed{background:#d0e7a4;color:#16251a}.action-grid{display:grid;grid-template-columns:47px 47px;gap:9px}.fire-button{grid-column:1 / 3;width:103px;height:42px;border-radius:24px;background:#90b65a66;font-size:13px}.play-bottom{position:absolute;left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;color:#c0ccbaaa;font-size:8px;letter-spacing:.4px;pointer-events:none}.play-bottom button{pointer-events:auto;color:#c4d4bc;font-size:9px}.stream-notice{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);background:#101a15ee;border:1px solid #56684866;border-radius:12px;padding:18px 24px;text-align:center;font-size:13px;line-height:1.6;max-width:80%;width:max-content}.resume-button{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);border:none;padding:14px 24px;background:var(--accent);color:#13230f;font-size:13px;border-radius:7px;z-index:4}@media(min-width:800px){body:not(.playing){background:radial-gradient(ellipse at 50% 30%,#1f2c26 0,transparent 65%),var(--bg)}.app-shell{margin-top:35px;margin-bottom:35px;border:1px solid #34403566;border-radius:24px;background:#101718;box-shadow:0 30px 90px #0003;padding-inline:36px}.site-header{padding-bottom:36px}}@media(max-width:360px){.app-shell{padding-inline:20px}.card-index{font-size:6px}.card-info{padding-inline:11px}.card-info>span:last-child{font-size:6px}.controller-card{gap:11px}}@media(orientation:portrait){.play-controls{inset-block-start:45%;flex-wrap:wrap;gap:24px;align-content:flex-end}.right-controls{flex-direction:column-reverse;gap:18px;align-items:center}.center-controls{position:absolute;bottom:155px;left:0;margin:0}.left-controls{gap:7px}.stick-pad{width:108px;height:108px}.action-grid{grid-template-columns:42px 42px}.action-grid .touch-button{width:42px;height:42px}.action-grid .fire-button{width:93px;height:36px}.left-controls .touch-button.small{width:28px;height:28px;font-size:10px}.play-brand{font-size:13px}.live-pill{font-size:8px}.play-tool{width:29px;height:29px}.play-bottom{font-size:6px}}@media(orientation:landscape) and (max-height:420px){.stick-pad{width:96px;height:96px}.play-controls{inset-block-end:35px}.touch-button{width:41px;height:41px}.action-grid{grid-template-columns:41px 41px;gap:7px}.fire-button{width:89px;height:35px}.right-controls{gap:12px}.center-controls{gap:7px}.left-controls{gap:7px}.touch-button.small{width:30px;height:30px;font-size:10px}.play-top{top:max(8px,env(safe-area-inset-top))}}

input,select{font-size:16px}
body.playing{overflow:hidden;overscroll-behavior:none}
body.playing .app-shell{display:none}