/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --c-bg:#000;
  --c-panel:#111;
  --c-text:#f0f0f0;
  --c-neon:#5af2f2;
  --c-accent:#3ae03a;
}
html,body{height:100%;}
body{
  font-family:'Segoe UI',system-ui,Arial,Helvetica,sans-serif;
  background: radial-gradient(circle at 50% -60%, #0a0a0f 0%, #000 60%);
  color:var(--c-text);
  display:flex; flex-direction:column; align-items:center;
}

/* Header */
header{
  width:100%; padding:1rem 2rem; background:var(--c-panel);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:10;
  box-shadow:0 0 15px rgba(0,255,200,.25), inset 0 -2px 0 rgba(90,242,242,.25);
}
header h1{ color:var(--c-neon); font-size:1.45rem; display:flex; gap:.5rem; align-items:center; }
.header-buttons { display:flex; gap:10px; align-items:center; }

.donate-btn{
  background:linear-gradient(90deg,var(--c-neon),var(--c-accent));
  color:#111; padding:.55rem 1rem; border-radius:12px; text-decoration:none; font-weight:700;
  box-shadow:0 0 12px rgba(90,242,242,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.donate-btn:hover{ transform:scale(1.06); box-shadow:0 0 18px rgba(58,224,58,.45); }

/* Status Panel */
.status-panel{
  display:flex; gap:20px; justify-content:center; margin:15px 0; flex-wrap:wrap; font-size:14px;
}
.status-item{
  background-color:#222; color:#fff;
  padding:8px 12px; border-radius:8px; border:1px solid #444;
  text-align:center; min-width:100px;
}

/* Controller Grid */
.controller-grid{
  width:100%; max-width:1200px;
  display:grid;
  grid-template-columns: minmax(300px,1fr) minmax(180px,.6fr) minmax(300px,1fr);
  grid-template-rows: auto auto auto;
  column-gap:2.25rem; row-gap:1.25rem;
  padding:2rem 2rem 0;
  align-items:center; justify-items:center;
}

/* Topo: L1/L2 e R1/R2 com estilo real */
.trigger-group{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.trigger-group .btn { width:60px; height:35px; font-size:0.9rem; }
.trigger-bar{
  width:60px; height:8px; background:#111; border-radius:6px; margin-top:4px;
  position:relative;
  box-shadow: inset 0 0 6px rgba(90,242,242,.2);
}
.trigger-bar div{
  height:100%; width:0%; background:var(--c-accent); border-radius:6px;
  transition: width 0.1s linear;
}
#l2{ order:0; }
#l1{ order:1; }
#r2{ order:0; }
#r1{ order:1; }

/* Posicionamento topo */
.top-left { grid-column:1; grid-row:1; justify-self:start; }
.top-right{ grid-column:3; grid-row:1; justify-self:end; }

/* D-Pad */
.dpad{
  grid-column:1; grid-row:2;
  display:grid; grid-template-columns:60px 60px 60px;
  grid-template-rows:60px 60px 60px; gap:8px;
  align-items:center; justify-items:center;
}
.dpad-key{ width:60px; height:60px; border-radius:12px; font-size:1.05rem; display:flex; align-items:center; justify-content:center; }
#dpad-up    { grid-column:2; grid-row:1; }
#dpad-left  { grid-column:1; grid-row:2; }
#dpad-right { grid-column:3; grid-row:2; }
#dpad-down  { grid-column:2; grid-row:3; }

/* Centro: Share | Touch | Options | PS/Mic */
.center-cluster{ grid-column:2; grid-row:2; width:100%; }
.center-row{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; column-gap:1.25rem; }
.touch-ps{ display:flex; flex-direction:column; align-items:center; gap:.6rem; }
#ps, #mic{ font-size:0.85rem; padding:.35rem .6rem; }
#mic{ display:none; }

/* Ação */
.action-cluster{
  grid-column:3; grid-row:2;
  display:grid;
  grid-template-columns:70px 70px 70px;
  grid-template-rows:70px 70px 70px;
  gap:10px; justify-items:center; align-items:center;
}
#btn-triangle{ grid-column:2; grid-row:1; }
#btn-circle  { grid-column:3; grid-row:2; }
#btn-cross   { grid-column:2; grid-row:3; }
#btn-square  { grid-column:1; grid-row:2; }

/* Analógicos */
.stick-left { grid-column:1; grid-row:3; justify-self:center; transform:translateX(20px); }
.stick-right{ grid-column:3; grid-row:3; justify-self:center; transform:translateX(-20px); }
canvas{ background:#141414; border-radius:50%; box-shadow: inset 0 0 20px rgba(90,242,242,.25), 0 0 10px rgba(90,242,242,.2); }

/* Botão genérico */
.btn{
  border:2px solid var(--c-neon); background:#1a1a1a;
  color:var(--c-text); text-shadow:0 0 6px rgba(90,242,242,.45);
  box-shadow:0 0 10px rgba(90,242,242,.25);
  padding:.5rem .9rem; user-select:none;
  display:flex; align-items:center; justify-content:center;
  transition: all 0.15s ease;
}
.btn.pill{ border-radius:12px; }
.btn.small{ font-size:.85rem; padding:.35rem .6rem; }
.btn.round{ width:60px; height:60px; border-radius:50%; font-size:1.2rem; }
.btn.active{ background:var(--c-accent); color:#111; box-shadow:0 0 14px var(--c-accent); }

/* Calibração & Perfis */
.calibration{
  margin:1.5rem 0; padding:1rem; width:100%; max-width:560px;
  background:rgba(255,255,255,.045); border-radius:14px;
  display:flex; flex-direction:column; gap:.9rem;
  box-shadow:0 0 10px rgba(90,242,242,.18);
}
.calibration input[type="range"]{ width:100%; }
.profiles{ display:flex; gap:1rem; justify-content:center; margin-bottom:2rem; }
.profiles button{
  border:2px solid var(--c-neon); background:#1a1a1a; color:var(--c-text);
  padding:.55rem 1rem; border-radius:12px; cursor:pointer;
  box-shadow:0 0 10px rgba(90,242,242,.25);
}
.profiles button:hover{ background:var(--c-accent); color:#111; box-shadow:0 0 15px var(--c-accent); }

/* Footer */
footer{
  margin-top:auto; width:100%; text-align:center; padding:1rem; background:#111;
  color:var(--c-neon); font-size:.9rem;
}
/* Responsivo fino */
@media (max-width: 980px){
  .controller-grid{
    grid-template-columns: 1fr 140px 1fr;
    column-gap:1.25rem;
  }
  .action-cluster{ grid-template-columns: 64px 64px 64px; grid-template-rows:64px 64px 64px; }
  .dpad{ grid-template-columns:56px 56px 56px; grid-template-rows:56px 56px 56px; }
  .btn.round{ width:56px; height:56px; }
}

@media (max-width: 760px){
  .controller-grid{
    grid-template-columns: 1fr;
    grid-template-rows:auto auto auto auto auto;
    row-gap:1.25rem; justify-items:center;
  }
  .top-left, .top-right{ justify-self:center; }
  .center-cluster{ grid-column:1; }
  .action-cluster, .dpad, .stick-left, .stick-right{ grid-column:1; transform:none; }
}

/* Advanced Panel */
#advancedPanel {
  display: none;
  transition: all 0.4s ease;
}
#advancedPanel strong {
  color: #f5f5f5;
}
#advancedMenuContainer button {
  background-color: #ff4500;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: bold;
}
#advancedMenuContainer button:hover {
  background-color: #e63900;
}

/* Trigger Percent Text */
#l2-percent, #r2-percent {
  font-size:0.85rem; margin-top:4px; color:var(--c-neon);
}

/* Melhor visual para barra de gatilho */
.trigger-bar {
  width: 60px; height: 8px; background:#111; border-radius:6px; margin-top:4px;
  position:relative; box-shadow: inset 0 0 6px rgba(90,242,242,.2);
}
.trigger-bar div {
  height:100%; width:0%; background:var(--c-accent); border-radius:6px;
  transition: width 0.1s linear;
}

/* Tooltip ou indicação de botão MIC */
#mic.active { display:block; background:var(--c-neon); color:#000; }

/* Pequenos ajustes de hover */
.btn:hover { transform: scale(1.05); box-shadow:0 0 15px rgba(58,224,58,.3); }

/* Stick Canvas */
canvas { cursor: crosshair; }

/* Deadzone/Drift Label */
#deadzoneValue, #driftValue { color:var(--c-accent); font-weight:bold; }

/* Input Range estilo neon */
input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #222;
  outline: none;
  box-shadow: inset 0 0 4px rgba(90,242,242,.2);
}

/* Thumb - Webkit (Chrome, Safari) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #5af2f2;
  box-shadow: 0 0 8px #5af2f2, 0 0 16px #3ae03a;
  cursor: pointer;
  margin-top: -7px; /* centraliza no trilho */
}

/* Thumb - Firefox */
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #5af2f2;
  box-shadow: 0 0 8px #5af2f2, 0 0 16px #3ae03a;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius:50%;
  background: var(--c-accent);
  cursor: pointer;
  box-shadow: 0 0 6px var(--c-neon);
  transition: all 0.15s ease;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height:16px; border-radius:50%;
  background: var(--c-accent);
  cursor: pointer;
  box-shadow: 0 0 6px var(--c-neon);
  transition: all 0.15s ease;
}
/* ========== LAYOUT PRINCIPAL COM SIDEBAR À DIREITA ========== */
.main-layout{
  width:100%;
  max-width:1320px;
  display:grid;
  grid-template-columns: minmax(560px, 1fr) 320px; /* controle | lateral */
  gap: 24px;
  padding: 16px 24px 32px;
  align-items:start;
}
.controller-wrap{ width:100%; }

/* Sidebar direita */
.sidebar{
  position: sticky;
  top: 84px; /* abaixo do header fixo */
  align-self:start;
  background: #0f0f12;
  border:1px solid #2a2a2a;
  border-radius:14px;
  padding:16px;
  box-shadow: 0 0 12px rgba(90,242,242,.15);
}
.sidebar h2{
  color:var(--c-neon);
  font-size:1.1rem;
  margin-bottom:8px;
}
.config-item{
  display:flex; flex-direction:column; gap:8px;
  margin:12px 0;
}
.config-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:8px;
}
.config-actions button{
  border:2px solid var(--c-neon);
  background:#1a1a1a;
  color:var(--c-text);
  padding:.55rem .8rem;
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 0 8px rgba(90,242,242,.2);
}
.config-actions button:hover{
  background:var(--c-accent);
  color:#111;
  box-shadow:0 0 12px var(--c-accent);
}

/* ========== AJUSTES DE TAMANHO PARA COMPACTAR O CONTROLE ========== */
/* Triggers um pouco maiores */
.trigger-group .btn { width:72px; height:40px; font-size:0.95rem; }
.trigger-bar { width: 88px; height:10px; }

/* D-Pad mais compacto */
.dpad{
  grid-template-columns:50px 50px 50px;
  grid-template-rows:50px 50px 50px;
  gap:8px;
}
.dpad-key{ width:50px; height:50px; border-radius:10px; font-size:.95rem; }

/* Botões de ação um pouco menores */
.action-cluster{
  grid-template-columns:60px 60px 60px;
  grid-template-rows:60px 60px 60px;
  gap:10px;
}
.btn.round{ width:58px; height:58px; font-size:1.05rem; }

/* Analógicos mais enxutos visualmente sem mudar o canvas lógico */
.stick-left, .stick-right{ transform:none; }
canvas{ width:120px; height:120px; } /* escala css, mantém resolução do desenho */

/* Centro — PS e Mic menores que Touch e que os botões de ação */
#ps, #mic{ font-size:0.8rem; padding:.3rem .55rem; }

/* Responsivo */
@media (max-width: 1100px){
  .main-layout{
    grid-template-columns: 1fr; /* quebra: lateral vai abaixo */
  }
  .sidebar{ position:static; }
}