.platform { margin: 0; font-weight: 600; }
.platform h1,.platform h2,.platform h3,.platform p { margin: 0; }
.platform button,.platform a,.platform input { -webkit-tap-highlight-color: transparent; }
.platform button { cursor: pointer; }
.platform button,.platform input,.platform select { color: var(--ls-color-ink); }
.platform button { font: inherit; }
.platform .ls-button,.platform .ls-icon-button { box-shadow: none; border: 0; }
.platform .ls-button { border-radius: var(--ls-radius-control); padding-inline: 28px; }
.platform .ls-button--quiet { background: transparent; }
.platform .ls-button--secondary { background: var(--ls-color-white); border: 2px solid var(--ls-color-ink); }
.platform .ls-icon-button { background: transparent; border: 1px solid rgb(36 62 59 / 18%); }
.platform .ls-button:hover,.platform .ls-icon-button:hover { transform: none; }
.platform .ls-button:hover { box-shadow: inset 0 0 0 2px currentColor; }
.platform .ls-button:active,.platform .ls-icon-button:active { transform: translateY(1px); }
.platform .ls-button { color: var(--ls-color-paper); }
.platform .ls-button--quiet,.platform .ls-button--secondary { color: var(--ls-color-ink); }
.icon { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; }
.page-shell { max-width: var(--ls-content-max); margin: auto; padding: 0 32px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 124px; }
.wordmark { font: 800 37px/1 var(--ls-font-display); color: var(--ls-color-action); letter-spacing: -1.5px; text-decoration: none; white-space: nowrap; }
.wordmark span { font-weight: 500; font-size: 25px; letter-spacing: -1px; }
.brand-link { display: inline-flex; align-items: center; min-height: 64px; }
.child-nav { display: flex; gap: 12px; align-items: center; }
.nav-link { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 64px; min-width: 64px; padding: 12px 18px; border-radius: 20px; color: var(--ls-color-ink) !important; text-decoration: none; font-size: 17px; font-weight: 800; }
.nav-link[aria-current="page"] { background: var(--ls-color-mint-soft); }
.nav-link:hover { background: var(--ls-color-white); }
.nav-link[aria-current="page"]:hover { background: var(--ls-color-mint-soft); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.profile-switch { border: 1px solid rgb(36 62 59 / 18%); background: transparent; border-radius: 999px; padding: 4px; min-width: 64px; min-height: 64px; }
.profile-switch img { display: block; width: 54px; height: 54px; }
.hero { min-height: 372px; background: var(--ls-color-mint-soft); border-radius: 40px; display: grid; grid-template-columns: 1.12fr 1fr; position: relative; overflow: hidden; }
.hero-copy { padding: 43px 0 43px 48px; position: relative; z-index: 2; align-self: center; }
.hero h1 { font: 700 clamp(40px,4.6vw,62px)/1.02 var(--ls-font-display); letter-spacing: -1.4px; max-width: 530px; }
.hero-copy > p { font-size: 19px; line-height: 1.6; margin: 18px 0 25px; max-width: 340px; }
.hero-art { position: relative; display: grid; place-items: center; min-width: 0; }
.hero-art::before { content: ''; position: absolute; width: 306px; height: 306px; border-radius: 50%; background: var(--ls-color-paper); top: 32px; right: 44px; }
.hero-art .ls-character { position: relative; z-index: 1; width: 365px; max-width: 100%; margin: 10px 0 0 -8px; }
.hero-art .scene-object { position: absolute; z-index: 2; width: 68px; height: 68px; }
.hero-art .scene-object.one { top: 31px; right: 40px; transform: rotate(12deg); }
.hero-art .scene-object.two { bottom: 22px; left: 25px; width: 74px; height: 74px; transform: rotate(-12deg); }
.scene-label { position: absolute; bottom: 24px; right: 32px; z-index: 3; font-size: 15px; background: var(--ls-color-white); padding: 9px 15px; border-radius: 999px; }
.level-strip { margin: 24px 0 44px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0 8px; }
.level-info { display: flex; gap: 14px; align-items: center; }
.level-info > img { width: 52px; height: 52px; }
.level-info strong { display: block; font-weight: 800; }
.level-info small { display: block; font-size: 15px; }
.small-path { display: flex; gap: 8px; align-items: center; }
.small-path span { height: 7px; width: 30px; border-radius: 5px; background: rgb(36 62 59 / 14%); }
.small-path span.active { background: var(--ls-color-action); }
.quiet-link { display: inline-flex; align-items: center; gap: 12px; min-height: 64px; min-width: 64px; color: var(--ls-color-ink) !important; font-weight: 800; text-decoration: none; background: transparent; border: 0; padding: 12px; border-radius: 16px; }
.quiet-link:hover { background: var(--ls-color-white); }
.section-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 23px; }
.section-top h2,.page-title { font: 700 36px/1.15 var(--ls-font-display); letter-spacing: -.6px; }
.section-note { font-size: 16px; color: var(--ls-color-navy); }
.filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.filter { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 64px; min-width: 90px; border: 1px solid rgb(36 62 59 / 18%); padding: 12px 24px; border-radius: 999px; background: transparent; font-weight: 800 !important; font-size: 17px !important; }
.filter[aria-pressed="true"] { background: var(--ls-color-ink); color: var(--ls-color-paper); border-color: var(--ls-color-ink); }
.filter:hover { box-shadow: inset 0 0 0 1px var(--ls-color-ink); }
.filter[aria-pressed="true"] img { background: var(--ls-color-paper); border-radius: 8px; padding: 2px; }
.game-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.game-card { text-align: left; padding: 0; border: 0; border-radius: 28px; overflow: hidden; color: var(--ls-color-ink); background: var(--ls-color-white); transition: box-shadow 150ms; }
.game-card:hover { box-shadow: 0 0 0 2px var(--ls-color-action); }
.game-cover { height: 180px; display: flex; align-items: center; justify-content: center; position: relative; isolation: isolate; }
.game-cover::before { content: ''; position: absolute; z-index: -1; width: 130px; height: 130px; border-radius: 50%; background: rgb(255 255 255 / 45%); }
.game-cover[data-category="lire"] { background: var(--ls-color-sky-soft); }
.game-cover[data-category="compter"] { background: var(--ls-color-sun-soft); }
.game-cover[data-category="observer"] { background: var(--ls-color-coral-soft); }
.game-cover img { width: 112px; height: 112px; object-fit: contain; }
.game-cover img + img { width: 88px; height: 88px; margin: 35px 0 0 -5px; transform: rotate(10deg); }
.cover-letter { font: 800 74px/1 var(--ls-font-reading); display: flex; align-items: center; justify-content: center; width: 105px; height: 118px; background: var(--ls-color-white); border-radius: 16px; transform: rotate(-8deg); }
.cover-letter + .cover-letter { background: var(--ls-color-sun); transform: rotate(9deg); margin: 25px 0 0 -12px; font-size: 63px; }
.game-body { display: block; padding: 21px 24px 23px; }
.game-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 7px; font-size: 14px; }
.game-meta .availability { display: flex; gap: 6px; align-items: center; }
.availability::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.game-body strong { display: block; font: 700 25px/1.15 var(--ls-font-display); }
.game-body > span:last-child { display: block; font-size: 16px; margin-top: 7px; }
.preparation-note { display: flex; align-items: center; gap: 12px; margin-top: 24px !important; font-size: 16px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 55px; padding: 25px 0 30px; border-top: 1px solid rgb(36 62 59 / 16%); gap: 24px; font-size: 16px; }
.site-footer .quiet-link { font-size: 16px; }
.page-intro { padding: 20px 0 35px; display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.page-intro h1 { font: 700 clamp(38px,5vw,54px)/1.1 var(--ls-font-display); letter-spacing: -.9px; }
.page-intro p { margin-top: 12px; max-width: 650px; }
.journey-board { background: var(--ls-color-mint-soft); border-radius: 40px; padding: 48px; }
.journey-current { display: flex; gap: 24px; align-items: center; }
.journey-current > img { width: 110px; height: 110px; }
.journey-current h2 { font: 700 36px/1.15 var(--ls-font-display); }
.journey-current p { margin-top: 10px; }
.journey-stages { display: grid; grid-template-columns: repeat(4,1fr); list-style: none; padding: 0; margin: 48px 0 0; gap: 24px; }
.journey-stages li { text-align: center; position: relative; }
.journey-stages li::before { content: ''; position: absolute; top: 49px; left: 50%; width: calc(100% + 24px); border-top: 3px dashed rgb(36 62 59 / 25%); }
.journey-stages li:last-child::before { content: none; }
.stage-medal { position: relative; margin: 0 auto 14px; display: grid; place-items: center; width: 102px; height: 102px; border: 2px solid rgb(36 62 59 / 25%); border-radius: 50%; background: var(--ls-color-paper); }
.stage-medal img { width: 70px; height: 70px; }
.journey-stages [aria-current="step"] .stage-medal { border: 3px solid var(--ls-color-action); outline: 6px solid var(--ls-color-paper); }
.journey-stages strong { display: block; font-size: 17px; }
.journey-stages small { font-size: 15px; }
.empty-panel { display: flex; align-items: center; gap: 26px; padding: 32px 0; }
.empty-panel > img { width: 90px; height: 90px; }
.empty-panel h2 { font: 700 29px/1.15 var(--ls-font-display); }
.empty-panel p { margin-top: 8px; max-width: 640px; }
.discovery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.discovery-card { display: flex; align-items: center; gap: 20px; padding: 24px; background: var(--ls-color-white); border-radius: 28px; }
.discovery-card > img { width: 80px; height: 80px; }
.discovery-card h2 { font-size: 20px; line-height: 1.4; }
.discovery-card p { font-size: 16px; margin-top: 6px; }
.adult { font-size: 16px; }
.adult .page-intro { padding-top: 24px; }
.adult .page-intro p { font-size: 18px; }
.adult-profile-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.adult-prototype { display: flex; align-items: start; gap: 24px; padding: 28px; margin-bottom: 32px; background: var(--ls-color-mint-soft); border-radius: var(--ls-radius-card); }
.adult-prototype > div:first-child { flex: 0 0 88px; }
.adult-prototype h2 { font: 700 30px/1.2 var(--ls-font-display); margin-bottom: 12px; }
.adult-prototype p + p { margin-top: 12px; }
.profile-chip { display: flex; align-items: center; gap: 10px; border: 1px solid rgb(36 62 59 / 25%); border-radius: 20px; background: transparent; min-height: 64px; padding: 8px 20px 8px 10px; }
.profile-chip img { width: 42px; height: 42px; }
.profile-chip[aria-pressed="true"] { border: 2px solid var(--ls-color-action); background: var(--ls-color-mint-soft); }
.overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-bottom: 32px; }
.metric { background: var(--ls-color-white); border-radius: 24px; padding: 24px 28px; }
.metric strong { display: block; font: 700 45px/1.1 var(--ls-font-display); }
.metric span { display: block; margin-top: 5px; }
.metric small { display: block; margin-top: 7px; font-size: 14px; }
.insights { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; }
.insight { background: var(--ls-color-mint-soft); padding: 28px; border-radius: 24px; }
.insight.support { background: var(--ls-color-sky-soft); }
.insight h2 { display: flex; gap: 12px; align-items: center; font-size: 21px; margin-bottom: 12px; }
.insight p { line-height: 1.6; }
.insight p + p { margin-top: 10px; }
.insight ul { padding-left: 20px; line-height: 1.8; }
.concept-table { background: var(--ls-color-white); border-radius: 24px; padding: 8px 28px; }
.concept-row + .concept-row { border-top: 1px solid rgb(36 62 59 / 14%); }
.concept-row summary { display: grid; grid-template-columns: minmax(0,1.5fr) 180px 110px 28px; align-items: center; gap: 18px; min-height: 88px; padding: 12px 0; cursor: pointer; list-style: none; }
.concept-row summary::-webkit-details-marker { display: none; }
.concept-row summary::after { content: '+'; font-size: 26px; text-align: center; }
.concept-row[open] summary::after { content: '−'; }
.concept-row summary strong { font-size: 17px; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; font-size: 14px; border: 1px solid rgb(36 62 59 / 20%); border-radius: 999px; padding: 7px 12px; }
.status-pill[data-status="acquired"],.status-pill[data-status="validated"] { background: var(--ls-color-mint-soft); }
.status-pill[data-status="practicing"] { background: var(--ls-color-sun-soft); }
.status-pill[data-status="discovered"] { background: var(--ls-color-sky-soft); }
.concept-evidence { border-top: 1px dashed rgb(36 62 59 / 20%); padding: 20px 0 24px; }
.concept-evidence p { margin-bottom: 10px; max-width: 780px; }
.concept-evidence ul { padding-left: 22px; line-height: 1.8; }
.adult-tools { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.adult-tools .ls-button { font-size: 16px; }
.adult-explainer { margin-top: 30px; padding: 28px; border: 1px solid rgb(36 62 59 / 20%); border-radius: 24px; }
.adult-explainer h2 { font-size: 21px; margin-bottom: 10px; }
.adult-explainer p + p { margin-top: 12px; }
.preview-banner,.storage-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; margin-bottom: 24px; border-radius: 20px; background: var(--ls-color-sun-soft); font-size: 16px; }
.preview-banner button { background: transparent; border: 1px solid var(--ls-color-ink); border-radius: 16px; padding: 12px 16px; min-height: 64px; flex-shrink: 0; }
.loading-shell { max-width: 900px; margin: 90px auto; padding: 32px; }
.loading-shell p { margin: 24px 0; }
.skip-link { position: absolute; top: -100px; left: 20px; background: white; padding: 20px; z-index: 100; }
.skip-link:focus { top: 16px; }
.platform dialog { color: var(--ls-color-ink); background: var(--ls-color-paper); border: 0; border-radius: 32px; width: min(620px,calc(100% - 32px)); padding: 32px; max-height: calc(100dvh - 40px); overflow-y: auto; box-shadow: 0 20px 100px rgb(36 62 59 / 20%); }
.platform dialog::backdrop { background: rgb(36 62 59 / 35%); backdrop-filter: blur(5px); }
.dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.dialog-header h2 { font: 700 34px/1.15 var(--ls-font-display); align-self: center; }
.dialog-header .ls-icon-button { flex: 0 0 64px; }
.dialog-copy { font-size: 18px; line-height: 1.6; margin-bottom: 24px !important; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.dialog-actions .ls-button { flex: 1 1 auto; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.profile-card { border: 2px solid transparent; background: var(--ls-color-white); border-radius: 24px; padding: 20px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 22px !important; overflow-wrap: anywhere; }
.profile-card img { width: 90px; height: 90px; }
.profile-card.selected { border-color: var(--ls-color-action); }
.field-label { display: block; font-weight: 800; margin: 20px 0 12px; }
.name-input { width: 100%; min-height: 64px; border: 2px solid var(--ls-color-ink); border-radius: 16px; background: var(--ls-color-white); padding: 12px 16px; }
.avatar-picker { display: flex; gap: 12px; flex-wrap: wrap; }
.avatar-option { width: 80px; height: 80px; border-radius: 20px; border: 2px solid transparent; background: var(--ls-color-white); padding: 5px; }
.avatar-option[aria-pressed="true"] { border-color: var(--ls-color-action); background: var(--ls-color-mint-soft); }
.avatar-option img { width: 64px; height: 64px; }
.form-error { margin-top: 16px !important; padding: 12px; background: var(--ls-color-sun-soft); border-radius: 12px; }
.game-dialog-cover { border-radius: 24px; margin-bottom: 24px; }
.level-list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.level-list li { display: flex; align-items: center; gap: 18px; padding: 14px; background: var(--ls-color-white); border-radius: 18px; }
.level-list img { width: 54px; height: 54px; }
.level-list strong { display: block; font-size: 19px; }
.level-list p { font-size: 15px; margin-top: 3px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: min(560px,calc(100% - 32px)); width: max-content; padding: 18px 24px; border-radius: 20px; background: var(--ls-color-ink); color: var(--ls-color-paper); z-index: 200; font-size: 16px; box-shadow: 0 4px 20px rgb(36 62 59 / 20%); }
@media (max-width: 1100px) {
  .site-header { gap: 16px; }
  .nav-link { padding-inline: 12px; font-size: 16px; }
  .wordmark { font-size: 32px; }
  .wordmark span { font-size: 22px; }
  .hero-copy { padding-left: 36px; }
  .hero-art::before { right: 20px; width: 270px; height: 270px; top: 50px; }
}
@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; padding: 22px 0; row-gap: 16px; }
  .child-nav { order: 3; flex: 1 0 100%; justify-content: center; }
  .nav-link { flex: 1; font-size: 17px; }
  .hero { min-height: 340px; }
  .hero h1 { font-size: 45px; }
  .hero-copy { padding: 32px 0 32px 32px; }
  .hero-art .ls-character { width: 320px; }
  .hero-art::before { width: 230px; height: 230px; }
  .scene-label { right: 18px; bottom: 24px; }
  .hero-art .scene-object.one { right: 10px; }
  .hero-art .scene-object.two { left: 0; }
  .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .journey-board { padding: 32px; }
  .journey-stages { gap: 16px; }
  .concept-row summary { grid-template-columns: minmax(0,1fr) 155px 28px; gap: 12px; }
  .concept-row summary > .session-count { display: none; }
}
@media (max-width: 600px) {
  .adult-prototype { display: block; padding: 24px; }
  .adult-prototype > div:first-child { display: none; }
  .page-shell { padding-inline: max(20px,env(safe-area-inset-left)); }
  .site-header { padding-top: 16px; }
  .wordmark { font-size: 34px; }
  .header-actions { gap: 12px; }
  .nav-link { flex-direction: column; gap: 5px; padding: 10px 4px; font-size: 13px; line-height: 1.2; min-height: 76px; text-align: center; }
  .child-nav { gap: 12px; }
  .nav-link .icon { width: 25px; height: 25px; }
  .hero { grid-template-columns: 1fr; border-radius: 28px; }
  .hero-copy { padding: 30px 28px 0; }
  .hero h1 { font-size: 44px; }
  .hero-copy > p { margin: 13px 0 20px; font-size: 18px; }
  .hero-art { height: 230px; justify-content: end; padding-right: 20px; }
  .hero-art::before { width: 194px; height: 194px; top: 22px; right: 35px; }
  .hero-art .ls-character { width: 240px; margin: -12px 0 0; }
  .hero-art .scene-object.one { top: 22px; right: 25px; width: 52px; height: 52px; }
  .hero-art .scene-object.two { left: 24px; bottom: 55px; width: 62px; height: 62px; }
  .scene-label { bottom: 18px; right: auto; left: 23px; font-size: 14px; }
  .level-strip { margin: 20px 0 30px; padding: 0; gap: 12px; }
  .level-info { gap: 8px; }
  .level-info strong { font-size: 16px; }
  .level-info small { font-size: 13px; }
  .level-info > img { width: 42px; height: 42px; }
  .level-strip .quiet-link { font-size: 14px; padding-inline: 4px; gap: 4px; }
  .small-path { display: none; }
  .section-top { align-items: start; margin-bottom: 20px; gap: 12px; }
  .section-top h2 { font-size: 31px; }
  .section-note { font-size: 14px; max-width: 130px; text-align: right; padding-top: 6px; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .filter { padding-inline: 14px; font-size: 16px !important; }
  .game-grid,.discovery-grid,.insights { grid-template-columns: 1fr; gap: 20px; }
  .game-cover { height: 180px; }
  .game-body { padding: 20px 24px 24px; }
  .site-footer { flex-direction: column; gap: 8px; text-align: center; margin-top: 32px; }
  .site-footer > p { font-size: 14px; }
  .page-intro { flex-direction: column; padding-top: 10px; gap: 16px; }
  .page-intro h1 { font-size: 40px; }
  .journey-board { padding: 26px 20px; border-radius: 28px; }
  .journey-current { flex-direction: column; gap: 14px; text-align: center; }
  .journey-current h2 { font-size: 30px; }
  .journey-stages { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .journey-stages li::before { content: none; }
  .journey-stages strong { font-size: 15px; }
  .empty-panel { flex-direction: column; text-align: center; }
  .discovery-card { padding: 20px; gap: 14px; }
  .discovery-card > img { width: 64px; height: 64px; }
  .discovery-card h2 { font-size: 18px; }
  .overview { gap: 12px; grid-template-columns: 1fr; }
  .metric { display: grid; grid-template-columns: 70px 1fr; padding: 20px; }
  .metric strong { grid-row: span 2; font-size: 42px; }
  .metric small { margin-top: 2px; }
  .concept-table { padding-inline: 20px; }
  .concept-row summary { grid-template-columns: 1fr 24px; row-gap: 10px; padding: 20px 0; }
  .concept-row summary strong { grid-column: 1; }
  .concept-row summary .status-pill { grid-column: 1; }
  .concept-row summary::after { grid-column: 2; grid-row: 1 / span 2; }
  .preview-banner,.storage-banner { flex-direction: column; align-items: stretch; padding: 20px; }
  .platform dialog { padding: 24px; border-radius: 28px; }
  .dialog-header { gap: 12px; }
  .dialog-header h2 { font-size: 29px; }
  .avatar-picker { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
  .avatar-option { width: 100%; min-width: 0; height: 64px; padding: 2px; }
  .avatar-option img { width: 54px; height: 54px; }
}
@media (max-width: 360px) {
  .page-shell { padding-inline: 12px; }
  .platform dialog { padding: 20px; width: calc(100% - 16px); }
  .avatar-picker { grid-template-columns: repeat(2,1fr); }
  .wordmark { font-size: 30px; }
  .wordmark span { font-size: 20px; }
  .hero-copy { padding-inline: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: dialog-in 180ms ease-out; }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (forced-colors: active) {
  .nav-link,.filter,.game-card,.profile-card,.profile-chip { border: 2px solid ButtonText; }
  .nav-link[aria-current],.filter[aria-pressed="true"] { outline: 3px solid Highlight; }
}

.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.hero-actions .ls-icon-button { background: var(--ls-color-paper); border: 0; }
.evidence-version { font-size: 14px; }
.hero h1,.page-intro h1 { overflow-wrap: anywhere; }
.game-cover[data-image-unavailable="true"]::after { content: 'Image à retrouver'; font-size: 16px; position: absolute; bottom: 12px; }

/* Application shell: the screen is the workspace, with stable navigation. */
html,body.platform { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
#app { height: 100%; }
.app-frame { width: 100%; height: 100dvh; display: grid; grid-template-columns: 112px minmax(0,1fr); grid-template-rows: 96px minmax(0,1fr); padding-top: env(safe-area-inset-top); background: var(--ls-color-paper); }
.site-header { grid-column: 1 / -1; grid-row: 1; min-height: 0; padding: 12px 32px; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgb(36 62 59 / 10%); }
.brand-link { min-height: 64px; }
.wordmark { font-size: 36px; }
.wordmark span { font-size: 25px; }
.header-actions { gap: 12px; }
.profile-switch { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 20px 4px 5px; min-height: 64px; max-width: min(45%,400px); border: 0; background: var(--ls-color-white); font-weight: 800 !important; }
.profile-switch img { flex-shrink: 0; }
.profile-switch span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.child-nav { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 16px; padding: 24px 12px max(20px,env(safe-area-inset-bottom)); border-right: 1px solid rgb(36 62 59 / 10%); }
.nav-link { display: flex; flex: 0 0 auto; flex-direction: column; gap: 7px; min-height: 94px; padding: 14px 4px; border-radius: 24px; font-size: 13px; line-height: 1.2; text-align: center; }
.nav-link .icon { width: 36px; height: 36px; }
.adult-entry { margin-top: auto; border: 0; background: transparent; min-height: 80px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12px !important; }
.adult-entry:hover { background: var(--ls-color-white); }
.adult-entry .icon { width: 26px; height: 26px; }
#main { grid-column: 2; grid-row: 2; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 24px 32px max(24px,env(safe-area-inset-bottom)); overscroll-behavior: contain; scroll-padding: 24px; }
#main:focus { outline: none; box-shadow: none; }
.play-library { display: flex; flex-direction: column; gap: 20px; height: 100%; min-height: 490px; }
.play-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex: 0 0 64px; }
.play-heading h1 { font: 700 clamp(32px,3.3vw,44px)/1.1 var(--ls-font-display); letter-spacing: -.6px; }
.play-heading .ls-icon-button { border: 0; background: var(--ls-color-white); }
.game-grid { flex: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 20px; min-height: 0; }
.game-card { display: flex; flex-direction: column; height: 100%; min-height: 180px; border: 2px solid rgb(36 62 59 / 8%); border-radius: 28px; }
.game-card:hover { box-shadow: none; border-color: var(--ls-color-action); }
.game-cover { flex: 1; min-height: 110px; height: auto; width: 100%; overflow: hidden; }
.game-cover::before { width: 130px; height: 130px; }
.game-cover img { width: clamp(90px,9vw,158px); height: clamp(90px,9vw,158px); }
.game-cover img + img { width: clamp(76px,7.5vw,124px); height: clamp(76px,7.5vw,124px); }
.game-body { display: flex; flex: 0 0 72px; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; }
.game-body strong { font: 700 clamp(20px,1.9vw,27px)/1.1 var(--ls-font-display); }
.game-body > span:last-child { display: block; margin: 0; font-size: 13px; flex-shrink: 0; }
.availability::before { display: none; }
.cover-letter { width: 96px; height: 108px; font-size: 68px; }
.cover-letter + .cover-letter { font-size: 61px; }
.child-page { display: flex; flex-direction: column; height: 100%; min-height: 470px; }
.child-page .page-intro { padding: 0; margin-bottom: 20px; min-height: 64px; align-items: center; flex-direction: row; }
.child-page .page-intro h1 { font: 700 clamp(32px,3.3vw,44px)/1.1 var(--ls-font-display); }
.child-page .page-intro p:empty { display: none; }
.child-page .journey-board { flex: 1; padding: 20px 40px 28px; display: flex; flex-direction: column; justify-content: center; }
.journey-current { justify-content: center; gap: 50px; text-align: center; flex: 1; min-height: 180px; }
.journey-current [data-character] { width: min(32vw,290px); }
.journey-current .ls-character { width: 100%; }
.journey-current > div > img { width: 88px; height: 88px; }
.journey-current h2 { font-size: 38px; }
.journey-current p { font-size: 24px; font-weight: 800; }
.journey-stages { margin: 20px 0 0; grid-template-columns: repeat(4,1fr); }
.journey-stages > li > span:not(.stage-medal):not(.ls-sr-only) { display: block; font-size: 24px; font-weight: 800; }
.journey-stages strong { min-height: 22px; font-size: 15px; }
.discovery-grid { flex: 1; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 20px; }
.discovery-card { border: 2px solid rgb(36 62 59 / 10%); flex-direction: column; justify-content: center; padding: 22px; gap: 18px; }
.discovery-card:hover { border-color: var(--ls-color-action); }
.discovery-card > img { width: clamp(100px,12vw,174px); height: clamp(100px,12vw,174px); }
.discovery-state { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.discovery-state > .icon { width: 24px; height: 24px; }
.simple-game-dialog .game-dialog-cover { display: flex; height: 240px; min-height: 0; flex: none; }
.simple-game-dialog > p { text-align: center; font: 700 28px/1.2 var(--ls-font-display); }
.simple-game-dialog .dialog-actions { justify-content: center; }
.simple-game-dialog .dialog-actions .ls-button { flex: 1; }
.simple-game-dialog .dialog-actions .ls-icon-button { flex: 0 0 64px; }
.adult { max-width: 1200px; margin-inline: auto; }
.adult .page-intro { padding: 8px 0 28px; }
.adult .page-intro h1 { font-size: clamp(32px,4vw,50px); }
.preview-banner { margin-bottom: 20px; }
.app-frame:has(.preview-banner) .play-library,.app-frame:has(.preview-banner) .child-page { height: auto; min-height: calc(100% - 118px); }
@media (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .app-frame { grid-template-columns: 100px minmax(0,1fr); grid-template-rows: 88px minmax(0,1fr); }
  #main { padding: 20px 24px; }
  .site-header { padding: 12px 24px; }
  .game-body { padding: 12px 16px; flex-basis: 76px; }
  .game-body strong { font-size: 22px; }
  .game-body > span:last-child { font-size: 12px; }
  .child-nav { padding-inline: 8px; }
  .journey-current { gap: 28px; }
}
@media (max-aspect-ratio: 1/1) {
  .app-frame { grid-template-columns: minmax(0,1fr); grid-template-rows: 96px minmax(0,1fr) calc(100px + env(safe-area-inset-bottom)); }
  .site-header { grid-column: 1; }
  #main { grid-column: 1; grid-row: 2; padding: 24px; }
  .child-nav { grid-column: 1; grid-row: 3; flex-direction: row; justify-content: space-around; align-items: center; padding: 12px 20px max(12px,env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid rgb(36 62 59 / 12%); gap: 12px; }
  .nav-link { min-height: 76px; padding: 10px 8px; flex: 1; }
  .nav-link .icon { width: 30px; height: 30px; }
  .adult-entry { margin-top: 0; min-height: 76px; flex: 0 0 80px; }
  .game-grid,.discovery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); }
  .game-cover img { width: 118px; height: 118px; }
  .game-cover img + img { width: 95px; height: 95px; }
  .game-body { flex-basis: 62px; }
  .game-body strong { font-size: 23px; }
  .journey-current { flex-direction: column; gap: 16px; }
  .journey-current [data-character] { width: min(50vw,300px); }
  .journey-current > div > img { display: none; }
  .journey-stages { gap: 16px; }
  .stage-medal { width: 85px; height: 85px; }
  .stage-medal img { width: 62px; height: 62px; }
  .journey-stages li::before { top: 42px; }
  .discovery-card { flex-direction: row; }
  .discovery-card > img { width: 100px; height: 100px; }
  .discovery-state { flex-direction: column; font-size: 16px; gap: 6px; }
}
@media (max-width: 600px) {
  .app-frame { grid-template-rows: 80px minmax(0,1fr) calc(88px + env(safe-area-inset-bottom)); }
  .site-header { gap: 12px; padding: 8px 16px; }
  .brand-link { font-size: 30px; }
  .brand-link span { display: none; }
  .profile-switch { padding: 4px; max-width: none; }
  .profile-switch span { display: none; }
  .header-actions .fullscreen-button { display: none; }
  #main { padding: 14px 16px 16px; }
  .play-library { gap: 14px; min-height: 560px; }
  .play-heading { flex-basis: 64px; }
  .play-heading h1 { font-size: 30px; }
  .child-nav { gap: 12px; padding: 6px 12px max(6px,env(safe-area-inset-bottom)); }
  .nav-link { min-width: 64px; min-height: 72px; font-size: 10px; padding-inline: 0; border-radius: 18px; }
  .nav-link .icon { width: 27px; height: 27px; }
  .adult-entry { flex-basis: 64px; font-size: 10px !important; min-height: 72px; }
  .adult-entry .icon { width: 25px; height: 25px; }
  .game-grid,.discovery-grid { gap: 12px; }
  .game-card { border-radius: 22px; min-height: 152px; }
  .game-cover { min-height: 94px; }
  .game-cover::before { width: 86px; height: 86px; }
  .game-cover img { width: 76px; height: 76px; }
  .game-cover img + img { width: 61px; height: 61px; margin: 22px 0 0 -12px; }
  .cover-letter { width: 54px; height: 64px; font-size: 44px; border-radius: 10px; }
  .cover-letter + .cover-letter { font-size: 40px; margin: 12px 0 0 -8px; }
  .game-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; flex: 0 0 68px; padding: 9px 12px; }
  .game-body strong { font-size: 18px; line-height: 1.08; }
  .game-body > span:last-child { font-size: 10px; }
  .child-page { min-height: 500px; }
  .child-page .page-intro h1 { font-size: 30px; }
  .child-page .journey-board { padding: 20px 14px; border-radius: 26px; }
  .journey-current [data-character] { width: 205px; }
  .journey-current h2 { font-size: 29px; }
  .journey-current p { font-size: 19px; margin-top: 4px; }
  .journey-stages { gap: 12px; margin-top: 24px; }
  .stage-medal { width: 55px; height: 55px; margin-bottom: 8px; }
  .stage-medal img { width: 42px; height: 42px; }
  .journey-stages li::before { content: none; }
  .journey-stages strong { font-size: 11px; }
  .journey-stages > li > span:not(.stage-medal):not(.ls-sr-only) { font-size: 19px; }
  .discovery-card { flex-direction: column; padding: 14px 8px; gap: 10px; }
  .discovery-card > img { width: 78px; height: 78px; }
  .discovery-state { flex-direction: row; gap: 5px; font-size: 12px; }
  .discovery-state .icon { width: 18px; height: 18px; }
  .simple-game-dialog .game-dialog-cover { height: 200px; }
  .simple-game-dialog .game-cover img { width: 124px; height: 124px; }
  .simple-game-dialog .game-cover img + img { width: 100px; height: 100px; }
  .simple-game-dialog .cover-letter { width: 100px; height: 120px; font-size: 78px; }
  .simple-game-dialog .cover-letter + .cover-letter { font-size: 72px; }
  .adult .page-intro { align-items: flex-start; }
  .preview-banner { font-size: 14px; }
}
@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
  .app-frame { grid-template-rows: 80px minmax(0,1fr); }
  .child-nav { padding-block: 12px; gap: 12px; overflow-y: auto; }
  .nav-link { min-height: 72px; font-size: 11px; }
  .nav-link .icon { width: 27px; height: 27px; }
  .adult-entry { min-height: 64px; flex-shrink: 0; }
  .play-library { min-height: 490px; }
}

/* Game and page cards: a picture-book page; arrows browse the whole place. */
.platform dialog.play-dialog { width: min(580px,calc(100% - 32px)); padding: 24px 28px 28px; border: 3px solid var(--ls-color-ink); box-shadow: 0 8px 0 var(--ls-color-ink),0 30px 80px rgb(36 62 59 / 25%); }
.platform dialog.play-dialog .dialog-header { margin-bottom: 14px; }
.platform dialog.play-dialog .dialog-header h2 { font-size: clamp(28px,4vw,34px); }
.platform dialog.play-dialog .dialog-header .ls-icon-button { border: 2px solid var(--ls-color-ink); box-shadow: 0 4px 0 var(--ls-color-ink); background: var(--ls-color-paper); border-radius: 20px; }
.play-card .card-stage { position: relative; }
.play-card .game-dialog-cover,.play-card .card-page { display: flex; align-items: center; justify-content: center; height: 230px; margin: 0; border-radius: 26px; border: 2px solid var(--ls-color-ink); overflow: hidden; }
.play-card .game-dialog-cover::before { width: 170px; height: 170px; }
.play-card .game-dialog-cover img { width: 132px; height: 132px; animation: cover-bob 3.4s ease-in-out infinite; }
.play-card .game-dialog-cover img + img { width: 104px; height: 104px; margin: 36px 0 0 -6px; animation-delay: -1.7s; }
.play-card .card-page { background: repeating-linear-gradient(180deg, transparent 0 33px, rgb(36 62 59 / 7%) 33px 35px), var(--ls-color-white); }
/* A page card shows the numbers of its pages: alone on the blank page, split by the spine for a double page, or on a tab over the game's cover. */
.play-card .card-page-numbers { font-size: 100px; color: var(--ls-color-action); }
.book-page-preview .card-page { padding-right: 112px; }
.play-card .card-page-numbers > span + span { border-left-color: rgb(36 62 59 / 30%); }
.play-card .card-page-corner { position: absolute; top: 14px; left: 14px; width: auto; height: 54px; font-size: 26px; background: var(--ls-color-white); border: 2px solid var(--ls-color-ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ls-color-ink); overflow: hidden; }
.play-card .card-page-corner > span { padding: 0 12px; }
.play-card .card-page-corner > span + span { border-left-width: 2px; }
.play-card .card-companion { position: absolute; right: -10px; bottom: -22px; width: 132px; pointer-events: none; }
.play-card .card-companion .ls-character { width: 132px; }
.card-browse { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.card-nav { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; border: 2px solid var(--ls-color-ink); background: var(--ls-color-paper); box-shadow: 0 4px 0 var(--ls-color-ink); padding: 0; transition: transform var(--ls-motion-press) var(--ls-ease), box-shadow var(--ls-motion-press) var(--ls-ease); }
.card-nav:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ls-color-ink); }
.card-nav .icon { width: 30px; height: 30px; }
.card-dots { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0 4px; }
.card-dots li { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ls-color-ink); background: var(--ls-color-paper); transition: background-color 200ms, transform 200ms; }
.card-dots li[aria-current="step"] { background: var(--ls-color-sun); transform: scale(1.3); }
.play-card .card-sentence { margin: 18px 0 0; text-align: center; font: 700 26px/1.2 var(--ls-font-display); }
.play-card .card-soon { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 12px auto 0; padding: 6px 14px; border-radius: 999px; background: var(--ls-color-sun-soft); font-size: 16px; }
.play-card .card-soon .icon { width: 22px; height: 22px; }
.play-card .dialog-actions { justify-content: center; margin-top: 20px; }
.play-card .dialog-actions .ls-button { flex: 1; }
.play-card .dialog-actions .ls-button--secondary { border: 2px solid var(--ls-color-ink); box-shadow: 0 4px 0 var(--ls-color-ink); background: var(--ls-color-paper); }
.play-card .dialog-actions .ls-icon-button { flex: 0 0 64px; border: 2px solid var(--ls-color-ink); box-shadow: 0 4px 0 var(--ls-color-ink); background: var(--ls-color-paper); border-radius: 20px; }
@keyframes cover-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@media (prefers-reduced-motion: no-preference) {
  dialog.play-dialog[open] { animation: card-in 300ms var(--ls-ease); }
  @keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
}
@media (max-width: 600px) {
  .play-card .game-dialog-cover,.play-card .card-page { height: 190px; }
  .play-card .card-companion { width: 104px; right: -8px; }
  .play-card .card-companion .ls-character { width: 104px; }
  .play-card .card-page-numbers { font-size: 64px; }
  .book-page-preview .card-page { padding-right: 76px; }
  .play-card .card-page-numbers[data-count="2"] { font-size: 42px; }
  .play-card .card-page-corner { top: 10px; left: 10px; height: 44px; font-size: 20px; }
  .play-card .card-page-corner > span { padding: 0 8px; }
  .play-card .card-sentence { font-size: 22px; }
  .card-dots { gap: 6px; }
  .card-dots li { width: 10px; height: 10px; }
}
@media (max-width: 360px) { .card-dots { display: none; } }