@font-face {
  font-family: "MontserratBlack";
  src: url("assets/fonts/Montserrat-Black.ttf") format("truetype");
  font-display: swap;
}

:root{
  --purple1:#8A6AFB;
  --purple2:#7552F4;
  --deep:#290A99;
  --white:#ffffff;
  --btn1:#43EA77;
  --btn2:#119B3C;
  --shadow: 0 10px 25px rgba(0,0,0,.25);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  /* Background behind the 9:16 area (desktop / wide screens) */
  background: url("assets/ui/big-pic-dark.jpg") center / cover no-repeat fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"MontserratBlack", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* 9:16 wrapper */
.app{
  position:relative;
  width:min(100vw, 430px);
  height:min(100vh, calc(min(100vw, 430px) * 16 / 9));
  aspect-ratio: 9 / 16;
  overflow:hidden;
  border-radius:18px;
  background: radial-gradient(circle at 50% 28%, var(--purple1) 28%, var(--purple2) 100%);
}
@media (max-width: 480px){
  .app{
    width:100vw;
    height:100vh;
    aspect-ratio:auto;
    border-radius:0;
  }
}

.bg{position:absolute; inset:0; pointer-events:none;}
.bg-gradient{position:absolute; inset:0; background: radial-gradient(circle at 50% 28%, var(--purple1) 28%, var(--purple2) 100%);}
.bg-spin{
  position:absolute;
  left:50%;
  top:44%;
  /* +100% size (double) for Start/Menu */
  width:280%;
  transform: translate(-50%,-50%);
  opacity:1;
  animation: spin 28s linear infinite;
}
@keyframes spin{ from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} }

.bg-objects{
  position:absolute;
  left:50%;
  top:50%;
  width:125%;
  transform:translate(-50%,-50%);
}
.obj1{opacity:1; animation: floatA 4.6s ease-in-out infinite;}
.obj2{opacity:1; animation: floatB 5.2s ease-in-out infinite;}

@keyframes floatA{
  0%,100%{transform:translate(-50%,-50%) translateY(0px);}
  50%{transform:translate(-50%,-50%) translateY(-14px);}
}
@keyframes floatB{
  0%,100%{transform:translate(-50%,-50%) translateY(-6px);}
  50%{transform:translate(-50%,-50%) translateY(10px);}
}

.bg-pattern{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
}
.app.mode-game .bg-pattern,
.app.mode-results .bg-pattern{opacity:0.8;}

/* No "capa" layers during gameplay/results */
.app.mode-game .bg-spin,
.app.mode-game .bg-objects,
.app.mode-results .bg-spin,
.app.mode-results .bg-objects{opacity:0;}

.screen{
  position:absolute;
  inset:0;
  display:none;
  color:#fff;
}
.screen.active{display:block;}

.safe-area{
  position:relative;
  height:100%;
  padding: env(safe-area-inset-top) 18px env(safe-area-inset-bottom) 18px;
}

.center-stack{
  position:absolute;
  left:0; right:0;
  top:0; bottom:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}

/* Start/Menu fine positioning */
#screen-start .center-stack,
#screen-menu .center-stack{
  justify-content:flex-start;
  padding-top: 30vh; /* logo 5% higher */
}

#screen-start .spacer,
#screen-menu .spacer{display:none;}

#screen-start .logo,
#screen-menu .logo{
  width:78%;
}

.logo{
  width:72%;
  max-width:340px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}

.spacer{height:8vh;}

.form{
  width:86%;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
}

/* Start: input ~5% lower (relative to previous) */
#screen-start .form{margin-top: 2vh;} /* input+button 15% higher */
#screen-start #btnConfirm{margin-top: 18px;}

.name-input{
  width:100%;
  height:64px;
  border-radius:34px;
  border:none;
  outline:none;
  padding:0 24px;
  font-size:22px;
  font-family:"MontserratBlack", sans-serif;
  text-align:center;
  color:#1e1e1e;
  box-shadow: var(--shadow);
}
.name-input::placeholder{color:#3a2f6a; opacity:1;}

.btn{
  font-family:"MontserratBlack", sans-serif;
  border:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active{transform: translateY(1px);}

.btn-primary{
  height:64px;
  border-radius:34px;
  padding:0 26px;
  font-size:28px;
  color:#fff;
  background: linear-gradient(45deg, var(--btn1), var(--btn2));
  border: 3px solid #fff;
  box-shadow: var(--shadow);
}

.btn-wide{width:86%;}

.menu-buttons{width:100%; display:flex; flex-direction:column; align-items:center; gap:18px;}

/* Menu: both buttons ~10% higher */
#screen-menu .menu-buttons{margin-top: 10vh; transform: translateY(0);} /* buttons 10% lower */
#screen-menu #btnPlay{margin-top: 0;}
#screen-menu #btnMultiplayer{margin-top: 16px;}

.footer{position:absolute; left:0; right:0; bottom:0; padding:0 0 12px 0;}
.footer-bar{
  height:56px;
  background: var(--deep);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  margin:0 12px;
}
.footer-text{
  font-size:14px;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.audio-toggle{
  background:transparent;
  border:none;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.audio-toggle img{width:28px; height:28px;}

/* Game */
.topbar{
  height:64px;
  background:var(--deep);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  margin-top:10px;
}
.topbar-cell{font-size:18px; white-space:nowrap;}
.topbar-left{max-width:42%; overflow:hidden; text-overflow:ellipsis;}
.topbar-mid{text-align:center; min-width:22%;}
.topbar-right{text-align:right; min-width:30%;}

.game-main{
  margin-top:18px;
  height: calc(100% - 64px - 18px - 54px - 70px - 26px);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.question{
  width:100%;
  color:#fff;
  text-align:center;
  font-size:34px;
  line-height:1.05;
  padding: 8px 10px;
  overflow:hidden;
}

.question.area22{height:22%; display:flex; align-items:center; justify-content:center;}
.question.area8{height:8%; display:flex; align-items:center; justify-content:center; font-size:28px;}

.media15x9{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:3px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.2);
  box-shadow: var(--shadow);
}
.media15x9 img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:15/9;}

.answers{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:6px;
}

.answer{
  width:100%;
  height:74px;
  border-radius:40px;
  background:#fff;
  display:flex;
  align-items:center;
  padding:0 14px;
  box-shadow: var(--shadow);
  border:4px solid transparent;
}
.answer.disabled{pointer-events:none; opacity:.92;}

.badge{
  width:58px;
  height:58px;
  border-radius:50%;
  background: var(--deep);
  display:grid;
  place-items:center;
  color:#fff;
  font-family:"MontserratBlack", sans-serif;
  font-size:26px;
  margin-right:14px;
  margin-left:-6px; /* move circles a bit left */
  flex:0 0 auto;
}
.answer-text{
  color:#0c1d3f;
  font-size:30px;
  line-height:1.05;
  overflow:hidden;
  white-space:normal;
  word-break:break-word;
  font-family:"MontserratBlack", sans-serif; /* force Montserrat-Black.ttf */
}

.answer.correct{border-color:#3CFF6C;}
.answer.wrong{border-color:#FF2F2F;}

/* L3 grid */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.grid .img-option{
  position:relative;
  width:100%;
  aspect-ratio:15/9;
  border-radius:14px;
  overflow:hidden;
  border:4px solid transparent;
  box-shadow: var(--shadow);
  background: rgba(0,0,0,.18);
}
.grid .img-option img{width:100%; height:100%; object-fit:cover; aspect-ratio:15/9; display:block;}
.grid .img-option.correct{border-color:#3CFF6C;}
.grid .img-option.wrong{border-color:#FF2F2F;}
.grid .img-option.disabled{pointer-events:none; opacity:.95;}

/* Layout-specific tweaks */
.layout-l1 .question{font-size:27px;} /* ~20% smaller */
.layout-l1 .answers{margin-top: 4vh;} /* ~15% lower */
.layout-l1 .answer-text{font-size:22px;} /* match L2 */

.layout-l2 .media15x9{
  height:20vh; /* keep height */
  width: calc(20vh * 15 / 9); /* enforce 15:9 by width */
  margin: 0 auto;
}
.layout-l2 .question{font-size:28px; margin-top:3vh;} /* question a bit bigger + 3% lower */
.layout-l2 .answers{gap:10px; margin-top:5vh;} /* grid 8% higher */
.layout-l2 .answer{height:52px; border-radius:30px;}
.layout-l2 .badge{width:46px; height:46px; font-size:22px; margin-left:-12px;}
.layout-l2 .answer-text{font-size:22px;}

.layout-l3 .question{font-size:30px;}
.layout-l3 .grid{
  margin-top: 18px;
  grid-template-columns: repeat(2, auto);
  justify-content:center;
}
.layout-l3 .img-option{
  height:12.5vh; /* slightly smaller so all fit */
  width: calc(12.5vh *  15 / 9 * 0.92); /* enforce 15:9 by width */
}
.layout-l3 .img-option img{width:100%; height:100%; object-fit:cover; aspect-ratio:14/9;}
.layout-l3 .img-option{border-radius:16px; border:2px solid #fff;}
.layout-l3 .img-option.correct{border-color:#3CFF6C;}
.layout-l3 .img-option.wrong{border-color:#FF2F2F;}

.timer-wrap{position:absolute; left:18px; right:18px; bottom:86px;}
.timer-track{
  height:26px;
  border-radius:18px;
  /* empty */
  background:#9CE3FF;
  padding:4px;
  box-shadow: var(--shadow);
}
.timer-fill{
  height:100%;
  width:0%;
  border-radius:14px;
  /* filled */
  background: #07B8FF;
}

.game-footer{
  position:absolute;
  left:18px; right:18px;
  bottom:20px; /* logo + quit slightly higher */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand-small{width:40%; max-width:190px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));}

.btn-quit{
  height:46px; /* smaller */
  border-radius:28px;
  padding:0 22px;
  font-size:22px;
  color:#fff;
  background: linear-gradient(45deg, var(--btn1), var(--btn2));
  border: 3px solid #fff;
  min-width:150px;
}

/* Results */
.results-safe{padding: env(safe-area-inset-top) 18px env(safe-area-inset-bottom) 18px;}
.results-top{display:flex; justify-content:center; margin-top:30px; position:relative;}

.confetti{
  position:absolute;
  width:80.5%;
  max-width:340px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.25));
  animation: confettiPulse 2.2s ease-in-out infinite;
}
@keyframes confettiPulse{0%,100%{transform:translate(-50%,-50%) scale(0.98);}50%{transform:translate(-50%,-50%) scale(1.03);}}


@keyframes trophyFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

.trophy{width:29.9%; max-width:161px; filter: drop-shadow(0 12px 22px rgba(0,0,0,.35)); position:relative; z-index:1; animation:trophyFloat 2.6s ease-in-out infinite;}

.results-list{
  margin-top: calc(18px + 3vh);
  display:flex;
  flex-direction:column;
  gap:12px;
  padding: 0 8px;
  max-height: 44vh;
  position:relative;
  z-index:4; /* in front of other elements */
}
.result-row{
  height:46px;
  border-radius:18px;
  background: rgba(41,10,153,.55);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
}
.result-name{font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:48%;}
.result-score{font-size:28px; min-width:70px; text-align:right;}
.result-time{font-size:18px; min-width:76px; text-align:right;}

.results-actions{position:absolute; left:0; right:0; bottom:40px; display:flex; justify-content:center;}

/* Modal text must be white */
.modal-card{color:#fff;}
.modal-text{color:#fff;}

/* Modal */
.modal{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.45);
}
.modal.show{display:flex;}
.modal-card{
  width:min(86%, 360px);
  background: rgba(41,10,153,.92);
  border:3px solid rgba(255,255,255,.7);
  border-radius:20px;
  padding:18px;
  text-align:center;
  box-shadow: var(--shadow);
}
.modal-text{font-size:24px; margin:10px 0 16px 0;}



/* === AJUSTES FINOS === */

/* L2 - mover grid 7% para baixo */
.layout-l2 .answers-grid {
    margin-top: 7% !important;
}

/* L3 - proporção 14:9 e grid 10% para baixo */
.layout-l3 .answers-grid {
    margin-top: 10% !important;
}

.layout-l3 .answers-grid img {
    aspect-ratio: 14 / 9 !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Resultados - botão avançar 5% mais para cima */
.results-screen .btn-advance {
    margin-bottom: 5% !important;
}


/* === AJUSTES ULTRA FINOS === */

/* L2 - subir grid 2% */
.layout-l2 .answers-grid {
    margin-top: 5% !important; /* estava 7% + 5%, agora ajustado fino */
}

/* L3 - mover grid 10% para baixo */
.layout-l3 .answers-grid {
    margin-top: 20% !important;
}

/* L3 - remover qualquer área transparente entre imagem e borda */
.layout-l3 .answers-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.layout-l3 .answers-grid .answer-item {
    overflow: hidden;
    padding: 0 !important;
}


/* ===== CORREÇÃO DEFINITIVA L3 BORDA ===== */

/* Container controla borda */
.layout-l3 .answers-grid .answer-item {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    border-radius: 14px;
}

/* Imagem ocupa absolutamente tudo */
.layout-l3 .answers-grid .answer-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== AJUSTE FINO L2 ===== */

/* Subir bloco respostas 5% */
.layout-l2 .answers-grid {
    margin-top: 0% !important;
}


/* ===== HOTFIX v5 ===== */

/* L2: subir bloco de respostas mais 5% */
.layout-l2 .answers-grid {
    margin-top: -5% !important;
}

/* L3: eliminar gap subpixel entre imagem e borda (sangria) */
.layout-l3 .answers-grid .answer-item {
    background: transparent !important;
}

.layout-l3 .answers-grid .answer-item img {
    top: -2px !important;
    left: -2px !important;
    width: calc(100% + 4px) !important;
    height: calc(100% + 4px) !important;
    transform: scale(1.01);
}


/* ===== AJUSTE L3 (v6): sem cantos arredondados + proporção original da imagem ===== */

.layout-l3 .answers-grid .answer-item {
    border-radius: 0 !important;
    overflow: hidden; /* mantém a borda limpa */
    padding: 0 !important;
}

/* Remover qualquer forçação de proporção e hacks anteriores */
.layout-l3 .answers-grid img,
.layout-l3 .answers-grid .answer-item img {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
    object-fit: cover !important; /* preenche o container respeitando proporção original */
}

/* Se houver borda branca, manter reta */
.layout-l3 .answers-grid .answer-item {
    border-radius: 0 !important;
}


/* ===== AJUSTES FINOS (v7) ===== */

/* L2: subir bloco de respostas sem sobrepor a pergunta */
.layout-l2 .answers{
  margin-top: 2vh !important; /* era 5vh */
}
/* (desliga ajustes antigos em answers-grid, se existirem) */
.layout-l2 .answers-grid{ margin-top: 0% !important; }

/* L3: remover bordas arredondadas e qualquer espaço entre imagem e borda */
.layout-l3 .img-option{
  border-radius: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
}

/* imagem sangrada 1px para eliminar gap subpixel, mantendo cantos retos */
.layout-l3 .img-option img{
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
  object-fit: cover !important;
  display: block !important;
  aspect-ratio: auto !important; /* manter proporção original do arquivo */
  transform: none !important;
}

/* garante que o wrapper esteja posicionado */
.layout-l3 .img-option{ position: relative !important; }