:root {
  --ig-bg: #020b15;
  --ig-panel: #071522;
  --ig-panel-2: #0b1d2d;
  --ig-border: rgba(255,255,255,.12);
  --ig-text: #f7f9fc;
  --ig-muted: #9fb0c3;
  --ig-accent: #2188ff;
}
html, body { background: var(--ig-bg) !important; color: var(--ig-text) !important; min-height: 100%; }
body { padding-bottom: 0 !important; font-family: Arial, Helvetica, sans-serif; }
a { text-decoration: none; }
.ig-tool-header { background: linear-gradient(180deg,#061625 0%,#020b15 100%); border-bottom: 1px solid var(--ig-border); }
.ig-eyebrow { color: #62a8ff; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.ig-title { color: #fff; font-size: clamp(24px,4vw,36px); font-weight: 800; }
.ig-subtitle { color: var(--ig-muted); font-size: 14px; }
.ig-note, .ig-warning, .ig-drift { border: 1px solid var(--ig-border); border-radius: 12px; background: var(--ig-panel); padding: 14px 16px; }
.ig-note { display: flex; gap: 10px; align-items: center; color: #cbd8e5; }
.ig-note i { color: #62a8ff; }
.ig-warning { border-color: rgba(255,193,7,.45); color: #ffe6a3; margin-bottom: 16px; }
.ig-connect-panel { border: 1px solid var(--ig-border); border-radius: 16px; padding: 32px 22px; text-align: center; background: radial-gradient(circle at 50% 0%,#102b45 0,var(--ig-panel) 55%); }
.ig-connect-icon { width: 70px; height: 70px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 18px; background: rgba(33,136,255,.13); border: 1px solid rgba(33,136,255,.35); font-size: 34px; }
.ig-primary-btn { min-width: 240px; font-weight: 700; }
.ig-connected-panel { background: var(--ig-panel); border: 1px solid var(--ig-border); border-radius: 12px; padding: 14px 16px; }
.ig-card, .card { background: var(--ig-panel) !important; color: var(--ig-text) !important; border-color: var(--ig-border) !important; }
.card-header { background: var(--ig-panel-2) !important; border-color: var(--ig-border) !important; font-weight: 700; }
.text-bg-light { background: var(--ig-panel) !important; color: var(--ig-text) !important; }
.modal-content { background: #071522 !important; border: 1px solid var(--ig-border) !important; color: #fff !important; }
.modal-header, .modal-footer { border-color: var(--ig-border) !important; }
.form-control, .form-select, input { background-color: #071522; color: #fff; border-color: rgba(255,255,255,.18); }
.dropdown-menu { --bs-dropdown-bg: #0b1d2d; --bs-dropdown-link-color: #fff; --bs-dropdown-link-hover-bg: #15314b; }
.ig-tabs { border-color: var(--ig-border); }
.ig-tabs .nav-link { color: var(--ig-muted); border: 0; border-bottom: 2px solid transparent; }
.ig-tabs .nav-link.active { color: #fff; background: transparent; border-bottom-color: var(--ig-accent); }
.btn-primary { --bs-btn-bg: #1479e8; --bs-btn-border-color: #1479e8; --bs-btn-hover-bg: #2188ff; --bs-btn-hover-border-color: #2188ff; }
pre { color: #d9e8f7 !important; margin-bottom: 6px; }
#controller-svg-container svg { max-width: 100%; height: auto; filter: drop-shadow(0 10px 28px rgba(0,0,0,.35)); }
#stickCanvas { max-width: 100%; }
.ig-drift { color: #bdcad7; }
.ig-tool-footer { border-top: 1px solid var(--ig-border); background: #01070d; color: #d6e0ea; }
#aboutdrift { position: static !important; bottom: auto !important; left: auto !important; right: auto !important; z-index: auto !important; }
footer.fixed-bottom { position: static !important; }
@media (max-width: 576px) {
  main.container { padding-left: 10px; padding-right: 10px; }
  .ig-connect-panel { padding: 24px 12px; }
  .ig-primary-btn { width: 100%; min-width: 0; }
  #circularityCheckIcon { right: -8px !important; }
}


/* IgroTeka v3: controller readability + viewport-aware overlays */
#controller-svg-container,
#controller-svg-placeholder {
  overflow: visible;
}
#controller-svg-container svg,
#controller-svg-placeholder svg {
  max-width: 100%;
  height: auto;
  background: transparent !important;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.32));
}



/* The renderer already paints the stick circles white; keep the card clean and light. */
#stickCanvas {
  max-width: 100%;
  background: transparent !important;
  border-radius: 10px;
}

/* Overlay layers are moved by JS to the currently visible part of the parent page. */
#ig-alert-layer {
  width: 100%;
  z-index: 1085 !important;
}
#ig-alert-layer .alert {
  box-shadow: 0 12px 32px rgba(0,0,0,.48);
  border-radius: 10px;
}
.modal {
  z-index: 1090 !important;
}
.modal-dialog {
  margin: 18px auto 32px !important;
}
.modal-content {
  box-shadow: 0 20px 55px rgba(0,0,0,.6);
}
.modal-backdrop {
  z-index: 1080 !important;
}

#aboutdrift a {
  color: #7fc0ff;
  text-decoration: underline;
  font-weight: 700;
}
#aboutdrift a:hover { color: #a8d4ff; }
#aboutdrift .fw-semibold { color: #fff; }
#aboutdrift p { color: #d4e0eb; }
.ig-lang.active { color: #061625 !important; font-weight: 700; }


/* IgroTeka v3.1: zero-flicker modal placement */
.modal.ig-preposition-modal {
  visibility: hidden !important;
}
.modal.ig-preposition-modal .modal-dialog {
  transition: none !important;
  transform: none !important;
}


/* IgroTeka v4: light visualization zone */
.ig-visual-surface {
  background: linear-gradient(180deg, #ffffff 0%, #edf3fb 100%);
  border: 1px solid rgba(173, 196, 221, 0.9);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 28px rgba(0,0,0,.18);
}
.ig-controller-surface {
  padding: 18px 14px 10px;
}
#controller-svg-container {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#controller-svg-container svg,
#controller-svg-placeholder svg {
  filter: drop-shadow(0 10px 22px rgba(34, 56, 80, .14));
}

.ig-joystick-card {
  overflow: hidden;
}
.ig-joystick-card .card-header {
  border-bottom-color: rgba(255,255,255,.10) !important;
}
.ig-joystick-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5fb 100%);
  color: #10243a;
  border-top: 1px solid rgba(173, 196, 221, 0.45);
  border-radius: 0 0 14px 14px;
}
.ig-joystick-panel pre,
.ig-joystick-panel span,
.ig-joystick-panel label,
.ig-joystick-panel .btn,
.ig-joystick-panel .hstack,
.ig-joystick-panel .vstack {
  color: #10243a !important;
}
.ig-joystick-panel pre {
  font-weight: 700;
}
.ig-joystick-panel #stickCanvas {
  background: #ffffff !important;
  border-radius: 12px;
}
.ig-joystick-panel .btn-outline-secondary {
  --bs-btn-color: #435468;
  --bs-btn-border-color: #bcc9d8;
  --bs-btn-hover-bg: #e6edf7;
  --bs-btn-hover-border-color: #a8bacf;
  --bs-btn-active-bg: #607a96;
  --bs-btn-active-border-color: #607a96;
  --bs-btn-active-color: #fff;
}
.ig-joystick-panel .btn-check:checked + .btn-outline-secondary,
.ig-joystick-panel .btn-check:active + .btn-outline-secondary {
  color: #fff !important;
  background-color: #607a96 !important;
  border-color: #607a96 !important;
}
.ig-joystick-panel .btn-group {
  background: transparent;
}

@media (max-width: 576px) {
  .ig-controller-surface { padding: 12px 8px 6px; border-radius: 18px; }
  #controller-svg-container { min-height: 240px; }
}


/* IgroTeka v4.1: larger controller + stronger lines + preserve live highlights */
.ig-controller-surface {
  padding: 18px 10px 12px;
}
#controller-svg-container {
  min-height: 360px;
  padding: 8px 0;
}
#controller-svg-container svg,
#controller-svg-placeholder svg {
  width: min(96%, 620px) !important;
  max-width: 96% !important;
  height: auto !important;
}



/* Slightly darker surface so the white controller outline has more contrast */
.ig-visual-surface {
  background: linear-gradient(180deg, #f7f9fc 0%, #e9eff7 100%);
}
@media (max-width: 576px) {
  #controller-svg-container { min-height: 270px; }
  #controller-svg-container svg,
  #controller-svg-placeholder svg { width: 98% !important; max-width: 98% !important; }
}


/* IgroTeka v4.2: original-like controller scale on the dark site background */
.ig-controller-surface {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 8px 0 0 !important;
  overflow: visible !important;
}
#controller-svg-container {
  min-height: 410px !important;
  height: 410px;
  padding: 0 !important;
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
#controller-svg-container svg,
#controller-svg-placeholder svg {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  transform: scale(1.42);
  transform-origin: center center;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.32));
}

/* The old light controller surface from v4 is intentionally disabled. */
.ig-visual-surface {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Keep only the joystick-information area light, as requested. */
.ig-joystick-panel {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
@media (max-width: 1199px) {
  #controller-svg-container { min-height: 380px !important; height: 380px; }
  #controller-svg-container svg,
  #controller-svg-placeholder svg { transform: scale(1.34); }
}
@media (max-width: 767px) {
  #controller-svg-container { min-height: 330px !important; height: 330px; overflow: hidden !important; }
  #controller-svg-container svg,
  #controller-svg-placeholder svg { transform: scale(1.20); }
}
@media (max-width: 576px) {
  #controller-svg-container { min-height: 285px !important; height: 285px; }
  #controller-svg-container svg,
  #controller-svg-placeholder svg { transform: scale(1.12); }
}


/* IgroTeka v4.2.3: original controller rendering on a white surface.
   Do not force SVG fills: the upstream engine uses them for live button highlights. */
#controller-svg-container {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 14px 10px !important;
}

/* Slightly darker and only a little thicker than the upstream original. */
#controller-svg-container svg [stroke]:not([stroke="none"]),
#controller-svg-placeholder svg [stroke]:not([stroke="none"]) {
  stroke: #4fa9e8;
  stroke-width: 2.35px;
  vector-effect: non-scaling-stroke;
}

#controller-svg-container svg #Controller_outline,
#controller-svg-placeholder svg #Controller_outline {
  stroke: #4fa9e8;
  stroke-width: 2.55px;
  vector-effect: non-scaling-stroke;
}


/* IgroTeka v4.2.4: cleaner original-like controller visual.
   Pure white surface, no haze/shadow, thinner dark-blue outline.
   SVG fills remain untouched so live button highlights keep working. */
#controller-svg-container {
  background: #ffffff !important;
  box-shadow: none !important;
}

#controller-svg-container svg,
#controller-svg-placeholder svg {
  filter: none !important;
  opacity: 1 !important;
}

#controller-svg-container svg [stroke]:not([stroke="none"]),
#controller-svg-placeholder svg [stroke]:not([stroke="none"]) {
  stroke: #176da3 !important;
  stroke-width: 1.25px !important;
  vector-effect: non-scaling-stroke;
}

#controller-svg-container svg #Controller_outline,
#controller-svg-placeholder svg #Controller_outline {
  stroke: #176da3 !important;
  stroke-width: 1.35px !important;
  vector-effect: non-scaling-stroke;
}


/* IgroTeka v4.2.5: visible instruction + SEO content block */
.ig-seo-section {
  scroll-margin-top: 18px;
  border-top: 1px solid var(--ig-border);
  padding-top: 28px;
}
.ig-seo-heading {
  max-width: 920px;
  margin-bottom: 18px;
}
.ig-seo-kicker {
  color: #62a8ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.ig-seo-section h2 {
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 10px;
}
.ig-seo-heading > p {
  color: #c8d5e2;
  line-height: 1.6;
}
.ig-seo-card {
  background: var(--ig-panel);
  border: 1px solid var(--ig-border);
  border-radius: 14px;
  padding: 18px 18px 17px;
}
.ig-seo-card h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.3;
  margin: 0 0 12px;
}
.ig-seo-card h3 i { color: #62a8ff; }
.ig-seo-card p,
.ig-guide-list {
  color: #c8d5e2;
  line-height: 1.55;
  font-size: 14px;
}
.ig-guide-list {
  padding-left: 21px;
}
.ig-guide-list li + li { margin-top: 7px; }
.ig-seo-card a {
  color: #69b3ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}
.ig-seo-card a:hover { color: #9bcfff; }
@media (max-width: 576px) {
  .ig-seo-section { padding-top: 22px; }
  .ig-seo-card { padding: 16px 14px; }
}


/* IgroTeka v4.2.6: fullscreen iframe mode for Bootstrap modals.
   This prevents OpenCart article/comments from covering iframe-contained dialogs. */
html.ig-modal-overlay-mode,
html.ig-modal-overlay-mode body {
  background: transparent !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

html.ig-modal-overlay-mode body > header,
html.ig-modal-overlay-mode body > main,
html.ig-modal-overlay-mode body > footer,
html.ig-modal-overlay-mode #ig-alert-layer {
  visibility: hidden !important;
}

html.ig-modal-overlay-mode .modal,
html.ig-modal-overlay-mode .modal *,
html.ig-modal-overlay-mode .modal-backdrop {
  visibility: visible !important;
}

html.ig-modal-overlay-mode .modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  z-index: 20001 !important;
}

html.ig-modal-overlay-mode .modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 20000 !important;
}

html.ig-modal-overlay-mode .modal-dialog {
  position: relative !important;
  z-index: 20002 !important;
}


/* IgroTeka v4.2.8: swapped controller layout blocks */


/* IgroTeka v4.2.9: compact top area + final block order */
.ig-tool-header .container { padding-top: .6rem !important; padding-bottom: .6rem !important; }
.ig-title { font-size: clamp(20px, 3vw, 28px) !important; }
.ig-subtitle { font-size: 12px !important; }
.ig-header-spacer { display:none; }
.ig-connected-panel { padding: 10px 14px !important; }
.ig-connect-panel { padding: 18px 16px !important; }
.ig-connect-icon { width: 56px; height: 56px; margin: 0 auto 12px; font-size: 28px; }
.ig-primary-btn { min-width: 200px; }
.ig-toolbar-buttons .btn { padding: .32rem .6rem !important; line-height: 1.2; }
.ig-online-mainline { font-size: 15px; }
.ig-disconnect-inline { padding: .2rem .55rem !important; }
#mainmenu { margin-top: .75rem !important; }
.ig-tabs { margin-bottom: .85rem !important; }
#controller-svg-container { min-height: 320px !important; height: 320px !important; }
#controller-svg-container svg,
#controller-svg-placeholder svg {
  transform: scale(1.16) !important;
  transform-origin: center center;
  filter: none !important;
}
@media (max-width: 1199px) {
  #controller-svg-container { min-height: 295px !important; height: 295px !important; }
  #controller-svg-container svg,
  #controller-svg-placeholder svg { transform: scale(1.08) !important; }
}
@media (max-width: 767px) {
  .ig-connected-panel, .ig-connect-panel { padding: 10px 12px !important; }
  .ig-online-mainline { font-size: 14px; }
  #controller-svg-container { min-height: 260px !important; height: 260px !important; }
  #controller-svg-container svg,
  #controller-svg-placeholder svg { transform: scale(1.0) !important; }
}


/* IgroTeka v4.2.10: no inner scrolling + quick test below controller */
html, body {
  overflow-x: hidden !important;
}
body {
  overflow-y: visible !important;
}
#quick-tests-div {
  justify-content: flex-end !important;
}
#quick-test-btn {
  background: #2188ff !important;
  border-color: #2188ff !important;
  color: #fff !important;
  box-shadow: none !important;
}
#quick-test-btn:hover,
#quick-test-btn:focus,
#quick-test-btn:active {
  background: #2d92ff !important;
  border-color: #2d92ff !important;
  color: #fff !important;
}
#quick-test-btn .ds-i18n,
#quick-test-btn i {
  color: #fff !important;
}
#controller-svg-container { overflow: hidden !important; }


/* IgroTeka v4.2.11: compress top header/connect area */
main.container {
  padding-top: .45rem !important;
  padding-bottom: 1.5rem !important;
}
.ig-tool-header .container {
  padding-top: .22rem !important;
  padding-bottom: .22rem !important;
}
.ig-tool-header .d-flex {
  gap: .25rem !important;
}
.ig-tool-header .d-flex > div:first-child {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: .7rem !important;
  row-gap: .12rem !important;
}
.ig-eyebrow {
  display: none !important;
}
.ig-title {
  font-size: clamp(16px, 2.2vw, 24px) !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}
.ig-subtitle {
  font-size: 11px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  opacity: .9;
}
.ig-connected-panel,
.ig-connect-panel {
  padding: 6px 10px !important;
  border-radius: 10px !important;
}
.ig-connected-panel {
  margin-top: .15rem !important;
}
.ig-connected-panel .row {
  --bs-gutter-x: .75rem !important;
  --bs-gutter-y: .15rem !important;
}
.ig-online-mainline {
  font-size: 14px !important;
  gap: .4rem !important;
}
.ig-disconnect-inline,
.ig-toolbar-buttons .btn {
  padding: .18rem .5rem !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}
#d-bat {
  font-size: 14px !important;
  font-weight: 700;
}
#mainmenu {
  margin-top: .45rem !important;
}
.ig-tabs {
  margin-bottom: .5rem !important;
}
@media (max-width: 991px) {
  .ig-tool-header .d-flex > div:first-child {
    display: block !important;
  }
  .ig-title {
    font-size: clamp(15px, 4.2vw, 20px) !important;
  }
  .ig-subtitle {
    margin-top: .1rem !important;
  }
}
@media (max-width: 767px) {
  main.container { padding-top: .35rem !important; }
  .ig-connected-panel,
  .ig-connect-panel {
    padding: 6px 8px !important;
  }
  .ig-toolbar-buttons {
    gap: .35rem !important;
  }
  .ig-online-mainline {
    font-size: 13px !important;
  }
  .ig-disconnect-inline,
  .ig-toolbar-buttons .btn {
    font-size: 12px !important;
    padding: .14rem .45rem !important;
  }
  #d-bat {
    font-size: 13px !important;
  }
}


/* IgroTeka v4.2.13: break iframe auto-height feedback loop.
   The tool page must size to its content, never to the iframe viewport. */
html:not(.ig-modal-overlay-mode),
html:not(.ig-modal-overlay-mode) body {
  min-height: 0 !important;
  height: auto !important;
}

html.ig-modal-overlay-mode,
html.ig-modal-overlay-mode body {
  min-height: 100% !important;
}


/* IgroTeka v4.2.14: geometry-driven iframe sizing.
   The parent owns vertical scrolling; the embedded document never does. */
html:not(.ig-modal-overlay-mode),
html:not(.ig-modal-overlay-mode) body {
  overflow-y: hidden !important;
}


/* Keep the alert layer out of normal flow even before JS positions it. */
#ig-alert-layer {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
}


/* IgroTeka v4.2.15: live button presses only change fill.
   Upstream also writes a stroke attribute to infill shapes; neutralize its width so
   live SVG painting cannot affect geometry/bounding calculations in any browser. */
#controller-svg-container svg [id$="_infill"] path,
#controller-svg-container svg [id$="_infill"] rect,
#controller-svg-container svg [id$="_infill"] circle,
#controller-svg-container svg [id$="_infill"] ellipse,
#controller-svg-container svg [id$="_infill"] line,
#controller-svg-container svg [id$="_infill"] polyline,
#controller-svg-container svg [id$="_infill"] polygon {
  stroke-width: 0 !important;
}

/* The embedded document has no vertical scrolling of its own. */
html:not(.ig-modal-overlay-mode),
html:not(.ig-modal-overlay-mode) body {
  min-height: 0 !important;
  height: auto !important;
  overflow-y: hidden !important;
}

/* =====================================================================
   IgroTeka v4.3.0 — GitHub-inspired light UI
   The previous dark-theme rules are intentionally overridden below.
   ===================================================================== */

:root {
  --ig-bg: #f6f8fa;
  --ig-panel: #ffffff;
  --ig-panel-2: #f6f8fa;
  --ig-border: #d0d7de;
  --ig-border-strong: #afb8c1;
  --ig-text: #1f2328;
  --ig-muted: #59636e;
  --ig-accent: #0969da;
  --ig-accent-hover: #0550ae;
  --ig-accent-soft: #ddf4ff;
  --ig-success: #1f883d;
  --ig-danger: #cf222e;
  --ig-warning: #9a6700;
  --ig-shadow: 0 1px 2px rgba(31,35,40,.06), 0 8px 24px rgba(140,149,159,.12);
}

html,
body {
  background: var(--ig-bg) !important;
  color: var(--ig-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}

body { padding-bottom: 0 !important; }

a { color: var(--ig-accent); }
a:hover { color: var(--ig-accent-hover); }

.ig-tool-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--ig-border) !important;
}

.ig-title,
.ig-seo-section h2,
.ig-seo-card h3,
#aboutdrift .fw-semibold {
  color: var(--ig-text) !important;
}

.ig-subtitle,
.ig-seo-heading > p,
.ig-seo-card p,
.ig-guide-list,
.ig-drift,
.text-secondary,
.text-muted {
  color: var(--ig-muted) !important;
}

.ig-eyebrow,
.ig-seo-kicker {
  color: var(--ig-accent) !important;
}

.ig-connect-panel,
.ig-connected-panel,
.ig-note,
.ig-warning,
.ig-drift,
.ig-card,
.card,
.ig-seo-card {
  background: #ffffff !important;
  color: var(--ig-text) !important;
  border-color: var(--ig-border) !important;
  box-shadow: none !important;
}

.ig-connect-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%) !important;
}

.ig-connect-icon {
  background: var(--ig-accent-soft) !important;
  border-color: #80ccff !important;
  color: var(--ig-accent) !important;
}

.ig-warning {
  background: #fff8c5 !important;
  border-color: #d4a72c !important;
  color: #633c01 !important;
}

.card-header,
.ig-joystick-card .card-header {
  background: #f6f8fa !important;
  color: var(--ig-text) !important;
  border-color: var(--ig-border) !important;
}

.ig-joystick-panel {
  background: #ffffff !important;
  color: var(--ig-text) !important;
  border-color: var(--ig-border) !important;
  box-shadow: none !important;
}

.ig-joystick-panel pre,
.ig-joystick-panel span,
.ig-joystick-panel label,
.ig-joystick-panel .hstack,
.ig-joystick-panel .vstack {
  color: var(--ig-text) !important;
}

pre {
  color: var(--ig-text) !important;
}

#controller-svg-container {
  background: #ffffff !important;
  border: 1px solid var(--ig-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--ig-shadow) !important;
}

.ig-controller-surface {
  background: transparent !important;
}

#stickCanvas {
  background: #ffffff !important;
}

.ig-tabs {
  border-bottom-color: var(--ig-border) !important;
}

.ig-tabs .nav-link {
  color: var(--ig-muted) !important;
  background: transparent !important;
}

.ig-tabs .nav-link:hover {
  color: var(--ig-text) !important;
  border-bottom-color: #8c959f !important;
}

.ig-tabs .nav-link.active {
  color: var(--ig-text) !important;
  background: transparent !important;
  border-bottom-color: var(--ig-accent) !important;
}

.btn-primary {
  --bs-btn-bg: #0969da;
  --bs-btn-border-color: #0969da;
  --bs-btn-hover-bg: #0550ae;
  --bs-btn-hover-border-color: #0550ae;
  --bs-btn-active-bg: #033d8b;
  --bs-btn-active-border-color: #033d8b;
}

.btn-success {
  --bs-btn-bg: #1f883d;
  --bs-btn-border-color: #1f883d;
  --bs-btn-hover-bg: #1a7f37;
  --bs-btn-hover-border-color: #1a7f37;
}

.btn-danger {
  --bs-btn-bg: #cf222e;
  --bs-btn-border-color: #cf222e;
  --bs-btn-hover-bg: #a40e26;
  --bs-btn-hover-border-color: #a40e26;
}

.btn-secondary {
  --bs-btn-bg: #6e7781;
  --bs-btn-border-color: #6e7781;
}

.btn-outline-light,
.ig-lang {
  --bs-btn-color: #24292f;
  --bs-btn-border-color: #8c959f;
  --bs-btn-hover-color: #24292f;
  --bs-btn-hover-bg: #f3f4f6;
  --bs-btn-hover-border-color: #6e7781;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #57606a;
  --bs-btn-active-border-color: #57606a;
}

.ig-lang.active {
  color: #ffffff !important;
  background: #57606a !important;
  border-color: #57606a !important;
}

.ig-joystick-panel .btn-outline-secondary {
  --bs-btn-color: #24292f;
  --bs-btn-border-color: #afb8c1;
  --bs-btn-hover-bg: #f3f4f6;
  --bs-btn-hover-border-color: #8c959f;
  --bs-btn-active-bg: #57606a;
  --bs-btn-active-border-color: #57606a;
  --bs-btn-active-color: #ffffff;
}

.form-control,
.form-select,
input {
  background-color: #ffffff !important;
  color: var(--ig-text) !important;
  border-color: var(--ig-border-strong) !important;
}

.form-control:focus,
.form-select:focus,
input:focus {
  border-color: #54aeff !important;
  box-shadow: 0 0 0 .2rem rgba(9,105,218,.15) !important;
}

.dropdown-menu {
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-color: #24292f;
  --bs-dropdown-link-color: #24292f;
  --bs-dropdown-link-hover-color: #24292f;
  --bs-dropdown-link-hover-bg: #f6f8fa;
  --bs-dropdown-border-color: #d0d7de;
  box-shadow: var(--ig-shadow);
}

.modal-content {
  background: #ffffff !important;
  color: var(--ig-text) !important;
  border-color: var(--ig-border) !important;
  box-shadow: 0 16px 40px rgba(31,35,40,.20) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--ig-border) !important;
}

.btn-close {
  filter: none !important;
}

.ig-seo-section {
  border-top-color: var(--ig-border) !important;
}

.ig-seo-card {
  box-shadow: 0 1px 0 rgba(31,35,40,.04) !important;
}

.ig-seo-card a,
#aboutdrift a {
  color: var(--ig-accent) !important;
}

.ig-seo-card a:hover,
#aboutdrift a:hover {
  color: var(--ig-accent-hover) !important;
}

#aboutdrift p {
  color: var(--ig-muted) !important;
}

.ig-tool-footer {
  background: #ffffff !important;
  color: var(--ig-muted) !important;
  border-top-color: var(--ig-border) !important;
}

#ig-alert-layer .alert {
  box-shadow: 0 8px 24px rgba(31,35,40,.16) !important;
}

/* Laptop/compact desktop: approximate a 90% browser zoom without destabilizing iframe geometry. */
@media (min-width: 992px) and (max-width: 1600px) {
  html { font-size: 90%; }

  .ig-tool-header .container,
  main.container,
  .ig-tool-footer .container {
    padding-left: .9rem !important;
    padding-right: .9rem !important;
  }

  #controller-svg-container {
    min-height: 288px !important;
    height: 288px !important;
  }

  #controller-svg-container svg,
  #controller-svg-placeholder svg {
    transform: scale(1.045) !important;
  }

  #stickCanvas {
    width: 270px !important;
    height: 135px !important;
  }

  .ig-title {
    font-size: clamp(15px, 2vw, 22px) !important;
  }

  .ig-connected-panel,
  .ig-connect-panel {
    padding: 5px 9px !important;
  }

  .ig-toolbar-buttons .btn,
  .ig-disconnect-inline {
    padding: .16rem .45rem !important;
  }

  .ig-seo-card {
    padding: 16px !important;
  }
}

@media (max-width: 991px) {
  #controller-svg-container {
    box-shadow: 0 1px 2px rgba(31,35,40,.08) !important;
  }
}

/* Preserve modal overlay mechanics in the light theme. */
html.ig-modal-overlay-mode,
html.ig-modal-overlay-mode body {
  background: transparent !important;
}

/* =====================================================================
   IgroTeka v4.3.2 — deliberate dark modal stage
   When calibration/quick-test dialogs move the iframe fullscreen,
   temporarily darken the entire background. This hides the empty page
   created by hiding the normal tester layout and keeps focus on the dialog.
   ===================================================================== */

html.ig-modal-overlay-mode,
html.ig-modal-overlay-mode body {
  background: #0d1117 !important;
}

html.ig-modal-overlay-mode body {
  position: relative !important;
}

/* Bootstrap backdrop adds one more soft dimming layer behind the dialog. */
html.ig-modal-overlay-mode .modal-backdrop {
  background-color: #000000 !important;
  opacity: .48 !important;
}

/* Keep the actual dialog light and clearly separated from the dark stage. */
html.ig-modal-overlay-mode .modal-content {
  background: #ffffff !important;
  color: #1f2328 !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 18px 56px rgba(0,0,0,.34) !important;
}

/* Avoid a white flash while Bootstrap is positioning the modal. */
html.ig-modal-overlay-mode .modal.ig-preposition-modal {
  background: transparent !important;
}




/* =====================================================================
   IgroTeka v4.3.3 — remove stray normal-page controls in modal overlay
   ===================================================================== */

/* The upstream quick-test button may have inline visibility restored by
   device UI logic. Force it completely out of the fullscreen modal stage. */
html.ig-modal-overlay-mode #quick-tests-div,
html.ig-modal-overlay-mode #quick-test-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Defensive cleanup for any normal calibration-page controls that may
   receive inline visibility/display while a Bootstrap dialog is open.
   Modal-contained buttons are not affected. */
html.ig-modal-overlay-mode body > main button:not(.modal button),
html.ig-modal-overlay-mode body > main .btn:not(.modal .btn) {
  visibility: hidden !important;
  pointer-events: none !important;
}