* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Q-style complete capsule artwork: frame and pictogram are one generated PNG. */
:is(.inventory-bottom-toolbar .btn, #panel-inventory-equip > .equipment-tabs .tab-btn, #panel-inventory-equip > .inventory-tabs .tab-btn) {
    position: relative !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    color: #476738 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    padding: 0 12px 0 42px !important;
    overflow: visible !important;
    transition: filter 0.16s ease, transform 0.16s ease !important;
}

:is(.inventory-bottom-toolbar .btn, #panel-inventory-equip > .equipment-tabs .tab-btn, #panel-inventory-equip > .inventory-tabs .tab-btn) :is(i, .ui-btn-icon) {
    display: none !important;
}

:is(.inventory-bottom-toolbar .btn, #panel-inventory-equip > .equipment-tabs .tab-btn, #panel-inventory-equip > .inventory-tabs .tab-btn):hover {
    filter: brightness(1.06) saturate(1.08) !important;
    transform: translateY(-1px) !important;
}

#panel-inventory-equip > :is(.equipment-tabs, .inventory-tabs) .tab-btn.active {
    color: #fff9d7 !important;
    text-shadow: 0 1px 2px rgba(34, 94, 48, 0.86) !important;
    filter: sepia(0.08) saturate(1.35) brightness(0.9) !important;
}

#zodiac-btn { background-image: url('../images/q_capsule_buttons/zodiac.png') !important; }
#quick-equipment-index-btn { background-image: url('../images/q_capsule_buttons/equipment_house.png') !important; }
#strength-merchant-btn { background-image: url('../images/q_capsule_buttons/blacksmith.png') !important; }
#decompose-btn { background-image: url('../images/q_capsule_buttons/recycle.png') !important; }
#pharmacy-btn { background-image: url('../images/q_capsule_buttons/pharmacy.png') !important; }
#auction-house-btn { background-image: url('../images/q_capsule_buttons/item_sale.png') !important; }
#refine-btn { background-image: url('../images/q_capsule_buttons/magic_workshop.png') !important; }
#rebirth-btn { background-image: url('../images/q_capsule_buttons/advance.png') !important; }
#lottery-btn { background-image: url('../images/q_capsule_buttons/lottery.png') !important; }
#task-btn { background-image: url('../images/q_capsule_buttons/daily_task.png') !important; }
#world-boss-shortcut-btn { background-image: url('../images/q_capsule_buttons/blacksmith.png') !important; }
#adventure-farm-btn { background-image: url('../images/q_capsule_buttons/farm.png') !important; }
#adventure-arena-btn { background-image: url('../images/q_capsule_buttons/partner_equipment.png') !important; }
#adventure-skills-btn { background-image: url('../images/q_capsule_buttons/spell.png') !important; }
#craft-btn-toolbar { background-image: url('../images/q_capsule_buttons/craft.png') !important; }
#repair-all-btn { background-image: url('../images/q_capsule_buttons/repair.png') !important; }
#sell-all-equip-btn { background-image: url('../images/q_capsule_buttons/equipment_sale.png') !important; }
#sell-all-items-btn { background-image: url('../images/q_capsule_buttons/item_sale.png') !important; }
#auto-sell-btn { background-image: url('../images/q_capsule_buttons/auto_sale.png') !important; }
#tab-player-equip { background-image: url('../images/q_capsule_buttons/player_equipment.png') !important; }
#tab-hero-equip { background-image: url('../images/q_capsule_buttons/partner_equipment.png') !important; }
#tab-inventory { background-image: url('../images/q_capsule_buttons/backpack.png') !important; }
#tab-warehouse { background-image: url('../images/q_capsule_buttons/warehouse.png') !important; }

body {
    background-color: #0c0c14;
    color: #e0d0b0;
    background-image: url('');
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    padding: 10px;
    padding-bottom: 80px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
}

.panel {
    background-color: rgba(20, 15, 10, 0.85);
    border: 2px solid #8b7355;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 0 15px rgba(139, 115, 85, 0.3);
}

.panel-header {
    color: #ffd700;
    border-bottom: 1px solid #8b7355;
    padding-bottom: 8px;
    margin-bottom: 15px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-header i {
    color: #c0a060;
}

.stats-label {
    color: #c0a060;
}

.stats-value {
    color: #fff;
    font-weight: bold;
}

.hp-bar {
    position: relative;
    height: 20px;
    background-color: #333;
    border-radius: 10px;
    margin: 5px 0;
    overflow: hidden;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

.hp-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to right, #800000, #ff0000);
    width: 0%;
    z-index: 2;
}

.hp-delay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 100, 100, 0.4);
    width: 0%;
    z-index: 1;
}


.equipment-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.equipment-slot {
    background-color: #2a2a2a;
    border: 1px solid #5a4a3a;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.equipment-slot:hover {
    border-color: #ffd700;
    background-color: #3a3a3a;
}

.equipment-slot i {
    font-size: 1.5rem;
    color: #c0a060;
}

.equipment-name {
    font-weight: bold;
    color: #ffd700;
    margin-top: 5px;
    font-size: 0.8rem;
}

.equipment-type {
    color: #c0a060;
    font-size: 0.7rem;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    max-height: 45vh;
    min-height: 150px;
    overflow-y: auto;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.inventory-slot {
    aspect-ratio: 1 / 1;
    background-color: #2a2a2a;
    border: 1px solid #5a4a3a;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.inventory-slot .item-name {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    padding: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    line-height: 1;
    z-index: 2;
}

.inventory-slot i {
    font-size: 1.5rem;
    color: #c0a060;
}

.item-count {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 0.8rem;
    color: #ffd700;
    font-weight: bold;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.inventory-controls {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.inventory-controls .btn:hover {
    background: linear-gradient(to bottom, #7a6048, #5a4a3a);
    border-color: #ffd700;
}

.inventory-count {
    text-align: center;
    color: #c0a060;
    margin-top: 10px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
    max-height: 45vh;
    overflow-y: auto;
    padding: 5px;
}

.skill-item {
    background-color: #2a2a2a;
    border: 1px solid #5a4a3a;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}

.skill-name {
    color: #ffd700;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.skill-desc {
    color: #c0c0c0;
    font-size: 0.8rem;
}

.skill-level {
    color: #00ffff;
    font-size: 0.8rem;
    margin-top: 5px;
}

.map-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.map-option {
    padding: 10px;
    background-color: #2a2a2a;
    border: 1px solid #5a4a3a;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.map-option.selected {
    border-color: #ffd700;
    background-color: #5a4a3a;
}

.map-name {
    font-weight: bold;
    color: #ffd700;
    font-size: 0.9rem;
}

.map-desc {
    font-size: 0.8rem;
    color: #c0c0c0;
}

.btn {
    background: linear-gradient(to bottom, #8b7355, #5a4a3a);
    color: #ffd700;
    border: 1px solid #c0a060;
    border-radius: 4px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 44px;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.btn-primary {
    background: linear-gradient(to bottom, #b52e2e, #8b0000);
    border-color: #ff8c00;
    color: #fff3c9;
}

.btn-primary:hover {
    background: linear-gradient(to bottom, #d43f3f, #a00000);
    border-color: #ffaa33;
}
.btn-primary:active {
    background: linear-gradient(to bottom, #8b0000, #6b0000);
}

.btn-success {
    background: linear-gradient(to bottom, #2e7d32, #1b5e20);
    border-color: #6fbf6f;
    color: #ffffff;
}
.btn-success:hover {
    background: linear-gradient(to bottom, #3c9e40, #2a7a2e);
    border-color: #a0e0a0;
}
.btn-success:active {
    background: linear-gradient(to bottom, #1b5e20, #0e3a12);
}
.btn-danger {
    background: linear-gradient(to bottom, #b22222, #8b1a1a);
    border-color: #ff6666;
    color: #fff0f0;
}
.btn-danger:hover {
    background: linear-gradient(to bottom, #d43f3f, #a52a2a);
    border-color: #ff8888;
}
.btn-danger:active {
    background: linear-gradient(to bottom, #8b1a1a, #6a1010);
}

.quick-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.combat-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 15px 0;
}

.combat-log {
    height: 35vh;
    min-height: 120px;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    padding: 10px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    margin-top: 10px;
	height: 200px;
	overflow-y: auto;
	padding: 10px;
	font-family: 'Courier New', monospace;
	font-size: 0.75rem;
	line-height: 1.5;
}
.log-entry {
    margin-bottom: 5px;
    border-bottom: 1px dashed #3a3a3a;
    padding-bottom: 5px;
}

.log-time {
    color: #808080;
    margin-right: 8px;
}

.log-info { color: #ffffff; }
.log-combat { color: #ffa500; }
.log-damage { color: #ff4444; }
.log-heal { color: #44ff44; }
.log-loot { color: #ffd700; }
.log-level { color: #00ffff; }

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal .modal-content {
    z-index: 1001;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: #1a1510;
    border: 2px solid #8b7355;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
}

.modal-header {
    color: #ffd700;
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid #8b7355;
    padding-bottom: 10px;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #c0a060;
}

.input-group input {
    width: 100%;
    padding: 12px;
    background-color: #2a2a2a;
    border: 1px solid #5a4a3a;
    border-radius: 4px;
    color: #fff;
    font-size: 1rem;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-buttons .btn {
    flex: 1;
    margin: 0 5px;
}
.modal-buttons .btn:first-child {
    margin-left: 0;
}
.modal-buttons .btn:last-child {
    margin-right: 0;
}
.warning-text {
    color: #ff4444;
    text-align: center;
    margin: 15px 0;
    font-weight: bold;
}

.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(20, 15, 10, 0.95);
    border-top: 2px solid #8b7355;
    display: flex;
    justify-content: space-around;
    padding: 8px 5px;
    z-index: 999;
    backdrop-filter: blur(10px);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #c0a060;
    padding: 5px;
    border-radius: 8px;
    flex: 1;
    max-width: 70px;
    cursor: pointer;
}

.nav-item.active {
    color: #ffd700;
    background-color: rgba(139, 115, 85, 0.3);
}

.nav-item i {
    font-size: 1.4rem;
    margin-bottom: 3px;
}

.nav-item span {
    font-size: 0.7rem;
    font-weight: bold;
}

@media (min-width: 769px) {
    body {
        max-width: 600px;
        margin: 0 auto;
    }
}

/* Final cascade override for generated complete capsule assets. */
:is(.inventory-bottom-toolbar .btn, #panel-inventory-equip > .equipment-tabs .tab-btn, #panel-inventory-equip > .inventory-tabs .tab-btn) {
    position: relative !important; min-height: 34px !important; border: 0 !important;
    border-radius: 999px !important; background-color: transparent !important;
    background-repeat: no-repeat !important; background-position: center !important;
    background-size: 100% 100% !important; box-shadow: none !important;
    color: #476738 !important; font-weight: 800 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.9) !important;
    padding: 0 12px 0 42px !important; overflow: visible !important;
    transition: filter .16s ease, transform .16s ease !important;
}
:is(.inventory-bottom-toolbar .btn, #panel-inventory-equip > .equipment-tabs .tab-btn, #panel-inventory-equip > .inventory-tabs .tab-btn) :is(i, .ui-btn-icon) { display: none !important; }
:is(.inventory-bottom-toolbar .btn, #panel-inventory-equip > .equipment-tabs .tab-btn, #panel-inventory-equip > .inventory-tabs .tab-btn):hover { filter: brightness(1.06) saturate(1.08) !important; transform: translateY(-1px) !important; }
#panel-inventory-equip > :is(.equipment-tabs, .inventory-tabs) .tab-btn.active { color: #fff9d7 !important; text-shadow: 0 1px 2px rgba(34,94,48,.86) !important; filter: saturate(1.35) brightness(.9) !important; }
#zodiac-btn{background-image:url('../images/q_capsule_buttons/zodiac.png')!important}#quick-equipment-index-btn{background-image:url('../images/q_capsule_buttons/equipment_house.png')!important}#strength-merchant-btn{background-image:url('../images/q_capsule_buttons/blacksmith.png')!important}#decompose-btn{background-image:url('../images/q_capsule_buttons/recycle.png')!important}#pharmacy-btn{background-image:url('../images/q_capsule_buttons/pharmacy.png')!important}#auction-house-btn{background-image:url('../images/q_capsule_buttons/item_sale.png')!important}#refine-btn{background-image:url('../images/q_capsule_buttons/magic_workshop.png')!important}#rebirth-btn{background-image:url('../images/q_capsule_buttons/advance.png')!important}#lottery-btn{background-image:url('../images/q_capsule_buttons/lottery.png')!important}#task-btn{background-image:url('../images/q_capsule_buttons/daily_task.png')!important}#world-boss-shortcut-btn{background-image:url('../images/q_capsule_buttons/blacksmith.png')!important}#adventure-farm-btn{background-image:url('../images/q_capsule_buttons/farm.png')!important}#adventure-arena-btn{background-image:url('../images/q_capsule_buttons/partner_equipment.png')!important}#adventure-skills-btn{background-image:url('../images/q_capsule_buttons/spell.png')!important}#craft-btn-toolbar{background-image:url('../images/q_capsule_buttons/craft.png')!important}#repair-all-btn{background-image:url('../images/q_capsule_buttons/repair.png')!important}#sell-all-equip-btn{background-image:url('../images/q_capsule_buttons/equipment_sale.png')!important}#sell-all-items-btn{background-image:url('../images/q_capsule_buttons/item_sale.png')!important}#auto-sell-btn{background-image:url('../images/q_capsule_buttons/auto_sale.png')!important}#tab-player-equip{background-image:url('../images/q_capsule_buttons/player_equipment.png')!important}#tab-hero-equip{background-image:url('../images/q_capsule_buttons/partner_equipment.png')!important}#tab-inventory{background-image:url('../images/q_capsule_buttons/backpack.png')!important}#tab-warehouse{background-image:url('../images/q_capsule_buttons/warehouse.png')!important}

/* Final compact override — must remain after legacy full-button mappings. */
#adventure-feature-dock .adventure-feature-btn,#panel-inventory-equip>.equipment-tabs .tab-btn,#panel-inventory-equip>.inventory-tabs .tab-btn{--q-icon-x:0%;--q-icon-y:0%;background:linear-gradient(180deg,#fffef2 0%,#f1f8e9 58%,#e4f2dc 100%)!important;border:1px solid #91c987!important;border-radius:999px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(65,115,61,.16)!important;color:#396844!important;text-shadow:0 1px 0 #fff!important;overflow:hidden!important;filter:none!important;transform:none!important}
#adventure-feature-dock .adventure-feature-btn{min-height:28px!important;padding:0 8px 0 31px!important;font-size:.72rem!important}#panel-inventory-equip>.equipment-tabs .tab-btn,#panel-inventory-equip>.inventory-tabs .tab-btn{min-height:34px!important;padding:0 12px 0 38px!important}
#adventure-feature-dock .adventure-feature-btn::before,#panel-inventory-equip>.equipment-tabs .tab-btn::before,#panel-inventory-equip>.inventory-tabs .tab-btn::before{content:'';position:absolute;left:8px;top:50%;width:20px;height:20px;transform:translateY(-50%);background-image:url('../images/q_button_icons_v2/icon_sheet.png');background-repeat:no-repeat;background-size:500% 400%;background-position:var(--q-icon-x) var(--q-icon-y);pointer-events:none}#panel-inventory-equip>.equipment-tabs .tab-btn::before,#panel-inventory-equip>.inventory-tabs .tab-btn::before{left:11px;width:23px;height:23px}
#adventure-feature-dock .ui-btn-icon,#panel-inventory-equip>.equipment-tabs .ui-btn-icon,#panel-inventory-equip>.inventory-tabs .ui-btn-icon{display:none!important}#panel-inventory-equip>:is(.equipment-tabs,.inventory-tabs) .tab-btn.active{background:linear-gradient(180deg,#70c971 0%,#41ad59 100%)!important;border-color:#2f9650!important;color:#fff!important;text-shadow:0 1px 1px rgba(29,99,48,.7)!important;filter:none!important}
#zodiac-btn{--q-icon-x:0%;--q-icon-y:0%}#quick-equipment-index-btn{--q-icon-x:25%;--q-icon-y:0%}#strength-merchant-btn{--q-icon-x:50%;--q-icon-y:0%}#decompose-btn{--q-icon-x:75%;--q-icon-y:0%}#pharmacy-btn{--q-icon-x:100%;--q-icon-y:0%}#refine-btn{--q-icon-x:0%;--q-icon-y:33.333%}#rebirth-btn{--q-icon-x:25%;--q-icon-y:33.333%}#lottery-btn{--q-icon-x:50%;--q-icon-y:33.333%}#task-btn{--q-icon-x:75%;--q-icon-y:33.333%}#world-boss-shortcut-btn{--q-icon-x:50%;--q-icon-y:33.333%}#adventure-farm-btn{--q-icon-x:100%;--q-icon-y:33.333%}#adventure-arena-btn{--q-icon-x:25%;--q-icon-y:100%}#adventure-skills-btn{--q-icon-x:0%;--q-icon-y:66.666%}#craft-btn-toolbar{--q-icon-x:25%;--q-icon-y:66.666%}#repair-all-btn{--q-icon-x:50%;--q-icon-y:66.666%}#sell-all-equip-btn{--q-icon-x:75%;--q-icon-y:66.666%}#sell-all-items-btn,#auction-house-btn{--q-icon-x:100%;--q-icon-y:66.666%}#auto-sell-btn{--q-icon-x:0%;--q-icon-y:100%}#tab-player-equip{--q-icon-x:25%;--q-icon-y:100%}#tab-hero-equip{--q-icon-x:50%;--q-icon-y:100%}#tab-inventory{--q-icon-x:75%;--q-icon-y:100%}#tab-warehouse{--q-icon-x:100%;--q-icon-y:100%}

#adventure-feature-dock .adventure-feature-btn{min-height:28px!important;border:0!important;background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:100% 100%!important;box-shadow:none!important;padding-left:36px!important;color:#476738!important;text-shadow:0 1px 0 rgba(255,255,255,.9)!important;overflow:visible!important}
#adventure-feature-dock .adventure-feature-btn .ui-btn-icon{display:none!important}

/* Compact Q-button rebuild: generated icons stay crisp, while the frame stays
   deliberately quiet so 28px controls retain readable text. */
#adventure-feature-dock .adventure-feature-btn,
#panel-inventory-equip > .equipment-tabs .tab-btn,
#panel-inventory-equip > .inventory-tabs .tab-btn {
    --q-icon-x: 0%;
    --q-icon-y: 0%;
    background: linear-gradient(180deg, #fffef2 0%, #f1f8e9 58%, #e4f2dc 100%) !important;
    border: 1px solid #91c987 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(65,115,61,.16) !important;
    color: #396844 !important;
    text-shadow: 0 1px 0 #fff !important;
    overflow: hidden !important;
    filter: none !important;
    transform: none !important;
}

#adventure-feature-dock .adventure-feature-btn {
    min-height: 28px !important;
    padding: 0 8px 0 31px !important;
    font-size: .72rem !important;
}

#panel-inventory-equip > .equipment-tabs .tab-btn,
#panel-inventory-equip > .inventory-tabs .tab-btn {
    min-height: 34px !important;
    padding: 0 12px 0 38px !important;
}

#adventure-feature-dock .adventure-feature-btn::before,
#panel-inventory-equip > .equipment-tabs .tab-btn::before,
#panel-inventory-equip > .inventory-tabs .tab-btn::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-image: url('../images/q_button_icons_v2/icon_sheet.png');
    background-repeat: no-repeat;
    background-size: 500% 400%;
    background-position: var(--q-icon-x) var(--q-icon-y);
    pointer-events: none;
}

#panel-inventory-equip > .equipment-tabs .tab-btn::before,
#panel-inventory-equip > .inventory-tabs .tab-btn::before { left: 11px; width: 23px; height: 23px; }

#adventure-feature-dock .adventure-feature-btn:hover,
#panel-inventory-equip > .equipment-tabs .tab-btn:hover,
#panel-inventory-equip > .inventory-tabs .tab-btn:hover { background: linear-gradient(180deg,#fff 0%,#e5f7df 100%) !important; filter:none!important; transform:none!important; }

#panel-inventory-equip > :is(.equipment-tabs,.inventory-tabs) .tab-btn.active {
    background: linear-gradient(180deg, #70c971 0%, #41ad59 100%) !important;
    border-color: #2f9650 !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(29,99,48,.7) !important;
    filter: none !important;
}

/* Hide the legacy replacement icon. The generated sprite is injected above. */
#adventure-feature-dock .ui-btn-icon,
#panel-inventory-equip > .equipment-tabs .ui-btn-icon,
#panel-inventory-equip > .inventory-tabs .ui-btn-icon { display: none !important; }

#zodiac-btn{--q-icon-x:0%;--q-icon-y:0%}#quick-equipment-index-btn{--q-icon-x:25%;--q-icon-y:0%}#strength-merchant-btn{--q-icon-x:50%;--q-icon-y:0%}#decompose-btn{--q-icon-x:75%;--q-icon-y:0%}#pharmacy-btn{--q-icon-x:100%;--q-icon-y:0%}
#refine-btn{--q-icon-x:0%;--q-icon-y:33.333%}#rebirth-btn{--q-icon-x:25%;--q-icon-y:33.333%}#lottery-btn{--q-icon-x:50%;--q-icon-y:33.333%}#task-btn{--q-icon-x:75%;--q-icon-y:33.333%}#world-boss-shortcut-btn{--q-icon-x:50%;--q-icon-y:33.333%}#adventure-farm-btn{--q-icon-x:100%;--q-icon-y:33.333%}
#adventure-arena-btn{--q-icon-x:25%;--q-icon-y:100%}#adventure-skills-btn{--q-icon-x:0%;--q-icon-y:66.666%}#craft-btn-toolbar{--q-icon-x:25%;--q-icon-y:66.666%}#repair-all-btn{--q-icon-x:50%;--q-icon-y:66.666%}#sell-all-equip-btn{--q-icon-x:75%;--q-icon-y:66.666%}#sell-all-items-btn{--q-icon-x:100%;--q-icon-y:66.666%}#auction-house-btn{--q-icon-x:100%;--q-icon-y:66.666%}#auto-sell-btn{--q-icon-x:0%;--q-icon-y:100%}
#tab-player-equip{--q-icon-x:25%;--q-icon-y:100%}#tab-hero-equip{--q-icon-x:50%;--q-icon-y:100%}#tab-inventory{--q-icon-x:75%;--q-icon-y:100%}#tab-warehouse{--q-icon-x:100%;--q-icon-y:100%}

.mobile-panel {
    display: none;
}

.mobile-panel.active {
    display: block;
}

.equipment-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
    justify-content: center;
}

.equipment-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 5px;
}

@media (min-width: 480px) {
    .equipment-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.equipment-list .equipment-slot {
    min-height: 120px;
    padding: 10px 5px;
    background-color: rgba(42, 42, 42, 0.9);
}

.equipment-list .equipment-slot i {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.equipment-detail-tooltip {
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: #ffd700;
    padding: 12px 24px;
    border-radius: 30px;
    border: 1px solid #8b7355;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    z-index: 3000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.equipment-detail-tooltip.show {
    opacity: 1;
}

.global-combat-log {
    position: fixed;
    bottom: 80px;
    right: 10px;
    left: auto;
    width: 240px;
    max-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 3000;
    pointer-events: none;
}

.combat-log-message {
    background-color: transparent;
    color: #e0d0b0;
    font-size: 0.9rem;
    padding: 8px 12px;
    margin-top: 5px;
    border-left: 4px solid #8b7355;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    width: 100%;
    word-wrap: break-word;
    animation: slideInOutRight 3s forwards;
    transform-origin: right;
}

.combat-log-message.damage { border-left-color: #ff4444; }
.combat-log-message.skill  { border-left-color: #44aaff; }
.combat-log-message.heal   { border-left-color: #44ff44; }
.combat-log-message.loot   { border-left-color: #ffd700; }
.combat-log-message.level  { border-left-color: #00ffff; }
.combat-log-message.info   { border-left-color: #c0a060; }

@keyframes slideInOutRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    10% {
        transform: translateX(0);
        opacity: 1;
    }
    80% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.message-text {
    background-color: rgba(0,0,0,0.7);
    padding: 2px 5px;
    border-radius: 3px;
}

.online-list {
    max-height: 25vh;
    min-height: 100px;
    overflow-y: auto;
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
}
.online-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #5a4a3a;
    cursor: pointer;
}
.online-item:hover {
    background: #3a3a3a;
}
.online-name {
    flex: 2;
    color: #ffd700;
    font-weight: bold;
}
.online-level {
    flex: 1;
    color: #c0a060;
    font-size: 0.8rem;
}

.chat-messages {
    height: 30vh;
    min-height: 150px;
    overflow-y: auto;
    background: #1a1510;
    border: 1px solid #5a4a3a;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}
.chat-message {
    margin-bottom: 5px;
    padding: 3px 5px;
    border-bottom: 1px dashed #3a3a3a;
    word-break: break-all;
}
.chat-message.private {
    color: #ffaaff;
    background: rgba(255,170,255,0.1);
}
.chat-input-area {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    width: 100%;
}

.chat-input-area input {
    flex: 1;
    min-width: 0;
    padding: 10px;
    background: #2a2a2a;
    border: 1px solid #5a4a3a;
    border-radius: 4px;
    color: #fff;
}

.chat-input-area button {
    flex-shrink: 0;
    white-space: nowrap;
}

.chat-message.system {
    color: red;
	font-weight: bold;
}

#send-public-btn {
    padding: 10px 15px;
}

#map-monsters-content table {
    color: #c0a060;
}
#map-monsters-content th {
    color: #ffd700;
    text-align: left;
}
#map-monsters-content td {
    color: #c0c0c0;
}

#item-action-modal {
    z-index: 2000;
}
.tab-bar { display: flex; border-bottom: 2px solid #5a4a3a; margin-bottom: 10px; }
.tab { padding: 5px 15px; cursor: pointer; color: #c0a060; }
.tab.active { background: #3a2e24; border: 1px solid #5a4a3a; border-bottom: none; border-radius: 5px 5px 0 0; color: #ffd700; }
.board-container { margin-top: 10px; }
.board-messages { max-height: 300px; overflow-y: auto; background: #2a1e14; padding: 5px; border: 1px solid #5a4a3a; }
.board-item { margin-bottom: 8px; border-bottom: 1px dashed #5a4a3a; padding-bottom: 5px; }
.board-sender { color: #ffd700; font-weight: bold; margin-right: 10px; }
.board-time { color: #888; font-size: 0.8rem; }
.board-content { color: #fff; margin-top: 3px; word-wrap: break-word; }
.board-input-area {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    width: 100%;
    margin-top: 10px;
}

.board-input-area input {
    flex: 1;
    min-width: 0;
    padding: 5px;
    background: #2a1e14;
    border: 1px solid #5a4a3a;
    color: #fff;
}

.board-input-area button {
    flex-shrink: 0;
    white-space: nowrap;
    background: #5a4a3a;
    color: #ffd700;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
}

.rankings-container {
    margin-top: 10px;
}
.rankings-list {
    max-height: 300px;
    overflow-y: auto;
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
    padding: 5px;
}
.rankings-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #5a4a3a;
    cursor: pointer;
}
.rankings-item:hover {
    background: #3a3a3a;
}
.rankings-rank {
    width: 30px;
    color: #ffd700;
    font-weight: bold;
    margin-right: 5px;
}
.rankings-name {
    flex: 2;
    color: #ffd700;
    font-weight: bold;
}
.rankings-level {
    flex: 1;
    color: #c0a060;
    font-size: 0.9rem;
}
.rankings-empty {
    color: #c0a060;
    text-align: center;
    padding: 20px;
}

/* 任务系统样式 */
#task-modal .task-loading {
    text-align: center;
    color: #ffd700;
    margin: 30px 0;
    font-style: italic;
}

#task-modal .task-error {
    text-align: center;
    color: #ff4444;
    margin: 30px 0;
}

#task-modal .task-empty {
    text-align: center;
    color: #ffd700;
    margin: 30px 0;
    padding: 20px;
}


#task-modal .task-detail {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 15px;
}

#task-modal .task-row {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    padding: 5px;
    border-bottom: 1px dashed #3a3a3a;
}

#task-modal .task-label {
    color: #c0a060;
}

#task-modal .task-value {
    color: #ffd700;
    font-weight: bold;
}

#task-modal .task-status-ok {
    color: #44ff44;
}

#task-modal .task-status-missing {
    color: #ff4444;
}

#task-modal .task-progress-container {
    position: relative;
    height: 30px;
    background: #2a2a2a;
    border-radius: 15px;
    margin: 15px 0;
    overflow: hidden;
    border: 1px solid #5a4a3a;
}

#task-modal .task-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    transition: width 0.3s ease;
}

#task-modal .task-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}

#task-modal .task-ready {
    text-align: center;
    color: #44ff44;
    margin: 15px 0 5px;
    padding: 8px;
    background: rgba(68, 255, 68, 0.1);
    border-radius: 5px;
    border: 1px solid #44ff44;
}

#task-modal .task-cooldown {
    text-align: center;
    padding: 30px 20px;
    color: #ffaa00;
}

#task-modal .task-cooldown i {
    color: #ffaa00;
    animation: rotate 2s linear infinite;
}

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

.modal-header {
    position: relative;
}

.modal .close {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: #8b1a1a;
    color: #ffd700;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.modal .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: #8b1a1a;
    color: #ffd700;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.modal .close-btn:hover {
    background: #b22222;
    transform: scale(1.1);
}

.modal .close:hover {
    background: #b22222;
    transform: scale(1.1);
}

#lottery-result {
    max-height: 300px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 10px;
}

#task-modal .task-progress-bar {
    background: linear-gradient(90deg, #4caf50, #8bc34a, #4caf50);
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

#task-modal .task-ready {
    background: rgba(68, 255, 68, 0.15);
    border: 1px solid #44ff44;
    border-radius: 5px;
    padding: 8px;
    text-align: center;
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
    0%   { opacity: 0.8; }
    50%  { opacity: 1; }
    100% { opacity: 0.8; }
}

#task-modal .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

#lottery-select .modal-buttons .btn {
    min-width: 80px;
    background: linear-gradient(to bottom, #8b7355, #5a4a3a);
    border: 1px solid #c0a060;
    transition: all 0.2s;
}

#lottery-select .modal-buttons .btn:hover {
    background: linear-gradient(to bottom, #a58b6a, #7a6148);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

@media (max-height: 700px) {
    .inventory-grid {
        max-height: 35vh;
    }
    .skills-grid {
        max-height: 35vh;
    }
    .combat-log {
        height: 25vh;
    }
    .online-list {
        max-height: 22vh;
    }
    .chat-messages {
        height: 25vh;
    }
    .equipment-list {
        max-height: 45vh;
    }
    .modal-content {
        max-height: 80vh;
    }
}

.status-tabs,
.equipment-tabs,
.inventory-tabs,
.skill-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.tab-btn {
    flex: 1;
    text-align: center;
    background: #2a241c;
    border: 1px solid #6a5a4a;
    color: #c0a060;
    transition: all 0.2s ease;
    font-weight: bold;
    padding: 8px 4px;
    white-space: normal;
    word-break: break-word;
    background-image: none !important;
}

.tab-btn:hover {
    background: #3a2e24;
    border-color: #c0a060;
}

.tab-btn.active {
    background: #4a3a2a;
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
}

body {
	background-color: #0c0c14;
	color: #e0d0b0;
	background-image: radial-gradient(circle at 10% 20%, #1a1510 0%, #0a0705 100%);
	background-attachment: fixed;
	min-height: 100vh;
	padding: 0;
	padding-top: 0px;
	padding-bottom: 80px;
	overflow-x: hidden !important;
	max-width: 100vw;
}

.game-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100;
	background: rgba(10, 8, 5, 0.96);
	backdrop-filter: blur(12px);
	border-bottom: 2px solid #c0a060;
	box-shadow: 0 4px 15px rgba(0,0,0,0.5);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 6px 12px;
	gap: 8px;
}

.logo-area {
	display: flex;
	align-items: baseline;
	gap: 6px;
	background: linear-gradient(135deg, #2a1e12, #1a1208);
	padding: 4px 12px;
	border-radius: 40px;
	border-left: 3px solid #ffd700;
}

.logo-area h1 {
	font-size: 1.2rem;
	color: #ffd700;
	letter-spacing: 1px;
	margin: 0;
	line-height: 1.2;
	text-shadow: 0 1px 2px black;
}

.logo-area .subtitle {
	font-size: 0.6rem;
	color: #c0a060;
	white-space: nowrap;
}

.player-status-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	background: rgba(0,0,0,0.5);
	padding: 4px 12px;
	border-radius: 60px;
	backdrop-filter: blur(4px);
}

.topbar-stat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8rem;
	background: rgba(30,25,20,0.7);
	padding: 2px 8px;
	border-radius: 24px;
	white-space: nowrap;
}

.topbar-stat .stat-name {
	color: #c0a060;
	font-weight: normal;
	font-size: 0.7rem;
}

.topbar-stat span:not(.stat-name) {
	color: #ffd966;
	font-weight: bold;
}

.hp-bar-compact {
	gap: 5px;
	background: #2a1e12;
}
.hp-minibar {
	width: 55px;
	height: 10px;
	background-color: #4a2a2a;
	border-radius: 8px;
	overflow: hidden;
	display: inline-block;
	box-shadow: inset 0 0 2px black;
}
.hp-minibar-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #d9534f, #ff7b6b);
	border-radius: 8px;
	transition: width 0.2s ease;
}

.btn-topbar-logout {
	background: #8b1a1a;
	border: none;
	color: #ffd966;
	padding: 4px 12px;
	border-radius: 30px;
	font-size: 0.7rem;
	font-weight: bold;
	cursor: pointer;
	transition: 0.2s;
	white-space: nowrap;
}

.btn-topbar-logout:hover {
	background: #b33;
	transform: scale(0.96);
}

@media (max-width: 560px) {
	body {
		padding-top: 0px;
	}
	.game-topbar {
		flex-direction: column;
		align-items: stretch;
		padding: 8px;
		gap: 6px;
	}
	.logo-area {
		justify-content: center;
		width: 100%;
	}
	.player-status-bar {
		justify-content: center;
		flex-wrap: wrap;
		border-radius: 40px;
		width: 100%;
	}
	.topbar-stat {
		font-size: 0.7rem;
		padding: 2px 6px;
	}
	.hp-minibar {
		width: 45px;
	}
}

.container {
	max-width: 600px;
	margin: 0 auto;
}
.panel {
	background-color: rgba(20, 15, 10, 0.85);
	border: 2px solid #8b7355;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 10px;
	box-shadow: 0 0 15px rgba(139, 115, 85, 0.3);
}
.panel-header {
	color: #ffd700;
	border-bottom: 1px solid #8b7355;
	padding-bottom: 8px;
	margin-bottom: 15px;
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	gap: 10px;
}
.stats-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	padding: 5px;
	border-bottom: 1px dashed #5a4a3a;
    position: relative;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}


.stats-label { color: #c0a060; }
.stats-value { color: #fff; font-weight: bold; }

.enhance-btn {
    background: linear-gradient(to bottom, #5a4a3a, #3a2e24);
    border: 1px solid #c0a060;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffd700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    line-height: 1;
}

.enhance-btn:hover {
    background: linear-gradient(to bottom, #8b7355, #5a4a3a);
    border-color: #ffd700;
    transform: scale(1.05);
}

.enhance-btn:active {
    transform: scale(0.95);
    background: #3a2e24;
}

/* 移动端触摸优化： */
@media (max-width: 600px) {
    .enhance-btn {
        width: 36px;
        height: 36px;
        font-size: 1.4rem;
    }
    .orb-group {
        max-width: 200px;
    }
    .monster-orb {
        width: 70px;
        overflow: visible;
    }
    .combat-cards {
        max-width: 80px;
    }
    .card-avatar {
        font-size: 1.5rem;
    }
    .monster-icon {
        font-size: 1.5rem;
    }
}
.mobile-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(20, 15, 10, 0.95);
	border-top: 2px solid #8b7355;
	display: flex;
	justify-content: space-around;
	padding: 8px 5px;
	z-index: 999;
}
.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #c0a060;
	padding: 5px;
	border-radius: 8px;
	flex: 1;
	cursor: pointer;
}
.nav-item.active { color: #ffd700; background: rgba(139,115,85,0.3); }
.mobile-panel { display: none; }
.mobile-panel.active { display: block; }

#player-set-bonuses, #hero-set-bonuses {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 12px;
	padding: 12px;
	margin-top: 10px;
	border: 1px solid #8b6b42;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.set-bonuses-title {
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	color: #ffd700;
	text-shadow: 0 0 5px #ffaa00;
	margin-bottom: 15px;
	letter-spacing: 2px;
}

.set-bonuses-title i {
	margin: 0 8px;
	color: #ffaa44;
}

.set-bonuses-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.set-card {
	background: linear-gradient(135deg, #2c241a 0%, #1f1912 100%);
	border-radius: 10px;
	padding: 12px;
	border: 1px solid #5a4a3a;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3);
	transition: transform 0.2s;
}

.set-card:hover {
	transform: translateY(-2px);
	border-color: #c0a060;
}

.set-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
}

.set-name {
	font-size: 1.1rem;
	font-weight: bold;
	color: #ffd966;
	text-shadow: 0 1px 2px black;
}

.set-progress {
	font-size: 0.8rem;
	background: #3a2e24;
	padding: 2px 8px;
	border-radius: 12px;
	color: #ffd966;
}

.set-progress-bar-container {
	background: #2e241c;
	border-radius: 6px;
	height: 8px;
	margin: 8px 0 12px;
	overflow: hidden;
}

.set-progress-bar-fill {
	background: linear-gradient(90deg, #ffaa44, #ffdd88);
	width: 0%;
	height: 100%;
	border-radius: 6px;
	transition: width 0.3s ease;
}

.set-tiers {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

.set-tier {
	background: rgba(0, 0, 0, 0.4);
	border-left: 3px solid #5a4a3a;
	padding: 6px 10px;
	border-radius: 6px;
	transition: all 0.2s;
}

.set-tier.active-tier {
	border-left-color: #ffaa44;
	background: rgba(255, 170, 68, 0.1);
	box-shadow: 0 0 4px rgba(255,170,68,0.3);
}

.tier-name {
	font-size: 0.85rem;
	font-weight: bold;
	color: #c0c0c0;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.tier-name i {
	font-size: 0.7rem;
}

.active-tier .tier-name {
	color: #ffaa44;
}

.tier-bonus {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.75rem;
}

.tier-bonus span {
	background: rgba(0, 0, 0, 0.5);
	padding: 2px 6px;
	border-radius: 12px;
	color: #ddd;
}

.tier-bonus span i {
	margin-right: 4px;
	color: #ffaa44;
	font-size: 0.7rem;
}

.set-legacy {
	margin-top: 8px;
	padding: 8px;
	background: rgba(0,0,0,0.3);
	border-radius: 6px;
}

.set-bonuses-empty {
	text-align: center;
	color: #a09070;
	padding: 20px;
	font-style: italic;
}

.set-bonuses-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.toggle-set-btn {
	color: #ffd700;
	transition: transform 0.2s;
}

.toggle-set-btn:hover {
	color: #ffaa44;
}

@keyframes fadeOut {
	0% { opacity: 1; transform: scale(1); }
	80% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0.9); display: none; }
}

.monster-rank-tip {
	font-size: 0.6rem;
	color: #ffaa44;
	margin-top: 4px;
	text-align: center;
	opacity: 0.8;
	transition: opacity 0.2s;
}

.monster-card.boss:hover .monster-rank-tip {
	opacity: 1;
}

.rank-item {
	transition: background 0.2s;
}

.rank-item:hover {
	background: rgba(255, 215, 0, 0.1);
}

.rank-1 {
	color: #ffd700 !important;
	text-shadow: 0 0 2px #ffaa00;
}

.rank-2 {
	color: #c0c0c0 !important;
}

.rank-3 {
	color: #cd7f32 !important;
}

.boss-rank-header {
	padding: 10px;
	background: linear-gradient(135deg, #2a1a1a, #1a0e0e);
	border-radius: 8px;
	margin-bottom: 15px;
}

.combat-status-bar {
	background: linear-gradient(135deg, #2a2418, #1a150e);
	border-radius: 12px;
	border: 1px solid #5a4a3a;
	padding: 8px 12px;
}

.status-row {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 12px;
}

.status-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
}

.status-item i {
	color: #ffaa44;
	width: 20px;
}

.status-label {
	color: #c0a060;
}

.status-value {
	color: #ffd966;
	font-weight: bold;
}

.combat-log-container {
	margin-top: 15px;
	background: rgba(0,0,0,0.5);
	border-radius: 12px;
	overflow: hidden;
}

.combat-log-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	background: linear-gradient(135deg, #2a2418, #1a150e);
	border-bottom: 1px solid #5a4a3a;
	color: #ffd700;
	font-size: 0.85rem;
}

.combat-log-header i {
	margin-right: 6px;
	color: #ffaa44;
}

.btn-clear-log {
	background: none;
	border: none;
	color: #c0a060;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: all 0.2s;
}

.btn-clear-log:hover {
	color: #ff6666;
	background: rgba(255,102,102,0.2);
}

.log-entry {
	margin-bottom: 6px;
	padding: 4px 8px;
	border-bottom: 1px dashed #2a2a2a;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.log-entry.new-log {
	animation: logFadeIn 0.3s ease;
}

@keyframes logFadeIn {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.log-time {
	color: #666;
	font-size: 0.65rem;
}

.log-damage {
	color: #ff6666;
}

.log-skill {
	color: #66aaff;
}

.log-heal {
	color: #66ff66;
}

.log-loot {
	color: #ffcc66;
}

.log-level {
	color: #66ffff;
}

.log-combat {
	color: #ffaa66;
}

.log-info {
	color: #aaa;
}

.combat-buttons {
	display: flex;
	gap: 10px;
	margin: 15px 0;
}

.combat-buttons .btn {
	flex: 1;
	padding: 12px 0;
	font-size: 0.9rem;
}

.combat-card, .monster-orb {
	position: relative;
	overflow: visible;
}

.monster-orb .monster-icon {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    color: #62605e;
}


@keyframes trailMove {
	0% { width: 0; opacity: 1; }
	100% { width: 100px; opacity: 0; }
}

.skill-name-tag {
	display: block;
	font-size: 0.7rem;
	background: rgba(0,0,0,0.7);
	color: #ffaa44;
	padding: 2px 4px;
	border-radius: 4px;
	margin-top: 4px;
	white-space: nowrap;
}


.critical-effect {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.2rem;
	color: #ff0000;
	text-shadow: 0 0 3px #ffff00;
	animation: criticalPop 0.6s ease-out forwards;
	pointer-events: none;
	z-index: 200;
}

.heal-effect {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1rem;
	color: #44ff44;
	text-shadow: 0 0 3px #00aa00;
	animation: healFloat 0.6s ease-out forwards;
	pointer-events: none;
}

/* ---------- 药店（Pharmacy）---------- */
.pharmacy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin: 10px 0;
}

.pharmacy-card {
    background: linear-gradient(135deg, #2c241a, #1f1912);
    border: 1px solid #8b7355;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.pharmacy-card:hover {
    border-color: #ffd700;
    transform: translateY(-3px);
    background: linear-gradient(135deg, #3a2e24, #2a1e14);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.potion-name {
    font-size: 1rem;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 6px;
}

.potion-recovery {
    color: #66ff66;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.potion-price {
    color: #ffaa44;
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.potion-quantity {
    margin: 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.potion-quantity label {
    font-size: 0.75rem;
    color: #c0a060;
}

.potion-qty {
    width: 60px;
    background: #2a1e12;
    color: #ffd700;
    border: 1px solid #5a4a3a;
    border-radius: 4px;
    padding: 4px;
    text-align: center;
}

.potion-total {
    font-size: 0.75rem;
    color: #c0c0c0;
    margin: 6px 0;
}

.total-price {
    color: #ffaa44;
    font-weight: bold;
}

.buy-potion-btn {
    margin-top: 8px;
    width: 100%;
    padding: 6px;
    font-size: 0.8rem;
}

@media (max-width: 480px) {
    .pharmacy-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}


/* ---------- 农场（Farm）---------- */
.farm-plots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.farm-plot {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #5a4a3a;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.farm-plot:hover {
    border-color: #c0a060;
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-2px);
}

.farm-plot.ready {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    box-shadow: 0 0 8px rgba(255,215,0,0.3);
}

.plot-icon {
    font-size: 48px;
    margin: 10px 0;
}

.plot-name {
    font-weight: bold;
    color: #ffd700;
    font-size: 0.9rem;
}

.plot-timer {
    font-size: 0.8rem;
    color: #aaa;
    margin: 5px 0;
}

.plot-buttons {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* 合并按钮尺寸：.plot-buttons .btn 与 .btn-sm 共享尺寸 */
.plot-buttons .btn,
.btn-sm {
    padding: 4px 8px;
    font-size: 0.7rem;
}
.btn-sm {
    min-height: 28px;
}

/* 种子卡片 */
.seed-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #5a4a3a;
    transition: 0.2s;
}

.seed-card:hover {
    border-color: #ffd700;
    background: rgba(0,0,0,0.7);
}

.seed-icon {
    font-size: 40px;
}

.seed-info {
    flex: 1;
}

.seed-price {
    color: #ffd700;
    font-size: 0.9rem;
}

.farm-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

/* ---------- 停车场（Parking） ---------- */
.parking-container {
    padding: 10px;
}

.parking-section {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #5a4a3a;
}

.parking-section h4 {
    color: #ffd700;
    margin-bottom: 10px;
    border-left: 3px solid #ffaa44;
    padding-left: 8px;
}

/* 当前车辆卡片 */
.current-vehicle-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #8b7355;
}

.current-vehicle-card .vehicle-icon {
    font-size: 2rem;
}

.current-vehicle-card .vehicle-info {
    flex: 1;
}

.current-vehicle-card .vehicle-name {
    font-weight: bold;
    color: #ffd700;
}

.current-vehicle-card .vehicle-level {
    font-size: 0.8rem;
    color: #c0a060;
}

.upgrade-vehicle-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* 车库车辆卡片 */
.garage-vehicles-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.garage-vehicle-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 10px;
    transition: all 0.2s;
    border: 1px solid #5a4a3a;
}

.garage-vehicle-card.current-vehicle {
    border: 2px solid #ffd700;
    background: rgba(255, 215, 0, 0.1);
}

.garage-vehicle-card .vehicle-icon {
    font-size: 1.8rem;
}

.garage-vehicle-card .vehicle-info {
    flex: 1;
}

.garage-vehicle-card .vehicle-name {
    font-weight: bold;
    color: #ffd700;
}

.garage-vehicle-card .vehicle-level {
    font-size: 0.7rem;
    color: #c0a060;
}

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

.vehicle-actions .btn-sm {
    padding: 4px 12px;
    font-size: 0.75rem;
}

.current-badge {
    background: #2a6b2a;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
}

/* 车位网格 */
.spots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 固定双排，每列等宽 */
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 5px;
}

.spot-card {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    padding: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    border-left: 4px solid #888;
}

.spot-card.occupied {
    border-left-color: #ffd700;
}

.spot-card.empty {
    border-left-color: #888;
    cursor: pointer;
}

.spot-card.empty:hover {
    transform: translateY(-2px);
    border-left-color: #44ff44;
    background: rgba(68, 255, 68, 0.1);
}

.spot-card.occupied:hover {
    transform: translateY(-2px);
}

.spot-header {
    font-weight: bold;
    margin-bottom: 5px;
    color: #c0a060;
}

.spot-vehicle {
    color: #ffd700;
    font-size: 0.9rem;
}

.spot-exp-info {
    font-size: 0.75rem;
    color: #88ff88;
    margin-top: 5px;
}

/* 购买车辆列表双排显示 */
#parking-vehicles-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 5px;
}

/* 购买车辆卡片样式（如果之前没有，则添加统一风格） */
.vehicle-buy-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #5a4a3a;
    transition: all 0.2s ease;
    cursor: pointer;
}

.vehicle-buy-card:hover {
    transform: translateY(-2px);
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.6);
}

.vehicle-buy-card .vehicle-icon {
    font-size: 2rem;
}

.vehicle-buy-card .vehicle-info {
    flex: 1;
}

.vehicle-buy-card .vehicle-info strong {
    color: #ffd700;
}

.vehicle-buy-card .buy-vehicle {
    white-space: nowrap;
}

@media (max-width: 360px) {
    .spots-grid {
        gap: 8px;
    }
    .spot-card {
        padding: 8px;
        font-size: 0.8rem;
    }
    .spot-header {
        font-size: 0.85rem;
    }
}

.rent-info {
    color: #ffaa44;
    margin-top: 5px;
    font-size: 0.75rem;
}

.spot-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.spot-actions .btn {
    flex: 1;
    padding: 4px 0;
    font-size: 0.7rem;
}

/* 其他玩家停车位选择 */
.other-spots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 5px;
}

.other-spot-card {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
}

.other-spot-card:hover {
    transform: translateY(-2px);
    border-color: #ffd700;
    background: rgba(0,0,0,0.6);
}

.spot-multiplier {
    font-size: 0.8rem;
    color: #ffaa44;
    margin: 5px 0;
}

.park-here-btn {
    width: 100%;
    padding: 6px;
    font-size: 0.75rem;
}

/* 按钮辅助样式 */
.btn-sm {
    padding: 4px 8px;
    font-size: 0.7rem;
    min-height: 28px;
}

.btn-warning {
    background: linear-gradient(to bottom, #d68a2a, #a55500);
    border-color: #ffaa44;
}

/* 强化商人面板 */
#strength-equip-list,
#strength-zodiac-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.strength-equip-card,
.strength-zodiac-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    padding: 10px;
    margin: 0;
    transition: 0.2s;
}

/* 属性强化列表*/
.attr-strength-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #5a4a3a;
    flex-wrap: wrap;
    gap: 8px;
}
.attr-strength-row .attr-name { min-width: 100px; }
.attr-strength-row .attr-level { min-width: 80px; text-align: center; }
.attr-strength-row .attr-cost { min-width: 120px; text-align: right; }

@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-40px); }
}
.floating-damage, .floating-heal {
    position: absolute;
    font-size: 16px;
    pointer-events: none;
}

/* ========== MP条样式（状态面板） ========== */
.mp-bar {
    position: relative;
    height: 20px;
    background-color: #333;
    border-radius: 10px;
    margin: 5px 0;
    overflow: hidden;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}
.mp-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to right, #003366, #3399ff);
    width: 0%;
    z-index: 2;
}
.mp-delay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 100, 200, 0.4);
    width: 0%;
    z-index: 1;
}
/* ---------- 战斗画面强化 ---------- */
.combat-split-layout {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 10px 0;
    min-height: auto;
    align-items: stretch;
}

.combat-divider-vertical {
    width: 0;
    border-left: 2px dashed #c0a060;
    margin: 15px 0;
    opacity: 0.8;
    flex-shrink: 0;
}

.combat-left, .combat-right {
    flex: 1;
    min-width: 0;
}

.monster-group-container {
    width: 100%;
    height: auto;
}

.orb-group {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
    justify-items: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    overflow: visible !important;
}

.orb-group > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.monster-orb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(70px, 15vw, 90px);
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle at 30% 30%, #2a2418, #1a1208);
    border: 2px solid #c0a060;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(0,0,0,0.5);
    overflow: hidden;
}

.monster-orb .ring-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;        /* 让血条不拦截点击事件 */
    z-index: 15;
}

.monster-orb.boss {
    border-color: #ff4444;
    background: radial-gradient(circle at 30% 30%, #4a2a2a, #2a1a1a);
}

.monster-orb.world-boss {
    border-color: #ff6600;
    box-shadow: 0 0 15px rgba(255,102,0,0.5);
}

.monster-orb.dead {
    opacity: 0.6;
    filter: grayscale(0.8);
    border-color: #666;
}

.monster-icon {
    font-size: 2rem;
    color: #ffaa44;
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.monster-icon img {
    max-width: 120%;
    max-height: 120%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    pointer-events: none;  /* 避免干扰点击 */
}

.monster-info {
    position: relative;
    z-index: 20;
    background: rgba(0,0,0,0.5);
    border-radius: 16px;
    padding: 4px 6px;
    margin-top: 8px;
    text-align: center;
    pointer-events: auto;        /* 允许点击查看排行等 */
}

.monster-name {
    font-weight: bold;
    font-size: 0.7rem;
    color: #ffd966;
    text-shadow: 0 0 2px black;
}

.monster-level {
    font-size: 0.7rem;
    color: #c0a060;
    margin: 2px 0;
}

.combat-card.player-card {
    border-color: #4e8b6e;
    background: radial-gradient(circle at 30% 30%, #2a3a2e, #1a2a1e);
}

.combat-card.hero-card {
    border-color: #8b6e4e;
    background: radial-gradient(circle at 30% 30%, #3a2e2a, #2a1e1a);
}

.card-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    z-index: 1;
    opacity: 0.85;
    pointer-events: none;
    color: #ffd700;
}

/* 卡片外部信息（名字、等级） - 移除血条和数值 */
.card-info {
    position: relative;
    z-index: 20;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 30px;
    padding: 6px 10px;
    margin-top: 10px;
    width: auto;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.card-name {
    font-weight: bold;
    font-size: 0.7rem;
    color: #ffd966;
}

.card-level {
    font-size: 0.7rem;
    color: #c0a060;
    margin: 2px 0;
}

/* 隐藏 HP/MP 数值显示 */
.card-info .hp-text,
.card-info .mp-text {
    display: none;
}

.monster-info .hp-text {
    display: block;
    font-size: 0.6rem;
    color: #ddd;
    margin-top: 2px;
}

/* 战斗卡片容器 */
.combat-cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 120px;
}

/* 召唤英雄后 */
.combat-cards.has-hero {
    justify-content: flex-start;
}

/* 玩家和英雄的包装层宽度一致 */
.player-wrapper,
.hero-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 圆形卡片统一尺寸 */
.combat-card {
    position: relative;
    background: radial-gradient(circle at 30% 30%, #2a2418, #1a1208);
    border: 2px solid #c0a060;
    border-radius: 50%;
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(0,0,0,0.5);
    overflow: visible;
    cursor: pointer;
}
/* 世界 Boss */
.orb-group.world-boss-mode {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.orb-group.world-boss-mode > div {
    max-width: 260px;
    width: 100%;
    margin: 0 auto;
}

/* 世界 Boss 卡片放大效果 */
.orb-group.world-boss-mode .monster-orb {
    width: clamp(100px, 22vw, 140px);
    border-color: #ff6600;
    box-shadow: 0 0 20px rgba(255,102,0,0.8);
    overflow: visible;
}

/* 世界 Boss 专用容器居中 */
.monster-group-container.world-boss-active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.monster-group-container.world-boss-active .orb-group.world-boss-mode {
    width: 100%;
    margin: 0 auto;
}

/* 隐藏世界 Boss 模式下的空占位怪物 */
.orb-group.world-boss-mode .monster-orb.empty {
    display: none;
}
@keyframes floatUp {
    0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -60px) scale(1.5); }
}

/* 确保合成模态框高于其他弹窗 */
#craft-modal {
    z-index: 10001 !important;
}

/* 全局提示框的层级稍低，避免遮挡模态框 */
.equipment-detail-tooltip {
    z-index: 10000 !important;
}

/* 二次确认对话框也要足够高 */
#game-confirm-modal {
    z-index: 10002 !important;
}
/* 增益容器：完全透明无边框 */
#buff-container {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
/* 增益卡片：无背景、无边框、无阴影 */
#buff-container .buff-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-left: none !important;
    padding: 4px 8px !important;
    transition: none !important;
}
/* 悬停效果：仅轻微文字颜色变化，无背景/边框变化 */
#buff-container .buff-card:hover {
    background: transparent !important;
    transform: none !important;
}
#buff-container .buff-card:hover .buff-name {
    color: #ffaa44;
}
/* 调整文字间距，保持可读性 */
#buff-container .buff-name {
    font-size: 0.75rem;
    font-weight: bold;
    color: #ffd966;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    white-space: nowrap;
}
#buff-container .buff-time {
    font-size: 0.65rem;
    color: #c0c0c0;
    font-family: monospace;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
#buff-container .buff-icon {
    font-size: 1.2rem;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
/* 移动端微调 */
@media (max-width: 600px) {
    #buff-container .buff-name { font-size: 0.7rem; max-width: 120px; }
    #buff-container .buff-time { font-size: 0.6rem; }
    #buff-container .buff-icon { font-size: 1rem; }
}

/* 深红色致命一击 */
.floating-damage.lethal {
    text-shadow: 0 0 5px #ff4444;
    animation: floatUp 0.8s ease-out forwards;
}

/* 深绿色中毒飘字 */
.floating-damage.poison {
    text-shadow: 0 0 5px #00aa00;
    animation: floatUp 1.2s ease-out forwards;
}
.music-control-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(230, 207, 168, 0.75);
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 0;
}

/* Phase 41: scene-level map and world boss entrances. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        position: absolute !important;
        top: 11px !important;
        z-index: 8 !important;
        display: flex !important;
        align-items: center !important;
        pointer-events: auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry {
        left: clamp(104px, 9.4vw, 150px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        right: clamp(282px, 24vw, 372px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-btn {
        width: auto !important;
        min-width: 112px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 224, 142, 0.92) !important;
        background: rgba(255, 251, 232, 0.88) !important;
        color: #6b4d25 !important;
        font-size: 0.78rem !important;
        font-weight: 900 !important;
        box-shadow: 0 8px 20px rgba(86, 64, 35, 0.16) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-btn {
        min-width: 126px !important;
        border-color: rgba(244, 188, 72, 0.96) !important;
        background: linear-gradient(180deg, rgba(255, 248, 221, 0.94), rgba(234, 255, 223, 0.9)) !important;
        color: #7c5615 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 10px 24px rgba(86, 64, 35, 0.2) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (orientation: landscape) and (max-width: 1280px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        right: clamp(238px, 23vw, 310px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-btn {
        min-width: 100px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 10px !important;
        font-size: 0.72rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-btn {
        min-width: 112px !important;
    }
}

/* Restore the world boss shortcut as the original countdown channel. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        right: clamp(292px, 25vw, 392px) !important;
        top: 10px !important;
        width: clamp(260px, 23vw, 360px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-rank-card {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: 16px 18px !important;
        align-items: center !important;
        column-gap: 7px !important;
        row-gap: 1px !important;
        width: 100% !important;
        min-height: 38px !important;
        padding: 3px 8px !important;
        border: 1px solid rgba(244, 188, 72, 0.96) !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(255, 248, 221, 0.96), rgba(234, 255, 223, 0.92)) !important;
        box-shadow: 0 8px 20px rgba(86, 64, 35, 0.16) !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        color: #7c5615 !important;
        font-size: 0.72rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #6b4d25 !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location span,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location em {
        display: inline !important;
        margin: 0 3px 0 0 !important;
        font-style: normal !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry.has-boss #world-boss-location {
        display: block !important;
        font-weight: 800 !important;
        color: #70491a !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #d07b00 !important;
        font-size: 0.66rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 72px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        height: 25px !important;
        min-height: 25px !important;
        min-width: 66px !important;
        max-width: 88px !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry.has-boss .boss-register-btn,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry:not(.has-boss) .boss-go-btn {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry:not(.has-boss) .boss-register-btn:disabled {
        display: inline-flex !important;
    }
}
.btn-music {
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid var(--q-border-green) !important;
    color: var(--q-muted) !important;
    border-radius: 10px !important;
    font-size: 0.72rem;
    cursor: pointer;
}
.btn-music.active {
    color: var(--q-green-dark) !important;
    background: var(--q-grass) !important;
    text-shadow: none;
}

.btn-music span {
    display: none !important;
}

#music-volume {
    width: 54px;
    cursor: pointer;
    padding: 0 !important;
    box-shadow: none !important;
}
.music-volume-label {
    display: none !important;
}
.paralyze-overlay {
    animation: pulse 1s infinite;
}
@keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.1); opacity: 1; }
}

/* ---------- Q cute refresh theme ---------- */
:root {
    --q-bg: #fffdf6;
    --q-sky: #dff3ff;
    --q-grass: #eaf7dd;
    --q-card: #fffaf0;
    --q-card-strong: #fff3cf;
    --q-border: #e6cfa8;
    --q-border-green: #b8ddb8;
    --q-text: #4a3828;
    --q-muted: #8a744f;
    --q-green: #71c96b;
    --q-green-dark: #45ad63;
    --q-yellow: #ffd978;
    --q-blue: #7dcdf2;
    --q-pink: #ff9aa9;
    --q-red: #f26d6d;
    --q-shadow: 0 10px 28px rgba(112, 92, 55, 0.14);
}

html,
body {
    background: linear-gradient(180deg, var(--q-sky) 0%, #f5fbff 28%, var(--q-bg) 58%, var(--q-grass) 100%) !important;
    color: var(--q-text) !important;
}

body {
    padding: 8px;
    padding-bottom: 86px;
}

.game-topbar,
.panel,
.modal-content,
.chat-messages,
.online-list,
.rankings-list,
.board-messages,
.combat-log,
.parking-section,
.farm-plot,
.inventory-slot,
.equipment-slot,
.skill-item,
.shop-item,
.auction-item,
.task-card,
.zodiac-card,
.buff-card {
    background: rgba(255, 250, 240, 0.94) !important;
    border: 1px solid var(--q-border) !important;
    border-radius: 18px !important;
    color: var(--q-text) !important;
    box-shadow: var(--q-shadow) !important;
}

.game-topbar {
    backdrop-filter: blur(12px);
}

#topbar-placeholder {
    display: none !important;
    height: 0 !important;
}

.panel-header,
.modal-header,
.section-title,
.inventory-title,
.skill-title,
.status-title {
    color: var(--q-text) !important;
    border-bottom-color: rgba(230, 207, 168, 0.75) !important;
    text-shadow: none !important;
}

.logo-area h1,
.brand-title {
    color: var(--q-text) !important;
    text-shadow: 0 2px 0 #fff6d6 !important;
}

.subtitle,
.stats-label,
.equipment-type,
.skill-desc,
.empty-tip {
    color: var(--q-muted) !important;
}

.stats-value,
.equipment-name,
.skill-name,
.item-name,
.monster-name,
.card-name {
    color: var(--q-text) !important;
    text-shadow: none !important;
}

.player-status-bar,
.topbar-stat,
.status-item,
.stats-row,
.map-option,
.monster-row,
.spot-card,
.vehicle-card,
.garage-vehicle-card,
.rank-row,
.chat-message {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(230, 207, 168, 0.75) !important;
    border-radius: 14px !important;
    color: var(--q-text) !important;
}

.btn,
button {
    border-radius: 14px !important;
    border: 1px solid var(--q-border-green) !important;
    background: #ffffff !important;
    color: #4a7c59 !important;
    box-shadow: 0 4px 10px rgba(84, 128, 87, 0.12) !important;
    text-shadow: none !important;
}

.btn:hover,
button:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.btn-primary,
.btn-success,
button.btn-primary,
button.btn-success {
    background: linear-gradient(180deg, var(--q-green), var(--q-green-dark)) !important;
    color: #ffffff !important;
    border-color: var(--q-green-dark) !important;
}

.btn-warning,
button.btn-warning {
    background: linear-gradient(180deg, var(--q-yellow), #f2b84b) !important;
    color: var(--q-text) !important;
    border-color: #e8b84b !important;
}

.btn-danger,
button.btn-danger {
    background: linear-gradient(180deg, var(--q-pink), var(--q-red)) !important;
    color: #ffffff !important;
    border-color: var(--q-red) !important;
}

input,
select,
textarea {
    background: #ffffff !important;
    color: var(--q-text) !important;
    border: 1px solid var(--q-border) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 4px rgba(112, 92, 55, 0.08) !important;
}

input::placeholder,
textarea::placeholder {
    color: #b39a72 !important;
}

.hp-fill,
.hp-minibar-fill {
    background: linear-gradient(90deg, var(--q-pink), var(--q-red)) !important;
}

.mp-fill,
.mp-minibar-fill {
    background: linear-gradient(90deg, var(--q-blue), #4aaee8) !important;
}

.exp-fill,
.exp-minibar-fill,
.progress-fill {
    background: linear-gradient(90deg, var(--q-yellow), #aee66f) !important;
}

.combat-split-layout,
.combat-area,
.battle-stage {
    background: linear-gradient(180deg, #f3fbff, #f8ffe9) !important;
    border: 1px solid var(--q-border) !important;
    border-radius: 20px !important;
}

.combat-divider-vertical {
    border-left-color: #cfe8be !important;
}

.combat-card,
.monster-orb,
.player-card,
.hero-card {
    background: radial-gradient(circle at 30% 22%, #ffffff 0%, #f7fff2 46%, #e5f5d8 100%) !important;
    border: 2px solid var(--q-border-green) !important;
    border-radius: 22px !important;
    box-shadow: 0 8px 18px rgba(81, 126, 87, 0.16) !important;
}

.monster-orb.boss,
.monster-orb.world-boss,
.boss-card {
    background: radial-gradient(circle at 30% 22%, #fffaf0 0%, #ffe8ef 52%, #ffd5df 100%) !important;
    border-color: var(--q-pink) !important;
}

.card-info,
.monster-info,
.monster-hp-wrapper,
.hp-bar,
.mp-bar,
.exp-bar,
.progress-bar {
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: rgba(230, 207, 168, 0.8) !important;
    color: var(--q-text) !important;
}

.mobile-nav {
    background: rgba(255, 253, 246, 0.96) !important;
    border-top: 1px solid var(--q-border) !important;
    box-shadow: 0 -8px 22px rgba(112, 92, 55, 0.12) !important;
}

.nav-item {
    color: var(--q-muted) !important;
    border-radius: 14px !important;
}

.nav-item.active {
    background: var(--q-grass) !important;
    color: var(--q-green-dark) !important;
}

.modal {
    background: rgba(111, 88, 54, 0.28) !important;
}

.modal-content {
    max-height: 88vh;
}

.farm-plot {
    background: linear-gradient(180deg, #f7ffe7, var(--q-grass)) !important;
}

.quality-normal,
.quality-magic,
.quality-rare,
.quality-epic,
.quality-legendary {
    text-shadow: none !important;
}

.equipment-detail-tooltip {
    background: rgba(255, 250, 240, 0.96) !important;
    border: 1px solid var(--q-border) !important;
    color: var(--q-text) !important;
    border-radius: 14px !important;
    box-shadow: var(--q-shadow) !important;
    width: max-content !important;
    min-width: min(180px, calc(100vw - 28px)) !important;
    max-width: min(420px, calc(100vw - 28px)) !important;
    padding: 10px 14px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
}

/* ---------- Q cute phase 2: core page restructure ---------- */
.container {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 8px 10px 96px !important;
}

.game-topbar {
    display: none !important;
}

.logo-area {
    min-width: 0;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #fff7d6, #eaf7dd) !important;
    border: 1px solid var(--q-border) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

.logo-area h1 {
    margin: 0 !important;
    font-size: 1.55rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    color: #7a5524 !important;
    text-shadow: 0 1px 0 #ffffff !important;
}

.logo-area .subtitle {
    margin-top: 4px !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-status-bar {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto !important;
    gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.topbar-stat {
    min-height: 38px !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
}

.btn-topbar-logout {
    min-height: 38px !important;
    padding: 0 12px !important;
    white-space: nowrap;
}

.panel.mobile-panel.active {
    display: block !important;
    animation: qPanelIn 0.22s ease-out;
}

@keyframes qPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel {
    padding: 14px !important;
    margin: 12px 0 !important;
}

.panel-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 0 0 10px !important;
    margin-bottom: 12px !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
}

.panel-tools {
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    min-width: 0 !important;
    max-width: 62% !important;
}

#panel-status > .panel-header {
    padding-right: 150px !important;
}

#role-panel-tools {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
}

.effect-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    width: 30px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 10px !important;
    border: 1px solid var(--q-border-green) !important;
    background: #ffffff !important;
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 10px rgba(84, 128, 87, 0.1) !important;
}

.effect-toggle-btn span {
    display: none !important;
}

.effect-toggle-btn.active {
    background: var(--q-grass) !important;
    color: var(--q-green-dark) !important;
    border-color: var(--q-green-dark) !important;
}

.panel-subtitle {
    margin-left: auto !important;
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: right !important;
}

.panel-header > i {
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, var(--q-green), var(--q-green-dark)) !important;
}

.status-tabs,
.equipment-tabs,
.inventory-tabs,
.skill-tabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    gap: 8px !important;
    padding: 4px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(230, 207, 168, 0.75) !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
}

.role-status-switch {
    display: inline-grid !important;
    grid-template-columns: repeat(2, minmax(42px, 1fr)) !important;
    width: 112px !important;
    min-width: 112px !important;
    margin: 0 0 0 8px !important;
    padding: 3px !important;
    gap: 4px !important;
    border-radius: 12px !important;
}

.role-status-switch .tab-btn {
    min-height: 28px !important;
    padding: 4px 7px !important;
    font-size: 0.72rem !important;
    border-radius: 9px !important;
}

.tab-btn {
    min-height: 38px !important;
    padding: 8px 10px !important;
}

.tab-btn.active,
.status-tabs .active,
.equipment-tabs .active,
.inventory-tabs .active,
.skill-tabs .active {
    background: linear-gradient(180deg, #ffffff, var(--q-card-strong)) !important;
    color: var(--q-text) !important;
    border-color: var(--q-yellow) !important;
}

#panel-status #player-status-block,
#panel-status #hero-status-block {
    display: block;
}

#panel-status #player-status-block[style*="none"],
#panel-status #hero-status-block[style*="none"] {
    display: none !important;
}

.character-stats,
.hero-stats {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #fffaf0 0%, #f1fbff 48%, #f5ffe9 100%) !important;
    border: 1px solid var(--q-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--q-shadow) !important;
}

.character-stats::before,
.hero-stats::before {
    content: "";
    position: absolute;
    right: 14px;
    top: 12px;
    width: 72px;
    height: 42px;
    border-radius: 40px;
    background: #ffffff;
    box-shadow: -42px 10px 0 -12px rgba(255,255,255,0.9), 34px 12px 0 -16px rgba(255,255,255,0.75);
    opacity: 0.8;
    pointer-events: none;
}

.character-stats > div:first-child,
.hero-stats > div:first-child {
    grid-column: 1 / -1 !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 82px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    border-radius: 18px !important;
}

.avatar-img {
    width: 72px !important;
    height: 72px !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 5px 14px rgba(112, 92, 55, 0.2) !important;
    background: linear-gradient(180deg, #fff7d6, #dff3ff) !important;
}

.character-stats h3,
.hero-stats h3 {
    margin: 0 0 8px !important;
    color: var(--q-text) !important;
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
}

.character-stats select,
.hero-stats select {
    width: min(100%, 220px) !important;
    min-height: 34px !important;
}

.character-stats .stats-row,
.hero-stats .stats-row,
#panel-status #player-status-block > div:not(.character-stats) .stats-row,
#panel-status #hero-status-block > div:not(.hero-stats) .stats-row {
    min-height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 10px !important;
    margin: 0 !important;
}

.character-stats .hp-bar,
.character-stats .mp-bar,
.hero-stats .hp-bar,
.hero-stats .mp-bar {
    grid-column: span 2 !important;
    height: 14px !important;
    align-self: center !important;
    border-radius: 999px !important;
}

#panel-status #player-status-block > div:not(.character-stats),
#panel-status #hero-status-block > div:not(.hero-stats) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.quick-buttons {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.quick-buttons .btn,
.inventory-controls .btn,
.farm-controls .btn,
.combat-buttons .btn,
.map-buttons .btn {
    min-height: 42px !important;
    padding: 8px 10px !important;
}

#panel-inventory-equip {
    display: none;
}

#panel-inventory-equip.active {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr) !important;
    gap: 12px !important;
}

#panel-inventory-equip > .panel-header,
#panel-inventory-equip > .equipment-tabs,
#panel-inventory-equip > .inventory-tabs {
    grid-column: 1 / -1 !important;
}

#player-equipment-grid,
#hero-equipment-grid,
#player-set-bonuses,
#hero-set-bonuses {
    grid-column: 1 !important;
}

#inventory-section,
#warehouse-section {
    grid-column: 2 !important;
    grid-row: 4 / span 4 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: rgba(255, 255, 255, 0.48) !important;
    border: 1px dashed rgba(230, 207, 168, 0.9) !important;
    border-radius: 18px !important;
    padding: 12px !important;
}

#inventory-section h4,
#warehouse-section h4 {
    margin: 0 0 10px !important;
    color: var(--q-text) !important;
}

.equipment-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(74px, 1fr)) !important;
    gap: 8px !important;
    align-content: start !important;
}

.equipment-slot,
.inventory-slot {
    min-height: 82px !important;
    padding: 8px !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}

.equipment-slot:hover,
.inventory-slot:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 18px rgba(112, 92, 55, 0.18) !important;
}

#panel-inventory-equip .inventory-controls {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 0 0 10px !important;
    margin: 0 !important;
    scrollbar-width: thin;
}

#panel-inventory-equip .inventory-controls .btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

#panel-inventory-equip .inventory-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)) !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 4px !important;
}

#panel-combat .combat-status-bar {
    margin-bottom: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.status-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.combat-split-layout {
    position: relative !important;
    min-height: 340px !important;
    display: grid !important;
    grid-template-columns: minmax(120px, 0.85fr) 1px minmax(180px, 1.15fr) !important;
    gap: 12px !important;
    padding: 14px !important;
    overflow: hidden !important;
}

.combat-split-layout::before {
    content: "";
    position: absolute;
    inset: auto 12px 10px;
    height: 34%;
    border-radius: 50% 50% 0 0 / 18% 18% 0 0;
    background: linear-gradient(180deg, rgba(184, 221, 184, 0.08), rgba(184, 221, 184, 0.4));
    pointer-events: none;
}

.combat-left,
.combat-right {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
}

.combat-cards {
    min-height: 100% !important;
    justify-content: center !important;
}

.monster-group-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
    gap: 10px !important;
    align-content: center !important;
}

.combat-card,
.monster-orb {
    min-height: 106px !important;
}

.player-wrapper,
.hero-wrapper {
    min-width: 0 !important;
}

.card-info,
.monster-info {
    max-width: 100% !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
}

.card-name,
.monster-name,
.equipment-name,
.item-name {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.monster-group-container:empty::before {
    content: "选择地图后开始冒险";
    grid-column: 1 / -1;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--q-muted);
    background: rgba(255,255,255,0.62);
    border: 1px dashed var(--q-border);
    border-radius: 18px;
}

.card-avatar {
    color: var(--q-green-dark) !important;
}

.combat-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 12px 0 !important;
}

.combat-log-container {
    border: 1px solid var(--q-border) !important;
    background: rgba(255,255,255,0.52) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

.combat-log-header {
    background: rgba(255, 250, 240, 0.9) !important;
    color: var(--q-text) !important;
    padding: 10px 12px !important;
}

.combat-log {
    max-height: 220px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.mobile-nav {
    left: 50% !important;
    right: auto !important;
    bottom: 8px !important;
    transform: translateX(-50%) !important;
    width: min(720px, calc(100% - 20px)) !important;
    padding: 6px !important;
    border-radius: 22px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
}

.nav-item {
    min-width: 0 !important;
    height: 54px !important;
    padding: 5px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
}

.nav-item i {
    font-size: 1rem !important;
    line-height: 1 !important;
}

.nav-item span {
    max-width: 100% !important;
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 860px) {
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .game-topbar {
        display: none !important;
    }

    .player-status-bar {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        scrollbar-width: thin;
    }

    .topbar-stat {
        flex: 0 0 auto !important;
        min-width: 84px !important;
    }

    .hp-bar-compact {
        min-width: 126px !important;
    }

    .btn-topbar-logout {
        grid-column: auto !important;
        flex: 0 0 auto !important;
        min-width: 88px !important;
        width: auto !important;
    }

    .character-stats,
    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .quick-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #panel-inventory-equip.active {
        display: block !important;
    }

    #player-equipment-grid,
    #hero-equipment-grid,
    #player-set-bonuses,
    #hero-set-bonuses,
    #inventory-section,
    #warehouse-section {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .equipment-grid {
        grid-template-columns: repeat(4, minmax(62px, 1fr)) !important;
        margin-bottom: 10px !important;
    }

    .inventory-grid {
        max-height: 46vh !important;
    }

    .combat-split-layout {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    .combat-divider-vertical {
        display: none !important;
    }

    .combat-cards,
    .monster-group-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .combat-cards {
        display: grid !important;
        gap: 10px !important;
    }

    .combat-card,
    .monster-orb {
        min-height: 96px !important;
    }

    .combat-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 420px) {
    .panel {
        padding: 10px !important;
    }

    .character-stats,
    .hero-stats {
        grid-template-columns: 1fr !important;
        padding: 10px !important;
    }

    .character-stats > div:first-child,
    .hero-stats > div:first-child {
        grid-template-columns: 64px 1fr !important;
    }

    .avatar-img {
        width: 58px !important;
        height: 58px !important;
    }

    .character-stats .hp-bar,
    .character-stats .mp-bar,
    .hero-stats .hp-bar,
    .hero-stats .mp-bar {
        grid-column: span 1 !important;
    }

    .quick-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .equipment-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .inventory-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .mobile-nav {
        width: calc(100% - 12px) !important;
        bottom: 5px !important;
        border-radius: 18px !important;
    }

    .nav-item {
        height: 50px !important;
    }

    .nav-item span {
        font-size: 0.66rem !important;
    }

    .panel-subtitle {
        display: none !important;
    }

    .panel-tools {
        gap: 4px !important;
        max-width: 68% !important;
    }

    .effect-toggle-btn,
    .btn-music {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .effect-toggle-btn span,
    .btn-music span,
    .music-volume-label {
        display: none !important;
    }

    #music-volume {
        width: 50px !important;
    }

    #panel-status > .panel-header {
        padding-right: 126px !important;
    }

    .status-row {
        grid-template-columns: 1fr !important;
    }

    .combat-cards,
    .monster-group-container {
        grid-template-columns: 1fr 1fr !important;
    }

    .combat-card,
    .monster-orb {
        min-height: 88px !important;
    }
}

/* Q版行囊页二次整理：保留容量和玩法，只隐藏未占用的空格子。 */
#hero-equipment-grid[style*="display: none"],
#hero-equipment-grid[style*="display:none"],
#player-equipment-grid[style*="display: none"],
#player-equipment-grid[style*="display:none"],
#hero-set-bonuses[style*="display: none"],
#hero-set-bonuses[style*="display:none"],
#player-set-bonuses[style*="display: none"],
#player-set-bonuses[style*="display:none"],
#warehouse-section[style*="display: none"],
#warehouse-section[style*="display:none"],
#inventory-section[style*="display: none"],
#inventory-section[style*="display:none"] {
    display: none !important;
}

#player-set-bonuses.is-empty,
#hero-set-bonuses.is-empty,
.set-bonuses-empty {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#player-set-bonuses,
#hero-set-bonuses {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
}

#panel-inventory-equip.active {
    align-items: start !important;
}

#panel-inventory-equip .equipment-tabs,
#panel-inventory-equip .inventory-tabs {
    margin-bottom: 8px !important;
}

#panel-inventory-equip .equipment-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}

#panel-inventory-equip .equipment-slot {
    min-height: 82px !important;
    padding: 6px 4px !important;
    border-radius: 12px !important;
}

#panel-inventory-equip .equipment-slot i {
    font-size: 1.12rem !important;
    margin-bottom: 2px !important;
}

#panel-inventory-equip .equipment-name {
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
    margin-top: 3px !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-all !important;
}

#panel-inventory-equip .equipment-type {
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
}

#inventory-section,
#warehouse-section {
    padding: 10px !important;
}

.inventory-controls {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
    padding: 0 0 10px !important;
}

.inventory-controls .btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 6px 7px !important;
    justify-content: center !important;
    font-size: 0.76rem !important;
    white-space: nowrap !important;
}

.inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 7px !important;
    padding: 0 !important;
    background: transparent !important;
}

#panel-inventory-equip .inventory-grid.is-empty {
    display: block !important;
}

#panel-inventory-equip .inventory-grid .inventory-slot.has-item {
    min-height: 74px !important;
    aspect-ratio: 1 / 1 !important;
}

#panel-inventory-equip .inventory-item-icon {
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#panel-inventory-equip .inventory-empty-state {
    min-height: 86px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: var(--q-muted) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px dashed var(--q-border) !important;
    border-radius: 16px !important;
    font-weight: 700 !important;
}

#panel-inventory-equip .inventory-empty-state i {
    font-size: 1.45rem !important;
    opacity: 0.72 !important;
}

@media (max-width: 860px) {
    #panel-inventory-equip.active {
        display: block !important;
        padding-bottom: 76px !important;
    }

    #inventory-section,
    #warehouse-section {
        margin-top: 8px !important;
    }

    #panel-inventory-equip .inventory-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 420px) {
    #panel-inventory-equip .equipment-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    #panel-inventory-equip .equipment-slot {
        min-height: 78px !important;
    }

    #panel-inventory-equip .inventory-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #panel-inventory-equip .inventory-controls .btn {
        font-size: 0.72rem !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* 行囊底部工具条：从背包内容区拆出，横向滚动显示。 */
.inventory-bottom-toolbar {
    grid-column: 1 / -1 !important;
    position: static !important;
    z-index: 25 !important;
    margin-top: 10px !important;
    padding: 9px !important;
    border: 1px solid rgba(209, 232, 207, 0.95) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 250, 0.96) !important;
    box-shadow: 0 8px 22px rgba(101, 140, 101, 0.14) !important;
}

.inventory-bottom-toolbar .inventory-controls,
#panel-inventory-equip .inventory-bottom-toolbar .inventory-controls {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    scrollbar-width: none !important;
}

.inventory-bottom-toolbar .inventory-controls .btn,
#panel-inventory-equip .inventory-bottom-toolbar .inventory-controls .btn {
    min-width: 0 !important;
    width: auto !important;
    min-height: 34px !important;
    padding: 6px 7px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    font-size: 0.76rem !important;
    justify-content: center !important;
}

.inventory-bottom-toolbar .inventory-controls .btn i,
#panel-inventory-equip .inventory-bottom-toolbar .inventory-controls .btn i {
    margin-right: 4px !important;
}

@media (max-width: 860px) {
    .inventory-bottom-toolbar {
        margin-left: -2px !important;
        margin-right: -2px !important;
    }
}

@media (max-width: 420px) {
    .inventory-bottom-toolbar {
        padding: 7px !important;
    }

    .inventory-bottom-toolbar .inventory-controls .btn,
    #panel-inventory-equip .inventory-bottom-toolbar .inventory-controls .btn {
        min-width: 0 !important;
        min-height: 32px !important;
        padding: 6px 4px !important;
        font-size: 0.66rem !important;
    }
}

/* 冒险页重排：左角色、右怪物、下方战斗信息，操作按钮独立沉底。 */
#panel-combat.active {
    padding-bottom: 86px !important;
}

#panel-combat .combat-status-bar {
    margin: 0 0 10px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(209, 232, 207, 0.9) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 250, 0.76) !important;
}

#panel-combat .status-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#panel-combat .status-item {
    min-width: 0 !important;
    padding: 7px 8px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

#panel-combat .combat-split-layout {
    display: grid !important;
    grid-template-columns: minmax(86px, 0.78fr) minmax(0, 1.22fr) !important;
    grid-template-areas:
        "actors monsters"
        "feed feed" !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
    border: 1px solid rgba(230, 207, 168, 0.95) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 78% 28%, rgba(187, 227, 177, 0.42), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 250, 0.94), rgba(243, 255, 238, 0.88)) !important;
    box-shadow: 0 14px 30px rgba(112, 143, 96, 0.14) !important;
}

#panel-combat .combat-split-layout::before,
#panel-combat .combat-divider-vertical {
    display: none !important;
}

#panel-combat .combat-left {
    grid-area: actors !important;
}

#panel-combat .combat-right {
    grid-area: monsters !important;
}

#panel-combat .combat-feed {
    grid-area: feed !important;
    min-width: 0 !important;
}

#panel-combat .combat-cards {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    align-content: start !important;
    justify-items: center !important;
}

#panel-combat .player-wrapper,
#panel-combat .hero-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 4px !important;
}

#panel-combat .combat-card {
    width: min(78px, 100%) !important;
    height: 78px !important;
    min-height: 78px !important;
    border-radius: 22px !important;
}

#panel-combat .card-avatar {
    font-size: 1.55rem !important;
}

#panel-combat .card-info {
    width: 100% !important;
    padding: 4px 5px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

#panel-combat .card-name,
#panel-combat .card-level {
    line-height: 1.12 !important;
}

#panel-combat .monster-group-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-content: start !important;
}

#panel-combat .monster-orb {
    min-height: 96px !important;
    border-radius: 20px !important;
}

#panel-combat .monster-info {
    padding: 5px 6px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

#panel-combat .monster-name,
#panel-combat .monster-level {
    line-height: 1.12 !important;
}

#panel-combat .monster-group-container:empty::before {
    min-height: 120px !important;
    border-radius: 18px !important;
}

#panel-combat .combat-log-container {
    margin-top: 2px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.74) !important;
}

#panel-combat .combat-log-header {
    padding: 8px 10px !important;
}

#panel-combat .combat-log {
    max-height: 132px !important;
    min-height: 84px !important;
    font-size: 0.76rem !important;
}

.combat-bottom-toolbar {
    position: static !important;
    z-index: 26 !important;
    margin-top: 10px !important;
    padding: 9px !important;
    border: 1px solid rgba(209, 232, 207, 0.95) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 250, 0.96) !important;
    box-shadow: 0 8px 22px rgba(101, 140, 101, 0.16) !important;
}

.combat-bottom-toolbar .combat-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    overflow: visible !important;
    scrollbar-width: none !important;
}

.combat-bottom-toolbar .combat-buttons .btn {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
}

@media (max-width: 420px) {
    #panel-combat.active {
        padding-bottom: 82px !important;
    }

    #panel-combat .status-row {
        grid-template-columns: 1fr !important;
    }

    #panel-combat .combat-split-layout {
        grid-template-columns: minmax(76px, 0.72fr) minmax(0, 1.28fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    #panel-combat .combat-card {
        width: 70px !important;
        height: 70px !important;
        min-height: 70px !important;
    }

    #panel-combat .monster-group-container {
        gap: 7px !important;
    }

    #panel-combat .monster-orb {
        min-height: 88px !important;
    }

    #panel-combat .combat-log {
        max-height: 118px !important;
        min-height: 78px !important;
    }

    .combat-bottom-toolbar {
        padding: 7px !important;
    }

    .combat-bottom-toolbar .combat-buttons .btn {
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 6px 6px !important;
        font-size: 0.68rem !important;
    }
}

/* 角色页紧凑信息卡：头像、名称、等级、经验、生命、魔法合并显示。 */
#panel-status .character-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
}

#panel-status > .status-tabs {
    display: none !important;
}

#panel-status .player-core-card {
    grid-column: 1 / -1 !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 10px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(230, 207, 168, 0.9) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 20px rgba(112, 92, 55, 0.1) !important;
}

#panel-status .player-core-avatar-wrap {
    width: 68px !important;
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#panel-status .player-core-card .avatar-img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 5px 14px rgba(112, 92, 55, 0.18) !important;
}

#panel-status .player-core-main {
    min-width: 0 !important;
}

#panel-status .player-core-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 5px !important;
}

#panel-status .player-core-title h3 {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 0.96rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#panel-status .player-core-level {
    flex: 0 0 auto !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    color: var(--q-green-dark) !important;
    background: rgba(220, 246, 218, 0.95) !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
}

#panel-status .player-avatar-picker {
    margin: 0 0 6px !important;
}

#panel-status .player-core-card select {
    width: 100% !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 250, 0.95) !important;
    color: var(--q-text) !important;
    border: 1px solid rgba(230, 207, 168, 0.92) !important;
    font-size: 0.76rem !important;
}

#panel-status .player-core-meters {
    display: grid !important;
    gap: 4px !important;
}

#panel-status .player-core-meters .meter-row {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

#panel-status .player-core-meters .stats-label,
#panel-status .player-core-meters .stats-value {
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
}

#panel-status .player-core-meters .stats-value {
    font-weight: 800 !important;
}

#panel-status .player-core-card .hp-bar,
#panel-status .player-core-card .exp-bar,
#panel-status .player-core-card .mp-bar {
    grid-column: auto !important;
    width: 100% !important;
    height: 8px !important;
    margin: -1px 0 1px !important;
    border-radius: 999px !important;
}

@media (max-width: 420px) {
    #panel-status .player-core-card {
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 9px !important;
    }

    #panel-status .player-core-avatar-wrap {
        width: 58px !important;
        height: 58px !important;
    }

    #panel-status .player-core-card .avatar-img {
        width: 56px !important;
        height: 56px !important;
    }

    #panel-status .player-core-title h3 {
        font-size: 0.88rem !important;
    }

    #panel-status .player-core-level {
        padding: 2px 7px !important;
        font-size: 0.7rem !important;
    }
}

#panel-status .character-stats > .stats-row {
    min-height: 44px !important;
    padding: 8px 9px !important;
    border-radius: 13px !important;
}

#panel-status .character-stats > .stats-row .stats-label {
    font-size: 0.78rem !important;
}

#panel-status .character-stats > .stats-row .stats-value {
    font-size: 0.9rem !important;
}

@media (max-width: 420px) {
    #panel-status .character-stats {
        gap: 7px !important;
        padding: 9px !important;
    }

    #panel-status .character-stats > .stats-row {
        min-height: 40px !important;
        padding: 7px 8px !important;
    }
}

/* 角色页最终整理：清除旧网格冲突，避免窄列和空柱。 */
#panel-status .player-status-compact,
#panel-status .hero-status-compact {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: visible !important;
}

#panel-status .player-status-compact::before,
#panel-status .hero-status-compact::before {
    display: none !important;
}

#panel-status .player-status-compact > .player-core-card,
#panel-status .hero-status-compact > .hero-core-card {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(230, 207, 168, 0.9) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 8px 20px rgba(112, 92, 55, 0.1) !important;
}

#panel-status .player-status-compact .player-core-avatar-wrap,
#panel-status .hero-status-compact .player-core-avatar-wrap {
    width: 62px !important;
    height: 62px !important;
}

#panel-status .player-status-compact .avatar-img,
#panel-status .hero-status-compact .avatar-img {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
}

#panel-status .player-status-compact .status-attribute-grid,
#panel-status .hero-status-compact .status-attribute-grid {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

#panel-status .player-status-compact .status-attribute-grid .stats-row,
#panel-status .hero-status-compact .status-attribute-grid .stats-row {
    min-width: 0 !important;
    min-height: 42px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.68) !important;
}

#panel-status .player-status-compact .status-attribute-grid .stats-label,
#panel-status .hero-status-compact .status-attribute-grid .stats-label {
    max-width: 100% !important;
    color: var(--q-muted) !important;
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#panel-status .player-status-compact .status-attribute-grid .stats-value,
#panel-status .hero-status-compact .status-attribute-grid .stats-value {
    max-width: 100% !important;
    color: var(--q-text) !important;
    font-size: 0.78rem !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    overflow-wrap: anywhere !important;
}

#player-rebirth-bonus-inline,
#hero-rebirth-bonus-inline {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
}

#panel-status .status-attribute-grid .rebirth-bonus-row {
    grid-column: 1 / -1 !important;
    min-height: 44px !important;
}

#panel-status .status-attribute-grid .rebirth-bonus-row .stats-value {
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: keep-all !important;
}

@media (max-width: 420px) {
    #panel-status .player-status-compact,
    #panel-status .hero-status-compact {
        gap: 8px !important;
        padding: 9px !important;
    }

    #panel-status .player-status-compact > .player-core-card,
    #panel-status .hero-status-compact > .hero-core-card {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 9px !important;
    }

    #panel-status .player-status-compact .player-core-avatar-wrap,
    #panel-status .hero-status-compact .player-core-avatar-wrap {
        width: 54px !important;
        height: 54px !important;
    }

    #panel-status .player-status-compact .avatar-img,
    #panel-status .hero-status-compact .avatar-img {
        width: 52px !important;
        height: 52px !important;
    }

    #panel-status .player-status-compact .status-attribute-grid,
    #panel-status .hero-status-compact .status-attribute-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #panel-status .player-status-compact .status-attribute-grid .stats-row,
    #panel-status .hero-status-compact .status-attribute-grid .stats-row {
        min-height: 38px !important;
        padding: 6px 7px !important;
    }
}

/* 头像按钮和核心卡内小属性。 */
#panel-status .player-status-compact .player-core-avatar-wrap,
#panel-status .hero-status-compact .player-core-avatar-wrap {
    position: relative !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

#panel-status .player-status-compact .player-core-avatar-wrap .avatar-img,
#panel-status .hero-status-compact .player-core-avatar-wrap .avatar-img {
    pointer-events: none !important;
}

#panel-status .player-status-compact .player-avatar-picker,
#panel-status .hero-status-compact .player-avatar-picker {
    display: none !important;
}

.avatar-hidden-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#panel-status .player-status-compact .player-core-avatar-wrap::after,
#panel-status .hero-status-compact .player-core-avatar-wrap::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #62c978;
    border: 2px solid #fffaf0;
    box-shadow: 0 4px 10px rgba(78, 135, 80, 0.22);
}

#panel-status .player-status-compact .player-core-avatar-wrap::before,
#panel-status .hero-status-compact .player-core-avatar-wrap::before {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 6px;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
}

#panel-status .player-core-mini-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-top: 6px !important;
}

#panel-status .player-core-mini-stats div {
    min-width: 0 !important;
    padding: 5px 6px !important;
    border-radius: 10px !important;
    background: rgba(255, 250, 240, 0.78) !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
}

#panel-status .player-core-mini-stats span,
#panel-status .player-core-mini-stats strong {
    display: block !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#panel-status .player-core-mini-stats span {
    color: var(--q-muted) !important;
    font-size: 0.62rem !important;
}

#panel-status .player-core-mini-stats strong {
    margin-top: 2px !important;
    color: var(--q-text) !important;
    font-size: 0.74rem !important;
}

@media (max-width: 420px) {
    #panel-status .player-core-mini-stats {
        gap: 4px !important;
    }

    #panel-status .player-core-mini-stats div {
        padding: 4px 5px !important;
    }

    #panel-status .player-core-mini-stats span {
        font-size: 0.58rem !important;
    }

    #panel-status .player-core-mini-stats strong {
        font-size: 0.68rem !important;
    }
}

.avatar-choice-content {
    max-width: 340px !important;
}

.avatar-choice-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.avatar-choice-item {
    appearance: none !important;
    border: 1px solid rgba(230, 207, 168, 0.9) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 250, 0.88) !important;
    padding: 6px 4px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 4px !important;
    color: var(--q-text) !important;
}

.avatar-choice-item.active {
    border-color: #62c978 !important;
    box-shadow: 0 0 0 3px rgba(98, 201, 120, 0.18) !important;
}

.avatar-choice-item img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.avatar-choice-item span {
    display: none !important;
}

#panel-status .player-core-card .exp-bar,
#panel-status .hero-core-card .exp-bar {
    background: rgba(255, 255, 255, 0.84) !important;
    border: 1px solid rgba(180, 222, 176, 0.82) !important;
}

#panel-status .player-core-card .exp-fill,
#panel-status .hero-core-card .exp-fill {
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #68d878, #a8ef79) !important;
    box-shadow: 0 0 10px rgba(104, 216, 120, 0.25) !important;
}

/* Phase 3: cute wrappers for social, farm, station, and spellbook pages. */
.q-scene-intro {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 217, 120, 0.38), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(232, 248, 221, 0.76)) !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.1) !important;
}

.q-scene-icon {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff, #e8f8dd) !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    color: var(--q-green-dark) !important;
    font-size: 1.25rem !important;
    box-shadow: 0 5px 12px rgba(84, 128, 87, 0.14) !important;
}

.q-scene-title,
.q-subsection-title {
    color: var(--q-text) !important;
    font-weight: 900 !important;
    line-height: 1.16 !important;
}

.q-scene-title {
    font-size: 1rem !important;
}

.q-scene-text {
    margin-top: 3px !important;
    color: var(--q-muted) !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
}

.q-subsection-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    font-size: 0.92rem !important;
}

#panel-social,
#panel-farm,
#panel-arena,
#panel-parking,
#panel-skills {
    overflow-x: hidden !important;
}

#panel-social .panel-header,
#panel-farm .panel-header,
#panel-arena .panel-header,
#panel-parking .panel-header,
#panel-skills .panel-header {
    margin-bottom: 10px !important;
}

.teahouse-layout {
    display: grid !important;
    grid-template-columns: minmax(210px, 0.78fr) minmax(260px, 1.22fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.teahouse-online-card,
.teahouse-chat-card,
.spellbook-page,
#arena-content,
#farm-plots,
#parking-content {
    min-width: 0 !important;
    border-radius: 20px !important;
}

.teahouse-online-card,
.teahouse-chat-card,
.spellbook-page {
    padding: 12px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 8px 20px rgba(112, 92, 55, 0.09) !important;
}

#panel-social .online-list {
    min-height: 112px !important;
    max-height: 32vh !important;
    padding: 8px !important;
    margin: 0 !important;
    background: rgba(255, 250, 240, 0.78) !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
    box-shadow: none !important;
}

#panel-social .online-empty {
    min-height: 88px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--q-muted) !important;
    font-size: 0.86rem !important;
}

#panel-social .teahouse-art-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: linear-gradient(180deg, #fffdf7, #f1fae8) !important;
    box-shadow: 0 5px 12px rgba(112, 92, 55, 0.09) !important;
}

#panel-social .teahouse-art-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

#panel-social .teahouse-art-icon i {
    display: none !important;
    color: var(--q-green) !important;
    font-size: 1rem !important;
}

#panel-social .teahouse-art-icon.teahouse-art-icon-fallback i {
    display: inline-flex !important;
}

#panel-social .teahouse-art-icon-small {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 13px !important;
}

#panel-social .teahouse-art-icon-large {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 20px !important;
}

#panel-social .online-item {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 7px !important;
    padding: 8px !important;
    border: 1px solid rgba(230, 207, 168, 0.75) !important;
    border-radius: 14px !important;
    background: #fffef9 !important;
    box-shadow: 0 4px 10px rgba(112, 92, 55, 0.07) !important;
}

#panel-social .online-name,
#panel-social .online-level,
#panel-social .chat-time,
#panel-social .chat-content {
    min-width: 0 !important;
    color: var(--q-text) !important;
}

#panel-social .online-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-social .online-level,
#panel-social .online-rebirth,
#panel-social .online-self {
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

#panel-social .online-map {
    grid-column: 2 / -1 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-social #online-pagination {
    align-items: center !important;
    flex-wrap: wrap !important;
}

#panel-social .btn-page {
    min-height: 32px !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
}

#panel-social #page-info {
    min-width: 46px !important;
    text-align: center !important;
    color: var(--q-muted) !important;
    font-weight: 800 !important;
}

#panel-social .chat-messages {
    height: 34vh !important;
    min-height: 190px !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.92), rgba(244, 252, 238, 0.92)) !important;
    box-shadow: none !important;
}

#panel-social .chat-message,
#panel-social .chat-message.public,
#panel-social .chat-message.private,
#panel-social .chat-message.system {
    margin: 0 0 7px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(230, 207, 168, 0.62) !important;
    border-left: 4px solid var(--q-green) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--q-text) !important;
    font-style: normal !important;
    word-break: break-word !important;
}

#panel-social .chat-message.private {
    border-left-color: var(--q-pink) !important;
}

#panel-social .chat-message.system {
    border-left-color: var(--q-yellow) !important;
    color: #9a6b19 !important;
}

#panel-social .chat-input-area {
    align-items: center !important;
    gap: 8px !important;
}

#panel-social .chat-input-area input {
    min-height: 42px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(230, 207, 168, 0.9) !important;
    background: #ffffff !important;
    color: var(--q-text) !important;
}

#panel-social #send-public-btn {
    min-height: 42px !important;
    padding: 8px 14px !important;
}

#panel-farm .farm-controls {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
}

#panel-farm .farm-controls .btn {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

#panel-farm .farm-plots-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px dashed rgba(184, 221, 184, 0.92) !important;
    border-radius: 20px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(232, 248, 221, 0.64)),
        repeating-linear-gradient(90deg, rgba(184, 221, 184, 0.18) 0 1px, transparent 1px 34px) !important;
}

#panel-farm .farm-plot {
    min-height: 138px !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(28px, 1fr) auto !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 5px !important;
    padding: 11px 8px !important;
    border-radius: 19px !important;
    background: linear-gradient(180deg, #fffdf7, #f4fbec) !important;
    border: 1px solid rgba(184, 221, 184, 0.95) !important;
    box-shadow: 0 8px 18px rgba(84, 128, 87, 0.1) !important;
}

#panel-farm .farm-plot.ready {
    border-color: rgba(255, 204, 82, 0.95) !important;
    background:
        radial-gradient(circle at 82% 12%, rgba(255, 217, 120, 0.4), transparent 32%),
        linear-gradient(180deg, #fffaf0, #f7ffe8) !important;
}

#panel-farm .plot-icon {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(230, 207, 168, 0.74) !important;
    font-size: 1.65rem !important;
}

.farm-art-icon {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, #ffffff, #f4fbec) !important;
}

.farm-art-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    transform: scale(1.12) !important;
}

.farm-art-icon i {
    display: none !important;
    color: var(--q-green-dark) !important;
    font-size: 1rem !important;
}

.farm-art-icon.farm-art-icon-fallback i {
    display: inline-flex !important;
}

.farm-art-icon-small {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 12px !important;
}

#panel-farm .plot-icon .farm-art-icon {
    width: 42px !important;
    height: 42px !important;
    background: transparent !important;
}

.seed-card .seed-icon .farm-art-icon {
    width: 44px !important;
    height: 44px !important;
}

#panel-farm .plot-name {
    max-width: 100% !important;
    color: var(--q-text) !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-farm .plot-timer {
    color: var(--q-muted) !important;
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

#panel-farm .plot-buttons,
#panel-farm .plot-buttons .btn {
    width: 100% !important;
}

#panel-parking .parking-container {
    padding: 0 !important;
}

#panel-parking .parking-section {
    margin-bottom: 12px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 8px 20px rgba(112, 92, 55, 0.09) !important;
}

#panel-parking .parking-section h4 {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--q-text) !important;
    font-size: 0.95rem !important;
}

#panel-parking .parking-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
}

#panel-parking .parking-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
}

#panel-parking .spots-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    gap: 10px !important;
}

#panel-parking .spot-card,
#panel-parking .current-vehicle-card,
#panel-parking .garage-vehicle-card {
    min-width: 0 !important;
    padding: 11px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: linear-gradient(180deg, #fffdf7, #f8fbef) !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.09) !important;
}

#panel-parking .spot-card.occupied {
    border-color: rgba(255, 201, 92, 0.9) !important;
}

#panel-parking .spot-card.empty {
    border-style: dashed !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

#panel-parking .spot-header,
#panel-parking .spot-vehicle,
#panel-parking .vehicle-name {
    color: var(--q-text) !important;
    font-weight: 900 !important;
}

#panel-parking .spot-actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
    gap: 6px !important;
    margin-top: 8px !important;
}

#panel-parking .empty-parking {
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(232,248,221,0.72)) !important;
    color: var(--q-muted) !important;
}

#panel-skills .skill-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 5px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: rgba(255, 250, 240, 0.72) !important;
}

#panel-skills .skill-tabs .btn {
    width: 100% !important;
    box-shadow: none !important;
}

#panel-skills .skill-tabs .btn.active {
    background: linear-gradient(180deg, var(--q-green), var(--q-green-dark)) !important;
    color: #ffffff !important;
}

#panel-skills .spellbook-page {
    background:
        linear-gradient(90deg, rgba(230, 207, 168, 0.32), transparent 1px) 50% 0 / 2px 100% no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 250, 240, 0.72)) !important;
}

#panel-skills .skills-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)) !important;
    gap: 10px !important;
    max-height: 56vh !important;
    overflow-y: auto !important;
    padding: 2px !important;
    margin: 0 !important;
}

#panel-skills .skill-item {
    min-height: 118px !important;
    padding: 11px !important;
    text-align: left !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 7px 16px rgba(112, 92, 55, 0.08) !important;
}

#panel-skills .skill-card-head {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
    margin-bottom: 7px !important;
}

#panel-skills .skill-card-title {
    min-width: 0 !important;
}

#panel-skills .skill-art-icon {
    width: 46px !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    background: linear-gradient(180deg, #ffffff, #e8f8dd) !important;
    box-shadow: 0 5px 12px rgba(84, 128, 87, 0.12) !important;
}

#panel-skills .skill-art-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    transform: scale(1.12) !important;
}

#panel-skills .skill-art-icon-large {
    width: 62px !important;
    height: 62px !important;
    border-radius: 22px !important;
}

#panel-skills .skill-name {
    margin-bottom: 2px !important;
    color: var(--q-text) !important;
    font-size: 0.9rem !important;
    line-height: 1.22 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-skills .skill-desc,
#panel-skills .skill-level,
#panel-skills .skill-mana,
#panel-skills .skill-damage {
    color: var(--q-muted) !important;
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
}

#panel-skills .skill-empty {
    grid-column: 1 / -1 !important;
    min-height: 170px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    padding: 22px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(230, 207, 168, 0.92) !important;
    background: rgba(255, 255, 255, 0.66) !important;
    color: var(--q-muted) !important;
}

#panel-skills .skill-empty-card {
    display: grid !important;
    justify-items: center !important;
    gap: 6px !important;
}

#panel-skills .skill-empty-card i {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    background: #fffaf0 !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    color: var(--q-green-dark) !important;
}

#panel-skills .skill-empty-card strong {
    color: var(--q-text) !important;
}

#panel-skills .skill-empty-card span {
    color: var(--q-muted) !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
}

@media (max-width: 720px) {
    .teahouse-layout {
        grid-template-columns: 1fr !important;
    }

    #panel-farm .farm-controls,
    #panel-parking .parking-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #panel-social .chat-messages {
        height: 30vh !important;
        min-height: 160px !important;
    }
}

@media (max-width: 420px) {
    .q-scene-intro {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        padding: 9px !important;
    }

    .q-scene-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 14px !important;
    }

    #panel-farm .farm-controls,
    #panel-parking .parking-actions {
        gap: 7px !important;
    }

    #panel-farm .farm-controls .btn,
    #panel-parking .parking-actions .btn,
    #panel-social #send-public-btn {
        font-size: 0.76rem !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    #panel-farm .farm-plots-grid,
    #panel-parking .spots-grid,
    #panel-skills .skills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #panel-social .chat-input-area {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
}

/* Phase 4: map, teahouse board, and ranking polish. */
#panel-map {
    overflow-x: hidden !important;
}

#panel-map .map-layout {
    display: grid !important;
    grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 0.8fr) !important;
    gap: 12px !important;
    align-items: start !important;
}

#panel-map .map-selector {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
    max-height: 58vh !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border: 1px dashed rgba(184, 221, 184, 0.92) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 8% 12%, rgba(125, 205, 242, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(232, 248, 221, 0.58)) !important;
}

#panel-map .map-option {
    min-width: 0 !important;
    min-height: 146px !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto !important;
    align-content: start !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 240, 0.86)) !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.08) !important;
    text-align: left !important;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}

#panel-map .map-option::before {
    content: none !important;
}

#panel-map .map-card-scene {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: linear-gradient(180deg, #dff3ff, #e8f8dd) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.68) !important;
}

#panel-map .map-card-scene img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

#panel-map .map-card-icon {
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background:
        radial-gradient(circle at 68% 26%, rgba(255,255,255,0.95) 0 5px, transparent 6px),
        linear-gradient(180deg, #dff3ff, #e8f8dd) !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    box-shadow: 0 4px 10px rgba(84, 128, 87, 0.11) !important;
    font-size: 1rem !important;
}

#panel-map .map-option:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(113, 201, 107, 0.9) !important;
}

#panel-map .map-option.selected {
    border: 2px solid var(--q-green) !important;
    background:
        radial-gradient(circle at 88% 16%, rgba(255, 217, 120, 0.42), transparent 26%),
        linear-gradient(180deg, #ffffff, #effbe8) !important;
    box-shadow: 0 10px 22px rgba(84, 128, 87, 0.16) !important;
}

#panel-map .map-name {
    max-width: 100% !important;
    color: var(--q-text) !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-map .map-desc,
#panel-map .map-online-count {
    color: var(--q-muted) !important;
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
}

#panel-map .boss-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    margin-left: 5px !important;
    border-radius: 50% !important;
    background: #fff3cf !important;
    color: #f26d6d !important;
    font-size: 0.78rem !important;
}

#panel-map .map-info {
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.66) !important;
    box-shadow: 0 8px 20px rgba(112, 92, 55, 0.09) !important;
}

#panel-map .map-current-scene {
    position: relative !important;
    min-height: 118px !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: #eef8ff !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.08) !important;
}

#panel-map .map-current-scene img {
    width: 100% !important;
    height: 132px !important;
    display: block !important;
    object-fit: cover !important;
}

#panel-map .map-current-scene-caption {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: var(--q-text) !important;
    box-shadow: 0 5px 12px rgba(112, 92, 55, 0.12) !important;
}

#panel-map .map-current-scene-caption span {
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

#panel-map .map-current-scene-caption strong {
    min-width: 0 !important;
    color: var(--q-green-dark) !important;
    font-size: 0.86rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-map .world-boss-location,
#panel-map .last-boss-kill-info {
    display: grid !important;
    gap: 4px !important;
    margin: 0 0 9px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 207, 168, 0.76) !important;
    background: linear-gradient(180deg, #fffaf0, #fffdf7) !important;
    color: var(--q-text) !important;
    box-shadow: none !important;
}

#panel-map #world-boss-location,
#panel-map #last-boss-kill-detail,
#panel-map #world-boss-countdown {
    color: var(--q-text) !important;
    overflow-wrap: anywhere !important;
}

#panel-map #world-boss-countdown {
    margin-left: 0 !important;
    color: #c8801f !important;
    font-weight: 800 !important;
}

#panel-map .world-boss-bottom-entry {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 12px 0 76px !important;
    padding: 10px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(230, 207, 168, 0.86) !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 218, 109, 0.34), transparent 28%),
        linear-gradient(180deg, #fffaf0, #fffdf7) !important;
    box-shadow: 0 10px 22px rgba(112, 92, 55, 0.12) !important;
}

#panel-map .world-boss-bottom-entry.has-boss {
    border-color: rgba(255, 180, 84, 0.95) !important;
    box-shadow: 0 12px 24px rgba(221, 142, 54, 0.18) !important;
}

#panel-map .world-boss-bottom-entry .world-boss-location,
#panel-map .world-boss-bottom-entry .last-boss-kill-info {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

#panel-map .boss-entry-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
}

#panel-map #world-boss-location,
#panel-map #last-boss-kill-detail {
    display: grid !important;
    gap: 1px !important;
    color: var(--q-text) !important;
    font-size: 0.78rem !important;
    line-height: 1.22 !important;
    font-style: normal !important;
}

#panel-map #world-boss-location em {
    color: #d98232 !important;
    font-size: 0.82rem !important;
    font-style: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-map #world-boss-countdown {
    display: block !important;
    min-height: 16px !important;
    font-size: 0.7rem !important;
}

#panel-map .boss-go-btn {
    width: 100% !important;
    min-height: 30px !important;
    margin-top: 4px !important;
    border: 1px solid rgba(111, 196, 105, 0.56) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #5fcf6d, #43b95b) !important;
    color: #ffffff !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
    box-shadow: 0 6px 12px rgba(67, 185, 91, 0.22) !important;
}

#panel-map .boss-go-btn:disabled {
    background: #f6f8ef !important;
    color: var(--q-muted) !important;
    box-shadow: none !important;
}

#panel-combat .world-boss-bottom-entry {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 10px 0 78px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.86) !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 218, 109, 0.28), transparent 28%),
        linear-gradient(180deg, #fffaf0, #fffdf7) !important;
    box-shadow: 0 10px 22px rgba(112, 92, 55, 0.12) !important;
}

#panel-combat .world-boss-bottom-entry.has-boss {
    border-color: rgba(226, 158, 76, 0.86) !important;
    box-shadow: 0 12px 22px rgba(210, 132, 54, 0.16) !important;
}

#panel-combat .world-boss-location,
#panel-combat .world-boss-rank-card {
    min-width: 0 !important;
    display: grid !important;
    gap: 6px !important;
    padding: 9px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(230, 207, 168, 0.66) !important;
    background: rgba(255, 255, 255, 0.74) !important;
}

#panel-combat .boss-entry-label,
#panel-combat .boss-rank-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
}

#panel-combat #world-boss-location {
    display: grid !important;
    gap: 1px !important;
    color: var(--q-text) !important;
    font-size: 0.78rem !important;
    line-height: 1.22 !important;
}

#panel-combat #world-boss-location em {
    color: #d98232 !important;
    font-size: 0.82rem !important;
    font-style: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-combat #world-boss-countdown {
    min-height: 16px !important;
    color: #c8801f !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
}

#panel-combat .boss-entry-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
}

#panel-combat .boss-register-btn,
#panel-combat .boss-go-btn {
    width: 100% !important;
    min-height: 30px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
}

#panel-combat .boss-register-btn {
    border: 1px solid rgba(238, 183, 81, 0.74) !important;
    background: linear-gradient(180deg, #ffd775, #f2b84d) !important;
    color: #6f4a17 !important;
}

#panel-combat .boss-go-btn {
    border: 1px solid rgba(111, 196, 105, 0.56) !important;
    background: linear-gradient(180deg, #5fcf6d, #43b95b) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 12px rgba(67, 185, 91, 0.18) !important;
}

#panel-combat .boss-register-btn:disabled,
#panel-combat .boss-go-btn:disabled {
    background: #f6f8ef !important;
    color: var(--q-muted) !important;
    border-color: rgba(199, 219, 190, 0.76) !important;
    box-shadow: none !important;
}

#panel-combat .world-boss-rank-list {
    display: grid !important;
    gap: 4px !important;
    max-height: 326px !important;
    overflow-y: auto !important;
}

#panel-combat .boss-rank-row {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 28px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    background: rgba(247, 252, 241, 0.9) !important;
    color: var(--q-text) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
}

#panel-combat .boss-rank-row.is-me {
    background: rgba(219, 248, 217, 0.96) !important;
    outline: 1px solid rgba(93, 193, 101, 0.45) !important;
}

#panel-combat .boss-rank-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-combat .boss-rank-empty {
    padding: 22px 8px !important;
    color: var(--q-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-align: center !important;
}

#panel-map .map-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#panel-map .map-detail-grid .stats-row {
    min-width: 0 !important;
    min-height: 54px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

#panel-map .map-detail-grid .map-monsters-row {
    grid-column: 1 / -1 !important;
}

#panel-map .map-detail-grid .stats-value {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

#panel-map .map-buttons {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: 12px !important;
}

#panel-map #teleport-btn {
    min-height: 46px !important;
    background: linear-gradient(180deg, var(--q-green), var(--q-green-dark)) !important;
    color: #ffffff !important;
}

#panel-social #chat-tab-bar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 0 0 8px !important;
    padding: 5px !important;
    border: 1px solid rgba(230, 207, 168, 0.76) !important;
    border-radius: 16px !important;
    background: rgba(255, 250, 240, 0.78) !important;
}

#panel-social #chat-tab-bar .tab {
    min-width: 0 !important;
    padding: 8px 5px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--q-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#panel-social #chat-tab-bar .tab.active {
    background: linear-gradient(180deg, #e8f8dd, #ffffff) !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    color: var(--q-green-dark) !important;
    box-shadow: 0 4px 10px rgba(84, 128, 87, 0.09) !important;
}

#panel-social .board-container,
#panel-social .rankings-container {
    margin: 0 !important;
}

#panel-social .board-messages,
#panel-social .rankings-list {
    min-height: 180px !important;
    max-height: 34vh !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 9px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.92), rgba(244, 252, 238, 0.92)) !important;
    box-shadow: none !important;
}

#panel-social .board-item,
#panel-social .rankings-item {
    min-width: 0 !important;
    margin: 0 0 8px !important;
    padding: 8px 9px !important;
    border: 1px solid rgba(230, 207, 168, 0.66) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 4px 10px rgba(112, 92, 55, 0.06) !important;
}

#panel-social .board-item {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 4px 8px !important;
}

#panel-social .board-sender,
#panel-social .rankings-name {
    min-width: 0 !important;
    color: var(--q-text) !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-social .board-time {
    color: var(--q-muted) !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
}

#panel-social .board-content {
    grid-column: 2 / -1 !important;
    color: var(--q-text) !important;
    line-height: 1.42 !important;
    overflow-wrap: anywhere !important;
}

#panel-social .board-empty,
#panel-social .rankings-empty {
    min-height: 132px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--q-muted) !important;
    font-size: 0.86rem !important;
}

#panel-social .board-input-area {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

#panel-social .board-input-area input {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 9px 11px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(230, 207, 168, 0.9) !important;
    background: #ffffff !important;
    color: var(--q-text) !important;
}

#panel-social .board-input-area button {
    min-height: 42px !important;
    padding: 8px 14px !important;
}

#panel-social .rankings-item {
    display: grid !important;
    grid-template-columns: 28px 34px 18px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
}

#panel-social .rankings-rank {
    width: auto !important;
    margin: 0 !important;
    color: var(--q-green-dark) !important;
    font-weight: 900 !important;
}

#panel-social .rankings-level,
#panel-social .rankings-points {
    grid-column: 4 / -1 !important;
    color: var(--q-muted) !important;
    font-size: 0.74rem !important;
    white-space: nowrap !important;
}

#panel-social .rankings-points {
    color: var(--q-green-dark) !important;
}

#panel-social .rankings-crown {
    width: 18px !important;
    min-width: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.76rem !important;
}

#panel-social .rankings-crown-gold {
    color: #f4b63d !important;
}

#panel-social .rankings-crown-silver {
    color: #a9b1b8 !important;
}

#panel-social .rankings-crown-bronze {
    color: #c68145 !important;
}

#panel-social .rankings-update-time {
    padding: 7px 2px 0 !important;
    color: var(--q-muted) !important;
    font-size: 0.74rem !important;
    text-align: right !important;
}

@media (max-width: 720px) {
    #panel-map .map-layout {
        grid-template-columns: 1fr !important;
    }

    #panel-map .map-selector {
        max-height: none !important;
    }
}

@media (max-width: 420px) {
    #panel-map .map-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    #panel-map .map-option {
        min-height: 128px !important;
        padding: 7px !important;
    }

    #panel-map .map-name {
        font-size: 0.8rem !important;
    }

    #panel-map .map-desc,
    #panel-map .map-online-count {
        font-size: 0.68rem !important;
    }

    #panel-map .map-detail-grid {
        grid-template-columns: 1fr !important;
    }

    #panel-social .online-item {
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        gap: 6px !important;
    }

    #panel-social .online-rebirth {
        grid-column: 3 !important;
    }

    #panel-social .rankings-item {
        grid-template-columns: 24px 32px 16px minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    #panel-social .rankings-level,
    #panel-social .rankings-points {
        grid-column: 4 / -1 !important;
    }
}

/* Phase 4: shop, market, and workshop modal polish. */
#pharmacy-modal .modal-content,
#seed-shop-modal .modal-content,
#seed-storage-modal .modal-content,
#tool-shop-modal .modal-content,
#refine-modal .modal-content,
#auction-modal .modal-content,
#auction-add-modal .modal-content,
#auction-select-item-modal .modal-content,
#bid-history-modal .modal-content,
#auction-bid-history-modal .modal-content,
#auction-item-detail-modal .modal-content,
#strength-merchant-modal .modal-content,
#enhance-modal .modal-content {
    max-width: min(720px, calc(100vw - 24px)) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(230, 207, 168, 0.9) !important;
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 217, 120, 0.26), transparent 26%),
        linear-gradient(180deg, #fffdf7, #f4fbec) !important;
    color: var(--q-text) !important;
    box-shadow: 0 20px 44px rgba(78, 64, 38, 0.2) !important;
}

#pharmacy-modal .modal-header,
#seed-shop-modal .modal-header,
#seed-storage-modal .modal-header,
#tool-shop-modal .modal-header,
#refine-modal .modal-header,
#auction-modal .modal-header,
#auction-add-modal .modal-header,
#auction-select-item-modal .modal-header,
#bid-history-modal .modal-header,
#auction-bid-history-modal .modal-header,
#auction-item-detail-modal .modal-header,
#strength-merchant-modal .modal-header,
#enhance-modal .modal-header {
    color: var(--q-text) !important;
    border-bottom: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: rgba(255, 250, 240, 0.64) !important;
}

#pharmacy-modal .modal-body,
#seed-shop-modal .modal-body,
#seed-storage-modal .modal-body,
#tool-shop-list,
#refine-list,
#auction-modal .modal-body,
#auction-add-modal .modal-body,
#auction-select-item-modal .modal-body,
#bid-history-modal .modal-body,
#auction-bid-history-modal .modal-body,
#auction-item-detail-body,
#enhance-details {
    color: var(--q-text) !important;
}

.pharmacy-grid,
.refine-grid,
#seed-shop-list,
#seed-storage-list,
#tool-shop-list,
#strength-equip-list,
#strength-zodiac-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 10px !important;
    margin: 8px 0 !important;
}

.pharmacy-card,
.seed-card,
.refine-card,
.strength-equip-card,
.strength-zodiac-card,
.shop-item,
.auction-item,
.zodiac-card {
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    color: var(--q-text) !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.08) !important;
}

.pharmacy-card:hover,
.seed-card:hover,
.refine-card:hover,
.strength-equip-card:hover,
.strength-zodiac-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(113, 201, 107, 0.92) !important;
    background: #ffffff !important;
}

.seed-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
}

.seed-icon {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    background: #fffaf0 !important;
    border: 1px solid rgba(230, 207, 168, 0.76) !important;
    font-size: 1.55rem !important;
}

.seed-info {
    min-width: 0 !important;
}

.seed-name,
.potion-name,
.vehicle-name,
.zodiac-name {
    color: var(--q-text) !important;
    font-weight: 900 !important;
}

.seed-desc,
.potion-total,
.potion-quantity label,
.enhance-cost-placeholder,
.attr-strength-row,
.seed-storage-empty {
    color: var(--q-muted) !important;
}

.seed-price,
.potion-price,
.total-price {
    color: #c8801f !important;
    font-weight: 800 !important;
}

.potion-recovery {
    color: var(--q-green-dark) !important;
}

.potion-qty,
.seed-card input,
#auction-modal input,
#auction-modal select,
#auction-add-modal input,
#auction-add-modal select,
#auction-keyword,
#auction-quality-filter,
#auction-duration,
#auction-starting-price,
#auction-buyout-price,
#auction-min-increment {
    min-height: 34px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(230, 207, 168, 0.9) !important;
    background: #ffffff !important;
    color: var(--q-text) !important;
    padding: 6px 8px !important;
}

.pharmacy-card .btn,
.seed-card .btn,
.refine-card .btn,
.strength-equip-card .btn,
.strength-zodiac-card .btn {
    width: 100% !important;
}

#refine-list .refine-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

#refine-list .refine-card,
#refine-list .refine-card * {
    color: var(--q-text);
}

#refine-list .refine-card > div {
    min-width: 0 !important;
}

.strength-tabs,
.auction-tabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    padding: 5px !important;
    border: 1px solid rgba(230, 207, 168, 0.76) !important;
    border-radius: 16px !important;
    background: rgba(255, 250, 240, 0.78) !important;
}

.strength-tabs .tab-btn,
.auction-tabs .tab-btn {
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
}

#add-auction-btn {
    margin-left: 0 !important;
}

.strength-tabs .tab-btn.active,
.auction-tabs .tab-btn.active {
    background: linear-gradient(180deg, var(--q-green), var(--q-green-dark)) !important;
    color: #ffffff !important;
}

.attr-strength-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    gap: 7px !important;
    align-items: center !important;
    padding: 9px !important;
    margin-bottom: 8px !important;
    border: 1px solid rgba(230, 207, 168, 0.76) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

.attr-strength-row .attr-name,
.attr-strength-row .attr-level,
.attr-strength-row .attr-cost {
    min-width: 0 !important;
}

.strength-merchant-content {
    width: min(720px, calc(100vw - 24px)) !important;
}

#strength-merchant-modal .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.strength-panel-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 6px 0 10px !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(230, 207, 168, 0.76) !important;
    border-radius: 16px !important;
    background: rgba(255, 253, 247, 0.82) !important;
}

.strength-panel-title strong {
    color: var(--q-text) !important;
    font-size: 0.95rem !important;
}

.strength-panel-title span {
    color: var(--q-muted) !important;
    font-size: 0.78rem !important;
    text-align: right !important;
}

.strength-protect-card {
    margin: 0 0 10px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(113, 201, 107, 0.45) !important;
    border-radius: 16px !important;
    background: rgba(237, 255, 232, 0.74) !important;
}

.strength-protect-card label {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px 9px !important;
    cursor: pointer !important;
    color: var(--q-text) !important;
}

.strength-protect-card input {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--q-green) !important;
}

.strength-protect-card span,
.strength-protect-card b {
    font-size: 0.82rem !important;
}

.strength-protect-card span {
    font-weight: 900 !important;
}

.strength-protect-card b {
    color: var(--q-green-dark) !important;
}

.strength-protect-card em {
    grid-column: 2 / -1 !important;
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
    font-style: normal !important;
}

.strength-equip-card,
.strength-zodiac-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) minmax(70px, auto) !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

.strength-equip-card .equip-icon,
.strength-zodiac-card .zodiac-icon {
    width: 48px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: linear-gradient(180deg, #fffdf8, #eefbe8) !important;
    color: var(--q-green-dark) !important;
    font-size: 1.45rem !important;
    overflow: hidden !important;
}

.strength-equip-card .equip-icon .item-emoji {
    font-size: 24px !important;
}

.strength-equip-card .equip-info,
.strength-zodiac-card .zodiac-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

.strength-equip-card .equip-info strong,
.strength-zodiac-card .zodiac-info strong {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    line-height: 1.15 !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
}

.strength-equip-card .equip-info span,
.strength-zodiac-card .zodiac-info span {
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
}

.strength-card-cost {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

.strength-card-cost span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 249, 226, 0.95) !important;
    color: #9b6a22 !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
}

.strength-equip-card .btn,
.strength-zodiac-card .btn {
    width: 64px !important;
    min-width: 64px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    justify-self: end !important;
    align-self: center !important;
}

/* Imagegen capsule skin based on the supplied navigation-button reference. */
.strength-tabs .tab-btn,
.strength-equip-card .strength-equip-btn,
.strength-zodiac-card .strength-zodiac-btn {
    min-height: 36px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: transparent !important;
    background-image: url('../images/generated/smithy_capsule.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    color: #356540 !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.95) !important;
    box-shadow: none !important;
}

.strength-equip-card .strength-equip-btn,
.strength-zodiac-card .strength-zodiac-btn {
    background-image: url('../images/generated/smithy_polish_btn_v2.png') !important;
    font-size: 0.82rem !important;
    line-height: 30px !important;
}

.strength-equip-card .strength-equip-btn .fa-hammer,
.strength-zodiac-card .strength-zodiac-btn .fa-hammer {
    display: none !important;
}

.strength-tabs .tab-btn:hover,
.strength-equip-card .strength-equip-btn:hover,
.strength-zodiac-card .strength-zodiac-btn:hover {
    filter: brightness(1.06) saturate(1.08) !important;
    transform: translateY(-1px) !important;
}

.strength-tabs .tab-btn.active {
    color: #fff9d7 !important;
    text-shadow: 0 1px 2px rgba(28,88,38,.9) !important;
    filter: saturate(1.35) brightness(.86) hue-rotate(8deg) !important;
}

.strength-equip-card,
.strength-zodiac-card {
    cursor: default !important;
}

.strength-empty {
    grid-column: 1 / -1 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 5px !important;
    padding: 18px 12px !important;
    border: 1px dashed rgba(230, 207, 168, 0.88) !important;
    border-radius: 18px !important;
    background: rgba(255, 253, 247, 0.72) !important;
    color: var(--q-muted) !important;
    text-align: center !important;
}

.strength-empty i {
    color: var(--q-green) !important;
    font-size: 1.5rem !important;
}

.strength-empty strong {
    color: var(--q-text) !important;
}

#auction-filter-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.55fr) auto !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    align-items: center !important;
}

#auction-status-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    color: var(--q-muted) !important;
}

#auction-table-container {
    overflow-x: hidden !important;
    min-height: 240px !important;
    padding: 8px !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

.market-art-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: linear-gradient(180deg, #fffdf7, #f1fae8) !important;
    box-shadow: 0 5px 12px rgba(112, 92, 55, 0.09) !important;
}

.market-art-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

.market-art-icon i {
    display: none !important;
    color: var(--q-green) !important;
}

.market-art-icon.market-art-icon-fallback i {
    display: inline-flex !important;
}

.market-art-icon-large {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    border-radius: 21px !important;
}

.market-art-icon-tiny {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 11px !important;
}

.auction-loading-state,
.auction-empty-state {
    min-height: 190px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 22px !important;
    text-align: center !important;
    color: var(--q-muted) !important;
}

.auction-empty-state strong {
    color: var(--q-text) !important;
    font-size: 1rem !important;
}

.auction-error-state strong {
    color: #d65f5f !important;
}

.auction-card-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 9px !important;
}

.auction-view-hint {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--q-text) !important;
    font-weight: 900 !important;
}

.auction-view-hint span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.auction-sort-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 5px !important;
}

.auction-sort-chip {
    min-height: 30px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    background: #ffffff !important;
    color: var(--q-green-dark) !important;
    font-weight: 900 !important;
    font-size: 0.72rem !important;
}

.auction-sort-chip.active {
    background: linear-gradient(180deg, #e8f8dd, #ffffff) !important;
    border-color: rgba(113, 201, 107, 0.92) !important;
    box-shadow: 0 4px 10px rgba(84, 128, 87, 0.1) !important;
}

.auction-card-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 10px !important;
}

.auction-card {
    min-width: 0 !important;
    display: grid !important;
    gap: 9px !important;
    padding: 11px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.08) !important;
    cursor: pointer !important;
}

.auction-card:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(113, 201, 107, 0.92) !important;
    background: #ffffff !important;
}

.auction-card-main {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
}

.auction-item-icon {
    width: 46px !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: linear-gradient(180deg, #fffaf0, #ffffff) !important;
    color: var(--q-green-dark) !important;
    font-size: 1.35rem !important;
}

.auction-card-title {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
}

.auction-card-title strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 900 !important;
}

.auction-quality-pill {
    width: auto !important;
    justify-self: start !important;
    display: inline-block !important;
    max-width: 100% !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(230, 207, 168, 0.86) !important;
    background: #fffaf0 !important;
    color: var(--quality-color) !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
}

.auction-card-meta {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
}

.auction-card-meta span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.auction-price-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
    gap: 6px !important;
}

.auction-price-grid div {
    min-width: 0 !important;
    padding: 7px 8px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(230, 207, 168, 0.72) !important;
    background: rgba(255, 250, 240, 0.72) !important;
}

.auction-price-grid label {
    display: block !important;
    color: var(--q-muted) !important;
    font-size: 0.68rem !important;
}

.auction-price-grid b {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #c8801f !important;
    font-size: 0.82rem !important;
}

.auction-card-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.auction-card-actions .btn {
    flex: 1 1 72px !important;
    min-height: 34px !important;
}

.auction-owner-badge,
.auction-sold-badge {
    width: 100% !important;
    display: inline-flex !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    background: #fff4d8 !important;
    color: #b77a21 !important;
    font-weight: 900 !important;
}

.auction-sold-badge {
    background: #e8f8dd !important;
    color: var(--q-green-dark) !important;
}

#select-item-list {
    display: grid !important;
    gap: 8px !important;
    padding-right: 2px !important;
}

.market-select-item {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 10px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 6px 14px rgba(112, 92, 55, 0.07) !important;
    cursor: pointer !important;
}

.market-select-item:hover {
    border-color: rgba(113, 201, 107, 0.92) !important;
    background: #ffffff !important;
}

.market-select-icon,
.sell-item-preview-icon {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 15px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: #fffaf0 !important;
    color: var(--q-green-dark) !important;
    font-size: 1.35rem !important;
}

.market-select-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

.market-select-info strong,
.sell-item-preview strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 900 !important;
}

.market-select-info span,
.sell-item-preview span {
    color: var(--q-muted) !important;
    font-size: 0.74rem !important;
}

.sell-item-preview {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
    background: rgba(255, 250, 240, 0.72) !important;
}

.sell-item-preview > div:last-child {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

.bid-history-list {
    display: grid !important;
    gap: 8px !important;
}

.bid-history-card {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(230, 207, 168, 0.76) !important;
    background: rgba(255, 255, 255, 0.82) !important;
}

.bid-history-card > div {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
}

.bid-history-card strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--q-text) !important;
}

.bid-history-card span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--q-muted) !important;
    font-size: 0.7rem !important;
}

.bid-history-card b {
    color: #c8801f !important;
    font-size: 0.86rem !important;
}

#craft-modal .modal-content {
    max-width: min(760px, calc(100vw - 24px)) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(230, 207, 168, 0.9) !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 217, 120, 0.26), transparent 27%),
        linear-gradient(180deg, #fffdf7, #f4fbec) !important;
    color: var(--q-text) !important;
    box-shadow: 0 20px 44px rgba(78, 64, 38, 0.2) !important;
}

#craft-modal .modal-header {
    min-height: 48px !important;
    color: var(--q-text) !important;
    border-bottom: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: rgba(255, 250, 240, 0.64) !important;
    font-weight: 900 !important;
}

#craft-content {
    max-height: 58vh !important;
    padding: 8px !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
    background: rgba(255, 255, 255, 0.56) !important;
}

.craft-point-toggle,
.craft-note,
.craft-rules-card {
    margin-bottom: 10px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: rgba(255, 250, 240, 0.78) !important;
    color: var(--q-text) !important;
}

.craft-point-toggle label {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

.craft-point-toggle input {
    width: 18px !important;
    height: 18px !important;
}

.craft-point-toggle span,
.craft-note span {
    min-width: 0 !important;
    color: var(--q-text) !important;
    font-weight: 900 !important;
}

.craft-point-toggle b {
    color: var(--q-green-dark) !important;
    white-space: nowrap !important;
}

.craft-rules-card {
    display: grid !important;
    gap: 5px !important;
    background: linear-gradient(180deg, rgba(255, 252, 241, 0.94), rgba(247, 255, 239, 0.86)) !important;
}

.craft-rules-card strong {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--q-text) !important;
    font-size: 0.88rem !important;
    font-weight: 900 !important;
}

.craft-rules-card span {
    color: var(--q-muted) !important;
    font-size: 0.74rem !important;
    line-height: 1.45 !important;
}

.craft-point-toggle em {
    color: var(--q-muted) !important;
    font-style: normal !important;
    white-space: nowrap !important;
}

#craft-current-points {
    color: #c8801f !important;
    font-weight: 900 !important;
}

.craft-local-notice {
    display: none !important;
    margin: 0 0 10px !important;
    padding: 9px 11px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(230, 207, 168, 0.86) !important;
    background: rgba(255, 250, 240, 0.95) !important;
    color: var(--q-text) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
}

.craft-local-notice.active {
    display: block !important;
}

.craft-local-notice.error {
    border-color: rgba(230, 112, 96, 0.45) !important;
    background: rgba(255, 244, 240, 0.96) !important;
    color: #b44b35 !important;
}

.craft-local-notice.success {
    border-color: rgba(83, 193, 103, 0.45) !important;
    background: rgba(239, 255, 239, 0.96) !important;
    color: var(--q-green-dark) !important;
}

.craft-card-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 10px !important;
}

.craft-card {
    min-width: 0 !important;
    display: grid !important;
    gap: 9px !important;
    padding: 11px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: var(--q-text) !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.08) !important;
}

.craft-card-main {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
}

.craft-card-icon {
    width: 46px !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: linear-gradient(180deg, #fffaf0, #ffffff) !important;
    color: var(--q-green-dark) !important;
    font-size: 1.32rem !important;
}

.craft-card-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
}

.craft-card-info strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 900 !important;
}

.craft-card-info span,
.craft-note {
    color: var(--q-muted) !important;
    font-size: 0.78rem !important;
}

.craft-card-meta {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important;
    gap: 6px !important;
}

.craft-card-meta div {
    min-width: 0 !important;
    padding: 7px 8px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(230, 207, 168, 0.72) !important;
    background: rgba(255, 250, 240, 0.72) !important;
}

.craft-card-meta label {
    display: block !important;
    color: var(--q-muted) !important;
    font-size: 0.68rem !important;
}

.craft-card-meta b {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #c8801f !important;
    font-size: 0.82rem !important;
}

.craft-material-picker {
    display: grid !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    border: 1px dashed rgba(131, 188, 132, 0.55) !important;
    background: rgba(247, 255, 239, 0.62) !important;
}

.craft-material-picker > span {
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
}

.craft-material-picker > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.craft-material-chip {
    min-width: 88px !important;
    min-height: 28px !important;
    padding: 4px 10px 4px 28px !important;
    border: 1px solid var(--item-quality-color, rgba(230, 207, 168, 0.86)) !important;
    border-radius: 999px !important;
    background: #fffdf7 !important;
    color: var(--q-text) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    position: relative !important;
    overflow: hidden !important;
}

.craft-material-chip::before {
    content: attr(data-quality-short) !important;
    position: absolute !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: var(--item-quality-color, #d8bd7a) !important;
    color: #fffaf1 !important;
    font-size: 0.56rem !important;
    line-height: 1 !important;
    box-shadow: 0 2px 5px rgba(95, 69, 28, 0.16) !important;
}

.craft-material-chip.item-quality-normal::before {
    color: #7c6a41 !important;
    background: #fff1ca !important;
    border: 1px solid #e7cf91 !important;
}

.craft-material-chip.selected {
    border-color: var(--item-quality-color, rgba(83, 193, 103, 0.95)) !important;
    background: linear-gradient(180deg, #f0fff1, #dff8df) !important;
    color: var(--q-green-dark) !important;
    box-shadow:
        0 0 0 2px rgba(83, 193, 103, 0.18),
        inset 0 -3px 0 var(--item-quality-color, rgba(83, 193, 103, 0.95)) !important;
}

.craft-card-actions {
    display: flex !important;
    gap: 6px !important;
}

.craft-card-actions .btn {
    flex: 1 1 auto !important;
    min-height: 36px !important;
}

.craft-empty {
    min-height: 170px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 22px !important;
    text-align: center !important;
    color: var(--q-muted) !important;
}

.craft-empty i {
    width: 58px !important;
    height: 58px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: #fffaf0 !important;
    color: var(--q-green-dark) !important;
    font-size: 1.5rem !important;
}

.craft-empty strong {
    color: var(--q-text) !important;
}

.craft-progress-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: rgba(61, 52, 36, 0.38) !important;
    backdrop-filter: blur(4px) !important;
}

.craft-progress-box {
    width: min(320px, calc(100vw - 36px)) !important;
    padding: 18px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(230, 207, 168, 0.92) !important;
    background: linear-gradient(180deg, #fffdf7, #f4fbec) !important;
    text-align: center !important;
    box-shadow: 0 20px 44px rgba(78, 64, 38, 0.2) !important;
}

.craft-progress-title {
    margin-bottom: 14px !important;
    color: var(--q-text) !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
}

.craft-progress-track {
    position: relative !important;
    height: 22px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    background: #ffffff !important;
    box-shadow: inset 0 1px 4px rgba(84, 128, 87, 0.12) !important;
}

#craft-progress-fill {
    position: absolute !important;
    inset: 3px auto 3px 3px !important;
    width: 42% !important;
    height: 100% !important;
    border-radius: 999px !important;
    background:
        linear-gradient(90deg, rgba(121, 213, 110, 0), rgba(121, 213, 110, 0.96), rgba(255, 217, 111, 0.96), rgba(121, 213, 110, 0)) !important;
    box-shadow: 0 0 10px rgba(121, 213, 110, 0.35) !important;
    animation: craftProgressMarquee 1.05s linear infinite !important;
    transition: none !important;
}

@keyframes craftProgressMarquee {
    0% {
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(250%);
    }
}

.craft-progress-subtitle {
    margin-top: 10px !important;
    color: var(--q-muted) !important;
    font-size: 0.78rem !important;
}

.auction-table {
    min-width: 620px !important;
    color: var(--q-text) !important;
}

.auction-table th,
.auction-table td {
    padding: 8px !important;
    border-bottom: 1px solid rgba(230, 207, 168, 0.62) !important;
    color: var(--q-text) !important;
}

.auction-row {
    background: rgba(255, 255, 255, 0.72) !important;
}

.auction-row:hover {
    background: #ffffff !important;
}

.auction-pagination {
    flex-wrap: wrap !important;
    align-items: center !important;
}

#auction-page-info {
    min-width: 56px !important;
    text-align: center !important;
    color: var(--q-muted) !important;
    font-weight: 800 !important;
}

#auction-deposit-info {
    color: #c8801f !important;
}

@media (max-width: 520px) {
    .pharmacy-grid,
    .refine-grid,
    #seed-shop-list,
    #seed-storage-list,
    #tool-shop-list,
    #strength-equip-list,
    #strength-zodiac-list {
        grid-template-columns: 1fr !important;
    }

    .seed-card {
        grid-template-columns: 44px minmax(0, 1fr) !important;
    }

    .seed-card > div:last-child {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: minmax(74px, 0.4fr) minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    #auction-filter-bar {
        grid-template-columns: 1fr !important;
    }

    .auction-card-toolbar {
        grid-template-columns: 1fr !important;
    }

    .auction-sort-chips {
        justify-content: flex-start !important;
    }

    .auction-card-list {
        grid-template-columns: 1fr !important;
    }

    .auction-card-meta {
        grid-template-columns: 1fr 1fr !important;
    }

    .auction-card-meta span:first-child {
        grid-column: 1 / -1 !important;
    }

    .craft-point-toggle label {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .craft-point-toggle b,
    .craft-point-toggle em {
        grid-column: 2 / -1 !important;
        white-space: normal !important;
    }

    .craft-card-list {
        grid-template-columns: 1fr !important;
    }

    .strength-panel-title {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .strength-panel-title span {
        text-align: left !important;
    }

    .strength-protect-card label {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .strength-protect-card b,
    .strength-protect-card em {
        grid-column: 2 / -1 !important;
    }

    .strength-equip-card,
    .strength-zodiac-card {
        grid-template-columns: 48px minmax(0, 1fr) !important;
    }

    .strength-equip-card .btn,
    .strength-zodiac-card .btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .attr-strength-row {
        grid-template-columns: 1fr 1fr !important;
    }

    .attr-strength-row .btn {
        grid-column: 1 / -1 !important;
    }
}

/* Final leaderboard v2 overrides: status layout and generated title images win over older patches. */
#panel-status .player-core-card {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
}

#panel-status .player-core-avatar-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

#panel-status .player-core-main {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-width: 0 !important;
}

#panel-status .player-core-mini-stats,
body[data-active-panel="combat"] #panel-status .player-core-mini-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#panel-status .status-leaderboard-btn,
body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    min-height: 31px !important;
    height: 31px !important;
    margin-top: 7px !important;
    padding: 0 5px !important;
    border-radius: 8px !important;
    gap: 3px !important;
    font-size: 0.7rem !important;
}

#panel-status .status-leaderboard-btn span,
body[data-active-panel="combat"] #panel-status .status-leaderboard-btn span {
    display: inline !important;
    font-size: 0.66rem !important;
}

#panel-status .player-core-title {
    display: grid !important;
    grid-template-columns: minmax(68px, 94px) minmax(0, 1fr) auto !important;
    gap: 5px !important;
    align-items: center !important;
}

.rank-title-badge.image-rank-title {
    position: relative !important;
    width: var(--badge-w, 132px) !important;
    min-width: var(--badge-w, 132px) !important;
    max-width: var(--badge-w, 132px) !important;
    height: var(--badge-h, 38px) !important;
    min-height: var(--badge-h, 38px) !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: var(--badge-bg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    overflow: visible !important;
    color: #5a3816 !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82), 0 0 3px rgba(255, 239, 177, 0.65) !important;
}

.rank-title-badge.image-rank-title::before {
    display: none !important;
}

.rank-title-badge.image-rank-title > span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.player-selected-rank-title {
    --badge-w: 94px !important;
    --badge-h: 28px !important;
    padding: 0 13px !important;
    font-size: 0.54rem !important;
}

.chat-title-stack .image-rank-title {
    --badge-w: 122px !important;
    --badge-h: 32px !important;
    padding: 0 15px !important;
    font-size: 0.58rem !important;
    vertical-align: middle !important;
}

.status-rank-title {
    --badge-w: 130px !important;
    --badge-h: 34px !important;
    padding: 0 16px !important;
    font-size: 0.6rem !important;
}

.status-leaderboard-row {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-areas:
        "rank main"
        "rank value" !important;
    gap: 3px 8px !important;
    min-height: 58px !important;
}

.status-rank-no {
    grid-area: rank !important;
    align-self: center !important;
}

.status-rank-main {
    grid-area: main !important;
    min-width: 0 !important;
    justify-content: space-between !important;
}

.status-rank-value {
    grid-area: value !important;
    justify-self: start !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: left !important;
    line-height: 1.15 !important;
}

@media (max-width: 420px) {
    #panel-status .player-core-card {
        grid-template-columns: 64px minmax(0, 1fr) !important;
    }

    #panel-status .status-leaderboard-btn,
    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }

    #panel-status .player-core-title {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .player-selected-rank-title {
        --badge-w: 76px !important;
        --badge-h: 24px !important;
        font-size: 0.48rem !important;
    }
}

/* EOF final leaderboard/status repair v4. */
#panel-status .player-core-card,
body[data-active-panel="combat"] #panel-status .player-core-card {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 9px !important;
    row-gap: 5px !important;
    align-items: start !important;
}

#panel-status .player-rank-title-choice-wrap,
body[data-active-panel="combat"] #panel-status .player-rank-title-choice-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 74px !important;
    height: 24px !important;
    justify-self: center !important;
    position: relative !important;
    z-index: 20 !important;
}

#panel-status .player-core-avatar-wrap,
body[data-active-panel="combat"] #panel-status .player-core-avatar-wrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
}

#panel-status .status-leaderboard-btn,
body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-self: end !important;
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    height: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
}

#panel-status .player-core-main,
body[data-active-panel="combat"] #panel-status .player-core-main {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto 31px !important;
    row-gap: 5px !important;
}

#panel-status .player-core-title,
body[data-active-panel="combat"] #panel-status .player-core-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
}

#panel-status .player-core-title h3,
body[data-active-panel="combat"] #panel-status .player-core-title h3 {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-status .player-core-level,
body[data-active-panel="combat"] #panel-status .player-core-level {
    width: auto !important;
    min-width: 46px !important;
    max-width: 62px !important;
    justify-self: end !important;
    padding: 3px 8px !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn .ui-btn-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    opacity: 1 !important;
}

body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn i,
body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn span {
    display: none !important;
}

.status-leaderboard-modal {
    z-index: 1900 !important;
}

#player-info-modal.active {
    z-index: 2400 !important;
}

#player-info-modal.active .modal-content {
    z-index: 2401 !important;
}

.status-leaderboard-row,
.status-leaderboard-row.is-top-1,
.status-leaderboard-row.is-top-2,
.status-leaderboard-row.is-top-3 {
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-areas: "rank main" !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 9px !important;
}

.status-rank-no {
    grid-area: rank !important;
    align-self: center !important;
}

.status-rank-main {
    grid-area: main !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "name value"
        "badge badge" !important;
    align-items: center !important;
    gap: 3px 8px !important;
}

.status-rank-name {
    grid-area: name !important;
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.status-rank-value {
    grid-area: value !important;
    justify-self: end !important;
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: right !important;
}

.status-rank-badge {
    grid-area: badge !important;
    display: block !important;
    justify-self: start !important;
    max-width: 100% !important;
    line-height: 0 !important;
    margin-top: 1px !important;
}

.status-rank-title {
    --badge-w: 124px !important;
    --badge-h: 31px !important;
    padding: 0 15px !important;
    font-size: 0.58rem !important;
    vertical-align: top !important;
}

.rank-title-badge.image-rank-title > span {
    width: 100% !important;
    transform: none !important;
    text-align: center !important;
    line-height: 1 !important;
}

@media (max-width: 520px) {
    .status-rank-main {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "name"
            "value"
            "badge" !important;
        gap: 2px !important;
    }

    .status-rank-value {
        justify-self: start !important;
        text-align: left !important;
        max-width: 100% !important;
    }
}

/* EOF leaderboard v4 fixes: compact level, stable tools, non-overlapping nameplates. */
#panel-status .player-core-card,
body[data-active-panel="combat"] #panel-status .player-core-card {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 9px !important;
    row-gap: 5px !important;
    align-items: start !important;
}

#panel-status .player-rank-title-choice-wrap,
body[data-active-panel="combat"] #panel-status .player-rank-title-choice-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 74px !important;
    height: 24px !important;
    justify-self: center !important;
    position: relative !important;
    z-index: 20 !important;
}

#panel-status .player-core-avatar-wrap,
body[data-active-panel="combat"] #panel-status .player-core-avatar-wrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
}

#panel-status .status-leaderboard-btn,
body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-self: end !important;
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    height: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
}

#panel-status .player-core-main,
body[data-active-panel="combat"] #panel-status .player-core-main {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto 31px !important;
    row-gap: 5px !important;
}

#panel-status .player-core-title,
body[data-active-panel="combat"] #panel-status .player-core-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
}

#panel-status .player-core-title h3,
body[data-active-panel="combat"] #panel-status .player-core-title h3 {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-status .player-core-level,
body[data-active-panel="combat"] #panel-status .player-core-level {
    width: auto !important;
    min-width: 46px !important;
    max-width: 62px !important;
    justify-self: end !important;
    padding: 3px 8px !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn .ui-btn-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    opacity: 1 !important;
}

body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn i,
body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn span {
    display: none !important;
}

.status-leaderboard-modal {
    z-index: 1900 !important;
}

#player-info-modal.active {
    z-index: 2400 !important;
}

#player-info-modal.active .modal-content {
    z-index: 2401 !important;
}

.status-leaderboard-row,
.status-leaderboard-row.is-top-1,
.status-leaderboard-row.is-top-2,
.status-leaderboard-row.is-top-3 {
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-areas: "rank main" !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 9px !important;
}

.status-rank-no {
    grid-area: rank !important;
    align-self: center !important;
}

.status-rank-main {
    grid-area: main !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "name value"
        "badge badge" !important;
    align-items: center !important;
    gap: 3px 8px !important;
}

.status-rank-name {
    grid-area: name !important;
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.status-rank-value {
    grid-area: value !important;
    justify-self: end !important;
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: right !important;
}

.status-rank-badge {
    grid-area: badge !important;
    display: block !important;
    justify-self: start !important;
    max-width: 100% !important;
    line-height: 0 !important;
    margin-top: 1px !important;
}

.status-rank-title {
    --badge-w: 124px !important;
    --badge-h: 31px !important;
    padding: 0 15px !important;
    font-size: 0.58rem !important;
    vertical-align: top !important;
}

.rank-title-badge.image-rank-title {
    align-items: center !important;
    justify-content: center !important;
}

.rank-title-badge.image-rank-title > span {
    width: 100% !important;
    transform: none !important;
    text-align: center !important;
    line-height: 1 !important;
}

@media (max-width: 520px) {
    .status-rank-main {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "name"
            "value"
            "badge" !important;
        gap: 2px !important;
    }

    .status-rank-value {
        justify-self: start !important;
        text-align: left !important;
        max-width: 100% !important;
    }
}

/* EOF leaderboard v3 fixes: title dropdown, aligned rank button, non-overlapping list rows. */
#panel-status .player-core-card {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 9px !important;
    row-gap: 5px !important;
    align-items: start !important;
}

#panel-status .player-rank-title-choice-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 8 !important;
    display: none !important;
    width: 74px !important;
    height: 24px !important;
}

#panel-status .player-rank-title-choice-wrap.has-title {
    display: block !important;
}

#panel-status .player-core-avatar-wrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
}

#panel-status .status-leaderboard-btn,
body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: end !important;
    justify-self: center !important;
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    height: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 0 5px !important;
}

#panel-status .player-core-main {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    min-width: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto auto 31px !important;
    align-content: start !important;
    row-gap: 5px !important;
}

#panel-status .player-core-mini-stats,
body[data-active-panel="combat"] #panel-status .player-core-mini-stats {
    grid-row: 3 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-self: end !important;
    margin-top: 0 !important;
}

#panel-status .player-core-mini-stats > div {
    min-height: 31px !important;
    height: 31px !important;
    padding: 4px 6px !important;
}

#panel-status .player-core-title {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.player-rank-title-choice {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.player-selected-rank-title {
    --badge-w: 74px !important;
    --badge-h: 24px !important;
    padding: 0 10px !important;
    font-size: 0.47rem !important;
}

.player-rank-title-choice.has-menu::after {
    content: "" !important;
    position: absolute !important;
    right: 4px !important;
    bottom: 3px !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid rgba(108, 75, 28, 0.9) !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.7)) !important;
}

.player-rank-title-choice-menu {
    position: absolute !important;
    left: 0 !important;
    top: calc(100% + 4px) !important;
    width: 178px !important;
    max-height: 210px !important;
    overflow-y: auto !important;
    display: none !important;
    gap: 5px !important;
    padding: 6px !important;
    border: 1px solid rgba(230, 190, 100, 0.9) !important;
    border-radius: 8px !important;
    background: rgba(255, 252, 241, 0.98) !important;
    box-shadow: 0 10px 22px rgba(74, 54, 25, 0.2) !important;
}

.player-rank-title-choice-wrap.open .player-rank-title-choice-menu {
    display: grid !important;
}

.rank-title-choice-menu-item {
    min-height: 38px !important;
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 4px !important;
    border: 1px solid rgba(226, 195, 127, 0.7) !important;
    border-radius: 7px !important;
    background: rgba(255,255,255,0.82) !important;
    color: #6a4a24 !important;
    font-size: 0.64rem !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.rank-title-choice-menu-item.active {
    border-color: rgba(98, 201, 120, 0.9) !important;
    background: #f1ffe9 !important;
}

.rank-title-choice-option {
    --badge-w: 86px !important;
    --badge-h: 27px !important;
    padding: 0 11px !important;
    font-size: 0.5rem !important;
}

.rank-title-badge.image-rank-title {
    align-items: center !important;
    justify-content: center !important;
}

.rank-title-badge.image-rank-title > span {
    transform: translateY(1px) !important;
    text-align: center !important;
}

.status-leaderboard-row {
    grid-template-columns: 36px minmax(0, 1fr) 136px !important;
    grid-template-areas:
        "rank name badge"
        "rank value badge" !important;
    column-gap: 8px !important;
    row-gap: 1px !important;
    min-height: 64px !important;
    align-items: center !important;
}

.status-rank-name {
    grid-area: name !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.status-rank-value {
    grid-area: value !important;
    grid-column: auto !important;
    justify-self: start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.1 !important;
}

.status-rank-badge {
    grid-area: badge !important;
    justify-self: end !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.status-rank-badge:empty {
    display: none !important;
}

.status-rank-title {
    --badge-w: 132px !important;
    --badge-h: 34px !important;
    padding: 0 16px !important;
    font-size: 0.56rem !important;
}

@media (max-width: 420px) {
    #panel-status .player-core-card {
        grid-template-columns: 62px minmax(0, 1fr) !important;
    }

    #panel-status .player-rank-title-choice-wrap,
    .player-rank-title-choice,
    #panel-status .status-leaderboard-btn,
    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
    }

    .player-selected-rank-title {
        --badge-w: 62px !important;
        --badge-h: 22px !important;
        font-size: 0.42rem !important;
    }

    .status-leaderboard-row {
        grid-template-columns: 32px minmax(0, 1fr) !important;
        grid-template-areas:
            "rank name"
            "rank value"
            "rank badge" !important;
    }

    .status-rank-badge {
        justify-self: start !important;
    }
}

/* Leaderboard v2: keep status stats intact, use generated nameplate assets. */
#panel-status .player-core-card {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
}

#panel-status .player-core-avatar-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

#panel-status .player-core-main {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-width: 0 !important;
}

#panel-status .player-core-mini-stats,
body[data-active-panel="combat"] #panel-status .player-core-mini-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#panel-status .status-leaderboard-btn,
body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    min-height: 31px !important;
    height: 31px !important;
    margin-top: 7px !important;
    padding: 0 5px !important;
    border-radius: 8px !important;
    gap: 3px !important;
    font-size: 0.7rem !important;
}

#panel-status .status-leaderboard-btn span,
body[data-active-panel="combat"] #panel-status .status-leaderboard-btn span {
    display: inline !important;
    font-size: 0.66rem !important;
}

#panel-status .player-core-title {
    display: grid !important;
    grid-template-columns: minmax(68px, 94px) minmax(0, 1fr) auto !important;
    gap: 5px !important;
    align-items: center !important;
}

#panel-status .player-core-title h3 {
    min-width: 0 !important;
}

.player-rank-title-choice {
    width: 94px !important;
    height: 28px !important;
    min-width: 68px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    overflow: visible !important;
}

.rank-title-choice-empty {
    width: 62px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px dashed rgba(214, 104, 104, 0.8) !important;
    border-radius: 2px !important;
    color: transparent !important;
    background: rgba(255, 255, 255, 0.32) !important;
}

.rank-title-badge.image-rank-title {
    position: relative !important;
    width: var(--badge-w, 132px) !important;
    min-width: var(--badge-w, 132px) !important;
    max-width: var(--badge-w, 132px) !important;
    height: var(--badge-h, 38px) !important;
    min-height: var(--badge-h, 38px) !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: var(--badge-bg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    overflow: visible !important;
    color: #5a3816 !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82), 0 0 3px rgba(255, 239, 177, 0.65) !important;
}

.rank-title-badge.image-rank-title::before {
    display: none !important;
}

.rank-title-badge.image-rank-title > span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.player-selected-rank-title {
    --badge-w: 94px !important;
    --badge-h: 28px !important;
    padding: 0 13px !important;
    font-size: 0.54rem !important;
}

.chat-title-stack .image-rank-title {
    --badge-w: 122px !important;
    --badge-h: 32px !important;
    padding: 0 15px !important;
    font-size: 0.58rem !important;
    vertical-align: middle !important;
}

.status-rank-title {
    --badge-w: 130px !important;
    --badge-h: 34px !important;
    padding: 0 16px !important;
    font-size: 0.6rem !important;
}

.status-leaderboard-row {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-areas:
        "rank main"
        "rank value" !important;
    gap: 3px 8px !important;
    min-height: 58px !important;
}

.status-rank-no {
    grid-area: rank !important;
    align-self: center !important;
}

.status-rank-main {
    grid-area: main !important;
    min-width: 0 !important;
    justify-content: space-between !important;
}

.status-rank-value {
    grid-area: value !important;
    justify-self: start !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: left !important;
    line-height: 1.15 !important;
}

.rank-title-choice-content {
    width: min(430px, calc(100vw - 28px)) !important;
}

.rank-title-choice-list {
    display: grid !important;
    gap: 8px !important;
}

.rank-title-choice-item {
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: 136px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    border: 1px solid rgba(232, 192, 105, 0.82) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #62462a !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.rank-title-choice-item.active {
    border-color: rgba(99, 200, 111, 0.9) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,255,232,0.95)) !important;
}

@media (max-width: 420px) {
    #panel-status .player-core-card {
        grid-template-columns: 58px minmax(0, 1fr) !important;
    }

    #panel-status .status-leaderboard-btn,
    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        font-size: 0.62rem !important;
    }

    #panel-status .status-leaderboard-btn span,
    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn span {
        font-size: 0.58rem !important;
    }

    #panel-status .player-core-title {
        grid-template-columns: 76px minmax(0, 1fr) auto !important;
    }

    .player-selected-rank-title {
        --badge-w: 76px !important;
        --badge-h: 24px !important;
        font-size: 0.48rem !important;
    }

    .rank-title-choice-item {
        grid-template-columns: 118px minmax(0, 1fr) !important;
    }
}

/* Phase 5: core dialogs, task, lottery, index, and item detail polish. */
#character-modal .modal-content,
#load-modal .modal-content,
#auth-modal .modal-content,
#reset-modal .modal-content,
#private-chat-modal .modal-content,
#item-action-modal .modal-content,
#equip-confirm-modal .modal-content,
#equipment-index-modal .modal-content,
#lottery-modal .modal-content,
#task-modal .modal-content,
#boss-drop-modal .modal-content,
#world-boss-challenge-modal .modal-content,
#world-boss-rank-modal .modal-content,
#game-confirm-modal .modal-content,
#game-selection-modal .modal-content,
#map-monsters-modal .modal-content,
#monster-info-modal .modal-content,
#sell-item-modal .modal-content,
#select-item-modal .modal-content,
#auto-sell-modal .modal-content {
    max-width: min(720px, calc(100vw - 24px)) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(230, 207, 168, 0.9) !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 217, 120, 0.26), transparent 27%),
        linear-gradient(180deg, #fffdf7, #f4fbec) !important;
    color: var(--q-text) !important;
    box-shadow: 0 20px 44px rgba(78, 64, 38, 0.2) !important;
}

#player-info-modal .modal-content,
#player-equip-modal .modal-content,
#other-farm-modal .modal-content {
    max-width: min(720px, calc(100vw - 24px)) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(230, 207, 168, 0.9) !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 217, 120, 0.26), transparent 27%),
        linear-gradient(180deg, #fffdf7, #f4fbec) !important;
    color: var(--q-text) !important;
    box-shadow: 0 20px 44px rgba(78, 64, 38, 0.2) !important;
}

#player-info-modal .modal-header,
#player-equip-modal .modal-header,
#other-farm-modal .modal-header {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-right: 46px !important;
    color: var(--q-text) !important;
    border-bottom: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: rgba(255, 250, 240, 0.64) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

#player-info-content,
#player-equip-modal-body {
    display: grid !important;
    gap: 10px !important;
    max-height: min(62vh, 540px) !important;
    overflow-y: auto !important;
    color: var(--q-text) !important;
}

.player-info-loading {
    display: grid !important;
    justify-items: center !important;
    gap: 6px !important;
    padding: 20px !important;
    color: var(--q-muted) !important;
}

.player-info-card {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.82) !important;
}

.player-info-avatar {
    width: 60px !important;
    height: 60px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    border: 2px solid rgba(113, 201, 107, 0.65) !important;
    background: #eefbe8 !important;
    overflow: hidden !important;
    color: var(--q-green-dark) !important;
    font-size: 2rem !important;
}

.player-info-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.player-info-name {
    color: var(--q-text) !important;
    font-size: 1.02rem !important;
    font-weight: 900 !important;
    overflow-wrap: anywhere !important;
}

.player-info-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
}

.player-info-tags span {
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: rgba(237, 255, 232, 0.92) !important;
    color: var(--q-green-dark) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
}

.player-info-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    gap: 8px !important;
}

.player-info-stat {
    padding: 9px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(230, 207, 168, 0.76) !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

.player-info-stat span {
    display: block !important;
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
}

.player-info-stat strong {
    display: block !important;
    margin-top: 3px !important;
    color: var(--q-text) !important;
    font-size: 0.9rem !important;
}

.player-info-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 2px !important;
    color: var(--q-text) !important;
    font-size: 0.84rem !important;
    font-weight: 900 !important;
}

.player-info-equipment-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.player-info-equipment-grid .equipment-slot {
    min-height: 76px !important;
    padding: 8px 5px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    color: var(--q-text) !important;
}

.player-info-equipment-grid .equipment-name {
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    overflow-wrap: anywhere !important;
}

.player-info-equipment-grid .equipment-type {
    color: var(--q-muted) !important;
    font-size: 0.66rem !important;
}

.other-farm-content {
    max-width: min(760px, calc(100vw - 24px)) !important;
}

#other-farm-plots-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    max-height: min(58vh, 500px) !important;
    overflow-y: auto !important;
    margin: 12px 0 !important;
}

.other-farm-plot {
    min-height: 132px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.08) !important;
}

.other-farm-plot.ready {
    border-color: rgba(113, 201, 107, 0.75) !important;
    background: rgba(237, 255, 232, 0.72) !important;
}

.other-farm-plot .plot-icon {
    margin-bottom: 8px !important;
}

.other-farm-plot .farm-art-icon {
    width: 50px !important;
    height: 50px !important;
}

.other-farm-plot .plot-name {
    color: var(--q-text) !important;
    font-weight: 900 !important;
}

.other-farm-plot .plot-timer {
    color: var(--q-muted) !important;
    font-size: 0.74rem !important;
}

.player-equip-chip {
    display: inline-grid !important;
    gap: 3px !important;
    margin: 3px !important;
    padding: 7px 9px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.78rem !important;
}

.player-equip-chip > span:first-child {
    font-weight: 900 !important;
}

.player-equip-attrs {
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
}

.player-equip-extra,
.player-equip-refine {
    color: var(--q-green-dark) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
}

#character-modal .modal-header,
#load-modal .modal-header,
#auth-modal .modal-header,
#reset-modal .modal-header,
#private-chat-modal .modal-header,
#item-action-modal .modal-header,
#equip-confirm-modal .modal-header,
#equipment-index-modal .modal-header,
#lottery-modal .modal-header,
#task-modal .modal-header,
#boss-drop-modal .modal-header,
#world-boss-challenge-modal .modal-header,
#world-boss-rank-modal .modal-header,
#game-confirm-modal .modal-header,
#game-selection-modal .modal-header,
#map-monsters-modal .modal-header,
#monster-info-modal .modal-header,
#sell-item-modal .modal-header,
#select-item-modal .modal-header,
#auto-sell-modal .modal-header {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-right: 46px !important;
    color: var(--q-text) !important;
    border-bottom: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: rgba(255, 250, 240, 0.64) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

#character-modal .modal-body,
#load-modal .modal-body,
#auth-modal .modal-body,
#reset-modal .modal-body,
#private-chat-modal .modal-body,
#item-action-modal .modal-body,
#equip-confirm-modal .modal-body,
#equipment-index-modal .modal-body,
#lottery-modal .modal-body,
#task-modal .modal-body,
#boss-drop-body,
#game-confirm-message,
#game-selection-list,
#map-monsters-content,
#monster-info-modal .modal-body,
#sell-item-modal .modal-body,
#select-item-modal .modal-body,
#auto-sell-body {
    color: var(--q-text) !important;
}

.modal .close,
.modal .close-btn {
    top: 9px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    background: #ffffff !important;
    color: var(--q-green-dark) !important;
    box-shadow: 0 4px 10px rgba(84, 128, 87, 0.12) !important;
}

.modal .close:hover,
.modal .close-btn:hover {
    background: #e8f8dd !important;
    transform: scale(1.04) !important;
}

.input-group label,
#auth-error,
.warning-text {
    color: var(--q-muted) !important;
}

.input-group input,
#private-input,
#character-name,
#auth-username,
#auth-password,
#reset-confirm-input {
    min-height: 42px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(230, 207, 168, 0.9) !important;
    background: #ffffff !important;
    color: var(--q-text) !important;
    padding: 9px 11px !important;
}

#character-list {
    display: grid !important;
    gap: 8px !important;
    max-height: 320px !important;
    padding-right: 2px !important;
}

#character-list > div {
    border-radius: 16px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--q-text) !important;
    box-shadow: 0 6px 14px rgba(112, 92, 55, 0.08) !important;
}

#item-action-modal .item-detail,
#auction-item-detail-body .item-detail,
#sell-item-modal .item-detail {
    display: grid !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
    background: rgba(255, 255, 255, 0.64) !important;
}

#item-action-modal .item-detail h3,
#auction-item-detail-body .item-detail h3,
#sell-item-modal .item-detail h3 {
    margin: 0 !important;
    text-shadow: none !important;
    font-size: 1rem !important;
}

#item-action-modal .item-detail p,
#auction-item-detail-body .item-detail p,
#sell-item-modal .item-detail p {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 0 7px !important;
    padding: 7px 8px !important;
    border-radius: 12px !important;
    background: rgba(255, 250, 240, 0.72) !important;
    color: var(--q-text) !important;
}

.item-action-head {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 2px !important;
}

.item-action-icon {
    width: 46px !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: linear-gradient(180deg, #fffdf8, #eefbe8) !important;
    color: var(--q-green-dark) !important;
    overflow: hidden !important;
    font-size: 1.4rem !important;
}

.item-action-title {
    min-width: 0 !important;
}

.item-action-title h3 {
    overflow-wrap: anywhere !important;
}

.item-action-title span {
    display: block !important;
    margin-top: 3px !important;
    color: var(--q-muted) !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
}

.item-note-row span:last-child {
    color: var(--q-green-dark) !important;
    font-weight: 800 !important;
}

.item-refine-block {
    display: grid !important;
    gap: 5px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: rgba(237, 255, 232, 0.72) !important;
    color: var(--q-green-dark) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
}

.item-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    gap: 8px !important;
    justify-content: stretch !important;
}

.item-action-buttons .btn {
    width: 100% !important;
    min-width: 0 !important;
}

#equip-confirm-body > div:first-child {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px !important;
}

.equip-confirm-compare {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.equip-confirm-compare-triple {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
}

.equip-confirm-current,
.equip-confirm-new,
.equip-confirm-option {
    min-width: 0 !important;
    padding: 10px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--q-text) !important;
    text-align: center !important;
}

.equip-confirm-option {
    cursor: pointer !important;
}

.equip-confirm-option.selected {
    border-color: rgba(113, 201, 107, 0.95) !important;
    background: rgba(237, 255, 232, 0.82) !important;
    box-shadow: 0 0 0 3px rgba(113, 201, 107, 0.14) !important;
}

.equip-confirm-current h4,
.equip-confirm-new h4,
.equip-confirm-option h4 {
    margin: 0 0 8px !important;
    color: var(--q-text) !important;
    font-size: 0.85rem !important;
}

.equip-confirm-new h4 {
    color: var(--q-green-dark) !important;
}

.equip-confirm-empty {
    padding: 16px 6px !important;
    border-radius: 14px !important;
    background: rgba(255, 250, 240, 0.72) !important;
    color: var(--q-muted) !important;
    font-size: 0.78rem !important;
}

.equip-compare-card {
    display: grid !important;
    justify-items: center !important;
    gap: 4px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    background: rgba(255, 253, 247, 0.76) !important;
}

.equip-compare-icon {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    border: 1px solid rgba(230, 207, 168, 0.76) !important;
    background: #fffaf0 !important;
    color: var(--q-green-dark) !important;
    font-size: 1.2rem !important;
}

.equip-compare-name {
    font-weight: 900 !important;
    overflow-wrap: anywhere !important;
}

.equip-compare-line {
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
}

.equip-compare-extra {
    color: var(--q-green-dark) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
}

#equip-confirm-body h4,
#game-confirm-title,
#game-selection-title {
    color: var(--q-text) !important;
}

.equip-slot-box,
#equip-confirm-body > div:first-child > div {
    min-width: 0 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--q-text) !important;
}

.equip-slot-box:hover {
    border-color: rgba(113, 201, 107, 0.92) !important;
}

#equipment-index-modal .modal-content {
    max-width: min(820px, calc(100vw - 24px)) !important;
}

#equipment-index-modal #equipment-tabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    padding: 5px !important;
    border: 1px solid rgba(230, 207, 168, 0.76) !important;
    border-radius: 16px !important;
    background: rgba(255, 250, 240, 0.78) !important;
}

#equipment-index-modal #equipment-tabs .btn {
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 7px 6px !important;
    font-size: 0.76rem !important;
    box-shadow: none !important;
}

#equipment-index-modal #equipment-tabs .btn-primary {
    background: linear-gradient(180deg, var(--q-green), var(--q-green-dark)) !important;
    color: #ffffff !important;
}

#equipment-index-modal #equipment-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)) !important;
    gap: 9px !important;
    max-height: 56vh !important;
    overflow-y: auto !important;
    padding: 6px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
    background: rgba(255, 255, 255, 0.58) !important;
}

#equipment-index-modal #equipment-list .equipment-slot {
    min-height: 128px !important;
    margin: 0 !important;
    align-content: center !important;
}

#lottery-select {
    text-align: center !important;
}

.activity-art-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: linear-gradient(180deg, #fffdf7, #f1fae8) !important;
    box-shadow: 0 5px 12px rgba(112, 92, 55, 0.09) !important;
}

.activity-art-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

.activity-art-icon i {
    display: none !important;
    color: var(--q-green) !important;
}

.activity-art-icon.activity-art-icon-fallback i {
    display: inline-flex !important;
}

.activity-art-icon-large {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    border-radius: 21px !important;
}

.activity-art-icon-small {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 13px !important;
}

.activity-art-icon-tiny {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 11px !important;
}

.lottery-hero-card {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
    background: rgba(255, 255, 255, 0.66) !important;
    text-align: left !important;
}

.lottery-hero-card > div:last-child {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
}

.lottery-hero-card strong {
    color: var(--q-text) !important;
    font-size: 1.05rem !important;
}

.lottery-hero-card span {
    color: var(--q-muted) !important;
    font-size: 0.82rem !important;
}

.lottery-hero-card b {
    color: #c8801f !important;
}

.lottery-pool-card {
    margin: 0 0 12px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(246, 199, 93, 0.62) !important;
    background: linear-gradient(180deg, rgba(255, 250, 226, 0.94), rgba(255, 255, 250, 0.9)) !important;
    box-shadow: 0 8px 18px rgba(198, 137, 42, 0.12) !important;
    text-align: left !important;
}

.lottery-pool-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    color: var(--q-text) !important;
    font-weight: 900 !important;
}

.lottery-pool-title b {
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ffd986, #ffb94d) !important;
    color: #765020 !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
}

.lottery-prize-grid {
    display: grid !important;
    gap: 7px !important;
}

.lottery-prize-item {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 8px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(230, 207, 168, 0.72) !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

.lottery-prize-item strong,
.lottery-prize-item span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.lottery-prize-item strong {
    color: var(--q-text) !important;
    font-size: 0.86rem !important;
}

.lottery-prize-item span {
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
}

.lottery-prize-ring {
    border-color: rgba(206, 151, 255, 0.72) !important;
    background: linear-gradient(180deg, rgba(255, 250, 255, 0.92), rgba(250, 241, 255, 0.78)) !important;
}

.lottery-prize-gold {
    border-color: rgba(248, 204, 99, 0.8) !important;
}

.lottery-option-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#lottery-select .modal-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.lottery-option-btn {
    min-width: 0 !important;
    min-height: 78px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 6px !important;
    padding: 9px 6px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    color: var(--q-text) !important;
}

.lottery-option-btn span {
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.lottery-option-btn small {
    color: var(--q-muted) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.lottery-option-featured {
    border-color: rgba(246, 199, 93, 0.95) !important;
    background: linear-gradient(180deg, #fff9dc, #fffef8) !important;
}

#lottery-result {
    max-height: 380px !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    padding: 12px !important;
    color: var(--q-text) !important;
}

#lottery-result h3 {
    color: var(--q-text) !important;
    margin: 0 !important;
}

#lottery-result > div {
    background: transparent !important;
}

.lottery-result-item {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 0.6fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 7px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(230, 207, 168, 0.66) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--q-text) !important;
    text-shadow: none !important;
}

.lottery-result-head {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
    text-align: left !important;
}

.lottery-result-head > div:last-child {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

.lottery-result-head span {
    color: var(--q-muted) !important;
    font-size: 0.76rem !important;
}

.lottery-result-item span {
    color: var(--q-muted) !important;
    font-size: 0.74rem !important;
}

.lottery-result-item b {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #c8801f !important;
}

.lottery-special-ring {
    color: #a04fbf !important;
}

.lottery-special-ring b {
    color: #a04fbf !important;
}

.lottery-summary {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 0.6fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
}

.lottery-summary span {
    color: var(--q-muted) !important;
}

.lottery-summary b {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#task-modal .task-stats {
    margin: 10px 0 12px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: rgba(255, 250, 240, 0.74) !important;
    color: var(--q-muted) !important;
    font-weight: 800 !important;
}

#task-modal .task-detail,
#task-modal .task-empty,
#task-modal .task-error,
#task-modal .task-loading,
#task-modal .task-cooldown {
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
    background: rgba(255, 255, 255, 0.66) !important;
    color: var(--q-text) !important;
}

#task-modal .task-empty,
#task-modal .task-error,
#task-modal .task-loading,
#task-modal .task-cooldown {
    min-height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
}

#task-modal .task-empty strong,
#task-modal .task-error strong,
#task-modal .task-loading strong,
#task-modal .task-cooldown strong {
    color: var(--q-text) !important;
    font-size: 1rem !important;
}

#task-modal .task-empty span,
#task-modal .task-error span,
#task-modal .task-loading span,
#task-modal .task-cooldown span {
    color: var(--q-muted) !important;
    font-size: 0.82rem !important;
}

#task-modal .task-error strong {
    color: #d26060 !important;
}

#task-modal .task-empty .btn {
    margin-top: 4px !important;
    min-width: 150px !important;
}

#task-modal .task-detail-head {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.72) !important;
    background: rgba(255, 250, 240, 0.72) !important;
}

#task-modal .task-detail-head > div:last-child {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
}

#task-modal .task-detail-head strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--q-text) !important;
    font-size: 1.04rem !important;
}

#task-modal .task-detail-head span {
    color: var(--q-muted) !important;
    font-size: 0.78rem !important;
}

#task-modal .task-row {
    display: grid !important;
    grid-template-columns: minmax(82px, 0.45fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 0 8px !important;
    padding: 8px 9px !important;
    border: 1px solid rgba(230, 207, 168, 0.62) !important;
    border-radius: 13px !important;
    background: rgba(255, 250, 240, 0.72) !important;
}

#task-modal .task-label {
    color: var(--q-muted) !important;
}

#task-modal .task-value {
    color: var(--q-text) !important;
    overflow-wrap: anywhere !important;
}

#task-modal .task-progress-container {
    height: 24px !important;
    margin: 13px 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    background: #ffffff !important;
    box-shadow: inset 0 1px 4px rgba(84, 128, 87, 0.12) !important;
}

#task-modal .task-progress-text {
    color: var(--q-text) !important;
    text-shadow: none !important;
    font-size: 0.76rem !important;
}

#task-modal .task-ready {
    color: var(--q-green-dark) !important;
    background: rgba(232, 248, 221, 0.9) !important;
    border-color: rgba(184, 221, 184, 0.9) !important;
}

#task-modal .task-status-ok {
    color: var(--q-green-dark) !important;
}

#task-modal .task-status-missing,
#task-modal .task-error {
    color: #d26060 !important;
}

#boss-drop-modal #boss-drop-body,
#world-boss-challenge-modal .modal-body,
#world-boss-rank-modal .modal-body {
    text-align: center !important;
}

#boss-drop-modal #countdown-timer {
    width: 74px !important;
    height: 74px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 3px solid rgba(255, 217, 120, 0.9) !important;
    background: #ffffff !important;
    color: #c8801f !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.12) !important;
}

#world-boss-rank-modal .close-rank-modal {
    top: 9px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    background: #ffffff !important;
    color: var(--q-green-dark) !important;
    box-shadow: 0 4px 10px rgba(84, 128, 87, 0.12) !important;
}

#world-boss-rank-modal #rank-modal-body {
    max-height: 460px !important;
    color: var(--q-text) !important;
}

#world-boss-rank-modal .boss-rank-header {
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 250, 240, 0.78) !important;
}

#world-boss-rank-modal .boss-name,
#world-boss-rank-modal .boss-hp {
    color: var(--q-text) !important;
}

#world-boss-rank-modal .rank-list {
    display: grid !important;
    gap: 7px !important;
}

#world-boss-rank-modal .rank-header,
#world-boss-rank-modal .rank-item {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 84px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 9px !important;
    border: 1px solid rgba(230, 207, 168, 0.66) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--q-text) !important;
}

#world-boss-rank-modal .rank-header {
    background: rgba(232, 248, 221, 0.9) !important;
    font-weight: 900 !important;
}

#world-boss-rank-modal .rank-item span {
    min-width: 0 !important;
    color: var(--q-text) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#world-boss-rank-modal .rank-footer {
    color: var(--q-muted) !important;
}

#game-selection-list {
    display: grid !important;
    gap: 8px !important;
    max-height: 360px !important;
    padding-right: 2px !important;
}

.selection-item {
    padding: 10px !important;
    margin: 0 !important;
    border-radius: 15px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--q-text) !important;
    box-shadow: 0 5px 12px rgba(112, 92, 55, 0.07) !important;
}

.selection-item:hover {
    background: #ffffff !important;
    border-color: rgba(113, 201, 107, 0.92) !important;
}

#map-monsters-content {
    overflow-x: auto !important;
}

#map-monsters-content table {
    min-width: 520px !important;
    color: var(--q-text) !important;
}

#map-monsters-content th,
#map-monsters-content td {
    padding: 8px !important;
    border-bottom: 1px solid rgba(230, 207, 168, 0.62) !important;
    color: var(--q-text) !important;
}

@media (max-width: 520px) {
    .lottery-option-grid,
    #lottery-select .modal-buttons {
        grid-template-columns: 1fr !important;
    }

    .lottery-result-item,
    .lottery-summary {
        grid-template-columns: 28px minmax(0, 1fr) !important;
    }

    .lottery-result-item b,
    .lottery-summary b {
        grid-column: 2 / -1 !important;
    }

    #task-modal .task-row {
        grid-template-columns: 1fr !important;
    }

    #equipment-index-modal #equipment-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #equipment-index-modal #equipment-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Phase 6: lightweight Q resource unification. */
#panel-combat .monster-orb {
    border: 2px solid rgba(255, 255, 255, 0.92) !important;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.9), transparent 31%),
        linear-gradient(180deg, #f8fff2, #e3f5ff) !important;
    box-shadow:
        0 9px 18px rgba(84, 128, 87, 0.16),
        inset 0 -5px 10px rgba(184, 221, 184, 0.18) !important;
}

#panel-combat .monster-orb.boss,
#panel-combat .monster-orb.world-boss {
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.9), transparent 31%),
        linear-gradient(180deg, #fff3cf, #ffe4ec) !important;
    border-color: rgba(255, 217, 120, 0.95) !important;
}

#panel-combat .monster-icon {
    width: 78% !important;
    height: 78% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.62) !important;
}

#panel-combat .monster-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: saturate(0.9) brightness(1.08) contrast(0.92) !important;
    transform: scale(0.9) !important;
}

#panel-combat .monster-info {
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(230, 207, 168, 0.68) !important;
    box-shadow: 0 5px 12px rgba(112, 92, 55, 0.08) !important;
}

#panel-parking .vehicle-icon,
#parking-buy-modal .vehicle-icon,
#parking-switch-modal .vehicle-icon,
#garage-vehicles-list .vehicle-icon {
    width: 46px !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff, #e8f8dd) !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    box-shadow: 0 5px 12px rgba(84, 128, 87, 0.12) !important;
    font-size: 1.55rem !important;
}

#panel-parking .vehicle-icon img,
#parking-buy-modal .vehicle-icon img,
#parking-switch-modal .vehicle-icon img,
#garage-vehicles-list .vehicle-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    transform: scale(1.12) !important;
}

#panel-parking .vehicle-icon span,
#parking-buy-modal .vehicle-icon span,
#parking-switch-modal .vehicle-icon span,
#garage-vehicles-list .vehicle-icon span {
    display: none !important;
}

#panel-parking .vehicle-icon.vehicle-icon-fallback-only span,
#parking-buy-modal .vehicle-icon.vehicle-icon-fallback-only span,
#parking-switch-modal .vehicle-icon.vehicle-icon-fallback-only span,
#garage-vehicles-list .vehicle-icon.vehicle-icon-fallback-only span {
    display: inline !important;
}

#panel-parking .vehicle-icon-small,
#parking-buy-modal .vehicle-icon-small,
#parking-switch-modal .vehicle-icon-small,
#garage-vehicles-list .vehicle-icon-small {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 12px !important;
}

#panel-parking .spot-vehicle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: var(--q-text) !important;
    font-weight: 900 !important;
}

#panel-parking .spot-vehicle > span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.current-vehicle-card,
.garage-vehicle-card,
.vehicle-buy-card,
.spot-card {
    position: relative !important;
    overflow: hidden !important;
}

.current-vehicle-card::after,
.garage-vehicle-card::after,
.vehicle-buy-card::after,
.spot-card::after {
    content: "" !important;
    position: absolute !important;
    right: -22px !important;
    bottom: -24px !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background: rgba(184, 221, 184, 0.22) !important;
    pointer-events: none !important;
}

#panel-farm .plot-icon,
.seed-icon {
    box-shadow: 0 5px 12px rgba(84, 128, 87, 0.11) !important;
}

#panel-skills .skill-item::before {
    content: "✦";
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border-radius: 10px;
    background: #fffaf0;
    border: 1px solid rgba(230, 207, 168, 0.72);
    color: var(--q-green-dark);
}

/* Phase 7: equipment, zodiac, fragments, and activity item polish. */
#zodiac-modal .modal-content,
#zodiac-select-modal .modal-content,
#zodiac-detail-modal .modal-content {
    max-width: min(720px, calc(100vw - 24px)) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(230, 207, 168, 0.9) !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 217, 120, 0.26), transparent 27%),
        linear-gradient(180deg, #fffdf7, #f4fbec) !important;
    color: var(--q-text) !important;
    box-shadow: 0 20px 44px rgba(78, 64, 38, 0.2) !important;
}

#zodiac-modal .modal-header,
#zodiac-select-modal .modal-header,
#zodiac-detail-modal .modal-header {
    min-height: 48px !important;
    color: var(--q-text) !important;
    border-bottom: 1px solid rgba(230, 207, 168, 0.78) !important;
    background: rgba(255, 250, 240, 0.64) !important;
    font-weight: 900 !important;
}

#zodiac-grid-container .zodiac-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
    gap: 9px !important;
}

.zodiac-slot {
    position: relative !important;
    min-height: 118px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 10px 7px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background:
        radial-gradient(circle at 82% 14%, rgba(255, 217, 120, 0.28), transparent 26%),
        rgba(255, 255, 255, 0.82) !important;
    color: var(--q-text) !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.08) !important;
    overflow: hidden !important;
}

.zodiac-slot.equipped {
    border-color: rgba(113, 201, 107, 0.95) !important;
    background:
        radial-gradient(circle at 82% 14%, rgba(255, 217, 120, 0.3), transparent 26%),
        linear-gradient(180deg, #ffffff, #effbe8) !important;
}

.zodiac-slot.locked {
    opacity: 0.62 !important;
    filter: grayscale(0.35) !important;
}

.zodiac-slot .zodiac-icon,
.strength-zodiac-card .zodiac-icon,
#zodiac-detail-body > div:first-child > div:first-child,
.zodiac-select-item > div:first-child {
    width: 54px !important;
    height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: linear-gradient(180deg, #ffffff, #fffaf0) !important;
    box-shadow: 0 5px 12px rgba(84, 128, 87, 0.12) !important;
    font-size: 1.1rem !important;
    overflow: hidden !important;
}

.zodiac-art-icon {
    width: 100% !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: inherit !important;
}

.zodiac-art-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

.zodiac-art-icon i {
    display: none !important;
    color: var(--q-green-dark) !important;
}

.zodiac-art-icon.zodiac-art-icon-fallback i {
    display: inline-flex !important;
}

.zodiac-art-icon-small {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 16px !important;
}

.zodiac-art-icon-large {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: #fffaf0 !important;
    box-shadow: 0 6px 14px rgba(112, 92, 55, 0.08) !important;
}

.zodiac-art-icon-equipped {
    box-shadow: 0 0 0 3px rgba(113, 201, 107, 0.18) !important;
}

.zodiac-status,
.zodiac-enhance {
    color: var(--q-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
}

.zodiac-enhance {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    min-width: 28px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    background: #62c978 !important;
    color: #ffffff !important;
}

#zodiac-full-bonus {
    color: var(--q-green-dark) !important;
    overflow-wrap: anywhere !important;
}

#zodiac-detail-body {
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
    background: rgba(255, 255, 255, 0.64) !important;
}

#zodiac-detail-body > div:nth-child(2) {
    background: rgba(255, 250, 240, 0.74) !important;
    border: 1px solid rgba(230, 207, 168, 0.74) !important;
    border-radius: 16px !important;
}

.zodiac-detail-head {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.zodiac-detail-head > div:last-child {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
}

.zodiac-detail-head strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--q-text) !important;
    font-size: 1.05rem !important;
}

.zodiac-detail-head span,
.zodiac-select-info span {
    color: var(--q-muted) !important;
    font-size: 0.78rem !important;
}

.zodiac-select-item {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--q-text) !important;
    box-shadow: 0 6px 14px rgba(112, 92, 55, 0.08) !important;
}

.zodiac-select-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

.zodiac-select-info strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--q-text) !important;
}

.item-emoji,
.item-art-icon,
.inventory-item-icon,
.equipment-slot i,
.equipment-slot .item-emoji,
#equipment-index-modal #equipment-list .equipment-slot > div:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 13px !important;
    background: rgba(255, 250, 240, 0.82) !important;
    border: 1px solid rgba(230, 207, 168, 0.68) !important;
    color: var(--q-green-dark) !important;
}

.item-art-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 2px !important;
    position: relative !important;
    overflow: visible !important;
    background: radial-gradient(circle at 45% 32%, rgba(255,255,255,0.98), rgba(255,247,226,0.86) 58%, rgba(222,238,208,0.72)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 5px 12px rgba(132, 104, 65, 0.12) !important;
}

.item-art-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 3px 4px rgba(85, 62, 36, 0.22)) !important;
}

.item-art-icon i {
    display: none !important;
    font-size: 1.15rem !important;
}

.item-art-icon.item-art-icon-fallback i {
    display: inline-flex !important;
}

.inventory-slot .item-art-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
}

.equipment-icon-wrap {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 50px !important;
    width: 100% !important;
}

.equipment-slot .item-art-icon,
#equipment-index-modal #equipment-list .equipment-slot .item-art-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    border-radius: 14px !important;
    padding: 1px !important;
    overflow: visible !important;
}

.equipment-slot .item-art-icon img,
#equipment-index-modal #equipment-list .equipment-slot .item-art-icon img {
    transform: none !important;
    transform-origin: center center !important;
}

.item-action-icon .item-art-icon,
.equip-compare-icon .item-art-icon,
.refine-card-icon .item-art-icon,
.decompose-card-icon .item-art-icon,
.strength-equip-card .equip-icon .item-art-icon {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    border-radius: 20px !important;
}

.equipment-slot {
    position: relative !important;
    overflow: hidden !important;
}

.equipment-slot::after,
.inventory-slot::after {
    content: "" !important;
    position: absolute !important;
    right: -24px !important;
    bottom: -26px !important;
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    background: rgba(184, 221, 184, 0.16) !important;
    pointer-events: none !important;
}

.equipment-name,
.item-name {
    color: var(--q-text) !important;
}

.quality-normal,
.quality-magic,
.quality-rare,
.quality-epic,
.quality-legendary {
    text-shadow: none !important;
}

.quality-normal {
    color: #7b735f !important;
}

.quality-magic,
.quality-rare {
    color: #45ad63 !important;
}

.quality-epic {
    color: #8c68c8 !important;
}

.quality-legendary {
    color: #c8801f !important;
}

#player-set-bonuses,
#hero-set-bonuses,
.set-bonuses-list,
.set-bonuses-header {
    color: var(--q-text) !important;
}

.set-bonuses-title {
    color: var(--q-green-dark) !important;
}

.set-bonuses-empty {
    color: var(--q-muted) !important;
}

@media (max-width: 420px) {
    #zodiac-grid-container .zodiac-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .zodiac-slot {
        min-height: 108px !important;
    }
}

/* Phase 8: dynamic reward, refine, and decompose cards. */
#decompose-modal .modal-content,
#refine-modal .modal-content,
#auto-sell-modal .modal-content {
    max-width: min(760px, calc(100vw - 24px)) !important;
}

#decompose-modal .modal-body,
#decompose-list,
#refine-list,
#auto-sell-body {
    color: var(--q-text) !important;
}

#auto-sell-body {
    max-height: min(58vh, 460px) !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
}

.auto-sell-status-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(113, 201, 107, 0.44) !important;
    background: rgba(237, 255, 232, 0.76) !important;
}

.auto-sell-status-card > i {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 15px !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, var(--q-green), var(--q-green-dark)) !important;
}

.auto-sell-status-card strong {
    display: block !important;
    color: var(--q-text) !important;
    font-weight: 900 !important;
}

.auto-sell-status-card span {
    color: var(--q-muted) !important;
    font-size: 0.76rem !important;
}

.auto-sell-section-title {
    margin: 8px 0 !important;
    color: var(--q-text) !important;
    font-size: 0.84rem !important;
    font-weight: 900 !important;
}

#auto-sell-set-list {
    display: grid !important;
    gap: 9px !important;
}

.auto-sell-set-card {
    display: grid !important;
    gap: 8px !important;
    padding: 11px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.08) !important;
}

.auto-sell-set-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.auto-sell-set-head input,
.auto-sell-quality-grid input {
    width: 17px !important;
    height: 17px !important;
    accent-color: var(--q-green) !important;
}

.auto-sell-set-name {
    color: var(--q-text) !important;
    font-weight: 900 !important;
}

.auto-sell-quality-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.auto-sell-quality-grid input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.auto-sell-quality-chip {
    min-width: 0 !important;
    padding: 6px 7px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--q-green-dark) !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    cursor: pointer !important;
}

.auto-sell-quality-grid input:checked + .auto-sell-quality-chip {
    color: #ffffff !important;
    border-color: transparent !important;
    background: linear-gradient(180deg, var(--q-green), var(--q-green-dark)) !important;
}

.auto-sell-quality-grid input:disabled + .auto-sell-quality-chip {
    opacity: 0.45 !important;
    filter: grayscale(0.3) !important;
}

.auto-sell-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.42fr) !important;
    gap: 8px !important;
}

.lottery-result-title {
    color: var(--q-text) !important;
    margin: 0 0 12px !important;
    text-align: center !important;
}

.lottery-result-list {
    max-height: 300px !important;
    overflow-y: auto !important;
    display: grid !important;
    gap: 7px !important;
    text-align: left !important;
    padding: 2px !important;
    background: transparent !important;
}

.lottery-summary {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 0.6fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(230, 207, 168, 0.7) !important;
    background: rgba(255, 250, 240, 0.78) !important;
    font-weight: 800 !important;
}

.lottery-summary b {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.lottery-summary-gold {
    color: #c8801f !important;
}

.lottery-summary-ring {
    color: #a04fbf !important;
}

.lottery-result-divider {
    width: 100% !important;
    margin: 4px 0 !important;
    border: 0 !important;
    border-top: 1px dashed rgba(230, 207, 168, 0.9) !important;
}

@media (max-width: 520px) {
    .lottery-summary {
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }

    .lottery-summary b {
        grid-column: 2 / -1 !important;
    }
}

.zodiac-detail-stats {
    display: grid !important;
    gap: 7px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 207, 168, 0.74) !important;
    background: rgba(255, 250, 240, 0.74) !important;
}

.zodiac-detail-stats .stats-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

.zodiac-detail-stats .stats-label {
    color: var(--q-muted) !important;
}

.zodiac-detail-stats .stats-value {
    color: var(--q-text) !important;
}

#refine-list .refine-grid,
.decompose-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 10px !important;
}

.refine-card,
.decompose-card {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    color: var(--q-text) !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.08) !important;
}

.refine-card-main,
.decompose-card {
    align-items: center !important;
}

.refine-card-main {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 9px !important;
}

.decompose-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
}

.decompose-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}

.decompose-card {
    grid-template-columns: 38px minmax(0, 1fr) 64px !important;
    gap: 6px !important;
    padding: 7px 8px !important;
    border-radius: 14px !important;
}

.refine-card-icon,
.decompose-card-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(230, 207, 168, 0.72) !important;
    background: #fffaf0 !important;
    overflow: hidden !important;
}

.decompose-card-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
}

.decompose-card-icon .item-art-icon,
.decompose-card-icon .zodiac-art-icon-small {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
}

.refine-card-info,
.decompose-card-info {
    min-width: 0 !important;
}

.refine-card-name,
.decompose-card-name {
    font-weight: 900 !important;
    overflow-wrap: anywhere !important;
}

.decompose-card-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
}

.refine-card-meta,
.refine-count,
.refine-empty,
.decompose-card-meta,
.decompose-card-reward {
    color: var(--q-muted) !important;
    font-size: 0.76rem !important;
}

.decompose-card-meta,
.decompose-card-reward {
    display: inline !important;
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
}

.decompose-card-meta::after {
    content: " / " !important;
}

.decompose-card .btn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
}

.refine-attrs {
    display: grid !important;
    gap: 4px !important;
}

.refine-attr {
    color: var(--q-green-dark) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
}

.refine-card-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 4px !important;
}

.refine-card-cost {
    color: #c8801f !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
}

.decompose-actions {
    margin-top: 8px !important;
    text-align: center !important;
}

.decompose-actions .btn {
    background: linear-gradient(180deg, #ffd15c, #f4b93a) !important;
    border-color: #e0a82f !important;
    color: #6b4b14 !important;
}

.decompose-empty {
    display: grid !important;
    justify-items: center !important;
    gap: 6px !important;
    padding: 22px 12px !important;
    border: 1px dashed rgba(230, 207, 168, 0.88) !important;
    border-radius: 18px !important;
    background: rgba(255, 253, 247, 0.72) !important;
    color: var(--q-muted) !important;
    text-align: center !important;
}

.decompose-empty i {
    color: var(--q-green) !important;
    font-size: 1.6rem !important;
}

.decompose-empty strong {
    color: var(--q-text) !important;
}

.paralyze-timer {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    z-index: 10 !important;
    min-width: 24px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    background: rgba(255, 250, 240, 0.92) !important;
    color: #c8801f !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-align: center !important;
    box-shadow: 0 4px 10px rgba(112, 92, 55, 0.12) !important;
}

@media (max-width: 420px) {
    #refine-list .refine-grid,
    .decompose-grid {
        grid-template-columns: 1fr !important;
    }

    .decompose-card {
        grid-template-columns: 38px minmax(0, 1fr) 64px !important;
    }

    .decompose-card .btn {
        grid-column: auto !important;
        width: auto !important;
    }
}

/* Phase 9: combat feedback and task wording polish. */
.paralyze-overlay {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    z-index: 12 !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 217, 120, 0.92) !important;
    background: radial-gradient(circle at 35% 25%, #ffffff, #fff3cf) !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.16) !important;
    font-weight: 900 !important;
}

.paralyze-icon-badge {
    font-size: 18px !important;
    line-height: 1 !important;
}

.paralyze-overlay .paralyze-timer {
    position: static !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #c8801f !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.floating-damage,
.floating-heal {
    text-shadow:
        0 1px 0 #ffffff,
        0 0 4px rgba(255, 255, 255, 0.88) !important;
    filter: drop-shadow(0 4px 8px rgba(112, 92, 55, 0.14)) !important;
}

.floating-damage.miss {
    color: var(--q-muted) !important;
}

.world-boss-rank-content {
    max-width: min(520px, calc(100vw - 24px)) !important;
}

#world-boss-rank-modal .rank-message {
    padding: 20px !important;
    text-align: center !important;
    color: var(--q-muted) !important;
}

#world-boss-rank-modal .rank-error {
    color: #d26060 !important;
}

#world-boss-rank-modal .rank-empty {
    color: var(--q-muted) !important;
}

#world-boss-rank-modal .boss-name {
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    color: #c8801f !important;
}

#world-boss-rank-modal .boss-hp {
    margin-top: 4px !important;
    font-size: 0.78rem !important;
    color: var(--q-muted) !important;
}

#world-boss-rank-modal .rank-1 span:first-child {
    color: #d69a1c !important;
}

#world-boss-rank-modal .rank-2 span:first-child {
    color: #7f8c9a !important;
}

#world-boss-rank-modal .rank-3 span:first-child {
    color: #b87943 !important;
}

#world-boss-rank-modal .rank-item span:last-child {
    color: #c8801f !important;
    font-weight: 900 !important;
}

#task-modal .task-note-missing {
    margin-top: 10px !important;
    padding: 9px 10px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(242, 109, 109, 0.28) !important;
    background: rgba(255, 245, 245, 0.86) !important;
}

/* Adventure monster lane fix: keep character and monsters separated on Mini Program width. */
#panel-combat .combat-split-layout {
    grid-template-columns: minmax(92px, 0.72fr) minmax(188px, 1.28fr) !important;
    column-gap: 14px !important;
}

#panel-combat .monster-group-container {
    min-width: 0 !important;
    overflow: visible !important;
}

#panel-combat .monster-group-container .orb-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(82px, 1fr)) !important;
    gap: 18px 12px !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
}

#panel-combat .monster-group-container .orb-group > div {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 138px !important;
    display: grid !important;
    grid-template-rows: 76px auto !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 7px !important;
    text-align: center !important;
}

#panel-combat .monster-group-container .monster-orb {
    width: 76px !important;
    height: 76px !important;
    min-height: 76px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}

#panel-combat .monster-group-container .monster-icon {
    width: 88% !important;
    height: 88% !important;
    background: transparent !important;
    border-radius: 18px !important;
    overflow: visible !important;
}

#panel-combat .monster-group-container .monster-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
    filter: saturate(1.06) brightness(1.03) contrast(1.02) !important;
}

#panel-combat .monster-group-container .monster-info {
    width: min(86px, 100%) !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    border-radius: 12px !important;
    display: grid !important;
    align-content: center !important;
    gap: 1px !important;
}

#panel-combat .monster-group-container .monster-name {
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

#panel-combat .monster-group-container .monster-level,
#panel-combat .monster-group-container .monster-info .hp-text {
    font-size: 10px !important;
    line-height: 1.05 !important;
}

/* Inventory and warehouse cards match the compact equipment grid. */
#panel-inventory-equip #inventory-grid,
#panel-inventory-equip #warehouse-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 78px !important;
    align-content: start !important;
    gap: 6px !important;
    min-height: 0 !important;
    max-height: min(50vh, 460px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: transparent !important;
}

#panel-inventory-equip #inventory-grid .inventory-slot,
#panel-inventory-equip #warehouse-grid .inventory-slot {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    aspect-ratio: auto !important;
    padding: 5px 4px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: rgba(255, 252, 244, 0.94) !important;
    border: 1px solid rgba(232, 205, 160, 0.9) !important;
    box-shadow: 0 4px 12px rgba(132, 104, 65, 0.1) !important;
    overflow: hidden !important;
}

#panel-inventory-equip #inventory-grid .inventory-slot.has-item,
#panel-inventory-equip #warehouse-grid .inventory-slot.has-item {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    aspect-ratio: auto !important;
}

#panel-inventory-equip #inventory-grid .inventory-item-icon,
#panel-inventory-equip #warehouse-grid .inventory-item-icon {
    order: 1 !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    flex: 0 0 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#panel-inventory-equip #inventory-grid .inventory-slot .item-art-icon,
#panel-inventory-equip #warehouse-grid .inventory-slot .item-art-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#panel-inventory-equip #inventory-grid .inventory-slot .item-art-icon img,
#panel-inventory-equip #warehouse-grid .inventory-slot .item-art-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
}

#panel-inventory-equip #inventory-grid .inventory-slot .item-name,
#panel-inventory-equip #warehouse-grid .inventory-slot .item-name {
    position: static !important;
    order: 2 !important;
    width: 100% !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--q-text) !important;
    font-size: 0.66rem !important;
    line-height: 1.14 !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-all !important;
    pointer-events: none !important;
}

#panel-inventory-equip #inventory-grid .inventory-slot .item-count,
#panel-inventory-equip #warehouse-grid .inventory-slot .item-count {
    top: 4px !important;
    right: 5px !important;
    bottom: auto !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: rgba(86, 191, 105, 0.92) !important;
    color: #fff !important;
    font-size: 0.62rem !important;
    line-height: 16px !important;
    box-shadow: 0 2px 5px rgba(75, 135, 75, 0.18) !important;
}

.item-quality-slot {
    border-color: var(--item-quality-color, #d8bd7a) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.72),
        0 6px 14px rgba(135, 102, 45, 0.08) !important;
}

.item-quality-slot::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 5px !important;
    background: var(--item-quality-color, #d8bd7a) !important;
    opacity: 0.9 !important;
    border-radius: inherit !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.item-quality-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: var(--item-quality-color, #d8bd7a) !important;
    color: #fffaf1 !important;
    font-size: 0.58rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(95, 69, 28, 0.2) !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.item-quality-normal .item-quality-badge {
    color: #7c6a41 !important;
    background: #fff1ca !important;
    border: 1px solid #e7cf91 !important;
}

.item-quality-slot .equipment-icon-wrap,
.item-quality-slot .inventory-item-icon,
.item-quality-slot .equipment-name,
.item-quality-slot .item-name,
.item-quality-slot .item-count {
    position: relative !important;
    z-index: 4 !important;
}

#panel-inventory-equip #strength-merchant-btn {
    background: #ffffff !important;
    color: #4a7c59 !important;
    border-color: var(--q-border-green) !important;
}

@media (max-width: 420px) {
    #panel-inventory-equip #inventory-grid,
    #panel-inventory-equip #warehouse-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-rows: 76px !important;
        gap: 5px !important;
        min-height: 0 !important;
        align-content: start !important;
    }

    #panel-inventory-equip #inventory-grid .inventory-slot,
    #panel-inventory-equip #warehouse-grid .inventory-slot,
    #panel-inventory-equip #inventory-grid .inventory-slot.has-item,
    #panel-inventory-equip #warehouse-grid .inventory-slot.has-item {
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
        padding: 5px 3px !important;
    }

    #panel-inventory-equip #inventory-grid .inventory-item-icon,
    #panel-inventory-equip #warehouse-grid .inventory-item-icon {
        height: 46px !important;
        min-height: 46px !important;
        flex-basis: 46px !important;
    }

    #panel-inventory-equip #inventory-grid .inventory-slot .item-art-icon,
    #panel-inventory-equip #warehouse-grid .inventory-slot .item-art-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }
}

/* Combat portrait/monster visual fix: no monster overflow or canvas artifacts. */
#panel-combat .combat-split-layout {
    grid-template-columns: minmax(108px, 0.78fr) minmax(174px, 1.22fr) !important;
    column-gap: 12px !important;
}

#panel-combat .combat-card {
    width: 88px !important;
    height: 88px !important;
    min-height: 88px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}

#panel-combat .card-avatar {
    width: 78% !important;
    height: 78% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    opacity: 1 !important;
}

#panel-combat .card-avatar img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

#panel-combat .monster-group-container .monster-orb {
    width: 74px !important;
    height: 74px !important;
    min-height: 74px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

#panel-combat .monster-orb::before,
#panel-combat .monster-orb::after,
#panel-combat .monster-icon::before,
#panel-combat .monster-icon::after {
    display: none !important;
    content: none !important;
}

#panel-combat .monster-orb .ring-canvas {
    z-index: 4 !important;
}

#panel-combat .monster-group-container .monster-icon {
    position: relative !important;
    z-index: 10 !important;
    width: 78% !important;
    height: 78% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.45) !important;
}

#panel-combat .monster-group-container .monster-icon img {
    width: 92% !important;
    height: 92% !important;
    max-width: 92% !important;
    max-height: 92% !important;
    display: block !important;
    object-fit: contain !important;
    transform: none !important;
    filter: saturate(1.04) brightness(1.02) contrast(1.02) !important;
}

#panel-combat .monster-group-container .orb-group > div {
    grid-template-rows: 74px auto !important;
    min-height: 134px !important;
    gap: 8px !important;
}

@media (max-width: 420px) {
    #panel-combat .combat-split-layout {
        grid-template-columns: minmax(98px, 0.78fr) minmax(166px, 1.22fr) !important;
        column-gap: 10px !important;
    }

    #panel-combat .combat-card {
        width: 82px !important;
        height: 82px !important;
        min-height: 82px !important;
    }

    #panel-combat .monster-group-container .monster-orb {
        width: 72px !important;
        height: 72px !important;
        min-height: 72px !important;
    }
}

#panel-combat .monster-orb .ring-canvas {
    display: none !important;
}

#panel-combat .monster-info .hp-text {
    color: #7d4cff !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

#panel-combat .combat-split-layout.world-boss-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "monsters"
        "actors"
        "feed" !important;
    justify-items: center !important;
}

#panel-combat .combat-split-layout.world-boss-layout .combat-left,
#panel-combat .combat-split-layout.world-boss-layout .combat-feed {
    width: 100% !important;
}

#panel-combat .combat-split-layout.world-boss-layout .combat-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

#panel-combat .monster-group-container.world-boss-active {
    width: 100% !important;
    min-height: 238px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#panel-combat .monster-group-container.world-boss-active .orb-group.world-boss-mode {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#panel-combat .monster-group-container.world-boss-active .orb-group.world-boss-mode > div {
    max-width: 190px !important;
    min-height: 218px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
}

#panel-combat .monster-group-container.world-boss-active .monster-orb.world-boss {
    width: 150px !important;
    height: 150px !important;
    min-height: 150px !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    box-shadow:
        0 16px 30px rgba(116, 79, 29, 0.22),
        0 0 0 4px rgba(255, 218, 110, 0.32) !important;
}

#panel-combat .monster-group-container.world-boss-active .monster-icon {
    width: 86% !important;
    height: 86% !important;
    border-radius: 28px !important;
}

#panel-combat .monster-group-container.world-boss-active .monster-icon img {
    width: 96% !important;
    height: 96% !important;
    max-width: 96% !important;
    max-height: 96% !important;
}

/* World boss challenge prompt and battle layout polish. */
#world-boss-challenge-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
}

#world-boss-challenge-modal .modal-content {
    width: min(92vw, 330px) !important;
    max-width: 330px !important;
    margin: auto !important;
    text-align: center !important;
    border-radius: 18px !important;
}

#world-boss-challenge-modal .modal-header {
    justify-content: center !important;
    text-align: center !important;
    font-size: 1.12rem !important;
    letter-spacing: 0 !important;
}

#world-boss-challenge-modal .modal-body,
#world-boss-challenge-modal .modal-content > div:not(.modal-header):not(.modal-buttons) {
    text-align: center !important;
    justify-items: center !important;
}

#world-boss-challenge-modal #wb-challenge-countdown {
    color: #ffc83d !important;
    font-weight: 900 !important;
}

#world-boss-challenge-modal .modal-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

#panel-combat .combat-split-layout.world-boss-layout .combat-left {
    display: flex !important;
    justify-content: center !important;
}

#panel-combat .combat-split-layout.world-boss-layout .combat-cards {
    width: 100% !important;
    max-width: 236px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 104px) !important;
    justify-content: center !important;
    align-items: start !important;
    gap: 12px !important;
}

#panel-combat .combat-split-layout.world-boss-layout .player-wrapper,
#panel-combat .combat-split-layout.world-boss-layout .hero-wrapper {
    width: 104px !important;
    min-width: 104px !important;
    align-items: center !important;
}

#panel-combat .combat-split-layout.world-boss-layout .combat-card {
    width: 92px !important;
    height: 92px !important;
    min-height: 92px !important;
}

#panel-combat .combat-split-layout.world-boss-layout .card-info {
    width: 100% !important;
    text-align: center !important;
}

/* Final combat alignment pass: crop monster artifacts and balance actor lane. */
#panel-combat .combat-split-layout:not(.world-boss-layout) .combat-left {
    padding-top: 20px !important;
}

#panel-combat .combat-split-layout:not(.world-boss-layout) .combat-cards {
    transform: translateY(10px) !important;
}

#panel-combat .monster-group-container .monster-orb,
#panel-combat .monster-group-container .monster-icon {
    overflow: hidden !important;
}

#panel-combat .monster-group-container .monster-icon {
    width: 90% !important;
    height: 90% !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    clip-path: none !important;
}

#panel-combat .monster-group-container .monster-icon img {
    width: 78% !important;
    height: 78% !important;
    max-width: 78% !important;
    max-height: 78% !important;
    object-fit: contain !important;
    transform: none !important;
    margin: auto !important;
    display: block !important;
}

#panel-combat .monster-group-container .monster-orb.boss .monster-icon,
#panel-combat .monster-group-container .monster-orb.world-boss .monster-icon {
    clip-path: none !important;
}

#panel-combat .monster-group-container.world-boss-active .monster-icon {
    clip-path: none !important;
}

#panel-combat .monster-group-container.world-boss-active .monster-icon img {
    width: 92% !important;
    height: 92% !important;
    max-width: 92% !important;
    max-height: 92% !important;
}

/* Q版坐骑驿站：购买列表与空状态 */
#parking-buy-modal .modal-content {
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: 360px !important;
}

#parking-buy-modal #parking-vehicles-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-height: min(62vh, 520px) !important;
    overflow-y: auto !important;
    padding: 4px 2px 8px !important;
}

#parking-buy-modal .vehicle-buy-card {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 92px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(231, 206, 161, 0.95) !important;
    background: linear-gradient(135deg, #fffdf8 0%, #f4fff2 100%) !important;
    box-shadow: 0 8px 18px rgba(92, 72, 45, 0.08) !important;
    color: var(--q-text) !important;
}

#parking-buy-modal .vehicle-buy-card:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(90, 196, 103, 0.55) !important;
    background: linear-gradient(135deg, #ffffff 0%, #efffe9 100%) !important;
}

#parking-buy-modal .vehicle-icon.vehicle-buy-icon {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff, #f2ffe9) !important;
}

#parking-buy-modal .vehicle-icon.vehicle-buy-icon img {
    transform: scale(1.42) !important;
}

#parking-buy-modal .vehicle-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 6px !important;
}

#parking-buy-modal .vehicle-info strong {
    color: #5d4931 !important;
    font-size: 0.96rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#parking-buy-modal .vehicle-buy-meta {
    display: grid !important;
    gap: 3px !important;
    color: #8d7856 !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
}

#parking-buy-modal .vehicle-buy-price,
#parking-buy-modal .vehicle-buy-exp {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#parking-buy-modal .buy-vehicle {
    min-width: 54px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

#panel-parking .parking-empty-card {
    display: grid !important;
    justify-items: center !important;
    gap: 12px !important;
    padding: 22px 16px !important;
    text-align: center !important;
}

#panel-parking .vehicle-icon.vehicle-empty-preview {
    width: 132px !important;
    height: 108px !important;
    min-width: 132px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #ffffff, #f1ffe7) !important;
}

#panel-parking .vehicle-icon.vehicle-empty-preview img {
    transform: scale(1.42) !important;
}

#panel-parking .parking-empty-card p {
    margin: 0 !important;
    color: #8d7856 !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

#panel-parking .parking-intro-vehicle-icon {
    width: 54px !important;
    height: 54px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff, #ecffe6) !important;
}

#panel-parking .parking-intro-vehicle-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: scale(1.72) !important;
    display: block !important;
}

#panel-parking .station-intro {
    grid-template-columns: 58px minmax(0, 1fr) !important;
}

@media (max-width: 360px) {
    #parking-buy-modal .vehicle-buy-card {
        grid-template-columns: 64px minmax(0, 1fr) 52px !important;
        gap: 8px !important;
        padding: 9px !important;
    }

    #parking-buy-modal .vehicle-icon.vehicle-buy-icon {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
    }
}

/* 多人阵营竞技 */
#panel-arena .arena-container {
    display: block !important;
}

.arena-shell {
    display: grid !important;
    gap: 12px !important;
}

.arena-status-card,
.arena-target-section,
.arena-team-card,
.arena-log-card,
.arena-rewards {
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    box-shadow: 0 8px 18px rgba(112, 92, 55, 0.08) !important;
    padding: 12px !important;
}

.arena-status-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
}

.arena-status-card span {
    display: block !important;
    color: #9a8564 !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
}

.arena-status-card strong {
    display: block !important;
    color: #4f3e2b !important;
    font-size: 1.08rem !important;
}

.arena-status-card em {
    display: block !important;
    color: #5ac467 !important;
    font-style: normal !important;
    font-weight: 900 !important;
    margin-top: 2px !important;
}

.arena-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.arena-actions .btn {
    min-width: 92px !important;
    border-radius: 12px !important;
}

.arena-actions .arena-test-btn {
    min-width: 78px !important;
    background: #fffdf8 !important;
    color: #6fa07a !important;
    border: 1px solid rgba(151, 213, 163, 0.8) !important;
}

.arena-target-section h4,
.arena-team-card h4,
.arena-log-card h4,
.arena-rewards h4 {
    margin: 0 0 10px !important;
    color: #5d4931 !important;
    font-size: 0.98rem !important;
}

.arena-enemy-list,
.arena-team-list {
    display: grid !important;
    gap: 8px !important;
}

.arena-enemy-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.arena-teams-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.arena-player-card {
    position: relative !important;
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(230, 207, 168, 0.8) !important;
    background: linear-gradient(135deg, #fffdf8, #f4fff2) !important;
}

.arena-player-card.peach {
    border-color: rgba(249, 115, 143, 0.42) !important;
}

.arena-player-card.star {
    border-color: rgba(86, 167, 255, 0.42) !important;
}

.arena-player-card.selected {
    box-shadow: 0 0 0 2px rgba(90, 196, 103, 0.32), 0 8px 18px rgba(90, 196, 103, 0.12) !important;
}

.arena-player-card.dead {
    opacity: 0.55 !important;
    filter: grayscale(0.35) !important;
}

.arena-player-top {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    align-items: center !important;
}

.arena-player-top strong {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    color: #4f3e2b !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.arena-bot-tag {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    padding: 1px 5px !important;
    border-radius: 999px !important;
    background: rgba(255, 194, 89, 0.22) !important;
    color: #b57919 !important;
    border: 1px solid rgba(245, 181, 69, 0.55) !important;
    font-size: 0.62rem !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
}

.arena-player-top span,
.arena-player-meta {
    color: #917b5b !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
}

.arena-player-meta {
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.arena-hpbar {
    position: relative !important;
    height: 16px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(230, 230, 220, 0.75) !important;
    border: 1px solid rgba(204, 188, 154, 0.65) !important;
}

.arena-hpbar-fill {
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #ff8fa3, #f9738f) !important;
}

.arena-hpbar span {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #5d4931 !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
}

.arena-target-btn {
    min-height: 30px !important;
    border-radius: 999px !important;
}

.arena-empty,
.arena-empty-box {
    color: #9a8564 !important;
    font-weight: 800 !important;
    text-align: center !important;
}

.arena-empty-box {
    padding: 18px 10px !important;
    border-radius: 14px !important;
    background: rgba(255, 252, 242, 0.72) !important;
    border: 1px dashed rgba(230, 207, 168, 0.86) !important;
}

.arena-log-list {
    display: grid !important;
    gap: 6px !important;
    max-height: 260px !important;
    overflow-y: auto !important;
}

.arena-log-line {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: start !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    background: rgba(255, 252, 242, 0.72) !important;
    color: #6d5a3f !important;
    font-weight: 800 !important;
}

.arena-log-line span {
    color: #b4935c !important;
    font-size: 0.72rem !important;
}

.arena-log-line p {
    margin: 0 !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

.arena-log-line.attack p,
.arena-log-line.ko p,
.arena-log-line.finish p {
    color: #4f8f54 !important;
}

.arena-rewards > div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 7px 0 !important;
    border-top: 1px solid rgba(230, 207, 168, 0.52) !important;
    color: #6d5a3f !important;
    font-weight: 800 !important;
}

@media (max-width: 420px) {
    .arena-status-card {
        grid-template-columns: 1fr !important;
    }

    .arena-actions {
        justify-content: stretch !important;
    }

    .arena-actions .btn {
        flex: 1 1 120px !important;
    }

    .arena-enemy-list,
    .arena-teams-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Phase 10: Q adventure combat stage and readable hit feedback. */
#panel-combat .combat-split-layout {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: clamp(420px, 58vh, 680px) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(170, 212, 149, 0.86) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 248, 222, 0.18)),
        var(--battle-scene-url, url("/data/q_map_scenes/1.png")) center / cover no-repeat !important;
    box-shadow: 0 18px 42px rgba(94, 79, 50, 0.18) !important;
}

#panel-combat .combat-split-layout::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    background:
        radial-gradient(circle at 22% 78%, rgba(255, 255, 255, 0.52), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(80, 121, 74, 0.16) 100%) !important;
    pointer-events: none !important;
}

#panel-combat .combat-split-layout::after {
    content: attr(data-map-name) !important;
    display: block !important;
    position: absolute !important;
    left: 18px !important;
    top: 14px !important;
    z-index: 3 !important;
    max-width: min(48%, 320px) !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 224, 142, 0.88) !important;
    background: rgba(255, 252, 238, 0.82) !important;
    color: #5d4425 !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 20px rgba(86, 64, 35, 0.12) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#panel-combat .combat-left,
#panel-combat .combat-right {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
}

#panel-combat .combat-feed {
    position: relative !important;
    z-index: 4 !important;
}

#panel-combat .combat-card,
#panel-combat .monster-orb {
    background:
        radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.78), rgba(255, 250, 220, 0.42) 52%, rgba(132, 197, 112, 0.22)) !important;
    border-color: rgba(255, 232, 148, 0.95) !important;
    box-shadow:
        0 13px 22px rgba(83, 66, 42, 0.18),
        inset 0 0 0 2px rgba(255, 255, 255, 0.45) !important;
}

#panel-combat .combat-card::after,
#panel-combat .monster-orb::after {
    content: "" !important;
    position: absolute !important;
    left: 14% !important;
    right: 14% !important;
    bottom: -14px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: rgba(62, 74, 45, 0.18) !important;
    filter: blur(4px) !important;
    pointer-events: none !important;
}

#panel-combat .monster-orb.dead {
    filter: grayscale(0.32) opacity(0.72) !important;
    transform: scale(0.92) rotate(-2deg) !important;
}

#panel-combat .combat-effect-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 8 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

.floating-damage,
.floating-heal {
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
    text-shadow:
        0 2px 0 rgba(87, 48, 24, 0.45),
        0 0 10px rgba(255, 255, 255, 0.85) !important;
    animation: qDamagePop 780ms cubic-bezier(.2, .9, .25, 1) forwards !important;
}

.floating-damage {
    color: #fff7d1 !important;
    font-size: clamp(1.05rem, 2.2vw, 1.5rem) !important;
}

.floating-damage.critical {
    color: #ff5a3f !important;
    font-size: clamp(1.28rem, 2.7vw, 1.85rem) !important;
}

.floating-damage.lethal {
    color: #ffcf45 !important;
    font-size: clamp(1.45rem, 3vw, 2.1rem) !important;
    text-shadow:
        0 2px 0 rgba(120, 38, 16, 0.62),
        0 0 16px rgba(255, 73, 54, 0.75) !important;
}

.floating-damage.poison {
    color: #42ce6a !important;
}

.floating-damage.burn {
    color: #ff862f !important;
}

.floating-damage.skill {
    color: #54c9ff !important;
}

.floating-damage.miss {
    color: #e8edf5 !important;
    animation-name: qMissFloat !important;
}

.floating-heal {
    color: #50cf79 !important;
    font-size: clamp(1.05rem, 2.2vw, 1.55rem) !important;
}

.combat-hit-slash,
.combat-skill-burst,
.combat-heal-glow,
.combat-aoe-ring {
    position: absolute !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9 !important;
}

.combat-hit-slash {
    width: 92px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border-top: 6px solid rgba(255, 255, 255, 0.94) !important;
    border-right: 8px solid rgba(255, 215, 90, 0.88) !important;
    filter: drop-shadow(0 0 12px rgba(255, 218, 99, 0.8)) !important;
    animation: qSlash 260ms ease-out forwards !important;
}

.combat-hit-slash.from-enemy {
    border-right-color: rgba(255, 132, 132, 0.88) !important;
    filter: drop-shadow(0 0 12px rgba(255, 116, 116, 0.72)) !important;
    transform: translate(-50%, -50%) scaleX(-1) !important;
}

.combat-skill-burst {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    animation: qSkillBurst 520ms ease-out forwards !important;
}

.combat-skill-burst.arcane {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.94), rgba(156, 116, 255, 0.62) 38%, transparent 70%) !important;
}

.combat-skill-burst.fire {
    background: radial-gradient(circle, rgba(255, 247, 178, 0.95), rgba(255, 115, 45, 0.74) 42%, transparent 72%) !important;
}

.combat-skill-burst.storm {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(80, 204, 255, 0.74) 44%, transparent 74%) !important;
}

.combat-skill-burst.ice {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(138, 219, 255, 0.66) 42%, transparent 72%) !important;
}

.combat-heal-glow {
    width: 86px !important;
    height: 86px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(229, 255, 210, 0.9), rgba(88, 207, 118, 0.45) 40%, transparent 70%) !important;
    animation: qHealGlow 620ms ease-out forwards !important;
}

.combat-aoe-ring {
    width: min(58vw, 360px) !important;
    height: min(26vw, 156px) !important;
    border-radius: 50% !important;
    border: 3px solid rgba(255, 222, 112, 0.76) !important;
    box-shadow: 0 0 24px rgba(255, 210, 88, 0.55) !important;
    animation: qAoeRing 520ms ease-out forwards !important;
}

.q-hit-flash {
    animation: qHitFlash 180ms ease-out !important;
}

.hit-shake {
    animation: qHitShake 220ms ease-out !important;
}

.q-attack-lunge {
    animation: qAttackLunge 280ms ease-out !important;
}

.q-hero-cast {
    animation: qHeroCast 320ms ease-out !important;
}

@keyframes qDamagePop {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(0.68); }
    18% { opacity: 1; transform: translate(-50%, -68%) scale(1.18); }
    100% { opacity: 0; transform: translate(-50%, -138%) scale(0.96); }
}

@keyframes qMissFloat {
    0% { opacity: 0; transform: translate(-50%, -35%) scale(0.82); }
    25% { opacity: 1; transform: translate(-30%, -62%) scale(1); }
    100% { opacity: 0; transform: translate(12%, -118%) scale(0.94); }
}

@keyframes qSlash {
    0% { opacity: 0; transform: translate(-74%, -50%) rotate(-18deg) scale(0.62); }
    45% { opacity: 1; transform: translate(-50%, -50%) rotate(-18deg) scale(1.05); }
    100% { opacity: 0; transform: translate(-22%, -50%) rotate(-18deg) scale(1.22); }
}

@keyframes qSkillBurst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.34); filter: blur(1px); }
    35% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.48); filter: blur(3px); }
}

@keyframes qHealGlow {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.42); }
    45% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.42); }
}

@keyframes qAoeRing {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    35% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}

@keyframes qHitFlash {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.55) saturate(1.18); }
    100% { filter: brightness(1); }
}

@keyframes qHitShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    55% { transform: translateX(5px); }
    80% { transform: translateX(-2px); }
}

@keyframes qAttackLunge {
    0%, 100% { transform: translateX(0) scale(1); }
    42% { transform: translateX(14px) scale(1.04); }
}

@keyframes qHeroCast {
    0%, 100% { transform: translateY(0) scale(1); }
    42% { transform: translateY(-8px) scale(1.05); }
}

@media (max-width: 720px) {
    #panel-combat .combat-split-layout {
        min-height: 520px !important;
        border-radius: 14px !important;
    }

    #panel-combat .combat-split-layout::after {
        max-width: calc(100% - 32px) !important;
        font-size: 0.8rem !important;
    }

    .combat-hit-slash {
        width: 70px !important;
        height: 30px !important;
    }

    .combat-skill-burst,
    .combat-heal-glow {
        width: 62px !important;
        height: 62px !important;
    }
}

@media (min-width: 1180px) {
    body[data-active-panel="combat"] .container {
        display: grid !important;
        grid-template-columns: minmax(260px, 320px) minmax(520px, 1fr) minmax(300px, 360px) !important;
        gap: 14px !important;
        align-items: start !important;
        max-width: 1680px !important;
        margin: 0 auto !important;
        padding: 0 14px 24px !important;
    }

    body[data-active-panel="combat"] .game-topbar,
    body[data-active-panel="combat"] #topbar-placeholder {
        grid-column: 1 / -1 !important;
    }

    body[data-active-panel="combat"] #panel-status,
    body[data-active-panel="combat"] #panel-inventory-equip,
    body[data-active-panel="combat"] #panel-combat {
        display: block !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    body[data-active-panel="combat"] #panel-status {
        grid-column: 1 !important;
        grid-row: 2 !important;
        position: sticky !important;
        top: 88px !important;
        max-height: calc(100vh - 104px) !important;
        overflow: auto !important;
    }

    body[data-active-panel="combat"] #panel-combat {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip {
        grid-column: 3 !important;
        grid-row: 2 !important;
        position: sticky !important;
        top: 88px !important;
        max-height: calc(100vh - 104px) !important;
        overflow: auto !important;
    }

    body[data-active-panel="combat"] #panel-arena,
    body[data-active-panel="combat"] #panel-skills,
    body[data-active-panel="combat"] #panel-social,
    body[data-active-panel="combat"] #panel-farm,
    body[data-active-panel="combat"] #panel-map {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-status .quick-buttons,
    body[data-active-panel="combat"] #panel-inventory-equip .set-bonuses {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-bottom-toolbar {
        position: static !important;
        padding-bottom: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Phase 11: landscape mobile game shell. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    :root {
        --landscape-hud-h: 54px;
        --landscape-nav-h: 0px;
        --landscape-side-w: clamp(238px, 24vw, 360px);
        --landscape-gap: 10px;
        --landscape-panel-bg: rgba(255, 252, 238, 0.78);
        --landscape-panel-strong: rgba(255, 248, 220, 0.9);
        --landscape-line: rgba(218, 179, 105, 0.62);
        --landscape-shadow: 0 12px 30px rgba(65, 55, 36, 0.18);
    }

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
        background:
            linear-gradient(180deg, rgba(193, 229, 244, 0.82), rgba(243, 255, 228, 0.96)),
            url("/data/q_map_scenes/1.png") center / cover no-repeat fixed !important;
    }

    body {
        padding: 0 !important;
        font-size: 13px !important;
        color: #4c3c28 !important;
    }

    body::before {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: -1 !important;
        background:
            linear-gradient(90deg, rgba(255, 249, 229, 0.64), transparent 24%, transparent 76%, rgba(255, 249, 229, 0.68)),
            radial-gradient(circle at 48% 12%, rgba(255, 255, 255, 0.36), transparent 34%) !important;
        pointer-events: none !important;
    }

    .container {
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: calc(var(--landscape-hud-h) + 8px) 10px 8px !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    .game-topbar {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: 8px !important;
        z-index: 60 !important;
        height: var(--landscape-hud-h) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 7px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        overflow: hidden !important;
        border: 1px solid rgba(242, 210, 141, 0.92) !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, rgba(255, 251, 237, 0.88), rgba(255, 241, 200, 0.78)) !important;
        box-shadow: var(--landscape-shadow) !important;
        backdrop-filter: blur(10px) !important;
    }

    .logo-area {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 128px !important;
        max-width: 220px !important;
        overflow: hidden !important;
    }

    .logo-area h1 {
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1.05 !important;
        color: #3f7e45 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .logo-area .subtitle {
        display: none !important;
    }

    .player-status-bar {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    .topbar-stat {
        min-width: 0 !important;
        height: 36px !important;
        padding: 0 9px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(223, 190, 126, 0.7) !important;
        background: rgba(255, 255, 248, 0.74) !important;
        color: #5c472d !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    .topbar-stat.hp-bar-compact {
        flex: 0 1 230px !important;
    }

    .hp-minibar {
        width: clamp(72px, 12vw, 136px) !important;
        height: 10px !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        background: rgba(93, 68, 46, 0.16) !important;
    }

    .btn-topbar-logout {
        height: 36px !important;
        min-width: 42px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
    }

    #topbar-placeholder {
        display: none !important;
    }

    .panel.mobile-panel {
        display: none !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 10px !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        border: 1px solid var(--landscape-line) !important;
        background: linear-gradient(145deg, rgba(255, 252, 241, 0.76), rgba(237, 255, 228, 0.68)) !important;
        box-shadow: var(--landscape-shadow) !important;
        backdrop-filter: blur(10px) !important;
    }

    .panel.mobile-panel.active {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .panel-header {
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 8px 7px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        border-bottom: 1px solid rgba(226, 190, 119, 0.72) !important;
        color: #4d3e2b !important;
        font-size: 1rem !important;
        font-weight: 1000 !important;
    }

    .panel-header > i {
        width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        color: #fffef4 !important;
        background: linear-gradient(180deg, #66c874, #39a955) !important;
        box-shadow: 0 8px 14px rgba(62, 154, 72, 0.24) !important;
    }

    .panel-subtitle {
        margin-left: auto !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        color: #92784e !important;
        white-space: nowrap !important;
    }

    .mobile-nav {
        position: fixed !important;
        left: 50% !important;
        top: 16px !important;
        z-index: 80 !important;
        width: min(440px, calc(100vw - 560px)) !important;
        height: 38px !important;
        transform: translateX(-50%) !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 3px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(232, 198, 132, 0.74) !important;
        background: rgba(255, 251, 234, 0.7) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.56), 0 7px 16px rgba(66, 52, 32, 0.12) !important;
        backdrop-filter: blur(12px) !important;
    }

    .nav-item {
        min-width: 0 !important;
        height: 30px !important;
        padding: 0 8px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border-radius: 999px !important;
        border: 1px solid transparent !important;
        color: #7a623d !important;
        font-weight: 1000 !important;
        background: transparent !important;
        transition: transform 140ms ease, background 140ms ease, border-color 140ms ease !important;
    }

    .nav-item i {
        margin: 0 !important;
        font-size: 0.88rem !important;
    }

    .nav-item span {
        display: block !important;
        max-width: 100% !important;
        font-size: 0.68rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .nav-item.active {
        color: #227f48 !important;
        border-color: rgba(118, 208, 123, 0.72) !important;
        background: linear-gradient(180deg, rgba(218, 255, 207, 0.96), rgba(177, 236, 159, 0.78)) !important;
        transform: none !important;
        box-shadow: 0 5px 10px rgba(55, 142, 70, 0.14) !important;
    }

    .btn,
    button {
        min-height: 34px !important;
        border-radius: 999px !important;
        border-color: rgba(104, 188, 112, 0.62) !important;
        background: linear-gradient(180deg, rgba(255, 255, 250, 0.96), rgba(232, 255, 226, 0.78)) !important;
        color: #3f784b !important;
        font-weight: 900 !important;
        box-shadow: 0 8px 18px rgba(69, 120, 73, 0.12) !important;
    }

    .btn:hover,
    button:hover {
        transform: translateY(-1px) !important;
    }

    .tab-btn.active,
    .tab.active {
        background: linear-gradient(180deg, #68c972, #37aa56) !important;
        border-color: rgba(61, 157, 74, 0.8) !important;
        color: #fffef5 !important;
    }
}

@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] .container {
        grid-template-columns: var(--landscape-side-w) minmax(440px, 1fr) var(--landscape-side-w) !important;
        gap: var(--landscape-gap) !important;
        align-items: stretch !important;
        padding: calc(var(--landscape-hud-h) + 8px) 14px 10px !important;
        max-width: none !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-status,
    body[data-active-panel="combat"] #panel-combat,
    body[data-active-panel="combat"] #panel-inventory-equip {
        display: grid !important;
        height: 100% !important;
        max-height: none !important;
        position: relative !important;
        top: auto !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    body[data-active-panel="combat"] #panel-status {
        grid-column: 1 !important;
        grid-row: 1 !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    body[data-active-panel="combat"] #panel-combat {
        grid-column: 2 !important;
        grid-row: 1 !important;
        grid-template-rows: auto minmax(0, 1fr) auto minmax(46px, auto) !important;
        padding: 8px !important;
        background: rgba(255, 255, 246, 0.36) !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip {
        grid-column: 3 !important;
        grid-row: 1 !important;
        grid-template-rows: auto auto minmax(0, auto) auto minmax(120px, 1fr) !important;
    }

    body[data-active-panel="combat"] #panel-status .quick-buttons {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 8px 0 0 !important;
    }

    body[data-active-panel="combat"] #panel-status .quick-buttons .btn {
        min-width: 0 !important;
        padding: 0 6px !important;
        font-size: 0.72rem !important;
    }

    body[data-active-panel="combat"] #panel-arena,
    body[data-active-panel="combat"] #panel-skills,
    body[data-active-panel="combat"] #panel-social,
    body[data-active-panel="combat"] #panel-farm,
    body[data-active-panel="combat"] #panel-map {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-status #player-status-block,
    body[data-active-panel="combat"] #panel-status #hero-status-block,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section {
        min-height: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        scrollbar-width: thin !important;
    }

    body[data-active-panel="combat"] #panel-status .player-core-card,
    body[data-active-panel="combat"] #panel-status .hero-core-card {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 9px !important;
        border-radius: 16px !important;
        background: var(--landscape-panel-strong) !important;
    }

    body[data-active-panel="combat"] #panel-status .player-core-avatar-wrap,
    body[data-active-panel="combat"] #panel-status .player-core-card .avatar-img {
        width: 64px !important;
        height: 64px !important;
    }

    body[data-active-panel="combat"] #panel-status .player-core-title h3 {
        font-size: 0.86rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[data-active-panel="combat"] #panel-status .status-attribute-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }

    body[data-active-panel="combat"] #panel-status .stats-row {
        min-height: 38px !important;
        padding: 6px 7px !important;
        border-radius: 11px !important;
        background: rgba(255, 255, 248, 0.72) !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .panel-header {
        margin-bottom: 0 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-tabs,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot {
        min-height: 68px !important;
        border-radius: 12px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot i {
        font-size: 1rem !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-name,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-type {
        font-size: 0.7rem !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-bottom-toolbar {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-controls {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        max-height: 82px !important;
        overflow: auto !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-controls .btn {
        min-height: 34px !important;
        padding: 0 6px !important;
        font-size: 0.68rem !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-grid {
        width: 100% !important;
        max-height: 100% !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        align-content: start !important;
        overflow-y: auto !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot {
        min-height: 58px !important;
        border-radius: 11px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip h4 {
        margin: 6px 0 !important;
        font-size: 0.86rem !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section h4,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section h4 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 28px !important;
        margin: 4px 0 6px !important;
        padding: 0 2px !important;
    }
}

@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    #panel-combat.active .panel-header {
        display: none !important;
    }

    #panel-combat .combat-status-bar {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #panel-combat .status-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #panel-combat .status-item {
        min-width: 0 !important;
        height: 38px !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(244, 214, 145, 0.76) !important;
        background: rgba(255, 252, 237, 0.82) !important;
        color: #5a462e !important;
        box-shadow: 0 8px 18px rgba(76, 63, 38, 0.12) !important;
    }

    #panel-combat .combat-split-layout {
        display: grid !important;
        grid-template-columns: minmax(118px, 18%) minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) minmax(92px, 26%) !important;
        gap: 8px !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 48px 10px 10px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(150, 210, 132, 0.72) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(77, 113, 54, 0.12)),
            var(--battle-scene-url, url("/data/q_map_scenes/1.png")) center / cover no-repeat !important;
        box-shadow: inset 0 -60px 70px rgba(68, 91, 45, 0.22), var(--landscape-shadow) !important;
    }

    #panel-combat .combat-split-layout::after {
        left: 12px !important;
        top: 10px !important;
        max-width: 280px !important;
        font-size: 0.82rem !important;
        background: rgba(255, 251, 230, 0.88) !important;
    }

    #panel-combat .combat-left {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        align-self: stretch !important;
        display: flex !important;
        align-items: end !important;
        justify-content: center !important;
        padding: 6px 0 12px !important;
    }

    #panel-combat .combat-cards {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        gap: 14px !important;
        height: 100% !important;
        width: 100% !important;
    }

    #panel-combat .player-wrapper,
    #panel-combat .hero-wrapper {
        width: 100% !important;
        text-align: center !important;
    }

    #panel-combat .combat-card {
        width: clamp(70px, 8vw, 100px) !important;
        height: clamp(70px, 8vw, 100px) !important;
        margin: 0 auto !important;
        border-radius: 50% 50% 44% 44% !important;
        transform-origin: 50% 100% !important;
    }

    #panel-combat .card-avatar {
        width: 100% !important;
        height: 100% !important;
        font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
    }

    #panel-combat .card-avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        transform: scale(1.16) !important;
    }

    #panel-combat .card-info {
        width: min(118px, 100%) !important;
        margin: -2px auto 0 !important;
        padding: 5px 7px !important;
        border-radius: 13px !important;
        background: rgba(255, 252, 239, 0.82) !important;
        box-shadow: 0 8px 16px rgba(65, 55, 36, 0.14) !important;
    }

    #panel-combat .card-name,
    #panel-combat .card-level {
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
    }

    #panel-combat .combat-right {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    #panel-combat .monster-group-container {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #panel-combat .monster-group-container .orb-group {
        width: min(100%, 680px) !important;
        height: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(92px, 1fr)) !important;
        grid-auto-rows: minmax(102px, 1fr) !important;
        gap: 10px 16px !important;
        align-items: center !important;
        justify-items: center !important;
    }

    #panel-combat .monster-group-container .orb-group > div {
        min-width: 0 !important;
        width: 100% !important;
        display: grid !important;
        justify-items: center !important;
        gap: 2px !important;
    }

    #panel-combat .monster-group-container .monster-orb {
        width: clamp(78px, 8.5vw, 116px) !important;
        height: clamp(78px, 8.5vw, 116px) !important;
    }

    #panel-combat .monster-group-container .monster-icon {
        width: 100% !important;
        height: 100% !important;
    }

    #panel-combat .monster-group-container .monster-icon img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        transform: scale(1.12) !important;
    }

    #panel-combat .monster-info {
        min-width: 92px !important;
        max-width: 132px !important;
        padding: 5px 7px !important;
        border-radius: 12px !important;
        background: rgba(255, 252, 239, 0.84) !important;
        box-shadow: 0 8px 16px rgba(65, 55, 36, 0.12) !important;
    }

    #panel-combat .monster-name,
    #panel-combat .monster-level,
    #panel-combat .monster-info .hp-text {
        font-size: 0.7rem !important;
        line-height: 1.15 !important;
    }

    #panel-combat .combat-feed {
        grid-column: 2 !important;
        grid-row: 2 !important;
        min-height: 0 !important;
        display: block !important;
    }

    #panel-combat .combat-log-container {
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 16px !important;
        background: rgba(255, 252, 238, 0.72) !important;
        border: 1px solid rgba(242, 210, 147, 0.64) !important;
        box-shadow: 0 10px 24px rgba(65, 55, 36, 0.14) !important;
        overflow: hidden !important;
        backdrop-filter: blur(8px) !important;
    }

    #panel-combat .combat-log-header {
        height: 30px !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 0.78rem !important;
    }

    #panel-combat .combat-log {
        max-height: none !important;
        height: calc(100% - 30px) !important;
        padding: 6px 9px !important;
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        background: transparent !important;
    }

    .combat-bottom-toolbar {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .combat-bottom-toolbar .combat-buttons {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .combat-bottom-toolbar .combat-buttons .btn {
        min-height: 38px !important;
        padding: 0 8px !important;
        font-size: 0.78rem !important;
        box-shadow: 0 10px 18px rgba(60, 132, 68, 0.16) !important;
    }

    #panel-combat .world-boss-bottom-entry {
        min-height: 46px !important;
        max-height: 58px !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
        overflow: hidden !important;
        border-radius: 15px !important;
        border: 1px solid rgba(241, 205, 129, 0.72) !important;
        background: rgba(255, 250, 229, 0.82) !important;
        box-shadow: 0 8px 18px rgba(72, 57, 34, 0.12) !important;
    }

    #panel-combat .world-boss-location {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        gap: 6px !important;
        align-items: center !important;
    }

    #panel-combat .boss-entry-label,
    #panel-combat #world-boss-location,
    #panel-combat #world-boss-countdown {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
    }

    #panel-combat .boss-entry-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    #panel-combat .boss-entry-actions button {
        min-height: 32px !important;
        padding: 0 9px !important;
        font-size: 0.68rem !important;
    }

    #panel-combat .world-boss-rank-card {
        display: none !important;
    }

    #panel-combat .combat-split-layout.world-boss-layout {
        grid-template-columns: minmax(112px, 16%) minmax(0, 1fr) !important;
    }

    #panel-combat .monster-group-container.world-boss-active .orb-group.world-boss-mode {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #panel-combat .monster-group-container.world-boss-active .monster-orb.world-boss {
        width: clamp(138px, 20vw, 240px) !important;
        height: clamp(138px, 20vw, 240px) !important;
    }
}

@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body:not([data-active-panel="combat"]) .container {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:not([data-active-panel="combat"]) .panel.mobile-panel.active {
        width: min(1160px, calc(100vw - 24px)) !important;
        justify-self: center !important;
    }

    #panel-status.active {
        grid-template-columns: minmax(280px, 36%) minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    #panel-status.active > .panel-header {
        grid-column: 1 / -1 !important;
    }

    #panel-status.active #player-status-block,
    #panel-status.active #hero-status-block {
        min-height: 0 !important;
        overflow: auto !important;
    }

    #panel-status.active .character-stats,
    #panel-status.active .hero-stats {
        display: grid !important;
        grid-template-columns: minmax(280px, 36%) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    #panel-status.active .player-core-card,
    #panel-status.active .hero-core-card {
        position: sticky !important;
        top: 0 !important;
    }

    #panel-status.active .status-attribute-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #panel-status.active .quick-buttons {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    #panel-inventory-equip.active {
        grid-template-columns: minmax(330px, 38%) minmax(0, 1fr) !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        gap: 8px 10px !important;
    }

    #panel-inventory-equip.active > .panel-header {
        grid-column: 1 / -1 !important;
    }

    #panel-inventory-equip.active > .equipment-tabs {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin: 0 !important;
    }

    #panel-inventory-equip.active > .inventory-tabs {
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin: 0 !important;
    }

    #panel-inventory-equip.active > .equipment-grid,
    #panel-inventory-equip.active #player-equipment-grid,
    #panel-inventory-equip.active #hero-equipment-grid {
        grid-column: 1 !important;
        grid-row: 3 !important;
        align-content: start !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding-bottom: 126px !important;
        overflow: auto !important;
    }

    #panel-inventory-equip.active #inventory-section,
    #panel-inventory-equip.active #warehouse-section {
        grid-column: 2 !important;
        grid-row: 3 !important;
        min-height: 0 !important;
        overflow: auto !important;
    }

    #panel-inventory-equip.active .inventory-bottom-toolbar {
        position: absolute !important;
        left: 10px !important;
        right: auto !important;
        bottom: 10px !important;
        width: calc(38% - 10px) !important;
        max-width: 430px !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #panel-inventory-equip.active .inventory-controls {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        max-height: 118px !important;
        overflow: auto !important;
    }

    #panel-inventory-equip.active .inventory-controls .btn {
        min-height: 34px !important;
        padding: 0 6px !important;
        font-size: 0.68rem !important;
    }

    #panel-inventory-equip.active .inventory-grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
        gap: 8px !important;
        align-content: start !important;
    }

    #panel-skills.active .spellbook-page,
    #panel-farm.active .farm-plots,
    #panel-arena.active .arena-container,
    #panel-social.active > div:not(.panel-header),
    #panel-map.active .map-container {
        min-height: 0 !important;
        overflow: auto !important;
    }

    #panel-skills.active .skills-grid {
        grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)) !important;
        gap: 10px !important;
    }

    #panel-farm.active .farm-plots {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    #panel-social.active {
        grid-template-columns: 38% minmax(0, 1fr) !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        gap: 8px 10px !important;
    }

    #panel-social.active > .panel-header,
    #panel-social.active > .q-scene-intro {
        grid-column: 1 / -1 !important;
    }

    #panel-social.active .online-section {
        grid-column: 1 !important;
        grid-row: 3 !important;
        min-height: 0 !important;
        overflow: auto !important;
    }

    #panel-social.active .chat-section {
        grid-column: 2 !important;
        grid-row: 3 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
}

@media (orientation: landscape) and (max-height: 620px) {
    :root {
        --landscape-hud-h: 46px;
        --landscape-nav-h: 0px;
        --landscape-gap: 7px;
    }

    .container {
        padding-top: calc(var(--landscape-hud-h) + 6px) !important;
        padding-bottom: 6px !important;
    }

    .game-topbar {
        height: var(--landscape-hud-h) !important;
        padding: 5px 8px !important;
    }

    .topbar-stat,
    .btn-topbar-logout {
        height: 32px !important;
        padding: 0 7px !important;
        font-size: 0.72rem !important;
    }

    .mobile-nav {
        top: 13px !important;
        height: 32px !important;
        padding: 3px !important;
        gap: 4px !important;
    }

    .nav-item {
        height: 24px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
    }

    .nav-item i {
        font-size: 0.78rem !important;
    }

    .nav-item span {
        font-size: 0.62rem !important;
    }

    .panel.mobile-panel {
        padding: 8px !important;
        border-radius: 15px !important;
    }

    .panel-header {
        min-height: 32px !important;
        font-size: 0.88rem !important;
    }

    #panel-combat .combat-split-layout {
        padding-top: 40px !important;
    }

    #panel-combat .combat-log-header {
        height: 26px !important;
    }

    #panel-combat .combat-log {
        height: calc(100% - 26px) !important;
    }
}

@media (orientation: portrait) and (max-width: 900px) {
    body::after {
        content: "\8BF7\6A2A\5C4F\6D4B\8BD5" !important;
        position: fixed !important;
        left: 50% !important;
        top: 10px !important;
        z-index: 120 !important;
        transform: translateX(-50%) !important;
        padding: 7px 12px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(240, 205, 136, 0.9) !important;
        background: rgba(255, 250, 230, 0.92) !important;
        color: #80603b !important;
        font-size: 0.8rem !important;
        font-weight: 900 !important;
        box-shadow: 0 8px 22px rgba(87, 63, 31, 0.18) !important;
        pointer-events: none !important;
    }
}

/* Phase 12: remove bottom nav footprint and polish the landscape game HUD. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-status .quick-buttons {
        position: static !important;
        align-self: end !important;
        padding-top: 8px !important;
        border-top: 1px solid rgba(222, 190, 125, 0.45) !important;
    }

    body[data-active-panel="combat"] #panel-status .quick-buttons .btn {
        min-height: 36px !important;
        border-radius: 14px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .panel-subtitle {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-tabs,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-tabs {
        height: 40px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .tab-btn {
        min-height: 34px !important;
        padding: 0 8px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section {
        padding: 6px !important;
        border-radius: 14px !important;
        border: 1px dashed rgba(226, 190, 119, 0.6) !important;
        background: rgba(255, 255, 248, 0.42) !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid {
        width: 100% !important;
        min-width: 0 !important;
        height: calc(100% - 34px) !important;
        max-height: none !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(58px, auto) !important;
        overflow-y: auto !important;
        padding-right: 2px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-name {
        font-size: 0.64rem !important;
        line-height: 1.05 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .item-art-icon {
        width: 34px !important;
        height: 34px !important;
    }

    #panel-combat .combat-split-layout {
        min-height: 360px !important;
    }

    #panel-combat .combat-bottom-toolbar {
        padding-top: 4px !important;
    }

    #panel-combat .combat-bottom-toolbar .combat-buttons {
        gap: 8px !important;
    }

    #panel-combat .world-boss-bottom-entry {
        margin-top: 4px !important;
    }

    body[data-active-panel="combat"] .mobile-nav::before {
        content: "\529F\80FD" !important;
        position: absolute !important;
        right: calc(100% + 7px) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        padding: 3px 7px !important;
        border-radius: 999px !important;
        background: rgba(255, 250, 232, 0.82) !important;
        border: 1px solid rgba(232, 198, 132, 0.66) !important;
        color: #87683d !important;
        font-size: 0.66rem !important;
        font-weight: 1000 !important;
        white-space: nowrap !important;
    }
}

@media (orientation: landscape) and (max-width: 1280px) {
    .mobile-nav {
        width: min(340px, calc(100vw - 500px)) !important;
    }

    .nav-item {
        padding: 0 5px !important;
    }

    .nav-item span {
        display: none !important;
    }

    body[data-active-panel="combat"] .mobile-nav::before {
        display: none !important;
    }
}

/* Phase 13: final landscape composition pass. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    .game-topbar {
        display: grid !important;
        grid-template-columns: 142px minmax(300px, 460px) minmax(0, 1fr) !important;
        column-gap: 10px !important;
    }

    .logo-area {
        grid-column: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .player-status-bar {
        grid-column: 3 !important;
        justify-self: end !important;
        max-width: min(760px, calc(100vw - 640px)) !important;
    }

    .topbar-stat {
        height: 34px !important;
        padding: 0 8px !important;
        font-size: 0.76rem !important;
    }

    .topbar-stat.hp-bar-compact {
        flex-basis: 230px !important;
    }

    .mobile-nav {
        left: 162px !important;
        top: 15px !important;
        width: min(444px, calc(100vw - 980px)) !important;
        min-width: 330px !important;
        transform: none !important;
        z-index: 84 !important;
    }

    body[data-active-panel="combat"] .mobile-nav::before {
        display: none !important;
    }

    .nav-item span {
        display: block !important;
    }

    body[data-active-panel="combat"] .container {
        grid-template-columns: clamp(320px, 19vw, 370px) minmax(620px, 1fr) clamp(330px, 19vw, 380px) !important;
        padding-top: calc(var(--landscape-hud-h) + 8px) !important;
    }

    body[data-active-panel="combat"] #panel-combat {
        grid-template-rows: auto minmax(0, 1fr) auto 42px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto 40px minmax(300px, 46%) 38px minmax(0, 1fr) !important;
        gap: 7px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active > .panel-header {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active > .equipment-tabs {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active #player-equipment-grid,
    body[data-active-panel="combat"] #panel-inventory-equip.active #hero-equipment-grid {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        max-height: none !important;
        padding-bottom: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(58px, 1fr) !important;
        gap: 6px !important;
        align-content: stretch !important;
        overflow: auto !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active > .inventory-tabs {
        grid-column: 1 !important;
        grid-row: 4 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-section,
    body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-section {
        grid-column: 1 !important;
        grid-row: 5 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-grid,
    body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(62px, auto) !important;
        gap: 6px !important;
        height: calc(100% - 32px) !important;
        overflow-y: auto !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active .inventory-slot {
        min-width: 0 !important;
        min-height: 62px !important;
        padding: 4px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip.active .item-art-icon {
        width: 34px !important;
        height: 34px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active .inventory-slot .item-name {
        font-size: 0.62rem !important;
        max-height: 1.2em !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active .inventory-bottom-toolbar,
    body[data-active-panel="combat"] #panel-inventory-equip.active .set-bonuses {
        display: none !important;
    }

    #panel-combat .combat-split-layout {
        grid-template-rows: minmax(0, 1fr) 118px !important;
    }

    #panel-combat .combat-log-container {
        border-radius: 12px !important;
    }

    #panel-combat .combat-log {
        font-size: 0.7rem !important;
    }

    #panel-combat .world-boss-bottom-entry {
        min-height: 38px !important;
        max-height: 42px !important;
        height: 42px !important;
        padding: 4px 8px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-self: end !important;
    }

    #panel-combat .world-boss-location {
        display: flex !important;
        min-width: 0 !important;
        align-items: center !important;
        gap: 10px !important;
    }

    #panel-combat .boss-entry-label {
        flex: 0 0 auto !important;
    }

    #panel-combat #world-boss-location {
        flex: 1 1 auto !important;
    }

    #panel-combat #world-boss-countdown {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        color: #d37b12 !important;
        font-weight: 1000 !important;
    }

    #panel-combat .boss-entry-actions {
        flex: 0 0 auto !important;
    }

    #panel-combat .boss-entry-actions button {
        min-height: 28px !important;
        padding: 0 10px !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    .game-topbar {
        grid-template-columns: 142px minmax(230px, 330px) minmax(0, 1fr) !important;
    }

    .mobile-nav {
        width: min(330px, calc(100vw - 880px)) !important;
        min-width: 250px !important;
    }

    .nav-item span {
        display: none !important;
    }

    .player-status-bar {
        max-width: min(700px, calc(100vw - 500px)) !important;
    }
}

/* Phase 40: final header tool sizing after all legacy overrides. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-status > .panel-header {
        grid-template-columns: 30px 34px minmax(86px, 1fr) 94px !important;
        gap: 5px !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-status .role-status-switch {
        max-width: 112px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #role-panel-tools {
        width: 94px !important;
        min-width: 94px !important;
        max-width: 94px !important;
        display: grid !important;
        grid-template-columns: repeat(3, 28px) !important;
        gap: 4px !important;
        justify-content: end !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn,
    body[data-active-panel="combat"] #role-panel-tools .music-control-bar,
    body[data-active-panel="combat"] #role-panel-tools .status-logout-btn,
    body[data-active-panel="combat"] #role-panel-tools .btn-topbar-logout {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        padding: 0 !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn i {
        margin: 0 !important;
        font-size: 0.78rem !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn span {
        display: none !important;
    }
}

/* Final restore after all legacy overrides: world boss entrance keeps countdown. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        position: absolute !important;
        top: 10px !important;
        right: clamp(292px, 25vw, 392px) !important;
        z-index: 90 !important;
        display: block !important;
        width: clamp(260px, 23vw, 360px) !important;
        pointer-events: auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-rank-card {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: 16px 18px !important;
        align-items: center !important;
        column-gap: 7px !important;
        row-gap: 1px !important;
        width: 100% !important;
        min-height: 38px !important;
        padding: 3px 8px !important;
        border: 1px solid rgba(244, 188, 72, 0.96) !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(255, 248, 221, 0.96), rgba(234, 255, 223, 0.92)) !important;
        box-shadow: 0 8px 20px rgba(86, 64, 35, 0.16) !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        color: #7c5615 !important;
        font-size: 0.72rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #6b4d25 !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location span,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location em {
        display: inline !important;
        margin: 0 3px 0 0 !important;
        font-style: normal !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #d07b00 !important;
        font-size: 0.66rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 72px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        height: 25px !important;
        min-height: 25px !important;
        min-width: 66px !important;
        max-width: 88px !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry.has-boss .boss-register-btn,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry:not(.has-boss) .boss-go-btn {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry:not(.has-boss) .boss-register-btn:disabled {
        display: inline-flex !important;
    }
}

@media (orientation: landscape) and (max-width: 1280px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        right: 12px !important;
        width: 238px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        grid-template-columns: auto minmax(62px, 1fr) auto !important;
        column-gap: 5px !important;
        padding: 2px 5px 2px 7px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        padding: 0 6px !important;
        font-size: 0.6rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        min-width: 52px !important;
        max-width: 66px !important;
        padding: 0 7px !important;
        font-size: 0.6rem !important;
    }
}

/* Absolute final polish: compact boss channel beside the combat log. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        top: 10px !important;
        right: 16px !important;
        width: clamp(224px, 22vw, 270px) !important;
        z-index: 96 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        grid-template-columns: auto minmax(72px, 1fr) auto !important;
        grid-template-rows: 30px !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 2px 5px 2px 9px !important;
        column-gap: 7px !important;
        row-gap: 0 !important;
        border-radius: 15px !important;
        border: 1px solid rgba(248, 205, 100, 0.96) !important;
        background: linear-gradient(180deg, rgba(255, 248, 219, 0.98), rgba(255, 239, 174, 0.88)) !important;
        box-shadow: 0 8px 18px rgba(79, 55, 22, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        height: 24px !important;
        padding: 0 7px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.58) !important;
        color: #805719 !important;
        font-size: 0.66rem !important;
        letter-spacing: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry.has-boss #world-boss-location {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        display: block !important;
        font-size: 0.64rem !important;
        font-weight: 800 !important;
        color: #70491a !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        display: block !important;
        align-self: center !important;
        color: #c87200 !important;
        font-size: 0.68rem !important;
        font-weight: 900 !important;
        text-align: left !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry.has-boss #world-boss-countdown {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        height: 26px !important;
        min-height: 26px !important;
        min-width: 58px !important;
        max-width: 78px !important;
        padding: 0 9px !important;
        border-radius: 12px !important;
        border: 0 !important;
        background: linear-gradient(180deg, #f6bd4f, #d9891e) !important;
        color: #fffdf2 !important;
        font-size: 0.64rem !important;
        font-weight: 900 !important;
        box-shadow: 0 4px 9px rgba(159, 96, 15, 0.22) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button:disabled {
        opacity: 0.82 !important;
        background: linear-gradient(180deg, #f1d99a, #cfa858) !important;
        color: #fff8db !important;
    }
}

@media (orientation: landscape) and (max-width: 1280px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        right: 12px !important;
        width: 238px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        grid-template-columns: auto minmax(62px, 1fr) auto !important;
        column-gap: 5px !important;
        padding-left: 7px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        padding: 0 6px !important;
        font-size: 0.6rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry.has-boss #world-boss-location {
        font-size: 0.6rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        min-width: 52px !important;
        max-width: 66px !important;
        padding: 0 7px !important;
        font-size: 0.58rem !important;
    }
}

/* Boss channel visual polish: compact, single-line, anchored by the combat log. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        top: 10px !important;
        right: 16px !important;
        width: clamp(224px, 22vw, 270px) !important;
        z-index: 92 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        grid-template-columns: auto minmax(72px, 1fr) auto !important;
        grid-template-rows: 30px !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 2px 5px 2px 9px !important;
        column-gap: 7px !important;
        border-radius: 15px !important;
        border: 1px solid rgba(248, 205, 100, 0.96) !important;
        background:
            linear-gradient(180deg, rgba(255, 248, 219, 0.98), rgba(255, 239, 174, 0.88)) !important;
        box-shadow:
            0 8px 18px rgba(79, 55, 22, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        height: 24px !important;
        padding: 0 7px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.58) !important;
        color: #805719 !important;
        font-size: 0.66rem !important;
        letter-spacing: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry.has-boss #world-boss-location {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        display: block !important;
        font-size: 0.64rem !important;
        font-weight: 800 !important;
        color: #70491a !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        display: block !important;
        align-self: center !important;
        color: #c87200 !important;
        font-size: 0.68rem !important;
        font-weight: 900 !important;
        text-align: left !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry.has-boss #world-boss-countdown {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        height: 26px !important;
        min-height: 26px !important;
        min-width: 58px !important;
        max-width: 78px !important;
        padding: 0 9px !important;
        border-radius: 12px !important;
        border: 0 !important;
        background: linear-gradient(180deg, #f6bd4f, #d9891e) !important;
        color: #fffdf2 !important;
        font-size: 0.64rem !important;
        font-weight: 900 !important;
        box-shadow: 0 4px 9px rgba(159, 96, 15, 0.22) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button:disabled {
        opacity: 0.82 !important;
        background: linear-gradient(180deg, #f1d99a, #cfa858) !important;
        color: #fff8db !important;
    }
}

@media (orientation: landscape) and (max-width: 1280px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        right: 12px !important;
        width: 238px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        grid-template-columns: auto minmax(62px, 1fr) auto !important;
        column-gap: 5px !important;
        padding-left: 7px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        padding: 0 6px !important;
        font-size: 0.6rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry.has-boss #world-boss-location {
        font-size: 0.6rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        min-width: 52px !important;
        max-width: 66px !important;
        padding: 0 7px !important;
        font-size: 0.58rem !important;
    }
}

/* Final restore: world boss entrance uses the original countdown channel. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        position: absolute !important;
        top: 10px !important;
        right: clamp(292px, 25vw, 392px) !important;
        z-index: 80 !important;
        display: block !important;
        width: clamp(260px, 23vw, 360px) !important;
        pointer-events: auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-rank-card {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: 16px 18px !important;
        align-items: center !important;
        column-gap: 7px !important;
        row-gap: 1px !important;
        width: 100% !important;
        min-height: 38px !important;
        padding: 3px 8px !important;
        border: 1px solid rgba(244, 188, 72, 0.96) !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(255, 248, 221, 0.96), rgba(234, 255, 223, 0.92)) !important;
        box-shadow: 0 8px 20px rgba(86, 64, 35, 0.16) !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        color: #7c5615 !important;
        font-size: 0.72rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #6b4d25 !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location span,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location em {
        display: inline !important;
        margin: 0 3px 0 0 !important;
        font-style: normal !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #d07b00 !important;
        font-size: 0.66rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry.has-boss #world-boss-countdown {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 72px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        height: 25px !important;
        min-height: 25px !important;
        min-width: 66px !important;
        max-width: 88px !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-register-btn:disabled {
        display: none !important;
    }
}

@media (orientation: landscape) and (max-width: 1280px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        right: clamp(246px, 24vw, 318px) !important;
        width: clamp(230px, 25vw, 300px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        column-gap: 5px !important;
        padding: 3px 7px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        font-size: 0.66rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        font-size: 0.6rem !important;
    }
}

/* Phase 42: final override for scene-level map and world boss entrances. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        position: absolute !important;
        top: 11px !important;
        z-index: 60 !important;
        display: flex !important;
        align-items: center !important;
        pointer-events: auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry {
        left: clamp(104px, 9.4vw, 150px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        right: clamp(282px, 24vw, 372px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-btn {
        width: auto !important;
        min-width: 112px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 224, 142, 0.92) !important;
        background: rgba(255, 251, 232, 0.9) !important;
        color: #6b4d25 !important;
        font-size: 0.78rem !important;
        font-weight: 900 !important;
        box-shadow: 0 8px 20px rgba(86, 64, 35, 0.16) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-btn {
        min-width: 126px !important;
        border-color: rgba(244, 188, 72, 0.96) !important;
        background: linear-gradient(180deg, rgba(255, 248, 221, 0.95), rgba(234, 255, 223, 0.92)) !important;
        color: #7c5615 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (orientation: landscape) and (max-width: 1280px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        right: clamp(238px, 23vw, 310px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-btn {
        min-width: 100px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 10px !important;
        font-size: 0.72rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-btn {
        min-width: 112px !important;
    }
}

/* Phase 34: move world chat into the left status rail and make rankings a compact popup. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-status {
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        gap: 8px !important;
    }

    body[data-active-panel="combat"] #panel-status #player-status-block,
    body[data-active-panel="combat"] #panel-status #hero-status-block {
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-status .player-core-mini-stats {
        grid-template-columns: 1.05fr repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
        min-width: 0 !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        border-radius: 9px !important;
        border: 1px solid rgba(246, 192, 84, 0.86) !important;
        background: linear-gradient(180deg, #fff6cf, #ffe39b) !important;
        color: #9b6814 !important;
        font-size: 0.58rem !important;
        font-weight: 1000 !important;
        line-height: 1 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn i {
        margin: 0 !important;
        font-size: 0.62rem !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-row,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-row {
        min-height: 42px !important;
        padding: 5px 6px !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-label,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-label {
        font-size: 0.6rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-value,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-value {
        font-size: 0.6rem !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    body[data-active-panel="combat"] #panel-status .world-chat-dock {
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) !important;
        padding: 8px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(172, 219, 155, 0.78) !important;
        background: linear-gradient(180deg, rgba(248, 255, 240, 0.72), rgba(236, 252, 230, 0.58)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
    }

    body[data-active-panel="combat"] #panel-status .world-chat-placeholder {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #86a06b !important;
        font-size: 0.78rem !important;
        font-weight: 900 !important;
    }

    body[data-active-panel="combat"] #panel-status .world-chat-card {
        min-height: 0 !important;
        height: 100% !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-active-panel="combat"] #panel-status .world-chat-card .q-subsection-title {
        min-height: 24px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        color: #3c7f45 !important;
        font-size: 0.76rem !important;
        font-weight: 1000 !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-status .world-chat-card .chat-messages {
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
        overflow-y: auto !important;
        padding: 7px !important;
        border-radius: 13px !important;
        border: 1px dashed rgba(228, 199, 142, 0.78) !important;
        background: rgba(255, 253, 241, 0.72) !important;
    }

    body[data-active-panel="combat"] #panel-status .world-chat-card .chat-message,
    body[data-active-panel="combat"] #panel-status .world-chat-card .chat-message.public,
    body[data-active-panel="combat"] #panel-status .world-chat-card .chat-message.private,
    body[data-active-panel="combat"] #panel-status .world-chat-card .chat-message.system {
        margin: 0 0 6px !important;
        padding: 6px 7px !important;
        border-radius: 9px !important;
        border-left: 3px solid #70c879 !important;
        background: rgba(255, 255, 250, 0.86) !important;
        color: #4a3828 !important;
        font-size: 0.68rem !important;
        line-height: 1.28 !important;
        word-break: break-word !important;
    }

    body[data-active-panel="combat"] #panel-status .world-chat-card .chat-message.system {
        border-left-color: #f1bd55 !important;
        color: #a2741d !important;
    }

    body[data-active-panel="combat"] #panel-status .world-chat-card .chat-time {
        margin-right: 4px !important;
        color: #8a826b !important;
        font-size: 0.6rem !important;
    }

    body[data-active-panel="combat"] #panel-status .world-chat-card .chat-content {
        overflow-wrap: anywhere !important;
    }

    body[data-active-panel="combat"] #panel-status .world-chat-card .chat-input-area {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 58px !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    body[data-active-panel="combat"] #panel-status .world-chat-card .chat-input-area input {
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        font-size: 0.7rem !important;
    }

    body[data-active-panel="combat"] #panel-status .world-chat-card #send-public-btn {
        min-width: 0 !important;
        width: 58px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 8px !important;
        font-size: 0.68rem !important;
    }

    body[data-active-panel="combat"] #panel-status .quick-buttons {
        margin-top: 0 !important;
    }
}

#panel-social.teahouse-chat-moved .teahouse-online-card,
#panel-social.teahouse-chat-moved #chat-tab-bar,
#panel-social.teahouse-chat-moved #board-container,
#panel-social.teahouse-chat-moved #rankings-container,
#panel-social.teahouse-chat-moved #online-pagination {
    display: none !important;
}

.status-leaderboard-modal .status-leaderboard-content {
    width: min(520px, calc(100vw - 42px)) !important;
    max-height: min(680px, calc(100vh - 48px)) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
}

.status-leaderboard-modal .modal-body {
    min-height: 0 !important;
    overflow: hidden !important;
}

.status-leaderboard-list {
    min-height: 220px !important;
    max-height: min(520px, 62vh) !important;
    overflow-y: auto !important;
    display: grid !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    border: 1px dashed rgba(228, 199, 142, 0.82) !important;
    background: rgba(250, 255, 241, 0.78) !important;
}

.status-leaderboard-row {
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(222, 192, 129, 0.72) !important;
    background: rgba(255, 255, 247, 0.92) !important;
    color: #4a3828 !important;
    text-align: left !important;
    box-shadow: 0 5px 12px rgba(89, 76, 41, 0.08) !important;
}

.status-leaderboard-row.is-top-1 {
    background: linear-gradient(180deg, #fff7d7, #fffdf0) !important;
    border-color: rgba(238, 184, 67, 0.82) !important;
}

.status-leaderboard-row.is-top-2,
.status-leaderboard-row.is-top-3 {
    background: linear-gradient(180deg, #f7fff0, #fffdf5) !important;
}

.status-rank-no {
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #61c76e !important;
    color: #fff !important;
    font-weight: 1000 !important;
}

.status-rank-name,
.status-rank-level,
.status-rank-points {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
}

.status-rank-name {
    font-weight: 1000 !important;
}

.status-rank-level,
.status-rank-points {
    color: #92784e !important;
    font-size: 0.74rem !important;
}

/* Phase 35: single-line combat status and second-row adventure shortcuts. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat.active {
        grid-template-rows: auto minmax(0, 1fr) auto 42px !important;
        gap: 7px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar {
        margin: 0 !important;
        padding: 6px !important;
        border-radius: 16px !important;
        background: rgba(250, 255, 241, 0.64) !important;
        border: 1px solid rgba(188, 222, 171, 0.78) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-row {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-extra,
    body[data-active-panel="combat"] #panel-combat .combat-status-actions {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-item {
        height: 34px !important;
        min-height: 34px !important;
        min-width: 0 !important;
        padding: 0 9px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: rgba(255, 255, 248, 0.84) !important;
        border: 1px solid rgba(229, 199, 139, 0.72) !important;
        color: #8b6a36 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-item i {
        flex: 0 0 auto !important;
        margin: 0 !important;
        font-size: 0.84rem !important;
        color: #f0a43a !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-label,
    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-value {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-label {
        flex: 0 0 auto !important;
        font-weight: 900 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-value {
        flex: 1 1 auto !important;
        font-weight: 1000 !important;
        color: #ffc94b !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-bottom-toolbar {
        grid-template-rows: 38px auto !important;
        gap: 6px !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-dock {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 6px !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-btn {
        min-height: 28px !important;
        height: 28px !important;
        padding: 0 5px !important;
        font-size: 0.6rem !important;
        letter-spacing: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-btn i {
        font-size: 0.68rem !important;
    }

    body[data-active-panel="combat"] #panel-status .quick-buttons:empty {
        display: none !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-item {
        padding: 0 6px !important;
        gap: 3px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-label,
    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-value {
        font-size: 0.66rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-dock {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-btn {
        min-height: 26px !important;
        height: 26px !important;
        padding: 0 4px !important;
        font-size: 0.54rem !important;
    }
}

/* Phase 37: remove the duplicated top HUD and dock logout beside music. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] {
        --landscape-hud-h: 0px !important;
    }

    body[data-active-panel="combat"] .game-topbar,
    body[data-active-panel="combat"] #topbar-placeholder,
    body[data-active-panel="combat"] .mobile-nav {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] .container {
        padding-top: 10px !important;
    }

    body[data-active-panel="combat"] #panel-status > .panel-header {
        grid-template-columns: 34px 42px minmax(116px, 1fr) auto !important;
    }

    body[data-active-panel="combat"] #role-panel-tools {
        max-width: 112px !important;
        gap: 4px !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .status-logout-btn,
    body[data-active-panel="combat"] #role-panel-tools .btn-topbar-logout {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9px !important;
        border: 1px solid rgba(110, 196, 116, 0.76) !important;
        background: linear-gradient(180deg, rgba(255, 255, 250, 0.96), rgba(232, 255, 226, 0.84)) !important;
        color: #31824b !important;
        box-shadow: 0 5px 11px rgba(65, 134, 77, 0.12) !important;
        flex: 0 0 28px !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .status-logout-btn i,
    body[data-active-panel="combat"] #role-panel-tools .btn-topbar-logout i {
        margin: 0 !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .status-logout-btn span,
    body[data-active-panel="combat"] #role-panel-tools .btn-topbar-logout span {
        display: none !important;
    }
}

/* Phase 38: compact role tabs so music/logout buttons are not covered. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-status > .panel-header {
        grid-template-columns: 30px 34px minmax(100px, 1fr) 64px !important;
        gap: 5px !important;
        padding: 8px 8px !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-status .role-status-switch {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 128px !important;
        justify-self: stretch !important;
        padding: 2px !important;
        gap: 2px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-status .role-status-switch .tab-btn {
        min-width: 0 !important;
        width: 100% !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 0 4px !important;
        border-radius: 8px !important;
        font-size: 0.62rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[data-active-panel="combat"] #role-panel-tools {
        grid-column: 4 !important;
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        justify-self: end !important;
        display: grid !important;
        grid-template-columns: repeat(2, 28px) !important;
        gap: 4px !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .music-control-bar,
    body[data-active-panel="combat"] #role-panel-tools .status-logout-btn,
    body[data-active-panel="combat"] #role-panel-tools .btn-topbar-logout {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
    }
}

/* Phase 39: restore the original effects tool before music and logout. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-status > .panel-header {
        grid-template-columns: 30px 34px minmax(86px, 1fr) 94px !important;
    }

    body[data-active-panel="combat"] #panel-status .role-status-switch {
        max-width: 112px !important;
    }

    body[data-active-panel="combat"] #role-panel-tools {
        width: 94px !important;
        min-width: 94px !important;
        max-width: 94px !important;
        display: grid !important;
        grid-template-columns: repeat(3, 28px) !important;
        gap: 4px !important;
        align-items: center !important;
        justify-content: end !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn,
    body[data-active-panel="combat"] #role-panel-tools .music-control-bar,
    body[data-active-panel="combat"] #role-panel-tools .status-logout-btn,
    body[data-active-panel="combat"] #role-panel-tools .btn-topbar-logout {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        padding: 0 !important;
        border-radius: 9px !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(110, 196, 116, 0.76) !important;
        background: linear-gradient(180deg, rgba(255, 255, 250, 0.96), rgba(232, 255, 226, 0.84)) !important;
        color: #31824b !important;
        box-shadow: 0 5px 11px rgba(65, 134, 77, 0.12) !important;
        font-size: 0 !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn i {
        margin: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn span {
        display: none !important;
    }
}

/* Phase 14: hard constraints for combat shell overflow. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    .player-status-bar {
        height: 38px !important;
        max-height: 38px !important;
        min-height: 0 !important;
        align-self: center !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    .player-status-bar .topbar-stat,
    .player-status-bar .btn-topbar-logout {
        flex: 0 0 auto !important;
    }

    .player-status-bar .topbar-stat.hp-bar-compact {
        width: 232px !important;
        flex-basis: 232px !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active {
        grid-template-columns: 1fr !important;
        grid-auto-columns: 0 !important;
        overflow: hidden !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > * {
        grid-column: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #player-set-bonuses,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #hero-set-bonuses {
        display: none !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #inventory-section,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #warehouse-section {
        grid-column: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #inventory-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #warehouse-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .warehouse-controls,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .inventory-count {
        display: none !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #inventory-section h4,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #warehouse-section h4 {
        height: 26px !important;
        margin: 0 0 5px !important;
        font-size: 0.76rem !important;
    }

    #panel-combat .world-boss-bottom-entry,
    #panel-combat .world-boss-location {
        min-height: 0 !important;
        height: 42px !important;
        overflow: hidden !important;
    }

    #panel-combat .boss-entry-actions {
        max-width: 360px !important;
        overflow: hidden !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    .player-status-bar .topbar-stat.hp-bar-compact {
        width: 188px !important;
        flex-basis: 188px !important;
    }

    .topbar-stat {
        padding: 0 6px !important;
    }
}

/* Phase 15: combat side status attributes use three compact columns. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin-top: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-row,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-row {
        min-width: 0 !important;
        min-height: 45px !important;
        padding: 5px 6px !important;
        gap: 2px !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-label,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-label {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        font-size: 0.66rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-value,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-value {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 0.66rem !important;
        line-height: 1.08 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    body[data-active-panel="combat"] #panel-status .status-attribute-grid #player-attack,
    body[data-active-panel="combat"] #panel-status .status-attribute-grid #hero-attack {
        font-size: 0.6rem !important;
        letter-spacing: 0 !important;
    }
}

/* Phase 16: move growth shortcuts into the adventure status strip. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    #panel-combat .combat-status-bar {
        margin-bottom: 0 !important;
    }

    #panel-combat .status-row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #panel-combat .combat-status-extra {
        display: grid !important;
        grid-template-columns: minmax(96px, 0.75fr) minmax(96px, 0.75fr) minmax(260px, 2.4fr) !important;
        gap: 6px !important;
        margin-top: 6px !important;
        min-width: 0 !important;
    }

    #panel-combat .status-item,
    #panel-combat .combat-status-extra .status-item {
        height: 34px !important;
        min-height: 34px !important;
        min-width: 0 !important;
        padding: 0 9px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        overflow: hidden !important;
    }

    #panel-combat .status-item .status-label,
    #panel-combat .status-item .status-value {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #panel-combat .status-item .status-value {
        flex: 1 1 auto !important;
    }

    #panel-combat .combat-status-actions {
        min-width: 0 !important;
        height: 34px !important;
    }

    #panel-combat .combat-status-actions .quick-buttons {
        display: grid !important;
        grid-template-columns: 0.86fr 0.96fr 1.18fr !important;
        gap: 6px !important;
        width: 100% !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    #panel-combat .combat-status-actions .btn {
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 10px !important;
        border-radius: 14px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }

    #panel-combat .combat-split-layout {
        padding-top: 10px !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    #panel-combat .combat-status-extra {
        grid-template-columns: minmax(82px, 0.78fr) minmax(82px, 0.78fr) minmax(220px, 2.2fr) !important;
    }

    #panel-combat .status-item,
    #panel-combat .combat-status-extra .status-item {
        padding: 0 7px !important;
        font-size: 0.72rem !important;
    }

    #panel-combat .combat-status-actions .btn {
        padding: 0 7px !important;
        font-size: 0.72rem !important;
    }
}

/* Phase 17: remove adventure top dead space and dock the log as a right rail. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat.active {
        --combat-side-log-w: clamp(230px, 23.5%, 310px);
        grid-template-rows: auto auto minmax(0, 1fr) auto 42px !important;
        gap: 6px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar,
    body[data-active-panel="combat"] #panel-combat .combat-status-extra {
        align-self: start !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout {
        grid-template-columns: minmax(116px, 16%) minmax(0, 1fr) var(--combat-side-log-w) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        gap: 10px !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 10px !important;
        align-self: stretch !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-left {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-height: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-right {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-feed {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: block !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        height: 100% !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        z-index: 6 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-log-container {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 16px !important;
        background: rgba(255, 252, 238, 0.78) !important;
        border: 1px solid rgba(234, 203, 138, 0.9) !important;
        box-shadow: 0 12px 28px rgba(72, 58, 36, 0.18) !important;
        backdrop-filter: blur(6px) !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-log-header {
        height: 32px !important;
        min-height: 32px !important;
        flex: 0 0 auto !important;
        padding: 0 9px !important;
        border-radius: 0 !important;
        background: rgba(255, 248, 224, 0.9) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-log {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 7px 9px !important;
        overflow-y: auto !important;
        font-size: 0.68rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-bottom-toolbar {
        margin-top: 0 !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-combat.active {
        --combat-side-log-w: clamp(210px, 23%, 270px);
        gap: 5px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout {
        grid-template-columns: minmax(106px, 15%) minmax(0, 1fr) var(--combat-side-log-w) !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-log {
        font-size: 0.64rem !important;
        padding: 6px 7px !important;
    }
}

/* Phase 18: raise party portraits and rebalance the world boss entry. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat.active {
        grid-template-rows: auto auto minmax(0, 1fr) auto 64px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-left {
        align-self: stretch !important;
        padding-top: 16px !important;
        min-height: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-cards {
        height: 100% !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        padding-top: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .player-wrapper,
    body[data-active-panel="combat"] #panel-combat .hero-wrapper {
        flex: 0 0 auto !important;
        transform: translateY(-10px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .world-boss-bottom-entry {
        min-height: 64px !important;
        max-height: 64px !important;
        height: 64px !important;
        padding: 7px 10px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1.65fr) minmax(210px, 0.9fr) !important;
        gap: 10px !important;
        align-items: stretch !important;
        border-radius: 16px !important;
        background:
            linear-gradient(90deg, rgba(255, 248, 223, 0.94), rgba(246, 255, 229, 0.9)) !important;
        box-shadow: 0 10px 22px rgba(121, 96, 47, 0.14) !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-combat .world-boss-location {
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 2px !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto minmax(120px, auto) !important;
        gap: 8px !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-combat .boss-entry-label {
        font-size: 0.8rem !important;
        font-weight: 900 !important;
    }

    body[data-active-panel="combat"] #panel-combat #world-boss-location {
        min-width: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[data-active-panel="combat"] #panel-combat #world-boss-countdown {
        font-size: 0.76rem !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .boss-entry-actions {
        min-width: 0 !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body[data-active-panel="combat"] #panel-combat .boss-entry-actions button {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        border-radius: 14px !important;
        font-size: 0.76rem !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .world-boss-rank-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 5px 9px !important;
        border-left: 1px dashed rgba(214, 172, 88, 0.6) !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-combat .boss-rank-title,
    body[data-active-panel="combat"] #panel-combat .world-boss-rank-list {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-combat.active {
        grid-template-rows: auto auto minmax(0, 1fr) auto 58px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-left {
        padding-top: 12px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-cards {
        gap: 12px !important;
    }

    body[data-active-panel="combat"] #panel-combat .world-boss-bottom-entry {
        min-height: 58px !important;
        max-height: 58px !important;
        height: 58px !important;
        grid-template-columns: minmax(0, 1fr) minmax(170px, 0.55fr) !important;
        gap: 7px !important;
        padding: 6px 8px !important;
    }

    body[data-active-panel="combat"] #panel-combat .world-boss-location {
        grid-template-columns: auto minmax(0, 1fr) auto minmax(98px, auto) !important;
        gap: 6px !important;
    }

    body[data-active-panel="combat"] #panel-combat .boss-entry-actions button {
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 7px !important;
        font-size: 0.68rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .world-boss-rank-card {
        padding: 4px 7px !important;
    }
}

/* Phase 19: center party portraits and move boss actions into the top shortcut row. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-left {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-cards {
        height: auto !important;
        min-height: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 24px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .player-wrapper,
    body[data-active-panel="combat"] #panel-combat .hero-wrapper {
        transform: none !important;
    }

    #panel-combat .combat-status-actions .quick-buttons {
        grid-template-columns: 0.84fr 0.9fr 1.06fr 1.12fr !important;
    }

    #panel-combat #world-boss-shortcut-btn {
        border-color: rgba(244, 188, 72, 0.86) !important;
        background: linear-gradient(180deg, #fff8df, #eaffdf) !important;
        color: #8b651c !important;
        font-weight: 900 !important;
    }

    body[data-active-panel="combat"] #panel-combat .world-boss-location {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .boss-entry-actions {
        display: none !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-combat .combat-cards {
        gap: 18px !important;
    }

    #panel-combat .combat-status-actions .quick-buttons {
        grid-template-columns: 0.8fr 0.86fr 1fr 1.08fr !important;
    }
}

/* Phase 20: world boss battle layout - rank left, boss center, log right. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) > .world-boss-rank-card {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat.active {
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .world-boss-bottom-entry {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout {
        grid-template-columns: var(--combat-side-log-w) minmax(340px, 1fr) var(--combat-side-log-w) !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        grid-template-areas: none !important;
        align-items: stretch !important;
        justify-items: stretch !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout .world-boss-rank-card {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(234, 203, 138, 0.9) !important;
        border-radius: 16px !important;
        background: rgba(255, 252, 238, 0.78) !important;
        box-shadow: 0 12px 28px rgba(72, 58, 36, 0.18) !important;
        backdrop-filter: blur(6px) !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout .boss-rank-title {
        flex: 0 0 32px !important;
        height: 32px !important;
        padding: 0 9px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: rgba(255, 248, 224, 0.9) !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout .world-boss-rank-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 7px 9px !important;
        font-size: 0.68rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout .boss-rank-row {
        display: grid !important;
        grid-template-columns: 22px minmax(0, 1fr) auto auto !important;
        gap: 5px !important;
        align-items: center !important;
        min-height: 26px !important;
        padding: 3px 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout .combat-right {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout .combat-left {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 0 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout .combat-cards {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, 104px) !important;
        justify-content: center !important;
        align-items: start !important;
        gap: 14px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout .combat-feed {
        grid-column: 3 !important;
        grid-row: 1 / 3 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container.world-boss-active {
        min-height: 0 !important;
        height: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container.world-boss-active .orb-group.world-boss-mode > div {
        width: min(260px, 90%) !important;
        max-width: 260px !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-rows: auto auto !important;
        justify-items: center !important;
        gap: 8px !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container.world-boss-active .monster-orb.world-boss {
        width: clamp(170px, 20vw, 230px) !important;
        height: clamp(170px, 20vw, 230px) !important;
        min-height: clamp(170px, 20vw, 230px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container.world-boss-active .monster-info {
        position: static !important;
        transform: none !important;
        width: min(230px, 100%) !important;
        min-width: 0 !important;
        max-width: 230px !important;
        min-height: 0 !important;
        margin: -6px 0 0 !important;
        padding: 7px 10px !important;
        border-radius: 14px !important;
        background: rgba(255, 252, 239, 0.88) !important;
        box-shadow: 0 8px 18px rgba(65, 55, 36, 0.16) !important;
        z-index: 5 !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container.world-boss-active .monster-name,
    body[data-active-panel="combat"] #panel-combat .monster-group-container.world-boss-active .monster-level,
    body[data-active-panel="combat"] #panel-combat .monster-group-container.world-boss-active .monster-info .hp-text {
        font-size: 0.74rem !important;
        line-height: 1.15 !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout {
        grid-template-columns: var(--combat-side-log-w) minmax(280px, 1fr) var(--combat-side-log-w) !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container.world-boss-active .monster-orb.world-boss {
        width: clamp(145px, 18vw, 190px) !important;
        height: clamp(145px, 18vw, 190px) !important;
        min-height: clamp(145px, 18vw, 190px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout .combat-cards {
        grid-template-columns: repeat(2, 96px) !important;
        gap: 10px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout .player-wrapper,
    body[data-active-panel="combat"] #panel-combat .combat-split-layout.world-boss-layout .hero-wrapper {
        width: 96px !important;
        min-width: 96px !important;
    }
}

/* Phase 21: remove scene white overlays and make monster art transparent/centered. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-split-layout {
        background: var(--battle-scene-url, url("/data/q_map_scenes/1.png")) center / cover no-repeat !important;
        box-shadow: inset 0 -38px 54px rgba(40, 62, 32, 0.18), var(--landscape-shadow) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout::before {
        display: none !important;
        content: none !important;
        background: transparent !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container,
    body[data-active-panel="combat"] #panel-combat .monster-group-container .orb-group,
    body[data-active-panel="combat"] #panel-combat .monster-group-container .orb-group > div {
        align-items: center !important;
        justify-items: center !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container .monster-orb {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 249, 221, 0.18) !important;
        box-shadow:
            0 10px 20px rgba(66, 55, 34, 0.12),
            inset 0 0 0 1px rgba(255, 232, 148, 0.72) !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-orb::before,
    body[data-active-panel="combat"] #panel-combat .monster-orb::after,
    body[data-active-panel="combat"] #panel-combat .monster-icon::before,
    body[data-active-panel="combat"] #panel-combat .monster-icon::after {
        display: none !important;
        content: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container .monster-icon {
        width: 94% !important;
        height: 94% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container .monster-icon img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
        margin: auto !important;
        mix-blend-mode: normal !important;
        filter: saturate(1.06) contrast(1.03) brightness(1.01) !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container.world-boss-active .monster-icon img {
        mix-blend-mode: normal !important;
    }
}

/* Phase 22: support 2-6 monsters with larger, uncropped monster frames. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .orb-group {
        width: min(100%, 760px) !important;
        height: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(126px, 1fr)) !important;
        grid-auto-rows: minmax(178px, 1fr) !important;
        gap: 16px 24px !important;
        align-content: center !important;
        align-items: center !important;
        justify-items: center !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .orb-group.monster-count-2 {
        width: min(100%, 430px) !important;
        grid-template-columns: repeat(2, minmax(142px, 1fr)) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .orb-group.monster-count-3 {
        width: min(100%, 650px) !important;
        grid-template-columns: repeat(3, minmax(142px, 1fr)) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .orb-group.monster-count-4 {
        width: min(100%, 760px) !important;
        grid-template-columns: repeat(4, minmax(126px, 1fr)) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .orb-group > div {
        width: min(142px, 100%) !important;
        min-width: 0 !important;
        min-height: 166px !important;
        display: grid !important;
        grid-template-rows: 118px auto !important;
        justify-items: center !important;
        align-items: start !important;
        gap: 5px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .monster-orb {
        width: 118px !important;
        height: 118px !important;
        min-height: 118px !important;
        padding: 0 !important;
        border-radius: 24px !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .monster-icon {
        width: 112px !important;
        height: 112px !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .monster-icon img {
        width: 112px !important;
        height: 112px !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-info {
        width: min(128px, 100%) !important;
        min-width: 0 !important;
        max-width: 128px !important;
        min-height: 46px !important;
        margin: -2px 0 0 !important;
        padding: 5px 7px !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .orb-group {
        grid-template-columns: repeat(3, minmax(112px, 1fr)) !important;
        grid-auto-rows: minmax(154px, 1fr) !important;
        gap: 12px 18px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .orb-group > div {
        width: min(128px, 100%) !important;
        min-height: 148px !important;
        grid-template-rows: 104px auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .monster-orb {
        width: 104px !important;
        height: 104px !important;
        min-height: 104px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .monster-icon,
    body[data-active-panel="combat"] #panel-combat .combat-split-layout:not(.world-boss-layout) .monster-group-container .monster-icon img {
        width: 100px !important;
        height: 100px !important;
    }
}

/* Phase 23: inventory/equipment right rail uses aligned 5-column rows. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] .container {
        grid-template-columns: clamp(300px, 17vw, 350px) minmax(560px, 1fr) clamp(430px, 23vw, 470px) !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active {
        grid-template-rows: auto 38px minmax(192px, 255px) 38px minmax(0, 1fr) !important;
        gap: 7px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active #player-equipment-grid,
    body[data-active-panel="combat"] #panel-inventory-equip.active #hero-equipment-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-rows: 78px !important;
        align-content: start !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active .equipment-slot {
        min-width: 0 !important;
        min-height: 78px !important;
        height: 78px !important;
        padding: 4px !important;
        border-radius: 12px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active .equipment-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip.active .equipment-slot .equipment-icon,
    body[data-active-panel="combat"] #panel-inventory-equip.active .equipment-slot img {
        width: 34px !important;
        height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active .equipment-name,
    body[data-active-panel="combat"] #panel-inventory-equip.active .equipment-type {
        width: 100% !important;
        font-size: 0.62rem !important;
        line-height: 1.08 !important;
        white-space: normal !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active > .inventory-tabs,
    body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-section,
    body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-section {
        width: 100% !important;
        max-width: 100% !important;
        justify-self: stretch !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-grid,
    body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #inventory-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #warehouse-grid {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-rows: 72px !important;
        gap: 6px !important;
        align-content: start !important;
        height: calc(100% - 31px) !important;
        overflow-y: auto !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active .inventory-slot {
        min-width: 0 !important;
        min-height: 72px !important;
        height: 72px !important;
        padding: 4px !important;
        border-radius: 11px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip.active .item-art-icon {
        width: 36px !important;
        height: 36px !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] .container {
        grid-template-columns: clamp(280px, 16vw, 330px) minmax(500px, 1fr) clamp(405px, 24vw, 440px) !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active #player-equipment-grid,
    body[data-active-panel="combat"] #panel-inventory-equip.active #hero-equipment-grid {
        grid-auto-rows: 70px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active .equipment-slot {
        min-height: 70px !important;
        height: 70px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-grid,
    body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #inventory-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #warehouse-grid {
        grid-auto-rows: 66px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.active .inventory-slot {
        min-height: 66px !important;
        height: 66px !important;
    }
}

/* Phase 24: force the persistent adventure inventory rail into true full-width 5-column rows. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-inventory-equip {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto 36px 232px 36px minmax(0, 1fr) !important;
        gap: 7px !important;
        align-content: stretch !important;
        padding: 10px !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > * {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .panel-header {
        grid-row: 1 !important;
        margin: 0 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs {
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #player-equipment-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #hero-equipment-grid {
        grid-row: 3 !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-rows: 72px !important;
        gap: 6px !important;
        align-content: start !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 232px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #player-equipment-grid {
        display: grid !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #hero-equipment-grid:not([style*="display: none"]):not([style*="display:none"]) {
        display: grid !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #hero-equipment-grid[style*="display: none"],
    body[data-active-panel="combat"] #panel-inventory-equip #hero-equipment-grid[style*="display:none"] {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot {
        width: auto !important;
        min-width: 0 !important;
        min-height: 72px !important;
        height: 72px !important;
        padding: 4px 3px !important;
        border-radius: 11px !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .equipment-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot img {
        width: 34px !important;
        height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot i {
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-name,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-type {
        width: 100% !important;
        font-size: 0.62rem !important;
        line-height: 1.08 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .inventory-tabs {
        grid-row: 4 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section {
        grid-row: 5 !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        padding: 8px !important;
        border: 1px dashed rgba(232, 198, 132, 0.76) !important;
        border-radius: 14px !important;
        background: rgba(255, 253, 238, 0.28) !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section {
        display: flex !important;
        flex-direction: column !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section:not([style*="display: none"]):not([style*="display:none"]) {
        display: flex !important;
        flex-direction: column !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section[style*="display: none"],
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section[style*="display:none"] {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section h4,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section h4 {
        flex: 0 0 24px !important;
        height: 24px !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        font-size: 0.74rem !important;
        line-height: 24px !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel #inventory-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel #warehouse-grid {
        flex: 1 1 auto !important;
        display: grid !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-rows: 68px !important;
        gap: 6px !important;
        align-content: start !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 2px !important;
        box-sizing: border-box !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot {
        width: auto !important;
        min-width: 0 !important;
        min-height: 68px !important;
        height: 68px !important;
        padding: 4px 3px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .item-art-icon {
        width: 34px !important;
        height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-name {
        width: 100% !important;
        font-size: 0.61rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-inventory-equip {
        grid-template-rows: auto 34px 214px 34px minmax(0, 1fr) !important;
        gap: 6px !important;
        padding: 9px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #player-equipment-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #hero-equipment-grid {
        grid-auto-rows: 66px !important;
        height: 210px !important;
        gap: 6px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot {
        min-height: 66px !important;
        height: 66px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel #inventory-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel #warehouse-grid {
        grid-auto-rows: 64px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot {
        min-height: 64px !important;
        height: 64px !important;
    }
}

/* Phase 25: align bag and warehouse item columns exactly with the equipment columns. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section h4,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section h4 {
        padding: 0 2px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel #inventory-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel #warehouse-grid {
        width: 100% !important;
        padding-right: 0 !important;
    }
}

/* Phase 26: compact clean inventory rail, no redundant title rows or inner art frames. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-inventory-equip {
        grid-template-rows: 38px 246px 38px minmax(0, 1fr) !important;
        gap: 7px !important;
        padding: 10px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .panel-header {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs {
        grid-row: 1 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #player-equipment-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #hero-equipment-grid {
        grid-row: 2 !important;
        height: 246px !important;
        grid-auto-rows: 78px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .inventory-tabs {
        grid-row: 3 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section {
        grid-row: 4 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section h4,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section h4,
    body[data-active-panel="combat"] #panel-inventory-equip .warehouse-controls,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-count {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel #inventory-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel #warehouse-grid {
        grid-auto-rows: 78px !important;
        gap: 6px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot.has-item,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot.has-item {
        min-height: 78px !important;
        height: 78px !important;
        max-height: 78px !important;
        padding: 5px 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-icon-wrap,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon {
        order: 1 !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        flex: 0 0 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot i,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .item-emoji {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .item-art-icon img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        filter: drop-shadow(0 2px 3px rgba(82, 61, 35, 0.18)) !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-name,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-type,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-name {
        order: 2 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        font-size: 0.64rem !important;
        line-height: 1.08 !important;
        font-weight: 800 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        word-break: break-all !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-type {
        color: #8a7449 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .item-quality-slot::before,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot::after,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot::after {
        display: none !important;
        content: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .item-quality-badge {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .item-quality-slot {
        border-color: rgba(232, 205, 160, 0.9) !important;
        box-shadow: 0 4px 12px rgba(132, 104, 65, 0.1) !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-inventory-equip {
        grid-template-rows: 36px 234px 36px minmax(0, 1fr) !important;
        gap: 6px !important;
        padding: 9px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #player-equipment-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #hero-equipment-grid {
        height: 234px !important;
        grid-auto-rows: 74px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel #inventory-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel #warehouse-grid {
        grid-auto-rows: 74px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot.has-item,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot.has-item {
        min-height: 74px !important;
        height: 74px !important;
        max-height: 74px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-icon-wrap,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot i,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .item-emoji {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        flex-basis: 44px !important;
    }
}

/* Phase 27: remove remaining text collisions in the inventory and status side rails. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-type {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot {
        justify-content: center !important;
        gap: 2px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-icon-wrap,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot i,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .item-emoji {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        flex: 0 0 42px !important;
        flex-basis: 42px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot i {
        font-size: 1.18rem !important;
        line-height: 42px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-name,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-name {
        flex: 0 0 auto !important;
        max-height: 24px !important;
        min-height: 14px !important;
        font-size: 0.63rem !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        display: block !important;
        word-break: keep-all !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] .container {
        grid-template-columns: clamp(330px, 23vw, 360px) minmax(480px, 1fr) clamp(390px, 27vw, 420px) !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-row,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-row {
        min-height: 38px !important;
        padding: 5px 7px !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-label,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-label {
        font-size: 0.66rem !important;
        line-height: 1.08 !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-value,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-value {
        font-size: 0.68rem !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
    }

    body[data-active-panel="combat"] #panel-status .status-attribute-grid #player-attack,
    body[data-active-panel="combat"] #panel-status .status-attribute-grid #hero-attack {
        font-size: 0.58rem !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-icon-wrap,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot i,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .item-emoji {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        flex: 0 0 38px !important;
        flex-basis: 38px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot i {
        font-size: 1.08rem !important;
        line-height: 38px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-name,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-name {
        max-height: 22px !important;
        min-height: 14px !important;
        font-size: 0.61rem !important;
        line-height: 1.1 !important;
    }
}

/* Phase 28: prevent left status controls and long bag names from spilling into adjacent areas. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-status {
        overflow: hidden !important;
        z-index: 2 !important;
    }

    body[data-active-panel="combat"] #panel-status > .panel-header {
        display: grid !important;
        grid-template-columns: 30px 34px minmax(92px, 1fr) auto !important;
        align-items: center !important;
        gap: 5px !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 0 6px !important;
        margin: 0 0 8px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body[data-active-panel="combat"] #panel-status > .panel-header > i {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        grid-column: 1 !important;
    }

    body[data-active-panel="combat"] #panel-status > .panel-header > span {
        grid-column: 2 !important;
        width: 32px !important;
        min-width: 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        word-break: keep-all !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-status .role-status-switch {
        grid-column: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 3px !important;
        gap: 3px !important;
    }

    body[data-active-panel="combat"] #panel-status .role-status-switch .tab-btn {
        min-width: 0 !important;
        min-height: 26px !important;
        height: 26px !important;
        padding: 0 5px !important;
        font-size: 0.68rem !important;
    }

    body[data-active-panel="combat"] #role-panel-tools {
        position: static !important;
        grid-column: 4 !important;
        transform: none !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 4px !important;
        width: auto !important;
        max-width: 68px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn,
    body[data-active-panel="combat"] #role-panel-tools .btn-music {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
        border-radius: 9px !important;
        flex: 0 0 28px !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .music-control-bar {
        width: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #role-panel-tools #music-volume {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot {
        display: grid !important;
        grid-template-rows: 40px 26px !important;
        align-content: center !important;
        justify-items: center !important;
        gap: 2px !important;
        padding: 4px 3px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon .item-art-icon {
        grid-row: 1 !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        flex: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-name {
        grid-row: 2 !important;
        width: 100% !important;
        max-height: 26px !important;
        min-height: 0 !important;
        font-size: 0.58rem !important;
        line-height: 1.08 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        word-break: break-all !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-count {
        top: 2px !important;
        right: 3px !important;
        height: 15px !important;
        min-width: 16px !important;
        line-height: 15px !important;
        font-size: 0.56rem !important;
        z-index: 6 !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] .container {
        grid-template-columns: clamp(340px, 24vw, 370px) minmax(470px, 1fr) clamp(390px, 27vw, 420px) !important;
        gap: 10px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot {
        grid-template-rows: 38px 26px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon .item-art-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-name {
        font-size: 0.56rem !important;
        line-height: 1.06 !important;
        max-height: 25px !important;
    }
}

/* Phase 29: fill the left status rail and give long inventory labels enough room. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-status .character-stats,
    body[data-active-panel="combat"] #panel-status .hero-stats,
    body[data-active-panel="combat"] #panel-status .player-status-compact,
    body[data-active-panel="combat"] #panel-status .hero-status-compact {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-row,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-row {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot {
        grid-template-rows: 36px 30px !important;
        gap: 2px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon .item-art-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-name {
        max-height: 30px !important;
        min-height: 24px !important;
        font-size: 0.56rem !important;
        line-height: 1.12 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        white-space: normal !important;
        overflow: hidden !important;
        word-break: break-all !important;
    }
}

/* Phase 30: restore 3-column status stats, move count badges off item art, and keep monsters opaque. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] .container {
        grid-template-columns: clamp(372px, 20vw, 410px) minmax(620px, 1fr) clamp(430px, 23vw, 470px) !important;
        gap: 10px !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-row,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-row {
        min-height: 42px !important;
        padding: 5px 6px !important;
        border-radius: 10px !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-label,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-label {
        font-size: 0.6rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[data-active-panel="combat"] #panel-status .player-status-compact .status-attribute-grid .stats-value,
    body[data-active-panel="combat"] #panel-status .hero-status-compact .status-attribute-grid .stats-value {
        font-size: 0.62rem !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[data-active-panel="combat"] #panel-status .status-attribute-grid #player-attack,
    body[data-active-panel="combat"] #panel-status .status-attribute-grid #hero-attack {
        font-size: 0.55rem !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot {
        grid-template-rows: 34px 32px !important;
        padding: 6px 3px 4px !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-count {
        top: -5px !important;
        left: -3px !important;
        right: auto !important;
        height: 17px !important;
        min-width: 19px !important;
        padding: 0 4px !important;
        line-height: 17px !important;
        font-size: 0.58rem !important;
        border: 2px solid rgba(255, 252, 237, 0.98) !important;
        box-shadow: 0 2px 6px rgba(61, 120, 73, 0.2) !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .inventory-item-icon .item-art-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-name {
        max-height: 32px !important;
        min-height: 24px !important;
        font-size: 0.55rem !important;
        line-height: 1.12 !important;
        -webkit-line-clamp: 2 !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container .monster-icon,
    body[data-active-panel="combat"] #panel-combat .monster-group-container .monster-icon img {
        opacity: 1 !important;
    }

    body[data-active-panel="combat"] #panel-combat .monster-group-container .monster-icon img {
        filter: saturate(1.06) contrast(1.04) brightness(1.02) drop-shadow(0 4px 5px rgba(70, 48, 28, 0.22)) !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] .container {
        grid-template-columns: clamp(372px, 26vw, 410px) minmax(430px, 1fr) clamp(390px, 27vw, 430px) !important;
    }
}

/* Phase 31: hard-fix inventory count badges so they never stretch over item art. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot .inventory-item-icon .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot .inventory-item-icon .item-art-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        flex: 0 0 32px !important;
        justify-self: center !important;
        align-self: end !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot .item-count,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot .item-count {
        position: absolute !important;
        top: -6px !important;
        left: -4px !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: 30px !important;
        min-width: 17px !important;
        height: 17px !important;
        padding: 0 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 17px !important;
        font-size: 0.56rem !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        transform: none !important;
        z-index: 8 !important;
        pointer-events: none !important;
    }
}

/* Phase 32: clean inventory cards with a dedicated count row instead of floating badges. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot.has-item,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot.has-item {
        display: grid !important;
        grid-template-rows: 16px 32px 24px !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 1px !important;
        padding: 3px 4px !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot .item-count,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot .item-count {
        position: static !important;
        grid-row: 1 !important;
        justify-self: start !important;
        align-self: center !important;
        width: auto !important;
        max-width: 34px !important;
        min-width: 18px !important;
        height: 15px !important;
        padding: 0 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 15px !important;
        font-size: 0.55rem !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 246, 0.96) !important;
        box-shadow: 0 2px 5px rgba(61, 120, 73, 0.14) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        transform: none !important;
        z-index: 2 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot .inventory-item-icon,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot .inventory-item-icon .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot .inventory-item-icon .item-art-icon {
        grid-row: 2 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        align-self: center !important;
        justify-self: center !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot .item-name,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot .item-name {
        grid-row: 3 !important;
        width: 100% !important;
        max-height: 24px !important;
        min-height: 20px !important;
        margin: 0 !important;
        font-size: 0.55rem !important;
        line-height: 1.08 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        word-break: break-all !important;
    }
}

/* Phase 33: adventure feature dock below the main combat buttons. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-bottom-toolbar {
        display: grid !important;
        grid-template-rows: 38px auto !important;
        gap: 6px !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-buttons {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        min-height: 38px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-buttons .btn {
        min-width: 0 !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 0.76rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-dock {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 6px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(188, 222, 171, 0.82) !important;
        background: rgba(250, 255, 241, 0.72) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-dock:empty {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 28px !important;
        height: 28px !important;
        padding: 0 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border-radius: 999px !important;
        font-size: 0.66rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-shadow: 0 5px 12px rgba(76, 126, 73, 0.1) !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-btn i {
        margin-right: 0 !important;
        font-size: 0.72rem !important;
        flex: 0 0 auto !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-combat .adventure-feature-dock {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 5px !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-btn {
        min-height: 26px !important;
        height: 26px !important;
        padding: 0 5px !important;
        font-size: 0.62rem !important;
    }
}

/* Phase 36: final override for requested combat top strip and shortcut order. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat.active {
        grid-template-rows: auto minmax(0, 1fr) auto 42px !important;
        gap: 7px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar {
        margin: 0 !important;
        padding: 6px !important;
        border-radius: 16px !important;
        background: rgba(250, 255, 241, 0.64) !important;
        border: 1px solid rgba(188, 222, 171, 0.78) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-row {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-extra,
    body[data-active-panel="combat"] #panel-combat .combat-status-actions {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-item {
        height: 34px !important;
        min-height: 34px !important;
        min-width: 0 !important;
        padding: 0 9px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: rgba(255, 255, 248, 0.84) !important;
        border: 1px solid rgba(229, 199, 139, 0.72) !important;
        color: #8b6a36 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-item i {
        flex: 0 0 auto !important;
        margin: 0 !important;
        font-size: 0.84rem !important;
        color: #f0a43a !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-label,
    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-value {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-label {
        flex: 0 0 auto !important;
        font-weight: 900 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-value {
        flex: 1 1 auto !important;
        font-weight: 1000 !important;
        color: #ffc94b !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-dock {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 6px !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-btn {
        min-height: 28px !important;
        height: 28px !important;
        padding: 0 5px !important;
        font-size: 0.6rem !important;
        letter-spacing: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-btn i {
        font-size: 0.68rem !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-item {
        padding: 0 6px !important;
        gap: 3px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-label,
    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-value {
        font-size: 0.66rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-dock {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-btn {
        min-height: 26px !important;
        height: 26px !important;
        padding: 0 4px !important;
        font-size: 0.54rem !important;
    }
}

/* Phase 43: keep combat scene entrances after bottom-toolbar overrides. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        position: absolute !important;
        top: 11px !important;
        z-index: 60 !important;
        display: flex !important;
        align-items: center !important;
        pointer-events: auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry {
        left: clamp(104px, 9.4vw, 150px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        right: clamp(282px, 24vw, 372px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-btn {
        width: auto !important;
        min-width: 112px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 224, 142, 0.92) !important;
        background: rgba(255, 251, 232, 0.9) !important;
        color: #6b4d25 !important;
        font-size: 0.78rem !important;
        font-weight: 900 !important;
        box-shadow: 0 8px 20px rgba(86, 64, 35, 0.16) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-btn {
        min-width: 126px !important;
        border-color: rgba(244, 188, 72, 0.96) !important;
        background: linear-gradient(180deg, rgba(255, 248, 221, 0.95), rgba(234, 255, 223, 0.92)) !important;
        color: #7c5615 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (orientation: landscape) and (max-width: 1280px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        right: clamp(238px, 23vw, 310px) !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-btn {
        min-width: 100px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 10px !important;
        font-size: 0.72rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-btn {
        min-width: 112px !important;
    }
}

/* Phase 40: final header tool sizing after all legacy overrides. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-status > .panel-header {
        grid-template-columns: 30px 34px minmax(86px, 1fr) 94px !important;
        gap: 5px !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-status .role-status-switch {
        max-width: 112px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #role-panel-tools {
        width: 94px !important;
        min-width: 94px !important;
        max-width: 94px !important;
        display: grid !important;
        grid-template-columns: repeat(3, 28px) !important;
        gap: 4px !important;
        justify-content: end !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn,
    body[data-active-panel="combat"] #role-panel-tools .music-control-bar,
    body[data-active-panel="combat"] #role-panel-tools .status-logout-btn,
    body[data-active-panel="combat"] #role-panel-tools .btn-topbar-logout {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        padding: 0 !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn i {
        margin: 0 !important;
        font-size: 0.78rem !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn span {
        display: none !important;
    }
}
/* Absolute final restore: compact world boss channel beside the combat log. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        position: absolute !important;
        top: 10px !important;
        right: 16px !important;
        z-index: 96 !important;
        display: block !important;
        width: clamp(224px, 22vw, 270px) !important;
        pointer-events: auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-rank-card {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        display: grid !important;
        grid-template-columns: auto minmax(72px, 1fr) auto !important;
        grid-template-rows: 30px !important;
        align-items: center !important;
        column-gap: 7px !important;
        row-gap: 0 !important;
        width: 100% !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 2px 5px 2px 9px !important;
        border: 1px solid rgba(244, 188, 72, 0.96) !important;
        border-radius: 15px !important;
        background: linear-gradient(180deg, rgba(255, 248, 219, 0.98), rgba(255, 239, 174, 0.88)) !important;
        box-shadow: 0 8px 18px rgba(79, 55, 22, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        height: 24px !important;
        padding: 0 7px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.58) !important;
        color: #805719 !important;
        font-size: 0.66rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location {
        display: none !important;
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #6b4d25 !important;
        font-size: 0.64rem !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location span,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location em {
        display: inline !important;
        margin: 0 3px 0 0 !important;
        font-style: normal !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        align-self: center !important;
        color: #c87200 !important;
        font-size: 0.68rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        height: 26px !important;
        min-height: 26px !important;
        min-width: 58px !important;
        max-width: 78px !important;
        padding: 0 9px !important;
        border-radius: 12px !important;
        border: 0 !important;
        background: linear-gradient(180deg, #f6bd4f, #d9891e) !important;
        color: #fffdf2 !important;
        font-size: 0.64rem !important;
        font-weight: 900 !important;
        box-shadow: 0 4px 9px rgba(159, 96, 15, 0.22) !important;
        line-height: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry.has-boss .boss-register-btn,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry:not(.has-boss) .boss-go-btn {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry:not(.has-boss) .boss-register-btn:disabled {
        display: inline-flex !important;
    }
}

@media (orientation: landscape) and (max-width: 1280px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        right: 12px !important;
        width: 238px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        grid-template-columns: auto minmax(62px, 1fr) auto !important;
        column-gap: 5px !important;
        padding: 2px 5px 2px 7px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        padding: 0 6px !important;
        font-size: 0.6rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        font-size: 0.6rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        min-width: 52px !important;
        max-width: 66px !important;
        padding: 0 7px !important;
    }
}

/* Adventure feature popup panels: farm, arena and skills open as modal windows. */
.adventure-panel-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 15000 !important;
    display: block !important;
    background: rgba(38, 50, 36, 0.38) !important;
    backdrop-filter: blur(2px) !important;
}

body.adventure-popup-open {
    overflow: hidden !important;
}

body.adventure-popup-open #panel-farm.adventure-popup-panel,
body.adventure-popup-open #panel-arena.adventure-popup-panel,
body.adventure-popup-open #panel-skills.adventure-popup-panel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 15010 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(760px, calc(100vw - 48px)) !important;
    max-height: min(78vh, 720px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px 20px 18px !important;
    overflow: hidden auto !important;
    border: 1px solid rgba(231, 199, 132, 0.92) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(255, 252, 238, 0.98), rgba(238, 255, 230, 0.96)) !important;
    box-shadow: 0 24px 58px rgba(42, 57, 34, 0.34), inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

body.adventure-popup-open #panel-farm.adventure-popup-panel .panel-header,
body.adventure-popup-open #panel-arena.adventure-popup-panel .panel-header,
body.adventure-popup-open #panel-skills.adventure-popup-panel .panel-header {
    position: sticky !important;
    top: -16px !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    margin: -16px -20px 14px !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(231, 199, 132, 0.72) !important;
    background: rgba(255, 252, 238, 0.96) !important;
}

body.adventure-popup-open #panel-farm.adventure-popup-panel .panel-header i,
body.adventure-popup-open #panel-arena.adventure-popup-panel .panel-header i,
body.adventure-popup-open #panel-skills.adventure-popup-panel .panel-header i {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #62c978, #3fb45f) !important;
    color: #fff !important;
}

body.adventure-popup-open #panel-farm.adventure-popup-panel .panel-header span,
body.adventure-popup-open #panel-arena.adventure-popup-panel .panel-header span,
body.adventure-popup-open #panel-skills.adventure-popup-panel .panel-header span {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #4f3a22 !important;
}

.adventure-panel-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border: 1px solid rgba(98, 201, 120, 0.55) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #34a957 !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 7px 18px rgba(60, 143, 82, 0.14) !important;
}

.adventure-panel-close:hover {
    transform: translateY(-1px) !important;
    background: #efffee !important;
}

body.adventure-popup-open #panel-farm.adventure-popup-panel .q-scene-intro,
body.adventure-popup-open #panel-arena.adventure-popup-panel .q-scene-intro,
body.adventure-popup-open #panel-skills.adventure-popup-panel .q-scene-intro {
    margin-bottom: 14px !important;
}

body.adventure-popup-open #panel-farm.adventure-popup-panel .farm-plots-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body.adventure-popup-open #panel-arena.adventure-popup-panel .arena-container,
body.adventure-popup-open #panel-skills.adventure-popup-panel .spellbook-page {
    min-height: 300px !important;
}

body.adventure-popup-open #seed-shop-modal.active,
body.adventure-popup-open #seed-storage-modal.active,
body.adventure-popup-open #tool-shop-modal.active,
body.adventure-popup-open #game-selection-modal.active,
body.adventure-popup-open #game-confirm-modal.active,
body.adventure-popup-open #item-action-modal.active,
body.adventure-popup-open #other-farm-modal.active {
    z-index: 15120 !important;
    background: rgba(42, 51, 36, 0.42) !important;
    backdrop-filter: blur(3px) !important;
}

body.adventure-popup-open #seed-shop-modal.active .modal-content,
body.adventure-popup-open #seed-storage-modal.active .modal-content,
body.adventure-popup-open #tool-shop-modal.active .modal-content,
body.adventure-popup-open #game-selection-modal.active .modal-content,
body.adventure-popup-open #game-confirm-modal.active .modal-content,
body.adventure-popup-open #item-action-modal.active .modal-content,
body.adventure-popup-open #other-farm-modal.active .modal-content {
    position: relative !important;
    z-index: 15121 !important;
    max-height: min(76vh, 680px) !important;
}

body.adventure-popup-open #seed-shop-modal .modal-content,
body.adventure-popup-open #seed-storage-modal .modal-content,
body.adventure-popup-open #tool-shop-modal .modal-content {
    width: min(760px, calc(100vw - 64px)) !important;
    max-width: min(760px, calc(100vw - 64px)) !important;
    padding: 16px 20px 18px !important;
    overflow: hidden !important;
}

body.adventure-popup-open #seed-shop-modal .modal-header,
body.adventure-popup-open #seed-storage-modal .modal-header,
body.adventure-popup-open #tool-shop-modal .modal-header {
    min-height: 48px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: -16px -20px 14px !important;
    padding: 12px 20px !important;
    text-align: left !important;
    font-size: 1.15rem !important;
}

body.adventure-popup-open #seed-shop-list,
body.adventure-popup-open #seed-storage-list,
body.adventure-popup-open #tool-shop-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    gap: 12px !important;
    max-height: min(52vh, 430px) !important;
    overflow: auto !important;
    padding: 2px 3px 6px !important;
    margin: 0 !important;
}

body.adventure-popup-open #seed-shop-list .seed-card,
body.adventure-popup-open #seed-storage-list .seed-card,
body.adventure-popup-open #tool-shop-list .seed-card {
    min-height: 128px !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 94px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
}

body.adventure-popup-open #seed-shop-list .seed-icon,
body.adventure-popup-open #seed-storage-list .seed-icon,
body.adventure-popup-open #tool-shop-list .seed-icon {
    width: 50px !important;
    height: 50px !important;
    align-self: center !important;
}

body.adventure-popup-open #seed-shop-list .seed-info,
body.adventure-popup-open #seed-storage-list .seed-info,
body.adventure-popup-open #tool-shop-list .seed-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
    align-content: center !important;
}

body.adventure-popup-open #seed-shop-list .seed-name,
body.adventure-popup-open #seed-storage-list .seed-name,
body.adventure-popup-open #tool-shop-list .seed-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.94rem !important;
    line-height: 1.2 !important;
}

body.adventure-popup-open #seed-shop-list .seed-desc,
body.adventure-popup-open #seed-storage-list .seed-desc,
body.adventure-popup-open #tool-shop-list .seed-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
}

body.adventure-popup-open #seed-shop-list .seed-price,
body.adventure-popup-open #seed-storage-list .seed-price,
body.adventure-popup-open #tool-shop-list .seed-price {
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

body.adventure-popup-open #seed-shop-list .seed-card > div:last-child,
body.adventure-popup-open #seed-storage-list .seed-card > div:last-child,
body.adventure-popup-open #tool-shop-list .seed-card > div:last-child {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-content: center !important;
}

body.adventure-popup-open #seed-shop-list .seed-card input,
body.adventure-popup-open #tool-shop-list .seed-card input {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    text-align: center !important;
}

body.adventure-popup-open #seed-shop-list .seed-card .btn,
body.adventure-popup-open #seed-storage-list .seed-card .btn,
body.adventure-popup-open #tool-shop-list .seed-card .btn {
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
}

body.adventure-popup-open #seed-shop-modal .modal-buttons,
body.adventure-popup-open #seed-storage-modal .modal-buttons,
body.adventure-popup-open #tool-shop-modal .modal-buttons {
    margin-top: 14px !important;
}

/* Farm shop/storage cards must stay readable in every entry path. */
#seed-shop-modal .modal-content,
#seed-storage-modal .modal-content,
#tool-shop-modal .modal-content {
    width: min(760px, calc(100vw - 64px)) !important;
    max-width: min(760px, calc(100vw - 64px)) !important;
    padding: 16px 20px 18px !important;
}

#seed-shop-list,
#seed-storage-list,
#tool-shop-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    gap: 12px !important;
    max-height: min(52vh, 430px) !important;
    overflow: auto !important;
    padding: 2px 3px 6px !important;
    margin: 0 !important;
}

#seed-shop-list .seed-card,
#seed-storage-list .seed-card,
#tool-shop-list .seed-card {
    min-height: 128px !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 94px !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
}

#seed-shop-list .seed-card .seed-icon,
#seed-storage-list .seed-card .seed-icon,
#tool-shop-list .seed-card .seed-icon {
    width: 50px !important;
    height: 50px !important;
}

#seed-shop-list .seed-info,
#seed-storage-list .seed-info,
#tool-shop-list .seed-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
}

#seed-shop-list .seed-name,
#seed-storage-list .seed-name,
#tool-shop-list .seed-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.94rem !important;
    line-height: 1.2 !important;
}

#seed-shop-list .seed-desc,
#seed-storage-list .seed-desc,
#tool-shop-list .seed-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
}

#seed-shop-list .seed-card > div:last-child,
#seed-storage-list .seed-card > div:last-child,
#tool-shop-list .seed-card > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-content: center !important;
}

#seed-shop-list .seed-card input,
#tool-shop-list .seed-card input {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    text-align: center !important;
}

#seed-shop-list .seed-card .btn,
#seed-storage-list .seed-card .btn,
#tool-shop-list .seed-card .btn {
    height: 36px !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
}

@media (max-width: 900px) {
    body.adventure-popup-open #panel-farm.adventure-popup-panel,
    body.adventure-popup-open #panel-arena.adventure-popup-panel,
    body.adventure-popup-open #panel-skills.adventure-popup-panel {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 28px) !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    body.adventure-popup-open #panel-farm.adventure-popup-panel .panel-header,
    body.adventure-popup-open #panel-arena.adventure-popup-panel .panel-header,
    body.adventure-popup-open #panel-skills.adventure-popup-panel .panel-header {
        margin: -12px -12px 12px !important;
        padding: 10px 12px !important;
    }

    body.adventure-popup-open #panel-farm.adventure-popup-panel .farm-plots-grid,
    body.adventure-popup-open #panel-skills.adventure-popup-panel .skills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Final combat top-row entrance alignment: map/BOSS entries live below status cards. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat.active {
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        gap: 6px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout::after {
        content: none !important;
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-extra {
        display: block !important;
        margin: 0 !important;
        padding: 0 6px !important;
        min-height: 34px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-actions {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        align-items: center !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry,
    body[data-active-panel="combat"] #panel-combat .combat-scene-action-spacer {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        display: flex !important;
        align-items: stretch !important;
        pointer-events: auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry {
        grid-column: 1 / 2 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-action-spacer {
        grid-column: 2 / 5 !important;
        pointer-events: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        grid-column: 5 / 7 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-map-btn,
    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry #change-map-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(229, 199, 139, 0.72) !important;
        background: rgba(255, 255, 248, 0.84) !important;
        color: #8b6a36 !important;
        box-shadow: none !important;
        font-size: 0.74rem !important;
        font-weight: 1000 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-map-btn i,
    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry #change-map-btn i {
        color: #f0a43a !important;
        font-size: 0.84rem !important;
        margin: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-entry {
        display: block !important;
        width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 7px !important;
        width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 8px 0 10px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(244, 188, 72, 0.86) !important;
        background: linear-gradient(180deg, rgba(255, 248, 219, 0.96), rgba(234, 255, 223, 0.9)) !important;
        color: #8b651c !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #8b651c !important;
        font-size: 0.74rem !important;
        font-weight: 1000 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-location {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown {
        display: block !important;
        min-width: 0 !important;
        color: #d47a00 !important;
        font-size: 0.7rem !important;
        font-weight: 1000 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        height: 26px !important;
        min-height: 26px !important;
        max-width: 82px !important;
        min-width: 62px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        border: 0 !important;
        background: linear-gradient(180deg, #f6bd4f, #d9891e) !important;
        color: #fffdf2 !important;
        box-shadow: 0 4px 9px rgba(159, 96, 15, 0.18) !important;
        font-size: 0.64rem !important;
        font-weight: 1000 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-rank-card {
        display: none !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-map-btn,
    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry #change-map-btn,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        font-size: 0.6rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-map-btn,
    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry #change-map-btn {
        gap: 2px !important;
        padding: 0 4px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-map-btn i,
    body[data-active-panel="combat"] #panel-combat .combat-scene-map-entry #change-map-btn i {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown {
        font-size: 0.62rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        min-width: 54px !important;
        max-width: 68px !important;
        padding: 0 7px !important;
        font-size: 0.6rem !important;
    }
}

/* Final tab isolation: prevent inactive equipment grid from leaking through later layout rules. */
#panel-inventory-equip.equip-tab-player #hero-equipment-grid,
#panel-inventory-equip.equip-tab-hero #player-equipment-grid,
body[data-active-panel="combat"] #panel-inventory-equip.equip-tab-player #hero-equipment-grid,
body[data-active-panel="combat"] #panel-inventory-equip.equip-tab-hero #player-equipment-grid {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Party card actions: attack/supply live directly under each level badge. */
#panel-combat .card-info {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

#panel-combat .card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    margin-top: 5px !important;
    pointer-events: auto !important;
}

/* Keep the party's current HP and MP immediately above its card actions. */
#panel-combat .card-meters {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    width: 100% !important;
    margin: 5px 0 0 !important;
}

#panel-combat .card-meter {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 11px !important;
    min-height: 11px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 999px !important;
    background: rgba(74, 65, 54, 0.34) !important;
    box-shadow: inset 0 1px 2px rgba(44, 33, 21, 0.22) !important;
}

#panel-combat .card-meter-fill {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 auto 0 0 !important;
    min-width: 0 !important;
    border-radius: inherit !important;
    transition: width 0.18s ease !important;
}

#panel-combat .card-meter span {
    position: relative !important;
    z-index: 1 !important;
    color: #fffdf1 !important;
    font-size: 0.54rem !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 1px rgba(51, 40, 26, 0.82) !important;
}

#panel-combat .card-meter-hp .card-meter-fill {
    background: linear-gradient(90deg, #ef6e77, #ff9da0) !important;
}

#panel-combat .card-meter-mp .card-meter-fill {
    background: linear-gradient(90deg, #4cafea, #86d4ff) !important;
}

#panel-combat .card-action-btn {
    min-width: 0 !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 12 !important;
}

#panel-combat .card-action-btn i {
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: 0.62rem !important;
}

#panel-combat .card-action-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

#panel-combat .combat-bottom-toolbar .combat-buttons:empty {
    display: none !important;
}

@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat .card-info {
        padding: 5px 6px 6px !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 10 !important;
    }

    body[data-active-panel="combat"] #panel-combat .card-action-btn {
        height: 22px !important;
        min-height: 22px !important;
        padding: 0 4px !important;
        font-size: 0.56rem !important;
    }

    body[data-active-panel="combat"] #panel-combat.active {
        grid-template-rows: auto auto minmax(300px, min(58vh, 560px)) auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout {
        height: min(58vh, 560px) !important;
        max-height: min(58vh, 560px) !important;
        align-self: start !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-dock {
        max-height: 96px !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 420px) {
    #panel-combat .card-actions {
        gap: 3px !important;
        margin-top: 4px !important;
    }

    #panel-combat .card-action-btn {
        height: 22px !important;
        min-height: 22px !important;
        padding: 0 3px !important;
        font-size: 0.56rem !important;
    }

    #panel-combat .card-action-btn i {
        display: none !important;
    }
}

#panel-inventory-equip.equip-tab-player #player-equipment-grid,
#panel-inventory-equip.equip-tab-hero #hero-equipment-grid,
body[data-active-panel="combat"] #panel-inventory-equip.equip-tab-player #player-equipment-grid,
body[data-active-panel="combat"] #panel-inventory-equip.equip-tab-hero #hero-equipment-grid {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
}

/* Final inventory/warehouse isolation: prevent the inactive tab content from bleeding through. */
#panel-inventory-equip.inventory-tab-bag #warehouse-section,
#panel-inventory-equip.inventory-tab-warehouse #inventory-section,
body[data-active-panel="combat"] #panel-inventory-equip.inventory-tab-bag #warehouse-section,
body[data-active-panel="combat"] #panel-inventory-equip.inventory-tab-warehouse #inventory-section {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

#panel-inventory-equip.inventory-tab-bag #inventory-section,
#panel-inventory-equip.inventory-tab-warehouse #warehouse-section,
body[data-active-panel="combat"] #panel-inventory-equip.inventory-tab-bag #inventory-section,
body[data-active-panel="combat"] #panel-inventory-equip.inventory-tab-warehouse #warehouse-section {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Final combat layout polish: no top dead space, full shortcut rows, independent card buttons. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-combat.active {
        display: grid !important;
        grid-template-rows: auto 34px minmax(0, 1fr) auto !important;
        align-content: start !important;
        gap: 6px !important;
        padding: 8px 10px 8px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar {
        margin: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-extra {
        min-height: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        align-self: stretch !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-actions {
        height: 34px !important;
        align-items: center !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-split-layout {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        align-self: stretch !important;
        margin: 0 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-bottom-toolbar {
        display: block !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-dock {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-auto-rows: 28px !important;
        gap: 5px !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 5px !important;
    }

    body[data-active-panel="combat"] #panel-combat .adventure-feature-btn {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 6px !important;
        font-size: 0.62rem !important;
    }
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-combat .adventure-feature-dock {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-auto-rows: 28px !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Final inventory readability and hover/touch item preview. */
#panel-inventory-equip .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important;
    gap: 7px !important;
    align-items: start !important;
    grid-auto-rows: auto !important;
}

#panel-inventory-equip .inventory-slot,
#panel-inventory-equip #inventory-grid .inventory-slot,
#panel-inventory-equip #warehouse-grid .inventory-slot,
#panel-inventory-equip .inventory-slot.has-item,
#panel-inventory-equip #inventory-grid .inventory-slot.has-item,
#panel-inventory-equip #warehouse-grid .inventory-slot.has-item {
    display: grid !important;
    grid-template-rows: 18px 36px minmax(30px, auto) !important;
    min-height: 88px !important;
    padding: 4px 6px 7px !important;
    gap: 2px !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: visible !important;
}

#panel-inventory-equip .inventory-slot .item-count,
#panel-inventory-equip #inventory-grid .inventory-slot .item-count,
#panel-inventory-equip #warehouse-grid .inventory-slot .item-count {
    position: static !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 17px !important;
    padding: 0 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #58c76b !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 246, 0.96) !important;
    box-shadow: 0 2px 5px rgba(61, 120, 73, 0.16) !important;
    font-size: 0.58rem !important;
    font-weight: 900 !important;
    line-height: 17px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 6 !important;
}

#panel-inventory-equip .inventory-slot .inventory-item-icon,
#panel-inventory-equip .inventory-slot .item-art-icon,
#panel-inventory-equip .inventory-slot .inventory-item-icon .item-art-icon,
#panel-inventory-equip #inventory-grid .inventory-slot .inventory-item-icon,
#panel-inventory-equip #warehouse-grid .inventory-slot .inventory-item-icon,
#panel-inventory-equip #inventory-grid .inventory-slot .item-art-icon,
#panel-inventory-equip #warehouse-grid .inventory-slot .item-art-icon {
    grid-row: 2 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    align-self: center !important;
    justify-self: center !important;
}

#panel-inventory-equip .inventory-slot .item-name,
#panel-inventory-equip #inventory-grid .inventory-slot .item-name,
#panel-inventory-equip #warehouse-grid .inventory-slot .item-name {
    grid-row: 3 !important;
    width: 100% !important;
    min-height: 28px !important;
    max-height: none !important;
    margin: 0 !important;
    display: block !important;
    color: inherit;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    line-height: 1.14 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

#panel-inventory-equip .item-quality-badge {
    top: 5px !important;
    left: auto !important;
    right: 5px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    font-size: 0.54rem !important;
}

#panel-inventory-equip .equipment-grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important;
    gap: 7px !important;
}

#panel-inventory-equip .equipment-slot {
    min-height: 80px !important;
    display: grid !important;
    grid-template-rows: 38px minmax(28px, auto) 14px !important;
    gap: 2px !important;
    padding: 6px 5px !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: visible !important;
}

#panel-inventory-equip .equipment-slot .equipment-icon-wrap,
#panel-inventory-equip .equipment-slot .item-art-icon,
#panel-inventory-equip .equipment-slot .equipment-icon-wrap .item-art-icon,
#panel-inventory-equip .equipment-slot > i {
    grid-row: 1 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    align-self: center !important;
    justify-self: center !important;
}

#panel-inventory-equip .equipment-slot .equipment-name {
    grid-row: 2 !important;
    width: 100% !important;
    min-height: 24px !important;
    max-height: none !important;
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    line-height: 1.14 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

#panel-inventory-equip .equipment-slot .equipment-type {
    grid-row: 3 !important;
    min-height: 12px !important;
    font-size: 0.54rem !important;
    line-height: 1 !important;
}

.item-hover-preview {
    position: fixed !important;
    z-index: 20050 !important;
    width: min(280px, calc(100vw - 22px)) !important;
    max-height: min(62vh, 420px) !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(222, 192, 129, 0.95) !important;
    background: rgba(255, 252, 239, 0.96) !important;
    box-shadow: 0 14px 30px rgba(83, 65, 35, 0.22) !important;
    color: #59422b !important;
    overflow-y: auto !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(4px) !important;
    transition: opacity 0.08s ease, transform 0.08s ease !important;
}

.item-hover-preview.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.item-preview-head {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding-bottom: 7px !important;
    margin-bottom: 7px !important;
    border-bottom: 1px dashed rgba(203, 170, 104, 0.7) !important;
}

.item-preview-icon,
.item-preview-icon .item-art-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

.item-preview-title {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
}

.item-preview-title strong {
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    word-break: break-all !important;
}

.item-preview-title span {
    font-size: 0.68rem !important;
    color: #9c7a47 !important;
}

.item-preview-rows {
    display: grid !important;
    gap: 5px !important;
}

.item-preview-row {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
}

.item-preview-row span {
    color: #9b7947 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.item-preview-row b {
    min-width: 0 !important;
    color: #503925 !important;
    font-weight: 800 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* Final combat log readability: higher contrast on the warm translucent log panel. */
body[data-active-panel="combat"] #combat-log,
#panel-combat #combat-log {
    color: #4f3a27 !important;
    background: rgba(255, 249, 234, 0.82) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

body[data-active-panel="combat"] #combat-log .log-entry,
#panel-combat #combat-log .log-entry {
    border-bottom-color: rgba(112, 76, 38, 0.56) !important;
    color: #4f3a27 !important;
    font-weight: 700 !important;
}

body[data-active-panel="combat"] #combat-log .log-time,
#panel-combat #combat-log .log-time {
    color: #62594d !important;
    font-weight: 800 !important;
}

body[data-active-panel="combat"] #combat-log .log-damage,
body[data-active-panel="combat"] #combat-log .log-entry .fa-fist-raised,
#panel-combat #combat-log .log-damage,
#panel-combat #combat-log .log-entry .fa-fist-raised {
    color: #d72727 !important;
}

body[data-active-panel="combat"] #combat-log .log-combat,
body[data-active-panel="combat"] #combat-log .log-entry .fa-sword,
#panel-combat #combat-log .log-combat,
#panel-combat #combat-log .log-entry .fa-sword {
    color: #c24716 !important;
}

body[data-active-panel="combat"] #combat-log .log-loot,
body[data-active-panel="combat"] #combat-log .log-entry .fa-coins,
#panel-combat #combat-log .log-loot,
#panel-combat #combat-log .log-entry .fa-coins {
    color: #a45f00 !important;
}

body[data-active-panel="combat"] #combat-log .log-skill,
body[data-active-panel="combat"] #combat-log .log-entry .fa-magic,
#panel-combat #combat-log .log-skill,
#panel-combat #combat-log .log-entry .fa-magic {
    color: #1769bd !important;
}

body[data-active-panel="combat"] #combat-log .log-level,
body[data-active-panel="combat"] #combat-log .log-entry .fa-arrow-up,
#panel-combat #combat-log .log-level,
#panel-combat #combat-log .log-entry .fa-arrow-up {
    color: #087b83 !important;
}

body[data-active-panel="combat"] #combat-log .log-heal,
body[data-active-panel="combat"] #combat-log .log-entry .fa-heart,
#panel-combat #combat-log .log-heal,
#panel-combat #combat-log .log-entry .fa-heart {
    color: #24863b !important;
}

body[data-active-panel="combat"] #combat-log .log-info,
body[data-active-panel="combat"] #combat-log .log-entry .fa-info-circle,
#panel-combat #combat-log .log-info,
#panel-combat #combat-log .log-entry .fa-info-circle {
    color: #6d563d !important;
}

/* Final global capsule buttons with generated fantasy icon assets. */
.btn,
.btn-page,
.tab-btn,
.adventure-feature-btn,
.card-action-btn,
.boss-register-btn,
.boss-go-btn,
.auction-sort-chip,
.btn-topbar-logout,
.btn-music,
.modal-buttons .btn,
.item-action-buttons .btn,
.arena-actions .btn,
.auction-card-actions .btn,
.craft-card-actions .btn,
.strength-equip-card .btn,
.strength-zodiac-card .btn,
.decompose-card .btn,
.decompose-actions .btn,
#seed-shop-list .seed-card .btn,
#seed-storage-list .seed-card .btn,
#tool-shop-list .seed-card .btn {
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.btn.has-ui-generated-icon,
.btn-page.has-ui-generated-icon,
button.has-ui-generated-icon,
.auction-sort-chip.has-ui-generated-icon {
    line-height: 1.1 !important;
}

.ui-btn-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    display: inline-block !important;
    flex: 0 0 18px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    vertical-align: -3px !important;
    filter: drop-shadow(0 1px 1px rgba(96, 68, 30, 0.22)) !important;
    pointer-events: none !important;
}

.btn-small .ui-btn-icon,
.btn-sm .ui-btn-icon,
.card-action-btn .ui-btn-icon,
.adventure-feature-btn .ui-btn-icon,
.btn-page .ui-btn-icon,
.auction-sort-chip .ui-btn-icon {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    flex-basis: 15px !important;
}

.tab-btn .ui-btn-icon,
.modal-buttons .btn .ui-btn-icon,
.item-action-buttons .btn .ui-btn-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    flex-basis: 20px !important;
}

.btn-music .ui-btn-icon,
.btn-topbar-logout .ui-btn-icon {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    flex-basis: 17px !important;
}

.modal .close,
.modal .close-btn,
.close-modal,
.close-rank-modal,
.adventure-panel-close,
.status-leaderboard-close,
.btn-clear-log.ui-icon-only {
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ui-icon-only {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 5px !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

.ui-icon-only .ui-btn-icon,
.btn-clear-log .ui-btn-icon,
.modal .close .ui-btn-icon,
.modal .close-btn .ui-btn-icon,
.close-modal .ui-btn-icon,
.close-rank-modal .ui-btn-icon,
.adventure-panel-close .ui-btn-icon,
.status-leaderboard-close .ui-btn-icon {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    flex-basis: 21px !important;
    margin: 0 !important;
}

#panel-combat .card-action-btn.has-ui-generated-icon {
    padding-left: 7px !important;
    padding-right: 8px !important;
}

#panel-combat .adventure-feature-btn.has-ui-generated-icon,
body[data-active-panel="combat"] #panel-combat .adventure-feature-btn.has-ui-generated-icon {
    gap: 5px !important;
}

.btn.has-ui-generated-icon i[class*="fa-"],
button.has-ui-generated-icon i[class*="fa-"] {
    display: none !important;
}

/* Final map chooser behavior: opened as an in-combat popup, never as a full page. */
body[data-active-panel="map"] .game-topbar,
body[data-active-panel="map"] .mobile-nav {
    display: none !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 15010 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(980px, calc(100vw - 56px)) !important;
    max-height: min(84vh, 760px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 16px 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(231, 199, 132, 0.92) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(255, 252, 238, 0.99), rgba(238, 255, 230, 0.97)) !important;
    box-shadow: 0 24px 58px rgba(42, 57, 34, 0.34), inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .panel-header {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
    margin: -14px -16px 12px !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid rgba(231, 199, 132, 0.72) !important;
    background: rgba(255, 252, 238, 0.97) !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .panel-header i {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #62c978, #3fb45f) !important;
    color: #fff !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .panel-header span {
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    color: #4f3a22 !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .map-intro {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 10px 12px !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .map-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.78fr) !important;
    gap: 12px !important;
    overflow: hidden !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .map-selector {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)) !important;
    padding: 10px !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .map-option {
    min-height: 136px !important;
    padding: 7px !important;
    gap: 4px !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .map-info {
    min-height: 0 !important;
    overflow-y: auto !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .map-buttons {
    flex: 0 0 auto !important;
    margin-top: 12px !important;
}

@media (max-width: 820px) {
    body.adventure-popup-open #panel-map.adventure-popup-panel {
        width: min(94vw, 720px) !important;
        max-height: 86vh !important;
        padding: 12px !important;
    }

    body.adventure-popup-open #panel-map.adventure-popup-panel .panel-header {
        margin: -12px -12px 10px !important;
        padding: 10px 12px !important;
    }

    body.adventure-popup-open #panel-map.adventure-popup-panel .map-intro {
        display: none !important;
    }

    body.adventure-popup-open #panel-map.adventure-popup-panel .map-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.adventure-popup-open #panel-map.adventure-popup-panel .map-info {
        display: none !important;
    }
}

/* Final scroll repair: map popup and inventory grids scroll inside their own panels. */
body.adventure-popup-open #panel-map.adventure-popup-panel .map-layout {
    flex: 0 1 auto !important;
    height: min(54vh, 430px) !important;
    max-height: calc(84vh - 172px) !important;
    min-height: 260px !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .map-selector {
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 18px !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .adventure-panel-close.ui-icon-only {
    font-size: 0 !important;
    color: transparent !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .adventure-panel-close.ui-icon-only::before,
body.adventure-popup-open #panel-map.adventure-popup-panel .adventure-panel-close.ui-icon-only::after {
    content: none !important;
}

#panel-inventory-equip.active {
    min-height: 0 !important;
    overflow: hidden !important;
}

#panel-inventory-equip.active #inventory-section,
#panel-inventory-equip.active #warehouse-section,
body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-section,
body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-section {
    min-height: 0 !important;
    overflow: hidden !important;
}

#panel-inventory-equip.active #inventory-grid,
#panel-inventory-equip.active #warehouse-grid,
body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-grid,
body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-grid {
    min-height: 0 !important;
    max-height: calc(100vh - 306px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 92px !important;
}

@media (max-width: 820px) {
    body.adventure-popup-open #panel-map.adventure-popup-panel .map-layout {
        height: min(62vh, 520px) !important;
        max-height: calc(86vh - 104px) !important;
        min-height: 300px !important;
    }

    #panel-inventory-equip.active #inventory-grid,
    #panel-inventory-equip.active #warehouse-grid,
    body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-grid,
    body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-grid {
        max-height: calc(100vh - 248px) !important;
        padding-bottom: 118px !important;
    }
}

/* Final interaction safety: auth modal must be visible and closable when it blocks the page. */
#auth-modal {
    pointer-events: none !important;
}

#auth-modal.active {
    pointer-events: auto !important;
}

#auth-modal.active .modal-content {
    pointer-events: auto !important;
    z-index: 1 !important;
}

#auth-modal #auth-close-btn {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Final map card readability: no corner badges, enough room for map text. */
#panel-map .map-card-icon,
body.adventure-popup-open #panel-map.adventure-popup-panel .map-card-icon {
    display: none !important;
}

#panel-map .map-option,
body.adventure-popup-open #panel-map.adventure-popup-panel .map-option {
    grid-template-rows: auto 20px 17px 16px !important;
    min-height: 172px !important;
    align-content: start !important;
    gap: 6px !important;
    overflow: visible !important;
}

#panel-map .map-card-scene,
body.adventure-popup-open #panel-map.adventure-popup-panel .map-card-scene {
    height: clamp(76px, 6.8vw, 84px) !important;
    aspect-ratio: auto !important;
    margin-bottom: 2px !important;
}

#panel-map .map-name,
body.adventure-popup-open #panel-map.adventure-popup-panel .map-name {
    min-height: 20px !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: keep-all !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    margin: 0 !important;
}

#panel-map .map-desc,
#panel-map .map-online-count,
body.adventure-popup-open #panel-map.adventure-popup-panel .map-desc,
body.adventure-popup-open #panel-map.adventure-popup-panel .map-online-count {
    min-height: 16px !important;
    display: block !important;
    overflow: visible !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    color: #5e4b2f !important;
    font-size: 0.78rem !important;
}

body.adventure-popup-open #panel-map.adventure-popup-panel .map-selector {
    grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)) !important;
    align-content: start !important;
}

/* ========== 背包/仓库 数量角标修复：去除背景、边框、圆角，直接显示数字 ========== */
#panel-inventory-equip .inventory-slot .item-count,
#panel-inventory-equip #inventory-grid .inventory-slot .item-count,
#panel-inventory-equip #warehouse-grid .inventory-slot .item-count,
body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot .item-count,
body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot .item-count,
body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot .item-count {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    color: #ffd700 !important;
    font-weight: 900 !important;
    font-size: 0.65rem !important;
    height: auto !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 6 !important;
}

/* ========== 背包/仓库 滚动条修复：确保可见滚动条和正常滚动 ========== */
#panel-inventory-equip #inventory-grid,
#panel-inventory-equip #warehouse-grid,
#panel-inventory-equip.active #inventory-grid,
#panel-inventory-equip.active #warehouse-grid,
body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-grid,
body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-grid {
    max-height: min(50vh, 460px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(192, 160, 96, 0.5) rgba(0, 0, 0, 0.2) !important;
}

/* Webkit 滚动条样式 */
#panel-inventory-equip #inventory-grid::-webkit-scrollbar,
#panel-inventory-equip #warehouse-grid::-webkit-scrollbar {
    width: 6px !important;
    display: block !important;
}
#panel-inventory-equip #inventory-grid::-webkit-scrollbar-track,
#panel-inventory-equip #warehouse-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 3px !important;
}
#panel-inventory-equip #inventory-grid::-webkit-scrollbar-thumb,
#panel-inventory-equip #warehouse-grid::-webkit-scrollbar-thumb {
    background: rgba(192, 160, 96, 0.55) !important;
    border-radius: 3px !important;
}
#panel-inventory-equip #inventory-grid::-webkit-scrollbar-thumb:hover,
#panel-inventory-equip #warehouse-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.7) !important;
}

/* 确保 inventory-section / warehouse-section 允许内部 grid 独立滚动 */
#panel-inventory-equip.active #inventory-section,
#panel-inventory-equip.active #warehouse-section,
body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-section,
body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-section {
    overflow: visible !important;
    min-height: 0 !important;
}

body[data-active-panel="combat"] #panel-inventory-equip #inventory-section,
body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section {
    overflow: visible !important;
}

/* Final lottery modal polish: generated icons, readable pool text, no overlap. */
#lottery-modal .modal-content {
    width: min(720px, calc(100vw - 28px)) !important;
    max-height: min(92vh, 680px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
}

#lottery-modal .modal-body {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 14px 18px !important;
}

#lottery-select {
    display: grid !important;
    gap: 12px !important;
}

#lottery-select .activity-art-icon {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#lottery-select .activity-art-icon img,
#lottery-result .activity-art-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

#lottery-modal .lottery-hero-card {
    margin: 0 !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    padding: 12px 14px !important;
    border-style: solid !important;
    background: linear-gradient(180deg, rgba(255, 255, 250, 0.94), rgba(244, 255, 237, 0.86)) !important;
}

#lottery-modal .lottery-hero-card span,
#lottery-modal .lottery-prize-item span,
#lottery-modal .lottery-option-btn small {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.28 !important;
}

#lottery-modal .lottery-pool-card {
    margin: 0 !important;
    padding: 12px !important;
}

#lottery-modal .lottery-pool-title {
    align-items: center !important;
    margin-bottom: 10px !important;
}

#lottery-modal .lottery-pool-title b {
    flex: 0 0 auto !important;
    font-size: 0.72rem !important;
}

#lottery-modal .lottery-prize-grid {
    gap: 8px !important;
}

#lottery-modal .lottery-prize-item {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
}

#lottery-modal .lottery-prize-item strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
}

#lottery-modal .lottery-option-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
    gap: 10px !important;
}

#lottery-modal .lottery-option-btn {
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
    justify-items: start !important;
    align-content: center !important;
    text-align: left !important;
    padding: 9px 11px !important;
}

#lottery-modal .lottery-option-btn .activity-art-icon {
    grid-row: 1 / 3 !important;
}

#lottery-modal .lottery-option-btn > .ui-btn-icon {
    display: none !important;
}

#lottery-modal .lottery-option-btn span,
#lottery-modal .lottery-option-btn small {
    min-width: 0 !important;
}

#lottery-modal .modal-footer {
    padding-top: 8px !important;
}

@media (max-width: 620px) {
    #lottery-modal .lottery-option-grid {
        grid-template-columns: 1fr !important;
    }

    #lottery-modal .lottery-pool-title {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
}

/* Lottery result popup: keep the draw panel from stacking page, modal, and result scrollbars. */
#lottery-modal .modal-content {
    position: relative !important;
}

#lottery-modal .modal-body {
    overflow: hidden !important;
}

#lottery-modal #lottery-select {
    max-height: none !important;
    overflow: visible !important;
}

#lottery-modal #lottery-result {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(560px, calc(100vw - 42px)) !important;
    max-height: min(74vh, 580px) !important;
    overflow: hidden !important;
    z-index: 2105 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 16px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(246, 199, 93, 0.76) !important;
    background: linear-gradient(180deg, #fffdf8, #f5fff0) !important;
    box-shadow: 0 20px 46px rgba(72, 54, 26, 0.22) !important;
}

#lottery-modal .lottery-result-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(184, 221, 184, 0.9) !important;
    background: #ffffff !important;
    color: var(--q-green-dark) !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(84, 128, 87, 0.12) !important;
}

#lottery-modal .lottery-result-close:hover {
    background: #e8f8dd !important;
    transform: scale(1.04) !important;
}

#lottery-modal #lottery-result[style*="display:none"],
#lottery-modal #lottery-result[style*="display: none"] {
    display: none !important;
}

#lottery-modal #lottery-result::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    background: rgba(84, 67, 41, 0.18) !important;
}

#lottery-modal .lottery-result-head {
    margin: 0 !important;
}

#lottery-modal .lottery-result-list {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 2px 4px 2px 2px !important;
}

#lottery-modal .modal-footer {
    min-height: 46px !important;
}

#lottery-modal #lottery-back-btn {
    position: fixed !important;
    left: 50% !important;
    bottom: max(14px, calc(13vh - 34px)) !important;
    transform: translateX(-50%) !important;
    z-index: 2110 !important;
}

@media (max-width: 620px) {
    #lottery-modal #lottery-result {
        width: min(520px, calc(100vw - 24px)) !important;
        max-height: min(78vh, 600px) !important;
        padding: 13px !important;
    }
}

/* Final player core stat strip: no clipping between ranking, gold, and candy stars. */
#panel-status .player-core-mini-stats {
    grid-template-columns: 36px 54px minmax(78px, 1fr) 52px !important;
    align-items: stretch !important;
    gap: 5px !important;
}

#panel-status .player-core-mini-stats > div,
#panel-status .status-leaderboard-btn {
    min-height: 36px !important;
    height: 36px !important;
    box-sizing: border-box !important;
}

#panel-status .status-leaderboard-btn {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    border: 1px solid rgba(246, 192, 84, 0.86) !important;
    background: linear-gradient(180deg, #fff6cf, #ffe39b) !important;
    color: #9b6814 !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

#panel-status .status-leaderboard-btn i {
    margin: 0 !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
}

#panel-status .status-leaderboard-btn span {
    display: none !important;
}

#panel-status .player-core-mini-stats > div {
    display: grid !important;
    grid-template-rows: 13px minmax(0, 1fr) !important;
    align-content: center !important;
    padding: 4px 6px !important;
}

#panel-status .player-core-mini-stats span {
    font-size: 0.58rem !important;
}

#panel-status .player-core-mini-stats strong {
    margin-top: 1px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
}

#panel-status #player-gold {
    font-size: 0.66rem !important;
}

#panel-status #player-points {
    color: #8a6a16 !important;
}

@media (max-width: 420px) {
    #panel-status .player-core-mini-stats {
        grid-template-columns: 34px 48px minmax(74px, 1fr) 46px !important;
        gap: 4px !important;
    }

    #panel-status .status-leaderboard-btn {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
    }

    #panel-status .player-core-mini-stats > div {
        padding: 4px 5px !important;
    }
}

@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-status .player-core-mini-stats {
        grid-template-columns: 36px 54px minmax(78px, 1fr) 52px !important;
        gap: 5px !important;
        align-items: stretch !important;
    }

    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn i {
        font-size: 0.78rem !important;
    }

    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn span {
        display: none !important;
    }
}

/* Final status header tools restore. */
@media (orientation: landscape) and (min-width: 760px), (min-width: 1024px) {
    body[data-active-panel="combat"] #panel-status > .panel-header {
        grid-template-columns: 30px 34px minmax(86px, 1fr) 94px !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #role-panel-tools {
        width: 94px !important;
        min-width: 94px !important;
        max-width: 94px !important;
        display: grid !important;
        grid-template-columns: repeat(3, 28px) !important;
        gap: 4px !important;
        align-items: center !important;
        justify-content: end !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn,
    body[data-active-panel="combat"] #role-panel-tools .music-control-bar,
    body[data-active-panel="combat"] #role-panel-tools .status-logout-btn,
    body[data-active-panel="combat"] #role-panel-tools .btn-topbar-logout {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #role-panel-tools .btn-music .ui-btn-icon,
    body[data-active-panel="combat"] #role-panel-tools .status-logout-btn .ui-btn-icon,
    body[data-active-panel="combat"] #role-panel-tools .btn-topbar-logout .ui-btn-icon {
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        flex-basis: 18px !important;
        opacity: 1 !important;
    }

    body[data-active-panel="combat"] #role-panel-tools #toggle-music-btn::before,
    body[data-active-panel="combat"] #role-panel-tools #logout-btn-topbar::before {
        content: "" !important;
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        filter: drop-shadow(0 1px 1px rgba(96, 68, 30, 0.22)) !important;
        opacity: 1 !important;
    }

    body[data-active-panel="combat"] #role-panel-tools #toggle-music-btn::before {
        background-image: url("/static/img/ui_button_icons/magic.png") !important;
    }

    body[data-active-panel="combat"] #role-panel-tools #logout-btn-topbar::before {
        background-image: url("/static/img/ui_button_icons/close.png") !important;
    }

    body[data-active-panel="combat"] #role-panel-tools #toggle-music-btn .ui-btn-icon,
    body[data-active-panel="combat"] #role-panel-tools #logout-btn-topbar .ui-btn-icon,
    body[data-active-panel="combat"] #role-panel-tools #toggle-music-btn i,
    body[data-active-panel="combat"] #role-panel-tools #logout-btn-topbar i,
    body[data-active-panel="combat"] #role-panel-tools #toggle-music-btn span,
    body[data-active-panel="combat"] #role-panel-tools #logout-btn-topbar span {
        display: none !important;
    }
}

/* Leaderboard modal and rank-title nameplates. */
#panel-status .player-core-mini-stats {
    grid-template-columns: 82px 54px minmax(78px, 1fr) 52px !important;
}

body[data-active-panel="combat"] #panel-status .player-core-mini-stats {
    grid-template-columns: 82px 54px minmax(78px, 1fr) 52px !important;
}

#panel-status .status-leaderboard-btn,
body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    justify-content: center !important;
    font-size: 0.72rem !important;
}

#panel-status .status-leaderboard-btn span,
body[data-active-panel="combat"] #panel-status .status-leaderboard-btn span {
    display: inline !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

body[data-active-panel="combat"] #panel-status .status-leaderboard-btn i {
    margin: 0 !important;
}

.status-leaderboard-content {
    width: min(560px, calc(100vw - 28px)) !important;
    max-height: min(88vh, 640px) !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
}

.status-leaderboard-content .modal-body {
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 9px !important;
}

.status-leaderboard-note {
    padding: 7px 10px !important;
    border: 1px solid rgba(246, 199, 93, 0.68) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(255, 253, 244, 0.96), rgba(247, 255, 238, 0.9)) !important;
    color: #6f5631 !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
}

.status-leaderboard-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.status-leaderboard-tab {
    min-height: 32px !important;
    border: 1px solid rgba(117, 205, 127, 0.68) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #ffffff, #f3ffe9) !important;
    color: #347d3e !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.status-leaderboard-tab.active {
    border-color: rgba(246, 178, 65, 0.9) !important;
    background: linear-gradient(180deg, #fff3be, #ffe083) !important;
    color: #8a5d11 !important;
}

.status-leaderboard-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    display: grid !important;
    align-content: start !important;
    gap: 7px !important;
    padding-right: 4px !important;
}

.status-leaderboard-row {
    min-height: 47px !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) minmax(82px, auto) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(232, 192, 105, 0.82) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #59452c !important;
    text-align: left !important;
    cursor: pointer !important;
}

.status-rank-no {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #66c96f !important;
    color: #fff !important;
    font-weight: 900 !important;
}

.status-leaderboard-row.is-top-1 .status-rank-no { background: #e6a51d !important; }
.status-leaderboard-row.is-top-2 .status-rank-no { background: #8da0ad !important; }
.status-leaderboard-row.is-top-3 .status-rank-no { background: #c88443 !important; }

.status-rank-main {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.status-rank-name,
.chat-sender-name {
    font-weight: 900 !important;
    color: #4a3828 !important;
}

.status-rank-value {
    justify-self: end !important;
    color: #8a6a16 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    font-size: 0.78rem !important;
}

.chat-title-stack {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    margin-right: 4px !important;
    vertical-align: middle !important;
}

.rank-title-badge {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 20px !important;
    max-width: 150px !important;
    padding: 2px 8px 2px 22px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    color: #583712 !important;
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 2px 5px rgba(88, 62, 24, 0.16) !important;
    background: linear-gradient(135deg, #fff6bd, #ffc462 46%, #fff0aa) !important;
}

.rank-title-badge::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 30%, #ffffff 0 18%, #ffea76 32%, #dc8c1d 72%, #9c5f13 100%) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.55), 0 1px 2px rgba(90, 55, 12, 0.24) !important;
}

.rank-title-top-1 {
    background: linear-gradient(135deg, #fff8c8, #ffc95f 45%, #ffef96) !important;
}

.rank-title-top-2 {
    background: linear-gradient(135deg, #f4fbff, #bfe0ef 44%, #fff8df) !important;
    color: #34546b !important;
}

.rank-title-top-3 {
    background: linear-gradient(135deg, #fff2d6, #e8ad72 45%, #ffe5b0) !important;
    color: #694018 !important;
}

.rank-title-attack {
    background: linear-gradient(135deg, #ffe1df, #ff8e7b 44%, #fff0b0) !important;
}

.rank-title-defense {
    background: linear-gradient(135deg, #e3fff1, #8bdcc0 44%, #f5ffe8) !important;
    color: #255f4b !important;
}

.rank-title-points {
    background: linear-gradient(135deg, #ffe9ff, #d9a3ff 45%, #fff0c8) !important;
    color: #684074 !important;
}

.rank-title-gold,
.rank-title-goldSpent {
    background: linear-gradient(135deg, #fff9c4, #ffd063 45%, #fff0a4) !important;
}

.status-rank-title {
    max-width: 132px !important;
}

@media (max-width: 520px) {
    #panel-status .player-core-mini-stats,
    body[data-active-panel="combat"] #panel-status .player-core-mini-stats {
        grid-template-columns: 74px 48px minmax(74px, 1fr) 46px !important;
    }

    #panel-status .status-leaderboard-btn,
    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
        width: 74px !important;
        min-width: 74px !important;
        max-width: 74px !important;
        padding: 0 5px !important;
    }

    #panel-status .status-leaderboard-btn span,
    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn span {
        font-size: 0.66rem !important;
    }

    .status-leaderboard-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .status-leaderboard-row {
        grid-template-columns: 32px minmax(0, 1fr) !important;
    }

    .status-rank-value {
        grid-column: 2 !important;
        justify-self: start !important;
        font-size: 0.72rem !important;
    }
}

/* EOF leaderboard v2 overrides. */
#panel-status .player-core-card {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 9px !important;
    row-gap: 5px !important;
    align-items: start !important;
}

#panel-status .player-core-avatar-wrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
}

#panel-status .player-core-main {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto 31px !important;
    row-gap: 5px !important;
}

#panel-status .player-core-mini-stats,
body[data-active-panel="combat"] #panel-status .player-core-mini-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#panel-status .status-leaderboard-btn,
body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-self: end !important;
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    min-height: 31px !important;
    height: 31px !important;
    margin-top: 0 !important;
    padding: 0 5px !important;
    border-radius: 8px !important;
    gap: 3px !important;
    font-size: 0.7rem !important;
}

#panel-status .status-leaderboard-btn span,
body[data-active-panel="combat"] #panel-status .status-leaderboard-btn span {
    display: inline !important;
    font-size: 0.66rem !important;
}

#panel-status .player-core-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}

#panel-status .player-core-level,
body[data-active-panel="combat"] #panel-status .player-core-level {
    width: auto !important;
    min-width: 46px !important;
    max-width: 62px !important;
    justify-self: end !important;
    padding: 3px 8px !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.rank-title-badge.image-rank-title {
    width: var(--badge-w, 132px) !important;
    min-width: var(--badge-w, 132px) !important;
    max-width: var(--badge-w, 132px) !important;
    height: var(--badge-h, 38px) !important;
    min-height: var(--badge-h, 38px) !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: var(--badge-bg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    overflow: visible !important;
    color: #5a3816 !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82), 0 0 3px rgba(255, 239, 177, 0.65) !important;
}

.rank-title-badge.image-rank-title::before {
    display: none !important;
}

.rank-title-badge.image-rank-title > span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.player-selected-rank-title {
    --badge-w: 94px !important;
    --badge-h: 28px !important;
    padding: 0 13px !important;
    font-size: 0.54rem !important;
}

.chat-title-stack .image-rank-title {
    --badge-w: 122px !important;
    --badge-h: 32px !important;
    padding: 0 15px !important;
    font-size: 0.58rem !important;
}

.status-rank-title {
    --badge-w: 124px !important;
    --badge-h: 31px !important;
    padding: 0 15px !important;
    font-size: 0.58rem !important;
}

.status-leaderboard-row {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-areas: "rank main" !important;
    gap: 8px !important;
    min-height: 58px !important;
}

.status-rank-no {
    grid-area: rank !important;
    align-self: center !important;
}

.status-rank-main {
    grid-area: main !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "name value"
        "badge badge" !important;
    align-items: center !important;
    gap: 3px 8px !important;
}

.status-rank-name {
    grid-area: name !important;
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.status-rank-value {
    grid-area: value !important;
    justify-self: end !important;
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: right !important;
}

.status-rank-badge {
    grid-area: badge !important;
    display: block !important;
    justify-self: start !important;
    max-width: 100% !important;
    line-height: 0 !important;
    margin-top: 1px !important;
}

.status-leaderboard-modal {
    z-index: 1900 !important;
}

#player-info-modal.active {
    z-index: 2400 !important;
}

#player-info-modal.active .modal-content {
    z-index: 2401 !important;
}

body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn .ui-btn-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    opacity: 1 !important;
}

body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn i,
body[data-active-panel="combat"] #role-panel-tools .effect-toggle-btn span {
    display: none !important;
}

@media (max-width: 420px) {
    #panel-status .player-core-card {
        grid-template-columns: 58px minmax(0, 1fr) !important;
    }

    #panel-status .status-leaderboard-btn,
    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
    }

    #panel-status .player-core-title {
        grid-template-columns: 76px minmax(0, 1fr) auto !important;
    }

    .player-selected-rank-title {
        --badge-w: 76px !important;
        --badge-h: 24px !important;
        font-size: 0.48rem !important;
    }
}
/* EOF actual final mobile/status overrides. */
@media (max-width: 420px) {
    #panel-status .player-core-card,
    body[data-active-panel="combat"] #panel-status .player-core-card {
        grid-template-columns: 64px minmax(0, 1fr) !important;
    }

    #panel-status .status-leaderboard-btn,
    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }

    #panel-status .player-core-title,
    body[data-active-panel="combat"] #panel-status .player-core-title {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
}

/* EOF v5 title badges, effect icon and modal layering. */
#panel-status .player-core-card,
body[data-active-panel="combat"] #panel-status .player-core-card {
    grid-template-columns: 122px minmax(0, 1fr) !important;
}

#panel-status .player-rank-title-choice-wrap,
body[data-active-panel="combat"] #panel-status .player-rank-title-choice-wrap {
    width: 122px !important;
    height: 30px !important;
}

.player-rank-title-choice {
    width: 122px !important;
    min-width: 122px !important;
    max-width: 122px !important;
    height: 30px !important;
    min-height: 30px !important;
}

.player-selected-rank-title {
    --badge-w: 118px !important;
    --badge-h: 30px !important;
    padding: 0 15px !important;
    font-size: 0.55rem !important;
}

.player-rank-title-choice-menu {
    width: 136px !important;
    max-height: 178px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 6px !important;
}

.rank-title-choice-menu-item {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px !important;
    gap: 0 !important;
}

.rank-title-choice-menu-item > span:not(.rank-title-badge) {
    display: none !important;
}

.rank-title-choice-option {
    --badge-w: 124px !important;
    --badge-h: 31px !important;
    padding: 0 15px !important;
    font-size: 0.55rem !important;
}

body[data-active-panel="combat"] #role-panel-tools #effectToggleBtn::before,
#role-panel-tools #effectToggleBtn::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    background-image: url("/static/img/ui_button_icons/magic.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    filter: drop-shadow(0 1px 1px rgba(96, 68, 30, 0.22)) !important;
}

body[data-active-panel="combat"] #role-panel-tools #effectToggleBtn .ui-btn-icon,
body[data-active-panel="combat"] #role-panel-tools #effectToggleBtn i,
body[data-active-panel="combat"] #role-panel-tools #effectToggleBtn span,
#role-panel-tools #effectToggleBtn .ui-btn-icon,
#role-panel-tools #effectToggleBtn i,
#role-panel-tools #effectToggleBtn span {
    display: none !important;
}

.status-rank-main {
    grid-template-columns: minmax(92px, 1fr) auto auto !important;
    grid-template-areas: "name badge value" !important;
    gap: 6px !important;
}

.status-rank-badge {
    align-self: center !important;
    justify-self: start !important;
    margin-top: 0 !important;
}

.status-rank-title {
    --badge-w: 124px !important;
    --badge-h: 31px !important;
}

.status-rank-value {
    max-width: 88px !important;
}

#other-farm-modal.active {
    z-index: 2700 !important;
}

#other-farm-modal.active .modal-content {
    z-index: 2701 !important;
}

body.adventure-popup-open #panel-farm.adventure-popup-panel {
    z-index: 2600 !important;
}

body.adventure-popup-open #adventure-panel-backdrop {
    z-index: 2550 !important;
}

@media (max-width: 420px) {
    #panel-status .player-core-card,
    body[data-active-panel="combat"] #panel-status .player-core-card {
        grid-template-columns: 108px minmax(0, 1fr) !important;
    }

    #panel-status .player-rank-title-choice-wrap,
    body[data-active-panel="combat"] #panel-status .player-rank-title-choice-wrap,
    .player-rank-title-choice {
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
    }

    .player-selected-rank-title {
        --badge-w: 104px !important;
        --badge-h: 28px !important;
        font-size: 0.5rem !important;
    }

    .status-rank-main {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "name value"
            "badge badge" !important;
    }
}

/* EOF v6 fixed leaderboard value columns and full status gold. */
.status-rank-main {
    grid-template-columns: minmax(64px, 1fr) 124px minmax(112px, auto) !important;
    grid-template-areas: "name badge value" !important;
    align-items: center !important;
    gap: 6px !important;
}

.status-rank-badge {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    justify-self: center !important;
}

.status-rank-badge:empty {
    display: block !important;
    visibility: hidden !important;
}

.status-rank-value {
    min-width: 112px !important;
    max-width: none !important;
    justify-self: end !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: right !important;
    font-size: 0.72rem !important;
}

#panel-status .player-core-mini-stats,
body[data-active-panel="combat"] #panel-status .player-core-mini-stats {
    grid-template-columns: 52px minmax(92px, 1fr) 44px !important;
}

#panel-status .player-core-mini-stats > div,
body[data-active-panel="combat"] #panel-status .player-core-mini-stats > div {
    min-width: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

#panel-status .player-core-mini-stats strong,
body[data-active-panel="combat"] #panel-status .player-core-mini-stats strong {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
}

#panel-status .player-core-mini-stats > div:nth-child(2) strong,
body[data-active-panel="combat"] #panel-status .player-core-mini-stats > div:nth-child(2) strong {
    font-size: 0.68rem !important;
}

#panel-status .player-core-card,
body[data-active-panel="combat"] #panel-status .player-core-card {
    grid-template-columns: 112px minmax(0, 1fr) !important;
}

/* EOF v7 fixed rank badge/value columns and full player gold. */
.status-rank-main {
    grid-template-columns: minmax(72px, 1fr) 128px minmax(116px, auto) !important;
    grid-template-areas: "name badge value" !important;
    align-items: center !important;
    gap: 6px !important;
}

.status-rank-badge {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    justify-self: center !important;
    overflow: visible !important;
}

.status-rank-badge:empty {
    display: block !important;
    visibility: hidden !important;
}

.status-rank-title {
    --badge-w: 124px !important;
    --badge-h: 31px !important;
}

.status-rank-value {
    min-width: 116px !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    text-align: right !important;
    justify-self: end !important;
    font-size: 0.72rem !important;
}

#panel-status .player-core-mini-stats,
body[data-active-panel="combat"] #panel-status .player-core-mini-stats {
    grid-template-columns: 52px minmax(100px, 1fr) 42px !important;
}

#panel-status .player-core-mini-stats > div,
body[data-active-panel="combat"] #panel-status .player-core-mini-stats > div {
    min-width: 0 !important;
}

#panel-status .player-core-mini-stats strong,
body[data-active-panel="combat"] #panel-status .player-core-mini-stats strong {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 0.72rem !important;
}

#panel-status .player-core-mini-stats > div:nth-child(2) strong,
body[data-active-panel="combat"] #panel-status .player-core-mini-stats > div:nth-child(2) strong {
    font-size: 0.66rem !important;
}

@media (max-width: 520px) {
    .status-rank-main {
        grid-template-columns: minmax(58px, 1fr) 116px minmax(104px, auto) !important;
        grid-template-areas: "name badge value" !important;
        gap: 4px !important;
    }

    .status-rank-badge {
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
    }

    .status-rank-title {
        --badge-w: 112px !important;
        --badge-h: 29px !important;
        font-size: 0.52rem !important;
    }

    .status-rank-value {
        min-width: 104px !important;
        font-size: 0.68rem !important;
    }
}

/* EOF v11 combat state and side rail polish. */
@media (min-width: 1180px) {
    body[data-active-panel="combat"] #panel-status #player-status-block,
    body[data-active-panel="combat"] #panel-status #hero-status-block,
    body[data-active-panel="combat"] #panel-status .player-status-compact,
    body[data-active-panel="combat"] #panel-status .hero-status-compact,
    body[data-active-panel="combat"] #panel-status .character-stats,
    body[data-active-panel="combat"] #panel-status .player-core-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body[data-active-panel="combat"] #panel-status .stats-grid {
        width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body[data-active-panel="combat"] #panel-status .stats-value {
        min-width: 0 !important;
        font-size: 0.68rem !important;
        letter-spacing: 0 !important;
    }

    body[data-active-panel="combat"] #panel-status #player-attack,
    body[data-active-panel="combat"] #panel-status #hero-attack {
        font-size: 0.62rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs .tab-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        min-width: 0 !important;
        padding: 0 8px !important;
        font-size: 0.76rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    body[data-active-panel="combat"] #sort-inventory-btn {
        flex: 0 0 38px !important;
        margin: auto 0 0 !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 4 !important;
    }

    #player-card .card-avatar img,
    #hero-card .card-avatar img {
        animation: qAvatarIdle 2.4s ease-in-out infinite !important;
        transform-origin: 50% 78% !important;
    }
}

@keyframes qAvatarIdle {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.025); }
}

/* EOF v10 side rail restore: keep chat and inventory sections in normal vertical flow. */
@media (min-width: 1180px) {
    body[data-active-panel="combat"] #panel-status {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    body[data-active-panel="combat"] #panel-status > .panel-header {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body[data-active-panel="combat"] #panel-status > #player-status-block,
    body[data-active-panel="combat"] #panel-status > #hero-status-block {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body[data-active-panel="combat"] #panel-status > #world-chat-dock {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        margin: 0 !important;
    }

    body[data-active-panel="combat"] #world-chat-dock > * {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body[data-active-panel="combat"] #panel-status > .quick-buttons {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 34px 220px 34px minmax(0, 1fr) !important;
        gap: 6px !important;
        padding: 8px !important;
        align-content: stretch !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs {
        grid-row: 1 !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #player-equipment-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #hero-equipment-grid {
        grid-row: 2 !important;
        height: 220px !important;
        grid-auto-rows: 68px !important;
        align-content: start !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot {
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .inventory-tabs {
        grid-row: 3 !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section {
        grid-row: 4 !important;
        min-height: 0 !important;
        justify-content: flex-start !important;
        align-self: stretch !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section > div,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section > div {
        flex: 0 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100% - 44px) !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-auto-rows: 68px !important;
        align-content: start !important;
        padding-bottom: 0 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .inventory-slot {
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
    }

    body[data-active-panel="combat"] #sort-inventory-btn {
        flex: 0 0 38px !important;
        width: 100% !important;
        min-height: 38px !important;
        margin: 8px 0 0 !important;
    }
}

/* EOF v8 desktop shell restore: fluid proportions based on the real browser viewport. */
.storage-capacity-badge {
    position: absolute;
    top: -32px;
    right: -7px;
    z-index: 2;
    min-width: 38px;
    padding: 2px 5px;
    border: 1px solid #8f6a22;
    border-radius: 999px;
    background: #fff8d8;
    color: #77531d;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
    box-shadow: 0 1px 2px rgba(83, 57, 16, 0.24);
    pointer-events: none;
}

#sort-inventory-btn {
    position: relative;
    overflow: visible !important;
}

@media (min-width: 1180px) {
    body[data-active-panel="combat"] .container {
        grid-template-columns:
            clamp(330px, 20.6vw, 390px)
            minmax(0, 1fr)
            clamp(320px, 23.2vw, 440px) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        column-gap: 10px !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 8px 10px !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-status,
    body[data-active-panel="combat"] #panel-combat,
    body[data-active-panel="combat"] #panel-inventory-equip {
        display: grid !important;
        grid-row: 1 !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        position: relative !important;
        top: auto !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-status {
        grid-column: 1 !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
    }

    body[data-active-panel="combat"] #panel-combat {
        grid-column: 2 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip {
        grid-column: 3 !important;
    }

    body[data-active-panel="combat"] #panel-status .player-core-card {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        grid-template-rows: 30px minmax(64px, auto) 31px !important;
        column-gap: 9px !important;
        row-gap: 5px !important;
        align-items: start !important;
    }

    body[data-active-panel="combat"] #panel-status .player-rank-title-choice-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 112px !important;
        height: 30px !important;
        justify-self: center !important;
    }

    body[data-active-panel="combat"] #panel-status .player-core-avatar-wrap {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
        align-self: center !important;
    }

    body[data-active-panel="combat"] #panel-status .status-leaderboard-btn {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 74px !important;
        min-width: 74px !important;
        max-width: 74px !important;
        height: 31px !important;
        min-height: 31px !important;
        justify-self: center !important;
        align-self: end !important;
        margin: 0 !important;
    }

    body[data-active-panel="combat"] #panel-status .player-core-main {
        grid-column: 2 !important;
        grid-row: 1 / span 3 !important;
        grid-template-rows: auto minmax(0, 1fr) 31px !important;
        min-width: 0 !important;
        height: 100% !important;
    }

    body[data-active-panel="combat"] #panel-status .player-core-mini-stats {
        grid-row: 3 !important;
        grid-template-columns: 52px minmax(0, 1fr) 42px !important;
        gap: 5px !important;
        align-self: end !important;
        min-width: 0 !important;
    }
}

#panel-status .player-rank-title-choice-wrap,
body[data-active-panel="combat"] #panel-status .player-rank-title-choice-wrap,
.player-rank-title-choice {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
}

.player-selected-rank-title {
    --badge-w: 110px !important;
    --badge-h: 29px !important;
    font-size: 0.52rem !important;
}

@media (max-width: 520px) {
    .status-rank-main {
        grid-template-columns: minmax(58px, 1fr) 116px minmax(104px, auto) !important;
        grid-template-areas: "name badge value" !important;
        gap: 4px !important;
    }

    .status-rank-badge {
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
    }

    .status-rank-title {
        --badge-w: 116px !important;
        --badge-h: 30px !important;
        font-size: 0.54rem !important;
    }

    .status-rank-value {
        min-width: 104px !important;
        font-size: 0.68rem !important;
    }
}

/* Final v11 priority overrides. */
@media (min-width: 1180px) {
    body[data-active-panel="combat"] #panel-status #player-status-block,
    body[data-active-panel="combat"] #panel-status #hero-status-block,
    body[data-active-panel="combat"] #panel-status .player-status-compact,
    body[data-active-panel="combat"] #panel-status .hero-status-compact,
    body[data-active-panel="combat"] #panel-status .character-stats,
    body[data-active-panel="combat"] #panel-status .player-core-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body[data-active-panel="combat"] #panel-status .stats-grid {
        width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body[data-active-panel="combat"] #panel-status #player-attack,
    body[data-active-panel="combat"] #panel-status #hero-attack {
        font-size: 0.62rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs,
    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs .tab-btn {
        overflow: visible !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs .tab-btn {
        min-width: 0 !important;
        padding: 0 8px !important;
        gap: 6px !important;
        font-size: 0.76rem !important;
        white-space: nowrap !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    body[data-active-panel="combat"] #sort-inventory-btn {
        flex: 0 0 38px !important;
        margin: auto 0 0 !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 4 !important;
    }
}

/* Final v12 status rail width repair. */
@media (min-width: 1180px) {
    body[data-active-panel="combat"] #panel-status .player-status-compact,
    body[data-active-panel="combat"] #panel-status .hero-status-compact {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-content: start !important;
    }

    body[data-active-panel="combat"] #panel-status .player-core-card,
    body[data-active-panel="combat"] #panel-status .status-attribute-grid {
        grid-column: 1 !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    body[data-active-panel="combat"] #panel-status .player-core-card {
        grid-row: 1 !important;
    }

    body[data-active-panel="combat"] #panel-status .status-attribute-grid {
        grid-row: 2 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Final v13 overlay, rail tabs, and item hover detail repair. */
.rank-title-menu-open #panel-status {
    overflow: visible !important;
    z-index: 10000 !important;
}

.rank-title-menu-open #player-status-block,
.rank-title-menu-open #player-status-block .player-status-compact,
.rank-title-menu-open #player-status-block .player-core-card,
.rank-title-menu-open #player-rank-title-choice-wrap {
    overflow: visible !important;
    position: relative !important;
    z-index: 10001 !important;
}

.rank-title-menu-open #player-rank-title-menu {
    z-index: 10003 !important;
}

.item-hover-details {
    position: fixed !important;
    display: none;
    width: 278px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow: auto;
    padding: 11px;
    border: 1px solid #e1b75d;
    border-radius: 7px;
    background: rgba(255, 252, 239, 0.985);
    box-shadow: 0 10px 28px rgba(72, 49, 18, 0.25);
    color: #4d3b27;
    pointer-events: none;
    z-index: 30000 !important;
}

.item-hover-details.active {
    display: block;
}

.item-hover-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(201, 153, 66, 0.55);
}

.item-hover-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
}

.item-hover-icon .item-art-icon,
.item-hover-icon img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain;
}

.item-hover-head strong,
.item-hover-head span {
    display: block;
    min-width: 0;
}

.item-hover-head strong {
    font-size: 0.88rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.item-hover-head span {
    margin-top: 3px;
    color: #92754e;
    font-size: 0.68rem;
}

.item-hover-rows {
    display: grid;
    gap: 4px;
    padding-top: 8px;
}

.item-hover-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    font-size: 0.72rem;
    line-height: 1.35;
}

.item-hover-row > span {
    color: #91724a;
}

.item-hover-row > strong {
    min-width: 0;
    color: #4d3b27;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.item-hover-row.is-refine > strong {
    color: #2e8b57;
}

.item-hover-row.is-note > strong {
    color: #9a5b18;
}

@media (min-width: 1180px) {
    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs,
    body[data-active-panel="combat"] #panel-inventory-equip > .inventory-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        gap: 6px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs .tab-btn,
    body[data-active-panel="combat"] #panel-inventory-equip > .inventory-tabs .tab-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs .ui-btn-icon,
    body[data-active-panel="combat"] #panel-inventory-equip > .inventory-tabs .ui-btn-icon {
        width: 17px !important;
        min-width: 17px !important;
        height: 17px !important;
        min-height: 17px !important;
        flex: 0 0 17px !important;
        margin: 0 !important;
        vertical-align: 0 !important;
    }
}

/* Keep the complete rebirth description readable after compact desktop rules. */
body[data-active-panel="combat"] #panel-status .status-attribute-grid .rebirth-bonus-row {
    grid-column: 1 / -1 !important;
    min-height: 52px !important;
}

body[data-active-panel="combat"] #panel-status .status-attribute-grid .rebirth-bonus-row .stats-value {
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: keep-all !important;
    line-height: 1.3 !important;
}

@media (orientation: landscape) and (max-width: 1500px) {
    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-item {
        padding: 0 3px !important;
        gap: 2px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-item i {
        width: 11px !important;
        min-width: 11px !important;
        flex-basis: 11px !important;
        font-size: 0.68rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-label,
    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-value {
        font-size: 0.58rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-label {
        flex: 1 1 auto !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-status-bar .status-value {
        flex: 0 0 auto !important;
    }
}

/* Hero core card follows the player card's title/avatar/meter alignment. */
#panel-status .hero-status-compact > .hero-core-card,
body[data-active-panel="combat"] #panel-status .hero-status-compact > .hero-core-card {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: start !important;
}

#panel-status .hero-core-card > .player-core-avatar-wrap,
body[data-active-panel="combat"] #panel-status .hero-core-card > .player-core-avatar-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: center !important;
    margin-top: 40px !important;
}

#panel-status .hero-core-card > .player-core-main,
body[data-active-panel="combat"] #panel-status .hero-core-card > .player-core-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-template-rows: auto auto !important;
    align-self: start !important;
}

#panel-status .hero-core-card .hp-bar,
#panel-status .hero-core-card .mp-bar,
#panel-status .hero-core-card .exp-bar,
body[data-active-panel="combat"] #panel-status .hero-core-card .hp-bar,
body[data-active-panel="combat"] #panel-status .hero-core-card .mp-bar,
body[data-active-panel="combat"] #panel-status .hero-core-card .exp-bar {
    width: 100% !important;
    height: 8px !important;
    min-height: 8px !important;
    margin: -1px 0 1px !important;
    border-radius: 999px !important;
}

#panel-status .hero-core-card .player-core-meters .meter-row,
#panel-status .hero-core-card .player-core-meters .hp-bar,
#panel-status .hero-core-card .player-core-meters .mp-bar,
#panel-status .hero-core-card .player-core-meters .exp-bar,
body[data-active-panel="combat"] #panel-status .hero-core-card .player-core-meters .meter-row,
body[data-active-panel="combat"] #panel-status .hero-core-card .player-core-meters .hp-bar,
body[data-active-panel="combat"] #panel-status .hero-core-card .player-core-meters .mp-bar,
body[data-active-panel="combat"] #panel-status .hero-core-card .player-core-meters .exp-bar {
    grid-column: 1 / -1 !important;
}

@media (max-width: 420px) {
    #panel-status .hero-status-compact > .hero-core-card,
    body[data-active-panel="combat"] #panel-status .hero-status-compact > .hero-core-card {
        grid-template-columns: 58px minmax(0, 1fr) !important;
    }

    #panel-status .hero-core-card > .player-core-avatar-wrap,
    body[data-active-panel="combat"] #panel-status .hero-core-card > .player-core-avatar-wrap {
        margin-top: 36px !important;
    }
}

/* Final compact rail fixes: readable boss strip, slots, inventory flow and quality colors. */
@media (min-width: 760px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-action-spacer {
        grid-column: 2 / 3 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        grid-column: 3 / 7 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        grid-template-columns: max-content max-content max-content !important;
        justify-content: start !important;
        column-gap: 6px !important;
        padding-left: 7px !important;
        padding-right: 5px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-countdown {
        width: auto !important;
        max-width: none !important;
        justify-self: stretch !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 0.62rem !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions button {
        min-width: 66px !important;
        max-width: 112px !important;
        padding: 0 7px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-bottom-entry:not(.has-boss) .boss-go-btn {
        display: inline-flex !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .boss-entry-label {
        line-height: 1.2 !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-register-btn {
        min-width: 100px !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-go-btn {
        min-width: 106px !important;
    }
}

@media (min-width: 1180px) {
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot {
        display: grid !important;
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        grid-template-rows: 27px 17px 12px !important;
        gap: 1px !important;
        padding: 4px 4px 3px !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .equipment-icon-wrap,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .equipment-icon-wrap .item-art-icon,
    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot > i {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
        line-height: 26px !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .equipment-name {
        min-height: 17px !important;
        height: 17px !important;
        max-height: 17px !important;
        line-height: 17px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.58rem !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip .equipment-slot .equipment-type {
        min-height: 12px !important;
        height: 12px !important;
        line-height: 12px !important;
        overflow: visible !important;
        font-size: 0.54rem !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section {
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section > div,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section > div {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid {
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: stretch !important;
        align-content: start !important;
        overflow-y: auto !important;
        padding-bottom: 0 !important;
    }

    body[data-active-panel="combat"] #sort-inventory-btn {
        position: static !important;
        flex: 0 0 38px !important;
        margin: 8px 0 0 !important;
    }

    html body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-section,
    html body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-section {
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        align-self: stretch !important;
    }

    html body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-section > div,
    html body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-section > div {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    html body[data-active-panel="combat"] #panel-inventory-equip.active #inventory-grid,
    html body[data-active-panel="combat"] #panel-inventory-equip.active #warehouse-grid {
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 0 !important;
        align-self: stretch !important;
        align-content: start !important;
        overflow-y: auto !important;
    }
}

body[data-active-panel="combat"] #panel-inventory-equip .item-quality-slot {
    border-color: var(--item-quality-color, #d8bd7a) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.72),
        0 4px 12px color-mix(in srgb, var(--item-quality-color, #d8bd7a) 22%, transparent) !important;
}

html body[data-active-panel="combat"] #panel-inventory-equip #inventory-grid .inventory-slot.item-quality-slot,
html body[data-active-panel="combat"] #panel-inventory-equip #warehouse-grid .inventory-slot.item-quality-slot,
html body[data-active-panel="combat"] #panel-inventory-equip .equipment-grid .equipment-slot.item-quality-slot {
    border-color: var(--item-quality-color, #d8bd7a) !important;
}

body[data-active-panel="combat"] #panel-inventory-equip .item-quality-slot::before {
    display: block !important;
    content: "" !important;
    height: 3px !important;
    background: var(--item-quality-color, #d8bd7a) !important;
}

body[data-active-panel="combat"] #panel-inventory-equip .item-quality-badge {
    display: inline-flex !important;
    top: 3px !important;
    right: 3px !important;
    left: auto !important;
    min-width: 14px !important;
    height: 14px !important;
    padding: 0 3px !important;
    background: var(--item-quality-color, #d8bd7a) !important;
    color: #fffaf1 !important;
    font-size: 0.48rem !important;
}

body[data-active-panel="combat"] #panel-inventory-equip .item-quality-normal .item-quality-badge {
    color: #7c6a41 !important;
    background: #fff1ca !important;
}

#panel-skills .skill-tabs .tab-btn {
    min-height: 36px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Final desktop rail fixes: viewport toast, adjacent boss bar and non-overlapping equipment tabs. */
html body #legacy-equipment-tooltip {
    position: fixed !important;
    top: 16px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50vw !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
}

@media (min-width: 1180px) {
    body[data-active-panel="combat"] #panel-combat .combat-scene-action-spacer {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry {
        grid-column: 2 / 7 !important;
        justify-self: start !important;
        width: fit-content !important;
        max-width: 100% !important;
    }

    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry #world-boss-entry,
    body[data-active-panel="combat"] #panel-combat .combat-scene-boss-entry .world-boss-location {
        width: fit-content !important;
        max-width: 100% !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip {
        grid-template-rows: 34px 220px auto 34px minmax(0, 1fr) !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs,
    body[data-active-panel="combat"] #panel-inventory-equip > .inventory-tabs {
        box-sizing: border-box !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs .tab-btn,
    body[data-active-panel="combat"] #panel-inventory-equip > .inventory-tabs .tab-btn {
        position: relative !important;
        inset: auto !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 34px !important;
        margin: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .equipment-tabs .tab-btn.active,
    body[data-active-panel="combat"] #panel-inventory-equip > .inventory-tabs .tab-btn.active {
        z-index: 1 !important;
        transform: none !important;
    }

    html body[data-active-panel="combat"] #panel-inventory-equip #player-equipment-grid[style*="display: none"],
    html body[data-active-panel="combat"] #panel-inventory-equip #player-equipment-grid[style*="display:none"],
    html body[data-active-panel="combat"] #panel-inventory-equip #hero-equipment-grid[style*="display: none"],
    html body[data-active-panel="combat"] #panel-inventory-equip #hero-equipment-grid[style*="display:none"] {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #player-set-bonuses,
    body[data-active-panel="combat"] #panel-inventory-equip #hero-set-bonuses {
        grid-row: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: 116px !important;
        margin: 0 !important;
        padding: 2px 4px !important;
        overflow: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.equip-tab-player #player-set-bonuses:not(.is-empty),
    body[data-active-panel="combat"] #panel-inventory-equip.equip-tab-hero #hero-set-bonuses:not(.is-empty) {
        display: block !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip.equip-tab-player #hero-set-bonuses,
    body[data-active-panel="combat"] #panel-inventory-equip.equip-tab-hero #player-set-bonuses,
    body[data-active-panel="combat"] #panel-inventory-equip #player-set-bonuses.is-empty,
    body[data-active-panel="combat"] #panel-inventory-equip #hero-set-bonuses.is-empty {
        display: none !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip > .inventory-tabs {
        grid-row: 4 !important;
    }

    body[data-active-panel="combat"] #panel-inventory-equip #inventory-section,
    body[data-active-panel="combat"] #panel-inventory-equip #warehouse-section {
        grid-row: 5 !important;
    }

    /* Earlier desktop rules hid both set panels with a more specific
       display:none!important selector. Keep only the inactive tab hidden. */
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active.equip-tab-player #player-set-bonuses,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active.equip-tab-hero #hero-set-bonuses {
        display: block !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active.equip-tab-player #hero-set-bonuses,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active.equip-tab-hero #player-set-bonuses {
        display: none !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-bonuses-empty {
        display: block !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 3px 4px 5px !important;
        color: var(--q-muted) !important;
        font-size: 0.72rem !important;
        font-style: normal !important;
        text-align: center !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .has-no-relevant-set {
        max-height: 50px !important;
        overflow: hidden !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .has-no-relevant-set .set-bonuses-header {
        margin-bottom: 0 !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .has-no-relevant-set .set-bonuses-title {
        margin-bottom: 0 !important;
        font-size: 0.82rem !important;
        line-height: 20px !important;
        letter-spacing: 1px !important;
    }

    /* Compact set summary: keep it visible without dominating the bag panel. */
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #player-set-bonuses,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #hero-set-bonuses {
        max-height: 76px !important;
        padding: 0 4px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-bonuses-header {
        min-height: 22px !important;
        margin: 0 !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-bonuses-title {
        font-size: 0.78rem !important;
        line-height: 20px !important;
        letter-spacing: 1px !important;
        text-shadow: none !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-bonuses-title i {
        margin: 0 3px !important;
        font-size: 0.72rem !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-bonuses-list {
        gap: 4px !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-card {
        padding: 5px 7px !important;
        border-radius: 7px !important;
        background: linear-gradient(180deg, rgba(255, 255, 248, 0.9), rgba(241, 249, 231, 0.88)) !important;
        border: 1px solid rgba(220, 177, 92, 0.62) !important;
        box-shadow: 0 1px 3px rgba(77, 101, 73, 0.12) !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-header {
        margin: 0 0 2px !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-name {
        font-size: 0.76rem !important;
        color: #8a5b16 !important;
        text-shadow: none !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-progress {
        padding: 1px 6px !important;
        font-size: 0.64rem !important;
        background: rgba(178, 132, 47, 0.14) !important;
        color: #79551b !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-progress-bar-container {
        height: 4px !important;
        margin: 3px 0 4px !important;
        background: rgba(193, 163, 100, 0.22) !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-progress-bar-fill {
        background: linear-gradient(90deg, #e2a53a, #f4ca64) !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-tiers {
        gap: 3px !important;
        margin-top: 2px !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .set-tier {
        padding: 3px 6px !important;
        border-left-width: 2px !important;
        border-radius: 4px !important;
        background: rgba(255, 255, 255, 0.48) !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .tier-name {
        margin-bottom: 2px !important;
        font-size: 0.66rem !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .tier-bonus {
        gap: 3px !important;
        font-size: 0.62rem !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .tier-bonus span {
        padding: 1px 4px !important;
        background: rgba(72, 115, 75, 0.1) !important;
        color: #3f6544 !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active {
        grid-template-rows: 0 34px auto auto 34px minmax(0, 1fr) !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .equipment-tabs {
        grid-row: 2 !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #player-equipment-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #hero-equipment-grid {
        grid-row: 3 !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #player-set-bonuses,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #hero-set-bonuses {
        grid-row: 4 !important;
        align-self: start !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .inventory-tabs {
        grid-row: 5 !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #inventory-section,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #warehouse-section {
        grid-row: 6 !important;
    }
}

/* Equipment tabs also act as the compact set-effect view switch. The two
   views share the original equipment row so the slot icons stay centered. */
@media (min-width: 1180px) {
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active {
        grid-template-rows: 0 34px 220px 34px minmax(0, 1fr) !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .panel-header {
        display: none !important;
        grid-row: 1 !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .equipment-tabs {
        grid-row: 2 !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .equipment-tabs .tab-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 0 7px !important;
        font-size: 0.74rem !important;
        line-height: 1 !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-tab-toggle {
        display: inline-flex !important;
        align-items: center !important;
        height: 18px !important;
        padding: 0 4px !important;
        border-left: 1px solid rgba(75, 145, 80, 0.28) !important;
        color: rgba(49, 112, 61, 0.78) !important;
        font-size: 0.56rem !important;
        font-weight: 700 !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .tab-btn.active .equipment-tab-toggle {
        color: #2f8c4d !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .tab-btn.active.show-set-view .equipment-tab-toggle {
        color: #9b6a16 !important;
        border-left-color: rgba(180, 133, 45, 0.42) !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #player-equipment-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #hero-equipment-grid {
        grid-row: 3 !important;
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-rows: 68px !important;
        align-content: center !important;
        justify-content: stretch !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-slot {
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        align-items: center !important;
        justify-items: center !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-slot .equipment-icon-wrap,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-slot .item-art-icon,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-slot > i {
        align-self: center !important;
        justify-self: center !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #player-set-bonuses,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #hero-set-bonuses {
        grid-row: 3 !important;
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
        align-self: stretch !important;
        padding: 2px 4px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active.equip-tab-player:not(.equip-view-set) #player-set-bonuses,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active.equip-tab-hero:not(.equip-view-set) #hero-set-bonuses,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active.equip-tab-player.equip-view-set #player-equipment-grid,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active.equip-tab-hero.equip-view-set #hero-equipment-grid {
        display: none !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active.equip-tab-player.equip-view-set #player-set-bonuses,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active.equip-tab-hero.equip-view-set #hero-set-bonuses {
        display: block !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .inventory-tabs {
        grid-row: 4 !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #inventory-section,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active #warehouse-section {
        grid-row: 5 !important;
    }
}

@media (min-width: 1180px) {
    /* Balance the three content rows inside each 68px equipment slot. */
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-slot {
        grid-template-rows: 32px 14px 10px !important;
        gap: 1px !important;
        padding: 5px 4px !important;
        align-content: center !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-slot .equipment-icon-wrap,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-slot .item-art-icon,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-slot > i {
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: center !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-slot .equipment-name {
        grid-row: 2 !important;
        height: 14px !important;
        min-height: 14px !important;
        max-height: 14px !important;
        line-height: 14px !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-slot .equipment-type {
        grid-row: 3 !important;
        height: 10px !important;
        min-height: 10px !important;
        max-height: 10px !important;
        line-height: 10px !important;
    }

    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-slot .equipment-icon-wrap,
    html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active .equipment-slot > i {
        transform: translateY(4px) !important;
    }
}

#adventure-feature-dock .adventure-feature-btn{border:0!important;background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:100% 100%!important;box-shadow:none!important;padding-left:36px!important;color:#476738!important;text-shadow:0 1px 0 rgba(255,255,255,.9)!important;overflow:visible!important}
#adventure-feature-dock .adventure-feature-btn .ui-btn-icon{display:none!important}

/* Keep the generated full-button artwork above all legacy capsule rules. */
:is(.inventory-bottom-toolbar .btn, #panel-inventory-equip > .equipment-tabs .tab-btn, #panel-inventory-equip > .inventory-tabs .tab-btn) {
    min-height:34px!important;border:0!important;border-radius:999px!important;background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:100% 100%!important;box-shadow:none!important;color:#476738!important;font-weight:800!important;text-shadow:0 1px 0 rgba(255,255,255,.9)!important;padding:0 12px 0 42px!important;overflow:visible!important
}
:is(.inventory-bottom-toolbar .btn, #panel-inventory-equip > .equipment-tabs .tab-btn, #panel-inventory-equip > .inventory-tabs .tab-btn) :is(i,.ui-btn-icon){display:none!important}
#panel-inventory-equip > :is(.equipment-tabs,.inventory-tabs) .tab-btn.active{color:#fff9d7!important;text-shadow:0 1px 2px rgba(34,94,48,.86)!important;filter:saturate(1.35) brightness(.9)!important}
#zodiac-btn{background-image:url('../images/q_capsule_buttons/zodiac.png')!important}#quick-equipment-index-btn{background-image:url('../images/q_capsule_buttons/equipment_house.png')!important}#strength-merchant-btn{background-image:url('../images/q_capsule_buttons/blacksmith.png')!important}#decompose-btn{background-image:url('../images/q_capsule_buttons/recycle.png')!important}#pharmacy-btn{background-image:url('../images/q_capsule_buttons/pharmacy.png')!important}#auction-house-btn{background-image:url('../images/q_capsule_buttons/item_sale.png')!important}#refine-btn{background-image:url('../images/q_capsule_buttons/magic_workshop.png')!important}#rebirth-btn{background-image:url('../images/q_capsule_buttons/advance.png')!important}#lottery-btn{background-image:url('../images/q_capsule_buttons/lottery.png')!important}#task-btn{background-image:url('../images/q_capsule_buttons/daily_task.png')!important}#world-boss-shortcut-btn{background-image:url('../images/q_capsule_buttons/blacksmith.png')!important}#adventure-farm-btn{background-image:url('../images/q_capsule_buttons/farm.png')!important}#adventure-arena-btn{background-image:url('../images/q_capsule_buttons/partner_equipment.png')!important}#adventure-skills-btn{background-image:url('../images/q_capsule_buttons/spell.png')!important}#craft-btn-toolbar{background-image:url('../images/q_capsule_buttons/craft.png')!important}#repair-all-btn{background-image:url('../images/q_capsule_buttons/repair.png')!important}#sell-all-equip-btn{background-image:url('../images/q_capsule_buttons/equipment_sale.png')!important}#sell-all-items-btn{background-image:url('../images/q_capsule_buttons/item_sale.png')!important}#auto-sell-btn{background-image:url('../images/q_capsule_buttons/auto_sale.png')!important}#tab-player-equip{background-image:url('../images/q_capsule_buttons/player_equipment.png')!important}#tab-hero-equip{background-image:url('../images/q_capsule_buttons/partner_equipment.png')!important}#tab-inventory{background-image:url('../images/q_capsule_buttons/backpack.png')!important}#tab-warehouse{background-image:url('../images/q_capsule_buttons/warehouse.png')!important}

/* v2 wins: simple frame and one clean generated pictogram per button. */
#adventure-feature-dock .adventure-feature-btn,#panel-inventory-equip>.equipment-tabs .tab-btn,#panel-inventory-equip>.inventory-tabs .tab-btn{--q-icon-x:0%;--q-icon-y:0%;background:linear-gradient(180deg,#fffef2 0%,#f1f8e9 58%,#e4f2dc 100%)!important;border:1px solid #91c987!important;border-radius:999px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(65,115,61,.16)!important;color:#396844!important;text-shadow:0 1px 0 #fff!important;overflow:hidden!important;filter:none!important;transform:none!important}#adventure-feature-dock .adventure-feature-btn{min-height:28px!important;padding:0 8px 0 31px!important;font-size:.72rem!important}#panel-inventory-equip>.equipment-tabs .tab-btn,#panel-inventory-equip>.inventory-tabs .tab-btn{min-height:34px!important;padding:0 12px 0 38px!important}#adventure-feature-dock .adventure-feature-btn::before,#panel-inventory-equip>.equipment-tabs .tab-btn::before,#panel-inventory-equip>.inventory-tabs .tab-btn::before{content:'';position:absolute;left:8px;top:50%;width:20px;height:20px;transform:translateY(-50%);background-image:url('../images/q_button_icons_v2/icon_sheet.png');background-repeat:no-repeat;background-size:500% 400%;background-position:var(--q-icon-x) var(--q-icon-y);pointer-events:none}#panel-inventory-equip>.equipment-tabs .tab-btn::before,#panel-inventory-equip>.inventory-tabs .tab-btn::before{left:11px;width:23px;height:23px}#adventure-feature-dock .ui-btn-icon,#panel-inventory-equip>.equipment-tabs .ui-btn-icon,#panel-inventory-equip>.inventory-tabs .ui-btn-icon{display:none!important}#panel-inventory-equip>:is(.equipment-tabs,.inventory-tabs) .tab-btn.active{background:linear-gradient(180deg,#70c971 0%,#41ad59 100%)!important;border-color:#2f9650!important;color:#fff!important;text-shadow:0 1px 1px rgba(29,99,48,.7)!important;filter:none!important}#zodiac-btn{--q-icon-x:0%;--q-icon-y:0%}#quick-equipment-index-btn{--q-icon-x:25%;--q-icon-y:0%}#strength-merchant-btn{--q-icon-x:50%;--q-icon-y:0%}#decompose-btn{--q-icon-x:75%;--q-icon-y:0%}#pharmacy-btn{--q-icon-x:100%;--q-icon-y:0%}#refine-btn{--q-icon-x:0%;--q-icon-y:33.333%}#rebirth-btn{--q-icon-x:25%;--q-icon-y:33.333%}#lottery-btn{--q-icon-x:50%;--q-icon-y:33.333%}#task-btn{--q-icon-x:75%;--q-icon-y:33.333%}#world-boss-shortcut-btn{--q-icon-x:50%;--q-icon-y:33.333%}#adventure-farm-btn{--q-icon-x:100%;--q-icon-y:33.333%}#adventure-arena-btn{--q-icon-x:25%;--q-icon-y:100%}#adventure-skills-btn{--q-icon-x:0%;--q-icon-y:66.666%}#craft-btn-toolbar{--q-icon-x:25%;--q-icon-y:66.666%}#repair-all-btn{--q-icon-x:50%;--q-icon-y:66.666%}#sell-all-equip-btn{--q-icon-x:75%;--q-icon-y:66.666%}#sell-all-items-btn,#auction-house-btn{--q-icon-x:100%;--q-icon-y:66.666%}#auto-sell-btn{--q-icon-x:0%;--q-icon-y:100%}#tab-player-equip{--q-icon-x:25%;--q-icon-y:100%}#tab-hero-equip{--q-icon-x:50%;--q-icon-y:100%}#tab-inventory{--q-icon-x:75%;--q-icon-y:100%}#tab-warehouse{--q-icon-x:100%;--q-icon-y:100%}

/* Final override: use widened HD derivatives from q_capsule_buttons without stretching the original art. */
#adventure-feature-dock .adventure-feature-btn,
#panel-inventory-equip > .equipment-tabs .tab-btn,
#panel-inventory-equip > .inventory-tabs .tab-btn {
    background: transparent none center / 100% 100% no-repeat !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: #346b37 !important;
    filter: none !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
    position: relative !important;
    text-shadow: 0 1px 0 rgba(255,255,225,.96), 0 1px 2px rgba(37,92,36,.38) !important;
    transform: none !important;
}
#adventure-feature-dock .adventure-feature-btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px 0 47px !important;
}
#panel-inventory-equip > .equipment-tabs .tab-btn,
#panel-inventory-equip > .inventory-tabs .tab-btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 14px 0 61px !important;
}
#adventure-feature-dock .adventure-feature-btn::before,
#panel-inventory-equip > .equipment-tabs .tab-btn::before,
#panel-inventory-equip > .inventory-tabs .tab-btn::before {
    content: none !important;
    display: none !important;
}
#adventure-feature-dock .ui-btn-icon,
#panel-inventory-equip > .equipment-tabs .ui-btn-icon,
#panel-inventory-equip > .inventory-tabs .ui-btn-icon {
    display: none !important;
}
#panel-inventory-equip > :is(.equipment-tabs,.inventory-tabs) .tab-btn.active {
    color: #fff8c8 !important;
    filter: brightness(.9) saturate(1.18) !important;
    text-shadow: 0 1px 2px rgba(33,91,38,.88), 0 0 4px rgba(255,242,145,.36) !important;
}
#adventure-feature-dock .adventure-feature-btn:hover,
#panel-inventory-equip > .equipment-tabs .tab-btn:hover,
#panel-inventory-equip > .inventory-tabs .tab-btn:hover {
    filter: brightness(1.04) saturate(1.06) !important;
}
#zodiac-btn{background-image:url('../images/q_capsule_buttons/hd/zodiac.png')!important}
#quick-equipment-index-btn{background-image:url('../images/q_capsule_buttons/hd/equipment_house.png')!important}
#strength-merchant-btn{background-image:url('../images/q_capsule_buttons/hd/blacksmith.png')!important}
#decompose-btn{background-image:url('../images/q_capsule_buttons/hd/recycle.png')!important}
#pharmacy-btn{background-image:url('../images/q_capsule_buttons/hd/pharmacy.png')!important}
#auction-house-btn{background-image:url('../images/q_capsule_buttons/hd/item_sale.png')!important}
#refine-btn{background-image:url('../images/q_capsule_buttons/hd/magic_workshop.png')!important}
#rebirth-btn{background-image:url('../images/q_capsule_buttons/hd/advance.png')!important}
#lottery-btn{background-image:url('../images/q_capsule_buttons/hd/lottery.png')!important}
#task-btn{background-image:url('../images/q_capsule_buttons/hd/daily_task.png')!important}
#world-boss-shortcut-btn{background-image:url('../images/q_capsule_buttons/hd/blacksmith.png')!important}
#adventure-farm-btn{background-image:url('../images/q_capsule_buttons/hd/farm.png')!important}
#adventure-arena-btn{background-image:url('../images/q_capsule_buttons/hd/partner_equipment.png')!important}
#adventure-skills-btn{background-image:url('../images/q_capsule_buttons/hd/spell.png')!important}
#craft-btn-toolbar{background-image:url('../images/q_capsule_buttons/hd/craft.png')!important}
#repair-all-btn{background-image:url('../images/q_capsule_buttons/hd/repair.png')!important}
#sell-all-equip-btn{background-image:url('../images/q_capsule_buttons/hd/equipment_sale.png')!important}
#sell-all-items-btn{background-image:url('../images/q_capsule_buttons/hd/item_sale.png')!important}
#auto-sell-btn{background-image:url('../images/q_capsule_buttons/hd/auto_sale.png')!important}
#tab-player-equip{background-image:url('../images/q_capsule_buttons/hd/player_equipment.png')!important}
#tab-hero-equip{background-image:url('../images/q_capsule_buttons/hd/partner_equipment.png')!important}
#tab-inventory{background-image:url('../images/q_capsule_buttons/hd/backpack.png')!important}
#tab-warehouse{background-image:url('../images/q_capsule_buttons/hd/warehouse.png')!important}

/* Absolute last pass: match the real combat viewport ratios so q_capsule_buttons never get squeezed. */
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock .adventure-feature-btn {
    background: transparent none center / 100% 100% no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #346b37 !important;
    filter: none !important;
    font-weight: 900 !important;
    height: 32px !important;
    letter-spacing: 0 !important;
    min-height: 32px !important;
    padding: 0 6px 0 44px !important;
    text-shadow: 0 1px 0 rgba(255,255,225,.98), 0 1px 2px rgba(37,92,36,.42) !important;
    transform: none !important;
}
html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .equipment-tabs .tab-btn,
html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .inventory-tabs .tab-btn {
    background: transparent none center / 100% 100% no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #346b37 !important;
    filter: none !important;
    font-weight: 900 !important;
    height: 38px !important;
    letter-spacing: 0 !important;
    min-height: 38px !important;
    padding: 0 8px 0 56px !important;
    text-shadow: 0 1px 0 rgba(255,255,225,.98), 0 1px 2px rgba(37,92,36,.42) !important;
    transform: none !important;
}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock .adventure-feature-btn::before,
html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .equipment-tabs .tab-btn::before,
html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .inventory-tabs .tab-btn::before {
    content: none !important;
    display: none !important;
}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock .adventure-feature-btn .ui-btn-icon,
html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .equipment-tabs .tab-btn .ui-btn-icon,
html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .inventory-tabs .tab-btn .ui-btn-icon {
    display: none !important;
}
html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > :is(.equipment-tabs,.inventory-tabs) .tab-btn.active {
    color: #fff8c8 !important;
    filter: brightness(.9) saturate(1.16) !important;
    text-shadow: 0 1px 2px rgba(33,91,38,.9), 0 0 4px rgba(255,242,145,.36) !important;
}
html body[data-active-panel="combat"] #panel-combat #zodiac-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/zodiac.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #quick-equipment-index-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/equipment_house.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #strength-merchant-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/blacksmith.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #decompose-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/recycle.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #pharmacy-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/pharmacy.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #auction-house-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/item_sale.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #refine-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/magic_workshop.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #rebirth-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/advance.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #lottery-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/lottery.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #task-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/daily_task.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #world-boss-shortcut-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/blacksmith.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-farm-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/farm.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-arena-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/partner_equipment.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-skills-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/spell.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #craft-btn-toolbar{background:transparent url('../images/q_capsule_buttons/hd/feature/craft.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #repair-all-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/repair.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #sell-all-equip-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/equipment_sale.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #sell-all-items-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/item_sale.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #auto-sell-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/auto_sale.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-inventory-equip #tab-player-equip{background:transparent url('../images/q_capsule_buttons/hd/tabs/player_equipment.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-inventory-equip #tab-hero-equip{background:transparent url('../images/q_capsule_buttons/hd/tabs/partner_equipment.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-inventory-equip #tab-inventory{background:transparent url('../images/q_capsule_buttons/hd/tabs/backpack.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-inventory-equip #tab-warehouse{background:transparent url('../images/q_capsule_buttons/hd/tabs/warehouse.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #zodiac-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/zodiac.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #quick-equipment-index-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/equipment_house.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #strength-merchant-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/blacksmith.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #decompose-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/recycle.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #pharmacy-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/pharmacy.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #auction-house-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/item_sale.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #refine-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/magic_workshop.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #rebirth-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/advance.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #lottery-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/lottery.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #task-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/daily_task.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #world-boss-shortcut-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/blacksmith.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #adventure-farm-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/farm.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #adventure-arena-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/partner_equipment.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #adventure-skills-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/spell.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #craft-btn-toolbar.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/craft.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #repair-all-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/repair.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #sell-all-equip-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/equipment_sale.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #sell-all-items-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/item_sale.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #auto-sell-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/auto_sale.png') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active {
    grid-template-rows: 0 38px 220px 38px minmax(0, 1fr) !important;
}
html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .equipment-tabs,
html body[data-active-panel="combat"] div#panel-inventory-equip.panel.mobile-panel.active > .inventory-tabs {
    height: 38px !important;
    min-height: 38px !important;
}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #auto-sell-btn.adventure-feature-btn {
    padding-left: 48px !important;
}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #zodiac-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/zodiac.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #quick-equipment-index-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/equipment_house.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #strength-merchant-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/blacksmith.png?v=clean2') center/100% 100% no-repeat!important}

/* Keep the generated smithy skin above later global .active button shorthands. */
#strength-merchant-modal .strength-tabs .tab-btn,
#strength-merchant-modal .strength-tabs .tab-btn.active {
    background: transparent url('../images/generated/smithy_capsule.png') center/100% 100% no-repeat !important;
}

#strength-merchant-modal .strength-equip-btn,
#strength-merchant-modal .strength-zodiac-btn {
    background: transparent url('../images/generated/smithy_polish_btn_v2.png') center/100% 100% no-repeat !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    justify-self: end !important;
}

#strength-merchant-modal .strength-equip-card,
#strength-merchant-modal .strength-zodiac-card {
    grid-template-columns: 52px minmax(0, 1fr) 64px !important;
    column-gap: 7px !important;
    cursor: default !important;
}

#strength-merchant-modal .strength-equip-card .equip-info strong,
#strength-merchant-modal .strength-zodiac-card .zodiac-info strong {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    line-height: 1.15 !important;
    font-size: 0.82rem !important;
}

#strength-merchant-modal .strength-tabs .tab-btn.active {
    filter: saturate(1.45) brightness(.82) hue-rotate(8deg) !important;
}

#pharmacy-modal .buy-potion-btn {
    width: calc(100% + 16px) !important;
    min-width: calc(100% + 16px) !important;
    min-height: 42px !important;
    margin: 8px -8px 0 !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent url('../images/generated/smithy_polish_btn.png') center/100% 100% no-repeat !important;
    color: #356540 !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    line-height: 42px !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.95) !important;
    box-shadow: none !important;
    gap: 0 !important;
}

#pharmacy-modal .buy-potion-btn .ui-btn-icon,
#pharmacy-modal .buy-potion-btn i[class*="fa-"] {
    display: none !important;
}

#pharmacy-modal .buy-potion-btn:hover {
    filter: brightness(1.06) saturate(1.08) !important;
    transform: translateY(-1px) !important;
}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #decompose-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/recycle.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #pharmacy-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/pharmacy.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #auction-house-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/item_sale.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #refine-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/magic_workshop.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #rebirth-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/advance.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #lottery-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/lottery.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #task-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/daily_task.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #world-boss-shortcut-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/blacksmith.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #adventure-farm-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/farm.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #adventure-arena-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/partner_equipment.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #adventure-skills-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/spell.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #craft-btn-toolbar.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/craft.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #repair-all-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/repair.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #sell-all-equip-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/equipment_sale.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #sell-all-items-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/item_sale.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat #adventure-feature-dock #auto-sell-btn.adventure-feature-btn{background:transparent url('../images/q_capsule_buttons/hd/feature/auto_sale.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-inventory-equip #tab-player-equip{background:transparent url('../images/q_capsule_buttons/hd/tabs/player_equipment.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-inventory-equip #tab-hero-equip{background:transparent url('../images/q_capsule_buttons/hd/tabs/partner_equipment.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-inventory-equip #tab-inventory{background:transparent url('../images/q_capsule_buttons/hd/tabs/backpack.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-inventory-equip #tab-warehouse{background:transparent url('../images/q_capsule_buttons/hd/tabs/warehouse.png?v=clean2') center/100% 100% no-repeat!important}
html body[data-active-panel="combat"] #panel-combat .combat-bottom-toolbar #adventure-feature-dock.adventure-feature-dock > button.adventure-feature-btn {
    height: 32px !important;
    max-height: 32px !important;
    min-height: 32px !important;
    line-height: 32px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
html body[data-active-panel="combat"] #panel-combat .combat-bottom-toolbar #adventure-feature-dock.adventure-feature-dock {
    grid-auto-rows: 32px !important;
    row-gap: 5px !important;
}
html body[data-active-panel="combat"] #panel-combat .combat-bottom-toolbar #adventure-feature-dock.adventure-feature-dock > button.adventure-feature-btn#auto-sell-btn {
    padding-left: 48px !important;
}
#combat-cards-container .hero-wrapper.hidden,
#combat-cards-container .hero-wrapper[style*="display:none"],
#combat-cards-container .hero-wrapper[style*="display: none"] {
    display: none !important;
}

/* Player info: use the same icon and hover-detail language as the backpack. */
#player-info-modal .player-info-section-title {
    justify-content: flex-start !important;
}

#player-info-modal .player-info-equip-switch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 0;
}

#player-info-modal .player-info-equip-switch .btn {
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    line-height: 1;
}

#player-info-modal .player-info-equip-switch .btn.active {
    border-color: #48b969;
    background: linear-gradient(180deg, #75d97c, #4fbe61);
    color: #fffdf7;
}

#player-info-modal .player-info-equipment-grid[hidden],
#player-info-modal .player-info-section-title[hidden] {
    display: none !important;
}

#player-info-modal .player-info-equipment-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 4px;
    display: grid;
    place-items: center;
}

#player-info-modal .player-info-equipment-icon .item-art-icon,
#player-info-modal .player-info-equipment-icon .item-art-icon img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
}

/* Top-level notification system: generated frame keeps every major game message readable. */
#game-toast-layer {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    left: 50%;
    z-index: 200000;
    display: flex;
    width: max-content;
    max-width: calc(100vw - 20px);
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transform: translateX(-50%);
    pointer-events: none;
}

.game-top-toast {
    position: relative;
    display: flex;
    width: fit-content;
    min-width: min(400px, calc(100vw - 20px));
    max-width: 100%;
    height: 50px;
    min-height: 50px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 0 52px;
    color: #4e3924;
    background: url('/data/q_ui/toast_frame.png?v=20260713') center / 100% 100% no-repeat;
    filter: drop-shadow(0 7px 11px rgba(68, 49, 25, 0.24));
    opacity: 0;
    transform: translateY(-18px) scale(0.96);
    transition: opacity 220ms ease, transform 280ms cubic-bezier(.22, .8, .3, 1);
}

.game-top-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.game-top-toast.is-leaving {
    opacity: 0;
    transform: translateY(-13px) scale(0.98);
}

.game-top-toast__icon {
    flex: 0 0 auto;
    margin-right: 8px;
    font-size: 1rem;
    line-height: 1;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8));
}

.game-top-toast__content {
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.game-top-toast--loot .game-top-toast__content,
.game-top-toast--level .game-top-toast__content,
.game-top-toast--success .game-top-toast__content {
    color: #75501e;
}

.game-top-toast--error .game-top-toast__content {
    color: #a24332;
}

@media (max-width: 520px) {
    #game-toast-layer {
        width: max-content;
        max-width: calc(100vw - 12px);
        top: max(4px, env(safe-area-inset-top));
    }

    .game-top-toast {
        height: 50px;
        min-height: 50px;
        padding: 0 52px;
    }

    .game-top-toast__content {
        font-size: 0.84rem;
    }
}

/* Arena roster: compact cards, up to three columns with ten members in each column. */
#panel-arena .arena-shell {
    gap: 8px !important;
}

#panel-arena .arena-target-section,
#panel-arena .arena-enemy-list {
    display: none !important;
}

#panel-arena .arena-status-card {
    min-height: 0 !important;
    padding: 8px 10px !important;
}

#panel-arena .arena-status-card strong {
    font-size: 0.92rem !important;
}

#panel-arena .arena-actions {
    gap: 5px !important;
}

#panel-arena .arena-actions .btn {
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    font-size: 0.72rem !important;
}

#panel-arena .arena-team-card {
    padding: 8px !important;
}

#panel-arena .arena-team-card h4 {
    margin-bottom: 6px !important;
    font-size: 0.88rem !important;
}

#panel-arena .arena-team-list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: repeat(var(--arena-columns, 1), minmax(0, 1fr)) !important;
    grid-template-rows: repeat(10, max-content) !important;
    align-content: start !important;
    gap: 5px !important;
}

#panel-arena .arena-player-card {
    display: grid !important;
    min-height: 0 !important;
    gap: 3px !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
}

#panel-arena .arena-player-top {
    min-height: 16px !important;
    justify-content: flex-start !important;
    gap: 4px !important;
}

#panel-arena .arena-player-top strong,
#panel-arena .arena-target-name {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #4f3e2b !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#panel-arena .arena-target-name {
    display: block !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    text-align: left !important;
}

#panel-arena .arena-player-card.is-enemy:not(.dead) .arena-target-name {
    color: #a6534e !important;
    text-decoration: underline dotted rgba(166, 83, 78, 0.55) !important;
}

#panel-arena .arena-player-card.is-enemy:not(.dead):hover {
    border-color: rgba(90, 196, 103, 0.78) !important;
    box-shadow: 0 0 0 2px rgba(90, 196, 103, 0.16) !important;
}

#panel-arena .arena-hpbar {
    height: 12px !important;
}

#panel-arena .arena-hpbar span {
    font-size: 0.6rem !important;
}

#panel-arena .arena-player-meta,
#panel-arena .arena-player-top > span,
#panel-arena .arena-target-btn {
    display: none !important;
}

#panel-arena .arena-rules-card {
    padding: 10px 12px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.76) !important;
}

#panel-arena .arena-rules-card h4 {
    margin: 0 0 6px !important;
    color: #5d4931 !important;
    font-size: 0.9rem !important;
}

#panel-arena .arena-rules-card ul {
    display: grid !important;
    gap: 4px !important;
    margin: 0 !important;
    padding-left: 18px !important;
    color: #765f42 !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

@media (max-width: 760px) {
    #panel-arena .arena-teams-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Daily task reward rules: compact enough to remain visible with the task details. */
#task-modal .task-rules {
    margin-top: 10px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(230, 207, 168, 0.82) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(255, 252, 238, 0.94), rgba(240, 250, 233, 0.9)) !important;
}

#task-modal .task-rules h4 {
    margin: 0 0 6px !important;
    color: #5d4931 !important;
    font-size: 0.86rem !important;
}

#task-modal .task-rules ul {
    display: grid !important;
    gap: 4px !important;
    margin: 0 !important;
    padding-left: 18px !important;
    color: #765f42 !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

#task-modal .task-rules b {
    color: #4b9c58 !important;
}

/* The log action is kept fully inside its short header on the map scene. */
body[data-active-panel="combat"] #panel-combat .combat-log-header {
    position: relative !important;
    padding-right: 42px !important;
    overflow: visible !important;
}

body[data-active-panel="combat"] #panel-combat #clear-combat-log-btn {
    position: absolute !important;
    top: 50% !important;
    right: 7px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 3px !important;
    transform: translateY(-50%) !important;
    overflow: visible !important;
}

body[data-active-panel="combat"] #panel-combat #clear-combat-log-btn .ui-btn-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
}

/* Strong, separated resource meters remain legible over bright map artwork. */
body[data-active-panel="combat"] #panel-combat .card-meters {
    gap: 4px !important;
    margin-top: 6px !important;
}

body[data-active-panel="combat"] #panel-combat .card-meter {
    height: 14px !important;
    min-height: 14px !important;
    border-color: rgba(72, 47, 35, 0.86) !important;
    background: rgba(49, 39, 32, 0.78) !important;
    box-shadow: inset 0 1px 3px rgba(17, 12, 8, 0.68), 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

body[data-active-panel="combat"] #panel-combat .card-meter-hp .card-meter-fill {
    background: linear-gradient(90deg, #bf3545, #ec5b68) !important;
}

body[data-active-panel="combat"] #panel-combat .card-meter-mp .card-meter-fill {
    background: linear-gradient(90deg, #176eae, #259bd9) !important;
}

body[data-active-panel="combat"] #panel-combat .card-meter span {
    color: #fffdf2 !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 1px 2px rgba(16, 11, 7, 0.96), 0 0 2px rgba(16, 11, 7, 0.82) !important;
}

body[data-active-panel="combat"] #panel-combat .card-actions {
    margin-top: 8px !important;
}

/* High-contrast combat VFX: generated atlas plus readable, longer-lived damage. */
#panel-combat .combat-effect-layer .floating-damage,
#panel-combat .combat-effect-layer .floating-heal {
    z-index: 30 !important;
    padding: 0.12em 0.38em !important;
    border: 1px solid rgba(255, 236, 177, 0.84) !important;
    border-radius: 999px !important;
    background: rgba(44, 25, 29, 0.78) !important;
    color: #ffe58b !important;
    font-size: clamp(1.28rem, 2.55vw, 1.9rem) !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: 0 2px 2px rgba(23, 8, 11, 0.96), 0 0 10px rgba(255, 175, 61, 0.78) !important;
    box-shadow: 0 5px 13px rgba(34, 10, 12, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    animation: qDamageReadable 1380ms cubic-bezier(.16, .78, .22, 1) forwards !important;
}

#panel-combat .combat-effect-layer .floating-damage.monster-damage {
    color: #fff2b0 !important;
    border-color: rgba(255, 193, 87, 0.96) !important;
    background: rgba(84, 32, 27, 0.84) !important;
}

#panel-combat .combat-effect-layer .floating-damage.critical,
#panel-combat .combat-effect-layer .floating-damage.lethal {
    color: #fff7cf !important;
    font-size: clamp(1.5rem, 3vw, 2.3rem) !important;
    border-color: #ffb143 !important;
    background: rgba(124, 31, 28, 0.88) !important;
    animation-duration: 1580ms !important;
}

#panel-combat .combat-effect-layer .floating-damage.skill {
    color: #e5f7ff !important;
    border-color: rgba(92, 211, 255, 0.96) !important;
    background: rgba(30, 51, 109, 0.84) !important;
}

#panel-combat .combat-effect-layer .floating-damage.poison {
    color: #d7ff99 !important;
    border-color: rgba(129, 232, 86, 0.96) !important;
    background: rgba(31, 83, 43, 0.84) !important;
}

#panel-combat .combat-effect-layer .floating-damage.burn {
    color: #fff1b3 !important;
    border-color: rgba(255, 117, 49, 0.98) !important;
    background: rgba(126, 37, 20, 0.86) !important;
}

#panel-combat .combat-vfx-sprite {
    width: 132px !important;
    height: 148px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-image: url('/data/q_combat_effects/combat-vfx-atlas-v1.png') !important;
    background-repeat: no-repeat !important;
    background-size: 400% 200% !important;
    mix-blend-mode: screen !important;
    filter: drop-shadow(0 0 11px rgba(255, 230, 164, 0.78)) !important;
}

#panel-combat .combat-vfx-sprite.vfx-blade { background-position: 0 0 !important; }
#panel-combat .combat-vfx-sprite.vfx-ice { background-position: 33.333% 0 !important; }
#panel-combat .combat-vfx-sprite.vfx-lunar { background-position: 66.667% 0 !important; }
#panel-combat .combat-vfx-sprite.vfx-nature { background-position: 100% 0 !important; }
#panel-combat .combat-vfx-sprite.vfx-fire { background-position: 0 100% !important; }
#panel-combat .combat-vfx-sprite.vfx-holy { background-position: 33.333% 100% !important; }
#panel-combat .combat-vfx-sprite.vfx-storm { background-position: 66.667% 100% !important; }
#panel-combat .combat-vfx-sprite.vfx-cosmic { background-position: 100% 100% !important; }

#panel-combat .combat-hit-slash.combat-vfx-sprite {
    animation: qVfxSlash 520ms cubic-bezier(.12, .78, .24, 1) forwards !important;
}

#panel-combat .combat-hit-slash.combat-vfx-sprite.from-enemy {
    filter: hue-rotate(132deg) drop-shadow(0 0 12px rgba(121, 255, 186, 0.82)) !important;
}

#panel-combat .combat-skill-burst.combat-vfx-sprite {
    width: 156px !important;
    height: 174px !important;
    animation: qVfxSkillImpact 920ms cubic-bezier(.12, .78, .22, 1) forwards !important;
}

#panel-combat .combat-aoe-ring.fire { border-color: rgba(255, 102, 48, 0.9) !important; box-shadow: 0 0 32px rgba(255, 75, 31, 0.72) !important; }
#panel-combat .combat-aoe-ring.storm { border-color: rgba(100, 219, 255, 0.92) !important; box-shadow: 0 0 34px rgba(84, 160, 255, 0.76) !important; }
#panel-combat .combat-aoe-ring.nature { border-color: rgba(150, 255, 110, 0.9) !important; box-shadow: 0 0 32px rgba(87, 226, 115, 0.7) !important; }
#panel-combat .combat-aoe-ring.cosmic { border-color: rgba(139, 178, 255, 0.94) !important; box-shadow: 0 0 38px rgba(94, 99, 255, 0.76) !important; }

@keyframes qDamageReadable {
    0% { opacity: 0; transform: translate(-50%, -8%) scale(0.62) rotate(-4deg); }
    14% { opacity: 1; transform: translate(-50%, -54%) scale(1.18) rotate(2deg); }
    64% { opacity: 1; transform: translate(-50%, -112%) scale(1.02) rotate(-1deg); }
    100% { opacity: 0; transform: translate(-50%, -168%) scale(0.94) rotate(1deg); }
}

@keyframes qVfxSlash {
    0% { opacity: 0; transform: translate(-86%, -50%) rotate(-28deg) scale(0.48); }
    42% { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(1.08); }
    100% { opacity: 0; transform: translate(-10%, -50%) rotate(8deg) scale(1.34); }
}

@keyframes qVfxSkillImpact {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.36) rotate(-18deg); }
    34% { opacity: 1; transform: translate(-50%, -50%) scale(1.02) rotate(3deg); }
    70% { opacity: 0.82; transform: translate(-50%, -50%) scale(1.28) rotate(13deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.52) rotate(20deg); }
}

/* Combat damage is a short, unboxed number placed close to its target. */
#panel-combat .combat-effect-layer .floating-damage {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: clamp(1.34rem, 2.65vw, 1.96rem) !important;
    line-height: 1 !important;
    text-shadow:
        0 2px 1px rgba(51, 17, 14, 0.96),
        1px 0 1px rgba(51, 17, 14, 0.9),
        -1px 0 1px rgba(51, 17, 14, 0.9),
        0 0 8px rgba(255, 191, 65, 0.7) !important;
    animation: qDamageBrief 760ms cubic-bezier(.16, .76, .24, 1) forwards !important;
}

#panel-combat .combat-effect-layer .floating-damage.monster-damage {
    border: 0 !important;
    background: transparent !important;
}

#panel-combat .combat-effect-layer .floating-damage.critical,
#panel-combat .combat-effect-layer .floating-damage.lethal {
    border: 0 !important;
    background: transparent !important;
    animation-duration: 840ms !important;
}

#panel-combat .combat-effect-layer .floating-damage.skill,
#panel-combat .combat-effect-layer .floating-damage.poison,
#panel-combat .combat-effect-layer .floating-damage.burn {
    border: 0 !important;
    background: transparent !important;
}

@keyframes qDamageBrief {
    0% { opacity: 0; transform: translate(-50%, -10%) scale(0.72); }
    14% { opacity: 1; transform: translate(-50%, -38%) scale(1.12); }
    62% { opacity: 1; transform: translate(-50%, -70%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -102%) scale(0.94); }
}

/* Keep the capacity badge anchored to the sort button on every breakpoint. */
body[data-active-panel="combat"] #sort-inventory-btn {
    position: relative !important;
    overflow: visible !important;
}

/* The inactive storage tab must stay hidden even in the desktop combat layout. */
#panel-inventory-equip #inventory-section[hidden],
#panel-inventory-equip #warehouse-section[hidden] {
    display: none !important;
}