/* 合格図の全幅の器。画面の横に常設メニューを置かない。 */
:root { --bg:#1d242d; --bg-raise:#293341; --bg-sunken:#17202b; --surface:#29313c; --surface-line:#ae987064; --line:#ae987064; --line-soft:#ae98702e; --text:#f3ecda; --text-dim:#b7b5ae; --text-faint:#a3abae; --radius:3px; --hud-h:48px; --tavern-height:clamp(280px,34dvh,380px); }
body { background:#141c26; }
body:not(.is-gate) #app { max-width:1480px; display:flex; flex-direction:column; background:#1d242d; border-inline:1px solid #ae987064; }
body:not(.is-gate) .hud { flex:0 0 48px; height:48px; order:0; padding:0 70px 0 22px; gap:18px; background:linear-gradient(#293341,#19222d); border-bottom:1px solid var(--line); }
.hud-crest { font:16px/1.3 serif; letter-spacing:.12em; color:#e4d1a5; white-space:nowrap; }
.hud-wallet { margin-left:auto; min-width:0; padding:4px 0; min-height:32px; border:0; box-shadow:none; background:none; color:#d5d1c6; font-size:14px; }
body:not(.is-gate) .audio-toggle { top:calc(var(--safe-t,0px) + 5px); right:max(10px,calc((100vw - 1480px)/2 + 10px)); bottom:auto; width:36px; height:36px; }
body:not(.is-gate) .screen { order:2; width:100%; min-height:0; flex:1 1 auto; padding:22px 26px; }
body[data-screen="town"]:not(.is-gate) .screen { padding:0; }
body:not(.is-gate) .nav { display:flex; order:1; flex:0 0 auto; flex-direction:row; align-items:center; justify-content:flex-start; gap:6px; width:100%; padding:6px 22px; border:0; border-bottom:1px solid var(--line); background:#19222d; }
body:not(.is-gate) .nav button { flex:0 0 auto; display:block; width:auto; min-height:30px; padding:4px 14px; border:1px solid transparent; border-radius:0; font-size:14px; }
body:not(.is-gate) .nav button .ico { display:none; }
body:not(.is-gate) .nav button.is-active { color:#ead2a0; border-bottom-color:#d9b86f; background:#ffffff08; box-shadow:none; }
body:not(.is-gate) .nav button::before,body:not(.is-gate) .nav button::after { display:none; }
.side { display:flex; order:3; flex:0 0 var(--tavern-height); height:var(--tavern-height); min-height:0; overflow:hidden; padding:0; border:0; border-top:2px solid #9a8255; background:#192029; }
.side-chat { display:flex; flex:1; min-height:0; min-width:0; }
.side-chat>.tavern { flex:1; min-height:0; margin:0; border:0; border-radius:0; }
h1 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
button:focus-visible,a:focus-visible { outline:2px solid #efd29a; outline-offset:3px; }
.btn-primary,.btn-hero { background:linear-gradient(#d1b77b,#ae8c4f); border-color:#f3db9f; color:#212631; }
@media(max-width:700px) {
 :root { --tavern-height:clamp(220px,32dvh,300px); }
 body:not(.is-gate) .hud { padding-left:12px; padding-right:54px; gap:5px; }
 .hud-crest { font-size:14px; letter-spacing:0; }
 .hud-wallet { font-size:14px; }
 body:not(.is-gate) .audio-toggle { right:10px; }
 body:not(.is-gate) .screen { padding:16px 12px; }
 body:not(.is-gate) .nav { padding:5px 12px; }
}
/* ブラウザの全画面・広いウィンドウのどちらでも、表示領域を使い切る。 */
body:not(.is-gate) #app { width:100%; max-width:none; }
body:not(.is-gate) .audio-toggle { right:10px; }
.hud-menu { padding:4px 8px; min-height:30px; font-size:14px; white-space:nowrap; }
.overlay.full-mode .overlay-panel { width:100%; max-width:none; }
@media(max-width:700px) {
 body:not(.is-gate) .hud { gap:6px; }
 .hud-wallet { max-width:42%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .hud-menu { padding-inline:5px; font-size:14px; }
}

.expedition-history-entry summary { cursor:pointer; flex-wrap:wrap; padding:8px 0; }
.expedition-history-entry summary::marker { color:#d9b86f; }
.expedition-history-entry[open] summary { border-bottom:1px solid #ae987064; margin-bottom:16px; }
.expedition-history-content { min-width:0; }
.expedition-history-content h3 { margin-top:20px; }

/* 精算の帰還操作は一つ。内容末尾に置き、長い一覧では画面下端へ追従する。 */
.settlement-actions { position:sticky; bottom:0; z-index:2; display:block; padding:12px 0 4px; margin-top:18px; background:linear-gradient(transparent,#1d252eee 25%); }
.settlement-actions button { width:100%; }