:root {

  --font-family: "Poppins", sans-serif;

  /*Blue Scale*/
  --color-blue-10: #E3ECF2;
  --color-blue-20: #C9D9E3;
  --color-blue-30: #A4BED0;
  --color-blue-40: #7EA3BD;
  --color-blue-50: #5c89ab;
  --color-blue-60: #2B5573;
  --color-blue-70: #23455E;
  --color-blue-80: #1B3649;
  --color-blue-90: #152A39;
  --color-blue-100: #0E1C27;

  /*Neutral Scale*/
  --color-neutral-10: #FAFAFA;
  --color-neutral-20: #F2F2F2;
  --color-neutral-30: #E5E5E5;
  --color-neutral-40: #D4D4D4;
  --color-neutral-50: #A3A3A3;
  --color-neutral-60: #737373;
  --color-neutral-70: #525252;
  --color-neutral-80: #404040;
  --color-neutral-90: #262626;
  --color-neutral-100: #171717;

  /*Orange Scale*/
  --color-orange-10: #FFE8D9;
  --color-orange-20: #FFD4B3;
  --color-orange-30: #FFBA80;
  --color-orange-40: #FFA057;
  --color-orange-50: #FF9446;
  --color-orange-60: #FF8C42;
  --color-orange-70: #E6763A;
  --color-orange-80: #BF5D2E;
  --color-orange-90: #994722;
  --color-orange-100: #73341A;

  --color-red-hard: #bd0000;
  --color-red-light: #ff0000;
  --color-green-hard: #009600;
  --color-green-light: #0dc70d;


  /* ============================
   SEMANTIC TOKENS - COLORS
   ============================ */

  /* Surface and Backgrounds */
  --background-dark: var(--color-neutral-90);
  --background-basic: radial-gradient(circle farthest-corner,
      var(--color-blue-60) 0%,
      var(--color-blue-100) 100%);
  --background-ai: radial-gradient(circle farthest-corner,
      var(--color-blue-40) 0%,
      var(--color-blue-80) 100%);
  --background-human: radial-gradient(circle farthest-corner,
      var(--color-orange-40) 0%,
      var(--color-orange-90) 100%);


  --color-link: var(--color-blue-70);
  --color-button-blue: var(--color-blue-60);
  --color-button-orange: var(--color-orange-80);
  /* Text */
  --color-text-primary: var(--color-neutral-10);
  --color-text-secondary: var(--color-neutral-40);

  /* Accent and Interactive Elements */
  --color-accent-base: var(--color-orange-50);
  --color-accent-secondary: var(--color-blue-50);

  /* Borders and Dividers */
  --color-border-subtle: rgba(0, 0, 0, 0.3);

  /* Status Messages */
  --color-status-error: var(--color-red-hard);
  --color-status-success: var(--color-green-hard);

  /* ============================
   TYPOGRAPHY TOKENS
   ============================ */

  /*Figma size 100 ---> Css size 70px --> 100 * 0.7 = 70px*/
  --line-height-lg: 64px;
  --line-height-md: 48px;
  --line-height-sm: 24px;
  --letter-spacing-sm: 0px;
  --letter-spacing-lg: -0.25px;

  /* ============================
   SPACING SCALE
   ============================ */

  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 32px;
  --space-xl: 64px;

  /* ============================
   OTHER TOKENS
   ============================ */

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 80px;

  /* Shadows */
  --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 4px 4px 1px rgba(0, 0, 0, 0.4);
  --shadow-button-hover: 0 0 0.625em var(--color-neutral-10);

  /* Border Width */
  --border-sm: 1px;
  --border-md: 2px;

  /* Transition Durations */
  --transition-fast: 0.2s ease-in-out;
  --transition-base: 0.3s ease-in-out;
}

body {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--color-neutral-10);
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--background-dark);
}

a {
  cursor: pointer;
  text-decoration: none;
}

.back {
  position: fixed;
  text-align: center;
  padding: var(--space-s);
  justify-content: center;
  top: var(--space-l);
  left: var(--space-l);
  font-size: 20px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background-color: var(--color-orange-80);
  border: 3px solid var(--color-neutral-10);
  color: var(--color-neutral-10);
  margin-bottom: var(--space-m);
}

.streak {
  position: fixed;
  text-align: center;
  padding: var(--space-s);
  justify-content: center;
  top: var(--space-l);
  right: var(--space-l);
  font-size: 20px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-30);
  box-shadow: 3px 3px 0px var(--color-blue-50), -3px -3px 0px var(--color-orange-50);
  color: var(--color-neutral-100);
  margin-bottom: var(--space-m);
  z-index: 10000;
}

/* Base para ambos botones (Perfil y Play) */
.nav-pill-btn {
  position: fixed;
  top: var(--space-l);
  z-index: 10000;
  background-color: var(--color-neutral-30);
  border-radius: var(--radius-full);
  padding: var(--space-s) var(--space-m);
  color: var(--color-neutral-100);
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  max-width: 55px; /* Solo icono */
  height: 45px;
}

.nav-pill-btn:hover {
  max-width: 200px; /* Expansión */
}

/* Botón PROFILE (Izquierda) */
.btn-left {
  left: var(--space-l);
  box-shadow: 3px 3px 0px var(--color-blue-50), -3px -3px 0px var(--color-orange-50);
}

/* Botón PLAY (Derecha) */
.btn-right {
  right: var(--space-l);
  box-shadow: -3px 3px 0px var(--color-orange-50), 3px -3px 0px var(--color-blue-50);
}

/* Contenido interno */
.pill-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pill-label {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.3s ease;
  font-size: 14px;
}

.nav-pill-btn:hover .pill-label {
  opacity: 1;
}

.avatar-mini {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.main {
  height: 100%;
  width: 100%;
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
  transition: height 0.7s ease, padding 0.7s ease;
}

/* Animación periódica de hover */
.button-animated {
  animation: hoverPulse 2s ease-in-out infinite;
  will-change: transform, box-shadow;
}

.button-animated:hover {
  /* Tu hover real sigue funcionando */
}

/* Keyframes que simulan el hover */
@keyframes hoverPulse {
  0% {
    border: 1px solid var(--color-neutral-10);
    box-shadow: none;
  }

  40% {
    border: var(--border-sm) solid var(--color-neutral-10);
    box-shadow: var(--shadow-button-hover);
  }

  60% {
    box-shadow: var(--shadow-button-hover);
  }

  100% {
    border: var(--border-md) solid var(--color-neutral-10);
    box-shadow: none;
  }
}
.main-basic {
  background: var(--background-basic);
  transition: all 0.2s ease-in-out;
}
.main-basic .img {
  transition: all 0.2s ease-in-out;
}
.guest-warning {
  background-color: rgb(255, 255, 167);
  color: black;
  padding: var(--space-s);
  position:fixed;
  top: 50px;
  left: 40vw;
  border-radius: var(--radius-md) 0% var(--radius-md) var(--radius-md);
  z-index: 100000;
}
.main-basic.guessimg { 
  width: 100vw;
   height: 100vh; 
   padding:0; 
   margin: 0; 
   overflow: hidden; 
   position: relative; 
   display: flex; 
   align-items: center; 
   justify-content: center; 
   transition: all 0.2s ease-in-out;
}


/* La imagen forzada a llenar el cuadro */
.main-basic.guessimg .img { 
  width: 90%; 
  border-radius: var(--radius-lg);
  height: 90%;
  object-fit: cover;  
  object-position: center; 
  display: block;
  transition: all 0.2s ease-in-out;
}

.main-basic.minimizedimg {
  width: 100vw;
  height: 40vh;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}
.main-basic.hero {
  min-height: 0;
  height: 57vh;
  padding: 0;
  overflow: hidden;
  position: relative;
  
}

.main-basic.hero .img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.main-basic.minimezimg {
  width: 100vw;
  height: auto;
  padding: var(--space-l);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-basic.minimizedimg .img {
  width: 50%;
  height: auto;
  object-fit: contain;
  border-radius: 15px;
  transition: all 0.5s ease-in-out;
}

.hero {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.icon {
  width: 60px;
}

.icon-sm {
  width: 40px;
}

.img-header {
  border-radius: 0;
  position: relative;
  left: 0px;
  bottom: var(--space-l);
  margin-inline: var(--space-l);
}

/* Variantes de peso */
.text--thin {
  font-weight: 100;
}

.text--light {
  font-weight: 300;
}

.text--normal {
  font-weight: 400;
}

.text--medium {
  font-weight: 500;
}

.text--semibold {
  font-weight: 600;
}

.text--bold {
  font-weight: 700;
}

.text--italic {
  font-style: italic;
}

/* ============================
   HEADINGS AS OOCSS OBJECTS
   ============================ */

.heading--thin {
  font-weight: 100;
}

.heading--light {
  font-weight: 300;
}

.heading--normal {
  font-weight: 400;
}

.heading--medium {
  font-weight: 500;
}

.heading--semibold {
  font-weight: 600;
}

.heading--bold {
  font-weight: 700;
}

.heading--italic {
  font-style: italic;
}

.header {
  width: 100%;
  height: auto;
  display: flex;
  height:10%;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  padding-top: 0;
  position: relative;
}

.header-main {
  height: 100%;
}

.header-dark {
  background-color: var(--background-dark);
}

.header-white {
  background-color: var(--color-neutral-10);
}

.header-basic {
  background: var(--background-basic);
}

.header-landing {
  background: var(--background-basic);
  flex-direction: row;
  height: 45vh;
}

.text {
  font-family: var(--font-family);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
}

.text-semibold {
  font-weight: 700;
}

.text-bold {
  font-weight: 800;
}

.hgroup {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  text-align: left;
  position: relative;
}
.header .hgroup {
  margin-bottom: var(--space-m);
}
.logo {
  border-radius: 50%; /* Para que la sombra sea circular */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.logo:hover {
  transform: translateY(-5px);
  transform: scale(1.2);
}


.title-lg {
  font-size: 70px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: var(--line-height-lg);
  letter-spacing: var(--letter-spacing-lg);
  text-shadow: var(--shadow-md);
  margin: 0;
}

.title-md {
  font-size: 45px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-sm);
  text-shadow: var(--shadow-md);
  margin: 0;
}

.title-sm {
  font-size: 35px;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-sm);
  margin: 0;
}

.subtitle-lg {
  font-size: 22.4px;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-lg);
  margin: 0;
}

.subtitle-md {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-lg);
  margin: 0;
}

.text-body {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: var(--line-height-sm);
  letter-spacing: var(--letter-spacing-sm);
}

.title-md-secondary {
  color: var(--color-text-secondary);
}

.title-sm-white {
  color: var(--color-text-primary);
}

.title-sm-blue {
  color: var(--color-accent-secondary);
}

.title-sm-green {
  color: var(--color-status-success);
}

.title-lg-red {
  color: var(--color-status-error);
}

.title-sm-orange {
  color: var(--color-accent-base);
}

/* Capa que cubre toda la pantalla */
.result-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  animation: fadeIn 0.3s ease-out;
}

/* Verde si es correcto */
.result-overlay.correct {
  background-color: rgba(0, 255, 0, 0.5);
  /* verde 50% */
}

/* Rojo si es incorrecto */
.result-overlay.incorrect {
  background-color: rgba(255, 0, 0, 0.5);
  /* rojo 50% */
}

.result-overlay.ai {
  background-color: hsla(206, 32%, 52%, 0.2);
  /* azul 20% */
}
.result-overlay.human {
  background-color: hsla(23, 100%, 63%, 0.2);
  /* narajan 20% */
}
.result-overlay.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* El símbolo ✓ o ✕ */
.result-icon {
  font-size: 10rem;
  font-weight: 900;
  color: white;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Animación suave */
@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Result - error color for small titles */
.title-sm-red {
  color: var(--color-status-error);
}

.list-unstyled,
.list-ordered {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-neutral-10);
  line-height: var(--line-height-sm);
  padding-left: var(--space-l);
  list-style-position: outside;
}

.list-unstyled li,
.list-ordered li {
  padding-block: var(--space-xs);
}

.list-unstyled {
  list-style-type: disc;
}

.list-ordered {
  list-style-type: decimal;
}

.nav {
  display: flex;
  gap: var(--space-s);
  padding: var(--space-xs);
}

.menu-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-l);
  height: 7vh;
  align-content: center;
  width: 100%;
  font-weight: 600;
  z-index: 2000;
  list-style: none;
  justify-content: space-around;
  font-family: var(--font-family);
}

.main-menu {
  position: fixed;
  bottom: 0;
}

.input {
  width: 80%;
  margin: 0 auto;
  font-family: var(--font-family);
  height: 50px;
  padding-block: var(--space-s);
  padding-inline: var(--space-l);
  background-color: var(--color-neutral-10);
  border-radius: var(--radius-md);
  border: none;
  box-shadow: var(--shadow-md);
}

.input::placeholder {
  color: var(--color-neutral-60);
  opacity: 0.7;
  font-weight: 500;
}

.header .input {
  width: 500px;
}

.img {
  border: none;
}

.img-profile {
  border-radius: var(--radius-full);
}

/* Avatar en tweets: tamaño fijo, sin posicionamiento */
.tweet .user-label>.img.img-profile {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  flex: 0 0 auto;
  box-shadow: var(--shadow-sm);
  /* evita que flex lo estire/encoga */
}

.header .img-profile {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 200px;
  top: var(--space-s);
}

.hgroup.center {
  align-items: center;
  text-align: center;
}
.button {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-family);
  height: 50px;
  min-width: 125px;
  font-weight: 700;
  border: var(--border-md) solid var(--color-border-subtle);
  border-radius: 10px;
  padding-inline: var(--space-s);
  transition: var(--transition-base);
  gap: var(--space-xs);
}

.button .img {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
}

.button:hover {
  color: var(--color-neutral-10);
  border: 1px solid var(--color-neutral-10);
  box-shadow: var(--shadow-button-hover);
}

.button-error {
  color: var(--color-neutral-10);
  background-color: var(--color-status-error);
}

.button-error:hover {
  background-color: var(--color-red-light);
}

.button-green {
  color: var(--color-neutral-10);
  background-color: var(--color-status-success);
}

.button-green:hover {
  background-color: var(--color-green-light);
}

.button-unactive {
  color: var(--color-neutral-10);
  border: none;
  background-color: var(--color-neutral-60);
}

.button-unactive:hover {
  color: var(--color-neutral-10);
  box-shadow: none;
}

.button-primary {
  color: var(--color-neutral-10);
  background-color: var(--color-orange-80);
}

.button-primary-static {
  color: var(--color-neutral-10);
  background-color: var(--color-orange-80);
}

.button-primary:hover {
  background-color: var(--color-accent-base);
}

.button-secondary {
  font-family: var(--font-family);
  color: var(--color-text-primary);
  background-color: var(--color-button-blue);
}

.button-secondary:hover {
  background-color: var(--color-accent-secondary);
}

.header .button-corner {
  position: absolute;
  font-size: 2em;
  padding: var(--space-l);
  right: var(--space-m);
  top: var(--space-m);
}

.comments-scroll {
  padding: var(--space-m);
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.comments-ai {
  background: var(--background-ai)
}

.comments-human {
  background: var(--background-human)
}


.next-image-button {
  font-size: 2em;
  padding-block: var(--space-l);
  position: fixed;
  bottom: 10px;
  left: 50vw;
  z-index: 1000;
  margin: 1em;
}

.code {
  background-color: #1e1e1e;
  color: #dcdcdc;
  align-items: center;
  padding-inline: var(--space-l);
  display: block;
  font-family: "Courier New", monospace;
  font-size: 14px;
  overflow-x: auto;
  margin-block: var(--space-l);
}

.section {
  color: var(--color-neutral-10);
  padding: var(--space-l);
  width: 80%;
}

.section-list {
  align-items: center;
  width: 50%;
}

.section-typography>div {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

.section-typography h1,
.section-typography h2,
.section-typography h3,
.section-typography h4,
.section-typography h5,
.section-typography h6,
.section-typography p,
.section-typography ul,
.section-typography ol {
  margin: 0;
}

.background-blue-dark {
  width: 100%;
  padding: var(--space-l);
  color: var(--color-neutral-10);
  background-color: var(--color-blue-60);
}

.tweet {
  border-radius: var(--radius-lg);
  min-height: 120px;
  background-color: var(--color-neutral-70);
  padding: var(--space-l);
  max-width: 500px;
  margin-bottom: var(--space-l);
}

.form {
  display: flex;
  flex-direction: column;
  width: 80%;
  border-radius: var(--radius-lg);
  min-height: 200px;
  background-color: var(--color-neutral-70);
  max-width: 600px;
  margin-block: var(--space-l);
  gap: var(--space-l);
  padding: var(--space-l);
  box-shadow: var(--shadow-md);
  gap:1em;
}
.form .input {
  width: 100%;
}
.form .field {
  align-items: left;
  width: 100%;  
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.form .hgroup {
  justify-content: center;
  align-items: center;
  gap: var(--space-l);
  text-align: center;
}

.form .section {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.form .form-button {
  width: 100%;
}

.user-label {
  font-weight: 600;
  color: var(--color-orange-40);
  width: 100%;
  display: flex;
  flex-direction: row;
  padding-block: 0;
  gap: var(--space-s);
}

.label {
  display: flex;
  flex-direction: row;
  gap: var(--space-l);
  font-size: 15px;
  padding-left: var(--space-s);
  font-weight: 500;
  color: var(--color-neutral-20);
  align-items: center;
}

.user-label .text {
  padding: var(--space-s);
}


.header .paragraph {
  width: 80%;
}

.img-post {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-lg);
  height: auto;
}

.tweet .section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0;
}


.link {
  color: var(--color-text-secondary);
  transition: var(--transition-base);
  text-decoration: underline;
}

.link:visited {
  color: var(--color-neutral-40);
  text-decoration: none;
}

.link:hover {
  cursor: pointer;
  color: var(--color-accent-secondary);
  text-decoration: none;
}

.link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent-secondary);
  outline-offset: 2px;
}

.link:active {
  color: var(--color-accent-base);
  transform: translateY(1px);
}



/* Links Section */
.section-links {
  width: 80%;
  max-width: 1200px;
  padding-top: 50px;
  margin-bottom: 100px;
}

.link-states-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.link-state-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.link-state-item p {
  margin: 0;
  min-width: 150px;
}

/*ONLY FOR DEMO PURPOSES*/
.link-default-demo {
  /* Aplica los mismos estilos que .link */
  color: var(--color-text-secondary) !important;
  text-decoration: underline !important;
}

.link-hover-demo {
  /* Aplica los mismos estilos que .link:hover */
  color: var(--color-accent-secondary) !important;
  text-decoration: none !important;
  cursor: default;
  /* Evita que el cursor cambie mientras está en estado estático */
}

.link-active-demo {
  /* Aplica los mismos estilos que .link:active */
  color: var(--color-accent-base) !important;
  transform: scale(0.98);
}

.link-visited-demo {
  /* Aplica los mismos estilos que .link:visited */
  color: var(--color-neutral-60) !important;
  text-decoration: none !important;
}

.link-focus-demo {
  /* Aplica los mismos estilos que .link:focus */
  color: var(--color-accent-secondary) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--color-accent-secondary);
  outline-offset: 2px;
}

.outline {
  color: var(--color-blue-30);
  font-style: normal;
  text-decoration: underline;
  transition: var(--transition-base);
}

.outline:hover {
  cursor: pointer;
  color: var(--color-neutral-100);
  background-color: var(--color-orange-30);
}

/* Color Palette Section */
.section-colors {
  padding-top: var(--space-xl);
  width: 80%;
  max-width: 1200px;
}

.section-colors .title-md {
  margin-bottom: var(--space-l);
}

.color-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  margin-bottom: var(--space-xl);
}

.color-item {
  display: flex;
  flex-direction: column;
  width: 130px;
  gap: var(--space-s);
  transition: transform var(--transition-fast);
}

.color-item:hover {
  transform: translateY(-4px);
}

.color-swatch {
  width: 100%;
  height: 80px;
  background-color: var(--color-value);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.color-label {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-40);
  line-height: 1.2;
  display: block;
  word-break: break-all;
}

/* Token Demonstration Container */
.section-tokens {
  padding-top: var(--space-xl);
  width: 80%;
  max-width: 1200px;
}


.section-tokens .title-md {
  margin-bottom: var(--space-m);
}

.tokens-group {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 50px;
  margin-bottom: 40px;
  align-items: flex-start;
}

/* --- SPACING DEMO --- */
.spacing-demo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The gap is set inline */
}

.spacing-card {
  width: 100px;
  height: 25px;
  background-color: var(--color-accent-secondary);
  border-radius: 4px;
}

/* --- RADIUS DEMO --- */
.radius-demo-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radius-box {
  width: 80px;
  height: 80px;
  background-color: var(--color-orange-50);
}

/* --- SHADOW DEMO --- */
.shadow-demo-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shadow-box {
  width: 80px;
  height: 80px;
  background-color: var(--color-neutral-10);
  /* Light background for shadow visibility */
  border-radius: var(--radius-sm);
}

/* --- BORDER DEMO --- */
.border-demo-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.border-box {
  width: 80px;
  height: 80px;
  background-color: var(--color-neutral-10);
  border: solid var(--color-blue-40);
  border-radius: var(--radius-sm);
}

.transition-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.image-card {
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Animación cuando entra una nueva imagen */
.slide-in {
  animation: slideInRight 0.5s forwards;
}

/* Animación cuando la imagen se va */
.slide-out-left {
  transform: translateX(-150%);
  opacity: 0;
}

.game-wrapper {
  perspective: 1000px;
}

/* La imagen que entra */
.slide-in {
  animation: slideIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* La imagen que se va */
.slide-out-left {
  animation: slideOut 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(100%) rotateY(-20deg);
    opacity: 0;
  }

  to {
    transform: translateX(0) rotateY(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0) rotateY(0);
    opacity: 1;
  }

  to {
    transform: translateX(-100%) rotateY(20deg);
    opacity: 0;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(150%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.feedback-icon {
  font-size: 5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

#feedback-overlay.fade-out {
  animation: fadeOut 0.3s ease-in-out forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.timer-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.timer-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--timer-fill, rgba(255,255,255,0.2)); /* color del relleno */
  animation: fillLeft var(--timer-duration, 5s) linear forwards;
  z-index: -1;
}

@keyframes fillLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.timer-button > * {
  position: relative;
  z-index: 1;
}

/* =============================
   GAME PAGE STYLES
   ============================= */

.game-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background: var(--background-dark);
  overflow: hidden;
}

/* Header con streak */
.game-header {
  position: fixed;
  top: var(--space-l);
  right: var(--space-l);
  z-index: 500;
  padding: var(--space-m) var(--space-l);
  background: rgba(0, 0, 0, 0.4);
  border: var(--border-md) solid var(--color-orange-50);
  border-radius: var(--radius-full);
  backdrop-filter: blur(10px);
}

.game-header h3 {
  margin: 0;
  font-size: 20px;
  color: var(--color-orange-50);
}

/* =============================
   MODO JUEGO (VOTACIÓN)
   ============================= */

.game-main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--space-l);
  gap: var(--space-xl);
  position: relative;
  background: var(--background-dark);
  transition: background-color 0.8 ease-in-out;
  will-change: background-color;

}

.game-main-container.correct-ai {
  background: var(--background-ai);
}

.game-main-container.correct-human {
  background: var(--background-human);
}

/* Wrapper de la imagen - TAMAÑO FIJO */
.game-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1050px;
  height: 600px;
  margin: 0 auto;
  flex-shrink: 0;
  transition: all 0.5s ease-in-out;
}

#image-card {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-main-image {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  object-fit: cover;
}

/* Controles de votación */
.game-controls {
  display: flex;
  gap: var(--space-l);
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.btn-guess {
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 70px;
  font-family: var(--font-family);
  font-size: 30px;
  font-weight: 700;
  border: var(--border-md) solid var(--color-border-subtle);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-base);
  color: var(--color-neutral-10);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.btn-guess.human {
  position: fixed;
  left: 50vw;
  bottom: 50px;
  margin: 2em;
  background-color: var(--color-orange-80);
  z-index: 1000;
  overflow: hidden; 
  transition: background-color 0.25s ease-in-out;
}


.btn-guess.human::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--background-human); 
  opacity: 0; 
  transition: opacity 0.25s ease-in-out;
  z-index: -1;
}

.btn-guess.human:hover::before {
  opacity: 1; 
}

.btn-guess.human:hover {
  box-shadow: 0 8px 20px rgba(255, 143, 57, 0.4);
}


.btn-guess.ai {
  position: fixed;
  right: 50vw;
  bottom: 50px;
  margin: 2em;
  background-color: var(--color-blue-60);
  z-index: 1000;
  overflow: hidden;
  transition: background-color 0.25s ease-in-out;
}

.comments-button-fixed {
  position: fixed;
  right: 50vw;
  bottom: 50px;
  margin: 2em;
  z-index: 1000;
}
.next-button-fixed {
  position: fixed;
  left: 50vw;
  bottom: 50px;
  margin: 2em;
  z-index: 1000;
}


/* Capa del gradient */
.btn-guess.ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--background-ai);
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  z-index: -1;
}

.btn-guess.ai:hover::before {
  opacity: 1;
}

.btn-guess.ai:hover {
  box-shadow: 0 8px 20px rgba(108, 194, 255, 0.3);
}


.game-next-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: center;
  width: 100%;
  max-width: 600px;
  animation: slideUp 0.5s ease-in-out;

}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-comments {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  height: 60px;
  padding-inline: var(--space-l);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-neutral-10);
  background: linear-gradient(135deg, var(--color-blue-60) 0%, var(--color-blue-50) 100%);
  border: var(--border-md) solid var(--color-neutral-10);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn-comments:hover {
  background: linear-gradient(135deg, var(--color-blue-50) 0%, var(--color-blue-40) 100%);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-2px);
}

/* Game Over */
.game-gameover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
  text-align: center;
}

.game-gameover h2 {
  margin: 0;
  font-size: 48px;
}

/* =============================
   MODO COMENTARIOS (LAYOUT)
   ============================= */

.comments-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.comments-layout.comments-ai {
  background: var(--background-ai);
}

.comments-layout.comments-human {
  background: var(--background-human);
}

/* Imagen minimizada arriba - CENTRADA */
.comments-image-header {
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-m);
}

.comments-image-small {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* Área scrolleable de comentarios */
.comments-scroll-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-l);
}



.comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.comment-item {
  background: rgba(0, 0, 0, 0.6);
  padding: var(--space-m);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.comment-item:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateX(4px);
}

.comment-header {
  margin-bottom: var(--space-s);
}

.comment-username {
  font-size: 14px;
  color: var(--color-orange-50);
  font-weight: 700;
}

.comment-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-10);
}

/* Formulario fijo abajo */
.comments-form-container {
  padding: var(--space-l);
  background: rgba(0, 0, 0, 0.8);
  flex-shrink: 0;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-m);
  align-items: center;
}
.comment-form {
  width: 90%;
  display: flex;
  flex-direction: row;
  gap: var(--space-s);
}



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

@media (max-width: 768px) {
  .game-main-container {
    padding: var(--space-m);
    gap: var(--space-l);
  }

  .game-image-wrapper {
    width: 450px;
    height: 450px;
  }

  .btn-guess {
    min-width: 160px;
    height: 60px;
    font-size: 16px;
  }

  .btn-comments {
    width: 100%;
    min-width: unset;
  }

  .timer-button {
    width: 100%;
  }

  .comment-form {
    flex-direction: column;
  }

  .comment-form input,
  .comment-form button {
    width: 100%;
  }

  .comments-image-small {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 576px) {
  .game-header {
    padding: var(--space-s) var(--space-m);
    top: var(--space-m);
    right: var(--space-m);
  }

  .game-header h3 {
    font-size: 16px;
  }

  .game-main-container {
    padding: var(--space-m);
    gap: var(--space-m);
  }

  .game-image-wrapper {
    width: 100%;
    max-width: 350px;
    height: 350px;
  }

  .btn-guess {
    min-width: 140px;
    height: 50px;
    font-size: 14px;
  }

  .btn-comments {
    width: 100%;
    min-width: unset;
    height: 50px;
    font-size: 14px;
  }

  .timer-button {
    width: 100%;
  }

  .game-gameover h2 {
    font-size: 32px;
  }

  .comments-image-header {
    padding: var(--space-m);
  }

  .comments-image-small {
    width: 120px;
    height: 120px;
  }

  .comments-scroll-container {
    padding: var(--space-m);
  }

  .comments-form-container {
    padding: var(--space-m);
  }

  .comment-form {
    flex-direction: column;
  }
}