/* v0.9.5 UI 정리 — 하나의 기준(크기·간격·버튼 모양·정렬)으로 화면 전체를 다시 맞춘다. 마지막에 읽혀 앞의 규칙을 덮는다. */
:root{--ui-panel:#15212bf0;--ui-panel-2:#1c2c38f2;--ui-line:#ffffff24;--ui-line-2:#ffffff3d;--ui-gold:#e8c17b;--ui-text:#eef3f6;--ui-muted:#a9bcc8;--ui-r:10px;--ui-h:40px;--ui-gap:6px;--ui-edge:8px;--app-h:100dvh;--hud-bottom:56px}

/* 글꼴: 언어별 기본 글꼴과 줄바꿈 기준 */
html[lang=ko] body{font-family:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR','Noto Sans CJK KR',system-ui,sans-serif;word-break:keep-all;overflow-wrap:break-word}
html[lang=en] body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;letter-spacing:0}
html[lang=ja] body{font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Meiryo','Noto Sans JP','Noto Sans CJK JP',system-ui,sans-serif;line-break:strict}
html,body{height:var(--app-h)}
button{font-family:inherit}

/* ---------- 상단 메뉴 ---------- */
#hud{top:max(var(--ui-edge),env(safe-area-inset-top));left:max(var(--ui-edge),env(safe-area-inset-left));gap:var(--ui-gap);align-items:stretch;flex-wrap:nowrap;max-width:calc(100vw - 72px)}
#hud button,#clock{height:var(--ui-h);min-height:var(--ui-h);box-sizing:border-box;border-radius:var(--ui-r);border:1px solid var(--ui-line);background:var(--ui-panel);color:var(--ui-text);font-size:13px;line-height:1;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;box-shadow:0 2px 8px #0003}
#hud #menu{width:var(--ui-h);padding:0;font-size:17px}
#clock{min-width:0;max-width:min(34vw,280px);justify-content:flex-start;overflow:hidden;text-overflow:ellipsis;color:var(--ui-muted);font-size:12px}
#clock b{display:inline;color:var(--ui-text);font-weight:600;margin:0 2px 0 0;overflow:hidden;text-overflow:ellipsis}
#clock .v9-day{flex:none;margin:0;padding:3px 7px;font-size:11px;line-height:1;border-radius:6px}

/* 목적지 안내: 상단 메뉴 바로 아래 */
#mission{top:calc(var(--hud-bottom) + 8px);left:max(var(--ui-edge),env(safe-area-inset-left));width:min(330px,calc(100vw - 2*var(--ui-edge) - 56px));box-sizing:border-box;border-radius:var(--ui-r);border:1px solid var(--ui-line);border-left:3px solid var(--ui-gold);background:var(--ui-panel);padding:8px 12px;gap:2px;box-shadow:0 3px 10px #0003}
#mission span{font-size:10px;letter-spacing:.06em}
#mission b{font-size:13px;line-height:1.4}
#mission small{font-size:11px;line-height:1.4}

/* ---------- 전체화면 버튼: 리틀 스콰이어와 같은 모양, 기본 화면에서만 ---------- */
#mobile-screen,body.mobile-reading #mobile-screen{top:max(var(--ui-edge),env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:40px;height:40px;min-height:0;padding:0;border:0;border-radius:10px;background:#2b2d2fe0;color:#fff;font-size:20px;line-height:40px;text-align:center;box-shadow:0 2px 8px #0004;font-family:'Segoe UI Symbol','Noto Sans Symbols 2','Apple Symbols',system-ui,sans-serif;z-index:120}
#mobile-screen svg{display:block;margin:auto}
#mobile-screen:active{transform:scale(.94)}
body.fs-hide #mobile-screen{display:none!important}

/* ---------- 가상 스틱 · 행동 버튼 ---------- */
#pad{--stick-size:clamp(112px,30vh,140px);background:#1f2225d9;border:2px solid #6b7176;box-shadow:0 3px 12px #0005}
#pad .stick-track{inset:6%;border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23c9cdd1'%3E%3Cpath d='M50 6l7 9H43z'/%3E%3Cpath d='M50 94l7-9H43z'/%3E%3Cpath d='M6 50l9-7v14z'/%3E%3Cpath d='M94 50l-9-7v14z'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
#pad .stick-thumb{width:44%;height:44%;background:#8e9296;border:3px solid #eceff1;box-shadow:0 2px 6px #0006}
#pad.active{background:#26292ce6;border-color:#9aa1a6}
#interact,#look{border-radius:999px;min-height:48px;height:auto;padding:10px 18px;font-size:13px;font-weight:600;line-height:1.3;color:#fff;box-shadow:0 3px 12px #0005;text-align:center}
#interact{background:#1f2225e6;border:2px solid #6b7176;bottom:max(20px,env(safe-area-inset-bottom));right:max(16px,env(safe-area-inset-right))}
#interact:disabled{opacity:.6}
#look{background:#5a4220ee;border:2px solid #d8b56f}
body.touch-ui #pad{display:block}

/* ---------- 이벤트(삽화·자료) 화면: 전체화면·효과음 버튼은 두지 않는다 ---------- */
.murder-effects .me-sound,.murder-effects .me-fullscreen{display:none!important}
.murder-effects .me-actions{justify-content:flex-end;gap:8px}
.murder-effects .me-next{min-height:44px;min-width:180px;border-radius:var(--ui-r);font-size:14px}
.murder-effects h2{overflow-wrap:break-word}
html[lang=ko] .murder-effects h2,html[lang=ko] .murder-effects #murder-effects-text{word-break:keep-all}
.murder-effects #murder-effects-text{line-height:1.65}

/* ---------- 패널(지도·메뉴·사건 노트 등) ---------- */
#overlay-card button,.v9-book button{border-radius:var(--ui-r)}
#overlay-card button{min-height:var(--ui-h)}

/* ---------- 엔딩 화면: 그림 위 글자가 읽히도록 아래쪽 판을 둔다 ---------- */
#ending-screen>img{object-fit:cover}
#ending-screen:after{inset:28% 0 0;background:linear-gradient(transparent,#06101acc 35%,#06101af5)}
.ending-copy{left:50%;right:auto;transform:translateX(-50%);width:min(780px,calc(100vw - 32px));bottom:max(84px,calc(env(safe-area-inset-bottom) + 80px));max-height:calc(var(--app-h) - 120px);overflow:auto;text-shadow:0 1px 4px #000c}
.ending-copy>span{display:block;letter-spacing:.45em;font-size:11px;color:var(--ui-gold);margin-bottom:4px}
.ending-copy h1{margin:2px 0 8px;line-height:1.25}
.ending-copy p{line-height:1.65}
#ending-screen>button{border-radius:var(--ui-r);background:var(--ui-panel);border:1px solid var(--ui-line-2)}

/* ---------- 작은 가로 화면(휴대폰 가로) ---------- */
@media (max-height:500px){
 :root{--ui-h:36px;--ui-edge:6px}
 #hud button,#clock{font-size:12px;padding:0 10px}
 #hud #menu{font-size:16px}
 #clock{max-width:min(30vw,220px);font-size:11px}
 #mission{width:min(290px,calc(100vw - 2*var(--ui-edge) - 52px));padding:6px 10px}
 #mission b{font-size:12px}
 #mission span,#mission small{font-size:10px}
 #mobile-screen,body.mobile-reading #mobile-screen{width:36px;height:36px;line-height:36px;font-size:18px}
 #pad{--stick-size:clamp(100px,30vh,124px)}
 #interact,#look{min-height:42px;padding:8px 14px;font-size:12px;max-width:190px}
 .murder-effects .me-next{min-height:40px;min-width:150px}
 .ending-copy{bottom:64px;max-height:calc(var(--app-h) - 84px)}
 .ending-copy h1{font-size:22px;margin:0 0 4px}
 .ending-copy p{font-size:12px;line-height:1.5}
 #ending-screen>button{bottom:12px;min-height:40px;padding:8px 22px}
}
/* ---------- 세로 화면 ---------- */
@media (orientation:portrait) and (max-width:600px){
 #hud{max-width:calc(100vw - 60px)}
 #hud button{padding:0 10px;font-size:12px}
 #clock{font-size:0;padding:0 8px;max-width:none}
 #clock .v9-day{font-size:11px}
 #clock b{display:none}
 #mission{width:calc(100vw - 2*var(--ui-edge))}
 .murder-effects .me-next{width:100%}
}
@media (orientation:portrait){#ending-screen>img{object-fit:contain;object-position:center 18%}#ending-screen:after{inset:38% 0 0}}
/* 자료 확인 화면(넓은 화면): 오른쪽 글 칸 글자 크기 */
@media (min-height:501px){.murder-effects[data-kind=document] h2{font-size:clamp(22px,2.2vw,30px)}.murder-effects[data-kind=document] #murder-effects-text{font-size:clamp(14px,1.25vw,17px)}.murder-effects[data-kind=document] .me-label{font-size:13px}}

/* 게임 제목(시작 화면) · 진실 엔딩 마지막 문구 */
.v95-tagline{margin:0 0 14px;font-size:13px;letter-spacing:.12em;color:var(--ui-gold);text-transform:none}
html[lang=en] .v95-tagline{letter-spacing:.1em}
.v9-chapter-inner .v95-tagline+small{display:none}
.ending-coda{margin-top:10px!important;font-size:clamp(14px,1.8vw,18px)!important;font-style:italic;color:#f4e3bd;letter-spacing:.04em}
@media (max-height:500px){.v95-tagline{margin-bottom:6px;font-size:11px}}

/* ---------- v0.9.6: 2탄 UI 반영 ---------- */
/* 타자 효과 중에는 선택 버튼을 숨겨 둔다(대화창을 누르면 바로 다 보임) */
.v96-typing #answers{visibility:hidden}
.v96-typing #dialogue-box{cursor:pointer}
/* 메뉴·설정 한 화면: 가운데 카드 */
#overlay.v96-menu-ov{align-items:center;justify-content:center;background:#05090ecc;padding:12px}
#overlay.v96-menu-ov #overlay-card{position:relative;width:min(640px,100%);height:auto;max-height:calc(var(--app-h) - 24px);border-radius:14px;background:var(--ui-panel);border:1px solid var(--ui-line-2);box-shadow:0 12px 40px #0008;padding:18px 20px 16px}
.v96-menu-ov #overlay-card h2{font-size:18px;padding:0 44px 10px 0;margin:0 0 12px}
.v96-menu-ov .actions:empty{display:none}
.v96-x{position:absolute;top:10px;right:10px;width:36px;min-height:36px!important;height:36px;padding:0;font-size:22px;line-height:1;border-radius:9px;background:#ffffff14;border:1px solid var(--ui-line-2);color:var(--ui-text)}
.v96-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.v96-grid button{margin:0;font-size:13px}
.v96-grid button.primary,.v96-t-btns .primary{background:var(--ui-gold);color:#1b1408;border-color:var(--ui-gold);font-weight:700}
.v96-h{font-size:14px;color:var(--ui-gold);margin:16px 0 8px;letter-spacing:.04em}
.v96-set{display:grid;gap:8px}
.v96-row{display:grid;grid-template-columns:88px 1fr 48px;align-items:center;gap:10px;font-size:13px;color:var(--ui-text)}
.v96-row b{font-weight:600;color:var(--ui-muted);text-align:right;font-size:12px}
.v96-row input[type=range]{width:100%;accent-color:var(--ui-gold);height:28px}
.v96-langs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.v96-langs button{min-height:34px!important;padding:0 14px;font-size:12px}
.v96-langs button.on{border-color:var(--ui-gold);color:var(--ui-gold)}
.v96-menu-ov .settings-note{font-size:11px;color:var(--ui-muted);margin:10px 0 0}
@media (max-height:500px){#overlay.v96-menu-ov #overlay-card{padding:12px 14px}.v96-h{margin:10px 0 6px}.v96-grid{grid-template-columns:repeat(3,1fr);gap:6px}.v96-grid button{font-size:12px}}
/* 목적지 가이드 화살표(주인공 옆) */
#v96-guide{position:fixed;left:0;top:0;z-index:11;pointer-events:none;opacity:0;transition:opacity .2s}
#v96-guide.on{opacity:1}
#v96-guide i{position:absolute;left:0;top:0;width:30px;height:22px;transform-origin:50% 50%;background:#ffd65a;clip-path:polygon(100% 50%,0 0,22% 50%,0 100%);filter:drop-shadow(0 0 1.5px #5a4300) drop-shadow(0 2px 3px #0008);animation:v96-pulse 1.1s ease-in-out infinite}
#v96-guide small{position:absolute;left:0;top:14px;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:700;color:#2a1f00;background:#ffd65af2;border-radius:6px;padding:2px 7px}
@keyframes v96-pulse{50%{opacity:.55}}
.reading #v96-guide,.ending-view #v96-guide{display:none}
/* 시작 화면(이어하기) */
#v96-title{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(circle at 50% 45%,#16283a,#05090e 75%) center/cover;transition:opacity .22s}
#v96-title.out{opacity:0}
.v96-t-inner{width:min(460px,100%);text-align:center;color:#eef3f6}
.v96-t-inner h1{font-size:clamp(40px,9vw,64px);margin:6px 0 2px;letter-spacing:.02em}
.v96-t-sub{font-size:16px;color:#d9e4ec;margin:0 0 20px}
.v96-t-btns{display:grid;gap:8px}
.v96-t-btns button{min-height:46px;border-radius:10px;font-size:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.v96-t-btns small{font-size:11px;font-weight:500;opacity:.8}
.v96-t-btns button.warn{border-color:#e58b6b;color:#ffd2c2}
.v96-seen{font-size:12px;color:var(--ui-muted);margin:12px 0 0}
.v96-seen b{color:var(--ui-gold)}
#v96-title .v9-langs{margin-top:14px}
@media (max-height:500px){.v96-t-inner h1{font-size:40px}.v96-t-sub{margin-bottom:10px}.v96-t-btns{grid-template-columns:1fr 1fr 1fr}.v96-t-btns button{min-height:42px}}