/* rulebook.css — the Best of Neapolitan rulebook: a parlour menu book, a chocolate spine with
 * the chapters, cream pages, every worked example on a waffle-tinted board. Tokens from style.css. */

#rulebook { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 12px; background: rgba(59, 36, 24, 0.5); }
.rb-book {
    position: relative; display: grid; grid-template-columns: 230px 1fr; width: min(980px, 100%); height: min(720px, 100%);
    background: var(--cream); border: 3px solid var(--ink); border-radius: 22px; overflow: hidden;
    box-shadow: 0 7px 0 var(--ink), 0 30px 60px -18px rgba(59, 36, 24, 0.8); user-select: text;
}
.rb-nav { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px 14px; background: var(--cocoa); color: var(--cream); overflow-y: auto; border-right: 3px solid var(--ink); }
.rb-head { display: flex; flex-direction: column; padding: 0 8px 12px; border-bottom: 2px dashed rgba(255, 248, 236, 0.35); margin-bottom: 6px; }
.rb-title { font: 400 24px/1.1 var(--font-script); color: var(--cream); }
.rb-sub { font: 600 12px/1.4 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pink); }
.rb-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: ch; display: flex; flex-direction: column; gap: 2px; }
.rb-nav li button {
    width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--cream);
    font: 500 15px/1.2 var(--font-ui); text-align: left; cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.rb-nav li button::before { counter-increment: ch; content: counter(ch); width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: rgba(255, 248, 236, 0.16); }
.rb-nav li button:hover { background: rgba(255, 248, 236, 0.1); }
.rb-nav li button.on { background: var(--pink); color: var(--ink); font-weight: 600; }
.rb-nav li button.on::before { background: var(--cream); }
.rb-pdf { margin-top: auto; padding: 10px 8px 0; font: 500 13px/1.3 var(--font-ui); color: var(--vanilla); text-underline-offset: 3px; }
.rb-page { overflow-y: auto; padding: 26px 34px 30px; font: 400 16px/1.55 var(--font-ui); scrollbar-color: var(--pink) transparent; }
.rb-page h2 { margin: 0 0 12px; font: 400 32px/1.15 var(--font-script); color: var(--berry-deep); }
.rb-page h3 { margin: 22px 0 6px; font: 600 18px/1.2 var(--font-ui); color: var(--cocoa); }
.rb-page p { margin: 0 0 12px; max-width: 68ch; }
.rb-page ul { margin: 0 0 14px; padding-left: 22px; max-width: 66ch; }
.rb-page li { margin-bottom: 6px; }
.rb-page b { font-weight: 600; color: var(--cocoa-deep); }
.rb-table { border-collapse: collapse; margin: 6px 0 16px; font-size: 15px; font-variant-numeric: tabular-nums; }
.rb-table th { text-align: left; padding: 6px 12px; font: 600 13px/1.2 var(--font-ui); color: var(--cream); background: var(--cocoa); }
.rb-table th:first-child { border-radius: 10px 0 0 0; }
.rb-table th:last-child { border-radius: 0 10px 0 0; }
.rb-table td { padding: 6px 12px; border-bottom: 1.5px dashed rgba(59, 36, 24, 0.25); }
.rb-next { margin-top: 18px; min-height: 46px; padding: 0 20px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--berry); color: var(--cream); font: 600 15px/1 var(--font-ui); cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.rb-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--vanilla); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 0 var(--ink); }
.rb-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* the worked examples */
.rb-plate { margin: 12px 0 18px; }
.rb-board {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 28px; padding: 16px 18px; border: 2px solid var(--ink); border-radius: 16px;
    background:
        repeating-linear-gradient(45deg, transparent 0 18px, rgba(201, 138, 69, 0.18) 18px 21px),
        repeating-linear-gradient(-45deg, transparent 0 18px, rgba(201, 138, 69, 0.18) 18px 21px),
        #f6dcb0;
}
.rb-plate figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: 70ch; }
.rb-group { display: flex; flex-direction: column; gap: 6px; }
.rb-glabel { font: 600 12px/1 var(--font-ui); letter-spacing: 0.04em; color: var(--cocoa); }
.rb-row, .rb-trick { display: flex; gap: 8px; align-items: flex-end; }
.rb-trick { gap: 12px; }
.rb-seat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rb-who { font: 500 12px/1 var(--font-ui); color: var(--ink-soft); }
.rb-card { position: relative; display: block; width: 62px; height: 87px; flex: none; border-radius: 9%/6.5%; filter: drop-shadow(0 2px 2px rgba(59, 36, 24, 0.35)); transition: opacity 200ms ease; }
.rb-card svg { width: 100%; height: 100%; display: block; }
.rb-card.rb-hidden { opacity: 0; }
.rb-card.rb-lit::after { content: ''; position: absolute; inset: -5px; border-radius: 11%/8%; box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--berry); }
.rb-mark-ok, .rb-mark-no { display: none; }
.rb-card.rb-mark::after {
    content: ''; position: absolute; right: -7px; top: -7px; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--ink); background-position: center; background-repeat: no-repeat; background-size: 12px;
}
.rb-card.rb-ok.rb-mark::after { background-color: #6fbf8a; background-image: var(--rb-tick); }
.rb-card.rb-no.rb-mark { filter: saturate(0.4) brightness(0.85); }
.rb-card.rb-no.rb-mark::after { background-color: #e07c7c; background-image: var(--rb-cross); }
/* the flavor stack = the table's cone: 58px scoops (64x52), 20px apart, the cone's mouth tucked under the bottom one */
.rb-stack { position: relative; display: block; width: 58px; height: 107px; }
.rb-disc { position: absolute; left: 0; width: 58px; height: 47px; transition: top 650ms cubic-bezier(.5, -0.35, .35, 1.35); filter: drop-shadow(0 2px 1.5px rgba(59, 36, 24, 0.3)); }
.rb-disc svg { width: 100%; height: 100%; display: block; }
.rb-cone { position: absolute; left: 6px; top: 72px; width: 46px; height: 35px; z-index: 0; filter: drop-shadow(0 3px 2px rgba(59, 36, 24, 0.3)); }
.rb-cone svg { width: 100%; height: 100%; display: block; }
.rb-stack-key { display: flex; flex-direction: column; justify-content: space-between; height: 87px; margin-left: 10px; font: 500 12px/1 var(--font-ui); color: var(--cocoa); }
.rb-group.rb-keyed { flex-direction: row; flex-wrap: wrap; align-items: center; }
.rb-group.rb-keyed .rb-glabel { width: 100%; }
.rb-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.rb-parts figure { margin: 0; padding: 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; }
.rb-parts figcaption { margin-top: 8px; font-size: 14px; line-height: 1.4; }
.rb-cherry { display: inline-grid; place-items: center; width: 62px; height: 87px; border: 2px solid var(--ink); border-radius: 8px; background: #fff3d6; transition: transform 500ms ease, filter 500ms ease; }
.rb-cherry svg { width: 40px; height: 44px; }
.rb-flip { display: flex; align-items: center; gap: 14px; }
.rb-flip .rb-cherry:not(.rb-up) { transform: rotateY(180deg); filter: saturate(0.3) brightness(0.9); }
.rb-say { opacity: 0; transform: translateY(6px); transition: opacity 250ms ease, transform 250ms ease; padding: 8px 14px; background: #fff; border: 2px solid var(--ink); border-radius: 16px 16px 16px 4px; font: 600 15px/1.2 var(--font-ui); }
.rb-say.rb-show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .rb-disc, .rb-cherry, .rb-say { transition: none; }
    .rb-say { opacity: 1; transform: none; }
}

/* phones and portrait: the chapters become a row of chips over the page */
@media (max-width: 760px), (max-height: 479px) {
    #rulebook { padding: 6px; }
    .rb-book { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100%; border-radius: 16px; }
    /* the chips scroll inside the list, which ends before the close button: no chip ever slides under it */
    .rb-nav { flex-direction: row; align-items: center; padding: 6px 56px 6px 8px; overflow: hidden; border-right: 0; border-bottom: 3px solid var(--ink); gap: 6px; }
    .rb-head, .rb-pdf { display: none; }
    .rb-nav ol { flex-direction: row; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .rb-nav ol::-webkit-scrollbar { display: none; }
    .rb-nav li button { white-space: nowrap; min-height: 36px; font-size: 13px; padding: 4px 10px; }
    .rb-nav li button::before { width: 18px; height: 18px; font-size: 11px; }
    .rb-close { top: 4px; right: 6px; }
    .rb-page { padding: 14px 18px 20px; font-size: 15px; }
    .rb-page h2 { font-size: 26px; }
    .rb-card, .rb-cherry { width: 50px; height: 70px; }
    .rb-board { gap: 12px 18px; padding: 12px; }
}