/* Every local coordinate and frame size comes from the Ui3 PAK INI and SPR. */
.game-shell .native-toolbar{position:absolute;right:0;bottom:2px;width:762px;max-width:100%;height:55px;padding:0;border:0;background:none;box-shadow:none;z-index:5}
.game-shell .native-toolbar-viewport{width:100%;height:55px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;outline-offset:-2px}
.game-shell .native-toolbar-viewport::-webkit-scrollbar{display:none}
.game-shell .native-toolbar-scene{position:relative;width:762px;height:55px;min-width:762px;background:none;isolation:isolate}
.game-shell .native-toolbar-art{position:absolute;left:0;top:0;max-width:none;pointer-events:none}
.game-shell .native-toolbar-buttons{position:absolute;inset:0}
.game-shell .native-toolbar-button{position:absolute;display:block;margin:0;padding:0;min-width:0;min-height:0;overflow:hidden;border:0;border-radius:0;box-shadow:none;background:none;touch-action:pan-x}
.game-shell .native-toolbar-button-art{position:absolute;left:0;top:0;max-width:none;pointer-events:none}
@media(hover:hover){.game-shell .native-toolbar-button:hover .native-toolbar-button-art{left:calc(-1 * var(--native-frame-width) * var(--native-hover-frame))}}
.game-shell .native-toolbar-button:active .native-toolbar-button-art{left:calc(-1 * var(--native-frame-width) * var(--native-down-frame))}
.game-shell .native-toolbar-button:focus-visible{outline:1px solid #e7ce85;outline-offset:-5px}
.game-shell .native-toolbar-scene{overflow:hidden}
.game-shell .native-skill-cell{position:absolute;top:15px;display:block;width:32px;height:32px;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;touch-action:pan-x}
.game-shell .native-skill-socket{position:absolute;inset:0;width:32px;height:32px;pointer-events:none}
.game-shell .native-skill-label{position:absolute;left:0;top:22px;width:auto;height:10px;max-width:none;pointer-events:none}
/* User correction: remove unused positions; pack original visible pixels only. */
.game-shell .native-toolbar{width:max-content;max-width:100%;height:60px}
.game-shell .native-toolbar-viewport{height:60px}
.game-shell .native-toolbar-scene{width:max-content;min-width:0;height:60px;overflow:hidden;padding:0 4px}
.game-shell .native-toolbar-buttons{position:relative;inset:auto;display:flex;align-items:center;gap:3px;height:52px;width:max-content}
.game-shell .native-toolbar-art{width:100%;height:55px;top:5px;object-fit:fill}
.game-shell .native-toolbar-button{position:relative;left:auto;top:auto;flex:none}
.game-shell .native-skill-cell{position:relative;left:auto;top:auto;width:55px;height:52px;flex:none;overflow:hidden}
.game-shell .native-skill-socket{width:55px;height:52px}
.game-shell .native-skill-label{left:5px;top:auto;bottom:4px;height:10px;width:auto}
@media(hover:hover){.game-shell .native-toolbar-button:hover .native-toolbar-button-art{left:calc(-1 * var(--native-crop-x) - var(--native-frame-width) * var(--native-hover-frame))!important}}
.game-shell .native-toolbar-button:active .native-toolbar-button-art{left:calc(-1 * var(--native-crop-x) - var(--native-frame-width) * var(--native-down-frame))!important}
/* Remove crossed-out ornament and close the remaining bottom HUD gaps. */
.game-shell .native-toolbar,.game-shell .native-toolbar-viewport,.game-shell .native-toolbar-scene{height:56px}
.game-shell .native-toolbar-scene{padding:0 3px;background:none}
.game-shell .native-toolbar-art{display:none}
/* Center the packed strip; fit it uniformly on portrait phones. */
.game-shell .native-toolbar{left:50%;right:auto;transform:translateX(-50%);width:483px;max-width:100%}
@media(orientation:portrait) and (max-width:482px){
 .game-shell .native-toolbar{width:calc(100% - 8px);height:calc((100vw - 8px) * 56 / 483)}
 .game-shell .native-toolbar-viewport{height:100%;overflow:hidden}
 .game-shell .native-toolbar-scene{transform:scale(calc((100vw - 8px) / 483px));transform-origin:top left}
}
/* 16/10 marked reference: source coin + upgrade; ride above chat; full strip fits. */
.game-shell{--bottom-bar-height:56px}
.game-shell .native-toolbar{width:534px;max-width:calc(100% - 8px);height:var(--bottom-bar-height);bottom:max(2px,env(safe-area-inset-bottom))}
.game-shell .native-toolbar-viewport{height:100%;overflow:hidden}
.game-shell .native-toolbar-scene{width:534px;min-width:534px;height:56px;padding:0 3px;box-sizing:border-box;transform:none}
.game-shell .native-toolbar-buttons{gap:3px}
.game-shell .chat-group{bottom:calc(var(--bottom-bar-height) + max(6px,env(safe-area-inset-bottom)))}
.game-shell .chat-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px;height:36px;margin:0 0 3px}
.game-shell .chat-actions .native-toolbar-button{position:relative;flex:none;min-height:0;padding:0;border:0;background:none;box-shadow:none;overflow:hidden}
.game-shell .chat-actions .native-toolbar-button:focus-visible{outline:1px solid #efd17b;outline-offset:0}
.game-shell .chat[hidden]{display:none!important}
.game-shell #chatForm,.game-shell .chat.collapsed #chatForm{height:22px;min-height:22px;align-items:center}
.game-shell #chatInput,.game-shell #chatChannel,.game-shell #chatForm button{height:20px;min-height:20px;line-height:18px;padding-top:0;padding-bottom:0;box-sizing:border-box}
.game-shell #chatInput{padding-left:4px;padding-right:4px}
.game-shell .chat-content{position:relative;padding:4px 5px;font:10px/1.45 TGPC,serif}
.game-shell .chat-message{display:block;margin:0;padding:2px 0;min-width:0;overflow-wrap:anywhere}
.game-shell .chat-sender,.game-shell .chat-text{display:inline;padding:0;white-space:pre-wrap;overflow-wrap:anywhere}
.game-shell .chat-sender{color:#f4d766}
.game-shell .chat-text{color:#eee8d6}
.game-shell #chatForm{background:#14180fed;border-color:#766638aa}
.game-shell #chatInput{background:#10150eee;color:#fff2cf}
.game-shell #chatInput::placeholder{color:#adad8e;opacity:1}
.game-shell #chatChannel,.game-shell #chatForm button{background:#202414ed}
.game-shell .extras .outfit-shortcut{position:relative;flex:none;min-height:0!important;min-width:0;padding:0;overflow:hidden;margin:3px 0 0}
@media(max-width:533px){
 .game-shell{--bottom-bar-height:calc((100vw - 8px) * 56 / 534)}
 .game-shell .native-toolbar{width:calc(100% - 8px)}
 .game-shell .native-toolbar-scene{transform:scale(calc((100vw - 8px) / 534px));transform-origin:top left}
}
@media(orientation:portrait){
 .game-shell .joystick{bottom:calc(var(--bottom-bar-height) + 30px + env(safe-area-inset-bottom))}
 .game-shell .chat-group{width:calc(100% - 176px);max-width:300px}
 .game-shell .chat-content{height:clamp(96px,15vh,140px)}
 .game-shell #chatChannel{flex-basis:58px;width:58px}
 .game-shell #chatForm button{flex-basis:34px;width:34px;font-size:10px}
}
.game-shell .uniform-round:hover{filter:brightness(1.12)}
.game-shell .uniform-round:active{filter:brightness(.85)}
@media(orientation:landscape){.game-shell .chat-content{height:clamp(64px,18vh,88px)}}
@media(orientation:portrait) and (max-width:420px){
 .game-shell .player{--hud-scale:clamp(.5,calc((100vw - 190px) / 242px),.86)}
 .game-shell .mission-panel{width:min(174px,calc(100vw - 190px))}
}
/* Share the existing minimap palette across the three HUD panels. */
.game-shell{--hud-panel-background:linear-gradient(130deg,#23190fef,#090b09e8);--hud-panel-edge:#b98b40;--hud-panel-inset:#372718}
.game-shell .minimap,.game-shell .mission-panel,.game-shell .chat{background:var(--hud-panel-background);border:1px solid var(--hud-panel-edge);border-radius:2px;box-shadow:inset 0 0 0 2px var(--hud-panel-inset),0 3px 15px #0007}
.game-shell #missionToggle{background:#332718b0}
.game-shell .chat-content{background:transparent;border:0}
.game-shell #chatForm{background:#0b0d09f5;border:0;border-top:1px solid #b98b4099}
.game-shell #chatInput{background:#080b07f5}
.game-shell #chatChannel,.game-shell #chatForm button{background:#21190ff0}
/* Overlay areas retain the minimap hue with a much lighter opacity. */
.game-shell .mission-panel,.game-shell .chat{background:linear-gradient(130deg,#23190f45,#090b093d);border-color:#b98b4088;box-shadow:inset 0 0 0 1px #37271855}
.game-shell #missionToggle{background:#33271833}
@font-face{font-family:TG Vietnamese Serif;src:url(assets/fonts/NotoSerif-400.ttf) format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:TG Vietnamese Serif;src:url(assets/fonts/NotoSerif-600.ttf) format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:TG Vietnamese Serif;src:url(assets/fonts/NotoSerif-700.ttf) format('truetype');font-style:normal;font-weight:700;font-display:swap}
body:not(.ingame),body:not(.ingame) button,body:not(.ingame) input,body:not(.ingame) select,body.selection h1,body.selection h2,body.selection strong,body.selection span,body.selection label{font-family:TG Vietnamese Serif,Georgia,serif!important}
.game-shell .mission-panel,.game-shell .mission-panel button,.game-shell .chat,.game-shell .chat input,.game-shell .chat select,.game-shell .chat button,.game-shell .chat-content,.game-shell .map-title,.game-shell .map-coordinates,.game-shell .map-buttons button{font-family:TG Vietnamese Serif,Georgia,serif!important}
/* Seven compact source-effect icons; mission drawer slides into the left edge. */
.game-shell{--left-hud-width:210px;--effect-top:94px;--mission-top:142px;--mission-height:128px}
.game-shell .effect-bar{position:absolute;left:max(8px,env(safe-area-inset-left));top:var(--effect-top);width:min(144px,var(--left-hud-width));height:18px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;align-items:start;z-index:4;pointer-events:none}
.game-shell .effect-icon{display:block;width:100%;height:auto;aspect-ratio:1;max-width:18px;image-rendering:auto;filter:drop-shadow(0 1px 1px #0008)}
.game-shell .mission-panel{top:var(--mission-top);width:var(--left-hud-width);height:var(--mission-height);box-sizing:border-box;transition:transform 160ms ease;z-index:4}
.game-shell #missionToggle{position:relative;min-height:24px;height:24px}
.game-shell .mission-body{height:calc(100% - 24px);min-height:0;overflow-y:auto;scrollbar-width:thin}
.game-shell .mission-panel.collapsed{transform:translateX(calc(-100% + 16px))}
.game-shell .mission-panel.collapsed .mission-body{display:block;visibility:hidden;pointer-events:none}
.game-shell .mission-panel.collapsed #missionToggle{position:absolute;right:0;top:0;width:24px;height:100%;min-height:0;padding:5px 2px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.game-shell .mission-panel.collapsed #missionToggle>span:first-child{writing-mode:vertical-rl;white-space:nowrap}
.game-shell .mission-chevron{font:18px/1 Georgia,serif}
.game-shell .preview-badge{top:calc(var(--mission-top) + var(--mission-height) + 8px);left:max(8px,env(safe-area-inset-left))}
@media(orientation:portrait){.game-shell{--left-hud-width:174px;--mission-height:clamp(96px,15vh,128px)}}
@media(orientation:portrait) and (max-width:420px){.game-shell{--left-hud-width:min(174px,calc(100vw - 190px))}}
@media(orientation:landscape) and (max-height:550px){.game-shell{--left-hud-width:180px;--effect-top:76px;--mission-top:108px;--mission-height:clamp(64px,calc(100dvh - 292px),100px)}}
@media(prefers-reduced-motion:reduce){.game-shell .mission-panel{transition:none}}
/* Matched scrollable overlays, raised together below the player HUD. */
/* Geometric direction marks cannot fall back to iPhone colour emoji. */
.game-shell .joystick>span{width:0;height:0;font-size:0;line-height:0;border:6px solid transparent;pointer-events:none}
.game-shell .joystick .joy-up{border-top:0;border-bottom:10px solid currentColor}
.game-shell .joystick .joy-down{border-bottom:0;border-top:10px solid currentColor}
.game-shell .joystick .joy-left{border-left:0;border-right:10px solid currentColor}
.game-shell .joystick .joy-right{border-right:0;border-left:10px solid currentColor}
.game-shell{--effect-top:86px;--mission-top:116px;--overlay-width:210px;--overlay-height:200px;--left-hud-width:var(--overlay-width);--mission-height:var(--overlay-height)}
.game-shell .mission-panel,.game-shell .chat{width:var(--overlay-width);height:var(--overlay-height);box-sizing:border-box}
.game-shell .chat-group{width:var(--overlay-width);max-width:none}
.game-shell .mission-body{height:calc(100% - 24px);box-sizing:border-box}
.game-shell .mission-body{direction:rtl;text-align:left}
.game-shell .mission-body>*{direction:ltr}
.game-shell .chat-content{height:calc(100% - 22px);box-sizing:border-box}
.game-shell .mission-body,.game-shell .chat-content{overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#b9944c #36281840}
.game-shell .mission-body::-webkit-scrollbar,.game-shell .chat-content::-webkit-scrollbar{width:5px}
.game-shell .mission-body::-webkit-scrollbar-track,.game-shell .chat-content::-webkit-scrollbar-track{background:#36281840;border-left:1px solid #b98b4044}
.game-shell .mission-body::-webkit-scrollbar-thumb,.game-shell .chat-content::-webkit-scrollbar-thumb{background:#b9944c;border-radius:2px}
.game-shell .map-title{position:relative;padding-right:18px;min-height:18px}
.game-shell #minimapToggle{position:absolute;right:0;top:0;width:18px;height:18px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:#e8c574;font:18px/18px Georgia,serif;cursor:pointer}
.game-shell #minimapToggle:focus-visible{outline:1px solid #e8c574}
.game-shell .map-hud.map-collapsed .mini-wrap,.game-shell .map-hud.map-collapsed .extras{display:none}
@media(orientation:portrait){.game-shell{--effect-top:clamp(54px,calc((100vw - 190px) * 80 / 242 + 10px),86px);--mission-top:calc(var(--effect-top) + 40px);--overlay-width:min(210px,calc(100vw - 190px));--overlay-height:clamp(128px,23dvh,200px)}}
@media(orientation:landscape) and (max-height:550px){.game-shell{--effect-top:74px;--mission-top:100px;--overlay-width:180px;--overlay-height:clamp(72px,22dvh,100px)}}