/* --- แจ้งเตือน Modal ทั้งเกม --- */
.game-modal-root {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: none;
}

.game-modal-root.open {
    display: flex;
    pointer-events: auto;
}

.game-modal-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.82) 100%);
    backdrop-filter: blur(3px);
}

.game-modal {
    position: relative;
    z-index: 1;
    width: min(100%, 320px);
    padding: 16px 14px 14px;
    background: linear-gradient(165deg, #3a2c22 0%, #1a1410 55%, #120e0a 100%);
    border: 3px solid var(--px-border);
    box-shadow:
        inset 0 1px 0 var(--px-border-light),
        0 6px 0 var(--px-shadow-deep),
        0 0 32px rgba(0, 0, 0, 0.55),
        0 0 24px var(--px-glow-gold);
    text-align: center;
}

.game-modal-title {
    margin: 0 0 10px;
    font-size: var(--text-lg);
    font-weight: bold;
    color: var(--px-gold);
    text-shadow: 1px 1px 0 #000;
}

.game-modal-message {
    margin: 0 0 14px;
    font-size: var(--text-md);
    line-height: 1.55;
    color: #e8e0d8;
    white-space: pre-wrap;
    word-break: break-word;
}

.game-modal-field {
    margin: 0 0 14px;
    text-align: left;
}

.game-modal-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--text-sm);
    color: #bcaaa4;
}

.game-modal-qty-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.game-modal-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: var(--touch-min);
    padding: 8px 10px;
    font-size: var(--text-lg);
    font-weight: bold;
    color: #1a1410;
    background: #ffffff;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border-radius: 4px;
    outline: none;
}

.game-modal-qty-btn {
    flex: 0 0 auto;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 0 10px;
    font-size: var(--text-lg);
    font-weight: bold;
}

.game-modal-qty-max {
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
}

.game-modal-input:focus {
    border-color: var(--px-gold-dim);
    box-shadow: 0 0 0 2px var(--px-glow-gold);
}

.game-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.game-modal-btn {
    min-width: 96px;
    min-height: var(--touch-min);
    padding: 10px 16px;
    font-size: var(--text-sm);
}

.game-modal-btn.secondary {
    background: linear-gradient(180deg, #4a3728, #2e2118);
}

/* --- นับถอยหลัง (สไตล์เดียวกับตีบวก) --- */
.game-modal-root.is-countdown .game-modal {
    display: none;
}

.game-modal-countdown {
    position: relative;
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.game-modal-root.is-countdown .game-modal-countdown {
    display: flex;
}

.game-modal-countdown[hidden] {
    display: none !important;
}

.game-modal-countdown-panel {
    width: min(88vw, 280px);
    padding: 20px 18px 18px;
    text-align: center;
    background: linear-gradient(180deg, #3a2e48 0%, #1a1424 100%);
    border: 3px solid var(--px-border);
    box-shadow:
        inset 0 1px 0 rgba(206, 147, 216, 0.35),
        0 6px 0 var(--px-shadow-deep),
        0 0 32px rgba(0, 0, 0, 0.55);
}

.game-modal-countdown-label {
    margin: 0 0 8px;
    font-size: var(--text-sm);
    color: #d1c4e9;
    font-weight: bold;
}

.game-modal-countdown-sec {
    margin: 0 0 14px;
    font-size: clamp(32px, 10vw, 44px);
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    color: #ce93d8;
    text-shadow: 0 0 12px rgba(206, 147, 216, 0.65);
    line-height: 1;
}

.game-modal-countdown-bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    border: 1px solid rgba(186, 104, 200, 0.45);
}

.game-modal-countdown-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #7b1fa2, #ce93d8);
    transition: width 0.95s linear;
    border-radius: 3px;
}

/* --- สมัครบัญชีจริง (ผูกจากโหมดเข้าเล่นทันที) --- */
.link-account-root {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    pointer-events: none;
}

.link-account-root.open {
    display: flex;
    pointer-events: auto;
}

.link-account-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.82) 100%);
    backdrop-filter: blur(3px);
}

.link-account-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 340px);
    max-height: min(90vh, 560px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px 12px;
    background: linear-gradient(165deg, #3a2c22 0%, #1a1410 55%, #120e0a 100%);
    border: 3px solid var(--px-border, #4a3424);
    box-shadow:
        inset 0 1px 0 var(--px-border-light, #8d6e63),
        0 6px 0 var(--px-shadow-deep, #080604),
        0 0 32px rgba(0, 0, 0, 0.55),
        0 0 24px var(--px-glow-gold, rgba(255, 213, 79, 0.25));
    box-sizing: border-box;
}

.link-account-lead {
    margin: 0 0 12px;
    font-size: 12px;
    color: rgba(255, 235, 200, 0.65);
    line-height: 1.45;
}

.link-account-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    text-align: left;
}

.link-account-field span {
    font-size: 12px;
    color: #bcaaa4;
}

.link-account-field input {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--touch-min);
    padding: 10px 12px;
    border: 2px solid var(--px-border, #4a3424);
    background: #ffffff;
    color: #1a1410;
    font-family: inherit;
    font-size: 16px;
    border-radius: 2px;
}

.link-account-field input:focus {
    outline: none;
    border-color: var(--px-gold-dim, #c9a227);
    box-shadow: 0 0 0 2px var(--px-glow-gold, rgba(255, 213, 79, 0.25));
}

.link-account-password-hint {
    margin: -4px 0 10px;
    font-size: 10px;
    color: rgba(255, 235, 200, 0.45);
    line-height: 1.35;
    text-align: left;
}

.link-account-error {
    margin: 0 0 10px;
    min-height: 1.2em;
    font-size: 12px;
    color: #ef9a9a;
    line-height: 1.35;
    text-align: left;
}

.link-account-actions {
    display: flex;
    gap: 8px;
}

.link-account-actions .pixel-btn {
    flex: 1;
    min-height: var(--touch-min);
}

/* --- สนทนา NPC --- */
.npc-dialogue-root {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 12px 12px calc(var(--controls-h) + var(--safe-bottom) + 12px);
    pointer-events: none;
}

.npc-dialogue-root.open {
    display: flex;
    pointer-events: auto;
}

.npc-dialogue-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.npc-dialogue-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    padding: 14px 14px 12px;
    text-align: left;
}

.npc-dialogue-name {
    margin: 0 0 8px;
    font-size: var(--text-lg);
    font-weight: bold;
    color: var(--px-gold);
    text-shadow: 1px 1px 0 #000;
}

.npc-dialogue-text {
    margin: 0 0 12px;
    font-size: var(--text-md);
    line-height: 1.55;
    color: #e8e0d8;
    min-height: 2.8em;
    word-break: break-word;
}

.npc-dialogue-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.npc-dialogue-next {
    width: 100%;
    min-height: var(--touch-min);
}

.npc-dialogue-end-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.npc-dialogue-end-actions .pixel-btn {
    min-height: var(--touch-min);
    width: 100%;
}

.npc-dialogue-end-actions .pixel-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ประกาศภารกิจ / ข้อความระบบ — แยกจากกล่องคุย NPC */
.npc-dialogue-root--system {
    align-items: center;
    padding: 24px 16px calc(var(--controls-h) + var(--safe-bottom) + 24px);
}

.npc-dialogue-root--system .npc-dialogue-backdrop {
    background: rgba(6, 14, 28, 0.55);
}

.npc-dialogue-root--system .npc-dialogue-panel {
    width: min(100%, 360px);
    padding: 18px 16px 14px;
    text-align: center;
    border-color: #3d6a8c;
    background: linear-gradient(
        165deg,
        rgba(36, 58, 84, 0.96) 0%,
        rgba(16, 28, 44, 0.97) 50%,
        rgba(10, 18, 30, 0.98) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(140, 200, 255, 0.35),
        0 4px 0 #061018,
        0 0 22px rgba(60, 140, 220, 0.35);
}

.npc-dialogue-root--system .npc-dialogue-name {
    margin: 0 0 10px;
    font-size: var(--text-sm);
    letter-spacing: 0.12em;
    color: #7ec8ff;
    text-shadow:
        0 0 8px rgba(90, 180, 255, 0.45),
        1px 1px 0 #000;
}

.npc-dialogue-root--system .npc-dialogue-text {
    margin: 0 0 14px;
    min-height: 0;
    font-size: var(--text-md);
    font-weight: bold;
    line-height: 1.5;
    color: #e8f4ff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.65);
}

.npc-dialogue-root--system .npc-dialogue-next {
    border-color: #4a7a9c;
}

/* scrollbar ธีมเกม (.game-scroll) — กำหนดที่ base.css · คลาสนี้ใช้กำหนด overflow เลื่อนได้ */
.game-scroll,
.screen-menu,
.screen-login,
.login-shell,
.screen-create,
.customize-panel,
.inv-bag-scroll,
.skill-library-scroll,
.codex-scroll,
.status-page.is-active,
.item-detail-panel,
.skill-detail-panel,
[data-chat-messages],
.chat-emoji-picker {
    -webkit-overflow-scrolling: touch;
}

/*
 * จอกว้าง (คอม)
 * — พื้นหลังมืดคลุมทั้งสามคอลัมน์
 * — กล่อง modal กึ่งกลางคอลัมน์กลางพอดี เว้นบน–ล่าง
 */

html.layout-wide {
    --modal-center-pad-y: max(24px, 4vh);
    --modal-center-pad-x: 12px;
}

/* แผงในคอลัมน์กลาง — ยืดฉากมืดให้คลุมซ้าย+กลาง+ขวา */
html.layout-wide #ui-overlay [data-menu-backdrop],
html.layout-wide #ui-overlay [data-world-map-backdrop],
html.layout-wide #ui-overlay .game-status-backdrop,
html.layout-wide #ui-overlay .item-detail-backdrop,
html.layout-wide #ui-overlay .item-action-backdrop {
    left: calc(-1 * var(--game-col-w));
    right: auto;
    width: calc(var(--game-col-w) * 3);
    top: 0;
}

html.layout-wide #ui-overlay [data-inv-backdrop],
html.layout-wide #ui-overlay [data-quest-backdrop],
html.layout-wide #ui-overlay [data-expertise-backdrop] {
    left: calc(-1 * var(--game-col-w));
    right: auto;
    width: calc(var(--game-col-w) * 3);
    top: 0;
}

/*
 * modal แบบ fixed — padding ซ้าย/ขวา = นอกคอลัมน์กลาง
 * flex center แล้วกล่องจะอยู่กลางคอลัมน์กลาง + เว้นบน–ล่าง
 */
html.layout-wide .game-modal-root,
html.layout-wide .link-account-root,
html.layout-wide .npc-sell-root,
html.layout-wide .npc-buy-root,
html.layout-wide .npc-craft-root,
html.layout-wide .npc-enhance-root,
html.layout-wide .npc-repair-root,
html.layout-wide .npc-quest-board-root,
html.layout-wide .campfire-cook-root,
html.layout-wide .trade-root,
html.layout-wide .trade-invite-root,
html.layout-wide .player-interact-root,
html.layout-wide .player-inspect-root,
html.layout-wide .death-wait-root,
html.layout-wide .house-tile-root,
html.layout-wide .friends-root,
html.layout-wide .friend-invite-root,
html.layout-wide .party-root,
html.layout-wide .party-invite-root,
html.layout-wide .cash-shop-root,
html.layout-wide .pshop-root,
html.layout-wide .fishing-minigame-root,
html.layout-wide .skill-action-root,
html.layout-wide .skill-detail-root,
html.layout-wide #skill-detail-root,
html.layout-wide .status-effect-detail-root,
html.layout-wide #status-effect-detail-root,
html.layout-wide .chat-item-detail-root.item-detail-root {
    align-items: center;
    justify-content: center;
    padding: var(--modal-center-pad-y) calc(50% - var(--game-col-w) / 2 + var(--modal-center-pad-x));
    box-sizing: border-box;
}

/* สนทนา NPC — มือถือชิดล่าง · คอมอยู่กลางคอลัมน์กลาง */
html.layout-wide .npc-dialogue-root {
    align-items: center;
    justify-content: center;
    padding: var(--modal-center-pad-y) calc(50% - var(--game-col-w) / 2 + var(--modal-center-pad-x));
}

html.layout-wide .game-modal,
html.layout-wide .link-account-panel,
html.layout-wide .npc-dialogue-panel,
html.layout-wide .npc-sell-sheet,
html.layout-wide .npc-buy-sheet,
html.layout-wide .npc-craft-sheet,
html.layout-wide .npc-enhance-sheet,
html.layout-wide .npc-repair-sheet,
html.layout-wide .npc-quest-board-panel,
html.layout-wide .campfire-cook-sheet,
html.layout-wide .trade-sheet,
html.layout-wide .trade-invite-sheet,
html.layout-wide .player-interact-sheet,
html.layout-wide .player-inspect-sheet,
html.layout-wide .death-wait-sheet,
html.layout-wide .house-tile-sheet,
html.layout-wide .friends-panel,
html.layout-wide .friend-invite-sheet,
html.layout-wide .party-panel,
html.layout-wide .party-invite-sheet,
html.layout-wide .cash-shop-panel,
html.layout-wide .pshop-sheet,
html.layout-wide .fishing-minigame-panel,
html.layout-wide .skill-detail-panel,
html.layout-wide .status-effect-detail-panel,
html.layout-wide .item-detail-panel {
    width: min(100%, calc(var(--game-col-w) - 2 * var(--modal-center-pad-x)));
    max-width: calc(var(--game-col-w) - 2 * var(--modal-center-pad-x));
    max-height: calc(100vh - 2 * var(--modal-center-pad-y));
    box-sizing: border-box;
}

/* แผงใน #ui-overlay — กึ่งกลางคอลัมน์กลาง เว้นบน–ล่าง */
html.layout-wide #game-menu-root,
html.layout-wide #world-map-root,
html.layout-wide .game-status-root {
    align-items: center;
    justify-content: center;
    padding: var(--modal-center-pad-y) var(--modal-center-pad-x);
    box-sizing: border-box;
}

html.layout-wide .game-menu-panel,
html.layout-wide .world-map-panel,
html.layout-wide .game-status-sheet {
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

/* กระเป๋า / เควส / ความเชี่ยวชาญ / สกิล — จากแผงเลื่อนล่าง → กล่องลอยกลางคอลัมน์ */
html.layout-wide #inventory-root,
html.layout-wide #game-quest-root,
html.layout-wide #game-expertise-root {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--modal-center-pad-y) var(--modal-center-pad-x);
    box-sizing: border-box;
    pointer-events: none;
}

html.layout-wide #inventory-root.open,
html.layout-wide #game-quest-root.open,
html.layout-wide #game-expertise-root.open {
    pointer-events: auto;
}

html.layout-wide #inventory-root [data-inv-sheet],
html.layout-wide #game-quest-root .game-quest-panel,
html.layout-wide #game-expertise-root .game-expertise-panel {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    transform: none;
    border-radius: 12px;
    padding-bottom: 12px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html.layout-wide #inventory-root.open [data-inv-sheet],
html.layout-wide #game-quest-root.open .game-quest-panel,
html.layout-wide #game-expertise-root.open .game-expertise-panel {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* เมนูสกิล — มืดทั้งสามคอลัมน์, แผงลอยกลางคอลัมน์กลาง */
html.layout-wide #skill-menu-root {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--modal-center-pad-y) calc(50% - var(--game-col-w) / 2 + var(--modal-center-pad-x));
    box-sizing: border-box;
    pointer-events: none;
}

html.layout-wide #skill-menu-root.open {
    pointer-events: auto;
}

html.layout-wide #skill-menu-root [data-skill-menu-backdrop] {
    position: absolute;
    inset: 0;
}

html.layout-wide #skill-menu-root [data-skill-menu-sheet] {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    transform: none;
    border-radius: 12px;
    padding-bottom: 12px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html.layout-wide #skill-menu-root.open [data-skill-menu-sheet] {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}