.header-actions #controller,.portal-search-toggle{display:inline-grid;place-items:center;width:42px;height:42px;min-width:42px;padding:7px;border:1px solid #e0c58a35;border-radius:50%;background:#ffffff08;color:#c6c4c0;cursor:pointer}.portal-search-toggle{font-size:28px;line-height:1}.header-actions #controller:hover,.portal-search-toggle:hover{background:#cfa65f26;border-color:#e2c27b;color:#ffe4ab}
#controller-dialog{width:min(1100px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box;background:#111218fa;padding:24px;color:#eee;scrollbar-gutter:stable}.controller-title{display:flex;align-items:center;gap:15px;justify-content:space-between;position:sticky;top:-24px;padding:10px 0;background:#111218f5;z-index:3}.controller-title h2{font-size:24px;margin:0}.controller-title button{font-size:23px;min-width:38px;padding:6px 12px}.controller-columns{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,1fr);gap:26px}.controller-columns>section{min-width:0}.controller-columns label{display:grid;gap:6px;margin:12px 0;font-size:13px;color:#ccc}.controller-columns input[type=checkbox]{width:20px;height:20px;accent-color:#d7b56e}.controller-columns select,.controller-columns input:not([type=checkbox]),.controller-columns button{max-width:100%;min-width:0}.controller-columns select{padding:10px;background:#1b1c23;color:#eee;border:1px solid #e2c27b33;border-radius:8px}.controller-columns input[type=range]{width:100%;accent-color:#d7b56e}.controller-columns button,#controller-dialog .controller-actions button{border:1px solid #d7b56e44;background:#ffffff08;color:#eee;border-radius:16px;padding:10px 15px;font-size:12px;cursor:pointer}.controller-columns button:hover,.controller-actions button:hover{background:#d7b56e25}.controller-note,.controller-status,#controller-dialog details{font-size:13px;color:#b5b4bc;line-height:1.7}.controller-status{color:#e3c17a;white-space:pre-wrap}.controller-actions{position:sticky;bottom:-24px;background:#111218f5;padding:14px 0;display:flex;gap:12px;flex-wrap:wrap;z-index:2}.controller-mappings{display:grid;gap:4px}.controller-mappings label{padding:10px;border:1px solid #ffffff12;border-radius:10px}.controller-live-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.controller-live-buttons span{font-size:11px;padding:9px 5px;background:#ffffff06;border:1px solid #ffffff20;border-radius:9px;overflow-wrap:anywhere}.controller-live-buttons .pressed{background:#d8b46255;border-color:#efd189;color:#ffe9b7;box-shadow:0 0 15px #d8b46233}.controller-axes meter{width:100%;height:18px}.controller-columns output{font-size:12px;color:#e1c17d}#controller-dialog a{color:#e4c47c}
#search-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;padding:clamp(18px,4vw,60px);background:#08090dfb;color:#eee;box-sizing:border-box;overflow:hidden;display:none;flex-direction:column;gap:18px}#search-dialog[open]{display:flex}#search-dialog::backdrop{background:#030407ef}.search-toolbar{display:flex;align-items:center;gap:16px;border:1px solid #d7b56e77;border-radius:18px;background:#ffffff09;padding:10px 16px;flex-shrink:0;min-width:0}.search-symbol{color:#e6c888;font-size:32px}.search-toolbar input{border:0;background:transparent;outline:none;min-width:0;flex:1;color:#fff;font:clamp(16px,2vw,25px) Segoe UI;padding:10px 0}.search-toolbar>button{background:#ffffff10;border:1px solid #ffffff20;border-radius:50%;width:36px;height:36px;color:#eee;font-size:22px;cursor:pointer}.search-filters{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}.search-filters select{padding:11px 15px;border-radius:24px;border:1px solid #d7b56e33;background:#18191f;color:#eee;min-width:0;max-width:100%}.search-status{font-size:13px;color:#cfbb92;margin:0;flex-shrink:0}.search-results{min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:22px;padding:5px 5px 30px;align-content:start}.search-game-card{display:flex;flex-direction:column;align-items:stretch;padding:0 0 14px;overflow:hidden;text-align:left;border:1px solid #ffffff20;border-radius:18px;background:#15161c;color:#eee;cursor:pointer;min-width:0}.search-game-card img{display:block;width:100%;aspect-ratio:800/470;object-fit:cover;background:#111}.search-game-card strong{font-size:16px;margin:14px 15px 5px;overflow-wrap:anywhere}.search-game-card small{margin:0 15px;color:#a8a7b0}.search-game-card:hover,.search-game-card:focus-visible{border-color:#edcd81;box-shadow:0 0 22px #dfbd6540;outline:none}body.search-open>.header{filter:brightness(.4)}
@media(max-width:700px){.controller-columns{grid-template-columns:1fr}.controller-title h2{font-size:20px}#controller-dialog{padding:16px}.controller-title{top:-16px}.controller-actions{bottom:-16px}.header-actions{gap:7px}.header-actions #controller,.portal-search-toggle{width:36px;height:36px;min-width:36px}.header-actions #controller svg{width:23px}.search-filters{gap:7px}.search-filters select{flex:1 1 120px;font-size:12px}.search-toolbar{gap:9px;padding:8px 10px}.search-results{gap:14px}#search-dialog{gap:13px}}
#controller-dialog,#search-dialog{zoom:calc(1 / var(--interface-scale,1))}
.search-results{grid-auto-rows:max-content}.search-game-card{display:block;align-self:start}.search-game-card strong,.search-game-card small{display:block}.search-game-card img{height:auto}#controller-dialog{scroll-padding-block:80px 140px}

.controller-title button{border:1px solid #d7b56e44;background:#ffffff08;color:#eee;border-radius:50%;cursor:pointer}.controller-title button:hover{background:#d7b56e25}.controller-columns p{overflow-wrap:anywhere}.player-toolbar>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-toolbar #player-controls{flex-shrink:0}.header{gap:clamp(18px,3.4vw,65px)}.header-actions{gap:12px}@media(max-width:700px){.header-actions{gap:7px}}
@media(min-width:541px) and (max-width:1000px){.header .brand>span{display:none}.header nav{gap:10px}}
.pad-basic{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:20px 0}.pad-basic>label{display:grid;gap:5px;font-size:12px;flex:1;min-width:180px}.pad-basic>p{width:100%;font-size:12px;color:#b8b5ad;margin:0}.pad-basic select,.pad-editor select{background:#202129;color:#eee;border:1px solid #ddbd7a44;border-radius:12px;padding:11px;max-width:100%;min-width:0}.pad-basic>select{max-width:300px}.pad-workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(230px,1fr);gap:24px;align-items:center;padding:18px;background:radial-gradient(ellipse at 35% 40%,#d3b36a15,transparent 70%);border:1px solid #d8b77222;border-radius:22px}.pad-stage{position:relative;aspect-ratio:800/480;width:100%;min-width:0}.pad-body{width:100%;height:100%;filter:drop-shadow(0 20px 20px #0008)}.pad-key,.pad-stick{position:absolute;transform:translate(-50%,-50%);margin:0;border:1px solid #626878;border-radius:50%;background:#272b35;color:#eceff6;min-width:0;padding:0;width:6%;aspect-ratio:1;font-size:clamp(10px,1.5vw,20px);display:grid;place-items:center;box-shadow:0 3px 5px #0007}.pad-key:active,.pad-stick:active{transform:translate(-50%,-50%) scale(.94)}.pad-key-4,.pad-key-5,.pad-key-6,.pad-key-7{width:12%;border-radius:12px;aspect-ratio:3;font-size:12px}.pad-key-8,.pad-key-9{width:7%;font-size:8px;border-radius:8px;aspect-ratio:1.5}.pad-key-17{width:29%;aspect-ratio:2.5;border-radius:12px;background:#858d9c;color:#222;font-size:12px}.pad-key-10,.pad-key-11{display:none}.pad-stick{width:13%;background:radial-gradient(circle,#30343c 50%,#14161b 55%,#585d65 64%,#111 70%);transform:translate(calc(-50% + var(--stick-x,0px)),calc(-50% + var(--stick-y,0px)));font-size:12px}.pad-key.pressed,.pad-stick.pressed{background:#d5ad52!important;color:#191710;box-shadow:0 0 20px #eac87899;scale:.95}.pad-key.chosen,.pad-stick.chosen{outline:2px solid #f1cc79;outline-offset:4px}.pad-editor{padding:20px;background:#121319d9;border:1px solid #d5b36544;border-radius:18px;min-width:0;animation:pad-editor-in .18s ease}.pad-editor h3{font-size:24px;margin:12px 0}.pad-editor p,.pad-hint{font-size:12px;line-height:1.8;color:#bfbcb2;white-space:pre-line}.pad-editor select{width:100%}.pad-editor button{padding:12px 15px;border:1px solid #d5b36566;background:#d5b36520;border-radius:14px;margin-top:15px;font-size:12px}.pad-editor label{display:grid;gap:8px;margin:16px 0;font-size:12px}.pad-editor input{max-width:100%;accent-color:#dfbe78}.pad-editor output,.pad-kicker{font-size:10px;letter-spacing:1.4px;color:#d9b66b}.pad-advanced{margin:20px 0}.pad-advanced>summary{cursor:pointer;padding:15px;border:1px solid #fff2;border-radius:14px;color:#c9bea4;font-size:13px}.pad-stage[data-model=ps4] .pad-shell{fill:#30343e;stroke:#555b6c}.pad-stage[data-model=ps4] .pad-key-17{width:25%;background:#20232a;color:#c2c5ce;border-color:#576079}.pad-stage[data-model=ps4] .pad-key-0{color:#8aa9e1}.pad-stage[data-model=ps4] .pad-key-1{color:#e5929b}.pad-stage[data-model=ps4] .pad-key-2{color:#d5a4cc}.pad-stage[data-model=ps4] .pad-key-3{color:#93cfc2}@keyframes pad-editor-in{from{opacity:0;translate:12px 0}to{opacity:1;translate:0}}@media(max-width:750px){.pad-workspace{grid-template-columns:1fr;padding:12px;gap:10px}.pad-editor{padding:16px}.pad-basic>select{width:100%;max-width:100%}.pad-key{font-size:13px}.pad-key-8,.pad-key-9{font-size:7px}.pad-key-17{font-size:10px}}@media(prefers-reduced-motion:reduce){.pad-editor{animation:none}}
.pad-shell-ps4{display:none}.pad-stage[data-model=ps4] .pad-shell{display:none}.pad-stage[data-model=ps4] .pad-shell-ps4{display:block}.pad-stage[data-model=ps4] .pad-key-17{width:25%;aspect-ratio:2.6}.pad-editor input[type=checkbox]{justify-self:start;width:20px;height:20px}.pad-key.pressed{translate:0 2px}.pad-stage{isolation:isolate}.pad-basic>select:nth-child(3){font-size:11px}.pad-editor:focus-within{border-color:#dfc48177}

/* Controller face: consistent geometry, recessed pad and tactile controls. */
.pad-key-17{width:29%;aspect-ratio:2.55;background:linear-gradient(#dce1eb,#b3bac8);border:1px solid #939baa;color:#434b59;box-shadow:0 2px 4px #0005,inset 0 1px #fff8}
.pad-key-12,.pad-key-13,.pad-key-14,.pad-key-15{border-radius:7px;width:5.7%;background:linear-gradient(#393f4a,#181c25);font-size:16px}
.pad-key-0,.pad-key-1,.pad-key-2,.pad-key-3{background:linear-gradient(#353b47,#171b24);border-color:#7c8596;box-shadow:0 3px 4px #0008,inset 0 1px #ffffff30}
.pad-key-8,.pad-key-9{width:4.8%;aspect-ratio:.8;font-size:7px;border-radius:10px}
.pad-key-16{width:5%;font-size:12px}.pad-body{filter:drop-shadow(0 12px 12px #0007)}
.game-controller-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.game-controller-actions>h3,.game-controller-actions>p{grid-column:1/-1}
@media(max-width:600px){.game-controller-actions{grid-template-columns:1fr}}

.pad-game-search{position:relative;flex:1;min-width:220px}.pad-game-search>label{display:block;font-size:12px;margin-bottom:6px}.pad-game-search>input{width:100%;min-width:0;padding:12px 14px;border:1px solid #ddbd7a55;border-radius:12px;background:#202129;color:#eee;font:inherit;font-size:14px}.pad-search-current,.pad-search-count{font-size:12px;color:#c9bea4;margin:7px 0;overflow-wrap:anywhere}.pad-search-results{position:absolute;top:100%;left:0;right:0;max-height:260px;overflow:auto;z-index:20;background:#161820;border:1px solid #ddbd7a66;border-radius:12px;padding:10px;box-shadow:0 14px 35px #0009}.pad-search-results>button{display:block;width:100%;text-align:left;white-space:normal;overflow-wrap:anywhere;padding:10px;border:0;border-radius:8px;background:transparent;color:#eee;font-size:13px}.pad-search-results>button:hover,.pad-search-results>button:focus-visible{background:#d8b46233}.pad-search-results>button[aria-pressed=true]{color:#efd18e}
@media(max-width:750px){.pad-game-search{flex-basis:100%;min-width:0}}

/* Small auxiliary buttons beside the upper edge of the touchpad. */
.pad-stage .pad-key-8,.pad-stage .pad-key-9{width:2.8%;aspect-ratio:.6;border-radius:6px;font-size:0;box-shadow:0 2px 3px #0007,inset 0 1px #ffffff30}
.pad-stage .pad-key-8::before,.pad-stage .pad-key-9::before{content:'';width:35%;height:35%;border-top:1px solid #c9cdd6;border-bottom:1px solid #c9cdd6}