/* === index.html styles (migrated) === */
:root{ --pad:86px; --gap:14px; } @media(max-width:480px){ :root{ --pad:78px; --gap:12px; } }
html,body{ height:100%; background:#0d1117; color:#e6edf3; }
/* evita zoom automático ao focar controles no mobile */
input, select, textarea, button { font-size: 16px !important; }

.wrap{ min-height:100%; display:flex; flex-direction:column; }
.board{ flex:1; display:flex; align-items:center; justify-content:center; padding:clamp(8px,3vw,20px); }
.card{ background:#11161d; border:1px solid #2a2f37; border-radius:18px; }
.btn-pad{ width:var(--pad); height:var(--pad); font-size:1.25rem; border-radius:1rem; touch-action:none; }
.btn-stop{ background:#9c2b2b; border-color:#b23a3a; }
.btn-aux{ height:64px; border-radius:16px; font-size:1.05rem; }
.bar{ position:sticky; bottom:0; z-index:10; background:#0d1117f0; backdrop-filter:blur(6px); border-top:1px solid #2a2f37; padding:.6rem .75rem; }
.badge-dot{ display:inline-flex; align-items:center; gap:.5ch; } .dot{ width:.6rem; height:.6rem; border-radius:999px; background:#6c757d; } .dot.on{ background:#16a34a; }
.smallx{ font-size:.9rem; color:#9fb7ff; }

/* === CONTROLLER GRID ALIGNMENT === */
.controller-grid{
  display:grid;
  grid-template-columns: repeat(7, var(--pad));
  grid-template-rows: repeat(3, var(--pad));
  gap: var(--gap);
  align-items:center;
  justify-content:center;
}
.controller-grid .up{ grid-column:3; grid-row:1; }
.controller-grid .down{ grid-column:3; grid-row:3; }
.controller-grid .left{ grid-column:2; grid-row:2; }
.controller-grid .stop{ grid-column:3; grid-row:2; }
.controller-grid .right{ grid-column:4; grid-row:2; }
.controller-grid .a{ grid-column:5; grid-row:2; }
.controller-grid .b{ grid-column:6; grid-row:2; }
.controller-grid .ab{ grid-column:7; grid-row:2; }

/* === TWO-PART HORIZONTAL LAYOUT === */
/* Wrapper: two columns pushed to edges */
.controller-wrap{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: max-content;
  align-items:center;           /* vertical align to middle row */
  justify-content:space-between;/* push left/right to edges */
  width:100%;
}
/* D-pad strict grid (3x3) */
.dpad-grid{
  display:grid;
  grid-template-columns: var(--pad) var(--pad) var(--pad);
  grid-template-rows: var(--pad) var(--pad) var(--pad);
  gap: var(--gap);
  place-items:center;
}
.dpad-grid .up{ grid-column:2; grid-row:1; }
.dpad-grid .left{ grid-column:1; grid-row:2; }
.dpad-grid .stop{ grid-column:2; grid-row:2; }
.dpad-grid .right{ grid-column:3; grid-row:2; }
.dpad-grid .down{ grid-column:2; grid-row:3; }

/* Aux buttons aligned to middle row */
.aux-col{ display:flex; align-items:center; justify-content:flex-end; }
.aux-row{ display:flex; gap: clamp(10px, 3vmin, 20px); align-items:center; }
.btn-aux{ width: var(--aux); height: var(--aux); border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }

/* Edge anchoring and safe areas */
.board{ padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) calc(var(--bar-h) + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.board>.card{ width:100%; height:100%; padding: .5rem; }

/* === STRETCH TO EDGES PATCH === */
.board { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
.board > .card { width:100%; height:100%; margin:0; padding: .25rem; }
.controller-wrap{
  display:flex;          /* flex instead of grid to allow full stretch */
  width:100%;            /* occupy full width */
  align-items:center;    /* vertical center (middle row) */
  justify-content:space-between; /* push left/right blocks to edges */
  gap: clamp(8px, 3vmin, 24px);
}
.dpad-grid{ align-self:center; }  /* keep centered vertically */
.aux-col{ align-self:center; }    /* keep centered vertically */
.row { margin-left:0 !important; margin-right:0 !important; } /* kill bootstrap row gutters */

/* === TWO-COL ALIGNMENT WITH SHARED ROWS (v15) === */
.two-col-grid{
  display:grid;
  grid-template-columns: auto auto;
  grid-template-rows: var(--pad) var(--pad) var(--pad);
  align-items:center;
  justify-content:space-between;
  width:100%;
  column-gap: clamp(12px, 6vmin, 40px);
}
.two-col-grid > .dpad-grid{ grid-column:1; grid-row: 1 / span 3; justify-self:start; }
.two-col-grid > .aux-row{ grid-column:2; grid-row: 2; justify-self:end; display:flex; gap: clamp(10px, 3vmin, 22px); align-items:center; }
.aux-row .btn-aux{ width: var(--aux); height: var(--aux); border-radius: 999px; display:inline-flex; align-items:center; justify-content:center; }
/* Ensure the control area goes edge-to-edge safely */
.board{ padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
.board > .card{ width:100%; height:100%; padding: .5rem; margin:0; }

/* === TWO-PART CONTROLLER (FINAL) === */
:root{ --gap: clamp(10px, 3vmin, 18px); }
html, body{ height:100svh; width:100vw; overflow:hidden; overscroll-beavior:none; touch-action:manipulation; }
.board{ height:100%; width:100%; display:flex; align-items:center; justify-content:center; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) calc(var(--bar-h,56px) + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.board > .card{ width:100%; height:100%; max-width:none; margin:0; padding: .5rem; display:flex; align-items:center; justify-content:center; }
.row.landscape{ width:100%; margin:0 !important; }
.controller-two{
  display:grid;
  grid-template-columns: 1fr 1fr;           /* esquerda e direita */
  grid-template-rows: var(--pad) var(--pad) var(--pad); /* 3 linhas iguais */
  align-items:center;
  justify-content:space-between;
  width:100%;
  column-gap: clamp(12px, 6vmin, 48px);
}
/* D-pad ocupa as 3 linhas da coluna esquerda */
.controller-two > .dpad-grid{ grid-column:1; grid-row:1 / span 3; justify-self:start; }
.dpad-grid{
  display:grid;
  grid-template-columns: var(--pad) var(--pad) var(--pad);
  grid-template-rows: var(--pad) var(--pad) var(--pad);
  gap: var(--gap);
  place-items:center;
}
.dpad-grid .up{ grid-column:2; grid-row:1; }
.dpad-grid .left{ grid-column:1; grid-row:2; }
.dpad-grid .stop{ grid-column:2; grid-row:2; }
.dpad-grid .right{ grid-column:3; grid-row:2; }
.dpad-grid .down{ grid-column:2; grid-row:3; }
/* A/B/AB ficam na coluna direita na linha 2 (mesma altura do STOP) */
.controller-two > .aux-col{ grid-column:2; grid-row:2; justify-self:end; align-self:center; }
.aux-row{ display:flex; gap: clamp(10px, 3vmin, 22px); align-items:center; }
.btn-aux{ width: var(--aux, clamp(56px, 16vmin, 96px)); height: var(--aux, clamp(56px, 16vmin, 96px)); border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }

/* Bottom bar stays outside the grid */
:root{ --bar-h: clamp(52px, 10vmin, 72px); }
.bar{ position:sticky; bottom:0; z-index:10; background:#0d1117f0; backdrop-filter:blur(6px); border-top:1px solid #2a2f37; padding:.6rem .75rem; min-height:var(--bar-h); }

/* === EDGE-TO-EDGE CONTROLLER (NO CARD) === */
html, body{ height:100svh; width:100vw; overflow:hidden; overscroll-behavior:none; touch-action:manipulation; }
.board{ height:100%; width:100%; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) calc(var(--bar-h,56px) + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); display:flex; align-items:center; justify-content:space-between; }
.controller-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: var(--pad) var(--pad) var(--pad);
  align-items:center;
  width:100%;
}
/* D-pad */
.dpad-grid{
  display:grid;
  grid-template-columns: var(--pad) var(--pad) var(--pad);
  grid-template-rows: var(--pad) var(--pad) var(--pad);
  gap: var(--gap, 14px);
  place-items:center;
  justify-self:start;
}
.dpad-grid .up{ grid-column:2; grid-row:1; }
.dpad-grid .left{ grid-column:1; grid-row:2; }
.dpad-grid .stop{ grid-column:2; grid-row:2; }
.dpad-grid .right{ grid-column:3; grid-row:2; }
.dpad-grid .down{ grid-column:2; grid-row:3; }
/* Aux aligned to the same middle row as STOP */
.aux-row{
  grid-column:2; grid-row:2;
  justify-self:end;
  display:flex; gap: clamp(10px, 3vmin, 22px); align-items:center;
}
.btn-aux{ width: var(--aux, clamp(56px, 16vmin, 96px)); height: var(--aux, clamp(56px, 16vmin, 96px)); border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
/* Bottom bar */
:root{ --bar-h: clamp(52px, 10vmin, 72px); }
.bar{ position:sticky; bottom:0; z-index:10; background:#0d1117f0; backdrop-filter:blur(6px); border-top:1px solid #2a2f37; padding:.6rem .75rem; min-height:var(--bar-h); }

/* === USER OVERRIDE: A/B/AB size in viewport-independent px === */
.btn-aux{
  width: 160px !important;
  height: 160px !important;
  border-radius: 999px !important;
  font-size: 2rem !important;
}

/* === Status in bottom bar === */
.badge-dot{ display:inline-flex; align-items:center; gap:.5ch; font-size:0.95rem; color:#9fb7ff; }
.dot{ width:.8rem; height:.8rem; border-radius:999px; background:#6c757d; }
.dot.on{ background:#16a34a; }

/* === USER OVERRIDE: A/B/AB 100x100 === */
.btn-aux{
  width: 100px !important;
  height: 100px !important;
  border-radius: 999px !important;
  font-size: 2rem !important;
}

/* === AUX SLIDERS (X/Y) AROUND A/B/AB === */
.aux-col{ display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap: clamp(8px, 2vmin, 16px); }
.aux-row{ display:flex; gap: clamp(10px, 3vmin, 22px); align-items:center; justify-content:flex-end; }
.aux-slider-block{ width: min(80vw, 46vmin); }
.aux-slider-block .form-range{ width: 100%; }

/* === guia.html styles (migrated) === */
:root { color-scheme: light dark; }
    body { font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.5; }
    .hero { background: linear-gradient(180deg,#f8fafc 0,#fff 100%); border-bottom:1px solid rgba(0,0,0,.06); }
    @media (prefers-color-scheme: dark){
      .hero { background: linear-gradient(180deg,#0b1220 0,#0e1626 100%); border-bottom-color: rgba(255,255,255,.06); }
    }
    .frame-wrap { position:relative; height: calc(300px + 5em); width:100%; overflow:hidden; border-radius:12px; border:1px solid rgba(0,0,0,.08); }
    .frame-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
    .tips li { margin-bottom:.5rem; }
    /* anti-zoom */
    input,select,textarea,button{ font-size:16px !important; }
    html,body{ touch-action:manipulation; -ms-touch-action:manipulation; }
    *{-webkit-tap-highlight-color:transparent;}

/* === base theme additions === */
:root{ color-scheme: dark light; }
a { text-decoration: none; }
.text-muted-2 { color: #9aa3ad !important; }
.bg-surface { background: #11161d; }
.border-soft { border-color: #2a2f37 !important; }
.btn:focus, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(99,102,241,.25); outline: none; }


/* === Responsive orientation layout (2025-10-09) === */
/* Keep landscape (horizontal) exactly as is; only adjust portrait */
@media (orientation: portrait) {
  .controller-two {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap, 14px);
  }
  .controller-two .left {
    order: 0; /* D-pad / direcionais on top */
  }
  .controller-two .right {
    order: 1; /* Buttons + sliders below */
  }
  /* Make buttons and sliders take full width on portrait */
  .controller-two .right .aux-row,
  .controller-two .right .aux-col,
  .controller-two .right .aux-slider-block,
  .controller-two .right .btn-aux {
    width: 100%;
    max-width: 100%;
  }
  /* Center the D-pad group */
  .controller-two .left,
  .controller-two .left .d-flex,
  .controller-two .left .pad-wrap {
    justify-content: center !important;
    align-items: center !important;
  }
  /* Add a little breathing space between groups */
  .controller-two .left { margin-bottom: clamp(8px, 2.5vh, 18px); }
}

/* Improve small phones portrait spacing */
@media (orientation: portrait) and (max-width: 480px) {
  :root { --gap: 12px; }
  .btn-pad { width: calc(var(--pad, 86px) - 8px); height: calc(var(--pad, 86px) - 8px); }
}