* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #10131a;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    color: #222222;
}

.canvas {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

.canvas-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    pointer-events: none;
}

.layout {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    width: 100%;
    min-height: 100%;
    align-items: stretch;
    color: #ffffff;
}

.panel {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1px;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* panel-news removed. Placeholder class keeps space for future redesign. */
.panel-news,
.panel.panel-news,
.panel-news--removed {
    flex: 1.35;
    min-width: 0;
    /* placeholder: original rules moved to backups/panel-news/css.style.css.original */
}

/* ===== Banner News (Phần Banner tin tức) ===== */
/* banner-news block removed. Original detailed rules are preserved in backups/panel-news/css.style.css.original */
.banner-news,
.banner-news__display,
.banner-news__nav,
.banner-news__navList,
.banner-news__btn,
.banner-news__placeholder {
    /* minimal placeholder to avoid empty ruleset lint warnings and keep selectors valid
       Original detailed rules are preserved in backups/panel-news/css.style.css.original */
    display: block;
    box-sizing: border-box;
}

.banner-news__display {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 320px;
    /* Fallback màu nền đặc nếu gradient không render (legacy) */
    /* solid fallback first (older IE / embedded webviews), then gradient for modern engines */
    background-color: #2e1f47;
    background: linear-gradient(135deg, rgba(50, 34, 78, 0.85), rgba(110, 68, 175, 0.85));
    /* border moved to wrapper to avoid seam */
    border: none;
    border-radius: 6px 6px 0 0;
    /* visual radius, wrapper handles clipping */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure banner area doesn't collapse or get covered by other elements in legacy webviews */
    min-height: 200px;
    /* safety minimum so UI still shows even if variables break */
    z-index: 0;
    position: relative;
}

.banner-news__placeholder {
    font-size: 18px;
    letter-spacing: .05em;
    font-weight: 600;
    color: #ffe7a9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
    opacity: .85;
    user-select: none;
    background: transparent;
    /* ensure placeholder text doesn't get a white bg from unexpected rules */
}

.banner-news__nav {
    width: 100%;
    /* Fallback for environments that don't support CSS custom properties */
    height: 50px;
    height: var(--banner-nav-height);
    background: rgba(0, 0, 0, 0.55);
    /* border moved to wrapper; remove local border to avoid seam */
    border: none;
    border-radius: 0 0 6px 6px;
    /* visual radius only */
    backdrop-filter: blur(4px);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow: hidden;
    z-index: 1;
    /* keep nav above display area */
}

/* NAV LIST (flex legacy safe) */
.banner-news__navList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    flex-wrap: nowrap;
}

/* BUTTONS: ban đầu thiết kế 5 nút cố định 112px + nút cuối co giãn.
   Sau khi thêm nút (6 hoặc thay đổi số lượng) ta chuyển sang flex:1 để tự chia đều 100% chiều rộng.
   Giải pháp này loại bỏ sai số subpixel và luôn kín full width bất kể số nút. */
/* Base button: fixed width 93.16px (559 / 6). Nút cuối sẽ fill nếu rounding thiếu 1px. */
.banner-news__btn {
    /* Make buttons share available space evenly — safer for variable button count */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    background: linear-gradient(180deg, #2d2241, #4d3a6d);
    color: #fff;
    font-size: clamp(13px, calc(var(--banner-nav-height) * 0.42), 20px);
    font-weight: 600;
    letter-spacing: .035em;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    position: relative;
    padding: 0 12px;
    /* Fallback chiều cao cố định cho môi trường không hỗ trợ CSS variable */
    height: 50px;
    line-height: 50px;
    height: var(--banner-nav-height);
    line-height: var(--banner-nav-height);
    transition: background .25s, transform .15s, box-shadow .25s, font-size .2s;
}

/* Phân cách mỗi nút cách nhau 1px (dùng khoảng trống hiển thị nền nav) */
/* Separator bằng đường kẻ thay vì khoảng trống để không làm tràn chiều rộng tổng */
.banner-news__btn+.banner-news__btn {
    margin-left: 0;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.16);
}

/* Fallback legacy nếu margin-left gây lỗi co giãn (IE7/8 rare): dùng đường kẻ mờ thay vì gap.
   Bật bằng class .nav-no-gap trên ul nếu cần. */
.nav-no-gap .banner-news__btn+.banner-news__btn {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18);
}

/* Previously used fixed last-child sizing — no longer needed when using flex:1 */


/* Nút cuối nới lỏng: chiếm phần dư còn lại (559 - 112*4 = 111px) tránh gap do 0.8px rounding */
/* Không cần rule last-child nới rộng nữa vì tất cả flex:1 */
/* .banner-news__btn:last-child { } */

/* Highlight duy nhất cho nút Liên hệ Admin (gộp, tránh định nghĩa lặp) */
.banner-news__btn--highlight {
    background: linear-gradient(90deg, #7c3aed, #ec9a1f, #f6d743);
    background-size: 180% 100%;
    animation: adminGlow 6s linear infinite;
    box-shadow: 0 0 0 2px rgba(255, 200, 70, .45), 0 0 14px rgba(255, 196, 68, .6), 0 0 30px -4px rgba(124, 58, 237, .55);
    /* Make admin button slightly wider than others */
    flex: 1.6 1 0;
    min-width: 110px;
    /* keeps it readable on narrow views */
    height: 50px;
    line-height: 50px;
    /* fallback */
}

.banner-news__btn--highlight:hover {
    background-position: 100% 0;
    box-shadow: 0 0 0 2px rgba(255, 220, 110, .7), 0 0 20px rgba(255, 196, 68, .85), 0 0 40px -4px rgba(124, 58, 237, .7);
}

@keyframes adminGlow {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* Bo góc chỉ ở hai nút đầu cuối */
.banner-news__btn:first-child {
    border-radius: 0 0 0 6px;
}

.banner-news__btn:last-child {
    border-radius: 0 0 6px 0;
}

.banner-news__btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.banner-news__btn:hover {
    background: linear-gradient(180deg, #3a2954, #6d4fa3);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), 0 6px 14px -4px rgba(0, 0, 0, .6);
}

.banner-news__btn:active {
    transform: translateY(1px);
}

/* Trạng thái focus cho accessibility trong launcher */
.banner-news__btn:focus-visible {
    outline: 2px solid #f6c744;
    outline-offset: 2px;
}

.banner-news__btn--highlight {
    /* Chiều cao cố định 50px (fallback) + dùng var để đồng bộ */
    height: 50px;
    line-height: 50px;
    /* fallback legacy */
    height: var(--banner-nav-height);
    line-height: var(--banner-nav-height);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 14px rgba(255, 196, 68, 0.55);
}

.banner-news__btn--highlight:hover {
    background: linear-gradient(90deg, #9d4bff, #ffb340);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28), 0 0 18px rgba(255, 196, 68, 0.75);
}

/* Scroll / degrade gracefully: nếu chiều rộng hẹp hơn thì cho thu nhỏ chữ */
@media (max-width: 880px) {
    .banner-news {
        width: 100%;
    }

    .banner-news__display,
    .banner-news__nav {
        width: 100%;
    }

    .banner-news__btn {
        font-size: 11px;
    }
}

/* Responsive: chỉ khi viewport RẤT hẹp (<480px) mới cho wrap 2 hàng.
   Tránh trigger sớm làm hỏng chiều cao cố định 50px khi control/webview nhỏ ~560px. */
@media (max-width: 480px) {
    .banner-news__navList {
        flex-wrap: wrap;
    }

    .banner-news__btn {
        flex: 1 1 50%;
    }
}

/* Safety override cho button khi grid: bỏ flex sizing riêng lẻ, height giữ 100% */
.banner-news__btn {
    min-width: 0;
}

.panel-events {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 6px;
}

.panel-events h2 {
    text-align: center;
}

.panel h2 {
    margin: 0;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.placeholder {
    margin: 0;
    color: rgba(34, 34, 34, 0.65);
    letter-spacing: 0.04em;
}

/* Events styles */
.events {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 5px;
    height: 407px;
    width: 264px;
    flex: none;
    display: flex;
    flex-direction: column;
}

.events__list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    flex: 1;
    /* Legacy IE scrollbar colors for embedded launcher control */
    scrollbar-face-color: #24173b;
    scrollbar-track-color: rgba(255, 255, 255, 0.08);
    scrollbar-shadow-color: #0d0718;
    scrollbar-highlight-color: #3b2a5c;
    scrollbar-3dlight-color: #3b2a5c;
    scrollbar-darkshadow-color: #0d0718;
    scrollbar-arrow-color: #f6c744;
    -ms-overflow-style: none;
    /* Hide default gutter to emulate thinner bar; pseudo custom track below */
}

/* Custom slimmer scrollbar for modern engines */
.events__list::-webkit-scrollbar {
    width: 6px;
}

.events__list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.events__list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7c3aed, #f6c744);
    border-radius: 6px;
}

.events__list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #9d4bff, #ffdb70);
}

.event {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 12px;
    min-width: 0;
}

.event__name {
    flex: 1;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event__countdown {
    font-family: monospace;
    color: #ffd700;
    font-weight: 600;
    font-size: 11px;
}

.event__status {
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(92, 54, 150, 0.35);
    color: #ffffff;
    font-weight: 600;
    font-size: 10px;
    white-space: nowrap;
}

.event__status.is-active {
    background: linear-gradient(90deg, #7c3aed, #f59e0b);
    color: #fff;
}

/* Tooltip */
.event-times-pop {
    position: fixed;
    z-index: 999;
    min-width: 150px;
    max-width: 250px;
    background: rgba(34, 25, 53, 0.92);
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    font-size: 12px;
    color: #ffffff;
    display: none;
    pointer-events: none;
}

.event-times-pop.is-visible {
    display: block;
}

.event-times-pop__title {
    font-weight: 700;
    margin-bottom: 6px;
    color: #f6d365;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.event-times-pop__duration {
    font-weight: 600;
    font-size: 11px;
    opacity: 0.75;
    text-transform: none;
}

.event-times-pop__list,
.event-times-pop__drops {
    list-style: none;
    margin: 0;
    padding: 0;
}

.event-times-pop__list--grid {
    font-size: 0;
}

.event-times-pop__list--grid li {
    display: inline-block;
    width: 33.333%;
    box-sizing: border-box;
    padding: 6px 6px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    text-align: center;
    font-size: 12px;
}

.event-times-pop__drops--grid {
    font-size: 0;
}

.event-times-pop__section {
    margin-top: 8px;
}

.event-times-pop__sectionTitle {
    font-weight: 600;
    font-size: 11px;
    margin-bottom: 4px;
    color: #cbb2ff;
    text-transform: uppercase;
}

.event-times-pop__meta {
    margin-bottom: 4px;
    font-size: 9px;
}

.event-times-pop__metaLabel {
    font-weight: 600;
    color: #ffd700;
}

.event-times-pop__metaValue {
    color: #ffffff;
}

.event-times-pop__note {
    margin-bottom: 4px;
    font-size: 9px;
    color: #cccccc;
    font-style: italic;
}

.event-times-pop__drop {
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    text-align: center;
    padding: 4px 2px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
}

.event-times-pop__dropThumb {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex: none;
}

.event-times-pop__dropThumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-times-pop__dropName {
    display: block;
    font-size: 9px;
    color: #ffe7a9;
    text-align: center;
    line-height: 1.2;
}

.event-times-pop__fallback {
    display: block;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    text-align: center;
    font-size: 11px;
}

.event-times-pop__reward {
    margin-top: 8px;
    font-weight: 600;
    font-size: 12px;
    color: #ffe7a9;
}

.event-times-pop__rewardValue {
    color: #ffd95c;
    margin-left: 6px;
    font-weight: 700;
}

.event-times-pop__empty {
    margin: 0;
    font-size: 11px;
    opacity: 0.8;
}