:root {
    --bg-main: #0b0d16;
    --bg-card: #131722;
    --border-color: #22293f;
    --neon-blue: #00bfff;
    --neon-pink: #ff0055;
    --neon-green: #00ff66;
    --neon-amber: #ffaa00;
    --text-white: #ffffff;
}

html, body {
    background-color: var(--bg-main) !important;
    color: var(--text-white);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Kanit', sans-serif;
}

.game-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.auth-screen { display: none; }
.auth-screen.active { display: block; }

.auth-card-dark {
    background: var(--bg-card);
    color: var(--text-white);
    padding: 35px 30px;
    max-width: 420px;
    margin: 80px auto;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 25px rgba(0,0,0,0.7);
}

.auth-title-dark {
    text-align: center;
    font-size: 20px;
    margin-bottom: 25px;
    color: var(--neon-blue);
    font-weight: bold;
}

.input-field-group {
    position: relative;
    margin-bottom: 16px;
}

.required-star {
    color: var(--neon-pink);
    position: absolute;
    left: -15px;
    top: 12px;
    font-weight: bold;
}

.auth-card-dark input[type="text"], 
.auth-card-dark input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 15px;
    color: #ffffff;
    background: #0d111a;
    box-sizing: border-box;
}

.auth-card-dark input:focus {
    border-color: var(--neon-blue);
    outline: none;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.3);
}

.forgot-link-container { text-align: right; margin-bottom: 20px; }
.text-link-blue { color: #007bff; cursor: pointer; font-size: 14px; user-select: none; }
.text-link-blue:hover { color: var(--neon-blue); text-decoration: underline; }

.btn-auth-system-blue {
    width: 100%;
    padding: 14px;
    background: linear-gradient(45deg, #0055ff, var(--neon-blue));
    color: white;
    border: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.2);
}

.btn-auth-white-outline {
    width: 100%;
    padding: 12px;
    background: transparent;
    color: #ffffff;
    border: 1px solid var(--border-color);
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}

/* ล็อบบี้สไตล์ */
.lobby-container { display: grid; grid-template-columns: 260px 1fr; gap: 20px; margin-top: 20px; }
.sidebar-profile { background: var(--bg-card); border: 1px solid var(--border-color); padding: 20px; border-radius: 8px; }
.lobby-header { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); padding: 15px 20px; border-radius: 8px; border: 1px solid var(--border-color); margin-bottom: 15px;}
.room-list-container { display: grid; grid-template-columns: 1fr; gap: 10px; }
.neon-text-blue { color: var(--neon-blue); margin: 0;}
.highlight-cyan { color: var(--neon-blue); font-weight: bold; }
.room-item-row { display: flex; justify-content: space-between; align-items: center; background: #171c2c; border: 1px solid var(--border-color); padding: 15px 20px; border-radius: 6px; cursor: pointer; }
.room-id-tag { color: var(--neon-amber); font-weight: bold; }

/* หน้าห้อง */
.room-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; margin-top: 15px; }
.room-control-panel { background: var(--bg-card); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); margin-bottom: 15px; }
.info-row { display: flex; justify-content: space-between; align-items: center; }
.badge-diff { background: var(--neon-amber); color: #000; padding: 3px 10px; font-weight: bold; border-radius: 4px; font-size: 12px;}
.host-settings-bar { display: flex; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.host-settings-bar select { background: #080a10; color: #fff; border: 1px solid var(--border-color); padding: 5px; border-radius: 4px; }
.player-slots-container { display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px; }
.slot-player-card { background: #111420; border-left: 5px solid #444; padding: 12px 15px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
.slot-player-card.active-slot { border-left-color: var(--neon-blue); background: #181d30; }
.status-label { font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 3px; }
.status-label.host { background: var(--neon-blue); color: #000; }

#game-image-holder {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 24px;
}

#game-image-holder img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

#game-hotspots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.game-hotspot-button {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.95);
    background: rgba(59, 130, 246, 0.85);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.15s ease, background 0.15s ease;
}

.game-hotspot-button:hover {
    transform: scale(1.05);
}

.game-hotspot-button.clicked {
    background: rgba(16, 185, 129, 0.95);
    border-color: rgba(16, 185, 129, 1);
}

.btn { border: none; padding: 12px; font-weight: bold; border-radius: 5px; cursor: pointer; }
.btn-primary { background: var(--neon-blue); color: #000; }
.btn-success { background: var(--neon-green); color: #000; }
.btn-danger { background: var(--neon-pink); color: #fff; }
.btn-auto { width: auto; }
.btn-xs { padding: 4px 8px; font-size: 11px; }

.ui-panel { background: var(--bg-card); padding: 15px; border-radius: 8px; margin-bottom: 15px; border: 1px solid var(--border-color); }
.canvas-holder { background: #000; border-radius: 8px; overflow: hidden; border: 2px solid var(--border-color); }
.waiting-start-zone { background: #171c2c; padding: 60px; text-align: center; border-radius: 8px; border: 2px dashed var(--border-color); }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; z-index: 100; }
.modal.open { display: flex; }
.modal-content { background: var(--bg-card); border: 2px solid var(--neon-blue); padding: 25px; border-radius: 12px; width: 100%; max-width: 450px; }
.modal-main-title { color: var(--neon-blue); margin: 0 0 20px 0; }
.modal-content label { display: block; font-size: 12px; margin-top: 10px; color: var(--neon-blue); }
.modal-content input, .modal-content select { background: #080a10; color: #fff; border: 1px solid var(--border-color); padding: 10px; width: 100%; box-sizing: border-box; border-radius: 4px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }

/* ==========================================
   🎯 แต่งสี SWEETALERT2 ให้เหมือนภาพต้นฉบับเป๊ะ ๆ
   ========================================== */
.swal2-container {
    z-index: 99999 !important;
}
.swal2-backdrop-show {
    z-index: 99998 !important;
}
.swal2-popup.custom-game-alert {
    z-index: 100000 !important;
    background: #1c2333 !important; /* สีพื้นหลังกล่องแบบเดียวกับ image_8e987f.png */
    border-radius: 24px !important; /* ความมนขอบกล่องกว้างจุใจ */
    padding: 30px !important;
    font-family: 'Kanit', sans-serif !important;
}

.swal2-title.custom-game-title {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    margin-top: 15px !important;
}

/* สีปุ่มตกลงสีม่วง/น้ำเงิน */
.swal2-confirm.custom-game-btn {
    background: #5046e5 !important; /* สีน้ำเงินม่วงเข้ม */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    padding: 10px 32px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* วงกลมไอคอนขอบสีเขียวเข้ม ตัวติ๊กสีเขียวสว่าง */
.swal2-icon.swal2-success {
    border-color: #2b3b36 !important;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #52c41a !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border: 4px solid rgba(82, 196, 26, 0.2) !important;
}
.custom-game-btn-cancel {
    background: #5a5a5a; /* หรือสีแดง #ff4a4a แล้วแต่ชอบเลยครับ */
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    font-family: inherit;
    border-radius: 4px;
}
.custom-game-btn-cancel:hover {
    background: #444444;
}
/* ==========================================
   💥 แถบเมนูสไลด์และระบบจัดการโปรไฟล์ (เพิ่มต่อท้าย)
   ========================================== */

/* ปุ่มสามขีดขาวด้านขวาบน */
.nav-toggle-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #111;
    border: 1px solid #333;
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    transition: 0.2s ease-in-out;
}
.nav-toggle-btn:hover {
    border-color: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

/* พื้นหลังแถบขวาสไลด์ */
.right-sidebar {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100%;
    background: #0b0e14;
    border-left: 1px solid #1f2937;
    padding: 20px;
    box-shadow: -5px 0 25px rgba(0,0,0,0.8);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}
.right-sidebar.open {
    right: 0;
}

.sidebar-close-row {
    display: flex;
    justify-content: flex-end;
}
.sidebar-close-btn {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 22px;
    cursor: pointer;
}
.sidebar-close-btn:hover {
    color: #ef4444;
}

/* การ์ด Profile ในแถบสไลด์ */
.sidebar-profile-card {
    background: #111622;
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}
.avatar-container {
    width: 65px;
    height: 65px;
    border-radius: 10px;
    overflow: hidden;
    background: #1a2333;
    border: 2px solid #ef4444;
}
.avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-info-block h3 {
    color: #fff;
    font-size: 16px;
    margin: 0 0 4px 0;
}
.badge-lv, .badge-rank {
    display: inline-block;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    margin-right: 4px;
}
.badge-lv {
    background: #ef4444;
    color: #fff;
}
.badge-rank {
    background: #1f2937;
    color: #9ca3af;
    border: 1px solid #374151;
}

.sidebar-divider {
    border: 0;
    height: 1px;
    background: #1f2937;
    margin: 20px 0;
}

/* ลิงค์เมนูแถบสไลด์ */
.sidebar-menu-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}
.menu-link-item {
    background: transparent;
    border: none;
    text-align: left;
    padding: 14px 16px;
    color: #9ca3af;
    font-size: 14px;
    font-family: 'Kanit', sans-serif;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.2s;
}
.text-decoration-none {
    text-decoration: none;
}
.menu-link-item i {
    font-size: 16px;
}
.menu-link-item:hover {
    background: #111622;
    color: #fff;
}
.menu-link-item.active-link {
    background: #ef4444;
    color: #fff;
    font-weight: 600;
}

.sidebar-footer {
    margin-top: auto;
}
.btn-sidebar-logout {
    width: 100%;
    background: #160d0d;
    border: 1px solid #3b1818;
    color: #ef4444;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Kanit', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
}
.btn-sidebar-logout:hover {
    background: #ef4444;
    color: #fff;
}

/* จัดเลย์เอาท์หน้าแก้ไขโปรไฟล์ใหม่ */
.profile-edit-container {
    width: 100%;
    max-width: 950px;
    margin: 50px auto 0 auto;
    padding: 0 20px;
}
.profile-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
@media (max-width: 768px) {
    .profile-edit-grid { grid-template-columns: 1fr; }
}
.edit-box-dark {
    background: #0d1117;
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 25px;
}
.edit-box-dark h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
    font-size: 16px;
    border-bottom: 1px solid #1f2937;
    padding-bottom: 10px;
}
.avatar-preview-container {
    width: 110px;
    height: 110px;
    border-radius: 14px;
    overflow: hidden;
    margin: 0 auto;
    background: #111622;
    border: 3px solid #ef4444;
}
.avatar-preview-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.input-group-v2 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.input-group-v2 label {
    color: #9ca3af;
    font-size: 13px;
}
.input-group-v2 input {
    background: #111622;
    border: 1px solid #1f2937;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    font-family: 'Kanit', sans-serif;
    outline: none;
}
.input-group-v2 input:focus {
    border-color: #ef4444;
}

/* ปรับระยะโครงสร้างให้กว้างเต็มหน้าหลังตัด Sidebar เก่าออก */
.lobby-container-v2 {
    width: 100%;
    max-width: 1100px;
    margin: 40px auto 0 auto;
    padding: 0 20px;
}
/* ==========================================
   🔥 [3.1 - 3.7] ระบบดีไซน์ LOBBY & MATCH ROOM โฉมใหม่ทันสมัยสไตล์ ESPORT
   ========================================== */

/* หน้าแดชบอร์ด Lobby ใหม่ */
.modern-lobby-dashboard {
    width: 100%;
    max-width: 1160px;
    margin: 40px auto;
    padding: 0 24px;
    font-family: 'Kanit', sans-serif;
    box-sizing: border-box;
}

/* ป้ายแบนเนอร์ส่วนหัวหน้า Lobby */
.lobby-banner-hero {
    background: linear-gradient(135deg, #111827 0%, #030712 100%);
    border: 1px solid #1f2937;
    border-left: 5px solid #ef4444;
    padding: 30px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-bottom: 35px;
    flex-wrap: wrap;
    gap: 20px;
}
.hero-overlay-text {
    text-align: left;
}
.lobby-banner-hero h1 {
    margin: 0 0 6px 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 0 15px rgba(255,255,255,0.1);
}
.lobby-banner-hero p {
    margin: 0;
    color: #9ca3af;
    font-size: 14px;
}

/* ปุ่มกดสร้างปาร์ตี้แรนด้อม/เลือกธีม */
.btn-create-match-neon {
    background: linear-gradient(90deg, #dc2626, #ef4444);
    color: #fff;
    border: none;
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    transition: 0.2s ease-in-out;
}
.btn-create-match-neon:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.7);
}

/* หัวตารางรายการห้องแมตช์ */
.lobby-server-list-section {
    text-align: left;
}
.list-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #1f2937;
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.list-table-header .col-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
.list-table-header .col-count {
    color: #6b7280;
    font-size: 13px;
}

/* เลย์เอาท์การ์ดรายการห้องแสดงผล */
.modern-room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}
.modern-match-card-item {
    background: #0b0f17;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.25s ease;
}
.modern-match-card-item:hover {
    border-color: #38bdf8;
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(56, 189, 248, 0.15);
}

.card-left-specs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.card-left-specs h3 {
    margin: 0;
    font-size: 16px;
    color: #f3f4f6;
    font-weight: 600;
}
.pill-mode-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 2px;
}
.solo-pill { background: #0284c7; color: #fff; }
.team-pill { background: #c026d3; color: #fff; }

.meta-pill-specs {
    display: flex;
    gap: 12px;
    color: #6b7280;
    font-size: 12px;
    margin-top: 2px;
}

.card-right-interaction {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.player-counter-badge {
    background: #1e293b;
    color: #38bdf8;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #334155;
}
.btn-join-match-glow {
    background: #fff;
    color: #000;
    border: none;
    font-family: 'Kanit', sans-serif;
    font-weight: 700;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}
.btn-join-match-glow:hover {
    background: #38bdf8;
    color: #fff;
    box-shadow: 0 0 15px rgba(56,189,248,0.5);
}

/* หน้าต่างโมดอลสร้างห้องแบบพรีเมียม */
.modern-modal-style {
    background: #090d14 !important;
    border: 1px solid #1e293b !important;
    border-radius: 16px !important;
    padding: 0 !important;
    overflow: hidden;
    max-width: 550px;
}
.modal-header-glow {
    background: linear-gradient(180deg, #111827 0%, #090d14 100%);
    border-bottom: 1px solid #1e293b;
    padding: 20px 25px;
    text-align: left;
}
.modal-header-glow h3 { margin: 0; font-size: 18px; color: #fff; font-weight: 700; letter-spacing: 0.5px; }
.modal-header-glow p { margin: 4px 0 0 0; font-size: 12px; color: #6b7280; }

.modal-body-form { padding: 25px; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.modern-input-row { display: flex; flex-direction: column; gap: 6px; }
.modern-input-row label { color: #9ca3af; font-size: 13px; font-weight: 500; }
.modern-input-row input, .modern-input-row select {
    background: #111723; border: 1px solid #1e293b; color: #fff; padding: 12px; border-radius: 8px; font-family: 'Kanit', sans-serif; outline: none;
}
.modern-input-row input:focus, .modern-input-row select:focus { border-color: #ef4444; }

.modern-grid-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* แท็บเลือกโหมดการเล่นทีม */
.mode-selector-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tab-label-btn { cursor: pointer; position: relative; }
.tab-label-btn input { display: none; }
.tab-design {
    background: #111723; border: 1px solid #1e293b; color: #9ca3af; padding: 12px; border-radius: 8px; text-align: center; font-size: 13px; font-weight: 500; transition: 0.2s;
}
.tab-label-btn input:checked + .tab-design {
    background: #1e1b4b; border-color: #6366f1; color: #a5b4fc; box-shadow: 0 0 15px rgba(99,102,241,0.2);
}

.modal-footer-actions { background: #0b0f19; padding: 20px 25px; display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid #1e293b; }
.btn-neon-action-success { background: #ef4444; color: #fff; border: none; font-family: 'Kanit', sans-serif; font-weight: 600; padding: 10px 24px; border-radius: 6px; cursor: pointer; }
.btn-neon-action-cancel { background: #1e293b; color: #9ca3af; border: none; font-family: 'Kanit', sans-serif; padding: 10px 20px; border-radius: 6px; cursor: pointer; }

/* โครงสร้างหน้าจอด้านในปาร์ตี้ห้อง (Match Room UI) */
.modern-room-layout {
    width: 100%; max-width: 1240px; margin: 30px auto; padding: 0 24px; font-family: 'Kanit', sans-serif; box-sizing: border-box;
}
.room-top-navbar-control {
    background: #0b0f17; border: 1px solid #1e293b; border-radius: 12px; padding: 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px;
}
.room-identity-group { display: flex; align-items: center; gap: 15px; text-align: left; }
.room-status-badge { background: rgba(239, 68, 68, 0.15); border: 1px solid #ef4444; color: #ef4444; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.5px; }
.room-texts h2 { margin: 0; font-size: 20px; color: #fff; font-weight: 700; }
.room-texts p { margin: 2px 0 0 0; font-size: 12px; color: #6b7280; }
.badge-mode-type { color: #a5b4fc; font-weight: 600; }

/* แผงแก้ไขห้องเรียลไทม์ฝั่งหัวห้อง */
.host-live-management-panel { display: flex; gap: 12px; flex-wrap: wrap; text-align: left; }
.live-input-box { display: flex; flex-direction: column; gap: 4px; }
.live-input-box label { color: #6b7280; font-size: 11px; font-weight: 500; }
.live-input-box input, .live-input-box select {
    background: #111723; border: 1px solid #1e293b; color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-family: 'Kanit', sans-serif; outline: none;
}

.room-main-content-split { display: grid; grid-template-columns: 1fr 380px; gap: 25px; }
@media (max-width: 992px) { .room-main-content-split { grid-template-columns: 1fr; } }

.room-left-view-panel { background: #05070c; border: 1px solid #1e293b; border-radius: 12px; min-height: 480px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.waiting-start-zone { text-align: center; padding: 40px; }
.radar-glow-container { font-size: 45px; color: #ef4444; margin-bottom: 15px; filter: drop-shadow(0 0 10px rgba(239,68,68,0.4)); }
.animation-spin { animation: fa-spin 4s infinite linear; }
.waiting-start-zone h3 { margin: 0; font-size: 18px; color: #fff; letter-spacing: 1px; }
.waiting-start-zone p { margin: 5px 0 0 0; font-size: 13px; color: #4b5563; }
.room-details-pill-row { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }
.room-details-pill-row span { background: #111827; border: 1px solid #1f2937; color: #9ca3af; padding: 5px 12px; border-radius: 20px; font-size: 12px; }

/* แผงขวา: แสดงการ์ดสล็อตสมาชิกร่วมทีม */
.room-right-players-panel { display: flex; flex-direction: column; gap: 15px; text-align: left; }
.panel-section-title { color: #9ca3af; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; border-left: 3px solid #ef4444; padding-left: 8px; }

.modern-player-slots-stack { display: flex; flex-direction: column; gap: 12px; }

/* การ์ดสล็อตผู้เล่น 4 ช่องดีไซน์พรีเมียม */
.modern-slot-player-card {
    background: #0b0f17; border: 1px solid #1e293b; border-radius: 10px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; position: relative;
}
.modern-slot-player-card.ready-glow { border-color: #10b981; box-shadow: inset 0 0 15px rgba(16,185,129,0.08); }
.modern-slot-player-card.host-card-border { border-left: 4px solid #f59e0b; }

.slot-flex-avatar-name { display: flex; align-items: center; gap: 14px; }
.slot-img-holder { width: 48px; height: 48px; border-radius: 8px; background: #111723; border: 1px solid #334155; position: relative; }
.slot-img-holder img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.slot-level-pill { position: absolute; bottom: -4px; right: -4px; background: #000; color: #f59e0b; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 4px; border: 1px solid #f59e0b; }

.slot-info-meta h4 { margin: 0; font-size: 14px; color: #fff; font-weight: 500; }
.slot-info-meta .you-tag { color: #38bdf8; font-size: 11px; margin-left: 4px; font-weight: bold; }
.slot-status-text-pill { display: block; font-size: 11px; color: #6b7280; margin-top: 2px; }

/* ดีไซน์ปุ่มเตะ / มอบหัวห้องของโฮสต์ */
.host-kick-promote-actions { display: flex; gap: 6px; }
.mini-action-btn { border: none; font-family: 'Kanit', sans-serif; font-size: 10px; font-weight: 600; padding: 5px 10px; border-radius: 4px; cursor: pointer; transition: 0.15s; }
.promote-btn { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.promote-btn:hover { background: #f59e0b; color: #000; }
.kick-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.kick-btn:hover { background: #ef4444; color: #fff; }

/* ดีไซน์ช่องสล็อตที่ยังว่าง */
.slot-empty { background: rgba(11,15,23,0.3) !important; border: 1px dashed #1e293b !important; box-shadow: none !important; }
.slot-img-holder-empty { width: 48px; height: 48px; border-radius: 8px; border: 1px dashed #334155; display: flex; align-items: center; justify-content: center; color: #334155; font-size: 14px; }

/* แผงปุ่มฟุตเตอร์ล่างห้อง */
.room-action-footer-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.btn-action-lobby-neon {
    width: 100%; border: none; font-family: 'Kanit', sans-serif; font-weight: 700; font-size: 14px; padding: 14px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.2s;
}
.blue-neon { background: #1e293b; color: #38bdf8; border: 1px solid #334155; }
.blue-neon:hover { background: #38bdf8; color: #fff; box-shadow: 0 0 15px rgba(56,189,248,0.3); }
.blue-neon.ready-active { background: #064e3b !important; color: #34d399 !important; border-color: #059669 !important; box-shadow: 0 0 15px rgba(52,211,153,0.3) !important; }

.green-neon { background: #10b981; color: #fff; box-shadow: 0 0 15px rgba(16,185,129,0.25); }
.green-neon:hover { background: #059669; box-shadow: 0 0 25px rgba(16,185,129,0.5); }
.red-neon { background: #160d0d; border: 1px solid #3b1818; color: #ef4444; }
.red-neon:hover { background: #ef4444; color: #fff; }

.no-rooms-placeholder { padding: 40px; text-align: center; color: #4b5563; grid-column: 1 / -1; background: #070a0f; border: 1px dashed #1e293b; border-radius: 12px; }
.no-rooms-placeholder i { font-size: 32px; margin-bottom: 10px; color: #1e293b; }
.no-rooms-placeholder p { margin: 0; font-size: 13px; font-style: italic; }

/* ===== CSS originally embedded in the exported HTML ===== */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');
        * { font-family: 'Kanit', sans-serif; }
        body { background: #0f0f1a; color: #e2e8f0; overflow-x: hidden; }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #1a1a2e; }
        ::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 3px; }
        
        /* Auth Screens */
        .auth-screen { display: none; animation: fadeIn 0.4s ease; }
        .auth-screen.active { display: flex; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        
        /* Glassmorphism Cards */
        .glass-card {
            background: rgba(30, 30, 50, 0.8);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
        }
        
        /* Input Fields */
        .game-input {
            background: #1a1a2e;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            padding: 12px 16px;
            color: #e2e8f0;
            width: 100%;
            transition: all 0.3s;
            font-size: 14px;
        }
        .game-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
        .game-input::placeholder { color: #64748b; }

        .game-image-holder {
            position: relative;
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
        }
        .game-image-holder img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 24px;
            border: 1px solid rgba(255,255,255,0.08);
        }
        #game-hotspots {
            position: absolute;
            inset: 0;
            pointer-events: auto;
        }
        .hotspot-btn {
            position: absolute;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(59,130,246,0.2);
            border: 2px solid rgba(59,130,246,0.7);
            transform: translate(-50%, -50%);
            cursor: pointer;
            transition: transform 0.2s, background 0.2s, border-color 0.2s;
            pointer-events: auto;
        }
        .hotspot-btn:hover {
            transform: translate(-50%, -50%) scale(1.2);
        }
        .hotspot-btn.clicked {
            background: rgba(16,185,129,0.7);
            border-color: #22c55e;
        }
        .game-stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        .game-stat-card {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            padding: 14px 18px;
            flex: 1 1 150px;
            min-width: 140px;
        }
        html.js-loading .auth-screen {
            visibility: hidden !important;
            opacity: 0 !important;
        }
        .game-stat-card p { margin: 0; }
        .game-stat-card .stat-label { color: #94a3b8; font-size: 12px; margin-bottom: 6px; }
        .game-stat-card .stat-value { color: #e2e8f0; font-weight: 700; font-size: 18px; }
        
        /* Buttons */
        .btn-primary {
            background: linear-gradient(135deg, #6366f1, #7c3aed);
            border: none;
            border-radius: 14px;
            padding: 14px 26px;
            color: white;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s ease;
            width: 100%;
        }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(99,102,241,0.35); }
        
        .btn-danger {
            background: linear-gradient(135deg, #ef4444, #f97316);
            border: none;
            border-radius: 14px;
            padding: 14px 26px;
            color: white;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s ease;
        }
        
        .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(239,68,68,0.3); }
        
        .btn-blue {
            background: linear-gradient(135deg, #1d4ed8, #2563eb);
            border: none;
            border-radius: 14px;
            padding: 12px 24px;
            color: white;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s ease;
        }
        .btn-blue:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(37,99,235,0.35); }

        .btn-rank {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            border: none;
            border-radius: 10px;
            padding: 12px 24px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: auto;
        }
        .btn-rank:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(245,158,11,0.3); }
        .btn-rank:disabled {
            background: linear-gradient(135deg, #475569, #334155);
            cursor: not-allowed;
            color: #cbd5e1;
            box-shadow: none;
        }
        .btn-rank:disabled:hover { transform: none; box-shadow: none; }

        .instagram-footer-link,
        .floating-instagram-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: radial-gradient(circle at top left, #e1306c, #c13584 40%, #833ab4 70%, #405de6);
            color: white;
            text-decoration: none;
            border-radius: 999px;
            padding: 12px 18px;
            font-weight: 700;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
        .instagram-footer-link:hover,
        .floating-instagram-link:hover {
            transform: translateY(-1px);
            opacity: 0.95;
        }
        .floating-instagram-link {
            position: fixed;
            right: 24px;
            bottom: 24px;
            z-index: 1500;
            box-shadow: 0 20px 40px rgba(0,0,0,0.32);
        }
        
        /* Sidebar */
        #right-sidebar-menu {
            position: fixed;
            top: 0; right: -320px;
            width: 320px; height: 100vh;
            background: rgba(15, 15, 26, 0.98);
            backdrop-filter: blur(20px);
            border-left: 1px solid rgba(255,255,255,0.08);
            z-index: 2100;
            transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            padding: 24px;
            display: flex;
            flex-direction: column;
            pointer-events: auto;
        }
        #right-sidebar-menu.open { right: 0; }
        
        /* EXP Bar */
        .exp-bar-container {
            width: 100%;
            height: 8px;
            background: rgba(255,255,255,0.1);
            border-radius: 4px;
            overflow: hidden;
            margin-top: 8px;
            position: relative;
        }
        .exp-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706);
            border-radius: 4px;
            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        .exp-bar-fill::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shimmer 2s infinite;
        }
        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        .exp-text {
            font-size: 11px;
            color: #fbbf24;
            margin-top: 4px;
            text-align: center;
            font-weight: 500;
        }
        
        /* Level Badge */
        .level-badge {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            color: white;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 700;
            display: inline-block;
        }
        
        .rank-badge {
            background: linear-gradient(135deg, #cd7f32, #b87333);
            color: white;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            display: inline-block;
            margin-left: 6px;
        }
        
        /* Profile Card in Sidebar */
        .sidebar-profile-card {
            background: rgba(30, 30, 50, 0.6);
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.08);
            margin-bottom: 20px;
        }
        .sidebar-avatar-wrapper {
            position: relative;
            display: inline-block;
        }
        .sidebar-avatar {
            width: 80px; height: 80px;
            border-radius: 50%;
            border: 3px solid #3b82f6;
            object-fit: cover;
            display: block;
        }
        .admin-shield-icon {
            position: absolute;
            bottom: -6px;
            right: -6px;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #8b5cf6;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #0f172a;
            box-shadow: 0 0 0 3px rgba(139,92,246,0.16);
            font-size: 12px;
        }
        .admin-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            justify-content: center;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            color: #ffffff;
            padding: 6px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            margin-top: 10px;
        }
        .admin-badge.hidden {
            display: none;
        }
        
        /* Menu Items */
        .menu-link-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            border-radius: 12px;
            color: #94a3b8;
            text-decoration: none;
            transition: all 0.3s;
            margin-bottom: 8px;
            cursor: pointer;
            border: none;
            background: transparent;
            width: 100%;
            font-size: 15px;
        }
        .menu-link-item:hover { background: rgba(59,130,246,0.1); color: #e2e8f0; }
        .menu-link-item.active-link { background: rgba(59,130,246,0.2); color: #3b82f6; }
        
        /* Room Cards */
        .modern-match-card-item {
            background: rgba(30, 30, 50, 0.7);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s;
            margin-bottom: 16px;
        }
        .modern-match-card-item:hover { border-color: rgba(59,130,246,0.4); transform: translateY(-2px); }
        
        .pill-mode-tag {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            display: inline-block;
            margin-bottom: 8px;
        }
        .solo-pill { background: rgba(59,130,246,0.2); color: #60a5fa; }
        .team-pill { background: rgba(16,185,129,0.2); color: #34d399; }
        
        .btn-join-match-glow {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            border: none;
            border-radius: 10px;
            padding: 10px 24px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-join-match-glow:hover { box-shadow: 0 0 20px rgba(59,130,246,0.5); transform: scale(1.05); }
        
        /* Player Slots */
        .modern-slot-player-card {
            background: rgba(30, 30, 50, 0.6);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modern-slot-player-card.ready-glow { border-color: rgba(16,185,129,0.5); box-shadow: 0 0 15px rgba(16,185,129,0.1); }
        .modern-slot-player-card.host-card-border { border-color: rgba(251,191,36,0.5); }
        .slot-empty { opacity: 0.5; }
        
        .slot-img-holder {
            position: relative;
            width: 50px; height: 50px;
        }
        .slot-img-holder img {
            width: 50px; height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255,255,255,0.2);
        }
        .slot-level-pill {
            position: absolute;
            bottom: -4px; right: -4px;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            color: white;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 8px;
            border: 2px solid #0f0f1a;
        }
        
        .you-tag { color: #3b82f6; font-size: 12px; }
        
        /* Chat */
        .chat-bubble-item {
            background: rgba(30, 30, 50, 0.6);
            border-radius: 12px;
            padding: 10px 14px;
            margin-bottom: 10px;
            max-width: 85%;
        }
        .chat-bubble-me { background: rgba(59,130,246,0.2); margin-left: auto; }
        .chat-meta-user { font-size: 12px; color: #3b82f6; font-weight: 600; margin-bottom: 4px; }
        .chat-text-payload { font-size: 14px; color: #e2e8f0; word-break: break-word; }
        
        /* Modal */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(8px);
            z-index: 2000;
            display: none;
            justify-content: center;
            align-items: center;
            padding: 20px;
            pointer-events: auto;
        }
        .modal-overlay.open { display: flex; }
        .modal-content {
            background: #1a1a2e;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 20px;
            padding: 28px;
            width: 100%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        /* Custom SweetAlert */
        .custom-game-alert { background: #121226 !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 22px !important; box-shadow: 0 20px 80px rgba(0,0,0,0.35) !important; }
        .custom-game-title { color: #f8fafc !important; font-family: 'Kanit', sans-serif !important; font-size: 22px !important; margin-bottom: 12px !important; }
        .custom-game-html { color: #cbd5e1 !important; font-family: 'Kanit', sans-serif !important; font-size: 15px !important; line-height: 1.7 !important; text-align: center; }
        .custom-game-btn {
            background: linear-gradient(135deg, #22c55e, #16a34a) !important;
            border-radius: 14px !important;
            color: white !important;
            font-family: 'Kanit', sans-serif !important;
            padding: 14px 28px !important;
            font-size: 15px !important;
            min-width: 140px !important;
            box-shadow: 0 12px 30px rgba(34,197,94,0.3) !important;
        }
        .custom-game-btn-cancel {
            background: transparent !important;
            border: 1px solid rgba(226,232,240,0.18) !important;
            color: #f8fafc !important;
            border-radius: 14px !important;
            font-family: 'Kanit', sans-serif !important;
            padding: 12px 24px !important;
            font-size: 14px !important;
            min-width: 120px !important;
        }
        .custom-game-btn-cancel {
            background: rgba(255,255,255,0.1) !important;
            border-radius: 10px !important;
            color: #94a3b8 !important;
            font-family: 'Kanit', sans-serif !important;
            padding: 12px 24px !important;
            font-size: 14px !important;
            min-width: 120px !important;
        }
        .custom-game-input { background: #0f0f1a !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 10px !important; color: #e2e8f0 !important; }
        
        /* Header */
        .game-header {
            position: fixed;
            top: 0; left: 0; right: 0;
            background: rgba(15, 15, 26, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            z-index: 100;
            padding: 12px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* Level Up Animation */
        .level-up-popup {
            position: fixed;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%) scale(0);
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            padding: 30px 50px;
            border-radius: 20px;
            z-index: 9999;
            text-align: center;
            animation: levelUpPop 0.6s forwards;
            box-shadow: 0 0 60px rgba(139,92,246,0.5);
        }
        @keyframes levelUpPop {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
            50% { transform: translate(-50%, -50%) scale(1.1); }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        }
        .level-up-popup h2 {
            color: white;
            font-size: 28px;
            margin: 0 0 10px 0;
        }
        .level-up-popup p {
            color: rgba(255,255,255,0.8);
            font-size: 16px;
            margin: 0;
        }
        
        /* Mini action buttons */
        .mini-action-btn {
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            margin-left: 6px;
        }
        .promote-btn { background: rgba(251,191,36,0.2); color: #fbbf24; }
        .kick-btn { background: rgba(239,68,68,0.2); color: #ef4444; }
        
        .no-rooms-placeholder {
            text-align: center;
            padding: 60px 20px;
            color: #64748b;
        }
        
        /* Toggle Switch */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 26px;
        }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #334155;
            transition: .3s;
            border-radius: 26px;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background: white;
            transition: .3s;
            border-radius: 50%;
        }
        input:checked + .toggle-slider { background: #3b82f6; }
        input:checked + .toggle-slider:before { transform: translateX(24px); }

        /* ========================================
           GX Register + Email OTP
        ======================================== */
        .gx-auth-hint { color:#64748b; font-size:11px; line-height:1.55; margin-top:6px; }
        .gx-otp-card { position:relative; overflow:hidden; }
        .gx-otp-card::before {
            content:""; position:absolute; width:180px; height:180px; right:-70px; top:-90px;
            border-radius:50%; background:#6366f1; filter:blur(90px); opacity:.17; pointer-events:none;
        }
        .gx-otp-icon {
            width:82px; height:82px; margin:0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center;
            font-size:32px; color:#818cf8; background:rgba(99,102,241,.12); border:1px solid rgba(129,140,248,.25);
            box-shadow:0 0 40px rgba(99,102,241,.16);
        }
        .gx-otp-email { color:#818cf8; font-weight:600; margin-top:6px; word-break:break-word; }
        .gx-otp-inputs { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:26px 0 18px; }
        .gx-otp-input {
            width:100%; min-width:0; height:56px; text-align:center; font-size:22px; font-weight:700; color:#f8fafc;
            background:#1a1a2e; border:1px solid rgba(255,255,255,.1); border-radius:10px; outline:none; transition:.2s ease;
        }
        .gx-otp-input:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.18); transform:translateY(-2px); }
        .gx-otp-input.filled { border-color:rgba(99,102,241,.65); background:rgba(99,102,241,.08); }
        .gx-otp-input.error { border-color:#ef4444; animation:gxOtpShake .35s ease; }
        @keyframes gxOtpShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
        .gx-otp-meta { display:flex; align-items:center; justify-content:center; gap:10px; color:#64748b; font-size:12px; margin-bottom:18px; }
        #otp-timer { color:#f59e0b; margin-left:4px; }
        .gx-dev-label { color:#f59e0b; border:1px solid rgba(245,158,11,.35); background:rgba(245,158,11,.08); border-radius:999px; padding:2px 7px; font-size:10px; font-weight:700; letter-spacing:.4px; }
        .gx-resend-btn { width:100%; margin-top:12px; padding:10px; border:none; background:transparent; color:#818cf8; cursor:pointer; font-size:13px; }
        .gx-resend-btn:hover { color:#a5b4fc; }
        .gx-resend-btn:disabled { color:#475569; cursor:not-allowed; }
        .gx-cancel-otp { width:100%; border:none; background:transparent; color:#64748b; cursor:pointer; font-size:12px; padding:8px; }
        .gx-cancel-otp:hover { color:#ef4444; }
        @media(max-width:480px) {
            .gx-otp-inputs { gap:5px; }
            .gx-otp-input { height:48px; font-size:18px; border-radius:9px; }
        }


/* =========================================================
   GX PATCH — CODEPEN AUTH MENU + PROFILE EMAIL
   ========================================================= */

/* ปุ่มเมนูและ Sidebar ต้องไม่แสดงบนหน้า Login/Register/OTP/Recover */
#main-menu-button {
    display: none !important;
}

body.gx-user-mode #main-menu-button {
    display: block !important;
}

body.gx-auth-mode #right-sidebar-menu {
    display: none !important;
    right: -320px !important;
}

body.gx-auth-mode .floating-instagram-link {
    display: inline-flex;
}

body.gx-user-mode #right-sidebar-menu {
    display: flex;
}

/* Profile Email */
.gx-profile-email-box {
    padding: 14px;
    border-radius: 12px;
    background: rgba(59,130,246,0.06);
    border: 1px solid rgba(59,130,246,0.18);
}

.gx-profile-email-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.gx-profile-email-row .game-input {
    flex: 1 1 auto;
    min-width: 0;
}

.gx-profile-email-btn {
    width: auto !important;
    min-width: 112px;
    white-space: nowrap;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.gx-email-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.gx-email-verified {
    color: #22c55e;
    background: rgba(34,197,94,.10);
    border: 1px solid rgba(34,197,94,.25);
}

.gx-email-unverified {
    color: #f59e0b;
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.25);
}

.gx-profile-otp-area {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
}

#edit-email[readonly] {
    opacity: .85;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .gx-profile-email-row {
        flex-direction: column;
    }

    .gx-profile-email-btn {
        width: 100% !important;
    }
}

/* ==========================================
   GX GAME HUB + WALLET
========================================== */
.gx-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gx-header-wallet {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gx-wallet-pill {
    min-width: 118px;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(17, 24, 39, 0.76);
    font-size: 12px;
}

.gx-wallet-pill strong {
    margin-left: auto;
    color: #fff;
    font-size: 13px;
}

.gx-wallet-coin i,
.gx-hub-wallet-card.coin i,
.gx-profile-wallet-item.coin i,
.gx-sidebar-wallet > div:first-child i {
    color: #fbbf24;
}

.gx-wallet-point i,
.gx-hub-wallet-card.point i,
.gx-profile-wallet-item.point i,
.gx-sidebar-wallet > div:last-child i {
    color: #60a5fa;
}

.gx-hub-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 26px;
    padding: 26px;
    border-radius: 20px;
    border: 1px solid rgba(99, 102, 241, 0.25);
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.20), transparent 36%),
        linear-gradient(135deg, rgba(30, 30, 50, 0.88), rgba(17, 24, 39, 0.88));
}

.gx-hub-kicker {
    margin: 0 0 5px;
    color: #818cf8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.gx-hub-title {
    margin: 0;
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 800;
    color: #f8fafc;
}

.gx-hub-subtitle {
    margin: 8px 0 0;
    color: #94a3b8;
    font-size: 14px;
}

.gx-hub-wallet-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(135px, 1fr));
    gap: 10px;
    min-width: 300px;
}

.gx-hub-wallet-card {
    border-radius: 14px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(15, 23, 42, 0.72);
}

.gx-hub-wallet-card span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #94a3b8;
    font-size: 11px;
}

.gx-hub-wallet-card strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 22px;
}

.gx-game-library {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.gx-game-card {
    min-height: 390px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(30, 30, 50, 0.80);
    box-shadow: 0 20px 45px rgba(0,0,0,0.20);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.gx-game-card:hover {
    transform: translateY(-6px);
    border-color: rgba(99, 102, 241, 0.48);
    box-shadow: 0 28px 55px rgba(0,0,0,0.34);
}

.gx-game-card-art {
    height: 210px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gx-word-game-card .gx-game-card-art {
    background:
        radial-gradient(circle at 30% 20%, rgba(59,130,246,.60), transparent 28%),
        radial-gradient(circle at 72% 66%, rgba(16,185,129,.34), transparent 30%),
        linear-gradient(145deg, #101b3c, #172554 55%, #0f172a);
}

.gx-chaos-game-card .gx-game-card-art {
    background:
        radial-gradient(circle at 30% 30%, rgba(168,85,247,.58), transparent 28%),
        radial-gradient(circle at 70% 60%, rgba(239,68,68,.30), transparent 28%),
        linear-gradient(145deg, #251044, #111827 62%, #0f172a);
}

.gx-coming-game-card .gx-game-card-art {
    background: linear-gradient(145deg, #172033, #10131d);
}

.gx-game-icon {
    width: 104px;
    height: 104px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.26);
    transform: rotate(-4deg);
}

.gx-chaos-game-card .gx-game-icon { transform: rotate(5deg); }

.gx-game-status {
    position: absolute;
    left: 16px;
    top: 16px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    background: rgba(15,23,42,.74);
    border: 1px solid rgba(255,255,255,.10);
}

.gx-game-status.live { color: #34d399; }
.gx-game-status.soon { color: #c4b5fd; }

.gx-game-card-body {
    min-height: 180px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
}

.gx-game-category {
    color: #64748b;
    font-size: 10px;
    letter-spacing: .14em;
    font-weight: 800;
    margin: 0 0 5px;
}

.gx-game-card h3 {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.gx-game-card-body p:not(.gx-game-category) {
    margin: 7px 0 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
}

.gx-game-play-btn {
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: white;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.gx-game-play-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(79,70,229,.25);
}

.gx-game-play-btn.secondary {
    background: rgba(124,58,237,.18);
    border: 1px solid rgba(168,85,247,.36);
    color: #ddd6fe;
}

.gx-game-play-btn.disabled {
    cursor: not-allowed;
    opacity: .45;
    background: #334155;
}

.gx-profile-wallet-box {
    padding: 14px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.50);
    border: 1px solid rgba(255,255,255,.08);
}

.gx-profile-wallet-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.gx-profile-wallet-title > span {
    color: #e2e8f0;
    font-weight: 700;
    font-size: 13px;
}

.gx-profile-wallet-title small { color: #64748b; }

.gx-profile-wallet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

.gx-profile-wallet-item {
    border-radius: 12px;
    padding: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
}

.gx-profile-wallet-item > span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #cbd5e1;
    font-size: 12px;
}

.gx-profile-wallet-item strong {
    display: block;
    color: #fff;
    font-size: 21px;
    margin: 5px 0 2px;
}

.gx-profile-wallet-item small {
    display: block;
    color: #64748b;
    font-size: 10px;
}

.gx-sidebar-wallet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.gx-sidebar-wallet > div {
    padding: 9px;
    border-radius: 10px;
    background: rgba(15,23,42,.65);
    border: 1px solid rgba(255,255,255,.06);
}

.gx-sidebar-wallet span {
    display: block;
    color: #64748b;
    font-size: 9px;
}

.gx-sidebar-wallet strong {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 13px;
}

@media (max-width: 900px) {
    .gx-game-library { grid-template-columns: 1fr; }
    .gx-game-card { min-height: 0; }
    .gx-hub-hero { align-items: stretch; flex-direction: column; }
    .gx-hub-wallet-summary { min-width: 0; width: 100%; }
}

@media (max-width: 680px) {
    .gx-wallet-label { display: none; }
    .gx-wallet-pill { min-width: 78px; padding: 0 9px; }
    .gx-hub-wallet-summary { grid-template-columns: 1fr 1fr; }
    .gx-profile-wallet-grid { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
    .gx-header-wallet { gap: 4px; }
    .gx-wallet-pill { min-width: 62px; height: 32px; font-size: 10px; }
    .gx-wallet-pill strong { font-size: 11px; }
    .gx-hub-wallet-summary { grid-template-columns: 1fr; }
}


/* ==========================================
   ADMIN PLAYER MANAGER V2
   ========================================== */
#admin-edit-modal {
    background: rgba(2, 6, 23, 0.84);
    backdrop-filter: blur(12px);
    overflow: hidden !important;
    padding: 16px;
    overscroll-behavior: contain;
}

body.gx-modal-open { overflow: hidden !important; }

.admin-player-modal {
    width: min(860px, 100%) !important;
    max-width: 860px !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(99,102,241,0.35) !important;
    background: linear-gradient(180deg, #17192a 0%, #11131f 100%) !important;
    box-shadow: 0 30px 100px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.025) inset !important;
}
.admin-player-modal::-webkit-scrollbar { width:7px; }
.admin-player-modal::-webkit-scrollbar-track { background:rgba(255,255,255,.025); }
.admin-player-modal::-webkit-scrollbar-thumb { background:rgba(99,102,241,.65); border-radius:999px; }
.admin-player-modal::-webkit-scrollbar-thumb:hover { background:rgba(129,140,248,.9); }

.admin-player-modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 26px;
    background: rgba(20,22,38,.96);
    border-bottom: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(15px);
}

.admin-player-title-wrap { display:flex; align-items:center; gap:14px; min-width:0; }
.admin-player-title-icon {
    width: 46px; height: 46px; border-radius: 14px;
    display:flex; align-items:center; justify-content:center;
    color:#c4b5fd; font-size:19px;
    background: linear-gradient(135deg, rgba(124,58,237,.24), rgba(59,130,246,.14));
    border:1px solid rgba(139,92,246,.25);
}
.admin-player-title-wrap h3 { margin:0; color:#f8fafc; font-size:19px; font-weight:700; }
.admin-player-title-wrap p { margin:4px 0 0; color:#64748b; font-size:12px; }
.admin-player-close-btn {
    width:38px; height:38px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.035); color:#94a3b8; cursor:pointer; transition:.2s;
}
.admin-player-close-btn:hover { color:#fff; border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.1); }

.admin-player-summary {
    display:flex; align-items:center; gap:18px; padding:22px 26px 10px;
}
.admin-player-avatar {
    width:76px; height:76px; object-fit:cover; border-radius:22px;
    border:3px solid #6366f1; background:#0b1020;
    box-shadow:0 12px 30px rgba(79,70,229,.22);
}
.admin-player-summary-main { flex:1; min-width:0; }
.admin-player-name-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.admin-player-name-row strong { font-size:20px; color:#fff; }
.admin-player-handle { color:#64748b; font-size:12px; display:block; margin-top:3px; }
.admin-mini-badge { padding:4px 9px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.5px; background:rgba(59,130,246,.14); color:#93c5fd; border:1px solid rgba(59,130,246,.25); }
.admin-mini-badge.admin { background:rgba(139,92,246,.18); color:#c4b5fd; border-color:rgba(139,92,246,.35); }
.admin-player-status-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.admin-status-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:9px; background:#0d1220; border:1px solid rgba(255,255,255,.06); color:#94a3b8; font-size:11px; }
.admin-status-chip.verified { color:#4ade80; border-color:rgba(34,197,94,.2); background:rgba(34,197,94,.07); }

.admin-wallet-overview {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px 26px 4px;
}
.admin-wallet-balance {
    display:flex; align-items:center; gap:12px; padding:15px 16px; border-radius:16px;
    border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025);
}
.admin-wallet-icon { width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.admin-wallet-balance.coin .admin-wallet-icon { color:#fbbf24; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.22); }
.admin-wallet-balance.point .admin-wallet-icon { color:#60a5fa; background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.22); }
.admin-wallet-balance span { color:#64748b; font-size:10px; letter-spacing:.6px; display:block; }
.admin-wallet-balance strong { color:#f8fafc; font-size:20px; display:block; margin-top:2px; }

.admin-player-section {
    margin:16px 26px 0; padding:18px; border-radius:16px;
    background:rgba(11,15,28,.72); border:1px solid rgba(255,255,255,.065);
}
.admin-section-heading { display:flex; align-items:center; gap:11px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid rgba(255,255,255,.055); }
.admin-section-heading > i { color:#818cf8; width:20px; text-align:center; }
.admin-section-heading strong { display:block; color:#e2e8f0; font-size:14px; }
.admin-section-heading span { display:block; color:#64748b; font-size:10px; margin-top:2px; }
.admin-form-grid { display:grid; gap:13px; }
.admin-form-grid.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); }
.admin-field.full-width { grid-column:1 / -1; }
.admin-field label { display:block; color:#94a3b8 !important; font-size:11px !important; margin:0 0 7px !important; }
.admin-label-note { color:#64748b; font-weight:400; }
.admin-player-modal .game-input {
    min-height:45px; border-radius:11px !important; background:#090d18 !important;
    border:1px solid #293047 !important; color:#f8fafc !important; padding:11px 13px !important;
}
.admin-player-modal .game-input:focus { border-color:#6366f1 !important; box-shadow:0 0 0 3px rgba(99,102,241,.12) !important; }
.admin-readonly-input { opacity:.7; cursor:not-allowed; }

.wallet-section { border-color:rgba(59,130,246,.15); }
.admin-money-input-wrap { position:relative; }
.admin-money-input-wrap > i { position:absolute; left:13px; top:50%; transform:translateY(-50%); z-index:1; }
.admin-money-input-wrap.coin > i { color:#f59e0b; }
.admin-money-input-wrap.point > i { color:#60a5fa; }
.admin-money-input-wrap .game-input { padding-left:39px !important; }
.admin-quick-adjust { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.admin-quick-adjust button { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); color:#cbd5e1; padding:5px 9px; border-radius:8px; font-size:10px; cursor:pointer; transition:.15s; }
.admin-quick-adjust button:hover { border-color:rgba(99,102,241,.45); color:#fff; background:rgba(99,102,241,.1); }
.admin-balance-preview { color:#64748b; font-size:10px; margin-top:8px; }
.admin-balance-preview strong { color:#e2e8f0; }
.admin-wallet-warning { margin-top:13px; display:flex; gap:8px; align-items:center; padding:10px 12px; border-radius:10px; color:#fbbf24; background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.12); font-size:10px; }

.danger-section { border-color:rgba(239,68,68,.12); }
.danger-section .admin-section-heading > i { color:#f87171; }

.admin-player-actions {
    position:sticky; bottom:0; z-index:3; display:grid; grid-template-columns:2fr 1fr 1fr; gap:9px;
    padding:18px 26px 22px; margin-top:16px;
    background:linear-gradient(180deg, rgba(17,19,31,.82), #11131f 28%);
    border-top:1px solid rgba(255,255,255,.06);
}
.admin-player-actions button { min-height:46px; border:none; border-radius:12px; font-family:'Kanit',sans-serif; font-size:12px; font-weight:700; cursor:pointer; transition:.18s; }
.admin-player-actions button:hover { transform:translateY(-1px); }
.admin-action-save { color:#fff; background:linear-gradient(135deg,#4f46e5,#7c3aed); box-shadow:0 10px 25px rgba(79,70,229,.2); }
.admin-action-ban { color:#fff; background:linear-gradient(135deg,#d97706,#f97316); }
.admin-action-delete { color:#fff; background:linear-gradient(135deg,#dc2626,#ef4444); }

/* Admin user cards: show wallet values at a glance */
.admin-user-wallet-chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:7px; }
.admin-user-wallet-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border-radius:7px; font-size:10px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025); }
.admin-user-wallet-chip.coin { color:#fbbf24; }
.admin-user-wallet-chip.point { color:#60a5fa; }
.admin-user-wallet-chip.verified { color:#4ade80; }
.admin-user-wallet-chip.unverified { color:#fbbf24; }

@media (max-width: 720px) {
    .admin-player-modal { max-height:94vh !important; }
    .admin-player-modal-header, .admin-player-summary, .admin-wallet-overview { padding-left:16px; padding-right:16px; }
    .admin-player-section { margin-left:16px; margin-right:16px; }
    .admin-form-grid.two-col, .admin-wallet-overview, .admin-player-actions { grid-template-columns:1fr; }
    .admin-player-actions { padding-left:16px; padding-right:16px; }
    .admin-player-avatar { width:64px; height:64px; border-radius:18px; }
}


/* ==========================================
   GX ADMIN V3 + COIN TRANSFER
   ========================================== */
.admin-field-hint { margin-top:7px; color:#64748b; font-size:10px; display:flex; align-items:center; gap:6px; }
.admin-status-chip.rank { color:#c4b5fd; border-color:rgba(139,92,246,.22); background:rgba(139,92,246,.08); }

.gx-hub-wallet-area { display:flex; flex-direction:column; gap:10px; min-width:min(100%,390px); }
.gx-hub-transfer-btn {
    width:100%; min-height:48px; border-radius:14px; border:1px solid rgba(245,158,11,.2);
    background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(249,115,22,.07)); color:#f8fafc;
    display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition:.2s; font-family:'Kanit',sans-serif;
}
.gx-hub-transfer-btn > i { color:#fbbf24; font-size:17px; }
.gx-hub-transfer-btn span { display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
.gx-hub-transfer-btn strong { font-size:12px; }
.gx-hub-transfer-btn small { color:#94a3b8; font-size:9px; margin-top:3px; }
.gx-hub-transfer-btn:hover { transform:translateY(-1px); border-color:rgba(245,158,11,.42); box-shadow:0 10px 25px rgba(245,158,11,.08); }

#gx-coin-transfer-modal { background:rgba(2,6,23,.84); backdrop-filter:blur(12px); padding:16px; overflow:hidden; }
.gx-transfer-modal {
    width:min(620px,100%) !important; max-width:620px !important; max-height:calc(100dvh - 32px) !important;
    padding:0 !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain;
    background:linear-gradient(180deg,#17192a,#10131e) !important; border:1px solid rgba(245,158,11,.22) !important;
    box-shadow:0 30px 90px rgba(0,0,0,.58) !important; scrollbar-gutter:stable;
}
.gx-transfer-modal::-webkit-scrollbar { width:7px; }
.gx-transfer-modal::-webkit-scrollbar-thumb { background:rgba(245,158,11,.48); border-radius:999px; }
.gx-transfer-header { position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 22px; background:rgba(20,22,38,.96); border-bottom:1px solid rgba(255,255,255,.06); backdrop-filter:blur(14px); }
.gx-transfer-title-wrap { display:flex; align-items:center; gap:12px; }
.gx-transfer-icon { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fbbf24; background:rgba(245,158,11,.11); border:1px solid rgba(245,158,11,.22); font-size:18px; }
.gx-transfer-title-wrap h3 { margin:0; color:#fff; font-size:18px; }
.gx-transfer-title-wrap p { margin:3px 0 0; color:#64748b; font-size:10px; }
.gx-transfer-body { padding:20px 22px; }
.gx-transfer-balance-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-radius:16px; border:1px solid rgba(245,158,11,.14); background:linear-gradient(135deg,rgba(245,158,11,.07),rgba(255,255,255,.02)); }
.gx-transfer-balance-card span { color:#94a3b8; font-size:10px; }
.gx-transfer-balance-card strong { display:block; color:#fff; margin-top:4px; font-size:17px; }
.gx-transfer-balance-card strong i { color:#fbbf24; }
.gx-transfer-status { padding:6px 9px; border-radius:9px; border:1px solid rgba(255,255,255,.08); background:#0b1020; white-space:nowrap; }
.gx-transfer-status.ready { color:#4ade80; border-color:rgba(34,197,94,.2); background:rgba(34,197,94,.07); }
.gx-transfer-status.locked { color:#f87171; border-color:rgba(239,68,68,.2); background:rgba(239,68,68,.07); }
.gx-transfer-requirements { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 18px; }
.gx-transfer-requirements span { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:8px; color:#64748b; background:#0b1020; border:1px solid rgba(255,255,255,.06); font-size:9px; }
.gx-transfer-requirements span.ok { color:#4ade80; border-color:rgba(34,197,94,.18); background:rgba(34,197,94,.05); }
.gx-transfer-requirements span.no { color:#f87171; border-color:rgba(239,68,68,.16); background:rgba(239,68,68,.05); }
.gx-transfer-form { display:grid; gap:13px; }
.gx-transfer-recipient-preview { margin-top:7px; min-height:22px; color:#64748b; font-size:10px; }
.gx-transfer-recipient-preview.ok { color:#4ade80; }
.gx-transfer-recipient-preview.error { color:#f87171; }
.gx-transfer-quick-amounts { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.gx-transfer-quick-amounts button { border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); color:#cbd5e1; border-radius:8px; padding:5px 9px; font-size:10px; cursor:pointer; }
.gx-transfer-quick-amounts button:hover { color:#fbbf24; border-color:rgba(245,158,11,.28); }
.gx-transfer-preview-box { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; margin-top:15px; border-radius:12px; background:#0b1020; border:1px solid rgba(255,255,255,.06); }
.gx-transfer-preview-box span { color:#64748b; font-size:10px; }
.gx-transfer-preview-box strong { color:#fff; font-size:13px; }
.gx-transfer-preview-box i { color:#fbbf24; }
.gx-transfer-note { margin-top:12px; display:flex; gap:8px; align-items:flex-start; color:#94a3b8; font-size:9px; line-height:1.55; padding:10px 11px; border-radius:10px; background:rgba(59,130,246,.045); border:1px solid rgba(59,130,246,.1); }
.gx-transfer-note i { color:#60a5fa; margin-top:2px; }
.gx-transfer-actions { position:sticky; bottom:0; z-index:3; display:grid; grid-template-columns:1fr 2fr; gap:9px; padding:15px 22px 19px; background:linear-gradient(180deg,rgba(16,19,30,.86),#10131e 28%); border-top:1px solid rgba(255,255,255,.06); }
.gx-transfer-actions button { min-height:44px; border-radius:11px; border:none; font-family:'Kanit',sans-serif; font-weight:700; font-size:11px; cursor:pointer; }
.gx-transfer-cancel { color:#cbd5e1; background:#202536; }
.gx-transfer-submit { color:#111827; background:linear-gradient(135deg,#fbbf24,#f97316); }
.gx-transfer-submit:disabled { opacity:.45; cursor:not-allowed; }

@media(max-width:640px){
  .gx-transfer-body,.gx-transfer-header,.gx-transfer-actions{padding-left:15px;padding-right:15px;}
  .gx-transfer-balance-card{align-items:flex-start;flex-direction:column;}
  .gx-transfer-actions{grid-template-columns:1fr;}
}


/* ==========================================
   ADMIN DASHBOARD V4 + VIEWPORT OVERFLOW FIX
   ========================================== */

/* ป้องกันแถบเลื่อนแนวนอน/แถบขาวด้านล่าง */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body {
    position: relative;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.auth-screen,
#admin-screen {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

#admin-screen {
    padding-top: 78px;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% -20%, rgba(79,70,229,.12), transparent 35%),
        #0f0f1a;
}

.gx-admin-dashboard {
    width: min(1180px, calc(100% - 32px));
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 0 56px;
    overflow: hidden;
}

.gx-admin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(99,102,241,.09), rgba(15,23,42,.22)),
        rgba(20,22,38,.72);
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.gx-admin-hero-copy {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.gx-admin-hero-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: #c4b5fd;
    font-size: 21px;
    background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(59,130,246,.13));
    border: 1px solid rgba(139,92,246,.26);
    box-shadow: 0 12px 32px rgba(91,33,182,.14);
}

.gx-admin-eyebrow {
    display: block;
    color: #818cf8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.35px;
    margin-bottom: 5px;
}

.gx-admin-hero h2 {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(22px, 3vw, 29px);
    font-weight: 800;
    line-height: 1.15;
}

.gx-admin-hero p {
    margin: 7px 0 0;
    color: #7c879d;
    font-size: 12px;
    line-height: 1.65;
    max-width: 650px;
}

.gx-admin-refresh-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(59,130,246,.28);
    border-radius: 13px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(37,99,235,.16);
    transition: .2s ease;
}

.gx-admin-refresh-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(37,99,235,.24);
}

.gx-admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin-top: 16px;
}

.gx-admin-stat-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 16px;
    background: rgba(18,21,36,.72);
}

.gx-admin-stat-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 16px;
    border: 1px solid rgba(255,255,255,.06);
}

.gx-admin-stat-card span {
    display: block;
    color: #64748b;
    font-size: 10px;
}

.gx-admin-stat-card strong {
    display: block;
    color: #f8fafc;
    font-size: 20px;
    margin-top: 1px;
    line-height: 1;
}

.gx-admin-stat-card.total .gx-admin-stat-icon { color:#818cf8; background:rgba(99,102,241,.11); }
.gx-admin-stat-card.verified .gx-admin-stat-icon { color:#4ade80; background:rgba(34,197,94,.09); }
.gx-admin-stat-card.admins .gx-admin-stat-icon { color:#c4b5fd; background:rgba(139,92,246,.11); }
.gx-admin-stat-card.banned .gx-admin-stat-icon { color:#fb7185; background:rgba(244,63,94,.09); }

.gx-admin-toolbar {
    margin-top: 16px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 16px;
    background: rgba(18,21,36,.66);
}

.gx-admin-search {
    position: relative;
    flex: 1;
    min-width: 0;
}

.gx-admin-search > i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
}

.gx-admin-search input {
    width: 100%;
    height: 46px;
    padding: 0 46px 0 43px;
    border: 1px solid #2a3045;
    border-radius: 12px;
    outline: none;
    background: #0b0f1b;
    color: #e2e8f0;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    transition: .2s;
}

.gx-admin-search input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.11);
}

.gx-admin-search input::placeholder { color:#566178; }

.gx-admin-search-clear {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}
.gx-admin-search-clear:hover { color:#fff; background:rgba(255,255,255,.05); }

.gx-admin-result-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    min-height: 38px;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.055);
}

.gx-admin-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    margin-top: 16px;
    width: 100%;
    max-width: 100%;
}

.gx-admin-user-card {
    position: relative;
    min-width: 0;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.07);
    background:
        linear-gradient(145deg, rgba(26,29,48,.9), rgba(16,18,31,.9));
    box-shadow: 0 14px 36px rgba(0,0,0,.14);
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.gx-admin-user-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg,#6366f1,#3b82f6);
    opacity: .9;
}

.gx-admin-user-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99,102,241,.26);
    box-shadow: 0 18px 42px rgba(0,0,0,.22);
}

.gx-admin-user-card.is-admin::before { background:linear-gradient(180deg,#a855f7,#7c3aed); }
.gx-admin-user-card.is-banned::before { background:linear-gradient(180deg,#fb7185,#ef4444); }

.gx-admin-user-top {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
}

.gx-admin-user-avatar-wrap {
    position: relative;
    flex: 0 0 58px;
}

.gx-admin-user-avatar {
    width: 58px;
    height: 58px;
    display: block;
    object-fit: cover;
    border-radius: 17px;
    background: #090d18;
    border: 2px solid rgba(99,102,241,.55);
}

.gx-admin-role-dot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 8px;
    background: #2563eb;
    border: 3px solid #151827;
}
.gx-admin-role-dot.admin { background:#7c3aed; }

.gx-admin-user-main {
    flex: 1;
    min-width: 0;
}

.gx-admin-user-name-line {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    min-width: 0;
}

.gx-admin-user-name {
    min-width: 0;
    max-width: 100%;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gx-admin-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #93c5fd;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .55px;
    background: rgba(59,130,246,.1);
    border: 1px solid rgba(59,130,246,.18);
}
.gx-admin-role-pill.admin { color:#d8b4fe; background:rgba(139,92,246,.11); border-color:rgba(139,92,246,.2); }

.gx-admin-user-handle {
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gx-admin-user-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 9px;
}

.gx-admin-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 8px;
    color: #94a3b8;
    background: #0d1220;
    border: 1px solid rgba(255,255,255,.055);
    font-size: 9px;
}
.gx-admin-meta-chip.rank { color:#c4b5fd; }
.gx-admin-meta-chip.verified { color:#4ade80; }
.gx-admin-meta-chip.unverified { color:#fbbf24; }
.gx-admin-meta-chip.banned { color:#fb7185; border-color:rgba(244,63,94,.16); background:rgba(244,63,94,.055); }

.gx-admin-user-email {
    margin-top: 10px;
    color: #68758c;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gx-admin-user-wallet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 13px;
}

.gx-admin-wallet-mini {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px 11px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(7,11,21,.58);
}

.gx-admin-wallet-mini > i {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}
.gx-admin-wallet-mini.coin > i { color:#fbbf24; background:rgba(245,158,11,.1); }
.gx-admin-wallet-mini.point > i { color:#60a5fa; background:rgba(59,130,246,.1); }

.gx-admin-wallet-mini span { display:block; color:#566178; font-size:8px; letter-spacing:.55px; }
.gx-admin-wallet-mini strong {
    display:block;
    min-width:0;
    color:#e2e8f0;
    font-size:13px;
    margin-top:1px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.gx-admin-user-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.gx-admin-ban-note {
    min-width: 0;
    color: #566178;
    font-size: 9px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gx-admin-edit-btn {
    flex: 0 0 auto;
    min-width: 78px;
    height: 36px;
    border: 1px solid rgba(59,130,246,.18);
    border-radius: 10px;
    background: rgba(37,99,235,.13);
    color: #bfdbfe;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: .18s;
}
.gx-admin-edit-btn:hover { background:#2563eb; color:#fff; transform:translateY(-1px); }

.gx-admin-empty-state {
    grid-column: 1 / -1;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #64748b;
    font-size: 12px;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.018);
}
.gx-admin-empty-state i { color:#818cf8; font-size:20px; }

@media (max-width: 900px) {
    .gx-admin-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .gx-admin-user-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    #admin-screen { padding-top: 68px; }
    .gx-admin-dashboard { width:min(100% - 20px, 1180px); padding-top:16px; }
    .gx-admin-hero { flex-direction:column; align-items:stretch; padding:18px; }
    .gx-admin-refresh-btn { width:100%; }
    .gx-admin-toolbar { flex-direction:column; align-items:stretch; }
    .gx-admin-result-count { justify-content:center; }
    .gx-admin-stats { grid-template-columns:1fr 1fr; gap:8px; }
    .gx-admin-stat-card { padding:12px; }
    .gx-admin-stat-icon { width:36px; height:36px; flex-basis:36px; }
    .gx-admin-stat-card strong { font-size:17px; }
    .gx-admin-user-card { padding:14px; }
    .gx-admin-user-wallet { grid-template-columns:1fr; }
}

@media (max-width: 410px) {
    .gx-admin-stats { grid-template-columns:1fr; }
}

/* Modal เปิดอยู่: ล็อกด้านหลังและกัน scrollbar แนวนอน */
body.gx-modal-open,
html:has(body.gx-modal-open) {
    overflow: hidden !important;
}


/* =========================================================
   GX WORD GAME LOBBY V5
   ========================================================= */
.gx-word-lobby-screen {
    padding-top: 72px !important;
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 5%, rgba(59,130,246,.13), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(124,58,237,.10), transparent 30%),
        #0b0d16;
}

.gx-word-lobby-shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 64px;
}

.gx-word-lobby-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: center;
    padding: 30px 32px;
    border: 1px solid rgba(96,165,250,.18);
    border-radius: 24px;
    background:
        linear-gradient(120deg, rgba(23,30,52,.96), rgba(19,23,34,.94) 56%, rgba(34,20,55,.90));
    box-shadow: 0 24px 70px rgba(0,0,0,.26);
}

.gx-word-lobby-hero::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    right: -80px;
    top: -170px;
    border-radius: 50%;
    background: rgba(59,130,246,.22);
    filter: blur(22px);
    pointer-events: none;
}

.gx-word-lobby-hero::after {
    content: 'A B C';
    position: absolute;
    right: 42px;
    bottom: -18px;
    color: rgba(255,255,255,.025);
    font-size: 110px;
    font-weight: 800;
    letter-spacing: 4px;
    pointer-events: none;
}

.gx-word-lobby-hero-copy,
.gx-word-lobby-hero-actions { position: relative; z-index: 2; }

.gx-word-lobby-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #93c5fd;
    background: rgba(59,130,246,.12);
    border: 1px solid rgba(96,165,250,.18);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.gx-word-lobby-hero h1 {
    margin: 12px 0 6px;
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
    font-weight: 800;
}

.gx-word-lobby-hero p {
    margin: 0;
    max-width: 620px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
}

.gx-word-lobby-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.gx-word-lobby-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 10px;
    color: #cbd5e1;
    background: rgba(7,10,18,.56);
    border: 1px solid rgba(148,163,184,.12);
    font-size: 12px;
}

.gx-word-lobby-status.live i { color: #22c55e; }
.gx-word-lobby-status.rank-ready { color: #fde68a; border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.08); }
.gx-word-lobby-status.rank-locked { color: #94a3b8; }

.gx-word-lobby-hero-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(112px, 1fr));
    gap: 10px;
    min-width: 390px;
}

.gx-lobby-btn {
    min-height: 82px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}

.gx-lobby-btn i { font-size: 20px; }
.gx-lobby-btn:hover:not(:disabled) { transform: translateY(-3px); }
.gx-lobby-btn-secondary { background: rgba(15,23,42,.72); color: #cbd5e1; }
.gx-lobby-btn-secondary:hover { border-color: rgba(148,163,184,.30); }
.gx-lobby-btn-rank { background: linear-gradient(145deg, #7c4a08, #d97706); }
.gx-lobby-btn-rank:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(217,119,6,.20); }
.gx-lobby-btn-rank:disabled { opacity: .44; cursor: not-allowed; filter: grayscale(.3); }
.gx-lobby-btn-primary { background: linear-gradient(145deg, #2563eb, #4f46e5); }
.gx-lobby-btn-primary:hover { box-shadow: 0 12px 30px rgba(37,99,235,.28); }

.gx-lobby-search-panel {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-top: 22px;
    padding: 20px 22px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(19,23,34,.86);
}

.gx-lobby-search-copy h2 {
    margin: 0;
    display: flex;
    gap: 9px;
    align-items: center;
    color: #f8fafc;
    font-size: 17px;
}
.gx-lobby-search-copy h2 i { color: #60a5fa; }
.gx-lobby-search-copy p { margin: 5px 0 0; color: #64748b; font-size: 12px; }

.gx-lobby-search-controls { display: flex; align-items: center; gap: 10px; width: min(620px, 100%); }
.gx-lobby-search-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 12px 0 15px;
    border: 1px solid rgba(148,163,184,.13);
    border-radius: 13px;
    background: #0d111c;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.gx-lobby-search-box:focus-within { border-color: rgba(59,130,246,.65); box-shadow: 0 0 0 3px rgba(59,130,246,.10); }
.gx-lobby-search-box > i { color: #64748b; }
.gx-lobby-search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #e2e8f0; font: inherit; font-size: 13px; }
.gx-lobby-search-box input::placeholder { color: #475569; }
.gx-lobby-search-clear { border: 0; background: transparent; color: #475569; cursor: pointer; width: 28px; height: 28px; border-radius: 8px; }
.gx-lobby-search-clear:hover { color: #e2e8f0; background: rgba(255,255,255,.05); }
.gx-lobby-refresh-btn {
    min-height: 48px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(96,165,250,.16);
    border-radius: 13px;
    background: rgba(37,99,235,.12);
    color: #93c5fd;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.gx-lobby-refresh-btn:hover { background: rgba(37,99,235,.20); }

.gx-lobby-room-browser { margin-top: 22px; }
.gx-lobby-room-browser-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}
.gx-lobby-room-browser-label { color: #3b82f6; font-size: 10px; letter-spacing: .16em; font-weight: 800; }
.gx-lobby-room-browser-head h3 { margin: 3px 0 0; color: #f8fafc; font-size: 18px; }
.gx-lobby-room-legend { display: flex; gap: 14px; color: #64748b; font-size: 11px; }
.gx-lobby-room-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gx-dot-ready { color: #22c55e; font-size: 7px; }
.gx-dot-playing { color: #ef4444; font-size: 7px; }

.gx-lobby-room-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.gx-room-card {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    border: 1px solid rgba(148,163,184,.10);
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(22,27,43,.96), rgba(15,18,31,.96));
    box-shadow: 0 12px 32px rgba(0,0,0,.16);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.gx-room-card:hover { transform: translateY(-3px); border-color: rgba(96,165,250,.28); box-shadow: 0 20px 44px rgba(0,0,0,.24); }
.gx-room-card.is-playing { opacity: .72; }
.gx-room-card::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: rgba(59,130,246,.10);
    pointer-events: none;
}

.gx-room-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; position: relative; z-index: 1; }
.gx-room-card-title-wrap { min-width: 0; }
.gx-room-card-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.gx-room-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 25px; padding: 0 8px; border-radius: 8px; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.gx-room-pill.mode { color: #93c5fd; background: rgba(59,130,246,.13); }
.gx-room-pill.lock { color: #fcd34d; background: rgba(245,158,11,.10); }
.gx-room-pill.status-waiting { color: #86efac; background: rgba(34,197,94,.10); }
.gx-room-pill.status-playing { color: #fca5a5; background: rgba(239,68,68,.10); }
.gx-room-card h4 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f8fafc; font-size: 18px; }
.gx-room-id { margin-top: 4px; color: #475569; font-size: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.gx-room-player-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #bfdbfe;
    background: rgba(59,130,246,.11);
    border: 1px solid rgba(96,165,250,.14);
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.gx-room-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.gx-room-meta { min-width: 0; padding: 9px 10px; border-radius: 11px; background: rgba(5,8,16,.42); border: 1px solid rgba(255,255,255,.045); }
.gx-room-meta span { display: block; color: #475569; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.gx-room-meta strong { display: block; margin-top: 3px; color: #cbd5e1; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gx-room-card-bottom { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: 16px; position: relative; z-index: 1; }
.gx-room-avatar-stack { display: flex; align-items: center; min-height: 34px; padding-left: 2px; }
.gx-room-avatar-stack img,
.gx-room-avatar-more { width: 31px; height: 31px; border-radius: 50%; border: 2px solid #151827; margin-left: -8px; object-fit: cover; background: #20263a; }
.gx-room-avatar-stack img:first-child { margin-left: 0; }
.gx-room-avatar-more { display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 9px; font-weight: 700; }
.gx-room-empty-players { color: #475569; font-size: 11px; }
.gx-room-join-btn {
    min-width: 118px;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg,#2563eb,#4f46e5);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.gx-room-join-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,99,235,.24); }
.gx-room-join-btn:disabled { cursor: not-allowed; opacity: .44; background: #334155; }

.gx-lobby-room-grid .no-rooms-placeholder {
    grid-column: 1 / -1;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px dashed rgba(96,165,250,.16);
    border-radius: 20px;
    background: rgba(15,18,29,.64);
    color: #64748b;
}
.gx-lobby-room-grid .no-rooms-placeholder i { color: #334155 !important; }
.gx-lobby-empty-action { margin-top: 7px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 11px; background: rgba(37,99,235,.16); color: #93c5fd; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.gx-lobby-empty-action:hover { background: rgba(37,99,235,.25); }

@media (max-width: 920px) {
    .gx-word-lobby-hero { flex-direction: column; align-items: stretch; }
    .gx-word-lobby-hero-actions { min-width: 0; }
    .gx-lobby-search-panel { flex-direction: column; align-items: stretch; }
    .gx-lobby-search-controls { width: 100%; }
}

@media (max-width: 720px) {
    .gx-word-lobby-shell { width: min(100% - 24px, 1180px); padding-top: 20px; }
    .gx-word-lobby-hero { padding: 22px 18px; border-radius: 18px; }
    .gx-word-lobby-hero-actions { grid-template-columns: 1fr; }
    .gx-lobby-btn { min-height: 54px; flex-direction: row; }
    .gx-lobby-room-grid { grid-template-columns: 1fr; }
    .gx-lobby-search-controls { flex-direction: column; align-items: stretch; }
    .gx-lobby-refresh-btn { justify-content: center; }
    .gx-lobby-room-browser-head { align-items: flex-start; flex-direction: column; }
    .gx-room-meta-grid { grid-template-columns: 1fr 1fr; }
}


/* =========================================================
   GX UI V6 — GLOBAL POLISH / AUTH / CREATE ROOM / SCREENS
   ========================================================= */
:root{
  --gx-v6-bg:#080b14;--gx-v6-panel:#111625;--gx-v6-panel2:#171d30;
  --gx-v6-line:rgba(148,163,184,.14);--gx-v6-text:#f8fafc;--gx-v6-muted:#8b98ad;
  --gx-v6-blue:#4f8cff;--gx-v6-violet:#7c4dff;--gx-v6-cyan:#31d2ff;--gx-v6-green:#22c98a;
}
html,body{background:var(--gx-v6-bg)!important;overflow-x:hidden!important;}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(circle at 18% 12%,rgba(79,140,255,.09),transparent 31%),radial-gradient(circle at 82% 18%,rgba(124,77,255,.08),transparent 30%),linear-gradient(180deg,#080b14 0%,#090c15 100%)}
.game-header{background:rgba(8,11,20,.82)!important;backdrop-filter:blur(18px);border-bottom:1px solid rgba(148,163,184,.10)!important;height:64px!important;padding:0 24px!important;position:fixed!important;top:0;left:0;right:0;z-index:2050!important;}
.game-header>div:first-child i{filter:drop-shadow(0 0 12px rgba(79,140,255,.45));}
.game-header>div:first-child span{letter-spacing:.2px}
.gx-auth-page{padding:92px 24px 28px!important;min-height:100vh!important;background:transparent!important;}
.gx-auth-layout{width:min(1080px,100%);display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--gx-v6-line);border-radius:28px;overflow:hidden;background:rgba(12,16,28,.82);box-shadow:0 35px 90px rgba(0,0,0,.42);}
.gx-auth-brand-panel{min-height:610px;position:relative;padding:58px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(145deg,rgba(21,29,52,.96),rgba(14,17,31,.98));}
.gx-auth-brand-panel:before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-100px;top:-90px;background:radial-gradient(circle,rgba(79,140,255,.34),transparent 68%);filter:blur(4px)}
.gx-auth-brand-panel:after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(79,140,255,.12);border-radius:50%;right:-30px;bottom:-80px;box-shadow:0 0 0 45px rgba(79,140,255,.035),0 0 0 90px rgba(124,77,255,.025)}
.gx-auth-brand-content{position:relative;z-index:2;max-width:470px}.gx-auth-brand-badge{display:inline-flex;align-items:center;gap:10px;padding:9px 13px;border-radius:999px;background:rgba(79,140,255,.12);border:1px solid rgba(79,140,255,.24);color:#9cc3ff;font-weight:700;font-size:12px;letter-spacing:.12em}
.gx-auth-brand-content h1{font-size:46px;line-height:1.08;font-weight:800;margin:24px 0 16px;color:#fff}.gx-auth-brand-content h1 span{background:linear-gradient(90deg,#73a7ff,#9b7cff,#55d8ff);-webkit-background-clip:text;color:transparent}.gx-auth-brand-content>p{color:#94a3b8;line-height:1.75;font-size:14px;max-width:430px}
.gx-auth-feature-grid{display:grid;gap:10px;margin-top:34px}.gx-auth-feature-grid>div{display:flex;gap:13px;align-items:center;padding:13px 14px;border:1px solid rgba(148,163,184,.10);background:rgba(255,255,255,.025);border-radius:14px}.gx-auth-feature-grid i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(79,140,255,.13);color:#75a6ff}.gx-auth-feature-grid span{display:flex;flex-direction:column}.gx-auth-feature-grid b{font-size:13px;color:#e8eefb}.gx-auth-feature-grid small{font-size:11px;color:#748198;margin-top:2px}
.gx-auth-card{width:min(520px,100%);padding:42px;background:rgba(17,22,37,.96);border:1px solid var(--gx-v6-line);border-radius:26px;box-shadow:0 30px 80px rgba(0,0,0,.35);position:relative}.gx-auth-layout .gx-auth-card{border:0;border-radius:0;width:100%;display:flex;flex-direction:column;justify-content:center;padding:54px}
.gx-auth-card-wide{width:min(760px,100%);}.gx-auth-card-head{display:flex;align-items:center;gap:15px;margin-bottom:30px}.gx-auth-card-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(79,140,255,.22),rgba(124,77,255,.14));border:1px solid rgba(99,142,255,.26);color:#78a8ff;font-size:20px}.gx-auth-card-icon.green{color:#56e4ae;background:rgba(34,201,138,.10);border-color:rgba(34,201,138,.22)}.gx-auth-card-icon.amber{color:#ffc45c;background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.22)}
.gx-auth-eyebrow{color:#6984b3;font-size:10px;font-weight:800;letter-spacing:.14em}.gx-auth-card-head h2{font-size:25px;font-weight:800;color:#fff;margin:2px 0}.gx-auth-card-head p{font-size:12px;color:#7f8ca1}.gx-auth-form{display:flex;flex-direction:column;gap:17px}.gx-auth-field{display:flex;flex-direction:column;gap:7px}.gx-auth-field>span{font-size:12px;color:#9aa7ba;font-weight:600}.gx-auth-field>span i{color:#648fd6;width:18px}.gx-auth-field .game-input,.gx-register-grid .game-input{height:50px!important;border-radius:13px!important;background:#0c111e!important;border:1px solid rgba(148,163,184,.14)!important;padding:0 15px!important;font-size:13px!important}.gx-auth-field .game-input:focus,.gx-register-grid .game-input:focus{border-color:rgba(79,140,255,.75)!important;box-shadow:0 0 0 4px rgba(79,140,255,.10)!important}.gx-auth-input-wrap{position:relative}.gx-auth-input-wrap .game-input{padding-right:44px!important}.gx-auth-input-wrap>i{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#536076}
.gx-auth-main-btn{height:52px;border:0;border-radius:14px;background:linear-gradient(135deg,#4b77ff,#7b3ff2);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 14px 34px rgba(76,80,255,.22);transition:.22s}.gx-auth-main-btn:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(76,80,255,.30)}.gx-auth-main-btn.amber{background:linear-gradient(135deg,#f2a51a,#e67516);box-shadow:0 14px 34px rgba(230,117,22,.18)}
.gx-auth-divider{display:flex;align-items:center;gap:12px;color:#536076;font-size:10px}.gx-auth-divider:before,.gx-auth-divider:after{content:"";height:1px;background:rgba(148,163,184,.11);flex:1}.gx-auth-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gx-auth-secondary-btn{height:47px;border-radius:13px;border:1px solid rgba(148,163,184,.12);background:#141a29;color:#aeb8c8;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:12px;cursor:pointer;transition:.2s}.gx-auth-secondary-btn:hover{background:#1a2235;color:#fff;border-color:rgba(79,140,255,.3)}.gx-auth-secondary-btn.register{color:#8cb5ff}.gx-auth-card-foot{margin-top:25px;padding-top:18px;border-top:1px solid rgba(148,163,184,.09);font-size:10px;color:#59667b;text-align:center}.gx-auth-card-foot i{margin-right:6px;color:#5979ae}.gx-auth-back{position:absolute;top:22px;right:22px;width:38px;height:38px;border-radius:11px;border:1px solid rgba(148,163,184,.12);background:#111827;color:#8693a7;cursor:pointer}.gx-auth-back:hover{color:#fff;border-color:rgba(79,140,255,.35)}
.gx-register-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.gx-register-pin{grid-column:1/-1}.gx-register-pin small{color:#667389;font-size:10px}.gx-register-security{display:flex;gap:12px;align-items:center;padding:13px 15px;margin:19px 0;border-radius:13px;background:rgba(79,140,255,.06);border:1px solid rgba(79,140,255,.13);color:#7297d0}.gx-register-security span{display:flex;flex-direction:column}.gx-register-security b{font-size:11px;color:#a8c4f0}.gx-register-security small{font-size:10px;color:#63758f}.gx-recover-card{width:min(500px,100%)}.gx-recover-warning{display:flex;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.14);font-size:10px;line-height:1.55;color:#a58b62}.gx-recover-warning i{color:#e9a52c;margin-top:2px}
#otp-screen .gx-otp-card{background:rgba(17,22,37,.97)!important;border:1px solid var(--gx-v6-line)!important;border-radius:26px!important;box-shadow:0 30px 80px rgba(0,0,0,.4)!important}
/* Create room */
.gx-room-create-overlay{padding:24px!important;align-items:center!important;overflow:hidden!important}.gx-room-create-modal{width:min(760px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:#101525;border:1px solid rgba(129,140,248,.20);box-shadow:0 34px 90px rgba(0,0,0,.62)}.gx-room-create-head{display:flex;justify-content:space-between;align-items:center;padding:23px 26px;border-bottom:1px solid rgba(148,163,184,.10);background:linear-gradient(180deg,rgba(29,37,62,.72),rgba(16,21,37,.86));flex:0 0 auto}.gx-room-create-title{display:flex;align-items:center;gap:14px}.gx-room-create-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#20c997,#13a87c);color:#04140f;box-shadow:0 10px 28px rgba(32,201,151,.18)}.gx-room-create-title span{font-size:9px;font-weight:800;letter-spacing:.15em;color:#55d8bb}.gx-room-create-title h3{font-size:20px;font-weight:800;margin:1px 0;color:#fff}.gx-room-create-title p{font-size:10px;color:#75839a}.gx-room-create-close{width:39px;height:39px;border-radius:12px;border:1px solid rgba(148,163,184,.12);background:#161d2d;color:#8e9bb0;cursor:pointer}.gx-room-create-close:hover{color:#fff;border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.08)}
.gx-room-create-body{overflow-y:auto;padding:22px 26px;display:grid;gap:17px;overscroll-behavior:contain;scrollbar-gutter:stable}.gx-room-create-body::-webkit-scrollbar{width:5px}.gx-room-create-body::-webkit-scrollbar-track{background:transparent}.gx-room-create-body::-webkit-scrollbar-thumb{background:#34405b;border-radius:10px}.gx-room-create-section{padding:18px;border:1px solid rgba(148,163,184,.10);border-radius:18px;background:rgba(8,12,22,.47)}.gx-room-section-title{display:flex;gap:11px;align-items:center;padding-bottom:14px;margin-bottom:15px;border-bottom:1px solid rgba(148,163,184,.08)}.gx-room-section-title>i{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;background:rgba(79,140,255,.10);color:#6ca1ff}.gx-room-section-title div{display:flex;flex-direction:column}.gx-room-section-title b{font-size:12px;color:#dce6f5}.gx-room-section-title small{font-size:9px;color:#637189}.gx-room-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.gx-room-field{display:flex;flex-direction:column;gap:7px}.gx-room-field>span{font-size:10px;color:#8694a8;font-weight:700}.gx-room-field>span em{font-style:normal;font-size:9px;color:#4a586d;margin-left:5px}.gx-room-field .game-input{height:46px!important;border-radius:12px!important;background:#0a0f1c!important;border:1px solid rgba(148,163,184,.12)!important;font-size:12px!important}.gx-room-field-full{margin-bottom:13px}.gx-room-input-icon{position:relative}.gx-room-input-icon>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#52627a;z-index:2}.gx-room-input-icon .game-input{padding-left:40px!important}.gx-room-field-hint{font-size:9px;color:#526079}.gx-room-field-hint i{margin-right:5px;color:#4f8cff}.gx-room-mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:15px}.gx-room-mode-cards label{cursor:pointer}.gx-room-mode-cards input{position:absolute;opacity:0;pointer-events:none}.gx-room-mode-cards label>span{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;padding:13px 14px;border-radius:13px;border:1px solid rgba(148,163,184,.10);background:#0b101d;transition:.18s}.gx-room-mode-cards label>span i{grid-row:1/3;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#151d30;color:#687a96}.gx-room-mode-cards label>span b{font-size:11px;color:#b8c3d4}.gx-room-mode-cards label>span small{font-size:9px;color:#5e6c82}.gx-room-mode-cards input:checked+span{border-color:rgba(79,140,255,.5);background:rgba(79,140,255,.08);box-shadow:inset 0 0 0 1px rgba(79,140,255,.08)}.gx-room-mode-cards input:checked+span i{background:rgba(79,140,255,.15);color:#73a7ff}.gx-room-mode-cards input:checked+span b{color:#91b8ff}.gx-room-create-foot{display:flex;justify-content:flex-end;gap:10px;padding:17px 26px;border-top:1px solid rgba(148,163,184,.10);background:#0d1220;flex:0 0 auto}.gx-room-cancel-btn,.gx-room-submit-btn{height:46px;border-radius:13px;padding:0 20px;border:0;font-weight:800;font-size:11px;cursor:pointer}.gx-room-cancel-btn{background:#171e2d;color:#8c99ac;border:1px solid rgba(148,163,184,.10)}.gx-room-submit-btn{min-width:190px;background:linear-gradient(135deg,#4b77ff,#7c3aed);color:white;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 12px 28px rgba(76,80,255,.22)}
/* Global screen cards */
.gx-polished-screen{padding-top:84px!important}.gx-polished-screen .glass-card{background:linear-gradient(145deg,rgba(20,26,44,.92),rgba(14,18,31,.96))!important;border-color:rgba(148,163,184,.11)!important;box-shadow:0 18px 55px rgba(0,0,0,.16)}.gx-profile-screen .max-w-4xl{max-width:1120px!important}.gx-profile-screen h2{font-weight:800;letter-spacing:-.02em}.gx-profile-screen .glass-card{border-radius:20px!important}.gx-profile-screen .game-input{background:#0b101c!important;border-color:rgba(148,163,184,.12)!important}.gx-game-room-polished .max-w-6xl{max-width:1280px!important}.gx-game-room-polished>div>div:first-child{padding:18px 20px;border-radius:18px;background:rgba(16,22,37,.72);border:1px solid rgba(148,163,184,.10)}.gx-game-room-polished #host-live-panel{border-left:3px solid #fbbf24!important}.gx-admin-polished{background:transparent!important}
/* common modals */
.modal-overlay{backdrop-filter:blur(10px);background:rgba(3,5,10,.74)!important}.modal-content:not(.gx-transfer-modal){border-radius:22px!important;border:1px solid rgba(148,163,184,.13)!important;background:#111625!important;box-shadow:0 28px 85px rgba(0,0,0,.55)!important}
@media(max-width:850px){.gx-auth-layout{grid-template-columns:1fr;max-width:560px}.gx-auth-brand-panel{display:none}.gx-auth-layout .gx-auth-card{border-radius:26px;padding:36px}.gx-register-grid{grid-template-columns:1fr}.gx-register-pin{grid-column:auto}.gx-room-form-grid{grid-template-columns:1fr}.gx-room-create-modal{max-height:calc(100vh - 24px)}.gx-room-create-overlay{padding:12px!important}.gx-room-create-head,.gx-room-create-body,.gx-room-create-foot{padding-left:17px;padding-right:17px}}
@media(max-width:520px){.gx-auth-page{padding-left:12px!important;padding-right:12px!important}.gx-auth-card{padding:29px 20px;border-radius:22px}.gx-auth-layout .gx-auth-card{padding:29px 20px}.gx-auth-card-head h2{font-size:21px}.gx-auth-secondary-actions{grid-template-columns:1fr}.gx-room-mode-cards{grid-template-columns:1fr}.gx-room-create-title p{display:none}.gx-room-create-foot{display:grid;grid-template-columns:1fr 1.5fr}.gx-room-submit-btn{min-width:0;padding:0 10px}}

/* =========================================================
   GX V8 — POLISHED ALERTS + TRANSFER STATUS
   ========================================================= */
.swal2-container {
    padding: 20px !important;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(2, 6, 18, 0.76) !important;
}

.swal2-popup.custom-game-alert {
    width: min(430px, calc(100vw - 32px)) !important;
    padding: 28px 28px 24px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 50% -25%, rgba(78, 111, 255, 0.18), transparent 42%),
        linear-gradient(180deg, #171d2d 0%, #111725 100%) !important;
    border: 1px solid rgba(128, 148, 196, 0.2) !important;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    color: #f8fafc !important;
    overflow: hidden !important;
}

.swal2-popup.custom-game-alert::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #647cff, transparent);
    opacity: .9;
}

.swal2-popup.custom-game-alert.gx-alert-success::before {
    background: linear-gradient(90deg, transparent, #22c55e, transparent);
}
.swal2-popup.custom-game-alert.gx-alert-error::before {
    background: linear-gradient(90deg, transparent, #ff6574, transparent);
}
.swal2-popup.custom-game-alert.gx-alert-warning::before {
    background: linear-gradient(90deg, transparent, #f5b942, transparent);
}
.swal2-popup.custom-game-alert.gx-alert-info::before {
    background: linear-gradient(90deg, transparent, #4aa8ff, transparent);
}
.swal2-popup.custom-game-alert.gx-alert-question::before {
    background: linear-gradient(90deg, transparent, #8b6cff, transparent);
}

.swal2-popup.custom-game-alert .swal2-icon {
    width: 72px !important;
    height: 72px !important;
    margin: 4px auto 16px !important;
    border-width: 3px !important;
    transform: scale(.92);
}

.swal2-popup.custom-game-alert.gx-alert-error .swal2-icon.swal2-error {
    border-color: rgba(255, 101, 116, .65) !important;
    color: #ff6574 !important;
    box-shadow: 0 0 0 10px rgba(255, 101, 116, .06), 0 0 36px rgba(255, 101, 116, .13);
}
.swal2-popup.custom-game-alert.gx-alert-warning .swal2-icon.swal2-warning {
    border-color: rgba(245, 185, 66, .65) !important;
    color: #f5b942 !important;
    box-shadow: 0 0 0 10px rgba(245, 185, 66, .06), 0 0 36px rgba(245, 185, 66, .13);
}
.swal2-popup.custom-game-alert.gx-alert-info .swal2-icon.swal2-info {
    border-color: rgba(74, 168, 255, .65) !important;
    color: #4aa8ff !important;
    box-shadow: 0 0 0 10px rgba(74, 168, 255, .06), 0 0 36px rgba(74, 168, 255, .13);
}
.swal2-popup.custom-game-alert.gx-alert-question .swal2-icon.swal2-question {
    border-color: rgba(139, 108, 255, .65) !important;
    color: #9a83ff !important;
    box-shadow: 0 0 0 10px rgba(139, 108, 255, .06), 0 0 36px rgba(139, 108, 255, .13);
}
.swal2-popup.custom-game-alert.gx-alert-success .swal2-icon.swal2-success {
    border-color: rgba(34, 197, 94, .38) !important;
    box-shadow: 0 0 0 10px rgba(34, 197, 94, .06), 0 0 36px rgba(34, 197, 94, .13);
}

.swal2-title.custom-game-title {
    padding: 0 !important;
    margin: 0 0 9px !important;
    color: #f8fafc !important;
    font-size: 21px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}

.swal2-html-container.custom-game-html {
    margin: 0 !important;
    padding: 0 !important;
    color: #aebbd0 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
}

.gx-alert-message {
    max-width: 340px;
    margin: 0 auto;
    color: #b8c3d6;
    text-align: center;
    overflow-wrap: anywhere;
}

.gx-alert-actions.swal2-actions {
    width: 100% !important;
    margin: 22px 0 0 !important;
    gap: 10px !important;
}

.swal2-confirm.custom-game-btn {
    min-width: 138px !important;
    min-height: 44px !important;
    padding: 11px 22px !important;
    border: 1px solid rgba(126, 113, 255, .42) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #5865f2 0%, #7c3aed 100%) !important;
    color: #fff !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 28px rgba(83, 76, 230, .22) !important;
    transition: transform .18s ease, filter .18s ease !important;
}

.swal2-confirm.custom-game-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.swal2-cancel.custom-game-btn-cancel {
    min-width: 110px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px 20px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 12px !important;
    background: #171d2b !important;
    color: #9caac0 !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: .18s ease !important;
}

.swal2-cancel.custom-game-btn-cancel:hover {
    background: #20283a !important;
    color: #fff !important;
}

.swal2-timer-progress-bar {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6) !important;
}

/* Transfer recipient status */
.gx-transfer-recipient-preview {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 10px;
    background: rgba(10, 15, 28, .48);
    color: #78879e;
    font-size: 12px;
    line-height: 1.5;
    transition: .2s ease;
}

.gx-transfer-recipient-preview.ok {
    border-color: rgba(34, 197, 94, .24);
    background: rgba(34, 197, 94, .07);
    color: #7be39e;
}

.gx-transfer-recipient-preview.ok span {
    color: #91a0b6;
}

.gx-transfer-recipient-preview.error {
    border-color: rgba(248, 113, 113, .24);
    background: rgba(248, 113, 113, .07);
    color: #ff8f9a;
}

.gx-transfer-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    padding: 13px 14px !important;
    border: 1px solid rgba(59, 130, 246, .16) !important;
    border-radius: 12px !important;
    background: rgba(59, 130, 246, .045) !important;
    color: #8fa0b8 !important;
    line-height: 1.55 !important;
}

.gx-transfer-note > i {
    margin-top: 2px;
    color: #5ca7ff;
}

.gx-transfer-note b,
.gx-transfer-note strong {
    color: #d8e5f7;
}

/* Transfer confirmation */
.gx-transfer-confirm {
    display: grid;
    gap: 12px;
    margin-top: 8px;
    text-align: left;
}

.gx-transfer-confirm-user,
.gx-transfer-confirm-amount,
.gx-transfer-confirm-balance {
    border: 1px solid rgba(148, 163, 184, .12);
    background: rgba(7, 11, 21, .48);
    border-radius: 14px;
    padding: 13px 14px;
}

.gx-transfer-confirm-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gx-transfer-confirm-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(79, 110, 255, .2), rgba(139, 92, 246, .18));
    border: 1px solid rgba(105, 124, 255, .24);
    color: #8da7ff;
}

.gx-transfer-confirm-user div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gx-transfer-confirm-user span,
.gx-transfer-confirm-amount span,
.gx-transfer-confirm-balance span {
    color: #718198;
    font-size: 11px;
}

.gx-transfer-confirm-user strong {
    color: #f3f7ff;
    font-size: 15px;
}

.gx-transfer-confirm-user small {
    color: #8493aa;
}

.gx-transfer-confirm-amount {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.gx-transfer-confirm-amount strong {
    color: #fbbf24;
    font-size: 24px;
}

.gx-transfer-confirm-amount small {
    color: #a98324;
    font-weight: 700;
}

.gx-transfer-confirm-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gx-transfer-confirm-balance b {
    color: #e5edf9;
    font-size: 13px;
}

.gx-transfer-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-top: 4px;
}

.gx-transfer-success-coin {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 5px;
    border-radius: 50%;
    background: rgba(251, 191, 36, .1);
    border: 1px solid rgba(251, 191, 36, .22);
    color: #fbbf24;
    font-size: 21px;
}

.gx-transfer-success strong {
    color: #fbbf24;
    font-size: 24px;
}

.gx-transfer-success span {
    color: #d4dceb;
}

.gx-transfer-success small {
    color: #7f8da3;
}

@media (max-width: 520px) {
    .swal2-popup.custom-game-alert {
        padding: 24px 18px 20px !important;
        border-radius: 20px !important;
    }

    .gx-alert-actions.swal2-actions {
        flex-direction: column-reverse !important;
    }

    .swal2-confirm.custom-game-btn,
    .swal2-cancel.custom-game-btn-cancel {
        width: 100% !important;
    }
}


/* =========================================================
   GX WORD GAME V9 — ACTIVE MATCH UI
   ========================================================= */

.gx-word-match {
    width: 100%;
}

.gx-word-match-shell {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(99,102,241,.22);
    background:
        radial-gradient(circle at 12% 8%, rgba(59,130,246,.16), transparent 32%),
        radial-gradient(circle at 88% 16%, rgba(139,92,246,.12), transparent 28%),
        linear-gradient(180deg, rgba(18,24,39,.98), rgba(10,14,25,.99));
    box-shadow:
        0 28px 80px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.035);
    padding: 22px;
}

.gx-word-match-shell::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,#3b82f6,#6366f1,#8b5cf6,#3b82f6);
    background-size: 220% 100%;
    animation: gxWordTopLine 7s linear infinite;
}

@keyframes gxWordTopLine {
    from { background-position: 0 0; }
    to { background-position: 220% 0; }
}

.gx-word-match-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.gx-word-match-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.gx-word-match-brand-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #dbeafe;
    font-size: 22px;
    background: linear-gradient(145deg,rgba(59,130,246,.28),rgba(99,102,241,.16));
    border: 1px solid rgba(96,165,250,.28);
    box-shadow: inset 0 0 22px rgba(59,130,246,.08);
}

.gx-word-match-kicker {
    display: block;
    color: #60a5fa;
    font-size: 10px;
    letter-spacing: .18em;
    font-weight: 800;
    text-transform: uppercase;
}

.gx-word-match-brand h2 {
    margin: 2px 0 0;
    color: #f8fafc;
    font-size: 20px;
    line-height: 1.25;
}

.gx-word-match-brand p {
    margin: 4px 0 0;
    color: #7f8ba3;
    font-size: 12px;
}

.gx-word-match-timer {
    min-width: 112px;
    padding: 10px 14px;
    border-radius: 15px;
    border: 1px solid rgba(245,158,11,.20);
    background: rgba(245,158,11,.07);
    text-align: right;
}

.gx-word-match-timer span {
    display: block;
    color: #9ca3af;
    font-size: 10px;
}

.gx-word-match-timer strong {
    display: block;
    margin-top: 2px;
    color: #fbbf24;
    font-size: 22px;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

.gx-word-progress-wrap {
    padding: 12px 14px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 15px;
    background: rgba(2,6,23,.34);
}

.gx-word-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: #94a3b8;
    font-size: 11px;
}

.gx-word-progress-copy span:first-child {
    color: #dbeafe;
    font-weight: 700;
}

.gx-word-progress-track {
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148,163,184,.12);
}

.gx-word-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,#2563eb,#7c3aed);
    box-shadow: 0 0 16px rgba(59,130,246,.34);
    transition: width .35s ease;
}

.gx-word-match-meta {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.gx-word-meta-pill {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(15,23,42,.66);
}

.gx-word-meta-pill span {
    display: block;
    color: #758299;
    font-size: 10px;
    margin-bottom: 4px;
}

.gx-word-meta-pill strong {
    display: block;
    color: #e5e7eb;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gx-word-meta-pill.category { border-color: rgba(59,130,246,.16); }
.gx-word-meta-pill.current-category { border-color: rgba(16,185,129,.17); }
.gx-word-meta-pill.difficulty { border-color: rgba(245,158,11,.17); }
.gx-word-meta-pill.language { border-color: rgba(139,92,246,.18); }

.gx-word-question-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 30px 24px 24px;
    border-radius: 24px;
    border: 1px solid rgba(99,102,241,.20);
    background:
        radial-gradient(circle at 50% 0%, rgba(59,130,246,.13), transparent 42%),
        rgba(5,10,22,.58);
}

.gx-word-question-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -90px;
    bottom: -110px;
    border-radius: 50%;
    background: rgba(124,58,237,.10);
    filter: blur(2px);
    pointer-events: none;
}

.gx-word-question-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #93c5fd;
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(96,165,250,.18);
    font-size: 10px;
    font-weight: 700;
}

.gx-word-question-label {
    margin: 16px 0 5px;
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

#vocab-question-th {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(30px,4vw,48px);
    line-height: 1.18;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.gx-word-question-hint {
    margin: 10px auto 20px;
    color: #8491a8;
    font-size: 12px;
}

.gx-word-answer-row {
    max-width: 700px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
}

.gx-word-answer-input-wrap {
    position: relative;
}

.gx-word-answer-input-wrap > i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #536078;
    pointer-events: none;
    z-index: 2;
}

.gx-word-answer-input-wrap .game-input {
    height: 52px;
    padding-left: 43px;
    border-radius: 15px;
    background: rgba(2,6,23,.72);
    border-color: rgba(96,165,250,.14);
    font-size: 14px;
}

.gx-word-answer-input-wrap .game-input:focus {
    border-color: rgba(96,165,250,.75);
    box-shadow: 0 0 0 3px rgba(59,130,246,.10), 0 0 26px rgba(37,99,235,.08);
}

.gx-word-submit-btn {
    min-width: 132px;
    height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    background: linear-gradient(135deg,#2563eb,#6d28d9);
    box-shadow: 0 12px 28px rgba(37,99,235,.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .18s ease, filter .18s ease;
}

.gx-word-submit-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.gx-word-feedback {
    min-height: 38px;
    max-width: 700px;
    margin: 12px auto 0;
    padding: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 12px;
    transition: .2s ease;
}

.gx-word-feedback:not(:empty) {
    padding: 9px 12px;
    border: 1px solid rgba(148,163,184,.12);
    background: rgba(15,23,42,.62);
}

.gx-word-feedback.success {
    color: #6ee7b7;
    border-color: rgba(16,185,129,.22);
    background: rgba(16,185,129,.08);
}

.gx-word-feedback.error {
    color: #fca5a5;
    border-color: rgba(239,68,68,.22);
    background: rgba(239,68,68,.08);
}

.gx-word-feedback.warning {
    color: #fcd34d;
    border-color: rgba(245,158,11,.22);
    background: rgba(245,158,11,.08);
}

.gx-word-feedback.info {
    color: #93c5fd;
    border-color: rgba(59,130,246,.22);
    background: rgba(59,130,246,.08);
}

.gx-word-next-btn {
    margin: 5px auto 0;
    border: 0;
    background: transparent;
    color: #93c5fd;
    font: inherit;
    cursor: pointer;
}

.gx-word-match-bottom {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(260px,.8fr);
    gap: 14px;
    margin-top: 15px;
}

.gx-word-self-stats {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}

.gx-word-self-stat {
    padding: 14px;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(15,23,42,.54);
}

.gx-word-self-stat span {
    display: block;
    color: #77849a;
    font-size: 10px;
}

.gx-word-self-stat strong {
    display: block;
    margin-top: 4px;
    color: #f8fafc;
    font-size: 22px;
}

.gx-word-self-stat.score strong { color: #fbbf24; }
.gx-word-self-stat.correct strong { color: #34d399; }
.gx-word-self-stat.remain strong { color: #60a5fa; }
.gx-word-self-stat.total strong { color: #c4b5fd; }

.gx-word-scoreboard {
    min-width: 0;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(6,11,22,.62);
}

.gx-word-scoreboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}

.gx-word-scoreboard-head h4 {
    margin: 2px 0 0;
    color: #e5e7eb;
    font-size: 13px;
}

.gx-word-scoreboard-head > i {
    color: #fbbf24;
}

.gx-word-scoreboard-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 180px;
    overflow-y: auto;
}

.gx-word-score-player {
    display: grid;
    grid-template-columns: 26px 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(15,23,42,.48);
    border: 1px solid transparent;
}

.gx-word-score-player.is-me {
    border-color: rgba(59,130,246,.22);
    background: rgba(37,99,235,.07);
}

.gx-word-score-rank {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #94a3b8;
    background: rgba(148,163,184,.08);
    font-size: 11px;
    font-weight: 800;
}

.gx-word-score-player:first-child .gx-word-score-rank {
    color: #fbbf24;
    background: rgba(245,158,11,.12);
}

.gx-word-score-avatar {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
}

.gx-word-score-copy {
    min-width: 0;
}

.gx-word-score-copy strong {
    display: block;
    color: #e5e7eb;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gx-word-score-copy strong span {
    color: #60a5fa;
    font-size: 8px;
    margin-left: 3px;
}

.gx-word-score-copy strong i {
    color: #fbbf24;
    margin-left: 3px;
}

.gx-word-score-copy small {
    display: block;
    margin-top: 1px;
    color: #5f6b80;
    font-size: 9px;
}

.gx-word-score-points {
    text-align: right;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 800;
}

.gx-word-score-points small {
    display: block;
    color: #5f6b80;
    font-size: 7px;
    letter-spacing: .08em;
}

.gx-room-chat-panel {
    border-radius: 22px !important;
    border-color: rgba(255,255,255,.06) !important;
    background: linear-gradient(180deg,rgba(17,24,39,.94),rgba(8,12,22,.98)) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
}

.gx-room-chat-title {
    color: #dbeafe;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.gx-room-chat-title i {
    color: #34d399;
}

#chat-messages-display {
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,.45) transparent;
}

@media (max-width: 900px) {
    .gx-word-match-meta {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .gx-word-match-bottom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .gx-word-match-shell {
        padding: 14px;
        border-radius: 20px;
    }
    .gx-word-match-topbar {
        align-items: flex-start;
    }
    .gx-word-match-brand-icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }
    .gx-word-match-brand h2 {
        font-size: 16px;
    }
    .gx-word-match-timer {
        min-width: 88px;
        padding: 8px 10px;
    }
    .gx-word-match-timer strong {
        font-size: 18px;
    }
    .gx-word-match-meta {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }
    .gx-word-question-card {
        padding: 24px 14px 18px;
        border-radius: 19px;
    }
    .gx-word-answer-row {
        grid-template-columns: 1fr;
    }
    .gx-word-submit-btn {
        width: 100%;
    }
    .gx-word-self-stats {
        grid-template-columns: 1fr 1fr;
    }
}


/* =========================================================
   GX V11 — CLICK SAFETY / SIMPLE NOTIFICATIONS / FRIENDS
   ========================================================= */

/* Invisible modal must never capture clicks */
.modal-overlay {
    pointer-events: none !important;
}
.modal-overlay.open {
    pointer-events: auto !important;
}

/* Game Hub no longer reserves right column for duplicate wallet */
.gx-hub-hero {
    grid-template-columns: 1fr !important;
}
.gx-hub-hero-copy,
.gx-hub-hero > div:first-child {
    max-width: 760px;
}
.gx-hub-wallet-area {
    display: none !important;
}

/* ---------- Lightweight notifications ---------- */
.gx-notice-root {
    position: fixed;
    top: 74px;
    right: 22px;
    width: min(370px, calc(100vw - 28px));
    z-index: 250000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.gx-notice {
    --notice: #60a5fa;
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 28px;
    grid-template-areas:
        "icon main close"
        "actions actions actions";
    align-items: center;
    gap: 11px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(15, 20, 33, .97);
    border: 1px solid rgba(148,163,184,.16);
    box-shadow: 0 18px 55px rgba(0,0,0,.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    pointer-events: auto;
    animation: gxNoticeIn .20s cubic-bezier(.2,.8,.3,1) both;
}

.gx-notice::before {
    content:"";
    position:absolute;
    left:0; top:11px; bottom:11px;
    width:3px;
    border-radius:0 4px 4px 0;
    background:var(--notice);
}

.gx-notice.closing {
    animation: gxNoticeOut .16s ease both;
}

.gx-notice-success { --notice:#22c55e; }
.gx-notice-error { --notice:#fb7185; }
.gx-notice-warning { --notice:#f59e0b; }
.gx-notice-info { --notice:#60a5fa; }
.gx-notice-question { --notice:#a78bfa; }

.gx-notice-icon {
    grid-area: icon;
    width: 40px;
    height: 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    color:var(--notice);
    background:rgba(255,255,255,.035);
    border:1px solid color-mix(in srgb, var(--notice) 32%, transparent);
    font-size:16px;
}

.gx-notice-main {
    grid-area:main;
    min-width:0;
}

.gx-notice-title {
    color:#f8fafc;
    font-size:13px;
    line-height:1.25;
    font-weight:800;
}

.gx-notice-message {
    margin-top:3px;
    color:#94a3b8;
    font-size:11.5px;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.gx-notice-close {
    grid-area:close;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#64748b;
    cursor:pointer;
}

.gx-notice-close:hover {
    color:#fff;
    background:rgba(255,255,255,.06);
}

.gx-notice-actions {
    grid-area:actions;
    display:flex;
    justify-content:flex-end;
    padding-top:2px;
}

.gx-notice-actions button {
    border:1px solid rgba(96,165,250,.24);
    background:#1d4ed8;
    color:#fff;
    border-radius:9px;
    padding:7px 14px;
    min-width:82px;
    font:700 11.5px 'Kanit',sans-serif;
    cursor:pointer;
}

.gx-notice-progress {
    position:absolute;
    left:0; right:0; bottom:0;
    height:2px;
    background:var(--notice);
    transform-origin:left;
    animation:gxNoticeProgress linear forwards;
}

@keyframes gxNoticeIn {
    from { opacity:0; transform:translateY(-8px) scale(.985); }
    to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes gxNoticeOut {
    to { opacity:0; transform:translateX(14px) scale(.985); }
}
@keyframes gxNoticeProgress {
    from { transform:scaleX(1); }
    to { transform:scaleX(0); }
}

/* ---------- Friends sidebar badge ---------- */
.gx-friends-menu-btn {
    position:relative;
}
.gx-friend-menu-count {
    margin-left:auto;
    min-width:20px;
    height:20px;
    padding:0 6px;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:10px;
    font-weight:800;
}

/* ---------- Friends modal ---------- */
.gx-friends-modal {
    width:min(720px, calc(100vw - 28px)) !important;
    max-width:720px !important;
    max-height:min(760px, calc(100vh - 36px)) !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:22px !important;
    border:1px solid rgba(96,165,250,.22) !important;
    background:#0f1422 !important;
    box-shadow:0 32px 100px rgba(0,0,0,.62) !important;
}

.gx-friends-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 22px;
    border-bottom:1px solid rgba(148,163,184,.11);
    background:linear-gradient(180deg,rgba(59,130,246,.07),transparent);
}

.gx-friends-title {
    display:flex;
    align-items:center;
    gap:13px;
}
.gx-friends-title-icon {
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:rgba(59,130,246,.12);
    border:1px solid rgba(96,165,250,.25);
    color:#60a5fa;
}
.gx-friends-title span {
    display:block;
    color:#60a5fa;
    font-size:9px;
    font-weight:800;
    letter-spacing:.16em;
}
.gx-friends-title h3 {
    margin:1px 0 0;
    color:#fff;
    font-size:20px;
    line-height:1.2;
}
.gx-friends-title p {
    margin:3px 0 0;
    color:#71809a;
    font-size:11px;
}
.gx-friends-close {
    width:36px;height:36px;
    border:1px solid rgba(148,163,184,.12);
    border-radius:10px;
    background:#111827;
    color:#94a3b8;
    cursor:pointer;
}
.gx-friends-close:hover { color:#fff; border-color:rgba(96,165,250,.35); }

.gx-friends-add-panel {
    margin:18px 20px 14px;
    padding:16px;
    border-radius:16px;
    border:1px solid rgba(96,165,250,.15);
    background:#111827;
}
.gx-friends-add-copy {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:11px;
}
.gx-friends-add-copy strong {
    color:#e5edff;
    font-size:13px;
}
.gx-friends-add-copy strong i { color:#60a5fa; margin-right:6px; }
.gx-friends-add-copy small { color:#64748b; font-size:10px; }

.gx-friends-search-row {
    display:grid;
    grid-template-columns:1fr auto;
    gap:9px;
}
.gx-friends-search-input {
    position:relative;
}
.gx-friends-search-input > i {
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:#64748b;
    z-index:2;
}
.gx-friends-search-input input {
    padding-left:36px !important;
    height:43px !important;
}
.gx-friends-search-btn {
    border:0;
    border-radius:10px;
    background:#2563eb;
    color:#fff;
    padding:0 16px;
    font:700 12px 'Kanit',sans-serif;
    cursor:pointer;
}
.gx-friends-search-btn:hover { background:#3b82f6; }

.gx-friend-search-result {
    margin-top:10px;
    min-height:22px;
    color:#76849d;
    font-size:11px;
}
.gx-friend-search-result .warn { color:#fbbf24; }
.gx-friend-search-result .danger { color:#fb7185; }

.gx-friend-search-card {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border-radius:12px;
    background:#0b1020;
    border:1px solid rgba(148,163,184,.1);
}
.gx-friend-search-card img {
    width:38px;height:38px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid rgba(96,165,250,.25);
}
.gx-friend-search-meta {
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
}
.gx-friend-search-meta strong { color:#fff;font-size:12px; }
.gx-friend-search-meta span { color:#64748b;font-size:10px; }
.gx-friend-search-card button {
    border:1px solid rgba(34,197,94,.25);
    background:rgba(34,197,94,.1);
    color:#4ade80;
    border-radius:9px;
    padding:7px 10px;
    font:700 10.5px 'Kanit',sans-serif;
    cursor:pointer;
}
.gx-friend-relation-tag {
    color:#93c5fd;
    background:rgba(59,130,246,.1);
    border:1px solid rgba(59,130,246,.18);
    padding:6px 9px;
    border-radius:8px;
    font-size:10px;
}

.gx-friends-tabs {
    display:flex;
    gap:7px;
    padding:0 20px 12px;
}
.gx-friends-tabs button {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:38px;
    border:1px solid rgba(148,163,184,.1);
    border-radius:10px;
    background:#0c111d;
    color:#7f8ba2;
    font:700 11px 'Kanit',sans-serif;
    cursor:pointer;
}
.gx-friends-tabs button.active {
    color:#dbeafe;
    border-color:rgba(59,130,246,.28);
    background:rgba(37,99,235,.12);
}
.gx-friends-tabs b {
    min-width:18px;height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    font-size:9px;
}

.gx-friends-list-wrap {
    overflow:auto;
    max-height:360px;
    padding:0 20px 20px;
}
.gx-friends-list {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.gx-friend-card {
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px;
    border-radius:13px;
    background:#111827;
    border:1px solid rgba(148,163,184,.1);
}
.gx-friend-card > img {
    width:44px;height:44px;
    object-fit:cover;
    border-radius:12px;
    background:#0b1020;
    border:1px solid rgba(96,165,250,.18);
}
.gx-friend-card-info {
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
}
.gx-friend-card-info strong {
    color:#f8fafc;
    font-size:12.5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.gx-friend-card-info span { color:#64748b;font-size:10px; }
.gx-friend-card-actions {
    display:flex;
    align-items:center;
    gap:6px;
}
.gx-friend-action {
    min-height:31px;
    border-radius:8px;
    padding:0 9px;
    font:700 10px 'Kanit',sans-serif;
    cursor:pointer;
}
.gx-friend-action.accept {
    color:#4ade80;
    border:1px solid rgba(34,197,94,.2);
    background:rgba(34,197,94,.08);
}
.gx-friend-action.decline,
.gx-friend-action.remove {
    color:#fb7185;
    border:1px solid rgba(244,63,94,.18);
    background:rgba(244,63,94,.07);
}
.gx-friend-pending {
    color:#fbbf24;
    font-size:10px;
}
.gx-friends-empty,
.gx-friends-loading {
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:5px;
    color:#64748b;
}
.gx-friends-empty > i { color:#334155;font-size:26px;margin-bottom:5px; }
.gx-friends-empty strong { color:#94a3b8;font-size:12px; }
.gx-friends-empty span { font-size:10px; }
.gx-friends-empty.danger strong,
.gx-friends-empty.danger i { color:#fb7185; }

@media (max-width:640px) {
    .gx-notice-root {
        top:64px;
        right:12px;
        width:calc(100vw - 24px);
    }
    .gx-friends-add-copy {
        align-items:flex-start;
        flex-direction:column;
    }
    .gx-friends-search-row {
        grid-template-columns:1fr;
    }
    .gx-friends-search-btn {
        min-height:40px;
    }
    .gx-friends-tabs {
        gap:5px;
    }
    .gx-friends-tabs button {
        font-size:10px;
    }
    .gx-friend-card {
        align-items:flex-start;
    }
    .gx-friend-card-actions {
        flex-direction:column;
        align-items:stretch;
    }
}

/* =========================================================
   GX V12 — STRUCTURE / ICON / CLICK HOTFIX
   ========================================================= */

/* Hidden screens can never catch mouse/touch events. */
.auth-screen {
    pointer-events: none;
}
.auth-screen.active {
    pointer-events: auto;
}

/* A closed modal must be completely inert. */
.modal-overlay:not(.open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.modal-overlay.open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Keep the main interactive controls above decorative layers. */
#main-menu-button,
.gx-game-play-btn,
.menu-link-item,
.gx-auth-main-btn,
.gx-auth-secondary-btn,
.btn-primary,
.btn-blue,
.btn-danger {
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
}

/* Header/menu should always be clickable. */
.game-header {
    pointer-events: auto !important;
}
.gx-header-right {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
}

/* Hamburger fallback:
   Font Awesome shows normally; fallback appears only if the icon stylesheet fails. */
#main-menu-button .gx-menu-fallback {
    display: none;
    font-size: 22px;
    line-height: 1;
    font-family: Arial, sans-serif;
}
#main-menu-button .fa-bars:empty + .gx-menu-fallback {
    display: none;
}

/* Explicit game-card stacking so decorative artwork never covers buttons. */
.gx-game-card-art {
    position: relative;
    z-index: 1;
    pointer-events: none;
}
.gx-game-card-art .gx-game-status {
    pointer-events: none;
}
.gx-game-card-body {
    position: relative;
    z-index: 3;
}
.gx-game-play-btn {
    cursor: pointer !important;
}

/* Sidebar is fixed at the document root after the HTML structure fix. */
#right-sidebar-menu {
    isolation: isolate;
}

/* Prevent stale, empty SweetAlert containers from blocking the page. */
.swal2-container:empty {
    display: none !important;
    pointer-events: none !important;
}


/* =========================================================
   GX V13 — GAME ROUND RESET + COUNTDOWN
   ========================================================= */

/* Countdown เกมแบบใหม่: ไม่มีติ๊กถูก SweetAlert */
.gx-game-countdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 300000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 7, 18, .70);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .20s ease;
}

.gx-game-countdown-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.gx-game-countdown-overlay.hide {
    opacity: 0;
}

.gx-game-countdown-card {
    width: min(360px, calc(100vw - 32px));
    padding: 26px 24px 22px;
    border-radius: 22px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(59,130,246,.14), transparent 42%),
        #0f1524;
    border: 1px solid rgba(96,165,250,.20);
    box-shadow: 0 28px 90px rgba(0,0,0,.55);
    transform: translateY(8px) scale(.985);
    transition: transform .22s cubic-bezier(.2,.8,.3,1);
}

.gx-game-countdown-overlay.show .gx-game-countdown-card {
    transform: translateY(0) scale(1);
}

.gx-game-countdown-brand {
    color: #60a5fa;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}

.gx-game-countdown-ring {
    width: 92px;
    height: 92px;
    margin: 18px auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0b1020;
    border: 1px solid rgba(96,165,250,.26);
    box-shadow:
        0 0 0 9px rgba(59,130,246,.055),
        inset 0 0 26px rgba(59,130,246,.08);
}

.gx-game-countdown-ring span {
    color: #f8fafc;
    font-size: 38px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.04em;
}

.gx-game-countdown-ring span.pop {
    animation: gxCountPop .24s ease;
}

.gx-game-countdown-ring span.go {
    color: #4ade80;
    font-size: 29px;
}

.gx-game-countdown-card h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 19px;
    font-weight: 800;
}

.gx-game-countdown-card p {
    margin: 4px 0 0;
    color: #7f8ca5;
    font-size: 12px;
}

.gx-game-countdown-bar {
    height: 3px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255,255,255,.055);
}

.gx-game-countdown-bar span {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: left;
    background: linear-gradient(90deg,#3b82f6,#8b5cf6);
    animation: gxCountdownBar 3.05s linear forwards;
}

@keyframes gxCountPop {
    0% { transform: scale(.72); opacity:.45; }
    65% { transform: scale(1.10); opacity:1; }
    100% { transform: scale(1); }
}

@keyframes gxCountdownBar {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Direct SweetAlert dialogs that remain elsewhere: less oversized/old-looking */
.swal2-popup.custom-game-alert:not(.gx-notify-popup) {
    border-radius: 18px !important;
    background: #111827 !important;
    border: 1px solid rgba(148,163,184,.14) !important;
    box-shadow: 0 28px 85px rgba(0,0,0,.55) !important;
}

.swal2-popup.custom-game-alert:not(.gx-notify-popup) > .swal2-icon {
    width: 54px !important;
    height: 54px !important;
    margin: 12px auto 8px !important;
    border-width: 2px !important;
    transform: scale(.88);
}

.swal2-popup.custom-game-alert:not(.gx-notify-popup) .swal2-title {
    font-size: 18px !important;
    margin-top: 6px !important;
}


/* =========================================================
   GX V14 — LOGIN NOTICE + FRIEND SOCIAL
   ========================================================= */
.gx-notice-login {
    width: min(420px, calc(100vw - 24px));
    border-color: rgba(34,197,94,.22);
    background: radial-gradient(circle at right top, rgba(34,197,94,.10), transparent 40%), rgba(15,20,33,.98);
}
.gx-notice-login .gx-notice-icon { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 0 0 6px rgba(34,197,94,.05); }
.gx-notice-login .gx-notice-title { font-size: 14px; }
.gx-notice-login .gx-notice-message { font-size: 12.5px; color: #c5d0e3; }

.gx-friend-card.accepted { align-items: flex-start; }
.gx-friend-card-subactions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.gx-friend-card-subactions button {
    border:1px solid rgba(96,165,250,.16); background:rgba(255,255,255,.035); color:#a9bad5;
    border-radius:8px; padding:6px 8px; font:700 10px "Kanit",sans-serif; cursor:pointer;
}
.gx-friend-card-subactions button:hover { color:#fff; border-color: rgba(96,165,250,.28); }
.gx-friend-card-actions { flex-wrap:wrap; justify-content:flex-end; max-width:280px; }
.gx-friend-action.ghost { color:#93c5fd; border:1px solid rgba(59,130,246,.18); background:rgba(59,130,246,.08); }
.gx-friend-action.chat { color:#22c55e; border:1px solid rgba(34,197,94,.18); background:rgba(34,197,94,.08); }
.gx-friend-action.coin { color:#fbbf24; border:1px solid rgba(251,191,36,.18); background:rgba(251,191,36,.08); }

.gx-friend-profile-modal,.gx-private-chat-modal{
    width:min(680px, calc(100vw - 28px))!important; max-width:680px!important; max-height:min(760px, calc(100vh - 36px))!important;
    padding:0!important; overflow:hidden!important; border-radius:22px!important; border:1px solid rgba(96,165,250,.22)!important; background:#0f1422!important;
}
.gx-friend-profile-head,.gx-private-chat-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 20px; border-bottom:1px solid rgba(148,163,184,.11);
    background:linear-gradient(180deg, rgba(59,130,246,.07), transparent);
}
.gx-friend-profile-title{display:flex;align-items:center;gap:12px;}
.gx-friend-profile-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(59,130,246,.12);border:1px solid rgba(96,165,250,.25);color:#60a5fa;}
.gx-friend-profile-title span,.gx-private-chat-user span{display:block;color:#60a5fa;font-size:9px;font-weight:800;letter-spacing:.15em;}
.gx-friend-profile-title h3{margin:1px 0 0;font-size:20px;color:#fff;}
.gx-friend-profile-body{padding:20px;}
.gx-friend-profile-hero{display:flex;align-items:center;gap:16px;}
.gx-friend-profile-hero img{width:86px;height:86px;border-radius:18px;object-fit:cover;border:1px solid rgba(96,165,250,.22);background:#0b1020;}
.gx-friend-profile-meta h4{margin:0;color:#fff;font-size:22px;}
.gx-friend-profile-meta>span{display:block;margin-top:4px;color:#7f8ca5;font-size:12px;}
.gx-friend-profile-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
.gx-friend-profile-badges b{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:10px;font-weight:800;}
.gx-friend-profile-badges .level{background:rgba(99,102,241,.16);color:#c4b5fd;}
.gx-friend-profile-badges .verified{background:rgba(34,197,94,.14);color:#86efac;}
.gx-friend-profile-badges .pending{background:rgba(245,158,11,.14);color:#fcd34d;}
.gx-friend-profile-badges .role{background:rgba(59,130,246,.14);color:#93c5fd;}
.gx-friend-profile-grid{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.gx-friend-profile-stat{padding:14px;border-radius:14px;background:#111827;border:1px solid rgba(148,163,184,.1);}
.gx-friend-profile-stat span{display:block;color:#7f8ca5;font-size:11px;}
.gx-friend-profile-stat strong{display:block;color:#fff;font-size:16px;margin-top:4px;}
.gx-friend-profile-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.gx-friend-profile-actions button,.gx-private-chat-send-btn{min-height:42px;padding:0 14px;border-radius:12px;border:0;cursor:pointer;background:linear-gradient(90deg,#2563eb,#7c3aed);color:#fff;font:700 12px "Kanit",sans-serif;}

.gx-private-chat-user{display:flex;align-items:center;gap:12px;}
.gx-private-chat-user img{width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid rgba(96,165,250,.2);}
.gx-private-chat-user strong{display:block;color:#fff;font-size:18px;}
.gx-private-chat-user small{color:#7f8ca5;font-size:11px;}
.gx-private-chat-messages{height:min(420px, 50vh);overflow:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg, rgba(8,12,22,.65), rgba(8,12,22,.28));}
.gx-private-chat-bubble{max-width:min(76%, 460px);display:flex;flex-direction:column;gap:5px;padding:10px 12px;border-radius:15px;border:1px solid rgba(148,163,184,.10);background:#111827;}
.gx-private-chat-bubble.mine{align-self:flex-end;background:linear-gradient(180deg, rgba(37,99,235,.22), rgba(59,130,246,.12));border-color:rgba(96,165,250,.2);}
.gx-private-chat-bubble.other{align-self:flex-start;}
.gx-private-chat-text{color:#e7edf8;font-size:12px;line-height:1.55;}
.gx-private-chat-bubble span{color:#7f8ca5;font-size:10px;align-self:flex-end;}
.gx-private-chat-empty{min-height:220px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;text-align:center;color:#7f8ca5;}
.gx-private-chat-empty i{font-size:28px;color:#3b82f6;margin-bottom:5px;}
.gx-private-chat-empty strong{color:#e5edff;font-size:13px;}
.gx-private-chat-input-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:16px 18px 18px;border-top:1px solid rgba(148,163,184,.10);background:#0f1422;}

@media (max-width:640px){
  .gx-friend-profile-grid{grid-template-columns:1fr;}
  .gx-private-chat-input-row{grid-template-columns:1fr;}
  .gx-friend-card-actions{max-width:none;}
}


/* =========================================================
   GX V15 — CENTERED LOGIN SUCCESS
   ========================================================= */

.gx-login-notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 350000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 7, 18, .58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: gxLoginOverlayIn .18s ease both;
}

.gx-login-notice-overlay .gx-notice-login {
    position: relative;
    width: min(390px, calc(100vw - 32px));
    min-height: 0;
    margin: 0;
    padding: 22px 20px;
    grid-template-columns: 52px minmax(0, 1fr) 30px;
    gap: 14px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 20% 0%, rgba(34,197,94,.12), transparent 42%),
        linear-gradient(180deg, #121a2b 0%, #0d1422 100%);
    border: 1px solid rgba(74, 222, 128, .20);
    box-shadow:
        0 32px 90px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.035);
    animation: gxLoginCardIn .24s cubic-bezier(.2,.85,.3,1) both;
}

.gx-login-notice-overlay .gx-notice-login::before {
    display: none;
}

.gx-login-notice-overlay .gx-notice-login .gx-notice-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    color: #4ade80;
    background: rgba(34,197,94,.10);
    border: 1px solid rgba(74,222,128,.22);
    box-shadow: 0 0 0 7px rgba(34,197,94,.045);
    font-size: 19px;
}

.gx-login-notice-overlay .gx-notice-login .gx-notice-title {
    color: #f8fafc;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
}

.gx-login-notice-overlay .gx-notice-login .gx-notice-message {
    margin-top: 5px;
    color: #a8b5ca;
    font-size: 13px;
    line-height: 1.55;
}

.gx-login-notice-overlay .gx-notice-login .gx-notice-close {
    align-self: start;
    color: #64748b;
}

.gx-login-notice-overlay .gx-notice-login .gx-notice-progress {
    height: 3px;
    background: linear-gradient(90deg, #22c55e, #60a5fa);
}

.gx-login-notice-overlay .gx-notice-login.closing {
    animation: gxLoginCardOut .16s ease both;
}

@keyframes gxLoginOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gxLoginCardIn {
    from { opacity: 0; transform: translateY(12px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gxLoginCardOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(8px) scale(.985); }
}

@media (max-width: 520px) {
    .gx-login-notice-overlay {
        padding: 14px;
    }

    .gx-login-notice-overlay .gx-notice-login {
        width: calc(100vw - 28px);
        padding: 18px 16px;
        grid-template-columns: 46px minmax(0,1fr) 28px;
        border-radius: 17px;
    }

    .gx-login-notice-overlay .gx-notice-login .gx-notice-icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .gx-login-notice-overlay .gx-notice-login .gx-notice-title {
        font-size: 16px;
    }
}


/* =========================================================
   GX V16 — ROOM CONTROL / INVITES / SOCIAL UNREAD
   ========================================================= */

/* Transfer must always sit above Social modals */
#gx-coin-transfer-modal.open {
    z-index: 520000 !important;
}
#gx-coin-transfer-modal.open .gx-transfer-modal {
    position: relative;
    z-index: 520001 !important;
}

/* Host room panel */
.gx-room-host-panel {
    margin-bottom: 24px;
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(148,163,184,.13);
    background:
        radial-gradient(circle at 0% 0%, rgba(245,158,11,.06), transparent 31%),
        #101625;
    box-shadow: 0 18px 55px rgba(0,0,0,.18);
}

.gx-room-host-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(148,163,184,.10);
}

.gx-room-host-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fbbf24;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}

.gx-room-host-title h3 {
    margin: 4px 0 0;
    color: #f8fafc;
    font-size: 20px;
    font-weight: 800;
}

.gx-room-host-title p {
    margin: 3px 0 0;
    color: #77859d;
    font-size: 11.5px;
}

.gx-room-host-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.gx-room-copy-btn,
.gx-room-host-invite-btn {
    min-height: 40px;
    padding: 0 13px;
    border-radius: 11px;
    font: 700 11.5px 'Kanit', sans-serif;
    cursor: pointer;
    transition: .18s ease;
}

.gx-room-copy-btn {
    border: 1px solid rgba(148,163,184,.14);
    background: rgba(255,255,255,.035);
    color: #aab6ca;
}

.gx-room-host-invite-btn {
    border: 1px solid rgba(59,130,246,.24);
    background: rgba(37,99,235,.15);
    color: #93c5fd;
}

.gx-room-copy-btn:hover,
.gx-room-host-invite-btn:hover {
    transform: translateY(-1px);
    color: #fff;
}

.gx-room-settings-sections {
    display: grid;
    gap: 12px;
    padding: 16px 18px 18px;
}

.gx-room-settings-section {
    padding: 15px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.095);
    background: rgba(8,12,22,.32);
}

.gx-room-settings-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.gx-room-settings-section-head > i {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #60a5fa;
    background: rgba(59,130,246,.09);
    border: 1px solid rgba(59,130,246,.16);
}

.gx-room-settings-section-head strong {
    display: block;
    color: #eaf1ff;
    font-size: 12.5px;
}

.gx-room-settings-section-head small {
    display: block;
    margin-top: 1px;
    color: #66758f;
    font-size: 9.5px;
}

.gx-room-host-grid {
    display: grid;
    gap: 10px;
}

.gx-room-host-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.gx-room-host-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }

.gx-room-host-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.gx-room-host-field > span {
    color: #8896ac;
    font-size: 10.5px;
}

.gx-room-host-field > span em {
    color: #5f6d84;
    font-style: normal;
    font-size: 9px;
}

.gx-room-host-input-icon {
    position: relative;
}

.gx-room-host-input-icon > i {
    position: absolute;
    z-index: 2;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #58667e;
    font-size: 12px;
}

.gx-room-host-input-icon input {
    padding-left: 36px !important;
}

.gx-room-host-field .game-input,
.gx-room-host-input-icon .game-input {
    min-height: 43px !important;
    border-radius: 11px !important;
    background: #090e19 !important;
    border-color: rgba(148,163,184,.12) !important;
}

.gx-room-host-field .game-input:focus,
.gx-room-host-input-icon .game-input:focus {
    border-color: rgba(59,130,246,.48) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.08) !important;
}

.gx-room-language-switch,
.gx-room-mode-switch {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}

.gx-room-language-switch button,
.gx-room-mode-switch button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 11px 13px;
    text-align: left;
    border-radius: 13px;
    border: 1px solid rgba(148,163,184,.10);
    background: #0b1020;
    color: #8290a6;
    cursor: pointer;
    transition: .18s ease;
}

.gx-room-language-switch button > i,
.gx-room-mode-switch button > i {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
}

.gx-room-language-switch button strong,
.gx-room-mode-switch button strong {
    display: block;
    color: #cbd5e1;
    font-size: 11.5px;
}

.gx-room-language-switch button small,
.gx-room-mode-switch button small {
    display: block;
    margin-top: 2px;
    color: #5e6b82;
    font-size: 9px;
}

.gx-room-language-switch button.active,
.gx-room-mode-switch button.active {
    border-color: rgba(59,130,246,.35);
    background: rgba(37,99,235,.11);
    box-shadow: inset 0 0 0 1px rgba(59,130,246,.06);
}

.gx-room-language-switch button.active > i,
.gx-room-mode-switch button.active > i {
    color: #60a5fa;
    background: rgba(59,130,246,.12);
}

.gx-room-language-switch button.active strong,
.gx-room-mode-switch button.active strong {
    color: #dbeafe;
}

.gx-room-host-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 18px 18px;
    border-top: 1px solid rgba(148,163,184,.08);
}

.gx-room-host-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #66758d;
    font-size: 10px;
}

.gx-room-host-tip i { color: #3b82f6; }

.gx-room-save-btn {
    min-width: 174px;
    min-height: 43px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(90deg,#2563eb,#7c3aed);
    color: #fff;
    font: 800 12px 'Kanit',sans-serif;
    cursor: pointer;
    box-shadow: 0 9px 24px rgba(37,99,235,.16);
}

.gx-room-save-btn:hover { transform: translateY(-1px); }

/* Invite friends modal */
.gx-room-invite-modal {
    width: min(650px, calc(100vw - 28px)) !important;
    max-width: 650px !important;
    max-height: min(720px, calc(100vh - 34px)) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 21px !important;
    background: #0f1422 !important;
    border: 1px solid rgba(59,130,246,.20) !important;
}

.gx-room-invite-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 19px 20px;
    border-bottom: 1px solid rgba(148,163,184,.10);
}

.gx-room-invite-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gx-room-invite-title-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #60a5fa;
    background: rgba(59,130,246,.11);
    border: 1px solid rgba(59,130,246,.20);
}

.gx-room-invite-title span {
    display: block;
    color: #60a5fa;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .15em;
}

.gx-room-invite-title h3 {
    margin: 1px 0 0;
    color: #fff;
    font-size: 19px;
}

.gx-room-invite-title p {
    margin: 2px 0 0;
    color: #69778e;
    font-size: 10px;
}

.gx-room-invite-search {
    position: relative;
    margin: 16px 18px 9px;
}

.gx-room-invite-search > i {
    position: absolute;
    z-index: 2;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.gx-room-invite-search input {
    padding-left: 37px !important;
}

.gx-room-invite-summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    margin: 0 18px 12px;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(59,130,246,.065);
    border: 1px solid rgba(59,130,246,.12);
}

.gx-room-invite-summary span {
    color: #7fa7eb;
    font-size: 10px;
}

.gx-room-invite-summary strong {
    color: #dbeafe;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gx-room-invite-summary small {
    color: #5d6a81;
    font: 9px monospace;
}

.gx-room-invite-list {
    max-height: 390px;
    overflow: auto;
    padding: 0 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gx-room-invite-friend {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border-radius: 13px;
    background: #111827;
    border: 1px solid rgba(148,163,184,.09);
}

.gx-room-invite-friend img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 11px;
    background: #0b1020;
}

.gx-room-invite-friend-info {
    min-width: 0;
    flex: 1;
}

.gx-room-invite-friend-info strong {
    display: block;
    color: #f8fafc;
    font-size: 12px;
}

.gx-room-invite-friend-info span {
    color: #68758b;
    font-size: 9.5px;
}

.gx-room-invite-friend > button {
    min-height: 34px;
    padding: 0 11px;
    border-radius: 9px;
    border: 1px solid rgba(59,130,246,.20);
    background: rgba(37,99,235,.12);
    color: #93c5fd;
    font: 700 10.5px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-room-invite-inroom {
    color: #4ade80;
    font-size: 10px;
}

.gx-room-invite-empty {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #66758d;
    text-align: center;
}

.gx-room-invite-empty i {
    color: #334155;
    font-size: 28px;
    margin-bottom: 5px;
}

.gx-room-invite-empty strong { color: #94a3b8; font-size: 12px; }
.gx-room-invite-empty span { font-size: 10px; }

/* Invite prompt */
.gx-room-invite-prompt-overlay,
.gx-chat-unread-overlay {
    position: fixed;
    inset: 0;
    z-index: 610000;
    align-items: center;
    justify-content: center;
    padding: 18px;
    opacity: 0;
    background: rgba(3,7,18,.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity .18s ease;
}

.gx-room-invite-prompt-overlay.show,
.gx-chat-unread-overlay.show { opacity: 1; }

.gx-room-invite-prompt-card,
.gx-chat-unread-card {
    width: min(400px, calc(100vw - 30px));
    padding: 21px;
    border-radius: 19px;
    background: #111827;
    border: 1px solid rgba(96,165,250,.19);
    box-shadow: 0 30px 90px rgba(0,0,0,.56);
    transform: translateY(7px) scale(.985);
    transition: transform .20s ease;
}

.gx-room-invite-prompt-overlay.show .gx-room-invite-prompt-card,
.gx-chat-unread-overlay.show .gx-chat-unread-card {
    transform: translateY(0) scale(1);
}

.gx-room-invite-prompt-icon,
.gx-chat-unread-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    border-radius: 14px;
    color: #60a5fa;
    background: rgba(59,130,246,.11);
    border: 1px solid rgba(59,130,246,.20);
}

.gx-room-invite-prompt-copy span,
.gx-chat-unread-card > div:nth-child(2) > span {
    color: #60a5fa;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .15em;
}

.gx-room-invite-prompt-copy h3,
.gx-chat-unread-card h3 {
    margin: 3px 0 0;
    color: #f8fafc;
    font-size: 18px;
}

.gx-room-invite-prompt-copy p,
.gx-chat-unread-card p {
    margin: 5px 0 0;
    color: #8190a7;
    font-size: 11.5px;
    line-height: 1.5;
}

.gx-room-invite-prompt-actions,
.gx-chat-unread-actions {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8px;
    margin-top: 17px;
}

.gx-room-invite-prompt-actions button,
.gx-chat-unread-actions button {
    min-height: 40px;
    border-radius: 10px;
    font: 700 11.5px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-room-invite-prompt-actions .decline,
.gx-chat-unread-actions .later {
    border: 1px solid rgba(148,163,184,.12);
    background: rgba(255,255,255,.035);
    color: #94a3b8;
}

.gx-room-invite-prompt-actions .accept,
.gx-chat-unread-actions .open {
    border: 0;
    background: linear-gradient(90deg,#2563eb,#7c3aed);
    color: #fff;
}

/* unread friends */
.gx-friend-name-line {
    display: flex;
    align-items: center;
    gap: 7px;
}

.gx-friend-unread-pill {
    min-width: 28px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
}

@media (max-width: 760px) {
    .gx-room-host-head,
    .gx-room-host-foot {
        align-items: stretch;
        flex-direction: column;
    }

    .gx-room-host-actions {
        justify-content: stretch;
    }

    .gx-room-copy-btn,
    .gx-room-host-invite-btn {
        flex: 1;
    }

    .gx-room-host-grid.two,
    .gx-room-host-grid.three {
        grid-template-columns: 1fr;
    }

    .gx-room-language-switch,
    .gx-room-mode-switch {
        grid-template-columns: 1fr;
    }

    .gx-room-save-btn {
        width: 100%;
    }

    .gx-room-invite-summary {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}


/* =========================================================
   GX V17 — PROPER CENTERED LOGIN SUCCESS
   Dedicated screen; not a toast and not a SweetAlert.
   ========================================================= */

.gx-login-success-screen {
    position: fixed;
    inset: 0;
    z-index: 900000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(59,130,246,.075), transparent 32%),
        rgba(3, 7, 18, .70);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: opacity .20s ease;
}

.gx-login-success-screen.show {
    opacity: 1;
}

.gx-login-success-screen.leave {
    opacity: 0;
    pointer-events: none;
}

.gx-login-success-card {
    position: relative;
    width: min(410px, calc(100vw - 32px));
    padding: 30px 30px 25px;
    overflow: hidden;
    text-align: center;
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% -10%, rgba(59,130,246,.13), transparent 45%),
        linear-gradient(180deg, #121a2b 0%, #0c1321 100%);
    border: 1px solid rgba(96,165,250,.19);
    box-shadow:
        0 34px 110px rgba(0,0,0,.62),
        inset 0 1px 0 rgba(255,255,255,.04);
    transform: translateY(14px) scale(.972);
    opacity: 0;
    transition:
        transform .27s cubic-bezier(.2,.85,.25,1),
        opacity .22s ease;
}

.gx-login-success-screen.show .gx-login-success-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.gx-login-success-screen.leave .gx-login-success-card {
    transform: translateY(8px) scale(.985);
    opacity: 0;
}

.gx-login-success-card::before {
    content: "";
    position: absolute;
    left: 26%;
    right: 26%;
    top: 0;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, #3b82f6, #8b5cf6, transparent);
}

.gx-login-success-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.gx-login-success-controller {
    position: relative;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 21px;
    color: #93c5fd;
    font-size: 27px;
    background:
        linear-gradient(145deg, rgba(37,99,235,.20), rgba(124,58,237,.12));
    border: 1px solid rgba(96,165,250,.25);
    box-shadow:
        0 12px 32px rgba(37,99,235,.12),
        inset 0 1px 0 rgba(255,255,255,.055);
}

.gx-login-success-controller > span {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #052e16;
    background: #4ade80;
    border: 4px solid #0e1625;
    font-size: 9px;
    box-shadow: 0 5px 16px rgba(34,197,94,.20);
}

.gx-login-success-kicker {
    color: #60a5fa;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .18em;
}

.gx-login-success-card h2 {
    margin: 8px 0 0;
    color: #f8fafc;
    font-size: 25px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.02em;
}

.gx-login-success-welcome {
    margin: 10px 0 0;
    color: #8d9ab0;
    font-size: 13px;
    line-height: 1.5;
}

.gx-login-success-welcome strong {
    color: #dbeafe;
    font-weight: 700;
}

.gx-login-success-sub {
    margin: 3px 0 0;
    color: #5f6e85;
    font-size: 11px;
}

.gx-login-success-warning {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 9px;
    align-items: start;
    margin-top: 16px;
    padding: 10px 11px;
    border-radius: 11px;
    text-align: left;
    color: #d7b66c;
    background: rgba(245,158,11,.07);
    border: 1px solid rgba(245,158,11,.15);
    font-size: 10px;
    line-height: 1.5;
}

.gx-login-success-warning > i {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fbbf24;
    background: rgba(245,158,11,.09);
}

.gx-login-success-loader {
    height: 3px;
    margin-top: 23px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
}

.gx-login-success-loader > span {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: left;
    border-radius: inherit;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #22c55e);
    animation: gxLoginSuccessLoading 1.55s linear forwards;
}

.gx-login-success-card.has-warning .gx-login-success-loader > span {
    animation-duration: 2.6s;
}

@keyframes gxLoginSuccessLoading {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* The older generic login-notice layout is no longer used. */
#gx-login-notice-overlay {
    display: none !important;
}

@media (max-width: 520px) {
    .gx-login-success-card {
        width: calc(100vw - 26px);
        padding: 27px 21px 22px;
        border-radius: 20px;
    }

    .gx-login-success-controller {
        width: 62px;
        height: 62px;
        border-radius: 19px;
        font-size: 24px;
    }

    .gx-login-success-card h2 {
        font-size: 22px;
    }
}


/* =========================================================
   GX V18 — CENTERED ALERT SYSTEM
   Generic success / warning / error / info dialogs
   ========================================================= */

.gx-center-alert-overlay {
    --gx-alert-accent: #60a5fa;
    --gx-alert-soft: rgba(59,130,246,.10);

    position: fixed;
    inset: 0;
    z-index: 880000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;

    opacity: 0;
    background: rgba(3,7,18,.62);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    transition: opacity .18s ease;
}

.gx-center-alert-overlay.show {
    opacity: 1;
}

.gx-center-alert-overlay.leave {
    opacity: 0;
    pointer-events: none;
}

.gx-center-alert-card {
    position: relative;
    width: min(390px, calc(100vw - 30px));
    padding: 28px 26px 23px;
    overflow: hidden;
    text-align: center;

    border-radius: 22px;
    border: 1px solid rgba(148,163,184,.14);
    background:
        radial-gradient(circle at 50% -10%, var(--gx-alert-soft), transparent 45%),
        linear-gradient(180deg, #121a2b 0%, #0c1321 100%);

    box-shadow:
        0 34px 105px rgba(0,0,0,.60),
        inset 0 1px 0 rgba(255,255,255,.035);

    transform: translateY(12px) scale(.975);
    opacity: 0;

    transition:
        transform .24s cubic-bezier(.2,.85,.25,1),
        opacity .19s ease;
}

.gx-center-alert-overlay.show .gx-center-alert-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.gx-center-alert-overlay.leave .gx-center-alert-card {
    transform: translateY(7px) scale(.985);
    opacity: 0;
}

.gx-center-alert-card::before {
    content: "";
    position: absolute;
    left: 28%;
    right: 28%;
    top: 0;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--gx-alert-accent),
        transparent
    );
}

.gx-center-alert-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 19px;
    color: var(--gx-alert-accent);
    background: var(--gx-alert-soft);
    border: 1px solid color-mix(in srgb, var(--gx-alert-accent) 28%, transparent);

    box-shadow:
        0 11px 30px color-mix(in srgb, var(--gx-alert-accent) 10%, transparent),
        inset 0 1px 0 rgba(255,255,255,.035);

    font-size: 22px;
}

.gx-center-alert-kicker {
    display: block;
    color: var(--gx-alert-accent);
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .18em;
}

.gx-center-alert-copy h3 {
    margin: 8px 0 0;
    color: #f8fafc;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.015em;
}

.gx-center-alert-message {
    max-width: 320px;
    margin: 9px auto 0;

    color: #96a4ba;
    font-size: 12.5px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.gx-center-alert-actions {
    margin-top: 20px;
}

.gx-center-alert-confirm {
    min-width: 142px;
    min-height: 42px;
    padding: 0 18px;

    border: 0;
    border-radius: 11px;

    color: #fff;
    background: var(--gx-alert-accent);

    font: 800 12px 'Kanit', sans-serif;
    cursor: pointer;

    box-shadow:
        0 9px 24px color-mix(in srgb, var(--gx-alert-accent) 18%, transparent);

    transition: transform .16s ease, filter .16s ease;
}

.gx-center-alert-confirm:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.gx-center-alert-progress {
    height: 3px;
    margin: 22px 8px 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
}

.gx-center-alert-progress span {
    display: block;
    width: 100%;
    height: 100%;

    transform-origin: left;
    border-radius: inherit;
    background: var(--gx-alert-accent);

    animation: gxCenterAlertProgress linear forwards;
}

@keyframes gxCenterAlertProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Per alert type */
.gx-center-alert-success {
    --gx-alert-accent: #4ade80;
    --gx-alert-soft: rgba(34,197,94,.10);
}

.gx-center-alert-error {
    --gx-alert-accent: #fb7185;
    --gx-alert-soft: rgba(244,63,94,.09);
}

.gx-center-alert-warning {
    --gx-alert-accent: #fbbf24;
    --gx-alert-soft: rgba(245,158,11,.09);
}

.gx-center-alert-info {
    --gx-alert-accent: #60a5fa;
    --gx-alert-soft: rgba(59,130,246,.10);
}

.gx-center-alert-question {
    --gx-alert-accent: #a78bfa;
    --gx-alert-soft: rgba(139,92,246,.10);
}

/* เก็บ toast เก่าที่อาจค้างจาก code รุ่นก่อน ไม่ให้แสดงซ้อน */
#gx-notice-root {
    display: none !important;
}

@media (max-width: 520px) {
    .gx-center-alert-card {
        width: calc(100vw - 26px);
        padding: 25px 20px 21px;
        border-radius: 19px;
    }

    .gx-center-alert-icon {
        width: 56px;
        height: 56px;
        border-radius: 17px;
        font-size: 20px;
    }

    .gx-center-alert-copy h3 {
        font-size: 19px;
    }

    .gx-center-alert-message {
        font-size: 12px;
    }

    .gx-center-alert-confirm {
        width: 100%;
    }
}

/* =========================================================
   GX V19 — RANK AVATAR FRAME SYSTEM
   Bronze → Silver → Gold → Platinum → Diamond →
   Master → Grandmaster → Legend → Mythic
   ========================================================= */

.gx-rank-avatar-shell {
    --gx-rank-c1: #b87333;
    --gx-rank-c2: #7c3f18;
    --gx-rank-c3: #e4a66a;
    --gx-rank-glow: rgba(184,115,51,.24);
    --gx-rank-soft: rgba(184,115,51,.09);

    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;

    width: 64px;
    height: 64px;
    padding: 4px;

    border-radius: 23%;
    background:
        linear-gradient(145deg,
            var(--gx-rank-c3) 0%,
            var(--gx-rank-c1) 30%,
            var(--gx-rank-c2) 67%,
            var(--gx-rank-c3) 100%);

    box-shadow:
        0 10px 28px var(--gx-rank-glow),
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -1px 0 rgba(0,0,0,.35);

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        filter .20s ease;
}

.gx-rank-avatar-shell:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.gx-rank-avatar-shell::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -5px;
    border-radius: 27%;
    opacity: .25;
    background:
        conic-gradient(
            from 0deg,
            transparent 0 10%,
            var(--gx-rank-c1) 18%,
            transparent 28% 52%,
            var(--gx-rank-c3) 62%,
            transparent 73% 100%
        );
    filter: blur(7px);
}

.gx-rank-avatar-shell::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 3px;
    border-radius: 20%;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,.13);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.30),
        inset 0 0 18px rgba(255,255,255,.025);
}

.gx-rank-avatar-img {
    position: relative;
    z-index: 1;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    object-fit: cover !important;

    border: 3px solid #0b1020 !important;
    border-radius: 19% !important;
    background: #0b1020;
}

.gx-rank-emblem {
    position: absolute;
    z-index: 5;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);

    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;
    color: #08101d;
    background: linear-gradient(145deg, var(--gx-rank-c3), var(--gx-rank-c1));
    border: 2px solid #0b1020;

    box-shadow:
        0 5px 14px var(--gx-rank-glow),
        inset 0 1px 0 rgba(255,255,255,.42);

    font-size: 10px;
}

.gx-rank-frame-badge {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);

    min-width: 46px;
    max-width: 90%;
    height: 22px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;
    overflow: hidden;

    border-radius: 999px;
    color: #08101d;
    background: linear-gradient(135deg, var(--gx-rank-c3), var(--gx-rank-c1));

    border: 2px solid #0b1020;
    box-shadow: 0 5px 15px var(--gx-rank-glow);

    font-size: 8px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .055em;
}

/* Sizes */
.gx-rank-micro {
    width: 31px;
    height: 31px;
    padding: 2px;
    border-radius: 32%;
}
.gx-rank-micro::before { inset: -2px; filter: blur(3px); }
.gx-rank-micro::after { inset: 1px; }
.gx-rank-micro .gx-rank-avatar-img {
    border-width: 1px !important;
    border-radius: 28% !important;
}
.gx-rank-micro .gx-rank-emblem,
.gx-rank-micro .gx-rank-frame-badge { display: none; }

.gx-rank-sm {
    width: 45px;
    height: 45px;
    padding: 3px;
}
.gx-rank-sm .gx-rank-emblem {
    width: 19px;
    height: 19px;
    top: -6px;
    font-size: 8px;
}
.gx-rank-sm .gx-rank-frame-badge {
    height: 18px;
    min-width: 34px;
    bottom: -7px;
    font-size: 7px;
    padding: 0 6px;
}

.gx-rank-md {
    width: 58px;
    height: 58px;
}

.gx-rank-lg {
    width: 82px;
    height: 82px;
    padding: 4px;
}

.gx-rank-xl {
    width: 106px;
    height: 106px;
    padding: 5px;
}

.gx-rank-xl .gx-rank-emblem {
    width: 29px;
    height: 29px;
    top: -9px;
    font-size: 11px;
}

.gx-rank-xl .gx-rank-frame-badge {
    min-width: 60px;
    height: 24px;
    bottom: -10px;
    font-size: 8px;
}

/* Rank themes */
.gx-rank-bronze {
    --gx-rank-c1: #b96f32;
    --gx-rank-c2: #653616;
    --gx-rank-c3: #e4a56b;
    --gx-rank-glow: rgba(185,111,50,.28);
    --gx-rank-soft: rgba(185,111,50,.09);
}

.gx-rank-silver {
    --gx-rank-c1: #b9c3cf;
    --gx-rank-c2: #586474;
    --gx-rank-c3: #f4f7fb;
    --gx-rank-glow: rgba(203,213,225,.28);
    --gx-rank-soft: rgba(203,213,225,.08);
}

.gx-rank-gold {
    --gx-rank-c1: #f6b817;
    --gx-rank-c2: #9a5900;
    --gx-rank-c3: #ffe585;
    --gx-rank-glow: rgba(245,158,11,.36);
    --gx-rank-soft: rgba(245,158,11,.10);
}

.gx-rank-platinum {
    --gx-rank-c1: #67d5d0;
    --gx-rank-c2: #246f7b;
    --gx-rank-c3: #d7ffff;
    --gx-rank-glow: rgba(94,234,212,.34);
    --gx-rank-soft: rgba(94,234,212,.09);
}

.gx-rank-diamond {
    --gx-rank-c1: #4bb9ff;
    --gx-rank-c2: #3156d8;
    --gx-rank-c3: #d9f4ff;
    --gx-rank-glow: rgba(56,189,248,.43);
    --gx-rank-soft: rgba(56,189,248,.11);
}

.gx-rank-master {
    --gx-rank-c1: #a86cff;
    --gx-rank-c2: #5622ad;
    --gx-rank-c3: #e2c7ff;
    --gx-rank-glow: rgba(168,85,247,.43);
    --gx-rank-soft: rgba(168,85,247,.11);
}

.gx-rank-grandmaster {
    --gx-rank-c1: #ff5757;
    --gx-rank-c2: #8f1427;
    --gx-rank-c3: #ffb35d;
    --gx-rank-glow: rgba(244,63,94,.45);
    --gx-rank-soft: rgba(244,63,94,.11);
}

.gx-rank-legend {
    --gx-rank-c1: #f9c642;
    --gx-rank-c2: #6c35e9;
    --gx-rank-c3: #fff2a0;
    --gx-rank-glow: rgba(250,204,21,.48);
    --gx-rank-soft: rgba(250,204,21,.10);
}

.gx-rank-mythic {
    --gx-rank-c1: #ff4fd8;
    --gx-rank-c2: #4938ff;
    --gx-rank-c3: #6df7ff;
    --gx-rank-glow: rgba(217,70,239,.52);
    --gx-rank-soft: rgba(217,70,239,.12);
}

/* Higher-rank motion */
.gx-rank-diamond::before {
    opacity: .55;
    animation: gxRankHaloPulse 2.4s ease-in-out infinite;
}

.gx-rank-master::before {
    opacity: .62;
    animation: gxRankSpin 7s linear infinite;
}

.gx-rank-grandmaster::before {
    opacity: .68;
    background:
        conic-gradient(
            from 0deg,
            transparent,
            #ff8a3d,
            #ef3340,
            transparent,
            #ffcc66,
            transparent
        );
    animation: gxRankSpin 5.5s linear infinite;
}

.gx-rank-legend {
    background:
        linear-gradient(120deg,#6d28d9,#f59e0b,#fde68a,#7c3aed,#f59e0b);
    background-size: 260% 260%;
    animation: gxLegendFrameShift 4.5s ease infinite;
}

.gx-rank-legend::before {
    opacity: .85;
    filter: blur(8px);
    animation: gxRankSpin 4.8s linear infinite;
}

.gx-rank-mythic {
    background:
        linear-gradient(120deg,#ff3dc8,#8b5cf6,#42e9ff,#f9e85c,#ff3dc8);
    background-size: 300% 300%;
    animation: gxMythicFrameShift 3.5s linear infinite;
}

.gx-rank-mythic::before {
    opacity: .9;
    background:
        conic-gradient(
            #ff4fd8,
            #784cff,
            #48e9ff,
            #85ffbd,
            #fce75a,
            #ff6e6e,
            #ff4fd8
        );
    animation: gxRankSpin 3.7s linear infinite;
}

.gx-rank-mythic .gx-rank-emblem,
.gx-rank-mythic .gx-rank-frame-badge {
    background:
        linear-gradient(100deg,#ff6adf,#8d73ff,#74eaff,#fff07c);
    color: #08101d;
}

@keyframes gxRankSpin {
    to { transform: rotate(360deg); }
}

@keyframes gxRankHaloPulse {
    0%,100% { opacity: .30; transform: scale(.97); }
    50% { opacity: .72; transform: scale(1.04); }
}

@keyframes gxLegendFrameShift {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes gxMythicFrameShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Current profile preview */
.gx-rank-profile-preview {
    margin: 9px auto 20px;
}

.gx-profile-rank-frame-label {
    width: max-content;
    max-width: 100%;
    margin: -5px auto 14px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #8492aa;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(148,163,184,.09);
    font-size: 10px;
}

.gx-profile-rank-frame-label strong {
    color: #dbeafe;
}

/* Sidebar frame */
#sb-rank-avatar-frame {
    margin: 7px auto 15px;
}

#sb-rank-avatar-frame .sidebar-avatar {
    border-radius: 19% !important;
    border: 3px solid #0b1020 !important;
}

/* Admin */
.gx-admin-rank-avatar-frame {
    margin-right: 3px;
}

.gx-admin-rank-avatar-frame .admin-player-avatar,
.gx-admin-user-avatar-wrap .gx-rank-avatar-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 19% !important;
}

.gx-admin-user-avatar-wrap > .gx-rank-avatar-shell {
    flex: 0 0 auto;
}

/* Friends */
.gx-friend-card > .gx-rank-avatar-shell {
    margin: 2px 1px 0 0;
}

.gx-friend-profile-hero > .gx-rank-avatar-shell {
    margin: 7px 5px 7px 4px;
}

.gx-friend-profile-hero > .gx-rank-avatar-shell img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 19% !important;
}

.gx-friend-rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Private chat */
.gx-chat-rank-frame {
    margin: 2px 1px;
}

.gx-private-chat-user .gx-chat-rank-frame img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 19% !important;
}

/* Room member */
.gx-room-member-avatar {
    position: relative;
    flex: 0 0 auto;
}

.gx-room-member-avatar .slot-level-pill {
    z-index: 10;
    right: -9px;
    bottom: -8px;
}

.gx-room-player-rank {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 3px 7px 2px 0;
    font-size: 9.5px;
    font-weight: 800;
}

/* Lobby avatar stack */
.gx-room-avatar-stack > .gx-rank-avatar-shell {
    margin-left: -7px;
    vertical-align: middle;
}
.gx-room-avatar-stack > .gx-rank-avatar-shell:first-child {
    margin-left: 0;
}

/* Invite list */
.gx-room-invite-friend > .gx-rank-avatar-shell {
    margin: 1px 2px 1px 0;
}

/* Rank text colors */
.gx-rank-text-bronze { color: #d99255 !important; }
.gx-rank-text-silver { color: #d4dce7 !important; }
.gx-rank-text-gold { color: #fbbf24 !important; }
.gx-rank-text-platinum { color: #5eead4 !important; }
.gx-rank-text-diamond { color: #67d4ff !important; }
.gx-rank-text-master { color: #c084fc !important; }
.gx-rank-text-grandmaster { color: #fb7185 !important; }
.gx-rank-text-legend { color: #fde047 !important; }
.gx-rank-text-mythic { color: #f0abfc !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gx-rank-avatar-shell,
    .gx-rank-avatar-shell::before {
        animation: none !important;
        transition: none !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .gx-rank-xl {
        width: 92px;
        height: 92px;
    }

    .gx-rank-lg {
        width: 74px;
        height: 74px;
    }

    .gx-rank-frame-badge {
        max-width: 78%;
        font-size: 7px;
    }
}


/* =========================================================
   GX V20 — RANK POINT / UNRANKED / ADMIN SOLO TEST
   ========================================================= */
.gx-rank-unranked {
    --gx-rank-c1:#64748b;
    --gx-rank-c2:#263244;
    --gx-rank-c3:#94a3b8;
    --gx-rank-glow:rgba(100,116,139,.14);
    --gx-rank-soft:rgba(100,116,139,.06);
    filter:saturate(.65);
}
.gx-rank-unranked::before { opacity:.10; animation:none!important; }
.gx-rank-unranked .gx-rank-emblem {
    color:#d1d9e5;
    background:linear-gradient(145deg,#334155,#64748b);
}
.gx-rank-unranked .gx-rank-frame-badge {
    color:#dbe3ee;
    background:linear-gradient(135deg,#334155,#475569);
}
.gx-rank-unranked-badge {
    background:linear-gradient(135deg,#475569,#334155)!important;
    color:#cbd5e1!important;
}

.gx-rank-rating-mini {
    display:grid;
    grid-template-columns:1fr auto;
    gap:2px 10px;
    margin:10px 0 13px;
    padding:9px 10px;
    border-radius:10px;
    text-align:left;
    background:rgba(59,130,246,.05);
    border:1px solid rgba(96,165,250,.10);
}
.gx-rank-rating-mini span { color:#71819a; font-size:9px; }
.gx-rank-rating-mini span i { color:#60a5fa; }
.gx-rank-rating-mini strong { color:#dbeafe; font-size:11px; }
.gx-rank-rating-mini small {
    grid-column:1/-1;
    color:#596881;
    font-size:8.5px;
}

.gx-profile-rank-rating-card {
    padding:14px;
    border-radius:14px;
    background:radial-gradient(circle at 100% 0%,rgba(59,130,246,.08),transparent 42%),rgba(12,18,31,.72);
    border:1px solid rgba(96,165,250,.13);
}
.gx-profile-rank-rating-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
}
.gx-profile-rank-rating-head span {
    display:block;color:#5d85c8;font-size:8px;font-weight:900;letter-spacing:.14em;
}
.gx-profile-rank-rating-head strong { display:block;margin-top:2px;color:#f8fafc;font-size:17px; }
.gx-profile-rank-rating-head b { color:#93c5fd;font-size:15px; }
.gx-profile-rank-rating-progress {
    height:7px;margin-top:10px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.055);
}
.gx-profile-rank-rating-progress span {
    display:block;height:100%;border-radius:inherit;
    background:linear-gradient(90deg,#2563eb,#8b5cf6,#38bdf8);
    transition:width .45s ease;
}
.gx-profile-rank-rating-foot {
    display:flex;justify-content:space-between;gap:9px;margin-top:6px;color:#65748d;font-size:9px;
}
.gx-profile-rank-rating-card>p {
    margin:10px 0 0;padding-top:9px;border-top:1px solid rgba(148,163,184,.08);color:#56667e;font-size:9px;
}
.gx-profile-rank-rating-card>p i { color:#60a5fa; }

.gx-rank-dev-tools {
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:-5px 0 20px;
    padding:13px 15px;
    border-radius:15px;
    background:rgba(245,158,11,.045);
    border:1px dashed rgba(245,158,11,.20);
}
.gx-rank-dev-copy>span {
    display:block;color:#f59e0b;font-size:8px;font-weight:900;letter-spacing:.14em;
}
.gx-rank-dev-copy>strong { display:block;margin-top:3px;color:#d7deeb;font-size:11px; }
.gx-rank-dev-copy>small { display:block;margin-top:1px;color:#66748b;font-size:8.5px; }
.gx-rank-dev-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px; }
.gx-rank-dev-actions button {
    min-height:32px;padding:0 10px;border-radius:8px;
    font:700 9.5px 'Kanit',sans-serif;cursor:pointer;
}
.gx-rank-dev-actions .win { color:#86efac;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.16); }
.gx-rank-dev-actions .draw { color:#93c5fd;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.16); }
.gx-rank-dev-actions .loss { color:#fda4af;background:rgba(244,63,94,.07);border:1px solid rgba(244,63,94,.15); }
.gx-rank-dev-actions .reset { color:#fcd34d;background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.15); }

@media(max-width:760px){
    .gx-rank-dev-tools{align-items:stretch;flex-direction:column;}
    .gx-rank-dev-actions{justify-content:stretch;}
    .gx-rank-dev-actions button{flex:1 1 calc(50% - 6px);}
    .gx-profile-rank-rating-foot{align-items:flex-start;flex-direction:column;}
}


/* =========================================================
   GX V21 — COMPACT ROOM HOST PANEL
   ========================================================= */

.gx-host-quick-panel {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.gx-host-quick-action {
    min-width: 0;
    min-height: 66px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    text-align: left;
    border-radius: 15px;
    border: 1px solid rgba(148,163,184,.11);
    background: #111827;
    color: #94a3b8;
    cursor: pointer;
    transition: transform .17s ease, border-color .17s ease, background .17s ease;
}

.gx-host-quick-action:hover {
    transform: translateY(-1px);
    border-color: rgba(96,165,250,.25);
    background: #131c2d;
}

.gx-host-quick-action.settings {
    border-color: rgba(59,130,246,.19);
    background:
        radial-gradient(circle at 100% 0%, rgba(59,130,246,.10), transparent 42%),
        #111827;
}

.gx-host-quick-action.invite {
    border-color: rgba(34,197,94,.13);
}

.gx-host-quick-action.copy {
    border-color: rgba(148,163,184,.10);
}

.gx-host-quick-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #60a5fa;
    background: rgba(59,130,246,.10);
    border: 1px solid rgba(59,130,246,.16);
}

.gx-host-quick-action.invite .gx-host-quick-icon {
    color: #34d399;
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.14);
}

.gx-host-quick-action.copy .gx-host-quick-icon {
    color: #94a3b8;
    background: rgba(148,163,184,.06);
    border-color: rgba(148,163,184,.11);
}

.gx-host-quick-copy {
    min-width: 0;
}

.gx-host-quick-copy strong {
    display: block;
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 800;
}

.gx-host-quick-copy small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #66758d;
    font-size: 9px;
}

.gx-host-quick-arrow {
    color: #4d5b72;
    font-size: 11px;
}

/* Room settings modal */
#gx-room-settings-modal {
    z-index: 460000;
}

.gx-room-settings-modal {
    width: min(760px, calc(100vw - 28px)) !important;
    max-width: 760px !important;
    max-height: min(820px, calc(100vh - 32px)) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(96,165,250,.17) !important;
    background: #0f1422 !important;
    box-shadow: 0 35px 110px rgba(0,0,0,.60) !important;
}

.gx-room-settings-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 19px;
    border-bottom: 1px solid rgba(148,163,184,.10);
    background: linear-gradient(180deg, rgba(59,130,246,.055), transparent);
}

.gx-room-settings-modal-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.gx-room-settings-modal-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: #60a5fa;
    background: rgba(59,130,246,.10);
    border: 1px solid rgba(59,130,246,.19);
}

.gx-room-settings-modal-title > div > span {
    display: block;
    color: #5d8ce0;
    font-size: 8px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .16em;
}

.gx-room-settings-modal-title h3 {
    margin: 3px 0 0;
    color: #f8fafc;
    font-size: 19px;
}

.gx-room-settings-modal-title p {
    margin: 2px 0 0;
    color: #68768d;
    font-size: 9.5px;
}

.gx-room-settings-close {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.10);
    background: rgba(255,255,255,.025);
    color: #708097;
    cursor: pointer;
}

.gx-room-settings-modal-body {
    max-height: calc(100vh - 205px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px 16px;
}

.gx-room-settings-modal-body .gx-room-settings-section {
    margin-bottom: 10px;
}

.gx-room-settings-modal-body .gx-room-settings-section:last-child {
    margin-bottom: 0;
}

.gx-room-team-slot-hint {
    display: block;
    margin-top: 5px;
    color: #5d6b82;
    font-size: 8.5px;
}

.gx-room-team-slot-hint.active {
    color: #93c5fd;
}

.gx-room-settings-modal-foot {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 9px;
    padding: 13px 16px 16px;
    border-top: 1px solid rgba(148,163,184,.09);
    background: rgba(15,20,34,.98);
}

.gx-room-settings-cancel {
    min-height: 42px;
    border-radius: 11px;
    border: 1px solid rgba(148,163,184,.11);
    background: rgba(255,255,255,.03);
    color: #8795aa;
    font: 700 11px 'Kanit', sans-serif;
    cursor: pointer;
}

.gx-room-settings-modal-foot .gx-room-save-btn {
    width: 100%;
    min-width: 0;
}

/* Create room: Team mode still shows slot selector */
#slot-selector-block.gx-team-slot-active {
    opacity: 1 !important;
}

#slot-selector-block.gx-team-slot-active > span::after {
    content: " · Team: 4 / 6 / 8";
    color: #60a5fa;
    font-size: 8px;
}

/* disabled options are hidden where supported */
#m-room-slots option:disabled,
#change-max-slots option:disabled {
    color: #475569;
}

@media (max-width: 800px) {
    .gx-host-quick-panel {
        grid-template-columns: 1fr;
    }

    .gx-host-quick-action {
        min-height: 60px;
    }

    .gx-room-settings-modal-body {
        max-height: calc(100vh - 190px);
    }

    .gx-room-host-grid.two,
    .gx-room-host-grid.three {
        grid-template-columns: 1fr;
    }

    .gx-room-settings-modal-foot {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   GX V22 — AUTH / LANGUAGE / RECOVERY / TRANSFER POLISH
   ========================================================= */

/* ---------- Global language switch ---------- */
.gx-language-toggle {
    min-width: 104px;
    height: 36px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 12px;
    border: 1px solid rgba(96,165,250,.13);
    background: rgba(15,23,42,.78);
    color: #64748b;
    cursor: pointer;
    font: 800 10px 'Kanit', sans-serif;
    transition: .18s ease;
}
.gx-language-toggle:hover {
    border-color: rgba(96,165,250,.28);
    background: #111a2b;
}
.gx-language-toggle > i {
    color: #60a5fa;
    font-size: 12px;
}
.gx-language-toggle .gx-lang-option {
    color: #59677d;
    transition: .18s ease;
}
.gx-language-toggle .gx-lang-option.active {
    color: #f8fafc;
}
.gx-language-toggle .gx-lang-divider {
    color: #334155;
}

/* ---------- Register ---------- */
.gx-auth-card-wide {
    width: min(820px, calc(100vw - 32px)) !important;
}
.gx-register-submit-btn {
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: normal !important;
    line-height: 1.25;
    text-align: center;
    overflow: hidden;
}
.gx-register-submit-btn > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.gx-register-submit-btn > i {
    flex: 0 0 auto;
}

/* ---------- Recovery redesign ---------- */
.gx-recovery-layout {
    width: min(920px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(96,165,250,.14);
    background: #0f1422;
    box-shadow: 0 34px 100px rgba(0,0,0,.48);
}

.gx-recovery-info {
    position: relative;
    min-height: 550px;
    padding: 42px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at 15% 10%, rgba(245,158,11,.12), transparent 35%),
        radial-gradient(circle at 100% 100%, rgba(59,130,246,.10), transparent 44%),
        linear-gradient(160deg,#121827,#0d1320);
    border-right: 1px solid rgba(148,163,184,.08);
}

.gx-recovery-back {
    top: 20px !important;
    left: 20px !important;
    right: auto !important;
}

.gx-recovery-brand {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.gx-recovery-brand-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #fbbf24;
    background: rgba(245,158,11,.09);
    border: 1px solid rgba(245,158,11,.18);
    box-shadow: 0 10px 25px rgba(245,158,11,.08);
}
.gx-recovery-brand h2 {
    margin: 4px 0 0;
    color: #f8fafc;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
}
.gx-recovery-brand p {
    margin: 6px 0 0;
    color: #7f8da3;
    font-size: 11px;
    line-height: 1.6;
}

.gx-recovery-steps {
    display: grid;
    gap: 9px;
    margin-top: 30px;
}
.gx-recovery-steps > div {
    display: grid;
    grid-template-columns: 31px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 11px;
    border-radius: 12px;
    background: rgba(255,255,255,.022);
    border: 1px solid rgba(148,163,184,.07);
}
.gx-recovery-steps > div.active {
    background: rgba(59,130,246,.055);
    border-color: rgba(59,130,246,.13);
}
.gx-recovery-steps b {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #7d8da5;
    background: #111827;
    font-size: 10px;
}
.gx-recovery-steps > div.active b {
    color: #dbeafe;
    background: rgba(37,99,235,.20);
}
.gx-recovery-steps strong {
    display: block;
    color: #cdd6e5;
    font-size: 10.5px;
}
.gx-recovery-steps small {
    display: block;
    margin-top: 1px;
    color: #5e6c82;
    font-size: 8.5px;
}

.gx-recovery-security-note {
    display: flex;
    gap: 9px;
    margin-top: 24px;
    padding: 11px 12px;
    border-radius: 11px;
    color: #7e8ca2;
    background: rgba(34,197,94,.035);
    border: 1px solid rgba(34,197,94,.09);
}
.gx-recovery-security-note > i {
    color: #34d399;
    margin-top: 2px;
}
.gx-recovery-security-note strong {
    display: block;
    color: #9fb2ca;
    font-size: 9.5px;
}
.gx-recovery-security-note span {
    display: block;
    margin-top: 2px;
    font-size: 8.5px;
    line-height: 1.5;
}

.gx-recovery-form-panel {
    min-height: 550px;
    padding: 56px 46px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gx-recovery-form-head > span {
    color: #60a5fa;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .17em;
}
.gx-recovery-form-head h3 {
    margin: 6px 0 0;
    color: #f8fafc;
    font-size: 22px;
}
.gx-recovery-form-head p {
    margin: 4px 0 0;
    color: #68778f;
    font-size: 10px;
}
.gx-recovery-form {
    margin-top: 24px;
}
.gx-recovery-inline-note {
    display: flex;
    gap: 8px;
    padding: 10px 11px;
    border-radius: 10px;
    color: #738199;
    background: rgba(59,130,246,.04);
    border: 1px solid rgba(59,130,246,.085);
    font-size: 9px;
    line-height: 1.5;
}
.gx-recovery-inline-note > i {
    color: #60a5fa;
    margin-top: 2px;
}
.gx-recovery-submit {
    width: 100% !important;
    min-height: 50px !important;
}
.gx-recovery-login-link {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: #66758d;
    font: 700 10px 'Kanit',sans-serif;
    cursor: pointer;
}
.gx-recovery-login-link:hover {
    color: #a8b6ca;
}

/* Recovery result */
#gx-recovery-result-modal {
    z-index: 965000 !important;
}
.gx-recovery-result-modal {
    width: min(430px, calc(100vw - 28px)) !important;
    max-width: 430px !important;
    padding: 28px !important;
    text-align: center;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(59,130,246,.09), transparent 42%),
        #101726 !important;
}
.gx-recovery-result-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 17px;
    color: #60a5fa;
    background: rgba(59,130,246,.10);
    border: 1px solid rgba(59,130,246,.18);
    font-size: 20px;
}
.gx-recovery-result-kicker {
    color: #60a5fa;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .16em;
}
.gx-recovery-result-modal h3 {
    margin: 7px 0 0;
    color: #f8fafc;
    font-size: 20px;
}
.gx-recovery-result-modal > p {
    margin: 6px 0 0;
    color: #75839a;
    font-size: 10.5px;
}
.gx-recovery-password-box {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 42px;
    gap: 8px;
}
.gx-recovery-password-box code {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    overflow: auto;
    border-radius: 11px;
    color: #dbeafe;
    background: #090f1b;
    border: 1px solid rgba(96,165,250,.13);
    font-size: 14px;
}
.gx-recovery-password-box button {
    border-radius: 11px;
    border: 1px solid rgba(96,165,250,.13);
    background: rgba(59,130,246,.08);
    color: #93c5fd;
    cursor: pointer;
}
.gx-recovery-result-warning {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 11px;
    text-align: left;
    border-radius: 10px;
    color: #9a855c;
    background: rgba(245,158,11,.05);
    border: 1px solid rgba(245,158,11,.11);
    font-size: 9px;
    line-height: 1.45;
}
.gx-recovery-result-warning > i {
    color: #fbbf24;
}
.gx-recovery-result-done {
    width: 100%;
    min-height: 44px;
    margin-top: 16px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(90deg,#2563eb,#7c3aed);
    font: 800 11px 'Kanit',sans-serif;
    cursor: pointer;
}

/* ---------- Transfer modal polish ---------- */
#gx-coin-transfer-modal {
    z-index: 540000 !important;
}
.gx-transfer-modal {
    width: min(760px, calc(100vw - 30px)) !important;
    max-width: 760px !important;
    max-height: calc(100dvh - 32px) !important;
    border-radius: 22px !important;
}
.gx-transfer-header {
    padding: 18px 20px !important;
}
.gx-transfer-title-wrap h3 {
    font-size: 20px !important;
}
.gx-transfer-title-wrap p {
    font-size: 10.5px !important;
}
.gx-transfer-body {
    padding: 18px 20px !important;
}
.gx-transfer-balance-card {
    padding: 15px 16px !important;
}
.gx-transfer-balance-card strong {
    font-size: 19px !important;
}
.gx-transfer-requirements {
    margin: 10px 0 15px !important;
}
.gx-transfer-requirements span {
    padding: 6px 9px !important;
    font-size: 9.5px !important;
}
.gx-transfer-form-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
}
.gx-transfer-form-grid .gx-transfer-recipient-field {
    grid-column: 1 / -1;
}
.gx-transfer-form-grid .admin-field > label {
    font-size: 10.5px !important;
}
.gx-transfer-form-grid .game-input {
    min-height: 45px !important;
    border-radius: 10px !important;
}
.gx-transfer-preview-box {
    margin-top: 13px !important;
}
.gx-transfer-note {
    margin-top: 10px !important;
    font-size: 9.5px !important;
}
.gx-transfer-actions {
    position: sticky !important;
    bottom: 0 !important;
    padding: 13px 20px 16px !important;
    background: rgba(16,19,30,.97) !important;
    backdrop-filter: blur(12px);
}
.gx-transfer-actions button {
    min-height: 44px !important;
}

/* Critical layering fix: SweetAlert confirmation MUST be above transfer modal */
.swal2-container,
.swal2-container.gx-transfer-confirm-container {
    z-index: 990000 !important;
}
.gx-transfer-confirm-container .swal2-popup {
    z-index: 990001 !important;
}
#gx-coin-transfer-modal.gx-transfer-confirming {
    filter: saturate(.92);
}
#gx-coin-transfer-modal.gx-transfer-confirming .gx-transfer-modal {
    pointer-events: none;
}

/* Better transfer confirmation card */
.gx-transfer-confirm-popup {
    width: min(460px, calc(100vw - 30px)) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(245,158,11,.08), transparent 42%),
        linear-gradient(180deg,#151b2b,#0f1523) !important;
    border: 1px solid rgba(245,158,11,.14) !important;
}
.gx-transfer-confirm {
    display: grid;
    gap: 10px;
    text-align: left;
}
.gx-transfer-confirm-user,
.gx-transfer-confirm-amount,
.gx-transfer-confirm-balance {
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.09);
    background: rgba(255,255,255,.025);
}
.gx-transfer-confirm-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
}
.gx-transfer-confirm-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #93c5fd;
    background: rgba(59,130,246,.09);
}
.gx-transfer-confirm-user span,
.gx-transfer-confirm-amount span,
.gx-transfer-confirm-balance span {
    color: #64748b;
    font-size: 9px;
}
.gx-transfer-confirm-user strong {
    display: block;
    color: #f8fafc;
    font-size: 12px;
}
.gx-transfer-confirm-user small {
    color: #6f7e95;
    font-size: 9px;
}
.gx-transfer-confirm-amount {
    padding: 12px;
    text-align: center;
}
.gx-transfer-confirm-amount strong {
    display: block;
    margin-top: 2px;
    color: #fbbf24;
    font-size: 24px;
}
.gx-transfer-confirm-amount small {
    color: #7d8798;
    font-size: 9px;
}
.gx-transfer-confirm-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
}
.gx-transfer-confirm-balance b {
    color: #dbeafe;
    font-size: 11px;
}

@media (max-width: 820px) {
    .gx-recovery-layout {
        grid-template-columns: 1fr;
        max-width: 560px;
    }
    .gx-recovery-info {
        min-height: 0;
        padding: 32px 28px 24px;
        border-right: 0;
        border-bottom: 1px solid rgba(148,163,184,.08);
    }
    .gx-recovery-steps {
        grid-template-columns: repeat(3,1fr);
    }
    .gx-recovery-steps > div {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .gx-recovery-steps b {
        margin: 0 auto;
    }
    .gx-recovery-security-note {
        display: none;
    }
    .gx-recovery-form-panel {
        min-height: 0;
        padding: 30px 28px 34px;
    }
}

@media (max-width: 620px) {
    .gx-language-toggle {
        min-width: 78px;
        padding: 0 8px;
        gap: 5px;
    }
    .gx-language-toggle > i {
        display: none;
    }

    .gx-auth-card-wide {
        width: calc(100vw - 24px) !important;
    }

    .gx-recovery-layout {
        width: calc(100vw - 24px);
    }

    .gx-recovery-info {
        padding: 30px 20px 20px;
    }
    .gx-recovery-brand h2 {
        font-size: 23px;
    }
    .gx-recovery-steps {
        display: none;
    }
    .gx-recovery-form-panel {
        padding: 25px 20px 28px;
    }

    .gx-transfer-form-grid {
        grid-template-columns: 1fr !important;
    }
    .gx-transfer-form-grid .gx-transfer-recipient-field {
        grid-column: auto;
    }
}


/* =========================================================
   GX V23 — FULL LANGUAGE SWITCH POLISH
   ========================================================= */
.gx-language-toggle {
    position: relative;
    overflow: hidden;
}

.gx-language-toggle::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 3px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    opacity: .45;
}

.gx-language-toggle .gx-lang-option.active {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(96,165,250,.38);
}


/* =========================================================
   GX V24 — MMR / PLAYER HISTORY / ROOM LAYOUT / 3-DAY CHAT
   ========================================================= */

/* Friend list: only one action row (colored buttons on the right) */
.gx-friend-card-subactions { display:none !important; }
.gx-friend-card-info { align-self:center; }
.gx-friend-card-actions {
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:6px;
}

/* Player profile: privacy-first — no Coin / Point / EXP */
.gx-profile-hero-clean {
    padding-bottom:17px;
    border-bottom:1px solid rgba(148,163,184,.08);
}

.gx-profile-recent-history {
    margin-top:16px;
    padding:14px;
    border-radius:15px;
    background:rgba(8,13,24,.42);
    border:1px solid rgba(148,163,184,.09);
}
.gx-profile-history-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
.gx-profile-history-head span,
.gx-game-history-head > div > span {
    display:block;
    color:#5d8ce0;
    font-size:8px;
    font-weight:900;
    letter-spacing:.14em;
}
.gx-profile-history-head h4,
.gx-game-history-head h3 {
    margin:3px 0 0;
    color:#f8fafc;
    font-size:15px;
}
.gx-profile-history-head button {
    min-height:32px;
    padding:0 10px;
    border-radius:9px;
    border:1px solid rgba(96,165,250,.13);
    background:rgba(59,130,246,.07);
    color:#93c5fd;
    font:700 9.5px 'Kanit',sans-serif;
    cursor:pointer;
}
.gx-profile-history-list,
.gx-game-history-list {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.gx-history-row {
    display:grid;
    grid-template-columns:74px minmax(0,1fr) 88px;
    gap:10px;
    align-items:center;
    padding:10px 11px;
    border-radius:12px;
    background:#0d1422;
    border:1px solid rgba(148,163,184,.08);
}
.gx-history-result {
    min-height:45px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:rgba(96,165,250,.06);
}
.gx-history-result b { color:#93c5fd;font-size:10px; }
.gx-history-result small { margin-top:2px;color:#55647a;font-size:7.5px; }
.gx-history-row.win .gx-history-result { background:rgba(34,197,94,.07); }
.gx-history-row.win .gx-history-result b { color:#4ade80; }
.gx-history-row.loss .gx-history-result { background:rgba(244,63,94,.06); }
.gx-history-row.loss .gx-history-result b { color:#fb7185; }
.gx-history-row.draw .gx-history-result { background:rgba(245,158,11,.07); }
.gx-history-row.draw .gx-history-result b { color:#fbbf24; }
.gx-history-main { min-width:0; }
.gx-history-main strong {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#e7edf8;
    font-size:10.5px;
}
.gx-history-main span { display:block;margin-top:2px;color:#718096;font-size:8.5px; }
.gx-history-main small { display:block;margin-top:2px;color:#4e5d73;font-size:8px; }
.gx-history-score { text-align:right; }
.gx-history-score > strong { display:block;color:#f8fafc;font-size:16px;line-height:1; }
.gx-history-score > small { color:#59677d;font-size:7.5px; }
.gx-history-mmr {
    display:inline-flex;
    margin-top:4px;
    padding:2px 6px;
    border-radius:999px;
    font-size:7.5px;
    font-weight:800;
}
.gx-history-mmr.up { color:#4ade80;background:rgba(34,197,94,.08); }
.gx-history-mmr.down { color:#fb7185;background:rgba(244,63,94,.07); }
.gx-history-empty {
    min-height:120px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    color:#5b6980;
    text-align:center;
}
.gx-history-empty.compact { min-height:90px; }
.gx-history-empty i { font-size:22px;color:#334155; }
.gx-history-empty strong { font-size:10px;color:#7a889d; }

#gx-game-history-modal { z-index:570000 !important; }
.gx-game-history-modal {
    width:min(620px,calc(100vw - 28px)) !important;
    max-width:620px !important;
    max-height:min(760px,calc(100vh - 30px)) !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:21px !important;
    background:#0f1524 !important;
}
.gx-game-history-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px 19px;
    border-bottom:1px solid rgba(148,163,184,.09);
}
.gx-game-history-head p { margin:2px 0 0;color:#68768d;font-size:9px; }
.gx-game-history-list {
    max-height:600px;
    overflow-y:auto;
    padding:14px 16px 18px;
    overscroll-behavior:contain;
}
.gx-history-loading { min-height:150px;display:grid;place-items:center;color:#60a5fa; }

/* Room screen: full-width, aligned horizontal Host actions */
.gx-game-room-polished > .max-w-6xl {
    max-width:1180px !important;
    width:calc(100% - 34px) !important;
}
.gx-room-topbar {
    padding:17px 19px;
    border-radius:17px;
    border:1px solid rgba(148,163,184,.10);
    background:#101625;
    box-shadow:0 16px 44px rgba(0,0,0,.14);
}
.gx-host-quick-panel {
    display:grid !important;
    width:100% !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    margin:0 0 18px !important;
    padding:0 !important;
    border:0 !important;
}
.gx-host-quick-action {
    width:100% !important;
    min-height:72px !important;
}
.gx-room-content-grid {
    align-items:start;
}
.gx-room-main-column,
.gx-room-waiting-card {
    min-width:0;
}
.gx-room-waiting-card {
    padding:17px;
    border-radius:17px;
    border:1px solid rgba(148,163,184,.09);
    background:rgba(15,21,36,.72);
}
#player-slots-container {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
#player-slots-container .player-slot-card,
#player-slots-container > div {
    min-width:0;
}
.gx-room-chat-panel {
    border-radius:17px !important;
    background:#101625 !important;
}

/* MMR UI emphasis */
.gx-rank-rating-mini > span::first-letter { text-transform:uppercase; }
#sb-rank-points,
#profile-rank-points { letter-spacing:.02em; }

@media (max-width:900px) {
    .gx-host-quick-panel { grid-template-columns:1fr !important; }
    #player-slots-container { grid-template-columns:1fr; }
}
@media (max-width:620px) {
    .gx-history-row { grid-template-columns:62px minmax(0,1fr); }
    .gx-history-score { grid-column:2;text-align:left;display:flex;align-items:center;gap:6px; }
    .gx-history-score > strong { font-size:14px; }
}


/* =========================================================
   GX V24.1 — LANGUAGE BOOTSTRAP SAFETY
   ========================================================= */
#gx-language-toggle {
    pointer-events: auto !important;
    position: relative;
    z-index: 20;
}

html.js-loading #login-screen.active {
    display: flex !important;
}

/* Prevent a completely blank page if initialization is interrupted. */
body.gx-auth-mode #login-screen.active,
#login-screen.active {
    visibility: visible;
}


/* =========================================================
   GX V25 — CHAOS BOARD ADMIN DEVELOPMENT LOBBY
   ========================================================= */

.gx-chaos-game-card.gx-chaos-admin-unlocked {
    border-color: rgba(168,85,247,.30);
    box-shadow: 0 16px 42px rgba(88,28,135,.13);
}

.gx-chaos-game-card.gx-chaos-admin-unlocked .gx-game-card-art {
    background:
        radial-gradient(circle at 20% 10%, rgba(139,92,246,.34), transparent 35%),
        radial-gradient(circle at 82% 88%, rgba(236,72,153,.20), transparent 38%),
        linear-gradient(145deg,#171329,#151928);
}

.gx-chaos-admin-status {
    color: #d8b4fe !important;
    background: rgba(126,34,206,.18) !important;
    border: 1px solid rgba(168,85,247,.28) !important;
}

.gx-chaos-admin-enter {
    color: #fff !important;
    border-color: rgba(168,85,247,.25) !important;
    background: linear-gradient(90deg,#7c3aed,#a855f7) !important;
    box-shadow: 0 9px 24px rgba(124,58,237,.18);
}

.gx-chaos-lobby-screen {
    padding: 82px 20px 42px;
    background:
        radial-gradient(circle at 16% 10%, rgba(124,58,237,.07), transparent 28%),
        radial-gradient(circle at 88% 55%, rgba(236,72,153,.045), transparent 32%),
        #080d17;
}

.gx-chaos-lobby-shell {
    width: min(1100px, 100%);
    margin: 0 auto;
}

.gx-chaos-lobby-hero {
    min-height: 154px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 25px 27px;
    border-radius: 22px;
    border: 1px solid rgba(139,92,246,.19);
    background:
        radial-gradient(circle at 12% 10%, rgba(124,58,237,.18), transparent 34%),
        radial-gradient(circle at 82% 100%, rgba(236,72,153,.08), transparent 38%),
        linear-gradient(135deg,#111729,#17132b);
    box-shadow: 0 22px 65px rgba(0,0,0,.24);
}

.gx-chaos-lobby-hero-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.gx-chaos-lobby-logo {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #f4e8ff;
    font-size: 29px;
    background:
        linear-gradient(145deg,rgba(124,58,237,.28),rgba(236,72,153,.12));
    border: 1px solid rgba(192,132,252,.23);
    box-shadow:
        0 15px 38px rgba(126,34,206,.18),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.gx-chaos-lobby-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gx-chaos-lobby-kicker > span {
    color: #a78bfa;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
}

.gx-chaos-lobby-kicker > b {
    padding: 5px 8px;
    border-radius: 999px;
    color: #e9d5ff;
    background: rgba(126,34,206,.14);
    border: 1px solid rgba(168,85,247,.18);
    font-size: 8px;
}

.gx-chaos-lobby-hero h1 {
    margin: 7px 0 0;
    color: #f8fafc;
    font-size: clamp(25px,3vw,37px);
    line-height: 1.12;
}

.gx-chaos-lobby-hero p {
    max-width: 650px;
    margin: 7px 0 0;
    color: #8492a9;
    font-size: 11px;
    line-height: 1.65;
}

.gx-chaos-back-hub {
    min-height: 41px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border-radius: 11px;
    border: 1px solid rgba(148,163,184,.11);
    color: #94a3b8;
    background: rgba(255,255,255,.03);
    font: 700 10px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-chaos-dev-banner {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: 15px;
    border: 1px solid rgba(168,85,247,.13);
    background: rgba(88,28,135,.055);
}

.gx-chaos-dev-banner-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #c084fc;
    background: rgba(126,34,206,.12);
    border: 1px solid rgba(168,85,247,.16);
}

.gx-chaos-dev-banner strong {
    display: block;
    color: #e9d5ff;
    font-size: 11px;
}

.gx-chaos-dev-banner span:not(.gx-chaos-build-pill) {
    display: block;
    margin-top: 2px;
    color: #716f86;
    font-size: 9px;
}

.gx-chaos-build-pill {
    padding: 6px 9px;
    border-radius: 999px;
    color: #c4b5fd;
    background: #15122a;
    border: 1px solid rgba(139,92,246,.16);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.gx-chaos-status-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    margin-top: 14px;
}

.gx-chaos-status-grid article {
    min-height: 78px;
    display: grid;
    grid-template-columns: 39px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border-radius: 15px;
    background: #101726;
    border: 1px solid rgba(148,163,184,.09);
}

.gx-chaos-status-grid .icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
}

.gx-chaos-status-grid .server {
    color: #34d399;
    background: rgba(16,185,129,.08);
}

.gx-chaos-status-grid .rooms {
    color: #60a5fa;
    background: rgba(59,130,246,.08);
}

.gx-chaos-status-grid .build {
    color: #c084fc;
    background: rgba(168,85,247,.08);
}

.gx-chaos-status-grid small {
    display: block;
    color: #596881;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
}

.gx-chaos-status-grid strong {
    display: block;
    margin-top: 3px;
    color: #dce4f0;
    font-size: 11.5px;
}

.gx-chaos-status-grid .online {
    color: #34d399;
    font-size: 7px;
}

.gx-chaos-lobby-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-top: 27px;
}

.gx-chaos-lobby-toolbar > div:first-child > span {
    display: block;
    color: #f1f5f9;
    font-size: 16px;
    font-weight: 800;
}

.gx-chaos-lobby-toolbar > div:first-child > small {
    display: block;
    margin-top: 3px;
    color: #68768c;
    font-size: 9px;
}

.gx-chaos-toolbar-actions {
    display: flex;
    gap: 8px;
}

.gx-chaos-toolbar-actions button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 10px;
    font: 700 9.5px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-chaos-refresh-btn {
    color: #93a3b9;
    border: 1px solid rgba(148,163,184,.10);
    background: rgba(255,255,255,.025);
}

.gx-chaos-create-btn {
    color: #fff;
    border: 1px solid rgba(168,85,247,.20);
    background: linear-gradient(90deg,#7c3aed,#9333ea);
    box-shadow: 0 8px 22px rgba(126,34,206,.16);
}

.gx-chaos-room-list {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}

.gx-chaos-room-card {
    min-height: 82px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 105px 130px;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 15px;
    background: #101726;
    border: 1px solid rgba(148,163,184,.09);
    transition: .17s ease;
}

.gx-chaos-room-card:hover {
    transform: translateY(-1px);
    border-color: rgba(168,85,247,.19);
    background: #111929;
}

.gx-chaos-room-card-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.gx-chaos-room-number {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #c084fc;
    background: rgba(126,34,206,.09);
    border: 1px solid rgba(168,85,247,.12);
}

.gx-chaos-room-name-line {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.gx-chaos-room-name-line strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #eef2ff;
    font-size: 12px;
}

.gx-chaos-room-name-line span {
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 999px;
    color: #a78bfa;
    background: rgba(124,58,237,.08);
    border: 1px solid rgba(139,92,246,.11);
    font-size: 7.5px;
}

.gx-chaos-room-card-main small {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: #627188;
    font-size: 8.5px;
}

.gx-chaos-room-card-main small .fa-crown {
    color: #fbbf24;
}

.gx-chaos-room-card-main small b {
    color: #344257;
}

.gx-chaos-room-capacity span {
    display: block;
    color: #5d6b80;
    font-size: 8px;
}

.gx-chaos-room-capacity strong {
    display: block;
    margin-top: 2px;
    color: #dbeafe;
    font-size: 13px;
}

.gx-chaos-room-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.gx-chaos-room-card-actions button {
    min-height: 35px;
    border-radius: 9px;
    cursor: pointer;
}

.gx-chaos-room-card-actions .open {
    padding: 0 11px;
    color: #fff;
    background: rgba(124,58,237,.78);
    border: 1px solid rgba(168,85,247,.16);
    font: 700 9px 'Kanit',sans-serif;
}

.gx-chaos-room-card-actions .delete {
    width: 35px;
    color: #fb7185;
    background: rgba(244,63,94,.06);
    border: 1px solid rgba(244,63,94,.11);
}

.gx-chaos-empty-state {
    min-height: 205px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    text-align: center;
    border-radius: 17px;
    border: 1px dashed rgba(148,163,184,.13);
    background: rgba(8,13,23,.42);
}

.gx-chaos-empty-state > span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #74698b;
    background: rgba(124,58,237,.055);
    font-size: 18px;
}

.gx-chaos-empty-state strong {
    margin-top: 11px;
    color: #98a5b9;
    font-size: 11px;
}

.gx-chaos-empty-state small {
    max-width: 430px;
    margin-top: 4px;
    color: #58667b;
    font-size: 9px;
}

.gx-chaos-empty-state button {
    margin-top: 13px;
    min-height: 35px;
    padding: 0 12px;
    border-radius: 9px;
    color: #e9d5ff;
    background: rgba(126,34,206,.10);
    border: 1px solid rgba(168,85,247,.14);
    font: 700 9px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-chaos-empty-state.error > span {
    color: #fb7185;
    background: rgba(244,63,94,.06);
}

.gx-chaos-roadmap {
    margin-top: 24px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.08);
    background: rgba(15,23,42,.46);
}

.gx-chaos-roadmap-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.gx-chaos-roadmap-title > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #a78bfa;
    background: rgba(124,58,237,.08);
}

.gx-chaos-roadmap-title strong {
    display: block;
    color: #dfe7f4;
    font-size: 10.5px;
}

.gx-chaos-roadmap-title small {
    display: block;
    margin-top: 1px;
    color: #5b697f;
    font-size: 8.5px;
}

.gx-chaos-roadmap-items {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 7px;
    margin-top: 12px;
}

.gx-chaos-roadmap-items > div {
    min-height: 37px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    border-radius: 9px;
    color: #5f6d82;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(148,163,184,.06);
    font-size: 8.5px;
}

.gx-chaos-roadmap-items > div.done {
    color: #86efac;
    border-color: rgba(34,197,94,.10);
    background: rgba(34,197,94,.035);
}

.gx-chaos-roadmap-items > div.working {
    color: #c4b5fd;
    border-color: rgba(139,92,246,.10);
    background: rgba(124,58,237,.035);
}

.gx-chaos-create-popup {
    width: min(500px,calc(100vw - 30px)) !important;
}

.gx-chaos-create-form {
    display: grid;
    gap: 9px;
    text-align: left;
}

.gx-chaos-create-form label > span {
    display: block;
    margin: 0 0 4px 5px;
    color: #8d9ab0;
    font-size: 9px;
}

.gx-chaos-create-form .swal2-input,
.gx-chaos-create-form .swal2-select {
    width: 100% !important;
    margin: 0 !important;
    min-height: 42px !important;
    color: #e2e8f0 !important;
    background: #090f1b !important;
    border: 1px solid rgba(148,163,184,.13) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font: 500 11px 'Kanit',sans-serif !important;
}

.gx-chaos-room-preview {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    text-align: left;
}

.gx-chaos-room-preview > div {
    padding: 10px 11px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(148,163,184,.08);
}

.gx-chaos-room-preview span {
    display: block;
    color: #607087;
    font-size: 8px;
}

.gx-chaos-room-preview strong {
    display: block;
    margin-top: 2px;
    color: #e2e8f0;
    font-size: 11px;
}

.gx-chaos-room-preview p {
    grid-column: 1/-1;
    margin: 3px 0 0;
    padding: 10px 11px;
    border-radius: 10px;
    color: #75839a;
    background: rgba(59,130,246,.04);
    border: 1px solid rgba(59,130,246,.07);
    font-size: 9.5px;
    line-height: 1.6;
}

.gx-danger-btn {
    background: linear-gradient(90deg,#dc2626,#f43f5e) !important;
}

@media (max-width: 760px) {
    .gx-chaos-lobby-screen {
        padding: 72px 12px 30px;
    }

    .gx-chaos-lobby-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .gx-chaos-back-hub {
        width: 100%;
        justify-content: center;
    }

    .gx-chaos-dev-banner {
        grid-template-columns: 38px 1fr;
    }

    .gx-chaos-build-pill {
        grid-column: 2;
        width: max-content;
    }

    .gx-chaos-status-grid {
        grid-template-columns: 1fr;
    }

    .gx-chaos-lobby-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .gx-chaos-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .gx-chaos-toolbar-actions button {
        justify-content: center;
    }

    .gx-chaos-room-card {
        grid-template-columns: 1fr auto;
    }

    .gx-chaos-room-capacity {
        grid-column: 2;
        grid-row: 1;
    }

    .gx-chaos-room-card-actions {
        grid-column: 1/-1;
    }

    .gx-chaos-room-card-actions .open {
        flex: 1;
    }

    .gx-chaos-roadmap-items {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .gx-chaos-lobby-hero-main {
        align-items: flex-start;
    }

    .gx-chaos-lobby-logo {
        width: 60px;
        height: 60px;
        border-radius: 18px;
        font-size: 23px;
    }

    .gx-chaos-roadmap-items {
        grid-template-columns: 1fr;
    }

    .gx-chaos-room-name-line {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   GX V26 — SIDEBAR REBUILD
   Fixes:
   - no horizontal scrolling
   - rank frame / admin badge no longer overlap
   - level + rank sit under player name
   - wallet removed from sidebar (header already has it)
   ========================================================= */

/* Off-canvas sidebar must never enlarge the document width */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

#right-sidebar-menu {
    top: 0 !important;
    right: 0 !important;

    width: min(320px, 100vw) !important;
    max-width: 100vw !important;
    height: 100dvh !important;

    padding: 20px 18px 16px !important;
    box-sizing: border-box !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;

    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22,.8,.25,1) !important;

    scrollbar-width: thin;
    scrollbar-color: rgba(59,130,246,.55) transparent;
}

#right-sidebar-menu.open {
    right: 0 !important;
    transform: translateX(0);
}

#right-sidebar-menu::-webkit-scrollbar {
    width: 5px;
    height: 0;
}

#right-sidebar-menu::-webkit-scrollbar-track {
    background: transparent;
}

#right-sidebar-menu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(59,130,246,.42);
}

#right-sidebar-menu,
#right-sidebar-menu * {
    box-sizing: border-box;
}

#right-sidebar-menu > *,
#right-sidebar-menu nav,
#right-sidebar-menu .sidebar-profile-card,
#right-sidebar-menu .menu-link-item {
    min-width: 0;
    max-width: 100%;
}

/* Main profile card — explicitly defeat old display:flex declaration */
#right-sidebar-menu .sidebar-profile-card.gx-sidebar-profile-v26 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 16px !important;

    text-align: left !important;

    border-radius: 17px !important;
    border: 1px solid rgba(148,163,184,.11) !important;
    background:
        radial-gradient(circle at 13% 8%, rgba(99,102,241,.08), transparent 34%),
        linear-gradient(145deg, rgba(24,25,43,.96), rgba(17,22,34,.96)) !important;

    overflow: hidden !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.gx-sidebar-profile-main {
    width: 100%;
    display: grid;
    grid-template-columns: 86px minmax(0,1fr);
    align-items: center;
    gap: 13px;
}

/* Avatar / rank frame */
#right-sidebar-menu .gx-sidebar-rank-frame {
    width: 82px !important;
    height: 82px !important;
    margin: 4px 0 8px !important;

    flex: none !important;
    justify-self: center;

    /* rank glow stays visual but can no longer expand page width */
    max-width: 82px;
}

#right-sidebar-menu .gx-sidebar-rank-frame .sidebar-avatar {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;

    border-radius: 19% !important;
    border: 3px solid #0b1020 !important;
}

/* Keep rank decorative emblem, but isolate it from Admin status */
#right-sidebar-menu .gx-sidebar-rank-frame .gx-rank-emblem {
    z-index: 7;
}

#right-sidebar-menu .gx-sidebar-rank-frame .gx-rank-frame-badge {
    z-index: 7;
    max-width: 78px;
}

/* The old avatar Admin shield is intentionally disabled */
#right-sidebar-menu .admin-shield-icon,
#right-sidebar-menu #sb-admin-shield {
    display: none !important;
}

/* Profile text area */
.gx-sidebar-profile-copy {
    min-width: 0;
    width: 100%;
}

#right-sidebar-menu #sb-display-ingame-name {
    width: 100%;
    margin: 0 !important;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #f8fafc;
    font-size: 17px !important;
    line-height: 1.25;
    font-weight: 800;
}

/* Level and Rank are always directly below the name */
.gx-sidebar-profile-badges {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 7px;
}

#right-sidebar-menu .gx-sidebar-profile-badges .level-badge,
#right-sidebar-menu .gx-sidebar-profile-badges .rank-badge {
    max-width: 100%;
    margin: 0 !important;
    padding: 4px 7px !important;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    border-radius: 7px !important;
    font-size: 8.5px !important;
    line-height: 1.2;
}

/* MMR + ADMIN stay in the profile text area, never on top of the avatar */
.gx-sidebar-profile-status {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 7px;
}

.gx-sidebar-mmr-chip {
    min-width: 0;
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 0 8px;
    border-radius: 8px;

    color: #8191a9;
    background: rgba(59,130,246,.055);
    border: 1px solid rgba(96,165,250,.10);
}

.gx-sidebar-mmr-chip > i {
    color: #60a5fa;
    font-size: 8px;
}

.gx-sidebar-mmr-chip > span {
    color: #66758b;
    font-size: 7px;
    font-weight: 800;
}

.gx-sidebar-mmr-chip > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;

    color: #dbeafe;
    font-size: 10px;
    font-weight: 900;
}

#right-sidebar-menu #sb-admin-badge.admin-badge {
    height: 28px;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 8px !important;

    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 5px;

    border-radius: 8px !important;
    color: #e9d5ff;
    background: rgba(124,58,237,.13) !important;
    border: 1px solid rgba(168,85,247,.18);

    font-size: 8px !important;
    line-height: 1;
    box-shadow: none !important;
}

#right-sidebar-menu #sb-admin-badge.admin-badge.hidden {
    display: none !important;
}

.gx-sidebar-rank-record {
    display: block;
    width: 100%;
    margin-top: 6px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #55637a;
    font-size: 7.5px;
}

/* Compact EXP stays useful without taking horizontal space */
.gx-sidebar-exp-row {
    width: 100%;
    margin-top: 13px;
    padding-top: 10px;
    border-top: 1px solid rgba(148,163,184,.07);
}

.gx-sidebar-exp-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    color: #536177;
    font-size: 7.5px;
}

.gx-sidebar-exp-label > span {
    font-weight: 900;
    letter-spacing: .08em;
}

#right-sidebar-menu .gx-sidebar-exp-label #sb-exp-text {
    min-width: 0;
    margin: 0 !important;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #a88942;
    text-align: right;
    font-size: 7.5px !important;
    font-weight: 700;
}

#right-sidebar-menu .gx-sidebar-exp-row .exp-bar-container {
    width: 100% !important;
    height: 4px !important;
    margin: 6px 0 0 !important;

    border-radius: 999px;
    background: rgba(255,255,255,.055);
}

/* Sidebar wallet is intentionally removed from layout in V26 */
#right-sidebar-menu .gx-sidebar-wallet {
    display: none !important;
}

/* Menu layout */
#right-sidebar-menu nav {
    width: 100%;
}

#right-sidebar-menu .menu-link-item {
    width: 100% !important;
    min-height: 50px;
    margin-bottom: 6px !important;
    padding: 0 13px !important;

    overflow: hidden;
    border-radius: 11px;
}

#right-sidebar-menu .menu-link-item > i {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
}

#right-sidebar-menu .menu-link-item > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prevent rank effects / long values from ever creating an X scrollbar */
#right-sidebar-menu .gx-rank-avatar-shell::before,
#right-sidebar-menu .gx-rank-avatar-shell::after {
    max-width: calc(100% + 10px);
}

@media (max-width: 360px) {
    #right-sidebar-menu {
        width: 100vw !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #right-sidebar-menu .sidebar-profile-card.gx-sidebar-profile-v26 {
        padding: 14px !important;
    }

    .gx-sidebar-profile-main {
        grid-template-columns: 76px minmax(0,1fr);
        gap: 11px;
    }

    #right-sidebar-menu .gx-sidebar-rank-frame {
        width: 72px !important;
        height: 72px !important;
        max-width: 72px;
    }

    #right-sidebar-menu #sb-display-ingame-name {
        font-size: 15px !important;
    }
}


/* =========================================================
   GX V26.1 — CHAOS ADMIN ACCESS HOTFIX
   ========================================================= */
#gx-chaos-game-button[data-chaos-access="admin"] {
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

#gx-chaos-game-button[data-chaos-access="admin"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

#gx-chaos-game-button:disabled {
    cursor: wait !important;
    opacity: .72 !important;
    pointer-events: none !important;
}

#gx-chaos-game-card.gx-chaos-admin-unlocked {
    position: relative;
}

#gx-chaos-game-card.gx-chaos-admin-unlocked::after {
    content: "ADMIN ACCESS";
    position: absolute;
    right: 13px;
    top: 13px;
    z-index: 5;
    padding: 4px 7px;
    border-radius: 999px;
    color: #e9d5ff;
    background: rgba(124,58,237,.20);
    border: 1px solid rgba(168,85,247,.25);
    font: 800 7px 'Kanit',sans-serif;
    letter-spacing: .08em;
    pointer-events: none;
}


/* =========================================================
   GX V27 — REPORT CENTER
   ========================================================= */
.gx-report-float-btn,
.gx-report-sidebar-btn {
    border: 0;
    font-family: 'Kanit',sans-serif;
    cursor: pointer;
}
.gx-report-float-btn {
    min-width: 112px;
    justify-content: center;
    gap: 8px;
}
.gx-report-sidebar-btn {
    width: 100%;
    min-height: 48px;
}
.gx-report-sidebar-btn i,
.gx-report-float-btn i { font-size: 12px; }

.gx-admin-report-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    color:#fff;
    background:#ef4444;
    font-size:8px;
    font-weight:900;
}

#gx-report-modal { z-index: 720000 !important; }
.gx-report-modal {
    width:min(690px,calc(100vw - 28px)) !important;
    max-width:690px !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:22px !important;
    background:#0f1626 !important;
    border:1px solid rgba(96,165,250,.15) !important;
}
.gx-report-head {
    display:grid;
    grid-template-columns:48px 1fr 36px;
    align-items:center;
    gap:12px;
    padding:17px 19px;
    border-bottom:1px solid rgba(148,163,184,.09);
    background:linear-gradient(180deg,rgba(59,130,246,.06),transparent);
}
.gx-report-head-icon {
    width:48px;height:48px;display:grid;place-items:center;border-radius:14px;
    color:#fb7185;background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.14);
}
.gx-report-head span { color:#60a5fa;font-size:8px;font-weight:900;letter-spacing:.16em; }
.gx-report-head h3 { margin:2px 0 0;color:#f8fafc;font-size:20px; }
.gx-report-head p { margin:2px 0 0;color:#68778f;font-size:9.5px; }
.gx-report-close { width:36px;height:36px;border-radius:10px;border:1px solid rgba(148,163,184,.10);background:rgba(255,255,255,.025);color:#728198;cursor:pointer; }
.gx-report-body { padding:16px 19px 18px;max-height:calc(100vh - 205px);overflow-y:auto; }
.gx-report-type-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:15px; }
.gx-report-type-grid button { min-height:74px;padding:10px 8px;border-radius:12px;border:1px solid rgba(148,163,184,.09);background:#0b1220;color:#78869c;cursor:pointer;text-align:left; }
.gx-report-type-grid button i { display:block;margin-bottom:6px;color:#66758f; }
.gx-report-type-grid button strong { display:block;color:#cbd5e1;font-size:10px; }
.gx-report-type-grid button small { display:block;margin-top:2px;color:#526076;font-size:8px; }
.gx-report-type-grid button.active { border-color:rgba(59,130,246,.30);background:rgba(37,99,235,.08);box-shadow:inset 0 0 0 1px rgba(59,130,246,.06); }
.gx-report-type-grid button.active i { color:#60a5fa; }
.gx-report-field { display:block;margin-bottom:12px; }
.gx-report-field > span { display:block;margin:0 0 5px 2px;color:#8c9ab0;font-size:9.5px; }
.gx-report-field > span b { color:#fb7185; }
.gx-report-field input,.gx-report-field textarea { width:100%;box-sizing:border-box;border-radius:11px;border:1px solid rgba(148,163,184,.12);background:#080f1b;color:#e2e8f0;outline:0;font:500 11px 'Kanit',sans-serif; }
.gx-report-field input { height:44px;padding:0 12px; }
.gx-report-field textarea { resize:vertical;min-height:120px;padding:11px 12px;line-height:1.6; }
.gx-report-field input:focus,.gx-report-field textarea:focus { border-color:rgba(59,130,246,.45);box-shadow:0 0 0 3px rgba(37,99,235,.06); }
.gx-report-field > small { display:block;margin-top:4px;text-align:right;color:#536178;font-size:8px; }
.gx-report-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.gx-report-context { display:flex;gap:9px;padding:10px 11px;border-radius:10px;background:rgba(59,130,246,.04);border:1px solid rgba(59,130,246,.08); }
.gx-report-context i { color:#60a5fa;margin-top:2px; }
.gx-report-context strong { display:block;color:#8497b1;font-size:9px; }
.gx-report-context span { display:block;margin-top:1px;color:#56657c;font-size:8px; }
.gx-report-foot { display:grid;grid-template-columns:120px 1fr;gap:8px;padding:13px 19px 17px;border-top:1px solid rgba(148,163,184,.08);background:#0d1422; }
.gx-report-foot button { min-height:43px;border-radius:10px;font:800 10px 'Kanit',sans-serif;cursor:pointer; }
.gx-report-cancel { color:#8290a5;background:rgba(255,255,255,.03);border:1px solid rgba(148,163,184,.10); }
.gx-report-submit { color:#fff;border:0;background:linear-gradient(90deg,#2563eb,#7c3aed); }
.gx-report-submit:disabled { opacity:.55;cursor:wait; }

/* Admin Report Center */
#gx-admin-report-modal { z-index:730000 !important; }
.gx-admin-report-modal { width:min(1050px,calc(100vw - 26px)) !important;max-width:1050px !important;height:min(720px,calc(100vh - 30px));padding:0 !important;overflow:hidden !important;border-radius:22px !important;background:#0d1422 !important;border:1px solid rgba(96,165,250,.14) !important; }
.gx-admin-report-head { height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(148,163,184,.09); }
.gx-admin-report-title { display:flex;align-items:center;gap:11px; }
.gx-admin-report-icon { width:43px;height:43px;display:grid;place-items:center;border-radius:12px;color:#60a5fa;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.13); }
.gx-admin-report-title > div > span { color:#60a5fa;font-size:7.5px;font-weight:900;letter-spacing:.16em; }
.gx-admin-report-title h3 { margin:2px 0 0;color:#f8fafc;font-size:18px; }
.gx-admin-report-title p { margin:0;color:#5f6d82;font-size:8.5px; }
.gx-admin-report-head > button { width:35px;height:35px;border-radius:9px;border:1px solid rgba(148,163,184,.09);background:rgba(255,255,255,.02);color:#77869c;cursor:pointer; }
.gx-admin-report-toolbar { min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;border-bottom:1px solid rgba(148,163,184,.07); }
.gx-admin-report-tabs { display:flex;gap:6px;flex-wrap:wrap; }
.gx-admin-report-tabs button,.gx-admin-report-refresh { min-height:34px;padding:0 10px;border-radius:9px;border:1px solid rgba(148,163,184,.08);background:rgba(255,255,255,.02);color:#718097;font:700 8.5px 'Kanit',sans-serif;cursor:pointer; }
.gx-admin-report-tabs button.active { color:#dbeafe;background:rgba(37,99,235,.13);border-color:rgba(59,130,246,.20); }
.gx-admin-report-tabs b { margin-left:4px;padding:1px 5px;border-radius:999px;background:rgba(255,255,255,.06);font-size:7px; }
.gx-admin-report-layout { display:grid;grid-template-columns:390px 1fr;height:calc(100% - 134px);min-height:0; }
.gx-admin-report-list { overflow-y:auto;padding:10px;border-right:1px solid rgba(148,163,184,.07); }
.gx-admin-report-item { width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;margin-bottom:7px;padding:10px;border-radius:12px;border:1px solid rgba(148,163,184,.07);background:rgba(255,255,255,.018);text-align:left;cursor:pointer; }
.gx-admin-report-item:hover,.gx-admin-report-item.selected { background:rgba(59,130,246,.045);border-color:rgba(59,130,246,.13); }
.gx-admin-report-item.unread { border-left:3px solid #3b82f6; }
.gx-admin-report-item-icon { width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:#93c5fd;background:rgba(59,130,246,.07); }
.gx-admin-report-item-icon.bug { color:#fb7185;background:rgba(244,63,94,.06); }.gx-admin-report-item-icon.player{color:#c084fc;background:rgba(168,85,247,.06)}.gx-admin-report-item-icon.payment{color:#fbbf24;background:rgba(245,158,11,.06)}.gx-admin-report-item-icon.feedback{color:#34d399;background:rgba(16,185,129,.06)}
.gx-admin-report-item-copy { min-width:0; }
.gx-admin-report-item-top { display:flex;justify-content:space-between;gap:6px; }
.gx-admin-report-item-top b { color:#61718a;font-size:7px;letter-spacing:.08em; }.gx-admin-report-item-top small{color:#48556a;font-size:7px}
.gx-admin-report-item-copy > strong { display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dce4ef;font-size:10px; }
.gx-admin-report-item-copy > small { display:block;margin-top:2px;color:#56657b;font-size:8px; }
.gx-report-status { padding:4px 6px;border-radius:999px;font-size:6.5px;font-weight:900;white-space:nowrap; }
.gx-report-status.open { color:#93c5fd;background:rgba(59,130,246,.09); }.gx-report-status.progress{color:#fcd34d;background:rgba(245,158,11,.08)}.gx-report-status.resolved{color:#86efac;background:rgba(34,197,94,.08)}
.gx-admin-report-empty,.gx-admin-report-detail-empty { min-height:180px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#56657a; }
.gx-admin-report-empty i,.gx-admin-report-detail-empty i { font-size:21px;color:#48566d; }.gx-admin-report-detail-empty strong{color:#8897ac;font-size:11px}.gx-admin-report-detail-empty span{font-size:8.5px}
.gx-admin-report-detail { overflow-y:auto;padding:18px; }
.gx-report-detail-head { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:13px;border-bottom:1px solid rgba(148,163,184,.08); }
.gx-report-detail-head > div > span { color:#53637a;font-size:7.5px; }.gx-report-detail-head h3{margin:3px 0 0;color:#f1f5f9;font-size:18px}.gx-report-detail-head p{margin:3px 0 0;color:#536176;font-size:8px}
.gx-report-detail-reporter { display:flex;gap:10px;margin-top:13px;padding:10px 11px;border-radius:11px;background:rgba(59,130,246,.035);border:1px solid rgba(59,130,246,.07); }
.gx-report-detail-reporter > i { width:32px;height:32px;display:grid;place-items:center;border-radius:9px;color:#60a5fa;background:rgba(59,130,246,.08); }.gx-report-detail-reporter span{display:block;color:#57667c;font-size:7px}.gx-report-detail-reporter strong{display:block;color:#dbe5f4;font-size:10px}.gx-report-detail-reporter small{color:#63738a;font-size:8px}
.gx-report-detail-meta { display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:10px; }.gx-report-detail-meta div{padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.018);border:1px solid rgba(148,163,184,.06)}.gx-report-detail-meta span{display:block;color:#4f5d73;font-size:7px}.gx-report-detail-meta strong{display:block;margin-top:2px;color:#9cabc0;font-size:8.5px;overflow-wrap:anywhere}
.gx-report-detail-message { margin-top:12px;padding:13px;border-radius:12px;background:#090f1a;border:1px solid rgba(148,163,184,.08); }.gx-report-detail-message > span{color:#61718a;font-size:8px}.gx-report-detail-message p{margin:6px 0 0;color:#c6d0de;font-size:10.5px;line-height:1.7}
.gx-report-detail-contact { display:flex;align-items:center;gap:7px;margin-top:9px;padding:9px 10px;border-radius:9px;color:#94a3b8;background:rgba(59,130,246,.03);font-size:9px; }
.gx-report-detail-actions { display:grid;grid-template-columns:1fr 1fr 40px;gap:7px;margin-top:13px; }.gx-report-detail-actions button{min-height:39px;border-radius:9px;font:700 8.5px 'Kanit',sans-serif;cursor:pointer}.gx-report-detail-actions .progress{color:#fcd34d;background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.12)}.gx-report-detail-actions .resolved{color:#86efac;background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.12)}.gx-report-detail-actions .delete{color:#fb7185;background:rgba(244,63,94,.06);border:1px solid rgba(244,63,94,.11)}

@media(max-width:760px){
    .gx-report-type-grid{grid-template-columns:1fr 1fr}.gx-report-grid{grid-template-columns:1fr}.gx-report-foot{grid-template-columns:1fr}
    .gx-admin-report-modal{height:calc(100dvh - 18px)}.gx-admin-report-layout{grid-template-columns:1fr;height:calc(100% - 134px)}.gx-admin-report-list{max-height:42%;border-right:0;border-bottom:1px solid rgba(148,163,184,.07)}.gx-admin-report-detail{min-height:0}.gx-report-detail-meta{grid-template-columns:1fr}.gx-admin-report-toolbar{align-items:stretch;flex-direction:column}.gx-admin-report-refresh{width:100%}
}


/* =========================================================
   GX V28 — REPORT REPLY + MAILBOX + READABILITY
   ========================================================= */

/* Bigger text in Report Center */
.gx-admin-report-modal {
    width: min(1180px, calc(100vw - 26px)) !important;
    max-width: 1180px !important;
}
.gx-admin-report-title > div > span { font-size: 9px !important; }
.gx-admin-report-title h3 { font-size: 23px !important; }
.gx-admin-report-title p { font-size: 11px !important; }
.gx-admin-report-tabs button,
.gx-admin-report-refresh { font-size: 10.5px !important; min-height: 38px !important; }
.gx-admin-report-layout { grid-template-columns: 430px 1fr !important; }
.gx-admin-report-item { min-height: 82px !important; padding: 12px !important; }
.gx-admin-report-item-top b { font-size: 8.5px !important; }
.gx-admin-report-item-top small { font-size: 8.5px !important; }
.gx-admin-report-item-copy > strong { font-size: 12px !important; }
.gx-admin-report-item-copy > small { font-size: 9.5px !important; }
.gx-report-status { font-size: 8px !important; padding: 5px 8px !important; }
.gx-report-detail-head > div > span { font-size: 9px !important; }
.gx-report-detail-head h3 { font-size: 22px !important; }
.gx-report-detail-head p { font-size: 10px !important; }
.gx-report-detail-reporter span,
.gx-report-detail-meta span { font-size: 8.5px !important; }
.gx-report-detail-reporter strong { font-size: 12px !important; }
.gx-report-detail-reporter small,
.gx-report-detail-meta strong { font-size: 10px !important; }
.gx-report-detail-message > span { font-size: 9px !important; }
.gx-report-detail-message p { font-size: 13px !important; line-height: 1.8 !important; }
.gx-report-detail-contact { font-size: 11px !important; }
.gx-report-detail-actions button { font-size: 10px !important; min-height: 42px !important; }

/* Admin reply composer */
.gx-admin-reply-history {
    margin-top: 13px;
    padding: 13px;
    border-radius: 12px;
    background: rgba(59,130,246,.035);
    border: 1px solid rgba(59,130,246,.09);
}
.gx-admin-reply-history-head {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #60a5fa;
    font-size: 10px;
    font-weight: 800;
}
.gx-admin-reply-history p {
    margin: 8px 0 0;
    color: #d2dbea;
    font-size: 12px;
    line-height: 1.7;
}
.gx-admin-reply-history small {
    display: block;
    margin-top: 6px;
    color: #63738a;
    font-size: 9px;
}
.gx-admin-reply-compose {
    margin-top: 14px;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(37,99,235,.055), rgba(124,58,237,.035));
    border: 1px solid rgba(96,165,250,.11);
}
.gx-admin-reply-compose-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 9px;
}
.gx-admin-reply-compose-head > div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
}
.gx-admin-reply-compose-head > div i { color: #60a5fa; }
.gx-admin-reply-compose-head > small { color: #66758b; font-size: 9px; }
.gx-admin-reply-compose textarea {
    width: 100%;
    min-height: 118px;
    box-sizing: border-box;
    resize: vertical;
    padding: 11px 12px;
    border-radius: 11px;
    border: 1px solid rgba(148,163,184,.12);
    outline: 0;
    color: #e2e8f0;
    background: #080f1b;
    font: 500 12px 'Kanit',sans-serif;
    line-height: 1.65;
}
.gx-admin-reply-compose textarea:focus {
    border-color: rgba(59,130,246,.42);
    box-shadow: 0 0 0 3px rgba(37,99,235,.06);
}
.gx-admin-reply-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 9px;
}
.gx-admin-reply-resolve,
.gx-admin-reply-future {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    color: #8493aa;
    background: rgba(255,255,255,.018);
    border: 1px solid rgba(148,163,184,.07);
    font-size: 9.5px;
}
.gx-admin-reply-resolve input { accent-color: #22c55e; }
.gx-admin-reply-future i { color: #fbbf24; }
.gx-admin-reply-send {
    width: 100%;
    min-height: 43px;
    margin-top: 9px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(90deg,#2563eb,#7c3aed);
    font: 800 10.5px 'Kanit',sans-serif;
    cursor: pointer;
}

/* Mailbox badge */
.gx-mailbox-unread-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: #ef4444;
    font-size: 8px;
    font-weight: 900;
}

/* GX Mailbox */
#gx-mailbox-modal { z-index: 715000 !important; }
.gx-mailbox-modal {
    width: min(1020px, calc(100vw - 26px)) !important;
    max-width: 1020px !important;
    height: min(690px, calc(100vh - 28px));
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: #0d1422 !important;
    border: 1px solid rgba(96,165,250,.14) !important;
}
.gx-mailbox-head {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 19px;
    border-bottom: 1px solid rgba(148,163,184,.09);
}
.gx-mailbox-head-main {
    display: flex;
    align-items: center;
    gap: 11px;
}
.gx-mailbox-head-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #60a5fa;
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.13);
}
.gx-mailbox-head-main > div > span {
    color: #60a5fa;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
}
.gx-mailbox-head h3 {
    margin: 1px 0 0;
    color: #f8fafc;
    font-size: 22px;
}
.gx-mailbox-head p {
    margin: 1px 0 0;
    color: #64748b;
    font-size: 10px;
}
.gx-mailbox-head > button {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.09);
    background: rgba(255,255,255,.02);
    color: #77869c;
    cursor: pointer;
}
.gx-mailbox-toolbar {
    min-height: 57px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(148,163,184,.07);
}
.gx-mailbox-tabs {
    display: flex;
    gap: 6px;
}
.gx-mailbox-tabs button,
.gx-mailbox-refresh {
    min-height: 36px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid rgba(148,163,184,.08);
    background: rgba(255,255,255,.02);
    color: #75839a;
    font: 700 10px 'Kanit',sans-serif;
    cursor: pointer;
}
.gx-mailbox-tabs button.active {
    color: #dbeafe;
    border-color: rgba(59,130,246,.20);
    background: rgba(37,99,235,.12);
}
.gx-mailbox-tabs b {
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    font-size: 8px;
}
.gx-mailbox-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    height: calc(100% - 135px);
}
.gx-mailbox-list {
    overflow-y: auto;
    padding: 10px;
    border-right: 1px solid rgba(148,163,184,.07);
}
.gx-mailbox-item {
    width: 100%;
    min-height: 84px;
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 24px;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
    padding: 11px;
    text-align: left;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.07);
    background: rgba(255,255,255,.018);
    cursor: pointer;
}
.gx-mailbox-item:hover,
.gx-mailbox-item.selected {
    border-color: rgba(59,130,246,.15);
    background: rgba(59,130,246,.045);
}
.gx-mailbox-item.unread {
    border-left: 3px solid #3b82f6;
}
.gx-mailbox-item-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #60a5fa;
    background: rgba(59,130,246,.08);
}
.gx-mailbox-item-icon.report_reply {
    color: #a78bfa;
    background: rgba(124,58,237,.08);
}
.gx-mailbox-item-icon.reward {
    color: #fbbf24;
    background: rgba(245,158,11,.08);
}
.gx-mailbox-item-copy { min-width: 0; }
.gx-mailbox-item-meta {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}
.gx-mailbox-item-meta b {
    color: #70819a;
    font-size: 8px;
}
.gx-mailbox-item-meta small {
    color: #4e5c72;
    font-size: 7.5px;
}
.gx-mailbox-item-copy > strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #dbe4f1;
    font-size: 11.5px;
}
.gx-mailbox-item-copy > small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #607087;
    font-size: 9px;
}
.gx-mailbox-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.gx-mailbox-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 10px rgba(59,130,246,.55);
}
.gx-mailbox-reward-chip {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #fbbf24;
    background: rgba(245,158,11,.08);
    font-size: 8px;
}
.gx-mailbox-detail {
    overflow-y: auto;
    padding: 18px;
}
.gx-mailbox-empty,
.gx-mailbox-detail-empty {
    height: 100%;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: #56657a;
}
.gx-mailbox-empty i,
.gx-mailbox-detail-empty i {
    font-size: 24px;
    color: #46566e;
}
.gx-mailbox-empty strong,
.gx-mailbox-detail-empty strong {
    color: #8f9db1;
    font-size: 12px;
}
.gx-mailbox-empty span,
.gx-mailbox-detail-empty span {
    font-size: 9px;
}
.gx-mailbox-letter {
    max-width: 100%;
}
.gx-mailbox-letter-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(148,163,184,.08);
}
.gx-mailbox-letter-head > div > span {
    color: #60a5fa;
    font-size: 9px;
    font-weight: 800;
}
.gx-mailbox-letter-head h3 {
    margin: 4px 0 0;
    color: #f1f5f9;
    font-size: 21px;
}
.gx-mailbox-letter-head p {
    margin: 4px 0 0;
    color: #56647a;
    font-size: 9px;
}
.gx-mailbox-letter-type {
    padding: 5px 8px;
    border-radius: 999px;
    color: #c4b5fd;
    background: rgba(124,58,237,.08);
    border: 1px solid rgba(139,92,246,.12);
    font-size: 8px;
    font-weight: 900;
}
.gx-mailbox-report-ref {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 9px 10px;
    border-radius: 9px;
    color: #71829a;
    background: rgba(59,130,246,.035);
    border: 1px solid rgba(59,130,246,.07);
    font-size: 9px;
}
.gx-mailbox-report-ref i { color: #60a5fa; }
.gx-mailbox-report-ref strong { margin-left: auto; color: #93c5fd; }
.gx-mailbox-letter-message {
    margin-top: 13px;
    padding: 15px;
    border-radius: 12px;
    color: #d4ddeb;
    background: #090f1a;
    border: 1px solid rgba(148,163,184,.08);
    font-size: 13px;
    line-height: 1.85;
}
.gx-mailbox-letter-foot {
    display: flex;
    gap: 7px;
    margin-top: 12px;
    color: #516077;
    font-size: 8.5px;
}
.gx-mailbox-letter-foot i { color: #60a5fa; }

.gx-mailbox-attachments {
    margin-top: 13px;
    padding: 13px;
    border-radius: 13px;
    background: linear-gradient(145deg,rgba(245,158,11,.055),rgba(124,58,237,.03));
    border: 1px solid rgba(245,158,11,.11);
}
.gx-mailbox-attachments-head {
    display: flex;
    gap: 8px;
    align-items: center;
}
.gx-mailbox-attachments-head > i { color: #fbbf24; }
.gx-mailbox-attachments-head strong {
    display: block;
    color: #fde68a;
    font-size: 11px;
}
.gx-mailbox-attachments-head small {
    display: block;
    margin-top: 1px;
    color: #756b5a;
    font-size: 8.5px;
}
.gx-mailbox-attachment-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    margin-top: 10px;
}
.gx-mailbox-attachment-list > div {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 7px 9px;
    border-radius: 9px;
    background: rgba(255,255,255,.022);
    border: 1px solid rgba(148,163,184,.06);
}
.gx-mailbox-attachment-list i { color: #fbbf24; }
.gx-mailbox-attachment-list span { color: #8493a7; font-size: 9px; }
.gx-mailbox-attachment-list strong { color: #f8fafc; font-size: 10px; }
.gx-mailbox-claim-btn {
    width: 100%;
    min-height: 40px;
    margin-top: 9px;
    border-radius: 9px;
    color: #111827;
    background: linear-gradient(90deg,#fbbf24,#f59e0b);
    border: 0;
    font: 900 10px 'Kanit',sans-serif;
    cursor: pointer;
}
.gx-mailbox-claim-btn:disabled {
    color: #86efac;
    background: rgba(34,197,94,.08);
    border: 1px solid rgba(34,197,94,.12);
    cursor: default;
}

@media(max-width:760px) {
    .gx-admin-report-layout { grid-template-columns: 1fr !important; }
    .gx-admin-reply-tools { grid-template-columns: 1fr; }
    .gx-admin-report-list { max-height: 39%; }

    .gx-mailbox-modal { height: calc(100dvh - 18px); }
    .gx-mailbox-toolbar { align-items: stretch; flex-direction: column; }
    .gx-mailbox-tabs { display: grid; grid-template-columns: repeat(3,1fr); }
    .gx-mailbox-refresh { width: 100%; }
    .gx-mailbox-layout { grid-template-columns: 1fr; height: calc(100% - 178px); }
    .gx-mailbox-list { max-height: 40%; border-right: 0; border-bottom: 1px solid rgba(148,163,184,.07); }
    .gx-mailbox-attachment-list { grid-template-columns: 1fr; }
}


/* =========================================================
   GX V29 — READABILITY / CLEAN REPORT UI / COIN REWARD
   ========================================================= */

/* ---------- Report form ---------- */
.gx-report-modal {
    width: min(780px, calc(100vw - 28px)) !important;
    max-width: 780px !important;
}
.gx-report-head { padding: 21px 23px !important; }
.gx-report-head-icon { width: 56px !important; height: 56px !important; font-size: 18px !important; }
.gx-report-head > div > span { font-size: 11px !important; }
.gx-report-head h3 { font-size: 27px !important; line-height: 1.2 !important; }
.gx-report-head p { font-size: 13px !important; line-height: 1.55 !important; }
.gx-report-body { padding: 21px 23px 23px !important; }
.gx-report-type-grid { gap: 10px !important; margin-bottom: 20px !important; }
.gx-report-type-grid button { min-height: 92px !important; padding: 14px 13px !important; }
.gx-report-type-grid button i { font-size: 17px !important; }
.gx-report-type-grid button strong { font-size: 14px !important; }
.gx-report-type-grid button small { font-size: 11px !important; line-height: 1.4 !important; }
.gx-report-field > span { font-size: 13px !important; margin-bottom: 7px !important; }
.gx-report-field input { height: 50px !important; padding: 0 14px !important; font-size: 14px !important; }
.gx-report-field textarea { min-height: 150px !important; padding: 14px !important; font-size: 14px !important; line-height: 1.75 !important; }
.gx-report-field > small { font-size: 10px !important; }
.gx-report-context { padding: 13px !important; }
.gx-report-context strong { font-size: 12px !important; }
.gx-report-context span { font-size: 11px !important; line-height: 1.5 !important; }
.gx-report-foot button { min-height: 49px !important; font-size: 13px !important; }

/* ---------- Admin Report Center ---------- */
.gx-admin-report-modal {
    width: min(1260px, calc(100vw - 28px)) !important;
    max-width: 1260px !important;
    height: min(800px, calc(100dvh - 28px)) !important;
}
.gx-admin-report-head { height: 90px !important; padding: 0 23px !important; }
.gx-admin-report-icon { width: 50px !important; height: 50px !important; font-size: 16px !important; }
.gx-admin-report-title > div > span { font-size: 10.5px !important; }
.gx-admin-report-title h3 { font-size: 27px !important; }
.gx-admin-report-title p { font-size: 12px !important; }
.gx-admin-report-toolbar { min-height: 67px !important; padding: 11px 16px !important; }
.gx-admin-report-tabs button, .gx-admin-report-refresh {
    min-height: 41px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
}
.gx-admin-report-tabs b { font-size: 9px !important; }
.gx-admin-report-layout {
    grid-template-columns: 390px minmax(0,1fr) !important;
    height: calc(100% - 157px) !important;
}
.gx-admin-report-list { padding: 12px !important; }
.gx-admin-report-item {
    min-height: 94px !important;
    padding: 14px !important;
    gap: 11px !important;
}
.gx-admin-report-item-icon { width: 45px !important; height: 45px !important; font-size: 16px !important; }
.gx-admin-report-item-top b, .gx-admin-report-item-top small { font-size: 9.5px !important; }
.gx-admin-report-item-copy > strong { margin-top: 5px !important; font-size: 14px !important; }
.gx-admin-report-item-copy > small { margin-top: 4px !important; font-size: 11px !important; }
.gx-report-status { padding: 6px 9px !important; font-size: 9px !important; }

.gx-admin-report-detail { padding: 23px !important; }
.gx-report-detail-head { padding-bottom: 17px !important; }
.gx-report-detail-head > div > span { font-size: 10px !important; }
.gx-report-detail-head h3 { font-size: 27px !important; line-height: 1.25 !important; }
.gx-report-detail-head p { font-size: 11px !important; }

.gx-report-detail-reporter {
    margin-top: 15px !important;
    padding: 14px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg,rgba(59,130,246,.06),rgba(59,130,246,.025)) !important;
}
.gx-report-detail-reporter > i { width: 42px !important; height: 42px !important; font-size: 15px !important; }
.gx-report-detail-reporter span { font-size: 10px !important; }
.gx-report-detail-reporter strong { font-size: 14px !important; }
.gx-report-detail-reporter small { font-size: 11px !important; }

.gx-report-detail-meta {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 9px !important;
    margin-top: 11px !important;
}
.gx-report-detail-meta > div {
    min-height: 68px;
    padding: 12px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 11px !important;
}
.gx-report-detail-meta span { font-size: 9.5px !important; }
.gx-report-detail-meta strong { margin-top: 5px !important; font-size: 11.5px !important; }

.gx-report-detail-message { margin-top: 14px !important; padding: 17px !important; }
.gx-report-detail-message > span { font-size: 10px !important; }
.gx-report-detail-message p { margin-top: 8px !important; font-size: 14px !important; line-height: 1.85 !important; }
.gx-report-detail-contact { min-height: 43px; padding: 10px 12px !important; font-size: 12px !important; }
.gx-report-detail-actions button { min-height: 44px !important; font-size: 11px !important; }

/* Cleaner reply card */
.gx-admin-reply-compose {
    margin-top: 16px !important;
    padding: 17px !important;
    border-radius: 15px !important;
}
.gx-admin-reply-compose-head > div { font-size: 13px !important; }
.gx-admin-reply-compose-head > small { font-size: 10px !important; }
.gx-admin-reply-compose textarea {
    min-height: 138px !important;
    padding: 14px !important;
    font-size: 14px !important;
}
.gx-admin-reply-options {
    display: grid;
    grid-template-columns: minmax(230px,.72fr) minmax(360px,1.28fr);
    gap: 10px;
    margin-top: 11px;
}
.gx-admin-reply-resolve {
    min-height: 110px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px !important;
    border-radius: 12px !important;
}
.gx-admin-reply-resolve > span:last-child strong {
    display: block;
    color: #dbe4f1;
    font-size: 13px;
}
.gx-admin-reply-resolve > span:last-child small {
    display: block;
    margin-top: 4px;
    color: #66758b;
    font-size: 10.5px;
    line-height: 1.5;
}
.gx-switch-ui {
    position: relative;
    width: 44px;
    height: 25px;
    flex: 0 0 44px;
}
.gx-switch-ui input { position: absolute; opacity: 0; pointer-events: none; }
.gx-switch-ui i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #1e293b;
    border: 1px solid rgba(148,163,184,.13);
}
.gx-switch-ui i::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 2.5px;
    border-radius: 50%;
    background: #94a3b8;
    transition: .18s ease;
}
.gx-switch-ui input:checked + i {
    background: rgba(34,197,94,.22);
    border-color: rgba(34,197,94,.32);
}
.gx-switch-ui input:checked + i::after {
    transform: translateX(19px);
    background: #4ade80;
}

.gx-admin-reward-box {
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(245,158,11,.06),rgba(255,255,255,.012));
    border: 1px solid rgba(245,158,11,.13);
}
.gx-admin-reward-head { display: flex; align-items: center; gap: 10px; }
.gx-admin-reward-icon {
    width: 40px; height: 40px; flex: 0 0 40px;
    display: grid; place-items: center;
    border-radius: 10px;
    color: #fbbf24;
    background: rgba(245,158,11,.08);
}
.gx-admin-reward-head strong { display: block; color: #fde68a; font-size: 13px; }
.gx-admin-reward-head small { display: block; margin-top: 2px; color: #806f52; font-size: 10px; }
.gx-admin-coin-field {
    display: grid;
    grid-template-columns: 1fr 135px;
    align-items: center;
    gap: 9px;
    margin-top: 11px;
}
.gx-admin-coin-field > span { color: #a38f68; font-size: 11px; }
.gx-admin-coin-field > span i { color: #fbbf24; }
.gx-admin-coin-field input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 9px;
    outline: 0;
    color: #fde68a;
    background: #090f19;
    border: 1px solid rgba(245,158,11,.15);
    font: 800 13px 'Kanit',sans-serif;
}
.gx-admin-coin-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.gx-admin-coin-presets button {
    min-height: 33px;
    padding: 0 10px;
    border-radius: 8px;
    color: #bea46d;
    background: rgba(245,158,11,.04);
    border: 1px solid rgba(245,158,11,.12);
    font: 700 10px 'Kanit',sans-serif;
    cursor: pointer;
}
.gx-admin-reply-send { min-height: 49px !important; font-size: 13px !important; }
.gx-admin-reply-history p { font-size: 14px !important; line-height: 1.75 !important; }
.gx-admin-reply-history small { font-size: 10px !important; }
.gx-admin-reply-history-reward {
    width: max-content;
    max-width: 100%;
    margin-top: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    color: #fbbf24;
    background: rgba(245,158,11,.055);
    border: 1px solid rgba(245,158,11,.10);
    font-size: 11px;
    font-weight: 800;
}

/* ---------- Mailbox ---------- */
.gx-mailbox-modal {
    width: min(1140px, calc(100vw - 28px)) !important;
    max-width: 1140px !important;
    height: min(770px, calc(100dvh - 28px)) !important;
}
.gx-mailbox-head { height: 90px !important; padding: 0 23px !important; }
.gx-mailbox-head-icon { width: 50px !important; height: 50px !important; font-size: 16px !important; }
.gx-mailbox-head-main > div > span { font-size: 10.5px !important; }
.gx-mailbox-head h3 { font-size: 27px !important; }
.gx-mailbox-head p { font-size: 12px !important; }
.gx-mailbox-toolbar { min-height: 66px !important; padding: 10px 16px !important; }
.gx-mailbox-tabs button, .gx-mailbox-refresh {
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
}
.gx-mailbox-tabs b { font-size: 9px !important; }
.gx-mailbox-layout {
    grid-template-columns: 400px minmax(0,1fr) !important;
    height: calc(100% - 156px) !important;
}
.gx-mailbox-list { padding: 12px !important; }
.gx-mailbox-item { min-height: 96px !important; padding: 14px !important; gap: 11px !important; }
.gx-mailbox-item-icon { width: 46px !important; height: 46px !important; font-size: 16px !important; }
.gx-mailbox-item-meta b { font-size: 10px !important; }
.gx-mailbox-item-meta small { font-size: 9.5px !important; }
.gx-mailbox-item-copy > strong { margin-top: 5px !important; font-size: 14px !important; }
.gx-mailbox-item-copy > small { margin-top: 5px !important; font-size: 11px !important; }
.gx-mailbox-detail { padding: 23px !important; }
.gx-mailbox-letter-head > div:first-child > span { font-size: 10.5px !important; }
.gx-mailbox-letter-head h3 { font-size: 27px !important; line-height: 1.25 !important; }
.gx-mailbox-letter-head p { font-size: 10.5px !important; }
.gx-mailbox-letter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.gx-mailbox-letter-type { padding: 6px 9px !important; font-size: 9.5px !important; }
.gx-mailbox-delete-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fb7185;
    background: rgba(244,63,94,.055);
    border: 1px solid rgba(244,63,94,.12);
    cursor: pointer;
}
.gx-mailbox-delete-btn:hover {
    background: rgba(244,63,94,.11);
    border-color: rgba(244,63,94,.22);
}
.gx-mailbox-report-ref { min-height: 44px !important; padding: 10px 12px !important; font-size: 11px !important; }
.gx-mailbox-letter-message {
    padding: 18px !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
}
.gx-mailbox-letter-foot { font-size: 10px !important; }
.gx-mailbox-attachments { padding: 15px !important; }
.gx-mailbox-attachments-head strong { font-size: 14px !important; }
.gx-mailbox-attachments-head small { font-size: 10.5px !important; }
.gx-mailbox-attachment-list span { font-size: 11.5px !important; }
.gx-mailbox-attachment-list strong { font-size: 13px !important; }
.gx-mailbox-claim-btn { min-height: 46px !important; font-size: 13px !important; }

/* Make user mail deletion warnings readable too */
.gx-mail-delete-alert,
.gx-mail-claim-alert {
    font-size: 14px !important;
}

@media (max-width: 1000px) {
    .gx-report-detail-meta { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .gx-admin-reply-options { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
    .gx-admin-report-layout,
    .gx-mailbox-layout { grid-template-columns: 1fr !important; }

    .gx-report-detail-meta { grid-template-columns: 1fr !important; }
    .gx-admin-report-list,
    .gx-mailbox-list { max-height: 40% !important; }

    .gx-mailbox-letter-head { align-items: flex-start !important; }
}


/* =========================================================
   GX V29.1 — REPORT SUBMIT BUTTON VISIBILITY HOTFIX
   Header and footer stay fixed inside the modal;
   only the form body scrolls.
   ========================================================= */

#gx-report-modal.gx-report-overlay {
    padding: 14px !important;
    overflow: hidden !important;
}

#gx-report-modal .gx-report-modal {
    width: min(780px, calc(100vw - 28px)) !important;
    max-width: 780px !important;

    /* Critical fix */
    height: auto !important;
    max-height: calc(100dvh - 28px) !important;
    overflow: hidden !important;

    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;

    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Header never scrolls away */
#gx-report-modal .gx-report-head {
    grid-row: 1;
    position: relative;
    z-index: 3;
    flex: none;
}

/* Only this section is allowed to scroll */
#gx-report-modal .gx-report-body {
    grid-row: 2;

    min-height: 0 !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;

    scrollbar-width: thin;
    scrollbar-color: rgba(59,130,246,.70) transparent;
}

#gx-report-modal .gx-report-body::-webkit-scrollbar {
    width: 6px;
}
#gx-report-modal .gx-report-body::-webkit-scrollbar-track {
    background: transparent;
}
#gx-report-modal .gx-report-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(59,130,246,.58);
}

/* Footer — Cancel + Send Report — is always visible */
#gx-report-modal .gx-report-foot {
    grid-row: 3;

    position: relative !important;
    z-index: 5;

    flex: none;
    margin: 0 !important;

    padding: 14px 22px 18px !important;
    background:
        linear-gradient(180deg, rgba(13,20,34,.94), #0d1422 22%) !important;
    border-top: 1px solid rgba(148,163,184,.11) !important;

    box-shadow: 0 -14px 30px rgba(4,8,16,.18);
}

#gx-report-modal .gx-report-cancel,
#gx-report-modal .gx-report-submit {
    min-height: 50px !important;
    font-size: 13px !important;
}

#gx-report-modal .gx-report-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    box-shadow: 0 10px 26px rgba(79,70,229,.18);
}

@media (max-height: 820px) {
    #gx-report-modal .gx-report-modal {
        max-height: calc(100dvh - 18px) !important;
    }

    #gx-report-modal .gx-report-head {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    #gx-report-modal .gx-report-body {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    #gx-report-modal .gx-report-type-grid button {
        min-height: 78px !important;
    }

    #gx-report-modal .gx-report-field textarea {
        min-height: 122px !important;
    }
}

@media (max-width: 760px) {
    #gx-report-modal.gx-report-overlay {
        padding: 8px !important;
        align-items: center !important;
    }

    #gx-report-modal .gx-report-modal {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 18px !important;
    }

    #gx-report-modal .gx-report-head {
        padding: 15px 16px !important;
        grid-template-columns: 46px minmax(0,1fr) 36px !important;
    }

    #gx-report-modal .gx-report-head-icon {
        width: 46px !important;
        height: 46px !important;
    }

    #gx-report-modal .gx-report-head h3 {
        font-size: 22px !important;
    }

    #gx-report-modal .gx-report-head p {
        font-size: 11px !important;
    }

    #gx-report-modal .gx-report-body {
        padding: 15px 16px !important;
    }

    #gx-report-modal .gx-report-foot {
        grid-template-columns: 110px minmax(0,1fr) !important;
        padding: 11px 16px 14px !important;
    }
}

@media (max-width: 460px) {
    #gx-report-modal .gx-report-type-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    #gx-report-modal .gx-report-grid {
        grid-template-columns: 1fr !important;
    }

    #gx-report-modal .gx-report-foot {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   GX V29.2 — ADMIN REPORT RESOLVE TOGGLE HOTFIX
   Replaces the broken checkbox visual with a real button.
   ========================================================= */

.gx-admin-reply-options .gx-admin-resolve-card {
    min-height: 0 !important;
    height: auto !important;

    display: block !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}

.gx-admin-resolve-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

.gx-admin-resolve-toggle {
    width: 100%;
    min-height: 110px;

    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;

    padding: 15px;

    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.08);

    color: #cbd5e1;
    background:
        linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.012));

    font-family: 'Kanit', sans-serif;
    text-align: left;

    cursor: pointer;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.gx-admin-resolve-toggle:hover {
    border-color: rgba(96,165,250,.18);
    background:
        linear-gradient(145deg, rgba(59,130,246,.045), rgba(255,255,255,.015));
}

.gx-admin-resolve-toggle:active {
    transform: scale(.995);
}

.gx-admin-resolve-toggle:focus-visible {
    outline: none;
    border-color: rgba(96,165,250,.48);
    box-shadow: 0 0 0 3px rgba(59,130,246,.09);
}

/* Switch track */
.gx-admin-resolve-switch {
    position: relative;

    width: 48px;
    height: 28px;

    display: block;

    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.15);

    background: #1a2333;

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.35);

    transition: .2s ease;
}

/* Switch knob */
.gx-admin-resolve-knob {
    position: absolute;

    width: 20px;
    height: 20px;

    left: 3px;
    top: 3px;

    display: block;

    border-radius: 50%;

    background: #94a3b8;

    box-shadow:
        0 2px 6px rgba(0,0,0,.35);

    transition:
        transform .2s ease,
        background .2s ease;
}

.gx-admin-resolve-copy {
    min-width: 0;
    display: block;
}

.gx-admin-resolve-copy strong {
    display: block;

    color: #dce5f2;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.gx-admin-resolve-copy small {
    display: block;

    margin-top: 4px;

    color: #69788e;

    font-size: 10.5px;
    line-height: 1.45;
}

.gx-admin-resolve-state {
    min-width: 42px;

    padding: 5px 8px;

    border-radius: 999px;

    color: #8290a5;
    background: rgba(148,163,184,.06);
    border: 1px solid rgba(148,163,184,.08);

    font-size: 9px;
    font-weight: 800;
    text-align: center;

    transition: .2s ease;
}

/* ON */
.gx-admin-resolve-toggle[data-enabled="true"] {
    border-color: rgba(34,197,94,.20);

    background:
        linear-gradient(145deg, rgba(34,197,94,.07), rgba(16,185,129,.025));

    box-shadow:
        inset 0 0 0 1px rgba(34,197,94,.025);
}

.gx-admin-resolve-toggle[data-enabled="true"] .gx-admin-resolve-switch {
    border-color: rgba(34,197,94,.32);
    background: rgba(34,197,94,.23);
}

.gx-admin-resolve-toggle[data-enabled="true"] .gx-admin-resolve-knob {
    transform: translateX(20px);
    background: #4ade80;

    box-shadow:
        0 0 12px rgba(74,222,128,.26),
        0 2px 5px rgba(0,0,0,.25);
}

.gx-admin-resolve-toggle[data-enabled="true"] .gx-admin-resolve-copy strong {
    color: #dcfce7;
}

.gx-admin-resolve-toggle[data-enabled="true"] .gx-admin-resolve-state {
    color: #86efac;
    background: rgba(34,197,94,.08);
    border-color: rgba(34,197,94,.13);
}

/* Disable the old V29 pseudo switch completely if any stale markup survives */
.gx-admin-reply-options .gx-switch-ui {
    display: none !important;
}

@media (max-width: 1000px) {
    .gx-admin-resolve-toggle {
        min-height: 92px;
    }
}

@media (max-width: 520px) {
    .gx-admin-resolve-toggle {
        grid-template-columns: 46px minmax(0,1fr);
        min-height: 96px;
    }

    .gx-admin-resolve-state {
        grid-column: 2;
        width: max-content;
        min-width: 40px;
        margin-top: -3px;
    }
}

/* =========================================================
   GX V30 — TICKET SUPPORT + ADMIN MAIL / REWARD
   ========================================================= */

/* ---------- Sidebar Ticket ---------- */
.gx-ticket-unread-count {
    margin-left: auto;
    min-width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    color: #fff;
    background: #ef4444;
    font-size: 9px;
    font-weight: 900;
}

/* ---------- Ticket modal ---------- */
#gx-ticket-modal { z-index: 716000 !important; }
#gx-ticket-create-modal { z-index: 717000 !important; }

.gx-ticket-modal {
    width: min(1120px, calc(100vw - 28px)) !important;
    max-width: 1120px !important;
    height: min(760px, calc(100dvh - 28px));
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: #0d1422 !important;
    border: 1px solid rgba(96,165,250,.14) !important;
}

.gx-ticket-head {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(148,163,184,.09);
}

.gx-ticket-head-main,
.gx-ticket-head-actions {
    display: flex;
    align-items: center;
    gap: 11px;
}

.gx-ticket-head-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #60a5fa;
    background: rgba(59,130,246,.09);
    border: 1px solid rgba(59,130,246,.14);
    font-size: 17px;
}

.gx-ticket-head-main > div > span {
    color: #60a5fa;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;
}

.gx-ticket-head h3 {
    margin: 1px 0 0;
    color: #f8fafc;
    font-size: 25px;
}

.gx-ticket-head p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 11px;
}

.gx-ticket-new-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid rgba(59,130,246,.17);
    color: #dbeafe;
    background: rgba(37,99,235,.12);
    font: 800 11px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-ticket-close-modal {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.09);
    color: #7d8ca1;
    background: rgba(255,255,255,.02);
    cursor: pointer;
}

.gx-ticket-toolbar {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(148,163,184,.07);
}

.gx-ticket-filter-tabs {
    display: flex;
    gap: 6px;
}

.gx-ticket-filter-tabs button {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 9px;
    color: #718199;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(148,163,184,.08);
    font: 700 11px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-ticket-filter-tabs button.active {
    color: #dbeafe;
    background: rgba(37,99,235,.12);
    border-color: rgba(59,130,246,.20);
}

.gx-ticket-filter-tabs b {
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    font-size: 8px;
}

.gx-ticket-live-state {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #34d399;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .07em;
}

.gx-ticket-live-state i {
    font-size: 7px;
    filter: drop-shadow(0 0 6px rgba(52,211,153,.65));
}

.gx-ticket-layout {
    display: grid;
    grid-template-columns: 385px minmax(0,1fr);
    height: calc(100% - 148px);
    min-height: 0;
}

.gx-ticket-list {
    min-width: 0;
    overflow-y: auto;
    padding: 11px;
    border-right: 1px solid rgba(148,163,184,.07);
}

.gx-ticket-item {
    width: 100%;
    min-height: 92px;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    padding: 12px;
    border-radius: 13px;
    border: 1px solid rgba(148,163,184,.07);
    color: inherit;
    background: rgba(255,255,255,.018);
    text-align: left;
    cursor: pointer;
}

.gx-ticket-item:hover,
.gx-ticket-item.selected {
    background: rgba(59,130,246,.045);
    border-color: rgba(59,130,246,.16);
}

.gx-ticket-item.unread {
    border-left: 3px solid #3b82f6;
}

.gx-ticket-item-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #60a5fa;
    background: rgba(59,130,246,.08);
}

.gx-ticket-item-copy { min-width: 0; }
.gx-ticket-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gx-ticket-item-top b {
    color: #71839d;
    font-size: 9px;
}

.gx-ticket-item-top small {
    color: #4e5c72;
    font-size: 8px;
}

.gx-ticket-item-copy > strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e2e8f0;
    font-size: 13px;
}

.gx-ticket-item-copy > small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #607087;
    font-size: 10px;
}

.gx-ticket-item-status {
    min-width: 45px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.gx-ticket-item-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 10px rgba(59,130,246,.55);
}

.gx-ticket-item-status b {
    padding: 4px 6px;
    border-radius: 999px;
    color: #86efac;
    background: rgba(34,197,94,.07);
    font-size: 7px;
}

.gx-ticket-detail {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    overflow: hidden;
}

.gx-ticket-detail-empty,
.gx-ticket-empty {
    min-height: 170px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 18px;
    color: #56657a;
    text-align: center;
}

.gx-ticket-detail-empty i,
.gx-ticket-empty i {
    color: #52637b;
    font-size: 24px;
}

.gx-ticket-detail-empty strong,
.gx-ticket-empty strong {
    color: #91a0b4;
    font-size: 13px;
}

.gx-ticket-detail-empty span,
.gx-ticket-empty span {
    font-size: 10px;
}

.gx-ticket-detail-empty.closed i { color: #4ade80; }

.gx-ticket-chat-head {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(148,163,184,.08);
}

.gx-ticket-chat-head > div:first-child > span {
    color: #52647e;
    font-size: 8px;
}

.gx-ticket-chat-head h3 {
    margin: 3px 0 0;
    color: #f1f5f9;
    font-size: 18px;
}

.gx-ticket-chat-head p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 10px;
}

.gx-ticket-chat-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gx-ticket-open-pill {
    padding: 5px 8px;
    border-radius: 999px;
    color: #86efac;
    background: rgba(34,197,94,.07);
    border: 1px solid rgba(34,197,94,.11);
    font-size: 8px;
    font-weight: 900;
}

.gx-ticket-admin-close-btn {
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 9px;
    color: #fecaca;
    background: rgba(239,68,68,.07);
    border: 1px solid rgba(239,68,68,.13);
    font: 800 9px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-ticket-message-list {
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    background:
        radial-gradient(circle at 80% 0%, rgba(59,130,246,.035), transparent 30%),
        #0a111e;
}

.gx-ticket-message-loading {
    min-height: 100%;
    display: grid;
    place-items: center;
    color: #526177;
    font-size: 10px;
}

.gx-ticket-message-row {
    display: flex;
    justify-content: flex-start;
    margin: 8px 0;
}

.gx-ticket-message-row.mine {
    justify-content: flex-end;
}

.gx-ticket-message-bubble {
    max-width: min(74%, 620px);
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.08);
    background: #111a29;
}

.gx-ticket-message-row.mine .gx-ticket-message-bubble {
    border-color: rgba(59,130,246,.14);
    background: linear-gradient(145deg, rgba(37,99,235,.15), rgba(124,58,237,.09));
}

.gx-ticket-message-bubble.admin {
    box-shadow: inset 3px 0 0 rgba(139,92,246,.55);
}

.gx-ticket-message-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gx-ticket-message-meta strong {
    color: #cbd5e1;
    font-size: 9px;
}

.gx-ticket-message-meta span {
    padding: 2px 5px;
    border-radius: 999px;
    color: #c4b5fd;
    background: rgba(124,58,237,.08);
    font-size: 6.5px;
    font-weight: 900;
}

.gx-ticket-message-meta small {
    margin-left: auto;
    color: #4d5d74;
    font-size: 7.5px;
}

.gx-ticket-message-bubble p {
    margin: 6px 0 0;
    color: #d5deeb;
    font-size: 11.5px;
    line-height: 1.7;
}

.gx-ticket-compose {
    display: grid;
    grid-template-columns: minmax(0,1fr) 86px;
    gap: 8px;
    padding: 11px 13px 13px;
    border-top: 1px solid rgba(148,163,184,.08);
    background: #0d1422;
}

.gx-ticket-compose textarea {
    width: 100%;
    min-height: 52px;
    max-height: 120px;
    box-sizing: border-box;
    resize: none;
    padding: 10px 11px;
    border-radius: 10px;
    outline: 0;
    color: #e2e8f0;
    background: #080f1b;
    border: 1px solid rgba(148,163,184,.12);
    font: 500 11px 'Kanit',sans-serif;
}

.gx-ticket-compose textarea:focus {
    border-color: rgba(59,130,246,.42);
}

.gx-ticket-compose button {
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg,#2563eb,#7c3aed);
    font: 800 10px 'Kanit',sans-serif;
    cursor: pointer;
}

/* Create Ticket */
.gx-ticket-create-modal {
    width: min(600px, calc(100vw - 28px)) !important;
    max-width: 600px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: #0f1626 !important;
    border: 1px solid rgba(96,165,250,.14) !important;
}

.gx-ticket-create-head {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(148,163,184,.08);
}

.gx-ticket-create-head > div {
    display: flex;
    align-items: center;
    gap: 11px;
}

.gx-ticket-create-head > div > span {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #60a5fa;
    background: rgba(59,130,246,.08);
}

.gx-ticket-create-head b {
    color: #60a5fa;
    font-size: 8px;
    letter-spacing: .12em;
}

.gx-ticket-create-head h3 {
    margin: 2px 0 0;
    color: #f8fafc;
    font-size: 20px;
}

.gx-ticket-create-head p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 9.5px;
}

.gx-ticket-create-head > button {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(148,163,184,.09);
    color: #718097;
    background: rgba(255,255,255,.02);
    cursor: pointer;
}

.gx-ticket-create-body {
    padding: 17px 18px;
}

.gx-ticket-field {
    display: block;
    margin-bottom: 12px;
}

.gx-ticket-field > span {
    display: block;
    margin: 0 0 6px 2px;
    color: #8c9ab0;
    font-size: 10.5px;
}

.gx-ticket-field input,
.gx-ticket-field select,
.gx-ticket-field textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.12);
    outline: 0;
    color: #e2e8f0;
    background: #080f1b;
    font: 500 11px 'Kanit',sans-serif;
}

.gx-ticket-field input,
.gx-ticket-field select {
    height: 44px;
    padding: 0 11px;
}

.gx-ticket-field textarea {
    min-height: 120px;
    padding: 11px;
    resize: vertical;
    line-height: 1.65;
}

.gx-ticket-create-info {
    display: flex;
    gap: 9px;
    padding: 11px;
    border-radius: 10px;
    color: #6f8098;
    background: rgba(59,130,246,.04);
    border: 1px solid rgba(59,130,246,.08);
}

.gx-ticket-create-info i { color: #60a5fa; }
.gx-ticket-create-info strong {
    display: block;
    color: #8fa5c3;
    font-size: 10px;
}
.gx-ticket-create-info span {
    display: block;
    margin-top: 2px;
    font-size: 8.5px;
}

.gx-ticket-create-foot {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px;
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(148,163,184,.08);
}

.gx-ticket-create-foot button {
    min-height: 43px;
    border-radius: 10px;
    font: 800 10px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-ticket-create-foot button:first-child {
    color: #8290a5;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(148,163,184,.09);
}

.gx-ticket-create-foot button:last-child {
    color: #fff;
    border: 0;
    background: linear-gradient(90deg,#2563eb,#7c3aed);
}

/* ---------- Report Center toolbar actions ---------- */
.gx-admin-report-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.gx-admin-broadcast-open {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 9px;
    color: #fde68a;
    background: rgba(245,158,11,.07);
    border: 1px solid rgba(245,158,11,.13);
    font: 800 10px 'Kanit',sans-serif;
    cursor: pointer;
}

/* ---------- Admin Broadcast ---------- */
#gx-admin-broadcast-modal { z-index: 735000 !important; }

.gx-admin-broadcast-modal {
    width: min(900px, calc(100vw - 28px)) !important;
    max-width: 900px !important;
    max-height: calc(100dvh - 28px);
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) auto;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: #0e1524 !important;
    border: 1px solid rgba(96,165,250,.14) !important;
}

.gx-admin-broadcast-head {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    padding: 14px 19px;
    border-bottom: 1px solid rgba(148,163,184,.08);
}

.gx-admin-broadcast-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.gx-admin-broadcast-title > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fbbf24;
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.13);
}

.gx-admin-broadcast-title b {
    color: #fbbf24;
    font-size: 8px;
    letter-spacing: .13em;
}

.gx-admin-broadcast-title h3 {
    margin: 2px 0 0;
    color: #f8fafc;
    font-size: 21px;
}

.gx-admin-broadcast-title p {
    margin: 2px 0 0;
    color: #66758b;
    font-size: 9.5px;
}

.gx-admin-broadcast-head > button {
    width: 37px;
    height: 37px;
    border-radius: 10px;
    color: #748299;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(148,163,184,.09);
    cursor: pointer;
}

.gx-admin-broadcast-body {
    min-height: 0;
    overflow-y: auto;
    padding: 15px 18px 18px;
}

.gx-admin-broadcast-section {
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.015);
    border: 1px solid rgba(148,163,184,.07);
}

.gx-admin-broadcast-section.reward {
    border-color: rgba(245,158,11,.10);
    background: linear-gradient(145deg,rgba(245,158,11,.035),rgba(255,255,255,.01));
}

.gx-admin-broadcast-section-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
}

.gx-admin-broadcast-section-head > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #93c5fd;
    background: rgba(59,130,246,.08);
    font-size: 9px;
    font-weight: 900;
}

.gx-admin-broadcast-section-head strong {
    display: block;
    color: #dce5f2;
    font-size: 12px;
}

.gx-admin-broadcast-section-head small {
    display: block;
    margin-top: 1px;
    color: #5f6e84;
    font-size: 9px;
}

.gx-admin-recipient-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 11px;
}

.gx-admin-recipient-mode button {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border-radius: 11px;
    color: #77869d;
    background: #0a111e;
    border: 1px solid rgba(148,163,184,.08);
    text-align: left;
    cursor: pointer;
}

.gx-admin-recipient-mode button.active {
    color: #dbeafe;
    border-color: rgba(59,130,246,.24);
    background: rgba(37,99,235,.08);
}

.gx-admin-recipient-mode button > i {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #60a5fa;
    background: rgba(59,130,246,.07);
}

.gx-admin-recipient-mode strong {
    display: block;
    font: 800 10px 'Kanit',sans-serif;
}

.gx-admin-recipient-mode small {
    display: block;
    margin-top: 2px;
    color: #5c6b80;
    font: 500 8.5px 'Kanit',sans-serif;
}

.gx-admin-broadcast-field {
    display: block;
    margin-bottom: 10px;
}

.gx-admin-broadcast-field > span,
.gx-admin-broadcast-reward-grid label > span,
.gx-admin-broadcast-item-builder label > span {
    display: block;
    margin: 0 0 5px 2px;
    color: #8493a9;
    font-size: 9.5px;
}

.gx-admin-broadcast-field input,
.gx-admin-broadcast-field textarea,
.gx-admin-broadcast-reward-grid input,
.gx-admin-broadcast-item-builder input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 9px;
    border: 1px solid rgba(148,163,184,.11);
    outline: 0;
    color: #e2e8f0;
    background: #080f1b;
    font: 500 10.5px 'Kanit',sans-serif;
}

.gx-admin-broadcast-field input {
    height: 42px;
    padding: 0 11px;
}

.gx-admin-broadcast-field textarea {
    min-height: 74px;
    padding: 10px 11px;
    resize: vertical;
    line-height: 1.55;
}

.gx-admin-broadcast-exclusions {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
    margin-top: 7px;
}

.gx-admin-broadcast-exclusions label {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border-radius: 10px;
    background: rgba(255,255,255,.016);
    border: 1px solid rgba(148,163,184,.07);
}

.gx-admin-broadcast-exclusions input { accent-color: #3b82f6; }

.gx-admin-broadcast-exclusions strong {
    display: block;
    color: #b7c2d2;
    font-size: 9px;
}

.gx-admin-broadcast-exclusions small {
    display: block;
    margin-top: 2px;
    color: #57667b;
    font-size: 7.5px;
}

.gx-admin-recipient-preview {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin-top: 9px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(59,130,246,.035);
    border: 1px solid rgba(59,130,246,.08);
}

.gx-admin-recipient-preview span {
    display: block;
    color: #607087;
    font-size: 8px;
}

.gx-admin-recipient-preview strong {
    display: block;
    margin-top: 1px;
    color: #dbeafe;
    font-size: 12px;
}

.gx-admin-recipient-preview button {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    color: #93c5fd;
    background: rgba(59,130,246,.06);
    border: 1px solid rgba(59,130,246,.11);
    font: 700 8.5px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-admin-broadcast-reward-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.gx-admin-broadcast-reward-grid label {
    display: block;
}

.gx-admin-broadcast-reward-grid input {
    height: 42px;
    padding: 0 10px;
}

.gx-admin-broadcast-reward-grid label:first-child span i { color: #fbbf24; }
.gx-admin-broadcast-reward-grid label:last-child span i { color: #60a5fa; }

.gx-admin-broadcast-item-builder {
    margin-top: 10px;
    padding: 10px;
    border-radius: 11px;
    background: rgba(124,58,237,.025);
    border: 1px solid rgba(124,58,237,.07);
}

.gx-admin-broadcast-item-builder > div:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr 95px 78px;
    gap: 7px;
    align-items: end;
}

.gx-admin-broadcast-item-builder input {
    height: 38px;
    padding: 0 9px;
}

.gx-admin-broadcast-item-builder > div:first-child > button {
    height: 38px;
    border-radius: 8px;
    border: 0;
    color: #fff;
    background: #4f46e5;
    font: 800 8.5px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-admin-broadcast-item-list {
    display: grid;
    gap: 6px;
    margin-top: 9px;
}

.gx-admin-broadcast-item-list > span {
    color: #536176;
    font-size: 8.5px;
}

.gx-admin-broadcast-item-list > div {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 7px 8px;
    border-radius: 9px;
    background: rgba(255,255,255,.018);
    border: 1px solid rgba(148,163,184,.06);
}

.gx-admin-broadcast-item-list > div > i { color: #c4b5fd; }
.gx-admin-broadcast-item-list strong {
    display: block;
    color: #cbd5e1;
    font-size: 9.5px;
}
.gx-admin-broadcast-item-list small {
    display: block;
    color: #5b6b81;
    font-size: 7.5px;
}
.gx-admin-broadcast-item-list button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #fb7185;
    background: rgba(244,63,94,.05);
    border: 1px solid rgba(244,63,94,.09);
    cursor: pointer;
}

.gx-admin-broadcast-foot {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px;
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(148,163,184,.08);
    background: #0d1422;
}

.gx-admin-broadcast-foot button {
    min-height: 44px;
    border-radius: 9px;
    font: 800 10px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-admin-broadcast-foot .cancel {
    color: #7e8ca1;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(148,163,184,.09);
}

.gx-admin-broadcast-foot .send {
    color: #fff;
    border: 0;
    background: linear-gradient(90deg,#2563eb,#7c3aed);
}

/* Mailbox admin broadcast visual */
.gx-mailbox-item-icon.admin_broadcast {
    color: #fbbf24 !important;
    background: rgba(245,158,11,.08) !important;
}

.gx-mailbox-claim-btn.future {
    color: #94a3b8 !important;
    background: rgba(148,163,184,.06) !important;
    border: 1px solid rgba(148,163,184,.10) !important;
}

/* Responsive */
@media (max-width: 900px) {
    .gx-ticket-layout {
        grid-template-columns: 330px minmax(0,1fr);
    }

    .gx-admin-broadcast-exclusions {
        grid-template-columns: 1fr;
    }

    .gx-admin-broadcast-item-builder > div:first-child {
        grid-template-columns: 1fr 1fr;
    }

    .gx-admin-broadcast-item-builder .qty {
        grid-column: span 1;
    }
}

@media (max-width: 700px) {
    .gx-ticket-modal {
        height: calc(100dvh - 16px);
    }

    .gx-ticket-head {
        align-items: flex-start;
        padding: 12px 14px;
    }

    .gx-ticket-head h3 { font-size: 20px; }
    .gx-ticket-head p { font-size: 9px; }

    .gx-ticket-new-btn span { display: none; }

    .gx-ticket-layout {
        grid-template-columns: 1fr;
    }

    .gx-ticket-list {
        max-height: 35%;
        border-right: 0;
        border-bottom: 1px solid rgba(148,163,184,.07);
    }

    .gx-ticket-message-bubble {
        max-width: 88%;
    }

    .gx-ticket-chat-head {
        align-items: flex-start;
    }

    .gx-ticket-chat-head-actions {
        flex-direction: column;
        align-items: flex-end;
    }

    .gx-admin-broadcast-modal {
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .gx-admin-broadcast-title p {
        display: none;
    }

    .gx-admin-recipient-mode,
    .gx-admin-broadcast-reward-grid,
    .gx-admin-broadcast-foot {
        grid-template-columns: 1fr;
    }

    .gx-admin-broadcast-item-builder > div:first-child {
        grid-template-columns: 1fr;
    }

    .gx-admin-report-toolbar-actions {
        width: 100%;
    }

    .gx-admin-broadcast-open,
    .gx-admin-report-refresh {
        flex: 1;
        justify-content: center;
    }
}


/* =========================================================
   GX V30.1 — SYNCHRONIZED ROOM COUNTDOWN
   ========================================================= */
.gx-game-countdown-overlay {
    z-index: 900000 !important;
    pointer-events: all !important;
}

/* Prevent accidental room actions while the shared countdown is visible */
.gx-game-countdown-overlay.show {
    cursor: default;
}

.gx-game-countdown-card {
    user-select: none;
}


/* =========================================================
   GX V30.2 — ROOM WINS + FRESH MATCH HISTORY
   ========================================================= */

.gx-room-win-score {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding: 5px 8px;
    border-radius: 9px;
    color: #cbd5e1;
    background: rgba(245,158,11,.055);
    border: 1px solid rgba(245,158,11,.11);
    font-size: 10px;
}

.gx-room-win-score > span {
    color: #9aa8bb;
    font-size: 9px;
}

.gx-room-win-score > span i {
    color: #fbbf24;
    margin-right: 3px;
}

.gx-room-win-score > strong {
    min-width: 18px;
    color: #fbbf24;
    font-size: 14px;
    line-height: 1;
    text-align: center;
}

.gx-room-win-score > small {
    padding: 2px 5px;
    border-radius: 999px;
    color: #93c5fd;
    background: rgba(59,130,246,.07);
    font-size: 8px;
    font-weight: 900;
}

.gx-word-room-wins {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: 999px;
    color: #d6b85d;
    background: rgba(245,158,11,.055);
    border: 1px solid rgba(245,158,11,.08);
    font-size: 8px;
    font-weight: 800;
}

.gx-word-room-wins i {
    color: #fbbf24;
}

.gx-history-room-win {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 5px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #fde68a;
    background: rgba(245,158,11,.07);
    border: 1px solid rgba(245,158,11,.11);
    font-size: 8px;
    font-weight: 900;
}

.gx-history-room-win i {
    color: #fbbf24;
}


/* =========================================================
   GX V30.3 — RANKED MATCHMAKING / ANONYMOUS OPPONENT
   ========================================================= */

.gx-rank-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 880000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    background: rgba(3,7,18,.76);
    backdrop-filter: blur(12px);
    transition: opacity .18s ease, visibility .18s ease;
}

.gx-rank-search-overlay.show {
    opacity: 1;
    visibility: visible;
}

.gx-rank-search-overlay.leave {
    opacity: 0;
    visibility: hidden;
}

.gx-rank-search-card {
    width: min(430px, calc(100vw - 32px));
    padding: 26px;
    border-radius: 24px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(59,130,246,.10), transparent 34%),
        linear-gradient(145deg, #111a2b, #0d1422);
    border: 1px solid rgba(96,165,250,.18);
    box-shadow: 0 28px 80px rgba(0,0,0,.42);
}

.gx-rank-search-radar {
    position: relative;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
}

.gx-rank-search-radar > span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(59,130,246,.22);
    animation: gxRankRadar 2.2s ease-out infinite;
}

.gx-rank-search-radar > span:nth-child(2) { animation-delay: .55s; }
.gx-rank-search-radar > span:nth-child(3) { animation-delay: 1.1s; }

.gx-rank-search-radar > i {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #93c5fd;
    background: #101c31;
    border: 1px solid rgba(96,165,250,.24);
    box-shadow: 0 0 28px rgba(59,130,246,.13);
    font-size: 19px;
}

@keyframes gxRankRadar {
    0% { transform: scale(.55); opacity: .9; }
    100% { transform: scale(1.35); opacity: 0; }
}

.gx-rank-search-kicker {
    color: #60a5fa;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
}

.gx-rank-search-card h3 {
    margin: 7px 0 0;
    color: #f8fafc;
    font-size: 24px;
    line-height: 1.25;
}

.gx-rank-search-card > p {
    max-width: 330px;
    margin: 7px auto 0;
    color: #7d8da5;
    font-size: 11px;
    line-height: 1.65;
}

.gx-rank-search-own {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
}

.gx-rank-search-own > div {
    min-height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.022);
    border: 1px solid rgba(148,163,184,.08);
}

.gx-rank-search-own span {
    color: #68788f;
    font-size: 8px;
}

.gx-rank-search-own strong {
    margin-top: 3px;
    color: #dbeafe;
    font-size: 14px;
}

.gx-rank-search-range {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 9px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #8090a6;
    background: rgba(59,130,246,.035);
    border: 1px solid rgba(59,130,246,.08);
    font-size: 9px;
}

.gx-rank-search-range i {
    color: #60a5fa;
}

.gx-rank-search-loader {
    height: 3px;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148,163,184,.10);
}

.gx-rank-search-loader span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#3b82f6,#8b5cf6);
    animation: gxRankLoader 1.35s ease-in-out infinite alternate;
}

@keyframes gxRankLoader {
    from { transform: translateX(-5%); }
    to { transform: translateX(145%); }
}

.gx-rank-search-card > button {
    width: 100%;
    min-height: 43px;
    margin-top: 15px;
    border-radius: 11px;
    color: #94a3b8;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(148,163,184,.10);
    font: 800 10px 'Kanit',sans-serif;
    cursor: pointer;
}

.gx-rank-search-card > button:disabled {
    opacity: .45;
    cursor: default;
}

.gx-rank-search-overlay[data-state="matched"] .gx-rank-search-radar > i,
.gx-rank-search-overlay[data-state="preparing"] .gx-rank-search-radar > i {
    color: #4ade80;
    border-color: rgba(34,197,94,.28);
    background: rgba(16,185,129,.08);
}

.gx-rank-search-overlay[data-state="matched"] .gx-rank-search-loader span,
.gx-rank-search-overlay[data-state="preparing"] .gx-rank-search-loader span {
    width: 100%;
    animation: none;
    transform: none;
    background: linear-gradient(90deg,#10b981,#3b82f6);
}

.gx-ranked-hidden-avatar {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: #64748b;
    background:
        radial-gradient(circle at 50% 35%, rgba(96,165,250,.10), transparent 42%),
        #101827;
    border: 1px solid rgba(96,165,250,.12);
    font-size: 21px;
}

.gx-ranked-hidden-label,
.gx-word-ranked-hidden {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #93c5fd;
    background: rgba(59,130,246,.055);
    border: 1px solid rgba(59,130,246,.09);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
}

.gx-word-score-player:not(.is-me) .gx-word-score-avatar {
    background: #101827;
}

@media (max-width: 520px) {
    .gx-rank-search-card {
        padding: 22px 18px;
    }

    .gx-rank-search-card h3 {
        font-size: 21px;
    }
}


/* =========================================================
   GX V30.4 — RANKED FALLBACK MATCH
   ========================================================= */

.gx-rank-search-overlay.fallback-any .gx-rank-search-range {
    color: #fde68a;
    background: rgba(245,158,11,.055);
    border-color: rgba(245,158,11,.12);
}

.gx-rank-search-overlay.fallback-any .gx-rank-search-range i {
    color: #fbbf24;
}

.gx-rank-search-overlay.fallback-any .gx-rank-search-radar > i {
    color: #fbbf24;
    border-color: rgba(245,158,11,.22);
    box-shadow: 0 0 30px rgba(245,158,11,.10);
}

.gx-rank-search-overlay.fallback-any .gx-rank-search-kicker::after {
    content: " · FLEX SEARCH";
    color: #fbbf24;
}


/* =========================================================
   GX V30.5 — Ticket Close Flow + Permanent Ban
   ========================================================= */

/* Ticket closed state */
.gx-ticket-item-status.closed {
    color: #94a3b8;
    border-color: rgba(148,163,184,.16);
    background: rgba(148,163,184,.06);
}

.gx-ticket-open-pill.closed {
    color: #fca5a5 !important;
    border-color: rgba(239,68,68,.24) !important;
    background: rgba(239,68,68,.08) !important;
}

.gx-ticket-compose.is-closed {
    opacity: .62;
}

.gx-ticket-compose.is-closed textarea,
.gx-ticket-compose.is-closed button {
    cursor: not-allowed !important;
}

.gx-ticket-closed-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid rgba(16,185,129,.16);
    border-radius: 14px;
    background: rgba(16,185,129,.055);
    color: #cbd5e1;
}

.gx-ticket-closed-notice > i {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #34d399;
    background: rgba(16,185,129,.10);
    border: 1px solid rgba(16,185,129,.16);
}

.gx-ticket-closed-notice div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gx-ticket-closed-notice strong {
    color: #ecfdf5;
    font-size: 13px;
}

.gx-ticket-closed-notice span {
    color: #8493a8;
    font-size: 11px;
    line-height: 1.6;
}

/* Permanent ban admin controls */
.admin-ban-control-grid {
    display: grid;
    grid-template-columns: minmax(180px,.85fr) minmax(180px,.85fr) minmax(260px,1.3fr);
    gap: 12px;
    align-items: end;
}

.admin-ban-control-grid .admin-field {
    min-width: 0;
}

#admin-ban-mode {
    font-weight: 700;
}

#admin-ban-duration-field.disabled {
    opacity: .42;
}

.admin-ban-mode-hint {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 12px;
    color: #93a4bb;
    background: rgba(59,130,246,.045);
    border: 1px solid rgba(59,130,246,.10);
    font-size: 11px;
    line-height: 1.5;
}

.admin-ban-mode-hint > i {
    color: #60a5fa;
}

.admin-ban-mode-hint.permanent {
    color: #fecaca;
    background: rgba(239,68,68,.055);
    border-color: rgba(239,68,68,.14);
}

.admin-ban-mode-hint.permanent > i {
    color: #fb7185;
}

.admin-ban-mode-hint.unban {
    color: #bbf7d0;
    background: rgba(34,197,94,.055);
    border-color: rgba(34,197,94,.14);
}

.admin-ban-mode-hint.unban > i {
    color: #4ade80;
}

.gx-admin-meta-chip.banned.permanent {
    color: #fecaca !important;
    background: rgba(239,68,68,.10) !important;
    border-color: rgba(239,68,68,.22) !important;
}

@media (max-width: 920px) {
    .admin-ban-control-grid {
        grid-template-columns: 1fr 1fr;
    }

    .admin-ban-note-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .admin-ban-control-grid {
        grid-template-columns: 1fr;
    }

    .admin-ban-note-field {
        grid-column: auto;
    }
}


/* =========================================================
   GX V30.6 — BRAND + SIDEBAR + REPORT POLISH
   ========================================================= */

:root {
    --gx-menu-bg: #0b1020;
    --gx-menu-card: rgba(18, 27, 48, .82);
    --gx-menu-line: rgba(114, 146, 201, .14);
    --gx-menu-blue: #4f8cff;
    --gx-menu-cyan: #58d8ff;
    --gx-menu-text: #eef4ff;
    --gx-menu-muted: #8fa0ba;
}

/* Top-left brand is a real Home button */
.gx-brand-home-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 5px 8px 5px 4px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    color: #f8fbff;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.gx-brand-home-btn:hover {
    background: rgba(79,140,255,.075);
    box-shadow: inset 0 0 0 1px rgba(96,165,250,.10);
    transform: translateY(-1px);
}

.gx-brand-home-btn:active {
    transform: translateY(0) scale(.985);
}

.gx-brand-home-icon {
    width: 34px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #71a6ff;
    background: linear-gradient(135deg, rgba(79,140,255,.18), rgba(88,216,255,.08));
    border: 1px solid rgba(96,165,250,.15);
    box-shadow: 0 7px 22px rgba(59,130,246,.10);
}

.gx-brand-home-icon i {
    font-size: 17px !important;
    filter: drop-shadow(0 0 10px rgba(79,140,255,.38));
}

.gx-brand-home-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
}

.gx-brand-home-copy strong {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .035em;
}

.gx-brand-home-copy small {
    margin-top: 3px;
    color: #61728e;
    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: .22em;
}

/* Login welcome copy */
.gx-auth-brand-content > p {
    max-width: 460px !important;
    font-size: 14.5px !important;
    line-height: 1.8 !important;
    color: #a9b6ca !important;
}

/* Sidebar shell */
#right-sidebar-menu {
    width: min(344px, 100vw) !important;
    padding: 18px 18px 16px !important;
    background:
        radial-gradient(circle at 85% 8%, rgba(79,140,255,.11), transparent 27%),
        radial-gradient(circle at 8% 72%, rgba(88,216,255,.035), transparent 28%),
        linear-gradient(180deg, #0b1020 0%, #090d18 100%) !important;
    border-left: 1px solid rgba(96,165,250,.13) !important;
    box-shadow: -24px 0 70px rgba(0,0,0,.42) !important;
}

#right-sidebar-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(79,140,255,.72), rgba(88,216,255,.42)) !important;
}

/* Sidebar title */
.gx-sidebar-head {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 2px 2px 8px;
}

.gx-sidebar-head-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.gx-sidebar-head-kicker {
    color: #5d7aa8;
    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: .22em;
}

.gx-sidebar-head-copy strong {
    color: #f6f9ff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .01em;
}

.gx-sidebar-close-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 11px;
    border: 1px solid rgba(148,163,184,.10);
    color: #8fa0ba;
    background: rgba(255,255,255,.025);
    cursor: pointer;
    transition: .18s ease;
}

.gx-sidebar-close-btn:hover {
    color: #e9f2ff;
    border-color: rgba(96,165,250,.22);
    background: rgba(79,140,255,.09);
}

/* Profile card harmonized with system theme */
#right-sidebar-menu .sidebar-profile-card.gx-sidebar-profile-v26 {
    margin-bottom: 15px !important;
    border: 1px solid rgba(96,165,250,.12) !important;
    background:
        radial-gradient(circle at 8% 10%, rgba(79,140,255,.095), transparent 35%),
        linear-gradient(145deg, rgba(19,27,47,.98), rgba(12,17,31,.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 18px 44px rgba(0,0,0,.18) !important;
}

/* Menu item list */
#right-sidebar-menu .gx-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#right-sidebar-menu .menu-link-item {
    position: relative;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    color: #9eacc1 !important;
    background: transparent !important;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease !important;
}

#right-sidebar-menu .menu-link-item > i {
    width: 34px !important;
    height: 34px;
    flex: 0 0 34px !important;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #7184a2;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(148,163,184,.07);
    transition: .18s ease;
}

#right-sidebar-menu .menu-link-item > span {
    font-size: 13px;
    font-weight: 650;
}

#right-sidebar-menu .menu-link-item:hover {
    color: #e8f1ff !important;
    background: rgba(79,140,255,.055) !important;
    border-color: rgba(96,165,250,.10) !important;
    transform: translateX(2px);
}

#right-sidebar-menu .menu-link-item:hover > i {
    color: #75a8ff;
    background: rgba(79,140,255,.10);
    border-color: rgba(96,165,250,.14);
}

#right-sidebar-menu .menu-link-item.active-link {
    color: #eaf3ff !important;
    background:
        linear-gradient(90deg, rgba(56,111,216,.22), rgba(79,140,255,.105)) !important;
    border-color: rgba(96,165,250,.18) !important;
    box-shadow: inset 3px 0 0 #4f8cff !important;
}

#right-sidebar-menu .menu-link-item.active-link > i {
    color: #8bb6ff;
    background: rgba(79,140,255,.15);
    border-color: rgba(96,165,250,.18);
}

/* Hide admin divider if its following admin controls are both hidden via :has support */
.gx-sidebar-nav-divider {
    height: 24px;
    margin: 4px 1px -1px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #465673;
    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: .20em;
}

.gx-sidebar-nav-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, rgba(96,165,250,.11), transparent);
}

/* Footer */
.gx-sidebar-footer-actions {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(148,163,184,.08);
    display: grid;
    gap: 9px;
}

.gx-report-sidebar-btn,
.gx-sidebar-logout-btn,
.gx-report-float-btn {
    border: 1px solid transparent;
    font-family: 'Kanit', sans-serif;
    cursor: pointer;
    transition: .18s ease;
}

/* Report is now part of the blue system theme instead of Instagram pink */
.gx-report-sidebar-btn {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #ddecff;
    background:
        linear-gradient(135deg, rgba(36,77,151,.90), rgba(66,77,190,.88));
    border-color: rgba(111,153,255,.20);
    box-shadow: 0 12px 30px rgba(37,99,235,.12);
    font-size: 13px;
    font-weight: 800;
}

.gx-report-btn-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.07);
}

.gx-report-sidebar-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(37,99,235,.18);
}

/* Logout is clearly destructive but not neon orange */
.gx-sidebar-logout-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #f2b8be;
    background: rgba(127,29,29,.095);
    border-color: rgba(248,113,113,.12);
    font-size: 13px;
    font-weight: 800;
}

.gx-sidebar-logout-btn:hover {
    color: #ffe1e4;
    background: rgba(153,27,27,.18);
    border-color: rgba(248,113,113,.20);
}

/* Floating Report on auth pages */
.gx-report-float-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1500;
    min-width: 112px;
    height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #cfe2ff;
    background: rgba(17,30,55,.90);
    border-color: rgba(96,165,250,.18);
    box-shadow:
        0 18px 42px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter: blur(14px);
    font-weight: 800;
}

.gx-report-float-btn i {
    color: #6fa8ff;
}

.gx-report-float-btn:hover {
    color: #fff;
    background: rgba(35,70,137,.95);
    border-color: rgba(111,168,255,.30);
    transform: translateY(-2px);
}

/* Counter chips stay aligned at far right */
#right-sidebar-menu .gx-friend-menu-count,
#right-sidebar-menu .gx-mailbox-unread-count,
#right-sidebar-menu .gx-ticket-unread-count,
#right-sidebar-menu .gx-admin-report-count {
    margin-left: auto;
}

/* Mobile brand */
@media (max-width: 520px) {
    .gx-brand-home-copy small {
        display: none;
    }

    .gx-brand-home-copy strong {
        font-size: 13px;
    }

    .gx-brand-home-icon {
        width: 31px;
        height: 27px;
    }

    #right-sidebar-menu {
        width: min(336px, 100vw) !important;
    }
}


/* =========================================================
   GX V30.7 — UI HARD OVERRIDE / CACHE-HOTFIX
   This block intentionally sits last to beat legacy sidebar/report rules.
   ========================================================= */

#right-sidebar-menu {
    width: min(360px, 94vw) !important;
    padding: 18px !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 20% -5%, rgba(79,140,255,.16), transparent 30%),
        linear-gradient(180deg, #0c1222 0%, #080d18 100%) !important;
    border-left: 1px solid rgba(114,164,255,.16) !important;
    box-shadow: -32px 0 90px rgba(0,0,0,.55) !important;
}

.gx-sidebar-head {
    min-height: 56px !important;
    margin: 0 0 14px !important;
    padding: 0 2px 12px !important;
    border-bottom: 1px solid rgba(148,163,184,.08);
}

.gx-sidebar-head-mark {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.gx-sidebar-head-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #8ab6ff;
    background: linear-gradient(145deg, rgba(79,140,255,.17), rgba(88,216,255,.07));
    border: 1px solid rgba(96,165,250,.17);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.gx-sidebar-head-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0;
}

.gx-sidebar-head-copy strong {
    color: #f7faff !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
}

.gx-sidebar-head-copy small {
    color: #587095;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .16em;
}

.gx-sidebar-close-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    color: #8291a9 !important;
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(148,163,184,.09) !important;
}

#right-sidebar-menu .sidebar-profile-card.gx-sidebar-profile-v26 {
    padding: 14px !important;
    margin: 0 0 14px !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 14% 12%, rgba(91,139,255,.13), transparent 34%),
        linear-gradient(145deg, rgba(20,29,50,.98), rgba(12,18,32,.98)) !important;
    border: 1px solid rgba(104,148,224,.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 38px rgba(0,0,0,.22) !important;
}

#right-sidebar-menu .gx-sidebar-nav {
    gap: 6px !important;
}

#right-sidebar-menu .menu-link-item {
    min-height: 50px !important;
    width: 100% !important;
    padding: 0 12px !important;
    gap: 10px !important;
    border-radius: 13px !important;
    color: #9aa9bf !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    text-align: left !important;
}

#right-sidebar-menu .menu-link-item > i {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #7386a5 !important;
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(148,163,184,.06) !important;
}

#right-sidebar-menu .menu-link-item > span {
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
}

#right-sidebar-menu .menu-link-item:hover {
    color: #f0f6ff !important;
    background: rgba(79,140,255,.07) !important;
    border-color: rgba(96,165,250,.12) !important;
    transform: none !important;
}

#right-sidebar-menu .menu-link-item:hover > i {
    color: #8db9ff !important;
    background: rgba(79,140,255,.12) !important;
    border-color: rgba(96,165,250,.14) !important;
}

#right-sidebar-menu .menu-link-item.active-link {
    color: #f4f8ff !important;
    background:
        linear-gradient(90deg, rgba(54,103,198,.24), rgba(45,69,128,.14)) !important;
    border-color: rgba(96,165,250,.17) !important;
    box-shadow:
        inset 3px 0 0 #4f8cff,
        0 8px 24px rgba(37,99,235,.06) !important;
}

.gx-sidebar-nav-divider {
    margin: 7px 0 1px !important;
    height: 22px !important;
    color: #52637e !important;
    font-size: 7px !important;
}

/* Footer: polished, theme-matched, no Instagram look */
.gx-sidebar-footer-actions {
    margin-top: auto !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(148,163,184,.08) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

.gx-report-sidebar-btn {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border-radius: 14px !important;
    color: #e8f2ff !important;
    background:
        linear-gradient(135deg, rgba(44,93,185,.96), rgba(73,68,181,.92)) !important;
    border: 1px solid rgba(115,157,255,.22) !important;
    box-shadow: 0 12px 32px rgba(37,99,235,.14) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.gx-report-sidebar-btn .gx-report-btn-icon {
    width: 29px !important;
    height: 29px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

.gx-sidebar-logout-btn {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border-radius: 14px !important;
    color: #f0b8bf !important;
    background: rgba(94,28,39,.17) !important;
    border: 1px solid rgba(248,113,113,.13) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* Floating Report — compact utility chip instead of giant pink CTA */
.gx-report-float-btn {
    position: fixed !important;
    right: 20px !important;
    bottom: 18px !important;
    z-index: 1500 !important;
    min-width: 104px !important;
    height: 43px !important;
    padding: 0 13px 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 13px !important;
    color: #dbeaff !important;
    background: rgba(15,26,48,.94) !important;
    border: 1px solid rgba(96,165,250,.18) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035) !important;
    backdrop-filter: blur(14px) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.gx-report-float-icon {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #75aaff;
    background: rgba(79,140,255,.11);
    border: 1px solid rgba(96,165,250,.12);
}

.gx-report-float-btn:hover {
    color: #fff !important;
    background: rgba(24,45,84,.97) !important;
    border-color: rgba(112,168,255,.28) !important;
    transform: translateY(-1px) !important;
}

/* Make the login copy look intentional, not like a debug paragraph */
.gx-auth-brand-content > p {
    max-width: 470px !important;
    color: #a4b3c8 !important;
    font-size: 14px !important;
    line-height: 1.82 !important;
}

.gx-auth-feature-grid > div {
    min-height: 62px !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.028) !important;
    border-color: rgba(148,163,184,.105) !important;
}

.gx-auth-feature-grid small {
    color: #8191aa !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

/* Prevent a stale legacy Report class from flattening the new button */
.floating-instagram-link.gx-report-float-btn,
.instagram-footer-link.gx-report-sidebar-btn {
    background: inherit;
}

@media (max-width: 600px) {
    #right-sidebar-menu {
        width: min(348px, 100vw) !important;
        padding: 14px !important;
    }

    .gx-report-float-btn {
        right: 12px !important;
        bottom: 12px !important;
    }
}


/* =========================================================
   GX V30.8 — ADMIN SIDEBAR VISIBILITY FIX
   ========================================================= */

#right-sidebar-menu .gx-admin-nav-section {
    width: 100%;
    flex-direction: column;
    gap: 6px;
}

/* This entire section is JS-gated. Normal players must never see
   the ADMIN divider or any spacing reserved for Admin controls. */
#right-sidebar-menu .gx-admin-nav-section[style*="display: none"],
#right-sidebar-menu .gx-admin-nav-section[style*="display:none"] {
    display: none !important;
}

#right-sidebar-menu .gx-admin-nav-section .menu-link-item {
    width: 100% !important;
}


/* =========================================================
   GX V30.9 — WORD BATTLE LOBBY REDESIGN
   ========================================================= */

.gx-word-lobby-screen {
    padding-top: 64px !important;
    min-height: 100vh !important;
    background:
        radial-gradient(circle at 12% 4%, rgba(79,140,255,.10), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(124,77,255,.075), transparent 25%),
        linear-gradient(180deg, #080c15 0%, #090d17 100%) !important;
}

.gx-word-lobby-shell {
    width: min(1180px, calc(100% - 34px)) !important;
    margin: 0 auto !important;
    padding: 34px 0 70px !important;
}

/* Main command panel */
.gx-word-lobby-command {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.gx-word-lobby-command-main {
    min-width: 0;
    min-height: 250px;
    padding: 26px 28px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(105,151,235,.15);
    background:
        radial-gradient(circle at 84% 10%, rgba(79,140,255,.13), transparent 35%),
        linear-gradient(145deg, rgba(18,27,47,.98), rgba(12,18,32,.98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 24px 65px rgba(0,0,0,.24);
}

.gx-word-lobby-command-main::after {
    content: "ABC";
    position: absolute;
    right: 20px;
    bottom: -34px;
    font-size: 120px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.05em;
    color: rgba(119,166,255,.026);
    pointer-events: none;
}

.gx-word-lobby-command-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gx-lobby-back-btn {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    color: #8ea1bd;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(148,163,184,.08);
    font: 700 11px 'Kanit', sans-serif;
    cursor: pointer;
    transition: .18s ease;
}

.gx-lobby-back-btn:hover {
    color: #e7f0ff;
    background: rgba(79,140,255,.08);
    border-color: rgba(96,165,250,.16);
}

.gx-word-lobby-kicker {
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    color: #7faeff !important;
    background: rgba(79,140,255,.07) !important;
    border: 1px solid rgba(96,165,250,.11) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
}

.gx-word-lobby-title-row {
    position: relative;
    z-index: 2;
    margin-top: 35px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
}

.gx-word-lobby-eyebrow {
    color: #5277b4;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .22em;
}

.gx-word-lobby-title-row h1 {
    margin: 5px 0 8px !important;
    color: #f7f9ff !important;
    font-size: clamp(34px, 4.5vw, 54px) !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: -.035em;
}

.gx-word-lobby-title-row p {
    max-width: 620px !important;
    margin: 0 !important;
    color: #8fa0b9 !important;
    font-size: 13px !important;
    line-height: 1.72 !important;
}

.gx-word-lobby-status-stack {
    width: min(230px, 100%);
    display: grid;
    gap: 8px;
    flex: 0 0 auto;
}

.gx-word-lobby-status {
    width: 100%;
    min-height: 36px !important;
    padding: 0 11px !important;
    justify-content: flex-start;
    border-radius: 11px !important;
    font-size: 10.5px !important;
    background: rgba(4,9,18,.36) !important;
    border-color: rgba(148,163,184,.09) !important;
}

.gx-word-lobby-status.live {
    color: #b6f5d0 !important;
}

.gx-word-lobby-status.rank-ready {
    color: #f7d977 !important;
    background: rgba(177,121,21,.06) !important;
    border-color: rgba(245,158,11,.14) !important;
}

/* Primary lobby actions */
.gx-word-lobby-action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.gx-lobby-action-card {
    min-width: 0;
    min-height: 76px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    text-align: left;
    border-radius: 17px;
    color: #dce6f5;
    background: rgba(16,23,39,.92);
    border: 1px solid rgba(148,163,184,.095);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    font-family: 'Kanit', sans-serif;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.gx-lobby-action-card:hover:not(:disabled) {
    transform: translateY(-2px);
}

.gx-lobby-action-card.rank {
    background:
        radial-gradient(circle at 5% 50%, rgba(245,158,11,.09), transparent 36%),
        rgba(18,24,39,.94);
    border-color: rgba(245,158,11,.14);
}

.gx-lobby-action-card.rank:hover:not(:disabled) {
    border-color: rgba(245,158,11,.27);
    box-shadow: 0 14px 32px rgba(146,86,15,.10);
}

.gx-lobby-action-card.create {
    background:
        radial-gradient(circle at 5% 50%, rgba(79,140,255,.11), transparent 38%),
        rgba(18,24,39,.94);
    border-color: rgba(96,165,250,.15);
}

.gx-lobby-action-card.create:hover {
    border-color: rgba(96,165,250,.29);
    box-shadow: 0 14px 34px rgba(37,99,235,.11);
}

.gx-lobby-action-card.friends {
    background:
        radial-gradient(circle at 5% 50%, rgba(16,185,129,.075), transparent 38%),
        rgba(18,24,39,.94);
    border-color: rgba(52,211,153,.10);
}

.gx-lobby-action-card.friends:hover {
    border-color: rgba(52,211,153,.23);
}

.gx-lobby-action-card:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.gx-lobby-action-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #85b0ff;
    background: rgba(79,140,255,.10);
    border: 1px solid rgba(96,165,250,.13);
}

.gx-lobby-action-card.rank .gx-lobby-action-icon {
    color: #f7c95a;
    background: rgba(245,158,11,.08);
    border-color: rgba(245,158,11,.13);
}

.gx-lobby-action-card.friends .gx-lobby-action-icon {
    color: #4cdbad;
    background: rgba(16,185,129,.075);
    border-color: rgba(52,211,153,.11);
}

.gx-lobby-action-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gx-lobby-action-copy small {
    color: #526985;
    font-size: 6.5px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .17em;
}

.gx-lobby-action-copy strong {
    margin-top: 2px;
    color: #f1f5fb;
    font-size: 14px;
    font-weight: 850;
}

.gx-lobby-action-copy em {
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #66778f;
    font-size: 9px;
    font-style: normal;
}

.gx-lobby-action-arrow {
    color: #485a73;
    font-size: 10px;
}

/* Admin tools are no longer a giant strip */
.gx-rank-dev-tools {
    margin: 14px 0 0 !important;
    padding: 0 !important;
    display: block;
    border-radius: 15px !important;
    border: 1px solid rgba(245,158,11,.11) !important;
    background: rgba(31,25,17,.30) !important;
    overflow: hidden;
}

.gx-rank-dev-toggle {
    width: 100%;
    min-height: 52px;
    padding: 0 13px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    color: #aab5c6;
    background: transparent;
    border: 0;
    font-family: 'Kanit', sans-serif;
    text-align: left;
    cursor: pointer;
}

.gx-rank-dev-toggle-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #f4b942;
    background: rgba(245,158,11,.07);
    border: 1px solid rgba(245,158,11,.11);
}

.gx-rank-dev-toggle-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gx-rank-dev-toggle-copy small {
    color: #7f673b;
    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: .16em;
}

.gx-rank-dev-toggle-copy strong {
    color: #cbd2dd;
    font-size: 11px;
    font-weight: 800;
}

.gx-rank-dev-toggle-state {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #6d7789;
    font-size: 8px;
    font-weight: 700;
}

.gx-rank-dev-body {
    padding: 13px 14px;
    border-top: 1px solid rgba(245,158,11,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.gx-rank-dev-collapsed .gx-rank-dev-body {
    display: none;
}

/* Browser/list is now one coherent panel */
.gx-lobby-browser-shell {
    margin-top: 18px;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(148,163,184,.09);
    background:
        linear-gradient(180deg, rgba(15,22,37,.90), rgba(11,16,28,.92));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 20px 55px rgba(0,0,0,.16);
}

.gx-lobby-browser-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.gx-lobby-browser-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gx-lobby-browser-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #7bacff;
    background: rgba(79,140,255,.09);
    border: 1px solid rgba(96,165,250,.12);
}

.gx-lobby-browser-title > div > span {
    color: #5278b7;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .18em;
}

.gx-lobby-browser-title h2 {
    margin: 2px 0 0;
    color: #f2f6fc;
    font-size: 17px;
    font-weight: 850;
}

.gx-lobby-browser-title p {
    margin: 2px 0 0;
    color: #66768d;
    font-size: 10px;
}

.gx-lobby-room-legend {
    display: flex !important;
    gap: 11px !important;
    color: #66768d !important;
    font-size: 9px !important;
}

.gx-lobby-search-controls {
    width: 100% !important;
    margin-top: 16px;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 9px !important;
}

.gx-lobby-search-box {
    min-height: 46px !important;
    border-radius: 12px !important;
    background: rgba(5,10,19,.58) !important;
    border-color: rgba(148,163,184,.10) !important;
}

.gx-lobby-search-box:focus-within {
    border-color: rgba(79,140,255,.45) !important;
    box-shadow: 0 0 0 3px rgba(79,140,255,.07) !important;
}

.gx-lobby-refresh-btn {
    min-height: 46px !important;
    border-radius: 12px !important;
    padding: 0 15px !important;
    color: #8db7ff !important;
    background: rgba(79,140,255,.075) !important;
    border-color: rgba(96,165,250,.12) !important;
}

.gx-lobby-room-grid {
    margin-top: 16px !important;
    gap: 12px !important;
}

.gx-lobby-room-grid .no-rooms-placeholder {
    min-height: 220px !important;
    border-radius: 17px !important;
    border: 1px dashed rgba(96,165,250,.11) !important;
    background:
        radial-gradient(circle at 50% 30%, rgba(79,140,255,.04), transparent 34%),
        rgba(5,10,18,.22) !important;
}

/* Room cards subtly align with the new lobby */
.gx-room-card {
    min-height: 180px !important;
    border-radius: 17px !important;
    padding: 16px !important;
    background: linear-gradient(145deg, rgba(18,25,42,.96), rgba(12,17,29,.96)) !important;
    border-color: rgba(148,163,184,.085) !important;
}

.gx-room-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(96,165,250,.22) !important;
    box-shadow: 0 17px 38px rgba(0,0,0,.21) !important;
}

/* Responsive */
@media (max-width: 980px) {
    .gx-word-lobby-command {
        grid-template-columns: 1fr !important;
    }

    .gx-word-lobby-action-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .gx-lobby-action-card {
        grid-template-columns: 40px minmax(0,1fr);
    }

    .gx-lobby-action-icon {
        width: 40px;
        height: 40px;
    }

    .gx-lobby-action-arrow {
        display: none;
    }
}

@media (max-width: 720px) {
    .gx-word-lobby-shell {
        width: min(100% - 20px, 1180px) !important;
        padding-top: 18px !important;
    }

    .gx-word-lobby-command-main {
        min-height: 0;
        padding: 20px 18px;
        border-radius: 19px;
    }

    .gx-word-lobby-title-row {
        margin-top: 24px;
        flex-direction: column;
        align-items: stretch;
    }

    .gx-word-lobby-title-row h1 {
        font-size: 36px !important;
    }

    .gx-word-lobby-status-stack {
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }

    .gx-word-lobby-action-grid {
        grid-template-columns: 1fr !important;
    }

    .gx-lobby-action-card {
        min-height: 70px;
        grid-template-columns: 42px minmax(0,1fr) 16px;
    }

    .gx-lobby-action-arrow {
        display: block;
    }

    .gx-rank-dev-body {
        align-items: stretch;
        flex-direction: column;
    }

    .gx-rank-dev-actions {
        justify-content: stretch !important;
    }

    .gx-rank-dev-actions button {
        flex: 1 1 calc(50% - 6px) !important;
    }

    .gx-lobby-browser-shell {
        padding: 16px;
        border-radius: 18px;
    }

    .gx-lobby-browser-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .gx-lobby-search-controls {
        grid-template-columns: 1fr !important;
    }

    .gx-lobby-refresh-btn {
        justify-content: center;
    }

    .gx-lobby-room-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 500px) {
    .gx-word-lobby-command-top {
        justify-content: space-between;
    }

    .gx-lobby-back-btn span {
        display: none;
    }

    .gx-word-lobby-status-stack {
        grid-template-columns: 1fr;
    }

    .gx-lobby-browser-title p {
        display: none;
    }

    .gx-lobby-room-legend {
        width: 100%;
        justify-content: space-between;
    }
}


/* =========================================================
   GX V30.10 — BANNED WALLET TRANSFER LOCK
   ========================================================= */
.gx-transfer-status.locked {
    border-color: rgba(248,113,113,.15) !important;
}

.gx-transfer-status.locked .fa-user-lock,
.gx-transfer-status.locked i {
    color: #fb7185;
    margin-right: 5px;
}


/* =====================================================================
   GX GAME HUB — V31 UNIFIED UI
   Whole-system refresh with distinct game identities.
   ===================================================================== */

:root{
  --v31-bg:#070b14;--v31-panel:#10182a;--v31-panel2:#141f35;
  --v31-line:rgba(128,154,205,.13);--v31-line2:rgba(112,153,235,.22);
  --v31-text:#f4f7fd;--v31-soft:#a7b4c8;--v31-muted:#667892;
  --v31-blue:#4f82ff;--v31-cyan:#4dd8ff;--v31-violet:#8a5cff;
  --v31-green:#3dd9a2;--v31-gold:#f2bd55;--v31-red:#f56c7d;
  --v31-shadow:0 26px 80px rgba(0,0,0,.34);
}
html{background:var(--v31-bg)}
body.gx-ui-v31{
  min-height:100vh;color:var(--v31-text);
  background:
    radial-gradient(circle at 12% -8%,rgba(79,130,255,.08),transparent 28%),
    radial-gradient(circle at 92% 8%,rgba(138,92,255,.05),transparent 26%),
    linear-gradient(180deg,#070b14,#080d17)!important;
}
.gx-ui-v31 *,.gx-ui-v31 *:before,.gx-ui-v31 *:after{box-sizing:border-box}
.gx-ui-v31 .auth-screen{min-height:100vh}
.gx-ui-v31 .gx-polished-screen,.gx-ui-v31 .gx-system-page{
  background:
    radial-gradient(circle at 12% 0%,rgba(79,130,255,.075),transparent 25%),
    radial-gradient(circle at 88% 8%,rgba(138,92,255,.04),transparent 27%),
    #080d17!important;
}
.gx-ui-v31 .glass-card,.gx-ui-v31 .modal-content,.gx-ui-v31 .gx-room-create-modal{
  border:1px solid var(--v31-line)!important;
  background:linear-gradient(145deg,rgba(18,27,46,.98),rgba(10,16,29,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028),var(--v31-shadow)!important;
}
.gx-ui-v31 .game-input,.gx-ui-v31 input,.gx-ui-v31 select,.gx-ui-v31 textarea{
  border-color:rgba(129,156,207,.13)
}
.gx-ui-v31 .game-input:focus,.gx-ui-v31 input:focus,.gx-ui-v31 select:focus,.gx-ui-v31 textarea:focus{
  border-color:rgba(79,130,255,.58)!important;
  box-shadow:0 0 0 3px rgba(79,130,255,.08)!important;
}

/* HEADER */
.gx-ui-v31 .game-header{
  height:58px!important;padding:0 18px!important;
  background:rgba(6,10,19,.86)!important;
  border-bottom:1px solid rgba(129,156,207,.09)!important;
  backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 10px 34px rgba(0,0,0,.10)
}
.gx-ui-v31 .gx-brand-home-btn{padding:5px 9px 5px 4px!important;border-radius:13px!important}
.gx-ui-v31 .gx-brand-home-copy strong{font-size:14px!important;letter-spacing:.04em!important}

/* AUTH SYSTEM */
.gx-ui-v31 .gx-auth-page{
  padding:84px 22px 32px!important;
  background:
    radial-gradient(circle at 26% 18%,rgba(79,130,255,.11),transparent 30%),
    radial-gradient(circle at 72% 78%,rgba(138,92,255,.06),transparent 32%),
    #070b14!important
}
.gx-ui-v31 .gx-auth-layout{
  width:min(1080px,100%)!important;min-height:600px!important;
  border-radius:28px!important;overflow:hidden!important;
  border:1px solid rgba(112,153,235,.15)!important;
  background:rgba(9,14,25,.88)!important;
  box-shadow:0 34px 110px rgba(0,0,0,.46)!important
}
.gx-ui-v31 .gx-auth-brand-panel{
  position:relative!important;padding:54px 56px!important;
  background:
    radial-gradient(circle at 16% 10%,rgba(75,134,255,.15),transparent 32%),
    radial-gradient(circle at 85% 80%,rgba(77,216,255,.065),transparent 34%),
    linear-gradient(150deg,#13203b,#111a31 52%,#0e172b)!important
}
.gx-ui-v31 .gx-auth-brand-panel:after{
  content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px;
  border:1px solid rgba(115,157,255,.07);border-radius:50%;
  box-shadow:0 0 0 46px rgba(115,157,255,.025),0 0 0 92px rgba(115,157,255,.016);
  pointer-events:none
}
.gx-ui-v31 .gx-auth-brand-content{position:relative;z-index:2}
.gx-ui-v31 .gx-auth-brand-content h1{
  margin-top:30px!important;font-size:clamp(42px,5vw,62px)!important;
  line-height:.96!important;letter-spacing:-.035em!important
}
.gx-ui-v31 .gx-auth-brand-content>p{
  max-width:480px!important;margin-top:20px!important;color:#aebbd0!important;
  font-size:14px!important;line-height:1.8!important
}
.gx-ui-v31 .gx-auth-feature-grid{margin-top:34px!important;gap:10px!important}
.gx-ui-v31 .gx-auth-feature-grid>div{
  min-height:66px!important;padding:12px 14px!important;border-radius:16px!important;
  background:rgba(8,14,27,.23)!important;border:1px solid rgba(142,170,222,.10)!important
}
.gx-ui-v31 .gx-auth-feature-grid>div>i{width:36px!important;height:36px!important;border-radius:11px!important}
.gx-ui-v31 .gx-auth-card{
  padding:48px!important;
  background:
    radial-gradient(circle at 92% 5%,rgba(79,130,255,.055),transparent 28%),
    linear-gradient(155deg,rgba(15,23,40,.99),rgba(10,16,29,.99))!important
}
.gx-ui-v31 .gx-auth-card.gx-auth-card-wide,.gx-ui-v31 .gx-recovery-layout{
  border-radius:26px!important;border:1px solid rgba(112,153,235,.14)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.40)!important
}
.gx-ui-v31 .gx-auth-card-head h2,.gx-ui-v31 .gx-recovery-brand h2{font-size:28px!important;letter-spacing:-.02em!important}
.gx-ui-v31 .gx-auth-field>span,.gx-ui-v31 .gx-auth-card label{color:#aebbd0!important}
.gx-ui-v31 .gx-auth-field .game-input,.gx-ui-v31 .gx-auth-form .game-input,.gx-ui-v31 .gx-register-grid .game-input{
  min-height:52px!important;border-radius:14px!important;background:rgba(5,10,20,.58)!important;color:#f5f8ff!important
}
.gx-ui-v31 .gx-auth-submit,.gx-ui-v31 .btn-primary{
  min-height:50px!important;border-radius:14px!important;
  background:linear-gradient(100deg,#3d73f2,#7650f5)!important;
  box-shadow:0 14px 32px rgba(65,90,220,.20)!important
}
.gx-ui-v31 .gx-auth-secondary-actions button{
  min-height:46px!important;border-radius:13px!important;
  background:rgba(10,17,31,.74)!important;border-color:rgba(129,156,207,.12)!important
}

/* REGISTER / RECOVERY / OTP */
.gx-ui-v31 .gx-recovery-layout{
  width:min(980px,100%)!important;overflow:hidden!important;
  background:linear-gradient(145deg,rgba(18,27,47,.98),rgba(10,16,29,.98))!important
}
.gx-ui-v31 .gx-recovery-info,.gx-ui-v31 .gx-recovery-form-panel{padding:38px!important}
.gx-ui-v31 .gx-recovery-steps>div{
  border-radius:14px!important;border-color:rgba(129,156,207,.10)!important;
  background:rgba(7,13,24,.32)!important
}
.gx-ui-v31 .gx-otp-card{max-width:520px!important;padding:36px!important;border-radius:24px!important}
.gx-ui-v31 .gx-otp-inputs{gap:9px!important}
.gx-ui-v31 .gx-otp-input{
  height:58px!important;border-radius:13px!important;font-size:21px!important;background:rgba(5,10,20,.56)!important
}

/* GAME HUB */
.gx-ui-v31 #game-select-screen{padding-top:76px!important}
.gx-ui-v31 #game-select-screen>.max-w-6xl{max-width:1160px!important;padding-top:34px!important}
.gx-ui-v31 .gx-hub-hero{
  min-height:210px!important;padding:32px 34px!important;border-radius:26px!important;
  border:1px solid rgba(115,157,255,.15)!important;
  background:
    radial-gradient(circle at 90% 20%,rgba(138,92,255,.14),transparent 36%),
    radial-gradient(circle at 65% 110%,rgba(77,216,255,.06),transparent 40%),
    linear-gradient(145deg,rgba(18,29,53,.98),rgba(22,18,48,.98))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.25)!important
}
.gx-ui-v31 .gx-hub-kicker{color:#79a6ff!important;letter-spacing:.20em!important}
.gx-ui-v31 .gx-hub-title{margin-top:8px!important;font-size:clamp(36px,4.5vw,52px)!important;line-height:1.03!important}
.gx-ui-v31 .gx-hub-subtitle{margin-top:12px!important;color:#a2b1c7!important;font-size:14px!important}
.gx-ui-v31 .gx-game-library{margin-top:22px!important;gap:18px!important}
.gx-ui-v31 .gx-game-card{
  min-height:420px!important;border-radius:22px!important;overflow:hidden!important;
  border:1px solid rgba(129,156,207,.12)!important;background:#111829!important;
  box-shadow:0 22px 60px rgba(0,0,0,.24)!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important
}
.gx-ui-v31 .gx-game-card:hover{transform:translateY(-5px)!important;box-shadow:0 30px 72px rgba(0,0,0,.32)!important}
.gx-ui-v31 .gx-word-game-card{border-color:rgba(65,145,255,.18)!important}
.gx-ui-v31 .gx-word-game-card .gx-game-card-art{
  background:
    radial-gradient(circle at 20% 20%,rgba(61,115,242,.30),transparent 37%),
    radial-gradient(circle at 85% 75%,rgba(56,210,255,.18),transparent 34%),
    linear-gradient(145deg,#172a5a,#122040)!important
}
.gx-ui-v31 .gx-chaos-game-card{border-color:rgba(170,93,255,.18)!important}
.gx-ui-v31 .gx-chaos-game-card .gx-game-card-art{
  background:
    radial-gradient(circle at 22% 22%,rgba(140,69,235,.32),transparent 38%),
    radial-gradient(circle at 78% 78%,rgba(240,79,149,.16),transparent 34%),
    linear-gradient(145deg,#24143d,#15162f)!important
}
.gx-ui-v31 .gx-game-card-body{
  padding:22px!important;background:linear-gradient(180deg,rgba(19,25,44,.98),rgba(14,20,35,.98))!important
}
.gx-ui-v31 .gx-game-card-body h3{font-size:23px!important;letter-spacing:-.015em}
.gx-ui-v31 .gx-game-card-body>div>p:last-child{min-height:48px;color:#93a4bc!important;line-height:1.65!important}
.gx-ui-v31 .gx-game-play-btn{min-height:48px!important;border-radius:13px!important}

/* WORD GAME IDENTITY — BLUE / CYAN */
.gx-ui-v31 .gx-game-theme-word{
  background:
    radial-gradient(circle at 12% 0%,rgba(54,125,255,.105),transparent 28%),
    radial-gradient(circle at 90% 10%,rgba(54,211,255,.055),transparent 26%),
    linear-gradient(180deg,#07101c,#080d17)!important
}
.gx-ui-v31 .gx-word-lobby-command-main{
  border-color:rgba(78,145,255,.17)!important;
  background:
    radial-gradient(circle at 82% 12%,rgba(63,129,255,.15),transparent 34%),
    radial-gradient(circle at 93% 92%,rgba(69,214,255,.05),transparent 28%),
    linear-gradient(145deg,rgba(18,31,55,.98),rgba(10,18,33,.98))!important
}
.gx-ui-v31 .gx-word-lobby-command{gap:14px!important}
.gx-ui-v31 .gx-lobby-action-card{border-radius:17px!important;min-height:78px!important}
.gx-ui-v31 .gx-lobby-browser-shell{border-color:rgba(90,140,225,.11)!important}

/* CHAOS BOARD IDENTITY — VIOLET / MAGENTA */
.gx-ui-v31 .gx-game-theme-chaos{
  background:
    radial-gradient(circle at 12% -5%,rgba(151,79,255,.12),transparent 29%),
    radial-gradient(circle at 92% 12%,rgba(237,86,170,.06),transparent 27%),
    linear-gradient(180deg,#0b0a17,#090d17)!important
}
.gx-ui-v31 .gx-chaos-lobby-shell{width:min(1180px,calc(100% - 34px))!important;padding-top:34px!important}
.gx-ui-v31 .gx-chaos-lobby-hero{
  min-height:210px!important;padding:28px 30px!important;border-radius:25px!important;
  border:1px solid rgba(171,99,255,.17)!important;
  background:
    radial-gradient(circle at 88% 14%,rgba(175,91,255,.14),transparent 36%),
    radial-gradient(circle at 70% 110%,rgba(236,110,183,.055),transparent 34%),
    linear-gradient(145deg,rgba(28,24,56,.98),rgba(17,16,39,.98))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.25)!important
}
.gx-ui-v31 .gx-chaos-lobby-logo{
  width:76px!important;height:76px!important;border-radius:21px!important;
  color:#d8c0ff!important;
  background:linear-gradient(145deg,rgba(135,73,214,.30),rgba(231,87,174,.11))!important;
  border:1px solid rgba(190,126,255,.20)!important;
  box-shadow:0 18px 40px rgba(100,40,170,.15)!important
}
.gx-ui-v31 .gx-chaos-lobby-hero h1{
  font-size:clamp(36px,4vw,50px)!important;line-height:1.02!important;letter-spacing:-.025em!important
}
.gx-ui-v31 .gx-chaos-lobby-hero p{color:#a49ab5!important;font-size:13px!important}
.gx-ui-v31 .gx-chaos-dev-banner{
  margin-top:14px!important;min-height:58px!important;border-radius:15px!important;
  border-color:rgba(175,108,255,.11)!important;background:rgba(27,18,43,.36)!important
}
.gx-ui-v31 .gx-chaos-status-grid{margin-top:14px!important;gap:12px!important}
.gx-ui-v31 .gx-chaos-status-grid article{
  min-height:82px!important;border-radius:17px!important;
  border-color:rgba(143,133,175,.10)!important;background:rgba(17,22,38,.88)!important
}
.gx-ui-v31 .gx-chaos-room-section{
  margin-top:18px!important;padding:20px!important;border-radius:22px!important;
  border:1px solid rgba(157,109,225,.10)!important;
  background:linear-gradient(180deg,rgba(16,21,37,.92),rgba(10,15,27,.94))!important
}
.gx-ui-v31 .gx-chaos-room-list{
  min-height:220px!important;border-radius:17px!important;border-color:rgba(167,117,237,.10)!important
}

/* PROFILE */
.gx-ui-v31 #profile-edit-screen{padding-top:82px!important}
.gx-ui-v31 #profile-edit-screen>.max-w-4xl{max-width:1040px!important;padding-top:32px!important}
.gx-ui-v31 #profile-edit-screen>.max-w-4xl>h2{
  margin-bottom:18px!important;padding:0 4px;font-size:28px!important;letter-spacing:-.02em
}
.gx-ui-v31 #profile-edit-screen .grid{gap:16px!important}
.gx-ui-v31 #profile-edit-screen .glass-card{border-radius:22px!important;padding:24px!important}
.gx-ui-v31 #profile-edit-screen .glass-card h3{
  padding-bottom:13px;border-bottom:1px solid rgba(129,156,207,.09)
}
.gx-ui-v31 #profile-edit-screen .game-input{
  min-height:48px!important;border-radius:12px!important;background:rgba(5,10,19,.55)!important
}

/* GAME ROOM */
.gx-ui-v31 #game-room-screen{padding-top:76px!important}
.gx-ui-v31 #game-room-screen>.max-w-6xl{max-width:1180px!important;padding-top:30px!important}
.gx-ui-v31 .gx-room-topbar{
  min-height:108px!important;margin-bottom:15px!important;padding:18px 20px!important;
  border-radius:20px!important;border:1px solid rgba(79,144,255,.14)!important;
  background:
    radial-gradient(circle at 88% 8%,rgba(70,139,255,.11),transparent 35%),
    linear-gradient(145deg,rgba(17,28,49,.96),rgba(10,17,30,.96))!important;
  box-shadow:0 20px 55px rgba(0,0,0,.20)!important
}
.gx-ui-v31 .gx-room-topbar h2{font-size:25px!important}
.gx-ui-v31 .gx-room-topbar .text-gray-400{color:#8fa2bc!important}
.gx-ui-v31 .gx-host-quick-panel{
  border-radius:18px!important;padding:10px!important;gap:9px!important;
  border:1px solid rgba(79,144,255,.11)!important;background:rgba(13,21,36,.88)!important
}
.gx-ui-v31 .gx-host-quick-action{min-height:62px!important;border-radius:14px!important}
.gx-ui-v31 .gx-game-room-polished .glass-card,.gx-ui-v31 .gx-room-members-panel,.gx-ui-v31 .gx-room-chat-panel{
  border-radius:20px!important;border-color:rgba(105,145,209,.11)!important
}
.gx-ui-v31 .gx-game-room-polished .member-card,.gx-ui-v31 .gx-room-player-card{
  border-radius:15px!important;border-color:rgba(129,156,207,.10)!important;background:rgba(12,20,34,.72)!important
}

/* ADMIN */
.gx-ui-v31 #admin-screen{padding-top:78px!important}
.gx-ui-v31 .gx-admin-dashboard{width:min(1220px,calc(100% - 34px))!important;padding-top:28px!important}
.gx-ui-v31 .gx-admin-hero{
  border-radius:24px!important;border:1px solid rgba(87,142,232,.14)!important;
  background:
    radial-gradient(circle at 88% 8%,rgba(241,188,85,.055),transparent 31%),
    radial-gradient(circle at 12% 10%,rgba(79,130,255,.09),transparent 30%),
    linear-gradient(145deg,rgba(18,28,48,.98),rgba(12,18,32,.98))!important
}
.gx-ui-v31 .gx-admin-stats{gap:12px!important}
.gx-ui-v31 .gx-admin-stat-card,.gx-ui-v31 .gx-admin-panel{
  border-radius:18px!important;border-color:rgba(129,156,207,.10)!important;background:rgba(14,22,38,.90)!important
}
.gx-ui-v31 .gx-admin-user-card{
  border-radius:15px!important;border-color:rgba(129,156,207,.09)!important;background:rgba(11,18,31,.72)!important
}

/* MODAL SYSTEM */
.gx-ui-v31 .modal-overlay{
  padding:22px!important;background:rgba(2,5,11,.74)!important;
  backdrop-filter:blur(12px) saturate(110%)!important
}
.gx-ui-v31 .modal-content,.gx-ui-v31 .gx-room-create-modal{
  border-radius:22px!important;border-color:rgba(111,151,220,.15)!important;
  background:
    radial-gradient(circle at 90% 0%,rgba(79,130,255,.05),transparent 28%),
    linear-gradient(145deg,rgba(18,27,46,.99),rgba(10,16,29,.99))!important
}
.gx-ui-v31 .gx-transfer-modal{
  border-color:rgba(242,189,85,.17)!important;
  background:
    radial-gradient(circle at 92% 0%,rgba(242,189,85,.055),transparent 28%),
    linear-gradient(145deg,rgba(22,26,40,.99),rgba(11,16,28,.99))!important
}
.gx-ui-v31 .gx-friends-modal,.gx-ui-v31 .gx-private-chat-modal{
  border-color:rgba(61,217,162,.13)!important;
  background:
    radial-gradient(circle at 90% 0%,rgba(61,217,162,.045),transparent 28%),
    linear-gradient(145deg,rgba(16,28,40,.99),rgba(10,16,29,.99))!important
}
.gx-ui-v31 .gx-ticket-modal,.gx-ui-v31 .gx-ticket-create-modal,.gx-ui-v31 .gx-report-modal,.gx-ui-v31 .gx-mailbox-modal{
  border-color:rgba(93,146,235,.14)!important
}
.gx-ui-v31 .gx-admin-report-modal,.gx-ui-v31 .admin-player-modal,.gx-ui-v31 .gx-admin-broadcast-modal{
  border-color:rgba(242,189,85,.12)!important
}
.gx-ui-v31 .gx-friends-head h3,.gx-ui-v31 .gx-transfer-header h3,.gx-ui-v31 .gx-ticket-head h3,
.gx-ui-v31 .gx-mailbox-head h3,.gx-ui-v31 .gx-report-head h3,.gx-ui-v31 .gx-room-settings-modal-head h3,
.gx-ui-v31 .gx-room-create-head h3,.gx-ui-v31 .admin-player-modal-header h3{
  font-size:21px!important
}

/* SIDEBAR */
.gx-ui-v31 #right-sidebar-menu{
  background:
    radial-gradient(circle at 18% -5%,rgba(79,130,255,.12),transparent 28%),
    linear-gradient(180deg,#0b1120,#080d17)!important;
  border-left-color:rgba(112,153,235,.14)!important
}
.gx-ui-v31 #right-sidebar-menu .menu-link-item{min-height:50px!important;border-radius:13px!important}
.gx-ui-v31 #right-sidebar-menu .sidebar-profile-card{border-radius:19px!important}

/* REPORT / ALERTS */
.gx-ui-v31 .gx-report-sidebar-btn,.gx-ui-v31 .gx-report-float-btn{
  background:linear-gradient(120deg,#315fc7,#554bc3)!important;
  border-color:rgba(105,150,245,.18)!important;
  box-shadow:0 12px 28px rgba(49,95,199,.14)!important
}
.gx-ui-v31 .gx-report-float-btn{min-height:44px!important;border-radius:13px!important}
.gx-ui-v31 .swal2-popup.custom-game-alert,.gx-ui-v31 .gx-center-alert-card{
  border-radius:22px!important;border:1px solid rgba(112,153,235,.17)!important;
  background:
    radial-gradient(circle at 50% -20%,rgba(79,130,255,.08),transparent 42%),
    linear-gradient(145deg,#151e32,#0d1424)!important;
  box-shadow:0 30px 95px rgba(0,0,0,.48)!important
}

/* INTERACTION */
.gx-ui-v31 button{
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease
}
.gx-ui-v31 button:not(:disabled):active{transform:translateY(0) scale(.985)}

/* SCROLLBARS */
.gx-ui-v31 ::-webkit-scrollbar{width:7px;height:7px}
.gx-ui-v31 ::-webkit-scrollbar-track{background:rgba(3,6,12,.35)}
.gx-ui-v31 ::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(98,130,183,.38)}
.gx-ui-v31 ::-webkit-scrollbar-thumb:hover{background:rgba(108,146,211,.55)}

/* RESPONSIVE */
@media(max-width:980px){
  .gx-ui-v31 .gx-auth-layout{grid-template-columns:1fr!important;min-height:0!important}
  .gx-ui-v31 .gx-auth-brand-panel{padding:38px!important}
  .gx-ui-v31 .gx-auth-brand-content h1{font-size:44px!important}
  .gx-ui-v31 .gx-game-library{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .gx-ui-v31 .gx-chaos-lobby-hero{align-items:flex-start!important;flex-direction:column!important;gap:18px!important}
}
@media(max-width:720px){
  .gx-ui-v31 .gx-auth-page{padding:72px 12px 20px!important}
  .gx-ui-v31 .gx-auth-card,.gx-ui-v31 .gx-recovery-info,.gx-ui-v31 .gx-recovery-form-panel{padding:24px!important}
  .gx-ui-v31 .gx-auth-brand-panel{padding:28px 24px!important}
  .gx-ui-v31 .gx-auth-brand-content h1{font-size:38px!important}
  .gx-ui-v31 .gx-auth-feature-grid{grid-template-columns:1fr!important}
  .gx-ui-v31 .gx-game-library{grid-template-columns:1fr!important}
  .gx-ui-v31 .gx-game-card{min-height:390px!important}
  .gx-ui-v31 .gx-hub-hero{min-height:180px!important;padding:25px 22px!important}
  .gx-ui-v31 .gx-room-topbar{align-items:flex-start!important;flex-direction:column!important;gap:14px!important}
  .gx-ui-v31 .gx-room-topbar>div:last-child{width:100%}
  .gx-ui-v31 .gx-room-topbar>div:last-child button{flex:1}
  .gx-ui-v31 .gx-chaos-lobby-shell,.gx-ui-v31 .gx-admin-dashboard{width:min(100% - 20px,1180px)!important}
  .gx-ui-v31 .gx-chaos-status-grid{grid-template-columns:1fr!important}
  .gx-ui-v31 .modal-overlay{padding:10px!important}
  .gx-ui-v31 .modal-content,.gx-ui-v31 .gx-room-create-modal{border-radius:18px!important}
}
@media(max-width:520px){
  .gx-ui-v31 .game-header{padding:0 10px!important}
  .gx-ui-v31 .gx-auth-card-head h2,.gx-ui-v31 .gx-recovery-brand h2{font-size:24px!important}
  .gx-ui-v31 .gx-otp-input{height:52px!important;font-size:18px!important}
  .gx-ui-v31 #game-select-screen>.max-w-6xl,
  .gx-ui-v31 #profile-edit-screen>.max-w-4xl,
  .gx-ui-v31 #game-room-screen>.max-w-6xl{
    padding-left:12px!important;padding-right:12px!important
  }
}


/* =====================================================================
   GX V32 — CHAOS BOARD 2D + LOBBY FIXES
   ===================================================================== */

/* WORD LOBBY: Thai heading must never clip tone marks */
.gx-ui-v31 .gx-word-lobby-command-main {
    min-height: 252px !important;
    padding: 26px 28px 32px !important;
}
.gx-ui-v31 .gx-word-lobby-title-row {
    margin-top: 28px !important;
    align-items: center !important;
}
.gx-ui-v31 .gx-word-lobby-title-row h1 {
    margin: 8px 0 10px !important;
    font-size: clamp(38px, 4vw, 52px) !important;
    line-height: 1.22 !important;
    letter-spacing: -.025em !important;
    overflow: visible !important;
}
.gx-ui-v31 .gx-word-lobby-title-row p {
    margin-top: 0 !important;
    line-height: 1.72 !important;
}
.gx-ui-v31 .gx-word-lobby-command-main::after {
    bottom: -50px !important;
    opacity: .72;
}

/* CHAOS CREATE MODAL */
.gx-chaos-create-modal-overlay {
    z-index: 10050 !important;
}
.gx-chaos-create-modal {
    width: min(720px, 100%) !important;
    max-height: min(820px, calc(100vh - 34px)) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    border: 1px solid rgba(169,105,255,.19) !important;
    background:
        radial-gradient(circle at 92% -8%, rgba(157,83,255,.14), transparent 35%),
        linear-gradient(150deg, #171429 0%, #11182a 52%, #0d1423 100%) !important;
}
.gx-chaos-create-head {
    min-height: 96px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(151,113,210,.12);
}
.gx-chaos-create-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}
.gx-chaos-create-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #d6b7ff;
    background: linear-gradient(145deg, rgba(142,75,228,.27), rgba(233,92,181,.08));
    border: 1px solid rgba(190,126,255,.18);
    box-shadow: 0 15px 34px rgba(89,38,146,.16);
}
.gx-chaos-create-title small {
    color: #8266ae;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .18em;
}
.gx-chaos-create-title h3 {
    margin: 2px 0 2px !important;
    color: #f7f4ff !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
}
.gx-chaos-create-title p {
    margin: 0 !important;
    color: #857d98 !important;
    font-size: 10px !important;
}
.gx-chaos-create-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #8e87a0;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(159,146,184,.10);
    cursor: pointer;
}
.gx-chaos-create-body {
    padding: 20px 22px 18px;
    overflow-y: auto;
}
.gx-chaos-create-field > span,
.gx-chaos-create-section-head strong {
    color: #dcd6e8;
    font-size: 11px;
    font-weight: 800;
}
.gx-chaos-create-input-wrap {
    margin-top: 7px;
    min-height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 13px;
    color: #7f7395;
    background: rgba(5,8,16,.50);
    border: 1px solid rgba(159,137,197,.13);
}
.gx-chaos-create-input-wrap:focus-within {
    border-color: rgba(160,100,255,.46);
    box-shadow: 0 0 0 3px rgba(144,84,231,.07);
}
.gx-chaos-create-input-wrap input {
    width: 100%;
    min-height: 46px;
    padding: 0 !important;
    color: #f5f1ff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
}
.gx-chaos-create-section {
    margin-top: 18px;
}
.gx-chaos-create-section-head span {
    display: block;
    margin-top: 2px;
    color: #716b80;
    font-size: 9px;
}
.gx-chaos-mode-cards {
    margin-top: 9px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
}
.gx-chaos-mode-card {
    min-width: 0;
    min-height: 88px;
    padding: 12px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) 14px;
    align-items: center;
    gap: 9px;
    border-radius: 14px;
    color: #9e95ad;
    background: rgba(10,13,24,.47);
    border: 1px solid rgba(151,135,179,.09);
    cursor: pointer;
    transition: .16s ease;
}
.gx-chaos-mode-card input { display:none; }
.gx-chaos-mode-card:hover,
.gx-chaos-mode-card.selected {
    color: #f2eaff;
    border-color: rgba(158,99,255,.25);
    background: rgba(120,67,190,.09);
}
.gx-chaos-mode-card .icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #b58cff;
    background: rgba(143,82,222,.10);
}
.gx-chaos-mode-card .copy {
    min-width: 0;
    display:flex;
    flex-direction:column;
}
.gx-chaos-mode-card .copy b {
    color: #ece5f7;
    font-size: 11px;
}
.gx-chaos-mode-card .copy small {
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #746c82;
    font-size: 8px;
}
.gx-chaos-mode-card .check {
    opacity: 0;
    color: #b88cff;
}
.gx-chaos-mode-card.selected .check { opacity:1; }

.gx-chaos-player-count-grid {
    margin-top: 9px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
}
.gx-chaos-player-count-grid button {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    color: #81798e;
    background: rgba(8,12,21,.48);
    border: 1px solid rgba(151,135,179,.09);
    font-family:'Kanit',sans-serif;
    cursor:pointer;
}
.gx-chaos-player-count-grid button strong {
    color:#ddd5e9;
    font-size:17px;
}
.gx-chaos-player-count-grid button.selected {
    color:#cbaaff;
    background:rgba(124,74,195,.10);
    border-color:rgba(162,103,255,.25);
}
.gx-chaos-create-info {
    margin-top: 18px;
    padding: 12px 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 13px;
    color: #877d99;
    background: rgba(122,77,177,.055);
    border: 1px solid rgba(158,102,225,.10);
}
.gx-chaos-create-info > i {
    margin-top: 2px;
    color:#aa7cf0;
}
.gx-chaos-create-info div {
    display:flex;
    flex-direction:column;
}
.gx-chaos-create-info strong {
    color:#cfc4de;
    font-size:10px;
}
.gx-chaos-create-info span {
    margin-top:2px;
    font-size:8.5px;
    line-height:1.55;
}
.gx-chaos-create-footer {
    padding: 14px 22px 20px;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 9px;
    border-top: 1px solid rgba(151,113,210,.10);
}
.gx-chaos-create-footer button {
    min-height: 48px;
    border-radius: 13px;
    font: 800 12px 'Kanit',sans-serif;
    cursor:pointer;
}
.gx-chaos-create-footer .secondary {
    color:#aaa2b6;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(159,146,184,.10);
}
.gx-chaos-create-footer .primary {
    color:white;
    background:linear-gradient(100deg,#6b46d9,#9a43eb);
    border:1px solid rgba(195,134,255,.16);
    box-shadow:0 14px 34px rgba(95,40,160,.18);
}

/* CHAOS 2D GAME */
.gx-chaos-game-screen {
    padding-top: 58px !important;
    background:
        radial-gradient(circle at 7% 0%, rgba(145,73,234,.12), transparent 28%),
        radial-gradient(circle at 94% 6%, rgba(232,86,176,.065), transparent 29%),
        linear-gradient(180deg,#090a14,#080c15) !important;
}
.gx-chaos-game-shell {
    width: min(1500px, calc(100% - 24px));
    margin: 0 auto;
    padding: 18px 0 36px;
}
.gx-chaos-game-topbar {
    min-height: 82px;
    padding: 14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-radius:18px;
    border:1px solid rgba(171,103,255,.15);
    background:
        radial-gradient(circle at 86% 10%,rgba(154,77,242,.08),transparent 34%),
        rgba(14,18,32,.90);
    box-shadow:0 18px 45px rgba(0,0,0,.20);
}
.gx-chaos-game-title-wrap {
    min-width:0;
    display:flex;
    align-items:center;
    gap:11px;
}
.gx-chaos-game-back {
    width:38px;height:38px;display:grid;place-items:center;
    border-radius:11px;color:#8f86a1;background:rgba(255,255,255,.025);
    border:1px solid rgba(151,135,179,.10);cursor:pointer;
}
.gx-chaos-game-mark {
    width:44px;height:44px;display:grid;place-items:center;
    border-radius:13px;color:#c49cff;background:rgba(136,76,218,.11);
    border:1px solid rgba(178,109,255,.14);
}
.gx-chaos-game-title-wrap small {
    color:#776092;font-size:6.5px;font-weight:900;letter-spacing:.17em;
}
.gx-chaos-game-title-wrap h2 {
    margin:2px 0 0;color:#f5f1fb;font-size:20px;line-height:1.2;
}
.gx-chaos-game-title-wrap p {
    margin:2px 0 0;color:#6f687c;font-size:8.5px;
}
.gx-chaos-game-top-actions {
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;
}
.gx-chaos-build-chip {
    min-height:34px;padding:0 11px;display:inline-flex;align-items:center;
    border-radius:10px;color:#af91d8;background:rgba(127,75,186,.07);
    border:1px solid rgba(167,101,232,.11);font-size:7px;font-weight:900;letter-spacing:.12em;
}
.gx-chaos-add-bot-btn,.gx-chaos-start-game-btn {
    min-height:38px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;
    border-radius:11px;font:800 10px 'Kanit',sans-serif;cursor:pointer;
}
.gx-chaos-add-bot-btn {
    color:#b9a7d2;background:rgba(255,255,255,.03);border:1px solid rgba(159,146,184,.10);
}
.gx-chaos-start-game-btn {
    color:white;background:linear-gradient(100deg,#7246da,#a144e5);
    border:1px solid rgba(190,123,255,.15);box-shadow:0 10px 25px rgba(88,36,154,.16);
}

.gx-chaos-game-layout {
    margin-top: 12px;
    display:grid;
    grid-template-columns: 250px minmax(620px,1fr) 250px;
    gap:12px;
    align-items:start;
}
.gx-chaos-game-side { display:grid;gap:12px; }
.gx-chaos-panel {
    padding:14px;
    border-radius:16px;
    border:1px solid rgba(139,128,163,.10);
    background:linear-gradient(145deg,rgba(16,21,36,.92),rgba(10,15,26,.92));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.gx-chaos-panel-head {
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-bottom:11px;
}
.gx-chaos-panel-head div { display:flex;flex-direction:column; }
.gx-chaos-panel-head small {
    color:#65577a;font-size:6px;font-weight:900;letter-spacing:.17em;
}
.gx-chaos-panel-head strong { color:#dcd6e7;font-size:11px; }
.gx-chaos-panel-head>span {
    color:#8e80a3;font-size:8px;font-weight:800;
}

.gx-chaos-game-player-list { display:grid;gap:7px; }
.gx-chaos-game-player {
    min-height:54px;padding:8px;
    display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;
    border-radius:12px;border:1px solid rgba(143,131,164,.075);
    background:rgba(5,9,17,.34);
}
.gx-chaos-game-player.active {
    border-color:rgba(168,108,255,.25);
    background:rgba(115,63,174,.08);
    box-shadow:inset 3px 0 0 #9d67ff;
}
.gx-chaos-game-player.eliminated { opacity:.42;filter:grayscale(.7); }
.gx-chaos-game-player .token {
    width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
    color:#08101b;background:var(--token);box-shadow:0 0 18px color-mix(in srgb,var(--token) 30%,transparent);
}
.gx-chaos-game-player>div { min-width:0;display:flex;flex-direction:column; }
.gx-chaos-game-player strong {
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8e1f1;font-size:9.5px;
}
.gx-chaos-game-player strong em { color:#8eb8ff;font-size:6px;font-style:normal; }
.gx-chaos-game-player small { margin-top:2px;color:#615b6a;font-size:6.5px; }
.gx-chaos-game-player .mini-stats {
    display:flex;flex-direction:column;align-items:flex-end;
}
.gx-chaos-game-player .mini-stats b { color:#dfd7e8;font-size:8px; }
.gx-chaos-game-player .mini-stats small { font-size:6px; }

.gx-chaos-stat-grid {
    display:grid;grid-template-columns:1fr 1fr;gap:7px;
}
.gx-chaos-stat-grid>div {
    min-height:56px;padding:9px;border-radius:11px;
    background:rgba(5,9,17,.31);border:1px solid rgba(143,131,164,.07);
}
.gx-chaos-stat-grid span { display:block;color:#696172;font-size:7px; }
.gx-chaos-stat-grid strong { display:block;margin-top:4px;color:#ece6f5;font-size:13px; }
.gx-chaos-effect-list { margin-top:8px;display:flex;gap:6px;flex-wrap:wrap; }
.gx-chaos-effect-list span {
    min-height:28px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;
    border-radius:9px;font-size:7px;font-weight:800;
}
.gx-chaos-effect-list .empty { color:#615b68;background:rgba(255,255,255,.02); }
.gx-chaos-effect-list .drunk {
    color:#f2b4e7;background:rgba(231,87,183,.08);border:1px solid rgba(231,87,183,.12);
}

/* 9x9 / 32-cell board */
.gx-chaos-board-stage { min-width:0; }
.gx-chaos-board-frame {
    padding:10px;border-radius:19px;border:1px solid rgba(165,101,247,.14);
    background:
        radial-gradient(circle at 50% 50%,rgba(106,55,171,.07),transparent 48%),
        rgba(10,14,24,.88);
    box-shadow:0 24px 65px rgba(0,0,0,.25);
}
.gx-chaos-board-grid {
    position:relative;
    aspect-ratio:1/1;
    width:100%;
    display:grid;
    grid-template-columns:repeat(9,1fr);
    grid-template-rows:repeat(9,1fr);
    gap:3px;
}
.gx-chaos-board-cell {
    position:relative;min-width:0;min-height:0;padding:4px 3px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    overflow:hidden;text-align:center;border-radius:7px;
    color:#8f8799;background:rgba(14,18,31,.95);
    border:1px solid rgba(143,131,164,.08);
}
.gx-chaos-board-cell .cell-index {
    position:absolute;top:2px;left:3px;color:#504959;font-size:4.5px;font-weight:900;
}
.gx-chaos-board-cell>i { color:#77688a;font-size:10px; }
.gx-chaos-board-cell>strong {
    width:100%;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:#c9c0d2;font-size:5.7px;line-height:1.1;
}
.gx-chaos-board-cell>small { margin-top:1px;color:#5f5768;font-size:4.8px; }
.gx-chaos-board-cell>small b { color:#8f80a3;font-weight:700; }
.gx-chaos-board-cell.type-start { background:rgba(34,132,92,.13);border-color:rgba(57,213,155,.18); }
.gx-chaos-board-cell.type-start>i { color:#4cd5a4; }
.gx-chaos-board-cell.type-property { background:rgba(37,54,88,.52); }
.gx-chaos-board-cell.type-property>i { color:#7599d6; }
.gx-chaos-board-cell.type-event { background:rgba(123,87,27,.17);border-color:rgba(235,183,72,.14); }
.gx-chaos-board-cell.type-event>i { color:#e7b750; }
.gx-chaos-board-cell.type-punish { background:rgba(106,30,62,.17);border-color:rgba(230,93,150,.15); }
.gx-chaos-board-cell.type-punish>i { color:#e66a9d; }
.gx-chaos-board-cell.type-heal { background:rgba(27,111,93,.16);border-color:rgba(58,206,166,.13); }
.gx-chaos-board-cell.type-heal>i { color:#43cba7; }
.gx-chaos-board-cell.type-tax { background:rgba(110,54,27,.17);border-color:rgba(230,132,76,.14); }
.gx-chaos-board-cell.type-tax>i { color:#dc8b59; }
.gx-chaos-board-cell.type-landmark { background:rgba(87,48,132,.19);border-color:rgba(164,103,240,.16); }
.gx-chaos-board-cell.type-landmark>i { color:#b382f0; }
.gx-chaos-board-cell.owned { border-color:var(--owner);box-shadow:inset 0 -3px 0 var(--owner); }
.gx-chaos-board-cell .owner-line {
    position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--owner);
}
.gx-chaos-board-tokens {
    position:absolute;right:2px;bottom:3px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:1px;
}
.gx-chaos-board-token {
    width:12px;height:12px;display:grid;place-items:center;border-radius:4px;
    color:#06101a;background:var(--token);font-size:5px;
    box-shadow:0 0 8px color-mix(in srgb,var(--token) 35%,transparent);
}

.gx-chaos-board-center {
    grid-row:2 / 9;grid-column:2 / 9;
    margin:5px;padding:14px;
    display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;
    align-items:center;gap:10px;
    border-radius:16px;
    border:1px solid rgba(159,99,239,.13);
    background:
        radial-gradient(circle at 50% 20%,rgba(133,71,215,.08),transparent 38%),
        linear-gradient(145deg,rgba(14,18,31,.94),rgba(8,12,21,.96));
}
.gx-chaos-board-center-brand {
    min-width:0;align-self:start;
}
.gx-chaos-board-center-brand>span {
    width:42px;height:42px;display:grid;place-items:center;border-radius:13px;
    color:#c096ff;background:rgba(140,78,219,.12);border:1px solid rgba(176,108,255,.14);
}
.gx-chaos-board-center-brand small {
    display:block;margin-top:10px;color:#6e5788;font-size:6px;font-weight:900;letter-spacing:.18em;
}
.gx-chaos-board-center-brand strong {
    display:block;margin-top:2px;color:#ede5f7;font-size:20px;letter-spacing:-.02em;
}
.gx-chaos-board-center-brand p {
    margin:3px 0 0;color:#665f70;font-size:6.5px;
}
.gx-chaos-turn-card {
    justify-self:end;align-self:start;min-width:150px;padding:10px 11px;
    border-radius:12px;text-align:right;background:rgba(5,8,15,.42);
    border:1px solid rgba(143,131,164,.08);
}
.gx-chaos-turn-card small { display:block;color:#5e5668;font-size:5.5px;font-weight:900;letter-spacing:.15em; }
.gx-chaos-turn-card strong { display:block;margin-top:3px;color:#e3dce9;font-size:11px; }
.gx-chaos-turn-card span { display:block;margin-top:2px;color:#78698a;font-size:6px;font-weight:800; }

.gx-chaos-dice-area {
    align-self:end;display:flex;align-items:center;gap:10px;
}
.gx-chaos-dice {
    width:64px;height:64px;display:grid;place-items:center;border-radius:17px;
    color:#d8c6f2;background:rgba(133,76,205,.10);border:1px solid rgba(170,106,247,.14);
    font-size:31px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.gx-chaos-roll-btn {
    min-height:48px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;
    border-radius:13px;color:white;background:linear-gradient(100deg,#7045d7,#9a43e2);
    border:1px solid rgba(190,123,255,.14);font:900 11px 'Kanit',sans-serif;
    cursor:pointer;box-shadow:0 12px 30px rgba(89,36,155,.18);
}
.gx-chaos-roll-btn:disabled { opacity:.34;cursor:not-allowed;box-shadow:none; }

.gx-chaos-pending-action {
    align-self:end;justify-self:stretch;
}
.gx-chaos-action-card {
    padding:10px;border-radius:12px;border:1px solid rgba(151,135,179,.10);
    background:rgba(5,8,15,.44);
}
.gx-chaos-action-card small { display:block;color:#72697c;font-size:6px; }
.gx-chaos-action-card strong { display:block;margin-top:2px;color:#eee7f4;font-size:11px; }
.gx-chaos-action-card>span { display:block;margin-top:2px;color:#7b7285;font-size:6.5px; }
.gx-chaos-action-card>div:not(.punishment-options) { margin-top:7px;display:flex;gap:6px; }
.gx-chaos-action-card .buy,.gx-chaos-action-card .pass {
    min-height:32px;padding:0 10px;border-radius:9px;font:800 7px 'Kanit',sans-serif;cursor:pointer;
}
.gx-chaos-action-card .buy {
    color:#d9fff2;background:rgba(42,164,118,.15);border:1px solid rgba(64,217,160,.16);
}
.gx-chaos-action-card .pass {
    color:#ada5b8;background:rgba(255,255,255,.03);border:1px solid rgba(159,146,184,.09);
}
.gx-chaos-action-card em { display:block;margin-top:7px;color:#7c7288;font-size:6.5px;font-style:normal; }
.punishment-options { margin-top:7px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px; }
.punishment-options button {
    min-height:46px;padding:5px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:#a89ab3;background:rgba(255,255,255,.025);border:1px solid rgba(159,146,184,.08);cursor:pointer;
}
.punishment-options button i { color:#d583b4; }
.punishment-options button b { margin-top:2px;color:#eee3f2;font-size:8px; }
.punishment-options button span { color:#716778;font-size:5.5px; }

.gx-chaos-rules-panel ul { margin:0;padding:0;list-style:none;display:grid;gap:7px; }
.gx-chaos-rules-panel li {
    min-height:38px;padding:7px;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:7px;
    border-radius:10px;background:rgba(5,9,17,.31);border:1px solid rgba(143,131,164,.07);
}
.gx-chaos-rules-panel li>i {
    width:28px;height:28px;display:grid;place-items:center;border-radius:8px;
    color:#a87ddb;background:rgba(133,76,205,.08);
}
.gx-chaos-rules-panel li span { color:#746d7c;font-size:7px;line-height:1.35; }
.gx-chaos-rules-panel li b { color:#c6bdcf; }

.gx-chaos-game-log { max-height:300px;overflow-y:auto;display:grid;gap:6px; }
.gx-chaos-game-log>div:not(.empty) {
    padding:7px;display:grid;grid-template-columns:24px 1fr;align-items:start;gap:7px;
    border-radius:9px;background:rgba(5,9,17,.28);
}
.gx-chaos-game-log>div>span {
    width:24px;height:24px;display:grid;place-items:center;border-radius:7px;
    color:#9c78c7;background:rgba(133,76,205,.07);font-size:7px;
}
.gx-chaos-game-log p { margin:0;color:#817989;font-size:6.5px;line-height:1.45; }
.gx-chaos-game-log .empty { color:#5e5864;font-size:7px;text-align:center;padding:18px 0; }

body.gx-chaos-player-drunk .gx-chaos-board-frame {
    animation:gxChaosDrunkGlow 1.8s ease-in-out infinite;
}
@keyframes gxChaosDrunkGlow {
    0%,100% { box-shadow:0 24px 65px rgba(0,0,0,.25),0 0 0 rgba(223,87,183,0); }
    50% { box-shadow:0 24px 65px rgba(0,0,0,.25),0 0 34px rgba(223,87,183,.12); }
}

@media (max-width:1180px) {
    .gx-chaos-game-layout {
        grid-template-columns: 220px minmax(560px,1fr);
    }
    .gx-chaos-game-layout>.gx-chaos-game-side:last-child {
        grid-column:1 / -1;
        grid-template-columns:1fr 1fr;
    }
}
@media (max-width:900px) {
    .gx-chaos-game-layout { grid-template-columns:1fr; }
    .gx-chaos-game-side,
    .gx-chaos-game-layout>.gx-chaos-game-side:last-child {
        grid-template-columns:1fr 1fr;
        grid-column:auto;
    }
    .gx-chaos-board-stage { order:-1; }
}
@media (max-width:680px) {
    .gx-chaos-create-modal { border-radius:18px !important; }
    .gx-chaos-mode-cards { grid-template-columns:1fr; }
    .gx-chaos-create-footer { grid-template-columns:1fr; }
    .gx-chaos-game-shell { width:min(100% - 12px,1500px);padding-top:8px; }
    .gx-chaos-game-topbar { align-items:flex-start;flex-direction:column; }
    .gx-chaos-game-top-actions { width:100%;justify-content:stretch; }
    .gx-chaos-game-top-actions button { flex:1;justify-content:center; }
    .gx-chaos-game-side,
    .gx-chaos-game-layout>.gx-chaos-game-side:last-child {
        grid-template-columns:1fr;
    }
    .gx-chaos-board-frame { padding:5px;overflow-x:auto; }
    .gx-chaos-board-grid { width:680px;min-width:680px; }
}


/* =====================================================================
   GX V32.1 — CHAOS READABILITY + STEP-BY-STEP MOVEMENT
   ===================================================================== */

/* Reduce the board footprint and reserve more space for readable UI. */
.gx-chaos-game-shell{
    width:min(1320px,calc(100% - 28px))!important;
    padding-top:16px!important;
}
.gx-chaos-game-layout{
    grid-template-columns:270px minmax(0,720px) 270px!important;
    justify-content:center!important;
    gap:14px!important;
}
.gx-chaos-board-stage{
    width:100%!important;
    max-width:720px!important;
    justify-self:center!important;
}
.gx-chaos-board-frame{
    padding:8px!important;
    border-radius:18px!important;
}

/* Header readability */
.gx-chaos-game-title-wrap small{font-size:9px!important;letter-spacing:.14em!important}
.gx-chaos-game-title-wrap h2{font-size:24px!important}
.gx-chaos-game-title-wrap p{margin-top:4px!important;font-size:11px!important}
.gx-chaos-build-chip{font-size:9px!important}
.gx-chaos-add-bot-btn,.gx-chaos-start-game-btn{
    min-height:42px!important;padding:0 15px!important;font-size:12px!important
}

/* Side panels — previously 6–8px, now actually readable. */
.gx-chaos-panel{padding:16px!important}
.gx-chaos-panel-head{margin-bottom:13px!important}
.gx-chaos-panel-head small{font-size:8px!important;letter-spacing:.14em!important}
.gx-chaos-panel-head strong{margin-top:2px!important;font-size:14px!important}
.gx-chaos-panel-head>span{font-size:10px!important}

.gx-chaos-game-player{
    min-height:64px!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    padding:10px!important;
    border-radius:13px!important
}
.gx-chaos-game-player .token{
    width:42px!important;height:42px!important;border-radius:12px!important;font-size:15px!important
}
.gx-chaos-game-player strong{font-size:12px!important}
.gx-chaos-game-player strong em{font-size:8px!important}
.gx-chaos-game-player small{font-size:8px!important}
.gx-chaos-game-player .mini-stats b{font-size:10px!important}
.gx-chaos-game-player .mini-stats small{font-size:8px!important}
.gx-chaos-game-player .moving-text{color:#c6a6ff!important;white-space:nowrap}
.gx-chaos-game-player.moving{
    border-color:rgba(183,120,255,.32)!important;
    background:rgba(127,70,194,.11)!important;
    box-shadow:inset 3px 0 0 #a66fff,0 0 22px rgba(143,78,220,.08)!important
}

/* My status */
.gx-chaos-stat-grid>div{min-height:66px!important;padding:11px!important}
.gx-chaos-stat-grid span{font-size:9px!important}
.gx-chaos-stat-grid strong{margin-top:5px!important;font-size:17px!important}
.gx-chaos-effect-list span{min-height:31px!important;font-size:9px!important}

/* Board cell typography */
.gx-chaos-board-grid{
    max-width:704px!important;
    margin:0 auto!important;
    gap:4px!important
}
.gx-chaos-board-cell{
    padding:6px 4px!important;
    border-radius:8px!important
}
.gx-chaos-board-cell .cell-index{
    top:3px!important;left:4px!important;font-size:6px!important
}
.gx-chaos-board-cell>i{font-size:14px!important}
.gx-chaos-board-cell>strong{
    margin-top:4px!important;
    font-size:8.5px!important;
    line-height:1.18!important
}
.gx-chaos-board-cell>small{
    margin-top:2px!important;
    font-size:7px!important
}

/* Pieces are now large, high contrast, and easy to track. */
.gx-chaos-board-tokens{
    right:4px!important;
    bottom:4px!important;
    gap:3px!important;
    max-width:calc(100% - 8px)
}
.gx-chaos-board-token{
    position:relative;
    width:25px!important;
    height:25px!important;
    border-radius:9px!important;
    color:#07101a!important;
    background:var(--token)!important;
    border:2px solid rgba(255,255,255,.94)!important;
    box-shadow:
        0 3px 10px rgba(0,0,0,.48),
        0 0 18px color-mix(in srgb,var(--token) 48%,transparent)!important;
    font-size:9px!important;
    font-weight:950!important;
    z-index:5;
    transition:transform .16s ease,box-shadow .16s ease!important
}
.gx-chaos-board-token>span{
    width:100%;
    height:100%;
    display:grid;
    place-items:center
}
.gx-chaos-board-token.moving{
    z-index:20;
    animation:gxChaosTokenHop .28s ease-in-out infinite alternate;
    box-shadow:
        0 6px 15px rgba(0,0,0,.55),
        0 0 0 4px rgba(255,255,255,.10),
        0 0 28px color-mix(in srgb,var(--token) 68%,transparent)!important
}
.gx-chaos-board-cell.gx-chaos-step-focus{
    transform:translateY(-1px);
    border-color:rgba(210,177,255,.46)!important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 0 22px rgba(155,99,239,.15)!important
}
@keyframes gxChaosTokenHop{
    from{transform:scale(1.10) translateY(-1px)}
    to{transform:scale(1.18) translateY(-5px)}
}

/* Center panel */
.gx-chaos-board-center{margin:6px!important;padding:20px!important;gap:15px!important}
.gx-chaos-board-center-brand>span{
    width:48px!important;height:48px!important;font-size:18px!important
}
.gx-chaos-board-center-brand small{margin-top:12px!important;font-size:8px!important}
.gx-chaos-board-center-brand strong{font-size:26px!important}
.gx-chaos-board-center-brand p{
    margin-top:5px!important;font-size:9px!important;line-height:1.5!important
}
.gx-chaos-turn-card{min-width:180px!important;padding:13px 14px!important}
.gx-chaos-turn-card small{font-size:7px!important}
.gx-chaos-turn-card strong{margin-top:4px!important;font-size:14px!important}
.gx-chaos-turn-card span{margin-top:3px!important;font-size:8px!important}
.gx-chaos-dice{width:72px!important;height:72px!important;font-size:36px!important}
.gx-chaos-roll-btn{min-height:52px!important;padding:0 20px!important;font-size:13px!important}

/* Pending / movement message */
.gx-chaos-action-card{padding:13px!important}
.gx-chaos-action-card small{font-size:8px!important}
.gx-chaos-action-card strong{margin-top:3px!important;font-size:13px!important}
.gx-chaos-action-card>span{
    margin-top:4px!important;font-size:9px!important;line-height:1.45!important
}
.gx-chaos-action-card .buy,.gx-chaos-action-card .pass{
    min-height:36px!important;padding:0 12px!important;font-size:9px!important
}
.gx-chaos-moving-status{
    border-color:rgba(166,111,255,.18)!important;
    background:rgba(113,64,174,.07)!important
}

/* Rules */
.gx-chaos-rules-panel li{
    min-height:48px!important;
    padding:9px!important;
    grid-template-columns:34px 1fr!important;
    gap:9px!important
}
.gx-chaos-rules-panel li>i{
    width:34px!important;height:34px!important;font-size:13px!important
}
.gx-chaos-rules-panel li span{
    font-size:10px!important;
    line-height:1.5!important
}

/* Match log */
.gx-chaos-game-log{max-height:330px!important;gap:8px!important}
.gx-chaos-game-log>div:not(.empty){
    padding:9px!important;
    grid-template-columns:30px 1fr!important;
    gap:9px!important
}
.gx-chaos-game-log>div>span{
    width:30px!important;height:30px!important;font-size:10px!important
}
.gx-chaos-game-log p{
    font-size:9.5px!important;
    line-height:1.55!important
}
.gx-chaos-game-log .empty{font-size:10px!important}

@media(max-width:1320px){
    .gx-chaos-game-layout{
        grid-template-columns:250px minmax(0,690px) 250px!important
    }
}
@media(max-width:1180px){
    .gx-chaos-game-layout{
        grid-template-columns:260px minmax(0,700px)!important
    }
    .gx-chaos-game-layout>.gx-chaos-game-side:last-child{
        grid-column:1/-1!important;
        grid-template-columns:1fr 1fr!important
    }
}
@media(max-width:900px){
    .gx-chaos-game-layout{grid-template-columns:1fr!important}
    .gx-chaos-board-stage{
        max-width:720px!important;
        margin:0 auto!important
    }
    .gx-chaos-game-side,
    .gx-chaos-game-layout>.gx-chaos-game-side:last-child{
        grid-template-columns:1fr 1fr!important
    }
}
@media(max-width:720px){
    .gx-chaos-board-frame{overflow-x:auto!important}
    .gx-chaos-board-grid{
        width:680px!important;
        min-width:680px!important
    }
    .gx-chaos-game-side,
    .gx-chaos-game-layout>.gx-chaos-game-side:last-child{
        grid-template-columns:1fr!important
    }
}


/* =====================================================================
   GX V33 — CHAOS CORE PVP
   Original identity: PVP 32 tiles + HP + Punishment + Status + Landmark
   ===================================================================== */

/* Retire the Monopoly visual language in CHAOS BOARD. */
.gx-chaos-board-cell.type-property,
.gx-chaos-board-cell.type-tax {
    background: rgba(14,18,31,.95) !important;
    border-color: rgba(143,131,164,.08) !important;
}

/* PVP spaces */
.gx-chaos-board-cell.type-battle {
    background: linear-gradient(145deg,rgba(96,35,75,.30),rgba(34,20,39,.88)) !important;
    border-color: rgba(255,102,174,.20) !important;
}
.gx-chaos-board-cell.type-battle > i {
    color:#ff76b9 !important;
}

/* Trap spaces */
.gx-chaos-board-cell.type-trap {
    background: linear-gradient(145deg,rgba(104,43,34,.30),rgba(37,22,24,.88)) !important;
    border-color: rgba(255,126,91,.18) !important;
}
.gx-chaos-board-cell.type-trap > i {
    color:#ff8b68 !important;
}

/* Supply / item spaces */
.gx-chaos-board-cell.type-shop {
    background: linear-gradient(145deg,rgba(44,64,108,.44),rgba(22,29,52,.92)) !important;
    border-color: rgba(112,157,255,.18) !important;
}
.gx-chaos-board-cell.type-shop > i {
    color:#7ca8ff !important;
}

/* Landmark is a major identity, not an ownable property. */
.gx-chaos-board-cell.type-landmark {
    background:
        radial-gradient(circle at 50% 0%,rgba(170,104,255,.18),transparent 65%),
        linear-gradient(145deg,rgba(75,42,115,.42),rgba(28,21,46,.95)) !important;
    border-color: rgba(190,126,255,.28) !important;
    box-shadow: inset 0 -3px 0 rgba(184,117,255,.18);
}
.gx-chaos-board-cell.type-landmark > i {
    color:#c395ff !important;
    filter:drop-shadow(0 0 8px rgba(177,106,255,.24));
}

/* Status badges */
.gx-chaos-effect-list .slow {
    color:#9bc6ff;
    background:rgba(75,137,232,.10);
    border:1px solid rgba(93,155,249,.14);
}
.gx-chaos-effect-list .bleed {
    color:#ff9eb7;
    background:rgba(221,71,110,.10);
    border:1px solid rgba(241,90,128,.14);
}
.gx-chaos-effect-list .shield {
    color:#b7f5e1;
    background:rgba(51,177,139,.10);
    border:1px solid rgba(72,211,169,.14);
}

/* PVP pending card */
.gx-chaos-pvp-card {
    border-color:rgba(236,94,163,.18) !important;
    background:
        radial-gradient(circle at 10% 0%,rgba(226,74,151,.10),transparent 42%),
        rgba(8,10,19,.66) !important;
}
.gx-chaos-pvp-targets {
    margin-top:10px;
    display:grid;
    gap:8px;
}
.gx-chaos-pvp-targets > article {
    padding:10px;
    border-radius:12px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(174,137,191,.10);
}
.gx-chaos-pvp-target-head {
    display:grid;
    grid-template-columns:34px 1fr;
    align-items:center;
    gap:8px;
}
.gx-chaos-pvp-target-head .avatar {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:#07101a;
    background:var(--token);
    border:2px solid rgba(255,255,255,.85);
    box-shadow:0 0 16px color-mix(in srgb,var(--token) 35%,transparent);
}
.gx-chaos-pvp-target-head > div {
    min-width:0;
    display:flex;
    flex-direction:column;
}
.gx-chaos-pvp-target-head strong {
    font-size:10px !important;
    color:#f1e9f6 !important;
}
.gx-chaos-pvp-target-head small {
    margin-top:2px;
    font-size:8px !important;
    color:#8c8294 !important;
}
.gx-chaos-pvp-actions {
    margin-top:8px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
}
.gx-chaos-pvp-actions button {
    min-height:44px;
    padding:6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border-radius:9px;
    cursor:pointer;
    font-family:'Kanit',sans-serif;
}
.gx-chaos-pvp-actions button i {
    font-size:11px;
}
.gx-chaos-pvp-actions button b {
    font-size:8px;
}
.gx-chaos-pvp-actions button span {
    font-size:6.5px;
    opacity:.72;
}
.gx-chaos-pvp-actions .strike {
    color:#ffc4d5;
    background:rgba(210,57,104,.11);
    border:1px solid rgba(242,86,132,.14);
}
.gx-chaos-pvp-actions .steal {
    color:#ffe1a0;
    background:rgba(191,137,31,.10);
    border:1px solid rgba(235,181,73,.13);
}
.gx-chaos-pvp-actions .curse {
    color:#b8d6ff;
    background:rgba(66,120,206,.10);
    border:1px solid rgba(87,146,237,.13);
}

/* Supply */
.gx-chaos-shop-card {
    border-color:rgba(95,143,231,.16) !important;
    background:
        radial-gradient(circle at 10% 0%,rgba(68,124,220,.08),transparent 42%),
        rgba(8,10,19,.66) !important;
}
.gx-chaos-shop-options {
    margin-top:9px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
}
.gx-chaos-shop-options button {
    min-height:54px;
    padding:6px 5px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border-radius:9px;
    color:#bfd2f7;
    background:rgba(75,112,177,.08);
    border:1px solid rgba(97,143,223,.11);
    cursor:pointer;
    font-family:'Kanit',sans-serif;
}
.gx-chaos-shop-options button i {font-size:11px}
.gx-chaos-shop-options button b {font-size:8px;color:#edf4ff}
.gx-chaos-shop-options button span {font-size:6px;opacity:.7}
.gx-chaos-shop-options button.pass {
    color:#9e96a8;
    background:rgba(255,255,255,.025);
    border-color:rgba(154,142,173,.08);
}

/* Make original identity visible at a glance. */
.gx-chaos-board-center-brand p {
    color:#8e829c !important;
}
.gx-chaos-core-card > span,
.gx-chaos-shop-card > span,
.gx-chaos-pvp-card > span {
    color:#95889f !important;
}

@media(max-width:900px){
    .gx-chaos-pvp-actions{grid-template-columns:1fr}
    .gx-chaos-shop-options{grid-template-columns:1fr 1fr}
}


/* =====================================================================
   GX V34 — CHAOS BOARD / CLEAR PLAY FLOW
   Goal: make the game understandable without reading a manual.
   ===================================================================== */

.gx-chaos-lobby-screen,
.gx-chaos-game-screen{
    --chaos-bg:#080a13;
    --chaos-card:#111526;
    --chaos-card-2:#151a2e;
    --chaos-line:rgba(144,116,190,.16);
    --chaos-purple:#9b5cff;
    --chaos-pink:#f45ca7;
    --chaos-blue:#5f8dff;
    --chaos-green:#56dda2;
    --chaos-text:#f5f2fb;
    --chaos-muted:#928aa1;
}

/* Lobby reads as a game, not a dev console. */
.gx-chaos-lobby-hero{
    background:
        radial-gradient(circle at 80% 10%,rgba(139,75,234,.18),transparent 34%),
        linear-gradient(135deg,rgba(24,29,54,.98),rgba(35,19,51,.95))!important;
}
.gx-chaos-lobby-hero h1{
    font-size:clamp(34px,4vw,58px)!important;
    letter-spacing:-.035em!important;
}
.gx-chaos-lobby-hero p{
    max-width:760px!important;
    font-size:15px!important;
    line-height:1.65!important;
}
.gx-chaos-dev-banner{
    opacity:.76;
    min-height:58px!important;
}
.gx-chaos-feature-grid article{
    min-height:92px!important;
    padding:18px!important;
}
.gx-chaos-feature-grid article small{
    font-size:10px!important;
    letter-spacing:.12em!important;
}
.gx-chaos-feature-grid article strong{
    margin-top:5px!important;
    font-size:17px!important;
}
.gx-chaos-howto-steps>div{
    min-height:54px!important;
}
.gx-chaos-howto-steps span{
    font-size:12px!important;
}

/* Create room */
.gx-chaos-create-modal{
    width:min(760px,calc(100vw - 30px))!important;
}
.gx-chaos-create-title h3{
    font-size:24px!important;
}
.gx-chaos-create-title p,
.gx-chaos-create-section-head span,
.gx-chaos-create-info span{
    font-size:12px!important;
    line-height:1.55!important;
}
.gx-chaos-mode-card{
    min-height:88px!important;
}
.gx-chaos-mode-card .copy b{font-size:14px!important}
.gx-chaos-mode-card .copy small{font-size:10px!important;line-height:1.35!important}

/* Match shell: board is still the focus, sidebars are supporting info. */
.gx-chaos-game-shell{
    width:min(1440px,calc(100% - 28px))!important;
}
.gx-chaos-game-layout{
    grid-template-columns:250px minmax(0,760px) 280px!important;
    gap:16px!important;
    align-items:start!important;
}
.gx-chaos-board-stage{
    max-width:760px!important;
}

/* Goal card */
.gx-chaos-goal-card{
    align-items:flex-start!important;
    text-align:left!important;
}
.gx-chaos-goal-card>span{
    width:42px!important;
    height:42px!important;
    border-radius:13px!important;
    color:#ffe3a3!important;
    background:linear-gradient(145deg,rgba(171,112,25,.28),rgba(82,48,15,.32))!important;
    border:1px solid rgba(255,197,84,.18)!important;
}
.gx-chaos-goal-card small{
    color:#c99d55!important;
}
.gx-chaos-goal-card strong{
    font-size:21px!important;
}
.gx-chaos-goal-card p{
    font-size:10px!important;
}

/* Main instruction card */
.gx-chaos-turn-flow{
    width:100%;
    padding:16px;
    border-radius:16px;
    background:
        linear-gradient(145deg,rgba(22,29,51,.94),rgba(13,16,29,.96));
    border:1px solid rgba(104,142,232,.16);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.gx-chaos-turn-flow-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
#gx-chaos-phase-pill{
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:0 10px;
    border-radius:999px;
    font-size:9px;
    font-weight:900;
    color:#c6d7ff;
    background:rgba(67,111,207,.12);
    border:1px solid rgba(93,143,244,.16);
}
#gx-chaos-phase-pill[data-phase="your_roll"],
#gx-chaos-phase-pill[data-phase="your_action"]{
    color:#c7ffe5;
    background:rgba(57,183,127,.12);
    border-color:rgba(80,218,158,.20);
}
#gx-chaos-phase-pill[data-phase="moving"]{
    color:#ead4ff;
    background:rgba(137,74,218,.14);
    border-color:rgba(174,111,255,.20);
}
#gx-chaos-phase-pill[data-phase="finished"]{
    color:#ffe8aa;
    background:rgba(193,133,29,.13);
    border-color:rgba(246,187,62,.20);
}
.gx-chaos-turn-flow-head b{
    font-size:9px;
    color:#817a8e;
    letter-spacing:.08em;
}
.gx-chaos-turn-flow>strong{
    display:block;
    margin-top:10px;
    font-size:16px;
    color:#f3eff9;
}
.gx-chaos-turn-flow>p{
    margin:5px 0 0;
    font-size:10px;
    line-height:1.55;
    color:#8e8798;
}
.gx-chaos-turn-steps{
    margin-top:13px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
}
.gx-chaos-turn-steps span{
    min-height:34px;
    padding:0 7px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    border-radius:9px;
    font-size:8px;
    font-weight:800;
    color:#6f697c;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.04);
}
.gx-chaos-turn-steps span i{
    width:17px;
    height:17px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-style:normal;
    font-size:7px;
    background:rgba(255,255,255,.05);
}
.gx-chaos-turn-steps span.done{
    color:#72d4a8;
    border-color:rgba(86,210,155,.10);
}
.gx-chaos-turn-steps span.active{
    color:#eef3ff;
    background:linear-gradient(135deg,rgba(65,107,218,.18),rgba(129,67,217,.18));
    border-color:rgba(104,133,245,.20);
    box-shadow:0 0 22px rgba(95,89,225,.08);
}
.gx-chaos-turn-steps span.active i{
    color:#fff;
    background:linear-gradient(135deg,#4c7fff,#9754ef);
}

/* Current player card kept small: instruction card is now the primary focus. */
.gx-chaos-turn-card{
    width:100%!important;
    min-width:0!important;
    text-align:left!important;
    padding:12px 14px!important;
}
.gx-chaos-turn-card strong{
    font-size:14px!important;
}
.gx-chaos-turn-card span{
    font-size:8px!important;
}

/* Dice CTA becomes unmistakable. */
.gx-chaos-dice-area{
    width:100%!important;
    grid-template-columns:70px 1fr!important;
    gap:10px!important;
}
.gx-chaos-dice{
    width:70px!important;
    height:58px!important;
    border-radius:14px!important;
    font-size:29px!important;
}
#gx-chaos-roll-btn{
    min-height:58px!important;
    border-radius:14px!important;
    font-size:13px!important;
    font-weight:900!important;
}
#gx-chaos-roll-btn:not(:disabled){
    background:linear-gradient(135deg,#416ff0,#8b43ed)!important;
    box-shadow:0 12px 30px rgba(91,82,232,.22)!important;
}
#gx-chaos-roll-btn:disabled{
    opacity:.48!important;
}

/* My status: HP should be readable in one glance. */
.gx-chaos-my-hp-track,
.gx-chaos-player-hp{
    display:block;
    overflow:hidden;
    background:rgba(255,255,255,.055);
}
.gx-chaos-my-hp-track{
    height:8px;
    margin-top:10px;
    border-radius:999px;
}
.gx-chaos-my-hp-track>i,
.gx-chaos-player-hp>i{
    display:block;
    height:100%;
    width:0;
    border-radius:inherit;
    background:linear-gradient(90deg,#4bd69b,#7ce9b9);
    transition:width .28s ease;
}
.gx-chaos-my-hp-track>i[data-hp="warning"]{
    background:linear-gradient(90deg,#e9a53c,#ffd062);
}
.gx-chaos-my-hp-track>i[data-hp="critical"]{
    background:linear-gradient(90deg,#e34f6c,#ff7a8f);
}
.gx-chaos-player-hp{
    height:4px;
    margin-top:6px;
    border-radius:999px;
}
.gx-chaos-player-hp>i{
    background:linear-gradient(90deg,#5ed59f,#8febbd);
}
.gx-chaos-game-player.active{
    border-color:rgba(116,146,255,.32)!important;
    box-shadow:
        inset 3px 0 0 #6f85ff,
        0 0 0 1px rgba(92,117,227,.05),
        0 10px 30px rgba(45,51,118,.12)!important;
}
.gx-chaos-game-player.active::after{
    content:"กำลังเล่น";
    position:absolute;
    top:7px;
    right:8px;
    font-size:6px;
    font-weight:900;
    color:#bcd1ff;
    letter-spacing:.05em;
}
.gx-chaos-game-player{
    position:relative!important;
}

/* Board cells: readable Thai labels and stronger identity by type. */
.gx-chaos-board-cell>strong{
    font-size:9px!important;
    line-height:1.2!important;
}
.gx-chaos-board-cell>small{
    font-size:7px!important;
    line-height:1.15!important;
    color:#888193!important;
}
.gx-chaos-board-cell.type-battle{
    background:linear-gradient(145deg,rgba(100,29,66,.36),rgba(39,18,34,.94))!important;
}
.gx-chaos-board-cell.type-event{
    background:linear-gradient(145deg,rgba(104,77,24,.28),rgba(43,32,16,.94))!important;
}
.gx-chaos-board-cell.type-heal{
    background:linear-gradient(145deg,rgba(23,92,73,.30),rgba(14,43,36,.94))!important;
}
.gx-chaos-board-cell.type-punish{
    background:linear-gradient(145deg,rgba(109,28,70,.34),rgba(46,17,37,.96))!important;
}
.gx-chaos-board-cell.type-trap{
    background:linear-gradient(145deg,rgba(108,45,29,.32),rgba(44,24,18,.95))!important;
}
.gx-chaos-board-cell.type-shop{
    background:linear-gradient(145deg,rgba(36,65,119,.34),rgba(21,31,55,.96))!important;
}
.gx-chaos-board-cell.type-landmark{
    background:
        radial-gradient(circle at 50% 0%,rgba(169,94,255,.16),transparent 60%),
        linear-gradient(145deg,rgba(75,41,116,.43),rgba(27,20,47,.96))!important;
}

/* Last result banner keeps instant events from feeling invisible/confusing. */
.gx-chaos-last-notice{
    width:100%;
    grid-template-columns:38px 1fr;
    gap:10px;
    align-items:center;
    padding:11px 12px;
    border-radius:13px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(151,136,178,.08);
}
.gx-chaos-last-notice-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#c6b2e7;
    background:rgba(122,80,180,.10);
}
.gx-chaos-last-notice small{
    display:block;
    font-size:7px;
    color:#756e80;
    letter-spacing:.08em;
}
.gx-chaos-last-notice strong{
    display:block;
    margin-top:2px;
    font-size:11px;
    color:#e9e3f0;
}
.gx-chaos-last-notice p{
    margin:2px 0 0;
    font-size:9px;
    line-height:1.4;
    color:#98909f;
}
.gx-chaos-last-notice[data-kind="pvp"]{
    border-color:rgba(238,87,153,.15);
}
.gx-chaos-last-notice[data-kind="heal"]{
    border-color:rgba(82,215,157,.14);
}
.gx-chaos-last-notice[data-kind="trap"],
.gx-chaos-last-notice[data-kind="punish"]{
    border-color:rgba(239,98,101,.14);
}

/* Pending choices are the current task — make them visually dominant. */
.gx-chaos-pending-action:not(:empty){
    width:100%;
}
.gx-chaos-action-card{
    width:100%!important;
    padding:14px!important;
    border-radius:15px!important;
    box-shadow:0 14px 35px rgba(0,0,0,.18)!important;
}
.gx-chaos-action-card>strong{
    font-size:14px!important;
}
.gx-chaos-action-card>span{
    font-size:9px!important;
}
.punishment-options,
.gx-chaos-shop-options{
    gap:8px!important;
}
.punishment-options button,
.gx-chaos-shop-options button{
    min-height:62px!important;
    font-size:10px!important;
}
.gx-chaos-pvp-targets>article{
    padding:12px!important;
}
.gx-chaos-pvp-target-head strong{
    font-size:11px!important;
}
.gx-chaos-pvp-target-head small{
    font-size:9px!important;
}
.gx-chaos-pvp-actions button{
    min-height:52px!important;
}
.gx-chaos-pvp-actions button b{
    font-size:9px!important;
}
.gx-chaos-pvp-actions button span{
    font-size:7px!important;
}

/* Right panel: only what the player needs during a match. */
.gx-chaos-simple-rules li{
    min-height:54px!important;
}
.gx-chaos-simple-rules li span{
    font-size:9.5px!important;
    line-height:1.5!important;
}
.gx-chaos-tile-legend{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.05);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}
.gx-chaos-tile-legend span{
    min-height:31px;
    padding:0 8px;
    display:flex;
    align-items:center;
    gap:6px;
    border-radius:8px;
    font-size:8px;
    font-weight:800;
    color:#9991a3;
    background:rgba(255,255,255,.024);
    border:1px solid rgba(255,255,255,.04);
}
.gx-chaos-tile-legend .battle{color:#f0a3c9}
.gx-chaos-tile-legend .event{color:#e9c978}
.gx-chaos-tile-legend .heal{color:#82dab4}
.gx-chaos-tile-legend .punish{color:#e58eb5}
.gx-chaos-tile-legend .trap{color:#e9a087}
.gx-chaos-tile-legend .shop{color:#9abaff}
.gx-chaos-tile-legend .landmark{color:#c7a2f7}
.gx-chaos-tile-legend .start{color:#80d6b7}

/* Match log less dominant. */
.gx-chaos-log-panel{
    opacity:.86;
}
.gx-chaos-game-log{
    max-height:270px!important;
}

/* Responsive */
@media(max-width:1280px){
    .gx-chaos-game-layout{
        grid-template-columns:230px minmax(0,720px) 250px!important;
    }
}
@media(max-width:1120px){
    .gx-chaos-game-layout{
        grid-template-columns:240px minmax(0,720px)!important;
    }
    .gx-chaos-game-layout>.gx-chaos-game-side:last-child{
        grid-column:1/-1!important;
        grid-template-columns:1fr 1fr!important;
    }
}
@media(max-width:820px){
    .gx-chaos-game-layout{
        grid-template-columns:1fr!important;
    }
    .gx-chaos-game-side,
    .gx-chaos-game-layout>.gx-chaos-game-side:last-child{
        grid-template-columns:1fr!important;
    }
    .gx-chaos-turn-steps{
        grid-template-columns:1fr 1fr!important;
    }
}


/* =====================================================================
   GX V35 — GAME-SPECIFIC SHOPS + FASTER CHAOS + DICE ANIMATION
   ===================================================================== */

/* ---------- WORD GAME right helper shop ---------- */
#active-game-zone.gx-word-match{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 270px;
    gap:14px;
    align-items:start;
}
#active-game-zone.gx-word-match[style*="display:none"],
#active-game-zone.gx-word-match[style*="display: none"]{
    display:none !important;
}
.gx-word-helper-shop{
    position:sticky;
    top:92px;
    padding:16px;
    border-radius:18px;
    background:
        radial-gradient(circle at 100% 0%,rgba(73,113,255,.11),transparent 42%),
        rgba(13,18,33,.96);
    border:1px solid rgba(93,127,220,.16);
    box-shadow:0 18px 42px rgba(0,0,0,.18);
}
.gx-word-helper-shop-head{
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
}
.gx-word-helper-shop-icon{
    width:40px;height:40px;display:grid;place-items:center;
    border-radius:12px;color:#8eb3ff;
    background:rgba(67,112,221,.12);
    border:1px solid rgba(86,135,247,.16);
}
.gx-word-helper-shop-head small{
    display:block;font-size:8px;font-weight:900;letter-spacing:.12em;color:#6596ff;
}
.gx-word-helper-shop-head strong{
    display:block;margin-top:2px;font-size:14px;color:#eef3ff;
}
.gx-word-shop-wallet{
    min-height:28px;padding:0 8px;display:inline-flex;align-items:center;gap:5px;
    border-radius:999px;font-size:8px;font-weight:900;color:#ffd66c;
    background:rgba(181,132,32,.09);border:1px solid rgba(235,177,57,.13);
}
.gx-word-helper-category{
    margin-top:14px;
}
.gx-word-helper-category-title{
    margin-bottom:7px;display:flex;align-items:center;gap:6px;
    font-size:9px;font-weight:900;color:#9aa8c7;
}
.gx-word-helper-category button{
    width:100%;min-height:58px;margin-top:6px;padding:8px;
    display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:8px;align-items:center;
    border-radius:11px;text-align:left;cursor:pointer;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(124,147,195,.09);
    font-family:'Kanit',sans-serif;
    transition:.18s ease;
}
.gx-word-helper-category button:hover:not(:disabled){
    transform:translateY(-1px);
    border-color:rgba(102,143,241,.24);
    background:rgba(71,105,184,.07);
}
.gx-word-helper-category button:disabled{
    opacity:.42;cursor:not-allowed;
}
.gx-word-helper-category button.used{
    opacity:.35;
}
.gx-word-helper-category button .icon{
    width:36px;height:36px;display:grid;place-items:center;border-radius:10px;
    color:#8fb0ff;background:rgba(74,112,213,.10);
}
.gx-word-helper-category button .icon.time{
    color:#b69aff;background:rgba(121,78,206,.10);
}
.gx-word-helper-category button div{
    min-width:0;display:flex;flex-direction:column;
}
.gx-word-helper-category button b{
    font-size:10px;color:#e4ebfa;
}
.gx-word-helper-category button small{
    margin-top:2px;font-size:7px;line-height:1.35;color:#7d88a3;
}
.gx-word-helper-category button em{
    min-width:34px;padding:3px 6px;border-radius:999px;
    font-size:8px;font-style:normal;font-weight:900;text-align:center;
    color:#ffda73;background:rgba(181,132,32,.09);
}
.gx-word-helper-result{
    margin-top:14px;padding:11px;display:grid;grid-template-columns:24px 1fr;gap:7px;
    border-radius:11px;color:#aebfe3;background:rgba(63,92,154,.07);
    border:1px solid rgba(84,120,194,.10);
    font-size:9px;line-height:1.5;
}
.gx-word-helper-result i{color:#73a3ff;margin-top:2px}
.gx-word-helper-footnote{
    margin:10px 0 0;font-size:7.5px;color:#6d7790;text-align:center;
}
.gx-word-shop-rank-lock{
    margin-top:12px;padding:10px;gap:8px;align-items:flex-start;
    border-radius:10px;color:#e6c985;background:rgba(129,90,20,.08);
    border:1px solid rgba(194,141,35,.12);font-size:8px;line-height:1.4;
}

/* ---------- CHAOS right shop ---------- */
.gx-chaos-shop-panel{
    padding:14px !important;
}
.gx-chaos-shop-wallet{
    min-height:27px;padding:0 8px;display:inline-flex;align-items:center;gap:5px;
    border-radius:999px;color:#ffd76f;background:rgba(181,132,32,.09);
    border:1px solid rgba(226,170,55,.13);font-size:8px;font-weight:900;
}
.gx-chaos-shop-note{
    margin:-3px 0 10px;font-size:7.5px;line-height:1.45;color:#776f82;
}
.gx-chaos-shop-target-wrap{
    display:block;margin-bottom:10px;
}
.gx-chaos-shop-target-wrap>span{
    display:block;margin-bottom:5px;font-size:7.5px;font-weight:800;color:#8d8498;
}
.gx-chaos-shop-target-wrap select{
    width:100%;height:34px;padding:0 9px;border-radius:9px;
    color:#d7cfdf;background:#0a0d17;border:1px solid rgba(152,128,179,.12);
    font-family:'Kanit',sans-serif;font-size:9px;
}
.gx-chaos-shop-category{
    margin-top:11px;
}
.gx-chaos-shop-category-head{
    display:flex;align-items:center;gap:6px;margin-bottom:5px;
    font-size:8px;font-weight:900;color:#9d91ad;letter-spacing:.05em;
}
.gx-chaos-shop-category-head.prank{color:#9dc3ff}
.gx-chaos-shop-category-head.attack{color:#ff9eb7}
.gx-chaos-shop-items{
    display:grid;gap:5px;
}
.gx-chaos-shop-items>button{
    width:100%;min-height:52px;padding:7px;
    display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:7px;align-items:center;
    border-radius:10px;text-align:left;cursor:pointer;
    color:#d9d0e1;background:rgba(255,255,255,.022);
    border:1px solid rgba(153,131,178,.08);
    font-family:'Kanit',sans-serif;
}
.gx-chaos-shop-items>button:hover:not(:disabled){
    background:rgba(106,72,151,.07);
    border-color:rgba(164,112,230,.18);
}
.gx-chaos-shop-items>button:disabled{
    opacity:.32;cursor:not-allowed;
}
.gx-chaos-shop-items .icon{
    width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
    color:#b897eb;background:rgba(118,75,176,.10);
}
.gx-chaos-shop-items .icon.heal{color:#79ddb3;background:rgba(54,166,124,.09)}
.gx-chaos-shop-items .icon.shield{color:#8db5ff;background:rgba(71,111,194,.09)}
.gx-chaos-shop-items .icon.prank{color:#9bc3ff;background:rgba(63,113,191,.09)}
.gx-chaos-shop-items .icon.attack{color:#ff9ab3;background:rgba(185,58,92,.09)}
.gx-chaos-shop-items>button div{
    min-width:0;display:flex;flex-direction:column;
}
.gx-chaos-shop-items>button b{
    font-size:8.5px;color:#e7e0ed;
}
.gx-chaos-shop-items>button small{
    margin-top:1px;font-size:6.5px;line-height:1.3;color:#786f82;
}
.gx-chaos-shop-items>button em{
    padding:3px 5px;border-radius:999px;font-size:7px;font-style:normal;font-weight:900;
    color:#ffd365;background:rgba(178,127,25,.08);
}
.gx-chaos-shop-inventory{
    margin-top:12px;padding:9px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
    border-radius:10px;background:rgba(88,65,121,.07);border:1px solid rgba(145,102,200,.10);
}
.gx-chaos-shop-inventory>div{
    display:flex;flex-direction:column;
}
.gx-chaos-shop-inventory span{
    font-size:7px;color:#81778d;
}
.gx-chaos-shop-inventory b{
    margin-top:2px;font-size:9px;color:#d9c8ef;
}
.gx-chaos-shop-inventory button{
    min-height:31px;padding:0 9px;border-radius:8px;cursor:pointer;
    color:#ddc7ff;background:rgba(126,75,196,.11);border:1px solid rgba(158,100,235,.15);
    font-family:'Kanit',sans-serif;font-size:8px;font-weight:900;
}
.gx-chaos-shop-inventory button:disabled{opacity:.35;cursor:not-allowed}
.gx-chaos-dice-lock-picker{
    margin-top:7px;padding:8px;border-radius:10px;
    background:rgba(9,11,20,.78);border:1px solid rgba(146,105,197,.10);
}
.gx-chaos-dice-lock-picker>span{
    display:block;margin-bottom:7px;font-size:7px;color:#82788e;text-align:center;
}
.gx-chaos-dice-lock-picker>div{
    display:grid;grid-template-columns:repeat(6,1fr);gap:4px;
}
.gx-chaos-dice-lock-picker button{
    aspect-ratio:1;border-radius:7px;cursor:pointer;
    color:#f1e9fa;background:rgba(117,73,174,.10);border:1px solid rgba(163,111,229,.14);
    font-family:'Kanit',sans-serif;font-weight:900;font-size:9px;
}
.gx-chaos-shop-status{
    margin-top:8px;padding:8px;border-radius:9px;text-align:center;
    font-size:7.5px;line-height:1.4;color:#777080;background:rgba(255,255,255,.018);
}

/* ---------- CHAOS board new active tile types ---------- */
.gx-chaos-board-cell.type-bonus{
    background:linear-gradient(145deg,rgba(104,77,24,.30),rgba(43,32,16,.95))!important;
    border-color:rgba(234,188,73,.18)!important;
}
.gx-chaos-board-cell.type-bonus>i{color:#ffd267!important}
.gx-chaos-board-cell.type-steal{
    background:linear-gradient(145deg,rgba(47,69,106,.35),rgba(22,32,51,.96))!important;
    border-color:rgba(103,151,229,.17)!important;
}
.gx-chaos-board-cell.type-steal>i{color:#8db7ff!important}
.gx-chaos-board-cell.type-curse{
    background:linear-gradient(145deg,rgba(79,46,107,.38),rgba(35,22,48,.96))!important;
    border-color:rgba(173,104,230,.19)!important;
}
.gx-chaos-board-cell.type-curse>i{color:#c390ff!important}
.gx-chaos-board-cell.type-blast{
    background:linear-gradient(145deg,rgba(116,42,45,.38),rgba(47,21,25,.97))!important;
    border-color:rgba(239,92,102,.20)!important;
}
.gx-chaos-board-cell.type-blast>i{color:#ff8992!important}
.gx-chaos-tile-legend .steal{color:#9bc2ff}
.gx-chaos-tile-legend .blast{color:#ff9ea7}
.gx-chaos-tile-legend .bonus{color:#f0ce78}

/* ---------- Dice animation ---------- */
.gx-chaos-dice{
    transform-origin:center;
    will-change:transform,filter;
}
.gx-chaos-dice.rolling{
    animation:gxChaosDiceShake .22s linear infinite;
    color:#f1ddff!important;
    border-color:rgba(190,124,255,.38)!important;
    box-shadow:0 0 0 4px rgba(150,84,222,.06),0 12px 32px rgba(117,65,183,.22)!important;
}
.gx-chaos-dice.landed{
    animation:gxChaosDiceLand .32s cubic-bezier(.2,.9,.3,1.25);
    color:#fff2b5!important;
    box-shadow:0 0 25px rgba(255,205,92,.18)!important;
}
@keyframes gxChaosDiceShake{
    0%{transform:translate(-1px,-1px) rotate(-7deg) scale(.98)}
    25%{transform:translate(2px,-1px) rotate(9deg) scale(1.04)}
    50%{transform:translate(-2px,2px) rotate(-11deg) scale(1)}
    75%{transform:translate(1px,1px) rotate(8deg) scale(1.05)}
    100%{transform:translate(0,0) rotate(0) scale(1)}
}
@keyframes gxChaosDiceLand{
    0%{transform:scale(.72) rotate(-15deg)}
    65%{transform:scale(1.18) rotate(5deg)}
    100%{transform:scale(1) rotate(0)}
}
#gx-chaos-phase-pill[data-phase="rolling"]{
    color:#f0d8ff;
    background:rgba(136,73,207,.15);
    border-color:rgba(181,111,255,.22);
}

/* Expanded PVP actions */
.gx-chaos-pvp-actions{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.gx-chaos-pvp-actions .heavy{
    color:#ffd0aa;background:rgba(185,92,36,.10);border:1px solid rgba(226,123,57,.14);
}
.gx-chaos-pvp-actions .drain{
    color:#ffb2c7;background:rgba(177,55,93,.10);border:1px solid rgba(226,84,127,.14);
}
.gx-chaos-pvp-actions .push{
    color:#c9b3ff;background:rgba(104,68,177,.10);border:1px solid rgba(145,100,224,.14);
}

/* Slightly larger right column now that it contains an actual shop */
.gx-chaos-game-layout{
    grid-template-columns:250px minmax(0,760px) 310px!important;
}
.gx-chaos-game-side:last-child{
    gap:12px!important;
}

@media(max-width:1260px){
    .gx-chaos-game-layout{
        grid-template-columns:230px minmax(0,720px) 285px!important;
    }
}
@media(max-width:1120px){
    #active-game-zone.gx-word-match{
        grid-template-columns:1fr!important;
    }
    .gx-word-helper-shop{
        position:static;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px 14px;
    }
    .gx-word-helper-shop-head,
    .gx-word-shop-rank-lock,
    .gx-word-helper-result,
    .gx-word-helper-footnote{
        grid-column:1/-1;
    }
}
@media(max-width:760px){
    .gx-word-helper-shop{
        grid-template-columns:1fr;
    }
    .gx-word-helper-shop-head,
    .gx-word-shop-rank-lock,
    .gx-word-helper-result,
    .gx-word-helper-footnote{
        grid-column:auto;
    }
    .gx-chaos-pvp-actions{
        grid-template-columns:1fr 1fr!important;
    }
}


/* =====================================================================
   GX V36 — PERSISTENT ITEM SHOP / INVENTORY
   ===================================================================== */

.gx-inventory-menu-count{
    min-width:22px;height:22px;padding:0 6px;
    display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;border-radius:999px;
    color:#d8c8ff;background:rgba(116,72,196,.16);
    border:1px solid rgba(157,107,239,.18);
    font-size:10px;font-weight:900;
}
.gx-shop-menu-btn i{color:#a889ff}
.gx-inventory-menu-btn i{color:#73a8ff}

/* ---------- Shop modal ---------- */
.gx-item-shop-overlay,
.gx-inventory-overlay{
    z-index:16000 !important;
    padding:22px;
    backdrop-filter:blur(14px);
    background:rgba(3,5,13,.78) !important;
}
.gx-item-shop-modal{
    width:min(1040px,96vw)!important;
    max-height:min(840px,92vh)!important;
    overflow:hidden!important;
    border-radius:26px!important;
    padding:0!important;
    background:
        radial-gradient(circle at 85% 0%,rgba(111,72,229,.12),transparent 34%),
        #101524!important;
    border:1px solid rgba(110,127,172,.18)!important;
    box-shadow:0 34px 100px rgba(0,0,0,.50)!important;
}
.gx-item-shop-head{
    min-height:110px;padding:24px 26px;
    display:grid;grid-template-columns:minmax(0,1fr) auto 42px;gap:16px;align-items:center;
    border-bottom:1px solid rgba(255,255,255,.055);
}
.gx-item-shop-title{
    display:flex;gap:14px;align-items:center;min-width:0;
}
.gx-item-shop-title>.icon{
    width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center;
    border-radius:16px;color:#aa8bff;
    background:linear-gradient(145deg,rgba(104,74,192,.18),rgba(59,43,116,.18));
    border:1px solid rgba(143,102,236,.18);
    font-size:20px;
}
.gx-item-shop-title b{
    display:block;font-size:10px;letter-spacing:.14em;color:#78a8ff;
}
.gx-item-shop-title h3{
    margin:3px 0 0;font-size:26px;color:#f7f4fb;letter-spacing:-.02em;
}
.gx-item-shop-title p{
    margin:4px 0 0;font-size:11px;color:#7e879f;line-height:1.45;
}
.gx-item-shop-wallet{
    min-width:142px;padding:11px 13px;display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;
    border-radius:14px;color:#ffd469;background:rgba(186,132,25,.08);
    border:1px solid rgba(231,178,69,.12);
}
.gx-item-shop-wallet>i{font-size:17px;text-align:center}
.gx-item-shop-wallet small{display:block;font-size:8px;color:#8b7b59}
.gx-item-shop-wallet strong{display:block;margin-top:1px;font-size:17px;color:#ffe39a}
.gx-item-shop-close,
.gx-inventory-head>button{
    width:42px;height:42px;display:grid;place-items:center;border-radius:12px;cursor:pointer;
    color:#8992a8;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
}
.gx-item-shop-tabs{
    padding:14px 22px 0;display:flex;gap:8px;
}
.gx-item-shop-tabs button{
    min-height:42px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;
    border-radius:11px;cursor:pointer;color:#7f879b;background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.045);font-family:'Kanit',sans-serif;font-weight:800;
}
.gx-item-shop-tabs button.active{
    color:#dbe7ff;background:rgba(65,105,199,.12);border-color:rgba(86,137,241,.18);
}
.gx-item-shop-tabs button[data-shop-game="chaos"].active{
    color:#ead9ff;background:rgba(114,67,181,.13);border-color:rgba(162,98,238,.18);
}
.gx-item-shop-body{
    max-height:calc(92vh - 240px);overflow:auto;padding:16px 22px 24px;
}
.gx-item-shop-game-info{
    margin-bottom:14px;padding:13px 15px;display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;
    border-radius:14px;background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.045);
}
.gx-item-shop-game-info>span{
    width:42px;height:42px;display:grid;place-items:center;border-radius:11px;
    color:#8dabff;background:rgba(67,104,190,.10);
}
.gx-item-shop-game-info small{
    display:block;font-size:8px;font-weight:900;letter-spacing:.12em;color:#6f8bc6;
}
.gx-item-shop-game-info strong{
    display:block;margin-top:2px;font-size:15px;color:#e7edf9;
}
.gx-item-shop-game-info p{
    margin:3px 0 0;font-size:9px;color:#798197;
}
.gx-item-shop-grid{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
.gx-store-item{
    min-height:250px;padding:16px;display:flex;flex-direction:column;
    border-radius:17px;background:rgba(255,255,255,.022);
    border:1px solid rgba(132,147,184,.075);
    position:relative;overflow:hidden;
}
.gx-store-item::before{
    content:"";position:absolute;inset:0 0 auto;height:3px;opacity:.72;
    background:linear-gradient(90deg,#5188ff,#9957ed);
}
.gx-store-item.tone-green::before{background:linear-gradient(90deg,#3ec98e,#78e8b8)}
.gx-store-item.tone-red::before{background:linear-gradient(90deg,#e54a64,#ff775f)}
.gx-store-item.tone-pink::before{background:linear-gradient(90deg,#ee5a9b,#a75bf0)}
.gx-store-item.tone-cyan::before{background:linear-gradient(90deg,#42b6d7,#648dff)}
.gx-store-item-icon{
    width:50px;height:50px;display:grid;place-items:center;border-radius:15px;
    color:#a3baff;background:rgba(75,104,185,.10);border:1px solid rgba(91,127,218,.12);
    font-size:19px;
}
.gx-store-item-copy{margin-top:12px;min-height:92px}
.gx-store-item-copy small{
    font-size:8px;font-weight:900;letter-spacing:.10em;color:#67728c;
}
.gx-store-item-copy strong{
    display:block;margin-top:3px;font-size:16px;color:#eef2fa;
}
.gx-store-item-copy p{
    margin:5px 0 0;font-size:9.5px;line-height:1.55;color:#7d8498;
}
.gx-store-item-meta{
    margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.gx-store-item-meta span{
    min-height:28px;padding:0 8px;display:inline-flex;align-items:center;gap:5px;border-radius:999px;
    font-size:8px;font-weight:900;
}
.gx-store-item-meta .owned{color:#a7b5d4;background:rgba(83,103,151,.08)}
.gx-store-item-meta .price{color:#ffd66e;background:rgba(181,132,31,.08)}
.gx-store-item>button{
    width:100%;min-height:43px;margin-top:10px;border-radius:11px;cursor:pointer;
    color:#fff;background:linear-gradient(135deg,#3e74ec,#8750ea);border:none;
    font-family:'Kanit',sans-serif;font-size:11px;font-weight:900;
}
.gx-store-item>button:disabled{
    color:#666f82;background:rgba(255,255,255,.035);cursor:not-allowed;
}
.gx-item-shop-foot{
    min-height:66px;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;
    border-top:1px solid rgba(255,255,255,.05);
}
.gx-item-shop-foot .inventory{
    min-height:40px;padding:0 14px;border-radius:10px;cursor:pointer;
    color:#d9ccff;background:rgba(110,72,193,.10);border:1px solid rgba(152,103,231,.13);
    font-family:'Kanit',sans-serif;font-weight:900;
}
.gx-item-shop-foot>span{font-size:8.5px;color:#70788d}

/* ---------- Inventory ---------- */
.gx-inventory-modal{
    width:min(980px,96vw)!important;max-height:min(820px,92vh)!important;overflow:hidden!important;
    padding:0!important;border-radius:24px!important;background:#101524!important;
    border:1px solid rgba(111,128,173,.18)!important;box-shadow:0 34px 100px rgba(0,0,0,.5)!important;
}
.gx-inventory-head{
    min-height:96px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;
    border-bottom:1px solid rgba(255,255,255,.05);
}
.gx-inventory-head>div{display:flex;align-items:center;gap:12px}
.gx-inventory-head .icon{
    width:48px;height:48px;display:grid;place-items:center;border-radius:14px;
    color:#8fb6ff;background:rgba(65,105,198,.11);border:1px solid rgba(85,133,232,.13);
}
.gx-inventory-head b{display:block;font-size:9px;letter-spacing:.12em;color:#77a6ff}
.gx-inventory-head h3{margin:2px 0 0;font-size:24px;color:#f4f6fb}
.gx-inventory-head p{margin:3px 0 0;font-size:9px;color:#747d92}
.gx-inventory-summary{
    padding:14px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.gx-inventory-summary article{
    min-height:68px;padding:12px;border-radius:13px;background:rgba(255,255,255,.022);
    border:1px solid rgba(255,255,255,.045);
}
.gx-inventory-summary small{display:block;font-size:8px;color:#747d90}
.gx-inventory-summary strong{display:block;margin-top:4px;font-size:18px;color:#e8edf7}
.gx-inventory-tabs{padding:0 24px 12px;display:flex;gap:7px}
.gx-inventory-tabs button{
    min-height:34px;padding:0 11px;border-radius:9px;cursor:pointer;
    color:#7f8798;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.045);
    font-family:'Kanit',sans-serif;font-size:9px;font-weight:900;
}
.gx-inventory-tabs button.active{
    color:#d9e5ff;background:rgba(64,105,195,.11);border-color:rgba(89,139,238,.16);
}
.gx-inventory-grid{
    min-height:310px;max-height:470px;overflow:auto;padding:0 24px 22px;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start;
}
.gx-inventory-card{
    min-height:128px;padding:13px;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:start;
    border-radius:15px;background:rgba(255,255,255,.022);border:1px solid rgba(132,147,184,.075);
}
.gx-inventory-card-icon{
    width:46px;height:46px;display:grid;place-items:center;border-radius:13px;
    color:#9bb8ff;background:rgba(71,105,188,.10);
}
.gx-inventory-card-copy small{display:block;font-size:7.5px;font-weight:900;letter-spacing:.10em;color:#65708a}
.gx-inventory-card-copy strong{display:block;margin-top:2px;font-size:13px;color:#e8edf7}
.gx-inventory-card-copy p{margin:4px 0 0;font-size:8.5px;line-height:1.45;color:#788096}
.gx-inventory-card-qty{
    min-width:40px;padding:4px 7px;text-align:center;border-radius:999px;
    color:#d8c9ff;background:rgba(111,70,186,.10);font-size:10px;
}
.gx-inventory-card-status{
    grid-column:2/-1;display:flex;align-items:center;gap:5px;font-size:7.5px;color:#69738b;
}
.gx-inventory-empty{
    grid-column:1/-1;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;color:#727b90;
}
.gx-inventory-empty>i{font-size:34px;color:#48556f}
.gx-inventory-empty strong{margin-top:12px;font-size:15px;color:#a8b1c4}
.gx-inventory-empty span{margin-top:4px;font-size:9px}
.gx-inventory-empty button{
    min-height:37px;margin-top:12px;padding:0 12px;border-radius:9px;cursor:pointer;
    color:#d9e4ff;background:rgba(65,104,190,.11);border:1px solid rgba(84,132,226,.14);
    font-family:'Kanit',sans-serif;font-weight:900;
}
.gx-inventory-foot{
    min-height:54px;padding:0 24px;display:flex;align-items:center;
    border-top:1px solid rgba(255,255,255,.05);font-size:8.5px;color:#747d91;
}

/* In-game panels now consume inventory instead of selling items */
.gx-word-open-shop-mini,
.gx-chaos-open-shop-mini{
    min-height:30px;padding:0 9px;border-radius:9px;cursor:pointer;
    color:#cbb8ff;background:rgba(108,72,182,.10);border:1px solid rgba(148,103,225,.14);
    font-family:'Kanit',sans-serif;font-size:8px;font-weight:900;
}
.gx-word-helper-category button em,
.gx-chaos-owned-items>button em{
    color:#d8c8ff!important;background:rgba(111,70,186,.09)!important;
}
.gx-chaos-owned-items{max-height:300px;overflow:auto;padding-right:2px}
.gx-chaos-inventory-panel .gx-chaos-shop-note{margin-top:2px}

/* Admin picks from real item catalog */
.gx-admin-catalog-builder>div:first-child{
    grid-template-columns:minmax(0,1fr) 100px auto!important;
}
.gx-admin-item-catalog-field select{
    width:100%;height:40px;border-radius:9px;padding:0 9px;
    color:#dce3ef;background:#0b0f1a;border:1px solid rgba(148,163,184,.14);
    font-family:'Kanit',sans-serif;
}
.gx-admin-item-catalog-note{
    display:flex;align-items:center;gap:6px;margin-top:8px;color:#728097;font-size:9px;
}

@media(max-width:820px){
    .gx-item-shop-grid{grid-template-columns:1fr 1fr}
    .gx-inventory-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
    .gx-item-shop-head{grid-template-columns:1fr 42px}
    .gx-item-shop-wallet{grid-column:1/-1;grid-row:2}
    .gx-item-shop-grid{grid-template-columns:1fr}
    .gx-inventory-summary{grid-template-columns:1fr 1fr}
}


/* V36 — Report Center can attach persistent items too */
.gx-admin-report-reward-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.gx-admin-report-item-row{
    margin-top:8px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 90px;
    gap:8px;
}
.gx-admin-report-item-row label{
    display:flex;
    flex-direction:column;
    gap:5px;
}
.gx-admin-report-item-row label>span{
    font-size:9px;
    color:#8b96ac;
    font-weight:800;
}
.gx-admin-report-item-row select,
.gx-admin-report-item-row input{
    width:100%;
    height:39px;
    border-radius:9px;
    padding:0 9px;
    color:#dce3ef;
    background:#0b0f1a;
    border:1px solid rgba(148,163,184,.14);
    font-family:'Kanit',sans-serif;
}
@media(max-width:720px){
    .gx-admin-report-reward-grid,
    .gx-admin-report-item-row{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   GX V37 — prettier item picker + readable chaos board
   + responsive mobile / tablet / desktop
   ========================================================= */

/* ---------- Pretty Admin Item Picker ---------- */
.gx-admin-catalog-builder{
    overflow:visible;
}
.gx-admin-catalog-builder>div:first-child{
    align-items:end;
}
.gx-admin-item-catalog-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.gx-admin-item-picker{
    padding:12px;
    border-radius:16px;
    background:linear-gradient(180deg,rgba(17,24,39,.92),rgba(8,12,22,.96));
    border:1px solid rgba(129,140,248,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.gx-admin-item-picker-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:10px;
}
.gx-admin-item-picker-tabs button{
    min-height:40px;
    padding:0 12px;
    border-radius:11px;
    border:1px solid rgba(123,142,198,.10);
    background:rgba(255,255,255,.03);
    color:#94a3b8;
    cursor:pointer;
    font-family:'Kanit',sans-serif;
    font-size:10px;
    font-weight:900;
    letter-spacing:.02em;
}
.gx-admin-item-picker-tabs button.active{
    color:#eef2ff;
    background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(139,92,246,.18));
    border-color:rgba(132,118,255,.24);
    box-shadow:0 10px 24px rgba(59,130,246,.10);
}
.gx-admin-item-picker-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}
.gx-admin-item-choice{
    min-height:74px;
    padding:11px 12px;
    display:grid;
    grid-template-columns:30px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    text-align:left;
    border-radius:14px;
    border:1px solid rgba(148,163,184,.10);
    background:rgba(255,255,255,.02);
    color:#cbd5e1;
    cursor:pointer;
    transition:.16s ease;
}
.gx-admin-item-choice:hover{
    transform:translateY(-1px);
    border-color:rgba(129,140,248,.22);
    background:rgba(99,102,241,.06);
}
.gx-admin-item-choice.active{
    border-color:rgba(139,92,246,.40);
    background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(139,92,246,.12));
    box-shadow:0 12px 28px rgba(76,29,149,.16), inset 0 0 0 1px rgba(255,255,255,.03);
}
.gx-admin-item-choice>i{
    width:30px;height:30px;display:grid;place-items:center;
    border-radius:10px;
    color:#c4b5fd;
    background:rgba(139,92,246,.10);
    font-size:13px;
}
.gx-admin-item-choice span{min-width:0;display:block}
.gx-admin-item-choice b{
    display:block;
    font-size:12px;
    color:#f8fafc;
    line-height:1.12;
}
.gx-admin-item-choice small{
    display:block;
    margin-top:3px;
    font-size:9px;
    line-height:1.35;
    color:#7f8aa0;
}
.gx-admin-item-choice em{
    padding:5px 7px;
    border-radius:999px;
    background:rgba(250,204,21,.08);
    color:#fcd34d;
    font-style:normal;
    font-size:8px;
    font-weight:900;
    white-space:nowrap;
}

/* ---------- Larger, more readable Chaos Board ---------- */
.gx-chaos-game-layout{
    gap:18px !important;
}
.gx-chaos-panel-head small{
    font-size:10px !important;
    letter-spacing:.14em !important;
}
.gx-chaos-panel-head strong{
    font-size:17px !important;
    line-height:1.2 !important;
}
.gx-chaos-panel{
    border-radius:20px !important;
}
.gx-chaos-board-stage{
    min-width:0;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:#52357f rgba(255,255,255,.06);
}
.gx-chaos-board-stage::-webkit-scrollbar{
    height:10px;
}
.gx-chaos-board-stage::-webkit-scrollbar-thumb{
    background:#4c2d73;
    border-radius:999px;
}
.gx-chaos-board-frame{
    min-width:700px;
    max-width:820px;
    margin:0 auto;
}
.gx-chaos-board-grid{
    gap:4px !important;
}
.gx-chaos-board-cell{
    padding:6px 4px !important;
    border-radius:10px !important;
}
.gx-chaos-board-cell .cell-index{
    font-size:9px !important;
    top:4px !important;
    left:5px !important;
    color:#6b7280 !important;
}
.gx-chaos-board-cell>i{
    font-size:15px !important;
    margin-bottom:4px !important;
}
.gx-chaos-board-cell>strong{
    font-size:11.5px !important;
    line-height:1.08 !important;
    color:#e8ecf8 !important;
    letter-spacing:-.01em;
}
.gx-chaos-board-cell>small{
    font-size:7.6px !important;
    line-height:1.2 !important;
    margin-top:3px !important;
    color:#99a4bb !important;
}
.gx-chaos-board-token{
    width:16px !important;
    height:16px !important;
    font-size:7px !important;
    border-radius:5px !important;
}
.gx-chaos-board-center{
    padding:16px !important;
}
.gx-chaos-board-center-brand>span{
    width:48px !important;
    height:48px !important;
}
.gx-chaos-board-center-brand small{
    font-size:10px !important;
}
.gx-chaos-board-center-brand strong{
    font-size:21px !important;
}
.gx-chaos-board-center-brand p{
    font-size:11px !important;
    line-height:1.4 !important;
}
.gx-chaos-turn-card{
    padding:16px 18px !important;
    border-radius:18px !important;
}
.gx-chaos-turn-card small{
    font-size:9px !important;
}
.gx-chaos-turn-card strong{
    font-size:15px !important;
}
.gx-chaos-game-player{
    min-height:66px !important;
    padding:10px !important;
}
.gx-chaos-game-player .avatar,
.gx-chaos-player-avatar{
    width:40px !important;
    height:40px !important;
}
.gx-chaos-game-player strong{
    font-size:14px !important;
}
.gx-chaos-game-player small{
    font-size:10px !important;
}
.gx-chaos-stat-grid div{
    min-height:74px !important;
    padding:12px !important;
}
.gx-chaos-stat-grid span{
    font-size:10px !important;
}
.gx-chaos-stat-grid strong{
    font-size:26px !important;
}
.gx-chaos-shop-items>button,
.gx-chaos-owned-items>button{
    min-height:62px !important;
    padding:10px 12px !important;
}
.gx-chaos-shop-items>button b,
.gx-chaos-owned-items>button b{
    font-size:12px !important;
}
.gx-chaos-shop-items>button small,
.gx-chaos-owned-items>button small{
    font-size:9px !important;
    line-height:1.35 !important;
}
.gx-chaos-shop-items>button em,
.gx-chaos-owned-items>button em{
    font-size:10px !important;
}
.gx-chaos-shop-target-wrap select{
    min-height:44px !important;
    font-size:12px !important;
}
.gx-chaos-shop-note,
.gx-chaos-shop-status,
.gx-chaos-tile-legend span,
.gx-chaos-log-item small{
    font-size:10px !important;
}
.gx-chaos-log-item strong,
.gx-chaos-panel p,
.gx-chaos-panel li{
    font-size:12px !important;
    line-height:1.45 !important;
}

/* ---------- Platform responsive ---------- */
@media (max-width: 1366px){
    .gx-chaos-game-layout{
        grid-template-columns:260px minmax(0,1fr) 290px !important;
    }
    .gx-chaos-board-frame{
        min-width:660px;
        max-width:760px;
    }
    .gx-chaos-board-cell>strong{font-size:10.7px !important;}
}
@media (max-width: 1180px){
    .gx-chaos-game-layout{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }
    .gx-chaos-game-layout > .gx-chaos-game-side:first-child{
        order:1;
    }
    .gx-chaos-game-layout > .gx-chaos-board-stage{
        order:2;
    }
    .gx-chaos-game-layout > .gx-chaos-game-side:last-child{
        order:3;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
        align-self:stretch;
    }
    .gx-chaos-board-frame{
        min-width:680px;
    }
    .gx-item-shop-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width: 900px){
    .gx-admin-item-picker-grid{
        grid-template-columns:1fr;
    }
    .gx-chaos-game-layout > .gx-chaos-game-side:last-child{
        grid-template-columns:1fr;
    }
    .gx-chaos-board-frame{
        min-width:640px;
    }
    .gx-chaos-board-cell>strong{
        font-size:10px !important;
    }
    .gx-chaos-board-cell>small{
        font-size:7px !important;
    }
}
@media (max-width: 768px){
    .gx-item-shop-head{
        grid-template-columns:1fr 42px !important;
    }
    .gx-item-shop-wallet{
        grid-column:1/-1;
        grid-row:2;
    }
    .gx-item-shop-grid,
    .gx-inventory-grid{
        grid-template-columns:1fr !important;
    }
    .gx-admin-catalog-builder>div:first-child{
        grid-template-columns:1fr !important;
    }
    .gx-admin-broadcast-item-builder,
    .gx-admin-broadcast-grid{
        gap:12px !important;
    }

    .gx-chaos-room-header{
        padding:16px !important;
        display:block !important;
    }
    .gx-chaos-room-header-right{
        margin-top:14px;
        width:100%;
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }
    .gx-chaos-room-header-right button,
    .gx-chaos-room-header-right .tag{
        width:100%;
        justify-content:center;
    }
    .gx-chaos-board-frame{
        min-width:600px;
    }
    .gx-chaos-panel-head strong{
        font-size:16px !important;
    }
}
@media (max-width: 560px){
    .gx-chaos-room-shell,
    .gx-chaos-room,
    .gx-chaos-board-stage{
        width:100%;
    }
    .gx-chaos-board-stage{
        padding-bottom:6px;
    }
    .gx-chaos-board-frame{
        min-width:560px;
        padding:8px !important;
    }
    .gx-chaos-board-cell{
        padding:4px 3px !important;
    }
    .gx-chaos-board-cell>i{
        font-size:13px !important;
    }
    .gx-chaos-board-cell>strong{
        font-size:9px !important;
    }
    .gx-chaos-board-cell>small{
        font-size:6.6px !important;
    }
    .gx-chaos-turn-card strong{
        font-size:13px !important;
    }
    .gx-chaos-stat-grid{
        grid-template-columns:1fr 1fr !important;
    }
    .gx-chaos-room-header-right{
        grid-template-columns:1fr 1fr !important;
    }
}
@media (max-width: 420px){
    .gx-admin-item-picker-tabs{
        grid-template-columns:1fr;
    }
    .gx-chaos-board-frame{
        min-width:520px;
    }
    .gx-chaos-panel-head strong{
        font-size:15px !important;
    }
    .gx-chaos-game-player strong{
        font-size:13px !important;
    }
}



/* ==========================================================
   GX V38 — Discord / Word-like Rich Text Editor
   ========================================================== */

.gx-rich-field{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
}
.gx-rich-toolbar{
    width:100%;
    min-height:46px;
    padding:6px 8px;
    display:flex;
    align-items:center;
    gap:5px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    border:1px solid rgba(108,127,168,.18);
    border-bottom-color:rgba(108,127,168,.10);
    border-radius:13px 13px 0 0;
    background:
        linear-gradient(180deg,rgba(19,26,43,.98),rgba(12,17,30,.98));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.gx-rich-toolbar.compact{
    min-height:38px;
    padding:5px 6px;
    border-radius:10px 10px 0 0;
}
.gx-rich-toolbar-group{
    display:flex;
    align-items:center;
    gap:4px;
    flex:0 0 auto;
}
.gx-rich-toolbar-spacer{flex:1 0 10px}
.gx-rich-divider{
    width:1px;
    height:25px;
    margin:0 3px;
    flex:0 0 auto;
    background:rgba(148,163,184,.13);
}
.gx-rich-tool{
    min-width:32px;
    height:32px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    flex:0 0 auto;
    border:1px solid transparent;
    border-radius:8px;
    color:#a8b3c8;
    background:transparent;
    cursor:pointer;
    font:800 11px 'Kanit',sans-serif;
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.gx-rich-tool:hover{
    color:#f4f7ff;
    background:rgba(82,111,190,.12);
    border-color:rgba(103,137,221,.15);
}
.gx-rich-tool:active{transform:translateY(1px)}
.gx-rich-tool.heading{
    min-width:38px;
    color:#b9c8e8;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.gx-rich-tool.preview{
    min-width:auto;
    padding:0 11px;
    color:#9bb7f5;
}
.gx-rich-tool.preview.active{
    color:#e9ddff;
    background:rgba(125,77,204,.15);
    border-color:rgba(155,103,237,.22);
}
.gx-rich-textarea{
    width:100% !important;
    margin:0 !important;
    border-radius:0 0 13px 13px !important;
    border-top-color:rgba(255,255,255,.035) !important;
    font-family:'Kanit',sans-serif !important;
    font-size:14px !important;
    line-height:1.75 !important;
    tab-size:4;
}
.gx-rich-textarea:focus{
    border-color:rgba(85,132,235,.38) !important;
    box-shadow:0 0 0 3px rgba(61,103,218,.07) !important;
}
.gx-rich-syntax-hint{
    min-height:32px;
    padding:7px 10px;
    display:flex;
    align-items:center;
    gap:7px;
    border-radius:9px;
    color:#78869f;
    background:rgba(65,86,132,.045);
    font-size:10px;
    line-height:1.45;
}
.gx-rich-syntax-hint i{color:#788fff}
.gx-rich-syntax-hint.compact{
    min-height:26px;
    padding:4px 7px;
    font-size:9px;
}
.gx-rich-preview{
    width:100%;
    min-height:78px;
    padding:16px 17px;
    border-radius:13px;
    border:1px solid rgba(123,140,187,.14);
    background:
        radial-gradient(circle at 0 0,rgba(70,106,190,.06),transparent 38%),
        rgba(6,10,19,.66);
    color:#dce3ef;
    font-size:14px;
}
.gx-rich-preview::before{
    content:"PREVIEW";
    display:block;
    margin-bottom:11px;
    color:#60759f;
    font-size:8px;
    font-weight:900;
    letter-spacing:.16em;
}

/* Safe rendered Markdown */
.gx-rich-render,
.gx-rich-preview,
.gx-mailbox-letter-message{
    overflow-wrap:anywhere;
}
.gx-rich-render h1,
.gx-rich-preview h1,
.gx-mailbox-letter-message h1{
    margin:0 0 12px;
    color:#f8fafc;
    font-size:27px;
    line-height:1.25;
    font-weight:900;
    letter-spacing:-.025em;
}
.gx-rich-render h2,
.gx-rich-preview h2,
.gx-mailbox-letter-message h2{
    margin:15px 0 9px;
    color:#f1f5f9;
    font-size:21px;
    line-height:1.3;
    font-weight:900;
}
.gx-rich-render h3,
.gx-rich-preview h3,
.gx-mailbox-letter-message h3{
    margin:13px 0 7px;
    color:#e6ebf5;
    font-size:17px;
    line-height:1.35;
    font-weight:850;
}
.gx-rich-render p,
.gx-rich-preview p,
.gx-mailbox-letter-message p{
    margin:0;
    color:inherit;
    font-size:inherit;
    line-height:1.75;
}
.gx-rich-render strong,
.gx-rich-preview strong,
.gx-mailbox-letter-message strong{
    color:#f8fafc;
    font-weight:900;
}
.gx-rich-render u,
.gx-rich-preview u,
.gx-mailbox-letter-message u{
    text-decoration-thickness:1.5px;
    text-underline-offset:3px;
}
.gx-rich-render s,
.gx-rich-preview s,
.gx-mailbox-letter-message s{
    color:#8792a8;
}
.gx-rich-render em,
.gx-rich-preview em,
.gx-mailbox-letter-message em{
    color:#cad3e5;
}
.gx-rich-render code,
.gx-rich-preview code,
.gx-mailbox-letter-message code{
    padding:2px 6px;
    border-radius:5px;
    color:#c4b5fd;
    background:rgba(124,58,237,.10);
    border:1px solid rgba(139,92,246,.10);
    font:600 .88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.gx-rich-render blockquote,
.gx-rich-preview blockquote,
.gx-mailbox-letter-message blockquote{
    margin:5px 0;
    padding:9px 12px;
    border-left:3px solid #596c9d;
    border-radius:0 8px 8px 0;
    color:#aebbd2;
    background:rgba(72,91,137,.07);
}
.gx-rich-render ul,
.gx-rich-render ol,
.gx-rich-preview ul,
.gx-rich-preview ol,
.gx-mailbox-letter-message ul,
.gx-mailbox-letter-message ol{
    margin:6px 0 6px 22px;
    padding:0;
}
.gx-rich-render li,
.gx-rich-preview li,
.gx-mailbox-letter-message li{
    margin:3px 0;
    padding-left:2px;
    line-height:1.65;
}
.gx-rich-render hr,
.gx-rich-preview hr,
.gx-mailbox-letter-message hr{
    height:1px;
    margin:15px 0;
    border:0;
    background:rgba(148,163,184,.13);
}
.gx-rich-gap{height:10px}
.gx-rich-empty{color:#68748a !important}
.gx-rich-spoiler{
    padding:0 3px;
    border-radius:4px;
    color:transparent;
    background:#263148;
    cursor:pointer;
    user-select:none;
    transition:.12s ease;
}
.gx-rich-spoiler:hover,
.gx-rich-spoiler:focus,
.gx-rich-spoiler.shown{
    color:inherit;
    background:rgba(80,98,140,.20);
    user-select:text;
}

/* Mail letters are now intentionally larger/readable. */
.gx-mailbox-letter-message{
    padding:20px 21px !important;
    font-size:15px !important;
    line-height:1.75 !important;
}

/* Report details / replies */
.gx-report-rich-message,
.gx-admin-reply-rich-message{
    color:#d7deeb;
    font-size:13px;
    line-height:1.7;
}
.gx-admin-reply-rich-editor{
    margin-top:2px;
}
.gx-admin-reply-rich-editor .gx-rich-textarea{
    min-height:150px;
}

/* Ticket chat rich compose */
.gx-ticket-compose-rich{
    display:block !important;
    padding:0 !important;
    overflow:hidden;
    border-radius:14px;
    border:1px solid rgba(116,132,172,.12);
    background:rgba(8,13,23,.88);
}
.gx-ticket-compose-rich .gx-rich-toolbar{
    border:0;
    border-bottom:1px solid rgba(116,132,172,.09);
    border-radius:0;
}
.gx-ticket-compose-input-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:end;
    padding:8px;
}
.gx-ticket-compose-input-row .gx-rich-textarea{
    min-height:54px;
    max-height:150px;
    border-radius:9px !important;
    resize:vertical;
}
.gx-ticket-compose-input-row>button{
    min-width:84px;
    min-height:54px;
}
.gx-ticket-rich-message{
    margin-top:6px;
    color:inherit;
    font-size:12px;
}

/* Responsive editor: toolbar scrolls instead of crushing buttons. */
@media(max-width:700px){
    .gx-rich-toolbar{
        min-height:44px;
        padding:5px 6px;
    }
    .gx-rich-tool{
        min-width:34px;
        height:34px;
        font-size:11px;
    }
    .gx-rich-tool.preview span{display:none}
    .gx-rich-toolbar-spacer{display:none}
    .gx-rich-textarea{
        font-size:16px !important; /* Prevent iOS auto zoom */
        line-height:1.65 !important;
    }
    .gx-rich-preview,
    .gx-mailbox-letter-message{
        font-size:14px !important;
    }
    .gx-rich-render h1,
    .gx-rich-preview h1,
    .gx-mailbox-letter-message h1{font-size:23px}
    .gx-rich-render h2,
    .gx-rich-preview h2,
    .gx-mailbox-letter-message h2{font-size:19px}
    .gx-ticket-compose-input-row{
        grid-template-columns:1fr;
    }
    .gx-ticket-compose-input-row>button{
        width:100%;
        min-height:44px;
    }
}


/* ==========================================================
   GX V39 — Admin Inventory Inspector
   ========================================================== */

.gx-admin-user-actions{
    display:flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
}
.gx-admin-inventory-btn,
.gx-admin-edit-btn{
    min-width:78px;
    height:36px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.gx-admin-inventory-btn{
    flex:0 0 auto;
    border:1px solid rgba(139,92,246,.20);
    border-radius:10px;
    background:linear-gradient(135deg,rgba(91,68,175,.13),rgba(50,78,151,.10));
    color:#d5c7ff;
    font-family:'Kanit',sans-serif;
    font-size:10px;
    font-weight:700;
    cursor:pointer;
    transition:.18s ease;
}
.gx-admin-inventory-btn:hover{
    color:#fff;
    background:linear-gradient(135deg,#6d45c6,#416ed9);
    border-color:transparent;
    transform:translateY(-1px);
    box-shadow:0 8px 22px rgba(87,55,168,.20);
}

.gx-admin-inventory-modal{
    width:min(980px,calc(100vw - 28px)) !important;
    max-width:980px !important;
    max-height:calc(100dvh - 30px) !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:24px !important;
    background:
        radial-gradient(circle at 90% 0%,rgba(99,57,176,.11),transparent 34%),
        linear-gradient(180deg,#121827 0%,#0b101c 100%) !important;
    border:1px solid rgba(109,128,174,.20) !important;
    box-shadow:0 34px 100px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.gx-admin-inventory-head{
    min-height:92px;
    padding:20px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid rgba(255,255,255,.055);
    background:rgba(15,21,36,.93);
    backdrop-filter:blur(16px);
}
.gx-admin-inventory-head-main{
    min-width:0;
    display:flex;
    align-items:center;
    gap:13px;
}
.gx-admin-inventory-head-icon{
    width:50px;height:50px;
    flex:0 0 50px;
    display:grid;place-items:center;
    border-radius:15px;
    color:#b89aff;
    background:linear-gradient(145deg,rgba(113,73,199,.18),rgba(49,89,169,.12));
    border:1px solid rgba(139,92,246,.20);
    font-size:19px;
}
.gx-admin-inventory-eyebrow{
    display:block;
    color:#7ba5ff;
    font-size:9px;
    font-weight:900;
    letter-spacing:.15em;
}
.gx-admin-inventory-head h3{
    margin:3px 0 0;
    color:#f6f7fb;
    font-size:22px;
    line-height:1.2;
}
.gx-admin-inventory-head p{
    margin:4px 0 0;
    color:#778299;
    font-size:10px;
}
.gx-admin-inventory-head-actions{
    display:flex;
    align-items:center;
    gap:7px;
}
.gx-admin-inventory-head-actions button{
    height:38px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.065);
    background:rgba(255,255,255,.025);
    color:#8e9bb1;
    cursor:pointer;
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:800;
}
.gx-admin-inventory-head-actions .refresh{
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.gx-admin-inventory-head-actions .close{
    width:38px;
    display:grid;
    place-items:center;
}
.gx-admin-inventory-head-actions button:hover{
    color:#e7ecf5;
    background:rgba(84,108,171,.10);
}

.gx-admin-inventory-player{
    margin:16px 20px 0;
    padding:13px 14px;
    display:grid;
    grid-template-columns:52px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    border-radius:16px;
    background:rgba(255,255,255,.022);
    border:1px solid rgba(255,255,255,.052);
}
.gx-admin-inventory-player-avatar{
    position:relative;
    width:52px;height:52px;
}
.gx-admin-inventory-player-avatar img{
    width:52px;height:52px;
    display:block;
    object-fit:cover;
    border-radius:15px;
    background:#080d18;
    border:1px solid rgba(105,137,219,.28);
}
.gx-admin-inventory-player-avatar>span{
    position:absolute;
    right:-4px;bottom:-4px;
    width:21px;height:21px;
    display:grid;place-items:center;
    border-radius:999px;
    color:#e7eeff;
    background:#315fbc;
    border:3px solid #111827;
    font-size:7px;
}
.gx-admin-inventory-player-avatar>span.admin{
    background:#7342b8;
}
.gx-admin-inventory-player-copy{
    min-width:0;
}
.gx-admin-inventory-player-copy strong{
    display:block;
    color:#f4f6fb;
    font-size:16px;
}
.gx-admin-inventory-player-copy span{
    display:block;
    margin-top:1px;
    color:#8e99ad;
    font-size:10px;
}
.gx-admin-inventory-player-copy small{
    display:block;
    margin-top:4px;
    color:#647087;
    font-size:9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.gx-admin-inventory-player-role span{
    min-height:27px;
    padding:0 9px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    color:#92b9ff;
    background:rgba(47,92,175,.10);
    border:1px solid rgba(73,122,213,.13);
    font-size:8px;
    font-weight:900;
}
.gx-admin-inventory-player-role span.admin{
    color:#d9c1ff;
    background:rgba(117,68,185,.10);
    border-color:rgba(149,92,218,.14);
}

.gx-admin-inventory-stats{
    margin:10px 20px 0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}
.gx-admin-inventory-stats article{
    min-width:0;
    min-height:66px;
    padding:10px 11px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:8px;
    align-items:center;
    border-radius:13px;
    background:rgba(255,255,255,.022);
    border:1px solid rgba(255,255,255,.045);
}
.gx-admin-inventory-stats .icon{
    width:34px;height:34px;
    display:grid;place-items:center;
    border-radius:10px;
    color:#a3b7df;
    background:rgba(71,96,158,.09);
}
.gx-admin-inventory-stats article.coin .icon{color:#f5c94f;background:rgba(180,126,21,.08)}
.gx-admin-inventory-stats article.point .icon{color:#74a7ff;background:rgba(52,97,178,.09)}
.gx-admin-inventory-stats article.items .icon{color:#c29cff;background:rgba(112,68,177,.09)}
.gx-admin-inventory-stats article.types .icon{color:#75d4ba;background:rgba(46,140,113,.08)}
.gx-admin-inventory-stats small{
    display:block;
    color:#68758c;
    font-size:7.5px;
    letter-spacing:.06em;
}
.gx-admin-inventory-stats strong{
    display:block;
    margin-top:2px;
    color:#edf1f8;
    font-size:15px;
    line-height:1.15;
    overflow:hidden;
    text-overflow:ellipsis;
}

.gx-admin-inventory-toolbar{
    margin:13px 20px 0;
    display:grid;
    grid-template-columns:minmax(0,1fr) 240px;
    gap:9px;
}
.gx-admin-inventory-tabs{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    overflow-x:auto;
    scrollbar-width:none;
}
.gx-admin-inventory-tabs::-webkit-scrollbar{display:none}
.gx-admin-inventory-tabs button{
    min-height:36px;
    padding:0 10px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.045);
    background:rgba(255,255,255,.02);
    color:#7c889d;
    cursor:pointer;
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:800;
}
.gx-admin-inventory-tabs button b{
    min-width:20px;height:20px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    color:#76839b;
    background:rgba(255,255,255,.035);
    font-size:7.5px;
}
.gx-admin-inventory-tabs button.active{
    color:#e3eaff;
    border-color:rgba(89,132,228,.16);
    background:rgba(57,91,175,.11);
}
.gx-admin-inventory-tabs button.active b{
    color:#b8ceff;
    background:rgba(67,104,196,.14);
}
.gx-admin-inventory-search{
    height:36px;
    padding:0 8px 0 11px;
    display:grid;
    grid-template-columns:18px minmax(0,1fr) 25px;
    gap:4px;
    align-items:center;
    border-radius:10px;
    color:#66758e;
    background:#090e19;
    border:1px solid rgba(112,130,169,.10);
}
.gx-admin-inventory-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:#cdd6e6;
    font-family:'Kanit',sans-serif;
    font-size:10px;
}
.gx-admin-inventory-search button{
    width:25px;height:25px;
    display:grid;place-items:center;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#536179;
    cursor:pointer;
}
.gx-admin-inventory-search button:hover{
    color:#b8c4d8;
    background:rgba(255,255,255,.035);
}

.gx-admin-inventory-content{
    min-height:260px;
    max-height:calc(100dvh - 390px);
    overflow:auto;
    padding:13px 20px 18px;
    scrollbar-width:thin;
    scrollbar-color:#4c3b79 rgba(255,255,255,.025);
}
.gx-admin-inventory-content::-webkit-scrollbar{width:7px}
.gx-admin-inventory-content::-webkit-scrollbar-thumb{background:#4b3974;border-radius:999px}

.gx-admin-inventory-group + .gx-admin-inventory-group{
    margin-top:14px;
}
.gx-admin-inventory-group>header{
    min-height:42px;
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:9px;
}
.gx-admin-inventory-group>header .icon{
    width:36px;height:36px;
    display:grid;place-items:center;
    border-radius:10px;
    color:#89a9e8;
    background:rgba(55,90,166,.08);
}
.gx-admin-inventory-group>header .icon.chaos{
    color:#be91f6;
    background:rgba(106,62,163,.08);
}
.gx-admin-inventory-group>header .icon.other{
    color:#8d9bb4;
    background:rgba(78,91,119,.08);
}
.gx-admin-inventory-group>header small{
    display:block;
    color:#6d7d98;
    font-size:8px;
    font-weight:900;
    letter-spacing:.10em;
}
.gx-admin-inventory-group>header strong{
    display:block;
    margin-top:1px;
    color:#b9c4d7;
    font-size:10px;
}

.gx-admin-inventory-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}
.gx-admin-inventory-item{
    min-height:116px;
    padding:12px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:9px;
    align-items:start;
    border-radius:14px;
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,.018);
    border:1px solid rgba(255,255,255,.05);
}
.gx-admin-inventory-item::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:2px;
    background:#4f7cc8;
}
.gx-admin-inventory-item.tone-purple::before{background:#8455c8}
.gx-admin-inventory-item.tone-green::before{background:#43b58b}
.gx-admin-inventory-item.tone-red::before{background:#d54d64}
.gx-admin-inventory-item.tone-pink::before{background:#d95594}
.gx-admin-inventory-item.tone-cyan::before{background:#49a9c7}
.gx-admin-inventory-item.tone-other::before{background:#65738c}
.gx-admin-inventory-item-icon{
    width:42px;height:42px;
    display:grid;place-items:center;
    border-radius:12px;
    color:#aabfff;
    background:rgba(70,96,170,.09);
    border:1px solid rgba(89,119,195,.09);
}
.gx-admin-inventory-item-copy{
    min-width:0;
}
.gx-admin-inventory-item-copy small{
    display:block;
    color:#5f6d84;
    font-size:7px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.gx-admin-inventory-item-copy strong{
    display:block;
    margin-top:2px;
    color:#e7ebf4;
    font-size:12px;
}
.gx-admin-inventory-item-copy p{
    margin:4px 0 0;
    color:#78849a;
    font-size:8.5px;
    line-height:1.45;
}
.gx-admin-inventory-item-qty{
    min-width:43px;
    padding:4px 7px;
    text-align:center;
    border-radius:999px;
    color:#d8c7ff;
    background:rgba(112,67,179,.09);
    font-size:10px;
}
.gx-admin-inventory-item-meta{
    grid-column:2/-1;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}
.gx-admin-inventory-item-meta span{
    min-height:23px;
    padding:0 7px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    border-radius:999px;
    color:#77849b;
    background:rgba(255,255,255,.025);
    font-size:7px;
}
.gx-admin-inventory-item-meta span.unknown{
    color:#9aa5b7;
}

.gx-admin-inventory-empty{
    min-height:240px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
    color:#6f7d95;
}
.gx-admin-inventory-empty>i{
    margin-bottom:4px;
    color:#566a91;
    font-size:26px;
}
.gx-admin-inventory-empty strong{
    color:#aeb9cb;
    font-size:13px;
}
.gx-admin-inventory-empty span{
    font-size:9px;
}
.gx-admin-inventory-empty.error>i{
    color:#d76a76;
}

.gx-admin-inventory-foot{
    min-height:62px;
    padding:10px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-top:1px solid rgba(255,255,255,.05);
    background:rgba(9,13,23,.80);
}
.gx-admin-inventory-foot>span{
    color:#69758b;
    font-size:8.5px;
}
.gx-admin-inventory-foot>button{
    min-height:38px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:10px;
    color:#c4d8ff;
    background:rgba(49,89,175,.10);
    border:1px solid rgba(74,119,212,.13);
    cursor:pointer;
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:800;
}

@media(max-width:760px){
    .gx-admin-user-footer{
        align-items:flex-end;
    }
    .gx-admin-user-actions{
        flex-wrap:wrap;
        justify-content:flex-end;
    }
    .gx-admin-inventory-head{
        align-items:flex-start;
    }
    .gx-admin-inventory-head-actions .refresh span{
        display:none;
    }
    .gx-admin-inventory-player{
        grid-template-columns:48px minmax(0,1fr);
    }
    .gx-admin-inventory-player-role{
        grid-column:2;
    }
    .gx-admin-inventory-stats{
        grid-template-columns:1fr 1fr;
    }
    .gx-admin-inventory-toolbar{
        grid-template-columns:1fr;
    }
    .gx-admin-inventory-search{
        width:100%;
    }
    .gx-admin-inventory-grid{
        grid-template-columns:1fr;
    }
    .gx-admin-inventory-content{
        max-height:calc(100dvh - 490px);
    }
}
@media(max-width:520px){
    .gx-admin-inventory-modal{
        width:calc(100vw - 14px) !important;
        max-height:calc(100dvh - 14px) !important;
        border-radius:18px !important;
    }
    .gx-admin-inventory-head{
        padding:14px;
    }
    .gx-admin-inventory-head-icon{
        width:42px;height:42px;flex-basis:42px;
        border-radius:12px;
        font-size:16px;
    }
    .gx-admin-inventory-eyebrow{
        font-size:7px;
    }
    .gx-admin-inventory-head h3{
        font-size:18px;
    }
    .gx-admin-inventory-head p{
        display:none;
    }
    .gx-admin-inventory-player,
    .gx-admin-inventory-stats,
    .gx-admin-inventory-toolbar{
        margin-left:12px;
        margin-right:12px;
    }
    .gx-admin-inventory-content{
        padding-left:12px;
        padding-right:12px;
        max-height:calc(100dvh - 455px);
    }
    .gx-admin-inventory-foot{
        padding:9px 12px;
        flex-direction:column;
        align-items:stretch;
    }
    .gx-admin-inventory-foot>button{
        justify-content:center;
        width:100%;
    }
    .gx-admin-inventory-foot>span{
        text-align:center;
    }
}



/* ==========================================================
   GX V40 — Mail exact-once claim + Admin Inventory Manager
   ========================================================== */

.gx-mailbox-claim-btn.busy{
    cursor:wait !important;
    opacity:.78;
}

/* toolbar */
.gx-admin-inventory-toolbar{
    grid-template-columns:minmax(0,1fr) minmax(300px,430px) !important;
}
.gx-admin-inventory-toolbar-right{
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
}
.gx-admin-inventory-add-toggle{
    min-width:96px;
    height:36px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius:10px;
    border:1px solid rgba(129,92,246,.18);
    background:rgba(103,65,188,.09);
    color:#cdbbff;
    cursor:pointer;
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:900;
    white-space:nowrap;
}
.gx-admin-inventory-add-toggle:hover,
.gx-admin-inventory-add-toggle.active{
    color:#fff;
    border-color:rgba(139,92,246,.28);
    background:linear-gradient(135deg,rgba(62,116,236,.22),rgba(133,72,225,.23));
}

/* add item panel */
.gx-admin-inventory-add-panel{
    margin:10px 20px 2px;
    padding:13px;
    border-radius:16px;
    background:
        radial-gradient(circle at 100% 0%,rgba(124,58,237,.08),transparent 40%),
        rgba(7,11,20,.68);
    border:1px solid rgba(128,93,210,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.gx-admin-inventory-add-panel[hidden]{
    display:none !important;
}
.gx-admin-inventory-add-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.gx-admin-inventory-add-head>div:first-child{
    display:flex;
    align-items:center;
    gap:10px;
}
.gx-admin-inventory-add-head .icon{
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:11px;
    color:#c5a5ff;
    background:rgba(112,67,180,.10);
}
.gx-admin-inventory-add-head strong{
    display:block;
    color:#e9edf7;
    font-size:12px;
}
.gx-admin-inventory-add-head small{
    display:block;
    margin-top:2px;
    color:#6e7b92;
    font-size:8px;
}
.gx-admin-inventory-add-head .close{
    width:32px;height:32px;
    display:grid;place-items:center;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.05);
    background:rgba(255,255,255,.025);
    color:#748097;
    cursor:pointer;
}
.gx-admin-inventory-add-tabs{
    margin-top:11px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}
.gx-admin-inventory-add-tabs button{
    min-height:35px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.045);
    background:rgba(255,255,255,.02);
    color:#738097;
    cursor:pointer;
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:900;
}
.gx-admin-inventory-add-tabs button.active{
    color:#e3eaff;
    border-color:rgba(96,122,221,.17);
    background:rgba(62,95,188,.10);
}
.gx-admin-inventory-add-grid{
    margin-top:8px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
}
.gx-admin-inventory-add-choice{
    min-height:63px;
    padding:9px 10px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
    text-align:left;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.05);
    background:rgba(255,255,255,.018);
    color:#aab4c7;
    cursor:pointer;
    transition:.15s ease;
}
.gx-admin-inventory-add-choice:hover{
    background:rgba(66,96,172,.06);
    border-color:rgba(92,126,214,.13);
}
.gx-admin-inventory-add-choice.active{
    background:linear-gradient(135deg,rgba(59,110,221,.10),rgba(120,72,196,.10));
    border-color:rgba(128,98,225,.24);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}
.gx-admin-inventory-add-choice .icon{
    width:34px;height:34px;
    display:grid;place-items:center;
    border-radius:10px;
    color:#aebfff;
    background:rgba(69,98,173,.09);
}
.gx-admin-inventory-add-choice .copy{
    min-width:0;
}
.gx-admin-inventory-add-choice strong{
    display:block;
    color:#e2e7f0;
    font-size:10px;
}
.gx-admin-inventory-add-choice small{
    display:block;
    margin-top:2px;
    color:#69758b;
    font-size:7px;
    line-height:1.35;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.gx-admin-inventory-add-choice .owned{
    padding:4px 6px;
    border-radius:999px;
    color:#9aa8c0;
    background:rgba(255,255,255,.025);
    font-size:7px;
    white-space:nowrap;
}
.gx-admin-inventory-add-footer{
    margin-top:9px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 90px auto;
    gap:8px;
    align-items:end;
}
.gx-admin-inventory-add-selected{
    min-height:42px;
    padding:7px 9px;
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:10px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.04);
    color:#8794aa;
}
.gx-admin-inventory-add-selected>i{
    color:#a890e4;
}
.gx-admin-inventory-add-selected span{
    min-width:0;
}
.gx-admin-inventory-add-selected b{
    display:block;
    color:#dce2ed;
    font-size:9px;
}
.gx-admin-inventory-add-selected small{
    display:block;
    margin-top:1px;
    color:#66738a;
    font-size:7px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.gx-admin-inventory-add-footer label{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.gx-admin-inventory-add-footer label>span{
    color:#718098;
    font-size:7px;
}
.gx-admin-inventory-add-footer input{
    width:100%;
    height:42px;
    padding:0 9px;
    border-radius:10px;
    border:1px solid rgba(111,129,171,.11);
    outline:none;
    background:#090e19;
    color:#e2e8f0;
    font-family:'Kanit',sans-serif;
    font-size:11px;
}
.gx-admin-inventory-add-footer .confirm{
    min-height:42px;
    padding:0 13px;
    border:0;
    border-radius:10px;
    color:#fff;
    background:linear-gradient(135deg,#3b72e8,#8050de);
    cursor:pointer;
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:900;
}

/* per-item controls */
.gx-admin-inventory-item{
    padding-bottom:10px !important;
}
.gx-admin-inventory-item-actions{
    grid-column:2/-1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    padding-top:2px;
}
.gx-admin-inventory-item-actions button{
    width:31px;height:29px;
    display:grid;
    place-items:center;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.05);
    background:rgba(255,255,255,.025);
    color:#8490a6;
    cursor:pointer;
    font-size:9px;
    transition:.15s ease;
}
.gx-admin-inventory-item-actions button.minus:hover{
    color:#ffd182;
    background:rgba(217,148,35,.08);
    border-color:rgba(230,164,58,.13);
}
.gx-admin-inventory-item-actions button.plus:hover{
    color:#8ee8bd;
    background:rgba(47,174,119,.08);
    border-color:rgba(63,193,136,.13);
}
.gx-admin-inventory-item-actions button.delete:hover{
    color:#ff8897;
    background:rgba(199,54,75,.08);
    border-color:rgba(224,72,91,.13);
}

/* modal content has a little less height when add panel is open */
.gx-admin-inventory-add-panel:not([hidden]) + .gx-admin-inventory-content{
    max-height:calc(100dvh - 650px);
    min-height:160px;
}

@media(max-width:900px){
    .gx-admin-inventory-toolbar{
        grid-template-columns:1fr !important;
    }
    .gx-admin-inventory-toolbar-right{
        grid-template-columns:minmax(0,1fr) auto;
    }
}
@media(max-width:700px){
    .gx-admin-inventory-add-grid{
        grid-template-columns:1fr;
    }
    .gx-admin-inventory-add-footer{
        grid-template-columns:1fr 90px;
    }
    .gx-admin-inventory-add-footer .confirm{
        grid-column:1/-1;
    }
    .gx-admin-inventory-add-panel:not([hidden]) + .gx-admin-inventory-content{
        max-height:260px;
    }
}
@media(max-width:520px){
    .gx-admin-inventory-toolbar-right{
        grid-template-columns:1fr;
    }
    .gx-admin-inventory-add-toggle{
        width:100%;
    }
    .gx-admin-inventory-add-panel{
        margin-left:12px;
        margin-right:12px;
    }
    .gx-admin-inventory-add-footer{
        grid-template-columns:1fr;
    }
    .gx-admin-inventory-add-footer .confirm{
        grid-column:auto;
    }
}


/* ==========================================================
   GX V41 — Realtime / modal safety polish
   ========================================================== */

.modal-overlay{
    cursor:default;
}
.modal-overlay > .modal-content,
.modal-overlay > [class*="modal-content"]{
    cursor:default;
}

/* Prevent accidental click-through while claim is running */
.gx-mailbox-claim-btn.busy,
.gx-mailbox-claim-btn:disabled{
    pointer-events:none;
}
.gx-mailbox-claim-btn.busy{
    filter:saturate(.72);
}

/* Realtime indicator for Admin Inventory */
.gx-admin-inventory-eyebrow::after{
    content:" • LIVE";
    color:#42d39a;
    text-shadow:0 0 12px rgba(66,211,154,.32);
}
.gx-admin-inventory-head-actions .refresh{
    position:relative;
}
.gx-admin-inventory-head-actions .refresh::after{
    content:"";
    width:6px;height:6px;
    margin-left:2px;
    border-radius:999px;
    background:#35cc91;
    box-shadow:0 0 10px rgba(53,204,145,.45);
}

/* On mobile keep modals safe from accidental browser-like tap dismissals */
@media(max-width:700px){
    .modal-overlay{
        overscroll-behavior:contain;
    }
}


/* =====================================================================
   GX V42 — CHAOS BOARD PRO ARENA UI
   Original neon battle-arena layout inspired by the supplied reference.
   ===================================================================== */

.gx-chaos-pro-ui{
    --cb-bg:#050914;
    --cb-panel:#0b1220;
    --cb-panel-2:#0e1728;
    --cb-line:rgba(100,145,220,.18);
    --cb-cyan:#48b9ff;
    --cb-blue:#3979ff;
    --cb-purple:#8b46ff;
    --cb-pink:#f04baf;
    --cb-green:#3ee5a0;
    --cb-yellow:#ffc84c;
    --cb-red:#ff5d72;
    --cb-text:#eef4ff;
    --cb-muted:#71809e;
    min-height:100dvh!important;
    background:
        radial-gradient(circle at 50% 45%,rgba(83,31,150,.18),transparent 34%),
        radial-gradient(circle at 50% 80%,rgba(20,101,190,.09),transparent 30%),
        linear-gradient(180deg,#030711 0%,#07101d 48%,#030711 100%)!important;
    overflow-x:hidden;
}
.gx-chaos-pro-ui::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(88,128,210,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(88,128,210,.025) 1px,transparent 1px);
    background-size:36px 36px;
    mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);
    opacity:.45;
}
.gx-chaos-pro-ui .gx-chaos-game-shell{
    width:min(1860px,calc(100vw - 20px))!important;
    min-height:100dvh;
    margin:0 auto!important;
    padding:10px 0 14px!important;
}
.gx-chaos-pro-topbar{
    min-height:72px!important;
    padding:10px 13px!important;
    margin-bottom:10px!important;
    border-radius:14px!important;
    border:1px solid rgba(92,128,206,.14)!important;
    background:
        linear-gradient(180deg,rgba(12,20,36,.94),rgba(7,13,25,.96))!important;
    box-shadow:
        0 16px 46px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.gx-chaos-pro-topbar::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
        linear-gradient(90deg,rgba(62,139,255,.12),transparent 22%,transparent 78%,rgba(145,66,255,.10));
}
.gx-chaos-game-title-wrap{position:relative;z-index:1}
.gx-chaos-game-back{
    width:42px!important;height:42px!important;
    border-radius:10px!important;
}
.gx-chaos-game-mark{
    width:44px!important;height:44px!important;
    border-radius:11px!important;
    color:#c49cff!important;
    background:linear-gradient(145deg,rgba(106,59,180,.24),rgba(44,60,120,.18))!important;
    border:1px solid rgba(154,97,246,.22)!important;
    box-shadow:inset 0 0 18px rgba(130,75,220,.08)!important;
}
.gx-chaos-pro-room-title small{
    color:#7b8fb7!important;
    letter-spacing:.13em!important;
    font-size:8px!important;
}
.gx-chaos-pro-room-title h2{
    margin:1px 0!important;
    font-size:20px!important;
    letter-spacing:-.02em!important;
}
.gx-chaos-pro-room-title p{
    font-size:9px!important;
}
.gx-chaos-game-top-actions{position:relative;z-index:1}
.gx-chaos-build-chip,
.gx-chaos-add-bot-btn,
.gx-chaos-start-game-btn{
    min-height:40px!important;
    border-radius:10px!important;
    font-size:9px!important;
}
.gx-chaos-start-game-btn{
    padding:0 16px!important;
    background:linear-gradient(135deg,#4c7cff,#8d45e9)!important;
    box-shadow:0 10px 24px rgba(85,69,215,.20)!important;
}

/* 3-column console HUD */
.gx-chaos-pro-layout{
    display:grid!important;
    grid-template-columns:250px minmax(660px,1fr) 280px!important;
    gap:10px!important;
    align-items:start!important;
}
.gx-chaos-pro-left,
.gx-chaos-pro-right{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    min-width:0;
}
.gx-chaos-pro-ui .gx-chaos-panel{
    padding:12px!important;
    border-radius:13px!important;
    background:
        linear-gradient(180deg,rgba(12,20,35,.95),rgba(7,13,24,.96))!important;
    border:1px solid rgba(85,121,196,.13)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 12px 28px rgba(0,0,0,.18)!important;
}
.gx-chaos-pro-ui .gx-chaos-panel-head{
    margin-bottom:10px!important;
}
.gx-chaos-pro-ui .gx-chaos-panel-head small{
    color:#62779d!important;
    font-size:7px!important;
    letter-spacing:.15em!important;
}
.gx-chaos-pro-ui .gx-chaos-panel-head strong{
    color:#edf3ff!important;
    font-size:13px!important;
}

/* LEFT: Players */
.gx-chaos-pro-player-panel{
    max-height:48dvh;
    overflow:hidden;
}
.gx-chaos-pro-player-panel .gx-chaos-game-player-list{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    max-height:calc(48dvh - 48px);
    overflow:auto;
    padding-right:2px;
    scrollbar-width:thin;
    scrollbar-color:#334b79 transparent;
}
.gx-chaos-game-player{
    position:relative!important;
    min-height:76px!important;
    padding:9px 9px 9px 8px!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
    overflow:hidden!important;
    border-radius:11px!important;
    border:1px solid rgba(85,118,185,.11)!important;
    background:
        linear-gradient(90deg,color-mix(in srgb,var(--player-color) 7%,transparent),rgba(255,255,255,.012))!important;
}
.gx-chaos-game-player::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:2px;
    background:var(--player-color);
    opacity:.75;
}
.gx-chaos-game-player.active{
    border-color:color-mix(in srgb,var(--player-color) 58%,transparent)!important;
    box-shadow:
        0 0 0 1px color-mix(in srgb,var(--player-color) 20%,transparent),
        0 0 20px color-mix(in srgb,var(--player-color) 18%,transparent)!important;
}
.gx-chaos-game-player.eliminated{
    filter:grayscale(.8);
    opacity:.45!important;
}
.gx-chaos-player-slot{
    position:absolute;
    top:5px;left:7px;
    z-index:2;
    padding:1px 4px;
    border-radius:4px;
    color:#dceaff;
    background:color-mix(in srgb,var(--player-color) 35%,#11182a);
    font:900 7px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.gx-chaos-game-player>.token{
    width:42px!important;height:42px!important;
    display:grid!important;place-items:center!important;
    border-radius:50%!important;
    color:#06101c!important;
    background:
        radial-gradient(circle at 35% 28%,#fff 0 7%,var(--token) 8% 66%,color-mix(in srgb,var(--token) 55%,#02050a) 100%)!important;
    border:2px solid color-mix(in srgb,var(--token) 75%,#fff)!important;
    box-shadow:
        0 0 0 4px color-mix(in srgb,var(--token) 13%,transparent),
        0 0 18px color-mix(in srgb,var(--token) 25%,transparent)!important;
    font-size:14px!important;
}
.gx-chaos-player-copy{min-width:0}
.gx-chaos-player-copy strong{
    display:block!important;
    color:#f6f8fc!important;
    font-size:11px!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.gx-chaos-player-copy strong em{
    margin-left:3px;
    color:#7fb2ff!important;
    font-size:6px!important;
}
.gx-chaos-player-copy small{
    display:block!important;
    margin-top:2px!important;
    color:#667795!important;
    font-size:7px!important;
}
.gx-chaos-player-hp{
    height:5px!important;
    margin-top:6px!important;
    border-radius:99px!important;
    background:#17223a!important;
    overflow:hidden!important;
}
.gx-chaos-player-hp i{
    display:block;height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#4be299,#78ffb8)!important;
    box-shadow:0 0 10px rgba(70,225,151,.28);
}
.gx-chaos-game-player .mini-stats{
    min-width:54px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:3px!important;
}
.gx-chaos-game-player .mini-stats b{
    color:#e9eef9!important;
    font-size:8px!important;
}
.gx-chaos-game-player .mini-stats small{
    color:#e7bd59!important;
    font-size:7px!important;
}
.gx-chaos-game-player .mini-stats i{font-size:7px!important}

/* Left: my status */
.gx-chaos-pro-my-card .gx-chaos-stat-grid{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
}
.gx-chaos-pro-my-card .gx-chaos-stat-grid>div{
    min-height:55px!important;
    padding:9px!important;
    border-radius:9px!important;
    background:#080f1d!important;
    border:1px solid rgba(85,118,185,.09)!important;
}
.gx-chaos-pro-my-card .gx-chaos-stat-grid span{
    color:#627491!important;
    font-size:7px!important;
}
.gx-chaos-pro-my-card .gx-chaos-stat-grid strong{
    margin-top:3px!important;
    color:#eef4ff!important;
    font-size:15px!important;
}
.gx-chaos-my-hp-track{
    height:7px!important;
    margin-top:8px!important;
    border-radius:99px!important;
    background:#172137!important;
}
.gx-chaos-my-hp-track i{
    border-radius:99px!important;
    box-shadow:0 0 14px currentColor;
}

/* Left: how to play */
.gx-chaos-pro-howto{
    margin-top:auto;
}
.gx-chaos-simple-rules{
    display:grid!important;
    gap:5px!important;
}
.gx-chaos-simple-rules li{
    min-height:45px!important;
    padding:7px 8px!important;
    display:grid!important;
    grid-template-columns:30px 1fr!important;
    gap:7px!important;
    align-items:center!important;
    border-radius:9px!important;
    background:rgba(255,255,255,.018)!important;
    border:1px solid rgba(80,112,178,.07)!important;
}
.gx-chaos-simple-rules li>i{
    width:30px;height:30px;
    display:grid;place-items:center;
    border-radius:8px;
    color:#9f7dff!important;
    background:rgba(116,67,190,.09)!important;
    font-size:11px!important;
}
.gx-chaos-simple-rules li span b{
    display:block;
    color:#dfe8f7!important;
    font-size:8px!important;
}
.gx-chaos-simple-rules li span small{
    display:block;
    margin-top:1px;
    color:#64738d!important;
    font-size:7px!important;
}

/* CENTER BOARD */
.gx-chaos-pro-stage{
    min-width:0!important;
    padding:0!important;
    overflow:auto!important;
    scrollbar-width:thin;
    scrollbar-color:#3e2e70 transparent;
}
.gx-chaos-pro-board-frame{
    position:relative!important;
    width:min(100%,910px)!important;
    min-width:700px!important;
    margin:0 auto!important;
    padding:10px!important;
    border-radius:18px!important;
    background:
        linear-gradient(145deg,#0c1426,#050a14)!important;
    border:1px solid rgba(84,126,217,.20)!important;
    box-shadow:
        0 0 0 1px rgba(116,72,205,.08),
        0 26px 70px rgba(0,0,0,.38),
        0 0 50px rgba(69,44,146,.12),
        inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.gx-chaos-board-frame-glow{
    position:absolute;
    inset:-1px;
    pointer-events:none;
    border-radius:inherit;
    box-shadow:
        inset 0 0 26px rgba(59,117,233,.06),
        0 0 24px rgba(94,48,184,.08);
}
.gx-chaos-pro-board-grid{
    --cell-gap:5px;
    gap:var(--cell-gap)!important;
    min-height:710px!important;
    aspect-ratio:1 / 1!important;
    border-radius:13px!important;
    background:
        linear-gradient(180deg,rgba(20,31,56,.60),rgba(5,10,20,.82))!important;
}

/* tiles: chunky neon consoles */
.gx-chaos-pro-board-grid .gx-chaos-board-cell{
    position:relative!important;
    min-width:0!important;
    padding:6px 4px 7px!important;
    overflow:visible!important;
    border-radius:8px!important;
    background:linear-gradient(180deg,#14213a,#0b1220)!important;
    border:1px solid rgba(111,147,213,.22)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -5px 0 rgba(0,0,0,.18),
        0 5px 0 #040812,
        0 8px 16px rgba(0,0,0,.24)!important;
    transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important;
}
.gx-chaos-pro-board-grid .gx-chaos-board-cell::before{
    content:"";
    position:absolute;
    inset:2px;
    pointer-events:none;
    border-radius:6px;
    border:1px solid color-mix(in srgb,var(--tile-glow,#5f8fff) 24%,transparent);
    box-shadow:inset 0 0 14px color-mix(in srgb,var(--tile-glow,#5f8fff) 8%,transparent);
}
.gx-chaos-pro-board-grid .gx-chaos-board-cell:hover{
    z-index:5;
    transform:translateY(-2px)!important;
    filter:brightness(1.1);
}
.gx-chaos-board-cell .cell-index{
    top:4px!important;
    left:5px!important;
    z-index:2;
    color:#d6e1f6!important;
    font:900 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace!important;
    text-shadow:0 1px 2px #000;
}
.gx-chaos-cell-icon{
    width:28px;height:28px;
    margin:3px auto 2px!important;
    display:grid;place-items:center;
    border-radius:8px;
    color:var(--tile-glow,#7fb1ff);
    background:color-mix(in srgb,var(--tile-glow,#7fb1ff) 11%,#06101c);
    box-shadow:0 0 12px color-mix(in srgb,var(--tile-glow,#7fb1ff) 15%,transparent);
}
.gx-chaos-cell-icon i{font-size:13px!important}
.gx-chaos-pro-board-grid .gx-chaos-board-cell>strong{
    position:relative;
    z-index:2;
    display:block!important;
    color:#f3f6fb!important;
    font-size:8.3px!important;
    line-height:1.06!important;
    text-align:center!important;
    text-shadow:0 2px 3px rgba(0,0,0,.85);
}
.gx-chaos-pro-board-grid .gx-chaos-board-cell>small{
    position:relative;
    z-index:2;
    display:block!important;
    margin-top:2px!important;
    color:#8e9bb1!important;
    font-size:6px!important;
    line-height:1.12!important;
    text-align:center!important;
}

/* tile palettes */
.gx-chaos-board-cell.type-start{--tile-glow:#49d2ff;background:linear-gradient(180deg,#0b3751,#082237)!important}
.gx-chaos-board-cell.type-battle{--tile-glow:#ff5a7f;background:linear-gradient(180deg,#40152b,#24101e)!important}
.gx-chaos-board-cell.type-event{--tile-glow:#ffc94d;background:linear-gradient(180deg,#443515,#281f0e)!important}
.gx-chaos-board-cell.type-heal{--tile-glow:#56ed9a;background:linear-gradient(180deg,#123d32,#0b251f)!important}
.gx-chaos-board-cell.type-punish{--tile-glow:#ee4d9e;background:linear-gradient(180deg,#3f1330,#25101e)!important}
.gx-chaos-board-cell.type-trap{--tile-glow:#ff7758;background:linear-gradient(180deg,#452218,#28150f)!important}
.gx-chaos-board-cell.type-bonus{--tile-glow:#ffd250;background:linear-gradient(180deg,#463914,#2a220d)!important}
.gx-chaos-board-cell.type-landmark{--tile-glow:#b16dff;background:linear-gradient(180deg,#311a50,#1e1231)!important}
.gx-chaos-board-cell.type-steal{--tile-glow:#67a7ff;background:linear-gradient(180deg,#182f50,#101d31)!important}
.gx-chaos-board-cell.type-blast{--tile-glow:#ff644f;background:linear-gradient(180deg,#4a1d17,#2d120e)!important}
.gx-chaos-board-cell.type-curse{--tile-glow:#a869ff;background:linear-gradient(180deg,#341957,#201035)!important}

.gx-chaos-board-cell.gx-chaos-step-focus{
    z-index:8!important;
    animation:gxChaosTilePulse .45s ease-in-out infinite alternate!important;
}
@keyframes gxChaosTilePulse{
    from{transform:translateY(-1px) scale(1);filter:brightness(1.05)}
    to{transform:translateY(-4px) scale(1.045);filter:brightness(1.32)}
}

/* player pawns on tiles */
.gx-chaos-board-tokens{
    position:absolute!important;
    inset:auto 3px 3px!important;
    z-index:9!important;
    display:flex!important;
    justify-content:center!important;
    gap:2px!important;
    pointer-events:none;
}
.gx-chaos-board-token{
    width:23px!important;height:23px!important;
    display:grid!important;place-items:center!important;
    border-radius:50%!important;
    background:
        radial-gradient(circle at 35% 25%,#fff 0 6%,var(--token) 7% 62%,color-mix(in srgb,var(--token) 48%,#05070d) 100%)!important;
    border:2px solid color-mix(in srgb,var(--token) 82%,#fff)!important;
    color:#06101c!important;
    box-shadow:
        0 0 0 2px rgba(3,6,13,.78),
        0 0 12px color-mix(in srgb,var(--token) 38%,transparent)!important;
    font-size:7px!important;
    font-weight:1000!important;
}
.gx-chaos-board-token.moving{
    animation:gxChaosPawnHop .34s cubic-bezier(.2,.7,.2,1) both!important;
}
@keyframes gxChaosPawnHop{
    0%{transform:translateY(0) scale(1)}
    48%{transform:translateY(-15px) scale(1.18)}
    100%{transform:translateY(0) scale(1)}
}

/* central arena */
.gx-chaos-pro-arena-center{
    position:relative!important;
    overflow:hidden!important;
    border-radius:13px!important;
    background:
        radial-gradient(circle at 50% 50%,rgba(96,36,161,.22),transparent 23%),
        radial-gradient(circle at 50% 52%,rgba(23,84,168,.16),transparent 46%),
        linear-gradient(180deg,#07101d,#050a13)!important;
    border:1px solid rgba(76,112,190,.12)!important;
    box-shadow:
        inset 0 0 65px rgba(67,31,131,.10),
        inset 0 0 0 1px rgba(255,255,255,.015)!important;
}
.gx-chaos-pro-arena-center::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(74,112,181,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(74,112,181,.035) 1px,transparent 1px);
    background-size:28px 28px;
    mask-image:radial-gradient(circle,#000 20%,transparent 75%);
}
.gx-chaos-pro-arena-floor{
    position:absolute;
    inset:15% 14% 28%;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(87,77,182,.15);
    background:
        radial-gradient(circle,rgba(58,37,126,.13),transparent 54%);
}
.gx-chaos-pro-arena-floor::before,
.gx-chaos-pro-arena-floor::after{
    content:"";
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(86,93,202,.12);
}
.gx-chaos-pro-arena-floor::before{inset:10%}
.gx-chaos-pro-arena-floor::after{inset:24%;border-color:rgba(151,67,222,.14)}
.gx-chaos-pro-logo{
    position:relative;
    z-index:2;
    text-align:center;
    transform:rotate(-3deg);
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.36));
}
.gx-chaos-pro-logo-top,
.gx-chaos-pro-logo-bottom{
    display:block;
    font-family:'Kanit',sans-serif;
    font-weight:1000;
    font-style:italic;
    letter-spacing:-.055em;
    line-height:.82;
    -webkit-text-stroke:1px rgba(219,231,255,.18);
}
.gx-chaos-pro-logo-top{
    font-size:clamp(32px,4.3vw,66px);
    color:#d9e9ff;
    text-shadow:
        0 4px 0 #2457b1,
        0 8px 18px rgba(38,100,225,.28);
}
.gx-chaos-pro-logo-bottom{
    margin-top:8px;
    font-size:clamp(26px,3.5vw,54px);
    color:#bd72ff;
    text-shadow:
        0 4px 0 #5c239a,
        0 8px 18px rgba(129,43,207,.28);
}
.gx-chaos-pro-logo small{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:16px;
    padding:5px 11px;
    border-radius:999px;
    color:#9db0d3;
    background:rgba(6,12,23,.70);
    border:1px solid rgba(91,121,185,.10);
    font-size:7px;
    letter-spacing:.13em;
}

/* turn / action overlays */
.gx-chaos-pro-turn-card{
    position:absolute!important;
    top:14px!important;
    right:14px!important;
    width:160px!important;
    padding:10px 12px!important;
    border-radius:10px!important;
    background:rgba(5,10,20,.80)!important;
    border:1px solid rgba(84,112,174,.12)!important;
    backdrop-filter:blur(9px);
}
.gx-chaos-pro-turn-card small{
    color:#667897!important;
    font-size:6px!important;
    letter-spacing:.14em!important;
}
.gx-chaos-pro-turn-card strong{
    margin-top:3px!important;
    color:#f2f6ff!important;
    font-size:11px!important;
}
.gx-chaos-pro-turn-card>span{
    margin-top:3px!important;
    color:#8f6ed1!important;
    font-size:7px!important;
}
.gx-chaos-pro-turn-flow{
    position:absolute!important;
    left:14px!important;
    bottom:14px!important;
    width:min(330px,48%)!important;
    padding:10px!important;
    border-radius:10px!important;
    background:rgba(5,10,20,.78)!important;
    border:1px solid rgba(76,107,174,.11)!important;
    backdrop-filter:blur(8px);
}
.gx-chaos-pro-turn-flow .gx-chaos-turn-flow-head{
    margin-bottom:5px!important;
}
.gx-chaos-pro-turn-flow #gx-chaos-phase-pill{
    min-height:22px!important;
    padding:0 7px!important;
    font-size:7px!important;
}
.gx-chaos-pro-turn-flow>strong{
    font-size:10px!important;
}
.gx-chaos-pro-turn-flow>p{
    margin-top:3px!important;
    font-size:7px!important;
    line-height:1.4!important;
}
.gx-chaos-pro-turn-flow .gx-chaos-turn-steps{
    margin-top:7px!important;
    gap:4px!important;
}
.gx-chaos-pro-turn-flow .gx-chaos-turn-steps span{
    min-height:24px!important;
    padding:0 5px!important;
    font-size:6px!important;
}
.gx-chaos-pro-turn-flow .gx-chaos-turn-steps i{
    width:14px!important;height:14px!important;
    font-size:6px!important;
}

/* bottom dice console */
.gx-chaos-pro-dice-console{
    position:absolute!important;
    left:50%!important;
    bottom:12px!important;
    transform:translateX(-50%)!important;
    z-index:7!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    padding:6px!important;
    border-radius:14px!important;
    background:rgba(4,8,17,.78)!important;
    border:1px solid rgba(113,83,214,.17)!important;
    box-shadow:0 10px 30px rgba(0,0,0,.30)!important;
    backdrop-filter:blur(10px);
}
.gx-chaos-pro-dice-platform{
    width:50px;height:50px;
    display:grid;place-items:center;
    border-radius:11px;
    background:
        radial-gradient(circle,rgba(111,69,207,.22),transparent 68%),
        #0b1020;
    border:1px solid rgba(138,91,230,.15);
    box-shadow:inset 0 0 18px rgba(110,68,203,.10);
}
.gx-chaos-pro-dice-console .gx-chaos-dice{
    width:38px!important;height:38px!important;
    color:#dbc7ff!important;
    background:transparent!important;
    box-shadow:none!important;
    font-size:29px!important;
}
.gx-chaos-pro-dice-console #gx-chaos-roll-btn{
    min-width:120px!important;
    height:48px!important;
    border-radius:10px!important;
    background:linear-gradient(135deg,#426ef0,#8b43e6)!important;
    border:0!important;
    color:#fff!important;
    font-size:9px!important;
    font-weight:900!important;
    box-shadow:0 10px 24px rgba(69,67,216,.18)!important;
}
.gx-chaos-pro-dice-console #gx-chaos-roll-btn:disabled{
    background:#141b2a!important;
    color:#66738c!important;
    box-shadow:none!important;
}
.gx-chaos-pro-pending{
    position:absolute!important;
    left:50%!important;
    bottom:76px!important;
    transform:translateX(-50%)!important;
    z-index:8!important;
    width:min(520px,72%)!important;
}
.gx-chaos-pro-last-notice{
    position:absolute!important;
    left:50%!important;
    top:20px!important;
    transform:translateX(-50%)!important;
    z-index:7!important;
    width:min(390px,54%)!important;
}

/* RIGHT: Game info */
.gx-chaos-live-dot{
    min-height:22px!important;
    padding:0 7px!important;
    display:inline-flex!important;
    align-items:center!important;
    border-radius:999px!important;
    color:#6ee5b2!important;
    background:rgba(46,183,124,.08)!important;
    border:1px solid rgba(54,203,141,.10)!important;
    font-size:6px!important;
    font-weight:900!important;
}
.gx-chaos-live-dot::before{
    content:"";
    width:5px;height:5px;
    margin-right:4px;
    border-radius:50%;
    background:#4de0a3;
    box-shadow:0 0 9px rgba(77,224,163,.65);
}
.gx-chaos-pro-info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
}
.gx-chaos-pro-info-grid>div{
    min-height:47px;
    padding:8px 9px;
    border-radius:8px;
    background:#080f1c;
    border:1px solid rgba(77,107,169,.08);
}
.gx-chaos-pro-info-grid span{
    display:block;
    color:#61718e;
    font-size:7px;
}
.gx-chaos-pro-info-grid strong{
    display:block;
    margin-top:3px;
    color:#ecf2ff;
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* RIGHT: event log */
.gx-chaos-pro-log-panel .gx-chaos-game-log{
    max-height:210px!important;
    overflow:auto!important;
    padding-right:2px!important;
}
.gx-chaos-pro-log-panel .gx-chaos-game-log>div:not(.empty){
    min-height:35px!important;
    padding:6px 7px!important;
    display:grid!important;
    grid-template-columns:26px 1fr!important;
    gap:7px!important;
    align-items:center!important;
    border-bottom:1px solid rgba(255,255,255,.035)!important;
}
.gx-chaos-pro-log-panel .gx-chaos-game-log>div>span{
    width:26px;height:26px!important;
    display:grid!important;place-items:center!important;
    border-radius:7px!important;
    color:#9e7aff!important;
    background:rgba(116,69,190,.08)!important;
}
.gx-chaos-pro-log-panel .gx-chaos-game-log p{
    color:#9eabc1!important;
    font-size:7.5px!important;
    line-height:1.35!important;
}

/* RIGHT: effects */
.gx-chaos-pro-effects{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:5px!important;
}
.gx-chaos-pro-effects>span{
    min-height:25px!important;
    padding:0 7px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:5px!important;
    border-radius:7px!important;
    font-size:7px!important;
}
.gx-chaos-pro-effect-help{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    margin-top:8px;
}
.gx-chaos-pro-effect-help>span{
    min-height:38px;
    padding:6px;
    display:grid;
    grid-template-columns:22px 1fr;
    grid-template-rows:auto auto;
    column-gap:6px;
    align-items:center;
    border-radius:8px;
    background:#080f1c;
    border:1px solid rgba(77,108,170,.07);
}
.gx-chaos-pro-effect-help>span i{
    grid-row:1/3;
    width:22px;height:22px;
    display:grid;place-items:center;
    border-radius:6px;
    color:#c18bff;
    background:rgba(114,67,181,.08);
}
.gx-chaos-pro-effect-help b{
    color:#bbc6d8;
    font-size:7px;
}
.gx-chaos-pro-effect-help small{
    color:#606f88;
    font-size:6px;
}

/* RIGHT: inventory */
.gx-chaos-pro-items-panel{
    min-height:0;
}
.gx-chaos-pro-items-panel .gx-chaos-shop-target-wrap{
    margin-bottom:7px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-shop-target-wrap span{
    font-size:7px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-shop-target-wrap select{
    min-height:34px!important;
    border-radius:8px!important;
    font-size:8px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-owned-items{
    max-height:205px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:5px!important;
    overflow:auto!important;
}
.gx-chaos-pro-items-panel .gx-chaos-owned-items>button{
    min-height:52px!important;
    padding:6px!important;
    grid-template-columns:28px 1fr auto!important;
    gap:5px!important;
    border-radius:8px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-owned-items .icon{
    width:28px!important;height:28px!important;
    border-radius:7px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-owned-items b{
    font-size:7.5px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-owned-items small{
    margin-top:1px!important;
    font-size:6px!important;
    line-height:1.2!important;
}
.gx-chaos-pro-items-panel .gx-chaos-owned-items em{
    font-size:7px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-shop-status{
    min-height:28px!important;
    margin-top:6px!important;
    font-size:7px!important;
}
.gx-chaos-open-shop-mini{
    min-height:27px!important;
    padding:0 7px!important;
    font-size:7px!important;
}

/* Notice/pending action keep readable but compact */
.gx-chaos-pro-ui .gx-chaos-last-notice,
.gx-chaos-pro-ui .gx-chaos-pending-action{
    font-size:8px!important;
}
.gx-chaos-pro-ui .gx-chaos-pending-action button{
    min-height:34px!important;
    font-size:8px!important;
}

/* Desktop height tuning */
@media (min-width:1281px) and (min-height:850px){
    .gx-chaos-pro-layout{
        min-height:calc(100dvh - 102px);
    }
    .gx-chaos-pro-board-frame{
        max-height:calc(100dvh - 104px);
    }
    .gx-chaos-pro-board-grid{
        min-height:0!important;
        height:min(820px,calc(100dvh - 124px))!important;
    }
}

/* Laptop / iPad landscape */
@media(max-width:1280px){
    .gx-chaos-pro-layout{
        grid-template-columns:220px minmax(620px,1fr) 245px!important;
    }
    .gx-chaos-pro-board-frame{
        min-width:650px!important;
    }
    .gx-chaos-pro-ui .gx-chaos-panel{
        padding:10px!important;
    }
    .gx-chaos-pro-items-panel .gx-chaos-owned-items{
        grid-template-columns:1fr!important;
    }
}

/* Tablet: board first, HUD becomes two columns below */
@media(max-width:1100px){
    .gx-chaos-pro-ui .gx-chaos-game-shell{
        width:min(980px,calc(100vw - 16px))!important;
    }
    .gx-chaos-pro-layout{
        grid-template-columns:1fr 1fr!important;
        grid-template-areas:
            "board board"
            "left right"!important;
        align-items:start!important;
    }
    .gx-chaos-pro-stage{grid-area:board}
    .gx-chaos-pro-left{grid-area:left}
    .gx-chaos-pro-right{grid-area:right}
    .gx-chaos-pro-board-frame{
        width:100%!important;
        max-width:820px!important;
        min-width:650px!important;
    }
    .gx-chaos-pro-board-grid{
        min-height:650px!important;
    }
    .gx-chaos-pro-player-panel{
        max-height:none!important;
    }
    .gx-chaos-pro-player-panel .gx-chaos-game-player-list{
        max-height:320px!important;
    }
    .gx-chaos-pro-log-panel .gx-chaos-game-log{
        max-height:250px!important;
    }
}

/* Phones / portrait tablets */
@media(max-width:720px){
    .gx-chaos-pro-ui .gx-chaos-game-shell{
        width:100%!important;
        padding:6px!important;
    }
    .gx-chaos-pro-topbar{
        min-height:auto!important;
        padding:8px!important;
        align-items:flex-start!important;
        gap:8px!important;
    }
    .gx-chaos-game-title-wrap{
        min-width:0!important;
    }
    .gx-chaos-game-back{
        width:36px!important;height:36px!important;
    }
    .gx-chaos-game-mark{
        display:none!important;
    }
    .gx-chaos-pro-room-title h2{
        font-size:15px!important;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:48vw;
    }
    .gx-chaos-pro-room-title small{
        font-size:6px!important;
    }
    .gx-chaos-pro-room-title p{
        font-size:7px!important;
    }
    .gx-chaos-game-top-actions{
        margin-left:auto!important;
        display:flex!important;
        flex-wrap:wrap!important;
        justify-content:flex-end!important;
        gap:4px!important;
    }
    .gx-chaos-build-chip{display:none!important}
    .gx-chaos-add-bot-btn,
    .gx-chaos-start-game-btn{
        min-height:34px!important;
        padding:0 8px!important;
    }
    .gx-chaos-add-bot-btn span,
    .gx-chaos-start-game-btn span{
        display:none!important;
    }

    .gx-chaos-pro-layout{
        display:flex!important;
        flex-direction:column!important;
        gap:8px!important;
    }
    .gx-chaos-pro-stage{order:1;width:100%!important}
    .gx-chaos-pro-left{order:2;width:100%!important}
    .gx-chaos-pro-right{order:3;width:100%!important}

    .gx-chaos-pro-stage{
        overflow-x:auto!important;
        padding-bottom:8px!important;
    }
    .gx-chaos-pro-board-frame{
        width:640px!important;
        min-width:640px!important;
        max-width:none!important;
        padding:8px!important;
    }
    .gx-chaos-pro-board-grid{
        min-height:620px!important;
        height:620px!important;
        gap:4px!important;
    }

    .gx-chaos-pro-board-grid .gx-chaos-board-cell{
        padding:5px 3px!important;
    }
    .gx-chaos-cell-icon{
        width:25px;height:25px;
    }
    .gx-chaos-cell-icon i{font-size:11px!important}
    .gx-chaos-pro-board-grid .gx-chaos-board-cell>strong{
        font-size:7.5px!important;
    }
    .gx-chaos-pro-board-grid .gx-chaos-board-cell>small{
        font-size:5.5px!important;
    }

    .gx-chaos-pro-logo-top{font-size:38px!important}
    .gx-chaos-pro-logo-bottom{font-size:31px!important}
    .gx-chaos-pro-turn-flow{
        width:220px!important;
    }
    .gx-chaos-pro-turn-flow>p{display:none}
    .gx-chaos-pro-turn-card{
        width:130px!important;
    }
    .gx-chaos-pro-dice-console{
        bottom:8px!important;
    }
    .gx-chaos-pro-pending{
        width:78%!important;
        bottom:70px!important;
    }
    .gx-chaos-pro-last-notice{
        width:62%!important;
    }

    .gx-chaos-pro-left,
    .gx-chaos-pro-right{
        display:grid!important;
        grid-template-columns:1fr!important;
    }
    .gx-chaos-pro-player-panel .gx-chaos-game-player-list{
        max-height:none!important;
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
    }
    .gx-chaos-game-player{
        min-height:72px!important;
    }
    .gx-chaos-pro-items-panel .gx-chaos-owned-items{
        grid-template-columns:1fr 1fr!important;
        max-height:none!important;
    }
}

/* Very small phones */
@media(max-width:460px){
    .gx-chaos-pro-board-frame{
        width:590px!important;
        min-width:590px!important;
    }
    .gx-chaos-pro-board-grid{
        min-height:570px!important;
        height:570px!important;
    }
    .gx-chaos-pro-player-panel .gx-chaos-game-player-list{
        grid-template-columns:1fr!important;
    }
    .gx-chaos-pro-items-panel .gx-chaos-owned-items{
        grid-template-columns:1fr!important;
    }
}

/* Reduced motion accessibility */
@media(prefers-reduced-motion:reduce){
    .gx-chaos-board-token.moving,
    .gx-chaos-board-cell.gx-chaos-step-focus{
        animation:none!important;
    }
    .gx-chaos-pro-board-grid .gx-chaos-board-cell{
        transition:none!important;
    }
}


/* =====================================================================
   GX V43 — CHAOS READABILITY + COLLAPSIBLE HUD
   Goal: less board width, bigger readable text, compact HOW TO PLAY/items.
   ===================================================================== */

/* Desktop: give more room to side HUDs, narrow the board. */
.gx-chaos-pro-layout{
    grid-template-columns:300px minmax(610px,780px) 340px!important;
    justify-content:center!important;
    gap:14px!important;
}
.gx-chaos-pro-board-frame{
    width:min(100%,780px)!important;
    min-width:610px!important;
}
.gx-chaos-pro-board-grid{
    min-height:620px!important;
}

/* Overall HUD typography — stop using micro text. */
.gx-chaos-pro-ui .gx-chaos-panel{
    padding:14px!important;
}
.gx-chaos-pro-ui .gx-chaos-panel-head{
    margin-bottom:12px!important;
}
.gx-chaos-pro-ui .gx-chaos-panel-head small{
    font-size:8.5px!important;
    line-height:1.25!important;
}
.gx-chaos-pro-ui .gx-chaos-panel-head strong{
    font-size:15px!important;
    line-height:1.25!important;
}

/* Player list readability */
.gx-chaos-game-player{
    min-height:84px!important;
    grid-template-columns:46px minmax(0,1fr) 64px!important;
    gap:10px!important;
    padding:10px!important;
}
.gx-chaos-game-player>.token{
    width:46px!important;
    height:46px!important;
    font-size:16px!important;
}
.gx-chaos-player-slot{
    font-size:8px!important;
}
.gx-chaos-player-copy strong{
    font-size:12.5px!important;
}
.gx-chaos-player-copy strong em{
    font-size:7px!important;
}
.gx-chaos-player-copy small{
    font-size:8px!important;
}
.gx-chaos-game-player .mini-stats b{
    font-size:9.5px!important;
}
.gx-chaos-game-player .mini-stats small{
    font-size:8.5px!important;
}

/* My status */
.gx-chaos-pro-my-card .gx-chaos-stat-grid>div{
    min-height:61px!important;
    padding:10px!important;
}
.gx-chaos-pro-my-card .gx-chaos-stat-grid span{
    font-size:8.5px!important;
}
.gx-chaos-pro-my-card .gx-chaos-stat-grid strong{
    font-size:17px!important;
}

/* Board tile copy: slightly larger; secondary notes hidden at normal desktop
   so the title can be readable without overcrowding. */
.gx-chaos-pro-board-grid .gx-chaos-board-cell{
    padding:6px 4px 8px!important;
}
.gx-chaos-cell-icon{
    width:30px!important;
    height:30px!important;
}
.gx-chaos-cell-icon i{
    font-size:14px!important;
}
.gx-chaos-pro-board-grid .gx-chaos-board-cell>strong{
    font-size:9.3px!important;
    line-height:1.12!important;
}
.gx-chaos-pro-board-grid .gx-chaos-board-cell>small{
    display:none!important;
}
.gx-chaos-board-cell .cell-index{
    font-size:7.5px!important;
}
.gx-chaos-board-token{
    width:25px!important;
    height:25px!important;
    font-size:8px!important;
}

/* Center UI larger */
.gx-chaos-pro-turn-card{
    width:172px!important;
    padding:11px 13px!important;
}
.gx-chaos-pro-turn-card small{
    font-size:7.5px!important;
}
.gx-chaos-pro-turn-card strong{
    font-size:13px!important;
}
.gx-chaos-pro-turn-card>span{
    font-size:8px!important;
}
.gx-chaos-pro-turn-flow{
    width:min(360px,52%)!important;
    padding:12px!important;
}
.gx-chaos-pro-turn-flow #gx-chaos-phase-pill{
    font-size:8px!important;
}
.gx-chaos-pro-turn-flow>strong{
    font-size:12.5px!important;
}
.gx-chaos-pro-turn-flow>p{
    font-size:9px!important;
    line-height:1.5!important;
}
.gx-chaos-pro-turn-flow .gx-chaos-turn-steps span{
    min-height:27px!important;
    font-size:7.5px!important;
}
.gx-chaos-pro-turn-flow .gx-chaos-turn-steps i{
    width:16px!important;
    height:16px!important;
    font-size:7px!important;
}
.gx-chaos-pro-dice-console #gx-chaos-roll-btn{
    min-width:132px!important;
    font-size:10.5px!important;
}

/* Game info */
.gx-chaos-pro-info-grid span{
    font-size:8.5px!important;
}
.gx-chaos-pro-info-grid strong{
    font-size:13px!important;
}
.gx-chaos-live-dot{
    font-size:7.5px!important;
}

/* Event log */
.gx-chaos-pro-log-panel .gx-chaos-game-log{
    max-height:240px!important;
}
.gx-chaos-pro-log-panel .gx-chaos-game-log>div:not(.empty){
    min-height:42px!important;
    grid-template-columns:30px 1fr!important;
    gap:8px!important;
    padding:8px!important;
}
.gx-chaos-pro-log-panel .gx-chaos-game-log>div>span{
    width:30px!important;
    height:30px!important;
}
.gx-chaos-pro-log-panel .gx-chaos-game-log p{
    font-size:9.5px!important;
    line-height:1.45!important;
}

/* Status effects */
.gx-chaos-pro-effects>span{
    min-height:29px!important;
    padding:0 8px!important;
    font-size:8.5px!important;
}
.gx-chaos-pro-effect-help>span{
    min-height:45px!important;
}
.gx-chaos-pro-effect-help b{
    font-size:8.5px!important;
}
.gx-chaos-pro-effect-help small{
    font-size:7.5px!important;
}

/* ==========================================================
   Collapsible HUD panels
   ========================================================== */
.gx-chaos-collapsible{
    overflow:hidden!important;
    transition:border-color .18s ease, background .18s ease!important;
}
.gx-chaos-collapsible-head{
    width:100%;
    padding:0;
    display:flex;
    align-items:center;
    gap:8px;
    border:0;
    outline:0;
    background:transparent;
    color:inherit;
    text-align:left;
    cursor:pointer;
    font-family:'Kanit',sans-serif;
}
.gx-chaos-collapsible-head>.gx-chaos-panel-head{
    flex:1;
    min-width:0;
    margin:0!important;
}
.gx-chaos-collapsible-head .gx-chaos-panel-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
}
.gx-chaos-collapse-summary{
    min-height:24px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:999px;
    color:#8ea4c9;
    background:rgba(77,107,170,.08);
    border:1px solid rgba(92,126,192,.08);
    font-size:7.5px;
    font-weight:800;
    white-space:nowrap;
}
.gx-chaos-collapse-toggle{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    flex:0 0 30px;
    border-radius:8px;
    color:#91a5c9;
    background:rgba(72,99,157,.07);
    border:1px solid rgba(85,119,185,.08);
}
.gx-chaos-collapse-toggle i{
    transition:transform .2s ease;
}
.gx-chaos-collapsible:not(.is-collapsed) .gx-chaos-collapse-toggle i{
    transform:rotate(180deg);
}
.gx-chaos-collapsible-body{
    display:grid;
    grid-template-rows:1fr;
    opacity:1;
    margin-top:12px;
    transition:grid-template-rows .22s ease, opacity .16s ease, margin .22s ease;
}
.gx-chaos-collapsible-body>*{
    min-height:0;
}
.gx-chaos-collapsible.is-collapsed .gx-chaos-collapsible-body{
    grid-template-rows:0fr;
    opacity:0;
    margin-top:0;
    overflow:hidden;
}
.gx-chaos-collapsible.is-collapsed{
    padding-top:12px!important;
    padding-bottom:12px!important;
}
.gx-chaos-collapsible:not(.is-collapsed){
    border-color:rgba(98,133,211,.20)!important;
}

/* HOW TO PLAY: bigger when expanded */
.gx-chaos-pro-howto{
    margin-top:0!important;
}
.gx-chaos-simple-rules{
    gap:8px!important;
}
.gx-chaos-simple-rules li{
    min-height:58px!important;
    padding:10px!important;
    grid-template-columns:38px 1fr!important;
    gap:10px!important;
}
.gx-chaos-simple-rules li>i{
    width:38px!important;
    height:38px!important;
    font-size:14px!important;
}
.gx-chaos-simple-rules li span b{
    font-size:10.5px!important;
}
.gx-chaos-simple-rules li span small{
    margin-top:3px!important;
    font-size:8.5px!important;
    line-height:1.5!important;
}

/* Items header keeps shop visible separately */
.gx-chaos-items-panel-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
}
.gx-chaos-items-panel-head>.gx-chaos-collapsible-head{
    min-width:0;
}
.gx-chaos-open-shop-mini{
    min-height:34px!important;
    padding:0 10px!important;
    font-size:8.5px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-shop-target-wrap span{
    font-size:8.5px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-shop-target-wrap select{
    min-height:38px!important;
    font-size:9.5px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-owned-items{
    max-height:300px!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-owned-items>button{
    min-height:62px!important;
    padding:8px!important;
    grid-template-columns:34px minmax(0,1fr) auto!important;
    gap:8px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-owned-items .icon{
    width:34px!important;
    height:34px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-owned-items b{
    font-size:9.5px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-owned-items small{
    font-size:7.8px!important;
    line-height:1.35!important;
}
.gx-chaos-pro-items-panel .gx-chaos-owned-items em{
    font-size:9px!important;
}
.gx-chaos-pro-items-panel .gx-chaos-shop-status{
    min-height:33px!important;
    font-size:8.5px!important;
}

/* Make player + event text readable even on tall desktop */
@media (min-width:1281px) and (min-height:850px){
    .gx-chaos-pro-layout{
        min-height:calc(100dvh - 104px)!important;
    }
    .gx-chaos-pro-board-frame{
        width:min(100%,760px)!important;
        max-height:calc(100dvh - 112px)!important;
    }
    .gx-chaos-pro-board-grid{
        height:min(720px,calc(100dvh - 132px))!important;
        min-height:600px!important;
    }
}

/* Laptop: still prioritize readable side panels. */
@media(max-width:1450px){
    .gx-chaos-pro-layout{
        grid-template-columns:275px minmax(590px,720px) 315px!important;
        gap:10px!important;
    }
    .gx-chaos-pro-board-frame{
        min-width:590px!important;
        width:min(100%,720px)!important;
    }
}

/* Existing tablet breakpoint still becomes stacked, but use a slightly
   narrower board and larger tile labels than V42. */
@media(max-width:1100px){
    .gx-chaos-pro-layout{
        grid-template-columns:1fr 1fr!important;
    }
    .gx-chaos-pro-board-frame{
        width:100%!important;
        max-width:760px!important;
        min-width:610px!important;
    }
    .gx-chaos-pro-board-grid{
        min-height:610px!important;
    }
}

/* Mobile keeps horizontal scroll, but collapsible panels stay compact. */
@media(max-width:720px){
    .gx-chaos-pro-board-frame{
        width:600px!important;
        min-width:600px!important;
    }
    .gx-chaos-pro-board-grid{
        height:580px!important;
        min-height:580px!important;
    }
    .gx-chaos-pro-board-grid .gx-chaos-board-cell>strong{
        font-size:8.3px!important;
    }
    .gx-chaos-pro-ui .gx-chaos-panel-head strong{
        font-size:14px!important;
    }
    .gx-chaos-pro-player-panel .gx-chaos-game-player-list{
        grid-template-columns:1fr!important;
    }
    .gx-chaos-collapse-summary{
        font-size:7px!important;
    }
}

/* Reduced-motion users still get instant open/close states. */
@media(prefers-reduced-motion:reduce){
    .gx-chaos-collapsible-body,
    .gx-chaos-collapse-toggle i{
        transition:none!important;
    }
}


/* =====================================================================
   GX V44 — MARKETPLACE
   ===================================================================== */

.gx-market-menu-count{
    min-width:20px;
    height:20px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    border-radius:999px;
    color:#c8d9ff;
    background:rgba(54,102,197,.15);
    border:1px solid rgba(77,126,220,.16);
    font-size:8px;
    font-weight:900;
}
.gx-inventory-market-btn{
    min-height:34px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:9px;
    border:1px solid rgba(102,80,195,.16);
    color:#cdbfff;
    background:rgba(94,60,176,.08);
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.gx-market-overlay{
    padding:16px!important;
}
.gx-market-modal{
    width:min(1220px,calc(100vw - 24px))!important;
    max-width:1220px!important;
    max-height:calc(100dvh - 24px)!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:24px!important;
    border:1px solid rgba(88,119,184,.20)!important;
    background:
        radial-gradient(circle at 80% -20%,rgba(83,48,161,.12),transparent 40%),
        linear-gradient(180deg,#111827,#090e18)!important;
    box-shadow:0 38px 120px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.gx-market-head{
    min-height:92px;
    padding:18px 20px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 38px;
    gap:12px;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.05);
    background:rgba(14,21,36,.94);
}
.gx-market-brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
}
.gx-market-brand>.icon{
    width:50px;height:50px;
    display:grid;place-items:center;
    flex:0 0 50px;
    border-radius:15px;
    color:#bba0ff;
    background:linear-gradient(145deg,rgba(110,74,198,.18),rgba(44,81,158,.12));
    border:1px solid rgba(132,98,218,.20);
    font-size:19px;
}
.gx-market-brand b{
    display:block;
    color:#78a6ff;
    font-size:8px;
    letter-spacing:.14em;
}
.gx-market-brand h3{
    margin:2px 0 0;
    color:#f4f7fb;
    font-size:22px;
}
.gx-market-brand p{
    margin:3px 0 0;
    color:#748198;
    font-size:9px;
}
.gx-market-wallet{
    min-width:150px;
    height:48px;
    padding:0 13px;
    display:grid;
    grid-template-columns:30px 1fr;
    gap:8px;
    align-items:center;
    border-radius:13px;
    background:rgba(255,190,42,.045);
    border:1px solid rgba(232,175,44,.10);
}
.gx-market-wallet>span{
    width:30px;height:30px;
    display:grid;place-items:center;
    border-radius:9px;
    color:#ffd45e;
    background:rgba(190,135,24,.10);
}
.gx-market-wallet small{
    display:block;
    color:#887b59;
    font-size:7px;
}
.gx-market-wallet strong{
    display:block;
    margin-top:1px;
    color:#f3e6b7;
    font-size:13px;
}
.gx-market-close{
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.055);
    background:rgba(255,255,255,.025);
    color:#748198;
    cursor:pointer;
}
.gx-market-close:hover{
    color:#e9eef7;
    background:rgba(255,255,255,.045);
}

.gx-market-security-bar{
    min-height:50px;
    padding:8px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid rgba(255,255,255,.045);
    background:linear-gradient(90deg,rgba(30,105,87,.07),rgba(43,58,113,.05));
}
.gx-market-security-bar>div{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    color:#77869c;
    font-size:8.5px;
}
.gx-market-security-bar>div>i{
    color:#59d6a6;
}
.gx-market-security-bar b{
    color:#a7e6ce;
}
.gx-market-security-bar>.fee{
    min-height:27px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
    border-radius:999px;
    color:#bda46b;
    background:rgba(171,123,23,.06);
    border:1px solid rgba(205,151,37,.08);
    font-size:8px;
}

.gx-market-tabs{
    padding:10px 20px;
    display:flex;
    align-items:center;
    gap:7px;
    border-bottom:1px solid rgba(255,255,255,.045);
}
.gx-market-tabs button{
    min-height:38px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.045);
    background:rgba(255,255,255,.018);
    color:#7d899d;
    cursor:pointer;
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:800;
}
.gx-market-tabs button b{
    min-width:20px;height:20px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    color:#77859d;
    background:rgba(255,255,255,.035);
    font-size:7px;
}
.gx-market-tabs button.active{
    color:#e5ecff;
    border-color:rgba(85,128,224,.17);
    background:linear-gradient(135deg,rgba(50,93,186,.12),rgba(97,61,174,.09));
}
.gx-market-tabs button.active b{
    color:#b8ceff;
    background:rgba(70,105,192,.15);
}

.gx-market-view{
    display:none;
    min-height:420px;
    max-height:calc(100dvh - 286px);
    overflow:auto;
    padding:14px 20px 20px;
    scrollbar-width:thin;
    scrollbar-color:#3e4f79 transparent;
}
.gx-market-view.active{display:block}

.gx-market-toolbar{
    display:grid;
    grid-template-columns:minmax(280px,1fr) 150px 150px auto;
    gap:8px;
}
.gx-market-search{
    height:40px;
    padding:0 8px 0 12px;
    display:grid;
    grid-template-columns:18px minmax(0,1fr) 28px;
    gap:5px;
    align-items:center;
    border-radius:11px;
    color:#5f708b;
    background:#080e19;
    border:1px solid rgba(94,118,163,.11);
}
.gx-market-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:#d7deeb;
    font-family:'Kanit',sans-serif;
    font-size:10px;
}
.gx-market-search button{
    width:28px;height:28px;
    display:grid;place-items:center;
    border:0;
    border-radius:8px;
    color:#52617a;
    background:transparent;
    cursor:pointer;
}
.gx-market-toolbar select,
.gx-market-toolbar>.refresh{
    height:40px;
    border-radius:11px;
    border:1px solid rgba(94,118,163,.11);
    background:#0a101c;
    color:#9ba8bc;
    font-family:'Kanit',sans-serif;
    font-size:9px;
    outline:none;
}
.gx-market-toolbar select{padding:0 10px}
.gx-market-toolbar>.refresh{
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
}
.gx-market-toolbar>.refresh.loading i{animation:spin 1s linear infinite}

.gx-market-price-note{
    margin-top:9px;
    min-height:38px;
    padding:7px 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-radius:11px;
    color:#718097;
    background:rgba(71,91,146,.045);
    border:1px solid rgba(86,112,176,.07);
    font-size:8px;
}
.gx-market-price-note b{color:#9fb6df}
.gx-market-price-note button{
    min-height:27px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
    border-radius:8px;
    color:#9bb8ee;
    background:rgba(51,91,169,.08);
    border:1px solid rgba(72,116,201,.10);
    font-family:'Kanit',sans-serif;
    font-size:7.5px;
    cursor:pointer;
}

.gx-market-listings{
    margin-top:11px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}
.gx-market-card{
    min-width:0;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:9px;
    position:relative;
    overflow:hidden;
    border-radius:14px;
    background:rgba(255,255,255,.018);
    border:1px solid rgba(255,255,255,.052);
}
.gx-market-card::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:2px;
    background:#527eda;
}
.gx-market-card.tone-purple::before{background:#9164da}
.gx-market-card.tone-green::before{background:#43ba8a}
.gx-market-card.tone-cyan::before{background:#40a7c7}
.gx-market-card.tone-pink::before{background:#d75593}
.gx-market-card.tone-red::before{background:#d95168}
.gx-market-card.status-sold{opacity:.82}
.gx-market-card.status-cancelled{opacity:.52}
.gx-market-card-main{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:9px;
    align-items:start;
}
.gx-market-item-icon{
    width:44px;height:44px;
    display:grid;place-items:center;
    border-radius:12px;
    color:#b1c5ff;
    background:rgba(67,95,166,.09);
    border:1px solid rgba(82,112,187,.09);
    font-size:16px;
}
.gx-market-item-copy{min-width:0}
.gx-market-item-copy small{
    display:block;
    color:#62718a;
    font-size:7px;
    letter-spacing:.06em;
}
.gx-market-item-copy strong{
    display:block;
    margin-top:2px;
    color:#e7ebf4;
    font-size:12px;
}
.gx-market-item-copy p{
    margin:4px 0 0;
    min-height:30px;
    color:#79869b;
    font-size:8px;
    line-height:1.4;
}
.gx-market-qty{
    min-width:39px;
    padding:4px 6px;
    text-align:center;
    border-radius:999px;
    color:#d8caff;
    background:rgba(111,67,178,.09);
    font-size:9px;
}
.gx-market-seller-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px 8px;
    color:#69778d;
    font-size:7.5px;
}
.gx-market-seller-row .status{
    margin-left:auto;
    padding:3px 6px;
    border-radius:999px;
    color:#8d9ab0;
    background:rgba(255,255,255,.025);
}
.gx-market-seller-row .status.active{color:#77d9ad;background:rgba(42,155,105,.08)}
.gx-market-seller-row .status.sold{color:#80aef0;background:rgba(48,93,167,.08)}
.gx-market-seller-row .status.reserved{color:#d2af6a;background:rgba(166,117,22,.07)}
.gx-market-price-row{
    min-height:55px;
    padding:8px 9px;
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:8px;
    align-items:center;
    border-radius:10px;
    background:#080e18;
    border:1px solid rgba(89,109,151,.07);
}
.gx-market-price-row small{
    display:block;
    color:#637188;
    font-size:7px;
}
.gx-market-price-row strong{
    display:block;
    margin-top:2px;
    color:#e3e8f1;
    font-size:10px;
}
.gx-market-price-row strong i{color:#e0b83e}
.gx-market-price-row>.discount{
    min-height:24px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    color:#61d8a7;
    background:rgba(42,164,108,.07);
    font-size:7px;
    font-weight:900;
}
.gx-market-payout-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    color:#6f7d94;
    font-size:7.5px;
}
.gx-market-payout-row b{color:#9acdb6}
.gx-market-card-action{margin-top:auto}
.gx-market-card-action button{
    width:100%;
    min-height:37px;
    border-radius:9px;
    border:1px solid transparent;
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:900;
    cursor:pointer;
}
.gx-market-card-action .buy{
    color:#fff;
    background:linear-gradient(135deg,#376ce5,#7447d5);
}
.gx-market-card-action .mine{
    color:#9db8e8;
    background:rgba(55,88,155,.08);
    border-color:rgba(77,111,184,.10);
}
.gx-market-card-action .cancel{
    color:#e3aa76;
    background:rgba(178,100,35,.06);
    border-color:rgba(195,115,42,.10);
}
.gx-market-card-action .claim{
    color:#10251b;
    background:linear-gradient(135deg,#5add9f,#8be7bd);
}
.gx-market-card-action .done,
.gx-market-card-action .reserved{
    color:#718097;
    background:rgba(255,255,255,.025);
    border-color:rgba(255,255,255,.04);
    cursor:default;
}
.gx-market-empty{
    grid-column:1/-1;
    min-height:280px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
    color:#697790;
}
.gx-market-empty.small{min-height:180px}
.gx-market-empty>i{
    margin-bottom:4px;
    color:#50658e;
    font-size:28px;
}
.gx-market-empty strong{
    color:#aeb9cb;
    font-size:13px;
}
.gx-market-empty span{font-size:9px}

/* MY LISTINGS */
.gx-market-my-summary{
    display:grid;
    grid-template-columns:190px 220px minmax(190px,auto);
    gap:8px;
    align-items:stretch;
}
.gx-market-my-summary article{
    min-height:62px;
    padding:9px 11px;
    display:grid;
    grid-template-columns:36px 1fr;
    gap:9px;
    align-items:center;
    border-radius:12px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.045);
}
.gx-market-my-summary .icon{
    width:36px;height:36px;
    display:grid;place-items:center;
    border-radius:10px;
    color:#b99aff;
    background:rgba(105,66,177,.09);
}
.gx-market-my-summary .icon.green{color:#6be1af;background:rgba(46,157,105,.08)}
.gx-market-my-summary small{display:block;color:#6a788f;font-size:7px}
.gx-market-my-summary strong{display:block;margin-top:2px;color:#e5eaf3;font-size:15px}
#gx-market-claim-all-btn{
    min-height:62px;
    padding:0 14px;
    border:0;
    border-radius:12px;
    color:#10251b;
    background:linear-gradient(135deg,#5ddda2,#92e7c0);
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:900;
    cursor:pointer;
}
#gx-market-claim-all-btn:disabled{
    color:#68758a;
    background:rgba(255,255,255,.025);
}
.gx-market-status-tabs{
    margin-top:10px;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}
.gx-market-status-tabs button{
    min-height:32px;
    padding:0 9px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.045);
    background:rgba(255,255,255,.018);
    color:#77859b;
    font-family:'Kanit',sans-serif;
    font-size:8px;
    cursor:pointer;
}
.gx-market-status-tabs button.active{
    color:#dfe7fb;
    background:rgba(62,92,169,.10);
    border-color:rgba(82,120,208,.13);
}

/* SELL */
.gx-market-eligibility{
    min-height:50px;
    padding:9px 11px;
    display:grid;
    grid-template-columns:34px 1fr;
    gap:9px;
    align-items:center;
    border-radius:11px;
    margin-bottom:10px;
}
.gx-market-eligibility>i{
    width:34px;height:34px;
    display:grid;place-items:center;
    border-radius:10px;
}
.gx-market-eligibility strong{display:block;font-size:10px}
.gx-market-eligibility span{display:block;margin-top:2px;font-size:8px}
.gx-market-eligibility.ok{
    color:#79c7a6;
    background:rgba(43,142,98,.06);
    border:1px solid rgba(51,163,112,.09);
}
.gx-market-eligibility.ok>i{background:rgba(44,164,111,.08);color:#61d6a3}
.gx-market-eligibility.blocked{
    color:#c0907a;
    background:rgba(151,70,47,.06);
    border:1px solid rgba(177,82,55,.09);
}
.gx-market-eligibility.blocked>i{background:rgba(167,70,48,.08);color:#e0876e}

.gx-market-sell-layout{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
    gap:12px;
}
.gx-market-sell-items,
.gx-market-sell-form{
    min-width:0;
    padding:12px;
    border-radius:14px;
    background:rgba(255,255,255,.016);
    border:1px solid rgba(255,255,255,.045);
}
.gx-market-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.gx-market-section-head small{
    display:block;
    color:#667794;
    font-size:7px;
    letter-spacing:.11em;
}
.gx-market-section-head strong{
    display:block;
    margin-top:2px;
    color:#dfe5ef;
    font-size:11px;
}
.gx-market-section-head>span{
    color:#697890;
    font-size:8px;
}
.gx-market-sell-game-tabs{
    margin-top:9px;
    display:flex;
    gap:5px;
}
.gx-market-sell-game-tabs button{
    min-height:30px;
    padding:0 8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.04);
    background:rgba(255,255,255,.015);
    color:#718096;
    font-family:'Kanit',sans-serif;
    font-size:7.5px;
    cursor:pointer;
}
.gx-market-sell-game-tabs button.active{
    color:#d9e4fb;
    background:rgba(58,91,168,.10);
    border-color:rgba(76,112,196,.12);
}
.gx-market-sell-item-grid{
    margin-top:8px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    max-height:430px;
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:#3d4d73 transparent;
}
.gx-market-sell-item{
    min-height:67px;
    padding:8px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
    text-align:left;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.045);
    background:rgba(255,255,255,.015);
    color:#7f8da2;
    cursor:pointer;
}
.gx-market-sell-item.active{
    background:linear-gradient(135deg,rgba(58,105,206,.10),rgba(113,70,188,.09));
    border-color:rgba(103,122,220,.20);
}
.gx-market-sell-item>.icon{
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:10px;
    color:#a9beff;
    background:rgba(61,88,159,.09);
}
.gx-market-sell-item .copy{min-width:0}
.gx-market-sell-item small{display:block;color:#5f6f88;font-size:6.5px}
.gx-market-sell-item strong{display:block;margin-top:1px;color:#dfe4ee;font-size:10px}
.gx-market-sell-item em{display:block;margin-top:2px;color:#75839a;font-size:7px;font-style:normal}
.gx-market-sell-item>.range{
    color:#9b8cc4;
    font-size:7px;
    white-space:nowrap;
}

.gx-market-selected-item{
    min-height:67px;
    margin-top:10px;
    padding:9px 10px;
    display:grid;
    grid-template-columns:40px 1fr;
    gap:9px;
    align-items:center;
    border-radius:11px;
    background:rgba(70,87,143,.05);
    border:1px solid rgba(83,106,167,.08);
}
.gx-market-selected-item.empty{
    display:flex;
    justify-content:center;
    color:#6d7a90;
}
.gx-market-selected-item>.icon{
    width:40px;height:40px;
    display:grid;place-items:center;
    border-radius:10px;
    color:#b59bff;
    background:rgba(103,67,177,.10);
}
.gx-market-selected-item small{display:block;color:#65748c;font-size:7px}
.gx-market-selected-item b{display:block;margin-top:1px;color:#e3e7ef;font-size:11px}
.gx-market-selected-item em{display:block;margin-top:2px;color:#7e8ca2;font-size:7.5px;font-style:normal}
.gx-market-form-row{
    margin-top:9px;
    display:grid;
    gap:8px;
}
.gx-market-form-row.two{grid-template-columns:1fr 1fr}
.gx-market-form-row label>span,
.gx-market-pin>span{
    display:block;
    margin-bottom:4px;
    color:#6e7d94;
    font-size:8px;
}
.gx-market-form-row input,
.gx-market-pin input{
    width:100%;
    height:40px;
    padding:0 10px;
    border-radius:10px;
    border:1px solid rgba(94,118,165,.11);
    outline:none;
    color:#dce3ee;
    background:#080e18;
    font-family:'Kanit',sans-serif;
    font-size:10px;
}
.gx-market-coin-input{
    position:relative;
}
.gx-market-coin-input>i{
    position:absolute;
    left:10px;top:50%;
    transform:translateY(-50%);
    color:#d6ad37;
    font-size:9px;
}
.gx-market-coin-input input{padding-left:27px}
.gx-market-price-policy{
    margin-top:7px;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:5px;
}
.gx-market-price-policy>span,
.gx-market-price-policy>button{
    min-height:34px;
    padding:0 7px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    border-radius:8px;
    color:#748299;
    background:rgba(255,255,255,.018);
    border:1px solid rgba(255,255,255,.04);
    font-family:'Kanit',sans-serif;
    font-size:7px;
}
.gx-market-price-policy>button{
    color:#a6baf0;
    cursor:pointer;
}
.gx-market-price-policy b{color:#d5ddec}
.gx-market-sell-summary{
    margin-top:9px;
    border-radius:11px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.045);
}
.gx-market-sell-summary>div{
    min-height:35px;
    padding:0 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    background:rgba(255,255,255,.014);
    border-bottom:1px solid rgba(255,255,255,.035);
}
.gx-market-sell-summary>div:last-child{border-bottom:0}
.gx-market-sell-summary span{color:#6c7b92;font-size:8px}
.gx-market-sell-summary strong{color:#cbd5e5;font-size:9px}
.gx-market-sell-summary .net{
    background:rgba(42,141,97,.04);
}
.gx-market-sell-summary .net strong{color:#72d6ac}
.gx-market-pin{
    display:block;
    margin-top:9px;
}
.gx-market-pin small{
    display:block;
    margin-top:4px;
    color:#5f6d83;
    font-size:7px;
}
.gx-market-primary-btn{
    width:100%;
    min-height:43px;
    margin-top:9px;
    border:0;
    border-radius:10px;
    color:#fff;
    background:linear-gradient(135deg,#3970e7,#7c48dc);
    font-family:'Kanit',sans-serif;
    font-size:9.5px;
    font-weight:900;
    cursor:pointer;
}
.gx-market-primary-btn:disabled{
    color:#66738a;
    background:#141b28;
    cursor:not-allowed;
}
.gx-market-policy-list{
    margin-top:9px;
    display:grid;
    gap:4px;
}
.gx-market-policy-list span{
    color:#65738a;
    font-size:7.5px;
}
.gx-market-policy-list i{
    width:17px;
    color:#7e8fb0;
}

.gx-market-foot{
    min-height:52px;
    padding:9px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-top:1px solid rgba(255,255,255,.045);
    color:#66758c;
    background:rgba(7,11,19,.82);
    font-size:8px;
}
.gx-market-foot span:last-child{color:#728fbf}

.gx-market-buy-confirm p{
    margin:0;
    color:#aeb8ca;
    font-size:14px;
}
.gx-market-buy-confirm p b{color:#f0c24b}
.gx-market-buy-confirm small{
    display:block;
    margin-top:5px;
    color:#7b879c;
    font-size:10px;
}
.gx-market-buy-confirm .swal2-input{
    height:44px!important;
    margin:12px 0 0!important;
    font-family:'Kanit',sans-serif!important;
}

/* Tablet */
@media(max-width:980px){
    .gx-market-listings{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .gx-market-toolbar{
        grid-template-columns:1fr 1fr 1fr;
    }
    .gx-market-search{
        grid-column:1/-1;
    }
    .gx-market-sell-layout{
        grid-template-columns:1fr;
    }
    .gx-market-my-summary{
        grid-template-columns:1fr 1fr;
    }
    #gx-market-claim-all-btn{
        grid-column:1/-1;
    }
}

/* Mobile */
@media(max-width:640px){
    .gx-market-overlay{padding:6px!important}
    .gx-market-modal{
        width:calc(100vw - 12px)!important;
        max-height:calc(100dvh - 12px)!important;
        border-radius:18px!important;
    }
    .gx-market-head{
        min-height:76px;
        padding:12px;
        grid-template-columns:minmax(0,1fr) 36px;
    }
    .gx-market-brand>.icon{
        width:42px;height:42px;flex-basis:42px;
        border-radius:12px;
        font-size:16px;
    }
    .gx-market-brand h3{font-size:17px}
    .gx-market-brand p{display:none}
    .gx-market-wallet{
        grid-column:1/-1;
        grid-row:2;
        min-width:0;
        height:42px;
    }
    .gx-market-close{
        grid-column:2;
        grid-row:1;
        width:36px;height:36px;
    }
    .gx-market-security-bar{
        padding:8px 12px;
        align-items:flex-start;
    }
    .gx-market-security-bar>div{
        font-size:7.5px;
        line-height:1.45;
    }
    .gx-market-security-bar>.fee{display:none}
    .gx-market-tabs{
        padding:8px 12px;
        overflow-x:auto;
        scrollbar-width:none;
    }
    .gx-market-tabs::-webkit-scrollbar{display:none}
    .gx-market-tabs button{
        flex:0 0 auto;
    }
    .gx-market-view{
        max-height:calc(100dvh - 300px);
        padding:10px 12px 16px;
    }
    .gx-market-toolbar{
        grid-template-columns:1fr 1fr;
    }
    .gx-market-search{grid-column:1/-1}
    .gx-market-toolbar>.refresh{
        grid-column:1/-1;
    }
    .gx-market-price-note{
        align-items:flex-start;
        font-size:7.5px;
    }
    .gx-market-listings{
        grid-template-columns:1fr;
    }
    .gx-market-my-summary{
        grid-template-columns:1fr 1fr;
    }
    .gx-market-sell-item-grid{
        grid-template-columns:1fr;
        max-height:290px;
    }
    .gx-market-form-row.two{
        grid-template-columns:1fr;
    }
    .gx-market-price-policy{
        grid-template-columns:1fr;
    }
    .gx-market-foot{
        padding:8px 12px;
        flex-direction:column;
        align-items:flex-start;
        font-size:7px;
    }
}

/* Small mobile */
@media(max-width:420px){
    .gx-market-my-summary{
        grid-template-columns:1fr;
    }
    #gx-market-claim-all-btn{grid-column:auto}
    .gx-market-price-row{
        grid-template-columns:1fr 1fr;
    }
    .gx-market-price-row>.discount{
        grid-column:1/-1;
        justify-self:start;
    }
}


/* =====================================================================
   GX V45 — RESPONSIVE / READABILITY SYSTEM
   Focus:
   - readable text at 1280 / 1366 / laptop displays
   - Marketplace scales without tiny 7–9px labels
   - desktop / laptop / tablet / mobile / portrait
   - no clipped modal controls
   - mobile controls use >=16px inputs to avoid iOS auto zoom
   ===================================================================== */

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}
.gx-responsive-v46{
    min-width:0;
    overflow-x:hidden;
}
.gx-responsive-v46 *,
.gx-responsive-v46 *::before,
.gx-responsive-v46 *::after{
    box-sizing:border-box;
}
.gx-responsive-v46 img,
.gx-responsive-v46 video,
.gx-responsive-v46 canvas,
.gx-responsive-v46 svg{
    max-width:100%;
}

/* ---------- Generic app/modal safety ---------- */
.gx-responsive-v46 .auth-screen,
.gx-responsive-v46 .modal-content,
.gx-responsive-v46 .gx-polished-shell,
.gx-responsive-v46 .gx-polished-screen{
    min-width:0;
}
.gx-responsive-v46 .modal-overlay{
    max-width:100vw;
    max-height:100dvh;
    overscroll-behavior:contain;
}
.gx-responsive-v46 input,
.gx-responsive-v46 select,
.gx-responsive-v46 textarea,
.gx-responsive-v46 button{
    max-width:100%;
}

/* =====================================================================
   MARKETPLACE — COMFORTABLE DESKTOP
   ===================================================================== */
.gx-responsive-v46 .gx-market-overlay{
    padding:clamp(8px,1.3vw,20px)!important;
}
.gx-responsive-v46 .gx-market-modal{
    width:min(1180px,calc(100vw - 24px))!important;
    max-width:1180px!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:20px!important;
}

/* Header */
.gx-responsive-v46 .gx-market-head{
    min-height:96px!important;
    padding:18px 22px!important;
    grid-template-columns:minmax(0,1fr) 175px 42px!important;
    gap:14px!important;
}
.gx-responsive-v46 .gx-market-brand>.icon{
    width:54px!important;
    height:54px!important;
    flex-basis:54px!important;
    font-size:20px!important;
}
.gx-responsive-v46 .gx-market-brand b{
    font-size:10px!important;
}
.gx-responsive-v46 .gx-market-brand h3{
    font-size:24px!important;
    line-height:1.18!important;
}
.gx-responsive-v46 .gx-market-brand p{
    font-size:11px!important;
    line-height:1.45!important;
}
.gx-responsive-v46 .gx-market-wallet{
    min-width:175px!important;
    height:54px!important;
}
.gx-responsive-v46 .gx-market-wallet small{
    font-size:9px!important;
}
.gx-responsive-v46 .gx-market-wallet strong{
    font-size:15px!important;
}
.gx-responsive-v46 .gx-market-close{
    width:42px!important;
    height:42px!important;
    font-size:15px!important;
}

/* Security info */
.gx-responsive-v46 .gx-market-security-bar{
    min-height:56px!important;
    padding:9px 22px!important;
}
.gx-responsive-v46 .gx-market-security-bar>div{
    font-size:10px!important;
    line-height:1.5!important;
}
.gx-responsive-v46 .gx-market-security-bar>.fee{
    min-height:31px!important;
    padding:0 10px!important;
    font-size:9px!important;
}

/* Tabs */
.gx-responsive-v46 .gx-market-tabs{
    padding:11px 22px!important;
    gap:8px!important;
}
.gx-responsive-v46 .gx-market-tabs button{
    min-height:43px!important;
    padding:0 15px!important;
    font-size:11px!important;
}
.gx-responsive-v46 .gx-market-tabs button b{
    min-width:22px!important;
    height:22px!important;
    font-size:8.5px!important;
}

/* Scrollable content */
.gx-responsive-v46 .gx-market-view{
    min-height:440px!important;
    max-height:calc(100dvh - 304px)!important;
    padding:16px 22px 22px!important;
}

/* Toolbar */
.gx-responsive-v46 .gx-market-toolbar{
    grid-template-columns:minmax(310px,1fr) 160px 160px 110px!important;
    gap:9px!important;
}
.gx-responsive-v46 .gx-market-search,
.gx-responsive-v46 .gx-market-toolbar select,
.gx-responsive-v46 .gx-market-toolbar>.refresh{
    min-height:44px!important;
    height:44px!important;
}
.gx-responsive-v46 .gx-market-search input{
    font-size:12px!important;
}
.gx-responsive-v46 .gx-market-toolbar select,
.gx-responsive-v46 .gx-market-toolbar>.refresh{
    font-size:10.5px!important;
}
.gx-responsive-v46 .gx-market-price-note{
    min-height:44px!important;
    padding:8px 12px!important;
    font-size:9.5px!important;
    line-height:1.45!important;
}
.gx-responsive-v46 .gx-market-price-note button{
    min-height:31px!important;
    font-size:9px!important;
}

/* Market cards: two columns on normal desktop for readability. */
.gx-responsive-v46 .gx-market-listings{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:11px!important;
}
.gx-responsive-v46 .gx-market-card{
    padding:14px!important;
    gap:11px!important;
    border-radius:15px!important;
}
.gx-responsive-v46 .gx-market-card-main{
    grid-template-columns:50px minmax(0,1fr) auto!important;
    gap:11px!important;
}
.gx-responsive-v46 .gx-market-item-icon{
    width:50px!important;
    height:50px!important;
    font-size:18px!important;
}
.gx-responsive-v46 .gx-market-item-copy small{
    font-size:8.5px!important;
}
.gx-responsive-v46 .gx-market-item-copy strong{
    font-size:14px!important;
}
.gx-responsive-v46 .gx-market-item-copy p{
    min-height:auto!important;
    font-size:10px!important;
    line-height:1.5!important;
}
.gx-responsive-v46 .gx-market-qty{
    min-width:44px!important;
    font-size:10.5px!important;
}
.gx-responsive-v46 .gx-market-seller-row{
    font-size:9px!important;
}
.gx-responsive-v46 .gx-market-price-row{
    min-height:62px!important;
    padding:9px 10px!important;
}
.gx-responsive-v46 .gx-market-price-row small{
    font-size:8.5px!important;
}
.gx-responsive-v46 .gx-market-price-row strong{
    font-size:12px!important;
}
.gx-responsive-v46 .gx-market-price-row>.discount{
    min-height:28px!important;
    font-size:8.5px!important;
}
.gx-responsive-v46 .gx-market-payout-row{
    font-size:9px!important;
}
.gx-responsive-v46 .gx-market-card-action button{
    min-height:42px!important;
    font-size:10.5px!important;
}
.gx-responsive-v46 .gx-market-empty strong{
    font-size:15px!important;
}
.gx-responsive-v46 .gx-market-empty span{
    font-size:10.5px!important;
}

/* My listings */
.gx-responsive-v46 .gx-market-my-summary{
    grid-template-columns:220px 250px minmax(220px,1fr)!important;
    gap:10px!important;
}
.gx-responsive-v46 .gx-market-my-summary article,
.gx-responsive-v46 #gx-market-claim-all-btn{
    min-height:70px!important;
}
.gx-responsive-v46 .gx-market-my-summary small{
    font-size:9px!important;
}
.gx-responsive-v46 .gx-market-my-summary strong{
    font-size:17px!important;
}
.gx-responsive-v46 #gx-market-claim-all-btn{
    font-size:11px!important;
}
.gx-responsive-v46 .gx-market-status-tabs button{
    min-height:36px!important;
    padding:0 11px!important;
    font-size:9.5px!important;
}

/* Sell area */
.gx-responsive-v46 .gx-market-eligibility{
    min-height:58px!important;
    padding:10px 12px!important;
}
.gx-responsive-v46 .gx-market-eligibility strong{
    font-size:12px!important;
}
.gx-responsive-v46 .gx-market-eligibility span{
    font-size:9.5px!important;
    line-height:1.4!important;
}
.gx-responsive-v46 .gx-market-sell-layout{
    grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr)!important;
    gap:14px!important;
}
.gx-responsive-v46 .gx-market-sell-items,
.gx-responsive-v46 .gx-market-sell-form{
    padding:15px!important;
}
.gx-responsive-v46 .gx-market-section-head small{
    font-size:8.5px!important;
}
.gx-responsive-v46 .gx-market-section-head strong{
    font-size:13px!important;
}
.gx-responsive-v46 .gx-market-section-head>span{
    font-size:9.5px!important;
}
.gx-responsive-v46 .gx-market-sell-game-tabs button{
    min-height:34px!important;
    padding:0 10px!important;
    font-size:9px!important;
}

/* Inventory cards in sell view */
.gx-responsive-v46 .gx-market-sell-item-grid{
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    max-height:480px!important;
}
.gx-responsive-v46 .gx-market-sell-item{
    min-height:82px!important;
    padding:10px!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    gap:10px!important;
}
.gx-responsive-v46 .gx-market-sell-item>.icon{
    width:44px!important;
    height:44px!important;
    font-size:15px!important;
}
.gx-responsive-v46 .gx-market-sell-item small{
    font-size:8px!important;
}
.gx-responsive-v46 .gx-market-sell-item strong{
    font-size:12px!important;
}
.gx-responsive-v46 .gx-market-sell-item em{
    font-size:9px!important;
}
.gx-responsive-v46 .gx-market-sell-item>.range{
    font-size:9px!important;
}

/* Listing form */
.gx-responsive-v46 .gx-market-selected-item{
    min-height:76px!important;
    padding:10px 12px!important;
}
.gx-responsive-v46 .gx-market-selected-item>.icon{
    width:44px!important;
    height:44px!important;
}
.gx-responsive-v46 .gx-market-selected-item small{
    font-size:8px!important;
}
.gx-responsive-v46 .gx-market-selected-item b{
    font-size:13px!important;
}
.gx-responsive-v46 .gx-market-selected-item em{
    font-size:9px!important;
}
.gx-responsive-v46 .gx-market-form-row label>span,
.gx-responsive-v46 .gx-market-pin>span{
    margin-bottom:5px!important;
    font-size:10px!important;
}
.gx-responsive-v46 .gx-market-form-row input,
.gx-responsive-v46 .gx-market-pin input{
    height:46px!important;
    padding:0 12px!important;
    font-size:13px!important;
}
.gx-responsive-v46 .gx-market-price-policy>span,
.gx-responsive-v46 .gx-market-price-policy>button{
    min-height:38px!important;
    font-size:8.5px!important;
}
.gx-responsive-v46 .gx-market-sell-summary>div{
    min-height:41px!important;
    padding:0 12px!important;
}
.gx-responsive-v46 .gx-market-sell-summary span{
    font-size:9.5px!important;
}
.gx-responsive-v46 .gx-market-sell-summary strong{
    font-size:11px!important;
}
.gx-responsive-v46 .gx-market-pin small{
    font-size:8.5px!important;
}
.gx-responsive-v46 .gx-market-primary-btn{
    min-height:48px!important;
    font-size:11px!important;
}
.gx-responsive-v46 .gx-market-policy-list{
    gap:6px!important;
}
.gx-responsive-v46 .gx-market-policy-list span{
    font-size:9px!important;
    line-height:1.4!important;
}
.gx-responsive-v46 .gx-market-foot{
    min-height:56px!important;
    padding:10px 22px!important;
    font-size:9px!important;
}

/* =====================================================================
   WIDE DESKTOP / 2K
   More content can fit, but never shrink text.
   ===================================================================== */
@media (min-width:1600px){
    .gx-responsive-v46 .gx-market-modal{
        width:min(1360px,calc(100vw - 48px))!important;
        max-width:1360px!important;
    }
    .gx-responsive-v46 .gx-market-listings{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
    .gx-responsive-v46 .gx-market-sell-layout{
        grid-template-columns:minmax(0,1.28fr) minmax(390px,.72fr)!important;
    }
}

/* =====================================================================
   1180–1399 laptops — screenshot-size target.
   Keep readable; reduce columns rather than shrinking typography.
   ===================================================================== */
@media (max-width:1399px){
    .gx-responsive-v46 .gx-market-modal{
        width:min(1100px,calc(100vw - 20px))!important;
    }
    .gx-responsive-v46 .gx-market-view{
        max-height:calc(100dvh - 296px)!important;
    }
    .gx-responsive-v46 .gx-market-sell-layout{
        grid-template-columns:minmax(0,1.05fr) minmax(350px,.95fr)!important;
        gap:10px!important;
    }
    .gx-responsive-v46 .gx-market-sell-item-grid{
        grid-template-columns:1fr!important;
    }
}

/* =====================================================================
   Tablet / compact laptop
   ===================================================================== */
@media (max-width:1024px){
    .gx-responsive-v46 .gx-market-overlay{
        padding:8px!important;
    }
    .gx-responsive-v46 .gx-market-modal{
        width:calc(100vw - 16px)!important;
        max-width:none!important;
        max-height:calc(100dvh - 16px)!important;
    }
    .gx-responsive-v46 .gx-market-head{
        grid-template-columns:minmax(0,1fr) 155px 40px!important;
        padding:15px!important;
    }
    .gx-responsive-v46 .gx-market-brand h3{
        font-size:21px!important;
    }
    .gx-responsive-v46 .gx-market-security-bar{
        padding:9px 15px!important;
    }
    .gx-responsive-v46 .gx-market-tabs{
        padding:10px 15px!important;
    }
    .gx-responsive-v46 .gx-market-view{
        padding:14px 15px 18px!important;
    }
    .gx-responsive-v46 .gx-market-toolbar{
        grid-template-columns:1fr 1fr!important;
    }
    .gx-responsive-v46 .gx-market-search{
        grid-column:1/-1!important;
    }
    .gx-responsive-v46 .gx-market-toolbar>.refresh{
        grid-column:1/-1!important;
    }
    .gx-responsive-v46 .gx-market-listings{
        grid-template-columns:1fr 1fr!important;
    }
    .gx-responsive-v46 .gx-market-my-summary{
        grid-template-columns:1fr 1fr!important;
    }
    .gx-responsive-v46 #gx-market-claim-all-btn{
        grid-column:1/-1!important;
    }
    .gx-responsive-v46 .gx-market-sell-layout{
        grid-template-columns:1fr!important;
    }
    .gx-responsive-v46 .gx-market-sell-item-grid{
        grid-template-columns:1fr 1fr!important;
        max-height:390px!important;
    }
}

/* =====================================================================
   Mobile / portrait tablet — use full-screen modal.
   ===================================================================== */
@media (max-width:720px){
    .gx-responsive-v46 .modal-overlay{
        padding:0!important;
        align-items:stretch!important;
    }
    .gx-responsive-v46 .modal-content{
        max-width:100vw!important;
    }

    .gx-responsive-v46 .gx-market-overlay{
        padding:0!important;
    }
    .gx-responsive-v46 .gx-market-modal{
        width:100vw!important;
        height:100dvh!important;
        max-width:100vw!important;
        max-height:100dvh!important;
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
        display:flex!important;
        flex-direction:column!important;
    }
    .gx-responsive-v46 .gx-market-head{
        flex:0 0 auto;
        min-height:auto!important;
        padding:
            calc(10px + env(safe-area-inset-top))
            12px
            10px!important;
        grid-template-columns:minmax(0,1fr) 40px!important;
        gap:8px!important;
    }
    .gx-responsive-v46 .gx-market-brand{
        gap:9px!important;
    }
    .gx-responsive-v46 .gx-market-brand>.icon{
        width:44px!important;
        height:44px!important;
        flex-basis:44px!important;
        font-size:17px!important;
    }
    .gx-responsive-v46 .gx-market-brand b{
        font-size:8.5px!important;
    }
    .gx-responsive-v46 .gx-market-brand h3{
        font-size:18px!important;
    }
    .gx-responsive-v46 .gx-market-brand p{
        display:none!important;
    }
    .gx-responsive-v46 .gx-market-wallet{
        grid-column:1/-1!important;
        grid-row:2!important;
        min-width:0!important;
        width:100%!important;
        height:44px!important;
    }
    .gx-responsive-v46 .gx-market-close{
        grid-column:2!important;
        grid-row:1!important;
        width:40px!important;
        height:40px!important;
    }
    .gx-responsive-v46 .gx-market-security-bar{
        flex:0 0 auto;
        min-height:auto!important;
        padding:8px 12px!important;
    }
    .gx-responsive-v46 .gx-market-security-bar>div{
        align-items:flex-start!important;
        font-size:9px!important;
    }
    .gx-responsive-v46 .gx-market-security-bar>.fee{
        display:none!important;
    }
    .gx-responsive-v46 .gx-market-tabs{
        flex:0 0 auto;
        padding:8px 10px!important;
        overflow-x:auto!important;
        overscroll-behavior-x:contain;
        scrollbar-width:none;
    }
    .gx-responsive-v46 .gx-market-tabs::-webkit-scrollbar{
        display:none;
    }
    .gx-responsive-v46 .gx-market-tabs button{
        flex:0 0 auto!important;
        min-height:42px!important;
        font-size:11px!important;
    }
    .gx-responsive-v46 .gx-market-view{
        flex:1 1 auto;
        min-height:0!important;
        max-height:none!important;
        padding:
            12px
            12px
            calc(18px + env(safe-area-inset-bottom))!important;
    }
    .gx-responsive-v46 .gx-market-toolbar{
        grid-template-columns:1fr!important;
        gap:8px!important;
    }
    .gx-responsive-v46 .gx-market-search,
    .gx-responsive-v46 .gx-market-toolbar select,
    .gx-responsive-v46 .gx-market-toolbar>.refresh{
        grid-column:auto!important;
        min-height:46px!important;
        height:46px!important;
    }
    .gx-responsive-v46 .gx-market-search input,
    .gx-responsive-v46 .gx-market-toolbar select{
        font-size:16px!important; /* prevent iOS zoom */
    }
    .gx-responsive-v46 .gx-market-toolbar>.refresh{
        font-size:12px!important;
    }
    .gx-responsive-v46 .gx-market-price-note{
        align-items:flex-start!important;
        font-size:10px!important;
    }
    .gx-responsive-v46 .gx-market-price-note button{
        display:none!important;
    }
    .gx-responsive-v46 .gx-market-listings{
        grid-template-columns:1fr!important;
        gap:10px!important;
    }
    .gx-responsive-v46 .gx-market-card{
        padding:13px!important;
    }
    .gx-responsive-v46 .gx-market-item-copy strong{
        font-size:15px!important;
    }
    .gx-responsive-v46 .gx-market-item-copy p{
        font-size:11px!important;
    }
    .gx-responsive-v46 .gx-market-price-row{
        grid-template-columns:1fr 1fr!important;
    }
    .gx-responsive-v46 .gx-market-price-row>.discount{
        grid-column:1/-1!important;
        justify-self:start!important;
    }
    .gx-responsive-v46 .gx-market-card-action button{
        min-height:46px!important;
        font-size:12px!important;
    }

    .gx-responsive-v46 .gx-market-my-summary{
        grid-template-columns:1fr 1fr!important;
    }
    .gx-responsive-v46 .gx-market-my-summary article,
    .gx-responsive-v46 #gx-market-claim-all-btn{
        min-height:64px!important;
    }

    .gx-responsive-v46 .gx-market-sell-layout{
        grid-template-columns:1fr!important;
        gap:10px!important;
    }
    .gx-responsive-v46 .gx-market-sell-items,
    .gx-responsive-v46 .gx-market-sell-form{
        padding:12px!important;
    }
    .gx-responsive-v46 .gx-market-sell-item-grid{
        grid-template-columns:1fr!important;
        max-height:none!important;
    }
    .gx-responsive-v46 .gx-market-sell-item{
        min-height:78px!important;
    }
    .gx-responsive-v46 .gx-market-form-row.two{
        grid-template-columns:1fr!important;
    }
    .gx-responsive-v46 .gx-market-form-row input,
    .gx-responsive-v46 .gx-market-pin input{
        min-height:48px!important;
        height:48px!important;
        font-size:16px!important; /* prevent iOS zoom */
    }
    .gx-responsive-v46 .gx-market-price-policy{
        grid-template-columns:1fr 1fr 1fr!important;
    }
    .gx-responsive-v46 .gx-market-price-policy>span,
    .gx-responsive-v46 .gx-market-price-policy>button{
        min-height:42px!important;
        font-size:9px!important;
    }
    .gx-responsive-v46 .gx-market-primary-btn{
        min-height:50px!important;
        font-size:13px!important;
    }
    .gx-responsive-v46 .gx-market-policy-list span{
        font-size:10px!important;
    }
    .gx-responsive-v46 .gx-market-foot{
        flex:0 0 auto;
        min-height:auto!important;
        padding:
            9px
            12px
            calc(9px + env(safe-area-inset-bottom))!important;
        font-size:8.5px!important;
    }
    .gx-responsive-v46 .gx-market-foot span:last-child{
        display:none!important;
    }

    /* Generic form readability on phone across the site. */
    .gx-responsive-v46 .modal-content input:not([type="checkbox"]):not([type="radio"]),
    .gx-responsive-v46 .modal-content select,
    .gx-responsive-v46 .modal-content textarea{
        font-size:max(16px,1em)!important;
    }
    .gx-responsive-v46 .modal-content textarea{
        line-height:1.5!important;
    }
}

/* Narrow phones */
@media (max-width:430px){
    .gx-responsive-v46 .gx-market-brand h3{
        font-size:16px!important;
    }
    .gx-responsive-v46 .gx-market-wallet{
        height:42px!important;
    }
    .gx-responsive-v46 .gx-market-tabs button{
        min-height:40px!important;
        padding:0 10px!important;
        font-size:10px!important;
    }
    .gx-responsive-v46 .gx-market-my-summary{
        grid-template-columns:1fr!important;
    }
    .gx-responsive-v46 #gx-market-claim-all-btn{
        grid-column:auto!important;
    }
    .gx-responsive-v46 .gx-market-price-policy{
        grid-template-columns:1fr!important;
    }
}

/* Very short screens: let content use more height and keep footer small. */
@media (max-height:720px) and (min-width:721px){
    .gx-responsive-v46 .gx-market-head{
        min-height:82px!important;
        padding-top:12px!important;
        padding-bottom:12px!important;
    }
    .gx-responsive-v46 .gx-market-security-bar{
        min-height:46px!important;
    }
    .gx-responsive-v46 .gx-market-tabs{
        padding-top:7px!important;
        padding-bottom:7px!important;
    }
    .gx-responsive-v46 .gx-market-view{
        max-height:calc(100dvh - 252px)!important;
    }
    .gx-responsive-v46 .gx-market-foot{
        min-height:44px!important;
    }
}

/* 200% browser zoom / very narrow desktop:
   stack instead of letting text shrink or clip. */
@media (max-width:860px) and (min-width:721px){
    .gx-responsive-v46 .gx-market-listings{
        grid-template-columns:1fr!important;
    }
    .gx-responsive-v46 .gx-market-my-summary{
        grid-template-columns:1fr 1fr!important;
    }
    .gx-responsive-v46 .gx-market-sell-item-grid{
        grid-template-columns:1fr!important;
    }
}


/* =====================================================================
   GX V46 — FINAL READABILITY GUARD
   Ensures the marketplace remains readable even if earlier legacy rules
   have higher specificity.
   ===================================================================== */

body.gx-responsive-v46 #gx-market-modal{
    font-size:14px!important;
}

/* Marketplace desktop readable floor */
body.gx-responsive-v46 #gx-market-modal .gx-market-brand h3{
    font-size:26px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-brand p,
body.gx-responsive-v46 #gx-market-modal .gx-market-security-bar>div{
    font-size:12px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-tabs button{
    font-size:13px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-section-head strong{
    font-size:16px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-section-head small,
body.gx-responsive-v46 #gx-market-modal .gx-market-section-head>span{
    font-size:11px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-sell-game-tabs button{
    font-size:11px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-sell-item small{
    font-size:10px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-sell-item strong{
    font-size:15px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-sell-item em,
body.gx-responsive-v46 #gx-market-modal .gx-market-sell-item>.range{
    font-size:11px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-form-row label>span,
body.gx-responsive-v46 #gx-market-modal .gx-market-pin>span{
    font-size:12px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-form-row input,
body.gx-responsive-v46 #gx-market-modal .gx-market-pin input{
    font-size:15px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-price-policy>span,
body.gx-responsive-v46 #gx-market-modal .gx-market-price-policy>button{
    font-size:11px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-sell-summary span{
    font-size:11px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-sell-summary strong{
    font-size:13px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-primary-btn{
    font-size:13px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-policy-list span{
    font-size:10.5px!important;
}
body.gx-responsive-v46 #gx-market-modal .gx-market-foot{
    font-size:10px!important;
}

/* Normal laptops: use one inventory column so item cards can be large. */
@media (max-width:1450px) and (min-width:901px){
    body.gx-responsive-v46 #gx-market-modal .gx-market-sell-layout{
        grid-template-columns:minmax(0,1fr) 390px!important;
    }

    body.gx-responsive-v46 #gx-market-modal .gx-market-sell-item-grid{
        grid-template-columns:1fr!important;
    }

    body.gx-responsive-v46 #gx-market-modal .gx-market-sell-item{
        min-height:92px!important;
        padding:12px!important;
        grid-template-columns:50px minmax(0,1fr) auto!important;
    }

    body.gx-responsive-v46 #gx-market-modal .gx-market-sell-item>.icon{
        width:50px!important;
        height:50px!important;
        font-size:18px!important;
    }
}

/* Tablet */
@media (max-width:900px){
    body.gx-responsive-v46 #gx-market-modal .gx-market-sell-layout{
        grid-template-columns:1fr!important;
    }

    body.gx-responsive-v46 #gx-market-modal .gx-market-sell-item-grid{
        grid-template-columns:1fr!important;
    }
}

/* Phones */
@media (max-width:720px){
    body.gx-responsive-v46 #gx-market-modal .gx-market-brand h3{
        font-size:20px!important;
    }

    body.gx-responsive-v46 #gx-market-modal .gx-market-tabs button{
        font-size:12px!important;
    }

    body.gx-responsive-v46 #gx-market-modal .gx-market-section-head strong{
        font-size:15px!important;
    }

    body.gx-responsive-v46 #gx-market-modal .gx-market-sell-item strong{
        font-size:14px!important;
    }

    body.gx-responsive-v46 #gx-market-modal .gx-market-form-row input,
    body.gx-responsive-v46 #gx-market-modal .gx-market-pin input,
    body.gx-responsive-v46 #gx-market-modal .gx-market-toolbar input,
    body.gx-responsive-v46 #gx-market-modal .gx-market-toolbar select{
        font-size:16px!important;
    }
}


/* =====================================================================
   GX V47 — COMPLETE UI OVERHAUL
   Unified premium GX shell + distinct identities per game.
   ===================================================================== */

body.gx-v47-ui{
    --gx-bg:#060a13;
    --gx-bg-2:#09111f;
    --gx-surface:#0d1626;
    --gx-surface-2:#101b2f;
    --gx-card:#101a2c;
    --gx-card-soft:#0c1423;
    --gx-border:rgba(111,144,207,.16);
    --gx-border-strong:rgba(123,155,224,.25);
    --gx-text:#f4f7ff;
    --gx-text-2:#c7d0e2;
    --gx-muted:#7b8aa6;
    --gx-blue:#5b8cff;
    --gx-cyan:#48d6ff;
    --gx-purple:#9664ff;
    --gx-green:#52e2ad;
    --gx-yellow:#ffc95c;
    --gx-red:#ff6c7f;
    --gx-radius:18px;
    --gx-shadow:0 22px 65px rgba(0,0,0,.34);
    color:var(--gx-text);
    background:
      radial-gradient(circle at 15% -10%,rgba(57,110,213,.10),transparent 32rem),
      radial-gradient(circle at 86% 6%,rgba(116,63,196,.10),transparent 28rem),
      linear-gradient(180deg,#050913,#07101d 48%,#050913);
}

/* Global background grain/grid */
body.gx-v47-ui::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
      linear-gradient(rgba(116,149,215,.018) 1px,transparent 1px),
      linear-gradient(90deg,rgba(116,149,215,.018) 1px,transparent 1px);
    background-size:44px 44px;
}
body.gx-v47-ui::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(circle at center,transparent 18%,rgba(1,4,10,.38) 100%);
}

/* =====================================================================
   GLOBAL HEADER / NEW GX BRAND
   ===================================================================== */
body.gx-v47-ui .game-header{
    height:64px!important;
    padding:0 clamp(12px,2vw,28px)!important;
    background:rgba(5,10,20,.86)!important;
    border-bottom:1px solid rgba(106,142,207,.11)!important;
    box-shadow:0 14px 35px rgba(0,0,0,.18)!important;
    backdrop-filter:blur(18px) saturate(140%)!important;
}
body.gx-v47-ui .gx-brand-home-btn{
    min-height:48px!important;
    padding:5px 10px 5px 6px!important;
    gap:9px!important;
    border-radius:13px!important;
    border:1px solid rgba(84,130,214,.13)!important;
    background:linear-gradient(135deg,rgba(27,48,86,.72),rgba(18,27,50,.55))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.gx-v47-ui .gx-brand-home-btn:hover{
    border-color:rgba(88,156,255,.28)!important;
    transform:translateY(-1px);
    box-shadow:0 10px 25px rgba(21,78,165,.15),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
body.gx-v47-ui .gx-brand-home-icon{
    width:38px!important;
    height:38px!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}
body.gx-v47-ui .gx-brand-home-icon img{
    width:38px;
    height:38px;
    display:block;
    filter:drop-shadow(0 0 12px rgba(83,132,255,.32));
}
body.gx-v47-ui .gx-brand-home-copy strong{
    color:#f1f6ff!important;
    font-size:13px!important;
    letter-spacing:.035em!important;
}
body.gx-v47-ui .gx-brand-home-copy small{
    color:#6384b5!important;
    font-size:6.5px!important;
    letter-spacing:.22em!important;
}
body.gx-v47-ui .gx-header-right{
    gap:8px!important;
}
body.gx-v47-ui .gx-language-toggle,
body.gx-v47-ui .gx-wallet-pill{
    min-height:38px!important;
    border-radius:11px!important;
    background:rgba(13,22,38,.82)!important;
    border:1px solid rgba(99,128,185,.12)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
body.gx-v47-ui #main-menu-button{
    width:40px!important;
    height:40px!important;
    border-radius:11px!important;
    background:rgba(13,22,38,.82)!important;
    border:1px solid rgba(99,128,185,.12)!important;
}

/* =====================================================================
   UNIFIED COMPONENT LANGUAGE
   ===================================================================== */
body.gx-v47-ui .glass-card,
body.gx-v47-ui .gx-polished-card,
body.gx-v47-ui .gx-system-card{
    border-radius:var(--gx-radius)!important;
    border:1px solid var(--gx-border)!important;
    background:
      linear-gradient(180deg,rgba(16,27,47,.94),rgba(10,17,31,.96))!important;
    box-shadow:var(--gx-shadow),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
body.gx-v47-ui .game-input,
body.gx-v47-ui input:not([type="checkbox"]):not([type="radio"]),
body.gx-v47-ui select,
body.gx-v47-ui textarea{
    border-radius:11px!important;
    border:1px solid rgba(99,132,196,.15)!important;
    background:#080f1d!important;
    color:#e8eef9!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.012)!important;
}
body.gx-v47-ui .game-input:focus,
body.gx-v47-ui input:not([type="checkbox"]):not([type="radio"]):focus,
body.gx-v47-ui select:focus,
body.gx-v47-ui textarea:focus{
    outline:none!important;
    border-color:rgba(86,147,255,.55)!important;
    box-shadow:0 0 0 3px rgba(69,126,235,.10),0 0 22px rgba(59,120,229,.08)!important;
}
body.gx-v47-ui .btn-primary,
body.gx-v47-ui .gx-auth-main-btn{
    border:0!important;
    border-radius:12px!important;
    background:linear-gradient(135deg,#4278f2 0%,#7357ef 58%,#934df0 100%)!important;
    box-shadow:0 14px 30px rgba(78,77,223,.20),inset 0 1px 0 rgba(255,255,255,.15)!important;
}
body.gx-v47-ui .btn-blue{
    border-radius:11px!important;
    background:linear-gradient(135deg,#2563d9,#447ef2)!important;
    box-shadow:0 10px 24px rgba(41,98,210,.16)!important;
}
body.gx-v47-ui .btn-danger{
    border-radius:11px!important;
    background:linear-gradient(135deg,rgba(181,48,72,.72),rgba(117,34,60,.78))!important;
    border:1px solid rgba(243,91,119,.18)!important;
}
body.gx-v47-ui .modal-content{
    border-radius:22px!important;
    border:1px solid rgba(112,145,207,.18)!important;
    background:
      radial-gradient(circle at 82% -10%,rgba(82,53,166,.10),transparent 35%),
      linear-gradient(180deg,#101929,#090f1c)!important;
    box-shadow:0 36px 110px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.03)!important;
}
body.gx-v47-ui .modal-overlay{
    background:rgba(2,5,12,.74)!important;
    backdrop-filter:blur(14px)!important;
}

/* =====================================================================
   LOGIN / REGISTER / RECOVERY
   ===================================================================== */
body.gx-v47-ui .gx-auth-page{
    background:
      radial-gradient(circle at 18% 45%,rgba(48,116,222,.13),transparent 30rem),
      radial-gradient(circle at 70% 25%,rgba(136,72,224,.10),transparent 28rem),
      linear-gradient(135deg,#050a14,#080f1d)!important;
}
body.gx-v47-ui .gx-auth-layout{
    width:min(1120px,calc(100vw - 32px))!important;
    min-height:610px!important;
    border-radius:28px!important;
    overflow:hidden!important;
    border:1px solid rgba(102,139,212,.17)!important;
    background:#09111f!important;
    box-shadow:0 40px 120px rgba(0,0,0,.48)!important;
}
body.gx-v47-ui .gx-auth-brand-panel{
    position:relative!important;
    background:
      radial-gradient(circle at 76% 22%,rgba(88,110,255,.24),transparent 32%),
      radial-gradient(circle at 32% 80%,rgba(70,207,236,.11),transparent 28%),
      linear-gradient(145deg,#10203d,#141939 55%,#14112e)!important;
}
body.gx-v47-ui .gx-auth-brand-panel::after{
    content:"GX";
    position:absolute;
    right:-30px;
    bottom:-60px;
    color:rgba(116,143,255,.045);
    font-size:260px;
    font-weight:1000;
    letter-spacing:-.12em;
    pointer-events:none;
}
body.gx-v47-ui .gx-v47-auth-brand-badge{
    min-height:42px!important;
    padding:5px 12px 5px 6px!important;
    gap:8px!important;
    border-radius:999px!important;
    color:#a9c9ff!important;
    background:rgba(20,39,78,.70)!important;
    border:1px solid rgba(87,143,238,.24)!important;
}
body.gx-v47-ui .gx-v47-auth-brand-badge img{
    width:30px;height:30px;
    filter:drop-shadow(0 0 10px rgba(81,146,255,.35));
}
body.gx-v47-ui .gx-auth-brand-content h1{
    margin-top:30px!important;
    font-size:clamp(44px,4.8vw,68px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
}
body.gx-v47-ui .gx-auth-brand-content h1 span{
    background:linear-gradient(90deg,#65a4ff,#8f72ff,#5de0ef)!important;
    -webkit-background-clip:text!important;
    color:transparent!important;
}
body.gx-v47-ui .gx-auth-brand-content>p{
    max-width:510px!important;
    font-size:14px!important;
    line-height:1.7!important;
    color:#9cabca!important;
}
body.gx-v47-ui .gx-auth-feature-grid>div{
    min-height:72px!important;
    border-radius:14px!important;
    background:rgba(7,13,25,.34)!important;
    border:1px solid rgba(121,154,217,.10)!important;
}
body.gx-v47-ui .gx-auth-card{
    background:
      radial-gradient(circle at 100% 0,rgba(67,106,210,.08),transparent 35%),
      #0b1323!important;
}
body.gx-v47-ui .gx-auth-card-head h2{
    font-size:28px!important;
}
body.gx-v47-ui .gx-auth-card-head p,
body.gx-v47-ui .gx-auth-field>span{
    color:#8190aa!important;
}
body.gx-v47-ui .gx-auth-card-icon{
    background:linear-gradient(145deg,#244a9a,#28265b)!important;
    border:1px solid rgba(83,133,235,.28)!important;
}

/* =====================================================================
   GAME HUB — looks like a launcher, not a generic dashboard
   ===================================================================== */
body.gx-v47-ui #game-select-screen{
    background:
      radial-gradient(circle at 15% 8%,rgba(56,113,232,.10),transparent 27rem),
      radial-gradient(circle at 78% 18%,rgba(130,70,222,.09),transparent 30rem),
      linear-gradient(180deg,#050a14,#07101d)!important;
}
body.gx-v47-ui #game-select-screen .gx-game-select-shell,
body.gx-v47-ui #game-select-screen .gx-hub-shell{
    max-width:1240px!important;
}
body.gx-v47-ui #game-select-screen .gx-game-card{
    border-radius:22px!important;
    overflow:hidden!important;
    border:1px solid rgba(111,143,205,.15)!important;
    box-shadow:0 24px 60px rgba(0,0,0,.28)!important;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
body.gx-v47-ui #game-select-screen .gx-game-card:hover{
    transform:translateY(-5px)!important;
    border-color:rgba(113,158,243,.32)!important;
    box-shadow:0 30px 75px rgba(0,0,0,.38),0 0 30px rgba(70,111,221,.10)!important;
}
body.gx-v47-ui #game-select-screen .gx-word-game-card{
    background:
      radial-gradient(circle at 70% 20%,rgba(52,208,225,.16),transparent 32%),
      linear-gradient(145deg,#102b55,#172261)!important;
}
body.gx-v47-ui #game-select-screen .gx-chaos-game-card{
    background:
      radial-gradient(circle at 72% 25%,rgba(182,63,231,.17),transparent 34%),
      linear-gradient(145deg,#28134d,#311742)!important;
}

/* =====================================================================
   SIDEBAR / MENU
   ===================================================================== */
body.gx-v47-ui #sidebar-menu{
    border-left:1px solid rgba(103,133,190,.12)!important;
    background:
      radial-gradient(circle at 30% 0,rgba(61,104,202,.09),transparent 28rem),
      linear-gradient(180deg,#09111f,#070c17)!important;
    box-shadow:-24px 0 70px rgba(0,0,0,.32)!important;
}
body.gx-v47-ui #sidebar-menu .menu-link-item{
    min-height:48px!important;
    margin-bottom:4px!important;
    border-radius:12px!important;
    color:#99a7bd!important;
    transition:background .15s ease,color .15s ease,transform .15s ease!important;
}
body.gx-v47-ui #sidebar-menu .menu-link-item:hover{
    color:#edf3ff!important;
    background:rgba(61,104,184,.09)!important;
    transform:translateX(2px);
}
body.gx-v47-ui #sidebar-menu .menu-link-item i{
    width:32px!important;
    height:32px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
    background:rgba(61,91,151,.07)!important;
}
body.gx-v47-ui #nav-marketplace i{
    color:#b89bff!important;
}
body.gx-v47-ui #nav-item-shop i{
    color:#67d4ff!important;
}

/* =====================================================================
   WORD GAME — DISTINCT "SMART ARCADE" THEME
   ===================================================================== */
body.gx-v47-ui .gx-game-theme-word{
    --word-blue:#4d88ff;
    --word-cyan:#3edcff;
    --word-teal:#46e4bb;
    --word-violet:#8b63ff;
    --word-yellow:#ffd35c;
    background:
      radial-gradient(circle at 12% 10%,rgba(43,128,221,.13),transparent 28rem),
      radial-gradient(circle at 82% 8%,rgba(83,203,223,.08),transparent 25rem),
      linear-gradient(180deg,#06101e,#071321 55%,#050b15)!important;
}

/* Word lobby */
body.gx-v47-ui .gx-word-lobby-shell{
    width:min(1220px,calc(100vw - 30px))!important;
    padding:22px 0 36px!important;
}
body.gx-v47-ui .gx-word-lobby-command{
    border-radius:26px!important;
    border:1px solid rgba(75,145,244,.20)!important;
    background:
      radial-gradient(circle at 75% 5%,rgba(57,218,243,.14),transparent 30%),
      radial-gradient(circle at 48% 110%,rgba(112,79,235,.14),transparent 35%),
      linear-gradient(135deg,rgba(17,38,73,.96),rgba(11,25,49,.96))!important;
    box-shadow:0 28px 80px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.gx-v47-ui .gx-word-lobby-command::after{
    content:"A  B  C";
    position:absolute;
    right:34px;
    bottom:-24px;
    color:rgba(81,139,241,.055);
    font-size:120px;
    font-weight:1000;
    letter-spacing:.08em;
    pointer-events:none;
}
body.gx-v47-ui .gx-word-lobby-command-main{
    position:relative;
    z-index:2;
}
body.gx-v47-ui .gx-word-lobby-kicker{
    border-color:rgba(73,151,252,.20)!important;
    background:rgba(50,102,189,.10)!important;
    color:#a7c9ff!important;
}
body.gx-v47-ui .gx-word-lobby-eyebrow{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    color:#63d7ff!important;
    font-size:10px!important;
}
body.gx-v47-ui .gx-word-lobby-title-row h1{
    margin-top:6px!important;
    font-size:clamp(42px,5.2vw,72px)!important;
    line-height:1!important;
    letter-spacing:-.045em!important;
}
body.gx-v47-ui .gx-word-lobby-title-row h1 strong{
    display:block;
    margin-top:4px;
    font-weight:1000;
    background:linear-gradient(90deg,#55c9ff,#64a7ff,#a47bff);
    -webkit-background-clip:text;
    color:transparent;
}
body.gx-v47-ui .gx-word-lobby-title-row p{
    max-width:720px!important;
    margin-top:14px!important;
    color:#93a7c3!important;
    font-size:13px!important;
    line-height:1.7!important;
}
body.gx-v47-ui .gx-v47-word-hero-pills{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}
body.gx-v47-ui .gx-v47-word-hero-pills span{
    min-height:30px;
    padding:0 10px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    color:#a9bce0;
    background:rgba(6,14,28,.43);
    border:1px solid rgba(94,139,209,.10);
    font-size:9px;
    font-weight:700;
}
body.gx-v47-ui .gx-v47-word-hero-pills i{
    color:#5fd4ff;
}
body.gx-v47-ui .gx-word-lobby-status{
    min-height:38px!important;
    border-radius:11px!important;
    background:rgba(6,14,27,.55)!important;
    border:1px solid rgba(93,130,194,.10)!important;
}
body.gx-v47-ui .gx-word-lobby-status.live{
    color:#63e2b2!important;
    border-color:rgba(66,195,142,.13)!important;
}

/* Word mode cards */
body.gx-v47-ui .gx-word-lobby-action-grid{
    position:relative;
    z-index:2;
    gap:12px!important;
}
body.gx-v47-ui .gx-lobby-action-card{
    min-height:108px!important;
    padding:16px!important;
    border-radius:17px!important;
    border:1px solid rgba(103,142,211,.13)!important;
    background:rgba(6,14,27,.48)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.022)!important;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
body.gx-v47-ui .gx-lobby-action-card:hover{
    transform:translateY(-4px)!important;
}
body.gx-v47-ui .gx-lobby-action-card.rank:hover{
    border-color:rgba(246,186,60,.30)!important;
    box-shadow:0 18px 35px rgba(187,116,22,.08)!important;
}
body.gx-v47-ui .gx-lobby-action-card.create:hover{
    border-color:rgba(79,142,255,.34)!important;
    box-shadow:0 18px 35px rgba(49,104,226,.10)!important;
}
body.gx-v47-ui .gx-lobby-action-card.friends:hover{
    border-color:rgba(58,214,166,.30)!important;
    box-shadow:0 18px 35px rgba(47,168,129,.08)!important;
}
body.gx-v47-ui .gx-lobby-action-icon{
    width:50px!important;
    height:50px!important;
    border-radius:14px!important;
}
body.gx-v47-ui .gx-lobby-action-copy small{
    font-size:8px!important;
    letter-spacing:.13em!important;
}
body.gx-v47-ui .gx-lobby-action-copy strong{
    margin-top:3px!important;
    font-size:16px!important;
}
body.gx-v47-ui .gx-lobby-action-copy em{
    margin-top:3px!important;
    color:#7688a5!important;
    font-size:9px!important;
}

body.gx-v47-ui .gx-v47-word-flow{
    position:relative;
    z-index:2;
    margin-top:14px;
    padding:9px 12px;
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:8px;
    align-items:center;
    border-radius:15px;
    background:rgba(4,11,22,.43);
    border:1px solid rgba(86,129,204,.09);
}
body.gx-v47-ui .gx-v47-word-flow>div{
    min-height:54px;
    display:grid;
    grid-template-columns:26px 28px 1fr;
    grid-template-rows:auto auto;
    gap:1px 7px;
    align-items:center;
}
body.gx-v47-ui .gx-v47-word-flow>div>span{
    grid-row:1/3;
    color:#486894;
    font:900 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
body.gx-v47-ui .gx-v47-word-flow>div>i{
    grid-row:1/3;
    width:28px;height:28px;
    display:grid;place-items:center;
    border-radius:8px;
    color:#63d6ff;
    background:rgba(59,123,211,.09);
}
body.gx-v47-ui .gx-v47-word-flow b{
    color:#dce8f9;
    font-size:9.5px;
}
body.gx-v47-ui .gx-v47-word-flow small{
    color:#6d7f9b;
    font-size:7.5px;
}
body.gx-v47-ui .gx-v47-word-flow>i{
    color:#354b70;
    font-size:9px;
}

/* Room browser */
body.gx-v47-ui .gx-lobby-browser-shell{
    margin-top:18px!important;
    padding:20px!important;
    border-radius:22px!important;
    background:linear-gradient(180deg,rgba(13,24,43,.90),rgba(8,15,28,.94))!important;
    border:1px solid rgba(102,139,204,.13)!important;
    box-shadow:0 22px 55px rgba(0,0,0,.24)!important;
}
body.gx-v47-ui .gx-lobby-browser-title h2{
    font-size:21px!important;
}
body.gx-v47-ui .gx-lobby-browser-title p{
    font-size:10px!important;
}
body.gx-v47-ui .gx-lobby-search-box{
    min-height:48px!important;
    border-radius:13px!important;
    background:#070f1d!important;
    border-color:rgba(94,132,203,.13)!important;
}
body.gx-v47-ui .gx-lobby-search-box input{
    font-size:12px!important;
}
body.gx-v47-ui .gx-lobby-refresh-btn{
    min-height:48px!important;
    border-radius:13px!important;
}
body.gx-v47-ui .gx-lobby-room-grid>div,
body.gx-v47-ui .gx-lobby-room-card{
    border-radius:16px!important;
    background:linear-gradient(180deg,rgba(15,28,50,.88),rgba(9,17,31,.92))!important;
    border:1px solid rgba(94,132,201,.10)!important;
}

/* =====================================================================
   WORD ROOM / ACTIVE MATCH
   ===================================================================== */
body.gx-v47-ui #game-room-screen{
    padding-top:76px!important;
}
body.gx-v47-ui #game-room-screen>.max-w-6xl{
    max-width:1240px!important;
}
body.gx-v47-ui .gx-room-topbar{
    min-height:82px!important;
    padding:14px 16px!important;
    border-radius:18px!important;
    background:
      linear-gradient(135deg,rgba(14,30,55,.92),rgba(10,18,34,.92))!important;
    border:1px solid rgba(86,132,211,.14)!important;
    box-shadow:0 18px 40px rgba(0,0,0,.22)!important;
}
body.gx-v47-ui .gx-room-topbar h2{
    font-size:25px!important;
}
body.gx-v47-ui .gx-host-quick-panel{
    gap:10px!important;
}
body.gx-v47-ui .gx-host-quick-action{
    min-height:74px!important;
    border-radius:15px!important;
    background:rgba(10,19,34,.84)!important;
    border:1px solid rgba(92,130,197,.10)!important;
}
body.gx-v47-ui .gx-room-waiting-card{
    border-radius:20px!important;
    background:linear-gradient(180deg,rgba(14,26,47,.94),rgba(8,16,29,.96))!important;
    border:1px solid rgba(91,130,199,.13)!important;
    box-shadow:0 20px 50px rgba(0,0,0,.23)!important;
}

/* Match stage */
body.gx-v47-ui .gx-word-match{
    gap:14px!important;
}
body.gx-v47-ui .gx-word-match-shell{
    border-radius:24px!important;
    overflow:hidden!important;
    border:1px solid rgba(75,148,245,.19)!important;
    background:
      radial-gradient(circle at 75% 0,rgba(65,213,232,.10),transparent 30%),
      radial-gradient(circle at 25% 105%,rgba(111,77,238,.11),transparent 35%),
      linear-gradient(180deg,#0d1b32,#081321)!important;
    box-shadow:0 30px 80px rgba(0,0,0,.32)!important;
}
body.gx-v47-ui .gx-word-match-topbar{
    min-height:94px!important;
    padding:16px 18px!important;
    background:rgba(8,17,31,.58)!important;
    border-bottom:1px solid rgba(85,131,207,.10)!important;
}
body.gx-v47-ui .gx-word-match-brand-icon{
    width:48px!important;
    height:48px!important;
    border-radius:14px!important;
    color:#69d8ff!important;
    background:linear-gradient(145deg,rgba(44,116,211,.16),rgba(75,73,196,.11))!important;
    border:1px solid rgba(72,147,238,.18)!important;
}
body.gx-v47-ui .gx-word-match-kicker{
    color:#64cfff!important;
    font-size:8px!important;
    letter-spacing:.14em!important;
}
body.gx-v47-ui .gx-word-match-brand h2{
    font-size:22px!important;
}
body.gx-v47-ui .gx-word-match-brand p{
    color:#7e90ad!important;
    font-size:10px!important;
}
body.gx-v47-ui .gx-v47-word-live-tags{
    margin-left:auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
}
body.gx-v47-ui .gx-v47-word-live-tags span{
    min-height:22px;
    padding:0 7px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:999px;
    color:#6fdcb5;
    background:rgba(43,153,108,.07);
    border:1px solid rgba(56,184,130,.09);
    font-size:6.8px;
    font-weight:900;
    letter-spacing:.06em;
}
body.gx-v47-ui .gx-v47-word-live-tags span:nth-child(2){
    color:#91b9ff;
    background:rgba(53,93,175,.08);
    border-color:rgba(76,117,201,.10);
}
body.gx-v47-ui .gx-v47-word-live-tags .fa-circle{
    font-size:5px;
    color:#47d99c;
}
body.gx-v47-ui .gx-word-match-timer{
    min-width:126px!important;
    min-height:64px!important;
    margin-left:10px!important;
    border-radius:15px!important;
    background:
      radial-gradient(circle at 50% 120%,rgba(255,199,65,.11),transparent 50%),
      rgba(10,16,29,.76)!important;
    border:1px solid rgba(232,178,54,.15)!important;
}
body.gx-v47-ui .gx-word-match-timer span{
    font-size:8px!important;
}
body.gx-v47-ui .gx-word-match-timer strong{
    color:#ffd052!important;
    font-size:25px!important;
}

/* Progress + meta */
body.gx-v47-ui .gx-word-progress-wrap{
    padding:14px 18px 10px!important;
}
body.gx-v47-ui .gx-word-progress-copy{
    font-size:9px!important;
}
body.gx-v47-ui .gx-word-progress-track{
    height:8px!important;
    border-radius:999px!important;
}
body.gx-v47-ui .gx-word-progress-fill{
    background:linear-gradient(90deg,#43c6ff,#4e88ff,#8f61ff)!important;
    box-shadow:0 0 14px rgba(75,139,255,.30)!important;
}
body.gx-v47-ui .gx-word-match-meta{
    gap:8px!important;
    padding:0 18px 14px!important;
}
body.gx-v47-ui .gx-word-meta-pill{
    min-height:58px!important;
    border-radius:13px!important;
    background:rgba(6,13,25,.46)!important;
    border:1px solid rgba(90,127,192,.09)!important;
}
body.gx-v47-ui .gx-word-meta-pill span{
    font-size:8px!important;
}
body.gx-v47-ui .gx-word-meta-pill strong{
    font-size:11px!important;
}

/* Main question */
body.gx-v47-ui .gx-word-question-card{
    position:relative!important;
    min-height:360px!important;
    margin:0 18px!important;
    padding:42px 28px 28px!important;
    border-radius:22px!important;
    background:
      radial-gradient(circle at 50% 8%,rgba(72,166,255,.10),transparent 37%),
      linear-gradient(180deg,rgba(7,15,29,.86),rgba(5,11,21,.92))!important;
    border:1px solid rgba(77,131,217,.13)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
body.gx-v47-ui .gx-word-question-card::before{
    content:"A → Z";
    position:absolute;
    right:25px;
    bottom:5px;
    color:rgba(70,128,214,.04);
    font-size:82px;
    font-weight:1000;
    pointer-events:none;
}
body.gx-v47-ui .gx-word-question-badge{
    min-height:29px!important;
    padding:0 10px!important;
    border-radius:999px!important;
    color:#9ed8ff!important;
    background:rgba(57,121,206,.09)!important;
    border:1px solid rgba(77,144,231,.11)!important;
    font-size:7.5px!important;
    letter-spacing:.08em!important;
}
body.gx-v47-ui .gx-word-question-label{
    margin-top:18px!important;
    color:#647896!important;
    font-size:9px!important;
    letter-spacing:.16em!important;
}
body.gx-v47-ui .gx-word-question-card h3{
    margin-top:8px!important;
    font-size:clamp(44px,5.8vw,76px)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
    color:#f7fbff!important;
    text-shadow:0 8px 30px rgba(64,129,221,.13)!important;
}
body.gx-v47-ui .gx-word-question-hint{
    max-width:690px!important;
    margin:14px auto 0!important;
    color:#8ca0bc!important;
    font-size:11px!important;
}
body.gx-v47-ui .gx-word-answer-row{
    max-width:820px!important;
    margin:24px auto 0!important;
    gap:9px!important;
}
body.gx-v47-ui .gx-word-answer-input-wrap{
    min-height:58px!important;
    border-radius:15px!important;
    border:1px solid rgba(76,139,230,.22)!important;
    background:#061020!important;
    box-shadow:0 0 0 4px rgba(50,108,203,.035)!important;
}
body.gx-v47-ui .gx-word-answer-input-wrap input{
    min-height:56px!important;
    font-size:16px!important;
}
body.gx-v47-ui .gx-word-submit-btn{
    min-width:164px!important;
    min-height:58px!important;
    border-radius:15px!important;
    font-size:13px!important;
    background:linear-gradient(135deg,#3d7df2,#7956ef)!important;
    box-shadow:0 14px 30px rgba(67,82,220,.21)!important;
}
body.gx-v47-ui .gx-word-feedback{
    margin-top:12px!important;
    min-height:36px!important;
    font-size:12px!important;
}
body.gx-v47-ui .gx-word-next-btn{
    min-height:44px!important;
    border-radius:11px!important;
}

/* Bottom stats / scores */
body.gx-v47-ui .gx-word-match-bottom{
    padding:14px 18px 18px!important;
    gap:12px!important;
}
body.gx-v47-ui .gx-word-self-stats{
    gap:8px!important;
}
body.gx-v47-ui .gx-word-self-stat{
    min-height:72px!important;
    border-radius:14px!important;
    background:rgba(6,14,27,.46)!important;
    border:1px solid rgba(86,124,190,.08)!important;
}
body.gx-v47-ui .gx-word-self-stat span{
    font-size:8px!important;
}
body.gx-v47-ui .gx-word-self-stat strong{
    margin-top:3px!important;
    font-size:21px!important;
}
body.gx-v47-ui .gx-word-scoreboard{
    border-radius:16px!important;
    background:rgba(6,13,25,.48)!important;
    border:1px solid rgba(90,127,192,.09)!important;
}
body.gx-v47-ui .gx-word-scoreboard-head h4{
    font-size:15px!important;
}

/* Word helper inventory */
body.gx-v47-ui .gx-word-helper-shop{
    width:310px!important;
    border-radius:20px!important;
    background:
      radial-gradient(circle at 50% 0,rgba(79,121,234,.08),transparent 30%),
      linear-gradient(180deg,#0d1729,#09101d)!important;
    border:1px solid rgba(89,128,201,.13)!important;
    box-shadow:0 20px 55px rgba(0,0,0,.24)!important;
}
body.gx-v47-ui .gx-word-helper-shop-head{
    min-height:68px!important;
    padding:12px!important;
    border-bottom:1px solid rgba(91,125,188,.09)!important;
}
body.gx-v47-ui .gx-word-helper-shop-head strong{
    font-size:14px!important;
}
body.gx-v47-ui .gx-word-helper-category{
    padding:12px!important;
}
body.gx-v47-ui .gx-word-helper-category-title{
    font-size:9px!important;
}
body.gx-v47-ui .gx-word-helper-category button{
    min-height:68px!important;
    padding:9px!important;
    border-radius:13px!important;
    background:rgba(6,13,25,.48)!important;
    border:1px solid rgba(88,124,190,.08)!important;
}
body.gx-v47-ui .gx-word-helper-category button:hover{
    border-color:rgba(80,143,238,.25)!important;
    background:rgba(30,63,117,.13)!important;
}
body.gx-v47-ui .gx-word-helper-category button b{
    font-size:10px!important;
}
body.gx-v47-ui .gx-word-helper-category button small{
    font-size:8px!important;
}

/* Chat */
body.gx-v47-ui .gx-room-chat-panel{
    border-radius:20px!important;
    background:linear-gradient(180deg,rgba(13,24,43,.94),rgba(8,15,28,.96))!important;
    border:1px solid rgba(91,129,198,.12)!important;
    box-shadow:0 20px 45px rgba(0,0,0,.20)!important;
}
body.gx-v47-ui .gx-room-chat-title{
    font-size:13px!important;
}

/* =====================================================================
   CHAOS BOARD retains its own aggressive identity
   ===================================================================== */
body.gx-v47-ui .gx-game-theme-chaos:not(.gx-chaos-pro-ui){
    background:
      radial-gradient(circle at 78% 0,rgba(163,55,224,.12),transparent 30rem),
      radial-gradient(circle at 12% 15%,rgba(83,64,184,.11),transparent 24rem),
      linear-gradient(180deg,#090716,#070b14)!important;
}

/* =====================================================================
   SYSTEM PAGES — profile, mail, shop, marketplace, tickets, admin
   ===================================================================== */
body.gx-v47-ui .gx-system-page{
    background:
      radial-gradient(circle at 18% 0,rgba(55,107,207,.08),transparent 28rem),
      linear-gradient(180deg,#060b14,#07101c)!important;
}
body.gx-v47-ui #profile-edit-screen .glass-card,
body.gx-v47-ui #admin-screen .glass-card{
    border-radius:18px!important;
}
body.gx-v47-ui .gx-mail-modal,
body.gx-v47-ui .gx-shop-modal,
body.gx-v47-ui .gx-market-modal,
body.gx-v47-ui .gx-ticket-modal,
body.gx-v47-ui .gx-admin-inventory-modal{
    border-color:rgba(104,139,205,.16)!important;
}

/* Mail */
body.gx-v47-ui .gx-mail-list-item{
    border-radius:13px!important;
    background:rgba(10,18,32,.72)!important;
    border:1px solid rgba(92,125,186,.09)!important;
}
body.gx-v47-ui .gx-mail-list-item.active{
    border-color:rgba(73,135,231,.24)!important;
    background:linear-gradient(135deg,rgba(40,76,142,.12),rgba(71,50,127,.07))!important;
}

/* Marketplace: keep V46 responsive structure, enhance polish */
body.gx-v47-ui .gx-market-modal{
    background:
      radial-gradient(circle at 85% -10%,rgba(83,59,171,.12),transparent 38%),
      radial-gradient(circle at 5% 20%,rgba(44,115,184,.07),transparent 30%),
      linear-gradient(180deg,#0f1828,#080e19)!important;
}
body.gx-v47-ui .gx-market-card{
    transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
body.gx-v47-ui .gx-market-card:hover{
    transform:translateY(-3px);
    border-color:rgba(99,141,221,.17)!important;
    background:rgba(20,31,52,.66)!important;
}

/* Admin */
body.gx-v47-ui #admin-screen{
    background:
      radial-gradient(circle at 78% 0,rgba(108,66,196,.09),transparent 28rem),
      linear-gradient(180deg,#070c16,#09101d)!important;
}
body.gx-v47-ui .gx-admin-player-card{
    border-radius:16px!important;
    background:linear-gradient(180deg,rgba(13,23,41,.92),rgba(8,15,27,.95))!important;
    border:1px solid rgba(95,127,187,.10)!important;
    box-shadow:0 16px 35px rgba(0,0,0,.16)!important;
}

/* Report float: GX theme, not magenta */
body.gx-v47-ui .gx-report-float-btn{
    border-radius:999px!important;
    background:linear-gradient(135deg,#345fc7,#6650cf)!important;
    border:1px solid rgba(110,140,226,.19)!important;
    box-shadow:0 14px 30px rgba(52,69,171,.24)!important;
}
body.gx-v47-ui .gx-report-float-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 38px rgba(52,69,171,.31)!important;
}

/* =====================================================================
   RESPONSIVE WHOLE-SITE PASS
   ===================================================================== */
@media(max-width:1100px){
    body.gx-v47-ui .gx-auth-layout{
        grid-template-columns:1fr!important;
        width:min(720px,calc(100vw - 24px))!important;
        min-height:0!important;
    }
    body.gx-v47-ui .gx-auth-brand-panel{
        min-height:340px!important;
    }
    body.gx-v47-ui .gx-auth-brand-content h1{
        font-size:46px!important;
    }
    body.gx-v47-ui .gx-word-lobby-title-row{
        grid-template-columns:1fr!important;
    }
    body.gx-v47-ui .gx-word-lobby-status-stack{
        flex-direction:row!important;
        flex-wrap:wrap!important;
        margin-top:14px!important;
    }
    body.gx-v47-ui .gx-v47-word-flow{
        grid-template-columns:1fr!important;
    }
    body.gx-v47-ui .gx-v47-word-flow>i{
        display:none!important;
    }
    body.gx-v47-ui .gx-word-match{
        grid-template-columns:1fr!important;
    }
    body.gx-v47-ui .gx-word-helper-shop{
        width:100%!important;
    }
    body.gx-v47-ui .gx-word-helper-category{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:8px!important;
    }
    body.gx-v47-ui .gx-word-helper-category-title{
        grid-column:1/-1;
    }
}
@media(max-width:760px){
    body.gx-v47-ui .game-header{
        height:58px!important;
        padding:0 8px!important;
    }
    body.gx-v47-ui .gx-brand-home-btn{
        padding-right:7px!important;
    }
    body.gx-v47-ui .gx-brand-home-icon,
    body.gx-v47-ui .gx-brand-home-icon img{
        width:34px!important;
        height:34px!important;
    }
    body.gx-v47-ui .gx-brand-home-copy strong{
        font-size:11px!important;
    }
    body.gx-v47-ui .gx-brand-home-copy small{
        font-size:5.5px!important;
    }
    body.gx-v47-ui .gx-wallet-label{
        display:none!important;
    }
    body.gx-v47-ui .gx-wallet-pill{
        padding:0 8px!important;
    }

    body.gx-v47-ui .gx-auth-page{
        padding:72px 10px 20px!important;
    }
    body.gx-v47-ui .gx-auth-layout{
        width:100%!important;
        border-radius:20px!important;
    }
    body.gx-v47-ui .gx-auth-brand-panel{
        min-height:300px!important;
        padding:28px 22px!important;
    }
    body.gx-v47-ui .gx-auth-brand-content h1{
        font-size:40px!important;
    }
    body.gx-v47-ui .gx-auth-brand-content>p{
        font-size:12px!important;
    }
    body.gx-v47-ui .gx-auth-feature-grid{
        grid-template-columns:1fr!important;
    }

    body.gx-v47-ui .gx-word-lobby-shell{
        width:calc(100vw - 12px)!important;
        padding-top:12px!important;
    }
    body.gx-v47-ui .gx-word-lobby-command{
        border-radius:20px!important;
    }
    body.gx-v47-ui .gx-word-lobby-title-row h1{
        font-size:40px!important;
    }
    body.gx-v47-ui .gx-word-lobby-title-row p{
        font-size:11px!important;
    }
    body.gx-v47-ui .gx-word-lobby-action-grid{
        grid-template-columns:1fr!important;
    }
    body.gx-v47-ui .gx-lobby-action-card{
        min-height:90px!important;
    }
    body.gx-v47-ui .gx-lobby-browser-shell{
        padding:13px!important;
        border-radius:18px!important;
    }
    body.gx-v47-ui .gx-lobby-search-controls{
        grid-template-columns:1fr!important;
    }
    body.gx-v47-ui .gx-lobby-refresh-btn{
        width:100%!important;
    }

    body.gx-v47-ui #game-room-screen{
        padding-top:66px!important;
    }
    body.gx-v47-ui #game-room-screen>.max-w-6xl{
        padding:10px!important;
    }
    body.gx-v47-ui .gx-room-topbar{
        flex-direction:column!important;
        align-items:flex-start!important;
        gap:10px!important;
    }
    body.gx-v47-ui .gx-room-topbar>div:last-child{
        width:100%!important;
    }
    body.gx-v47-ui .gx-room-topbar .btn-danger{
        flex:1!important;
    }
    body.gx-v47-ui .gx-host-quick-panel{
        grid-template-columns:1fr!important;
    }
    body.gx-v47-ui .gx-word-match-topbar{
        display:grid!important;
        grid-template-columns:1fr auto!important;
        gap:8px!important;
    }
    body.gx-v47-ui .gx-v47-word-live-tags{
        display:none!important;
    }
    body.gx-v47-ui .gx-word-match-brand h2{
        font-size:17px!important;
    }
    body.gx-v47-ui .gx-word-match-timer{
        min-width:96px!important;
        min-height:58px!important;
    }
    body.gx-v47-ui .gx-word-match-timer strong{
        font-size:20px!important;
    }
    body.gx-v47-ui .gx-word-match-meta{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
    }
    body.gx-v47-ui .gx-word-question-card{
        min-height:330px!important;
        margin:0 10px!important;
        padding:30px 14px 20px!important;
        border-radius:17px!important;
    }
    body.gx-v47-ui .gx-word-question-card h3{
        font-size:42px!important;
        overflow-wrap:anywhere;
    }
    body.gx-v47-ui .gx-word-answer-row{
        flex-direction:column!important;
    }
    body.gx-v47-ui .gx-word-submit-btn{
        width:100%!important;
        min-width:0!important;
    }
    body.gx-v47-ui .gx-word-match-bottom{
        grid-template-columns:1fr!important;
        padding:10px!important;
    }
    body.gx-v47-ui .gx-word-self-stats{
        grid-template-columns:1fr 1fr!important;
    }
    body.gx-v47-ui .gx-word-helper-category{
        grid-template-columns:1fr!important;
    }
}

/* Short laptop displays */
@media(max-height:760px) and (min-width:761px){
    body.gx-v47-ui .gx-word-lobby-shell{
        padding-top:10px!important;
    }
    body.gx-v47-ui .gx-word-lobby-command{
        padding-top:18px!important;
        padding-bottom:16px!important;
    }
    body.gx-v47-ui .gx-word-lobby-title-row h1{
        font-size:48px!important;
    }
    body.gx-v47-ui .gx-v47-word-flow{
        display:none!important;
    }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
    body.gx-v47-ui *,
    body.gx-v47-ui *::before,
    body.gx-v47-ui *::after{
        scroll-behavior:auto!important;
        transition-duration:.01ms!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
    }
}


/* =====================================================================
   GX V48 — WORD LOBBY HERO SIZE FIX
   ===================================================================== */

body.gx-v47-ui .gx-word-lobby-title-row h1{
    margin-top:8px!important;
    max-width:760px!important;
    font-size:clamp(30px,3.25vw,48px)!important;
    line-height:1.06!important;
    letter-spacing:-.035em!important;
    text-wrap:balance;
}

body.gx-v47-ui .gx-word-lobby-title-row h1 strong{
    display:inline!important;
    margin-top:0!important;
    margin-left:.22em!important;
    font-size:1em!important;
    line-height:inherit!important;
}

body.gx-v47-ui .gx-word-lobby-title-row p{
    max-width:680px!important;
    margin-top:10px!important;
    font-size:12px!important;
    line-height:1.65!important;
}

body.gx-v47-ui .gx-v47-word-hero-pills{
    margin-top:12px!important;
}

@media(max-width:900px){
    body.gx-v47-ui .gx-word-lobby-title-row h1{
        font-size:clamp(30px,5vw,42px)!important;
        max-width:620px!important;
    }
}

@media(max-width:760px){
    body.gx-v47-ui .gx-word-lobby-title-row h1{
        font-size:32px!important;
        line-height:1.08!important;
    }

    body.gx-v47-ui .gx-word-lobby-title-row h1 strong{
        margin-left:.16em!important;
    }
}

@media(max-width:430px){
    body.gx-v47-ui .gx-word-lobby-title-row h1{
        font-size:28px!important;
    }

    body.gx-v47-ui .gx-word-lobby-title-row p{
        font-size:11px!important;
    }
}

/* short laptop screens should remain compact */
@media(max-height:760px) and (min-width:761px){
    body.gx-v47-ui .gx-word-lobby-title-row h1{
        font-size:40px!important;
    }
}


/* =====================================================================
   GX V49 — WORD BATTLE DESKTOP LAYOUT
   User layout:
   LEFT  = Scoreboard
   CENTER = Game
   RIGHT-TOP = Room chat
   RIGHT-BOTTOM = Word helpers
   ===================================================================== */

/* Use the screen width. The previous 1240px cap caused huge empty sides. */
body.gx-v47-ui #game-room-screen>.max-w-6xl{
    width:min(1540px,calc(100vw - 32px))!important;
    max-width:1540px!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

/* The legacy lg:grid-cols-3 wrapper is no longer useful. */
body.gx-v47-ui .gx-room-content-grid{
    display:block!important;
    width:100%!important;
}

/* WAITING:
   room member panel on left + chat on right.
   PLAYING:
   battle area on left + chat/helpers right.
*/
body.gx-v47-ui .gx-room-main-column{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 340px!important;
    grid-auto-rows:auto!important;
    gap:14px!important;
    align-items:start!important;
}

/* Waiting room */
body.gx-v47-ui .gx-room-main-column:not(.gx-word-is-playing) #waiting-zone{
    grid-column:1!important;
    grid-row:1!important;
}
body.gx-v47-ui .gx-room-main-column:not(.gx-word-is-playing) .gx-word-right-chat-panel{
    grid-column:2!important;
    grid-row:1!important;
    height:500px!important;
}
body.gx-v47-ui .gx-room-main-column:not(.gx-word-is-playing) .gx-word-right-helper-panel{
    display:none!important;
}

/* Active battle: battle takes full left height. */
body.gx-v47-ui .gx-room-main-column.gx-word-is-playing #active-game-zone{
    grid-column:1!important;
    grid-row:1 / span 2!important;
}
body.gx-v47-ui .gx-room-main-column.gx-word-is-playing .gx-word-right-chat-panel{
    grid-column:2!important;
    grid-row:1!important;
    height:360px!important;
}
body.gx-v47-ui .gx-room-main-column.gx-word-is-playing .gx-word-right-helper-panel{
    grid-column:2!important;
    grid-row:2!important;
    display:flex!important;
    width:100%!important;
    min-height:360px!important;
    max-height:none!important;
}

/* -------------------------------------------------------------
   Active area itself: LEFT scoreboard + CENTER game
   ------------------------------------------------------------- */
body.gx-v47-ui #active-game-zone[style*="display: block"],
body.gx-v47-ui #active-game-zone[style*="display:block"]{
    display:grid!important;
    grid-template-columns:270px minmax(0,1fr)!important;
    gap:14px!important;
    align-items:start!important;
    width:100%!important;
}

body.gx-v47-ui .gx-word-match-shell{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
}

/* -------------------------------------------------------------
   LEFT SCOREBOARD
   ------------------------------------------------------------- */
body.gx-v47-ui .gx-word-score-rail{
    min-width:0;
    min-height:720px;
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:12px;
    position:sticky;
    top:76px;
    border-radius:20px;
    background:
      radial-gradient(circle at 20% 0,rgba(67,124,229,.10),transparent 26%),
      linear-gradient(180deg,#0d1729,#080f1c);
    border:1px solid rgba(91,133,211,.16);
    box-shadow:0 22px 54px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);
}

body.gx-v47-ui .gx-word-score-rail-head{
    min-height:66px;
    display:grid;
    grid-template-columns:42px 1fr;
    gap:10px;
    align-items:center;
    padding-bottom:11px;
    border-bottom:1px solid rgba(104,137,199,.10);
}
body.gx-v47-ui .gx-word-score-rail-icon{
    width:42px;height:42px;
    display:grid;place-items:center;
    border-radius:12px;
    color:#ffd05b;
    background:rgba(191,137,25,.08);
    border:1px solid rgba(213,158,36,.10);
    font-size:15px;
}
body.gx-v47-ui .gx-word-score-rail-head small{
    display:block;
    color:#6499e9;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}
body.gx-v47-ui .gx-word-score-rail-head strong{
    display:block;
    margin-top:2px;
    color:#f0f5ff;
    font-size:17px;
}
body.gx-v47-ui .gx-word-score-rail-head p{
    margin:2px 0 0;
    color:#71829c;
    font-size:10px;
}

/* Self stats become 2 x 2 inside scoreboard. */
body.gx-v47-ui .gx-word-score-rail .gx-word-self-stats{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
}
body.gx-v47-ui .gx-word-score-rail .gx-word-self-stat{
    min-height:74px!important;
    padding:10px!important;
    border-radius:13px!important;
    background:#08111f!important;
    border:1px solid rgba(89,126,194,.09)!important;
}
body.gx-v47-ui .gx-word-score-rail .gx-word-self-stat span{
    color:#7e90aa!important;
    font-size:10px!important;
}
body.gx-v47-ui .gx-word-score-rail .gx-word-self-stat strong{
    margin-top:4px!important;
    color:#f3f6fb!important;
    font-size:23px!important;
}

/* Existing scoreboard nested card becomes flat inside left rail. */
body.gx-v47-ui .gx-word-score-rail .gx-word-scoreboard{
    flex:1;
    min-height:0;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
body.gx-v47-ui .gx-word-score-rail .gx-word-scoreboard-head{
    min-height:46px!important;
    padding:0 2px 8px!important;
    border-bottom:1px solid rgba(98,132,193,.08)!important;
}
body.gx-v47-ui .gx-word-score-rail .gx-word-scoreboard-head h4{
    font-size:14px!important;
}
body.gx-v47-ui .gx-word-score-rail .gx-word-scoreboard-list{
    margin-top:8px!important;
    max-height:390px!important;
    overflow:auto!important;
    padding-right:2px!important;
    scrollbar-width:thin;
    scrollbar-color:#38537e transparent;
}

/* Player rows: readable. */
body.gx-v47-ui .gx-word-score-player{
    min-height:72px!important;
    padding:8px!important;
    grid-template-columns:30px 40px minmax(0,1fr) auto!important;
    gap:7px!important;
    border-radius:12px!important;
    background:rgba(8,16,29,.88)!important;
    border:1px solid rgba(88,124,190,.08)!important;
}
body.gx-v47-ui .gx-word-score-player.is-me{
    border-color:rgba(75,140,239,.25)!important;
    background:linear-gradient(135deg,rgba(42,86,165,.13),rgba(63,50,129,.07))!important;
}
body.gx-v47-ui .gx-word-score-rank{
    width:30px!important;
    height:30px!important;
    font-size:12px!important;
}
body.gx-v47-ui .gx-word-score-avatar{
    width:40px!important;
    height:40px!important;
}
body.gx-v47-ui .gx-word-score-copy strong{
    font-size:11px!important;
}
body.gx-v47-ui .gx-word-score-copy small{
    font-size:8.5px!important;
    line-height:1.4!important;
}
body.gx-v47-ui .gx-word-room-wins,
body.gx-v47-ui .gx-word-ranked-hidden{
    font-size:7.5px!important;
}
body.gx-v47-ui .gx-word-score-points{
    font-size:16px!important;
}
body.gx-v47-ui .gx-word-score-points small{
    font-size:7px!important;
}

/* -------------------------------------------------------------
   CENTER GAME — readable, not oversized
   ------------------------------------------------------------- */
body.gx-v47-ui .gx-word-match-shell{
    min-height:720px!important;
    border-radius:20px!important;
}

body.gx-v47-ui .gx-word-match-topbar{
    min-height:92px!important;
    padding:14px 16px!important;
}
body.gx-v47-ui .gx-word-match-brand-icon{
    width:46px!important;height:46px!important;
}
body.gx-v47-ui .gx-word-match-kicker{
    font-size:9px!important;
}
body.gx-v47-ui .gx-word-match-brand h2{
    font-size:20px!important;
    line-height:1.25!important;
}
body.gx-v47-ui .gx-word-match-brand p{
    font-size:11px!important;
    line-height:1.45!important;
}
body.gx-v47-ui .gx-word-match-timer{
    min-width:118px!important;
}
body.gx-v47-ui .gx-word-match-timer span{
    font-size:9px!important;
}
body.gx-v47-ui .gx-word-match-timer strong{
    font-size:26px!important;
}

body.gx-v47-ui .gx-word-progress-copy{
    font-size:11px!important;
}
body.gx-v47-ui .gx-word-progress-track{
    height:9px!important;
}

body.gx-v47-ui .gx-word-meta-pill{
    min-height:61px!important;
    padding:9px 10px!important;
}
body.gx-v47-ui .gx-word-meta-pill span{
    font-size:9px!important;
}
body.gx-v47-ui .gx-word-meta-pill strong{
    margin-top:3px!important;
    font-size:12px!important;
}

/* Question is the visual focus. */
body.gx-v47-ui .gx-word-question-card{
    min-height:430px!important;
    padding:34px 24px 28px!important;
}
body.gx-v47-ui .gx-word-question-badge{
    min-height:31px!important;
    font-size:9px!important;
}
body.gx-v47-ui .gx-word-question-label{
    font-size:11px!important;
}
body.gx-v47-ui .gx-word-question-card h3{
    max-width:760px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:clamp(46px,4.4vw,66px)!important;
    line-height:1.1!important;
    overflow-wrap:anywhere!important;
}
body.gx-v47-ui .gx-word-question-hint{
    margin-top:14px!important;
    font-size:12px!important;
    line-height:1.55!important;
}
body.gx-v47-ui .gx-word-answer-row{
    max-width:760px!important;
    margin-top:22px!important;
}
body.gx-v47-ui .gx-word-answer-input-wrap{
    min-height:60px!important;
}
body.gx-v47-ui .gx-word-answer-input-wrap input{
    min-height:58px!important;
    font-size:16px!important;
}
body.gx-v47-ui .gx-word-submit-btn{
    min-width:160px!important;
    min-height:60px!important;
    font-size:13px!important;
}
body.gx-v47-ui .gx-word-feedback{
    font-size:12px!important;
}

/* -------------------------------------------------------------
   RIGHT TOP — CHAT
   ------------------------------------------------------------- */
body.gx-v47-ui .gx-word-right-chat-panel{
    min-width:0!important;
    padding:14px!important;
    border-radius:18px!important;
    background:
      radial-gradient(circle at 100% 0,rgba(54,113,211,.08),transparent 30%),
      linear-gradient(180deg,#0d1728,#080f1c)!important;
    border:1px solid rgba(90,130,201,.14)!important;
    box-shadow:0 20px 45px rgba(0,0,0,.20)!important;
}
body.gx-v47-ui .gx-word-right-chat-panel .gx-room-chat-title{
    margin-bottom:10px!important;
    padding-bottom:10px!important;
    border-bottom:1px solid rgba(98,132,192,.09);
    color:#edf3ff!important;
    font-size:15px!important;
}
body.gx-v47-ui #chat-messages-display{
    font-size:12px!important;
    line-height:1.55!important;
}
body.gx-v47-ui #chat-messages-display > div{
    margin-bottom:7px!important;
}
body.gx-v47-ui #chat-user-input{
    min-height:44px!important;
    font-size:13px!important;
}
body.gx-v47-ui .gx-word-right-chat-panel .btn-blue{
    min-width:46px!important;
    min-height:44px!important;
}

/* -------------------------------------------------------------
   RIGHT BOTTOM — HELPERS
   ------------------------------------------------------------- */
body.gx-v47-ui .gx-word-right-helper-panel{
    min-width:0!important;
    flex-direction:column!important;
    position:static!important;
    border-radius:18px!important;
    background:
      radial-gradient(circle at 100% 0,rgba(118,69,211,.09),transparent 34%),
      linear-gradient(180deg,#0d1729,#080f1c)!important;
    border:1px solid rgba(109,93,199,.14)!important;
    box-shadow:0 20px 45px rgba(0,0,0,.20)!important;
}
body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-shop-head{
    min-height:68px!important;
    padding:12px 13px!important;
}
body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-shop-head small{
    font-size:8.5px!important;
}
body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-shop-head strong{
    font-size:15px!important;
}
body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-category{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:12px!important;
}
body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-category-title{
    font-size:10px!important;
}
body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-category button{
    min-height:67px!important;
    padding:9px 10px!important;
    grid-template-columns:38px minmax(0,1fr) auto!important;
}
body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-category button .icon{
    width:38px!important;height:38px!important;
}
body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-category button b{
    font-size:11.5px!important;
}
body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-category button small{
    font-size:9px!important;
    line-height:1.35!important;
}
body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-category button em{
    font-size:9px!important;
}
body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-result{
    margin:0 12px!important;
    min-height:39px!important;
    font-size:9.5px!important;
}
body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-footnote{
    padding:9px 12px 12px!important;
    font-size:8.5px!important;
}

/* -------------------------------------------------------------
   Laptop
   ------------------------------------------------------------- */
@media(max-width:1320px) and (min-width:1051px){
    body.gx-v47-ui #game-room-screen>.max-w-6xl{
        width:calc(100vw - 20px)!important;
    }
    body.gx-v47-ui .gx-room-main-column{
        grid-template-columns:minmax(0,1fr) 300px!important;
        gap:10px!important;
    }
    body.gx-v47-ui #active-game-zone[style*="display: block"],
    body.gx-v47-ui #active-game-zone[style*="display:block"]{
        grid-template-columns:230px minmax(0,1fr)!important;
        gap:10px!important;
    }
    body.gx-v47-ui .gx-word-score-rail{
        padding:10px!important;
    }
    body.gx-v47-ui .gx-word-score-player{
        grid-template-columns:26px 34px minmax(0,1fr)!important;
    }
    body.gx-v47-ui .gx-word-score-points{
        grid-column:3!important;
        justify-self:start!important;
    }
    body.gx-v47-ui .gx-word-question-card h3{
        font-size:clamp(42px,4.2vw,58px)!important;
    }
}

/* -------------------------------------------------------------
   Tablet:
   Game first, scoreboard below it, then chat/helpers.
   ------------------------------------------------------------- */
@media(max-width:1050px){
    body.gx-v47-ui #game-room-screen>.max-w-6xl{
        width:calc(100vw - 16px)!important;
    }

    body.gx-v47-ui .gx-room-main-column,
    body.gx-v47-ui .gx-room-main-column.gx-word-is-playing{
        grid-template-columns:1fr!important;
        gap:10px!important;
    }

    body.gx-v47-ui .gx-room-main-column.gx-word-is-playing #active-game-zone,
    body.gx-v47-ui .gx-room-main-column.gx-word-is-playing .gx-word-right-chat-panel,
    body.gx-v47-ui .gx-room-main-column.gx-word-is-playing .gx-word-right-helper-panel,
    body.gx-v47-ui .gx-room-main-column:not(.gx-word-is-playing) #waiting-zone,
    body.gx-v47-ui .gx-room-main-column:not(.gx-word-is-playing) .gx-word-right-chat-panel{
        grid-column:1!important;
        grid-row:auto!important;
    }

    body.gx-v47-ui #active-game-zone[style*="display: block"],
    body.gx-v47-ui #active-game-zone[style*="display:block"]{
        grid-template-columns:1fr!important;
    }

    body.gx-v47-ui .gx-word-match-shell{
        grid-row:1!important;
    }
    body.gx-v47-ui .gx-word-score-rail{
        grid-row:2!important;
        position:static!important;
        min-height:0!important;
    }
    body.gx-v47-ui .gx-word-score-rail .gx-word-self-stats{
        grid-template-columns:repeat(4,1fr)!important;
    }
    body.gx-v47-ui .gx-word-score-rail .gx-word-scoreboard-list{
        max-height:280px!important;
    }
    body.gx-v47-ui .gx-word-right-chat-panel{
        height:330px!important;
    }
    body.gx-v47-ui .gx-word-right-helper-panel{
        min-height:0!important;
    }
    body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-category{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
    body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-category-title{
        grid-column:1/-1!important;
    }
}

/* -------------------------------------------------------------
   Mobile
   ------------------------------------------------------------- */
@media(max-width:700px){
    body.gx-v47-ui #game-room-screen>.max-w-6xl{
        width:100%!important;
        padding:7px!important;
    }

    body.gx-v47-ui .gx-word-match-shell{
        min-height:0!important;
        border-radius:16px!important;
    }

    body.gx-v47-ui .gx-word-match-topbar{
        min-height:auto!important;
        padding:10px!important;
        grid-template-columns:1fr auto!important;
    }
    body.gx-v47-ui .gx-word-match-brand-icon{
        display:none!important;
    }
    body.gx-v47-ui .gx-word-match-brand h2{
        font-size:15px!important;
    }
    body.gx-v47-ui .gx-word-match-brand p{
        font-size:9px!important;
    }
    body.gx-v47-ui .gx-word-match-timer{
        min-width:88px!important;
        min-height:54px!important;
        margin-left:5px!important;
    }
    body.gx-v47-ui .gx-word-match-timer strong{
        font-size:19px!important;
    }

    body.gx-v47-ui .gx-word-progress-wrap{
        padding:10px!important;
    }
    body.gx-v47-ui .gx-word-match-meta{
        grid-template-columns:1fr 1fr!important;
        padding:0 10px 10px!important;
    }
    body.gx-v47-ui .gx-word-meta-pill{
        min-height:54px!important;
    }

    body.gx-v47-ui .gx-word-question-card{
        min-height:340px!important;
        margin:0 8px!important;
        padding:25px 12px 18px!important;
    }
    body.gx-v47-ui .gx-word-question-card h3{
        font-size:40px!important;
    }
    body.gx-v47-ui .gx-word-question-hint{
        font-size:11px!important;
    }
    body.gx-v47-ui .gx-word-answer-row{
        margin-top:18px!important;
    }
    body.gx-v47-ui .gx-word-answer-input-wrap input{
        font-size:16px!important;
    }
    body.gx-v47-ui .gx-word-submit-btn{
        min-height:52px!important;
    }

    body.gx-v47-ui .gx-word-score-rail{
        padding:11px!important;
    }
    body.gx-v47-ui .gx-word-score-rail .gx-word-self-stats{
        grid-template-columns:1fr 1fr!important;
    }

    body.gx-v47-ui .gx-word-right-chat-panel{
        height:310px!important;
    }
    body.gx-v47-ui #chat-user-input{
        font-size:16px!important;
    }

    body.gx-v47-ui .gx-word-right-helper-panel .gx-word-helper-category{
        grid-template-columns:1fr!important;
    }
}

/* Very narrow phone */
@media(max-width:400px){
    body.gx-v47-ui .gx-word-question-card h3{
        font-size:34px!important;
    }
    body.gx-v47-ui .gx-word-score-player{
        grid-template-columns:28px 36px minmax(0,1fr)!important;
    }
    body.gx-v47-ui .gx-word-score-points{
        grid-column:3!important;
        justify-self:start!important;
    }
}


/* =====================================================================
   GX V50 — CHAOS BOARD COMBAT FX + BIG ACTION MENU + HP FEEDBACK
   ===================================================================== */

.gx-chaos-pro-board-frame{
    position:relative!important;
    overflow:visible!important;
}

/* BATTLE ARRIVAL / PVP CINEMATIC */
.gx-chaos-combat-fx{
    position:absolute;
    inset:0;
    z-index:30;
    display:none;
    place-items:center;
    pointer-events:none;
    border-radius:18px;
    overflow:hidden;
}
.gx-chaos-combat-fx.is-active{display:grid}
.gx-chaos-combat-fx.is-active::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at center,rgba(108,56,191,.15),transparent 34%),
        rgba(2,5,12,.44);
    backdrop-filter:blur(2px);
    animation:gxChaosCombatBackdrop .25s ease both;
}
@keyframes gxChaosCombatBackdrop{from{opacity:0}to{opacity:1}}

.gx-chaos-battle-intro-card{
    position:relative;
    z-index:2;
    min-width:min(420px,78%);
    padding:24px 28px;
    display:grid;
    justify-items:center;
    text-align:center;
    border-radius:22px;
    background:
        radial-gradient(circle at 50% 0,rgba(237,64,126,.20),transparent 44%),
        linear-gradient(180deg,rgba(25,12,34,.96),rgba(7,10,19,.97));
    border:1px solid rgba(245,86,140,.30);
    box-shadow:0 30px 80px rgba(0,0,0,.52),0 0 50px rgba(225,59,122,.17),inset 0 1px 0 rgba(255,255,255,.06);
    animation:gxChaosBattleIntro .72s cubic-bezier(.2,.8,.2,1) both;
}
.gx-chaos-battle-intro-card .crossed{
    position:relative;
    width:72px;height:72px;
    display:grid;place-items:center;
    margin-bottom:7px;
    border-radius:50%;
    color:#ffd6e1;
    background:radial-gradient(circle,rgba(235,70,129,.20),transparent 68%);
    font-size:28px;
    filter:drop-shadow(0 0 18px rgba(239,69,128,.32));
}
.gx-chaos-battle-intro-card .crossed i:last-child{
    position:absolute;
    font-size:54px;
    color:rgba(255,91,139,.18);
}
.gx-chaos-battle-intro-card small{color:#ff7daa;font-size:10px;font-weight:900;letter-spacing:.18em}
.gx-chaos-battle-intro-card strong{
    margin-top:2px;
    color:#fff0f5;
    font-size:48px;
    line-height:1;
    font-style:italic;
    letter-spacing:-.05em;
    text-shadow:0 5px 0 #7e2347,0 12px 28px rgba(224,52,116,.30);
}
.gx-chaos-battle-intro-card p{margin:9px 0 0;color:#c0a9b4;font-size:12px}
@keyframes gxChaosBattleIntro{
    0%{opacity:0;transform:scale(.62) rotate(-4deg)}
    52%{opacity:1;transform:scale(1.08) rotate(1deg)}
    100%{opacity:1;transform:scale(1)}
}

.gx-chaos-combat-scene{
    position:relative;
    z-index:2;
    width:min(650px,84%);
    min-height:230px;
    padding:22px;
    display:grid;
    grid-template-columns:1fr 150px 1fr;
    gap:16px;
    align-items:center;
    border-radius:24px;
    background:
        radial-gradient(circle at 50% 35%,rgba(115,70,213,.20),transparent 33%),
        linear-gradient(180deg,rgba(11,17,31,.97),rgba(5,9,17,.98));
    border:1px solid rgba(122,98,218,.28);
    box-shadow:0 34px 90px rgba(0,0,0,.58),0 0 55px rgba(98,66,192,.16),inset 0 1px 0 rgba(255,255,255,.05);
}
.gx-chaos-combat-fighter{
    min-width:0;
    display:grid;
    justify-items:center;
    text-align:center;
}
.gx-chaos-combat-fighter .portrait{
    width:82px;height:82px;
    display:grid;place-items:center;
    border-radius:50%;
    color:#06101a;
    background:
        radial-gradient(circle at 35% 25%,#fff 0 6%,var(--fighter) 7% 62%,color-mix(in srgb,var(--fighter) 48%,#02050a) 100%);
    border:3px solid color-mix(in srgb,var(--fighter) 78%,#fff);
    box-shadow:0 0 0 7px color-mix(in srgb,var(--fighter) 11%,transparent),0 0 30px color-mix(in srgb,var(--fighter) 27%,transparent);
    font-size:25px;
    font-weight:1000;
}
.gx-chaos-combat-fighter small{margin-top:9px;color:#71809c;font-size:8px;font-weight:900;letter-spacing:.13em}
.gx-chaos-combat-fighter strong{
    max-width:170px;
    margin-top:2px;
    color:#eef4ff;
    font-size:15px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.gx-chaos-combat-fighter b{margin-top:4px;color:#76e3ac;font-size:12px}
.gx-chaos-combat-fighter.actor{animation:gxChaosActorStrike 1s cubic-bezier(.2,.7,.2,1) both}
.gx-chaos-combat-fighter.target{animation:gxChaosTargetHit 1s cubic-bezier(.2,.7,.2,1) both}

.gx-chaos-combat-impact{
    position:relative;
    z-index:3;
    display:grid;
    justify-items:center;
    text-align:center;
}
.gx-chaos-combat-impact .impact-icon{
    width:78px;height:78px;
    display:grid;place-items:center;
    border-radius:50%;
    color:#ffdce6;
    background:radial-gradient(circle,rgba(233,72,129,.28),rgba(121,54,187,.12) 55%,transparent 72%);
    font-size:29px;
    filter:drop-shadow(0 0 18px rgba(231,70,128,.32));
    animation:gxChaosImpactBurst .72s ease .12s both;
}
.gx-chaos-combat-impact small{margin-top:4px;color:#a88cc2;font-size:9px;font-weight:900}
.gx-chaos-combat-impact strong{
    margin-top:1px;
    color:#ff7899;
    font-size:26px;
    line-height:1;
    text-shadow:0 0 22px rgba(255,82,125,.35);
}
.gx-chaos-combat-impact em{margin-top:5px;color:#66e3ad;font-size:11px;font-style:normal;font-weight:900}
.gx-chaos-combat-fx.combat-steal .gx-chaos-combat-impact strong{color:#ffd260}
.gx-chaos-combat-fx.combat-curse .gx-chaos-combat-impact strong{color:#90b8ff}
.gx-chaos-combat-fx.combat-push .gx-chaos-combat-impact strong{color:#b999ff}

@keyframes gxChaosActorStrike{
    0%{opacity:0;transform:translateX(-35px) scale(.92)}
    25%{opacity:1;transform:translateX(0) scale(1)}
    48%{transform:translateX(42px) scale(1.06)}
    67%{transform:translateX(0) scale(1)}
    100%{transform:translateX(0)}
}
@keyframes gxChaosTargetHit{
    0%,42%{opacity:0;transform:translateX(24px)}
    48%{opacity:1;transform:translateX(0)}
    57%{transform:translateX(13px) rotate(2deg);filter:brightness(1.7)}
    66%{transform:translateX(-8px) rotate(-1deg)}
    78%,100%{transform:translateX(0);filter:none}
}
@keyframes gxChaosImpactBurst{
    0%{opacity:0;transform:scale(.35) rotate(-30deg)}
    55%{opacity:1;transform:scale(1.28) rotate(8deg)}
    100%{transform:scale(1)}
}
body.gx-chaos-combat-playing .gx-chaos-pro-board-frame{animation:gxChaosBoardHitShake .46s ease .28s both}
@keyframes gxChaosBoardHitShake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-5px)}
    40%{transform:translateX(6px)}
    60%{transform:translateX(-3px)}
    80%{transform:translateX(2px)}
}
[data-player-uid].gx-chaos-combat-actor{
    filter:brightness(1.25)!important;
    box-shadow:0 0 24px rgba(87,147,255,.26)!important;
}
[data-player-uid].gx-chaos-combat-target{animation:gxChaosVisualTargetHit .55s ease .22s both!important}
@keyframes gxChaosVisualTargetHit{
    0%,100%{transform:translateX(0);filter:none}
    35%{transform:translateX(5px);filter:brightness(1.8) saturate(1.4)}
    55%{transform:translateX(-5px);filter:brightness(1.4)}
}

/* BIG PVP / ACTION MENU — appears only after the pawn arrives */
.gx-chaos-pro-pending[data-pending-type="moving"]{display:none!important}
.gx-chaos-pro-pending[data-pending-type="pvp"]{
    width:min(735px,90%)!important;
    bottom:78px!important;
    z-index:22!important;
}
.gx-chaos-pro-pending[data-pending-type="punishment"],
.gx-chaos-pro-pending[data-pending-type="shop"]{
    width:min(620px,84%)!important;
    z-index:22!important;
}
.gx-chaos-pro-pending .gx-chaos-action-card{
    padding:17px!important;
    border-radius:17px!important;
    background:
        radial-gradient(circle at 50% 0,rgba(103,55,168,.10),transparent 40%),
        rgba(5,9,18,.96)!important;
    border-width:1px!important;
    box-shadow:0 22px 58px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.035)!important;
    backdrop-filter:blur(10px)!important;
}
.gx-chaos-pro-pending .gx-chaos-action-card>small{font-size:10px!important;letter-spacing:.11em!important}
.gx-chaos-pro-pending .gx-chaos-action-card>strong{
    margin-top:4px!important;
    color:#f3f6fc!important;
    font-size:19px!important;
    line-height:1.3!important;
}
.gx-chaos-pro-pending .gx-chaos-action-card>span{
    margin-top:5px!important;
    color:#9aa5b8!important;
    font-size:11px!important;
    line-height:1.5!important;
}
.gx-chaos-pro-pending .gx-chaos-pvp-targets{
    margin-top:13px!important;
    max-height:340px!important;
    overflow:auto!important;
    gap:10px!important;
    padding-right:2px!important;
}
.gx-chaos-pro-pending .gx-chaos-pvp-targets>article{
    padding:12px!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.027)!important;
    border:1px solid rgba(176,139,196,.12)!important;
}
.gx-chaos-pro-pending .gx-chaos-pvp-target-head{
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:10px!important;
}
.gx-chaos-pro-pending .gx-chaos-pvp-target-head .avatar{
    width:46px!important;
    height:46px!important;
    border-radius:13px!important;
    font-size:15px!important;
}
.gx-chaos-pro-pending .gx-chaos-pvp-target-head strong{font-size:13px!important}
.gx-chaos-pro-pending .gx-chaos-pvp-target-head small{font-size:10px!important}

.gx-chaos-pvp-hpbar{
    position:relative;
    height:8px;
    margin-top:7px;
    display:block;
    overflow:hidden;
    border-radius:999px;
    background:#1d2637;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.gx-chaos-pvp-hpbar i{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#4bdc98,#75efb2);
    box-shadow:0 0 10px rgba(67,221,150,.22);
}
.gx-chaos-pvp-hpbar i[data-hp="warning"]{background:linear-gradient(90deg,#eca33d,#ffd15d)}
.gx-chaos-pvp-hpbar i[data-hp="critical"]{
    background:linear-gradient(90deg,#e74e69,#ff7087);
    animation:gxChaosCriticalHpPulse .72s ease-in-out infinite alternate;
}
.gx-chaos-pro-pending .gx-chaos-pvp-actions{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:10px!important;
}
.gx-chaos-pro-pending .gx-chaos-pvp-actions button{
    min-height:68px!important;
    padding:8px 7px!important;
    gap:3px!important;
    border-radius:11px!important;
    transition:transform .14s ease,filter .14s ease!important;
}
.gx-chaos-pro-pending .gx-chaos-pvp-actions button:hover{transform:translateY(-2px)!important;filter:brightness(1.16)}
.gx-chaos-pro-pending .gx-chaos-pvp-actions button i{font-size:16px!important}
.gx-chaos-pro-pending .gx-chaos-pvp-actions button b{font-size:11px!important}
.gx-chaos-pro-pending .gx-chaos-pvp-actions button span{font-size:9px!important}
.gx-chaos-pro-pending .punishment-options button,
.gx-chaos-pro-pending .gx-chaos-shop-options button{min-height:72px!important;font-size:11px!important}

/* HP — thicker, state colors, percentage, damage flash */
.gx-chaos-player-hp{
    position:relative!important;
    height:13px!important;
    margin-top:8px!important;
    overflow:visible!important;
    border-radius:999px!important;
    background:#1a2434!important;
    border:1px solid rgba(103,128,177,.13)!important;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.38)!important;
}
.gx-chaos-player-hp>i{
    position:absolute;
    inset:1px auto 1px 1px;
    height:auto!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#39cc88,#62e8a4)!important;
    transition:width .45s cubic-bezier(.2,.75,.2,1),background .2s ease!important;
    box-shadow:0 0 11px rgba(66,220,147,.28)!important;
}
.gx-chaos-player-hp>i[data-hp="warning"]{
    background:linear-gradient(90deg,#df9130,#ffc84e)!important;
    box-shadow:0 0 13px rgba(235,168,55,.28)!important;
}
.gx-chaos-player-hp>i[data-hp="critical"]{
    background:linear-gradient(90deg,#d93b59,#ff637b)!important;
    box-shadow:0 0 16px rgba(244,71,99,.35)!important;
    animation:gxChaosCriticalHpPulse .62s ease-in-out infinite alternate;
}
.gx-chaos-player-hp>b{
    position:absolute;
    inset:0;
    z-index:2;
    display:grid;
    place-items:center;
    color:#f6f8fc;
    font-size:7.5px;
    line-height:1;
    text-shadow:0 1px 3px #000,0 0 3px #000;
    pointer-events:none;
}
@keyframes gxChaosCriticalHpPulse{from{filter:brightness(.9)}to{filter:brightness(1.38)}}

.gx-chaos-my-hp-track{
    position:relative!important;
    height:18px!important;
    margin-top:10px!important;
    overflow:hidden!important;
    border-radius:999px!important;
    background:#182234!important;
    border:1px solid rgba(103,130,184,.14)!important;
    box-shadow:inset 0 2px 5px rgba(0,0,0,.38)!important;
}
.gx-chaos-my-hp-track>i{
    position:absolute;
    inset:2px auto 2px 2px;
    height:auto!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#35ca84,#62e7a2)!important;
    transition:width .48s cubic-bezier(.18,.76,.2,1),background .18s ease!important;
    box-shadow:0 0 13px rgba(70,224,151,.28)!important;
}
.gx-chaos-my-hp-track>i[data-hp="warning"]{
    background:linear-gradient(90deg,#df902f,#ffc950)!important;
    box-shadow:0 0 14px rgba(235,169,57,.30)!important;
}
.gx-chaos-my-hp-track>i[data-hp="critical"]{
    background:linear-gradient(90deg,#d63a57,#ff6078)!important;
    box-shadow:0 0 18px rgba(241,68,96,.40)!important;
    animation:gxChaosCriticalHpPulse .58s ease-in-out infinite alternate;
}
.gx-chaos-my-hp-track>b{
    position:absolute;
    inset:0;
    z-index:3;
    display:grid;
    place-items:center;
    color:#f8fbff;
    font-size:8px;
    font-weight:1000;
    text-shadow:0 1px 3px #000,0 0 3px #000;
}

.gx-chaos-game-player{overflow:visible!important}
.gx-chaos-game-player.gx-chaos-hp-hit{
    z-index:8!important;
    animation:gxChaosHpCardHit .68s ease both!important;
}
.gx-chaos-board-token.gx-chaos-hp-hit{animation:gxChaosTokenDamage .68s ease both!important}
.gx-chaos-hp-damage-float{
    position:absolute;
    top:-12px;
    right:8px;
    z-index:20;
    padding:4px 7px;
    border-radius:8px;
    color:#fff0f3;
    background:rgba(190,36,65,.92);
    border:1px solid rgba(255,113,137,.35);
    box-shadow:0 8px 18px rgba(0,0,0,.35),0 0 18px rgba(239,59,91,.22);
    font-size:10px;
    font-weight:1000;
    pointer-events:none;
    animation:gxChaosDamageFloat 1s ease-out both;
}
@keyframes gxChaosHpCardHit{
    0%{transform:translateX(0);box-shadow:0 0 0 rgba(255,63,92,0)}
    18%{transform:translateX(-5px);box-shadow:0 0 0 2px rgba(255,72,101,.45),0 0 28px rgba(255,54,88,.24)}
    36%{transform:translateX(5px)}
    54%{transform:translateX(-3px)}
    100%{transform:translateX(0)}
}
@keyframes gxChaosTokenDamage{
    0%,100%{transform:translateX(0) scale(1);filter:none}
    26%{transform:translateX(-5px) scale(1.17);filter:brightness(1.8) saturate(1.5)}
    48%{transform:translateX(5px) scale(.94)}
}
@keyframes gxChaosDamageFloat{
    0%{opacity:0;transform:translateY(8px) scale(.85)}
    18%{opacity:1;transform:translateY(0) scale(1.06)}
    100%{opacity:0;transform:translateY(-30px) scale(1)}
}

/* Red screen-edge flash when YOU take damage */
body.gx-chaos-self-damaged::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:99990;
    pointer-events:none;
    box-shadow:inset 0 0 90px rgba(255,28,66,.58);
    background:radial-gradient(circle,transparent 55%,rgba(190,18,48,.19));
    animation:gxChaosSelfDamageFlash .78s ease both;
}
@keyframes gxChaosSelfDamageFlash{
    0%{opacity:0}
    14%{opacity:1}
    35%{opacity:.28}
    50%{opacity:.88}
    100%{opacity:0}
}

/* Responsive action/combat UI */
@media(max-width:900px){
    .gx-chaos-pro-pending[data-pending-type="pvp"]{width:min(680px,94%)!important}
    .gx-chaos-combat-scene{width:88%;grid-template-columns:1fr 120px 1fr}
    .gx-chaos-combat-fighter .portrait{width:68px;height:68px;font-size:20px}
}
@media(max-width:720px){
    .gx-chaos-pro-pending[data-pending-type="pvp"]{
        width:86%!important;
        max-width:520px!important;
        bottom:70px!important;
    }
    .gx-chaos-pro-pending .gx-chaos-pvp-actions{grid-template-columns:1fr 1fr!important}
    .gx-chaos-pro-pending .gx-chaos-action-card>strong{font-size:16px!important}
    .gx-chaos-pro-pending .gx-chaos-pvp-actions button{min-height:64px!important}
    .gx-chaos-battle-intro-card{min-width:330px;padding:19px}
    .gx-chaos-battle-intro-card strong{font-size:38px}
    .gx-chaos-combat-scene{
        width:88%;
        min-height:190px;
        padding:15px 12px;
        grid-template-columns:1fr 86px 1fr;
        gap:8px;
    }
    .gx-chaos-combat-fighter .portrait{width:54px;height:54px;font-size:16px}
    .gx-chaos-combat-fighter strong{max-width:100px;font-size:10px}
    .gx-chaos-combat-fighter b{font-size:9px}
    .gx-chaos-combat-impact .impact-icon{width:55px;height:55px;font-size:20px}
    .gx-chaos-combat-impact strong{font-size:18px}
}
@media(max-width:430px){
    .gx-chaos-pro-pending .gx-chaos-pvp-actions{grid-template-columns:1fr!important}
    .gx-chaos-combat-scene{width:92%;grid-template-columns:1fr 70px 1fr}
    .gx-chaos-battle-intro-card{min-width:280px}
}
@media(prefers-reduced-motion:reduce){
    .gx-chaos-battle-intro-card,
    .gx-chaos-combat-fighter,
    .gx-chaos-combat-impact .impact-icon,
    body.gx-chaos-combat-playing .gx-chaos-pro-board-frame,
    .gx-chaos-game-player.gx-chaos-hp-hit,
    .gx-chaos-board-token.gx-chaos-hp-hit,
    .gx-chaos-hp-damage-float,
    body.gx-chaos-self-damaged::after{
        animation:none!important;
    }
}


/* =====================================================================
   GX V51 — CHAOS REALTIME / DEFENSE / STATUS FX
   ===================================================================== */

/* Combat/Result overlays are viewport-level so effects cannot hide. */
.gx-chaos-combat-fx{
    position:fixed!important;
    inset:0!important;
    z-index:9995!important;
    border-radius:0!important;
}
.gx-chaos-combat-fx.is-active::before{backdrop-filter:blur(5px)!important}

/* Winner */
.gx-chaos-winner-card{
    position:relative;
    z-index:5;
    width:min(540px,90vw);
    min-height:390px;
    padding:34px 28px;
    display:grid;
    justify-items:center;
    align-content:center;
    text-align:center;
    border-radius:30px;
    background:
      radial-gradient(circle at 50% 15%,rgba(255,205,77,.22),transparent 33%),
      radial-gradient(circle at 20% 100%,rgba(74,143,255,.13),transparent 36%),
      linear-gradient(180deg,#141d31,#090e19);
    border:1px solid rgba(247,205,91,.32);
    box-shadow:0 42px 120px rgba(0,0,0,.65),0 0 80px rgba(239,185,61,.16),inset 0 1px 0 rgba(255,255,255,.07);
    animation:gxChaosWinnerPop .7s cubic-bezier(.2,.8,.2,1) both;
}
.gx-chaos-winner-card .crown{
    width:92px;height:92px;
    display:grid;place-items:center;
    border-radius:50%;
    color:#ffd967;
    background:radial-gradient(circle,rgba(255,210,78,.22),transparent 70%);
    font-size:48px;
    filter:drop-shadow(0 0 22px rgba(255,203,69,.42));
    animation:gxChaosWinnerCrown 1.2s ease-in-out infinite alternate;
}
.gx-chaos-winner-card>small{margin-top:8px;color:#efc85c;font-size:11px;font-weight:1000;letter-spacing:.18em}
.gx-chaos-winner-card>strong{max-width:460px;margin-top:5px;color:#fff;font-size:34px;line-height:1.12;overflow-wrap:anywhere}
.gx-chaos-winner-card h3{
    margin:4px 0 0;
    font-size:62px;
    line-height:1;
    font-style:italic;
    letter-spacing:-.055em;
    color:#ffe277;
    text-shadow:0 5px 0 #9c6d17,0 13px 30px rgba(230,169,43,.28);
}
.gx-chaos-winner-card p{margin:12px 0 0;color:#aab5ca;font-size:13px}
.gx-chaos-winner-card .reset{
    min-height:42px;
    margin-top:22px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:999px;
    color:#a8c3ed;
    background:rgba(55,95,164,.10);
    border:1px solid rgba(82,127,203,.13);
    font-size:10px;
    font-weight:800;
}
.gx-chaos-winner-confetti{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.gx-chaos-winner-confetti i{
    position:absolute;
    top:-30px;
    left:var(--x);
    width:9px;height:17px;
    border-radius:2px;
    background:linear-gradient(180deg,#ffd65f,#8767ff);
    transform:rotate(var(--r));
    animation:gxChaosConfettiFall 3.7s linear var(--delay) infinite;
}
.gx-chaos-winner-confetti i:nth-child(3n){background:linear-gradient(#4de1b0,#57a2ff)}
.gx-chaos-winner-confetti i:nth-child(4n){background:linear-gradient(#ff718f,#ffd65f)}
@keyframes gxChaosWinnerPop{
    from{opacity:0;transform:translateY(30px) scale(.72)}
    60%{opacity:1;transform:translateY(-5px) scale(1.04)}
    to{transform:translateY(0) scale(1)}
}
@keyframes gxChaosWinnerCrown{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-6px) rotate(3deg)}}
@keyframes gxChaosConfettiFall{
    from{transform:translateY(-30px) rotate(var(--r));opacity:0}
    10%{opacity:1}
    to{transform:translateY(108vh) rotate(calc(var(--r) + 540deg));opacity:.8}
}

/* Defense turn */
.gx-chaos-pro-pending[data-pending-type="defense"]{
    width:min(760px,92%)!important;
    bottom:74px!important;
    z-index:25!important;
}
.gx-chaos-defense-card{
    border-color:rgba(80,151,255,.24)!important;
    background:
      radial-gradient(circle at 15% 0,rgba(53,124,225,.14),transparent 34%),
      radial-gradient(circle at 90% 100%,rgba(103,72,197,.11),transparent 36%),
      rgba(5,10,20,.97)!important;
}
.gx-chaos-defense-versus{
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr 110px 1fr;
    gap:12px;
    align-items:center;
}
.gx-chaos-defense-versus .fighter{min-width:0;display:grid;justify-items:center;text-align:center}
.gx-chaos-defense-versus .fighter>span{
    width:58px;height:58px;
    display:grid;place-items:center;
    border-radius:50%;
    color:#06101a;
    background:radial-gradient(circle at 35% 25%,#fff 0 6%,var(--token) 7% 62%,color-mix(in srgb,var(--token) 48%,#02050a) 100%);
    border:2px solid color-mix(in srgb,var(--token) 75%,#fff);
    box-shadow:0 0 20px color-mix(in srgb,var(--token) 25%,transparent);
    font-size:19px;
}
.gx-chaos-defense-versus .fighter small{margin-top:5px;color:#647792;font-size:7px;font-weight:900}
.gx-chaos-defense-versus .fighter b{
    max-width:170px;margin-top:2px;color:#edf4ff;font-size:12px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gx-chaos-defense-versus .attack{display:grid;justify-items:center;color:#ff728e}
.gx-chaos-defense-versus .attack i{
    width:52px;height:52px;
    display:grid;place-items:center;
    border-radius:50%;
    background:rgba(197,56,90,.11);
    border:1px solid rgba(228,82,113,.15);
    font-size:21px;
}
.gx-chaos-defense-versus .attack b{margin-top:4px;font-size:9px}
.gx-chaos-defense-options{
    margin-top:15px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}
.gx-chaos-defense-options button{
    min-height:92px;
    padding:10px 8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border-radius:13px;
    color:#a8b7ce;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(105,137,197,.10);
    cursor:pointer;
    transition:transform .15s ease,filter .15s ease;
}
.gx-chaos-defense-options button:hover{transform:translateY(-3px);filter:brightness(1.15)}
.gx-chaos-defense-options button i{font-size:21px}
.gx-chaos-defense-options button b{color:#edf3ff;font-size:12px}
.gx-chaos-defense-options button span{color:#73829b;font-size:8px;line-height:1.35}
.gx-chaos-defense-options .guard i{color:#68a6ff}
.gx-chaos-defense-options .dodge i{color:#56d9b0}
.gx-chaos-defense-options .counter i{color:#ffb55e}
.gx-chaos-defense-options .shield{border-color:rgba(72,215,230,.20);background:rgba(41,155,180,.07)}
.gx-chaos-defense-options .shield i{color:#6fe4f3}

.gx-chaos-combat-impact .defense-result{
    min-height:27px;
    margin-top:7px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:999px;
    color:#9fc9ff;
    background:rgba(48,102,181,.12);
    border:1px solid rgba(70,127,211,.15);
    font-size:9px;
}
.gx-chaos-combat-impact em.counter{color:#ffb75f!important}

/* Persistent status FX */
.gx-chaos-player-status-icons{
    min-height:18px;
    margin-top:5px;
    display:flex;
    align-items:center;
    gap:4px;
}
.gx-chaos-player-status-icons i{
    width:18px;height:18px;
    display:grid;place-items:center;
    border-radius:6px;
    font-size:8px;
    border:1px solid rgba(255,255,255,.07);
}
.gx-chaos-player-status-icons .shock{color:#ffe064;background:rgba(205,165,30,.10)}
.gx-chaos-player-status-icons .drunk{color:#d393ff;background:rgba(141,61,183,.10)}
.gx-chaos-player-status-icons .bleed{color:#ff7187;background:rgba(190,43,70,.10)}
.gx-chaos-player-status-icons .slow{color:#8bb3ff;background:rgba(58,98,183,.10)}
.gx-chaos-player-status-icons .shield{color:#66e3ee;background:rgba(42,157,174,.10)}

.gx-chaos-game-player.status-shock,
.gx-chaos-board-token.status-shock{
    animation:gxChaosShockJolt .62s steps(2,end) infinite!important;
}
.gx-chaos-game-player.status-shock::after{
    content:"⚡";
    position:absolute;top:-8px;right:4px;z-index:15;
    color:#ffe05e;font-size:18px;
    filter:drop-shadow(0 0 10px rgba(255,214,57,.68));
    animation:gxChaosShockBolt .48s ease-in-out infinite alternate;
}
.gx-chaos-board-token.status-shock::after{
    content:"⚡";
    position:absolute;top:-12px;right:-6px;
    color:#ffe05e;font-size:13px;
    filter:drop-shadow(0 0 8px rgba(255,216,70,.7));
}
@keyframes gxChaosShockJolt{
    0%,100%{filter:none;transform:translateX(0)}
    35%{filter:brightness(1.5) saturate(1.4);transform:translateX(-1px)}
    60%{transform:translateX(2px)}
}
@keyframes gxChaosShockBolt{
    from{opacity:.35;transform:scale(.86) rotate(-8deg)}
    to{opacity:1;transform:scale(1.15) rotate(8deg)}
}

.gx-chaos-game-player.status-drunk{animation:gxChaosDrunkCard 2s ease-in-out infinite!important}
.gx-chaos-board-token.status-drunk{animation:gxChaosDrunkToken 1.4s ease-in-out infinite!important}
.gx-chaos-game-player.status-drunk::after{
    content:"✦  🍷  ✦";
    position:absolute;top:-12px;left:50%;z-index:15;
    color:#d38cff;font-size:10px;white-space:nowrap;
    filter:drop-shadow(0 0 8px rgba(192,102,255,.45));
    animation:gxChaosDrunkBubbles 1.8s ease-in-out infinite;
}
@keyframes gxChaosDrunkCard{
    0%,100%{transform:rotate(0)}
    35%{transform:rotate(-.55deg)}
    70%{transform:rotate(.55deg)}
}
@keyframes gxChaosDrunkToken{
    0%,100%{transform:translateY(0) rotate(0)}
    35%{transform:translateY(-2px) rotate(-10deg)}
    70%{transform:translateY(1px) rotate(10deg)}
}
@keyframes gxChaosDrunkBubbles{
    0%,100%{opacity:.45;transform:translate(-50%,4px)}
    50%{opacity:1;transform:translate(-50%,-5px)}
}

.gx-chaos-game-player.status-shield,
.gx-chaos-board-token.status-shield{
    box-shadow:0 0 0 2px rgba(74,215,233,.22),0 0 22px rgba(62,195,221,.18)!important;
}
.gx-chaos-board-token.status-shield::before{
    content:"";
    position:absolute;inset:-6px;
    border-radius:50%;
    border:1px solid rgba(86,230,240,.55);
    box-shadow:0 0 12px rgba(66,209,225,.25);
    animation:gxChaosShieldRing 1.4s linear infinite;
}
@keyframes gxChaosShieldRing{
    from{transform:scale(.9);opacity:.45}
    50%{transform:scale(1.16);opacity:1}
    to{transform:scale(.9);opacity:.45}
}
.gx-chaos-game-player.status-bleed{box-shadow:0 0 18px rgba(218,49,77,.16)!important}
.gx-chaos-board-token.status-bleed{filter:drop-shadow(0 0 8px rgba(236,58,85,.55))}

body.gx-chaos-player-shock .gx-chaos-pro-board-frame{
    animation:gxChaosLocalShock .72s steps(2,end) infinite!important;
}
body.gx-chaos-player-shock::before{
    content:"";
    position:fixed;inset:0;z-index:9990;pointer-events:none;
    box-shadow:inset 0 0 80px rgba(255,218,56,.16);
    animation:gxChaosShockScreen .8s ease-in-out infinite alternate;
}
body.gx-chaos-player-bleed::before{
    content:"";
    position:fixed;inset:0;z-index:9989;pointer-events:none;
    box-shadow:inset 0 0 70px rgba(219,45,73,.10);
}
body.gx-chaos-critical-hp .gx-chaos-my-status-panel{
    border-color:rgba(255,75,103,.35)!important;
    box-shadow:0 0 28px rgba(225,43,73,.13)!important;
}
@keyframes gxChaosLocalShock{0%,100%{filter:none}50%{filter:brightness(1.08) saturate(1.18)}}
@keyframes gxChaosShockScreen{from{opacity:.18}to{opacity:.72}}

.gx-chaos-effect-list .shock{
    color:#ffe06b!important;
    background:rgba(195,151,24,.09)!important;
    border-color:rgba(225,184,55,.12)!important;
}

.gx-chaos-last-notice[data-kind="winner"]{
    border-color:rgba(246,202,75,.26)!important;
    background:rgba(123,86,19,.13)!important;
}
.gx-chaos-last-notice[data-kind="winner"] .gx-chaos-last-notice-icon{color:#ffd55a!important}

/* Responsive */
@media(max-width:720px){
    .gx-chaos-defense-options{grid-template-columns:1fr 1fr}
    .gx-chaos-defense-versus{grid-template-columns:1fr 72px 1fr}
    .gx-chaos-pro-pending[data-pending-type="defense"]{width:88%!important;max-width:540px!important}
    .gx-chaos-winner-card{min-height:330px;padding:26px 18px}
    .gx-chaos-winner-card h3{font-size:48px}
    .gx-chaos-winner-card>strong{font-size:25px}
}
@media(max-width:430px){
    .gx-chaos-defense-options{grid-template-columns:1fr;max-height:290px;overflow:auto}
    .gx-chaos-defense-versus{grid-template-columns:1fr 55px 1fr}
    .gx-chaos-defense-versus .fighter>span{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){
    .gx-chaos-winner-card,
    .gx-chaos-winner-card .crown,
    .gx-chaos-winner-confetti i,
    .gx-chaos-game-player.status-shock,
    .gx-chaos-board-token.status-shock,
    .gx-chaos-game-player.status-drunk,
    .gx-chaos-board-token.status-drunk,
    .gx-chaos-board-token.status-shield::before,
    body.gx-chaos-player-shock .gx-chaos-pro-board-frame,
    body.gx-chaos-player-shock::before{
        animation:none!important;
    }
}


/* =====================================================================
   GX V52 — CHAOS ROOM MANAGEMENT + REAL PROFILE
   ===================================================================== */

/* Actual account avatar instead of generic astronaut icon. */
.gx-chaos-game-player>.token.profile-token{
    overflow:hidden!important;
    padding:0!important;
    background:#08111f!important;
}
.gx-chaos-game-player>.token.profile-token img{
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:cover!important;
    border-radius:inherit!important;
}
.gx-chaos-game-player>.token.bot-token{
    color:#10131c!important;
}
.gx-chaos-player-handle{
    margin-left:5px;
    color:#667a9b!important;
    font-size:7px!important;
    font-weight:700!important;
}

.gx-chaos-room-player-actions{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-left:3px;
}
.gx-chaos-room-player-actions button{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:8px;
    color:#8092b1;
    background:rgba(65,93,143,.08);
    border:1px solid rgba(100,132,191,.10);
    cursor:pointer;
    transition:transform .14s ease,filter .14s ease,border-color .14s ease;
}
.gx-chaos-room-player-actions button:hover{
    transform:translateY(-1px);
    filter:brightness(1.18);
}
.gx-chaos-room-player-actions button.profile:hover{
    color:#7ac7ff;
    border-color:rgba(91,166,241,.25);
}
.gx-chaos-room-player-actions button.kick{
    color:#ff8397;
    background:rgba(177,47,70,.08);
    border-color:rgba(222,76,102,.12);
}
.gx-chaos-room-player-actions button.kick:hover{
    border-color:rgba(244,83,112,.30);
}

/* Actual profile picture on board pawn too. */
.gx-chaos-board-token>span{
    overflow:hidden!important;
}
.gx-chaos-board-token>span img{
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:cover!important;
    border-radius:50%!important;
}

/* Defense chance is explicit so nobody reads Guard as a full block. */
.gx-chaos-defense-options button span .chance,
.gx-chaos-defense-options button span .fail{
    display:inline!important;
    font-size:9px!important;
    font-weight:1000!important;
}
.gx-chaos-defense-options button span .chance{color:#67dfb0!important}
.gx-chaos-defense-options button span .fail{color:#ff8196!important}
.gx-chaos-defense-options .guard{
    border-color:rgba(85,151,244,.18)!important;
}
.gx-chaos-defense-options .dodge,
.gx-chaos-defense-options .counter{
    position:relative;
    overflow:hidden;
}
.gx-chaos-defense-options .dodge::after,
.gx-chaos-defense-options .counter::after{
    position:absolute;
    right:6px;
    top:6px;
    min-width:34px;
    height:19px;
    display:grid;
    place-items:center;
    border-radius:999px;
    font-size:7px;
    font-weight:1000;
    letter-spacing:.04em;
}
.gx-chaos-defense-options .dodge::after{
    content:'45%';
    color:#62dfb5;
    background:rgba(43,154,115,.11);
    border:1px solid rgba(67,195,149,.12);
}
.gx-chaos-defense-options .counter::after{
    content:'30%';
    color:#ffc36f;
    background:rgba(183,118,31,.11);
    border:1px solid rgba(221,146,44,.12);
}

/* Player cards have one more action column in V52. */
.gx-chaos-game-player{
    grid-template-columns:auto auto minmax(0,1fr) auto auto!important;
}

@media(max-width:720px){
    .gx-chaos-room-player-actions{
        flex-direction:row;
    }
    .gx-chaos-player-handle{
        display:none;
    }
}


/* =====================================================================
   GX V53 — DYNAMIC ECONOMY + MARKETPLACE PRICE FIX
   ===================================================================== */

/* Fix "buttons do not click" feeling:
   all three price cards are actual buttons and form controls stay above
   any legacy decorative layers. */
.gx-market-sell-form,
.gx-market-sell-items{
    position:relative!important;
    z-index:3!important;
    pointer-events:auto!important;
}
.gx-market-sell-form::before,
.gx-market-sell-form::after,
.gx-market-sell-items::before,
.gx-market-sell-items::after{
    pointer-events:none!important;
}
.gx-market-sell-form button,
.gx-market-sell-form input,
.gx-market-sell-form select,
.gx-market-sell-items button{
    position:relative!important;
    z-index:4!important;
    pointer-events:auto!important;
}
.gx-market-price-presets>button{
    cursor:pointer!important;
    user-select:none;
    color:#a9bdf3!important;
    transition:transform .14s ease,border-color .14s ease,background .14s ease!important;
}
.gx-market-price-presets>button:hover{
    transform:translateY(-2px);
    border-color:rgba(91,142,244,.28)!important;
    background:rgba(61,105,200,.10)!important;
}
.gx-market-price-presets>button:first-child{
    color:#73d9b1!important;
    border-color:rgba(72,190,139,.12)!important;
}
.gx-market-price-presets>button:nth-child(3){
    color:#d1a7ff!important;
}

.gx-market-floating-price-info{
    min-height:42px;
    margin-top:8px;
    padding:8px 10px;
    display:grid;
    grid-template-columns:24px 1fr;
    gap:7px;
    align-items:center;
    border-radius:10px;
    color:#7689aa;
    background:rgba(61,99,176,.055);
    border:1px solid rgba(79,118,198,.09);
    font-size:9px;
    line-height:1.45;
}
.gx-market-floating-price-info>i{
    width:24px;height:24px;
    display:grid;place-items:center;
    border-radius:7px;
    color:#66c8ff;
    background:rgba(66,133,211,.09);
}
.gx-market-floating-price-info b{color:#b5caf1}

.gx-market-live-price-note{
    border-color:rgba(71,143,224,.11)!important;
    background:
      radial-gradient(circle at 0 50%,rgba(49,133,202,.07),transparent 38%),
      rgba(255,255,255,.012)!important;
}
.gx-market-live-price-note strong{color:#76dfb2}

.gx-market-price-row .discount.premium{
    color:#c8a6f0!important;
    background:rgba(124,72,173,.08)!important;
}
.gx-market-price-row .discount.market-floor{
    color:#69d8a9!important;
    background:rgba(47,145,101,.08)!important;
}

/* ITEM SHOP — live market strip */
.gx-economy-live-strip{
    min-height:46px;
    padding:8px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:#88a0c5;
    background:
      linear-gradient(90deg,rgba(45,109,193,.07),rgba(97,64,175,.045));
    border-bottom:1px solid rgba(92,128,190,.09);
}
.gx-economy-live-strip>span{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    font-size:10px;
}
.gx-economy-live-strip>span>i{color:#65cfff}
.gx-economy-live-strip b{color:#b5cff8}
.gx-economy-live-strip strong{color:#66deb0}
.gx-economy-live-strip em{
    flex:0 0 auto;
    padding:5px 8px;
    border-radius:999px;
    color:#8193b0;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.05);
    font-size:8px;
    font-style:normal;
}
.gx-economy-live-strip.promo{
    background:
      radial-gradient(circle at 20% 50%,rgba(42,170,111,.09),transparent 35%),
      linear-gradient(90deg,rgba(45,109,193,.06),rgba(97,64,175,.04));
}

.gx-store-item-meta .gx-dynamic-price{
    display:inline-flex!important;
    align-items:center;
    gap:5px;
}
.gx-store-item-meta .gx-dynamic-price b{
    color:#f0c959;
    font-size:1em;
}
.gx-store-item-meta .gx-dynamic-price s{
    color:#69768a;
    font-size:.75em;
    text-decoration-thickness:1px;
}
.gx-store-item-meta .gx-dynamic-price em{
    width:17px;height:17px;
    display:grid;place-items:center;
    border-radius:5px;
    font-size:7px;
    font-style:normal;
}
.gx-store-item-meta .gx-dynamic-price.up em{
    color:#ff8a95;
    background:rgba(181,55,73,.08);
}
.gx-store-item-meta .gx-dynamic-price.down em{
    color:#62d9a7;
    background:rgba(40,153,103,.08);
}
.gx-store-item-meta .gx-dynamic-price.flat em{
    color:#8da0be;
    background:rgba(89,111,151,.08);
}
.gx-shop-promo-badge{
    min-height:24px;
    padding:0 7px;
    display:inline-flex!important;
    align-items:center;
    gap:4px;
    border-radius:999px;
    color:#69dfac!important;
    background:rgba(39,151,99,.08)!important;
    border:1px solid rgba(49,178,116,.10)!important;
    font-size:7.5px!important;
    font-weight:900;
}

/* ADMIN button */
.gx-admin-hero-actions{
    display:flex;
    align-items:center;
    gap:8px;
}
.gx-admin-economy-btn{
    min-height:44px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:12px;
    color:#b6c9ec;
    background:linear-gradient(135deg,rgba(43,92,177,.18),rgba(104,64,179,.14));
    border:1px solid rgba(88,129,211,.15);
    font-family:'Kanit',sans-serif;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}
.gx-admin-economy-btn i{color:#65cfff}

/* ECONOMY ADMIN */
.gx-economy-admin-modal{
    width:min(920px,calc(100vw - 24px))!important;
    max-width:920px!important;
    max-height:calc(100dvh - 24px)!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 85% -10%,rgba(99,65,191,.13),transparent 38%),
      linear-gradient(180deg,#101a2b,#080f1c)!important;
}
.gx-economy-admin-head{
    min-height:86px;
    padding:14px 17px;
    display:grid;
    grid-template-columns:1fr 40px;
    gap:12px;
    align-items:center;
    border-bottom:1px solid rgba(98,131,192,.11);
}
.gx-economy-admin-title{
    min-width:0;
    display:grid;
    grid-template-columns:50px 1fr;
    gap:11px;
    align-items:center;
}
.gx-economy-admin-title>.icon{
    width:50px;height:50px;
    display:grid;place-items:center;
    border-radius:14px;
    color:#68d6ff;
    background:linear-gradient(145deg,rgba(47,120,207,.16),rgba(103,69,188,.12));
    border:1px solid rgba(83,141,225,.16);
    font-size:18px;
}
.gx-economy-admin-title small{
    display:block;
    color:#6287bd;
    font-size:8px;
    font-weight:900;
    letter-spacing:.13em;
}
.gx-economy-admin-title h3{
    margin:2px 0 0;
    color:#edf4ff;
    font-size:20px;
}
.gx-economy-admin-title p{
    margin:2px 0 0;
    color:#74849f;
    font-size:9px;
}
.gx-economy-admin-head>.close{
    width:40px;height:40px;
    border-radius:11px;
    color:#8392aa;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.05);
    cursor:pointer;
}
.gx-economy-admin-body{
    max-height:calc(100dvh - 112px);
    overflow:auto;
    padding:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    scrollbar-width:thin;
    scrollbar-color:#38517c transparent;
}
.gx-economy-admin-card{
    min-width:0;
    padding:14px;
    border-radius:16px;
    background:rgba(255,255,255,.018);
    border:1px solid rgba(97,130,190,.09);
}
.gx-economy-admin-card.preview{grid-column:1/-1}
.gx-economy-admin-card .section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}
.gx-economy-admin-card .section-head small{
    display:block;
    color:#5f7fad;
    font-size:8px;
    letter-spacing:.12em;
}
.gx-economy-admin-card .section-head strong{
    display:block;
    margin-top:2px;
    color:#e5ecf8;
    font-size:14px;
}
.gx-economy-admin-card label{
    display:block;
    margin-top:9px;
}
.gx-economy-admin-card label>span{
    display:block;
    margin-bottom:5px;
    color:#7b8ca6;
    font-size:9px;
}
.gx-economy-admin-card input,
.gx-economy-admin-card select{
    width:100%;
    height:43px;
    padding:0 10px;
    border-radius:10px!important;
    color:#e5ebf5!important;
    background:#070e1a!important;
    border:1px solid rgba(92,126,188,.12)!important;
    font-family:'Kanit',sans-serif;
    font-size:11px!important;
}
.gx-economy-admin-grid.two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}
.gx-economy-admin-card .suffix-input{position:relative}
.gx-economy-admin-card .suffix-input input{padding-right:35px}
.gx-economy-admin-card .suffix-input b{
    position:absolute;
    right:11px;top:50%;
    transform:translateY(-50%);
    color:#7587a4;
    font-size:10px;
}
.gx-economy-switch{
    margin:0!important;
    width:46px;height:26px;
    position:relative;
}
.gx-economy-switch input{display:none}
.gx-economy-switch span{
    position:absolute!important;
    inset:0!important;
    margin:0!important;
    border-radius:999px;
    background:#182234;
    border:1px solid rgba(99,127,180,.12);
    cursor:pointer;
}
.gx-economy-switch span::after{
    content:"";
    position:absolute;
    width:20px;height:20px;
    left:2px;top:2px;
    border-radius:50%;
    background:#7b8da8;
    transition:left .18s ease,background .18s ease;
}
.gx-economy-switch input:checked+span{
    background:rgba(47,137,218,.18);
    border-color:rgba(70,151,232,.25);
}
.gx-economy-switch input:checked+span::after{
    left:22px;
    background:#63d4ff;
}
.gx-economy-save-config,
.gx-economy-promo-actions button{
    min-height:43px;
    border-radius:10px;
    font-family:'Kanit',sans-serif;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}
.gx-economy-save-config{
    width:100%;
    margin-top:12px;
    color:#eaf3ff;
    background:linear-gradient(135deg,#326fdb,#6354d5);
    border:0;
}
.gx-economy-promo-actions{
    margin-top:12px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.gx-economy-promo-actions .start{
    color:#eaf7f0;
    background:linear-gradient(135deg,#247e63,#2b9a71);
    border:0;
}
.gx-economy-promo-actions .stop{
    color:#e5b1b8;
    background:rgba(144,45,61,.10);
    border:1px solid rgba(184,62,81,.13);
}
.promo-state{
    padding:5px 8px;
    border-radius:999px;
    color:#7d8da4;
    background:rgba(255,255,255,.025);
    font-size:8px;
}
.promo-state.active{
    color:#6ce0ac;
    background:rgba(40,151,98,.08);
    border:1px solid rgba(49,175,113,.10);
}
.gx-economy-admin-price-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}
.gx-economy-admin-price-grid article{
    min-height:78px;
    padding:9px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
    border-radius:12px;
    background:rgba(5,12,23,.60);
    border:1px solid rgba(90,124,188,.08);
}
.gx-economy-admin-price-grid .icon{
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:10px;
    color:#9dbbff;
    background:rgba(58,95,174,.10);
}
.gx-economy-admin-price-grid small{display:block;color:#5f7290;font-size:7px}
.gx-economy-admin-price-grid strong{display:block;margin-top:1px;color:#dce5f3;font-size:10px}
.gx-economy-admin-price-grid p{margin:2px 0 0;color:#687a96;font-size:7.5px}
.gx-economy-admin-price-grid article>b{
    color:#f0c85a;
    font-size:12px;
}
.gx-economy-admin-price-grid article>b.up::after{content:" ↑";color:#ef7484}
.gx-economy-admin-price-grid article>b.down::after{content:" ↓";color:#5ed5a2}
.gx-economy-admin-price-grid article>b.flat::after{content:" —";color:#7e8fa9}

@media(max-width:900px){
    .gx-economy-admin-body{grid-template-columns:1fr}
    .gx-economy-admin-card.preview{grid-column:auto}
    .gx-economy-admin-price-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
    .gx-economy-live-strip{
        padding:8px 12px;
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }
    .gx-admin-hero-actions{
        width:100%;
        flex-direction:column;
    }
    .gx-admin-economy-btn,
    .gx-admin-refresh-btn{
        width:100%;
        justify-content:center;
    }
    .gx-economy-admin-modal{
        width:100vw!important;
        height:100dvh!important;
        max-width:100vw!important;
        max-height:100dvh!important;
        border-radius:0!important;
    }
    .gx-economy-admin-head{
        padding-top:calc(10px + env(safe-area-inset-top));
    }
    .gx-economy-admin-body{
        max-height:calc(100dvh - 90px);
        padding-bottom:calc(16px + env(safe-area-inset-bottom));
    }
    .gx-economy-admin-grid.two{grid-template-columns:1fr}
    .gx-economy-admin-price-grid{grid-template-columns:1fr}
    .gx-economy-admin-card input,
    .gx-economy-admin-card select{font-size:16px!important}
}


/* =====================================================================
   GX V54 — DEVICE MODE / MOBILE+iPAD / LIGHT MODE / ADMIN SHOP CONTROL
   ===================================================================== */

:root{
    --gx-vw-px:100vw;
    --gx-vh-px:100dvh;
}

/* Header controls */
.gx-header-display-btn,
.gx-header-theme-btn{
    min-height:38px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:10px;
    color:#aebbd0;
    background:#0b1423;
    border:1px solid rgba(102,132,184,.14);
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:900;
    cursor:pointer;
    transition:transform .14s ease,background .14s ease,border-color .14s ease;
}
.gx-header-display-btn:hover,
.gx-header-theme-btn:hover{
    transform:translateY(-1px);
    background:#111c2f;
    border-color:rgba(93,145,231,.23);
}
.gx-header-display-btn i{color:#6ec8ff}
.gx-header-theme-btn i{color:#ffd468}

/* ---------------------------------------------------------------------
   DEVICE CHOOSER
   --------------------------------------------------------------------- */
.gx-display-mode-overlay{
    z-index:26000!important;
    padding:18px;
    background:rgba(3,7,14,.86)!important;
    backdrop-filter:blur(16px);
}
.gx-display-mode-modal{
    width:min(720px,calc(100vw - 24px))!important;
    max-width:720px!important;
    padding:22px!important;
    border-radius:24px!important;
    background:
      radial-gradient(circle at 90% 0,rgba(96,69,193,.14),transparent 35%),
      linear-gradient(180deg,#121c2e,#09111f)!important;
    border:1px solid rgba(96,132,199,.17)!important;
    box-shadow:0 38px 120px rgba(0,0,0,.58)!important;
}
.gx-display-mode-head{
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:13px;
    align-items:center;
}
.gx-display-mode-head>.icon{
    width:58px;height:58px;
    display:grid;place-items:center;
    border-radius:16px;
    color:#74cfff;
    background:linear-gradient(145deg,rgba(51,121,204,.16),rgba(103,68,187,.13));
    border:1px solid rgba(88,143,224,.15);
    font-size:21px;
}
.gx-display-mode-head small{
    display:block;
    color:#5d82b5;
    font-size:8px;
    font-weight:1000;
    letter-spacing:.15em;
}
.gx-display-mode-head h2{
    margin:2px 0 0;
    color:#f1f5fb;
    font-size:22px;
}
.gx-display-mode-head p{
    margin:4px 0 0;
    color:#7d8ca5;
    font-size:10px;
}
.gx-display-mode-grid{
    margin-top:18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.gx-display-mode-grid>button{
    min-height:178px;
    padding:15px;
    position:relative;
    display:grid;
    grid-template-rows:68px auto;
    gap:10px;
    text-align:left;
    border-radius:17px;
    color:#9eacc2;
    background:rgba(255,255,255,.021);
    border:1px solid rgba(94,126,186,.10);
    cursor:pointer;
    font-family:'Kanit',sans-serif;
    transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.gx-display-mode-grid>button:hover{
    transform:translateY(-3px);
    border-color:rgba(77,139,234,.25);
    background:rgba(60,103,187,.07);
}
.gx-display-mode-grid>button.selected{
    border-color:rgba(103,87,232,.42);
    background:
      radial-gradient(circle at 10% 0,rgba(71,133,230,.13),transparent 45%),
      rgba(92,62,171,.08);
    box-shadow:0 0 0 1px rgba(105,84,234,.09),0 18px 38px rgba(37,46,97,.18);
}
.gx-display-mode-grid .art{
    height:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:13px;
    color:#85bcff;
    background:rgba(60,99,173,.08);
    font-size:28px;
}
.gx-display-mode-grid .art.mobile{color:#c494ff}
.gx-display-mode-grid .copy b{
    display:block;
    color:#eaf0fa;
    font-size:16px;
}
.gx-display-mode-grid .copy small{
    display:block;
    margin-top:4px;
    color:#72829a;
    font-size:9px;
    line-height:1.5;
}
.gx-display-mode-grid .check{
    position:absolute;
    top:12px;right:12px;
    color:#665f85;
    font-size:14px;
}
.gx-display-mode-grid>button.selected .check{color:#66deb0}
.gx-display-mode-live{
    min-height:52px;
    margin-top:12px;
    padding:0 12px;
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:9px;
    align-items:center;
    border-radius:12px;
    color:#7d8ca3;
    background:#08111e;
    border:1px solid rgba(82,118,185,.09);
    font-size:9px;
}
.gx-display-mode-live strong{color:#d9e4f5;font-size:11px}
.gx-display-mode-live em{
    padding:5px 8px;
    border-radius:999px;
    color:#79c9ff;
    background:rgba(54,125,189,.08);
    font-style:normal;
    font-size:8px;
}
.gx-display-mode-note{
    margin-top:10px;
    display:grid;
    grid-template-columns:25px 1fr;
    gap:7px;
    color:#7787a0;
    font-size:9px;
    line-height:1.5;
}
.gx-display-mode-note>i{
    width:25px;height:25px;
    display:grid;place-items:center;
    color:#7da9e9;
}
.gx-display-mode-close{
    width:100%;
    min-height:44px;
    margin-top:13px;
    border-radius:11px;
    color:#dce7f8;
    background:rgba(62,95,161,.10);
    border:1px solid rgba(80,120,197,.13);
    font-family:'Kanit',sans-serif;
    font-weight:900;
    cursor:pointer;
}

/* ---------------------------------------------------------------------
   MOBILE / IPAD MODE — uses the real visual viewport, not a desktop canvas.
   --------------------------------------------------------------------- */
body.gx-device-mobile{
    width:100%!important;
    max-width:100%!important;
    min-height:var(--gx-vh-px)!important;
    overflow-x:hidden!important;
    -webkit-text-size-adjust:100%;
    touch-action:manipulation;
}
body.gx-device-mobile .auth-screen.active,
body.gx-device-mobile .gx-system-page,
body.gx-device-mobile .gx-polished-screen{
    width:100%!important;
    max-width:100%!important;
    min-height:var(--gx-vh-px)!important;
}
body.gx-device-mobile .max-w-6xl,
body.gx-device-mobile .max-w-7xl{
    width:100%!important;
    max-width:100%!important;
}
body.gx-device-mobile input,
body.gx-device-mobile select,
body.gx-device-mobile textarea{
    font-size:16px!important;
}
body.gx-device-mobile button,
body.gx-device-mobile [role="button"]{
    min-height:42px;
}
body.gx-device-mobile .modal-overlay{
    width:var(--gx-vw-px)!important;
    height:var(--gx-vh-px)!important;
    min-height:var(--gx-vh-px)!important;
    padding:
      max(7px,env(safe-area-inset-top))
      max(7px,env(safe-area-inset-right))
      max(7px,env(safe-area-inset-bottom))
      max(7px,env(safe-area-inset-left))!important;
}
body.gx-device-mobile .gx-item-shop-modal,
body.gx-device-mobile .gx-inventory-modal,
body.gx-device-mobile .gx-market-modal,
body.gx-device-mobile .gx-economy-admin-modal{
    width:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    height:100%!important;
    border-radius:16px!important;
}
body.gx-device-mobile .gx-item-shop-body,
body.gx-device-mobile .gx-market-body,
body.gx-device-mobile .gx-economy-admin-body{
    max-height:none!important;
    flex:1 1 auto!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
body.gx-device-mobile .gx-item-shop-modal,
body.gx-device-mobile .gx-market-modal,
body.gx-device-mobile .gx-economy-admin-modal{
    display:flex!important;
    flex-direction:column!important;
}

/* CHAOS board fits the selected mobile/iPad viewport. */
body.gx-device-mobile .gx-chaos-pro-ui .gx-chaos-game-shell{
    width:100%!important;
    max-width:100%!important;
    padding-left:max(5px,env(safe-area-inset-left))!important;
    padding-right:max(5px,env(safe-area-inset-right))!important;
}
body.gx-device-mobile .gx-chaos-pro-layout{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:8px!important;
}
body.gx-device-mobile .gx-chaos-pro-stage{
    order:1!important;
    width:100%!important;
    overflow:hidden!important;
}
body.gx-device-mobile .gx-chaos-pro-left{order:2!important;width:100%!important}
body.gx-device-mobile .gx-chaos-pro-right{order:3!important;width:100%!important}
body.gx-device-mobile .gx-chaos-pro-board-frame{
    width:min(100%,760px)!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:5px!important;
}
body.gx-device-mobile .gx-chaos-pro-board-grid{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1/1!important;
    gap:3px!important;
}
body.gx-device-mobile .gx-chaos-pro-board-grid .gx-chaos-board-cell{
    min-width:0!important;
    padding:3px 2px!important;
    overflow:hidden!important;
}
body.gx-device-mobile .gx-chaos-pro-board-grid .gx-chaos-board-cell>strong{
    font-size:clamp(5.5px,1.55vw,8.5px)!important;
    line-height:1.08!important;
}
body.gx-device-mobile .gx-chaos-pro-board-grid .gx-chaos-board-cell>small{
    font-size:clamp(4.5px,1.2vw,6.8px)!important;
}
body.gx-device-mobile .gx-chaos-pro-board-grid .gx-chaos-board-cell>span{
    font-size:clamp(8px,2.1vw,12px)!important;
}

/* iPad/tablet keeps player cards readable but still fits screen. */
body.gx-device-mobile.gx-device-tablet .gx-chaos-pro-left,
body.gx-device-mobile.gx-device-tablet .gx-chaos-pro-right{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-pro-left>*,
body.gx-device-mobile.gx-device-tablet .gx-chaos-pro-right>*{
    min-width:0!important;
}

/* Optimized Mobile FX — avoid iOS backdrop bugs and keep effects visible. */
body.gx-device-mobile .gx-chaos-combat-fx{
    position:fixed!important;
    inset:0!important;
    width:var(--gx-vw-px)!important;
    height:var(--gx-vh-px)!important;
    z-index:50000!important;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
}
body.gx-device-mobile .gx-chaos-combat-fx.is-active::before{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(2,5,12,.70)!important;
}
body.gx-device-mobile .gx-chaos-battle-intro-card,
body.gx-device-mobile .gx-chaos-combat-scene,
body.gx-device-mobile .gx-chaos-winner-card{
    max-width:calc(var(--gx-vw-px) - 22px)!important;
}
body.gx-device-mobile .gx-chaos-battle-intro-card{
    min-width:0!important;
    width:min(420px,calc(var(--gx-vw-px) - 22px))!important;
}
body.gx-device-mobile .gx-chaos-combat-scene{
    width:min(620px,calc(var(--gx-vw-px) - 18px))!important;
}
body.gx-device-mobile.gx-chaos-player-shock::after{
    content:"⚡";
    position:fixed;
    inset:0;
    z-index:49000;
    pointer-events:none;
    display:grid;
    place-items:center;
    color:rgba(255,226,80,.26);
    font-size:min(42vw,180px);
    text-shadow:0 0 45px rgba(255,211,52,.35);
    animation:gxV54MobileShock .58s steps(2,end) infinite;
}
body.gx-device-mobile.gx-chaos-player-drunk .gx-chaos-pro-board-frame{
    animation:gxV54MobileDrunk 1.6s ease-in-out infinite!important;
    transform-origin:50% 65%;
}
body.gx-device-mobile.gx-chaos-self-damaged::after{
    z-index:51000!important;
}
@keyframes gxV54MobileShock{
    0%,100%{opacity:.16;transform:scale(.92)}
    50%{opacity:.72;transform:scale(1.07)}
}
@keyframes gxV54MobileDrunk{
    0%,100%{transform:rotate(0deg) translateX(0)}
    33%{transform:rotate(-.35deg) translateX(-2px)}
    66%{transform:rotate(.35deg) translateX(2px)}
}

/* ---------------------------------------------------------------------
   GX ITEM SHOP ADMIN CONTROL
   --------------------------------------------------------------------- */
.gx-item-shop-admin-btn{
    min-height:42px;
    padding:0 11px;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius:11px;
    color:#c9b6ff;
    background:rgba(111,73,191,.10);
    border:1px solid rgba(154,107,229,.15);
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:900;
    cursor:pointer;
}
.gx-item-shop-admin-btn i{color:#a88cff}

.gx-economy-admin-card.item-price{
    border-color:rgba(82,139,225,.12);
    background:
      radial-gradient(circle at 0 0,rgba(51,115,204,.08),transparent 42%),
      rgba(255,255,255,.017);
}
.gx-economy-admin-badge{
    padding:5px 8px;
    border-radius:999px;
    color:#8ecbff;
    background:rgba(49,113,186,.08);
    border:1px solid rgba(70,136,210,.10);
    font-size:8px;
    font-weight:900;
}
.gx-economy-readonly-price{
    height:43px;
    padding:0 10px;
    display:flex;
    align-items:center;
    gap:7px;
    border-radius:10px;
    color:#a8b7cd;
    background:#090f19;
    border:1px solid rgba(91,124,183,.09);
    font-size:10px;
}
.gx-economy-readonly-price i{color:#e5bd58}
.gx-economy-base-preview{
    min-height:52px;
    margin-top:10px;
    padding:9px 10px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    border-radius:11px;
    color:#7486a1;
    background:#08111e;
    border:1px solid rgba(83,120,188,.09);
    font-size:9px;
}
.gx-economy-base-preview span{color:#7e93b4}
.gx-economy-base-preview b{color:#bccbea}
.gx-economy-base-preview strong{color:#efd06f}
.gx-economy-base-preview.override{
    border-color:rgba(108,79,205,.15);
    background:rgba(85,57,155,.055);
}
.gx-economy-base-actions{
    margin-top:9px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.gx-economy-base-actions button{
    min-height:42px;
    border-radius:10px;
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:900;
    cursor:pointer;
}
.gx-economy-base-actions .save{
    color:#edf6ff;
    background:linear-gradient(135deg,#326fd8,#6951d1);
    border:0;
}
.gx-economy-base-actions .reset{
    color:#99a9c0;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(93,125,184,.10);
}
.gx-economy-admin-price-actions{
    display:flex;
    align-items:center;
    gap:5px;
}
.gx-economy-admin-price-actions>b{
    color:#f0c85a;
    font-size:12px;
}
.gx-economy-admin-price-actions>button{
    width:28px;height:28px;
    display:grid;
    place-items:center;
    border-radius:8px;
    color:#83b7ff;
    background:rgba(52,105,179,.08);
    border:1px solid rgba(72,127,205,.10);
    cursor:pointer;
}

/* ---------------------------------------------------------------------
   TRUE LIGHT MODE
   --------------------------------------------------------------------- */
body.gx-theme-light{
    --bg-main:#edf4fb;
    --bg-card:#ffffff;
    --border-color:#cbd8e8;
    --text-white:#142033;
    background:#edf4fb!important;
    color:#172236!important;
    color-scheme:light;
}
body.gx-theme-light .game-header{
    background:rgba(247,251,255,.96)!important;
    border-color:#d6e0ec!important;
    box-shadow:0 8px 28px rgba(31,57,89,.08)!important;
}
body.gx-theme-light .gx-brand-home-copy strong,
body.gx-theme-light .gx-wallet-pill strong,
body.gx-theme-light .gx-hub-title,
body.gx-theme-light .gx-item-shop-title h3,
body.gx-theme-light .gx-inventory-head h3,
body.gx-theme-light .gx-market-title h2,
body.gx-theme-light .gx-chaos-pro-ui .gx-chaos-panel-head strong{
    color:#162238!important;
}
body.gx-theme-light .gx-brand-home-copy small,
body.gx-theme-light .gx-hub-subtitle,
body.gx-theme-light .gx-item-shop-title p{
    color:#64748b!important;
}
body.gx-theme-light .gx-header-display-btn,
body.gx-theme-light .gx-header-theme-btn,
body.gx-theme-light .gx-language-toggle,
body.gx-theme-light .gx-wallet-pill,
body.gx-theme-light #main-menu-button{
    background:#f7fbff!important;
    color:#52647c!important;
    border-color:#d5e0ed!important;
}
body.gx-theme-light .auth-screen,
body.gx-theme-light .gx-system-page,
body.gx-theme-light .gx-polished-screen,
body.gx-theme-light .gx-chaos-lobby-screen,
body.gx-theme-light .gx-chaos-game-screen{
    background:
      radial-gradient(circle at 10% 5%,rgba(69,140,236,.08),transparent 30%),
      #edf4fb!important;
    color:#172236!important;
}
body.gx-theme-light .glass-card,
body.gx-theme-light .gx-game-card,
body.gx-theme-light .gx-chaos-panel,
body.gx-theme-light .gx-chaos-pro-ui .gx-chaos-panel,
body.gx-theme-light .gx-chaos-pro-board-frame,
body.gx-theme-light .gx-item-shop-modal,
body.gx-theme-light .gx-inventory-modal,
body.gx-theme-light .gx-market-modal,
body.gx-theme-light .gx-economy-admin-modal,
body.gx-theme-light .gx-display-mode-modal,
body.gx-theme-light .gx-auth-card,
body.gx-theme-light .gx-auth-brand-panel,
body.gx-theme-light .gx-room-shell,
body.gx-theme-light .gx-word-match-shell{
    background:#ffffff!important;
    color:#172236!important;
    border-color:#d6e1ee!important;
    box-shadow:0 18px 52px rgba(34,65,99,.10)!important;
}
body.gx-theme-light .gx-item-shop-game-info,
body.gx-theme-light .gx-store-item,
body.gx-theme-light .gx-inventory-card,
body.gx-theme-light .gx-economy-admin-card,
body.gx-theme-light .gx-display-mode-grid>button,
body.gx-theme-light .gx-chaos-game-player,
body.gx-theme-light .gx-chaos-info-card{
    background:#f6f9fd!important;
    border-color:#d8e3ef!important;
}
body.gx-theme-light .gx-store-item-copy strong,
body.gx-theme-light .gx-item-shop-game-info strong,
body.gx-theme-light .gx-inventory-card-copy strong,
body.gx-theme-light .gx-display-mode-grid .copy b,
body.gx-theme-light .gx-economy-admin-card .section-head strong,
body.gx-theme-light .gx-chaos-game-player strong{
    color:#172236!important;
}
body.gx-theme-light .gx-store-item-copy p,
body.gx-theme-light .gx-item-shop-game-info p,
body.gx-theme-light .gx-inventory-card-copy p,
body.gx-theme-light .gx-display-mode-grid .copy small{
    color:#687a91!important;
}
body.gx-theme-light input,
body.gx-theme-light textarea,
body.gx-theme-light select,
body.gx-theme-light .game-input{
    color:#172236!important;
    background:#ffffff!important;
    border-color:#cfdceb!important;
}
body.gx-theme-light input::placeholder,
body.gx-theme-light textarea::placeholder{color:#93a3b8!important}
body.gx-theme-light .gx-item-shop-overlay,
body.gx-theme-light .gx-inventory-overlay,
body.gx-theme-light .gx-market-overlay,
body.gx-theme-light .gx-economy-admin-overlay,
body.gx-theme-light .gx-display-mode-overlay{
    background:rgba(191,207,225,.64)!important;
}
body.gx-theme-light .gx-chaos-pro-board-grid{
    background:#eaf1f8!important;
}
body.gx-theme-light .gx-chaos-board-cell{
    filter:saturate(.88) brightness(1.08);
}
body.gx-theme-light .gx-word-question-card,
body.gx-theme-light .gx-word-match-topbar,
body.gx-theme-light .gx-word-progress-wrap,
body.gx-theme-light .gx-word-meta-pill{
    background:#f6f9fd!important;
    border-color:#d9e3ef!important;
}
body.gx-theme-light .gx-word-question-card h3,
body.gx-theme-light .gx-word-match-brand h2,
body.gx-theme-light .gx-word-meta-pill strong{
    color:#152239!important;
}
body.gx-theme-light .gx-word-question-hint,
body.gx-theme-light .gx-word-match-brand p,
body.gx-theme-light .gx-word-meta-pill span{
    color:#64748b!important;
}

/* Light mode must stay readable on phone. */
body.gx-theme-light.gx-device-mobile{
    background:#eaf2fa!important;
}
body.gx-theme-light.gx-device-mobile .gx-chaos-combat-fx.is-active::before{
    background:rgba(29,43,61,.60)!important;
}

/* Responsive display chooser / shop header */
@media(max-width:720px){
    .gx-header-display-btn span,
    .gx-header-theme-btn span{display:none}
    .gx-header-display-btn,
    .gx-header-theme-btn{
        width:38px;
        padding:0;
    }
    .gx-display-mode-modal{
        width:100%!important;
        max-width:100%!important;
        max-height:100%!important;
        overflow:auto!important;
        border-radius:18px!important;
    }
    .gx-display-mode-grid{grid-template-columns:1fr}
    .gx-display-mode-grid>button{
        min-height:126px;
        grid-template-columns:70px 1fr;
        grid-template-rows:auto;
        align-items:center;
    }
    .gx-display-mode-grid .art{height:70px}
    .gx-display-mode-live{
        grid-template-columns:1fr auto;
    }
    .gx-display-mode-live em{grid-column:1/-1}
    .gx-item-shop-head{
        grid-template-columns:minmax(0,1fr) 42px!important;
    }
    .gx-item-shop-wallet{
        grid-column:1/2!important;
        grid-row:auto!important;
    }
    .gx-item-shop-admin-btn{
        grid-column:1/2;
        width:100%;
    }
    .gx-economy-base-actions{grid-template-columns:1fr}
}


/* =====================================================================
   GX V55 — REAL MOBILE / IPAD UI
   Selecting "มือถือ / iPad" now changes the interface itself,
   not merely the width of the desktop interface.
   ===================================================================== */

:root{
    --gx-mobile-header-h:54px;
    --gx-mobile-bottom-h:68px;
    --gx-mobile-sheet-height:100dvh;
}

/* Mobile-specific CHAOS lobby shell */
body.gx-device-mobile #chaos-lobby-screen{
    padding-top:var(--gx-mobile-header-h)!important;
    min-height:var(--gx-vh-px)!important;
    background:
      radial-gradient(circle at 50% -5%,rgba(115,69,215,.17),transparent 30%),
      linear-gradient(180deg,#080d18,#07101b)!important;
}
body.gx-device-mobile .gx-chaos-lobby-shell{
    width:100%!important;
    max-width:none!important;
    padding:
      10px
      max(12px,env(safe-area-inset-right))
      calc(var(--gx-mobile-bottom-h) + max(14px,env(safe-area-inset-bottom)))
      max(12px,env(safe-area-inset-left))!important;
}

/* Desktop hero becomes a compact mobile game header */
body.gx-device-mobile .gx-chaos-lobby-hero{
    min-height:auto!important;
    margin:0!important;
    padding:15px!important;
    display:block!important;
    border-radius:18px!important;
    background:
      radial-gradient(circle at 0 0,rgba(130,76,230,.16),transparent 40%),
      linear-gradient(145deg,#121b2e,#0c1422)!important;
    border:1px solid rgba(132,92,214,.18)!important;
}
body.gx-device-mobile .gx-chaos-lobby-hero-main{
    display:grid!important;
    grid-template-columns:54px minmax(0,1fr)!important;
    gap:11px!important;
    align-items:center!important;
}
body.gx-device-mobile .gx-chaos-lobby-logo{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    border-radius:15px!important;
    margin:0!important;
}
body.gx-device-mobile .gx-chaos-lobby-kicker{
    gap:5px!important;
    flex-wrap:wrap!important;
}
body.gx-device-mobile .gx-chaos-lobby-kicker>span{
    font-size:7px!important;
}
body.gx-device-mobile .gx-chaos-lobby-kicker>b{
    padding:3px 5px!important;
    font-size:6px!important;
}
body.gx-device-mobile .gx-chaos-lobby-hero h1{
    margin:3px 0 0!important;
    font-size:23px!important;
    line-height:1.05!important;
}
body.gx-device-mobile .gx-chaos-lobby-hero p{
    margin:5px 0 0!important;
    max-width:none!important;
    font-size:9px!important;
    line-height:1.55!important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
body.gx-device-mobile .gx-chaos-back-hub{
    display:none!important;
}

/* Hide desktop-only preview/status noise on phone */
body.gx-device-mobile.gx-device-phone .gx-chaos-dev-banner{
    display:none!important;
}
body.gx-device-mobile .gx-chaos-status-grid{
    margin-top:9px!important;
    display:flex!important;
    overflow-x:auto!important;
    gap:7px!important;
    padding:1px 0 4px!important;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
}
body.gx-device-mobile .gx-chaos-status-grid::-webkit-scrollbar{display:none}
body.gx-device-mobile .gx-chaos-status-grid>article{
    flex:0 0 165px!important;
    min-height:58px!important;
    padding:8px 10px!important;
    border-radius:13px!important;
    scroll-snap-align:start;
}
body.gx-device-mobile .gx-chaos-status-grid>article .icon{
    width:34px!important;
    height:34px!important;
}
body.gx-device-mobile .gx-chaos-status-grid>article small{font-size:6px!important}
body.gx-device-mobile .gx-chaos-status-grid>article strong{font-size:9px!important}

/* Mobile rooms section = app-like list */
body.gx-device-mobile .gx-chaos-lobby-toolbar{
    margin-top:12px!important;
    padding:0 2px!important;
    align-items:center!important;
}
body.gx-device-mobile .gx-chaos-lobby-toolbar>div:first-child>span{
    font-size:15px!important;
}
body.gx-device-mobile .gx-chaos-lobby-toolbar>div:first-child>small{
    margin-top:2px!important;
    font-size:8px!important;
}
body.gx-device-mobile .gx-chaos-toolbar-actions{
    display:none!important;
}
body.gx-device-mobile .gx-chaos-room-list{
    margin-top:8px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
}
body.gx-device-mobile .gx-chaos-room-card,
body.gx-device-mobile .gx-chaos-room-list>article{
    min-height:82px!important;
    border-radius:14px!important;
}

/* Hide desktop how-to block on phone; the game has its own help. */
body.gx-device-mobile.gx-device-phone .gx-chaos-roadmap{
    display:none!important;
}

/* Sticky mobile command bar */
.gx-chaos-mobile-commandbar{display:none}
body.gx-device-mobile .gx-chaos-mobile-commandbar{
    position:fixed!important;
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
    bottom:max(7px,env(safe-area-inset-bottom));
    z-index:8800;
    height:60px;
    padding:6px;
    display:grid;
    grid-template-columns:76px 76px 1fr;
    gap:6px;
    border-radius:18px;
    background:rgba(8,14,25,.94);
    border:1px solid rgba(102,129,185,.16);
    box-shadow:0 18px 44px rgba(0,0,0,.40);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
body.gx-device-mobile .gx-chaos-mobile-commandbar button{
    min-height:48px!important;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:3px;
    border-radius:13px;
    color:#8f9db3;
    background:transparent;
    border:0;
    font:800 8px 'Kanit',sans-serif;
}
body.gx-device-mobile .gx-chaos-mobile-commandbar button i{font-size:15px}
body.gx-device-mobile .gx-chaos-mobile-commandbar .create{
    color:#fff;
    background:linear-gradient(135deg,#5c62e9,#8d47e3);
    box-shadow:0 8px 20px rgba(80,67,204,.25);
}
body.gx-device-mobile .gx-chaos-mobile-commandbar .refresh i{color:#70bdff}
body.gx-device-mobile .gx-chaos-mobile-commandbar .back i{color:#a8b7d0}

/* ------------------------------------------------------------------
   CHAOS CREATE ROOM — PHONE = full-screen app sheet.
   This fixes the hidden footer / unclickable create button bug.
   ------------------------------------------------------------------ */
.gx-chaos-mobile-create-stepper{display:none}

body.gx-device-mobile .gx-chaos-create-modal-overlay{
    position:fixed!important;
    inset:0!important;
    width:var(--gx-vw-px)!important;
    height:var(--gx-vh-px)!important;
    min-height:var(--gx-vh-px)!important;
    padding:0!important;
    align-items:flex-end!important;
    justify-content:center!important;
    overflow:hidden!important;
    background:rgba(3,7,14,.78)!important;
    z-index:30000!important;
}

body.gx-device-mobile .gx-chaos-create-modal{
    width:100%!important;
    max-width:100%!important;
    height:var(--gx-mobile-sheet-height)!important;
    max-height:var(--gx-mobile-sheet-height)!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
    overflow:hidden!important;
    border-radius:22px 22px 0 0!important;
    border:1px solid rgba(138,94,224,.19)!important;
    border-bottom:0!important;
    background:
      radial-gradient(circle at 90% 0,rgba(118,66,211,.16),transparent 34%),
      linear-gradient(180deg,#111a2b,#09111e)!important;
    box-shadow:0 -26px 80px rgba(0,0,0,.48)!important;
    transform:none!important;
}

body.gx-device-mobile .gx-chaos-create-head{
    min-height:auto!important;
    padding:
      max(13px,env(safe-area-inset-top))
      14px
      11px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 42px!important;
    gap:8px!important;
    border-bottom:0!important;
}
body.gx-device-mobile .gx-chaos-create-title{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:9px!important;
}
body.gx-device-mobile .gx-chaos-create-icon{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
    border-radius:13px!important;
}
body.gx-device-mobile .gx-chaos-create-title small{
    font-size:6.5px!important;
}
body.gx-device-mobile .gx-chaos-create-title h3{
    margin:1px 0 0!important;
    font-size:20px!important;
}
body.gx-device-mobile .gx-chaos-create-title p{
    margin-top:2px!important;
    font-size:8px!important;
    line-height:1.35!important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
body.gx-device-mobile .gx-chaos-create-close{
    width:42px!important;
    height:42px!important;
    border-radius:12px!important;
}

body.gx-device-mobile .gx-chaos-mobile-create-stepper{
    height:42px;
    margin:0 14px 6px;
    padding:0 4px;
    display:grid;
    grid-template-columns:auto 1fr auto 1fr auto;
    gap:5px;
    align-items:center;
}
body.gx-device-mobile .gx-chaos-mobile-create-stepper>span{
    min-width:48px;
    display:grid;
    justify-items:center;
    gap:1px;
    color:#62718a;
}
body.gx-device-mobile .gx-chaos-mobile-create-stepper b{
    width:23px;height:23px;
    display:grid;place-items:center;
    border-radius:50%;
    background:#162033;
    border:1px solid rgba(101,132,192,.11);
    font-size:8px;
}
body.gx-device-mobile .gx-chaos-mobile-create-stepper small{
    font-size:6.5px;
}
body.gx-device-mobile .gx-chaos-mobile-create-stepper .active{
    color:#ae8dff;
}
body.gx-device-mobile .gx-chaos-mobile-create-stepper .active b{
    color:#fff;
    background:linear-gradient(135deg,#5a5ae0,#8d48dc);
}
body.gx-device-mobile .gx-chaos-mobile-create-stepper>i{
    height:1px;
    background:#26334a;
}

body.gx-device-mobile .gx-chaos-create-body{
    min-height:0!important;
    max-height:none!important;
    padding:8px 14px 14px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
body.gx-device-mobile .gx-chaos-create-field>span,
body.gx-device-mobile .gx-chaos-create-section-head strong{
    font-size:10px!important;
}
body.gx-device-mobile .gx-chaos-create-section-head span{
    font-size:7.5px!important;
}
body.gx-device-mobile .gx-chaos-create-input-wrap{
    min-height:52px!important;
    margin-top:5px!important;
    padding:0 12px!important;
    border-radius:13px!important;
}
body.gx-device-mobile .gx-chaos-create-input-wrap input{
    min-height:50px!important;
    font-size:16px!important;
}

/* Mode selection is intentionally NOT desktop cards on mobile. */
body.gx-device-mobile .gx-chaos-mode-cards{
    margin-top:7px!important;
    display:flex!important;
    overflow-x:auto!important;
    grid-template-columns:none!important;
    gap:7px!important;
    padding:1px 1px 4px!important;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}
body.gx-device-mobile .gx-chaos-mode-cards::-webkit-scrollbar{display:none}
body.gx-device-mobile .gx-chaos-mode-card{
    flex:0 0 min(78vw,270px)!important;
    min-height:78px!important;
    padding:10px!important;
    grid-template-columns:40px minmax(0,1fr) 18px!important;
    border-radius:14px!important;
    scroll-snap-align:center;
}
body.gx-device-mobile .gx-chaos-mode-card .icon{
    width:40px!important;
    height:40px!important;
    font-size:14px!important;
}
body.gx-device-mobile .gx-chaos-mode-card .copy b{
    font-size:13px!important;
}
body.gx-device-mobile .gx-chaos-mode-card .copy small{
    white-space:normal!important;
    overflow:visible!important;
    font-size:8px!important;
    line-height:1.35!important;
}

/* Player count becomes large segmented controls */
body.gx-device-mobile .gx-chaos-player-count-grid{
    margin-top:7px!important;
    gap:6px!important;
}
body.gx-device-mobile .gx-chaos-player-count-grid button{
    min-height:58px!important;
    padding:7px 4px!important;
    flex-direction:column!important;
    gap:0!important;
    border-radius:13px!important;
}
body.gx-device-mobile .gx-chaos-player-count-grid button i{
    margin-bottom:2px;
    font-size:12px;
}
body.gx-device-mobile .gx-chaos-player-count-grid button strong{
    font-size:17px!important;
    line-height:1!important;
}
body.gx-device-mobile .gx-chaos-player-count-grid button span{
    font-size:7px!important;
}

body.gx-device-mobile .gx-chaos-create-info{
    margin-top:12px!important;
    padding:9px 10px!important;
}
body.gx-device-mobile .gx-chaos-create-info strong{font-size:9px!important}
body.gx-device-mobile .gx-chaos-create-info span{font-size:7.5px!important}

/* Always-visible create button */
body.gx-device-mobile .gx-chaos-create-footer{
    position:relative!important;
    z-index:20!important;
    padding:
      8px
      14px
      calc(8px + env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:86px 1fr!important;
    gap:7px!important;
    background:rgba(9,16,28,.98)!important;
    border-top:1px solid rgba(104,132,183,.11)!important;
    box-shadow:0 -12px 28px rgba(0,0,0,.24)!important;
}
body.gx-device-mobile .gx-chaos-create-footer button{
    min-height:52px!important;
    font-size:11px!important;
    border-radius:13px!important;
    touch-action:manipulation!important;
    pointer-events:auto!important;
}
body.gx-device-mobile .gx-chaos-create-footer .primary{
    font-size:12px!important;
    background:linear-gradient(135deg,#5367ea,#8e46e1)!important;
    box-shadow:0 10px 24px rgba(76,67,202,.26)!important;
}

/* When the soft keyboard opens, keep action buttons reachable. */
body.gx-device-mobile .gx-chaos-create-modal-overlay.gx-chaos-create-mobile-open{
    height:var(--gx-vh-px)!important;
}
body.gx-device-mobile .gx-chaos-create-modal-overlay.gx-chaos-create-mobile-open .gx-chaos-create-modal{
    height:var(--gx-vh-px)!important;
    max-height:var(--gx-vh-px)!important;
}

/* ------------------------------------------------------------------
   IPAD / TABLET MOBILE UI
   Still a distinct touch UI, but uses the extra screen width.
   ------------------------------------------------------------------ */
body.gx-device-mobile.gx-device-tablet .gx-chaos-lobby-shell{
    width:min(920px,100%)!important;
    margin:0 auto!important;
    padding-left:18px!important;
    padding-right:18px!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-lobby-hero{
    padding:18px!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-lobby-hero-main{
    grid-template-columns:68px minmax(0,1fr)!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-lobby-logo{
    width:68px!important;
    height:68px!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-lobby-hero h1{
    font-size:30px!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-lobby-hero p{
    font-size:10px!important;
    -webkit-line-clamp:3;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-status-grid{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    overflow:visible!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-status-grid>article{
    width:auto!important;
    flex:none!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-room-list{
    grid-template-columns:1fr 1fr!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-create-modal{
    width:min(680px,calc(100% - 28px))!important;
    height:min(760px,calc(var(--gx-vh-px) - 24px))!important;
    max-height:min(760px,calc(var(--gx-vh-px) - 24px))!important;
    margin-bottom:max(12px,env(safe-area-inset-bottom))!important;
    border-radius:24px!important;
    border-bottom:1px solid rgba(138,94,224,.19)!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-create-modal-overlay{
    align-items:center!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-mode-cards{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    overflow:visible!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-mode-card{
    min-width:0!important;
    width:auto!important;
    flex:none!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-mobile-commandbar{
    width:min(500px,calc(100% - 28px));
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%);
}

/* Light mode variants for the dedicated mobile UI */
body.gx-theme-light.gx-device-mobile #chaos-lobby-screen{
    background:
      radial-gradient(circle at 50% -5%,rgba(80,125,220,.10),transparent 32%),
      #edf4fb!important;
}
body.gx-theme-light.gx-device-mobile .gx-chaos-lobby-hero,
body.gx-theme-light.gx-device-mobile .gx-chaos-create-modal{
    background:#fff!important;
    border-color:#d4dfec!important;
}
body.gx-theme-light.gx-device-mobile .gx-chaos-mobile-commandbar{
    background:rgba(248,251,255,.96)!important;
    border-color:#d4dfec!important;
    box-shadow:0 15px 40px rgba(42,66,97,.13)!important;
}
body.gx-theme-light.gx-device-mobile .gx-chaos-mobile-commandbar button{
    color:#607089!important;
}
body.gx-theme-light.gx-device-mobile .gx-chaos-create-footer{
    background:#f8fbff!important;
    border-color:#d6e1ed!important;
}
body.gx-theme-light.gx-device-mobile .gx-chaos-mobile-create-stepper>i{
    background:#d8e2ee!important;
}
body.gx-theme-light.gx-device-mobile .gx-chaos-create-input-wrap,
body.gx-theme-light.gx-device-mobile .gx-chaos-mode-card,
body.gx-theme-light.gx-device-mobile .gx-chaos-player-count-grid button{
    background:#f6f9fd!important;
    border-color:#d9e3ee!important;
}
body.gx-theme-light.gx-device-mobile .gx-chaos-mode-card .copy b,
body.gx-theme-light.gx-device-mobile .gx-chaos-create-field>span,
body.gx-theme-light.gx-device-mobile .gx-chaos-create-section-head strong{
    color:#18243a!important;
}

/* The mobile UI is intentionally touch-first. */
@media(pointer:coarse){
    body.gx-device-mobile .gx-chaos-mobile-commandbar button,
    body.gx-device-mobile .gx-chaos-create-footer button,
    body.gx-device-mobile .gx-chaos-player-count-grid button,
    body.gx-device-mobile .gx-chaos-mode-card{
        -webkit-tap-highlight-color:transparent;
    }
}


/* =====================================================================
   GX V56 — LIGHT MODE REBUILD / MOBILE HARD FIX / GX POWER DICE
   ===================================================================== */

/* ---------------------------------------------------------------------
   LIGHT MODE REBUILD
   --------------------------------------------------------------------- */
body.gx-theme-light{
    --gx-light-bg:#eef4fb;
    --gx-light-bg-2:#e6eef8;
    --gx-light-surface:#ffffff;
    --gx-light-surface-2:#f7faff;
    --gx-light-surface-3:#edf3fa;
    --gx-light-line:#d2deec;
    --gx-light-line-strong:#bdcede;
    --gx-light-text:#172338;
    --gx-light-muted:#65778f;
    --gx-light-faint:#8798ad;
    --gx-light-blue:#316fd8;
    --gx-light-purple:#7652d9;
    --gx-light-shadow:0 14px 40px rgba(39,66,96,.10);
    background:
      radial-gradient(circle at 15% 0,rgba(74,133,219,.10),transparent 32%),
      linear-gradient(180deg,#f4f8fc,#eaf1f8)!important;
    color:var(--gx-light-text)!important;
    color-scheme:light;
}

body.gx-theme-light :is(
    .auth-screen,
    .gx-system-page,
    .gx-polished-screen,
    .gx-chaos-lobby-screen,
    .gx-chaos-game-screen,
    #game-select-screen,
    #game-room-screen,
    #word-game-screen
){
    background:
      radial-gradient(circle at 80% 0,rgba(104,80,219,.055),transparent 32%),
      var(--gx-light-bg)!important;
    color:var(--gx-light-text)!important;
}

body.gx-theme-light :is(
    .glass-card,
    .modal-content,
    .auth-card-dark,
    .sidebar-profile,
    .lobby-header,
    .room-control-panel,
    .room-item-row,
    .slot-player-card,
    .gx-auth-card,
    .gx-auth-brand-panel,
    .gx-hub-hero,
    .gx-hub-profile,
    .gx-hub-panel,
    .gx-hub-card,
    .gx-game-card,
    .gx-room-shell,
    .gx-word-match-shell,
    .gx-word-score-rail,
    .gx-word-right-chat-panel,
    .gx-word-right-helper-panel,
    .gx-word-question-card,
    .gx-word-match-topbar,
    .gx-word-progress-wrap,
    .gx-word-meta-pill,
    .gx-market-modal,
    .gx-market-card,
    .gx-market-toolbar,
    .gx-market-sell-form,
    .gx-market-sell-items,
    .gx-item-shop-modal,
    .gx-item-shop-game-info,
    .gx-store-item,
    .gx-inventory-modal,
    .gx-inventory-card,
    .gx-report-modal,
    .gx-ticket-modal,
    .gx-ticket-create-modal,
    .gx-admin-report-modal,
    .gx-admin-broadcast-modal,
    .gx-mailbox-modal,
    .gx-economy-admin-modal,
    .gx-economy-admin-card,
    .gx-admin-inventory-modal,
    .admin-player-modal,
    .gx-chaos-panel,
    .gx-chaos-pro-board-frame,
    .gx-chaos-game-player,
    .gx-chaos-info-card,
    .gx-chaos-create-modal,
    .gx-display-mode-modal
){
    background:var(--gx-light-surface)!important;
    border-color:var(--gx-light-line)!important;
    color:var(--gx-light-text)!important;
    box-shadow:var(--gx-light-shadow)!important;
}

body.gx-theme-light :is(
    .room-item-row,
    .slot-player-card,
    .gx-store-item,
    .gx-inventory-card,
    .gx-market-listing,
    .gx-market-sell-item,
    .gx-chaos-game-player,
    .gx-word-meta-pill,
    .gx-economy-admin-card
){
    background:var(--gx-light-surface-2)!important;
}

body.gx-theme-light :is(
    .auth-card-dark,
    .modal-content,
    #right-sidebar-menu,
    .gx-hub-shell,
    .gx-word-match-shell,
    .gx-chaos-pro-ui,
    .gx-market-modal,
    .gx-item-shop-modal,
    .gx-inventory-modal
) :is(h1,h2,h3,h4,h5,strong,label){
    color:var(--gx-light-text)!important;
}

body.gx-theme-light :is(
    .auth-card-dark,
    .modal-content,
    #right-sidebar-menu,
    .gx-hub-shell,
    .gx-word-match-shell,
    .gx-chaos-pro-ui,
    .gx-market-modal,
    .gx-item-shop-modal,
    .gx-inventory-modal
) :is(p,small,.muted,[class*="subtitle"],[class*="desc"]){
    color:var(--gx-light-muted)!important;
}

body.gx-theme-light :is(input,textarea,select,.game-input,.input-dark){
    background:#fff!important;
    color:var(--gx-light-text)!important;
    border-color:#c8d6e6!important;
    box-shadow:inset 0 1px 2px rgba(35,59,89,.03)!important;
}
body.gx-theme-light :is(input,textarea)::placeholder{color:#95a4b7!important}
body.gx-theme-light :is(input,textarea,select):focus{
    border-color:#6f9fe5!important;
    box-shadow:0 0 0 3px rgba(66,123,210,.10)!important;
}

/* Header / sidebar */
body.gx-theme-light .game-header{
    background:rgba(255,255,255,.96)!important;
    border-color:var(--gx-light-line)!important;
    box-shadow:0 8px 28px rgba(46,70,98,.09)!important;
}
body.gx-theme-light :is(
    .gx-header-display-btn,
    .gx-header-theme-btn,
    .gx-language-toggle,
    .gx-wallet-pill,
    #main-menu-button
){
    background:#f7fbff!important;
    color:#52647c!important;
    border-color:#d5e0ed!important;
}
body.gx-theme-light #right-sidebar-menu{
    background:
      radial-gradient(circle at 20% 0,rgba(73,130,215,.09),transparent 28%),
      linear-gradient(180deg,#ffffff,#f3f7fc)!important;
    border-color:var(--gx-light-line)!important;
    box-shadow:-24px 0 70px rgba(43,67,96,.14)!important;
}
body.gx-theme-light #right-sidebar-menu .sidebar-profile-card{
    background:#f6f9fd!important;
    border-color:var(--gx-light-line)!important;
}
body.gx-theme-light #right-sidebar-menu .menu-link-item{
    color:#52657d!important;
    background:transparent!important;
    border-color:transparent!important;
}
body.gx-theme-light #right-sidebar-menu .menu-link-item:hover,
body.gx-theme-light #right-sidebar-menu .menu-link-item.active-link{
    color:#234e94!important;
    background:#eaf2fd!important;
    border-color:#cadbf1!important;
}
body.gx-theme-light #right-sidebar-menu .menu-link-item>i{
    color:#547fbe!important;
    background:#edf4fd!important;
}

/* Modal overlays + alerts */
body.gx-theme-light .modal-overlay{background:rgba(180,197,218,.62)!important}
body.gx-theme-light .swal2-popup.custom-game-alert,
body.gx-theme-light .custom-game-alert{
    background:#fff!important;
    color:var(--gx-light-text)!important;
    border:1px solid var(--gx-light-line)!important;
    box-shadow:0 28px 80px rgba(41,66,96,.18)!important;
}
body.gx-theme-light .custom-game-alert :is(.swal2-title,.swal2-html-container,strong,b){
    color:var(--gx-light-text)!important;
}

/* Word Game light */
body.gx-theme-light .gx-word-question-card{
    background:
      radial-gradient(circle at 50% 0,rgba(70,126,214,.07),transparent 38%),
      #f8fbff!important;
}
body.gx-theme-light .gx-word-question-card h3{
    color:#13213a!important;
    text-shadow:none!important;
}
body.gx-theme-light .gx-word-answer-input-wrap{
    background:#fff!important;
    border-color:#bfd0e4!important;
}
body.gx-theme-light .gx-word-score-player{
    background:#f4f8fd!important;
    border-color:#d5e1ed!important;
}
body.gx-theme-light .gx-word-score-player.is-me{
    background:#edf4ff!important;
    border-color:#bcd0ef!important;
}

/* CHAOS light */
body.gx-theme-light .gx-chaos-pro-board-frame{
    background:
      radial-gradient(circle at 50% 42%,rgba(92,86,210,.07),transparent 40%),
      #f8fbff!important;
}
body.gx-theme-light .gx-chaos-pro-board-grid{background:#e8f0f8!important}
body.gx-theme-light .gx-chaos-board-cell{
    box-shadow:0 3px 10px rgba(39,61,91,.10)!important;
    filter:saturate(.78) brightness(1.10)!important;
}
body.gx-theme-light .gx-chaos-pro-center{
    background:#f8fbff!important;
    border-color:#d3dfeb!important;
}
body.gx-theme-light .gx-chaos-pro-dice-console{
    background:rgba(255,255,255,.94)!important;
    border-color:#d2deeb!important;
    box-shadow:0 12px 32px rgba(40,62,89,.14)!important;
    backdrop-filter:blur(12px);
}
body.gx-theme-light .gx-chaos-pro-dice-platform{
    background:#f0f5fb!important;
    border-color:#d1deec!important;
}

/* Shop / market / inventory */
body.gx-theme-light :is(
    .gx-item-shop-head,.gx-item-shop-tabs,.gx-item-shop-foot,
    .gx-inventory-head,.gx-inventory-tabs,.gx-inventory-foot,
    .gx-market-head,.gx-market-tabs,.gx-market-foot,
    .gx-economy-admin-head
){
    background:#fff!important;
    border-color:var(--gx-light-line)!important;
}
body.gx-theme-light .gx-economy-live-strip{
    background:#edf5ff!important;
    border-color:#d4e2f2!important;
    color:#526b8d!important;
}
body.gx-theme-light .gx-economy-admin-card input,
body.gx-theme-light .gx-economy-admin-card select{
    background:#fff!important;
    color:var(--gx-light-text)!important;
    border-color:#ccd9e8!important;
}

/* ---------------------------------------------------------------------
   MOBILE GLOBAL HARD FIX
   --------------------------------------------------------------------- */
body.gx-device-mobile{
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
}
body.gx-device-mobile *{-webkit-tap-highlight-color:transparent}
body.gx-device-mobile button,
body.gx-device-mobile a,
body.gx-device-mobile [role="button"]{touch-action:manipulation}

body.gx-device-mobile .game-header{
    position:sticky!important;
    top:0!important;
    z-index:12000!important;
    min-height:54px!important;
    padding:
      max(7px,env(safe-area-inset-top))
      max(8px,env(safe-area-inset-right))
      7px
      max(8px,env(safe-area-inset-left))!important;
}
body.gx-device-mobile .gx-header-right{gap:5px!important;min-width:0!important}
body.gx-device-mobile .gx-wallet-pill{min-width:0!important;padding:0 7px!important}
body.gx-device-mobile .gx-wallet-label{display:none!important}
body.gx-device-mobile .gx-wallet-pill strong{font-size:9px!important}

/* Sidebar = bottom sheet */
body.gx-device-mobile #right-sidebar-menu{
    top:auto!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    max-width:100%!important;
    height:min(88dvh,760px)!important;
    max-height:calc(var(--gx-vh-px) - 8px)!important;
    padding:
      12px
      max(12px,env(safe-area-inset-right))
      calc(14px + env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left))!important;
    border-left:0!important;
    border-top:1px solid rgba(100,134,195,.15)!important;
    border-radius:24px 24px 0 0!important;
    transform:translateY(105%)!important;
    transition:transform .24s cubic-bezier(.2,.8,.2,1)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
}
body.gx-device-mobile #right-sidebar-menu.open{
    right:0!important;
    transform:translateY(0)!important;
}
body.gx-device-mobile #right-sidebar-menu .gx-sidebar-head{
    position:sticky;
    top:-12px;
    z-index:4;
    padding-top:8px!important;
}
body.gx-device-mobile #right-sidebar-menu .menu-link-item{
    min-height:48px!important;
    font-size:11px!important;
}

/* Remaining desktop-style modals become true mobile pages */
body.gx-device-mobile :is(
    .gx-friends-modal,.gx-game-history-modal,.gx-private-chat-modal,.gx-transfer-modal,
    .gx-report-modal,.gx-ticket-modal,.gx-ticket-create-modal,.gx-admin-report-modal,
    .gx-admin-broadcast-modal,.gx-mailbox-modal,.gx-admin-inventory-modal,.admin-player-modal
){
    width:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    height:100%!important;
    border-radius:16px!important;
    overflow:hidden!important;
}
body.gx-device-mobile .modal-overlay.open{align-items:stretch!important}

body.gx-device-mobile :is(
    .gx-item-shop-tabs,.gx-inventory-tabs,.gx-market-tabs,.gx-admin-report-tabs
){
    display:flex!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    scrollbar-width:none;
}
body.gx-device-mobile :is(
    .gx-item-shop-tabs,.gx-inventory-tabs,.gx-market-tabs,.gx-admin-report-tabs
)::-webkit-scrollbar{display:none}
body.gx-device-mobile :is(
    .gx-item-shop-tabs,.gx-inventory-tabs,.gx-market-tabs,.gx-admin-report-tabs
)>button{
    flex:0 0 auto!important;
    min-height:44px!important;
}

body.gx-device-mobile .swal2-popup.custom-game-alert{
    width:calc(100vw - 20px)!important;
    max-width:520px!important;
    margin:10px!important;
}
body.gx-device-mobile .swal2-actions{
    width:100%!important;
    padding:0 12px 10px!important;
    gap:7px!important;
}
body.gx-device-mobile .swal2-actions button{
    flex:1!important;
    min-height:48px!important;
    margin:0!important;
}

/* ---------------------------------------------------------------------
   GX DICE SHOP
   --------------------------------------------------------------------- */
.gx-item-shop-wallets{display:flex;align-items:center;gap:7px}
.gx-item-shop-wallet.point i{color:#8ec5ff}
.gx-item-shop-wallet.point strong{color:#a9cfff}

.gx-dice-shop-grid{display:block!important}
.gx-dice-shop-current{
    min-height:92px;
    padding:13px;
    display:grid;
    grid-template-columns:68px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    border-radius:15px;
    background:
      radial-gradient(circle at 0 0,rgba(107,70,211,.13),transparent 40%),
      rgba(255,255,255,.018);
    border:1px solid rgba(126,92,210,.14);
}
.gx-dice-shop-current small{display:block;color:#707fa0;font-size:7px;font-weight:1000;letter-spacing:.12em}
.gx-dice-shop-current strong{display:block;margin-top:2px;color:#edf3ff;font-size:15px}
.gx-dice-shop-current p{margin:3px 0 0;color:#7989a3;font-size:9px}
.gx-dice-shop-current .sync{
    padding:6px 8px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:999px;
    color:#76dcb2;
    background:rgba(44,151,100,.08);
    border:1px solid rgba(57,174,116,.10);
    font-size:8px;
    white-space:nowrap;
}
.gx-dice-shop-current-preview{width:68px;height:68px;display:grid;place-items:center}
.gx-dice-shop-explain{
    margin-top:9px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
}
.gx-dice-shop-explain>span{
    min-height:36px;
    padding:0 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    border-radius:10px;
    color:#7485a0;
    background:rgba(255,255,255,.018);
    border:1px solid rgba(93,124,184,.08);
    font-size:8px;
}
.gx-dice-shop-explain b{color:#aebddd}
.gx-dice-shop-list{
    margin-top:10px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}
.gx-dice-shop-card{
    min-width:0;
    padding:13px;
    display:grid;
    grid-template-columns:80px minmax(0,1fr);
    grid-template-areas:"preview copy" "status status" "action action" "rent rent";
    gap:10px 12px;
    border-radius:17px;
    background:
      radial-gradient(circle at 0 0,rgba(77,120,204,.07),transparent 40%),
      #0d1626;
    border:1px solid rgba(96,129,190,.10);
}
.gx-dice-shop-card.equipped{
    border-color:rgba(93,107,237,.32);
    box-shadow:0 0 0 1px rgba(96,89,225,.09),0 18px 36px rgba(26,29,74,.18);
}
.gx-dice-shop-preview{grid-area:preview;display:grid;justify-items:center;align-content:start;gap:5px}
.gx-dice-shop-copy{grid-area:copy;min-width:0}
.gx-dice-shop-copy>small{color:#647696;font-size:6.5px;font-weight:1000;letter-spacing:.1em}
.gx-dice-shop-copy>strong{display:block;margin-top:2px;color:#edf3ff;font-size:14px}
.gx-dice-shop-copy>p{min-height:34px;margin:4px 0 0;color:#71819a;font-size:8.5px;line-height:1.45}
.gx-dice-shop-preview .rarity{color:#7c8baa;font-size:6px;font-weight:1000;letter-spacing:.10em}
.gx-dice-shop-preview .equipped-badge{
    padding:3px 5px;border-radius:999px;color:#6ce0ac;background:rgba(39,150,97,.08);
    font-size:6px;font-weight:900;
}
.gx-dice-power-chip{
    margin-top:8px;
    padding:7px;
    display:grid;
    grid-template-columns:30px 1fr;
    gap:7px;
    align-items:center;
    border-radius:10px;
    background:rgba(255,255,255,.018);
    border:1px solid rgba(95,126,188,.07);
}
.gx-dice-power-chip>i{
    width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
    color:#a887ff;background:rgba(107,72,187,.09);
}
.gx-dice-power-chip b{display:block;color:#bfcbe0;font-size:8.5px}
.gx-dice-power-chip span{display:block;margin-top:1px;color:#6d7e97;font-size:7px;line-height:1.35}
.gx-dice-shop-status{grid-area:status;min-height:25px;display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.gx-dice-shop-status>span{padding:4px 6px;border-radius:999px;font-size:7px}
.gx-dice-shop-status .permanent{color:#71deb0;background:rgba(43,151,101,.08)}
.gx-dice-shop-status .rental{color:#8fc4ff;background:rgba(51,113,188,.08)}
.gx-dice-shop-status .default{color:#98a9c3;background:rgba(86,104,142,.08)}

.gx-dice-equip-btn,.gx-dice-coin-buy{
    grid-area:action;
    min-height:45px;
    border-radius:11px;
    font-family:'Kanit',sans-serif;
    font-weight:900;
    cursor:pointer;
}
.gx-dice-equip-btn{
    color:#e9efff;
    background:linear-gradient(135deg,#496cda,#7651d7);
    border:0;
}
.gx-dice-equip-btn.active,.gx-dice-equip-btn:disabled{
    color:#78d9ad;
    background:rgba(43,143,97,.08);
    border:1px solid rgba(50,169,111,.11);
    cursor:default;
}
.gx-dice-coin-buy{
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#e9eef8;
    background:linear-gradient(135deg,#323d58,#252f46);
    border:1px solid rgba(119,145,194,.12);
}
.gx-dice-coin-buy b{color:#f3ca60;font-size:10px}
.gx-dice-coin-buy:disabled{opacity:.42;cursor:not-allowed}
.gx-dice-rental-grid{grid-area:rent;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gx-dice-rental-grid button{
    min-height:48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border-radius:10px;
    color:#8799b5;
    background:rgba(51,88,153,.05);
    border:1px solid rgba(78,119,192,.09);
    font-family:'Kanit',sans-serif;
    cursor:pointer;
}
.gx-dice-rental-grid button small{font-size:7px}
.gx-dice-rental-grid button b{color:#94c1ff;font-size:8.5px}
.gx-dice-rental-grid button:disabled{opacity:.35;cursor:not-allowed}

/* Dice themes */
.gx-dice-shop-cube{
    width:62px;height:62px;
    display:grid;place-items:center;
    border-radius:16px;
    font-size:40px;
    transition:transform .18s ease,filter .18s ease;
}
.gx-dice-shop-card:hover .gx-dice-shop-cube{transform:translateY(-3px) rotate(-4deg)}
.dice-theme-starter{
    color:#dce6f4!important;
    background:linear-gradient(145deg,#344157,#171f2d)!important;
    box-shadow:inset 0 0 0 1px rgba(198,215,239,.12),0 8px 20px rgba(0,0,0,.22)!important;
}
.dice-theme-neon{
    color:#85f5ff!important;
    background:linear-gradient(145deg,#11354a,#081a2c)!important;
    box-shadow:inset 0 0 0 1px rgba(86,229,255,.28),0 0 24px rgba(44,193,239,.28)!important;
    text-shadow:0 0 12px rgba(93,238,255,.75);
}
.dice-theme-inferno{
    color:#ffd09a!important;
    background:linear-gradient(145deg,#5b1f18,#21100f)!important;
    box-shadow:inset 0 0 0 1px rgba(255,137,65,.28),0 0 26px rgba(245,82,35,.30)!important;
}
.dice-theme-frost{
    color:#d7f5ff!important;
    background:linear-gradient(145deg,#17435a,#0d2134)!important;
    box-shadow:inset 0 0 0 1px rgba(138,225,255,.30),0 0 26px rgba(63,171,226,.26)!important;
}
.dice-theme-royal{
    color:#ffe79b!important;
    background:linear-gradient(145deg,#5c4720,#211b13)!important;
    box-shadow:inset 0 0 0 1px rgba(255,219,105,.32),0 0 28px rgba(223,174,56,.28)!important;
}
.dice-theme-void{
    color:#e9c9ff!important;
    background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.18),transparent 12%),linear-gradient(145deg,#3a175e,#110d28)!important;
    box-shadow:inset 0 0 0 1px rgba(204,123,255,.30),0 0 30px rgba(139,54,223,.33)!important;
}
.dice-theme-mythic{
    color:#fff8d0!important;
    background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.32),transparent 11%),linear-gradient(135deg,#174a63,#593a87 50%,#8a6429)!important;
    box-shadow:inset 0 0 0 1px rgba(255,238,156,.38),0 0 15px rgba(74,216,232,.30),0 0 34px rgba(166,92,235,.28)!important;
}

.gx-dice-buy-confirm{display:grid;justify-items:center;gap:8px;color:#8fa0ba}
.gx-dice-buy-confirm .cube{width:72px;height:72px;display:grid;place-items:center;border-radius:18px;font-size:45px}
.gx-dice-buy-confirm p{margin:0;text-align:center;font-size:11px}
.gx-dice-buy-confirm>strong{color:#f0c65b;font-size:15px}
.gx-dice-buy-confirm>strong.point{color:#8fc4ff}
.gx-dice-buy-confirm>small{color:#71819a;font-size:9px}

/* ---------------------------------------------------------------------
   POWER ROLL CONSOLE
   --------------------------------------------------------------------- */
.gx-chaos-pro-dice-console{gap:9px!important}
.gx-chaos-pro-dice-platform{
    position:relative;
    width:60px!important;
    height:62px!important;
    min-height:62px!important;
    padding-bottom:12px;
}
.gx-chaos-pro-dice-console .gx-chaos-dice{
    width:43px!important;
    height:43px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:11px!important;
    font-size:31px!important;
    transition:filter .18s ease,transform .18s ease!important;
}
.gx-chaos-equipped-dice-name{
    position:absolute;
    left:50%;
    bottom:2px;
    transform:translateX(-50%);
    width:54px;
    overflow:hidden;
    color:#7484a0;
    font-size:5.5px;
    font-weight:1000;
    letter-spacing:.08em;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.gx-chaos-power-roll{
    width:178px;
    display:grid;
    gap:4px;
}
.gx-chaos-roll-power{
    position:relative;
    height:15px;
    overflow:hidden;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(71,144,232,.18) 0 34%,rgba(133,88,225,.18) 34% 69%,rgba(236,109,78,.18) 69% 100%);
    border:1px solid rgba(102,126,183,.12);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.30);
}
.gx-chaos-roll-power>i{
    position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;
    background:linear-gradient(90deg,#4f9bef,#8c65ed 58%,#ff8a61);
    box-shadow:0 0 12px rgba(115,91,230,.30);
    transition:width .035s linear;
}
.gx-chaos-roll-power>b{
    position:absolute;inset:0;z-index:3;display:grid;place-items:center;
    color:#eef4ff;font-size:6.5px;text-shadow:0 1px 3px #000;
}
.gx-chaos-roll-power.charging{
    box-shadow:0 0 0 1px rgba(111,94,226,.14),0 0 18px rgba(85,91,221,.18);
}
.gx-chaos-pro-dice-console #gx-chaos-roll-btn{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    user-select:none!important;
    -webkit-user-select:none!important;
    touch-action:none!important;
}
.gx-chaos-pro-dice-console #gx-chaos-roll-btn.charging{
    transform:translateY(1px) scale(.99);
    background:linear-gradient(135deg,#346eea,#9c4ce4)!important;
    box-shadow:0 0 22px rgba(87,80,229,.28)!important;
}
.gx-chaos-roll-hint{
    color:#697b98;
    font-size:6.3px;
    text-align:center;
    white-space:nowrap;
}
.gx-chaos-dice.rolling{filter:brightness(1.25) saturate(1.2)!important}
.gx-chaos-dice.landed{transform:scale(1.15) rotate(4deg)!important}

.gx-chaos-player-status-icons .gx-chaos-player-dice{
    min-width:48px;
    height:18px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    gap:3px;
    border-radius:6px;
    font-size:7px;
    border:1px solid rgba(122,102,201,.10);
}
.gx-chaos-player-status-icons .gx-chaos-player-dice>b{
    color:inherit!important;
    font-size:5.5px!important;
    letter-spacing:.04em;
}

/* Light variants for Dice Shop */
body.gx-theme-light .gx-dice-shop-card,
body.gx-theme-light .gx-dice-shop-current,
body.gx-theme-light .gx-dice-shop-explain>span{
    background:#f7faff!important;
    border-color:#d6e2ef!important;
}
body.gx-theme-light .gx-dice-shop-copy>strong,
body.gx-theme-light .gx-dice-shop-current strong{color:#172338!important}
body.gx-theme-light .gx-dice-shop-copy>p,
body.gx-theme-light .gx-dice-power-chip span,
body.gx-theme-light .gx-dice-shop-current p{color:#65778f!important}
body.gx-theme-light .gx-dice-power-chip{
    background:#edf3fa!important;
    border-color:#d8e3ef!important;
}
body.gx-theme-light .gx-chaos-roll-power{
    background:linear-gradient(90deg,#dcecff 0 34%,#e9e1ff 34% 69%,#ffe1d6 69% 100%)!important;
    border-color:#cad8e7!important;
}
body.gx-theme-light .gx-chaos-equipped-dice-name,
body.gx-theme-light .gx-chaos-roll-hint{color:#61728a!important}

/* ---------------------------------------------------------------------
   MOBILE: Dice shop + sticky Power Roll
   --------------------------------------------------------------------- */
@media(max-width:900px){
    .gx-dice-shop-list{grid-template-columns:1fr!important}
}
body.gx-device-mobile .gx-item-shop-head{
    grid-template-columns:minmax(0,1fr) 42px!important;
    gap:7px!important;
}
body.gx-device-mobile .gx-item-shop-wallets{
    grid-column:1/2!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
}
body.gx-device-mobile .gx-item-shop-wallet{min-width:0!important;width:100%!important}
body.gx-device-mobile .gx-item-shop-admin-btn{grid-column:1/2!important}
body.gx-device-mobile .gx-item-shop-tabs{
    padding-left:max(8px,env(safe-area-inset-left))!important;
    padding-right:max(8px,env(safe-area-inset-right))!important;
}
body.gx-device-mobile .gx-item-shop-tabs>button{min-width:132px!important}
body.gx-device-mobile .gx-dice-shop-current{grid-template-columns:58px minmax(0,1fr)!important}
body.gx-device-mobile .gx-dice-shop-current .sync{grid-column:1/-1;justify-content:center}
body.gx-device-mobile .gx-dice-shop-explain{grid-template-columns:1fr!important}
body.gx-device-mobile .gx-dice-shop-card{grid-template-columns:68px minmax(0,1fr)!important}
body.gx-device-mobile .gx-dice-shop-cube{width:56px;height:56px;font-size:35px}
body.gx-device-mobile .gx-dice-rental-grid button{min-height:54px!important}

body.gx-device-mobile .gx-chaos-pro-dice-console{
    position:fixed!important;
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    transform:none!important;
    width:auto!important;
    min-height:72px!important;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    padding:7px!important;
    border-radius:17px!important;
    z-index:8500!important;
}
body.gx-device-mobile .gx-chaos-power-roll{width:100%!important}
body.gx-device-mobile .gx-chaos-pro-dice-console #gx-chaos-roll-btn{
    min-height:44px!important;
    height:44px!important;
    font-size:10px!important;
}
body.gx-device-mobile .gx-chaos-roll-power{height:16px!important}
body.gx-device-mobile .gx-chaos-roll-hint{font-size:6.5px!important}
body.gx-device-mobile .gx-chaos-pro-stage{padding-bottom:82px!important}

body.gx-device-mobile.gx-device-tablet .gx-chaos-pro-dice-console{
    left:50%!important;
    right:auto!important;
    width:min(440px,calc(100% - 30px))!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    transform:translateX(-50%)!important;
}
body.gx-device-mobile.gx-device-tablet .gx-chaos-pro-dice-platform{width:68px!important}

@media(max-width:390px){
    body.gx-device-mobile .gx-header-right{gap:3px!important}
    body.gx-device-mobile .gx-language-toggle{padding:0 6px!important}
    body.gx-device-mobile .gx-wallet-pill{padding:0 5px!important}
    body.gx-device-mobile .gx-dice-rental-grid{grid-template-columns:1fr!important}
    body.gx-device-mobile .gx-dice-shop-card{
        grid-template-columns:58px minmax(0,1fr)!important;
        padding:10px!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .gx-dice-shop-card:hover .gx-dice-shop-cube,
    .gx-chaos-pro-dice-console #gx-chaos-roll-btn.charging{
        transform:none!important;
    }
}


/* =====================================================================
   GX V57 — SCREENSHOT HOTFIX
   1) Mobile / iPad GX ITEM SHOP header no longer collapses vertically.
   2) Light mode now themes the CHAOS HUD itself, not only the page bg.
   ===================================================================== */

/* ---------------------------------------------------------------------
   MOBILE / IPAD ITEM SHOP HEADER REBUILD
   --------------------------------------------------------------------- */
body.gx-device-mobile .gx-item-shop-overlay{
    align-items:center!important;
    justify-content:center!important;
}

body.gx-device-mobile .gx-item-shop-modal{
    width:min(100%,720px)!important;
    max-width:min(100%,720px)!important;
    height:min(100%,var(--gx-vh-px))!important;
    max-height:var(--gx-vh-px)!important;
    margin:0 auto!important;
    border-radius:18px!important;
}

body.gx-device-mobile .gx-item-shop-head{
    min-height:0!important;
    padding:
        max(12px,env(safe-area-inset-top))
        12px
        11px!important;
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 44px!important;
    grid-template-areas:
        "title close"
        "wallets wallets"
        "admin admin"!important;
    gap:9px!important;
    align-items:center!important;
}

body.gx-device-mobile .gx-item-shop-title{
    grid-area:title!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:center!important;
}

body.gx-device-mobile .gx-item-shop-title>.icon{
    width:44px!important;
    height:44px!important;
    border-radius:13px!important;
    font-size:17px!important;
}

body.gx-device-mobile .gx-item-shop-title>div{
    min-width:0!important;
    width:100%!important;
}

body.gx-device-mobile .gx-item-shop-title b{
    font-size:7px!important;
    line-height:1.1!important;
    letter-spacing:.11em!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
}

body.gx-device-mobile .gx-item-shop-title h3{
    margin-top:2px!important;
    max-width:100%!important;
    font-size:clamp(18px,5vw,23px)!important;
    line-height:1.12!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
}

body.gx-device-mobile .gx-item-shop-title p{
    margin-top:3px!important;
    max-width:100%!important;
    font-size:8px!important;
    line-height:1.4!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
}

body.gx-device-mobile .gx-item-shop-close{
    grid-area:close!important;
    width:44px!important;
    height:44px!important;
    align-self:start!important;
}

body.gx-device-mobile .gx-item-shop-wallets{
    grid-area:wallets!important;
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
}

body.gx-device-mobile .gx-item-shop-wallet{
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    padding:8px 9px!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    gap:6px!important;
}

body.gx-device-mobile .gx-item-shop-wallet>i{
    font-size:15px!important;
}

body.gx-device-mobile .gx-item-shop-wallet small{
    font-size:6.5px!important;
    white-space:nowrap!important;
}

body.gx-device-mobile .gx-item-shop-wallet strong{
    max-width:100%!important;
    font-size:clamp(12px,3.7vw,16px)!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

body.gx-device-mobile .gx-item-shop-admin-btn{
    grid-area:admin!important;
    width:100%!important;
    min-height:42px!important;
    padding:0 10px!important;
    justify-content:center!important;
}

body.gx-device-mobile .gx-item-shop-tabs{
    width:100%!important;
    padding:8px 10px 0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    overflow:visible!important;
}

body.gx-device-mobile .gx-item-shop-tabs>button{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:5px 5px!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1.15!important;
    font-size:9px!important;
}

body.gx-device-mobile .gx-item-shop-tabs>button span{
    min-width:0!important;
    white-space:normal!important;
    word-break:keep-all!important;
}

body.gx-device-mobile .gx-economy-live-strip{
    padding:7px 10px!important;
    gap:5px!important;
}

body.gx-device-mobile .gx-economy-live-strip>span{
    font-size:7px!important;
    line-height:1.35!important;
}

body.gx-device-mobile .gx-item-shop-body{
    min-height:0!important;
    padding:10px 10px 14px!important;
}

body.gx-device-mobile .gx-item-shop-game-info{
    margin-bottom:9px!important;
    padding:10px!important;
    grid-template-columns:38px minmax(0,1fr)!important;
}

body.gx-device-mobile .gx-item-shop-game-info>span{
    width:38px!important;
    height:38px!important;
}

body.gx-device-mobile .gx-item-shop-game-info strong{
    font-size:12px!important;
}

body.gx-device-mobile .gx-item-shop-game-info p{
    font-size:7.5px!important;
    line-height:1.35!important;
}

body.gx-device-mobile.gx-device-phone .gx-dice-shop-list{
    grid-template-columns:1fr!important;
}

body.gx-device-mobile.gx-device-phone .gx-dice-shop-card{
    grid-template-columns:66px minmax(0,1fr)!important;
    padding:11px!important;
}

body.gx-device-mobile.gx-device-phone .gx-dice-shop-current{
    grid-template-columns:58px minmax(0,1fr)!important;
}

body.gx-device-mobile.gx-device-tablet .gx-item-shop-head{
    grid-template-columns:minmax(0,1fr) 44px!important;
    grid-template-areas:
        "title close"
        "wallets wallets"
        "admin admin"!important;
    padding:15px 16px 12px!important;
}

body.gx-device-mobile.gx-device-tablet .gx-item-shop-wallets{
    max-width:520px!important;
}

body.gx-device-mobile.gx-device-tablet .gx-item-shop-admin-btn{
    max-width:520px!important;
}

body.gx-device-mobile.gx-device-tablet .gx-dice-shop-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* Very small screens: keep wallet cards usable instead of crushing title. */
@media(max-width:360px){
    body.gx-device-mobile .gx-item-shop-wallets{
        grid-template-columns:1fr!important;
    }

    body.gx-device-mobile .gx-item-shop-tabs{
        grid-template-columns:1fr!important;
    }

    body.gx-device-mobile .gx-item-shop-tabs>button{
        min-height:42px!important;
    }
}

/* ---------------------------------------------------------------------
   LIGHT MODE — CHAOS HUD REBUILD
   Keep the arena dark for game readability, but every HUD/card around it
   becomes a real light surface with dark readable typography.
   --------------------------------------------------------------------- */
body.gx-theme-light .gx-chaos-pro-ui{
    background:
        radial-gradient(circle at 8% 4%,rgba(61,133,226,.11),transparent 30%),
        radial-gradient(circle at 94% 8%,rgba(132,78,224,.08),transparent 34%),
        linear-gradient(180deg,#eef5fc,#e6eff8)!important;
    color:#172338!important;
}

body.gx-theme-light .gx-chaos-pro-ui::before{
    opacity:.22!important;
    background:
        linear-gradient(rgba(69,111,171,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(69,111,171,.08) 1px,transparent 1px)!important;
}

/* Room top bar */
body.gx-theme-light .gx-chaos-pro-ui .gx-chaos-pro-topbar{
    background:
        radial-gradient(circle at 85% 0,rgba(112,75,214,.07),transparent 32%),
        rgba(255,255,255,.96)!important;
    border-color:#cddbea!important;
    box-shadow:0 14px 36px rgba(43,67,95,.11)!important;
}

body.gx-theme-light .gx-chaos-pro-ui .gx-chaos-pro-topbar::before{
    background:
        linear-gradient(90deg,rgba(59,121,214,.09),transparent 26%,transparent 75%,rgba(129,78,219,.07))!important;
}

body.gx-theme-light .gx-chaos-pro-room-title small{
    color:#6d83a4!important;
}

body.gx-theme-light .gx-chaos-pro-room-title h2{
    color:#162238!important;
}

body.gx-theme-light .gx-chaos-pro-room-title p{
    color:#6e7e93!important;
}

body.gx-theme-light .gx-chaos-game-back{
    color:#65778e!important;
    background:#f2f6fb!important;
    border-color:#d3dfeb!important;
}

body.gx-theme-light .gx-chaos-game-mark{
    color:#8055cf!important;
    background:#f0ebfb!important;
    border-color:#d8c9f2!important;
    box-shadow:none!important;
}

body.gx-theme-light .gx-chaos-build-chip{
    color:#70559d!important;
    background:#f3effa!important;
    border-color:#ddd1ee!important;
}

body.gx-theme-light .gx-chaos-add-bot-btn{
    color:#596b82!important;
    background:#f5f8fc!important;
    border-color:#d6e1ed!important;
}

/* Main HUD cards */
body.gx-theme-light .gx-chaos-pro-ui .gx-chaos-panel{
    background:rgba(255,255,255,.95)!important;
    border-color:#cedbea!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 10px 28px rgba(47,70,97,.09)!important;
}

body.gx-theme-light .gx-chaos-pro-ui .gx-chaos-panel-head small{
    color:#6d82a1!important;
}

body.gx-theme-light .gx-chaos-pro-ui .gx-chaos-panel-head strong{
    color:#18253a!important;
}

/* Players */
body.gx-theme-light .gx-chaos-game-player{
    background:
        linear-gradient(90deg,color-mix(in srgb,var(--player-color) 8%,#fff),#f8fbff)!important;
    border-color:#d3dfec!important;
}

body.gx-theme-light .gx-chaos-player-copy strong{
    color:#172338!important;
}

body.gx-theme-light .gx-chaos-player-copy strong em{
    color:#3e75c9!important;
}

body.gx-theme-light .gx-chaos-player-copy small{
    color:#6c7d93!important;
}

body.gx-theme-light .gx-chaos-game-player .mini-stats b{
    color:#314157!important;
}

body.gx-theme-light .gx-chaos-game-player .mini-stats small{
    color:#a67820!important;
}

body.gx-theme-light .gx-chaos-player-hp{
    background:#dfe8f2!important;
}

body.gx-theme-light .gx-chaos-player-slot{
    color:#fff!important;
}

/* MY STATUS — these were still dark in the screenshot */
body.gx-theme-light .gx-chaos-pro-my-card .gx-chaos-stat-grid>div{
    background:#f4f8fc!important;
    border-color:#d6e2ee!important;
}

body.gx-theme-light .gx-chaos-pro-my-card .gx-chaos-stat-grid span{
    color:#718299!important;
}

body.gx-theme-light .gx-chaos-pro-my-card .gx-chaos-stat-grid strong{
    color:#172338!important;
}

body.gx-theme-light .gx-chaos-my-hp-track{
    background:#dfe8f2!important;
}

/* Game info — fix dark boxes + dark text */
body.gx-theme-light .gx-chaos-pro-info-grid>div{
    background:#f4f8fc!important;
    border-color:#d5e1ed!important;
}

body.gx-theme-light .gx-chaos-pro-info-grid span{
    color:#718299!important;
}

body.gx-theme-light .gx-chaos-pro-info-grid strong{
    color:#172338!important;
}

/* Event log */
body.gx-theme-light .gx-chaos-pro-log-panel .gx-chaos-game-log{
    color:#34465d!important;
}

body.gx-theme-light .gx-chaos-pro-log-panel .gx-chaos-game-log>div:not(.empty){
    border-bottom-color:#e0e8f1!important;
}

body.gx-theme-light .gx-chaos-pro-log-panel .gx-chaos-game-log p{
    color:#52657d!important;
}

body.gx-theme-light .gx-chaos-pro-log-panel .gx-chaos-game-log .empty{
    color:#7a899c!important;
}

/* Status effects help — fix dark pills */
body.gx-theme-light .gx-chaos-pro-effect-help>span{
    background:#f4f8fc!important;
    border-color:#d6e1ed!important;
}

body.gx-theme-light .gx-chaos-pro-effect-help b{
    color:#26364b!important;
}

body.gx-theme-light .gx-chaos-pro-effect-help small{
    color:#718198!important;
}

body.gx-theme-light .gx-chaos-pro-effect-help>span i{
    background:#eee8fb!important;
}

/* Inventory panel inner controls */
body.gx-theme-light .gx-chaos-pro-items-panel .gx-chaos-owned-items>button{
    background:#f4f8fc!important;
    border-color:#d5e1ed!important;
    color:#24354b!important;
}

body.gx-theme-light .gx-chaos-pro-items-panel .gx-chaos-owned-items b{
    color:#24354b!important;
}

body.gx-theme-light .gx-chaos-pro-items-panel .gx-chaos-owned-items small{
    color:#74859a!important;
}

body.gx-theme-light .gx-chaos-pro-items-panel .gx-chaos-shop-target-wrap select{
    background:#fff!important;
    color:#26364b!important;
    border-color:#ccd9e7!important;
}

/* How-to light cards */
body.gx-theme-light .gx-chaos-simple-rules li{
    background:#f5f8fc!important;
    border-color:#d8e3ee!important;
}

body.gx-theme-light .gx-chaos-simple-rules li b{
    color:#24344a!important;
}

body.gx-theme-light .gx-chaos-simple-rules li small{
    color:#728298!important;
}

/* ---------------------------------------------------------------------
   Arena remains dark on purpose. Re-assert light text because the old
   generic Light Mode selector was turning dark-arena labels almost black.
   --------------------------------------------------------------------- */
body.gx-theme-light .gx-chaos-pro-arena-center{
    background:
        radial-gradient(circle at 50% 50%,rgba(96,36,161,.22),transparent 23%),
        radial-gradient(circle at 50% 52%,rgba(23,84,168,.16),transparent 46%),
        linear-gradient(180deg,#07101d,#050a13)!important;
    border-color:rgba(76,112,190,.18)!important;
    box-shadow:
        inset 0 0 65px rgba(67,31,131,.11),
        0 12px 30px rgba(46,66,91,.13)!important;
}

body.gx-theme-light .gx-chaos-pro-arena-center :is(
    .gx-chaos-pro-turn-card strong,
    .gx-chaos-pro-turn-flow>strong
){
    color:#f2f6ff!important;
}

body.gx-theme-light .gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow>p{
    color:#8fa0bd!important;
}

body.gx-theme-light .gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow .gx-chaos-turn-steps span{
    color:#a8b6cd!important;
}

body.gx-theme-light .gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow .gx-chaos-turn-steps i{
    color:#e7edff!important;
}

/* Board tile labels must stay bright on their dark colored tiles. */
body.gx-theme-light .gx-chaos-pro-board-grid .gx-chaos-board-cell{
    filter:none!important;
    border-color:color-mix(in srgb,var(--tile-glow) 38%,#203047)!important;
}

body.gx-theme-light .gx-chaos-pro-board-grid .gx-chaos-board-cell>strong{
    color:#f1f5fb!important;
    text-shadow:0 1px 3px rgba(0,0,0,.75)!important;
}

body.gx-theme-light .gx-chaos-pro-board-grid .gx-chaos-board-cell>small{
    color:#aebbd0!important;
    text-shadow:0 1px 2px rgba(0,0,0,.72)!important;
}

body.gx-theme-light .gx-chaos-pro-board-grid .gx-chaos-board-cell .cell-index{
    color:#dce8f8!important;
    background:rgba(4,9,17,.58)!important;
}

/* Dice console in light mode */
body.gx-theme-light .gx-chaos-pro-dice-console{
    background:rgba(255,255,255,.96)!important;
    border-color:#ccd9e8!important;
}

body.gx-theme-light .gx-chaos-pro-dice-platform{
    background:#eef4fa!important;
    border-color:#d2deea!important;
}

body.gx-theme-light .gx-chaos-pro-dice-console #gx-chaos-roll-btn:disabled{
    background:#e5ebf2!important;
    color:#8795a7!important;
    border:1px solid #d4dee9!important;
}

body.gx-theme-light .gx-chaos-roll-power{
    background:
        linear-gradient(90deg,#d7eafe 0 34%,#e8e1ff 34% 69%,#ffe2d7 69% 100%)!important;
}

body.gx-theme-light .gx-chaos-roll-power>b{
    color:#3d4c61!important;
    text-shadow:none!important;
}

/* Light-mode mobile sheets */
body.gx-theme-light.gx-device-mobile #right-sidebar-menu{
    background:
        radial-gradient(circle at 30% 0,rgba(68,126,210,.08),transparent 28%),
        linear-gradient(180deg,#ffffff,#f4f8fc)!important;
}

body.gx-theme-light.gx-device-mobile .gx-item-shop-modal{
    background:#fff!important;
    border-color:#d1deeb!important;
}

body.gx-theme-light.gx-device-mobile .gx-item-shop-head{
    background:#fff!important;
}

body.gx-theme-light.gx-device-mobile .gx-item-shop-tabs{
    background:#fff!important;
}

body.gx-theme-light.gx-device-mobile .gx-item-shop-tabs>button{
    color:#63758d!important;
    background:#f5f8fc!important;
    border-color:#d8e3ee!important;
}

body.gx-theme-light.gx-device-mobile .gx-item-shop-tabs>button.active{
    color:#315d9c!important;
    background:#eaf2ff!important;
    border-color:#bfd3ef!important;
}

/* Avoid ultra-tiny copy in dice cards on touch screens. */
body.gx-device-mobile .gx-dice-shop-copy>small{
    font-size:7px!important;
}

body.gx-device-mobile .gx-dice-shop-copy>strong{
    font-size:13px!important;
    line-height:1.25!important;
}

body.gx-device-mobile .gx-dice-shop-copy>p{
    font-size:8px!important;
    line-height:1.45!important;
}

body.gx-device-mobile .gx-dice-power-chip b{
    font-size:8px!important;
}

body.gx-device-mobile .gx-dice-power-chip span{
    font-size:7px!important;
}

/* V57 marker */
html[data-gx-theme="light"]{
    color-scheme:light;
}


/* =====================================================================
   GX V58 — CHAOS TILE TOOLTIP + BOARD READABILITY
   ===================================================================== */
.gx-chaos-pro-board-grid .gx-chaos-board-cell{
  overflow:visible!important;
  position:relative!important;
}
.gx-chaos-pro-board-grid .gx-chaos-board-cell > strong{
  font-size:clamp(11px, .72vw, 13px)!important;
  line-height:1.12!important;
  letter-spacing:.01em!important;
  text-shadow:0 1px 3px rgba(0,0,0,.85)!important;
}
.gx-chaos-pro-board-grid .gx-chaos-board-cell > small{
  font-size:clamp(8px,.56vw,10px)!important;
  line-height:1.15!important;
  opacity:.98!important;
  text-shadow:0 1px 2px rgba(0,0,0,.82)!important;
}
.gx-chaos-pro-board-grid .gx-chaos-board-cell:hover{
  transform:translateY(-2px) scale(1.015)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.15),0 14px 26px rgba(0,0,0,.26),0 0 18px color-mix(in srgb,var(--tile-glow) 65%, transparent)!important;
  z-index:14!important;
}
.gx-chaos-pro-board-grid .gx-chaos-board-cell::after{
  content:"ชี้เมาส์เพื่อดูข้อมูล";
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  padding:3px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  color:#dce8ff;
  background:rgba(5,12,24,.62);
  border:1px solid rgba(129,161,221,.16);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  white-space:nowrap;
}
.gx-chaos-pro-board-grid .gx-chaos-board-cell:hover::after{
  opacity:1;
}
.gx-chaos-pro-board-grid .gx-chaos-board-cell.has-menu::before{
  content:"⋯";
  position:absolute;
  right:6px;
  top:6px;
  width:18px;
  height:18px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:900;
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}

.gx-chaos-tile-tooltip{
  position:fixed;
  z-index:2000;
  width:min(320px, calc(100vw - 20px));
  padding:12px 12px 11px;
  border-radius:16px;
  background:
    radial-gradient(circle at 0 0, rgba(97,134,222,.13), transparent 35%),
    linear-gradient(180deg, rgba(10,18,34,.98), rgba(7,12,24,.98));
  border:1px solid rgba(109,139,203,.22);
  box-shadow:0 18px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
  color:#eef4ff;
  opacity:0;
  transform:translateY(4px) scale(.98);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.gx-chaos-tile-tooltip.show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.gx-chaos-tile-tooltip-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.gx-chaos-tile-tooltip-head i{
  width:24px;
  height:24px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#a9c4ff;
  background:rgba(76,112,190,.18);
  border:1px solid rgba(118,152,221,.18);
  flex:0 0 auto;
}
.gx-chaos-tile-tooltip-head strong{
  font-size:14px;
  font-weight:900;
  line-height:1.2;
}
.gx-chaos-tile-tooltip > p{
  margin:0;
  color:#c5d4ec;
  font-size:12px;
  line-height:1.55;
}
.gx-chaos-tile-tooltip-menu{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(132,155,201,.12);
  display:grid;
  gap:6px;
}
.gx-chaos-tile-tooltip-menu > span{
  display:flex;
  align-items:center;
  gap:6px;
  color:#90aef0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
}
.gx-chaos-tile-tooltip-menu small{
  display:block;
  color:#edf4ff;
  font-size:12px;
  line-height:1.5;
}

/* Light mode tooltip */
body.gx-theme-light .gx-chaos-tile-tooltip{
  background:
    radial-gradient(circle at 0 0, rgba(76,118,206,.1), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
  color:#182538;
  border-color:#cedced;
  box-shadow:0 18px 34px rgba(63,83,110,.14);
}
body.gx-theme-light .gx-chaos-tile-tooltip > p{
  color:#55697f;
}
body.gx-theme-light .gx-chaos-tile-tooltip-head i{
  color:#5077c9;
  background:#edf3ff;
  border-color:#d3e0f4;
}
body.gx-theme-light .gx-chaos-tile-tooltip-menu{
  border-top-color:#dfE8f1;
}
body.gx-theme-light .gx-chaos-tile-tooltip-menu small{
  color:#233348;
}
body.gx-theme-light .gx-chaos-pro-board-grid .gx-chaos-board-cell::after{
  color:#32455e;
  background:rgba(255,255,255,.9);
  border-color:#d5e1ef;
}

/* Touch device: use click hint */
body.gx-device-mobile .gx-chaos-pro-board-grid .gx-chaos-board-cell::after{
  content:"แตะเพื่อดูข้อมูล";
}
body.gx-device-mobile .gx-chaos-pro-board-grid .gx-chaos-board-cell > strong{
  font-size:11px!important;
}
body.gx-device-mobile .gx-chaos-pro-board-grid .gx-chaos-board-cell > small{
  font-size:8px!important;
}


/* =====================================================================
   GX V59 — ITEM SHOP MOBILE/IPAD + LIGHT MODE HOTFIX
   ===================================================================== */

/* ---------- Item Shop mobile / iPad chosen mode ---------- */
body.gx-device-mobile .gx-item-shop-modal,
body.gx-device-ipad .gx-item-shop-modal{
  width:min(calc(100vw - 14px), 560px)!important;
  max-width:calc(100vw - 14px)!important;
  max-height:calc(100dvh - 10px)!important;
  border-radius:22px!important;
  overflow:hidden auto!important;
}

body.gx-device-mobile .gx-item-shop-head,
body.gx-device-ipad .gx-item-shop-head{
  min-height:unset!important;
  padding:18px 16px 12px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:
    "title close"
    "wallets wallets"!important;
  gap:12px!important;
  align-items:start!important;
}

body.gx-device-mobile .gx-item-shop-title,
body.gx-device-ipad .gx-item-shop-title{
  grid-area:title!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:start!important;
}

body.gx-device-mobile .gx-item-shop-title .icon,
body.gx-device-ipad .gx-item-shop-title .icon{
  width:54px!important;
  height:54px!important;
  border-radius:16px!important;
  flex:0 0 54px!important;
}

body.gx-device-mobile .gx-item-shop-title > div,
body.gx-device-ipad .gx-item-shop-title > div{
  min-width:0!important;
}

body.gx-device-mobile .gx-item-shop-title b,
body.gx-device-ipad .gx-item-shop-title b{
  display:block!important;
  margin-bottom:3px!important;
  font-size:10px!important;
  letter-spacing:.14em!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}

body.gx-device-mobile .gx-item-shop-title h3,
body.gx-device-ipad .gx-item-shop-title h3{
  margin:0!important;
  font-size:clamp(26px, 7vw, 34px)!important;
  line-height:1.02!important;
  font-weight:900!important;
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
}

body.gx-device-mobile .gx-item-shop-title p,
body.gx-device-ipad .gx-item-shop-title p{
  margin:6px 0 0!important;
  font-size:12px!important;
  line-height:1.5!important;
  color:#8ea0bf!important;
  max-width:100%!important;
  display:block!important;
  white-space:normal!important;
  word-break:break-word!important;
}

body.gx-device-mobile .gx-item-shop-wallets,
body.gx-device-ipad .gx-item-shop-wallets{
  grid-area:wallets!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr)) auto!important;
  gap:10px!important;
  align-items:stretch!important;
  width:100%!important;
}

body.gx-device-mobile .gx-item-shop-wallet,
body.gx-device-ipad .gx-item-shop-wallet{
  width:100%!important;
  min-width:0!important;
  min-height:58px!important;
  padding:10px 12px!important;
  display:grid!important;
  grid-template-columns:26px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:center!important;
}

body.gx-device-mobile .gx-item-shop-wallet > i,
body.gx-device-ipad .gx-item-shop-wallet > i{
  font-size:18px!important;
}

body.gx-device-mobile .gx-item-shop-wallet small,
body.gx-device-ipad .gx-item-shop-wallet small{
  display:block!important;
  font-size:9px!important;
  line-height:1.1!important;
  color:#8a8f9d!important;
}

body.gx-device-mobile .gx-item-shop-wallet strong,
body.gx-device-ipad .gx-item-shop-wallet strong{
  display:block!important;
  margin-top:2px!important;
  font-size:clamp(18px,4.5vw,21px)!important;
  line-height:1.08!important;
}

body.gx-device-mobile .gx-item-shop-admin-btn,
body.gx-device-ipad .gx-item-shop-admin-btn{
  width:auto!important;
  min-width:70px!important;
  padding:0 12px!important;
  border-radius:14px!important;
  justify-self:stretch!important;
  align-self:stretch!important;
  font-size:11px!important;
}

body.gx-device-mobile .gx-item-shop-close,
body.gx-device-ipad .gx-item-shop-close{
  grid-area:close!important;
  width:42px!important;
  height:42px!important;
  justify-self:end!important;
  align-self:start!important;
  margin:0!important;
}

body.gx-device-mobile .gx-item-shop-tabs,
body.gx-device-ipad .gx-item-shop-tabs{
  padding:12px 12px 0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}

body.gx-device-mobile .gx-item-shop-tabs button,
body.gx-device-ipad .gx-item-shop-tabs button{
  min-height:58px!important;
  padding:10px 8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  text-align:center!important;
  font-size:11px!important;
  line-height:1.2!important;
}

body.gx-device-mobile .gx-item-shop-tabs button i,
body.gx-device-ipad .gx-item-shop-tabs button i{
  font-size:16px!important;
}

body.gx-device-mobile .gx-item-shop-tabs button span,
body.gx-device-ipad .gx-item-shop-tabs button span{
  display:block!important;
  font-size:11px!important;
  line-height:1.2!important;
}

body.gx-device-mobile .gx-economy-live-strip,
body.gx-device-ipad .gx-economy-live-strip{
  margin-top:0!important;
  padding:8px 12px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:6px!important;
}

body.gx-device-mobile .gx-economy-live-strip > span,
body.gx-device-ipad .gx-economy-live-strip > span{
  font-size:10px!important;
  line-height:1.4!important;
}

body.gx-device-mobile .gx-item-shop-grid,
body.gx-device-ipad .gx-item-shop-grid{
  grid-template-columns:1fr!important;
  gap:12px!important;
  padding:12px!important;
}

body.gx-device-mobile .gx-store-item,
body.gx-device-ipad .gx-store-item{
  min-height:unset!important;
  padding:14px!important;
  border-radius:18px!important;
}

body.gx-device-mobile .gx-store-item-copy small,
body.gx-device-ipad .gx-store-item-copy small{
  font-size:10px!important;
}
body.gx-device-mobile .gx-store-item-copy strong,
body.gx-device-ipad .gx-store-item-copy strong{
  font-size:22px!important;
  line-height:1.1!important;
}
body.gx-device-mobile .gx-store-item-copy p,
body.gx-device-ipad .gx-store-item-copy p{
  font-size:12px!important;
  line-height:1.55!important;
}

body.gx-device-mobile .gx-dice-shop-card,
body.gx-device-ipad .gx-dice-shop-card{
  min-height:unset!important;
  padding:14px!important;
  border-radius:18px!important;
}

body.gx-device-mobile .gx-dice-shop-card .gx-dice-shop-preview,
body.gx-device-ipad .gx-dice-shop-card .gx-dice-shop-preview{
  gap:10px!important;
}

body.gx-device-mobile .gx-dice-shop-copy small,
body.gx-device-ipad .gx-dice-shop-copy small{
  font-size:10px!important;
}

body.gx-device-mobile .gx-dice-shop-copy strong,
body.gx-device-ipad .gx-dice-shop-copy strong{
  font-size:24px!important;
  line-height:1.08!important;
}

body.gx-device-mobile .gx-dice-shop-copy p,
body.gx-device-ipad .gx-dice-shop-copy p{
  font-size:12px!important;
  line-height:1.55!important;
}

body.gx-device-mobile .gx-item-shop-foot,
body.gx-device-ipad .gx-item-shop-foot{
  padding:12px!important;
  display:grid!important;
  gap:8px!important;
}
body.gx-device-mobile .gx-item-shop-foot .inventory,
body.gx-device-ipad .gx-item-shop-foot .inventory{
  width:100%!important;
  min-height:48px!important;
}
body.gx-device-mobile .gx-item-shop-foot span,
body.gx-device-ipad .gx-item-shop-foot span{
  font-size:10px!important;
  line-height:1.45!important;
}

/* iPad landscape: 2 columns in grid */
@media (min-width: 700px){
  body.gx-device-ipad .gx-item-shop-modal{
    width:min(92vw, 980px)!important;
    max-width:92vw!important;
  }
  body.gx-device-ipad .gx-item-shop-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.gx-device-ipad .gx-item-shop-title h3{
    font-size:32px!important;
  }
}

/* ---------- Light mode contrast polish ---------- */
body.gx-theme-light{
  background:
    radial-gradient(circle at 20% 0, rgba(138,168,235,.20), transparent 28%),
    radial-gradient(circle at 100% 0, rgba(193,174,235,.18), transparent 28%),
    linear-gradient(180deg, #f6f9ff 0%, #edf3fb 100%)!important;
  color:#223246!important;
}

body.gx-theme-light .gx-item-shop-modal{
  background:
    radial-gradient(circle at 85% 0, rgba(116,98,231,.09), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f7faff 100%)!important;
  border-color:#d8e2f1!important;
  box-shadow:0 22px 50px rgba(45,76,118,.16)!important;
}

body.gx-theme-light .gx-item-shop-title b{color:#6580bf!important;}
body.gx-theme-light .gx-item-shop-title h3{color:#1c2d41!important;}
body.gx-theme-light .gx-item-shop-title p{color:#64778c!important;}

body.gx-theme-light .gx-item-shop-wallet{
  background:linear-gradient(180deg,#fffdf6 0%, #fff8e4 100%)!important;
  border-color:#eadcb6!important;
}
body.gx-theme-light .gx-item-shop-wallet.point{
  background:linear-gradient(180deg,#f7fbff 0%, #eef5ff 100%)!important;
  border-color:#d5e3fb!important;
}
body.gx-theme-light .gx-item-shop-wallet strong{color:#223246!important;}
body.gx-theme-light .gx-item-shop-wallet small{color:#7d8fa3!important;}

body.gx-theme-light .gx-item-shop-tabs button{
  background:#f7faff!important;
  color:#4d627c!important;
  border-color:#d7e2f1!important;
}
body.gx-theme-light .gx-item-shop-tabs button.active{
  color:#233347!important;
  background:linear-gradient(180deg,#ffffff 0%,#eef4ff 100%)!important;
  border-color:#b7caf0!important;
  box-shadow:0 8px 22px rgba(86,117,178,.10)!important;
}

body.gx-theme-light .gx-economy-live-strip{
  background:#f7fbff!important;
  border-top:1px solid #dde7f5!important;
  border-bottom:1px solid #dde7f5!important;
  color:#4e6077!important;
}

body.gx-theme-light .gx-store-item,
body.gx-theme-light .gx-dice-shop-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  border-color:#d9e4f1!important;
  box-shadow:0 12px 28px rgba(84,106,145,.08)!important;
}

body.gx-theme-light .gx-store-item-copy strong,
body.gx-theme-light .gx-dice-shop-copy strong{
  color:#1d2d41!important;
}
body.gx-theme-light .gx-store-item-copy p,
body.gx-theme-light .gx-dice-shop-copy p{
  color:#5d7188!important;
}
body.gx-theme-light .gx-store-item-copy small,
body.gx-theme-light .gx-dice-shop-copy small{
  color:#7284a0!important;
}

body.gx-theme-light .gx-chaos-pro-panel,
body.gx-theme-light .gx-chaos-pro-status,
body.gx-theme-light .gx-chaos-pro-items{
  background:linear-gradient(180deg,#ffffff 0%,#f6f9ff 100%)!important;
  border-color:#dde6f3!important;
  box-shadow:0 10px 26px rgba(83,110,148,.08)!important;
}

body.gx-theme-light .gx-chaos-pro-stage{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  border-color:#d7e3f3!important;
}

body.gx-theme-light .gx-chaos-pro-stage-center{
  background:
    radial-gradient(circle at 50% 35%, rgba(53,93,170,.09), transparent 36%),
    linear-gradient(180deg,#edf4ff 0%, #f9fbff 100%)!important;
  border-color:#dfe7f4!important;
}

body.gx-theme-light .gx-chaos-pro-stage-center .logo,
body.gx-theme-light .gx-chaos-pro-stage-center .logo *,
body.gx-theme-light .gx-chaos-pro-stage-center .gx-chaos-arena-logo,
body.gx-theme-light .gx-chaos-pro-stage-center .gx-chaos-arena-logo *{
  filter:none!important;
}

body.gx-theme-light .gx-chaos-pro-status .stat-card,
body.gx-theme-light .gx-chaos-pro-items .item-card,
body.gx-theme-light .gx-chaos-pro-panel .player-card{
  background:#fbfdff!important;
  border-color:#e0e8f4!important;
}



/* =====================================================================
   GX V60 — CHAOS LANDING HP SYNC
   HP does not change visually until the pawn reaches the destination.
   ===================================================================== */

.gx-chaos-game-player.gx-chaos-hp-heal{
    z-index:8!important;
    animation:gxChaosHpCardHeal .72s ease both!important;
}
.gx-chaos-board-token.gx-chaos-hp-heal{
    animation:gxChaosTokenHeal .72s ease both!important;
}

.gx-chaos-hp-heal-float{
    position:absolute;
    top:-12px;
    right:8px;
    z-index:21;
    padding:4px 7px;
    border-radius:8px;
    color:#ecfff7;
    background:rgba(29,156,101,.94);
    border:1px solid rgba(105,241,183,.38);
    box-shadow:
        0 8px 18px rgba(0,0,0,.30),
        0 0 20px rgba(61,226,157,.24);
    font-size:10px;
    font-weight:1000;
    pointer-events:none;
    animation:gxChaosHealFloat 1s ease-out both;
}

@keyframes gxChaosHpCardHeal{
    0%{
        transform:scale(1);
        box-shadow:0 0 0 rgba(62,226,157,0);
    }
    28%{
        transform:scale(1.018);
        box-shadow:
            0 0 0 2px rgba(87,232,170,.38),
            0 0 28px rgba(61,226,157,.22);
    }
    100%{
        transform:scale(1);
    }
}

@keyframes gxChaosTokenHeal{
    0%,100%{
        transform:scale(1);
        filter:none;
    }
    32%{
        transform:scale(1.22);
        filter:
            brightness(1.45)
            drop-shadow(0 0 12px rgba(81,242,177,.72));
    }
}

@keyframes gxChaosHealFloat{
    0%{
        opacity:0;
        transform:translateY(8px) scale(.85);
    }
    18%{
        opacity:1;
        transform:translateY(0) scale(1.06);
    }
    100%{
        opacity:0;
        transform:translateY(-30px) scale(1);
    }
}

/* Green edge flash when YOU heal after landing */
body.gx-chaos-self-healed::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:99989;
    pointer-events:none;
    box-shadow:inset 0 0 90px rgba(48,223,150,.42);
    background:
        radial-gradient(circle,transparent 58%,rgba(35,174,113,.12));
    animation:gxChaosSelfHealFlash .72s ease both;
}

@keyframes gxChaosSelfHealFlash{
    0%,100%{opacity:0}
    24%{opacity:1}
    60%{opacity:.55}
}

body.gx-theme-light .gx-chaos-hp-heal-float{
    color:#0d4f36;
    background:#dff8ec;
    border-color:#9ddfbe;
    box-shadow:0 8px 18px rgba(49,104,76,.14);
}

@media(prefers-reduced-motion:reduce){
    .gx-chaos-game-player.gx-chaos-hp-heal,
    .gx-chaos-board-token.gx-chaos-hp-heal,
    .gx-chaos-hp-heal-float{
        animation-duration:.12s!important;
    }
}


/* =====================================================================
   GX V61 — CHAOS SOUND FX + DEFENSE COUNTDOWN
   ===================================================================== */

.gx-chaos-sound-btn{
    min-height:40px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:11px;
    color:#9dc7ff;
    background:rgba(50,101,174,.08);
    border:1px solid rgba(74,126,201,.13);
    font-family:'Kanit',sans-serif;
    font-size:8px;
    font-weight:900;
    cursor:pointer;
    transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease;
}
.gx-chaos-sound-btn:hover{
    transform:translateY(-1px);
    color:#c1dcff;
    border-color:rgba(81,145,228,.24);
    background:rgba(51,115,199,.12);
}
.gx-chaos-sound-btn.muted{
    color:#78869c;
    background:rgba(255,255,255,.025);
    border-color:rgba(114,128,151,.10);
}
.gx-chaos-sound-btn.muted i{color:#718096}

/* Circular defense clock */
.gx-chaos-defense-timer-row{
    margin:10px 0 12px;
    padding:10px;
    display:grid;
    grid-template-columns:94px minmax(0,1fr);
    gap:12px;
    align-items:center;
    border-radius:14px;
    background:
        radial-gradient(circle at 0 50%,rgba(87,105,218,.11),transparent 34%),
        rgba(3,10,22,.34);
    border:1px solid rgba(102,126,193,.12);
}

.gx-chaos-defense-timer-ring{
    --defense-angle:360deg;
    width:86px;
    height:86px;
    position:relative;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:
        conic-gradient(
            #6d7cff 0deg,
            #9a5cff var(--defense-angle),
            rgba(65,78,116,.16) var(--defense-angle),
            rgba(65,78,116,.16) 360deg
        );
    box-shadow:
        0 0 0 1px rgba(108,120,227,.12),
        0 0 26px rgba(89,79,220,.14);
}
.gx-chaos-defense-timer-ring::before{
    content:"";
    position:absolute;
    inset:6px;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 35%,rgba(87,87,193,.10),transparent 55%),
        #07101d;
    border:1px solid rgba(120,137,198,.12);
}
.gx-chaos-defense-timer-ring .inner{
    position:relative;
    z-index:2;
    display:grid;
    justify-items:center;
    gap:1px;
    text-align:center;
}
.gx-chaos-defense-timer-ring .inner>i{
    color:#8897ff;
    font-size:11px;
}
.gx-chaos-defense-timer-ring .inner>strong{
    display:flex;
    align-items:baseline;
    gap:2px;
    color:#f4f6ff;
    line-height:1;
}
.gx-chaos-defense-timer-ring .inner>strong>b{
    font-size:22px;
    font-weight:1000;
    font-variant-numeric:tabular-nums;
}
.gx-chaos-defense-timer-ring .inner>strong>small{
    color:#8c9bb5;
    font-size:7px;
}
.gx-chaos-defense-timer-ring .inner>span{
    max-width:64px;
    color:#8795ae;
    font-size:6px;
    line-height:1.15;
}
.gx-chaos-defense-timer-ring.warning{
    background:
        conic-gradient(
            #f5b94d 0deg,
            #f08b45 var(--defense-angle),
            rgba(97,73,44,.18) var(--defense-angle),
            rgba(97,73,44,.18) 360deg
        );
    box-shadow:0 0 24px rgba(239,160,61,.18);
}
.gx-chaos-defense-timer-ring.warning .inner>i{color:#f6bf58}
.gx-chaos-defense-timer-ring.danger{
    animation:gxChaosDefenseDangerPulse .55s ease-in-out infinite alternate;
    background:
        conic-gradient(
            #ff526c 0deg,
            #ff7d5b var(--defense-angle),
            rgba(117,48,61,.18) var(--defense-angle),
            rgba(117,48,61,.18) 360deg
        );
    box-shadow:
        0 0 0 2px rgba(255,79,105,.10),
        0 0 30px rgba(255,62,92,.23);
}
.gx-chaos-defense-timer-ring.danger .inner>i,
.gx-chaos-defense-timer-ring.danger .inner>strong>b{
    color:#ff8395;
}
.gx-chaos-defense-timer-ring.expired{
    filter:saturate(.45);
    animation:none;
}

.gx-chaos-defense-timer-row>.copy{
    min-width:0;
    display:grid;
    gap:4px;
}
.gx-chaos-defense-timer-row>.copy>b{
    color:#eef3ff;
    font-size:12px;
}
.gx-chaos-defense-timer-row>.copy>span{
    color:#8e9db7;
    font-size:8.5px;
    line-height:1.45;
}
.gx-chaos-defense-timer-row>.copy>span strong{color:#b8c8ec}
.gx-chaos-defense-timer-row>.copy>em{
    display:flex;
    align-items:center;
    gap:5px;
    color:#5f7394;
    font-size:6.8px;
    font-style:normal;
}

@keyframes gxChaosDefenseDangerPulse{
    from{transform:scale(.98);filter:brightness(.92)}
    to{transform:scale(1.04);filter:brightness(1.18)}
}

/* Light mode */
body.gx-theme-light .gx-chaos-sound-btn{
    color:#3f6ea8;
    background:#eef5ff;
    border-color:#d1e0f3;
}
body.gx-theme-light .gx-chaos-sound-btn.muted{
    color:#78899e;
    background:#f4f7fb;
    border-color:#dce4ee;
}
body.gx-theme-light .gx-chaos-defense-timer-row{
    background:
        radial-gradient(circle at 0 50%,rgba(82,115,205,.08),transparent 34%),
        #f6f9fd;
    border-color:#d7e2ef;
}
body.gx-theme-light .gx-chaos-defense-timer-ring::before{
    background:#fff;
    border-color:#d6e0ed;
}
body.gx-theme-light .gx-chaos-defense-timer-ring .inner>strong{color:#1e2c40}
body.gx-theme-light .gx-chaos-defense-timer-ring .inner>span{color:#667a91}
body.gx-theme-light .gx-chaos-defense-timer-row>.copy>b{color:#1e2c40}
body.gx-theme-light .gx-chaos-defense-timer-row>.copy>span{color:#65788f}
body.gx-theme-light .gx-chaos-defense-timer-row>.copy>span strong{color:#324e72}

/* Mobile / iPad */
body.gx-device-mobile .gx-chaos-sound-btn{
    width:40px!important;
    min-width:40px!important;
    padding:0!important;
}
body.gx-device-mobile .gx-chaos-sound-btn span{display:none!important}
body.gx-device-mobile .gx-chaos-sound-btn i{font-size:13px}

body.gx-device-mobile .gx-chaos-defense-timer-row{
    grid-template-columns:76px minmax(0,1fr)!important;
    gap:9px!important;
    padding:8px!important;
}
body.gx-device-mobile .gx-chaos-defense-timer-ring{
    width:70px!important;
    height:70px!important;
}
body.gx-device-mobile .gx-chaos-defense-timer-ring::before{inset:5px!important}
body.gx-device-mobile .gx-chaos-defense-timer-ring .inner>strong>b{font-size:18px!important}
body.gx-device-mobile .gx-chaos-defense-timer-row>.copy>b{font-size:10px!important}
body.gx-device-mobile .gx-chaos-defense-timer-row>.copy>span{font-size:8px!important}

@media(max-width:390px){
    body.gx-device-mobile .gx-chaos-defense-timer-row{
        grid-template-columns:64px minmax(0,1fr)!important;
    }
    body.gx-device-mobile .gx-chaos-defense-timer-ring{
        width:60px!important;
        height:60px!important;
    }
    body.gx-device-mobile .gx-chaos-defense-timer-ring .inner>strong>b{font-size:15px!important}
    body.gx-device-mobile .gx-chaos-defense-timer-ring .inner>span{display:none}
}

@media(prefers-reduced-motion:reduce){
    .gx-chaos-defense-timer-ring.danger{animation:none!important}
}


/* =====================================================================
   GX V62 — DEFINITIVE ITEM SHOP HEADER FIX
   This section intentionally comes LAST so old V36–V61 responsive rules
   cannot squeeze the title column again.
   ===================================================================== */

/* Real compact state: applied by ResizeObserver when modal <= 720px */
.gx-item-shop-modal.gx-shop-compact{
    width:min(100%, 620px)!important;
    max-width:calc(100vw - 12px)!important;
    max-height:calc(100dvh - 10px)!important;
    overflow:hidden auto!important;
    border-radius:20px!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-item-shop-head{
    position:relative!important;
    min-height:0!important;
    padding:16px 14px 12px!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    grid-template-areas:none!important;
    gap:10px!important;
    align-items:stretch!important;
}

/* Title always owns the whole first row.
   Nothing is allowed to sit beside it and squeeze it. */
.gx-item-shop-modal.gx-shop-compact .gx-item-shop-title{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    display:grid!important;
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:11px!important;
    align-items:center!important;

    padding-right:48px!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-item-shop-title>.icon{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    flex:0 0 50px!important;
    border-radius:14px!important;
    font-size:18px!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-item-shop-title>div{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-item-shop-title b{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    margin:0 0 3px!important;
    padding:0!important;

    font-size:9px!important;
    line-height:1.1!important;
    letter-spacing:.13em!important;

    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-item-shop-title h3{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;

    font-size:26px!important;
    line-height:1.08!important;
    letter-spacing:-.02em!important;

    /* Critical fix: Thai title must NOT be broken one character per line */
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    writing-mode:horizontal-tb!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-item-shop-title p{
    display:block!important;
    width:100%!important;
    max-width:36ch!important;
    margin:5px 0 0!important;
    padding:0!important;

    font-size:10px!important;
    line-height:1.45!important;

    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    writing-mode:horizontal-tb!important;
}

/* Close button is absolutely positioned, so it can never create an
   implicit Grid column that steals width from the title. */
.gx-item-shop-modal.gx-shop-compact .gx-item-shop-close{
    position:absolute!important;
    top:14px!important;
    right:14px!important;
    z-index:3!important;

    grid-column:auto!important;
    grid-row:auto!important;
    grid-area:auto!important;

    width:42px!important;
    height:42px!important;
    margin:0!important;
}

/* Wallets own their own second row. Reset ALL old responsive grid rules. */
.gx-item-shop-modal.gx-shop-compact .gx-item-shop-wallets{
    grid-column:1!important;
    grid-row:2!important;
    grid-area:auto!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-item-shop-wallets .gx-item-shop-wallet{
    grid-column:auto!important;
    grid-row:auto!important;
    grid-area:auto!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:54px!important;

    padding:8px 10px!important;
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    gap:7px!important;
    align-items:center!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-item-shop-wallet small{
    display:block!important;
    font-size:8px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-item-shop-wallet strong{
    display:block!important;
    max-width:100%!important;
    margin-top:2px!important;

    font-size:16px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

/* Admin button gets a dedicated third row. */
.gx-item-shop-modal.gx-shop-compact .gx-item-shop-admin-btn{
    grid-column:1!important;
    grid-row:3!important;
    grid-area:auto!important;

    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    margin:0!important;
    padding:0 12px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    border-radius:12px!important;
    font-size:10px!important;
}

/* Keep hidden when JS hides it for non-admin users. */
.gx-item-shop-modal.gx-shop-compact .gx-item-shop-admin-btn[style*="display:none"],
.gx-item-shop-modal.gx-shop-compact .gx-item-shop-admin-btn[style*="display: none"]{
    display:none!important;
}

/* Tabs must never push or overlap the header. */
.gx-item-shop-modal.gx-shop-compact .gx-item-shop-tabs{
    width:100%!important;
    min-width:0!important;
    padding:10px 10px 0!important;

    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;

    overflow:visible!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-item-shop-tabs>button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:52px!important;

    padding:7px 5px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;

    text-align:center!important;
    line-height:1.15!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-item-shop-tabs>button span{
    display:block!important;
    width:100%!important;
    min-width:0!important;

    font-size:10px!important;
    line-height:1.15!important;

    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
}

/* Shop content: one readable column for narrow modal */
.gx-item-shop-modal.gx-shop-compact .gx-item-shop-grid,
.gx-item-shop-modal.gx-shop-compact .gx-dice-shop-list{
    grid-template-columns:1fr!important;
    gap:10px!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-item-shop-body{
    padding:10px!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-dice-shop-card{
    grid-template-columns:72px minmax(0,1fr)!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-dice-shop-copy>strong{
    font-size:15px!important;
    line-height:1.2!important;
}

.gx-item-shop-modal.gx-shop-compact .gx-dice-shop-copy>p{
    font-size:9px!important;
    line-height:1.45!important;
}

/* Generic fallback: fixes the bug even before ResizeObserver runs,
   and also fixes narrow desktop windows where "Mobile" mode was not selected. */
@media (max-width:760px){
    #gx-item-shop-modal .gx-item-shop-head{
        position:relative!important;
        grid-template-columns:minmax(0,1fr)!important;
        grid-template-areas:none!important;
    }

    #gx-item-shop-modal .gx-item-shop-title{
        width:100%!important;
        min-width:0!important;
        grid-column:1!important;
    }

    #gx-item-shop-modal .gx-item-shop-title h3{
        white-space:nowrap!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        writing-mode:horizontal-tb!important;
    }

    #gx-item-shop-modal .gx-item-shop-wallets .gx-item-shop-wallet{
        grid-column:auto!important;
        grid-row:auto!important;
    }
}

/* Small phones: stack wallets so 7–9 digit balances cannot crush them. */
@media (max-width:390px){
    .gx-item-shop-modal.gx-shop-compact .gx-item-shop-wallets{
        grid-template-columns:1fr!important;
    }

    .gx-item-shop-modal.gx-shop-compact .gx-item-shop-title{
        grid-template-columns:44px minmax(0,1fr)!important;
        gap:9px!important;
        padding-right:44px!important;
    }

    .gx-item-shop-modal.gx-shop-compact .gx-item-shop-title>.icon{
        width:44px!important;
        height:44px!important;
        min-width:44px!important;
    }

    .gx-item-shop-modal.gx-shop-compact .gx-item-shop-title h3{
        font-size:22px!important;
    }

    .gx-item-shop-modal.gx-shop-compact .gx-item-shop-tabs{
        gap:5px!important;
        padding-left:7px!important;
        padding-right:7px!important;
    }

    .gx-item-shop-modal.gx-shop-compact .gx-item-shop-tabs>button span{
        font-size:9px!important;
    }
}

/* Light mode compact shop */
body.gx-theme-light .gx-item-shop-modal.gx-shop-compact .gx-item-shop-head{
    background:#fff!important;
    border-bottom-color:#dbe5f0!important;
}

body.gx-theme-light .gx-item-shop-modal.gx-shop-compact .gx-item-shop-title h3{
    color:#1c2a3d!important;
}

body.gx-theme-light .gx-item-shop-modal.gx-shop-compact .gx-item-shop-title p{
    color:#64758b!important;
}

body.gx-theme-light .gx-item-shop-modal.gx-shop-compact .gx-item-shop-wallets .gx-item-shop-wallet{
    border-color:#d9e3ef!important;
}


/* =====================================================================
   GX V63 — LOUDER SFX + COUNTDOWN SOUND FIX
   ===================================================================== */
.gx-chaos-defense-timer-ring.warning .inner>strong>b::after,
.gx-chaos-defense-timer-ring.danger .inner>strong>b::after{
    content:"";
    width:5px;
    height:5px;
    margin-left:4px;
    display:inline-block;
    vertical-align:middle;
    border-radius:50%;
    background:#f6b74f;
    box-shadow:0 0 10px rgba(246,183,79,.7);
}
.gx-chaos-defense-timer-ring.danger .inner>strong>b::after{
    background:#ff5f76;
    box-shadow:0 0 12px rgba(255,76,105,.85);
    animation:gxV63ClockSoundDot .45s ease-in-out infinite alternate;
}
@keyframes gxV63ClockSoundDot{
    from{opacity:.35;transform:scale(.75)}
    to{opacity:1;transform:scale(1.25)}
}


/* =====================================================================
   GX V64 — POWER DICE ACTUALLY AFFECTS THE ROLL
   ===================================================================== */

/* Five clear power zones:
   0–20 = 1–2
   21–40 = 2–3
   41–60 = 3–4
   61–80 = 4–5
   81–100 = 5–6
*/
.gx-chaos-roll-power{
    background:
        linear-gradient(90deg,
            rgba(52,137,235,.26) 0%,
            rgba(52,137,235,.26) 20%,
            rgba(55,190,211,.24) 20%,
            rgba(55,190,211,.24) 40%,
            rgba(132,90,226,.24) 40%,
            rgba(132,90,226,.24) 60%,
            rgba(235,145,65,.24) 60%,
            rgba(235,145,65,.24) 80%,
            rgba(239,79,94,.25) 80%,
            rgba(239,79,94,.25) 100%)!important;
}
.gx-chaos-roll-power::after{
    content:"1–2   2–3   3–4   4–5   5–6";
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(235,241,255,.38);
    font-size:5.7px;
    font-weight:1000;
    letter-spacing:.31em;
    pointer-events:none;
    white-space:pre;
}
.gx-chaos-roll-power>i{
    z-index:1;
    background:
        linear-gradient(90deg,#3f95f2 0%,#45c4d7 24%,#8b63ef 50%,#ed9b4e 75%,#ff566c 100%)!important;
}
.gx-chaos-roll-power>b{
    z-index:4!important;
}

/* Current target + final roll explanation */
.gx-chaos-roll-effect-hint{
    min-height:16px;
    padding:3px 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:3px 6px;
    border-radius:7px;
    color:#6e809e;
    background:rgba(82,101,148,.045);
    border:1px solid rgba(95,116,164,.07);
    font-size:6.5px;
    line-height:1.3;
    text-align:center;
    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}
.gx-chaos-roll-effect-hint b{
    color:#9ebaff;
}
.gx-chaos-roll-effect-hint.aiming{
    color:#b6c7e8;
    background:rgba(77,103,184,.09);
    border-color:rgba(88,125,218,.13);
    transform:translateY(-1px);
}
.gx-chaos-roll-effect-hint.result{
    display:grid;
    justify-items:center;
    gap:2px;
}
.gx-chaos-roll-effect-hint.result.hit{
    color:#8fdcb9;
    background:rgba(45,157,103,.08);
    border-color:rgba(64,184,126,.13);
}
.gx-chaos-roll-effect-hint.result.miss{
    color:#e4b272;
    background:rgba(180,117,48,.08);
    border-color:rgba(205,144,72,.13);
}
.gx-chaos-roll-effect-hint.result.proc{
    color:#e1c1ff;
    background:
        radial-gradient(circle at 50% 50%,rgba(132,75,226,.12),transparent 70%),
        rgba(83,50,141,.08);
    border-color:rgba(143,90,229,.18);
    animation:gxV64DiceProc .6s ease both;
}
.gx-chaos-roll-effect-hint.result strong{
    color:#d7b6ff;
    font-size:7px;
}
@keyframes gxV64DiceProc{
    0%{transform:scale(.93);filter:brightness(.8)}
    45%{transform:scale(1.045);filter:brightness(1.35)}
    100%{transform:scale(1);filter:none}
}

/* Strong visual when paid dice ability procs */
.gx-chaos-dice[data-dice-theme="inferno"].landed,
.gx-chaos-dice[data-dice-theme="void"].landed,
.gx-chaos-dice[data-dice-theme="mythic"].landed,
.gx-chaos-dice[data-dice-theme="royal"].landed{
    box-shadow:
        0 0 0 2px rgba(174,116,255,.18),
        0 0 30px rgba(142,74,230,.40)!important;
}

/* Shop explicitly shows control chance */
.gx-dice-shop-status .control{
    color:#9fbaff;
    background:rgba(64,103,188,.09);
    border:1px solid rgba(76,116,202,.10);
}

/* Light mode */
body.gx-theme-light .gx-chaos-roll-power{
    background:
        linear-gradient(90deg,
            #dcecff 0%,#dcecff 20%,
            #ddf5f7 20%,#ddf5f7 40%,
            #ece5ff 40%,#ece5ff 60%,
            #fff0dc 60%,#fff0dc 80%,
            #ffe1e6 80%,#ffe1e6 100%)!important;
}
body.gx-theme-light .gx-chaos-roll-power::after{
    color:rgba(47,67,95,.40);
}
body.gx-theme-light .gx-chaos-roll-effect-hint{
    color:#66788f;
    background:#f5f8fc;
    border-color:#dae4ef;
}
body.gx-theme-light .gx-chaos-roll-effect-hint.aiming{
    color:#3f5f8c;
    background:#edf4ff;
    border-color:#d1dff3;
}
body.gx-theme-light .gx-chaos-roll-effect-hint.result.hit{
    color:#287a58;
    background:#edf9f3;
    border-color:#ccebdc;
}
body.gx-theme-light .gx-chaos-roll-effect-hint.result.miss{
    color:#9a642b;
    background:#fff6e9;
    border-color:#f0dfc4;
}
body.gx-theme-light .gx-chaos-roll-effect-hint.result.proc{
    color:#7548aa;
    background:#f5effc;
    border-color:#e1d3f2;
}

/* Mobile: keep the extra explanation readable without making console huge */
body.gx-device-mobile .gx-chaos-roll-effect-hint{
    min-height:18px!important;
    padding:3px 5px!important;
    font-size:6.5px!important;
}
body.gx-device-mobile .gx-chaos-roll-effect-hint.result strong{
    font-size:6.8px!important;
}

@media(max-width:390px){
    body.gx-device-mobile .gx-chaos-roll-power::after{
        content:"1-2  2-3  3-4  4-5  5-6";
        font-size:5px;
        letter-spacing:.12em;
    }
}


/* =====================================================================
   GX V65 — DICE ITEMS + STRONG PRICE TIERS + THEME VFX + VOLUME SLIDER
   ===================================================================== */

/* ---------------------------------------------------------------------
   CHAOS volume slider
   --------------------------------------------------------------------- */
.gx-chaos-volume-control{
    --gx-volume-pct:80%;
    min-height:40px;
    padding:4px 7px 4px 4px;
    display:flex;
    align-items:center;
    gap:7px;
    border-radius:12px;
    background:rgba(24,39,68,.52);
    border:1px solid rgba(91,124,188,.12);
}
.gx-chaos-volume-control .gx-chaos-sound-btn{
    min-height:32px!important;
    height:32px!important;
    padding:0 8px!important;
    border-radius:8px!important;
}
.gx-chaos-volume-slider{
    min-width:166px;
    display:grid;
    grid-template-columns:12px minmax(80px,1fr) 12px 31px;
    gap:5px;
    align-items:center;
    color:#7085a6;
    user-select:none;
}
.gx-chaos-volume-slider>i{
    font-size:8px;
    text-align:center;
}
.gx-chaos-volume-slider input[type="range"]{
    width:100%;
    height:18px;
    margin:0;
    padding:0;
    appearance:none;
    -webkit-appearance:none;
    background:transparent!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    cursor:pointer;
}
.gx-chaos-volume-slider input[type="range"]::-webkit-slider-runnable-track{
    height:5px;
    border-radius:999px;
    background:
        linear-gradient(
            90deg,
            #4e89ef 0,
            #8c5fe8 var(--gx-volume-pct),
            rgba(87,108,146,.25) var(--gx-volume-pct),
            rgba(87,108,146,.25) 100%
        );
}
.gx-chaos-volume-slider input[type="range"]::-webkit-slider-thumb{
    width:14px;
    height:14px;
    margin-top:-4.5px;
    border:2px solid #dce8ff;
    border-radius:50%;
    appearance:none;
    -webkit-appearance:none;
    background:#6f73eb;
    box-shadow:0 0 12px rgba(103,96,231,.42);
}
.gx-chaos-volume-slider input[type="range"]::-moz-range-track{
    height:5px;
    border-radius:999px;
    background:rgba(87,108,146,.25);
}
.gx-chaos-volume-slider input[type="range"]::-moz-range-progress{
    height:5px;
    border-radius:999px;
    background:linear-gradient(90deg,#4e89ef,#8c5fe8);
}
.gx-chaos-volume-slider input[type="range"]::-moz-range-thumb{
    width:13px;
    height:13px;
    border:2px solid #dce8ff;
    border-radius:50%;
    background:#6f73eb;
}
.gx-chaos-volume-slider output{
    color:#9fb5db;
    font:900 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    text-align:right;
}
.gx-chaos-volume-control.muted{
    opacity:.62;
}
.gx-chaos-volume-control.muted .gx-chaos-volume-slider{
    filter:saturate(.35);
}

/* ---------------------------------------------------------------------
   Inventory DICE equipment item
   --------------------------------------------------------------------- */
.gx-inventory-dice-card{
    position:relative;
    min-height:178px!important;
    grid-template-columns:58px minmax(0,1fr) auto!important;
    overflow:visible!important;
    background:
        radial-gradient(circle at 0 0,rgba(112,74,210,.12),transparent 38%),
        rgba(255,255,255,.022)!important;
    border-color:rgba(112,104,206,.14)!important;
}
.gx-inventory-dice-card.equipped{
    border-color:rgba(88,113,244,.36)!important;
    box-shadow:
        0 0 0 1px rgba(93,96,231,.12),
        0 14px 32px rgba(42,38,105,.16)!important;
}
.gx-inventory-dice-cube{
    position:relative;
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border-radius:15px;
    font-size:35px;
    overflow:visible;
}
.gx-inventory-dice-meta{
    grid-column:2/-1;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}
.gx-inventory-dice-meta>span{
    min-height:23px;
    padding:0 7px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:999px;
    color:#9db5df;
    background:rgba(57,91,159,.08);
    border:1px solid rgba(75,107,175,.10);
    font-size:7px;
}
.gx-inventory-dice-meta .permanent{color:#72dfaf;background:rgba(42,151,98,.08)}
.gx-inventory-dice-meta .rental{color:#9bc9ff;background:rgba(50,109,178,.08)}
.gx-inventory-dice-actions{
    grid-column:2/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}
.gx-inventory-dice-actions button{
    min-height:37px;
    border-radius:9px;
    color:#b8c8e6;
    background:rgba(63,88,141,.07);
    border:1px solid rgba(83,111,171,.10);
    font-family:'Kanit',sans-serif;
    font-size:8px;
    font-weight:900;
    cursor:pointer;
}
.gx-inventory-dice-actions button.equip{
    color:#eef1ff;
    background:linear-gradient(135deg,#436ed8,#8052db);
    border:0;
}
.gx-inventory-dice-actions button.equip.active,
.gx-inventory-dice-actions button.equip:disabled{
    color:#72d9aa;
    background:rgba(41,144,96,.08);
    border:1px solid rgba(52,166,111,.11);
    cursor:default;
}

/* Dice shop price tier badges */
.gx-dice-shop-status .grade{
    color:#f4c871;
    background:rgba(174,122,41,.09);
    border:1px solid rgba(207,155,65,.10);
}
.gx-dice-shop-status .score{
    color:#d0a9ff;
    background:rgba(113,69,178,.09);
    border:1px solid rgba(139,89,211,.10);
}
.gx-dice-preview-btn{
    grid-area:previewfx;
    min-height:38px;
    border-radius:10px;
    color:#bba8ef;
    background:rgba(104,66,174,.08);
    border:1px solid rgba(131,85,210,.12);
    font-family:'Kanit',sans-serif;
    font-size:8px;
    font-weight:900;
    cursor:pointer;
}
.gx-dice-shop-card{
    grid-template-areas:
        "preview copy"
        "status status"
        "previewfx previewfx"
        "action action"
        "rent rent"!important;
}

/* ---------------------------------------------------------------------
   DICE THEME VFX — visible to every room client during roll animation
   --------------------------------------------------------------------- */
.gx-chaos-pro-dice-platform,
.gx-dice-shop-preview,
.gx-inventory-dice-cube,
.gx-dice-preview-host{
    position:relative!important;
    overflow:visible!important;
}
.gx-dice-theme-fx{
    position:absolute;
    inset:50% auto auto 50%;
    z-index:22;
    width:2px;
    height:2px;
    pointer-events:none;
    transform:translate(-50%,-50%);
}
.gx-dice-theme-fx>b,
.gx-dice-theme-fx>em{
    position:absolute;
    left:50%;
    top:50%;
    display:block;
    border-radius:50%;
    transform:translate(-50%,-50%) scale(.2);
    opacity:0;
}
.gx-dice-theme-fx>b{
    width:74px;
    height:74px;
    border:2px solid currentColor;
}
.gx-dice-theme-fx>em{
    width:52px;
    height:52px;
    background:radial-gradient(circle,currentColor 0%,transparent 68%);
    filter:blur(5px);
}
.gx-dice-theme-fx>i{
    --a:0deg;
    --d:42px;
    --delay:0s;
    --size:5px;
    position:absolute;
    left:50%;
    top:50%;
    width:var(--size);
    height:var(--size);
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 9px currentColor;
    opacity:0;
    transform:
        translate(-50%,-50%)
        rotate(var(--a))
        translateX(5px)
        scale(.4);
}
.gx-dice-theme-fx.play>b{
    animation:gxDiceFxRing .82s ease-out both;
}
.gx-dice-theme-fx.play>em{
    animation:gxDiceFxGlow .75s ease-out both;
}
.gx-dice-theme-fx.play>i{
    animation:gxDiceFxParticle .78s cubic-bezier(.15,.7,.2,1) var(--delay) both;
}
.gx-dice-theme-fx.compact>b{width:58px;height:58px}
.gx-dice-theme-fx.compact>em{width:42px;height:42px}

.gx-dice-theme-fx.fx-starter{color:#dbe6f6}
.gx-dice-theme-fx.fx-neon{color:#54ecff}
.gx-dice-theme-fx.fx-inferno{color:#ff7a3e}
.gx-dice-theme-fx.fx-frost{color:#a7edff}
.gx-dice-theme-fx.fx-royal{color:#ffd66a}
.gx-dice-theme-fx.fx-void{color:#b867ff}
.gx-dice-theme-fx.fx-mythic{color:#fff0a6}

.gx-dice-theme-fx.fx-neon>b{
    border-style:dashed;
    box-shadow:0 0 18px rgba(66,226,255,.75);
}
.gx-dice-theme-fx.fx-inferno>i{
    border-radius:70% 30% 75% 25%;
    box-shadow:0 0 12px #ff4d2d;
}
.gx-dice-theme-fx.fx-frost>i{
    border-radius:2px;
    transform:
        translate(-50%,-50%)
        rotate(var(--a))
        translateX(5px)
        rotate(45deg)
        scale(.4);
}
.gx-dice-theme-fx.fx-royal>i,
.gx-dice-theme-fx.fx-mythic>i{
    clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%);
    border-radius:0;
}
.gx-dice-theme-fx.fx-void>b{
    border-width:3px;
    border-style:double;
    box-shadow:
        0 0 18px rgba(159,76,255,.65),
        inset 0 0 18px rgba(113,42,194,.50);
}
.gx-dice-theme-fx.fx-mythic>b{
    border-color:#fff0a6;
    box-shadow:
        0 0 12px rgba(92,224,255,.58),
        0 0 30px rgba(190,93,255,.55);
}
.gx-dice-theme-fx.fx-mythic>em{
    background:
        radial-gradient(circle,#fffbd6 0 8%,#7ce9ff 24%,#b879ff 44%,transparent 72%);
}

@keyframes gxDiceFxRing{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-30deg)}
    28%{opacity:1}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.45) rotate(70deg)}
}
@keyframes gxDiceFxGlow{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
    38%{opacity:.80}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}
@keyframes gxDiceFxParticle{
    0%{
        opacity:0;
        transform:
            translate(-50%,-50%)
            rotate(var(--a))
            translateX(5px)
            scale(.35);
    }
    18%{opacity:1}
    100%{
        opacity:0;
        transform:
            translate(-50%,-50%)
            rotate(var(--a))
            translateX(var(--d))
            scale(.05);
    }
}

/* Stronger landed presence by price tier */
.gx-chaos-dice[data-dice-theme="neon"].landed{filter:brightness(1.25) drop-shadow(0 0 10px #54dff6)!important}
.gx-chaos-dice[data-dice-theme="inferno"].landed{filter:brightness(1.30) drop-shadow(0 0 13px #ff673f)!important}
.gx-chaos-dice[data-dice-theme="frost"].landed{filter:brightness(1.34) drop-shadow(0 0 14px #9beaff)!important}
.gx-chaos-dice[data-dice-theme="royal"].landed{filter:brightness(1.38) drop-shadow(0 0 15px #ffd25f)!important}
.gx-chaos-dice[data-dice-theme="void"].landed{filter:brightness(1.42) drop-shadow(0 0 17px #aa59ff)!important}
.gx-chaos-dice[data-dice-theme="mythic"].landed{
    filter:
        brightness(1.48)
        drop-shadow(0 0 12px #6ee7ff)
        drop-shadow(0 0 22px #b767ff)!important;
}

/* Light mode */
body.gx-theme-light .gx-chaos-volume-control{
    background:#f7faff;
    border-color:#d6e2ef;
}
body.gx-theme-light .gx-chaos-volume-slider{color:#607693}
body.gx-theme-light .gx-chaos-volume-slider output{color:#435c7e}
body.gx-theme-light .gx-inventory-dice-card{
    background:
        radial-gradient(circle at 0 0,rgba(97,84,209,.07),transparent 38%),
        #f8fbff!important;
    border-color:#d9e3ef!important;
}

/* Mobile */
body.gx-device-mobile .gx-chaos-volume-control{
    min-height:38px!important;
    padding:3px 5px!important;
    gap:5px!important;
}
body.gx-device-mobile .gx-chaos-volume-control .gx-chaos-sound-btn{
    width:34px!important;
    min-width:34px!important;
    height:32px!important;
}
body.gx-device-mobile .gx-chaos-volume-slider{
    min-width:112px!important;
    grid-template-columns:10px minmax(54px,1fr) 10px 26px!important;
    gap:3px!important;
}
body.gx-device-mobile .gx-chaos-volume-slider output{
    font-size:6px!important;
}
body.gx-device-mobile .gx-inventory-dice-actions{
    grid-template-columns:1fr!important;
}
body.gx-device-mobile .gx-dice-preview-btn{
    min-height:42px!important;
}

@media(max-width:430px){
    body.gx-device-mobile .gx-chaos-volume-slider{
        min-width:92px!important;
        grid-template-columns:minmax(54px,1fr) 24px!important;
    }
    body.gx-device-mobile .gx-chaos-volume-slider>i{
        display:none!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .gx-dice-theme-fx.play>b,
    .gx-dice-theme-fx.play>em,
    .gx-dice-theme-fx.play>i{
        animation-duration:.15s!important;
    }
}


/* =====================================================================
   GX V66 — PERMANENT ITEM SHOP HEADER FIX
   Root fix: Title and wallet/admin controls no longer share the same
   grid row. The DOM structure itself prevents the title being squeezed.
   ===================================================================== */

#gx-item-shop-modal .gx-item-shop-head{
    position:relative!important;
    min-height:0!important;
    padding:18px 18px 14px!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) 44px!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:
        "title close"
        "tools tools"!important;

    gap:12px 14px!important;
    align-items:start!important;
}

/* Title owns the entire usable first row. */
#gx-item-shop-modal .gx-item-shop-title{
    grid-area:title!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    display:grid!important;
    grid-template-columns:56px minmax(0,1fr)!important;
    gap:13px!important;
    align-items:center!important;

    margin:0!important;
    padding:0!important;
}

#gx-item-shop-modal .gx-item-shop-title>.icon{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    flex:0 0 56px!important;
    border-radius:16px!important;
}

#gx-item-shop-modal .gx-item-shop-title>div{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
}

/* Never split GX ITEM SHOP or Thai title vertically. */
#gx-item-shop-modal .gx-item-shop-title b{
    display:block!important;
    width:auto!important;
    max-width:100%!important;

    margin:0 0 3px!important;
    padding:0!important;

    font-size:10px!important;
    line-height:1.15!important;
    letter-spacing:.14em!important;

    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    writing-mode:horizontal-tb!important;
}

#gx-item-shop-modal .gx-item-shop-title h3{
    display:block!important;
    width:max-content!important;
    max-width:100%!important;

    margin:0!important;
    padding:0!important;

    font-size:clamp(24px,3vw,34px)!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;

    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    writing-mode:horizontal-tb!important;
}

#gx-item-shop-modal .gx-item-shop-title p{
    display:block!important;
    width:100%!important;
    max-width:52ch!important;

    margin:6px 0 0!important;
    padding:0!important;

    font-size:10px!important;
    line-height:1.5!important;

    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    writing-mode:horizontal-tb!important;
}

/* Close button gets its own fixed cell and never steals title width. */
#gx-item-shop-modal .gx-item-shop-close{
    grid-area:close!important;
    position:static!important;

    width:44px!important;
    height:44px!important;

    margin:0!important;
    padding:0!important;
    justify-self:end!important;
    align-self:start!important;
}

/* Wallet/Admin tools are isolated in a second row. */
#gx-item-shop-modal .gx-item-shop-head-tools{
    grid-area:tools!important;
    width:100%!important;
    min-width:0!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:stretch!important;
}

/* Reset ALL legacy grid-area / row / column rules. */
#gx-item-shop-modal .gx-item-shop-head-tools .gx-item-shop-wallets{
    grid-area:auto!important;
    grid-column:auto!important;
    grid-row:auto!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    align-items:stretch!important;
}

#gx-item-shop-modal .gx-item-shop-head-tools .gx-item-shop-wallet{
    grid-area:auto!important;
    grid-column:auto!important;
    grid-row:auto!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:56px!important;

    padding:9px 11px!important;
    display:grid!important;
    grid-template-columns:26px minmax(0,1fr)!important;
    gap:8px!important;
    align-items:center!important;
}

#gx-item-shop-modal .gx-item-shop-head-tools .gx-item-shop-wallet small{
    display:block!important;
    font-size:8px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
}

#gx-item-shop-modal .gx-item-shop-head-tools .gx-item-shop-wallet strong{
    display:block!important;
    max-width:100%!important;

    margin-top:2px!important;
    font-size:clamp(15px,2vw,19px)!important;
    line-height:1.05!important;

    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

#gx-item-shop-modal .gx-item-shop-head-tools .gx-item-shop-admin-btn{
    grid-area:auto!important;
    grid-column:auto!important;
    grid-row:auto!important;

    width:auto!important;
    min-width:112px!important;
    max-width:none!important;
    min-height:56px!important;

    margin:0!important;
    padding:0 13px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;

    border-radius:14px!important;
    font-size:9px!important;
}

/* Preserve JS visibility state for non-admin users. */
#gx-item-shop-modal .gx-item-shop-head-tools .gx-item-shop-admin-btn[style*="display:none"],
#gx-item-shop-modal .gx-item-shop-head-tools .gx-item-shop-admin-btn[style*="display: none"]{
    display:none!important;
}

/* Tablet / medium modal: title still full row, tools stack safely. */
@media(max-width:900px){
    #gx-item-shop-modal .gx-item-shop-head{
        padding:16px 14px 12px!important;
        grid-template-columns:minmax(0,1fr) 42px!important;
        gap:10px 12px!important;
    }

    #gx-item-shop-modal .gx-item-shop-title{
        grid-template-columns:50px minmax(0,1fr)!important;
        gap:11px!important;
    }

    #gx-item-shop-modal .gx-item-shop-title>.icon{
        width:50px!important;
        height:50px!important;
        min-width:50px!important;
    }

    #gx-item-shop-modal .gx-item-shop-title h3{
        font-size:26px!important;
    }

    #gx-item-shop-modal .gx-item-shop-head-tools{
        grid-template-columns:1fr!important;
        gap:8px!important;
    }

    #gx-item-shop-modal .gx-item-shop-head-tools .gx-item-shop-admin-btn{
        width:100%!important;
        min-width:0!important;
        min-height:44px!important;
    }
}

/* Phone: two wallet cards if possible, then one column on very narrow screens. */
@media(max-width:560px){
    #gx-item-shop-modal .gx-item-shop-title{
        grid-template-columns:44px minmax(0,1fr)!important;
        gap:9px!important;
    }

    #gx-item-shop-modal .gx-item-shop-title>.icon{
        width:44px!important;
        height:44px!important;
        min-width:44px!important;
        border-radius:13px!important;
    }

    #gx-item-shop-modal .gx-item-shop-title b{
        font-size:8px!important;
    }

    #gx-item-shop-modal .gx-item-shop-title h3{
        font-size:clamp(21px,6.2vw,25px)!important;
    }

    #gx-item-shop-modal .gx-item-shop-title p{
        max-width:36ch!important;
        font-size:9px!important;
        line-height:1.45!important;
    }

    #gx-item-shop-modal .gx-item-shop-head-tools .gx-item-shop-wallet strong{
        font-size:15px!important;
    }
}

@media(max-width:380px){
    #gx-item-shop-modal .gx-item-shop-head-tools .gx-item-shop-wallets{
        grid-template-columns:1fr!important;
    }

    #gx-item-shop-modal .gx-item-shop-title h3{
        font-size:21px!important;
    }
}

/* Light mode */
body.gx-theme-light #gx-item-shop-modal .gx-item-shop-head{
    background:#fff!important;
    border-bottom-color:#dce6f1!important;
}

body.gx-theme-light #gx-item-shop-modal .gx-item-shop-title h3{
    color:#1c2b3e!important;
}

body.gx-theme-light #gx-item-shop-modal .gx-item-shop-title p{
    color:#64768b!important;
}


/* =====================================================================
   GX V67 — COLLISION PVP TARGET LOCK
   ===================================================================== */
.gx-chaos-pvp-card>span{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.gx-chaos-pvp-card>span>i{
    color:#76a8ff;
}
.gx-chaos-pvp-no-target{
    min-height:92px;
    padding:14px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:5px;
    border-radius:12px;
    color:#8596b3;
    background:rgba(64,83,125,.06);
    border:1px dashed rgba(91,116,168,.13);
    text-align:center;
}
.gx-chaos-pvp-no-target>i{
    color:#7aa8ff;
    font-size:19px;
}
.gx-chaos-pvp-no-target>b{
    color:#dbe6f9;
    font-size:10px;
}
.gx-chaos-pvp-no-target>span{
    color:#7789a5;
    font-size:8px;
}
body.gx-theme-light .gx-chaos-pvp-no-target{
    background:#f5f8fc;
    border-color:#d4e0ed;
}
body.gx-theme-light .gx-chaos-pvp-no-target>b{
    color:#25364c;
}


/* =====================================================================
   GX V68 — FINAL ROLL SYNC + PUBLIC STATUS + TILE INFO REBUILD
   ===================================================================== */

/* Do not expose the Power Zone algorithm under the roll button. */
.gx-chaos-roll-hint-hidden,
#gx-chaos-roll-effect-hint{
    display:none!important;
}

/* ---------------------------------------------------------------------
   Player status is visible to everyone.
   --------------------------------------------------------------------- */
.gx-chaos-player-status-strip{
    min-width:0;
    margin-top:5px;
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
}

.gx-chaos-player-state-badges{
    min-width:0;
    display:flex;
    align-items:center;
    gap:3px;
    flex-wrap:wrap;
}

.gx-chaos-player-state-badges>span{
    min-height:19px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    gap:3px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.07);
    font-size:5.8px;
    line-height:1;
    font-weight:900;
    white-space:nowrap;
}

.gx-chaos-player-state-badges>span i{
    font-size:6px;
}

.gx-chaos-player-state-badges>span b{
    color:inherit!important;
    font-size:5.6px!important;
    letter-spacing:.02em;
}

.gx-chaos-player-state-badges>span em{
    padding:2px 3px;
    border-radius:4px;
    color:rgba(255,255,255,.86);
    background:rgba(255,255,255,.09);
    font-size:5px;
    font-style:normal;
}

.gx-chaos-player-state-badges .normal{
    color:#67dca8;
    background:rgba(42,154,101,.08);
    border-color:rgba(65,185,126,.11);
}
.gx-chaos-player-state-badges .shock{
    color:#ffe064;
    background:rgba(205,165,30,.10);
    border-color:rgba(216,180,55,.12);
}
.gx-chaos-player-state-badges .drunk{
    color:#d393ff;
    background:rgba(141,61,183,.10);
    border-color:rgba(174,86,219,.12);
}
.gx-chaos-player-state-badges .bleed,
.gx-chaos-player-state-badges .poison{
    color:#ff7187;
    background:rgba(190,43,70,.10);
    border-color:rgba(213,64,91,.12);
}
.gx-chaos-player-state-badges .slow{
    color:#8bb3ff;
    background:rgba(58,98,183,.10);
    border-color:rgba(72,113,204,.12);
}
.gx-chaos-player-state-badges .shield{
    color:#66e3ee;
    background:rgba(42,157,174,.10);
    border-color:rgba(66,184,199,.12);
}

.gx-chaos-player-status-strip .gx-chaos-player-dice{
    min-width:48px;
    height:19px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    gap:3px;
    border-radius:6px;
    font-size:7px;
    border:1px solid rgba(122,102,201,.10);
}
.gx-chaos-player-status-strip .gx-chaos-player-dice>b{
    color:inherit!important;
    font-size:5.5px!important;
    letter-spacing:.04em;
}

/* ---------------------------------------------------------------------
   Tile tooltip:
   - no mini tooltip rendered inside the tile
   - one global tooltip only
   - desktop opens to left/right of the hovered tile
   --------------------------------------------------------------------- */
.gx-chaos-pro-board-grid .gx-chaos-board-cell::after,
#gx-chaos-board-grid .gx-chaos-board-cell::after{
    display:none!important;
}

.gx-chaos-tile-tooltip{
    position:fixed!important;
    z-index:100000!important;
    width:min(330px,calc(100vw - 24px))!important;
    max-width:330px!important;
    padding:13px 14px!important;
    border-radius:15px!important;
    pointer-events:none!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateY(2px) scale(.98)!important;
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease!important;
}

.gx-chaos-tile-tooltip.show{
    opacity:1!important;
    visibility:visible!important;
    transform:translateY(0) scale(1)!important;
}

.gx-chaos-tile-tooltip::after{
    content:"";
    position:absolute;
    top:50%;
    width:11px;
    height:11px;
    background:inherit;
    border:inherit;
    transform:translateY(-50%) rotate(45deg);
    pointer-events:none;
}

.gx-chaos-tile-tooltip[data-side="right"]::after{
    left:-6px;
    border-right:0;
    border-top:0;
}

.gx-chaos-tile-tooltip[data-side="left"]::after{
    right:-6px;
    border-left:0;
    border-bottom:0;
}

.gx-chaos-tile-tooltip-head{
    position:relative;
    z-index:2;
}

.gx-chaos-tile-tooltip-head strong{
    font-size:13px!important;
    line-height:1.25!important;
}

.gx-chaos-tile-tooltip>p{
    position:relative;
    z-index:2;
    margin-top:7px!important;
    font-size:11px!important;
    line-height:1.55!important;
}

.gx-chaos-tile-tooltip-menu{
    position:relative;
    z-index:2;
    margin-top:9px!important;
    padding:9px!important;
    border-radius:9px!important;
    background:rgba(101,75,177,.08)!important;
    border:1px solid rgba(127,93,203,.12)!important;
}

.gx-chaos-tile-tooltip-menu>span{
    font-size:8px!important;
}

.gx-chaos-tile-tooltip-menu small{
    margin-top:4px!important;
    font-size:10px!important;
    line-height:1.5!important;
}

/* The three-dot marker remains only for cells that ACTUALLY open a menu. */
.gx-chaos-board-cell.has-menu::before{
    content:"MENU";
    position:absolute;
    top:4px;
    right:4px;
    z-index:9;
    width:auto;
    height:15px;
    padding:0 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    color:#d9caff;
    background:rgba(90,57,153,.76);
    border:1px solid rgba(174,128,255,.20);
    font-size:4.8px;
    font-weight:1000;
    letter-spacing:.05em;
}

/* Mobile/tablet tooltip becomes a readable bottom info card. */
.gx-chaos-tile-tooltip.touch{
    left:12px!important;
    right:12px!important;
    top:auto!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    pointer-events:auto!important;
}

.gx-chaos-tile-tooltip.touch::after{
    display:none!important;
}

/* Light mode */
body.gx-theme-light .gx-chaos-player-state-badges .normal{
    color:#237954;
    background:#edf9f3;
    border-color:#cee9db;
}
body.gx-theme-light .gx-chaos-tile-tooltip-menu{
    background:#f3effb!important;
    border-color:#e0d5f1!important;
}

/* Mobile status remains readable without blowing up player cards. */
body.gx-device-mobile .gx-chaos-player-state-badges>span{
    min-height:21px!important;
    padding:0 5px!important;
    font-size:6px!important;
}
body.gx-device-mobile .gx-chaos-player-state-badges>span b{
    font-size:5.8px!important;
}


/* =====================================================================
   GX V69 — CLEAN DICE POWER BAR
   Show ONLY the numeric percentage in the charge gauge.
   ===================================================================== */

.gx-chaos-roll-power::after,
body.gx-device-mobile .gx-chaos-roll-power::after,
body.gx-theme-light .gx-chaos-roll-power::after{
    content:""!important;
    display:none!important;
}

/* Keep the percent readable and centered. */
.gx-chaos-roll-power>b{
    position:relative!important;
    z-index:5!important;
    display:block!important;
    width:100%!important;
    text-align:center!important;
    font-size:8px!important;
    font-weight:1000!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
}

body.gx-device-mobile .gx-chaos-roll-power>b{
    font-size:8px!important;
}


/* =====================================================================
   GX V70 — GX CELESTIAL DICE 3D ARENA
   Real GLB model rolls across the middle of CHAOS BOARD.
   ===================================================================== */

.gx-chaos-pro-arena-floor{
    position:relative!important;
    overflow:visible!important;
}

.gx-chaos-3d-dice-stage{
    position:absolute;
    left:50%;
    top:51%;
    z-index:7;

    width:min(56%,430px);
    height:min(56%,310px);
    min-width:250px;
    min-height:190px;

    transform:translate(-50%,-50%);
    pointer-events:none;

    opacity:0;
    visibility:hidden;
    transition:opacity .20s ease,visibility .20s ease;
}

.gx-chaos-3d-dice-stage.show{
    opacity:1;
    visibility:visible;
}

.gx-chaos-3d-dice-stage>canvas{
    position:absolute;
    inset:0;
    z-index:4;
    width:100%!important;
    height:100%!important;
    display:block;
    background:transparent!important;
    filter:
        drop-shadow(0 15px 18px rgba(0,0,0,.30))
        drop-shadow(0 0 18px rgba(120,72,255,.18));
}

/* Neon landing pad behind the WebGL model */
.gx-chaos-3d-dice-ground{
    position:absolute;
    left:50%;
    top:69%;
    z-index:1;
    width:63%;
    aspect-ratio:2.6/1;
    transform:translate(-50%,-50%) perspective(240px) rotateX(66deg);
    border-radius:50%;
    background:
        radial-gradient(ellipse at center,
            rgba(153,95,255,.23) 0%,
            rgba(74,197,255,.09) 34%,
            rgba(26,48,105,.025) 62%,
            transparent 76%);
    box-shadow:
        0 0 24px rgba(108,77,238,.13),
        inset 0 0 18px rgba(68,190,255,.08);
}

.gx-chaos-3d-dice-ground>i{
    position:absolute;
    inset:8%;
    border:1px solid rgba(125,105,255,.14);
    border-radius:50%;
}
.gx-chaos-3d-dice-ground>i:nth-child(2){inset:24%;border-color:rgba(77,197,255,.13)}
.gx-chaos-3d-dice-ground>i:nth-child(3){inset:39%;border-color:rgba(185,112,255,.15)}

/* Model name chip */
.gx-chaos-3d-dice-badge{
    position:absolute;
    left:50%;
    top:2px;
    z-index:9;
    min-height:24px;
    padding:0 9px;
    display:flex;
    align-items:center;
    gap:6px;
    transform:translateX(-50%);

    color:#bfcfff;
    background:rgba(8,15,31,.72);
    border:1px solid rgba(115,115,226,.15);
    border-radius:999px;

    backdrop-filter:blur(8px);
    font-size:6.5px;
    font-weight:1000;
    letter-spacing:.07em;
    white-space:nowrap;
}
.gx-chaos-3d-dice-badge>i{
    color:#d8aeff;
}
.gx-chaos-3d-dice-badge.rolling{
    color:#fff3b5;
    border-color:rgba(255,202,100,.23);
    box-shadow:0 0 18px rgba(138,91,246,.19);
}

/* Result appears after the 3D die physically lands. */
.gx-chaos-3d-dice-result{
    position:absolute;
    right:7%;
    bottom:8%;
    z-index:10;

    min-width:58px;
    min-height:48px;
    padding:6px 9px;

    display:grid;
    justify-items:center;
    align-content:center;
    gap:1px;

    opacity:0;
    transform:translateY(6px) scale(.88);

    color:#f8f5ff;
    background:
        radial-gradient(circle at 50% 0,rgba(177,112,255,.18),transparent 70%),
        rgba(6,13,27,.82);
    border:1px solid rgba(138,114,235,.18);
    border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,.24);
    backdrop-filter:blur(8px);

    transition:opacity .16s ease,transform .16s ease;
}
.gx-chaos-3d-dice-result.show{
    opacity:1;
    transform:translateY(0) scale(1);
}
.gx-chaos-3d-dice-result small{
    color:#8293b6;
    font-size:5px;
    font-weight:900;
    letter-spacing:.13em;
}
.gx-chaos-3d-dice-result strong{
    color:#e9d4ff;
    font-size:21px;
    line-height:1;
    font-weight:1000;
}
.gx-chaos-3d-dice-result.impact{
    animation:gxCelestialResultImpact .65s cubic-bezier(.16,.75,.22,1) both;
}

@keyframes gxCelestialResultImpact{
    0%{transform:translateY(10px) scale(.58);filter:brightness(.8)}
    45%{transform:translateY(-3px) scale(1.18);filter:brightness(1.55)}
    100%{transform:translateY(0) scale(1);filter:none}
}

/* Loader / clear fallback if CDN or model fails. */
.gx-chaos-3d-dice-loader{
    position:absolute;
    left:50%;
    top:50%;
    z-index:12;
    transform:translate(-50%,-50%);

    min-height:34px;
    padding:0 11px;

    display:flex;
    align-items:center;
    gap:7px;

    color:#aebfe2;
    background:rgba(7,14,29,.82);
    border:1px solid rgba(104,128,186,.15);
    border-radius:10px;

    font-size:7px;
    font-weight:800;
    white-space:nowrap;
}
.gx-chaos-3d-dice-loader>i{
    color:#aa79ff;
}

/* When the 3D Celestial model is active, keep the CHAOS BOARD logo as
   a subtle background watermark instead of hiding the arena identity. */
.gx-chaos-pro-arena-center.gx-chaos-celestial-3d-active .gx-chaos-pro-logo{
    opacity:.14!important;
    transform:scale(.93)!important;
    filter:blur(.3px) saturate(.75)!important;
    transition:opacity .22s ease,transform .22s ease,filter .22s ease!important;
}

.gx-chaos-pro-arena-center.gx-chaos-celestial-3d-active .gx-chaos-pro-arena-floor::after{
    content:"";
    position:absolute;
    left:50%;
    top:51%;
    z-index:2;
    width:min(52%,390px);
    aspect-ratio:1.7;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:
        radial-gradient(circle,rgba(108,75,226,.11),transparent 52%);
    box-shadow:
        0 0 60px rgba(97,62,219,.08);
    pointer-events:none;
}

/* Keep the normal compact dice console at the bottom as the control HUD.
   The real GLB above is the roll animation. */
.gx-chaos-pro-arena-center.gx-chaos-celestial-3d-active .gx-chaos-pro-dice-console{
    z-index:12!important;
}

/* Light mode: central arena remains game-dark, so preserve the 3D lighting. */
body.gx-theme-light .gx-chaos-3d-dice-badge,
body.gx-theme-light .gx-chaos-3d-dice-result,
body.gx-theme-light .gx-chaos-3d-dice-loader{
    color:#eef4ff!important;
    background:rgba(8,15,31,.84)!important;
    border-color:rgba(116,126,205,.20)!important;
}

/* Tablet */
@media(max-width:1199px){
    .gx-chaos-3d-dice-stage{
        width:min(60%,390px);
        height:min(54%,280px);
        min-width:220px;
        min-height:170px;
    }
}

/* Phone / selected mobile mode */
body.gx-device-mobile .gx-chaos-3d-dice-stage{
    top:49%!important;
    width:min(66%,310px)!important;
    height:min(47%,230px)!important;
    min-width:190px!important;
    min-height:145px!important;
}

body.gx-device-mobile .gx-chaos-3d-dice-badge{
    top:1px!important;
    min-height:21px!important;
    padding:0 7px!important;
    font-size:5.5px!important;
}

body.gx-device-mobile .gx-chaos-3d-dice-result{
    right:4%!important;
    bottom:5%!important;
    min-width:50px!important;
    min-height:42px!important;
}
body.gx-device-mobile .gx-chaos-3d-dice-result strong{
    font-size:18px!important;
}

/* Reduced motion still shows the model, with a shorter roll. */
@media(prefers-reduced-motion:reduce){
    .gx-chaos-3d-dice-result.impact{
        animation-duration:.15s!important;
    }
}


/* =====================================================================
   GX V71 — CELESTIAL 3D EMBEDDED MODEL LOADER
   ===================================================================== */
.gx-chaos-3d-dice-loader>span{
    display:grid;
    gap:2px;
}
.gx-chaos-3d-dice-loader>span>small{
    display:block;
    max-width:230px;
    color:#71829f;
    font-size:5.7px;
    line-height:1.3;
    white-space:normal;
    overflow-wrap:anywhere;
}
body.gx-device-mobile .gx-chaos-3d-dice-loader{
    max-width:84%!important;
    white-space:normal!important;
}
body.gx-device-mobile .gx-chaos-3d-dice-loader>span>small{
    max-width:180px!important;
}


/* =====================================================================
   GX V72 — CENTER ARENA + CELESTIAL MODEL FIDELITY FIX
   ===================================================================== */

/* The arena center is the coordinate system for logo + real 3D dice. */
.gx-chaos-pro-arena-center{
    position:relative!important;
    overflow:hidden!important;
}

/* IMPORTANT:
   V70/V71 accidentally changed this to position:relative, which pulled
   the logo and 3D stage toward the top. Lock it back to an absolute,
   centered presentation zone. */
.gx-chaos-pro-arena-center .gx-chaos-pro-arena-floor{
    position:absolute!important;
    left:9%!important;
    right:9%!important;
    top:82px!important;
    bottom:142px!important;

    inset:auto 9% 142px 9%!important;

    min-width:0!important;
    min-height:0!important;
    width:auto!important;
    height:auto!important;

    display:grid!important;
    place-items:center!important;

    margin:0!important;
    padding:0!important;

    border-radius:50%!important;
    overflow:visible!important;

    transform:none!important;
}

/* Logo is exactly centered in the dedicated middle zone. */
.gx-chaos-pro-arena-center .gx-chaos-pro-logo{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    z-index:3!important;

    width:max-content!important;
    max-width:72%!important;

    margin:0!important;
    padding:0!important;

    transform:translate(-50%,-50%) rotate(-3deg)!important;
    transform-origin:center center!important;

    text-align:center!important;
}

/* Make the centered logo slightly less oversized. */
.gx-chaos-pro-arena-center .gx-chaos-pro-logo-top{
    font-size:clamp(40px,4vw,62px)!important;
}
.gx-chaos-pro-arena-center .gx-chaos-pro-logo-bottom{
    font-size:clamp(33px,3.35vw,51px)!important;
}

/* 3D stage shares the exact same center point as the logo. */
.gx-chaos-pro-arena-center .gx-chaos-3d-dice-stage{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    z-index:8!important;

    width:min(72%,390px)!important;
    height:min(82%,290px)!important;
    min-width:250px!important;
    min-height:190px!important;

    margin:0!important;
    transform:translate(-50%,-50%)!important;
    transform-origin:center center!important;
}

/* Keep the Celestial model visually clear without blowing out highlights. */
.gx-chaos-pro-arena-center .gx-chaos-3d-dice-stage>canvas{
    filter:
        drop-shadow(0 14px 16px rgba(0,0,0,.34))
        drop-shadow(0 0 10px rgba(153,167,102,.14))!important;
}

/* The landing pad is centered below the cube. */
.gx-chaos-pro-arena-center .gx-chaos-3d-dice-ground{
    left:50%!important;
    top:78%!important;
    width:58%!important;
    transform:
        translate(-50%,-50%)
        perspective(260px)
        rotateX(67deg)!important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(151,166,97,.13) 0%,
            rgba(91,115,73,.075) 38%,
            rgba(45,65,57,.025) 66%,
            transparent 78%
        )!important;
}

/* Celestial mode: logo remains a centered watermark BEHIND the die. */
.gx-chaos-pro-arena-center.gx-chaos-celestial-3d-active .gx-chaos-pro-logo{
    opacity:.11!important;
    transform:translate(-50%,-50%) rotate(-3deg) scale(.94)!important;
    filter:blur(.35px) saturate(.72)!important;
}

/* V70's old floor glow was centered relative to a collapsed floor.
   Re-anchor it to our new absolute middle zone. */
.gx-chaos-pro-arena-center.gx-chaos-celestial-3d-active .gx-chaos-pro-arena-floor::after{
    left:50%!important;
    top:50%!important;
    width:min(68%,360px)!important;
    transform:translate(-50%,-50%)!important;
}

/* Turn card remains top-right and never becomes part of the logo layout. */
.gx-chaos-pro-arena-center .gx-chaos-pro-turn-card{
    z-index:20!important;
}

/* Pending action overlays sit above the logo/model only when needed. */
.gx-chaos-pro-arena-center .gx-chaos-pro-pending,
.gx-chaos-pro-arena-center .gx-chaos-pro-last-notice{
    z-index:25!important;
}

/* Dice control HUD stays at the bottom, completely separate from showcase. */
.gx-chaos-pro-arena-center .gx-chaos-pro-dice-console{
    z-index:30!important;
}

/* 3D badge/result stay inside the stage, not up by the turn card. */
.gx-chaos-pro-arena-center .gx-chaos-3d-dice-badge{
    top:5px!important;
}
.gx-chaos-pro-arena-center .gx-chaos-3d-dice-result{
    right:6%!important;
    bottom:5%!important;
}

/* Tablet */
@media(max-width:1199px){
    .gx-chaos-pro-arena-center .gx-chaos-pro-arena-floor{
        top:76px!important;
        bottom:136px!important;
        inset:auto 7% 136px 7%!important;
    }

    .gx-chaos-pro-arena-center .gx-chaos-3d-dice-stage{
        width:min(76%,360px)!important;
        height:min(80%,270px)!important;
        min-width:220px!important;
        min-height:170px!important;
    }
}

/* Selected mobile / iPad mobile layout */
body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-pro-arena-floor{
    top:66px!important;
    bottom:118px!important;
    inset:auto 5% 118px 5%!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-pro-logo{
    max-width:82%!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-pro-logo-top{
    font-size:clamp(30px,9.5vw,47px)!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-pro-logo-bottom{
    font-size:clamp(25px,8vw,39px)!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-3d-dice-stage{
    left:50%!important;
    top:50%!important;
    width:min(82%,310px)!important;
    height:min(80%,235px)!important;
    min-width:190px!important;
    min-height:145px!important;
    transform:translate(-50%,-50%)!important;
}

/* Light mode: keep arena itself dark for readable game graphics. */
body.gx-theme-light .gx-chaos-pro-arena-center .gx-chaos-pro-arena-floor{
    border-color:rgba(79,91,155,.18)!important;
}


/* =====================================================================
   GX V73 — CHAOS ARENA LAYER CLEANUP
   Fixes:
   - Defense/PVP menu overlapping Dice HUD
   - 3D Celestial model permanently covering logo
   - Turn Flow visible beneath modal
   - oversized Defense panel
   - logo/model/action UI fighting for the same center area
   ===================================================================== */

/* -------------------------------------------------------------
   Arena layer contract
   10  Logo / arena floor
   20  Turn card / notice
   30  Dice console
   50  Action backdrop
   60  Pending action UI
   ------------------------------------------------------------- */
.gx-chaos-pro-arena-center{
    isolation:isolate!important;
}

.gx-chaos-pro-arena-center .gx-chaos-pro-arena-floor{
    z-index:10!important;
}

.gx-chaos-pro-arena-center .gx-chaos-pro-turn-card{
    z-index:22!important;
}

.gx-chaos-pro-arena-center .gx-chaos-pro-last-notice{
    z-index:24!important;
}

.gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow{
    z-index:26!important;
}

.gx-chaos-pro-arena-center .gx-chaos-pro-dice-console{
    z-index:30!important;
}

.gx-chaos-pro-arena-center .gx-chaos-pro-pending{
    z-index:60!important;
}

/* A real middle-arena backdrop when an action requires a decision. */
.gx-chaos-pro-arena-center::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:49;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    background:
        radial-gradient(circle at 50% 42%,rgba(48,65,121,.15),transparent 42%),
        rgba(2,7,15,.76);
    backdrop-filter:blur(2px);
    transition:opacity .14s ease,visibility .14s ease;
}

.gx-chaos-pro-arena-center.gx-chaos-action-overlay-active::after{
    opacity:1;
    visibility:visible;
}

/* During a decision only the Turn card + decision menu remain.
   This completely removes the visual collisions shown in the screenshots. */
.gx-chaos-pro-arena-center.gx-chaos-action-overlay-active .gx-chaos-pro-logo,
.gx-chaos-pro-arena-center.gx-chaos-action-overlay-active .gx-chaos-3d-dice-stage,
.gx-chaos-pro-arena-center.gx-chaos-action-overlay-active .gx-chaos-pro-turn-flow,
.gx-chaos-pro-arena-center.gx-chaos-action-overlay-active .gx-chaos-pro-last-notice,
.gx-chaos-pro-arena-center.gx-chaos-action-overlay-active .gx-chaos-pro-dice-console{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
}

/* -------------------------------------------------------------
   Pending action is a centered safe-area, not a bottom-floating box.
   ------------------------------------------------------------- */
.gx-chaos-pro-arena-center .gx-chaos-pro-pending{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    bottom:auto!important;

    width:min(660px,calc(100% - 42px))!important;
    max-width:660px!important;
    max-height:calc(100% - 112px)!important;

    transform:translate(-50%,-50%)!important;

    display:block!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-width:thin!important;

    padding:2px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-pro-pending:empty{
    display:none!important;
}

/* Defense no longer stretches to the width/height of the whole board. */
.gx-chaos-pro-arena-center .gx-chaos-pro-pending[data-pending-type="defense"]{
    width:min(610px,calc(100% - 48px))!important;
    max-width:610px!important;
    bottom:auto!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-card{
    width:100%!important;
    max-width:none!important;
    max-height:none!important;

    padding:14px!important;
    border-radius:16px!important;

    background:
        radial-gradient(circle at 14% 0,rgba(58,126,229,.13),transparent 35%),
        radial-gradient(circle at 92% 100%,rgba(118,75,207,.10),transparent 38%),
        rgba(4,9,18,.985)!important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.58),
        inset 0 1px 0 rgba(255,255,255,.035)!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-card>small{
    font-size:8px!important;
    letter-spacing:.10em!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-card>strong{
    margin-top:3px!important;
    font-size:17px!important;
    line-height:1.28!important;
}

/* Timer: smaller and horizontal. */
.gx-chaos-pro-arena-center .gx-chaos-defense-timer-row{
    margin:9px 0 10px!important;
    padding:8px 10px!important;

    grid-template-columns:72px minmax(0,1fr)!important;
    gap:10px!important;

    border-radius:12px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-timer-ring{
    width:66px!important;
    height:66px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-timer-ring::before{
    inset:5px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-timer-ring .inner>strong>b{
    font-size:17px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-timer-ring .inner>span{
    max-width:54px!important;
    font-size:5.5px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-timer-row>.copy{
    gap:3px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-timer-row>.copy>b{
    font-size:10px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-timer-row>.copy>span{
    font-size:8px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-timer-row>.copy>em{
    font-size:6px!important;
}

/* Attacker vs Defender line compressed to one readable strip. */
.gx-chaos-pro-arena-center .gx-chaos-defense-versus{
    margin-top:8px!important;
    padding:7px 8px!important;

    grid-template-columns:1fr 76px 1fr!important;
    gap:8px!important;

    border-radius:12px!important;
    background:rgba(255,255,255,.018)!important;
    border:1px solid rgba(92,111,160,.08)!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-versus .fighter>span{
    width:46px!important;
    height:46px!important;
    font-size:15px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-versus .fighter small{
    margin-top:3px!important;
    font-size:5.8px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-versus .fighter b{
    max-width:150px!important;
    margin-top:1px!important;
    font-size:9.5px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-versus .attack i{
    width:37px!important;
    height:37px!important;
    font-size:13px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-versus .attack b{
    font-size:7px!important;
}

/* Defense options remain large enough to click but no longer consume the arena. */
.gx-chaos-pro-arena-center .gx-chaos-defense-options{
    margin-top:9px!important;

    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;

    max-height:none!important;
    overflow:visible!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-options>button{
    min-width:0!important;
    min-height:90px!important;

    padding:8px 6px!important;
    border-radius:12px!important;

    display:grid!important;
    justify-items:center!important;
    align-content:center!important;
    gap:3px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-options>button>i{
    font-size:18px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-options>button>b{
    font-size:10px!important;
}

.gx-chaos-pro-arena-center .gx-chaos-defense-options>button>span{
    font-size:6.8px!important;
    line-height:1.35!important;
}

/* When only 3 defense choices exist, let them breathe. */
.gx-chaos-pro-arena-center .gx-chaos-defense-options>button:first-child:nth-last-child(3),
.gx-chaos-pro-arena-center .gx-chaos-defense-options>button:first-child:nth-last-child(3)~button{
    min-height:96px!important;
}

/* -------------------------------------------------------------
   3D stage is a transient roll effect.
   Logo remains perfectly centered while idle.
   ------------------------------------------------------------- */
.gx-chaos-pro-arena-center .gx-chaos-3d-dice-stage{
    z-index:35!important;
}

.gx-chaos-pro-arena-center:not(.gx-chaos-celestial-3d-active) .gx-chaos-pro-logo{
    opacity:1!important;
    visibility:visible!important;
}

.gx-chaos-pro-arena-center.gx-chaos-celestial-3d-active .gx-chaos-pro-logo{
    opacity:.08!important;
}

/* Remove the floating 3D badge from idle layout visually.
   It only appears while the 3D stage itself is shown. */
.gx-chaos-3d-dice-stage:not(.show) .gx-chaos-3d-dice-badge,
.gx-chaos-3d-dice-stage:not(.show) .gx-chaos-3d-dice-result,
.gx-chaos-3d-dice-stage:not(.show) .gx-chaos-3d-dice-ground{
    opacity:0!important;
    visibility:hidden!important;
}

/* -------------------------------------------------------------
   Generic PVP / punishment / shop menus also stay in the safe center.
   ------------------------------------------------------------- */
.gx-chaos-pro-arena-center .gx-chaos-pro-pending .gx-chaos-action-card{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
}

.gx-chaos-pro-arena-center .gx-chaos-pro-pending .gx-chaos-pvp-targets{
    max-height:min(310px,42vh)!important;
}

/* -------------------------------------------------------------
   Tablet
   ------------------------------------------------------------- */
@media(max-width:900px){
    .gx-chaos-pro-arena-center .gx-chaos-pro-pending{
        width:calc(100% - 30px)!important;
        max-height:calc(100% - 96px)!important;
    }

    .gx-chaos-pro-arena-center .gx-chaos-pro-pending[data-pending-type="defense"]{
        width:calc(100% - 34px)!important;
    }

    .gx-chaos-pro-arena-center .gx-chaos-defense-options{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    .gx-chaos-pro-arena-center .gx-chaos-defense-options>button{
        min-height:76px!important;
    }
}

/* -------------------------------------------------------------
   Mobile / iPad mobile mode
   ------------------------------------------------------------- */
body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-pro-pending{
    left:8px!important;
    right:8px!important;
    top:54px!important;
    bottom:10px!important;

    width:auto!important;
    max-width:none!important;
    max-height:none!important;

    transform:none!important;

    padding:0 1px 4px!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-pro-pending[data-pending-type="defense"]{
    width:auto!important;
    max-width:none!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-card{
    padding:11px!important;
    border-radius:14px!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-card>strong{
    font-size:14px!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-timer-row{
    grid-template-columns:62px minmax(0,1fr)!important;
    gap:8px!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-timer-ring{
    width:58px!important;
    height:58px!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-versus{
    grid-template-columns:1fr 58px 1fr!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-versus .fighter>span{
    width:40px!important;
    height:40px!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-options{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-options>button{
    min-height:72px!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-options>button>span{
    font-size:7px!important;
}

/* Very small phones */
@media(max-width:390px){
    body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-versus{
        grid-template-columns:1fr 48px 1fr!important;
        gap:4px!important;
    }

    body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-options{
        grid-template-columns:1fr!important;
    }

    body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-options>button{
        min-height:64px!important;

        grid-template-columns:30px 64px minmax(0,1fr)!important;
        justify-items:start!important;
        text-align:left!important;
    }

    body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-defense-options>button>i{
        justify-self:center!important;
    }
}

/* Light mode still uses a game-dark decision surface for legibility. */
body.gx-theme-light .gx-chaos-pro-arena-center.gx-chaos-action-overlay-active::after{
    background:
        radial-gradient(circle at 50% 42%,rgba(69,90,147,.12),transparent 42%),
        rgba(225,233,244,.74)!important;
    backdrop-filter:blur(3px)!important;
}

body.gx-theme-light .gx-chaos-pro-arena-center .gx-chaos-defense-card{
    background:
        radial-gradient(circle at 14% 0,rgba(68,124,215,.09),transparent 35%),
        #f8fbff!important;
    border-color:#cbd9e8!important;
    box-shadow:0 20px 55px rgba(55,73,101,.19)!important;
}

body.gx-theme-light .gx-chaos-pro-arena-center .gx-chaos-defense-card>strong,
body.gx-theme-light .gx-chaos-pro-arena-center .gx-chaos-defense-versus .fighter b{
    color:#1c2b40!important;
}

/* Never let hidden game layers receive focus/clicks while action menu is active. */
.gx-chaos-pro-arena-center.gx-chaos-action-overlay-active .gx-chaos-pro-dice-console *,
.gx-chaos-pro-arena-center.gx-chaos-action-overlay-active .gx-chaos-pro-turn-flow *{
    pointer-events:none!important;
}


/* =====================================================================
   GX V74 — TRUE CENTER COORDINATE FIX
   Root cause:
   V72/V73 declared top:82px, then later declared
       inset:auto 9% 142px 9%
   The shorthand overwrote top with AUTO.
   The showcase layer therefore collapsed toward the bottom.

   V74 uses ONE non-conflicting inset declaration.
   ===================================================================== */

.gx-chaos-pro-arena-center{
    --gx-showcase-top:82px;
    --gx-showcase-right:9%;
    --gx-showcase-bottom:142px;
    --gx-showcase-left:9%;
}

/* ONE source of truth for the middle showcase box. */
.gx-chaos-pro-arena-center .gx-chaos-pro-arena-floor{
    position:absolute!important;

    inset:
        var(--gx-showcase-top)
        var(--gx-showcase-right)
        var(--gx-showcase-bottom)
        var(--gx-showcase-left)!important;

    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;

    /* inset above is the only coordinate system */
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;

    margin:0!important;
    padding:0!important;

    display:grid!important;
    place-items:center!important;

    transform:none!important;
}

/* Re-apply physical edges explicitly after the legacy rules.
   These four declarations are intentionally AFTER all old V72/V73 CSS.
   They resolve the custom-property values into real edges and cannot be
   overridden by the old inset:auto declaration above. */
.gx-chaos-pro-arena-center .gx-chaos-pro-arena-floor{
    top:var(--gx-showcase-top)!important;
    right:var(--gx-showcase-right)!important;
    bottom:var(--gx-showcase-bottom)!important;
    left:var(--gx-showcase-left)!important;
    inset:var(--gx-showcase-top) var(--gx-showcase-right) var(--gx-showcase-bottom) var(--gx-showcase-left)!important;
}

/* Logo and GLB stage share EXACTLY the same 50/50 center point. */
.gx-chaos-pro-arena-center .gx-chaos-pro-logo,
.gx-chaos-pro-arena-center .gx-chaos-3d-dice-stage{
    left:50%!important;
    top:50%!important;
    margin:0!important;
    transform-origin:50% 50%!important;
}

.gx-chaos-pro-arena-center .gx-chaos-pro-logo{
    transform:translate(-50%,-50%) rotate(-3deg)!important;
}

.gx-chaos-pro-arena-center .gx-chaos-3d-dice-stage{
    transform:translate(-50%,-50%)!important;

    /* Fit wholly inside the true showcase center. */
    width:min(66%,360px)!important;
    height:min(76%,260px)!important;
    min-width:230px!important;
    min-height:170px!important;
}

/* When the 3D roll is active, the faded logo stays at THE SAME center.
   Do not change its Y coordinate during the effect. */
.gx-chaos-pro-arena-center.gx-chaos-celestial-3d-active .gx-chaos-pro-logo{
    transform:translate(-50%,-50%) rotate(-3deg) scale(.94)!important;
}

/* Center the WebGL landing/result decorations around the same stage. */
.gx-chaos-pro-arena-center .gx-chaos-3d-dice-ground{
    left:50%!important;
    top:74%!important;
}

.gx-chaos-pro-arena-center .gx-chaos-3d-dice-badge{
    left:50%!important;
    top:4px!important;
    transform:translateX(-50%)!important;
}

.gx-chaos-pro-arena-center .gx-chaos-3d-dice-result{
    right:4%!important;
    bottom:5%!important;
}

/* Tablet */
@media(max-width:1199px){
    .gx-chaos-pro-arena-center{
        --gx-showcase-top:76px;
        --gx-showcase-right:7%;
        --gx-showcase-bottom:136px;
        --gx-showcase-left:7%;
    }

    .gx-chaos-pro-arena-center .gx-chaos-3d-dice-stage{
        width:min(70%,340px)!important;
        height:min(74%,245px)!important;
        min-width:210px!important;
        min-height:160px!important;
    }
}

/* Selected Mobile / iPad mobile mode */
body.gx-device-mobile .gx-chaos-pro-arena-center{
    --gx-showcase-top:66px;
    --gx-showcase-right:5%;
    --gx-showcase-bottom:118px;
    --gx-showcase-left:5%;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-pro-arena-floor{
    top:var(--gx-showcase-top)!important;
    right:var(--gx-showcase-right)!important;
    bottom:var(--gx-showcase-bottom)!important;
    left:var(--gx-showcase-left)!important;
    inset:var(--gx-showcase-top) var(--gx-showcase-right) var(--gx-showcase-bottom) var(--gx-showcase-left)!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-3d-dice-stage{
    left:50%!important;
    top:50%!important;
    width:min(78%,290px)!important;
    height:min(72%,215px)!important;
    min-width:185px!important;
    min-height:140px!important;
    transform:translate(-50%,-50%)!important;
}

/* Very narrow phones */
@media(max-width:390px){
    body.gx-device-mobile .gx-chaos-pro-arena-center{
        --gx-showcase-top:60px;
        --gx-showcase-bottom:110px;
    }

    body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-3d-dice-stage{
        width:min(82%,260px)!important;
        min-width:170px!important;
    }
}


/* =====================================================================
   GX V75 — LINE-STYLE DOUBLE DICE + REALTIME POWER + TURN PACING
   ===================================================================== */

/* -------------------------------------------------------------
   1) Do not show the redundant "กำลังทอยลูกเต๋า" guide panel.
   The animated dice itself is enough.
   ------------------------------------------------------------- */
body.gx-chaos-dice-rolling .gx-chaos-pro-turn-flow{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
}

/* -------------------------------------------------------------
   2) Two-dice console
   ------------------------------------------------------------- */
.gx-chaos-pro-dice-platform{
    min-width:88px!important;
}

#gx-chaos-dice.gx-chaos-dice-pair{
    width:82px!important;
    min-width:82px!important;
    height:50px!important;
    padding:5px!important;

    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:5px!important;
    align-items:center!important;
    justify-items:center!important;

    border-radius:13px!important;
    overflow:visible!important;
}

.gx-chaos-die-face{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:inherit;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    font-size:25px;
    line-height:1;
}

#gx-chaos-dice.rolling .gx-chaos-die-face:first-child{
    animation:gxV75DieRollA .20s linear infinite;
}
#gx-chaos-dice.rolling .gx-chaos-die-face:last-child{
    animation:gxV75DieRollB .18s linear infinite reverse;
}

@keyframes gxV75DieRollA{
    0%{transform:rotate(-7deg) translateY(0)}
    50%{transform:rotate(7deg) translateY(-3px)}
    100%{transform:rotate(-7deg) translateY(0)}
}
@keyframes gxV75DieRollB{
    0%{transform:rotate(8deg) translateY(-1px)}
    50%{transform:rotate(-8deg) translateY(-4px)}
    100%{transform:rotate(8deg) translateY(-1px)}
}

#gx-chaos-dice.is-double{
    box-shadow:
        0 0 0 1px rgba(255,204,86,.24),
        0 0 22px rgba(255,184,60,.24)!important;
}

#gx-chaos-dice.is-double .gx-chaos-die-face{
    color:#ffe27d!important;
    border-color:rgba(255,207,91,.19)!important;
}

.gx-chaos-dice-total{
    min-width:28px;
    height:17px;
    margin-top:3px;
    padding:0 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    color:#a8b9da;
    background:rgba(46,69,111,.24);
    border:1px solid rgba(79,105,162,.12);
    font-size:7px;
    font-weight:1000;
    line-height:1;
}
.gx-chaos-dice-total.double{
    color:#ffe38a;
    background:rgba(162,111,28,.13);
    border-color:rgba(219,163,62,.16);
}

/* -------------------------------------------------------------
   3) Power gauge is public/realtime; only % is shown.
   ------------------------------------------------------------- */
.gx-chaos-roll-power.charging{
    box-shadow:
        0 0 0 1px rgba(100,122,255,.13),
        0 0 14px rgba(82,107,255,.12)!important;
}
.gx-chaos-roll-power.charging>b{
    color:#fff!important;
    text-shadow:0 0 7px rgba(138,119,255,.65);
}

/* -------------------------------------------------------------
   4) Turn card: unmistakable whose turn it is.
   ------------------------------------------------------------- */
.gx-chaos-pro-turn-card{
    min-width:170px!important;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        background .18s ease!important;
}

.gx-chaos-pro-turn-card.is-my-turn{
    border-color:rgba(78,226,174,.33)!important;
    background:
        radial-gradient(circle at 100% 0,rgba(63,211,159,.13),transparent 48%),
        rgba(5,12,24,.94)!important;
    box-shadow:
        0 0 0 1px rgba(63,204,153,.08),
        0 0 24px rgba(50,196,142,.12)!important;
}

.gx-chaos-pro-turn-card.is-my-turn>strong{
    color:#85f1c4!important;
}

.gx-chaos-pro-turn-card.is-double-turn{
    border-color:rgba(255,198,72,.34)!important;
    box-shadow:0 0 22px rgba(226,158,41,.14)!important;
}

.gx-chaos-turn-countdown{
    min-height:17px;
    margin-top:5px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
    border-radius:999px;
    color:#8fa4c6;
    background:rgba(51,71,109,.18);
    border:1px solid rgba(71,94,140,.10);
    font-size:5.8px;
    font-style:normal;
    font-weight:1000;
    letter-spacing:.05em;
}
.gx-chaos-pro-turn-card.is-my-turn .gx-chaos-turn-countdown{
    color:#7ee9bc;
    background:rgba(42,147,101,.09);
}
.gx-chaos-pro-turn-card.is-double-turn .gx-chaos-turn-countdown{
    color:#ffd978;
    background:rgba(158,106,28,.10);
}

/* The turn intro/extra-roll guide is deliberately calmer so the game
   doesn't feel like it is racing to the next action. */
.gx-chaos-turn-flow [data-phase="turn_intro"],
.gx-chaos-turn-flow [data-phase="double_again"]{
    animation:none!important;
}

/* -------------------------------------------------------------
   5) Slow now means ACTUAL slow walking speed, not a hidden number edit.
   ------------------------------------------------------------- */
body.gx-chaos-slow-walk-active .gx-chaos-board-token.is-moving,
body.gx-chaos-slow-walk-active .gx-chaos-step-focus{
    filter:saturate(.72) brightness(.94)!important;
}
body.gx-chaos-slow-walk-active .gx-chaos-step-focus{
    box-shadow:
        inset 0 0 0 2px rgba(105,156,255,.20),
        0 0 14px rgba(70,117,212,.13)!important;
}

/* Status badges make the semantics explicit. */
.gx-chaos-player-state-badges .shock b::after{
    content:" SKIP";
    font-size:.86em;
    opacity:.82;
}

/* Status legend supports the extra Slow card. */
.gx-chaos-status-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.gx-chaos-status-grid .slow{
    color:#8fb5ff!important;
}

/* -------------------------------------------------------------
   6) 3D pair fits in the same center stage.
   ------------------------------------------------------------- */
.gx-chaos-3d-dice-result strong{
    white-space:nowrap!important;
    font-size:18px!important;
}
.gx-chaos-3d-dice-result small{
    white-space:nowrap!important;
}

/* -------------------------------------------------------------
   Mobile / tablet
   ------------------------------------------------------------- */
body.gx-device-mobile #gx-chaos-dice.gx-chaos-dice-pair{
    width:74px!important;
    min-width:74px!important;
    height:46px!important;
    gap:4px!important;
    padding:4px!important;
}
body.gx-device-mobile .gx-chaos-die-face{
    width:31px!important;
    height:31px!important;
    font-size:22px!important;
}
body.gx-device-mobile .gx-chaos-pro-turn-card{
    min-width:145px!important;
}
body.gx-device-mobile .gx-chaos-turn-countdown{
    font-size:5.4px!important;
}

@media(max-width:390px){
    body.gx-device-mobile #gx-chaos-dice.gx-chaos-dice-pair{
        width:68px!important;
        min-width:68px!important;
    }
    body.gx-device-mobile .gx-chaos-die-face{
        width:28px!important;
        height:28px!important;
        font-size:20px!important;
    }
}


/* GX V75 R1 — BOT CHARGE + TRIPLE DOUBLE POLISH */
.gx-chaos-roll-power.charging::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:inherit;
    border:1px solid rgba(128,108,255,.12);
    pointer-events:none;
    animation:gxV75GaugePulse .65s ease-in-out infinite alternate;
}
@keyframes gxV75GaugePulse{
    from{opacity:.25;transform:scale(.995)}
    to{opacity:.8;transform:scale(1.01)}
}
.gx-chaos-player-state-badges .slow b::after{
    content:" WALK";
    font-size:.82em;
    opacity:.72;
}


/* =====================================================================
   GX V76 — LINE-LIKE CAMERA + SLOW 3D DICE
   ===================================================================== */

/* Camera button */
.gx-chaos-camera-btn{
    min-height:40px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    color:#9eb2d2;
    background:rgba(24,39,68,.52);
    border:1px solid rgba(91,124,188,.12);
    border-radius:12px;

    font:900 8px/1 'Kanit',sans-serif;
    cursor:pointer;
}
.gx-chaos-camera-btn>i{
    color:#7da9ff;
}
.gx-chaos-camera-btn.active{
    color:#e8f2ff;
    border-color:rgba(74,177,255,.28);
    background:linear-gradient(135deg,rgba(43,93,171,.20),rgba(106,67,180,.18));
    box-shadow:0 0 18px rgba(71,113,223,.12);
}

/* -------------------------------------------------------------
   Pseudo-isometric board camera.
   Mild tilt keeps Thai tile labels readable while giving the tabletop
   depth seen in the LINE reference.
   ------------------------------------------------------------- */
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-frame{
    perspective:1500px!important;
    perspective-origin:50% 44%!important;
    overflow:visible!important;
}

#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid{
    transform:
        translateY(-7px)
        rotateX(10.5deg)
        scale(.965)!important;

    transform-origin:50% 52%!important;
    transform-style:preserve-3d!important;

    box-shadow:
        0 35px 55px rgba(0,0,0,.34),
        0 9px 0 rgba(4,8,16,.42)!important;
}

#chaos-game-screen.gx-chaos-camera-top .gx-chaos-pro-board-grid{
    transform:none!important;
}

/* Give tiles/pawns a little physical height in ISO mode. */
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid .gx-chaos-board-cell{
    transform-style:preserve-3d!important;
}

#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-board-token{
    transform:translateZ(15px)!important;
    filter:drop-shadow(0 8px 5px rgba(0,0,0,.42));
}

#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid .gx-chaos-board-cell.gx-chaos-step-focus{
    transform:translateZ(8px)!important;
}

/* Current-turn HUD remains more readable despite the board tilt. */
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-turn-card,
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-dice-console,
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-pending{
    backface-visibility:hidden!important;
}

/* -------------------------------------------------------------
   3D model: neutral temporary asset for ALL dice.
   Theme-specific aura/particle effects are disabled for now.
   ------------------------------------------------------------- */
.gx-chaos-3d-dice-badge{
    display:none!important;
}

.gx-chaos-3d-dice-stage .gx-dice-theme-fx{
    display:none!important;
}

.gx-chaos-3d-dice-stage{
    width:min(76%,410px)!important;
    height:min(84%,310px)!important;
}

/* LINE-like result: big total above the dice, pair shown as small copy. */
.gx-chaos-3d-dice-result{
    left:50%!important;
    right:auto!important;
    top:2%!important;
    bottom:auto!important;

    min-width:82px!important;
    min-height:70px!important;

    transform:translate(-50%,8px) scale(.88)!important;

    background:
        radial-gradient(circle at 50% 0,rgba(116,154,255,.15),transparent 64%),
        rgba(5,11,23,.90)!important;
}

.gx-chaos-3d-dice-result.show{
    transform:translate(-50%,0) scale(1)!important;
}

.gx-chaos-3d-dice-result small{
    font-size:7px!important;
    color:#aabbd8!important;
}

.gx-chaos-3d-dice-result strong{
    font-size:34px!important;
    color:#ffffff!important;
    text-shadow:
        0 2px 0 rgba(0,0,0,.55),
        0 0 18px rgba(105,143,255,.24)!important;
}

/* Hide rapid 2D face flicker while WebGL is the primary roll. */
.gx-chaos-dice.gx-3d-primary .gx-chaos-die-face{
    opacity:.20!important;
    filter:blur(.3px)!important;
}

/* Softer, slower landing pulse. */
.gx-chaos-3d-dice-result.impact{
    animation:gxV76ResultImpact .82s cubic-bezier(.16,.72,.22,1) both!important;
}
@keyframes gxV76ResultImpact{
    0%{transform:translate(-50%,12px) scale(.68);filter:brightness(.85)}
    48%{transform:translate(-50%,-3px) scale(1.10);filter:brightness(1.28)}
    100%{transform:translate(-50%,0) scale(1);filter:none}
}

/* Tablet */
@media(max-width:1199px){
    #chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid{
        transform:
            translateY(-4px)
            rotateX(8.5deg)
            scale(.975)!important;
    }

    .gx-chaos-3d-dice-stage{
        width:min(80%,370px)!important;
        height:min(82%,280px)!important;
    }
}

/* Mobile / iPad selected mobile mode:
   retain some perspective, but milder so touch targets remain easy. */
body.gx-device-mobile #chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid{
    transform:
        translateY(-2px)
        rotateX(6deg)
        scale(.985)!important;
}

body.gx-device-mobile .gx-chaos-camera-btn{
    min-width:42px!important;
    min-height:38px!important;
    padding:0 8px!important;
}

body.gx-device-mobile .gx-chaos-camera-btn>span{
    font-size:7px!important;
}

body.gx-device-mobile .gx-chaos-3d-dice-result{
    min-width:70px!important;
    min-height:62px!important;
}

body.gx-device-mobile .gx-chaos-3d-dice-result strong{
    font-size:29px!important;
}

/* Light mode */
body.gx-theme-light .gx-chaos-camera-btn{
    color:#4d6381;
    background:#f6f9fd;
    border-color:#d7e2ee;
}
body.gx-theme-light .gx-chaos-camera-btn.active{
    color:#294d7c;
    background:#edf5ff;
    border-color:#bad0ea;
}


/* =====================================================================
   GX V77 — CLEAN TURN HUD + SMOOTH POWER GAUGE
   ===================================================================== */

/* -------------------------------------------------------------
   3D RESULT:
   Do not cover the model. The physical dice face is the result.
   ------------------------------------------------------------- */
#gx-chaos-3d-dice-result,
.gx-chaos-3d-dice-result{
    display:none!important;
}

/* -------------------------------------------------------------
   POWER GAUGE:
   transform-only animation = no layout reflow / less jank.
   Local gauge follows pointer at 60fps.
   Remote Firebase samples interpolate instead of jumping every ~110ms.
   ------------------------------------------------------------- */
#gx-chaos-roll-power{
    overflow:hidden!important;
    contain:layout paint!important;
}

#gx-chaos-roll-power-fill{
    left:0!important;
    right:auto!important;
    width:100%!important;
    transform:scaleX(0);
    transform-origin:left center!important;
    will-change:transform!important;
    transition:none!important;
}

#gx-chaos-roll-power.remote-sync #gx-chaos-roll-power-fill{
    transition:transform 145ms linear!important;
}

/* Percent text stays stable; no scale/flash while charging. */
#gx-chaos-roll-power-value{
    transform:none!important;
    animation:none!important;
    font-variant-numeric:tabular-nums!important;
}

/* -------------------------------------------------------------
   TURN UI:
   Screenshot request = one compact card in the lower-right red box.
   No "กำลังเดินทีละช่อง", no 1/2/3/4 tracker, no extra explanation.
   ------------------------------------------------------------- */

/* Remove duplicate top-right CURRENT TURN card. */
.gx-chaos-pro-arena-center .gx-chaos-pro-turn-card{
    display:none!important;
}

/* Repurpose the old Turn Flow into a tiny "ตาใคร" card. */
.gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow{
    position:absolute!important;
    left:auto!important;
    top:auto!important;
    right:18px!important;
    bottom:136px!important;

    width:168px!important;
    min-width:0!important;
    max-width:168px!important;
    min-height:66px!important;
    height:auto!important;

    margin:0!important;
    padding:11px 13px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    z-index:46!important;

    border-radius:14px!important;
    background:
        linear-gradient(145deg,rgba(15,26,47,.96),rgba(7,14,28,.97))!important;
    border:1px solid rgba(91,121,180,.18)!important;
    box-shadow:
        0 14px 34px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.025)!important;

    transform:none!important;
    overflow:hidden!important;
    pointer-events:none!important;
}

/* Everything except the player name is removed visually. */
.gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow .gx-chaos-turn-flow-head,
.gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow>p,
.gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow .gx-chaos-turn-steps{
    display:none!important;
}

.gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow>strong{
    width:100%!important;
    margin:0!important;

    color:#f0f5ff!important;
    font-size:15px!important;
    line-height:1.25!important;
    font-weight:1000!important;
    text-align:center!important;

    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

/* Highlight "your turn" from the existing room state without adding text. */
.gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow:has(+ #gx-chaos-last-notice){
    transition:border-color .18s ease,box-shadow .18s ease!important;
}

/* Keep the simple turn card visible even when an action menu is open. */
.gx-chaos-pro-arena-center.gx-chaos-action-overlay-active .gx-chaos-pro-turn-flow{
    opacity:1!important;
    visibility:visible!important;
    display:flex!important;
    z-index:70!important;
}

/* Stop old V73 rule from treating turn-flow as a hidden background layer. */
.gx-chaos-pro-arena-center.gx-chaos-action-overlay-active .gx-chaos-pro-turn-flow *{
    pointer-events:none!important;
}

/* Desktop ISO camera: this card remains in the intended lower-right area. */
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-turn-flow{
    right:20px!important;
    bottom:138px!important;
}

/* Tablet */
@media(max-width:1199px){
    .gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow{
        right:13px!important;
        bottom:130px!important;
        width:148px!important;
        max-width:148px!important;
        min-height:58px!important;
        padding:9px 10px!important;
    }

    .gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow>strong{
        font-size:13px!important;
    }
}

/* Mobile / iPad mode: compact and above the dice controls. */
body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow{
    left:auto!important;
    right:9px!important;
    top:auto!important;
    bottom:112px!important;

    width:124px!important;
    max-width:124px!important;
    min-height:48px!important;

    padding:7px 8px!important;
    transform:none!important;
}

body.gx-device-mobile .gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow>strong{
    font-size:11px!important;
}

/* Light mode */
body.gx-theme-light .gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow{
    background:rgba(248,251,255,.96)!important;
    border-color:#cbd9e9!important;
    box-shadow:0 12px 28px rgba(60,78,105,.13)!important;
}

body.gx-theme-light .gx-chaos-pro-arena-center .gx-chaos-pro-turn-flow>strong{
    color:#23364f!important;
}


/* =====================================================================
   GX V78 — REAL CAMERA DIFFERENCE + WALK SFX SUPPORT
   ===================================================================== */

/* Camera control: text is explicit, no ambiguous ISO/TOP shorthand. */
#gx-chaos-camera-btn{
    min-width:94px!important;
}
#gx-chaos-camera-btn #gx-chaos-camera-label{
    white-space:nowrap!important;
}

/* -------------------------------------------------------------
   CAMERA ROOT
   ------------------------------------------------------------- */
#chaos-game-screen .gx-chaos-pro-board-frame{
    perspective:1050px!important;
    perspective-origin:50% 35%!important;
    overflow:visible!important;
}

/* Smooth visual transition when the player changes camera. */
#chaos-game-screen .gx-chaos-pro-board-grid{
    will-change:transform,filter!important;
    transition:
        transform .42s cubic-bezier(.22,.75,.18,1),
        filter .42s ease,
        box-shadow .42s ease!important;
    transform-origin:50% 53%!important;
    backface-visibility:hidden!important;
}

/* LINE / tabletop-like angled view.
   This is intentionally MUCH stronger than V76 (10.5deg). */
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid,
#chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid{
    transform:
        translateY(-18px)
        rotateX(30deg)
        scaleX(.94)
        scaleY(.91)!important;

    filter:
        drop-shadow(0 34px 24px rgba(0,0,0,.34))
        saturate(1.04)!important;

    box-shadow:
        0 16px 0 rgba(5,9,17,.46),
        0 38px 60px rgba(0,0,0,.30)!important;
}

/* Flat readable top view. */
#chaos-game-screen.gx-chaos-camera-top .gx-chaos-pro-board-grid,
#chaos-game-screen[data-camera-mode="top"] .gx-chaos-pro-board-grid{
    transform:
        translateY(0)
        rotateX(0deg)
        scale(1)!important;

    filter:none!important;

    box-shadow:
        0 18px 42px rgba(0,0,0,.16)!important;
}

/* Give the board a physical front edge in angled mode. */
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid::after,
#chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid::after{
    content:""!important;
    position:absolute!important;
    left:1.5%!important;
    right:1.5%!important;
    bottom:-13px!important;
    height:16px!important;
    z-index:-2!important;

    border-radius:0 0 16px 16px!important;
    background:
        linear-gradient(
            180deg,
            rgba(37,51,77,.88),
            rgba(8,14,25,.96)
        )!important;
    border:1px solid rgba(75,99,143,.14)!important;
    transform:translateZ(-10px)!important;
}

/* Tiles and player pieces gain small Z separation. */
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-board-cell,
#chaos-game-screen[data-camera-mode="iso"] .gx-chaos-board-cell{
    transform-style:preserve-3d!important;
}

#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-board-token,
#chaos-game-screen[data-camera-mode="iso"] .gx-chaos-board-token{
    transform:translateZ(22px)!important;
    filter:
        drop-shadow(0 10px 5px rgba(0,0,0,.48))
        brightness(1.06)!important;
}

/* Moving pawn gets a tiny hop so the new footstep sound feels connected. */
body.gx-chaos-slow-walk-active .gx-chaos-board-token{
    animation:gxV78SlowStepBob .65s ease-in-out infinite alternate!important;
}
body:not(.gx-chaos-slow-walk-active) .gx-chaos-step-focus .gx-chaos-board-token{
    animation:gxV78StepBob .34s ease-out both!important;
}

@keyframes gxV78StepBob{
    0%{translate:0 0}
    42%{translate:0 -5px}
    100%{translate:0 0}
}
@keyframes gxV78SlowStepBob{
    0%{translate:0 0}
    100%{translate:0 -4px}
}

/* Keep tooltips and action cards readable; they are viewport UI, not board art. */
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-tile-tooltip,
#chaos-game-screen[data-camera-mode="iso"] .gx-chaos-tile-tooltip{
    transform:none!important;
}

/* Tablet: still clearly different from top mode. */
@media(max-width:1199px){
    #chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid,
    #chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid{
        transform:
            translateY(-13px)
            rotateX(25deg)
            scaleX(.955)
            scaleY(.925)!important;
    }
}

/* Mobile/iPad: enough tilt to notice, but not enough to ruin touch targets. */
body.gx-device-mobile #chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid,
body.gx-device-mobile #chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid{
    transform:
        translateY(-8px)
        rotateX(18deg)
        scaleX(.97)
        scaleY(.945)!important;
}

body.gx-device-mobile #gx-chaos-camera-btn{
    min-width:48px!important;
    padding:0 7px!important;
}
body.gx-device-mobile #gx-chaos-camera-btn #gx-chaos-camera-label{
    display:none!important;
}

/* Light mode physical edge */
body.gx-theme-light #chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid::after{
    background:
        linear-gradient(180deg,#bdcbe0,#8fa3be)!important;
    border-color:#8096b2!important;
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
    #chaos-game-screen .gx-chaos-pro-board-grid{
        transition:none!important;
    }
    body.gx-chaos-slow-walk-active .gx-chaos-board-token,
    body:not(.gx-chaos-slow-walk-active) .gx-chaos-step-focus .gx-chaos-board-token{
        animation:none!important;
    }
}


/* =====================================================================
   GX V79 — ADMIN DICE GRANTS + READABLE SHOP PRICES
   ===================================================================== */

/* ---------- Admin item picker: 3 tabs ---------- */
.gx-admin-item-picker-tabs.gx-admin-item-picker-tabs-3{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

.gx-admin-item-picker-tabs.gx-admin-item-picker-tabs-3 button{
    min-width:0!important;
    padding:0 10px!important;
    font-size:10px!important;
}

.gx-admin-item-choice em{
    min-height:30px!important;
    padding:0 9px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:10px!important;
    font-variant-numeric:tabular-nums!important;
}

/* ---------- Dice license controls ---------- */
.gx-admin-dice-license{
    min-width:250px;
    padding:10px;
    display:grid;
    gap:8px;
    align-self:end;

    border-radius:13px;
    background:rgba(80,65,165,.07);
    border:1px solid rgba(129,105,225,.15);
}

.gx-admin-dice-license[hidden],
.gx-admin-dice-days[hidden],
.gx-admin-report-dice-license[hidden],
.gx-admin-report-dice-license label[hidden]{
    display:none!important;
}

.gx-admin-dice-license-title{
    color:#b9c7df;
    font-size:9px;
    font-weight:900;
}

.gx-admin-dice-license-modes{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}

.gx-admin-dice-license-modes button{
    min-height:38px;
    border-radius:10px;
    border:1px solid rgba(111,128,175,.12);
    background:rgba(255,255,255,.025);
    color:#8090aa;
    cursor:pointer;
    font-family:'Kanit',sans-serif;
    font-size:9px;
    font-weight:900;
}

.gx-admin-dice-license-modes button.active{
    color:#f1edff;
    border-color:rgba(144,104,245,.35);
    background:linear-gradient(135deg,rgba(74,116,220,.15),rgba(137,76,219,.16));
    box-shadow:0 8px 20px rgba(65,38,145,.12);
}

.gx-admin-dice-days{
    display:grid!important;
    grid-template-columns:74px minmax(80px,1fr) auto;
    gap:7px;
    align-items:center;
}

.gx-admin-dice-days>span,
.gx-admin-report-dice-license label>span{
    color:#8fa0bc;
    font-size:9px;
    font-weight:800;
}

.gx-admin-dice-days input{
    min-height:38px!important;
    font-size:13px!important;
    font-weight:900!important;
}

.gx-admin-dice-days small{
    color:#697993;
    font-size:8px;
    white-space:nowrap;
}

.gx-admin-dice-license-badge{
    min-height:27px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:999px;
    font-size:8px;
    font-weight:900;
    font-style:normal;
    white-space:nowrap;
}

.gx-admin-dice-license-badge.permanent{
    color:#75e1b4;
    background:rgba(40,153,102,.10);
    border:1px solid rgba(61,179,123,.13);
}

.gx-admin-dice-license-badge.timed{
    color:#9bbcff;
    background:rgba(58,103,190,.10);
    border:1px solid rgba(76,121,210,.13);
}

/* ---------- Admin Report dice license ---------- */
.gx-admin-report-dice-license{
    margin-top:9px;
    padding:10px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    border-radius:12px;
    background:rgba(77,64,155,.065);
    border:1px solid rgba(119,102,205,.13);
}

.gx-admin-report-dice-license label{
    display:grid;
    gap:5px;
}

.gx-admin-report-dice-license select,
.gx-admin-report-dice-license input{
    min-height:40px!important;
    font-size:11px!important;
    font-weight:800!important;
}

/* ---------- Mailbox dice reward ---------- */
.gx-mailbox-attachment-list>div.dice{
    border-color:rgba(126,91,219,.15)!important;
    background:
        linear-gradient(135deg,rgba(77,91,184,.07),rgba(131,74,183,.07))!important;
}

.gx-mailbox-attachment-list>div.dice strong{
    color:#cbb9ff!important;
    font-size:11px!important;
}

/* =====================================================================
   SHOP PRICE READABILITY
   The screenshots showed 25 / 60 Coin at ~8px. Raise all price text.
   ===================================================================== */

.gx-store-item-meta{
    gap:10px!important;
}

.gx-store-item-meta span{
    min-height:34px!important;
    padding:0 10px!important;
    font-size:10px!important;
}

.gx-store-item-meta .gx-dynamic-price{
    min-height:36px!important;
    padding:0 11px!important;
    gap:6px!important;
}

.gx-store-item-meta .gx-dynamic-price b{
    font-size:14px!important;
    line-height:1!important;
    font-weight:1000!important;
    font-variant-numeric:tabular-nums!important;
}

.gx-store-item-meta .gx-dynamic-price s{
    font-size:9px!important;
}

.gx-store-item-meta .gx-dynamic-price em{
    width:20px!important;
    height:20px!important;
    font-size:8px!important;
}

.gx-store-item>button{
    min-height:48px!important;
    font-size:13px!important;
}

/* Dice shop permanent / rental prices */
.gx-dice-coin-buy{
    min-height:50px!important;
}

.gx-dice-coin-buy span{
    font-size:11px!important;
}

.gx-dice-coin-buy b{
    color:#f3ca60!important;
    font-size:15px!important;
    font-weight:1000!important;
    font-variant-numeric:tabular-nums!important;
}

.gx-dice-rental-grid button{
    min-height:58px!important;
}

.gx-dice-rental-grid button small{
    font-size:9px!important;
}

.gx-dice-rental-grid button b{
    font-size:12px!important;
    font-weight:1000!important;
    font-variant-numeric:tabular-nums!important;
}

/* Promotion / price badges */
.gx-shop-promo-badge{
    min-height:31px!important;
    padding:0 9px!important;
    font-size:9px!important;
}

/* Mobile / iPad: never shrink price below readable size. */
body.gx-device-mobile .gx-store-item-meta span,
body.gx-device-ipad .gx-store-item-meta span{
    min-height:36px!important;
    font-size:10px!important;
}

body.gx-device-mobile .gx-store-item-meta .gx-dynamic-price b,
body.gx-device-ipad .gx-store-item-meta .gx-dynamic-price b{
    font-size:15px!important;
}

body.gx-device-mobile .gx-store-item>button,
body.gx-device-ipad .gx-store-item>button{
    min-height:50px!important;
    font-size:13px!important;
}

body.gx-device-mobile .gx-dice-coin-buy b,
body.gx-device-ipad .gx-dice-coin-buy b{
    font-size:15px!important;
}

body.gx-device-mobile .gx-dice-rental-grid button b,
body.gx-device-ipad .gx-dice-rental-grid button b{
    font-size:12px!important;
}

@media(max-width:760px){
    .gx-admin-item-picker-tabs.gx-admin-item-picker-tabs-3{
        grid-template-columns:1fr!important;
    }

    .gx-admin-dice-license{
        min-width:0!important;
        width:100%!important;
    }

    .gx-admin-report-dice-license{
        grid-template-columns:1fr!important;
    }
}


/* =====================================================================
   GX V80 — ADMIN DICE VISUALS + SHOP EFFECTS ON REAL 3D DICE
   ===================================================================== */

/* ---------- Admin GX DICE cards now look like the shop ---------- */
.gx-admin-item-picker-grid:has(.gx-admin-dice-choice){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
}

.gx-admin-dice-choice{
    min-height:160px!important;
    padding:12px!important;
    display:grid!important;
    grid-template-columns:86px minmax(0,1fr)!important;
    grid-template-areas:
        "visual copy"
        "visual price"!important;
    gap:8px 12px!important;
    text-align:left!important;
    overflow:visible!important;
}

.gx-admin-dice-visual{
    grid-area:visual;
    position:relative!important;
    min-height:124px;
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    gap:5px!important;
    overflow:visible!important;
}

.gx-admin-dice-visual .gx-dice-shop-cube{
    width:74px!important;
    height:74px!important;
    font-size:45px!important;
    border-radius:19px!important;
}

.gx-admin-dice-visual .rarity,
.gx-admin-dice-visual .grade{
    position:relative!important;
    inset:auto!important;
    min-height:18px!important;
    padding:0 6px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#8d9db8!important;
    background:rgba(255,255,255,.025)!important;
    border:1px solid rgba(111,131,177,.09)!important;
    border-radius:999px!important;
    font-size:6px!important;
    font-weight:1000!important;
    letter-spacing:.06em!important;
}

.gx-admin-dice-copy{
    grid-area:copy;
    min-width:0;
    display:grid!important;
    align-content:start!important;
    gap:4px!important;
}

.gx-admin-dice-copy>b{
    color:#eef4ff!important;
    font-size:13px!important;
    line-height:1.16!important;
}

.gx-admin-dice-copy>small{
    color:#a0b0ca!important;
    font-size:8px!important;
    line-height:1.35!important;
}

.gx-admin-dice-copy>small.desc{
    color:#71829f!important;
    font-size:7.5px!important;
    line-height:1.45!important;
}

.gx-admin-dice-stats{
    margin-top:4px!important;
    display:flex!important;
    gap:5px!important;
    flex-wrap:wrap!important;
}
.gx-admin-dice-stats>span{
    min-height:23px!important;
    padding:0 7px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:4px!important;
    color:#9eb9e5!important;
    background:rgba(57,96,164,.07)!important;
    border:1px solid rgba(75,113,181,.09)!important;
    border-radius:7px!important;
    font-size:7px!important;
    font-weight:900!important;
}

.gx-admin-dice-price{
    grid-area:price!important;
    justify-self:start!important;
    min-height:34px!important;
    padding:0 10px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    color:#f2cb62!important;
    background:rgba(165,126,33,.10)!important;
    border:1px solid rgba(196,151,47,.12)!important;
    border-radius:9px!important;
    font-size:11px!important;
    font-weight:1000!important;
    font-style:normal!important;
    font-variant-numeric:tabular-nums!important;
}

.gx-admin-dice-choice.active{
    background:
        radial-gradient(circle at 12% 20%,rgba(116,83,226,.13),transparent 34%),
        rgba(42,52,96,.40)!important;
    border-color:rgba(128,98,232,.42)!important;
    box-shadow:
        inset 0 0 0 1px rgba(139,111,244,.08),
        0 10px 26px rgba(43,31,112,.13)!important;
}

/* ---------- Re-enable the same shop FX on the REAL 3D stage ---------- */
/* V76 deliberately hid these. V80 intentionally overrides that rule. */
.gx-chaos-3d-dice-stage .gx-dice-theme-fx{
    display:block!important;
    z-index:3!important;
}
.gx-chaos-3d-dice-stage .gx-dice-theme-fx>b{
    width:154px!important;
    height:154px!important;
    border-width:3px!important;
}
.gx-chaos-3d-dice-stage .gx-dice-theme-fx>em{
    width:116px!important;
    height:116px!important;
    filter:blur(11px)!important;
}
.gx-chaos-3d-dice-stage .gx-dice-theme-fx>i{
    box-shadow:0 0 15px currentColor!important;
}

/* Persistent themed field behind the shared temporary GLB. */
.gx-chaos-3d-dice-stage::before{
    content:"";
    position:absolute;
    left:50%;
    top:53%;
    z-index:2;
    width:54%;
    aspect-ratio:1;
    border-radius:50%;
    opacity:0;
    transform:translate(-50%,-50%) scale(.76);
    pointer-events:none;
}
.gx-chaos-3d-dice-stage.show::before{
    opacity:.58;
}

/* Neon — Electric Pulse */
.gx-chaos-3d-dice-stage.gx-3d-theme-neon::before{
    background:
        repeating-conic-gradient(from 0deg,transparent 0 12deg,rgba(75,236,255,.25) 13deg 15deg),
        radial-gradient(circle,rgba(61,224,255,.28),transparent 66%);
    box-shadow:0 0 50px rgba(57,222,255,.28);
    animation:gxV80Spin 1.1s linear infinite;
}

/* Inferno — Overdrive */
.gx-chaos-3d-dice-stage.gx-3d-theme-inferno::before{
    background:
        radial-gradient(circle at 50% 58%,rgba(255,224,126,.38) 0 8%,rgba(255,92,38,.30) 24%,rgba(130,28,12,.12) 49%,transparent 71%);
    box-shadow:0 0 62px rgba(255,80,31,.32);
    animation:gxV80Pulse .58s ease-in-out infinite alternate;
}

/* Cryo — Freeze Lock */
.gx-chaos-3d-dice-stage.gx-3d-theme-frost::before{
    background:
        repeating-conic-gradient(from 15deg,transparent 0 19deg,rgba(191,244,255,.25) 20deg 22deg),
        radial-gradient(circle,rgba(156,234,255,.31),rgba(58,151,214,.10) 44%,transparent 71%);
    box-shadow:0 0 65px rgba(111,215,255,.30);
    animation:gxV80SpinReverse 1.75s linear infinite;
}

/* Royal — Fortune */
.gx-chaos-3d-dice-stage.gx-3d-theme-royal::before{
    background:
        conic-gradient(from 0deg,
            transparent 0 7%,rgba(255,216,101,.29) 8% 12%,
            transparent 13% 31%,rgba(255,216,101,.24) 32% 36%,
            transparent 37% 100%),
        radial-gradient(circle,rgba(255,211,88,.28),transparent 69%);
    box-shadow:0 0 60px rgba(255,201,72,.28);
    animation:gxV80Spin 2.05s linear infinite;
}

/* Void — Rift */
.gx-chaos-3d-dice-stage.gx-3d-theme-void::before{
    background:
        repeating-radial-gradient(circle,rgba(191,112,255,.14) 0 4px,transparent 5px 13px),
        radial-gradient(circle,rgba(140,55,229,.34),rgba(48,14,92,.18) 47%,transparent 72%);
    box-shadow:0 0 62px rgba(156,72,245,.36);
    animation:gxV80VoidPulse 1.45s ease-in-out infinite alternate;
}

/* GX/Mythic — multi aura */
.gx-chaos-3d-dice-stage.gx-3d-theme-mythic::before{
    background:
        conic-gradient(from 0deg,
            transparent,
            rgba(81,221,255,.28),
            rgba(187,96,255,.28),
            rgba(255,218,108,.26),
            transparent),
        radial-gradient(circle,rgba(250,240,177,.28),transparent 63%);
    box-shadow:
        0 0 42px rgba(79,222,255,.31),
        0 0 78px rgba(180,87,248,.28);
    animation:gxV80Spin 1.65s linear infinite;
}

/* Starter — neutral */
.gx-chaos-3d-dice-stage.gx-3d-theme-starter::before{
    background:radial-gradient(circle,rgba(197,215,240,.15),transparent 69%);
    box-shadow:0 0 35px rgba(130,154,193,.12);
}

@keyframes gxV80Spin{
    from{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
    to{transform:translate(-50%,-50%) scale(1) rotate(360deg)}
}
@keyframes gxV80SpinReverse{
    from{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
    to{transform:translate(-50%,-50%) scale(1) rotate(-360deg)}
}
@keyframes gxV80Pulse{
    from{filter:brightness(.88);transform:translate(-50%,-50%) scale(.91)}
    to{filter:brightness(1.26);transform:translate(-50%,-50%) scale(1.08)}
}
@keyframes gxV80VoidPulse{
    from{filter:hue-rotate(-8deg);transform:translate(-50%,-50%) scale(.90)}
    to{filter:hue-rotate(12deg);transform:translate(-50%,-50%) scale(1.10)}
}

/* Theme glow applied to the same shared GLB model. */
.gx-chaos-3d-dice-stage.gx-3d-theme-neon>canvas{
    filter:drop-shadow(0 15px 18px rgba(0,0,0,.32)) drop-shadow(0 0 23px rgba(68,231,255,.47))!important;
}
.gx-chaos-3d-dice-stage.gx-3d-theme-inferno>canvas{
    filter:drop-shadow(0 15px 18px rgba(0,0,0,.32)) drop-shadow(0 0 25px rgba(255,89,38,.48))!important;
}
.gx-chaos-3d-dice-stage.gx-3d-theme-frost>canvas{
    filter:drop-shadow(0 15px 18px rgba(0,0,0,.32)) drop-shadow(0 0 26px rgba(130,229,255,.48))!important;
}
.gx-chaos-3d-dice-stage.gx-3d-theme-royal>canvas{
    filter:drop-shadow(0 15px 18px rgba(0,0,0,.32)) drop-shadow(0 0 26px rgba(255,205,76,.47))!important;
}
.gx-chaos-3d-dice-stage.gx-3d-theme-void>canvas{
    filter:drop-shadow(0 15px 18px rgba(0,0,0,.32)) drop-shadow(0 0 30px rgba(168,79,255,.52))!important;
}
.gx-chaos-3d-dice-stage.gx-3d-theme-mythic>canvas{
    filter:
        drop-shadow(0 15px 18px rgba(0,0,0,.32))
        drop-shadow(0 0 19px rgba(76,226,255,.46))
        drop-shadow(0 0 34px rgba(187,91,255,.42))!important;
}

.gx-admin-dice-visual .gx-dice-theme-fx{
    z-index:30!important;
}

/* Light mode */
body.gx-theme-light .gx-admin-dice-copy>b{color:#22354d!important}
body.gx-theme-light .gx-admin-dice-copy>small{color:#60738d!important}
body.gx-theme-light .gx-admin-dice-price{
    color:#956e17!important;
    background:#fff9e8!important;
    border-color:#ecdca9!important;
}

/* Responsive */
@media(max-width:900px){
    .gx-admin-item-picker-grid:has(.gx-admin-dice-choice){
        grid-template-columns:1fr!important;
    }
    .gx-admin-dice-choice{
        grid-template-columns:78px minmax(0,1fr)!important;
        min-height:148px!important;
    }
    .gx-admin-dice-visual .gx-dice-shop-cube{
        width:66px!important;
        height:66px!important;
        font-size:40px!important;
    }
}
@media(max-width:520px){
    .gx-admin-dice-choice{
        grid-template-columns:68px minmax(0,1fr)!important;
        padding:10px!important;
    }
    .gx-admin-dice-visual .gx-dice-shop-cube{
        width:58px!important;
        height:58px!important;
        font-size:35px!important;
    }
    .gx-admin-dice-copy>b{font-size:12px!important}
    .gx-admin-dice-price{font-size:10px!important}
}
@media(prefers-reduced-motion:reduce){
    .gx-chaos-3d-dice-stage::before{animation:none!important}
}


/* =====================================================================
   GX V81 — NEW GX BRAND + ONE-TIME LOGIN DISPLAY SETUP
   ===================================================================== */

/* ---------- Header brand mark ---------- */
.gx-v81-brand-mark{
    width:46px!important;
    height:40px!important;
    flex:0 0 46px!important;
    padding:0!important;
    overflow:visible!important;
    background:
        radial-gradient(circle at 50% 48%,rgba(98,68,255,.14),transparent 68%)!important;
    border-color:rgba(99,149,255,.15)!important;
}
.gx-v81-brand-mark img{
    width:54px!important;
    height:54px!important;
    max-width:none!important;
    object-fit:contain!important;
    filter:
        drop-shadow(0 0 8px rgba(85,214,255,.16))
        drop-shadow(0 0 12px rgba(151,75,255,.14))!important;
    pointer-events:none!important;
}

/* ---------- Login full logo ---------- */
body.gx-v47-ui .gx-v81-auth-brand-logo{
    width:min(230px,68%)!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    display:block!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
}
body.gx-v47-ui .gx-v81-auth-brand-logo img{
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    display:block!important;
    object-fit:contain!important;
    filter:
        drop-shadow(0 12px 28px rgba(0,0,0,.30))
        drop-shadow(0 0 22px rgba(77,119,255,.15))!important;
}
body.gx-v47-ui .gx-v81-auth-brand-logo + h1{
    margin-top:18px!important;
}

/* ---------- Login-only display setup button ---------- */
.gx-login-display-setup-btn{
    margin-top:13px;
    min-height:46px;
    width:100%;
    padding:0 13px;

    display:grid;
    grid-template-columns:28px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;

    color:#8798b4;
    background:rgba(61,83,127,.055);
    border:1px solid rgba(101,131,188,.10);
    border-radius:12px;

    font-family:'Kanit',sans-serif;
    cursor:pointer;
    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}
.gx-login-display-setup-btn:hover{
    color:#b7c8e7;
    background:rgba(65,103,176,.09);
    border-color:rgba(96,145,225,.20);
    transform:translateY(-1px);
}
.gx-login-display-setup-btn>i{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    color:#6eb7ff;
    background:rgba(70,134,225,.10);
    border-radius:8px;
}
.gx-login-display-setup-btn>span{
    text-align:left;
    font-size:10px;
    font-weight:900;
}
.gx-login-display-setup-btn>small{
    color:#6981a5;
    font-size:8px;
    font-weight:900;
    white-space:nowrap;
}

/* Device chooser is a Login setup experience, not an in-game menu. */
#gx-display-mode-modal[data-login-only="1"]{
    z-index:260000!important;
}

/* ---------- Game Hub hero brand art ---------- */
.gx-hub-hero{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(210px,310px)!important;
    align-items:center!important;
    gap:24px!important;
    overflow:hidden!important;
}
.gx-hub-hero-copy{
    position:relative;
    z-index:2;
    max-width:760px!important;
}
.gx-hub-brand-art{
    position:relative;
    z-index:1;
    width:100%;
    min-height:128px;
    display:grid;
    place-items:center;
    align-self:stretch;
}
.gx-hub-brand-art::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:
        radial-gradient(circle,rgba(88,74,240,.17),rgba(60,179,255,.06) 40%,transparent 71%);
    filter:blur(8px);
    pointer-events:none;
}
.gx-hub-brand-art img{
    position:relative;
    z-index:1;
    width:min(100%,285px);
    max-height:150px;
    object-fit:contain;
    filter:
        drop-shadow(0 14px 30px rgba(0,0,0,.28))
        drop-shadow(0 0 18px rgba(93,77,245,.18));
}

/* ---------- Sidebar compact mark ---------- */
.gx-v81-sidebar-brand{
    width:46px!important;
    height:46px!important;
    flex:0 0 46px!important;
    padding:0!important;
    overflow:visible!important;
}
.gx-v81-sidebar-brand img{
    width:52px!important;
    height:52px!important;
    max-width:none!important;
    object-fit:contain!important;
    filter:
        drop-shadow(0 0 8px rgba(74,206,255,.14))
        drop-shadow(0 0 10px rgba(148,72,255,.12));
}

/* ---------- Light theme logo containers ---------- */
body.gx-theme-light .gx-v81-brand-mark,
body.gx-theme-light .gx-v81-sidebar-brand{
    background:
        radial-gradient(circle at 50% 50%,rgba(83,88,225,.11),transparent 70%)!important;
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
    .gx-hub-hero{
        grid-template-columns:1fr!important;
        gap:10px!important;
    }
    .gx-hub-brand-art{
        min-height:92px!important;
    }
    .gx-hub-brand-art img{
        width:min(255px,72vw)!important;
        max-height:112px!important;
    }
}

@media(max-width:620px){
    .gx-v81-brand-mark{
        width:38px!important;
        height:34px!important;
        flex-basis:38px!important;
    }
    .gx-v81-brand-mark img{
        width:46px!important;
        height:46px!important;
    }

    .gx-brand-home-copy strong{
        font-size:12px!important;
    }

    body.gx-v47-ui .gx-v81-auth-brand-logo{
        width:min(190px,66vw)!important;
    }

    .gx-login-display-setup-btn{
        min-height:48px!important;
    }
    .gx-login-display-setup-btn>span{
        font-size:11px!important;
    }
    .gx-login-display-setup-btn>small{
        font-size:8px!important;
    }
}

@media(max-width:390px){
    .gx-brand-home-copy{
        display:none!important;
    }
    .gx-brand-home-btn{
        padding-right:4px!important;
    }
}

/* We removed the in-game display selector from the header in V81. */
#gx-display-mode-button{
    display:none!important;
}


/* =====================================================================
   GX V82 — ADMIN GX DICE CARD OVERFLOW FIX
   Fixes long price pills / copy leaking outside each Dice card.
   ===================================================================== */

.gx-admin-item-picker-grid{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
}

/* Use the actual picker width instead of viewport width.
   Cards automatically become 1 column if the panel is too narrow. */
.gx-admin-item-picker-grid:has(.gx-admin-dice-choice){
    grid-template-columns:repeat(auto-fit,minmax(min(205px,100%),1fr))!important;
    align-items:stretch!important;
    gap:10px!important;
}

/* Main fix:
   price used to live only inside the narrow text column:
       "visual price"
   so 121,735 / 193,435 / 307,050 Coin leaked outside the card.

   V82 gives the price its own FULL-WIDTH row:
       "price price"
*/
.gx-admin-dice-choice{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:176px!important;
    box-sizing:border-box!important;

    grid-template-columns:78px minmax(0,1fr)!important;
    grid-template-areas:
        "visual copy"
        "price price"!important;
    grid-template-rows:minmax(0,1fr) auto!important;

    gap:9px 11px!important;
    padding:11px!important;

    overflow:hidden!important;
    contain:layout paint!important;
}

/* Nothing inside the text column is allowed to force card width. */
.gx-admin-dice-copy{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
}

.gx-admin-dice-copy>b{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    line-height:1.08!important;
}

.gx-admin-dice-copy>small,
.gx-admin-dice-copy>small.desc{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
}

/* Stats wrap inside the card instead of widening it. */
.gx-admin-dice-stats{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex-wrap:wrap!important;
}

.gx-admin-dice-stats>span{
    min-width:0!important;
    max-width:100%!important;
    padding-inline:6px!important;
    white-space:nowrap!important;
}

/* Price always stays INSIDE the card. */
.gx-admin-dice-price{
    grid-area:price!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;

    justify-self:stretch!important;
    justify-content:center!important;

    min-height:35px!important;
    padding:0 7px!important;

    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;

    font-size:10px!important;
    line-height:1!important;
    letter-spacing:-.01em!important;
    font-variant-numeric:tabular-nums!important;
}

.gx-admin-dice-price i{
    flex:0 0 auto!important;
}

/* Preview is also constrained to its own grid cell.
   Effect can animate inside the card without creating horizontal overflow. */
.gx-admin-dice-visual{
    min-width:0!important;
    max-width:78px!important;
    width:78px!important;
    overflow:visible!important;
    justify-self:center!important;
}

.gx-admin-dice-visual .gx-dice-shop-cube{
    width:66px!important;
    height:66px!important;
    font-size:39px!important;
}

/* Prevent the item selection pane itself from creating horizontal scrolling. */
#gx-admin-broadcast-item-picker,
.gx-admin-item-picker-grid,
.gx-admin-item-picker-grid>*{
    box-sizing:border-box!important;
}

/* Narrow admin panel / tablet */
@media(max-width:1000px){
    .gx-admin-item-picker-grid:has(.gx-admin-dice-choice){
        grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))!important;
    }

    .gx-admin-dice-choice{
        grid-template-columns:72px minmax(0,1fr)!important;
        min-height:168px!important;
    }

    .gx-admin-dice-visual{
        width:72px!important;
        max-width:72px!important;
    }

    .gx-admin-dice-visual .gx-dice-shop-cube{
        width:62px!important;
        height:62px!important;
        font-size:37px!important;
    }
}

/* Phone / very narrow modal: always one clean column. */
@media(max-width:620px){
    .gx-admin-item-picker-grid:has(.gx-admin-dice-choice){
        grid-template-columns:1fr!important;
    }

    .gx-admin-dice-choice{
        min-height:154px!important;
        grid-template-columns:72px minmax(0,1fr)!important;
        padding:10px!important;
    }

    .gx-admin-dice-price{
        font-size:11px!important;
    }
}


/* =====================================================================
   GX V83 — LOGO EMBED + LOGO-ONLY BRANDING
   Fixes broken logo images and removes old icon/text compositions.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HEADER: image only. No old GX icon box, no GX GAME HUB/HOME text.
   --------------------------------------------------------------------- */
.gx-brand-home-btn.gx-v83-logo-only{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:52px!important;
    min-height:52px!important;

    padding:3px 8px!important;
    margin:0!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;

    overflow:visible!important;
}

.gx-brand-home-btn.gx-v83-logo-only::before,
.gx-brand-home-btn.gx-v83-logo-only::after{
    display:none!important;
    content:none!important;
}

.gx-v83-header-logo{
    display:block!important;
    width:auto!important;
    height:48px!important;
    max-width:150px!important;
    object-fit:contain!important;

    border:0!important;
    background:transparent!important;

    filter:
        drop-shadow(0 5px 10px rgba(0,0,0,.28))
        drop-shadow(0 0 7px rgba(87,91,255,.18))!important;

    pointer-events:none!important;
    user-select:none!important;
}

/* Hide any legacy pieces if cached/duplicated by old CSS. */
.gx-v83-logo-only .gx-brand-home-icon,
.gx-v83-logo-only .gx-brand-home-copy,
.gx-v83-logo-only .gx-v47-brand-mark,
.gx-v83-logo-only .gx-v81-brand-mark{
    display:none!important;
}

/* ---------------------------------------------------------------------
   LOGIN: only the supplied logo, no badge/chip/container artwork.
   --------------------------------------------------------------------- */
.gx-v83-login-logo-only{
    width:min(250px,72%)!important;
    height:auto!important;
    min-height:0!important;

    margin:0 0 14px 0!important;
    padding:0!important;

    display:block!important;

    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;

    overflow:visible!important;
}

.gx-v83-login-logo-only::before,
.gx-v83-login-logo-only::after{
    display:none!important;
    content:none!important;
}

.gx-v83-login-logo-only img{
    display:block!important;

    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    max-height:none!important;

    object-fit:contain!important;

    background:transparent!important;
    border:0!important;

    filter:
        drop-shadow(0 12px 24px rgba(0,0,0,.28))
        drop-shadow(0 0 13px rgba(89,87,255,.16))!important;
}

/* Old brand badge must never occupy space in V83. */
.gx-auth-brand-content > .gx-auth-brand-badge:not(.gx-v83-login-logo-only){
    /* Only applies to legacy instances if they somehow remain after cache merge. */
}

/* ---------------------------------------------------------------------
   Hub/Sidebar image robustness.
   --------------------------------------------------------------------- */
.gx-hub-brand-art img,
.gx-v81-sidebar-brand img{
    border:0!important;
    background:transparent!important;
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media(max-width:700px){
    .gx-brand-home-btn.gx-v83-logo-only{
        height:46px!important;
        min-height:46px!important;
        padding:2px 4px!important;
    }

    .gx-v83-header-logo{
        height:42px!important;
        max-width:128px!important;
    }

    .gx-v83-login-logo-only{
        width:min(220px,72vw)!important;
        margin-bottom:12px!important;
    }
}

@media(max-width:390px){
    .gx-v83-header-logo{
        height:38px!important;
        max-width:116px!important;
    }

    .gx-v83-login-logo-only{
        width:min(190px,68vw)!important;
    }
}


/* =====================================================================
   GX V84 — ADMIN GX DICE 2-COLUMN GRID + DEVICE PROMPT MIGRATION
   ===================================================================== */

/* Desktop / tablet admin picker: ALWAYS 2 cards per row. */
.gx-admin-item-picker-grid:has(.gx-admin-dice-choice){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    align-items:stretch!important;
}

/* Compact each Dice card enough to fit cleanly in two columns. */
.gx-admin-dice-choice{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:164px!important;

    grid-template-columns:66px minmax(0,1fr)!important;
    grid-template-areas:
        "visual copy"
        "price price"!important;
    grid-template-rows:minmax(0,1fr) auto!important;

    gap:8px 9px!important;
    padding:10px!important;

    overflow:hidden!important;
    box-sizing:border-box!important;
}

.gx-admin-dice-visual{
    width:66px!important;
    max-width:66px!important;
    min-width:0!important;
    min-height:112px!important;
    align-self:start!important;
}

.gx-admin-dice-visual .gx-dice-shop-cube{
    width:58px!important;
    height:58px!important;
    font-size:35px!important;
    border-radius:15px!important;
}

.gx-admin-dice-visual .rarity,
.gx-admin-dice-visual .grade{
    max-width:64px!important;
    padding:0 5px!important;
    font-size:5.5px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

.gx-admin-dice-copy{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
}

.gx-admin-dice-copy>b{
    font-size:11.5px!important;
    line-height:1.08!important;
    max-width:100%!important;
    display:block!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
}

.gx-admin-dice-copy>small{
    font-size:7.2px!important;
    line-height:1.25!important;
}

.gx-admin-dice-copy>small.desc{
    font-size:6.8px!important;
    line-height:1.30!important;

    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
}

.gx-admin-dice-stats{
    gap:4px!important;
    margin-top:3px!important;
}

.gx-admin-dice-stats>span{
    min-height:21px!important;
    padding:0 5px!important;
    font-size:6.3px!important;
}

.gx-admin-dice-price{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:33px!important;

    padding:0 6px!important;
    justify-content:center!important;

    font-size:9.5px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

/* Mobile only: one card per row. */
@media(max-width:620px){
    .gx-admin-item-picker-grid:has(.gx-admin-dice-choice){
        grid-template-columns:1fr!important;
    }

    .gx-admin-dice-choice{
        grid-template-columns:72px minmax(0,1fr)!important;
        min-height:154px!important;
    }

    .gx-admin-dice-visual{
        width:72px!important;
        max-width:72px!important;
    }

    .gx-admin-dice-visual .gx-dice-shop-cube{
        width:62px!important;
        height:62px!important;
        font-size:37px!important;
    }

    .gx-admin-dice-copy>b{
        font-size:12px!important;
    }

    .gx-admin-dice-price{
        font-size:10.5px!important;
    }
}


/* =====================================================================
   GX V85 — LOGIN SUCCESS PROGRESS BAR FIX
   JS requestAnimationFrame drives the bar; CSS no longer owns the timing.
   ===================================================================== */

.gx-login-success-loader{
    position:relative!important;
    height:4px!important;
    overflow:hidden!important;
    isolation:isolate!important;
    background:rgba(255,255,255,.060)!important;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.22),
        0 0 0 1px rgba(120,150,210,.025)!important;
}

.gx-login-success-loader > span,
.gx-login-success-card.has-warning .gx-login-success-loader > span{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:100%!important;

    transform:scaleX(0);
    transform-origin:left center!important;

    animation:none!important;
    transition:none!important;
    will-change:transform!important;

    background:
        linear-gradient(
            90deg,
            #3b82f6 0%,
            #6366f1 36%,
            #8b5cf6 68%,
            #22c55e 100%
        )!important;

    box-shadow:
        0 0 9px rgba(96,165,250,.38),
        0 0 13px rgba(139,92,246,.22)!important;
}

/* A bright travelling head makes movement obvious even on dark screens. */
.gx-login-success-loader > span::after{
    content:"";
    position:absolute;
    top:-3px;
    right:-8px;
    width:18px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    filter:blur(3px);
    box-shadow:
        0 0 10px #93c5fd,
        0 0 17px #8b5cf6;
    opacity:.72;
    pointer-events:none;
}

/* Gentle glow on the track while login is active. */
.gx-login-success-screen.show .gx-login-success-loader{
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.22),
        0 0 10px rgba(59,130,246,.065)!important;
}

@media(max-width:520px){
    .gx-login-success-loader{
        height:4px!important;
    }
}


/* =====================================================================
   GX V86 — CHAOS PENDING ACTION SPACING
   More breathing room between title, helper text and choice buttons.
   ===================================================================== */
.gx-chaos-pro-pending[data-pending-type="punishment"] .gx-chaos-action-card,
.gx-chaos-pro-pending[data-pending-type="shop"] .gx-chaos-action-card{
    padding:20px!important;
}

.gx-chaos-pro-pending[data-pending-type="punishment"] .gx-chaos-action-card>strong,
.gx-chaos-pro-pending[data-pending-type="shop"] .gx-chaos-action-card>strong{
    margin-top:7px!important;
    line-height:1.38!important;
}

.gx-chaos-pro-pending[data-pending-type="punishment"] .gx-chaos-action-card>span,
.gx-chaos-pro-pending[data-pending-type="shop"] .gx-chaos-action-card>span{
    margin-top:9px!important;
    line-height:1.6!important;
}

.gx-chaos-pro-pending[data-pending-type="punishment"] .punishment-options,
.gx-chaos-pro-pending[data-pending-type="shop"] .gx-chaos-shop-options{
    margin-top:16px!important;
    gap:12px!important;
}

.gx-chaos-pro-pending[data-pending-type="punishment"] .punishment-options button,
.gx-chaos-pro-pending[data-pending-type="shop"] .gx-chaos-shop-options button{
    min-height:78px!important;
    padding:10px 12px!important;
    border-radius:13px!important;
}

.gx-chaos-pro-pending[data-pending-type="punishment"] .punishment-options button i{
    margin-bottom:4px!important;
    font-size:17px!important;
}

.gx-chaos-pro-pending[data-pending-type="punishment"] .punishment-options button b{
    margin-top:2px!important;
    font-size:11px!important;
    line-height:1.3!important;
}

.gx-chaos-pro-pending[data-pending-type="punishment"] .punishment-options button span{
    margin-top:3px!important;
    font-size:8px!important;
    line-height:1.35!important;
}

@media(max-width:720px){
    .gx-chaos-pro-pending[data-pending-type="punishment"] .gx-chaos-action-card,
    .gx-chaos-pro-pending[data-pending-type="shop"] .gx-chaos-action-card{
        padding:15px!important;
    }

    .gx-chaos-pro-pending[data-pending-type="punishment"] .punishment-options,
    .gx-chaos-pro-pending[data-pending-type="shop"] .gx-chaos-shop-options{
        margin-top:12px!important;
        gap:8px!important;
    }

    .gx-chaos-pro-pending[data-pending-type="punishment"] .punishment-options button,
    .gx-chaos-pro-pending[data-pending-type="shop"] .gx-chaos-shop-options button{
        min-height:70px!important;
        padding:8px!important;
    }
}

/* =====================================================================
   GX V87 — REAL LIGHT SYSTEM + LIGHT CHAOS BOARD
   This is a true alternate palette. No invert()/blanket brightness hack.
   Every CHAOS surface has an explicit light-mode background, border,
   text color and shadow while tile identities keep their own accent color.
   ===================================================================== */

body.gx-theme-light{
    --gx87-page:#edf4fb;
    --gx87-page-2:#e5eef8;
    --gx87-surface:#ffffff;
    --gx87-surface-soft:#f6f9fd;
    --gx87-surface-soft-2:#eef4fa;
    --gx87-line:#cfdae8;
    --gx87-line-strong:#b9c9dc;
    --gx87-text:#17253a;
    --gx87-muted:#687b93;
    --gx87-faint:#8b9bb0;
    --gx87-shadow:0 15px 38px rgba(43,67,96,.10);

    background:
        radial-gradient(circle at 8% 0,rgba(64,132,224,.10),transparent 31%),
        radial-gradient(circle at 92% 4%,rgba(130,86,221,.065),transparent 28%),
        linear-gradient(180deg,var(--gx87-page),var(--gx87-page-2))!important;
    color:var(--gx87-text)!important;
    color-scheme:light!important;
}

/* Old dark body wallpaper must not leak through light mode. */
body.gx-theme-light::before,
body.gx-theme-light:before{
    background:
        radial-gradient(circle at 18% 12%,rgba(79,140,255,.10),transparent 31%),
        radial-gradient(circle at 82% 18%,rgba(124,77,255,.065),transparent 30%),
        linear-gradient(180deg,#f5f9fd 0%,#e8f1f9 100%)!important;
}

body.gx-theme-light #chaos-game-screen,
body.gx-theme-light #chaos-game-screen.gx-chaos-pro-ui{
    background:
        radial-gradient(circle at 10% 0,rgba(56,128,222,.10),transparent 31%),
        radial-gradient(circle at 91% 4%,rgba(132,83,223,.065),transparent 30%),
        linear-gradient(180deg,#eef5fc,#e7eff8)!important;
    color:var(--gx87-text)!important;
}

/* ------------------------------
   CHAOS physical board shell
   ------------------------------ */
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-stage{
    background:transparent!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-frame{
    background:
        linear-gradient(145deg,#ffffff,#edf3f9)!important;
    border-color:#bdccdc!important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.9),
        0 24px 48px rgba(43,64,90,.16),
        0 7px 0 #c7d4e2,
        inset 0 1px 0 rgba(255,255,255,1)!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-board-frame-glow{
    box-shadow:
        inset 0 0 24px rgba(74,125,194,.08),
        0 0 22px rgba(91,74,175,.06)!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-grid{
    background:
        radial-gradient(circle at 50% 47%,rgba(110,85,210,.055),transparent 34%),
        linear-gradient(180deg,#e9f1f8,#dfe9f3)!important;
    border-color:#c6d4e3!important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.82),
        inset 0 0 34px rgba(73,111,163,.055),
        0 14px 32px rgba(45,66,92,.10)!important;
    filter:none!important;
}

/* ------------------------------
   TRUE LIGHT TILE PALETTE
   No CSS invert/brightness. Each type has its own light material.
   ------------------------------ */
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell{
    background:linear-gradient(180deg,#fbfdff,#eef4f9)!important;
    border-color:#cad7e5!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 0 -3px 0 rgba(93,116,145,.07),
        0 4px 0 #c4d1df,
        0 7px 12px rgba(53,74,100,.10)!important;
    filter:none!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell:hover{
    filter:none!important;
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -3px 0 rgba(80,107,141,.07),
        0 4px 0 #b8c9db,
        0 10px 18px rgba(49,72,102,.14)!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell>strong{
    color:#213249!important;
    text-shadow:none!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell>small{
    color:#6b7e95!important;
    text-shadow:none!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell .cell-index{
    color:#63778f!important;
    background:rgba(255,255,255,.76)!important;
    border-color:rgba(143,161,184,.26)!important;
    text-shadow:none!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-cell-icon{
    background:rgba(255,255,255,.72)!important;
    border-color:rgba(143,160,181,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-start{
    background:linear-gradient(180deg,#e9f9ff,#dff3fb)!important;
    border-color:#9ed7e9!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-battle{
    background:linear-gradient(180deg,#fff2f6,#f8e3ea)!important;
    border-color:#e9b5c4!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-event,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-bonus{
    background:linear-gradient(180deg,#fff9e8,#f8efce)!important;
    border-color:#e8cf84!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-heal{
    background:linear-gradient(180deg,#edfbf4,#ddf4e8)!important;
    border-color:#a8d9bf!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-punish{
    background:linear-gradient(180deg,#fff1f8,#f8e2ee)!important;
    border-color:#e5b4ce!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-trap,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-blast,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-tax{
    background:linear-gradient(180deg,#fff3ee,#f8e5de)!important;
    border-color:#e4b7a8!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-landmark,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-curse{
    background:linear-gradient(180deg,#f7f0ff,#eadff7)!important;
    border-color:#cbb4e6!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-steal,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-property,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-shop{
    background:linear-gradient(180deg,#eef6ff,#e1ecf8)!important;
    border-color:#aec9e7!important;
}

/* Keep tile icons colorful while typography is dark. */
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-start>i{color:#1684aa!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-battle>i{color:#d84570!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-event>i,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-bonus>i{color:#b77a05!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-heal>i{color:#23946a!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-punish>i{color:#c63d82!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-trap>i,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-blast>i,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-tax>i{color:#c75f3e!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-landmark>i,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-curse>i{color:#8153bd!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-steal>i,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-property>i,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-shop>i{color:#3c73ad!important}

/* ------------------------------
   Center arena becomes LIGHT too.
   Previous builds deliberately kept it dark; V87 removes that exception.
   ------------------------------ */
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-arena-center{
    background:
        radial-gradient(circle at 50% 47%,rgba(122,82,218,.10),transparent 27%),
        radial-gradient(circle at 50% 54%,rgba(58,132,219,.085),transparent 50%),
        linear-gradient(180deg,#f8fbff,#eaf2fa)!important;
    border-color:#c1d0e0!important;
    box-shadow:
        inset 0 0 60px rgba(65,104,160,.07),
        inset 0 1px 0 rgba(255,255,255,.95)!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-pro-arena-center::after{
    background:rgba(232,240,249,.86)!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-pro-arena-floor{
    background:
        radial-gradient(circle at 50% 50%,rgba(123,83,218,.11),transparent 36%),
        radial-gradient(circle at 50% 50%,rgba(67,139,221,.07),transparent 64%)!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-pro-arena-floor::before,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-arena-floor::after{
    border-color:rgba(89,112,172,.16)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-arena-floor::after{
    border-color:rgba(135,91,199,.17)!important;
}

body.gx-theme-light #chaos-game-screen .gx-chaos-pro-logo{
    filter:drop-shadow(0 10px 16px rgba(60,72,101,.13))!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-logo-top{
    color:#507ed5!important;
    -webkit-text-stroke:1px rgba(54,92,159,.13)!important;
    text-shadow:0 3px 0 #d4e2f5,0 9px 18px rgba(73,116,190,.15)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-logo-bottom{
    color:#9360d5!important;
    -webkit-text-stroke:1px rgba(111,65,167,.12)!important;
    text-shadow:0 3px 0 #e2d5f3,0 9px 18px rgba(124,81,182,.14)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-logo small{
    color:#61758f!important;
    background:rgba(255,255,255,.78)!important;
    border-color:#d3deeb!important;
    box-shadow:0 5px 14px rgba(48,72,101,.07)!important;
}

/* Turn/status cards in the center. */
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-turn-card,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-turn-flow,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-last-notice{
    background:rgba(255,255,255,.94)!important;
    border-color:#cbd8e7!important;
    box-shadow:0 10px 22px rgba(49,72,101,.09)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-turn-card small,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-turn-card span,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-turn-flow>p,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-turn-flow .gx-chaos-turn-steps span{
    color:#6d8098!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-turn-card strong,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-turn-flow>strong,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-turn-flow .gx-chaos-turn-steps i{
    color:#22344b!important;
    text-shadow:none!important;
}

/* Pending action layer: white panel, not a dark overlay in light theme. */
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-pending .gx-chaos-action-card,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-pending .gx-chaos-defense-card,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-pending .gx-chaos-pvp-no-target{
    background:
        radial-gradient(circle at 0 0,rgba(120,85,213,.055),transparent 36%),
        rgba(255,255,255,.97)!important;
    border-color:#cbd8e7!important;
    color:#213248!important;
    box-shadow:0 15px 34px rgba(52,74,102,.14)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-pending .gx-chaos-action-card>small,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-pending .gx-chaos-defense-card>small{
    color:#7d6aa7!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-pending .gx-chaos-action-card>strong,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-pending .gx-chaos-defense-card>strong{
    color:#1f3047!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-pending .gx-chaos-action-card>span{
    color:#6d7f95!important;
}

body.gx-theme-light #chaos-game-screen .punishment-options>button,
body.gx-theme-light #chaos-game-screen .gx-chaos-shop-options>button,
body.gx-theme-light #chaos-game-screen .gx-chaos-defense-options>button,
body.gx-theme-light #chaos-game-screen .gx-chaos-pvp-targets>button{
    background:#f5f8fc!important;
    border-color:#d2deea!important;
    color:#25364c!important;
    box-shadow:0 6px 14px rgba(49,70,96,.07)!important;
}
body.gx-theme-light #chaos-game-screen .punishment-options>button:hover,
body.gx-theme-light #chaos-game-screen .gx-chaos-shop-options>button:hover,
body.gx-theme-light #chaos-game-screen .gx-chaos-defense-options>button:hover,
body.gx-theme-light #chaos-game-screen .gx-chaos-pvp-targets>button:hover{
    background:#ffffff!important;
    border-color:#aebfda!important;
}

/* ------------------------------
   Dice HUD / WebGL chrome also gets real light surfaces.
   The 3D mesh itself is NOT color-inverted.
   ------------------------------ */
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-dice-console{
    background:rgba(255,255,255,.96)!important;
    border-color:#c7d5e4!important;
    box-shadow:0 11px 26px rgba(45,68,96,.10)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-dice-platform{
    background:#eef4fa!important;
    border-color:#cedae7!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-equipped-dice-name,
body.gx-theme-light #chaos-game-screen .gx-chaos-dice-total{
    color:#40546f!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-3d-dice-stage>canvas{
    filter:
        drop-shadow(0 14px 14px rgba(69,76,70,.21))
        drop-shadow(0 0 9px rgba(126,135,85,.11))!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-3d-dice-ground{
    background:
        radial-gradient(ellipse at center,
            rgba(112,132,92,.12) 0%,
            rgba(91,125,136,.065) 40%,
            rgba(87,112,151,.025) 66%,
            transparent 78%)!important;
    box-shadow:0 0 20px rgba(76,105,139,.08)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-3d-dice-ground>i{
    border-color:rgba(87,113,153,.14)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-3d-dice-badge,
body.gx-theme-light #chaos-game-screen .gx-chaos-3d-dice-result,
body.gx-theme-light #chaos-game-screen .gx-chaos-3d-dice-loader{
    color:#33475f!important;
    background:rgba(255,255,255,.90)!important;
    border-color:#cad7e5!important;
    box-shadow:0 8px 20px rgba(46,70,98,.09)!important;
    backdrop-filter:blur(8px)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-3d-dice-result strong{color:#7650a8!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-3d-dice-result small{color:#71859f!important}

/* Side HUD polish: keep everything in the same light material system. */
body.gx-theme-light #chaos-game-screen .gx-chaos-panel,
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-ui .gx-chaos-panel{
    background:rgba(255,255,255,.96)!important;
    border-color:#cfdae7!important;
    box-shadow:0 10px 26px rgba(48,70,98,.085)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-collapsible-head,
body.gx-theme-light #chaos-game-screen .gx-chaos-items-panel-head{
    background:transparent!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-collapse-toggle,
body.gx-theme-light #chaos-game-screen .gx-chaos-collapse-summary,
body.gx-theme-light #chaos-game-screen .gx-chaos-open-shop-mini{
    background:#f2f6fb!important;
    color:#657990!important;
    border-color:#d4dfeb!important;
}

/* Camera physical edge must match the light board, including both camera selectors. */
body.gx-theme-light #chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid::after,
body.gx-theme-light #chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid::after{
    background:linear-gradient(180deg,#c8d6e5,#9fb3ca)!important;
    border-color:#8fa5be!important;
    box-shadow:0 10px 22px rgba(45,64,88,.13)!important;
}

/* V87: in light mode the board art is authored light; never apply inversion. */
body.gx-theme-light #chaos-game-screen,
body.gx-theme-light #chaos-game-screen *{
    --gx-light-mode-rendering:true;
}

/* Phones/tablets keep the same palette; only shadow depth is reduced. */
body.gx-theme-light.gx-device-mobile #chaos-game-screen .gx-chaos-pro-board-frame{
    box-shadow:0 12px 28px rgba(43,64,91,.12),0 4px 0 #c8d5e2!important;
}
body.gx-theme-light.gx-device-mobile #chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -2px 0 rgba(93,116,145,.06),
        0 3px 0 #c4d1df,
        0 5px 9px rgba(53,74,100,.08)!important;
}


/* =====================================================================
   GX V90 — BOARD CAMERA REBUILD + COMPLETE LIGHT THEME
   One authoritative layer; replaces the V88/V89 experiments.
   ===================================================================== */
.gx-build-proof{
    display:inline-flex!important;align-items:center!important;margin-left:6px!important;
    padding:2px 6px!important;border-radius:999px!important;
    color:#b896ff!important;background:rgba(132,87,235,.12)!important;
    border:1px solid rgba(151,109,244,.18)!important;
    font:900 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace!important;
    letter-spacing:.08em!important;vertical-align:middle!important;
}

/* ---------------------------------------------------------------------
   CHAOS BOARD CAMERA V90
   9x9 board remains intact. We resize the actual board surface and use a
   moderate tabletop perspective so tiles stay large enough to read.
   --------------------------------------------------------------------- */
#chaos-game-screen .gx-chaos-pro-stage{
    overflow:visible!important;
    padding:8px 0 28px!important;
}
#chaos-game-screen .gx-chaos-pro-board-frame{
    position:relative!important;
    width:min(100%,790px)!important;
    min-width:650px!important;
    min-height:650px!important;
    margin:0 auto!important;
    padding:20px!important;
    display:grid!important;
    place-items:center!important;
    perspective:1550px!important;
    perspective-origin:50% 38%!important;
    overflow:visible!important;
}
#chaos-game-screen .gx-chaos-pro-board-grid{
    width:590px!important;
    min-width:590px!important;
    height:590px!important;
    min-height:590px!important;
    margin:0 auto!important;
    transform-origin:50% 50%!important;
    transform-style:preserve-3d!important;
    transition:transform .35s ease,filter .35s ease!important;
}
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid,
#chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid{
    transform:translateY(22px) rotateX(42deg) rotateZ(45deg) scale(.91)!important;
    filter:drop-shadow(0 30px 20px rgba(0,0,0,.29))!important;
    box-shadow:0 12px 0 rgba(6,10,18,.42),0 32px 48px rgba(0,0,0,.20)!important;
}
#chaos-game-screen.gx-chaos-camera-top .gx-chaos-pro-board-grid,
#chaos-game-screen[data-camera-mode="top"] .gx-chaos-pro-board-grid{
    transform:none!important;
    filter:none!important;
}
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid::after,
#chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid::after{
    content:""!important;position:absolute!important;left:2%!important;right:2%!important;
    bottom:-10px!important;height:12px!important;border-radius:0 0 14px 14px!important;
    background:linear-gradient(180deg,#26354d,#0a111e)!important;
    border:1px solid rgba(92,119,155,.14)!important;
    transform:translateZ(-8px)!important;z-index:-2!important;
}

/* Restore readable tiles. Do not miniaturize text for the camera. */
#chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell{
    padding:6px 4px 7px!important;border-radius:8px!important;
}
#chaos-game-screen .gx-chaos-cell-icon{
    width:27px!important;height:27px!important;margin:3px auto 2px!important;border-radius:8px!important;
}
#chaos-game-screen .gx-chaos-cell-icon i{font-size:12px!important}
#chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell>strong{
    font-size:8.1px!important;line-height:1.05!important;
}
#chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell>small{
    font-size:6px!important;line-height:1.08!important;margin-top:2px!important;
}
#chaos-game-screen .gx-chaos-board-cell .cell-index{
    top:3px!important;left:4px!important;font-size:6.2px!important;
}
#chaos-game-screen .gx-chaos-board-token{
    width:21px!important;height:21px!important;font-size:6.5px!important;
}

/* Center HUD stays on the board plane; no counter-rotation that clips logo/UI. */
#chaos-game-screen.gx-chaos-camera-iso :is(
    .gx-chaos-pro-logo,.gx-chaos-pro-turn-card,.gx-chaos-pro-turn-flow,
    .gx-chaos-pro-pending,.gx-chaos-pro-dice-console,.gx-chaos-pro-last-notice
),
#chaos-game-screen[data-camera-mode="iso"] :is(
    .gx-chaos-pro-logo,.gx-chaos-pro-turn-card,.gx-chaos-pro-turn-flow,
    .gx-chaos-pro-pending,.gx-chaos-pro-dice-console,.gx-chaos-pro-last-notice
){
    transform:none!important;
}
#chaos-game-screen .gx-chaos-pro-pending{bottom:78px!important}
#chaos-game-screen .gx-chaos-pro-dice-console{bottom:12px!important}

@media(max-width:1180px){
    #chaos-game-screen .gx-chaos-pro-board-frame{width:720px!important;min-width:620px!important;min-height:620px!important}
    #chaos-game-screen .gx-chaos-pro-board-grid{width:550px!important;min-width:550px!important;height:550px!important;min-height:550px!important}
}
@media(max-width:760px){
    #chaos-game-screen .gx-chaos-pro-stage{overflow:auto!important;padding-bottom:8px!important}
    #chaos-game-screen .gx-chaos-pro-board-frame{width:650px!important;min-width:650px!important;min-height:590px!important;padding:10px!important}
    #chaos-game-screen .gx-chaos-pro-board-grid{width:520px!important;min-width:520px!important;height:520px!important;min-height:520px!important}
    #chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid,
    #chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid{
        transform:translateY(18px) rotateX(38deg) rotateZ(45deg) scale(.91)!important;
    }
}

/* ---------------------------------------------------------------------
   COMPLETE LIGHT THEME V90
   Real authored surfaces; no invert/filter/brightness whole-page trick.
   --------------------------------------------------------------------- */
body.gx-theme-light{
    --v90-bg:#eef4fb;
    --v90-bg-2:#e7eff8;
    --v90-surface:#ffffff;
    --v90-surface-2:#f7faff;
    --v90-surface-3:#edf4fc;
    --v90-line:#d2deeb;
    --v90-line-2:#bed0e3;
    --v90-text:#18263b;
    --v90-text-2:#334861;
    --v90-muted:#6c7f97;
    --v90-faint:#94a4b8;
    --v90-blue:#356fdf;
    --v90-blue-soft:#eaf2ff;
    --v90-purple:#7547df;
    --v90-shadow:0 18px 48px rgba(42,65,94,.11);
    background:linear-gradient(180deg,#f4f8fd,#eaf1f9)!important;
    color:var(--v90-text)!important;
    color-scheme:light!important;
    filter:none!important;
}
html[data-gx-theme="light"]{background:#eef4fb!important;color-scheme:light!important}
body.gx-theme-light *{text-shadow:none}
body.gx-theme-light :is(.auth-screen,.gx-system-page,.gx-polished-screen,#game-select-screen,#lobby-screen,#game-room-screen,#word-game-screen,#chaos-game-screen){
    background:
      radial-gradient(circle at 12% 0,rgba(64,132,229,.07),transparent 30%),
      radial-gradient(circle at 88% 8%,rgba(116,76,219,.045),transparent 26%),
      var(--v90-bg)!important;
    color:var(--v90-text)!important;
    filter:none!important;
}

/* Header */
body.gx-theme-light .game-header{
    background:rgba(255,255,255,.97)!important;border-color:var(--v90-line)!important;
    box-shadow:0 8px 26px rgba(41,65,95,.08)!important;
}
body.gx-theme-light :is(.gx-header-theme-btn,.gx-header-display-btn,.gx-language-toggle,.gx-wallet-pill,#main-menu-button){
    background:#f8fbff!important;color:#50637b!important;border-color:#d5e1ed!important;
}
body.gx-theme-light .gx-build-proof{color:#6541a3!important;background:#efe8ff!important;border-color:#dacbf2!important}

/* Global readable text on light surfaces */
body.gx-theme-light :is(
    .gx-auth-card,.gx-auth-brand-panel,.gx-recovery-info,.gx-recovery-form-panel,
    .gx-hub-hero,.gx-game-card,.gx-word-lobby-command-main,.gx-lobby-action-card,
    .gx-lobby-browser-shell,.gx-room-card,.glass-card,.modal-content,#right-sidebar-menu,
    .gx-chaos-panel,.gx-chaos-pro-board-frame,.gx-word-match-shell
) :is(h1,h2,h3,h4,h5,strong,b,label){color:var(--v90-text)!important}
body.gx-theme-light :is(
    .gx-auth-card,.gx-auth-brand-panel,.gx-recovery-info,.gx-recovery-form-panel,
    .gx-hub-hero,.gx-game-card,.gx-word-lobby-command-main,.gx-lobby-action-card,
    .gx-lobby-browser-shell,.gx-room-card,.glass-card,.modal-content,#right-sidebar-menu,
    .gx-chaos-panel,.gx-chaos-pro-board-frame,.gx-word-match-shell
) :is(p,small,em,.muted,[class*="subtitle"],[class*="desc"]){color:var(--v90-muted)!important}

/* Login / register / recovery */
body.gx-theme-light .gx-auth-layout{
    background:var(--v90-surface)!important;border:1px solid var(--v90-line)!important;
    box-shadow:0 28px 72px rgba(43,66,94,.13)!important;
}
body.gx-theme-light .gx-auth-brand-panel{
    background:
      radial-gradient(circle at 30% 12%,rgba(77,134,232,.12),transparent 34%),
      linear-gradient(145deg,#ffffff,#eef5ff)!important;
    border-color:var(--v90-line)!important;box-shadow:none!important;
}
body.gx-theme-light .gx-auth-card,
body.gx-theme-light .gx-recovery-info,
body.gx-theme-light .gx-recovery-form-panel{
    background:#fff!important;color:var(--v90-text)!important;border-color:var(--v90-line)!important;
    box-shadow:none!important;
}
body.gx-theme-light .gx-auth-card-head h2{color:var(--v90-text)!important}
body.gx-theme-light .gx-auth-card-head p,
body.gx-theme-light .gx-auth-field>span,
body.gx-theme-light .gx-auth-card-foot{color:var(--v90-muted)!important}
body.gx-theme-light .gx-auth-feature-grid>div{
    background:#f5f8fd!important;border-color:#d9e4ef!important;color:var(--v90-text)!important;
}
body.gx-theme-light .gx-auth-feature-grid b{color:#31445c!important}
body.gx-theme-light .gx-auth-feature-grid small{color:#7b8ba0!important}
body.gx-theme-light .gx-auth-field .game-input,
body.gx-theme-light .gx-register-grid .game-input,
body.gx-theme-light :is(input,textarea,select,.game-input,.input-dark){
    background:#f8fbff!important;color:#17263a!important;border-color:#c9d8e8!important;
    box-shadow:inset 0 1px 2px rgba(33,54,80,.03)!important;
}
body.gx-theme-light :is(input,textarea)::placeholder{color:#98a8ba!important}
body.gx-theme-light .gx-auth-input-wrap>i{color:#70829a!important}
body.gx-theme-light .gx-auth-secondary-btn{
    background:#edf3fa!important;color:#425975!important;border-color:#cfdeed!important;
}
body.gx-theme-light .gx-auth-secondary-btn.register{color:#316bcf!important;background:#eaf2ff!important}
body.gx-theme-light .gx-auth-secondary-btn:hover{background:#e4edf8!important;color:#1d3655!important}
body.gx-theme-light .gx-login-display-setup-btn{
    background:#f7faff!important;color:#36506e!important;border-color:#d2dfec!important;
}
body.gx-theme-light .gx-auth-divider{color:#8595aa!important}
body.gx-theme-light .gx-auth-divider:before,
body.gx-theme-light .gx-auth-divider:after{background:#dce5ef!important}
body.gx-theme-light .gx-auth-back{background:#f5f8fc!important;color:#667a92!important;border-color:#d4e0ec!important}

/* Game Hub: cards become actual light cards instead of dark cards on white page. */
body.gx-theme-light #game-select-screen .gx-hub-hero{
    background:#fff!important;border:1px solid var(--v90-line)!important;box-shadow:var(--v90-shadow)!important;
}
body.gx-theme-light #game-select-screen .gx-hub-title{color:#17263b!important}
body.gx-theme-light #game-select-screen .gx-hub-subtitle{color:#6b7d94!important}
body.gx-theme-light #game-select-screen .gx-game-card{
    background:#fff!important;color:var(--v90-text)!important;border:1px solid #cfdeed!important;
    box-shadow:0 15px 34px rgba(45,69,98,.10)!important;
}
body.gx-theme-light #game-select-screen .gx-game-card:hover{
    border-color:#b3c9e4!important;box-shadow:0 22px 44px rgba(45,69,98,.14)!important;
}
body.gx-theme-light #game-select-screen .gx-game-card-art{
    background:linear-gradient(145deg,#edf4ff,#e4edfa)!important;border-bottom:1px solid #d5e2ef!important;
}
body.gx-theme-light #game-select-screen .gx-word-game-card .gx-game-card-art{
    background:radial-gradient(circle at 75% 20%,rgba(45,122,226,.14),transparent 38%),linear-gradient(145deg,#eef5ff,#e1ecfb)!important;
}
body.gx-theme-light #game-select-screen .gx-chaos-game-card .gx-game-card-art{
    background:radial-gradient(circle at 75% 20%,rgba(124,69,222,.14),transparent 40%),linear-gradient(145deg,#f4efff,#eae2fb)!important;
}
body.gx-theme-light #game-select-screen .gx-coming-game-card .gx-game-card-art{
    background:linear-gradient(145deg,#f3f6fa,#e9eef5)!important;
}
body.gx-theme-light #game-select-screen .gx-game-card-body{background:#fff!important}
body.gx-theme-light #game-select-screen .gx-game-card h3{color:#1a2940!important}
body.gx-theme-light #game-select-screen .gx-game-card-body p:not(.gx-game-category){color:#6d7f96!important}
body.gx-theme-light #game-select-screen .gx-game-category{color:#6e83a2!important}

/* WORD lobby */
body.gx-theme-light .gx-word-lobby-screen{background:var(--v90-bg)!important}
body.gx-theme-light .gx-word-lobby-command-main{
    background:
      radial-gradient(circle at 86% 10%,rgba(58,128,226,.10),transparent 35%),
      #ffffff!important;
    border-color:#cad9e9!important;box-shadow:var(--v90-shadow)!important;
}
body.gx-theme-light .gx-word-lobby-command-main::after{color:rgba(69,120,194,.045)!important}
body.gx-theme-light .gx-lobby-back-btn,
body.gx-theme-light .gx-word-lobby-kicker{
    background:#f1f6fd!important;color:#526f98!important;border-color:#d1dfef!important;
}
body.gx-theme-light .gx-word-lobby-title-row h1{color:#17263b!important}
body.gx-theme-light .gx-word-lobby-title-row p{color:#657b95!important}
body.gx-theme-light .gx-word-lobby-status{
    background:#f4f8fd!important;border-color:#d7e2ed!important;color:#52677f!important;
}
body.gx-theme-light .gx-word-lobby-status.live{color:#16865a!important;background:#e9f8f1!important}
body.gx-theme-light .gx-word-lobby-status.rank-ready{color:#946712!important;background:#fff6dc!important;border-color:#eedba4!important}
body.gx-theme-light .gx-lobby-action-card{
    background:#fff!important;border-color:#d4e0ec!important;color:var(--v90-text)!important;
    box-shadow:0 8px 20px rgba(45,69,98,.06)!important;
}
body.gx-theme-light .gx-lobby-action-card.rank{background:linear-gradient(90deg,#fff9e9,#fff)!important;border-color:#ead7a7!important}
body.gx-theme-light .gx-lobby-action-card.create{background:linear-gradient(90deg,#edf5ff,#fff)!important;border-color:#c9dcf3!important}
body.gx-theme-light .gx-lobby-action-card.friends{background:linear-gradient(90deg,#ebfaf4,#fff)!important;border-color:#c9eadc!important}
body.gx-theme-light .gx-lobby-action-copy strong{color:#25374f!important}
body.gx-theme-light .gx-lobby-action-copy em{color:#7a8ba0!important}
body.gx-theme-light .gx-lobby-browser-shell{
    background:#fff!important;border-color:#cbd9e7!important;box-shadow:var(--v90-shadow)!important;
}
body.gx-theme-light .gx-lobby-browser-title h2{color:#1b2b42!important}
body.gx-theme-light .gx-lobby-browser-title p,
body.gx-theme-light .gx-lobby-room-legend{color:#71839a!important}
body.gx-theme-light .gx-lobby-search-box{
    background:#f7faff!important;border-color:#cfdeed!important;color:#273b54!important;
}
body.gx-theme-light .gx-lobby-search-box input{background:transparent!important;color:#253951!important;border:0!important;box-shadow:none!important}
body.gx-theme-light .gx-lobby-refresh-btn{background:#edf4ff!important;color:#3b6fbd!important;border-color:#c9daf0!important}
body.gx-theme-light .gx-room-card{
    background:#f8fbff!important;border-color:#d5e1ed!important;color:var(--v90-text)!important;
    box-shadow:0 8px 20px rgba(45,69,98,.06)!important;
}
body.gx-theme-light .gx-room-card:hover{border-color:#bcd1e8!important;box-shadow:0 14px 28px rgba(45,69,98,.10)!important}
body.gx-theme-light .gx-room-card h4{color:#21344d!important}
body.gx-theme-light .gx-room-id{color:#8292a6!important}
body.gx-theme-light .gx-room-meta{background:#edf3f9!important;border-color:#d9e4ef!important}
body.gx-theme-light .gx-room-meta span{color:#8190a3!important}
body.gx-theme-light .gx-room-meta strong{color:#344a63!important}
body.gx-theme-light .gx-room-player-count{background:#eaf2ff!important;color:#476b9d!important;border-color:#cadcf2!important}
body.gx-theme-light .gx-rank-dev-tools{background:#fff9ea!important;border-color:#ead8aa!important}
body.gx-theme-light .gx-rank-dev-toggle{color:#52657d!important}
body.gx-theme-light .gx-rank-dev-toggle-copy strong{color:#42546b!important}
body.gx-theme-light .gx-lobby-room-grid .no-rooms-placeholder{background:#f7faff!important;border-color:#d5e1ed!important}

/* Mailbox */
body.gx-theme-light .gx-mailbox-overlay{background:rgba(179,198,220,.60)!important}
body.gx-theme-light .gx-mailbox-modal{
    background:#fff!important;color:var(--v90-text)!important;border-color:#cbd9e8!important;
    box-shadow:0 26px 72px rgba(40,63,91,.16)!important;
}
body.gx-theme-light .gx-mailbox-head,
body.gx-theme-light .gx-mailbox-toolbar{background:#fff!important;border-color:#e0e8f1!important}
body.gx-theme-light .gx-mailbox-head h3{color:#1a2a41!important}
body.gx-theme-light .gx-mailbox-head p{color:#6e8097!important}
body.gx-theme-light .gx-mailbox-head>button,
body.gx-theme-light .gx-mailbox-tabs button,
body.gx-theme-light .gx-mailbox-refresh{
    background:#f8fbff!important;color:#60748d!important;border-color:#dbe5ef!important;
}
body.gx-theme-light .gx-mailbox-tabs button.active{
    background:#e9f2ff!important;color:#285ca8!important;border-color:#bcd3f0!important;
}
body.gx-theme-light .gx-mailbox-tabs button.active b{color:#285ca8!important;background:#dbeaff!important}
body.gx-theme-light .gx-mailbox-list{background:#fbfdff!important;border-color:#e2eaf2!important}
body.gx-theme-light .gx-mailbox-detail{background:#fff!important;color:var(--v90-text)!important}
body.gx-theme-light .gx-mailbox-item{background:#fff!important;border-color:#dce6ef!important;color:var(--v90-text)!important}
body.gx-theme-light .gx-mailbox-item:hover,
body.gx-theme-light .gx-mailbox-item.selected{background:#edf5ff!important;border-color:#c2d8f2!important}
body.gx-theme-light .gx-mailbox-empty,
body.gx-theme-light .gx-mailbox-detail-empty{color:#526780!important}
body.gx-theme-light .gx-mailbox-detail-empty strong{color:#263a52!important}
body.gx-theme-light .gx-mailbox-detail-empty span{color:#7b8ca1!important}

/* Generic panels / profile / admin / shop / inventory / side menu */
body.gx-theme-light :is(
    .glass-card,.modal-content,.gx-market-modal,.gx-item-shop-modal,.gx-inventory-modal,
    .gx-report-modal,.gx-ticket-modal,.gx-ticket-create-modal,.gx-admin-report-modal,
    .gx-admin-broadcast-modal,.gx-economy-admin-modal,.gx-economy-admin-card,
    .gx-admin-inventory-modal,.admin-player-modal,.gx-display-mode-modal,
    .gx-chaos-panel,.gx-chaos-game-player,.gx-chaos-info-card
){
    background:#fff!important;color:var(--v90-text)!important;border-color:var(--v90-line)!important;
    box-shadow:var(--v90-shadow)!important;
}
body.gx-theme-light #right-sidebar-menu{
    background:linear-gradient(180deg,#fff,#f2f7fc)!important;color:var(--v90-text)!important;
    border-color:var(--v90-line)!important;box-shadow:-20px 0 55px rgba(40,63,91,.14)!important;
}
body.gx-theme-light #right-sidebar-menu .sidebar-profile-card{background:#f6f9fd!important;border-color:#d7e2ed!important}
body.gx-theme-light #right-sidebar-menu .menu-link-item{color:#52677f!important;background:transparent!important}
body.gx-theme-light #right-sidebar-menu .menu-link-item:hover,
body.gx-theme-light #right-sidebar-menu .menu-link-item.active-link{background:#eaf2fd!important;color:#275da6!important;border-color:#cadbf0!important}
body.gx-theme-light .modal-overlay{background:rgba(180,199,221,.60)!important}

/* Keep primary/colored action buttons legible in light mode. */
body.gx-theme-light :is(
    .gx-auth-main-btn,.gx-game-play-btn,.gx-room-join-btn,.btn-primary,.gx-word-primary-btn,
    .gx-chaos-start-game-btn,.gx-chaos-add-bot-btn,.gx-room-submit-btn
){color:#fff!important}

/* CHAOS authored light palette */
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-frame{
    background:linear-gradient(145deg,#ffffff,#edf4fb)!important;border-color:#bdcde0!important;
    box-shadow:0 20px 42px rgba(42,65,94,.13),0 7px 0 #c8d5e3!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-grid{
    background:linear-gradient(180deg,#e8f0f8,#dce7f2)!important;border-color:#c1d0e0!important;filter:none!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-arena-center{
    background:radial-gradient(circle at 50% 48%,rgba(104,77,207,.08),transparent 32%),linear-gradient(180deg,#fff,#eef5fb)!important;
    border-color:#c2d2e2!important;box-shadow:inset 0 0 46px rgba(75,107,145,.06)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell{
    color:#203149!important;background:#f9fbfe!important;border-color:#c6d3e1!important;filter:none!important;
    box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(78,101,130,.07),0 3px 0 #bdcad7,0 5px 9px rgba(45,65,91,.08)!important;
}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-start{background:#dff5fb!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-battle{background:#f8e4eb!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-event,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-bonus{background:#f9f0d3!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-heal{background:#def3e8!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-punish{background:#f7e1ed!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-trap,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-blast,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-tax{background:#f7e3da!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-landmark,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-curse{background:#eee3f8!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-steal,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-property,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell.type-shop{background:#e1edf8!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell>strong{color:#24374f!important}
body.gx-theme-light #chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell>small,
body.gx-theme-light #chaos-game-screen .gx-chaos-board-cell .cell-index{color:#6c7f95!important}
body.gx-theme-light #chaos-game-screen :is(.gx-chaos-pro-dice-console,.gx-chaos-pro-turn-card,.gx-chaos-action-card,.gx-chaos-defense-card){
    background:rgba(255,255,255,.97)!important;color:#21354d!important;border-color:#c7d5e3!important;
    box-shadow:0 10px 22px rgba(45,65,91,.10)!important;
}
body.gx-theme-light #chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid::after,
body.gx-theme-light #chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid::after{
    background:linear-gradient(180deg,#d3deea,#aebdcd)!important;border-color:#b5c5d5!important;
}


/* ==============================================================
   GX V91 — LOGIN SAFETY / ANTI-SCAM NOTICE
   Dark mode: yellow announcement headline
   Light mode: red announcement headline
   ============================================================== */
#login-screen.gx-auth-page{
    align-items:flex-start!important;
    overflow-y:auto!important;
}
.gx-login-stack{
    width:min(1120px,100%)!important;
    margin:0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:18px!important;
}
.gx-login-stack>.gx-auth-layout{
    width:100%!important;
}
.gx-login-safety-notice{
    position:relative!important;
    width:100%!important;
    padding:22px 26px 20px!important;
    border:1px solid rgba(244,198,76,.25)!important;
    border-radius:24px!important;
    overflow:hidden!important;
    background:
        radial-gradient(circle at 50% -35%,rgba(244,198,76,.10),transparent 42%),
        linear-gradient(145deg,rgba(15,21,36,.97),rgba(8,13,24,.98))!important;
    box-shadow:0 24px 65px rgba(0,0,0,.30)!important;
}
.gx-login-safety-notice::before{
    content:""!important;
    position:absolute!important;
    inset:0 auto 0 0!important;
    width:4px!important;
    background:linear-gradient(180deg,#ffd84f,#f1a818)!important;
}
.gx-login-safety-kicker{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:9px!important;
    color:#ffd84f!important;
    font-size:15px!important;
    line-height:1.2!important;
    font-weight:1000!important;
    letter-spacing:.045em!important;
    text-align:center!important;
    text-transform:uppercase!important;
}
.gx-login-safety-kicker i{
    font-size:17px!important;
    filter:drop-shadow(0 0 10px rgba(255,216,79,.30))!important;
}
.gx-login-safety-logo{
    min-height:88px!important;
    margin:10px 0 4px!important;
    display:grid!important;
    place-items:center!important;
}
.gx-login-safety-logo img{
    width:min(190px,42vw)!important;
    max-height:105px!important;
    object-fit:contain!important;
    filter:drop-shadow(0 9px 18px rgba(90,55,190,.28))!important;
}
.gx-login-safety-heading{
    max-width:900px!important;
    margin:0 auto 16px!important;
    text-align:center!important;
}
.gx-login-safety-heading h2{
    margin:0!important;
    color:#f4f7ff!important;
    font-size:21px!important;
    line-height:1.28!important;
    font-weight:1000!important;
}
.gx-login-safety-heading p{
    margin:7px auto 0!important;
    max-width:860px!important;
    color:#9caac0!important;
    font-size:11px!important;
    line-height:1.65!important;
}
.gx-login-safety-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
}
.gx-login-safety-grid article{
    min-width:0!important;
    display:grid!important;
    grid-template-columns:34px 1fr!important;
    gap:10px!important;
    align-items:start!important;
    padding:12px!important;
    border:1px solid rgba(139,157,190,.13)!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.025)!important;
}
.gx-login-safety-grid article>i{
    width:34px!important;
    height:34px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:10px!important;
    color:#ffd25a!important;
    background:rgba(255,206,65,.08)!important;
    border:1px solid rgba(255,210,90,.12)!important;
    font-size:13px!important;
}
.gx-login-safety-grid b{
    display:block!important;
    color:#e9eef9!important;
    font-size:10px!important;
    line-height:1.35!important;
}
.gx-login-safety-grid span{
    display:block!important;
    margin-top:3px!important;
    color:#8493aa!important;
    font-size:8.5px!important;
    line-height:1.55!important;
}
.gx-login-safety-liability{
    margin-top:10px!important;
    display:grid!important;
    grid-template-columns:34px 1fr!important;
    gap:10px!important;
    padding:12px 14px!important;
    border:1px solid rgba(102,141,210,.16)!important;
    border-radius:14px!important;
    background:rgba(39,66,112,.10)!important;
}
.gx-login-safety-liability>i{
    width:34px!important;
    height:34px!important;
    display:grid!important;
    place-items:center!important;
    color:#8fb9ff!important;
    font-size:14px!important;
}
.gx-login-safety-liability p{margin:0!important}
.gx-login-safety-liability b{
    display:block!important;
    color:#dce8fb!important;
    font-size:10px!important;
}
.gx-login-safety-liability span{
    display:block!important;
    margin-top:3px!important;
    color:#8496af!important;
    font-size:8.5px!important;
    line-height:1.6!important;
}
.gx-login-safety-ack{
    margin-top:10px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:7px!important;
    color:#98a7bd!important;
    font-size:8px!important;
    line-height:1.5!important;
    text-align:center!important;
}
.gx-login-safety-ack i{margin-top:1px!important;color:#c7a43d!important}

/* Auth page needs room for the new notice instead of vertical clipping. */
#login-screen.gx-auth-page{
    padding-top:82px!important;
    padding-bottom:42px!important;
}

/* Light mode: authored red safety identity, not a color inversion. */
body.gx-theme-light .gx-login-safety-notice{
    background:
        radial-gradient(circle at 50% -35%,rgba(204,44,56,.055),transparent 42%),
        linear-gradient(145deg,#ffffff,#f8fbff)!important;
    border-color:#e2c2c5!important;
    box-shadow:0 22px 56px rgba(53,72,98,.11)!important;
}
body.gx-theme-light .gx-login-safety-notice::before{
    background:linear-gradient(180deg,#e33642,#b91927)!important;
}
body.gx-theme-light .gx-login-safety-kicker{
    color:#d5202f!important;
}
body.gx-theme-light .gx-login-safety-kicker i{
    color:#d5202f!important;
    filter:none!important;
}
body.gx-theme-light .gx-login-safety-heading h2{
    color:#17263a!important;
}
body.gx-theme-light .gx-login-safety-heading p{
    color:#687a91!important;
}
body.gx-theme-light .gx-login-safety-grid article{
    background:#f8fbff!important;
    border-color:#dae4ef!important;
}
body.gx-theme-light .gx-login-safety-grid article>i{
    color:#c92835!important;
    background:#fff0f1!important;
    border-color:#f1c9cd!important;
}
body.gx-theme-light .gx-login-safety-grid b{
    color:#23364d!important;
}
body.gx-theme-light .gx-login-safety-grid span{
    color:#667a92!important;
}
body.gx-theme-light .gx-login-safety-liability{
    background:#f2f6fb!important;
    border-color:#d5e0eb!important;
}
body.gx-theme-light .gx-login-safety-liability>i{
    color:#4b6e9e!important;
}
body.gx-theme-light .gx-login-safety-liability b{
    color:#2e425b!important;
}
body.gx-theme-light .gx-login-safety-liability span{
    color:#667a92!important;
}
body.gx-theme-light .gx-login-safety-ack{
    color:#6e8095!important;
}
body.gx-theme-light .gx-login-safety-ack i{
    color:#c92835!important;
}

@media(max-width:850px){
    .gx-login-stack{width:min(620px,100%)!important;gap:12px!important}
    .gx-login-safety-notice{padding:18px 16px 16px!important;border-radius:20px!important}
    .gx-login-safety-grid{grid-template-columns:1fr!important}
    .gx-login-safety-heading h2{font-size:18px!important}
    .gx-login-safety-logo{min-height:70px!important}
    .gx-login-safety-logo img{width:min(160px,52vw)!important}
}
@media(max-width:520px){
    #login-screen.gx-auth-page{padding-top:70px!important;padding-bottom:26px!important}
    .gx-login-safety-notice{padding:15px 12px 14px!important;border-radius:17px!important}
    .gx-login-safety-kicker{font-size:11px!important;letter-spacing:.025em!important}
    .gx-login-safety-heading h2{font-size:15px!important}
    .gx-login-safety-heading p{font-size:9px!important}
    .gx-login-safety-grid article{grid-template-columns:30px 1fr!important;padding:10px!important;gap:8px!important}
    .gx-login-safety-grid article>i,.gx-login-safety-liability>i{width:30px!important;height:30px!important}
    .gx-login-safety-grid b,.gx-login-safety-liability b{font-size:9px!important}
    .gx-login-safety-grid span,.gx-login-safety-liability span{font-size:7.8px!important}
    .gx-login-safety-liability{grid-template-columns:30px 1fr!important;padding:10px!important;gap:8px!important}
}


/* =====================================================================
   GX V92 — CENTER SAFETY / REGISTER CONSENT / REPORT EVIDENCE
   ===================================================================== */
.gx-v92-safety-overlay{position:fixed;inset:0;z-index:120000;display:none;place-items:center;padding:22px;background:rgba(2,7,18,.78);backdrop-filter:blur(12px)}
.gx-v92-safety-overlay.open{display:grid!important}
.gx-v92-safety-modal{position:relative;width:min(920px,96vw);max-height:min(860px,92vh);display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:26px;background:linear-gradient(155deg,#0e1830,#070d1b);border:1px solid rgba(114,143,207,.28);box-shadow:0 35px 100px rgba(0,0,0,.58);color:#eaf1ff}
.gx-v92-modal-x{position:absolute;right:16px;top:16px;width:42px;height:42px;border:1px solid rgba(150,170,220,.20);border-radius:13px;background:#111d35;color:#cbd8ef;font-size:17px;cursor:pointer}
.gx-v92-safety-kicker{display:flex;align-items:center;justify-content:center;gap:10px;padding-right:48px;color:#ffd54f;font-size:18px;font-weight:1000;letter-spacing:.02em;text-align:center}
.gx-v92-safety-logo{display:block;width:190px;max-height:100px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 12px 24px rgba(76,55,255,.24))}.gx-v92-safety-logo.compact{width:150px;max-height:78px}
.gx-v92-safety-modal h2{margin:0;text-align:center;color:#fff;font-size:27px;line-height:1.25}.gx-v92-safety-intro{max-width:760px;margin:0 auto;color:#aebbd1;font-size:15px;line-height:1.7;text-align:center}
.gx-v92-safety-scroll,.gx-v92-terms-scroll{overflow:auto;min-height:220px;max-height:390px;padding:4px 6px 4px 2px;scrollbar-width:thin}
.gx-v92-safety-scroll{display:grid;grid-template-columns:1fr 1fr;gap:11px}.gx-v92-safety-scroll article{display:flex;gap:12px;padding:15px;border-radius:16px;background:#0b1426;border:1px solid rgba(111,145,202,.16)}.gx-v92-safety-scroll article.legal{grid-column:1/-1}.gx-v92-safety-scroll article>i{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:rgba(255,196,64,.10);color:#ffd45c}.gx-v92-safety-scroll b{display:block;color:#edf3ff;font-size:14px}.gx-v92-safety-scroll span{display:block;margin-top:4px;color:#9eabc2;font-size:12.5px;line-height:1.65}
.gx-v92-safety-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:4px}.gx-v92-safety-foot>span{color:#9aa9c2;font-size:12px}.gx-v92-safety-foot button{min-height:46px;padding:0 22px;border:0;border-radius:13px;background:linear-gradient(135deg,#3d70f4,#8a44ed);color:#fff;font-weight:900;cursor:pointer}.gx-v92-safety-foot button:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.35)}
.gx-v92-terms-scroll{padding:18px;border-radius:16px;background:#091426;border:1px solid rgba(112,145,198,.16)}.gx-v92-terms-scroll h3{margin:16px 0 4px;color:#e8f0ff;font-size:15px}.gx-v92-terms-scroll h3:first-child{margin-top:0}.gx-v92-terms-scroll p{margin:0;color:#a8b5cb;font-size:13px;line-height:1.72}.gx-v92-terms-end{margin-top:22px;padding:14px;border-radius:12px;background:rgba(59,205,145,.10);color:#7be1b1;font-weight:800;text-align:center}
.gx-v92-register-consent{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin:14px 0;padding:14px;border:1px solid rgba(104,141,202,.18);border-radius:16px;background:rgba(21,34,57,.46)}.gx-v92-register-consent>div{display:flex;align-items:center;gap:10px}.gx-v92-register-consent>div>i{color:#75a7ff;font-size:20px}.gx-v92-register-consent b{display:block}.gx-v92-register-consent small{display:block;margin-top:2px;color:#8392aa}.gx-v92-register-consent>button{height:38px;padding:0 13px;border-radius:10px;border:1px solid rgba(104,145,215,.24);background:#14233e;color:#bcd0f2;font-weight:800}.gx-v92-consent-check{grid-column:1/-1;display:flex!important;align-items:flex-start!important;gap:9px!important;padding-top:10px;border-top:1px solid rgba(110,140,190,.12)}.gx-v92-consent-check input{width:18px;height:18px;margin-top:1px;accent-color:#6c5cff}.gx-v92-consent-check input:disabled+span{opacity:.42}.gx-v92-consent-check span{font-size:12px!important;line-height:1.5!important}

.gx-report-evidence{padding:13px;border:1px solid rgba(105,139,194,.16);border-radius:14px;background:rgba(9,18,34,.42)}.gx-report-evidence-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.gx-report-evidence-head>div{display:flex;align-items:center;gap:10px}.gx-report-evidence-head>div>i{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:rgba(85,125,226,.11);color:#78a5ff}.gx-report-evidence-head b,.gx-report-evidence-head small{display:block}.gx-report-evidence-head small{margin-top:2px;color:#8090aa;font-size:10px}.gx-report-evidence-pick{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:10px;background:#162641;border:1px solid rgba(108,145,214,.22);color:#bfd2f3;font-size:11px;font-weight:900;cursor:pointer}.gx-report-image-preview{margin-top:10px;min-height:92px;display:flex;align-items:center;justify-content:center;gap:12px;border:1px dashed rgba(110,145,205,.22);border-radius:12px;overflow:hidden;background:#07111f}.gx-report-image-preview.empty{color:#64738d}.gx-report-image-preview>img{width:150px;height:92px;object-fit:cover;align-self:stretch}.gx-report-image-preview>div{flex:1;min-width:0;padding:10px 10px 10px 0}.gx-report-image-preview>div b,.gx-report-image-preview>div small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gx-report-image-preview>div small{margin-top:3px;color:#8090aa;font-size:10px}.gx-report-image-preview>div button{margin-top:8px;padding:6px 9px;border-radius:8px;border:1px solid rgba(240,92,111,.18);background:rgba(155,34,54,.12);color:#ff9aaa;font-size:10px;font-weight:800}.gx-report-has-attachment{margin-left:5px;color:#78a7ff;font-size:.8em}
.gx-report-detail-evidence{margin-top:14px}.gx-report-detail-evidence>span{display:block;margin-bottom:8px;color:#91a2bd;font-size:10px;font-weight:900}.gx-report-detail-evidence>button{position:relative;display:block;width:100%;padding:0;overflow:hidden;border-radius:14px;border:1px solid rgba(100,140,210,.20);background:#07111f;cursor:zoom-in}.gx-report-detail-evidence img{display:block;width:100%;max-height:340px;object-fit:contain;background:#050a12}.gx-report-detail-evidence b{position:absolute;right:10px;bottom:10px;padding:7px 10px;border-radius:9px;background:rgba(4,9,18,.82);color:#e6efff;font-size:10px}.gx-report-evidence-viewer{position:fixed;inset:0;z-index:130000;display:none;place-items:center;padding:28px;background:rgba(0,0,0,.88);backdrop-filter:blur(8px)}.gx-report-evidence-viewer.open{display:grid}.gx-report-evidence-viewer img{max-width:94vw;max-height:90vh;object-fit:contain;border-radius:12px;box-shadow:0 24px 80px #000}.gx-report-evidence-viewer button{position:fixed;top:22px;right:22px;width:46px;height:46px;border:0;border-radius:50%;background:#fff;color:#111827;font-size:18px;cursor:pointer}

/* V92 authoritative light palette for the most visible system surfaces. */
body.gx-theme-light{background:#eef4fb!important;color:#17233a!important}body.gx-theme-light .gx-system-page{color:#17233a!important}
body.gx-theme-light .gx-system-page :is(.gx-word-hero,.gx-word-lobby-hero,.gx-chaos-lobby-hero,.gx-chaos-dev-banner,.gx-chaos-status-grid article,.gx-chaos-room-card,.gx-room-card,.gx-lobby-main-panel,.gx-lobby-section,.gx-auth-card,.gx-report-modal,.gx-admin-report-shell){background:#fff!important;border-color:#d7e2f0!important;color:#17233a!important;box-shadow:0 14px 40px rgba(53,76,112,.09)!important}
body.gx-theme-light .gx-system-page :is(h1,h2,h3,h4,.gx-room-card h4,.gx-chaos-room-card strong,.gx-auth-card h2){color:#17233a!important;text-shadow:none!important}
body.gx-theme-light .gx-system-page :is(p,small,.gx-room-id,.gx-chaos-room-card small,.gx-auth-card p){color:#687a96!important;text-shadow:none!important}
body.gx-theme-light input:not([type="checkbox"]):not([type="radio"]),body.gx-theme-light textarea,body.gx-theme-light select{background:#f7faff!important;color:#17233a!important;border-color:#cfdbea!important;box-shadow:none!important}body.gx-theme-light input::placeholder,body.gx-theme-light textarea::placeholder{color:#8b9bb3!important}
body.gx-theme-light .gx-v92-safety-overlay{background:rgba(224,233,245,.82)}body.gx-theme-light .gx-v92-safety-modal{background:#fff;border-color:#d7e2ef;color:#17233a;box-shadow:0 35px 90px rgba(57,76,105,.22)}body.gx-theme-light .gx-v92-safety-kicker{color:#d92d3f}body.gx-theme-light .gx-v92-safety-modal h2{color:#17233a}body.gx-theme-light .gx-v92-safety-intro{color:#657894}body.gx-theme-light .gx-v92-safety-scroll article,body.gx-theme-light .gx-v92-terms-scroll{background:#f7faff;border-color:#dbe5f1}body.gx-theme-light .gx-v92-safety-scroll b,body.gx-theme-light .gx-v92-terms-scroll h3{color:#17233a}body.gx-theme-light .gx-v92-safety-scroll span,body.gx-theme-light .gx-v92-terms-scroll p{color:#637590}body.gx-theme-light .gx-v92-modal-x{background:#f4f7fb;color:#52647e;border-color:#d8e2ee}body.gx-theme-light .gx-v92-register-consent{background:#f7faff;border-color:#d7e2ef}body.gx-theme-light .gx-v92-register-consent>button{background:#edf4ff;color:#315fba;border-color:#cadbf5}body.gx-theme-light .gx-report-evidence,body.gx-theme-light .gx-report-image-preview{background:#f7faff;border-color:#d6e2ef}body.gx-theme-light .gx-report-evidence-pick{background:#edf4ff;color:#315fba;border-color:#cadbf5}

@media(max-width:720px){.gx-v92-safety-modal{padding:18px;gap:10px}.gx-v92-safety-kicker{font-size:15px}.gx-v92-safety-modal h2{font-size:21px}.gx-v92-safety-scroll{grid-template-columns:1fr}.gx-v92-safety-scroll article.legal{grid-column:auto}.gx-v92-safety-foot{align-items:stretch;flex-direction:column}.gx-v92-safety-foot button{width:100%}.gx-v92-register-consent{grid-template-columns:1fr}.gx-v92-register-consent>button{width:100%}.gx-v92-consent-check{grid-column:1}.gx-report-evidence-head{align-items:stretch;flex-direction:column}.gx-report-evidence-pick{justify-content:center}.gx-report-image-preview>img{width:105px}}


/* =====================================================================
   GX V92.1 — STABLE TABLETOP CAMERA (AUTHORITATIVE)
   Single-axis perspective only. No rotateZ = no diamond/diagonal board.
   ===================================================================== */
#chaos-game-screen .gx-chaos-pro-stage{
    overflow:visible!important;
    padding:8px 0 34px!important;
}
#chaos-game-screen .gx-chaos-pro-board-frame{
    width:min(100%,860px)!important;
    min-width:720px!important;
    min-height:700px!important;
    padding:18px 18px 42px!important;
    perspective:1700px!important;
    perspective-origin:50% 40%!important;
    overflow:visible!important;
}
#chaos-game-screen .gx-chaos-pro-board-grid{
    width:660px!important;
    min-width:660px!important;
    height:660px!important;
    min-height:660px!important;
    margin:0 auto!important;
    transform-origin:50% 58%!important;
    transform-style:preserve-3d!important;
}
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid,
#chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid{
    transform:translateY(12px) rotateX(21deg) scale(.94)!important;
    filter:drop-shadow(0 28px 22px rgba(0,0,0,.28))!important;
    box-shadow:0 11px 0 rgba(6,10,18,.34),0 30px 48px rgba(0,0,0,.18)!important;
}
#chaos-game-screen.gx-chaos-camera-top .gx-chaos-pro-board-grid,
#chaos-game-screen[data-camera-mode="top"] .gx-chaos-pro-board-grid{
    transform:none!important;
    filter:none!important;
}
/* Never rotate the center UI separately. */
#chaos-game-screen .gx-chaos-pro-arena-center,
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-arena-center,
#chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-arena-center{
    transform:translateZ(18px)!important;
    transform-origin:50% 50%!important;
}
#chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell{
    padding:6px 4px 7px!important;
    border-radius:8px!important;
}
#chaos-game-screen .gx-chaos-cell-icon{width:28px!important;height:28px!important;margin:3px auto 2px!important}
#chaos-game-screen .gx-chaos-cell-icon i{font-size:12px!important}
#chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell>strong{font-size:8.5px!important;line-height:1.06!important}
#chaos-game-screen .gx-chaos-pro-board-grid .gx-chaos-board-cell>small{font-size:6.2px!important;line-height:1.08!important}
#chaos-game-screen .gx-chaos-board-cell .cell-index{font-size:6.4px!important}
#chaos-game-screen .gx-chaos-board-token{width:21px!important;height:21px!important}
#chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid::after,
#chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid::after{
    bottom:-9px!important;height:11px!important;transform:translateZ(-6px)!important;
}
@media(max-width:1180px){
    #chaos-game-screen .gx-chaos-pro-board-frame{width:760px!important;min-width:660px!important;min-height:650px!important}
    #chaos-game-screen .gx-chaos-pro-board-grid{width:610px!important;min-width:610px!important;height:610px!important;min-height:610px!important}
    #chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid,
    #chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid{transform:translateY(10px) rotateX(18deg) scale(.95)!important}
}
@media(max-width:760px){
    #chaos-game-screen .gx-chaos-pro-stage{overflow:auto!important;padding-bottom:10px!important}
    #chaos-game-screen .gx-chaos-pro-board-frame{width:650px!important;min-width:650px!important;min-height:600px!important;padding:10px 10px 30px!important}
    #chaos-game-screen .gx-chaos-pro-board-grid{width:560px!important;min-width:560px!important;height:560px!important;min-height:560px!important}
    #chaos-game-screen.gx-chaos-camera-iso .gx-chaos-pro-board-grid,
    #chaos-game-screen[data-camera-mode="iso"] .gx-chaos-pro-board-grid{transform:translateY(7px) rotateX(14deg) scale(.97)!important}
}