/* =========================================================
   CREATE YOUR ASKR CHARACTER
   Win98 chrome comes from window.css; everything below is the interior of the app,
   which follows the approved PS2-era reference: dark slate panels, hairline borders,
   bitmap type. No rounded corners, no soft shadows, no gradients on the UI.
   ========================================================= */
.create {
  /* VT323 first; the rest are faces that ship with desktop OSes and keep the
     fixed-pitch, low-smoothing character if the web font never loads. */
  --create-font: "VT323", "Share Tech Mono", "Courier New", "DejaVu Sans Mono", "Liberation Mono", monospace;

  --c-ink: #12181a;
  --c-panel: #222b30;
  --c-panel-2: #1a2226;
  --c-head: #2b363c;
  --c-line: #47565c;
  --c-line-soft: #3a474c;
  --c-text: #cfd8da;
  --c-dim: #93a1a5;
  --c-active: #c6d0c0;
  --c-select: #e2dca6;

  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-ink);
  color: var(--c-text);
  font-family: var(--create-font);
  letter-spacing: 0.05rem;
  position: relative;
}

/* Subtle aging: hard scanlines over the interior, the way an old CRT program looked.
   Sits above the panels but takes no pointer events. */
.create::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.26) 0, rgba(0, 0, 0, 0.26) 1px,
    rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 3px
  );
  opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) { .create::after { opacity: 0.22; } }

.create__main {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 0.7rem;
  padding: 0.7rem;
  overflow: auto;
}

/* ---------- Info column ---------- */
.create__col--info {
  width: 23.4rem;
  flex: none;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.create__brand {
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
  font-weight: 900;
  font-size: 3.9rem;
  line-height: 1;
  letter-spacing: 0.28rem;
  color: #dfe6e6;
  text-shadow: 0.2rem 0.2rem 0 #0d1214, -0.1rem -0.1rem 0 #73868b;
}
/* ASSET: placeholder wordmark. Drop the distressed ASKR logo in here when it exists. */

.create__subtitle {
  margin-top: 0.6rem;
  font-size: 1.95rem;
  line-height: 1.05;
  color: var(--c-text);
}

.create__cats {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.create__cat {
  height: 3.1rem;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.9rem;
  background: #24323a;
  border: 1px solid var(--c-line);
  color: var(--c-text);
  font-family: var(--create-font);
  font-size: 2.1rem;
  text-align: left;
}
.create__cat-mark { visibility: hidden; }
.create__cat:hover { background: #2c3c45; }
.create__cat.is-active {
  background: var(--c-active);
  border-color: #eef2ea;
  color: #1a2124;
}
.create__cat.is-active .create__cat-mark { visibility: visible; }

.create__trust {
  margin-top: 1.2rem;
  font-size: 2.4rem;
  line-height: 0.95;
  color: #e3eae9;
}

.create__sheet {
  margin-top: 1rem;
  flex: none;
  padding: 0.8rem 1rem;
  background: rgba(26, 34, 38, 0.72);
  border: 1px solid var(--c-line-soft);
  font-size: 1.65rem;
  line-height: 1.3;
}
.create__sheet span { color: var(--c-dim); }
.create__sheet-gap { height: 1.2rem; }

.create__mark {
  margin-top: auto;
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--c-dim);
  font-size: 1.9rem;
}
.create__globe { width: 4.6rem; height: 4.6rem; opacity: 0.8; }

/* ---------- Character stage ---------- */
.create__stage-wrap {
  flex: 1;
  min-width: 26rem;
  border: 1px solid var(--c-line-soft);
  background: #11171a;
  overflow: hidden;
}
.stage { width: 100%; height: 100%; }
.stage__svg { width: 100%; height: 100%; display: block; }

/* Idle: a slow weight shift, a breath and a micro head move, on three different
   periods so the loop never lines up. fill-box keeps each pivot at the bottom of
   its own group (feet / hips / neck) regardless of parent transforms. */
#chr-root,
#chr-upper,
#chr-head {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
#chr-root { animation: askr-sway 5.6s ease-in-out infinite; }
#chr-upper { animation: askr-breathe 4.1s ease-in-out infinite; }
#chr-head { animation: askr-head 7.3s ease-in-out infinite; }

@keyframes askr-sway {
  0%, 100% { transform: rotate(-0.42deg); }
  50%      { transform: rotate(0.46deg) translateY(-1.4px); }
}
@keyframes askr-breathe {
  0%, 100% { transform: scale(1, 1); }
  45%      { transform: scale(1.006, 1.014); }
}
@keyframes askr-head {
  0%, 100% { transform: rotate(-0.8deg) translateY(0); }
  32%      { transform: rotate(0.6deg) translateY(-1.2px); }
  64%      { transform: rotate(-0.15deg) translateY(0.6px); }
}
@media (prefers-reduced-motion: reduce) {
  #chr-root, #chr-upper, #chr-head { animation: none; }
}

/* A beanie replaces the spiky hair on top. */
.stage__svg.has-headwear #chr-hair-spikes { display: none; }

/* ---------- Option panels ---------- */
.create__col--panels {
  width: 35.4rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow-y: auto;
}
/* Dark scrollbars: the Win98 ones belong to the window chrome, not to the app interior. */
.create__col--panels::-webkit-scrollbar,
.create__col--info::-webkit-scrollbar,
.create__main::-webkit-scrollbar { width: 1rem; height: 1rem; }
.create__col--panels::-webkit-scrollbar-track,
.create__col--info::-webkit-scrollbar-track,
.create__main::-webkit-scrollbar-track { background: #151b1e; }
.create__col--panels::-webkit-scrollbar-thumb,
.create__col--info::-webkit-scrollbar-thumb,
.create__main::-webkit-scrollbar-thumb { background: #3c494e; }
.create__col--panels, .create__col--info, .create__main { scrollbar-color: #3c494e #151b1e; }

.opt-panel {
  flex: none;
  background: var(--c-panel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  border: 1px solid var(--c-line);
}
.opt-panel.is-focused { border-color: #8d9ea4; }

.opt-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.4rem;
  padding: 0 0.7rem 0 1rem;
  background: var(--c-head);
  border-bottom: 1px solid var(--c-line-soft);
}
.opt-panel__title { font-size: 2.1rem; font-weight: normal; letter-spacing: 0.1rem; }
.opt-panel__nav { display: flex; gap: 0.9rem; }
.opt-panel__arrow {
  width: 2.4rem;
  height: 2.6rem;
  background: none;
  border: 0;
  color: var(--c-text);
  font-family: var(--create-font);
  font-size: 2.2rem;
  line-height: 1;
}
.opt-panel__arrow:hover { color: #fff; background: #3a4a51; }
.opt-panel__arrow:active { transform: translate(1px, 1px); }

.opt-panel__grid { display: flex; gap: 0.6rem; padding: 0.8rem; }

.opt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.3rem 0.4rem;
  background: var(--c-panel-2);
  border: 1px solid var(--c-line-soft);
  color: inherit;
}
.opt:hover { border-color: #8d9ea4; }
.opt[aria-pressed="true"] {
  border-color: var(--c-select);
  background: #26302f;
  box-shadow: inset 0 0 0 1px #0d1214;
}
.opt:focus-visible { outline: 1px dotted var(--c-select); outline-offset: 2px; }
/* An option the equipped garment hides on the figure: still selectable, visibly inert. */
.opt.is-unavailable { opacity: 0.4; }
.opt.is-unavailable .opt__label { color: #7d8a8e; }

.opt__art { display: block; height: 7rem; }
.opt__art .thumb-art { width: 100%; height: 100%; }
.opt__label {
  min-height: 2.9rem;
  font-size: 1.4rem;
  line-height: 1.45rem;
  overflow-wrap: anywhere;
  text-align: center;
  color: #aab6b9;
}
.opt[aria-pressed="true"] .opt__label { color: #edf1ea; }

/* ---------- Action bar ---------- */
.create__bar {
  flex: none;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem 0 1.4rem;
  background: #161d20;
  border-top: 1px solid var(--c-line-soft);
}
.create__status {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  height: 3.4rem;
  font-size: 1.8rem;
}
.create__status-cell {
  display: flex;
  align-items: center;
  padding: 0 1.2rem;
  border: 1px solid var(--c-line-soft);
  background: #11171a;
  white-space: nowrap;
}
.create__status-cell--equipped { color: #c2ccce; letter-spacing: 0.1rem; }
.create__status-cell--hint { color: #6f7c80; }

.create__save {
  height: 4rem;
  padding: 0 3.4rem;
  background: #1e262a;
  border: 1px solid #9aa8ac;
  color: #e6ecec;
  font-family: var(--create-font);
  font-size: 2.2rem;
  letter-spacing: 0.15rem;
}
.create__save:hover { background: #2a353a; }
.create__save:active { transform: translate(1px, 1px); }
.create__save:disabled { color: #7d8a8e; border-color: #555f62; }
.create__save:focus-visible { outline: 1px dotted var(--c-select); outline-offset: 2px; }

/* =========================================================
   MOBILE — CREATE (ver el bloque equivalente en window.css)

   Cuelga todo de <html data-mobile>, que scale.js solo escribe en un dispositivo de
   puntero grueso con el lado corto de teléfono. En escritorio el atributo no existe.

   Medido antes de tocar nada:
     vertical    359 px disponibles y 769 de columnas -> 435 px de scroll horizontal
                 dentro de .create__main y 279 elementos fuera de su marco.
     horizontal  a 844x390 falta un scroll de 7 px. Siete. La composición de tres
                 columnas ya cabe prácticamente entera, así que ahí no se rehace nada:
                 se recuperan esos 7 px y se queda como el escritorio aprobado.
   ========================================================= */

/* El reparto no es "vertical u horizontal" sino "¿caben las tres columnas?". Medido: a
   568x320 y 667x375 —teléfonos pequeños tumbados— faltaban 133 px, así que esos también
   necesitan la lista vertical. La frontera está en una proporción de 2:1, y no al filo:
   con las columnas laterales apretadas (abajo) el caso más justo de 2:1 cabe con 60 px
   de sobra, y el caso real de 844x390 (2,16:1) con bastante más. */
@media (max-aspect-ratio: 199/100) {

  /* Aquí el interior deja de ser tres columnas y pasa a ser una sola lista. */
  [data-mobile] .create__main {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    padding: 1.2rem 1.2rem 2rem;
    overflow-x: hidden;
  }

  /* `display: contents` disuelve la columna de la izquierda SIN tocar el DOM: sus hijos
     pasan a ser elementos del flujo vertical y se pueden ordenar uno a uno. Es lo que
     permite meter el personaje ENTRE el branding y las categorías, que están dentro del
     mismo contenedor, sin mover una línea de CreateApp.js. */
  [data-mobile] .create__col--info { display: contents; }

  [data-mobile] .create__brand     { order: 1; text-align: center; font-size: 4.4rem; }
  [data-mobile] .create__subtitle  { order: 2; margin-top: 0.4rem; text-align: center; }
  [data-mobile] .create__stage-wrap { order: 3; }
  [data-mobile] .create__cats      { order: 4; margin-top: 0; }
  [data-mobile] .create__col--panels { order: 5; }
  [data-mobile] .create__trust     { order: 6; text-align: center; margin-top: 0.6rem; }
  [data-mobile] .create__sheet     { order: 7; margin-top: 0; }
  [data-mobile] .create__mark      { order: 8; margin-top: 0.4rem; }

  /* ---------- el personaje ----------
     62 % del ancho interior y la relación exacta de su viewBox (432 x 812), así que se ve
     entero, sin deformar y sin recortar. El SVG, la anatomía y las prendas no se tocan;
     tampoco la animación idle, que vive en #chr-root / #chr-upper / #chr-head. */
  [data-mobile] .create__stage-wrap {
    flex: none;
    width: 62%;
    min-width: 0;
    align-self: center;
    aspect-ratio: 432 / 812;
  }

  /* ---------- categorías ----------
     De columna a fila de tres. Mismo botón, mismo estado activo, misma marca ">". */
  /* La red de seguridad para una cuarta categoría es `wrap`, no un scroll: `overflow-x:
     auto` convierte TAMBIÉN el eje vertical en `auto` (lo dice la especificación), y la
     fila se desplazaba sola 20 px dejando las pestañas fuera de su propia caja: dejaban
     de recibir el toque. Envolviendo a una segunda línea no hay recorte posible. */
  [data-mobile] .create__cats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  /* `1 1 auto` y no `1 1 0`: repartiendo el ancho a partes iguales, ACCESSORIES pedía 93 px
     de texto y solo tenía 73, y se cortaba. Partiendo de su contenido y creciendo desde
     ahí, cada pestaña recibe lo que su palabra necesita y la fila sigue llena. */
  [data-mobile] .create__cat {
    flex: 1 1 auto;
    justify-content: center;
    gap: 0.3rem;
    padding: 0 0.5rem;
    font-size: 1.75rem;
    white-space: nowrap;
  }

  /* ---------- paneles de prendas ---------- */
  [data-mobile] .create__col--panels {
    width: 100%;
    flex: none;
    overflow-y: visible;
  }
  /* Las tres categorías traen 4, 3 y 3 opciones, así que hoy caben holgadas y se reparten
     el ancho. El min-width es para mañana: al añadir una quinta prenda la fila se desplaza
     por dentro en vez de aplastar las tarjetas hasta que el pixel art no se reconozca. */
  [data-mobile] .opt-panel__grid { overflow-x: auto; scrollbar-width: none; }
  [data-mobile] .opt-panel__grid::-webkit-scrollbar { display: none; }
  [data-mobile] .opt { min-width: 7.2rem; }
  [data-mobile] .opt__art { height: 8rem; }

  /* ---------- ficha de datos ----------
     Dos columnas de verdad: `column-count` reparte los mismos párrafos, en el mismo orden,
     sin añadir ni quitar una línea. */
  [data-mobile] .create__sheet {
    column-count: 2;
    column-gap: 1.6rem;
    font-size: 1.75rem;
  }

  /* ---------- barra inferior ----------
     Dos filas a ancho completo: EQUIPPED nunca se corta y SAVE IMAGE deja de salirse
     (era el único desbordamiento duro que quedaba de la auditoría: 115 px). */
  [data-mobile] .create__bar {
    height: auto;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
  }
  [data-mobile] .create__status { width: 100%; height: auto; }
  [data-mobile] .create__status-cell--equipped { flex: 1; justify-content: center; }
  [data-mobile] .create__status-cell--hint { display: none; }
  [data-mobile] .create__save { width: 100%; padding: 0; }
}

/* Teléfono ancho tumbado (844x390, 932x430): la composición de tres columnas del
   escritorio se conserva. Solo se aprietan los dos laterales y los huecos, que es lo que
   la hace caber con margen en vez de al filo —y, de paso, le deja al personaje 327 px de
   ancho en vez de 239—. Ni el layout ni el orden cambian: es el escritorio, compacto. */
@media (min-aspect-ratio: 2/1) {
  [data-mobile] .create__main { gap: 0.5rem; padding: 0.5rem; }
  [data-mobile] .create__col--info { width: 20rem; }
  [data-mobile] .create__col--panels { width: 30rem; }
  [data-mobile] .create__stage-wrap { min-width: 22rem; }
}

/* ---------- táctil, en las dos orientaciones ----------
   Esto no es layout: es tamaño de dedo, y un dedo mide lo mismo de pie que tumbado. */

/* Las flechas < > medían 22 x 24 px. El dibujo crece hasta el alto de su cabecera y el
   área táctil se estira por fuera: mucho arriba y abajo, donde solo hay cabecera, y poco
   a los lados, porque entre las dos flechas solo hay 0,9rem y sus áreas se tocarían. */
/* En PÍXELES, no en rem: con 3,4rem la flecha se quedaba en 25 px y el área en 29 x 35
   justo en el teléfono de 320, porque el rem encoge con la escala y el dedo no. */
[data-mobile] .opt-panel__head { height: auto; min-height: 42px; }
[data-mobile] .opt-panel__arrow {
  position: relative;
  width: 34px;
  height: 34px;
}
[data-mobile] .opt-panel__arrow::after {
  content: "";
  position: absolute;
  inset: -4px -2px;   /* 42 px de alto; a lo ancho poco, que entre las dos hay 0,9rem */
}

[data-mobile] .create__cat { min-height: 40px; height: auto; }
[data-mobile] .create__save { height: auto; min-height: 42px; }