/* Illustrated explanations live below play, with detail inside a native dialog. */
.rule-entry{margin:24px auto 8px;max-width:1180px;border-top:1px solid #cad3bd}
.rule-entry-button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%;min-height:118px;padding:12px 17px;border:0;border-radius:3px;background:transparent;color:var(--ink);text-align:left;overflow:hidden;transition:background-color 180ms var(--ease)}
.rule-entry-button:hover,.rule-entry-button:focus-visible{background:#e9eedf80}
.rule-entry-name{display:grid;gap:4px;flex:0 0 100px}
.rule-entry-name>small{font:11px/1.5 var(--sans);color:#91a080}
.rule-entry-name>strong{font:22px/1.5 var(--serif);font-weight:400;white-space:nowrap}
.rule-entry-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex:1;max-width:580px}
.rule-entry-step{display:grid;justify-items:center;gap:3px;font:11px/1.5 var(--sans);color:#8b9b7b}
.rule-entry-image{display:block;width:128px;height:64px;opacity:.85;transition:opacity 180ms}
.rule-entry-figure{width:100%;height:100%;overflow:visible;pointer-events:none}
.rule-entry-button:hover .rule-entry-image,.rule-entry-button:focus-visible .rule-entry-image{opacity:1}
.rule-entry-action{display:flex;align-items:center;gap:10px;flex-shrink:0;font:12px/1.5 var(--sans);color:#738963}
.rule-entry-arrow{color:#ad8248;font-size:18px;transition:translate 200ms var(--ease)}
.rule-entry-button:hover .rule-entry-arrow,.rule-entry-button:focus-visible .rule-entry-arrow{translate:2px -2px}
dialog.rulebook{width:min(860px,calc(100vw - 64px));max-height:min(88vh,780px);padding:23px 28px 22px;border:1px solid #bcc8ae;border-radius:5px;background:var(--paper-light);color:var(--ink);overflow:auto;box-shadow:0 22px 80px #153c332b}
.rulebook::backdrop{background:#17392e66;backdrop-filter:blur(3px)}
.rulebook-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.rulebook-heading>h2{font:25px/1.5 var(--serif);font-weight:400;margin:0}
.rulebook-heading>h2:focus{outline:none}
.rulebook-close{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;padding:0;border:1px solid #d0d8c4;background:transparent;color:#839775;font:24px/1 var(--sans);border-radius:50%;transition:background-color 150ms,color 150ms}
.rulebook-close:hover{background:#e7edda;color:var(--ink)}
.rulebook-tabs{display:flex;gap:8px;border-bottom:1px solid #d3dbc8;padding-bottom:12px}
.rulebook-tab{flex:1;min-width:0;min-height:38px;padding:7px 10px;border:1px solid transparent;background:transparent;font:13px/1.5 var(--sans);color:#8b9a7d;transition:background-color 180ms,border-color 180ms,color 180ms}
.rulebook-tab[aria-selected=true]{border-color:#b8c6a7;background:#e9efdd;color:#375d3b}
.rulebook-tab:hover{color:var(--ink);background:#edf1e6}
.rulebook-panel{padding:16px 8px 20px;text-align:center}
.rulebook-panel.is-changing{animation:rulebook-step-arrive 280ms var(--ease) both}
.rulebook-picture{margin:0 auto 8px;width:min(100%,580px);aspect-ratio:2}
.rulebook-diagram{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.rulebook-diagram path,.rule-entry-figure path{stroke-linecap:round;stroke-linejoin:round}
.rulebook-panel h3{font:23px/1.6 var(--serif);font-weight:400;margin:0 0 6px}
.rulebook-description{font:14px/1.9 var(--sans);color:#6b805f;max-width:610px;margin:0 auto}
.rulebook-actions{display:flex;align-items:center;gap:18px;padding-top:15px;border-top:1px solid #d3dbc8}
.rulebook-position{font:12px/1.5 var(--sans);color:#95a184;min-width:38px;margin-right:auto;font-variant-numeric:tabular-nums}
.rulebook-actions>.button{min-width:100px;min-height:39px;padding:8px 18px;font-size:12px}
.rulebook-actions>.text-button{font-size:12px;min-height:38px}
.rulebook-actions>.text-button:disabled{opacity:.3}
@keyframes rulebook-step-arrive{from{opacity:.35;translate:0 6px}to{opacity:1;translate:0 0}}
@media(max-width:1000px){.rule-entry-button{gap:17px;padding-left:10px;padding-right:10px}.rule-entry-name{flex-basis:84px}.rule-entry-name>strong{font-size:20px}.rule-entry-steps{gap:12px}.rule-entry-image{width:109px;height:55px}.rulebook-picture{max-width:520px}.rulebook-panel{padding-top:12px;padding-bottom:16px}}
@media(max-height:760px){dialog.rulebook{max-height:90vh;padding-top:18px;padding-bottom:17px}.rulebook-heading{margin-bottom:12px}.rulebook-picture{max-width:460px}.rulebook-panel{padding-top:10px;padding-bottom:12px}.rulebook-panel h3{font-size:21px}.rulebook-description{font-size:13px;line-height:1.8}.rulebook-actions{padding-top:11px}}
html[data-motion=off] .rulebook-panel.is-changing{animation:none}
@media(prefers-reduced-motion:reduce){.rulebook-panel.is-changing{animation:none}.rule-entry-arrow{transition:none}}