/* Shared application surfaces, using the homepage's typography and geometry. */
.app-page { --surface: #fcfbf5; --sage: #e6ebda; --soft-border: #bcc7ad; --page-heading-top: 48px; --page-heading-bottom: 32px; --page-heading-gap: 16px; min-height: 100vh; display: flex; flex-direction: column; }
.app-page > main { flex: 1; width: min(1160px, calc(100% - 112px)); margin: 0 auto; padding-bottom: 55px; min-width: 0; }
.app-page :is(h1, h2, h3, .home-brand) { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.app-page h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.06; letter-spacing: -2px; }
.app-page h2 { font-size: 32px; line-height: 1.15; letter-spacing: -.9px; }
.app-page h3 { font-size: 24px; letter-spacing: -.5px; }
.app-page .eyebrow { font-size: 10px; letter-spacing: 1.8px; font-weight: 500; line-height: 1.6; }
.app-page .small-star { display: none; }
.app-page .intro-copy { font-size: 17px; line-height: 1.7; }
.app-page a { text-underline-offset: 4px; }
.app-page .home-navigation a[aria-current=page] { text-decoration: underline; text-underline-offset: 7px; }
.app-page .button { min-height: 46px; padding: 11px 21px; border: 1px solid var(--ink); border-radius: 5px; font-size: 14px; font-weight: 500; transition: background .15s; }
.app-page .button:hover { filter: none; background: var(--sage); }
.app-page .button.primary { background: var(--ink); color: var(--paper); }
.app-page .button.primary:hover { filter: brightness(1.15); }
.app-page :is(.daily-card, .practice-card, .account-card, .board-frame, .comparison-card) { background: var(--surface); border: 1px solid var(--soft-border); border-radius: 6px; }
.app-page .flash { border-radius: 5px; line-height: 1.6; overflow-wrap: anywhere; }
.journey-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 65px; align-items: center; margin-block: 65px 30px; }
.app-page .journey-grid > :is(.intro, .daily-intro, .page-heading) { margin: 0; padding: 0; text-align: left; }
.app-page .journey-grid h1 { margin: 23px 0; font-size: clamp(45px, 5.3vw, 68px); }
.app-page h1 em { font-style: normal; }
.app-page .journey-grid > :is(.daily-card, .practice-card) { margin: 0; padding: 32px; width: 100%; max-width: none; min-width: 0; }
.app-page .daily-card h2 { margin-top: 22px; overflow-wrap: anywhere; }
.app-page .daily-meta { align-items: flex-start; }
.app-page .daily-meta .eyebrow { margin: 0; max-width: 80%; }
.app-page .beta-label { display: inline-block; flex-shrink: 0; border-color: var(--soft-border); background: var(--sage); }
.app-page .daily-rules { line-height: 1.85; margin-block: 22px; }
.app-page .daily-rules li { margin-bottom: 9px; }
.app-page .daily-start { gap: 14px; }
.app-page .daily-start > span { font-size: 11px; }
.app-page .daily-foot { font-size: 11px; gap: 5px 20px; margin-top: 24px; }
.app-page .daily-streak { display: flex; align-items: center; gap: 22px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.app-page .daily-streak-count { display: flex; align-items: baseline; gap: 7px; flex-shrink: 0; margin: 0; font: 20px/1.1 Georgia, serif; }
.app-page .daily-streak-count strong { font-size: 46px; font-weight: 400; }
.app-page .daily-streak .eyebrow { margin: 0 0 7px; }
.app-page .daily-streak-note { margin: 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.app-page .card-heading { margin-bottom: 12px; }
.app-page .card-heading .eyebrow { margin: 0 0 8px; }
.app-page .card-heading h2 { font-size: 31px; }
.app-page .round-arrow { border: 0; color: var(--muted); padding: 0; }
.app-page .shape-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-page .shape-option { padding: 9px 9px 14px; border-radius: 5px; background: var(--paper); }
.app-page .shape-option img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; margin-bottom: 9px; }
.app-page .shape-option:has(input:checked) { border-color: var(--ink); background: var(--sage); }
.app-page .shape-option small { font-size: 10px; line-height: 1.4; }
.app-page .practice-form .shape-options { grid-template-columns: repeat(4, minmax(144px, 1fr)); gap: 16px; overflow-x: auto; padding: 4px 4px 12px; margin: -4px -4px 0; scroll-snap-type: x proximity; }
.app-page .practice-form .shape-option { padding: 12px 12px 18px; scroll-snap-align: start; scroll-margin-inline: 4px; }
.app-page .practice-form .shape-option strong { font-size: 14px; }
.app-page .practice-form .shape-option small { font-size: 12px; }
.app-page .practice-form .difficulty-options { max-width: 640px; }
.app-page legend { font-size: 11px; }
.app-page legend span { font-size: 14px; }
.app-page .difficulty-options { gap: 12px; }
.app-page .difficulty-options label { flex: 1; padding-block: 5px; }
.app-page .difficulty-options small { font-size: 10px; line-height: 1.5; }
.app-page .start-row { padding-top: 22px; flex-wrap: wrap; }
.app-page .start-row > span { font-size: 11px; }
.app-page .quiet-note { font-size: 13px; padding: 18px 0; line-height: 1.7; }
.app-page .page-heading { margin: 50px 0 30px; max-width: 800px; }
.app-page .page-heading h1 { font-size: 52px; margin: 16px 0; }
.app-page .page-heading > p:not(.eyebrow) { line-height: 1.7; color: var(--muted); }
.app-page .page-heading-standard { margin: var(--page-heading-top) 0 var(--page-heading-bottom); max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.app-page .page-heading-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--page-heading-gap); min-width: 0; max-width: 800px; }
.app-page .page-heading-copy > .eyebrow { margin: 0; }
.app-page .page-heading-copy > h1 { font-size: var(--page-title-size, 52px); line-height: var(--page-title-leading, 1.1); letter-spacing: var(--page-title-tracking, -2px); margin: 0; }
.app-page .page-heading-copy > .page-heading-description { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.app-page .page-heading-actions { flex-shrink: 0; }
.app-page .account-card { max-width: 580px; padding: 36px 40px; margin-block: 55px 0; border-top: 4px solid var(--soft-border); }
.app-page .account-card h1 { font-size: 43px; margin: 17px 0 22px; }
.app-page .account-card p { font-size: 14px; overflow-wrap: anywhere; }
.app-page .account-card label { font-size: 13px; }
.app-page .account-card input:not([type=submit]), .app-page .account-card select { background: var(--paper); border-color: var(--soft-border); border-radius: 5px; padding: 12px; }
.app-page .account-card input[type=submit] { white-space: normal; max-width: 100%; }
.app-page .account-card .button_to { margin-block: 18px; }
.app-page .account-divider { padding-top: 16px; margin-top: 30px; }
.app-page .account-divider h2 { font-size: 28px; }
.app-page .recent { margin-top: 35px; }
.app-page .recent-row { padding: 20px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); margin-bottom: 10px; align-items: center; font-size: 14px; }
.app-page a.recent-row:hover { background: var(--sage); }
.app-page .recent-row small { font-size: 11px; line-height: 1.5; }
.app-page .empty-state { background: var(--sage); padding: 32px; border: 1px solid var(--line); border-radius: 6px; }
.app-page .empty-state p { margin: 0 0 20px; line-height: 1.7; }
.app-page .game { margin-block: 40px; max-width: 820px; }
.app-page .game-heading h1 { font-size: 40px; margin-block: 12px 24px; line-height: 1.15; overflow-wrap: anywhere; }
.app-page .game-toolbar { padding: 18px 0; border-top: 1px solid var(--line); }
.app-page .game-toolbar strong { font-family: Georgia, serif; font-size: 29px; }
.app-page .game-toolbar button, .app-page .secondary-controls button { font-size: 13px; }
.app-page .board-frame { padding: 25px; transition: border-color 160ms ease; }
.app-page .maze-board:focus { outline: none; }
.app-page .board-frame:has(:where(.maze-board:focus)) { border-color: var(--ink); }
.app-page .board-frame.collision { border-color: #b99b89; }
@media (prefers-reduced-motion: reduce) {
  .app-page .board-frame { transition: none; }
}
.app-page .position-status { font-size: 12px; line-height: 1.6; margin-block: 16px; }
.app-page .direction-pad button { background: var(--surface); border-color: var(--soft-border); border-radius: 5px; }
.app-page .direction-pad button:hover:not(:disabled) { background: var(--sage); }
.app-page .pause-cover { background: var(--sage); border-radius: 5px; padding: 20px; text-align: center; }
.app-page .result-card { border: 1px solid var(--soft-border); border-radius: 6px; background: var(--sage); }
.app-page .control-cue { font-size: 12px; line-height: 1.6; }
.app-page .comparison-card p { font-size: 13px; }
.app-page .report-table { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.app-page .report-table caption { padding: 10px 16px; }
.app-page .report-table th { background: var(--sage); }
.app-page .home-header { border-color: var(--line); }
@media (max-width: 1050px) {
  .app-page > main { width: calc(100% - 64px); }
  .journey-grid { gap: 35px; grid-template-columns: .8fr 1.2fr; }
  .app-page .journey-grid > :is(.daily-card, .practice-card) { padding: 25px; }
  .app-page .journey-grid h1 { font-size: 54px; }
}
@media (max-width: 800px) {
  .app-page .page-heading-standard { flex-direction: column; align-items: flex-start; gap: 24px; }
  .app-page .practice-form .shape-options { gap: 12px; }
  .journey-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 35px; }
  .app-page .journey-grid > :is(.intro, .daily-intro) { max-width: 540px; }
  .app-page .journey-grid h1 br { display: none; }
  .app-page .journey-grid h1 { font-size: 48px; }
  .app-page .intro-copy br { display: none; }
}
@media (max-width: 560px) {
  .app-page { --page-heading-top: 32px; --page-title-size: 42px; }
  .app-page .practice-form .shape-option { padding: 8px 8px 14px; }
  .app-page > main { width: calc(100% - 40px); padding-bottom: 35px; }
  .app-page .journey-grid h1 { font-size: 44px; }
  .app-page .journey-grid > :is(.daily-card, .practice-card) { padding: 22px 18px; }
  .app-page .daily-card h2 { font-size: 31px; }
  .app-page .daily-meta .eyebrow { font-size: 9px; }
  .app-page .daily-settings { font-size: 12px; }
  .app-page .intro-copy { font-size: 15px; }
  .app-page .shape-options { gap: 8px; }
  .app-page .shape-option { padding-inline: 5px; }
  .app-page .shape-option small { font-size: 9px; }
  .app-page .difficulty-options { gap: 8px; }
  .app-page .difficulty-options small { font-size: 9px; }
  .app-page .page-heading:not(.page-heading-standard) { margin-top: 35px; }
  .app-page .page-heading h1 { font-size: 42px; }
  .app-page .account-card { padding: 25px 22px; margin-top: 35px; }
  .app-page .account-card h1 { font-size: 37px; }
  .app-page .recent-row { flex-wrap: wrap; gap: 10px; padding: 17px; }
  .app-page .recent-row span { font-size: 12px; line-height: 1.5; }
  .app-page .empty-state { padding: 25px; }
  .app-page .game { margin-top: 30px; }
  .app-page .game-heading { align-items: flex-start; flex-wrap: wrap; gap: 0 18px; }
  .app-page .game-heading h1 { font-size: 32px; margin-bottom: 18px; }
  .app-page .game-heading .text-link { margin-bottom: 16px; }
  .app-page .board-frame { padding: 13px; }
  .app-page .game-toolbar { gap: 8px; }
  .app-page .game-toolbar p { max-width: 110px; overflow-wrap: anywhere; }
  .app-page .game-controls { justify-content: center; }
  .app-page .secondary-controls { flex-wrap: wrap; justify-content: center; }
  .app-page .result-card { padding: 24px 20px; }
  .app-page .result-actions { align-items: stretch; }
}

/* Keep both daily rows on one column grid. */
.app-page .today-layout { grid-template-columns: .85fr 1.15fr; gap: 65px; align-items: start; }
.app-page .world-stats { margin-top: 55px; padding-top: 35px; border-top: 1px solid var(--line); }
.app-page .world-stats-heading { display: flex; justify-content: space-between; align-items: start; gap: 24px; }
.app-page .world-stats-heading .eyebrow { margin-top: 0; }
.app-page .world-stats-heading h2 { margin: 12px 0; }
.app-page .world-stats-heading p:not(.eyebrow), .app-page .world-stats-note { color: var(--muted); font-size: 13px; line-height: 1.7; }
.app-page .world-stats-note { font-size: 11px; }
.app-page .world-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 28px 0 20px; border: 1px solid var(--soft-border); border-radius: 6px; background: var(--surface); }
.app-page .world-stats-grid > div { padding: 25px; }
.app-page .world-stats-grid > div + div { border-left: 1px solid var(--line); }
.app-page .world-stats-grid dt { font-size: 12px; }
.app-page .world-stats-grid dd { margin: 18px 0 10px; font: 25px/1.1 Georgia, serif; letter-spacing: -1px; }
.app-page .world-stats-grid p { margin: 10px 0 0; color: var(--muted); font: 11px/1.7 'DM Sans', sans-serif; letter-spacing: normal; }
@media (max-width: 1050px) {
  .app-page .today-layout { grid-template-columns: .8fr 1.2fr; gap: 35px; }
  .app-page .world-stats-grid > div { padding: 20px; }
}
@media (max-width: 800px) {
  .app-page .today-layout { grid-template-columns: 1fr; gap: 28px; }
  .app-page .world-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-page .world-stats-grid > div:nth-child(3) { border-left: 0; }
  .app-page .world-stats-grid > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .app-page .world-stats-heading { flex-direction: column; gap: 8px; }
  .app-page .world-stats-grid dd { font-size: 20px; }
  .app-page .world-stats-grid > div { padding: 18px; }
}

/* Keep the board and the next useful action in view. */
.app-page .game { --maze-fit-height: clamp(280px, calc(100svh - 350px), 660px); max-width: min(1080px, calc(var(--maze-fit-height) * var(--maze-aspect) + 376px)); margin: 28px 0 40px; }
.app-page .game-heading { align-items: center; margin-bottom: 20px; }
.app-page .game-heading .eyebrow { margin: 0 0 10px; }
.app-page .game-heading h1 { font-size: clamp(28px, 3.3vw, 42px); margin: 0; line-height: 1.12; letter-spacing: -1.4px; }
.maze-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 32px; align-items: start; }
.maze-play-area { min-width: 0; }
.app-page .maze-play-area .board-frame, .board-tools { width: min(100%, calc(var(--maze-fit-height) * var(--maze-aspect) + 34px)); margin-inline: 0; }
.app-page .maze-play-area .board-frame { padding: 16px; border-radius: 8px; }
.app-page .maze-play-area .maze-board { width: 100%; max-width: none; }
.board-tools { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 8px; }
.board-tools p { font-size: 11px; color: var(--muted); margin: 0; }
.board-tools button { border: 0; background: none; color: var(--ink); min-height: 32px; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; flex-shrink: 0; }
.app-page .maze-inputs { padding-bottom: 20px; }
.app-page .maze-inputs .game-controls { justify-content: center; }
.app-page .maze-inputs .control-cue { text-align: center; margin: 10px 0 0; font-size: 11px; }
.app-page .maze-play-area .position-status { font-size: 10px; line-height: 1.5; margin: 10px 0 0; }
.maze-sidebar { min-width: 0; padding-top: 42px; }
.play-panel { border: 1px solid var(--line); border-radius: 8px; padding: 22px; background: var(--surface); }
.play-panel > .eyebrow { margin: 0 0 14px; color: var(--muted); }
.app-page .maze-sidebar .game-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 20px; }
.app-page .maze-sidebar .game-toolbar > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.app-page .maze-sidebar .game-toolbar strong { font: 40px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.app-page .maze-sidebar .game-toolbar span { font-size: 12px; line-height: 1.4; color: var(--muted); margin: 0; }
.app-page .maze-sidebar .game-toolbar .daily-timer { padding: 0; border: 0; align-items: flex-start; }
.app-page .maze-sidebar .game-toolbar .daily-timer strong { font-size: 30px; line-height: 40px; }
.maze-guide { padding: 20px 0 16px; }
.app-page .maze-guide h2 { font-size: 25px; margin: 0 0 8px; }
.maze-guide > p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; }
.app-page .maze-sidebar .secondary-controls { display: grid; grid-template-columns: 1fr; gap: 8px; border: 0; padding: 0; }
.app-page .secondary-controls button { min-height: 44px; border: 1px solid var(--line); border-radius: 5px; text-decoration: none; font-size: 12px; }
.app-page .secondary-controls [data-maze-target="abandonControl"] { grid-column: 1 / -1; border: 0; text-decoration: underline; color: var(--muted); }
.app-page .maze-sidebar .result-card { padding: 24px; margin: 0; border: 1px solid #c9d4bd; border-radius: 8px; background: #edf1e5; }
.app-page .result-card > .eyebrow { margin: 0 0 14px; }
.app-page .result-card h2 { font-size: 32px; line-height: 1.1; margin: 0 0 22px; letter-spacing: -1px; }
.result-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; gap: 18px 8px; padding-block: 18px; border-block: 1px solid #d3ddc9; }
.result-metrics > div { display: flex; flex-direction: column-reverse; gap: 7px; }
.result-metrics dd { font: 30px/1 Georgia, serif; font-variant-numeric: tabular-nums; margin: 0; }
.result-metrics dt { font-size: 10px; line-height: 1.4; color: var(--muted); }
.result-metrics .result-extra dd { color: var(--ink); }
.app-page .result-card .result-note { font-size: 11px; color: var(--muted); line-height: 1.6; margin: 14px 0 20px; }
.app-page .maze-sidebar .result-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
.app-page .maze-sidebar .result-actions form { margin: 0; }
.app-page .maze-sidebar .result-actions .button { width: 100%; font-size: 13px; }
.app-page .result-card .result-account { font-size: 11px; line-height: 1.6; margin: 18px 0 0; }
.app-page .maze-sidebar .comparison-card { padding: 18px; }
.app-page .maze-sidebar .comparison-card h2 { font-size: 25px; }
.game.is-ended .play-panel, .game.is-ended .maze-inputs { display: none; }
.app-page .game .maze-wall { stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-page .game .maze-trail { stroke: #89ad8a; stroke-width: 3.5; opacity: .75; }
.app-page .game .maze-start { fill: #d6e4ca; }
.app-page .game .maze-exit { fill: #e8d6a3; }
.app-page .game .maze-label { fill: #183f32; }
.maze-endpoint-caption { fill: var(--ink); font: bold 3.2px sans-serif; letter-spacing: .15px; text-anchor: middle; dominant-baseline: central; }
.app-page .game .player-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.app-page .game .player-endpoint { stroke: var(--ink); stroke-width: 1.8; }
@media (max-width: 900px) {
  .maze-layout { grid-template-columns: 1fr; gap: 22px; }
  .maze-sidebar { padding-top: 0; }
  .game.is-ended .maze-sidebar { grid-row: 1; }
  .app-page .game { margin: 24px auto 40px; }
  .app-page .maze-play-area .board-frame, .board-tools { margin-inline: auto; }
  .app-page .maze-sidebar .result-card { padding: 22px; }
  .app-page .result-card h2 { font-size: 30px; }
  .app-page .maze-sidebar .result-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-page .maze-sidebar .result-actions > [data-maze-target="continue"] { grid-column: 1 / -1; }
  .app-page .maze-play-area .board-frame { padding: 16px; }
}
@media (max-width: 380px) {
  .app-page .game-heading { gap: 12px; }
  .app-page .game-heading h1 { font-size: 28px; }
  .app-page .maze-sidebar .result-actions { grid-template-columns: 1fr; }
}

/* Ranked daily start gate and persistent elapsed time. */
.app-page .board-frame.is-awaiting-start { overflow: hidden; }
.app-page .is-awaiting-start .maze-board { filter: blur(9px); opacity: .55; pointer-events: none; }
.app-page .daily-start-cover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: rgb(248 247 240 / 58%); backdrop-filter: blur(4px); border-radius: 5px; }
.app-page .daily-start-cover[hidden] { display: none; }
.app-page .daily-start-cover h2 { max-width: 320px; margin: 8px 0 12px; font: 38px/1.12 Georgia, serif; letter-spacing: -.04em; }
.app-page .daily-start-cover > p { margin: 0 0 18px; line-height: 1.6; }
.app-page .daily-start-cover .button { min-height: 48px; padding: 13px 28px; }
.app-page .daily-start-cover .daily-start-status { margin: 12px 0 0; min-height: 1.5em; font-size: 12px; }
.app-page .daily-timer { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.app-page .daily-timer > span { font-size: 14px; color: var(--muted); }
.app-page .daily-timer > strong { font: 32px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .app-page .daily-start-cover { padding: 16px; }
  .app-page .daily-start-cover h2 { font-size: 28px; max-width: 230px; }
  .app-page .daily-start-cover > p { font-size: 13px; margin-bottom: 12px; }
  .app-page .daily-start-cover .eyebrow { font-size: 10px; }
}