/* The how-to-play guide: the hub (guide/) and a page for every mini-game (guide/<game>/).
   The shared language - paper, ink, the blue gem, cut corners, the type - is site.css; this is only the guide's own
   layout. Generated pages: tools/build_site_guide.py in the game's repo writes them, so edit there, not the HTML. */

/* ---------- the hub ---------- */
.guide-hero {padding: clamp(40px, 6vw, 84px) 0 clamp(20px, 3vw, 32px);}
.guide-hero h1 {font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.04;}
.guide-hero .lead {margin-top: 14px;}
.hub-group {padding: 0; margin: 0 0 clamp(40px, 6vw, 64px);}   /* not site.css's padded section */
.hub-group > h2 {display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: clamp(1.35rem, 2.2vw, 1.7rem);}
.hub-games {display: grid; gap: 30px 18px; grid-template-columns: repeat(2, minmax(0, 1fr));}
@media (min-width: 720px) {.hub-games {grid-template-columns: repeat(3, minmax(0, 1fr));}}
.hub-games > li {scroll-margin-top: 96px;}
.hub-games a {display: grid; gap: 10px; color: inherit;}
.hub-games a:hover {text-decoration: none;}
.hub-games .frame {--c: 10px;}
.hub-games .sum {color: var(--ink-2); font-size: 0.98rem; line-height: 1.5;}
.hub-games .more {font: 700 0.74rem/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gem);}
.hub-games a:hover .more {color: var(--gem-deep);}

/* ---------- a game's page ---------- */
.crumbs {display: flex; align-items: center; gap: 12px; padding-top: clamp(24px, 4vw, 40px);
  font: 700 0.76rem/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);}
.crumbs a {color: var(--ink-3);}
.crumbs a:hover {color: var(--gem); text-decoration: none;}
.crumbs .gem {--s: 7px; opacity: 0.7;}

.game-hero {display: grid; gap: clamp(24px, 4vw, 48px); padding: clamp(18px, 3vw, 28px) 0 clamp(40px, 6vw, 64px); align-items: start;}
.game-hero h1 {font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1.02;}
.game-hero .lead {margin-top: 16px;}
.game-hero .jump {display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px;
  font: 700 0.76rem/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase;}
.game-hero .jump a {display: inline-flex; align-items: center; gap: 9px; min-height: 40px;}
.game-hero .jump a::before {content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gem);}
.infobox {display: grid; background: var(--white); box-shadow: var(--shadow-1);}
.infobox .frame {--c: 0px; padding: 0; background: none;}
.infobox .sheet {background: var(--white); gap: 10px 22px; padding: 20px 24px 24px;}
@media (min-width: 900px) {
  .game-hero {grid-template-columns: minmax(0, 1fr) minmax(0, 420px);}
  .game-hero .intro {padding-top: clamp(8px, 2vw, 28px);}
}

.guide-section {padding: 0 0 clamp(48px, 7vw, 88px);}
.guide-section > h2 {margin-bottom: clamp(24px, 3vw, 36px); font-size: clamp(1.7rem, 3vw, 2.3rem);}

/* the walkthrough: one real screenshot per step, the thing to look at ringed and named on the picture itself */
.step-list {display: grid; gap: clamp(40px, 6vw, 76px);}
.step {display: grid; gap: 18px; align-items: center;}
@media (min-width: 1024px) {
  .step {grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px;}
  .step:nth-child(even) {grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);}   /* the picture keeps the wide side */
  .step:nth-child(even) .step-shot {order: 2;}
}
.step-shot .frame {--c: 12px;}
.step-shot .in {position: relative;}
.step-shot .frame img {display: block; height: auto;}   /* its shape is set inline, so the space is kept before it loads */
/* a game whose board is tall (Mining) is pictured square: half and half, the picture kept to a readable size */
@media (min-width: 1024px) {
  .step.square {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .step.square .step-shot {width: 100%; max-width: 480px; justify-self: end;}
  .step.square:nth-child(even) .step-shot {justify-self: start;}
}
@media (max-width: 1023px) {.step.square .step-shot {max-width: 520px;}}
.mark {position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 2px solid #fff; border-radius: 6px; box-shadow: 0 0 0 2px var(--gem), 0 4px 18px rgba(18, 32, 51, 0.45);
  pointer-events: none;}
.mark .tag {position: absolute; left: -2px; bottom: calc(100% + 8px); display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; white-space: nowrap; background: var(--white); color: var(--ink); box-shadow: var(--shadow-2);
  font: 700 0.66rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase;}
.mark .tag::before {content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gem);}
.mark.below .tag {top: calc(100% + 8px); bottom: auto;}
.mark.right .tag {left: auto; right: -2px;}
.mark .tag i {display: none; font-style: normal;}
.mark-key {display: none;}
/* A phone's picture is too narrow for words on it: each ring gets its number beside it, on the side the generator
   picked (chip_side: left, else right, above, below, or inside its corner), and the words go under the picture. */
@media (max-width: 560px) {
  .mark {border-width: 1.5px; box-shadow: 0 0 0 1.5px var(--gem), 0 2px 10px rgba(18, 32, 51, 0.45);}
  .mark .tag, .mark.below .tag, .mark.right .tag {top: -2px; bottom: auto; left: auto; right: auto; width: 18px; height: 18px;
    padding: 0; gap: 0; justify-content: center; border-radius: 50%; background: var(--gem); color: #fff;
    box-shadow: 0 0 0 2px #fff, var(--shadow-2); font: 700 0.62rem/1 var(--font-display); letter-spacing: 0;}
  .mark .tag::before, .mark .tag .t {display: none;}
  .mark .tag i {display: block;}
  .mark.kl .tag {right: calc(100% + 4px);}
  .mark.kr .tag {left: calc(100% + 4px);}
  .mark.kt .tag {top: auto; bottom: calc(100% + 4px); left: -2px;}
  .mark.kb .tag {top: calc(100% + 4px); left: -2px;}
  .mark.ki .tag {top: 3px; left: 3px;}
  .mark-key {display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px;}
  .mark-key span {display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2);
    font: 700 0.66rem/1.3 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;}
  .mark-key i {display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--gem); color: #fff; font: 700 0.62rem/1 var(--font-display); font-style: normal; letter-spacing: 0;}
}
.step-body {display: grid; gap: 10px; align-content: start;}
.step-n {display: flex; align-items: center; gap: 12px; font: 700 0.76rem/1 var(--font-display); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gem);}
.step-body h3 {font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.15;}
.step-body p {color: var(--ink-2);}
.step-body kbd {display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px;
  background: var(--white); font: 600 0.86em/1.4 var(--font-body); text-align: center; color: var(--ink);}

/* the rules, exactly as the game prints them behind its "?" */
.rules-body {display: grid; gap: 12px; padding: clamp(22px, 3vw, 34px); background: var(--white); max-width: none;}
.rules-body ul {display: grid; gap: 9px;}
.rules-body li {position: relative; padding-left: 22px;}
.rules-body li::before {content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gem);}
.rules-note {margin-top: 14px; color: var(--ink-3); font-size: 0.92rem;}

/* previous / all / next */
.pager {display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;
  padding: 26px 0 clamp(48px, 7vw, 80px); border-top: 1px solid var(--line);}
.pager a {display: grid; gap: 6px; font: 700 1.05rem/1.2 var(--font-display); color: var(--ink);}
.pager a span {font: 700 0.68rem/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);}
.pager a:hover {color: var(--gem); text-decoration: none;}
.pager .next {text-align: right;}
.pager .all {font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gem);}
.guide-foot {padding: 36px 0 64px; color: var(--ink-3); text-align: center; display: grid; gap: 10px;}