/* ===== Figures game specific styles ===== */


.topbar{
  max-width: 1200px;   /* el mateix que tens a .wrap */
  margin: 14px auto 12px;
}

/* Títol: que no es faci gegant ni baixi */
.topbar h1{
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
}

/* La fila principal: 3 columnes */
.topbarInner{
  display: grid;
  grid-template-columns: 1fr auto auto; /* títol | com funciona | dreta */
  align-items: start;                  /* no centrar vertical */
  gap: 14px;
}

/* Botó "Com funciona?": compacte, mateixa alçada que un botó normal */
.howBtn, .btnHow, #btnHow, a.how, button.how {   /* deixa’n un si saps el selector exacte */
  padding: 8px 14px !important;
  line-height: 1 !important;
  height: 34px;
  align-self: start;                 /* queda a dalt */
}

.rules{
  margin:0;
  padding-left: 18px;
  opacity:.95;
}

/* Home start panel */
.startCard{
  max-width: 420px;
  margin: 18px auto 0;
  padding: 14px 14px 16px;
}

.startLabel{
  font-size: 14px;
  opacity:.9;
  margin-bottom: 6px;
}

.startForm{
  display:flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.segmented{
  display:flex;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
}
.segmented input{ display:none; }
.segmented label{
  flex:1;
  text-align:center;
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  user-select:none;
  font-size: 15px;
  opacity:.95;
}
.segmented input:checked + label{
  background: rgba(255,255,255,.92);
  color: #0b2b5f;
  font-weight: 800;
}

.btnStart{
  width: 100%;
}

/* In-game layout */
.wrap{
  display:grid;
  grid-template-columns: 1.8fr 0.7fr;
  gap: 20px;
  margin-top: 14px;
}

@media (max-width: 900px){
  .wrap{ grid-template-columns: 1fr; }
}

/* Figure box */
.figureBox{
  background: rgba(255,255,255,.92);
  color: #0b2b5f;
  border-radius: 14px;
  padding: 12px;
}

.figureTitle{
  font-size: clamp(20px, 2.5vw, 22px);
  line-height: 1.25;
  margin: 0 0 10px;
  color: #0b2b5f;
}

#success-overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 160px;
  padding: 14px 22px;

  font-size: 2rem;
  font-weight: 900;
  letter-spacing: .04em;

  color: #fff;
  background: rgba(46, 204, 113, 0.9);
  border-radius: 999px;

  z-index: 999;
  pointer-events: none;
  opacity: 0;

  transition: opacity .18s ease, transform .18s ease;
}

#success-overlay.show{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


.figure svg,
.board svg{
  width: 100%;
  max-width: 520px;
  height: auto;
}

/* Messages */
.ok{
  background: #ffd966;
  color:#111;
  padding: 10px 12px;
  border-radius: 12px;
  margin-top: 12px;
  border: 1px solid rgba(0,0,0,.15);
}
.err{
  background: rgba(139,27,27,.90);
  padding: 10px 12px;
  border-radius: 12px;
  margin-top: 12px;
}

/* Topbar row when playing */
.topbarRow{
  display:flex;
  gap: 14px;
  align-items:center;
}

/* El marcador cap a la dreta */
.topbarRow .topStats{
  margin-left: auto;         /* clau: empeny a la dreta */
  text-align: right;
}

/* Botó Com funciona? i Nova partida: compactes, mateixa alçada */
#helpBtn,
.topbarRow .linkReset{
  height: 34px;
  line-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
}

/* Si el botó té padding gran per defecte, el normalitzem */
#helpBtn{
  padding: 0 14px !important;
}

/* Columna dreta: nova partida + stats apilats i alineats a la dreta */
.topRight{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  justify-self: end;
}

/* "Nova partida" a dalt a la dreta (i no a mig) */
.topRight .newGame, .topRight a{
  align-self: flex-end;
}

.btnHelp{
  min-width: 220px;
}

.linkReset{
  text-decoration: underline;
  opacity:.95;
}

/* Stats més compactes perquè no allarguin */
.topStats{
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

/* zona esquerra: botons/links */
.topLeft{
  display:flex;
  align-items:center;
  gap: 14px;
  flex: 1 1 auto;      /* ocupa espai i empeny el marcador cap a la dreta */
  min-width: 0;
}

.topTotal b{ font-size: 18px; }
.topLast{ margin-top: 2px; font-size: 15px; opacity:.95; }
.topStatsLine{ opacity:.95; }

/* Path bar/buttons area (if used) */
.pathBar{ margin-top: 10px; }

.pathBar{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.btnGhost{
  background: rgba(255,255,255,0.15);
  color: #fff;

  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 14px;

  padding: 10px 20px;
  font-size: 15px;
  font-weight: 800;

  cursor: pointer;

  transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}

.btnGhost:disabled{
  opacity: .35;
  cursor: not-allowed;
  filter: grayscale(30%);
}

.btnGhost:hover{
  background: rgba(255,255,255,0.28);
}

.btnGhost:active{
  transform: scale(0.97);
}

.btnGhost:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* 1) El grid del joc no ha d'anar a ample complet */
.wrap{
  max-width: 1200px;
  margin: 14px auto 0;
  align-items: start;
}

/* important perquè grid/items no desbordin */
.wrap > .card{ min-width: 0; }

/* 2) L’SVG s’ha d’adaptar a la pantalla: límit d’alçada */
.figureWrap{
  display:flex;
  justify-content:center;
  position: relative;
}

/* el teu SVG té class="figSvg" */
.figSvg{
  width: 100%;
  max-width: 900px;          /* no creix infinit */
  height: auto;
  max-height: 62vh;          /* clau: no pot ocupar més que el 62% de l’alçada de la pantalla */
}

/* 3) En pantalles baixes, fem scroll intern als panells (no al body) */
@media (max-height: 900px){
  .wrap > .card{
    max-height: calc(100vh - 190px); /* ajusta si la topbar és més alta/baixa */
    overflow: auto;
  }

  .topbarInner{ flex-wrap: wrap; }
  .topStats{ width: 100%; margin-left: 0; text-align: left; }
}

/* En pantalles estretes, apilem i deixem més marge */
@media (max-width: 900px){
  .figSvg{ max-height: 55vh; }
}
/* VÈRTEX: cercle + número dins, amb colors amables */
.node { cursor: pointer; }

.node circle{
  fill: rgba(255, 217, 102, .95);   /* groc suau tipus "amable" */
  stroke: rgba(20, 20, 20, .85);
  stroke-width: 1.2;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

.node text{
  font-family: system-ui, Arial, sans-serif;
  font-weight: 800;
  /* IMPORTANT: en SVG, el font-size "sense unit" escala amb el viewBox.
     Per això aquí fem servir una mida petita i forcem !important.
     (Aquest joc fa servir cercles r~4.4, així que 4.6–5.0 va bé.) */
  font-size: 4.8px !important;
  fill: #111;
  text-anchor: middle;

  /* Centrat real dins del cercle */
  dominant-baseline: middle;
  alignment-baseline: middle;

  /* Millora llegibilitat sobre línies */
  paint-order: stroke;
  stroke: rgba(255,255,255,.65);
  stroke-width: 0.45px;

  pointer-events: none;
  user-select: none;
}


/* Estat desactivat */
.node.disabled circle{
  opacity: .35;
}
.node.disabled{
  cursor: not-allowed;
}
.node.active circle{
  fill: #2ecc71;
  stroke: #1e8f4a;
}
.node.active text{
  fill: #0b3d1e;
}
.edge.used{
  stroke: #2ecc71;
  stroke-width: 3.2;
  stroke-dasharray: none;
}
.btnPrimary{
  font-size: 18px;
  letter-spacing: .4px;
}
.node:hover circle{
  transform: none !important;
}
.node circle,
.node text{
  transition: none !important;
  animation: none !important;
}
/* el cercle real continua igual, però accepta clics bé */
.node circle{ pointer-events: all; }

/* si hi ha algun cercle “hit” invisible (si el tens) */
.node .hit{
  fill: transparent;
  stroke: transparent;
  stroke-width: 18;      /* zona gran per clicar */
  pointer-events: stroke;
}
/* La card del joc: columna (títol + figura + controls) */
.gameCard{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* La zona on tens el SVG ocupa el que queda */
.gameCard .figureWrap{
  flex: 1 1 auto;
  min-height: 0;
}

/* Barra inferior (Recorregut + botons + Comprova) enganxada a baix */
.gameCard .bottomBar{
  position: sticky;
  bottom: 0;
  padding: 10px 0 0;
  background: linear-gradient(to top, rgba(60,60,60,.55), rgba(60,60,60,0));
  backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
  .topbar {
    padding: 12px;
  }

  .topbarInner {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .topbarInner h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.1;
    text-align: left;
    max-width: 100%;
  }

  .rules {
    margin: 0;
    padding-left: 1.2rem;
    max-width: 100%;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .rules li {
    margin-bottom: 0.45rem;
    font-size: 0.95rem; /*Prova per fer la lletra més petita.*/
  }

  .startCard {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  .startForm {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .startLabel {
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }

  .segmented {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .segmented label {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 14px;
    font-size: 1rem;
  }

  .btnStart {
    width: 100%;
    min-height: 48px;
    font-size: 1.05rem;
  }
}

@media (max-width: 480px) {
  .topbarInner h1 {
    font-size: 1.55rem;
  }

  .rules {
    font-size: 0.85rem;
  }

  .segmented label {
    font-size: 0.98rem;
    padding: 11px 12px;
  }
}