/* =========================================================
   1) BASE / RESET
   ========================================================= */
:root{
  --sb-track: transparent;
  --sb-thumb: rgba(255,255,255,0.12);
  --sb-thumb-hover: rgba(255,255,255,0.22);
}

html{
  font-size:16px;
  background:#000;
  scrollbar-gutter: stable both-edges;
}

body{
  margin:0;
  padding:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  font-family: Arial, sans-serif;
  background:#000;
  color:#fff;
  text-align:center;
}

/* Acessibilidade e motion */
:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
  border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Scrollbars (WebKit + padrão) */
*::-webkit-scrollbar{ width:6px; height:6px; }
*::-webkit-scrollbar-track{ background:var(--sb-track); }
*::-webkit-scrollbar-thumb{
  background:var(--sb-thumb);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background:var(--sb-thumb-hover); }
*::-webkit-scrollbar-corner{ background:transparent; }
*::-webkit-scrollbar-button{ display:none; width:0; height:0; }
*{ scrollbar-width:thin; scrollbar-color:var(--sb-thumb) var(--sb-track); }

/* =========================================================
   2) LAYOUT GERAL / CONTAINERS
   ========================================================= */
.container-fluid, .row, #radio-container, footer{
  scrollbar-color:var(--sb-thumb) var(--sb-track);
}

#radio-container{
  display:flex;
  flex-wrap:wrap;
  flex:1 0 auto;
  overflow-y:auto;
  overflow-x:hidden;
  margin-top:20px;
  padding-bottom:50px;
  will-change: transform;
}

footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  opacity:.90;
  z-index:1500;
}

/* Player container */
.lunaresponsive{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:30%;
}

/* =========================================================
   3) SIDE MENU / NAVEGAÇÃO LATERAL
   ========================================================= */
#side-menu{
  position:fixed;
  top:0;
  left:0;
  width:300px;
  height:100%;
  padding:20px 20px 80px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-sizing:border-box;
  color:#fff;
  background:#000;
  border-right:1px solid #1f1f1f;
  box-shadow:2px 0 5px rgba(0,0,0,.5);
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .3s ease;
  z-index:3000 !important;
}
#side-menu.active{ transform:translateX(0); }

#side-menu .button-container{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
  align-items:center;
}

#menu-close{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-right:10px;
  padding:0;
  border:none;
  background:none;
  color:#fff;
  font-size:24px;
  font-weight:bold;
  cursor:pointer;
}
#menu-close:hover{ color:#fff; }

.menu-link{
  color:#fff;
  text-decoration:none;
  padding:10px;
  margin-right:10px;
  font-size:16px;
}

.email-user{ align-self:flex-start; padding:0 0 0 20px; }
#expiration-date{
  text-align:left; padding:0 0 0 20px;
  font-size:.9rem; color:#bdbdbd; margin:6px 0 10px;
}

/* Botão de toggle do menu */
#menu-toggle{
  position:fixed;
  top:20px; /* ajustado por media queries mais abaixo */
  left:4%;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 0 40px 10px;
  border:none;
  background:transparent;
  color:#fff;
  cursor:pointer;
}

/* =========================================================
   4) HEADER / GRELLA / CARTÕES
   ========================================================= */
header{ padding:0; margin:10px; color:#fff; }

.logo{
  width:100%;
  max-width:120px;
  height:auto;
  cursor:pointer;
  touch-action:manipulation;
}
.logo:hover,
.logo:focus,
.logo:active{ outline:none; background:transparent; }
.logo.error{ opacity:.20 !important; }

.radio{
  width:10%;
  padding:10px;
  box-sizing:border-box;
  touch-action:manipulation;
  transition:background-color .3s;
}

.radio-logo{
  width:100px;
  height:100px;
  object-fit:contain;
}

/* hover-friendly off em touch */
@media (hover:none){
  .radio:hover, .radio:active, .radio:focus{ background:transparent; }
}

/* Efeitos suaves de entrada */
#radio-container .radio{ opacity:1; transform:none; }
#radio-container .radio.fade-seed{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
#radio-container .radio.appear{ opacity:1; transform:none; }

/* =========================================================
   5) UTILITÁRIOS / ESTADOS
   ========================================================= */
.error{ opacity:.4; }
.transparent{ opacity:.4; }
.logo.transparent{ opacity:.4; pointer-events:none; }
.disabled{ pointer-events:none; cursor:default; }

.loader{
  display:inline-block;
  width:30px;
  height:30px;
  margin-right:5px;
  font-size:12px;
  color:#666;
  background:url('loader.gif');
  background-size:contain;
}

/* =========================================================
   6) FORMULÁRIOS / CONTROLOS
   ========================================================= */
#radioForm{ display:flex; flex-direction:column; align-items:flex-start; }

.menu-item{ margin-bottom:10px; text-align:left; }
.menu-item input{ margin-right:10px; }

#loginForm{ display:flex; flex-direction:column; align-items:flex-start; }

#code{
  display:block;
  width:180px;
  padding:10px;
  margin-bottom:10px;
  font-size:12px;
  box-sizing:border-box;
  border:1px solid #ccc;
  border-radius:15px;
}

input[type="number"]{ -webkit-appearance:none; -moz-appearance:textfield; margin:0; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none !important;
  margin:0 !important;
}

/* Botões */
#register-button,
#instructions-button,
#reset-button,
#enter-button,
#sort-button,
#select-all,
#deselect-all,
#save-radios-selection{
  display:inline-block;
  width:180px;
  padding:10px;
  margin-bottom:15px;
  box-sizing:border-box;
  border:none;
  border-radius:15px;
  background:rgba(255,0,0,.8);
  color:#fff;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
  transition:background-color .3s;
}
#register-button:hover,
#instructions-button:hover,
#reset-button:hover,
#enter-button:hover,
#sort-button:hover,
#select-all:hover,
#deselect-all:hover,
#save-radios-selection:hover{
  background:rgba(255,0,0,.2);
}
button:disabled{ opacity:.3; cursor:not-allowed; }

/* =========================================================
   7) NOTIFICAÇÕES / INFO BOX / TOASTS
   ========================================================= */
/* Info box (guest) + botão X */
#info-box{
  position:fixed;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:2000 !important;
  padding-right:46px; /* espaço para o botão */
}
#info-box .info-box-close{
  position:absolute;
  top:6px;
  right:8px;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:2px solid rgba(255,255,255,.85);
  border-radius:999px;
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:28px;
  font-weight:700;
  line-height:34px;
  cursor:pointer;
  transition:
    transform .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    opacity .15s ease;
}
#info-box .info-box-close:hover,
#info-box .info-box-close:focus{
  background:rgba(0,0,0,.45);
  border-color:#fff;
  transform:scale(1.05);
  outline:none;
}
#info-box .info-box-close:active{
  transform:scale(0.98);
  opacity:.9;
}

/* Caixa topo legacy */
.txt-top{
  position:fixed;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  padding:15px 20px;
  border-radius:5px;
  box-shadow:0 0 10px rgba(0,0,0,.5);
  background:rgba(255,0,0,.9);
  color:#fff;
  font-size:16px;
  text-align:center;
}
.notification-success{ background:rgba(0,255,0,.9); }
.notification-error{   background:rgba(255,0,0,.9); }
.notification-info{    background:rgba(255,0,0,.9); }
.notification-info a{ color:#fff !important; text-decoration:none; }
.txt-top.hide{ opacity:0; top:-50px; }

/* Toast topo (Notifier) */
#top-notice{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  max-width:min(92vw,780px);
  padding:14px 18px;
  border-radius:14px;
  background:rgba(30,64,175,.80);
  color:#fff;
  font:700 16px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  z-index:10000;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#top-notice .wrap{ display:flex; align-items:center; gap:10px; }
#top-notice .msg{ text-align:center; word-break:break-word; }
#top-notice.is-visible{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
#top-notice.error{   background:#b91c1c; }
#top-notice.success{ background:#15803d; }
#top-notice.info{    background:rgba(30,64,175,.80); }

/* Toast fallback de versão */
#top-notice-reset{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  max-width:min(92vw,780px);
  padding:14px 18px;
  border-radius:14px;
  background:rgba(30,64,175,.80);
  color:#fff;
  font:700 16px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  z-index:10000;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#top-notice-reset .wrap{ display:flex; align-items:center; gap:10px; }
#top-notice-reset .msg{ text-align:center; word-break:break-word; }
#top-notice-reset.is-visible{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }

/* Esconder info-box quando o toast está visível */
body.has-toast #info-box{ display:none !important; }

/* Aviso guest (toast discreto) */
#guestNotice{
  position:fixed;
  bottom:18px;
  left:18px;
  z-index:1999;
  padding:10px 12px;
  border-radius:8px;
  background:#1f2937;
  color:#fff;
  font:500 13px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
#guestNotice.is-visible{ opacity:1; pointer-events:auto; }

/* =========================================================
   8) FLAGS
   ========================================================= */
.flags-container{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  padding:10px 0 10px 110px;
}
.flags-container .flag{
  width:50px;
  height:auto;
  cursor:pointer;
  transition:transform .2s;
}
.flags-container .flag:hover{ transform:scale(1.1); }
@media (max-width:600px){
  .flags-container .flag{ width:40px; }
}

/* =========================================================
   9) MEDIA QUERIES — LAYOUT GRELLA / PLAYER
   ========================================================= */
@media (max-width:320px){
  .radio{ width:25%; }
  .lunaresponsive{ height:25%; }
  #radio-container{ margin-bottom:55%; }
}
@media (min-width:321px) and (max-width:480px){
  .radio{ width:25%; }
  .lunaresponsive{ height:25%; }
  #radio-container{ margin-bottom:45%; }
}
@media (min-width:481px) and (max-width:767px){
  .radio{ width:16.6%; }
  #radio-container{ margin-bottom:40%; }
}
@media (min-width:768px) and (max-width:959px){
  .radio{ width:12.5%; }
  #radio-container{ margin-bottom:40%; }
}
@media (min-width:960px) and (max-width:1024px){
  .radio{ width:12.5%; }
  #radio-container{ margin-bottom:15%; }
}
@media (min-width:1025px) and (max-width:1200px){
  .radio{ width:12.5%; }
  #radio-container{ margin-bottom:20%; }
}
@media (min-width:1201px) and (max-width:1366px){
  .radio{ width:12.5%; }
  #radio-container{ margin-bottom:15%; }
}
@media (min-width:1367px) and (max-width:1600px){
  .radio{ width:10%; }
  #radio-container{ margin-bottom:15%; }
}
@media (min-width:1601px) and (max-width:1920px){
  .radio{ width:10%; }
  #radio-container{ margin-bottom:15%; }
}
@media (min-width:1921px){
  .radio{ width:10%; }
  #radio-container{ margin-bottom:15%; }
}

/* =========================================================
   10) MEDIA QUERIES — POSIÇÃO/TAMANHO DO #menu-toggle
   (mantidos os breakpoints originais, ordenados asc.)
   ========================================================= */
@media (min-width:320px){  #menu-toggle{ top:20px; left:4%;   font-size:35px; } }
@media (min-width:344px){  #menu-toggle{ top:20px; left:5.2%; font-size:40px; } }
@media (min-width:360px){  #menu-toggle{ top:20px; left:5.6%; font-size:40px; } }
@media (min-width:375px){  #menu-toggle{ top:20px; left:5.6%; font-size:40px; } }
@media (min-width:390px){  #menu-toggle{ top:20px; left:6%;   font-size:40px; } }
@media (min-width:412px){  #menu-toggle{ top:20px; left:6.2%; font-size:40px; } }
@media (min-width:414px){  #menu-toggle{ top:20px; left:6.2%; font-size:40px; } }
@media (min-width:430px){  #menu-toggle{ top:20px; left:6.2%; font-size:40px; } }
@media (min-width:480px){  #menu-toggle{ top:20px; left:7%;   font-size:40px; } }
@media (min-width:540px){  #menu-toggle{ top:20px; left:3.4%; font-size:40px; } }
@media (min-width:600px){  #menu-toggle{ top:20px; left:3.8%; font-size:40px; } }
@media (min-width:667px){  #menu-toggle{ top:20px; left:4.2%; font-size:40px; } }
@media (min-width:720px){  #menu-toggle{ top:20px; left:4.8%; font-size:40px; } }
@media (min-width:740px){  #menu-toggle{ top:20px; left:4.8%; font-size:40px; } }
@media (min-width:768px){  #menu-toggle{ top:20px; left:2.8%; font-size:40px; } }
@media (min-width:800px){  #menu-toggle{ top:20px; left:2.8%; font-size:40px; } }
@media (min-width:820px){  #menu-toggle{ top:20px; left:3%;   font-size:40px; } }
@media (min-width:844px){  #menu-toggle{ top:20px; left:3.2%; font-size:40px; } }
@media (min-width:853px){  #menu-toggle{ top:20px; left:3.2%; font-size:40px; } }
@media (min-width:882px){  #menu-toggle{ top:20px; left:3.2%; font-size:40px; } }
@media (min-width:896px){  #menu-toggle{ top:20px; left:3.2%; font-size:40px; } }
@media (min-width:912px){  #menu-toggle{ top:20px; left:3.4%; font-size:40px; } }
@media (min-width:914px){  #menu-toggle{ top:20px; left:3.4%; font-size:40px; } }
@media (min-width:915px){  #menu-toggle{ top:20px; left:3.4%; font-size:40px; } }
@media (min-width:932px){  #menu-toggle{ top:20px; left:3.4%; font-size:40px; } }
@media (min-width:1024px){ #menu-toggle{ top:20px; left:3.6%; font-size:40px; } }
@media (min-width:1180px){ #menu-toggle{ top:20px; left:4%;   font-size:40px; } }
@media (min-width:1280px){ #menu-toggle{ top:20px; left:4%;   font-size:45px; } }
@media (min-width:1366px){ #menu-toggle{ top:20px; left:3.2%; font-size:45px; } }
@media (min-width:1400px){ #menu-toggle{ top:20px; left:3.2%; font-size:45px; } }
@media (min-width:1800px){ #menu-toggle{ top:20px; left:3.6%; font-size:45px; } }

/* ===== Drag visual fixes (override seguro) ===== */
#radio-container .radio.drag-arming .logo{
  /* feedback leve no long-press, sem anel vermelho */
  filter: grayscale(1) brightness(1.1) contrast(1.02);
  opacity: .6;
  transform: scale(.90);
  border-radius: 8px;
  box-shadow: none !important;
}

#radio-container .drag-chosen .logo{
  /* anel vermelho APENAS no item escolhido pelo Sortable */
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,044,044,.90) inset, 0 0 0 3px rgba(250,044,044,.60);
  filter: none;
  opacity: 0,6;
  transform: scale(1);
}

#radio-container .radio.drag-active .logo{
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,044,044,.90) inset, 0 0 0 3px rgba(250,044,044,.90);
  filter: none; opacity: 0,6; transform: scale(1);
}
#radio-container .drag-ghost .logo{
  /* o ghost não herda o anel */
  box-shadow: none !important;
  border-radius: 8px;
  opacity: .8;
}

/* Bloqueio rápido de cliques logo após o drop é tratado em JS; aqui apenas estilo do ghost */
.drag-ghost{ opacity: .8; }

#code,
#recover-email{
  display:block;
  width:180px;
  padding:10px;
  margin-bottom:10px;
  font-size:12px;
  box-sizing:border-box;
  border:1px solid #ccc;
  border-radius:15px;
  background:#fff;
  color:#000;
}

/* 2) O botão "Recuperar Código" entra no mesmo grupo dos botões vermelhos */
#register-button,
#instructions-button,
#reset-button,
#enter-button,
#sort-button,
#select-all,
#deselect-all,
#save-radios-selection,
#recover-button{
  display:inline-block;
  width:180px;
  padding:10px;
  margin-bottom:15px;
  box-sizing:border-box;
  border:none;
  border-radius:15px;
  background:rgba(255,0,0,.8);
  color:#fff;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
  transition:background-color .3s;
}

#register-button:hover,
#instructions-button:hover,
#reset-button:hover,
#enter-button:hover,
#sort-button:hover,
#select-all:hover,
#deselect-all:hover,
#save-radios-selection:hover,
#recover-button:hover{
  background:rgba(255,0,0,.2);
}

/* 3) Layout do bloco de recuperação (alinhado como o login) */
#recoverForm{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
#recover-title{
  margin:6px 0 8px;
  font-size:18px;
  font-weight:700;
  color:#fff;
}
#recover-hint{
  margin:4px 0 10px;
  font-size:12px;
  line-height:1.35;
  color:#ddd;
  text-align:center;
  width:180px;           /* igual à largura dos inputs/botões */
}

#side-menu{ transform:translateX(-100%); transition:transform .3s ease; }
#side-menu.active{ transform:translateX(0); }

/* === Seta de ajuda do menu — mais perto do ícone === */

#menu-hint{
  position: fixed;
  top: 30px;
  left: 90px; 
  width: 70px;
  height: 28px;
  z-index: 1100;
  pointer-events: none;
  opacity: .95;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  background-repeat: no-repeat;
  background-size: contain;
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48'>\
<path d='M6,36 C38,8 70,10 106,12' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round'/>\
<path d='M98,4 116,12 98,20' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  transform: scaleX(-1);
  animation: menu-hint-nudge 1.6s ease-in-out infinite;
}

/* ≥ 344px */
@media (min-width: 344px){
  #menu-hint{ left: 70px; top: 35px; }
}

/* ≥ 360px */
@media (min-width: 360px){
  #menu-hint{ left: 75px; top: 35px; }
}

/* ≥ 480px */
@media (min-width: 480px){
  #menu-hint{ left: 85px; top: 35px; }
}

/* ≥ 768px (tablet) */
@media (min-width: 768px){
  #menu-hint{ left: 90px; top: 35px; }
}

/* ≥ 992px (desktop) */
@media (min-width: 992px){
  #menu-hint{ left: 90px; top: 45px; }
}

/* ≥ 1200px (desktop largo) */
@media (min-width: 1200px){
  #menu-hint{ left: 120px; top: 45px; }
}

/* ≥ 2560px (desktop largo) */
@media (min-width: 2560px){
  #menu-hint{ left: 140px; top: 45px; }
}

@keyframes menu-hint-nudge{
  0%   { transform: translateX(0)   translateY(0) rotate(-2deg)  scaleX(-1); opacity:.95; }
  50%  { transform: translateX(6px) translateY(-2px) rotate(4deg) scaleX(-1); opacity:1; } /* <-- era 12px */
  100% { transform: translateX(0)   translateY(0) rotate(-2deg)  scaleX(-1); opacity:.95; }
}

@media (prefers-reduced-motion: reduce){
  #menu-hint{ animation: none; }
}

/* Se o teu HTML for mesmo irmão (~), mantém; caso contrário usa JS para esconder ao abrir */
#side-menu.active ~ #menu-hint { display:none; }