/* 3.5 · 双端固定外壳：整页不滚动，导航与状态常驻，只有内容区在需要时内部滚动 */

/* —— 呈现方式：美术 / 纯文字（借自参考游戏的三种呈现方式） —— */
body.mode-text .estate-stage__backdrop,
body.mode-text .estate-stage img,
body.mode-text .scene img,
body.mode-text .opening-art{display:none!important}
body.mode-text .estate-stage{background:linear-gradient(#20302b,#1d1611)}
body.mode-text .game-portrait{display:none!important}
body.mode-text .family-chip{min-width:70px;padding:10px 8px}
body.mode-text .family-chip strong{font-size:13px}
body.mode-text .character-dialog__portrait,
body.mode-text .candidate-portrait,
body.mode-text .table-portrait{display:none!important}
body.mode-text .match-book img,
body.mode-text .candidate-dossier img{display:none!important}

.display-toggle{display:flex;gap:6px;align-items:center;font-size:12px;color:#6f6152}
body.shell aside>.display-toggle{display:flex;margin:8px 2px 0;padding:6px 8px;border-radius:10px;background:#fffaf0d9;border:1px solid #e2d8c6}
@media(max-width:859px){body.shell aside>.display-toggle{display:none}}
.display-toggle button{flex:1;margin:0;padding:7px 6px;font-size:12px;border-radius:9px;background:#fffaf0;border:1px solid #e2d8c6;color:#3f4a44}
.display-toggle button.active{background:#3b2f25;color:#fdf7e8;border-color:#3b2f25}
.intro-modal{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:20px;background:#0a1a17cc;backdrop-filter:blur(8px)}
.intro-modal>section{width:min(620px,94vw);max-height:86dvh;overflow:auto;padding:24px;border-radius:18px;background:#fbf7ee;border:1px solid #e2d8c6;box-shadow:0 24px 70px #0006}
.intro-modal h2{margin:6px 0 12px;color:#3b2f25}
.intro-modal p{line-height:1.9;margin:8px 0;color:#4b4136}
.intro-modal .intro-actions{display:flex;gap:10px;margin-top:16px}
html,body{height:100%}
body.shell{overflow:hidden}
body.shell>footer{display:none!important}
body.shell .notice{margin:0 0 8px}

/* —— 桌面端：左侧导航常驻，内容区独立滚动 —— */
@media(min-width:860px){
  body.shell{display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100dvh}
  body.shell>header{grid-area:1/1/2/3;position:static!important;padding:10px 20px!important;background:#ebe5d8!important;border-bottom:1px solid #d3ccbd!important;color:#3f3427!important;pointer-events:auto!important;z-index:40}
  body.shell>header h1{font-size:20px!important;margin:0!important;letter-spacing:2px;text-shadow:none!important;color:#3f3427!important}
  body.shell>header small,body.shell>header span{color:#7c6a5a!important}
  body.shell>main{display:contents!important;margin:0!important;padding:0!important;max-width:none!important}
  body.shell>main>.layout{display:contents!important;gap:0!important}
  body.shell aside{grid-area:2/1/3/2;position:static!important;inset:auto!important;width:auto!important;overflow-y:auto!important;padding:12px!important;background:#f2ece1;border-right:1px solid #ddd3c1}
  body.shell aside>nav{position:static!important;display:grid!important;gap:5px!important;grid-template-columns:minmax(0,1fr)!important;padding:0!important;margin:0 0 12px!important;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;min-width:0!important}
  body.shell aside>nav button{width:100%!important;margin:0!important;text-align:left;border-radius:10px!important;padding:9px 12px!important;background:#fffaf0!important;color:#3f4a44!important;border:1px solid #e2d8c6!important;font-size:13px!important}
  body.shell aside>nav button.active{background:#3b2f25!important;color:#fdf7e8!important;border-color:#3b2f25!important}
  body.shell aside>nav button[data-shell-extra]{display:block!important}
  body.shell aside>nav button[data-shell-more]{display:none!important}
  body.shell aside>.card{margin:0 0 10px!important;padding:10px!important;background:#fbf7ee!important;border:1px solid #e2d8c6!important;box-shadow:none!important}
  body.shell aside>.card:last-child .toolbar{gap:6px}
  body.shell aside>.card:last-child button{width:100%;margin:0 0 6px;font-size:12px;padding:8px}
  body.shell main .layout>section{grid-area:2/2/3/3;position:relative;overflow-y:auto!important;padding:14px 18px!important}
  body.shell main .layout>section>.stats{position:sticky!important;top:0;z-index:30;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;padding:6px!important;margin:0 0 10px!important;border-radius:12px;background:#fffdf7e6;backdrop-filter:blur(10px);box-shadow:0 4px 16px #0000000f}
  body.shell .estate-stage{min-height:100%!important;height:100%;border-radius:16px}
}

/* 桌面 · 沉浸主界面：状态条浮在场景上，场景铺满内容区 */
@media(min-width:860px){
  body.shell.story-mode main .layout>section{overflow:hidden!important;padding:0!important}
  body.shell.story-mode main .layout>section>.stats{position:absolute!important;top:10px;left:10px;right:10px;background:#0f1f1cc9;color:#f6ead0;box-shadow:0 6px 20px #0003}
  body.shell.story-mode .estate-stage{border-radius:0}
}

/* —— 手机端：顶部状态条 + 中间内容 + 底部导航 —— */
@media(max-width:859px){
  body.shell{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh}
  body.shell>header{grid-row:1;position:static!important;padding:8px 12px!important;background:#ebe5d8!important;border-bottom:1px solid #d3ccbd!important;color:#3f3427!important;pointer-events:auto!important;z-index:40}
  body.shell>header h1{font-size:17px!important;margin:0!important;letter-spacing:1px;text-shadow:none!important;color:#3f3427!important}
  body.shell>header small{display:none!important}
  body.shell>header span{display:block!important;font-size:10px!important;color:#7c6a5a!important}
  body.shell>main{display:contents!important;margin:0!important;padding:0!important;max-width:none!important}
  body.shell>main>.layout{display:contents!important;gap:0!important}
  body.shell main .layout>aside{grid-row:3;position:static!important;inset:auto!important;width:auto!important;padding:0!important;background:#2b2117!important;border-top:1px solid #1d1611}
  body.shell aside>.card{display:none!important}
  body.shell aside>nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:2px!important;margin:0!important;padding:5px 5px calc(5px + env(safe-area-inset-bottom))!important;border-radius:0!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;min-width:0!important;overflow:visible!important}
  body.shell aside>nav button{min-height:46px!important;margin:0!important;padding:4px 2px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#e9dcc0!important;font-size:11px!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  body.shell aside>nav button.active{background:#f4e7c9!important;color:#22372f!important}
  body.shell aside>nav button[data-shell-extra]{display:none!important}
  body.shell aside>nav button[data-shell-more]{display:block!important;background:#2b2117!important;color:#f0e2c2!important}
  body.shell main .layout>section{grid-row:2;position:relative;overflow:auto!important;padding:8px!important}
  body.shell main .layout>section>.stats{position:sticky!important;top:0;z-index:30;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;padding:5px!important;margin:0 0 8px!important;border-radius:10px;background:#fffdf7f2;backdrop-filter:blur(10px);box-shadow:0 4px 14px #00000012}
  body.shell .stat{padding:5px 6px!important;font-size:10px!important}
  body.shell .stat strong{font-size:14px!important}
  body.shell .estate-stage{min-height:100%!important;height:100%;border-radius:12px}
}

/* 手机 · 沉浸主界面：目标卡、家人条、纪事按钮都收进一屏 */
@media(max-width:859px){
  body.shell.story-mode main .layout>section{overflow:hidden!important;padding:0!important}
  body.shell.story-mode main .layout>section>.stats{position:absolute!important;top:6px;left:6px;right:6px;margin:0!important;background:#0f1f1ccc}
  body.shell.story-mode .estate-stage{border-radius:0}
  body.shell.story-mode .estate-stage__caption{display:none!important}
  body.shell.story-mode .month-objective{top:72px!important;left:8px!important;right:8px!important;width:auto!important;max-width:none!important;padding:10px 12px!important}
  body.shell.story-mode .month-objective::before{width:22px;height:22px;font-size:12px}
  body.shell.story-mode .month-objective h3{font-size:15px!important}
  body.shell.story-mode .month-objective p{font-size:11px!important}
  body.shell.story-mode .month-objective button{padding:7px 10px!important;font-size:12px!important;min-height:38px}
  body.shell.story-mode .campaign-hud{top:auto!important;left:8px!important;right:8px!important;bottom:126px!important;width:auto!important;padding:8px 10px!important;border-radius:12px;z-index:19}
  body.shell.story-mode .campaign-hud>div:first-child{align-items:center}
  body.shell.story-mode .campaign-hud strong{font-size:12px}
  body.shell.story-mode .campaign-hud p{margin:4px 0 6px;font-size:10px}
  body.shell.story-mode .campaign-hud button{min-height:30px;padding:4px 8px;font-size:10px}
  body.shell.story-mode .family-hotspots{left:0!important;right:0!important;bottom:0!important;transform:none!important;width:auto!important;max-width:none!important;min-width:0!important;justify-content:flex-start!important;gap:8px!important;padding:22px 10px 8px!important;min-height:104px!important;overflow-x:auto;overflow-y:hidden;border-radius:16px 16px 0 0}
  body.shell.story-mode .family-hotspots::before{left:12px;top:6px;font-size:10px}
  body.shell.story-mode .family-chip{min-width:72px}
  body.shell.story-mode .family-chip>.game-portrait{width:46px;height:54px;border-radius:16px}
  body.shell.story-mode .family-chip.is-spouse>.game-portrait{width:50px;height:58px}
  body.shell.story-mode .family-chip strong{font-size:12px}
  body.shell.story-mode .family-chip small{display:none}
  body.shell.story-mode .event-seal{left:auto!important;right:8px!important;bottom:196px!important;width:132px!important;height:46px!important;min-height:46px!important;padding:5px 12px!important;z-index:21!important}
  body.shell.story-mode .event-seal span{font-size:9px}
  body.shell.story-mode .event-seal strong{font-size:13px!important}
  body.shell.story-mode .event-seal::before{width:22px;height:22px;left:-6px;top:-6px;font-size:12px}
  body.shell.story-mode .household-pulse{top:auto!important;left:8px!important;right:auto!important;bottom:196px!important;min-width:0!important;max-width:46vw;padding:7px 10px!important;font-size:11px!important;z-index:21!important}
  body.shell.story-mode .household-pulse span{font-size:10px}
  body.shell.story-mode .household-pulse strong{font-size:11px}
  body.shell.story-mode .household-drawer{left:8px!important;right:8px!important;bottom:250px!important;max-height:44dvh;overflow:auto}
}

/* —— 月度纪事：变成一层面板，不再需要把页面往下拖 —— */
body.shell.event-open::before{content:"";position:fixed;inset:0;z-index:60;background:#0b1a17b8;backdrop-filter:blur(6px)}
body.shell.event-open main .layout>section>article.card{position:fixed!important;left:0;right:0;bottom:0;top:auto;z-index:70;margin:0!important;max-height:88dvh;overflow:auto!important;border-radius:22px 22px 0 0!important;padding:20px 18px calc(18px + env(safe-area-inset-bottom))!important;box-shadow:0 -20px 60px #00000059;animation:sheet-rise .28s var(--ease-apple) both}
body.shell.event-open main .layout>section>article.card .choices{display:grid;gap:8px;position:sticky;bottom:0;padding-top:6px;background:inherit}
body.shell.event-open main .layout>section>article.card .choices button{min-height:52px;text-align:left}
@keyframes sheet-rise{from{opacity:.4;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(min-width:860px){
  body.shell.event-open main .layout>section>article.card{left:0;right:0;bottom:auto;top:8vh;width:min(700px,92vw);margin-left:auto!important;margin-right:auto!important;max-height:82vh;border-radius:22px!important}
  body.shell.event-open main .layout>section>article.card h2{font-size:26px;letter-spacing:2px;text-align:left;margin:6px 0 10px}
  body.shell.event-open main .layout>section>article.card>p{font-size:14px;line-height:1.8;text-align:left}
  body.shell.event-open main .layout>section>article.card .choices button{min-height:56px}
}
@media(prefers-reduced-motion:reduce){
  body.shell.event-open main .layout>section>article.card{animation:none}
}

/* —— 家事长卷：决定按钮常驻在面板底部 —— */
body.shell main .layout>section .case-panel{display:flex;flex-direction:column;min-height:100%}
body.shell main .layout>section .case-panel .case-actions{margin-top:auto;position:sticky;bottom:0;background:linear-gradient(#f9f3e5f2,#f9f3e5 40%);padding-top:10px;z-index:5}
body.shell main .layout>section .case-panel .case-footer{position:sticky;bottom:0;background:#f9f3e5f2;z-index:4}
@media(max-width:520px){
  body.shell main .layout>section .case-panel{padding:14px 12px!important}
  body.shell main .layout>section .case-panel h3{font-size:20px!important;margin:6px 0 10px}
  body.shell main .layout>section .case-panel>p{font-size:13px;line-height:1.7}
  body.shell main .layout>section .case-actions button{padding:12px!important}
  body.shell main .layout>section .case-actions small{font-size:11px}
}

/* —— 手机端“更多”面板 —— */
.kin-panel{margin-top:14px}
.kin-panel p{line-height:1.8}
.kin-list{display:grid;gap:8px;margin-top:10px}
.kin-row{padding:10px 12px;border:1px solid #e2d8c6;border-radius:12px;background:#fffdf7}
.kin-row>div:first-child{display:flex;gap:6px;align-items:center;font-size:14px}
.kin-row button{padding:2px 6px;min-height:0;background:#f2ece1;border:1px solid #e2d8c6;color:#3f4a44;font-size:13px}
.kin-meters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 6px}
.kin-meters span{position:relative;display:block;padding:4px 8px;border-radius:8px;font-size:11px;background:#f1ece2;overflow:hidden}
.kin-meters .warm::before,.kin-meters .tense::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--value,0%);opacity:.28}
.kin-meters .warm::before{background:#7d9b7f}
.kin-meters .tense::before{background:#c2705f}
.kin-row small{color:#8b7c68}
.shell-sheet{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;background:#08171ac9;backdrop-filter:blur(8px);animation:veil-in .18s ease both}
.shell-sheet>div{width:100%;background:#fbf7ee;border-radius:20px 20px 0 0;padding:14px 14px calc(16px + env(safe-area-inset-bottom));max-height:76dvh;overflow:auto}
.shell-sheet header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.shell-sheet header strong{font-size:15px;color:#3b2f25}
.shell-sheet header button{width:32px;height:32px;padding:0;margin:0;border:0;border-radius:50%;background:#e7dfd1;color:#5c5245;font-size:18px}
.shell-sheet__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.shell-sheet__grid button{min-height:46px;margin:0;padding:10px 6px;font-size:12px;border-radius:10px;background:#fffaf1;border:1px solid #e2d8c6;color:#3f4a44}
.shell-sheet__grid button.active{background:#3b2f25;color:#fdf7e8;border-color:#3b2f25}