/* Home, transient preference/setup screens, and board tools are distinct surfaces. */
[hidden] { display:none !important; }
.public-launcher { overflow-y:auto !important; overflow-x:hidden !important; }
@media(min-width:701px) {
  .public-launcher { scrollbar-width:none; }
  .public-launcher::-webkit-scrollbar { display:none; }
}
.public-launcher .launcher-brand { margin-bottom:18px; }
.public-launcher .home-group-title { margin:18px 0 9px; color:#adb9cf; font-size:10px; font-weight:600; letter-spacing:.18em; }
.public-launcher .launch-actions { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.public-launcher .launch-menu-button { min-height:52px; padding:10px 32px 10px 12px; font-size:14px; }
.public-launcher .launch-menu-button::after { display:none; }
.public-launcher .home-play > :nth-child(1) { order:2; }
.public-launcher .home-play > :nth-child(2) { order:1; }
.public-launcher .home-play > :nth-child(3) { order:3; }
.public-launcher .home-secondary { margin-top:22px; padding-top:14px; border-top:1px solid #8199bb30; }
.public-launcher .home-secondary .launch-menu-button { min-height:40px; text-align:center; padding:8px; font-size:12px; }
.public-launcher .home-secondary .menu-info { display:none; }
.home-resume { width:100%; margin-bottom:10px; }
.trials-launcher { display:grid; width:100%; gap:6px; padding:18px; text-align:left; border-color:#ba88d5; background:linear-gradient(115deg,#55305c80,#1a2a5380); }
.trials-launcher strong { font-size:17px; letter-spacing:.1em; color:#f0cff7; }
.trials-launcher span { font-size:12px; color:#c6c4df; }
.route5-screen { box-sizing:border-box; width:min(900px,calc(100vw - 40px)); max-width:none; height:min(660px,calc(100dvh - 40px)); max-height:none; padding:0; margin:auto; overflow:hidden; color:#e5edf5; background:#09121e; border:1px solid #6f98b3; border-radius:18px; box-shadow:0 24px 100px #0009; font:14px/1.5 Inter,system-ui,sans-serif; }
.route5-screen::backdrop { background:#030712c9; backdrop-filter:blur(7px); }
.route5-screen[open] { display:flex; flex-direction:column; }
.screen-header { display:flex; flex-shrink:0; gap:16px; justify-content:space-between; align-items:center; padding:22px 26px; border-bottom:1px solid #64849c40; background:#101e2d; }
.screen-header h2 { margin:0; font-size:24px; letter-spacing:.02em; }
.screen-header small { color:#91a7bd; font-size:9px; letter-spacing:.24em; }
.screen-header button { min-height:42px; }
.settings-layout { display:grid; grid-template-columns:190px minmax(0,1fr); min-height:0; flex:1; }
.settings-categories { display:flex; flex-direction:column; gap:6px; padding:20px 12px; border-right:1px solid #64849c30; overflow-y:auto; }
.settings-categories button { min-height:44px; text-align:left; border-color:transparent; background:transparent; color:#acbdd0; }
.settings-categories button[aria-current] { color:#f6fbff; background:#29455d; border-color:#679ab7; }
.settings-content { padding:24px 30px; overflow:auto; min-width:0; }
.settings-content h3 { margin:0 0 20px; font-size:19px; }
.route5-screen .row { display:flex; justify-content:space-between; align-items:center; gap:18px; min-height:48px; padding-block:8px; margin:0; border-bottom:1px solid #64849c20; }
.route5-screen input[type="checkbox"] { width:20px; height:20px; accent-color:#83c8e0; flex-shrink:0; }
.route5-screen input[type="color"] { width:50px; height:34px; border:1px solid #7293b0; padding:2px; background:transparent; }
.route5-screen select { max-width:60%; min-height:40px; padding:7px; color:#f3f6ff; background:#14283a; border:1px solid #4d718d; border-radius:6px; }
.route5-screen .control-section { margin:0; padding:0; border:0; }
.route5-screen .control-section-title { display:none; }
.route5-screen .classic-dark-mode-control { display:flex; }
.route5-screen .settings-note,.route5-screen small { color:#adbed0; line-height:1.6; }
.route5-screen small { display:block; }
.route5-screen .reset-warning { color:#debca9; margin-top:20px; line-height:1.7; }
.route5-screen #ui-init { width:100%; min-height:48px; border-color:#a97768; }
.route5-screen #settings-audio-slot > label { display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:20px; }
.route5-screen .range-control { display:flex; align-items:center; gap:12px; }
.route5-screen input[type="range"] { max-width:100%; accent-color:#83c8e0; }
.route5-screen .range-value { min-width:3ch; }
.setup-screen { width:min(600px,calc(100vw - 40px)); height:auto; max-height:calc(100dvh - 40px); }
.screen-content { padding:24px 26px; overflow:auto; }
.screen-content h3 { margin:0 0 12px; font-size:15px; }
.board-size-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.board-size-buttons button { min-width:0; min-height:44px; }
.board-size-buttons button.active { border-color:#a2d6e7; background:#28475c; }
.screen-primary { width:100%; margin-top:22px; min-height:48px; background:#245064; border-color:#8dc9d8; font-size:15px; }
#debug-controls > button { display:block; width:100%; margin-bottom:10px; min-height:44px; }
.apex-preset-field { display:grid; gap:8px; }
.apex-preset-field textarea { box-sizing:border-box; width:100%; resize:vertical; padding:12px; color:#f3f6ff; background:#101f2e; border:1px solid #52758f; border-radius:8px; font:14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
#apex-human-role { display:flex; gap:18px; margin:20px 0 0; padding:14px; border:1px solid #64849c40; border-radius:8px; }
#apex-human-role legend { padding-inline:6px; color:#adbed0; }
#apex-human-role label { display:flex; align-items:center; gap:7px; }
#apex-test-error { min-height:1.5em; color:#ff9a9a; }
.apex-response { position:fixed; z-index:40; left:50%; bottom:28px; width:min(430px,calc(100vw - 28px)); box-sizing:border-box; padding:16px; transform:translateX(-50%); color:#eef8ff; background:#091724f2; border:1px solid #7fc6df; border-radius:14px; box-shadow:0 18px 60px #000a; text-align:center; }
.apex-response > strong,.apex-response > span { display:block; }
.apex-response > span { margin:5px 0 13px; color:#b7c9d7; font-size:12px; }
.apex-response > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.apex-response button { min-height:44px; }
.apex-response #apex-swap { border-color:#d68bd4; background:#4b2456; }
#trials-screen details { margin-top:18px; }
#trials-screen summary { cursor:pointer; padding-block:10px; }
#trials-screen #training-start { width:100%; margin-block:16px; }
body.dedicated-screen-open .floating-panel, body.dedicated-screen-open .move-list { visibility:hidden; }
body:has(#public-launcher:not([hidden])) .floating-panel, body:has(#public-launcher:not([hidden])) .control-surface { visibility:hidden; }
html:not([data-route5-profile="development"]) [data-open-debug], html:not([data-route5-profile="development"]) #debug-screen, html:not([data-route5-profile="development"]) #apex-test-screen, html:not([data-route5-profile="development"]) #apex-response { display:none !important; }
@media(max-width:700px) {
  .public-launcher .launch-actions { grid-template-columns:1fr; }
  .public-launcher .home-secondary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .public-launcher .home-secondary button { font-size:11px; padding:7px 4px; }
  .public-launcher .launch-menu-button { min-height:46px; }
  .route5-screen { width:calc(100vw - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); border-radius:12px; }
  .screen-header { padding:15px; gap:10px; }
  .screen-header h2 { font-size:20px; }
  .screen-header button { max-width:52%; font-size:12px; }
  .settings-layout { display:flex; flex-direction:column; }
  .settings-categories { flex-shrink:0; flex-direction:row; overflow-x:auto; padding:10px; gap:5px; border-right:0; border-bottom:1px solid #64849c40; }
  .settings-categories button { flex-shrink:0; white-space:nowrap; text-align:center; }
  .settings-content,.screen-content { padding:20px 16px; overscroll-behavior:contain; }
  .route5-screen select { font-size:16px; }
  .setup-screen { height:auto; }
  .route5-screen .row { min-height:50px; gap:10px; }
  .route5-screen .row span { max-width:68%; }
  .trials-launcher { padding:14px; }
}