/* Homepage composition. Shared color and navigation tokens live in site.css. */
.home-ui {
  --page: var(--color-canvas); --surface: var(--color-surface); --ink: var(--color-ink);
  --muted: var(--color-muted); --line: var(--color-line); --soft: var(--color-surface-soft);
  --font: var(--site-font); background: var(--color-canvas); color: var(--color-ink);
  font-size: 16px; line-height: 1.75;
}
.home-ui .site-atmosphere, .home-ui .site-scroll-progress, .home-ui .site-cursor-glow { display: none; }
.home-ui main { overflow: clip; }
.home-ui .section { padding: 0; margin-block: 0 80px; }
.home-ui .hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 48px; padding: 40px 0 32px; min-height: 400px; }
.home-ui .hero h1 { margin: 0 0 20px; font-size: clamp(48px,4.4vw,64px); font-weight: 750; line-height: 1.2; letter-spacing: 0; }
.home-ui .hero-highlight { display: inline; background: linear-gradient(transparent 72%,var(--color-primary) 72%,var(--color-primary) 96%,transparent 96%); }
.home-ui .hero-description { margin: 0; max-width: 34em; font-size: 16px; line-height: 1.75; color: var(--color-text); }
.home-ui .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 12px; }
.home-ui .hero-footnote { color: var(--color-muted); font-size: 12px; margin: 0; }
.home-ui .hero-visual { width: 100%; max-width: 390px; margin: 0; justify-self: center; position: relative; }
.home-ui .play-machine { display: block; width: 100%; height: auto; animation: none; filter: none; transform: none; }
.home-ui .hero-visual figcaption { text-align: center; font-size: 14px; color: var(--color-muted); margin-top: -10px; }
.home-ui .button { min-height: 44px; padding: 12px 20px; border-radius: 12px; font-size: 14px; line-height: 1.5; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-weight: 600; transition: background-color 160ms ease-out,border-color 160ms ease-out; }
.home-ui .button:hover { transform: none; box-shadow: none; }
.home-ui .button-outline:hover { background: var(--color-surface-soft); border-color: var(--color-ink); }
.home-ui .button-outline { border: 1px solid var(--color-control-border); background: transparent; color: var(--color-ink); }
.home-ui .home-primary { background: var(--color-primary); color: #282a25; border: 1px solid transparent; }
.home-ui .button svg, .home-inline-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.home-ui .button:active { transform: translateY(1px); }
.home-paths { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin-bottom: 80px; border-block: 1px solid var(--color-line); }
.home-paths a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 24px 16px; min-width: 0; color: var(--color-ink); }
.home-paths a:first-child { padding-left: 0; }
.home-paths a:last-child { padding-right: 0; }
.home-paths a+ a { border-left: 1px solid var(--color-line); }
.home-paths strong { display: block; font-size: 18px; font-weight: 650; line-height: 1.5; }
.home-paths small { display: block; color: var(--color-muted); font-size: 12px; margin-top: 4px; line-height: 1.5; }
.home-paths svg { width: 20px; height: 20px; flex-shrink: 0; }
.home-ui .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.home-ui .section-heading h2 { font-size: 32px; line-height: 1.35; font-weight: 700; letter-spacing: 0; margin: 0 0 8px; text-wrap: balance; }
.home-ui .section-description { font-size: 16px; line-height: 1.75; color: var(--color-muted); margin: 0; max-width: 42em; }
.home-ui .local-progress { background: none; padding: 0; gap: 12px; flex-shrink: 0; font-size: 12px; color: var(--color-muted); }
.home-ui .local-progress strong { font-size: 20px; line-height: 1.5; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.home-ui .progress-star { display: none; }
.home-ui .world-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.home-ui .world-card { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: start; gap: 16px; border: 0; border-radius: 0; background: none; padding: 24px; box-shadow: none; min-width: 0; }
.home-ui .world-card:nth-child(3n+1) { padding-left: 0; }
.home-ui .world-card:nth-child(-n+3) { border-bottom: 1px solid var(--color-line); }
.home-ui .world-card:not(:nth-child(3n)) { border-right: 1px solid var(--color-line); }
.home-ui .world-art { display: flex; position: static; height: auto; aspect-ratio: auto; background: none; color: var(--color-ink); overflow: visible; }
.home-ui .world-art svg { width: 28px; height: 28px; }
.home-ui .world-card-copy { padding: 0; min-width: 0; }
.home-ui .world-card-copy>small { color: var(--color-muted); font: 400 12px/1.5 var(--site-font); letter-spacing: 0; }
.home-ui .world-card-copy h3 { font-size: 20px; font-weight: 650; margin: 8px 0; line-height: 1.45; }
.home-ui .world-card-copy h3>span { margin-left: 8px; display: inline-flex; vertical-align: middle; }
.home-ui .world-card-copy h3 svg { width: 18px; height: 18px; }
.home-ui .world-card-copy p { color: var(--color-text); font-size: 14px; line-height: 1.75; margin: 0; }
.home-ui .arcade-toolbar { gap: 16px; margin-bottom: 24px; }
.home-ui .filter-list { gap: 8px; flex-wrap: wrap; }
.home-ui .filter { min-height: 44px; font: 500 14px/1.5 var(--site-font); padding: 10px 16px; border-radius: 999px; color: var(--color-ink); }
.home-ui .filter span { font: 400 12px/1.5 var(--site-font); font-variant-numeric: tabular-nums; }
.home-ui .filter.active { background: var(--color-ink); color: var(--color-canvas); }
.home-ui .game-search { min-height: 44px; border-color: var(--color-control-border); background: var(--color-surface); border-radius: 12px; }
.home-ui .game-search:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.home-ui .game-search input { min-width: 0; font-size: 16px; color: var(--color-ink); }
.home-ui .game-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.home-ui .game-card { border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-surface); overflow: hidden; }
.home-ui .game-art { height: 180px; }
.home-ui .game-info { padding: 16px 20px; }
.home-ui .game-info h3 { font: 650 20px/1.45 var(--site-font); margin: 0; }
.home-ui .game-info p { font-size: 14px; line-height: 1.65; color: var(--color-muted); margin: 8px 0; }
.home-ui .game-meta { font-size: 12px; color: var(--color-muted); }
.home-ui .game-badge, .home-ui .new-game-label { font-size: 12px; line-height: 1.5; }
.home-ui .art-caption { display: none; }
.home-games-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.home-games-footer p { color: var(--color-muted); font-size: 14px; margin: 0; }
.home-inline-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--color-link); text-decoration: underline; text-underline-offset: 4px; font-size: 14px; }
.home-ui .empty-search { color: var(--color-muted); font-size: 16px; }
.home-disclosure { border-block: 1px solid var(--color-line); }
.home-disclosure>summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; min-height: 104px; padding: 24px; background: var(--color-surface-soft); border-radius: 16px; margin-block: 16px; }
.home-disclosure>summary::-webkit-details-marker { display: none; }
.home-disclosure>summary>svg { width: 24px; height: 24px; flex-shrink: 0; transition: transform 160ms ease-out; }
.home-disclosure[open]>summary>svg { transform: rotate(180deg); }
.home-disclosure-copy strong { display: block; font-size: 18px; font-weight: 600; line-height: 1.6; }
.home-disclosure-copy>span { display: block; font-size: 14px; color: var(--color-muted); line-height: 1.6; margin-top: 4px; }
.home-disclosure-body { padding: 8px 0 24px; }
.home-ui .world-radio-section { border: 0; padding: 8px 0 24px; margin: 0; background: none; }
.home-ui .world-radio-frame { border-radius: 16px; background: var(--color-surface); width: 100%; }
.home-ui .achievement-account-row { border: 0; background: none; padding: 0; margin: 0 0 24px; gap: 20px; }
.home-ui .achievement-account-row p { font-size: 14px; color: var(--color-muted); line-height: 1.75; }
.home-ui .achievement-summary { font-size: 14px; white-space: nowrap; }
.home-ui .achievement-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.home-ui .achievement { min-width: 0; padding: 20px; border-radius: 16px; background: var(--color-surface); }
.home-ui .achievement h3 { font-size: 16px; line-height: 1.5; }
.home-ui .achievement p { font-size: 14px; line-height: 1.65; color: var(--color-muted); }
.home-ui .achievement:not(.unlocked) { opacity: 1; }
.home-ui .lab-card,.home-ui .toy-card,.home-ui .discovery-card { border-radius: 16px; padding: 24px; min-width: 0; }
.home-ui :is(.lab-card,.toy-card,.discovery-card) h3 { font-size: 22px; line-height: 1.4; }
.home-ui :is(.lab-card,.toy-card,.discovery-card)>p { font-size: 14px; line-height: 1.75; }
.home-ui :is(.lab-description,.journal-local-note,.journal-list p,.garden-state) { font-size: 14px; line-height: 1.75; }
.home-ui :is(.toy-index,.lab-chip,.toy-tag) { font-size: 12px; line-height: 1.5; }
.home-ui .toy-index { display: none; }
.home-ui .small-button,.home-ui .text-button,.home-ui .view-button { min-height: 44px; font-size: 14px; padding: 10px 14px; }
.home-ui :is(.lab-card,.toy-card,.discovery-card) :is(input,textarea,select) { font-size: 16px; }
.home-ui .break-banner { border-block: 1px solid var(--color-line); border-radius: 0; padding: 24px 0; margin-block: 0 64px; background: none; }
.home-ui .break-banner p { font-size: 14px; }
.home-ui .break-banner strong { font-size: 18px; line-height: 1.6; }
.home-ui .banner-star { display: none; }
.home-ui .goodbye { margin-block: 0 48px; padding: 0; gap: 24px; }
.home-ui .goodbye h2 { font-size: 32px; line-height: 1.4; letter-spacing: 0; }
.home-ui .goodbye p { font-size: 14px; line-height: 1.75; }
.home-ui .goodbye-smile small { font-size: 12px; }
.home-ui .footer { flex-wrap: wrap; gap: 24px; font-size: 12px; padding: 24px 0; }
.home-back-top { margin-left: auto; min-height: 44px; display: flex; align-items: center; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.home-ui .dialog-header { padding: 20px 24px; }
.home-ui .dialog-header h2 { font-size: 24px; }
.home-ui .dialog-tools { flex-wrap: wrap; gap: 8px; }
.home-ui .close-game { width: 44px; height: 44px; flex-shrink: 0; }
.home-ui .game-instructions { font-size: 16px; line-height: 1.65; }
.home-ui .game-hint { font-size: 14px; }
.home-ui .game-surface button:not(.memory-card):not(.merge-cell):not(.mine-cell):not(.sudoku-cell):not(.number-button):not(.light-cell):not(.slide-cell) { min-height: 44px; }
/* One active creative workspace, with the other ways to unwind close at hand. */
.home-workbenches { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.home-ui .home-workbenches>.section { width:100%; margin:0; min-width:0; }
.home-workbenches>.section:has(details[open]) { grid-column:1/-1; }
.home-ui .home-workbenches .section-heading { margin-bottom:16px; }
.home-ui .home-workbenches .section-heading h3 { font-size:24px; line-height:1.4; font-weight:650; margin:0 0 8px; }
.home-ui .home-workbenches .section-description { font-size:14px; line-height:1.75; }
.home-workbenches .home-disclosure>summary { min-height:92px; margin-block:12px; padding:20px; }
.home-workbenches .home-disclosure-copy strong { font-size:16px; }
/* Polish: readable control descendants and generous drawing targets. */
.home-ui .world-card-copy>small { display:block; margin:0 0 8px; }
.home-ui .world-card-copy h3 { margin:0 0 4px; }
.home-ui .game-search>span { display:flex; align-items:center; }
.home-ui .game-search svg { width:20px; height:20px; }
.home-ui .lab-heading:empty,.home-ui .toy-heading:empty { display:none; }
.home-ui .local-progress>div>span { font-size:12px; }
.home-ui :is(.lab-card,.toy-card,.discovery-card) small { font-size:12px; }
.home-ui .mood-options small { font-size:14px; }
.home-ui .journal-writing>span { font:400 12px/1.5 var(--site-font); }
.home-ui .pixel-eraser { font-size:14px; line-height:1.5; min-height:44px; padding:8px 12px; }
.home-ui .pixel-editor { flex-direction:column; align-items:center; }
.home-ui .pixel-tools { flex-direction:row; flex-wrap:wrap; align-items:flex-start; width:100%; gap:8px; }
.home-ui .pixel-palette { display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; flex:1; min-width:0; }
.home-ui .pixel-eraser { align-self:flex-start; flex:0 0 auto; height:44px; }
.home-ui .pixel-color,.home-ui .workspace-dialog .pixel-color { width:44px; height:44px; flex-shrink:0; border-radius:8px; }
.home-ui .pixel-editor canvas { width:min(100%,360px); max-width:100%; }
.home-ui .workspace-dialog .pixel-editor canvas { width:min(680px,calc(100dvh - 320px)); max-width:100%; }
.home-ui .workspace-surface:fullscreen .pixel-editor canvas { width:min(760px,calc(100dvh - 300px)); max-width:100%; }
.home-ui :is(#focus-completed,#ambient-state,#piano-caption,#charge-level,#beat-state,.lab-footnote,.journal-local-note) { font-size:14px; line-height:1.65; }
.home-ui .hero-highlight::after { content:none; }
.site-night .home-ui .hero-highlight { background:none; text-decoration:underline; text-decoration-color:var(--color-primary); text-decoration-thickness:.12em; text-underline-offset:.1em; }
@media(hover:hover) {
  .home-ui .home-primary:hover { background: var(--color-primary-hover); }
  .home-paths a:hover { background: var(--color-surface-soft); }
  .home-ui .world-card:hover { transform: none; box-shadow: none; background: var(--color-surface-soft); }
  .home-ui .game-card:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--color-control-border); }
  .home-disclosure>summary:hover { background: var(--color-surface); }
}
@media(max-width:1199px) {
  .home-ui .section { margin-bottom: 64px; }
  .home-ui .hero { gap: 24px; min-height: 360px; }
  .home-ui .hero-visual { max-width: 300px; }
  .home-paths { margin-bottom: 64px; }
  .home-paths a { padding-inline: 12px; }
  .home-paths strong { font-size: 16px; }
  .home-ui .world-card { padding: 20px 16px; gap: 12px; }
  .home-ui .world-card-copy h3 { font-size: 18px; }
  .home-ui .game-grid { gap: 16px; }
  .home-ui .game-art { height: 160px; }
  .home-ui .game-info { padding: 16px; }
  .home-ui .game-info h3 { font-size: 18px; }
  .home-ui .local-progress { display: none; }
}
@media(max-width:899px) {
  .home-ui .world-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-ui .world-card:nth-child(n) { padding: 20px; border-right: 0; border-bottom: 1px solid var(--color-line); }
  .home-ui .world-card:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--color-line); }
  .home-ui .world-card:nth-last-child(-n+2) { border-bottom: 0; }
  .home-ui .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-ui .achievement-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-paths { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-paths a:nth-child(n) { padding: 16px; border: 0; }
  .home-paths a:nth-child(3n+1) { padding-left: 0; }
}
@media(max-width:599px) {
  .home-workbenches { grid-template-columns:1fr; }
  .home-ui .home-workbenches .section-heading h3 { font-size:22px; }
  .home-workbenches .home-disclosure>summary { padding:16px; }
  .home-ui .hero { position: relative; display: block; min-height: auto; padding-block: 32px; }
  .home-ui .hero h1 { font-size: clamp(36px,9.2vw,44px); max-width: 63%; margin-bottom: 24px; }
  .home-ui .hero-visual { position: absolute; width: 144px; right: -4px; top: 20px; margin: 0; }
  .home-ui .hero-visual figcaption { display: none; }
  .home-ui .hero-description { font-size: 16px; }
  .home-ui .hero-actions { margin-top: 24px; gap: 8px; }
  .home-ui .hero-actions .button { padding-inline: 16px; }
  .home-ui .hero-footnote { max-width: 29em; }
  .home-paths { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 48px; }
  .home-paths a:nth-child(n) { padding: 16px 8px; border-bottom: 1px solid var(--color-line); }
  .home-paths a:nth-child(odd) { padding-left: 0; }
  .home-paths a:nth-child(even) { padding-right: 0; padding-left: 12px; }
  .home-paths a:last-child { grid-column: 1/-1; border-bottom: 0; }
  .home-ui .section { margin-bottom: 48px; }
  .home-ui .section-heading { gap: 16px; margin-bottom: 20px; align-items: start; flex-wrap: wrap; }
  .home-ui .section-heading h2 { font-size: 26px; }
  .home-ui .section-description { font-size: 16px; }
  .home-ui .world-grid { grid-template-columns: 1fr; }
  .home-ui .world-card:nth-child(n) { padding: 20px 0; border: 0; border-bottom: 1px solid var(--color-line); gap: 16px; }
  .home-ui .world-card:last-child { border-bottom: 0; }
  .home-ui .world-card-copy h3 { font-size: 18px; margin-block: 4px 8px; }
  .home-ui .world-card-copy p { font-size: 14px; }
  .home-ui .arcade-toolbar { flex-wrap: wrap; }
  .home-ui .game-search { width: 100%; }
  .home-ui .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .home-ui .game-art { height: 150px; }
  .home-ui .game-badge { left: 8px; top: 8px; right: 8px; padding: 3px 5px; width: fit-content; max-width: calc(100% - 16px); }
  .home-ui .game-info { padding: 12px; }
  .home-ui .game-info h3 { font-size: 18px; }
  .home-ui .game-info p { font-size: 14px; margin-bottom: 12px; }
  .home-ui .game-meta { flex-wrap: wrap; gap: 6px; font-size: 12px; }
  .home-games-footer { align-items: start; flex-direction: column; }
  .home-games-footer .button { width: 100%; }
  .home-disclosure>summary { padding: 20px 16px; gap: 16px; }
  .home-disclosure-copy strong { font-size: 18px; }
  .home-ui .achievement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-ui .achievement { padding: 16px; }
  .home-ui :is(.lab-card,.toy-card,.discovery-card) { padding: 20px 16px; }
  .home-ui .achievement-account-row { align-items: start; flex-direction: column; }
  .home-ui .break-banner { gap: 16px; align-items: start; flex-direction: column; margin-bottom: 48px; }
  .home-ui .goodbye { align-items: start; }
  .home-ui .goodbye h2 { font-size: 26px; }
  .home-ui .goodbye-smile { display: flex; width: 64px; height: 64px; flex-shrink: 0; }
  .home-ui .goodbye-smile small { display: none; }
  .home-ui .dialog-header { padding: 16px; align-items: start; flex-direction: column; }
  .home-ui .dialog-tools { width: 100%; }
  .home-ui .dialog-tools .close-game { margin-left: auto; }
  .home-ui .game-dialog { max-height: calc(100dvh - 16px); }
  .home-ui .game-dialog.immersive { max-height: 100dvh; }
}
@media(max-width:375px) {
  .home-ui .hero-visual { width: 122px; right: -6px; top: 28px; }
  .home-ui .game-grid { grid-template-columns: 1fr; }
  .home-ui .game-art { height: 180px; }
}
@media(prefers-reduced-motion:reduce) {
  .home-disclosure>summary>svg { transition: none; }
  .home-ui .game-card:hover { transform: none; }
}