/* Layout around preserved image_gen jade frames. No new decorative artwork. */
#device-onboarding{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:16px;background:rgba(3,13,18,.88);color:#efe4c7;--onboarding-text-scale:1;font-family:var(--pixel,system-ui,sans-serif);font-size:calc(16px * var(--onboarding-text-scale));line-height:1.45;text-shadow:none;box-sizing:border-box}
#device-onboarding *,#device-onboarding *::before,#device-onboarding *::after{box-sizing:border-box}
#device-onboarding .onboarding-panel{width:min(750px,100%);max-width:100%;max-height:calc(100dvh - 32px);min-height:0;display:flex;flex-direction:column;gap:14px;border:20px solid transparent;border-image:url('assets/ui/arena-jade-quiet.png') 40 95 fill / 20px 42px / 0 stretch;padding:16px 30px;image-rendering:pixelated}
#device-onboarding header,#device-onboarding footer{flex:none;min-width:0}
#device-onboarding h2{font-size:1.55em;line-height:1.15;margin:4px 0 8px;color:#fff0c2}
#device-onboarding p{margin:6px 0 12px}
#device-onboarding :is(p,h2,strong,small,button,li,span,output){overflow-wrap:break-word;max-width:100%}
#device-onboarding .onboarding-kicker{font-size:.72em;color:#bcd6c0;letter-spacing:.07em;margin:0}
#device-onboarding #onboarding-intro{font-size:.88em;line-height:1.4;margin-bottom:10px}
#device-onboarding .onboarding-steps{display:flex;gap:12px;margin:0;padding:0;list-style:none;font-size:.78em;color:#a9b9b1}
#device-onboarding .onboarding-steps li{display:flex;align-items:baseline;gap:5px;flex:1;min-width:0;line-height:1.25}
#device-onboarding .onboarding-step-label{min-width:0;overflow-wrap:anywhere}
#device-onboarding .onboarding-steps [aria-current=step]{color:#ffe7a4;font-weight:bold}
#device-onboarding .onboarding-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable;padding-right:6px}
#device-onboarding .onboarding-languages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:2px 0 8px}
#device-onboarding button{font:inherit;line-height:1.25;color:#efe4c7;background:none;box-shadow:none;border-radius:0;border:12px solid transparent;border-image:url('assets/ui/arena-jade-quiet.png') 40 95 fill / 12px 24px / 0 stretch;padding:7px 16px;min-width:0;min-height:48px;white-space:normal;text-shadow:none;cursor:pointer;image-rendering:pixelated}
#device-onboarding button:is([aria-pressed=true],:focus-visible,.controller-focused){border-image-source:url('assets/ui/arena-jade-selected.png');filter:brightness(1.12);outline:2px solid #ffe49d;outline-offset:-2px}
#device-onboarding button:disabled{opacity:.42;cursor:default}
#device-onboarding .onboarding-primary{border-image-source:url('assets/ui/arena-jade-play.png');color:#23382d;font-weight:700}
#device-onboarding .onboarding-fields{display:flex;flex-direction:column;gap:13px;margin:12px 0}
#device-onboarding .onboarding-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,39%);align-items:center;gap:12px;min-width:0;min-height:38px;padding:2px 0}
#device-onboarding .onboarding-row:has(input[type=checkbox]){grid-template-columns:minmax(0,1fr) 32px}
#device-onboarding .onboarding-row strong{font-size:.94em;font-weight:400;display:block}
#device-onboarding .onboarding-row small{display:block;font-size:.75em;color:#c0cdc0;line-height:1.35;margin-top:4px}
#device-onboarding .onboarding-row output{display:inline-block;color:#ffe2a2;font-size:.8em}
#device-onboarding input[type=checkbox]{width:24px;height:24px;margin:0;accent-color:#e8c876;justify-self:center}
#device-onboarding input[type=range]{width:100%;min-width:0;min-height:36px;margin:0;accent-color:#e8c876;cursor:pointer}
#device-onboarding select{font:inherit;font-size:.86em;width:100%;min-width:0;max-width:100%;min-height:44px;padding:8px;color:#eee3c6;background:#10372f;border:1px solid #b69954;border-radius:0}
#device-onboarding :is(input,select):focus-visible{outline:2px solid #ffe49d;outline-offset:3px}
#device-onboarding .onboarding-device>strong{color:#ffe2a2;font-size:.95em}
#device-onboarding .onboarding-device p{font-size:.88em;line-height:1.5}
#device-onboarding .onboarding-note,#device-onboarding .onboarding-pad-hint{font-size:.75em;color:#bccfc2;margin:10px 0 0;line-height:1.4}
#device-onboarding .onboarding-actions{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px}
#device-onboarding .onboarding-error{color:#ffc6a4;font-size:.88em}
#device-onboarding [hidden]{display:none!important}
@media(max-width:540px){
 #device-onboarding{padding:8px;font-size:calc(14px * var(--onboarding-text-scale))}
 #device-onboarding .onboarding-panel{border-width:12px;border-image-width:12px 22px;padding:14px 14px;max-height:calc(100dvh - 16px);gap:12px}
 #device-onboarding .onboarding-kicker,#device-onboarding #onboarding-intro{display:none}
 #device-onboarding h2{font-size:1.25em;margin:0 0 10px}
 #device-onboarding .onboarding-languages{grid-template-columns:1fr;gap:5px}
 #device-onboarding .onboarding-languages button{min-height:48px}
 #device-onboarding .onboarding-steps{gap:7px;font-size:.75em}
 #device-onboarding .onboarding-steps li{flex-direction:column;gap:2px}
 #device-onboarding .onboarding-actions{grid-template-columns:1fr 1fr;gap:6px}
 #device-onboarding .onboarding-actions .onboarding-primary{grid-column:1/-1;order:-1}
 #device-onboarding .onboarding-actions button{padding:7px 8px;border-image-width:12px 20px;font-size:clamp(14px,.83em,17px)}
 #device-onboarding .onboarding-row:not(:has(input[type=checkbox])){grid-template-columns:1fr;gap:3px}
 #device-onboarding .onboarding-fields{gap:10px}
}
@media(max-height:560px) and (min-width:541px){
 #device-onboarding{padding:8px;font-size:calc(14px * var(--onboarding-text-scale))}
 #device-onboarding .onboarding-panel{max-height:calc(100dvh - 16px);padding:9px 25px;border-width:14px;border-image-width:14px 36px;gap:8px}
 #device-onboarding h2{font-size:1.25em;margin:0 0 4px}
 #device-onboarding .onboarding-kicker,#device-onboarding footer>.onboarding-note{display:none}
 #device-onboarding #onboarding-intro{margin:0 0 5px;font-size:.8em}
 #device-onboarding .onboarding-actions button{padding:3px 14px;min-height:44px}
 #device-onboarding .onboarding-pad-hint{margin-top:4px}
}

@media(max-height: 420px) {
  #device-onboarding { padding: 4px; font-size: calc(12px * var(--onboarding-text-scale)); }
  #device-onboarding .onboarding-panel { max-height: calc(100dvh - 8px); padding: 5px 18px; border-width: 10px; border-image-width: 10px 24px; gap: 4px; }
  #device-onboarding h2 { font-size: 1.1em; margin: 0 0 2px; }
  #device-onboarding #onboarding-intro { display: none; }
  #device-onboarding .onboarding-steps { margin: 2px 0 3px; font-size: 0.72em; }
  #device-onboarding .onboarding-languages { gap: 6px; padding: 2px 0; }
  #device-onboarding button { min-height: 36px; padding: 4px 10px; font-size: 0.88em; }
  #device-onboarding .onboarding-actions { gap: 6px; }
}