/* Language choices remain visible on the title screen at every viewport size. */
.title-controls {flex-wrap:wrap;justify-content:flex-end;}
.language-controls {display:flex;align-items:center;gap:4px;flex:none;padding:3px;border:1px solid #d9ccab40;border-radius:8px;background:#0c141ce8;}
.language-controls button {min-height:32px;padding:5px 10px;border:1px solid transparent;border-radius:5px;background:transparent;color:#b9c4c9;font:600 12px/1.3 system-ui,sans-serif;cursor:pointer;white-space:nowrap;}
.language-controls button[aria-pressed="true"] {background:#d5c39724;border-color:#d5c3977a;color:#f2e7cc;}
.language-controls button:focus-visible {outline:2px solid #ecdbad;outline-offset:2px;}
html[lang="en"] .class-name {font-size:clamp(12px,1.25vw,17px);letter-spacing:.015em;}
html[lang="en"] .selection-tagline {letter-spacing:.01em;}
html[lang="en"] .selection-header h1 {letter-spacing:.03em;font-size:clamp(30px,4.2vw,58px);}
html[lang="en"] .character-story .story-copy {min-width:0;}
html[lang="en"] .character-story .story-body p {overflow-wrap:anywhere;}
html[lang="en"] button,html[lang="en"] .item-info,html[lang="en"] .skill-info {overflow-wrap:break-word;}
html[lang="en"] .class-tag {max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[lang="en"] .header-menu-label {letter-spacing:0;}
html[lang="en"] .commandbar>button {font-size:11px;}
html[lang="en"] .quickbuttons small {font-size:10px;}
html[lang="en"] .story-heading {flex-wrap:wrap;}
@media(max-width:700px){.title-controls{max-width:calc(100vw - 20px);gap:5px;}.language-controls button{min-height:34px;padding:5px 8px;font-size:11px;}html[lang="en"] .selection-header{padding-top:8px;}html[lang="en"] .class-name{font-size:11px;}html[lang="en"] .character-story .story-body p{font-size:12px;line-height:1.5;}html[lang="en"] .header-label-wide{display:none;}html[lang="en"] .header-label-compact{display:inline;}html[lang="en"] .commandbar>button{font-size:10px;padding-left:5px;padding-right:5px;}html[lang="en"] .class-tag{max-width:105px;}html[lang="en"] .selection-tagline{font-size:10px;}}
@media(max-width:390px){.title-controls{gap:3px;}.language-controls{gap:1px;padding:2px;}.language-controls button{padding:4px 6px;}html[lang="en"] .class-name{font-size:10px;}html[lang="en"] .character-story .story-body p{font-size:11px;}}

html[lang="en"] #rare-loot-banner[data-fallback="true"] .rare-loot-row[data-kind="conversion"]::after {content:attr(data-count) ' duplicates';}

html[lang="en"] .moon-ending-suspended::before{content:"Paused";}

@media(max-width:700px){#start-screen{padding-top:calc(max(14px,env(safe-area-inset-top)) + 88px);}html[lang="en"] .moon-ending-title{letter-spacing:.12em;}html[lang="en"] .moon-ending-line{font-size:clamp(15px,4vw,19px);line-height:1.5;}html[lang="en"] .story-arrival-copy{letter-spacing:.08em;}}

@media(max-width:380px){#start-screen{padding-top:calc(max(14px,env(safe-area-inset-top)) + 104px);}}

/* Desktop HUD labels need their own width: the original 84.5px control was
   sized for Korean. Keep readable type and the existing compact icon layout. */
@media(min-width:1101px),(min-width:761px) and (min-height:601px) and (pointer:fine),(min-width:761px) and (min-height:601px) and (pointer:none){
 html[lang="en"] #game-ui>header{flex-wrap:wrap;row-gap:6px;}
 html[lang="en"] #game-ui>header #header-location{flex:1 1 12rem;}
 html[lang="en"] #game-ui>header .header-right{flex:0 1 auto;max-width:100%;flex-wrap:wrap;}
 html[lang="en"] #game-ui>header #header-world-tools .header-menu-button,
 html[lang="en"] #game-ui>header #journal-toggle,
 html[lang="en"] #game-ui>header #to-title,
 html[lang="en"] #game-ui>header #fullscreen-toggle{flex:0 0 auto;width:max-content;min-width:84.5px;height:auto;min-height:34px;padding:7px 10px;line-height:18px;}
 html[lang="en"] #game-ui>header .header-menu-label,
 html[lang="en"] #game-ui>header #fullscreen-label{flex:none;white-space:nowrap;}
}

/* Preserve the 44px Return target while giving its English caption room. */
@media(max-width:760px),(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 html[lang="en"] #game-ui .quickbar .wallet>#return{padding-inline:3px;}
}

/* Six-character English preset aliases get the whole caption width. Full
   names remain in each button's title/accessible label and the skill catalog. */
html[lang="en"] #game-ui .quickbuttons button[id^="spell-"]{padding-inline:1px;}
html[lang="en"] #game-ui .quickbuttons span[id^="spell-name-"]{font-size:10px;letter-spacing:0;overflow-wrap:normal;word-break:normal;}