* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* ซ่อน +/- ของเบราว์เซอร์ในช่อง number — เกมมีปุ่มของตัวเองแล้ว */
input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
    background: transparent;
}

/*
 * scrollbar ธีมเกม (ไม้/พิกเซล) — ใช้คลาส .game-scroll หรือคลาสแผงเลื่อนในเกม
 * ทับกฎซ่อน scrollbar ด้านบน · มุมมนน้อย · ขอบทึบ ไม่ใช่เส้นบางแบบ OS
 */
:is(
    .game-scroll,
    .npc-buy-scroll,
    .npc-sell-scroll,
    .npc-craft-scroll,
    .quest-tracker-scroll,
    .chat-emoji-picker,
    .npc-reroll-equip-list,
    .link-account-panel,
    .game-menu-panel,
    .trade-scroll,
    .npc-repair-scroll,
    .campfire-cook-scroll,
    .npc-enhance-scroll
) {
    scrollbar-width: auto;
    scrollbar-color: var(--px-scroll-thumb) var(--px-scroll-track);
}

:is(
    .game-scroll,
    .npc-buy-scroll,
    .npc-sell-scroll,
    .npc-craft-scroll,
    .quest-tracker-scroll,
    .chat-emoji-picker,
    .npc-reroll-equip-list,
    .link-account-panel,
    .game-menu-panel,
    .trade-scroll,
    .npc-repair-scroll,
    .campfire-cook-scroll,
    .npc-enhance-scroll
)::-webkit-scrollbar {
    display: block;
    width: var(--px-scroll-size);
    height: var(--px-scroll-size);
    background: transparent;
}

:is(
    .game-scroll,
    .npc-buy-scroll,
    .npc-sell-scroll,
    .npc-craft-scroll,
    .quest-tracker-scroll,
    .chat-emoji-picker,
    .npc-reroll-equip-list,
    .link-account-panel,
    .game-menu-panel,
    .trade-scroll,
    .npc-repair-scroll,
    .campfire-cook-scroll,
    .npc-enhance-scroll
)::-webkit-scrollbar-track {
    background:
        linear-gradient(
            90deg,
            #080604 0%,
            var(--px-scroll-track) 28%,
            var(--px-scroll-track) 72%,
            #080604 100%
        );
    border: 2px solid var(--px-scroll-track-edge);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}

:is(
    .game-scroll,
    .npc-buy-scroll,
    .npc-sell-scroll,
    .npc-craft-scroll,
    .quest-tracker-scroll,
    .chat-emoji-picker,
    .npc-reroll-equip-list,
    .link-account-panel,
    .game-menu-panel,
    .trade-scroll,
    .npc-repair-scroll,
    .campfire-cook-scroll,
    .npc-enhance-scroll
)::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--px-scroll-thumb-hi) 0%,
        var(--px-scroll-thumb) 42%,
        #5d4037 100%
    );
    border: 2px solid var(--px-scroll-thumb-edge);
    border-radius: 1px;
    box-shadow:
        inset 1px 1px 0 var(--px-scroll-thumb-lit),
        inset -1px -1px 0 rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 213, 79, 0.12);
}

:is(
    .game-scroll,
    .npc-buy-scroll,
    .npc-sell-scroll,
    .npc-craft-scroll,
    .quest-tracker-scroll,
    .chat-emoji-picker,
    .npc-reroll-equip-list,
    .link-account-panel,
    .game-menu-panel,
    .trade-scroll,
    .npc-repair-scroll,
    .campfire-cook-scroll,
    .npc-enhance-scroll
)::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        #a1887f 0%,
        var(--px-scroll-thumb-hi) 40%,
        var(--px-scroll-thumb) 100%
    );
    box-shadow:
        inset 1px 1px 0 rgba(255, 213, 79, 0.28),
        inset -1px -1px 0 rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 213, 79, 0.28);
}

:is(
    .game-scroll,
    .npc-buy-scroll,
    .npc-sell-scroll,
    .npc-craft-scroll,
    .quest-tracker-scroll,
    .chat-emoji-picker,
    .npc-reroll-equip-list,
    .link-account-panel,
    .game-menu-panel,
    .trade-scroll,
    .npc-repair-scroll,
    .campfire-cook-scroll,
    .npc-enhance-scroll
)::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #5d4037 0%, #4e342e 100%);
}

:is(
    .game-scroll,
    .npc-buy-scroll,
    .npc-sell-scroll,
    .npc-craft-scroll,
    .quest-tracker-scroll,
    .chat-emoji-picker,
    .npc-reroll-equip-list,
    .link-account-panel,
    .game-menu-panel,
    .trade-scroll,
    .npc-repair-scroll,
    .campfire-cook-scroll,
    .npc-enhance-scroll
)::-webkit-scrollbar-corner {
    background: var(--px-scroll-track);
    border: 2px solid var(--px-scroll-track-edge);
}

/* รางแนวนอน — รายการอุปกรณ์ปรับปรุงความสามารถรอง */
.npc-reroll-equip-list::-webkit-scrollbar-track {
    background:
        linear-gradient(
            180deg,
            #080604 0%,
            var(--px-scroll-track) 28%,
            var(--px-scroll-track) 72%,
            #080604 100%
        );
}

.npc-reroll-equip-list::-webkit-scrollbar-thumb {
    background: linear-gradient(
        90deg,
        var(--px-scroll-thumb-hi) 0%,
        var(--px-scroll-thumb) 42%,
        #5d4037 100%
    );
}

*::selection {
    background: transparent;
}

/*
 * ช่องพิมพ์ข้อความ — พื้นขาว + ตัวอักษรเข้มเสมอ
 * (กัน Chrome autofill สลับขาว/เหลือง กับธีมมืดของเกม)
 */
:root {
    --px-input-bg: #ffffff;
    --px-input-fg: #1a1410;
    --px-input-placeholder: #7a7268;
}

input:where(
    :not([type]),
    [type='text'],
    [type='email'],
    [type='password'],
    [type='search'],
    [type='tel'],
    [type='url'],
    [type='number']
),
textarea {
    background-color: var(--px-input-bg);
    color: var(--px-input-fg);
    caret-color: var(--px-input-fg);
}

input:where(
    :not([type]),
    [type='text'],
    [type='email'],
    [type='password'],
    [type='search'],
    [type='tel'],
    [type='url'],
    [type='number']
)::placeholder,
textarea::placeholder {
    color: var(--px-input-placeholder);
    opacity: 1;
}

input:where(
    :not([type]),
    [type='text'],
    [type='email'],
    [type='password'],
    [type='search'],
    [type='tel'],
    [type='url'],
    [type='number']
):-webkit-autofill,
input:where(
    :not([type]),
    [type='text'],
    [type='email'],
    [type='password'],
    [type='search'],
    [type='tel'],
    [type='url'],
    [type='number']
):-webkit-autofill:hover,
input:where(
    :not([type]),
    [type='text'],
    [type='email'],
    [type='password'],
    [type='search'],
    [type='tel'],
    [type='url'],
    [type='number']
):-webkit-autofill:focus,
input:where(
    :not([type]),
    [type='text'],
    [type='email'],
    [type='password'],
    [type='search'],
    [type='tel'],
    [type='url'],
    [type='number']
):-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    -webkit-text-fill-color: var(--px-input-fg);
    caret-color: var(--px-input-fg);
    box-shadow: 0 0 0 1000px var(--px-input-bg) inset;
    -webkit-box-shadow: 0 0 0 1000px var(--px-input-bg) inset;
    transition: background-color 99999s ease-out;
}

/* อย่าให้ display ใน class ทับ [hidden] — ไม่งั้น panel/modal โผล่ค้าง */
[hidden] {
    display: none !important;
}

:root {
    --px-border: #4a3424;
    --px-border-light: #8d6e63;
    --px-bg: #14100c;
    --px-panel: rgba(22, 16, 12, 0.94);
    --px-panel-hi: rgba(46, 36, 28, 0.55);
    --px-gold: #ffd54f;
    --px-gold-dim: #c9a227;
    --px-hp: #ef5350;
    --px-hp-hi: #ff8a80;
    --px-mp: #42a5f5;
    --px-mp-hi: #82b1ff;
    --px-satiety: #ffb74d;
    --px-satiety-hi: #ffe082;
    --px-exp: #ab47bc;
    --px-exp-hi: #ce93d8;
    --px-glow-gold: rgba(255, 213, 79, 0.35);
    --px-glow-hp: rgba(239, 83, 80, 0.3);
    --px-shadow-deep: #080604;

    /* scrollbar โทนไม้ — ไม่ใช้เส้นบางแบบระบบ */
    --px-scroll-size: 12px;
    --px-scroll-track: #120e0a;
    --px-scroll-track-edge: #2a1e16;
    --px-scroll-thumb: #6d4c41;
    --px-scroll-thumb-hi: #8d6e63;
    --px-scroll-thumb-edge: #3e2723;
    --px-scroll-thumb-lit: rgba(188, 170, 164, 0.4);

    /* มือถือแนวตั้ง — ตัวอักษรและระยะ (ขั้นต่ำอ่านสบาย ~12px) */
    --text-xs: clamp(11px, 2.9vw, 12px);
    --text-sm: clamp(12px, 3.2vw, 14px);
    --text-md: clamp(13px, 3.5vw, 15px);
    --text-lg: clamp(14px, 3.8vw, 16px);
    --text-xl: clamp(15px, 4.2vw, 18px);
    --touch-min: 44px;

    /* ความสูงชั้นปุ่มล่าง (ฮอตบาร์ 4 แถว) */
    --controls-h: clamp(232px, 34vh, 272px);
    --joystick-size: clamp(112px, 32vw, 132px);
    /* แชทมุมซ้ายล่าง — ไม่ต้องเว้นที่จอยคงที่แล้ว */
    --chat-stack-bottom: calc(12px + var(--safe-bottom));
    --skill-cell-size: clamp(40px, 10.5vw, 48px);
    --skill-hotbar-w: calc(4 * var(--skill-cell-size) + 15px);
    --chat-panel-h: clamp(120px, 17vh, 140px);
    --chat-compose-panel-h: clamp(220px, 36vh, 300px);
    --chat-messages-visible-lines: 4;
    --hud-portrait-size: clamp(54px, 15vw, 62px);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* คอลัมน์จอเกม — มือถือ 1 คอลัมน์, คอม/แทบเลตกว้าง 3 คอลัมน์ (ซ้าย/กลาง/ขวา) */
    --view-cols: 1;
    --game-col-w: min(500px, 100vw);
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* คอม / แทบเลตแนวนอน — โลกกว้าง 3 เท่าของจอแนวตั้ง */
html.layout-wide {
    --view-cols: 3;
    --game-col-w: min(500px, calc(100vw / 3));
}

/*
 * มือถือแนวนอน (เต็มจอ ไม่ letterbox) — ตัวอักษร/ทัชเป้าหมายอ่านและกดได้
 * ใช้ vmin อิงด้านสั้นของจอโฟน (~390px) ไม่ให้เล็กเกิน
 */
html.layout-wide.touch-play {
    --text-xs: clamp(12px, 3.1vmin, 14px);
    --text-sm: clamp(13px, 3.4vmin, 15px);
    --text-md: clamp(14px, 3.7vmin, 16px);
    --text-lg: clamp(15px, 4vmin, 18px);
    --text-xl: clamp(16px, 4.4vmin, 20px);
    --touch-min: 44px;
    --joystick-size: clamp(96px, 28vmin, 120px);
    --skill-cell-size: clamp(36px, 9.5vmin, 46px);
    --hud-portrait-size: clamp(48px, 12vmin, 58px);
    --chat-panel-h: clamp(88px, 24vmin, 120px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* คงคลาส mobile-desktop-stage ไว้เผื่อใช้ภายหลัง — มือถือปัจจุบันไม่เปิด */
html.layout-wide.mobile-desktop-stage {
    --game-col-w: 500px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 50% 0%, #1a2830 0%, #0a0a0a 55%);
    overflow: hidden;
    touch-action: none;
    display: flex;
    flex-direction: column;
}

/* โครงแอป — letterbox บนมือถือใช้เฟรมคงที่แล้ว scale */
#app-stage {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* มือถือแนวตั้ง — บล็อกให้หมุนเป็นแนวนอน */
.landscape-gate {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top, 0px))
        max(20px, env(safe-area-inset-right, 0px))
        max(20px, env(safe-area-inset-bottom, 0px))
        max(20px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(40, 32, 24, 0.92) 0%, rgba(8, 6, 4, 0.97) 70%),
        #0a0a0a;
    pointer-events: auto;
}

.landscape-gate[hidden] {
    display: none !important;
}

.landscape-gate-card {
    max-width: min(360px, 92vw);
    padding: 22px 20px;
    text-align: center;
    background: rgba(22, 16, 12, 0.94);
}

.landscape-gate-title {
    margin: 0 0 10px;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--px-gold);
    text-shadow: 1px 1px 0 #000;
}

.landscape-gate-text {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.45;
    color: rgba(255, 248, 225, 0.88);
    text-shadow: 1px 1px 0 #000;
}

html.need-landscape {
    overflow: hidden;
}

html.need-landscape #app-stage {
    visibility: hidden;
    pointer-events: none;
}

html.mobile-desktop-stage,
html.mobile-desktop-stage body {
    background: #000;
}

html.mobile-desktop-stage body {
    display: flex;
    align-items: center;
    justify-content: center;
}

html.mobile-desktop-stage #app-stage {
    flex: none;
    width: 1500px;
    height: 844px;
    transform: scale(var(--desktop-stage-scale, 1));
    transform-origin: center center;
    background: radial-gradient(ellipse at 50% 0%, #1a2830 0%, #0a0a0a 55%);
}

/* iframe /mobile — ไม่ต้องมีป้ายซ้ำ (ป้ายอยู่ที่เชลล์) · คงเงาบางๆ ได้ */
html.dev-mobile-preview.mobile-desktop-stage #app-stage {
    box-shadow: none;
}

#game-app {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
    outline: none;
}

#canvas-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* ชั้นโลก — canvas + ป้ายชื่อ/แชท/ดาเมจ (HUD อยู่นอกนี้) */
#world-layer {
    position: absolute;
    inset: 0;
}

#gameCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    z-index: 1;
}

/* พื้น WebGL ใต้ canvas 2D — ไม่ blit ทั้งเฟรม */
.game-canvas-ground-gl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    z-index: 0;
    pointer-events: none;
}

#name-tags-container,
#harvest-progress-container,
#typing-indicators-container,
#craft-indicators-container,
#chat-bubbles-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

#chat-bubbles-container {
    z-index: 3;
}

#typing-indicators-container {
    z-index: 2;
}

#craft-indicators-container {
    z-index: 4;
}

#harvest-progress-container {
    z-index: 2;
}

#name-tags-container {
    z-index: 1;
}

.name-tag {
    position: absolute;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: bold;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transform: translate(-50%, -100%);
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 2px 4px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    padding: 1px 4px;
    border-radius: 2px;
}

.name-tag.player {
    color: #c8e6c9;
    font-size: var(--text-md);
    text-shadow:
        -1px -1px 0 #1b5e20,
        1px -1px 0 #1b5e20,
        0 0 8px rgba(129, 199, 132, 0.5);
}
.name-tag.remote {
    color: #bbdefb;
    text-shadow:
        -1px -1px 0 #0d47a1,
        1px -1px 0 #0d47a1,
        0 0 8px rgba(100, 181, 246, 0.45);
}

.typing-indicator {
    position: absolute;
    min-width: 28px;
    padding: 3px 8px;
    font-size: var(--text-md);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 1px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    transform: translate(-50%, -100%);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    pointer-events: none;
}

.typing-indicator.local {
    border-color: #81c784;
    color: #c8e6c9;
}

.typing-indicator.remote {
    border-color: #64b5f6;
    color: #bbdefb;
}

.craft-indicator {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 6px;
    font-size: var(--text-xs);
    font-weight: bold;
    line-height: 1;
    color: #fff;
    background: rgba(26, 18, 32, 0.88);
    border: 2px solid rgba(206, 147, 216, 0.55);
    border-radius: 8px;
    transform: translate(-50%, -100%);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.craft-indicator.local {
    border-color: #ce93d8;
    color: #f3e5f5;
}

.craft-indicator.remote {
    border-color: #9575cd;
    color: #e1bee7;
}

.craft-indicator--enhance {
    border-color: rgba(255, 213, 79, 0.65);
    background: rgba(32, 22, 12, 0.9);
}

.craft-indicator--enhance.local {
    border-color: var(--px-gold);
    color: #fff8e1;
}

.craft-indicator--enhance.remote {
    border-color: #ffb74d;
    color: #ffe0b2;
}

.craft-indicator--enhance .craft-indicator-sec {
    color: #ffcc80;
}

.craft-indicator-icon {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    animation: craft-bob 0.55s ease-in-out infinite alternate;
}

.craft-indicator-text {
    letter-spacing: 0.02em;
}

.craft-indicator-sec {
    min-width: 1.8em;
    font-variant-numeric: tabular-nums;
    color: var(--px-gold);
}

@keyframes craft-bob {
    from {
        transform: translateY(0) rotate(-8deg);
    }
    to {
        transform: translateY(-2px) rotate(8deg);
    }
}

.speech-bubble {
    position: absolute;
    max-width: min(160px, 42vw);
    padding: 7px 11px;
    font-size: var(--text-sm);
    line-height: 1.35;
    text-align: center;
    color: #1a1410;
    background: linear-gradient(180deg, #fffef5 0%, #fff3d4 100%);
    border: 2px solid #5d4037;
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 3px 0 rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -100%);
    word-break: break-word;
    pointer-events: none;
    z-index: 1;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #3e2723;
}

.speech-bubble.local {
    background: #e8f5e9;
    border-color: #2e7d32;
}

.speech-bubble.local::after {
    border-top-color: #2e7d32;
}

.speech-bubble.remote {
    background: #e3f2fd;
    border-color: #1565c0;
}

.speech-bubble.remote::after {
    border-top-color: #1565c0;
}

/** อีโมจิเดี่ยวเหนือหัว — ไม่มีกล่อง ขนาดใหญ่ */
.head-emote {
    position: absolute;
    transform: translate(-50%, -100%);
    font-size: clamp(40px, 10vw, 56px);
    line-height: 1;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    pointer-events: none;
    z-index: 1;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.35),
        0 0 8px rgba(0, 0, 0, 0.25);
    animation: head-emote-pop 0.28s ease-out;
}

.head-emote::after {
    display: none;
}

@keyframes head-emote-pop {
    from {
        transform: translate(-50%, -100%) scale(0.55);
        opacity: 0.4;
    }
    to {
        transform: translate(-50%, -100%) scale(1);
        opacity: 1;
    }
}

.pixel-frame {
    border: 3px solid var(--px-border);
    box-shadow:
        inset 0 1px 0 var(--px-border-light),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 4px 0 var(--px-shadow-deep),
        0 6px 16px rgba(0, 0, 0, 0.25);
    background: linear-gradient(165deg, var(--px-panel-hi) 0%, var(--px-panel) 45%, rgba(14, 10, 8, 0.96) 100%);
}

.pixel-btn {
    border: 3px solid var(--px-border);
    box-shadow:
        inset 0 1px 0 rgba(141, 110, 99, 0.35),
        0 4px 0 var(--px-shadow-deep);
    background: linear-gradient(180deg, #5a4332 0%, #3a2a1e 55%, #2e2118 100%);
    color: #fff8f0;
    font-size: var(--text-sm);
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.05s, box-shadow 0.05s, filter 0.12s;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.pixel-btn:active, .pixel-btn.pressed {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #0d0907;
}

#ui-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

#ui-overlay > * { pointer-events: auto; }
#ui-overlay [data-pass-through] { pointer-events: none; }

/*
 * จอกว้าง — โลกกินทั้งสามคอลัมน์; แชท/ปุ่ม/เมนูอยู่คอลัมน์กลาง
 * HUD ย้ายไปคอลัมน์ซ้าย (ดู css/hud.css) โดยยื่นจากกล่องนี้
 * ห้ามใช้ transform ที่นี่ — จะทำให้ modal ที่เป็น position: fixed ยึดกับกล่องนี้แทนหน้าจอ
 */
html.layout-wide #ui-overlay {
    left: calc(50% - var(--game-col-w) / 2);
    right: auto;
    width: var(--game-col-w);
    overflow: visible;
}

/* จอเตี้ย (มือถือแนวตั้งรุ่นเล็ก) — ลดความสูงแชท ให้พื้นที่เกมมากขึ้น */
@media (max-height: 680px) {
    :root {
        --chat-panel-h: 108px;
        --chat-compose-panel-h: clamp(200px, 34vh, 260px);
        --controls-h: clamp(220px, 32vh, 252px);
        --joystick-size: clamp(108px, 30vw, 124px);
        --chat-stack-bottom: calc(10px + var(--safe-bottom));
    }
}

@media (max-height: 560px) {
    :root {
        --chat-panel-h: 96px;
        --chat-compose-panel-h: clamp(188px, 38vh, 240px);
        --hud-portrait-size: 48px;
        --chat-stack-bottom: calc(8px + var(--safe-bottom));
    }
}