#hud {
    position: absolute;
    top: max(8px, var(--safe-top));
    left: 8px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: min(calc(100% - 100px), 63%);
    max-width: 320px;
    z-index: 20;
}

/* กล่อง HUD ตัวละคร — แยกจากกล่องเป้าหมายมอน */
.hud-player {
    padding: 10px 10px 8px;
    min-width: 0;
    width: 100%;
    overflow: visible;
}

#hud .hud-player.pixel-frame {
    background: linear-gradient(145deg, rgba(36, 28, 22, 0.88) 0%, rgba(18, 14, 10, 0.82) 100%);
    box-shadow:
        inset 0 1px 0 rgba(141, 110, 99, 0.4),
        inset 0 0 12px rgba(255, 213, 79, 0.04),
        0 4px 0 rgba(8, 6, 4, 0.5),
        0 0 20px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
}

.hud-player-panel {
    display: grid;
    grid-template-columns: var(--hud-portrait-size) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    min-width: 0;
}

.hud-portrait {
    position: relative;
    width: var(--hud-portrait-size);
    height: var(--hud-portrait-size);
    grid-column: 1;
    grid-row: 1 / 5;
    align-self: start;
    flex-shrink: 0;
    padding: 0;
    overflow: visible;
    background: linear-gradient(180deg, #2a2218 0%, #12100c 100%);
    border: 2px solid #8d6e63;
    box-sizing: border-box;
    box-shadow:
        inset 0 0 8px rgba(0, 0, 0, 0.5),
        0 0 8px var(--px-glow-gold);
}

.hud-portrait-face {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hud-lv-badge {
    position: absolute;
    top: -11px;
    left: -2px;
    z-index: 1;
    padding: 2px 6px;
    font-size: var(--text-xs);
    font-weight: bold;
    line-height: 1.1;
    color: #1a1410;
    background: linear-gradient(180deg, #ffe082 0%, var(--px-gold) 50%, var(--px-gold-dim) 100%);
    border: 2px solid #5d4037;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        1px 2px 0 rgba(0, 0, 0, 0.55),
        0 0 8px var(--px-glow-gold);
    pointer-events: none;
}

.hud-portrait-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.hud-name {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--text-md);
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 1px;
    align-self: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hud-bar-hp {
    grid-column: 2;
    grid-row: 2;
}

.hud-bar-mp {
    grid-column: 2;
    grid-row: 3;
}

.hud-bar-satiety {
    grid-column: 2;
    grid-row: 4;
}

.hud-bar-exp {
    grid-column: 2;
    grid-row: 5;
    margin-top: 2px;
    padding-top: 2px;
}

.hud-player-panel .bar-row {
    display: grid;
    grid-template-columns: 5.5em minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    font-size: var(--text-sm);
    color: #e8e0d8;
    min-width: 0;
    width: 100%;
}

.hud-player-panel .bar-row > span:first-child {
    width: auto;
    min-width: 0;
    text-align: right;
    font-weight: 600;
    font-size: var(--text-xs);
    line-height: 1.2;
    white-space: nowrap;
}

.hud-player-panel .bar-track {
    position: relative;
    flex: unset;
    width: 100%;
    min-width: 0;
    height: clamp(12px, 3vw, 14px);
    overflow: hidden;
}

.hud-player-panel .bar-value {
    position: absolute;
    top: 50%;
    right: 4px;
    left: auto;
    transform: translateY(-50%);
    z-index: 2;
    min-width: 0;
    width: auto;
    max-width: calc(100% - 6px);
    padding: 0;
    margin: 0;
    text-align: right;
    font-size: clamp(8px, 2.05vw, 10px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow:
        0 0 2px rgba(0, 0, 0, 0.95),
        1px 1px 0 rgba(0, 0, 0, 0.9),
        -1px 0 0 rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

html.layout-wide.touch-play .hud-player-panel .bar-value {
    font-size: clamp(11px, 2.8vmin, 13px);
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    font-size: var(--text-sm);
    color: #e8e0d8;
}

.bar-row > span:first-child {
    flex-shrink: 0;
    width: 5.6em;
    text-align: right;
    font-weight: 600;
    font-size: var(--text-xs);
    line-height: 1.2;
}

.bar-track {
    flex: 1;
    height: clamp(9px, 2.2vw, 11px);
    background: linear-gradient(180deg, #0a0806 0%, #1a1410 100%);
    border: 2px solid #1a1008;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    min-width: 40px;
    border-radius: 1px;
}

.bar-fill {
    height: 100%;
    transition: width 0.2s;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent);
    pointer-events: none;
}
.bar-fill.hp {
    background: linear-gradient(180deg, var(--px-hp-hi) 0%, var(--px-hp) 55%, #c62828 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 6px var(--px-glow-hp);
}
.bar-fill.mp {
    background: linear-gradient(180deg, var(--px-mp-hi) 0%, var(--px-mp) 55%, #1565c0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 6px rgba(66, 165, 245, 0.35);
}
.bar-fill.satiety {
    background: linear-gradient(180deg, var(--px-satiety-hi) 0%, var(--px-satiety) 55%, #ef6c00 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 6px rgba(255, 183, 77, 0.35);
}
.bar-fill.exp {
    background: linear-gradient(180deg, var(--px-exp-hi) 0%, var(--px-exp) 55%, #6a1b9a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 6px rgba(171, 71, 188, 0.35);
}

.hud-top-right {
    position: absolute;
    top: max(8px, var(--safe-top));
    right: 8px;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
    z-index: 12;
    max-width: min(48%, 200px);
}

/*
 * จอกว้าง (คอม) — ย้าย HUD จากขอบคอลัมน์กลางไปคอลัมน์ซ้าย
 * #ui-overlay ยังอยู่คอลัมน์กลาง → ใช้ offset ติดลบ/เกิน 100% ยื่นเข้าคอลัมน์ซ้าย
 */
html.layout-wide #hud {
    /* ขอบซ้ายคอลัมน์ซ้าย */
    left: calc(-1 * var(--game-col-w) + 8px);
    width: min(calc(var(--game-col-w) - 16px), 320px);
    max-width: calc(var(--game-col-w) - 16px);
}

html.layout-wide .hud-top-right {
    /* ขอบขวาคอลัมน์ขวา */
    right: calc(-1 * var(--game-col-w) + 8px);
    left: auto;
    max-width: min(calc(var(--game-col-w) - 16px), 200px);
}

html.layout-wide .show-hud-fab {
    left: calc(-1 * var(--game-col-w) + 8px);
}

html.layout-wide.ui-hide-hud .hud-top-right {
    right: calc(-1 * var(--game-col-w) + 8px);
    left: auto;
}

.hud-map-zone-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    max-width: 100%;
    pointer-events: auto;
}

.hud-map-zone {
    font-size: var(--text-sm);
    color: var(--px-gold);
    text-shadow: 1px 1px 0 #000;
    max-width: 100%;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    pointer-events: none;
}

.hud-map-channel {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    padding: 2px 0;
    margin: 0;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: bold;
    color: #b0bec5;
    text-shadow: 1px 1px 0 #000;
    letter-spacing: 0.04em;
    line-height: 1.2;
    cursor: default;
    pointer-events: none;
}

.hud-map-channel:disabled {
    opacity: 1;
}

.hud-map-channel.is-admin-action {
    cursor: pointer;
    pointer-events: auto;
    text-decoration: underline;
    text-decoration-color: rgba(176, 190, 197, 0.45);
    text-underline-offset: 2px;
}

.hud-map-channel.is-admin-action:hover,
.hud-map-channel.is-admin-action:focus-visible {
    color: #e3f2fd;
    text-decoration-color: rgba(227, 242, 253, 0.7);
    outline: none;
}

.hud-menu-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    pointer-events: auto;
}

.hud-menu-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.hud-menu-btn {
    pointer-events: auto;
    flex-shrink: 0;
    position: relative;
    flex-direction: column;
    gap: 1px;
    padding: 4px 2px;
}

.hud-menu-icon {
    line-height: 1;
}

.ui-hotkey--menu {
    font-size: 8px;
    letter-spacing: 0.02em;
}

/* มือจูงนักผจญภัยหน้าใหม่ */
.first-run-guide {
    position: absolute;
    left: 50%;
    /* ต่ำกว่าไอคอนเมนู ESC มุมขวาบน — กันบังปุ่ม */
    top: max(76px, calc(var(--safe-top, 0px) + 72px));
    transform: translateX(-50%);
    z-index: 44;
    width: min(calc(100% - 24px), 360px);
    padding: 10px 34px 10px 12px;
    pointer-events: auto;
    box-sizing: border-box;
    background: linear-gradient(165deg, rgba(28, 42, 58, 0.95) 0%, rgba(14, 22, 32, 0.95) 100%);
    border-color: rgba(93, 173, 226, 0.55);
    box-shadow:
        0 4px 0 rgba(8, 6, 4, 0.45),
        0 0 18px rgba(0, 0, 0, 0.35);
    animation: first-run-guide-in 0.35s ease-out;
}

.first-run-guide[hidden] {
    display: none !important;
}

/* เว้นที่เมื่อมีแบนเนอร์สร้างบัญชีซ้อนด้านบน */
body:has([data-guest-account-banner]:not([hidden])) .first-run-guide,
body:has([data-guest-account-banner]:not([hidden])) .intro-control-hint {
    top: max(132px, calc(var(--safe-top, 0px) + 124px));
}

.first-run-guide-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(200, 230, 255, 0.7);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.first-run-guide-close:hover,
.first-run-guide-close:focus-visible {
    color: #a8d8ff;
    outline: none;
}

.first-run-guide-title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: bold;
    color: #ffe082;
    text-align: center;
    letter-spacing: 0.02em;
}

.first-run-guide-body {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    color: #d6ecff;
    line-height: 1.4;
    text-align: center;
}

.first-run-arrow {
    position: absolute;
    z-index: 43;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    pointer-events: none !important;
    color: #f1c40f;
    font-size: 22px;
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    text-shadow:
        0 0 6px rgba(0, 0, 0, 0.85),
        0 2px 0 rgba(0, 0, 0, 0.55);
    filter: drop-shadow(0 0 4px rgba(241, 196, 15, 0.65));
    animation: first-run-arrow-pulse 1.1s ease-in-out infinite;
}

.first-run-arrow[hidden] {
    display: none !important;
}

.first-run-beacon {
    position: absolute;
    z-index: 43;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    pointer-events: none !important;
    transform: translate(-50%, -120%);
    color: #f1c40f;
    font-size: 22px;
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    text-shadow:
        0 0 6px rgba(0, 0, 0, 0.85),
        0 2px 0 rgba(0, 0, 0, 0.55);
    filter: drop-shadow(0 0 6px rgba(241, 196, 15, 0.75));
    animation: first-run-beacon-bob 1.2s ease-in-out infinite;
}

.first-run-beacon[hidden] {
    display: none !important;
}

@keyframes first-run-guide-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes first-run-arrow-pulse {
    0%,
    100% {
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(241, 196, 15, 0.65));
    }
    50% {
        opacity: 0.7;
        filter: drop-shadow(0 0 10px rgba(241, 196, 15, 0.95));
    }
}

@keyframes first-run-beacon-bob {
    0%,
    100% {
        transform: translate(-50%, -120%);
    }
    50% {
        transform: translate(-50%, -145%);
    }
}

@media (max-width: 420px) {
    .first-run-guide {
        top: max(72px, calc(var(--safe-top, 0px) + 68px));
        padding: 8px 32px 8px 10px;
    }

    .first-run-guide-title {
        font-size: 12px;
    }

    .first-run-guide-body {
        font-size: 11px;
    }
}

/* เตือนสร้างบัญชี — โหมดเข้าเล่นทันที */
.guest-account-banner {
    position: absolute;
    top: max(8px, var(--safe-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 45;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    width: min(calc(100% - 24px), 420px);
    padding: 10px 36px 10px 12px;
    pointer-events: auto;
    box-sizing: border-box;
    background: linear-gradient(165deg, rgba(48, 36, 22, 0.94) 0%, rgba(22, 16, 12, 0.94) 100%);
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow:
        0 4px 0 rgba(8, 6, 4, 0.45),
        0 0 18px rgba(0, 0, 0, 0.35);
}

.guest-account-banner[hidden] {
    display: none !important;
}

.guest-account-banner-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 235, 200, 0.7);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.guest-account-banner-close:hover,
.guest-account-banner-close:focus-visible {
    color: #ffe082;
    outline: none;
}

.guest-account-banner-text {
    margin: 0;
    flex: 1 1 180px;
    font-size: 12px;
    font-weight: bold;
    color: #ffe082;
    line-height: 1.35;
    text-align: center;
}

.guest-account-banner-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 12px;
}

@media (max-width: 420px) {
    .guest-account-banner {
        top: max(6px, var(--safe-top, 0px));
        padding: 8px 34px 8px 10px;
    }

    .guest-account-banner-text {
        flex-basis: 100%;
        font-size: 11px;
    }

    .guest-account-banner-btn {
        width: 100%;
    }
}

/* ตั้งค่า: ซ่อน HUD — เหลือเฉพาะปุ่มเมนู ESC + ปุ่มแสดง HUD */
html.ui-hide-hud #hud,
html.ui-hide-hud #chat-root,
html.ui-hide-hud #quest-tracker-root,
html.ui-hide-hud #controls-layer,
html.ui-hide-hud .hud-map-zone-stack,
html.ui-hide-hud .hud-status-strip,
html.ui-hide-hud .guest-account-banner {
    display: none !important;
}

/* ฉากเปิด — ซ่อน HUD แต่เหลือปุ่มโจมตี/สกิลมุมล่างขวา */
html.ui-hide-hud.ui-intro-road #controls-layer {
    display: flex !important;
}

/* ฉากเปิด — ไม่โชว์ปุ่ม ESC / แสดง HUD */
html.ui-hide-hud.ui-intro-road .hud-menu-btn,
html.ui-hide-hud.ui-intro-road .hud-cash-shop-btn,
html.ui-hide-hud.ui-intro-road .hud-menu-column,
html.ui-hide-hud.ui-intro-road .show-hud-fab {
    display: none !important;
}

/* คำสอนหน้าใหม่ยังโชว์ในบ้านแม้ซ่อน HUD — ลูกศร/beacon ตามเฟส */
html.ui-hide-hud .first-run-arrow,
html.ui-hide-hud .first-run-beacon {
    display: none !important;
}

html.ui-hide-hud .hud-top-right {
    left: auto;
    right: 8px;
    max-width: none;
}

html.ui-hide-hud .hud-menu-column {
    pointer-events: auto;
}

html.ui-hide-hud .hud-menu-btn,
html.ui-hide-hud .hud-cash-shop-btn {
    display: inline-flex;
}

/* ปุ่มบนซ้าย — โผล่เฉพาะตอนซ่อน HUD (อยู่ในกรอบเกม ไม่ใช้ fixed) */
.show-hud-fab {
    display: none;
    position: absolute;
    left: 8px;
    top: max(8px, var(--safe-top, 0px));
    z-index: 45;
    min-width: 0;
    max-width: calc(100% - 16px);
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.2;
    pointer-events: auto;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

html.ui-hide-hud .show-hud-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html.ui-hide-hud .show-hud-fab[hidden] {
    display: none !important;
}