:root{
  --fons:#FDF8F0;
  --text:#333333;
  --botons:#3E688E;
  --botons-hover:#30536f;
  --ok:#16a34a;
  --ko:#dc2626;
  --card:#ffffff;
}

/* ===== GENERAL ===== */
*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  min-height:100vh;
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--fons);
  color:var(--text);
  display:flex;
  justify-content:center;
  align-items:center;
}

/* ===== VISIBILITAT ===== */
.hidden{ display:none !important; }

/* ===== PÀGINA PRINCIPAL ===== */
#menu{
  width:100%;
  max-width:560px;
  text-align:center;
  padding:24px;
  background:var(--fons);

  display:grid;
  grid-template-columns: 1fr 1fr;
  row-gap:10px;
  column-gap:12px;
  justify-items:center;
  align-content:center;
  min-height:100vh;
}
#menu > h1,
#menu > #status,
#menu > #themePicker{
  grid-column:1 / -1;
}
#btnA{ grid-column:1; }
#btnB{ grid-column:2; }
#btnL{ grid-column:1 / -1; }

/* ===== SELECTOR DE TEMA ===== */
#themePicker{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:10px 0 18px;
}
#themePicker label{
  font-weight:600;
  font-size:1.05rem;
  margin-bottom:4px;
}
#themePicker select{
  background:#fff;
  border:1px solid #ccc;
  border-radius:10px;
  padding:8px 10px;
  font-size:1rem;
  min-width:240px;
  text-align:center;        /* valor seleccionat centrat */
  text-align-last:center;   /* Chrome/Edge/Safari */
  display:block;
  margin:0 auto;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}
#themePicker select option{
  text-align:center;        /* opcions centrades */
}

/* ===== BOTONS ===== */
button{
  background:var(--botons); color:#fff; border:0;
  padding:12px 18px; border-radius:10px; margin:8px; cursor:pointer;
  font-size:1rem; transition:background .15s ease, transform .05s linear;
}
button:hover{ background:var(--botons-hover); }
button:active{ transform:scale(0.98); }
button:disabled{ opacity:0.55; cursor:not-allowed; }

.back{ background:#ddd; color:#333; margin-top:34px; }
.back:hover{ background:#ccc; }

/* ===== Botó "Veure signe" (overlay-btn) ===== */
.overlay-btn{
  background:var(--botons);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:12px 18px;
  font-size:1rem;
  margin:12px auto 0;
  display:block;
  cursor:pointer;
  transition:background .15s ease, transform .05s linear;
}
.overlay-btn:hover{ background:var(--botons-hover); }
.overlay-btn:active{ transform:scale(0.98); }

/* ===== JOC ===== */
#game{
  width:100%;
  max-width:560px;
  text-align:center;
  padding:24px;
  background:var(--fons);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}
#game.list-mode{
  align-items:flex-start;
  justify-content:flex-start;
  min-height:auto;
  padding-top:16px;
}

/* ===== VÍDEO ===== */
video,#iframe{
  width:320px; height:240px; border-radius:12px; background:#000;
  margin:10px auto 32px;
}
#iframeWrap{
  position:relative; width:320px; height:240px; margin:10px auto 32px;
}

/* ===== INPUT ===== */
input{
  display:block; margin:12px auto 0; padding:10px;
  border:1px solid #ccc; border-radius:10px; font-size:1rem; width:220px;
}

/* ===== LLISTAT ===== */
#list{
  margin:10px auto;
  width:min(520px,92vw);
  text-align:left;
}
#list h3{ text-align:center; margin:6px 0; }
.word-list{ list-style:none; padding:0; }
.word-list li{
  display:flex; justify-content:space-between; align-items:center;
  background:#fff; border:1px solid #e5e5e5; border-radius:10px;
  padding:8px 10px; margin:6px 0;
}
.word-actions a{ color:var(--botons); font-size:.95rem; text-decoration:none; }

/* ===== QUADRE RESULTAT (TOAST) ===== */
#result{
  position:fixed; 
  left:50%; 
  top:28px;       /* 20px més amunt que abans */
  transform:translateX(-50%);
  z-index:9999; 
  pointer-events:none;
}
.result-card{
  width:min(520px,92vw);
  background:var(--card);
  border:1px solid #ddd; 
  border-radius:14px;
  padding:14px 16px;
  display:grid; 
  grid-template-columns:44px 1fr auto; 
  align-items:center; 
  gap:12px;
  opacity:0; 
  animation:slideIn .25s ease forwards;
  pointer-events:auto; 
}
.result-icon{
  width:40px;height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; color:#fff;
}
.result-icon.ok{ background:var(--ok); }
.result-icon.ko{ background:var(--ko); }
.result-title{font-weight:800;margin-bottom:2px;}
.result-sub{font-size:.95rem;color:#555;}
.result-actions button{ margin:0; padding:10px 14px; }
@keyframes slideIn{ to{ opacity:1; transform:translateY(0); } }

/* ===== MARCADOR ===== */
.scoreboard{
  display:flex; justify-content:center; align-items:center; gap:14px; margin-top:16px;
}
.score-item{
  text-align:center; background:#fff; border:1px solid #ddd;
  border-radius:12px; padding:10px 12px; min-width:86px;
}
.score-label{
  display:block; font-size:.78rem; font-weight:700; color:#556; margin-bottom:4px; text-transform:uppercase;
}
.score-value{ font-size:1.45rem; font-weight:800; color:var(--botons); line-height:1; }

/* ===== MODE LLISTAT ===== */
#game.list-mode .scoreboard{ display:none; }

/* ===== Acordions del llistat ===== */
#list .group{
  border:1px solid #e5e5e5;
  border-radius:12px;
  background:#fff;
  margin:10px 0;
  padding:0 8px 8px;
}
#list summary{
  list-style:none;
  cursor:pointer;
  font-weight:700;
  font-size:1rem;
  padding:12px 4px;
  display:flex; align-items:center; justify-content:space-between;
}
#list summary::marker,
#list summary::-webkit-details-marker{ display:none; }
#list summary .chev{
  font-weight:900;
  transition:transform .2s ease;
}
#list details[open] summary .chev{
  transform:rotate(90deg);
}
#list .group .word-list{
  margin-top:4px;
}

/* ===== Centrar el botó “Tornar al menú” en mode Llistat ===== */
#game.list-mode .back{
  align-self:center;
  margin:16px auto 0;
}

/* --- Responsivitat: ajust del toast per pantalles petites --- */
@media (max-height: 740px){
  #result{ top: 32px; }
}
@media (max-width: 380px){
  #result{ top: 28px; }
}