/* Game discovery: gallery → selected game → story, exercises or a complete game. */
#museum { max-width: 1320px; padding-top: 52px; padding-bottom: 64px; }
.museum-heading { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-bottom: 48px; }
#museum-title { font-size: clamp(48px, 5.8vw, 78px); line-height: 1.03; letter-spacing: -3px; margin: 16px 0 20px; }
#museum-title em { color: #8a6748; font-weight: 400; }
#museum-title:focus, #museum-game-title:focus, #museum-story-title:focus { outline: none; }
.museum-lead { max-width: 680px; color: #627469; font-size: 16px; line-height: 1.7; margin: 0; }
.collection-stamp { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 172px; height: 172px; border: 1px solid #c9d1bc; border-radius: 50%; background: radial-gradient(circle, #e6ebd7, transparent 72%); transform: rotate(12deg); flex-shrink: 0; margin-right: 28px; }
.collection-stamp span { font-size: 9px; letter-spacing: 2px; }.collection-stamp strong { font-size: 78px; line-height: 1.3; font-weight: 400; color: #6a8056; }
.gallery-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; border-top: 1px solid var(--border); padding-top: 24px; }
.gallery-topline h2, .path-heading h2 { font: 26px Georgia, serif; margin: 0; }.gallery-topline>span { color: #637369; font-size: 12px; }
#museum-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.museum-card { display: flex; flex-direction: column; min-width: 0; padding: 0; text-align: left; border: 1px solid #dadfd0; border-radius: 18px; background: #fffef8; overflow: hidden; box-shadow: 0 4px 12px #243d3305; transition: transform .25s, box-shadow .25s, border-color .25s; }
.museum-card:hover:not(:disabled) { background: #fffef8; transform: translateY(-5px); border-color: #8c9d7b; box-shadow: 0 16px 32px #243d3312; }
.game-preview { display: block; position: relative; overflow: hidden; background: #243e43; isolation: isolate; }
.game-preview canvas { display: block; width: 100%; height: auto; aspect-ratio: 7 / 4; object-fit: contain; }
.museum-card .game-preview { width: 100%; border-bottom: 1px solid #243d3312; }
.preview-label { position: absolute; top: 16px; left: 16px; background: #173a33e6; color: #fff8df; padding: 7px 10px; border: 1px solid #ffffff20; border-radius: 6px; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; }
.preview-open { position: absolute; right: 16px; bottom: 16px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #ffffff55; background: #fffae9e6; border-radius: 50%; font-size: 22px; transition: transform .25s; }
.museum-card:hover .preview-open { transform: rotate(45deg); }
.museum-card-copy { display: flex; flex: 1; flex-direction: column; padding: 24px; gap: 9px; }.museum-card-copy>strong { font: 30px Georgia, serif; letter-spacing: -.6px; }.museum-card-copy>span:not(.museum-card-footer) { font-size: 13px; line-height: 1.6; color: #607168; }
.museum-card-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; border-top: 1px solid #e7e9df; padding-top: 16px; margin-top: 10px; font-size: 10px; color: #677466; }.museum-card-footer b { color: #315d4c; font-size: 11px; }
.museum-coming { text-align: center; font-size: 12px; color: #69776b; margin-top: 30px; }
.detail-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: -20px 0 24px; }.detail-topline>span { font-size: 9px; letter-spacing: 1.8px; color: #69776b; }.detail-topline button { border: 1px solid var(--border); background: #fffef8; padding: 10px 16px; }
.museum-hero { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: center; gap: 42px; }.detail-preview { border-radius: 18px; box-shadow: 0 16px 36px #243d3315; }.museum-game-copy { min-width: 0; }
#museum-game-title { font: clamp(38px, 4.5vw, 62px)/1.06 Georgia, serif; letter-spacing: -2px; margin: 12px 0 20px; }#museum-game-description { color: #5e7064; font-size: 17px; line-height: 1.7; }
#museum-game-concepts { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0; }#museum-game-concepts span { background: #e9edde; border: 1px solid #d9dfcc; border-radius: 30px; padding: 7px 10px; font-size: 10px; }.game-invitation { font: italic 17px/1.6 Georgia, serif; color: #836a50; }
.preview-play { position: absolute; bottom: 16px; right: 16px; border: 1px solid #ffffff55; padding: 9px 12px; background: #fff8e9ed; color: #284b43; font-size: 11px; box-shadow: 0 2px 8px #0001; }
.path-heading { margin: 38px 0 20px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }.path-heading p { font-size: 12px; color: #627469; margin: 0; }
.museum-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.museum-path { text-align: left; border: 1px solid #dbdfd0; border-radius: 14px; padding: 24px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-content: start; background: #fffdf5; transition: transform .2s, box-shadow .2s; }
.museum-path:nth-child(2) { background: #eef1e3; }.museum-path:nth-child(3) { background: #f2e9dc; border-color: #e2d6c5; }.museum-path:hover:not(:disabled) { transform: translateY(-3px); background: #e5ebd6; box-shadow: 0 8px 22px #243d3310; }.museum-path[aria-expanded="true"] { border-color: #647e55; }
.path-icon { grid-column: 2; grid-row: 1 / 3; font-size: 32px; color: #70815f; }.path-kicker { font-size: 9px; letter-spacing: 1.5px; font-weight: 650; color: #637255; align-self: center; }.museum-path>strong { font: 26px Georgia, serif; grid-column: 1 / -1; }.museum-path>span:not([class]) { grid-column: 1 / -1; font-size: 13px; line-height: 1.7; color: #617061; }.path-link { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; border-top: 1px solid #284b4319; padding-top: 15px; margin-top: 8px; }.path-link b { font-size: 20px; font-weight: 400; }
.museum-story-panel { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--border); scroll-margin-top: 28px; }.museum-story-copy h2 { font: 32px/1.2 Georgia, serif; }.museum-story-copy>p:not(.eyebrow) { font-size: 16px; line-height: 1.85; color: #5e7064; }.museum-story-copy h3 { font: 22px Georgia, serif; margin-top: 28px; }
#museum-pip { min-width: 0; padding-bottom: 20px; }#museum-form { display: flex; gap: 8px; padding: 16px; flex-wrap: wrap; }#museum-question { min-width: 150px; flex: 1; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #fffef9; }#museum-status { font-size: 12px; line-height: 1.6; color: var(--muted); padding: 0 16px; }#museum-messages { min-height: 100px; max-height: 350px; }#museum-messages .message { line-height: 1.7; }#museum-pip .pip-voice { margin: 12px 16px; }
.game-preview[data-unavailable]::after { content: 'Preview unavailable'; position: absolute; inset: 40% 0; text-align: center; color: #fff8df; }
@media(max-width: 900px) { .museum-hero { gap: 26px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }.museum-path { padding: 18px; }.museum-path>strong { font-size: 23px; }.collection-stamp { margin-right: 0; width: 140px; height: 140px; }.collection-stamp span { font-size: 7px; }.collection-stamp strong { font-size: 64px; } }
@media(max-width: 650px) { #museum { padding-top: 30px; }.museum-heading { margin-bottom: 30px; gap: 12px; }#museum-title { font-size: 48px; letter-spacing: -2px; }.collection-stamp { display: none; }.museum-lead { font-size: 14px; }.gallery-topline { align-items: start; flex-direction: column; gap: 8px; }#museum-cards { grid-template-columns: 1fr; gap: 20px; }.museum-card-copy { padding: 20px; }.museum-hero, .museum-story-panel { grid-template-columns: 1fr; gap: 22px; }#museum-game-title { margin: 8px 0 12px; font-size: 42px; }#museum-game-description { font-size: 15px; margin: 0; }#museum-game-concepts { margin: 16px 0; }.game-invitation { display: none; }.detail-topline { margin: 0 0 20px; }.detail-topline>span { font-size: 8px; letter-spacing: 1px; }.path-heading { margin-top: 26px; flex-direction: column; }.museum-paths { grid-template-columns: 1fr; gap: 12px; }.museum-path { padding: 20px; gap: 9px; }.preview-label { top: 12px; left: 12px; font-size: 8px; }.museum-story-panel { margin-top: 26px; } }
@media(prefers-reduced-motion: reduce) { .museum-card, .museum-path, .preview-open { transition: none; }.museum-card:hover:not(:disabled), .museum-path:hover:not(:disabled), .museum-card:hover .preview-open { transform: none; } }

#museum-story-text { white-space: pre-line; }
.museum-story-sources h3 { font-size: 12px; font-weight: 600; font-family: inherit; line-height: 1.5; margin: 22px 0 8px; }
.museum-story-sources ul { margin: 0; padding-left: 18px; }
.museum-story-sources li { margin: 6px 0; font-size: 12px; line-height: 1.6; }
.museum-story-sources a { color: #385e4b; text-underline-offset: 3px; overflow-wrap: anywhere; }