:root {
  /* Cloud shape for clip-path */
  --nube: polygon(
    99.426% 44.728%,
    99.426% 44.728%,
    99.871% 41.37%,
    99.98% 37.982%,
    99.78% 34.598%,
    99.298% 31.252%,
    98.561% 27.979%,
    97.597% 24.812%,
    96.432% 21.786%,
    95.095% 18.935%,
    93.611% 16.293%,
    92.009% 13.895%,
    92.009% 13.895%,
    90.386% 11.942%,
    88.654% 10.355%,
    86.828% 9.112%,
    84.925% 8.191%,
    82.96% 7.57%,
    80.948% 7.227%,
    78.907% 7.141%,
    76.851% 7.288%,
    74.797% 7.648%,
    72.759% 8.198%,
    72.759% 8.198%,
    71.935% 8.479%,
    71.117% 8.802%,
    70.308% 9.166%,
    69.509% 9.573%,
    68.72% 10.022%,
    67.943% 10.512%,
    67.179% 11.044%,
    66.429% 11.618%,
    65.695% 12.234%,
    64.978% 12.891%,
    64.978% 12.891%,
    64.649% 12.219%,
    64.312% 11.557%,
    63.967% 10.909%,
    63.614% 10.272%,
    63.253% 9.649%,
    62.886% 9.04%,
    62.511% 8.446%,
    62.129% 7.866%,
    61.741% 7.301%,
    61.347% 6.752%,
    61.347% 6.752%,
    59.724% 4.799%,
    57.992% 3.213%,
    56.166% 1.97%,
    54.263% 1.049%,
    52.297% 0.428%,
    50.286% 0.085%,
    48.245% -0.002%,
    46.189% 0.145%,
    44.134% 0.505%,
    42.097% 1.055%,
    42.097% 1.055%,
    40.406% 1.679%,
    38.751% 2.481%,
    37.142% 3.46%,
    35.59% 4.616%,
    34.105% 5.948%,
    32.698% 7.458%,
    31.379% 9.143%,
    30.159% 11.005%,
    29.048% 13.042%,
    28.058% 15.255%,
    28.058% 15.255%,
    27.516% 14.778%,
    26.964% 14.337%,
    26.402% 13.933%,
    25.83% 13.569%,
    25.248% 13.244%,
    24.658% 12.962%,
    24.058% 12.723%,
    23.45% 12.528%,
    22.833% 12.38%,
    22.208% 12.279%,
    22.208% 12.279%,
    20.213% 12.271%,
    18.266% 12.683%,
    16.375% 13.478%,
    14.546% 14.621%,
    12.787% 16.076%,
    11.105% 17.808%,
    9.507% 19.78%,
    7.999% 21.958%,
    6.591% 24.305%,
    5.287% 26.786%,
    5.287% 26.786%,
    4.106% 29.369%,
    3.047% 32.078%,
    2.125% 34.894%,
    1.351% 37.802%,
    0.74% 40.785%,
    0.303% 43.825%,
    0.054% 46.906%,
    0.005% 50.011%,
    0.171% 53.123%,
    0.563% 56.225%,
    0.563% 56.225%,
    0.803% 57.519%,
    1.083% 58.778%,
    1.403% 60.002%,
    1.761% 61.191%,
    2.155% 62.345%,
    2.585% 63.464%,
    3.048% 64.548%,
    3.543% 65.596%,
    4.069% 66.608%,
    4.625% 67.585%,
    4.625% 67.585%,
    4.542% 68.011%,
    4.464% 68.44%,
    4.393% 68.871%,
    4.327% 69.305%,
    4.268% 69.741%,
    4.213% 70.178%,
    4.164% 70.615%,
    4.121% 71.051%,
    4.083% 71.488%,
    4.051% 71.922%,
    4.051% 71.922%,
    3.996% 73.58%,
    4.052% 75.222%,
    4.213% 76.837%,
    4.474% 78.417%,
    4.83% 79.951%,
    5.276% 81.431%,
    5.804% 82.847%,
    6.411% 84.19%,
    7.09% 85.449%,
    7.837% 86.616%,
    7.837% 86.616%,
    8.563% 87.542%,
    9.34% 88.315%,
    10.161% 88.942%,
    11.018% 89.43%,
    11.905% 89.786%,
    12.816% 90.016%,
    13.742% 90.129%,
    14.676% 90.131%,
    15.613% 90.029%,
    16.545% 89.83%,
    16.545% 89.83%,
    16.634% 89.804%,
    16.723% 89.777%,
    16.811% 89.749%,
    16.898% 89.72%,
    16.984% 89.69%,
    17.07% 89.659%,
    17.155% 89.627%,
    17.239% 89.594%,
    17.323% 89.559%,
    17.406% 89.524%,
    17.406% 89.524%,
    18.764% 91.763%,
    20.268% 93.695%,
    21.899% 95.335%,
    23.639% 96.696%,
    25.466% 97.796%,
    27.364% 98.648%,
    29.312% 99.267%,
    31.291% 99.669%,
    33.281% 99.869%,
    35.265% 99.881%,
    35.265% 99.881%,
    37.204% 99.716%,
    39.152% 99.364%,
    41.086% 98.81%,
    42.982% 98.039%,
    44.818% 97.037%,
    46.57% 95.789%,
    48.216% 94.281%,
    49.733% 92.497%,
    51.097% 90.423%,
    52.285% 88.045%,
    52.285% 88.045%,
    52.613% 88.03%,
    52.941% 88.006%,
    53.268% 87.974%,
    53.596% 87.932%,
    53.924% 87.883%,
    54.252% 87.825%,
    54.58% 87.76%,
    54.907% 87.686%,
    55.235% 87.606%,
    55.563% 87.517%,
    55.563% 87.517%,
    56.701% 89.03%,
    57.907% 90.405%,
    59.173% 91.64%,
    60.492% 92.733%,
    61.86% 93.682%,
    63.268% 94.487%,
    64.712% 95.145%,
    66.183% 95.656%,
    67.675% 96.016%,
    69.183% 96.225%,
    69.183% 96.225%,
    70.986% 96.212%,
    72.749% 95.872%,
    74.466% 95.229%,
    76.134% 94.307%,
    77.746% 93.127%,
    79.298% 91.715%,
    80.784% 90.093%,
    82.2% 88.284%,
    83.541% 86.312%,
    84.801% 84.201%,
    84.801% 84.201%,
    85.12% 83.613%,
    85.428% 83.014%,
    85.724% 82.403%,
    86.009% 81.781%,
    86.282% 81.148%,
    86.543% 80.506%,
    86.793% 79.853%,
    87.032% 79.191%,
    87.258% 78.52%,
    87.473% 77.84%,
    87.473% 77.84%,
    88.153% 77.897%,
    88.834% 77.883%,
    89.514% 77.802%,
    90.192% 77.654%,
    90.864% 77.441%,
    91.529% 77.165%,
    92.184% 76.827%,
    92.828% 76.429%,
    93.458% 75.973%,
    94.073% 75.46%,
    94.073% 75.46%,
    94.856% 74.659%,
    95.566% 73.733%,
    96.202% 72.696%,
    96.769% 71.559%,
    97.267% 70.334%,
    97.698% 69.035%,
    98.065% 67.673%,
    98.369% 66.26%,
    98.613% 64.81%,
    98.797% 63.334%,
    98.797% 63.334%,
    98.894% 62.023%,
    98.915% 60.717%,
    98.862% 59.423%,
    98.738% 58.146%,
    98.545% 56.892%,
    98.284% 55.668%,
    97.958% 54.48%,
    97.569% 53.334%,
    97.12% 52.235%,
    96.612% 51.191%,
    96.612% 51.191%,
    96.993% 50.688%,
    97.355% 50.158%,
    97.696% 49.599%,
    98.016% 49.009%,
    98.313% 48.387%,
    98.586% 47.73%,
    98.836% 47.038%,
    99.059% 46.308%,
    99.256% 45.539%,
    99.426% 44.728%
  );

  /*propias*/
  /*original*/
  --original-color-1: #221e33;
  --original-color-2: #ffd66b;
  --original-color-3: #ec7f51;
  --original-color-4: #33201e;

  /*burnt*/
  --burnt-color-1: #462846;
  --burnt-color-2: #ffe49e;
  --burnt-color-3: #f2a17a;
  --burnt-color-4: #f4f4f4;

  /*monochrome*/
  --color-1: #353535;
  --color-2: #f9d67b;
  --color-3: #fcfaf1;
  --color-4: #707070;

  /*archive*/
  --archive-color-1: #000000;
  --archive-color-2: #0026f5;
  --archive-color-3: #656d7c;
  --archive-color-4: #f8da5c;

  /*tfg*/
  --tfg-color-1: #fdf7f4;
  --tfg-color-2: #eb3d25;
  --tfg-color-3: #0026f5;
  --tfg-color-4: #fffd54;

  /*blancas*/
  /*ketchup*/
  --ketchup-color-1: #eeebdd;
  --ketchup-color-2: #ce1212;
  --ketchup-color-3: #810000;
  --ketchup-color-4: #1b1717;

  /*chocoBar*/
  --chocoBar-color-1: #fff0d1;
  --chocoBar-color-2: #795757;
  --chocoBar-color-3: #664343;
  --chocoBar-color-4: #3b3030;

  /*shootingStar*/
  --shootingStar-color-1: #ffffff;
  --shootingStar-color-2: #f2c482;
  --shootingStar-color-3: #d7ddc3;
  --shootingStar-color-4: #ac5e9f;

  /*skull*/
  --skull-color-1: #fbf9fa;
  --skull-color-2: #fd0054;
  --skull-color-3: #a80038;
  --skull-color-4: #2b2024;

  /*lemonzest*/
  --lemonzest-color-1: #ffffff;
  --lemonzest-color-2: #f3efd5;
  --lemonzest-color-3: #656d7c;
  --lemonzest-color-4: #f8da5c;

  /*claritas*/
  /*coolCap*/
  --coolCap-color-1: #c96868;
  --coolCap-color-2: #fadfa1;
  --coolCap-color-3: #fff4ea;
  --coolCap-color-4: #7eacb5;

  /*baby*/
  --baby-color-1: #78b3ce;
  --baby-color-2: #c9e6f0;
  --baby-color-3: #fbf8ef;
  --baby-color-4: #e4ba6b;

  /*autumnWinter*/
  --autumnWinter-color-1: #dce4c9;
  --autumnWinter-color-2: #f5f5dc;
  --autumnWinter-color-3: #b6a28e;
  --autumnWinter-color-4: #e07b39;

  /*lavenderMint*/
  --lavenderMint-color-1: #6256ca;
  --lavenderMint-color-2: #86d293;
  --lavenderMint-color-3: #c1e2a4;
  --lavenderMint-color-4: #fdfad9;

  /*fortuneCookie*/
  --fortuneCookie-color-1: #ff885b;
  --fortuneCookie-color-2: #fff19f;
  --fortuneCookie-color-3: #33372c;
  --fortuneCookie-color-4: #557c56;

  /*color*/
  /*raspberry*/
  --raspberry-color-1: #99154e;
  --raspberry-color-2: #ffc93c;
  --raspberry-color-3: #ffddcc;
  --raspberry-color-4: #dd97a8;

  /*dino*/
  --dino-color-1: #071a52;
  --dino-color-2: #086972;
  --dino-color-3: #068888;
  --dino-color-4: #a7ff83;

  /*mailBox*/
  --mailBox-color-1: #08d9d6;
  --mailBox-color-2: #252a34;
  --mailBox-color-3: #ff2e63;
  --mailBox-color-4: #eaeaea;

  /*lumber*/
  --lumber-color-1: #43766c;
  --lumber-color-2: #f8fae5;
  --lumber-color-3: #b19470;
  --lumber-color-4: #76453b;

  /*pewpew*/
  --pewpew-color-1: #453e80;
  --pewpew-color-2: #ffffff;
  --pewpew-color-3: #936f4c;
  --pewpew-color-4: #f36a10;

  /*fun*/
  /*orangeOracle*/
  --orangeOracle-color-1: #333333;
  --orangeOracle-color-2: #ff6000;
  --orangeOracle-color-3: #ffc859;
  --orangeOracle-color-4: #ffe6c7;

  /*coolTheyThem*/
  --coolTheyThem-color-1: #071a52;
  --coolTheyThem-color-2: #086972;
  --coolTheyThem-color-3: #068888;
  --coolTheyThem-color-4: #a7ff83;

  /*shyThunder*/
  --shyThunder-color-1: #010059;
  --shyThunder-color-2: #0e98c4;
  --shyThunder-color-3: #b3b3b3;
  --shyThunder-color-4: #fcf594;

  /*demure*/
  --demure-color-1: #faa3a4;
  --demure-color-2: #00416d;
  --demure-color-3: #f5f1da;
  --demure-color-4: #e3dfc8;

  /*gingerBread*/
  --gingerBread-color-1: #a02334;
  --gingerBread-color-2: #ffad60;
  --gingerBread-color-3: #ffeead;
  --gingerBread-color-4: #96ceb4;

  /*oscuras*/
  /*zombie*/
  --zombie-color-1: #32012f;
  --zombie-color-2: #524c42;
  --zombie-color-3: #e2dfd0;
  --zombie-color-4: #95f900;

  /*vampire*/
  --vampire-color-1: #1a1919;
  --vampire-color-2: #a04747;
  --vampire-color-3: #d8a25e;
  --vampire-color-4: #eedf7a;

  /*sibyl*/
  --sibyl-color-1: #241023;
  --sibyl-color-2: #883c82;
  --sibyl-color-3: #d8a9ca;
  --sibyl-color-4: #e4ba6b;

  /*bumblebee*/
  --bumblebee-color-1: #222831;
  --bumblebee-color-2: #393e46;
  --bumblebee-color-3: #ffd369;
  --bumblebee-color-4: #eeeeee;

  /*pumpkin*/
  --pumpkin-color-1: #630e1a;
  --pumpkin-color-2: #ffffff;
  --pumpkin-color-3: #936f4c;
  --pumpkin-color-4: #f36a10;

  /*monocromas*/
  /*spiderweb*/
  --spiderweb-color-1: #000000;
  --spiderweb-color-2: #52057b;
  --spiderweb-color-3: #892cdc;
  --spiderweb-color-4: #bc6ff1;

  /*amphora*/
  --amphora-color-1: #635985;
  --amphora-color-2: #443c68;
  --amphora-color-3: #393053;
  --amphora-color-4: #18122b;

  /*beetle*/
  --beetle-color-1: #1a1a19;
  --beetle-color-2: #31511e;
  --beetle-color-3: #859f3d;
  --beetle-color-4: #39401d;

  /*crayon*/
  --crayon-color-1: #440a0a;
  --crayon-color-2: #bf3131;
  --crayon-color-3: #ea9696;
  --crayon-color-4: #f3c8c8;

  /*umbrella*/
  --umbrella-color-1: #49243e;
  --umbrella-color-2: #704264;
  --umbrella-color-3: #bb8493;
  --umbrella-color-4: #dbafa0;

  --sections: 1; /* número de pantallas; el JS puede actualizarlo dinámicamente */
  --halo-scale: 1.06;
}

/* Todo lo que está dentro de la zona de contenido será responsive */
/* Responsive font sizes: menos reducción en móviles */
.container--content h1 { font-size: clamp(34px, 6.5vw, 60px); }
.container--content h2 { font-size: clamp(26px, 5vw, 40px); }
.container--content h3 { font-size: clamp(22px, 4vw, 36px); }
.container--content h4 { font-size: clamp(18px, 3.2vw, 26px); }
.container--content h5 { font-size: clamp(16px, 2.6vw, 20px); }

/* Enlaces dentro de nubes (mínimo un poco mayor) */
.container--content .box a { font-size: clamp(12px, 2.2vw, 20px); }

/* Mantén tamaños del popup y el trigger tal cual están (no añado nada ahí) */

html,
body {
  margin: 0;
  padding: 0;
  position: relative;
  /* So that .dot-container is positioned relative to the body */
}

body,
.box,
.pre-box,
h1,
.point {
  transition: background-color 0.5s ease, color 0.5s ease, text-shadow 0.5s ease;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-family: "Inknut Antiqua", serif;
  text-align: center;
  line-height: 120%;
}

h1 {
  color: var(--color-4);
  text-shadow: 1.5px 2.5px 1px var(--color-3),
    /* Primera sombra */ -1.5px -2.5px 1px var(--color-3);
  /* Segunda sombra */
  font-size: 60px;

  letter-spacing: -4px;
}

/* Media query for mobile devices */
@media (max-width: 600px) {
  h1 {
    font-size: 32px;
    /* Same size as h3 */
    letter-spacing: -3px;
    /* Adjust letter-spacing to match h3 */
  }
}

h2 {
  color: var(--color-4);
  text-shadow: 1px 2px 1px var(--color-3),
    /* Primera sombra */ -1px -2px 1px var(--color-3);
  /* Segunda sombra */
  font-size: 40px;

  letter-spacing: -3.5px;
}

h3 {
  color: var(--color-4);
  text-shadow: 1px 2px 1px var(--color-3),
    /* Primera sombra */ -1px -2px 1px var(--color-3);
  /* Segunda sombra */
  font-size: 32px;

  letter-spacing: -3px;
}

h4 {
  color: var(--color-4);
  text-shadow: 1px 2px 1px var(--color-3),
    /* Primera sombra */ -1px -2px 1px var(--color-3);
  /* Segunda sombra */
  font-size: 24px;

  letter-spacing: -2.5px;
}

h5 {
  color: var(--color-4);
  text-shadow: 0.3px 0.6px 0.3px var(--color-3),
    /* Primera sombra */ -0.3px -0.6px 0.3px var(--color-3);
  /* Segunda sombra */
  font-size: 16px;

  letter-spacing: -2px;
}

a {
  cursor: pointer;
  color: var(--color-4);
  text-decoration: none;
  text-shadow: 0.3px 0.6px 0.3px var(--color-1),
    /* Primera sombra */ -0.3px -0.6px 0.3px var(--color-1);
  /* Segunda sombra */
}

.container {
  min-height: 100dvh; /* permite que la página crezca con las secciones */
}

.container--title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container--content {
  display: flex;
  flex-direction: column;
  position: relative;
  height: auto; /* altura automática; las secciones marcan el alto total */
  min-height: calc(
    var(--sections, 1) * 100dvh
  ); /* el JS puede ajustar --sections */
}

body {
  margin: 0;
  background-color: var(--color-1);
  min-height: 100dvh; /* permite scroll más allá del viewport */
}

.point {
  position: absolute;
  color: var(--color-2);
  font-size: 128px;
  /* Point size */
  line-height: 0;
  /*asi hay por arriba tambien*/
}

.box {
  position: relative;
  clip-path: var(--nube);

  background-color: var(--color-2);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

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

  font-family: "Inknut Antiqua", serif;
}

.pre-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

/* stacking: texto por encima; al pasar el ratón, traer nube al frente */
.pre-box {
  z-index: 1;
}
.pre-box:hover,
.pre-box:focus-within {
  z-index: 5;
}
.box {
  position: relative;
  z-index: 2;
}

.pre-box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--halo-scale)); /* centra y escala halo */
  background-position: center;
  width: 100%;
  height: 100%;
  background-color: var(--color-3);
  clip-path: var(--nube);
  z-index: -1;
  pointer-events: none;
}

.pre-box--shadow {
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3))
    drop-shadow(-5px -5px 5px rgba(0, 0, 0, 0.3));
}

/*
ideas para sombra en pre-box
.box-shadow {
    width: 200px;
    height: 200px;
    background-color: var(--color-1);
    clip-path: var(--nube);

    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);
  }

  .container > * {
    text-shadow: 20px 2px 5px rgba(0, 0, 0, 1);
}

  */
.box--title {
  width: 30vw;
  text-align: center;
  max-width: 100%;
}

/* @media (max-width: 600px) {

    .pre-box::before {
        width: 100%;
        height: 100%;
    }

    .box--title,
    .box--palette {
        width: 90%;
    }
} */

.box--palette {
  width: 90%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive popup */
.popup .pre-box {
  width: 80%;
}

.popup .box {
  width: 100%;
  padding: 2%;
}

.pre-box.box--palette {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 200px;
  z-index: 1;
}

.box--palette {
  position: relative;
  width: 100%;
  height: 100%;

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

.dot-container {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%; /* sigue la altura del padre automáticamente */
  z-index: -1;
  pointer-events: none; /* el fondo no intercepta clics */
  overflow: hidden;
}

/* Si .dot-container está dentro de .container--content, que cubra TODO su alto */
.container--content > .dot-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Alternativa: fondo fijo al viewport (no se corta nunca, no se desplaza con el scroll) */
.dot-container.is-fixed {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.popup-trigger {
  z-index: 1;
  top: 100px;
  right: 100px;
  cursor: pointer;
  color: var(--color-4);
  z-index: 3;
}

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.popup.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup .pre-box {
  position: relative;
  padding: 10px;
  width: 60vw;
}

.popup .box {
  background-color: var(--color-2);
  position: relative;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.close-popup {
  position: absolute;
  top: 100px;
  right: 100px;
  cursor: pointer;
  color: var(--color-4);
  z-index: 3;
}

.color-grid {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 20px;
  padding: 20px;
  width: 100%;
}

.color-rect {
  position: relative;
  width: 10%;
  aspect-ratio: 1;
  cursor: pointer;
  border-radius: 8px;
  border: #cccccc 2px dotted;
}

.color-rect[data-color="1"] {
  background-color: var(--color-1);
}

.color-rect[data-color="2"] {
  background-color: var(--color-2);
}

.color-rect[data-color="3"] {
  background-color: var(--color-3);
}

.color-rect[data-color="4"] {
  background-color: var(--color-4);
}

.color-picker {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.palette-buttons {
  display: flex;
  gap: 10px;
  padding: 20px;
}

.palette-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

div.flex-column p {
  margin: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.box--title.flex-column h4 { margin: 0 0 0.25em; line-height: 1.1; }
.box--title a { display: inline-block; line-height: 1; }

/* Cada categoría ocupa una altura de viewport */
.category-section {
  width: 100%;
  position: relative;
  overflow: visible;
}

/* Espacio de seguridad para que el borde blanco no se corte */
.clouds-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 12vh 3vw 3vh 12vh; /* ya veníamos con padding; subimos el top/left */
  box-sizing: border-box; /* la altura 100% incluye el padding */
}

.category-title {
  position: absolute;
  top: 10vh;
  left: 10vh;
  z-index: 2; /* sobre el canvas y nubes */
  pointer-events: none; /* no roba clics */
  font-size: clamp(18px, 3.5vw, 32px);
  color: var(--color-4);
  text-shadow: 1px 2px 1px var(--color-3), -1px -2px 1px var(--color-3);
}

#open-fun {
  position: fixed;         /* se ancla al viewport */
  right: 3vw;
  bottom: 3vh;
  width: clamp(180px, 22vw, 320px);
  aspect-ratio: 1.55 / 1;
}
#open-fun .box { width: 100%; height: 100%; }

/* opcional, para notches/iOS */
#open-fun {
  right: max(3vw, env(safe-area-inset-right));
  bottom: max(3vh, env(safe-area-inset-bottom));
}

/* Paso 1: sólo fijarlo y elevarlo */
#open-fun {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;      /* por encima de nubes y popups */
  pointer-events: auto;
}
#open-fun .box { width: 100%; height: 100%; }  /* que rellene su wrapper */

/* Paso 2: tamaño fluido y safe-area */
#open-fun {
  width: clamp(160px, 18vw, 300px);
  aspect-ratio: 1.55 / 1;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
}


/* ===== Meowrhino Responsive Patch (2025-08-26) ===== */
/* Keep this block at the very end so it overrides earlier rules */

/* popup overlay: center a cloud with safe max sizes */
.popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 1000;
}
.popup.active { display: flex; }

/* size the inner cloud responsively via clamp() */
.popup .pre-box {
  position: relative;
  width: clamp(360px, 86vw, 960px);
  aspect-ratio: 16 / 10;
}
.popup .box {
  width: 100%;
  height: 100%;
  padding: clamp(12px, 2.4vw, 28px);
  overflow: auto;                     /* avoid clipped chips */
  box-sizing: border-box;
}

/* Ensure the white outline always shows by drawing stroke on wrapper */
.popup .pre-box { 
  filter: drop-shadow(0 0 0 var(--color-3)) drop-shadow(0 10px 0 rgba(0,0,0,.18));
}

/* trigger: fixed bottom-right and fluid size */
#open-fun {
  position: fixed !important;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: clamp(160px, 18vw, 300px);
  aspect-ratio: 16 / 10;
  z-index: 9999;
}
#open-fun .box { width: 100%; height: 100%; }

/* Tablet adjustments */
@media (max-width: 1199px) {
  .popup .pre-box { width: clamp(340px, 80vw, 720px); }
}

/* Mobile compact */
@media (max-width: 480px) {
  .popup .pre-box { width: 92vw; max-height: 72vh; }
  .popup .box { padding: 14px; }
  .palette-btn, .popup .box button { font-size: 14px; min-height: 32px; }
}
/* ===== End Responsive Patch ===== */


/* === Palette grid responsive columns === */
.palette-buttons{
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: clamp(6px, 1vw, 12px);
  align-items: start;
}
.palette-buttons .palette-column{ display: contents; } /* flatten children into the grid */
.palette-btn{ white-space: nowrap; min-height: 32px; }

@media (max-width: 1199px){
  .palette-buttons{ grid-template-columns: repeat(5, minmax(120px, 1fr)); }
}
@media (max-width: 600px){
  .palette-buttons{ grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}


:root{ --popup-margin: clamp(12px, 3.5vw, 40px); }

.popup .pre-box {
  position: relative;
  width: min(980px, calc(100vw - var(--popup-margin) * 2));
  aspect-ratio: 16 / 10;
}
