/* A20 화면 정리 (2026-09-12, 사용자 요청 "화면이 난잡하다"): 항상 보이는 것은 조이스틱 · 공격 · 회피 · (기술) · 설정 · 지역 이름 · 머리 위 바 · 의뢰 한 줄 · 토스트 만.
   이 파일은 마지막에 읽혀 앞의 배치 규칙을 덮는다. 선택자에 body 를 붙여 우선한다. */
:root{--hud-top:max(10px,env(safe-area-inset-top));--hud-left:max(12px,env(safe-area-inset-left));--hud-right:max(12px,env(safe-area-inset-right));--hud-bottom:max(18px,env(safe-area-inset-bottom))}
body #buff-hud{position:fixed;top:calc(var(--hud-top) + 44px);left:var(--hud-left);z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:190px;pointer-events:none}
body #buff-hud[hidden],body.lobby-active #buff-hud{display:none}
body #buff-hud .buff-chip{min-height:22px;padding:2px 5px;border-color:var(--ui-hud-a20-buff-hud-buff-chip-border-color);background:var(--ui-hud-a20-buff-hud-buff-chip-background);box-shadow:0 1px 3px var(--ui-hud-a20-buff-hud-buff-chip-shadow)}
body #buff-hud .buff-chip.debuff{border-color:var(--debuff-color,var(--ui-hud-a20-buff-hud-buff-chip-debuff-border-color));background:var(--ui-hud-a20-buff-hud-buff-chip-debuff-background)}
body #buff-hud .debuff-pulse{animation:debuff-pulse .6s ease-out 1}
@keyframes debuff-pulse{0%,100%{transform:scale(1)}35%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){body #buff-hud .debuff-pulse{animation:none}}
body #buff-hud .buff-name{font:600 11px/1.2 system-ui}
@media(orientation:portrait){body #buff-hud{top:94px}}
/* 좌상 설정 단추 · 우상 지역 이름(+미니맵 자리) */
body #settings-button{position:fixed;top:var(--hud-top);left:var(--hud-left);width:36px;height:36px;padding:0;border-radius:50%;font-size:18px;line-height:1;background:var(--ui-hud-a20-settings-button-background);border:1px solid var(--ui-hud-a20-settings-button-border);z-index:5;opacity:.9}
body #region-hud{position:fixed;top:var(--hud-top);right:var(--hud-right);display:flex;flex-direction:column;align-items:flex-end;gap:4px;z-index:5;pointer-events:none}
body #region-hud>*{pointer-events:auto}
body #region-hud strong{display:block;font-size:13px;font-weight:600;padding:7px 11px;background:var(--ui-hud-a20-region-hud-background);border:1px solid var(--ui-hud-a20-region-hud-border);border-radius:10px;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body #region-hud #social-button{position:static;order:-1;width:34px;height:34px;padding:0;border-radius:50%;font-size:16px;line-height:1;background:var(--ui-hud-a20-region-hud-social-button-background);border:1px solid var(--ui-hud-a20-region-hud-social-button-border);opacity:.9;margin-bottom:0;align-self:flex-end}
body #region-hud{flex-direction:row;align-items:center;gap:6px}
body #minimap{width:96px;height:64px;border-radius:8px;background:var(--ui-hud-a20-minimap-background);border:1px solid var(--ui-hud-a20-minimap-border)}
/* 좌하 작은 원형 조이스틱 */
body #stick{left:max(16px,env(safe-area-inset-left));bottom:var(--hud-bottom);width:76px;height:76px;border:2px solid var(--ui-hud-a20-stick-border);background:var(--ui-hud-a20-stick-background)}
body #stick>span{font-size:22px;opacity:.25}
body #knob{width:32px;height:32px;border-width:2px}
/* 우하 원형 공격·회피, 위에 기술, 상황 단추 */
body #combat-controls{position:static}
body #sword-attack,body #evade,body #skill-button{position:fixed;padding:0;border-radius:50%;overflow:hidden;white-space:nowrap;box-shadow:0 3px 10px var(--ui-hud-a20-sword-attack-evade-skill-button-shadow)}
body #sword-attack{right:max(18px,env(safe-area-inset-right));bottom:var(--hud-bottom);width:64px;height:64px;font-size:13px;background:var(--ui-hud-a20-sword-attack-background);border:2px solid var(--ui-hud-a20-sword-attack-border)}
body #evade{right:max(96px,calc(env(safe-area-inset-right) + 84px));bottom:calc(var(--hud-bottom) + 18px);width:52px;height:52px;font-size:11px;background:var(--ui-hud-a20-evade-background);border:2px solid var(--ui-hud-a20-evade-border)}
body #evade::after,body #skill-button::after{content:'';position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(var(--ui-hud-a20-evade-skill-button-background) calc(var(--cd,0) * 100%),transparent 0);pointer-events:none;opacity:0;transition:opacity .15s}
body #evade.cooling::after,body #skill-button.cooling::after{opacity:1}
body #evade.evading{box-shadow:0 0 0 3px var(--ui-hud-a20-evade-evading-shadow)}
body #skill-button{right:max(26px,calc(env(safe-area-inset-right) + 8px));bottom:calc(var(--hud-bottom) + 76px);width:50px;height:50px;font-size:10px;line-height:1.1;background:var(--ui-hud-a20-skill-button-background);border:2px solid var(--ui-hud-a20-skill-button-border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
body #skill-button #skill-name{max-width:42px;overflow:hidden;text-overflow:ellipsis;font-size:9px}
body #skill-timer{font-size:9px}
body #sword-attack:disabled,body #evade:disabled,body #skill-button:disabled{opacity:.45}
body #interact,body.online #interact,body #fish-button,body #cook-button{position:fixed;right:max(96px,calc(env(safe-area-inset-right) + 84px));bottom:calc(var(--hud-bottom) + 84px);min-width:0;min-height:40px;max-width:44vw;padding:8px 14px;border-radius:20px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3}
body #fish-button,body #cook-button{bottom:calc(var(--hud-bottom) + 132px)}
body #cook-button{right:max(96px,calc(env(safe-area-inset-right) + 84px))}
body #exit-choice{right:max(96px,calc(env(safe-area-inset-right) + 84px));bottom:calc(var(--hud-bottom) + 132px);max-width:44vw}
/* 채팅 토스트: 소통 창을 닫아도 어디서나 보인다(조이스틱 위) */
body #chat-toast{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:calc(var(--hud-bottom) + 100px);width:min(46vw,300px);display:flex;flex-direction:column;gap:3px;pointer-events:none;z-index:2}
body #chat-toast p{margin:0;padding:4px 8px;font-size:11px;line-height:1.35;background:var(--ui-hud-a20-chat-toast-background);border-radius:8px;color:var(--ui-hud-a20-chat-toast-text);overflow-wrap:anywhere}
body #chat-toast b{color:var(--ui-hud-a20-chat-toast-text-2);font-weight:600}
/* F324: 받은 파티 초대 알림 — 채팅 토스트 파티 줄과 같은 꼴(같은 토큰), 세로 화면은 토스트 자리 맨 아래 칸. 토스트는 알림 높이(--party-invite-space, chat-ui.mjs)만큼 아래를 비운다.
   데스크톱과 낮은 가로 화면(토스트가 91px 안팎이라 귓속말 줄이 가려짐)은 💬 단추 오른쪽, 💬 와 가운데 맞춤. 단추는 기존 단추 꼴, 누르는 자리 44px 이상. 창이 열리면 다른 HUD 단추처럼 숨는다(ui-skin.css 와 같은 조건). */
body #party-invite-alert{position:fixed;left:var(--move-left,max(14px,env(safe-area-inset-left)));right:var(--move-right,auto);bottom:calc(var(--hud-bottom) + 128px);width:min(300px,calc(100vw - var(--touch-left,14px) - var(--touch-right,14px) - 176px));display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;padding:4px 8px;border-left:3px solid var(--ui-panel-a44-desktop-chat-log-chat-toast-party-party-border-color);border-radius:14px;background:var(--ui-panel-a47-mobile-chat-toast-chat-log-party-party-background);color:var(--ui-panel-a44-desktop-chat-log-chat-toast-party-party-text);font-size:12px;line-height:1.4;overflow-wrap:anywhere;pointer-events:auto;z-index:8}
body #party-invite-alert[hidden]{display:none}
body #party-invite-alert span{flex:1 1 clamp(120px,(236px - 100%) * 999,100%);min-width:0}
body #party-invite-alert button{min-width:52px;min-height:44px;margin:0;padding:0 10px;font-size:12px}
@media(orientation:portrait){body:not(.desktop-ui) #party-invite-alert{bottom:calc(var(--hud-bottom) + 144px)}}
body:not(.desktop-ui) #chat-toast{padding-bottom:var(--party-invite-space,0px)}
@media(orientation:landscape) and (max-height:550px){body:not(.desktop-ui) #chat-toast{padding-bottom:0}body:not(.desktop-ui) #party-invite-alert{left:calc(var(--touch-left) + 152px);right:auto;bottom:calc(var(--hud-bottom) + 14px);width:min(300px,calc(100vw - var(--touch-left) - var(--touch-right) - 420px))}body.left-hand:not(.desktop-ui) #party-invite-alert{left:auto;right:calc(var(--touch-right) + 152px)}}
body.desktop-ui #party-invite-alert{left:84px;right:auto;bottom:calc(clamp(160px,23vh,230px) + 80px);width:min(360px,calc(100vw - 108px))}
html body:has(:is(dialog[open],[role="dialog"]:not(dialog),#bag):not([hidden]):not([hidden] *):not(dialog:not([open]) *)) #party-invite-alert{visibility:hidden!important;pointer-events:none!important}
body #region-hud #social-button.has-invite::after{content:'';position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--ui-panel-a48-status-button-has-new-title-background);box-shadow:0 0 0 2px var(--ui-panel-a48-status-button-has-new-title-shadow)}
body #chat-toast p[data-reply]{display:flex;align-items:center;min-height:44px;cursor:pointer}
/* 위쪽 알림 자리(단추 줄이 없어져서 위로) */
body #alerts{top:calc(var(--hud-top) + 44px);max-width:min(280px,34vw)}
body #boss-hud{top:calc(var(--hud-top) + 44px)}
body #battle-status{bottom:calc(var(--hud-bottom) + 50px)}
body #fish-status{bottom:calc(var(--hud-bottom) + 50px)}
/* 설정 메뉴 */
body #menu-backdrop{position:fixed;inset:0;background:var(--ui-panel-a20-menu-backdrop-background);z-index:8}
body #menu-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,92vw);max-height:90dvh;overflow:auto;padding:12px 16px 16px;background:var(--ui-panel-menu-bg);border:1px solid var(--ui-panel-menu-line);border-radius:16px;z-index:9;box-sizing:border-box}
body #menu-panel .panel-heading{margin-bottom:10px}
body .menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
body .menu-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 4px;min-height:84px;min-width:0;font-size:12px;white-space:normal;text-align:center;overflow-wrap:anywhere}
body .menu-grid button>span:last-child{max-width:100%;line-height:1.35;overflow-wrap:anywhere}
/* Direct-text entries need the same escape from the Japanese keep-all rule. */
html:lang(ja) body section#menu-panel .menu-grid :is(#install-open,#menu-dex){overflow-wrap:anywhere!important}
body .menu-grid .icon{font-size:22px;line-height:1}
body .menu-grid .badge{margin-left:3px}
/* F410: 「오늘·이번 주」 안 읽음 점(A275 .goals-dot)은 숫자 없는 연한 빈 칸으로 글 아래에 떨어짐 — 메뉴 단추에서는 숨김(안 읽음은 aria-label 에 그대로) */
body #menu-goals .goals-dot{display:none}
/* F410 #11: 안 쓴 능력치 포인트 — 메뉴 단추 오른쪽 위 작은 숫자(가방·의뢰 숫자와 같은 .badge) */
body #settings-button .badge{position:absolute;top:-5px;right:-7px;margin:0;min-width:18px;padding:0 4px;line-height:16px;text-align:center;pointer-events:none}
/* 스테이터스 창 */
body #status-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(600px,94vw);max-height:92dvh;overflow:auto;padding:0 16px 14px;background:var(--ui-panel-a20-status-panel-background);border:1px solid var(--ui-panel-a20-status-panel-border);border-radius:16px;z-index:9;box-sizing:border-box}
body #status-panel .panel-heading{position:sticky;top:0;z-index:1;background:var(--ui-panel-a20-status-panel-panel-heading-background);padding:10px 0;gap:12px}
body #status-close{width:auto;flex-shrink:0;margin:0}
body #status-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:center;padding:4px 0 10px;border-bottom:1px solid var(--ui-panel-a20-status-head-border-bottom)}
body #status-name{font-size:17px}
body #status-head small{margin:0;font-size:11px;color:var(--ui-panel-a20-status-head-text)}
body #status-head #level{grid-column:1/-1;min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:left}
body #status-head #xp{width:100%;min-width:0;max-width:100%;height:8px;margin:0;grid-column:1/-1}
body .status-hp{display:grid;gap:6px;grid-column:1/-1}
body .buff-row{display:flex;align-items:center;gap:5px;grid-column:1/-1;min-height:20px;margin-top:3px}body .buff-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 4px 1px 2px;border:1px solid var(--ui-hud-a20-buff-chip-border);border-radius:5px;background:var(--ui-hud-a20-buff-chip-background);color:var(--ui-hud-a20-buff-chip-text)}body .buff-icon{display:inline-grid;place-items:center;width:16px;height:16px;background-image:url('./icons/buffs.svg');background-size:96px 16px;background-position:calc(var(--buff-index) * -16px) 0;font:700 10px/1 system-ui;color:var(--ui-hud-a20-buff-icon-text);border-radius:3px}body .buff-chip.unknown .buff-icon{background-image:none}body .buff-seconds{font:700 10px/1 system-ui;color:inherit}
body #status-panel #health{position:static;justify-self:start;padding:0;font-size:11px;background:none;border-radius:0;text-align:left}
body #hp-bar{position:static;width:100%;height:8px;accent-color:var(--ui-hud-a20-hp-bar-accent-color)}
body .status-equip{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 8px}
/* A289: status bars override the pack's HUD frame only inside this panel. */
html body.pack-ui #status-panel #health{background:none;border:0;border-image:none;padding:0;box-shadow:none;color:var(--ui-panel-muted)}
html body #status-panel :is(#xp,#hp-bar){appearance:none;border:0;border-radius:8px;overflow:hidden;height:8px;background:var(--ui-panel-soft)}
html body #status-panel #xp{accent-color:var(--ui-panel-acc)}
html body #status-panel #hp-bar{accent-color:var(--ui-panel-health)}
html body #status-panel :is(#xp,#hp-bar)::-webkit-progress-bar{background:var(--ui-panel-soft);border-radius:8px}
html body #status-panel #xp::-webkit-progress-value{background:var(--ui-panel-acc);border-radius:8px}
html body #status-panel #hp-bar::-webkit-progress-value{background:var(--ui-panel-health);border-radius:8px}
html body #status-panel #xp::-moz-progress-bar{background:var(--ui-panel-acc);border-radius:8px}
html body #status-panel #hp-bar::-moz-progress-bar{background:var(--ui-panel-health);border-radius:8px}
/* F410 #7: 체력 막대 아래 마나 막대 — 체력 줄과 같은 꼴, 파란 자원 토큰 */
body .status-mana{display:grid;gap:6px;grid-column:1/-1}
html body #status-panel #status-mana{position:static;justify-self:start;padding:0;font-size:11px;background:none;border:0;color:var(--ui-panel-muted)}
html body #status-panel #status-mana-bar{appearance:none;-webkit-appearance:none;width:100%;height:8px;margin:0;border:0;border-radius:8px;overflow:hidden;background:var(--ui-panel-soft);accent-color:var(--ui-panel-on-resource)}
html body #status-panel #status-mana-bar::-webkit-progress-bar{background:var(--ui-panel-soft);border-radius:8px}
html body #status-panel #status-mana-bar::-webkit-progress-value{background:var(--ui-panel-on-resource);border-radius:8px}
html body #status-panel #status-mana-bar::-moz-progress-bar{background:var(--ui-panel-on-resource);border-radius:8px}
/* F410 #11: 주 능력치 「추천」 · 레벨 업 안내의 「스테이터스 열기」(알림 줄은 누름 없음 — 단추만 받음) */
html body #status-panel .stat-recommend{display:inline-block;margin-left:6px;padding:0 6px;border-radius:9px;font-size:10px;font-weight:700;line-height:16px;vertical-align:middle;background:var(--ui-panel-acc-soft);color:var(--ui-panel-on-success)}
body #notice .notice-action{pointer-events:auto;margin-left:8px;padding:2px 10px;min-height:32px;font-size:inherit;vertical-align:middle}
html body #status-panel .status-equip{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html body #status-panel .equip-slot{min-width:0}
html body #status-panel .status-equip{align-items:stretch}
html body #status-panel .equip-slot{align-self:stretch;margin:0;box-sizing:border-box}
html body #status-panel .equip-bonus{font-size:12px}
html body #status-panel :is(.equip-name,.equip-bonus,.equip-empty){max-width:100%;white-space:normal;overflow-wrap:anywhere;text-overflow:clip;line-height:1.35;opacity:1}
@media(max-width:599px){html body #status-panel .status-equip{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
body .equip-slot{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:86px;padding:8px 6px;background:var(--ui-panel-a20-equip-slot-background);border:1px solid var(--ui-panel-a20-equip-slot-border);border-radius:10px;font-size:12px}
body .equip-slot.open{outline:2px solid var(--ui-panel-a20-equip-slot-open-focus)}
body .equip-label{font-size:10px;color:var(--ui-panel-a20-equip-label-text)}
body .equip-name{font-weight:600}
body .equip-bonus,.equip-empty{font-size:10px;color:var(--ui-panel-a20-equip-bonus-equip-empty-text)}
body .equip-empty{opacity:.7}
body .equip-list{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
body .equip-choice{display:flex;align-items:center;gap:8px;padding:6px 10px;text-align:left;font-size:12px}
body .equip-choice small{margin-left:auto;color:var(--ui-panel-a20-equip-choice-text);font-size:10px}
body .equip-none{font-size:12px;color:var(--ui-panel-a20-equip-none-text);margin:4px 0}
body .status-stats{margin:8px 0}
body .stat-points{margin:0 0 6px;font-size:12px;color:var(--ui-panel-a20-stat-points-text)}
body .stat-points.has-points{color:var(--c-warning-a20-stat-points-has-points-text);font-weight:600}
body .stat-row{display:grid;grid-template-columns:52px 32px 1fr 44px;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--ui-panel-a20-stat-row-border-top)}
body .stat-name{font-size:13px}
body .stat-value{font-size:15px;font-weight:700;text-align:center;color:var(--ui-panel-a20-stat-value-text)}
body .stat-desc{font-size:10px;color:var(--ui-panel-a20-stat-desc-text);margin:0}
/* A293: inactive role stays beside the stat name; detail uses the next row. */
html body #status-panel .stat-row.inactive{grid-template-columns:minmax(0,1fr) 28px 44px;gap:4px 8px}
html body #status-panel .stat-row.inactive .stat-name{display:flex;align-items:center;gap:8px;min-width:0}
html body #status-panel .stat-row.inactive .stat-role{font-size:12px;white-space:nowrap}
html body #status-panel .stat-row.inactive .stat-desc{grid-column:1 / 3;grid-row:2;font-size:12px}
html body #status-panel .stat-row.inactive .stat-plus{grid-column:3;grid-row:1 / 3}
body .stat-plus{width:44px;height:36px;padding:0;font-size:18px;line-height:1;border-radius:10px}
body .status-numbers{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:5px 10px;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--ui-panel-a20-status-numbers-border-top);font-size:12px}
body .status-numbers dt{color:var(--ui-panel-a20-status-numbers-text);text-align:left}
body .status-numbers dd{margin:0;color:var(--ui-panel-a20-status-numbers-text-2);font-weight:600;text-align:right}
/* 지도: 점·원 */
body #world-map{height:340px;min-width:0}
body .map-place{width:auto;max-width:none;padding:0;background:none;border:0;opacity:1;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transform:translate(-50%,-50%);touch-action:manipulation;box-shadow:none}
body .map-place:active{transform:translate(-50%,-50%);background:none}
body .map-dot{position:relative;width:14px;height:14px;border-radius:50%;border:2px solid var(--ui-panel-a20-map-dot-border);background:var(--ui-panel-a20-map-dot-background);display:grid;place-items:center;box-sizing:border-box}
body .map-place.visited .map-dot{background:var(--ui-panel-a20-map-place-visited-map-dot-background);border-color:var(--ui-panel-a20-map-place-visited-map-dot-border-color)}
body .map-place.current .map-dot{width:20px;height:20px;background:var(--ui-panel-a20-map-place-current-map-dot-background);border-color:var(--ui-panel-a20-map-place-current-map-dot-border-color);box-shadow:0 0 0 3px var(--ui-panel-a20-map-place-current-map-dot-shadow)}
body .map-place.selected .map-dot{box-shadow:0 0 0 3px var(--ui-panel-a20-map-place-selected-map-dot-shadow)}
body .map-place.warp-ready .map-dot{box-shadow:0 0 0 2px var(--ui-panel-a20-map-place-warp-ready-map-dot-shadow),0 0 0 4px var(--ui-panel-a20-map-place-warp-ready-map-dot-shadow-2)}
body .map-place.current.warp-ready .map-dot{box-shadow:0 0 0 3px var(--ui-panel-a20-map-place-current-warp-ready-shadow),0 0 0 5px var(--ui-panel-a20-map-place-current-warp-ready-shadow-2)}
body .map-place.quest-target .map-dot{outline:2px dashed var(--ui-panel-a20-map-place-quest-target-map-dot-focus);outline-offset:3px}
body .map-mark{font-size:9px;line-height:1;color:var(--ui-panel-a20-map-mark-text);font-style:normal}
body .map-place:not(.visited) .map-mark{color:var(--ui-panel-a20-map-place-visited-map-mark-text)}
body .map-place strong{display:none;font-size:10px;font-weight:600;white-space:nowrap;text-shadow:0 1px 2px var(--ui-panel-a20-map-place-text-shadow),0 0 4px var(--ui-panel-a20-map-place-text-shadow-2);line-height:1.2}
body .map-place:is(.current,.selected) strong{display:block}
body .map-people{position:absolute;top:-7px;left:calc(50% + 6px);display:flex;flex-direction:column;gap:0;margin:0}
body .party-dot{font-size:9px;line-height:1}
body #map-detail{min-height:18px;font-size:12px;color:var(--ui-panel-a20-map-detail-text);margin:6px 0 2px}
body #map-summary{font-size:11px}
/* 도움말 안 출처·조작 안내 */
body .credits-line{margin:10px 0 0;text-align:center;font-size:10px;opacity:.7}
body #key-help{font-size:11px}
/* 팩 UI 위에서도 원형 단추는 원형으로 */
.pack-ui :is(#sword-attack,#evade,#skill-button,#settings-button,#region-hud #social-button,.stat-plus,.map-place,#stick){border-image:none;border-radius:50%;text-shadow:none}
.pack-ui #stick{border:2px solid var(--ui-hud-a20-stick-border-2);background:var(--ui-hud-a20-stick-background-2);opacity:.9}
.pack-ui .stat-plus{border-radius:10px;border:2px solid var(--ui-panel-a20-stat-plus-border);background:var(--ui-panel-a20-stat-plus-background);color:var(--ui-panel-a20-stat-plus-text)}
.pack-ui #sword-attack{background:var(--ui-hud-a20-sword-attack-background-2);border:2px solid var(--ui-hud-a20-sword-attack-border-2);color:var(--ui-hud-a20-sword-attack-text)}
.pack-ui #evade{background:var(--ui-hud-a20-evade-background-2);border:2px solid var(--ui-hud-a20-evade-border-2);color:var(--ui-hud-a20-evade-text)}
.pack-ui #skill-button{background:var(--ui-hud-a20-skill-button-background-2);border:2px solid var(--ui-hud-a20-skill-button-border-2);color:var(--ui-hud-a20-skill-button-text)}
.pack-ui #skill-timer{color:var(--ui-hud-a20-skill-timer-text)}
.pack-ui :is(#settings-button,#region-hud #social-button){background:var(--ui-hud-a20-settings-button-region-hud-social-button-background);border:2px solid var(--ui-hud-a20-settings-button-region-hud-social-button-border);color:var(--ui-hud-a20-settings-button-region-hud-social-button-text)}
.pack-ui #region-hud strong{border:5px solid transparent;border-image:var(--pack-frame) 5 fill / 5px / 0 stretch;border-radius:0;background:none;color:var(--ui-hud-a20-region-hud-text)}
.pack-ui :is(#menu-panel,#status-panel){border:9px solid transparent;border-image:var(--pack-panel) 7 fill / 9px / 0 stretch;border-radius:0;background:none;color:var(--ui-panel-a20-menu-panel-status-panel-text)}
.pack-ui :is(#menu-panel,#status-panel) .panel-heading{background:var(--ui-panel-a20-menu-panel-status-panel-panel-heading-background)}
.pack-ui :is(.equip-slot,.stat-row,.status-numbers){color:var(--ui-panel-a20-equip-slot-stat-row-status-numbers-text)}
.pack-ui .equip-slot{background:var(--ui-panel-a20-equip-slot-background-2);border:1px solid var(--ui-panel-a20-equip-slot-border-2);border-radius:3px}
.pack-ui :is(.equip-label,.equip-bonus,.equip-empty,.stat-desc,.stat-points,.status-numbers dt,#status-head small,#map-detail){color:var(--ui-panel-a20-equip-label-equip-bonus-equip-empty-text)}
.pack-ui .stat-value,.pack-ui .status-numbers dd{color:var(--ui-panel-a20-stat-value-status-numbers-text)}
.pack-ui .stat-points.has-points{color:var(--c-warning-a20-stat-points-has-points-text-2)}
.pack-ui #health{background:var(--ui-hud-a20-health-background-2);color:var(--ui-hud-a20-health-text)}
.pack-ui .map-dot{border-color:var(--ui-panel-a20-map-dot-border-color);background:var(--ui-panel-a20-map-dot-background-2)}
.pack-ui .map-place.visited .map-dot{background:var(--ui-panel-a20-map-place-visited-map-dot-background-2);border-color:var(--ui-panel-a20-map-place-visited-map-dot-border-color-2)}
.pack-ui .map-place.current .map-dot{background:var(--ui-panel-a20-map-place-current-map-dot-background-2);border-color:var(--ui-panel-a20-map-place-current-map-dot-border-color-2)}
.pack-ui .map-place strong{color:var(--ui-panel-a20-map-place-text);text-shadow:0 1px 2px var(--ui-panel-a20-map-place-text-shadow-3),0 0 4px var(--ui-panel-a20-map-place-text-shadow-2-2)}
.pack-ui .map-mark{color:var(--ui-panel-a20-map-mark-text-2)}
.pack-ui #chat-toast p{background:var(--ui-hud-a20-chat-toast-background-2);color:var(--ui-hud-a20-chat-toast-text-3)}.pack-ui #chat-toast b{color:var(--ui-hud-a20-chat-toast-text-4)}
/* 가로 낮은 화면(아이폰 가로) */
@media(orientation:landscape) and (max-height:500px){
 body #stick{width:72px;height:72px}
 body #sword-attack{width:60px;height:60px}
 body #evade{width:50px;height:50px;right:max(90px,calc(env(safe-area-inset-right) + 80px))}
 body #skill-button{width:46px;height:46px;bottom:calc(var(--hud-bottom) + 70px)}
 body #interact,body.online #interact{bottom:calc(var(--hud-bottom) + 78px)}
 body #fish-button,body #cook-button,body #exit-choice{bottom:calc(var(--hud-bottom) + 124px)}
 body #quest-tracker{font-size:10px}
 body #status-panel{max-height:94dvh;padding:0 14px 12px}
 body .status-equip{grid-template-columns:1fr 1fr}
 body .status-numbers{grid-template-columns:auto 1fr auto 1fr auto 1fr}
 body #world-map{height:250px}
}
/* 세로 화면 */
@media(orientation:portrait){
 body #region-hud strong{max-width:56vw}
 body #stick{width:84px;height:84px}
 body #knob{width:36px;height:36px}
 body #sword-attack{width:68px;height:68px}
 body #evade{width:56px;height:56px;right:max(100px,calc(env(safe-area-inset-right) + 88px))}
 body #skill-button{bottom:calc(var(--hud-bottom) + 82px)}
 body #interact,body.online #interact{bottom:calc(var(--hud-bottom) + 92px);right:max(100px,calc(env(safe-area-inset-right) + 88px))}
 body #fish-button,body #cook-button,body #exit-choice{bottom:calc(var(--hud-bottom) + 144px);right:max(100px,calc(env(safe-area-inset-right) + 88px))}
 body #chat-toast{width:min(60vw,320px);bottom:calc(var(--hud-bottom) + 112px)}
 body #alerts,body #boss-hud{top:calc(var(--hud-top) + 88px)}
 body .menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 body .status-numbers{grid-template-columns:auto 1fr}
 body #world-map{height:min(60dvh,420px)}
}
/* F227: ja 버프 줄 글도 일본어 글꼴(위 font: … system-ui 를 ja 에서만 덮음) */
:root:lang(ja) body :is(#buff-hud .buff-name,.buff-icon,.buff-seconds){font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP",system-ui,sans-serif}

/* Menu categories stay on the same panel; unavailable entries leave no empty heading. */
body #menu-panel .menu-grid{grid-template-columns:minmax(0,1fr);gap:14px}
body #menu-panel .menu-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0;align-content:start}
body #menu-panel .menu-group:not(:has(>button:not([hidden]))){display:none}
body #menu-panel .menu-group h3{grid-column:1 / -1;margin:0 0 2px;font-size:13px;line-height:1.4;color:var(--ui-panel-menu-muted);font-weight:600}
body #menu-panel .menu-grid button{min-height:56px;padding:8px 4px;gap:3px}
body #menu-panel .menu-grid .icon{font-size:18px}
html body.pack-ui #menu-panel#menu-panel .menu-grid button{padding:8px 6px}
@media(min-width:600px){
 html body #menu-panel{width:min(650px,92vw)}
 html body.desktop-ui #menu-panel{width:min(720px,92vw)}
 body #menu-panel .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
}
html body #status-panel .equip-slot:is(:active,.pressed) :is(.equip-label,.equip-bonus,.equip-empty),html body #status-panel .equip-choice:is(:active,.pressed) small{color:var(--ui-panel-acc-fg)}