/* The landing page has its own presentation layer; game screens keep their UI. */
#landingField { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#landingField[hidden] { display: none; }
#screen-landing { position: relative; padding-top: 30px; }
#screen-landing::before, #screen-landing > .lbolt { display: none; }
#screen-landing .hero { max-width: 1120px; }
#screen-landing .logo-wrap::before, #screen-landing .logo-wrap::after { content: none; }
#screen-landing .hero-logo { animation: none; font-size: clamp(48px, 6.4vw, 88px); letter-spacing: -3px; text-align: left; }
#screen-landing .hero-logo.glitching { animation: none; }
#screen-landing .hero-bolt { display: none; }
#screen-landing .logo-wrap { margin: 0 0 24px; }
.landing-intro { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 64px; width: 100%; padding: 42px 0 56px; }
.landing-copy { text-align: left; min-width: 0; }
.landing-copy h1 { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -1.6px; color: var(--text); max-width: 12em; }
.landing-copy p { margin-top: 22px; max-width: 34em; font-size: 17px; line-height: 1.65; color: var(--text-mid); text-wrap: pretty; }
.landing-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 28px; }
.landing-play { padding: 15px 24px; border: 1px solid #b0a6ff; border-radius: 10px; background: var(--accent); color: #111025; font: 800 16px var(--font-body); cursor: pointer; box-shadow: 0 4px 0 #4f439a; transition: transform .18s ease, box-shadow .18s ease; }
.landing-play:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #4f439a; }
.landing-play:active { transform: translateY(3px); box-shadow: 0 1px 0 #4f439a; }
.landing-app-link { font-size: 14px; font-weight: 600; color: var(--text-mid); text-underline-offset: 5px; text-decoration-color: #655e88; padding: 12px 0; }
.landing-app-link:hover { color: white; text-decoration-color: var(--accent); }
.landing-note { display: block; margin-top: 17px; font-size: 12px; color: var(--text-dim); }
.match-showcase { margin: 0; min-width: 0; position: relative; width: 100%; max-width: 440px; justify-self: end; }
.match-preview { position: relative; padding: 24px; border: 1px solid #45406d; border-radius: 28px; background: #100f21; box-shadow: 10px 14px 0 #0b0a18, 10px 14px 0 1px #25213e; transform: rotate(3deg); }
.match-preview::before { content: ''; position: absolute; inset: -30px; background: radial-gradient(ellipse, #8b7fff16, transparent 68%); z-index: -1; pointer-events: none; }
.match-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 13px; color: var(--text-mid); }
.match-topline strong { color: #a79cff; font-size: 14px; }
.match-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; position: relative; }
.match-tile { --piece: #8b7fff; display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; color: var(--piece); background: #1e1935; background: color-mix(in srgb, var(--piece) 11%, #11101f); border: 1px solid #544a79; border-color: color-mix(in srgb, var(--piece) 48%, #11101f); position: relative; }
.match-tile svg { width: 42%; height: 42%; fill: currentColor; }
.match-tile.piece-cyan { --piece: #38d9ff; }
.match-tile.piece-gold { --piece: #ffb830; }
.match-tile.piece-pink { --piece: #ff5c8a; }
.match-tile.is-match { background: #8b7fff29; border-color: #a397ff; }
.match-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none; }
.match-path path { fill: none; stroke: #c1b8ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 5; }
.match-showcase figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 30px 6px 0; color: var(--text-dim); font-size: 12px; }
.match-replay, .landing-motion { border: 0; background: none; color: var(--text-mid); font: 600 12px var(--font-body); padding: 10px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.match-replay, .landing-motion { min-height: 44px; }
.match-replay:hover, .landing-motion:hover { color: white; }
.landing-motion:disabled { text-decoration: none; cursor: default; }
.landing-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 26px 0 18px; border-top: 1px solid var(--border); }
.landing-section-heading h2 { font: 700 25px var(--font-display); letter-spacing: -.7px; }
#screen-landing .hero-btns { max-width: none; width: 100%; gap: 16px; }
#screen-landing .mode-card { padding: 24px; background: #111020eb; border-radius: 16px; }
#screen-landing .mode-name { font-size: 25px; letter-spacing: -.5px; text-transform: none; }
#screen-landing .mode-desc { font-size: 14px; line-height: 1.6; max-width: 40em; }
#screen-landing .mode-haste { border-color: #314b48; }
#screen-landing .mode-flux { border-color: #5b3942; }
#screen-landing .daily-card { background: #19152deb; border-color: #655895; animation: none; padding: 24px; }
#screen-landing .daily-card::before, #screen-landing .daily-card::after { display: none; }
#screen-landing .daily-label { text-transform: none; letter-spacing: 0; font-size: 15px; }
#screen-landing .nav-action-card { background: transparent; box-shadow: none; padding: 16px 20px; }
#screen-landing button.nav-action-card { font: inherit; color: inherit; width: 100%; }
#screen-landing .nav-action-grid { margin-top: 0; }
#screen-landing .btn-primary, #screen-landing .mode-play-btn, #screen-landing .levels-map-btn { text-transform: none; font-family: var(--font-body); letter-spacing: 0; }
#screen-landing .btn-primary::after { display: none; }

/* A dedicated app spread: generous type, an actual screen, one clear action. */
#appCta { width: 100%; max-width: 1120px; margin: 76px auto 24px; padding: 62px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; text-align: left; align-items: center; isolation: isolate; overflow: hidden; position: relative; border: 1px solid #534473; border-radius: 30px; background: #211936; scroll-margin-top: 100px; }
#appCta::before { content: ''; position: absolute; width: 540px; height: 540px; border: 1px solid #8971c144; border-radius: 50%; right: -150px; top: 20px; pointer-events: none; z-index: -1; box-shadow: 0 0 0 58px #8971c10b, 0 0 0 116px #8971c108; }
.app-copy { position: relative; z-index: 2; }
.app-platform { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #d3c6ee; margin-bottom: 26px; }
.app-platform img { border-radius: 12px; width: 44px; height: 44px; }
#appCta .app-cta-title { font: 700 clamp(36px, 4.5vw, 60px)/1.02 var(--font-display); letter-spacing: -2px; max-width: 8em; text-wrap: balance; }
#appCta .app-cta-sub { margin: 24px 0 28px; font-size: 16px; line-height: 1.65; max-width: 28em; color: #d3c6ee; }
#appCta .app-store-badge { padding: 12px 21px; border-radius: 12px; box-shadow: none; }
#appCta .asb-apple { width: 29px; height: 34px; }
#appCta .asb-small { font-size: 12px; }
#appCta .asb-big { font-size: 24px; }
.app-availability { color: #bcb0d4; font-size: 12px; margin-top: 16px; }
.app-phone-stage { perspective: 1000px; display: flex; align-items: center; justify-content: center; position: relative; min-width: 0; padding: 16px 10px; }
.app-phone { --phone-turn: -7deg; --phone-rise: 0px; margin: 0; width: min(100%, 254px); padding: 7px; border: 1px solid #aaa3bd; border-radius: 38px; background: #080710; transform: translateY(var(--phone-rise)) rotate(var(--phone-turn)); box-shadow: 18px 26px 38px #05020c66; }
.app-phone img { width: 100%; height: auto; display: block; border-radius: 30px; }
.app-phone figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#screen-landing .site-footer { width: 100%; max-width: 1120px; padding: 22px 0 16px; }
#screen-landing :is(a, button):focus-visible { outline: 3px solid #d7d0ff; outline-offset: 5px; }
#screen-landing .landing-intro [hidden], #screen-landing .landing-section-heading [hidden] { display: none; }
body.landing-motion-paused #screen-landing *, body.landing-motion-paused #screen-landing *::before, body.landing-motion-paused #screen-landing *::after { animation: none !important; transition: none !important; }
body.landing-motion-paused .app-phone { transform: none; }
body.landing-motion-paused .match-replay { display: none; }

@media (min-width: 1024px) {
  #screen-landing .hero-btns { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .landing-intro { gap: 32px; padding: 30px 0 46px; }
  .match-preview { padding: 18px; }
  .match-board { gap: 7px; }
  .match-tile { border-radius: 12px; }
  #appCta { padding: 40px; gap: 24px; }
}
@media (max-width: 700px) {
  #screen-landing { padding: 18px 20px 24px; }
  .landing-intro { grid-template-columns: 1fr; padding: 22px 0 32px; gap: 34px; }
  #screen-landing .hero-logo { font-size: clamp(48px, 14vw, 74px); letter-spacing: -2px; }
  #screen-landing .logo-wrap { margin-bottom: 20px; }
  .landing-copy h1 { font-size: clamp(32px, 8vw, 44px); letter-spacing: -1px; }
  .landing-copy p { font-size: 15px; margin-top: 18px; max-width: 30em; }
  .landing-actions { margin-top: 24px; gap: 12px 20px; }
  .match-showcase { width: min(88%, 350px); justify-self: center; }
  .match-preview { padding: 20px; transform: rotate(2deg); }
  .match-showcase figcaption { font-size: 11px; }
  .landing-section-heading { padding: 22px 0 16px; }
  .landing-section-heading h2 { font-size: 22px; }
  #screen-landing .mode-card, #screen-landing .daily-card { padding: 20px; }
  #appCta { margin-top: 42px; padding: 32px 26px 24px; grid-template-columns: 1fr; gap: 28px; border-radius: 24px; }
  #appCta .app-cta-title { font-size: clamp(38px, 10vw, 56px); max-width: 9em; }
  #appCta .app-cta-sub { font-size: 15px; margin: 20px 0 24px; }
  .app-platform { margin-bottom: 22px; }
  .app-phone { width: 216px; }
  .app-phone-stage { padding: 12px 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-landing *, #screen-landing *::before, #screen-landing *::after { animation: none !important; transition: none !important; }
  .app-phone { transform: none; }
}

/* The preview uses the same glyphs and palette renderer as the live board. */
.match-board { grid-template-columns: repeat(var(--preview-size, 3), minmax(0, 1fr)); gap: clamp(4px, 1vw, 9px); overflow: hidden; border-radius: 14px; }
.match-preview { transform: none; }
.match-tile { min-width: 0; padding: 0; border-width: 2px; border-radius: 18%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: clamp(16px, calc(170px / var(--preview-size, 3)), 48px); font-weight: 600; line-height: 1; cursor: pointer; touch-action: manipulation; }
.match-tile:disabled { cursor: default; opacity: 1; }
.match-tile:not(:disabled):hover { filter: brightness(1.2); }
.match-tile.preview-selected { outline: 2px solid #dad4ff; outline-offset: -4px; box-shadow: inset 0 0 18px #c2b5ff55; }
.match-tile:focus-visible { outline-offset: -5px !important; }
.fp-tut-cell.blast { border-color: #ffcf7c !important; outline: 2px solid #ffcf7c; outline-offset: -4px; box-shadow: inset 0 0 22px #ffaa2e33; }
.app-qr { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid #c8b6e82b; }
.app-qr img { background: white; border-radius: 8px; padding: 3px; }
.app-qr p { font-size: 14px; line-height: 1.7; color: #eee5fc; }
.app-qr span { font-size: 12px; color: #bcb0d4; }
.page-eyebrow { display: block; font: 600 11px var(--font-body); letter-spacing: 2px; color: var(--text-dim); margin-bottom: 18px; }
.theme-sampler { width: 100%; max-width: 1120px; margin: 64px auto 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; padding: 36px 0; border-block: 1px solid var(--border); }
.theme-sampler h2 { font: 700 clamp(26px, 3vw, 38px)/1.12 var(--font-display); letter-spacing: -1px; }
.theme-sampler p { margin-top: 16px; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.theme-samples { display: grid; gap: 4px; }
.theme-samples button { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 20px; padding: 10px 12px; background: transparent; border: 0; border-radius: 8px; text-align: left; color: var(--text); font: 600 15px var(--font-body); cursor: pointer; min-height: 56px; }
.theme-samples button:hover { background: #ffffff07; }
.theme-samples button:disabled { opacity: .5; cursor: wait; }
.theme-swatch { display: block; width: 60px; height: 34px; border-radius: 6px; border: 1px solid #ffffff26; }
body.previewing-theme #screen-landing { visibility: hidden; }
#themeBackdrop { transform: translate(var(--react-dx, 0px), var(--react-dy, 0px)) scale(1.035); }
body.landing-motion-paused #themeBackdrop, .reduce-motion #themeBackdrop { transform: none; }
body.landing-motion-paused #themeBackdrop::after, .reduce-motion #themeBackdrop::after { display: none; }

/* Guidance reads as a short field guide; rankings lead with actual scores. */
#screen-howto, #screen-leaderboard { max-width: 1120px; }
#screen-howto > .screen-body, #screen-leaderboard > .screen-body { background: #0d0c19ed; padding: 36px; border: 1px solid var(--border); border-radius: 0 0 20px 20px; }
.guide-intro, .rankings-intro { padding: 10px 0 34px; border-bottom: 1px solid var(--border); }
.guide-intro h1, .rankings-intro h1 { font: 700 clamp(30px, 4.5vw, 52px)/1.08 var(--font-display); letter-spacing: -1.5px; color: var(--text); }
.guide-intro p, .rankings-intro p { max-width: 36em; font-size: 15px; line-height: 1.65; color: var(--text-mid); margin: 20px 0; }
.guide-intro .landing-play { font-size: 14px; margin-top: 4px; }
#screen-howto .howto-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
#screen-howto .howto-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; padding: 26px 0; align-items: start; }
#screen-howto .step-num { background: none; border: 0; border-radius: 0; padding: 0; font: 500 14px var(--font-body); color: var(--text-dim); width: auto; height: auto; margin-top: 4px; }
#screen-howto .howto-step h3 { font-size: 19px; font-weight: 650; margin-bottom: 10px; }
#screen-howto .howto-step p { line-height: 1.8; font-size: 14px; color: var(--text-mid); }
#screen-howto .demo-launch-btn { min-height: 44px; background: transparent; border-color: var(--border); margin-top: 16px; }
#screen-howto .howto-credits { background: transparent; border: 0; padding: 22px 0 0; }
#screen-leaderboard .rankings-intro { grid-column: 1 / -1; }
#screen-leaderboard .lb-global { margin: 0; min-width: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; align-self: start; }
#screen-leaderboard .lb-global-header { padding: 20px; background: #ffffff03; border-bottom: 1px solid var(--border); }
#screen-leaderboard .lb-global-title { font: 600 18px var(--font-body); letter-spacing: 0; text-transform: none; }
#screen-leaderboard .lb-reload-btn { min-width: 44px; min-height: 44px; }
#screen-leaderboard .lb-sidebar { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
#screen-leaderboard .personal-heading { font-size: 19px; font-weight: 650; }
#screen-leaderboard .lb-tabs { gap: 4px; padding: 4px; background: #ffffff04; border: 1px solid var(--border); border-radius: 10px; }
#screen-leaderboard .lb-tab { padding: 10px 5px; min-height: 44px; font-size: 12px; }
#screen-leaderboard .personal-grid { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#screen-leaderboard .res-stat { padding: 18px 12px; border-radius: 10px; background: #ffffff03; }
#screen-leaderboard .rs-v { font-size: 26px; }
#screen-leaderboard .name-card, #screen-leaderboard .lb-challenge-card { padding: 22px 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
#screen-leaderboard .gt-label { display: block; margin-bottom: 12px; }
#screen-leaderboard .name-input { min-width: 0; }
#screen-leaderboard .lb-challenge-btn, #screen-leaderboard .name-save { min-height: 44px; }
#screen-leaderboard .lb-loading, #screen-leaderboard .lb-empty { padding: 32px 20px; }
#screen-howto :is(button,a):focus-visible, #screen-leaderboard :is(button,input,a):focus-visible { outline: 2px solid #d7d0ff; outline-offset: 4px; }
@media (min-width: 860px) {
  #screen-leaderboard > .screen-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 32px; }
}
@media (max-width: 700px) {
  .theme-sampler { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
  .app-qr { display: none; }
  .match-tile { font-size: clamp(14px, calc(140px / var(--preview-size, 3)), 42px); }
  #screen-howto > .screen-body, #screen-leaderboard > .screen-body { padding: 24px 20px; }
  #screen-howto .howto-steps { grid-template-columns: 1fr; }
  .guide-intro h1, .rankings-intro h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  #themeBackdrop { transform: none; }
  #themeBackdrop::after { display: none; }
}

.match-board { aspect-ratio: 1; }
.match-tile { aspect-ratio: auto; }

.cell, .match-tile, .fp-tut-cell { border-radius: 14%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; }
.match-tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #ffffff0a, transparent 50%); pointer-events: none; }

#themeBackdrop[data-theme="prism"] { transform: none; }

/* Color comes from the pieces: mint for Free Play, amber for Daily, coral for Flux. */
.landing-play { background: #62dfb7; border-color: #a1f3d8; color: #102b25; box-shadow: 0 4px 0 #285c4d; }
.landing-play:hover { box-shadow: 0 6px 0 #285c4d; }
.landing-play:active { box-shadow: 0 1px 0 #285c4d; }
#screen-landing .daily-card .btn-primary { background: #ffd17a; border-color: #ffe1a8; color: #322511; box-shadow: 0 3px 0 #805c2d; }
#screen-landing .mode-flux .mode-play-btn { background: #f58ca7; border-color: #ffb4c7; color: #331a25; }
#screen-landing .mode-haste .mode-play-btn { background: #62dfb7; border-color: #a1f3d8; color: #102b25; }
.match-topline strong { color: #89e6ce; }
.match-board { touch-action: none; }
.match-tile { touch-action: none; -webkit-user-select: none; user-select: none; }
.match-tile.preview-selected { border-color: currentColor !important; outline: 1px solid #ffffff88; outline-offset: -5px; box-shadow: inset 0 0 20px #ffffff14; }
.preview-actions { display: flex; gap: 12px; margin-top: 42px; min-height: 46px; align-items: center; }
.preview-actions[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.preview-start { flex: 1; min-height: 46px; border: 1px solid #ffe1a8; border-radius: 9px; padding: 12px 16px; background: #ffd17a; color: #322511; font: 700 14px var(--font-body); cursor: pointer; }
.preview-start[data-mode='flux'] { background: #f58ca7; border-color: #ffb4c7; color: #331a25; }
.preview-start:disabled { opacity: .45; cursor: default; }
.preview-clear { min-height: 44px; padding: 8px; font: 500 12px var(--font-body); color: var(--text-mid); background: none; border: 0; cursor: pointer; }
.preview-clear:disabled { opacity: .4; cursor: default; }
.match-showcase figcaption { padding-top: 22px; min-height: 76px; }
.match-flight { background: #100f21; box-shadow: 0 16px 48px #00000055; border-radius: 14px; }
.theme-samples button:hover .theme-swatch { transform: translateX(3px); }
.theme-swatch { transition: transform .18s ease; }
#appCta { background: #17262c; border-color: #42626b; }
#appCta .app-platform, #appCta .app-cta-sub { color: #c5dedf; }
#appCta .app-availability, #appCta .app-qr span { color: #a7c4c9; }
#appCta::before { border-color: #75b6c12b; box-shadow: 0 0 0 58px #75b6c109, 0 0 0 116px #75b6c107; }
@media (max-width: 450px) {
  .preview-actions { gap: 5px; }
  .preview-start { font-size: 12px; padding: 10px; }
  .preview-clear { font-size: 11px; }
}

.match-preview { transform: rotate(2.5deg); transition: transform .3s cubic-bezier(.22,.72,.18,1); }
.match-preview.is-selecting { transform: rotate(0); }
@media (hover:hover) and (pointer:fine) { .match-preview:hover { transform: rotate(0); } }
.match-tile.morph-warning { will-change: transform; }
.match-morph-glyph { grid-area: 1 / 1; pointer-events: none; }
.preview-start, .preview-start[data-mode='flux'], #screen-landing .daily-card .btn-primary,
#screen-landing .mode-flux .mode-play-btn { background: #62dfb7; border-color: #a1f3d8; color: #102b25; box-shadow: 0 3px 0 #285c4d; }
#screen-leaderboard .name-save, #screen-leaderboard .lb-challenge-btn:first-child,
.theme-preview-overlay .tp-unlock { background: #62dfb7; border-color: #a1f3d8; color: #102b25; }
@media (prefers-reduced-motion:reduce) { .match-preview { transform:none; transition:none; } }
.reduce-motion .match-preview, .landing-motion-paused .match-preview { transform:none; transition:none; }

.theme-preview-overlay { animation: none; }

.match-board { overflow: visible; border-radius: 0; clip-path: inset(-8px); }

/* Reserve the action row during the demo so the entire hero stays anchored. */
#screen-landing .landing-intro .preview-actions[hidden] {
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.match-board { aspect-ratio: 1; }
.match-preview, .match-preview.is-selecting { transform: none; transition: none; }
@media (hover:hover) and (pointer:fine) {
  .match-preview:hover { transform: none; }
}
body.theme-opening .header,
body.theme-opening #screen-landing,
body.theme-opening #screen-shop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease !important;
}

/* Hide every piece of page chrome together, including sidebars and sticky nav. */
body.theme-opening .header, body.theme-opening .page-layout,
body.previewing-theme .header, body.previewing-theme .page-layout {
  visibility: hidden !important;
  pointer-events: none;
  transition: none !important;
}

/* Compact while watching, expanding as the play controls are revealed. */
.landing-intro { align-items: start; }
.landing-copy { padding-top: 72px; }
.preview-actions { height:56px; min-height:0; margin-top:30px; overflow:hidden; }
#screen-landing .landing-intro .preview-actions[hidden] { height:0; min-height:0; margin-top:0; }
.match-showcase figcaption { padding-top:12px; min-height:56px; }
@media(max-width:700px){.landing-copy{padding-top:0;}}

.hero-logo .wm-l { display:inline-block; text-align:center; }
.landing-copy { padding-top:clamp(28px,4.5vw,64px); }
.landing-intro { column-gap:clamp(32px,4vw,64px); }
.match-showcase figcaption { gap:20px; align-items:baseline; }
@media(max-width:700px){.landing-copy {padding-top:0;}}



.hero-logo .wm-l {position:relative;vertical-align:baseline;}

#screen-landing .hero-logo {white-space:nowrap;}

/* Live Fluctra wordmark spacing; the landing layout stays responsive. */
#screen-landing .hero-logo {letter-spacing:1px;font-size:clamp(52px,10vw,80px);}
#screen-levelmap .lmap-header {padding:24px max(20px,calc((100% - 900px)/2)) 0;}
.lmap-overview {display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;}
.lmap-overview h2 {font:700 clamp(24px,3vw,36px) var(--font-display);margin:8px 0;}
.lmap-overview p {color:var(--text-mid);font-size:13px;line-height:1.6;max-width:510px;}
.lmap-continue {border:1px solid #94ead3;background:#65dcb8;color:#10392f;border-radius:12px;padding:15px 24px;font:700 15px var(--font-body);white-space:nowrap;cursor:pointer;box-shadow:0 4px 0 #367360;}
.lmap-continue:active {transform:translateY(2px);box-shadow:0 2px 0 #367360;}
#screen-levelmap .lmap-grid {max-width:900px;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
#screen-levelmap .lmap-scroll {padding-top:24px;}
#screen-levelmap .lmap-tile {font-family:inherit;min-height:116px;}
#screen-levelmap .lmap-tile.current {animation:none;border-color:#65dcb8;background:linear-gradient(150deg,#173a35,#101624);box-shadow:0 0 0 2px #65dcb82b;}
#screen-levelmap .lmap-tile.current .lmap-lv,#screen-levelmap .lmap-tile.current .lmap-sz {color:#98e9d3;}
#screen-levelmap .lmap-tile.locked {opacity:.52;}
#screen-levelmap .lmap-tile:focus-visible,.lmap-continue:focus-visible {outline:3px solid #a3efdc;outline-offset:4px;}
@media(max-width:700px){#screen-levelmap .lmap-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}.lmap-overview {align-items:start;flex-direction:column;gap:16px;}.lmap-continue {width:100%;}#screen-levelmap .lmap-header {padding:16px 18px 0;}}

.hero-logo .wm-l {vertical-align:baseline;}
.hero-logo .wm-glyph {display:inline-block;line-height:1;vertical-align:baseline;}
#screen-levelmap .lmap-tile.current {animation:lmapGreenPulse 2.4s ease-in-out infinite;}
#screen-levelmap .lmap-now-badge {color:#98e9d3;background:#65dcb820;border-color:#65dcb866;}
@keyframes lmapGreenPulse {0%,100% {box-shadow:0 0 0 2px #65dcb82e,0 4px 20px #65dcb859;}50% {box-shadow:0 0 0 4px #65dcb852,0 6px 36px #65dcb8a6;}}
html.reduce-motion #screen-levelmap .lmap-tile.current {animation:none;}
@media(prefers-reduced-motion:reduce){#screen-levelmap .lmap-tile.current {animation:none;}}

/* The live wordmark owns each glyph's natural advance width. */
#screen-landing .hero-logo {animation:logoFlicker 5s ease-in-out infinite;}
.landing-motion-paused #screen-landing .hero-logo {animation-play-state:paused;}
html.reduce-motion #screen-landing .hero-logo {animation:none;text-shadow:0 0 9px #8b7fff38;}
@media(prefers-reduced-motion:reduce){#screen-landing .hero-logo {animation:none;text-shadow:0 0 9px #8b7fff38;}}

/* Equipped artwork remains visible without washing out landing controls. */
body.has-theme:has(#screen-landing.active):not(.previewing-theme) #themeBackdrop::after {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#08081355,#08081399);}
body.has-theme #screen-landing .nav-action-card {background:#111020ed;}
body.has-theme #screen-landing .theme-sampler {background:#0d0c1bd9;border:1px solid #72689c55;border-radius:20px;padding:28px;}
body.has-theme #screen-landing .theme-samples button {color:#eeeafc;border-bottom-color:#8273aa55;}
@media(max-width:700px){body.has-theme #screen-landing .theme-sampler {padding:20px;}}