/* Touch gamepad overlay for Ruffle (v2.1) */
/* Stage sizing so controls can live OUTSIDE the Ruffle box */
.touch-ui #player_frame{
  position: relative;
  width: 100%;
  max-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.touch-ui #ruffle_container{
  position: relative;
  margin: 0 auto;
}

:root{ --pad-scale: 1; }

.mc_gamepad{
  position:absolute;
  inset:0;
  z-index:50;
  pointer-events:none;
}

.mc_dpad, .mc_ab, .mc_sys{ pointer-events:none; }

/* D-pad (bottom-left) */
.mc_dpad{
  position:absolute;
  left:calc(env(safe-area-inset-left, 0px) + clamp(10px, 2.2vw, 22px));
  bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 3vh, 28px));
  width:clamp(150px, 34vmin, 240px);
  height:clamp(150px, 34vmin, 240px);

  transform:scale(var(--pad-scale, 1));
  transform-origin:bottom left;
}

/* A/B cluster (bottom-right) */
.mc_ab{
  position:absolute;
  right:calc(env(safe-area-inset-right, 0px) + clamp(10px, 2.2vw, 22px));
  bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 3vh, 28px));
  display:flex;
  gap:clamp(10px, 2.2vmin, 18px);
  align-items:flex-end;

  transform:scale(var(--pad-scale, 1));
  transform-origin:bottom right;
}

/* System buttons (bottom-center) */
.mc_sys{
  position:absolute;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(10px, 2.4vh, 22px));
  display:flex;
  gap:clamp(10px, 2.2vmin, 18px);

  transform:translateX(-50%) scale(var(--pad-scale, 1));
  transform-origin:bottom center;
}

.mc_pad,
.mc_act,
.mc_sysbtn{
  pointer-events:auto;
  -webkit-tap-highlight-color: transparent;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;

  border:1px solid rgba(34,50,74,.9);
  background:rgba(15,26,43,.72);
  color:#c7d5e0;
  font-weight:700;
  border-radius:clamp(14px, 3vmin, 20px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

/* IMPORTANT: do NOT set transform here -> otherwise buttons "jump" (they use transform for positioning) */
.mc_pad:active,
.mc_act:active,
.mc_sysbtn:active{
  filter:brightness(1.12);
  box-shadow:0 8px 18px rgba(0,0,0,.45);
}

/* D-pad buttons (3x3 grid) */
.mc_pad{
  position:absolute;
  width:clamp(52px, 12vmin, 86px);
  height:clamp(52px, 12vmin, 86px);
  font-size:clamp(18px, 4.8vmin, 28px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.mc_up{left:50%; top:0; transform:translateX(-50%);}
.mc_down{left:50%; bottom:0; transform:translateX(-50%);}
.mc_left{left:0; top:50%; transform:translateY(-50%);}
.mc_right{right:0; top:50%; transform:translateY(-50%);}

/* Action buttons */
.mc_act{
  width:clamp(64px, 14vmin, 96px);
  height:clamp(64px, 14vmin, 96px);
  font-size:clamp(18px, 5.2vmin, 30px);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* System buttons */
.mc_sysbtn{
  min-width:clamp(86px, 20vmin, 132px);
  height:clamp(38px, 8.5vmin, 52px);
  font-size:clamp(12px, 2.8vmin, 14px);
  padding:0 12px;
}

/* Fullscreen keeps overlay aligned */
#player_frame:fullscreen .mc_gamepad,
#player_frame:-webkit-full-screen .mc_gamepad{
  position:absolute;
  inset:0;
}

/* ================= VISUAL HAPTICS (pulse) ================= */

/* Standard pulse (D-pad cluster + system) */
@keyframes mcPulse{
  0%   { transform: scale(1);    filter: brightness(1); }
  50%  { transform: scale(0.96); filter: brightness(1.2); }
  100% { transform: scale(1);    filter: brightness(1); }
}

.mc_pulse{
  animation: mcPulse 90ms ease-out;
}

/* Stronger pulse for A/B */
@keyframes mcPulseStrong{
  0%   { transform: scale(1);    filter: brightness(1); }
  40%  { transform: scale(0.90); filter: brightness(1.35); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* Override only inside A/B cluster */
.mc_ab .mc_pulse{
  animation: mcPulseStrong 120ms cubic-bezier(.2,.9,.2,1);
}

/* ================= HAPTICS ICON UI ================= */

#mc_haptics_ext{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(15,26,43,.55);
  border:1px solid rgba(34,50,74,.6);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mc_h_row{
  display:flex;
  align-items:center;
  gap:14px;
}

.mc_h_toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.mc_h_toggle input{
  display:none;
}

.mc_h_icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;

  background:rgba(20,32,54,.65);
  border:1px solid rgba(60,90,140,.55);
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  filter:grayscale(1) brightness(.7);
  transition:all .15s ease;
}

.mc_h_toggle input:checked + .mc_h_icon{
  filter:none;
  background:rgba(30,56,96,.85);
  box-shadow:0 8px 18px rgba(0,0,0,.45);
  transform:translateY(-1px);
}

.mc_h_slider{
  gap:10px;
}

#mc_haptics_ext input[type="range"]{
  flex:1;
  appearance:none;
  height:6px;
  border-radius:4px;
  background:linear-gradient(
    to right,
    #6fa8ff 0%,
    #6fa8ff 50%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.18) 100%
  );
}

#mc_haptics_ext input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#6fa8ff;
  border:2px solid #1a2740;
}

#mc_haptics_ext input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#6fa8ff;
  border:2px solid #1a2740;
}

#mc_haptics_ext input[type="range"]:disabled{
  opacity:.35;
}

#hapticsStrengthVal{
  min-width:32px;
  text-align:right;
  font-weight:700;
  color:#9fc1ff;
}

/* odstrani okvir in stil vibLabel */
#vibLabel{
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}


/* ================== FORCE VISIBILITY BY MODE/LAYOUT (server-driven) ================== */

/* If admin says "none", never show overlay (even if JS/cache fails). */
body[data-mobile-mode="none"] #mc_gamepad{
  display:none !important;
}

/* Layout forcing using data-layout on #mc_gamepad */
#mc_gamepad[data-layout="dpad"] .mc_ab,
#mc_gamepad[data-layout="dpad"] .mc_sys{ display:none !important; }

#mc_gamepad[data-layout="dpad_a"] .mc_b,
#mc_gamepad[data-layout="dpad_a"] .mc_sys{ display:none !important; }

#mc_gamepad[data-layout="dpad_ab"] .mc_sys{ display:none !important; }

#mc_gamepad[data-layout="a_only"] .mc_dpad,
#mc_gamepad[data-layout="a_only"] .mc_b,
#mc_gamepad[data-layout="a_only"] .mc_sys{ display:none !important; }

#mc_gamepad[data-layout="ab_only"] .mc_dpad,
#mc_gamepad[data-layout="ab_only"] .mc_sys{ display:none !important; }