#game-quest-root {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 55;
    --quest-top-clearance: calc(var(--safe-top) + clamp(92px, 15vh, 118px));
}

#game-quest-root.open {
    pointer-events: auto;
}

[data-quest-backdrop] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--quest-top-clearance);
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

#game-quest-root.open [data-quest-backdrop] {
    opacity: 1;
    pointer-events: auto;
}

.game-quest-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--quest-top-clearance);
    padding: 10px 12px calc(8px + var(--safe-bottom));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.28s ease-out;
    border-radius: 10px 10px 0 0;
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(90, 70, 40, 0.35), transparent 70%),
        linear-gradient(180deg, #2c2419 0%, #18120e 55%, #120e0b 100%);
    pointer-events: auto;
}

#game-quest-root.open .game-quest-panel {
    transform: translateY(0);
}

.game-quest-panel .inv-header-row {
    margin-bottom: 8px;
    gap: 8px;
}

.quest-header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
}

.quest-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.quest-tab {
    flex: 1;
    min-height: var(--touch-min, 40px);
    font-size: 0.72rem;
    padding: 6px 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    opacity: 0.88;
}

.quest-tab.is-active {
    background: #8d6e63;
    border-color: #bcaaa4;
    opacity: 1;
}

.quest-tab[data-quest-tab='active'].is-active {
    background: linear-gradient(180deg, #6b4e1e 0%, #4a3514 100%);
    border-color: #f1c40f;
    color: #ffe082;
}

.quest-tab[data-quest-tab='available'].is-active {
    background: linear-gradient(180deg, #1e4a6b 0%, #14344a 100%);
    border-color: #5dade2;
    color: #aed6f1;
}

.quest-tab[data-quest-tab='completed'].is-active {
    background: linear-gradient(180deg, #1e5a3a 0%, #143a26 100%);
    border-color: #58d68d;
    color: #abebc6;
}

.quest-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.2rem;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f5e6c8;
}

.quest-tab.is-empty .quest-tab-count {
    opacity: 0.45;
}

/* —— สมุดเควส: รายการ + รายละเอียด —— */
.quest-log-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(120px, 38%) minmax(0, 1fr);
    gap: 8px;
}

.quest-log-list {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(141, 110, 99, 0.4);
}

.quest-log-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.quest-log-section-title {
    margin: 0;
    padding: 4px 8px 2px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    border-radius: 4px;
}

.quest-log-section--main .quest-log-section-title {
    color: #f9e79f;
    background: rgba(241, 196, 15, 0.12);
    border-left: 3px solid #f1c40f;
}

.quest-log-section--general .quest-log-section-title {
    color: #aed6f1;
    background: rgba(93, 173, 226, 0.12);
    border-left: 3px solid #5dade2;
}

.quest-log-section--daily .quest-log-section-title {
    color: #abebc6;
    background: rgba(88, 214, 141, 0.12);
    border-left: 3px solid #58d68d;
}

.quest-log-section-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quest-log-detail {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(160deg, rgba(55, 42, 28, 0.55) 0%, rgba(20, 15, 11, 0.72) 100%);
    border: 1px solid rgba(201, 162, 90, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 236, 179, 0.08);
}

.quest-empty,
.quest-detail-empty {
    margin: 14px 10px;
    color: #a89880;
    font-size: 0.82rem;
    line-height: 1.45;
}

.quest-log-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    flex-shrink: 0;
}

.quest-log-row:hover,
.quest-log-row:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    outline: none;
}

.quest-log-row.is-selected {
    background: rgba(241, 196, 15, 0.12);
    border-color: rgba(241, 196, 15, 0.45);
}

.quest-log-row-mid {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quest-log-row-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #f5e6c8;
    line-height: 1.3;
}

.quest-log-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.quest-log-row-progress {
    font-size: 0.68rem;
    color: #d4ac6e;
    line-height: 1.3;
}

.quest-type-badge {
    align-self: flex-start;
    font-size: 0.64rem;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.quest-type-badge--main {
    background: rgba(241, 196, 15, 0.22);
    color: #f9e79f;
}

.quest-type-badge--general {
    background: rgba(93, 173, 226, 0.22);
    color: #aed6f1;
}

.quest-type-badge--daily {
    background: rgba(88, 214, 141, 0.22);
    color: #abebc6;
}

.quest-detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.quest-detail-head {
    flex-shrink: 0;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(141, 110, 99, 0.4);
    background: rgba(0, 0, 0, 0.18);
}

.quest-detail-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.quest-detail-title {
    margin: 0;
    font-size: 1rem;
    color: #fff4d6;
    line-height: 1.3;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.quest-detail-status {
    margin: 6px 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: #d4ac6e;
}

.quest-detail--available .quest-detail-status {
    color: #85c1e9;
}

.quest-detail--completed .quest-detail-status {
    color: #82e0aa;
}

.quest-detail-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quest-detail-summary {
    margin: 0;
    font-size: 0.8rem;
    color: #c9b89a;
    line-height: 1.45;
}

.quest-detail-block {
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(141, 110, 99, 0.35);
}

.quest-detail-block-title {
    margin: 0 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c9a227;
}

.quest-detail-location {
    margin: 0;
    font-size: 0.78rem;
    color: #9ec5fe;
    line-height: 1.4;
}

.quest-card-level-hint {
    margin: 0;
    font-size: 0.72rem;
    color: #ffb74d;
    line-height: 1.35;
}

.quest-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quest-step {
    position: relative;
    padding-left: 16px;
    font-size: 0.78rem;
    color: #a89880;
    line-height: 1.4;
}

.quest-step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6d5d4b;
}

.quest-step--active {
    color: #f5e6c8;
    font-weight: 600;
}

.quest-step--active::before {
    background: #f1c40f;
    box-shadow: 0 0 6px rgba(241, 196, 15, 0.55);
}

.quest-step--done {
    color: #82e0aa;
}

.quest-step--done::before {
    background: #58d68d;
}

.quest-detail-rewards {
    border-color: rgba(244, 208, 63, 0.35);
    background: rgba(241, 196, 15, 0.08);
}

.quest-card-reward {
    margin: 0;
    font-size: 0.78rem;
    color: #f4d03f;
    line-height: 1.4;
}

/* จอกว้าง — รายการซ้าย / รายละเอียดขวา */
@media (min-width: 720px) {
    .quest-log-layout {
        grid-template-rows: none;
        grid-template-columns: minmax(220px, 38%) minmax(0, 1fr);
        gap: 10px;
    }
}

/* --- ติดตามเควสบนหน้าจอ (ขวา เหนือสกิล · ขนาดคงที่ · ไม่แตะแชท/ฮอตบาร์) --- */
#quest-tracker-root {
    --quest-tracker-w: clamp(168px, 34vw, 188px);
    /* ขอบบน = แถว「พิมพ์แชท」ในแชทตอนเปิดพิมพ์ (ไม่รวมแถบแท็บเหนือแผง) */
    --quest-tracker-chat-top: calc(
        var(--chat-stack-bottom) + var(--safe-bottom) +
            max(200px, min(var(--chat-compose-panel-h), 42vh))
    );
    --quest-tracker-bottom: calc(4 * var(--skill-cell-size) + 15px + var(--safe-bottom) + 28px);
    --quest-tracker-h: max(
        var(--chat-panel-h),
        calc(var(--quest-tracker-chat-top) - var(--quest-tracker-bottom))
    );

    position: absolute;
    right: 10px;
    left: auto;
    bottom: var(--quest-tracker-bottom);
    width: var(--quest-tracker-w);
    height: var(--quest-tracker-h);
    max-width: calc(100% - var(--skill-hotbar-w) - 20px);
    pointer-events: none;
    z-index: 6;
    touch-action: manipulation;
}

/* จอกว้าง (คอม) — กล่องเควสไปขอบขวาคอลัมน์ขวา (ฮอตบาร์อยู่คอลัมน์กลางแล้ว) */
html.layout-wide #quest-tracker-root {
    right: calc(-1 * var(--game-col-w) + 10px);
    left: auto;
    max-width: calc(var(--game-col-w) - 20px);
    --quest-tracker-bottom: calc(12px + var(--safe-bottom));
}

#quest-tracker-root > * {
    pointer-events: auto;
}

.quest-tracker-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(42, 33, 24, 0.94) 0%, rgba(14, 11, 8, 0.9) 100%);
    border: 2px solid rgba(141, 110, 99, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 179, 0.08),
        0 4px 14px rgba(0, 0, 0, 0.34);
    box-sizing: border-box;
}

.quest-tracker-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 4px 8px;
    border-bottom: 1px solid rgba(141, 110, 99, 0.4);
    background: rgba(0, 0, 0, 0.22);
}

.quest-tracker-header-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.quest-tracker-header-btn {
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid rgba(141, 110, 99, 0.65);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: #ffe082;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.quest-tracker-header-btn:hover,
.quest-tracker-header-btn:focus-visible {
    border-color: rgba(255, 213, 79, 0.75);
    background: rgba(255, 193, 7, 0.14);
    outline: none;
}

.quest-tracker-collapsed-tab {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid rgba(141, 110, 99, 0.72);
    border-radius: 6px;
    background: linear-gradient(165deg, rgba(42, 33, 24, 0.94) 0%, rgba(14, 11, 8, 0.9) 100%);
    color: #ffe082;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.34);
}

.quest-tracker-collapsed-tab:hover,
.quest-tracker-collapsed-tab:focus-visible {
    border-color: rgba(255, 213, 79, 0.75);
    outline: none;
}

#quest-tracker-root.is-collapsed {
    width: auto;
    height: auto;
}

#quest-tracker-root.is-collapsed .quest-tracker-collapsed-tab {
    display: inline-flex;
}

.quest-tracker-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    color: #3e2723;
    background: linear-gradient(180deg, #ffe082 0%, #ffb300 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.quest-tracker-header-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffe082;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
}

.quest-tracker-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px 6px 6px;
    -webkit-overflow-scrolling: touch;
}

.quest-tracker-section + .quest-tracker-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(141, 110, 99, 0.35);
}

.quest-tracker-type-head {
    display: flex;
    align-items: center;
    margin: 0 0 5px;
    padding: 0 1px;
}

.quest-type-badge--tracker {
    font-size: 0.58rem;
    padding: 1px 6px;
    letter-spacing: 0.03em;
}

.quest-tracker-status-title {
    margin: 4px 0 3px;
    padding: 0 2px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #8f8272;
}

.quest-tracker-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    margin: 0 0 4px;
    padding: 4px 5px 4px 7px;
    border: 1px solid rgba(90, 70, 55, 0.55);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.26);
    color: #f5efe6;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    box-sizing: border-box;
    border-left-width: 3px;
}

.quest-tracker-item:last-child {
    margin-bottom: 0;
}

.quest-tracker-item--main {
    border-left-color: #ffc107;
}

.quest-tracker-item--general {
    border-left-color: #42a5f5;
}

.quest-tracker-item--daily {
    border-left-color: #66bb6a;
}

.quest-tracker-item--active {
    background: rgba(255, 193, 7, 0.08);
}

.quest-tracker-item--available {
    background: rgba(0, 0, 0, 0.18);
}

.quest-tracker-item:hover,
.quest-tracker-item:focus-visible {
    border-color: rgba(255, 213, 79, 0.55);
    background: rgba(0, 0, 0, 0.38);
    outline: none;
}

.quest-tracker-item-head {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.quest-tracker-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quest-tracker-item-detail {
    font-size: 0.6rem;
    line-height: 1.32;
    color: #b8ab9a;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quest-tracker-item-detail--hint {
    color: #c4b59e;
}

.quest-tracker-item--active .quest-tracker-item-detail:not(.quest-tracker-item-detail--receive):not(.quest-tracker-item-detail--map):not(.quest-tracker-item-detail--hint) {
    -webkit-line-clamp: 2;
}

.quest-tracker-item--available .quest-tracker-item-detail {
    color: #968a7c;
}

.quest-tracker-item--available .quest-tracker-item-detail--hint {
    color: #b0a494;
}

.quest-tracker-item-detail--map {
    color: #857a6e;
}

@media (max-height: 680px) {
    #quest-tracker-root {
        --quest-tracker-bottom: calc(4 * var(--skill-cell-size) + 15px + var(--safe-bottom) + 24px);
    }
}

@media (max-width: 380px) {
    #quest-tracker-root {
        --quest-tracker-w: 164px;
    }
}