:root{color-scheme:dark;font:15px system-ui,sans-serif;background:#10151e;color:#e6edf8}*{box-sizing:border-box}body{margin:0}header{padding:28px 5vw;border-bottom:1px solid #2a3445;background:#151d29}header strong{font-size:26px}header span{font-size:11px;letter-spacing:2px;margin-left:20px;color:#7bcbb8}header p{margin:8px 0 0;color:#9faec3}main{max-width:1250px;margin:auto;padding:28px}h1{margin-top:0;font-size:24px}section{border:1px solid #2a3445;border-radius:14px;background:#151d29;padding:24px}#connection{max-width:760px;margin:auto}p{line-height:1.6}label{display:block;margin:14px 0;color:#bac9dc}input,textarea,select,button{font:inherit;border-radius:7px;border:1px solid #3d4b61;padding:10px;background:#10151e;color:#e6edf8}input:not([type=checkbox]),textarea{display:block;width:100%;margin-top:7px}button{cursor:pointer;background:#244f45;border-color:#3c8d78;margin:5px 0}button:hover{filter:brightness(1.2)}button:disabled{opacity:.45;cursor:default}.row{display:flex;gap:18px}.row>*{flex:1;min-width:0}.inline{display:flex;align-items:center;gap:8px}details{margin:18px 0}summary{cursor:pointer}.import{border:1px dashed #4c6b80;padding:12px;border-radius:8px}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.toolbar label{margin:5px 0}.toolbar input[type=number]{width:100px}#stage{margin:16px 0;background:#05080d;display:flex;align-items:center;justify-content:center;min-height:220px}video{display:block;width:100%;max-height:72vh;object-fit:contain;outline:none}video:focus{outline:2px solid #63bca4}#stage:fullscreen{width:100vw;height:100vh}#stage:fullscreen video{width:100%;height:100%;max-height:none}.hint,footer{color:#9faec3;font-size:13px}footer{margin-top:28px;text-align:center;line-height:1.8}#status{padding:10px 0;color:#8bdbc4}#permission{font-size:13px}#metrics{font-variant-numeric:tabular-nums;color:#8bdbc4}[hidden]{display:none!important}@media(max-width:650px){main{padding:14px}section{padding:16px}.row{display:block}header span{display:block;margin:8px 0 0}}

/* The toolbar overlays the video, so hiding it never resizes the remote screen. */
body.session{overflow:hidden;background:#05080d}
body.session>header,body.session footer,body.session #status,body.session #connection{display:none}
body.session main{width:100%;max-width:none;height:100dvh;margin:0;padding:0}
body.session #remote,#remote:fullscreen{position:relative;display:flex;flex-direction:column;width:100%;height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#05080d;overflow:hidden}
.session-toolbar{flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-height:42px;padding:4px 8px;background:#151d29;overflow-x:auto}
.session-toolbar button{flex:none;white-space:nowrap;margin:0;padding:6px 10px;font-size:13px;line-height:20px;border-radius:5px}
.session-toolbar button[aria-pressed=true]{background:#35745f;border-color:#85d4b8}
body.session #stage,#remote:fullscreen #stage{flex:1;min-height:0;width:100%;margin:0;overflow:hidden}
body.session video,#remote:fullscreen video{width:100%;height:100%;max-height:none;object-fit:contain;outline:none}
body.session .session-toolbar{position:absolute;z-index:10;top:0;left:0;right:0;transform:translateY(-100%);pointer-events:none;transition:transform .18s ease}
body.session.toolbar-visible .session-toolbar{transform:translateY(0);pointer-events:auto}
@media(prefers-reduced-motion:reduce){body.session .session-toolbar{transition:none}}

#machines{width:100%;padding:6px;min-height:170px;background:#10151e}
#machines option{padding:12px;border-radius:5px}
#machines option:checked{background:#244f45;color:#e6edf8}
#machines option[data-presence=available]{color:#8bdbc4}
#machines option[data-presence=busy]{color:#f2cb78}
#machines option[data-presence=offline]{color:#9faec3}
#machines option[data-presence=invalid],#machines option[data-presence=unknown],#machines option[data-presence=unsupported]{color:#e8b1a8}
#machine-actions{display:flex;gap:12px;align-items:flex-end;margin:12px 0 20px}
#machine-actions label{flex:1;margin:0}
.machine-buttons{display:flex;gap:8px}
#remove-machine{background:#382329;border-color:#70404a}
#connect{min-width:150px}
@media(max-width:650px){#machine-actions{display:block}.machine-buttons{margin-top:8px}}

header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.language-picker{display:flex;align-items:center;gap:10px;margin:0}
.language-picker span{font-size:13px;letter-spacing:0;margin:0;color:#bac9dc}
.language-picker select{font-size:13px;max-width:240px}
.language-picker .language-icon{display:inline-flex;width:28px;height:20px;margin:0;flex:none;color:#a9d7cd}
.language-icon>span,.language-icon svg{display:block;width:28px;height:20px;margin:0;border-radius:3px;overflow:hidden}
#manual-fields{margin:0;padding:0;border:0;min-width:0}

.mobile-input{position:absolute;bottom:0;left:0;width:1px!important;height:1px;min-height:0;margin:0!important;padding:0;border:0;opacity:.01;font-size:16px;pointer-events:none;resize:none}

body.session #stage{touch-action:none}
#gesture-hint{position:absolute;z-index:20;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:12px 18px;border-radius:9px;background:#15202eed;border:1px solid #527565;color:#e6edf8;font-size:14px;line-height:1.5;text-align:center;pointer-events:none}
.virtual-gamepad{--pad-size:clamp(90px,17vw,128px);position:absolute;inset:0;z-index:5;pointer-events:none;user-select:none;-webkit-user-select:none}
.vpad-group,.vpad-stick,.vpad-close{position:absolute}
.vpad-button,.vpad-close,.vpad-stick{pointer-events:auto;touch-action:none;-webkit-touch-callout:none}
.vpad-button,.vpad-close{border:1px solid #d5e4f77a;background:#162637e8;color:#fff;box-shadow:0 2px 10px #0005;margin:0}
.vpad-button{width:44px;height:44px;padding:0;border-radius:50%;font-size:15px;font-weight:600}
.vpad-button.pressed{background:#73d8adbd;border-color:#d8ffef;transform:scale(.94)}
.vpad-stick{width:var(--pad-size);height:var(--pad-size);border:2px solid #e2edff73;border-radius:50%;background:#16263766;box-shadow:inset 0 0 25px #0005}
.vpad-knob{position:absolute;left:50%;top:50%;width:42%;height:42%;border-radius:50%;border:1px solid #e3edff9c;background:#bdcfe58c;transform:translate(calc(-50% + var(--stick-x,0px)),calc(-50% + var(--stick-y,0px)))}
.vpad-stick-left{left:max(18px,env(safe-area-inset-left));bottom:26px}
.vpad-stick-right{right:max(18px,env(safe-area-inset-right));bottom:26px}
.vpad-shoulders-left{left:max(18px,env(safe-area-inset-left));bottom:calc(var(--pad-size) + 190px);display:flex;gap:10px}
.vpad-shoulders-right{right:max(18px,env(safe-area-inset-right));bottom:calc(var(--pad-size) + 190px);display:flex;gap:10px}
.vpad-shoulders-left button,.vpad-shoulders-right button{width:54px;height:36px;border-radius:12px}
.vpad-face,.vpad-dpad{width:134px;height:134px;bottom:calc(var(--pad-size) + 40px);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr)}
.vpad-face{right:max(15px,env(safe-area-inset-right))}.vpad-dpad{left:max(15px,env(safe-area-inset-left))}
.vpad-face button:nth-child(1),.vpad-dpad button:nth-child(1){grid-area:1/2}.vpad-face button:nth-child(2),.vpad-dpad button:nth-child(2){grid-area:2/1}.vpad-face button:nth-child(3),.vpad-dpad button:nth-child(3){grid-area:2/3}.vpad-face button:nth-child(4),.vpad-dpad button:nth-child(4){grid-area:3/2}
.vpad-a{color:#86e5a6}.vpad-b{color:#ff9d99}.vpad-x{color:#96c7ff}.vpad-y{color:#ffe99a}
.vpad-center{left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:8px}
.vpad-center button{width:48px;height:32px;font-size:10px;border-radius:12px}
.vpad-stick-clicks{left:50%;bottom:68px;transform:translateX(-50%);display:flex;gap:10px}
.vpad-stick-clicks button{width:38px;height:30px;font-size:12px;border-radius:10px}
.vpad-close{left:50%;top:max(54px,env(safe-area-inset-top));transform:translateX(-50%);padding:6px 12px;border-radius:16px;font-size:12px}
@media(orientation:landscape) and (max-height:550px){
 .virtual-gamepad{--pad-size:100px}
 .vpad-face,.vpad-dpad{bottom:38px}
 .vpad-face{right:142px}.vpad-dpad{left:142px}
 .vpad-shoulders-left,.vpad-shoulders-right{bottom:158px}
 .vpad-center{bottom:14px}.vpad-stick-clicks{bottom:58px}
 .vpad-close{top:52px}
}

.brand-icon{width:40px;height:40px;object-fit:contain;vertical-align:middle;margin-right:10px}


.web-version{font-size:12px;color:#9faec3;white-space:nowrap}header .web-version{margin-left:14px}.session-toolbar .web-version{margin-left:auto}

/* Dar Play: lobby identity, with the full-screen transport layout preserved. */
:root{--play-bg:#0c0c12;--play-panel:#1a1624;--play-ink:#faf7f0;--play-muted:#b7b1c6;--play-line:#4b3859;--play-coral:#ff785e;--play-lilac:#c5b3ff;background:var(--play-bg);color:var(--play-ink);font-family:'Segoe UI','Noto Sans',Arial,sans-serif}
body{background:var(--play-bg)}body:not(.session){background:radial-gradient(ellipse at 100% 15%,#5755f21f,transparent 50%),var(--play-bg)}
header{background:#14111d;border-bottom-color:#36323f;padding:24px 5vw}header strong{font-size:27px;letter-spacing:-.8px}header p{font-size:12px;color:var(--play-muted)}header span{color:var(--play-lilac);font-size:10px;letter-spacing:1px}.brand-icon{width:42px;height:42px}.web-version{color:var(--play-muted)}
.language-picker span{color:var(--play-muted)}.language-picker .language-icon{color:var(--play-lilac)}.language-picker select{background:#21182d;border-color:#625171}
body:not(.session) main{padding:38px 28px;max-width:1100px}#connection{max-width:900px;border:0;border-radius:0;background:transparent;padding:0}#connection h1{font-size:clamp(29px,4vw,40px);font-weight:750;letter-spacing:-1.4px;line-height:1.15;margin:0 0 14px}#connection>p{color:var(--play-muted);font-size:13px;max-width:610px;margin-bottom:26px}
label{color:var(--play-muted);font-size:12px}input,textarea,select{background:#100e18;color:var(--play-ink);border-color:#625171;border-radius:7px}button{background:#2c2139;color:var(--play-ink);border-color:#72568a;border-radius:8px;transition:background .18s,transform .18s}button:hover{filter:none;background:#40304f}button:disabled{opacity:.55;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.import:focus-within{outline:2px solid var(--play-lilac);outline-offset:4px}
.import{display:flex;flex-wrap:wrap;align-items:center;gap:15px;padding:16px 18px;border:1px dashed #8a68a7;border-radius:10px;background:#251a32;color:#eee3ff;max-width:610px}.import input{flex:1;width:auto!important;min-width:180px;margin:0!important;background:#17101f;font-size:12px}.import input::file-selector-button{border:0;background:var(--play-lilac);color:#2c1c40;padding:8px 12px;border-radius:5px;margin-right:12px;cursor:pointer}
.machine-buttons{flex-wrap:wrap;gap:9px}.machine-buttons button{font-size:11px;padding:8px 12px;background:#21182d;border-color:#654977}#remove-machine{background:#422233;border-color:#956176}#connect{background:var(--play-coral);color:#24141a;border-color:transparent;padding:13px 23px;font-weight:650;min-width:175px;margin-top:16px}#connect:hover{background:#ff947e}#connect:disabled{background:#805149;color:#f2e2dc}
#machines{min-height:0;height:42px;background:#17101f;padding:10px;font-size:12px;margin-bottom:18px;border-color:#625171}#machines option{background:#251a32;color:var(--play-ink)}#machines option:checked{background:#53365f;color:#fff1ec}#machine-actions{border-top:1px solid #493650;padding-top:20px;margin-top:22px}#machine-name{font-size:13px}
.machine-library{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin:0 0 20px}.machine-card{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0 0 18px;overflow:hidden;text-align:left;background:#1a1624;border:1px solid #4b3859;border-radius:12px;min-width:0;transition:transform .2s,border-color .2s}.machine-card:hover{background:#241b30;transform:translateY(-3px);border-color:#ab83c2}.machine-card[aria-pressed=true]{background:#2e203c;border-color:var(--play-coral);box-shadow:0 0 0 1px #ff785e55}.machine-card-art{display:flex;align-items:flex-end;min-height:110px;padding:17px 20px;margin-bottom:17px;background:radial-gradient(circle at 82% 55%,#ff785e 0 24px,transparent 25px),radial-gradient(circle at 82% 55%,transparent 0 45px,#c5b3ff 46px 62px,transparent 63px),#5755f2;color:#faf0ef;font-size:34px;line-height:1;font-weight:800;letter-spacing:-2px}.machine-card:nth-child(even) .machine-card-art{background:radial-gradient(circle at 80% 50%,#5755f2 0 28px,transparent 29px),#69517f}.machine-card strong,.machine-card-caption,.machine-card .machine-presence{margin:0 20px;overflow-wrap:anywhere}.machine-card strong{font-size:17px;color:var(--play-ink);font-weight:650}.machine-card-caption{font-size:11px;color:var(--play-muted);margin-top:5px}.machine-card .machine-presence{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--play-muted);margin-top:13px}.machine-card .machine-presence:before{content:'';width:7px;height:7px;border-radius:50%;background:#a494b2;flex-shrink:0}.machine-card[data-presence=available] .machine-presence:before{background:#b6e9c1}.machine-card[data-presence=busy] .machine-presence:before{background:#f3ca8d}.machine-card[data-presence=invalid] .machine-presence:before{background:#ff9c8b}.library-empty{grid-column:1/-1;padding:32px;border:1px dashed #75608b;background:#21182e;border-radius:12px;color:var(--play-muted);font-size:14px;text-align:center}
#status{max-width:900px;margin:0 auto;padding:14px 0;color:var(--play-lilac);font-size:13px;overflow-wrap:anywhere}#permission,#metrics{color:var(--play-lilac)}
/* Session controls remain compact, overlay the video and never move its edges. */
.session-toolbar{background:#191220}.session-toolbar button{background:#30233e;border-color:#715582;color:var(--play-ink)}.session-toolbar button:hover{background:#493356}.session-toolbar button[aria-pressed=true]{background:var(--play-lilac);border-color:var(--play-lilac);color:#271939}#disconnect{background:#51293a;border-color:#98647c}#gesture-hint{background:#24182fed;border-color:#826197;color:#faf1ff}.vpad-button.pressed{background:#c5b3ffbd;border-color:#efe5ff}
@media(max-width:650px){header{padding:20px}.language-picker{flex-wrap:wrap;gap:8px}.language-picker select{max-width:210px}header strong{font-size:24px}body:not(.session) main{padding:28px 18px}#connection h1{font-size:30px}.import{padding:14px}.import input{min-width:0;max-width:100%}.machine-library{grid-template-columns:1fr}.machine-card-art{min-height:120px}#status{padding:12px 0}.machine-buttons button{font-size:12px}#machine-actions{margin-top:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Shared ID connection panel: desktop and browser. */
.connection-panel{position:relative;isolation:isolate;border:1px solid #51415f;border-radius:18px;padding:28px;background:linear-gradient(120deg,#262035,#1b1726 72%);margin:24px 0 30px;overflow:hidden}
.connection-panel:before{content:'';position:absolute;z-index:-1;width:230px;height:230px;right:-120px;top:-125px;border:38px solid #c5b3ff0a;border-radius:50%;pointer-events:none}
.connection-heading{display:flex;align-items:center;gap:14px;margin-bottom:25px}.connection-symbol{display:grid;place-items:center;width:48px;height:48px;flex:none;border:1px solid #79629366;border-radius:14px;background:#c5b3ff0c;color:#d4c5ff}.connection-symbol svg{width:25px;height:25px}
.connection-heading h2{margin:0 0 6px;color:#d6c6f4;font-size:10px;letter-spacing:1.7px;font-weight:650}.connection-heading p{margin:0;color:#faf7f0;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.45px}
.connection-panel>label{display:block;font-size:12px;font-weight:550;color:#c9bfd6;margin:0 0 9px}
.connection-entry{display:flex;align-items:stretch;gap:12px}.connection-entry input:not([type=checkbox]){display:block;flex:1;min-width:0;width:100%;height:54px;margin:0;padding:0 17px;border:1px solid #675574;border-radius:10px;background:#100d18;color:#faf7f0;font:500 17px 'Segoe UI',system-ui,sans-serif;letter-spacing:1px;box-shadow:inset 0 1px 3px #0003;transition:border-color .18s,box-shadow .18s}.connection-entry input::placeholder{color:#93869f;font-size:14px;font-weight:400;letter-spacing:0}.connection-entry input:focus{outline:none;border-color:#c5b3ff;box-shadow:0 0 0 3px #c5b3ff18}.connection-entry button,.connection-entry .primary{display:flex;align-items:center;justify-content:center;gap:20px;flex:none;min-width:146px;height:54px;margin:0;border:1px solid transparent;border-radius:10px;padding:0 21px;background:#ff785e;color:#28151b;font-size:14px;font-weight:650;box-shadow:0 4px 16px #ff785e14}.connection-entry button:hover{background:#ff947e;transform:translateY(-1px)}.connection-entry button:disabled{opacity:.5;transform:none;cursor:default}.connection-entry button svg{width:18px;height:18px}
.connection-panel .connection-hint{display:flex;align-items:flex-start;gap:9px;margin:15px 0 0;color:#b7abc5;font-size:12px;line-height:1.6;max-width:none}.trust-dot{display:block;flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;background:#b6e9c1;box-shadow:0 0 0 3px #b6e9c10c}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:28px 0 14px}.section-heading h2{margin:0;color:#c5b3ff;font-size:10px;letter-spacing:1px}.section-caption{font-size:11px;color:#94879f}.connection-panel #cancel-connect{margin:16px 0 0;padding:8px 12px;background:transparent;color:#d4c5df;border-color:#695274;font-size:12px}
#access-requests .card{border:1px solid #a58a66;background:#2a2230;margin:0 0 18px;padding:22px;border-radius:14px}#access-requests .card p{margin:0 0 16px;color:#f5e9d9;font-size:14px}#access-requests .card button{margin-right:10px}#access-requests .card button:first-of-type{background:#c5b3ff;color:#21152d;border-color:transparent}
@media(max-width:650px){.connection-panel{padding:22px 18px;border-radius:14px;margin:20px 0 25px}.connection-heading{gap:12px;margin-bottom:22px}.connection-heading p{font-size:18px}.connection-heading h2{font-size:9px;letter-spacing:1px}.connection-symbol{width:42px;height:42px;border-radius:12px}.connection-entry{flex-direction:column;gap:10px}.connection-entry button{width:100%;height:50px}.connection-panel .connection-hint{font-size:11px}.section-heading{align-items:flex-start;flex-direction:column;gap:6px}.section-caption{font-size:10px}}

#machines{display:none}label[for=machines]{display:none}#connection>.section-heading{margin-top:32px}#connection .connection-panel h2{margin-top:0}#connection .connection-heading p{margin:0}#connection .connection-entry button span{font-size:20px}#status{background:#c5b3ff08;border-radius:10px;padding:13px 16px;margin-top:18px}#machine-actions{margin-top:16px}

.connection-entry input:not([type=checkbox]){min-height:54px}@media(max-width:650px){.connection-entry input:not([type=checkbox]){flex:none}}