.inner-page { padding-top: clamp(26px, 4vw, 52px); }
.inner-heading { margin-bottom: clamp(22px, 3vw, 38px); }
.inner-heading h1 { margin-bottom: 12px; font-size: clamp(36px, 5.5vw, 65px); line-height: 1.05; }
.inner-heading > p { max-width: 58ch; margin: 0; color: var(--subtle); font-size: clamp(15px, 2vw, 19px); }
.inner-play-layout, .library-layout { display: grid; grid-template-columns: minmax(190px, 300px) minmax(0, 1fr); gap: clamp(16px, 4vw, 52px); align-items: start; }
.inner-aside { min-width: 0; }
.run-layout { display: block; max-width: 760px; }
.inner-aside h2, .library-layout h2, .run-trail h2, .rule-sheet h2 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.025em; }
.inner-aside p, .library-layout p, .rule-sheet p { margin: 0 0 12px; color: var(--subtle); font-size: 15px; }
.inner-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 13px; }
.inner-controls label { font-weight: 700; }
.inner-controls select { min-height: 44px; padding-inline: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); color: var(--ink); font: inherit; }

.mode-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; }
.mode-list li { display: flex; min-width: 0; }
.mode-list a { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); text-decoration: none; }
.mode-list a:hover { border-color: #9aafc4; background: #f2f7fc; }
.mode-list strong { font-size: 23px; letter-spacing: -.025em; }
.mode-list a > span:not(.mode-tag):not(.mode-action) { color: var(--subtle); font-size: 14px; }
.mode-list .mode-tag { color: var(--subtle); font: 700 11px/1.3 var(--mono); letter-spacing: .08em; }
.mode-action { margin-top: auto; padding-top: 8px; color: var(--accent); font-size: 14px; font-weight: 700; }
.mode-list a:hover .mode-action { text-decoration: underline; text-underline-offset: 3px; }

.library-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.edition-list { margin: 0; padding: 0; list-style: none; }
.edition-list a { display: flex; justify-content: space-between; gap: 10px; min-height: 46px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; text-decoration: none; }
.edition-list a:hover { background: var(--white); }
.edition-list a > span:last-child { color: var(--accent); font-weight: 700; white-space: nowrap; }
.pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.pack-grid a { display: grid; place-items: center; min-height: 46px; padding-inline: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; }
.pack-grid a:hover { background: var(--wash); }

.guide-nav { flex-wrap: wrap; gap: 5px 14px; margin-bottom: 19px; }
.guide-nav a { padding-block: 7px; color: var(--accent); font-size: 14px; font-weight: 700; }
.rule-sheet { max-width: 700px; }
.rule-sheet section { padding: 17px 0; border-top: 1px solid var(--line); scroll-margin-top: 14px; }

.run-stage h2 strong { color: #f2cf9c; text-transform: uppercase; overflow-wrap: anywhere; }
.run-stage .chain-art { max-width: 560px; margin: 4px auto 0; }
.run-actions, .run-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; margin-top: 12px; }
.run-tools { justify-content: space-between; color: var(--subtle); font-size: 13px; }
.run-actions button { min-height: 46px; }
.run-ends, .run-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.run-ends button { min-width: 0; min-height: 49px; padding: 4px; border: 1px solid #7589a2; border-radius: 7px; color: #f6f9ff; background: #2c3b4f; }
.run-ends button[aria-pressed="true"] { border-color: #d9aa72; background: #40372b; color: #ffe1af; }
.run-ends button:disabled { opacity: .65; }
.run-ends span, .run-ends strong { display: block; overflow-wrap: anywhere; }
.run-ends span { font-size: 11px; text-transform: capitalize; }
.run-ends strong { font-size: 15px; }
.run-choices { margin-top: 13px; }
.run-choices button { min-width: 0; min-height: 46px; padding: 5px; border: 1px solid #b9cadd; border-radius: 7px; background: var(--wash); color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.run-choices button:hover:not(:disabled) { background: #d8e6f3; }
.run-choices .rejected { background: #f7edef; color: #8b3940; text-decoration: line-through; }
.run-message { margin: 4px 0 0; color: var(--subtle); font-size: 14px; }
.run-meta { flex-wrap: wrap; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.run-meta #run-clock { color: var(--accent); }
.run-result .end-score { margin: 8px 0; }
.run-result .run-example { margin-top: 8px; }
.run-example strong { color: #f2cf9c; }
.run-trail { margin-top: 15px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.run-trail h2 { font-size: 16px; }
.run-trail ol { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding-inline-start: 19px; color: var(--subtle); font-size: 13px; }

@media (max-width: 740px) {
  .inner-play-layout, .library-layout, .mode-list { grid-template-columns: minmax(0, 1fr); }
  .mode-list a { padding: 13px 15px; }
  .mode-list strong { font-size: 20px; }
}

@media (max-width: 440px) {
  .puzzle-page { padding-top: 14px; }
  .puzzle-page .inner-heading { margin-bottom: 8px; }
  .puzzle-page .inner-heading h1 { margin: 0; font-size: 28px; }
  .puzzle-page .inner-heading > p, .puzzle-page .inner-aside > p { display: none; }
  .puzzle-page .inner-play-layout { gap: 8px; }
  .puzzle-page .inner-controls { margin: 0; }
}