:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

  /* Layout: una columna de lectura; dos tintas = dos manos (índigo para la forma, petróleo para la regla de juego); fichas en rejilla que se apila en móvil. */
  :root {
    --paper: #f2f3f7;
    --card: #fbfbfd;
    --ink: #1c1f2e;
    --muted: #575c72;
    --rule: #d7d9e3;
    --indigo: #33449a;
    --petroleo: #2b6168;
    --indigo-wash: #e5e8f6;
    --petroleo-wash: #e0ecec;
    --f-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #13151d; --card: #1a1d28; --ink: #e7e8ef; --muted: #a2a7bb; --rule: #2d3144;
      --indigo: #9eabf3; --petroleo: #8cc3c5; --indigo-wash: #242b4b; --petroleo-wash: #1f3437;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --paper: #13151d; --card: #1a1d28; --ink: #e7e8ef; --muted: #a2a7bb; --rule: #2d3144;
    --indigo: #9eabf3; --petroleo: #8cc3c5; --indigo-wash: #242b4b; --petroleo-wash: #1f3437;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
  }
  .page {
    max-width: 70rem;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    padding-block: 0 3rem;
  }
  a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: .18em; }
  a:hover { color: var(--petroleo); }
  a:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; border-radius: 2px; }
  cite { font-family: var(--f-display); font-style: italic; font-size: 1.06em; }
  h1, h2, h3 { font-family: var(--f-display); font-weight: 500; text-wrap: balance; margin: 0; }
  p { margin: 0; }

  .label {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* Portada */
  .hero { padding-block: clamp(2.5rem, 7vw, 4.5rem) 2rem; display: grid; gap: 1.25rem; }
  .hero h1 {
    font-size: clamp(2.6rem, 8.5vw, 5.2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--indigo);
  }
  .hero h1 em { color: var(--petroleo); font-style: italic; }
  .lede { max-width: 40rem; font-size: 1.15rem; }
  .formula { max-width: 40rem; color: var(--muted); }
  .k-forma, .k-regla { font-weight: 600; padding: .05em .35em; border-radius: 3px; white-space: nowrap; }
  .k-forma { color: var(--indigo); background: var(--indigo-wash); }
  .k-regla { color: var(--petroleo); background: var(--petroleo-wash); }

  nav.toc { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; padding-block: .9rem; border-block: 1px solid var(--rule); }
  nav.toc a { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .04em; color: var(--ink); }
  nav.toc a:hover { color: var(--petroleo); }

  /* Secciones */
  section { margin-block-start: 3.25rem; scroll-margin-top: 1rem; }
  .sec-head { display: grid; gap: .4rem; margin-block-end: 1.25rem; max-width: 42rem; }
  .sec-head h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.1; }
  .sec-head p { color: var(--muted); }

  /* Fichas de formas */
  .fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr)); gap: 1rem; }
  .ficha {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.1rem 1.2rem 1.2rem;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 6px;
    scroll-margin-top: 1rem;
  }
  .ficha header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; }
  .ficha h3 { font-size: 1.4rem; line-height: 1.15; color: var(--indigo); }
  .tag {
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--petroleo);
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: .1rem .4rem;
    white-space: nowrap;
  }
  .ficha .row { font-size: .93rem; color: var(--muted); }
  .ficha .row .label { margin-inline-end: .4rem; }
  .ficha ul { display: inline; list-style: none; margin: 0; padding: 0; }
  .ficha li { display: inline; }
  .ficha li + li::before { content: " · "; color: var(--rule); font-weight: 600; }
  .ficha .row a, .ficha .row cite { color: var(--ink); }
  .ficha .row a { text-decoration-color: var(--indigo); }
  .ficha .row a:hover { color: var(--petroleo); }
  .en { font-family: var(--f-mono); font-size: .72em; color: var(--muted); }
  .interactivo {
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--indigo);
    background: var(--indigo-wash);
    border-radius: 3px;
    padding: .08rem .35rem;
    margin-inline-start: .25rem;
    white-space: nowrap;
  }

  /* Reglas de juego */
  .reglas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr)); gap: 1.1rem 2rem; margin: 0; }
  .reglas div { min-width: 0; padding-block-start: .75rem; border-top: 2px solid var(--petroleo-wash); }
  .reglas dt { font-family: var(--f-display); font-style: italic; font-size: 1.35rem; color: var(--petroleo); line-height: 1.2; }
  .reglas dd { margin: .25rem 0 0; }

  /* Para averiguar algo */
  .averiguar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr)); gap: .9rem 2rem; }
  .averiguar li { min-width: 0; color: var(--muted); }
  .averiguar strong { color: var(--ink); font-weight: 600; }

  /* Puntos de partida */
  .partidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
  .partida {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1.25rem 1.3rem;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 6px;
  }
  .partida h3 { font-size: 1.5rem; line-height: 1.15; }
  .chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: auto; padding-block-start: .3rem; }
  .chip {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    font-size: .88rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    text-decoration: none;
  }
  .chip .label { font-size: .64rem; color: inherit; opacity: .8; }
  .chip.forma { color: var(--indigo); background: var(--indigo-wash); }
  .chip.regla { color: var(--petroleo); background: var(--petroleo-wash); }
  a.chip:hover { color: var(--petroleo); }

  footer {
    margin-block-start: 3.5rem;
    padding-block-start: 1.25rem;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: .88rem;
    display: grid;
    gap: .35rem;
    max-width: 44rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }