/* ==== ALMA – estilo consistente y estética cuidada ==== */
:root {
    --bg1: #e0f7fa;
    --bg2: #b2ebf2;
    --text: #004F66;
    --white: #ffffff;

    --teal: #5EC0CF;
    --teal-hover: #4AA8B6;

    /* Botones naranjas (inferiores) */
    --orange: #ff7043;
    --orange-hover: #ff5722;

    /* Colores para categorías (distintos entre sí) */
    --catA: #5EC0CF;
    /* teal */
    --catA-hover: #4AA8B6;
    --catB: #9A8BC2;
    /* violeta */
    --catB-hover: #8577b0;

    --ok: #37c36a;
    --err: #e76666;

    --shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
    --softshadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
}

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

body {
    font-family: 'Gotham Rounded', 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background:linear-gradient(135deg,#fff 0%,#e0e0e0 100%);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    color: var(--text);
}

/* Header */
.header {
    text-align: center;
    margin-bottom: 18px;
    width: 100%;
    max-width: 1000px;
}

.title {
    color: #9A8BC2;
    font-size: 2.2rem;
    font-weight: 900;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .05);
    margin-bottom: 12px;
}

/* Stats */
.stats {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: nowrap;
    margin-bottom: 14px;
}

.stat {
    background: var(--white);
    padding: 12px 18px;
    border-radius: var(--radius-md);
    box-shadow: var(--softshadow);
    min-width: 130px;
    text-align: center;
}

.stat-label {
    font-weight: 800;
    font-size: .95rem;
    margin-bottom: 4px;
}

.stat-value {
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--teal);
}

/* Contenedor principal */
.game-container {
    background: rgba(255, 255, 255, .2);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
    padding: 20px;
    width: 100%;
    max-width: 1000px;
    /* espacio para que el footer no tape nada en pantallas chicas */
    margin-bottom: 64px;
}

/* Segmented control (selector de set) */
.segmented {
    background: rgba(255, 255, 255, .55);
    border-radius: 28px;
    padding: 6px;
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    box-shadow: var(--softshadow);
    margin-bottom: 12px;
}

.segment {
    border: double;
    background: transparent;
    color: var(--text);
    font-weight: 900;
    padding: 10px 14px;
    border-radius: 22px;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.segment:hover {
    background: rgba(255, 255, 255, .6);
    transform: translateY(-1px);
}

.segment.active {
    background: var(--teal);
    color: #fff;
    box-shadow: 0 4px 12px rgba(94, 192, 207, .35);
}

/* Título set */
.subtitle {
    text-align: center;
    font-weight: 900;
    margin-bottom: 12px;
}

/* Pool de fichas (todas las palabras en un cuadro) */
.pool {
    background: rgba(255, 255, 255, .25);
    border-radius: var(--radius-md);
    padding: 14px;
    box-shadow: var(--softshadow);
    margin-bottom: 14px;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.chip {
    background: #fff;
    color: var(--text);
    border: 2px solid rgba(94, 192, 207, .45);
    border-radius: 16px;
    padding: 10px 14px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    box-shadow: var(--softshadow);
    transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease;
}

.chip:hover {
    transform: translateY(-2px);
    background: #f4feff;
    border-color: var(--teal);
}

.chip.selected {
    outline: 3px solid rgba(94, 192, 207, .35);
}

.chip.lock {
    cursor: default;
    opacity: .95;
}

.chip.catA {
    background: var(--catA);
    border-color: var(--catA);
    color: #fff;
}

.chip.catB {
    background: var(--catB);
    border-color: var(--catB);
    color: #fff;
}

/* Botones de clasificación (abajo del cuadro) */
.classify-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.btn {
    border: none;
    cursor: pointer;
    border-radius: 22px;
    padding: 12px 18px;
    font-weight: 900;
    font-size: 1rem;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    box-shadow: var(--softshadow);
    min-height: 42px;
}

.btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.btn.classify.a {
    background: var(--catA);
    color: #fff;
}

.btn.classify.a:hover {
    background: var(--catA-hover);
    transform: translateY(-2px);
}

.btn.classify.b {
    background: var(--catB);
    color: #fff;
}

.btn.classify.b:hover {
    background: var(--catB-hover);
    transform: translateY(-2px);
}


/* Feedback */
.feedback {
    min-height: 24px;
    text-align: center;
    font-weight: 900;
    margin: 8px 0 0;
}

.feedback.ok {
    color: #188a4e;
}

.feedback.err {
    color: #a53e3e;
}

/* Botones inferiores */
.bottom-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 14px;
}

.reset-btn {
    background: var(--orange);
    color: #fff;
    border: none;
    padding: 12px 22px;
    border-radius: 22px;
    font-weight: 900;
    cursor: pointer;
    font-size: 1rem;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    box-shadow: 0 4px 14px rgba(255, 112, 67, .3);
    min-height: 42px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reset-btn:hover {
    background: var(--orange-hover);
    transform: translateY(-2px);
}

/* Footer */
footer {
    position: fixed;
    bottom: 16px;
    right: 16px;
    font-weight: 700;
    font-size: .9rem;
    opacity: .85;
    z-index: 10;
}

footer p {
    margin: 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .35);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}

/* ==================== RESPONSIVE ==================== */

/* Tablets angostas */
@media (max-width: 900px) {
    .game-container {
        max-width: 860px;
    }

    /* segmented scrollable como en mobile */
    .segmented {
        padding: 6px 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        justify-content: flex-start;
        scrollbar-width: none;
        /* Firefox */
    }

    .segmented::-webkit-scrollbar {
        display: none;
    }

    /* WebKit */
    .segment {
        flex: 0 0 auto;
        /* evita que colapsen */
    }
}

/* Tablet */
@media (max-width: 768px) {
    .title {
        font-size: 2rem;
    }

    /* segmented scrollable como en mobile */
    .segmented {
        padding: 6px 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .segmented::-webkit-scrollbar {
        display: none;
    }

    .segment {
        flex: 0 0 auto;
        font-size: .95rem;
        padding: 9px 12px;
        border-radius: 18px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    body {
        padding: 16px;
    }

    .title {
        font-size: 1.8rem;
    }

    .stats {
        gap: 10px;
    }

    .stat {
        min-width: 110px;
        padding: 9px 12px;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .game-container {
        padding: 16px;
        margin-bottom: 72px;
    }

    /* segmented scrollable */
    .segmented {
        padding: 6px 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        justify-content: flex-start;
        scrollbar-width: none;
        /* Firefox */
    }

    .segmented::-webkit-scrollbar {
        display: none;
    }

    /* WebKit */
    .segment {
        flex: 0 0 auto;
        /* no se colapsa */
        font-size: .9rem;
        padding: 8px 12px;
        border-radius: 18px;
    }

    .subtitle {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .pool {
        padding: 12px;
    }

    .chips {
        gap: 8px;
    }

    .chip {
        padding: 8px 10px;
        font-size: .95rem;
        border-radius: 14px;
    }

    .classify-buttons {
        gap: 10px;
    }

    .btn {
        padding: 10px 14px;
        font-size: .95rem;
        border-radius: 18px;
        min-height: 40px;
    }

    /* en móviles medianos, dos columnas para los botones */
    .btn.classify.a,
    .btn.classify.b {
        flex: 1 1 calc(50% - 10px);
    }

    footer {
        bottom: 10px;
        right: 10px;
        font-size: .78rem;
    }

    footer p {
        padding: 6px 10px;
        border-radius: 12px;
    }
}

/* Mobile muy chico */
@media (max-width: 360px) {
    .title {
        font-size: 1.6rem;
    }

    .segment {
        font-size: .85rem;
        padding: 7px 10px;
    }

    .chip {
        padding: 7px 9px;
        font-size: .92rem;
        border-radius: 12px;
    }

    .btn {
        padding: 9px 12px;
        font-size: .92rem;
        border-radius: 16px;
    }

    /* en pantallas muy angostas, los botones ocupan todo el ancho uno debajo del otro */
    .btn.classify.a,
    .btn.classify.b {
        flex: 1 1 100%;
    }
}

/* ---------- Responsive: PANTALLA GRANDE (≈52 pulgadas, 4K) ---------- */
@media (min-width: 3800px) {
    html { font-size: 2.1rem; }
    .header { max-width: 4200px; margin-bottom: 72px; }
    .title { font-size: 4.2rem; margin-bottom: 28px; }
    .stats { gap: 60px; margin-bottom: 48px; }
    .stat { min-width: 300px; padding: 36px 52px; border-radius: 32px; }
    .stat-label { font-size: 1.8rem; }
    .stat-value { font-size: 3.2rem; }
    .game-container { padding: 72px; max-width: 3000px; border-radius: 38px; }
    .segmented {padding: 14px 18px;gap: 16px;border-radius: 28px;margin-bottom: 36px;background: rgba(255,255,255,.45);box-shadow: 0 4px 14px rgba(0,0,0,.06);
      flex-wrap: wrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .segment {font-size: 1.6rem; padding: 16px 26px; border-radius: 24px;font-weight: 600;}
    .pool { padding: 44px; border-radius: 32px; margin-bottom: 40px; }
    .chips { gap: 26px; }
    .chip {padding: 22px 34px;font-size: 2.0rem;border-radius: 28px;box-shadow: 0 6px 18px rgba(0,0,0,.10);}
    .classify-buttons { gap: 48px; margin-bottom: 40px; }
    .btn {padding: 32px 60px;font-size: 2.2rem;border-radius: 36px;min-height: 120px;font-weight: 900;}
    .feedback { font-size: 2rem; min-height: 72px; margin-top: 20px; }
    .bottom-buttons { gap: 44px; margin-top: 56px; }
    .reset-btn {padding: 30px 64px;font-size: 2.1rem;min-height: 110px;border-radius: 34px;}
    footer { bottom: 48px; right: 48px; font-size: 1.6rem; }
    footer p { padding: 20px 150px; border-radius: 22px; }
  }
  

  /* ---------- Responsive: 2160 x 3800 (pantalla 4K vertical) ---------- */
@media (max-width: 2160px) and (min-height: 3800px) {

    /* 1) Lienzo y ritmo vertical */
    html, body { height: 100dvh; overflow: hidden; }
    body {
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* header / contenido / botones */
      align-items: center;
      padding: 4vh 0;
      padding-bottom: 10vh; /* reserva espacio para el footer fijo */
    }
  
    /* 2) Header más grande */
    .header { max-width: 1800px;  }
    .title { font-size: clamp(4rem, 5.4vh, 7.2rem); margin-bottom: 2vh; }
    .stats { gap: 3vh; margin-bottom: 2.2vh; }
    .stat { min-width: 280px; padding: 2.6vh 3vw; border-radius: 26px; }
    .stat-label { font-size: clamp(1.8rem, 2.4vh, 3.4rem); }
    .stat-value { font-size: clamp(2.6rem, 3.2vh, 4.8rem); }
  
    /* 3) Contenedor del juego bien ancho y cómodo */
    .game-container {
      max-width: 1900px;
      width: min(94vw, 1900px);
      border-radius: 32px;
      margin: 0 auto 3vh;
    }
  
    /* 4) SEGMENTED CONTROL (categorías) — vertical scroll, se ve 1.5 categorías */
    .segmented{
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 10.5vh; /* suficiente para 1.5 categorías (ajustar según .segment) */
      min-height: 0;
      max-height: 10.5vh;
      overflow-y: auto;
      overflow-x: visible;
      padding: 0.5vh 1.6vw;
      gap: 1.4vh;
      border-radius: 30px;
      margin-bottom: 2.6vh;
      background: rgba(255,255,255,.45);
      box-shadow: 0 4px 14px rgba(0,0,0,.06);
      scrollbar-width: thin;
      scrollbar-color: #bbb #eee;
    }
    .segmented::-webkit-scrollbar {
      width: 12px;
      background: #eee;
      border-radius: 12px;
    }
    .segmented::-webkit-scrollbar-thumb {
      background: #bbb;
      border-radius: 12px;
    }
    .segment{
      font-size: clamp(1.8rem, 2.8vh, 3.8rem);
      padding: 1.4vh 1.8vw;
      border-radius: 26px;
      flex: 0 0 6vh; /* altura fija para que 1.5 se vean en 10.5vh */
      margin: 0 auto;
      width: 90%;
      box-sizing: border-box;
      /* Opcional: resalta la seleccionada */
      /* transition: background .2s; */
    }
  
    /* 5) Pool y chips (palabras) */
    .pool{ padding: 2.6vh 2.4vw; border-radius: 26px; }
    .chips{ gap: 2.2vh; }
    .chip{
      padding: 2.2vh 2.2vw;
      font-size: clamp(2.2rem, 3.2vh, 4.2rem);
      border-radius: 26px;
    }
  
    /* 6) Botones de clasificar */
    .classify-buttons{ gap: 2.4vh; margin-top: 2.4vh; flex-wrap: wrap; }
    .btn{
      min-height: clamp(96px, 6.4vh, 190px);
      font-size: clamp(2.2rem, 3vh, 4rem);
      padding: 2vh 3vw;
      border-radius: 26px;
    }
  
    /* 7) Feedback */
    .feedback{ font-size: clamp(2rem, 2.6vh, 3.6rem); min-height: 64px; }
  
    /* 8) Botones naranjas inferiores — sin desbordes */
    .bottom-buttons{
      width: min(94vw, 1400px);   /* contenedor acotado */
      display: flex;
      flex-wrap: wrap;            /* que bajen a otra línea si hace falta */
      justify-content: center;
      gap: 2vh;
    }
    .reset-btn{
      flex: 1 1 100%;             /* 1 por línea en vertical 4K */
      max-width: 1000px;
      font-size: clamp(2rem, 2.8vh, 3.8rem);
      border-radius: 26px;
    }
  
    /* 9) Footer fijo pero discreto (no pisa botones por el padding-bottom) */
    footer{
      position: fixed;
      right: 3vw;
      bottom: 2vh;
      font-size: clamp(1.4rem, 2vh, 2.6rem);
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      margin: 0 auto;
      flex-direction: row-reverse;
    }
    footer p{ padding: 1.4vh 2vw; border-radius: 18px; }
    .watermark-logo{ height: clamp(28px, 4.2vh, 4.2vh); padding-right: 300px;}
  }
  

  /* ====== Watermark de fondo ====== */
:root {
    --wm-size: 1100px;       /* tamaño de la marca */
    --wm-rotate: -22deg;     /* inclinación */
    --wm-opacity: 0.14;      /* transparencia */
  }
  
  body {
    position: relative; /* necesario para el pseudo-elemento */
  }
  
  body::before {
    content: "";
    position: fixed; /* fijo en pantalla */
    top: 12vh;
    left: calc(-0.25 * var(--wm-size)); /* lo empuja hacia la izquierda */
    width: var(--wm-size);
    height: var(--wm-size);
    background: url("../statics/img/flor.png") no-repeat center / contain;
    opacity: var(--wm-opacity);
    transform: rotate(var(--wm-rotate));
    pointer-events: none; /* no bloquea clicks */
    z-index: 0; /* al fondo */
  }
  
  .container,
  footer {
    position: relative;
    z-index: 1; /* el contenido queda por encima */
  }
  
  /* Responsivo */
  @media (max-width: 1024px) {
    :root { --wm-size: 780px; }
    body::before {
      top: 18vh;
      left: calc(-0.35 * var(--wm-size));
    }
  }
  
  @media (max-width: 600px) {
    :root { --wm-size: 560px; }
    body::before {
      top: 24vh;
      left: calc(-0.40 * var(--wm-size));
    }
  }