/* Thai text stays readable independently of the pixel-art rendering. */
@font-face{font-family:"Zombie Sarabun";src:url('/assets/fonts/sarabun/Sarabun-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Zombie Sarabun";src:url('/assets/fonts/sarabun/Sarabun-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600 900;font-display:swap}
:root{--font-ui:"Zombie Sarabun",Tahoma,"Leelawadee UI",sans-serif;--muted:#b2beac;font-family:var(--font-ui);font-size:16px;line-height:1.6}
#game-shell{font-family:var(--font-ui);text-size-adjust:100%;-webkit-text-size-adjust:100%}
#game-shell :is(button,input,select,textarea){font-family:var(--font-ui);letter-spacing:normal}
#game-shell :is(input,select,textarea){font-size:16px;line-height:1.5}
#game-shell :is(p,li,label,summary){line-height:1.75}
#game-shell :is(h2,h3,h4,strong,b){font-weight:600}
#game-shell :is(.drawer,.trade-page){font-family:var(--font-ui);font-size:16px;line-height:1.7}
#game-shell .drawer :is(p,li,label,summary,button,.stat-row,.service-status,.inventory-capacity,.warehouse-wallet,.trade-wallet){font-size:15px;line-height:1.7}
#game-shell .drawer :is(small,.service-note,.stack-note,.skin-choice span,.trade-muted,.trade-badge,.quest-status,.quest-row-copy small,.map-network){font-size:13px;line-height:1.7;letter-spacing:normal}
#game-shell .drawer :is(h3,h4,.inventory-item h4,.shop-row h3,.quest-row-copy strong,.town-service strong,.map-card strong){font-size:17px;line-height:1.6}
#game-shell .drawer h2{font-size:26px;line-height:1.5}
#game-shell .drawer :is(.inventory-item p,.shop-row p,.town-service small,.portal-route small,.banner-preview small,.world-neighbours b,.world-neighbours span,.atlas-places b,.atlas-places small){font-size:14px;line-height:1.7}
#game-shell .drawer :is(.inventory-item,.shop-row,.service-option,.town-service,.trade-nearby){min-width:0;overflow-wrap:anywhere}
#game-shell .drawer :is(.service-primary,.service-secondary,.service-exit){font-size:16px;min-height:46px}
#game-shell :is(.eyebrow,.panel-eyebrow,.zone-tag,.weather,.map-key,.xp-label,.hp-label,.tiny,.player-heading small,.status-label,.connection,.connection small,.control-tip p,.control-tip small,.coordinate small){font-size:12px;line-height:1.6;letter-spacing:normal}
#game-shell .nav-tabs button{font-size:15px;line-height:1.5;white-space:nowrap}
#game-shell .nav-tabs{gap:12px}
#game-shell .player-heading h2{font-size:17px;line-height:1.5;overflow-wrap:anywhere}
#game-shell :is(.hp-label strong,.vitals strong){font-size:15px;font-variant-numeric:tabular-nums}
#game-shell .vitals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#game-shell .vitals label{font-size:12px;line-height:1.5;color:#b8c3ad}
#game-shell .vitals>div{min-width:0}
#game-shell :is(.buff-chip b,.buff-chip small){font-size:12px;line-height:1.6}
#game-shell :is(.target-card small,.target-card>span,.quest-tracker-heading,.quest-card [data-quest-progress]){font-size:12px;line-height:1.6;letter-spacing:normal}
#game-shell :is(.target-card h3,.quest-tracker-title){font-size:16px;line-height:1.6}
#game-shell .quest-card [data-quest-next]{font-size:14px;line-height:1.75}
#game-shell :is(.location p,.toast,.interaction-hint,.training-progress){font-size:14px;line-height:1.7}
#game-shell .location p{color:#c0c8b4}
#game-shell .location h1{font-size:28px;line-height:1.5;letter-spacing:normal}
#game-shell .map-key{gap:8px;flex-wrap:wrap}
#game-shell :is(.action-slot strong,.attack-button strong){font-size:17px;line-height:1.5}
#game-shell :is(.action-slot small,.attack-button small){font-size:12px;line-height:1.5;color:#d0c5a7}
#game-shell .action-slot{height:auto;min-height:84px;padding:8px 4px}
#game-shell .interaction-hint{max-width:90%;white-space:normal;text-align:center}
#game-shell :is(.chat-toggle,.chat-tabs button,.chat-message,.chat-empty,.chat-latest){font-size:14px;line-height:1.65}
#game-shell :is(.chat-scope,.chat-footer,.chat-message time,.chat-total,.chat-tabs b){font-size:12px;line-height:1.6}
#game-shell .chat-message strong{font-weight:600}
#game-shell .chat-form input[type=text]{font-size:16px;line-height:1.5}
#game-shell .chat-panel:not(.expanded){width:250px}
#game-shell :is(.auth-intro,.auth-story>p,.auth-switch-line,.auth-return-note,.creator-card>p,.auth-fields>p){font-size:15px;line-height:1.8}
#game-shell :is(.auth-field label,.auth-mode button,.auth-switch,.auth-home,.auth-steps li,.look-fields label){font-size:15px;line-height:1.65}
#game-shell :is(.auth-field-help,.auth-save-note,.auth-footer small,.auth-caps,.auth-legacy,.auth-error,.auth-field-note p,.auth-field-note small,.auth-field label>span,.auth-world-note,.auth-panel-kicker,.auth-eyebrow,.auth-fields>small){font-family:var(--font-ui);font-size:13px;line-height:1.7;letter-spacing:normal}
#game-shell .auth-submit{font-size:17px;line-height:1.6}
#game-shell .auth-screen input::placeholder{font-size:15px}
#game-shell :is(.skin-choice span,.look-fields small){font-size:13px;line-height:1.6}
#game-shell .auth-story h2{letter-spacing:normal}
#game-shell .auth-steps{gap:12px;flex-wrap:wrap}
#game-shell :is(.death-message p,.death-message>span){font-size:16px;line-height:1.8}
#game-shell :is(.atlas-legend,.atlas-instruction,.atlas-view-tabs>span,.world-legend,.world-hint,.world-detail p,.world-route>small,.bkk-hint,.bkk-region-info,.bkk-zone-tag){font-size:14px;line-height:1.7;letter-spacing:normal}
#game-shell .atlas-places small{color:#b4c7b7}
#game-shell :is(.brand small,.nav-tabs button span,.mobile-tabs [data-quest-count],.live-clock,.quest-status,.control-tip kbd,.chat-title kbd){font-size:12px;line-height:1.5;letter-spacing:normal}
#game-shell :is(.wallet,.equipment-slot b,.quest-filters span,.objective>strong,.quest-detail li strong){font-size:14px;line-height:1.7}
#game-shell :is(.bkk-heading h2 span,.bkk-start,.bkk-start small,.bkk-zoom,.bkk-map-footer,.bkk-map-footer span,.bkk-map-footer small,.bkk-subtitle,.bkk-zone,.bkk-here){font-size:13px;line-height:1.7}
#game-shell .bkk-pin-label small{font-family:var(--font-ui);font-size:16px;line-height:1.5}
@media(min-width:761px){
 #game-shell .player-card{width:270px}
 #game-shell .right-column{width:270px}
 #game-shell .drawer:not(.atlas-drawer){width:min(460px,calc(100vw - 60px))}
 #game-shell .quest-card{max-height:calc(100dvh - 355px);overflow-y:auto}
 #game-shell .topbar{gap:18px;padding-left:22px;padding-right:22px}
}
@media(min-width:761px) and (max-width:1100px){
 #game-shell .brand small,#game-shell .connection small{display:none}
 #game-shell .brand{font-size:21px;gap:6px}
 #game-shell .nav-tabs{gap:6px;margin-left:0}
 #game-shell .nav-tabs button{font-size:14px;padding-left:3px;padding-right:3px}
 #game-shell .connection{font-size:12px}
 #game-shell .topbar{gap:10px;padding:0 12px}
}
@media(max-width:760px){
 #game-shell .brand small{display:none}
 #game-shell .mobile-tabs{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;gap:0}
 #game-shell .mobile-tabs button{flex:0 0 auto;min-width:64px;padding:0 10px;font-size:14px;line-height:1.5;white-space:nowrap}
 #game-shell .player-card{width:calc(100% - 132px);max-width:232px;padding:10px}
 #game-shell .right-column{width:108px;right:10px}
 #game-shell .player-heading{gap:7px}
 #game-shell .player-heading h2{font-size:14px;line-height:1.5}
 #game-shell .player-heading small,#game-shell .status-label{font-size:12px}
 #game-shell .signal,#game-shell .vitals .vital-symbol{display:none}
 #game-shell .player-heading>div:nth-child(2){min-width:0}
 #game-shell .vitals{gap:5px}
 #game-shell .vitals label{font-size:12px}
 #game-shell .xp-label{gap:7px;flex-wrap:wrap}
 #game-shell .panel-eyebrow{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
 #game-shell .target-card{top:330px;max-width:calc(100% - 24px)}
 #game-shell .location h1{font-size:23px}
 #game-shell .location p{font-size:13px}
 #game-shell .weather{font-size:12px;margin-top:8px}
 #game-shell .action-slot{min-height:76px}
 #game-shell .action-dock:has([data-use]) .action-slot strong{font-size:13px;line-height:1.5;white-space:nowrap}
 #game-shell .action-dock:has([data-use]) .attack-button{width:80px;padding:6px 3px;gap:0}
 #game-shell .action-dock:has([data-use]) .attack-button>span:first-child{display:none}
 #game-shell .chat-panel{bottom:190px}
 #game-shell .location{bottom:260px}
 #game-shell .location p,#game-shell .weather,#game-shell .interaction-hint{display:none}
 #game-shell .bottom-hud{bottom:70px}
 #game-shell .chat-panel:not(.expanded){width:220px}
 #game-shell .auth-panel-content{padding:20px 18px}
 #game-shell .auth-home{font-size:13px;padding:8px}
 #game-shell .auth-wordmark small{font-size:10px;letter-spacing:.2px}
 #game-shell .auth-wordmark{font-size:20px}
 #game-shell .inventory-grid{gap:8px}
 #game-shell .inventory-item{padding:12px 9px}
 #game-shell .shop-row{gap:10px;flex-wrap:wrap}
 #game-shell .drawer:not(.atlas-drawer){padding:20px 14px;bottom:190px}
 #game-shell .toasts{max-height:30dvh;overflow:hidden}
}
@media(max-width:360px){
 #game-shell .topbar{padding:0 10px;gap:6px}
 #game-shell .brand{font-size:19px}
 #game-shell .brand small{display:none}
 #game-shell .connection{font-size:12px}
 #game-shell .connection small{display:none}
 #game-shell .portrait{display:none}
 #game-shell .auth-page{padding:0 12px}
 #game-shell .auth-header{gap:8px}
}
/* On short phones the minimap already names the area; reserve space for controls. */
@media(max-width:760px) and (max-height:700px){
 #game-shell .location,#game-shell .interaction-hint{display:none}
}