#journey-canvas { position:fixed; width:100%; height:100%; inset:0; object-fit:contain; background:#171d21; z-index:3; touch-action:none; image-rendering:pixelated; }
#journey-ui [hidden] { display:none !important; }
#journey-ui button { min-height:42px; border:1px solid #a59058; border-radius:4px; color:#fff4d3; background:#202d2c; font:600 14px system-ui; padding:9px 15px; cursor:pointer; }
#journey-ui button:hover { background:#364540; }
#journey-ui button:focus-visible { outline:3px solid #f2d481; outline-offset:3px; }
#chapter-hud { position:fixed; left:20px; right:20px; top:16px; z-index:7; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; pointer-events:none; color:#fff6df; text-shadow:0 2px 3px #000; }
#chapter-hud>div { display:grid; gap:4px; max-width:calc(100% - 54px); padding:8px 12px; background:#172321d9; border-left:2px solid #d6b876; }
#chapter-hud small { font:10px system-ui; }
#chapter-place { font:600 20px Georgia,serif; }
#chapter-objective { font:14px system-ui; }
#chapter-hud button { pointer-events:auto; }
#journey-pad { position:fixed; bottom:18px; left:18px; z-index:7; display:grid; grid-template-columns:repeat(3,44px); grid-template-rows:repeat(2,44px); gap:4px; touch-action:none; }
#journey-pad button { padding:0; opacity:.78; font-size:23px; touch-action:none; user-select:none; }
#journey-pad, #journey-pad button { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
#journey-pad [data-dir=up] { grid-column:2; }
#journey-pad [data-dir=left] { grid-column:1; grid-row:2; }
#journey-pad [data-dir=down] { grid-column:2; grid-row:2; }
#journey-pad [data-dir=right] { grid-column:3; grid-row:2; }
#journey-action { position:fixed; right:20px; bottom:28px; z-index:7; max-width:calc(100% - 190px); }
#chapter-dialogue { position:fixed; z-index:9; bottom:18px; left:50%; transform:translateX(-50%); width:min(650px,calc(100% - 64px)); box-sizing:border-box; color:#f9f0dc; background:#1b2827f7; padding:18px 22px; border:2px solid #c9ad6d; box-shadow:0 5px 24px #0008; }
#dialogue-speaker { color:#f6d083; font:600 18px Georgia,serif; }
#dialogue-copy { font:16px/1.55 system-ui; margin:10px 0 14px; }
#dialogue-next { float:right; }
#chapter-dialogue::after { content:'';display:block;clear:both; }
#journey-menu { width:min(460px,calc(100% - 48px)); box-sizing:border-box; max-height:88dvh; overflow:auto; padding:24px; border:1px solid #baa064; border-radius:6px; color:#f6eddb; background:#1b2827; font:15px/1.5 system-ui; }
#journey-menu::backdrop { background:#091010b8; }
#journey-menu h2 { font:28px Georgia,serif; margin:0 0 10px; }
#journey-menu-actions { display:grid; gap:8px; margin:18px 0; }
#journey-menu summary { cursor:pointer; color:#e2c483; }
#journey-menu a { color:#e2c483; }
#journey-menu-close { margin-top:16px; }
.chapter-mode .map-tools,.chapter-mode #map-overview,.chapter-mode #lore-panel { display:none !important; }
.narberth-mode .map-tools,.narberth-mode #map-overview,.narberth-mode #lore-panel { display:none !important; }
#narberth-hud { position:fixed; top:12px; left:16px; right:16px; z-index:7; display:flex; align-items:center; justify-content:space-between; gap:12px; pointer-events:none; }
#narberth-hud strong { font:600 22px Georgia,serif; color:#fff9df; text-shadow:0 2px 3px #203c2c; }
#narberth-hud button { pointer-events:auto; }
#welcome-dialog { width:min(440px,calc(100% - 32px)); max-height:calc(100dvh - 32px); box-sizing:border-box; overflow:auto; padding:28px; border:1px solid #baa064; border-radius:6px; color:#f6eddb; background:#1b2827; font:15px/1.5 system-ui; box-shadow:0 12px 48px #0006; }
#welcome-dialog::backdrop { background:#09101099; }
#welcome-title { margin:0 26px 8px 0; font:26px/1.18 Georgia,serif; letter-spacing:0; }
#welcome-prompt { margin:0 0 20px; color:#d1d7cf; }
#welcome-dialog .welcome-close { position:absolute; right:8px; top:8px; width:36px; height:36px; padding:0; border:0; background:transparent; color:#f6eddb; cursor:pointer; font:26px system-ui; }
.welcome-choices { display:grid; gap:10px; }
.welcome-choices button { display:grid; gap:3px; min-height:76px; width:100%; padding:12px 16px; text-align:left; border:1px solid #748078; border-radius:4px; background:#243630; color:#f6eddb; cursor:pointer; font:14px/1.4 system-ui; overflow-wrap:break-word; }
.welcome-choices button strong { font-size:16px; color:#f0d397; }
.welcome-choices button span { color:#d7ded7; }
.welcome-choices button:hover { border-color:#e2c483; background:#31483d; }
#welcome-dialog :focus-visible { outline:2px solid #f2d481; outline-offset:3px; }
.welcome-editing { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:20px; font-size:13px; }
.welcome-editing a { color:#d9c593; text-underline-offset:3px; }
@media(max-width:400px) { #welcome-dialog { padding:24px 20px; } #welcome-title { font-size:24px; } }
body .map-tools { display:flex; flex-wrap:wrap; max-width:calc(100% - 48px); }
body .map-tools label:not(.character-picker) { flex:1; min-width:110px; }
body.follow-mode .map-tools { top:12px; bottom:auto; }
body.follow-mode #lore-panel { max-height:calc(100dvh - 230px); overflow:auto; }
@media(max-width:600px) { #chapter-hud { top:8px;left:8px;right:8px; } #chapter-place { font-size:17px; } #chapter-objective { font-size:12px; } #chapter-dialogue { width:calc(100% - 20px); padding:12px 16px; bottom:10px; } #dialogue-copy { font-size:14px;line-height:1.45; } }