/* ---------------------------------------------------------------------
   /how-to-play/ in /hearts/ — navodila iz igre in Rev Rush 1.4.

   Ikone so slike iz igre (tools/howto.py), narisane v pikslu 4 in na
   strani v polovici: na zaslonu z dvojno gostoto je to piksel na piksel.
   `pixelated` drzi robove ostre, ko brskalnik vseeno meri drugace.
   --------------------------------------------------------------------- */

.ico, .ico-inline, .heart-ico {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.ico-inline {
  height: 1.15em;
  width: auto;
  vertical-align: -0.2em;
  margin-right: .35em;
}

.guide-toc {
  margin: 1.6rem 0 0.4rem;
  padding: 1rem 1.2rem;
  background: var(--card);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
}
.guide-toc ol { margin: 0; padding-left: 1.3rem; }
.guide-toc li { margin: .15rem 0; }

.tip {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 1rem;
  align-items: start;
  margin: 1.1rem 0;
  padding: 1rem 1.1rem;
  background: var(--card);
  border-radius: 3px;
}
.tip-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 3.2rem;
  padding: .45rem 0;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-radius: 3px;
}
.tip-icons .ico { max-width: 3.4rem; height: auto; }
.tip.multi .tip-icons .ico { max-width: 1.9rem; }
.tip h3 {
  margin: 0 0 .35rem;
  font-size: 1rem;
  color: var(--ink);
}
.tip p { margin: 0 0 .5rem; color: var(--dim); }
.tip p:last-child { margin-bottom: 0; }

/* sest stevilk v dveh vrstah po tri, kot na /duo/ */
.numbers.six { grid-template-columns: repeat(3, 1fr); }

/* srce v vsakem svetu (/hearts/) */
.hearts-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.8rem; }
.hearts-table th, .hearts-table td {
  text-align: left;
  vertical-align: top;
  padding: .45rem .5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.hearts-table th { color: var(--gold); font-weight: normal; font-size: .8rem; letter-spacing: .08em; }
.hearts-table td:first-child { color: var(--dim); width: 2.2rem; }
.hearts-table td:nth-child(2) { white-space: nowrap; }

@media (max-width: 34rem) {
  .tip { grid-template-columns: 3rem 1fr; gap: .8rem; padding: .85rem .9rem; }
  .tip-icons .ico { max-width: 2.5rem; }
  .hearts-table td:nth-child(2) { white-space: normal; }
}