/* Quiet paper interludes, distinct from the pixel world. */
.start-overlay,.finish-overlay { background:rgba(242,240,237,.91); backdrop-filter:blur(16px); padding:clamp(16px,4vw,60px); overflow:auto; }
.start-copy { width:min(610px,100%); margin:auto; padding:clamp(28px,5vw,64px); border:1px solid #e7e2de; border-radius:8px; color:#29252a; background:#fff; box-shadow:0 24px 90px #40302b12; text-align:center; }
.start-copy h2,.finish-copy h2 { color:#29252a; font-family:Georgia,serif; font-weight:400; font-size:clamp(36px,4.5vw,64px); letter-spacing:-2px; line-height:1.08; }
.start-copy .overlay-kicker,.finish-copy .overlay-kicker { color:#9b686a; font:700 10px/1.7 system-ui,sans-serif; letter-spacing:2px; text-transform:uppercase; }
.start-copy .overlay-body,.finish-copy .overlay-body { color:#686166; font:16px/1.8 Georgia,serif; }
.start-copy .microcopy { color:#777078; line-height:1.6; }
.start-copy .pixel-heart { color:#b47c80; text-shadow:none; margin:0 auto 22px; }
.start-copy .primary-button,.finish-copy .primary-button { background:#302b30; color:#fff; border-radius:4px; padding:15px 24px; box-shadow:none; }
.start-copy .primary-button:hover,.finish-copy .primary-button:hover { background:#82585e; }
.finish-card { width:min(1040px,100%); grid-template-columns:.8fr 1fr; border:1px solid #e7e2de; border-radius:8px; background:#fff; color:#29252a; box-shadow:0 24px 90px #40302b12; max-height:90vh; overflow:auto; }
.finish-art-wrap { min-height:420px; background:#f5f0ec; }
.finish-scene { background:radial-gradient(ellipse at center,#fff 0%,#f1e7e1 100%); }
.finish-scene::after { display:none; }
.finish-scene-label { color:#92686a; }
.finish-copy { padding:clamp(28px,4vw,58px); }
.finish-copy .quote { color:#8b5c64; font:italic 23px/1.5 Georgia,serif; margin:26px 0; }
.finish-actions { flex-wrap:wrap; gap:18px; }
.finish-copy .collected-note { color:#797178; font-size:12px; }
.finish-card { grid-template-columns:minmax(330px,.9fr) minmax(360px,1fr); }
.finish-art-wrap { min-height:clamp(380px,68vh,620px); padding:16px; background:#f0e5de; }
.finish-scene { border:12px solid #fffaf4; box-shadow:0 10px 26px #5b3d3a18; }
.finish-scene::before { position:absolute; z-index:1; inset:0; content:""; background:linear-gradient(180deg,rgba(19,20,42,.06),transparent 48%,rgba(30,18,31,.42)); pointer-events:none; }
.finish-scene .finish-hug { position:absolute; z-index:0; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; image-rendering:auto; filter:saturate(.95) contrast(1.02); transform:none; }
.finish-scene-label { z-index:3; right:18px; left:auto; padding:6px 8px; color:#fff8e9; background:#27213eaa; font-size:8px; letter-spacing:.14em; }
.finish-copy h2 em { color:#9b686a; font-family:Georgia,serif; font-weight:400; }
.finish-copy .overlay-body { max-width:420px; }
.dedication-field { display:flex; flex-direction:column; gap:8px; margin:2px 0 8px; color:#9b686a; font:700 9px/1.5 system-ui,sans-serif; letter-spacing:1.5px; }
.dedication-field input { width:100%; border:1px solid #dfd2cc; border-radius:5px; padding:12px 13px; color:#42373b; background:#fffaf6; font:16px/1.4 Georgia,serif; letter-spacing:0; outline:none; }
.dedication-field input:focus { border-color:#9b686a; box-shadow:0 0 0 3px #9b686a1c; }
/* No imagined reunion pictures before play. Only distance, light, and words. */
.ready-overlay { background:radial-gradient(ellipse at 70% 30%,#625070,#10192d 75%); }
.story-frame-meet,.story-frame-messages { background-image:url('assets/story-messages.png'); }
.story-frame-home { background-image:url('assets/malibu.png'); }
.ready-overlay { background:linear-gradient(90deg,#10192dcc,#10192d88),url('assets/malibu.png') center/cover; }
/* Hide all gameplay chrome whenever an interlude is visible, independently of game state. */
body:has(.start-overlay:not(.hidden)) .game-card-topline,
body:has(.start-overlay:not(.hidden)) .side-panel,
body:has(.start-overlay:not(.hidden)) .game-footer,
body:has(.start-overlay:not(.hidden)) .touch-controls,
body:has(.finish-overlay:not(.hidden)) .game-card-topline,
body:has(.finish-overlay:not(.hidden)) .side-panel,
body:has(.finish-overlay:not(.hidden)) .game-footer,
body:has(.finish-overlay:not(.hidden)) .touch-controls { visibility:hidden; opacity:0; pointer-events:none; }
.start-overlay { background:#f3f0ed; }
.start-copy { width:min(620px,100%); padding:clamp(24px,4vh,44px) clamp(24px,4vw,52px); border-radius:16px; }
.start-copy h2 { font-size:clamp(32px,3.3vw,48px); line-height:1.12; letter-spacing:-1.5px; text-wrap:balance; }
.start-copy .overlay-kicker { margin:0 0 18px; letter-spacing:1.5px; }
.start-copy .overlay-body { max-width:440px; margin:22px auto 26px; font-size:15px; line-height:1.65; }
.start-copy .pixel-heart { margin-bottom:18px; }
.start-copy .microcopy { margin:18px 0 0; font-size:9px; letter-spacing:.5px; }
@media(max-width:650px) { .finish-card { grid-template-columns:1fr; } .finish-art-wrap { min-height:180px; max-height:180px; } .finish-copy { padding:26px; } .finish-copy h2 { font-size:40px; } }
@media(max-height:550px) { .start-copy { padding:20px 30px; } .start-copy .pixel-heart { display:none; } .start-copy h2 { font-size:32px; } .start-copy .overlay-body { font-size:14px; line-height:1.5; } }