/* Keep the field controls legible; the journal owns its existing guide content. */
#game-ui .field-bottom #return{justify-content:center;text-align:center;gap:6px}
#game-ui .field-bottom #return .return-label{display:inline;line-height:1.4;white-space:nowrap}
#game-ui aside#journal>*{flex-shrink:0}
#game-ui .journal-guide{margin-top:18px;padding-top:16px;border-top:1px solid #536249;min-width:0}
#game-ui .journal-guide h3{font-size:15px;font-weight:500;color:#dcc38e;margin-bottom:8px}
#game-ui .journal-guide .modal-intro{font-size:13px;margin-bottom:3px;color:#b7c2aa}
#game-ui .journal-guide .help-row{display:block;padding:13px 0;font-size:14px;line-height:1.8;overflow-wrap:anywhere;color:#c2cbb6}
#game-ui .journal-guide .help-row>span{display:block;min-width:0;margin-bottom:5px;color:#e0c791}
#game-ui .journal-guide .guide-credits{font-size:12px;line-height:1.8}
#game-ui .journal-guide a{color:#dccc9c;text-underline-offset:3px}
/* Auto margins center the pause menu when it fits, then yield to scrolling
   on short screens instead of hiding the first or last control. */
#game-ui #pause-overlay{padding:20px max(20px,env(safe-area-inset-right)) 20px max(20px,env(safe-area-inset-left));overflow:auto;justify-content:flex-start}
#game-ui #pause-overlay>*{flex-shrink:0;max-width:100%}
#game-ui #pause-overlay>span{margin-top:auto}
#game-ui #pause-overlay h2{text-align:center;line-height:1.5}
#game-ui #pause-overlay #resume,#game-ui #pause-overlay #save{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;width:min(14rem,100%);min-width:0;height:4.5rem;min-height:4.5rem;padding:.5rem 1rem;margin:12px 0 0;border-radius:0;font-size:.9375rem;line-height:1.4}
#game-ui #pause-overlay #resume{margin-top:24px}
#game-ui #pause-overlay #save small{font-size:.75rem;line-height:1.5;color:#adb79f}
#game-ui #pause-overlay #pause-save-status{max-width:min(360px,100%);min-height:2.8em;margin:12px 0 auto;text-align:center;line-height:1.5;font-size:13px;color:#e5d8b7;overflow-wrap:anywhere}
@media(max-width:760px),(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 #game-ui .field-bottom #return{width:auto;min-width:56px;min-height:40px;padding:5px 10px;font-size:12px}
 #game-ui .field-bottom #return .return-label{display:inline}
 #game-ui .field-bottom #return::after{content:none}
}
@media(orientation:landscape) and (max-height:600px){
 #game-ui #pause-overlay{padding-top:10px;padding-bottom:10px}
 #game-ui #pause-overlay>span{font-size:34px;line-height:1}
 #game-ui #pause-overlay h2{font-size:20px}
 #game-ui #pause-overlay>p{margin:7px}
 #game-ui #pause-overlay #resume,#game-ui #pause-overlay #save{height:4rem;min-height:4rem}
 #game-ui #pause-overlay #resume{margin-top:20px}
 #game-ui #pause-overlay #pause-save-status{margin-top:8px;min-height:1.5em}
}
/* The same message history stays behind the mobile 메시지 button. This feed
   never receives touches, keyboard focus, wheel gestures or screen-reader spam. */
#battle-messages{display:none;pointer-events:none}
#battle-messages *{pointer-events:none}
@keyframes battle-message-fade{0%,72%{opacity:1}100%{opacity:0}}
@media(max-width:1200px),(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 #game-ui #battle-messages{position:absolute;display:flex;flex-direction:column;align-items:flex-end;gap:2px;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(100% + 5px);min-width:0;background:none;border:0;box-shadow:none}
 #game-ui #battle-messages .battle-message{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;line-height:19px;color:#eef0df;text-align:right;text-shadow:1px 1px 1px #07110b,-1px -1px 1px #07110b,1px -1px 1px #07110b,-1px 1px 1px #07110b,0 1px 4px #000;animation: battle-message-fade linear both}
 #game-ui #battle-messages .loot{color:#f7dfa3}#game-ui #battle-messages .rare{color:#bdeaff}#game-ui #battle-messages .warn,#game-ui #battle-messages .xp-limit{color:#ff938c}
 #game-ui:has(#battle-messages:not(:empty)):not(:has(.character-story.story-cinematic:not([hidden]))):not(:has(#pause-overlay:not([hidden]))):not(:has(#journal:not([hidden]))) .field-status-stack{bottom:calc(var(--hud-height,190px) + 134px)}
 #game-ui:has(.character-story.story-cinematic:not([hidden])) #battle-messages,#game-ui:has(#pause-overlay:not([hidden])) #battle-messages,#game-ui:has(#journal:not([hidden])) #battle-messages,body:has(#modal[open]) #battle-messages{visibility:hidden}
}
@media(max-width:760px){
 #game-ui:has(#battle-messages:not(:empty)):not(:has(.character-story.story-cinematic:not([hidden]))):not(:has(#pause-overlay:not([hidden]))):not(:has(#journal:not([hidden]))) .field-status-stack{bottom:calc(var(--hud-height,202px) + 122px)}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 #game-ui #battle-messages{left:auto;width:calc(50% - max(12px,env(safe-area-inset-right)) - 8px)}
 #game-ui #battle-messages .battle-message{font-size:12px;line-height:18px}
 #game-ui:has(#battle-messages:not(:empty)):not(:has(.character-story.story-cinematic:not([hidden]))):not(:has(#pause-overlay:not([hidden]))):not(:has(#journal:not([hidden]))) .field-status-stack{bottom:calc(var(--hud-height,128px) + 50px);max-width:calc(50% - max(12px,env(safe-area-inset-left)) - 8px)}
}
@media(prefers-reduced-motion:reduce){#game-ui #battle-messages .battle-message{animation:none}}
/* A compact mobile control deck. One real map button keeps its alert state,
   while desktop retains the wallet-row placement and its original portrait. */
#mobile-face,.field-gold{display:none}
#game-ui .quickbar{position:relative}
#game-ui .quickbar .wallet{padding-right:78px}
#game-ui .commandbar .wallet-tools{position:absolute;top:9px;right:11px}
@media(min-width:761px) and (max-width:1200px){#game-ui .quickbar .wallet{padding-right:132px}}
@media(max-width:760px),(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 #game-ui{--hud-height:calc(168px + env(safe-area-inset-bottom))}
 #game-ui>footer{grid-template-rows:62px 88px}
 #game-ui .quickbar .wallet{display:none}
 #game-ui .commandbar .warehouse-command{display:none}
 #game-ui .commandbar .wallet-tools{display:contents;position:static}
 #game-ui .commandbar .wallet-tools button{display:flex;justify-content:center;min-height:28px;padding:4px 2px;font-size:10px;line-height:18px;white-space:nowrap;border-radius:0}
 #game-ui .commandbar .wallet-tools button:not(.map-attention){border:0;background:none;color:inherit}
 #game-ui .commandbar .wallet-tools #world-map-button.map-attention{padding:2px 0;border:2px solid #ff6570;color:#fff8f8;background:#b52230}
 #game-ui .commandbar{gap:2px;margin-top:4px}
 #game-ui .field-gold{position:absolute;z-index:2;display:flex;align-items:baseline;gap:4px;top:calc(93px + env(safe-area-inset-top));right:var(--safe-right,12px);max-width:43%;padding:0;background:none;border:0;color:#f1d99c;font-size:13px;line-height:21px;white-space:nowrap;text-shadow:1px 1px 1px #07110b,-1px -1px 1px #07110b,1px -1px 1px #07110b,-1px 1px 1px #07110b,0 1px 4px #000;pointer-events:none}
 #game-ui .field-gold b{font-weight:600;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis}#game-ui .field-gold small{font-size:10px}
 #game-ui .field-top{max-width:56%}#game-ui .location{min-width:0;gap:7px}#game-ui .location>div{min-width:0}#game-ui .location h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #game-ui>footer .character{gap:6px}
 #game-ui>footer .portrait{display:block;flex:0 0 44px;width:44px;height:50px;overflow:hidden;border-color:#aaa48666}
 #game-ui>footer #class-portrait{display:none}
 #game-ui>footer #mobile-face{display:block;width:100%;height:100%;object-fit:cover}
 #game-ui .field-bottom #action-label:empty{visibility:hidden}
 #fullscreen-toggle[data-fullscreen-available="false"],#title-fullscreen-toggle[data-fullscreen-available="false"]{display:none}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 #game-ui{--hud-height:calc(100px + env(safe-area-inset-bottom))}
 #game-ui>footer{grid-template-rows:minmax(0,1fr)}
 #game-ui .field-gold{top:calc(51px + env(safe-area-inset-top));font-size:12px;max-width:28%}
 #game-ui .field-top{max-width:40%}
 #game-ui>footer .portrait{flex-basis:36px;width:36px;height:46px}
 #game-ui .commandbar{margin-top:3px;gap:1px}
 #game-ui .commandbar .wallet-tools button{font-size:10px;padding-inline:2px}
 #game-ui .commandbar .wallet-tools #world-map-button.map-attention{padding-inline:0}
}
/* Readable short labels occupy their own caption. Counts and cooldowns stay
   separate, so a long name can never displace either numeric value. */
#game-ui .quickbuttons button{overflow:hidden}
#game-ui .quickbuttons small{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#game-ui .quickbuttons small>span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#game-ui .quickbuttons small b,#game-ui .quickbuttons .quick-cooldown{position:absolute;top:2px;right:3px;max-width:calc(100% - 9px);overflow:hidden;font-size:10px;line-height:12px;font-weight:600;font-variant-numeric:tabular-nums;color:#ffdf95;text-shadow:0 1px 2px #000}
#game-ui #buff-chip .buff-status b{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px),(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 #game-ui .quickbuttons small{font-size:10px;line-height:13px}
 #game-ui>footer .char-name .class-tag{display:none}
}
/* Touch/programmatic message focus has no frame; keyboard users keep a clear,
   moonlit focus cue on the same scrollable history region. */
#modal[data-view="log"] #modal-body:focus:not(:focus-visible){outline:none}
#modal[data-view="log"] #modal-body:focus-visible{outline:2px solid #d9bd83;outline-offset:3px}
#start-screen #records-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#start-screen .records-header{justify-content:flex-end}
#start-screen .record-tools>summary{padding:6px 10px;border:1px solid #a494696e;border-radius:3px;background:#26332b85;color:#d7c79e;font-size:13px;line-height:20px}
#start-screen .record-tools>summary:hover,#start-screen .record-tools[open]>summary{border-color:#c5b27c;color:#f0deb0;background:#34402daa}
#start-screen .record-tools>summary:focus-visible{outline:2px solid #d9bd83;outline-offset:3px}