/*
 Theme Name:   Suki Dojo
 Template:     generatepress
 Version:      0.1
*/

/* ==============================
   VARIÁVEIS GERAIS DO TEMA
   ============================== */
:root{
  /* JOGOS */
  --correct-bg:#009c3b;   /* Verde Bandeira */
  --partial-bg:#ffdf00;   /* Amarelo Bandeira */
  --incorrect-bg:#dc3545; /* Vermelho incorreto */
  --main-blue:#002776;    /* Azul Bandeira */
  --light-gray:#f0f2f5;
  --dark-text:#333;
  --light-text:#ffffff;

  /* UI do site */
  --sd-bg:#f7f8fb;
  --sd-surface:#ffffff;
  --sd-border:rgba(0,0,0,.08);
  --sd-text:#1f2937;
  --sd-muted:#6b7280;
  --sd-brand:#0B63E6;
  --sd-brand-2:#06b6d4;
  --sd-radius:14px;
  --sd-shadow:0 8px 18px rgba(17,24,39,.08);
}

/* Utilitária */
.hidden{ display:none !important }

/* ==============================
   BASE DO SITE
   ============================== */
*,
*::before,
*::after{ box-sizing:border-box }
img{ max-width:100%; height:auto; display:block }

a{ color:var(--sd-brand); text-decoration:none }
a:hover{ opacity:.9 }

/* Títulos principais com gradiente (como no original) */
.entry-title,
h1{
  background:linear-gradient(90deg,var(--sd-brand),var(--sd-brand-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:800;
  line-height:1.1;
}
.entry-title{ letter-spacing:.2px }

/* H2/H3 visíveis (sem interferir no jogo) */
.single .entry-content h2{
  font-size:1.5rem; font-weight:700; color:#0f172a !important;
  border-left:5px solid var(--sd-brand);
  padding-left:.6rem; margin:1.8rem 0 .8rem;
  background:none !important; -webkit-text-fill-color:initial;
}
.single .entry-content h3{
  font-size:1.25rem; font-weight:600; color:#1e293b !important;
  border-bottom:2px solid rgba(0,0,0,.08);
  padding-bottom:.2rem; margin:1.5rem 0 .6rem;
  background:none !important; -webkit-text-fill-color:initial;
}
.wp-block-heading{ border-radius:0!important; padding:10px!important }

/* Cards/listagens */
.archive .inside-article,
.blog .inside-article,
.search .inside-article{
  background:var(--sd-surface);
  border:1px solid var(--sd-border);
  border-radius:var(--sd-radius);
  box-shadow:var(--sd-shadow);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.archive .inside-article:hover,
.blog .inside-article:hover,
.search .inside-article:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 26px rgba(17,24,39,.12);
}

/* Thumbnails 3:2 */
.post-image{ aspect-ratio:3/2 }
.post-image img{ width:100%; height:100%; object-fit:cover }

/* Breadcrumb/meta */
.rank-math-breadcrumb, .entry-meta{ color:var(--sd-muted); font-size:.88rem }

/* Painéis no conteúdo (não interfere nos games) */
.single .entry-content > *:not(.game-container):not(.quiz-container){
  background:var(--sd-surface);
  border:1px solid var(--sd-border);
  border-radius:16px;
  padding:18px; margin:14px 0;
  box-shadow:var(--sd-shadow);
}

/* Listas com respiro */
.entry-content ul,
.entry-content ol{ padding-left:1.5rem; margin-left:20px }
.wp-block-list{ list-style-position:outside !important; padding-left:3rem !important }

/* Header / Navegação */
.site-header,
.main-navigation{
  position:relative; z-index:9999;
  background:linear-gradient(90deg,#f1f5f9,#e2e8f0);
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
}
.main-navigation .main-nav ul li a{ color:#1e293b }
.main-navigation .main-nav ul li a:hover{
  background:rgba(0,0,0,.04); border-radius:8px;
}
.main-navigation .inside-navigation{
  border:1px solid rgba(0,0,0,0.33);
  background:#fff; font-weight:800;
}

/* Chip de pontuação (se usado) */
#sk-score-chip.sk-chip{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  gap:2px; margin:0 12px; padding:6px 10px;
  border:1px solid rgba(0,0,0,.08); border-radius:12px;
  background:rgba(255,255,255,.6);
  line-height:1.2; white-space:nowrap; font-size:14px;
}
#sk-score-chip .sk-row{ display:flex; gap:6px }
#sk-score-chip .sk-label{ font-weight:600 }
@media (max-width:768px){
  #sk-score-chip.sk-chip{ font-size:13px; padding:6px 8px }
}

/* Grid auxiliar páginas de jogos */
.grid-games{ display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:1024px){ .grid-games{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){  .grid-games{ grid-template-columns:1fr } }

/* TranslatePress */
li .trp-ls-language-name{ display:none }
.sub-menu .trp-ls-language-name{ display:unset !important }

/* ==============================
   GAME CONTAINER (como no original + seus realces)
   ============================== */
.game-container{
  display:grid; grid-template-columns:1fr;
  width:100%; max-width:1200px; margin:0 auto;
  background:#fff; padding:25px;
  /* realce do tema sem tirar o visual original */
  border:1px solid rgba(0,0,0,0.25);
  border-radius:0;
  box-shadow:var(--sd-shadow);
  text-align:center;
}
.game-header h1{ color:var(--main-blue); margin:0 0 5px }
.game-header p{ margin:5px 0 15px; color:#555 }

/* Área de input do jogo (classe e id para compatibilidade) */
.input-area,
#input-area{
  display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;
}
#guess-input{
  padding:12px; flex-grow:1; max-width:400px;
  border:2px solid #ccc; border-radius:6px; font-size:1em;
  transition:border-color .2s;
}
#guess-input:focus{ border-color:var(--main-blue); outline:none }
#guess-button{
  padding:12px 20px; border:none; background:var(--main-blue);
  color:#fff; border-radius:6px; cursor:pointer; font-weight:bold;
  transition:background-color .2s;
}
#guess-button:hover{ background-color:#001f5a }

/* iOS: remove chevron do datalist no input */
#guess-input[list]::-webkit-calendar-picker-indicator{ display:none !important }

/* Tabela de resultados (grid 9 colunas, como original) */
#guesses-container{ margin-top:20px }
.guess-row{ display:grid; grid-template-columns:repeat(9,1fr); gap:6px; margin-bottom:6px }
.guess-tile{
  display:table-cell; vertical-align:middle; padding:8px; border-radius:5px;
  font-size:.8em; font-weight:bold; text-align:center; overflow-wrap:break-word; color:#fff;
}
.guess-tile.partial{ color:var(--dark-text) }
.guess-row.header{ display:grid }
.guess-row.header .guess-tile{
  background:#f8f9fa; font-weight:bold; color:#333; font-size:.75em; white-space:nowrap;
}

/* Feedback visual das células (como no original) */
.correct{ background-color:var(--correct-bg); font-weight:700; color:#fff }
.partial{ background-color:var(--partial-bg); font-weight:700; color:#111 }
.incorrect{ background-color:var(--incorrect-bg); color:#fff; font-weight:700 }

/* Mensagem de fim de jogo */
#end-game-message{ margin-top:25px; padding:20px; border-radius:8px }
#end-game-message.win{ background-color:#d4edda; border:1px solid var(--correct-bg) }
#end-game-message.lose{ background-color:#f8d7da; border:1px solid var(--incorrect-bg) }

/* Tabela responsiva */
.table-scroll-wrapper{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:10px; min-width:0;
}
#guesses-table{ width:max(100%, 880px) }

/* Correto para imagens de resposta (se usado) */
#correct-answer-container{ display:flex; flex-direction:column; align-items:center; gap:5px }
#correct-answer-image{ max-width:100px; height:auto; margin:0 auto }

/* Timer */
.timer{ font-weight:700; margin-bottom:8px }
#time-left{ font-variant-numeric:tabular-nums }

/* Feedback textual */
#feedback-message{
  color:#dc3545; font-weight:bold; text-align:center;
  margin:-10px 0 15px 0; height:0; opacity:0; overflow:hidden;
  transition:all .3s ease-in-out;
}
#feedback-message.visible{ height:20px; opacity:1 }

/* Animação das linhas novas (herdado do original) */
@keyframes flipIn{
  from{ transform:perspective(400px) rotate3d(1,0,0,90deg); opacity:0 }
  to{ transform:perspective(400px) rotate3d(1,0,0,0deg); opacity:1 }
}
.new-guess td{ opacity:0; animation:flipIn .5s ease-out forwards }
.new-guess td:nth-child(1){ animation-delay:.1s } .new-guess td:nth-child(2){ animation-delay:.2s }
.new-guess td:nth-child(3){ animation-delay:.3s } .new-guess td:nth-child(4){ animation-delay:.4s }
.new-guess td:nth-child(5){ animation-delay:.5s } .new-guess td:nth-child(6){ animation-delay:.6s }

/* Loader */
.loader{
  display:inline-block; width:20px; height:20px;
  border:3px solid rgba(0,0,0,0.2); border-radius:50%;
  border-top-color:#333; animation:spin 1s ease-in-out infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Evita qualquer vazamento sem mudar o estilo */
.game-container{ overflow:hidden }

/* Tabs nunca passam da largura */
.game-mode-selector { max-width:100% }

/* ==============================
   SELETOR DE MODO
   ============================== */
.game-mode-selector{
  display:flex; border:1px solid var(--sd-border); border-radius:10px; overflow:hidden;
  margin:0 auto 15px; width:fit-content; background:#fff; box-shadow:var(--sd-shadow);
}
.game-mode-selector button{
  background:#fff; border:0; padding:10px 16px; cursor:pointer; font-size:14px;
  color:var(--sd-text); transition:background-color .2s ease, color .2s ease;
  border-left:1px solid var(--sd-border);
}
.game-mode-selector button:first-child{ border-left:none }
.game-mode-selector button:hover{ background:var(--sd-bg) }
.game-mode-selector button.active-mode{
  background:var(--sd-brand); color:#fff; font-weight:700;
}

/* Estados visuais por modo (opcional) */
body.challenge-mode .game-container{ border:2px solid #9ec5fe; background:#f4f7fb }
body.daily-mode .game-container{ border:2px solid #f9d71c; background:#fffaf0 }

/* ==============================
   PAINEL: CLÁSSICO (Configurações)
   ============================== */
.classic-config{ margin:12px 0 18px }
.config-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 14px; border-radius:10px;
  background:linear-gradient(90deg,var(--sd-brand),var(--sd-brand-2));
  color:#fff; font-weight:600; border:1px solid transparent;
  box-shadow:0 6px 14px rgba(11,99,230,.20);
  transition:transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
.config-toggle:hover{ opacity:.95; box-shadow:0 10px 18px rgba(11,99,230,.25) }
.config-toggle:active{ transform:translateY(1px) }

.config-card{
  margin-top:10px; background:var(--sd-surface);
  border:1px solid var(--sd-border); border-radius:var(--sd-radius);
  box-shadow:var(--sd-shadow); padding:16px; color:var(--sd-text);
}
.config-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;
}
.setting{
  background:var(--sd-bg); border:1px solid var(--sd-border);
  border-radius:10px; padding:10px 12px;
}
.setting-wide{ grid-column:1 / -1 }
.setting-label{ display:block; font-size:.9rem; color:var(--sd-muted); margin-bottom:6px }

/* Select bonito */
.setting-select{
  width:100%; padding:10px 36px 10px 12px; color:var(--sd-text);
  background:#fff; border:1px solid var(--sd-border); border-radius:10px; appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="%236b7280" d="M0 0l5 6 5-6z"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center; background-size:10px 6px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.setting-select:focus{ outline:none; border-color:var(--sd-brand); box-shadow:0 0 0 3px rgba(11,99,230,.15) }

/* Checkbox do painel */
.checkbox-row{
  display:flex; gap:10px; align-items:center;
  font-size:.95rem; color:var(--sd-text);
}
.checkbox-row input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--sd-brand) }

/* ==============================
   CHALLENGE CREATOR
   ============================== */
#challenge-creator{
  background:var(--sd-surface); border:1px solid var(--sd-border);
  border-radius:var(--sd-radius); box-shadow:var(--sd-shadow);
  padding:20px; margin:16px auto 0; max-width:900px; color:var(--sd-text);
}
#challenge-creator .challenge-title{
  font-size:1.25rem; font-weight:700; color:var(--sd-text);
  margin:0 0 14px 0; text-align:center; border-bottom:2px solid rgba(0,0,0,.06); padding-bottom:.4rem;
}
#challenge-creator .input-area{ display:flex; gap:10px; justify-content:center; align-items:stretch; flex-wrap:wrap }
#challenge-input{
  width:min(420px,100%); padding:10px 12px; border:1px solid var(--sd-border);
  background:#fff; border-radius:10px; font-size:1rem; color:var(--sd-text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
#challenge-input:focus{ outline:none; border-color:var(--sd-brand); box-shadow:0 0 0 3px rgba(11,99,230,.15) }

.challenge-config{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:8px;
}
.challenge-config label{
  display:flex; flex-direction:column; gap:8px;
  background:var(--sd-bg); border:1px solid var(--sd-border);
  border-radius:10px; padding:10px 12px; font-weight:600; font-size:.9rem; color:var(--sd-muted);
}
.challenge-config input[type="number"],
.challenge-config select{
  width:100%; padding:10px 36px 10px 12px; font-size:1rem; color:var(--sd-text);
  background:#fff; border:1px solid var(--sd-border); border-radius:10px; appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="%236b7280" d="M0 0l5 6 5-6z"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center; background-size:10px 6px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.challenge-config input[type="number"]:focus,
.challenge-config select:focus{ outline:none; border-color:var(--sd-brand); box-shadow:0 0 0 3px rgba(11,99,230,.15) }

/* Campo tempo controlado por .hidden */
#challenge-time-wrap.hidden{ display:none !important }
#challenge-time-wrap:not(.hidden){ display:block !important }
#challenge-time{ padding-right:12px; background-image:none }

/* Modo Perigo */
#challenge-creator .challenge-config .checkbox-row{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:#fff5f5;
  border:1px solid #fecaca; border-left:4px solid #dc2626;
  border-radius:10px; box-shadow:inset 0 1px 0 rgba(220,38,38,.06);
  font-weight:700; color:#7f1d1d;
}
#challenge-creator .challenge-config .checkbox-row input[type="checkbox"]{
  width:20px; height:20px; accent-color:#dc2626;
}

/* Botões do Challenge */
#create-challenge-btn{
  margin-top:6px; padding:12px 22px; font-size:1.05rem; font-weight:700; cursor:pointer;
  border-radius:10px; border:1px solid transparent;
  background:linear-gradient(90deg,var(--sd-brand),var(--sd-brand-2));
  color:#fff; transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 6px 14px rgba(11,99,230,.20);
}
#create-challenge-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 18px rgba(11,99,230,.28); opacity:.98 }
#create-challenge-btn:active{ transform:translateY(1px) }

.challenge-link-container{
  width:100%; margin-top:14px; padding-top:16px;
  border-top:1px solid var(--sd-border); text-align:center;
}
.challenge-link-container p{ margin:0 0 10px 0; font-weight:600; color:var(--sd-muted) }
#challenge-link{
  width:100%; padding:10px 12px; text-align:center; font-size:.95rem;
  background:#fff; border:1px solid var(--sd-border); color:var(--sd-brand);
  border-radius:10px; margin-bottom:12px; box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
}
#copy-challenge-btn{
  padding:9px 16px; cursor:pointer; border:1px solid var(--sd-border);
  background:var(--sd-surface); color:var(--sd-text); border-radius:10px; transition:all .15s ease;
}
#copy-challenge-btn:hover{ border-color:var(--sd-brand); color:var(--sd-brand); box-shadow:0 3px 10px rgba(17,24,39,.08) }
#copy-challenge-btn.copied{ background:var(--correct-bg); border-color:var(--correct-bg); color:#fff }

/* ==============================
   MODAL / MAPA (SE USAR)
   ============================== */
.modal-overlay{
  position:fixed; inset:0; width:100%; height:100%;
  background:rgba(15,23,42,.45); display:flex; justify-content:center; align-items:center;
  z-index:1000; opacity:1; transition:opacity .3s; padding:10px
}
.modal-overlay.hidden{ opacity:0; pointer-events:none }
.map-container{
  background:#fff; color:var(--sd-text); border:1px solid var(--sd-border);
  border-radius:16px; box-shadow:var(--sd-shadow); padding:20px;
  width:90%; max-width:800px; max-height:90vh; overflow-y:auto; position:relative; text-align:center;
}
.close-button{ position:absolute; top:10px; right:15px; font-size:2em; background:none; border:none; cursor:pointer; color:#888 }

/* ==============================
   QUIZ (nome/tempo/resultados)
   ============================== */
.quiz-container{
  width:100%; max-width:900px; background:#fff; padding:20px 30px;
  border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,0.1); text-align:center; margin:0 auto; color:#333;
  border:1px solid rgba(0,0,0,0.25); border-radius:0; box-shadow:var(--sd-shadow);
}

/* Subtítulo do quiz (como o “original” que você queria) */
.quiz-container .subtitle,
#results-container .subtitle{
  display:block;
  margin:10px 0 6px;
  font-weight:700;
  color:#1f2937;
  border-bottom:1px solid rgba(0,0,0,.08);
  padding-bottom:4px;
}

.subtitle{
  display:block;
  margin:10px 0 6px;
  font-weight:700;
  color:#1f2937;
  border-bottom:1px solid rgba(0,0,0,.08);
  padding-bottom:4px;
}

.quiz-container #input-area{ display:flex; justify-content:center; align-items:center; margin-bottom:20px }
.quiz-container #guess-input{
  width:70%; padding:10px; font-size:1em; border:2px solid #ccc; border-radius:5px; margin-right:10px;
}
.quiz-container #guess-input:focus{ outline:none; border-color:#337ab7 }
.quiz-container #results-container{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  max-width:900px; margin:0 auto; gap:8px;
}
@media (max-width:600px){ .quiz-container #results-container{ grid-template-columns:repeat(2,1fr) } }
.result-item{ font-size:1rem; text-align:center; padding:10px; background:#f5f5f5; border-radius:4px; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 5px }
.quiz-container .correct{ background:#5cb85c; color:#fff }
#timer{ font-size:2em; font-weight:bold; color:#d9534f; margin-bottom:10px }
#timer.running{ color:#337ab7 }

/* ==============================
   RESPONSIVIDADE
   ============================== */
@media (max-width:640px){
  #challenge-creator{ padding:16px }
  #challenge-creator .input-area{ gap:8px }
  .challenge-config{ grid-template-columns:1fr }
}
@media (max-width:767px){
  .generate-columns.mobile-grid-100, .grid-sizer.mobile-grid-100{
    width:calc(50% - 5px)!important; padding-left:10px!important;
  }
}

/* ==============================
   GAME DATA (oculto + modo debug)
   ============================== */
/* Oculta a base de dados do quiz — impede qualquer override */
#game-data,
#game-data *{
  display:none !important;
  visibility:hidden !important;
}

/* Para pré-visualizar o conteúdo do #game-data, adicione data-debug="1" */
#game-data[data-debug="1"],
#game-data[data-debug="1"] *{
  display:revert !important;
  visibility:visible !important;
}

/* Subtítulo e tags quando em modo debug */
#game-data[data-debug="1"] .subtitle{
  display:block; margin:10px 0 6px; font-weight:700; color:#1f2937;
  border-bottom:1px solid rgba(0,0,0,.08); padding-bottom:4px;
}
#game-data[data-debug="1"] .game-item{
  display:inline-block; background:#f3f4f6; border:1px solid rgba(0,0,0,.08);
  border-radius:6px; padding:4px 8px; margin:4px 6px 0 0;
  font-weight:600; font-size:.95rem; color:#111827; white-space:nowrap;
}