/* v2.2 — UI for replay-friendly story features. Desktop rules do not affect main game proportions. */
.codex-page .codex-grid,.save-grid,.intel-grid,.side-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:25px}
.codex-card,.save-card,.intel-card,.side-card{background:#242127;color:#eee1d3;border:1px solid #85705c;border-radius:11px;padding:23px;text-align:left;min-width:0;display:flex;flex-direction:column;gap:10px}
button.codex-card,button.side-card{cursor:pointer;transition:border-color .16s,background .16s}
button.codex-card:hover,button.side-card:hover{background:#37303a;border-color:#eac68a}
.codex-card .eyebrow{font-size:11px;letter-spacing:.06em}
.codex-card h2,.intel-card h3,.save-card h2,.side-card h3{color:#f3d6a7;font-size:21px;line-height:1.45;overflow-wrap:anywhere}
.codex-card p,.intel-card p,.save-card p,.side-card p{color:#d6c7b9;font-size:14px;line-height:1.8}
.codex-card .codex-entry{margin-top:auto;color:#efd19c;font-size:13px}
.save-note{font-size:14px;line-height:1.9;color:#d2c5b8;margin-top:10px}
.save-card.is-active{border-color:#f0ce96;background:#332a33}
.save-card.is-empty{border-style:dashed}
.save-status{font-size:12px;color:#ddc19b}
.save-card .save-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.save-actions .btn{flex:1;min-width:100px;padding:9px 12px;font-size:14px;min-height:42px}
.save-card .save-delete{color:#f1c7c3}
.save-card .save-date{font-size:13px;color:#b8b0a8}
.fate-overview{display:flex;flex-wrap:wrap;gap:12px;padding:16px 0;color:#d4c6ba;font-size:14px}
.fate-overview strong{color:#f3d5a6}
.fate-chapter{border:1px solid #6c594b;border-radius:10px;background:#242127;margin:18px 0;overflow:hidden}
.fate-chapter>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px 20px;cursor:pointer;color:#f6d9a8;font-weight:650;list-style-position:inside}
.fate-chapter>summary small{color:#b8aa9a;font-size:12px;font-weight:400}
.fate-chain{border-top:1px solid #5f5144;padding:18px;display:grid;gap:25px}
.fate-node{position:relative;background:#2d2830;border:1px solid #695849;border-radius:8px;padding:16px}
.fate-node:not(:last-child):after{content:"";position:absolute;bottom:-26px;left:50%;height:25px;border-left:1px solid #a78c6a}
.fate-node-kicker{font-size:12px;color:#cfb58d;margin-bottom:5px}
.fate-node h3{font-size:18px;line-height:1.5;color:#f4dcc0;margin-bottom:15px}
.fate-forks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fate-fork{padding:14px;border:1px dashed #71645d;border-radius:8px;min-height:94px;display:flex;flex-direction:column;gap:7px;background:#26242b;color:#b6aea6}
.fate-fork-status{font-size:12px;color:#b9aa99}
.fate-fork strong{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.fate-fork.fate-current{background:#493b37;border:1px solid #e2c28d;color:#ffedcb}
.fate-fork.fate-known{border:1px solid #84978d;color:#e0eee5}
.fate-fork.fate-locked{opacity:.65}
.intel-progress,.side-progress{padding:15px 0;border-bottom:1px solid #675548;color:#dec5a1;font-size:15px}
.intel-card{position:relative}
.intel-mark,.side-tag{align-self:start;display:inline-block;border:1px solid #ad8969;border-radius:30px;color:#ecd3b0;font-size:12px;padding:4px 10px}
.intel-proof{margin-top:auto;padding-top:15px;border-top:1px solid #645649}
.intel-proof strong{font-size:13px;color:#f4d6a0}
.intel-proof p{margin-top:8px}
.intel-pending strong{color:#bdaaa1}
.intel-locked,.side-locked{opacity:.65;border-style:dashed}
.side-card{cursor:pointer;min-height:163px}
.side-story-detail{background:#242127;border:1px solid #8b7358;border-radius:10px;margin-top:20px;padding:24px}
.side-story-detail>.eyebrow{display:flex;margin-top:22px}
.side-story-detail h2{font-size:30px;letter-spacing:.06em;color:#f4d3a1;margin:12px 0}
.side-subtitle{color:#bead9d;font-size:14px;margin-bottom:18px}
.side-lines{display:grid;gap:14px;padding:20px 0;border-top:1px solid #685849;border-bottom:1px solid #685849}
.side-lines p,.side-outcome p{font-size:16px;line-height:1.95;color:#f1e6d7}
.side-lines strong{display:block;font-size:13px;color:#d8bb8f}
.side-choices{display:grid;gap:11px;margin-top:23px}
.side-choices h3,.side-outcome h3{font-size:21px;color:#f2d0a0}
.side-choice{border:1px solid #87705c;border-radius:8px;background:#352d36;color:#eed9bd;padding:15px;text-align:left;display:flex;flex-direction:column;gap:8px}
.side-choice strong{font-size:18px}.side-choice small{font-size:14px;line-height:1.6;color:#d0bfb0}
.side-choice:hover{background:#483945;border-color:#efd09e}
.side-outcome{display:grid;gap:12px;margin-top:25px;border-top:1px solid #695848;padding-top:20px}
/* Multiple portraits in a scene: only characters who have already spoken. */
.playing .play-mid .portrait-ensemble{display:flex;justify-content:center;align-items:flex-end;width:100%;height:100%;overflow:hidden;gap:clamp(2px,1.2vw,15px);padding:0 8px}
.playing .ensemble-person{height:100%;width:min(31%,255px);position:relative;display:flex;flex-direction:column;justify-content:flex-end;filter:brightness(.72);opacity:.81;transform:translateY(2%);transition:filter .18s,opacity .18s}
.playing .ensemble-person.is-speaking{filter:brightness(1.03);opacity:1;transform:none;z-index:1}
.playing .ensemble-person img{width:100%;height:100%;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 10px 18px #120d1480)}
.playing .ensemble-person .portrait-label{position:absolute;bottom:7px;right:2px;writing-mode:vertical-rl;font-size:12px;padding:5px;background:#231d25ed;color:#f1d4aa;border:1px solid #ac8b67;border-radius:5px}
@media(max-width:950px){
 .playing .ensemble-person{width:min(44%,280px)}
}
@media(max-width:650px){
 .codex-page .codex-grid,.save-grid,.intel-grid,.side-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .codex-card,.save-card,.intel-card,.side-card{padding:17px}
 .fate-forks{grid-template-columns:minmax(0,1fr)}
 .fate-fork{min-height:56px}
 .fate-chapter>summary{padding:14px;flex-wrap:wrap}
 .fate-chain{padding:12px}
 .fate-node{padding:12px}
 .playing .play-mid .portrait-ensemble{gap:1px;padding:0;align-items:flex-end}
 .playing .ensemble-person{width:49%;height:100%;max-width:none;transform:translateY(1%)}
 .playing .ensemble-person:nth-child(n+3){display:none}
 .playing .ensemble-person .portrait-label{bottom:7px;font-size:11px}
 .side-story-detail{padding:17px}
 .side-lines p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.playing .ensemble-person,button.codex-card,button.side-card{transition:none}}

/* Keep full-sized touch targets, with review still reachable from the main menu on narrow phones. */
@media(max-width:650px){
 .playing .dialogue-stage .small-nav{gap:5px;min-width:0}
 .playing .dialogue-stage .small-nav .btn{font-size:12px;padding:8px 7px;white-space:nowrap}
}
@media(max-width:410px){
 .playing .dialogue-stage .small-nav .btn[data-nav="journal"]{display:none}
}

/* Keep all seven desktop nav items reachable on tablets without shrinking touch targets. */
@media (min-width:651px) and (max-width:1130px) {
 .topbar .nav-links{display:flex;flex:1 1 auto;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
 .topbar .nav-links::-webkit-scrollbar{display:none}
 .topbar .nav-links button{flex:0 0 auto;padding-inline:8px}
}

/* v2.3.0 — correspondence, visual CGs, evidence connections, replay, backup */
.backup-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0}
.backup-toolbar label.btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;min-height:44px}
.import-preview{background:#2d2730;border:1px solid #d0aa79;border-radius:10px;padding:18px;margin:12px 0}
.import-preview h3{color:#efd09a;font-size:21px;margin-bottom:12px}
.import-preview p{font-size:14px;line-height:1.8;color:#e4d3be;margin-bottom:9px}
.exp-grid,.cg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:22px}
.exp-card,.cg-card{display:flex;flex-direction:column;gap:12px;border-radius:11px;border:1px solid #806951;background:#29242c;color:#eadbc9;padding:22px;text-align:left;min-width:0;overflow:hidden}
button.exp-card{cursor:pointer;transition:background .2s,border-color .2s}
button.exp-card:hover{background:#3a303a;border-color:#e7c68f}
.exp-card h2,.cg-card h2{font-size:21px;color:#f1d3a2;line-height:1.5}
.exp-card p,.cg-card p,.exp-muted{font-size:14px;line-height:1.85;color:#cfc3b6}
.exp-card small{font-size:12px;color:#c9ae88}
.exp-locked{opacity:.56;border-style:dashed}
.exp-progress{font-size:14px;color:#dfc39e;padding:15px 0;border-bottom:1px solid #75614e}
.exp-reading,.mail-sheet{border:1px solid #a18460;border-radius:11px;background:linear-gradient(145deg,#302934,#201d28);padding:24px;margin-top:22px}
.exp-reading h2,.mail-sheet h2{font-size:27px;color:#f3d6a8;margin:16px 0}
.exp-reading>p,.mail-body{font-size:17px;line-height:2.05;color:#f2e4d2;margin:17px 0}
.mail-from{font-size:13px;color:#c7a784;margin-top:22px}
.mail-sheet .mail-body{white-space:pre-wrap}
.mail-reply,.mail-options{margin-top:26px;border-top:1px solid #77604f;padding-top:18px}
.mail-reply strong,.mail-options h3{color:#f5cfa0;font-size:19px}
.mail-reply p{line-height:1.85;color:#e3d4c2;margin:12px 0}
.mail-reply small{font-size:12px;color:#c7ab85}
.exp-option{display:flex;flex-direction:column;gap:8px;width:100%;background:#38303a;color:#ecd8bd;border:1px solid #937554;border-radius:9px;padding:15px;margin-top:11px;text-align:left;min-height:65px}
.exp-option strong{font-size:17px}.exp-option span{font-size:14px;line-height:1.65}
.exp-option:hover{border-color:#edca93;background:#4a3847}
.clue-summary{display:flex;flex-wrap:wrap;gap:15px;padding:13px 0;border-bottom:1px solid #8c755c;color:#dec8a4;font-size:14px}
.clue-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;padding:25px 14px;background:repeating-linear-gradient(45deg,#282129,#282129 24px,#2a242c 25px,#2a242c 48px);border:1px solid #85694e;border-radius:10px;margin-top:20px}
.clue-note{min-width:0;position:relative;padding:20px 15px 25px;text-align:left;color:#372b29;background:#e2c9a2;border:2px solid #b89b6f;box-shadow:0 5px 14px #100e17a6;transform:rotate(-1deg);display:flex;flex-direction:column;gap:10px;min-height:148px;border-radius:2px;cursor:pointer}
.clue-note:nth-child(even){transform:rotate(1deg);background:#d3ba93}
.clue-note.is-selected{outline:4px solid #7fd4c7;outline-offset:1px;transform:none}
.clue-note:before{content:"";width:12px;height:12px;border-radius:50%;background:#804b41;box-shadow:inset 2px 2px 3px #ffffff3d;position:absolute;top:6px;left:calc(50% - 6px)}
.clue-note small{font-size:11px;color:#725746;margin-top:6px}
.clue-note strong{font-size:17px;line-height:1.45}
.clue-note span{font-size:13px;line-height:1.6}
.clue-actions{display:flex;flex-wrap:wrap;gap:11px;margin:18px 0}
#clue-feedback{font-size:14px;line-height:1.75;color:#e2ccad;min-height:1.5em}
.exp-subhead{font-size:22px;color:#eacb99;margin:24px 0 14px}
.clue-links{display:grid;gap:11px}
.clue-link{border-left:3px solid #b69770;background:#2d2730;padding:14px 18px;border-radius:0 8px 8px 0}
.clue-link strong{font-size:16px;color:#f4d6a8}
.clue-link small{font-size:12px;color:#bfa58b;margin-left:12px}
.clue-link p{font-size:14px;color:#d7c9b9;line-height:1.8;margin-top:7px}
.cg-card{padding:0}
.cg-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#17141c}
.cg-card h2,.cg-card p{padding:0 18px}.cg-card p{padding-bottom:17px}
.cg-card-locked{opacity:.55}
.cg-cover-lock{display:grid;place-items:center;aspect-ratio:16/9;color:#9e8d81;font-size:18px;background:repeating-linear-gradient(125deg,#352c35,#352c35 14px,#2c2530 14px,#2c2530 28px)}
.history-search{display:flex;flex-direction:column;gap:9px;color:#e9ca9a;font-size:14px;margin:16px 0}
.history-search input{min-height:45px;width:100%;border:1px solid #8d755b;background:#25212b;border-radius:8px;color:#fff;padding:10px;font-size:16px}
.history-list{padding:0;list-style:none;display:grid;gap:8px;margin:18px 0}
.history-list li{background:#28232b;border-left:2px solid #957650;padding:12px 16px;border-radius:0 7px 7px 0}
.history-list small{display:block;color:#c6a988;font-size:12px}
.history-list strong{display:block;color:#efcfa0;font-size:15px;margin:5px 0}
.history-list p{font-size:15px;color:#eadcd0;line-height:1.8;white-space:pre-wrap}
.playing .play-mid{position:relative}
.playing .story-cg-scene{position:absolute;inset:-12px -12% -10px -12%;z-index:0;pointer-events:none;overflow:hidden}
.playing .story-cg-scene img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) brightness(.8);opacity:.82}
.playing .story-cg-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#19141ccc,transparent 55%,#19141c25)}
.playing .story-cg-scene span{position:absolute;bottom:12px;left:24px;color:#efcf9e;font-size:12px;z-index:1;letter-spacing:.1em}
.playing .portrait-large,.playing .portrait-ensemble,.playing .scene-ornament,.playing .scene-prop{position:relative;z-index:1}
.playing .emotion-tag{font-size:11px;font-weight:400;color:#d4b18e;margin-left:9px;vertical-align:middle}
.playing .portrait-large.emotion-sorrow .character-image{filter:contrast(.98) saturate(.82)}
.playing .portrait-large.emotion-joy .character-image{filter:saturate(1.1) brightness(1.05)}
.playing .portrait-large.emotion-anger .character-image{filter:contrast(1.1)}
.exp-card:focus-visible,.exp-option:focus-visible,.clue-note:focus-visible{outline:3px solid #f0d299;outline-offset:3px}
@media(max-width:650px){
 .exp-grid,.cg-grid{grid-template-columns:1fr;gap:12px}
 .exp-card,.cg-card{padding:16px}
 .cg-card{padding:0}
 .exp-reading,.mail-sheet{padding:16px}
 .exp-reading h2,.mail-sheet h2{font-size:23px}
 .exp-reading>p,.mail-body{font-size:15px}
 .clue-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:18px 9px}
 .clue-note{padding:20px 9px 11px;min-height:135px}
 .clue-note strong{font-size:14px}
 .clue-note span{font-size:12px}
 .playing .story-cg-scene{inset:-5px -12% -6px -12%}
 .playing .story-cg-scene span{display:none}
 .playing .emotion-tag{font-size:10px}
}
@media(max-width:370px){.clue-board{grid-template-columns:1fr}.backup-toolbar>*{width:100%}}
@media(prefers-reduced-motion:reduce){button.exp-card{transition:none}}