/* Browser/mobile edition. Controls stay in physical directions in RTL too. */
#touch-controls { display: none; }
#loading-retry { margin-top: 18px; min-height: 44px; padding: 8px 24px; }
dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
button:focus-visible, select:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
@media (any-pointer: coarse), (max-width: 700px) {
  #controls-help { display: none !important; }
  #touch-controls {
    position: fixed; z-index: 40; display: flex; align-items: end;
    justify-content: space-between; gap: 12px; direction: ltr;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(62px + env(safe-area-inset-bottom));
    pointer-events: none;
  }
  .touch-steering, .touch-pedals { display: flex; gap: 8px; }
  .touch-pedals { flex-direction: column; }
  #touch-controls button {
    pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none; width: 56px; height: 56px; padding: 0;
    border: 2px solid #ffffffb3; border-radius: 16px; color: #fff;
    background: #123d43ed; font-size: 25px; box-shadow: 0 3px 12px #0005;
  }
  #touch-controls button.pressed { background: #087b91; transform: scale(.96); }
  #touch-controls .touch-stop { background: #a22b2b; }
  #top-bar { height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; }
  .brand { font-size: 16px; max-width: 45%; }
  #game-settings-button { top: calc(8px + env(safe-area-inset-top)) !important; right: max(12px, env(safe-area-inset-right)) !important; min-height: 44px; }
  #target-card { top: calc(70px + env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); width: 140px; padding: 10px; }
  #target-card small { font-size: 10px; letter-spacing: .04em; }
  #target-symbol { gap: 8px; margin-top: 2px; }
  #target-letter { font-size: 38px; }
  #target-emoji { font-size: 29px; }
  #target-card h2 { font-size: 17px; overflow-wrap: anywhere; }
  #target-card p { display: none; }
  #target-distance { font-size: 13px; }
  #phone { top: calc(70px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 140px; border-width: 4px; border-radius: 14px; }
  .phone-speaker { display: none; }
  .phone-header { padding: 6px; font-size: 11px; }
  #map-canvas { display: block; height: 100px; }
  #navigation-instruction { min-height: 32px; padding: 6px; font-size: 11px; }
  #alphabet-strip { justify-content: flex-start; gap: 3px; padding: 5px; left: 8px; right: 8px; bottom: calc(5px + env(safe-area-inset-bottom)); }
  #alphabet-strip span { flex: 0 0 26px; }
  #traffic-message { top: auto; bottom: calc(190px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); width: max-content; padding: 8px 12px; font-size: 13px; text-align: center; }
  #game-settings-dialog form { min-width: 0 !important; padding: 0 !important; }
  #game-settings-dialog button { min-height: 44px; }
  #game-settings-dialog fieldset { display: flex; flex-wrap: wrap; gap: 12px; }
}
@media (max-height: 500px) and (any-pointer: coarse) {
  #top-bar { height: calc(46px + env(safe-area-inset-top)); }
  #target-card, #phone { top: calc(54px + env(safe-area-inset-top)); }
  #target-card { width: 120px; padding: 6px 10px; }
  #target-symbol { display: inline-flex; }
  #target-letter { font-size: 30px; }
  #target-emoji { font-size: 24px; }
  #target-card h2 { display: inline; margin-inline-start: 5px; font-size: 14px; }
  #target-distance { display: block; }
  #phone { width: 126px; }
  #map-canvas { height: 70px; }
  #navigation-instruction { min-height: 0; font-size: 10px; padding: 4px; }
  #touch-controls { bottom: calc(48px + env(safe-area-inset-bottom)); }
  .touch-pedals { flex-direction: row; }
  #touch-controls button { width: 50px; height: 50px; }
  #traffic-message { bottom: calc(108px + env(safe-area-inset-bottom)); }
}

@media (any-pointer: coarse), (max-width:700px) { #camera-controls-help {display:none!important} }
body.im-intro-open #touch-controls {display:none!important}
#web-game-error {position:fixed;inset:0;z-index:2147483647;background:#07181bf5;color:#fff;display:grid;place-items:center;padding:24px} #web-game-error[hidden]{display:none} #web-game-error>div{max-width:420px} #web-game-error button,#web-game-error a{display:inline-block;padding:12px 20px;background:#fff;color:#123b3b;border:0;border-radius:12px;margin:8px}

/* Keep the canvas tied to the visible viewport, including Safari's toolbars. */
html,body,#app{width:100%;height:100%;min-height:0;overscroll-behavior:none}
#game-canvas{display:block;width:var(--game-width,100vw)!important;height:var(--game-height,100dvh)!important;max-width:none;max-height:none}
#graphics-status{position:fixed;z-index:200;top:50%;left:50%;transform:translate(-50%,-50%);padding:18px 24px;max-width:85vw;border-radius:12px;background:#07181bf2;color:white;text-align:center}
#graphics-status[hidden]{display:none}
.im-standard-intro{height:var(--game-height,100dvh)!important;max-height:var(--game-height,100dvh);overflow:auto!important;-webkit-overflow-scrolling:touch}
@media (orientation:landscape) and (max-height:500px){
 .im-intro-header{height:52px;padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}
 .im-intro-body{height:auto;min-height:0;width:calc(100% - 24px);grid-template-columns:minmax(0,1fr) minmax(260px,1fr);gap:12px;padding:10px 0}
 .im-intro-story{min-height:0;display:flex;flex-direction:column;padding:14px}
 .im-intro-story h1{font-size:26px}.im-intro-lead{font-size:13px;margin:8px 0}
 .im-intro-art{width:130px;max-height:130px}.im-intro-setup{padding:14px;min-height:0}
 .im-intro-setup h2{font-size:22px;margin-bottom:8px}.im-intro-start{margin-top:12px;min-height:44px}
}
/* Compact setup with explicit spacing: controls must never shrink into Start. */
@media (any-pointer:coarse), (max-width:700px){
 .im-intro-header{height:56px;padding:4px 12px}.im-intro-brand img{width:42px;height:38px}.im-intro-brand b{font-size:13px}.im-intro-menu{font-size:12px;padding:8px}
 .im-intro-body{height:auto!important;min-height:0!important;width:calc(100% - 20px);padding:10px 0 16px;gap:10px}
 .im-intro-story{min-height:0!important;padding:14px;grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px}
 .im-intro-story h1{font-size:26px}.im-intro-category{font-size:10px}.im-intro-lead{font-size:13px;margin:6px 0}
 .im-intro-art{width:150px;max-height:150px;grid-column:1;grid-row:2}
 .im-intro-setup{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column;justify-content:flex-start!important;padding:16px;gap:12px}
 .im-intro-setup h2{font-size:23px;margin:0!important}
 .im-intro-controls{display:grid!important;grid-template-columns:1fr;gap:12px!important;flex:none!important}
 .im-intro-field{gap:5px}.im-intro-field label{font-size:13px}
 .im-intro-select{height:40px;min-height:40px;font-size:16px;padding:7px 10px}
 .im-intro-segment{gap:8px}.im-intro-segment .im-intro-choice{height:40px;min-height:40px;font-size:14px;padding:6px 8px;box-shadow:none}
 .im-intro-start{flex:none!important;height:44px!important;min-height:44px!important;margin:4px 0 0!important;font-size:16px}
 #touch-controls{gap:8px}#touch-controls button{width:44px;height:44px;font-size:20px;border-radius:12px}.touch-steering,.touch-pedals{gap:6px}
 .im-game-settings{top:max(8px,env(safe-area-inset-top))!important;right:max(8px,env(safe-area-inset-right))!important;min-height:36px!important;padding:7px 10px!important;font-size:13px!important}
 .loading-card{width:min(360px,85vw);padding:20px}.loading-card h1{font-size:26px}.loading-card p{font-size:15px}
}
@media (orientation:landscape) and (max-height:500px){
 .im-intro-body{grid-template-columns:minmax(0,1fr) minmax(240px,1fr)!important}
 .im-intro-art{width:110px;max-height:110px}.im-intro-story h1{font-size:23px}
 .im-intro-setup{padding:12px;gap:8px}.im-intro-controls{gap:8px!important}
 .im-intro-setup h2{font-size:20px}.im-intro-header{height:48px}
}
#web-fullscreen{position:fixed;z-index:2147483647;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));width:36px;height:36px;border:1px solid #ffffff80;border-radius:10px;background:#123b3b;color:white;font-size:24px;display:grid;place-items:center}
body.im-intro-open #web-fullscreen{visibility:visible!important;pointer-events:auto!important;top:auto;bottom:max(8px,env(safe-area-inset-bottom))}
#web-fullscreen{top:auto!important;bottom:max(8px,env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));width:44px;height:44px;touch-action:manipulation}
html,body{background:#07181b}
.screen-control-visible #alphabet-strip{left:calc(max(8px,env(safe-area-inset-left)) + 52px)!important}
@media(any-pointer:coarse),(max-width:1050px){body.im-native-game #immersivemind-game-settings{top:calc(8px + env(safe-area-inset-top))!important;right:max(8px,env(safe-area-inset-right))!important;left:auto!important;box-sizing:border-box!important;height:36px!important;min-height:36px!important;max-height:36px!important;padding:0 10px!important;font-size:12px!important;line-height:1!important;white-space:nowrap!important;max-width:120px!important;overflow:hidden!important;margin:0!important;box-shadow:none!important}}

/* A narrow desktop window or a touch-enabled laptop is still keyboard-driven. */
html:not([data-controls-enabled="true"]) body #touch-controls{display:none!important}

/* v355: fit the menu to the visible browser area; keep Start outside scrolling choices. */
html body .im-standard-intro{box-sizing:border-box!important;height:var(--game-height,100dvh)!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
html body .im-standard-intro .im-intro-header{flex:none!important}
html body .im-standard-intro .im-intro-body{box-sizing:border-box!important;flex:1 1 0!important;height:auto!important;min-height:0!important;grid-template-rows:minmax(0,1fr)!important;overflow:hidden!important}
html body .im-standard-intro .im-intro-story{min-height:0!important;max-height:100%!important;overflow:hidden!important}
html body .im-standard-intro .im-intro-setup{box-sizing:border-box!important;display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important;overflow:hidden!important}
html body .im-standard-intro .im-intro-setup h2{flex:none!important}
html body .im-standard-intro .im-intro-controls{flex:1 1 0!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain}
html body .im-standard-intro .im-intro-start{flex:0 0 auto!important;min-height:44px!important;margin-top:8px!important}
@media(orientation:portrait) and (max-width:1050px){html body .im-standard-intro .im-intro-body{grid-template-rows:auto minmax(0,1fr)!important}html body .im-standard-intro .im-intro-story{max-height:150px!important}}

@media(orientation:landscape) and (max-width:1050px){html body .im-standard-intro .im-intro-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}}
@media(orientation:portrait) and (max-width:1050px){html body .im-standard-intro .im-intro-body{grid-template-columns:minmax(0,1fr)!important}html body .im-standard-intro .im-intro-story{padding:8px!important}html body .im-standard-intro .im-intro-art{max-height:120px!important}}

/* Controls follow detected/observed touch, even when desktop mode reports a fine pointer. */
html[data-controls-enabled="true"] #touch-controls{position:fixed;z-index:40;display:flex;align-items:end;justify-content:space-between;gap:8px;direction:ltr;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(52px + env(safe-area-inset-bottom));pointer-events:none}
html[data-controls-enabled="true"] #touch-controls .touch-steering,html[data-controls-enabled="true"] #touch-controls .touch-pedals{display:flex;gap:6px}
html[data-controls-enabled="true"] #touch-controls .touch-pedals{flex-direction:column}
html[data-controls-enabled="true"] #touch-controls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;width:48px;height:48px;padding:0;border:2px solid #ffffffb3;border-radius:12px;color:white;background:#123d43ed;font-size:23px}
html[data-controls-enabled="true"] #touch-controls button.pressed{background:#087b91}
html[data-controls-enabled="true"] #touch-controls .touch-stop{background:#a22b2b}
html[data-controls-enabled="true"] #touch-controls[aria-hidden="true"],body.im-intro-open #touch-controls{display:none!important}
html[data-controls-enabled="true"] #controls-help,html[data-controls-enabled="true"] #camera-controls-help{display:none!important}