/* The rules page and its Scoring basics sheet: LeaderboardRulesScreen.kt / LockGuideSections.kt on the web.
   The forest card colours are BoardTokens.kt, the same in both themes; sizes follow RulesTokens.kt and
   motion follows AppAnim (Fast 180, Standard 260, Emphasized 360, Screen 420 ms). */
.rules-page,.rules-basics{--board-forest:#193e32;--board-cream:#fff8e9;--board-label:#d1dfa9;--board-muted:#c5d2c5;--board-detail:#315646;--board-orange:#d94c21;--board-danger-light:#f2a8a8;--ease-pop:cubic-bezier(.34,1.56,.64,1)}
.rules-page{max-width:1040px;padding-top:32px;container-type:inline-size}
.rules-page .rules-page-heading,.rules-stack{max-width:560px;margin-left:auto;margin-right:auto}
.rules-stack,.rules-col{display:flex;flex-direction:column;gap:16px}
@container (min-width:820px){
  .rules-page .rules-page-heading,.rules-stack{max-width:none}
  .rules-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}
}

/* One colour family per meaning: mint is on the board, red is locked or refused, orange is money. */
:is(.rules-page,.rules-basics) .ink-live{--ink-color:var(--soft-mint-ink);--ink-fill:var(--soft-mint)}
:is(.rules-page,.rules-basics) :is(.ink-pause,.ink-muted){--ink-color:var(--muted);--ink-fill:var(--surface-secondary)}
:is(.rules-page,.rules-basics) .ink-lock{--ink-color:var(--soft-danger-ink);--ink-fill:var(--soft-danger)}
:is(.rules-page,.rules-basics) .ink-money{--ink-color:var(--soft-primary-ink);--ink-fill:var(--soft-primary)}

/* ---------- Rule tabs and card ---------- */
.rules-rule{display:flex;flex-direction:column;gap:8px}
.rules-tabs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface-secondary)}
.rules-tab-indicator{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 4);border-radius:999px;background:var(--board-forest);transform:translateX(calc(var(--tab) * 100%))}
.rules-tabs.is-moving .rules-tab-indicator{animation:rules-tab-slide .42s cubic-bezier(.3,1.25,.5,1) backwards}
@keyframes rules-tab-slide{from{transform:translateX(calc(var(--from) * 100%))}}
.rules-tabs button{position:relative;min-width:0;min-height:40px;padding:8px 4px;border-radius:999px;color:var(--muted);font:500 14px/20px var(--app-font);white-space:nowrap;transition:color .26s var(--ease-standard)}
.rules-tabs button[aria-selected="true"]{color:var(--board-cream);font-weight:600;font-size:15px}
.rules-tabs button:not([aria-selected="true"]):hover{color:var(--ink)}

.rule-hero{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:var(--radius-xl);background:var(--board-forest);box-shadow:0 2px 0 var(--app-shadow);overflow:hidden}
.rule-stage{display:grid}
/* Every rule shares one cell, so the card keeps the tallest rule's height. */
.rule-copy{grid-area:1/1;display:flex;flex-direction:column;gap:16px;min-width:0}
.rule-copy.is-measure{visibility:hidden}
.rule-copy.is-sliding{animation:rule-slide .26s var(--ease-out) backwards}
@keyframes rule-slide{from{opacity:0;transform:translateX(calc(var(--direction) * 48px))}}
.rule-copy-head{display:flex;align-items:center;gap:16px}
.rule-badge{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:var(--radius-card);background:var(--board-detail);color:var(--board-label)}
.rule-badge.is-popping{animation:rule-pop .5s var(--ease-pop) backwards}
@keyframes rule-pop{from{transform:scale(.6) rotate(-18deg)}}
.rule-badge .ui-icon{width:26px;height:26px}
.rule-badge .streak-flame{width:22px;height:26px}
.rule-label{margin:0;font:700 13px/17px var(--app-font);letter-spacing:.8px;text-transform:uppercase;color:var(--board-label)}
.rule-ranks{margin:2px 0 0;font:500 14px/20px var(--app-font);color:var(--board-muted)}
.rule-copy h2{margin:0;font:600 22px/29px var(--app-font);color:var(--board-cream)}
.rule-body{margin:0;font:400 15px/23px var(--app-font);color:var(--board-muted)}
.rule-countdown{display:flex;align-items:center;gap:16px;padding:8px;border-radius:var(--radius-card);background:var(--board-detail)}
.rule-countdown p{display:flex;flex-direction:column;margin:0;min-width:0}
.rule-countdown span{font:500 14px/20px var(--app-font);color:var(--board-cream)}
.rule-countdown small{font:600 12px/16px var(--app-font);color:var(--board-muted)}
.rule-ring{flex:none;width:36px;height:36px;transform:rotate(-90deg)}
.rule-ring circle{fill:none;stroke:var(--board-forest);stroke-width:4}
.rule-ring .rule-ring-fill{stroke:var(--board-orange);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--elapsed))}
.rule-ring.is-sweeping .rule-ring-fill{animation:rule-ring-sweep .84s var(--ease-out) .3s backwards}
@keyframes rule-ring-sweep{from{stroke-dashoffset:1}}

/* ---------- How you move / Try it ---------- */
.lock-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding-top:8px;margin-bottom:8px}
.lock-section-title h2{margin:0;font:600 22px/29px var(--app-font);color:var(--ink)}
.lock-restart{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:8px 12px;border-radius:var(--radius-button);color:var(--orange);font:600 15px/23px var(--app-font)}
.lock-restart:hover{background:var(--soft-primary)}
.lock-restart .ui-icon{width:16px;height:16px}
.lock-map,.lock-sim{padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-glass);box-shadow:var(--shadow-sm)}

.lock-map-step{position:relative}
.lock-map-step::before{content:'';position:absolute;left:17px;top:36px;bottom:0;width:2px;border-radius:2px;background:var(--line)}
.lock-map-step.is-last::before{background:linear-gradient(var(--line),transparent)}
.lock-map.is-entering .lock-map-step{animation:rules-enter .36s var(--ease-out) backwards;animation-delay:calc(var(--step) * 120ms + 180ms)}
.lock-map-place{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px}
.lock-map-dot{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink-fill);border:1px solid color-mix(in srgb,var(--ink-color) 35%,transparent);color:var(--ink-color)}
.lock-map-dot .ui-icon{width:18px;height:18px}
.lock-map-place h3{margin:0;font:600 15px/23px var(--app-font);color:var(--ink)}
.lock-map-place p{margin:2px 0 0;font:500 14px/20px var(--app-font);color:var(--muted)}
.lock-map-moves{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 0 12px 52px}
.lock-move{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--ink-fill);color:var(--ink-color);font:500 14px/20px var(--app-font)}
.lock-move .ui-icon{width:16px;height:16px}
.lock-move-arrow{display:inline-flex;transform:rotate(-90deg)}
.lock-move-arrow.is-forward{transform:rotate(90deg)}

.lock-sim{display:flex;flex-direction:column;gap:16px}
.lock-standing{display:flex;flex-direction:column;gap:16px;padding:16px;border-radius:var(--radius-glass);background:var(--board-forest)}
.lock-standing-top{display:flex;align-items:center;gap:16px}
.lock-standing .lock-flame{width:36px;height:42px}
.lock-standing.is-ember .streak-flame-outer{fill:rgb(255 99 59 / 24%)}
.lock-standing.is-ember .streak-flame-inner{fill:var(--flame)}
.lock-standing.is-out .streak-flame-outer{fill:rgb(255 250 236 / 12%)}
.lock-standing.is-out .streak-flame-inner{fill:rgb(255 250 236 / 18%)}
.lock-streak{flex:1;display:flex;align-items:flex-end;gap:8px;margin:0;min-width:0}
.lock-streak strong{font:600 44px/44px var(--app-font);letter-spacing:-2px;color:var(--board-cream)}
.lock-streak span{padding-bottom:4px;font:500 14px/20px var(--app-font);color:var(--board-muted)}
.lock-day{display:inline-flex;align-items:center;gap:4px;flex:none;padding:4px 10px;border-radius:999px;background:var(--board-detail);color:var(--board-label);font:500 14px/20px var(--app-font)}
.lock-day .ui-icon{width:16px;height:16px}
.lock-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.lock-track li{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:32px;padding:0 4px;border-radius:999px;background:var(--board-detail);color:var(--board-muted);font:600 12px/16px var(--app-font)}
.lock-track span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lock-track .ui-icon{flex:none;width:14px;height:14px}
.lock-track .is-on{background:var(--board-label);color:var(--board-forest)}
.lock-track .on-paused{background:var(--board-cream)}
.lock-track .on-locked{background:var(--board-danger-light)}
.lock-kept{display:flex;align-items:center;gap:4px;margin:0;color:var(--board-label);font:500 14px/20px var(--app-font)}
.lock-kept .ui-icon{width:16px;height:16px}

.lock-products{margin:0;padding:0;list-style:none}
.lock-product{display:flex;align-items:center;gap:16px;padding:10px 0}
.lock-product+.lock-product{border-top:1px solid var(--line)}
.lock-tile{position:relative;flex:none;width:40px;height:40px}
.lock-tile-face{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-icon);background:var(--ink-fill);color:var(--ink-color);font:600 18px/23px var(--app-font)}
.lock-tile .lock-tile-cover{width:40px;height:40px;border-radius:var(--radius-icon)}
.lock-tile-badge{position:absolute;right:-4px;bottom:-4px;z-index:3;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink-color);color:var(--card);box-shadow:0 0 0 1.5px var(--card)}
.lock-tile-badge .ui-icon{width:10px;height:10px;stroke-width:2.6}
.lock-product-copy{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.lock-product-copy strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 15px/23px var(--app-font);color:var(--ink)}
.lock-product-copy>span:not(.spoiler){font:500 14px/20px var(--app-font);color:var(--muted)}
.lock-product .spoiler{position:relative;display:block;width:calc(var(--chars,8) * .56em);max-width:100%;user-select:none;pointer-events:none}
.lock-product .lock-spoiler-name{height:15px;margin:4px 0;font-size:15px;color:var(--ink)}
.lock-product .lock-spoiler-points{height:12px;margin:4px 0;font-size:14px;color:var(--muted)}
.lock-product .action-menu .icon-button{color:var(--muted)}
.lock-empty{display:flex;align-items:center;min-height:48px;margin:0;padding:8px 0;font:500 14px/20px var(--app-font);color:var(--muted)}
.lock-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lock-actions .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:0 12px}
.lock-actions .button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lock-actions .ui-icon{flex:none;width:18px;height:18px}
.lock-result{display:flex;gap:8px;margin:0;padding:10px;border-radius:var(--radius-sm);background:var(--ink-fill);color:var(--ink-color);font:500 14px/20px var(--app-font)}
.lock-result .ui-icon{flex:none;width:18px;height:18px;margin-top:1px}
.lock-result.is-fresh{animation:lock-result-in .26s var(--ease-out) backwards}
@keyframes lock-result-in{from{opacity:0;transform:translateY(25%)}}
.lock-footnote{margin:0;font:600 12px/16px var(--app-font);color:var(--muted)}
.lock-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Scoring basics ---------- */
.scoring-basics-link{display:flex;align-items:center;gap:16px;width:100%;min-height:48px;padding:16px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);color:var(--ink)}
.scoring-basics-link:hover{border-color:color-mix(in srgb,var(--orange) 45%,var(--line))}
.scoring-basics-link>.ui-icon{flex:none;width:24px;height:24px;color:var(--muted)}
.scoring-basics-copy{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.scoring-basics-copy strong{font:600 15px/23px var(--app-font)}
.scoring-basics-copy span{font:500 14px/20px var(--app-font);color:var(--muted)}
.note-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:999px;background:var(--ink-fill);color:var(--ink-color)}
.note-icon .ui-icon{width:20px;height:20px}
.basics-note{display:flex;align-items:flex-start;gap:16px;margin-top:16px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card)}
.basics-note h3{margin:0 0 8px;font:600 18px/23px var(--app-font);color:var(--ink)}
.basics-note p{margin:0;font:400 15px/23px var(--app-font);color:var(--muted)}
.basics-note p+p{margin-top:8px}
.basics-note strong{font-weight:600;color:var(--ink)}

/* Sections rise in one after another on arrival only; a re-render after a tap never replays it. */
.rules-enter{animation:rules-enter .42s var(--ease-out) backwards;animation-delay:calc(var(--enter) * 90ms)}
@keyframes rules-enter{from{opacity:0;transform:translateY(12px)}}

@media(max-width:480px){
  .rule-hero{padding:20px}
  /* Three steps fit a phone's width only as words. */
  .lock-track .ui-icon{display:none}
  .rules-tabs button{font-size:13px}
  .rules-tabs button[aria-selected="true"]{font-size:14px}
}