/* An open tool occupies the screen; Spider navigation returns with the back button. */
body[data-field-immersive="true"] { overflow:hidden; }
body[data-field-immersive="true"] :is(.game-primary-nav,#action-rpg-screen) { display:none !important; }
body[data-field-immersive="true"] #game-panel-backdrop { position:fixed !important; inset:0 !important; width:100% !important; height:100dvh !important; padding:0 !important; background:#071426; z-index:20000 !important; }
body[data-field-immersive="true"] .game-panel { display:block !important; width:100% !important; height:100% !important; padding:0 !important; margin:0 !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; background:#071426 !important; }
body[data-field-immersive="true"] .game-panel > header,
body[data-field-immersive="true"] #game-panel-tabs { display:none !important; }
body[data-field-immersive="true"] #game-panel-content { position:relative; width:100%; height:100%; max-height:none; padding:0 !important; margin:0; overflow:hidden; border:0; background:#071426; }
.spider-field-app { position:relative; display:grid; grid-template-rows:60px minmax(0,1fr); width:100%; height:100%; min-width:0; margin:0; padding:0; }
.spider-field-app-return { position:absolute; z-index:10; top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #397c9b; border-radius:12px; box-shadow:3px 3px 0 #02060b; background:#0d2239; color:#f0645c; font:600 24px/1 system-ui,sans-serif; cursor:pointer; }
.spider-field-app-return:hover { background:#18354c; border-color:#f0645c; }
.spider-field-app-return:focus-visible { outline:3px solid #f2c06b; outline-offset:3px; }
.spider-field-app-loading { position:absolute; inset:0; display:grid; place-items:center; margin:0; background:#071426; color:#d9e0df; font:500 14px/1.6 'Be Vietnam Pro',sans-serif; pointer-events:none; }
.spider-field-app-loading[hidden] { display:none; }
.spider-field-app { background:#071426; }

/* Navigation has its own row, clear of the animated frame corners. */
.spider-field-toolbar { display:flex; align-items:center; gap:12px; min-width:0; padding:6px 12px 6px 52px; border-bottom:1px solid #244256; background:#071426; }
.spider-field-toolbar .spider-field-app-return { position:static; flex:none; display:flex; gap:6px; width:auto; min-width:44px; height:44px; padding:0 10px; border-radius:6px; box-shadow:none; font:600 12px/1.3 'Be Vietnam Pro',sans-serif; color:#edf4f5; }
.spider-field-app-return span:first-child { font:24px/1 system-ui,sans-serif; color:#f0645c; }
.spider-field-toolbar .spider-field-app-title { flex:1; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#d9e7ed; font:600 14px/1.4 'Be Vietnam Pro',sans-serif; }
.spider-field-toolbar .spider-field-app-connection { position:static; flex:none; max-width:40%; min-height:44px; padding:4px 8px; border:1px solid #397c9b; border-radius:6px; color:#c4e5ee; font:500 11px/1.4 'Be Vietnam Pro',sans-serif; }
.spider-field-app-connection:focus-visible { outline:3px solid #f2c06b; outline-offset:2px; }
.spider-field-app > .spider-field-app-frame { display:block; width:100%; height:100%; min-height:0; margin:0; border:0; background:#071426; color-scheme:dark; }
.spider-field-app-loading { inset:60px 0 0; }
@media(max-width:600px) {
 .spider-field-toolbar { padding-left:36px; gap:6px; padding-right:6px; }
 .spider-field-toolbar .spider-field-app-return { padding:0 6px; }
 .spider-field-toolbar .spider-field-app-title { font-size:12px; }
 .spider-field-toolbar .spider-field-app-connection { max-width:34%; font-size:10px; }
 .spider-field-app-return span:not(:first-child) { display:none; }
}

/* Frameless Gambit tools: one compact app bar, actions on the right. */
body[data-field-standalone="true"] .spider-field-app {
  grid-template-rows:58px minmax(0,1fr);
}
body[data-field-standalone="true"] .spider-field-toolbar {
  gap:8px;
  min-height:58px;
  padding:6px clamp(12px,2.2vw,28px);
  background:linear-gradient(100deg,#842d38 0%,#17344b 30%,#0b1d2e 76%);
  border-bottom:2px solid #54b6d0;
}
body[data-field-standalone="true"] .spider-field-app-title {
  display:flex;
  align-items:center;
  gap:12px;
  color:#eef3ef;
  font:700 clamp(16px,2vw,19px)/1.2 'Be Vietnam Pro',sans-serif;
  letter-spacing:.02em;
}
body[data-field-standalone="true"] .spider-field-app-title::before {
  content:"";
  width:34px;
  height:34px;
  flex:none;
  background:url('../assets/spideytracker/tracker_logo3.png') calc(50% + 12px) center/auto 34px no-repeat;
  image-rendering:pixelated;
}
body[data-field-standalone="true"] .spider-field-toolbar :is(.spider-field-app-settings,.spider-field-app-connection,.spider-field-app-return) {
  flex:0 0 44px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  border:1px solid #42677a;
  border-radius:0;
  background:#10293d;
  color:#d9e0df;
  box-shadow:none;
  font:700 22px/1 'Silkscreen',monospace;
}
body[data-field-standalone="true"] .spider-field-toolbar :is(.spider-field-app-settings,.spider-field-app-connection,.spider-field-app-return):hover { background:#1a4055; border-color:#78c4d6; }
body[data-field-standalone="true"] .spider-field-app-return span { color:#f0645c; }
body[data-field-standalone="true"] .spider-field-app-connection[data-connection-state="connected"] { color:#83b96b; border-color:#83b96b; }
body[data-field-standalone="true"] .spider-field-app-connection[data-connection-state="locked"] { color:#f2c06b; border-color:#f2c06b; }
body[data-field-standalone="true"] .spider-field-app-connection[data-connection-state="error"],
body[data-field-standalone="true"] .spider-field-app-connection[data-connection-state="unconfigured"] { color:#f2c06b; border-color:#42677a; }
body[data-field-standalone="true"] .spider-field-toolbar :is(button,a):focus-visible { outline:3px solid #f2c06b; outline-offset:2px; }
body[data-field-standalone="true"] .spider-field-app-loading { inset:58px 0 0; }
@media(max-width:600px) {
  body[data-field-standalone="true"] .spider-field-toolbar { padding-inline:12px; }
  body[data-field-standalone="true"] .spider-field-app-title { gap:8px; font-size:15px; }
}